@elabs-ai/components-ai 4.2.0 → 5.1.0

package/dist/chunk-PQ5BPIWQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/motion-config.tsx"],"sourcesContent":["\"use client\";\n\nimport { useReducedMotion } from \"@elabs-ai/components-tokens\";\nimport { MotionConfig, type Transition } from \"motion/react\";\nimport type { ReactNode } from \"react\";\n\n/**\n * Default transition fed to descendant Motion components — mirrors the\n * `--duration-base` (180ms) and `--ease-standard` tokens in @elabs-ai/components-tokens so\n * JS-driven motion matches the CSS layer's timing. Override via the `transition`\n * prop. (Motion durations are in SECONDS; ease is a cubic-bezier [x1,y1,x2,y2].)\n */\nconst DEFAULT_MOTION_TRANSITION: Transition = {\n  duration: 0.18,\n  ease: [0.2, 0, 0, 1],\n};\n\nexport interface BrandMotionConfigProps {\n  children: ReactNode;\n  /** Override the default transition handed to descendant Motion components. */\n  transition?: Transition;\n}\n\n/**\n * App-level wrapper that bridges the brand-ui motion preference into Motion\n * (motion.dev). It drives Motion's `reducedMotion` from `useReducedMotion()`\n * (user choice > OS setting) so JS-driven Motion components honor the SAME gate\n * as the CSS `--motion-factor` layer, and supplies a token-mirrored default\n * transition. Provider-OPTIONAL: without a `<ThemeProvider>` it degrades to\n * OS-only reduced-motion detection.\n *\n * Wrap the Motion-using subtree (e.g. the chat surface) once near the app root.\n *\n * NOTE: Motion's `reducedMotion=\"always\"` disables only transform/layout\n * animations (opacity/color persist — \"reduced != none\"). Components that loop\n * on other properties (e.g. {@link Shimmer}, which animates backgroundPosition)\n * must still branch on `useReducedMotion()` themselves.\n */\nexport function BrandMotionConfig({\n  children,\n  transition = DEFAULT_MOTION_TRANSITION,\n}: BrandMotionConfigProps) {\n  const reducedMotion = useReducedMotion();\n  return (\n    <MotionConfig reducedMotion={reducedMotion ? \"always\" : \"never\"} transition={transition}>\n      {children}\n    </MotionConfig>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,wBAAwB;AACjC,SAAS,oBAAqC;AAyC1C;AAhCJ,IAAM,4BAAwC;AAAA,EAC5C,UAAU;AAAA,EACV,MAAM,CAAC,KAAK,GAAG,GAAG,CAAC;AACrB;AAuBO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,aAAa;AACf,GAA2B;AACzB,QAAM,gBAAgB,iBAAiB;AACvC,SACE,oBAAC,gBAAa,eAAe,gBAAgB,WAAW,SAAS,YAC9D,UACH;AAEJ;","names":[]}

package/dist/chunk-PQBF6ZIQ.js

@@ -0,0 +1,55 @@
+"use client";
+import {
+  useLazyMathPlugin
+} from "./chunk-VLNBTOH6.js";
+import {
+  lazyMermaid
+} from "./chunk-PG7ERDOD.js";
+import {
+  MermaidErrorPanel
+} from "./chunk-SEVN656N.js";
+import {
+  useThemeScopeRevision
+} from "./chunk-3TDHPXZZ.js";
+import {
+  buildCodeBlockTheme
+} from "./chunk-SSKZ2AED.js";
+import {
+  useLazyCjkPlugin
+} from "./chunk-QUDZOTRV.js";
+
+// src/_streamdown-i18n.ts
+import {
+  STREAMDOWN_TRANSLATION_KEYS,
+  useStreamdownTranslations
+} from "@elabs-ai/components-ui";
+import { createCodePlugin } from "@streamdown/code";
+import { useMemo } from "react";
+function useReactiveCodePlugin() {
+  const revision = useThemeScopeRevision(null);
+  return useMemo(() => {
+    const theme = buildCodeBlockTheme();
+    return createCodePlugin({ themes: [theme, theme] });
+  }, [revision]);
+}
+function useStreamdownPlugins(text = "") {
+  const code = useReactiveCodePlugin();
+  const math = useLazyMathPlugin(text);
+  const cjk = useLazyCjkPlugin(text);
+  return useMemo(() => ({ cjk, code, math, mermaid: lazyMermaid }), [cjk, code, math]);
+}
+function getStreamdownPluginsKey(plugins) {
+  return `${plugins.math ? "math" : "no-math"}:${plugins.cjk ? "cjk" : "no-cjk"}`;
+}
+var MERMAID_OPTIONS = { errorComponent: MermaidErrorPanel };
+function useStreamdownMermaidOptions() {
+  return MERMAID_OPTIONS;
+}
+
+export {
+  useStreamdownTranslations,
+  useStreamdownPlugins,
+  getStreamdownPluginsKey,
+  useStreamdownMermaidOptions
+};
+//# sourceMappingURL=chunk-PQBF6ZIQ.js.map

