@logicseek/hello-cc 1.0.1 → 1.0.2

package/lib/web/ui-command-palette.mjs

@@ -0,0 +1,119 @@
+export function filterCommands(commands, query) {
+  const words = String(query || '').toLocaleLowerCase().trim().split(/\s+/).filter(Boolean);
+  return commands.filter(command => {
+    const text = [command.id, command.label, command.detail, command.group, command.keywords].join(' ').toLocaleLowerCase();
+    return words.every(word => text.includes(word));
+  }).slice(0, 80);
+}
+
+// Modified shortcuts only. Plain Ctrl+F/K/P remain available to terminal apps.
+export function shortcutAction(event, { modalOpen = false, paletteOpen = false, terminalAvailable = false } = {}) {
+  if (event.isComposing || event.repeat || event.altKey || !(event.ctrlKey || event.metaKey) || !event.shiftKey) return null;
+  const key = String(event.key || '').toLowerCase();
+  if (key === 'p' && (!modalOpen || paletteOpen)) return 'palette';
+  if (modalOpen) return null;
+  if (key === 'l') return 'sessions';
+  if (key === 'f' && terminalAvailable) return 'terminal-find';
+  return null;
+}
+
+export const commandPaletteCss = `
+  .dialog.command-dialog { width:min(640px,calc(100vw - 24px)); padding:0; gap:0; overflow:hidden; }
+  .command-dialog .dialog-heading { padding:14px 16px 0; }
+  .command-query { margin:12px 16px; width:calc(100% - 32px); }
+  .command-list { max-height:min(50vh,420px); overflow:auto; border-top:1px solid var(--border); }
+  .command-option { display:flex; align-items:center; width:100%; min-height:58px; height:auto; padding:10px 16px; gap:12px; text-align:left; border:0; border-radius:0; background:transparent; }
+  .command-option[aria-selected="true"] { background:var(--selection-bg); }
+  .command-option:disabled { opacity:.55; }
+  .command-copy { flex:1; min-width:0; }
+  .command-copy strong,.command-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .command-copy small { margin-top:4px; color:var(--muted); font-size:12px; }
+  .command-option kbd,.command-hint kbd { font:11px var(--mono); color:var(--muted); white-space:nowrap; }
+  .command-hint { display:flex; gap:12px; flex-wrap:wrap; padding:10px 16px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; }
+  .command-empty { padding:20px 16px; color:var(--muted); }
+  .command-help { flex:1; }
+  @media(max-width:1099px) { #commandsBtn kbd { display:none; } }
+  @media(max-width:500px) { .command-option kbd { display:none; } .command-list { max-height:48dvh; } }
+`;
+
+export function commandPaletteHtml() {
+  return `<div class="dialog-overlay" id="commandDialog" role="dialog" aria-modal="true" aria-labelledby="commandTitle" hidden>
+    <div class="dialog command-dialog">
+      <header class="dialog-heading"><h3 id="commandTitle" data-i18n="commands.title">Command palette</h3><button id="commandClose" type="button" data-i18n-aria="close" aria-label="Close">×</button></header>
+      <input class="command-query" id="commandQuery" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="commandList" data-i18n-placeholder="commands.placeholder" data-i18n-aria="commands.search" placeholder="Search actions, projects or sessions…" aria-label="Search commands" autocomplete="off">
+      <div id="commandList" class="command-list" role="listbox" data-i18n-aria="commands.results" aria-label="Commands"></div>
+      <div class="command-hint"><span class="command-help" id="commandHint" role="status" aria-live="polite"></span><span><kbd>↑ ↓</kbd> <span data-i18n="commands.navigate">Navigate</span></span><span><kbd>Enter</kbd> <span data-i18n="commands.open">Open</span></span><span><kbd>Esc</kbd> <span data-i18n="close">Close</span></span></div>
+    </div>
+  </div>`;
+}
+
+export function commandPaletteScript() {
+  return `(() => {
+    const filter = ${filterCommands.toString()};
+    const shortcut = ${shortcutAction.toString()};
+    const host = window.hccCommandHost;
+    const dialog = document.getElementById('commandDialog');
+    const query = document.getElementById('commandQuery');
+    const list = document.getElementById('commandList');
+    const hint = document.getElementById('commandHint');
+    const esc = value => String(value ?? '').replace(/[&<>"']/g, char => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[char]));
+    const tr = key => window.hccUi.tr(key);
+    let visible = [], selected = 0;
+    function refresh() {
+      if (dialog.hidden) return;
+      const previous = visible[selected]?.id;
+      visible = filter(host.commands(), query.value);
+      selected = Math.max(0, visible.findIndex(command => command.id === previous));
+      const scroll = list.scrollTop;
+      list.innerHTML = visible.length ? visible.map((command, index) => '<button type="button" tabindex="-1" role="option" class="command-option" id="commandOption-' + index + '" data-command-index="' + index + '" aria-selected="' + (index === selected) + '" aria-disabled="' + (command.enabled === false) + '" ' + (command.enabled === false ? 'disabled' : '') + '><span class="command-copy"><strong>' + esc(command.label) + '</strong><small>' + esc(command.group) + (command.detail ? ' · ' + esc(command.detail) : '') + '</small></span>' + (command.shortcut ? '<kbd>' + esc(command.shortcut) + '</kbd>' : '') + '</button>').join('') : '<div class="command-empty">' + esc(tr('commands.empty')) + '</div>';
+      list.scrollTop = scroll;
+      query.setAttribute('aria-expanded', 'true');
+      if (visible.length) query.setAttribute('aria-activedescendant', 'commandOption-' + selected);
+      else query.removeAttribute('aria-activedescendant');
+      hint.textContent = tr('commands.count').replace('{count}', String(visible.length)) + (visible.length === 80 ? ' · ' + tr('commands.refine') : '');
+      list.querySelectorAll('[data-command-index]').forEach(button => button.addEventListener('click', () => run(Number(button.dataset.commandIndex))));
+    }
+    function open() {
+      if (!dialog.hidden) return;
+      if (host.modalOpen()) return;
+      query.value = ''; visible = []; selected = 0;
+      host.openDialog(dialog, query); refresh();
+    }
+    function run(index) {
+      // Re-resolve from current project data, not a stale row captured before polling.
+      const command = host.commands().find(item => item.id === visible[index]?.id);
+      if (!command || command.enabled === false) { refresh(); hint.textContent = tr('commands.unavailable'); return; }
+      host.closeDialog(dialog);
+      try { Promise.resolve(command.run()).catch(host.error); } catch(error) { host.error(error); }
+    }
+    query.addEventListener('input', refresh);
+    query.addEventListener('keydown', event => {
+      if (event.isComposing) return;
+      if (event.key === 'Enter') { event.preventDefault(); if (visible.length) run(selected); return; }
+      if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) || !visible.length) return;
+      event.preventDefault();
+      selected = event.key === 'Home' ? 0 : event.key === 'End' ? visible.length - 1 : (selected + (event.key === 'ArrowDown' ? 1 : -1) + visible.length) % visible.length;
+      list.querySelectorAll('[data-command-index]').forEach((button, index) => button.setAttribute('aria-selected', String(index === selected)));
+      query.setAttribute('aria-activedescendant', 'commandOption-' + selected);
+      document.getElementById('commandOption-' + selected)?.scrollIntoView({block:'nearest'});
+    });
+    const context = () => ({modalOpen:host.modalOpen(), paletteOpen:!dialog.hidden, terminalAvailable:host.terminalAvailable()});
+    const captures = event => Boolean(shortcut(event, context()) || window.hccTerminalFind?.capturesEscape(event));
+    document.addEventListener('keydown', event => {
+      if (event.defaultPrevented || event.isComposing || event.repeat) return;
+      if (window.hccTerminalFind?.capturesEscape(event) && !host.modalOpen()) {
+        event.preventDefault(); window.hccTerminalFind.close(); return;
+      }
+      const action = shortcut(event, context());
+      if (!action) return;
+      event.preventDefault();
+      if (action === 'palette') { if (dialog.hidden) open(); else host.closeDialog(dialog); }
+      if (action === 'sessions') host.focusSessions();
+      if (action === 'terminal-find') window.hccTerminalFind.open();
+    }, true);
+    document.getElementById('commandsBtn').addEventListener('click', open);
+    document.getElementById('commandClose').addEventListener('click', () => host.closeDialog(dialog));
+    window.addEventListener('hcc:preferences', refresh);
+    window.hccCommandPalette = {open, refresh, captures};
+  })();`;
+}

