@logicseek/hello-cc 1.0.5 → 1.1.0-rc.3

package/lib/web/ui-codex.mjs

@@ -1,4 +1,7 @@
-import { interactionPanelScript } from './ui-interactions.mjs';
+import { safeMarkdownScript, installSafeMarkdown } from './ui-safe-markdown.mjs';
+import { interactionPanelScript, installInteractionPanel } from './ui-interactions.mjs';
+import { codexAccountPanelHtml, codexAccountPanelCss, codexAccountPanelScript, installCodexAccountPanel } from './ui-codex-account.mjs';
+import { sessionToolsCss, sessionToolsHtml, sessionToolsScript, metricsHtml, traceFilterHtml, installSessionTools } from './ui-session-tools.mjs';
 
 export function codexPanelHtml() {
   return `<style>
@@ -63,7 +66,11 @@ export function codexPanelHtml() {
     .hcc-interaction-form label { display:grid; gap:5px; overflow-wrap:anywhere; }
     .hcc-interaction-form label:has(input[type=checkbox]) { display:flex; align-items:flex-start; }
     .hcc-interaction-form input:not([type=checkbox]), .hcc-interaction-form select { width:100%; min-height:36px; min-width:0; background:var(--input-bg); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:6px; }
-    .codex-approval-actions { display:flex; gap:8px; margin-top:12px; }
+    .hcc-mcp-field { min-width:0; border:1px solid var(--border); border-radius:6px; padding:10px; }
+    .hcc-mcp-field legend,.hcc-mcp-field p { overflow-wrap:anywhere; }
+    .hcc-mcp-field small { color:var(--muted); }
+    .hcc-mcp-field .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
+    .codex-approval-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
     .codex-jump { flex:none; text-align:center; padding:6px; border-top:1px solid var(--border); }
     .codex-composer { flex:none; padding:12px 16px; border-top:1px solid var(--border); background:var(--panel); max-height:40%; overflow:auto; }
     .codex-composer-inner { max-width:900px; margin:auto; }
@@ -80,12 +87,19 @@ export function codexPanelHtml() {
       .codex-segment-nav button { min-height:44px; flex:1; }
       .codex-approval dl { grid-template-columns:1fr; gap:3px; } .codex-approval dd { margin-bottom:6px; }
     }
+    ${codexAccountPanelCss()}
+    ${sessionToolsCss}
+    .codex-event-source { width:min(780px,calc(100vw - 24px)); max-height:80dvh; overflow:auto; padding:16px; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:8px; }
+    .codex-event-source textarea { width:100%; min-height:240px; max-height:50dvh; resize:vertical; font-family:var(--mono); color:var(--text); background:var(--input-bg); }
+    .codex-event-source .row { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
   </style>
   <section id="codexPanel" hidden aria-label="Codex">
     <header class="codex-header"><div id="codexStatus" role="status"></div><button id="codexApprovalJump" type="button" hidden>Approval required</button></header>
     <nav id="codexHistory" class="codex-history" hidden aria-label="Conversation history"><button id="codexEarlier" type="button" aria-controls="codexTimeline">Earlier</button><span id="codexHistoryRange" role="status"></span><button id="codexLater" type="button" aria-controls="codexTimeline">Newer</button></nav>
     <div id="codexScroll" class="codex-scroll" tabindex="0" aria-label="Conversation">
       <div id="codexApprovals" aria-live="polite"></div>
+      ${codexAccountPanelHtml('codex')}
+      ${traceFilterHtml('codex')}${metricsHtml('codex')}
       <div id="codexTimeline"></div>
       <details id="codexReview" class="codex-review" hidden data-details-key="review"><summary id="codexReviewLabel">Latest turn changes and plan</summary><div id="codexPlan"></div><div id="codexDiff"></div></details>
     </div>
@@ -93,30 +107,44 @@ export function codexPanelHtml() {
     <footer class="codex-composer"><div class="codex-composer-inner">
       <label for="codexDraft" id="codexDraftLabel">Message saved in this browser</label>
       <textarea id="codexDraft" rows="3"></textarea>
+      ${sessionToolsHtml('codex')}
       <div class="codex-composer-actions">
         <button id="codexSend" class="primary" type="button">Send</button><button id="codexInterrupt" type="button">Interrupt turn</button>
         <button id="codexRecover" type="button">Read current state</button><button id="codexClear" type="button">Clear draft</button>
       </div><p id="codexSubmission" role="status"></p>
     </div></footer>
+    <dialog id="codexEventDialog" class="codex-event-source" aria-labelledby="codexEventTitle"><h3 id="codexEventTitle">Reported event</h3><p id="codexEventBoundary"></p><textarea id="codexEventSource" readonly aria-label="Reported event JSON"></textarea><div class="row"><button id="codexEventCopy" type="button">Copy full event</button><button id="codexEventClose" type="button">Back to result</button></div></dialog>
   </section>`;
 }
 
 export function codexPanelScript() {
-  return interactionPanelScript() + String.raw`(() => {
+  return sessionToolsScript() + safeMarkdownScript() + codexAccountPanelScript() + interactionPanelScript() + "(" + installCodexPanel.toString() + ")(false);";
+}
+
+export function installCodexPanel(installDependencies = true) {
+  if (installDependencies) { installSessionTools(); installSafeMarkdown(); installCodexAccountPanel(); installInteractionPanel(); }
     const panel = document.getElementById('codexPanel');
     const draft = document.getElementById('codexDraft');
     const scroller = document.getElementById('codexScroll');
     const views = new Map();
     const approving = new Set();
+    const accountPending = new Set(), accountReads = new Set();
     const PAGE_SIZE = 80;
     const SEGMENT_CHARS = 12000, SEGMENT_LINES = 200;
     let copies = [], timelineHtml = '', timelineSignature = '', timelineCopies = [], entries = [];
     let blocks = [], timelineBlocks = [], blockScope = '', blockOrder = 0;
     let state = null, key = '', pending = null, submitting = false;
     let stateRevision = 0, subjectRevision = 0, readSequence = 0;
+    let inspectedEvent = '';
     const text = (en, zh) => window.hccUi.language === 'zh' ? zh : en;
     const bridge = () => window.hccHandoff;
     const escape = (value) => bridge().esc(String(value ?? ''));
+    const contextTools = window.hccCreateSessionTools({ document, window, prefix: 'codex', bridge, draft, save: () => { save(); sync(); }, state: () => state, text, escape });
+    const traceFilter = window.hccCreateTraceFilter({ document, prefix: 'codex', text, escape, changed: () => {
+      if (!state) return;
+      const reading = view(); reading.follow = false; reading.startKey = ''; reading.top = 0; timelineSignature = '';
+      render(state, true);
+    } });
     function draftKey() { return 'hcc.codexDraft:' + bridge().projectRoot + ':' + bridge().active + (bridge().draftScope ? ':' + bridge().draftScope : ''); }
     function subject() { const b = bridge(); return { root: b.projectRoot, id: b.active, key: draftKey(), token: b.actionToken, epoch: b.epoch }; }
     function matches(target) { return target.root === bridge().projectRoot && target.id === bridge().active; }
@@ -207,74 +235,7 @@ export function codexPanelScript() {
         + '</span><button type="button" data-copy="' + index + '">' + escape(ranges.length > 1 ? text('Copy full text', '复制全文') : text('Copy', '复制'))
         + '</button></div>' + body + '</div>';
     }
-    function inline(value, allowBold = true) {
-      const tick = String.fromCharCode(96), source = String(value), fragments = [];
-      let index = 0, plain = '';
-      const flush = () => { if (plain) fragments.push(escape(plain)); plain = ''; };
-      const codeEnd = start => {
-        const end = source.indexOf(tick, start + 1), newline = source.indexOf('\n', start + 1);
-        return end > start + 1 && (newline === -1 || end < newline) ? end : -1;
-      };
-      while (index < source.length) {
-        if (source[index] === tick && codeEnd(index) !== -1) {
-          const end = codeEnd(index);
-          flush(); fragments.push('<code>' + escape(source.slice(index + 1, end)) + '</code>'); index = end + 1;
-          continue;
-        }
-        const marker = source.slice(index, index + 2);
-        if (allowBold && (marker === '**' || marker === '__')) {
-          let end = index + 2;
-          while (end < source.length && source[end] !== '\n') {
-            // Code spans are opaque: bold markers inside them are literal text.
-            if (source[end] === tick && codeEnd(end) !== -1) { end = codeEnd(end) + 1; continue; }
-            if (source.startsWith(marker, end)) break;
-            end += 1;
-          }
-          if (end > index + 2 && source.startsWith(marker, end)) {
-            flush(); fragments.push('<strong>' + inline(source.slice(index + 2, end), false) + '</strong>'); index = end + 2;
-            continue;
-          }
-        }
-        plain += source[index]; index += 1;
-      }
-      flush(); return fragments.join('');
-    }
-    function markdown(value) {
-      const lines = String(value).split('\n'), parts = [];
-      let paragraph = [], list = [], listType = '', listStart = '', quote = [];
-      const flushParagraph = () => { if (paragraph.length) parts.push('<p class="codex-prose">' + inline(paragraph.join('\n')) + '</p>'); paragraph = []; };
-      const flushList = () => {
-        if (list.length) parts.push('<' + listType + (listType === 'ol' && listStart !== '1' ? ' start="' + listStart + '"' : '') + '>'
-          + list.map(line => '<li>' + inline(line) + '</li>').join('') + '</' + listType + '>');
-        list = []; listType = ''; listStart = '';
-      };
-      const flushQuote = () => { if (quote.length) parts.push('<blockquote>' + quote.map(line => inline(line)).join('<br>') + '</blockquote>'); quote = []; };
-      for (const line of lines) {
-        const heading = /^(#{1,6})\s+(.+)$/.exec(line);
-        const unordered = /^\s{0,3}[-+*]\s+(.+)$/.exec(line);
-        const ordered = /^\s{0,3}(\d{1,9})[.)]\s+(.+)$/.exec(line);
-        const quoted = /^\s{0,3}>\s?(.*)$/.exec(line);
-        if (heading) {
-          flushParagraph(); flushList(); flushQuote();
-          const tag = 'h' + heading[1].length;
-          parts.push('<' + tag + '>' + inline(heading[2].replace(/\s+#+\s*$/, '')) + '</' + tag + '>');
-        } else if (unordered || ordered) {
-          flushParagraph(); flushQuote();
-          const nextType = unordered ? 'ul' : 'ol';
-          if (listType && listType !== nextType) flushList();
-          if (!listType) { listType = nextType; listStart = ordered ? String(Number(ordered[1])) : ''; }
-          list.push(unordered ? unordered[1] : ordered[2]);
-        } else if (quoted) {
-          flushParagraph(); flushList(); quote.push(quoted[1]);
-        } else {
-          flushList(); flushQuote();
-          if (!line.trim()) flushParagraph();
-          else paragraph.push(line);
-        }
-      }
-      flushParagraph(); flushList(); flushQuote();
-      return '<div class="codex-markdown">' + parts.join('') + '</div>';
-    }
+    const markdown = window.hccSafeMarkdown(escape);
     function prose(value) {
       const content = String(value ?? '');
       if (segmentRanges(content).length > 1) return codeBlock(content, text('Long message · Plain-text sections', '长消息 · 纯文本分段'), false, true);
@@ -309,7 +270,7 @@ export function codexPanelScript() {
       if (type === 'userMessage' || type === 'agentMessage') {
         return '<article class="codex-card codex-card-' + (type === 'userMessage' ? 'user' : 'agent') + '" data-card-key="' + escape(id)
           + '"><div class="codex-card-heading"><strong>' + escape(type === 'userMessage' ? text('You', '你') : text('Assistant', '助手'))
-          + '</strong></div>' + prose(content) + '</article>';
+          + '</strong><button type="button" data-codex-event="' + escape(id) + '">' + escape(text('Event details', '事件详情')) + '</button></div>' + prose(content) + '</article>';
       }
       const titles = {
         commandExecution: text('Command', '命令'), fileChange: text('File changes', '文件修改'),
@@ -343,10 +304,24 @@ export function codexPanelScript() {
       const summary = '<strong>' + escape(titles[type] || type || text('Event', '事件')) + '</strong><span class="codex-tool-preview">'
         + escape(String(preview).slice(0, 180)) + '</span>' + status;
       return '<article class="codex-card' + (error ? ' codex-card-error' : '') + '" data-card-key="' + escape(id) + '">'
-        + details(id, summary, body, Boolean(error) || !['completed', 'declined'].includes(item.status)) + '</article>';
+        + details(id, summary, body, Boolean(error) || !['completed', 'declined'].includes(item.status)) + '<button type="button" data-codex-event="' + escape(id) + '">' + escape(text('Event details', '事件详情')) + '</button></article>';
     }
     function bindReadActions(container) {
       const currentKey = key;
+      container.querySelectorAll('button[data-codex-event]').forEach(button => button.addEventListener('click', () => {
+        if (key !== currentKey) return;
+        const entry = entries.find(({turn, item, index}) => turn.id + ':' + (item?.id || index) === button.dataset.codexEvent);
+        if (!entry) return;
+        inspectedEvent = JSON.stringify({ threadId: activeThread()?.id, turnId: entry.turn.id, item: entry.item }, null, 2);
+        let end = Math.min(inspectedEvent.length, 12000);
+        if (end < inspectedEvent.length && /[\uD800-\uDBFF]/.test(inspectedEvent[end-1])) end--;
+        document.getElementById('codexEventSource').value = inspectedEvent.slice(0,end);
+        document.getElementById('codexEventTitle').textContent = text('Reported event', '执行器报告的事件') + ' · ' + entry.turn.id;
+        document.getElementById('codexEventBoundary').textContent = end + ' / ' + inspectedEvent.length + text(' characters shown. This is the retained item, not an inferred transcript.', ' 个字符已显示；这是保留的事件内容，不是推断的完整记录。');
+        document.getElementById('codexEventCopy').textContent = text('Copy full event', '复制完整事件');
+        document.getElementById('codexEventClose').textContent = text('Back to result', '回到结果');
+        document.getElementById('codexEventDialog').showModal();
+      }));
       container.querySelectorAll('details[data-details-key]').forEach(node => {
         node.addEventListener('toggle', () => { if (key === currentKey && node.isConnected !== false) view().details.set(node.dataset.detailsKey, node.open); });
       });
@@ -415,6 +390,12 @@ export function codexPanelScript() {
       entries = turns.flatMap((turn, turnIndex) => (turn.items?.length ? turn.items : [null]).map((item, index) => ({
         turn, turnIndex, item, index, id: JSON.stringify([turn.id, item?.id ?? index])
       })));
+      const total = entries.length;
+      entries = entries.filter(({ turn, item }) => window.hccTraceMatches({ turnId: turn.id,
+        kind: item?.type === 'fileChange' ? 'files' : ['commandExecution','mcpToolCall','dynamicToolCall','webSearch'].includes(item?.type) ? 'tool' : item?.error ? 'error' : 'message',
+        status: item?.status || turn.status, exitCode: item?.exitCode, title: item?.type, text: item ? JSON.stringify(item) : turn.error?.message || '',
+        changes: item?.changes || [] }, traceFilter.value()));
+      traceFilter.render(turns.map(turn => turn.id), entries.length, total);
       let start = reading.follow ? Math.max(0, entries.length - PAGE_SIZE)
         : reading.startKey ? entries.findIndex(entry => entry.id === reading.startKey) : 0;
       // If retention removed the old anchor, show the oldest surviving history.
@@ -465,14 +446,22 @@ export function codexPanelScript() {
         subjectRevision += 1;
         if (key && state) view().top = scroller.scrollTop || 0;
         key = next; pending = null; draft.value = ''; state = null;
+        traceFilter.reset(key);
+        traceFilter.render([], 0, 0);
+        inspectedEvent = ''; document.getElementById('codexEventSource').value = '';
+        document.getElementById('codexEventDialog').close?.();
         timelineHtml = ''; timelineSignature = ''; timelineCopies = []; copies = []; entries = []; blocks = []; timelineBlocks = [];
         document.getElementById('codexHistory').hidden = true;
         for (const id of ['codexStatus', 'codexTimeline', 'codexDiff', 'codexPlan', 'codexApprovals', 'codexSubmission']) document.getElementById(id).textContent = '';
         document.getElementById('codexReview').open = view().details.get('review') || false;
+        document.getElementById('codexAccount').open = view().details.get('account') || false;
         document.getElementById('codexReview').hidden = true;
         scroller.scrollTop = view().top;
         try { const stored = JSON.parse(window.hccUi.safeGet(key) || '{}'); draft.value = stored.text || ''; pending = stored.pending || null; } catch (_) {}
       }
+      window.hccCodexAccount.render('codex', state?.account, { connected: state?.status === 'ready', pending: accountPending.has(key + '/' + state?.executorId) });
+      contextTools.render();
+      window.hccRenderReportedMetrics({ document, prefix: 'codex', state, text, escape });
       document.getElementById('codexSend').textContent = turnId() ? text('Add instruction', '追加指令') : text('Send', '发送');
       document.getElementById('codexDraftLabel').textContent = text('Message saved in this browser', '消息草稿保存在当前浏览器');
       document.getElementById('codexInterrupt').textContent = text('Interrupt turn', '中断当前轮');
@@ -506,6 +495,12 @@ export function codexPanelScript() {
       // Local paging and preference redraws reuse state; incoming snapshots do not.
       if (value !== state) stateRevision += 1;
       state = value; sync();
+      const accountKey = key + '/' + state.executorId;
+      if (state.status === 'ready' && state.executorId && !accountReads.has(accountKey)) {
+        accountReads.add(accountKey);
+        if (accountReads.size > 100) accountReads.delete(accountReads.values().next().value);
+        void readAccount();
+      }
       const thread = activeThread();
       document.getElementById('codexStatus').textContent = [text('Executor', '执行器') + ': ' + statusLabel(state.status),
         text('Thread', '会话') + ': ' + (thread?.id || ''), turnId() ? text('Turn', '当前轮') + ': ' + turnId() : text('Idle', '空闲'),
@@ -536,12 +531,12 @@ export function codexPanelScript() {
       container.innerHTML = approvals.map((approval, index) => {
         blockScope = 'approval:' + executorId + ':' + approval.requestId; blockOrder = 0;
         const params = approval.params || {}, fields = [
-          [text('Operation', '操作'), approval.kind === 'userInput' ? text('Answer questions', '回答问题') : approval.kind === 'permissions' ? text('Grant permissions', '授予权限') : approval.method?.includes('fileChange') ? text('Change files', '修改文件') : text('Run command', '执行命令')],
+          [text('Operation', '操作'), approval.kind === 'mcp' ? text('MCP request', 'MCP 请求') : approval.kind === 'userInput' ? text('Answer questions', '回答问题') : approval.kind === 'permissions' ? text('Grant permissions', '授予权限') : approval.method?.includes('fileChange') ? text('Change files', '修改文件') : text('Run command', '执行命令')],
           [text('Command', '命令'), params.command], [text('Directory', '目录'), params.cwd],
-          [text('Reason', '原因'), params.reason], [text('Path', '路径'), params.path],
+          [text('MCP server', 'MCP 服务'), params.serverName], [text('Reason', '原因'), params.reason || params.message], [text('Path', '路径'), params.path],
           [text('Permission root', '权限目录'), params.grantRoot]
         ].filter(([, value]) => value != null && value !== '');
-        return '<article class="codex-card codex-approval"><h3>' + escape(approval.kind === 'userInput' ? text('Your input is required', '等待您的答复') : text('Approval required', '等待人工审批'))
+        return '<article class="codex-card codex-approval"><h3>' + escape(window.hccInteractions.requiresInput(approval) ? text('Your input is required', '等待您的答复') : text('Approval required', '等待人工审批'))
           + '</h3><dl>' + fields.map(([label, value], fieldIndex) => {
             const fullValue = typeof value === 'string' ? value : JSON.stringify(value);
             return '<dt>' + escape(label) + '</dt><dd>'
@@ -550,11 +545,12 @@ export function codexPanelScript() {
           }).join('') + '</dl>'
           + (approval.truncated ? '<p class="codex-prose">' + escape(text('Parameters are truncated. Read the full operation before deciding.', '参数已截断，请核对完整操作后再决定。')) + '</p>' : '')
           + details('approval:' + approval.requestId, '<strong>' + escape(text('Raw parameters', '原始参数')) + '</strong>',
-            codeBlock(JSON.stringify(params, null, 2), 'JSON'), false)
+            codeBlock(JSON.stringify(window.hccInteractions.previewParams(approval), null, 2), 'JSON'), false)
           + '<div class="hcc-interaction-form">' + window.hccInteractions.form(approval, approvalKey(target, executorId, approval.requestId), escape, text) + '</div>'
-          + '<div class="codex-approval-actions"><button data-approval="' + index + '" data-decision="accept" data-truncated="' + !!approval.truncated + '" data-request-key="' + escape(approvalKey(target, executorId, approval.requestId)) + '" type="button" class="primary">'
-          + escape(approval.kind === 'userInput' ? text('Send answers', '提交答复') : approval.kind === 'permissions' ? text('Grant selected permissions', '授予所选权限') : text('Approve once', '批准本次')) + '</button><button data-approval="' + index + '" data-decision="' + (approval.kind === 'userInput' ? 'cancel' : 'decline') + '" data-request-key="' + escape(approvalKey(target, executorId, approval.requestId)) + '" type="button">'
-          + escape(approval.kind === 'userInput' ? text('Cancel questions', '取消问答') : text('Decline', '拒绝')) + '</button></div></article>';
+          + '<div class="codex-approval-actions"><button data-approval="' + index + '" data-decision="accept" data-truncated="' + window.hccInteractions.approvalBlocked(approval) + '" data-request-key="' + escape(approvalKey(target, executorId, approval.requestId)) + '" type="button" class="primary">'
+          + escape(window.hccInteractions.acceptLabel(approval, text)) + '</button><button data-approval="' + index + '" data-decision="' + (approval.kind === 'userInput' ? 'cancel' : 'decline') + '" data-request-key="' + escape(approvalKey(target, executorId, approval.requestId)) + '" type="button">'
+          + escape(approval.kind === 'userInput' ? text('Cancel questions', '取消问答') : text('Decline', '拒绝')) + '</button>'
+          + (approval.kind === 'mcp' ? '<button data-approval="' + index + '" data-decision="cancel" data-request-key="' + escape(approvalKey(target, executorId, approval.requestId)) + '" type="button">' + escape(text('Cancel request', '取消请求')) + '</button>' : '') + '</div></article>';
       }).join('');
       window.hccInteractions.restore(container);
       bindReadActions(container);
@@ -566,11 +562,18 @@ export function codexPanelScript() {
           const requestKey = approvalKey(target, executorId, approval.requestId);
           approving.add(requestKey); sync();
           const requestTarget = { ...target, token: bridge().actionToken, epoch: bridge().epoch };
-          try { await action('approve', { executorId, threadId: approval.threadId,
+          let authorization;
+          try {
+            const payload = window.hccInteractions.payload(approval, ['userInput','permissions','mcp'].includes(approval.kind) ? button.closest('article') : null, button.dataset.decision);
+            authorization = window.hccInteractions.prepareUrl(approval, button.dataset.decision, text);
+            await action('approve', { executorId, threadId: approval.threadId,
             turnId: approval.turnId, requestId: approval.requestId,
-            ...window.hccInteractions.payload(approval, ['userInput','permissions'].includes(approval.kind) ? button.closest('article') : null, button.dataset.decision) }, requestTarget);
-            window.hccInteractions.forget(requestKey); }
-          catch (error) { if (matches(target)) message(error.detail || error.message); }
+            ...payload }, requestTarget);
+            window.hccInteractions.forget(requestKey);
+            const opened = authorization?.complete();
+            if (opened && matches(target)) message(opened);
+          }
+          catch (error) { authorization?.cancel(); if (matches(target)) message(error.detail || error.message); }
           finally { approving.delete(requestKey); if (matches(target)) sync(); }
         });
       });
@@ -611,7 +614,25 @@ export function codexPanelScript() {
       scroller.scrollTop = 0; view().top = 0; view().follow = pinned() && view().end === view().total; updateJump();
     });
     document.getElementById('codexReview').addEventListener('toggle', () => { view().details.set('review', document.getElementById('codexReview').open); });
+    document.getElementById('codexAccount').addEventListener('toggle', () => { view().details.set('account', document.getElementById('codexAccount').open); });
+    async function readAccount() {
+      if (!state?.executorId || state.status !== 'ready' || accountPending.has(key + '/' + state.executorId)) return;
+      const target = { ...subject(), executorId: state.executorId, revision: subjectRevision }, version = stateRevision;
+      const accountScope = target.key + '/' + target.executorId;
+      accountPending.add(accountScope); sync();
+      try {
+        const result = await bridge().api(route(target, 'account') + '&executorId=' + encodeURIComponent(target.executorId));
+        if (matches(target) && target.revision === subjectRevision && state?.executorId === result.executorId && version === stateRevision) render({ ...state, account: result.account });
+      } catch (error) { if (matches(target) && target.revision === subjectRevision && state?.executorId === target.executorId && version === stateRevision) message(error.detail || error.message); }
+      finally { accountPending.delete(accountScope); if (matches(target)) sync(); }
+    }
+    document.getElementById('codexAccountRead').addEventListener('click', readAccount);
     draft.addEventListener('input', save);
+    document.getElementById('codexEventClose').addEventListener('click', () => document.getElementById('codexEventDialog').close());
+    document.getElementById('codexEventCopy').addEventListener('click', async () => {
+      try { await navigator.clipboard.writeText(inspectedEvent); document.getElementById('codexEventCopy').textContent = text('Copied', '已复制'); }
+      catch { document.getElementById('codexEventCopy').textContent = text('Select text to copy', '请选择文本复制'); }
+    });
     draft.addEventListener('keydown', event => {
       if (!event.isComposing && event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
         event.preventDefault();
@@ -663,5 +684,4 @@ export function codexPanelScript() {
     });
     window.addEventListener('hcc:preferences', () => { if (state && !panel.hidden) render(state); });
     window.hccCodex = { render, sync };
-  })();`;
 }

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