package/dist/chunk-PQBF6ZIQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/_streamdown-i18n.ts"],"sourcesContent":["\"use client\";\n\n/**\n * The shared Streamdown wiring for every streamed-markdown surface in\n * `@elabs-ai/components-ai` — the plugin set and the locale bridge.\n *\n * Why the locale bridge exists (#310)\n * -----------------------------------\n * Streamdown renders its own chrome inside the markdown it draws: a code-block\n * header with a copy control, table copy/download menus, a Mermaid toolbar, an\n * external-link interstitial. Those labels live in the dependency, not in our\n * source, so `pnpm microcopy:check` structurally cannot see them and a\n * `<LocaleProvider>` used to stop at the Streamdown boundary — every localized\n * app leaked \"Copy Code\" / \"Download diagram\" / \"You're about to visit an\n * external website.\" in English.\n *\n * Streamdown exposes the whole set through one `translations` prop, so the fix\n * is to map its keys onto our `ai.streamdown.*` namespace and resolve them with\n * `t()`. The English defaults in\n * `packages/ui/src/components/locale-provider/messages.ts` are byte-identical to\n * streamdown's own, so this is a no-op for anyone who overrides nothing.\n *\n * Memoization matters: Streamdown puts `translations` into a React context, so a\n * fresh object per render would re-render every code block and table in the\n * document. The map is memoized on `t`, which is itself stable per locale.\n */\nimport {\n  STREAMDOWN_TRANSLATION_KEYS,\n  useStreamdownTranslations,\n  type StreamdownTranslationKey,\n} from \"@elabs-ai/components-ui\";\nimport { createCodePlugin } from \"@streamdown/code\";\nimport { useMemo } from \"react\";\nimport type { StreamdownTranslations } from \"streamdown\";\nimport { buildCodeBlockTheme } from \"./_code-block-theme\";\nimport { useLazyCjkPlugin } from \"./_lazy-cjk\";\nimport { useLazyMathPlugin } from \"./_lazy-math\";\nimport { lazyMermaid } from \"./_lazy-mermaid\";\nimport { MermaidErrorPanel } from \"./_mermaid-error-panel\";\nimport { useThemeScopeRevision } from \"./_theme-scope-store\";\n\n/**\n * Reactive replacement for `@streamdown/code`'s pre-configured `code` export\n * (issue #315 follow-up, the \"major\" carve-out: only `<CodeBlock>` had been\n * de-GitHub-ed — every fenced code block rendered through `Message`/\n * `MarkdownView`/`Reasoning`'s Streamdown instance still went through this\n * plugin, whose `getThemes()` is FROZEN at import time to\n * `[\"github-light\", \"github-dark\"]`).\n *\n * Streamdown's dual-theme mechanism (`createCodePlugin({ themes: [light, dark] })`)\n * expects exactly TWO themes and picks between them purely via the `.dark` CSS\n * selector — but brand-ui ships EVERY theme, not just Shiki's light/dark,\n * and any dark-declaring theme matches `.dark` too (see `_code-block-theme.ts`). Passing a real\n * light/dark PAIR would still force such a theme into the dark slot. Instead\n * this pins BOTH slots to `buildCodeBlockTheme()` — the SAME brand-token-derived\n * theme the active `data-theme` resolves to — so whichever slot the `.dark`\n * selector picks, it's the CORRECT theme for whatever is actually active.\n *\n * Re-derives on every `data-theme` mutation and returns a NEW plugin object\n * each time, because Streamdown only re-reads `plugins.code.getThemes()` when\n * the `plugins.code` object's REFERENCE changes (see streamdown's internal\n * `shikiTheme` memo) — a mutated-in-place plugin would never be picked up.\n *\n * The mutation watch itself comes from the SHARED, ref-counted store in\n * `./_theme-scope-store` (perf review §3.3) rather than a `MutationObserver`\n * instantiated per hook call — every simultaneously-mounted\n * `MessageResponse`/`MarkdownView` (and every `CodeBlock`) in a message-dense\n * conversation now shares exactly one observer per distinct scope element,\n * instead of one each. This hook has no element of its own to scope to (it\n * runs before Streamdown renders anything), so it resolves to the document's\n * theme scope (`getThemeScope(null)` → closest `[data-theme]` on `<html>`,\n * same as its prior always-`<html>` behaviour) — a genuinely region-scoped\n * derivation would need a ref to the rendered surface, which no current call\n * site (`message.tsx`, `markdown-view.tsx`, `reasoning.tsx`) has available.\n */\nfunction useReactiveCodePlugin() {\n  const revision = useThemeScopeRevision(null);\n\n  return useMemo(() => {\n    const theme = buildCodeBlockTheme();\n    return createCodePlugin({ themes: [theme, theme] });\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- revision is the trigger; the theme itself is re-read live off document.documentElement.\n  }, [revision]);\n}\n\n/**\n * The plugin set every `@elabs-ai/components-ai` markdown surface renders with.\n *\n * `mermaid` is the LAZY plugin (`./_lazy-mermaid`): the engine + d3 + DOMPurify\n * load on first diagram render, not in the entry chunk of every consumer.\n * `math`/`cjk` are ALSO lazy (`./_lazy-math`, `./_lazy-cjk`, #perf-5): KaTeX\n * (~600 KB) and the CJK remark plugins load only once `text` — the raw\n * markdown source about to render — actually needs them, sniffed by a cheap\n * regex rather than shipped unconditionally in every consumer's entry chunk.\n * Both resolve to `undefined` (the slot is simply absent) until their content\n * cue fires and the dynamic import resolves; see the two modules' docs for the\n * one-paint tradeoff this makes and why it can't be avoided the way Mermaid's\n * render-time laziness is.\n *\n * `code` is the reactive, brand-token-derived plugin above (#315) — never the\n * `@streamdown/code` package's static `github-light`/`github-dark` default.\n * Memoized so Streamdown sees a referentially stable `plugins` prop except when\n * the active theme (or a lazy slot) actually changes.\n *\n * @param text The raw markdown source about to render — used only to decide\n *   whether the math/CJK plugins are needed. Pass `\"\"` to never load them\n *   speculatively.\n */\nexport function useStreamdownPlugins(text = \"\") {\n  const code = useReactiveCodePlugin();\n  const math = useLazyMathPlugin(text);\n  const cjk = useLazyCjkPlugin(text);\n  return useMemo(() => ({ cjk, code, math, mermaid: lazyMermaid }), [cjk, code, math]);\n}\n\n/**\n * A React `key` for the `<Streamdown>` element that renders with\n * {@link useStreamdownPlugins}'s result — pass it as `key={getStreamdownPluginsKey(plugins)}`\n * on the `<Streamdown>` JSX, never inside the `plugins` object itself.\n *\n * Why this exists (#perf-5 follow-up): Streamdown v2.5.0's `rehypePlugins`/\n * `remarkPlugins` are `useMemo`'d with `plugins.math`/`plugins.cjk` in their\n * dependency arrays, and its `Block`/`Streamdown` components' custom `memo`\n * comparators do check plugin reference equality — on paper, a fresh\n * `plugins.math` object arriving after the lazy `import()` resolves should be\n * enough to make Streamdown rebuild its processing pipeline with the math\n * plugin included. Empirically (verified directly against the real\n * `streamdown` package, not a mock) it does not: once a block has rendered\n * once without `plugins.math`/`plugins.cjk`, Streamdown's internal processor\n * cache keeps serving the plugin-less result even after the reference\n * changes, and the literal `$$…$$`/CJK-remark-less markdown source stays\n * un-rendered indefinitely.\n *\n * Forcing React to unmount and remount the `<Streamdown>` element — by\n * changing its `key` — sidesteps that internal cache entirely (a fresh\n * instance has no stale cache to serve) and reliably picks up the lazily\n * loaded plugin. The cost is a one-time full remount of that Streamdown\n * instance the first time its lazy math/CJK slot resolves — at most once per\n * mounted instance, since after that the key is stable again. Filed for\n * upstream investigation; if a future `streamdown` release fixes the\n * underlying cache, this key can be dropped without changing any call site's\n * behavior (an unchanging key is a no-op).\n */\nexport function getStreamdownPluginsKey(plugins: {\n  readonly cjk?: unknown;\n  readonly math?: unknown;\n}): string {\n  return `${plugins.math ? \"math\" : \"no-math\"}:${plugins.cjk ? \"cjk\" : \"no-cjk\"}`;\n}\n\n/**\n * The top-level Streamdown `mermaid` prop (distinct from `plugins.mermaid`,\n * the LAZY `DiagramPlugin` `useStreamdownPlugins()` wires above) — this is\n * where a FAILED render is caught (issue #33). Streamdown hands its\n * `errorComponent` a plain STRING describing what went wrong;\n * `MermaidErrorPanel` decides whether that string names a missing optional\n * peer (`mermaid` not installed — a capability gap, `StatePanel kind=\"empty\"`)\n * or a genuine diagram render failure (`StatePanel kind=\"error\"`, with retry).\n *\n * A stable module-level object, not a fresh one per render: Streamdown only\n * re-reads `mermaid.errorComponent` when this reference changes, and\n * `MermaidErrorPanel` never varies at runtime. Exported as a hook to match\n * `useStreamdownPlugins()`'s call-site shape.\n */\nconst MERMAID_OPTIONS = { errorComponent: MermaidErrorPanel };\nexport function useStreamdownMermaidOptions() {\n  return MERMAID_OPTIONS;\n}\n\n/*\n * The translation MAP moved down to `@elabs-ai/components-ui`\n * (`lib/streamdown-translations.ts`) when `@elabs-ai/components-viewer`\n * became a second Streamdown renderer — the two packages may not import each\n * other. What stays here is the half that needs the dependency itself: the\n * proof that the shared key list is still COMPLETE.\n */\n\n// `satisfies` proves every key in the shared list is real…\nconst _keysAreReal =\n  STREAMDOWN_TRANSLATION_KEYS satisfies readonly (keyof StreamdownTranslations)[];\nvoid _keysAreReal;\n\n// …and this proves the converse. If a streamdown upgrade ADDS a translation\n// key, the assignment below stops building until the shared list (and the\n// `ai.streamdown.*` English defaults) catch up, instead of silently leaking\n// that key in English. The tripwire lives in the package that pins the version.\ntype MissingTranslationKeys = Exclude<keyof StreamdownTranslations, StreamdownTranslationKey>;\nconst _noMissingTranslationKeys: [MissingTranslationKeys] extends [never] ? true : false = true;\nvoid _noMissingTranslationKeys;\n\nexport { useStreamdownTranslations };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0BA;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,wBAAwB;AACjC,SAAS,eAAe;AA2CxB,SAAS,wBAAwB;AAC/B,QAAM,WAAW,sBAAsB,IAAI;AAE3C,SAAO,QAAQ,MAAM;AACnB,UAAM,QAAQ,oBAAoB;AAClC,WAAO,iBAAiB,EAAE,QAAQ,CAAC,OAAO,KAAK,EAAE,CAAC;AAAA,EAEpD,GAAG,CAAC,QAAQ,CAAC;AACf;AAyBO,SAAS,qBAAqB,OAAO,IAAI;AAC9C,QAAM,OAAO,sBAAsB;AACnC,QAAM,OAAO,kBAAkB,IAAI;AACnC,QAAM,MAAM,iBAAiB,IAAI;AACjC,SAAO,QAAQ,OAAO,EAAE,KAAK,MAAM,MAAM,SAAS,YAAY,IAAI,CAAC,KAAK,MAAM,IAAI,CAAC;AACrF;AA8BO,SAAS,wBAAwB,SAG7B;AACT,SAAO,GAAG,QAAQ,OAAO,SAAS,SAAS,IAAI,QAAQ,MAAM,QAAQ,QAAQ;AAC/E;AAgBA,IAAM,kBAAkB,EAAE,gBAAgB,kBAAkB;AACrD,SAAS,8BAA8B;AAC5C,SAAO;AACT;","names":[]}

