devnonla-ui 0.1.0

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

@@ -0,0 +1,168 @@
+import { type ReactNode, useEffect, useRef, useState } from "react";
+import { FluentIcon } from "../../icon/FluentIcon";
+import { cn } from "../../lib/cn";
+import { formatBgElapsed, parseBgTaskRef } from "../common/bgTasks";
+import { parseJsonObject, prettyJson, timestampMs } from "../common/utils";
+import { ChatMarkdown } from "../message-ui/ChatMarkdown";
+import { ChatSpinner } from "../message-ui/ChatSpinner";
+import { ToolUiBadge } from "./ToolUiBadge";
+import { ToolUiTrailing } from "./ToolUiTrailing";
+import type { ToolUIProps } from "./types";
+
+type CallAgentParsed = {
+  success: boolean;
+  response: string | null;
+  agentId: string | null;
+  error: string | null;
+};
+
+function parseCallAgentOutput(raw: unknown): CallAgentParsed | null {
+  if (raw == null) return null;
+  const parsed = typeof raw === "string" ? parseJsonObject<Record<string, unknown>>(raw) : typeof raw === "object" ? (raw as Record<string, unknown>) : null;
+  if (!parsed || !("success" in parsed)) return null;
+  return {
+    success: Boolean(parsed.success),
+    response: (parsed.response as string | null | undefined) ?? null,
+    agentId: (parsed.agent_id as string | null | undefined) ?? null,
+    error: (parsed.error as string | null | undefined) ?? null,
+  };
+}
+
+function TypingDots() {
+  return (
+    <div className="flex items-center gap-1 px-0.5 py-0.5" 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` }} />
+      ))}
+    </div>
+  );
+}
+
+function AgentAvatar({ name, size = 22, className }: { name: string; size?: number; className?: string }) {
+  const initial = (name.trim()[0] ?? "?").toUpperCase();
+  return (
+    <div className={cn("flex items-center justify-center rounded-full bg-muted text-[10px] font-semibold text-muted-foreground", className)} style={{ width: size, height: size }} aria-hidden>
+      {initial}
+    </div>
+  );
+}
+
+function AgentTurn({
+  name,
+  children,
+  align = "start",
+}: {
+  name: string;
+  children: ReactNode;
+  align?: "start" | "end";
+}) {
+  return (
+    <div className={cn("flex items-start gap-2", align === "end" && "flex-row-reverse")}>
+      <AgentAvatar name={name} className="mt-0.5 shrink-0" />
+      <div className={cn("flex min-w-0 flex-1 flex-col gap-0.5", align === "end" ? "items-end" : "items-start")}>
+        <span className="select-none text-[12px] font-medium text-tertiary-foreground">{name}</span>
+        <div className="w-fit max-w-[92%]">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+function ExpandableBody({ children, className }: { children: ReactNode; className?: string }) {
+  const [expanded, setExpanded] = useState(false);
+  const [overflows, setOverflows] = useState(false);
+  const bodyRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = bodyRef.current;
+    if (el) setOverflows(el.scrollHeight > 160);
+  }, [children]);
+
+  return (
+    <div>
+      <div ref={bodyRef} className={cn("overflow-hidden transition-[max-height] duration-200", !expanded && "max-h-40", className)}>
+        {children}
+      </div>
+      {overflows ? (
+        <button type="button" onClick={() => setExpanded((v) => !v)} className="mt-1 cursor-pointer border-0 bg-transparent p-0 text-[13px] text-tertiary-foreground hover:text-foreground">
+          {expanded ? "Show less" : "Show more"}
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+export function CallAgentToolUI({ msg, assistantLabel = "Assistant", assistantColor, showAvatar = false }: ToolUIProps) {
+  const hasOutput = msg.toolOutput != null;
+  const hasError = Boolean(msg.toolError);
+  const bgRef = parseBgTaskRef(msg.toolOutput);
+  const parsed = parseCallAgentOutput(msg.toolOutput);
+  const failed = hasError || parsed?.success === false;
+  const bgRunning = Boolean(bgRef) && !failed && !parsed;
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    if (!bgRunning) return;
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, [bgRunning]);
+
+  const requestMessage = ((msg.toolInput as Record<string, unknown> | null)?.message as string | undefined)?.trim() ?? "";
+  const hasRequest = requestMessage.length > 0;
+  const composing = !hasOutput && !hasError && !hasRequest;
+  const awaitingReply = bgRunning || (!hasOutput && !hasError && hasRequest);
+  const showCallee = awaitingReply || failed || parsed != null;
+  const calleeName = msg.toolLabel?.replace(/^Call\s+/i, "") ?? "Agent";
+  const statusLabel = failed && !awaitingReply ? (parsed?.error ?? "Call failed") : null;
+
+  return (
+    <div className="mt-1 animate-fadeIn">
+      <ToolUiBadge show={showAvatar} label={assistantLabel} color={assistantColor} />
+      <div className="px-4 py-1">
+        <div className={cn("overflow-hidden rounded-xl border bg-card", failed ? "border-destructive/35" : "border-border")}>
+          <div className="flex items-center gap-2 border-b border-border-subtle px-3 py-2">
+            <FluentIcon name="chat-24" size={13} className="shrink-0 text-muted-foreground" />
+            <span className="min-w-0 flex-1 truncate text-[14px] font-medium text-foreground">Calling {calleeName}</span>
+            {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} />
+          </div>
+
+          {composing || hasRequest || showCallee ? (
+            <div className="flex flex-col gap-3 px-3 py-3">
+              {composing || hasRequest ? (
+                <AgentTurn name={assistantLabel} align="end">
+                  <div className="rounded-2xl rounded-tr-sm border border-brand/40 bg-[color-mix(in_oklab,var(--brand)_14%,var(--card))] px-3 py-2 text-left">
+                    {composing ? <TypingDots /> : <p className="m-0 text-[14px] leading-[1.55] whitespace-pre-wrap text-foreground">{requestMessage}</p>}
+                  </div>
+                </AgentTurn>
+              ) : null}
+
+              {showCallee ? (
+                <AgentTurn name={calleeName} align="start">
+                  <div className={cn("w-fit rounded-2xl rounded-tl-sm border bg-transparent px-3 py-2 text-left", failed && !awaitingReply ? "border-destructive/35" : "border-border")}>
+                    {awaitingReply ? (
+                      <div className="flex items-center gap-1.5 py-0.5">
+                        <ChatSpinner />
+                        <span className="text-[14px] italic text-muted-foreground">Replying…</span>
+                      </div>
+                    ) : failed ? (
+                      <p className="m-0 text-[14px] leading-[1.55] text-destructive">{parsed?.error ?? "Agent call failed"}</p>
+                    ) : parsed ? (
+                      <ExpandableBody>
+                        <ChatMarkdown content={parsed.response ?? "(no response)"} className="[&_p]:m-0 [&_p]:mb-0 [&_p+p]:mt-2" />
+                      </ExpandableBody>
+                    ) : (
+                      <ExpandableBody>
+                        <pre className="m-0 font-mono text-[14px] leading-normal break-all whitespace-pre-wrap text-muted-foreground">{prettyJson(msg.toolOutput)}</pre>
+                      </ExpandableBody>
+                    )}
+                  </div>
+                </AgentTurn>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,77 @@
+import { type ReactNode, useState } from "react";
+import { cn } from "../../lib/cn";
+import { formatToolName, hasMeaningfulInput, prettyJson } from "../common/utils";
+import { ChatSpinner } from "../message-ui/ChatSpinner";
+import { ToolUiTrailing } from "./ToolUiTrailing";
+
+export type ChatToolCallProps = {
+  toolName?: string;
+  label?: string;
+  toolInput?: unknown;
+  toolOutput?: unknown;
+  toolError?: boolean | string;
+  /** Show running spinner (pending execution). */
+  running?: boolean;
+  /** Optional icon node (left of label). */
+  icon?: ReactNode;
+  className?: string;
+  defaultOpen?: boolean;
+};
+
+export function ChatToolCall({ toolName = "Tool", label, toolInput, toolOutput, toolError, running = false, icon, className, defaultOpen = false }: ChatToolCallProps) {
+  const hasOutput = toolOutput != null;
+  const hasInput = hasMeaningfulInput(toolInput);
+  const hasError = Boolean(toolError);
+  const isPending = !hasOutput && !hasError;
+  const expandable = hasInput || hasOutput || hasError || running;
+  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 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>
+      <ToolUiTrailing running={running} 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")}>
+          {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")}>
+              {header}
+            </button>
+          ) : (
+            <div className="flex w-full items-center gap-2 px-2.5 py-1.5">{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}
+              {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>
+                </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")}>
+                  {hasOutput ? prettyJson(toolOutput) : typeof toolError === "string" ? toolError : "Tool execution failed"}
+                </pre>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+import { FluentIcon } from "../../icon/FluentIcon";
+import { parseJsonObject } from "../common/utils";
+import { ToolUiBadge } from "./ToolUiBadge";
+import { ToolUiTrailing } from "./ToolUiTrailing";
+import { isToolRunning, type ToolUIProps } from "./types";
+
+type TimeResult = {
+  time?: string;
+  timezone?: string;
+  iso?: string;
+};
+
+function formatLabel(iso: string | undefined, timezone: string | undefined, fallback: string | undefined): string {
+  if (iso) {
+    try {
+      const d = new Date(iso);
+      if (!Number.isNaN(d.getTime())) {
+        const tz = timezone || "UTC";
+        const clock = d.toLocaleTimeString("en-US", { timeZone: tz, hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false });
+        const date = d.toLocaleDateString("en-US", { timeZone: tz, weekday: "short", month: "short", day: "numeric" });
+        return `${clock} · ${date} · ${tz}`;
+      }
+    } catch {
+      /* fall through */
+    }
+  }
+  if (fallback && timezone) return `${fallback} · ${timezone}`;
+  return fallback ?? timezone ?? "—";
+}
+
+export function GetCurrentTimeToolUI({ msg, assistantLabel = "Assistant", assistantColor, showAvatar = false, generating = false }: ToolUIProps) {
+  const hasError = Boolean(msg.toolError);
+  const output = parseJsonObject<TimeResult>(msg.toolOutput);
+  const running = isToolRunning(msg, generating);
+  const label = formatLabel(output?.iso, output?.timezone, output?.time);
+
+  return (
+    <div className="mt-1 animate-fadeIn">
+      <ToolUiBadge show={showAvatar} label={assistantLabel} color={assistantColor} />
+      <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>
+          <ToolUiTrailing running={running} failed={hasError} />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,80 @@
+import { FluentIcon } from "../../icon/FluentIcon";
+import { cn } from "../../lib/cn";
+import { parseJsonObject } from "../common/utils";
+import { ToolUiBadge } from "./ToolUiBadge";
+import { ToolUiTrailing } from "./ToolUiTrailing";
+import { isToolRunning, type ToolUIProps } from "./types";
+
+type ReadSkillInput = { name?: string; reference?: string };
+type SkillRef = { name?: string; title?: string };
+type ReadSkillOutput = {
+  ok?: boolean;
+  error?: string;
+  skill?: string;
+  reference?: string;
+  title?: string;
+  description?: string;
+  content?: string;
+  references?: SkillRef[];
+  available_references?: SkillRef[];
+};
+
+function refNames(list?: SkillRef[]): string[] {
+  if (!Array.isArray(list)) return [];
+  return list.map((r) => (typeof r.name === "string" ? r.name.trim() : "")).filter(Boolean);
+}
+
+export function ReadSkillToolUI({ msg, assistantLabel = "Assistant", assistantColor, showAvatar = false, generating = false }: ToolUIProps) {
+  const hasError = Boolean(msg.toolError);
+  const input = parseJsonObject<ReadSkillInput>(msg.toolInput) ?? {};
+  const output = parseJsonObject<ReadSkillOutput>(msg.toolOutput);
+  const failed = hasError || output?.ok === false;
+  const running = isToolRunning(msg, generating);
+
+  const skillName = (output?.skill || input.name || "").trim();
+  const reference = (output?.reference || input.reference || "").trim();
+  const available = refNames(output?.references ?? output?.available_references);
+  const content = output?.content?.trim() || "";
+  const body = failed ? (output?.error ?? (typeof msg.toolError === "string" ? msg.toolError : null) ?? "Failed to read skill") : content;
+
+  const verb = (() => {
+    if (failed) return "Failed to read skill";
+    if (running) return reference ? "Reading ref" : "Reading skill";
+    return reference ? "Read skill ref" : "Read skill";
+  })();
+
+  const targetLabel = (() => {
+    if (!skillName && !reference) return null;
+    if (reference) return skillName ? `${skillName} / ${reference}` : reference;
+    return skillName || null;
+  })();
+
+  return (
+    <div className="mt-1 animate-fadeIn">
+      <ToolUiBadge show={showAvatar} label={assistantLabel} color={assistantColor} />
+      <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")}>
+            {verb}
+            {targetLabel ? <span className="font-normal text-tertiary-foreground"> {targetLabel}</span> : null}
+          </span>
+          <ToolUiTrailing running={running} 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>
+        ) : 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">
+                {skillName ? `${skillName} / ${name}` : name}
+              </span>
+            ))}
+          </div>
+        ) : null}
+      </details>
+    </div>
+  );
+}

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

@@ -0,0 +1,106 @@
+import { FluentIcon } from "../../icon/FluentIcon";
+import { cn } from "../../lib/cn";
+import { CodeBlock } from "../../codeblock/CodeBlock";
+import { parseBgTaskRef } from "../common/bgTasks";
+import { parseJsonObject, prettyJson } from "../common/utils";
+import { ChatSpinner } from "../message-ui/ChatSpinner";
+import { BackgroundTaskToolUI } from "./BackgroundTaskToolUI";
+import { ToolUiBadge } from "./ToolUiBadge";
+import { ToolUiTrailing } from "./ToolUiTrailing";
+import { isToolRunning, type ToolUIProps } from "./types";
+
+type JsInput = { code?: string };
+type JsOutput = {
+  ok?: boolean;
+  result?: unknown;
+  error?: string;
+  console?: string;
+};
+
+function extractCode(input: unknown): string {
+  const parsed = parseJsonObject<JsInput>(input);
+  if (parsed?.code && typeof parsed.code === "string") return parsed.code;
+  if (typeof input === "string") return input;
+  return "";
+}
+
+function resultText(value: unknown): string {
+  if (typeof value === "string") return value;
+  if (value === undefined) return "undefined";
+  if (typeof value === "number" || typeof value === "boolean" || value === null) return String(value);
+  return prettyJson(value);
+}
+
+function SandboxOutput({
+  running,
+  failed,
+  consoleOut,
+  result,
+}: {
+  running: boolean;
+  failed: boolean;
+  consoleOut: string | null;
+  result: unknown;
+}) {
+  if (running) {
+    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>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("max-h-40 overflow-y-auto border-t px-3 py-2 font-mono text-[13px] leading-[1.65]", failed ? "border-destructive/35 bg-destructive/6" : "border-border")}>
+      {consoleOut ? <pre className="m-0 whitespace-pre-wrap break-all text-tertiary-foreground">{consoleOut}</pre> : null}
+      {failed ? (
+        <pre className={cn("m-0 whitespace-pre-wrap break-all text-destructive", consoleOut && "mt-1")}>{resultText(result)}</pre>
+      ) : (
+        <div className={cn("flex gap-1.5 whitespace-pre-wrap break-all text-foreground", consoleOut && "mt-1")}>
+          <span className="shrink-0 select-none text-quaternary-foreground">{"=>"}</span>
+          <span>{resultText(result)}</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function RunJsToolUI({ msg, assistantLabel = "Assistant", assistantColor, showAvatar = false, generating = false }: ToolUIProps) {
+  if (parseBgTaskRef(msg.toolOutput)) {
+    return <BackgroundTaskToolUI msg={msg} assistantLabel={assistantLabel} assistantColor={assistantColor} showAvatar={showAvatar} />;
+  }
+
+  const hasError = Boolean(msg.toolError);
+  const code = extractCode(msg.toolInput);
+  const output = parseJsonObject<JsOutput>(msg.toolOutput);
+  const running = isToolRunning(msg, generating);
+  const failed = hasError || output?.ok === false;
+  const consoleOut = output?.console?.trim() || null;
+  const resultBody = failed ? (output?.error ?? (typeof msg.toolError === "string" ? msg.toolError : null) ?? "Execution failed") : output && "result" in output ? output.result : undefined;
+  const showOutput = running || failed || consoleOut != null || (output != null && "result" in output);
+  const verb = failed ? "JS failed" : running ? "Running JS" : "Ran JS";
+
+  return (
+    <div className="mt-1 animate-fadeIn">
+      <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" />
+          <span className={cn("min-w-0 truncate font-medium text-muted-foreground", running && "nonla-chat-shimmer")}>{verb}</span>
+          <ToolUiTrailing running={running} failed={failed} chevron chevronClassName="group-hover/runjs:opacity-100 group-open/runjs:opacity-100 group-open/runjs:rotate-90" />
+        </summary>
+
+        {code ? (
+          <CodeBlock code={code} language="javascript" title="JS" className={cn("mt-1.5 mb-1", failed && "border-destructive/35")}>
+            {showOutput ? <SandboxOutput running={running} failed={failed} consoleOut={consoleOut} result={resultBody} /> : null}
+          </CodeBlock>
+        ) : showOutput ? (
+          <div className={cn("mt-1.5 mb-1 overflow-hidden rounded-lg border", failed ? "border-destructive/35" : "border-(--popper-border)")}>
+            <SandboxOutput running={running} failed={failed} consoleOut={consoleOut} result={resultBody} />
+          </div>
+        ) : null}
+      </details>
+    </div>
+  );
+}

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

@@ -0,0 +1,10 @@
+export function ToolUiBadge({ show = false, label, color }: { show?: boolean; label: string; color?: string | null }) {
+  if (!show) return null;
+  return (
+    <div className="flex items-center gap-2.5 px-4 pt-3 pb-1">
+      <span className="inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-bold tracking-wider uppercase select-none" style={{ background: color ?? "var(--primary)", color: "var(--primary-foreground)", letterSpacing: "0.08em" }}>
+        {label}
+      </span>
+    </div>
+  );
+}

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

@@ -0,0 +1,24 @@
+import { FluentIcon } from "../../icon/FluentIcon";
+import { cn } from "../../lib/cn";
+import { ChatSpinner } from "../message-ui/ChatSpinner";
+
+export function ToolUiTrailing({
+  running = false,
+  failed = false,
+  chevron = false,
+  chevronClassName,
+}: {
+  running?: boolean;
+  failed?: boolean;
+  chevron?: boolean;
+  chevronClassName?: string;
+}) {
+  if (running) return <ChatSpinner />;
+  if (failed) return <FluentIcon name="error-circle-24" size={13} className="text-destructive" />;
+  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>
+  );
+}

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

@@ -0,0 +1,53 @@
+import { FluentIcon } from "../../icon/FluentIcon";
+import { cn } from "../../lib/cn";
+import { parseJsonObject } from "../common/utils";
+import { ToolUiBadge } from "./ToolUiBadge";
+import { ToolUiTrailing } from "./ToolUiTrailing";
+import { isToolRunning, type ToolUIProps } from "./types";
+
+type FetchInput = {
+  url?: string;
+  actions?: { action?: string; url?: string }[];
+};
+
+type FetchOutput = {
+  ok?: boolean;
+  url?: string;
+  text?: string;
+  error?: string;
+};
+
+function inputUrl(input: unknown): string {
+  const rec = parseJsonObject<FetchInput>(input);
+  if (rec?.url) return rec.url;
+  const nav = rec?.actions?.find((a) => a.action === "navigate" && a.url);
+  return nav?.url || "";
+}
+
+export function WebFetchToolUI({ msg, assistantLabel = "Assistant", assistantColor, showAvatar = false, generating = false }: ToolUIProps) {
+  const hasError = Boolean(msg.toolError);
+  const output = parseJsonObject<FetchOutput>(msg.toolOutput);
+  const failed = hasError || output?.ok === false;
+  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";
+
+  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" />
+          <span className={cn("min-w-0 truncate font-medium text-muted-foreground", running && "nonla-chat-shimmer")}>
+            {verb} <span className="font-normal text-tertiary-foreground">{url}</span>
+          </span>
+          <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>
+    </div>
+  );
+}

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

@@ -0,0 +1,29 @@
+import type { ComponentType } from "react";
+import { isCallAgentToolName } from "../common/utils";
+import { CallAgentToolUI } from "./CallAgentToolUI";
+import { GetCurrentTimeToolUI } from "./GetCurrentTimeToolUI";
+import { ReadSkillToolUI } from "./ReadSkillToolUI";
+import { RunJsToolUI } from "./RunJsToolUI";
+import type { ToolUIProps } from "./types";
+import { WebFetchToolUI } from "./WebFetchToolUI";
+
+type ToolUIEntry = {
+  match: (toolName: string) => boolean;
+  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 resolveToolUI(toolName: string | null | undefined): ComponentType<ToolUIProps> | null {
+  if (!toolName) return null;
+  for (const entry of TOOL_UIS) {
+    if (entry.match(toolName)) return entry.component;
+  }
+  return null;
+}

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

@@ -0,0 +1,22 @@
+export type ChatToolMessage = {
+  id?: string;
+  toolCallId?: string;
+  toolName?: string;
+  toolLabel?: string;
+  toolInput?: unknown;
+  toolOutput?: unknown;
+  toolError?: boolean | string;
+  timestamp?: Date | string | number;
+};
+
+export type ToolUIProps = {
+  msg: ChatToolMessage;
+  assistantLabel?: string;
+  assistantColor?: string | null;
+  showAvatar?: boolean;
+  generating?: boolean;
+};
+
+export function isToolRunning(msg: ChatToolMessage, generating?: boolean) {
+  return msg.toolOutput == null && !msg.toolError && Boolean(generating);
+}