devnonla-ui 0.1.0 → 0.2.0

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

@@ -24,11 +24,11 @@ export const chatMarkdownClass = cn(
   "[&_strong]:font-semibold [&_em]:italic",
   "[&_blockquote]:m-0 [&_blockquote]:mb-(--chat-p-mb) [&_blockquote]:border-0 [&_blockquote]:p-0 [&_blockquote]:not-italic [&_blockquote]:text-inherit [&_blockquote:last-child]:mb-0",
   "[&_ul]:mt-2 [&_ul]:mb-(--chat-p-mb)",
-  "[&_ul:not(.contains-task-list)]:list-disc [&_ul:not(.contains-task-list)]:pl-[26px]",
-  "[&_ul.contains-task-list]:list-none [&_ul.contains-task-list]:pl-[26px]",
+  "[&_ul:not(.contains-task-list)]:list-disc [&_ul:not(.contains-task-list)]:pl-6.5",
+  "[&_ul.contains-task-list]:list-none [&_ul.contains-task-list]:pl-6.5",
   "[&_li.task-list-item]:relative",
-  "[&_li.task-list-item>.nonla-md-task-check]:absolute [&_li.task-list-item>.nonla-md-task-check]:top-0 [&_li.task-list-item>.nonla-md-task-check]:left-[-22px]",
-  "[&_ol]:mt-2 [&_ol]:mb-(--chat-p-mb) [&_ol]:list-decimal [&_ol]:pl-[26px]",
+  "[&_li.task-list-item>.nonla-md-task-check]:absolute [&_li.task-list-item>.nonla-md-task-check]:top-0 [&_li.task-list-item>.nonla-md-task-check]:-left-5.5",
+  "[&_ol]:mt-2 [&_ol]:mb-(--chat-p-mb) [&_ol]:list-decimal [&_ol]:pl-6.5",
   "[&_li]:my-1.5 [&_li]:leading-(--chat-body-leading)",
   "[&_a]:text-link [&_a]:no-underline [&_a]:hover:underline [&_a]:hover:underline-offset-[3px]",
 );
