@ai-matrx/chat 0.6.6 → 0.7.1

package/dist/tool-call-visualization/configured-rows/ConfiguredRowRenderer.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { GenericRenderer } from "../registry/GenericRenderer.js";
+import { ConfiguredToolRow, ToolDisplayBoundary } from "./ConfiguredToolRow.js";
+import { toRowEntry } from "./to-row-entry.js";
+const loaded = /* @__PURE__ */ new WeakMap();
+function useConfig(bare, cfg, load) {
+  const [fetched, setFetched] = useState(null);
+  useEffect(() => {
+    if (cfg || !load) return;
+    let alive = true;
+    let p = loaded.get(load);
+    if (!p) loaded.set(load, p = load());
+    void p.then((all) => alive && setFetched(all[bare] ?? null));
+    return () => {
+      alive = false;
+    };
+  }, [bare, cfg, load]);
+  return cfg ?? fetched;
+}
+function ConfiguredRowRenderer({
+  props,
+  bare,
+  cfg: given,
+  load,
+  stripPrefix
+}) {
+  const cfg = useConfig(bare, given, load);
+  const row = useMemo(() => toRowEntry(props.entry, stripPrefix), [props.entry, stripPrefix]);
+  if (!cfg) return /* @__PURE__ */ jsx("div", { className: "h-5", "aria-hidden": true });
+  return /* @__PURE__ */ jsx(ToolDisplayBoundary, { toolName: props.entry.toolName, fallback: /* @__PURE__ */ jsx(GenericRenderer, { ...props }), children: /* @__PURE__ */ jsx(ConfiguredToolRow, { entry: row, kind: "client", cfg }) });
+}
+export {
+  ConfiguredRowRenderer
+};

package/dist/tool-call-visualization/configured-rows/ConfiguredToolRow.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Renders a tool entry using a `ToolDisplayEntry` from the registry. Used
+ * by both `ToolTimelineRow` (client tools) and `ServerToolRow` (server
+ * tools); the `kind` prop affects only the outer card styling so each
+ * surface keeps its existing look.
+ *
+ * Anything that goes wrong inside this component (missing path, unknown
+ * icon, throwing field component, throwing transform) is logged and the
+ * problematic field is skipped — the row never breaks the chat surface.
+ * For total failure (e.g. the registry config itself is malformed), the
+ * caller's `ToolDisplayBoundary` falls back to the default row.
+ */
+import { Component, type ReactNode } from 'react';
+import type { ToolDisplayEntry, ToolRowEntry } from './types.js';
+interface Props {
+    entry: ToolRowEntry;
+    kind: 'server' | 'client';
+    cfg: ToolDisplayEntry;
+}
+export declare function ConfiguredToolRow({ entry, kind, cfg }: Props): import("react").JSX.Element | null;
+/**
+ * React error boundary that catches anything thrown deeper in the
+ * configurable render and falls back to a passed-in default row.
+ * Class component is the only React mechanism that catches render errors.
+ */
+interface BoundaryProps {
+    toolName: string;
+    fallback: ReactNode;
+    children: ReactNode;
+}
+interface BoundaryState {
+    errored: boolean;
+}
+export declare class ToolDisplayBoundary extends Component<BoundaryProps, BoundaryState> {
+    state: BoundaryState;
+    static getDerivedStateFromError(): BoundaryState;
+    componentDidCatch(error: Error, info: unknown): void;
+    render(): ReactNode;
+}
+export {};

package/dist/tool-call-visualization/configured-rows/ConfiguredToolRow.js