package/dist/chunk-PTWCTSZL.js

@@ -0,0 +1,173 @@
+"use client";
+import {
+  CodeBlock
+} from "./chunk-TWPHAJNM.js";
+
+// src/tool.tsx
+import { Skeleton, StatusBadge, useLocale } from "@elabs-ai/components-ui";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { ChevronDownIcon, WrenchIcon } from "lucide-react";
+import { isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Tool = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Collapsible,
+  {
+    className: cn("group not-prose mb-4 w-full rounded-md border", className),
+    ...props
+  }
+);
+function safeJsonStringify(value) {
+  try {
+    return JSON.stringify(value, (_key, v) => typeof v === "bigint" ? `${v.toString()}n` : v, 2);
+  } catch {
+    return String(value);
+  }
+}
+var statusFromToolState = (state) => {
+  switch (state) {
+    case "input-streaming":
+      return "pending";
+    case "input-available":
+      return "running";
+    case "approval-requested":
+      return "awaiting-approval";
+    case "approval-responded":
+      return "running";
+    case "output-available":
+      return "complete";
+    case "output-denied":
+      return "denied";
+    case "output-error":
+      return "failed";
+  }
+};
+var getStatusBadge = (status) => /* @__PURE__ */ jsx(StatusBadge, { status: statusFromToolState(status) });
+var ToolHeader = ({
+  className,
+  title,
+  summary,
+  type,
+  state,
+  toolName,
+  ...props
+}) => {
+  const derivedName = type === "dynamic-tool" ? toolName : type.split("-").slice(1).join("-");
+  return /* @__PURE__ */ jsxs(
+    CollapsibleTrigger,
+    {
+      className: cn("flex w-full items-center justify-between gap-4 p-3", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsx(WrenchIcon, { className: "size-4 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-body font-medium", children: title ?? derivedName }),
+          getStatusBadge(state),
+          summary ? /* @__PURE__ */ jsx("span", { className: "truncate text-meta text-muted-foreground", children: summary }) : null
+        ] }),
+        /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
+      ]
+    }
+  );
+};
+var ToolContent = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  CollapsibleContent,
+  {
+    className: cn(
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 space-y-4 p-4 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)]",
+      className
+    ),
+    ...props
+  }
+);
+var ToolDetails = ({
+  className,
+  label,
+  defaultOpen = false,
+  children,
+  ...props
+}) => {
+  const { t } = useLocale();
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      className: cn("group/tool-details not-prose", className),
+      defaultOpen,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "flex items-center gap-1 rounded-sm text-meta text-muted-foreground transition-colors hover:text-foreground focus-ring", children: [
+          /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3.5 transition-transform group-data-[state=open]/tool-details:rotate-180" }),
+          label ?? t("ai.tool.showTechnicalDetails")
+        ] }),
+        /* @__PURE__ */ jsx(CollapsibleContent, { className: "mt-3 space-y-4", children })
+      ]
+    }
+  );
+};
+var ToolInput = ({ className, input, ...props }) => {
+  const { t } = useLocale();
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2 overflow-hidden", className), ...props, children: [
+    /* @__PURE__ */ jsx("h4", { className: "text-eyebrow uppercase text-muted-foreground", children: t("ai.schemaDisplay.parameters") }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-md bg-muted/50", children: /* @__PURE__ */ jsx(CodeBlock, { code: safeJsonStringify(input), language: "json" }) })
+  ] });
+};
+var ToolOutput = ({
+  className,
+  output,
+  errorText,
+  isStreaming = false,
+  ...props
+}) => {
+  const { t } = useLocale();
+  const hasOutput = output !== void 0;
+  if (!(hasOutput || errorText || isStreaming)) {
+    return null;
+  }
+  const showError = !isStreaming && Boolean(errorText);
+  const pending = isStreaming && !hasOutput && !errorText;
+  let Output = null;
+  if (hasOutput) {
+    if (isValidElement(output)) {
+      Output = output;
+    } else if (typeof output === "string") {
+      Output = /* @__PURE__ */ jsx(CodeBlock, { code: output, language: "text" });
+    } else {
+      Output = /* @__PURE__ */ jsx(CodeBlock, { code: safeJsonStringify(output), language: "json" });
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), ...props, children: [
+    /* @__PURE__ */ jsx("h4", { className: "text-eyebrow uppercase text-muted-foreground", children: showError ? t("ai.tool.error") : t("ai.tool.result") }),
+    pending ? /* @__PURE__ */ jsxs("div", { className: "space-y-2 rounded-md bg-muted/50 p-3", role: "status", "aria-live": "polite", children: [
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("loading") }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" })
+    ] }) : /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "overflow-x-auto rounded-md text-caption [&_table]:w-full",
+          // #124: this colours the ambient text of the error/result body —
+          // running text, so the error branch takes the ink rung.
+          showError ? "bg-destructive/10 text-destructive-text" : "bg-muted/50 text-foreground"
+        ),
+        children: [
+          showError && /* @__PURE__ */ jsx("div", { children: errorText }),
+          Output
+        ]
+      }
+    )
+  ] });
+};
+
+export {
+  Tool,
+  statusFromToolState,
+  getStatusBadge,
+  ToolHeader,
+  ToolContent,
+  ToolDetails,
+  ToolInput,
+  ToolOutput
+};
+//# sourceMappingURL=chunk-PTWCTSZL.js.map

