@steerable/agent-shell-web 0.6.27 → 0.6.29

package/src/components/chat/SuggestedReplies.tsx

@@ -1,7 +1,10 @@
+import { LuSparkles } from 'react-icons/lu';
+
 /**
  * WorkBuddy-style follow-up chips: next-turn user inputs rendered under the
- * latest assistant reply. Count follows the turn (skill next steps), not a
- * fixed three. Clicking one sends that text immediately.
+ * latest assistant reply. Source is the model's judgment of `[next_steps]`
+ * or the last paragraph — count follows that, not a fixed three. Clicking
+ * one sends that text immediately.
  */
 export function SuggestedReplies({
   suggestions,
@@ -14,18 +17,23 @@ export function SuggestedReplies({
 
   return (
     <div
-      className="mx-auto flex w-full max-w-[var(--chat-input-box-width)] flex-col items-start gap-1.5 px-1 pt-1"
+      className="mx-auto mt-2.5 flex w-full max-w-[var(--chat-input-box-width)] flex-wrap items-center gap-1.5 px-1 pb-0.5"
       data-testid="suggested-replies"
     >
+      <div className="mr-0.5 inline-flex items-center gap-1 text-[11px] font-medium text-agent-muted-foreground/70 select-none">
+        <LuSparkles className="h-3 w-3 text-agent-muted-foreground/80" />
+        <span>建议回复</span>
+      </div>
       {suggestions.map((text) => (
         <button
           key={text}
           type="button"
           data-testid="suggested-reply"
           onClick={() => onSelect(text)}
-          className="max-w-full rounded-full border border-agent-border bg-agent-muted/40 px-3 py-1.5 text-left text-[13px] leading-snug text-agent-foreground transition-colors hover:bg-agent-foreground/5"
+          title={text}
+          className="inline-flex max-w-[280px] sm:max-w-[340px] items-center rounded-full border border-agent-border/80 bg-agent-canvas px-2.5 py-1 text-left text-[12px] leading-[1.4] text-agent-muted-foreground transition-all duration-150 hover:border-agent-foreground/30 hover:bg-agent-foreground/5 hover:text-agent-foreground shadow-2xs active:scale-[0.98]"
         >
-          {text}
+          <span className="truncate">{text}</span>
         </button>
       ))}
     </div>
@@ -33,3 +41,4 @@ export function SuggestedReplies({
 }
 
 export default SuggestedReplies;
+

package/src/components/chat/TaskPanelModal.tsx

@@ -135,9 +135,9 @@ export function TaskPanelModal({
       data-task-panel-modal
     >
       <div className="flex max-h-[85vh] w-full max-w-xl flex-col overflow-hidden rounded-agent-lg border border-agent-border bg-agent-canvas shadow-xl">
-        <div className="flex items-center gap-2 border-b border-agent-border px-4 py-2.5">
+        <div className="flex items-center gap-2 border-b border-agent-border px-3 py-2">
           <LuListTodo className="h-4 w-4 shrink-0 text-agent-muted-foreground" />
-          <span className="min-w-0 flex-1 truncate text-sm font-medium text-agent-foreground">
+          <span className="min-w-0 flex-1 truncate text-xs font-medium text-agent-foreground">
             后台任务
             {tasks && tasks.length > 0 && (
               <span className="ml-1.5 text-xs font-normal text-agent-muted-foreground">
@@ -298,7 +298,7 @@ export function TaskPanelModal({
           )}
         </div>
 
-        <div className="border-t border-agent-border px-4 py-2 text-[10px] text-agent-muted-foreground/80">
+        <div className="border-t border-agent-border px-3 py-1.5 text-[10px] text-agent-muted-foreground/80">
           任务由后台智能体独立执行。点任务名可在右侧看推理过程；Esc 关闭。
         </div>
       </div>

package/src/components/chat/TaskProcessPanel.tsx

@@ -1,18 +1,34 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { LuArrowDown, LuLoaderCircle, LuTerminal } from 'react-icons/lu';
 import { DockHeaderButton, DockPanelHeader } from '@/components/DockPanelHeader';
-import { getTaskProcess } from '@/lib/local-api';
+import { getChildProcess, getTaskProcess } from '@/lib/local-api';
 import { getElectronBridge } from '@/lib/electron-bridge';
 import { Markdown } from '@/components/chat/Markdown';
 import { TurnProcessGroup } from '@/components/chat/TurnProcessGroup';
-import { parseTurnBlocks, type TurnBlock } from '@/components/chat/turn-timeline';
+import {
+  parseTurnBlocks,
+  timelineContentSignature,
+  type TurnBlock,
+} from '@/components/chat/turn-timeline';
 
 export interface InspectedTask {
   id: string;
   chatId: string;
   title: string;
+  /**
+   * 子代理过程：按它自己的 durable record 读，而不是任务表。设了它就走
+   * `GET /child-process`，`live` 期间轮询（子回合边跑边写 record）。
+   */
+  recordId?: string;
+  /** 目标仍在运行——决定轮询与标题状态。 */
+  live?: boolean;
 }
 
+const CHILD_POLL_INTERVAL_MS = 1500;
+
+/** 连续这么多次轮询读到同一份内容就认为子代理跑完了（≈60s）。 */
+const CHILD_IDLE_POLLS_UNTIL_DONE = 40;
+
 const NEAR_BOTTOM_THRESHOLD_PX = 100;
 
 /**
@@ -74,27 +90,46 @@ export function TaskProcessPanel({
 
   // live 增量在 paint 前钉住底部。smooth scroll 会先露出一帧半截内容再往下
   // 滑，Windows 经典滚动条就会上下跳。
-  const timelineSig = blocks
-    .map((block) =>
-      block.type === 'tools' ? `t${block.actions.length}` : `c${block.content.length}`,
-    )
-    .join('|');
+  const timelineSig = timelineContentSignature(blocks);
   useLayoutEffect(() => {
     if (!isAtBottomRef.current) return;
     scrollToBottom('auto');
   }, [timelineSig, live, scrollToBottom]);
 
+  const childRecordId = inspected.recordId;
+
   useEffect(() => {
     let cancelled = false;
+    let timer: number | undefined;
+    let lastSig: string | null = null;
+    let idlePolls = 0;
     setLoading(true);
     setError(null);
-    void (async () => {
+    const load = async () => {
       try {
-        const snapshot = await getTaskProcess(inspected.id);
-        if (cancelled) return;
-        setBlocks(parseTurnBlocks(snapshot.timeline) ?? []);
-        setLive(snapshot.live);
-        setStale(snapshot.stale);
+        if (childRecordId) {
+          const snapshot = await getChildProcess(childRecordId);
+          if (cancelled) return;
+          const next = parseTurnBlocks(snapshot.timeline) ?? [];
+          const sig = timelineContentSignature(next);
+          idlePolls = sig === lastSig ? idlePolls + 1 : 0;
+          lastSig = sig;
+          setBlocks(next);
+          // 子代理跑完不会再有事件通知这个面板（它的 live 是点开那刻的快照），
+          // 所以用「record 不再变化」当结束信号：停轮询、标题转「已结束」。
+          if (timer !== undefined && idlePolls >= CHILD_IDLE_POLLS_UNTIL_DONE) {
+            window.clearInterval(timer);
+            timer = undefined;
+            setLive(false);
+          }
+          setStale(false);
+        } else {
+          const snapshot = await getTaskProcess(inspected.id);
+          if (cancelled) return;
+          setBlocks(parseTurnBlocks(snapshot.timeline) ?? []);
+          setLive(snapshot.live);
+          setStale(snapshot.stale);
+        }
       } catch (err) {
         if (cancelled) return;
         setError(err instanceof Error ? err.message : String(err));
@@ -102,13 +137,22 @@ export function TaskProcessPanel({
       } finally {
         if (!cancelled) setLoading(false);
       }
-    })();
+    };
+    if (childRecordId) setLive(Boolean(inspected.live));
+    void load();
+    // 子代理没有 task-process 广播通道（它不是任务），运行中靠轮询它的
+    // record 追进度；终态打开只读一次。
+    if (childRecordId && inspected.live) {
+      timer = window.setInterval(() => void load(), CHILD_POLL_INTERVAL_MS);
+    }
     return () => {
       cancelled = true;
+      if (timer !== undefined) window.clearInterval(timer);
     };
-  }, [inspected.id]);
+  }, [inspected.id, childRecordId, inspected.live]);
 
   useEffect(() => {
+    if (childRecordId) return;
     const bridge = getElectronBridge();
     if (!bridge?.onTaskProcess) return;
     return bridge.onTaskProcess((payload) => {
@@ -121,13 +165,14 @@ export function TaskProcessPanel({
       setLive(payload.live);
       if (payload.live) setStale(false);
     });
-  }, [inspected.id]);
+  }, [inspected.id, childRecordId]);
 
   const statusLabel = live
     ? '正在推理'
     : stale
       ? '进程已中断（表上仍是运行中）'
       : '已结束';
+  const panelTitle = `${childRecordId ? '子代理推理' : '后台推理'} · ${statusLabel}`;
 
   return (
     <div
@@ -135,7 +180,7 @@ export function TaskProcessPanel({
       data-testid="task-process-panel"
     >
       <DockPanelHeader
-        title={`后台推理 · ${statusLabel}`}
+        title={panelTitle}
         onClose={onClose}
         closeLabel="关闭过程面板"
         actions={
@@ -149,7 +194,7 @@ export function TaskProcessPanel({
           )
         }
       />
-      <div className="border-b border-agent-border/60 px-3 py-2">
+      <div className="border-b border-agent-border/60 px-2.5 py-1.5">
         <div className="line-clamp-3 text-xs leading-relaxed text-agent-foreground">
           {inspected.title}
         </div>
@@ -157,7 +202,7 @@ export function TaskProcessPanel({
       <div className="relative min-h-0 flex-1 overflow-hidden">
         <div
           ref={containerRef}
-          className="h-full overflow-y-auto overflow-anchor-none p-3"
+          className="h-full overflow-y-auto overflow-anchor-none p-2.5"
           data-testid="task-process-scroll"
         >
           {loading ? (
@@ -172,6 +217,7 @@ export function TaskProcessPanel({
               blocks={blocks}
               isStreaming={live}
               showThinkingContent
+              collapseWhenFinished={false}
               agents={[]}
               chats={[]}
               emptyFallback={
@@ -184,7 +230,7 @@ export function TaskProcessPanel({
                 </div>
               }
               renderAnswer={(block) => (
-                <div className="text-sm leading-relaxed text-agent-foreground">
+                <div className="text-xs leading-relaxed text-agent-foreground">
                   <Markdown agents={[]} chats={[]}>{block.content}</Markdown>
                 </div>
               )}
@@ -199,7 +245,7 @@ export function TaskProcessPanel({
               setIsAtBottom(true);
               scrollToBottom('smooth');
             }}
-            className="absolute bottom-3 right-3 flex h-8 w-8 items-center justify-center rounded-full border border-agent-border bg-agent-canvas text-agent-foreground shadow-md transition-colors hover:bg-agent-foreground/5"
+            className="absolute bottom-2 right-2 flex h-7 w-7 items-center justify-center rounded-full border border-agent-border bg-agent-canvas text-agent-foreground shadow-md transition-colors hover:bg-agent-foreground/5"
             title="回到底部"
             aria-label="回到底部"
           >

package/src/components/chat/TurnFilesCard.tsx

@@ -57,7 +57,7 @@ export function TurnFilesCard({ files }: TurnFilesCardProps) {
       className="rounded-agent-lg border border-agent-border bg-agent-canvas shadow-sm"
       data-turn-files=""
     >
-      <div className="flex items-center gap-1.5 border-b border-agent-border/60 px-3 py-1.5 text-[11px] text-agent-muted-foreground">
+      <div className="flex items-center gap-1.5 border-b border-agent-border/60 px-2.5 py-1 text-[11px] text-agent-muted-foreground">
         <LuFiles className="h-3.5 w-3.5" />
         <span>本轮产生了 {files.length} 个文件，点击打开</span>
       </div>
@@ -74,7 +74,7 @@ export function TurnFilesCard({ files }: TurnFilesCardProps) {
                 onClick={() => void handleOpen(file)}
                 disabled={openingPath !== null}
                 title={file.path}
-                className="flex w-full items-center gap-2 px-3 py-1 text-left text-xs transition-colors hover:bg-agent-foreground/5 disabled:cursor-wait"
+                className="flex w-full items-center gap-2 px-2.5 py-1 text-left text-xs transition-colors hover:bg-agent-foreground/5 disabled:cursor-wait"
                 data-turn-file=""
                 data-kind={file.kind}
               >