@agent-native/toolkit 0.228.0-nightly-20261111212500 → 0.228.0

package/src/app/agentkit/react/trace.tsx

@@ -0,0 +1,239 @@
+import { IconChevronRight } from "@tabler/icons-react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useState,
+  type ComponentProps,
+} from "react";
+
+import { useUntilFoundContent } from "./disclosure-content.js";
+
+/** Omitted status is finished work. */
+export type TraceStatus = "running" | "error" | "pending";
+
+function classes(...names: Array<string | false | null | undefined>): string {
+  return names.filter(Boolean).join(" ");
+}
+
+export function Trace({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="trace"
+      className={classes("agentkit-trace", className)}
+      {...props}
+    />
+  );
+}
+
+/** Status shows only as color and motion; the title must say it too. */
+export function TraceLine({
+  className,
+  status,
+  ...props
+}: ComponentProps<"span"> & { status?: TraceStatus | undefined }) {
+  return (
+    <span
+      data-slot="trace-line"
+      // Not data-status: rows already carry the protocol status there.
+      data-trace-status={status}
+      className={classes("agentkit-trace-line", className)}
+      {...props}
+    />
+  );
+}
+
+/** A fixed 1rem column, so titles align down the trace. */
+export function TraceIcon({ className, ...props }: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="trace-icon"
+      aria-hidden="true"
+      className={classes("agentkit-disclosure-icon-slot", className)}
+      {...props}
+    />
+  );
+}
+
+/** The accessible name of the step. Truncates; shimmers while running. */
+export function TraceTitle({ className, ...props }: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="trace-title"
+      className={classes("agentkit-trace-title", className)}
+      {...props}
+    />
+  );
+}
+
+/** A duration or diff stat; never truncates. */
+export function TraceDescription({
+  className,
+  ...props
+}: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="trace-description"
+      className={classes("agentkit-trace-description", className)}
+      {...props}
+    />
+  );
+}
+
+interface TraceCollapsibleState {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  contentId: string;
+  contentRendered: boolean;
+  setContentRendered: (rendered: boolean) => void;
+}
+
+const TraceCollapsibleContext = createContext<TraceCollapsibleState | null>(
+  null,
+);
+
+function useTraceCollapsibleState(part: string): TraceCollapsibleState {
+  const state = useContext(TraceCollapsibleContext);
+  if (!state) throw new Error(`${part} must be inside TraceCollapsible.`);
+  return state;
+}
+
+export type TraceCollapsibleOpenProps =
+  | { open?: undefined; onOpenChange?: (open: boolean) => void }
+  | { open: boolean; onOpenChange: (open: boolean) => void };
+
+export function TraceCollapsible({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  className,
+  ...props
+}: Omit<ComponentProps<"div">, "onToggle"> &
+  TraceCollapsibleOpenProps & { defaultOpen?: boolean | undefined }) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const [contentRendered, setContentRendered] = useState(false);
+  const contentId = useId();
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (controlledOpen === undefined) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [controlledOpen, onOpenChange],
+  );
+  const state = useMemo(
+    () => ({ open, setOpen, contentId, contentRendered, setContentRendered }),
+    [open, setOpen, contentId, contentRendered],
+  );
+  return (
+    <TraceCollapsibleContext.Provider value={state}>
+      <div
+        data-slot="trace-collapsible"
+        data-state={open ? "open" : "closed"}
+        className={classes("agentkit-trace-collapsible", className)}
+        {...props}
+      />
+    </TraceCollapsibleContext.Provider>
+  );
+}
+
+/** Wrap a `TraceLine`; adds the chevron. */
+export function TraceCollapsibleTrigger({
+  className,
+  children,
+  onClick,
+  ...props
+}: Omit<ComponentProps<"button">, "type">) {
+  const { open, setOpen, contentId, contentRendered } =
+    useTraceCollapsibleState("TraceCollapsibleTrigger");
+  return (
+    <button
+      type="button"
+      data-slot="trace-collapsible-trigger"
+      data-expandable="true"
+      aria-expanded={open}
+      aria-controls={contentRendered ? contentId : undefined}
+      className={classes("agentkit-disclosure-summary", className)}
+      onClick={(event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) setOpen(!open);
+      }}
+      {...props}
+    >
+      {children}
+      <IconChevronRight
+        aria-hidden="true"
+        className="agentkit-icon agentkit-disclosure-chevron"
+        data-open={open ? "true" : "false"}
+      />
+    </button>
+  );
+}
+
+/** `keepMounted` hides closed content until found, so find-in-page opens it. */
+export function TraceCollapsibleContent({
+  keepMounted = false,
+  className,
+  children,
+  ...props
+}: Omit<ComponentProps<"div">, "id" | "hidden"> & { keepMounted?: boolean }) {
+  const { open, setOpen, contentId, setContentRendered } =
+    useTraceCollapsibleState("TraceCollapsibleContent");
+  const rendered = open || keepMounted;
+  useLayoutEffect(() => {
+    setContentRendered(rendered);
+    return () => setContentRendered(false);
+  }, [rendered, setContentRendered]);
+  if (keepMounted) {
+    return (
+      <KeptTraceContent
+        open={open}
+        onReveal={() => setOpen(true)}
+        id={contentId}
+        className={className}
+        {...props}
+      >
+        {children}
+      </KeptTraceContent>
+    );
+  }
+  return open ? (
+    <div
+      id={contentId}
+      data-slot="trace-collapsible-content"
+      data-state="open"
+      className={classes("agentkit-trace-content", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  ) : null;
+}
+
+function KeptTraceContent({
+  open,
+  onReveal,
+  className,
+  children,
+  ...props
+}: Omit<ComponentProps<"div">, "hidden"> & {
+  open: boolean;
+  onReveal: () => void;
+}) {
+  const { ref, mounted } = useUntilFoundContent(open, onReveal);
+  return (
+    <div
+      ref={ref}
+      data-slot="trace-collapsible-content"
+      data-state={open ? "open" : "closed"}
+      hidden={!open}
+      className={classes("agentkit-trace-content", className)}
+      {...props}
+    >
+      {mounted ? children : null}
+    </div>
+  );
+}

package/src/app/blocks/library/HighlightedCode.tsx

@@ -1,120 +1,15 @@
 import { cn } from "@agent-native/toolkit/utils";
 import { useEffect, useMemo, useState, type CSSProperties } from "react";
 
+import {
+  CODE_THEMES,
+  loadCodeHighlighter,
+  prettyLanguageName,
+  resolveCodeLanguage,
+} from "../../code-highlighter.js";
 import { ltrCodeBlockProps } from "../code-block-direction.js";
 
-type ShikiHighlighter = {
-  codeToHtml: (
-    code: string,
-    options: {
-      lang: string;
-      themes: { light: string; dark: string };
-      defaultColor?: false | "light" | "dark";
-    },
-  ) => string | Promise<string>;
-  getLoadedLanguages: () => string[];
-};
-
-let highlighterLoader: Promise<ShikiHighlighter> | null = null;
-function loadHighlighter(): Promise<ShikiHighlighter> {
-  if (!highlighterLoader) {
-    highlighterLoader = (async () => {
-      const [{ createHighlighterCore }, { createJavaScriptRegexEngine }] =
-        await Promise.all([
-          import("shiki/core"),
-          import("shiki/engine/javascript"),
-        ]);
-      return createHighlighterCore({
-        themes: [
-          import("shiki/themes/github-light-default.mjs"),
-          import("shiki/themes/github-dark-default.mjs"),
-        ],
-        langs: [
-          import("shiki/langs/javascript.mjs"),
-          import("shiki/langs/typescript.mjs"),
-          import("shiki/langs/jsx.mjs"),
-          import("shiki/langs/tsx.mjs"),
-          import("shiki/langs/json.mjs"),
-          import("shiki/langs/css.mjs"),
-          import("shiki/langs/html.mjs"),
-          import("shiki/langs/markdown.mjs"),
-          import("shiki/langs/bash.mjs"),
-          import("shiki/langs/shellscript.mjs"),
-          import("shiki/langs/python.mjs"),
-          import("shiki/langs/yaml.mjs"),
-          import("shiki/langs/sql.mjs"),
-        ],
-        engine: createJavaScriptRegexEngine({ forgiving: true }),
-      }) as unknown as Promise<ShikiHighlighter>;
-    })().catch((error) => {
-      highlighterLoader = null;
-      throw error;
-    });
-  }
-  return highlighterLoader;
-}
-
-const LANG_ALIASES: Record<string, string> = {
-  js: "javascript",
-  ts: "typescript",
-  sh: "bash",
-  shell: "bash",
-  zsh: "bash",
-  py: "python",
-  yml: "yaml",
-  md: "markdown",
-  bq: "sql",
-  bigquery: "sql",
-};
-
-const LANGUAGE_LABELS: Record<string, string> = {
-  typescript: "TypeScript",
-  ts: "TypeScript",
-  tsx: "TSX",
-  javascript: "JavaScript",
-  js: "JavaScript",
-  jsx: "JSX",
-  json: "JSON",
-  html: "HTML",
-  css: "CSS",
-  scss: "SCSS",
-  bash: "Bash",
-  sh: "Bash",
-  shell: "Shell",
-  zsh: "Bash",
-  python: "Python",
-  py: "Python",
-  sql: "SQL",
-  yaml: "YAML",
-  yml: "YAML",
-  markdown: "Markdown",
-  md: "Markdown",
-  graphql: "GraphQL",
-  go: "Go",
-  rust: "Rust",
-  ruby: "Ruby",
-  java: "Java",
-  c: "C",
-  cpp: "C++",
-  csharp: "C#",
-  php: "PHP",
-  swift: "Swift",
-  kotlin: "Kotlin",
-  diff: "Diff",
-  dockerfile: "Dockerfile",
-  xml: "XML",
-};
-
-export function prettyLanguageName(language?: string | null): string | null {
-  const raw = language
-    ?.trim()
-    .toLowerCase()
-    .replace(/^language-/, "");
-  if (!raw || raw === "text" || raw === "plaintext" || raw === "plain") {
-    return null;
-  }
-  return LANGUAGE_LABELS[raw] ?? raw;
-}
+export { prettyLanguageName };
 
 export function HighlightedCode({
   code,
@@ -127,21 +22,14 @@ export function HighlightedCode({
 
   useEffect(() => {
     let cancelled = false;
-    loadHighlighter()
-      .then((highlighter) => {
-        const requested = (language || "text").toLowerCase();
-        const resolved = LANG_ALIASES[requested] ?? requested;
-        const loaded = highlighter.getLoadedLanguages();
-        const lang = loaded.includes(resolved) ? resolved : "text";
-        return highlighter.codeToHtml(code, {
-          lang,
-          themes: {
-            light: "github-light-default",
-            dark: "github-dark-default",
-          },
+    loadCodeHighlighter()
+      .then((highlighter) =>
+        highlighter.codeToHtml(code, {
+          lang: resolveCodeLanguage(highlighter, language) ?? "text",
+          themes: CODE_THEMES,
           defaultColor: false,
-        });
-      })
+        }),
+      )
       .then((out) => {
         if (!cancelled) setHtml(out as string);
       })

package/src/app/chat/AgentKitAssistantChat.spec.tsx

@@ -32,7 +32,10 @@ import {
 } from "vitest";
 
 import { AgentSuggestionBar } from "../../composer/AgentSuggestionBar.js";
-import { AgentInteractionItem } from "../agentkit/react/components.js";
+import {
+  AgentCollaborationFeed,
+  AgentInteractionItem,
+} from "../agentkit/react/components.js";
 import { AgentKitProvider } from "../agentkit/react/context.js";
 import {
   clearToolRenderersForTests,
@@ -657,7 +660,7 @@ vi.mock("./agentkit-chat/index.js", async () => {
         ),
       );
     },
-    GuidedQuestionFlow: (props: unknown) => {
+    GuidedQuestionCard: (props: unknown) => {
       chatMocks.guidedFlowProps = props;
       return null;
     },
@@ -678,6 +681,7 @@ vi.mock("./agentkit-chat/index.js", async () => {
       chatMocks.guidedOptions = options;
       return { questions: chatMocks.guidedQuestions };
     },
+    useRefetchGuidedQuestionsWhenAsked: () => undefined,
   };
 });
 
@@ -7643,22 +7647,34 @@ describe("AgentKitAssistantChat host behavior", () => {
     ).completed;
     await mount(baseProps());
 
-    const { registry, labels } = chatMocks.rootProps;
+    const { formatAgentInteractionDetail, labels } = chatMocks.rootProps;
     const [started, failed] = client.getThread("thread-delegated")
       .agentInteractions as AgentInteraction[];
-    const row = (value: AgentInteraction) => {
-      const Renderer =
-        registry.agentInteractions[value.kind] ?? AgentInteractionItem;
-      return renderToStaticMarkup(
+    const row = (value: AgentInteraction) =>
+      renderToStaticMarkup(
         <AgentKitProvider
           controller={client}
           threadId="thread-delegated"
           labels={labels}
+          formatAgentInteractionDetail={formatAgentInteractionDetail}
         >
-          <Renderer value={value} threadId="thread-delegated" />
+          <AgentInteractionItem value={value} threadId="thread-delegated" />
         </AgentKitProvider>,
       );
-    };
+    const step = renderToStaticMarkup(
+      <AgentKitProvider
+        controller={client}
+        threadId="thread-delegated"
+        labels={labels}
+        formatAgentInteractionDetail={formatAgentInteractionDetail}
+      >
+        <AgentCollaborationFeed runId="run-delegated" />
+      </AgentKitProvider>,
+    );
+    expect(step.match(/Brain/g)).toHaveLength(1);
+    expect(step).toMatch(
+      /class="agentkit-activity-error"[^>]*>agentChat\.agent\.failureReason\.setup</,
+    );
 
     const failedRow = row(failed!);
     expect(failedRow.match(/Brain/g)).toHaveLength(1);
@@ -7730,15 +7746,15 @@ describe("AgentKitAssistantChat host behavior", () => {
       await (
         await client.sendMessage({ threadId: "thread-delegated", text: "Ask" })
       ).completed;
-      const { registry, labels } = chatMocks.rootProps;
-      const Renderer = registry.agentInteractions.failed;
+      const { formatAgentInteractionDetail, labels } = chatMocks.rootProps;
       return renderToStaticMarkup(
         <AgentKitProvider
           controller={client}
           threadId="thread-delegated"
           labels={labels}
+          formatAgentInteractionDetail={formatAgentInteractionDetail}
         >
-          <Renderer
+          <AgentInteractionItem
             threadId="thread-delegated"
             value={
               client.getThread("thread-delegated")