@steerable/agent-shell-web 0.6.26 → 0.6.28

package/src/components/chat/TurnProcessGroup.tsx

@@ -1,125 +1,275 @@
 import { Fragment, useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react';
 import { LuChevronDown, LuChevronRight } from 'react-icons/lu';
 import type { LocalChat, LocalChatAgent } from '@/lib/local-api';
-import { useShowThinkingContent } from '@/lib/show-thinking-content';
+import {
+  useThinkingDisplay,
+  type ThinkingDisplayMode,
+} from '@/lib/show-thinking-content';
 import { Markdown } from './Markdown';
 import { ToolsFlow } from './ExecutedActionsCard';
-import { processStatusLabel } from './process-status';
-import { processHasReasoning, splitTurnProcess, type TurnBlock } from './turn-timeline';
+import {
+  estimateReasoningDurationMs,
+  processStatusLabel,
+  thinkingFoldLabel,
+} from './process-status';
+import { splitTurnProcess, type TurnBlock } from './turn-timeline';
 
 /**
- * Codex / DeepSeek-style turn process: think + tool rows stay in one
- * disclosure. Default is collapsed (settings 「显示思考内容」 off). While
- * streaming, a fixed 7-line peek shows the latest reasoning; it folds when
- * the turn ends. The status line still shows 思考中 / 工具名 / tok/s /
- * elapsed. The summary itself stays outside the fold.
+ * Codex / DeepSeek-style turn process. Each LLM round keeps three surfaces
+ * distinct: 思考 (muted CoT), 思考后的 response (reply bubble), 工具
+ * (cards). Trailing text becomes 最后一次结论 only after the stream ends —
+ * promoting it earlier would restyle it as thinking when the next round
+ * starts. Settings 「显示思考内容」 only clip the 思考正文: hidden /
+ * 5-line peek / full. A finished 思考 fold auto-collapses in chat;
+ * only the live round stays open. Tools and the work row stay independent.
  */
 
-export const THINKING_PEEK_LINES = 7;
+export const THINKING_PEEK_LINES = 5;
+/** 思考正文行高（`leading-snug`）。 */
+const THINKING_LINE_HEIGHT = 1.375;
+/**
+ * 最多 5 行：用 max-height，短思考按内容收，不撑空。
+ * 不用 CSS `lh`：Windows Electron 在中文字体尚未就绪时 `lh` 会算成 0，
+ * 思考 peek 整块消失，字体加载后又把主列表高度撑跳。
+ */
+export const THINKING_PEEK_HEIGHT = `${THINKING_PEEK_LINES * THINKING_LINE_HEIGHT}em`;
+
+const THINKING_TEXT =
+  'border-l border-agent-border/70 pl-2 text-xs leading-snug text-agent-muted-foreground';
+
+function splitThinkingParagraphs(content: string): string[] {
+  return content.split(/\n{2,}/).filter((part) => part.length > 0);
+}
+
+function ReasoningBody({
+  content,
+  showCursor,
+}: {
+  content: string;
+  showCursor?: boolean;
+}) {
+  const parts = splitThinkingParagraphs(content);
+  return (
+    <>
+      <div className="space-y-1">
+        {parts.map((part, index) => (
+          <div key={index} className="whitespace-pre-wrap break-words">
+            {part}
+          </div>
+        ))}
+      </div>
+      {showCursor ? (
+        <span className="ml-0.5 inline-block h-3 w-[2px] animate-agent-cursor-blink bg-agent-muted-foreground/60 align-text-bottom" />
+      ) : null}
+    </>
+  );
+}
 
-function useLiveElapsedMs(
-  startedAtMs: number | undefined,
-  enabled: boolean,
-): number | undefined {
+function resolveThinkingDisplay(
+  preference: ThinkingDisplayMode,
+  thinkingDisplay?: ThinkingDisplayMode,
+  showThinkingContent?: boolean,
+): ThinkingDisplayMode {
+  if (thinkingDisplay) return thinkingDisplay;
+  if (showThinkingContent === true) return 'full';
+  if (showThinkingContent === false) return 'peek';
+  return preference;
+}
+
+function useLiveNow(enabled: boolean): number {
   const [now, setNow] = useState(() => Date.now());
   useEffect(() => {
-    if (!enabled || startedAtMs == null) return;
+    if (!enabled) return;
     setNow(Date.now());
     const id = window.setInterval(() => setNow(Date.now()), 1000);
     return () => window.clearInterval(id);
-  }, [enabled, startedAtMs]);
-  if (startedAtMs == null) return undefined;
-  return Math.max(0, now - startedAtMs);
+  }, [enabled]);
+  return now;
 }
 
