@springbrand/message-panel 0.3.0-alpha.6 → 0.3.0-alpha.9

package/cloud-os/chat/cloud-os-chat-messages.tsx

@@ -237,6 +237,7 @@ function UserBubble({
 
 function ActionPresentationBlock({
   presentation,
+  compact = false,
   failureCount = 1,
   partial = false,
   renderFile,
@@ -245,6 +246,7 @@ function ActionPresentationBlock({
   onOpenArtifact,
 }: {
   presentation: CloudOsActionPresentation;
+  compact?: boolean;
   failureCount?: number;
   partial?: boolean;
   renderFile?: FileRenderer;
@@ -254,16 +256,41 @@ function ActionPresentationBlock({
 }) {
   const { state } = presentation;
   if (state === "ready") {
+    const hasFileContent = presentation.content.length > 0;
+    const statusLabel = hasFileContent
+      ? presentation.capabilityName || "Completed"
+      : presentation.toolBrief || "Completed";
+    const hasStatusMetadata = hasFileContent
+      ? Boolean(presentation.capabilityName || presentation.iconUrl)
+      : Boolean(presentation.toolBrief || presentation.iconUrl);
+    const status = (
+      <span
+        className="flex shrink-0 items-center gap-2 text-[14px] leading-5 text-kumo-subtle"
+        data-action-status=""
+      >
+        {presentation.iconUrl && (
+          <img
+            src={presentation.iconUrl}
+            alt=""
+            aria-hidden="true"
+            className="size-4 rounded-sm object-contain"
+            data-action-icon=""
+          />
+        )}
+        <span>{statusLabel}</span>
+      </span>
+    );
     return (
       <div
         data-action-presentation={state}
         role="status"
-        aria-label="Completed"
-        className="space-y-2"
+        aria-label={statusLabel}
+        className={compact
+          ? "inline-flex items-center rounded-full border border-kumo-line bg-kumo-elevated px-3 py-1.5"
+          : "space-y-2"}
       >
-        {presentation.content.length === 0
-          ? <p className="m-0 text-[14px] leading-5 text-kumo-subtle">Completed</p>
-          : presentation.content.map((file, index) => {
+        {presentation.content.length === 0 && status}
+        {presentation.content.map((file, index) => {
             const url = resolveUrl?.(file.url) ?? file.url;
             const artifactId = resolveArtifactId?.(url);
             return (
@@ -276,6 +303,7 @@ function ActionPresentationBlock({
                   },
                   placement: "assistant-message",
                   variant: "product",
+                  leadingMeta: hasStatusMetadata ? status : undefined,
                   onOpen: file.mediaType?.startsWith("image/") && artifactId && onOpenArtifact
                     ? () => onOpenArtifact(artifactId)
                     : undefined,
@@ -897,10 +925,40 @@ export function CloudOsChatMessages({
 
                 {actionResultBlocks.length > 0 && (
                   <div data-action-results="" className="space-y-4">
+                    {actionResultBlocks.filter((block) =>
+                      block.presentation.state === "ready" &&
+                      block.presentation.content.length === 0,
+                    ).length > 0 && (
+                      <div data-action-empty-results="" className="flex flex-wrap gap-2">
+                        {actionResultBlocks.map((block) => {
+                          if (
+                            block.presentation.state !== "ready" ||
+                            block.presentation.content.length !== 0 ||
+                            (block.presentation.failureCode === "insufficient_credits" &&
+                              block !== firstInsufficientFailure)
+                          ) return null;
+                          return (
+                            <ActionPresentationBlock
+                              key={block.key}
+                              presentation={block.presentation}
+                              compact
+                              failureCount={insufficientFailures.length}
+                              partial={hasCompletedAction}
+                              renderFile={renderFile}
+                              resolveUrl={resolveUrl}
+                              resolveArtifactId={resolveArtifactId}
+                              onOpenArtifact={onOpenArtifact}
+                            />
+                          );
+                        })}
+                      </div>
+                    )}
                     {actionResultBlocks.map((block) => {
                       if (
                         block.presentation.failureCode === "insufficient_credits" &&
-                        block !== firstInsufficientFailure
+                        block !== firstInsufficientFailure ||
+                        (block.presentation.state === "ready" &&
+                          block.presentation.content.length === 0)
                       ) return null;
                       return (
                         <ActionPresentationBlock

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

@@ -21,6 +21,7 @@ export interface ToolCallProps {
   query: string;
   result: string;
   running: boolean;
+  iconUrl?: string;
   open: boolean;
   onOpenChange: (open: boolean) => void;
   className?: string;
@@ -33,6 +34,7 @@ export function ToolCall({
   query,
   result,
   running,
+  iconUrl,
   open,
   onOpenChange,
   className,
@@ -47,6 +49,15 @@ export function ToolCall({
     >
       <CollapsibleTrigger className="group/trigger text-foreground/55 hover:text-foreground/90 flex items-center gap-2 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" />
+        {iconUrl && (
+          <img
+            src={iconUrl}
+            alt=""
+            aria-hidden="true"
+            className="size-4 shrink-0 rounded-sm object-contain"
+            data-tool-icon=""
+          />
+        )}
         <SwapLabel active={running ? 0 : 1} className="text-start">
           <ShimmerLabel
             active={running}

package/cloud-os/chat/tool-presentation.ts

@@ -64,6 +64,9 @@ export interface CloudOsToolCall {
   input: UnknownRecord;
   output: unknown;
   outputText: string;
+  capabilityName?: string;
+  toolBrief?: string;
+  iconUrl?: string;
   errorText: string;
   /** UIMessage 的 part.state 原值。 */
   state: string;
@@ -77,6 +80,7 @@ export interface CloudOsToolCall {
 export interface ToolCallGroup {
   key: string;
   Icon: PhosphorIcon;
+  iconUrl?: string;
   label: string;
   detailLines: string[];
   calls: CloudOsToolCall[];
@@ -380,6 +384,12 @@ export function getToolCallSummary(call: CloudOsToolCall): {
       break;
   }
   const displayName = humanizeToolName(toolName);
+  if (call.capabilityName) {
+    const capabilityLabel = [call.capabilityName, call.toolBrief]
+      .filter(Boolean)
+      .join(" · ");
+    return { verb: running ? `Using ${capabilityLabel}` : `Used ${capabilityLabel}` };
+  }
   return { verb: running ? `Using ${displayName}` : `Used ${displayName}` };
 }
 
@@ -448,10 +458,12 @@ export function toCloudOsToolCall(
   part: unknown,
   fallbackId: string,
   isActive: boolean,
+  liveMetadata?: Record<string, unknown>,
 ): CloudOsToolCall {
   const record = recordOf(part);
   const toolName = toolNameOfPart(part) ?? stringField(record, "name") ?? "tool";
   const data = recordOf(record.data);
+  const liveMeta = recordOf(liveMetadata);
   const input =
     record.input != null
       ? recordOf(record.input)
@@ -459,6 +471,18 @@ export function toCloudOsToolCall(
         ? recordOf(data.input)
         : data;
   const output = record.output ?? data.output ?? record.result;
+  const outputRecord = recordOf(output);
+  const presentation = recordOf(outputRecord.presentation);
+  const toolMeta = recordOf(outputRecord.toolMeta);
+  const capabilityName =
+    stringField(presentation, "capabilityName") || stringField(toolMeta, "capabilityName") ||
+    stringField(liveMeta, "capabilityName") || undefined;
+  const toolBrief =
+    stringField(presentation, "toolBrief") || stringField(toolMeta, "toolBrief") ||
+    stringField(liveMeta, "toolBrief") || undefined;
+  const iconUrl =
+    stringField(presentation, "iconUrl") || stringField(toolMeta, "iconUrl") ||
+    stringField(liveMeta, "iconUrl") || undefined;
   const errorText = stringField(record, "errorText", "error");
   const state = stringField(record, "state", "status");
   const failed =
@@ -475,9 +499,12 @@ export function toCloudOsToolCall(
     input,
     output,
     outputText: normalizeOutputText(output),
+    capabilityName,
+    toolBrief,
+    iconUrl,
     errorText,
     state,
-    running: isActive && !failed && RUNNING_STATES.has(state),
+    running: isActive && !failed && (RUNNING_STATES.has(state) || record.preliminary === true),
     failed,
     awaitingApproval,
     raw: part,
@@ -608,10 +635,16 @@ export function buildToolCallGroups(calls: CloudOsToolCall[]): ToolCallGroup[] {
     labelParts.push(`${summary.verb}${summary.target ? ` ${summary.target}` : ""}`);
   } else if (distinctKinds.length === 1) {
     const summary = getToolCallSummary(calls[0]);
+    const sameCapability = calls.every(
+      (call) => call.capabilityName === calls[0].capabilityName &&
+        call.toolBrief === calls[0].toolBrief,
+    );
     labelParts.push(
-      detailLines.length === 1 && summary.target
-        ? `${summary.verb} ${summary.target}`
-        : describeToolCallCount(calls[0].kind, calls[0].toolName, calls.length),
+      sameCapability && calls[0].capabilityName
+        ? `${summary.verb} ${formatTimes(calls.length)}`
+        : detailLines.length === 1 && summary.target
+          ? `${summary.verb} ${summary.target}`
+          : describeToolCallCount(calls[0].kind, calls[0].toolName, calls.length),
     );
   } else if (distinctKinds.length <= 3) {
     labelParts.push(
@@ -629,6 +662,7 @@ export function buildToolCallGroups(calls: CloudOsToolCall[]): ToolCallGroup[] {
       // 用第一条 work item 的 id 作 key:展开态在「流式 → 已落库」之间要活下来。
       key: `group-${calls[0].toolCallId}`,
       Icon: getToolIcon(calls[0].kind),
+      iconUrl: calls.find((call) => call.iconUrl)?.iconUrl,
       label: labelParts
         .map((part, index) => (index === 0 ? part : lowerFirst(part)))
         .join(", "),

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

@@ -54,6 +54,7 @@ function toolCallView(tc: CloudOsToolCall) {
   return {
     label: settled.verb,
     activeLabel: active.verb,
+    iconUrl: tc.iconUrl,
     query: settled.target ?? "",
     result:
       tc.errorText ||
@@ -246,6 +247,7 @@ export const ToolGroupRow = memo(function ToolGroupRow({
       restingLabel={group.label}
       activeLabel={`Working for ${elapsed}s`}
       stats={[]}
+      iconUrl={group.iconUrl}
       className="max-w-none"
     >
       {group.calls.map((toolCall) => {

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

@@ -32,6 +32,7 @@ export interface ToolTimelineProps {
   restingLabel: string;
   activeLabel: string;
   stats: TimelineStat[];
+  iconUrl?: string;
   className?: string;
   children?: ReactNode;
 }
@@ -45,6 +46,7 @@ export function ToolTimeline({
   restingLabel,
   activeLabel,
   stats,
+  iconUrl,
   className,
   children,
 }: ToolTimelineProps) {
@@ -57,6 +59,15 @@ export function ToolTimeline({
     >
       <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" />
+        {iconUrl && (
+          <img
+            src={iconUrl}
+            alt=""
+            aria-hidden="true"
+            className="size-4 shrink-0 rounded-sm object-contain"
+            data-tool-icon=""
+          />
+        )}
         <SwapLabel
           active={streaming ? 0 : 1}
           className="text-start tabular-nums"

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

@@ -62,6 +62,9 @@ export interface CloudOsActionPresentation {
   executionId: string;
   state: "running" | "ready" | "failed" | "outcome_unknown";
   failureCode?: "insufficient_credits";
+  capabilityName?: string;
+  toolBrief?: string;
+  iconUrl?: string;
   produces?: CloudOsActionProduces;
   content: CloudOsActionPresentationFile[];
 }
@@ -338,6 +341,23 @@ function actionPresentationOf(value: unknown): CloudOsActionPresentation | null
   }
   if (state !== "ready" && content.length > 0) return null;
 
+  const toolBrief = typeof presentation.toolBrief === "string" && presentation.toolBrief.trim()
+    ? presentation.toolBrief.trim()
+    : undefined;
+  const capabilityName = typeof presentation.capabilityName === "string" && presentation.capabilityName.trim()
+    ? presentation.capabilityName.trim()
+    : undefined;
+  let iconUrl: string | undefined;
+  if (presentation.iconUrl !== undefined) {
+    if (typeof presentation.iconUrl !== "string" || !presentation.iconUrl.trim()) return null;
+    try {
+      if (new URL(presentation.iconUrl).protocol !== "https:") return null;
+    } catch {
+      return null;
+    }
+    iconUrl = presentation.iconUrl;
+  }
+
   return {
     type: "action-execution",
     executionId: presentation.executionId,
@@ -345,6 +365,9 @@ function actionPresentationOf(value: unknown): CloudOsActionPresentation | null
     ...(state === "failed" && presentation.failureCode === "insufficient_credits"
       ? { failureCode: presentation.failureCode }
       : {}),
+    ...(capabilityName ? { capabilityName } : {}),
+    ...(toolBrief ? { toolBrief } : {}),
+    ...(iconUrl ? { iconUrl } : {}),
     ...(produces ? { produces } : {}),
     content,
   };
@@ -408,9 +431,26 @@ function assistantBlocks(
   approvalIdOf: (part: unknown) => string | undefined,
 ): AssistantBlock[] {
   const blocks: AssistantBlock[] = [];
+  const actionToolMetaByCallId = new Map<string, UnknownRecord>();
+  for (const part of message.parts) {
+    if (dataKindOf(part) !== "action_tool_meta") continue;
+    const record = recordOf(part);
+    const data = dataOf(part);
+    const toolCallId = String(data.toolCallId ?? record.id ?? "");
+    if (toolCallId) actionToolMetaByCallId.set(toolCallId, data);
+  }
   let pendingCalls: CloudOsToolCall[] = [];
+  let pendingActionCalls: CloudOsToolCall[] = [];
 
-  const flush = () => {
+  const flushActionCalls = () => {
+    if (pendingActionCalls.length === 0) return;
+    for (const group of buildToolCallGroups(pendingActionCalls)) {
+      blocks.push({ kind: "toolGroup", key: group.key, group });
+    }
+    pendingActionCalls = [];
+  };
+
+  const flushRegularCalls = () => {
     if (pendingCalls.length === 0) return;
     for (const group of buildToolCallGroups(pendingCalls)) {
       blocks.push({ kind: "toolGroup", key: group.key, group });
@@ -418,6 +458,11 @@ function assistantBlocks(
     pendingCalls = [];
   };
 
+  const flush = () => {
+    flushActionCalls();
+    flushRegularCalls();
+  };
+
   message.parts.forEach((part, partIndex) => {
     const key = `${message.id}:${partIndex}`;
     const record = recordOf(part);
@@ -461,6 +506,7 @@ function assistantBlocks(
     }
 
     const dataKind = dataKindOf(part);
+    if (dataKind === "action_tool_meta") return;
     if (dataKind === "error") {
       const data = dataOf(part);
       flush();
@@ -546,11 +592,23 @@ function assistantBlocks(
     const toolName = toolNameOf(part);
     if (toolName === null) return;
 
-    const call = toCloudOsToolCall(part, key, isActive);
+    const toolCallId = String(record.toolCallId ?? record.id ?? "");
+    const call = toCloudOsToolCall(
+      part,
+      key,
+      isActive,
+      actionToolMetaByCallId.get(toolCallId),
+    );
     const presentation = actionPresentationOf(call.output);
     if (presentation) {
-      pendingCalls.push(call);
-      flush();
+      if (presentation.state === "running") {
+        flushActionCalls();
+        pendingCalls.push(call);
+        flush();
+      } else {
+        flushRegularCalls();
+        pendingActionCalls.push(call);
+      }
       blocks.push({ kind: "actionPresentation", key, presentation });
       return;
     }
@@ -600,6 +658,7 @@ function assistantBlocks(
       return;
     }
 
+    flushActionCalls();
     pendingCalls.push(call);
   });
 
@@ -830,11 +889,19 @@ function dropSupersededActionPresentations(entries: CloudOsEntry[]): CloudOsEntr
         return;
       }
       if (block.presentation.state !== "running") {
-        current.presentation = block.presentation;
+        current.presentation = {
+          ...block.presentation,
+          capabilityName: block.presentation.capabilityName ?? current.presentation.capabilityName,
+          toolBrief: block.presentation.toolBrief ?? current.presentation.toolBrief,
+          iconUrl: block.presentation.iconUrl ?? current.presentation.iconUrl,
+        };
       } else if (current.presentation.state === "running") {
         current.presentation = {
           ...block.presentation,
           produces: block.presentation.produces ?? current.presentation.produces,
+          capabilityName: block.presentation.capabilityName ?? current.presentation.capabilityName,
+          toolBrief: block.presentation.toolBrief ?? current.presentation.toolBrief,
+          iconUrl: block.presentation.iconUrl ?? current.presentation.iconUrl,
         };
       }
     });

package/cloud-os/file-view.tsx

@@ -61,6 +61,7 @@ export interface FileViewProps {
   file: FileViewFile;
   placement: FileViewPlacement;
   variant?: FileViewVariant;
+  leadingMeta?: ReactNode;
   status?: FileViewStatus;
   progress?: number;
   onOpen?: () => void;
@@ -172,11 +173,13 @@ function ProductFileView({
   file,
   label,
   placement,
+  leadingMeta,
   onOpen,
 }: {
   file: FileViewFile;
   label: string;
   placement: Exclude<FileViewPlacement, "composer">;
+  leadingMeta?: ReactNode;
   onOpen?: () => void;
 }) {
   const type = productTypeForMediaType(file.mediaType);
@@ -225,6 +228,8 @@ function ProductFileView({
     <span className="flex w-fit max-w-full flex-col gap-2.5" data-product-file-view={type}>
       {preview}
       <span className="flex min-w-0 max-w-full items-center gap-1 text-xs text-kumo-inactive">
+        {leadingMeta}
+        {leadingMeta && <span aria-hidden="true">·</span>}
         <span className="capitalize text-kumo-subtle">{type}</span>
         <span aria-hidden="true">·</span>
         <span className="min-w-0 truncate">{label}</span>
@@ -306,6 +311,7 @@ export function FileView({
   file,
   placement,
   variant = "compact",
+  leadingMeta,
   status = "ready",
   progress = 0,
   onOpen,
@@ -413,6 +419,7 @@ export function FileView({
         file={file}
         label={label}
         placement={placement}
+        leadingMeta={leadingMeta}
         onOpen={onOpen}
       />
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@springbrand/message-panel",
-  "version": "0.3.0-alpha.6",
+  "version": "0.3.0-alpha.9",
   "type": "module",
   "files": [
     "src",

package/springbrand-pet/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -1 +1 @@
-{"version":"4.1.10","results":[[":bot/cycles.test.ts",{"duration":55.58770800000002,"failed":false}],[":bot/skins.test.ts",{"duration":3032.4465840000003,"failed":false}],[":bot/engine.test.ts",{"duration":100.501834,"failed":false}],[":bot/shape.test.ts",{"duration":16.04204200000001,"failed":false}],[":bot/expressions.test.ts",{"duration":8.212458999999996,"failed":false}],[":bot/face.test.ts",{"duration":3.6211250000000064,"failed":false}],[":drag.test.ts",{"duration":1.7712499999999807,"failed":false}],[":animation.test.ts",{"duration":2.3806249999999807,"failed":false}]]}
+{"version":"4.1.10","results":[[":bot/cycles.test.ts",{"duration":54.568250000000006,"failed":false}],[":bot/skins.test.ts",{"duration":2830.836917,"failed":false}],[":bot/engine.test.ts",{"duration":80.72770900000003,"failed":false}],[":bot/shape.test.ts",{"duration":10.531834000000003,"failed":false}],[":bot/expressions.test.ts",{"duration":8.110375000000005,"failed":false}],[":bot/face.test.ts",{"duration":2.7700000000000102,"failed":false}],[":drag.test.ts",{"duration":1.9160829999999862,"failed":false}],[":animation.test.ts",{"duration":2.0596669999999904,"failed":false}]]}