@steerable/agent-shell-web 0.6.27 → 0.6.29

package/src/pages/AgentPage.tsx

@@ -23,9 +23,17 @@ import {
   type ExecPolicy,
 } from "@/lib/exec-policy";
 import type { ExecutedAction } from "@/components/chat/ExecutedActionsCard";
+import { inspectTaskTitle, type InspectTaskInput } from "@/components/chat/executed-actions-model";
 import type { ChildInfo } from "@/components/chat/OrchestrationChildrenCard";
-import { foldOrchestrationChildEvents } from "@/components/chat/orchestration-children-model";
+import {
+  extractPersistedOrchestrationChildren,
+  foldOrchestrationChildEvents,
+} from "@/components/chat/orchestration-children-model";
 import { parseTurnBlocks, type TurnBlock } from "@/components/chat/turn-timeline";
+import {
+  parseLlmSpeedPayload,
+  type LlmSpeedSnapshot,
+} from "@/components/chat/process-status";
 import { parseTurnFiles, type TurnFile } from "@/components/chat/turn-files";
 import { readPersistedDurationMs } from "@/components/chat/elapsed";
 import {
@@ -46,7 +54,6 @@ import {
   type ChatLiveStream,
   type LocalChatMessage,
   type LocalProject,
-  type LocalTask,
 } from "@/lib/local-api";
 import type { AgentOutletContext } from "@/layouts/AgentLayout";
 import {
@@ -233,6 +240,8 @@ function AgentChatLoader({
   const [initialTurnFiles, setInitialTurnFiles] = useState<
     Record<string, TurnFile[]>
   >({});
+  const [initialOrchestrationChildren, setInitialOrchestrationChildren] =
+    useState<Record<string, ChildInfo[]>>({});
   const [initialSuggestedReplies, setInitialSuggestedReplies] =
     useState<SuggestedRepliesState | null>(null);
   // W7-1: 后端在 messages 响应里下发 interrupted（上一轮崩溃/强杀中断）。
@@ -270,6 +279,9 @@ function AgentChatLoader({
         setInitialTimelines(extractPersistedTimelines(response.messages));
         setInitialDurations(extractPersistedDurations(response.messages));
         setInitialTurnFiles(extractPersistedTurnFiles(response.messages));
+        setInitialOrchestrationChildren(
+          extractPersistedOrchestrationChildren(response.messages),
+        );
         setInitialSuggestedReplies(
           extractLatestSuggestedReplies(
             ordered as ChatMessageWithMetadata[],
@@ -285,6 +297,7 @@ function AgentChatLoader({
         setInitialTimelines({});
         setInitialDurations({});
         setInitialTurnFiles({});
+        setInitialOrchestrationChildren({});
         setInitialSuggestedReplies(null);
         setInitialInterrupted(false);
         setInitialLiveStream({ active: false });
@@ -297,7 +310,7 @@ function AgentChatLoader({
 
   if (initialMessages === null) {
     return (
-      <div className="flex h-full w-full items-center justify-center text-sm text-agent-muted-foreground">
+      <div className="flex h-full w-full items-center justify-center text-xs text-agent-muted-foreground">
         加载对话历史…
       </div>
     );
@@ -311,6 +324,7 @@ function AgentChatLoader({
       initialTimelines={initialTimelines}
       initialDurations={initialDurations}
       initialTurnFiles={initialTurnFiles}
+      initialOrchestrationChildren={initialOrchestrationChildren}
       initialSuggestedReplies={initialSuggestedReplies}
       initialInterrupted={initialInterrupted}
       initialLiveStream={initialLiveStream}
@@ -327,6 +341,7 @@ interface AgentChatViewProps {
   initialTimelines: Record<string, TurnBlock[]>;
   initialDurations: Record<string, number>;
   initialTurnFiles: Record<string, TurnFile[]>;
+  initialOrchestrationChildren: Record<string, ChildInfo[]>;
   initialSuggestedReplies: SuggestedRepliesState | null;
   /** W7-1: 打开会话时上一轮处于中断态（崩溃/强杀，无完成记录）。 */
   initialInterrupted: boolean;
@@ -343,6 +358,7 @@ function AgentChatView({
   initialTimelines,
   initialDurations,
   initialTurnFiles,
+  initialOrchestrationChildren,
   initialSuggestedReplies,
   initialInterrupted,
   initialLiveStream,
@@ -386,8 +402,14 @@ function AgentChatView({
     dismissFinished,
   } = useChatTasks(chatId);
   const handleInspectTask = useCallback(
-    (task: LocalTask) => {
-      ctx.inspectTask({ id: task.id, chatId: task.chatId, title: task.task });
+    (task: InspectTaskInput) => {
+      ctx.inspectTask({
+        id: task.id,
+        chatId: task.chatId,
+        title: inspectTaskTitle(task),
+        ...(task.recordId ? { recordId: task.recordId } : {}),
+        ...(task.live ? { live: true } : {}),
+      });
     },
     [ctx],
   );
@@ -449,11 +471,18 @@ function AgentChatView({
     number | undefined
   >(undefined);
   const pendingDurationMessageIdRef = useRef<string | null>(null);
+  const [currentLlmSpeed, setCurrentLlmSpeed] = useState<LlmSpeedSnapshot | undefined>(
+    undefined,
+  );
+  const currentLlmSpeedRef = useRef<LlmSpeedSnapshot | null>(null);
+  const [llmSpeedByMessageId, setLlmSpeedByMessageId] = useState<
+    Record<string, LlmSpeedSnapshot>
+  >({});
   // P3.1 编排：本轮子代理生命周期（orchestration_child SSE 事件累积），
   // 与 currentTurnActions 同款 reconcile 模式（message_id 落库后按键归档）。
   const [currentTurnChildren, setCurrentTurnChildren] = useState<ChildInfo[]>([]);
   const [orchestrationChildrenByMessageId, setOrchestrationChildrenByMessageId] =
-    useState<Record<string, ChildInfo[]>>({});
+    useState<Record<string, ChildInfo[]>>(initialOrchestrationChildren);
   const pendingChildrenRef = useRef<ChildInfo[]>([]);
   // Round counter for the in-flight turn. Bumped on every `round_end` event
   // emitted by chat-transport (was previously suppressed). Driving this state
@@ -519,6 +548,13 @@ function AgentChatView({
       }
       return;
     }
+    if (ev.event === "llm_speed") {
+      const snap = parseLlmSpeedPayload(ev.payload);
+      if (!snap) return;
+      currentLlmSpeedRef.current = snap;
+      setCurrentLlmSpeed(snap);
+      return;
+    }
     if (ev.event === "turn_files") {
       // 回合收尾时后端发一次（在 message_id 之前）；先挂 pending，
       // message_id 到达时随其他队列一起归档。
@@ -554,6 +590,8 @@ function AgentChatView({
               task: ev.payload?.task as string | undefined,
               depth: ev.payload?.depth as number | undefined,
               profile: ev.payload?.profile as string | undefined,
+              // 子代理自己的 durable record：委派行靠它跳转右侧过程栏。
+              recordId: ev.payload?.recordId as string | undefined,
               status: "running",
             },
           ];
@@ -583,6 +621,13 @@ function AgentChatView({
       const messageId = ev.payload?.messageId as string | undefined;
       if (!messageId) return;
       pendingDurationMessageIdRef.current = messageId;
+      const queuedSpeed = currentLlmSpeedRef.current;
+      if (queuedSpeed) {
+        setLlmSpeedByMessageId((prev) => ({
+          ...prev,
+          [messageId]: queuedSpeed,
+        }));
+      }
       const queued = pendingActionsRef.current;
       if (queued.length > 0) {
         setExecutedActionsByMessageId((prev) => ({
@@ -727,6 +772,25 @@ function AgentChatView({
           }
           return next;
         });
+        const snap = currentLlmSpeedRef.current;
+        if (snap) {
+          const frozen: LlmSpeedSnapshot = {
+            ...snap,
+            live: false,
+            requestStartedAt: null,
+            elapsedMs: snap.elapsedMs,
+          };
+          currentLlmSpeedRef.current = frozen;
+          setCurrentLlmSpeed(frozen);
+          setLlmSpeedByMessageId((prev) => {
+            const next = { ...prev };
+            if (lastAssistant) next[lastAssistant.id] = frozen;
+            if (pendingDurationMessageIdRef.current) {
+              next[pendingDurationMessageIdRef.current] = frozen;
+            }
+            return next;
+          });
+        }
       }
     }
     wasStreamingRef.current = isStreaming;
@@ -770,6 +834,8 @@ function AgentChatView({
       turnStartedAtRef.current = started;
       setCurrentTurnStartedAtMs(started);
       pendingDurationMessageIdRef.current = null;
+      currentLlmSpeedRef.current = null;
+      setCurrentLlmSpeed(undefined);
       // 新一轮开始：记录本轮是否为 plan 模式，并隐藏上一份计划的操作条。
       planTurnRef.current = input.metadata?.mode === "plan";
       setPlanReady(false);
@@ -842,6 +908,8 @@ function AgentChatView({
     turnStartedAtRef.current = started;
     setCurrentTurnStartedAtMs(started);
     pendingDurationMessageIdRef.current = null;
+    currentLlmSpeedRef.current = null;
+    setCurrentLlmSpeed(undefined);
     planTurnRef.current = mode === "plan";
     setPlanReady(false);
     const metadata = {
@@ -987,7 +1055,7 @@ function AgentChatView({
   return (
     <div className="flex h-full w-full flex-col">
       {hydrationError && (
-        <div className="border-b border-agent-border bg-agent-muted/60 px-3 py-1 text-xs text-agent-destructive">
+        <div className="border-b border-agent-border bg-agent-muted/60 px-2.5 py-1 text-xs text-agent-destructive">
           加载对话历史失败：{hydrationError}
         </div>
       )}
@@ -1001,6 +1069,7 @@ function AgentChatView({
         pendingFollowUps={pendingFollowUps.map((m) => m.content)}
         onRemoveFollowUp={removeFollowUp}
         className="flex-1"
+        chatId={chatId}
         emptyHero={{
           title: BRAND_NAME,
           subtitle: '输入消息，直接开始一段新对话。',
@@ -1035,6 +1104,8 @@ function AgentChatView({
         currentTurnTimeline={effectiveCurrentTurnTimeline}
         currentTurnStartedAtMs={currentTurnStartedAtMs}
         durationByMessageId={durationByMessageId}
+        currentLlmSpeed={currentLlmSpeed}
+        llmSpeedByMessageId={llmSpeedByMessageId}
         turnFilesByMessageId={turnFilesByMessageId}
         currentTurnFiles={currentTurnFiles}
         currentTurnChildren={effectiveCurrentTurnChildren}
@@ -1083,7 +1154,7 @@ function AgentChatView({
               onTrustChanged={fetchProjects}
             />
             {planReady && !isStreaming ? (
-            <div className="mx-3 mb-1 flex items-center justify-between gap-3 rounded-agent-md border border-amber-400/50 bg-amber-400/10 px-3 py-2 text-xs">
+            <div className="mx-2.5 mb-1 flex items-center justify-between gap-2 rounded-agent-md border border-amber-400/50 bg-amber-400/10 px-2.5 py-1.5 text-xs">
               <div className="flex items-center gap-2 text-amber-700 dark:text-amber-300">
                 <LuListChecks className="h-4 w-4 shrink-0" />
                 <span>计划已生成。确认无误后可切换到 Agent 模式开始执行。</span>
@@ -1264,15 +1335,15 @@ function EmptyChatGate() {
 
   return (
     <div
-      className="flex h-full w-full items-center justify-center p-4 sm:p-8"
+      className="flex h-full w-full items-center justify-center p-3 sm:p-5"
       data-testid="empty-chat-home"
     >
-      <div className="flex w-full max-w-2xl flex-col items-center gap-6">
+      <div className="flex w-full max-w-3xl flex-col items-center gap-4">
         <div className="text-center">
           <h1 className="text-xl font-semibold tracking-tight text-agent-foreground">
             {BRAND_NAME}
           </h1>
-          <p className="mt-1.5 text-sm text-agent-muted-foreground">
+          <p className="mt-1.5 text-xs text-agent-muted-foreground">
             输入消息，直接开始一段新对话。
           </p>
         </div>

package/src/pages/ChatPanelPreviewPage.tsx

@@ -82,7 +82,28 @@ Tests: 1 failed, 2 passed, 3 total
   },
 ];
 
+const MOCK_TODOS = [
+  { id: 'survey', content: '检查服务连通性', status: 'completed' as const },
+  { id: 'test', content: '跑本目录测试套件', status: 'in_progress' as const },
+  { id: 'fix', content: '修失败的断言颜色', status: 'pending' as const },
+];
+
+const MOCK_TODO_ACTION: ExecutedAction = {
+  tool: 'todo_write',
+  arguments: { todos: MOCK_TODOS },
+  result: {
+    success: true,
+    data: {
+      value: {
+        todos: MOCK_TODOS,
+        summary: { total: 3, pending: 1, inProgress: 1, completed: 1 },
+      },
+    },
+  },
+};
+
 const MOCK_ACTIONS: ExecutedAction[] = [
+  MOCK_TODO_ACTION,
   {
     tool: 'check_connection',
     arguments: { host: '127.0.0.1', port: 8765 },
@@ -107,11 +128,12 @@ const MOCK_ACTIONS: ExecutedAction[] = [
 
 const MOCK_TIMELINE: TurnBlock[] = [
   { type: 'reasoning', content: '先检查服务连通性，再跑测试套件。' },
-  { type: 'tools', actions: [MOCK_ACTIONS[0]] },
-  { type: 'text', content: '连接正常。接下来跑测试套件。' },
+  { type: 'tools', actions: [MOCK_TODO_ACTION] },
   { type: 'tools', actions: [MOCK_ACTIONS[1]] },
-  { type: 'reasoning', content: '测试失败，读一下失败文件再给建议。' },
+  { type: 'text', content: '连接正常。接下来跑测试套件。' },
   { type: 'tools', actions: [MOCK_ACTIONS[2]] },
+  { type: 'reasoning', content: '测试失败，读一下失败文件再给建议。' },
+  { type: 'tools', actions: [MOCK_ACTIONS[3]] },
   { type: 'text', content: MOCK_MESSAGES[1].content ?? '' },
 ];
 
@@ -284,7 +306,7 @@ export function ChatPanelPreviewPage() {
 
   return (
     <div className="flex h-full w-full flex-col bg-agent-muted/30">
-      <div className="flex shrink-0 items-center gap-2 border-b border-agent-border bg-agent-canvas px-3 py-2 text-xs">
+      <div className="flex shrink-0 items-center gap-2 border-b border-agent-border bg-agent-canvas px-2.5 py-1.5 text-xs">
         <span className="text-agent-muted-foreground">
           /preview/chat (dev harness)
         </span>

package/src/pages/SettingsPage.tsx

@@ -59,8 +59,8 @@ export function SettingsPage() {
 
   return (
     <div className="flex h-full w-full flex-col overflow-hidden">
-      <header className="flex h-12 flex-shrink-0 items-center justify-between gap-3 border-b border-agent-border px-5">
-        <h1 className="text-sm font-semibold text-agent-foreground">{title}</h1>
+      <header className="flex h-9 flex-shrink-0 items-center justify-between gap-2 border-b border-agent-border px-2.5">
+        <h1 className="text-xs font-semibold text-agent-foreground">{title}</h1>
         {section === 'general' && (
           <SettingsSaveButton
             testId="settings-header-save"
@@ -73,7 +73,7 @@ export function SettingsPage() {
       </header>
 
       <div className="min-h-0 flex-1 overflow-y-auto">
-        <div className="mx-auto max-w-3xl space-y-8 px-6 py-6">
+        <div className="mx-auto max-w-3xl space-y-4 px-3 py-3">
           {!isElectron() && (
             <p className="rounded-agent-md border border-agent-destructive/20 bg-agent-destructive/10 p-2.5 text-xs text-agent-destructive">
               浏览器预览模式 — 没有 Electron IPC 桥接，部分设置不可用。
@@ -81,9 +81,9 @@ export function SettingsPage() {
           )}
 
           {section === 'skills' && (
-            <section className="space-y-3" data-testid="settings-section-skills">
-              <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                <LuBlocks className="h-4 w-4 text-agent-muted-foreground" />
+            <section className="space-y-2" data-testid="settings-section-skills">
+              <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                <LuBlocks className="h-3.5 w-3.5 text-agent-muted-foreground" />
                 本地技能
               </h2>
               <SkillsSettingsPanel />
@@ -91,9 +91,9 @@ export function SettingsPage() {
           )}
 
           {section === 'mcp' && (
-            <section className="space-y-3" data-testid="settings-section-mcp">
-              <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                <LuPlug className="h-4 w-4 text-agent-muted-foreground" />
+            <section className="space-y-2" data-testid="settings-section-mcp">
+              <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                <LuPlug className="h-3.5 w-3.5 text-agent-muted-foreground" />
                 MCP 服务
               </h2>
               <McpSettingsPanel />
@@ -101,9 +101,9 @@ export function SettingsPage() {
           )}
 
           {section === 'agents' && (
-            <section className="space-y-3" data-testid="settings-section-agents">
-              <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                <LuBot className="h-4 w-4 text-agent-muted-foreground" />
+            <section className="space-y-2" data-testid="settings-section-agents">
+              <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                <LuBot className="h-3.5 w-3.5 text-agent-muted-foreground" />
                 智能体
               </h2>
               <AgentsSettingsPanel onCatalogChange={catalog?.refreshAgents} />
@@ -112,17 +112,17 @@ export function SettingsPage() {
 
           {section === 'general' && (
             <>
-              <section className="space-y-3" data-testid="settings-section-appearance">
-                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                  <LuMonitor className="h-4 w-4 text-agent-muted-foreground" />
+              <section className="space-y-2" data-testid="settings-section-appearance">
+                <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                  <LuMonitor className="h-3.5 w-3.5 text-agent-muted-foreground" />
                   界面
                 </h2>
                 <AppearanceSettingsPanel />
               </section>
 
-              <section className="space-y-3" data-testid="settings-section-llm">
-                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                  <LuSettings className="h-4 w-4 text-agent-muted-foreground" />
+              <section className="space-y-2" data-testid="settings-section-llm">
+                <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                  <LuSettings className="h-3.5 w-3.5 text-agent-muted-foreground" />
                   本地模型设置
                 </h2>
                 <LlmSettingsPanel
@@ -132,49 +132,49 @@ export function SettingsPage() {
                 />
               </section>
 
-              <section className="space-y-3" data-testid="settings-section-web-search">
-                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                  <LuSearch className="h-4 w-4 text-agent-muted-foreground" />
+              <section className="space-y-2" data-testid="settings-section-web-search">
+                <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                  <LuSearch className="h-3.5 w-3.5 text-agent-muted-foreground" />
                   网络搜索
                 </h2>
                 <WebSearchSettingsPanel />
               </section>
 
-              <section className="space-y-3" data-testid="settings-section-usage">
-                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                  <LuChartBar className="h-4 w-4 text-agent-muted-foreground" />
+              <section className="space-y-2" data-testid="settings-section-usage">
+                <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                  <LuChartBar className="h-3.5 w-3.5 text-agent-muted-foreground" />
                   用量与成本
                 </h2>
                 <UsagePanel />
               </section>
 
-              <section className="space-y-3" data-testid="settings-section-diagnose">
-                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                  <LuNetwork className="h-4 w-4 text-agent-muted-foreground" />
+              <section className="space-y-2" data-testid="settings-section-diagnose">
+                <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                  <LuNetwork className="h-3.5 w-3.5 text-agent-muted-foreground" />
                   链路诊断
                 </h2>
                 <DiagnoseSettingsPanel />
               </section>
 
-              <section className="space-y-3" data-testid="settings-section-security">
-                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                  <LuShieldCheck className="h-4 w-4 text-agent-muted-foreground" />
+              <section className="space-y-2" data-testid="settings-section-security">
+                <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                  <LuShieldCheck className="h-3.5 w-3.5 text-agent-muted-foreground" />
                   安全
                 </h2>
                 <SecuritySettingsPanel />
               </section>
 
-              <section className="space-y-3" data-testid="settings-section-insights">
-                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                  <LuChartBar className="h-4 w-4 text-agent-muted-foreground" />
+              <section className="space-y-2" data-testid="settings-section-insights">
+                <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                  <LuChartBar className="h-3.5 w-3.5 text-agent-muted-foreground" />
                   帮助改进产品
                 </h2>
                 <InsightsSettingsPanel />
               </section>
 
-              <section className="space-y-3" data-testid="settings-section-telemetry">
-                <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
-                  <LuActivity className="h-4 w-4 text-agent-muted-foreground" />
+              <section className="space-y-2" data-testid="settings-section-telemetry">
+                <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+                  <LuActivity className="h-3.5 w-3.5 text-agent-muted-foreground" />
                   遥测(OTLP)
                 </h2>
                 <TelemetrySettingsPanel />
@@ -185,12 +185,12 @@ export function SettingsPage() {
               {getPackSettingsPanels().map((panel) => (
                 <section
                   key={panel.panelId}
-                  className="space-y-3"
+                  className="space-y-2"
                   data-testid={`settings-section-${panel.panelId}`}
                 >
-                  <h2 className="flex items-center gap-1.5 text-sm font-semibold text-agent-foreground">
+                  <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                     {panel.Icon ? (
-                      <panel.Icon className="h-4 w-4 text-agent-muted-foreground" />
+                      <panel.Icon className="h-3.5 w-3.5 text-agent-muted-foreground" />
                     ) : null}
                     {panel.title}
                   </h2>

package/src/styles/index.css

@@ -58,8 +58,8 @@ body {
   margin: 0;
   font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
+  font-size: 12px;
+  line-height: 1.45;
 }
 
 /*
@@ -87,6 +87,16 @@ body {
   white-space: nowrap;
 }
 
+/* 12px 字号下收紧工具行：框架卡默认还是 px-3 py-2。 */
+.steerable-tool-execution > button {
+  gap: 0.375rem;
+  padding: 0.25rem 0.625rem;
+}
+
+.steerable-tool-execution > button + div {
+  padding: 0.375rem 0.625rem;
+}
+
 /*
  * ChatInput overlay: the contenteditable must keep a real text fill.
  * macOS Pinyin inspects fill during the first letter's keydown — before