package/lib/web/ui-handoff.mjs

@@ -0,0 +1,102 @@
+// Browser handoff state is scoped to the runtime project and session. Storage
+// failures fall back to memory; delivery records never trigger an automatic send.
+export function createHandoffStore(storage, { scope = '' } = {}) {
+  const memory = new Map();
+  const suffix = scope ? ':pane:' + JSON.stringify(String(scope)) : '';
+  const key = (kind, project, session = '') => 'hcc.handoff.v1.' + kind + ':' + JSON.stringify([project, session]) + suffix;
+  function read(name) {
+    if (memory.has(name)) return memory.get(name);
+    try {
+      const raw = storage?.getItem(name);
+      return raw ? JSON.parse(raw) : null;
+    } catch { return null; }
+  }
+  function write(name, value) {
+    memory.set(name, value);
+    try { storage?.setItem(name, JSON.stringify(value)); } catch {}
+  }
+  function draft(project, session) {
+    const value = read(key('draft', project, session));
+    if (!value || typeof value.text !== 'string') return { text: '', pending: null };
+    const pending = value.pending && typeof value.pending === 'object' && typeof value.pending.inputId === 'string' && typeof value.pending.text === 'string'
+      ? { inputId: value.pending.inputId, text: value.pending.text, status: value.pending.status === 'pending' ? 'pending' : 'uncertain' } : null;
+    return { text: value.text, pending };
+  }
+  return {
+    selected(project) {
+      const value = read(key('selected', project));
+      return value && ['managed', 'detected'].includes(value.type) && typeof value.id === 'string' ? value : null;
+    },
+    select(project, type, id) { write(key('selected', project), { type, id }); },
+    draft,
+    saveDraft(project, session, text) {
+      const value = draft(project, session);
+      value.text = String(text || '');
+      write(key('draft', project, session), value);
+      return value;
+    },
+    submit(project, session, inputId, text) {
+      const value = draft(project, session);
+      if (value.pending) return false;
+      value.pending = { inputId, text, status: 'pending' };
+      write(key('draft', project, session), value);
+      return true;
+    },
+    acknowledge(project, session, inputId) {
+      const value = draft(project, session);
+      if (!value.pending || value.pending.inputId !== inputId) return false;
+      if (value.text === value.pending.text) value.text = '';
+      value.pending = null;
+      write(key('draft', project, session), value);
+      return true;
+    },
+    uncertain(project, session) {
+      const value = draft(project, session);
+      if (!value.pending) return false;
+      value.pending.status = 'uncertain';
+      write(key('draft', project, session), value);
+      return true;
+    },
+    review(project, session) {
+      const value = draft(project, session);
+      value.pending = null;
+      write(key('draft', project, session), value);
+    }
+  };
+}
+
+export function uiHandoffScript() {
+  return 'window.hccHandoffStore = (' + createHandoffStore.toString() + ')((() => { try { return window.localStorage; } catch { return null; } })(), { scope: window.hccUi?.draftScope || window.hccDraftScope || "" });';
+}
+
+export const handoffCss = `
+  .main > .toolbar, .main > .handoff-bar, .main > .terminal-composer { flex-shrink:0; }
+  .main > #codexPanel { flex:1; min-height:0; height:auto !important; }
+  .handoff-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px 12px; border-bottom:1px solid var(--border); background:var(--panel); }
+  .handoff-status { flex:1 1 220px; font-size:12px; color:var(--muted); }
+  .handoff-detail { width:100%; font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
+  .handoff-bar button { height:30px; font-size:12px; }
+  .terminal-composer { display:grid; gap:6px; padding:10px 12px; border-top:1px solid var(--border); background:var(--panel); }
+  .terminal-composer textarea { width:100%; min-height:64px; max-height:160px; resize:vertical; font:inherit; border:1px solid var(--border); border-radius:6px; padding:8px; background:var(--input-bg); color:var(--text); }
+  .terminal-composer .composer-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
+  .terminal-composer .composer-note { flex:1 1 220px; font-size:11px; color:var(--muted); }
+  #activeTask { overflow-wrap:anywhere; color:var(--text); white-space:normal; font-size:12px; }
+  [hidden] { display:none !important; }
+`;
+
+export function handoffBarHtml() {
+  return `<div class="handoff-bar" id="handoffBar" hidden>
+    <div class="handoff-status handoff-chips" id="handoffStatus" role="status" aria-live="polite"><span class="handoff-chip" id="handoffConnection"></span><span class="handoff-chip" id="handoffProcess"></span><span class="handoff-chip" id="handoffAccess"></span></div>
+    <button id="claimControlBtn" type="button" data-i18n="handoff.claim">Take control</button>
+    <button id="releaseControlBtn" type="button" data-i18n="handoff.release" hidden>Release control</button>
+    <button id="reconnectBtn" type="button" data-i18n="handoff.reconnect">Reconnect</button>
+    <details class="handoff-detail"><summary id="handoffHelp">Attachment details</summary><div id="handoffDetail"></div></details>
+  </div>`;
+}
+
+export function terminalComposerHtml() {
+  return `<form class="terminal-composer" id="terminalComposer" hidden>
+    <label><span data-i18n="handoff.draft">Terminal input draft</span><textarea id="terminalDraft" rows="2" data-i18n-placeholder="handoff.draftPlaceholder" placeholder="Write terminal input here; Ctrl+Enter sends it"></textarea></label>
+    <div class="composer-actions"><span class="composer-note" id="draftStatus" role="status" aria-live="polite"></span><button id="reviewDraftBtn" type="button" data-i18n="handoff.review" hidden>Reviewed; keep draft</button><button class="primary" id="sendDraftBtn" type="submit" data-i18n="handoff.send">Send + Enter</button></div>
+  </form>`;
+}

