@steerable/agent-shell-web 0.6.26 → 0.6.28

package/src/pages/ChatPanelPreviewPage.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import type { ChatMessage } from '@steerable/agent-protocol';
 import { LocalChatPanel } from '@/components/chat/LocalChatPanel';
 import { ChatHeader } from '@/components/ChatHeader';
@@ -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 ?? '' },
 ];
 
@@ -123,17 +145,53 @@ const MOCK_TIMELINE: TurnBlock[] = [
  *     StreamingStatus's "正在思考..." baseline.
  *   • `tools-run`  — in-flight bubble, round 2, 2 tools just ran; verifies
  *     StreamingStatus's "已调用 N 个工具" + "Round N" badge interaction.
+ *   • `reasoning-stream` — reasoning tokens arrive over time; verifies the
+ *     5-line peek stays visible and the list scrollbar sticks to the bottom.
  */
-type PreviewScene = 'static' | 'thinking' | 'tools-run';
+type PreviewScene = 'static' | 'thinking' | 'tools-run' | 'reasoning-stream';
+
+const STREAMING_REASONING = [
+  '先检查服务是否还能连上。',
+  '如果端口通了，再跑本目录的测试套件。',
+  '失败的话只读失败文件，不要整仓扫一遍。',
+  '断言颜色对不上时优先看 AssistantMessage 的默认色。',
+  '改完再复跑一次，确认没有带出新的失败。',
+  '工具调用保持最少：连通性检查、跑测试、必要时读文件。',
+  '最后用一两句说清楚结果和下一步。',
+  '如果还在思考，后面的句子会被 5 行窗口裁掉。',
+  '比较 a < b 时不要被 Markdown 当成 HTML 标签吃掉。',
+  '滚动条应一直钉在最下面，不要随着 token 上下跳。',
+].join('\n');
 
 const SCENES: { id: PreviewScene; label: string }[] = [
   { id: 'static', label: '静态历史' },
   { id: 'thinking', label: '流式 · 空内容' },
   { id: 'tools-run', label: '流式 · 工具已跑 · round 2' },
+  { id: 'reasoning-stream', label: '流式 · 推理打字' },
 ];
 
 export function ChatPanelPreviewPage() {
   const [scene, setScene] = useState<PreviewScene>('static');
+  const [streamedReasoning, setStreamedReasoning] = useState('');
+
+  useEffect(() => {
+    if (scene !== 'reasoning-stream') {
+      setStreamedReasoning('');
+      return;
+    }
+    setStreamedReasoning('');
+    let index = 0;
+    const id = window.setInterval(() => {
+      index += 2;
+      if (index >= STREAMING_REASONING.length) {
+        setStreamedReasoning(STREAMING_REASONING);
+        window.clearInterval(id);
+        return;
+      }
+      setStreamedReasoning(STREAMING_REASONING.slice(0, index));
+    }, 40);
+    return () => window.clearInterval(id);
+  }, [scene]);
 
   // Explicit struct type so TS doesn't try to narrow `actionsByMsgId` to the
   // union of {} | { m2: ... } — both shapes are valid `Record<string, ...>`
@@ -198,7 +256,7 @@ export function ChatPanelPreviewPage() {
                 '改完再复跑一次，确认没有带出新的失败。',
                 '工具调用保持最少：连通性检查、跑测试、必要时读文件。',
                 '最后用一两句说清楚结果和下一步。',
-                '如果还在思考，后面的句子会被 7 行窗口裁掉。',
+                '如果还在思考，后面的句子会被 5 行窗口裁掉。',
               ].join('\n'),
             },
             {
@@ -209,6 +267,28 @@ export function ChatPanelPreviewPage() {
           currentTurnStartedAtMs: Date.now() - 12_000,
           currentRound: 2,
         };
+      case 'reasoning-stream':
+        return {
+          messages: [
+            MOCK_MESSAGES[0],
+            {
+              id: 'm-streaming',
+              role: 'assistant',
+              agentId: MOCK_AGENT.id,
+              content: '',
+              createdAt: new Date().toISOString(),
+            },
+          ],
+          isStreaming: true,
+          actionsByMsgId: {} as Record<string, ExecutedAction[]>,
+          currentTurnActions: [],
+          timelineByMsgId: {} as Record<string, TurnBlock[]>,
+          currentTurnTimeline: streamedReasoning
+            ? [{ type: 'reasoning', content: streamedReasoning }]
+            : [],
+          currentTurnStartedAtMs: Date.now() - 1_000,
+          currentRound: 1,
+        };
       case 'static':
       default:
         return {
@@ -222,11 +302,11 @@ export function ChatPanelPreviewPage() {
           suggestedReplies: ['修一下失败的断言颜色', '把测试再跑一遍', '解释这次失败的原因'],
         };
     }
-  }, [scene]);
+  }, [scene, streamedReasoning]);
 
   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