-function ProcessBlocks({
+function ReasoningPane({
+  content,
+  showCursor,
+  clipped,
+}: {
+  content: string;
+  showCursor?: boolean;
+  clipped?: boolean;
+}) {
+  const scrollerRef = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    if (!clipped) return;
+    const el = scrollerRef.current;
+    if (!el) return;
+    el.scrollTop = el.scrollHeight;
+  }, [clipped, content]);
+  const body = (
+    <div className={THINKING_TEXT}>
+      <ReasoningBody content={content} showCursor={showCursor} />
+    </div>
+  );
+  if (!clipped) return body;
+  return (
+    <div
+      ref={scrollerRef}
+      className="overflow-y-auto overflow-anchor-none [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
+      style={{ maxHeight: THINKING_PEEK_HEIGHT }}
+      data-thinking-peek=""
+      data-testid="thinking-peek"
+      data-peek-lines={THINKING_PEEK_LINES}
+    >
+      {body}
+    </div>
+  );
+}
+
+function ThinkingFold({
+  content,
+  label,
+  showCursor,
+  mode,
+  defaultOpen,
+}: {
+  content: string;
+  label: string;
+  showCursor?: boolean;
+  mode: ThinkingDisplayMode;
+  defaultOpen: boolean;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  useEffect(() => {
+    setOpen(defaultOpen);
+  }, [defaultOpen]);
+
+  if (mode === 'hidden') return null;
+
+  return (
+    <div className="space-y-1" data-testid="turn-thinking">
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="flex min-w-0 items-center gap-1 py-0.5 text-left text-[11px] text-agent-muted-foreground/80 transition-colors hover:text-agent-foreground"
+        aria-expanded={open}
+        data-thinking-fold=""
+      >
+        <span className="truncate">{label}</span>
+        {open ? (
+          <LuChevronDown className="h-3 w-3 shrink-0" />
+        ) : (
+          <LuChevronRight className="h-3 w-3 shrink-0" />
+        )}
+      </button>
+      {open ? (
+        <ReasoningPane
+          content={content}
+          showCursor={showCursor}
+          clipped={mode === 'peek'}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function ProcessBlockItems({
   blocks,
   isStreaming,
   agents,
   chats,
   chatId,
+  thinkingDisplay,
+  keepFinishedThinkingOpen = false,
+  thinkingElapsedByIndex,
 }: {
   blocks: TurnBlock[];
   isStreaming: boolean;
   agents: LocalChatAgent[];
   chats: LocalChat[];
   chatId?: string | null;
+  thinkingDisplay: ThinkingDisplayMode;
+  keepFinishedThinkingOpen?: boolean;
+  thinkingElapsedByIndex?: Array<number | undefined>;
 }) {
   const lastIndex = blocks.length - 1;
   return (
-    <div className="space-y-1.5 border-l border-agent-border/70 pl-3">
+    <>
       {blocks.map((block, index) => {
         const isLast = index === lastIndex;
         if (block.type === 'reasoning') {
+          const isLive = isStreaming && isLast;
+          const elapsedMs =
+            thinkingElapsedByIndex?.[index]
+            ?? block.durationMs
+            ?? (isLive ? undefined : estimateReasoningDurationMs(block.content));
           return (
-            <div
+            <ThinkingFold
               key={`reasoning-${index}`}
-              className="text-xs leading-relaxed text-agent-muted-foreground"
-            >
-              <Markdown agents={agents} chats={chats} chatId={chatId}>{block.content}</Markdown>
-              {isStreaming && isLast && (
-                <span className="ml-0.5 inline-block h-3 w-[2px] animate-agent-cursor-blink bg-agent-muted-foreground/60 align-text-bottom" />
-              )}
-            </div>
+              content={block.content}
+              label={thinkingFoldLabel({
+                content: block.content,
+                isLive,
+                elapsedMs,
+              })}
+              showCursor={isLive}
+              mode={thinkingDisplay}
+              defaultOpen={isLive || keepFinishedThinkingOpen}
+            />
           );
         }
         if (block.type === 'tools') {
-          return <ToolsFlow key={`tools-${index}`} actions={block.actions} compact />;
+          return (
+            <div key={`tools-${index}`} data-testid="turn-tools">
+              <ToolsFlow actions={block.actions} compact />
+            </div>
+          );
         }
         return (
-          <div
-            key={`text-${index}`}
-            className="markdown-content text-xs leading-relaxed text-agent-muted-foreground"
-          >
-            <Markdown agents={agents} chats={chats} chatId={chatId}>{block.content}</Markdown>
+          <div key={`text-${index}`} data-testid="turn-response">
+            <div>
+              <div className="markdown-content text-xs leading-relaxed text-agent-foreground">
+                <Markdown agents={agents} chats={chats} chatId={chatId}>{block.content}</Markdown>
+              </div>
+              {isStreaming && isLast ? (
+                <span className="ml-0.5 inline-block h-3.5 w-[3px] animate-agent-cursor-blink bg-agent-foreground/60 align-text-bottom" />
+              ) : null}
+            </div>
           </div>
         );
       })}
-    </div>
+    </>
   );
 }
 
-function ThinkingPeek({
+function ProcessBlocks({
   blocks,
   isStreaming,
   agents,
   chats,
   chatId,
+  thinkingDisplay,
+  keepFinishedThinkingOpen,
+  thinkingElapsedByIndex,
 }: {
   blocks: TurnBlock[];
   isStreaming: boolean;
   agents: LocalChatAgent[];
   chats: LocalChat[];
   chatId?: string | null;
+  thinkingDisplay: ThinkingDisplayMode;
+  keepFinishedThinkingOpen: boolean;
+  thinkingElapsedByIndex?: Array<number | undefined>;
 }) {
-  const scrollerRef = useRef<HTMLDivElement>(null);
-  const reasoning = blocks.filter(
-    (block): block is Extract<TurnBlock, { type: 'reasoning' }> =>
-      block.type === 'reasoning' && block.content.trim().length > 0,
-  );
-  const sig = reasoning.map((block) => block.content.length).join(',');
-  useLayoutEffect(() => {
-    const el = scrollerRef.current;
-    if (!el) return;
-    el.scrollTop = el.scrollHeight;
-  }, [sig]);
-  const lastIndex = reasoning.length - 1;
   return (
-    <div
-      ref={scrollerRef}
-      className="h-[7lh] overflow-hidden border-l border-agent-border/70 pl-3 text-xs leading-relaxed text-agent-muted-foreground"
-      data-thinking-peek=""
-      data-testid="thinking-peek"
-      data-peek-lines={THINKING_PEEK_LINES}
-    >
-      {reasoning.map((block, index) => (
-        <div key={`peek-reasoning-${index}`}>
-          <Markdown agents={agents} chats={chats} chatId={chatId}>{block.content}</Markdown>
-          {isStreaming && index === lastIndex && (
-            <span className="ml-0.5 inline-block h-3 w-[2px] animate-agent-cursor-blink bg-agent-muted-foreground/60 align-text-bottom" />
-          )}
-        </div>
-      ))}
+    <div className="space-y-1.5">
+      <ProcessBlockItems
+        blocks={blocks}
+        isStreaming={isStreaming}
+        agents={agents}
+        chats={chats}
+        chatId={chatId}
+        thinkingDisplay={thinkingDisplay}
+        keepFinishedThinkingOpen={keepFinishedThinkingOpen}
+        thinkingElapsedByIndex={thinkingElapsedByIndex}
+      />
     </div>
   );
 }
@@ -134,7 +284,9 @@ export function TurnProcessGroup({
   streamingHint,
   startedAtMs,
   durationMs,
+  thinkingDisplay: thinkingDisplayProp,
   showThinkingContent: showThinkingContentProp,
+  collapseWhenFinished = true,
   renderAnswer,
 }: {
   blocks: TurnBlock[];
@@ -149,25 +301,48 @@ export function TurnProcessGroup({
   startedAtMs?: number;
   /** Frozen wall-clock of a finished turn (metadata or just-ended stream). */
   durationMs?: number;
+  /** Override the settings preference (hidden / peek / full). */
+  thinkingDisplay?: ThinkingDisplayMode;
   /**
-   * Override the settings preference. Omitted = read 「显示思考内容」.
+   * Legacy override. `true` = full, `false` = peek.
    * Task process panel passes true so the inspector stays expanded.
    */
   showThinkingContent?: boolean;
+  /**
+   * After the stream ends, fold the work row to the summary line.
+   * Task inspector sets false so the replay stays open.
+   */
+  collapseWhenFinished?: boolean;
   renderAnswer: (block: Extract<TurnBlock, { type: 'text' }>, isLast: boolean) => ReactNode;
 }) {
-  const preference = useShowThinkingContent();
-  const showThinkingContent = showThinkingContentProp ?? preference;
-  const { process, answer } = splitTurnProcess(blocks);
-  const [open, setOpen] = useState(
-    () => showThinkingContent && (isStreaming || answer.length === 0),
+  const preference = useThinkingDisplay();
+  const thinkingDisplay = resolveThinkingDisplay(
+    preference,
+    thinkingDisplayProp,
+    showThinkingContentProp,
   );
-  const wasStreamingRef = useRef(isStreaming);
-  const isStreamingRef = useRef(isStreaming);
+  const showFullThinking = thinkingDisplay === 'full';
+  const { process, answer } = splitTurnProcess(blocks, { finalize: !isStreaming });
+  const defaultOpen = isStreaming
+    ? thinkingDisplay !== 'hidden'
+    : showFullThinking && !collapseWhenFinished;
+  const [userOpen, setUserOpen] = useState<boolean | null>(null);
+  const open = userOpen ?? defaultOpen;
+  useEffect(() => {
+    setUserOpen(null);
+  }, [isStreaming]);
   const answerLenRef = useRef(answer.length);
-  isStreamingRef.current = isStreaming;
   answerLenRef.current = answer.length;
-  const liveElapsedMs = useLiveElapsedMs(startedAtMs, isStreaming);
+  const now = useLiveNow(isStreaming);
+  const streamClockRef = useRef<number | undefined>(undefined);
+  if (isStreaming) {
+    streamClockRef.current ??= startedAtMs ?? now;
+  } else {
+    streamClockRef.current = undefined;
+  }
+  const liveElapsedMs = isStreaming
+    ? Math.max(0, now - (startedAtMs ?? streamClockRef.current ?? now))
+    : undefined;
   const lastLiveElapsedRef = useRef<number | undefined>(undefined);
   if (isStreaming && liveElapsedMs != null) {
     lastLiveElapsedRef.current = liveElapsedMs;
@@ -177,72 +352,67 @@ export function TurnProcessGroup({
     : durationMs ?? lastLiveElapsedRef.current;
 
   const lastProcess = process[process.length - 1];
+  const lastIsReasoning = lastProcess?.type === 'reasoning';
+  const reasoningDurationsRef = useRef<number[]>([]);
   const reasoningClockRef = useRef<{ index: number; startedAt: number } | null>(null);
-  if (isStreaming && lastProcess?.type === 'reasoning') {
+  if (isStreaming && lastIsReasoning) {
     const index = process.length - 1;
     if (reasoningClockRef.current?.index !== index) {
-      reasoningClockRef.current = { index, startedAt: Date.now() };
+      const prev = reasoningClockRef.current;
+      if (prev) {
+        reasoningDurationsRef.current[prev.index] = Math.max(0, now - prev.startedAt);
+      }
+      reasoningClockRef.current = { index, startedAt: now };
     }
-  } else if (!isStreaming) {
+  } else if (reasoningClockRef.current) {
+    const prev = reasoningClockRef.current;
+    reasoningDurationsRef.current[prev.index] = Math.max(0, now - prev.startedAt);
     reasoningClockRef.current = null;
   }
-  const reasoningElapsedMs =
-    isStreaming && lastProcess?.type === 'reasoning' && reasoningClockRef.current
-      ? Math.max(0, Date.now() - reasoningClockRef.current.startedAt)
-      : undefined;
-
-  useEffect(() => {
-    if (!showThinkingContent) {
-      setOpen(false);
-      return;
-    }
-    if (isStreamingRef.current || answerLenRef.current === 0) setOpen(true);
-  }, [showThinkingContent]);
-
-  useEffect(() => {
-    const wasStreaming = wasStreamingRef.current;
-    if (wasStreaming && !isStreaming && answer.length > 0) {
-      setOpen(false);
+  const thinkingElapsedByIndex = process.map((block, index) => {
+    if (block.type !== 'reasoning') return undefined;
+    if (
+      isStreaming &&
+      lastIsReasoning &&
+      index === process.length - 1 &&
+      reasoningClockRef.current
+    ) {
+      return Math.max(0, now - reasoningClockRef.current.startedAt);
     }
-    if (!wasStreaming && isStreaming) {
-      setOpen(showThinkingContent);
-    }
-    wasStreamingRef.current = isStreaming;
-  }, [isStreaming, answer.length, showThinkingContent]);
+    return reasoningDurationsRef.current[index];
+  });
 
   if (blocks.length === 0) return <>{emptyFallback}</>;
 
   const showToggle = process.length > 0;
   const showProcess = !showToggle || open;
-  const showThinkingPeek =
-    isStreaming && !open && showToggle && processHasReasoning(process);
   const showStreamingHint =
     Boolean(streamingHint) && isStreaming && answer.length === 0 && !showToggle;
 
   return (
-    <div className="space-y-1.5" data-turn-timeline>
+    <div className="space-y-1" data-turn-timeline>
       {showToggle && (
         <button
           type="button"
-          onClick={() => setOpen((value) => !value)}
+          onClick={() => setUserOpen(!open)}
           className="flex w-full items-center gap-1 py-0.5 text-left text-xs text-agent-muted-foreground transition-colors hover:text-agent-foreground"
           aria-expanded={open}
           data-turn-process=""
+          data-testid="turn-process-toggle"
           data-open={open || undefined}
         >
-          {open ? (
-            <LuChevronDown className="h-3.5 w-3.5 shrink-0" />
-          ) : (
-            <LuChevronRight className="h-3.5 w-3.5 shrink-0" />
-          )}
-          <span className="truncate">
+          <span className="min-w-0 truncate">
             {processStatusLabel({
               process,
               isStreaming,
               elapsedMs,
-              reasoningElapsedMs,
             })}
           </span>
+          {open ? (
+            <LuChevronDown className="h-3.5 w-3.5 shrink-0" />
+          ) : (
+            <LuChevronRight className="h-3.5 w-3.5 shrink-0" />
+          )}
         </button>
       )}
       {showProcess && (
@@ -252,15 +422,9 @@ export function TurnProcessGroup({
           agents={agents}
           chats={chats}
           chatId={chatId}
-        />
-      )}
-      {showThinkingPeek && (
-        <ThinkingPeek
-          blocks={process}
-          isStreaming={answer.length === 0}
-          agents={agents}
-          chats={chats}
-          chatId={chatId}
+          thinkingDisplay={thinkingDisplay}
+          keepFinishedThinkingOpen={!collapseWhenFinished}
+          thinkingElapsedByIndex={thinkingElapsedByIndex}
         />
       )}
       {showStreamingHint ? streamingHint : null}

package/src/components/chat/UserMessage.tsx

@@ -62,7 +62,7 @@ export function UserMessage({ message, agents = [], chats = [] }: UserMessagePro
 
   return (
     <motion.div
-      className="group/message mb-2"
+      className="group/message mb-1"
       data-message-role="user"
       data-message-id={message.id}
       initial={{ opacity: 0, y: 20 }}
@@ -70,7 +70,7 @@ export function UserMessage({ message, agents = [], chats = [] }: UserMessagePro
       transition={{ duration: 0.3 }}
     >
       <div className="flex justify-start">
-        <div className="mx-auto w-full max-w-[var(--chat-input-box-width)] rounded-lg border border-agent-border bg-agent-muted p-3 text-sm text-agent-foreground">
+        <div className="mx-auto w-full max-w-[var(--chat-input-box-width)] rounded-lg border border-agent-border bg-agent-muted px-2.5 py-2 text-xs text-agent-foreground">
           <div className="relative">
             <div
               ref={contentRef}
@@ -121,7 +121,7 @@ export function UserMessage({ message, agents = [], chats = [] }: UserMessagePro
             </button>
           )}
 
-          <div className="mt-2 flex items-center justify-between">
+          <div className="mt-1 flex items-center justify-between">
             <button
               type="button"
               onClick={() => void copy()}
@@ -140,7 +140,7 @@ export function UserMessage({ message, agents = [], chats = [] }: UserMessagePro
                 <LuCopy className="h-3 w-3" />
               )}
             </button>
-            <div className="text-[13px] text-agent-muted-foreground">
+            <div className="text-[11px] text-agent-muted-foreground">
               {message.createdAt
                 ? getFriendlyDate(new Date(message.createdAt))
                 : getFriendlyDate(new Date())}

package/src/components/chat/next-steps-tags.ts

@@ -0,0 +1,28 @@
+/**
+ * 助手回复里的自定义 `[next_steps]...[/next_steps]` 标签：
+ * 给追问建议当判断来源，气泡里只显示标签内的正文，不显示标签本身。
+ */
+
+const COMPLETE_BLOCK_RE = /\[next_steps\]([\s\S]*?)\[\/next_steps\]/gi;
+const OPEN_TAG = 'next_steps]';
+const CLOSE_TAG = '/next_steps]';
+
+function isIncompleteTagSuffix(suffix: string): boolean {
+  const body = suffix.slice(1).toLowerCase();
+  if (!body) return false;
+  return OPEN_TAG.startsWith(body) || CLOSE_TAG.startsWith(body);
+}
+
+function stripIncompleteTrailingTag(text: string): string {
+  const idx = text.lastIndexOf('[');
+  if (idx < 0) return text;
+  const suffix = text.slice(idx);
+  return isIncompleteTagSuffix(suffix) ? text.slice(0, idx) : text;
+}
+
+/** 去掉自定义标签，保留里面的建议正文。 */
+export function stripNextStepsTags(text: string): string {
+  let out = (text ?? '').replace(COMPLETE_BLOCK_RE, '$1');
+  out = out.replace(/\[\/?next_steps\]/gi, '');
+  return stripIncompleteTrailingTag(out);
+}