@@ -0,0 +1,296 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ai-matrx/design-system";
+import { ShimmerText } from "@ai-matrx/rich-content/utils/lifted/ShimmerText";
+import { ChevronRight, Globe } from "lucide-react";
+import { Component, useState } from "react";
+import { CopyToolButton } from "./CopyToolButton.js";
+import { ToolProgressView } from "./ToolProgressView.js";
+import { applyTransforms, getByPath, resolveColor, resolveIcon, resolvePhase } from "./helpers.js";
+import { fieldComponents } from "./field-components.js";
+import { FIELD_OVERRIDES } from "./registries.js";
+function ConfiguredToolRow({ entry, kind, cfg }) {
+  const [open, setOpen] = useState(false);
+  const phase = entry.phase;
+  const inline = cfg.inline ?? {};
+  const results = cfg.results ?? {};
+  const inlineHidden = resolvePhase(inline.hidden, phase);
+  if (inlineHidden) return null;
+  const colorClass = resolveColor(resolvePhase(inline.color, phase), phase);
+  const shouldSpin = resolvePhase(inline.spinIcon, phase) ?? phase === "started";
+  const prefix = resolvePhase(inline.prefix, phase) ?? "";
+  const namePart = resolvePhase(inline.name, phase);
+  const resolvedName = resolveNamePart(entry, namePart);
+  const displayName = resolvedName === void 0 ? titleCase(entry.toolName) : resolvedName;
+  const suffix = resolvePhase(inline.suffix, phase) ?? "";
+  const infoText = resolveInfo(entry, resolvePhase(inline.info, phase));
+  const headerSegments = [prefix, displayName, suffix].filter((s) => s && s.length > 0);
+  const headerLabel = headerSegments.join(" ");
+  const shimmer = phase === "started" && (inline.shimmerOnRunning ?? true);
+  const alwaysShowResults = phase === "completed" && results.alwaysShow === true && !resolvePhase(results.hidden, phase) && entry.output != null;
+  return /* @__PURE__ */ jsxs("div", { className: "group rounded py-0.5 pr-1 text-xs hover:bg-muted/40", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setOpen((v) => !v),
+          className: "flex flex-1 items-center gap-1.5 text-left",
+          "aria-expanded": open,
+          children: [
+            kind === "server" && /* @__PURE__ */ jsx(
+              ChevronRight,
+              {
+                className: `size-3 shrink-0 text-muted-foreground transition-transform ${open ? "rotate-90" : ""}`
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              InlineIcon,
+              {
+                entry,
+                phase,
+                value: resolvePhase(inline.icon, phase),
+                colorClass,
+                spin: shouldSpin
+              }
+            ),
+            headerLabel && /* @__PURE__ */ jsx("span", { className: cn("truncate text-foreground", shimmer && "min-w-0"), children: shimmer ? /* @__PURE__ */ jsx(ShimmerText, { text: headerLabel }) : headerLabel }),
+            infoText && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "text-muted-foreground",
+                  inline.isMultiline ? "whitespace-pre-wrap" : "truncate"
+                ),
+                children: infoText
+              }
+            ),
+            phase !== "started" && entry.endedAt && /* @__PURE__ */ jsxs("span", { className: "ml-auto text-[10px] text-muted-foreground", children: [
+              Math.max(1, entry.endedAt - entry.startedAt),
+              "ms"
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CopyToolButton,
+        {
+          data: {
+            toolName: entry.toolName,
+            args: entry.args,
+            result: entry.output,
+            message: entry.message,
+            phase,
+            startedAt: entry.startedAt,
+            endedAt: entry.endedAt,
+            callId: entry.callId
+          }
+        }
+      )
+    ] }),
+    !resolvePhase(cfg.progress?.hidden, phase) && /* @__PURE__ */ jsx(ToolProgressView, { progress: entry.progress, phase, cfg: cfg.progress }),
+    alwaysShowResults && /* @__PURE__ */ jsx("div", { className: "mt-1 ml-5", children: /* @__PURE__ */ jsx(ResultsSection, { result: entry.output, cfg: results }) }),
+    open && /* @__PURE__ */ jsx(ExpandedBody, { entry, kind, cfg, skipResults: alwaysShowResults })
+  ] });
+}
+function InlineIcon({
+  entry,
+  phase,
+  value,
+  colorClass,
+  spin
+}) {
+  const [imgErr, setImgErr] = useState(false);
+  let resolved;
+  if (typeof value === "string") {
+    resolved = value;
+  } else if (value && typeof value === "object") {
+    const text = resolveInfo(entry, value);
+    resolved = text || void 0;
+  }
+  const isUrl = typeof resolved === "string" && (resolved.startsWith("http") || resolved.startsWith("data:"));
+  if (isUrl && !imgErr && resolved) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: resolved,
+        alt: "",
+        className: cn("size-3.5 shrink-0 rounded-sm object-contain", colorClass),
+        onError: () => setImgErr(true)
+      }
+    );
+  }
+  if (isUrl && imgErr) {
+    return /* @__PURE__ */ jsx(Globe, { className: cn("size-3.5 shrink-0", colorClass) });
+  }
+  const LucideIcon = resolveIcon(resolved, phase);
+  return /* @__PURE__ */ jsx(LucideIcon, { className: cn("size-3.5 shrink-0", colorClass, spin && "animate-spin") });
+}
+function ExpandedBody({ entry, cfg, skipResults = false }) {
+  const phase = entry.phase;
+  const args = cfg.args ?? {};
+  const results = cfg.results ?? {};
+  const argsHidden = resolvePhase(args.hidden, phase);
+  const resultsHidden = resolvePhase(results.hidden, phase);
+  const showArgs = !argsHidden && entry.args != null;
+  const showResults = !skipResults && !resultsHidden && phase === "completed" && entry.output != null;
+  const showError = phase === "error" && entry.message;
+  if (!showArgs && !showResults && !showError) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "mt-1 ml-5 space-y-1.5", children: [
+    showArgs && /* @__PURE__ */ jsx(ArgsSection, { args: entry.args, cfg: args }),
+    showResults && /* @__PURE__ */ jsx(ResultsSection, { result: entry.output, cfg: results }),
+    showError && /* @__PURE__ */ jsx(SectionLabel, { label: "error", children: /* @__PURE__ */ jsx("pre", { className: preClass, children: entry.message }) })
+  ] });
+}
+const preClass = "mt-0.5 max-h-48 overflow-auto rounded-md bg-background/60 p-1.5 text-[11px] leading-snug";
+function SectionLabel({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: label }),
+    children
+  ] });
+}
+function ArgsSection({ args, cfg }) {
+  const displayType = cfg.displayType ?? "json";
+  return /* @__PURE__ */ jsx(SectionLabel, { label: "args", children: renderStandardDisplay(args, displayType) });
+}
+function ResultsSection({ result, cfg }) {
+  const displayType = cfg.displayType ?? "json";
+  if (displayType === "custom") {
+    return /* @__PURE__ */ jsx(SectionLabel, { label: "result", children: /* @__PURE__ */ jsx(CustomResults, { result, keysInfo: cfg.keysInfo ?? [] }) });
+  }
+  return /* @__PURE__ */ jsx(SectionLabel, { label: "result", children: renderStandardDisplay(result, displayType) });
+}
+function renderStandardDisplay(value, displayType) {
+  if (displayType === "key-value" || displayType === "values-only") {
+    if (value == null || typeof value !== "object" || Array.isArray(value)) {
+      return /* @__PURE__ */ jsx("pre", { className: preClass, children: safeStringify(value) });
+    }
+    const entries = Object.entries(value);
+    if (entries.length === 0) return null;
+    if (displayType === "values-only") {
+      return /* @__PURE__ */ jsx("ul", { className: "mt-0.5 list-disc space-y-0.5 pl-4 text-[11px] text-foreground", children: entries.map(([k, v]) => /* @__PURE__ */ jsx("li", { children: stringifyValue(v) }, k)) });
+    }
+    return /* @__PURE__ */ jsx("div", { className: "mt-0.5 grid grid-cols-[minmax(0,auto)_1fr] gap-x-2 gap-y-0.5 text-[11px]", children: entries.map(([k, v]) => /* @__PURE__ */ jsx(FieldRow, { k, v }, k)) });
+  }
+  return /* @__PURE__ */ jsx("pre", { className: preClass, children: safeStringify(value) });
+}
+function FieldRow({ k, v }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground", children: k }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-foreground", children: stringifyValue(v) })
+  ] });
+}
+function CustomResults({ result, keysInfo }) {
+  if (result == null || typeof result !== "object") return null;
+  return /* @__PURE__ */ jsx("div", { className: "mt-0.5 space-y-1.5", children: keysInfo.map((info, i) => /* @__PURE__ */ jsx(
+    CustomResultField,
+    {
+      result,
+      info
+    },
+    `${info.key}-${i}`
+  )) });
+}
+function CustomResultField({
+  result,
+  info
+}) {
+  const FieldComponent = FIELD_OVERRIDES[info.component] ?? fieldComponents[info.component];
+  if (!FieldComponent) {
+    console.warn(`[configured-row] unknown field component: "${info.component}"`);
+    return null;
+  }
+  const raw = !info.key || info.key === "*" ? result : info.key.includes(".") ? lookupShallow(result, info.key) : result[info.key];
+  if (raw == null || raw === "") {
+    if (info.fallback) {
+      return /* @__PURE__ */ jsx(FieldComponent, { value: info.fallback, className: info.className });
+    }
+    console.warn(`[configured-row] missing key "${info.key}" in result`, { result });
+    return null;
+  }
+  const value = applyTransforms(raw, info.transform ?? null);
+  try {
+    return /* @__PURE__ */ jsx(FieldComponent, { value, className: info.className });
+  } catch (err) {
+    console.warn(`[configured-row] field component "${info.component}" threw:`, err, { info, value });
+    return null;
+  }
+}
+function lookupShallow(obj, path) {
+  const segments = path.split(".");
+  let cursor = obj;
+  for (const seg of segments) {
+    if (cursor == null) return void 0;
+    if (Array.isArray(cursor)) {
+      const idx = Number(seg);
+      if (!Number.isInteger(idx)) return void 0;
+      cursor = cursor[idx];
+    } else if (typeof cursor === "object") {
+      cursor = cursor[seg];
+    } else {
+      return void 0;
+    }
+  }
+  return cursor;
+}
+function safeStringify(value) {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+function stringifyValue(value) {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+function titleCase(name) {
+  return name.split(/[_\s]+/).filter(Boolean).map((p) => p[0] ? p[0].toUpperCase() + p.slice(1) : p).join(" ");
+}
+function resolveNamePart(entry, value) {
+  if (value === void 0) return void 0;
+  if (typeof value === "string") return value;
+  return resolveInfo(entry, value);
+}
+function resolveInfo(entry, info) {
+  if (!info) return "";
+  const spec = typeof info === "string" ? { path: info } : info;
+  const raw = getByPath(entry, spec.path);
+  if (raw == null || raw === "") {
+    return spec.fallback ?? "";
+  }
+  const transformed = applyTransforms(raw, spec.transform ?? null);
+  if (transformed == null || transformed === "") return spec.fallback ?? "";
+  if (typeof transformed === "string") return transformed;
+  if (typeof transformed === "number" || typeof transformed === "boolean")
+    return String(transformed);
+  try {
+    return JSON.stringify(transformed);
+  } catch {
+    return String(transformed);
+  }
+}
+class ToolDisplayBoundary extends Component {
+  state = { errored: false };
+  static getDerivedStateFromError() {
+    return { errored: true };
+  }
+  componentDidCatch(error, info) {
+    console.warn(`[configured-row] custom render threw for "${this.props.toolName}":`, error, info);
+  }
+  render() {
+    if (this.state.errored) return this.props.fallback;
+    return this.props.children;
+  }
+}
+export {
+  ConfiguredToolRow,
+  ToolDisplayBoundary
+};

package/dist/tool-call-visualization/configured-rows/CopyToolButton.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Small clipboard button that copies the full tool-call payload (name, args,
+ * result/output, error message, phase, duration, callId) as pretty-printed
+ * JSON. Used by every row variant — default and configurable. Shows a green
+ * check for ~1.5s after a successful copy.
+ *
+ * The button stops click propagation so it doesn't toggle the row open/close
+ * when the parent row is also clickable.
+ */
+export interface ToolCopyData {
+    toolName: string;
+    args?: unknown;
+    result?: unknown;
+    message?: string | undefined;
+    phase: 'started' | 'completed' | 'error';
+    startedAt: number;
+    endedAt?: number | undefined;
+    callId?: string;
+}
+export declare function CopyToolButton({ data, className }: {
+    data: ToolCopyData;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/tool-call-visualization/configured-rows/CopyToolButton.js

@@ -0,0 +1,62 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@ai-matrx/design-system";
+import { Check, Copy } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+function buildPayload(data) {
+  const payload = {
+    tool: data.toolName,
+    phase: data.phase,
+    args: data.args ?? null,
+    result: data.result ?? null
+  };
+  if (data.message !== void 0) {
+    if (data.phase === "error") payload.error = data.message;
+    else payload.message = data.message;
+  }
+  if (data.endedAt !== void 0) payload.duration_ms = Math.max(0, data.endedAt - data.startedAt);
+  if (data.callId !== void 0) payload.callId = data.callId;
+  try {
+    return JSON.stringify(payload, null, 2);
+  } catch {
+    return String(payload);
+  }
+}
+function CopyToolButton({ data, className }) {
+  const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    if (!copied) return;
+    const t = setTimeout(() => setCopied(false), 1500);
+    return () => clearTimeout(t);
+  }, [copied]);
+  const handleClick = useCallback(
+    async (e) => {
+      e.stopPropagation();
+      const text = buildPayload(data);
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+      } catch (err) {
+        console.warn("[configured-row] clipboard write failed", err);
+      }
+    },
+    [data]
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      title: copied ? "Copied!" : "Copy tool data",
+      "aria-label": "Copy tool data",
+      className: cn(
+        "inline-flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-muted/60 hover:text-foreground focus:opacity-100 group-hover:opacity-100",
+        copied && "opacity-100 text-emerald-600 dark:text-emerald-400",
+        className
+      ),
+      children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" })
+    }
+  );
+}
+export {
+  CopyToolButton
+};