package/dist/chunk-PTWCTSZL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tool.tsx"],"sourcesContent":["\"use client\";\n\nimport { Skeleton, StatusBadge, useLocale, type Status } from \"@elabs-ai/components-ui\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport type { DynamicToolUIPart, ToolUIPart } from \"ai\";\nimport { ChevronDownIcon, WrenchIcon } from \"lucide-react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { isValidElement } from \"react\";\nimport type { BundledLanguage } from \"shiki\";\n\nimport { CodeBlock } from \"./code-block\";\n\nexport type ToolProps = ComponentProps<typeof Collapsible>;\n\nexport const Tool = ({ className, ...props }: ToolProps) => (\n  <Collapsible\n    className={cn(\"group not-prose mb-4 w-full rounded-md border\", className)}\n    {...props}\n  />\n);\n\nexport type ToolPart = ToolUIPart | DynamicToolUIPart;\n\n/**\n * `JSON.stringify` throws on a circular reference or a `BigInt` — both\n * realistic shapes for tool input/output payloads a model produced. Falls\n * back to a readable placeholder instead of crashing the message render.\n */\nfunction safeJsonStringify(value: unknown): string {\n  try {\n    return JSON.stringify(value, (_key, v) => (typeof v === \"bigint\" ? `${v.toString()}n` : v), 2);\n  } catch {\n    return String(value);\n  }\n}\n\nexport type ToolHeaderProps = {\n  title?: string;\n  /**\n   * The business summary line (\"3 documents found\", \"8 rows reconciled\"),\n   * shown beside the name + StatusBadge (#192, research 10 §B.5). Falls back\n   * to nothing — the derived tool name still labels the row.\n   */\n  summary?: ReactNode;\n  className?: string;\n} & (\n  | { type: ToolUIPart[\"type\"]; state: ToolUIPart[\"state\"]; toolName?: never }\n  | {\n      type: DynamicToolUIPart[\"type\"];\n      state: DynamicToolUIPart[\"state\"];\n      toolName: string;\n    }\n);\n\n/**\n * Map the AI-SDK `ToolUIPart` 7-state machine onto the canonical `Status`\n * enum (#189, research 10 §B.1 mapping a). Lives here — not in `@elabs-ai/components-ui` —\n * because it is typed against the SDK union; the `ai` import stays TYPES-ONLY\n * (D6, gate-enforced by `pnpm ai:types-only`).\n */\nexport const statusFromToolState = (state: ToolPart[\"state\"]): Status => {\n  switch (state) {\n    case \"input-streaming\":\n      return \"pending\";\n    case \"input-available\":\n      return \"running\";\n    case \"approval-requested\":\n      return \"awaiting-approval\";\n    case \"approval-responded\":\n      return \"running\";\n    case \"output-available\":\n      return \"complete\";\n    case \"output-denied\":\n      return \"denied\";\n    case \"output-error\":\n      return \"failed\";\n  }\n};\n\n/** Same signature as before #189; renders the canonical StatusBadge. */\nexport const getStatusBadge = (status: ToolPart[\"state\"]) => (\n  <StatusBadge status={statusFromToolState(status)} />\n);\n\nexport const ToolHeader = ({\n  className,\n  title,\n  summary,\n  type,\n  state,\n  toolName,\n  ...props\n}: ToolHeaderProps) => {\n  const derivedName = type === \"dynamic-tool\" ? toolName : type.split(\"-\").slice(1).join(\"-\");\n\n  return (\n    <CollapsibleTrigger\n      className={cn(\"flex w-full items-center justify-between gap-4 p-3\", className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 items-center gap-2\">\n        <WrenchIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n        <span className=\"shrink-0 text-body font-medium\">{title ?? derivedName}</span>\n        {getStatusBadge(state)}\n        {summary ? (\n          <span className=\"truncate text-meta text-muted-foreground\">{summary}</span>\n        ) : null}\n      </div>\n      <ChevronDownIcon className=\"size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-180\" />\n    </CollapsibleTrigger>\n  );\n};\n\nexport type ToolContentProps = ComponentProps<typeof CollapsibleContent>;\n\nexport const ToolContent = ({ className, ...props }: ToolContentProps) => (\n  <CollapsibleContent\n    className={cn(\n      \"data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 space-y-4 p-4 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)]\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type ToolDetailsProps = ComponentProps<typeof Collapsible> & {\n  /** The disclosure label. */\n  label?: ReactNode;\n};\n\n/**\n * The technical view, behind disclosure — the PACKAGE DEFAULT for tool JSON\n * (#192, research 10 §B.5): a nested collapsible, COLLAPSED by default,\n * holding `ToolInput`/`ToolOutput`. The header carries the business `summary`;\n * the raw payload is one expand away, never the headline.\n */\nexport const ToolDetails = ({\n  className,\n  label,\n  defaultOpen = false,\n  children,\n  ...props\n}: ToolDetailsProps) => {\n  const { t } = useLocale();\n  return (\n    <Collapsible\n      className={cn(\"group/tool-details not-prose\", className)}\n      defaultOpen={defaultOpen}\n      {...props}\n    >\n      <CollapsibleTrigger className=\"flex items-center gap-1 rounded-sm text-meta text-muted-foreground transition-colors hover:text-foreground focus-ring\">\n        <ChevronDownIcon className=\"size-3.5 transition-transform group-data-[state=open]/tool-details:rotate-180\" />\n        {label ?? t(\"ai.tool.showTechnicalDetails\")}\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"mt-3 space-y-4\">{children}</CollapsibleContent>\n    </Collapsible>\n  );\n};\n\nexport type ToolInputProps = ComponentProps<\"div\"> & {\n  input: ToolPart[\"input\"];\n};\n\nexport const ToolInput = ({ className, input, ...props }: ToolInputProps) => {\n  const { t } = useLocale();\n  return (\n    <div className={cn(\"space-y-2 overflow-hidden\", className)} {...props}>\n      <h4 className=\"text-eyebrow uppercase text-muted-foreground\">\n        {t(\"ai.schemaDisplay.parameters\")}\n      </h4>\n      <div className=\"rounded-md bg-muted/50\">\n        <CodeBlock code={safeJsonStringify(input)} language=\"json\" />\n      </div>\n    </div>\n  );\n};\n\nexport type ToolOutputProps = ComponentProps<\"div\"> & {\n  /**\n   * The tool result. Objects/strings render as JSON inside the technical view.\n   *\n   * @deprecated Passing a pre-rendered **React element** here (the \"rich\n   * output under a muted Result heading\" path) is deprecated since #192\n   * (research 10 §B.5): a produced artifact is the HEADLINE, not a technical\n   * detail — host it in a `<ToolResultCard>` and keep `ToolOutput` for the\n   * JSON payload behind `<ToolDetails>`. The element path still renders for\n   * existing consumers (e.g. the copy-owned `ai-chart` registry block) but\n   * will be removed in a future release.\n   */\n  output: ToolPart[\"output\"];\n  errorText: ToolPart[\"errorText\"];\n  /**\n   * The call has not produced output yet (loading-states.md `isStreaming`) —\n   * derive it from the existing `statusFromToolState(state)` mapping\n   * (`\"input-streaming\"`/`\"input-available\"` → not yet `\"complete\"`/`\"failed\"`)\n   * rather than a second source of truth. While true and no `output`/\n   * `errorText` has arrived, renders a layout-shaped skeleton in the Result\n   * slot instead of `null`, so the technical view reserves its space. A\n   * still-running call is never a terminal failure — the error branch is\n   * suppressed while `isStreaming` per the loading-states.md error rule, even\n   * if a stale `errorText` is still set from a previous render.\n   * @default false\n   */\n  isStreaming?: boolean;\n};\n\nexport const ToolOutput = ({\n  className,\n  output,\n  errorText,\n  isStreaming = false,\n  ...props\n}: ToolOutputProps) => {\n  const { t } = useLocale();\n\n  // `output` is a defined-but-falsy result (`0`, `false`, `\"\"`) for plenty of\n  // real tools (a count, a boolean check, an empty-string field) — only\n  // `undefined` means \"no output (yet)\".\n  const hasOutput = output !== undefined;\n\n  if (!(hasOutput || errorText || isStreaming)) {\n    return null;\n  }\n\n  const showError = !isStreaming && Boolean(errorText);\n  const pending = isStreaming && !hasOutput && !errorText;\n\n  let Output: ReactNode = null;\n\n  if (hasOutput) {\n    if (isValidElement(output)) {\n      Output = output;\n    } else if (typeof output === \"string\") {\n      // A tool result is arbitrary text, not guaranteed JSON — forcing the\n      // JSON highlighter on it mis-colours ordinary strings. Shiki's own\n      // `BundledLanguage` union (grammar-backed languages) omits its\n      // hard-coded plain-text pseudo-languages (`isPlainLang`:\n      // \"plaintext\" | \"txt\" | \"text\" | \"plain\") — `createHighlighter`/\n      // `codeToTokens` accept and special-case them with no grammar load\n      // (verified: `getLoadedLanguages()` stays empty, no throw), so this\n      // is a type-only gap, not a runtime one.\n      Output = <CodeBlock code={output} language={\"text\" as BundledLanguage} />;\n    } else {\n      // Objects, arrays, numbers, booleans, null, bigint — all safe to\n      // stringify for display.\n      Output = <CodeBlock code={safeJsonStringify(output)} language=\"json\" />;\n    }\n  }\n\n  return (\n    <div className={cn(\"space-y-2\", className)} {...props}>\n      <h4 className=\"text-eyebrow uppercase text-muted-foreground\">\n        {showError ? t(\"ai.tool.error\") : t(\"ai.tool.result\")}\n      </h4>\n      {pending ? (\n        <div className=\"space-y-2 rounded-md bg-muted/50 p-3\" role=\"status\" aria-live=\"polite\">\n          <span className=\"sr-only\">{t(\"loading\")}</span>\n          <Skeleton className=\"h-4 w-3/4\" />\n          <Skeleton className=\"h-4 w-full\" />\n          <Skeleton className=\"h-4 w-1/2\" />\n        </div>\n      ) : (\n        <div\n          className={cn(\n            \"overflow-x-auto rounded-md text-caption [&_table]:w-full\",\n            // #124: this colours the ambient text of the error/result body —\n            // running text, so the error branch takes the ink rung.\n            showError ? \"bg-destructive/10 text-destructive-text\" : \"bg-muted/50 text-foreground\",\n          )}\n        >\n          {showError && <div>{errorText}</div>}\n          {Output}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-QJUNPVOS.js