@@ -47,10 +47,26 @@ export function commandPaletteHtml() {
   </div>`;
 }
 
-export function commandPaletteScript() {
-  return `(() => {
-    const filter = ${filterCommands.toString()};
-    const shortcut = ${shortcutAction.toString()};
+export function commandPaletteScript() { return '(' + installCommandPalette.toString() + ')();'; }
+
+export function installCommandPalette() {
+(() => {
+    const filter = 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);
+};
+    const shortcut = 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;
+};
     const host = window.hccCommandHost;
     const dialog = document.getElementById('commandDialog');
     const query = document.getElementById('commandQuery');
@@ -115,5 +131,5 @@ export function commandPaletteScript() {
     document.getElementById('commandClose').addEventListener('click', () => host.closeDialog(dialog));
     window.addEventListener('hcc:preferences', refresh);
     window.hccCommandPalette = {open, refresh, captures};
-  })();`;
+  })();
 }

package/lib/web/ui-file-writes.mjs

@@ -0,0 +1,220 @@
+export const fileWritesCss = `
+  .files-upload { border:1px solid var(--border); border-radius:8px; padding:8px; }
+  .files-upload form { display:grid; gap:6px; padding-top:8px; }
+  .files-upload input { width:100%; min-width:0; }
+  .files-upload input[type=file] { height:auto; font-size:var(--small-font); }
+  .files-editor { flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; }
+  .files-editor textarea { flex:1; min-height:150px; width:100%; resize:vertical; background:var(--input-bg); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:10px; font:var(--small-font)/1.6 var(--mono); }
+  .files-write-status { margin:0; overflow-wrap:anywhere; font-size:var(--small-font); color:var(--muted); }
+  .files-server-copy { overflow:auto; max-height:160px; }
+  .files-server-copy pre { white-space:pre-wrap; overflow-wrap:anywhere; }
+`;
+export function fileUploadHtml() {
+  return `<details class="files-upload" id="filesUploadPanel"><summary data-i18n="files.upload">Upload file</summary><form id="filesUploadForm">
+    <input id="filesUploadInput" type="file" data-i18n-aria="files.chooseUpload" aria-label="Choose one file to upload">
+    <label><span data-i18n="files.uploadName">Target file name</span><input id="filesUploadName" type="text" autocomplete="off" maxlength="255"></label>
+    <p id="filesUploadTarget" class="files-write-status"></p><p class="files-write-status" data-i18n="files.uploadHelp">One file, up to 10 MiB. Existing files will not be replaced.</p>
+    <div class="files-toolbar"><button id="filesUploadBtn" type="submit" data-i18n="files.upload">Upload file</button><button id="filesUploadCheck" type="button" data-i18n="files.checkUpload" hidden>Check target file</button></div>
+    <p id="filesUploadStatus" class="files-write-status" role="status" aria-live="polite"></p></form></details>`;
+}
+export function fileEditorHtml() {
+  return `<div class="files-toolbar"><button id="filesEdit" type="button" data-i18n="files.edit" hidden>Edit text</button></div>
+    <div id="filesEditPanel" class="files-editor" hidden><p class="files-write-status" data-i18n="files.draftHelp">Drafts stay in this page when you switch files or close this window. Reloading the page can discard them.</p>
+      <textarea id="filesEditor" spellcheck="false" data-i18n-aria="files.editText" aria-label="File text"></textarea>
+      <div class="files-toolbar"><button id="filesSave" type="button" data-i18n="files.save">Save file</button><button id="filesCancelEdit" type="button" data-i18n="files.keepDraft">Back to preview</button><button id="filesVerifySave" type="button" data-i18n="files.verifySave" hidden>Read saved file</button><button id="filesDiscardEdit" type="button" data-i18n="files.discardEdit">Discard draft and reload</button></div>
+      <p id="filesEditStatus" class="files-write-status" role="status" aria-live="polite"></p><details id="filesServerCopy" class="files-server-copy" hidden><summary data-i18n="files.serverCopy">Current saved content</summary><pre id="filesServerContent"></pre></details>
+    </div>`;
+}
+export function editableFile(value) {
+  return Boolean(value && value.editable !== false && ['text','markdown','html'].includes(value.kind) && value.encoding === 'utf8' && !value.truncated
+    && typeof value.revision === 'string' && value.revision && typeof value.content === 'string' && value.size <= 1024*1024);
+}
+
+export function createFileWrites({browser=globalThis,context,updated,uploaded}) {
+  const {window,document}=browser, bridge=window.hccHandoff, node=id=>document.getElementById(id), tr=key=>bridge.tr(key);
+  const drafts=new Map(), uploads=new Map(); let active=null, upload=null;
+  const key=(root,path,identity='')=>JSON.stringify([root,identity,path]);
+  const route=(path,root)=>path+(path.includes('?') ? '&' : '?')+'root='+encodeURIComponent(root);
+  const writable=()=>bridge.draftScope!=='auxiliary';
+  const bound=now=>!now.hidden && now.root===bridge.projectRoot && (now.identity || '')===(bridge.projectIdentity || '');
+  const visible=target=>{ const now=context(); return bound(now) && now.root===target.root && now.identity===target.identity && now.path===target.path; };
+  const uploadVisible=target=>{ const now=context(); return bound(now) && now.root===target.root && now.identity===target.identity && now.directory===target.directory; };
+  const sameVisit=visit=>{const now=context();return bound(now) && now.root===visit.root && now.identity===visit.identity && now.visit===visit.visit && now.path===visit.path;};
+  const editorText=value=>value.replace(/\r\n?/g,'\n');
+  const utf8=value=>new browser.TextEncoder().encode(value);
+  const hash=async bytes=>Array.from(new browser.Uint8Array(await browser.crypto.subtle.digest('SHA-256',bytes)),byte=>byte.toString(16).padStart(2,'0')).join('');
+  const uncertain=error=>!error.status || error.status>=500 || ['REQUEST_TIMEOUT','REQUEST_SUPERSEDED','FILE_WRITE_UNCONFIRMED'].includes(error.code);
+  function saveUploadRecovery(target) {
+    const value=target.uncertain ? {path:target.path,name:target.name,size:target.size,hash:target.hash,uncertain:true} : null;
+    window.hccUi?.safeSet('hcc.fileUpload:'+key(target.root,target.directory,target.identity),JSON.stringify(value));
+  }
+  function uploadFor(root,directory,identity) {
+    const storageKey=key(root,directory,identity);
+    if (!uploads.has(storageKey)) {
+      const target={root,directory,identity,file:null,name:'',status:'',error:'',busy:false,uncertain:false};
+      try {
+        const saved=JSON.parse(window.hccUi?.safeGet('hcc.fileUpload:'+storageKey)||'null');
+        if (saved?.uncertain && typeof saved.path==='string' && typeof saved.hash==='string' && /^[a-f0-9]{64}$/.test(saved.hash) && Number.isSafeInteger(saved.size)) Object.assign(target,saved,{status:'files.uploadUncertain'});
+      } catch {}
+      uploads.set(storageKey,target);
+    }
+    return uploads.get(storageKey);
+  }
+  function editorRender() {
+    const now=context(), candidate=now.value, target=active;
+    const eligible=writable() && (editableFile(candidate) || Boolean(target));
+    node('filesEdit').hidden=!eligible || Boolean(target?.editing);
+    node('filesEdit').textContent=tr(target?.content!==target?.base ? 'files.resumeDraft' : 'files.edit');
+    const editing=Boolean(target?.editing && visible(target));
+    node('filesEditPanel').hidden=!editing; node('filesPreview').hidden=editing;
+    if (!editing) return;
+    if (node('filesEditor').value!==target.content) node('filesEditor').value=target.content;
+    node('filesEditor').disabled=Boolean(target.discarding);
+    node('filesSave').disabled=target.busy || target.checking || target.conflict || target.uncertain || target.content===target.base;
+    node('filesDiscardEdit').disabled=target.busy || target.checking;
+    node('filesVerifySave').hidden=!target.conflict && !target.uncertain;
+    node('filesVerifySave').disabled=target.busy || target.checking;
+    node('filesEditStatus').textContent=tr(target.status || (target.content===target.base ? 'files.editReady' : 'files.unsaved'))
+      +(target.newline==='mixed' ? ' '+tr('files.mixedNewlines') : '')+(target.error ? ' '+target.error : '');
+    node('filesServerCopy').hidden=!target.latest;
+    node('filesServerContent').textContent=target.latest?.content || '';
+  }
+  function uploadRender() {
+    const now=context();
+    node('filesUploadPanel').hidden=!writable();
+    if (!writable() || !now.root) return;
+    const next=uploadFor(now.root,now.directory,now.identity);
+    if (upload!==next) { upload=next; node('filesUploadInput').value=''; }
+    node('filesUploadName').value=upload.name;
+    const locked=upload.busy || upload.uncertain;
+    node('filesUploadInput').disabled=locked; node('filesUploadName').disabled=locked;
+    node('filesUploadBtn').disabled=locked || !upload.file || !upload.name || upload.blockedName===upload.name;
+    node('filesUploadCheck').hidden=!upload.uncertain; node('filesUploadCheck').disabled=upload.busy;
+    const path=upload.path && locked ? upload.path : [now.directory,upload.name].filter(Boolean).join('/');
+    node('filesUploadTarget').textContent=path ? tr('files.uploadTarget')+' '+path : '';
+    node('filesUploadStatus').textContent=(upload.status ? tr(upload.status) : '')+(upload.error ? ' '+upload.error : '');
+  }
+  function sync() { editorRender(); uploadRender(); }
+  function select() {
+    const now=context(); active=drafts.get(key(now.root,now.path,now.identity)) || null;
+    if (active && now.value && !active.busy && !active.uncertain && now.value.revision!==active.revision) {
+      if (active.content===active.base && editableFile(now.value)) {
+        active.content=editorText(now.value.content); active.base=active.content; active.revision=now.value.revision; active.newline=now.value.newline;
+      } else { active.conflict=true; active.status='files.editConflict'; }
+    }
+    sync();
+  }
+  function suspend() { active=null; node('filesEditPanel').hidden=true; node('filesEdit').hidden=true; node('filesPreview').hidden=false; }
+  function begin() {
+    const now=context(); if (!writable() || !bound(now)) return;
+    if (!active) {
+      if (!editableFile(now.value)) return;
+      active={root:now.root,identity:now.identity,path:now.path,revision:now.value.revision,base:editorText(now.value.content),content:editorText(now.value.content),newline:now.value.newline,status:'',error:'',editing:true,busy:false,conflict:false,uncertain:false};
+      drafts.set(key(now.root,now.path,now.identity),active);
+    }
+    active.editing=true; editorRender(); node('filesEditor').focus();
+  }
+  async function save() {
+    const target=active, visit={...context()};
+    if (!writable() || !target || !visible(target) || target.busy || target.checking || target.conflict || target.uncertain || target.content===target.base) return;
+    const submittedEditor=target.content, content=target.newline==='crlf' ? target.content.replace(/\n/g,'\r\n') : target.content;
+    if (utf8(content).length>1024*1024) { target.status='files.textTooLarge'; editorRender(); return; }
+    target.submitted=content; target.busy=true; target.status='files.saving'; target.error=''; editorRender();
+    try {
+      const result=await bridge.api(route('/api/files/content',target.root),{method:'PUT',body:JSON.stringify({path:target.path,revision:target.revision,content})});
+      if (result.saved!==true || result.path!==target.path || typeof result.revision!=='string') throw new Error(tr('files.saveUncertain'));
+      const next={...visit.value,...result,content,bom:content.startsWith('\uFEFF'),newline:content.includes('\r\n') ? 'crlf' : content.includes('\n') ? 'lf' : 'none'};
+      target.base=submittedEditor; target.revision=next.revision; target.newline=next.newline; target.status=target.content===submittedEditor ? 'files.saved' : 'files.savedWithDraft'; target.submitted=null;
+      if (sameVisit(visit)) updated(next);
+    } catch (error) {
+      target.error=error.detail || error.message;
+      if (error.status===409) { target.conflict=true; target.status='files.editConflict'; }
+      else if (uncertain(error)) { target.uncertain=true; target.status='files.saveUncertain'; }
+      else { target.status='files.saveFailed'; target.submitted=null; }
+    } finally { target.busy=false; if (visible(target)) editorRender(); }
+  }
+  async function verify() {
+    const target=active, visit={...context()};
+    if (!writable() || !target || !visible(target) || target.busy || target.checking) return;
+    target.checking=true; target.error=''; editorRender();
+    try {
+      const next=await bridge.api(route('/api/files/preview?path='+encodeURIComponent(target.path),target.root));
+      target.latest=next;
+      if (editableFile(next) && target.submitted!==null && target.submitted!==undefined && next.content===target.submitted) {
+        target.base=editorText(next.content); target.revision=next.revision; target.newline=next.newline; target.uncertain=false; target.conflict=false; target.submitted=null;
+        target.status=target.content===target.base ? 'files.savedVerified' : 'files.savedWithDraft';
+        if (sameVisit(visit)) updated(next);
+      } else { target.conflict=true; target.uncertain=false; target.status='files.readbackDifferent'; }
+    } catch (error) { target.error=error.detail || error.message; }
+    finally { target.checking=false; if (visible(target)) editorRender(); }
+  }
+  async function discard() {
+    const target=active, visit={...context()};
+    if (!writable() || !target || !visible(target) || target.busy || target.checking) return;
+    if ((target.content!==target.base || target.uncertain || target.conflict) && !window.confirm(tr('files.discardConfirm'))) return;
+    const confirmedContent=target.content;
+    target.checking=true; target.discarding=true; target.error=''; editorRender();
+    try {
+      const next=await bridge.api(route('/api/files/preview?path='+encodeURIComponent(target.path),target.root));
+      if (!sameVisit(visit)) return;
+      if (target.content!==confirmedContent) { target.latest=next; target.status='files.discardChanged'; return; }
+      drafts.delete(key(target.root,target.path,target.identity)); active=null; updated(next); select();
+    } catch (error) { target.error=error.detail || error.message; }
+    finally { target.checking=false; target.discarding=false; if (visible(target)) editorRender(); }
+  }
+  async function uploadFile(event) {
+    event?.preventDefault(); const target=upload, visit={...context()};
+    if (!writable() || !target || !uploadVisible(target) || target.busy || target.uncertain || !target.file || target.blockedName===target.name) return;
+    if (!target.name || ['.','..'].includes(target.name) || /[\\/\u0000-\u001f\u007f]/.test(target.name)) { target.status='files.badUploadName'; uploadRender(); return; }
+    if (target.file.size>10*1024*1024) { target.status='files.uploadTooLarge'; uploadRender(); return; }
+    target.path=[target.directory,target.name].filter(Boolean).join('/'); target.size=target.file.size; target.busy=true; target.status='files.uploading'; target.error=''; uploadRender();
+    let sent=false;
+    try {
+      const bytes=new browser.Uint8Array(await target.file.arrayBuffer());
+      target.hash=await hash(bytes);
+      // File reading and hashing can outlive the selection. Only this visit may
+      // begin a write; a started request then retains its original root/path.
+      if (!sameVisit(visit) || context().directory!==target.directory) { target.status='files.uploadReady'; return; }
+      let binary=''; for (let offset=0;offset<bytes.length;offset+=32768) binary+=String.fromCharCode(...bytes.subarray(offset,offset+32768));
+      target.uncertain=true; saveUploadRecovery(target); sent=true;
+      const result=await bridge.api(route('/api/files/upload',target.root),{method:'POST',body:JSON.stringify({path:target.path,encoding:'base64',content:browser.btoa(binary)})});
+      if (result.created!==true || result.path!==target.path || result.contentHash!==target.hash || result.size!==target.size) throw new Error(tr('files.uploadUncertain'));
+      target.uncertain=false; saveUploadRecovery(target); target.status='files.uploaded'; target.file=null;
+      if (uploadVisible(target)) node('filesUploadInput').value='';
+      if (sameVisit(visit) && context().directory===target.directory) uploaded(result.path || target.path);
+    } catch (error) {
+      target.error=error.detail || error.message;
+      target.uncertain=sent && uncertain(error); saveUploadRecovery(target);
+      target.status=target.uncertain ? 'files.uploadUncertain' : error.status===409 ? 'files.uploadExists' : 'files.uploadFailed';
+    } finally { target.busy=false; if (uploadVisible(target)) uploadRender(); }
+  }
+  async function checkUpload() {
+    const target=upload, visit={...context()};
+    if (!writable() || !target?.uncertain || target.busy || !uploadVisible(target)) return;
+    target.busy=true; target.error=''; uploadRender();
+    try {
+      const result=await bridge.api(route('/api/files/status?path='+encodeURIComponent(target.path),target.root));
+      if (result.size===target.size && result.contentHash===target.hash) {
+        target.uncertain=false; target.file=null; target.status='files.uploadVerified'; saveUploadRecovery(target);
+        if (sameVisit(visit) && context().directory===target.directory) uploaded(target.path);
+      } else { target.status='files.uploadDifferent'; target.uncertain=false; target.blockedName=target.name; saveUploadRecovery(target); }
+    } catch (error) {
+      target.error=error.detail || error.message;
+      if (error.status===404) { target.uncertain=false; target.status='files.uploadAbsent'; saveUploadRecovery(target); }
+    } finally { target.busy=false; if (uploadVisible(target)) uploadRender(); }
+  }
+  node('filesEdit').addEventListener('click',begin);
+  node('filesEditor').addEventListener('input',()=>{if(active) {active.content=node('filesEditor').value; if(!active.busy&&!active.conflict&&!active.uncertain) active.status=''; editorRender();}});
+  node('filesSave').addEventListener('click',save); node('filesVerifySave').addEventListener('click',verify); node('filesDiscardEdit').addEventListener('click',discard);
+  node('filesCancelEdit').addEventListener('click',()=>{if(active) {active.editing=false;editorRender();}});
+  node('filesUploadForm').addEventListener('submit',uploadFile); node('filesUploadCheck').addEventListener('click',checkUpload);
+  node('filesUploadInput').addEventListener('change',()=>{
+    if(!upload || upload.busy || upload.uncertain) return;
+    upload.file=node('filesUploadInput').files?.[0] || null; upload.name=upload.file?.name || ''; upload.status=''; upload.error=''; upload.path=''; uploadRender();
+  });
+  node('filesUploadName').addEventListener('input',()=>{if(upload&&!upload.busy&&!upload.uncertain) {upload.name=node('filesUploadName').value;upload.path='';uploadRender();}});
+  window.addEventListener('beforeunload',event=>{
+    if ([...drafts.values()].some(draft=>draft.content!==draft.base || draft.busy || draft.uncertain)) { event.preventDefault(); event.returnValue=''; }
+  });
+  return {select,suspend,sync};
+}