@tangle-network/ui 11.11.6 → 11.11.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 11.11.8
+
+### Patch Changes
+
+- dc29f33: Use semantic theme colors for inline code in Markdown and the InlineCode primitive.
+
+## 11.11.7
+
+### Patch Changes
+
+- cad5ba2: Use inverse theme colors for user messages and leave assistant prose unboxed across the shared chat renderers.
+
 ## 11.11.6
 
 ### Patch Changes

package/dist/{chat-DXidmE_w.js → chat-DDvF2oGQ.js}

@@ -3,9 +3,9 @@ import { t as cn } from "./utils-C_uf36nf.js";
 import { r as getToolDisplayMetadata } from "./tool-display-BAuAVa43.js";
 import { n as useRunCollapseState, r as useRunGroups, t as useAutoScroll } from "./use-auto-scroll-C5Pjeqon.js";
 import { n as ToolCallStep, t as ToolCallGroup } from "./tool-call-step-DNebqhmX.js";
-import { t as Markdown } from "./markdown-PywkQXWk.js";
-import { n as InlineThinkingItem, t as RunGroup } from "./run-group-COUIsZ_x.js";
-import { t as OpenUIArtifactRenderer } from "./openui-artifact-renderer-DjLPuaP9.js";
+import { t as Markdown } from "./markdown-Db08KAYF.js";
+import { n as InlineThinkingItem, t as RunGroup } from "./run-group-BWGeesgs.js";
+import { t as OpenUIArtifactRenderer } from "./openui-artifact-renderer-DG_i2lOR.js";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AlertTriangle, ArrowDown, CheckCircle2, CircleDot, FileText, Info } from "lucide-react";
@@ -17,8 +17,7 @@ function formatTime$1(date) {
 	});
 }
 /**
-* The single user message bubble — a quiet, right-aligned card with a subtle
-* semantic border (no loud fill, no uppercase label). The timestamp sits
+* The single user message bubble uses inverse theme colors. The timestamp sits
 * beside the bubble and appears on hover, so it costs no height. Used by both
 * the run/message list (session-model `parts`) and AgentTimeline (direct
 * `content`/`timestamp`).
@@ -31,13 +30,13 @@ const UserMessage = memo(({ message: _message, parts, content, timestamp, action
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "group flex min-w-0 max-w-[78%] flex-col items-end gap-2",
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "relative w-full min-w-0 rounded-2xl border border-border bg-card px-4 py-3",
+				className: "relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background",
 				children: [timestamp ? /* @__PURE__ */ jsx("span", {
 					"data-user-message-time": "",
 					className: "pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-[var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
 					children: formatTime$1(timestamp)
 				}) : null, /* @__PURE__ */ jsx("div", {
-					className: "break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5] text-foreground",
+					className: "break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5]",
 					children: text
 				})]
 			}), actions ? /* @__PURE__ */ jsx("div", {
@@ -639,6 +638,7 @@ ChatContainer.displayName = "ChatContainer";
 //#region src/chat/chat-message.tsx
 function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, className, userLabel = "You", assistantLabel = "Agent", hideRoleLabel }) {
 	const isUser = role === "user";
+	const isAssistant = role === "assistant";
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex flex-col gap-1", isUser ? "items-end" : "items-start", className),
 		children: [!hideRoleLabel && /* @__PURE__ */ jsxs("div", {
@@ -651,9 +651,9 @@ function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, classNa
 				children: formatTime(timestamp)
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: cn("min-w-0 max-w-[85%] space-y-1 rounded-[var(--radius-lg)] border", "px-[var(--chat-message-px)] py-[var(--chat-message-py)]", isUser ? "border-border bg-muted/50" : "border-border bg-card"),
+			className: cn("min-w-0 max-w-[85%] space-y-1", isUser ? "rounded-[var(--radius-lg)] bg-foreground px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-background" : isAssistant ? "text-foreground" : "rounded-[var(--radius-lg)] border border-border bg-card px-[var(--chat-message-px)] py-[var(--chat-message-py)]"),
 			children: [isUser ? /* @__PURE__ */ jsx("div", {
-				className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground",
+				className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)]",
 				children: content
 			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [content && /* @__PURE__ */ jsx(Markdown, {
 				className: "tangle-prose text-[var(--font-size-base)] leading-[var(--line-height-base)]",

package/dist/chat.d.ts

@@ -1,2 +1,2 @@
-import { _ as UserMessageProps, a as AgentTimelineMessageItem, b as ChatContainer, c as AgentTimelineTone, d as ThinkingIndicator, f as ThinkingIndicatorProps, g as UserMessage, h as MessageRole, i as AgentTimelineItem, l as AgentTimelineToolGroupItem, m as ChatMessageProps, n as AgentTimelineArtifactItem, o as AgentTimelineProps, p as ChatMessage, r as AgentTimelineCustomItem, s as AgentTimelineStatusItem, t as AgentTimeline, u as AgentTimelineToolItem, v as MessageList, x as ChatContainerProps, y as MessageListProps } from "./index-D-9c3r-Y.js";
+import { _ as UserMessageProps, a as AgentTimelineMessageItem, b as ChatContainer, c as AgentTimelineTone, d as ThinkingIndicator, f as ThinkingIndicatorProps, g as UserMessage, h as MessageRole, i as AgentTimelineItem, l as AgentTimelineToolGroupItem, m as ChatMessageProps, n as AgentTimelineArtifactItem, o as AgentTimelineProps, p as ChatMessage, r as AgentTimelineCustomItem, s as AgentTimelineStatusItem, t as AgentTimeline, u as AgentTimelineToolItem, v as MessageList, x as ChatContainerProps, y as MessageListProps } from "./index-Cs7j8V7l.js";
 export { AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, MessageList, type MessageListProps, type MessageRole, ThinkingIndicator, type ThinkingIndicatorProps, UserMessage, type UserMessageProps };

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-DXidmE_w.js";
+import { a as MessageList, i as ThinkingIndicator, n as ChatContainer, o as UserMessage, r as AgentTimeline, t as ChatMessage } from "./chat-DDvF2oGQ.js";
 export { AgentTimeline, ChatContainer, ChatMessage, MessageList, ThinkingIndicator, UserMessage };

package/dist/{document-editor-pane-DrjsLZ3a.js → document-editor-pane-CsFbH2qo.js}

@@ -3,7 +3,7 @@ import { i as focusRing } from "./focus-BcE_SHqz.js";
 import { t as cn } from "./utils-C_uf36nf.js";
 import { i as TabsTrigger, n as TabsContent, r as TabsList, t as Tabs } from "./tabs-BVHR6NkO.js";
 import { t as ArtifactPane } from "./artifact-pane-DMXT9a8U.js";
-import { t as Markdown } from "./markdown-PywkQXWk.js";
+import { t as Markdown } from "./markdown-Db08KAYF.js";
 import { Suspense, createContext, lazy, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { PencilLine, Save, Users, Wifi, WifiOff } from "lucide-react";

package/dist/editor.js

@@ -1,2 +1,2 @@
-import { a as useCollaborators, c as useYjsState, d as EditorToolbar, f as EditorProvider, i as useCollaboratorPresence, l as CollaboratorsList, o as useDocumentChanges, p as useEditorContext, r as useAwareness, s as useEditorConnection, t as DocumentEditorPane, u as TiptapEditor } from "./document-editor-pane-DrjsLZ3a.js";
+import { a as useCollaborators, c as useYjsState, d as EditorToolbar, f as EditorProvider, i as useCollaboratorPresence, l as CollaboratorsList, o as useDocumentChanges, p as useEditorContext, r as useAwareness, s as useEditorConnection, t as DocumentEditorPane, u as TiptapEditor } from "./document-editor-pane-CsFbH2qo.js";
 export { CollaboratorsList, DocumentEditorPane, EditorProvider, EditorToolbar, TiptapEditor, useAwareness, useCollaboratorPresence, useCollaborators, useDocumentChanges, useEditorConnection, useEditorContext, useYjsState };

package/dist/{files-DDpeW_nO.js → files--Unn___t.js}

@@ -5,7 +5,7 @@ import { t as ArtifactPane } from "./artifact-pane-DMXT9a8U.js";
 import { n as CopyButton, t as CodeBlock } from "./code-block-B36KVUSN.js";
 import { t as formatBytes } from "./format-DfcLWqMa.js";
 import { i as getFormatLabel, n as fileExtension, o as resolveFilePreviewKind, r as getCodeLanguage, t as detectFileFormat } from "./file-format-BgXbr-Ib.js";
-import { t as Markdown } from "./markdown-PywkQXWk.js";
+import { t as Markdown } from "./markdown-Db08KAYF.js";
 import { Suspense, lazy, useEffect, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight, Download, File, FileCode, FileImage, FileJson, FileSpreadsheet, FileText, Folder, FolderOpen, Music, X } from "lucide-react";
@@ -647,7 +647,7 @@ function FileTabs({ tabs, activeId, onSelect, onClose, className }) {
 //#endregion
 //#region src/files/file-artifact-pane.tsx
 const LazyDocumentEditorPane = lazy(async () => {
-	return { default: (await import("./document-editor-pane-DrjsLZ3a.js").then((n) => n.n)).DocumentEditorPane };
+	return { default: (await import("./document-editor-pane-CsFbH2qo.js").then((n) => n.n)).DocumentEditorPane };
 });
 /**
 * FileArtifactPane — opinionated artifact frame for file previews with tabs and

package/dist/files.js

@@ -1,3 +1,3 @@
 import { a as getSyntaxLanguage, i as getFormatLabel, n as fileExtension, o as resolveFilePreviewKind, r as getCodeLanguage, t as detectFileFormat } from "./file-format-BgXbr-Ib.js";
-import { a as parseCsv, c as filterFileTree, i as FilePreview, n as FileTabs, o as RichFileTree, r as CSV_PREVIEW_ROW_LIMIT, s as FileTree, t as FileArtifactPane } from "./files-DDpeW_nO.js";
+import { a as parseCsv, c as filterFileTree, i as FilePreview, n as FileTabs, o as RichFileTree, r as CSV_PREVIEW_ROW_LIMIT, s as FileTree, t as FileArtifactPane } from "./files--Unn___t.js";
 export { CSV_PREVIEW_ROW_LIMIT, FileArtifactPane, FilePreview, FileTabs, FileTree, RichFileTree, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage, parseCsv, resolveFilePreviewKind };

package/dist/hooks.js

@@ -1,5 +1,5 @@
 import { n as useRunCollapseState, r as useRunGroups, t as useAutoScroll } from "./use-auto-scroll-C5Pjeqon.js";
-import { a as useToolCallStream, i as useRealtimeSession, n as useSdkSession, o as useDropdownMenu, r as RealtimeSessionRegistry, t as useSSEStream } from "./use-sse-stream-OOPpkt_E.js";
+import { a as useToolCallStream, i as useRealtimeSession, n as useSdkSession, o as useDropdownMenu, r as RealtimeSessionRegistry, t as useSSEStream } from "./use-sse-stream-DjqRuDft.js";
 import * as React from "react";
 //#region src/hooks/use-live-time.ts
 /**

package/dist/{index-D-9c3r-Y.d.ts → index-Cs7j8V7l.d.ts}

@@ -87,8 +87,7 @@ interface UserMessageProps {
   actions?: ReactNode;
 }
 /**
- * The single user message bubble — a quiet, right-aligned card with a subtle
- * semantic border (no loud fill, no uppercase label). The timestamp sits
+ * The single user message bubble uses inverse theme colors. The timestamp sits
  * beside the bubble and appears on hover, so it costs no height. Used by both
  * the run/message list (session-model `parts`) and AgentTimeline (direct
  * `content`/`timestamp`).

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import { n as DisplayVariant, r as ToolDisplayMetadata, t as CustomToolRenderer
 import { a as Run, i as MessageUser, n as GroupedMessage, o as RunStats, r as MessageRun, s as ToolCategory, t as FinalTextPart } from "./run-OyWmIDqu.js";
 import { n as MarkdownProps, r as getSanitizedMarkdownHeadingIdFromRawFragment, t as Markdown } from "./markdown-C0atSabr.js";
 import { _ as OpenUITableNode, a as OpenUIBadgeNode, c as OpenUIComponentNode, d as OpenUIKeyValueNode, f as OpenUIMarkdownNode, g as OpenUIStatNode, h as OpenUIStackNode, i as OpenUIArtifactRendererProps, l as OpenUIGridNode, m as OpenUISeparatorNode, n as OpenUIActionsNode, o as OpenUICardNode, p as OpenUIPrimitive, r as OpenUIArtifactRenderer, s as OpenUICodeNode, t as OpenUIAction, u as OpenUIHeadingNode, v as OpenUITextNode } from "./openui-artifact-renderer-fkBQaoLO.js";
-import { _ as UserMessageProps, a as AgentTimelineMessageItem, b as ChatContainer, c as AgentTimelineTone, d as ThinkingIndicator, f as ThinkingIndicatorProps, g as UserMessage, h as MessageRole, i as AgentTimelineItem, l as AgentTimelineToolGroupItem, m as ChatMessageProps, n as AgentTimelineArtifactItem, o as AgentTimelineProps, p as ChatMessage, r as AgentTimelineCustomItem, s as AgentTimelineStatusItem, t as AgentTimeline, u as AgentTimelineToolItem, v as MessageList, x as ChatContainerProps, y as MessageListProps } from "./index-D-9c3r-Y.js";
+import { _ as UserMessageProps, a as AgentTimelineMessageItem, b as ChatContainer, c as AgentTimelineTone, d as ThinkingIndicator, f as ThinkingIndicatorProps, g as UserMessage, h as MessageRole, i as AgentTimelineItem, l as AgentTimelineToolGroupItem, m as ChatMessageProps, n as AgentTimelineArtifactItem, o as AgentTimelineProps, p as ChatMessage, r as AgentTimelineCustomItem, s as AgentTimelineStatusItem, t as AgentTimeline, u as AgentTimelineToolItem, v as MessageList, x as ChatContainerProps, y as MessageListProps } from "./index-Cs7j8V7l.js";
 import { a as parseToolEvent, i as ToolCallFeedProps, n as ToolCallData, o as ToolCallStatus, r as ToolCallFeed, s as ToolCallType, t as FeedSegment } from "./tool-call-feed-BeB1_4pX.js";
 import { n as ArtifactPaneProps, t as ArtifactPane } from "./artifact-pane-BL_DFWNl.js";
 import { C as FileNode, D as filterFileTree, E as FileTreeVisibilityOptions, S as RichFileTreeThemeVars, T as FileTreeProps, _ as parseCsv, a as getCodeLanguage, b as RichFileTreeGitStatus, c as resolveFilePreviewKind, d as FileTabData, f as FileTabs, g as FilePreviewProps, h as FilePreview, i as fileExtension, l as FileArtifactPane, m as CSV_PREVIEW_ROW_LIMIT, n as FilePreviewKind, o as getFormatLabel, p as FileTabsProps, r as detectFileFormat, s as getSyntaxLanguage, t as FileFormat, u as FileArtifactPaneProps, v as RichFileTree, w as FileTree, x as RichFileTreeProps, y as RichFileTreeGitEntry } from "./index-CyGSLGVF.js";

package/dist/index.js

@@ -3,7 +3,7 @@ import { a as focusRingInset, i as focusRing, n as focusFieldInvalid, r as focus
 import { t as cn } from "./utils-C_uf36nf.js";
 import { n as buttonVariants, t as Button } from "./button-C87nEe2R.js";
 import { a as TableFooter, c as TableRow, d as Card, f as CardContent, g as CardTitle, h as CardHeader, i as TableCell, l as Badge, m as CardFooter, n as TableBody, o as TableHead, p as CardDescription, r as TableCaption, s as TableHeader, t as Table, u as badgeVariants } from "./table-Bss73DhB.js";
-import { A as SegmentedControl, B as SelectValue, C as ToastProvider, D as SkeletonTable, E as SkeletonCard, F as SelectLabel, G as DialogContent, H as Textarea, I as SelectScrollDownButton, J as DialogHeader, K as DialogDescription, L as SelectScrollUpButton, M as SelectContent, N as SelectGroup, O as Switch, P as SelectItem, Q as DialogTrigger, R as SelectSeparator, S as ToastContainer, T as Skeleton, U as Dialog, V as Input, W as DialogClose, X as DialogPortal, Y as DialogOverlay, Z as DialogTitle, _ as TerminalInput, a as Metric, b as EmptyState, c as PageHeader, d as InlineCode, f as SidebarDropZone, g as TerminalDisplay, h as TerminalCursor, i as Toolbar, j as Select, k as Progress, l as ThemeToggle, m as DropZone, n as TangleKnot, o as MetricStrip, p as UploadProgress, q as DialogFooter, r as FilterField, s as StatusPill, t as Logo, u as useTheme, v as TerminalLine, w as useToast, x as Label, y as StatCard, z as SelectTrigger } from "./primitives-Cb8GGVKr.js";
+import { A as SegmentedControl, B as SelectValue, C as ToastProvider, D as SkeletonTable, E as SkeletonCard, F as SelectLabel, G as DialogContent, H as Textarea, I as SelectScrollDownButton, J as DialogHeader, K as DialogDescription, L as SelectScrollUpButton, M as SelectContent, N as SelectGroup, O as Switch, P as SelectItem, Q as DialogTrigger, R as SelectSeparator, S as ToastContainer, T as Skeleton, U as Dialog, V as Input, W as DialogClose, X as DialogPortal, Y as DialogOverlay, Z as DialogTitle, _ as TerminalInput, a as Metric, b as EmptyState, c as PageHeader, d as InlineCode, f as SidebarDropZone, g as TerminalDisplay, h as TerminalCursor, i as Toolbar, j as Select, k as Progress, l as ThemeToggle, m as DropZone, n as TangleKnot, o as MetricStrip, p as UploadProgress, q as DialogFooter, r as FilterField, s as StatusPill, t as Logo, u as useTheme, v as TerminalLine, w as useToast, x as Label, y as StatCard, z as SelectTrigger } from "./primitives-Bx59fT-U.js";
 import { _ as AvatarFallback, a as DropdownMenuItem, c as DropdownMenuRadioGroup, d as DropdownMenuShortcut, f as DropdownMenuSub, g as Avatar, h as DropdownMenuTrigger, i as DropdownMenuGroup, l as DropdownMenuRadioItem, m as DropdownMenuSubTrigger, n as DropdownMenuCheckboxItem, o as DropdownMenuLabel, p as DropdownMenuSubContent, r as DropdownMenuContent, s as DropdownMenuPortal, t as DropdownMenu, u as DropdownMenuSeparator, v as AvatarImage } from "./dropdown-menu-BpcLa5vF.js";
 import { i as TabsTrigger, n as TabsContent, r as TabsList, t as Tabs } from "./tabs-BVHR6NkO.js";
 import { t as TextShimmer } from "./text-shimmer-BUUo6I-g.js";
@@ -15,17 +15,17 @@ import { i as truncateText, n as formatDuration, r as formatUptime, t as formatB
 import { a as GrepResultsPreview, i as GlobResultsPreview, n as QuestionPreview, o as WriteFilePreview, r as WebSearchPreview, s as CommandPreview, t as DiffPreview } from "./diff-preview-BcK3nRXb.js";
 import { a as getSyntaxLanguage, i as getFormatLabel, n as fileExtension, o as resolveFilePreviewKind, r as getCodeLanguage, t as detectFileFormat } from "./file-format-BgXbr-Ib.js";
 import { a as RunRowStatusDot, i as RunRowShell, o as ExpandedToolDetail, r as InlineToolItem } from "./tool-call-step-DNebqhmX.js";
-import { n as getSanitizedMarkdownHeadingIdFromRawFragment, t as Markdown } from "./markdown-PywkQXWk.js";
-import { n as InlineThinkingItem, t as RunGroup } from "./run-group-COUIsZ_x.js";
-import { t as OpenUIArtifactRenderer } from "./openui-artifact-renderer-DjLPuaP9.js";
-import { a as MessageList, i as ThinkingIndicator, n as ChatContainer, o as UserMessage, r as AgentTimeline, t as ChatMessage } from "./chat-DXidmE_w.js";
+import { n as getSanitizedMarkdownHeadingIdFromRawFragment, t as Markdown } from "./markdown-Db08KAYF.js";
+import { n as InlineThinkingItem, t as RunGroup } from "./run-group-BWGeesgs.js";
+import { t as OpenUIArtifactRenderer } from "./openui-artifact-renderer-DG_i2lOR.js";
+import { a as MessageList, i as ThinkingIndicator, n as ChatContainer, o as UserMessage, r as AgentTimeline, t as ChatMessage } from "./chat-DDvF2oGQ.js";
 import { t as LiveDuration } from "./run-ZsIKPA6J.js";
-import { n as parseToolEvent, t as ToolCallFeed } from "./tool-call-feed-DNADpFyJ.js";
+import { n as parseToolEvent, t as ToolCallFeed } from "./tool-call-feed-BpmMLpPX.js";
 import "./openui.js";
-import { a as parseCsv, c as filterFileTree, i as FilePreview, n as FileTabs, o as RichFileTree, r as CSV_PREVIEW_ROW_LIMIT, s as FileTree, t as FileArtifactPane } from "./files-DDpeW_nO.js";
+import { a as parseCsv, c as filterFileTree, i as FilePreview, n as FileTabs, o as RichFileTree, r as CSV_PREVIEW_ROW_LIMIT, s as FileTree, t as FileArtifactPane } from "./files--Unn___t.js";
 import "./markdown.js";
 import { i as UserMenu, n as AuthHeader, r as GitHubLoginButton, t as LoginLayout } from "./auth-DOETfnd9.js";
-import { a as useToolCallStream, i as useRealtimeSession, n as useSdkSession, o as useDropdownMenu, r as RealtimeSessionRegistry, t as useSSEStream } from "./use-sse-stream-OOPpkt_E.js";
+import { a as useToolCallStream, i as useRealtimeSession, n as useSdkSession, o as useDropdownMenu, r as RealtimeSessionRegistry, t as useSSEStream } from "./use-sse-stream-DjqRuDft.js";
 import { C as useHasBackgroundRunningSessions, D as useSessionsByActivity, E as useProjectSessions, O as useTotalRunningSessions, S as useActiveSessionsState, T as useProjectActivity, _ as setForegroundActiveSession, a as getAllProjectActivity, b as useActiveSession, c as getSessionsForProject, d as registerActiveSession, f as resetActiveSessions, g as setActiveSessionRunning, h as setActiveSessionError, i as getAllActiveSessions, l as getTotalRunningSessionCount, m as setActiveSessionConnection, n as bumpActiveSessionActivity, o as getSessionsByActivity, p as setActiveSessionAttention, r as getActiveSession, s as getSessionsForNavbar, t as activeSessionsAtom, u as hasBackgroundRunningSessions, v as unregisterActiveSession, w as useNavbarSessions, x as useActiveSessions, y as updateActiveSessionMeta } from "./active-sessions-store-Gt1R0rFG.js";
 import { createAuthFetcher, useApiKey, useAuth, useLiveTime } from "./hooks.js";
 import { addMessage, addParts, clearChat, isStreamingAtom, messagesAtom, partMapAtom, updatePart } from "./stores.js";

package/dist/{markdown-PywkQXWk.js → markdown-Db08KAYF.js}

@@ -46,7 +46,7 @@ const Markdown = memo(({ children, className, urlTransform }) => {
 					const language = /language-(\w+)/.exec(codeClass || "")?.[1];
 					const code = String(codeChildren).replace(/\n$/, "");
 					if (!language && !code.includes("\n")) return /* @__PURE__ */ jsx("code", {
-						className: cn("px-1.5 py-0.5 rounded border border-border bg-card text-[var(--code-keyword)] text-[0.85em] font-mono", codeClass),
+						className: cn("px-1.5 py-0.5 rounded border border-border bg-muted text-foreground text-[0.85em] font-mono", codeClass),
 						...rest,
 						children: codeChildren
 					});

package/dist/markdown.js

@@ -1,3 +1,3 @@
 import { n as CopyButton, t as CodeBlock } from "./code-block-B36KVUSN.js";
-import { n as getSanitizedMarkdownHeadingIdFromRawFragment, t as Markdown } from "./markdown-PywkQXWk.js";
+import { n as getSanitizedMarkdownHeadingIdFromRawFragment, t as Markdown } from "./markdown-Db08KAYF.js";
 export { CodeBlock, CopyButton, Markdown, getSanitizedMarkdownHeadingIdFromRawFragment };

package/dist/{openui-artifact-renderer-DjLPuaP9.js → openui-artifact-renderer-DG_i2lOR.js}

@@ -3,7 +3,7 @@ import { t as cn } from "./utils-C_uf36nf.js";
 import { t as Button } from "./button-C87nEe2R.js";
 import { c as TableRow, d as Card, f as CardContent, g as CardTitle, h as CardHeader, i as TableCell, l as Badge, n as TableBody, o as TableHead, p as CardDescription, s as TableHeader, t as Table } from "./table-Bss73DhB.js";
 import { t as CodeBlock } from "./code-block-B36KVUSN.js";
-import { t as Markdown } from "./markdown-PywkQXWk.js";
+import { t as Markdown } from "./markdown-Db08KAYF.js";
 import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Minus } from "lucide-react";

package/dist/openui.js

@@ -1,3 +1,3 @@
 import { a as OPENUI_NODE_TYPES, i as OPENUI_NODE_JSON_SCHEMA, n as validateOpenUIJsonArtifact, r as validateOpenUIJsonNode, t as findUnsupportedOpenUINode } from "./schema-BpW9rSSG.js";
-import { t as OpenUIArtifactRenderer } from "./openui-artifact-renderer-DjLPuaP9.js";
+import { t as OpenUIArtifactRenderer } from "./openui-artifact-renderer-DG_i2lOR.js";
 export { OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, findUnsupportedOpenUINode, validateOpenUIJsonArtifact, validateOpenUIJsonNode };

package/dist/{primitives-Cb8GGVKr.js → primitives-Bx59fT-U.js}

@@ -929,7 +929,7 @@ function SidebarDropZone({ onDrop, accept, disabled, title = "Drop files here",
 //#region src/primitives/code-block.tsx
 function InlineCode({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("code", {
-		className: cn("rounded border border-border bg-card px-1.5 py-0.5 font-mono text-[0.85em] text-[var(--code-keyword)]", className),
+		className: cn("rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[0.85em] text-foreground", className),
 		...props,
 		children
 	});

package/dist/primitives.js

@@ -1,6 +1,6 @@
 import { n as buttonVariants, t as Button } from "./button-C87nEe2R.js";
 import { a as TableFooter, c as TableRow, d as Card, f as CardContent, g as CardTitle, h as CardHeader, i as TableCell, l as Badge, m as CardFooter, n as TableBody, o as TableHead, p as CardDescription, r as TableCaption, s as TableHeader, t as Table, u as badgeVariants } from "./table-Bss73DhB.js";
-import { A as SegmentedControl, B as SelectValue, C as ToastProvider, D as SkeletonTable, E as SkeletonCard, F as SelectLabel, G as DialogContent, H as Textarea, I as SelectScrollDownButton, J as DialogHeader, K as DialogDescription, L as SelectScrollUpButton, M as SelectContent, N as SelectGroup, O as Switch, P as SelectItem, Q as DialogTrigger, R as SelectSeparator, S as ToastContainer, T as Skeleton, U as Dialog, V as Input, W as DialogClose, X as DialogPortal, Y as DialogOverlay, Z as DialogTitle, _ as TerminalInput, a as Metric, b as EmptyState, c as PageHeader, d as InlineCode, f as SidebarDropZone, g as TerminalDisplay, h as TerminalCursor, i as Toolbar, j as Select, k as Progress, l as ThemeToggle, m as DropZone, n as TangleKnot, o as MetricStrip, p as UploadProgress, q as DialogFooter, r as FilterField, s as StatusPill, t as Logo, u as useTheme, v as TerminalLine, w as useToast, x as Label, y as StatCard, z as SelectTrigger } from "./primitives-Cb8GGVKr.js";
+import { A as SegmentedControl, B as SelectValue, C as ToastProvider, D as SkeletonTable, E as SkeletonCard, F as SelectLabel, G as DialogContent, H as Textarea, I as SelectScrollDownButton, J as DialogHeader, K as DialogDescription, L as SelectScrollUpButton, M as SelectContent, N as SelectGroup, O as Switch, P as SelectItem, Q as DialogTrigger, R as SelectSeparator, S as ToastContainer, T as Skeleton, U as Dialog, V as Input, W as DialogClose, X as DialogPortal, Y as DialogOverlay, Z as DialogTitle, _ as TerminalInput, a as Metric, b as EmptyState, c as PageHeader, d as InlineCode, f as SidebarDropZone, g as TerminalDisplay, h as TerminalCursor, i as Toolbar, j as Select, k as Progress, l as ThemeToggle, m as DropZone, n as TangleKnot, o as MetricStrip, p as UploadProgress, q as DialogFooter, r as FilterField, s as StatusPill, t as Logo, u as useTheme, v as TerminalLine, w as useToast, x as Label, y as StatCard, z as SelectTrigger } from "./primitives-Bx59fT-U.js";
 import { _ as AvatarFallback, a as DropdownMenuItem, c as DropdownMenuRadioGroup, d as DropdownMenuShortcut, f as DropdownMenuSub, g as Avatar, h as DropdownMenuTrigger, i as DropdownMenuGroup, l as DropdownMenuRadioItem, m as DropdownMenuSubTrigger, n as DropdownMenuCheckboxItem, o as DropdownMenuLabel, p as DropdownMenuSubContent, r as DropdownMenuContent, s as DropdownMenuPortal, t as DropdownMenu, u as DropdownMenuSeparator, v as AvatarImage } from "./dropdown-menu-BpcLa5vF.js";
 import { i as TabsTrigger, n as TabsContent, r as TabsList, t as Tabs } from "./tabs-BVHR6NkO.js";
 import { t as TextShimmer } from "./text-shimmer-BUUo6I-g.js";

package/dist/{run-group-COUIsZ_x.js → run-group-BWGeesgs.js}

@@ -2,8 +2,8 @@ import { t as cn } from "./utils-C_uf36nf.js";
 import { t as TextShimmer } from "./text-shimmer-BUUo6I-g.js";
 import { i as truncateText, n as formatDuration } from "./format-DfcLWqMa.js";
 import { i as RunRowShell, r as InlineToolItem, s as ExpandableContent } from "./tool-call-step-DNebqhmX.js";
-import { t as Markdown } from "./markdown-PywkQXWk.js";
-import { t as OpenUIArtifactRenderer } from "./openui-artifact-renderer-DjLPuaP9.js";
+import { t as Markdown } from "./markdown-Db08KAYF.js";
+import { t as OpenUIArtifactRenderer } from "./openui-artifact-renderer-DG_i2lOR.js";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Bot, Brain, ChevronDown, ChevronRight, ClipboardList, FileEdit, FileSearch, Globe, Loader2, PencilLine, Search, Settings, Sparkles, Terminal } from "lucide-react";

package/dist/run.js

@@ -1,5 +1,5 @@
 import { a as RunRowStatusDot, i as RunRowShell, o as ExpandedToolDetail, r as InlineToolItem } from "./tool-call-step-DNebqhmX.js";
-import { n as InlineThinkingItem, t as RunGroup } from "./run-group-COUIsZ_x.js";
+import { n as InlineThinkingItem, t as RunGroup } from "./run-group-BWGeesgs.js";
 import { t as LiveDuration } from "./run-ZsIKPA6J.js";
-import { n as parseToolEvent, t as ToolCallFeed } from "./tool-call-feed-DNADpFyJ.js";
+import { n as parseToolEvent, t as ToolCallFeed } from "./tool-call-feed-BpmMLpPX.js";
 export { ExpandedToolDetail, InlineThinkingItem, InlineToolItem, LiveDuration, RunGroup, RunRowShell, RunRowStatusDot, ToolCallFeed, parseToolEvent };

package/dist/sdk-hooks.js

@@ -1,3 +1,3 @@
 import { n as useRunCollapseState, r as useRunGroups, t as useAutoScroll } from "./use-auto-scroll-C5Pjeqon.js";
-import { a as useToolCallStream, i as useRealtimeSession, n as useSdkSession, o as useDropdownMenu, r as RealtimeSessionRegistry, t as useSSEStream } from "./use-sse-stream-OOPpkt_E.js";
+import { a as useToolCallStream, i as useRealtimeSession, n as useSdkSession, o as useDropdownMenu, r as RealtimeSessionRegistry, t as useSSEStream } from "./use-sse-stream-DjqRuDft.js";
 export { RealtimeSessionRegistry, useAutoScroll, useDropdownMenu, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useToolCallStream };

package/dist/{tool-call-feed-DNADpFyJ.js → tool-call-feed-BpmMLpPX.js}

@@ -1,6 +1,6 @@
 import { t as cn } from "./utils-C_uf36nf.js";
 import { n as ToolCallStep, t as ToolCallGroup } from "./tool-call-step-DNebqhmX.js";
-import { t as Markdown } from "./markdown-PywkQXWk.js";
+import { t as Markdown } from "./markdown-Db08KAYF.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/run/tool-call-feed.tsx
 /**

package/dist/{use-sse-stream-OOPpkt_E.js → use-sse-stream-DjqRuDft.js}

@@ -1,4 +1,4 @@
-import { n as parseToolEvent } from "./tool-call-feed-DNADpFyJ.js";
+import { n as parseToolEvent } from "./tool-call-feed-BpmMLpPX.js";
 import { _ as setForegroundActiveSession, d as registerActiveSession, g as setActiveSessionRunning, h as setActiveSessionError, m as setActiveSessionConnection, n as bumpActiveSessionActivity, p as setActiveSessionAttention, v as unregisterActiveSession, y as updateActiveSessionMeta } from "./active-sessions-store-Gt1R0rFG.js";
 import * as React from "react";
 import { createElement, useCallback, useEffect, useMemo, useRef, useState } from "react";

package/package.json

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

package/src/chat/chat-message.tsx

@@ -1,5 +1,5 @@
 /**
- * ChatMessage — single message bubble in the conversation.
+ * ChatMessage — one message in the conversation.
  *
  * Supports user messages (plain text) and assistant messages
  * (rich markdown with inline tool call activity).
@@ -41,6 +41,7 @@ export function ChatMessage({
   hideRoleLabel,
 }: ChatMessageProps) {
   const isUser = role === "user";
+  const isAssistant = role === "assistant";
 
   return (
     <div
@@ -63,19 +64,18 @@ export function ChatMessage({
         </div>
       )}
 
-      {/* Bubble */}
       <div
         className={cn(
-          "min-w-0 max-w-[85%] space-y-1 rounded-[var(--radius-lg)] border",
-          "px-[var(--chat-message-px)] py-[var(--chat-message-py)]",
+          "min-w-0 max-w-[85%] space-y-1",
           isUser
-            ? "border-border bg-muted/50"
-            : "border-border bg-card",
+            ? "rounded-[var(--radius-lg)] bg-foreground px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-background"
+            : isAssistant
+              ? "text-foreground"
+              : "rounded-[var(--radius-lg)] border border-border bg-card px-[var(--chat-message-px)] py-[var(--chat-message-py)]",
         )}
       >
-        {/* Message body */}
         {isUser ? (
-          <div className="whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground">
+          <div className="whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)]">
             {content}
           </div>
         ) : (

package/src/chat/user-message.test.tsx

@@ -3,13 +3,13 @@ import { describe, expect, it } from "vitest"
 import { UserMessage } from "./user-message"
 
 describe("UserMessage", () => {
-  it("renders the text in a bordered card that wraps in narrow panes", () => {
+  it("renders inverse text in a bubble that wraps in narrow panes", () => {
     const { container } = render(<UserMessage content="Run the tests." />)
     expect(screen.getByText("Run the tests.")).toBeInTheDocument()
     const bubble = container.querySelector(".rounded-2xl")
     expect(bubble).not.toBeNull()
-    expect(bubble!.className).toContain("bg-card")
-    expect(bubble!.className).toContain("border-border")
+    expect(bubble!.className).toContain("bg-foreground")
+    expect(bubble!.className).toContain("text-background")
     expect(container.querySelector(".group")?.className).toContain(
       "min-w-0",
     )

package/src/chat/user-message.tsx

@@ -17,8 +17,7 @@ function formatTime(date: Date): string {
 }
 
 /**
- * The single user message bubble — a quiet, right-aligned card with a subtle
- * semantic border (no loud fill, no uppercase label). The timestamp sits
+ * The single user message bubble uses inverse theme colors. The timestamp sits
  * beside the bubble and appears on hover, so it costs no height. Used by both
  * the run/message list (session-model `parts`) and AgentTimeline (direct
  * `content`/`timestamp`).
@@ -38,7 +37,7 @@ export const UserMessage = memo(
       <div className="flex justify-end">
         <div className="group flex min-w-0 max-w-[78%] flex-col items-end gap-2">
           <div
-            className="relative w-full min-w-0 rounded-2xl border border-border bg-card px-4 py-3"
+            className="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"
           >
             {timestamp ? (
               <span
@@ -48,7 +47,7 @@ export const UserMessage = memo(
                 {formatTime(timestamp)}
               </span>
             ) : null}
-            <div className="break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5] text-foreground">
+            <div className="break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5]">
               {text}
             </div>
           </div>

package/src/markdown/markdown.tsx

@@ -75,7 +75,7 @@ export const Markdown = memo(({ children, className, urlTransform }: MarkdownPro
               return (
                 <code
                   className={cn(
-                    "px-1.5 py-0.5 rounded border border-border bg-card text-[var(--code-keyword)] text-[0.85em] font-mono",
+                    "px-1.5 py-0.5 rounded border border-border bg-muted text-foreground text-[0.85em] font-mono",
                     codeClass,
                   )}
                   {...rest}
@@ -99,3 +99,4 @@ export const Markdown = memo(({ children, className, urlTransform }: MarkdownPro
   );
 });
 Markdown.displayName = "Markdown";
+

package/src/primitives/code-block.tsx

@@ -11,7 +11,7 @@ export function InlineCode({ className, children, ...props }: InlineCodeProps) {
   return (
     <code
       className={cn(
-        "rounded border border-border bg-card px-1.5 py-0.5 font-mono text-[0.85em] text-[var(--code-keyword)]",
+        "rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[0.85em] text-foreground",
         className,
       )}
       {...props}
@@ -20,3 +20,4 @@ export function InlineCode({ className, children, ...props }: InlineCodeProps) {
     </code>
   );
 }
+