package/lib/web/ui-history.mjs

@@ -0,0 +1,118 @@
+export function codexHistoryHtml() {
+  return `<div class="dialog-overlay" id="historyDialog" role="dialog" aria-modal="true" aria-labelledby="historyTitle" hidden>
+    <div class="dialog auxiliary-dialog">
+      <header class="dialog-heading"><h3 id="historyTitle" data-i18n="history.title">Codex history</h3><button id="historyClose" type="button" data-i18n-aria="close" aria-label="Close">×</button></header>
+      <p class="dialog-help" data-i18n="history.help">Browse saved history, then explicitly resume or fork it in a separate executor.</p>
+      <p id="historyNotice" class="dialog-help" role="status" aria-live="polite"></p>
+      <div class="history-layout"><div class="history-list"><button id="historyRefresh" type="button" data-i18n="refresh">Refresh</button><div id="historyThreads"></div><button id="historyMore" type="button" data-i18n="history.more" hidden>Load more</button></div>
+        <div class="history-preview"><h4 id="historySelected"></h4><div id="historyContent"></div>
+          <label class="confirmation-row"><input id="historyConfirmed" type="checkbox"><span data-i18n="history.confirm">I checked the original executor. Opening starts a separate executor; resuming the same thread requires stopping the original.</span></label>
+          <div class="btns"><button id="historyResume" type="button" data-i18n="history.resume" disabled>Resume in a new executor</button><button id="historyFork" type="button" data-i18n="history.fork" disabled>Fork into a new executor</button></div>
+        </div></div>
+    </div>
+  </div>`;
+}
+
+export function codexHistoryScript() {
+  return String.raw`(() => {
+    const dialog = document.getElementById('historyDialog');
+    const bridge = () => window.hccHandoff;
+    const tr = (key, fallback = '') => bridge().tr(key, fallback);
+    const esc = value => bridge().esc(String(value ?? ''));
+    let root = '', entries = [], cursor = null, selected = null, busy = false, generation = 0;
+    const same = (project, version) => project === root && project === bridge().projectRoot && version === generation && !dialog.hidden;
+    const route = (path, project = root) => path + (path.includes('?') ? '&' : '?') + 'root=' + encodeURIComponent(project);
+    function notice(value) { document.getElementById('historyNotice').textContent = value || ''; }
+    function liveSources() {
+      return (bridge().sessions || []).filter(session => session.status === 'running' && session.binding?.provider === 'codex' && session.binding.provider_session_id === selected?.id);
+    }
+    function controlsSource(sources) { return sources.every(session => session.id === bridge().active && bridge().canControl); }
+    function sync() {
+      const confirmed = document.getElementById('historyConfirmed').checked;
+      const sources = liveSources(), unavailable = busy || !selected || !confirmed || root !== bridge().projectRoot;
+      document.getElementById('historyResume').disabled = unavailable || sources.length > 0;
+      document.getElementById('historyFork').disabled = unavailable || !controlsSource(sources);
+      if (!busy && sources.length) notice(tr(controlsSource(sources) ? 'history.stopOriginal' : 'history.sourceControlRequired'));
+      document.getElementById('historyRefresh').disabled = busy;
+      document.getElementById('historyMore').hidden = !cursor;
+      document.getElementById('historyMore').disabled = busy;
+    }
+    function renderList() {
+      const container = document.getElementById('historyThreads');
+      container.innerHTML = entries.map(entry => '<button type="button" class="history-thread" data-thread="' + esc(entry.id) + '" aria-pressed="' + (entry.id === selected?.id) + '"><strong>' + esc(entry.name || entry.preview || entry.id) + '</strong><span>' + esc(entry.id) + '</span><span>' + esc(entry.cwd || '') + '</span></button>').join('') || '<p class="dialog-help">' + esc(tr('history.empty')) + '</p>';
+      container.querySelectorAll('[data-thread]').forEach(button => button.addEventListener('click', () => select(button.dataset.thread)));
+      sync();
+    }
+    async function load(more = false) {
+      if (busy || !root) return;
+      const project = root, version = ++generation;
+      busy = true; notice(tr('history.loading')); sync();
+      try {
+        const result = await bridge().api(route('/api/codex/threads' + (more && cursor ? '?cursor=' + encodeURIComponent(cursor) : ''), project));
+        if (!same(project, version)) return;
+        const incoming = Array.isArray(result.threads) ? result.threads : [];
+        entries = [...new Map((more ? entries.concat(incoming) : incoming).map(entry => [entry.id, entry])).values()];
+        cursor = result.nextCursor || null;
+        notice(''); renderList();
+      } catch (error) { if (same(project, version)) notice(error.detail || error.message); }
+      finally { if (project === root && version === generation) { busy = false; sync(); } }
+    }
+    async function select(id) {
+      if (busy) return;
+      const project = root, version = ++generation;
+      selected = entries.find(entry => entry.id === id) || { id };
+      document.getElementById('historyConfirmed').checked = false;
+      document.getElementById('historySelected').textContent = selected.name || selected.preview || id;
+      document.getElementById('historyContent').textContent = '';
+      busy = true; renderList(); notice(tr('history.loading'));
+      try {
+        const result = await bridge().api(route('/api/codex/threads/' + encodeURIComponent(id), project));
+        if (!same(project, version)) return;
+        selected = result.thread || selected;
+        renderPreview();
+        notice('');
+      } catch (error) { if (same(project, version)) notice(error.detail || error.message); }
+      finally { if (project === root && version === generation) { busy = false; sync(); } }
+    }
+    function renderPreview() {
+        document.getElementById('historyContent').innerHTML = (selected?.turns || []).map(turn => '<section class="history-turn"><strong>' + esc(turn.status || '') + '</strong>' + (turn.items || []).map(item => {
+          const content = Array.isArray(item.content) ? item.content.map(part => part.text || '').join('\n') : item.text || item.command || item.aggregatedOutput || '';
+          const label = item.type === 'userMessage' ? tr('history.user') : item.type === 'agentMessage' ? tr('history.assistant') : item.type === 'commandExecution' ? tr('history.command') : item.type === 'fileChange' ? tr('history.files') : tr('history.event');
+          return '<article><strong>' + esc(label) + '</strong><pre>' + esc(content || (item.changes ? JSON.stringify(item.changes, null, 2) : '')) + '</pre></article>';
+        }).join('') + '</section>').join('') || '<p class="dialog-help">' + esc(tr('history.noTurns')) + '</p>';
+    }
+    async function reopen(fork) {
+      if (busy || !selected || !document.getElementById('historyConfirmed').checked || root !== bridge().projectRoot) return;
+      const sources = liveSources();
+      if (sources.length && (!fork || !controlsSource(sources))) { sync(); return; }
+      const project = root, threadId = selected.id, version = ++generation;
+      const input = fork ? { confirmed: true, ...(sources.length ? { actionToken: bridge().actionToken, epoch: bridge().epoch } : {}) } : { kind: 'codex', transport: 'app-server', mode: 'resume', resume: threadId, handoffConfirmed: true };
+      busy = true; sync(); notice(tr('history.opening'));
+      try {
+        const result = await bridge().api(fork ? route('/api/codex/threads/' + encodeURIComponent(threadId) + '/fork', project) : route('/api/sessions', project), {
+          method: 'POST', body: JSON.stringify(input)
+        });
+        if (project !== bridge().projectRoot) return;
+        await bridge().refreshSessions();
+        if (!same(project, version)) return;
+        bridge().closeDialog(dialog);
+        if (result.session?.id) bridge().openManaged(result.session.id);
+      } catch (error) { if (same(project, version)) notice((error.detail || error.message) + (error.code ? ' [' + error.code + ']' : '') + ' ' + tr('history.checkSessions')); }
+      finally { if (project === root && version === generation) { busy = false; sync(); } }
+    }
+    function open() {
+      root = bridge().projectRoot; generation++; entries = []; selected = null; cursor = null; busy = false;
+      document.getElementById('historyContent').textContent = ''; document.getElementById('historySelected').textContent = '';
+      document.getElementById('historyConfirmed').checked = false;
+      bridge().openDialog(dialog, document.getElementById('historyRefresh')); renderList(); void load();
+    }
+    document.getElementById('historyClose').addEventListener('click', () => bridge().closeDialog(dialog));
+    document.getElementById('historyRefresh').addEventListener('click', () => load());
+    document.getElementById('historyMore').addEventListener('click', () => load(true));
+    document.getElementById('historyConfirmed').addEventListener('change', sync);
+    document.getElementById('historyResume').addEventListener('click', () => reopen(false));
+    document.getElementById('historyFork').addEventListener('click', () => reopen(true));
+    window.addEventListener('hcc:preferences', () => { if (!dialog.hidden) { renderList(); renderPreview(); } });
+    window.hccHistory = { open, sync, reset() { generation++; busy = false; if (!dialog.hidden) bridge().closeDialog(dialog); } };
+  })();`;
+}