@springbrand/message-panel 0.1.3-alpha.28 → 0.1.3-alpha.30

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

@@ -20,6 +20,7 @@ import { Tooltip } from "../primitives/tooltip";
 import { WorkshopIconButton } from "../primitives/workshop-controls";
 import {
   MarkdownMessage,
+  type CloudOsArtifactResolver,
   type CloudOsUrlResolver,
 } from "./markdown-message";
 import {
@@ -92,6 +93,10 @@ export interface CloudOsChatMessagesProps {
   renderFile?: FileRenderer;
   /** 把消息里的 `sandbox:/workspace/...` 之类地址翻译成可访问 URL。 */
   resolveUrl?: CloudOsUrlResolver;
+  /** 把图片 URL 关联到宿主的持久产物。 */
+  resolveArtifactId?: CloudOsArtifactResolver;
+  /** 打开宿主拥有的产物视图。 */
+  onOpenArtifact?: (artifactId: string) => void;
   /** 消息区宽度是否收敛到 920px 居中(GadgetEditor 里叫 constrainChatWidth)。 */
   constrainWidth?: boolean;
   emptyTitle?: string;
@@ -148,12 +153,16 @@ function UserBubble({
   copied,
   renderFile,
   resolveUrl,
+  resolveArtifactId,
+  onOpenArtifact,
 }: {
   entry: Extract<CloudOsEntry, { type: "user" }>;
   onCopy: (text: string) => void;
   copied: boolean;
   renderFile?: FileRenderer;
   resolveUrl?: CloudOsUrlResolver;
+  resolveArtifactId?: CloudOsArtifactResolver;
+  onOpenArtifact?: (artifactId: string) => void;
 }) {
   return (
     <div className="group/message relative flex flex-col items-end">
@@ -193,7 +202,12 @@ function UserBubble({
       )}
       {entry.text && (
         <div className="themed-user-bubble-shadow cos-markdown cos-user-markdown w-fit max-w-[min(680px,78%)] rounded-[12px] border border-transparent bg-kumo-bubble-user px-4 py-2.5 text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-default">
-          <MarkdownMessage message={entry.text} resolveUrl={resolveUrl} />
+          <MarkdownMessage
+            message={entry.text}
+            resolveUrl={resolveUrl}
+            resolveArtifactId={resolveArtifactId}
+            onOpenArtifact={onOpenArtifact}
+          />
         </div>
       )}
       <div className="mt-0.5 flex items-center justify-end gap-2 pr-1 text-[11px] leading-4 text-kumo-inactive opacity-0 transition-opacity duration-150 ease-out group-hover/message:opacity-100 group-focus-within/message:opacity-100">
@@ -222,12 +236,20 @@ function UserBubble({
 
 function ActionPresentationBlock({
   presentation,
+  failureCount = 1,
+  partial = false,
   renderFile,
   resolveUrl,
+  resolveArtifactId,
+  onOpenArtifact,
 }: {
   presentation: CloudOsActionPresentation;
+  failureCount?: number;
+  partial?: boolean;
   renderFile?: FileRenderer;
   resolveUrl?: CloudOsUrlResolver;
+  resolveArtifactId?: CloudOsArtifactResolver;
+  onOpenArtifact?: (artifactId: string) => void;
 }) {
   const { state } = presentation;
   if (state === "ready") {
@@ -240,19 +262,26 @@ function ActionPresentationBlock({
       >
         {presentation.content.length === 0
           ? <p className="m-0 text-[14px] leading-5 text-kumo-subtle">Completed</p>
-          : presentation.content.map((file, index) => (
-            <Fragment key={`${file.url}:${index}`}>
-              {renderFileView(renderFile, {
-                file: {
-                  ...file,
-                  filename: "Generated file",
-                  url: resolveUrl?.(file.url) ?? file.url,
-                },
-                placement: "assistant-message",
-                variant: "product",
-              })}
-            </Fragment>
-          ))}
+          : presentation.content.map((file, index) => {
+            const url = resolveUrl?.(file.url) ?? file.url;
+            const artifactId = resolveArtifactId?.(url);
+            return (
+              <Fragment key={`${file.url}:${index}`}>
+                {renderFileView(renderFile, {
+                  file: {
+                    ...file,
+                    filename: "Generated file",
+                    url,
+                  },
+                  placement: "assistant-message",
+                  variant: "product",
+                  onOpen: file.mediaType?.startsWith("image/") && artifactId && onOpenArtifact
+                    ? () => onOpenArtifact(artifactId)
+                    : undefined,
+                })}
+              </Fragment>
+            );
+          })}
       </div>
     );
   }
@@ -260,13 +289,17 @@ function ActionPresentationBlock({
   const product = presentation.produces;
   const productName = product?.type ?? "other";
   const isFileProduct = productName !== "data" && productName !== "other";
+  const insufficientCredits = state === "failed" &&
+    presentation.failureCode === "insufficient_credits";
   const body = state === "running"
     ? isFileProduct
       ? `Generating ${productName}${product?.mediaType ? ` (${product.mediaType})` : ""}`
       : "Generating"
     : state === "outcome_unknown"
       ? "The provider may have completed this action. Check the status before trying again."
-      : undefined;
+      : insufficientCredits
+        ? `${failureCount} API call${failureCount === 1 ? " was" : "s were"} not started because there weren't enough Credits.`
+        : undefined;
   if (state === "running") {
     return (
       <div
@@ -289,7 +322,9 @@ function ActionPresentationBlock({
     >
       <span>
         <strong className="block font-medium text-kumo-default">
-          {state === "failed" ? "Generation failed" : "Status unavailable"}
+          {insufficientCredits
+            ? partial ? "Partially completed" : "Not completed"
+            : state === "failed" ? "Action failed" : "Status unavailable"}
         </strong>
         {body && <span className="block text-kumo-subtle">{body}</span>}
       </span>
@@ -313,6 +348,7 @@ export function CloudOsChatMessages({
   renderApproval,
   renderFile,
   resolveUrl,
+  resolveArtifactId,
   constrainWidth = true,
   emptyTitle = "What are we working on?",
   onRetry,
@@ -320,6 +356,7 @@ export function CloudOsChatMessages({
   onSuggestion,
   onRespond,
   onOpenSchedule,
+  onOpenArtifact,
   onCopy,
 }: CloudOsChatMessagesProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -473,6 +510,8 @@ export function CloudOsChatMessages({
                     copied={copied === entry.text}
                     renderFile={renderFile}
                     resolveUrl={resolveUrl}
+                    resolveArtifactId={resolveArtifactId}
+                    onOpenArtifact={onOpenArtifact}
                   />
                 </div>
               );
@@ -551,6 +590,8 @@ export function CloudOsChatMessages({
                       <MarkdownMessage
                         message={entry.summary}
                         resolveUrl={resolveUrl}
+                        resolveArtifactId={resolveArtifactId}
+                        onOpenArtifact={onOpenArtifact}
                       />
                     </div>
                   )}
@@ -566,6 +607,16 @@ export function CloudOsChatMessages({
             const hasNarrative = contentBlocks.some(
               (block) => block.kind === "text",
             );
+            const insufficientFailures = contentBlocks.filter(
+              (block) => block.kind === "actionPresentation" &&
+                block.presentation.state === "failed" &&
+                block.presentation.failureCode === "insufficient_credits",
+            );
+            const firstInsufficientFailure = insufficientFailures[0];
+            const hasCompletedAction = contentBlocks.some(
+              (block) => block.kind === "actionPresentation" &&
+                block.presentation.state === "ready",
+            );
 
             return (
               <div
@@ -657,6 +708,8 @@ export function CloudOsChatMessages({
                             <MarkdownMessage
                               message={block.text}
                               resolveUrl={resolveUrl}
+                              resolveArtifactId={resolveArtifactId}
+                              onOpenArtifact={onOpenArtifact}
                               streaming={streaming}
                             />
                           </div>
@@ -739,18 +792,25 @@ export function CloudOsChatMessages({
                           <SubAgentsBlock key={block.key} agents={block.agents} />
                         );
                       case "image":
-                        return (
-                          <Fragment key={block.key}>
-                            {renderFileView(renderFile, {
-                              file: {
-                                url: resolveUrl?.(block.src) ?? block.src,
-                                filename: block.alt,
-                                mediaType: block.mediaType ?? "image/*",
-                              },
-                              placement: "assistant-message",
-                            })}
-                          </Fragment>
-                        );
+                        {
+                          const url = resolveUrl?.(block.src) ?? block.src;
+                          const artifactId = resolveArtifactId?.(url);
+                          return (
+                            <Fragment key={block.key}>
+                              {renderFileView(renderFile, {
+                                file: {
+                                  url,
+                                  filename: block.alt,
+                                  mediaType: block.mediaType ?? "image/*",
+                                },
+                                placement: "assistant-message",
+                                onOpen: artifactId && onOpenArtifact
+                                  ? () => onOpenArtifact(artifactId)
+                                  : undefined,
+                              })}
+                            </Fragment>
+                          );
+                        }
                       case "file":
                         return (
                           <Fragment key={block.key}>
@@ -765,12 +825,20 @@ export function CloudOsChatMessages({
                           </Fragment>
                         );
                       case "actionPresentation":
+                        if (
+                          block.presentation.failureCode === "insufficient_credits" &&
+                          block !== firstInsufficientFailure
+                        ) return null;
                         return (
                           <ActionPresentationBlock
                             key={block.key}
                             presentation={block.presentation}
+                            failureCount={insufficientFailures.length}
+                            partial={hasCompletedAction}
                             renderFile={renderFile}
                             resolveUrl={resolveUrl}
+                            resolveArtifactId={resolveArtifactId}
+                            onOpenArtifact={onOpenArtifact}
                           />
                         );
                       case "error":

package/cloud-os/chat/markdown-message.tsx

@@ -18,6 +18,7 @@ import {
  */
 
 export type CloudOsUrlResolver = (url: string) => string | null | undefined;
+export type CloudOsArtifactResolver = (url: string) => string | undefined;
 
 const ALLOWED_PROTOCOLS = new Set(["http:", "https:", "mailto:"]);
 const SMOOTH_STREAMING = {
@@ -104,23 +105,35 @@ const DEFAULT_COMPONENTS: Components = {
 export const MarkdownMessage = memo(function MarkdownMessage({
   message,
   resolveUrl,
+  resolveArtifactId,
+  onOpenArtifact,
   streaming = false,
 }: {
   message: string;
   resolveUrl?: CloudOsUrlResolver;
+  resolveArtifactId?: CloudOsArtifactResolver;
+  onOpenArtifact?: (artifactId: string) => void;
   streaming?: boolean;
 }): ReactNode {
   return (
     <TextMessagePartProvider text={message} isRunning={streaming}>
-      <MarkdownMessageContent resolveUrl={resolveUrl} />
+      <MarkdownMessageContent
+        resolveUrl={resolveUrl}
+        resolveArtifactId={resolveArtifactId}
+        onOpenArtifact={onOpenArtifact}
+      />
     </TextMessagePartProvider>
   );
 });
 
 function MarkdownMessageContent({
   resolveUrl,
+  resolveArtifactId,
+  onOpenArtifact,
 }: {
   resolveUrl?: CloudOsUrlResolver;
+  resolveArtifactId?: CloudOsArtifactResolver;
+  onOpenArtifact?: (artifactId: string) => void;
 }) {
   const part = useSmooth(useMessagePartText(), SMOOTH_STREAMING);
   const streaming = part.status.type === "running";
@@ -131,6 +144,26 @@ function MarkdownMessageContent({
         : STREAMDOWN_REHYPE_PLUGINS,
     [resolveUrl],
   );
+  const components = useMemo<Components>(() => ({
+    ...DEFAULT_COMPONENTS,
+    img: ({ node: _node, src, alt, ...props }) => {
+      if (!src) return null;
+      const image = <img {...props} src={src} alt={alt} />;
+      const artifactId = resolveArtifactId?.(src);
+      return artifactId && onOpenArtifact
+        ? (
+          <button
+            type="button"
+            onClick={() => onOpenArtifact(artifactId)}
+            aria-label={`Open ${alt || "image"} in Creation View`}
+            className="inline-block max-w-full cursor-pointer rounded-xl align-bottom focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+          >
+            {image}
+          </button>
+        )
+        : image;
+    },
+  }), [onOpenArtifact, resolveArtifactId]);
   return (
     <Streamdown
       animated={false}
@@ -140,7 +173,7 @@ function MarkdownMessageContent({
       isAnimating={streaming}
       rehypePlugins={rehypePlugins}
       skipHtml
-      components={DEFAULT_COMPONENTS}
+      components={components}
     >
       {part.text}
     </Streamdown>

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

@@ -61,6 +61,7 @@ export interface CloudOsActionPresentation {
   type: "action-execution";
   executionId: string;
   state: "running" | "ready" | "failed" | "outcome_unknown";
+  failureCode?: "insufficient_credits";
   produces?: CloudOsActionProduces;
   content: CloudOsActionPresentationFile[];
 }
@@ -383,6 +384,9 @@ function actionPresentationOf(value: unknown): CloudOsActionPresentation | null
     type: "action-execution",
     executionId: presentation.executionId,
     state,
+    ...(state === "failed" && presentation.failureCode === "insufficient_credits"
+      ? { failureCode: presentation.failureCode }
+      : {}),
     ...(produces ? { produces } : {}),
     content,
   };

package/cloud-os/file-view.tsx

@@ -60,6 +60,7 @@ export interface FileViewProps {
   variant?: FileViewVariant;
   status?: FileViewStatus;
   progress?: number;
+  onOpen?: () => void;
   onRemove?: () => void;
   onRetry?: () => void;
 }
@@ -168,10 +169,12 @@ function ProductFileView({
   file,
   label,
   placement,
+  onOpen,
 }: {
   file: FileViewFile;
   label: string;
   placement: Exclude<FileViewPlacement, "composer">;
+  onOpen?: () => void;
 }) {
   const type = productTypeForMediaType(file.mediaType);
   const { frame } = PRODUCT_PRESETS[type];
@@ -226,7 +229,16 @@ function ProductFileView({
     </span>
   );
 
-  return file.url && !video ? (
+  return onOpen ? (
+    <button
+      type="button"
+      onClick={onOpen}
+      aria-label={`Open ${label} in Creation View`}
+      className="inline-block max-w-full cursor-pointer rounded-2xl text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+    >
+      {content}
+    </button>
+  ) : file.url && !video ? (
     <a
       href={file.url}
       target="_blank"
@@ -260,6 +272,7 @@ export function FileView({
   variant = "compact",
   status = "ready",
   progress = 0,
+  onOpen,
   onRemove,
   onRetry,
 }: FileViewProps) {
@@ -359,13 +372,30 @@ export function FileView({
   }
 
   if (variant === "product") {
-    return <ProductFileView file={file} label={label} placement={placement} />;
+    return (
+      <ProductFileView
+        file={file}
+        label={label}
+        placement={placement}
+        onOpen={onOpen}
+      />
+    );
   }
 
   if (isImage) {
-    return (
+    const image = (
       <ImageFileView src={file.url!} label={label} placement={placement} />
     );
+    return onOpen ? (
+      <button
+        type="button"
+        onClick={onOpen}
+        aria-label={`Open ${label} in Creation View`}
+        className="inline-block max-w-full cursor-pointer rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+      >
+        {image}
+      </button>
+    ) : image;
   }
 
   return (

package/cloud-os/index.ts

@@ -61,7 +61,10 @@ export type {
 } from "./workspace/cloud-os-workspace-panel";
 
 export { MarkdownMessage } from "./chat/markdown-message";
-export type { CloudOsUrlResolver } from "./chat/markdown-message";
+export type {
+  CloudOsArtifactResolver,
+  CloudOsUrlResolver,
+} from "./chat/markdown-message";
 export {
   ThinkingTraceRow,
   ToolCallDetails,

package/package.json

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