@andorra-labs/code 0.0.0-stage → 0.1.5

package/dist/src/browser-ui/app.js

@@ -0,0 +1,419 @@
+'use strict';
+(() => {
+  const $ = id => document.getElementById(id);
+  const fragment = new URLSearchParams(location.hash.slice(1));
+  let token = fragment.get('token') || sessionStorage.getItem('andorra-browser-token') || '';
+  if (token) sessionStorage.setItem('andorra-browser-token', token);
+  if (location.hash) history.replaceState(null, '', location.pathname + location.search);
+  let state = { sessions: [], settings: { maxAgeDays: 30 } };
+  let selectedId = sessionStorage.getItem('andorra-browser-session');
+  let busy = false, conversationKey = '', pendingKey = '', projectKey = '';
+  let globalErrorSource = null;
+  let refreshGeneration = 0;
+  const drafts = new Map();
+  const submittingSessions = new Set();
+  const cancellingSessions = new Set();
+  const answeringSessions = new Set();
+  const systemTheme = matchMedia('(prefers-color-scheme: dark)');
+  let appearance = localStorage.getItem('andorra-browser-theme') || 'system';
+  function applyTheme() {
+    const dark = appearance === 'dark' || (appearance === 'system' && systemTheme.matches);
+    document.documentElement.dataset.theme = dark ? 'dark' : 'light';
+    $('theme').setAttribute('aria-label', `Switch to ${dark ? 'light' : 'dark'} theme`);
+  }
+  applyTheme(); systemTheme.addEventListener('change', applyTheme);
+  function element(tag, className, value) { const el = document.createElement(tag); if (className) el.className = className; if (value !== undefined) el.textContent = String(value); return el; }
+  function text(value) { return typeof value === 'string' ? value : value == null ? '' : JSON.stringify(value, null, 2); }
+  function error(value, id = 'error', source = 'action') {
+    if (id === 'error') globalErrorSource = value ? source : null;
+    $(id).textContent = value || ''; $(id).hidden = !value;
+  }
+  function current() { return state.sessions.find(s => s.id === selectedId); }
+  function running(s) { return ['running', 'cancelling', 'waiting', 'awaiting_input', 'awaiting-input'].includes(s?.status) || !!s?.pending; }
+  async function api(path, body) {
+    const res = await fetch(path, { method: body === undefined ? 'GET' : 'POST', headers: { Authorization: `Bearer ${token}`, ...(body === undefined ? {} : { 'Content-Type': 'application/json' }) }, ...(body === undefined ? {} : { body: JSON.stringify(body) }), cache: 'no-store' });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) throw new Error(data.error || `Request failed (${res.status})`);
+    return data;
+  }
+  async function action(path, body, errorId = 'error', sessionId) {
+    if (sessionId ? submittingSessions.has(sessionId) : busy) return false;
+    if (sessionId) submittingSessions.add(sessionId); else busy = true;
+    error(''); error('', errorId); renderControls();
+    try { await api(path, body); await refresh(); return true; }
+    catch (e) { error(e.message, errorId); return false; }
+    finally { if (sessionId) submittingSessions.delete(sessionId); else busy = false; renderControls(); }
+  }
+  async function cancelSession(s) {
+    if (!running(s) || s.status === 'cancelling' || cancellingSessions.has(s.id)) return;
+    // Prompt acceptance can remain in flight during startup. Cancellation must
+    // not share its busy lock or release that lock when the cancel request ends.
+    cancellingSessions.add(s.id); error(''); renderControls();
+    try { await api(`/api/sessions/${encodeURIComponent(s.id)}/cancel`, {}); await refresh(); }
+    catch (e) { error(e.message); }
+    finally { cancellingSessions.delete(s.id); renderControls(); }
+  }
+  async function answerSession(s, pending, value) {
+    if (answeringSessions.has(s.id)) return;
+    // Another session's prompt acceptance must not block a runtime question or
+    // approval. Keep this guard separate so answers cannot release prompt busy.
+    answeringSessions.add(s.id); error(''); renderControls();
+    try { await api(`/api/sessions/${encodeURIComponent(s.id)}/answer`, { id: pending.id, answer: value }); await refresh(); }
+    catch (e) { error(e.message); }
+    finally { answeringSessions.delete(s.id); renderControls(); }
+  }
+  function age(time) { const ms = Date.now() - new Date(time).getTime(); if (!Number.isFinite(ms)) return ''; const n = Math.max(0, Math.floor(ms / 60000)); return n < 1 ? 'now' : n < 60 ? `${n}m` : n < 1440 ? `${Math.floor(n / 60)}h` : `${Math.floor(n / 1440)}d`; }
+  function folder(workspace) { return String(workspace || 'Project').replace(/[\\/]+$/, '').split(/[\\/]/).pop(); }
+  function archived(s) { return s?.archived === true; }
+  // Which projects have their Archived group open; local to this tab, like the desktop rail's.
+  const archivedOpen = new Set();
+  function select(id) {
+    if (selectedId) drafts.set(selectedId, $('prompt').value);
+    selectedId = id;
+    if (id) sessionStorage.setItem('andorra-browser-session', id);
+    else sessionStorage.removeItem('andorra-browser-session');
+    $('prompt').value = drafts.get(id) || ''; conversationKey = ''; pendingKey = ''; projectKey = ''; render();
+  }
+  function renderProjects() {
+    const needle = $('search').value.trim().toLowerCase();
+    const maxAge = Number(state.settings?.maxAgeDays || 0);
+    const sessions = [...state.sessions].filter(s => (running(s) || !maxAge || Date.now() - new Date(s.updatedAt).getTime() <= maxAge * 86400000) && `${s.name} ${s.workspace}`.toLowerCase().includes(needle)).sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt));
+    const key = JSON.stringify(sessions.map(s => [s.id, s.name, s.workspace, s.projectId, s.updatedAt, s.status, !!s.pending, !!s.archived])) + selectedId + [...archivedOpen];
+    if (projectKey === key) return; projectKey = key;
+    const groups = new Map();
+    // Group by the server's opaque project identity: redacted display paths
+    // can collide across distinct workspaces and must not merge projects.
+    for (const s of sessions) { const project = s.projectId || s.workspace; const list = groups.get(project) || []; list.push(s); groups.set(project, list); }
+    $('projects').replaceChildren(); $('session-count').textContent = String(sessions.filter(s => !archived(s)).length);
+    const sessionRow = s => {
+      const row = element('button', `session-row${s.id === selectedId ? ' active' : ''}`); row.setAttribute('aria-current', s.id === selectedId ? 'page' : 'false'); row.title = `${s.name || 'Untitled session'} · ${s.status || 'idle'} · Right-click for actions`;
+      const dot = element('span', `dot${s.pending ? ' waiting' : running(s) ? ' running' : ''}`); dot.setAttribute('aria-hidden', 'true');
+      const timestamp = element('time', '', age(s.updatedAt)); timestamp.dateTime = s.updatedAt || ''; row.append(dot, element('span', 'name', s.name || 'Untitled session'), timestamp); row.onclick = () => select(s.id);
+      // From the keyboard the menu opens under the row: the menu key and Shift+F10 are taken here, and a
+      // contextmenu event a browser raises for them anyway arrives at (0, 0).
+      const atRow = () => { const box = row.getBoundingClientRect(); openMenu(s, box.left + 24, box.bottom, row); };
+      row.oncontextmenu = e => { e.preventDefault(); if (!e.clientX && !e.clientY) atRow(); else openMenu(s, e.clientX, e.clientY, row); };
+      row.onkeydown = e => { if (e.key === 'ContextMenu' || (e.shiftKey && e.key === 'F10')) { e.preventDefault(); atRow(); } };
+      return row;
+    };
+    for (const [project, list] of groups) {
+      const workspace = list[0].workspace;
+      const group = element('section', 'project'); const heading = element('div', 'project-header');
+      const name = element('span', 'project-name', `▱ ${folder(workspace)}`); name.title = workspace;
+      const add = element('button', '', '+'); add.title = `New session in ${workspace}`; add.setAttribute('aria-label', add.title); add.onclick = () => createSession(undefined, list[0].id);
+      heading.append(name, add); group.append(heading);
+      // Archived sessions leave the working list for a collapsed group under their project, as on the desktop rail.
+      const filed = list.filter(s => archived(s) && !running(s));
+      for (const s of list) if (!filed.includes(s)) group.append(sessionRow(s));
+      if (filed.length) {
+        const disclosure = element('details', 'archived-group'); disclosure.open = archivedOpen.has(project) || filed.some(s => s.id === selectedId);
+        disclosure.append(element('summary', '', `Archived (${filed.length})`), ...filed.map(sessionRow));
+        disclosure.ontoggle = () => { if (disclosure.open) archivedOpen.add(project); else archivedOpen.delete(project); };
+        group.append(disclosure);
+      }
+      $('projects').append(group);
+    }
+    if (!sessions.length) $('projects').append(element('p', 'empty-projects', state.sessions.length ? 'No sessions match your search or history setting.' : 'Your CLI sessions will appear here. Open a project to start a new one.'));
+  }
+  function message(role, value, target = $('conversation')) {
+    if (!value) return;
+    const item = element('article', `message ${role}`); item.append(element('div', 'message-label', role === 'user' ? 'You' : 'Andorra'), element('div', 'body', value)); target.append(item);
+  }
+  function renderConversation(s) {
+    const key = JSON.stringify([s?.id, s?.history, s?.events, s?.status, s?.prompt]);
+    if (key === conversationKey) return; conversationKey = key;
+    const container = $('conversation'); const atBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 100;
+    const open = new Set([...container.querySelectorAll('details[open]')].map(d => d.dataset.key));
+    const oldScroll = container.scrollTop; container.replaceChildren();
+    if (!s) { const welcome = element('div', 'welcome'); welcome.append(element('span', 'welcome-mark', 'A'), element('h1', '', 'A place for your work'), element('p', '', 'Select a session or open a project to start.')); container.append(welcome); return; }
+    const events = s.events || [];
+    const completionSummaries = new Set((s.history || []).map(turn => text(turn.completion?.summary || turn.outcome?.completion?.summary || turn.outcome?.summary || (typeof turn.outcome === 'string' ? turn.outcome : ''))).filter(Boolean));
+    const tools = new Map();
+    const activities = new Map();
+    const runKeys = events.map(event => String(event.data?.runId || 'session'));
+    const lastRunKey = runKeys.at(-1);
+    for (let i = 0; i < events.length; i++) {
+      const event = events[i], data = event.data || {};
+      if (/reasoning|thinking/i.test(event.type)) continue;
+      const visible = ['browser.notice', 'node.tool.started', 'node.tool.completed', 'node.tool.failed', 'node.model.response', 'agent.message', 'node.assistant.message', 'assistant.message', 'agent.assistant.text'].includes(event.type) || /text.*delta|delta.*text|failed|error|retry|subagent\.(started|completed)|graph.node.started/.test(event.type);
+      if (!visible) continue;
+      const runKey = runKeys[i];
+      if (['node.model.response', 'agent.message', 'node.assistant.message', 'assistant.message', 'agent.assistant.text'].includes(event.type) && completionSummaries.has(text(data.text || data.content))) { const existing = activities.get(runKey); if (existing) existing.stream = ''; continue; }
+      let group = activities.get(runKey);
+      if (!group) {
+        const disclosure = element('details', 'run-activity'); disclosure.dataset.key = `run-${runKey}`; disclosure.open = open.has(disclosure.dataset.key) || (running(s) && runKey === lastRunKey);
+        const stamp = event.time ? new Date(event.time).toLocaleString() : '';
+        disclosure.append(element('summary', '', `${runKey === 'session' ? 'Session' : 'Run'} activity${stamp ? ` · ${stamp}` : ''}`));
+        const body = element('div', 'activity-body'); disclosure.append(body); group = { disclosure, body, stream: '' }; activities.set(runKey, group);
+      }
+      const activity = group.body;
+      if (event.type === 'node.tool.started' || event.type === 'node.tool.completed' || event.type === 'node.tool.failed') {
+        // Providers can reuse call IDs in each response, including within one invocation.
+        const key = JSON.stringify([runKey, data.invocationId ?? null, data.modelTurn ?? null, data.nodeId ?? null, data.copy ?? null, data.subagentId ?? null,
+          data.toolCallId ? ['call', String(data.toolCallId)] : ['event', i]]);
+        let detail = tools.get(key);
+        if (!detail) { detail = element('details', 'tool-event'); detail.dataset.key = key; detail.open = open.has(key); detail.append(element('summary'), element('pre')); tools.set(key, detail); activity.append(detail); }
+        detail.classList.toggle('failed', event.type === 'node.tool.failed');
+        detail.querySelector('summary').textContent = `${data.name || 'Tool'} · ${event.type.split('.').pop()}${Number.isFinite(data.durationMs) ? ` · ${(data.durationMs / 1000).toFixed(1)}s` : ''}`;
+        const pre = detail.querySelector('pre'); pre.textContent = `${data.arguments ? `${text(data.arguments)}\n` : pre.dataset.arguments || ''}${text(data.output)}`; if (data.arguments) pre.dataset.arguments = `${text(data.arguments)}\n`;
+      } else if (/text.*delta|delta.*text/.test(event.type)) { group.stream += text(data.delta || data.text); }
+      else if (event.type === 'browser.notice') activity.append(element('div', 'event-note', text(data.message)));
+      else if (event.type === 'node.model.response' || event.type === 'agent.message' || event.type === 'node.assistant.message' || event.type === 'assistant.message' || event.type === 'agent.assistant.text') { if (data.text || data.content) { const value = text(data.text || data.content); if (!completionSummaries.has(value)) message('assistant', value, activity); group.stream = ''; } }
+      else if (/failed|error|retry|subagent\.(started|completed)|graph.node.started/.test(event.type)) activity.append(element('div', 'event-note', text(data.reason || data.message || data.nodeName || `${event.type.replaceAll('.', ' ')}${data.role ? ` · ${data.role}` : ''}`)));
+    }
+    for (const group of activities.values()) if (group.stream && !completionSummaries.has(group.stream)) message('assistant', group.stream, group.body);
+    // Associate each run's activity with its saved turn rather than replaying all
+    // telemetry after all responses. Old records keep an explicitly separate group.
+    for (const turn of s.history || []) {
+      // A continued turn leads with the direction the user sent after the stop, as the desktop timeline does.
+      message('user', text(turn.direction || turn.task || turn.prompt));
+      const group = turn.runId && activities.get(String(turn.runId));
+      if (group) { container.append(group.disclosure); activities.delete(String(turn.runId)); }
+      const outcome = turn.outcome;
+      const completion = turn.completion || outcome?.completion;
+      const summary = text(completion?.summary) || (typeof outcome === 'string' ? outcome : text(outcome?.summary || outcome?.reason));
+      const tests = Array.isArray(completion?.tests) ? completion.tests : [];
+      message('assistant', [summary, tests.length ? `Tests\n${tests.map(result => `- ${text(result)}`).join('\n')}` : ''].filter(Boolean).join('\n\n'));
+    }
+    if (s.prompt) {
+      message('user', s.prompt);
+      for (const [runKey, group] of activities) {
+        if (runKey !== 'session' && runKey === lastRunKey) { container.append(group.disclosure); activities.delete(runKey); }
+      }
+    }
+    for (const group of activities.values()) {
+      const summary = group.disclosure.querySelector('summary');
+      summary.textContent = summary.textContent.replace(/^(Run|Session) activity/, 'Legacy/session activity');
+      container.append(group.disclosure);
+    }
+    if (!container.childElementCount) container.append(element('p', 'muted', 'This session is ready. Send a prompt to begin.'));
+    if (running(s)) container.append(element('div', 'event-note', s.pending ? 'Waiting for your input…' : 'Andorra is working…'));
+    container.scrollTop = atBottom ? container.scrollHeight : oldScroll;
+  }
+  function renderPending(s) {
+    const pending = s?.pending; const key = JSON.stringify([s?.id, pending]);
+    if (key === pendingKey) return; pendingKey = key;
+    const panel = $('pending'); panel.hidden = !pending; panel.replaceChildren(); if (!pending) return;
+    panel.append(element('h3', '', pending.kind === 'approval' ? 'Approval needed' : 'Andorra needs your input'), element('p', '', pending.question || pending.message));
+    const form = element('form');
+    const answer = async value => answerSession(s, pending, value);
+    if (pending.kind === 'approval') {
+      // Render complete sanitized arguments as text before adding approval controls.
+      // A separate scrollable region keeps long commands and patches inspectable.
+      if (pending.approvalDetails) panel.append(element('pre', 'approval-details', JSON.stringify(pending.approvalDetails, null, 2)));
+      const missingDetails = pending.approvalDetailsRequired && !pending.approvalDetails;
+      if (missingDetails) panel.append(element('p', 'muted', 'Approval details are unavailable. Deny or inspect this request in the terminal.'));
+      const deny = element('button', '', 'Deny'); deny.type = 'button'; deny.onclick = () => answer('deny');
+      const allow = element('button', 'primary', 'Approve'); allow.type = 'button'; allow.approvalUnavailable = missingDetails; allow.disabled = missingDetails; allow.onclick = () => { if (!missingDetails) return answer('approve'); }; form.append(deny, allow);
+    } else {
+      for (const choice of pending.choices || []) { const btn = element('button', '', typeof choice === 'string' ? choice : choice.label); btn.type = 'button'; btn.onclick = () => answer(typeof choice === 'string' ? choice : choice.id); form.append(btn); }
+      if (!pending.choices?.length) { const input = element('input'); input.required = true; input.placeholder = 'Your answer…'; input.setAttribute('aria-label', 'Your answer'); const send = element('button', 'primary', 'Answer'); send.type = 'submit'; form.append(input, send); form.onsubmit = e => { e.preventDefault(); answer(input.value.trim()); }; }
+    }
+    panel.append(form);
+  }
+  function renderControls() {
+    const s = current(), active = running(s);
+    $('send').disabled = submittingSessions.has(s?.id) || !s || !token || s.status === 'cancelling' || cancellingSessions.has(s.id) || ! $('prompt').value.trim(); $('send').textContent = active ? 'Steer ↑' : 'Send ↑';
+    $('cancel').hidden = !active; $('cancel').disabled = !token || s?.status === 'cancelling' || cancellingSessions.has(s?.id);
+    $('prompt').disabled = !s; $('prompt').placeholder = active ? 'Add direction to the current run…' : 'Ask Andorra to work on your project…';
+    $('new-session').disabled = busy || !token;
+    for (const control of $('pending').querySelectorAll('button, input')) control.disabled = !token || answeringSessions.has(s?.id) || !!control.approvalUnavailable;
+  }
+  function render() {
+    const s = current(); renderProjects(); renderConversation(s); renderPending(s); renderControls();
+    $('session-title').textContent = s?.name || 'Your workspace'; $('workspace-path').textContent = s?.workspace || ''; $('workspace-path').title = s?.workspace || '';
+    $('run-status').textContent = s?.pending ? 'Input needed' : s?.status || 'Ready';
+    const todos = s?.todos || []; $('todos').replaceChildren();
+    for (const todo of todos) { const status = todo.status || 'pending'; const row = element('li', status); row.append(element('span', 'todo-marker', status === 'completed' ? '✓' : status === 'in_progress' ? '◉' : '○'), element('span', '', todo.content || todo.text || todo.title)); $('todos').append(row); }
+    $('todo-count').textContent = `${todos.filter(t => t.status === 'completed').length}/${todos.length}`; $('progress-empty').hidden = !!todos.length;
+    $('run-details').textContent = s ? `${s.provider || ''}${s.model ? ` · ${s.model}` : ''}${s.updatedAt ? `\nLast activity ${new Date(s.updatedAt).toLocaleString()}` : ''}`.trim() : '';
+  }
+  async function refresh() {
+    const generation = ++refreshGeneration;
+    try {
+      const nextState = await api('/api/state');
+      // Polls can overlap refreshes after actions. A superseded response must
+      // not restore stale questions, settings, session selection or errors.
+      if (generation !== refreshGeneration) return;
+      state = nextState; state.sessions ||= []; if (['system', 'light', 'dark'].includes(state.settings?.theme)) { appearance = state.settings.theme; localStorage.setItem('andorra-browser-theme', appearance); applyTheme(); } if (!state.sessions.some(s => s.id === selectedId)) select((state.sessions.find(s => !archived(s)) || state.sessions[0])?.id); $('connection').textContent = '● Connected locally'; render(); if (globalErrorSource === 'poll') error('');
+    }
+    catch (e) { if (generation !== refreshGeneration) return; $('connection').textContent = '○ Disconnected'; if (globalErrorSource !== 'action') error(`${e.message}. ${token ? 'Check that the CLI browser server is still running.' : 'Launch /browser in the CLI to open an authenticated workspace.'}`, 'error', 'poll'); }
+  }
+  async function createSession(workspace, projectSessionId) {
+    if (busy) return; busy = true; error(''); error('', 'new-error'); renderControls();
+    try {
+      // The 201 response is the commitment: the session exists once created.
+      // Close and select before reconciling, so a transient refresh failure
+      // cannot present creation as failed and invite a duplicate retry.
+      const result = await api('/api/sessions', projectSessionId ? { projectSessionId } : { workspace }); const id = result.id || result.session?.id; if (id) select(id); $('new-dialog').close();
+      await refresh();
+    }
+    catch (e) { error(e.message, $('new-dialog').open ? 'new-error' : 'error'); }
+    finally { busy = false; renderControls(); }
+  }
+  $('composer').onsubmit = async e => {
+    e.preventDefault();
+    const s = current(), submittedDraft = $('prompt').value, value = submittedDraft.trim();
+    if (!s || !value || s.status === 'cancelling' || cancellingSessions.has(s.id)) return;
+    if (await action(`/api/sessions/${encodeURIComponent(s.id)}/${running(s) ? 'steer' : 'prompt'}`, { text: value }, 'error', s.id)) {
+      // Acceptance may finish after more typing or navigation. Clear only the
+      // submitted draft, comparing the raw text so whitespace edits survive too.
+      const latestDraft = selectedId === s.id ? $('prompt').value : drafts.get(s.id);
+      if (latestDraft === submittedDraft) {
+        drafts.delete(s.id);
+        if (selectedId === s.id) $('prompt').value = '';
+      }
+      renderControls();
+    }
+  };
+  $('prompt').oninput = renderControls;
+  $('prompt').onkeydown = e => { if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) { e.preventDefault(); if (!$('send').disabled) $('composer').requestSubmit(); } };
+  $('cancel').onclick = () => { const s = current(); if (s) return cancelSession(s); };
+  $('search').oninput = renderProjects;
+  $('new-session').onclick = () => { error('', 'new-error'); $('new-workspace').value = ''; $('new-dialog').showModal(); };
+  $('new-form').onsubmit = e => { e.preventDefault(); createSession($('new-workspace').value.trim()); };
+  $('settings').onclick = () => { error('', 'settings-error'); $('max-age').value = state.settings?.maxAgeDays ?? 30; $('theme-setting').value = appearance; $('settings-dialog').showModal(); };
+  $('settings-form').onsubmit = async e => { e.preventDefault(); if (await action('/api/settings', { maxAgeDays: Number($('max-age').value), theme: $('theme-setting').value }, 'settings-error')) $('settings-dialog').close(); };
+  $('theme').onclick = () => action('/api/settings', { maxAgeDays: state.settings?.maxAgeDays ?? 30, theme: document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark' });
+  let toastTimer;
+  function toast(value) { clearTimeout(toastTimer); $('toast').textContent = value; $('toast').hidden = false; toastTimer = setTimeout(() => { $('toast').hidden = true; }, 2500); }
+  // The session menu: the desktop rail's right-click actions. It belongs to a session id, not a row, because
+  // the sidebar re-renders on every poll that changes it.
+  let menu = null;
+  function closeMenu(restoreFocus = true) {
+    if (!menu) return; const { el, opener } = menu; menu = null; el.remove();
+    if (restoreFocus && opener?.isConnected) opener.focus();
+  }
+  function openMenu(s, x, y, opener) {
+    closeMenu(false);
+    // A run saves the record it started from, so it would undo a rename, a filing or a delete made under it.
+    const locked = running(s);
+    const items = [
+      ['Open', () => select(s.id)],
+      ['Rename…', () => openRename(s), locked],
+      ['View trajectory', () => openTrajectory(s)],
+      [archived(s) ? 'Unarchive' : 'Archive', () => setArchived(s, !archived(s)), locked],
+      ['Copy session ID', () => navigator.clipboard.writeText(s.id).then(() => toast('Session ID copied'), () => error('Copying needs clipboard permission in this browser.'))],
+      null,
+      ['Delete…', () => openDelete(s), locked, 'danger'],
+    ];
+    const el = element('div', 'context-menu'); el.setAttribute('role', 'menu'); el.setAttribute('aria-label', `${s.name || 'Untitled session'} actions`);
+    for (const item of items) {
+      if (!item) { const rule = element('div', 'menu-separator'); rule.setAttribute('role', 'separator'); el.append(rule); continue; }
+      const [label, run, disabled, kind] = item;
+      const button = element('button', `menu-item${kind ? ` ${kind}` : ''}`, label); button.type = 'button'; button.tabIndex = -1; button.setAttribute('role', 'menuitem');
+      if (disabled) { button.disabled = true; button.title = 'Stop the run first'; }
+      button.onclick = () => { closeMenu(); run(); };
+      el.append(button);
+    }
+    el.onkeydown = e => {
+      const enabled = [...el.querySelectorAll('.menu-item:not(:disabled)')]; const at = enabled.indexOf(document.activeElement);
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); enabled[(at + (e.key === 'ArrowDown' ? 1 : enabled.length - 1)) % enabled.length]?.focus(); }
+      else if (e.key === 'Home' || e.key === 'End') { e.preventDefault(); enabled[e.key === 'Home' ? 0 : enabled.length - 1]?.focus(); }
+      else if (e.key === 'Escape') { e.preventDefault(); closeMenu(); }
+      else if (e.key === 'Tab') closeMenu(false);
+    };
+    el.oncontextmenu = e => e.preventDefault();
+    document.body.append(el);
+    const box = el.getBoundingClientRect();
+    el.style.left = `${Math.max(8, Math.min(x, innerWidth - box.width - 8))}px`; el.style.top = `${Math.max(8, Math.min(y, innerHeight - box.height - 8))}px`;
+    menu = { el, opener };
+    el.querySelector('.menu-item:not(:disabled)')?.focus();
+  }
+  document.addEventListener('pointerdown', e => { if (menu && !menu.el.contains(e.target)) closeMenu(false); }, true);
+  addEventListener('blur', () => closeMenu(false)); addEventListener('resize', () => closeMenu(false));
+  $('projects').addEventListener('scroll', () => closeMenu(false));
+  let renaming = null, deleting = null;
+  function openRename(s) { renaming = s.id; error('', 'rename-error'); $('rename-name').value = s.name || ''; $('rename-dialog').showModal(); $('rename-name').select(); }
+  $('rename-form').onsubmit = async e => {
+    e.preventDefault(); const name = $('rename-name').value.trim(); if (!renaming || !name) return;
+    if (await action(`/api/sessions/${encodeURIComponent(renaming)}/rename`, { name }, 'rename-error')) $('rename-dialog').close();
+  };
+  async function setArchived(s, value) {
+    if (await action(`/api/sessions/${encodeURIComponent(s.id)}/archive`, { archived: value })) toast(`${value ? 'Archived' : 'Restored'} “${s.name || 'Untitled session'}”`);
+  }
+  function openDelete(s) {
+    deleting = s; error('', 'delete-error');
+    $('delete-text').textContent = `Delete “${s.name || 'Untitled session'}”? Its saved conversation is removed from this computer. Its trajectory log is kept.`;
+    $('delete-dialog').showModal(); $('delete-form').querySelector('footer [data-close]').focus();
+  }
+  $('delete-form').onsubmit = async e => {
+    e.preventDefault(); const s = deleting; if (!s) return;
+    if (await action(`/api/sessions/${encodeURIComponent(s.id)}/delete`, {}, 'delete-error')) { $('delete-dialog').close(); drafts.delete(s.id); toast(`Deleted “${s.name || 'Untitled session'}”`); }
+  };
+  // The trajectory panel: one page of the session's log at a time, each record a line that opens to its JSON.
+  // Runtime events this page's runs recorded; the engine's model calls, from the desktop or this page; a terminal's own log.
+  const logLabels = { browser: 'Browser events', engine: 'Engine log', terminal: 'Terminal log' };
+  let trajectory = null, trajectoryGeneration = 0;
+  function recordSummary(record) {
+    const data = record.data || {}, event = data.event || {}, detail = event.data || {};
+    if (data.oversized) return [record.type, `${Math.round(data.bytes / 1024)} KB — too large to show here; download the log to read it`];
+    const kind = record.type === 'runtime.event' ? event.type || 'event' : record.type;
+    const duration = Number.isFinite(data.durationMs) ? ` · ${(data.durationMs / 1000).toFixed(1)}s` : '';
+    const first = [data.task, detail.name, detail.nodeName, detail.message, detail.reason, detail.text, detail.content, data.model && `${data.model}${duration}`, data.status, data.error?.message || data.error]
+      .find(value => typeof value === 'string' && value.trim());
+    return [kind, first ? first.trim().split('\n')[0].slice(0, 200) : ''];
+  }
+  function renderRecords(records) {
+    for (const record of records) {
+      const [kind, detail] = recordSummary(record);
+      const item = element('li'); const disclosure = element('details'); const summary = element('summary');
+      const time = element('time', '', record.time ? new Date(record.time).toLocaleTimeString() : ''); time.dateTime = record.time || '';
+      summary.append(time, element('span', 'record-kind', kind), element('span', 'record-detail', detail));
+      const pre = element('pre');
+      // Model requests repeat the whole conversation; format a record only when it is opened.
+      disclosure.ontoggle = () => { if (disclosure.open && !pre.textContent) pre.textContent = JSON.stringify(record.data, null, 2); };
+      disclosure.append(summary, pre); item.append(disclosure); $('trajectory-records').append(item);
+    }
+  }
+  async function loadTrajectory(source, offset = 0) {
+    const t = trajectory; if (!t) return; const generation = ++trajectoryGeneration;
+    error('', 'trajectory-error'); $('trajectory-more').disabled = true;
+    try {
+      const query = new URLSearchParams({ offset: String(offset), ...(source ? { source } : {}) });
+      const result = await api(`/api/sessions/${encodeURIComponent(t.id)}/trajectory?${query}`);
+      if (generation !== trajectoryGeneration || trajectory !== t) return;
+      if (!offset) $('trajectory-records').replaceChildren();
+      t.source = result.source; t.page = result.page; t.loaded = (offset ? t.loaded : 0) + (result.page?.count || 0);
+      $('trajectory-sources').replaceChildren(...(result.sources.length > 1 ? result.sources.map(name => {
+        const button = element('button', '', logLabels[name] || name); button.type = 'button'; button.setAttribute('aria-pressed', String(name === result.source));
+        button.onclick = () => { if (name !== t.source) loadTrajectory(name); }; return button;
+      }) : []));
+      renderRecords(result.page?.records || []);
+      const page = result.page;
+      $('trajectory-meta').textContent = page ? `${logLabels[result.source] || result.source} · ${t.loaded} of ${page.total}${page.truncated ? '+' : ''} records` : '';
+      $('trajectory-empty').hidden = !!page?.count || offset > 0; $('trajectory-empty').textContent = page ? 'This log has no records.' : 'No trajectory has been recorded for this session yet.';
+      $('trajectory-download').disabled = !page; $('trajectory-more').hidden = !page?.hasMore;
+    }
+    catch (e) { if (generation === trajectoryGeneration) error(e.message, 'trajectory-error'); }
+    finally { if (generation === trajectoryGeneration) $('trajectory-more').disabled = false; }
+  }
+  function openTrajectory(s) {
+    trajectory = { id: s.id, name: s.name || 'Untitled session', loaded: 0 };
+    $('trajectory-title').textContent = `Trajectory · ${trajectory.name}`; $('trajectory-meta').textContent = 'Loading…';
+    $('trajectory-records').replaceChildren(); $('trajectory-sources').replaceChildren(); $('trajectory-empty').hidden = true; $('trajectory-more').hidden = true; $('trajectory-download').disabled = true;
+    $('trajectory-dialog').showModal(); loadTrajectory();
+  }
+  $('trajectory-more').onclick = () => { const t = trajectory; if (t?.page?.hasMore) loadTrajectory(t.source, t.page.nextOffset); };
+  $('trajectory-dialog').addEventListener('close', () => { trajectory = null; trajectoryGeneration++; });
+  $('trajectory-download').onclick = async () => {
+    const t = trajectory; if (!t?.source) return; error('', 'trajectory-error'); $('trajectory-download').disabled = true;
+    try {
+      // The token travels in a header, so the log is fetched here and handed to the browser as a file.
+      const res = await fetch(`/api/sessions/${encodeURIComponent(t.id)}/trajectory/download?source=${encodeURIComponent(t.source)}`, { headers: { Authorization: `Bearer ${token}` }, cache: 'no-store' });
+      if (!res.ok) throw new Error((await res.json().catch(() => ({}))).error || `Download failed (${res.status})`);
+      const url = URL.createObjectURL(await res.blob()); const link = element('a'); link.href = url; link.download = `${t.id}-${t.source}.jsonl`;
+      document.body.append(link); link.click(); link.remove(); setTimeout(() => URL.revokeObjectURL(url), 60000);
+    }
+    catch (e) { error(e.message, 'trajectory-error'); }
+    finally { $('trajectory-download').disabled = !trajectory?.page; }
+  };
+  function showProgress(show) { $('progress-panel').hidden = !show; $('toggle-progress').setAttribute('aria-expanded', String(show)); }
+  const compactProgress = matchMedia('(max-width: 900px)');
+  showProgress(!compactProgress.matches);
+  compactProgress.addEventListener('change', () => showProgress(!compactProgress.matches));
+  matchMedia('(max-width: 600px)').addEventListener('change', event => { if (event.matches) showProgress(false); });
+  $('toggle-progress').onclick = () => showProgress($('progress-panel').hidden);
+  document.querySelectorAll('[data-close]').forEach(btn => btn.onclick = () => $(btn.dataset.close).close());
+  (async function poll() { await refresh(); setTimeout(poll, document.hidden ? 4000 : 1000); })();
+})();

