agentgui 1.0.812 → 1.0.814

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 ## [Unreleased]
 
+### Changed
+- Remove GMGUIApp dead code from app.js; strip 900+ lines, keep 5 live IIFEs
+- Add app.js and app-shortcuts.js to index.html script loading (previously unreferenced)
+- Remove unused BASE_URL declaration from app-shortcuts.js
+- Extend window.__debug.getSyncState() with promptMachineState, toolInstallMachineStates, voiceMachineState, convListMachineState
+
+
 ### Fixed
 - Thinking blocks now use theme-aware CSS vars for light/dark backgrounds (`--color-thinking-bg`)
 - All code blocks (renderBlockCode, renderCodeWithHighlight, renderFileRead, renderCommand) now use CSS vars instead of hardcoded dark hex colors

package/CLAUDE.md

@@ -404,6 +404,16 @@ OpenAI Codex CLI uses PKCE authorization code flow against `https://auth.openai.
 - **@agentclientprotocol/sdk** (`^0.4.1`) added to dependencies
 - Full integration (replacing custom WS protocol) is optional/incremental — current WS already gives logical multiplexing via concurrent async handlers
 
+## Theme-Aware Rendering
+
+CSS custom properties for code/thinking blocks live in `static/css/main.css`:
+- `--color-bg-code`, `--color-code-text`, `--color-code-border` — light values in `:root`, dark overrides in `html.dark`
+- `--color-thinking-bg` — light value in `:root` (`#f5f3ff`), dark override in `html.dark` (`.block-thinking`) set to `#1e1a2e`
+
+`static/js/streaming-renderer.js` uses `var(--color-bg-code)` etc. in inline styles — no hardcoded `#1e293b`/`#e2e8f0`/`#d1d5db` hex values. Remaining hardcoded hex in the renderer are **intentional semantic colors** (blue links, amber warnings, red errors, purple thinking accents) and must not be replaced with CSS vars.
+
+`parseAndRenderMarkdown()` in `streaming-renderer.js` handles: `##`/`###` headers, `-`/`*` ul lists, `1.` ol lists, `>` blockquotes, `---` hr, inline bold/italic/code/links via `_mdInline()`. Thinking block content is rendered through this function.
+
 ## Known Gotchas
 
 - **`agent-browser --version`** prints help, not version. Use `-V` flag.
