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

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

@@ -431,6 +431,14 @@ 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[] = [];
 
@@ -498,6 +506,7 @@ function assistantBlocks(
     }
 
     const dataKind = dataKindOf(part);
+    if (dataKind === "action_tool_meta") return;
     if (dataKind === "error") {
       const data = dataOf(part);
       flush();
@@ -583,7 +592,13 @@ 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) {
       if (presentation.state === "running") {

package/package.json

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