agentgui 1.0.930 → 1.0.932

package/static/app.js

@@ -1,261 +0,0 @@
-const BASE_URL = window.__BASE_URL || '';
-
-(function initSidebarSearch() {
-  const input = document.getElementById('sidebarSearchInput');
-  if (!input) return;
-  let debounceTimer;
-  input.addEventListener('input', () => {
-    clearTimeout(debounceTimer);
-    debounceTimer = setTimeout(() => {
-      const query = input.value.trim();
-      const list = document.querySelector('[data-conversation-list]');
-      if (!list) return;
-      const items = list.querySelectorAll('li[data-conv-id]');
-      if (!query) {
-        items.forEach(li => li.style.display = '');
-        return;
-      }
-      const lower = query.toLowerCase();
-      items.forEach(li => {
-        const text = li.textContent.toLowerCase();
-        li.style.display = text.includes(lower) ? '' : 'none';
-      });
-    }, 150);
-  });
-})();
-
-(function initErrorBoundary() {
-  let toastEl = null;
-  let hideTimer = null;
-  function showErrorToast(title, detail) {
-    if (toastEl) toastEl.remove();
-    toastEl = document.createElement('div');
-    toastEl.className = 'error-toast';
-    toastEl.innerHTML = `<div class="error-toast-title">${title}</div><div class="error-toast-detail">${detail}</div>`;
-    toastEl.addEventListener('click', () => { toastEl.remove(); toastEl = null; });
-    document.body.appendChild(toastEl);
-    clearTimeout(hideTimer);
-    hideTimer = setTimeout(() => { if (toastEl) { toastEl.remove(); toastEl = null; } }, 8000);
-  }
-  window.addEventListener('error', (e) => {
-    if (e.filename) showErrorToast('JavaScript Error', `${e.message} at ${e.filename.split('/').pop()}:${e.lineno}`);
-  });
-  window.addEventListener('unhandledrejection', (e) => {
-    const msg = e.reason?.message || String(e.reason || 'Unknown');
-    showErrorToast('Unhandled Promise Rejection', msg);
-  });
-  window.showErrorToast = showErrorToast;
-})();
-
-(function initImportButton() {
-  const btn = document.getElementById('importConversationBtn');
-  if (!btn) return;
-  btn.addEventListener('click', () => {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = '.json';
-    input.addEventListener('change', async () => {
-      if (!input.files[0]) return;
-      try {
-        const text = await input.files[0].text();
-        const data = JSON.parse(text);
-        if (!data.conversation || !data.messages) {
-          window.showErrorToast('Import Failed', 'Invalid format. Export a conversation as JSON first.');
-          return;
-        }
-        await window.wsClient.rpc('conv.import', data);
-      } catch (e) {
-        window.showErrorToast('Import Failed', e.message);
-      }
-    });
-    input.click();
-  });
-})();
-
-(function initArchivedView() {
-  const btn = document.getElementById('viewArchivedBtn');
-  if (!btn) return;
-  let showing = false;
-  btn.addEventListener('click', async () => {
-    const list = document.querySelector('[data-conversation-list]');
-    if (!list) return;
-    if (showing) {
-      showing = false;
-      btn.textContent = 'Archived';
-      if (window.conversationManager) window.conversationManager.render();
-      return;
-    }
-    try {
-      const base = window.__BASE_URL || '';
-      const resp = await fetch(`${base}/api/conversations/archived`);
-      if (!resp.ok) throw new Error('HTTP ' + resp.status + ': ' + await resp.text());
-      const { conversations } = await resp.json();
-      if (!conversations || conversations.length === 0) {
-        window.UIDialog?.alert('No archived conversations', 'Archived');
-        return;
-      }
-      showing = true;
-      btn.textContent = 'Back';
-      list.innerHTML = conversations.map(c => `
-        <li class="conversation-item" style="cursor:default;">
-          <div class="conversation-item-content">
-            <div class="conversation-item-title">${window._escHtml(c.title || 'Untitled')}</div>
-            <div class="conversation-item-meta">${new Date(c.created_at).toLocaleDateString()}</div>
-          </div>
-          <button class="conversation-item-archive" title="Restore" data-restore-conv="${c.id}" style="opacity:1;">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <polyline points="1 4 1 10 7 10"></polyline>
-              <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
-            </svg>
-          </button>
-        </li>
-      `).join('');
-      list.addEventListener('click', async (e) => {
-        const restoreBtn = e.target.closest('[data-restore-conv]');
-        if (!restoreBtn) return;
-        const id = restoreBtn.dataset.restoreConv;
-        await fetch(`${base}/api/conversations/${id}/restore`, { method: 'POST' });
-        restoreBtn.closest('li').remove();
-        if (!list.querySelector('li')) { showing = false; btn.textContent = 'Archived'; if (window.conversationManager) window.conversationManager.render(); }
-      }, { once: false });
-    } catch (e) {
-      window.showErrorToast('Load Failed', e.message);
-    }
-  });
-})();
-
-(function initPresets() {
-  const STORAGE_KEY = 'agentgui-presets';
-  const saveBtn = document.getElementById('savePresetBtn');
-  const selector = document.getElementById('presetSelector');
-  if (!saveBtn || !selector) return;
-
-  function getPresets() {
-    try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); } catch { return []; }
-  }
-  function savePresets(p) { localStorage.setItem(STORAGE_KEY, JSON.stringify(p)); }
-
-  function renderSelector() {
-    const presets = getPresets();
-    if (presets.length === 0) { selector.style.display = 'none'; return; }
-    selector.style.display = 'inline-block';
-    selector.innerHTML = '<option value="">Presets</option>' +
-      presets.map((p, i) => `<option value="${i}">${window._escHtml(p.name)}</option>`).join('') +
-      '<option value="__clear">Clear all</option>';
-  }
-
-  saveBtn.addEventListener('click', () => {
-    const cli = document.querySelector('[data-cli-selector]');
-    const agent = document.querySelector('[data-agent-selector]');
-    const model = document.querySelector('[data-model-selector]');
-    const cliVal = cli?.value || '';
-    const agentVal = agent?.value || '';
-    const modelVal = model?.value || '';
-    if (!cliVal) return;
-    const parts = [cliVal.split('-').pop()];
-    if (agentVal) parts.push(agentVal.split('/').pop());
-    if (modelVal) parts.push(modelVal.split('/').pop().split('-')[0]);
-    const name = prompt('Preset name:', parts.join(' / '));
-    if (!name) return;
-    const presets = getPresets();
-    presets.push({ name, cli: cliVal, agent: agentVal, model: modelVal });
-    savePresets(presets);
-    renderSelector();
-  });
-
-  selector.addEventListener('change', () => {
-    const val = selector.value;
-    if (val === '__clear') { savePresets([]); renderSelector(); return; }
-    if (!val) return;
-    const presets = getPresets();
-    const preset = presets[parseInt(val)];
-    if (!preset) return;
-    const cli = document.querySelector('[data-cli-selector]');
-    const agent = document.querySelector('[data-agent-selector]');
-    const model = document.querySelector('[data-model-selector]');
-    if (cli && preset.cli) { cli.value = preset.cli; cli.dispatchEvent(new Event('change')); }
-    setTimeout(() => {
-      if (agent && preset.agent) { agent.value = preset.agent; agent.dispatchEvent(new Event('change')); }
-      setTimeout(() => {
-        if (model && preset.model) { model.value = preset.model; model.dispatchEvent(new Event('change')); }
-      }, 500);
-    }, 500);
-    selector.value = '';
-  });
-
-  renderSelector();
-})();
-
-(function initSidebarOverflowMenu() {
-  const btn = document.getElementById('sidebarOverflowBtn');
-  const menu = document.getElementById('sidebarOverflowMenu');
-  if (!btn || !menu) return;
-  const close = () => { menu.classList.remove('open'); menu.style.top = menu.style.bottom = ''; };
-  const open = () => {
-    menu.classList.add('open');
-    const rect = menu.getBoundingClientRect();
-    if (rect.bottom > window.innerHeight - 8) {
-      menu.style.top = 'auto';
-      menu.style.bottom = '100%';
-    } else {
-      menu.style.top = '';
-      menu.style.bottom = '';
-    }
-  };
-  btn.addEventListener('click', (e) => {
-    e.stopPropagation();
-    menu.classList.contains('open') ? close() : open();
-  });
-  document.addEventListener('click', (e) => {
-    if (!menu.contains(e.target) && e.target !== btn) close();
-  });
-  menu.addEventListener('click', (e) => {
-    if (e.target.closest('.sidebar-overflow-menu-item')) close();
-  });
-  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });
-})();
-
-(function initMobileSidebarToggle() {
-  const toggle = document.querySelector('[data-sidebar-toggle]');
-  const sidebar = document.querySelector('[data-sidebar]');
-  const overlay = document.querySelector('[data-sidebar-overlay]');
-  if (!toggle || !sidebar) return;
-  const close = () => {
-    sidebar.classList.remove('open');
-    if (overlay) overlay.classList.remove('open');
-  };
-  const isMobile = () => window.matchMedia('(max-width: 768px)').matches;
-  toggle.addEventListener('click', (e) => {
-    if (!isMobile()) {
-      sidebar.classList.toggle('collapsed');
-      return;
-    }
-    sidebar.classList.toggle('open');
-    if (overlay) overlay.classList.toggle('open');
-  });
-  if (overlay) overlay.addEventListener('click', close);
-  document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && isMobile()) close(); });
-})();
-
-(function initNavRail() {
-  const archivedRailBtn = document.getElementById('viewArchivedBtnRail');
-  const archivedBtn = document.getElementById('viewArchivedBtn');
-  if (archivedRailBtn && archivedBtn) {
-    archivedRailBtn.addEventListener('click', () => archivedBtn.click());
-  }
-
-  const toolsRailBtn = document.getElementById('toolsManagerBtnRail');
-  const toolsBtn = document.getElementById('toolsManagerBtn');
-  if (toolsRailBtn && toolsBtn) {
-    toolsRailBtn.addEventListener('click', () => toolsBtn.click());
-  }
-
-  const headerSearch = document.getElementById('headerSearchInput');
-  const sidebarSearch = document.getElementById('sidebarSearchInput');
-  if (headerSearch && sidebarSearch) {
-    headerSearch.addEventListener('input', () => {
-      sidebarSearch.value = headerSearch.value;
-      sidebarSearch.dispatchEvent(new Event('input'));
-    });
-  }
-})();

