devnonla-ui 0.2.0 → 0.4.0

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

@@ -1,8 +1,8 @@
 import { type ReactNode, useState } from "react";
+import { FluentIcon } from "../../icon/FluentIcon";
 import { cn } from "../../lib/cn";
 import { Shimmer } from "../../shimmer/Shimmer";
 import { formatToolName, hasMeaningfulInput, prettyJson } from "../common/utils";
-import { ChatSpinner } from "../message-ui/ChatSpinner";
 import { ToolUiTrailing } from "./ToolUiTrailing";
 
 export type ChatToolCallProps = {
@@ -11,7 +11,7 @@ export type ChatToolCallProps = {
   toolInput?: unknown;
   toolOutput?: unknown;
   toolError?: boolean | string;
-  /** Show running spinner (pending execution). */
+  /** Pending execution — label shimmers, no spinner. */
   running?: boolean;
   /** Optional icon node (left of label). */
   icon?: ReactNode;
@@ -28,44 +28,38 @@ export function ChatToolCall({ toolName = "Tool", label, toolInput, toolOutput,
   const [open, setOpen] = useState(defaultOpen);
   const displayLabel = label ?? formatToolName(toolName);
 
-  const identityIcon = icon ?? (
-    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" className="shrink-0 text-muted-foreground" aria-hidden>
-      <path d="M8 7h8M8 12h8M8 17h5" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />
-      <rect x="4" y="4" width="16" height="16" rx="3" stroke="currentColor" strokeWidth="1.75" />
-    </svg>
-  );
+  const identityIcon = icon ?? <FluentIcon name="board-24" size={13} className="shrink-0" />;
 
   const header = (
     <>
       {identityIcon}
       <Shimmer active={running} className={cn("min-w-0 flex-1 truncate text-left text-[14px] font-medium", !running && "text-muted-foreground", expandable && !running && "transition-colors group-hover:text-foreground")}>{displayLabel}</Shimmer>
-      <ToolUiTrailing running={running} failed={hasError} chevron={expandable} chevronClassName={cn("group-hover:opacity-100", open && "opacity-100 rotate-90")} />
+      <ToolUiTrailing failed={hasError} chevron={expandable} chevronClassName={cn("group-hover:opacity-100", open && "opacity-100 rotate-90")} />
     </>
   );
 
   return (
     <div className={cn("nonla-chat-tool mt-1", className)}>
       <div className="px-4 pb-0.5">
-        <div className={cn("mb-1 overflow-hidden rounded-xl border", hasError ? "border-destructive/35" : "border-border")}>
+        <div className={cn("mb-1 overflow-hidden rounded-md", open && "bg-card")}>
           {expandable ? (
-            <button type="button" onClick={() => setOpen((v) => !v)} className={cn("group flex w-full cursor-pointer items-center gap-2 px-2.5 py-1.5 outline-none transition-colors hover:bg-muted border-0 bg-transparent", open && "bg-muted")}>
+            <button type="button" onClick={() => setOpen((v) => !v)} className="group flex w-full cursor-pointer items-center gap-2 border-0 bg-transparent px-2.5 py-1 outline-none">
               {header}
             </button>
           ) : (
-            <div className="flex w-full items-center gap-2 px-2.5 py-1.5">{header}</div>
+            <div className="flex w-full items-center gap-2 bg-transparent px-2.5 py-1">{header}</div>
           )}
 
           {open && expandable ? (
-            <div className="border-t border-border font-mono text-[14px]">
-              {hasInput ? <pre className="m-0 max-h-27.5 overflow-y-auto bg-transparent px-3 py-2 break-all whitespace-pre-wrap font-normal leading-[1.65] text-muted-foreground">{prettyJson(toolInput)}</pre> : null}
+            <div className="font-mono text-[13px]">
+              {hasInput ? <pre className="m-0 max-h-27.5 overflow-y-auto bg-well px-3 py-1.5 break-all whitespace-pre-wrap font-normal leading-[1.65] text-muted-foreground">{prettyJson(toolInput)}</pre> : null}
               {running ? (
-                <div className="flex items-center gap-2 border-t border-border bg-muted/40 px-3 py-2 text-muted-foreground">
-                  <ChatSpinner />
+                <div className="bg-well-strong px-3 py-1.5 text-muted-foreground">
                   <Shimmer className="italic">Running…</Shimmer>
                 </div>
               ) : null}
               {!isPending ? (
-                <pre className={cn("m-0 max-h-75 overflow-y-auto px-3 py-2 break-all whitespace-pre-wrap font-normal leading-[1.65] text-muted-foreground", hasInput && "border-t border-border", hasError ? "bg-destructive/6" : "bg-muted/40")}>
+                <pre className={cn("m-0 max-h-75 overflow-y-auto px-3 py-1.5 break-all whitespace-pre-wrap font-normal leading-[1.65] text-muted-foreground", hasError ? "bg-destructive/6" : "nonla-chat-tool-result-ok")}>
                   {hasOutput ? prettyJson(toolOutput) : typeof toolError === "string" ? toolError : "Tool execution failed"}
                 </pre>
               ) : null}

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

@@ -1,6 +1,6 @@
 import { FluentIcon } from "../../icon/FluentIcon";
-import { parseJsonObject } from "../common/utils";
 import { Shimmer } from "../../shimmer/Shimmer";
+import { parseJsonObject } from "../common/utils";
 import { ToolUiBadge } from "./ToolUiBadge";
 import { ToolUiTrailing } from "./ToolUiTrailing";
 import { isToolRunning, type ToolUIProps } from "./types";
@@ -42,7 +42,7 @@ export function GetCurrentTimeToolUI({ msg, assistantLabel = "Assistant", assist
         <div className="flex items-center gap-2 py-1">
           <FluentIcon name="clock-24" size={13} className="shrink-0 text-muted-foreground" />
           <Shimmer active={running} className="truncate text-[14px] font-medium tabular-nums text-muted-foreground">{hasError ? "Failed to get time" : running ? "Getting time…" : label}</Shimmer>
-          <ToolUiTrailing running={running} failed={hasError} />
+          <ToolUiTrailing failed={hasError} />
         </div>
       </div>
     </div>

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

@@ -60,16 +60,16 @@ export function ReadSkillToolUI({ msg, assistantLabel = "Assistant", assistantCo
             {verb}
             {targetLabel ? <span className="font-normal text-tertiary-foreground"> {targetLabel}</span> : null}
           </Shimmer>
-          <ToolUiTrailing running={running} failed={failed} chevron chevronClassName="group-hover/readskill:opacity-100 group-open/readskill:opacity-100 group-open/readskill:rotate-90" />
+          <ToolUiTrailing failed={failed} chevron chevronClassName="group-hover/readskill:opacity-100 group-open/readskill:opacity-100 group-open/readskill:rotate-90" />
         </summary>
         {body ? (
-          <pre className={cn("m-0 mt-1.5 mb-1 max-h-40 overflow-y-auto rounded-lg border px-3 py-2 font-mono text-[14px] font-normal leading-[1.65] break-all whitespace-pre-wrap", failed ? "border-destructive/35 bg-destructive/6 text-destructive" : "border-(--popper-border) bg-(--nonla-elevated) text-muted-foreground")}>{body}</pre>
+          <pre className={cn("m-0 mt-1.5 mb-1 max-h-40 overflow-y-auto rounded-lg border px-3 py-2 font-mono text-[13px] font-normal leading-[1.65] break-all whitespace-pre-wrap", failed ? "border-destructive/35 bg-destructive/6 text-destructive" : "border-(--popper-border) bg-(--nonla-elevated) text-muted-foreground")}>{body}</pre>
         ) : null}
         {!running && !reference && available.length > 0 ? (
           <div className="mt-0.5 mb-1 flex flex-wrap items-center gap-1">
             <span className="text-[10px] font-medium tracking-wide text-quaternary-foreground uppercase">Refs</span>
             {available.map((name) => (
-              <span key={name} className="inline-flex max-w-full items-center rounded-md border border-border-subtle bg-muted/40 px-1.5 py-0.5 font-mono text-[14px] leading-[1.4] text-tertiary-foreground">
+              <span key={name} className="inline-flex max-w-full items-center rounded-md border border-border-subtle bg-muted/40 px-1.5 py-0.5 font-mono text-[13px] leading-[1.4] text-tertiary-foreground">
                 {skillName ? `${skillName} / ${name}` : name}
               </span>
             ))}

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

@@ -1,6 +1,6 @@
+import { CodeBlock } from "../../codeblock/CodeBlock";
 import { FluentIcon } from "../../icon/FluentIcon";
 import { cn } from "../../lib/cn";
-import { CodeBlock } from "../../codeblock/CodeBlock";
 import { Shimmer } from "../../shimmer/Shimmer";
 import { parseBgTaskRef } from "../common/bgTasks";
 import { parseJsonObject, prettyJson } from "../common/utils";
@@ -87,7 +87,7 @@ export function RunJsToolUI({ msg, assistantLabel = "Assistant", assistantColor,
       <ToolUiBadge show={showAvatar} label={assistantLabel} color={assistantColor} />
       <details className="group/runjs px-4 pb-2" style={{ overflowAnchor: "none" }}>
         <summary className="flex cursor-pointer list-none items-center gap-2 py-0.5 text-[14px] leading-5.5 select-none [&::-webkit-details-marker]:hidden">
-          <FluentIcon name="code-24" size={13} className="shrink-0 text-muted-foreground" />
+          <FluentIcon name="code-block-24" size={13} className="shrink-0 text-muted-foreground" />
           <Shimmer active={running} className="min-w-0 truncate font-medium text-muted-foreground">{verb}</Shimmer>
           <ToolUiTrailing running={running} failed={failed} chevron chevronClassName="group-hover/runjs:opacity-100 group-open/runjs:opacity-100 group-open/runjs:rotate-90" />
         </summary>

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

@@ -1,4 +1,4 @@
-import { FluentIcon } from "../../icon/FluentIcon";
+import { ChevronRight, CircleX } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { ChatSpinner } from "../message-ui/ChatSpinner";
 
@@ -14,11 +14,7 @@ export function ToolUiTrailing({
   chevronClassName?: string;
 }) {
   if (running) return <ChatSpinner />;
-  if (failed) return <FluentIcon name="error-circle-24" size={13} className="text-destructive" />;
+  if (failed) return <CircleX size={13} className="text-destructive" aria-hidden />;
   if (!chevron) return null;
-  return (
-    <svg className={cn("h-3 w-3 shrink-0 opacity-0 transition-[opacity,transform] duration-150", chevronClassName)} 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>
-  );
+  return <ChevronRight size={12} className={cn("shrink-0 opacity-0 transition-[opacity,transform] duration-150", chevronClassName)} aria-hidden />;
 }

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

@@ -32,23 +32,32 @@ export function WebFetchToolUI({ msg, assistantLabel = "Assistant", assistantCol
   const running = isToolRunning(msg, generating);
   const url = output?.url || inputUrl(msg.toolInput) || "—";
   const body = failed ? (output?.error ?? (typeof msg.toolError === "string" ? msg.toolError : null) ?? "Tool execution failed") : output?.text?.trim() || "";
-  const verb = running || failed ? "Fetch page" : "Fetched page";
+  const expandable = Boolean(body);
+  const verb = running ? "Fetching page" : failed ? "Fetch page" : "Fetched page";
+
+  const header = (
+    <>
+      <FluentIcon name="globe-24" size={13} className="shrink-0 text-muted-foreground" />
+      <Shimmer active={running} className="min-w-0 truncate font-medium text-muted-foreground">
+        {verb} <span className="font-normal text-tertiary-foreground">{url}</span>
+      </Shimmer>
+      <ToolUiTrailing failed={failed} chevron={expandable} chevronClassName="group-hover/webfetch:opacity-100 group-open/webfetch:opacity-100 group-open/webfetch:rotate-90" />
+    </>
+  );
 
   return (
     <div className="mt-1 animate-fadeIn">
       <ToolUiBadge show={showAvatar} label={assistantLabel} color={assistantColor} />
-      <details className="group/webfetch px-4 pb-2" style={{ overflowAnchor: "none" }}>
-        <summary className="flex cursor-pointer list-none items-center gap-2 py-0.5 text-[14px] leading-5.5 select-none [&::-webkit-details-marker]:hidden">
-          <FluentIcon name="globe-24" size={13} className="shrink-0 text-muted-foreground" />
-          <Shimmer active={running} className="min-w-0 truncate font-medium text-muted-foreground">
-            {verb} <span className="font-normal text-tertiary-foreground">{url}</span>
-          </Shimmer>
-          <ToolUiTrailing running={running} failed={failed} chevron chevronClassName="group-hover/webfetch:opacity-100 group-open/webfetch:opacity-100 group-open/webfetch:rotate-90" />
-        </summary>
-        {body ? (
-          <pre className={cn("m-0 mt-1.5 mb-1 max-h-40 overflow-y-auto rounded-lg border px-3 py-2 font-mono text-[14px] font-normal leading-[1.65] break-all whitespace-pre-wrap", failed ? "border-destructive/35 bg-destructive/6 text-destructive" : "border-(--popper-border) bg-(--nonla-elevated) text-muted-foreground")}>{body}</pre>
-        ) : null}
-      </details>
+      {expandable ? (
+        <details className="group/webfetch px-4 pb-2" style={{ overflowAnchor: "none" }}>
+          <summary className="flex cursor-pointer list-none items-center gap-2 py-0.5 text-[14px] leading-5.5 select-none [&::-webkit-details-marker]:hidden">{header}</summary>
+          <pre className={cn("m-0 mt-1.5 mb-1 max-h-40 overflow-y-auto rounded-lg border px-3 py-2 font-mono text-[13px] font-normal leading-[1.65] break-all whitespace-pre-wrap", failed ? "border-destructive/35 bg-destructive/6 text-destructive" : "border-(--popper-border) bg-(--nonla-elevated) text-muted-foreground")}>{body}</pre>
+        </details>
+      ) : (
+        <div className="px-4 pb-2">
+          <div className="flex items-center gap-2 py-0.5 text-[14px] leading-5.5">{header}</div>
+        </div>
+      )}
     </div>
   );
 }

package/src/checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { type ComponentPropsWithoutRef, type ReactNode, forwardRef } from "react";
+import { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from "react";
 import { cn } from "../lib/cn";
 
 export type CheckboxProps = Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "onCheckedChange" | "checked" | "onChange"> & {

package/src/codeblock/CodeBlock.tsx

@@ -1,6 +1,9 @@
-import { type ComponentProps, type ReactNode, createContext, useContext, useMemo } from "react";
+import { FileText } from "lucide-react";
+import { type ComponentProps, createContext, type ReactNode, useContext, useMemo } from "react";
 import { ButtonCopy } from "../button/ButtonCopy";
 import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/sizes";
+import { OverlayScroll } from "../scroll/OverlayScroll";
 import { highlightCode, languageLabel, wrapHljsLines } from "./highlight";
 
 type CodeBlockContextValue = {
@@ -22,16 +25,9 @@ export type CodeBlockProps = ComponentProps<"div"> & {
   wordWrap?: boolean;
 };
 
-function CodeFileIcon({ size = 14 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 256 256" aria-hidden>
-      <path fill="none" stroke="currentColor" strokeWidth="25" strokeLinecap="round" d="M208 128l-80 80M192 40 40 192" />
-    </svg>
-  );
-}
-
-export type CodeBlockCopyButtonProps = ComponentProps<"button"> & {
+export type CodeBlockCopyButtonProps = Omit<ComponentProps<"button">, "size"> & {
   content?: string;
+  size?: ControlSize;
 };
 
 export function CodeBlockCopyButton({ content, className, ...props }: CodeBlockCopyButtonProps) {
@@ -54,7 +50,7 @@ export function CodeBlock({ code, language, title, lineNumbers = false, wordWrap
           <div className="flex min-w-0 items-center gap-2">
             {label ? (
               <>
-                <CodeFileIcon />
+                <FileText size={14} className="shrink-0" aria-hidden />
                 <span className="truncate font-medium">{label}</span>
               </>
             ) : null}
@@ -62,14 +58,16 @@ export function CodeBlock({ code, language, title, lineNumbers = false, wordWrap
           <CodeBlockCopyButton />
         </div>
 
-        <div className={cn("nonla-codeblock-body nonla-codeblock-well relative min-w-0 overflow-y-auto bg-card font-mono text-[13px] leading-5", children ? "max-h-96" : "mx-0.5 mb-0.5 max-h-96 rounded-lg")}>
-          <div className={cn("w-full", !wordWrap && "overflow-x-auto")}>
-            <pre className={cn("nonla-codeblock-pre m-0 whitespace-pre break-normal", lineNumbers && "nonla-codeblock-lines", wordWrap && "whitespace-pre-wrap wrap-break-word")}>
-              {/* biome-ignore lint/security/noDangerouslySetInnerHtml: highlight.js emits escaped HTML */}
-              <code className={cn("block px-3 py-2.5", !wordWrap && "w-max min-w-full")} dangerouslySetInnerHTML={{ __html: html }} />
-            </pre>
-          </div>
-        </div>
+        <OverlayScroll
+          autoHeight
+          className={cn("nonla-codeblock-body nonla-codeblock-well min-w-0 bg-card font-mono text-[13px] leading-5 max-h-96", !children && "mx-0.5 mb-0.5 rounded-lg")}
+          innerClassName={wordWrap ? undefined : "overflow-x-auto"}
+        >
+          <pre className={cn("nonla-codeblock-pre m-0 whitespace-pre break-normal", lineNumbers && "nonla-codeblock-lines", wordWrap && "whitespace-pre-wrap wrap-break-word")}>
+            {/* biome-ignore lint/security/noDangerouslySetInnerHtml: highlight.js emits escaped HTML */}
+            <code className={cn("block px-3 py-2.5", !wordWrap && "w-max min-w-full")} dangerouslySetInnerHTML={{ __html: html }} />
+          </pre>
+        </OverlayScroll>
         {children}
       </div>
     </CodeBlockContext.Provider>