codemini-cli 0.4.0 → 0.4.2

package/src/tui/chat-app.js

@@ -142,6 +142,7 @@ const TUI_COPY = {
         '🧩 用 /mode plan 切换到规划模式，让 AI 先出方案再动手。',
         '🆕 /new 可以新建一个干净的会话，重新开始工作。',
         '🧠 /memory 查看和管理 AI 的持久记忆，帮助它更好地理解你的偏好。',
+        '🌐 web_fetch 默认轻量读取网页；如需更好读取 JS 渲染页面，可运行 npm install -g playwright && playwright install chromium。',
         '💤 CodeMini 会自动"做梦"休息，整理错误信息并自我优化，越用越聪明~'
       ],
       toolSummaryExpanded: '工具摘要：已展开',
@@ -180,6 +181,10 @@ const TUI_COPY = {
       doingGlob: '正在按模式查找文件',
       doneGrep: '已搜索关键词',
       doingGrep: '正在搜索关键词',
+      doneWebFetch: '已抓取网页',
+      doingWebFetch: '正在抓取网页',
+      doneWebSearch: '已搜索网页',
+      doingWebSearch: '正在搜索网页',
       doneCommand: '已执行命令',
       doingCommand: '正在执行命令',
       doneUpdateTodos: '已更新待办',
@@ -310,6 +315,18 @@ const TUI_COPY = {
       inputLocked: '计划审批进行中，请在审批框输入 /yes、/edit 或 /reject',
       answerLabel: '审批输入',
       answerPlaceholder: '/yes | /edit <反馈> | /reject'
+    },
+    reflectApproval: {
+      title: '审阅 Reflect 技能草稿？',
+      scopeLabel: '范围',
+      nameLabel: '名称',
+      targetLabel: '目标',
+      prompt: '输入 /yes 写入，输入 /edit <反馈> 修改，输入 /no 丢弃。',
+      invalidAnswer: '请输入 /yes、/edit <反馈> 或 /no。',
+      missingFeedback: '请在 /edit 后提供反馈内容。',
+      inputLocked: 'Reflect 审阅进行中，请在审阅框输入 /yes、/edit 或 /no',
+      answerLabel: '审阅输入',
+      answerPlaceholder: '/yes | /edit <反馈> | /no'
     }
   },
   en: {
@@ -350,6 +367,7 @@ const TUI_COPY = {
         '🧩 Use /mode plan to switch to planning mode — AI proposes a plan before coding.',
         '🆕 /new starts a fresh session to begin a clean slate.',
         '🧠 /memory lets you view and manage the AI\'s persistent memory for better personalization.',
+        '🌐 web_fetch uses a lightweight reader by default. For better JS-rendered pages: npm install -g playwright && playwright install chromium.',
         '💤 CodeMini auto-"dreams" to rest, consolidate errors, and self-optimize — it gets smarter over time~'
       ],
       toolSummaryExpanded: 'Tool summary: expanded',
@@ -388,6 +406,10 @@ const TUI_COPY = {
       doingGlob: 'Matching files by pattern',
       doneGrep: 'Searched keywords',
       doingGrep: 'Searching keywords',
+      doneWebFetch: 'Fetched page',
+      doingWebFetch: 'Fetching page',
+      doneWebSearch: 'Searched web',
+      doingWebSearch: 'Searching web',
       doneCommand: 'Ran command',
       doingCommand: 'Running command',
       doneUpdateTodos: 'Updated todos',
@@ -518,6 +540,18 @@ const TUI_COPY = {
       inputLocked: 'Plan approval is active; type /yes, /edit <feedback>, or /reject',
       answerLabel: 'Approval input',
       answerPlaceholder: '/yes | /edit <feedback> | /reject'
+    },
+    reflectApproval: {
+      title: 'Review this reflected skill draft?',
+      scopeLabel: 'Scope',
+      nameLabel: 'Name',
+      targetLabel: 'Target',
+      prompt: 'Type /yes to write, /edit <feedback> to revise, or /no to discard.',
+      invalidAnswer: 'Please enter /yes, /edit <feedback>, or /no.',
+      missingFeedback: 'Please provide feedback after /edit.',
+      inputLocked: 'Reflect review is active; type /yes, /edit <feedback>, or /no',
+      answerLabel: 'Review input',
+      answerPlaceholder: '/yes | /edit <feedback> | /no'
     }
   }
 };