package/static/css/app-shell.css

@@ -1,419 +0,0 @@
-/* ============================================================
-   App shell — IDE-modern density patterns
-   Consumed by landing, ui_kits/*, docs, blog, slides
-   Light default · dark via prefers-color-scheme or [data-theme=dark]
-   ============================================================ */
-
-html, body {
-    background: var(--panel-0);
-    color: var(--panel-text);
-    font-family: var(--ff-mono);
-    font-size: 13px;
-    line-height: 1.5;
-}
-
-.app {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    background: var(--panel-0);
-}
-
-/* Top bar — sticky chrome, elevated via shadow so content doesn't bleed under */
-.app-topbar {
-    position: sticky;
-    top: 0;
-    z-index: 100;
-    height: 40px;
-    background: var(--panel-2);
-    color: var(--panel-text);
-    display: flex;
-    align-items: center;
-    padding: 0 16px;
-    gap: 16px;
-    font-size: 13px;
-    flex-shrink: 0;
-}
-.app-topbar .brand {
-    font-weight: 600;
-    color: var(--panel-text);
-    display: inline-flex;
-    align-items: center;
-}
-.app-topbar .brand .slash { color: var(--panel-text-3); margin: 0 6px; font-weight: 400; }
-.app-topbar nav {
-    display: flex;
-    gap: 2px;
-    margin-left: auto;
-    align-items: center;
-}
-.app-topbar nav a {
-    color: var(--panel-text-2);
-    text-decoration: none;
-    padding: 7px 12px;
-    font-size: 13px;
-    border-radius: 6px;
-    line-height: 1;
-}
-.app-topbar nav a:hover { background: var(--panel-hover); color: var(--panel-text); }
-.app-topbar nav a.active { color: var(--panel-accent-fg); background: var(--panel-accent); }
-
-/* Breadcrumb — under topbar */
-.app-crumb {
-    position: sticky;
-    top: 40px;
-    z-index: 99;
-    background: var(--panel-1);
-    padding: 8px 20px;
-    font-family: var(--ff-mono);
-    font-size: 12px;
-    color: var(--panel-text-2);
-    display: flex;
-    gap: 6px;
-    align-items: center;
-    flex-shrink: 0;
-}
-.app-crumb .sep { color: var(--panel-text-3); }
-.app-crumb .leaf { color: var(--panel-text); }
-
-/* Shell body — optional sidebar + main */
-.app-body {
-    display: grid;
-    grid-template-columns: 240px 1fr;
-    flex: 1;
-    min-height: 0;
-    background: var(--panel-0);
-}
-.app-body.no-side { grid-template-columns: 1fr; }
-
-/* Sidebar */
-.app-side {
-    background: var(--panel-1);
-    padding: 12px 0;
-    overflow-y: auto;
-}
-.app-side .group {
-    padding: 12px 16px 4px 16px;
-    font-family: var(--ff-mono);
-    font-size: 11px;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    color: var(--panel-text-2);
-    font-weight: 600;
-}
-.app-side a {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 5px 16px 5px 24px;
-    color: var(--panel-text);
-    text-decoration: none;
-    font-size: 13px;
-}
-.app-side a:hover { background: var(--panel-hover); }
-.app-side a.active { background: var(--panel-select); color: var(--panel-text); font-weight: 500; }
-.app-side a .glyph { color: var(--panel-text-2); font-family: var(--ff-mono); width: 14px; flex-shrink: 0; }
-.app-side a.active .glyph { color: var(--panel-accent); }
-
-/* Main content area */
-.app-main {
-    background: var(--panel-0);
-    padding: 24px 32px 64px 32px;
-    overflow-y: auto;
-}
-.app-main.narrow { max-width: 820px; }
-.app-main.centered { margin: 0 auto; }
-
-.app-main h1 {
-    font-size: 28px;
-    font-weight: 600;
-    margin: 4px 0 4px 0;
-    color: var(--panel-text);
-    letter-spacing: -0.01em;
-    line-height: 1.2;
-}
-.app-main h2 {
-    font-size: 18px;
-    font-weight: 600;
-    margin: 32px 0 8px 0;
-    color: var(--panel-text);
-    letter-spacing: -0.005em;
-}
-.app-main h3 {
-    font-family: var(--ff-mono);
-    font-size: 12px;
-    font-weight: 600;
-    margin: 24px 0 8px 0;
-    color: var(--panel-accent);
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-}
-.app-main p {
-    margin: 0 0 12px 0;
-    max-width: 72ch;
-    font-size: 14px;
-    line-height: 1.6;
-    color: var(--panel-text);
-}
-.app-main .lede {
-    font-size: 15px;
-    color: var(--panel-text-2);
-    margin: 0 0 24px 0;
-    max-width: 60ch;
-}
-.app-main a {
-    color: var(--panel-accent);
-    text-decoration: none;
-}
-.app-main a:hover { text-decoration: underline; text-underline-offset: 2px; }
-.app-main code {
-    font-family: var(--ff-mono);
-    font-size: 12px;
-    background: var(--panel-1);
-    padding: 1px 6px;
-    border-radius: 6px;
-    color: var(--panel-text);
-    box-shadow: var(--panel-shadow);
-}
-.app-main pre {
-    background: var(--panel-1);
-    padding: 14px 16px;
-    font-family: var(--ff-mono);
-    font-size: 12px;
-    line-height: 1.6;
-    color: var(--panel-text);
-    overflow-x: auto;
-    margin: 12px 0;
-    border-radius: 8px;
-    box-shadow: var(--panel-shadow);
-}
-.app-main pre code { background: transparent; padding: 0; box-shadow: none; }
-.app-main pre .c { color: var(--panel-text-2); }
-.app-main pre .k { color: var(--panel-accent); }
-.app-main pre .s { color: #ce9178; }
-
-/* Panel — grouped content block, elevated */
-.panel {
-    background: var(--panel-1);
-    border-radius: 8px;
-    overflow: hidden;
-    margin: 12px 0;
-    box-shadow: var(--panel-shadow);
-}
-.panel-head {
-    padding: 10px 16px;
-    background: var(--panel-2);
-    font-family: var(--ff-mono);
-    font-size: 11px;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    color: var(--panel-text-2);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 12px;
-}
-.panel-body { padding: 0; background: var(--panel-1); }
-
-/* Row — dense list item */
-.row {
-    display: grid;
-    grid-template-columns: 80px 1fr auto;
-    gap: 12px;
-    padding: 8px 16px;
-    align-items: baseline;
-    color: var(--panel-text);
-    text-decoration: none;
-    font-size: 13px;
-    cursor: pointer;
-    background: transparent;
-}
-.row:hover { background: var(--panel-hover); }
-.row.active { background: var(--panel-select); }
-.row .code {
-    font-family: var(--ff-mono);
-    font-size: 11px;
-    color: var(--panel-text-2);
-    letter-spacing: 0.04em;
-}
-.row .title { color: var(--panel-text); font-weight: 500; }
-.row .sub { color: var(--panel-text-2); font-size: 12px; margin-left: 8px; font-weight: 400; }
-.row .meta { color: var(--panel-text-2); font-size: 11px; text-align: right; font-family: var(--ff-mono); }
-
-/* CLI install block */
-.cli {
-    display: flex;
-    align-items: stretch;
-    background: var(--panel-1);
-    border-radius: 8px;
-    overflow: hidden;
-    font-family: var(--ff-mono);
-    font-size: 13px;
-    max-width: 640px;
-    margin: 12px 0;
-    box-shadow: var(--panel-shadow);
-}
-.cli .prompt { padding: 10px 14px; color: var(--panel-accent); font-weight: 600; }
-.cli .cmd { flex: 1; padding: 10px 0; color: var(--panel-text); }
-.cli .copy {
-    padding: 0 16px;
-    background: var(--panel-2);
-    color: var(--panel-text-2);
-    cursor: pointer;
-    font-size: 11px;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    display: flex;
-    align-items: center;
-}
-.cli .copy:hover { background: var(--panel-3); color: var(--panel-text); }
-
-/* Buttons */
-.btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 7px 14px;
-    background: var(--panel-2);
-    color: var(--panel-text);
-    font-family: inherit;
-    font-size: 13px;
-    font-weight: 500;
-    border-radius: 6px;
-    cursor: pointer;
-    text-decoration: none;
-    transition: background 80ms ease;
-    box-shadow: var(--panel-shadow);
-}
-.btn:hover { background: var(--panel-3); }
-.btn:active { background: var(--panel-hover); }
-
-.btn-primary {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 7px 14px;
-    background: var(--panel-accent);
-    color: var(--panel-accent-fg);
-    font-family: inherit;
-    font-size: 13px;
-    font-weight: 500;
-    border-radius: 6px;
-    cursor: pointer;
-    text-decoration: none;
-    transition: filter 80ms ease;
-    box-shadow: var(--panel-shadow);
-}
-.btn-primary:hover { filter: brightness(1.08); }
-.btn-primary:active { filter: brightness(0.94); }
-
-.btn-ghost {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 7px 14px;
-    background: transparent;
-    color: var(--panel-text-2);
-    font-family: inherit;
-    font-size: 13px;
-    cursor: pointer;
-    text-decoration: none;
-    border-radius: 6px;
-    transition: background 80ms ease;
-}
-.btn-ghost:hover { background: var(--panel-hover); color: var(--panel-text); }
-
-/* Tag / chip */
-.chip {
-    display: inline-flex;
-    align-items: center;
-    padding: 2px 8px;
-    border-radius: 6px;
-    font-family: var(--ff-mono);
-    font-size: 11px;
-    font-weight: 500;
-    background: var(--panel-2);
-    color: var(--panel-text);
-}
-.chip.accent { background: var(--panel-accent); color: var(--panel-accent-fg); }
-.chip.dim { color: var(--panel-text-2); background: var(--panel-1); }
-
-/* Status bar — accent-colored footer */
-.app-status {
-    height: 24px;
-    background: var(--panel-accent);
-    color: var(--panel-accent-fg);
-    display: flex;
-    align-items: center;
-    padding: 0 14px;
-    gap: 14px;
-    font-family: var(--ff-mono);
-    font-size: 11px;
-    flex-shrink: 0;
-}
-.app-status .spread { flex: 1; }
-.app-status .item { display: flex; align-items: center; gap: 4px; }
-.app-status a { color: var(--panel-accent-fg); text-decoration: none; }
-
-/* Key-value table */
-.kv {
-    width: 100%;
-    max-width: 640px;
-    background: var(--panel-1);
-    border-radius: 8px;
-    overflow: hidden;
-    border-collapse: collapse;
-    box-shadow: var(--panel-shadow);
-    margin: 12px 0;
-}
-.kv td { padding: 8px 16px; font-size: 13px; }
-.kv tr:nth-child(even) { background: var(--panel-2); }
-.kv td:first-child {
-    color: var(--panel-text-2);
-    font-family: var(--ff-mono);
-    font-size: 11px;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    width: 160px;
-}
-.kv td:last-child { color: var(--panel-text); }
-
-/* Card grid — landing index */
-.cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-    gap: 8px;
-    margin: 12px 0 24px 0;
-}
-.card-item {
-    display: grid;
-    grid-template-columns: 44px 1fr;
-    gap: 10px;
-    padding: 14px 16px;
-    background: var(--panel-1);
-    color: var(--panel-text);
-    text-decoration: none;
-    align-items: baseline;
-    border-radius: 8px;
-    box-shadow: var(--panel-shadow);
-    transition: background 80ms ease, transform 80ms ease;
-}
-.card-item:hover { background: var(--panel-hover); transform: translateY(-1px); }
-.card-item .code {
-    font-family: var(--ff-mono);
-    font-size: 11px;
-    color: var(--panel-accent);
-    letter-spacing: 0.04em;
-    font-weight: 600;
-}
-.card-item .name {
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--panel-text);
-}
-
-/* Scrollbars */
-::-webkit-scrollbar { width: 10px; height: 10px; }
-::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 5px; }
-::-webkit-scrollbar-thumb:hover { background: var(--panel-hover); }
-::-webkit-scrollbar-track { background: transparent; }