Add Python manager: FastAPI backend + web UI

- main.py: FastAPI app with profile CRUD, start/stop, send message endpoints - profiles.py: asyncio bot lifecycle using simplex-chat Python SDK - db.py: SQLite registry tracking profiles, types, config, addresses - templates/: Jinja2 + HTMX web UI - login.html: token-based auth - index.html: profile list with live status polling, create dialog - profile.html: per-bot dashboard with QR code, contacts/groups, event log, send form - requirements.txt: fastapi, uvicorn, jinja2, simplex-chat - start.sh: one-command startup with venv bootstrap Bot types: echo, broadcast, support (business address), directory, deadmans Run: cd manager && MANAGER_TOKEN=secret ./start.sh Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-03 00:53:41 +01:00
parent 5c80ac310f
commit 11e799188d
10 changed files with 1008 additions and 0 deletions
--- a/manager/templates/base.html
+++ b/manager/templates/base.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{% block title %}SimpleX Manager{% endblock %}</title>
+  <script src="https://unpkg.com/htmx.org@1.9.12/dist/htmx.min.js"></script>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --bg:      #f5f5f7;
+      --card:    #ffffff;
+      --text:    #1d1d1f;
+      --muted:   #6e6e73;
+      --accent:  #0053D0;
+      --green:   #20BD3D;
+      --red:     #DD0000;
+      --border:  #e0e0e5;
+      --shadow:  0 2px 12px rgba(0,0,0,0.08);
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --bg:     #111827;
+        --card:   #0B2A59;
+        --text:   #f5f5f7;
+        --muted:  #9ca3af;
+        --accent: #70F0F9;
+        --border: #1e3a5f;
+        --shadow: none;
+      }
+    }
+
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
+           background: var(--bg); color: var(--text); min-height: 100vh; }
+
+    nav { background: var(--card); border-bottom: 1px solid var(--border);
+          padding: 12px 24px; display: flex; align-items: center; justify-content: space-between;
+          position: sticky; top: 0; z-index: 10; }
+
+    .nav-brand { font-size: 17px; font-weight: 700; color: var(--accent); text-decoration: none; }
+
+    .nav-links a { color: var(--muted); text-decoration: none; font-size: 14px; margin-left: 16px; }
+    .nav-links a:hover { color: var(--accent); }
+
+    .container { max-width: 960px; margin: 0 auto; padding: 32px 20px; }
+
+    h1 { font-size: 28px; font-weight: 700; margin-bottom: 24px; }
+    h2 { font-size: 20px; font-weight: 600; margin-bottom: 16px; }
+
+    .card { background: var(--card); border-radius: 10px; padding: 20px;
+             box-shadow: var(--shadow); margin-bottom: 16px; }
+
+    .btn { display: inline-flex; align-items: center; gap: 6px;
+           padding: 8px 18px; border-radius: 8px; font-size: 14px; font-weight: 600;
+           font-family: inherit; cursor: pointer; border: none; text-decoration: none;
+           transition: opacity 0.15s; }
+    .btn:hover { opacity: 0.85; }
+    .btn-primary { background: var(--accent); color: #fff; }
+    .btn-danger  { background: var(--red); color: #fff; }
+    .btn-success { background: var(--green); color: #fff; }
+    .btn-ghost   { background: transparent; border: 1px solid var(--border); color: var(--text); }
+
+    @media (prefers-color-scheme: dark) {
+      .btn-primary { color: #000; }
+      .btn-success { color: #000; }
+    }
+
+    .badge { display: inline-block; padding: 2px 8px; border-radius: 10px;
+             font-size: 12px; font-weight: 600; }
+    .badge-green { background: #d1fae5; color: #065f46; }
+    .badge-red   { background: #fee2e2; color: #991b1b; }
+
+    @media (prefers-color-scheme: dark) {
+      .badge-green { background: #064e3b; color: #6ee7b7; }
+      .badge-red   { background: #7f1d1d; color: #fca5a5; }
+    }
+
+    input, select, textarea {
+      width: 100%; padding: 9px 12px; font-size: 14px; font-family: inherit;
+      border: 1px solid var(--border); border-radius: 8px;
+      background: var(--bg); color: var(--text); outline: none;
+      transition: border-color 0.15s;
+    }
+    input:focus, select:focus, textarea:focus { border-color: var(--accent); }
+
+    label { display: block; font-size: 13px; font-weight: 600;
+            color: var(--muted); margin-bottom: 4px; }
+
+    .field { margin-bottom: 14px; }
+
+    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+    @media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }
+
+    .monospace { font-family: monospace; font-size: 12px; }
+
+    .log-box { background: #0a0a0f; color: #70F0F9; border-radius: 8px;
+               padding: 12px; font-family: monospace; font-size: 12px;
+               height: 200px; overflow-y: auto; white-space: pre-wrap; }
+
+    .tag { display: inline-block; padding: 2px 8px; border-radius: 6px;
+           font-size: 12px; background: var(--border); color: var(--muted); }
+
+    .flex { display: flex; align-items: center; gap: 10px; }
+    .flex-between { display: flex; align-items: center; justify-content: space-between; }
+    .gap-8 { gap: 8px; }
+    .mt-8 { margin-top: 8px; }
+    .mt-16 { margin-top: 16px; }
+    .muted { color: var(--muted); font-size: 13px; }
+
+    table { width: 100%; border-collapse: collapse; font-size: 14px; }
+    th { text-align: left; color: var(--muted); font-size: 12px; font-weight: 600;
+         padding: 8px 12px; border-bottom: 1px solid var(--border); }
+    td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
+    tr:last-child td { border-bottom: none; }
+
+    .htmx-indicator { opacity: 0; transition: opacity 0.2s; }
+    .htmx-request .htmx-indicator { opacity: 1; }
+
+    dialog { background: var(--card); color: var(--text); border: 1px solid var(--border);
+             border-radius: 12px; padding: 28px; max-width: 480px; width: 90%; }
+    dialog::backdrop { background: rgba(0,0,0,0.5); }
+  </style>
+  {% block head %}{% endblock %}
+</head>
+<body>
+<nav>
+  <a class="nav-brand" href="/">SimpleX Manager</a>
+  <div class="nav-links">
+    <a href="/">Profiles</a>
+    <a href="/logout">Logout</a>
+  </div>
+</nav>
+<div class="container">
+  {% block content %}{% endblock %}
+</div>
+</body>
+</html>
--- a/manager/templates/index.html
+++ b/manager/templates/index.html
@@ -0,0 +1,112 @@
+{% extends "base.html" %}
+{% block title %}Profiles — SimpleX Manager{% endblock %}
+
+{% block content %}
+<div class="flex-between" style="margin-bottom: 24px;">
+  <h1 style="margin:0">Bot Profiles</h1>
+  <button class="btn btn-primary" onclick="document.getElementById('create-dialog').showModal()">+ New Profile</button>
+</div>
+
+{% if profiles %}
+<div id="profile-list">
+  {% for p in profiles %}
+  <div class="card" id="profile-{{ p.id }}">
+    <div class="flex-between">
+      <div class="flex gap-8">
+        <strong>{{ p.name }}</strong>
+        <span class="tag">{{ p.bot_type }}</span>
+        <span class="badge {% if p.running %}badge-green{% else %}badge-red{% endif %}"
+              id="status-{{ p.id }}"
+              hx-get="/api/profiles/{{ p.id }}/status"
+              hx-trigger="every 5s"
+              hx-swap="none"
+              hx-on::after-request="updateStatus({{ p.id }}, event)">
+          {% if p.running %}running{% else %}stopped{% endif %}
+        </span>
+      </div>
+      <div class="flex gap-8">
+        <a href="/profile/{{ p.id }}" class="btn btn-ghost" style="padding: 6px 14px; font-size: 13px;">View</a>
+        <button class="btn btn-success" style="padding: 6px 14px; font-size: 13px;"
+                hx-post="/api/profiles/{{ p.id }}/start"
+                hx-headers='{"X-Token": "{{ request.cookies.get(\"token\", \"\") }}"}'
+                hx-swap="none"
+                onclick="this.textContent='Starting…'">Start</button>
+        <button class="btn btn-danger" style="padding: 6px 14px; font-size: 13px;"
+                hx-post="/api/profiles/{{ p.id }}/stop"
+                hx-headers='{"X-Token": "{{ request.cookies.get(\"token\", \"\") }}"}'
+                hx-swap="none"
+                onclick="this.textContent='Stopping…'">Stop</button>
+      </div>
+    </div>
+    {% if p.address %}
+    <div class="muted mt-8 monospace" style="word-break:break-all;">{{ p.address }}</div>
+    {% endif %}
+  </div>
+  {% endfor %}
+</div>
+{% else %}
+<div class="card" style="text-align:center; padding: 48px; color: var(--muted);">
+  No profiles yet. Create one to get started.
+</div>
+{% endif %}
+
+<!-- Create dialog -->
+<dialog id="create-dialog">
+  <h2 style="margin-bottom:20px;">New Bot Profile</h2>
+  <form id="create-form">
+    <div class="field">
+      <label>Name</label>
+      <input type="text" name="name" placeholder="My Support Bot" required>
+    </div>
+    <div class="field">
+      <label>Bot Type</label>
+      <select name="bot_type">
+        {% for t in bot_types %}
+        <option value="{{ t }}">{{ t }}</option>
+        {% endfor %}
+      </select>
+    </div>
+    <div class="field">
+      <label>Welcome Message</label>
+      <input type="text" name="welcome_message" placeholder="Welcome! How can I help?">
+    </div>
+    <div class="flex gap-8 mt-16" style="justify-content: flex-end;">
+      <button type="button" class="btn btn-ghost" onclick="document.getElementById('create-dialog').close()">Cancel</button>
+      <button type="submit" class="btn btn-primary">Create</button>
+    </div>
+  </form>
+</dialog>
+
+<script>
+function updateStatus(id, event) {
+  try {
+    const data = JSON.parse(event.detail.xhr.responseText)
+    const badge = document.getElementById('status-' + id)
+    if (!badge) return
+    badge.textContent = data.running ? 'running' : 'stopped'
+    badge.className = 'badge ' + (data.running ? 'badge-green' : 'badge-red')
+  } catch(e) {}
+}
+
+document.getElementById('create-form').addEventListener('submit', async (e) => {
+  e.preventDefault()
+  const fd = new FormData(e.target)
+  const config = {}
+  const welcome = fd.get('welcome_message')
+  if (welcome) config.welcome_message = welcome
+
+  const resp = await fetch('/api/profiles', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json', 'X-Token': document.cookie.match(/token=([^;]+)/)?.[1] || ''},
+    body: JSON.stringify({name: fd.get('name'), bot_type: fd.get('bot_type'), config})
+  })
+  if (resp.ok) {
+    document.getElementById('create-dialog').close()
+    location.reload()
+  } else {
+    const err = await resp.json()
+    alert('Error: ' + (err.detail || 'unknown'))
+  }
+})
+</script>
+{% endblock %}
--- a/manager/templates/login.html
+++ b/manager/templates/login.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SimpleX Manager — Login</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :root { --bg: #f5f5f7; --card: #fff; --text: #1d1d1f; --accent: #0053D0; --border: #e0e0e5; }
+    @media (prefers-color-scheme: dark) {
+      :root { --bg: #111827; --card: #0B2A59; --text: #f5f5f7; --accent: #70F0F9; --border: #1e3a5f; }
+    }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
+           background: var(--bg); color: var(--text); min-height: 100vh;
+           display: flex; align-items: center; justify-content: center; }
+    .box { background: var(--card); border-radius: 12px; padding: 36px 32px;
+           width: 100%; max-width: 360px; box-shadow: 0 4px 24px rgba(0,0,0,0.1); }
+    h1 { font-size: 22px; font-weight: 700; color: var(--accent); margin-bottom: 24px; text-align: center; }
+    label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
+    input { width: 100%; padding: 10px 12px; font-size: 15px; border: 1px solid var(--border);
+            border-radius: 8px; background: var(--bg); color: var(--text); outline: none; margin-bottom: 16px; }
+    input:focus { border-color: var(--accent); }
+    button { width: 100%; padding: 10px; background: var(--accent); color: #fff; border: none;
+             border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
+    @media (prefers-color-scheme: dark) { button { color: #000; } }
+    .error { color: #DD0000; font-size: 13px; margin-bottom: 12px; text-align: center; }
+  </style>
+</head>
+<body>
+  <div class="box">
+    <h1>SimpleX Manager</h1>
+    {% if error %}<div class="error">{{ error }}</div>{% endif %}
+    <form method="post" action="/login">
+      <label for="token">Access Token</label>
+      <input type="password" id="token" name="token" placeholder="Enter token…" autofocus>
+      <button type="submit">Sign in</button>
+    </form>
+  </div>
+</body>
+</html>
--- a/manager/templates/profile.html
+++ b/manager/templates/profile.html
@@ -0,0 +1,190 @@
+{% extends "base.html" %}
+{% block title %}{{ profile.name }} — SimpleX Manager{% endblock %}
+
+{% block head %}
+<style>
+  .qr-wrap { text-align: center; padding: 16px; }
+  .qr-wrap canvas { border-radius: 8px; }
+  .contact-row td:first-child { font-weight: 600; }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="flex-between" style="margin-bottom: 20px;">
+  <div class="flex gap-8">
+    <a href="/" class="muted" style="text-decoration:none;">← Profiles</a>
+    <span class="muted">/</span>
+    <strong>{{ profile.name }}</strong>
+    <span class="tag">{{ profile.bot_type }}</span>
+    <span class="badge {% if profile.running %}badge-green{% else %}badge-red{% endif %}" id="status-badge">
+      {% if profile.running %}running{% else %}stopped{% endif %}
+    </span>
+  </div>
+  <div class="flex gap-8">
+    {% if profile.running %}
+    <button class="btn btn-danger"
+            hx-post="/api/profiles/{{ profile.id }}/stop"
+            hx-headers='{"X-Token": "{{ request.cookies.get(\"token\", \"\") }}"}'
+            hx-swap="none"
+            hx-on::after-request="location.reload()">Stop</button>
+    {% else %}
+    <button class="btn btn-success"
+            hx-post="/api/profiles/{{ profile.id }}/start"
+            hx-headers='{"X-Token": "{{ request.cookies.get(\"token\", \"\") }}"}'
+            hx-swap="none"
+            hx-on::after-request="location.reload()">Start</button>
+    {% endif %}
+    <button class="btn btn-danger" onclick="confirmDelete()">Delete</button>
+  </div>
+</div>
+
+<div class="grid-2">
+  <!-- Left column -->
+  <div>
+    <!-- Address / QR -->
+    <div class="card">
+      <h2>Address</h2>
+      {% if profile.address %}
+      <div class="monospace muted" style="word-break:break-all; margin-bottom:12px;">{{ profile.address }}</div>
+      <div class="qr-wrap">
+        <canvas id="qr-canvas"></canvas>
+      </div>
+      <script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
+      <script>
+        QRCode.toCanvas(document.getElementById('qr-canvas'), {{ profile.address | tojson }}, {width: 200}, () => {})
+      </script>
+      {% else %}
+      <p class="muted">Start the bot to generate an address.</p>
+      {% endif %}
+    </div>
+
+    <!-- Config -->
+    <div class="card">
+      <h2>Config</h2>
+      <table>
+        <tr><th>Key</th><th>Value</th></tr>
+        {% for k, v in profile.config.items() %}
+        <tr><td>{{ k }}</td><td>{{ v }}</td></tr>
+        {% else %}
+        <tr><td colspan="2" class="muted">No config set.</td></tr>
+        {% endfor %}
+      </table>
+    </div>
+  </div>
+
+  <!-- Right column -->
+  <div>
+    <!-- Send message -->
+    <div class="card">
+      <h2>Send Message</h2>
+      <form id="send-form">
+        <div class="field">
+          <label>To (contact or group name)</label>
+          <input type="text" name="to" placeholder="Alice" list="contact-list">
+          <datalist id="contact-list">
+            {% for c in contacts %}<option value="{{ c.localDisplayName }}">{% endfor %}
+            {% for g in groups %}<option value="{{ g.groupInfo.groupProfile.displayName }}">{% endfor %}
+          </datalist>
+        </div>
+        <div class="field">
+          <label>Message</label>
+          <textarea name="text" rows="3" placeholder="Hello…"></textarea>
+        </div>
+        <button type="submit" class="btn btn-primary">Send</button>
+        <span id="send-result" class="muted" style="margin-left:10px;"></span>
+      </form>
+    </div>
+
+    <!-- Contacts -->
+    <div class="card">
+      <h2>Contacts ({{ contacts | length }})</h2>
+      {% if contacts %}
+      <table>
+        <tr><th>Name</th><th>ID</th></tr>
+        {% for c in contacts %}
+        <tr class="contact-row">
+          <td>{{ c.localDisplayName }}</td>
+          <td class="muted monospace">{{ c.contactId }}</td>
+        </tr>
+        {% endfor %}
+      </table>
+      {% else %}
+      <p class="muted">No contacts yet.</p>
+      {% endif %}
+    </div>
+
+    <!-- Groups -->
+    <div class="card">
+      <h2>Groups ({{ groups | length }})</h2>
+      {% if groups %}
+      <table>
+        <tr><th>Name</th><th>Members</th></tr>
+        {% for g in groups %}
+        <tr>
+          <td>{{ g.groupInfo.groupProfile.displayName }}</td>
+          <td class="muted">{{ g.members | length }}</td>
+        </tr>
+        {% endfor %}
+      </table>
+      {% else %}
+      <p class="muted">No groups yet.</p>
+      {% endif %}
+    </div>
+
+    <!-- Event log -->
+    <div class="card">
+      <div class="flex-between" style="margin-bottom:10px;">
+        <h2 style="margin:0;">Event Log</h2>
+        <button class="btn btn-ghost" style="font-size:12px;padding:4px 10px;"
+                hx-get="/api/profiles/{{ profile.id }}/status"
+                hx-headers='{"X-Token": "{{ request.cookies.get(\"token\", \"\") }}"}'
+                hx-swap="none"
+                hx-on::after-request="refreshLog(event)">Refresh</button>
+      </div>
+      <div class="log-box" id="log-box">{% for line in log_lines %}{{ line }}
+{% endfor %}</div>
+    </div>
+  </div>
+</div>
+
+<script>
+document.getElementById('send-form').addEventListener('submit', async (e) => {
+  e.preventDefault()
+  const fd = new FormData(e.target)
+  const result = document.getElementById('send-result')
+  result.textContent = 'Sending…'
+  const resp = await fetch('/api/profiles/{{ profile.id }}/send', {
+    method: 'POST',
+    headers: {'Content-Type': 'application/json', 'X-Token': document.cookie.match(/token=([^;]+)/)?.[1] || ''},
+    body: JSON.stringify({to: fd.get('to'), text: fd.get('text')})
+  })
+  const data = await resp.json()
+  result.textContent = data.ok ? '✓ Sent' : '✗ Failed'
+  setTimeout(() => result.textContent = '', 3000)
+})
+
+function refreshLog(event) {
+  try {
+    const data = JSON.parse(event.detail.xhr.responseText)
+    document.getElementById('log-box').textContent = data.log.join('\n')
+    document.getElementById('status-badge').textContent = data.running ? 'running' : 'stopped'
+    document.getElementById('status-badge').className = 'badge ' + (data.running ? 'badge-green' : 'badge-red')
+  } catch(e) {}
+}
+
+function confirmDelete() {
+  if (!confirm('Delete this profile? This cannot be undone.')) return
+  fetch('/api/profiles/{{ profile.id }}', {
+    method: 'DELETE',
+    headers: {'X-Token': document.cookie.match(/token=([^;]+)/)?.[1] || ''}
+  }).then(() => location.href = '/')
+}
+
+// Auto-refresh log every 10s if running
+{% if profile.running %}
+setInterval(() => {
+  document.querySelector('[hx-get="/api/profiles/{{ profile.id }}/status"]')?.click()
+}, 10000)
+{% endif %}
+</script>
+{% endblock %}