npm - agim-cli - Versions diffs - 1.2.2 → 1.2.18 - Mend

agim-cli 1.2.2 → 1.2.18

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 (190) hide show

package/dist/web/public/index.html CHANGED Viewed

@@ -1,936 +1,45 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Agim — Agent Chat</title>
-  <!-- Shared utilities: theme manager (applies before first paint), error
-       boundary (surfaces silent script failures), i18n + api helpers. -->
-  <script src="/_app.js"></script>
+  <meta charset="UTF-8" />
+  <!-- viewport-fit=cover so iOS safe-area-inset-* actually has values to
+       expose; initial-scale=1 + maximum-scale=1 keeps mobile chrome from
+       auto-zooming on focused inputs (we control text size ourselves). -->
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1" />
+  <meta name="theme-color" content="#f7f8fa" media="(prefers-color-scheme: light)" />
+  <meta name="theme-color" content="#0e0f12" media="(prefers-color-scheme: dark)" />
+  <meta name="description" content="agim — multi-agent gateway console" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <link rel="manifest" href="/manifest.webmanifest" />
+  <title>Agim</title>
+  <!--
+    Synchronous theme bootstrap. Reads localStorage 'agim-theme' BEFORE
+    the React bundle parses + renders, so the first paint already has
+    the right `data-theme` attribute on <html>. Without this, the page
+    flashes light-themed for ~80ms on dark-mode setups (the JS render
+    happens after first paint).
+    Mirrors the same key + state machine that agim-cli's old _app.js
+    used — keeps user preference continuous across the v1 → v2
+    upgrade.
+  -->
   <script>
