@springbrand/message-panel 0.1.3-alpha.8 → 0.2.0-alpha.37

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,13 +28,14 @@ export interface CloudOsMessageMetadata extends UnknownRecord {
   error?: string;
   interruptedByUser?: boolean;
   turnDurationMs?: number;
+  turnId?: string;
   turnStartedAt?: number;
   turnStatus?: string;
   requestedCapabilities?: unknown;
 }
 
 export interface CloudOsRequestedCapability {
-  kind: "skill" | "plan";
+  kind: "skill" | "tool" | "plan";
   name: string;
   label: string;
 }
@@ -45,14 +46,39 @@ export interface CloudOsAttachment {
   mediaType?: string;
 }
 
+interface CloudOsActionPresentationFile {
+  type: "file";
+  url: string;
+  mediaType?: string;
+}
+
+interface CloudOsActionProduces {
+  type: "image" | "audio" | "video" | "document" | "archive" | "data" | "other";
+  mediaType?: string;
+}
+
+export interface CloudOsActionPresentation {
+  type: "action-execution";
+  executionId: string;
+  state: "running" | "ready" | "failed" | "outcome_unknown";
+  failureCode?: "insufficient_credits";
+  produces?: CloudOsActionProduces;
+  content: CloudOsActionPresentationFile[];
+}
+
 export interface PlanStep {
   text: string;
   status: "pending" | "in_progress" | "done";
 }
 
 export type AssistantBlock =
-  | { kind: "reasoning"; key: string; text: string }
-  | { kind: "text"; key: string; text: string }
+  | {
+      kind: "reasoning";
+      key: string;
+      text: string;
+      running: boolean;
+    }
+  | { 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,用户点选后
@@ -74,6 +100,11 @@ export type AssistantBlock =
       mediaType?: string;
     }
   | { kind: "file"; key: string; file: CloudOsAttachment }
