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

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/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,
   };
@@ -409,8 +432,17 @@ function assistantBlocks(
 ): AssistantBlock[] {
   const blocks: AssistantBlock[] = [];
   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 +450,11 @@ function assistantBlocks(
     pendingCalls = [];
   };
 
+  const flush = () => {
+    flushActionCalls();
+    flushRegularCalls();
+  };
+
   message.parts.forEach((part, partIndex) => {
     const key = `${message.id}:${partIndex}`;
     const record = recordOf(part);
@@ -549,8 +586,14 @@ function assistantBlocks(
     const call = toCloudOsToolCall(part, key, isActive);
     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 +643,7 @@ function assistantBlocks(
       return;
     }
 
+    flushActionCalls();
     pendingCalls.push(call);
   });
 
@@ -745,6 +789,25 @@ function markFinalTextBlocks(entries: CloudOsEntry[]): CloudOsEntry[] {
   return entries.map((entry) => {
     if (entry.type !== "assistant") return entry;
 
+    // suggest_followups is the UI boundary: narration before it is work,
+    // while text after it is the one final answer.
+    const followupsBoundary = entry.blocks.findLastIndex(
+      (block) => block.kind === "suggestions",
+    );
+    if (
+      followupsBoundary !== -1 &&
+      entry.blocks.slice(followupsBoundary + 1).some((block) => block.kind === "text")
+    ) {
+      return {
+        ...entry,
+        blocks: entry.blocks.map((block, index) =>
+          block.kind === "text"
+            ? { ...block, final: index > followupsBoundary }
+            : block,
+        ),
+      };
+    }
+
     const finalOutputBoundary = entry.blocks.findLastIndex(isFinalOutputBlock);
     // Provider cleanup after final output must not pull the answer back into Work.
     const searchBefore = finalOutputBoundary === -1
@@ -811,11 +874,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.5",
+  "version": "0.3.0-alpha.8",
   "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}]]}