@springbrand/message-panel 0.1.3-alpha.33 → 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

@@ -27,8 +27,8 @@ export interface CloudOsMessageMetadata extends UnknownRecord {
   createdAt?: number;
   error?: string;
   interruptedByUser?: boolean;
-  turnId?: string;
   turnDurationMs?: number;
+  turnId?: string;
   turnStartedAt?: number;
   turnStatus?: string;
   requestedCapabilities?: unknown;
@@ -78,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,用户点选后
@@ -144,10 +144,9 @@ export type CloudOsEntry =
       type: "assistant";
       key: string;
       messageId: string;
-      turnId?: string;
+      turnId: string;
       blocks: AssistantBlock[];
       copyText: string;
-      durationMs?: number;
       timestamp?: number;
       terminal?: { kind: "interrupted" | "error"; title: string; body?: string };
     };
@@ -171,10 +170,6 @@ function nonNegativeNumber(value: unknown): number | undefined {
     : undefined;
 }
 
-function nonEmptyString(value: unknown): string | undefined {
-  return typeof value === "string" && value.trim() ? value : undefined;
-}
-
 export function cloudOsMetadata(message: UIMessage): CloudOsMessageMetadata {
   return recordOf(message.metadata) as CloudOsMessageMetadata;
 }
@@ -229,54 +224,6 @@ export function formatFullTimestamp(timestamp: number): string {
   });
 }
 
-function turnDuration(metadata: CloudOsMessageMetadata): number | undefined {
-  const explicit = nonNegativeNumber(metadata.turnDurationMs);
-  if (explicit !== undefined) return explicit;
-  const startedAt = nonNegativeNumber(metadata.turnStartedAt);
-  const completedAt = nonNegativeNumber(metadata.completedAt);
-  return startedAt !== undefined && completedAt !== undefined
-    ? Math.max(0, completedAt - startedAt)
-    : undefined;
-}
-
-function isWorkBlock(block: AssistantBlock): boolean {
-  return (
-    block.kind === "reasoning" ||
-    block.kind === "toolGroup" ||
-    block.kind === "plan" ||
-    block.kind === "parallel" ||
-    block.kind === "subagents"
-  );
-}
-
-/**
- * 把一条 assistant 消息拆成可折叠的工作过程与始终可见的最终内容。
- * 最后一段工作之前的 text 是过程旁白；最后一次工作之后的 text 才是正文。
- */
-export function partitionAssistantBlocks(blocks: readonly AssistantBlock[]): {
-  work: AssistantBlock[];
-  content: AssistantBlock[];
-} {
-  let lastWorkIndex = -1;
-  blocks.forEach((block, index) => {
-    if (isWorkBlock(block)) lastWorkIndex = index;
-  });
-
-  const work: AssistantBlock[] = [];
-  const content: AssistantBlock[] = [];
-  blocks.forEach((block, index) => {
-    if (
-      isWorkBlock(block) ||
-      (block.kind === "text" && index < lastWorkIndex)
-    ) {
-      work.push(block);
-    } else {
-      content.push(block);
-    }
-  });
-  return { work, content };
-}
-
 function toolNameOf(part: unknown): string | null {
   const type = String(recordOf(part).type ?? "");
   if (type === "dynamic-tool") {
@@ -471,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;
     }
 
@@ -677,15 +624,13 @@ 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;
     }
     return -1;
   })();
