agentgui 1.0.1121 → 1.0.1122

package/package.json

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

package/site/app/js/app.js

@@ -1,6 +1,8 @@
 import { h, mount, installStyles, components as C } from 'anentrypoint-design';
 import * as B from './backend.js';
-import { createChatPersistence } from './chat-persistence.js';
+import { createChatPersistence, CHAT_KEY } from './chat-persistence.js';
+import { installShortcuts } from './shortcuts.js';
+import { readHash as readHashRouting, buildHash as buildHashRouting, writeHash as writeHashRouting } from './hash-routing.js';
 
 installStyles().catch(() => {});
 
@@ -68,59 +70,12 @@ const ARM_RESET_MS = 4000;
 
 // Full routable param set. Every view-defining piece of state round-trips
 // through the hash so reload and Back/forward restore the exact view.
-const HASH_KEYS = ['tab', 'sid', 'dir', 'file', 'q', 'project', 'section', 'filter', 'lsort', 'lfilter', 'lerr', 'ets'];
-function readHash() {
-  const hash = location.hash || '';
-  const out = {};
-  for (const k of HASH_KEYS) {
-    const m = hash.match(new RegExp('(?:^#|&)' + k + '=([^&]*)'));
-    out[k] = m ? decodeURIComponent(m[1]) : null;
-  }
-  return out;
-}
-function buildHash() {
-  const parts = [];
-  const tab = state.tab || 'chat';
-  // tab is omitted for the default chat tab, EXCEPT when a session id rides
-  // along - a bare #sid= historically meant history, so chat+sid must name its
-  // tab explicitly or the deep-link restores the wrong surface.
-  if (tab !== 'chat') parts.push('tab=' + encodeURIComponent(tab));
-  else if (state.selectedSid) parts.push('tab=chat');
-  // Keep sid whenever set (regardless of tab) so Back restores the selection.
-  if (state.selectedSid) parts.push('sid=' + encodeURIComponent(state.selectedSid));
-  if (tab === 'files' && state.files) {
-    if (state.files.path) parts.push('dir=' + encodeURIComponent(state.files.path));
-    if (state.files.preview && state.files.preview.path) parts.push('file=' + encodeURIComponent(state.files.preview.path));
-    if (state.files.filter) parts.push('filter=' + encodeURIComponent(state.files.filter));
-  }
-  if (tab === 'history') {
-    const q = (state.searchQ || '').trim();
-    if (q.length >= 2) parts.push('q=' + encodeURIComponent(q));
-    if (state.projectFilter) parts.push('project=' + encodeURIComponent(state.projectFilter));
-    // A session opened from a search hit carries the matched event's
-    // timestamp so reload/Back reproduces the same scrolled+flashed position
-    // a live click gives - without this, the anchor only existed in memory
-    // and a search-hit URL degraded to just the bare session on reload.
-    if (state._focusEventTs != null) parts.push('ets=' + encodeURIComponent(state._focusEventTs));
-  }
-  if (tab === 'settings' && state.settingsSection) parts.push('section=' + encodeURIComponent(state.settingsSection));
-  if (tab === 'live') {
-    const lv = state.live || {};
-    if (lv.sort && lv.sort !== 'status') parts.push('lsort=' + encodeURIComponent(lv.sort));
-    if (lv.filter) parts.push('lfilter=' + encodeURIComponent(lv.filter));
-    if (lv.errorsOnly) parts.push('lerr=1');
-  }
-  return parts.length ? '#' + parts.join('&') : '';
-}
-function writeHash({ push = false } = {}) {
-  const h = buildHash();
-  const url = location.pathname + location.search + h;
-  if (location.hash === h || (!location.hash && !h)) return;
-  // pushState for user navigation steps (tab visits, session selection,
-  // directory walks, preview opens) so Back retraces them; replaceState for
-  // passive state sync (search text, filter resets).
-  (push ? history.pushState : history.replaceState).call(history, null, '', url);
-}
+// Hash-based deep-link state - extracted to hash-routing.js. Local names kept
+// identical to every existing call site (readHash/buildHash/writeHash), bound
+// against the module's shared `state` object.
+function readHash() { return readHashRouting(); }
+function buildHash() { return buildHashRouting(state); }
+function writeHash(opts) { return writeHashRouting(state, opts); }
 const plural = (n, w) => n + ' ' + w + (n === 1 ? '' : 's');
 function fmtRelTime(ts) {
   if (!ts) return '';
@@ -4646,115 +4601,16 @@ window.__agentgui = { state, render };
 
 // Keyboard shortcuts. 'g' then c/h/s switches tabs; 'n' new chat; '/' focuses
 // search (history) or composer (chat). Ignored while typing in a field.
-let gPending = false;
-function focusComposer() {
-  const el = document.querySelector('#agentgui-main textarea, #agentgui-main [contenteditable="true"], #agentgui-main input[type="text"]');
-  el?.focus();
-}
-function focusSearch() {
-  const el = document.querySelector('#app input[type="search"]');
-  el?.focus();
-}
-// Focus the active surface's filter input (Files grid filter / Live dashboard
-// filter) - both are search-type inputs inside the main region.
-function focusFilter() {
-  const el = document.querySelector('#agentgui-main input[type="search"]')
-    || document.querySelector('#agentgui-main .ds-file-filter-input')
-    || document.querySelector('#agentgui-main input[type="text"]');
-  el?.focus();
-  return !!el;
-}
-window.addEventListener('keydown', (e) => {
-  const t = e.target;
-  const typing = t && (t.tagName === 'TEXTAREA' || t.tagName === 'INPUT' || t.isContentEditable);
-  // One explicit chord BEFORE the modifier early-return: Mod+Shift+L focuses
-  // the composer from anywhere, even while typing in another field.
-  if ((e.metaKey || e.ctrlKey) && e.shiftKey && (e.key === 'L' || e.key === 'l')) {
-    e.preventDefault();
-    navTo('chat');
-    requestAnimationFrame(() => focusComposer());
-    announce('composer focused');
-    return;
-  }
-  if (e.metaKey || e.ctrlKey || e.altKey) return;
-  if (typing) {
-    // The cwd editor's own text input is the one exception: Escape there must
-    // close the editor in a single press (matching every other Escape-
-    // closeable surface in the app), not blur-then-require-a-second-press.
-    if (e.key === 'Escape' && t.classList && t.classList.contains('agentchat-cwd-input')) {
-      t.blur();
-      // Fall through to the ladder below instead of returning early.
-    } else {
-      if (e.key === 'Escape') t.blur();
-      return;
-    }
-  }
-  if (e.key === 'Escape') {
-    // Priority ladder for transient state (modals/drawers are kit-handled):
-    // shortcuts overlay > armed confirms > stop a streaming generation.
-    if (state.showShortcuts) { state.showShortcuts = false; render(); announce('shortcuts closed'); return; }
-    // File-mutation dialog: close on Escape wherever focus sits (the kit's
-    // backdrop listener covers in-dialog focus; this covers everything else).
-    if (state.files.dialog) { if (!state.files.dialog.busy) closeFileDialog(); return; }
-    if (state.chat.confirmingEdit) { state.chat.confirmingEdit = null; render(); announce('edit cancelled'); return; }
-    // cwd editor: the browse popover is a nested layer within it - Escape
-    // closes the popover first (one level of the nesting) before falling
-    // through to closing the whole editor on a second press, matching the
-    // dialog-then-page Escape convention used elsewhere in the app.
-    if (state.cwdEditing) {
-      if (state.cwdBrowse) { state.cwdBrowse = null; render(); announce('folder browser closed'); return; }
-      state.cwdEditing = false; state.cwdDraft = undefined; state.cwdError = null; state.cwdChecking = false;
-      render(); announce('cwd edit cancelled');
-      requestAnimationFrame(() => { const btn = document.querySelector('.agentchat-cwd-btn'); if (btn) btn.focus(); });
-      return;
-    }
-    if (state.confirmingClearData) { state.confirmingClearData = false; render(); announce('clear cancelled'); return; }
-    if (state.confirmingNewChat) { clearTimeout(_newChatArmTimer); state.confirmingNewChat = false; render(); announce('new chat cancelled'); return; }
-    if (state.live.confirmingStopAll || state.live.confirmingStopSelected) {
-      state.live.confirmingStopAll = false; state.live.confirmingStopSelected = false;
-      clearTimeout(_stopAllArmTimer); clearTimeout(_stopSelArmTimer);
-      render(); announce('stop cancelled'); return;
-    }
-    // A live file multi-select is transient state too: Escape drops it before
-    // falling through to stop-generation.
-    if (state.tab === 'files' && filesMarked().size) { clearFileSelection(); return; }
-    if (state.chat.busy && state.tab === 'chat') { cancelChat(); announce('generation stopped'); return; }
-    return;
-  }
-  if (gPending) {
-    gPending = false;
-    if (e.key === 'c') { navTo('chat'); return; }
-    if (e.key === 'h') { navTo('history'); return; }
-    if (e.key === 'f') { navTo('files'); return; }
-    if (e.key === 'l') { navTo('live'); return; }
-    if (e.key === 's') { navTo('settings'); return; }
-    return;
-  }
-  if (e.key === 'g') { gPending = true; setTimeout(() => { gPending = false; }, 1000); return; }
-  if (e.key === 'n' && state.tab === 'chat') { e.preventDefault(); newChat(); return; }
-  if (e.key === '/') {
-    // / targets the active surface's find affordance: search on history,
-    // composer on chat, the filter inputs on files/live. Settings has no
-    // field - the only documented no-op.
-    if (state.tab === 'history') { e.preventDefault(); focusSearch(); announce('search focused'); }
-    else if (state.tab === 'chat') { e.preventDefault(); focusComposer(); announce('composer focused'); }
-    else if (state.tab === 'files' || state.tab === 'live') { e.preventDefault(); if (focusFilter()) announce('filter focused'); }
-    return;
-  }
-  if (e.key === '?') { state.showShortcuts = !state.showShortcuts; render(); return; }
-  // Left/Right: step through file previews (documented in SHORTCUTS).
-  if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight') && state.tab === 'files' && state.files.preview) {
-    const { prev, next } = previewNeighbours();
-    const target = e.key === 'ArrowLeft' ? prev : next;
-    if (target) { e.preventDefault(); openPreview(target); }
-    return;
-  }
-});
-
-// A file dropped anywhere outside a DropZone must never navigate the browser
-// away (destroying the live session view). DropZones handle their own events.
-window.addEventListener('dragover', (e) => {
-  if (!(e.target instanceof Element) || !e.target.closest('.ds-dropzone')) e.preventDefault();
+// Keyboard shortcuts - extracted to shortcuts.js (vertical slice per
+// AGENTS.md SOLID/Clean-Architecture preferences). The factory takes every
+// app.js dependency explicitly (state, render, and the helpers object below)
+// rather than closing over app.js's module scope.
+const { focusComposer } = installShortcuts(state, render, {
+  navTo, announce, closeFileDialog, filesMarked, clearFileSelection,
+  cancelChat, newChat, previewNeighbours, openPreview,
+  clearNewChatArmTimer: () => clearTimeout(_newChatArmTimer),
+  clearStopAllArmTimer: () => clearTimeout(_stopAllArmTimer),
+  clearStopSelArmTimer: () => clearTimeout(_stopSelArmTimer),
 });
 window.addEventListener('drop', (e) => {
   if (!(e.target instanceof Element) || !e.target.closest('.ds-dropzone')) e.preventDefault();

package/site/app/js/chat-persistence.js

@@ -1,4 +1,4 @@
-const CHAT_KEY = 'agentgui.chat';
+export const CHAT_KEY = 'agentgui.chat';
 // Cap the persisted footprint: the last 100 messages, with any tool args/result
 // payload over 4KB truncated in the SAVED copy only (in-memory state keeps the
 // full payload). A quota failure is surfaced once instead of silently dropping

package/site/app/js/hash-routing.js

@@ -0,0 +1,62 @@
+// Hash-based deep-link state, extracted from app.js (vertical slice per
+// AGENTS.md SOLID/Clean-Architecture preferences). Full hash routing state is
+// HASH_KEYS; popstate diffs the full set, and navTo(tab,{writeHash:false})
+// navigates without pushing a new hash entry (navTo itself stays in app.js -
+// it orchestrates tab-switch side effects like reloading history/files/live
+// data, not just the hash string, so it is a broader concern than routing).
+export const HASH_KEYS = ['tab', 'sid', 'dir', 'file', 'q', 'project', 'section', 'filter', 'lsort', 'lfilter', 'lerr', 'ets'];
+
+export function readHash() {
+  const hash = location.hash || '';
+  const out = {};
+  for (const k of HASH_KEYS) {
+    const m = hash.match(new RegExp('(?:^#|&)' + k + '=([^&]*)'));
+    out[k] = m ? decodeURIComponent(m[1]) : null;
+  }
+  return out;
+}
+
+export function buildHash(state) {
+  const parts = [];
+  const tab = state.tab || 'chat';
+  // tab is omitted for the default chat tab, EXCEPT when a session id rides
+  // along - a bare #sid= historically meant history, so chat+sid must name its
+  // tab explicitly or the deep-link restores the wrong surface.
+  if (tab !== 'chat') parts.push('tab=' + encodeURIComponent(tab));
+  else if (state.selectedSid) parts.push('tab=chat');
+  // Keep sid whenever set (regardless of tab) so Back restores the selection.
+  if (state.selectedSid) parts.push('sid=' + encodeURIComponent(state.selectedSid));
+  if (tab === 'files' && state.files) {
+    if (state.files.path) parts.push('dir=' + encodeURIComponent(state.files.path));
+    if (state.files.preview && state.files.preview.path) parts.push('file=' + encodeURIComponent(state.files.preview.path));
+    if (state.files.filter) parts.push('filter=' + encodeURIComponent(state.files.filter));
+  }
+  if (tab === 'history') {
+    const q = (state.searchQ || '').trim();
+    if (q.length >= 2) parts.push('q=' + encodeURIComponent(q));
+    if (state.projectFilter) parts.push('project=' + encodeURIComponent(state.projectFilter));
+    // A session opened from a search hit carries the matched event's
+    // timestamp so reload/Back reproduces the same scrolled+flashed position
+    // a live click gives - without this, the anchor only existed in memory
+    // and a search-hit URL degraded to just the bare session on reload.
+    if (state._focusEventTs != null) parts.push('ets=' + encodeURIComponent(state._focusEventTs));
+  }
+  if (tab === 'settings' && state.settingsSection) parts.push('section=' + encodeURIComponent(state.settingsSection));
+  if (tab === 'live') {
+    const lv = state.live || {};
+    if (lv.sort && lv.sort !== 'status') parts.push('lsort=' + encodeURIComponent(lv.sort));
+    if (lv.filter) parts.push('lfilter=' + encodeURIComponent(lv.filter));
+    if (lv.errorsOnly) parts.push('lerr=1');
+  }
+  return parts.length ? '#' + parts.join('&') : '';
+}
+
+export function writeHash(state, { push = false } = {}) {
+  const h = buildHash(state);
+  const url = location.pathname + location.search + h;
+  if (location.hash === h || (!location.hash && !h)) return;
+  // pushState for user navigation steps (tab visits, session selection,
+  // directory walks, preview opens) so Back retraces them; replaceState for
+  // passive state sync (search text, filter resets).
+  (push ? history.pushState : history.replaceState).call(history, null, '', url);
+}

package/site/app/js/shortcuts.js

@@ -0,0 +1,128 @@
+// Global keyboard shortcut handling, extracted from app.js (vertical slice
+// per AGENTS.md SOLID/Clean-Architecture preferences). This is the highest
+// cross-cutting-coupling code in app.js (AGENTS.md flags it as historically
+// crash-prone under webjsx keying mistakes) - the factory takes every
+// dependency explicitly rather than closing over app.js's module scope, so
+// the coupling is visible at the call site instead of implicit.
+export function installShortcuts(state, render, helpers) {
+  const {
+    navTo, announce, closeFileDialog, filesMarked, clearFileSelection,
+    cancelChat, newChat, previewNeighbours, openPreview,
+    clearNewChatArmTimer, clearStopAllArmTimer, clearStopSelArmTimer,
+  } = helpers;
+
+  let gPending = false;
+
+  function focusComposer() {
+    const el = document.querySelector('#agentgui-main textarea, #agentgui-main [contenteditable="true"], #agentgui-main input[type="text"]');
+    el?.focus();
+  }
+  function focusSearch() {
+    const el = document.querySelector('#app input[type="search"]');
+    el?.focus();
+  }
+  // Focus the active surface's filter input (Files grid filter / Live dashboard
+  // filter) - both are search-type inputs inside the main region.
+  function focusFilter() {
+    const el = document.querySelector('#agentgui-main input[type="search"]')
+      || document.querySelector('#agentgui-main .ds-file-filter-input')
+      || document.querySelector('#agentgui-main input[type="text"]');
+    el?.focus();
+    return !!el;
+  }
+
+  window.addEventListener('keydown', (e) => {
+    const t = e.target;
+    const typing = t && (t.tagName === 'TEXTAREA' || t.tagName === 'INPUT' || t.isContentEditable);
+    // One explicit chord BEFORE the modifier early-return: Mod+Shift+L focuses
+    // the composer from anywhere, even while typing in another field.
+    if ((e.metaKey || e.ctrlKey) && e.shiftKey && (e.key === 'L' || e.key === 'l')) {
+      e.preventDefault();
+      navTo('chat');
+      requestAnimationFrame(() => focusComposer());
+      announce('composer focused');
+      return;
+    }
+    if (e.metaKey || e.ctrlKey || e.altKey) return;
+    if (typing) {
+      // The cwd editor's own text input is the one exception: Escape there must
+      // close the editor in a single press (matching every other Escape-
+      // closeable surface in the app), not blur-then-require-a-second-press.
+      if (e.key === 'Escape' && t.classList && t.classList.contains('agentchat-cwd-input')) {
+        t.blur();
+        // Fall through to the ladder below instead of returning early.
+      } else {
+        if (e.key === 'Escape') t.blur();
+        return;
+      }
+    }
+    if (e.key === 'Escape') {
+      // Priority ladder for transient state (modals/drawers are kit-handled):
+      // shortcuts overlay > armed confirms > stop a streaming generation.
+      if (state.showShortcuts) { state.showShortcuts = false; render(); announce('shortcuts closed'); return; }
+      // File-mutation dialog: close on Escape wherever focus sits (the kit's
+      // backdrop listener covers in-dialog focus; this covers everything else).
+      if (state.files.dialog) { if (!state.files.dialog.busy) closeFileDialog(); return; }
+      if (state.chat.confirmingEdit) { state.chat.confirmingEdit = null; render(); announce('edit cancelled'); return; }
+      // cwd editor: the browse popover is a nested layer within it - Escape
+      // closes the popover first (one level of the nesting) before falling
+      // through to closing the whole editor on a second press, matching the
+      // dialog-then-page Escape convention used elsewhere in the app.
+      if (state.cwdEditing) {
+        if (state.cwdBrowse) { state.cwdBrowse = null; render(); announce('folder browser closed'); return; }
+        state.cwdEditing = false; state.cwdDraft = undefined; state.cwdError = null; state.cwdChecking = false;
+        render(); announce('cwd edit cancelled');
+        requestAnimationFrame(() => { const btn = document.querySelector('.agentchat-cwd-btn'); if (btn) btn.focus(); });
+        return;
+      }
+      if (state.confirmingClearData) { state.confirmingClearData = false; render(); announce('clear cancelled'); return; }
+      if (state.confirmingNewChat) { clearNewChatArmTimer(); state.confirmingNewChat = false; render(); announce('new chat cancelled'); return; }
+      if (state.live.confirmingStopAll || state.live.confirmingStopSelected) {
+        state.live.confirmingStopAll = false; state.live.confirmingStopSelected = false;
+        clearStopAllArmTimer(); clearStopSelArmTimer();
+        render(); announce('stop cancelled'); return;
+      }
+      // A live file multi-select is transient state too: Escape drops it before
+      // falling through to stop-generation.
+      if (state.tab === 'files' && filesMarked().size) { clearFileSelection(); return; }
+      if (state.chat.busy && state.tab === 'chat') { cancelChat(); announce('generation stopped'); return; }
+      return;
+    }
+    if (gPending) {
+      gPending = false;
+      if (e.key === 'c') { navTo('chat'); return; }
+      if (e.key === 'h') { navTo('history'); return; }
+      if (e.key === 'f') { navTo('files'); return; }
+      if (e.key === 'l') { navTo('live'); return; }
+      if (e.key === 's') { navTo('settings'); return; }
+      return;
+    }
+    if (e.key === 'g') { gPending = true; setTimeout(() => { gPending = false; }, 1000); return; }
+    if (e.key === 'n' && state.tab === 'chat') { e.preventDefault(); newChat(); return; }
+    if (e.key === '/') {
+      // / targets the active surface's find affordance: search on history,
+      // composer on chat, the filter inputs on files/live. Settings has no
+      // field - the only documented no-op.
+      if (state.tab === 'history') { e.preventDefault(); focusSearch(); announce('search focused'); }
+      else if (state.tab === 'chat') { e.preventDefault(); focusComposer(); announce('composer focused'); }
+      else if (state.tab === 'files' || state.tab === 'live') { e.preventDefault(); if (focusFilter()) announce('filter focused'); }
+      return;
+    }
+    if (e.key === '?') { state.showShortcuts = !state.showShortcuts; render(); return; }
+    // Left/Right: step through file previews (documented in SHORTCUTS).
+    if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight') && state.tab === 'files' && state.files.preview) {
+      const { prev, next } = previewNeighbours();
+      const target = e.key === 'ArrowLeft' ? prev : next;
+      if (target) { e.preventDefault(); openPreview(target); }
+      return;
+    }
+  });
+
+  // A file dropped anywhere outside a DropZone must never navigate the browser
+  // away (destroying the live session view). DropZones handle their own events.
+  window.addEventListener('dragover', (e) => {
+    if (!(e.target instanceof Element) || !e.target.closest('.ds-dropzone')) e.preventDefault();
+  });
+
+  return { focusComposer, focusSearch, focusFilter };
+}