@nextclaw/agent-chat-ui 0.5.2 → 0.5.3

package/dist/index.js

@@ -10,7 +10,6 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cva } from "class-variance-authority";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
-import { EditorRefPlugin } from "@lexical/react/LexicalEditorRefPlugin";
 import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
 import { $applyNodeReplacement, $createLineBreakNode, $createParagraphNode, $createRangeSelection, $createTextNode, $getRoot, $getSelection, $isElementNode, $isRangeSelection, $isTextNode, $setSelection, BLUR_COMMAND, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_HIGH, DecoratorNode, KEY_DOWN_COMMAND, SELECTION_CHANGE_COMMAND, mergeRegister } from "lexical";
@@ -256,7 +255,7 @@ function cn(...inputs) {
 //#region src/components/chat/default-skin/input.tsx
 const ChatInput = React.forwardRef(({ className, type, ...props }, ref) => /* @__PURE__ */ jsx("input", {
 	type,
-	className: cn("flex h-9 w-full rounded-xl border border-gray-200/80 bg-white px-3.5 py-2 text-sm text-gray-900 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-300 placeholder:font-normal focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary/40 transition-colors disabled:cursor-not-allowed disabled:opacity-50", className),
+	className: cn("flex h-9 w-full rounded-xl border border-border bg-card px-3.5 py-2 text-sm text-foreground file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/55 placeholder:font-normal focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary/40 transition-colors disabled:cursor-not-allowed disabled:opacity-50", className),
 	ref,
 	...props
 }));
@@ -276,7 +275,7 @@ const ChatPopoverContent = React.forwardRef(({ className, sideOffset = 8, align
 	sideOffset,
 	align,
 	collisionPadding,
-	className: cn("z-[var(--z-popover,50)] w-72 overflow-x-hidden overflow-y-auto rounded-2xl border border-gray-200/50 bg-white p-4 shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
+	className: cn("z-[var(--z-popover,50)] w-72 overflow-x-hidden overflow-y-auto rounded-2xl border border-border bg-popover p-4 text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=top]:slide-in-from-bottom-2 data-[side=right]:slide-in-from-left-2", className),
 	style: {
 		maxHeight: CHAT_POPOVER_CONTENT_MAX_HEIGHT,
 		...style
@@ -296,7 +295,7 @@ function createChatSelectAvailableHeightLimit(limit) {
 const CHAT_SELECT_CONTENT_MAX_HEIGHT = createChatSelectAvailableHeightLimit("24rem");
 const ChatSelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
 	ref,
-	className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-xl border border-gray-200/80 bg-white px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className),
+	className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-xl border border-border bg-card px-3 py-2 text-sm text-foreground shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className),
 	...props,
 	children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
 		asChild: true,
@@ -320,7 +319,7 @@ const ChatSelectScrollDownButton = React.forwardRef(({ className, ...props }, re
 ChatSelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 const ChatSelectContent = React.forwardRef(({ className, children, collisionPadding = 12, position = "popper", style, viewportClassName, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
 	ref,
-	className: cn("relative z-50 flex max-h-96 min-w-[8rem] flex-col overflow-hidden rounded-md bg-white text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
+	className: cn("relative z-50 flex max-h-96 min-w-[8rem] flex-col overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
 	collisionPadding,
 	position,
 	style: {
@@ -340,13 +339,13 @@ const ChatSelectContent = React.forwardRef(({ className, children, collisionPadd
 ChatSelectContent.displayName = SelectPrimitive.Content.displayName;
 const ChatSelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Label, {
 	ref,
-	className: cn("px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-gray-500", className),
+	className: cn("px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground", className),
 	...props
 }));
 ChatSelectLabel.displayName = SelectPrimitive.Label.displayName;
 const ChatSelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
 	ref,
-	className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-gray-100", className),
+	className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-accent hover:text-accent-foreground", className),
 	...props,
 	children: [/* @__PURE__ */ jsx("span", {
 		className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center",
@@ -356,7 +355,7 @@ const ChatSelectItem = React.forwardRef(({ className, children, ...props }, ref)
 ChatSelectItem.displayName = SelectPrimitive.Item.displayName;
 const ChatSelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Separator, {
 	ref,
-	className: cn("-mx-1 my-1 h-px bg-gray-100", className),
+	className: cn("-mx-1 my-1 h-px bg-border", className),
 	...props
 }));
 ChatSelectSeparator.displayName = SelectPrimitive.Separator.displayName;
@@ -652,12 +651,12 @@ const buttonVariants = cva("inline-flex items-center justify-center whitespace-n
 		variant: {
 			default: "bg-primary text-primary-foreground hover:bg-primary-600 active:bg-primary-700 shadow-sm",
 			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-			outline: "border border-gray-200 bg-white hover:bg-gray-50 hover:text-gray-800 text-gray-600",
-			secondary: "bg-gray-100 text-gray-700 hover:bg-gray-200/80",
-			ghost: "hover:bg-gray-100/80 hover:text-gray-800",
+			outline: "border border-border bg-card text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+			secondary: "bg-muted text-foreground hover:bg-accent hover:text-accent-foreground",
+			ghost: "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
 			link: "text-primary underline-offset-4 hover:underline",
 			primary: "bg-primary text-primary-foreground hover:bg-primary-600 active:bg-primary-700 shadow-sm",
-			subtle: "bg-gray-100 text-gray-600 hover:bg-gray-200/80",
+			subtle: "bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground",
 			"primary-outline": "border border-primary/30 text-primary hover:bg-primary hover:text-primary-foreground"
 		},
 		size: {
@@ -695,30 +694,30 @@ function StopIcon() {
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
 		"data-testid": "chat-stop-icon",
-		className: "block h-3 w-3 rounded-[2px] bg-gray-700 shadow-[inset_0_0_0_1px_rgba(17,24,39,0.06)]"
+		className: "block h-3 w-3 rounded-[2px] bg-foreground shadow-[inset_0_0_0_1px_hsl(var(--border))]"
 	});
 }
 function ContextWindowIndicator({ contextWindow }) {
 	const { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
 	const clampedRatio = Math.max(0, Math.min(1, contextWindow.ratio));
 	const angle = Math.round(clampedRatio * 360);
-	const ringColor = "#9ca3af";
+	const ringColor = "hsl(var(--muted-foreground))";
 	return /* @__PURE__ */ jsx(TooltipProvider, {
 		delayDuration: 0,
 		children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsxs("button", {
 				type: "button",
-				className: "relative inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700",
+				className: "relative inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
 				"aria-label": contextWindow.label,
 				title: contextWindow.label,
 				children: [/* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
 					className: "absolute inset-[7px] rounded-full",
-					style: { background: `conic-gradient(${ringColor} ${angle}deg, #e5e7eb 0deg)` }
+					style: { background: `conic-gradient(${ringColor} ${angle}deg, hsl(var(--border)) 0deg)` }
 				}), /* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
-					className: "absolute inset-[10px] rounded-full bg-white"
+					className: "absolute inset-[10px] rounded-full bg-card"
 				})]
 			})
 		}), /* @__PURE__ */ jsx(TooltipContent, {
@@ -727,12 +726,12 @@ function ContextWindowIndicator({ contextWindow }) {
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "space-y-1.5 text-xs",
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center justify-between gap-5 font-semibold text-gray-800",
+					className: "flex items-center justify-between gap-5 font-semibold text-foreground",
 					children: [/* @__PURE__ */ jsx("span", { children: contextWindow.label }), /* @__PURE__ */ jsx("span", { children: contextWindow.percentLabel })]
 				}), contextWindow.details.map((detail) => /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center justify-between gap-5 text-gray-600",
+					className: "flex items-center justify-between gap-5 text-muted-foreground",
 					children: [/* @__PURE__ */ jsx("span", { children: detail.label }), /* @__PURE__ */ jsx("span", {
-						className: "font-medium text-gray-800",
+						className: "font-medium text-foreground",
 						children: detail.value
 					})]
 				}, detail.label))]
@@ -895,7 +894,7 @@ function ChatInputBarSkillPicker(props) {
 			type: "button",
 			"aria-haspopup": "listbox",
 			"aria-label": picker.title,
-			className: "relative inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg px-0 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 sm:w-auto sm:gap-1.5 sm:px-3",
+			className: "relative inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg px-0 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground sm:w-auto sm:gap-1.5 sm:px-3",
 			children: [
 				/* @__PURE__ */ jsx(BrainCircuit, { className: "h-4 w-4" }),
 				/* @__PURE__ */ jsx("span", {
@@ -915,13 +914,13 @@ function ChatInputBarSkillPicker(props) {
 		style: { maxHeight: SKILL_PICKER_MAX_HEIGHT },
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "shrink-0 space-y-2 border-b border-gray-100 px-4 py-3",
+				className: "shrink-0 space-y-2 border-b border-border px-4 py-3",
 				children: [/* @__PURE__ */ jsx("div", {
-					className: "text-sm font-semibold text-gray-900",
+					className: "text-sm font-semibold text-foreground",
 					children: picker.title
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "relative",
-					children: [/* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-3 top-2.5 h-3.5 w-3.5 text-gray-400" }), /* @__PURE__ */ jsx(Input, {
+					children: [/* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-3 top-2.5 h-3.5 w-3.5 text-muted-foreground/70" }), /* @__PURE__ */ jsx(Input, {
 						value: query,
 						onChange: (event) => setQuery(event.target.value),
 						onKeyDown: onSearchKeyDown,
@@ -942,10 +941,10 @@ function ChatInputBarSkillPicker(props) {
 				"aria-multiselectable": "true",
 				className: "custom-scrollbar min-h-0 flex-1 overflow-y-auto overscroll-contain",
 				children: picker.isLoading ? /* @__PURE__ */ jsx("div", {
-					className: "p-4 text-xs text-gray-500",
+					className: "p-4 text-xs text-muted-foreground",
 					children: picker.loadingLabel
 				}) : visibleOptions.length === 0 ? /* @__PURE__ */ jsx("div", {
-					className: "p-4 text-center text-xs text-gray-500",
+					className: "p-4 text-center text-xs text-muted-foreground",
 					children: picker.emptyLabel
 				}) : /* @__PURE__ */ jsx("div", {
 					className: "py-1",
@@ -956,7 +955,7 @@ function ChatInputBarSkillPicker(props) {
 						}];
 						let visibleIndex = 0;
 						return groups.map((group) => /* @__PURE__ */ jsxs("div", { children: [group.label ? /* @__PURE__ */ jsx("div", {
-							className: "px-4 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-gray-500",
+							className: "px-4 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground",
 							children: group.label
 						}) : null, group.options.map((option) => {
 							const index = visibleIndex;
@@ -969,10 +968,10 @@ function ChatInputBarSkillPicker(props) {
 								"aria-selected": isSelected,
 								"data-skill-index": index,
 								onMouseEnter: () => setActiveIndex(index),
-								className: `flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors ${isActive ? "bg-gray-50" : "hover:bg-gray-50"}`,
+								className: `flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors ${isActive ? "bg-accent" : "hover:bg-accent"}`,
 								children: [
 									/* @__PURE__ */ jsx("div", {
-										className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-500",
+										className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground",
 										children: /* @__PURE__ */ jsx(Puzzle, { className: "h-4 w-4" })
 									}),
 									/* @__PURE__ */ jsxs("div", {
@@ -980,14 +979,14 @@ function ChatInputBarSkillPicker(props) {
 										children: [/* @__PURE__ */ jsxs("div", {
 											className: "flex items-center gap-1.5",
 											children: [/* @__PURE__ */ jsx("span", {
-												className: "truncate text-sm text-gray-900",
+												className: "truncate text-sm text-foreground",
 												children: option.label
 											}), option.badgeLabel ? /* @__PURE__ */ jsx("span", {
 												className: "shrink-0 rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary",
 												children: option.badgeLabel
 											}) : null]
 										}), /* @__PURE__ */ jsx("div", {
-											className: "mt-0.5 truncate text-xs text-gray-500",
+											className: "mt-0.5 truncate text-xs text-muted-foreground",
 											children: option.description || option.key
 										})]
 									}),
@@ -997,7 +996,7 @@ function ChatInputBarSkillPicker(props) {
 											type: "button",
 											"aria-label": `${isSelected ? "Remove" : "Add"} ${option.label}`,
 											onClick: () => onToggleOption(option.key),
-											className: isSelected ? "inline-flex h-5 w-5 items-center justify-center rounded-full bg-primary text-white" : "inline-flex h-5 w-5 items-center justify-center rounded-full border border-gray-300 bg-white",
+											className: isSelected ? "inline-flex h-5 w-5 items-center justify-center rounded-full bg-primary text-white" : "inline-flex h-5 w-5 items-center justify-center rounded-full border border-border bg-card",
 											children: isSelected ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : null
 										})
 									})
@@ -1008,7 +1007,7 @@ function ChatInputBarSkillPicker(props) {
 				})
 			}),
 			picker.manageHref && picker.manageLabel ? /* @__PURE__ */ jsx("div", {
-				className: "shrink-0 border-t border-gray-100 px-4 py-2.5",
+				className: "shrink-0 border-t border-border px-4 py-2.5",
 				children: /* @__PURE__ */ jsxs("a", {
 					href: picker.manageHref,
 					className: "inline-flex items-center gap-1.5 text-xs font-medium text-primary transition-colors hover:text-primary/80",
@@ -1021,7 +1020,7 @@ function ChatInputBarSkillPicker(props) {
 //#endregion
 //#region src/components/chat/ui/chat-input-bar/chat-input-bar-toolbar.tsx
 function ToolbarIcon({ icon }) {
-	return icon === "sparkles" ? /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5 shrink-0 text-primary" }) : icon === "brain" ? /* @__PURE__ */ jsx(Brain, { className: "h-3.5 w-3.5 shrink-0 text-gray-500" }) : null;
+	return icon === "sparkles" ? /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5 shrink-0 text-primary" }) : icon === "brain" ? /* @__PURE__ */ jsx(Brain, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }) : null;
 }
 function AccessoryIcon({ icon }) {
 	return icon === "paperclip" ? /* @__PURE__ */ jsx(Paperclip, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ToolbarIcon, { icon });
@@ -1054,16 +1053,16 @@ function ToolbarSelectTriggerContent({ item }) {
 		children: [
 			/* @__PURE__ */ jsx(ToolbarIcon, { icon: item.icon }),
 			/* @__PURE__ */ jsx("span", {
-				className: "nextclaw-chat-toolbar-mobile-label truncate text-xs font-semibold text-gray-700 sm:hidden [@container_nextclaw-chat-input-bar_(max-width:440px)]:hidden",
+				className: "nextclaw-chat-toolbar-mobile-label truncate text-xs font-semibold text-foreground sm:hidden [@container_nextclaw-chat-input-bar_(max-width:440px)]:hidden",
 				children: mobileSelectedLabel
 			}),
 			/* @__PURE__ */ jsx("span", {
-				className: "nextclaw-chat-toolbar-label hidden truncate text-xs font-semibold text-gray-700 sm:inline [@container_nextclaw-chat-input-bar_(max-width:440px)]:hidden",
+				className: "nextclaw-chat-toolbar-label hidden truncate text-xs font-semibold text-foreground sm:inline [@container_nextclaw-chat-input-bar_(max-width:440px)]:hidden",
 				children: item.selectedLabel
 			})
 		]
 	});
-	if (item.loading) return /* @__PURE__ */ jsx("div", { className: "h-3 w-24 animate-pulse rounded bg-gray-200" });
+	if (item.loading) return /* @__PURE__ */ jsx("div", { className: "h-3 w-24 animate-pulse rounded bg-muted" });
 	return /* @__PURE__ */ jsx("span", {
 		className: "truncate",
 		children: item.placeholder
@@ -1073,14 +1072,14 @@ function ToolbarSelectOptionContent({ option }) {
 	return option.description ? /* @__PURE__ */ jsxs("div", {
 		className: "flex min-w-0 flex-col gap-0.5",
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "truncate text-xs font-semibold text-gray-800",
+			className: "truncate text-xs font-semibold text-foreground",
 			children: option.label
 		}), /* @__PURE__ */ jsx("span", {
-			className: "truncate text-[11px] text-gray-500",
+			className: "truncate text-[11px] text-muted-foreground",
 			children: option.description
 		})]
 	}) : /* @__PURE__ */ jsx("span", {
-		className: "truncate text-xs font-semibold text-gray-800",
+		className: "truncate text-xs font-semibold text-foreground",
 		children: option.label
 	});
 }
@@ -1114,8 +1113,8 @@ function ToolbarSearchableSelect({ item }) {
 				type: "button",
 				"aria-label": item.selectedLabel ? `${item.placeholder}: ${item.selectedLabel}` : item.placeholder,
 				disabled: item.disabled,
-				className: `nextclaw-chat-toolbar-select-trigger inline-flex h-8 w-auto items-center justify-between rounded-lg border-0 bg-transparent px-2 text-xs font-medium text-gray-600 shadow-none hover:bg-gray-100 focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50 sm:px-3 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!basis-8 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!justify-center [@container_nextclaw-chat-input-bar_(max-width:440px)]:!max-w-8 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!min-w-8 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!px-0 ${TRIGGER_WIDTH_BY_KEY[item.key] ?? ""}`,
-				children: [/* @__PURE__ */ jsx(ToolbarSelectTriggerContent, { item }), /* @__PURE__ */ jsx(ChevronDown, { className: "ml-1 h-3.5 w-3.5 shrink-0 text-gray-400 [@container_nextclaw-chat-input-bar_(max-width:440px)]:hidden" })]
+				className: `nextclaw-chat-toolbar-select-trigger inline-flex h-8 w-auto items-center justify-between rounded-lg border-0 bg-transparent px-2 text-xs font-medium text-muted-foreground shadow-none hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50 sm:px-3 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!basis-8 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!justify-center [@container_nextclaw-chat-input-bar_(max-width:440px)]:!max-w-8 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!min-w-8 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!px-0 ${TRIGGER_WIDTH_BY_KEY[item.key] ?? ""}`,
+				children: [/* @__PURE__ */ jsx(ToolbarSelectTriggerContent, { item }), /* @__PURE__ */ jsx(ChevronDown, { className: "ml-1 h-3.5 w-3.5 shrink-0 text-muted-foreground/70 [@container_nextclaw-chat-input-bar_(max-width:440px)]:hidden" })]
 			})
 		}), /* @__PURE__ */ jsxs(PopoverContent, {
 			className: `flex flex-col overflow-hidden p-2 ${CONTENT_WIDTH_BY_KEY[item.key] ?? ""}`,
@@ -1123,7 +1122,7 @@ function ToolbarSearchableSelect({ item }) {
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "relative mb-2 shrink-0",
-					children: [/* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-gray-400" }), /* @__PURE__ */ jsx(Input, {
+					children: [/* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/70" }), /* @__PURE__ */ jsx(Input, {
 						value: query,
 						onChange: (event) => setQuery(event.currentTarget.value),
 						placeholder: item.search?.placeholder ?? item.placeholder,
@@ -1133,31 +1132,31 @@ function ToolbarSearchableSelect({ item }) {
 				!hasOptions ? item.loading ? /* @__PURE__ */ jsxs("div", {
 					className: "space-y-2 px-2 py-1",
 					children: [
-						/* @__PURE__ */ jsx("div", { className: "h-3 w-36 animate-pulse rounded bg-gray-200" }),
-						/* @__PURE__ */ jsx("div", { className: "h-3 w-28 animate-pulse rounded bg-gray-200" }),
-						/* @__PURE__ */ jsx("div", { className: "h-3 w-32 animate-pulse rounded bg-gray-200" })
+						/* @__PURE__ */ jsx("div", { className: "h-3 w-36 animate-pulse rounded bg-muted" }),
+						/* @__PURE__ */ jsx("div", { className: "h-3 w-28 animate-pulse rounded bg-muted" }),
+						/* @__PURE__ */ jsx("div", { className: "h-3 w-32 animate-pulse rounded bg-muted" })
 					]
 				}) : item.emptyLabel ? /* @__PURE__ */ jsx("div", {
-					className: "px-2 py-1 text-xs text-gray-500",
+					className: "px-2 py-1 text-xs text-muted-foreground",
 					children: item.emptyLabel
 				}) : null : null,
 				hasOptions && !hasFilteredOptions ? /* @__PURE__ */ jsx("div", {
-					className: "px-2 py-1 text-xs text-gray-500",
+					className: "px-2 py-1 text-xs text-muted-foreground",
 					children: item.search?.emptyLabel ?? item.emptyLabel
 				}) : null,
 				/* @__PURE__ */ jsx("div", {
 					className: "min-h-0 flex-1 overflow-y-auto overscroll-contain",
 					children: filteredGroups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", {
-						className: groupIndex > 0 ? "border-t border-gray-100 pt-1" : void 0,
+						className: groupIndex > 0 ? "border-t border-border pt-1" : void 0,
 						children: [group.label ? /* @__PURE__ */ jsx("div", {
-							className: "px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-gray-500",
+							className: "px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground",
 							children: group.label
 						}) : null, group.options.map((option) => {
 							const isSelected = item.value === option.value;
 							const isActive = activeValues.has(option.value);
 							const actionLabel = isActive ? action?.activeLabel : action?.inactiveLabel;
 							return /* @__PURE__ */ jsxs("div", {
-								className: "group flex items-center gap-1 rounded-md hover:bg-gray-100",
+								className: "group flex items-center gap-1 rounded-md hover:bg-accent",
 								children: [/* @__PURE__ */ jsxs("button", {
 									type: "button",
 									className: "flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-2 text-left",
@@ -1176,7 +1175,7 @@ function ToolbarSearchableSelect({ item }) {
 										type: "button",
 										"aria-label": actionLabel,
 										"aria-pressed": isActive,
-										className: "mr-1 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-white hover:text-amber-500 focus:outline-none focus:ring-1 focus:ring-primary/40",
+										className: "mr-1 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-card hover:text-amber-500 focus:outline-none focus:ring-1 focus:ring-primary/40",
 										onClick: (event) => {
 											event.stopPropagation();
 											action.onToggle(option.value, !isActive);
@@ -1210,7 +1209,7 @@ function ToolbarSelect({ item }) {
 		children: [/* @__PURE__ */ jsx(SelectTrigger, {
 			"aria-label": item.selectedLabel ? `${item.placeholder}: ${item.selectedLabel}` : item.placeholder,
 			title: item.selectedLabel,
-			className: `nextclaw-chat-toolbar-select-trigger h-8 w-auto rounded-lg border-0 bg-transparent px-2 text-xs font-medium text-gray-600 shadow-none hover:bg-gray-100 focus:ring-0 sm:px-3 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!basis-8 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!justify-center [@container_nextclaw-chat-input-bar_(max-width:440px)]:!max-w-8 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!min-w-8 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!px-0 ${TRIGGER_WIDTH_BY_KEY[item.key] ?? ""}`,
+			className: `nextclaw-chat-toolbar-select-trigger h-8 w-auto rounded-lg border-0 bg-transparent px-2 text-xs font-medium text-muted-foreground shadow-none hover:bg-accent hover:text-accent-foreground focus:ring-0 sm:px-3 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!basis-8 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!justify-center [@container_nextclaw-chat-input-bar_(max-width:440px)]:!max-w-8 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!min-w-8 [@container_nextclaw-chat-input-bar_(max-width:440px)]:!px-0 ${TRIGGER_WIDTH_BY_KEY[item.key] ?? ""}`,
 			children: item.selectedLabel || item.loading ? /* @__PURE__ */ jsx(ToolbarSelectTriggerContent, { item }) : /* @__PURE__ */ jsx(SelectValue, { placeholder: item.placeholder })
 		}), /* @__PURE__ */ jsxs(SelectContent, {
 			className: CONTENT_WIDTH_BY_KEY[item.key] ?? "",
@@ -1218,12 +1217,12 @@ function ToolbarSelect({ item }) {
 			children: [!hasOptions ? item.loading ? /* @__PURE__ */ jsxs("div", {
 				className: "space-y-2 px-3 py-2",
 				children: [
-					/* @__PURE__ */ jsx("div", { className: "h-3 w-36 animate-pulse rounded bg-gray-200" }),
-					/* @__PURE__ */ jsx("div", { className: "h-3 w-28 animate-pulse rounded bg-gray-200" }),
-					/* @__PURE__ */ jsx("div", { className: "h-3 w-32 animate-pulse rounded bg-gray-200" })
+					/* @__PURE__ */ jsx("div", { className: "h-3 w-36 animate-pulse rounded bg-muted" }),
+					/* @__PURE__ */ jsx("div", { className: "h-3 w-28 animate-pulse rounded bg-muted" }),
+					/* @__PURE__ */ jsx("div", { className: "h-3 w-32 animate-pulse rounded bg-muted" })
 				]
 			}) : item.emptyLabel ? /* @__PURE__ */ jsx("div", {
-				className: "px-3 py-2 text-xs text-gray-500",
+				className: "px-3 py-2 text-xs text-muted-foreground",
 				children: item.emptyLabel
 			}) : null : null, groups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { children: [groupIndex > 0 ? /* @__PURE__ */ jsx(SelectSeparator, {}) : null, /* @__PURE__ */ jsxs(SelectGroup, { children: [group.label ? /* @__PURE__ */ jsx(SelectLabel, { children: group.label }) : null, group.options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
 				value: option.value,
@@ -1245,7 +1244,7 @@ function ChatInputBarToolbar({ actions, accessories, selects, skillPicker }) {
 				accessories?.map((item) => {
 					const button = /* @__PURE__ */ jsxs("button", {
 						type: "button",
-						className: `inline-flex items-center rounded-lg py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 disabled:cursor-not-allowed disabled:text-gray-400 ${item.iconOnly ? "h-8 w-8 justify-center px-0" : "gap-1.5 px-3"}`,
+						className: `inline-flex items-center rounded-lg py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:text-muted-foreground/50 ${item.iconOnly ? "h-8 w-8 justify-center px-0" : "gap-1.5 px-3"}`,
 						onClick: item.onClick,
 						disabled: item.disabled,
 						"aria-label": item.label,
@@ -1699,7 +1698,7 @@ function insertInputSurfaceItemIntoChatComposer(params) {
 	});
 }
 function getChatComposerNodesSignature(nodes) {
-	return nodes.map((node) => node.type === "text" ? `text:${node.id}:${node.text}` : `token:${node.id}:${node.tokenKind}:${node.tokenKey}:${node.label}`).join("");
+	return nodes.map((node) => node.type === "text" ? `text:${node.text}` : `token:${node.tokenKind}:${node.tokenKey}:${node.label}`).join("");
 }
 function replaceChatComposerSelectionWithText(params) {
 	const { nodes, selection, text } = params;
@@ -1800,66 +1799,6 @@ function resolveLexicalComposerKeyboardAction(params) {
 	};
 	return { type: "noop" };
 }
-var LexicalComposerHandleOwner = class {
-	constructor(params) {
-		this.params = params;
-		this.insertInputSurfaceItem = (item, triggerSpecs = [CHAT_INPUT_SURFACE_SLASH_TRIGGER_SPEC]) => {
-			this.params.onInputSurfaceItemSelect?.(item);
-			this.params.publishSnapshot(insertInputSurfaceItemIntoChatComposer({
-				item,
-				nodes: this.params.optionsReader().nodes,
-				selection: this.params.optionsReader().selection,
-				triggerSpecs
-			}), { focusAfterSync: true });
-		};
-		this.insertSlashItem = (item) => {
-			this.insertInputSurfaceItem(item);
-		};
-		this.insertFileToken = (tokenKey, label) => {
-			this.params.publishSnapshot(insertFileTokenIntoChatComposer({
-				label,
-				nodes: this.params.optionsReader().nodes,
-				selection: this.params.optionsReader().selection,
-				tokenKey
-			}), { focusAfterSync: true });
-		};
-		this.insertFileTokens = (tokens) => {
-			let nextNodes = this.params.optionsReader().nodes;
-			let nextSelection = this.params.optionsReader().selection;
-			for (const token of tokens) {
-				const snapshot = insertFileTokenIntoChatComposer({
-					label: token.label,
-					nodes: nextNodes,
-					selection: nextSelection,
-					tokenKey: token.tokenKey
-				});
-				nextNodes = snapshot.nodes;
-				nextSelection = snapshot.selection;
-			}
-			this.params.publishSnapshot({
-				nodes: nextNodes,
-				selection: nextSelection
-			}, { focusAfterSync: true });
-		};
-		this.focusComposer = () => {
-			this.params.focusComposer();
-		};
-		this.focusComposerAtEnd = (nodes) => {
-			this.params.focusComposerAtEnd(nodes);
-		};
-		this.syncSelectedSkills = (nextKeys, options) => {
-			this.params.publishSnapshot(syncSelectedSkillsIntoChatComposer({
-				nextKeys,
-				nodes: this.params.optionsReader().nodes,
-				options,
-				selection: this.params.optionsReader().selection
-			}), { focusAfterSync: true });
-		};
-	}
-};
-function createLexicalComposerHandle(params) {
-	return new LexicalComposerHandleOwner(params);
-}
 function getChatComposerContentSignature(nodes) {
 	return JSON.stringify(nodes.map((node) => node.type === "text" ? {
 		text: node.text,
@@ -1887,12 +1826,13 @@ function handleLexicalComposerBeforeInput(params) {
 	} });
 }
 function handleLexicalComposerCompositionEnd(params) {
-	const { data, fallbackSnapshot, publishSnapshot, snapshotReader } = params;
+	const { compositionStartSnapshot, data, fallbackSnapshot, publishSnapshot, snapshotReader } = params;
 	const currentSnapshot = snapshotReader();
 	const editorSnapshot = fallbackSnapshot();
-	publishSnapshot(getChatComposerContentSignature(editorSnapshot.nodes) !== getChatComposerContentSignature(currentSnapshot.nodes) ? editorSnapshot : data.length > 0 ? replaceChatComposerSelectionWithText({
-		nodes: currentSnapshot.nodes,
-		selection: currentSnapshot.selection,
+	const baseSnapshot = compositionStartSnapshot ?? currentSnapshot;
+	publishSnapshot(getChatComposerContentSignature(editorSnapshot.nodes) !== getChatComposerContentSignature(baseSnapshot.nodes) ? editorSnapshot : data.length > 0 ? replaceChatComposerSelectionWithText({
+		nodes: baseSnapshot.nodes,
+		selection: baseSnapshot.selection,
 		text: data
 	}) : editorSnapshot, {
 		forcePublish: true,
@@ -1941,182 +1881,314 @@ function handleLexicalComposerKeyboardCommand(params) {
 	}
 }
 //#endregion
+//#region src/components/chat/ui/chat-input-bar/lexical/owners/chat-composer-lexical-owner.ts
+function createMutableRef(value) {
+	return { current: value };
+}
+function getChatComposerDocumentLength(nodes) {
+	return nodes.reduce((cursor, node) => cursor + (node.type === "text" ? node.text.length : 1), 0);
+}
+var ChatComposerLexicalOwner = class {
+	constructor() {
+		this.isApplyingExternalUpdateRef = createMutableRef(false);
+		this.isComposingRef = createMutableRef(false);
+		this.pendingOwnerSignatureRef = createMutableRef(null);
+		this.pendingSelectionRef = createMutableRef(null);
+		this.selectionRef = createMutableRef(null);
+		this.shouldFocusAfterSyncRef = createMutableRef(false);
+		this.compositionStartSnapshotRef = createMutableRef(null);
+		this.editorSignatureRef = createMutableRef("");
+		this.lastPublishedSignatureRef = createMutableRef("");
+		this.pendingInputSurfaceReasonRef = createMutableRef(null);
+		this.editor = null;
+		this.runtime = null;
+		this.configureRuntime = (runtime) => {
+			this.runtime = runtime;
+		};
+		this.bindEditor = (editor) => {
+			this.editor = editor;
+			return () => {
+				if (this.editor === editor) this.editor = null;
+			};
+		};
+		this.registerEditorListeners = (editor) => {
+			return mergeRegister(editor.registerUpdateListener(({ editorState }) => {
+				const runtime = this.getRuntime();
+				this.handleEditorUpdate(editorState, runtime.callbacks);
+			}), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+				const runtime = this.getRuntime();
+				this.handleSelectionChange(editor, runtime.callbacks);
+				return false;
+			}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(BLUR_COMMAND, () => {
+				this.getRuntime().callbacks.onInputSurfaceOpenChange?.(false);
+				return false;
+			}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(KEY_DOWN_COMMAND, (event) => {
+				const runtime = this.getRuntime();
+				return this.handleKeyDown({
+					actions: runtime.actions,
+					callbacks: runtime.callbacks,
+					event,
+					fallbackNodes: runtime.fallbackNodes
+				});
+			}, COMMAND_PRIORITY_HIGH));
+		};
+		this.syncExternalState = (editor, nodes) => {
+			if (this.isComposingRef.current) return;
+			const nextSignature = getChatComposerNodesSignature(nodes);
+			const pendingSelection = this.pendingSelectionRef.current;
+			const pendingOwnerSignature = this.pendingOwnerSignatureRef.current;
+			if (pendingOwnerSignature) {
+				if (nextSignature === pendingOwnerSignature) this.pendingOwnerSignatureRef.current = null;
+				else if (nextSignature !== this.editorSignatureRef.current) return;
+			}
+			const shouldSyncDocument = nextSignature !== this.editorSignatureRef.current;
+			if (!shouldSyncDocument && !pendingSelection) return;
+			this.startApplyingExternalUpdate();
+			if (shouldSyncDocument) {
+				syncLexicalEditorFromChatComposerState(editor, nodes, pendingSelection);
+				this.editorSignatureRef.current = nextSignature;
+				this.lastPublishedSignatureRef.current = nextSignature;
+			} else if (pendingSelection) syncLexicalSelectionFromChatComposerSelection(editor, pendingSelection);
+			if (pendingSelection) {
+				this.selectionRef.current = pendingSelection;
+				this.pendingSelectionRef.current = null;
+			}
+			if (this.shouldFocusAfterSyncRef.current) {
+				this.shouldFocusAfterSyncRef.current = false;
+				const targetSelection = this.selectionRef.current;
+				editor.focus(() => {
+					if (targetSelection) syncLexicalSelectionFromChatComposerSelection(editor, targetSelection);
+				});
+			}
+		};
+		this.publishSnapshot = (snapshot, callbacks, options) => {
+			this.selectionRef.current = snapshot.selection;
+			this.pendingSelectionRef.current = snapshot.selection;
+			if (options?.focusAfterSync) this.shouldFocusAfterSyncRef.current = true;
+			const signature = getChatComposerNodesSignature(snapshot.nodes);
+			const { editor } = this;
+			this.pendingOwnerSignatureRef.current = signature;
+			if (editor) {
+				this.startApplyingExternalUpdate();
+				syncLexicalEditorFromChatComposerState(editor, snapshot.nodes, snapshot.selection);
+				this.editorSignatureRef.current = signature;
+			}
+			callbacks.onInputSurfaceSnapshotChange?.(snapshot.nodes, snapshot.selection, options?.inputSurfaceReason ?? { type: "programmatic" });
+			if (options?.forcePublish || signature !== this.lastPublishedSignatureRef.current) {
+				this.lastPublishedSignatureRef.current = signature;
+				callbacks.onNodesChange(snapshot.nodes);
+			}
+		};
+		this.focusComposer = () => {
+			const { editor } = this;
+			if (!editor) return;
+			editor.getRootElement()?.focus({ preventScroll: true });
+			const targetSelection = this.selectionRef.current;
+			if (targetSelection) syncLexicalSelectionFromChatComposerSelection(editor, targetSelection);
+			editor.focus();
+		};
+		this.focusComposerAtEnd = (nodes) => {
+			const { editor } = this;
+			if (!editor) return;
+			const end = getChatComposerDocumentLength(nodes ?? readChatComposerSnapshotFromEditorState(editor.getEditorState()).nodes);
+			const targetSelection = {
+				start: end,
+				end
+			};
+			this.selectionRef.current = targetSelection;
+			this.pendingSelectionRef.current = targetSelection;
+			editor.getRootElement()?.focus({ preventScroll: true });
+			if (nodes) {
+				this.startApplyingExternalUpdate();
+				const signature = getChatComposerNodesSignature(nodes);
+				syncLexicalEditorFromChatComposerState(editor, nodes, targetSelection);
+				this.editorSignatureRef.current = signature;
+				this.lastPublishedSignatureRef.current = signature;
+			} else syncLexicalSelectionFromChatComposerSelection(editor, targetSelection);
+			editor.focus(() => {
+				syncLexicalSelectionFromChatComposerSelection(editor, targetSelection);
+			});
+		};
+		this.readComposerSnapshot = (fallbackNodes) => {
+			const { editor } = this;
+			if (!editor) return {
+				nodes: fallbackNodes,
+				selection: this.selectionRef.current
+			};
+			const snapshot = readChatComposerSnapshotFromEditorState(editor.getEditorState());
+			this.selectionRef.current = snapshot.selection;
+			return snapshot;
+		};
+		this.createHandle = () => {
+			const insertInputSurfaceItem = (item, triggerSpecs = [CHAT_INPUT_SURFACE_SLASH_TRIGGER_SPEC]) => {
+				const { callbacks } = this.getRuntime();
+				callbacks.onInputSurfaceItemSelect?.(item);
+				this.publishRuntimeSnapshot((snapshot) => insertInputSurfaceItemIntoChatComposer({
+					item,
+					nodes: snapshot.nodes,
+					selection: snapshot.selection,
+					triggerSpecs
+				}), { focusAfterSync: true });
+			};
+			return {
+				insertInputSurfaceItem,
+				insertSlashItem: (item) => {
+					insertInputSurfaceItem(item);
+				},
+				insertFileToken: (tokenKey, label) => {
+					this.publishRuntimeSnapshot((snapshot) => insertFileTokenIntoChatComposer({
+						label,
+						nodes: snapshot.nodes,
+						selection: snapshot.selection,
+						tokenKey
+					}), { focusAfterSync: true });
+				},
+				insertFileTokens: (tokens) => {
+					this.publishRuntimeSnapshot((snapshot) => tokens.reduce((nextSnapshot, token) => insertFileTokenIntoChatComposer({
+						label: token.label,
+						nodes: nextSnapshot.nodes,
+						selection: nextSnapshot.selection,
+						tokenKey: token.tokenKey
+					}), snapshot), { focusAfterSync: true });
+				},
+				focusComposer: this.focusComposer,
+				focusComposerAtEnd: this.focusComposerAtEnd,
+				syncSelectedSkills: (nextKeys, options) => {
+					this.publishRuntimeSnapshot((snapshot) => syncSelectedSkillsIntoChatComposer({
+						nextKeys,
+						nodes: snapshot.nodes,
+						options,
+						selection: snapshot.selection
+					}), { focusAfterSync: true });
+				}
+			};
+		};
+		this.handleBeforeInput = (params) => {
+			const { disabled, event } = params;
+			const { callbacks, fallbackNodes } = this.getRuntime();
+			handleLexicalComposerBeforeInput({
+				disabled,
+				event,
+				isComposing: this.isComposingRef.current,
+				publishSnapshot: (snapshot, options) => this.publishSnapshot(snapshot, callbacks, options),
+				snapshotReader: () => this.readComposerSnapshot(fallbackNodes)
+			});
+		};
+		this.handleCompositionStart = () => {
+			const { fallbackNodes } = this.getRuntime();
+			this.compositionStartSnapshotRef.current = this.readComposerSnapshot(fallbackNodes);
+			this.isComposingRef.current = true;
+		};
+		this.handleCompositionEnd = (params) => {
+			const { data } = params;
+			const { callbacks, fallbackNodes } = this.getRuntime();
+			this.isComposingRef.current = false;
+			handleLexicalComposerCompositionEnd({
+				compositionStartSnapshot: this.compositionStartSnapshotRef.current,
+				data,
+				fallbackSnapshot: () => this.readComposerSnapshot(fallbackNodes),
+				publishSnapshot: (snapshot, options) => this.publishSnapshot(snapshot, callbacks, options),
+				snapshotReader: () => this.readComposerSnapshot(fallbackNodes)
+			});
+			this.compositionStartSnapshotRef.current = null;
+		};
+		this.handleKeyDown = (params) => {
+			const { actions, callbacks, event, fallbackNodes } = params;
+			if (event.key.length === 1 && !event.isComposing && !event.altKey && !event.ctrlKey && !event.metaKey) this.pendingInputSurfaceReasonRef.current = {
+				type: "insert-text",
+				text: event.key
+			};
+			const snapshot = this.readComposerSnapshot(fallbackNodes);
+			if (callbacks.onInputSurfaceKeyDown?.(event)) return true;
+			return handleLexicalComposerKeyboardCommand({
+				actions,
+				nativeEvent: event,
+				publishSnapshot: (nextSnapshot, options) => this.publishSnapshot(nextSnapshot, callbacks, options),
+				snapshot
+			});
+		};
+		this.handleEditorUpdate = (editorState, callbacks) => {
+			const snapshot = readChatComposerSnapshotFromEditorState(editorState);
+			const signature = getChatComposerNodesSignature(snapshot.nodes);
+			this.editorSignatureRef.current = signature;
+			if (this.isApplyingExternalUpdateRef.current || this.isComposingRef.current) return;
+			this.selectionRef.current = snapshot.selection;
+			callbacks.onInputSurfaceSnapshotChange?.(snapshot.nodes, snapshot.selection, this.consumeInputSurfaceReason() ?? { type: "sync" });
+			if (signature === this.lastPublishedSignatureRef.current) return;
+			this.lastPublishedSignatureRef.current = signature;
+			callbacks.onNodesChange(snapshot.nodes);
+		};
+		this.handleSelectionChange = (editor, callbacks) => {
+			const snapshot = readChatComposerSnapshotFromEditorState(editor.getEditorState());
+			if (this.isComposingRef.current) return;
+			this.selectionRef.current = snapshot.selection;
+			callbacks.onInputSurfaceSnapshotChange?.(snapshot.nodes, snapshot.selection, { type: "selection" });
+		};
+		this.consumeInputSurfaceReason = () => {
+			const reason = this.pendingInputSurfaceReasonRef.current;
+			this.pendingInputSurfaceReasonRef.current = null;
+			return reason;
+		};
+		this.publishRuntimeSnapshot = (createSnapshot, options) => {
+			const { callbacks, fallbackNodes } = this.getRuntime();
+			this.publishSnapshot(createSnapshot(this.readComposerSnapshot(fallbackNodes)), callbacks, options);
+		};
+		this.startApplyingExternalUpdate = () => {
+			this.isApplyingExternalUpdateRef.current = true;
+			requestAnimationFrame(() => {
+				this.isApplyingExternalUpdateRef.current = false;
+			});
+		};
+		this.getRuntime = () => {
+			if (!this.runtime) throw new Error("ChatComposerLexicalOwner runtime has not been configured.");
+			return this.runtime;
+		};
+	}
+};
+//#endregion
 //#region src/components/chat/ui/chat-input-bar/lexical/chat-composer-plugins.tsx
-function ChatComposerBindingsPlugin({ disabled, editorRef, editorSignatureRef, isApplyingExternalUpdateRef, isComposingRef, lastPublishedSignatureRef, nodes, onBlur, consumeInputSurfaceReason, onKeyDown, onNodesChange, pendingSelectionRef, selectionRef, shouldFocusAfterSyncRef, syncInputSurfaceSnapshot }) {
+function ChatComposerBindingsPlugin({ disabled, nodes, owner }) {
 	const [editor] = useLexicalComposerContext();
 	useLayoutEffect(() => {
-		editorRef.current = editor;
-		return () => {
-			if (editorRef.current === editor) editorRef.current = null;
-		};
-	}, [editor, editorRef]);
+		return owner.bindEditor(editor);
+	}, [editor, owner]);
 	useLayoutEffect(() => {
 		editor.setEditable(!disabled);
-	}, [disabled, editor]);
-	useLayoutEffect(() => {
-		const nextSignature = getChatComposerNodesSignature(nodes);
-		const pendingSelection = pendingSelectionRef.current;
-		const shouldSyncDocument = nextSignature !== editorSignatureRef.current;
-		if (!shouldSyncDocument && !pendingSelection) return;
-		isApplyingExternalUpdateRef.current = true;
-		if (shouldSyncDocument) {
-			syncLexicalEditorFromChatComposerState(editor, nodes, pendingSelection);
-			editorSignatureRef.current = nextSignature;
-			lastPublishedSignatureRef.current = nextSignature;
-		} else if (pendingSelection) syncLexicalSelectionFromChatComposerSelection(editor, pendingSelection);
-		if (pendingSelection) {
-			selectionRef.current = pendingSelection;
-			pendingSelectionRef.current = null;
-		}
-		if (shouldFocusAfterSyncRef.current) {
-			shouldFocusAfterSyncRef.current = false;
-			const targetSelection = selectionRef.current;
-			editor.focus(() => {
-				if (targetSelection) syncLexicalSelectionFromChatComposerSelection(editor, targetSelection);
-			});
-		}
-		requestAnimationFrame(() => {
-			isApplyingExternalUpdateRef.current = false;
-		});
+		owner.syncExternalState(editor, nodes);
 	}, [
+		disabled,
 		editor,
-		editorSignatureRef,
-		isApplyingExternalUpdateRef,
-		lastPublishedSignatureRef,
 		nodes,
-		pendingSelectionRef,
-		selectionRef,
-		shouldFocusAfterSyncRef
+		owner
 	]);
 	useEffect(() => {
-		return mergeRegister(editor.registerUpdateListener(({ editorState }) => {
-			const snapshot = readChatComposerSnapshotFromEditorState(editorState);
-			const signature = getChatComposerNodesSignature(snapshot.nodes);
-			selectionRef.current = snapshot.selection;
-			editorSignatureRef.current = signature;
-			if (isApplyingExternalUpdateRef.current || isComposingRef.current) return;
-			syncInputSurfaceSnapshot(snapshot.nodes, snapshot.selection, consumeInputSurfaceReason() ?? { type: "sync" });
-			if (signature === lastPublishedSignatureRef.current) return;
-			lastPublishedSignatureRef.current = signature;
-			onNodesChange(snapshot.nodes);
-		}), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
-			const snapshot = readChatComposerSnapshotFromEditorState(editor.getEditorState());
-			selectionRef.current = snapshot.selection;
-			if (!isComposingRef.current) syncInputSurfaceSnapshot(snapshot.nodes, snapshot.selection, { type: "selection" });
-			return false;
-		}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(BLUR_COMMAND, () => {
-			onBlur();
-			return false;
-		}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(KEY_DOWN_COMMAND, (event) => onKeyDown(event), COMMAND_PRIORITY_HIGH));
-	}, [
-		editor,
-		editorSignatureRef,
-		isApplyingExternalUpdateRef,
-		isComposingRef,
-		lastPublishedSignatureRef,
-		onBlur,
-		consumeInputSurfaceReason,
-		onKeyDown,
-		onNodesChange,
-		selectionRef,
-		syncInputSurfaceSnapshot
-	]);
+		return owner.registerEditorListeners(editor);
+	}, [editor, owner]);
 	return null;
 }
 //#endregion
 //#region src/components/chat/ui/chat-input-bar/lexical/chat-input-bar-tokenized-composer.tsx
-function getChatComposerDocumentLength(nodes) {
-	return nodes.reduce((cursor, node) => cursor + (node.type === "text" ? node.text.length : 1), 0);
-}
 const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedComposer({ actions, disabled, nodes, onFilesAdd, onInputSurfaceItemSelect, onInputSurfaceKeyDown, onInputSurfaceOpenChange, onInputSurfaceSnapshotChange, onNodesChange, placeholder }, ref) {
-	const editorRef = useRef(null);
-	const selectionRef = useRef(null);
-	const pendingSelectionRef = useRef(null);
-	const shouldFocusAfterSyncRef = useRef(false);
-	const isComposingRef = useRef(false);
-	const isApplyingExternalUpdateRef = useRef(false);
-	const pendingInputSurfaceReasonRef = useRef(null);
-	const editorSignatureRef = useRef("");
-	const lastPublishedSignatureRef = useRef("");
-	const syncInputSurfaceSnapshot = useCallback((nodes, selection, reason) => {
-		onInputSurfaceSnapshotChange?.(nodes, selection, reason);
-	}, [onInputSurfaceSnapshotChange]);
-	const readCurrentNodes = useCallback(() => {
-		return nodes;
-	}, [nodes]);
-	const readCurrentSelection = useCallback(() => {
-		if (selectionRef.current) return selectionRef.current;
-		if (!editorRef.current) return null;
-		const snapshot = readChatComposerSnapshotFromEditorState(editorRef.current.getEditorState());
-		selectionRef.current = snapshot.selection;
-		return snapshot.selection;
-	}, []);
-	const publishSnapshot = useCallback((snapshot, options) => {
-		selectionRef.current = snapshot.selection;
-		pendingSelectionRef.current = snapshot.selection;
-		if (options?.focusAfterSync) shouldFocusAfterSyncRef.current = true;
-		const signature = getChatComposerNodesSignature(snapshot.nodes);
-		syncInputSurfaceSnapshot(snapshot.nodes, snapshot.selection, options?.inputSurfaceReason ?? { type: "programmatic" });
-		if (options?.forcePublish || signature !== lastPublishedSignatureRef.current) {
-			lastPublishedSignatureRef.current = signature;
-			onNodesChange(snapshot.nodes);
-		}
-	}, [onNodesChange, syncInputSurfaceSnapshot]);
-	const focusComposer = useCallback(() => {
-		const editor = editorRef.current;
-		if (!editor) return;
-		editor.getRootElement()?.focus({ preventScroll: true });
-		const targetSelection = selectionRef.current;
-		if (targetSelection) syncLexicalSelectionFromChatComposerSelection(editor, targetSelection);
-		editor.focus();
-	}, []);
-	const focusComposerAtEnd = useCallback((nodes) => {
-		const editor = editorRef.current;
-		if (!editor) return;
-		const end = getChatComposerDocumentLength(nodes ?? readChatComposerSnapshotFromEditorState(editor.getEditorState()).nodes);
-		const targetSelection = {
-			start: end,
-			end
-		};
-		selectionRef.current = targetSelection;
-		pendingSelectionRef.current = targetSelection;
-		editor.getRootElement()?.focus({ preventScroll: true });
-		if (nodes) {
-			isApplyingExternalUpdateRef.current = true;
-			const signature = getChatComposerNodesSignature(nodes);
-			syncLexicalEditorFromChatComposerState(editor, nodes, targetSelection);
-			editorSignatureRef.current = signature;
-			lastPublishedSignatureRef.current = signature;
-			requestAnimationFrame(() => {
-				isApplyingExternalUpdateRef.current = false;
-			});
-		} else syncLexicalSelectionFromChatComposerSelection(editor, targetSelection);
-		editor.focus(() => {
-			syncLexicalSelectionFromChatComposerSelection(editor, targetSelection);
-		});
-	}, []);
-	const readComposerSnapshot = useCallback(() => ({
-		nodes: readCurrentNodes(),
-		selection: readCurrentSelection()
-	}), [readCurrentNodes, readCurrentSelection]);
-	const consumeInputSurfaceReason = useCallback(() => {
-		const reason = pendingInputSurfaceReasonRef.current;
-		pendingInputSurfaceReasonRef.current = null;
-		return reason;
-	}, []);
-	useImperativeHandle(ref, () => createLexicalComposerHandle({
-		focusComposer,
-		focusComposerAtEnd,
+	const [owner] = useState(() => new ChatComposerLexicalOwner());
+	const ownerCallbacks = useMemo(() => ({
 		onInputSurfaceItemSelect,
-		optionsReader: readComposerSnapshot,
-		publishSnapshot
+		onInputSurfaceKeyDown,
+		onInputSurfaceOpenChange,
+		onInputSurfaceSnapshotChange,
+		onNodesChange
 	}), [
-		focusComposer,
-		focusComposerAtEnd,
 		onInputSurfaceItemSelect,
-		publishSnapshot,
-		readComposerSnapshot
+		onInputSurfaceKeyDown,
+		onInputSurfaceOpenChange,
+		onInputSurfaceSnapshotChange,
+		onNodesChange
 	]);
+	owner.configureRuntime({
+		actions,
+		callbacks: ownerCallbacks,
+		fallbackNodes: nodes
+	});
+	useImperativeHandle(ref, () => owner.createHandle(), [owner]);
 	return /* @__PURE__ */ jsxs(LexicalComposer, {
 		initialConfig: useMemo(() => ({
 			editable: !disabled,
@@ -2130,92 +2202,46 @@ const ChatInputBarTokenizedComposer = forwardRef(function ChatInputBarTokenizedC
 			},
 			theme: {}
 		}), [disabled, nodes]),
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: "px-3 py-2 sm:px-4 sm:py-2.5",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "min-h-11 sm:min-h-[60px]",
-					children: /* @__PURE__ */ jsx(PlainTextPlugin, {
-						contentEditable: /* @__PURE__ */ jsx(ContentEditable, {
-							className: "min-h-7 max-h-[188px] w-full overflow-y-auto whitespace-pre-wrap break-words bg-transparent py-0.5 text-sm leading-6 text-gray-800 outline-none",
-							onBeforeInput: (event) => {
-								handleLexicalComposerBeforeInput({
-									disabled,
-									event,
-									isComposing: isComposingRef.current,
-									publishSnapshot,
-									snapshotReader: readComposerSnapshot
-								});
-							},
-							onCompositionEnd: (event) => {
-								isComposingRef.current = false;
-								const nativeEvent = event.nativeEvent;
-								handleLexicalComposerCompositionEnd({
-									data: typeof nativeEvent.data === "string" ? nativeEvent.data : "",
-									fallbackSnapshot: () => {
-										const editor = editorRef.current;
-										return editor ? readChatComposerSnapshotFromEditorState(editor.getEditorState()) : readComposerSnapshot();
-									},
-									publishSnapshot,
-									snapshotReader: readComposerSnapshot
-								});
-							},
-							onCompositionStart: () => {
-								isComposingRef.current = true;
-							},
-							onPaste: (event) => {
-								const files = Array.from(event.clipboardData.files ?? []);
-								if (files.length > 0 && onFilesAdd) {
-									event.preventDefault();
-									onFilesAdd(files);
-								}
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "px-3 py-2 sm:px-4 sm:py-2.5",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "min-h-11 sm:min-h-[60px]",
+				children: /* @__PURE__ */ jsx(PlainTextPlugin, {
+					contentEditable: /* @__PURE__ */ jsx(ContentEditable, {
+						className: "min-h-7 max-h-[188px] w-full overflow-y-auto whitespace-pre-wrap break-words bg-transparent py-0.5 text-sm leading-6 text-foreground outline-none",
+						onBeforeInput: (event) => {
+							owner.handleBeforeInput({
+								disabled,
+								event
+							});
+						},
+						onCompositionEnd: (event) => {
+							const nativeEvent = event.nativeEvent;
+							owner.handleCompositionEnd({ data: typeof nativeEvent.data === "string" ? nativeEvent.data : "" });
+						},
+						onCompositionStart: () => {
+							owner.handleCompositionStart();
+						},
+						onPaste: (event) => {
+							const files = Array.from(event.clipboardData.files ?? []);
+							if (files.length > 0 && onFilesAdd) {
+								event.preventDefault();
+								onFilesAdd(files);
 							}
-						}),
-						placeholder: /* @__PURE__ */ jsx("div", {
-							className: "pointer-events-none absolute left-3 top-2 select-none text-sm leading-6 text-gray-400 sm:left-4 sm:top-2.5",
-							children: placeholder
-						}),
-						ErrorBoundary: LexicalErrorBoundary
-					})
+						}
+					}),
+					placeholder: /* @__PURE__ */ jsx("div", {
+						className: "pointer-events-none absolute left-3 top-2 select-none text-sm leading-6 text-muted-foreground/60 sm:left-4 sm:top-2.5",
+						children: placeholder
+					}),
+					ErrorBoundary: LexicalErrorBoundary
 				})
-			}),
-			/* @__PURE__ */ jsx(EditorRefPlugin, { editorRef }),
-			/* @__PURE__ */ jsx(ChatComposerBindingsPlugin, {
-				disabled,
-				editorRef,
-				editorSignatureRef,
-				isApplyingExternalUpdateRef,
-				isComposingRef,
-				lastPublishedSignatureRef,
-				nodes,
-				onBlur: () => {
-					onInputSurfaceOpenChange?.(false);
-				},
-				consumeInputSurfaceReason,
-				onKeyDown: (event) => {
-					if (event.key.length === 1 && !event.isComposing && !event.altKey && !event.ctrlKey && !event.metaKey) pendingInputSurfaceReasonRef.current = {
-						type: "insert-text",
-						text: event.key
-					};
-					const editor = editorRef.current;
-					if (!editor) return false;
-					const snapshot = readChatComposerSnapshotFromEditorState(editor.getEditorState());
-					selectionRef.current = snapshot.selection;
-					if (onInputSurfaceKeyDown?.(event)) return true;
-					return handleLexicalComposerKeyboardCommand({
-						actions,
-						nativeEvent: event,
-						publishSnapshot,
-						snapshot
-					});
-				},
-				onNodesChange,
-				pendingSelectionRef,
-				selectionRef,
-				shouldFocusAfterSyncRef,
-				syncInputSurfaceSnapshot
 			})
-		]
+		}), /* @__PURE__ */ jsx(ChatComposerBindingsPlugin, {
+			disabled,
+			nodes,
+			owner
+		})]
 	});
 });
 ChatInputBarTokenizedComposer.displayName = "LexicalChatInputBarTokenizedComposer";
@@ -2226,14 +2252,14 @@ function InputBarHint({ hint }) {
 	if (hint.loading) return /* @__PURE__ */ jsx("div", {
 		className: "px-4 pb-2",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2",
-			children: [/* @__PURE__ */ jsx("span", { className: "h-3 w-28 animate-pulse rounded bg-gray-200" }), /* @__PURE__ */ jsx("span", { className: "h-3 w-16 animate-pulse rounded bg-gray-200" })]
+			className: "inline-flex items-center gap-2 rounded-lg border border-border bg-muted px-3 py-2",
+			children: [/* @__PURE__ */ jsx("span", { className: "h-3 w-28 animate-pulse rounded bg-muted-foreground/20" }), /* @__PURE__ */ jsx("span", { className: "h-3 w-16 animate-pulse rounded bg-muted-foreground/20" })]
 		})
 	});
 	return /* @__PURE__ */ jsx("div", {
 		className: "px-4 pb-2",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: `inline-flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs ${hint.tone === "warning" ? "border-amber-200 bg-amber-50 text-amber-800" : "border-gray-200 bg-gray-50 text-gray-700"}`,
+			className: `inline-flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs ${hint.tone === "warning" ? "border-amber-200 bg-amber-50 text-amber-800" : "border-border bg-muted text-muted-foreground"}`,
 			children: [hint.text ? /* @__PURE__ */ jsx("span", { children: hint.text }) : null, hint.actionLabel && hint.onAction ? /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: hint.onAction,
@@ -2277,11 +2303,11 @@ const ChatInputBar = forwardRef(function ChatInputBar({ composer, hint, inputSur
 		focusComposerAtEnd: (nodes) => composerRef.current?.focusComposerAtEnd(nodes)
 	}), []);
 	return /* @__PURE__ */ jsx("div", {
-		className: surface === "embedded" ? "bg-transparent px-0 py-0" : "border-t border-gray-200/80 bg-white px-3 py-3 sm:px-4 sm:py-4",
+		className: surface === "embedded" ? "bg-transparent px-0 py-0" : "bg-background px-3 pb-3 pt-2 sm:px-4 sm:pb-4 sm:pt-2",
 		children: /* @__PURE__ */ jsx("div", {
 			className: "nextclaw-chat-input-bar-shell mx-auto w-full max-w-[min(1120px,100%)] [container:nextclaw-chat-input-bar/inline-size]",
 			children: /* @__PURE__ */ jsxs("div", {
-				className: "overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-card",
+				className: "overflow-hidden rounded-2xl border border-border bg-card shadow-card",
 				children: [
 					/* @__PURE__ */ jsx("div", {
 						className: "relative",
@@ -2318,19 +2344,19 @@ ChatInputBar.displayName = "ChatInputBar";
 function ChatMessageAvatar({ role }) {
 	if (role === "user") return /* @__PURE__ */ jsx("div", {
 		"data-testid": "chat-message-avatar-user",
-		className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-white shadow-sm",
+		className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm",
 		children: /* @__PURE__ */ jsx(User, { className: "h-4 w-4" })
 	});
 	if (role === "tool") return /* @__PURE__ */ jsx("div", {
 		"data-testid": "chat-message-avatar-tool",
-		className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-100 text-amber-700 shadow-sm",
+		className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-accent text-accent-foreground shadow-sm ring-1 ring-border",
 		children: /* @__PURE__ */ jsx(Wrench, { className: "h-4 w-4" })
 	});
 	return /* @__PURE__ */ jsx("div", {
 		"data-testid": "chat-message-avatar-assistant",
-		className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-b from-gray-700 to-gray-950 text-white shadow-md ring-1 ring-inset ring-white/20",
+		className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted text-foreground shadow-sm ring-1 ring-border",
 		children: /* @__PURE__ */ jsx(Bot, {
-			className: "h-[18px] w-[18px] text-white/95",
+			className: "h-[18px] w-[18px] text-current",
 			strokeWidth: 2.5
 		})
 	});
@@ -2343,14 +2369,14 @@ function resolveInlineTokenTone(kind) {
 	return "default";
 }
 function resolveInlineTokenBadgeClassName(tone, isUser) {
-	if (tone === "skill") return isUser ? "border-emerald-200/35 bg-emerald-400/18 text-emerald-50/95" : "border-emerald-200/70 bg-emerald-50 text-emerald-700";
-	if (tone === "panel_app") return isUser ? "border-sky-200/35 bg-sky-400/18 text-sky-50/95" : "border-sky-200/70 bg-sky-50 text-sky-700";
-	return isUser ? "border-white/30 bg-white/18 text-white" : "border-slate-200/80 bg-slate-100 text-slate-700";
+	if (tone === "skill") return isUser ? "border-primary-foreground/30 bg-primary-foreground/18 text-primary-foreground" : "border-border bg-accent text-accent-foreground";
+	if (tone === "panel_app") return isUser ? "border-primary-foreground/30 bg-primary-foreground/18 text-primary-foreground" : "border-border bg-accent text-accent-foreground";
+	return isUser ? "border-primary-foreground/30 bg-primary-foreground/18 text-primary-foreground" : "border-border bg-muted text-muted-foreground";
 }
 function resolveInlineTokenIconClassName(tone, isUser) {
-	if (tone === "skill") return isUser ? "text-emerald-100/90" : "text-emerald-600";
-	if (tone === "panel_app") return isUser ? "text-sky-100/90" : "text-sky-600";
-	return isUser ? "text-white/70" : "text-slate-500";
+	if (tone === "skill") return isUser ? "text-primary-foreground/70" : "text-muted-foreground";
+	if (tone === "panel_app") return isUser ? "text-primary-foreground/70" : "text-muted-foreground";
+	return isUser ? "text-primary-foreground/70" : "text-muted-foreground";
 }
 function renderInlineTokenIcon(tone) {
 	return tone === "panel_app" ? /* @__PURE__ */ jsx(AppWindow, {
@@ -2929,16 +2955,16 @@ function ChatMessageMarkdown({ text, role, texts, inline = false, inlineTokens,
 //#endregion
 //#region src/components/chat/ui/chat-message-list/chat-message-file/meta.ts
 const FILE_CATEGORY_TILE_CLASSES = {
-	archive: "border-amber-200/80 bg-amber-50 text-amber-700",
-	audio: "border-fuchsia-200/80 bg-fuchsia-50 text-fuchsia-700",
-	code: "border-cyan-200/80 bg-cyan-50 text-cyan-700",
-	data: "border-slate-200/80 bg-slate-50 text-slate-700",
-	document: "border-blue-200/80 bg-blue-50 text-blue-700",
-	generic: "border-slate-200/80 bg-slate-50 text-slate-700",
-	image: "border-emerald-200/80 bg-emerald-50 text-emerald-700",
-	pdf: "border-rose-200/80 bg-rose-50 text-rose-700",
-	sheet: "border-lime-200/80 bg-lime-50 text-lime-700",
-	video: "border-violet-200/80 bg-violet-50 text-violet-700"
+	archive: "border-border bg-muted text-muted-foreground",
+	audio: "border-border bg-muted text-muted-foreground",
+	code: "border-border bg-muted text-muted-foreground",
+	data: "border-border bg-muted text-muted-foreground",
+	document: "border-border bg-muted text-muted-foreground",
+	generic: "border-border bg-muted text-muted-foreground",
+	image: "border-border bg-muted text-muted-foreground",
+	pdf: "border-border bg-muted text-muted-foreground",
+	sheet: "border-border bg-muted text-muted-foreground",
+	video: "border-border bg-muted text-muted-foreground"
 };
 const CODE_EXTENSIONS = new Set([
 	"c",
@@ -3148,13 +3174,13 @@ function readFileCategoryLabel(category, texts) {
 }
 function renderMetaLine(categoryLabel, sizeLabel, isUser) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("mt-1 text-xs leading-5", isUser ? "text-white/70" : "text-slate-500"),
+		className: cn("mt-1 text-xs leading-5", isUser ? "text-primary-foreground/70" : "text-muted-foreground"),
 		children: sizeLabel ? `${categoryLabel} · ${sizeLabel}` : categoryLabel
 	});
 }
 function renderActionPill(label, isUser, isInteractive) {
 	return /* @__PURE__ */ jsx("span", {
-		className: cn("inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium", isInteractive ? isUser ? "border-white/14 bg-white/12 text-white" : "border-slate-200/80 bg-white text-slate-700" : isUser ? "border-white/10 bg-white/6 text-white/62" : "border-slate-200/70 bg-slate-100/80 text-slate-500"),
+		className: cn("inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium", isInteractive ? isUser ? "border-primary-foreground/14 bg-primary-foreground/12 text-primary-foreground" : "border-border bg-card text-foreground" : isUser ? "border-primary-foreground/10 bg-primary-foreground/6 text-primary-foreground/62" : "border-border bg-muted text-muted-foreground"),
 		children: label
 	});
 }
@@ -3163,16 +3189,16 @@ function renderActionLink(label, href, isUser) {
 		href,
 		target: "_blank",
 		rel: "noreferrer",
-		className: cn("inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium transition duration-200", isUser ? "border-white/14 bg-white/12 text-white hover:border-white/20 hover:bg-white/16" : "border-slate-200/80 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50"),
+		className: cn("inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium transition duration-200", isUser ? "border-primary-foreground/14 bg-primary-foreground/12 text-primary-foreground hover:border-primary-foreground/20 hover:bg-primary-foreground/16" : "border-border bg-card text-foreground hover:border-border-hover hover:bg-accent"),
 		children: label
 	});
 }
 function FileCategoryGlyph({ category, isUser }) {
 	const Icon = FILE_CATEGORY_ICONS[category];
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex h-14 w-14 shrink-0 items-center justify-center rounded-[1rem] border", isUser ? "border-white/12 bg-white/10 text-white" : FILE_CATEGORY_TILE_CLASSES[category]),
+		className: cn("flex h-14 w-14 shrink-0 items-center justify-center rounded-[1rem] border", isUser ? "border-primary-foreground/12 bg-primary-foreground/10 text-primary-foreground" : FILE_CATEGORY_TILE_CLASSES[category]),
 		children: /* @__PURE__ */ jsx(Icon, {
-			className: cn("h-7 w-7", isUser ? "text-white/92" : "text-current"),
+			className: cn("h-7 w-7", isUser ? "text-primary-foreground/92" : "text-current"),
 			strokeWidth: 2.2
 		})
 	});
@@ -3186,7 +3212,7 @@ function renderImagePreview(params) {
 		rel: "noreferrer",
 		className: "group block",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: cn("relative overflow-hidden rounded-[1rem]", isUser ? "ring-1 ring-white/10" : "bg-slate-100/80 ring-1 ring-slate-200/80"),
+			className: cn("relative overflow-hidden rounded-[1rem]", isUser ? "ring-1 ring-primary-foreground/10" : "bg-muted ring-1 ring-border"),
 			children: [/* @__PURE__ */ jsx("img", {
 				src: file.dataUrl,
 				alt: file.label,
@@ -3194,10 +3220,10 @@ function renderImagePreview(params) {
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "pointer-events-none absolute right-3 top-3 flex items-center gap-2",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: cn("inline-flex items-center rounded-full px-2 py-1 text-[10px] font-semibold tracking-[0.18em] text-white backdrop-blur-sm", isUser ? "bg-slate-950/36" : "bg-slate-950/58"),
+					className: cn("inline-flex items-center rounded-full px-2 py-1 text-[10px] font-semibold tracking-[0.18em] text-white backdrop-blur-sm", isUser ? "bg-black/36" : "bg-black/58"),
 					children: categoryLabel
 				}), sizeLabel ? /* @__PURE__ */ jsx("span", {
-					className: cn("inline-flex items-center rounded-full px-2 py-1 text-[10px] font-medium text-white/92 backdrop-blur-sm", isUser ? "bg-slate-950/28" : "bg-slate-950/46"),
+					className: cn("inline-flex items-center rounded-full px-2 py-1 text-[10px] font-medium text-white/92 backdrop-blur-sm", isUser ? "bg-black/28" : "bg-black/46"),
 					children: sizeLabel
 				}) : null]
 			})]
@@ -3251,7 +3277,7 @@ function renderInlineMediaCard(params) {
 					...mediaMimeType ? { type: mediaMimeType } : {}
 				})
 			}) : /* @__PURE__ */ jsx("div", {
-				className: cn("overflow-hidden rounded-[1rem] border", isUser ? "border-white/10 bg-slate-950/26" : "border-slate-200/80 bg-slate-100/80"),
+				className: cn("overflow-hidden rounded-[1rem] border", isUser ? "border-primary-foreground/10 bg-black/26" : "border-border bg-muted"),
 				children: /* @__PURE__ */ jsx("video", {
 					controls: true,
 					preload: "metadata",
@@ -3275,7 +3301,7 @@ function ChatMessageFile({ file, isUser = false, texts }) {
 	const isInteractive = Boolean(file.dataUrl);
 	const actionLabel = isInteractive ? texts?.attachmentOpenLabel ?? "Open" : texts?.attachmentAttachedLabel ?? "Attached";
 	const categoryLabel = readFileCategoryLabel(category, texts);
-	const shellClasses = cn("block overflow-hidden rounded-[1.25rem] border transition duration-200", isUser ? "border-white/12 bg-white/10 text-white" : "border-slate-200/80 bg-white/95 text-slate-900", isInteractive && (isUser ? "hover:border-white/18 hover:bg-white/13" : "hover:border-slate-300 hover:bg-white"));
+	const shellClasses = cn("block overflow-hidden rounded-[1.25rem] border transition duration-200", isUser ? "border-primary-foreground/12 bg-primary-foreground/10 text-primary-foreground" : "border-border bg-card text-card-foreground", isInteractive && (isUser ? "hover:border-primary-foreground/18 hover:bg-primary-foreground/13" : "hover:border-border-hover hover:bg-accent"));
 	if (renderAsImage) return renderImagePreview({
 		file,
 		categoryLabel,
@@ -3431,14 +3457,14 @@ function ChatReasoningBlock({ label, text, isUser, isInProgress }) {
 		className: "mt-2",
 		open: isOpen,
 		children: [/* @__PURE__ */ jsx("summary", {
-			className: cn("cursor-pointer text-xs", isUser ? "text-primary-100" : "text-gray-500"),
+			className: cn("cursor-pointer text-xs", isUser ? "text-primary-100" : "text-muted-foreground"),
 			onClick: onSummaryClick,
 			children: displayLabel
 		}), /* @__PURE__ */ jsx("div", {
 			ref: scrollRef,
 			onScroll,
 			"data-reasoning-scroll": "true",
-			className: cn("mt-2 w-fit max-w-[500px] max-h-56 overflow-y-auto rounded-lg custom-scrollbar-amber", isUser ? "bg-primary-700/60" : "bg-gray-100"),
+			className: cn("mt-2 w-fit max-w-[500px] max-h-56 overflow-y-auto rounded-lg custom-scrollbar", isUser ? "bg-primary/70" : "bg-muted"),
 			children: /* @__PURE__ */ jsx("pre", {
 				className: "min-w-0 whitespace-pre-wrap break-all p-2 text-[11px]",
 				children: text
@@ -3450,13 +3476,13 @@ function ChatReasoningBlock({ label, text, isUser, isInProgress }) {
 //#region src/components/chat/ui/chat-message-list/tool-card/tool-card-root.tsx
 function ToolCardRoot({ children, className }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("my-2 rounded-lg border border-amber-200/50 bg-amber-100/30 shadow-sm overflow-hidden text-[12px]", "w-[280px] sm:w-[360px] md:w-[480px] min-w-full max-w-full transition-all flex flex-col", className),
+		className: cn("my-2 rounded-lg border border-border bg-card shadow-sm overflow-hidden text-[12px] text-card-foreground", "w-[280px] sm:w-[360px] md:w-[480px] min-w-full max-w-full transition-all flex flex-col", className),
 		children
 	});
 }
 function ToolCardContent({ children, className }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("border-t border-amber-200/15 bg-amber-50/50 px-3 pt-1 pb-2 w-full overflow-hidden", className),
+		className: cn("border-t border-border bg-muted/35 px-3 pt-1 pb-2 w-full overflow-hidden", className),
 		children
 	});
 }
@@ -3464,22 +3490,22 @@ function ToolCardContent({ children, className }) {
 //#region src/components/chat/ui/chat-message-list/tool-card/tool-card-status.tsx
 const STATUS_STYLES = {
 	running: {
-		text: "text-amber-500/80",
+		text: "text-primary/70",
 		icon: Loader2,
 		spin: true
 	},
 	success: {
-		text: "text-amber-500/80",
+		text: "text-primary/70",
 		icon: Check,
 		spin: false
 	},
 	error: {
-		text: "text-amber-500/80",
+		text: "text-destructive",
 		icon: AlertTriangle,
 		spin: false
 	},
 	cancelled: {
-		text: "text-amber-500/80",
+		text: "text-muted-foreground",
 		icon: Minus,
 		spin: false
 	}
@@ -3501,12 +3527,12 @@ function resolveToolCardActionView(action) {
 	if (action.kind === "show-content") return {
 		icon: Eye,
 		label: action.label,
-		toneClassName: "border-sky-200/80 bg-white/85 text-sky-800 hover:bg-sky-50 focus-visible:ring-sky-300"
+		toneClassName: "border-border bg-card text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:ring-primary/35"
 	};
 	return {
 		icon: ArrowUpRight,
 		label: action.label ?? (action.sessionKind === "child" ? "Open child session" : "Open session"),
-		toneClassName: "border-amber-200/80 bg-white/80 text-amber-800 hover:bg-amber-50 focus-visible:ring-amber-300"
+		toneClassName: "border-border bg-card text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:ring-primary/35"
 	};
 }
 function ToolCardActionButton({ action, onAction }) {
@@ -3542,12 +3568,12 @@ function ToolCardActionButton({ action, onAction }) {
 function ToolCardHeader({ card, icon: Icon, expanded, canExpand, hideSummary = false, actionSlot, onToggle }) {
 	const summaryPart = hideSummary ? "" : card.summary?.replace(/^(command|path|args|query|input):\s*/i, "") ?? "";
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex items-center gap-3 px-3 py-2.5 transition-colors bg-transparent", canExpand ? "cursor-pointer hover:bg-amber-100/30" : ""),
+		className: cn("flex items-center gap-3 px-3 py-2.5 transition-colors bg-transparent", canExpand ? "cursor-pointer hover:bg-accent/70" : ""),
 		onClick: onToggle,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden font-mono text-amber-950/80",
+			className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden font-mono text-foreground",
 			children: [/* @__PURE__ */ jsx(Icon, {
-				className: "h-4 w-4 text-amber-600/80 shrink-0",
+				className: "h-4 w-4 text-primary/70 shrink-0",
 				strokeWidth: 3
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden",
@@ -3555,10 +3581,10 @@ function ToolCardHeader({ card, icon: Icon, expanded, canExpand, hideSummary = f
 					className: "font-bold shrink-0 tracking-tight",
 					children: card.toolName
 				}), summaryPart && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-					className: "text-amber-300 font-bold select-none shrink-0",
+					className: "text-muted-foreground/45 font-bold select-none shrink-0",
 					children: "›"
 				}), /* @__PURE__ */ jsx("span", {
-					className: "block min-w-0 flex-1 truncate font-normal",
+					className: "block min-w-0 flex-1 truncate font-normal text-muted-foreground",
 					title: summaryPart,
 					children: summaryPart
 				})] })]
@@ -3569,10 +3595,10 @@ function ToolCardHeader({ card, icon: Icon, expanded, canExpand, hideSummary = f
 				actionSlot,
 				/* @__PURE__ */ jsx(ToolStatusLabel, { card }),
 				canExpand && (expanded ? /* @__PURE__ */ jsx(ChevronDown, {
-					className: "h-4 w-4 text-amber-400/80",
+					className: "h-4 w-4 text-muted-foreground",
 					strokeWidth: 3
 				}) : /* @__PURE__ */ jsx(ChevronRight, {
-					className: "h-4 w-4 text-amber-400/80",
+					className: "h-4 w-4 text-muted-foreground",
 					strokeWidth: 3
 				}))
 			]
@@ -3616,12 +3642,12 @@ function readCodeColumnWidth(block) {
 function getLineNumberTone(line) {
 	if (line.kind === "remove") return "border-r border-rose-200 bg-rose-50 text-rose-700";
 	if (line.kind === "add") return "border-r border-emerald-200 bg-emerald-50 text-emerald-700";
-	return "border-r border-stone-200 bg-stone-100 text-stone-500";
+	return "border-r border-border bg-muted text-muted-foreground";
 }
 function getCodeRowTone(line) {
 	if (line.kind === "remove") return "bg-rose-50 text-rose-950";
 	if (line.kind === "add") return "bg-emerald-50 text-emerald-950";
-	return "bg-white text-amber-950/80";
+	return "bg-card text-foreground";
 }
 function FileOperationLineNumberCell({ layout, line, lineNumberColumnWidth }) {
 	return /* @__PURE__ */ jsx("span", {
@@ -3659,7 +3685,7 @@ function FileOperationWorkspaceSurface({ block }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-file-code-surface": "true",
 		"data-file-code-surface-layout": "workspace",
-		className: "flex h-full min-h-full min-w-full bg-white",
+		className: "flex h-full min-h-full min-w-full bg-card",
 		children: [showLineNumbers ? /* @__PURE__ */ jsxs("div", {
 			"data-file-code-gutter": "true",
 			style: {
@@ -3671,10 +3697,10 @@ function FileOperationWorkspaceSurface({ block }) {
 				layout: "workspace",
 				line,
 				lineNumberColumnWidth
-			}, readLineKey("gutter", line, index))), /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 border-r border-stone-200 bg-stone-100" })]
+			}, readLineKey("gutter", line, index))), /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 border-r border-border bg-muted" })]
 		}) : null, /* @__PURE__ */ jsxs("div", {
 			"data-file-code-canvas": "true",
-			className: "flex h-full min-h-full min-w-0 flex-1 flex-col bg-white",
+			className: "flex h-full min-h-full min-w-0 flex-1 flex-col bg-card",
 			children: [/* @__PURE__ */ jsx("div", {
 				"data-file-code-stack": "true",
 				className: "min-w-full",
@@ -3684,7 +3710,7 @@ function FileOperationWorkspaceSurface({ block }) {
 					className: FILE_ROW_CLASS_NAME,
 					children: /* @__PURE__ */ jsx(FileOperationCodeCell, { line })
 				}, readLineKey("code", line, index)))
-			}), /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 bg-white" })]
+			}), /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 bg-card" })]
 		})]
 	});
 }
@@ -3697,7 +3723,7 @@ function FileOperationCodeSurface({ block, layout = "compact" }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-file-code-surface": "true",
 		"data-file-code-surface-layout": "compact",
-		className: "overflow-x-auto custom-scrollbar-amber bg-white",
+		className: "overflow-x-auto custom-scrollbar bg-card",
 		children: /* @__PURE__ */ jsx("div", {
 			"data-file-code-stack": "true",
 			className: "min-w-full",
@@ -3733,7 +3759,7 @@ function readFileOperationContentVersion(block) {
 function getCaptionTone(part) {
 	if (/^\+\d+$/.test(part)) return "text-emerald-700";
 	if (/^-\d+$/.test(part)) return "text-rose-700";
-	return "text-stone-500";
+	return "text-muted-foreground";
 }
 function renderCaption(caption) {
 	const parts = caption.split("·").map((part) => part.trim()).filter((part) => /^\+\d+$/.test(part) || /^-\d+$/.test(part));
@@ -3741,7 +3767,7 @@ function renderCaption(caption) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex shrink-0 items-center gap-x-1 whitespace-nowrap text-[10px] font-medium uppercase tracking-[0.08em]",
 		children: parts.map((part, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 ? /* @__PURE__ */ jsx("span", {
-			className: "text-stone-300",
+			className: "text-muted-foreground/45",
 			children: "·"
 		}) : null, /* @__PURE__ */ jsx("span", {
 			className: cn(getCaptionTone(part)),
@@ -3777,7 +3803,7 @@ function StickyFileOperationScrollArea({ children, contentVersion, resetKey, cla
 		ref: scrollRef,
 		onScroll,
 		"data-file-scroll-kind": scrollKind,
-		className: cn("overflow-y-auto bg-white custom-scrollbar-amber", className),
+		className: cn("overflow-y-auto bg-card custom-scrollbar", className),
 		children
 	});
 }
@@ -3790,10 +3816,10 @@ function FileOperationBlock({ block, showPathRow, isFirst, onFileOpen }) {
 		onFileOpen(buildFileOpenAction(block));
 	};
 	return /* @__PURE__ */ jsxs("section", {
-		className: cn("overflow-hidden bg-white", !isFirst && "border-t border-stone-200/80"),
+		className: cn("overflow-hidden bg-card", !isFirst && "border-t border-border"),
 		children: [
 			showMetaRow ? /* @__PURE__ */ jsxs("div", {
-				className: cn("flex items-center justify-between gap-4 border-b border-stone-200/80 px-4 text-stone-700", showPathRow ? "py-2" : "py-1.5"),
+				className: cn("flex items-center justify-between gap-4 border-b border-border px-4 text-muted-foreground", showPathRow ? "py-2" : "py-1.5"),
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "min-w-0 flex-1",
 					children: showPathRow ? /* @__PURE__ */ jsx(TooltipProvider, {
@@ -3803,7 +3829,7 @@ function FileOperationBlock({ block, showPathRow, isFirst, onFileOpen }) {
 							children: /* @__PURE__ */ jsx("button", {
 								type: "button",
 								onClick: handlePathClick,
-								className: cn("w-full truncate whitespace-nowrap text-left font-mono text-[12px] font-medium text-stone-700", onFileOpen && "transition-colors hover:text-amber-900 hover:underline"),
+								className: cn("w-full truncate whitespace-nowrap text-left font-mono text-[12px] font-medium text-foreground", onFileOpen && "transition-colors hover:text-primary hover:underline"),
 								title: block.path,
 								children: block.path
 							})
@@ -3827,15 +3853,15 @@ function FileOperationBlock({ block, showPathRow, isFirst, onFileOpen }) {
 				className: "max-h-72",
 				scrollKind: "raw",
 				children: /* @__PURE__ */ jsx("div", {
-					className: "overflow-x-auto custom-scrollbar-amber",
+					className: "overflow-x-auto custom-scrollbar",
 					children: /* @__PURE__ */ jsx("pre", {
-						className: "min-w-max whitespace-pre bg-white px-4 py-2 font-mono text-[11px] leading-5 text-amber-950/80",
+						className: "min-w-max whitespace-pre bg-card px-4 py-2 font-mono text-[11px] leading-5 text-foreground",
 						children: block.rawText
 					})
 				})
 			}) : null,
 			block.truncated && !previewBlock ? /* @__PURE__ */ jsx("div", {
-				className: "border-t border-stone-200/85 bg-stone-50 px-4 py-2 text-[10px] text-stone-500",
+				className: "border-t border-border bg-muted px-4 py-2 text-[10px] text-muted-foreground",
 				children: "Showing a shortened diff preview."
 			}) : null
 		]
@@ -3846,7 +3872,7 @@ function ToolCardFileOperationContent({ card, className, onFileOpen }) {
 	const output = card.output?.trim() ?? "";
 	if (blocks.length === 0 && !output) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("overflow-hidden bg-white", className),
+		className: cn("overflow-hidden bg-card", className),
 		children: [blocks.map((block, index) => {
 			return /* @__PURE__ */ jsx(FileOperationBlock, {
 				block,
@@ -3857,12 +3883,12 @@ function ToolCardFileOperationContent({ card, className, onFileOpen }) {
 		}), output ? /* @__PURE__ */ jsx(StickyFileOperationScrollArea, {
 			resetKey: `output:${card.toolName}:${card.summary ?? "none"}`,
 			contentVersion: output,
-			className: cn("max-h-56", blocks.length > 0 && "border-t border-stone-200/80"),
+			className: cn("max-h-56", blocks.length > 0 && "border-t border-border"),
 			scrollKind: "output",
 			children: /* @__PURE__ */ jsx("div", {
-				className: "overflow-x-auto custom-scrollbar-amber",
+				className: "overflow-x-auto custom-scrollbar",
 				children: /* @__PURE__ */ jsx("pre", {
-					className: "min-w-max whitespace-pre bg-white px-4 py-2 font-mono text-[11px] leading-5 text-amber-950/80",
+					className: "min-w-max whitespace-pre bg-card px-4 py-2 font-mono text-[11px] leading-5 text-foreground",
 					children: output
 				})
 			})
@@ -3978,16 +4004,16 @@ function useToolCardExpandedState({ canExpand, isRunning, autoExpandWhileRunning
 function GenericToolSection({ label, tone, children }) {
 	const style = {
 		input: {
-			shell: "border-stone-200/80 bg-stone-50/90",
-			header: "border-stone-200/80 bg-stone-100/85 text-stone-500",
-			dot: "bg-stone-400/80",
-			body: "text-stone-700"
+			shell: "border-border bg-card",
+			header: "border-border bg-muted/55 text-muted-foreground",
+			dot: "bg-muted-foreground/60",
+			body: "text-foreground"
 		},
 		output: {
-			shell: "border-amber-200/70 bg-white/90",
-			header: "border-amber-200/70 bg-amber-50/90 text-amber-700",
-			dot: "bg-amber-500/80",
-			body: "text-amber-950/80"
+			shell: "border-border bg-card",
+			header: "border-border bg-muted/55 text-muted-foreground",
+			dot: "bg-primary/70",
+			body: "text-foreground"
 		},
 		error: {
 			shell: "border-rose-200/80 bg-rose-50/85",
@@ -4004,7 +4030,7 @@ function GenericToolSection({ label, tone, children }) {
 		}), /* @__PURE__ */ jsx("div", {
 			className: "w-full overflow-hidden",
 			children: /* @__PURE__ */ jsx("pre", {
-				className: cn("w-full max-w-full min-w-0 max-h-64 overflow-x-auto overflow-y-auto px-3 py-2.5 font-mono text-[12px] leading-relaxed whitespace-pre custom-scrollbar-amber", style.body),
+				className: cn("w-full max-w-full min-w-0 max-h-64 overflow-x-auto overflow-y-auto px-3 py-2.5 font-mono text-[12px] leading-relaxed whitespace-pre custom-scrollbar", style.body),
 				children
 			})
 		})]
@@ -4029,23 +4055,23 @@ function TerminalExecutionView({ card }) {
 		canExpand: output.trim().length > 0 || isRunning,
 		onToggle
 	}), expanded && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-		className: "px-3 pb-2 font-mono w-full max-h-48 overflow-y-auto custom-scrollbar-amber min-h-0 text-[12px]",
+		className: "px-3 pb-2 font-mono w-full max-h-48 overflow-y-auto custom-scrollbar min-h-0 text-[12px]",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex items-start gap-2 leading-relaxed",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "text-amber-500/50 font-medium shrink-0 select-none mt-[1px]",
+				className: "text-primary/55 font-medium shrink-0 select-none mt-[1px]",
 				children: "$"
 			}), /* @__PURE__ */ jsx("div", {
 				className: "flex-1 min-w-0",
 				children: commandPart ? /* @__PURE__ */ jsxs("div", {
-					className: "text-amber-950/80 break-words whitespace-pre-wrap tracking-tight font-medium inline-block",
-					children: [commandPart, isRunning && !output && /* @__PURE__ */ jsx("span", { className: "inline-block w-1.5 h-3 ml-1 bg-amber-500/60 animate-pulse align-middle" })]
-				}) : /* @__PURE__ */ jsx("div", { className: "h-3 w-32 bg-amber-200/30 rounded animate-pulse mt-2" })
+					className: "text-foreground break-words whitespace-pre-wrap tracking-tight font-medium inline-block",
+					children: [commandPart, isRunning && !output && /* @__PURE__ */ jsx("span", { className: "inline-block w-1.5 h-3 ml-1 bg-primary/60 animate-pulse align-middle" })]
+				}) : /* @__PURE__ */ jsx("div", { className: "h-3 w-32 bg-muted rounded animate-pulse mt-2" })
 			})]
 		})
 	}), output && /* @__PURE__ */ jsx(ToolCardContent, { children: /* @__PURE__ */ jsxs("pre", {
-		className: "font-mono text-[12px] text-amber-950/70 whitespace-pre-wrap break-all w-full max-w-full max-h-64 overflow-y-auto overflow-x-hidden min-w-0 custom-scrollbar-amber leading-relaxed px-0",
-		children: [output, isRunning && /* @__PURE__ */ jsx("span", { className: "inline-block w-1.5 h-3 ml-1 bg-amber-500/60 animate-pulse align-middle" })]
+		className: "font-mono text-[12px] text-muted-foreground whitespace-pre-wrap break-all w-full max-w-full max-h-64 overflow-y-auto overflow-x-hidden min-w-0 custom-scrollbar leading-relaxed px-0",
+		children: [output, isRunning && /* @__PURE__ */ jsx("span", { className: "inline-block w-1.5 h-3 ml-1 bg-primary/60 animate-pulse align-middle" })]
 	}) })] })] });
 }
 function FileOperationView({ card, onFileOpen }) {
@@ -4075,7 +4101,7 @@ function FileOperationView({ card, onFileOpen }) {
 		hideSummary: expanded && hasStructuredPreview,
 		onToggle
 	}), expanded && hasContent && /* @__PURE__ */ jsx(ToolCardContent, {
-		className: "border-t border-amber-200/20 bg-transparent px-0 pt-0 pb-0",
+		className: "border-t border-border bg-transparent px-0 pt-0 pb-0",
 		children: /* @__PURE__ */ jsx(ToolCardFileOperationContent, {
 			card,
 			onFileOpen
@@ -4098,7 +4124,7 @@ function SearchSnippetView({ card }) {
 		canExpand: !!output || isRunning,
 		onToggle
 	}), expanded && output && /* @__PURE__ */ jsx(ToolCardContent, { children: /* @__PURE__ */ jsx("pre", {
-		className: "font-mono text-[12px] text-amber-950/70 whitespace-pre-wrap break-all w-full max-w-full max-h-64 overflow-y-auto overflow-x-hidden min-w-0 custom-scrollbar-amber leading-relaxed",
+		className: "font-mono text-[12px] text-muted-foreground whitespace-pre-wrap break-all w-full max-w-full max-h-64 overflow-y-auto overflow-x-hidden min-w-0 custom-scrollbar leading-relaxed",
 		children: output
 	}) })] });
 }
@@ -4197,7 +4223,7 @@ const ChatMessage = memo(function ChatMessage({ message, texts, onToolAction, on
 	const isUser = role === "user";
 	const isMessageInProgress = message.status === "pending" || message.status === "streaming";
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("inline-block w-fit max-w-full rounded-2xl border px-4 shadow-sm", isUser ? "border-primary bg-primary py-3 text-white" : role === "assistant" ? "border-gray-200 bg-white pb-3 pt-4 text-gray-900" : "border-orange-200/80 bg-orange-50/70 py-3 text-gray-900"),
+		className: cn("inline-block w-fit max-w-full rounded-2xl border px-4 shadow-sm", isUser ? "border-primary bg-primary py-3 text-primary-foreground" : role === "assistant" ? "border-border bg-card pb-3 pt-4 text-card-foreground" : "border-border bg-muted/45 py-3 text-foreground"),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "space-y-2",
 			children: message.parts.map((part, index) => {
@@ -4245,16 +4271,16 @@ const ChatMessage = memo(function ChatMessage({ message, texts, onToolAction, on
 				if (type === "unknown") {
 					const { label, rawType, text } = part;
 					return /* @__PURE__ */ jsxs("div", {
-						className: "rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-2 text-xs text-gray-600",
+						className: "rounded-lg border border-border bg-muted/60 px-2.5 py-2 text-xs text-muted-foreground",
 						children: [/* @__PURE__ */ jsxs("div", {
-							className: "font-semibold text-gray-700",
+							className: "font-semibold text-foreground",
 							children: [
 								label,
 								": ",
 								rawType
 							]
 						}), text ? /* @__PURE__ */ jsx("pre", {
-							className: "mt-1 whitespace-pre-wrap break-words text-[11px] text-gray-500",
+							className: "mt-1 whitespace-pre-wrap break-words text-[11px] text-muted-foreground",
 							children: text
 						}) : null]
 					}, `unknown-${index}`);
@@ -4279,7 +4305,7 @@ function ChatMessageActionCopy({ message, texts }) {
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		onClick: () => void copy(),
-		className: "text-gray-400 hover:text-gray-600 transition-colors p-1 rounded-md hover:bg-gray-100 flex items-center justify-center",
+		className: "text-muted-foreground hover:text-foreground transition-colors p-1 rounded-md hover:bg-accent flex items-center justify-center",
 		"aria-label": copied ? texts.copiedMessageLabel : texts.copyMessageLabel,
 		title: copied ? texts.copiedMessageLabel : texts.copyMessageLabel,
 		children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" })
@@ -4301,13 +4327,13 @@ const TYPING_TEXT_SHEEN_CSS = `
 .nextclaw-chat-typing-indicator__text {
   background-image: linear-gradient(
     100deg,
-    #6b7280 0%,
-    #6b7280 34%,
-    #a6adba 43%,
-    #f8fafc 50%,
-    #a6adba 57%,
-    #6b7280 66%,
-    #6b7280 100%
+    hsl(var(--muted-foreground)) 0%,
+    hsl(var(--muted-foreground)) 34%,
+    hsl(var(--foreground-tertiary)) 43%,
+    hsl(var(--foreground-muted)) 50%,
+    hsl(var(--foreground-tertiary)) 57%,
+    hsl(var(--muted-foreground)) 66%,
+    hsl(var(--muted-foreground)) 100%
   );
   background-size: 240% 100%;
   background-position: 160% 0;
@@ -4322,7 +4348,7 @@ const TYPING_TEXT_SHEEN_CSS = `
   .nextclaw-chat-typing-indicator__text {
     animation: none;
     background-image: none;
-    color: #6b7280;
+    color: hsl(var(--muted-foreground));
     -webkit-text-fill-color: currentColor;
   }
 }
@@ -4340,20 +4366,20 @@ function hasRenderableMessageContent(message) {
 }
 function ChatMessageTypingFooter() {
 	return /* @__PURE__ */ jsx("div", {
-		className: "flex items-center gap-2 px-1 py-0.5 text-[11px] text-gray-400",
+		className: "flex items-center gap-2 px-1 py-0.5 text-[11px] text-muted-foreground",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex space-x-1 items-center h-full",
 			children: [
-				/* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse" }),
-				/* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse [animation-delay:200ms]" }),
-				/* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse [animation-delay:400ms]" })
+				/* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 rounded-full bg-muted-foreground animate-pulse" }),
+				/* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 rounded-full bg-muted-foreground animate-pulse [animation-delay:200ms]" }),
+				/* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 rounded-full bg-muted-foreground animate-pulse [animation-delay:400ms]" })
 			]
 		})
 	});
 }
 function ChatTypingIndicator({ label }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm text-gray-500 shadow-sm",
+		className: "rounded-2xl border border-border bg-card px-4 py-3 text-sm text-muted-foreground shadow-sm",
 		children: [/* @__PURE__ */ jsx("style", { children: TYPING_TEXT_SHEEN_CSS }), /* @__PURE__ */ jsx("span", {
 			className: "nextclaw-chat-typing-indicator__text",
 			children: label
@@ -4384,7 +4410,7 @@ function ChatMessageList({ className, isSending, messages, onFileOpen, onToolAct
 						}), /* @__PURE__ */ jsx("div", {
 							className: cn("flex items-center gap-2", isUser && "justify-end"),
 							children: isGenerating ? /* @__PURE__ */ jsx(ChatMessageTypingFooter, {}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
-								className: cn("px-1 text-[11px] leading-4 text-gray-400", isUser ? "text-right" : "text-left"),
+								className: cn("px-1 text-[11px] leading-4 text-muted-foreground", isUser ? "text-right" : "text-left"),
 								children: [
 									message.roleLabel,
 									" · ",