@kanzo-tech/ai 0.16.0 → 0.17.0

package/dist/reasoning.js

@@ -1,55 +1,59 @@
 "use client";
-import { jsx as r, jsxs as R } from "react/jsx-runtime";
-import { ark as w } from "@ark-ui/react/factory";
-import { BrainIcon as S } from "lucide-react";
-import * as n from "react";
-import { Collapsible as v, cn as f, CollapsibleContent as T, CollapsibleTrigger as I, Spinner as k, CollapsibleIndicator as z } from "@kanzo-tech/ui";
-const p = n.createContext({
+import { jsx as n, jsxs as h, Fragment as S } from "react/jsx-runtime";
+import { ark as v } from "@ark-ui/react/factory";
+import { BrainIcon as T } from "lucide-react";
+import * as t from "react";
+import { Collapsible as I, cn as f, CollapsibleTrigger as k, Spinner as z, CollapsibleIndicator as E, CollapsibleContent as M } from "@kanzo-tech/ui";
+const g = t.createContext({
   seconds: null,
-  streaming: !1
-}), E = 1e3, M = 1e3, $ = (t) => {
+  streaming: !1,
+  text: ""
+}), O = 1e3, _ = 1e3, L = (s) => {
   const {
-    streaming: e = !1,
-    open: o,
-    defaultOpen: a = !1,
-    onOpenChange: i,
-    className: u,
-    children: l,
-    slot: x,
-    ...h
-  } = t, [b, m] = n.useState(a), [N, C] = n.useState(null), g = n.useRef(!1), d = n.useRef(!1), s = n.useRef(null);
-  return n.useEffect(() => {
-    if (e) {
-      s.current ?? (s.current = Date.now());
+    part: e,
+    open: i,
+    defaultOpen: c = !1,
+    onOpenChange: o,
+    className: l,
+    children: u,
+    slot: b,
+    ...N
+  } = s, r = e.state === "streaming", [C, d] = t.useState(c), [R, w] = t.useState(null), p = t.useRef(!1), x = t.useRef(!1), a = t.useRef(null);
+  return t.useEffect(() => {
+    if (r) {
+      a.current ?? (a.current = Date.now());
       return;
     }
-    s.current !== null && (C(Math.max(1, Math.ceil((Date.now() - s.current) / M))), s.current = null);
-  }, [e]), n.useEffect(() => {
-    if (e === d.current || (d.current = e, g.current)) return;
-    if (e) {
-      m(!0);
+    a.current !== null && (w(Math.max(1, Math.ceil((Date.now() - a.current) / _))), a.current = null);
+  }, [r]), t.useEffect(() => {
+    if (r === x.current || (x.current = r, p.current)) return;
+    if (r) {
+      d(!0);
       return;
     }
-    const c = setTimeout(() => m(!1), E);
-    return () => clearTimeout(c);
-  }, [e]), /* @__PURE__ */ r(p.Provider, { value: { seconds: N, streaming: e }, children: /* @__PURE__ */ r(
-    v,
+    const m = setTimeout(() => d(!1), O);
+    return () => clearTimeout(m);
+  }, [r]), /* @__PURE__ */ n(g.Provider, { value: { seconds: R, streaming: r, text: e.text }, children: /* @__PURE__ */ n(
+    I,
     {
-      className: f("group/reasoning w-full", u),
-      "data-streaming": e ? "" : void 0,
-      onOpenChange: (c) => {
-        g.current = !0, m(c.open), i == null || i(c);
+      className: f("group/reasoning w-full", l),
+      "data-streaming": r ? "" : void 0,
+      onOpenChange: (m) => {
+        p.current = !0, d(m.open), o == null || o(m);
       },
-      open: o ?? b,
-      ...h,
-      slot: x ?? "reasoning",
-      children: l
+      open: i ?? C,
+      ...N,
+      slot: b ?? "reasoning",
+      children: u ?? /* @__PURE__ */ h(S, { children: [
+        /* @__PURE__ */ n(y, {}),
+        /* @__PURE__ */ n(D, {})
+      ] })
     }
   ) });
-}, O = (t, e) => t ? "Thinking…" : e === null ? "Reasoning" : `Thought for ${e} second${e === 1 ? "" : "s"}`, B = (t) => {
-  const { className: e, children: o, slot: a, ...i } = t, { seconds: u, streaming: l } = n.useContext(p);
-  return /* @__PURE__ */ R(
-    I,
+}, j = (s, e) => s ? "Thinking…" : e === null ? "Reasoning" : `Thought for ${e} second${e === 1 ? "" : "s"}`, y = (s) => {
+  const { className: e, children: i, slot: c, ...o } = s, { seconds: l, streaming: u } = t.useContext(g);
+  return /* @__PURE__ */ h(
+    k,
     {
       className: f(
         "-ms-1.5 inline-flex min-h-[24px] w-fit items-center gap-1.5 rounded-md px-1.5 py-1",
@@ -59,19 +63,19 @@ const p = n.createContext({
         "[&_svg:not([class*='size-'])]:size-3.5",
         e
       ),
-      ...i,
-      slot: a ?? "reasoning-trigger",
+      ...o,
+      slot: c ?? "reasoning-trigger",
       children: [
-        l ? /* @__PURE__ */ r(k, { "aria-hidden": !0, className: "size-3.5" }) : /* @__PURE__ */ r(S, {}),
-        /* @__PURE__ */ r(w.span, { className: "text-start font-medium", children: o ?? O(l, u) }),
-        /* @__PURE__ */ r(z, { className: "opacity-64" })
+        u ? /* @__PURE__ */ n(z, { "aria-hidden": !0, className: "size-3.5" }) : /* @__PURE__ */ n(T, {}),
+        /* @__PURE__ */ n(v.span, { className: "text-start font-medium", children: i ?? j(u, l) }),
+        /* @__PURE__ */ n(E, { className: "opacity-64" })
       ]
     }
   );
-}, G = (t) => {
-  const { className: e, slot: o, ...a } = t;
-  return /* @__PURE__ */ r(
-    T,
+}, D = (s) => {
+  const { className: e, children: i, slot: c, ...o } = s, { text: l } = t.useContext(g);
+  return /* @__PURE__ */ n(
+    M,
     {
       className: f(
         "mt-1 ms-2.5 whitespace-pre-wrap break-words",
@@ -81,14 +85,15 @@ const p = n.createContext({
         "transition-colors motion-reduce:transition-none!",
         e
       ),
-      ...a,
-      slot: o ?? "reasoning-content"
+      ...o,
+      slot: c ?? "reasoning-content",
+      children: i ?? l
     }
   );
 };
 export {
-  $ as Reasoning,
-  G as ReasoningContent,
-  B as ReasoningTrigger
+  L as Reasoning,
+  D as ReasoningContent,
+  y as ReasoningTrigger
 };
 //# sourceMappingURL=reasoning.js.map

package/dist/reasoning.js.map

@@ -1 +1 @@
-{"version":3,"file":"reasoning.js","sources":["../src/reasoning.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport { BrainIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport {\n  cn,\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleIndicator,\n  CollapsibleTrigger,\n  Spinner,\n} from \"@kanzo-tech/ui\";\n\nconst Ctx = React.createContext<{ streaming: boolean; seconds: number | null }>({\n  seconds: null,\n  streaming: false,\n});\n\n/**\n * How long the thinking is left on screen after it stops. AI Elements' `AUTO_CLOSE_DELAY`, and the\n * reason is the last sentence: closing on the instant the stream ends takes the end of the thought\n * away from the reader who was reading it.\n */\nconst LINGER = 1000;\nconst MS_IN_S = 1000;\n\nexport interface ReasoningProps extends React.ComponentProps<typeof Collapsible> {\n  /** The model is still thinking. */\n  streaming?: boolean;\n}\n\n/**\n * A model's thinking, folded away.\n *\n * The behaviour that *is* the component: it opens itself when the thinking starts and closes itself\n * when it ends, so the reader watches it happen without being left with a wall of it afterwards.\n * One exception, and it is the reason for the ref rather than a plain effect — **a reader's own\n * toggle ends the automatic behaviour for good.** Anything else means a panel that reopens what\n * somebody just closed, which is the version of this everyone has met.\n *\n * `group/reasoning` sits beside `Collapsible`'s own `group/collapsible`: the parts below key off\n * `data-streaming`, which is this component's, not the machine's.\n */\nexport const Reasoning = (props: ReasoningProps) => {\n  const {\n    streaming = false,\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    className,\n    children,\n    slot,\n    ...rest\n  } = props;\n  const [selfOpen, setSelfOpen] = React.useState(defaultOpen);\n  const [seconds, setSeconds] = React.useState<number | null>(null);\n  const touched = React.useRef(false);\n  const wasStreaming = React.useRef(false);\n  const startedAt = React.useRef<number | null>(null);\n\n  /**\n   * **How long it thought, because the trigger says so once it is folded away.** Taken from AI\n   * Elements, where the closed state reads *Thought for N seconds* rather than a static label — a\n   * disclosure that says nothing about what is behind it gives the reader no reason to open it.\n   *\n   * Rounded up, and `null` until there is something to report: a block that never streamed has no\n   * duration, which is not the same as a duration of zero.\n   */\n  React.useEffect(() => {\n    if (streaming) {\n      startedAt.current ??= Date.now();\n      return;\n    }\n    if (startedAt.current === null) return;\n    setSeconds(Math.max(1, Math.ceil((Date.now() - startedAt.current) / MS_IN_S)));\n    startedAt.current = null;\n  }, [streaming]);\n\n  React.useEffect(() => {\n    if (streaming === wasStreaming.current) return;\n    wasStreaming.current = streaming;\n    if (touched.current) return;\n    if (streaming) {\n      setSelfOpen(true);\n      return;\n    }\n    // It lingers. Closing on the instant the last token lands snatches the end of the thought away\n    // from somebody mid-sentence, and this is the one beat that makes the fold readable.\n    const timer = setTimeout(() => setSelfOpen(false), LINGER);\n    return () => clearTimeout(timer);\n  }, [streaming]);\n\n  return (\n    <Ctx.Provider value={{ seconds, streaming }}>\n      <Collapsible\n        className={cn(\"group/reasoning w-full\", className)}\n        data-streaming={streaming ? \"\" : undefined}\n        onOpenChange={(details) => {\n          touched.current = true;\n          setSelfOpen(details.open);\n          onOpenChange?.(details);\n        }}\n        open={open ?? selfOpen}\n        {...rest}\n        slot={slot ?? \"reasoning\"}\n      >\n        {children}\n      </Collapsible>\n    </Ctx.Provider>\n  );\n};\n\n/**\n * What the trigger says, which is the only thing a folded-away thought tells anybody.\n *\n * **`Spinner` and not a shimmer, and that is a deliberate divergence.** AI Elements shimmers the\n * word *Thinking...* — a gradient swept across the glyphs with `background-clip: text`, on a\n * `motion/react` loop. It is a second vocabulary for *busy* beside the one this library already\n * has, and it costs an animation library to say what a `Spinner` says. Every other busy surface\n * here spins; the ✨ spins while a completion streams. One busy is a house principle, and AI\n * Elements is a source rather than a reference.\n */\nconst label = (streaming: boolean, seconds: number | null) => {\n  if (streaming) return \"Thinking…\";\n  if (seconds === null) return \"Reasoning\";\n  return `Thought for ${seconds} second${seconds === 1 ? \"\" : \"s\"}`;\n};\n\n/**\n * The disclosure itself, sized to its own words rather than to the column: thinking is subordinate\n * to the answer beside it, and a full-width bar with a chevron at the far end reads as a section\n * heading — the one thing this is not.\n */\nexport const ReasoningTrigger = (props: React.ComponentProps<typeof CollapsibleTrigger>) => {\n  const { className, children, slot, ...rest } = props;\n  const { seconds, streaming } = React.useContext(Ctx);\n\n  return (\n    <CollapsibleTrigger\n      className={cn(\n        \"-ms-1.5 inline-flex min-h-[24px] w-fit items-center gap-1.5 rounded-md px-1.5 py-1\",\n        \"text-muted-foreground text-xs\",\n        \"transition-colors hover:bg-accent hover:text-foreground motion-reduce:transition-none!\",\n        \"group-data-streaming/reasoning:text-info-foreground\",\n        \"[&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...rest}\n      slot={slot ?? \"reasoning-trigger\"}\n    >\n      {streaming ? <Spinner aria-hidden className=\"size-3.5\" /> : <BrainIcon />}\n      <ark.span className=\"text-start font-medium\">\n        {children ?? label(streaming, seconds)}\n      </ark.span>\n      <CollapsibleIndicator className=\"opacity-64\" />\n    </CollapsibleTrigger>\n  );\n};\n\n/**\n * The thinking, on a rail rather than in a panel — a quotation of the model to itself, and quieter\n * than any message beside it. The rail takes the streaming tint so a wall of text that is still\n * growing says so at the edge, where it does not move the words.\n */\nexport const ReasoningContent = (props: React.ComponentProps<typeof CollapsibleContent>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <CollapsibleContent\n      className={cn(\n        \"mt-1 ms-2.5 whitespace-pre-wrap break-words\",\n        \"border-border border-s ps-3.5\",\n        \"text-muted-foreground text-sm leading-relaxed\",\n        \"group-data-streaming/reasoning:border-info\",\n        \"transition-colors motion-reduce:transition-none!\",\n        className\n      )}\n      {...rest}\n      slot={slot ?? \"reasoning-content\"}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAcA;AAAgF;AACrE;AAEX;AA4BE;AAAM;AACQ;AACZ;AACc;AACd;AACA;AACA;AACA;AACG;AAgBL;AACE;AACE;AACA;AAAA;AAEF;AAEoB;AAMpB;AACA;AACE;AACA;AAAA;AAIF;AACA;AAA+B;AAK7B;AAAC;AAAA;AACkD;AAChB;AAE/B;AAEe;AACjB;AACc;AACV;AACU;AAEb;AAAA;AAIT;AAwBE;AAGA;AACE;AAAC;AAAA;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACU;AAEb;AAAsE;AAGvE;AAC6C;AAAA;AAAA;AAGnD;AAQE;AAEA;AACE;AAAC;AAAA;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACU;AAAA;AAGpB;;;;;;"}
+{"version":3,"file":"reasoning.js","sources":["../src/reasoning.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport { BrainIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport {\n  cn,\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleIndicator,\n  CollapsibleTrigger,\n  Spinner,\n} from \"@kanzo-tech/ui\";\nimport type { ReasoningUIPart } from \"@kanzo-tech/llm\";\n\nconst Ctx = React.createContext<{ streaming: boolean; seconds: number | null; text: string }>({\n  seconds: null,\n  streaming: false,\n  text: \"\",\n});\n\n/**\n * How long the thinking is left on screen after it stops. AI Elements' `AUTO_CLOSE_DELAY`, and the\n * reason is the last sentence: closing on the instant the stream ends takes the end of the thought\n * away from the reader who was reading it.\n */\nconst LINGER = 1000;\nconst MS_IN_S = 1000;\n\nexport interface ReasoningProps extends Omit<React.ComponentProps<typeof Collapsible>, \"part\"> {\n  /** The reasoning as the AI SDK streams it: its text, and whether it is still arriving. */\n  part: ReasoningUIPart;\n}\n\n/**\n * A model's thinking, folded away.\n *\n * The behaviour that *is* the component: it opens itself when the thinking starts and closes itself\n * when it ends, so the reader watches it happen without being left with a wall of it afterwards.\n * One exception, and it is the reason for the ref rather than a plain effect — **a reader's own\n * toggle ends the automatic behaviour for good.** Anything else means a panel that reopens what\n * somebody just closed, which is the version of this everyone has met.\n *\n * `group/reasoning` sits beside `Collapsible`'s own `group/collapsible`: the parts below key off\n * `data-streaming`, which is this component's, not the machine's.\n */\nexport const Reasoning = (props: ReasoningProps) => {\n  const {\n    part,\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    className,\n    children,\n    slot,\n    ...rest\n  } = props;\n  const streaming = part.state === \"streaming\";\n  const [selfOpen, setSelfOpen] = React.useState(defaultOpen);\n  const [seconds, setSeconds] = React.useState<number | null>(null);\n  const touched = React.useRef(false);\n  const wasStreaming = React.useRef(false);\n  const startedAt = React.useRef<number | null>(null);\n\n  /**\n   * **How long it thought, because the trigger says so once it is folded away.** Taken from AI\n   * Elements, where the closed state reads *Thought for N seconds* rather than a static label — a\n   * disclosure that says nothing about what is behind it gives the reader no reason to open it.\n   *\n   * Rounded up, and `null` until there is something to report: a block that never streamed has no\n   * duration, which is not the same as a duration of zero.\n   */\n  React.useEffect(() => {\n    if (streaming) {\n      startedAt.current ??= Date.now();\n      return;\n    }\n    if (startedAt.current === null) return;\n    setSeconds(Math.max(1, Math.ceil((Date.now() - startedAt.current) / MS_IN_S)));\n    startedAt.current = null;\n  }, [streaming]);\n\n  React.useEffect(() => {\n    if (streaming === wasStreaming.current) return;\n    wasStreaming.current = streaming;\n    if (touched.current) return;\n    if (streaming) {\n      setSelfOpen(true);\n      return;\n    }\n    // It lingers. Closing on the instant the last token lands snatches the end of the thought away\n    // from somebody mid-sentence, and this is the one beat that makes the fold readable.\n    const timer = setTimeout(() => setSelfOpen(false), LINGER);\n    return () => clearTimeout(timer);\n  }, [streaming]);\n\n  return (\n    <Ctx.Provider value={{ seconds, streaming, text: part.text }}>\n      <Collapsible\n        className={cn(\"group/reasoning w-full\", className)}\n        data-streaming={streaming ? \"\" : undefined}\n        onOpenChange={(details) => {\n          touched.current = true;\n          setSelfOpen(details.open);\n          onOpenChange?.(details);\n        }}\n        open={open ?? selfOpen}\n        {...rest}\n        slot={slot ?? \"reasoning\"}\n      >\n        {children ?? (\n          <>\n            <ReasoningTrigger />\n            <ReasoningContent />\n          </>\n        )}\n      </Collapsible>\n    </Ctx.Provider>\n  );\n};\n\n/**\n * What the trigger says, which is the only thing a folded-away thought tells anybody.\n *\n * **`Spinner` and not a shimmer, and that is a deliberate divergence.** AI Elements shimmers the\n * word *Thinking...* — a gradient swept across the glyphs with `background-clip: text`, on a\n * `motion/react` loop. It is a second vocabulary for *busy* beside the one this library already\n * has, and it costs an animation library to say what a `Spinner` says. Every other busy surface\n * here spins; the ✨ spins while a completion streams. One busy is a house principle, and AI\n * Elements is a source rather than a reference.\n */\nconst label = (streaming: boolean, seconds: number | null) => {\n  if (streaming) return \"Thinking…\";\n  if (seconds === null) return \"Reasoning\";\n  return `Thought for ${seconds} second${seconds === 1 ? \"\" : \"s\"}`;\n};\n\n/**\n * The disclosure itself, sized to its own words rather than to the column: thinking is subordinate\n * to the answer beside it, and a full-width bar with a chevron at the far end reads as a section\n * heading — the one thing this is not.\n */\nexport const ReasoningTrigger = (props: React.ComponentProps<typeof CollapsibleTrigger>) => {\n  const { className, children, slot, ...rest } = props;\n  const { seconds, streaming } = React.useContext(Ctx);\n\n  return (\n    <CollapsibleTrigger\n      className={cn(\n        \"-ms-1.5 inline-flex min-h-[24px] w-fit items-center gap-1.5 rounded-md px-1.5 py-1\",\n        \"text-muted-foreground text-xs\",\n        \"transition-colors hover:bg-accent hover:text-foreground motion-reduce:transition-none!\",\n        \"group-data-streaming/reasoning:text-info-foreground\",\n        \"[&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...rest}\n      slot={slot ?? \"reasoning-trigger\"}\n    >\n      {streaming ? <Spinner aria-hidden className=\"size-3.5\" /> : <BrainIcon />}\n      <ark.span className=\"text-start font-medium\">\n        {children ?? label(streaming, seconds)}\n      </ark.span>\n      <CollapsibleIndicator className=\"opacity-64\" />\n    </CollapsibleTrigger>\n  );\n};\n\n/**\n * The thinking, on a rail rather than in a panel — a quotation of the model to itself, and quieter\n * than any message beside it. The rail takes the streaming tint so a wall of text that is still\n * growing says so at the edge, where it does not move the words.\n */\nexport const ReasoningContent = (props: React.ComponentProps<typeof CollapsibleContent>) => {\n  const { className, children, slot, ...rest } = props;\n  const { text } = React.useContext(Ctx);\n\n  return (\n    <CollapsibleContent\n      className={cn(\n        \"mt-1 ms-2.5 whitespace-pre-wrap break-words\",\n        \"border-border border-s ps-3.5\",\n        \"text-muted-foreground text-sm leading-relaxed\",\n        \"group-data-streaming/reasoning:border-info\",\n        \"transition-colors motion-reduce:transition-none!\",\n        className\n      )}\n      {...rest}\n      slot={slot ?? \"reasoning-content\"}\n    >\n      {children ?? text}\n    </CollapsibleContent>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAeA;AAA8F;AACnF;AACE;AAEb;AA4BE;AAAM;AACJ;AACA;AACc;AACd;AACA;AACA;AACA;AACG;AAiBL;AACE;AACE;AACA;AAAA;AAEF;AAEoB;AAMpB;AACA;AACE;AACA;AAAA;AAIF;AACA;AAA+B;AAK7B;AAAC;AAAA;AACkD;AAChB;AAE/B;AAEe;AACjB;AACc;AACV;AACU;AAIV;AAAkB;AACA;AACpB;AAAA;AAKV;AAwBE;AAGA;AACE;AAAC;AAAA;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACU;AAEb;AAAsE;AAGvE;AAC6C;AAAA;AAAA;AAGnD;AAQE;AAGA;AACE;AAAC;AAAA;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACU;AAED;AAAA;AAGnB;;;;;;"}

package/dist/tool.d.ts

@@ -1,56 +1,31 @@
 import { ark } from '@ark-ui/react/factory';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@kanzo-tech/ui';
-import { RunState } from './task.js';
+import { DynamicToolUIPart, ToolUIPart } from '@kanzo-tech/llm';
+import { CollapsibleContent, CollapsibleTrigger } from '@kanzo-tech/ui';
 import * as React from "react";
-export interface ToolProps extends React.ComponentProps<typeof ark.div> {
-    state?: RunState;
-    defaultOpen?: boolean;
-    open?: boolean;
-    onOpenChange?: React.ComponentProps<typeof Collapsible>["onOpenChange"];
-}
+/** A tool call as the AI SDK streams it. */
+export type ToolPart = ToolUIPart | DynamicToolUIPart;
 /**
- * One call the model made, folded away until it has an answer — reaching `done` or `failed` opens
- * it, and the reader's own toggle ends that for good.
+ * One call the model made, bound to its part: state, name, input, output and error are read from
+ * it, so a caller passes the part and nothing else.
  *
- * **It opens on the transition, not on the initial value, and that distinction is the whole of it.**
- * This was `defaultOpen={defaultOpen ?? state === "done"}`, which Ark's Collapsible reads once at
- * mount: a tool mounted the moment the model plans it — state `pending` — never opened again, not
- * when it finished and not when it failed. Failing silently closed is the worse half: the reason
- * the call failed sat behind a click nobody knew to make. The docblock claimed the opposite, and a
- * showcase had to work around it before anyone noticed.
- *
- * A caller passing `open` still wins outright; `defaultOpen` still decides the first paint.
- *
- * The state sits on a wrapper rather than on the collapsible, and that is not tidiness: Ark writes
- * its own `data-state` (`open` / `closed`) on the machine's root, so a tool state written there
- * replaces it — the parts keep working, and every `[data-state=open]` a consumer wrote stops
- * matching, with nothing to see in a diff.
- */
-export declare const Tool: (props: ToolProps) => React.JSX.Element;
-/**
- * The row that says a call happened: the wrench, the tool's name in the face its arguments are
- * written in, the state as a pill, and the chevron the whole row toggles.
- */
-export declare const ToolHeader: (props: React.ComponentProps<typeof CollapsibleTrigger>) => React.JSX.Element;
-export declare const ToolContent: (props: React.ComponentProps<typeof CollapsibleContent>) => React.JSX.Element;
-export interface ToolIoProps extends React.ComponentProps<typeof ark.div> {
-    /** Drawn as a JSON tree when there are no children. */
-    data?: unknown;
-    /** The small heading over the panel. `null` drops it. */
-    label?: string | null;
-}
-/**
- * What was passed to the call — **children, not a formatted-JSON prop.**
- *
- * The reference takes `input` and renders it as JSON because a general chatbot cannot know what
- * the tool was. We always know: our input is a SQL statement and our output is a result table, and
- * both have a component in this house already. So the payload is composition, and JSON is only the
- * default for when the caller has nothing better — never the one thing on offer.
- *
- * Which is also why the panel does not force a monospace face on everything inside it: a result
- * table set in mono is the cost of a default that assumed JSON. Code sets itself.
+ * It opens itself when the call settles — a result is what a reader came for — unless the reader
+ * has already opened or closed it, in which case their choice stands. The state sits on a wrapper
+ * rather than on the collapsible because Ark writes its own `data-state` (`open`/`closed`) there.
  */
-export declare const ToolInput: (props: ToolIoProps) => React.JSX.Element;
-/** What came back. Children, for the same reason as {@link ToolInput}. */
-export declare const ToolOutput: (props: ToolIoProps) => React.JSX.Element;
+export declare function Tool(props: Omit<React.ComponentProps<typeof ark.div>, "part"> & {
+    part: ToolPart;
+}): React.JSX.Element;
+/** The tool's name, its state as a pill, and the chevron the whole row toggles. */
+export declare function ToolHeader(props: React.ComponentProps<typeof CollapsibleTrigger>): React.JSX.Element;
+export declare function ToolContent(props: React.ComponentProps<typeof CollapsibleContent>): React.JSX.Element;
+/** What the model passed in; the JSON tree unless `children` draws it. */
+export declare function ToolInput(props: {
+    children?: React.ReactNode;
+    label?: string;
+}): React.JSX.Element | null;
+/** What came back — or why nothing did. The JSON tree unless `children` draws it. */
+export declare function ToolOutput(props: {
+    children?: React.ReactNode;
+    label?: string;
+}): React.JSX.Element | null;
 //# sourceMappingURL=tool.d.ts.map

package/dist/tool.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool.d.ts","sourceRoot":"","sources":["../src/tool.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,WAAW,EACX,kBAAkB,EAElB,kBAAkB,EAEnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAuB,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AA6B/D,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC;IACrE,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,cAAc,CAAC,CAAC;CACzE;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,sBAwCpC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,sBAwBhF,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,sBAejF,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC;IACvE,uDAAuD;IACvD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,GAAI,OAAO,WAAW,sBAoB3C,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,UAAU,GAAI,OAAO,WAAW,sBA8B5C,CAAC"}
+{"version":3,"file":"tool.d.ts","sourceRoot":"","sources":["../src/tool.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,iBAAiB,EAAe,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACvF,OAAO,EAKL,kBAAkB,EAElB,kBAAkB,EAGnB,MAAM,gBAAgB,CAAC;AAExB,4CAA4C;AAC5C,MAAM,MAAM,QAAQ,GAAG,UAAU,GAAG,iBAAiB,CAAC;AAuCtD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,GAAG;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,qBA0ClG;AAED,mFAAmF;AACnF,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,qBA2BhF;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,qBASjF;AAeD,0EAA0E;AAC1E,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,4BAQ9E;AAED,qFAAqF;AACrF,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,4BAe/E"}

package/dist/tool.js

@@ -1,122 +1,110 @@
 "use client";
-import { jsx as t, jsxs as p, Fragment as N } from "react/jsx-runtime";
-import { ark as c } from "@ark-ui/react/factory";
-import { WrenchIcon as E } from "lucide-react";
-import * as d from "react";
-import { Collapsible as k, cn as i, CollapsibleContent as y, CollapsibleTrigger as L, Badge as O, CollapsibleIndicator as A, JsonTreeView as b } from "@kanzo-tech/ui";
-import { RUN_MARK as _, RUN_LABEL as j } from "./task.js";
-const z = {
-  pending: "outline",
-  running: "info",
-  done: "success",
-  failed: "destructive"
-}, v = "mb-1.5 block font-medium text-muted-foreground text-xs uppercase tracking-wide", w = [
-  "min-w-0 overflow-x-auto",
-  "rounded-lg bg-muted",
-  "px-3 py-2 text-xs",
-  "[&_code]:font-mono"
-].join(" "), C = d.createContext(null), B = (o) => {
-  const e = d.useContext(C);
-  if (!e) throw new Error(`${o} must render inside <Tool>`);
-  return e;
-}, F = (o) => {
-  const { state: e = "pending", defaultOpen: l, open: n, onOpenChange: a, className: s, children: u, slot: r, ...T } = o, m = e === "done" || e === "failed", [R, f] = d.useState(l ?? m), x = d.useRef(!1), h = d.useRef(m);
-  return d.useEffect(() => {
-    !x.current && m && !h.current && f(!0), h.current = m;
-  }, [m]), /* @__PURE__ */ t(C.Provider, { value: { state: e }, children: /* @__PURE__ */ t(
-    c.div,
+import { jsx as t, jsxs as i, Fragment as C } from "react/jsx-runtime";
+import { ark as u } from "@ark-ui/react/factory";
+import { WrenchIcon as T, CircleXIcon as I, CircleCheckIcon as k, CircleDashedIcon as O } from "lucide-react";
+import * as n from "react";
+import { getToolName as R } from "@kanzo-tech/llm";
+import { Collapsible as E, cn as d, CollapsibleTrigger as P, Badge as L, CollapsibleIndicator as y, CollapsibleContent as z, JsonTreeView as x, Spinner as A } from "@kanzo-tech/ui";
+const g = {
+  "input-streaming": { tone: "info", label: "Preparing", settled: !1, failed: !1 },
+  "input-available": { tone: "info", label: "Running", settled: !1, failed: !1 },
+  "approval-requested": { tone: "outline", label: "Awaiting approval", settled: !1, failed: !1 },
+  "approval-responded": { tone: "info", label: "Running", settled: !1, failed: !1 },
+  "output-available": { tone: "success", label: "Done", settled: !0, failed: !1 },
+  "output-error": { tone: "destructive", label: "Failed", settled: !0, failed: !0 },
+  "output-denied": { tone: "destructive", label: "Denied", settled: !0, failed: !0 }
+}, D = (e) => e.failed ? /* @__PURE__ */ t(I, { className: "text-destructive-foreground" }) : e.settled ? /* @__PURE__ */ t(k, { className: "text-success-foreground" }) : e.tone === "outline" ? /* @__PURE__ */ t(O, { className: "text-muted-foreground" }) : /* @__PURE__ */ t(A, { className: "text-info-foreground" }), S = "mb-1.5 block font-medium text-muted-foreground text-xs uppercase tracking-wide", j = "min-w-0 overflow-x-auto rounded-lg bg-muted px-3 py-2 text-xs [&_code]:font-mono", v = n.createContext(null), m = (e) => {
+  const l = n.useContext(v);
+  if (!l) throw new Error(`${e} must render inside <Tool>`);
+  return l;
+};
+function X(e) {
+  const { part: l, className: a, children: r, slot: c, ...s } = e, o = g[l.state], [N, p] = n.useState(o.settled), h = n.useRef(!1), b = n.useRef(o.settled);
+  return n.useEffect(() => {
+    !h.current && o.settled && !b.current && p(!0), b.current = o.settled;
+  }, [o.settled]), /* @__PURE__ */ t(v.Provider, { value: l, children: /* @__PURE__ */ t(
+    u.div,
     {
-      className: i(
-        "group/tool w-full overflow-hidden",
-        "rounded-xl border bg-card shadow-xs/5",
-        s
-      ),
-      "data-state": e,
-      ...T,
-      "data-slot": r ?? "tool",
+      className: d("group/tool w-full overflow-hidden rounded-xl border bg-card shadow-xs/5", a),
+      "data-failed": o.failed || void 0,
+      "data-state": l.state,
+      ...s,
+      "data-slot": c ?? "tool",
       children: /* @__PURE__ */ t(
-        k,
+        E,
         {
-          onOpenChange: (g) => {
-            x.current = !0, f(g.open), a == null || a(g);
+          onOpenChange: (w) => {
+            h.current = !0, p(w.open);
           },
-          open: n ?? R,
+          open: N,
           slot: "tool-collapsible",
-          children: u
+          children: r ?? /* @__PURE__ */ i(C, { children: [
+            /* @__PURE__ */ t(B, {}),
+            /* @__PURE__ */ i(F, { children: [
+              /* @__PURE__ */ t(H, {}),
+              /* @__PURE__ */ t(_, {})
+            ] })
+          ] })
         }
       )
     }
   ) });
-}, J = (o) => {
-  const { className: e, children: l, slot: n, ...a } = o, { state: s } = B("ToolHeader");
-  return /* @__PURE__ */ p(
-    L,
+}
+function B(e) {
+  const { className: l, children: a, slot: r, ...c } = e, s = m("ToolHeader"), o = g[s.state];
+  return /* @__PURE__ */ i(
+    P,
     {
-      className: i(
+      className: d(
         "flex min-h-[24px] w-full items-center gap-2.5 px-3 py-2.5 text-sm",
         "transition-colors hover:bg-accent motion-reduce:transition-none!",
         "[&_svg:not([class*='size-'])]:size-4",
-        e
+        l
       ),
-      ...a,
-      slot: n ?? "tool-header",
+      ...c,
+      slot: r ?? "tool-header",
       children: [
-        /* @__PURE__ */ t(E, { className: "shrink-0 text-muted-foreground" }),
-        /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate text-start font-medium font-mono", children: l }),
-        /* @__PURE__ */ p(O, { "data-state": s, pill: !0, size: "sm", slot: "tool-badge", variant: z[s], children: [
-          _[s],
-          j[s]
+        /* @__PURE__ */ t(T, { className: "shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate text-start font-medium font-mono", children: a ?? R(s) }),
+        /* @__PURE__ */ i(L, { "data-state": s.state, pill: !0, size: "sm", slot: "tool-badge", variant: o.tone, children: [
+          D(o),
+          o.label
         ] }),
-        /* @__PURE__ */ t(A, { className: "shrink-0 text-muted-foreground" })
+        /* @__PURE__ */ t(y, { className: "shrink-0 text-muted-foreground" })
       ]
     }
   );
-}, K = (o) => {
-  const { className: e, slot: l, ...n } = o;
+}
+function F(e) {
+  const { className: l, slot: a, ...r } = e;
   return /* @__PURE__ */ t(
-    y,
+    z,
     {
-      className: i("flex min-w-0 flex-col gap-4 border-t px-3 py-3", e),
-      ...n,
-      slot: l ?? "tool-content"
+      className: d("flex min-w-0 flex-col gap-4 border-t px-3 py-3", l),
+      ...r,
+      slot: a ?? "tool-content"
     }
   );
-}, M = (o) => {
-  const { data: e, label: l = "Parameters", className: n, children: a, slot: s, ...u } = o, r = a ?? (e === void 0 ? null : /* @__PURE__ */ t(b, { data: e }));
-  return /* @__PURE__ */ t(c.div, { className: i("min-w-0", n), ...u, "data-slot": s ?? "tool-input", children: r === null ? null : /* @__PURE__ */ p(N, { children: [
-    l === null ? null : /* @__PURE__ */ t(c.span, { className: v, "data-slot": "tool-label", children: l }),
-    /* @__PURE__ */ t(c.div, { className: w, "data-slot": "tool-panel", children: r })
-  ] }) });
-}, V = (o) => {
-  const { data: e, label: l = "Result", className: n, children: a, slot: s, ...u } = o, r = a ?? (e === void 0 ? null : /* @__PURE__ */ t(b, { data: e }));
-  return /* @__PURE__ */ t(
-    c.div,
-    {
-      className: i("min-w-0", "group-data-[state=failed]/tool:text-destructive-foreground", n),
-      ...u,
-      "data-slot": s ?? "tool-output",
-      children: r === null ? null : /* @__PURE__ */ p(N, { children: [
-        l === null ? null : /* @__PURE__ */ t(c.span, { className: v, "data-slot": "tool-label", children: l }),
-        /* @__PURE__ */ t(
-          c.div,
-          {
-            className: i(
-              w,
-              "group-data-[state=failed]/tool:bg-destructive/7"
-            ),
-            "data-slot": "tool-panel",
-            children: r
-          }
-        )
-      ] })
-    }
-  );
-};
+}
+function f(e) {
+  return /* @__PURE__ */ i(u.div, { className: d("min-w-0", e.failed && "text-destructive-foreground"), "data-slot": e.slot, children: [
+    /* @__PURE__ */ t(u.span, { className: S, "data-slot": "tool-label", children: e.label }),
+    /* @__PURE__ */ t(u.div, { className: d(j, e.failed && "bg-destructive/7"), "data-slot": "tool-panel", children: e.children })
+  ] });
+}
+function H(e) {
+  const l = m("ToolInput");
+  return e.children === void 0 && l.input === void 0 ? null : /* @__PURE__ */ t(f, { label: e.label ?? "Parameters", slot: "tool-input", children: e.children ?? /* @__PURE__ */ t(x, { data: l.input }) });
+}
+function _(e) {
+  const l = m("ToolOutput");
+  return l.state === "output-error" || l.state === "output-denied" ? /* @__PURE__ */ t(f, { failed: !0, label: e.label ?? "Error", slot: "tool-output", children: l.state === "output-error" ? l.errorText : "The call was not allowed." }) : l.state !== "output-available" ? null : /* @__PURE__ */ t(f, { label: e.label ?? "Result", slot: "tool-output", children: e.children ?? /* @__PURE__ */ t(x, { data: l.output }) });
+}
 export {
-  F as Tool,
-  K as ToolContent,
-  J as ToolHeader,
-  M as ToolInput,
-  V as ToolOutput
+  X as Tool,
+  F as ToolContent,
+  B as ToolHeader,
+  H as ToolInput,
+  _ as ToolOutput
 };
 //# sourceMappingURL=tool.js.map

package/dist/tool.js.map

@@ -1 +1 @@
-{"version":3,"file":"tool.js","sources":["../src/tool.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport { WrenchIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport {\n  Badge,\n  type BadgeVariant,\n  cn,\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleIndicator,\n  CollapsibleTrigger,\n  JsonTreeView,\n} from \"@kanzo-tech/ui\";\nimport { RUN_LABEL, RUN_MARK, type RunState } from \"./task.js\";\n\n/** Which soft badge holds the mark. The mark itself is `Task`'s — one drawing of four states. */\nconst TONE: Record<RunState, BadgeVariant> = {\n  pending: \"outline\",\n  running: \"info\",\n  done: \"success\",\n  failed: \"destructive\",\n};\n\nconst LABEL = \"mb-1.5 block font-medium text-muted-foreground text-xs uppercase tracking-wide\";\n\n// A recess inside the card, and NOT a second frame: the card is already outlined, so a bordered\n// panel inside it draws a box in a box on every call in a transcript. The fill alone is the\n// separation — which is also what the source does (`bg-muted/50`, no border).\nconst PANEL = [\n  \"min-w-0 overflow-x-auto\",\n  \"rounded-lg bg-muted\",\n  \"px-3 py-2 text-xs\",\n  \"[&_code]:font-mono\",\n].join(\" \");\n\nconst Ctx = React.createContext<{ state: RunState } | null>(null);\nconst useCtx = (part: string) => {\n  const c = React.useContext(Ctx);\n  if (!c) throw new Error(`${part} must render inside <Tool>`);\n  return c;\n};\n\nexport interface ToolProps extends React.ComponentProps<typeof ark.div> {\n  state?: RunState;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: React.ComponentProps<typeof Collapsible>[\"onOpenChange\"];\n}\n\n/**\n * One call the model made, folded away until it has an answer — reaching `done` or `failed` opens\n * it, and the reader's own toggle ends that for good.\n *\n * **It opens on the transition, not on the initial value, and that distinction is the whole of it.**\n * This was `defaultOpen={defaultOpen ?? state === \"done\"}`, which Ark's Collapsible reads once at\n * mount: a tool mounted the moment the model plans it — state `pending` — never opened again, not\n * when it finished and not when it failed. Failing silently closed is the worse half: the reason\n * the call failed sat behind a click nobody knew to make. The docblock claimed the opposite, and a\n * showcase had to work around it before anyone noticed.\n *\n * A caller passing `open` still wins outright; `defaultOpen` still decides the first paint.\n *\n * The state sits on a wrapper rather than on the collapsible, and that is not tidiness: Ark writes\n * its own `data-state` (`open` / `closed`) on the machine's root, so a tool state written there\n * replaces it — the parts keep working, and every `[data-state=open]` a consumer wrote stops\n * matching, with nothing to see in a diff.\n */\nexport const Tool = (props: ToolProps) => {\n  const { state = \"pending\", defaultOpen, open, onOpenChange, className, children, slot, ...rest } =\n    props;\n\n  const settled = state === \"done\" || state === \"failed\";\n  const [selfOpen, setSelfOpen] = React.useState(defaultOpen ?? settled);\n  const touched = React.useRef(false);\n  const wasSettled = React.useRef(settled);\n\n  React.useEffect(() => {\n    if (!touched.current && settled && !wasSettled.current) setSelfOpen(true);\n    wasSettled.current = settled;\n  }, [settled]);\n\n  return (\n    <Ctx.Provider value={{ state }}>\n      <ark.div\n        className={cn(\n          \"group/tool w-full overflow-hidden\",\n          \"rounded-xl border bg-card shadow-xs/5\",\n          className\n        )}\n        data-state={state}\n        {...rest}\n        data-slot={slot ?? \"tool\"}\n      >\n        <Collapsible\n          onOpenChange={(details) => {\n            touched.current = true;\n            setSelfOpen(details.open);\n            onOpenChange?.(details);\n          }}\n          open={open ?? selfOpen}\n          slot=\"tool-collapsible\"\n        >\n          {children}\n        </Collapsible>\n      </ark.div>\n    </Ctx.Provider>\n  );\n};\n\n/**\n * The row that says a call happened: the wrench, the tool's name in the face its arguments are\n * written in, the state as a pill, and the chevron the whole row toggles.\n */\nexport const ToolHeader = (props: React.ComponentProps<typeof CollapsibleTrigger>) => {\n  const { className, children, slot, ...rest } = props;\n  const { state } = useCtx(\"ToolHeader\");\n\n  return (\n    <CollapsibleTrigger\n      className={cn(\n        \"flex min-h-[24px] w-full items-center gap-2.5 px-3 py-2.5 text-sm\",\n        \"transition-colors hover:bg-accent motion-reduce:transition-none!\",\n        \"[&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...rest}\n      slot={slot ?? \"tool-header\"}\n    >\n      <WrenchIcon className=\"shrink-0 text-muted-foreground\" />\n      <span className=\"min-w-0 flex-1 truncate text-start font-medium font-mono\">{children}</span>\n      <Badge data-state={state} pill size=\"sm\" slot=\"tool-badge\" variant={TONE[state]}>\n        {RUN_MARK[state]}\n        {RUN_LABEL[state]}\n      </Badge>\n      <CollapsibleIndicator className=\"shrink-0 text-muted-foreground\" />\n    </CollapsibleTrigger>\n  );\n};\n\nexport const ToolContent = (props: React.ComponentProps<typeof CollapsibleContent>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <CollapsibleContent\n      // `min-w-0`, and it is the whole reason a wide result was being sliced instead of scrolling: a\n      // flex child's default `min-width: auto` refuses to shrink below its content, so the panel\n      // below could carry `overflow-x-auto` all it liked and never get the chance to use it. The\n      // card is `overflow-hidden`, so what the reader saw was a table with its last column cut off\n      // and no scrollbar to recover it.\n      className={cn(\"flex min-w-0 flex-col gap-4 border-t px-3 py-3\", className)}\n      {...rest}\n      slot={slot ?? \"tool-content\"}\n    />\n  );\n};\n\nexport interface ToolIoProps extends React.ComponentProps<typeof ark.div> {\n  /** Drawn as a JSON tree when there are no children. */\n  data?: unknown;\n  /** The small heading over the panel. `null` drops it. */\n  label?: string | null;\n}\n\n/**\n * What was passed to the call — **children, not a formatted-JSON prop.**\n *\n * The reference takes `input` and renders it as JSON because a general chatbot cannot know what\n * the tool was. We always know: our input is a SQL statement and our output is a result table, and\n * both have a component in this house already. So the payload is composition, and JSON is only the\n * default for when the caller has nothing better — never the one thing on offer.\n *\n * Which is also why the panel does not force a monospace face on everything inside it: a result\n * table set in mono is the cost of a default that assumed JSON. Code sets itself.\n */\nexport const ToolInput = (props: ToolIoProps) => {\n  const { data, label = \"Parameters\", className, children, slot, ...rest } = props;\n  const body = children ?? (data === undefined ? null : <JsonTreeView data={data} />);\n\n  return (\n    <ark.div className={cn(\"min-w-0\", className)} {...rest} data-slot={slot ?? \"tool-input\"}>\n      {body === null ? null : (\n        <>\n          {label === null ? null : (\n            <ark.span className={LABEL} data-slot=\"tool-label\">\n              {label}\n            </ark.span>\n          )}\n          <ark.div className={PANEL} data-slot=\"tool-panel\">\n            {body}\n          </ark.div>\n        </>\n      )}\n    </ark.div>\n  );\n};\n\n/** What came back. Children, for the same reason as {@link ToolInput}. */\nexport const ToolOutput = (props: ToolIoProps) => {\n  const { data, label = \"Result\", className, children, slot, ...rest } = props;\n  const body = children ?? (data === undefined ? null : <JsonTreeView data={data} />);\n\n  return (\n    <ark.div\n      className={cn(\"min-w-0\", \"group-data-[state=failed]/tool:text-destructive-foreground\", className)}\n      {...rest}\n      data-slot={slot ?? \"tool-output\"}\n    >\n      {body === null ? null : (\n        <>\n          {label === null ? null : (\n            <ark.span className={LABEL} data-slot=\"tool-label\">\n              {label}\n            </ark.span>\n          )}\n          <ark.div\n            className={cn(\n              PANEL,\n              \"group-data-[state=failed]/tool:bg-destructive/7\"\n            )}\n            data-slot=\"tool-panel\"\n          >\n            {body}\n          </ark.div>\n        </>\n      )}\n    </ark.div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAkBA;AAA6C;AAClC;AACA;AACH;AAER;AAOc;AACZ;AACA;AACA;AAEF;AAIE;AACA;AACA;AACF;AA4BE;AAQA;AACE;AACqB;AAKnB;AAAK;AAAJ;AACY;AACT;AACA;AACA;AAAA;AAEU;AACR;AACe;AAEnB;AAAC;AAAA;AAEG;AAEe;AACjB;AACc;AACT;AAEJ;AAAA;AAAA;AACH;AAIR;AAOE;AAGA;AACE;AAAC;AAAA;AACY;AACT;AACA;AACA;AACA;AAAA;AAEE;AACU;AAEd;AAAuD;AAC8B;AAElF;AAAc;AACC;AAClB;AACiE;AAAA;AAAA;AAGvE;AAGE;AAEA;AACE;AAAC;AAAA;AAM0E;AACrE;AACU;AAAA;AAGpB;AAqBE;AAGA;AAIS;AAGC;AAIF;AAKV;AAIE;AAGA;AACE;AAAK;AAAJ;AACiG;AAC5F;AACe;AAId;AAGC;AAEF;AAAK;AAAJ;AACY;AACT;AACA;AAAA;AAEQ;AAET;AAAA;AAAA;AAEL;AAAA;AAIR;;;;;;;;"}
+{"version":3,"file":"tool.js","sources":["../src/tool.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport { CircleCheckIcon, CircleDashedIcon, CircleXIcon, WrenchIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { type DynamicToolUIPart, getToolName, type ToolUIPart } from \"@kanzo-tech/llm\";\nimport {\n  Badge,\n  type BadgeVariant,\n  cn,\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleIndicator,\n  CollapsibleTrigger,\n  JsonTreeView,\n  Spinner,\n} from \"@kanzo-tech/ui\";\n\n/** A tool call as the AI SDK streams it. */\nexport type ToolPart = ToolUIPart | DynamicToolUIPart;\ntype State = ToolPart[\"state\"];\n\n/**\n * The AI SDK's own states, drawn — not mapped onto a vocabulary of ours. Four tones are all a\n * reader needs to tell apart (waiting, working, done, failed); the label says which of the SDK's\n * seven it is.\n */\nconst LOOK: Record<State, { tone: BadgeVariant; label: string; settled: boolean; failed: boolean }> = {\n  \"input-streaming\": { tone: \"info\", label: \"Preparing\", settled: false, failed: false },\n  \"input-available\": { tone: \"info\", label: \"Running\", settled: false, failed: false },\n  \"approval-requested\": { tone: \"outline\", label: \"Awaiting approval\", settled: false, failed: false },\n  \"approval-responded\": { tone: \"info\", label: \"Running\", settled: false, failed: false },\n  \"output-available\": { tone: \"success\", label: \"Done\", settled: true, failed: false },\n  \"output-error\": { tone: \"destructive\", label: \"Failed\", settled: true, failed: true },\n  \"output-denied\": { tone: \"destructive\", label: \"Denied\", settled: true, failed: true },\n};\n\nconst mark = (look: (typeof LOOK)[State]) =>\n  look.failed ? (\n    <CircleXIcon className=\"text-destructive-foreground\" />\n  ) : look.settled ? (\n    <CircleCheckIcon className=\"text-success-foreground\" />\n  ) : look.tone === \"outline\" ? (\n    <CircleDashedIcon className=\"text-muted-foreground\" />\n  ) : (\n    <Spinner className=\"text-info-foreground\" />\n  );\n\nconst LABEL = \"mb-1.5 block font-medium text-muted-foreground text-xs uppercase tracking-wide\";\nconst PANEL = \"min-w-0 overflow-x-auto rounded-lg bg-muted px-3 py-2 text-xs [&_code]:font-mono\";\n\nconst Ctx = React.createContext<ToolPart | null>(null);\nconst usePart = (name: string) => {\n  const part = React.useContext(Ctx);\n  if (!part) throw new Error(`${name} must render inside <Tool>`);\n  return part;\n};\n\n/**\n * One call the model made, bound to its part: state, name, input, output and error are read from\n * it, so a caller passes the part and nothing else.\n *\n * It opens itself when the call settles — a result is what a reader came for — unless the reader\n * has already opened or closed it, in which case their choice stands. The state sits on a wrapper\n * rather than on the collapsible because Ark writes its own `data-state` (`open`/`closed`) there.\n */\nexport function Tool(props: Omit<React.ComponentProps<typeof ark.div>, \"part\"> & { part: ToolPart }) {\n  const { part, className, children, slot, ...rest } = props;\n  const look = LOOK[part.state];\n  const [open, setOpen] = React.useState(look.settled);\n  const touched = React.useRef(false);\n  const wasSettled = React.useRef(look.settled);\n\n  React.useEffect(() => {\n    if (!touched.current && look.settled && !wasSettled.current) setOpen(true);\n    wasSettled.current = look.settled;\n  }, [look.settled]);\n\n  return (\n    <Ctx.Provider value={part}>\n      <ark.div\n        className={cn(\"group/tool w-full overflow-hidden rounded-xl border bg-card shadow-xs/5\", className)}\n        data-failed={look.failed || undefined}\n        data-state={part.state}\n        {...rest}\n        data-slot={slot ?? \"tool\"}\n      >\n        <Collapsible\n          onOpenChange={(details) => {\n            touched.current = true;\n            setOpen(details.open);\n          }}\n          open={open}\n          slot=\"tool-collapsible\"\n        >\n          {children ?? (\n            <>\n              <ToolHeader />\n              <ToolContent>\n                <ToolInput />\n                <ToolOutput />\n              </ToolContent>\n            </>\n          )}\n        </Collapsible>\n      </ark.div>\n    </Ctx.Provider>\n  );\n}\n\n/** The tool's name, its state as a pill, and the chevron the whole row toggles. */\nexport function ToolHeader(props: React.ComponentProps<typeof CollapsibleTrigger>) {\n  const { className, children, slot, ...rest } = props;\n  const part = usePart(\"ToolHeader\");\n  const look = LOOK[part.state];\n\n  return (\n    <CollapsibleTrigger\n      className={cn(\n        \"flex min-h-[24px] w-full items-center gap-2.5 px-3 py-2.5 text-sm\",\n        \"transition-colors hover:bg-accent motion-reduce:transition-none!\",\n        \"[&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...rest}\n      slot={slot ?? \"tool-header\"}\n    >\n      <WrenchIcon className=\"shrink-0 text-muted-foreground\" />\n      <span className=\"min-w-0 flex-1 truncate text-start font-medium font-mono\">\n        {children ?? getToolName(part)}\n      </span>\n      <Badge data-state={part.state} pill size=\"sm\" slot=\"tool-badge\" variant={look.tone}>\n        {mark(look)}\n        {look.label}\n      </Badge>\n      <CollapsibleIndicator className=\"shrink-0 text-muted-foreground\" />\n    </CollapsibleTrigger>\n  );\n}\n\nexport function ToolContent(props: React.ComponentProps<typeof CollapsibleContent>) {\n  const { className, slot, ...rest } = props;\n  return (\n    <CollapsibleContent\n      className={cn(\"flex min-w-0 flex-col gap-4 border-t px-3 py-3\", className)}\n      {...rest}\n      slot={slot ?? \"tool-content\"}\n    />\n  );\n}\n\nfunction Io(props: { label: string; failed?: boolean; slot: string; children: React.ReactNode }) {\n  return (\n    <ark.div className={cn(\"min-w-0\", props.failed && \"text-destructive-foreground\")} data-slot={props.slot}>\n      <ark.span className={LABEL} data-slot=\"tool-label\">\n        {props.label}\n      </ark.span>\n      <ark.div className={cn(PANEL, props.failed && \"bg-destructive/7\")} data-slot=\"tool-panel\">\n        {props.children}\n      </ark.div>\n    </ark.div>\n  );\n}\n\n/** What the model passed in; the JSON tree unless `children` draws it. */\nexport function ToolInput(props: { children?: React.ReactNode; label?: string }) {\n  const part = usePart(\"ToolInput\");\n  if (props.children === undefined && part.input === undefined) return null;\n  return (\n    <Io label={props.label ?? \"Parameters\"} slot=\"tool-input\">\n      {props.children ?? <JsonTreeView data={part.input} />}\n    </Io>\n  );\n}\n\n/** What came back — or why nothing did. The JSON tree unless `children` draws it. */\nexport function ToolOutput(props: { children?: React.ReactNode; label?: string }) {\n  const part = usePart(\"ToolOutput\");\n  if (part.state === \"output-error\" || part.state === \"output-denied\") {\n    return (\n      <Io failed label={props.label ?? \"Error\"} slot=\"tool-output\">\n        {part.state === \"output-error\" ? part.errorText : \"The call was not allowed.\"}\n      </Io>\n    );\n  }\n  if (part.state !== \"output-available\") return null;\n  return (\n    <Io label={props.label ?? \"Result\"} slot=\"tool-output\">\n      {props.children ?? <JsonTreeView data={part.output} />}\n    </Io>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA2BA;AAAsG;AACrB;AACF;AACgB;AACb;AACH;AACE;AAEjF;AAkBE;AACA;AACA;AACF;AAUO;AACL;AAMA;AACE;AAC0B;AAKxB;AAAK;AAAJ;AACmG;AACtE;AACX;AACb;AACe;AAEnB;AAAC;AAAA;AAEG;AACoB;AACtB;AACA;AACK;AAID;AAAY;AAEV;AAAW;AACC;AACd;AACF;AAAA;AAAA;AAEJ;AAIR;AAGO;AACL;AAIA;AACE;AAAC;AAAA;AACY;AACT;AACA;AACA;AACA;AAAA;AAEE;AACU;AAEd;AAAuD;AAGvD;AAEG;AAAS;AACJ;AACR;AACiE;AAAA;AAAA;AAGvE;AAEO;AACL;AACA;AACE;AAAC;AAAA;AAC0E;AACrE;AACU;AAAA;AAGpB;AAEA;AACE;AAEI;AAEA;AAGA;AAGN;AAGO;AACL;AACA;AAMF;AAGO;AACL;AACA;AAaF;;;;;;;;"}