@logicseek/hello-cc 1.0.1 → 1.0.2

package/lib/web/ui-interactions.mjs

@@ -0,0 +1,78 @@
+// Shared form controls for Web-owned and independent native executors.
+export function interactionPanelScript() {
+  return String.raw`(() => {
+    if (window.hccInteractions) return;
+    const drafts = new Map();
+    let focus = null;
+    function remember(container) {
+      container.querySelectorAll('[data-interaction-field]').forEach(control => {
+        if (!control.dataset.interactionField) return;
+        drafts.set(control.dataset.interactionField, { value: control.value, checked: control.checked });
+        if (control === document.activeElement) focus = { key: control.dataset.interactionField, start: control.selectionStart, end: control.selectionEnd };
+      });
+      while (drafts.size > 256) drafts.delete(drafts.keys().next().value);
+    }
+    function restore(container) {
+      const live = new Set();
+      container.querySelectorAll('[data-interaction-field]').forEach(control => {
+        live.add(control.dataset.interactionField);
+        const saved = drafts.get(control.dataset.interactionField);
+        if (saved) { control.value = saved.value; if (control.type === 'checkbox') control.checked = saved.checked; }
+        if (focus && focus.key === control.dataset.interactionField) { control.focus?.({preventScroll:true}); if (typeof focus.start === 'number') control.setSelectionRange?.(focus.start, focus.end); }
+      });
+      for (const key of drafts.keys()) if (!live.has(key)) drafts.delete(key);
+      if (focus && !live.has(focus.key)) focus = null;
+    }
+    function form(request, key, esc, text) {
+      const field = suffix => ' data-interaction-field="' + esc(key + ':' + suffix) + '"';
+      if (request.kind === 'userInput') return (request.params?.questions || []).map((q, i) => {
+        const label = '<label>' + esc(q.header || '') + '<p>' + esc(q.question || '') + '</p>';
+        const free = '<input data-answer="' + i + '" type="' + (q.isSecret ? 'password' : 'text') + '" maxlength="8192" autocomplete="off"' + field('answer:' + i) + '>';
+        if (!q.options?.length) return label + free + '</label>';
+        return label + '<select data-question="' + i + '"' + field('question:' + i) + '><option value="">' + esc(text('Choose an answer', '请选择答案')) + '</option>'
+          + q.options.map((o, n) => '<option value="' + n + '">' + esc(o.label + (o.description ? ' — ' + o.description : '')) + '</option>').join('')
+          + (q.isOther ? '<option value="other">' + esc(text('Other (enter below)', '其他（在下方输入）')) + '</option>' : '') + '</select>'
+          + (q.isOther ? free : '') + '</label>';
+      }).join('');
+      if (request.kind !== 'permissions') return '';
+      const p = request.params?.permissions || {}, fs = p.fileSystem || {};
+      const choice = (name, index, label) => '<label><input type="checkbox" data-permission="' + name + '" data-index="' + index + '"' + field(name + ':' + index) + '> ' + esc(label) + '</label>';
+      return '<p>' + esc(text('Select the requested permissions to grant. Unchecked permissions remain denied.', '勾选要授予的请求权限，未勾选的权限不授予。')) + '</p>'
+        + (p.network?.enabled === true ? choice('network', 0, text('Network access', '网络访问')) : '')
+        + ['read', 'write'].map(type => (fs[type] || []).map((path, i) => (fs.entries || []).some(entry => entry.access === type && entry.path?.type === 'path' && entry.path.path === path) ? '' : choice(type, i, text(type === 'read' ? 'Read: ' : 'Write: ', type === 'read' ? '读取：' : '写入：') + path)).join('')).join('')
+        + (fs.entries || []).map((entry, i) => entry.access === 'deny' ? '<p>' + esc(text('Retained denial: ', '保留禁止规则：') + JSON.stringify(entry.path)) + '</p>'
+          : choice('entries', i, (entry.access === 'write' ? text('Write: ', '写入：') : text('Read: ', '读取：')) + JSON.stringify(entry.path))).join('')
+        + '<label>' + esc(text('Permission duration', '权限有效期')) + '<select data-scope' + field('scope') + '><option value="turn">' + esc(text('This turn', '仅本轮')) + '</option><option value="session">' + esc(text('This session', '本会话')) + '</option></select></label>';
+    }
+    function payload(request, container, decision) {
+      if (decision !== 'accept') return { decision };
+      if (request.kind === 'userInput') {
+        const answers = Object.create(null);
+        for (const [i, q] of (request.params?.questions || []).entries()) {
+          const select = container.querySelector('[data-question="' + i + '"]');
+          const value = select && select.value !== 'other' ? q.options?.[Number(select.value)]?.label : container.querySelector('[data-answer="' + i + '"]')?.value;
+          if ((select && select.value === '') || !value?.trim()) throw new Error('Please answer every question / 请回答每个问题');
+          answers[q.id] = { answers: [value] };
+        }
+        return { answers };
+      }
+      if (request.kind !== 'permissions') return { decision };
+      const wanted = request.params.permissions, permissions = {}, fs = {};
+      container.querySelectorAll('[data-permission]').forEach(control => {
+        if (!control.checked) return;
+        const field = control.dataset.permission;
+        if (field === 'network') permissions.network = { enabled: true };
+        else { fs[field] ||= []; fs[field].push(wanted.fileSystem[field][Number(control.dataset.index)]); }
+      });
+      if (Object.keys(fs).length) {
+        const denies = (wanted.fileSystem.entries || []).filter(entry => entry.access === 'deny');
+        if (denies.length) fs.entries = [...(fs.entries || []), ...denies];
+        if (wanted.fileSystem.globScanMaxDepth != null) fs.globScanMaxDepth = wanted.fileSystem.globScanMaxDepth;
+        permissions.fileSystem = fs;
+      }
+      return { decision, permissions, scope: container.querySelector('[data-scope]').value };
+    }
+    function forget(key) { for (const field of drafts.keys()) if (field.startsWith(key + ':')) drafts.delete(field); }
+    window.hccInteractions = { form, payload, remember, restore, forget };
+  })();`;
+}