@@ -78,14 +78,14 @@ export function createChatMarkdownComponents(getState?: () => ChatMarkdownStream
     th({ children }) {
       return (
         <th>
-          <div className="inline-block max-w-[300px] wrap-break-word">{children}</div>
+          <div className="inline-block max-w-75 wrap-break-word">{children}</div>
         </th>
       );
     },
     td({ children }) {
       return (
         <td>
-          <div className="inline-block max-w-[300px] wrap-break-word">{children}</div>
+          <div className="inline-block max-w-75 wrap-break-word">{children}</div>
         </td>
       );
     },

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

@@ -35,7 +35,7 @@ export function ChatMarkdownTable({ children }: { children: ReactNode }) {
       <div className="overflow-x-auto">
         <table
           ref={tableRef}
-          className="w-max min-w-full wrap-normal border-separate border-spacing-0 text-[14px] [&_th]:bg-foreground/[0.04] [&_th]:text-foreground [&_th]:font-semibold [&_th]:px-2.5 [&_th]:py-1.5 [&_th]:text-left [&_th]:align-top [&_th]:border-r [&_th]:border-b [&_th]:border-border [&_th:last-child]:border-r-0 [&_td]:px-2.5 [&_td]:py-1.5 [&_td]:align-top [&_td]:text-foreground [&_td]:bg-card [&_td]:border-r [&_td]:border-b [&_td]:border-border [&_td:last-child]:border-r-0 [&_tbody_tr:last-child_td]:border-b-0"
+          className="w-max min-w-full wrap-normal border-separate border-spacing-0 text-[14px] [&_th]:bg-foreground/4 [&_th]:text-foreground [&_th]:font-semibold [&_th]:px-2.5 [&_th]:py-1.5 [&_th]:text-left [&_th]:align-top [&_th]:border-r [&_th]:border-b [&_th]:border-border [&_th:last-child]:border-r-0 [&_td]:px-2.5 [&_td]:py-1.5 [&_td]:align-top [&_td]:text-foreground [&_td]:bg-card [&_td]:border-r [&_td]:border-b [&_td]:border-border [&_td:last-child]:border-r-0 [&_tbody_tr:last-child_td]:border-b-0"
         >
           {children}
         </table>

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

@@ -1,5 +1,6 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { cn } from "../../lib/cn";
+import { Shimmer } from "../../shimmer/Shimmer";
 
 export type ChatThinkingProps = {
   thinking: string;
@@ -46,9 +47,9 @@ export function ChatThinking({ thinking, duration = 0, streaming = false, classN
         if (el) el.scrollTop = el.scrollHeight;
       }}
     >
-      <summary className="cursor-pointer select-none text-sm font-medium text-tertiary-foreground flex items-center gap-1 py-0.5 list-none [&::-webkit-details-marker]:hidden">
-        <span className={streaming ? "nonla-chat-shimmer" : undefined}>{label}</span>
-        <svg className="w-3 h-3 shrink-0 opacity-0 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>
+      <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>
       </summary>

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

@@ -25,21 +25,13 @@ export function ChatUserMessage({ content, className }: ChatUserMessageProps) {
 
   const collapsed = isOverflow && !isExpanded;
 
-  const toggle = () => {
-    const sel = window.getSelection();
-    if (sel?.toString()) return;
-    setIsExpanded((v) => !v);
-  };
-
   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",
-        isOverflow && "cursor-pointer",
         className,
       )}
-      onClick={isOverflow ? toggle : undefined}
     >
       <div
         ref={contentRef}

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

@@ -257,7 +257,17 @@ export function MermaidBlock({ children, className }: MermaidBlockProps) {
           ) : null}
         </div>
 
-        <div onWheel={handleWheel} onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} onMouseLeave={handleMouseLeave} onDoubleClick={resetView} className={cn("flex-1 overflow-hidden w-full h-full select-none", isDragging ? "cursor-grabbing" : "cursor-grab")}>
+        <div
+          role="application"
+          aria-label="Pan and zoom diagram"
+          onWheel={handleWheel}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseUp}
+          onMouseLeave={handleMouseLeave}
+          onDoubleClick={resetView}
+          className={cn("flex-1 overflow-hidden w-full h-full select-none", isDragging ? "cursor-grabbing" : "cursor-grab")}
+        >
           <div ref={fullscreenRef} className="flex items-center justify-center w-full h-full origin-center [&_svg]:max-w-none [&_svg]:max-h-none pointer-events-none" style={{ transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})` }} />
         </div>
       </dialog>

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

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { Shimmer } from "../../shimmer/Shimmer";
 import { formatBgElapsed, parseBgTaskRef } from "../common/bgTasks";
 import { formatToolName, timestampMs } from "../common/utils";
 import { ChatSpinner } from "../message-ui/ChatSpinner";
@@ -24,7 +25,7 @@ export function BackgroundTaskToolUI({ msg, assistantLabel = "Assistant", assist
           <div className="min-w-0 flex-1 pl-2">
             <div className="flex items-center gap-2 py-1">
               <ChatSpinner />
-              <span className="min-w-0 flex-1 truncate text-[14px] font-medium text-foreground">{label}</span>
+              <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>

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

@@ -1,6 +1,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 { formatBgElapsed, parseBgTaskRef } from "../common/bgTasks";
 import { parseJsonObject, prettyJson, timestampMs } from "../common/utils";
 import { ChatMarkdown } from "../message-ui/ChatMarkdown";
@@ -30,7 +31,7 @@ function parseCallAgentOutput(raw: unknown): CallAgentParsed | null {
 
 function TypingDots() {
   return (
-    <div className="flex items-center gap-1 px-0.5 py-0.5" aria-label="Typing">
+    <div className="flex items-center gap-1 px-0.5 py-0.5" role="status" aria-label="Typing">
       {[0, 1, 2].map((i) => (
         <span key={i} className="size-1.5 rounded-full bg-muted-foreground/50 animate-bounce" style={{ animationDelay: `${i * 150}ms` }} />
       ))}
@@ -121,7 +122,7 @@ export function CallAgentToolUI({ msg, assistantLabel = "Assistant", assistantCo
         <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" />
-            <span className="min-w-0 flex-1 truncate text-[14px] font-medium text-foreground">Calling {calleeName}</span>
+            <Shimmer active={composing || awaitingReply} 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} />

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

@@ -1,5 +1,6 @@
 import { type ReactNode, useState } from "react";
 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";
@@ -37,7 +38,7 @@ export function ChatToolCall({ toolName = "Tool", label, toolInput, toolOutput,
   const header = (
     <>
       {identityIcon}
-      <span className={cn("min-w-0 flex-1 truncate text-left text-[14px] font-medium", running ? "nonla-chat-shimmer" : "text-muted-foreground", expandable && !running && "transition-colors group-hover:text-foreground")}>{displayLabel}</span>
+      <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")} />
     </>
   );
@@ -60,7 +61,7 @@ export function ChatToolCall({ toolName = "Tool", label, toolInput, toolOutput,
               {running ? (
                 <div className="flex items-center gap-2 border-t border-border bg-muted/40 px-3 py-2 text-muted-foreground">
                   <ChatSpinner />
-                  <span className="italic">Running…</span>
+                  <Shimmer className="italic">Running…</Shimmer>
                 </div>
               ) : null}
               {!isPending ? (

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

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

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

@@ -1,5 +1,6 @@
 import { FluentIcon } from "../../icon/FluentIcon";
 import { cn } from "../../lib/cn";
+import { Shimmer } from "../../shimmer/Shimmer";
 import { parseJsonObject } from "../common/utils";
 import { ToolUiBadge } from "./ToolUiBadge";
 import { ToolUiTrailing } from "./ToolUiTrailing";
@@ -55,10 +56,10 @@ export function ReadSkillToolUI({ msg, assistantLabel = "Assistant", assistantCo
       <details className="group/readskill 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={reference ? "document-text-24" : "book-24"} size={13} className="shrink-0 text-muted-foreground" />
-          <span className={cn("min-w-0 truncate font-medium text-muted-foreground", running && "nonla-chat-shimmer")}>
+          <Shimmer active={running} className="min-w-0 truncate font-medium text-muted-foreground">
             {verb}
             {targetLabel ? <span className="font-normal text-tertiary-foreground"> {targetLabel}</span> : null}
-          </span>
+          </Shimmer>
           <ToolUiTrailing running={running} failed={failed} chevron chevronClassName="group-hover/readskill:opacity-100 group-open/readskill:opacity-100 group-open/readskill:rotate-90" />
         </summary>
         {body ? (

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

@@ -1,6 +1,7 @@
 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";
 import { ChatSpinner } from "../message-ui/ChatSpinner";
@@ -46,7 +47,7 @@ function SandboxOutput({
     return (
       <div className="flex items-center gap-2 border-t border-border px-3 py-2 text-[13px] text-muted-foreground">
         <ChatSpinner />
-        <span>Running…</span>
+        <Shimmer>Running…</Shimmer>
       </div>
     );
   }
@@ -87,7 +88,7 @@ export function RunJsToolUI({ msg, assistantLabel = "Assistant", 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" />
-          <span className={cn("min-w-0 truncate font-medium text-muted-foreground", running && "nonla-chat-shimmer")}>{verb}</span>
+          <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/WebFetchToolUI.tsx

@@ -1,5 +1,6 @@
 import { FluentIcon } from "../../icon/FluentIcon";
 import { cn } from "../../lib/cn";
+import { Shimmer } from "../../shimmer/Shimmer";
 import { parseJsonObject } from "../common/utils";
 import { ToolUiBadge } from "./ToolUiBadge";
 import { ToolUiTrailing } from "./ToolUiTrailing";
@@ -39,9 +40,9 @@ export function WebFetchToolUI({ msg, assistantLabel = "Assistant", assistantCol
       <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" />
-          <span className={cn("min-w-0 truncate font-medium text-muted-foreground", running && "nonla-chat-shimmer")}>
+          <Shimmer active={running} className="min-w-0 truncate font-medium text-muted-foreground">
             {verb} <span className="font-normal text-tertiary-foreground">{url}</span>
-          </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 ? (

package/src/chat/tool-ui/registry.ts

@@ -1,5 +1,6 @@
 import type { ComponentType } from "react";
-import { isCallAgentToolName } from "../common/utils";
+import type { AgentToolNameMatch } from "../common/types";
+import { isCallAgentToolName, matchesToolName } from "../common/utils";
 import { CallAgentToolUI } from "./CallAgentToolUI";
 import { GetCurrentTimeToolUI } from "./GetCurrentTimeToolUI";
 import { ReadSkillToolUI } from "./ReadSkillToolUI";
@@ -7,23 +8,34 @@ import { RunJsToolUI } from "./RunJsToolUI";
 import type { ToolUIProps } from "./types";
 import { WebFetchToolUI } from "./WebFetchToolUI";
 
-type ToolUIEntry = {
-  match: (toolName: string) => boolean;
+/** Exact name, aliases, or a predicate (e.g. `call_agent__*`). */
+export type AgentToolUIName = AgentToolNameMatch;
+
+export type AgentToolUI = {
+  name: AgentToolUIName;
   component: ComponentType<ToolUIProps>;
 };
 
-const TOOL_UIS: ToolUIEntry[] = [
-  { match: isCallAgentToolName, component: CallAgentToolUI },
-  { match: (n) => n === "web_fetch" || n === "fetch_url" || n === "browser", component: WebFetchToolUI },
-  { match: (n) => n === "get_current_time", component: GetCurrentTimeToolUI },
-  { match: (n) => n === "read_skill", component: ReadSkillToolUI },
-  { match: (n) => n === "run_js", component: RunJsToolUI },
+export function matchesToolUIName(name: AgentToolUIName, toolName: string): boolean {
+  return matchesToolName(name, toolName);
+}
+
+export const builtinToolUis: AgentToolUI[] = [
+  { name: isCallAgentToolName, component: CallAgentToolUI },
+  { name: ["web_fetch", "fetch_url", "browser"], component: WebFetchToolUI },
+  { name: "get_current_time", component: GetCurrentTimeToolUI },
+  { name: "read_skill", component: ReadSkillToolUI },
+  { name: "run_js", component: RunJsToolUI },
 ];
 
-export function resolveToolUI(toolName: string | null | undefined): ComponentType<ToolUIProps> | null {
+/** App `toolUis` win on the same name; builtins are the fallback. */
+export function resolveToolUI(toolName: string | null | undefined, extras?: readonly AgentToolUI[] | null): ComponentType<ToolUIProps> | null {
   if (!toolName) return null;
-  for (const entry of TOOL_UIS) {
-    if (entry.match(toolName)) return entry.component;
+  const lists = extras?.length ? [extras, builtinToolUis] : [builtinToolUis];
+  for (const list of lists) {
+    for (const entry of list) {
+      if (matchesToolUIName(entry.name, toolName)) return entry.component;
+    }
   }
   return null;
 }

package/src/checkbox/Checkbox.tsx

@@ -5,7 +5,7 @@ import { cn } from "../lib/cn";
 export type CheckboxProps = Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "onCheckedChange" | "checked" | "onChange"> & {
   checked?: boolean | "indeterminate";
   defaultChecked?: boolean;
-  /** antd-style — receives next checked boolean (not a DOM event). */
+  /** Receives next checked boolean (not a DOM event). */
   onChange?: (checked: boolean) => void;
   children?: ReactNode;
   indeterminate?: boolean;
@@ -25,6 +25,7 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(function Ch
 ) {
   const resolved = indeterminate ? "indeterminate" : checked;
   return (
+    // biome-ignore lint/a11y/noLabelWithoutControl: wraps Radix checkbox button, not a native input
     <label className={cn("inline-flex items-center gap-2 text-sm text-foreground cursor-pointer", disabled && "opacity-45 cursor-not-allowed")}>
       <CheckboxPrimitive.Root
         ref={ref}
@@ -33,9 +34,9 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(function Ch
         disabled={disabled}
         onCheckedChange={(v) => onChange?.(v === true)}
         className={cn(
-          "size-4 shrink-0 rounded-[4px] border border-input bg-[var(--control-bg)] transition-colors duration-150 ease-[cubic-bezier(0.16,1,0.3,1)]",
-          "focus-visible:outline-none data-[state=checked]:bg-brand data-[state=checked]:border-brand data-[state=checked]:text-[var(--nonla-solid-fg)]",
-          "data-[state=indeterminate]:bg-brand data-[state=indeterminate]:border-brand data-[state=indeterminate]:text-[var(--nonla-solid-fg)]",
+          "size-4 shrink-0 rounded-sm border border-input bg-(--control-bg) transition-colors duration-150 ease-[cubic-bezier(0.16,1,0.3,1)]",
+          "focus-visible:outline-none data-[state=checked]:bg-brand data-[state=checked]:border-brand data-[state=checked]:text-(--nonla-solid-fg)",
+          "data-[state=indeterminate]:bg-brand data-[state=indeterminate]:border-brand data-[state=indeterminate]:text-(--nonla-solid-fg)",
           className,
         )}
         {...rest}

package/src/codeblock/CodeBlock.tsx

@@ -65,6 +65,7 @@ export function CodeBlock({ code, language, title, lineNumbers = false, wordWrap
         <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>

package/src/datepicker/DatePicker.tsx

@@ -16,8 +16,9 @@ import {
 import type { DateRange } from "react-day-picker";
 import { Calendar } from "../calendar/Calendar";
 import { Button } from "../button/Button";
+import { usePopupContainer } from "../app/context";
 import { cn } from "../lib/cn";
-import { type ControlSize, controlFieldFocusBorder, controlFieldStyle, controlFieldSurface, controlFieldTransition, controlStatusClass, getSizeTokens } from "../lib/sizes";
+import { type ControlSize, controlFieldFocusBorder, controlFieldStyle, controlFieldSurface, controlFieldTransition, controlStatusClass, getSizeTokens, useControlSize } from "../lib/sizes";
 import { glassOverlayClass } from "../lib/surface";
 
 export type DatePickerProps = {
@@ -29,7 +30,7 @@ export type DatePickerProps = {
   allowClear?: boolean;
   format?: string;
   showTime?: boolean;
-  /** Keep the panel open until OK (antd). */
+  /** Keep the panel open until OK. */
   needConfirm?: boolean;
   placeholder?: string;
   disabled?: boolean;
@@ -127,6 +128,7 @@ const TriggerChrome = forwardRef<
     children: ReactNode;
   } & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "style">
 >(function TriggerChrome({ size, status, disabled, className, style, icon, clear, children, ...rest }, ref) {
+  const resolvedSize = useControlSize(size);
   return (
     <button
       ref={ref}
@@ -141,7 +143,7 @@ const TriggerChrome = forwardRef<
         controlStatusClass(status),
         className,
       )}
-      style={{ ...controlFieldStyle(size), ...style }}
+      style={{ ...controlFieldStyle(resolvedSize), ...style }}
       {...rest}
     >
       {icon}
@@ -185,7 +187,9 @@ const DatePickerRoot = forwardRef<HTMLButtonElement, DatePickerProps>(function D
   };
   const [month, setMonth] = useState<Date>(() => selected ?? new Date());
   const [draft, setDraft] = useState<Date | undefined>(selected);
-  const tok = getSizeTokens(size);
+  const resolvedSize = useControlSize(size);
+  const tok = getSizeTokens(resolvedSize);
+  const portal = usePopupContainer()?.();
   const confirm = Boolean(needConfirm);
 
   useEffect(() => {
@@ -253,7 +257,7 @@ const DatePickerRoot = forwardRef<HTMLButtonElement, DatePickerProps>(function D
       <PopoverPrimitive.Trigger asChild>
         <TriggerChrome
           ref={ref}
-          size={size}
+          size={resolvedSize}
           status={status}
           disabled={disabled}
           className={className}
@@ -277,7 +281,7 @@ const DatePickerRoot = forwardRef<HTMLButtonElement, DatePickerProps>(function D
           <span className={cn(!selected && "text-quaternary-foreground")}>{selected ? label : placeholder}</span>
         </TriggerChrome>
       </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Portal container={portal}>
         <PopoverPrimitive.Content
           align="start"
           sideOffset={6}
@@ -351,7 +355,9 @@ const RangePicker = forwardRef<HTMLButtonElement, RangePickerProps>(function Ran
   const selected = controlled ? parseRange(value) : inner;
   const [open, setOpen] = useState(false);
   const [month, setMonth] = useState<Date>(() => selected?.from ?? new Date());
-  const tok = getSizeTokens(size);
+  const resolvedSize = useControlSize(size);
+  const tok = getSizeTokens(resolvedSize);
+  const portal = usePopupContainer()?.();
 
   useEffect(() => {
     if (selected?.from) setMonth(selected.from);
@@ -390,7 +396,7 @@ const RangePicker = forwardRef<HTMLButtonElement, RangePickerProps>(function Ran
       <PopoverPrimitive.Trigger asChild>
         <TriggerChrome
           ref={ref}
-          size={size}
+          size={resolvedSize}
           status={status}
           disabled={disabled}
           className={className}
@@ -418,7 +424,7 @@ const RangePicker = forwardRef<HTMLButtonElement, RangePickerProps>(function Ran
           </span>
         </TriggerChrome>
       </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Portal container={portal}>
         <PopoverPrimitive.Content
           align="start"
           sideOffset={6}

package/src/desktop/DesktopHeader.tsx

@@ -78,7 +78,7 @@ export function DesktopHeader({
   profile?: ReactNode;
 }) {
   return (
-    <header className="fixed inset-x-0 top-0 z-40 flex h-desktop-bar items-center justify-between gap-3 border-0 bg-glass-bar px-3 backdrop-blur-lg">
+    <header className="nonla-header-layer fixed inset-x-0 top-0 flex h-desktop-bar items-center justify-between gap-3 border-0 bg-glass-bar px-3 backdrop-blur-lg">
       <div className="flex min-w-0 items-center">
         {logo}
         {leading}

package/src/desktop/DesktopIcon.tsx

@@ -6,9 +6,7 @@ const iconButtonClass =
 
 const labelClass = "text-xs leading-[18px] font-semibold text-center line-clamp-2 w-full";
 
-function plateClass(active: boolean) {
-  return `w-11 h-11 flex items-center justify-center filter-[drop-shadow(0_1px_2px_rgba(0,0,0,0.45))] ${active ? "ring-2 ring-brand rounded-[10px]" : ""}`;
-}
+const plateClass = "nonla-window-glass nonla-desktop-icon-plate w-11 h-11 flex items-center justify-center";
 
 export const DesktopIcon = forwardRef<
   HTMLButtonElement,
@@ -24,7 +22,7 @@ export const DesktopIcon = forwardRef<
   return (
     <button ref={ref} type="button" title={label} aria-label={label} aria-current={active ? "true" : undefined} dir="ltr" onClick={onClick} className={iconButtonClass}>
       {media ?? (
-        <span className={plateClass(active)}>
+        <span className={plateClass}>
           <FluentIcon name={icon ?? "sparkle-24"} size={32} />
         </span>
       )}

package/src/desktop/DesktopWindow.tsx

@@ -1,6 +1,7 @@
 import { type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode, createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "../lib/cn";
+import { OverlayScroll, type OverlayScrollVisibility } from "../scroll/OverlayScroll";
 import { glassSurfaceClass } from "../lib/surface";
 
 type Phase = "open" | "leaving";
@@ -211,12 +212,17 @@ export function DesktopWindow({
   expanded,
   onClose,
   onToggleExpand,
+  scroll = true,
+  scrollbar = "hover",
   children,
 }: {
   title?: ReactNode;
   expanded: boolean;
   onClose: () => void;
   onToggleExpand: () => void;
+  /** Overlay auto-hide scrollbar on the body. Pass `false` when children manage their own scroll (split panes, AgentPanel). */
+  scroll?: boolean;
+  scrollbar?: OverlayScrollVisibility;
   children: ReactNode;
 }) {
   const overlayRef = useRef<HTMLDivElement>(null);
@@ -444,7 +450,7 @@ export function DesktopWindow({
 
   return (
     <WindowHeaderSlotContext.Provider value={headerChrome}>
-      <div ref={overlayRef} className="pointer-events-none absolute inset-x-0 bottom-0 top-desktop-bar z-30">
+      <div ref={overlayRef} className="nonla-window-layer pointer-events-none absolute inset-x-0 bottom-0 top-desktop-bar">
         <section
           ref={frameRef}
           aria-label={typeof title === "string" && title ? title : "Window"}
@@ -464,16 +470,16 @@ export function DesktopWindow({
             opacity: visible ? 1 : 0,
             transform: visible ? "scale(1)" : "scale(0.18)",
             transition: [geom, fade].filter(Boolean).join(", ") || undefined,
-            ["--glass" as string]: "color-mix(in srgb, white 72%, transparent)",
           }}
           data-expanded={expanded || undefined}
-          className={cn("absolute flex flex-col rounded-xl pointer-events-auto transform-gpu", glassSurfaceClass, leaving && "pointer-events-none")}
+          className={cn("absolute flex flex-col rounded-xl pointer-events-auto transform-gpu", glassSurfaceClass, "nonla-window-glass", leaving && "pointer-events-none")}
         >
           <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl">
+            {/* biome-ignore lint/a11y/noStaticElementInteractions: title bar is a pointer drag surface */}
             <header
               onPointerDown={startDrag}
               onDoubleClick={onTitleBarDoubleClick}
-              className="flex h-8 shrink-0 cursor-default items-center gap-4 border-0 border-b border-solid border-glass-border px-3 select-none touch-none"
+              className="flex h-8 shrink-0 cursor-default items-center gap-4 border-0 border-b border-solid border-ink-line px-3 select-none touch-none"
             >
               <div className="group/traffic flex shrink-0 items-center gap-2">
                 <TrafficLight label="Close window" tone="close" onClick={requestClose} shortcut="Esc">
@@ -489,7 +495,15 @@ export function DesktopWindow({
               </div>
             </header>
 
-            <div className="min-h-0 flex-1 overflow-hidden">{children}</div>
+            <div className="min-h-0 flex-1 overflow-hidden">
+              {scroll ? (
+                <OverlayScroll visibility={scrollbar} className="h-full">
+                  {children}
+                </OverlayScroll>
+              ) : (
+                children
+              )}
+            </div>
           </div>
 
           {!expanded && !leaving

package/src/desktop/MeadowDesktop.tsx

@@ -5,8 +5,8 @@ export function MeadowDesktop({ children, src }: { children?: ReactNode; src?: s
   return (
     <div className="absolute inset-0 bg-meadow">
       <MeadowWallpaper src={src} />
-      <div className="absolute inset-x-0 bottom-0 top-desktop-bar z-20">
-        <nav aria-label="Desktop" className="absolute inset-0 overflow-auto px-3 pt-8 pb-3">
+      <div className="nonla-desktop-layer absolute inset-x-0 bottom-0 top-desktop-bar">
+        <nav aria-label="Desktop" className="absolute inset-0 overflow-auto pl-2 pr-3 pt-2 pb-3">
           <div className="flex h-full flex-col flex-wrap content-start gap-x-2 gap-y-3">{children}</div>
         </nav>
       </div>

package/src/drawer/Drawer.tsx

@@ -1,5 +1,6 @@
 import * as Dialog from "@radix-ui/react-dialog";
 import { type AnimationEvent, type CSSProperties, type ReactNode, useEffect, useRef, useState } from "react";
+import { usePopupContainer } from "../app/context";
 import { cn } from "../lib/cn";
 import { glassSurfaceClass } from "../lib/surface";
 
@@ -17,7 +18,7 @@ export type DrawerProps = {
   extra?: ReactNode;
   children?: ReactNode;
   width?: number | string;
-  /** antd: width for left/right, height for top/bottom. */
+  /** Width for left/right, height for top/bottom. */
   size?: number | string;
   placement?: DrawerPlacement;
   destroyOnClose?: boolean;
@@ -66,6 +67,7 @@ export function Drawer({
   }, [isOpen, shouldDestroy]);
 
   const showBody = !shouldDestroy || present;
+  const portal = usePopupContainer()?.();
 
   const onContentAnimationEnd = (e: AnimationEvent<HTMLDivElement>) => {
     if (e.target !== e.currentTarget) return;
@@ -80,17 +82,17 @@ export function Drawer({
         if (!next) onClose?.();
       }}
     >
-      <Dialog.Portal>
-        <Dialog.Overlay className="nonla-overlay z-[9980]" />
+      <Dialog.Portal container={portal}>
+        <Dialog.Overlay className="nonla-overlay" />
         <Dialog.Content
           data-side={placement}
           className={cn(
-            "nonla-drawer-panel fixed z-[9981] flex flex-col outline-none",
+            "nonla-drawer-panel fixed flex flex-col outline-none",
             glassSurfaceClass,
             placement === "right" && "top-0 right-0 bottom-0 max-w-[100vw]",
             placement === "left" && "top-0 left-0 bottom-0 max-w-[100vw]",
-            placement === "bottom" && "right-0 bottom-0 left-0 max-h-[100vh]",
-            placement === "top" && "top-0 right-0 left-0 max-h-[100vh]",
+            placement === "bottom" && "right-0 bottom-0 left-0 max-h-screen",
+            placement === "top" && "top-0 right-0 left-0 max-h-screen",
             className,
           )}
           style={{