@logicseek/hello-cc 1.0.2 → 1.0.3

package/lib/web/ui-codex.mjs

@@ -42,6 +42,11 @@ export function codexPanelHtml() {
     .codex-code-header { display:flex; align-items:center; justify-content:space-between; padding:4px 8px; color:var(--muted); font-size:var(--small-font); border-bottom:1px solid var(--border); }
     .codex-code-header button { font-size:var(--small-font); min-height:28px; padding:3px 8px; }
     .codex-code pre { margin:0; padding:10px 12px; overflow:auto; white-space:pre; font-family:var(--mono); font-size:var(--small-font); line-height:1.6; }
+    .codex-segment-nav { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:6px 8px; border-bottom:1px solid var(--border); }
+    .codex-segment-nav button { min-height:32px; font-size:var(--small-font); padding:4px 8px; }
+    .codex-segment-nav span { color:var(--muted); font-size:var(--small-font); margin-right:auto; }
+    .codex-code [data-segment-content] pre { max-height:360px; }
+    .codex-code-prose pre { white-space:pre-wrap; overflow-wrap:anywhere; font-family:inherit; font-size:var(--body-font); }
     .codex-diff-add { color:var(--ok); } .codex-diff-remove { color:var(--danger); } .codex-diff-header { color:var(--accent); }
     .codex-review { max-width:900px; margin:16px auto 0; border-top:1px solid var(--border); padding-top:12px; }
     .codex-review h3 { font-size:var(--small-font); margin:14px 0 6px; }
@@ -71,6 +76,8 @@ export function codexPanelHtml() {
       .codex-header, .codex-scroll, .codex-composer { padding-left:12px; padding-right:12px; }
       .codex-card { padding:10px; } .codex-card-agent { padding:2px; }
       .codex-composer-actions button { min-height:36px; }
+      .codex-segment-nav span { flex-basis:100%; }
+      .codex-segment-nav button { min-height:44px; flex:1; }
       .codex-approval dl { grid-template-columns:1fr; gap:3px; } .codex-approval dd { margin-bottom:6px; }
     }
   </style>
@@ -102,8 +109,11 @@ export function codexPanelScript() {
     const views = new Map();
     const approving = 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;
     const text = (en, zh) => window.hccUi.language === 'zh' ? zh : en;
     const bridge = () => window.hccHandoff;
     const escape = (value) => bridge().esc(String(value ?? ''));
@@ -118,7 +128,7 @@ export function codexPanelScript() {
     function turnId() { return state?.turnId || activeThread()?.activeTurnId || ''; }
     function view() {
       if (!views.has(key)) {
-        views.set(key, { top: 0, follow: true, unread: false, signature: '', details: new Map(), startKey: '', start: 0, end: 0, total: 0 });
+        views.set(key, { top: 0, follow: true, unread: false, signature: '', details: new Map(), textPages: new Map(), codeScroll: new Map(), startKey: '', start: 0, end: 0, total: 0 });
         if (views.size > 20) views.delete(views.keys().next().value);
       }
       return views.get(key);
@@ -145,16 +155,57 @@ export function codexPanelScript() {
       };
       return labels[status] || String(status || '');
     }
-    function codeBlock(value, language = '', diff = false) {
-      const content = String(value ?? ''), index = copies.push(content) - 1;
-      const body = diff ? content.split('\n').map(line => {
+    function segmentRanges(content) {
+      const ranges = [];
+      let start = 0;
+      while (start < content.length) {
+        let end = Math.min(content.length, start + SEGMENT_CHARS), cursor = start;
+        for (let lines = 0; lines < SEGMENT_LINES; lines += 1) {
+          const newline = content.indexOf('\n', cursor);
+          if (newline === -1 || newline >= end) break;
+          cursor = newline + 1;
+          if (lines === SEGMENT_LINES - 1) end = cursor;
+        }
+        // A page boundary must not split an emoji or another surrogate pair.
+        if (end < content.length && /[\uD800-\uDBFF]/.test(content[end - 1]) && /[\uDC00-\uDFFF]/.test(content[end])) end -= 1;
+        ranges.push([start, end]); start = end;
+      }
+      return ranges;
+    }
+    function codeBody(content, diff) {
+      return diff ? content.split('\n').map(line => {
         const cls = line.startsWith('@@') || line.startsWith('diff ') || line.startsWith('+++') || line.startsWith('---')
           ? 'codex-diff-header' : line.startsWith('+') ? 'codex-diff-add' : line.startsWith('-') ? 'codex-diff-remove' : '';
         return '<span class="' + cls + '">' + escape(line) + '</span>';
       }).join('\n') : escape(content);
-      return '<div class="codex-code"><div class="codex-code-header"><span>' + escape(language || text('Text', '文本'))
-        + '</span><button type="button" data-copy="' + index + '">' + escape(text('Copy', '复制'))
-        + '</button></div><pre><code>' + body + '</code></pre></div>';
+    }
+    function segmentBody(block, index) {
+      const [start, end] = block.ranges[block.page];
+      const button = (action, label, disabled) => '<button type="button" data-segment="' + index + '" data-segment-action="' + action + '"'
+        + (disabled ? ' disabled' : '') + '>' + escape(label) + '</button>';
+      return '<nav class="codex-segment-nav" aria-label="' + escape(text('Text sections', '内容分段')) + '"><span role="status" tabindex="-1">'
+        + escape(text('Section ', '第 ') + (block.page + 1) + text(' of ', ' / ') + block.ranges.length + text(' · Full text available', ' 段 · 可查阅全文'))
+        + '</span>' + button('first', text('First', '首段'), block.page === 0)
+        + button('previous', text('Previous', '上一段'), block.page === 0)
+        + button('next', text('Next', '下一段'), block.page === block.ranges.length - 1)
+        + button('last', text('Last', '末段'), block.page === block.ranges.length - 1)
+        + '</nav><pre tabindex="0" data-code-page="' + block.page + '"><code>' + codeBody(block.content.slice(start, end), block.diff) + '</code></pre>';
+    }
+    function codeBlock(value, language = '', diff = false, plain = false, identityScope = '') {
+      const content = String(value ?? ''), index = copies.push(content) - 1;
+      const ranges = segmentRanges(content), identity = identityScope || blockScope + ':' + blockOrder++;
+      let body, blockIndex = -1;
+      if (ranges.length > 1) {
+        blockIndex = blocks.length;
+        const page = Math.min(view().textPages.get(identity) || 0, ranges.length - 1);
+        const block = { content, ranges, diff, page, identity };
+        blocks.push(block);
+        body = '<div data-segment-content>' + segmentBody(block, blockIndex) + '</div>';
+      } else body = '<pre data-code-page="0"><code>' + codeBody(content, diff) + '</code></pre>';
+      return '<div class="codex-code' + (plain ? ' codex-code-prose' : '') + '" data-code-key="' + escape(identity) + '"' + (blockIndex < 0 ? '' : ' data-segment-block="' + blockIndex + '"')
+        + '><div class="codex-code-header"><span>' + escape(language || text('Text', '文本'))
+        + '</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 = [];
@@ -225,7 +276,9 @@ export function codexPanelScript() {
       return '<div class="codex-markdown">' + parts.join('') + '</div>';
     }
     function prose(value) {
-      const fence = String.fromCharCode(96).repeat(3), lines = String(value ?? '').split('\n');
+      const content = String(value ?? '');
+      if (segmentRanges(content).length > 1) return codeBlock(content, text('Long message · Plain-text sections', '长消息 · 纯文本分段'), false, true);
+      const fence = String.fromCharCode(96).repeat(3), lines = content.split('\n');
       let html = '', plain = [], code = [], language = '', inCode = false;
       const flush = () => { if (plain.length) html += markdown(plain.join('\n')); plain = []; };
       for (const line of lines) {
@@ -250,6 +303,7 @@ export function codexPanelScript() {
     }
     function itemCard(item, turn, index) {
       const type = item.type || '', id = turn.id + ':' + (item.id || index), content = itemText(item);
+      blockScope = 'item:' + id; blockOrder = 0;
       const error = item.status === 'failed' || item.error || (item.exitCode != null && item.exitCode !== 0);
       const status = '<span class="codex-status' + (error ? ' codex-status-failed' : '') + '">' + escape(error ? text('Failed', '失败') : statusLabel(item.status)) + '</span>';
       if (type === 'userMessage' || type === 'agentMessage') {
@@ -297,14 +351,64 @@ export function codexPanelScript() {
         node.addEventListener('toggle', () => { if (key === currentKey && node.isConnected !== false) view().details.set(node.dataset.detailsKey, node.open); });
       });
       container.querySelectorAll('button[data-copy]').forEach(button => {
-        const content = copies[Number(button.dataset.copy)];
         button.addEventListener('click', async () => {
+          if (key !== currentKey || button.isConnected === false) return;
+          // A hidden section may change while the visible HTML stays identical.
+          const content = copies[Number(button.dataset.copy)];
           try {
             await navigator.clipboard.writeText(content);
             button.textContent = text('Copied', '已复制');
           } catch (_) { button.textContent = text('Select text to copy', '请选择文本复制'); }
         });
       });
+      bindSegmentActions(container);
+      bindCodeScroll(container);
+    }
+    function bindCodeScroll(container) {
+      const currentKey = key;
+      container.querySelectorAll('pre[data-code-page]').forEach(pre => {
+        const identity = pre.closest('[data-code-key]')?.dataset.codeKey;
+        if (!identity) return;
+        const page = Number(pre.dataset.codePage), saved = view().codeScroll.get(identity);
+        if (saved?.page === page) { pre.scrollTop = saved.top; pre.scrollLeft = saved.left; }
+        // Scroll events from restoration are asynchronous. Ignore unchanged
+        // coordinates so restoring a block never opts out of follow mode.
+        let top = pre.scrollTop, left = pre.scrollLeft;
+        pre.addEventListener('scroll', () => {
+          if (key !== currentKey || pre.isConnected === false || (top === pre.scrollTop && left === pre.scrollLeft)) return;
+          top = pre.scrollTop; left = pre.scrollLeft;
+          const reading = view();
+          reading.codeScroll.set(identity, { page, top, left });
+          if (reading.codeScroll.size > 256) reading.codeScroll.delete(reading.codeScroll.keys().next().value);
+          if (top || left) { reading.follow = false; reading.top = scroller.scrollTop; updateJump(); }
+        });
+      });
+    }
+    function bindSegmentActions(container) {
+      const currentKey = key;
+      container.querySelectorAll('button[data-segment]').forEach(button => {
+        const index = Number(button.dataset.segment);
+        button.addEventListener('click', () => {
+          const block = blocks[index];
+          if (key !== currentKey || button.isConnected === false || !block) return;
+          const action = button.dataset.segmentAction;
+          block.page = Math.max(0, Math.min(block.ranges.length - 1,
+            action === 'first' ? 0 : action === 'last' ? block.ranges.length - 1 : block.page + (action === 'next' ? 1 : -1)));
+          view().textPages.set(block.identity, block.page);
+          view().codeScroll.delete(block.identity);
+          if (view().textPages.size > 256) view().textPages.delete(view().textPages.keys().next().value);
+          const wrapper = button.closest('[data-segment-block]'), body = wrapper.querySelector('[data-segment-content]');
+          const top = wrapper.getBoundingClientRect().top, oldTop = scroller.scrollTop;
+          view().follow = false;
+          body.innerHTML = segmentBody(block, index);
+          bindSegmentActions(body);
+          bindCodeScroll(body);
+          const focus = body.querySelector('button[data-segment-action="' + action + '"]:not(:disabled)') || body.querySelector('[role="status"]');
+          focus?.focus({ preventScroll: true });
+          scroller.scrollTop = oldTop + wrapper.getBoundingClientRect().top - top;
+          view().top = scroller.scrollTop; updateJump();
+        });
+      });
     }
     function renderTimeline(turns, reading) {
       // Page by items rather than turns: a single tool-heavy turn can contain hundreds of cards.
@@ -327,7 +431,7 @@ export function codexPanelScript() {
       if (!reading.follow && reading.signature && reading.signature !== updateSignature) reading.unread = true;
       reading.signature = updateSignature;
       if (signature !== timelineSignature) {
-        copies = [];
+        copies = []; blocks = [];
         let previousTurn = null;
         let html = visible.map(({ turn, turnIndex, item, index }) => {
           let heading = '';
@@ -344,8 +448,8 @@ export function codexPanelScript() {
           document.getElementById('codexTimeline').innerHTML = html;
           timelineHtml = html; bindReadActions(document.getElementById('codexTimeline'));
         }
-        timelineSignature = signature; timelineCopies = copies.slice();
-      } else copies = timelineCopies.slice();
+        timelineSignature = signature; timelineCopies = copies.slice(); timelineBlocks = blocks.slice();
+      } else { copies = timelineCopies.slice(); blocks = timelineBlocks.slice(); }
       document.getElementById('codexHistory').hidden = entries.length <= PAGE_SIZE;
       document.getElementById('codexHistory').setAttribute('aria-label', text('Conversation history', '会话历史'));
       document.getElementById('codexEarlier').textContent = text('Earlier', '更早记录');
@@ -358,9 +462,10 @@ export function codexPanelScript() {
     function sync() {
       const next = draftKey();
       if (next !== key) {
+        subjectRevision += 1;
         if (key && state) view().top = scroller.scrollTop || 0;
         key = next; pending = null; draft.value = ''; state = null;
-        timelineHtml = ''; timelineSignature = ''; timelineCopies = []; copies = []; entries = [];
+        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;
@@ -397,7 +502,10 @@ export function codexPanelScript() {
         { method: 'POST', body: JSON.stringify({ ...body, action_token: target.token, epoch: target.epoch }) });
     }
     function render(value, resetScroll = false) {
-      sync(); state = value; sync();
+      sync();
+      // Local paging and preference redraws reuse state; incoming snapshots do not.
+      if (value !== state) stateRevision += 1;
+      state = value; sync();
       const thread = activeThread();
       document.getElementById('codexStatus').textContent = [text('Executor', '执行器') + ': ' + statusLabel(state.status),
         text('Thread', '会话') + ': ' + (thread?.id || ''), turnId() ? text('Turn', '当前轮') + ': ' + turnId() : text('Idle', '空闲'),
@@ -410,12 +518,13 @@ export function codexPanelScript() {
       renderTimeline(turns, reading);
       const last = turns[turns.length - 1];
       const plan = Array.isArray(last?.plan) ? last.plan : [];
+      blockScope = 'plan:' + last?.id; blockOrder = 0;
       document.getElementById('codexPlan').innerHTML = plan.length ? '<h3>' + escape(text('Plan', '执行计划')) + '</h3>'
         + (last.explanation ? prose(last.explanation) : '') + '<ol class="codex-plan">' + plan.map(step =>
           '<li data-status="' + escape(step.status || '') + '"><span>' + escape(statusLabel(step.status)) + '</span><span>'
           + escape(step.step || '') + '</span></li>').join('') + '</ol>' : '';
       document.getElementById('codexDiff').innerHTML = last?.diff ? '<h3>' + escape(text('Latest turn · Executor-reported changes', '最新一轮 · 执行器报告的变更'))
-        + '</h3>' + codeBlock(last.diff, text('Diff', '差异'), true) : '';
+        + '</h3>' + codeBlock(last.diff, text('Diff', '差异'), true, false, 'review:diff:' + last.id) : '';
       const review = document.getElementById('codexReview');
       review.hidden = !last?.diff && !plan.length;
       bindReadActions(document.getElementById('codexPlan'));
@@ -425,6 +534,7 @@ export function codexPanelScript() {
       const container = document.getElementById('codexApprovals');
       window.hccInteractions.remember(container);
       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('Command', '命令'), params.command], [text('Directory', '目录'), params.cwd],
@@ -432,8 +542,12 @@ export function codexPanelScript() {
           [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', '等待人工审批'))
-          + '</h3><dl>' + fields.map(([label, value]) => '<dt>' + escape(label) + '</dt><dd>'
-          + escape(typeof value === 'string' ? value : JSON.stringify(value)) + '</dd>').join('') + '</dl>'
+          + '</h3><dl>' + fields.map(([label, value], fieldIndex) => {
+            const fullValue = typeof value === 'string' ? value : JSON.stringify(value);
+            return '<dt>' + escape(label) + '</dt><dd>'
+              + (segmentRanges(fullValue).length > 1 ? codeBlock(fullValue, text('Full value', '完整字段'), false, true, blockScope + ':field:' + fieldIndex) : escape(fullValue))
+              + '</dd>';
+          }).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)
@@ -533,12 +647,15 @@ export function codexPanelScript() {
     });
     document.getElementById('codexRecover').addEventListener('click', async () => {
       const b = bridge(), target = subject();
+      const subjectVersion = subjectRevision, sequence = ++readSequence;
+      const current = () => matches(target) && subjectVersion === subjectRevision && sequence === readSequence;
       try {
         await b.api(route(target, 'read'));
-        if (!matches(target)) return;
+        if (!current()) return;
+        const version = stateRevision;
         const result = await b.api(route(target, 'state'));
-        if (matches(target)) render(result.state);
-      } catch (error) { if (matches(target)) message(error.detail || error.message); }
+        if (current() && version === stateRevision) render(result.state);
+      } catch (error) { if (current()) message(error.detail || error.message); }
     });
     document.getElementById('codexClear').addEventListener('click', () => {
       if (!confirm(text('Clear this draft and its unconfirmed submission marker? Check thread history first.', '清除草稿及未确认提交标记？请先核对会话历史。'))) return;

package/lib/web/ui-interactions.mjs

@@ -2,7 +2,7 @@
 export function interactionPanelScript() {
   return String.raw`(() => {
     if (window.hccInteractions) return;
-    const drafts = new Map();
+    const drafts = new Map(), expanded = new Map();
     let focus = null;
     function remember(container) {
       container.querySelectorAll('[data-interaction-field]').forEach(control => {
@@ -10,6 +10,8 @@ export function interactionPanelScript() {
         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 };
       });
+      container.querySelectorAll('[data-interaction-details]').forEach(detail => expanded.set(detail.dataset.interactionDetails, detail.open));
+      while (expanded.size > 256) expanded.delete(expanded.keys().next().value);
       while (drafts.size > 256) drafts.delete(drafts.keys().next().value);
     }
     function restore(container) {
@@ -22,6 +24,38 @@ export function interactionPanelScript() {
       });
       for (const key of drafts.keys()) if (!live.has(key)) drafts.delete(key);
       if (focus && !live.has(focus.key)) focus = null;
+      const detailKeys = new Set();
+      container.querySelectorAll('[data-interaction-details]').forEach(detail => {
+        const key = detail.dataset.interactionDetails; detailKeys.add(key);
+        if (expanded.has(key)) detail.open = expanded.get(key);
+      });
+      for (const key of expanded.keys()) if (!detailKeys.has(key)) expanded.delete(key);
+    }
+    function approvalBlocked(request) {
+      const tool = request.params?.toolCall;
+      return Boolean(request.truncated || (request.method === 'session/request_permission' &&
+        (!tool || tool.contextPending || tool.contextTruncated || !Object.hasOwn(tool, 'rawInput') ||
+         !request.params.options?.some(option => option.kind === 'allow_once'))));
+    }
+    function preview(request, key, esc, text) {
+      const params = request.params || {}, tool = params.toolCall || {}, input = params.input || tool.rawInput || {};
+      const rows = [], row = (label, value) => { if (typeof value === 'string' && value) rows.push('<dt>' + esc(label) + '</dt><dd>' + esc(value) + '</dd>'); };
+      const name = params.tool || tool.title;
+      row(text('Tool', '工具'), name);
+      row(text('Command', '命令'), params.command || input.command);
+      row(text('File', '文件'), input.file_path || input.path || params.path || params.grantRoot);
+      row(text('Working directory', '工作目录'), params.cwd || input.cwd);
+      row(text('Reason', '原因'), params.reason || params.message);
+      const content = typeof input.content === 'string' ? input.content : null;
+      const previewLimit = 1024;
+      const contentPreview = content === null ? '' : '<p>' + esc(text('Content preview', '内容预览')) + '</p><pre class="hcc-interaction-content">' + esc(content.slice(0, previewLimit)) + '</pre>'
+        + (content.length > previewLimit ? '<p>' + esc(text('Preview shortened; expand the full operation details to review all content.', '预览已缩短，展开完整操作详情可核对全部内容。')) + '</p>' : '');
+      const known = rows.length || ['permissions', 'userInput'].includes(request.kind);
+      const missingContext = request.method === 'session/request_permission' && approvalBlocked(request);
+      return (rows.length ? '<dl class="hcc-interaction-summary">' + rows.join('') + '</dl>' : '') + contentPreview
+        + (missingContext ? '<p role="alert">' + esc(text('The operation input or one-time approval option is unavailable. Only rejection is available.', '操作输入或单次批准选项不可用，目前只能拒绝。')) + '</p>' : '')
+        + (request.kind === 'approval' && !missingContext ? '<p>' + esc(text('Approval applies only to this operation. Later requests require another decision.', '仅批准本次操作，后续请求仍需单独确认。')) + '</p>' : '')
+        + '<details class="hcc-interaction-details" data-interaction-details="' + esc(key) + '"' + (known ? '' : ' open') + '><summary>' + esc(text('Full operation details', '完整操作详情')) + '</summary><pre>' + esc(JSON.stringify(params, null, 2)) + '</pre></details>';
     }
     function form(request, key, esc, text) {
       const field = suffix => ' data-interaction-field="' + esc(key + ':' + suffix) + '"';
@@ -72,7 +106,7 @@ export function interactionPanelScript() {
       }
       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 };
+    function forget(key) { for (const field of drafts.keys()) if (field.startsWith(key + ':')) drafts.delete(field); expanded.delete(key); }
+    window.hccInteractions = { preview, approvalBlocked, form, payload, remember, restore, forget };
   })();`;
 }

package/lib/web/ui-native.mjs

@@ -15,6 +15,9 @@ export function nativePanelHtml() {
     .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; }
+    .hcc-interaction-content,.hcc-interaction-details pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:180px; overflow:auto; margin:6px 0; }
+    .hcc-interaction-details { margin:8px 0; }
+    .hcc-interaction-details summary { cursor:pointer; color:var(--muted); }
     .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; }
@@ -67,7 +70,12 @@ export function nativePanelScript() {
       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')); }
+      // A-B-A navigation can return before its fresh executor snapshot arrives.
+      // Reconcile the matching local submission even while state is still null.
+      if (key === target.key && pending?.id === submissionId) {
+        draft.value = stored.text || ''; pending = null;
+        notice(matches(target) ? tr('native.queued') : '');
+      }
       return true;
     }
     function render(value) {
@@ -76,7 +84,8 @@ export function nativePanelScript() {
       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++;
+      if (state !== value) observed++;
+      state = value;
       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 || '');
@@ -94,15 +103,16 @@ export function nativePanelScript() {
       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>'
+        + '</h3>' + window.hccInteractions.preview(request, requestKey(request), esc, text)
         + (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="accept" data-truncated="' + window.hccInteractions.approvalBlocked(request) + '" 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;
+        const version = observed;
         responding.add(key); sync();
         try {
           const payload = window.hccInteractions.payload(request, ['permissions','userInput'].includes(request.kind) ? button.closest('article') : null, button.dataset.decision);
@@ -110,8 +120,10 @@ export function nativePanelScript() {
             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); }
+          if (matches(target) && version === observed) { if (result.state) render(result.state); else void read(); }
+        } catch(error) {
+          if (matches(target) && (state?.pendingApprovals || []).some(current => current.requestId === request.requestId && current.executorId === request.executorId)) 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);
@@ -128,15 +140,15 @@ export function nativePanelScript() {
     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();
+      const target = subject(), text = draft.value, id = 's_' + crypto.randomUUID(), version = observed;
       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')); }
+        if (matches(target) && version === observed) { if (result.state) render(result.state); else void read(); }
+      } catch(error) { if (matches(target) && pending?.id === id) notice((error.detail || error.message) + ' ' + tr('native.uncertain')); }
       finally { inflight.delete(target.key); sync(); }
     });
     document.getElementById('nativeInterrupt').addEventListener('click',async()=>{

package/lib/web/ui-template.mjs

@@ -11,6 +11,8 @@ import { commandPaletteCss, commandPaletteHtml, commandPaletteScript } from './u
 import { terminalFindCss, terminalFindHtml, terminalFindScript } from './ui-terminal-find.mjs';
 import { workspaceCss, workspaceBarHtml, workspaceSecondaryHtml, workspaceScript } from './ui-workspace.mjs';
 
+const SHELL_APOSTROPHE_ESCAPE = JSON.stringify(`'"'"'`);
+
 function nonceAttribute(nonce) {
   const value = String(nonce || '');
   if (!/^[A-Za-z0-9_-]{16,}$/.test(value)) {
@@ -2130,11 +2132,15 @@ export function webIndexHtml({ nonce, pane = false } = {}) {
       };
     }
 
+    function terminalShellQuote(value) {
+      return "'" + String(value).split("'").join(${SHELL_APOSTROPHE_ESCAPE}) + "'";
+    }
+
     function terminalCommandForAction(action, info) {
       const session = info.session || {};
-      const peerId = info.peerId;
+      const peerId = terminalShellQuote(info.peerId);
       const lines = {
-        register: \`hcc register --peer \${peerId} --kind \${session.kind || 'other'} --role \${session.role || 'peer'}\`,
+        register: \`hcc register --peer \${peerId} --kind \${terminalShellQuote(session.kind || 'other')} --role \${terminalShellQuote(session.role || 'peer')}\`,
         inbox:    \`hcc msg inbox --peer \${peerId}\`,
         'task-next': \`hcc task next --peer \${peerId}\`,
         state:    \`hcc state --peer \${peerId}\`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicseek/hello-cc",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Local control plane for coordinating Claude Code, Codex, and other coding CLI sessions.",
   "type": "module",
   "bin": {

package/scripts/regression.mjs

@@ -4420,7 +4420,14 @@ async function multiProjectWebWorkflow() {
 
   const htmlResponse = await fetch(currentRuntimeUrl('/'));
   const html = await htmlResponse.text();
-  for (const forbidden of ['Alias optional', 'Role tag', 'Command<input', 'Working directory', 'commandbar', 'lineInput', 'Send text to active terminal']) {
+  const startForm = html.match(/<form\b[^>]*\bid="startForm"[^>]*>[\s\S]*?<\/form>/)?.[0];
+  if (!startForm) fail('web form missing startForm');
+  // Approval details may display the working directory. The simplified launch
+  // form must still derive it from the selected project instead of an input.
+  if (startForm.includes('Working directory') || /<input\b[^>]*(?:id|name)="(?:cwd|workdir)"/.test(startForm)) {
+    fail('web launch form still exposes Working directory');
+  }
+  for (const forbidden of ['Alias optional', 'Role tag', 'Command<input', 'commandbar', 'lineInput', 'Send text to active terminal']) {
     if (html.includes(forbidden)) fail(`web form still exposes ${forbidden}`);
   }
   for (const expected of [