@@ -415,3 +425,5 @@ OpenAI Codex CLI uses PKCE authorization code flow against `https://auth.openai.
 - **Thinking blocks** are transient (not in DB), rendered only via `handleStreamingProgress()` in client.js. The `renderEvent` switch case for `thinking_block` is disabled to prevent double-render.
 - **Terminal output** is base64-encoded (`encoding: 'base64'` field on message). Client decodes with `decodeURIComponent(escape(atob(data)))` pattern for multibyte safety.
 - **HTML cache** (`_htmlCache`) is only populated when client accepts gzip. In watch mode it's never cached (always fresh).
+- **`app.js` and `app-shortcuts.js` script loading:** Both are `<script defer>` tags loaded AFTER `agent-auth.js` in index.html. They depend on `window.wsClient`, `window.conversationManager`, and `window._escHtml` being initialized first. Defer order is guaranteed by source order — adding new defer scripts that depend on these modules requires careful ordering.
+- **`window.__debug.getSyncState()`:** Debug API in client.js exposes internal state machine snapshots: `convMachineStates`, `toolInstallMachineStates`, `voiceMachineState`, `convListMachineState`, `promptMachineState`, `wsConnectionState`, `rendererEventQueueLength`, `rendererEventHistoryLength`. All XState v5 machines have no parallel ad-hoc state — this API is the only way to inspect full machine state at once.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.812",
+  "version": "1.0.814",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "electron/main.js",

package/static/app.js

@@ -1,785 +1,5 @@
-const BASE_URL = window.__BASE_URL || '';
-
-class ReconnectingWebSocket {
-  constructor(url, options = {}) {
-    this.url = url;
-    this.reconnectDelay = options.reconnectDelay || 1000;
-    this.maxReconnectDelay = options.maxReconnectDelay || 30000;
-    this.reconnectDecay = options.reconnectDecay || 1.5;
-    this.currentDelay = this.reconnectDelay;
-    this.ws = null;
-    this.listeners = new Map();
-    this.reconnectAttempts = 0;
-    this.maxReconnectAttempts = options.maxReconnectAttempts || Infinity;
-    this.shouldReconnect = true;
-    this.connect();
-  }
-
-  connect() {
-    this.ws = new WebSocket(this.url);
-
-    this.ws.onopen = (e) => {
-      this.currentDelay = this.reconnectDelay;
-      this.reconnectAttempts = 0;
-      this.emit('open', e);
-    };
-
-    this.ws.onmessage = (e) => {
-      this.emit('message', e);
-    };
-
-    this.ws.onerror = (e) => {
-      this.emit('error', e);
-    };
-
-    this.ws.onclose = (e) => {
-      this.emit('close', e);
-      if (this.shouldReconnect && this.reconnectAttempts < this.maxReconnectAttempts) {
-        setTimeout(() => {
-          this.reconnectAttempts++;
-          this.currentDelay = Math.min(
-            this.currentDelay * this.reconnectDecay,
-            this.maxReconnectDelay
-          );
-          console.log(`Attempting to reconnect (${this.reconnectAttempts})...`);
-          this.connect();
-        }, this.currentDelay);
-      }
-    };
-  }
-
-  on(event, callback) {
-    if (!this.listeners.has(event)) {
-      this.listeners.set(event, []);
-    }
-    this.listeners.get(event).push(callback);
-  }
-
-  emit(event, data) {
-    const callbacks = this.listeners.get(event);
-    if (callbacks) {
-      callbacks.forEach(cb => cb(data));
-    }
-  }
-
-  send(data) {
-    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-      this.ws.send(data);
-    }
-  }
-
-  close() {
-    this.shouldReconnect = false;
-    if (this.ws) {
-      this.ws.close();
-    }
-  }
-}
-
-class GMGUIApp {
-  constructor() {
-    this.conversations = new Map();
-    this.currentConversation = null;
-    this.agents = new Map();
-    this.selectedAgent = null;
-    this.ws = null;
-  }
-
-  async init() {
-    console.log('[APP] Initializing');
-
-    this.setupEventListeners();
-    await this.fetchAgents();
-
-    const savedAgent = localStorage.getItem('gmgui-selectedAgent');
-    if (savedAgent && this.agents.has(savedAgent)) {
-      this.selectedAgent = savedAgent;
-    } else if (this.agents.size > 0) {
-      this.selectedAgent = Array.from(this.agents.keys())[0];
-      localStorage.setItem('gmgui-selectedAgent', this.selectedAgent);
-    }
-
-    await this.fetchConversations();
-    this.connectWebSocket();
-    this.renderAll();
-    console.log('[APP] Ready');
-  }
-
-  async fetchAgents() {
-    try {
-      const data = await window.wsClient.rpc('agent.ls');
-      for (const agent of data.agents || []) {
-        this.agents.set(agent.id, agent);
-      }
-    } catch (e) {
-      console.error('[APP] Error fetching agents:', e);
-    }
-  }
-
-  async fetchConversations() {
-    try {
-      const data = await window.wsClient.rpc('conv.ls');
-      this.conversations.clear();
-      for (const conv of data.conversations || []) {
-        this.conversations.set(conv.id, conv);
-      }
-      console.log('[APP] Loaded', this.conversations.size, 'conversations');
-    } catch (e) {
-      console.error('[APP] Error fetching conversations:', e);
-    }
-  }
-
-  async fetchMessages(conversationId) {
-    try {
-      const data = await window.wsClient.rpc('msg.ls', { id: conversationId });
-      return data.messages || [];
-    } catch (e) {
-      console.error('[APP] Error fetching messages:', e);
-      return [];
-    }
-  }
-
-  connectWebSocket() {
-    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
-    this.ws = new ReconnectingWebSocket(`${proto}//${location.host}${BASE_URL}/sync`);
-
-    this.ws.on('open', () => {
-      console.log('[WS] Connected');
-      document.getElementById('connectionStatus').textContent = 'Connected';
-    });
-
-    this.ws.on('message', (e) => {
-      try {
-        const event = JSON.parse(e.data);
-        this.handleEvent(event);
-      } catch (err) {
-        console.error('[WS] Parse error:', err);
-      }
-    });
-
-    this.ws.on('close', () => {
-      console.log('[WS] Disconnected, reconnecting...');
-      document.getElementById('connectionStatus').textContent = 'Reconnecting...';
-    });
-
-    this.ws.on('error', (err) => {
-      console.error('[WS] Error:', err);
-      document.getElementById('connectionStatus').textContent = 'Error';
-    });
-  }
-
-  handleEvent(event) {
-    if (event.type === 'message_created') {
-      this.handleMessageReceived(event.message);
-    } else if (event.type === 'conversations_updated') {
-      this.fetchConversations().then(() => this.renderChatHistory());
-    }
-  }
-
-  addMessageToDisplay(message) {
-    if (this.currentConversation && message.conversationId === this.currentConversation) {
-      const chatDiv = document.getElementById('chatMessages');
-      if (!chatDiv) return;
-
-      const msgEl = document.createElement('div');
-      msgEl.className = `message ${message.role}`;
-
-      // Try to parse content as JSON for structured display
-      let contentHtml = '';
-      try {
-        const parsed = typeof message.content === 'string' ? JSON.parse(message.content) : message.content;
-        if (parsed && parsed.type === 'claude_execution' && parsed.blocks) {
-          // Render each block with appropriate formatting
-          contentHtml = '<div class="execution-blocks">';
-          for (const block of parsed.blocks) {
-            contentHtml += this.renderMessageBlock(block);
-          }
-          contentHtml += '</div>';
-        } else {
-          throw new Error('Not a claude_execution message');
-        }
-      } catch (e) {
-        // Fallback: try to parse and beautify, or render as plain text
-        try {
-          const parsed = typeof message.content === 'string' ? JSON.parse(message.content) : message.content;
-          contentHtml = `<div class="message-content">${this.renderParameters(parsed)}</div>`;
-        } catch (parseErr) {
-          const text = typeof message.content === 'string' ? message.content : JSON.stringify(message.content);
-          contentHtml = `<div class="message-content"><pre>${this.escapeHtml(text)}</pre></div>`;
-        }
-      }
-
-      msgEl.innerHTML = contentHtml;
-      chatDiv.appendChild(msgEl);
-      chatDiv.scrollTop = chatDiv.scrollHeight;
-    }
-  }
-
-  renderMessageBlock(block) {
-    if (!block) return '';
-
-    let html = '<div class="message-block">';
-
-    switch (block.type) {
-      case 'text': {
-        const text = block.text || '';
-        const beautified = this.markdownToHtml(text);
-        html += `<div class="block-text">${beautified}</div>`;
-        break;
-      }
-
-      case 'tool_use': {
-        html += `<div class="block-tool-use">`;
-        html += `<strong class="tool-name">${this.escapeHtml(block.name || 'Tool')}</strong>`;
-        const paramHtml = this.renderParameters(block.input || {});
-        html += `<div class="tool-input">${paramHtml}</div>`;
-        html += `</div>`;
-        break;
-      }
-
-      case 'tool_result': {
-        html += `<div class="block-tool-result">`;
-        html += `<strong>Result:</strong>`;
-        let resultHtml;
-        if (typeof block.result === 'string') {
-          try {
-            const parsed = JSON.parse(block.result);
-            resultHtml = this.renderParameters(parsed);
-          } catch (e) {
-            resultHtml = `<pre>${this.escapeHtml(block.result)}</pre>`;
-          }
-        } else {
-          resultHtml = this.renderParameters(block.result);
-        }
-        html += `<div class="tool-result">${resultHtml}</div>`;
-        html += `</div>`;
-        break;
-      }
-
-      case 'file_operation':
-        html += `<div class="block-file-op">`;
-        html += `<strong class="file-action">${this.escapeHtml(block.action || 'File Operation')}</strong>`;
-        html += `<div class="file-path">${this.escapeHtml(block.path || '')}</div>`;
-        if (block.content) {
-          html += `<div class="file-content"><pre>${this.escapeHtml(block.content.substring(0, 500))}</pre></div>`;
-        }
-        html += `</div>`;
-        break;
-
-      default:
-        html += `<div class="block-unknown">${this.escapeHtml(JSON.stringify(block, null, 2))}</div>`;
-    }
-
-    html += '</div>';
-    return html;
-  }
-
-  handleMessageReceived(message) {
-    if (message.role === 'user') {
-      document.getElementById('messageInput').value = '';
-      document.getElementById('messageInput').focus();
-    }
-  }
-
-  async sendMessage() {
-    const input = document.getElementById('messageInput');
-    const content = input.value.trim();
-
-    if (!content || !this.currentConversation || !this.selectedAgent) return;
-
-    try {
-      await window.wsClient.rpc('msg.send', { id: this.currentConversation, content, agentId: this.selectedAgent });
-      input.value = '';
-    } catch (e) {
-      console.error('[APP] Error sending message:', e);
-    }
-  }
-
-  async createConversation(title = 'New Conversation') {
-    if (!this.selectedAgent) {
-      console.error('[APP] No agent selected');
-      return;
-    }
-
-    try {
-      const data = await window.wsClient.rpc('conv.new', { title, agentId: this.selectedAgent });
-      await this.fetchConversations();
-      this.renderChatHistory();
-      if (data.conversation) {
-        this.selectConversation(data.conversation.id);
-      }
-    } catch (e) {
-      console.error('[APP] Error creating conversation:', e);
-    }
-  }
-
-  selectConversation(convId) {
-    this.currentConversation = convId;
-    document.querySelectorAll('.chat-item').forEach(el => el.classList.remove('active'));
-    const el = document.querySelector(`[data-conv-id="${convId}"]`);
-    if (el) el.classList.add('active');
-    this.renderChatMessages();
-  }
-
-  async renderChatMessages() {
-    const chatDiv = document.getElementById('chatMessages');
-    if (!chatDiv || !this.currentConversation) return;
-
-    chatDiv.innerHTML = '';
-    const messages = await this.fetchMessages(this.currentConversation);
-    for (const msg of messages) {
-      const msgEl = document.createElement('div');
-      msgEl.className = `message ${msg.role}`;
-
-      // Try to parse content as JSON for structured display
-      let contentHtml = '';
-      try {
-        const parsed = typeof msg.content === 'string' ? JSON.parse(msg.content) : msg.content;
-        if (parsed && parsed.type === 'claude_execution' && parsed.blocks) {
-          // Render each block with appropriate formatting
-          contentHtml = '<div class="execution-blocks">';
-          for (const block of parsed.blocks) {
-            contentHtml += this.renderMessageBlock(block);
-          }
-          contentHtml += '</div>';
-        } else {
-          throw new Error('Not a claude_execution message');
-        }
-      } catch (e) {
-        // Fallback: try to parse and beautify, or render as plain text
-        try {
-          const parsed = typeof msg.content === 'string' ? JSON.parse(msg.content) : msg.content;
-          contentHtml = `<div class="message-content">${this.renderParameters(parsed)}</div>`;
-        } catch (parseErr) {
-          const text = typeof msg.content === 'string' ? msg.content : JSON.stringify(msg.content);
-          contentHtml = `<div class="message-content"><pre>${this.escapeHtml(text)}</pre></div>`;
-        }
-      }
-
-      msgEl.innerHTML = contentHtml;
-      chatDiv.appendChild(msgEl);
-    }
-  }
-
-  renderChatHistory() {
-    const list = document.getElementById('chatList');
-    if (!list) return;
-
-    list.innerHTML = '';
-    const convs = Array.from(this.conversations.values())
-      .sort((a, b) => (b.updated_at || 0) - (a.updated_at || 0));
-
-    for (const conv of convs) {
-      const el = document.createElement('div');
-      el.className = 'chat-item';
-      el.setAttribute('data-conv-id', conv.id);
-      el.innerHTML = `<div class="chat-item-title">${this.escapeHtml(conv.title || 'Untitled')}</div>`;
-      el.onclick = () => this.selectConversation(conv.id);
-      list.appendChild(el);
-    }
-  }
-
-  renderAll() {
-    this.renderChatHistory();
-    if (this.conversations.size > 0 && !this.currentConversation) {
-      const firstConv = Array.from(this.conversations.values())[0];
-      this.selectConversation(firstConv.id);
-    }
-  }
-
-  setupEventListeners() {
-    const sendBtn = document.getElementById('sendBtn');
-    if (sendBtn) {
-      sendBtn.onclick = () => this.sendMessage();
-    }
-
-    const input = document.getElementById('messageInput');
-    if (input) {
-      input.addEventListener('keypress', (e) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
-          e.preventDefault();
-          this.sendMessage();
-        }
-      });
-    }
-
-    const newConvBtn = document.getElementById('newConversationBtn');
-    if (newConvBtn) {
-      newConvBtn.onclick = () => this.createConversation();
-    }
-  }
-
-  parseMarkdownCodeBlocks(text) {
-    const parts = [];
-    const codeBlockRegex = /```(\w+)?\n([\s\S]*?)```/g;
-    let lastIndex = 0;
-    let match;
-
-    while ((match = codeBlockRegex.exec(text)) !== null) {
-      // Add text before code block
-      if (match.index > lastIndex) {
-        parts.push({
-          type: 'text',
-          content: text.substring(lastIndex, match.index)
-        });
-      }
-
-      // Add code block
-      const language = match[1] || 'text';
-      const code = match[2];
-      parts.push({
-        type: 'code',
-        language,
-        content: code
-      });
-
-      lastIndex = codeBlockRegex.lastIndex;
-    }
-
-    // Add remaining text
-    if (lastIndex < text.length) {
-      parts.push({
-        type: 'text',
-        content: text.substring(lastIndex)
-      });
-    }
-
-    return parts.length > 0 ? parts : [{ type: 'text', content: text }];
-  }
-
-  markdownToHtml(markdown) {
-    const lines = markdown.split('\n');
-    let html = '';
-    let inList = false;
-    let listType = null;
-    let i = 0;
-
-    while (i < lines.length) {
-      const line = lines[i];
-      const trimmed = line.trim();
-
-      // Code blocks
-      if (trimmed.startsWith('```')) {
-        if (inList) {
-          html += listType === 'ul' ? '</ul>' : '</ol>';
-          inList = false;
-        }
-        const match = trimmed.match(/^```(\w*)/);
-        const lang = (match && match[1]) || 'text';
-        i++;
-        const codeLines = [];
-        while (i < lines.length && !lines[i].trim().startsWith('```')) {
-          codeLines.push(lines[i]);
-          i++;
-        }
-        const clCount = codeLines.length;
-        html += `<details class="collapsible-code"><summary class="collapsible-code-summary">${this.escapeHtml(lang)} - ${clCount} line${clCount !== 1 ? 's' : ''}</summary><div class="code-block" data-language="${this.escapeHtml(lang)}"><pre><code>${this.escapeHtml(codeLines.join('\n'))}</code></pre></div></details>`;
-        i++;
-        continue;
-      }
-
-      // Headings
-      if (trimmed.startsWith('#')) {
-        if (inList) {
-          html += listType === 'ul' ? '</ul>' : '</ol>';
-          inList = false;
-        }
-        const match = trimmed.match(/^(#+)\s+(.*)/);
-        if (match) {
-          const level = match[1].length;
-          const text = this.escapeAndFormatInline(match[2]);
-          html += `<h${level}>${text}</h${level}>`;
-          i++;
-          continue;
-        }
-      }
-
-      // Lists
-      if (trimmed.match(/^[-*+]\s/)) {
-        if (!inList) {
-          html += '<ul>';
-          inList = true;
-          listType = 'ul';
-        }
-        const match = trimmed.match(/^[-*+]\s+(.*)/);
-        if (match) {
-          const text = this.escapeAndFormatInline(match[1]);
-          html += `<li>${text}</li>`;
-        }
-        i++;
-        continue;
-      }
-
-      if (trimmed.match(/^\d+\.\s/)) {
-        if (!inList || listType !== 'ol') {
-          if (inList) html += '</ul>';
-          html += '<ol>';
-          inList = true;
-          listType = 'ol';
-        }
-        const match = trimmed.match(/^\d+\.\s+(.*)/);
-        if (match) {
-          const text = this.escapeAndFormatInline(match[1]);
-          html += `<li>${text}</li>`;
-        }
-        i++;
-        continue;
-      }
-
-      // End list if not a list item
-      if (inList && trimmed && !trimmed.match(/^[-*+]\s/) && !trimmed.match(/^\d+\.\s/)) {
-        html += listType === 'ul' ? '</ul>' : '</ol>';
-        inList = false;
-      }
-
-      // Paragraphs
-      if (trimmed) {
-        const text = this.escapeAndFormatInline(trimmed);
-        html += `<p>${text}</p>`;
-      }
-
-      i++;
-    }
-
-    // Close any open list
-    if (inList) {
-      html += listType === 'ul' ? '</ul>' : '</ol>';
-    }
-
-    return html;
-  }
-
-  escapeAndFormatInline(text) {
-    text = this.escapeHtml(text);
-    // Bold and italic (must be before single asterisk)
-    text = text.replace(/\*\*\*(.*?)\*\*\*/g, '<strong><em>$1</em></strong>');
-    text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
-    text = text.replace(/\*(.*?)\*/g, '<em>$1</em>');
-    text = text.replace(/__(.*?)__/g, '<strong>$1</strong>');
-    text = text.replace(/_(.*?)_/g, '<em>$1</em>');
-    // Inline code
-    text = text.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>');
-    // Links
-    text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
-    return text;
-  }
-
-  renderCodeBlock(language, code) {
-    if (language === 'html') {
-      return `<div class="html-block">
-        <div class="html-header">Rendered HTML</div>
-        <div class="html-content">${code}</div>
-      </div>`;
-    } else {
-      const lcCount = code.split('\n').length;
-      return `<details class="collapsible-code"><summary class="collapsible-code-summary">${this.escapeHtml(language)} - ${lcCount} line${lcCount !== 1 ? 's' : ''}</summary><div class="code-block" data-language="${this.escapeHtml(language)}">
-        <pre><code>${this.escapeHtml(code)}</code></pre>
-      </div></details>`;
-    }
-  }
-
-  escapeHtml(text) {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-  }
-
-  renderParameters(obj, depth = 0) {
-    if (obj === null || obj === undefined) {
-      return `<span style="color: var(--text-tertiary);">null</span>`;
-    }
-
-    if (typeof obj === 'string') {
-      const isPath = obj.includes('/') || obj.includes('\\');
-      const isUrl = obj.startsWith('http://') || obj.startsWith('https://');
-      if (isPath || isUrl) {
-        return `<code style="color: var(--text-secondary); background: transparent;">${this.escapeHtml(obj)}</code>`;
-      }
-      return `<span>"${this.escapeHtml(obj)}"</span>`;
-    }
-
-    if (typeof obj === 'number' || typeof obj === 'boolean') {
-      return `<span style="color: var(--color-info);">${obj}</span>`;
-    }
-
-    if (Array.isArray(obj)) {
-      if (obj.length === 0) {
-        return `<span style="color: var(--text-tertiary);">[]</span>`;
-      }
-      const maxItems = depth === 0 ? 10 : 5;
-      const items = obj.slice(0, maxItems).map(item => this.renderParameters(item, depth + 1));
-      const more = obj.length > maxItems ? `<span style="color: var(--text-tertiary);">... ${obj.length - maxItems} more</span>` : '';
-      return `<span style="color: var(--text-tertiary);">[</span> ${items.join(', ')} ${more} <span style="color: var(--text-tertiary);">]</span>`;
-    }
-
-    if (typeof obj === 'object') {
-      const keys = Object.keys(obj);
-      if (keys.length === 0) {
-        return `<span style="color: var(--text-tertiary);">{}</span>`;
-      }
-      const maxKeys = depth === 0 ? 15 : 8;
-      const pairs = keys.slice(0, maxKeys).map(key => {
-        const keyHtml = `<span style="color: var(--color-primary);">${this.escapeHtml(key)}</span>`;
-        const valHtml = this.renderParameters(obj[key], depth + 1);
-        return `${keyHtml}: ${valHtml}`;
-      });
-      const more = keys.length > maxKeys ? `<span style="color: var(--text-tertiary);">... ${keys.length - maxKeys} more</span>` : '';
-      return `<div style="margin-left: ${depth * 1.5}rem;"><span style="color: var(--text-tertiary);">{</span><br/>${pairs.map(p => `&nbsp;&nbsp;${p}`).join(',<br/>')}<br/>${more}<span style="color: var(--text-tertiary);">}</span></div>`;
-    }
-
-    return `<span>${this.escapeHtml(String(obj))}</span>`;
-  }
-}
-
-const app = new GMGUIApp();
-
-function initializeApp() {
-  app.init().catch(err => {
-    console.error('[CRITICAL] Failed to initialize app:', err);
-  });
-}
-
-function sendMessage() {
-  app.sendMessage();
-}
-
-function showNewChatModal() {
-  const modal = document.getElementById('newChatModal');
-  if (modal) {
-    modal.style.display = 'flex';
-  }
-}
-
-function closeNewChatModal() {
-  const modal = document.getElementById('newChatModal');
-  if (modal) {
-    modal.style.display = 'none';
-  }
-}
-
-async function createChatInWorkspace() {
-  const title = await window.UIDialog.prompt('Enter a title for the conversation:', 'New Conversation', 'New Chat');
-  if (title) {
-    app.createConversation(title);
-    closeNewChatModal();
-  }
-}
-
-function createChatInFolder() {
-  const folderModal = document.getElementById('folderBrowserModal');
-  if (folderModal) {
-    folderModal.style.display = 'flex';
-    closeNewChatModal();
-  }
-}
-
-function closeFolderBrowser() {
-  const modal = document.getElementById('folderBrowserModal');
-  if (modal) {
-    modal.style.display = 'none';
-  }
-}
-
-function confirmFolderSelection() {
-  const folderPath = document.getElementById('folderPath')?.value;
-  if (folderPath) {
-    const title = `Chat in ${folderPath}`;
-    app.createConversation(title);
-    closeFolderBrowser();
-  }
-}
-
-function browseFolders() {
-  // Placeholder for folder browsing functionality
-  console.log('Folder browsing not yet implemented');
-}
-
-function toggleSidebar() {
-  const sidebar = document.getElementById('sidebar');
-  if (sidebar) {
-    sidebar.classList.toggle('collapsed');
-  }
-}
-
-function switchTab(tab) {
-  if (tab === 'settings') {
-    const panel = document.getElementById('settingsPanel');
-    if (panel) {
-      panel.style.display = 'flex';
-    }
-    const main = document.querySelector('.main-content');
-    if (main) {
-      main.style.display = 'none';
-    }
-  } else if (tab === 'chat') {
-    const panel = document.getElementById('settingsPanel');
-    if (panel) {
-      panel.style.display = 'none';
-    }
-    const main = document.querySelector('.main-content');
-    if (main) {
-      main.style.display = 'flex';
-    }
-  }
-}
-
-function triggerFileUpload() {
-  const input = document.getElementById('fileInput');
-  if (input) {
-    input.click();
-  }
-}
-
-function handleFileUpload() {
-  console.log('File upload not yet implemented');
-}
-
-function closeScreenshotModal() {
-  const modal = document.getElementById('screenshotModal');
-  if (modal) {
-    modal.style.display = 'none';
-  }
-}
-
-function sendScreenshot() {
-  console.log('Send screenshot not yet implemented');
-}
-
-function downloadScreenshot() {
-  console.log('Download screenshot not yet implemented');
-}
-
-function showShortcutsOverlay() {
-  if (document.querySelector('.shortcuts-overlay')) return;
-  const overlay = document.createElement('div');
-  overlay.className = 'shortcuts-overlay';
-  overlay.innerHTML = `<div class="shortcuts-panel">
-    <h3>Keyboard Shortcuts</h3>
-    <table>
-      <tr><td><kbd>Ctrl</kbd>+<kbd>N</kbd></td><td>New conversation</td></tr>
-      <tr><td><kbd>Ctrl</kbd>+<kbd>B</kbd></td><td>Toggle sidebar</td></tr>
-      <tr><td><kbd>Ctrl</kbd>+<kbd>Enter</kbd></td><td>Send message</td></tr>
-      <tr><td><kbd>Escape</kbd></td><td>Cancel stream / blur input</td></tr>
-      <tr><td><kbd>?</kbd></td><td>Show this help</td></tr>
-    </table>
-    <p style="margin:1rem 0 0;font-size:0.75rem;color:#9ca3af;">Press Escape to close</p>
-  </div>`;
-  overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
-  document.body.appendChild(overlay);
-}
-
-document.addEventListener('keydown', (e) => {
-  if (e.key === '?' && !e.ctrlKey && !e.metaKey) {
-    const tag = document.activeElement?.tagName;
-    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
-    e.preventDefault();
-    showShortcutsOverlay();
-  }
-  if (e.key === 'Escape' && document.querySelector('.shortcuts-overlay')) {
-    document.querySelector('.shortcuts-overlay').remove();
-  }
-});
-
+const BASE_URL = window.__BASE_URL || '';
+
 (function initSidebarSearch() {
   const input = document.getElementById('sidebarSearchInput');
   if (!input) return;
@@ -963,6 +183,4 @@ document.addEventListener('keydown', (e) => {
   });
 
   renderSelector();
-})();
-
-window.addEventListener('load', initializeApp);
+})();