@@ -0,0 +1,101 @@
+"use client";
+import {
+  AgentStep
+} from "./chunk-UCJ6IUFS.js";
+
+// src/agent-event.tsx
+import { Webhook } from "lucide-react";
+import { forwardRef } from "react";
+import {
+  StatusIcon,
+  agentEventOutcomeStatus,
+  formatElapsed,
+  useLocale
+} from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function isCheckResultList(checks) {
+  return Array.isArray(checks);
+}
+function AgentEventCheckRow({ check }) {
+  const { t } = useLocale();
+  const { label, ok, detail, durationMs } = check;
+  const statusWord = t(ok ? "ai.agentEvent.checkPassed" : "ai.agentEvent.checkFailed");
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "agent-event-check", "data-ok": ok, className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-1.5 gap-y-0.5 min-w-0", children: [
+      /* @__PURE__ */ jsx(StatusIcon, { status: ok ? "complete" : "failed", className: "size-3.5 shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: "text-caption font-medium text-foreground truncate", children: label }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "agent-event-check-status",
+          className: cn("text-caption", ok ? "text-success-text" : "text-destructive-text"),
+          children: statusWord
+        }
+      ),
+      durationMs !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground tabular-nums shrink-0", children: formatElapsed(durationMs) })
+    ] }),
+    detail !== void 0 && detail !== "" && /* @__PURE__ */ jsx(
+      "p",
+      {
+        "data-slot": "agent-event-check-detail",
+        className: "ps-5 text-caption text-muted-foreground break-words",
+        children: detail
+      }
+    )
+  ] });
+}
+function AgentEventChecks({ checks }) {
+  const { t } = useLocale();
+  if (isCheckResultList(checks)) {
+    if (checks.length === 0) return null;
+    return /* @__PURE__ */ jsx("div", { "data-slot": "agent-event-checks", className: "flex flex-col gap-1.5", children: checks.map((check, index) => /* @__PURE__ */ jsx(AgentEventCheckRow, { check }, `${check.label}-${index}`)) });
+  }
+  const { ran, passed } = checks;
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "agent-event-checks-summary",
+      className: "text-meta text-muted-foreground tabular-nums",
+      children: t("ai.agentEvent.checksSummary", { passed, ran })
+    }
+  );
+}
+var PHASE_KEY = {
+  before: "ai.agentEvent.phaseBefore",
+  after: "ai.agentEvent.phaseAfter",
+  lifecycle: "ai.agentEvent.phaseLifecycle"
+};
+var AgentEvent = forwardRef(function AgentEvent2({ label, phase, outcome = "ok", durationMs, checks, icon: Icon = Webhook, summary, ...props }, ref) {
+  const { t } = useLocale();
+  const status = agentEventOutcomeStatus(outcome);
+  const phaseLabel = phase === void 0 ? void 0 : t(PHASE_KEY[phase]);
+  const name = phaseLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    label,
+    " ",
+    /* @__PURE__ */ jsxs("span", { "data-slot": "agent-event-phase", className: "text-meta font-normal text-muted-foreground", children: [
+      "\xB7 ",
+      phaseLabel
+    ] })
+  ] }) : label;
+  return /* @__PURE__ */ jsx(
+    AgentStep,
+    {
+      ref,
+      icon: Icon,
+      name,
+      status,
+      summary,
+      timestamp: durationMs === void 0 ? void 0 : formatElapsed(durationMs),
+      "data-slot": "agent-event",
+      ...props,
+      children: checks ? /* @__PURE__ */ jsx(AgentEventChecks, { checks }) : null
+    }
+  );
+});
+AgentEvent.displayName = "AgentEvent";
+
+export {
+  AgentEvent
+};
+//# sourceMappingURL=chunk-QJUNPVOS.js.map