package/dist/tool-call-visualization/configured-rows/ToolProgressView.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Renders the incremental progress log a long-running tool emits. Shown ONLY
+ * when a tool actually reported progress — every other tool renders nothing
+ * here, so this never becomes the default chrome for normal tool calls.
+ *
+ * Three modes (registry-selectable via `ProgressConfig.mode`, default 'log'):
+ *   - 'log'    chronological recent lines while running; collapses to a
+ *              "N updates" toggle once the tool finishes (unless showWhenComplete)
+ *   - 'latest' a single status line that the latest update replaces
+ *   - 'steps'  named steps grouped by `step`, ticking pending→active→done/error
+ *
+ * Used by both the configurable rows and the default rows (the generic
+ * fallback), so a tool that emits progress but has no registry entry still
+ * gets a sensible display.
+ */
+import type { Phase, ProgressConfig, ToolProgressRow as ToolProgressEntry } from './types.js';
+interface Props {
+    progress: ToolProgressEntry[] | undefined;
+    phase: Phase;
+    cfg?: ProgressConfig | undefined;
+}
+export declare function ToolProgressView({ progress, phase, cfg }: Props): import("react").JSX.Element | null;
+export {};

package/dist/tool-call-visualization/configured-rows/ToolProgressView.js

@@ -0,0 +1,147 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ai-matrx/design-system";
+import { AlertTriangle, Check, ChevronDown, ChevronRight, Loader2 } from "lucide-react";
+import { useState } from "react";
+function ToolProgressView({ progress, phase, cfg }) {
+  const entries = progress ?? [];
+  if (entries.length === 0) return null;
+  const mode = cfg?.mode ?? "log";
+  const running = phase === "started";
+  const showWhenComplete = cfg?.showWhenComplete ?? false;
+  if (mode === "steps") {
+    return /* @__PURE__ */ jsx(StepsProgress, { entries, running });
+  }
+  if (mode === "latest") {
+    return /* @__PURE__ */ jsx(LatestProgress, { entries, running });
+  }
+  return /* @__PURE__ */ jsx(
+    LogProgress,
+    {
+      entries,
+      running,
+      showWhenComplete,
+      visibleWhileRunning: cfg?.visibleWhileRunning ?? 4
+    }
+  );
+}
+const lineClass = "flex items-center gap-1.5 text-[11px] leading-snug text-muted-foreground";
+const wrapClass = "mt-1 ml-5 border-l border-border/50 pl-2 space-y-0.5";
+function entryLabel(e) {
+  return e.label ?? e.step ?? e.status ?? "\u2026";
+}
+function PercentBar({ percent }) {
+  const pct = percent <= 1 ? percent * 100 : percent;
+  const clamped = Math.max(0, Math.min(100, pct));
+  return /* @__PURE__ */ jsxs("span", { className: "ml-auto inline-flex items-center gap-1", children: [
+    /* @__PURE__ */ jsx("span", { className: "h-1 w-16 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "block h-full rounded-full bg-primary/70 transition-all",
+        style: { width: `${clamped}%` }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("span", { className: "tabular-nums text-[9px]", children: [
+      Math.round(clamped),
+      "%"
+    ] })
+  ] });
+}
+function LogProgress({
+  entries,
+  running,
+  showWhenComplete,
+  visibleWhileRunning
+}) {
+  const [open, setOpen] = useState(false);
+  if (!running && !showWhenComplete) {
+    return /* @__PURE__ */ jsxs("div", { className: "mt-1 ml-5", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setOpen((v) => !v),
+          className: "inline-flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground",
+          children: [
+            open ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3" }),
+            entries.length,
+            " update",
+            entries.length === 1 ? "" : "s"
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ jsx("div", { className: wrapClass, children: entries.map((e, i) => /* @__PURE__ */ jsx(ProgressLine, { e, active: false }, i)) })
+    ] });
+  }
+  const visible = entries.slice(-visibleWhileRunning);
+  const hiddenCount = entries.length - visible.length;
+  return /* @__PURE__ */ jsxs("div", { className: wrapClass, children: [
+    hiddenCount > 0 && /* @__PURE__ */ jsxs("div", { className: "text-[9px] text-muted-foreground/60", children: [
+      "+",
+      hiddenCount,
+      " earlier"
+    ] }),
+    visible.map((e, i) => {
+      const isLatest = i === visible.length - 1;
+      return /* @__PURE__ */ jsx(ProgressLine, { e, active: running && isLatest }, i);
+    })
+  ] });
+}
+function ProgressLine({ e, active }) {
+  const errored = e.status === "error";
+  return /* @__PURE__ */ jsxs("div", { className: cn(lineClass, errored && "text-red-600 dark:text-red-400"), children: [
+    active ? /* @__PURE__ */ jsx(Loader2, { className: "size-3 shrink-0 animate-spin text-primary" }) : errored ? /* @__PURE__ */ jsx(AlertTriangle, { className: "size-3 shrink-0" }) : /* @__PURE__ */ jsx("span", { className: "size-3 shrink-0 text-center text-muted-foreground/40", children: "\xB7" }),
+    /* @__PURE__ */ jsx("span", { className: cn(active ? "truncate text-foreground" : "truncate"), children: entryLabel(e) }),
+    typeof e.percent === "number" && /* @__PURE__ */ jsx(PercentBar, { percent: e.percent })
+  ] });
+}
+function LatestProgress({
+  entries,
+  running
+}) {
+  const last = entries[entries.length - 1];
+  if (!last) return null;
+  return /* @__PURE__ */ jsx("div", { className: wrapClass, children: /* @__PURE__ */ jsx(ProgressLine, { e: last, active: running }) });
+}
+function StepsProgress({
+  entries,
+  running
+}) {
+  const order = [];
+  const latest = /* @__PURE__ */ new Map();
+  for (const e of entries) {
+    const key = e.step ?? e.label ?? "\u2026";
+    if (!latest.has(key)) order.push(key);
+    latest.set(key, e);
+  }
+  return /* @__PURE__ */ jsx("div", { className: wrapClass, children: order.map((key) => {
+    const e = latest.get(key);
+    if (!e) return null;
+    const status = e.status ?? (running ? "active" : "done");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          lineClass,
+          status === "error" && "text-red-600 dark:text-red-400",
+          status === "done" && "text-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(StepIcon, { status }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: e.label ?? key }),
+          typeof e.percent === "number" && /* @__PURE__ */ jsx(PercentBar, { percent: e.percent })
+        ]
+      },
+      key
+    );
+  }) });
+}
+function StepIcon({ status }) {
+  if (status === "active") return /* @__PURE__ */ jsx(Loader2, { className: "size-3 shrink-0 animate-spin text-primary" });
+  if (status === "done")
+    return /* @__PURE__ */ jsx(Check, { className: "size-3 shrink-0 text-emerald-600 dark:text-emerald-400" });
+  if (status === "error") return /* @__PURE__ */ jsx(AlertTriangle, { className: "size-3 shrink-0" });
+  return /* @__PURE__ */ jsx("span", { className: "size-3 shrink-0 rounded-full border border-muted-foreground/40" });
+}
+export {
+  ToolProgressView
+};

package/dist/tool-call-visualization/configured-rows/field-components.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Field components used by `results.keysInfo` (and reusable for any future
+ * config that names a component to render a single value). Each one accepts
+ * `{ value: unknown; className?: string }` and is responsible for coercing
+ * the value into something renderable. Anything weird (null, object) should
+ * render as empty / a JSON dump rather than throw.
+ */
+import type { ComponentType } from 'react';
+import type { FieldComponentName } from './types.js';
+interface FieldProps {
+    value: unknown;
+    className?: string;
+}
+export declare const fieldComponents: Record<FieldComponentName, ComponentType<FieldProps>>;
+export {};