devnonla-ui 0.2.0 → 0.4.0

package/README.md

@@ -108,14 +108,14 @@ import { DesktopStage, DesktopHeader, MeadowDesktop, DesktopWindow, MeadowShell,
 
 <DesktopStage>
   <MeadowDesktop>{icons}</MeadowDesktop>
-  <DesktopHeader logo={logo} leading={nav} trailing={apps} profile={avatar} />
-  <DesktopWindow title="Tools" expanded={false} onClose={close} onToggleExpand={toggle}>
+  <DesktopHeader left={nav} right={apps} />
+  <DesktopWindow title="Tools" left={nav} right={actions} expanded={false} onClose={close} onToggleExpand={toggle}>
     {children}
   </DesktopWindow>
 </DesktopStage>
 ```
 
-`MeadowShell` is the login/setup backdrop. `Menu` is the glass picker (trigger + items + hover action) used by AgentsMenu. Wallpaper defaults to the bundled meadow; pass `src` on `MeadowWallpaper` to swap.
+`MeadowShell` is the login/setup backdrop. `DesktopWindow` chrome is inline: traffic lights, `left`, a flex middle (title — double-click to expand), then `right`. A child can fill the same slots with `WindowHeader`. `Menu` is the glass picker (trigger + items + hover action) used by AgentsMenu. Wallpaper defaults to the bundled meadow; pass `src` on `MeadowWallpaper` to swap.
 
 # Chat
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devnonla-ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "description": "NonlaUI — React controls for Nonla Agents",
   "author": "devlangla <devlangla0x01@gmail.com>",
@@ -49,6 +49,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
     "highlight.js": "^11.12.0",
+    "lucide-react": "^1.45.0",
     "mermaid": "^11.14.0",
     "react-day-picker": "^10.0.1",
     "react-markdown": "^10.1.0",

package/src/app/App.tsx

@@ -1,10 +1,10 @@
-import { type ReactNode, useLayoutEffect, useMemo, useState } from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { message, MessageHolder } from "../message/message";
+import { type ReactNode, useLayoutEffect, useMemo, useState } from "react";
+import { type ControlSize, ControlSizeContext, normalizeSize } from "../lib/sizes";
+import { MessageHolder, message } from "../message/message";
 import { ConfirmHolder, Modal } from "../modal/Modal";
-import { ControlSizeContext, normalizeSize, type ControlSize } from "../lib/sizes";
 import { applyNonlaTheme, type NonlaThemeConfig } from "../theme";
-import { AppContext, useAppConfig, usePopupContainer, useToken, type NonlaAppConfig } from "./context";
+import { AppContext, type NonlaAppConfig, useAppConfig, usePopupContainer, useToken } from "./context";
 
 export type { NonlaAppConfig };
 export { useAppConfig, usePopupContainer, useToken };

package/src/button/Button.tsx

@@ -1,4 +1,4 @@
-import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type CSSProperties, type ForwardRefExoticComponent, type MouseEvent, type ReactNode, type RefAttributes, createContext, forwardRef, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type CSSProperties, createContext, type ForwardRefExoticComponent, forwardRef, type MouseEvent, type ReactNode, type RefAttributes, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { cn } from "../lib/cn";
 import type { ControlSize } from "../lib/sizes";
 import { controlHeightVar, controlRadiusVar, getSizeTokens, useControlSize } from "../lib/sizes";

package/src/button/ButtonCopy.tsx

@@ -1,32 +1,21 @@
+import { Check, Copy } from "lucide-react";
 import { type ComponentProps, useEffect, useState } from "react";
 import { cn } from "../lib/cn";
+import { type ControlSize, getSizeTokens, useControlSize } from "../lib/sizes";
 
-export type ButtonCopyProps = Omit<ComponentProps<"button">, "children"> & {
+export type ButtonCopyProps = Omit<ComponentProps<"button">, "children" | "size"> & {
   text?: string;
   getText?: () => string;
   /** Idle tooltip / aria-label. Copied state uses "Copied". */
   label?: string;
+  size?: ControlSize;
 };
 
-function CopyIcon({ size = 14 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
-      <rect x="8" y="8" width="14" height="14" rx="2" stroke="currentColor" strokeWidth="2" />
-      <path d="M4 16V4c0-1.1.9-2 2-2h10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
-    </svg>
-  );
-}
-
-function CheckIcon({ size = 14 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
-      <path d="M5 13l4 4L19 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  );
-}
-
-export function ButtonCopy({ text, getText, label = "Copy", className, onClick, ...props }: ButtonCopyProps) {
+export function ButtonCopy({ text, getText, label = "Copy", className, onClick, size, ...props }: ButtonCopyProps) {
   const [copied, setCopied] = useState(false);
+  const tok = getSizeTokens(useControlSize(size));
+  const icon = tok.icon;
+  const box = icon + 14;
 
   useEffect(() => {
     if (!copied) return;
@@ -40,7 +29,8 @@ export function ButtonCopy({ text, getText, label = "Copy", className, onClick,
       {...props}
       title={copied ? "Copied" : label}
       aria-label={copied ? "Copied" : label}
-      className={cn("inline-flex size-7 cursor-pointer shrink-0 items-center justify-center text-muted-foreground transition-colors duration-200 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className)}
+      className={cn("inline-flex cursor-pointer shrink-0 items-center justify-center text-muted-foreground transition-colors duration-200 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className)}
+      style={{ width: box, height: box }}
       onClick={async (e) => {
         onClick?.(e);
         if (e.defaultPrevented) return;
@@ -54,7 +44,7 @@ export function ButtonCopy({ text, getText, label = "Copy", className, onClick,
         }
       }}
     >
-      {copied ? <CheckIcon /> : <CopyIcon />}
+      {copied ? <Check size={icon} aria-hidden /> : <Copy size={icon} aria-hidden />}
     </button>
   );
 }

package/src/calendar/Calendar.tsx

@@ -1,5 +1,5 @@
 import { type CSSProperties, useEffect, useRef } from "react";
-import { DayPicker, getDefaultClassNames, type DayButtonProps, type DayPickerProps } from "react-day-picker";
+import { type DayButtonProps, DayPicker, type DayPickerProps, getDefaultClassNames } from "react-day-picker";
 import { cn } from "../lib/cn";
 
 export type CalendarProps = DayPickerProps;

package/src/chat/AgentPanel.tsx

@@ -1,8 +1,9 @@
 import { type ReactNode, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { cn } from "../lib/cn";
 import { OverlayScroll, type OverlayScrollVisibility } from "../scroll/OverlayScroll";
-import type { AgentMessage, AgentPanelEndpoint, AgentToolAction, AgentToolHook } from "./common/types";
+import { Shimmer } from "../shimmer/Shimmer";
 import { parseBgTaskRef } from "./common/bgTasks";
+import type { AgentMessage, AgentPanelEndpoint, AgentToolAction, AgentToolHook } from "./common/types";
 import { useAgentStream } from "./common/useAgentStream";
 import { formatToolName } from "./common/utils";
 import { ChatAgentMessage } from "./message-ui/ChatAgentMessage";
@@ -14,8 +15,7 @@ import { ChatUserMessage } from "./message-ui/ChatUserMessage";
 import { ChatWelcome } from "./message-ui/ChatWelcome";
 import { BackgroundTaskToolUI } from "./tool-ui/BackgroundTaskToolUI";
 import { ChatToolCall } from "./tool-ui/ChatToolCall";
-import { resolveToolUI, type AgentToolUI } from "./tool-ui/registry";
-import { Shimmer } from "../shimmer/Shimmer";
+import { type AgentToolUI, resolveToolUI } from "./tool-ui/registry";
 
 export type AgentPanelProps = {
   /** POST URL, or a function that returns an SSE `Response`. */

package/src/chat/index.ts

@@ -1,58 +1,42 @@
-export { ChatThinking } from "./message-ui/ChatThinking";
-export type { ChatThinkingProps } from "./message-ui/ChatThinking";
-
-export { ChatUserMessage } from "./message-ui/ChatUserMessage";
-export type { ChatUserMessageProps } from "./message-ui/ChatUserMessage";
-
-export { ChatAgentMessage } from "./message-ui/ChatAgentMessage";
+export type { AgentPanelProps } from "./AgentPanel";
+export { AgentPanel } from "./AgentPanel";
+export type { ChatBgTask, ChatBgTaskStatus } from "./common/bgTasks";
+export { formatBgElapsed, parseBgTaskRef } from "./common/bgTasks";
+export type { AgentSseCallbacks, AgentSseEvent, ParseSseResult } from "./common/sse";
+export { normalizeSseEvent, parseSseStream } from "./common/sse";
+export type { AgentHistoryMessage, AgentMessage, AgentMessageRole, AgentPanelEndpoint, AgentStreamRequest, AgentToolAction, AgentToolCallEvent, AgentToolHook, AgentToolNameMatch, AgentToolResultEvent } from "./common/types";
+export type { UseAgentStreamOptions } from "./common/useAgentStream";
+export { buildAgentHistory, useAgentStream } from "./common/useAgentStream";
+export { formatToolName, isCallAgentToolName, matchesToolHook, matchesToolName, parseCallAgentToolTargetId, prettyJson } from "./common/utils";
 export type { ChatAgentMessageProps } from "./message-ui/ChatAgentMessage";
-
-export { ChatError } from "./message-ui/ChatError";
+export { ChatAgentMessage } from "./message-ui/ChatAgentMessage";
 export type { ChatErrorProps } from "./message-ui/ChatError";
-
-export { ChatToolCall } from "./tool-ui/ChatToolCall";
-export type { ChatToolCallProps } from "./tool-ui/ChatToolCall";
-
-export { resolveToolUI, builtinToolUis, matchesToolUIName } from "./tool-ui/registry";
-export type { AgentToolUI, AgentToolUIName } from "./tool-ui/registry";
-export type { ToolUIProps, ChatToolMessage } from "./tool-ui/types";
-export { isToolRunning } from "./tool-ui/types";
+export { ChatError } from "./message-ui/ChatError";
+export type { ChatInputProps } from "./message-ui/ChatInput";
+export { ChatInput } from "./message-ui/ChatInput";
+export type { ChatMarkdownProps, ChatMarkdownStreamState } from "./message-ui/ChatMarkdown";
+export { ChatMarkdown, chatBodyClass, chatMarkdownClass, chatMarkdownComponents, createChatMarkdownComponents } from "./message-ui/ChatMarkdown";
+export { ChatSpinner } from "./message-ui/ChatSpinner";
+export type { ChatThinkingProps } from "./message-ui/ChatThinking";
+export { ChatThinking } from "./message-ui/ChatThinking";
+export type { ChatUserMessageProps } from "./message-ui/ChatUserMessage";
+export { ChatUserMessage } from "./message-ui/ChatUserMessage";
+export type { ChatWelcomeProps } from "./message-ui/ChatWelcome";
+export { ChatWelcome } from "./message-ui/ChatWelcome";
+export type { MermaidBlockProps } from "./message-ui/MermaidBlock";
+export { MermaidBlock } from "./message-ui/MermaidBlock";
+export type { BackgroundTasksBarProps } from "./tool-ui/BackgroundTasksBar";
+export { BackgroundTasksBar } from "./tool-ui/BackgroundTasksBar";
+export { BackgroundTaskToolUI } from "./tool-ui/BackgroundTaskToolUI";
 export { CallAgentToolUI } from "./tool-ui/CallAgentToolUI";
-export { WebFetchToolUI } from "./tool-ui/WebFetchToolUI";
+export type { ChatToolCallProps } from "./tool-ui/ChatToolCall";
+export { ChatToolCall } from "./tool-ui/ChatToolCall";
 export { GetCurrentTimeToolUI } from "./tool-ui/GetCurrentTimeToolUI";
 export { ReadSkillToolUI } from "./tool-ui/ReadSkillToolUI";
 export { RunJsToolUI } from "./tool-ui/RunJsToolUI";
-export { BackgroundTaskToolUI } from "./tool-ui/BackgroundTaskToolUI";
-export { BackgroundTasksBar } from "./tool-ui/BackgroundTasksBar";
+export type { AgentToolUI, AgentToolUIName } from "./tool-ui/registry";
+export { builtinToolUis, matchesToolUIName, resolveToolUI } from "./tool-ui/registry";
 export { ToolUiTrailing } from "./tool-ui/ToolUiTrailing";
-export type { BackgroundTasksBarProps } from "./tool-ui/BackgroundTasksBar";
-
-export { ChatInput } from "./message-ui/ChatInput";
-export type { ChatInputProps } from "./message-ui/ChatInput";
-
-export { ChatWelcome } from "./message-ui/ChatWelcome";
-export type { ChatWelcomeProps } from "./message-ui/ChatWelcome";
-
-export { ChatSpinner } from "./message-ui/ChatSpinner";
-
-export { ChatMarkdown, createChatMarkdownComponents, chatMarkdownComponents, chatMarkdownClass, chatBodyClass } from "./message-ui/ChatMarkdown";
-export type { ChatMarkdownProps, ChatMarkdownStreamState } from "./message-ui/ChatMarkdown";
-
-export { MermaidBlock } from "./message-ui/MermaidBlock";
-export type { MermaidBlockProps } from "./message-ui/MermaidBlock";
-
-export { AgentPanel } from "./AgentPanel";
-export type { AgentPanelProps } from "./AgentPanel";
-
-export { useAgentStream, buildAgentHistory } from "./common/useAgentStream";
-export type { UseAgentStreamOptions } from "./common/useAgentStream";
-
-export { parseSseStream, normalizeSseEvent } from "./common/sse";
-export type { AgentSseEvent, AgentSseCallbacks, ParseSseResult } from "./common/sse";
-
-export type { AgentMessage, AgentMessageRole, AgentHistoryMessage, AgentStreamRequest, AgentPanelEndpoint, AgentToolAction, AgentToolHook, AgentToolCallEvent, AgentToolResultEvent, AgentToolNameMatch } from "./common/types";
-
-export { formatToolName, prettyJson, isCallAgentToolName, parseCallAgentToolTargetId, matchesToolName, matchesToolHook } from "./common/utils";
-
-export { parseBgTaskRef, formatBgElapsed } from "./common/bgTasks";
-export type { ChatBgTask, ChatBgTaskStatus } from "./common/bgTasks";
+export type { ChatToolMessage, ToolUIProps } from "./tool-ui/types";
+export { isToolRunning } from "./tool-ui/types";
+export { WebFetchToolUI } from "./tool-ui/WebFetchToolUI";

package/src/chat/message-ui/ChatError.tsx

@@ -1,3 +1,4 @@
+import { CircleX } from "lucide-react";
 import type { ReactNode } from "react";
 import { cn } from "../../lib/cn";
 
@@ -13,10 +14,7 @@ export function ChatError({ children, className }: ChatErrorProps) {
         role="alert"
         className="flex items-center gap-2 rounded-lg border border-destructive/40 bg-[color-mix(in_oklab,var(--destructive)_14%,var(--nonla-surface))] px-3 py-2 text-(length:--chat-body-size) leading-(--chat-body-leading) text-destructive"
       >
-        <svg className="size-4 shrink-0" viewBox="0 0 16 16" fill="none" aria-hidden>
-          <circle cx="8" cy="8" r="5.75" stroke="currentColor" strokeWidth="1.4" />
-          <path d="M6 6l4 4M10 6l-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
-        </svg>
+        <CircleX className="size-4 shrink-0" aria-hidden />
         <div className="min-w-0">{children}</div>
       </div>
     </div>

package/src/chat/message-ui/ChatInput.tsx

@@ -1,5 +1,5 @@
+import { ArrowUp, Eraser, Square } from "lucide-react";
 import { type KeyboardEvent as ReactKeyboardEvent, type ReactNode, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { FluentIcon } from "../../icon/FluentIcon";
 import { cn } from "../../lib/cn";
 
 export type ChatInputProps = {
@@ -128,8 +128,8 @@ export function ChatInput({ generating = false, placeholder = "Message…", disa
 
       <div className="flex items-center gap-1.5 pb-2 px-2">
         {onClear ? (
-          <button type="button" onClick={onClear} title="New chat" aria-label="New chat" className="inline-flex size-6 shrink-0 items-center justify-center rounded-lg border-0 bg-transparent cursor-pointer hover:bg-ink-hover">
-            <FluentIcon name="chat-add-24" size={16} />
+          <button type="button" onClick={onClear} title="Clear chat" aria-label="Clear chat" className="inline-flex size-6 shrink-0 items-center justify-center rounded-lg border-0 bg-transparent cursor-pointer hover:bg-ink-hover">
+            <Eraser size={16} aria-hidden />
           </button>
         ) : null}
         {toolbar}
@@ -137,9 +137,7 @@ export function ChatInput({ generating = false, placeholder = "Message…", disa
 
         {generating ? (
           <button type="button" onClick={onCancel} title="Stop" className="w-6 h-6 rounded-full bg-brand text-(--nonla-solid-fg) flex items-center justify-center shrink-0 cursor-pointer hover:bg-brand/90 active:scale-95 transition-all duration-100 border-0">
-            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden>
-              <rect x="1.5" y="1.5" width="9" height="9" rx="2" fill="currentColor" />
-            </svg>
+            <Square size={12} fill="currentColor" strokeWidth={0} aria-hidden />
             <span className="sr-only">Stop</span>
           </button>
         ) : (
@@ -150,9 +148,7 @@ export function ChatInput({ generating = false, placeholder = "Message…", disa
             title="Send (Enter)"
             className={cn("w-6 h-6 rounded-full flex items-center justify-center shrink-0 transition-all duration-100 border-0", canSend ? "bg-foreground text-background cursor-pointer" : "bg-border text-muted-foreground cursor-not-allowed opacity-50")}
           >
-            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden>
-              <path d="M6 9.5V2.5M6 2.5L3 5.5M6 2.5L9 5.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
+            <ArrowUp size={14} strokeWidth={2.5} aria-hidden />
             <span className="sr-only">Send</span>
           </button>
         )}

package/src/chat/message-ui/ChatThinking.tsx

@@ -1,3 +1,4 @@
+import { ChevronRight } from "lucide-react";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { cn } from "../../lib/cn";
 import { Shimmer } from "../../shimmer/Shimmer";
@@ -49,9 +50,7 @@ export function ChatThinking({ thinking, duration = 0, streaming = false, classN
     >
       <summary className="cursor-pointer select-none text-sm font-medium flex items-center gap-1 py-0.5 list-none [&::-webkit-details-marker]:hidden">
         <Shimmer active={streaming} className="text-tertiary-foreground">{label}</Shimmer>
-        <svg className="w-3 h-3 shrink-0 opacity-0 text-tertiary-foreground transition-[opacity,transform] duration-150 group-hover/thinking:opacity-100 group-open/thinking:opacity-100 group-open/thinking:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden>
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-        </svg>
+        <ChevronRight className="size-3 shrink-0 opacity-0 text-tertiary-foreground transition-[opacity,transform] duration-150 group-hover/thinking:opacity-100 group-open/thinking:opacity-100 group-open/thinking:rotate-90" aria-hidden />
       </summary>
 
       <div ref={bodyRef} className="pt-2 max-h-40 min-w-0 overflow-y-auto overflow-x-hidden mb-2 text-[14px] leading-normal">

package/src/chat/message-ui/ChatUserMessage.tsx

@@ -1,3 +1,4 @@
+import { ChevronDown } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { cn } from "../../lib/cn";
 
@@ -28,8 +29,8 @@ export function ChatUserMessage({ content, className }: ChatUserMessageProps) {
   return (
     <div
       className={cn(
-        "nonla-chat-user relative isolate mt-6 mb-3 mx-4 overflow-hidden rounded-xl px-3 py-2.5",
-        "border border-brand/40 bg-[color-mix(in_oklab,var(--brand)_14%,var(--glass))] backdrop-blur-xl backdrop-saturate-150",
+        "nonla-chat-user relative isolate mt-6 mb-3 mx-4 overflow-hidden rounded-xl px-3 py-1.5",
+        "border border-solid border-border bg-[color-mix(in_oklab,var(--nonla-ink)_7%,transparent)] backdrop-blur-xl",
         className,
       )}
     >
@@ -54,9 +55,7 @@ export function ChatUserMessage({ content, className }: ChatUserMessageProps) {
           }}
           className="flex w-full cursor-pointer items-center justify-center border-0 bg-transparent pt-1 text-muted-foreground hover:text-foreground"
         >
-          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden className={cn("transition-transform duration-200", isExpanded && "rotate-180")}>
-            <path d="M2.5 4.5 6 8l3.5-3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-          </svg>
+          <ChevronDown size={12} className={cn("transition-transform duration-200", isExpanded && "rotate-180")} aria-hidden />
         </button>
       ) : null}
     </div>

package/src/chat/message-ui/ChatWelcome.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { Button } from "../../button/Button";
 import { cn } from "../../lib/cn";
 
 export type ChatWelcomeProps = {
@@ -53,15 +54,9 @@ export function ChatWelcome({ name, description, avatar, starters = [...DEFAULT_
       {starters.length > 0 && onStarter ? (
         <div className="mt-8 flex flex-wrap items-center justify-center gap-2 max-w-130">
           {starters.map((text) => (
-            <button
-              key={text}
-              type="button"
-              disabled={disabled}
-              onClick={() => onStarter(text)}
-              className="px-3 py-1.5 rounded-lg border border-border bg-transparent text-[12px] font-medium text-tertiary-foreground cursor-pointer transition-colors duration-150 font-[inherit] hover:border-border hover:bg-muted/60 hover:text-foreground disabled:opacity-40 disabled:cursor-not-allowed"
-            >
+            <Button key={text} type="default" disabled={disabled} onClick={() => onStarter(text)}>
               {text}
-            </button>
+            </Button>
           ))}
         </div>
       ) : null}

package/src/chat/message-ui/MermaidBlock.tsx

@@ -1,3 +1,4 @@
+import { Download, Maximize2, Minimize2, Moon, Sun } from "lucide-react";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
 import { CodeBlock } from "../../codeblock/CodeBlock";
 import { cn } from "../../lib/cn";
@@ -12,47 +13,6 @@ type MermaidTheme = "light" | "dark";
 
 const btnClass = "flex items-center gap-1 px-2 py-1 rounded-lg border border-border text-muted-foreground text-xs cursor-pointer transition-colors hover:text-primary hover:border-primary/30 bg-transparent";
 
-function IconSun({ size = 14 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
-      <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.75" />
-      <path d="M12 3v2M12 19v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M3 12h2M19 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />
-    </svg>
-  );
-}
-
-function IconMoon({ size = 14 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
-      <path d="M21 14.5A8.5 8.5 0 1 1 12 3a7 7 0 0 0 9 11.5z" stroke="currentColor" strokeWidth="1.75" strokeLinejoin="round" />
-    </svg>
-  );
-}
-
-function IconDownload({ size = 14 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
-      <path d="M12 4v12M7 12l5 5 5-5M5 20h14" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  );
-}
-
-function IconFullScreen({ size = 14 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
-      <path d="M8 4H4v4M16 4h4v4M8 20H4v-4M16 20h4v-4" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  );
-}
-
-function IconQuitFullScreen({ size = 16 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
-      <path d="M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  );
-}
-
 export function MermaidBlock({ children, className }: MermaidBlockProps) {
   const id = useId().replace(/:/g, "_");
   const containerRef = useRef<HTMLDivElement>(null);
@@ -216,13 +176,13 @@ export function MermaidBlock({ children, className }: MermaidBlockProps) {
       <div className={cn("my-3 last:mb-0 group relative rounded-xl border border-border overflow-hidden", surfaceClass, className)}>
         <div className="absolute top-2 right-2 z-10 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
           <button type="button" onClick={toggleTheme} className={cn(btnClass, surfaceClass)} title={isDark ? "Light theme" : "Dark theme"}>
-            {isDark ? <IconSun /> : <IconMoon />}
+            {isDark ? <Sun size={14} aria-hidden /> : <Moon size={14} aria-hidden />}
           </button>
           <button type="button" onClick={downloadSvg} className={cn(btnClass, surfaceClass)} title="Download SVG" disabled={!svgContent}>
-            <IconDownload />
+            <Download size={14} aria-hidden />
           </button>
           <button type="button" onClick={openFullscreen} className={cn(btnClass, surfaceClass)} title="Fullscreen">
-            <IconFullScreen />
+            <Maximize2 size={14} aria-hidden />
           </button>
         </div>
         <div ref={containerRef} className="flex justify-center p-6 overflow-x-auto [&_svg]:max-w-full" />
@@ -237,13 +197,13 @@ export function MermaidBlock({ children, className }: MermaidBlockProps) {
       >
         <div className="fixed top-5 right-5 z-50 flex items-center gap-1.5">
           <button type="button" onClick={toggleTheme} className={cn(btnClass, surfaceClass, "px-3 py-2 text-sm shadow-md")} title={isDark ? "Light theme" : "Dark theme"}>
-            {isDark ? <IconSun size={16} /> : <IconMoon size={16} />}
+            {isDark ? <Sun size={16} aria-hidden /> : <Moon size={16} aria-hidden />}
           </button>
           <button type="button" onClick={downloadSvg} className={cn(btnClass, surfaceClass, "px-3 py-2 text-sm shadow-md")} title="Download SVG" disabled={!svgContent}>
-            <IconDownload size={16} />
+            <Download size={16} aria-hidden />
           </button>
           <button type="button" onClick={closeFullscreen} className={cn(btnClass, surfaceClass, "px-3 py-2 text-sm shadow-md")} title="Exit fullscreen">
-            <IconQuitFullScreen />
+            <Minimize2 size={16} aria-hidden />
             <span>Exit</span>
           </button>
         </div>

package/src/chat/tool-ui/BackgroundTaskToolUI.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import { Shimmer } from "../../shimmer/Shimmer";
+import { Spin } from "../../spin/Spin";
 import { formatBgElapsed, parseBgTaskRef } from "../common/bgTasks";
 import { formatToolName, timestampMs } from "../common/utils";
-import { ChatSpinner } from "../message-ui/ChatSpinner";
 import { ToolUiBadge } from "./ToolUiBadge";
 import type { ToolUIProps } from "./types";
 
@@ -20,16 +20,13 @@ export function BackgroundTaskToolUI({ msg, assistantLabel = "Assistant", assist
     <div className="mt-1 animate-fadeIn">
       <ToolUiBadge show={showAvatar} label={assistantLabel} color={assistantColor} />
       <div className="px-4 pb-1">
-        <div className="flex gap-0">
-          <div className="w-0.5 shrink-0 self-stretch rounded-full bg-brand-700" />
-          <div className="min-w-0 flex-1 pl-2">
-            <div className="flex items-center gap-2 py-1">
-              <ChatSpinner />
-              <Shimmer className="min-w-0 flex-1 truncate text-[14px] font-medium text-foreground">{label}</Shimmer>
-              <span className="shrink-0 rounded px-1 py-px text-[9px] font-semibold uppercase tracking-wider text-brand-700">Background</span>
-              <span className="shrink-0 text-[14px] tabular-nums text-muted-foreground">{formatBgElapsed(timestampMs(msg.timestamp), now)}</span>
-            </div>
-          </div>
+        <div className="flex items-center gap-2 py-1">
+          <Spin variant="agent" size="small" className="shrink-0" />
+          <Shimmer className="min-w-0 truncate text-[14px] font-medium text-muted-foreground">
+            {label}
+            <span className="font-normal text-tertiary-foreground"> in background</span>
+          </Shimmer>
+          <span className="shrink-0 text-[13px] tabular-nums text-tertiary-foreground">{formatBgElapsed(timestampMs(msg.timestamp), now)}</span>
         </div>
       </div>
     </div>

package/src/chat/tool-ui/BackgroundTasksBar.tsx

@@ -1,12 +1,12 @@
+import { ChevronDown, Square } from "lucide-react";
 import { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { FluentIcon } from "../../icon/FluentIcon";
 import { cn } from "../../lib/cn";
 import { Modal } from "../../modal/Modal";
 import { Popconfirm } from "../../popconfirm/Popconfirm";
+import { Spin } from "../../spin/Spin";
 import type { ChatBgTask } from "../common/bgTasks";
 import { formatBgElapsed } from "../common/bgTasks";
 import { formatToolName } from "../common/utils";
-import { ChatSpinner } from "../message-ui/ChatSpinner";
 
 function TaskLogsModal({
   task,
@@ -27,7 +27,7 @@ function TaskLogsModal({
 
   return (
     <Modal open={open} onCancel={onClose} footer={null} title={task ? formatToolName(task.toolName) : "Logs"} width={560}>
-      <pre ref={preRef} className="m-0 max-h-[50vh] overflow-auto rounded-md border border-border-subtle bg-muted px-3 py-2 font-mono text-[14px] leading-relaxed whitespace-pre-wrap break-all text-foreground">
+      <pre ref={preRef} className="m-0 max-h-[50vh] overflow-auto rounded-md border border-border-subtle bg-muted px-3 py-2 font-mono text-[13px] leading-relaxed whitespace-pre-wrap break-all text-foreground">
         {logs || "Waiting for output…"}
       </pre>
     </Modal>
@@ -48,16 +48,15 @@ function TaskRow({
   onLogs: () => void;
 }) {
   return (
-    <div className="flex items-center gap-2 px-2.5 py-1">
-      <ChatSpinner className="size-2.5" />
-      <div className="min-w-0 flex-1 truncate text-[14px] text-foreground">{formatToolName(task.toolName)}</div>
-      <span className="shrink-0 text-[14px] tabular-nums text-muted-foreground">{formatBgElapsed(task.startedAt, now)}</span>
-      <button type="button" onClick={onLogs} title="Logs" aria-label={`Logs ${formatToolName(task.toolName)}`} className="inline-flex size-5 shrink-0 items-center justify-center cursor-pointer rounded text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground">
-        <FluentIcon name="document-text-24" size={12} />
+    <div className="flex items-center gap-1 px-1.5 py-0.5">
+      <button type="button" onClick={onLogs} title="Logs" aria-label={`Logs ${formatToolName(task.toolName)}`} className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-md px-1 py-[3px] text-left transition-colors hover:bg-secondary">
+        <Spin variant="agent" size="small" className="shrink-0" />
+        <span className="min-w-0 flex-1 truncate text-[13px] font-medium text-foreground">{formatToolName(task.toolName)}</span>
+        <span className="shrink-0 text-[12px] tabular-nums text-tertiary-foreground">{formatBgElapsed(task.startedAt, now)}</span>
       </button>
       <Popconfirm title={`Stop ${formatToolName(task.toolName)}?`} okText="Stop" okType="danger" onConfirm={onCancel} getPopupContainer={() => document.body}>
-        <button type="button" disabled={cancelling} title="Stop" aria-label={`Stop ${formatToolName(task.toolName)}`} className="inline-flex h-5 shrink-0 items-center rounded px-1.5 text-[10px] cursor-pointer text-muted-foreground transition-colors hover:bg-secondary hover:text-destructive disabled:opacity-40">
-          Stop
+        <button type="button" disabled={cancelling} title="Stop" aria-label={`Stop ${formatToolName(task.toolName)}`} className="inline-flex size-5 shrink-0 items-center justify-center rounded cursor-pointer text-destructive transition-colors hover:bg-destructive/10 disabled:opacity-40">
+          <Square size={10} fill="currentColor" strokeWidth={0} aria-hidden />
         </button>
       </Popconfirm>
     </div>
@@ -118,10 +117,10 @@ export function BackgroundTasksBar({ children, tasks = [], cancellingIds, onCanc
         {children}
 
         {tasks.length > 0 ? (
-          <div className="absolute right-5 bottom-[calc(100%)] left-5 z-20 overflow-hidden rounded-t-lg border-x border-t border-border">
+          <div className="absolute inset-x-6 bottom-[calc(100%)] z-20 overflow-hidden rounded-t-lg border-x border-t border-border">
             <div className={cn("flex h-7.5 items-center gap-1 px-1", open && "border-b border-border-subtle")}>
-              <button type="button" onClick={() => setOpen((v) => !v)} className="flex min-w-0 flex-1 font-medium items-center gap-1 rounded-md px-1.5 py-1 text-[14px] text-muted-foreground/90 transition-colors hover:text-foreground" aria-expanded={open} aria-label={label}>
-                {open ? <FluentIcon name="arrow-square-down-24" size={12} /> : <FluentIcon name="arrow-square-down-24" size={12} className="-rotate-90" />}
+              <button type="button" onClick={() => setOpen((v) => !v)} className="flex min-w-0 flex-1 cursor-pointer font-medium items-center gap-1 rounded-md px-1.5 py-1 text-[13px] text-muted-foreground/90 transition-colors hover:text-foreground" aria-expanded={open} aria-label={label}>
+                <ChevronDown size={13} className={cn("shrink-0 transition-transform duration-150", !open && "-rotate-90")} aria-hidden />
                 <span className="truncate">{label}</span>
               </button>
             </div>

package/src/chat/tool-ui/CallAgentToolUI.tsx

@@ -2,6 +2,7 @@ import { type ReactNode, useEffect, useRef, useState } from "react";
 import { FluentIcon } from "../../icon/FluentIcon";
 import { cn } from "../../lib/cn";
 import { Shimmer } from "../../shimmer/Shimmer";
+import { Spin } from "../../spin/Spin";
 import { formatBgElapsed, parseBgTaskRef } from "../common/bgTasks";
 import { parseJsonObject, prettyJson, timestampMs } from "../common/utils";
 import { ChatMarkdown } from "../message-ui/ChatMarkdown";
@@ -111,6 +112,7 @@ export function CallAgentToolUI({ msg, assistantLabel = "Assistant", assistantCo
   const hasRequest = requestMessage.length > 0;
   const composing = !hasOutput && !hasError && !hasRequest;
   const awaitingReply = bgRunning || (!hasOutput && !hasError && hasRequest);
+  const calling = composing || awaitingReply;
   const showCallee = awaitingReply || failed || parsed != null;
   const calleeName = msg.toolLabel?.replace(/^Call\s+/i, "") ?? "Agent";
   const statusLabel = failed && !awaitingReply ? (parsed?.error ?? "Call failed") : null;
@@ -121,11 +123,15 @@ export function CallAgentToolUI({ msg, assistantLabel = "Assistant", assistantCo
       <div className="px-4 py-1">
         <div className={cn("overflow-hidden rounded-xl border bg-card", failed ? "border-destructive/35" : "border-border")}>
           <div className="flex items-center gap-2 border-b border-border-subtle px-3 py-2">
-            <FluentIcon name="chat-24" size={13} className="shrink-0 text-muted-foreground" />
-            <Shimmer active={composing || awaitingReply} className="min-w-0 flex-1 truncate text-[14px] font-medium text-foreground">Calling {calleeName}</Shimmer>
+            {calling ? (
+              <Spin variant="agent" size="small" className="shrink-0" />
+            ) : (
+              <FluentIcon name="chat-multiple-24" size={13} className="shrink-0 text-muted-foreground" />
+            )}
+            <Shimmer active={calling} className="min-w-0 flex-1 truncate text-[14px] font-medium text-foreground">Calling {calleeName}</Shimmer>
             {bgRunning ? <span className="text-[14px] tabular-nums text-muted-foreground">{formatBgElapsed(timestampMs(msg.timestamp), now)}</span> : null}
             {statusLabel ? <span className="max-w-40 truncate text-[13px] italic text-destructive">{statusLabel}</span> : null}
-            <ToolUiTrailing running={composing || awaitingReply} failed={failed && !awaitingReply} />
+            <ToolUiTrailing failed={failed && !awaitingReply} />
           </div>
 
           {composing || hasRequest || showCallee ? (
@@ -154,7 +160,7 @@ export function CallAgentToolUI({ msg, assistantLabel = "Assistant", assistantCo
                       </ExpandableBody>
                     ) : (
                       <ExpandableBody>
-                        <pre className="m-0 font-mono text-[14px] leading-normal break-all whitespace-pre-wrap text-muted-foreground">{prettyJson(msg.toolOutput)}</pre>
+                        <pre className="m-0 font-mono text-[13px] leading-normal break-all whitespace-pre-wrap text-muted-foreground">{prettyJson(msg.toolOutput)}</pre>
                       </ExpandableBody>
                     )}
                   </div>