langchain_agentx_stream_ui 0.1.0 → 0.1.2

package/dist/chunk-A4W6B7C3.js

@@ -0,0 +1,1429 @@
+import {
+  InteractionBusContext,
+  ToolCallShell,
+  formatToolTitle,
+  getNoopInteractionBus,
+  resolveToolBody,
+  useInteractionBus
+} from "./chunk-WM6Y6APP.js";
+import {
+  DEFAULT_SESSION_VIEW_OPTIONS,
+  MultiSessionStoreContext,
+  NodeRegistryContext,
+  SessionStoreContext,
+  SessionTimeline,
+  SessionViewOptionsContext,
+  ToolDisplayOptionsContext,
+  createEmptyTree,
+  reduceTree,
+  replayEvents,
+  resolveEffectiveToolBodyMode,
+  useInternalErrors,
+  useNodeTyped,
+  usePendingPermissionForTool,
+  useSessionStatus,
+  useSessionViewOptions,
+  useToolDisplayOptions
+} from "./chunk-3B4WC67E.js";
+import {
+  createDefaultToolRegistry
+} from "./chunk-MHK53ZHC.js";
+import {
+  MarkdownRendererContext
+} from "./chunk-4RIOBLGB.js";
+
+// src/view/markdown/mermaidTheme.ts
+var MERMAID_THEME_CSS = `
+  .node rect, .node circle, .node ellipse, .node polygon, .node path {
+    fill: var(--lax-bg-surface, #f8f4e6);
+    stroke: var(--lax-border-color, #d7c4bb);
+    stroke-width: 1px;
+  }
+  .edgePath .path {
+    stroke: var(--lax-accent-primary, #9b7cb9);
+    stroke-width: 1.5px;
+  }
+  .edgeLabel {
+    background-color: transparent;
+    color: var(--lax-foreground, #333333);
+  }
+  .edgeLabel p {
+    background-color: transparent !important;
+  }
+  .label {
+    color: var(--lax-foreground, #333333);
+  }
+  .cluster rect {
+    fill: var(--lax-bg-surface, #f8f4e6);
+    stroke: var(--lax-border-color, #d7c4bb);
+    stroke-width: 1px;
+  }
+  .actor {
+    fill: var(--lax-bg-surface, #f8f4e6);
+    stroke: var(--lax-border-color, #d7c4bb);
+    stroke-width: 1px;
+  }
+  text.actor {
+    fill: var(--lax-foreground, #333333);
+    stroke: none;
+  }
+  .messageText {
+    fill: var(--lax-foreground, #333333);
+    stroke: none;
+  }
+  .messageLine0, .messageLine1 {
+    stroke: var(--lax-accent-primary, #9b7cb9);
+  }
+
+  [data-theme="dark"] .node rect,
+  [data-theme="dark"] .node circle,
+  [data-theme="dark"] .node ellipse,
+  [data-theme="dark"] .node polygon,
+  [data-theme="dark"] .node path {
+    fill: var(--lax-card-bg, #222222);
+    stroke: var(--lax-border-color, #5d4037);
+  }
+  [data-theme="dark"] .edgePath .path,
+  [data-theme="dark"] .flowchart-link {
+    stroke: var(--lax-accent-primary, #9370db);
+  }
+  [data-theme="dark"] .edgeLabel,
+  [data-theme="dark"] .label,
+  [data-theme="dark"] text.actor,
+  [data-theme="dark"] .messageText,
+  [data-theme="dark"] text.sequenceText,
+  [data-theme="dark"] .noteText {
+    fill: var(--lax-foreground, #f0f0f0);
+    color: var(--lax-foreground, #f0f0f0);
+  }
+  [data-theme="dark"] .cluster rect,
+  [data-theme="dark"] .actor {
+    fill: var(--lax-card-bg, #222222);
+    stroke: var(--lax-border-color, #5d4037);
+  }
+  [data-theme="dark"] .messageLine0,
+  [data-theme="dark"] .messageLine1 {
+    stroke: var(--lax-accent-primary, #9370db);
+    stroke-width: 1.5px;
+  }
+`;
+var DEFAULT_MERMAID_INIT = {
+  theme: "neutral",
+  maxTextSize: 1e5
+};
+
+// src/view/markdown/initMermaid.ts
+var mermaidInitPromise = null;
+var activeInitOptions = { ...DEFAULT_MERMAID_INIT };
+function buildInitializeConfig(options) {
+  return {
+    startOnLoad: false,
+    theme: options.theme ?? DEFAULT_MERMAID_INIT.theme,
+    securityLevel: "strict",
+    suppressErrorRendering: true,
+    logLevel: "error",
+    maxTextSize: options.maxTextSize ?? DEFAULT_MERMAID_INIT.maxTextSize,
+    htmlLabels: true,
+    themeCSS: MERMAID_THEME_CSS,
+    flowchart: {
+      htmlLabels: true,
+      curve: "basis",
+      nodeSpacing: 60,
+      rankSpacing: 60,
+      padding: 20
+    }
+  };
+}
+function configureMermaid(options) {
+  activeInitOptions = { ...DEFAULT_MERMAID_INIT, ...options };
+  mermaidInitPromise = null;
+}
+async function loadMermaid() {
+  if (typeof window === "undefined") return null;
+  if (!mermaidInitPromise) {
+    mermaidInitPromise = import("mermaid").then((mod) => {
+      const mermaid = mod.default;
+      mermaid.initialize(buildInitializeConfig(activeInitOptions));
+      return mermaid;
+    }).catch(() => null);
+  }
+  return mermaidInitPromise;
+}
+
+// src/view/markdown/MermaidDiagram.tsx
+import { useEffect as useEffect4, useId, useMemo, useRef as useRef3, useState as useState4 } from "react";
+
+// src/view/markdown/MermaidFullscreenModal.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MermaidFullscreenModal({
+  isOpen,
+  onClose,
+  svg,
+  title = "Diagram"
+}) {
+  const panelRef = useRef(null);
+  const [zoom, setZoom] = useState(1);
+  useEffect(() => {
+    if (!isOpen) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [isOpen, onClose]);
+  useEffect(() => {
+    if (isOpen) setZoom(1);
+  }, [isOpen]);
+  if (!isOpen) return null;
+  const zoomOut = () => setZoom((z) => Math.max(0.5, z - 0.1));
+  const zoomIn = () => setZoom((z) => Math.min(2, z + 0.1));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "lax-mermaid-modal",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": title,
+      onMouseDown: (event) => {
+        if (panelRef.current && !panelRef.current.contains(event.target)) {
+          onClose();
+        }
+      },
+      children: /* @__PURE__ */ jsxs("div", { ref: panelRef, className: "lax-mermaid-modal__panel", children: [
+        /* @__PURE__ */ jsxs("div", { className: "lax-mermaid-modal__header", children: [
+          /* @__PURE__ */ jsx("span", { className: "lax-mermaid-modal__title", children: title }),
+          /* @__PURE__ */ jsxs("div", { className: "lax-mermaid-modal__controls", children: [
+            /* @__PURE__ */ jsx(ZoomButton, { label: "Zoom out", onClick: zoomOut, children: "\u2212" }),
+            /* @__PURE__ */ jsxs("span", { className: "lax-mermaid-modal__zoom", children: [
+              Math.round(zoom * 100),
+              "%"
+            ] }),
+            /* @__PURE__ */ jsx(ZoomButton, { label: "Zoom in", onClick: zoomIn, children: "+" }),
+            /* @__PURE__ */ jsx(ZoomButton, { label: "Reset zoom", onClick: () => setZoom(1), children: "\u21BA" }),
+            /* @__PURE__ */ jsx(ZoomButton, { label: "Close", onClick: onClose, children: "\xD7" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "lax-mermaid-modal__body", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "lax-mermaid-modal__canvas",
+            style: {
+              transform: `scale(${zoom})`,
+              transformOrigin: "center center"
+            },
+            dangerouslySetInnerHTML: { __html: svg }
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function ZoomButton({
+  label,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx("button", { type: "button", className: "lax-mermaid-modal__btn", "aria-label": label, onClick, children });
+}
+
+// src/view/markdown/mermaidDisplayUtils.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+function isDarkMode() {
+  if (typeof document === "undefined") return false;
+  const root = document.documentElement;
+  const dataTheme = root.getAttribute("data-theme");
+  if (dataTheme === "dark") return true;
+  if (dataTheme === "light") return false;
+  if (root.classList.contains("dark")) return true;
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function applyDarkThemeToSvg(svg, dark) {
+  if (!svg) return svg;
+  const withoutAttr = svg.replace(/\sdata-theme="dark"/g, "");
+  if (!dark) return withoutAttr;
+  if (withoutAttr.includes('data-theme="dark"')) return withoutAttr;
+  return withoutAttr.replace("<svg ", '<svg data-theme="dark" ');
+}
+function useDarkMode() {
+  const [dark, setDark] = useState2(false);
+  useEffect2(() => {
+    const update = () => setDark(isDarkMode());
+    update();
+    const mq = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+    mq?.addEventListener("change", update);
+    const observer = new MutationObserver(update);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    return () => {
+      mq?.removeEventListener("change", update);
+      observer.disconnect();
+    };
+  }, []);
+  return dark;
+}
+
+// src/view/markdown/useCopyText.ts
+import { useCallback, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+
+// src/view/markdown/copyToClipboard.ts
+async function copyToClipboard(text) {
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+    }
+  }
+  if (typeof document === "undefined") return false;
+  try {
+    const textArea = document.createElement("textarea");
+    textArea.value = text;
+    textArea.style.position = "fixed";
+    textArea.style.left = "-9999px";
+    document.body.appendChild(textArea);
+    textArea.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(textArea);
+    return ok;
+  } catch {
+    return false;
+  }
+}
+
+// src/view/markdown/useCopyText.ts
+function useCopyText(text, resetMs = 2e3) {
+  const [copied, setCopied] = useState3(false);
+  const timerRef = useRef2();
+  useEffect3(() => {
+    return () => {
+      if (timerRef.current !== void 0) {
+        window.clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+  const copy = useCallback(async () => {
+    const ok = await copyToClipboard(text);
+    if (!ok) return;
+    setCopied(true);
+    if (timerRef.current !== void 0) {
+      window.clearTimeout(timerRef.current);
+    }
+    timerRef.current = window.setTimeout(() => setCopied(false), resetMs);
+  }, [text, resetMs]);
+  return { copied, copy };
+}
+
+// src/view/markdown/MermaidDiagram.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function MermaidDiagram({
+  chart,
+  className = "",
+  zoomingEnabled = true,
+  fullscreenEnabled = true
+}) {
+  const [rawSvg, setRawSvg] = useState4("");
+  const [error, setError] = useState4(null);
+  const [isFullscreen, setIsFullscreen] = useState4(false);
+  const { copied, copy } = useCopyText(chart);
+  const containerRef = useRef3(null);
+  const reactId = useId().replace(/:/g, "");
+  const renderId = `lax-mermaid-${reactId}`;
+  const isDark = useDarkMode();
+  const svg = useMemo(() => applyDarkThemeToSvg(rawSvg, isDark), [rawSvg, isDark]);
+  useEffect4(() => {
+    if (!chart.trim()) return;
+    let cancelled = false;
+    const renderChart = async () => {
+      const mermaid = await loadMermaid();
+      if (cancelled) return;
+      if (!mermaid) {
+        setError("mermaid peer dependency is not installed");
+        return;
+      }
+      try {
+        setError(null);
+        setRawSvg("");
+        const { svg: renderedSvg } = await mermaid.render(renderId, chart.trim());
+        if (!cancelled) {
+          setRawSvg(renderedSvg);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          const message = err instanceof Error ? err.message : String(err);
+          setError(message);
+        }
+      }
+    };
+    void renderChart();
+    return () => {
+      cancelled = true;
+    };
+  }, [chart, renderId]);
+  useEffect4(() => {
+    if (!svg || !zoomingEnabled || !containerRef.current) return;
+    let disposed = false;
+    const setupPanZoom = async () => {
+      const svgElement = containerRef.current?.querySelector("svg");
+      if (!svgElement || disposed) return;
+      svgElement.style.maxWidth = "none";
+      svgElement.style.width = "100%";
+      try {
+        const svgPanZoom = (await import("svg-pan-zoom")).default;
+        if (disposed) return;
+        svgPanZoom(svgElement, {
+          zoomEnabled: true,
+          controlIconsEnabled: true,
+          fit: true,
+          center: true,
+          minZoom: 0.1,
+          maxZoom: 10,
+          zoomScaleSensitivity: 0.3
+        });
+      } catch {
+      }
+    };
+    const timer = window.setTimeout(() => {
+      void setupPanZoom();
+    }, 50);
+    return () => {
+      disposed = true;
+      window.clearTimeout(timer);
+    };
+  }, [svg, zoomingEnabled]);
+  const handleCopy = () => void copy();
+  const openFullscreen = () => {
+    if (!error && svg) setIsFullscreen(true);
+  };
+  const toolbar = /* @__PURE__ */ jsxs2("div", { className: "lax-mermaid__toolbar", children: [
+    /* @__PURE__ */ jsx2("span", { className: "lax-mermaid__label", children: "Mermaid" }),
+    /* @__PURE__ */ jsxs2("div", { className: "lax-mermaid__actions", children: [
+      fullscreenEnabled && svg ? /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "lax-mermaid__expand",
+          onClick: openFullscreen,
+          "aria-label": "View fullscreen",
+          children: "Expand"
+        }
+      ) : null,
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "lax-mermaid__copy", onClick: handleCopy, children: copied ? "Copied" : "Copy" })
+    ] })
+  ] });
+  if (error) {
+    return /* @__PURE__ */ jsxs2("div", { className: `lax-mermaid lax-mermaid--error ${className}`.trim(), children: [
+      toolbar,
+      /* @__PURE__ */ jsx2("pre", { className: "lax-mermaid__fallback", children: chart }),
+      /* @__PURE__ */ jsx2("p", { className: "lax-mermaid__error-text", children: error })
+    ] });
+  }
+  if (!svg) {
+    return /* @__PURE__ */ jsxs2("div", { className: `lax-mermaid lax-mermaid--loading ${className}`.trim(), children: [
+      /* @__PURE__ */ jsxs2("span", { className: "lax-mermaid__loading-dots", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx2("span", {}),
+        /* @__PURE__ */ jsx2("span", {}),
+        /* @__PURE__ */ jsx2("span", {})
+      ] }),
+      /* @__PURE__ */ jsx2("span", { className: "lax-mermaid__loading-text", children: "Rendering diagram\u2026" })
+    ] });
+  }
+  const canvasClickable = fullscreenEnabled && !zoomingEnabled;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2("div", { className: `lax-mermaid ${className}`.trim(), children: [
+      toolbar,
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          ref: containerRef,
+          className: [
+            "lax-mermaid__canvas",
+            zoomingEnabled ? "lax-mermaid__canvas--zoom" : "",
+            canvasClickable ? "lax-mermaid__canvas--clickable" : ""
+          ].filter(Boolean).join(" "),
+          dangerouslySetInnerHTML: { __html: svg },
+          onClick: canvasClickable ? openFullscreen : void 0,
+          onKeyDown: canvasClickable ? (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              openFullscreen();
+            }
+          } : void 0,
+          role: canvasClickable ? "button" : void 0,
+          tabIndex: canvasClickable ? 0 : void 0,
+          "aria-label": canvasClickable ? "Click to view fullscreen" : void 0,
+          title: canvasClickable ? "Click to view fullscreen" : void 0
+        }
+      )
+    ] }),
+    fullscreenEnabled ? /* @__PURE__ */ jsx2(
+      MermaidFullscreenModal,
+      {
+        isOpen: isFullscreen,
+        onClose: () => setIsFullscreen(false),
+        svg
+      }
+    ) : null
+  ] });
+}
+
+// src/view/markdown/PlantUMLBlock.tsx
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function PlantUMLBlock({ content, className = "" }) {
+  const { copied, copy } = useCopyText(content);
+  return /* @__PURE__ */ jsxs3("div", { className: `lax-plantuml lax-code-block lax-code-block--rich ${className}`.trim(), children: [
+    /* @__PURE__ */ jsxs3("div", { className: "lax-code-block__header", children: [
+      /* @__PURE__ */ jsx3("span", { className: "lax-code-block__lang", children: "PlantUML" }),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: `lax-code-block__copy ${copied ? "lax-code-block__copy--copied" : ""}`,
+          onClick: () => void copy(),
+          children: copied ? "Copied" : "Copy"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx3(
+      SyntaxHighlighter,
+      {
+        language: "text",
+        style: oneDark,
+        customStyle: { margin: 0, padding: "0.75rem 1rem", background: "transparent" },
+        showLineNumbers: true,
+        wrapLongLines: true,
+        children: content
+      }
+    )
+  ] });
+}
+
+// src/view/markdown/plantumlConfig.ts
+var DEFAULT_PLANTUML_SERVER_URL = "https://kroki.io";
+var plantumlServerUrl = DEFAULT_PLANTUML_SERVER_URL;
+function configurePlantumlServer(url) {
+  plantumlServerUrl = url.replace(/\/$/, "");
+}
+function getPlantumlServerUrl() {
+  return plantumlServerUrl;
+}
+
+// src/view/markdown/PlantUMLDiagram.tsx
+import { useEffect as useEffect5, useState as useState5 } from "react";
+
+// src/view/markdown/plantumlRender.ts
+function normalizePlantumlSource(source) {
+  const trimmed = source.trim();
+  if (!trimmed) return trimmed;
+  if (trimmed.includes("@startuml")) return trimmed;
+  return `@startuml
+${trimmed}
+@enduml`;
+}
+async function fetchPlantumlSvg(source, serverUrl = getPlantumlServerUrl()) {
+  const base = serverUrl.replace(/\/$/, "");
+  const diagramSource = normalizePlantumlSource(source);
+  const res = await fetch(`${base}/`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "image/svg+xml"
+    },
+    body: JSON.stringify({
+      diagram_source: diagramSource,
+      diagram_type: "plantuml",
+      output_format: "svg"
+    })
+  });
+  if (!res.ok) {
+    const detail = await res.text().catch(() => "");
+    const suffix = detail ? `: ${detail.slice(0, 200)}` : "";
+    throw new Error(`PlantUML render failed (${res.status})${suffix}`);
+  }
+  const svg = await res.text();
+  if (!svg.includes("<svg")) {
+    throw new Error("PlantUML render returned non-SVG response");
+  }
+  return svg;
+}
+
+// src/view/markdown/PlantUMLDiagram.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function PlantUMLDiagram({
+  content,
+  className = "",
+  serverUrl,
+  fullscreenEnabled = true,
+  sourceOnly = false
+}) {
+  const [svg, setSvg] = useState5("");
+  const [error, setError] = useState5(null);
+  const [isFullscreen, setIsFullscreen] = useState5(false);
+  const { copied, copy } = useCopyText(content);
+  useEffect5(() => {
+    if (!content.trim() || sourceOnly) return;
+    let cancelled = false;
+    const render = async () => {
+      if (typeof window === "undefined") return;
+      try {
+        setError(null);
+        setSvg("");
+        const rendered = await fetchPlantumlSvg(content, serverUrl);
+        if (!cancelled) setSvg(rendered);
+      } catch (err) {
+        if (!cancelled) {
+          const message = err instanceof Error ? err.message : String(err);
+          setError(message);
+        }
+      }
+    };
+    void render();
+    return () => {
+      cancelled = true;
+    };
+  }, [content, serverUrl, sourceOnly]);
+  if (sourceOnly) {
+    return /* @__PURE__ */ jsx4(PlantUMLBlock, { content, className });
+  }
+  const handleCopy = () => void copy();
+  const openFullscreen = () => {
+    if (svg) setIsFullscreen(true);
+  };
+  const toolbar = /* @__PURE__ */ jsxs4("div", { className: "lax-plantuml__toolbar", children: [
+    /* @__PURE__ */ jsx4("span", { className: "lax-plantuml__label", children: "PlantUML" }),
+    /* @__PURE__ */ jsxs4("div", { className: "lax-plantuml__actions", children: [
+      fullscreenEnabled && svg ? /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: "lax-plantuml__expand",
+          onClick: openFullscreen,
+          "aria-label": "View fullscreen",
+          children: "Expand"
+        }
+      ) : null,
+      /* @__PURE__ */ jsx4("button", { type: "button", className: "lax-plantuml__copy", onClick: handleCopy, children: copied ? "Copied" : "Copy" })
+    ] })
+  ] });
+  if (error) {
+    return /* @__PURE__ */ jsxs4("div", { className: `lax-plantuml lax-plantuml--error ${className}`.trim(), children: [
+      toolbar,
+      /* @__PURE__ */ jsx4("pre", { className: "lax-plantuml__fallback", children: content }),
+      /* @__PURE__ */ jsx4("p", { className: "lax-plantuml__error-text", children: error })
+    ] });
+  }
+  if (!svg) {
+    return /* @__PURE__ */ jsxs4("div", { className: `lax-plantuml lax-plantuml--loading ${className}`.trim(), children: [
+      /* @__PURE__ */ jsxs4("span", { className: "lax-plantuml__loading-dots", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx4("span", {}),
+        /* @__PURE__ */ jsx4("span", {}),
+        /* @__PURE__ */ jsx4("span", {})
+      ] }),
+      /* @__PURE__ */ jsx4("span", { className: "lax-plantuml__loading-text", children: "Rendering diagram\u2026" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsxs4("div", { className: `lax-plantuml ${className}`.trim(), children: [
+      toolbar,
+      /* @__PURE__ */ jsx4(
+        "div",
+        {
+          className: "lax-plantuml__canvas lax-plantuml__canvas--clickable",
+          dangerouslySetInnerHTML: { __html: svg },
+          onClick: fullscreenEnabled ? openFullscreen : void 0,
+          onKeyDown: fullscreenEnabled ? (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              openFullscreen();
+            }
+          } : void 0,
+          role: fullscreenEnabled ? "button" : void 0,
+          tabIndex: fullscreenEnabled ? 0 : void 0,
+          "aria-label": fullscreenEnabled ? "Click to view fullscreen" : void 0
+        }
+      )
+    ] }),
+    fullscreenEnabled ? /* @__PURE__ */ jsx4(
+      MermaidFullscreenModal,
+      {
+        isOpen: isFullscreen,
+        onClose: () => setIsFullscreen(false),
+        svg,
+        title: "PlantUML"
+      }
+    ) : null
+  ] });
+}
+
+// src/view/markdown/RichMarkdown.tsx
+import { useMemo as useMemo2 } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+// src/view/markdown/markdownUtils.ts
+var MD_SYNTAX_RE = /[#*`|[>\-_~]|\n\n|^\d+\. |\n\d+\. /;
+function hasMarkdownSyntax(content) {
+  const sample = content.length > 500 ? content.slice(0, 500) : content;
+  return MD_SYNTAX_RE.test(sample);
+}
+function hashContent(content) {
+  let hash = 5381;
+  for (let i = 0; i < content.length; i++) {
+    hash = (hash << 5) + hash + content.charCodeAt(i) & 4294967295;
+  }
+  return hash.toString(36);
+}
+function collapseExcessiveBlankLines(text) {
+  return text.replace(/\n{3,}/g, "\n\n").trim();
+}
+function paragraphHasContent(children) {
+  if (children == null || children === false) return false;
+  if (typeof children === "string") return children.trim().length > 0;
+  if (typeof children === "number") return true;
+  if (Array.isArray(children)) return children.some(paragraphHasContent);
+  return true;
+}
+
+// src/view/markdown/richMarkdownComponents.tsx
+import { Prism as SyntaxHighlighter2 } from "react-syntax-highlighter";
+import { oneDark as oneDark2 } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+// src/view/markdown/headingIds.ts
+var headingCounter = 0;
+function generateHeadingId(text) {
+  const slug = text.trim().toLowerCase().replace(/[^\w\u4e00-\u9fff]+/g, "-").replace(/^-+|-+$/g, "");
+  if (slug) return slug;
+  headingCounter += 1;
+  return `heading-${headingCounter}`;
+}
+
+// src/view/markdown/richMarkdownComponents.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function RichCodeBlock({ language, content }) {
+  const { copied, copy } = useCopyText(content);
+  return /* @__PURE__ */ jsxs5("div", { className: "lax-code-block lax-code-block--rich", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "lax-code-block__header", children: [
+      /* @__PURE__ */ jsx5("span", { className: "lax-code-block__lang", children: language || "code" }),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          className: `lax-code-block__copy ${copied ? "lax-code-block__copy--copied" : ""}`,
+          onClick: () => void copy(),
+          children: copied ? "Copied" : "Copy"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx5(
+      SyntaxHighlighter2,
+      {
+        language: language || "text",
+        style: oneDark2,
+        customStyle: { margin: 0, padding: "0.75rem 1rem", background: "transparent" },
+        showLineNumbers: true,
+        wrapLongLines: true,
+        children: content
+      }
+    )
+  ] });
+}
+function heading(children, level, className) {
+  const text = children != null ? String(children) : "";
+  const id = generateHeadingId(text);
+  const Tag = level;
+  return /* @__PURE__ */ jsx5(Tag, { id, className: `lax-markdown__heading ${className}`, children });
+}
+var RICH_MARKDOWN_COMPONENTS = {
+  code(props) {
+    const { inline, className, children, ...rest } = props;
+    const match = /language-(\w+)/.exec(className || "");
+    const codeContent = children != null ? String(children).replace(/\n$/, "") : "";
+    if (!inline && match?.[1] === "mermaid" && codeContent.trim()) {
+      return /* @__PURE__ */ jsx5(MermaidDiagram, { chart: codeContent });
+    }
+    if (!inline && match?.[1] === "plantuml" && codeContent.trim()) {
+      return /* @__PURE__ */ jsx5(PlantUMLDiagram, { content: codeContent });
+    }
+    if (!inline && match) {
+      return /* @__PURE__ */ jsx5(RichCodeBlock, { language: match[1], content: codeContent });
+    }
+    return /* @__PURE__ */ jsx5("code", { className: "lax-markdown__inline-code", ...rest, children });
+  },
+  h1({ children }) {
+    return heading(children, "h1", "lax-markdown__h1");
+  },
+  h2({ children }) {
+    return heading(children, "h2", "lax-markdown__h2");
+  },
+  h3({ children }) {
+    return heading(children, "h3", "lax-markdown__h3");
+  },
+  h4({ children }) {
+    return heading(children, "h4", "lax-markdown__h4");
+  },
+  h5({ children }) {
+    return heading(children, "h5", "lax-markdown__h5");
+  },
+  h6({ children }) {
+    return heading(children, "h6", "lax-markdown__h6");
+  },
+  p({ children }) {
+    if (!paragraphHasContent(children)) return null;
+    return /* @__PURE__ */ jsx5("p", { className: "lax-markdown__paragraph", children });
+  },
+  ul({ children }) {
+    return /* @__PURE__ */ jsx5("ul", { className: "lax-markdown__list lax-markdown__ul", children });
+  },
+  ol({ children }) {
+    return /* @__PURE__ */ jsx5("ol", { className: "lax-markdown__list lax-markdown__ol", children });
+  },
+  li({ children }) {
+    return /* @__PURE__ */ jsx5("li", { className: "lax-markdown__li", children });
+  },
+  a({ children, href }) {
+    return /* @__PURE__ */ jsx5("a", { href, className: "lax-markdown__link", target: "_blank", rel: "noopener noreferrer", children });
+  },
+  blockquote({ children }) {
+    return /* @__PURE__ */ jsx5("blockquote", { className: "lax-markdown__blockquote", children });
+  },
+  table({ children }) {
+    return /* @__PURE__ */ jsx5("div", { className: "lax-markdown__table-wrapper", children: /* @__PURE__ */ jsx5("table", { className: "lax-markdown__table", children }) });
+  },
+  thead({ children }) {
+    return /* @__PURE__ */ jsx5("thead", { className: "lax-markdown__thead", children });
+  },
+  tbody({ children }) {
+    return /* @__PURE__ */ jsx5("tbody", { className: "lax-markdown__tbody", children });
+  },
+  tr({ children }) {
+    return /* @__PURE__ */ jsx5("tr", { className: "lax-markdown__tr", children });
+  },
+  th({ children }) {
+    return /* @__PURE__ */ jsx5("th", { className: "lax-markdown__th", children });
+  },
+  td({ children }) {
+    return /* @__PURE__ */ jsx5("td", { className: "lax-markdown__td", children });
+  },
+  hr() {
+    return /* @__PURE__ */ jsx5("hr", { className: "lax-markdown__hr" });
+  },
+  strong({ children }) {
+    return /* @__PURE__ */ jsx5("strong", { className: "lax-markdown__strong", children });
+  },
+  em({ children }) {
+    return /* @__PURE__ */ jsx5("em", { className: "lax-markdown__em", children });
+  }
+};
+
+// src/view/markdown/RichMarkdown.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function RichMarkdown({ content, className = "" }) {
+  const processed = useMemo2(() => collapseExcessiveBlankLines(content), [content]);
+  if (!processed) {
+    return null;
+  }
+  if (!hasMarkdownSyntax(processed)) {
+    return /* @__PURE__ */ jsx6("p", { className: `lax-markdown__paragraph ${className}`.trim(), children: processed });
+  }
+  return /* @__PURE__ */ jsx6("div", { className: className || void 0, children: /* @__PURE__ */ jsx6(ReactMarkdown, { remarkPlugins: [remarkGfm], components: RICH_MARKDOWN_COMPONENTS, children: processed }) });
+}
+
+// src/view/nodes/ReasoningNode.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var REASONING_DOT = "\u25CF";
+function ReasoningBubble({ nodeId }) {
+  const node = useNodeTyped(nodeId, "reasoning");
+  if (!node) return null;
+  const text = node.accumulated.trim();
+  if (!text) return null;
+  return /* @__PURE__ */ jsx7("div", { className: "lax-reasoning-bubble", "data-status": node.status, "data-round-id": node.roundId, children: /* @__PURE__ */ jsxs6("div", { className: "lax-reasoning-bubble__body", children: [
+    /* @__PURE__ */ jsx7("span", { className: "lax-reasoning-bubble__dot", "aria-hidden": "true", children: REASONING_DOT }),
+    /* @__PURE__ */ jsx7("span", { className: "lax-reasoning-bubble__content", children: node.accumulated })
+  ] }) });
+}
+
+// src/view/tools/presentation/StreamingMarkdown.tsx
+import { useRef as useRef4 } from "react";
+import { marked } from "marked";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var TOKEN_CACHE_MAX = 500;
+var tokenCache = /* @__PURE__ */ new Map();
+function cachedLexer(content) {
+  if (!hasMarkdownSyntax(content)) {
+    return [{
+      type: "paragraph",
+      raw: content,
+      text: content,
+      tokens: [{
+        type: "text",
+        raw: content,
+        text: content
+      }]
+    }];
+  }
+  const key = hashContent(content);
+  const hit = tokenCache.get(key);
+  if (hit) {
+    tokenCache.delete(key);
+    tokenCache.set(key, hit);
+    return hit;
+  }
+  const tokens = marked.lexer(content);
+  if (tokenCache.size >= TOKEN_CACHE_MAX) {
+    const first = tokenCache.keys().next().value;
+    if (first !== void 0) tokenCache.delete(first);
+  }
+  tokenCache.set(key, tokens);
+  return tokens;
+}
+function StreamingMarkdown({ children }) {
+  "use no memo";
+  const stablePrefixRef = useRef4("");
+  if (!children.startsWith(stablePrefixRef.current)) {
+    stablePrefixRef.current = "";
+  }
+  const boundary = stablePrefixRef.current.length;
+  const tokens = cachedLexer(children.substring(boundary));
+  let lastContentIdx = tokens.length - 1;
+  while (lastContentIdx >= 0 && tokens[lastContentIdx].type === "space") {
+    lastContentIdx--;
+  }
+  let advance = 0;
+  for (let i = 0; i < lastContentIdx; i++) {
+    advance += tokens[i].raw.length;
+  }
+  if (advance > 0) {
+    stablePrefixRef.current = children.substring(0, boundary + advance);
+  }
+  const stablePrefix = stablePrefixRef.current;
+  const unstableSuffix = children.substring(stablePrefix.length);
+  return /* @__PURE__ */ jsxs7("div", { className: "lax-markdown lax-markdown--rich", children: [
+    stablePrefix ? /* @__PURE__ */ jsx8(RichMarkdown, { content: stablePrefix }, `stable-${hashContent(stablePrefix)}`) : null,
+    unstableSuffix ? /* @__PURE__ */ jsx8(RichMarkdown, { content: unstableSuffix }, `unstable-${hashContent(unstableSuffix)}`) : null
+  ] });
+}
+
+// src/view/nodes/TextNode.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function TextBubble({ nodeId }) {
+  const node = useNodeTyped(nodeId, "text");
+  if (!node) return null;
+  return /* @__PURE__ */ jsx9("div", { className: "lax-text-bubble", "data-status": node.status, children: /* @__PURE__ */ jsxs8("div", { className: "lax-text-bubble__body", children: [
+    /* @__PURE__ */ jsx9("span", { className: "lax-text-bubble__dot", "aria-hidden": "true", children: REASONING_DOT }),
+    /* @__PURE__ */ jsx9("div", { className: "lax-text-bubble__content lax-text-bubble__content--markdown", children: /* @__PURE__ */ jsx9(StreamingMarkdown, { children: node.accumulated }) })
+  ] }) });
+}
+
+// src/view/nodes/ToolCallNode.tsx
+import { useEffect as useEffect6, useState as useState6 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function ToolCallCard({ nodeId, layout = "default" }) {
+  const node = useNodeTyped(nodeId, "tool_call");
+  const { registry, defaultBodyMode } = useToolDisplayOptions();
+  const viewOptions = useSessionViewOptions();
+  const pendingPermission = usePendingPermissionForTool(node?.toolName ?? "");
+  const effectiveDefault = resolveEffectiveToolBodyMode(viewOptions, defaultBodyMode);
+  const [bodyMode, setBodyMode] = useState6(effectiveDefault);
+  useEffect6(() => {
+    setBodyMode(resolveEffectiveToolBodyMode(viewOptions, defaultBodyMode));
+  }, [viewOptions.displayMode, viewOptions.verbose, defaultBodyMode]);
+  if (!node) return null;
+  if (node.hidden) return null;
+  const details = node.details;
+  const inputStream = details?.inputStream ?? node.inputDelta;
+  const result = node.result;
+  const displayBody = result?.display ?? null;
+  const hasSubagentProgress = (node.subagentProgress?.length ?? 0) > 0;
+  const showBody = hasSubagentProgress || !(node.status === "running" && result == null);
+  const BodyComponent = resolveToolBody(node.toolName, displayBody, registry);
+  const title = formatToolTitle(
+    node.toolName,
+    details?.input ?? node.input,
+    displayBody,
+    result?.summary,
+    result?.meta
+  );
+  const bodyProps = {
+    nodeId,
+    toolName: node.toolName,
+    status: node.status,
+    input: details?.input ?? node.input,
+    inputStream,
+    result,
+    progress: node.progress ?? void 0,
+    subagentProgress: node.subagentProgress,
+    subagentSessions: node.subagentSessions,
+    bodyMode,
+    onBodyModeChange: setBodyMode
+  };
+  const errorMessage = result?.error?.message ?? null;
+  const permissionWait = viewOptions.permissionUiMode !== "standalone" && node.status === "running" ? pendingPermission : void 0;
+  return /* @__PURE__ */ jsx10(
+    ToolCallShell,
+    {
+      status: node.status,
+      title,
+      progress: node.progress ?? void 0,
+      errorMessage,
+      layout,
+      permissionWait,
+      permissionUiMode: viewOptions.permissionUiMode,
+      children: showBody ? /* @__PURE__ */ jsx10("div", { className: "lax-tool-shell__body", children: /* @__PURE__ */ jsx10(BodyComponent, { ...bodyProps }) }) : null
+    }
+  );
+}
+
+// src/view/nodes/StepNode.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function StepCard({ nodeId }) {
+  const node = useNodeTyped(nodeId, "step");
+  if (!node) return null;
+  return /* @__PURE__ */ jsx11("details", { className: "lax-step-card", "data-status": node.status, children: /* @__PURE__ */ jsx11("summary", { className: "lax-step-card__summary", children: node.label }) });
+}
+
+// src/view/nodes/ErrorNode.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function ErrorCard({ nodeId }) {
+  const node = useNodeTyped(nodeId, "error");
+  if (!node) return null;
+  return /* @__PURE__ */ jsxs9("div", { className: "lax-error-card", role: "alert", children: [
+    /* @__PURE__ */ jsx12("div", { className: "lax-error-card__message", children: node.message }),
+    node.errorType ? /* @__PURE__ */ jsx12("div", { className: "lax-error-card__type", children: node.errorType }) : null
+  ] });
+}
+
+// src/view/nodes/UnknownNode.tsx
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+function UnknownCard({ nodeId }) {
+  const node = useNodeTyped(nodeId, "unknown");
+  if (!node) return null;
+  return /* @__PURE__ */ jsxs10("div", { className: "lax-unknown-card", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "lax-unknown-card__type", children: [
+      "Unknown: ",
+      node.eventType
+    ] }),
+    /* @__PURE__ */ jsx13("pre", { className: "lax-unknown-card__data", children: JSON.stringify(node.rawData, null, 2) })
+  ] });
+}
+
+// src/view/nodes/PermissionNode.tsx
+import { useState as useState7 } from "react";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+function PermissionCard({ nodeId }) {
+  const node = useNodeTyped(nodeId, "permission");
+  const bus = useInteractionBus();
+  const [resolvedLocally, setResolvedLocally] = useState7(false);
+  if (!node) return null;
+  const pending = node.status === "pending" && !resolvedLocally;
+  const onAllow = () => {
+    void bus.resolvePermission({ requestId: node.requestId, allow: true });
+    setResolvedLocally(true);
+  };
+  const onDeny = () => {
+    void bus.resolvePermission({ requestId: node.requestId, allow: false });
+    setResolvedLocally(true);
+  };
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: "lax-permission-card",
+      "data-status": pending ? "pending" : "resolved",
+      "data-request-id": node.requestId,
+      children: [
+        /* @__PURE__ */ jsxs11("div", { className: "lax-permission-card__header", children: [
+          /* @__PURE__ */ jsx14("span", { className: "lax-permission-card__label", children: "Permission" }),
+          /* @__PURE__ */ jsx14("span", { className: "lax-permission-card__tool", children: node.toolName })
+        ] }),
+        /* @__PURE__ */ jsx14("div", { className: "lax-permission-card__message", children: node.message }),
+        node.askPrompt && node.askPrompt !== node.message ? /* @__PURE__ */ jsx14("div", { className: "lax-permission-card__prompt", children: node.askPrompt }) : null,
+        pending ? /* @__PURE__ */ jsxs11("div", { className: "lax-permission-card__actions", children: [
+          /* @__PURE__ */ jsx14("button", { type: "button", className: "lax-permission-card__allow", onClick: onAllow, children: "Allow" }),
+          /* @__PURE__ */ jsx14("button", { type: "button", className: "lax-permission-card__deny", onClick: onDeny, children: "Deny" })
+        ] }) : /* @__PURE__ */ jsx14("div", { className: "lax-permission-card__resolved", children: "Resolved" })
+      ]
+    }
+  );
+}
+
+// src/view/nodes/MemorySavedNode.tsx
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+function MemorySavedRow({ nodeId }) {
+  const node = useNodeTyped(nodeId, "memory_saved");
+  if (!node) return null;
+  const hasPaths = node.writtenPaths.length > 0;
+  return /* @__PURE__ */ jsxs12(
+    "details",
+    {
+      className: "lax-memory-saved",
+      "data-testid": "lax-memory-saved",
+      "data-node-id": nodeId,
+      children: [
+        /* @__PURE__ */ jsxs12("summary", { className: "lax-memory-saved__summary", children: [
+          /* @__PURE__ */ jsx15("span", { className: "lax-memory-saved__icon", "aria-hidden": "true", children: "\u{1F4BE}" }),
+          /* @__PURE__ */ jsx15("span", { className: "lax-memory-saved__hint", children: node.displayHint })
+        ] }),
+        hasPaths ? /* @__PURE__ */ jsx15("ul", { className: "lax-memory-saved__paths", children: node.writtenPaths.map((p) => /* @__PURE__ */ jsx15("li", { className: "lax-memory-saved__path", children: /* @__PURE__ */ jsx15("code", { children: p }) }, p)) }) : null
+      ]
+    }
+  );
+}
+
+// src/view/NodeRegistry.ts
+var DEFAULT_WIDGETS = /* @__PURE__ */ new Map([
+  ["text", TextBubble],
+  ["reasoning", ReasoningBubble],
+  ["tool_call", ToolCallCard],
+  ["step", StepCard],
+  ["error", ErrorCard],
+  ["unknown", UnknownCard],
+  ["permission", PermissionCard],
+  ["memory_saved", MemorySavedRow]
+]);
+var NodeRegistry = class _NodeRegistry {
+  widgets;
+  constructor(widgets) {
+    this.widgets = widgets;
+  }
+  static default() {
+    return new _NodeRegistry(new Map(DEFAULT_WIDGETS));
+  }
+  override(kind, widget) {
+    const next = new Map(this.widgets);
+    next.set(kind, widget);
+    return new _NodeRegistry(next);
+  }
+  register(kind, widget) {
+    return this.override(kind, widget);
+  }
+  get(kind) {
+    return this.widgets.get(kind);
+  }
+  has(kind) {
+    return this.widgets.has(kind);
+  }
+};
+
+// src/view/defaultRegistry.ts
+function createDefaultRegistry() {
+  return NodeRegistry.default();
+}
+
+// src/core/sessionStore.ts
+import { createStore } from "zustand/vanilla";
+
+// src/core/dedupe.ts
+function shouldSkipDuplicateEvent(seenEventIds, sseEventId) {
+  if (!sseEventId) return false;
+  return seenEventIds.has(sseEventId);
+}
+function markEventIdSeen(seenEventIds, sseEventId) {
+  if (sseEventId) seenEventIds.add(sseEventId);
+}
+
+// src/core/sessionStore.ts
+var DEFAULT_MAX_SESSIONS = 10;
+function touchOrder(order, sessionId) {
+  return [...order.filter((id) => id !== sessionId), sessionId];
+}
+function safeReduce(tree, event, eventIndex, options) {
+  try {
+    return reduceTree(tree, event, eventIndex, options);
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    const stack = err instanceof Error ? err.stack : void 0;
+    if (import.meta.env?.DEV) {
+      console.error("[langchain_agentx_stream_ui] reducer error:", err);
+    }
+    const reducerError = {
+      eventIndex,
+      eventType: event.event_type,
+      message,
+      stack
+    };
+    return {
+      ...tree,
+      internalErrors: [...tree.internalErrors, reducerError]
+    };
+  }
+}
+function evictSessions(sessions, order, maxSessions, activeSessionId) {
+  let nextSessions = { ...sessions };
+  let nextOrder = [...order];
+  while (nextOrder.length > maxSessions) {
+    const candidate = nextOrder.find((id) => id !== activeSessionId) ?? nextOrder[0];
+    if (!candidate) break;
+    const { [candidate]: _removed, ...rest } = nextSessions;
+    nextSessions = rest;
+    nextOrder = nextOrder.filter((id) => id !== candidate);
+  }
+  return { sessions: nextSessions, order: nextOrder };
+}
+function createMultiSessionStore(options) {
+  const maxSessions = options?.maxSessions ?? DEFAULT_MAX_SESSIONS;
+  const reduceOpts = {
+    tierOverrides: options?.tierOverrides,
+    collectDebug: options?.debug === true
+  };
+  const replayOpts = {
+    tierOverrides: options?.tierOverrides,
+    collectDebug: options?.debug === true
+  };
+  const seenBySession = /* @__PURE__ */ new Map();
+  function getSeenSet(sessionId) {
+    let set = seenBySession.get(sessionId);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      seenBySession.set(sessionId, set);
+    }
+    return set;
+  }
+  return createStore((set, get) => ({
+    sessions: {},
+    activeSessionId: options?.activeSessionId ?? null,
+    order: [],
+    getSessionTree(sessionId) {
+      return get().sessions[sessionId]?.tree;
+    },
+    ensureSession(sessionId, initialEvents) {
+      const state = get();
+      if (state.sessions[sessionId]) return;
+      const tree = initialEvents && initialEvents.length > 0 ? replayEvents(initialEvents, replayOpts) : createEmptyTree();
+      const slice = {
+        tree,
+        eventCount: initialEvents?.length ?? 0
+      };
+      let order = touchOrder(state.order, sessionId);
+      let sessions = { ...state.sessions, [sessionId]: slice };
+      ({ sessions, order } = evictSessions(sessions, order, maxSessions, state.activeSessionId));
+      set({
+        sessions,
+        order,
+        activeSessionId: state.activeSessionId ?? sessionId
+      });
+    },
+    applyEvent(sessionId, event, ctx) {
+      const sseEventId = ctx?.sseEventId;
+      const seen = getSeenSet(sessionId);
+      if (shouldSkipDuplicateEvent(seen, sseEventId)) return;
+      const state = get();
+      let slice = state.sessions[sessionId];
+      if (!slice) {
+        get().ensureSession(sessionId);
+        slice = get().sessions[sessionId];
+      }
+      const reduced = safeReduce(slice.tree, event, slice.eventCount, reduceOpts);
+      const nextTree = sseEventId ? { ...reduced, meta: { ...reduced.meta, lastEventId: sseEventId } } : reduced;
+      const nextSlice = {
+        tree: nextTree,
+        eventCount: slice.eventCount + 1
+      };
+      markEventIdSeen(seen, sseEventId);
+      let sessions = { ...state.sessions, [sessionId]: nextSlice };
+      let order = touchOrder(state.order, sessionId);
+      ({ sessions, order } = evictSessions(sessions, order, maxSessions, state.activeSessionId));
+      set({ sessions, order });
+    },
+    applyEvents(sessionId, events) {
+      for (const event of events) {
+        get().applyEvent(sessionId, event);
+      }
+    },
+    setActiveSessionId(id) {
+      set({ activeSessionId: id });
+    },
+    removeSession(sessionId) {
+      const state = get();
+      if (!state.sessions[sessionId]) return;
+      seenBySession.delete(sessionId);
+      const { [sessionId]: _removed, ...sessions } = state.sessions;
+      const order = state.order.filter((id) => id !== sessionId);
+      const activeSessionId = state.activeSessionId === sessionId ? order[order.length - 1] ?? null : state.activeSessionId;
+      set({ sessions, order, activeSessionId });
+    },
+    replaySession(sessionId, events) {
+      const tree = replayEvents(events, replayOpts);
+      const slice = { tree, eventCount: events.length };
+      const state = get();
+      let order = touchOrder(state.order, sessionId);
+      let sessions = { ...state.sessions, [sessionId]: slice };
+      ({ sessions, order } = evictSessions(sessions, order, maxSessions, state.activeSessionId));
+      set({ sessions, order });
+    }
+  }));
+}
+function createActiveSessionBridge(multiStore) {
+  const bridge = createStore(() => ({
+    tree: createEmptyTree(),
+    eventCount: 0,
+    applyEvent(event, ctx) {
+      const id = multiStore.getState().activeSessionId;
+      if (id) multiStore.getState().applyEvent(id, event, ctx);
+    },
+    applyEvents(events) {
+      const id = multiStore.getState().activeSessionId;
+      if (id) multiStore.getState().applyEvents(id, events);
+    },
+    reset() {
+      const id = multiStore.getState().activeSessionId;
+      if (id) multiStore.getState().replaySession(id, []);
+    }
+  }));
+  const sync = () => {
+    const { activeSessionId, sessions } = multiStore.getState();
+    const slice = activeSessionId ? sessions[activeSessionId] : void 0;
+    bridge.setState({
+      tree: slice?.tree ?? createEmptyTree(),
+      eventCount: slice?.eventCount ?? 0
+    });
+  };
+  multiStore.subscribe(sync);
+  sync();
+  return bridge;
+}
+
+// src/view/MultiAgentSession.tsx
+import { useEffect as useEffect7, useMemo as useMemo3, useRef as useRef5 } from "react";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+function DebugPanel() {
+  const status = useSessionStatus();
+  const errors = useInternalErrors();
+  if (errors.length === 0) return null;
+  return /* @__PURE__ */ jsxs13("div", { className: "lax-debug-panel", "data-testid": "lax-debug-panel", children: [
+    /* @__PURE__ */ jsxs13("div", { children: [
+      "status: ",
+      status
+    ] }),
+    /* @__PURE__ */ jsx16("ul", { children: errors.map((err, i) => /* @__PURE__ */ jsxs13("li", { children: [
+      "[",
+      err.eventType,
+      "] ",
+      err.message
+    ] }, `${err.eventIndex}-${i}`)) })
+  ] });
+}
+function MultiAgentSession({
+  sessions,
+  activeSessionId: controlledActiveId,
+  defaultActiveSessionId,
+  onActiveSessionChange,
+  maxSessions,
+  tierOverrides,
+  debug = false,
+  registry,
+  onError,
+  virtualized = false,
+  virtualizeThreshold,
+  interactionBus,
+  toolDisplayRegistry,
+  defaultBodyMode = "preview",
+  groupParallelTools = false,
+  permissionUiMode = "standalone",
+  markdownRenderer,
+  children
+}) {
+  const multiStoreRef = useRef5(null);
+  const bridgeRef = useRef5(null);
+  if (multiStoreRef.current === null) {
+    const defaultId = defaultActiveSessionId ?? controlledActiveId ?? sessions[0]?.sessionId ?? null;
+    multiStoreRef.current = createMultiSessionStore({
+      maxSessions,
+      tierOverrides,
+      debug,
+      activeSessionId: defaultId
+    });
+    bridgeRef.current = createActiveSessionBridge(multiStoreRef.current);
+    for (const cfg of sessions) {
+      multiStoreRef.current.getState().ensureSession(cfg.sessionId, cfg.initialEvents);
+    }
+  }
+  const registryRef = useMemo3(() => registry ?? createDefaultRegistry(), [registry]);
+  const busRef = useMemo3(
+    () => interactionBus ?? getNoopInteractionBus(),
+    [interactionBus]
+  );
+  const toolDisplayRef = useMemo3(
+    () => ({
+      registry: toolDisplayRegistry ?? createDefaultToolRegistry(),
+      defaultBodyMode
+    }),
+    [toolDisplayRegistry, defaultBodyMode]
+  );
+  const sessionViewRef = useMemo3(
+    () => ({
+      ...DEFAULT_SESSION_VIEW_OPTIONS,
+      groupParallelTools,
+      permissionUiMode,
+      verboseReasoning: debug
+    }),
+    [groupParallelTools, permissionUiMode, debug]
+  );
+  useEffect7(() => {
+    if (controlledActiveId === void 0) return;
+    multiStoreRef.current.getState().setActiveSessionId(controlledActiveId);
+  }, [controlledActiveId]);
+  useEffect7(() => {
+    if (!onActiveSessionChange) return;
+    return multiStoreRef.current.subscribe((state) => {
+      onActiveSessionChange(state.activeSessionId);
+    });
+  }, [onActiveSessionChange]);
+  useEffect7(() => {
+    const multiStore = multiStoreRef.current;
+    const controllers = sessions.map((cfg) => {
+      const controller = new AbortController();
+      multiStore.getState().ensureSession(cfg.sessionId, cfg.initialEvents);
+      void cfg.source.start((event, ctx) => {
+        multiStore.getState().applyEvent(cfg.sessionId, event, ctx);
+      }, controller.signal).catch((err) => {
+        const error = err instanceof Error ? err : new Error(String(err));
+        onError?.(error, cfg.sessionId);
+      });
+      return controller;
+    });
+    return () => {
+      for (const c of controllers) c.abort();
+    };
+  }, [sessions, onError]);
+  return /* @__PURE__ */ jsx16(MultiSessionStoreContext.Provider, { value: multiStoreRef.current, children: /* @__PURE__ */ jsx16(SessionStoreContext.Provider, { value: bridgeRef.current, children: /* @__PURE__ */ jsx16(InteractionBusContext.Provider, { value: busRef, children: /* @__PURE__ */ jsx16(NodeRegistryContext.Provider, { value: registryRef, children: /* @__PURE__ */ jsx16(MarkdownRendererContext.Provider, { value: markdownRenderer, children: /* @__PURE__ */ jsx16(ToolDisplayOptionsContext.Provider, { value: toolDisplayRef, children: /* @__PURE__ */ jsx16(SessionViewOptionsContext.Provider, { value: sessionViewRef, children: /* @__PURE__ */ jsxs13("div", { className: "lax-agent-session lax-multi-agent-session", "data-testid": "lax-multi-agent-session", children: [
+    children ?? /* @__PURE__ */ jsx16(
+      SessionTimeline,
+      {
+        virtualized,
+        virtualizeThreshold,
+        groupParallelTools
+      }
+    ),
+    debug ? /* @__PURE__ */ jsx16(DebugPanel, {}) : null
+  ] }) }) }) }) }) }) }) });
+}
+
+export {
+  shouldSkipDuplicateEvent,
+  markEventIdSeen,
+  configureMermaid,
+  MermaidDiagram,
+  PlantUMLBlock,
+  configurePlantumlServer,
+  PlantUMLDiagram,
+  RichMarkdown,
+  ReasoningBubble,
+  TextBubble,
+  ToolCallCard,
+  StepCard,
+  ErrorCard,
+  UnknownCard,
+  PermissionCard,
+  NodeRegistry,
+  createDefaultRegistry,
+  createMultiSessionStore,
+  createActiveSessionBridge,
+  MultiAgentSession
+};
+//# sourceMappingURL=chunk-A4W6B7C3.js.map