devnonla-ui 0.1.0 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # devnonla-ui (NonlaUI)
 
-Ant Design–like React controls for Nonla Agents.
+React controls for Nonla Agents.
 
 ```bash
 bun add devnonla-ui
@@ -10,7 +10,7 @@ Peer deps: `react` / `react-dom` >= 19, `react-hook-form`. Consumer should use T
 
 ```tsx
 import "devnonla-ui/styles.css";
-import { App, Button, EFormItemType, Form, Modal, message, type TFormItemProps } from "devnonla-ui";
+import { App, Button, EFormItemType, SchemaForm, Modal, message, type TFormItemProps } from "devnonla-ui";
 import { useForm } from "react-hook-form";
 
 message.success("Saved");
@@ -31,7 +31,7 @@ function Example() {
   return (
     <App>
       <form onSubmit={form.handleSubmit(console.log)}>
-        <Form form={form} items={items} />
+        <SchemaForm form={form} items={items} />
         <Button type="primary" htmlType="submit">
           Save
         </Button>
@@ -41,7 +41,7 @@ function Example() {
 }
 ```
 
-`Form` is JSON-schema driven (ZoForm-style) on `react-hook-form`. The BE can return `TFormItemProps[]`; FE hydrates `rules.pattern` strings to `RegExp`. Pass `fetcher` for `select_remote` fields.
+`SchemaForm` is JSON-schema driven (ZoForm-style) on `react-hook-form`. The BE can return `TFormItemProps[]`; FE hydrates `rules.pattern` strings to `RegExp`. Pass `fetcher` for `select_remote` fields. Layout-only labeled fields use `Form` / `Form.Item`.
 
 # Sizes
 
@@ -67,7 +67,7 @@ All color lives in **`--nonla-*` knobs** (`src/styles.css`). Components never ha
 }
 ```
 
-`--brand-50` … `--brand-800` follow `--nonla-brand` (500 = the knob). Text on cream uses `brand-700`.
+`--brand-50` … `--brand-800` follow `--nonla-brand` (500 = the knob). Text on cream uses `brand-700`. Text **on** the brand fill (Button primary, Tag solid, Checkbox) is `--nonla-solid-fg` / `colors.solidFg` — default white.
 
 Or at runtime:
 
@@ -83,13 +83,21 @@ Or at runtime:
 
 Flat knobs still work (`brand`, `colorBorder`, `colorBorderInput`, …). `applyNonlaTheme({ brand: "#3b82f6" })` does the same on `:root`.
 
-Core knobs: `--nonla-bg`, `--nonla-fg`, `--nonla-brand`, `--nonla-danger`, `--nonla-success`, `--nonla-warn`, `--nonla-link`, `--nonla-radius` (small = −2px, large = +2px), `--nonla-height` / `--nonla-height-sm` / `--nonla-height-lg`, plus surfaces (`--nonla-surface`, `--nonla-chip`, …) and preset accents (`--nonla-blue`, `--nonla-purple`, …).
+Core knobs: `--nonla-bg`, `--nonla-fg`, `--nonla-brand`, `--nonla-solid-fg`, `--nonla-danger`, `--nonla-success`, `--nonla-warn`, `--nonla-link`, `--nonla-radius` (small = −2px, large = +2px), `--nonla-height` / `--nonla-height-sm` / `--nonla-height-lg`, plus surfaces (`--nonla-surface`, `--nonla-chip`, …) and preset accents (`--nonla-blue`, `--nonla-purple`, …).
 
 Those map into shadcn-standard tokens (`--background`, `--destructive`, …) plus Nonla aliases (`--brand`, `--success`, …).
 
 - You: only touch `--nonla-*` (CSS or `theme` / `applyNonlaTheme`).
 - Shadcn consumers: can still override `--background` / `--primary` / etc.
-- Nonla CTA = `--brand` (from `--nonla-brand`). `--primary` = ink (emphasis), not the amber button.
+- Nonla CTA = `--brand` (from `--nonla-brand`). Label on that fill = `--nonla-solid-fg`. `--primary` = ink (emphasis), not the brand button.
+
+`<App>` is the ConfigProvider: `theme`, `componentSize`, `getPopupContainer`. Overlay portals (Select, Dropdown, DatePicker, Modal, Drawer, …) read `getPopupContainer`. `message.*` and `Modal.confirm` render into holders under `App`. `useToken()` / `getDesignToken()` read the live seed knobs.
+
+```tsx
+<App componentSize="large" getPopupContainer={() => document.getElementById("app")!}>
+  …
+</App>
+```
 
 # Desktop
 
@@ -119,13 +127,17 @@ import { AgentPanel } from "devnonla-ui";
 <AgentPanel
   endpoint="/api/agents/abc/assistant/stream"
   title="Nova"
-  extraBody={{ providerId, modelId: model }}
+  toolbar={<ModelPicker />}
+  toolUis={[{ name: "get_calendar_events", component: CalendarToolUI }]}
+  toolHooks={[
+    { name: "web_fetch", onCall: (e) => console.log("fetch", e.input), onResult: (e) => console.log("done", e.output) },
+  ]}
 />
 ```
 
-`endpoint` can also be a function that returns a `Response` (tests, mocks).
+`endpoint` can also be a function that returns a `Response` (tests, mocks). Pass any node to `toolbar` for the composer (model picker, tools, …). Extra tool cards go in `toolUis` and win over builtins on the same `toolName`. `toolHooks` fire `onCall` / `onResult` for matching tools (omit `name` to hear every tool). `onToolAction` still catches all events.
 
-POST body: `{ messages, ...extraBody }`. Stream events:
+POST body: `{ messages }` plus optional `extraBody`. Stream events:
 
 `text-delta` | `thinking-delta` | `tool-call` | `tool-result` | `done` | `error`
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "devnonla-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
-  "description": "NonlaUI — antd-like React controls for Nonla Agents",
+  "description": "NonlaUI — React controls for Nonla Agents",
   "author": "devlangla <devlangla0x01@gmail.com>",
   "license": "MIT",
   "repository": {

package/src/alert/Alert.tsx

@@ -5,7 +5,7 @@ export type AlertType = "success" | "info" | "warning" | "error";
 
 export type AlertProps = {
   type?: AlertType;
-  /** Primary text — antd `message` / `title`. */
+  /** Primary text — `message` / `title`. */
   message?: ReactNode;
   title?: ReactNode;
   description?: ReactNode;

package/src/app/App.tsx

@@ -1,36 +1,56 @@
-import { type ReactNode, createContext, useContext, useLayoutEffect, useMemo } from "react";
+import { type ReactNode, useLayoutEffect, useMemo, useState } from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { message, MessageHolder } 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";
 
-export type NonlaAppConfig = {
-  getPopupContainer?: () => HTMLElement;
-};
-
-const AppContext = createContext<NonlaAppConfig>({});
-
-export function useAppConfig() {
-  return useContext(AppContext);
-}
+export type { NonlaAppConfig };
+export { useAppConfig, usePopupContainer, useToken };
 
 export type AppProps = {
   children: ReactNode;
   getPopupContainer?: () => HTMLElement;
-  /** Override `--nonla-*` knobs on `:root`. Prefer CSS in the host app when possible. */
+  /** Default control size (`componentSize`). Per-control `size` still wins. */
+  componentSize?: ControlSize;
+  /** Override `--nonla-*` knobs on `:root` (portals inherit). Prefer CSS in the host when possible. */
   theme?: NonlaThemeConfig;
-  message?: unknown;
-  modal?: unknown;
 };
 
-/** Root host for NonlaUI (tooltip provider + theme). Mount once near app root. */
-export function App({ children, getPopupContainer, theme }: AppProps) {
-  const value = useMemo<NonlaAppConfig>(() => ({ getPopupContainer }), [getPopupContainer]);
+/** Root host for NonlaUI — ConfigProvider + message/modal holders. Mount once near app root. */
+export function App({ children, getPopupContainer, componentSize, theme }: AppProps) {
+  const [themeRev, setThemeRev] = useState(0);
+  const size = componentSize ? normalizeSize(componentSize) : undefined;
+  const value = useMemo<NonlaAppConfig>(
+    () => ({ getPopupContainer, componentSize: size, themeRev }),
+    [getPopupContainer, size, themeRev],
+  );
+
   useLayoutEffect(() => {
     if (!theme) return;
-    return applyNonlaTheme(theme);
+    const restore = applyNonlaTheme(theme);
+    setThemeRev((n) => n + 1);
+    return () => {
+      restore();
+      setThemeRev((n) => n + 1);
+    };
   }, [theme]);
+
   return (
     <AppContext.Provider value={value}>
-      <TooltipPrimitive.Provider delayDuration={100}>{children}</TooltipPrimitive.Provider>
+      <ControlSizeContext.Provider value={size}>
+        <TooltipPrimitive.Provider delayDuration={100}>
+          {children}
+          <MessageHolder />
+          <ConfirmHolder />
+        </TooltipPrimitive.Provider>
+      </ControlSizeContext.Provider>
     </AppContext.Provider>
   );
 }
+
+/** Static APIs that follow this App tree (`useApp`). */
+export function useApp() {
+  return { message, modal: Modal };
+}

package/src/app/context.ts

@@ -0,0 +1,32 @@
+import { createContext, useContext, useMemo } from "react";
+import type { CanonicalSize } from "../lib/sizes";
+import { getDesignToken, type NonlaTokenSnapshot } from "../theme";
+
+export type NonlaAppConfig = {
+  getPopupContainer?: () => HTMLElement;
+  componentSize?: CanonicalSize;
+  /** Bumps when `<App theme>` applies knobs — `useToken` re-reads CSS. */
+  themeRev: number;
+};
+
+export const AppContext = createContext<NonlaAppConfig>({ themeRev: 0 });
+
+export function useAppConfig() {
+  return useContext(AppContext);
+}
+
+/** Portal container for overlays (`getPopupContainer`). Always leaves the desktop stacking context. */
+export function usePopupContainer(override?: () => HTMLElement) {
+  const { getPopupContainer } = useAppConfig();
+  return () => (override ?? getPopupContainer)?.() ?? document.body;
+}
+
+/** Computed seed knobs under the current App theme (`useToken`). */
+export function useToken(): { token: NonlaTokenSnapshot } {
+  const { themeRev } = useAppConfig();
+  const token = useMemo(() => {
+    void themeRev;
+    return getDesignToken();
+  }, [themeRev]);
+  return { token };
+}

package/src/button/Button.tsx

@@ -1,7 +1,7 @@
 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 { cn } from "../lib/cn";
 import type { ControlSize } from "../lib/sizes";
-import { controlHeightVar, controlRadiusVar, getSizeTokens, normalizeSize } from "../lib/sizes";
+import { controlHeightVar, controlRadiusVar, getSizeTokens, useControlSize } from "../lib/sizes";
 
 export type ButtonType = "default" | "primary" | "dashed" | "link" | "text";
 export type ButtonVariant = "outlined" | "dashed" | "solid" | "filled" | "text" | "link";
@@ -154,7 +154,7 @@ const ButtonInner = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProp
   const resolvedHtmlType = (typeIsHtml ? typeProp : htmlType) as ButtonHtmlType;
 
   const groupSize = useContext(GroupSizeContext);
-  const size = normalizeSize(sizeProp ?? groupSize);
+  const size = useControlSize(sizeProp ?? groupSize);
   const tok = getSizeTokens(size);
   const [mergedColor, mergedVariant] = resolveTone(type, color, variant, danger);
   const preset = PRESET_COLORS.has(mergedColor);

package/src/calendar/Calendar.tsx

@@ -92,18 +92,18 @@ export function Calendar({
         month: cn("flex w-full flex-col gap-3", defaultClassNames.month),
         nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
         button_previous: cn(
-          "inline-flex size-[var(--cell-size)] items-center justify-center rounded-md p-0 text-foreground select-none",
+          "inline-flex size-(--cell-size) items-center justify-center rounded-md p-0 text-foreground select-none",
           "hover:bg-brand-50 disabled:opacity-40",
           defaultClassNames.button_previous,
         ),
         button_next: cn(
-          "inline-flex size-[var(--cell-size)] items-center justify-center rounded-md p-0 text-foreground select-none",
+          "inline-flex size-(--cell-size) items-center justify-center rounded-md p-0 text-foreground select-none",
           "hover:bg-brand-50 disabled:opacity-40",
           defaultClassNames.button_next,
         ),
-        month_caption: cn("flex h-[var(--cell-size)] w-full items-center justify-center px-[var(--cell-size)]", defaultClassNames.month_caption),
+        month_caption: cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
         caption_label: cn("select-none text-sm font-medium text-foreground", defaultClassNames.caption_label),
-        dropdowns: cn("flex h-[var(--cell-size)] w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
+        dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
         month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn("flex-1 select-none rounded-md text-[0.8rem] font-normal text-muted-foreground", defaultClassNames.weekday),

package/src/chat/AgentPanel.tsx

@@ -1,7 +1,7 @@
 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 } from "./common/types";
+import type { AgentMessage, AgentPanelEndpoint, AgentToolAction, AgentToolHook } from "./common/types";
 import { parseBgTaskRef } from "./common/bgTasks";
 import { useAgentStream } from "./common/useAgentStream";
 import { formatToolName } from "./common/utils";
@@ -14,7 +14,8 @@ 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 } from "./tool-ui/registry";
+import { resolveToolUI, type AgentToolUI } from "./tool-ui/registry";
+import { Shimmer } from "../shimmer/Shimmer";
 
 export type AgentPanelProps = {
   /** POST URL, or a function that returns an SSE `Response`. */
@@ -31,7 +32,12 @@ export type AgentPanelProps = {
   headers?: Record<string, string>;
   fetcher?: typeof fetch;
   initialMessages?: AgentMessage[];
+  /** Custom node in the composer toolbar (model picker, tools, …). */
   toolbar?: ReactNode;
+  /** Extra tool cards keyed by stream `toolName`. Checked before builtins. */
+  toolUis?: AgentToolUI[];
+  /** Tool lifecycle hooks, matched by `name` like `toolUis`. Omit `name` to hear every tool. */
+  toolHooks?: AgentToolHook[];
   accessory?: ReactNode;
   emptyState?: ReactNode;
   /** Overlay scrollbar — does not reserve layout space. */
@@ -77,14 +83,14 @@ function useStickToBottom() {
   return { scrollRef, onScroll, scrollToBottom };
 }
 
-function MessageRow({ msg, generating }: { msg: AgentMessage; generating: boolean }) {
+function MessageRow({ msg, generating, toolUis }: { msg: AgentMessage; generating: boolean; toolUis?: AgentToolUI[] }) {
   if (msg.role === "user") return <ChatUserMessage content={msg.content} />;
   if (msg.role === "error") return <ChatError>{msg.content}</ChatError>;
   if (msg.role === "thinking") {
     return <ChatThinking thinking={msg.content} duration={(msg.meta?.thinkingDuration as number) ?? 0} />;
   }
   if (msg.role === "tool-call") {
-    const CustomUI = resolveToolUI(msg.toolName);
+    const CustomUI = resolveToolUI(msg.toolName, toolUis);
     if (CustomUI) {
       return <CustomUI msg={msg} generating={generating} showAvatar={false} />;
     }
@@ -126,6 +132,8 @@ export function AgentPanel({
   fetcher,
   initialMessages,
   toolbar,
+  toolUis,
+  toolHooks,
   accessory,
   emptyState,
   scrollbar = "hover",
@@ -140,6 +148,7 @@ export function AgentPanel({
     fetcher,
     initialMessages,
     onToolAction,
+    toolHooks,
   });
   const { scrollRef, onScroll, scrollToBottom } = useStickToBottom();
   const [epoch, setEpoch] = useState(0);
@@ -180,11 +189,11 @@ export function AgentPanel({
           ) : (
             <div className="flex flex-col">
               {messages.map((msg) => (
-                <MessageRow key={msg.id} msg={msg} generating={generating} />
+                <MessageRow key={msg.id} msg={msg} generating={generating} toolUis={toolUis} />
               ))}
               {showFooter ? (
                 <div className="mt-1 px-4 pb-0.5">
-                  <span className="nonla-chat-shimmer text-(length:--chat-body-size) leading-5.5 font-medium">{status}</span>
+                  <Shimmer className="text-(length:--chat-body-size) leading-5.5 font-medium">{status}</Shimmer>
                 </div>
               ) : null}
             </div>

package/src/chat/common/types.ts

@@ -38,6 +38,31 @@ export type AgentStreamRequest = {
 /** POST URL, or a function that returns an SSE `Response`. */
 export type AgentPanelEndpoint = string | ((req: AgentStreamRequest) => Promise<Response>);
 
+/** Exact name, aliases, predicate, or omit/`*` for every tool. */
+export type AgentToolNameMatch = string | readonly string[] | ((toolName: string) => boolean);
+
+export type AgentToolCallEvent = {
+  toolCallId?: string;
+  toolName: string;
+  toolLabel: string;
+  input: unknown;
+};
+
+export type AgentToolResultEvent = {
+  toolCallId?: string;
+  toolName: string;
+  output: unknown;
+  /** Set when the tool ended without a real result (cancel, disconnect, timeout). */
+  error?: string;
+};
+
+/** Named tool lifecycle hooks. Omit `name` (or use `"*"`) to match every tool. */
+export type AgentToolHook = {
+  name?: AgentToolNameMatch;
+  onCall?: (event: AgentToolCallEvent) => void;
+  onResult?: (event: AgentToolResultEvent) => void;
+};
+
 export type AgentToolAction =
-  | { type: "tool-call"; toolName: string; toolLabel: string; input: unknown }
-  | { type: "tool-result"; toolName: string; output: unknown };
+  | ({ type: "tool-call" } & AgentToolCallEvent)
+  | ({ type: "tool-result" } & AgentToolResultEvent);

package/src/chat/common/useAgentStream.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { parseSseStream } from "./sse";
-import type { AgentHistoryMessage, AgentMessage, AgentPanelEndpoint, AgentToolAction } from "./types";
-import { formatToolName } from "./utils";
+import type { AgentHistoryMessage, AgentMessage, AgentPanelEndpoint, AgentToolAction, AgentToolCallEvent, AgentToolHook, AgentToolResultEvent } from "./types";
+import { formatToolName, matchesToolHook } from "./utils";
 
 let _id = 0;
 function nextId(prefix: string) {
@@ -69,9 +69,12 @@ export type UseAgentStreamOptions = {
   fetcher?: typeof fetch;
   initialMessages?: AgentMessage[];
   onToolAction?: (event: AgentToolAction) => void;
+  toolHooks?: AgentToolHook[];
 };
 
-export function useAgentStream({ endpoint, extraBody, headers, fetcher = fetch, initialMessages, onToolAction }: UseAgentStreamOptions) {
+type OpenTool = AgentToolCallEvent;
+
+export function useAgentStream({ endpoint, extraBody, headers, fetcher = fetch, initialMessages, onToolAction, toolHooks }: UseAgentStreamOptions) {
   const [messages, setMessages] = useState<AgentMessage[]>(() => initialMessages ?? []);
   const [generating, setGenerating] = useState(false);
   const thinkingRef = useRef("");
@@ -79,10 +82,44 @@ export function useAgentStream({ endpoint, extraBody, headers, fetcher = fetch,
   const abortRef = useRef<AbortController | null>(null);
   const onToolActionRef = useRef(onToolAction);
   onToolActionRef.current = onToolAction;
+  const toolHooksRef = useRef(toolHooks);
+  toolHooksRef.current = toolHooks;
   const extraBodyRef = useRef(extraBody);
   extraBodyRef.current = extraBody;
   const endpointRef = useRef(endpoint);
   endpointRef.current = endpoint;
+  const openToolsRef = useRef<Map<string, OpenTool>>(new Map());
+
+  const emitCall = useCallback((event: AgentToolCallEvent) => {
+    for (const hook of toolHooksRef.current ?? []) {
+      if (matchesToolHook(hook.name, event.toolName)) hook.onCall?.(event);
+    }
+    onToolActionRef.current?.({ type: "tool-call", ...event });
+  }, []);
+
+  const emitResult = useCallback((event: AgentToolResultEvent) => {
+    for (const hook of toolHooksRef.current ?? []) {
+      if (matchesToolHook(hook.name, event.toolName)) hook.onResult?.(event);
+    }
+    onToolActionRef.current?.({ type: "tool-result", ...event });
+  }, []);
+
+  const flushOpenTools = useCallback(
+    (error: string) => {
+      const open = [...openToolsRef.current.values()];
+      if (!open.length) return;
+      openToolsRef.current.clear();
+      for (const tool of open) {
+        emitResult({
+          toolCallId: tool.toolCallId,
+          toolName: tool.toolName,
+          output: { success: false, error },
+          error,
+        });
+      }
+    },
+    [emitResult],
+  );
 
   useEffect(() => {
     return () => {
@@ -94,20 +131,22 @@ export function useAgentStream({ endpoint, extraBody, headers, fetcher = fetch,
   const cancel = useCallback(() => {
     abortRef.current?.abort();
     abortRef.current = null;
+    flushOpenTools("Cancelled");
     setMessages((prev) => finalizeStreaming(failOpenTools(prev, "Cancelled")));
     setGenerating(false);
     thinkingRef.current = "";
     thinkingStartRef.current = 0;
-  }, []);
+  }, [flushOpenTools]);
 
   const clear = useCallback(() => {
     abortRef.current?.abort();
     abortRef.current = null;
+    flushOpenTools("Cancelled");
     setMessages([]);
     setGenerating(false);
     thinkingRef.current = "";
     thinkingStartRef.current = 0;
-  }, []);
+  }, [flushOpenTools]);
 
   const send = useCallback(
     async (text: string) => {
@@ -115,6 +154,7 @@ export function useAgentStream({ endpoint, extraBody, headers, fetcher = fetch,
       if (!trimmed || generating) return;
 
       abortRef.current?.abort();
+      flushOpenTools("Cancelled");
       const controller = new AbortController();
       abortRef.current = controller;
 
@@ -259,10 +299,18 @@ export function useAgentStream({ endpoint, extraBody, headers, fetcher = fetch,
             onToolCall: (event) => {
               const label = event.toolLabel ? (event.toolLabel.includes(" ") ? event.toolLabel : formatToolName(event.toolLabel)) : formatToolName(event.toolName);
               freezeOpen();
+              const id = nextId("tc");
+              const call: AgentToolCallEvent = {
+                toolCallId: event.toolCallId,
+                toolName: event.toolName,
+                toolLabel: label,
+                input: event.input,
+              };
+              openToolsRef.current.set(event.toolCallId || id, call);
               setMessages((prev) => [
                 ...prev,
                 {
-                  id: nextId("tc"),
+                  id,
                   role: "tool-call",
                   content: event.toolName,
                   toolCallId: event.toolCallId,
@@ -272,11 +320,21 @@ export function useAgentStream({ endpoint, extraBody, headers, fetcher = fetch,
                   timestamp: new Date(),
                 },
               ]);
-              onToolActionRef.current?.({ type: "tool-call", toolName: event.toolName, toolLabel: label, input: event.input });
+              emitCall(call);
             },
             onToolResult: (event) => {
               const raw = event.result;
               const resultStr = typeof raw === "string" ? raw : JSON.stringify(raw);
+              if (event.toolCallId) {
+                openToolsRef.current.delete(event.toolCallId);
+              } else {
+                for (const [key, tool] of [...openToolsRef.current.entries()].reverse()) {
+                  if (tool.toolName === event.toolName) {
+                    openToolsRef.current.delete(key);
+                    break;
+                  }
+                }
+              }
               setMessages((prev) => {
                 let matchIdx = -1;
                 if (event.toolCallId) {
@@ -289,15 +347,18 @@ export function useAgentStream({ endpoint, extraBody, headers, fetcher = fetch,
                 if (matchIdx === -1) return prev;
                 return prev.map((m, i) => (i === matchIdx ? { ...m, toolOutput: resultStr } : m));
               });
-              onToolActionRef.current?.({ type: "tool-result", toolName: event.toolName, output: raw });
+              emitResult({ toolCallId: event.toolCallId, toolName: event.toolName, output: raw });
             },
             onDone: () => {
+              flushOpenTools("Tool did not return a result");
               setMessages((prev) => finalizeStreaming(failOpenTools(prev, "Tool did not return a result")));
               setGenerating(false);
               thinkingRef.current = "";
               thinkingStartRef.current = 0;
             },
             onError: (error) => {
+              const reason = error === "cancelled" ? "Cancelled" : error;
+              flushOpenTools(reason);
               if (error === "Connection lost") {
                 setMessages((prev) => finalizeStreaming(failOpenTools(prev, "Connection lost")));
                 setGenerating(false);
@@ -306,7 +367,7 @@ export function useAgentStream({ endpoint, extraBody, headers, fetcher = fetch,
                 return;
               }
               setMessages((prev) => [
-                ...finalizeStreaming(failOpenTools(prev, error === "cancelled" ? "Cancelled" : error)),
+                ...finalizeStreaming(failOpenTools(prev, reason)),
                 ...(error === "cancelled" ? [] : [{ id: nextId("err"), role: "error" as const, content: error, timestamp: new Date() }]),
               ]);
               setGenerating(false);
@@ -318,6 +379,7 @@ export function useAgentStream({ endpoint, extraBody, headers, fetcher = fetch,
         );
 
         if (result === "aborted") {
+          flushOpenTools("Cancelled");
           setMessages((prev) => finalizeStreaming(failOpenTools(prev, "Cancelled")));
           setGenerating(false);
           thinkingRef.current = "";
@@ -325,26 +387,30 @@ export function useAgentStream({ endpoint, extraBody, headers, fetcher = fetch,
           return;
         }
 
+        flushOpenTools("Tool did not return a result");
         setMessages((prev) => finalizeStreaming(failOpenTools(prev, "Tool did not return a result")));
         setGenerating(false);
       } catch (err: unknown) {
         if ((err as Error)?.name === "AbortError") {
+          flushOpenTools("Cancelled");
           setMessages((prev) => finalizeStreaming(failOpenTools(prev, "Cancelled")));
           setGenerating(false);
           thinkingRef.current = "";
           thinkingStartRef.current = 0;
           return;
         }
+        const message = err instanceof Error ? err.message : String(err);
+        flushOpenTools(message);
         setMessages((prev) => [
-          ...finalizeStreaming(failOpenTools(prev, err instanceof Error ? err.message : String(err))),
-          { id: nextId("err"), role: "error", content: err instanceof Error ? err.message : String(err), timestamp: new Date() },
+          ...finalizeStreaming(failOpenTools(prev, message)),
+          { id: nextId("err"), role: "error", content: message, timestamp: new Date() },
         ]);
         setGenerating(false);
       } finally {
         abortRef.current = null;
       }
     },
-    [generating, messages, fetcher, headers],
+    [generating, messages, fetcher, headers, emitCall, emitResult, flushOpenTools],
   );
 
   return { messages, generating, send, cancel, clear };

package/src/chat/common/utils.ts

@@ -1,3 +1,5 @@
+import type { AgentToolNameMatch } from "./types";
+
 /** snake_case / camelCase → Title Case (e.g. edit_code → Edit Code). */
 export function formatToolName(name: string): string {
   return name
@@ -71,3 +73,14 @@ export function timestampMs(value: unknown): number {
   }
   return Date.now();
 }
+
+export function matchesToolName(match: AgentToolNameMatch, toolName: string): boolean {
+  if (typeof match === "function") return match(toolName);
+  if (typeof match === "string") return match === toolName;
+  return match.includes(toolName);
+}
+
+export function matchesToolHook(match: AgentToolNameMatch | undefined, toolName: string): boolean {
+  if (match == null || match === "*") return true;
+  return matchesToolName(match, toolName);
+}

package/src/chat/index.ts

@@ -13,8 +13,10 @@ export type { ChatErrorProps } from "./message-ui/ChatError";
 export { ChatToolCall } from "./tool-ui/ChatToolCall";
 export type { ChatToolCallProps } from "./tool-ui/ChatToolCall";
 
-export { resolveToolUI } from "./tool-ui/registry";
+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 { CallAgentToolUI } from "./tool-ui/CallAgentToolUI";
 export { WebFetchToolUI } from "./tool-ui/WebFetchToolUI";
 export { GetCurrentTimeToolUI } from "./tool-ui/GetCurrentTimeToolUI";
@@ -48,9 +50,9 @@ 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 } from "./common/types";
+export type { AgentMessage, AgentMessageRole, AgentHistoryMessage, AgentStreamRequest, AgentPanelEndpoint, AgentToolAction, AgentToolHook, AgentToolCallEvent, AgentToolResultEvent, AgentToolNameMatch } from "./common/types";
 
-export { formatToolName, prettyJson, isCallAgentToolName, parseCallAgentToolTargetId } from "./common/utils";
+export { formatToolName, prettyJson, isCallAgentToolName, parseCallAgentToolTargetId, matchesToolName, matchesToolHook } from "./common/utils";
 
 export { parseBgTaskRef, formatBgElapsed } from "./common/bgTasks";
 export type { ChatBgTask, ChatBgTaskStatus } from "./common/bgTasks";

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

@@ -21,7 +21,7 @@ export function ChatAgentMessage({ content, children, thinking, thinkingDuration
       {thinking ? <ChatThinking thinking={thinking} duration={thinkingDuration ?? 0} streaming={thinkingStreaming} /> : null}
       {body ? (
         <div className="min-w-0 px-4 pb-0.5">
-          <div className="nonla-chat-body text-(length:--chat-body-size) leading-(--chat-body-leading) text-[var(--nonla-ink)]">{body}</div>
+          <div className="nonla-chat-body text-(length:--chat-body-size) leading-(--chat-body-leading) text-(--nonla-ink)">{body}</div>
         </div>
       ) : null}
     </div>

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

@@ -136,7 +136,7 @@ export function ChatInput({ generating = false, placeholder = "Message…", disa
         <div className="flex-1" />
 
         {generating ? (
-          <button type="button" onClick={onCancel} title="Stop" className="w-6 h-6 rounded-full bg-brand text-white flex items-center justify-center shrink-0 cursor-pointer hover:bg-brand/90 active:scale-95 transition-all duration-100 border-0">
+          <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>