@springbrand/message-panel 0.1.3-alpha.34 → 0.1.3-alpha.36

package/cloud-os/chat/tool-timeline.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { ChevronRightIcon, type LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../primitives/collapsible";
+import { cn } from "../internal/cn";
+import { ShimmerLabel, SwapLabel } from "./surfaces";
+import { take } from "./range";
+
+export interface TimelineStep {
+  verb: string;
+  chip: string;
+  icon: LucideIcon;
+}
+
+export interface TimelineStat {
+  file: string;
+  added?: number;
+  removed?: number;
+}
+
+export interface ToolTimelineProps {
+  steps: readonly TimelineStep[];
+  visibleSteps: number;
+  streaming: boolean;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  restingLabel: string;
+  activeLabel: string;
+  stats: TimelineStat[];
+  className?: string;
+  children?: ReactNode;
+}
+
+export function ToolTimeline({
+  steps,
+  visibleSteps,
+  streaming,
+  open,
+  onOpenChange,
+  restingLabel,
+  activeLabel,
+  stats,
+  className,
+  children,
+}: ToolTimelineProps) {
+  return (
+    <Collapsible
+      data-slot="tool-timeline"
+      open={open}
+      onOpenChange={onOpenChange}
+      className={cn("w-full max-w-sm", className)}
+    >
+      <CollapsibleTrigger className="group/trigger text-foreground/55 hover:text-foreground/90 flex items-center gap-1.5 rounded-md py-1 text-[13.5px] transition-colors outline-none">
+        <ChevronRightIcon className="size-3.5 shrink-0 opacity-60 transition-transform duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-open/trigger:rotate-90 group-data-panel-open/trigger:rotate-90 motion-reduce:transition-none" />
+        <SwapLabel
+          active={streaming ? 0 : 1}
+          className="text-start tabular-nums"
+        >
+          <ShimmerLabel
+            active={streaming}
+            className="relative inline-block leading-none"
+          >
+            {activeLabel}
+          </ShimmerLabel>
+          <>{restingLabel}</>
+        </SwapLabel>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="outline-none">
+        <div className="flex flex-col gap-2.5 ps-4 pt-2.5">
+          {children ?? take(steps, visibleSteps).map((step, index, shown) => {
+            const Icon = step.icon;
+            const active = streaming && index === shown.length - 1;
+
+            return (
+              <div
+                key={step.chip}
+                className="fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-foreground/55 flex items-center gap-2 text-[13.5px] duration-300"
+              >
+                <Icon className="text-foreground/35 size-3.5 shrink-0" />
+                <ShimmerLabel
+                  active={active}
+                  className="relative inline-block leading-none"
+                >
+                  {step.verb}
+                </ShimmerLabel>
+                <span className="bg-foreground/[0.06] text-foreground/70 rounded-md px-1.5 py-0.5 font-mono text-[11px]">
+                  {step.chip}
+                </span>
+              </div>
+            );
+          })}
+          {stats.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 pt-1">
+              {stats.map((stat) => (
+                <span
+                  key={stat.file}
+                  className="bg-foreground/[0.06] text-foreground/70 inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 font-mono text-[11px]"
+                >
+                  <span>{stat.file}</span>
+                  {stat.added !== undefined && (
+                    <span className="text-emerald-600 dark:text-emerald-400">
+                      +{stat.added}
+                    </span>
+                  )}
+                  {stat.removed !== undefined && (
+                    <span className="text-red-600 dark:text-red-400">
+                      −{stat.removed}
+                    </span>
+                  )}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/cloud-os/chat/transcript-model.ts

@@ -28,6 +28,7 @@ export interface CloudOsMessageMetadata extends UnknownRecord {
   error?: string;
   interruptedByUser?: boolean;
   turnDurationMs?: number;
+  turnId?: string;
   turnStartedAt?: number;
   turnStatus?: string;
   requestedCapabilities?: unknown;
@@ -77,7 +78,7 @@ export type AssistantBlock =
       text: string;
       running: boolean;
     }
-  | { kind: "text"; key: string; text: string }
+  | { kind: "text"; key: string; text: string; final: boolean }
   | { kind: "toolGroup"; key: string; group: ToolCallGroup }
   | { kind: "plan"; key: string; steps: PlanStep[]; running: boolean }
   // 答案就在 call.output 里(`ask_user` 是 client-settled tool,用户点选后
@@ -143,6 +144,7 @@ export type CloudOsEntry =
       type: "assistant";
       key: string;
       messageId: string;
+      turnId: string;
       blocks: AssistantBlock[];
       copyText: string;
       timestamp?: number;
@@ -416,7 +418,7 @@ function assistantBlocks(
       const text = String(record.text ?? "").trim();
       if (!text) return;
       flush();
-      blocks.push({ kind: "text", key, text });
+      blocks.push({ kind: "text", key, text, final: false });
       return;
     }
 
@@ -622,6 +624,7 @@ export function buildCloudOsEntries({
   approvalIdOf = () => undefined,
 }: BuildEntriesOptions): CloudOsEntry[] {
   const entries: CloudOsEntry[] = [];
+  let fallbackTurnId = "turn:initial";
   const lastAssistantIndex = (() => {
     for (let index = messages.length - 1; index >= 0; index -= 1) {
       if (messages[index].role === "assistant") return index;
@@ -655,6 +658,9 @@ export function buildCloudOsEntries({
           };
         });
       if (!text && attachments.length === 0) return;
+      fallbackTurnId = typeof metadata.turnId === "string" && metadata.turnId
+        ? metadata.turnId
+        : `turn:user:${message.id}`;
       entries.push({
         type: "user",
         key: `user-${message.id}-${index}`,
@@ -682,6 +688,9 @@ export function buildCloudOsEntries({
       type: "assistant",
       key: `assistant-${message.id}-${index}`,
       messageId: message.id,
+      turnId: typeof metadata.turnId === "string" && metadata.turnId
+        ? metadata.turnId
+        : fallbackTurnId,
       blocks,
       copyText: messageText(message),
       timestamp:
@@ -691,7 +700,70 @@ export function buildCloudOsEntries({
     });
   });
 
-  return dropSupersededActionPresentations(dropSupersededPlans(entries));
+  return markFinalTextBlocks(mergeConsecutiveAssistantTurns(
+    dropSupersededActionPresentations(dropSupersededPlans(entries)),
+  ));
+}
+
+function isFinalOutputBlock(block: AssistantBlock): boolean {
+  return block.kind === "suggestions" ||
+    block.kind === "image" ||
+    block.kind === "file" ||
+    (block.kind === "actionPresentation" && block.presentation.state === "ready");
+}
+
+function isWorkBoundaryBlock(block: AssistantBlock): boolean {
+  return block.kind !== "text" && !isFinalOutputBlock(block);
+}
+
+function markFinalTextBlocks(entries: CloudOsEntry[]): CloudOsEntry[] {
+  return entries.map((entry) => {
+    if (entry.type !== "assistant") return entry;
+
+    const finalOutputBoundary = entry.blocks.findLastIndex(isFinalOutputBlock);
+    // Provider cleanup after final output must not pull the answer back into Work.
+    const searchBefore = finalOutputBoundary === -1
+      ? entry.blocks.length
+      : finalOutputBoundary;
+    let lastWorkBoundary = -1;
+    for (let index = searchBefore - 1; index >= 0; index -= 1) {
+      if (!isWorkBoundaryBlock(entry.blocks[index]!)) continue;
+      lastWorkBoundary = index;
+      break;
+    }
+
+    return {
+      ...entry,
+      blocks: entry.blocks.map((block, index) =>
+        block.kind === "text"
+          ? { ...block, final: index > lastWorkBoundary }
+          : block
+      ),
+    };
+  });
+}
+
+function mergeConsecutiveAssistantTurns(entries: CloudOsEntry[]): CloudOsEntry[] {
+  return entries.reduce<CloudOsEntry[]>((merged, entry) => {
+    const previous = merged.at(-1);
+    if (
+      entry.type !== "assistant" ||
+      previous?.type !== "assistant" ||
+      previous.turnId !== entry.turnId
+    ) {
+      merged.push(entry);
+      return merged;
+    }
+    merged[merged.length - 1] = {
+      ...previous,
+      messageId: entry.messageId,
+      blocks: [...previous.blocks, ...entry.blocks],
+      copyText: [previous.copyText, entry.copyText].filter(Boolean).join("\n\n"),
+      timestamp: entry.timestamp ?? previous.timestamp,
+      terminal: entry.terminal ?? previous.terminal,
+    };
+    return merged;
+  }, []);
 }
 
 function dropSupersededActionPresentations(entries: CloudOsEntry[]): CloudOsEntry[] {
@@ -741,31 +813,31 @@ function dropSupersededActionPresentations(entries: CloudOsEntry[]): CloudOsEntr
 }
 
 /**
- * update_plan 是**整份快照覆盖**,不是增量事件 —— 一次任务里每推进一步就会再发一份
- * 完整计划。原样按序渲染会把同一份计划画四遍(0/3、1/3、2/3、3/3),只有最后那份
- * 是当前事实。所以整条会话里只保留最后一份计划快照。
+ * update_plan 是**整份快照覆盖**,不是增量事件 —— 一次 Turn 里每推进一步就会再发一份
+ * 完整计划。原样按序渲染会把同一份计划画四遍(0/3、1/3、2/3、3/3),只有该 Turn 的
+ * 最后一份是当前事实。所以每个 turnId 各自保留最后一份计划快照。
  */
 function dropSupersededPlans(entries: CloudOsEntry[]): CloudOsEntry[] {
-  let lastPlanEntry = -1;
-  let lastPlanBlock = -1;
+  const lastPlanByTurn = new Map<string, { entryIndex: number; blockIndex: number }>();
   entries.forEach((entry, entryIndex) => {
     if (entry.type !== "assistant") return;
     entry.blocks.forEach((block, blockIndex) => {
       if (block.kind !== "plan") return;
-      lastPlanEntry = entryIndex;
-      lastPlanBlock = blockIndex;
+      lastPlanByTurn.set(entry.turnId, { entryIndex, blockIndex });
     });
   });
-  if (lastPlanEntry === -1) return entries;
+  if (lastPlanByTurn.size === 0) return entries;
 
   return entries.map((entry, entryIndex) =>
     entry.type === "assistant"
       ? {
           ...entry,
           blocks: entry.blocks.filter(
-            (block, blockIndex) =>
-              block.kind !== "plan" ||
-              (entryIndex === lastPlanEntry && blockIndex === lastPlanBlock),
+            (block, blockIndex) => {
+              if (block.kind !== "plan") return true;
+              const last = lastPlanByTurn.get(entry.turnId);
+              return last?.entryIndex === entryIndex && last.blockIndex === blockIndex;
+            },
           ),
         }
       : entry,
@@ -876,6 +948,8 @@ export function deriveTurnActivity(
   options: {
     isActive: boolean;
     isRecovering?: boolean;
+    recoveryAttempt?: number;
+    recoveryMax?: number;
     recoveryStatusLabel?: string;
     awaitingApproval?: boolean;
     hasPendingSteer?: boolean;
@@ -884,7 +958,10 @@ export function deriveTurnActivity(
   if (options.isRecovering) {
     return {
       state: "connecting",
-      label: options.recoveryStatusLabel ?? "Reconnecting…",
+      label: options.recoveryStatusLabel ??
+        (options.recoveryAttempt === undefined || options.recoveryMax === undefined
+          ? "Recovering model response…"
+          : `Recovering model response ${options.recoveryAttempt}/${options.recoveryMax}…`),
     };
   }
   if (!options.isActive) return null;

package/cloud-os/chat/web-search.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import type { ComponentProps } from "react";
+import { SearchIcon } from "lucide-react";
+import { cn } from "../internal/cn";
+import { field, mono, ShimmerLabel } from "./surfaces";
+import { take } from "./range";
+import type { CloudOsToolCall } from "./tool-presentation";
+
+/** Adapted from assistant-ui's MIT-licensed Web Search element. */
+export interface WebSearchResult {
+  title: string;
+  domain: string;
+}
+
+export function WebSearch({
+  query,
+  results,
+  visibleResults,
+  searching,
+  cycle,
+  className,
+  ...props
+}: Omit<
+  ComponentProps<"div">,
+  "children" | "results"
+> & {
+  query: string;
+  results: readonly WebSearchResult[];
+  visibleResults: number;
+  searching: boolean;
+  cycle: number;
+}) {
+  const revealedResults = take(results, visibleResults);
+  return (
+    <div
+      data-slot="web-search"
+      className={cn("flex w-full max-w-sm flex-col gap-2.5", className)}
+      {...props}
+    >
+      <span
+        className={cn(
+          field,
+          "text-foreground/70 inline-flex w-fit items-center gap-1.5 rounded-full px-3.5 py-2 text-xs",
+        )}
+      >
+        <SearchIcon className="text-foreground/40 size-3" />
+        {query}
+      </span>
+      <div className="text-foreground/45 text-xs">
+        {searching ? (
+          <ShimmerLabel className="relative inline-block leading-none">
+            Searching
+          </ShimmerLabel>
+        ) : (
+          <span className="fade-in animate-in duration-300">
+            Read {results.length} {results.length === 1 ? "source" : "sources"}
+          </span>
+        )}
+      </div>
+      <div className="flex min-h-[5.75rem] max-h-48 flex-col overflow-y-auto overscroll-contain pr-1">
+        {revealedResults.map((result, index) => (
+          <div
+            key={`${cycle}-${result.domain}-${index}`}
+            className="fade-in slide-in-from-bottom-1 animate-in fill-mode-both hover:bg-foreground/[0.03] -mx-2.5 flex items-center gap-2.5 rounded-xl px-2.5 py-1.5 transition-colors duration-300"
+          >
+            <span className="bg-foreground/[0.06] text-foreground/45 flex size-4 shrink-0 items-center justify-center rounded text-[9px] font-medium">
+              {result.domain.charAt(0).toUpperCase()}
+            </span>
+            <span className="text-foreground/90 min-w-0 flex-1 truncate text-[13.5px]">
+              {result.title}
+            </span>
+            <span className={cn(mono, "text-foreground/35 shrink-0")}>
+              {result.domain}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+type UnknownRecord = Record<string, unknown>;
+
+function recordOf(value: unknown): UnknownRecord {
+  return value != null && typeof value === "object" && !Array.isArray(value)
+    ? value as UnknownRecord
+    : {};
+}
+
+function webSearchResults(output: unknown): WebSearchResult[] {
+  const record = recordOf(output);
+  const candidates = [record.sources, record.searchResults]
+    .flatMap((value) => Array.isArray(value) ? value : []);
+  const seen = new Set<string>();
+  return candidates.flatMap((value) => {
+    const result = recordOf(value);
+    if (typeof result.url !== "string") return [];
+    try {
+      const url = new URL(result.url);
+      if (url.protocol !== "http:" && url.protocol !== "https:") return [];
+      if (seen.has(url.href)) return [];
+      seen.add(url.href);
+      return [{
+        title: typeof result.title === "string" && result.title.trim()
+          ? result.title.trim()
+          : url.hostname,
+        domain: url.hostname,
+      }];
+    } catch {
+      return [];
+    }
+  });
+}
+
+export function WebSearchToolCall({
+  toolCall,
+}: {
+  toolCall: CloudOsToolCall;
+}) {
+  const query = typeof toolCall.input.query === "string" &&
+      toolCall.input.query.trim()
+    ? toolCall.input.query.trim()
+    : "Web search";
+  const results = webSearchResults(toolCall.output);
+  return (
+    <WebSearch
+      query={query}
+      results={results}
+      visibleResults={toolCall.running ? 0 : results.length}
+      searching={toolCall.running}
+      cycle={0}
+    />
+  );
+}

package/cloud-os/composer/cloud-os-chat-input.tsx

@@ -320,7 +320,7 @@ function CloudOsChatInputContent({
 
   return (
     // isolation: isolate 把输入框内部的 z-index 关起来,免得盖到 portal 出去的模型下拉。
-    <div className="cos-chat-input-root relative isolate px-4 py-4">
+    <div className="cos-chat-input-root relative isolate px-4 pb-4">
       <ComposerTriggerPopover
         char="/"
         {...slash}

package/cloud-os/index.ts

@@ -71,6 +71,16 @@ export {
   ToolGroupRow,
   WorkIcon,
 } from "./chat/tool-rows";
+export { ToolCall } from "./chat/tool-call";
+export type { ToolCallProps } from "./chat/tool-call";
+export { CodeRunner } from "./chat/code-runner";
+export type { RunState } from "./chat/code-runner";
+export { ToolTimeline } from "./chat/tool-timeline";
+export type {
+  TimelineStat,
+  TimelineStep,
+  ToolTimelineProps,
+} from "./chat/tool-timeline";
 export {
   ApprovalBlock,
   AskUserBlock,

package/cloud-os/primitives/collapsible.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
+
+function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
+  return (
+    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
+  );
+}
+
+function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
+  return (
+    <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
+  );
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/cloud-os/styles/cloud-os.css

@@ -557,6 +557,24 @@
   flex: none;
 }
 
+/* Trace 新块进入时轻推上浮；已有块更新不会重复播放。 */
+.cos-trace-chain > * {
+  animation: cos-trace-enter 180ms cubic-bezier(0.32, 0.72, 0, 1) both;
+}
+
+@keyframes cos-trace-enter {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cos-trace-chain > * {
+    animation: none;
+  }
+}
+
 /* ── 流式占位:Thinking 扫光 ──────────────────────────────────────────────── */
 .cos-thinking-shimmer {
   color: var(--text-color-kumo-inactive);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@springbrand/message-panel",
-  "version": "0.1.3-alpha.34",
+  "version": "0.1.3-alpha.36",
   "type": "module",
   "files": [
     "src",
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@assistant-ui/react": "^0.15.1",
+    "@base-ui/react": "^1.7.0",
     "@phosphor-icons/react": "^2.1.10",
     "@streamdown/cjk": "^1.0.3",
     "@streamdown/code": "^1.1.1",
@@ -43,6 +44,7 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.3",
     "tailwindcss": "^4.3.2",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^7.0.2",
     "vite": "^8.1.4"
   },