@tangle-network/ui 11.11.1 → 11.11.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @tangle-network/ui
 
+## 11.11.2
+
+### Patch Changes
+
+- 658ae83: Use each colored AgentTimeline card's tone foreground for its status detail and artifact text.
+  Keep neutral cards on the normal muted foreground.
+
 ## 11.11.1
 
 ### Patch Changes

package/dist/{chat-D4jAfEmj.js → chat-D-9Fm8A4.js}

@@ -120,26 +120,31 @@ const TONE_STYLES = {
 	default: {
 		card: "border-border bg-card",
 		text: "text-foreground",
+		supportingText: "text-muted-foreground",
 		icon: CircleDot
 	},
 	info: {
 		card: "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)]",
 		text: "text-[var(--surface-info-text)]",
+		supportingText: "text-[var(--surface-info-text)]",
 		icon: Info
 	},
 	success: {
 		card: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]",
 		text: "text-[var(--surface-success-text)]",
+		supportingText: "text-[var(--surface-success-text)]",
 		icon: CheckCircle2
 	},
 	warning: {
 		card: "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)]",
 		text: "text-[var(--surface-warning-text)]",
+		supportingText: "text-[var(--surface-warning-text)]",
 		icon: AlertTriangle
 	},
 	error: {
 		card: "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)]",
 		text: "text-[var(--surface-danger-text)]",
+		supportingText: "text-[var(--surface-danger-text)]",
 		icon: AlertTriangle
 	}
 };
@@ -190,7 +195,7 @@ function StatusCard({ item }) {
 					className: cn("text-sm font-medium", tone.text),
 					children: item.label
 				}), item.detail && /* @__PURE__ */ jsx("div", {
-					className: "mt-0.5 text-sm text-muted-foreground",
+					className: cn("mt-0.5 text-sm", tone.supportingText),
 					children: item.detail
 				})]
 			})]
@@ -212,15 +217,15 @@ function ArtifactCard({ item }) {
 					className: "min-w-0 flex-1",
 					children: [
 						/* @__PURE__ */ jsx("div", {
-							className: "text-sm font-medium text-foreground",
+							className: cn("text-sm font-medium", tone.text),
 							children: item.title
 						}),
 						item.description && /* @__PURE__ */ jsx("div", {
-							className: "mt-1 text-sm text-muted-foreground",
+							className: cn("mt-1 text-sm", tone.supportingText),
 							children: item.description
 						}),
 						item.meta && /* @__PURE__ */ jsx("div", {
-							className: "mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground",
+							className: cn("mt-2 flex flex-wrap items-center gap-2 text-xs", tone.supportingText),
 							children: item.meta
 						})
 					]

package/dist/chat.js

@@ -1,2 +1,2 @@
-import { a as MessageList, i as ThinkingIndicator, n as ChatContainer, o as UserMessage, r as AgentTimeline, t as ChatMessage } from "./chat-D4jAfEmj.js";
+import { a as MessageList, i as ThinkingIndicator, n as ChatContainer, o as UserMessage, r as AgentTimeline, t as ChatMessage } from "./chat-D-9Fm8A4.js";
 export { AgentTimeline, ChatContainer, ChatMessage, MessageList, ThinkingIndicator, UserMessage };

package/dist/index.js

@@ -17,7 +17,7 @@ import { a as RunRowStatusDot, i as RunRowShell, o as ExpandedToolDetail, r as I
 import { t as Markdown } from "./markdown-BGqicV82.js";
 import { n as InlineThinkingItem, t as RunGroup } from "./run-group-BACLbCFl.js";
 import { t as OpenUIArtifactRenderer } from "./openui-artifact-renderer-DrU1AdVk.js";
-import { a as MessageList, i as ThinkingIndicator, n as ChatContainer, o as UserMessage, r as AgentTimeline, t as ChatMessage } from "./chat-D4jAfEmj.js";
+import { a as MessageList, i as ThinkingIndicator, n as ChatContainer, o as UserMessage, r as AgentTimeline, t as ChatMessage } from "./chat-D-9Fm8A4.js";
 import { t as LiveDuration } from "./run-ZsIKPA6J.js";
 import { n as parseToolEvent, t as ToolCallFeed } from "./tool-call-feed-Djt2q11V.js";
 import "./openui.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.11.1",
+  "version": "11.11.2",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/chat/agent-timeline.stories.tsx

@@ -450,6 +450,21 @@ export const StatusTones: Story = {
   },
 }
 
+export const ErrorArtifact: Story = {
+  args: {
+    items: [
+      {
+        id: 'artifact-error',
+        kind: 'artifact',
+        title: 'Build output',
+        description: 'The compiler stopped before writing the bundle.',
+        meta: 'Exit code 1',
+        tone: 'error',
+      },
+    ],
+  },
+}
+
 // ---------------------------------------------------------------------------
 // Full transcript through ChatContainer — the real consumer path. Tool titles
 // and descriptions come from `getToolDisplayMetadata`, so this story shows the

package/src/chat/agent-timeline.tsx

@@ -101,30 +101,35 @@ export interface AgentTimelineProps {
   collapseAfter?: number;
 }
 
-const TONE_STYLES: Record<AgentTimelineTone, { card: string; text: string; icon: typeof Info }> = {
+const TONE_STYLES: Record<AgentTimelineTone, { card: string; text: string; supportingText: string; icon: typeof Info }> = {
   default: {
     card: "border-border bg-card",
     text: "text-foreground",
+    supportingText: "text-muted-foreground",
     icon: CircleDot,
   },
   info: {
     card: "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)]",
     text: "text-[var(--surface-info-text)]",
+    supportingText: "text-[var(--surface-info-text)]",
     icon: Info,
   },
   success: {
     card: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]",
     text: "text-[var(--surface-success-text)]",
+    supportingText: "text-[var(--surface-success-text)]",
     icon: CheckCircle2,
   },
   warning: {
     card: "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)]",
     text: "text-[var(--surface-warning-text)]",
+    supportingText: "text-[var(--surface-warning-text)]",
     icon: AlertTriangle,
   },
   error: {
     card: "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)]",
     text: "text-[var(--surface-danger-text)]",
+    supportingText: "text-[var(--surface-danger-text)]",
     icon: AlertTriangle,
   },
 };
@@ -191,7 +196,7 @@ function StatusCard({ item }: { item: AgentTimelineStatusItem }) {
         <div className="min-w-0">
           <div className={cn("text-sm font-medium", tone.text)}>{item.label}</div>
           {item.detail && (
-            <div className="mt-0.5 text-sm text-muted-foreground">{item.detail}</div>
+            <div className={cn("mt-0.5 text-sm", tone.supportingText)}>{item.detail}</div>
           )}
         </div>
       </div>
@@ -208,12 +213,12 @@ function ArtifactCard({ item }: { item: AgentTimelineArtifactItem }) {
           {item.icon ?? <FileText className="h-4 w-4" />}
         </div>
         <div className="min-w-0 flex-1">
-          <div className="text-sm font-medium text-foreground">{item.title}</div>
+          <div className={cn("text-sm font-medium", tone.text)}>{item.title}</div>
           {item.description && (
-            <div className="mt-1 text-sm text-muted-foreground">{item.description}</div>
+            <div className={cn("mt-1 text-sm", tone.supportingText)}>{item.description}</div>
           )}
           {item.meta && (
-            <div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+            <div className={cn("mt-2 flex flex-wrap items-center gap-2 text-xs", tone.supportingText)}>
               {item.meta}
             </div>
           )}