package/dist/src/browser-ui/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="color-scheme" content="light dark"><title>Andorra Code — Workspace</title><link rel="icon" type="image/png" href="/andorra-logo.png"><link rel="stylesheet" href="/style.css"><script src="/app.js" defer></script></head>
+<body>
+<aside class="sidebar"><header class="brand"><img class="brand-mark" src="/andorra-logo.png" alt=""><div>Andorra Code<small>Workspace</small></div></header><button class="new-session" id="new-session">＋ New session</button><label class="search"><span class="sr-only">Search projects and sessions</span><input id="search" type="search" placeholder="Search sessions…"></label><div class="section-label">Projects <span id="session-count"></span></div><nav id="projects" aria-label="Projects and sessions"></nav><footer class="sidebar-footer"><span id="connection" role="status">Connecting…</span><button id="settings" aria-label="Open settings">⚙ Settings</button></footer></aside>
+<main><header class="topbar"><div class="session-heading"><strong id="session-title">Your workspace</strong><span id="workspace-path"></span></div><span id="run-status" class="badge">Ready</span><button id="toggle-progress" aria-expanded="true" aria-controls="progress-panel">Progress</button><button id="theme" aria-label="Switch to dark theme">◐</button></header><div class="work-area"><section class="chat"><div id="conversation" class="conversation" tabindex="0" aria-label="Conversation"><div class="welcome"><img class="welcome-mark" src="/andorra-logo.png" alt=""><h1>A place for your work</h1><p>Select a session or open a project to start.</p></div></div><section id="pending" class="pending" aria-label="Your input is needed" hidden></section><div class="composer-wrap"><form id="composer" class="composer"><label class="sr-only" for="prompt">Prompt or direction for this session</label><textarea id="prompt" placeholder="Ask Andorra to work on your project…" rows="3"></textarea><div class="composer-footer"><span id="composer-hint">Enter to send · Shift+Enter for a new line</span><div><button id="cancel" type="button" hidden>Stop run</button><button id="send" class="primary" type="submit" disabled>Send ↑</button></div></div></form><div id="error" class="error" role="alert" hidden></div></div></section><aside class="progress-panel" id="progress-panel"><header><strong>Progress</strong><span id="todo-count">0/0</span></header><ol id="todos"></ol><p id="progress-empty" class="muted">The agent’s plan will appear here as it works.</p><div class="run-details" id="run-details"></div></aside></div></main>
+<dialog id="new-dialog"><form id="new-form"><header><h2>Open a project</h2><button type="button" data-close="new-dialog" aria-label="Close">×</button></header><p>Create a session in a folder on this computer. Existing CLI projects appear automatically.</p><label>Project folder<input id="new-workspace" required placeholder="C:\Users\you\projects\my-project" autocomplete="off"></label><div id="new-error" class="error" role="alert" hidden></div><footer><button type="button" data-close="new-dialog">Cancel</button><button type="submit" class="primary">Create session</button></footer></form></dialog>
+<dialog id="settings-dialog"><form id="settings-form"><header><h2>Workspace settings</h2><button type="button" data-close="settings-dialog" aria-label="Close">×</button></header><label for="max-age">Show sessions active in the last</label><input id="max-age" type="number" min="0" max="36500" step="1" required aria-describedby="max-age-help"><span class="muted" id="max-age-help">days. Use 0 to show all history. Hidden sessions remain saved.</span><label for="theme-setting">Appearance</label><select id="theme-setting"><option value="system">System default</option><option value="light">Light</option><option value="dark">Dark</option></select><div id="settings-error" class="error" role="alert" hidden></div><footer><button type="button" data-close="settings-dialog">Cancel</button><button type="submit" class="primary">Save settings</button></footer></form></dialog>
+<dialog id="rename-dialog"><form id="rename-form"><header><h2>Rename session</h2><button type="button" data-close="rename-dialog" aria-label="Close">×</button></header><label for="rename-name">Name</label><input id="rename-name" required maxlength="200" autocomplete="off"><div id="rename-error" class="error" role="alert" hidden></div><footer><button type="button" data-close="rename-dialog">Cancel</button><button type="submit" class="primary">Rename</button></footer></form></dialog>
+<dialog id="delete-dialog"><form id="delete-form"><header><h2>Delete session</h2><button type="button" data-close="delete-dialog" aria-label="Close">×</button></header><p id="delete-text"></p><div id="delete-error" class="error" role="alert" hidden></div><footer><button type="button" data-close="delete-dialog">Cancel</button><button type="submit" class="danger">Delete</button></footer></form></dialog>
+<dialog id="trajectory-dialog" class="trajectory-dialog" aria-labelledby="trajectory-title"><header><div class="trajectory-heading"><h2 id="trajectory-title">Trajectory</h2><span id="trajectory-meta"></span></div><div class="trajectory-actions"><div id="trajectory-sources" role="group" aria-label="Log"></div><button id="trajectory-download" type="button">Download .jsonl</button><button type="button" data-close="trajectory-dialog" aria-label="Close">×</button></div></header><ol id="trajectory-records" class="trajectory-records" aria-label="Trajectory records"></ol><p id="trajectory-empty" class="muted" hidden></p><div id="trajectory-error" class="error" role="alert" hidden></div><footer><button id="trajectory-more" type="button" hidden>Load more</button></footer></dialog>
+<div id="toast" class="toast" role="status" aria-live="polite" hidden></div>
+</body></html>