agent-office 0.5.0 → 0.6.1

package/dist/commands/communicator.js

@@ -1,2232 +0,0 @@
-import express from "express";
-import { exec } from "child_process";
-import { readFile, writeFile, mkdir } from "fs/promises";
-import { dirname } from "path";
-// ── API helpers ───────────────────────────────────────────────────────────────
-async function apiFetch(agentUrl, password, path, init = {}) {
-    const res = await fetch(`${agentUrl}${path}`, {
-        ...init,
-        headers: {
-            "Content-Type": "application/json",
-            "Authorization": `Bearer ${password}`,
-            ...(init.headers ?? {}),
-        },
-    });
-    if (!res.ok) {
-        const body = await res.json().catch(() => ({}));
-        throw new Error(body.error ?? `HTTP ${res.status}`);
-    }
-    return res.json();
-}
-async function getHumanName(agentUrl, password) {
-    const cfg = await apiFetch(agentUrl, password, "/config");
-    return cfg.human_name ?? "Human";
-}
-async function fetchSessions(agentUrl, password) {
-    return apiFetch(agentUrl, password, "/sessions");
-}
-async function fetchCoworkerStatus(agentUrl, password, coworker) {
-    const sessions = await fetchSessions(agentUrl, password);
-    const session = sessions.find((s) => s.name === coworker);
-    return session?.status ?? null;
-}
-async function fetchMessages(agentUrl, password, humanName, coworker) {
-    const [sent, received] = await Promise.all([
-        apiFetch(agentUrl, password, `/messages/${encodeURIComponent(humanName)}?sent=true`),
-        apiFetch(agentUrl, password, `/messages/${encodeURIComponent(humanName)}`),
-    ]);
-    // sent: from humanName → coworker
-    const sentToCoworker = sent.filter((m) => m.to_name === coworker);
-    // received: to humanName, from coworker
-    const receivedFromCoworker = received.filter((m) => m.from_name === coworker);
-    const all = [...sentToCoworker, ...receivedFromCoworker];
-    all.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
-    return all;
-}
-async function markRead(agentUrl, password, id) {
-    await apiFetch(agentUrl, password, `/messages/${id}/read`, { method: "POST" });
-}
-async function fetchCronRequests(agentUrl, password, status) {
-    const params = status ? `?status=${encodeURIComponent(status)}` : "";
-    return apiFetch(agentUrl, password, `/cron-requests${params}`);
-}
-async function approveCronRequest(agentUrl, password, id, notes) {
-    await apiFetch(agentUrl, password, `/cron-requests/${id}/approve`, {
-        method: "POST",
-        body: JSON.stringify({ notes })
-    });
-}
-async function rejectCronRequest(agentUrl, password, id, notes) {
-    await apiFetch(agentUrl, password, `/cron-requests/${id}/reject`, {
-        method: "POST",
-        body: JSON.stringify({ notes })
-    });
-}
-// ── HTML helpers ──────────────────────────────────────────────────────────────
-function escapeHtml(str) {
-    return str
-        .replace(/&/g, "&")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;")
-        .replace(/"/g, "&quot;")
-        .replace(/'/g, "&#39;");
-}
-function formatTime(iso) {
-    return new Date(iso).toLocaleString(undefined, {
-        month: "short", day: "numeric",
-        hour: "2-digit", minute: "2-digit",
-    });
-}
-function formatFullTime(iso) {
-    return new Date(iso).toLocaleString(undefined, {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-        hour: "2-digit",
-        minute: "2-digit",
-    });
-}
-function renderMessage(msg, humanName, spacingClass) {
-    const isMine = msg.from_name === humanName;
-    const bubbleClass = isMine ? "bubble bubble-mine" : "bubble bubble-theirs";
-    const wrapClass = `msg-wrap ${isMine ? "msg-wrap-mine" : "msg-wrap-theirs"} ${spacingClass}`;
-    // Base64 encode to preserve newlines and special chars reliably
-    const bodyEncoded = Buffer.from(msg.body).toString('base64');
-    const unreadDot = !isMine && !msg.read ? `<span class="unread-dot"></span>` : "";
-    return `<div class="${wrapClass}" data-id="${msg.id}">
-  <div class="${bubbleClass}">
-    <div class="bubble-body markdown-body" data-markdown-b64="${bodyEncoded}"></div>
-    <div class="bubble-time">${unreadDot}${formatTime(msg.created_at)}</div>
-  </div>
-</div>`;
-}
-function renderMessages(msgs, humanName) {
-    const lastId = msgs.length > 0 ? msgs[msgs.length - 1].id : 0;
-    const inner = msgs.length === 0
-        ? `<div class="empty-state">No messages yet. Say hello!</div>`
-        : msgs.map((m, i) => {
-            const prev = msgs[i - 1];
-            // larger gap when the sender changes, tight gap within a run
-            const spacingClass = (!prev || prev.from_name !== m.from_name) ? "gap-sender-change" : "gap-same-sender";
-            return renderMessage(m, humanName, spacingClass);
-        }).join("\n");
-    // data-last-id lets the client detect whether new messages actually arrived
-    return `<div id="messages-inner" data-last-id="${lastId}">${inner}</div>`;
-}
-// ── Full page ─────────────────────────────────────────────────────────────────
-function renderDropdown(coworker, coworkers) {
-    const selected = coworker ?? "";
-    const dropdownOptions = coworkers.filter(c => !c.isHuman);
-    const totalUnread = dropdownOptions.reduce((sum, c) => sum + (c.unreadMessages ?? 0), 0);
-    const unreadDot = totalUnread > 0 ? '<span class="unread-badge"></span>' : '';
-    const coworkerOptions = dropdownOptions.map(c => {
-        const unreadBadge = c.unreadMessages && c.unreadMessages > 0 ? ` (${c.unreadMessages})` : '';
-        return `<option value="${escapeHtml(c.name)}" ${c.name === selected ? 'selected' : ''}>${escapeHtml(c.name)}${unreadBadge}</option>`;
-    }).join('');
-    return `<select id="coworker-select" class="coworker-select" onchange="switchCoworker(this.value)">
-        <option value="">Select coworker…</option>
-        ${coworkerOptions}
-      </select>
-      ${unreadDot}`;
-}
-function renderPage(coworker, coworkers, msgs, humanName) {
-    const msgsHtml = renderMessages(msgs, humanName);
-    const selected = coworker ?? "";
-    const dropdownHtml = renderDropdown(coworker, coworkers);
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <title>${selected ? escapeHtml(selected) + ' — ' : ''}agent-office</title>
-  <script src="https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.5.1/github-markdown-light.min.css" media="(prefers-color-scheme: light)">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.5.1/github-markdown-dark.min.css" media="(prefers-color-scheme: dark)">
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-    :root {
-      --bg: #0f1117;
-      --surface: #1a1d27;
-      --surface2: #22263a;
-      --border: #2e3248;
-      --accent: #6c8eff;
-      --accent-dim: #3d52a0;
-      --text: #e2e8f0;
-      --text-dim: #8892a4;
-      --mine-bg: #2a3a6e;
-      --mine-border: #4a6fa5;
-      --theirs-bg: #1e2235;
-      --theirs-border: #2e3a55;
-      --red: #ff6b6b;
-      --green: #6bffb8;
-      --radius: 18px;
-      --radius-sm: 8px;
-      --header-h: 56px;
-      --input-h: 64px;
-      font-size: 16px;
-    }
-
-    html, body {
-      height: 100%;
-      background: var(--bg);
-      color: var(--text);
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-      overflow: hidden;
-    }
-
-    /* ── Layout ── */
-    .app {
-      display: flex;
-      flex-direction: column;
-      height: 100dvh;
-    }
-
-    /* ── Header ── */
-    .header {
-      flex-shrink: 0;
-      height: var(--header-h);
-      background: var(--surface);
-      border-bottom: 1px solid var(--border);
-      display: flex;
-      align-items: center;
-      padding: 0 16px;
-      gap: 12px;
-    }
-
-    .avatar {
-      width: 36px;
-      height: 36px;
-      border-radius: 50%;
-      background: var(--accent-dim);
-      color: var(--accent);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: 700;
-      font-size: 15px;
-      flex-shrink: 0;
-    }
-
-    .header-info { flex: 1; min-width: 0; }
-    .select-wrapper { display: inline-flex; align-items: center; position: relative; }
-    .coworker-select {
-      font-weight: 600;
-      font-size: 15px;
-      background: transparent;
-      border: none;
-      color: var(--text);
-      cursor: pointer;
-      padding: 0;
-      margin: 0;
-      outline: none;
-      max-width: 180px;
-    }
-    .coworker-select:focus { color: var(--accent); }
-    .coworker-select option { background: var(--surface); color: var(--text); }
-    .unread-badge {
-      width: 8px;
-      height: 8px;
-      background: #ff4444;
-      border-radius: 50%;
-      margin-left: 6px;
-      flex-shrink: 0;
-    }
-    .header-name {
-      font-weight: 600;
-      font-size: 15px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .header-sub {
-      font-size: 11px;
-      color: var(--text-dim);
-    }
-
-    .refresh-indicator {
-      width: 8px; height: 8px;
-      border-radius: 50%;
-      background: var(--text-dim);
-      flex-shrink: 0;
-      transition: background 0.3s;
-    }
-    .refresh-indicator.active { background: var(--green); }
-
-    /* ── Reset button ── */
-    .header-link {
-      color: var(--text-dim);
-      text-decoration: none;
-      font-size: 18px;
-      margin-right: 8px;
-      transition: color 0.15s;
-      flex-shrink: 0;
-    }
-    .header-link:hover { color: var(--accent); }
-
-    .reset-btn {
-      background: none;
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      color: var(--text-dim);
-      cursor: pointer;
-      font-size: 12px;
-      padding: 5px 10px;
-      flex-shrink: 0;
-      transition: border-color 0.15s, color 0.15s;
-      white-space: nowrap;
-    }
-    .reset-btn:hover { border-color: var(--red); color: var(--red); }
-    .reset-btn:active { opacity: 0.7; }
-    .reset-btn.htmx-request { opacity: 0.5; pointer-events: none; }
-
-    #reset-status {
-      position: fixed;
-      bottom: 80px;
-      left: 50%;
-      transform: translateX(-50%);
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      padding: 8px 16px;
-      font-size: 13px;
-      pointer-events: none;
-      opacity: 0;
-      transition: opacity 0.2s;
-      white-space: nowrap;
-      z-index: 10;
-    }
-    #reset-status.visible { opacity: 1; }
-
-    /* ── Message list ── */
-    .messages-outer {
-      flex: 1;
-      overflow-y: auto;
-      overscroll-behavior: contain;
-      padding: 12px 0 4px;
-      scroll-behavior: smooth;
-    }
-
-    /* Subtle scrollbar */
-    .messages-outer::-webkit-scrollbar { width: 4px; }
-    .messages-outer::-webkit-scrollbar-track { background: transparent; }
-    .messages-outer::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
-
-    #messages { padding: 0 12px; display: flex; flex-direction: column; }
-    .gap-same-sender   { margin-top: 3px; }
-    .gap-sender-change { margin-top: 12px; }
-
-    .empty-state {
-      text-align: center;
-      color: var(--text-dim);
-      font-size: 14px;
-      margin-top: 48px;
-    }
-
-    /* ── Bubbles ── */
-    .msg-wrap { display: flex; }
-    .msg-wrap-mine { justify-content: flex-end; }
-    .msg-wrap-theirs { justify-content: flex-start; }
-
-    .bubble {
-      max-width: min(72%, 480px);
-      padding: 10px 14px 6px;
-      border-radius: var(--radius);
-      word-break: break-word;
-      line-height: 1.45;
-    }
-
-    .bubble-mine {
-      background: var(--mine-bg);
-      border: 1px solid var(--mine-border);
-      border-bottom-right-radius: var(--radius-sm);
-    }
-    .bubble-theirs {
-      background: var(--theirs-bg);
-      border: 1px solid var(--theirs-border);
-      border-bottom-left-radius: var(--radius-sm);
-    }
-
-    .bubble-body { font-size: 14.5px; }
-    .bubble-body.markdown-body {
-      background: transparent;
-      color: inherit;
-      font-size: 14px;
-      line-height: 1.5;
-    }
-    .bubble-body.markdown-body p { margin: 0 0 8px 0; }
-    .bubble-body.markdown-body p:last-child { margin-bottom: 0; }
-    .bubble-body.markdown-body pre {
-      background: rgba(0,0,0,0.3);
-      border-radius: 6px;
-      padding: 8px 12px;
-      overflow-x: auto;
-      margin: 8px 0;
-    }
-    .bubble-body.markdown-body code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 5px;
-      border-radius: 3px;
-      font-size: 13px;
-      font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-    }
-    .bubble-body.markdown-body pre code {
-      background: transparent;
-      padding: 0;
-    }
-    .bubble-body.markdown-body ul, .bubble-body.markdown-body ol {
-      margin: 8px 0;
-      padding-left: 20px;
-    }
-    .bubble-body.markdown-body li { margin: 4px 0; }
-    .bubble-body.markdown-body blockquote {
-      border-left: 3px solid var(--accent);
-      margin: 8px 0;
-      padding-left: 12px;
-      color: var(--text-dim);
-    }
-    .bubble-body.markdown-body h1, .bubble-body.markdown-body h2,
-    .bubble-body.markdown-body h3, .bubble-body.markdown-body h4 {
-      margin: 12px 0 8px 0;
-      font-size: 15px;
-      font-weight: 600;
-    }
-    .bubble-body.markdown-body table {
-      border-collapse: collapse;
-      margin: 8px 0;
-      font-size: 13px;
-    }
-    .bubble-body.markdown-body th, .bubble-body.markdown-body td {
-      border: 1px solid var(--border);
-      padding: 6px 10px;
-    }
-    .bubble-body.markdown-body th {
-      background: var(--surface2);
-    }
-    .bubble-body.markdown-body strong,
-    .bubble-body.markdown-body b {
-      color: #ffffff;
-      font-weight: 600;
-    }
-    .bubble-time {
-      font-size: 10px;
-      color: var(--text-dim);
-      margin-top: 4px;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-    .msg-wrap-mine .bubble-time { justify-content: flex-end; }
-
-    .unread-dot {
-      width: 6px; height: 6px;
-      border-radius: 50%;
-      background: var(--accent);
-      flex-shrink: 0;
-    }
-
-    /* ── Input bar ── */
-    .input-bar {
-      flex-shrink: 0;
-      background: var(--surface);
-      border-top: 1px solid var(--border);
-      padding: 10px 12px;
-      padding-bottom: calc(10px + env(safe-area-inset-bottom));
-    }
-
-    .input-form { display: flex; gap: 8px; align-items: flex-end; }
-
-    .input-textarea {
-      flex: 1;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: 22px;
-      color: var(--text);
-      font-size: 15px;
-      line-height: 1.4;
-      padding: 10px 16px;
-      resize: none;
-      min-height: 44px;
-      max-height: 120px;
-      overflow-y: auto;
-      outline: none;
-      font-family: inherit;
-      transition: border-color 0.15s;
-    }
-    .input-textarea:focus { border-color: var(--accent-dim); }
-    .input-textarea::placeholder { color: var(--text-dim); }
-
-    .send-btn {
-      width: 44px; height: 44px;
-      border-radius: 50%;
-      background: var(--accent);
-      border: none;
-      color: #fff;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      transition: background 0.15s, transform 0.1s;
-    }
-    .send-btn:hover { background: #7fa0ff; }
-    .send-btn:active { transform: scale(0.93); }
-    .send-btn svg { width: 20px; height: 20px; }
-    .send-btn.sending { background: var(--accent-dim); opacity: 0.7; cursor: not-allowed; pointer-events: none; }
-    .send-btn.sending svg { display: none; }
-    .send-btn .spinner {
-      display: none;
-      width: 18px; height: 18px;
-      border: 2px solid rgba(255,255,255,0.3);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 0.6s linear infinite;
-    }
-    .send-btn.sending .spinner { display: block; }
-    @keyframes spin { to { transform: rotate(360deg); } }
-
-    /* ── Send error feedback ── */
-    #send-status { min-height: 0; }
-    .send-err { color: var(--red); font-size: 12px; }
-
-    /* ── HTMX request indicator ── */
-    .htmx-request .send-btn { background: var(--accent-dim); }
-
-    /* ── Voice button ── */
-    .voice-btn {
-      width: 36px; height: 36px;
-      border-radius: 50%;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      color: var(--text-dim);
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      transition: all 0.2s;
-      padding: 0;
-    }
-    .voice-btn:hover { border-color: var(--accent); color: var(--accent); }
-    .voice-btn:disabled { opacity: 0.4; cursor: not-allowed; }
-    .voice-btn svg { width: 18px; height: 18px; }
-    .voice-btn.active {
-      background: var(--red);
-      border-color: var(--red);
-      color: #fff;
-      animation: voice-pulse 1.5s ease-in-out infinite;
-    }
-    .voice-btn.connecting {
-      background: var(--accent-dim);
-      border-color: var(--accent);
-      color: var(--accent);
-      animation: voice-pulse 0.8s ease-in-out infinite;
-    }
-    @keyframes voice-pulse {
-      0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4); }
-      50% { box-shadow: 0 0 0 8px rgba(255, 107, 107, 0); }
-    }
-
-    /* ── Voice overlay ── */
-    .voice-overlay {
-      position: absolute;
-      top: var(--header-h);
-      left: 0; right: 0; bottom: 0;
-      background: rgba(15, 17, 23, 0.95);
-      z-index: 50;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      backdrop-filter: blur(8px);
-    }
-    .voice-overlay-content {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 24px;
-      padding: 32px;
-    }
-    .voice-visualizer {
-      position: relative;
-      width: 120px; height: 120px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .voice-ring {
-      position: absolute;
-      width: 100%; height: 100%;
-      border-radius: 50%;
-      border: 2px solid var(--accent);
-      opacity: 0.3;
-      animation: voice-ring-pulse 2s ease-in-out infinite;
-    }
-    .voice-ring-2 { animation-delay: 0.4s; width: 140%; height: 140%; top: -20%; left: -20%; opacity: 0.15; }
-    .voice-ring-3 { animation-delay: 0.8s; width: 180%; height: 180%; top: -40%; left: -40%; opacity: 0.08; }
-    .voice-overlay.speaking .voice-ring { border-color: var(--green); }
-    .voice-overlay.listening .voice-ring { border-color: var(--accent); }
-    @keyframes voice-ring-pulse {
-      0%, 100% { transform: scale(1); opacity: 0.3; }
-      50% { transform: scale(1.1); opacity: 0.1; }
-    }
-    .voice-avatar {
-      width: 64px; height: 64px;
-      border-radius: 50%;
-      background: var(--accent-dim);
-      color: var(--accent);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: 700;
-      font-size: 24px;
-      z-index: 1;
-    }
-    .voice-status {
-      font-size: 16px;
-      color: var(--text);
-      font-weight: 500;
-    }
-    .voice-transcript {
-      font-size: 14px;
-      color: var(--text-dim);
-      text-align: center;
-      max-width: 400px;
-      min-height: 40px;
-      line-height: 1.4;
-    }
-    .voice-end-btn {
-      background: var(--red);
-      border: none;
-      border-radius: 22px;
-      color: #fff;
-      cursor: pointer;
-      font-size: 14px;
-      font-weight: 600;
-      padding: 10px 24px;
-      transition: background 0.15s, transform 0.1s;
-    }
-    .voice-end-btn:hover { background: #ff8888; }
-    .voice-end-btn:active { transform: scale(0.95); }
-  </style>
-</head>
-<body>
-<div class="app">
-
-  <!-- Header -->
-  <div class="header">
-    <div class="avatar">${selected ? escapeHtml(selected.charAt(0).toUpperCase()) : '?'}</div>
-    <div class="header-info">
-      <div class="select-wrapper" id="dropdown-wrapper"
-           hx-get="/dropdown?coworker=${encodeURIComponent(selected)}"
-           hx-trigger="load, every 5s"
-           hx-swap="innerHTML">
-        ${dropdownHtml}
-      </div>
-      <div class="header-sub"
-           id="coworker-status"
-           hx-get="/status?coworker=${encodeURIComponent(selected)}"
-           hx-trigger="load, every 5s"
-           hx-swap="innerHTML"></div>
-    </div>
-    <a href="/cron-requests" class="header-link" title="Manage cron job requests">⚙️</a>
-    <button class="voice-btn" id="voice-btn"
-            onclick="toggleVoice()"
-            title="Voice chat"
-            style="display:none"
-            ${!selected ? 'disabled' : ''}>
-      <svg class="voice-icon-mic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
-        <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
-        <line x1="12" y1="19" x2="12" y2="23"></line>
-        <line x1="8" y1="23" x2="16" y2="23"></line>
-      </svg>
-      <div class="voice-icon-stop" style="display:none">
-        <svg viewBox="0 0 24 24" fill="currentColor">
-          <rect x="6" y="6" width="12" height="12" rx="2"></rect>
-        </svg>
-      </div>
-    </button>
-    <button class="reset-btn"
-            hx-post="/reset?coworker=${encodeURIComponent(selected)}"
-            hx-target="#reset-status"
-            hx-swap="innerHTML"
-            hx-confirm="Reset session? This will revert them to their first message and re-inject the enrollment prompt."
-            hx-on::after-request="showResetStatus()"
-            title="Reset session"
-            ${!selected ? 'disabled' : ''}>
-      ↺ Reset
-    </button>
-    <div class="refresh-indicator" id="refresh-dot"
-         hx-get="/ping"
-         hx-trigger="every 5s"
-         hx-swap="none"
-         hx-on::before-request="this.classList.add('active')"
-         hx-on::after-request="this.classList.remove('active')"></div>
-  </div>
-
-  <div id="reset-status"></div>
-
-  <!-- Voice overlay -->
-  <div id="voice-overlay" class="voice-overlay" style="display:none">
-    <div class="voice-overlay-content">
-      <div class="voice-visualizer" id="voice-visualizer">
-        <div class="voice-ring"></div>
-        <div class="voice-ring voice-ring-2"></div>
-        <div class="voice-ring voice-ring-3"></div>
-        <div class="voice-avatar" id="voice-avatar">?</div>
-      </div>
-      <div class="voice-status" id="voice-status">Connecting...</div>
-      <div class="voice-transcript" id="voice-transcript"></div>
-      <button class="voice-end-btn" onclick="toggleVoice()">End Voice Chat</button>
-    </div>
-  </div>
-
-  <!-- Messages -->
-  <div class="messages-outer" id="messages-outer">
-    <div id="messages"
-         hx-get="/messages?coworker=${encodeURIComponent(selected)}"
-         hx-trigger="load, every 5s"
-         hx-swap="innerHTML">
-      ${msgsHtml}
-    </div>
-  </div>
-
-  <!-- Input -->
-  <div class="input-bar">
-    <div id="send-status"></div>
-    <form class="input-form"
-          hx-post="/send"
-          hx-target="#send-status"
-          hx-swap="innerHTML show:no-scroll"
-          hx-on::after-request="handleSent(event)"
-          hx-on::before-request="this.querySelector('.send-btn').classList.add('sending')"
-          hx-encoding="application/x-www-form-urlencoded">
-      <input type="hidden" name="coworker" value="${escapeHtml(selected)}">
-      <textarea
-        class="input-textarea"
-        name="body"
-        id="msg-input"
-        placeholder="${selected ? 'Message ' + escapeHtml(selected) + '…' : 'Select a coworker to message…'}"
-        rows="1"
-        autocomplete="off"
-        autocorrect="on"
-        spellcheck="true"
-        onkeydown="handleKey(event)"></textarea>
-      <button type="submit" class="send-btn" title="Send">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <line x1="22" y1="2" x2="11" y2="13"></line>
-          <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
-        </svg>
-        <div class="spinner"></div>
-      </button>
-    </form>
-  </div>
-
-</div>
-
-<script>
-  const outer = document.getElementById('messages-outer')
-  const input = document.getElementById('msg-input')
-
-  let lastSeenId = parseInt(document.querySelector('#messages-inner')?.dataset?.lastId ?? '0', 10)
-  let userScrolledUp = false
-
-  function scrollToBottom() {
-    if (!outer) return
-    requestAnimationFrame(() => {
-      outer.scrollTop = outer.scrollHeight
-      // After snapping, clear the flag so future messages auto-scroll again
-      userScrolledUp = false
-    })
-  }
-
-  // Detect when the user manually scrolls up
-  outer.addEventListener('scroll', () => {
-    const distFromBottom = outer.scrollHeight - outer.scrollTop - outer.clientHeight
-    userScrolledUp = distFromBottom > 80
-  })
-
-  // Auto-grow textarea
-  input.addEventListener('input', function() {
-    this.style.height = 'auto'
-    this.style.height = Math.min(this.scrollHeight, 120) + 'px'
-  })
-
-  // Send on Enter (Shift+Enter = newline)
-  function handleKey(e) {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault()
-      const form = e.target.closest('form')
-      if (form && input.value.trim()) htmx.trigger(form, 'submit')
-    }
-  }
-
-  // After send: clear input, re-enable button, force scroll and refresh
-  function handleSent(event) {
-    const form = event.target
-    const btn = form.querySelector('.send-btn')
-    btn.classList.remove('sending')
-    if (event.detail.successful) {
-      input.value = ''
-      input.style.height = 'auto'
-      input.focus()
-      userScrolledUp = false
-      lastSeenId = -1
-      htmx.trigger(document.getElementById('messages'), 'load')
-    }
-  }
-
-  // Scroll to bottom whenever new messages arrive, unless user has scrolled up
-  document.addEventListener('htmx:afterSwap', (e) => {
-    if (e.detail.target.id !== 'messages') return
-    const inner = document.getElementById('messages-inner')
-    const newLastId = parseInt(inner?.dataset?.lastId ?? '0', 10)
-    if (newLastId > lastSeenId) {
-      lastSeenId = newLastId
-      if (!userScrolledUp) scrollToBottom()
-    }
-  })
-
-  // Initial scroll
-  scrollToBottom()
-
-  // Switch to a different coworker — stop any active voice session first
-  function switchCoworker(name) {
-    if (!name) return
-    if (voiceState.active) stopVoice()
-    const url = new URL(window.location.href)
-    url.searchParams.set('coworker', name)
-    window.location.href = url.toString()
-  }
-
-  // Flash the reset status toast then fade it out
-  function showResetStatus() {
-    const el = document.getElementById('reset-status')
-    if (!el) return
-    el.classList.add('visible')
-    clearTimeout(el._hideTimer)
-    el._hideTimer = setTimeout(() => el.classList.remove('visible'), 3000)
-  }
-
-  // Render markdown in chat bubbles
-  function renderMarkdown() {
-    if (typeof marked === 'undefined') return
-    document.querySelectorAll('.markdown-body[data-markdown-b64]').forEach(el => {
-      const b64 = el.getAttribute('data-markdown-b64')
-      if (b64 && !el.hasAttribute('data-rendered')) {
-        // Decode base64 to get original text with preserved newlines and UTF-8 chars
-        const binary = atob(b64)
-        const text = new TextDecoder().decode(Uint8Array.from(binary, c => c.charCodeAt(0)))
-        el.innerHTML = marked.parse(text)
-        el.setAttribute('data-rendered', 'true')
-      }
-    })
-  }
-
-  // Initial render
-  renderMarkdown()
-
-  // Re-render after HTMX swaps new content
-  document.addEventListener('htmx:afterSwap', () => {
-    renderMarkdown()
-  })
-
-  // ── Voice Chat ─────────────────────────────────────────────────────────────
-  const SAMPLE_RATE = 24000
-
-  const voiceState = {
-    active: false,
-    ws: null,
-    audioCtx: null,
-    micStream: null,
-    scriptProcessor: null,
-    playbackQueue: [],
-    isPlaying: false,
-    nextPlayTime: 0,
-  }
-
-  // Check if voice is enabled and show button
-  fetch('/voice/config').then(r => r.json()).then(cfg => {
-    if (cfg.enabled) {
-      const btn = document.getElementById('voice-btn')
-      if (btn) btn.style.display = 'flex'
-    }
-  }).catch(() => {})
-
-  function toggleVoice() {
-    if (voiceState.active) {
-      stopVoice()
-    } else {
-      startVoice()
-    }
-  }
-
-  async function startVoice() {
-    const select = document.getElementById('coworker-select')
-    const coworker = select ? select.value : ''
-    if (!coworker) return
-
-    const btn = document.getElementById('voice-btn')
-    const overlay = document.getElementById('voice-overlay')
-    const statusEl = document.getElementById('voice-status')
-    const transcriptEl = document.getElementById('voice-transcript')
-    const avatarEl = document.getElementById('voice-avatar')
-
-    // Update UI to connecting state
-    btn.classList.add('connecting')
-    btn.querySelector('.voice-icon-mic').style.display = 'none'
-    btn.querySelector('.voice-icon-stop').style.display = 'flex'
-    overlay.style.display = 'flex'
-    statusEl.textContent = 'Connecting...'
-    transcriptEl.textContent = ''
-    avatarEl.textContent = coworker.charAt(0).toUpperCase()
-
-    try {
-      // Request ephemeral token from our backend
-      const sessRes = await fetch('/voice/session', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ coworker }),
-      })
-      if (!sessRes.ok) {
-        const err = await sessRes.json().catch(() => ({}))
-        throw new Error(err.error || 'Failed to create voice session')
-      }
-      const sessData = await sessRes.json()
-      const token = sessData.token
-      const instructions = sessData.instructions
-
-      if (!token) throw new Error('No ephemeral token received')
-
-      // Request microphone access
-      const micStream = await navigator.mediaDevices.getUserMedia({ audio: {
-        sampleRate: SAMPLE_RATE,
-        channelCount: 1,
-        echoCancellation: true,
-        noiseSuppression: true,
-        autoGainControl: true,
-      }})
-      voiceState.micStream = micStream
-
-      // Create audio context for playback
-      const audioCtx = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: SAMPLE_RATE })
-      voiceState.audioCtx = audioCtx
-      voiceState.nextPlayTime = 0
-
-      // Connect WebSocket to xAI realtime API using subprotocol for auth
-      const ws = new WebSocket('wss://api.x.ai/v1/realtime', [
-        'xai-client-secret.' + token
-      ])
-      voiceState.ws = ws
-
-      ws.onopen = () => {
-        voiceState.active = true
-        btn.classList.remove('connecting')
-        btn.classList.add('active')
-        statusEl.textContent = 'Listening...'
-        overlay.classList.add('listening')
-        overlay.classList.remove('speaking')
-
-        // Configure session with tools
-        ws.send(JSON.stringify({
-          type: 'session.update',
-          session: {
-            voice: 'Ara',
-            instructions: instructions,
-            turn_detection: { type: 'server_vad' },
-            audio: {
-              input:  { format: { type: 'audio/pcm', rate: SAMPLE_RATE } },
-              output: { format: { type: 'audio/pcm', rate: SAMPLE_RATE } },
-            },
-            tools: [
-              {
-                type: 'function',
-                name: 'read',
-                description: 'Read a file from the filesystem. Returns the file contents. Use this to examine source code, config files, or any text file.',
-                parameters: {
-                  type: 'object',
-                  properties: {
-                    path: { type: 'string', description: 'Absolute or relative file path to read' },
-                    offset: { type: 'number', description: 'Line number to start reading from (1-indexed). Optional.' },
-                    limit: { type: 'number', description: 'Maximum number of lines to read. Optional, defaults to 200.' },
-                  },
-                  required: ['path'],
-                },
-              },
-              {
-                type: 'function',
-                name: 'write',
-                description: 'Write content to a file, creating it if it does not exist or overwriting if it does. Use this to create new files.',
-                parameters: {
-                  type: 'object',
-                  properties: {
-                    path: { type: 'string', description: 'Absolute or relative file path to write' },
-                    content: { type: 'string', description: 'The full content to write to the file' },
-                  },
-                  required: ['path', 'content'],
-                },
-              },
-              {
-                type: 'function',
-                name: 'edit',
-                description: 'Edit a file by replacing an exact string match with new content. The oldString must match exactly (including whitespace and indentation).',
-                parameters: {
-                  type: 'object',
-                  properties: {
-                    path: { type: 'string', description: 'Absolute or relative file path to edit' },
-                    oldText: { type: 'string', description: 'The exact text to find and replace' },
-                    newText: { type: 'string', description: 'The replacement text' },
-                  },
-                  required: ['path', 'oldText', 'newText'],
-                },
-              },
-              {
-                type: 'function',
-                name: 'bash',
-                description: 'Execute a bash command and return its output. Use for running scripts, git commands, build tools, listing files, searching, etc.',
-                parameters: {
-                  type: 'object',
-                  properties: {
-                    command: { type: 'string', description: 'The bash command to execute' },
-                    timeout: { type: 'number', description: 'Timeout in seconds. Optional, defaults to 30.' },
-                  },
-                  required: ['command'],
-                },
-              },
-            ],
-          },
-        }))
-
-        // Start streaming microphone audio
-        startMicStreaming(ws, micStream, audioCtx)
-      }
-
-      ws.onmessage = (event) => {
-        const data = JSON.parse(event.data)
-        handleVoiceEvent(data)
-      }
-
-      ws.onerror = () => {
-        statusEl.textContent = 'Connection error'
-        setTimeout(() => stopVoice(), 2000)
-      }
-
-      ws.onclose = () => {
-        if (voiceState.active) {
-          stopVoice()
-        }
-      }
-
-    } catch (err) {
-      console.error('Voice start error:', err)
-      const statusEl = document.getElementById('voice-status')
-      if (statusEl) statusEl.textContent = 'Error: ' + (err.message || 'Unknown error')
-      setTimeout(() => stopVoice(), 2500)
-    }
-  }
-
-  function startMicStreaming(ws, micStream, audioCtx) {
-    const source = audioCtx.createMediaStreamSource(micStream)
-    // Use ScriptProcessorNode for broad compatibility (including mobile)
-    const bufSize = 4096
-    const processor = audioCtx.createScriptProcessor(bufSize, 1, 1)
-    voiceState.scriptProcessor = processor
-
-    processor.onaudioprocess = (e) => {
-      if (!voiceState.active || ws.readyState !== WebSocket.OPEN) return
-      const inputData = e.inputBuffer.getChannelData(0)
-
-      // Resample if audioCtx sample rate differs from target
-      let pcmFloat
-      if (audioCtx.sampleRate !== SAMPLE_RATE) {
-        const ratio = SAMPLE_RATE / audioCtx.sampleRate
-        const newLen = Math.round(inputData.length * ratio)
-        pcmFloat = new Float32Array(newLen)
-        for (let i = 0; i < newLen; i++) {
-          const srcIdx = i / ratio
-          const lo = Math.floor(srcIdx)
-          const hi = Math.min(lo + 1, inputData.length - 1)
-          const frac = srcIdx - lo
-          pcmFloat[i] = inputData[lo] * (1 - frac) + inputData[hi] * frac
-        }
-      } else {
-        pcmFloat = inputData
-      }
-
-      // Convert Float32 to Int16 PCM
-      const pcm16 = new Int16Array(pcmFloat.length)
-      for (let i = 0; i < pcmFloat.length; i++) {
-        const s = Math.max(-1, Math.min(1, pcmFloat[i]))
-        pcm16[i] = s < 0 ? s * 0x8000 : s * 0x7FFF
-      }
-
-      // Base64 encode
-      const bytes = new Uint8Array(pcm16.buffer)
-      let binary = ''
-      for (let i = 0; i < bytes.length; i++) {
-        binary += String.fromCharCode(bytes[i])
-      }
-      const b64 = btoa(binary)
-
-      ws.send(JSON.stringify({
-        type: 'input_audio_buffer.append',
-        audio: b64,
-      }))
-    }
-
-    source.connect(processor)
-    processor.connect(audioCtx.destination)
-  }
-
-  function handleVoiceEvent(data) {
-    const overlay = document.getElementById('voice-overlay')
-    const statusEl = document.getElementById('voice-status')
-    const transcriptEl = document.getElementById('voice-transcript')
-
-    switch (data.type) {
-      case 'input_audio_buffer.speech_started':
-        if (overlay) { overlay.classList.add('listening'); overlay.classList.remove('speaking') }
-        if (statusEl) statusEl.textContent = 'Listening...'
-        break
-
-      case 'input_audio_buffer.speech_stopped':
-        if (statusEl) statusEl.textContent = 'Processing...'
-        break
-
-      case 'conversation.item.input_audio_transcription.completed':
-        if (transcriptEl && data.transcript) {
-          transcriptEl.textContent = 'You: ' + data.transcript
-        }
-        break
-
-      case 'response.function_call_arguments.done':
-        handleToolCall(data)
-        break
-
-      case 'response.output_audio_transcript.delta':
-        if (overlay) { overlay.classList.remove('listening'); overlay.classList.add('speaking') }
-        if (statusEl) statusEl.textContent = 'Speaking...'
-        if (transcriptEl) {
-          const current = transcriptEl.textContent
-          if (current.startsWith('You:') || current.startsWith('[Tool')) {
-            transcriptEl.textContent = data.delta
-          } else {
-            transcriptEl.textContent += data.delta
-          }
-        }
-        break
-
-      case 'response.output_audio.delta':
-        if (data.delta) {
-          playAudioChunk(data.delta)
-        }
-        break
-
-      case 'response.done':
-        if (overlay) { overlay.classList.add('listening'); overlay.classList.remove('speaking') }
-        if (statusEl) statusEl.textContent = 'Listening...'
-        break
-
-      case 'error':
-        console.error('Voice API error:', data)
-        if (statusEl) statusEl.textContent = 'Error: ' + (data.error?.message || 'Unknown')
-        break
-    }
-  }
-
-  async function handleToolCall(event) {
-    const ws = voiceState.ws
-    if (!ws || ws.readyState !== WebSocket.OPEN) return
-
-    const toolName = event.name
-    const callId = event.call_id
-    const args = event.arguments
-
-    const statusEl = document.getElementById('voice-status')
-    const transcriptEl = document.getElementById('voice-transcript')
-    const overlay = document.getElementById('voice-overlay')
-
-    // Show tool execution in UI
-    if (overlay) { overlay.classList.remove('listening', 'speaking') }
-    if (statusEl) statusEl.textContent = 'Running tool: ' + toolName + '...'
-
-    // Parse args for display
-    let argsObj = {}
-    try { argsObj = JSON.parse(args) } catch {}
-    const brief = toolName === 'bash' ? (argsObj.command || '').slice(0, 80) :
-                  toolName === 'read' ? argsObj.path || '' :
-                  toolName === 'write' ? argsObj.path || '' :
-                  toolName === 'edit' ? argsObj.path || '' : ''
-    if (transcriptEl) transcriptEl.textContent = '[Tool: ' + toolName + '] ' + brief
-
-    try {
-      // Execute tool via our backend
-      const toolRes = await fetch('/voice/tool', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name: toolName, arguments: args }),
-      })
-      const toolData = await toolRes.json()
-      const output = toolData.output || '(no output)'
-
-      // Show brief result
-      const shortOutput = output.length > 120 ? output.slice(0, 120) + '...' : output
-      if (transcriptEl) transcriptEl.textContent = '[Tool: ' + toolName + '] ' + shortOutput
-
-      // Send result back to voice agent
-      ws.send(JSON.stringify({
-        type: 'conversation.item.create',
-        item: {
-          type: 'function_call_output',
-          call_id: callId,
-          output: output,
-        },
-      }))
-
-      // Request the agent to continue
-      ws.send(JSON.stringify({ type: 'response.create' }))
-
-      if (statusEl) statusEl.textContent = 'Processing...'
-    } catch (err) {
-      console.error('Tool execution error:', err)
-      const errMsg = err.message || 'Tool execution failed'
-
-      // Send error back as tool output so the agent can handle it
-      ws.send(JSON.stringify({
-        type: 'conversation.item.create',
-        item: {
-          type: 'function_call_output',
-          call_id: callId,
-          output: 'Error: ' + errMsg,
-        },
-      }))
-      ws.send(JSON.stringify({ type: 'response.create' }))
-
-      if (statusEl) statusEl.textContent = 'Listening...'
-      if (overlay) overlay.classList.add('listening')
-    }
-  }
-
-  function playAudioChunk(base64Audio) {
-    if (!voiceState.audioCtx) return
-    const ctx = voiceState.audioCtx
-
-    // Decode base64 to Int16 PCM
-    const binaryStr = atob(base64Audio)
-    const bytes = new Uint8Array(binaryStr.length)
-    for (let i = 0; i < binaryStr.length; i++) {
-      bytes[i] = binaryStr.charCodeAt(i)
-    }
-    const pcm16 = new Int16Array(bytes.buffer)
-
-    // Convert to Float32 for Web Audio
-    const float32 = new Float32Array(pcm16.length)
-    for (let i = 0; i < pcm16.length; i++) {
-      float32[i] = pcm16[i] / 32768.0
-    }
-
-    // Create audio buffer and schedule playback
-    const buffer = ctx.createBuffer(1, float32.length, SAMPLE_RATE)
-    buffer.getChannelData(0).set(float32)
-
-    const source = ctx.createBufferSource()
-    source.buffer = buffer
-    source.connect(ctx.destination)
-
-    // Schedule seamless playback
-    const now = ctx.currentTime
-    const startTime = Math.max(now, voiceState.nextPlayTime)
-    source.start(startTime)
-    voiceState.nextPlayTime = startTime + buffer.duration
-  }
-
-  function stopVoice() {
-    voiceState.active = false
-
-    // Close WebSocket
-    if (voiceState.ws) {
-      try { voiceState.ws.close() } catch {}
-      voiceState.ws = null
-    }
-
-    // Stop microphone
-    if (voiceState.micStream) {
-      voiceState.micStream.getTracks().forEach(t => t.stop())
-      voiceState.micStream = null
-    }
-
-    // Disconnect audio processor
-    if (voiceState.scriptProcessor) {
-      try { voiceState.scriptProcessor.disconnect() } catch {}
-      voiceState.scriptProcessor = null
-    }
-
-    // Close audio context
-    if (voiceState.audioCtx) {
-      try { voiceState.audioCtx.close() } catch {}
-      voiceState.audioCtx = null
-    }
-
-    voiceState.nextPlayTime = 0
-
-    // Reset UI
-    const btn = document.getElementById('voice-btn')
-    if (btn) {
-      btn.classList.remove('active', 'connecting')
-      btn.querySelector('.voice-icon-mic').style.display = 'block'
-      btn.querySelector('.voice-icon-stop').style.display = 'none'
-    }
-
-    const overlay = document.getElementById('voice-overlay')
-    if (overlay) {
-      overlay.style.display = 'none'
-      overlay.classList.remove('listening', 'speaking')
-    }
-  }
-</script>
-</body>
-</html>`;
-}
-function renderCronRequestsPage(requests) {
-    const pendingCount = requests.filter(r => r.status === 'pending').length;
-    const approvedCount = requests.filter(r => r.status === 'approved').length;
-    const rejectedCount = requests.filter(r => r.status === 'rejected').length;
-    const requestsHtml = requests.length === 0
-        ? `<div class="empty-state">No cron requests found.</div>`
-        : requests.map(r => {
-            const statusColor = r.status === 'pending' ? 'var(--accent)' :
-                r.status === 'approved' ? 'var(--green)' : 'var(--red)';
-            const actionButtons = r.status === 'pending'
-                ? `<div class="request-actions">
-              <button class="action-btn approve-btn"
-                      hx-post="/approve-request?id=${r.id}"
-                      hx-confirm="Approve this cron job request?"
-                      hx-target="#action-status"
-                      hx-swap="innerHTML"
-                      title="Approve request">✓</button>
-              <button class="action-btn reject-btn"
-                      hx-post="/reject-request?id=${r.id}"
-                      hx-confirm="Reject this cron job request?"
-                      hx-target="#action-status"
-                      hx-swap="innerHTML"
-                      title="Reject request">✗</button>
-            </div>`
-                : '';
-            return `<div class="request-card" style="border-left: 4px solid ${statusColor}">
-          <div class="request-header">
-            <div class="request-title">
-              <strong>${escapeHtml(r.name)}</strong>
-              <span class="request-status" style="color: ${statusColor}">${r.status.toUpperCase()}</span>
-            </div>
-            <div class="request-meta">
-              <span class="request-coworker">👤 ${escapeHtml(r.session_name)}</span>
-              <span class="request-time">🕒 ${formatFullTime(r.requested_at)}</span>
-            </div>
-          </div>
-          <div class="request-details">
-            <div class="request-schedule">
-              <strong>Schedule:</strong> <code>${escapeHtml(r.schedule)}</code>
-              ${r.timezone ? `<span class="timezone">(TZ: ${escapeHtml(r.timezone)})</span>` : ''}
-            </div>
-            <div class="request-message">
-              <strong>Message:</strong>
-              <div class="message-content markdown-body" data-markdown>${escapeHtml(r.message)}</div>
-            </div>
-            ${r.reviewed_at && r.reviewed_by ? `
-            <div class="request-review">
-              <strong>Reviewed by ${escapeHtml(r.reviewed_by)} on ${formatFullTime(r.reviewed_at)}</strong>
-              ${r.reviewer_notes ? `<div class="review-notes">${escapeHtml(r.reviewer_notes)}</div>` : ''}
-            </div>
-            ` : ''}
-          </div>
-          ${actionButtons}
-        </div>`;
-        }).join('\n');
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <title>Cron Requests — agent-office</title>
-  <script src="https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.5.1/github-markdown-light.min.css" media="(prefers-color-scheme: light)">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.5.1/github-markdown-dark.min.css" media="(prefers-color-scheme: dark)">
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-    :root {
-      --bg: #0f1117;
-      --surface: #1a1d27;
-      --surface2: #22263a;
-      --border: #2e3248;
-      --accent: #6c8eff;
-      --accent-dim: #3d52a0;
-      --text: #e2e8f0;
-      --text-dim: #8892a4;
-      --green: #6bffb8;
-      --red: #ff6b6b;
-      --radius: 12px;
-      --radius-sm: 6px;
-      --header-h: 56px;
-      font-size: 16px;
-    }
-
-    html, body {
-      height: 100%;
-      background: var(--bg);
-      color: var(--text);
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-      overflow: hidden;
-    }
-
-    .app {
-      display: flex;
-      flex-direction: column;
-      height: 100dvh;
-    }
-
-    /* Header */
-    .header {
-      flex-shrink: 0;
-      height: var(--header-h);
-      background: var(--surface);
-      border-bottom: 1px solid var(--border);
-      display: flex;
-      align-items: center;
-      padding: 0 16px;
-      gap: 12px;
-    }
-
-    .header-title {
-      font-weight: 600;
-      font-size: 18px;
-      color: var(--accent);
-    }
-
-    .header-stats {
-      margin-left: auto;
-      display: flex;
-      gap: 16px;
-      font-size: 14px;
-    }
-
-    .stat-item {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-
-    .stat-count {
-      font-weight: 600;
-    }
-
-    .back-link {
-      color: var(--text-dim);
-      text-decoration: none;
-      font-size: 16px;
-      transition: color 0.15s;
-    }
-    .back-link:hover { color: var(--accent); }
-
-    /* Content */
-    .content {
-      flex: 1;
-      overflow-y: auto;
-      padding: 20px;
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-    }
-
-    .filter-tabs {
-      display: flex;
-      gap: 8px;
-      margin-bottom: 16px;
-    }
-
-    .filter-tab {
-      padding: 8px 16px;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      color: var(--text-dim);
-      text-decoration: none;
-      font-size: 14px;
-      transition: all 0.15s;
-    }
-
-    .filter-tab:hover {
-      border-color: var(--accent-dim);
-      color: var(--accent);
-    }
-
-    .filter-tab.active {
-      background: var(--accent);
-      color: #fff;
-      border-color: var(--accent);
-    }
-
-    .empty-state {
-      text-align: center;
-      color: var(--text-dim);
-      font-size: 16px;
-      padding: 48px;
-    }
-
-    /* Request Cards */
-    .request-card {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      padding: 16px;
-      margin-bottom: 12px;
-    }
-
-    .request-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      margin-bottom: 12px;
-    }
-
-    .request-title {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 16px;
-    }
-
-    .request-status {
-      font-size: 12px;
-      font-weight: 600;
-      padding: 2px 8px;
-      border-radius: var(--radius-sm);
-      background: rgba(255, 255, 255, 0.1);
-    }
-
-    .request-meta {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      gap: 2px;
-      font-size: 12px;
-      color: var(--text-dim);
-    }
-
-    .request-details {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      font-size: 14px;
-    }
-
-    .request-schedule {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      flex-wrap: wrap;
-    }
-
-    .request-schedule code {
-      background: var(--surface2);
-      padding: 2px 6px;
-      border-radius: var(--radius-sm);
-      font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-      font-size: 13px;
-    }
-
-    .timezone {
-      color: var(--text-dim);
-      font-size: 12px;
-    }
-
-    .request-message {
-      margin-top: 4px;
-    }
-
-    .message-content {
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      padding: 8px 12px;
-      margin-top: 4px;
-      font-size: 13px;
-      line-height: 1.4;
-      white-space: pre-wrap;
-      word-break: break-word;
-    }
-
-    .request-review {
-      margin-top: 8px;
-      padding-top: 8px;
-      border-top: 1px solid var(--border);
-      font-size: 13px;
-      color: var(--text-dim);
-    }
-
-    .review-notes {
-      margin-top: 4px;
-      background: rgba(255, 255, 255, 0.05);
-      padding: 6px 10px;
-      border-radius: var(--radius-sm);
-      border-left: 3px solid var(--accent);
-    }
-
-    .request-actions {
-      display: flex;
-      gap: 8px;
-      margin-top: 12px;
-      padding-top: 12px;
-      border-top: 1px solid var(--border);
-    }
-
-    .action-btn {
-      padding: 6px 12px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      cursor: pointer;
-      font-size: 14px;
-      font-weight: 600;
-      transition: all 0.15s;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-width: 32px;
-    }
-
-    .approve-btn {
-      background: rgba(107, 255, 184, 0.1);
-      border-color: var(--green);
-      color: var(--green);
-    }
-
-    .approve-btn:hover {
-      background: var(--green);
-      color: #fff;
-    }
-
-    .reject-btn {
-      background: rgba(255, 107, 107, 0.1);
-      border-color: var(--red);
-      color: var(--red);
-    }
-
-    .reject-btn:hover {
-      background: var(--red);
-      color: #fff;
-    }
-
-    .action-btn.htmx-request {
-      opacity: 0.6;
-      pointer-events: none;
-    }
-
-    /* Status messages */
-    #action-status {
-      position: fixed;
-      bottom: 20px;
-      left: 50%;
-      transform: translateX(-50%);
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      padding: 12px 20px;
-      font-size: 14px;
-      pointer-events: none;
-      opacity: 0;
-      transition: opacity 0.3s;
-      z-index: 1000;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    }
-
-    #action-status.visible {
-      opacity: 1;
-    }
-
-    #action-status.success {
-      border-color: var(--green);
-      color: var(--green);
-    }
-
-    #action-status.error {
-      border-color: var(--red);
-      color: var(--red);
-    }
-
-    /* Markdown styling */
-    .markdown-body {
-      background: transparent;
-      color: inherit;
-    }
-
-    .markdown-body p { margin: 0 0 8px 0; }
-    .markdown-body p:last-child { margin-bottom: 0; }
-    .markdown-body pre {
-      background: rgba(0,0,0,0.3);
-      border-radius: 6px;
-      padding: 8px 12px;
-      overflow-x: auto;
-      margin: 8px 0;
-    }
-    .markdown-body code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 5px;
-      border-radius: 3px;
-      font-size: 12px;
-    }
-    .markdown-body pre code {
-      background: transparent;
-      padding: 0;
-    }
-  </style>
-</head>
-<body>
-  <div class="app">
-    <div class="header">
-      <a href="/" class="back-link" title="Back to chat">←</a>
-      <div class="header-title">Cron Requests</div>
-      <div class="header-stats">
-        <div class="stat-item">
-          <span>⏳</span>
-          <span class="stat-count">${pendingCount}</span>
-          <span>pending</span>
-        </div>
-        <div class="stat-item">
-          <span>✅</span>
-          <span class="stat-count">${approvedCount}</span>
-          <span>approved</span>
-        </div>
-        <div class="stat-item">
-          <span>❌</span>
-          <span class="stat-count">${rejectedCount}</span>
-          <span>rejected</span>
-        </div>
-      </div>
-    </div>
-
-    <div class="content">
-      <div class="filter-tabs">
-        <a href="/cron-requests" class="filter-tab">All</a>
-        <a href="/cron-requests?status=pending" class="filter-tab">Pending</a>
-        <a href="/cron-requests?status=approved" class="filter-tab">Approved</a>
-        <a href="/cron-requests?status=rejected" class="filter-tab">Rejected</a>
-      </div>
-
-      ${requestsHtml}
-    </div>
-
-    <div id="action-status"></div>
-  </div>
-
-  <script>
-    // Set active filter tab based on URL
-    function setActiveTab() {
-      const urlParams = new URLSearchParams(window.location.search)
-      const status = urlParams.get('status') || 'all'
-      document.querySelectorAll('.filter-tab').forEach(tab => {
-        const href = tab.getAttribute('href')
-        const tabStatus = href === '/cron-requests' ? 'all' : href.split('=')[1]
-        if (tabStatus === status) {
-          tab.classList.add('active')
-        } else {
-          tab.classList.remove('active')
-        }
-      })
-    }
-
-    // Render markdown in request messages
-    function renderMarkdown() {
-      if (typeof marked === 'undefined') return
-      document.querySelectorAll('.message-content').forEach(el => {
-        if (!el.hasAttribute('data-rendered')) {
-          el.innerHTML = marked.parse(el.textContent || '')
-          el.setAttribute('data-rendered', 'true')
-        }
-      })
-    }
-
-    // Show status messages
-    function showStatus(message, type = 'success') {
-      const el = document.getElementById('action-status')
-      if (!el) return
-      el.textContent = message
-      el.className = type
-      el.classList.add('visible')
-      clearTimeout(el._hideTimer)
-      el._hideTimer = setTimeout(() => el.classList.remove('visible'), 4000)
-    }
-
-    // Initial setup
-    setActiveTab()
-    renderMarkdown()
-
-    // HTMX event handlers
-    document.addEventListener('htmx:afterRequest', (e) => {
-      const xhr = e.detail.xhr
-      if (xhr.status >= 200 && xhr.status < 300) {
-        // Success - refresh the page
-        setTimeout(() => window.location.reload(), 1000)
-        showStatus('Action completed successfully')
-      } else {
-        // Error
-        try {
-          const response = JSON.parse(xhr.responseText)
-          showStatus('Error: ' + (response.error || 'Unknown error'), 'error')
-        } catch {
-          showStatus('Error: Request failed', 'error')
-        }
-      }
-    })
-  </script>
-</body>
-</html>`;
-}
-// ── Express app ───────────────────────────────────────────────────────────────
-export async function appCoworkerChatWeb(options) {
-    const { url: agentUrl, password, host, port: portStr, xaiKey } = options;
-    const voiceEnabled = !!xaiKey;
-    const port = parseInt(portStr, 10);
-    if (isNaN(port) || port < 1 || port > 65535) {
-        console.error(`Error: invalid port "${portStr}"`);
-        process.exit(1);
-    }
-    try {
-        new URL(agentUrl);
-    }
-    catch {
-        console.error(`Error: invalid --url "${agentUrl}"`);
-        process.exit(1);
-    }
-    // Resolve human name once at startup
-    let humanName = "Human";
-    try {
-        humanName = await getHumanName(agentUrl, password);
-    }
-    catch (err) {
-        console.error(`Warning: could not fetch human name from ${agentUrl}: ${err instanceof Error ? err.message : String(err)}`);
-        console.error("Check that agent-office serve is running and --password is correct.");
-    }
-    console.log(`Communicator: chatting as "${humanName}"`);
-    if (voiceEnabled) {
-        console.log(`Voice chat enabled (xAI API key configured)`);
-    }
-    const app = express();
-    app.use(express.urlencoded({ extended: false }));
-    app.use(express.json());
-    // ── GET /coworkers — list of coworkers (HTMX) ───────────────────────────────
-    app.get("/coworkers", async (_req, res) => {
-        res.setHeader("Content-Type", "application/json");
-        try {
-            const response = await fetch(`${agentUrl}/coworkers`, {
-                headers: { "Authorization": `Bearer ${password}` },
-            });
-            if (!response.ok) {
-                res.json([{ name: humanName, status: null, isHuman: true, unreadMessages: 0 }]);
-                return;
-            }
-            const coworkers = await response.json();
-            res.json(coworkers);
-        }
-        catch {
-            res.json([{ name: humanName, status: null, isHuman: true, unreadMessages: 0 }]);
-        }
-    });
-    // ── GET /dropdown — dropdown fragment for HTMX polling ────────────────────
-    app.get("/dropdown", async (req, res) => {
-        const coworker = req.query.coworker;
-        res.setHeader("Content-Type", "text/html; charset=utf-8");
-        try {
-            const response = await fetch(`${agentUrl}/coworkers`, {
-                headers: { "Authorization": `Bearer ${password}` },
-            });
-            if (!response.ok) {
-                res.send(renderDropdown(coworker ?? null, [{ name: humanName, status: null, isHuman: true, unreadMessages: 0 }]));
-                return;
-            }
-            const coworkers = await response.json();
-            res.send(renderDropdown(coworker ?? null, coworkers));
-        }
-        catch {
-            res.send(renderDropdown(coworker ?? null, [{ name: humanName, status: null, isHuman: true, unreadMessages: 0 }]));
-        }
-    });
-    // ── GET /cron-requests — cron requests page ──────────────────────────────
-    app.get("/cron-requests", async (req, res) => {
-        try {
-            const status = req.query.status;
-            const requests = await fetchCronRequests(agentUrl, password, status);
-            res.setHeader("Content-Type", "text/html; charset=utf-8");
-            res.send(renderCronRequestsPage(requests));
-        }
-        catch (err) {
-            const msg = err instanceof Error ? err.message : String(err);
-            res.status(502).send(`<pre>Error connecting to agent-office: ${escapeHtml(msg)}</pre>`);
-        }
-    });
-    // ── POST /approve-request — approve a cron request ─────────────────────────
-    app.post("/approve-request", async (req, res) => {
-        const id = req.query.id;
-        if (!id) {
-            res.setHeader("Content-Type", "text/html; charset=utf-8");
-            res.send(`<span style="color:var(--red)">Error: Request ID required</span>`);
-            return;
-        }
-        try {
-            await approveCronRequest(agentUrl, password, parseInt(id, 10));
-            res.setHeader("Content-Type", "text/html; charset=utf-8");
-            res.send(`<span style="color:var(--green)">✓ Request approved successfully</span>`);
-        }
-        catch (err) {
-            const msg = err instanceof Error ? err.message : String(err);
-            res.setHeader("Content-Type", "text/html; charset=utf-8");
-            res.send(`<span style="color:var(--red)">✗ Approval failed: ${escapeHtml(msg)}</span>`);
-        }
-    });
-    // ── POST /reject-request — reject a cron request ───────────────────────────
-    app.post("/reject-request", async (req, res) => {
-        const id = req.query.id;
-        if (!id) {
-            res.setHeader("Content-Type", "text/html; charset=utf-8");
-            res.send(`<span style="color:var(--red)">Error: Request ID required</span>`);
-            return;
-        }
-        try {
-            await rejectCronRequest(agentUrl, password, parseInt(id, 10));
-            res.setHeader("Content-Type", "text/html; charset=utf-8");
-            res.send(`<span style="color:var(--green)">✓ Request rejected successfully</span>`);
-        }
-        catch (err) {
-            const msg = err instanceof Error ? err.message : String(err);
-            res.setHeader("Content-Type", "text/html; charset=utf-8");
-            res.send(`<span style="color:var(--red)">✗ Rejection failed: ${escapeHtml(msg)}</span>`);
-        }
-    });
-    // ── GET /voice/config — whether voice is enabled ──────────────────────────
-    app.get("/voice/config", (_req, res) => {
-        res.json({ enabled: voiceEnabled });
-    });
-    // ── POST /voice/session — fetch ephemeral token from xAI ─────────────────
-    app.post("/voice/session", async (req, res) => {
-        if (!voiceEnabled || !xaiKey) {
-            res.status(403).json({ error: "Voice is not enabled" });
-            return;
-        }
-        const { coworker } = req.body;
-        if (!coworker) {
-            res.status(400).json({ error: "coworker is required" });
-            return;
-        }
-        try {
-            // Fetch the coworker's status for context
-            const status = await fetchCoworkerStatus(agentUrl, password, coworker);
-            // Get ephemeral token from xAI
-            const tokenRes = await fetch("https://api.x.ai/v1/realtime/client_secrets", {
-                method: "POST",
-                headers: {
-                    "Authorization": `Bearer ${xaiKey}`,
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify({ expires_after: { seconds: 300 } }),
-            });
-            if (!tokenRes.ok) {
-                const errBody = await tokenRes.json().catch(() => ({}));
-                res.status(502).json({ error: `xAI API error: ${errBody.error ?? `HTTP ${tokenRes.status}`}` });
-                return;
-            }
-            // xAI returns { value: string, expires_at: number } at the top level
-            const tokenData = await tokenRes.json();
-            const token = tokenData.value;
-            if (!token) {
-                console.error("Voice session: unexpected xAI response shape:", JSON.stringify(tokenData));
-                res.status(502).json({ error: "No ephemeral token in xAI response" });
-                return;
-            }
-            // Build voice instructions based on the coworker
-            const instructions = [
-                `You are ${escapeHtml(coworker)}, an AI coworker in the agent office.`,
-                `Your token code is: ${coworker}@${agentUrl}`,
-                status ? `Your current status is: "${status}".` : "",
-                `You are having a voice conversation with your human manager ${humanName}.`,
-                `Be helpful, collaborative, and keep your responses concise since this is a voice conversation.`,
-                `You can discuss work, answer questions, and collaborate on tasks.`,
-                ``,
-                `You have access to the agent-office CLI tool which can:`,
-                `- Create and manage AI coworker sessions`,
-                `- Send messages between coworkers`,
-                `- Set status messages for visibility`,
-                `- Schedule cron jobs for recurring tasks`,
-                `- Run a web chat interface for human interaction`,
-                `- Manage task boards with kanban-style workflows`,
-                `- Send email notifications for unread messages`,
-                ``,
-                `You have access to coding tools that you can use when the human asks you to look at, create, or modify files, or run commands:`,
-                `- read: Read a file from the filesystem. Use this to examine source code, config files, etc.`,
-                `- write: Write content to a file, creating or overwriting it.`,
-                `- edit: Edit a file by finding and replacing an exact string.`,
-                `- bash: Execute a shell command and get the output.`,
-                ``,
-                `When using tools, briefly tell the human what you're doing before calling the tool.`,
-                `After getting tool results, summarize the key information verbally rather than reading everything.`,
-                `The working directory is: ${process.cwd()}`,
-            ].filter(Boolean).join("\n");
-            res.json({
-                token,
-                instructions,
-                coworker,
-            });
-        }
-        catch (err) {
-            const msg = err instanceof Error ? err.message : String(err);
-            res.status(502).json({ error: `Failed to create voice session: ${msg}` });
-        }
-    });
-    // ── POST /voice/tool — execute a tool call server-side ────────────────────
-    app.post("/voice/tool", async (req, res) => {
-        const { name, arguments: argsStr } = req.body;
-        if (!name || typeof name !== "string") {
-            res.status(400).json({ error: "name is required" });
-            return;
-        }
-        let args;
-        try {
-            args = typeof argsStr === "string" ? JSON.parse(argsStr) : (argsStr ?? {});
-        }
-        catch {
-            res.status(400).json({ error: "Invalid arguments JSON" });
-            return;
-        }
-        try {
-            let result;
-            switch (name) {
-                case "read": {
-                    const filePath = String(args.path ?? "");
-                    if (!filePath) {
-                        res.json({ output: "Error: path is required" });
-                        return;
-                    }
-                    const content = await readFile(filePath, "utf-8");
-                    const lines = content.split("\n");
-                    const offset = Math.max(1, Number(args.offset) || 1);
-                    const limit = Math.min(2000, Number(args.limit) || 200);
-                    const sliced = lines.slice(offset - 1, offset - 1 + limit);
-                    result = sliced.map((line, i) => `${offset + i}: ${line}`).join("\n");
-                    if (lines.length > offset - 1 + limit) {
-                        result += `\n... (${lines.length} total lines)`;
-                    }
-                    break;
-                }
-                case "write": {
-                    const filePath = String(args.path ?? "");
-                    const content = String(args.content ?? "");
-                    if (!filePath) {
-                        res.json({ output: "Error: path is required" });
-                        return;
-                    }
-                    await mkdir(dirname(filePath), { recursive: true });
-                    await writeFile(filePath, content, "utf-8");
-                    result = `Written ${content.length} bytes to ${filePath}`;
-                    break;
-                }
-                case "edit": {
-                    const filePath = String(args.path ?? "");
-                    const oldStr = String(args.oldText ?? "");
-                    const newStr = String(args.newText ?? "");
-                    if (!filePath) {
-                        res.json({ output: "Error: path is required" });
-                        return;
-                    }
-                    if (!oldStr) {
-                        res.json({ output: "Error: oldText is required" });
-                        return;
-                    }
-                    const fileContent = await readFile(filePath, "utf-8");
-                    const idx = fileContent.indexOf(oldStr);
-                    if (idx === -1) {
-                        result = "Error: oldText not found in file";
-                    }
-                    else if (fileContent.indexOf(oldStr, idx + 1) !== -1) {
-                        result = "Error: oldText found multiple times. Provide more context to make it unique.";
-                    }
-                    else {
-                        const edited = fileContent.slice(0, idx) + newStr + fileContent.slice(idx + oldStr.length);
-                        await writeFile(filePath, edited, "utf-8");
-                        result = `Edit applied to ${filePath}`;
-                    }
-                    break;
-                }
-                case "bash": {
-                    const command = String(args.command ?? "");
-                    if (!command) {
-                        res.json({ output: "Error: command is required" });
-                        return;
-                    }
-                    const timeoutSec = Math.min(120, Number(args.timeout) || 30);
-                    const timeout = timeoutSec * 1000;
-                    result = await new Promise((resolve) => {
-                        exec(command, { timeout, maxBuffer: 1024 * 1024, cwd: process.cwd(), env: process.env }, (err, stdout, stderr) => {
-                            const out = (stdout || "").trim();
-                            const errOut = (stderr || "").trim();
-                            if (err && err.killed) {
-                                resolve(`Command timed out after ${timeout}ms`);
-                            }
-                            else if (err) {
-                                resolve(`Exit code ${err.code ?? 1}\n${errOut}\n${out}`.trim());
-                            }
-                            else {
-                                const combined = errOut ? `${out}\n${errOut}` : out;
-                                resolve(combined || "(no output)");
-                            }
-                        });
-                    });
-                    // Truncate very long output for the voice context
-                    if (result.length > 4000) {
-                        result = result.slice(0, 4000) + "\n... (output truncated)";
-                    }
-                    break;
-                }
-                default:
-                    result = `Unknown tool: ${name}`;
-            }
-            res.json({ output: result });
-        }
-        catch (err) {
-            const msg = err instanceof Error ? err.message : String(err);
-            res.json({ output: `Error: ${msg}` });
-        }
-    });
-    // ── GET / — full page ────────────────────────────────────────────────────
-    app.get("/", async (req, res) => {
-        try {
-            // Fetch coworkers with unread counts from main server
-            const response = await fetch(`${agentUrl}/coworkers`, {
-                headers: { "Authorization": `Bearer ${password}` },
-            });
-            let coworkers;
-            if (response.ok) {
-                coworkers = await response.json();
-            }
-            else {
-                coworkers = [{ name: humanName, status: null, isHuman: true, unreadMessages: 0 }];
-            }
-            const nonHumans = coworkers.filter(c => !c.isHuman);
-            let coworker = req.query.coworker;
-            // Default to first non-human coworker if none specified
-            if (!coworker && nonHumans.length > 0) {
-                coworker = nonHumans[0].name;
-            }
-            const msgs = coworker ? await fetchMessages(agentUrl, password, humanName, coworker) : [];
-            res.setHeader("Content-Type", "text/html; charset=utf-8");
-            res.send(renderPage(coworker ?? null, coworkers, msgs, humanName));
-        }
-        catch (err) {
-            const msg = err instanceof Error ? err.message : String(err);
-            res.status(502).send(`<pre>Error connecting to agent-office: ${escapeHtml(msg)}</pre>`);
-        }
-    });
-    // ── GET /messages — HTMX fragment (polled every 5s) ──────────────────────
-    app.get("/messages", async (req, res) => {
-        const coworker = req.query.coworker;
-        if (!coworker) {
-            res.setHeader("Content-Type", "text/html; charset=utf-8");
-            res.send(`<div class="empty-state">Select a coworker to view messages.</div>`);
-            return;
-        }
-        try {
-            const msgs = await fetchMessages(agentUrl, password, humanName, coworker);
-            // Mark any unread received messages as read
-            const unread = msgs.filter((m) => m.from_name === coworker && !m.read);
-            await Promise.allSettled(unread.map((m) => markRead(agentUrl, password, m.id)));
-            res.setHeader("Content-Type", "text/html; charset=utf-8");
-            res.send(renderMessages(msgs, humanName));
-        }
-        catch (err) {
-            const msg = err instanceof Error ? err.message : String(err);
-            res.setHeader("Content-Type", "text/html; charset=utf-8");
-            res.send(`<div class="empty-state" style="color:#ff6b6b">Error: ${escapeHtml(msg)}</div>`);
-        }
-    });
-    // ── POST /send — HTMX form submit ────────────────────────────────────────
-    app.post("/send", async (req, res) => {
-        const { body: msgBody, coworker } = req.body;
-        const body = msgBody?.trim();
-        if (!body) {
-            res.setHeader("Content-Type", "text/html; charset=utf-8");
-            res.send(`<span class="send-err">Message cannot be empty.</span>`);
-            return;
-        }
-        if (!coworker) {
-            res.setHeader("Content-Type", "text/html; charset=utf-8");
-            res.send(`<span class="send-err">No coworker selected.</span>`);
-            return;
-        }
-        try {
-            await apiFetch(agentUrl, password, "/messages", {
-                method: "POST",
-                body: JSON.stringify({ from: humanName, to: [coworker], body }),
-            });
-            res.setHeader("Content-Type", "text/html; charset=utf-8");
-            res.send("");
-        }
-        catch (err) {
-            const msg = err instanceof Error ? err.message : String(err);
-            res.setHeader("Content-Type", "text/html; charset=utf-8");
-            res.send(`<span class="send-err">Failed: ${escapeHtml(msg)}</span>`);
-        }
-    });
-    // ── GET /status — coworker status fragment (polled every 5s) ────────────
-    app.get("/status", async (req, res) => {
-        const coworker = req.query.coworker;
-        res.setHeader("Content-Type", "text/html; charset=utf-8");
-        if (!coworker) {
-            res.send(`<span style="color:var(--text-dim)">—</span>`);
-            return;
-        }
-        try {
-            const status = await fetchCoworkerStatus(agentUrl, password, coworker);
-            res.send(status ? escapeHtml(status) : `<span style="color:var(--text-dim)">—</span>`);
-        }
-        catch {
-            res.send(`<span style="color:var(--text-dim)">—</span>`);
-        }
-    });
-    // ── POST /reset — revert the coworker's session to first message ─────────
-    app.post("/reset", async (req, res) => {
-        const coworker = req.query.coworker;
-        res.setHeader("Content-Type", "text/html; charset=utf-8");
-        if (!coworker) {
-            res.send(`<span style="color:var(--red)">✗ No coworker selected.</span>`);
-            return;
-        }
-        try {
-            await apiFetch(agentUrl, password, `/sessions/${encodeURIComponent(coworker)}/revert-to-start`, {
-                method: "POST",
-            });
-            res.send(`<span style="color:var(--green)">✓ ${escapeHtml(coworker)} reset and restarted.</span>`);
-        }
-        catch (err) {
-            const msg = err instanceof Error ? err.message : String(err);
-            res.send(`<span style="color:var(--red)">✗ Reset failed: ${escapeHtml(msg)}</span>`);
-        }
-    });
-    // ── GET /ping — keeps the refresh dot alive ───────────────────────────────
-    app.get("/ping", (_req, res) => {
-        res.status(204).end();
-    });
-    const server = app.listen(port, host, () => {
-        console.log(`Communicator running at http://${host}:${port}`);
-        console.log(`Press Ctrl+C to stop.`);
-    });
-    server.on('error', (err) => {
-        if (err.code === 'EADDRINUSE') {
-            console.error(`Error: Port ${port} is already in use. Is another instance running?`);
-        }
-        else {
-            console.error(`Error: ${err.message}`);
-        }
-        process.exit(1);
-    });
-    // Keep process alive
-    await new Promise(() => { });
-}