@steerable/agent-shell-web 0.7.1 → 0.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steerable/agent-shell-web",
-  "version": "0.7.1",
+  "version": "0.7.4",
   "type": "module",
   "description": "Steerable framework — product-neutral renderer SPA source for @steerable/agent-shell (React + Vite). Consumed by product web entry points via the `@/` alias (anchored at this package's src/) and the createProductViteConfig factory. Published as a source package (src/), plus the compiled vite.base config factory (vite.base.js + .d.ts) for Node-side config loading.",
   "license": "Apache-2.0",
@@ -45,8 +45,8 @@
     "react-router-dom": "^6.30.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
-    "@steerable/agent-protocol": "0.7.1",
-    "@steerable/agent-ui": "0.7.1"
+    "@steerable/agent-protocol": "0.7.4",
+    "@steerable/agent-ui": "0.7.4"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.0",
@@ -59,7 +59,7 @@
     "typescript": "^5.8.3",
     "vite": "^5.4.21",
     "vitest": "^3.2.4",
-    "@steerable/pack-sdk": "0.7.1"
+    "@steerable/pack-sdk": "0.7.4"
   },
   "scripts": {
     "gen": "echo agent-shell-web",

package/src/components/AgentSidebar.tsx

@@ -1932,6 +1932,7 @@ export function AgentSidebar({
             void forkThisChat(target);
           }}
           onDelete={() => {
+            chatMenu.anchor.focus();
             setPendingDeleteChat({ id: chatMenu.id, title: chatMenu.title });
             setChatMenu(null);
           }}

package/src/components/chat/ApprovalModal.tsx

@@ -167,6 +167,16 @@ export function ApprovalPromptMenu({
                     </span>
                   ) : null}
                 </>
+              ) : isBrowser && current.toolName === 'browser_navigate' ? (
+                <>
+                  {t('Agent requests to open a page')}
+                  <span className="mx-1 font-mono">{current.toolName}</span>
+                  {current.categoryLabel ? (
+                    <span className="text-agent-muted-foreground">
+                      {t('({category})', { category: categoryName(current.categoryLabel) })}
+                    </span>
+                  ) : null}
+                </>
               ) : (
                 <>
                   {t('Agent requests to run')}

package/src/components/chat/ExecutedActionsCard.tsx

@@ -21,6 +21,9 @@ import {
   isTaskFamilyTool,
   inspectableTaskFromAction,
   shortTaskId,
+  askReplay,
+  askRowSummary,
+  egressRowSummary,
   type InspectTaskInput,
 } from './executed-actions-model';
 import {
@@ -60,8 +63,8 @@ export interface ExecutedAction {
    * port-only egress); none = no backend on this platform.
    */
   sandbox?: { backend?: string; enforcement: string };
-  /** Set when a session allow covered this call, so the row can say so. */
-  approval?: { kind?: string; category?: string; cached?: boolean; waitMs?: number };
+  /** Set when a session allow or an unattended allow covered this call, so the row can say so. */
+  approval?: { kind?: string; category?: string; cached?: boolean; waitMs?: number; auto?: boolean };
   /**
    * 工具注册时声明的卡片。`declared` 为真时行标题用 `title`，
    * 不再按工具名猜测。旧事件没有这个字段，仍走原来的摘要。
@@ -108,7 +111,7 @@ function summarizeArguments(args: unknown): string | null {
   if (typeof args === 'string') return args.length > 60 ? args.slice(0, 57) + '…' : args;
   if (typeof args !== 'object') return String(args);
   const obj = args as Record<string, unknown>;
-  for (const key of ['command', 'cmd', 'query', 'path', 'file', 'target', 'message']) {
+  for (const key of ['command', 'cmd', 'url', 'query', 'path', 'file', 'target', 'message']) {
     const v = obj[key];
     if (typeof v === 'string' && v.length > 0) {
       return v.length > 60 ? v.slice(0, 57) + '…' : v;
@@ -129,10 +132,16 @@ function sandboxBadge(sandbox: ExecutedAction['sandbox']): string | null {
   }
 }
 
-function sessionAllowNote(action: ExecutedAction): string | undefined {
+function toolProgressNote(action: ExecutedAction): string | undefined {
   if (action.approval?.kind === 'allow_for_session' && action.approval.cached === true) {
     return t('Allowed for this chat');
   }
+  if (action.tool === 'ask_user' && askReplay(action.result)?.unattended && deriveStatus(action) !== 'failed') {
+    return t('Answered automatically');
+  }
+  if (action.approval?.auto === true && deriveStatus(action) !== 'failed') {
+    return t('Auto');
+  }
   return undefined;
 }
 
@@ -145,8 +154,13 @@ function actionToTool(action: ExecutedAction, idx: number): ToolExecutionPayload
         ? humanizeDelegateError(env.error)
         : env.error
       : null;
+  // 追问行用第一条问题。出网行用主机名。已保存的 view.title 往往只是开场白或工具名。
+  const asked = askRowSummary(action);
+  const egress = egressRowSummary(action);
   // 声明过的工具用 view.title。没有 view 的旧事件仍按工具名做摘要。
-  const summary = action.view?.declared
+  const summary = asked
+    || egress
+    || (action.view?.declared
     ? action.view.title
     : ((action.tool === 'delegate_subagent'
         ? summarizeDelegateSubagent(action.arguments)
@@ -156,7 +170,7 @@ function actionToTool(action: ExecutedAction, idx: number): ToolExecutionPayload
         : null) ??
       summarizeRunCodeAction(action.tool, action.arguments, action.result) ??
       summarizeWebAction(action.tool, action.arguments, action.result) ??
-      summarizeArguments(action.arguments));
+      summarizeArguments(action.arguments)));
   const badge = sandboxBadge(action.sandbox);
   return {
     id: action.id ?? `${action.tool}-${idx}`,
@@ -177,6 +191,20 @@ function actionToTool(action: ExecutedAction, idx: number): ToolExecutionPayload
  * unified `diff` (local_edit_file), render it as a coloured diff; otherwise
  * fall back to the default JSON/text view.
  */
+function renderAskOutput(output: unknown): ReactNode {
+  const replay = askReplay(output);
+  if (!replay) return renderActionOutput(output);
+  return (
+    <div className="space-y-1 text-[11px] text-agent-foreground">
+      {replay.lines.map((line, index) => (
+        <p key={`${index}-${line}`} className="whitespace-pre-wrap break-words">
+          {line}
+        </p>
+      ))}
+    </div>
+  );
+}
+
 function renderActionOutput(output: unknown): ReactNode {
   if (output && typeof output === 'object') {
     const obj = output as Record<string, unknown>;
@@ -444,6 +472,9 @@ function toolCardExtras(
       renderOutput: renderDelegateOutput,
     };
   }
+  if (action.tool === 'ask_user') {
+    return { renderOutput: renderAskOutput };
+  }
   if (isTaskFamilyTool(action.tool)) {
     return {
       label: taskToolLabel(action.tool, action.arguments) ?? undefined,
@@ -543,7 +574,7 @@ export function ToolsFlow({
               renderOutput={extras.renderOutput ?? renderActionOutput}
               onActivate={inspect.onActivate}
               activateTitle={inspect.activateTitle}
-              note={sessionAllowNote(action)}
+              note={toolProgressNote(action)}
               className="rounded-none border-0 border-t border-agent-border first:border-t-0"
             />
           );
@@ -606,7 +637,7 @@ export function ExecutedActionsCard({
               renderOutput={extras.renderOutput ?? renderActionOutput}
               onActivate={inspect.onActivate}
               activateTitle={inspect.activateTitle}
-              note={sessionAllowNote(action)}
+              note={toolProgressNote(action)}
               className="rounded-none border-0 border-t border-agent-border first:border-t-0"
             />
           );

package/src/components/chat/executed-actions-model.ts

@@ -121,7 +121,7 @@ export interface ExecutedActionLike {
   arguments?: unknown;
   result?: unknown;
   sandbox?: { backend?: string; enforcement: string };
-  approval?: { kind?: string; cached?: boolean };
+  approval?: { kind?: string; cached?: boolean; auto?: boolean };
   view?: { title?: string; declared?: boolean };
   durationMs?: number;
 }
@@ -618,6 +618,7 @@ function approvalFromNestedResult(result: unknown): ExecutedActionLike['approval
   return {
     kind: marker.kind,
     ...(marker.cached === true ? { cached: true } : {}),
+    ...(marker.auto === true ? { auto: true } : {}),
   };
 }
 
@@ -644,3 +645,120 @@ export function expandRunCodeActions<T extends ExecutedActionLike>(actions: T[])
   }
   return out;
 }
+
+export interface AskReplay {
+  unattended: boolean;
+  lines: string[];
+}
+
+/** First question, used as the folded tool-row title. The intro is only a fallback. */
+export function askRowSummary(action: { tool?: string; arguments?: unknown; result?: unknown }): string {
+  if (action.tool !== 'ask_user') return '';
+  return firstQuestionText(action.result) || firstQuestionText(action.arguments);
+}
+
+/** Host on a settled egress row. Ports 80 and 443 are omitted. */
+export function egressRowSummary(action: { tool?: string; arguments?: unknown }): string {
+  if (action.tool !== 'network_egress') return '';
+  const value = action.arguments;
+  if (!value || typeof value !== 'object') return '';
+  const record = value as { host?: unknown; port?: unknown };
+  const host = typeof record.host === 'string' ? record.host : '';
+  if (!host) return '';
+  const port = typeof record.port === 'number' ? record.port : null;
+  if (port === null || port === 80 || port === 443) return host;
+  return `${host}:${port}`;
+}
+
+/** Questions and answers from an ask_user result, including a JSON preview. */
+export function askReplay(result: unknown): AskReplay | null {
+  const record = unwrapAsk(result);
+  if (!record) return null;
+  const asked: string[] = [];
+  const rendered: string[] = [];
+  for (const question of record.questions) {
+    if (!question || typeof question !== 'object') continue;
+    const row = question as { id?: unknown; text?: unknown };
+    const text = typeof row.text === 'string' ? row.text.trim() : '';
+    if (!text) continue;
+    asked.push(text);
+    const id = typeof row.id === 'string' ? row.id : '';
+    rendered.push(id ? answerText(record.answers[id]) : '');
+  }
+  if (asked.length === 0) return null;
+  const filled = rendered.filter((value) => value.length > 0);
+  const first = filled[0];
+  const shared = first !== undefined && filled.length === asked.length && filled.every((value) => value === first);
+  const lines = shared
+    ? [...asked.map((text) => t('Question {text}', { text })), t('Answer {text}', { text: first })]
+    : asked.flatMap((text, index) => {
+        const answer = rendered[index] ?? '';
+        return answer
+          ? [t('Question {text}', { text }), t('Answer {text}', { text: answer })]
+          : [t('Question {text}', { text })];
+      });
+  return { unattended: record.unattended === true, lines };
+}
+
+function unwrapAsk(result: unknown): { questions: unknown[]; answers: Record<string, unknown>; unattended?: boolean } | null {
+  if (typeof result === 'string') {
+    const trimmed = result.trim();
+    if (!trimmed.startsWith('{')) return null;
+    try {
+      const parsed: unknown = JSON.parse(trimmed);
+      return unwrapAsk(parsed);
+    } catch {
+      return null;
+    }
+  }
+  if (!result || typeof result !== 'object' || Array.isArray(result)) return null;
+  const record = result as {
+    questions?: unknown;
+    answers?: unknown;
+    data?: unknown;
+    value?: unknown;
+    unattended?: unknown;
+  };
+  if (Array.isArray(record.questions) && record.answers && typeof record.answers === 'object' && !Array.isArray(record.answers)) {
+    return {
+      questions: record.questions,
+      answers: record.answers as Record<string, unknown>,
+      ...(record.unattended === true ? { unattended: true } : {}),
+    };
+  }
+  if (record.value && typeof record.value === 'object') {
+    const inner = unwrapAsk(record.value);
+    if (inner) return record.unattended === true ? { ...inner, unattended: true } : inner;
+  }
+  if (record.data && typeof record.data === 'object') {
+    const inner = unwrapAsk(record.data);
+    if (inner) return record.unattended === true ? { ...inner, unattended: true } : inner;
+  }
+  return null;
+}
+
+function firstQuestionText(value: unknown): string {
+  const unwrapped = unwrapAsk(value);
+  const questions = unwrapped?.questions ?? questionList(value);
+  for (const question of questions) {
+    if (!question || typeof question !== 'object') continue;
+    const text = (question as { text?: unknown }).text;
+    if (typeof text === 'string' && text.trim()) return text.trim();
+  }
+  return '';
+}
+
+function questionList(value: unknown): unknown[] {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return [];
+  const questions = (value as { questions?: unknown }).questions;
+  return Array.isArray(questions) ? questions : [];
+}
+
+function answerText(value: unknown): string {
+  if (typeof value === 'string') return value.trim();
+  if (!Array.isArray(value)) return '';
+  return value
+    .filter((item): item is string => typeof item === 'string' && item.trim().length > 0)
+    .map((item) => item.trim())
+    .join(', ');
+}

package/src/layouts/AgentLayout.tsx

@@ -365,7 +365,7 @@ function AgentLayoutContent() {
     return {
       kind,
       contentId,
-      title: request.title || contentTitle(contentId, slot.title),
+      title: request.title || contentTitle(contentId, t(slot.title)),
     };
   }, [packChatSlots]);
 

package/src/layouts/RightPanelTabBar.tsx

@@ -192,7 +192,7 @@ function unopenedPanels(
     const Icon = slot.Icon;
     entries.push({
       id: slot.slotId,
-      title: slot.title,
+      title: t(slot.title),
       testId: `header-slot-${slot.slotId}`,
       icon: <Icon className="h-3.5 w-3.5 shrink-0" />,
     });

package/src/layouts/right-panel-tabs.ts

@@ -143,7 +143,7 @@ export function normalizeRightPanelEntry(
  *
  * 兼容这些历史格式：
  *   - v2：{"version":2,"sessions":{"<chatId>":{"tabs":[...],"activeTabId":"..."}}}；
- *   - 旧多标签：{"<chatId>": { "tabs": ["ppt", "terminal"], "active": "ppt" }}；
+ *   - 旧多标签：{"<chatId>": { "tabs": ["<slotId>", "terminal"], "active": "<slotId>" }}；
  *   - 单值映射：{"<chatId>": "terminal" | "<slotId>"} → 一个标签；
  *   - 整个值就是单个字符串 → 迁到当前会话；
  *   - 更老：只记录终端是否打开过的布尔 key。

package/src/pages/SettingsPage.tsx

@@ -220,7 +220,7 @@ export function SettingsPage() {
     for (const panel of packPanels) {
       list.push({
         id: panel.panelId,
-        label: panel.title,
+        label: t(panel.title),
         Icon: panel.Icon ?? LuSettings,
       });
     }
@@ -503,7 +503,7 @@ export function SettingsPage() {
                     {panel.Icon ? (
                       <panel.Icon className="h-3.5 w-3.5 text-agent-muted-foreground" />
                     ) : null}
-                    {panel.title}
+                    {t(panel.title)}
                   </h2>
                   <panel.Component />
                 </section>