package/static/index.html

@@ -310,6 +310,8 @@
   <script defer src="/gm/js/client.js"></script>
   <script defer src="/gm/js/features.js"></script>
   <script defer src="/gm/js/agent-auth.js"></script>
+  <script defer src="/gm/js/app-shortcuts.js"></script>
+  <script defer src="/gm/app.js"></script>
 
   <script>
     const savedTheme = localStorage.getItem('theme') || 'light';

package/static/js/app-shortcuts.js

@@ -0,0 +1,30 @@
+function showShortcutsOverlay() {
+  if (document.querySelector('.shortcuts-overlay')) return;
+  const overlay = document.createElement('div');
+  overlay.className = 'shortcuts-overlay';
+  overlay.innerHTML = `<div class="shortcuts-panel">
+    <h3>Keyboard Shortcuts</h3>
+    <table>
+      <tr><td><kbd>Ctrl</kbd>+<kbd>N</kbd></td><td>New conversation</td></tr>
+      <tr><td><kbd>Ctrl</kbd>+<kbd>B</kbd></td><td>Toggle sidebar</td></tr>
+      <tr><td><kbd>Ctrl</kbd>+<kbd>Enter</kbd></td><td>Send message</td></tr>
+      <tr><td><kbd>Escape</kbd></td><td>Cancel stream / blur input</td></tr>
+      <tr><td><kbd>?</kbd></td><td>Show this help</td></tr>
+    </table>
+    <p style="margin:1rem 0 0;font-size:0.75rem;color:#9ca3af;">Press Escape to close</p>
+  </div>`;
+  overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
+  document.body.appendChild(overlay);
+}
+
+document.addEventListener('keydown', (e) => {
+  if (e.key === '?' && !e.ctrlKey && !e.metaKey) {
+    const tag = document.activeElement?.tagName;
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
+    e.preventDefault();
+    showShortcutsOverlay();
+  }
+  if (e.key === 'Escape' && document.querySelector('.shortcuts-overlay')) {
+    document.querySelector('.shortcuts-overlay').remove();
+  }
+});