+  | {
+      kind: "actionPresentation";
+      key: string;
+      presentation: CloudOsActionPresentation;
+    }
   | { kind: "error"; key: string; title: string; body?: string };
 
 export interface ParallelTool {
@@ -113,6 +144,7 @@ export type CloudOsEntry =
       type: "assistant";
       key: string;
       messageId: string;
+      turnId: string;
       blocks: AssistantBlock[];
       copyText: string;
       timestamp?: number;
@@ -150,7 +182,7 @@ export function requestedCapabilitiesOf(
   return metadata.requestedCapabilities.flatMap((value) => {
     const capability = recordOf(value);
     if (
-      (capability.kind !== "skill" && capability.kind !== "plan") ||
+      (capability.kind !== "skill" && capability.kind !== "tool" && capability.kind !== "plan") ||
       typeof capability.name !== "string" ||
       !capability.name.trim() ||
       typeof capability.label !== "string" ||
@@ -239,6 +271,74 @@ function normalizeStatus(value: unknown): ParallelTool["status"] {
   return "pending";
 }
 
+function actionPresentationOf(value: unknown): CloudOsActionPresentation | null {
+  const presentation = recordOf(recordOf(value).presentation);
+  const state = presentation.state;
+  if (
+    presentation.type !== "action-execution" ||
+    typeof presentation.executionId !== "string" ||
+    !/^[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(
+      presentation.executionId,
+    ) ||
+    (state !== "running" &&
+      state !== "ready" &&
+      state !== "failed" &&
+      state !== "outcome_unknown") ||
+    !Array.isArray(presentation.content)
+  ) return null;
+
+  let produces: CloudOsActionProduces | undefined;
+  if (presentation.produces !== undefined) {
+    const hint = recordOf(presentation.produces);
+    if (
+      !["image", "audio", "video", "document", "archive", "data", "other"].includes(
+        String(hint.type),
+      ) ||
+      (hint.mediaType !== undefined &&
+        (typeof hint.mediaType !== "string" || !/^[^\s/]+\/[^\s/]+$/.test(hint.mediaType)))
+    ) return null;
+    produces = {
+      type: hint.type as CloudOsActionProduces["type"],
+      ...(hint.mediaType === undefined ? {} : { mediaType: hint.mediaType as string }),
+    };
+  }
+  if (state !== "running" && produces) return null;
+
+  const content: CloudOsActionPresentationFile[] = [];
+  for (const value of presentation.content) {
+    const file = recordOf(value);
+    if (file.type !== "file" || typeof file.url !== "string") return null;
+    try {
+      if (new URL(file.url).protocol !== "https:") return null;
+    } catch {
+      return null;
+    }
+    if (
+      file.mediaType !== undefined &&
+      (typeof file.mediaType !== "string" || !file.mediaType.trim())
+    ) return null;
+    content.push({
+      type: "file" as const,
+      url: file.url,
+      ...(file.mediaType !== undefined
+        ? { mediaType: file.mediaType }
+        : {}),
+    });
+  }
+  if (state !== "ready" && content.length > 0) return null;
+
+  return {
+    type: "action-execution",
+    executionId: presentation.executionId,
+    state,
+    ...(state === "failed" && presentation.failureCode === "insufficient_credits"
+      ? { failureCode: presentation.failureCode }
+      : {}),
+    ...(produces ? { produces } : {}),
+    content,
+  };
+}
+
 // ── 独立消息(非 assistant 回合)判定 ────────────────────────────────────────
 
 function standaloneEntry(
@@ -318,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;
     }
 
@@ -326,7 +426,12 @@ function assistantBlocks(
       const text = String(record.text ?? "").trim();
       if (!text || !showThinkingTraces) return;
       flush();
-      blocks.push({ kind: "reasoning", key, text });
+      blocks.push({
+        kind: "reasoning",
+        key,
+        text,
+        running: record.state === "streaming",
+      });
       return;
     }
 
@@ -417,6 +522,13 @@ function assistantBlocks(
     if (toolName === null) return;
 
     const call = toCloudOsToolCall(part, key, isActive);
+    const presentation = actionPresentationOf(call.output);
+    if (presentation) {
+      pendingCalls.push(call);
+      flush();
+      blocks.push({ kind: "actionPresentation", key, presentation });
+      return;
+    }
 
     if (call.awaitingApproval) {
       const approvalId = approvalIdOf(part);
@@ -437,6 +549,7 @@ function assistantBlocks(
     }
 
     if (call.kind === "ask-user") {
+      if (call.failed) return;
       flush();
       blocks.push({
         kind: "askUser",
@@ -470,6 +583,8 @@ function assistantBlocks(
 }
 
 const USER_STOP_REASON = "Stopped by user";
+const REQUEST_UNAVAILABLE_ERROR =
+  "We’re unable to complete your request right now. Please try again in a few moments.";
 
 function terminalOf(
   message: UIMessage,
@@ -484,7 +599,9 @@ function terminalOf(
   if (metadata.turnStatus === "error" || metadata.error) {
     return {
       kind: "error",
-      title: "Error",
+      title: metadata.error === REQUEST_UNAVAILABLE_ERROR
+        ? "Unable to complete your request"
+        : "Error",
       body: metadata.error ?? "The response failed.",
     };
   }
@@ -507,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;
@@ -540,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}`,
@@ -567,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:
@@ -576,35 +700,144 @@ export function buildCloudOsEntries({
     });
   });
 
-  return 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[] {
+  const snapshots = new Map<string, {
+    entryIndex: number;
+    blockIndex: number;
+    presentation: CloudOsActionPresentation;
+  }>();
+  entries.forEach((entry, entryIndex) => {
+    if (entry.type !== "assistant") return;
+    entry.blocks.forEach((block, blockIndex) => {
+      if (block.kind !== "actionPresentation") return;
+      const current = snapshots.get(block.presentation.executionId);
+      if (!current) {
+        snapshots.set(block.presentation.executionId, {
+          entryIndex,
+          blockIndex,
+          presentation: block.presentation,
+        });
+        return;
+      }
+      if (block.presentation.state !== "running") {
+        current.presentation = block.presentation;
+      } else if (current.presentation.state === "running") {
+        current.presentation = {
+          ...block.presentation,
+          produces: block.presentation.produces ?? current.presentation.produces,
+        };
+      }
+    });
+  });
+
+  return entries.map((entry, entryIndex) =>
+    entry.type !== "assistant"
+      ? entry
+      : {
+          ...entry,
+          blocks: entry.blocks.flatMap<AssistantBlock>((block, blockIndex) => {
+            if (block.kind !== "actionPresentation") return [block];
+            const snapshot = snapshots.get(block.presentation.executionId)!;
+            return snapshot.entryIndex === entryIndex && snapshot.blockIndex === blockIndex
+              ? [{ ...block, presentation: snapshot.presentation }]
+              : [];
+          }),
+        }
+  );
 }
 
 /**
- * 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,
@@ -715,6 +948,8 @@ export function deriveTurnActivity(
   options: {
     isActive: boolean;
     isRecovering?: boolean;
+    recoveryAttempt?: number;
+    recoveryMax?: number;
     recoveryStatusLabel?: string;
     awaitingApproval?: boolean;
     hasPendingSteer?: boolean;
@@ -723,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}
+    />
+  );
+}