-    // i18n — detect browser language, store preference in localStorage
-    const LANGS = { en: 'English', zh: '中文' };
-    const savedLang = localStorage.getItem('im-hub-lang');
-    const browserLang = navigator.language.startsWith('zh') ? 'zh' : 'en';
-    window.__lang = savedLang && LANGS[savedLang] ? savedLang : browserLang;
-    document.documentElement.lang = window.__lang === 'zh' ? 'zh-CN' : 'en';
-    const T = {
-      en: {
-        title: 'Agim — Agent Chat',
-        connecting: 'Connecting...',
-        connected: 'Connected',
-        disconnected: 'Disconnected',
-        connError: 'Connection error',
-        loadingAgents: 'Loading agents...',
-        newChat: 'New Chat',
-        welcomeTitle: 'Agim Agent Chat',
-        welcomeDesc: 'Select an agent and start chatting. Your locally installed AI coding agents are ready.',
-        inputPlaceholder: 'Type a message... (Enter to send, Shift+Enter for newline)',
-        send: 'Send',
-        you: 'You',
-        assistant: 'Assistant',
-        approvalTitle: 'Tool approval request',
-        approvalToolLabel: 'Tool',
-        approvalInputLabel: 'Input',
-        approvalAllow: 'Allow',
-        approvalDeny: 'Deny',
-        approvalAllowAll: 'Allow + auto for similar',
-        approvalAutoAllowing: 'Auto-allowing in {s}s — click Deny to reject',
-        approvalAllowed: '✅ Allowed',
-        approvalAllowedPinned: '✅ Allowed (auto-allow rule pinned)',
-        approvalDenied: '❌ Denied',
-        approvalDeniedRevoked: '❌ Denied (auto-allow rule revoked)',
-        approvalExpired: '⏱ Timed out (auto-denied)',
-      },
-      zh: {
-        title: 'Agim — Agent 对话',
-        connecting: '连接中...',
-        connected: '已连接',
-        disconnected: '已断开',
-        connError: '连接错误',
-        loadingAgents: '加载 Agent...',
-        newChat: '新对话',
-        welcomeTitle: 'Agim Agent 对话',
-        welcomeDesc: '选择一个 Agent 开始对话，本地安装的 AI 编程助手已就绪。',
-        inputPlaceholder: '输入消息...（Enter 发送，Shift+Enter 换行）',
-        send: '发送',
-        you: '你',
-        assistant: '助手',
-        approvalTitle: '工具调用审批',
-        approvalToolLabel: '工具',
-        approvalInputLabel: '入参',
-        approvalAllow: '批准',
-        approvalDeny: '拒绝',
-        approvalAllowAll: '批准并自动放行后续同类',
-        approvalAutoAllowing: '将在 {s}s 内自动放行 — 点击拒绝可阻止',
-        approvalAllowed: '✅ 已批准',
-        approvalAllowedPinned: '✅ 已批准（已启用自动放行）',
-        approvalDenied: '❌ 已拒绝',
-        approvalDeniedRevoked: '❌ 已拒绝（已撤销自动放行）',
-        approvalExpired: '⏱ 已超时（自动拒绝）',
-      },
-    };
-    function t(key) { return T[window.__lang][key] || T.en[key] || key; }
-    document.addEventListener('DOMContentLoaded', () => { document.title = t('title'); });
-  </script>
-  <style>
-    /* Three-state theming. `:root` defaults to light; explicit
-       data-theme="dark" forces dark; `prefers-color-scheme: dark` only
-       applies when the attribute is absent (mode === 'system'). */
-    :root {
-      color-scheme: light dark;
-      /* light defaults */
-      --bg: #f8f9fb;
-      --surface: #ffffff;
-      --surface2: #f1f3f6;
-      --border: #e1e4e8;
-      --text: #1a1f2e;
-      --text-dim: #6b7280;
-      --accent: #6366f1;
-      --accent-dim: #818cf8;
-      --user-bg: #eef2ff;
-      --assistant-bg: #ffffff;
-      --code-bg: #f1f5f9;
-      --green: #16a34a;
-      --red: #dc2626;
-      --yellow: #ca8a04;
-    }
-    :root[data-theme="dark"] {
-      --bg: #0a0a0a;
-      --surface: #141414;
-      --surface2: #1e1e1e;
-      --border: #2a2a2a;
-      --text: #e5e5e5;
-      --text-dim: #888;
-      --accent: #6366f1;
-      --accent-dim: #4f46e5;
-      --user-bg: #1a1a2e;
-      --assistant-bg: #1e1e1e;
-      --code-bg: #0d0d0d;
-      --green: #22c55e;
-      --red: #ef4444;
-      --yellow: #eab308;
-    }
-    @media (prefers-color-scheme: dark) {
-      :root:not([data-theme]) {
-        --bg: #0a0a0a;
-        --surface: #141414;
-        --surface2: #1e1e1e;
-        --border: #2a2a2a;
-        --text: #e5e5e5;
-        --text-dim: #888;
-        --accent-dim: #4f46e5;
-        --user-bg: #1a1a2e;
-        --assistant-bg: #1e1e1e;
-        --code-bg: #0d0d0d;
-        --green: #22c55e;
-        --red: #ef4444;
-        --yellow: #eab308;
-      }
-    }
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
-      background: var(--bg);
-      color: var(--text);
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
-    }
-    /* Header */
-    .header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 12px 20px;
-      border-bottom: 1px solid var(--border);
-      background: var(--surface);
-    }
-    .header-left {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-    }
-    .logo {
-      font-weight: 700;
-      font-size: 16px;
-      color: var(--accent);
-    }
-    .status-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: var(--yellow);
-      display: inline-block;
-    }
-    .status-dot.connected { background: var(--green); }
-    .status-dot.disconnected { background: var(--red); }
-    .status-text { font-size: 12px; color: var(--text-dim); }
-    .header-right { display: flex; align-items: center; gap: 10px; }
-    /* Agent selector */
-    .agent-select {
-      background: var(--surface2);
-      color: var(--text);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 6px 10px;
-      font-size: 13px;
-      cursor: pointer;
-      outline: none;
-    }
-    .agent-select:focus { border-color: var(--accent); }
-    .btn {
-      background: var(--surface2);
-      color: var(--text-dim);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 6px 10px;
-      font-size: 12px;
-      cursor: pointer;
-    }
-    .btn:hover { color: var(--text); border-color: var(--text-dim); }
-    /* Language selector */
-    .lang-select {
-      background: var(--surface2);
-      color: var(--text-dim);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 4px 6px;
-      font-size: 12px;
-      cursor: pointer;
-      outline: none;
-    }
-    .lang-select:hover { color: var(--text); }
-    /* Messages */
-    .messages {
-      flex: 1;
-      overflow-y: auto;
-      padding: 20px;
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-    }
-    .message {
-      max-width: 85%;
-      padding: 12px 16px;
-      border-radius: 12px;
-      font-size: 14px;
-      line-height: 1.6;
-      white-space: pre-wrap;
-      word-break: break-word;
-    }
-    .message.user {
-      align-self: flex-end;
-      background: var(--user-bg);
-      border-bottom-right-radius: 4px;
-    }
-    .message.assistant {
-      align-self: flex-start;
-      background: var(--assistant-bg);
-      border-bottom-left-radius: 4px;
-    }
-    .message.assistant code {
-      background: var(--code-bg);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
-      font-size: 13px;
-    }
-    .message.assistant pre {
-      background: var(--code-bg);
-      padding: 12px 16px;
-      border-radius: 8px;
-      overflow-x: auto;
-      margin: 8px 0;
-    }
-    .message.assistant pre code {
-      background: none;
-      padding: 0;
-    }
-    .message-label {
-      font-size: 11px;
-      color: var(--text-dim);
-      margin-bottom: 4px;
-      font-weight: 600;
-    }
-    /* Typing indicator */
-    .typing {
-      align-self: flex-start;
-      padding: 12px 16px;
-      color: var(--text-dim);
-      font-size: 13px;
-    }
-    .typing span {
-      animation: blink 1.4s infinite;
-    }
-    .typing span:nth-child(2) { animation-delay: 0.2s; }
-    .typing span:nth-child(3) { animation-delay: 0.4s; }
-    @keyframes blink {
-      0%, 60%, 100% { opacity: 0.2; }
-      30% { opacity: 1; }
-    }
-    /* Welcome screen */
-    .welcome {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 16px;
-      color: var(--text-dim);
-    }
-    .welcome h2 { color: var(--text); font-size: 20px; }
-    .welcome p { font-size: 14px; max-width: 400px; text-align: center; }
-    /* Input area */
-    .input-area {
-      padding: 16px 20px;
-      border-top: 1px solid var(--border);
-      background: var(--surface);
-    }
-    .input-wrapper {
-      display: flex;
-      gap: 8px;
-      align-items: flex-end;
-    }
-    .input-wrapper textarea {
-      flex: 1;
-      background: var(--surface2);
-      color: var(--text);
-      border: 1px solid var(--border);
-      border-radius: 10px;
-      padding: 10px 14px;
-      font-size: 14px;
-      font-family: inherit;
-      resize: none;
-      outline: none;
-      max-height: 150px;
-      min-height: 42px;
-    }
-    .input-wrapper textarea:focus { border-color: var(--accent); }
-    .input-wrapper textarea::placeholder { color: var(--text-dim); }
-    .send-btn {
-      background: var(--accent);
-      color: white;
-      border: none;
-      border-radius: 10px;
-      padding: 10px 16px;
-      font-size: 14px;
-      cursor: pointer;
-      white-space: nowrap;
-    }
-    .send-btn:hover { background: var(--accent-dim); }
-    .send-btn:disabled {
-      background: var(--surface2);
-      color: var(--text-dim);
-      cursor: not-allowed;
-    }
-    /* Scrollbar */
-    .messages::-webkit-scrollbar { width: 6px; }
-    .messages::-webkit-scrollbar-track { background: transparent; }
-    .messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-    /* In-chat HITL approval card. Mirrors the IM card's structure (Telegram
-       inline-keyboard variant) so the cross-platform UX is consistent. */
-    .approval-card {
-      border: 1px solid var(--accent);
-      background: var(--surface);
-      border-radius: 10px;
-      padding: 14px 16px;
-      margin: 8px 0;
-      max-width: 720px;
-      box-shadow: 0 1px 3px rgba(0,0,0,.06);
-    }
-    .approval-card.auto-allow { border-color: var(--yellow); }
-    .approval-card.resolved { opacity: .85; }
-    .approval-card .ac-title {
-      font-weight: 600;
-      font-size: 14px;
-      margin-bottom: 8px;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-    .approval-card .ac-row { font-size: 13px; margin: 4px 0; color: var(--text-dim); }
-    .approval-card .ac-row b { color: var(--text); margin-right: 6px; }
-    .approval-card .ac-input {
-      background: var(--code-bg);
-      border-radius: 6px;
-      padding: 8px 10px;
-      font: 12px/1.5 'SF Mono', Menlo, Consolas, monospace;
-      white-space: pre-wrap;
-      word-break: break-word;
-      max-height: 180px;
-      overflow: auto;
-      margin: 6px 0 10px;
-      color: var(--text);
-    }
-    .approval-card .ac-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
-    .approval-card .ac-btn {
-      border: 1px solid var(--border);
-      background: var(--surface2);
-      color: var(--text);
-      padding: 6px 14px;
-      border-radius: 6px;
-      cursor: pointer;
-      font-size: 13px;
-    }
-    .approval-card .ac-btn:hover { border-color: var(--accent); }
-    .approval-card .ac-btn.allow { background: var(--green); border-color: var(--green); color: #fff; }
-    .approval-card .ac-btn.deny  { background: var(--red);   border-color: var(--red);   color: #fff; }
-    .approval-card .ac-btn:disabled { opacity: .5; cursor: not-allowed; }
-    .approval-card .ac-grace {
-      color: var(--yellow);
-      font-size: 13px;
-      margin-bottom: 8px;
-      font-weight: 500;
-    }
-    .approval-card .ac-outcome {
-      font-size: 13px;
-      margin-top: 8px;
-      padding-top: 8px;
-      border-top: 1px solid var(--border);
-      color: var(--text-dim);
-    }
-  </style>
-</head>
-<body>
-  <div class="header">
-    <div class="header-left">
-      <span class="logo">Agim</span>
-      <span class="status-dot" id="statusDot"></span>
-      <span class="status-text" id="statusText"></span>
-    </div>
-    <div class="header-right">
-      <select class="lang-select" id="langSelect">
-        <option value="en">EN</option>
-        <option value="zh">中文</option>
-      </select>
-      <select class="agent-select" id="agentSelect" disabled>
-        <option value=""></option>
-      </select>
-      <button type="button" class="btn" id="newChatBtn"></button>
-      <button class="btn" id="theme-toggle" type="button" aria-label="Toggle color theme"></button>
-      <a class="btn" href="/tasks" title="Tasks" style="text-decoration:none;font-size:16px;line-height:1">&#9776;</a>
-      <a class="btn" href="/reminders" title="Reminders" style="text-decoration:none;font-size:14px;line-height:1">🔔</a>
-      <a class="btn" href="/memos" title="Memos" style="text-decoration:none;font-size:14px;line-height:1">📋</a>
-      <a class="btn" href="/settings" title="Settings" style="text-decoration:none;font-size:16px;line-height:1">&#9881;</a>
-    </div>
-  </div>
-  <div class="messages" id="messages">
-    <div class="welcome" id="welcome">
-      <h2 id="welcomeTitle"></h2>
-      <p id="welcomeDesc"></p>
-    </div>
-  </div>
-  <div class="input-area">
-    <div class="input-wrapper">
-      <textarea
-        id="input"
-        rows="1"
-        disabled
-      ></textarea>
-      <button type="button" class="send-btn" id="sendBtn" disabled></button>
-    </div>
-  </div>
-  <script>
-    // Apply i18n to static elements
-    function applyLang() {
-      document.title = t('title');
-      document.documentElement.lang = window.__lang === 'zh' ? 'zh-CN' : 'en';
-      statusText.textContent = statusText.dataset.state ? t(statusText.dataset.state) : t('connecting');
-      const opt = agentSelect.querySelector('option[value=""]');
-      if (opt) opt.textContent = t('loadingAgents');
-      newChatBtn.textContent = t('newChat');
-      inputEl.placeholder = t('inputPlaceholder');
-      sendBtn.textContent = t('send');
-      const wt = document.getElementById('welcomeTitle');
-      const wd = document.getElementById('welcomeDesc');
-      if (wt) wt.textContent = t('welcomeTitle');
-      if (wd) wd.textContent = t('welcomeDesc');
-    }
-    // State
-    let ws = null;
-    let currentAgent = '';
-    let isStreaming = false;
-    let streamingEl = null;
-    let streamingText = '';
-    let _reconnectTimer = null;
-    // DOM
-    const messagesEl = document.getElementById('messages');
-    const welcomeEl = document.getElementById('welcome');
-    const inputEl = document.getElementById('input');
-    const sendBtn = document.getElementById('sendBtn');
-    const agentSelect = document.getElementById('agentSelect');
-    const statusDot = document.getElementById('statusDot');
-    const statusText = document.getElementById('statusText');
-    const newChatBtn = document.getElementById('newChatBtn');
-    const langSelect = document.getElementById('langSelect');
-    // Theme toggle (light / dark / system). _app.js applied the theme
-    // synchronously in <head>; here we wire the button so clicks cycle
-    // through the three modes and the icon/label re-renders.
-    if (window.imhub) imhub.theme.bindToggle(document.getElementById('theme-toggle'));
-    // Language selector
-    langSelect.value = window.__lang;
-    langSelect.addEventListener('change', () => {
-      window.__lang = langSelect.value;
-      localStorage.setItem('im-hub-lang', window.__lang);
-      applyLang();
-    });
-    // Connect
-    function connect() {
-      const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
-      ws = new WebSocket(`${protocol}//${location.host}/`);
-      ws.onopen = () => {
-        setStatus('connected', t('connected'));
-        inputEl.disabled = false;
-        sendBtn.disabled = false;
-      };
-      ws.onmessage = (e) => {
-        const msg = JSON.parse(e.data);
-        handleMessage(msg);
-      };
-      ws.onclose = () => {
-        setStatus('disconnected', t('disconnected'));
-        inputEl.disabled = true;
-        sendBtn.disabled = true;
-        _reconnectTimer = setTimeout(connect, 3000);
-      };
-      ws.onerror = () => {
-        setStatus('disconnected', t('connError'));
-      };
-    }
-    // Handle server messages
-    function handleMessage(msg) {
-      switch (msg.type) {
-        case 'init':
-          agentSelect.innerHTML = '';
-          msg.agents.forEach(name => {
-            const opt = document.createElement('option');
-            opt.value = name;
-            opt.textContent = name;
-            if (name === msg.defaultAgent) opt.selected = true;
-            agentSelect.appendChild(opt);
-          });
-          agentSelect.disabled = false;
-          currentAgent = msg.defaultAgent;
-          break;
-        case 'history':
-          hideWelcome();
-          if (msg.agent) {
-            currentAgent = msg.agent;
-            agentSelect.value = msg.agent;
-          }
-          msg.messages.forEach(m => {
-            addMessage(m.role, m.content, false);
-          });
-          scrollToBottom();
-          break;
-        case 'agents':
-          agentSelect.innerHTML = '';
-          msg.agents.forEach(name => {
-            const opt = document.createElement('option');
-            opt.value = name;
-            opt.textContent = name;
-            if (name === currentAgent) opt.selected = true;
-            agentSelect.appendChild(opt);
-          });
-          agentSelect.disabled = false;
-          break;
-        case 'chunk':
-          if (!isStreaming) {
-            hideWelcome();
-            startStreaming();
-          }
-          streamingText += msg.text;
-          updateStreamingEl();
-          scrollToBottom();
-          break;
-        case 'done':
-          if (isStreaming) {
-            finishStreaming();
-          } else if (msg.text) {
-            hideWelcome();
-            addMessage('assistant', msg.text);
-            scrollToBottom();
-          }
-          break;
-        case 'error':
-          if (isStreaming) finishStreaming();
-          addMessage('assistant', `\u274c ${msg.message}`);
-          scrollToBottom();
-          break;
-        case 'agent-switched':
-          currentAgent = msg.agent;
-          agentSelect.value = msg.agent;
-          break;
-        // HITL approval messages relayed by the synthetic 'web' messenger
-        // (registered on the server in startWebServer). approval-router
-        // calls our messenger.sendApprovalCard / sendMessage / editApprovalCard
-        // — those become the three WS message types below.
-        case 'approval-text':
-          // Fallback / receipt path. Render as a system message.
-          hideWelcome();
-          addSystemMessage(msg.text);
-          scrollToBottom();
-          break;
-        case 'approval-card':
-          hideWelcome();
-          renderApprovalCard(msg.messageId, msg.prompt);
-          scrollToBottom();
-          break;
-        case 'approval-card-edit':
-          editApprovalCard(msg.messageId, msg.outcome);
-          break;
-      }
-    }
-    // Send message
-    function sendMessage() {
-      const text = inputEl.value.trim();
-      if (!text || !ws || ws.readyState !== ws.OPEN) return;
-      hideWelcome();
-      addMessage('user', text);
-      ws.send(JSON.stringify({
-        type: 'message',
-        text,
-        agent: currentAgent,
-      }));
-      inputEl.value = '';
-      autoResize();
-    }
-    // Streaming helpers
-    function startStreaming() {
-      isStreaming = true;
-      streamingText = '';
-      const wrapper = document.createElement('div');
-      wrapper.innerHTML = `<div class="message-label">${t('assistant')}</div>`;
-      streamingEl = document.createElement('div');
-      streamingEl.className = 'message assistant';
-      wrapper.appendChild(streamingEl);
-      messagesEl.appendChild(wrapper);
-    }
-    function updateStreamingEl() {
-      if (!streamingEl) return;
-      streamingEl.textContent = streamingText;
-    }
-    function finishStreaming() {
-      isStreaming = false;
-      if (streamingEl) {
-        streamingEl.innerHTML = renderMarkdown(streamingText);
-      }
-      streamingEl = null;
-      saveHistory();
-    }
-    // Message helpers
-    /**
-     * System / receipt-style message bubble. Used for `approval-text` so the
-     * "✅ Allowed" / "⏱ Timed out" notices the bus emits show up in the
-     * conversation flow without a "user / assistant" label.
-     */
-    function addSystemMessage(text) {
-      hideWelcome();
-      const wrapper = document.createElement('div');
-      wrapper.style.cssText = 'margin:6px 0; color:var(--text-dim); font-size:13px;';
-      wrapper.textContent = text;
-      messagesEl.appendChild(wrapper);
-    }
-    /** Active approval cards keyed by server-issued messageId, so the
-     *  `approval-card-edit` handler can find the same DOM node and
-     *  collapse it to an outcome stamp. */
-    const approvalCards = new Map();
-    function renderApprovalCard(messageId, prompt) {
-      const isAuto = prompt.mode === 'auto-allow';
-      const card = document.createElement('div');
-      card.className = `approval-card${isAuto ? ' auto-allow' : ''}`;
-      card.dataset.cardId = messageId;
-      card.innerHTML = `
-        <div class="ac-title">🔐 <span data-slot="title"></span></div>
-        ${isAuto ? `<div class="ac-grace" data-slot="grace"></div>` : ''}
-        <div class="ac-row"><b data-slot="tool-label"></b><code data-slot="tool"></code></div>
-        <div class="ac-row"><b data-slot="input-label"></b></div>
-        <pre class="ac-input" data-slot="input"></pre>
-        <div class="ac-actions" data-slot="actions"></div>
-      `;
-      card.querySelector('[data-slot="title"]').textContent = t('approvalTitle');
-      card.querySelector('[data-slot="tool-label"]').textContent = `${t('approvalToolLabel')}:`;
-      card.querySelector('[data-slot="tool"]').textContent = prompt.toolName;
-      card.querySelector('[data-slot="input-label"]').textContent = `${t('approvalInputLabel')}:`;
-      card.querySelector('[data-slot="input"]').textContent = prompt.inputJson;
-      const send = (choice) => {
-        // Soft disable: dim and ignore further clicks for 800 ms while the
-        // server round-trips. We deliberately do NOT hard-disable — if the
-        // server returns an error (e.g. 'approval handler not bound'), the
-        // card stays usable so the user can retry once they fix it. The
-        // success path replaces the buttons via `approval-card-edit` anyway.
-        card.querySelectorAll('button').forEach((b) => {
-          b.style.opacity = '0.6';
-          b.style.pointerEvents = 'none';
-        });
-        setTimeout(() => {
-          card.querySelectorAll('button').forEach((b) => {
-            b.style.opacity = '';
-            b.style.pointerEvents = '';
-          });
-        }, 800);
-        const payload = { type: 'approval-action', messageId, data: `apv:${prompt.reqId}:${choice}` };
-        try { console.debug?.('[approval] click', payload); } catch {}
-        if (ws.readyState !== WebSocket.OPEN) {
-          imhub?.showError?.('WebSocket not connected — click ignored');
-          return;
-        }
-        ws.send(JSON.stringify(payload));
-      };
-      const actions = card.querySelector('[data-slot="actions"]');
-      if (isAuto) {
-        // Auto-allow grace mode: only Deny is meaningful (Allow happens
-        // automatically on grace expiry).
-        const denyBtn = document.createElement('button');
-        denyBtn.className = 'ac-btn deny';
-        denyBtn.textContent = t('approvalDeny');
-        denyBtn.onclick = () => send('n');
-        actions.appendChild(denyBtn);
-        // Live countdown.
-        let s = Number(prompt.graceSeconds) || 5;
-        const grace = card.querySelector('[data-slot="grace"]');
-        const refreshGrace = () => { grace.textContent = t('approvalAutoAllowing').replace('{s}', String(s)); };
-        refreshGrace();
-        const tick = setInterval(() => {
-          s = Math.max(0, s - 1);
-          refreshGrace();
-          if (s <= 0) clearInterval(tick);
-        }, 1000);
-        card._graceTimer = tick;
-      } else {
-        const allowBtn = document.createElement('button');
-        allowBtn.className = 'ac-btn allow';
-        allowBtn.textContent = t('approvalAllow');
-        allowBtn.onclick = () => send('y');
-        const denyBtn = document.createElement('button');
-        denyBtn.className = 'ac-btn deny';
-        denyBtn.textContent = t('approvalDeny');
-        denyBtn.onclick = () => send('n');
-        const allowAllBtn = document.createElement('button');
-        allowAllBtn.className = 'ac-btn';
-        allowAllBtn.textContent = t('approvalAllowAll');
-        allowAllBtn.onclick = () => send('a');
-        actions.appendChild(allowBtn);
-        actions.appendChild(denyBtn);
-        actions.appendChild(allowAllBtn);
-      }
-      messagesEl.appendChild(card);
-      approvalCards.set(messageId, card);
-    }
-    function editApprovalCard(messageId, outcome) {
-      const card = approvalCards.get(messageId);
-      if (!card) return;
-      card.classList.add('resolved');
-      // Stop any countdown if this was an auto-allow card.
-      if (card._graceTimer) { clearInterval(card._graceTimer); card._graceTimer = null; }
-      const grace = card.querySelector('[data-slot="grace"]');
-      if (grace) grace.remove();
-      // Disable any remaining live buttons.
-      card.querySelectorAll('.ac-actions button').forEach(b => { b.disabled = true; });
-      const actions = card.querySelector('[data-slot="actions"]');
-      if (actions) actions.remove();
-      const stamp = document.createElement('div');
-      stamp.className = 'ac-outcome';
-      const KEY = {
-        allowed: 'approvalAllowed',
-        'allowed-pinned': 'approvalAllowedPinned',
-        denied: 'approvalDenied',
-        'denied-revoked': 'approvalDeniedRevoked',
-        expired: 'approvalExpired',
-      };
-      const text = t(KEY[outcome.decision] || 'approvalAllowed');
-      const by = outcome.byUserDisplay ? ` · ${outcome.byUserDisplay}` : '';
-      stamp.textContent = `${text}${by}`;
-      card.appendChild(stamp);
-      // Keep the card around for visual continuity, but free the map slot
-      // so a same-id replay doesn't double-edit it.
-      approvalCards.delete(messageId);
-    }
-    function addMessage(role, content, save = true) {
-      hideWelcome();
-      const wrapper = document.createElement('div');
-      const label = document.createElement('div');
-      label.className = 'message-label';
-      label.textContent = role === 'user' ? t('you') : t('assistant');
-      const el = document.createElement('div');
-      el.className = `message ${role}`;
-      if (role === 'assistant') {
-        el.innerHTML = renderMarkdown(content);
-      } else {
-        el.textContent = content;
-      }
-      wrapper.appendChild(label);
-      wrapper.appendChild(el);
-      messagesEl.appendChild(wrapper);
-      if (save) saveHistory();
-    }
-    // Basic markdown rendering
-    function renderMarkdown(text) {
-      if (!text) return '';
-      let html = escapeHtml(text);
-      html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (_, _lang, code) => {
-        return `<pre><code>${code.trim()}</code></pre>`;
-      });
-      html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
-      html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
-      html = html.replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, '<em>$1</em>');
-      return html;
-    }
-    function escapeHtml(text) {
-      return text
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
-    }
-    function hideWelcome() {
-      if (welcomeEl) welcomeEl.remove();
-    }
-    function scrollToBottom() {
-      requestAnimationFrame(() => {
-        messagesEl.scrollTop = messagesEl.scrollHeight;
-      });
-    }
-    // Status
-    function setStatus(state, text) {
-      statusDot.className = `status-dot ${state}`;
-      statusText.textContent = text;
-      statusText.dataset.state = state === 'connected' ? 'connected' : state === 'disconnected' ? 'disconnected' : 'connecting';
-    }
-    // LocalStorage persistence
-    function saveHistory() {
-      const msgs = [];
-      messagesEl.querySelectorAll('.message').forEach(el => {
-        const role = el.classList.contains('user') ? 'user' : 'assistant';
-        msgs.push({ role, content: el.textContent });
-      });
+    (function () {
       try {
-        localStorage.setItem('im-hub-history', JSON.stringify(msgs));
-      } catch {}
-    }
-    function loadHistory() {
-      try {
-        const saved = localStorage.getItem('im-hub-history');
-        if (saved) {
-          const msgs = JSON.parse(saved);
-          if (msgs.length > 0) {
-            hideWelcome();
-            msgs.forEach(m => { addMessage(m.role, m.content, false); });
-            scrollToBottom();
-          }
+        var m = localStorage.getItem('agim-theme')
+        if (m === 'light' || m === 'dark') {
+          document.documentElement.setAttribute('data-theme', m)
         }
-      } catch {}
-    }
-    // Auto-resize textarea
-    function autoResize() {
-      inputEl.style.height = 'auto';
-      inputEl.style.height = `${Math.min(inputEl.scrollHeight, 150)}px`;
-    }
-    // Event listeners
-    inputEl.addEventListener('input', autoResize);
-    inputEl.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
-        e.preventDefault();
-        sendMessage();
-      }
-    });
-    sendBtn.addEventListener('click', sendMessage);
-    agentSelect.addEventListener('change', () => {
-      const agent = agentSelect.value;
-      if (agent && agent !== currentAgent && ws?.readyState === WebSocket.OPEN) {
-        currentAgent = agent;
-        ws.send(JSON.stringify({ type: 'switch-agent', agent }));
-      }
-    });
-    newChatBtn.addEventListener('click', () => {
-      messagesEl.innerHTML = '';
-      localStorage.removeItem('im-hub-history');
-      if (ws?.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify({ type: 'message', text: '/new' }));
-      }
-    });
-    // Init
-    applyLang();
-    loadHistory();
-    connect();
+      } catch (e) { /* private-mode storage exceptions: noop */ }
+    })()
   </script>
+  <script type="module" crossorigin src="/assets/index-CpGWCLE5.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/react-C9F3QeMB.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-GpceOxum.css">
+</head>
+<body>
+  <div id="root"></div>
 </body>
 </html>