package/lib/web/ui-login.mjs

@@ -0,0 +1,101 @@
+import { uiPreferencesCss, uiPreferencesScript, preferenceControlsHtml } from './ui-preferences.mjs';
+
+// Authentication stays server-side. Only appearance preferences are shared with
+// the console; the access token is sent once and never added to browser storage.
+export function renderWebLoginPage({ inlineScriptNonce }) {
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>hello-cc — sign in</title>
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23087b65'/%3E%3Cpath d='m14 20 14 12-14 12m20 0h16' fill='none' stroke='white' stroke-width='5'/%3E%3C/svg%3E">
+  <script${inlineScriptNonce}>${uiPreferencesScript()}</script>
+  <style>
+    ${uiPreferencesCss}
+    * { box-sizing: border-box; }
+    body { margin: 0; min-height: 100vh; min-height: 100dvh; padding: 24px; display: grid; place-items: center; background: var(--bg); color: var(--text); font-family: var(--sans); }
+    .login-card { width: min(100%, 460px); padding: 32px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); box-shadow: 0 20px 60px var(--shadow, rgba(0, 0, 0, .15)); }
+    .login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; font-weight: 700; font-size: 18px; letter-spacing: -.03em; }
+    .login-mark { color: var(--accent); font-family: var(--mono); }
+    h1 { margin: 0; font-size: 24px; line-height: 1.4; letter-spacing: -.025em; }
+    .login-help { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 10px 0 24px; }
+    label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
+    input, select, button { font: inherit; }
+    input, select { width: 100%; min-width: 0; min-height: 40px; padding: 9px 10px; border-radius: 7px; border: 1px solid var(--border); background: var(--input-bg, var(--bg)); color: var(--text); }
+    input::placeholder { color: var(--muted); opacity: .8; }
+    :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+    .login-submit { width: 100%; min-height: 42px; margin-top: 16px; border-radius: 7px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent, #06211b); font-weight: 600; cursor: pointer; }
+    .login-submit:hover { filter: brightness(1.08); }
+    .login-submit:disabled { cursor: wait; opacity: .65; }
+    .login-error { color: var(--danger); font-size: 13px; line-height: 1.5; margin-top: 12px; min-height: 20px; }
+    .login-preferences { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border-top: 1px solid var(--border); padding-top: 20px; margin-top: 20px; }
+    .login-preferences select { font-size: 12px; padding-left: 7px; }
+    @media (max-width: 480px) { body { padding: 16px; } .login-card { padding: 24px; } h1 { font-size: 22px; } .login-preferences { grid-template-columns: 1fr; } }
+    @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }
+  </style>
+</head>
+<body>
+  <main class="login-card">
+    <div class="login-brand"><span class="login-mark" aria-hidden="true">&gt;_</span><span>hello-cc</span></div>
+    <h1 data-i18n="loginTitle">Sign in to hello-cc</h1>
+    <p class="login-help" data-i18n="loginHelp">Enter the access token shown when you start the web console.</p>
+    <form id="loginForm">
+      <label for="tok"><span data-i18n="accessToken">Access token</span>
+        <input id="tok" name="token" type="password" autocomplete="off" data-i18n-placeholder="tokenPlaceholder" placeholder="Paste your access token" required autofocus aria-describedby="err">
+      </label>
+      <button class="login-submit" id="go" type="submit" data-i18n="signIn">Sign in</button>
+      <div class="login-error" id="err" role="alert" aria-live="polite"></div>
+    </form>
+    <div class="login-preferences" aria-label="Settings" data-i18n-aria="settings">${preferenceControlsHtml({ terminal: false })}</div>
+  </main>
+  <script${inlineScriptNonce}>
+    const ui = window.hccUi;
+    const input = document.getElementById('tok');
+    const err = document.getElementById('err');
+    const button = document.getElementById('go');
+    const form = document.getElementById('loginForm');
+    let pending = false;
+    let errorKey = '';
+    function renderLoginText() {
+      ui.translate();
+      document.title = 'hello-cc — ' + ui.tr('signIn');
+      button.textContent = ui.tr(pending ? 'signingIn' : 'signIn');
+      err.textContent = errorKey ? ui.tr(errorKey) : '';
+    }
+    ui.bindControls();
+    window.addEventListener('hcc:preferences', renderLoginText);
+    renderLoginText();
+    form.addEventListener('submit', async (event) => {
+      event.preventDefault();
+      if (pending) return;
+      const token = input.value.trim();
+      if (!token) { errorKey = 'tokenRequired'; renderLoginText(); input.focus(); return; }
+      pending = true;
+      errorKey = '';
+      button.disabled = true;
+      input.setAttribute('aria-invalid', 'false');
+      form.setAttribute('aria-busy', 'true');
+      renderLoginText();
+      try {
+        const res = await fetch('/login', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ token })
+        });
+        if (res.ok) { location.href = '/'; return; }
+        errorKey = res.status === 401 || res.status === 403 ? 'invalidToken' : 'networkError';
+        input.setAttribute('aria-invalid', errorKey === 'invalidToken' ? 'true' : 'false');
+      } catch {
+        errorKey = 'networkError';
+      } finally {
+        pending = false;
+        button.disabled = false;
+        form.setAttribute('aria-busy', 'false');
+        renderLoginText();
+      }
+    });
+  </script>
+</body>
+</html>`;
+}

package/lib/web/ui-native.mjs

@@ -0,0 +1,165 @@
+import { interactionPanelScript } from './ui-interactions.mjs';
+
+export function nativePanelHtml() {
+  return `<style>
+    #nativePanel { flex:1; min-width:0; min-height:0; overflow:hidden; flex-direction:column; }
+    #nativePanel[hidden] { display:none; }
+    #nativePanel:not([hidden]) { display:flex; }
+    .native-header,.native-composer { flex:none; padding:12px 16px; background:var(--panel); }
+    .native-header { border-bottom:1px solid var(--border); }
+    .native-header p { margin:6px 0 0; color:var(--muted); font-size:var(--small-font); overflow-wrap:anywhere; }
+    .native-scroll { flex:1; min-height:0; overflow:auto; padding:0 16px 12px; }
+    .native-event { padding:10px 0; border-bottom:1px solid var(--border); }
+    .native-event pre { white-space:pre-wrap; overflow-wrap:anywhere; margin:6px 0; line-height:1.6; }
+    .native-receipts { display:grid; gap:8px; margin:10px 0; }
+    .native-receipt { border:1px solid var(--border); border-radius:7px; padding:9px; font-size:var(--small-font); overflow-wrap:anywhere; }
+    .native-composer { border-top:1px solid var(--border); max-height:45%; overflow:auto; }
+    #nativeDraft { width:100%; min-height:70px; max-height:170px; resize:vertical; padding:10px; font:inherit; background:var(--input-bg); color:var(--text); border:1px solid var(--border); border-radius:7px; }
+    .native-controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; }
+    .native-controls label { display:flex; gap:6px; align-items:center; font-size:var(--small-font); }
+    #nativeNotice { color:var(--muted); font-size:var(--small-font); overflow-wrap:anywhere; }
+  </style><section id="nativePanel" hidden aria-label="Native worker">
+    <header class="native-header"><strong id="nativeStatus" role="status"></strong><p id="nativeIdentity"></p><p data-i18n="native.approvalPolicy">The current controller can answer interactive requests here.</p></header>
+    <div class="native-scroll"><div id="nativeApprovals"></div><h4 data-i18n="native.receipts">Durable delivery receipts</h4><div id="nativeReceipts" class="native-receipts"></div><h4 data-i18n="native.output">Executor output</h4><div id="nativeEvents"></div></div>
+    <footer class="native-composer"><label for="nativeDraft" data-i18n="native.draft">Message draft saved in this browser</label><textarea id="nativeDraft" rows="3"></textarea>
+      <div class="native-controls"><button id="nativeSend" class="primary" type="button" data-i18n="native.send" disabled>Queue message</button><button id="nativeInterrupt" type="button" data-i18n="native.interrupt" disabled>Interrupt current turn</button><button id="nativeRead" type="button" data-i18n="native.read">Refresh receipts</button><button id="nativeReviewPending" type="button" data-i18n="native.reviewPending" hidden>Reviewed; keep draft</button></div>
+      <div class="native-controls"><label><input id="nativeCloseConfirmed" type="checkbox"><span data-i18n="native.closeConfirm">Stop this executor</span></label><button id="nativeClose" class="danger" type="button" data-i18n="native.close" disabled>Close executor</button></div>
+      <p id="nativeNotice" role="status" aria-live="polite"></p>
+    </footer>
+  </section>`;
+}
+
+export function nativePanelScript() {
+  return interactionPanelScript() + String.raw`(() => {
+    const bridge = () => window.hccHandoff, panel = document.getElementById('nativePanel'), draft = document.getElementById('nativeDraft');
+    const tr = (key, fallback = '') => bridge().tr(key, fallback), esc = value => bridge().esc(String(value ?? ''));
+    const events = new Map(), inflight = new Set(), responding = new Set();
+    let key = '', state = null, pending = null, observed = 0;
+    const storageKey = () => 'hcc.nativeDraft:' + JSON.stringify([bridge().projectRoot,bridge().active]) + (bridge().draftScope ? ':pane:' + JSON.stringify(bridge().draftScope) : '');
+    function save() { if (key) window.hccUi.safeSet(key,JSON.stringify({text:draft.value,pending})); }
+    function subject() { const b = bridge(); return {root:b.projectRoot,id:b.active,key:storageKey(),token:b.actionToken,epoch:b.epoch,generation:state?.generation,owner:state?.owner}; }
+    const matches = target => target.root === bridge().projectRoot && target.id === bridge().active && (!target.generation || target.generation === state?.generation) && (!target.owner || target.owner === state?.owner);
+    const route = (target,name) => '/api/sessions/' + encodeURIComponent(target.id) + '/native/' + name + '?root=' + encodeURIComponent(target.root);
+    function notice(message) { document.getElementById('nativeNotice').textContent = message || ''; }
+    function sync() {
+      const next = storageKey();
+      if (next !== key) {
+        key = next; state = null; pending = null; events.clear(); observed++; draft.value = '';
+        for (const id of ['nativeStatus','nativeIdentity','nativeReceipts','nativeEvents','nativeNotice','nativeApprovals']) document.getElementById(id).textContent = '';
+        document.getElementById('nativeCloseConfirmed').checked = false;
+        try { const saved = JSON.parse(window.hccUi.safeGet(key) || '{}'); draft.value = saved.text || ''; pending = saved.pending || null; } catch (_) {}
+      }
+      const writable = bridge().session?.type === 'native' && bridge().canControl && state?.connected && !state.closing;
+      const sending = inflight.has(key);
+      document.getElementById('nativeSend').disabled = !writable || sending || !!pending || !draft.value.trim() || state?.quarantined || state?.capabilities?.send === false;
+      document.getElementById('nativeInterrupt').disabled = !writable || sending || !state?.turnId || state?.capabilities?.interrupt === false;
+      document.getElementById('nativeClose').disabled = !writable || sending || !document.getElementById('nativeCloseConfirmed').checked;
+      document.getElementById('nativeReviewPending').hidden = !pending;
+      document.getElementById('nativeReviewPending').disabled = sending;
+      document.getElementById('nativeRead').disabled = bridge().session?.type !== 'native';
+      document.getElementById('nativeApprovals').querySelectorAll('button[data-response]').forEach(button => {
+        button.disabled = !writable || responding.has(button.dataset.requestKey) || (button.dataset.decision === 'accept' && button.dataset.truncated === 'true');
+      });
+      if (pending) notice(tr('native.uncertain'));
+    }
+    function acknowledge(target, submissionId) {
+      let stored = {}; try { stored = JSON.parse(window.hccUi.safeGet(target.key) || '{}'); } catch (_) {}
+      if (stored.pending?.id !== submissionId) return false;
+      if (stored.text === stored.pending.text) stored.text = '';
+      stored.pending = null; window.hccUi.safeSet(target.key,JSON.stringify(stored));
+      if (matches(target)) { draft.value = stored.text || ''; pending = null; notice(tr('native.queued')); }
+      return true;
+    }
+    function render(value) {
+      sync();
+      if (!value || bridge().session?.type !== 'native' || (value.peer !== bridge().session?.peer_id && value.peer !== bridge().active) || (value.root && value.root !== bridge().projectRoot)) return;
+      if (Number.isSafeInteger(state?.generation) && Number.isSafeInteger(value.generation) && value.generation < state.generation) return;
+      const replaced = state && (state.generation !== value.generation || state.owner !== value.owner);
+      if (replaced) { events.clear(); document.getElementById('nativeCloseConfirmed').checked = false; }
+      state = value; observed++;
+      for (const entry of value.events || []) events.set(entry.id,entry);
+      while (events.size > 100) events.delete(events.keys().next().value);
+      document.getElementById('nativeStatus').textContent = tr('native.sameExecutor') + ' · ' + (state.provider || '') + ' · ' + tr('native.state.' + state.status, state.status || '');
+      document.getElementById('nativeIdentity').textContent = [state.peer,state.sessionId,state.turnId].filter(Boolean).join(' · ');
+      document.getElementById('nativeReceipts').innerHTML = (state.deliveries || []).map(delivery => '<article class="native-receipt"><strong>#' + esc(delivery.message_id) + ' · ' + esc(tr('native.delivery.' + delivery.state,delivery.state)) + '</strong><div>' + esc(delivery.submission_id) + (delivery.turn_id ? ' · ' + esc(delivery.turn_id) : '') + '</div>' + (delivery.detail ? '<details><summary>' + esc(tr('details')) + '</summary><pre>' + esc(typeof delivery.detail === 'string' ? delivery.detail : JSON.stringify(delivery.detail,null,2)) + '</pre></details>' : '') + '</article>').join('') || '<p>' + esc(tr('native.noReceipts')) + '</p>';
+      document.getElementById('nativeEvents').innerHTML = [...events.values()].sort((a,b)=>a.id-b.id).map(entry => {
+        const event = entry.payload || entry;
+        const text = event.text || event.message || event.command || event.item?.aggregatedOutput || event.item?.command || event.diff || (event.plan ? JSON.stringify(event.plan,null,2) : '') || event.error?.message || '';
+        const label = ['output','message','delta'].includes(event.type) ? tr('native.output') : event.type === 'error' ? tr('native.error') : tr('native.event');
+        return text ? '<article class="native-event"><strong>' + esc(label) + '</strong><pre>' + esc(text) + '</pre></article>' : '';
+      }).join('') || '<p>' + esc(tr('native.noOutput')) + '</p>';
+      const approvals = state.pendingApprovals || [], target = subject(), container = document.getElementById('nativeApprovals');
+      const requestKey = request => JSON.stringify([target.root, target.id, state.executorId, request.requestId]);
+      const text = (en, zh) => ['zh','zh-CN'].includes(window.hccUi.language) ? zh : en;
+      window.hccInteractions.remember(container);
+      container.innerHTML = approvals.map((request, index) => '<article class="codex-card codex-approval"><h3>'
+        + esc(request.kind === 'userInput' ? text('Your input is required', '等待您的答复') : text('Approval required', '等待人工审批'))
+        + '</h3><pre>' + esc(JSON.stringify(request.params, null, 2)) + '</pre>'
+        + (request.truncated ? '<p>' + esc(text('Truncated; cancel or decline only.', '参数已截断，只能取消或拒绝。')) + '</p>' : '')
+        + '<div class="hcc-interaction-form">' + window.hccInteractions.form(request, requestKey(request), esc, text) + '</div><div class="native-controls">'
+        + '<button data-response="' + index + '" data-decision="accept" data-truncated="' + !!request.truncated + '" data-request-key="' + esc(requestKey(request)) + '">' + esc(request.kind === 'userInput' ? text('Send answers', '提交答复') : request.kind === 'permissions' ? text('Grant selected permissions', '授予所选权限') : text('Approve once', '批准本次')) + '</button>'
+        + '<button data-response="' + index + '" data-decision="' + (request.kind === 'userInput' ? 'cancel' : 'decline') + '" data-request-key="' + esc(requestKey(request)) + '">' + esc(text('Decline / cancel', '拒绝 / 取消')) + '</button></div></article>').join('');
+      window.hccInteractions.restore(container);
+      container.querySelectorAll('button[data-response]').forEach(button => button.addEventListener('click', async () => {
+        if (!matches(target) || !bridge().canControl || responding.has(button.dataset.requestKey)) return;
+        const request = approvals[Number(button.dataset.response)], key = button.dataset.requestKey;
+        responding.add(key); sync();
+        try {
+          const payload = window.hccInteractions.payload(request, ['permissions','userInput'].includes(request.kind) ? button.closest('article') : null, button.dataset.decision);
+          const result = await bridge().api(route(target, 'respond'), {method:'POST', body:JSON.stringify({
+            executorId:request.executorId, sessionId:request.sessionId, turnId:request.turnId, requestId:request.requestId,
+            ...payload, action_token:bridge().actionToken, epoch:bridge().epoch })});
+          window.hccInteractions.forget(key);
+          if (matches(target)) { if (result.state) render(result.state); else void read(); }
+        } catch(error) { if(matches(target)) notice(error.detail || error.message); }
+        finally { responding.delete(key); sync(); }
+      }));
+      if (pending && (state.deliveries || []).some(delivery => delivery.submission_id === pending.id && delivery.message_id)) acknowledge(subject(),pending.id);
+      sync();
+    }
+    async function read() {
+      if (bridge().session?.type !== 'native') return;
+      const target = subject(), version = observed;
+      try {
+        const result = await bridge().api(route(target,'state'));
+        if (matches(target) && version === observed) render(result.state || result);
+      } catch (error) { if (matches(target)) notice(error.detail || error.message); }
+    }
+    draft.addEventListener('input',()=>{ save(); sync(); });
+    document.getElementById('nativeSend').addEventListener('click',async()=>{
+      sync(); if (document.getElementById('nativeSend').disabled) return;
+      const target = subject(), text = draft.value, id = 's_' + crypto.randomUUID();
+      pending = {id,text,generation:target.generation}; save(); inflight.add(target.key); sync(); notice(tr('native.sending'));
+      try {
+        const result = await bridge().api(route(target,'send'),{method:'POST',body:JSON.stringify({text,submissionId:id,action_token:target.token,epoch:target.epoch})});
+        const receipt = result.receipt || result;
+        if (receipt.submission_id !== id || !Number.isSafeInteger(receipt.message_id)) throw new Error(tr('native.invalidReceipt'));
+        acknowledge(target,id);
+        if (matches(target)) { if (result.state) render(result.state); else void read(); }
+      } catch(error) { if (matches(target)) notice((error.detail || error.message) + ' ' + tr('native.uncertain')); }
+      finally { inflight.delete(target.key); sync(); }
+    });
+    document.getElementById('nativeInterrupt').addEventListener('click',async()=>{
+      sync(); if (document.getElementById('nativeInterrupt').disabled) return;
+      const target = subject(); inflight.add(target.key); sync();
+      try { await bridge().api(route(target,'interrupt'),{method:'POST',body:JSON.stringify({turnId:state.turnId || state.activeDelivery?.turn_id,action_token:target.token,epoch:target.epoch})}); if(matches(target)){notice(tr('native.interruptRequested'));void read();} }
+      catch(error){if(matches(target))notice(error.detail || error.message);}
+      finally{inflight.delete(target.key);sync();}
+    });
+    document.getElementById('nativeCloseConfirmed').addEventListener('change',sync);
+    document.getElementById('nativeClose').addEventListener('click',async()=>{
+      sync(); if(document.getElementById('nativeClose').disabled)return;
+      const target=subject();inflight.add(target.key);sync();
+      try{await bridge().api(route(target,'close'),{method:'POST',body:JSON.stringify({action_token:target.token,epoch:target.epoch})});if(matches(target)){notice(tr('native.closed'));await bridge().refreshSessions();}}
+      catch(error){if(matches(target))notice(error.detail || error.message);}
+      finally{inflight.delete(target.key);sync();}
+    });
+    document.getElementById('nativeRead').addEventListener('click',read);
+    document.getElementById('nativeReviewPending').addEventListener('click',()=>{
+      if (!pending || inflight.has(key) || !confirm(tr('native.reviewConfirm'))) return;
+      pending=null;save();notice(tr('native.retained'));sync();
+    });
+    window.addEventListener('hcc:preferences',()=>{if(state&&!panel.hidden)render(state);});
+    window.hccNative={render,sync,read};
+  })();`;
+}

package/lib/web/ui-preferences.mjs

@@ -0,0 +1,278 @@
+import { UI_TRANSLATIONS } from './ui-i18n.mjs';
+
+// Shared by the login page and the console so preferences take effect before paint.
+export const uiPreferencesCss = `
+  :root {
+    color-scheme: dark;
+    --bg: #101214;
+    --panel: #181b1f;
+    --panel-2: #20242a;
+    --border: #303640;
+    --text: #eef2f6;
+    --muted: #a3adba;
+    --accent: #40c4aa;
+    --on-accent: #06211b;
+    --warn: #f2bb4f;
+    --danger: #ff6b6b;
+    --ok: #75d17c;
+    --input-bg: #0d0f12;
+    --terminal-bg: #0b0d10;
+    --card-bg: #111418;
+    --hover-bg: #29323c;
+    --primary-bg: #1b5f54;
+    --primary-border: #2b9c86;
+    --danger-bg: #5d252a;
+    --danger-border: #aa444c;
+    --selection-bg: #23465a;
+    --overlay: rgba(0, 0, 0, .64);
+    --control-height: 36px;
+    --space: 12px;
+    --small-font: 12px;
+    --body-font: 14px;
+    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+  :root[data-theme="light"] {
+    color-scheme: light;
+    --bg: #eef2f6;
+    --panel: #f8fafc;
+    --panel-2: #e9eef4;
+    --border: #cbd4df;
+    --text: #17212b;
+    --muted: #526273;
+    --accent: #087b65;
+    --on-accent: #ffffff;
+    --warn: #986013;
+    --danger: #b5303d;
+    --ok: #23743b;
+    --input-bg: #ffffff;
+    --terminal-bg: #ffffff;
+    --card-bg: #ffffff;
+    --hover-bg: #e1e9f2;
+    --primary-bg: #d1f2e8;
+    --primary-border: #249079;
+    --danger-bg: #ffe7e9;
+    --danger-border: #cc6670;
+    --selection-bg: #c8e8f8;
+    --overlay: rgba(16, 24, 32, .42);
+  }
+  :root[data-density="compact"] {
+    --control-height: 30px;
+    --space: 8px;
+    --small-font: 11px;
+    --body-font: 13px;
+  }
+`;
+
+export const TERMINAL_THEMES = Object.freeze({
+  dark: Object.freeze({
+    background: '#0b0d10', foreground: '#eef2f6', cursor: '#7dd3fc', cursorAccent: '#0b0d10',
+    selectionBackground: '#23465a', selectionForeground: '#ffffff',
+    black: '#1c2026', red: '#ff6b6b', green: '#75d17c', yellow: '#f2bb4f',
+    blue: '#7baaff', magenta: '#c99bff', cyan: '#40c4cc', white: '#d6dde6',
+    brightBlack: '#727f91', brightRed: '#ff9696', brightGreen: '#a1e8a7', brightYellow: '#ffe08a',
+    brightBlue: '#aecaff', brightMagenta: '#dfbfff', brightCyan: '#82e4eb', brightWhite: '#ffffff',
+  }),
+  light: Object.freeze({
+    background: '#ffffff', foreground: '#17212b', cursor: '#086b99', cursorAccent: '#ffffff',
+    selectionBackground: '#c8e8f8', selectionForeground: '#17212b',
+    black: '#17212b', red: '#b5303d', green: '#23743b', yellow: '#986013',
+    blue: '#225dac', magenta: '#8144a8', cyan: '#087b83', white: '#69788a',
+    brightBlack: '#526273', brightRed: '#ca3d49', brightGreen: '#2b8243', brightYellow: '#a57213',
+    brightBlue: '#286ac2', brightMagenta: '#9451bc', brightCyan: '#09868d', brightWhite: '#8996a6',
+  }),
+});
+
+function scriptJson(value) {
+  return JSON.stringify(value)
+    .replace(/</g, '\\u003c')
+    .replace(/>/g, '\\u003e')
+    .replace(/&/g, '\\u0026')
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029');
+}
+
+export function uiPreferencesScript() {
+  return `(() => {
+    const dictionaries = ${scriptJson(UI_TRANSLATIONS)};
+    const fontSizes = [12, 13, 14, 15, 16, 18, 20];
+    const keys = {
+      language: 'hcc.lang', theme: 'hcc.theme', density: 'hcc.density',
+      terminalTheme: 'hcc.terminalTheme', fontSize: 'hcc.fontSize'
+    };
+    const defaults = {
+      language: 'system', theme: 'system', density: 'comfortable',
+      terminalTheme: 'system', fontSize: 14
+    };
+    const choices = {
+      language: ['system', 'en', 'zh'], theme: ['system', 'dark', 'light'],
+      density: ['comfortable', 'compact'], terminalTheme: ['system', 'dark', 'light']
+    };
+    const ids = {
+      language: 'langSelect', theme: 'themeSelect', density: 'densitySelect',
+      terminalTheme: 'terminalThemeSelect', fontSize: 'fontSizeSelect'
+    };
+    const bound = new WeakSet();
+    const memoryStorage = new Map();
+    function safeGet(key) {
+      if (memoryStorage.has(key)) return memoryStorage.get(key);
+      try { return window.localStorage.getItem(key); } catch (_) { return null; }
+    }
+    function safeSet(key, value) {
+      const text = String(value);
+      memoryStorage.set(key, text);
+      try { window.localStorage.setItem(key, text); return true; } catch (_) { return false; }
+    }
+    function valid(key, value) {
+      if (key === 'fontSize') {
+        const number = typeof value === 'number' ? value : Number(value);
+        return fontSizes.includes(number) ? number : undefined;
+      }
+      return choices[key] && choices[key].includes(value) ? value : undefined;
+    }
+    let preferences = Object.freeze(Object.fromEntries(Object.keys(defaults).map((key) => {
+      const value = valid(key, safeGet(keys[key]));
+      return [key, value === undefined ? defaults[key] : value];
+    })));
+    let colorMedia = null;
+    try {
+      if (typeof window.matchMedia === 'function') colorMedia = window.matchMedia('(prefers-color-scheme: dark)');
+    } catch (_) {}
+    function language() {
+      return preferences.language === 'system'
+        ? ((navigator.language || '').toLowerCase().startsWith('zh') ? 'zh' : 'en')
+        : preferences.language;
+    }
+    function theme() {
+      return preferences.theme === 'system' ? (colorMedia ? (colorMedia.matches ? 'dark' : 'light') : 'dark') : preferences.theme;
+    }
+    function tr(key, fallback = '') {
+      return dictionaries[language()]?.[key] || dictionaries.en?.[key] || fallback || key;
+    }
+    function nodes(root, selector) {
+      const result = Array.from(root.querySelectorAll(selector));
+      if (root.matches && root.matches(selector)) result.unshift(root);
+      return result;
+    }
+    function translate(root = document) {
+      nodes(root, '[data-i18n]').forEach((element) => {
+        element.textContent = tr(element.getAttribute('data-i18n'), element.textContent);
+      });
+      [
+        ['data-i18n-placeholder', 'placeholder'], ['data-i18n-title', 'title'],
+        ['data-i18n-aria', 'aria-label'], ['data-i18n-aria-label', 'aria-label']
+      ].forEach(([source, target]) => {
+        nodes(root, '[' + source + ']').forEach((element) => {
+          element.setAttribute(target, tr(element.getAttribute(source), element.getAttribute(target) || ''));
+        });
+      });
+    }
+    function syncControls(root = document) {
+      Object.entries(ids).forEach(([key, id]) => {
+        nodes(root, '[id="' + id + '"]').forEach((element) => { element.value = String(preferences[key]); });
+      });
+    }
+    function apply() {
+      document.documentElement.lang = language() === 'zh' ? 'zh-CN' : 'en';
+      document.documentElement.dataset.theme = theme();
+      document.documentElement.dataset.density = preferences.density;
+      syncControls();
+      translate();
+    }
+    function notify(changed) {
+      window.dispatchEvent(new CustomEvent('hcc:preferences', {
+        detail: { preferences, language: language(), theme: theme(), changed }
+      }));
+    }
+    function update(patch) {
+      if (!patch || typeof patch !== 'object') return preferences;
+      const next = { ...preferences };
+      const changed = [];
+      Object.keys(defaults).forEach((key) => {
+        if (!Object.prototype.hasOwnProperty.call(patch, key)) return;
+        const value = valid(key, patch[key]);
+        if (value === undefined || value === next[key]) return;
+        next[key] = value;
+        changed.push(key);
+        safeSet(keys[key], value);
+      });
+      preferences = Object.freeze(next);
+      apply();
+      if (changed.length) notify(changed);
+      return preferences;
+    }
+    function bindControls(root = document) {
+      Object.entries(ids).forEach(([key, id]) => {
+        nodes(root, '[id="' + id + '"]').forEach((element) => {
+          if (bound.has(element)) return;
+          bound.add(element);
+          element.addEventListener('change', () => update({ [key]: element.value }));
+        });
+      });
+      syncControls(root);
+      translate(root);
+    }
+    window.hccUi = {
+      get preferences() { return preferences; },
+      get language() { return language(); },
+      get theme() { return theme(); },
+      safeGet, safeSet, tr, translate, update, bindControls
+    };
+    apply();
+    const followSystemTheme = () => {
+      if (preferences.theme !== 'system') return;
+      apply();
+      notify(['resolvedTheme']);
+    };
+    if (colorMedia?.addEventListener) colorMedia.addEventListener('change', followSystemTheme);
+    else if (colorMedia?.addListener) colorMedia.addListener(followSystemTheme);
+    window.addEventListener('languagechange', () => {
+      if (preferences.language !== 'system') return;
+      apply();
+      notify(['resolvedLanguage']);
+    });
+  })();`;
+}
+
+export function preferenceControlsHtml({ terminal = false } = {}) {
+  const common = `
+    <label class="preference-field" for="langSelect">
+      <span data-i18n="language">Language</span>
+      <select id="langSelect">
+        <option value="system" data-i18n="setting.system">Follow system</option>
+        <option value="en">English</option>
+        <option value="zh">中文</option>
+      </select>
+    </label>
+    <label class="preference-field" for="themeSelect">
+      <span data-i18n="theme">Appearance</span>
+      <select id="themeSelect">
+        <option value="system" data-i18n="setting.system">Follow system</option>
+        <option value="dark" data-i18n="theme.dark">Dark</option>
+        <option value="light" data-i18n="theme.light">Light</option>
+      </select>
+    </label>
+    <label class="preference-field" for="densitySelect">
+      <span data-i18n="density">Density</span>
+      <select id="densitySelect">
+        <option value="comfortable" data-i18n="density.comfortable">Comfortable</option>
+        <option value="compact" data-i18n="density.compact">Compact</option>
+      </select>
+    </label>`;
+  if (!terminal) return common;
+  return common + `
+    <label class="preference-field" for="terminalThemeSelect">
+      <span data-i18n="terminalTheme">Terminal appearance</span>
+      <select id="terminalThemeSelect">
+        <option value="system" data-i18n="terminalTheme.follow">Follow appearance</option>
+        <option value="dark" data-i18n="theme.dark">Dark</option>
+        <option value="light" data-i18n="theme.light">Light</option>
+      </select>
+    </label>
+    <label class="preference-field" for="fontSizeSelect">
+      <span data-i18n="fontSize">Terminal font size</span>
+      <select id="fontSizeSelect">
+        ${[12, 13, 14, 15, 16, 18, 20].map((size) => `<option value="${size}">${size} px</option>`).join('\n        ')}
+      </select>
+    </label>`;
+}