@@ -531,13 +565,24 @@ function getCopy(language) {
 }
 
 function messageLabel(label, copy) {
-  return copy.roleLabels[label] || String(label || '').toUpperCase();
+  return copy?.roleLabels?.[label] || String(label || '').toUpperCase();
 }
 
 function roleStyle(label) {
   return ROLE_STYLES[label] || ROLE_STYLES.system;
 }
 
+const PLAN_AGENT_ROLES = new Set(['planner', 'coder', 'reviewer', 'tester', 'summarizer']);
+
+function normalizePlanAgentRole(role) {
+  const roleKey = String(role || '').trim().toLowerCase();
+  return PLAN_AGENT_ROLES.has(roleKey) ? roleKey : 'coder';
+}
+
+export function formatPlanAgentLabel(role, copy) {
+  return messageLabel(normalizePlanAgentRole(role), copy);
+}
+
 function StatusPill({ label, value, color = 'cyanBright', textColor = 'black' }) {
   return h(
     Box,
@@ -884,7 +929,7 @@ function textFromSessionContent(content) {
   return sanitizeRenderableText(String(content || ''));
 }
 
-function buildUiMessagesFromSessionHistory(sessionMessages, nextId) {
+export function buildUiMessagesFromSessionHistory(sessionMessages, nextId) {
   const source = Array.isArray(sessionMessages) ? sessionMessages : [];
   const out = [];
 
@@ -893,7 +938,7 @@ function buildUiMessagesFromSessionHistory(sessionMessages, nextId) {
     if (message.role === 'tool') continue;
 
     const text = textFromSessionContent(message.content);
-    if (!text.trim() && message.role !== 'assistant') continue;
+    if (!text.trim()) continue;
 
     if (message.role === 'user') {
       out.push({ id: nextId(), label: 'you', text, color: 'blueBright' });
@@ -1101,6 +1146,25 @@ export function parsePlanApprovalAnswer(value) {
   return { action: 'invalid', command: '' };
 }
 
+export function parseReflectApprovalAnswer(value) {
+  const raw = String(value || '').trim();
+  if (!raw) return { action: 'empty', command: '' };
+  const normalized = raw.toLowerCase();
+  if (normalized === '/yes' || normalized === 'yes') {
+    return { action: 'approve', command: '/yes' };
+  }
+  if (normalized === '/no' || normalized === 'no') {
+    return { action: 'reject', command: '/no' };
+  }
+  const editMatch = raw.match(/^\/?edit(?:\s+(.+))?$/i);
+  if (editMatch) {
+    const feedback = String(editMatch[1] || '').trim();
+    if (!feedback) return { action: 'missing_feedback', command: '' };
+    return { action: 'edit', feedback, command: `/edit ${feedback}` };
+  }
+  return { action: 'invalid', command: '' };
+}
+
 export function parsePendingPlanApprovalMessage(text = '') {
   const raw = String(text || '');
   if (!/^Plan approval is still pending\./i.test(raw.trim())) return null;
@@ -1114,6 +1178,21 @@ export function parsePendingPlanApprovalMessage(text = '') {
   return out;
 }
 
+export function parsePendingReflectSkillMessage(text = '') {
+  const raw = String(text || '');
+  if (!/\bReflect skill draft pending\./i.test(raw)) return null;
+  const lines = raw.split(/\r?\n/);
+  const out = { scope: '', name: '', confidence: '', targetPath: '' };
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (trimmed.startsWith('Scope: ')) out.scope = trimmed.slice('Scope: '.length).trim();
+    else if (/^\[\d+\]\s+/.test(trimmed) && !out.name) out.name = trimmed.replace(/^\[\d+\]\s+/, '').trim();
+    else if (trimmed.startsWith('Confidence: ')) out.confidence = trimmed.slice('Confidence: '.length).trim();
+    else if (trimmed.startsWith('Target: ')) out.targetPath = trimmed.slice('Target: '.length).trim();
+  }
+  return out;
+}
+
 export function formatDeleteApprovalLines(copy, request) {
   const details = normalizeDeleteApprovalRequest(request);
   if (!details) return [];
@@ -1133,6 +1212,17 @@ export function formatPlanApprovalLines(copy, request) {
   return [String(copy?.planApproval?.title || '').trim()].filter(Boolean);
 }
 
+export function formatReflectApprovalLines(copy, request) {
+  if (!request) return [];
+  const c = copy?.reflectApproval || {};
+  const lines = [String(c.title || '').trim()];
+  if (request.scope) lines.push(`${c.scopeLabel || 'Scope'}: ${request.scope}`);
+  if (request.name) lines.push(`${c.nameLabel || 'Name'}: ${request.name}`);
+  if (request.targetPath) lines.push(`${c.targetLabel || 'Target'}: ${request.targetPath}`);
+  if (c.prompt) lines.push(c.prompt);
+  return lines.filter(Boolean);
+}
+
 function getActivityDisplayParts(activity) {
   if (isCodeGenerationActivityName(activity?.name)) {
     return {
@@ -1175,6 +1265,8 @@ function getActivityDisplayParts(activity) {
     patch: 'Patch',
     run: 'Run',
     grep: 'Search',
+    web_fetch: 'Fetch',
+    web_search: 'Web Search',
     glob: 'Glob',
     list: 'List',
     list_background_tasks: 'Tasks',
@@ -1193,6 +1285,8 @@ function getActivityDisplayParts(activity) {
     patch: '🩹',
     run: '⚙️',
     grep: '🔍',
+    web_fetch: '🌐',
+    web_search: '🌐',
     glob: '🧭',
     list: '📂',
     list_background_tasks: '🗃️',
@@ -1407,10 +1501,9 @@ function PlanStrip({ planState, copy }) {
             Box,
             { flexDirection: 'column' },
             ...planState.steps.map((step, idx) => {
-                const roleKey = step.role ? step.role.toLowerCase() : '';
-                const normalizedRole = ['planner', 'coder', 'reviewer', 'tester', 'summarizer'].includes(roleKey) ? roleKey : 'coder';
+                const normalizedRole = normalizePlanAgentRole(step.role);
                 const stepTheme = roleStyle(normalizedRole);
-                const roleTag = step.role ? step.role.toUpperCase() : '';
+                const roleTag = formatPlanAgentLabel(normalizedRole, copy);
                 const stepDone = step.status === 'done' || isDone;
                 const stepFailed = step.status === 'failed';
                 const marker = stepFailed ? '✗' : stepDone ? '✓' : '·';
@@ -1419,8 +1512,8 @@ function PlanStrip({ planState, copy }) {
                   Box,
                   { key: `plan-step-${idx}` },
                   h(Text, { color: markerColor }, `${marker} `),
-                  roleTag ? h(Text, { color: stepTheme.badgeText, backgroundColor: stepTheme.badgeBg }, ` ${roleTag} `) : null,
-                  roleTag ? h(Text, { color: 'gray' }, ' ') : null,
+                  h(Text, { color: stepTheme.badgeText, backgroundColor: stepTheme.badgeBg }, ` ${roleTag} `),
+                  h(Text, { color: 'gray' }, ' '),
                   h(Text, { color: stepDone && !stepFailed ? 'gray' : 'white' }, `${step.index}. ${step.title}`)
                 );
               }
@@ -1507,6 +1600,30 @@ function renderTextLine(msg, line, idx, color) {
   );
 }
 
+function historyListLineColor(line, fallbackColor) {
+  const raw = String(line || '');
+  const trimmed = raw.trim();
+  if (!trimmed) return fallbackColor;
+  if (/^Current session\s+/i.test(trimmed) || /^Recent sessions$/i.test(trimmed) || /^\d+\.\s+\S+/.test(trimmed)) {
+    return 'cyanBright';
+  }
+  if (/^Messages\s+\d+$/i.test(trimmed) || /^\d+\s+msgs?\s+\|\s+updated\b/i.test(trimmed) || /^Tip:/i.test(trimmed)) {
+    return 'gray';
+  }
+  if (/^resume:\s+\/history resume\b/i.test(trimmed)) {
+    return 'blueBright';
+  }
+  return 'white';
+}
+
+function isHistoryListMessage(msg) {
+  const text = String(msg?.text || '');
+  return msg?.label === 'system' &&
+    /^Current session\s+/m.test(text) &&
+    /^Recent sessions$/m.test(text) &&
+    /resume:\s+\/history resume\b/m.test(text);
+}
+
 export function parseAutoPlanSummaryMessage(text) {
   const raw = String(text || '').trim();
   if (!/^Auto plan finished\b/i.test(raw)) return null;
@@ -1951,7 +2068,7 @@ function PlanSummaryBubble({ msg, copy }) {
             Box,
             { marginBottom: planSteps.length > 0 || summary.approval || metaItems.length > 0 || summary.warningSteps || summary.failedSteps || shortFile ? 1 : 0, flexDirection: 'column' },
             h(Text, { color: 'cyanBright' }, labels.plan),
-            h(Text, { color: 'gray' }, summary.planSummary)
+            h(Text, { color: 'white' }, summary.planSummary)
           )
         : null,
       planSteps.length > 0
@@ -1960,12 +2077,20 @@ function PlanSummaryBubble({ msg, copy }) {
             { marginBottom: summary.approval || metaItems.length > 0 || summary.warningSteps || summary.failedSteps || shortFile ? 1 : 0, flexDirection: 'column' },
             h(Text, { color: 'cyanBright' }, labels.steps),
             ...planSteps.flatMap((step, idx) => {
-              const roleTag = String(step?.role || '').trim().toUpperCase() || 'CODER';
+              const roleKey = normalizePlanAgentRole(step?.role);
+              const stepTheme = roleStyle(roleKey);
+              const roleTag = formatPlanAgentLabel(roleKey, copy);
               const titleText = String(step?.title || '-').trim() || '-';
               const taskText = String(step?.task || '').trim();
-              const titleRow = h(Text, { key: `plan-step-title-${idx}`, color: 'gray' }, `${idx + 1}. [${roleTag}] ${titleText}`);
+              const titleRow = h(
+                Text,
+                { key: `plan-step-title-${idx}`, color: 'white' },
+                `${idx + 1}. `,
+                h(Text, { color: stepTheme.badgeText, backgroundColor: stepTheme.badgeBg }, ` ${roleTag} `),
+                ` ${titleText}`
+              );
               if (!taskText) return [titleRow];
-              const taskRow = h(Text, { key: `plan-step-task-${idx}`, color: 'gray' }, `   - task: ${taskText}`);
+              const taskRow = h(Text, { key: `plan-step-task-${idx}`, color: 'white' }, `   - task: ${taskText}`);
               return [titleRow, taskRow];
             })
           )
@@ -1975,7 +2100,7 @@ function PlanSummaryBubble({ msg, copy }) {
             Box,
             { marginBottom: metaItems.length > 0 || summary.warningSteps || summary.failedSteps || shortFile ? 1 : 0, flexDirection: 'column' },
             h(Text, { color: 'yellowBright' }, labels.approval),
-            h(Text, { color: 'gray' }, summary.approval)
+            h(Text, { color: 'white' }, summary.approval)
           )
         : null,
       metaItems.length > 0
@@ -1984,7 +2109,7 @@ function PlanSummaryBubble({ msg, copy }) {
             { marginBottom: summary.warningSteps || summary.failedSteps || shortFile ? 1 : 0 },
             ...metaItems.flatMap((item, idx) => [
               idx > 0 ? h(Text, { key: `sep-${idx}`, color: 'gray' }, '  ') : null,
-              h(Text, { key: `meta-${idx}`, color: 'gray' }, item)
+              h(Text, { key: `meta-${idx}`, color: 'white' }, item)
             ])
           )
         : null,
@@ -1993,7 +2118,7 @@ function PlanSummaryBubble({ msg, copy }) {
             Box,
             { marginBottom: summary.failedSteps || shortFile ? 1 : 0, flexDirection: 'column' },
             h(Text, { color: 'yellowBright' }, labels.warnings),
-            h(Text, { color: 'gray' }, summary.warningSteps)
+            h(Text, { color: 'white' }, summary.warningSteps)
           )
         : null,
       summary.failedSteps
@@ -2001,7 +2126,7 @@ function PlanSummaryBubble({ msg, copy }) {
             Box,
             { marginBottom: shortFile ? 1 : 0, flexDirection: 'column' },
             h(Text, { color: 'redBright' }, labels.failed),
-            h(Text, { color: 'gray' }, summary.failedSteps)
+            h(Text, { color: 'white' }, summary.failedSteps)
           )
         : null,
       shortFile
@@ -2297,6 +2422,7 @@ export function collapseActivityChainRows(inputRows, showToolDetails, copy, maxV
 
 export function buildMessageRows(msg, showToolDetails, contentWidth = 72, copy) {
   const rows = [];
+  const isHistoryList = isHistoryListMessage(msg);
   const pushTextRows = (text) => {
     const lines = String(text || '').split('\n');
     let codeFence = false;
@@ -2317,8 +2443,8 @@ export function buildMessageRows(msg, showToolDetails, contentWidth = 72, copy)
         continue;
       }
       if (isMarkdownTableHeader(line, lines[lineIndex + 1])) {
-        const tableLines = [line];
-        lineIndex += 1; // skip separator
+        const tableLines = [line, lines[lineIndex + 1]];
+        lineIndex += 1; // separator included above
         while (lineIndex + 1 < lines.length && splitMarkdownTableCells(lines[lineIndex + 1]).length > 1) {
           tableLines.push(lines[lineIndex + 1]);
           lineIndex += 1;
@@ -2327,7 +2453,8 @@ export function buildMessageRows(msg, showToolDetails, contentWidth = 72, copy)
         continue;
       }
       let color = msg.color || roleStyle(msg.label).text || 'white';
-      if (line.startsWith('#')) color = 'cyanBright';
+      if (isHistoryList) color = historyListLineColor(line, color);
+      else if (line.startsWith('#')) color = 'cyanBright';
       else if (trimmed.startsWith('- ') || trimmed.startsWith('* ')) color = 'magentaBright';
       else if (trimmed.startsWith('>')) color = 'yellow';
       else if (/^[|└├│]/.test(trimmed)) color = 'gray';
@@ -2401,7 +2528,17 @@ export function buildMessageRows(msg, showToolDetails, contentWidth = 72, copy)
   } else {
     pushTextRows(msg?.text || '');
     const toolCalls = Array.isArray(msg?.toolCalls) ? msg.toolCalls : [];
-    toolCalls.forEach((tool, idx) => pushActivityRows(tool, idx, toolCalls.length));
+    const pendingToolCalls = Array.isArray(msg?.pendingToolCalls) ? msg.pendingToolCalls : [];
+    const visibleCalls = [
+      ...toolCalls,
+      ...pendingToolCalls.filter((pending) => {
+        if (!pending) return false;
+        if (pending.id && toolCalls.some((tool) => tool?.id && tool.id === pending.id)) return false;
+        const pendingBase = parseToolDisplayName(pending.name).base;
+        return !toolCalls.some((tool) => parseToolDisplayName(tool?.name).base === pendingBase && tool?.status === 'running');
+      })
+    ];
+    visibleCalls.forEach((tool, idx) => pushActivityRows(tool, idx, visibleCalls.length));
   }
 
   const codeGenerationRows = getCodeGenerationActivityRows(msg);
@@ -2493,36 +2630,36 @@ export function renderMessageRow(msg, row, idx, loaderTick) {
     return h(
       Box,
       { key: `row-table-${msg.id}-${idx}`, marginLeft: 1 },
-      h(Text, { color: row.isHeader ? 'cyanBright' : 'gray', bold: Boolean(row.isHeader) }, row.text)
+      h(Text, { color: 'white', bold: Boolean(row.isHeader) }, row.text)
     );
   }
   if (row.kind === 'table-separator') {
     return h(
       Box,
       { key: `row-table-sep-${msg.id}-${idx}`, marginLeft: 1 },
-      h(Text, { color: 'gray' }, row.text)
+      h(Text, { color: 'white' }, row.text)
     );
   }
   if (row.kind === 'table-vertical') {
     return h(
       Box,
       { key: `row-table-v-${msg.id}-${idx}`, marginLeft: 1 },
-      h(Text, { color: 'cyanBright', bold: true }, `${row.label}:`),
-      h(Text, { color: 'gray' }, row.text ? ` ${row.text}` : '')
+      h(Text, { color: 'white', bold: true }, `${row.label}:`),
+      h(Text, { color: 'white' }, row.text ? ` ${row.text}` : '')
     );
   }
   if (row.kind === 'table-vertical-continuation') {
     return h(
       Box,
       { key: `row-table-vc-${msg.id}-${idx}`, marginLeft: 3 },
-      h(Text, { color: 'gray' }, row.text)
+      h(Text, { color: 'white' }, row.text)
     );
   }
   if (row.kind === 'table-vertical-separator') {
     return h(
       Box,
       { key: `row-table-vs-${msg.id}-${idx}`, marginLeft: 1 },
-      h(Text, { color: 'gray' }, row.text)
+      h(Text, { color: 'white' }, row.text)
     );
   }
   if (row.kind === 'activity-collapsed') {
@@ -3128,6 +3265,38 @@ function PlanApprovalPanel({ request, inputValue, errorText, copy, cursorVisible
   );
 }
 
+function ReflectApprovalPanel({ request, inputValue, errorText, copy, cursorVisible }) {
+  if (!request) return null;
+  const placeholder = String(copy.reflectApproval.answerPlaceholder || '').trim();
+  const lines = formatReflectApprovalLines(copy, request);
+  return h(
+    Box,
+    {
+      marginTop: 1,
+      flexDirection: 'column',
+      borderStyle: 'round',
+      borderColor: 'yellowBright',
+      paddingX: 1,
+      paddingY: 0
+    },
+    ...lines.map((line, index) =>
+      h(Text, { key: `reflect-approval-line-${index}`, color: 'yellowBright' }, line)
+    ),
+    h(
+      Box,
+      { marginTop: 1 },
+      h(Text, { color: 'yellowBright' }, `${copy.reflectApproval.answerLabel}: `),
+      h(ApprovalCursorLine, {
+        inputValue,
+        placeholder: placeholder || ' ',
+        cursorVisible,
+        accent: 'yellowBright'
+      })
+    ),
+    errorText ? h(Text, { color: 'yellowBright' }, errorText) : null
+  );
+}
+
 function SignatureBar({ version = '' }) {
   return h(
     Box,
@@ -3218,7 +3387,10 @@ export function ChatApp({ runtime, sessionId, model, sdkProvider = 'openai-compa
   const [pendingPlanApproval, setPendingPlanApproval] = useState(null);
   const [planApprovalInput, setPlanApprovalInput] = useState('');
   const [planApprovalError, setPlanApprovalError] = useState('');
-  const approvalLockActive = Boolean(pendingDeleteApproval || pendingRunApproval || pendingPlanApproval);
+  const [pendingReflectApproval, setPendingReflectApproval] = useState(null);
+  const [reflectApprovalInput, setReflectApprovalInput] = useState('');
+  const [reflectApprovalError, setReflectApprovalError] = useState('');
+  const approvalLockActive = Boolean(pendingDeleteApproval || pendingRunApproval || pendingPlanApproval || pendingReflectApproval);
   const activeAssistantIdRef = useRef(null);
   const activeAssistantAutoSkillNamesRef = useRef([]);
   const streamedAssistantHandledRef = useRef(false);
@@ -3634,6 +3806,13 @@ export function ChatApp({ runtime, sessionId, model, sdkProvider = 'openai-compa
         setPlanState((prev) => ({ ...prev, pendingApproval: true }));
         setPlanApprovalInput('');
         setPlanApprovalError('');
+      } else {
+        const pendingReflectMeta = parsePendingReflectSkillMessage(result.text || '');
+        if (pendingReflectMeta) {
+          setPendingReflectApproval(pendingReflectMeta);
+          setReflectApprovalInput('');
+          setReflectApprovalError('');
+        }
       }
     }
     setMessages((prev) => [
@@ -3776,6 +3955,9 @@ export function ChatApp({ runtime, sessionId, model, sdkProvider = 'openai-compa
     setPendingPlanApproval(null);
     setPlanApprovalInput('');
     setPlanApprovalError('');
+    setPendingReflectApproval(null);
+    setReflectApprovalInput('');
+    setReflectApprovalError('');
     setPlanState({
       current: 0,
       total: 0,
@@ -4463,6 +4645,46 @@ export function ChatApp({ runtime, sessionId, model, sdkProvider = 'openai-compa
       return;
     }
 
+    if (pendingReflectApproval) {
+      if (key.return) {
+        const parsed = parseReflectApprovalAnswer(reflectApprovalInput);
+        if (parsed.action === 'approve' || parsed.action === 'reject' || parsed.action === 'edit') {
+          setPendingReflectApproval(null);
+          setReflectApprovalInput('');
+          setReflectApprovalError('');
+          runSubmission(parsed.command);
+        } else if (parsed.action === 'missing_feedback') {
+          setReflectApprovalError(copy.reflectApproval.missingFeedback);
+        } else {
+          setReflectApprovalError(copy.reflectApproval.invalidAnswer);
+        }
+        return;
+      }
+
+      if (isBackspaceKey(value, key) || isDeleteKey(value, key)) {
+        setReflectApprovalInput((prev) => prev.slice(0, -1));
+        setReflectApprovalError('');
+        return;
+      }
+
+      if (isPrintableInput(value, key)) {
+        setReflectApprovalInput((prev) => `${prev}${value}`);
+        setReflectApprovalError('');
+        return;
+      }
+
+      if (key.ctrl && value === 'c') {
+        if (busy && typeof runtime.abort === 'function') {
+          runtime.abort();
+          return;
+        }
+        exit();
+        return;
+      }
+
+      return;
+    }
+
     if (key.upArrow) {
       if (suggestionNav && commandSuggestions.length > 0) {
         setMenuIndex((prev) => moveSuggestionSelection(prev, commandSuggestions.length, 'up'));
@@ -4732,6 +4954,17 @@ export function ChatApp({ runtime, sessionId, model, sdkProvider = 'openai-compa
     }
   }, [runtimeState?.pendingPlanApproval, busy]);
 
+  useEffect(() => {
+    const pending = Boolean(runtimeState?.pendingReflectSkill);
+    if (!pending) {
+      setPendingReflectApproval(null);
+      return;
+    }
+    if (!busy) {
+      setPendingReflectApproval((prev) => prev || { scope: '', name: '', targetPath: '' });
+    }
+  }, [runtimeState?.pendingReflectSkill, busy]);
+
   useEffect(() => {
     if (commandSuggestions.length === 0) {
       setSuggestionNav(false);
@@ -4778,7 +5011,9 @@ export function ChatApp({ runtime, sessionId, model, sdkProvider = 'openai-compa
       ? { text: copy.runApproval.inputLocked }
       : pendingPlanApproval
         ? { text: copy.planApproval.inputLocked }
-        : null;
+        : pendingReflectApproval
+          ? { text: copy.reflectApproval.inputLocked }
+          : null;
 
   return h(
     Box,
@@ -4828,6 +5063,13 @@ export function ChatApp({ runtime, sessionId, model, sdkProvider = 'openai-compa
       copy,
       cursorVisible
     }),
+    h(ReflectApprovalPanel, {
+      request: pendingReflectApproval,
+      inputValue: reflectApprovalInput,
+      errorText: reflectApprovalError,
+      copy,
+      cursorVisible
+    }),
     debugKeys
       ? h(
           Box,

package/src/tui/tool-activity/presenters/misc.js

@@ -12,5 +12,19 @@ export function describeMiscToolActivity(copy, parsed, rawName, { done = false,
   if (parsed.base === 'update_todos') {
     return blocked ? makeBlocked(copy, 'update_todos') : done ? copy.toolActivity.doneUpdateTodos : copy.toolActivity.doingUpdateTodos;
   }
+  if (parsed.base === 'web_fetch') {
+    const target = parsed.target || parsed.raw;
+    const label = done
+      ? (copy.toolActivity.doneWebFetch || copy.toolActivity.doneGeneric)
+      : (copy.toolActivity.doingWebFetch || copy.toolActivity.doingGeneric);
+    return blocked ? makeBlocked(copy, target) : `${label}: ${target}`;
+  }
+  if (parsed.base === 'web_search') {
+    const target = parsed.target || parsed.raw;
+    const label = done
+      ? (copy.toolActivity.doneWebSearch || copy.toolActivity.doneGeneric)
+      : (copy.toolActivity.doingWebSearch || copy.toolActivity.doingGeneric);
+    return blocked ? makeBlocked(copy, target) : `${label}: ${target}`;
+  }
   return blocked ? `${copy.toolActivity.blocked}: ${parsed.raw}` : done ? `${copy.toolActivity.doneGeneric}: ${parsed.raw}` : `${copy.toolActivity.doingGeneric}: ${parsed.raw}`;
 }