package/static/js/client.js

@@ -1997,6 +1997,10 @@ class AgentGUIClient {
         isStreaming: self._convIsStreaming(self.state.currentConversation?.id),
         streamingConversations: Array.from(self.state.streamingConversations),
         convMachineStates: typeof convMachineAPI !== 'undefined' ? Object.fromEntries([...window.__convMachines].map(([k, a]) => [k, a.getSnapshot().value])) : {},
+        toolInstallMachineStates: typeof window.__toolInstallMachines !== 'undefined' ? Object.fromEntries([...window.__toolInstallMachines].map(([k, a]) => [k, a.getSnapshot().value])) : {},
+        voiceMachineState: typeof window.__voiceMachine !== 'undefined' ? window.__voiceMachine.getSnapshot().value : 'unknown',
+        convListMachineState: typeof window.__convListMachine !== 'undefined' ? window.__convListMachine.getSnapshot().value : 'unknown',
+        promptMachineState: typeof window.__promptMachine !== 'undefined' ? window.__promptMachine.getSnapshot().value : 'unknown',
         wsConnectionState: self.wsManager?._wsActor?.getSnapshot().value || 'unknown',
         rendererEventQueueLength: self.renderer?.eventQueue?.length || 0,
         rendererEventHistoryLength: self.renderer?.eventHistory?.length || 0,