npm - agent-relay - Versions diffs - 1.0.9 → 1.0.12 - Mend

agent-relay 1.0.9 → 1.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (94) hide show

package/README.md +27 -56
package/bin/.gitkeep +0 -0
package/bin/tmux +0 -0
package/dist/bridge/config.d.ts.map +1 -1
package/dist/bridge/multi-project-client.d.ts.map +1 -1
package/dist/bridge/multi-project-client.js +1 -1
package/dist/bridge/multi-project-client.js.map +1 -1
package/dist/bridge/spawner.d.ts +47 -9
package/dist/bridge/spawner.d.ts.map +1 -1
package/dist/bridge/spawner.js +177 -73
package/dist/bridge/spawner.js.map +1 -1
package/dist/bridge/types.d.ts +4 -2
package/dist/bridge/types.d.ts.map +1 -1
package/dist/cli/index.js +192 -295
package/dist/cli/index.js.map +1 -1
package/dist/daemon/router.d.ts.map +1 -1
package/dist/daemon/router.js.map +1 -1
package/dist/dashboard-server/metrics.d.ts.map +1 -0
package/dist/dashboard-server/metrics.js.map +1 -0
package/dist/dashboard-server/needs-attention.d.ts.map +1 -0
package/dist/dashboard-server/needs-attention.js.map +1 -0
package/dist/dashboard-server/server.d.ts.map +1 -0
package/dist/{dashboard → dashboard-server}/server.js +20 -14
package/dist/dashboard-server/server.js.map +1 -0
package/dist/dashboard-server/start.d.ts.map +1 -0
package/dist/dashboard-server/start.js.map +1 -0
package/dist/utils/tmux-resolver.d.ts +55 -0
package/dist/utils/tmux-resolver.d.ts.map +1 -0
package/dist/utils/tmux-resolver.js +175 -0
package/dist/utils/tmux-resolver.js.map +1 -0
package/dist/utils/update-checker.d.ts +26 -0
package/dist/utils/update-checker.d.ts.map +1 -0
package/dist/utils/update-checker.js +174 -0
package/dist/utils/update-checker.js.map +1 -0
package/dist/wrapper/pty-wrapper.d.ts +129 -0
package/dist/wrapper/pty-wrapper.d.ts.map +1 -0
package/dist/wrapper/pty-wrapper.js +442 -0
package/dist/wrapper/pty-wrapper.js.map +1 -0
package/dist/wrapper/tmux-wrapper.d.ts +2 -1
package/dist/wrapper/tmux-wrapper.d.ts.map +1 -1
package/dist/wrapper/tmux-wrapper.js +23 -19
package/dist/wrapper/tmux-wrapper.js.map +1 -1
package/docs/AGENTS.md +43 -30
package/docs/INTEGRATION-GUIDE.md +1 -1
package/docs/PROTOCOL.md +16 -10
package/docs/agent-relay-snippet.md +21 -17
package/package.json +10 -6
package/scripts/dev/PUBLIC_RELEASE_PLAN.md +88 -0
package/scripts/dev/dev-team-setup.sh +431 -0
package/scripts/e2e-test.sh +119 -0
package/scripts/games/game-protocol.md +79 -0
package/scripts/games/hearts-setup.sh +264 -0
package/scripts/postinstall.js +254 -0
package/scripts/tictactoe-setup.sh +181 -0
package/dist/dashboard/metrics.d.ts.map +0 -1
package/dist/dashboard/metrics.js.map +0 -1
package/dist/dashboard/needs-attention.d.ts.map +0 -1
package/dist/dashboard/needs-attention.js.map +0 -1
package/dist/dashboard/public/bridge.html +0 -1272
package/dist/dashboard/public/index.html +0 -2262
package/dist/dashboard/public/js/app.js +0 -184
package/dist/dashboard/public/js/app.js.map +0 -7
package/dist/dashboard/public/metrics.html +0 -999
package/dist/dashboard/server.d.ts.map +0 -1
package/dist/dashboard/server.js.map +0 -1
package/dist/dashboard/start.d.ts.map +0 -1
package/dist/dashboard/start.js.map +0 -1
package/dist/dashboard-v2/index.d.ts +0 -10
package/dist/dashboard-v2/index.d.ts.map +0 -1
package/dist/dashboard-v2/index.js +0 -54
package/dist/dashboard-v2/index.js.map +0 -1
package/dist/dashboard-v2/lib/api.d.ts +0 -95
package/dist/dashboard-v2/lib/api.d.ts.map +0 -1
package/dist/dashboard-v2/lib/api.js +0 -270
package/dist/dashboard-v2/lib/api.js.map +0 -1
package/dist/dashboard-v2/lib/colors.d.ts +0 -61
package/dist/dashboard-v2/lib/colors.d.ts.map +0 -1
package/dist/dashboard-v2/lib/colors.js +0 -198
package/dist/dashboard-v2/lib/colors.js.map +0 -1
package/dist/dashboard-v2/lib/hierarchy.d.ts +0 -74
package/dist/dashboard-v2/lib/hierarchy.d.ts.map +0 -1
package/dist/dashboard-v2/lib/hierarchy.js +0 -196
package/dist/dashboard-v2/lib/hierarchy.js.map +0 -1
package/dist/dashboard-v2/types/index.d.ts +0 -154
package/dist/dashboard-v2/types/index.d.ts.map +0 -1
package/dist/dashboard-v2/types/index.js +0 -6
package/dist/dashboard-v2/types/index.js.map +0 -1
/package/dist/{dashboard → dashboard-server}/metrics.d.ts +0 -0
/package/dist/{dashboard → dashboard-server}/metrics.js +0 -0
/package/dist/{dashboard → dashboard-server}/needs-attention.d.ts +0 -0
/package/dist/{dashboard → dashboard-server}/needs-attention.js +0 -0
/package/dist/{dashboard → dashboard-server}/server.d.ts +0 -0
/package/dist/{dashboard → dashboard-server}/start.d.ts +0 -0
/package/dist/{dashboard → dashboard-server}/start.js +0 -0

package/dist/dashboard/public/index.html DELETED Viewed