package/dist/chunk-QJUNPVOS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/agent-event.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * AgentEvent — the lifecycle/hook event line (#109).\n *\n * Nothing in the trace vocabulary (`Message` → `Tool` → `Task`/`AgentStep`)\n * has a place for something the *runtime* did to the agent: a lifecycle hook\n * (`user_prompt_submit`, `stop`) or a policy/guard check\n * (`pre_tool_use`/`post_tool_use`) that fired around a tool call. `AgentEvent`\n * fills that gap as an `AgentStep` VARIANT on the existing `AgentTimeline`\n * rail — not a second spine. It sits in the same `<ol>` as ordinary steps,\n * distinguished by glyph and label rather than by a different layout\n * (docs/decisions/2026-09-01-brainless-adoption-architecture.md § 6, and the\n * `Task`/`TaskItem` precedent this file follows in `./agent-timeline`).\n *\n * `outcome` maps onto the existing closed 7-state `Status` (`@elabs-ai/components-ui`) —\n * no eighth status is introduced. `checks` renders a gate's verdicts: an\n * array renders each check as icon + accessible pass/fail TEXT (never colour\n * alone — the greyscale test in `.claude/rules/accessibility.md`); a count\n * summary renders `passed/ran` as plain text.\n */\nimport { Webhook, type LucideIcon } from \"lucide-react\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  StatusIcon,\n  agentEventOutcomeStatus,\n  formatElapsed,\n  useLocale,\n  type AgentEventOutcome,\n  type AgentEventPhase,\n  type CheckResult,\n  type CheckSummary,\n} from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport { AgentStep, type AgentStepProps } from \"./agent-timeline\";\n\n// `AgentEventPhase`, `AgentEventOutcome` and the outcome→`Status` mapping\n// (`agentEventOutcomeStatus`, formerly this file's private `OUTCOME_STATUS`)\n// moved to `@elabs-ai/components-ui` (`lib/agent-event-model.ts`) — the\n// terminal CLI look-alike family's own event line (issue #117) reuses the\n// same model, and `@elabs-ai/components-ai`/`@elabs-ai/components-terminal`\n// are layer-2 DAG siblings that may not import each other (T0; see\n// docs/decisions/2026-09-01-brainless-adoption-architecture.md § 4). Imported\n// above; NOT re-exported from here — a consumer imports `AgentEventPhase`/\n// `AgentEventOutcome` from `@elabs-ai/components-ui`.\n\nexport interface AgentEventProps extends Omit<\n  AgentStepProps,\n  \"name\" | \"status\" | \"children\" | \"icon\" | \"timestamp\"\n> {\n  /** The runtime event name, verbatim as the runtime emits it — e.g. `\"user_prompt_submit\"`, `\"pre_tool_use\"`, `\"stop\"`. */\n  label: string;\n  /** When this event fired relative to the action it gates. See `AgentEventPhase`. */\n  phase?: AgentEventPhase;\n  /** The event's verdict. @default \"ok\" */\n  outcome?: AgentEventOutcome;\n  /** Wall-clock duration of the event, in milliseconds. Rendered with the shared `formatElapsed`. */\n  durationMs?: number;\n  /** Gate checks the event ran: individual verdicts, or a count summary. */\n  checks?: CheckSummary | CheckResult[];\n  /** Optional leading glyph on the title row (Lucide). @default Webhook */\n  icon?: LucideIcon;\n}\n\nfunction isCheckResultList(checks: CheckSummary | CheckResult[]): checks is CheckResult[] {\n  return Array.isArray(checks);\n}\n\n/**\n * A single gate-check verdict row: icon + label + accessible status word +\n * optional duration + optional detail. Mirrors the anatomy of `ChangeReview`'s\n * check row (`packages/ui/src/components/change-review/change-review.tsx`) so\n * the two `CheckResult` surfaces read as one convention — reimplemented here\n * (rather than imported) because that row is a private, unexported function.\n *\n * The pass/fail signal is carried by TWO non-colour cues — `StatusIcon`'s\n * distinct glyph (decorative, `aria-hidden`) and the visible status word\n * (what reaches assistive tech) — so it survives in greyscale (WCAG 1.4.1).\n */\nfunction AgentEventCheckRow({ check }: { check: CheckResult }) {\n  const { t } = useLocale();\n  const { label, ok, detail, durationMs } = check;\n  const statusWord = t(ok ? \"ai.agentEvent.checkPassed\" : \"ai.agentEvent.checkFailed\");\n\n  return (\n    <div data-slot=\"agent-event-check\" data-ok={ok} className=\"flex flex-col gap-1\">\n      <div className=\"flex flex-wrap items-center gap-x-1.5 gap-y-0.5 min-w-0\">\n        <StatusIcon status={ok ? \"complete\" : \"failed\"} className=\"size-3.5 shrink-0\" />\n        <span className=\"text-caption font-medium text-foreground truncate\">{label}</span>\n        <span\n          data-slot=\"agent-event-check-status\"\n          className={cn(\"text-caption\", ok ? \"text-success-text\" : \"text-destructive-text\")}\n        >\n          {statusWord}\n        </span>\n        {durationMs !== undefined && (\n          <span className=\"text-caption text-muted-foreground tabular-nums shrink-0\">\n            {formatElapsed(durationMs)}\n          </span>\n        )}\n      </div>\n      {detail !== undefined && detail !== \"\" && (\n        <p\n          data-slot=\"agent-event-check-detail\"\n          className=\"ps-5 text-caption text-muted-foreground break-words\"\n        >\n          {detail}\n        </p>\n      )}\n    </div>\n  );\n}\n\n/** The checks section: a flat list of verdict rows, or a `passed/ran` count line. */\nfunction AgentEventChecks({ checks }: { checks: CheckSummary | CheckResult[] }) {\n  const { t } = useLocale();\n\n  if (isCheckResultList(checks)) {\n    if (checks.length === 0) return null;\n    return (\n      <div data-slot=\"agent-event-checks\" className=\"flex flex-col gap-1.5\">\n        {checks.map((check, index) => (\n          <AgentEventCheckRow key={`${check.label}-${index}`} check={check} />\n        ))}\n      </div>\n    );\n  }\n\n  const { ran, passed } = checks;\n  return (\n    <p\n      data-slot=\"agent-event-checks-summary\"\n      className=\"text-meta text-muted-foreground tabular-nums\"\n    >\n      {t(\"ai.agentEvent.checksSummary\", { passed, ran })}\n    </p>\n  );\n}\n\nconst PHASE_KEY: Record<AgentEventPhase, string> = {\n  before: \"ai.agentEvent.phaseBefore\",\n  after: \"ai.agentEvent.phaseAfter\",\n  lifecycle: \"ai.agentEvent.phaseLifecycle\",\n};\n\n/**\n * One lifecycle/hook event line on the `AgentTimeline` rail — an `AgentStep`\n * variant, never a second spine. Composes `AgentStep` exactly as `TaskItem`\n * does in `./agent-timeline`, so it rides the same `TimelineRoot`/`TimelineItem`\n * primitives every other trace entry uses.\n */\nexport const AgentEvent = forwardRef<HTMLLIElement, AgentEventProps>(function AgentEvent(\n  { label, phase, outcome = \"ok\", durationMs, checks, icon: Icon = Webhook, summary, ...props },\n  ref,\n) {\n  const { t } = useLocale();\n  const status = agentEventOutcomeStatus(outcome);\n  const phaseLabel = phase === undefined ? undefined : t(PHASE_KEY[phase]);\n\n  const name: ReactNode = phaseLabel ? (\n    <>\n      {label}{\" \"}\n      <span data-slot=\"agent-event-phase\" className=\"text-meta font-normal text-muted-foreground\">\n        · {phaseLabel}\n      </span>\n    </>\n  ) : (\n    label\n  );\n\n  return (\n    <AgentStep\n      ref={ref}\n      icon={Icon}\n      name={name}\n      status={status}\n      summary={summary}\n      timestamp={durationMs === undefined ? undefined : formatElapsed(durationMs)}\n      data-slot=\"agent-event\"\n      {...props}\n    >\n      {checks ? <AgentEventChecks checks={checks} /> : null}\n    </AgentStep>\n  );\n});\n\nAgentEvent.displayName = \"AgentEvent\";\n"],"mappings":";;;;;;AAqBA,SAAS,eAAgC;AACzC,SAAS,kBAAkC;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AACP,SAAS,UAAU;AAqDb,SA0EF,UAzEI,KADF;AAtBN,SAAS,kBAAkB,QAA+D;AACxF,SAAO,MAAM,QAAQ,MAAM;AAC7B;AAaA,SAAS,mBAAmB,EAAE,MAAM,GAA2B;AAC7D,QAAM,EAAE,EAAE,IAAI,UAAU;AACxB,QAAM,EAAE,OAAO,IAAI,QAAQ,WAAW,IAAI;AAC1C,QAAM,aAAa,EAAE,KAAK,8BAA8B,2BAA2B;AAEnF,SACE,qBAAC,SAAI,aAAU,qBAAoB,WAAS,IAAI,WAAU,uBACxD;AAAA,yBAAC,SAAI,WAAU,2DACb;AAAA,0BAAC,cAAW,QAAQ,KAAK,aAAa,UAAU,WAAU,qBAAoB;AAAA,MAC9E,oBAAC,UAAK,WAAU,qDAAqD,iBAAM;AAAA,MAC3E;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAW,GAAG,gBAAgB,KAAK,sBAAsB,uBAAuB;AAAA,UAE/E;AAAA;AAAA,MACH;AAAA,MACC,eAAe,UACd,oBAAC,UAAK,WAAU,4DACb,wBAAc,UAAU,GAC3B;AAAA,OAEJ;AAAA,IACC,WAAW,UAAa,WAAW,MAClC;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;AAGA,SAAS,iBAAiB,EAAE,OAAO,GAA6C;AAC9E,QAAM,EAAE,EAAE,IAAI,UAAU;AAExB,MAAI,kBAAkB,MAAM,GAAG;AAC7B,QAAI,OAAO,WAAW,EAAG,QAAO;AAChC,WACE,oBAAC,SAAI,aAAU,sBAAqB,WAAU,yBAC3C,iBAAO,IAAI,CAAC,OAAO,UAClB,oBAAC,sBAAmD,SAA3B,GAAG,MAAM,KAAK,IAAI,KAAK,EAAkB,CACnE,GACH;AAAA,EAEJ;AAEA,QAAM,EAAE,KAAK,OAAO,IAAI;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAU;AAAA,MAET,YAAE,+BAA+B,EAAE,QAAQ,IAAI,CAAC;AAAA;AAAA,EACnD;AAEJ;AAEA,IAAM,YAA6C;AAAA,EACjD,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AACb;AAQO,IAAM,aAAa,WAA2C,SAASA,YAC5E,EAAE,OAAO,OAAO,UAAU,MAAM,YAAY,QAAQ,MAAM,OAAO,SAAS,SAAS,GAAG,MAAM,GAC5F,KACA;AACA,QAAM,EAAE,EAAE,IAAI,UAAU;AACxB,QAAM,SAAS,wBAAwB,OAAO;AAC9C,QAAM,aAAa,UAAU,SAAY,SAAY,EAAE,UAAU,KAAK,CAAC;AAEvE,QAAM,OAAkB,aACtB,iCACG;AAAA;AAAA,IAAO;AAAA,IACR,qBAAC,UAAK,aAAU,qBAAoB,WAAU,+CAA8C;AAAA;AAAA,MACvF;AAAA,OACL;AAAA,KACF,IAEA;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,eAAe,SAAY,SAAY,cAAc,UAAU;AAAA,MAC1E,aAAU;AAAA,MACT,GAAG;AAAA,MAEH,mBAAS,oBAAC,oBAAiB,QAAgB,IAAK;AAAA;AAAA,EACnD;AAEJ,CAAC;AAED,WAAW,cAAc;","names":["AgentEvent"]}