devnonla-ui 0.1.0 → 0.3.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>