@@ -1,2262 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Agent Relay</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-  <style>
-    /* ========================================
-       Design Tokens
-       ======================================== */
-    :root {
-      /* Background colors */
-      --bg-workspace: #1a1d21;
-      --bg-sidebar: #19171d;
-      --bg-channel-active: #1164a3;
-      --bg-channel-hover: rgba(255, 255, 255, 0.04);
-      --bg-main: #222529;
-      --bg-message-hover: rgba(255, 255, 255, 0.03);
-      --bg-composer: #222529;
-      --bg-input: #222529;
-      --bg-modal: #1a1d21;
-      --bg-tooltip: #1d1c21;
-      /* Text colors */
-      --text-primary: #d1d2d3;
-      --text-secondary: #ababad;
-      --text-muted: #8d8d8e;
-      --text-channel: #bcabbc;
-      --text-channel-active: #ffffff;
-      --text-link: #1d9bd1;
-      /* Accent colors */
-      --accent-primary: #1264a3;
-      --accent-green: #2bac76;
-      --accent-yellow: #e8a427;
-      --accent-red: #e01e5a;
-      --accent-purple: #7c3aed;
-      /* Status colors */
-      --status-online: #2bac76;
-      --status-away: #e8a427;
-      --status-offline: #616061;
-      --status-busy: #e01e5a;
-      /* Border colors */
-      --border-subtle: rgba(255, 255, 255, 0.1);
-      --border-divider: rgba(255, 255, 255, 0.06);
-      /* Badge colors */
-      --badge-bg: #e01e5a;
-      --badge-text: #ffffff;
-      /* Shadows */
-      --shadow-modal: 0 18px 50px rgba(0, 0, 0, 0.6);
-      --shadow-message: 0 1px 2px rgba(0, 0, 0, 0.1);
-      /* Dimensions */
-      --sidebar-width: 260px;
-      --header-height: 49px;
-      --composer-min-height: 44px;
-      /* Typography */
-      --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      --font-mono: 'JetBrains Mono', ui-monospace, monospace;
-      /* Transitions */
-      --transition-fast: 0.1s ease;
-      --transition-normal: 0.2s ease;
-    }
-    /* ========================================
-       Reset & Base
-       ======================================== */
-    *, *::before, *::after {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-    html, body {
-      height: 100%;
-      overflow: hidden;
-    }
-    body {
-      font-family: var(--font-family);
-      font-size: 15px;
-      line-height: 1.46668;
-      color: var(--text-primary);
-      background: var(--bg-workspace);
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
-    /* ========================================
-       Layout Structure
-       ======================================== */
-    .app-container {
-      display: flex;
-      height: 100vh;
-      width: 100vw;
-    }
-    /* Sidebar */
-    .sidebar {
-      width: var(--sidebar-width);
-      background: var(--bg-sidebar);
-      display: flex;
-      flex-direction: column;
-      flex-shrink: 0;
-      border-right: 1px solid var(--border-divider);
-    }
-    /* Main Content */
-    .main-panel {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      min-width: 0;
-      background: var(--bg-main);
-    }
-    /* ========================================
-       Sidebar Components
-       ======================================== */
-    /* Workspace Header */
-    .workspace-header {
-      height: var(--header-height);
-      padding: 0 16px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      border-bottom: 1px solid var(--border-divider);
-      flex-shrink: 0;
-    }
-    .workspace-name {
-      font-size: 18px;
-      font-weight: 700;
-      color: var(--text-primary);
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-    .workspace-name .status-dot {
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      background: var(--status-online);
-      flex-shrink: 0;
-    }
-    .workspace-name .status-dot.offline {
-      background: var(--status-offline);
-    }
-    .compose-new-btn {
-      width: 36px;
-      height: 36px;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.1);
-      border: none;
-      color: var(--text-primary);
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: background var(--transition-fast);
-    }
-    .compose-new-btn:hover {
-      background: rgba(255, 255, 255, 0.2);
-    }
-    /* Command Palette Trigger */
-    .search-bar {
-      margin: 12px 12px 8px;
-      padding: 6px 12px;
-      background: rgba(255, 255, 255, 0.06);
-      border: 1px solid transparent;
-      border-radius: 6px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      cursor: pointer;
-      transition: all var(--transition-fast);
-    }
-    .search-bar:hover {
-      background: rgba(255, 255, 255, 0.1);
-    }
-    .search-bar svg {
-      width: 16px;
-      height: 16px;
-      color: var(--text-muted);
-    }
-    .search-bar span {
-      font-size: 13px;
-      color: var(--text-muted);
-      flex: 1;
-    }
-    .search-bar kbd {
-      font-family: var(--font-family);
-      font-size: 11px;
-      color: var(--text-muted);
-      background: rgba(255, 255, 255, 0.1);
-      padding: 2px 6px;
-      border-radius: 4px;
-    }
-    /* Sidebar Sections */
-    .sidebar-content {
-      flex: 1;
-      overflow-y: auto;
-      padding: 8px 0;
-    }
-    .section-header {
-      padding: 8px 16px 4px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      cursor: pointer;
-    }
-    .section-title {
-      font-size: 15px;
-      font-weight: 600;
-      color: var(--text-channel);
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-    .section-title svg {
-      width: 12px;
-      height: 12px;
-      transition: transform var(--transition-fast);
-    }
-    .section-header.collapsed .section-title svg {
-      transform: rotate(-90deg);
-    }
-    .section-add-btn {
-      width: 24px;
-      height: 24px;
-      border: none;
-      background: transparent;
-      color: var(--text-muted);
-      cursor: pointer;
-      border-radius: 4px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      opacity: 0;
-      transition: all var(--transition-fast);
-    }
-    .section-header:hover .section-add-btn {
-      opacity: 1;
-    }
-    .section-add-btn:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: var(--text-primary);
-    }
-    /* Channel/Agent List */
-    .channel-list {
-      list-style: none;
-    }
-    /* Sidebar Footer */
-    .sidebar-footer {
-      padding: 12px 16px;
-      border-top: 1px solid var(--border-divider);
-    }
-    .nav-link {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 8px 12px;
-      color: var(--text-muted);
-      text-decoration: none;
-      font-size: 13px;
-      border-radius: 6px;
-      transition: all var(--transition-fast);
-    }
-    .nav-link:hover {
-      background: var(--bg-channel-hover);
-      color: var(--text-primary);
-    }
-    .nav-link svg {
-      width: 16px;
-      height: 16px;
-    }
-    .channel-item {
-      display: flex;
-      align-items: center;
-      padding: 6px 20px 6px 16px;
-      cursor: pointer;
-      transition: background var(--transition-fast);
-      gap: 8px;
-      position: relative;
-    }
-    .channel-item:hover {
-      background: var(--bg-channel-hover);
-    }
-    .channel-item.active {
-      background: var(--bg-channel-active);
-    }
-    .channel-item.active .channel-name,
-    .channel-item.active .channel-prefix {
-      color: var(--text-channel-active);
-    }
-    .channel-prefix {
-      font-size: 15px;
-      color: var(--text-muted);
-      width: 18px;
-      text-align: center;
-      flex-shrink: 0;
-    }
-    .channel-name {
-      font-size: 15px;
-      color: var(--text-channel);
-      flex: 1;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .channel-item.unread .channel-name {
-      font-weight: 600;
-      color: var(--text-primary);
-    }
-    .unread-badge {
-      min-width: 18px;
-      height: 18px;
-      padding: 0 5px;
-      background: var(--badge-bg);
-      color: var(--badge-text);
-      font-size: 12px;
-      font-weight: 600;
-      border-radius: 9px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    /* Agent item with presence */
-    .agent-avatar {
-      width: 20px;
-      height: 20px;
-      border-radius: 4px;
-      background: var(--accent-purple);
-      color: white;
-      font-size: 10px;
-      font-weight: 600;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      flex-shrink: 0;
-    }
-    .presence-indicator {
-      position: absolute;
-      bottom: -2px;
-      right: -2px;
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      border: 2px solid var(--bg-sidebar);
-      background: var(--status-offline);
-    }
-    .presence-indicator.online {
-      background: var(--status-online);
-    }
-    .presence-indicator.away {
-      background: var(--status-away);
-    }
-    .presence-indicator.busy {
-      background: var(--status-busy);
-    }
-    /* Needs Attention Indicator */
-    .channel-item.needs-attention {
-      background: rgba(232, 164, 39, 0.1);
-    }
-    .channel-item.needs-attention::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      right: 12px;
-      transform: translateY(-50%);
-      width: 8px;
-      height: 8px;
-      background: var(--accent-yellow);
-      border-radius: 50%;
-      animation: attentionPulse 1.5s ease-in-out infinite;
-    }
-    .attention-badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      padding: 2px 6px;
-      margin-left: 8px;
-      background: var(--accent-yellow);
-      color: #1a1d21;
-      font-size: 10px;
-      font-weight: 600;
-      border-radius: 4px;
-      text-transform: uppercase;
-      letter-spacing: 0.02em;
-    }
-    @keyframes attentionPulse {
-      0%, 100% {
-        opacity: 1;
-        transform: translateY(-50%) scale(1);
-      }
-      50% {
-        opacity: 0.5;
-        transform: translateY(-50%) scale(1.2);
-      }
-    }
-    /* ========================================
-       Main Panel Components
-       ======================================== */
-    /* Channel Header */
-    .channel-header {
-      height: var(--header-height);
-      padding: 0 20px;
-      display: flex;
-      align-items: center;
-      border-bottom: 1px solid var(--border-divider);
-      flex-shrink: 0;
-      gap: 8px;
-    }
-    .channel-header-name {
-      font-size: 18px;
-      font-weight: 700;
-      color: var(--text-primary);
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-    .channel-header-name .prefix {
-      color: var(--text-muted);
-      font-weight: 500;
-    }
-    .header-divider {
-      width: 1px;
-      height: 20px;
-      background: var(--border-subtle);
-      margin: 0 8px;
-    }
-    .channel-topic {
-      font-size: 13px;
-      color: var(--text-muted);
-      flex: 1;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .header-actions {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-    .header-action-btn {
-      width: 28px;
-      height: 28px;
-      border: none;
-      background: transparent;
-      color: var(--text-muted);
-      border-radius: 4px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all var(--transition-fast);
-    }
-    .header-action-btn:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: var(--text-primary);
-    }
-    .online-count {
-      font-size: 13px;
-      color: var(--text-muted);
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-    .online-count .dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: var(--status-online);
-    }
-    /* Message List */
-    .messages-container {
-      flex: 1;
-      overflow-y: auto;
-      overflow-x: hidden;
-      display: flex;
-      flex-direction: column;
-    }
-    .messages-list {
-      flex: 1;
-      padding: 16px 0;
-    }
-    /* Date Divider */
-    .date-divider {
-      display: flex;
-      align-items: center;
-      margin: 16px 20px;
-    }
-    .date-divider::before,
-    .date-divider::after {
-      content: '';
-      flex: 1;
-      height: 1px;
-      background: var(--border-divider);
-    }
-    .date-divider-text {
-      padding: 4px 16px;
-      font-size: 13px;
-      font-weight: 600;
-      color: var(--text-secondary);
-      background: var(--bg-main);
-      border: 1px solid var(--border-divider);
-      border-radius: 24px;
-    }
-    /* Message */
-    .message {
-      padding: 8px 20px;
-      display: flex;
-      gap: 8px;
-      transition: background var(--transition-fast);
-      position: relative;
-    }
-    .message:hover {
-      background: var(--bg-message-hover);
-    }
-    .message:hover .message-actions {
-      opacity: 1;
-    }
-    .message-avatar {
-      width: 36px;
-      height: 36px;
-      border-radius: 4px;
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: 600;
-      font-size: 14px;
-      color: white;
-    }
-    .message-content {
-      flex: 1;
-      min-width: 0;
-    }
-    .message-header {
-      display: flex;
-      align-items: baseline;
-      gap: 8px;
-      margin-bottom: 4px;
-    }
-    .message-sender {
-      font-size: 15px;
-      font-weight: 700;
-      color: var(--text-primary);
-    }
-    .message-recipient {
-      font-size: 13px;
-      color: var(--text-muted);
-    }
-    .message-recipient .target {
-      color: var(--text-link);
-    }
-    .project-badge {
-      display: inline-block;
-      background: var(--accent-primary);
-      color: white;
-      font-size: 10px;
-      font-weight: 600;
-      padding: 2px 6px;
-      border-radius: 4px;
-      margin-right: 4px;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-    .message-timestamp {
-      font-size: 12px;
-      color: var(--text-muted);
-    }
-    .message-body {
-      font-size: 15px;
-      line-height: 1.46668;
-      color: var(--text-primary);
-      word-wrap: break-word;
-      white-space: pre-wrap;
-    }
-    .message-body code {
-      font-family: var(--font-mono);
-      font-size: 13px;
-      background: rgba(255, 255, 255, 0.06);
-      padding: 2px 4px;
-      border-radius: 3px;
-    }
-    .message-body pre {
-      font-family: var(--font-mono);
-      font-size: 13px;
-      background: rgba(0, 0, 0, 0.3);
-      padding: 12px;
-      border-radius: 4px;
-      margin: 8px 0;
-      overflow-x: auto;
-      white-space: pre-wrap;
-      word-wrap: break-word;
-    }
-    .message-body pre code {
-      background: transparent;
-      padding: 0;
-      border-radius: 0;
-    }
-    .message-body strong {
-      font-weight: 700;
-      color: var(--text-primary);
-    }
-    .message-body em {
-      font-style: italic;
-    }
-    /* Broadcast message styling */
-    .message.broadcast {
-      border-left: 3px solid var(--accent-yellow);
-      margin-left: 17px;
-      padding-left: 17px;
-    }
-    .message.broadcast .message-recipient .target {
-      color: var(--accent-yellow);
-    }
-    /* Message Actions (hover toolbar) */
-    .message-actions {
-      position: absolute;
-      top: -16px;
-      right: 20px;
-      background: var(--bg-tooltip);
-      border: 1px solid var(--border-subtle);
-      border-radius: 6px;
-      padding: 4px;
-      display: flex;
-      gap: 2px;
-      opacity: 0;
-      transition: opacity var(--transition-fast);
-      box-shadow: var(--shadow-message);
-    }
-    .message-action-btn {
-      width: 28px;
-      height: 28px;
-      border: none;
-      background: transparent;
-      color: var(--text-muted);
-      border-radius: 4px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all var(--transition-fast);
-    }
-    .message-action-btn:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: var(--text-primary);
-    }
-    /* Thread Indicator */
-    .thread-indicator {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      margin-top: 6px;
-      padding: 4px 8px;
-      background: rgba(255, 255, 255, 0.04);
-      border-radius: 4px;
-      font-size: 13px;
-      color: var(--text-link);
-      cursor: pointer;
-      transition: background var(--transition-fast);
-    }
-    .thread-indicator:hover {
-      background: rgba(255, 255, 255, 0.08);
-    }
-    .thread-indicator svg {
-      width: 14px;
-      height: 14px;
-    }
-    /* Typing Indicator */
-    .typing-indicator {
-      padding: 8px 20px;
-      font-size: 13px;
-      color: var(--text-muted);
-      display: none;
-    }
-    .typing-indicator.visible {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .typing-dots {
-      display: flex;
-      gap: 3px;
-    }
-    .typing-dots span {
-      width: 6px;
-      height: 6px;
-      background: var(--text-muted);
-      border-radius: 50%;
-      animation: typingBounce 1.4s infinite;
-    }
-    .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
-    .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
-    @keyframes typingBounce {
-      0%, 60%, 100% { transform: translateY(0); }
-      30% { transform: translateY(-4px); }
-    }
-    /* ========================================
-       Composer
-       ======================================== */
-    .composer {
-      padding: 0 20px 20px;
-      flex-shrink: 0;
-      position: relative;
-      z-index: 10;
-    }
-    .composer-container {
-      background: var(--bg-input);
-      border: 1px solid var(--border-subtle);
-      border-radius: 8px;
-      overflow: visible;
-      transition: border-color var(--transition-fast);
-      position: relative;
-    }
-    .composer-container:focus-within {
-      border-color: var(--accent-primary);
-    }
-    .composer-input-row {
-      display: flex;
-      align-items: flex-end;
-    }
-    .composer-toolbar {
-      padding: 8px 12px;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      border-right: 1px solid var(--border-divider);
-    }
-    .toolbar-btn {
-      width: 28px;
-      height: 28px;
-      border: none;
-      background: transparent;
-      color: var(--text-muted);
-      border-radius: 4px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all var(--transition-fast);
-    }
-    .toolbar-btn:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: var(--text-primary);
-    }
-    .composer-input {
-      flex: 1;
-      padding: 12px;
-      background: transparent;
-      border: none;
-      color: var(--text-primary);
-      font-family: var(--font-family);
-      font-size: 15px;
-      line-height: 1.46668;
-      resize: none;
-      outline: none;
-      min-height: var(--composer-min-height);
-      max-height: 200px;
-    }
-    .composer-input::placeholder {
-      color: var(--text-muted);
-    }
-    .composer-send {
-      padding: 8px 12px;
-      display: flex;
-      align-items: center;
-    }
-    .send-btn {
-      width: 32px;
-      height: 32px;
-      border: none;
-      background: var(--accent-primary);
-      color: white;
-      border-radius: 4px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all var(--transition-fast);
-    }
-    .send-btn:hover {
-      background: #0b5d99;
-    }
-    .send-btn:disabled {
-      background: var(--border-subtle);
-      cursor: not-allowed;
-    }
-    .composer-hint {
-      padding: 8px 12px 0;
-      font-size: 12px;
-      color: var(--text-muted);
-      text-align: right;
-    }
-    .composer-hint kbd {
-      font-family: var(--font-family);
-      background: rgba(255, 255, 255, 0.06);
-      padding: 2px 5px;
-      border-radius: 3px;
-      font-size: 11px;
-    }
-    /* ========================================
-       @-Mention Autocomplete
-       ======================================== */
-    .mention-autocomplete {
-      position: absolute;
-      bottom: 100%;
-      left: 0;
-      right: 0;
-      margin-bottom: 8px;
-      background: var(--bg-modal);
-      border: 1px solid var(--border-subtle);
-      border-radius: 8px;
-      box-shadow: var(--shadow-modal);
-      max-height: 240px;
-      overflow-y: auto;
-      display: none;
-      z-index: 500;
-    }
-    .mention-autocomplete.visible {
-      display: block;
-      animation: autocompleteSlideIn 0.1s ease-out;
-    }
-    @keyframes autocompleteSlideIn {
-      from {
-        opacity: 0;
-        transform: translateY(4px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-    .mention-autocomplete-header {
-      padding: 8px 12px 4px;
-      font-size: 11px;
-      font-weight: 600;
-      color: var(--text-muted);
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      border-bottom: 1px solid var(--border-divider);
-    }
-    .mention-autocomplete-item {
-      padding: 8px 12px;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      cursor: pointer;
-      transition: background var(--transition-fast);
-    }
-    .mention-autocomplete-item:hover,
-    .mention-autocomplete-item.selected {
-      background: rgba(255, 255, 255, 0.08);
-    }
-    .mention-autocomplete-item .agent-avatar {
-      width: 24px;
-      height: 24px;
-      font-size: 10px;
-    }
-    .mention-autocomplete-name {
-      font-size: 14px;
-      font-weight: 500;
-      color: var(--text-primary);
-    }
-    .mention-autocomplete-role {
-      font-size: 12px;
-      color: var(--text-muted);
-      margin-left: auto;
-    }
-    .mention-autocomplete-hint {
-      padding: 6px 12px;
-      font-size: 11px;
-      color: var(--text-muted);
-      border-top: 1px solid var(--border-divider);
-      display: flex;
-      gap: 12px;
-    }
-    .mention-autocomplete-hint kbd {
-      font-family: var(--font-family);
-      background: rgba(255, 255, 255, 0.1);
-      padding: 1px 5px;
-      border-radius: 3px;
-      font-size: 10px;
-    }
-    /* ========================================
-       Command Palette
-       ======================================== */
-    .command-palette-overlay {
-      position: fixed;
-      inset: 0;
-      background: rgba(0, 0, 0, 0.6);
-      display: none;
-      align-items: flex-start;
-      justify-content: center;
-      padding-top: 15vh;
-      z-index: 1000;
-    }
-    .command-palette-overlay.visible {
-      display: flex;
-    }
-    .command-palette {
-      width: 600px;
-      max-width: 90vw;
-      background: var(--bg-modal);
-      border-radius: 8px;
-      box-shadow: var(--shadow-modal);
-      overflow: hidden;
-      animation: paletteSlideIn 0.15s ease-out;
-    }
-    @keyframes paletteSlideIn {
-      from {
-        opacity: 0;
-        transform: translateY(-10px) scale(0.98);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-      }
-    }
-    .palette-search {
-      padding: 16px;
-      border-bottom: 1px solid var(--border-divider);
-    }
-    .palette-search-input {
-      width: 100%;
-      background: transparent;
-      border: none;
-      color: var(--text-primary);
-      font-family: var(--font-family);
-      font-size: 18px;
-      outline: none;
-    }
-    .palette-search-input::placeholder {
-      color: var(--text-muted);
-    }
-    .palette-results {
-      max-height: 400px;
-      overflow-y: auto;
-    }
-    .palette-section {
-      padding: 8px 0;
-    }
-    .palette-section-title {
-      padding: 8px 16px 4px;
-      font-size: 12px;
-      font-weight: 600;
-      color: var(--text-muted);
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-    }
-    .palette-item {
-      padding: 10px 16px;
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      cursor: pointer;
-      transition: background var(--transition-fast);
-    }
-    .palette-item:hover,
-    .palette-item.selected {
-      background: rgba(255, 255, 255, 0.06);
-    }
-    .palette-item-icon {
-      width: 20px;
-      height: 20px;
-      color: var(--text-muted);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .palette-item-content {
-      flex: 1;
-    }
-    .palette-item-title {
-      font-size: 14px;
-      color: var(--text-primary);
-    }
-    .palette-item-subtitle {
-      font-size: 12px;
-      color: var(--text-muted);
-    }
-    .palette-item-shortcut {
-      font-size: 12px;
-      color: var(--text-muted);
-    }
-    .palette-item-shortcut kbd {
-      font-family: var(--font-family);
-      background: rgba(255, 255, 255, 0.1);
-      padding: 2px 6px;
-      border-radius: 3px;
-      margin-left: 4px;
-    }
-    /* ========================================
-       Thread Panel
-       ======================================== */
-    .thread-panel-overlay {
-      position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      width: 400px;
-      background: var(--bg-modal);
-      border-left: 1px solid var(--border-divider);
-      display: none;
-      flex-direction: column;
-      z-index: 100;
-      box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
-      animation: threadSlideIn 0.2s ease-out;
-    }
-    .thread-panel-overlay.visible {
-      display: flex;
-    }
-    @keyframes threadSlideIn {
-      from {
-        transform: translateX(100%);
-        opacity: 0;
-      }
-      to {
-        transform: translateX(0);
-        opacity: 1;
-      }
-    }
-    .thread-panel {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-    .thread-panel-header {
-      padding: 16px;
-      border-bottom: 1px solid var(--border-divider);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      flex-shrink: 0;
-    }
-    .thread-panel-title {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--text-primary);
-    }
-    .thread-panel-title .thread-id {
-      font-size: 13px;
-      font-weight: 500;
-      color: var(--text-link);
-      background: rgba(29, 155, 209, 0.1);
-      padding: 2px 8px;
-      border-radius: 4px;
-    }
-    .thread-panel-close {
-      width: 32px;
-      height: 32px;
-      border: none;
-      background: transparent;
-      color: var(--text-muted);
-      border-radius: 4px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all var(--transition-fast);
-    }
-    .thread-panel-close:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: var(--text-primary);
-    }
-    .thread-messages {
-      flex: 1;
-      overflow-y: auto;
-      padding: 16px;
-    }
-    .thread-message {
-      padding: 12px;
-      background: rgba(255, 255, 255, 0.02);
-      border-radius: 8px;
-      margin-bottom: 12px;
-    }
-    .thread-message:last-child {
-      margin-bottom: 0;
-    }
-    .thread-message-header {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-bottom: 6px;
-    }
-    .thread-message-avatar {
-      width: 28px;
-      height: 28px;
-      border-radius: 4px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: 600;
-      font-size: 11px;
-      color: white;
-    }
-    .thread-message-sender {
-      font-weight: 600;
-      color: var(--text-primary);
-      font-size: 14px;
-    }
-    .thread-message-time {
-      font-size: 12px;
-      color: var(--text-muted);
-    }
-    .thread-message-body {
-      font-size: 14px;
-      color: var(--text-primary);
-      line-height: 1.4;
-      word-wrap: break-word;
-      white-space: pre-wrap;
-    }
-    .thread-composer {
-      padding: 16px;
-      border-top: 1px solid var(--border-divider);
-      display: flex;
-      gap: 8px;
-      align-items: flex-end;
-      flex-shrink: 0;
-    }
-    .thread-composer-input {
-      flex: 1;
-      padding: 10px 12px;
-      background: var(--bg-input);
-      border: 1px solid var(--border-subtle);
-      border-radius: 6px;
-      color: var(--text-primary);
-      font-family: var(--font-family);
-      font-size: 14px;
-      resize: none;
-      outline: none;
-      min-height: 40px;
-      max-height: 120px;
-    }
-    .thread-composer-input:focus {
-      border-color: var(--accent-primary);
-    }
-    .thread-composer-input::placeholder {
-      color: var(--text-muted);
-    }
-    .thread-send-btn {
-      width: 36px;
-      height: 36px;
-      border: none;
-      background: var(--accent-primary);
-      color: white;
-      border-radius: 6px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all var(--transition-fast);
-      flex-shrink: 0;
-    }
-    .thread-send-btn:hover {
-      background: #0b5d99;
-    }
-    .thread-empty {
-      text-align: center;
-      padding: 32px;
-      color: var(--text-muted);
-    }
-    /* Reply count badge on messages */
-    .reply-count-badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      margin-top: 8px;
-      padding: 4px 8px;
-      background: rgba(29, 155, 209, 0.1);
-      border-radius: 4px;
-      font-size: 12px;
-      color: var(--text-link);
-      cursor: pointer;
-      transition: background var(--transition-fast);
-    }
-    .reply-count-badge:hover {
-      background: rgba(29, 155, 209, 0.2);
-    }
-    .reply-count-badge svg {
-      width: 14px;
-      height: 14px;
-    }
-    /* ========================================
-       Empty States
-       ======================================== */
-    .empty-state {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      padding: 48px 24px;
-      text-align: center;
-    }
-    .empty-state-icon {
-      width: 64px;
-      height: 64px;
-      margin-bottom: 16px;
-      color: var(--text-muted);
-    }
-    .empty-state-title {
-      font-size: 18px;
-      font-weight: 600;
-      color: var(--text-primary);
-      margin-bottom: 8px;
-    }
-    .empty-state-text {
-      font-size: 14px;
-      color: var(--text-muted);
-      max-width: 300px;
-    }
-    /* ========================================
-       Scrollbars
-       ======================================== */
-    ::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
-    ::-webkit-scrollbar-track {
-      background: transparent;
-    }
-    ::-webkit-scrollbar-thumb {
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: 4px;
-    }
-    ::-webkit-scrollbar-thumb:hover {
-      background: rgba(255, 255, 255, 0.3);
-    }
-    /* ========================================
-       Utilities
-       ======================================== */
-    .visually-hidden {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      border: 0;
-    }
-    /* ========================================
-       Spawn Modal
-       ======================================== */
-    .spawn-modal-overlay {
-      position: fixed;
-      inset: 0;
-      background: rgba(0, 0, 0, 0.6);
-      display: none;
-      align-items: center;
-      justify-content: center;
-      z-index: 1000;
-    }
-    .spawn-modal-overlay.visible {
-      display: flex;
-    }
-    .spawn-modal {
-      width: 480px;
-      max-width: 90vw;
-      background: var(--bg-modal);
-      border-radius: 12px;
-      box-shadow: var(--shadow-modal);
-      overflow: hidden;
-      animation: modalSlideIn 0.2s ease-out;
-    }
-    @keyframes modalSlideIn {
-      from {
-        opacity: 0;
-        transform: translateY(-20px) scale(0.95);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-      }
-    }
-    .spawn-modal-header {
-      padding: 16px 20px;
-      border-bottom: 1px solid var(--border-divider);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-    .spawn-modal-title {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      font-size: 18px;
-      font-weight: 600;
-      color: var(--text-primary);
-    }
-    .spawn-modal-title svg {
-      color: var(--accent-green);
-    }
-    .spawn-modal-close {
-      width: 32px;
-      height: 32px;
-      border: none;
-      background: transparent;
-      color: var(--text-muted);
-      border-radius: 6px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all var(--transition-fast);
-    }
-    .spawn-modal-close:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: var(--text-primary);
-    }
-    .spawn-modal-body {
-      padding: 20px;
-    }
-    .spawn-form-group {
-      margin-bottom: 16px;
-    }
-    .spawn-form-group:last-child {
-      margin-bottom: 0;
-    }
-    .spawn-form-group label {
-      display: block;
-      font-size: 13px;
-      font-weight: 600;
-      color: var(--text-secondary);
-      margin-bottom: 6px;
-    }
-    .spawn-input,
-    .spawn-textarea {
-      width: 100%;
-      padding: 10px 12px;
-      background: var(--bg-input);
-      border: 1px solid var(--border-subtle);
-      border-radius: 6px;
-      color: var(--text-primary);
-      font-family: var(--font-family);
-      font-size: 14px;
-      transition: border-color var(--transition-fast);
-    }
-    .spawn-input:focus,
-    .spawn-textarea:focus {
-      outline: none;
-      border-color: var(--accent-primary);
-    }
-    .spawn-input::placeholder,
-    .spawn-textarea::placeholder {
-      color: var(--text-muted);
-    }
-    .spawn-textarea {
-      resize: vertical;
-      min-height: 80px;
-      line-height: 1.4;
-    }
-    .spawn-hint {
-      display: block;
-      font-size: 12px;
-      color: var(--text-muted);
-      margin-top: 4px;
-    }
-    .spawn-status {
-      min-height: 20px;
-      font-size: 13px;
-      margin-top: 12px;
-    }
-    .spawn-status.success {
-      color: var(--accent-green);
-    }
-    .spawn-status.error {
-      color: var(--accent-red);
-    }
-    .spawn-status.loading {
-      color: var(--text-muted);
-    }
-    .spawn-modal-footer {
-      padding: 16px 20px;
-      border-top: 1px solid var(--border-divider);
-      display: flex;
-      justify-content: flex-end;
-      gap: 10px;
-    }
-    .spawn-cancel-btn {
-      padding: 8px 16px;
-      background: transparent;
-      border: 1px solid var(--border-subtle);
-      border-radius: 6px;
-      color: var(--text-secondary);
-      font-size: 14px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all var(--transition-fast);
-    }
-    .spawn-cancel-btn:hover {
-      background: rgba(255, 255, 255, 0.05);
-      color: var(--text-primary);
-    }
-    .spawn-submit-btn {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      padding: 8px 16px;
-      background: var(--accent-green);
-      border: none;
-      border-radius: 6px;
-      color: white;
-      font-size: 14px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all var(--transition-fast);
-    }
-    .spawn-submit-btn:hover:not(:disabled) {
-      background: #249966;
-    }
-    .spawn-submit-btn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-    /* Spawned Agent Indicator */
-    .channel-item .spawned-icon {
-      width: 14px;
-      height: 14px;
-      color: var(--accent-green);
-      flex-shrink: 0;
-    }
-    .channel-item .release-btn {
-      opacity: 0;
-      width: 18px;
-      height: 18px;
-      border: none;
-      background: var(--accent-red);
-      color: white;
-      border-radius: 4px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: opacity var(--transition-fast);
-      flex-shrink: 0;
-    }
-    .channel-item:hover .release-btn {
-      opacity: 1;
-    }
-    .channel-item .release-btn:hover {
-      background: #c41a4f;
-    }
-    /* ========================================
-       Fleet View Toggle
-       ======================================== */
-    .view-toggle {
-      display: flex;
-      background: rgba(255, 255, 255, 0.06);
-      border-radius: 6px;
-      padding: 2px;
-      margin: 0 12px 8px;
-    }
-    .view-toggle-btn {
-      flex: 1;
-      padding: 6px 12px;
-      border: none;
-      background: transparent;
-      color: var(--text-muted);
-      font-size: 12px;
-      font-weight: 500;
-      border-radius: 4px;
-      cursor: pointer;
-      transition: all var(--transition-fast);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 6px;
-    }
-    .view-toggle-btn:hover {
-      color: var(--text-secondary);
-    }
-    .view-toggle-btn.active {
-      background: var(--accent-primary);
-      color: white;
-    }
-    .view-toggle-btn svg {
-      width: 14px;
-      height: 14px;
-    }
-    .view-toggle-btn .peer-count {
-      font-size: 10px;
-      background: rgba(255, 255, 255, 0.2);
-      padding: 1px 5px;
-      border-radius: 8px;
-      margin-left: 4px;
-    }
-    /* Server badge for fleet agents */
-    .server-badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 3px;
-      padding: 1px 6px;
-      background: var(--accent-purple);
-      color: white;
-      font-size: 9px;
-      font-weight: 600;
-      border-radius: 3px;
-      margin-right: 6px;
-      text-transform: uppercase;
-      letter-spacing: 0.3px;
-    }
-    .server-badge.local {
-      background: var(--accent-primary);
-    }
-    .server-badge .server-dot {
-      width: 5px;
-      height: 5px;
-      border-radius: 50%;
-      background: var(--status-online);
-    }
-    .server-badge .server-dot.offline {
-      background: var(--status-offline);
-    }
-    /* Peer status in header */
-    .peer-status {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 4px 10px;
-      background: rgba(124, 58, 237, 0.15);
-      border-radius: 12px;
-      font-size: 12px;
-      color: var(--accent-purple);
-      margin-left: 8px;
-    }
-    .peer-status .peer-dot {
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background: var(--accent-purple);
-    }
-    .peer-status.connected .peer-dot {
-      background: var(--status-online);
-    }
-    .peer-status.disconnected {
-      background: rgba(97, 96, 97, 0.15);
-      color: var(--status-offline);
-    }
-    .peer-status.disconnected .peer-dot {
-      background: var(--status-offline);
-    }
-    /* Fleet section in sidebar */
-    .fleet-servers-list {
-      list-style: none;
-      padding: 0 8px;
-      margin-bottom: 8px;
-    }
-    .server-item {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 6px 8px;
-      border-radius: 6px;
-      font-size: 13px;
-      color: var(--text-channel);
-      cursor: pointer;
-      transition: background var(--transition-fast);
-    }
-    .server-item:hover {
-      background: var(--bg-channel-hover);
-    }
-    .server-item .server-icon {
-      width: 20px;
-      height: 20px;
-      border-radius: 4px;
-      background: var(--accent-purple);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-    }
-    .server-item .server-icon svg {
-      width: 12px;
-      height: 12px;
-      color: white;
-    }
-    .server-item .server-icon .status-dot {
-      position: absolute;
-      bottom: -2px;
-      right: -2px;
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: var(--status-online);
-      border: 2px solid var(--bg-sidebar);
-    }
-    .server-item .server-icon .status-dot.offline {
-      background: var(--status-offline);
-    }
-    .server-item .server-name {
-      flex: 1;
-    }
-    .server-item .agent-count {
-      font-size: 11px;
-      color: var(--text-muted);
-      font-family: var(--font-mono);
-    }
-    /* Fleet agent avatar with server indicator */
-    .channel-item .agent-avatar .server-indicator {
-      position: absolute;
-      top: -3px;
-      right: -3px;
-      width: 10px;
-      height: 10px;
-      border-radius: 2px;
-      background: var(--accent-purple);
-      border: 2px solid var(--bg-sidebar);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .channel-item .agent-avatar .server-indicator.local {
-      background: var(--accent-primary);
-    }
-  </style>
-</head>
-<body>
-  <div class="app-container">
-    <!-- Sidebar -->
-    <aside class="sidebar">
-      <div class="workspace-header">
-        <div class="workspace-name">
-          <span class="status-dot" id="connection-dot"></span>
-          Agent Relay
-        </div>
-        <button class="compose-new-btn" title="New message">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M12 20h9"/>
-            <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
-          </svg>
-        </button>
-      </div>
-      <div class="search-bar" id="search-trigger">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <circle cx="11" cy="11" r="8"/>
-          <path d="M21 21l-4.35-4.35"/>
-        </svg>
-        <span>Search</span>
-        <kbd>Ctrl K</kbd>
-      </div>
-      <div class="sidebar-content">
-        <!-- View Toggle (Local/Fleet) -->
-        <div class="view-toggle" id="view-toggle" style="display: none;">
-          <button class="view-toggle-btn active" data-view="local">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
-              <line x1="9" y1="9" x2="15" y2="15"/>
-              <line x1="15" y1="9" x2="9" y2="15"/>
-            </svg>
-            Local
-          </button>
-          <button class="view-toggle-btn" data-view="fleet">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <circle cx="12" cy="12" r="10"/>
-              <circle cx="12" cy="12" r="4"/>
-              <line x1="12" y1="2" x2="12" y2="6"/>
-              <line x1="12" y1="18" x2="12" y2="22"/>
-              <line x1="2" y1="12" x2="6" y2="12"/>
-              <line x1="18" y1="12" x2="22" y2="12"/>
-            </svg>
-            Fleet
-            <span class="peer-count" id="peer-count">0</span>
-          </button>
-        </div>
-        <!-- Peer Servers Section (shown in fleet mode) -->
-        <div class="section" id="servers-section" style="display: none;">
-          <div class="section-header">
-            <div class="section-title">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M6 9l6 6 6-6"/>
-              </svg>
-              Servers
-            </div>
-          </div>
-          <ul class="fleet-servers-list" id="servers-list">
-            <!-- Servers injected here -->
-          </ul>
-        </div>
-        <!-- Channels Section -->
-        <div class="section">
-          <div class="section-header" id="channels-header">
-            <div class="section-title">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M6 9l6 6 6-6"/>
-              </svg>
-              Channels
-            </div>
-          </div>
-          <ul class="channel-list" id="channels-list">
-            <li class="channel-item active" data-channel="general">
-              <span class="channel-prefix">#</span>
-              <span class="channel-name">general</span>
-            </li>
-          </ul>
-        </div>
-        <!-- Agents Section -->
-        <div class="section">
-          <div class="section-header" id="agents-header">
-            <div class="section-title">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M6 9l6 6 6-6"/>
-              </svg>
-              Agents
-            </div>
-            <button class="section-add-btn" id="spawn-btn" title="Spawn new agent" style="opacity: 1;">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <line x1="12" y1="5" x2="12" y2="19"/>
-                <line x1="5" y1="12" x2="19" y2="12"/>
-              </svg>
-            </button>
-          </div>
-          <ul class="channel-list" id="agents-list">
-            <!-- Agents injected here -->
-          </ul>
-        </div>
-      </div>
-      <div class="sidebar-footer">
-        <a href="/metrics" class="nav-link">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M3 3v18h18"/>
-            <path d="M18 17V9"/>
-            <path d="M13 17V5"/>
-            <path d="M8 17v-3"/>
-          </svg>
-          Metrics
-        </a>
-        <a href="/bridge" class="nav-link">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <rect x="3" y="3" width="7" height="7"/>
-            <rect x="14" y="3" width="7" height="7"/>
-            <rect x="14" y="14" width="7" height="7"/>
-            <rect x="3" y="14" width="7" height="7"/>
-          </svg>
-          Bridge View
-        </a>
-      </div>
-    </aside>
-    <!-- Main Panel -->
-    <main class="main-panel">
-      <header class="channel-header">
-        <div class="channel-header-name">
-          <span class="prefix">#</span>
-          <span id="current-channel-name">general</span>
-        </div>
-        <div class="header-divider"></div>
-        <div class="channel-topic" id="channel-topic">All agent communications</div>
-        <div class="header-actions">
-          <div class="online-count">
-            <span class="dot"></span>
-            <span id="online-count">0 online</span>
-          </div>
-        </div>
-      </header>
-      <div class="messages-container">
-        <div class="messages-list" id="messages-list">
-          <!-- Messages injected here -->
-        </div>
-        <div class="typing-indicator" id="typing-indicator">
-          <div class="typing-dots">
-            <span></span>
-            <span></span>
-            <span></span>
-          </div>
-          <span id="typing-text">Someone is typing...</span>
-        </div>
-      </div>
-      <div class="composer">
-        <div class="composer-container" style="position: relative;">
-          <!-- @-Mention Autocomplete Dropdown -->
-          <div class="mention-autocomplete" id="mention-autocomplete">
-            <div class="mention-autocomplete-header">Agents</div>
-            <div id="mention-autocomplete-list">
-              <!-- Agent items will be injected here -->
-            </div>
-            <div class="mention-autocomplete-hint">
-              <span><kbd>Tab</kbd> or <kbd>Enter</kbd> to select</span>
-              <span><kbd>↑↓</kbd> to navigate</span>
-              <span><kbd>Esc</kbd> to close</span>
-            </div>
-          </div>
-          <div class="composer-input-row">
-            <div class="composer-toolbar">
-              <button class="toolbar-btn" id="bold-btn" title="Bold (Ctrl+B)">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/>
-                  <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/>
-                </svg>
-              </button>
-              <button class="toolbar-btn" id="emoji-btn" title="Add emoji">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <circle cx="12" cy="12" r="10"/>
-                  <path d="M8 14s1.5 2 4 2 4-2 4-2"/>
-                  <line x1="9" y1="9" x2="9.01" y2="9"/>
-                  <line x1="15" y1="9" x2="15.01" y2="9"/>
-                </svg>
-              </button>
-            </div>
-            <textarea
-              id="message-input"
-              class="composer-input"
-              placeholder="@AgentName message... (or @* to broadcast)"
-              rows="1"
-            ></textarea>
-            <div class="composer-send">
-              <button class="send-btn" id="send-btn" title="Send message">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <line x1="22" y1="2" x2="11" y2="13"/>
-                  <polygon points="22 2 15 22 11 13 2 9 22 2"/>
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div class="composer-hint">
-          <kbd>Ctrl</kbd> + <kbd>Enter</kbd> to send
-        </div>
-      </div>
-    </main>
-  </div>
-  <!-- Command Palette -->
-  <div class="command-palette-overlay" id="command-palette-overlay">
-    <div class="command-palette">
-      <div class="palette-search">
-        <input
-          type="text"
-          class="palette-search-input"
-          id="palette-search"
-          placeholder="Search messages, agents, or type a command..."
-          autocomplete="off"
-        >
-      </div>
-      <div class="palette-results" id="palette-results">
-        <div class="palette-section">
-          <div class="palette-section-title">Commands</div>
-          <div class="palette-item" data-command="broadcast">
-            <div class="palette-item-icon">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
-                <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
-                <path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
-              </svg>
-            </div>
-            <div class="palette-item-content">
-              <div class="palette-item-title">/broadcast</div>
-              <div class="palette-item-subtitle">Send message to all agents</div>
-            </div>
-          </div>
-          <div class="palette-item" data-command="status">
-            <div class="palette-item-icon">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <circle cx="12" cy="12" r="10"/>
-                <path d="M12 6v6l4 2"/>
-              </svg>
-            </div>
-            <div class="palette-item-content">
-              <div class="palette-item-title">/status</div>
-              <div class="palette-item-subtitle">Set your status message</div>
-            </div>
-          </div>
-          <div class="palette-item" data-command="clear">
-            <div class="palette-item-icon">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M3 6h18"/>
-                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
-              </svg>
-            </div>
-            <div class="palette-item-content">
-              <div class="palette-item-title">/clear</div>
-              <div class="palette-item-subtitle">Clear message view</div>
-            </div>
-          </div>
-        </div>
-        <div class="palette-section" id="palette-channels-section">
-          <div class="palette-section-title">Channels</div>
-          <div class="palette-item" data-jump-channel="general">
-            <div class="palette-item-icon">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M4 9l4-4 4 4"/>
-                <path d="M12 15l4 4 4-4"/>
-                <line x1="8" y1="5" x2="8" y2="19"/>
-                <line x1="16" y1="5" x2="16" y2="19"/>
-              </svg>
-            </div>
-            <div class="palette-item-content">
-              <div class="palette-item-title">#general</div>
-              <div class="palette-item-subtitle">All agent communications</div>
-            </div>
-          </div>
-        </div>
-        <div class="palette-section" id="palette-agents-section">
-          <div class="palette-section-title">Jump to Agent</div>
-          <!-- Agents will be injected here -->
-        </div>
-        <div class="palette-section" id="palette-messages-section" style="display: none;">
-          <div class="palette-section-title">Recent Messages</div>
-          <!-- Filtered messages will be injected here -->
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- Thread Panel -->
-  <div class="thread-panel-overlay" id="thread-panel-overlay">
-    <div class="thread-panel">
-      <div class="thread-panel-header">
-        <div class="thread-panel-title">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
-          </svg>
-          <span>Thread</span>
-          <span class="thread-id" id="thread-panel-id"></span>
-        </div>
-        <button class="thread-panel-close" id="thread-panel-close" title="Close thread">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <line x1="18" y1="6" x2="6" y2="18"/>
-            <line x1="6" y1="6" x2="18" y2="18"/>
-          </svg>
-        </button>
-      </div>
-      <div class="thread-messages" id="thread-messages">
-        <!-- Thread messages will be injected here -->
-      </div>
-      <div class="thread-composer">
-        <textarea
-          id="thread-message-input"
-          class="thread-composer-input"
-          placeholder="Reply in thread..."
-          rows="1"
-        ></textarea>
-        <button class="thread-send-btn" id="thread-send-btn" title="Send reply">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <line x1="22" y1="2" x2="11" y2="13"/>
-            <polygon points="22 2 15 22 11 13 2 9 22 2"/>
-          </svg>
-        </button>
-      </div>
-    </div>
-  </div>
-  <!-- Spawn Agent Modal -->
-  <div class="spawn-modal-overlay" id="spawn-modal-overlay">
-    <div class="spawn-modal">
-      <div class="spawn-modal-header">
-        <div class="spawn-modal-title">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
-            <circle cx="12" cy="7" r="4"/>
-            <line x1="12" y1="11" x2="12" y2="17"/>
-            <line x1="9" y1="14" x2="15" y2="14"/>
-          </svg>
-          Spawn New Agent
-        </div>
-        <button class="spawn-modal-close" id="spawn-modal-close" title="Close">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <line x1="18" y1="6" x2="6" y2="18"/>
-            <line x1="6" y1="6" x2="18" y2="18"/>
-          </svg>
-        </button>
-      </div>
-      <div class="spawn-modal-body">
-        <div class="spawn-form-group">
-          <label for="spawn-name-input">Agent Name</label>
-          <input
-            type="text"
-            id="spawn-name-input"
-            class="spawn-input"
-            placeholder="e.g., Developer, Reviewer, Tester"
-            autocomplete="off"
-          />
-        </div>
-        <div class="spawn-form-group">
-          <label for="spawn-cli-input">CLI Command</label>
-          <input
-            type="text"
-            id="spawn-cli-input"
-            class="spawn-input"
-            value="claude"
-            placeholder="e.g., claude, aider, cursor"
-          />
-          <span class="spawn-hint">The AI CLI tool to wrap</span>
-        </div>
-        <div class="spawn-form-group">
-          <label for="spawn-task-input">Initial Task (optional)</label>
-          <textarea
-            id="spawn-task-input"
-            class="spawn-textarea"
-            placeholder="Enter an initial task to send to the agent..."
-            rows="4"
-          ></textarea>
-          <span class="spawn-hint">This will be injected into the agent's terminal</span>
-        </div>
-        <div class="spawn-status" id="spawn-status"></div>
-      </div>
-      <div class="spawn-modal-footer">
-        <button class="spawn-cancel-btn" id="spawn-cancel-btn">Cancel</button>
-        <button class="spawn-submit-btn" id="spawn-submit-btn">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <polygon points="5 3 19 12 5 21 5 3"/>
-          </svg>
-          Spawn Agent
-        </button>
-      </div>
-    </div>
-  </div>
-  <!-- Dashboard Application (TypeScript bundled) -->
-  <script type="module" src="/js/app.js"></script>
-</body>
-</html>