-  const activeTurnId = isActive && lastAssistantIndex >= 0
-    ? nonEmptyString(cloudOsMetadata(messages[lastAssistantIndex]!).turnId)
-    : undefined;
 
   messages.forEach((message, index) => {
     if (message.role === "system") return;
@@ -713,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}`,
@@ -740,10 +688,11 @@ export function buildCloudOsEntries({
       type: "assistant",
       key: `assistant-${message.id}-${index}`,
       messageId: message.id,
-      turnId: nonEmptyString(metadata.turnId),
+      turnId: typeof metadata.turnId === "string" && metadata.turnId
+        ? metadata.turnId
+        : fallbackTurnId,
       blocks,
       copyText: messageText(message),
-      durationMs: turnDuration(metadata),
       timestamp:
         nonNegativeNumber(metadata.completedAt) ??
         nonNegativeNumber(metadata.createdAt),
@@ -751,54 +700,70 @@ export function buildCloudOsEntries({
     });
   });
 
-  return aggregateCompletedTurnWork(
+  return markFinalTextBlocks(mergeConsecutiveAssistantTurns(
     dropSupersededActionPresentations(dropSupersededPlans(entries)),
-    activeTurnId,
-  );
+  ));
 }
 
-/** Collapse every completed Turn's assistant segments into one display entry. */
-function aggregateCompletedTurnWork(
-  entries: CloudOsEntry[],
-  activeTurnId: string | undefined,
-): CloudOsEntry[] {
-  const indexesByTurn = new Map<string, number[]>();
-  entries.forEach((entry, index) => {
-    if (entry.type !== "assistant" || !entry.turnId) return;
-    const indexes = indexesByTurn.get(entry.turnId) ?? [];
-    indexes.push(index);
-    indexesByTurn.set(entry.turnId, indexes);
-  });
+function isFinalOutputBlock(block: AssistantBlock): boolean {
+  return block.kind === "suggestions" ||
+    block.kind === "image" ||
+    block.kind === "file" ||
+    (block.kind === "actionPresentation" && block.presentation.state === "ready");
+}
 
-  const hidden = new Set<number>();
-  const replacements = new Map<number, CloudOsEntry>();
-  for (const [turnId, indexes] of indexesByTurn) {
-    if (turnId === activeTurnId || indexes.length < 2) continue;
-    const assistantEntries = indexes.map(
-      (index) => entries[index] as Extract<CloudOsEntry, { type: "assistant" }>,
-    );
-    const anchorIndex = indexes[indexes.length - 1]!;
-    const anchor = assistantEntries[assistantEntries.length - 1]!;
-    const durations = assistantEntries.flatMap((entry) =>
-      entry.durationMs === undefined ? [] : [entry.durationMs]
-    );
-    const timestamps = assistantEntries.flatMap((entry) =>
-      entry.timestamp === undefined ? [] : [entry.timestamp]
-    );
+function isWorkBoundaryBlock(block: AssistantBlock): boolean {
+  return block.kind !== "text" && !isFinalOutputBlock(block);
+}
 
-    indexes.slice(0, -1).forEach((index) => hidden.add(index));
-    replacements.set(anchorIndex, {
-      ...anchor,
-      key: `assistant-turn-${turnId}`,
-      blocks: assistantEntries.flatMap((entry) => entry.blocks),
-      ...(durations.length > 0 ? { durationMs: Math.max(...durations) } : {}),
-      ...(timestamps.length > 0 ? { timestamp: Math.max(...timestamps) } : {}),
-    });
-  }
+function markFinalTextBlocks(entries: CloudOsEntry[]): CloudOsEntry[] {
+  return entries.map((entry) => {
+    if (entry.type !== "assistant") return entry;
 
-  return entries.flatMap((entry, index) =>
-    hidden.has(index) ? [] : [replacements.get(index) ?? 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[] {
@@ -848,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,
@@ -983,6 +948,8 @@ export function deriveTurnActivity(
   options: {
     isActive: boolean;
     isRecovering?: boolean;
+    recoveryAttempt?: number;
+    recoveryMax?: number;
     recoveryStatusLabel?: string;
     awaitingApproval?: boolean;
     hasPendingSteer?: boolean;
@@ -991,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

@@ -68,13 +68,19 @@ export type {
 export {
   ThinkingTraceRow,
   ToolCallDetails,
-  ToolGroupDetails,
   ToolGroupRow,
-  WorkDescriptionRow,
   WorkIcon,
-  WorkTraceDisclosure,
-  formatWorkDuration,
 } 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,
@@ -98,7 +104,6 @@ export {
   formatClockTime,
   formatFullTimestamp,
   messageText,
-  partitionAssistantBlocks,
   requestedCapabilitiesOf,
   rhythmTopClass,
 } from "./chat/transcript-model";

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 };