@iloveagents/foundry-web-shell 0.3.1 → 0.5.0

package/src/__tests__/wrapper-order.test.tsx

@@ -1,162 +0,0 @@
-/**
- * Wrapper-order test.
- *
- * Asserts the contractual outer→inner ordering: BrowserRouter wraps
- * AuthProvider wraps [module wrappers] wraps AGUIRuntimeProvider wraps
- * Routes. Uses a depth-marker context — each layer increments the depth
- * via a Provider, and a probe component reads the depth at render time.
- */
-import { describe, expect, it, vi } from "vitest";
-import { render, waitFor } from "@testing-library/react";
-import { createContext, useContext, type ReactNode } from "react";
-import { useLocation } from "react-router";
-import { defineChatModule, type ChatModule, type ShellPage } from "../types.ts";
-
-const DepthContext = createContext<number>(-1);
-
-function makeWrapper(label: string, expectedDepth: number) {
-  return function Wrap({ children }: { children: ReactNode }) {
-    const incoming = useContext(DepthContext);
-    // Each wrapper asserts its own depth via the test contract.
-    // Using a side-effect ref so the assertion runs even if children
-    // never resolve (e.g. routing to a no-match path).
-    seen[label] = incoming;
-    return (
-      <DepthContext.Provider value={incoming + 1}>{children}</DepthContext.Provider>
-    );
-  };
-}
-
-const seen: Record<string, number> = {};
-
-// Probe inside the route confirms BrowserRouter is reachable + reports the
-// final inner depth.
-function RouteProbe() {
-  const depth = useContext(DepthContext);
-  const location = useLocation();
-  seen["route-probe"] = depth;
-  seen["route-pathname"] = location.pathname.length;
-  return <div data-testid="route-probe">probe</div>;
-}
-
-// Mock the web-ui surface the shell consumes. AuthProvider +
-// AGUIRuntimeProvider are wrapped with the depth context so the test
-// can probe their nesting order. Don't spread the real module — its
-// stores call window.matchMedia at import time and jsdom doesn't have
-// that.
-vi.mock("@iloveagents/foundry-web-ui", () => ({
-  AuthProvider: ({ children }: { children: ReactNode }) => {
-    const incoming = useContext(DepthContext);
-    seen["auth-provider"] = incoming;
-    return (
-      <DepthContext.Provider value={incoming + 1}>{children}</DepthContext.Provider>
-    );
-  },
-  AGUIRuntimeProvider: ({ children }: { children: ReactNode }) => {
-    const incoming = useContext(DepthContext);
-    seen["agui-runtime"] = incoming;
-    return (
-      <DepthContext.Provider value={incoming + 1}>{children}</DepthContext.Provider>
-    );
-  },
-  Sidebar: () => null,
-  ChatHeader: () => null,
-  ChatBubble: () => null,
-  ChatContent: () => null,
-  ToolPanelLayout: ({ children }: { children: ReactNode }) => <>{children}</>,
-  ThemeRuntimeProvider: ({ children }: { children: ReactNode }) => <>{children}</>,
-  ThemeScope: ({ children }: { children: ReactNode }) => <>{children}</>,
-  ThemeDocumentMetadata: () => null,
-  GlobalSelectionPopover: () => null,
-  ContextPins: () => null,
-  TooltipIconButton: ({ children }: { children: ReactNode }) => <>{children}</>,
-  findNavItem: () => undefined,
-  useAppStore: (selector: (s: any) => unknown) =>
-    selector({ setCurrentPage: () => undefined, setNavContext: () => undefined }),
-  useNavStore: (selector: (s: any) => unknown) => selector({ config: [] }),
-  useChatBubbleStore: Object.assign(
-    (selector: (s: any) => unknown) =>
-      selector({
-        isExpanded: false,
-        showPagePanel: false,
-        togglePagePanel: () => undefined,
-      }),
-    { getState: () => ({ close: () => undefined }) },
-  ),
-  useThemeStore: (selector: (s: any) => unknown) => selector({ mode: "system" }),
-}));
-
-vi.mock("@iloveagents/foundry-web-primitives", () => ({
-  cn: (...classes: unknown[]) => classes.filter(Boolean).join(" "),
-}));
-
-vi.mock("@iloveagents/foundry-agent", () => ({
-  createServiceFetch: () => fetch,
-}));
-
-vi.mock("@iloveagents/foundry-agent/msal", () => ({
-  authStore: { getState: () => ({ getAccessToken: () => Promise.resolve("") }) },
-}));
-
-import { ShellApp } from "../shell-app.tsx";
-import type { AuthAdapter } from "../types.ts";
-// Imported AFTER vi.mock so this resolves to the mocked AuthProvider.
-import { AuthProvider as MockedAuthProvider } from "@iloveagents/foundry-web-ui";
-
-describe("Shell wrapper ordering contract", () => {
-  it("nests BrowserRouter > AuthProvider > [module wrappers] > AGUIRuntimeProvider > Routes", async () => {
-    Object.keys(seen).forEach((k) => delete seen[k]);
-
-    const ModuleWrapperA = makeWrapper("module-a", 2);
-    const ModuleWrapperB = makeWrapper("module-b", 3);
-
-    const m: ChatModule = defineChatModule({
-      name: "test",
-      wrappers: [ModuleWrapperA, ModuleWrapperB],
-    });
-
-    const homePage: ShellPage = {
-      path: "/",
-      element: <RouteProbe />,
-    };
-
-    // The auth adapter under test wraps children with the mocked
-    // AuthProvider from web-ui (which counts depth). In production
-    // defaultAuthAdapter does the same — this just makes the contract
-    // explicit for the test.
-    const auth: AuthAdapter = {
-      Provider: ({ children }: { children: ReactNode }) => (
-        // The vi.mock factory above replaces this provider's runtime impl with one
-        // that ignores `config`, but TypeScript only sees the real component's
-        // signature. Cast to satisfy the prop requirement without a real config.
-        <MockedAuthProvider config={{} as never}>{children}</MockedAuthProvider>
-      ),
-    };
-
-    render(
-      <ShellApp
-        modules={[m]}
-        pages={[homePage]}
-        baseThemeLayers={[]}
-        authProvider={auth}
-        agentFetch={fetch}
-      />,
-    );
-
-    // Wait for the route probe to render.
-    await waitFor(() => expect(seen["route-probe"]).toBeDefined());
-
-    // Layer depths (each Provider sees the incoming depth, then adds 1).
-    // BrowserRouter does not use DepthContext, so the first layer to bump
-    // the depth is AuthProvider (sees depth -1, advances to 0).
-    expect(seen["auth-provider"]).toBe(-1);
-    // ProbeWrapper (the test mock around the AuthProvider mock) ran AFTER
-    // AuthProvider — module wrappers nest INSIDE AuthProvider.
-    expect(seen["module-a"]).toBe(0);
-    expect(seen["module-b"]).toBe(1);
-    // AGUIRuntimeProvider nests INSIDE module wrappers.
-    expect(seen["agui-runtime"]).toBe(2);
-    // RouteProbe nests INSIDE AGUIRuntimeProvider.
-    expect(seen["route-probe"]).toBe(3);
-  });
-});

package/src/auth-default.tsx

@@ -1,78 +0,0 @@
-import type { FC, ReactNode } from "react";
-import { AuthProvider } from "@iloveagents/foundry-web-ui";
-import type { MsalAuthConfig } from "@iloveagents/foundry-agent/msal";
-import type { AuthAdapter } from "./types.ts";
-import { runtimeConfig } from "./runtime-config.ts";
-
-
-
-interface AuthConfigErrorProps {
-  missingKeys: string[];
-}
-
-function AuthConfigError({ missingKeys }: AuthConfigErrorProps) {
-  return (
-    <div className="flex min-h-dvh items-center justify-center bg-background px-6 text-center">
-      <div className="max-w-md rounded-2xl border border-border bg-card px-6 py-5 shadow-sm">
-        <h1 className="text-lg font-semibold text-foreground">Authentication unavailable</h1>
-        <p className="mt-2 text-sm text-muted-foreground">
-          Missing required MSAL environment variables: {missingKeys.join(", ")}.
-        </p>
-      </div>
-    </div>
-  );
-}
-
-/**
- * Read MSAL configuration. Prefers runtime config (`window.__APP_CONFIG__`,
- * injected by the container at startup) and falls back to build-time Vite env
- * (`import.meta.env`) for local dev — see {@link runtimeConfig}. Returns the
- * resolved config or the list of missing keys; the shell renders
- * <AuthConfigError /> when any key is missing.
- */
-function readMsalConfig(): MsalAuthConfig | { missing: string[] } {
-  const clientId = runtimeConfig("VITE_MSAL_CLIENT_ID");
-  const authority = runtimeConfig("VITE_MSAL_AUTHORITY");
-  const apiScope = runtimeConfig("VITE_MSAL_API_SCOPE");
-  const missing = [
-    !clientId ? "VITE_MSAL_CLIENT_ID" : null,
-    !authority ? "VITE_MSAL_AUTHORITY" : null,
-    !apiScope ? "VITE_MSAL_API_SCOPE" : null,
-  ].filter((v): v is string => v !== null);
-  if (missing.length > 0) return { missing };
-  return {
-    clientId,
-    authority,
-    apiScope,
-    redirectUri: window.location.origin,
-  };
-}
-
-/**
- * Default MSAL-backed auth adapter. Reads VITE_MSAL_* from runtime config
- * (`window.__APP_CONFIG__`) with `import.meta.env` fallback for local dev.
- * Customers override via `bootstrapShell({ authProvider: { Provider: ... } })`
- * for tests or non-MSAL deployments.
- */
-export const defaultAuthAdapter: AuthAdapter = {
-  Provider: ({ children }: { children: ReactNode }) => {
-    const result = readMsalConfig();
-    if ("missing" in result) {
-      return <AuthConfigError missingKeys={result.missing} />;
-    }
-    return <AuthProvider config={result}>{children}</AuthProvider>;
-  },
-};
-
-/**
- * Tiny wrapper that picks the default or override adapter and renders it.
- * Kept as a separate component so the wrapper-order test can probe it
- * easily.
- */
-export const ShellAuth: FC<{ adapter?: AuthAdapter; children: ReactNode }> = ({
-  adapter,
-  children,
-}) => {
-  const Adapter = (adapter ?? defaultAuthAdapter).Provider;
-  return <Adapter>{children}</Adapter>;
-};

package/src/bootstrap-shell.tsx

@@ -1,49 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { ShellApp } from "./shell-app.tsx";
-import type { BootstrapShellOptions } from "./types.ts";
-
-/**
- * Mount the agent UI into the DOM.
- *
- * Composition pipeline:
- *   1. Run each module's `fetchInterceptor` (BEFORE createRoot so window.fetch
- *      wrappers are in place by the first React render).
- *   2. createRoot on `rootElement` (default: #root).
- *   3. Wrap `<ShellApp>` in <StrictMode> unless `strictMode === false`.
- */
-export function bootstrapShell(opts: BootstrapShellOptions = {}): void {
-  const {
-    modules = [],
-    pages = [],
-    theme = [],
-    authProvider,
-    strictMode = true,
-    rootElement,
-  } = opts;
-
-  // 1. Install module fetch interceptors before React mounts.
-  for (const m of modules) {
-    m.fetchInterceptor?.();
-  }
-
-  // 2. Resolve mount target.
-  const root = rootElement ?? document.getElementById("root");
-  if (!root) {
-    throw new Error(
-      "[@iloveagents/foundry-web-shell] No mount target — pass `rootElement` or ensure a #root element exists.",
-    );
-  }
-
-  const tree = (
-    <ShellApp
-      modules={modules}
-      pages={pages}
-      baseThemeLayers={theme}
-      authProvider={authProvider}
-    />
-  );
-
-  // 3. Mount with StrictMode by default.
-  createRoot(root).render(strictMode ? <StrictMode>{tree}</StrictMode> : tree);
-}

package/src/index.ts

@@ -1,14 +0,0 @@
-export { bootstrapShell } from "./bootstrap-shell.tsx";
-export { ShellApp } from "./shell-app.tsx";
-export { ShellLayout } from "./shell-layout.tsx";
-export { defaultAuthAdapter, ShellAuth } from "./auth-default.tsx";
-export { defaultAgentFetch } from "./service-fetch-default.ts";
-export { runtimeConfig } from "./runtime-config.ts";
-export { defineChatModule } from "./types.ts";
-export type {
-  ChatModule,
-  ChatConversationConfig,
-  ShellPage,
-  AuthAdapter,
-  BootstrapShellOptions,
-} from "./types.ts";

package/src/shell-app.tsx

@@ -1,386 +0,0 @@
-import { type ReactNode, Suspense, useCallback, useMemo, useRef } from "react";
-import { BrowserRouter, Routes, Route, useLocation } from "react-router";
-import { AGUIRuntimeProvider } from "@iloveagents/foundry-web-ui";
-import type {
-  AGUIChatConversationFactoryArgs,
-  AGUIHistoryAdapterFactory,
-} from "@iloveagents/foundry-web-ui";
-import type { ThemeLayer } from "@iloveagents/foundry-web-ui";
-import type { ChatConversationConfig, ChatModule, AuthAdapter, ShellPage } from "./types.ts";
-import { ShellAuth } from "./auth-default.tsx";
-import { ShellLayout } from "./shell-layout.tsx";
-import { defaultAgentFetch } from "./service-fetch-default.ts";
-
-interface ShellAppProps {
-  modules: ChatModule[];
-  pages: ShellPage[];
-  baseThemeLayers: ThemeLayer[];
-  authProvider?: AuthAdapter;
-  /** Test seam — overrides defaultAgentFetch. */
-  agentFetch?: typeof fetch;
-}
-
-/**
- * Inner shell component — pure React (no `createRoot`). Imported by
- * `bootstrap-shell.tsx` for production and by `__tests__/` for assertions.
- *
- * Wrapper ordering is contractual; see `wrapper-order.test.tsx`.
- */
-export function ShellApp({
-  modules,
-  pages,
-  baseThemeLayers,
-  authProvider,
-  agentFetch,
-}: ShellAppProps) {
-  // Merge module pages with customer pages — customer wins on path collision
-  // (last-wins). Stable order: customer pages first (they appear in Routes
-  // before module pages, and React Router matches the FIRST matching route).
-  const mergedPages = useMemo(() => {
-    const seen = new Set(pages.map((p) => p.path));
-    const moduleRoutes: ShellPage[] = [];
-    for (const m of modules) {
-      for (const p of m.pages ?? []) {
-        if (!seen.has(p.path)) {
-          seen.add(p.path);
-          moduleRoutes.push(p);
-        }
-      }
-    }
-    return [...pages, ...moduleRoutes];
-  }, [pages, modules]);
-
-  // Compose module wrappers outer→inner from each module's array.
-  const wrappers = useMemo(() => {
-    const out: React.ComponentType<{ children: ReactNode }>[] = [];
-    for (const m of modules) {
-      for (const W of m.wrappers ?? []) out.push(W);
-    }
-    return out;
-  }, [modules]);
-
-  // Aggregate module toolUIs.
-  const toolUIs: ReactNode[] = [];
-  for (const m of modules) {
-    if (m.toolUIs) {
-      toolUIs.push(<ToolUIGroup key={m.name}>{m.toolUIs}</ToolUIGroup>);
-    }
-  }
-
-  const fetchFn = agentFetch ?? defaultAgentFetch;
-
-  // Aggregate chatConversation configs from all modules. First-match
-  // wins at URL-match time (rare to have more than one anyway).
-  const chatConversationConfigs = useMemo(
-    () => modules.flatMap((m) => (m.chatConversation ? [m.chatConversation] : [])),
-    [modules],
-  );
-
-  return (
-    <BrowserRouter>
-      <ShellAuth adapter={authProvider}>
-        <ComposedWrappers wrappers={wrappers}>
-          <ChatConversationAwareRuntime
-            fetchFn={fetchFn}
-            configs={chatConversationConfigs}
-            toolUIs={toolUIs}
-          >
-            <Suspense fallback={null}>
-              <Routes>
-                <Route element={<ShellLayout modules={modules} baseThemeLayers={baseThemeLayers} />}>
-                  {mergedPages.map((p) => (
-                    <Route key={p.path} path={p.path === "/" ? undefined : p.path} index={p.path === "/"} element={p.element} />
-                  ))}
-                </Route>
-              </Routes>
-            </Suspense>
-          </ChatConversationAwareRuntime>
-        </ComposedWrappers>
-      </ShellAuth>
-    </BrowserRouter>
-  );
-}
-
-/**
- * Reads the current pathname (only meaningful inside ``<BrowserRouter>``),
- * matches it against any module-declared :type:`ChatConversationConfig`,
- * and hands the matched config + URL-extracted id down into
- * :type:`AGUIRuntimeProvider` as a :type:`AGUIHistoryAdapterFactory`.
- *
- * Why a factory (not a pre-built adapter)
- * =======================================
- * The history adapter needs *both* the URL-extracted conversation id
- * (when present) *and* the AG-UI adapter's freshly-minted thread id
- * (always set — covers fresh chats). The AG-UI adapter only exists
- * once :type:`AGUIRuntimeProvider` mounts, so the factory is invoked
- * inside that mount with both pieces available. This makes "fresh
- * chats also persist" a built-in property of the contract, not an
- * afterthought.
- */
-function ChatConversationAwareRuntime({
-  children,
-  toolUIs,
-  fetchFn,
-  configs,
-}: {
-  children: ReactNode;
-  toolUIs: ReactNode[];
-  fetchFn: typeof fetch;
-  configs: ChatConversationConfig[];
-}) {
-  const { pathname } = useLocation();
-
-  // Pick the matching config (URL-pattern match) OR fall back to the
-  // first config registered — modules without a URL match still want
-  // their fresh-chat persistence. With ≥1 config the runtime always
-  // gets a factory; without configs it stays in the legacy in-memory
-  // mode.
-  const { config, urlMatch } = useMemo(() => {
-    for (const cfg of configs) {
-      const m = pathname.match(cfg.pathPattern);
-      if (m && m[1]) {
-        return { config: cfg, urlMatch: m[1] };
-      }
-    }
-    return { config: configs[0], urlMatch: undefined as string | undefined };
-  }, [pathname, configs]);
-
-  if (!config) {
-    // No chatConversation configs registered → legacy in-memory
-    // runtime, no history / no sticky concerns.
-    return (
-      <AGUIRuntimeProvider fetchFn={fetchFn}>
-        {toolUIs}
-        {children}
-      </AGUIRuntimeProvider>
-    );
-  }
-
-  // Per-config child component, KEYED by config identity. Why a
-  // key/child split: ``config.useStickyConversationId`` is optional.
-  // Calling it inline with the optional chain ``config?.useSticky?.()``
-  // would be a Rules-of-Hooks violation the moment a second
-  // ChatConversationConfig registers with different hook-shape — URL
-  // navigation flips which cfg matches, the hook count flips, React
-  // crashes. The key makes a config swap a full remount, which is a
-  // legitimate way to change the hook lineage without violating the
-  // rules. ``configIndex`` is stable per config because ``configs`` is
-  // memoised in ShellApp.
-  const configIndex = configs.indexOf(config);
-  if (config.useStickyConversationId) {
-    return (
-      <StickyAwareRuntime
-        key={`sticky:${configIndex}`}
-        config={config}
-        useSticky={config.useStickyConversationId}
-        urlMatch={urlMatch}
-        fetchFn={fetchFn}
-        toolUIs={toolUIs}
-      >
-        {children}
-      </StickyAwareRuntime>
-    );
-  }
-  return (
-    <UrlOnlyRuntime
-      key={`url:${configIndex}`}
-      config={config}
-      urlMatch={urlMatch}
-      fetchFn={fetchFn}
-      toolUIs={toolUIs}
-    >
-      {children}
-    </UrlOnlyRuntime>
-  );
-}
-
-interface ChildRuntimeProps {
-  config: ChatConversationConfig;
-  urlMatch: string | undefined;
-  fetchFn: typeof fetch;
-  toolUIs: ReactNode[];
-  children: ReactNode;
-}
-
-/**
- * Branch for configs that DECLARE :attr:`useStickyConversationId`.
- * Calls the hook unconditionally so React's hook-count invariant
- * holds across every render of this mount.
- */
-function StickyAwareRuntime({
-  config,
-  useSticky,
-  urlMatch,
-  fetchFn,
-  toolUIs,
-  children,
-}: ChildRuntimeProps & { useSticky: () => string | null }) {
-  const sticky = useSticky();
-  return (
-    <RuntimeBody
-      config={config}
-      sticky={sticky}
-      urlMatch={urlMatch}
-      fetchFn={fetchFn}
-      toolUIs={toolUIs}
-    >
-      {children}
-    </RuntimeBody>
-  );
-}
-
-/**
- * Branch for configs that DO NOT declare :attr:`useStickyConversationId`.
- * No hook is ever called for sticky state — the runtime threadId
- * follows URL match and the shell-minted fresh UUID only.
- */
-function UrlOnlyRuntime({ config, urlMatch, fetchFn, toolUIs, children }: ChildRuntimeProps) {
-  return (
-    <RuntimeBody
-      config={config}
-      sticky={null}
-      urlMatch={urlMatch}
-      fetchFn={fetchFn}
-      toolUIs={toolUIs}
-    >
-      {children}
-    </RuntimeBody>
-  );
-}
-
-/**
- * Shared rendering body — same useRef/useMemo/useCallback shape for
- * both branches. The hook lineage here is stable per mount because
- * the parent decides which branch (and which key) to use.
- */
-function RuntimeBody({
-  config,
-  sticky,
-  urlMatch,
-  fetchFn,
-  toolUIs,
-  children,
-}: ChildRuntimeProps & { sticky: string | null }) {
-  // Pre-mint a fresh UUID so the runtime's ``threadId`` is set from
-  // the very first render — never goes through ``undefined → defined``,
-  // which would otherwise force a remount of the assistant-ui runtime
-  // (and wipe in-flight messages) the moment the user sent their first
-  // message on a fresh chat. The backend collapse (``conversation_id ==
-  // agui_thread_id``) ensures the id the runtime uses from the start
-  // matches the row the lazy ``ensureConversationId`` creates — same
-  // value, no mid-conversation switch.
-  //
-  // Mint a new one only when the user actually starts a new thread:
-  // ``sticky`` transitions from a value back to ``null`` (the module
-  // clears it on the ``/`` "New Thread" landing).
-  const freshIdRef = useRef<string>(_genUuid());
-  const prevStickyRef = useRef<string | null>(sticky);
-  if (sticky === null && prevStickyRef.current !== null) {
-    // User just navigated back to "/" (New Thread). The previous chat
-    // is being abandoned; mint a fresh UUID for the next session.
-    freshIdRef.current = _genUuid();
-  }
-  prevStickyRef.current = sticky;
-
-  // Effective id seen by AGUIRuntimeProvider — always defined.
-  //
-  // Priority order matters and is intentional:
-  //   1. ``urlMatch`` — when the user is on ``/chat/<id>`` the URL is
-  //      ALWAYS the authoritative conversation. This MUST come before
-  //      ``sticky`` because of a stale-render race on cross-chat
-  //      navigation:
-  //        - User is on ``/chat/A``. ``active-chat-store`` holds ``A``.
-  //          So ``sticky = A``.
-  //        - User clicks a Recents row for ``B`` →
-  //          ``react-router`` updates pathname to ``/chat/B``.
-  //        - On the synchronous render that follows, ``urlMatch`` is
-  //          ``B`` (read from ``useLocation``) but
-  //          ``useTrackActiveChatFromUrl``'s ``useEffect`` hasn't run
-  //          yet — so ``sticky`` is still ``A``.
-  //        - With ``sticky ?? urlMatch`` we'd compute
-  //          ``effectiveThreadId = A``, bind the AG-UI adapter to ``A``,
-  //          and the first message the user sends would create a NEW
-  //          row at ``A``'s old thread id while the URL says ``B``.
-  //          Symptoms: TWO active dots in the sidebar (URL highlights
-  //          row ``B``, the new row's id activates the dot on a
-  //          freshly-appeared "Untitled chat"); resume appears to
-  //          mint a new conversation; messages land on the wrong row.
-  //      Putting ``urlMatch`` first eliminates the race entirely: when
-  //      the URL says we're on chat ``B``, the runtime targets ``B``
-  //      from the very first render, regardless of stale store state.
-  //   2. ``sticky`` — for non-chat URLs (``/spaces``, ``/tasks`` …)
-  //      ``urlMatch`` is ``undefined``. ``sticky`` keeps the popout
-  //      chat "live" while the user browses elsewhere.
-  //   3. ``freshIdRef.current`` — brand-new chat on ``/`` with no
-  //      sticky and no URL match. Pre-minted so the runtime's
-  //      ``threadId`` is defined from the first render (no
-  //      ``undefined → defined`` remount of assistant-ui).
-  const effectiveThreadId: string = urlMatch ?? sticky ?? freshIdRef.current;
-
-  const historyAdapterFactory = useCallback<AGUIHistoryAdapterFactory>(
-    (args: AGUIChatConversationFactoryArgs) =>
-      config.buildHistoryAdapter({
-        urlMatch: args.urlMatch,
-        aguiThreadId: args.aguiThreadId,
-      }),
-    [config],
-  );
-
-  return (
-    <AGUIRuntimeProvider
-      fetchFn={fetchFn}
-      threadId={effectiveThreadId}
-      // ``urlMatch`` carries the URL-derived resume signal verbatim.
-      // ``effectiveThreadId`` is always defined (sticky / urlMatch /
-      // freshly minted UUID) so passing it in place of ``urlMatch``
-      // would erase the "fresh vs resumed" distinction the history
-      // adapter needs to decide whether to load() past messages.
-      urlMatch={urlMatch}
-      historyAdapterFactory={historyAdapterFactory}
-    >
-      {toolUIs}
-      {children}
-    </AGUIRuntimeProvider>
-  );
-}
-
-function ToolUIGroup({ children }: { children: ReactNode }) {
-  return <>{children}</>;
-}
-
-/**
- * RFC 4122 v4 UUID. Use ``crypto.randomUUID`` when available; fall
- * back to a math-random shim for the rare environments without it
- * (older Safari on non-HTTPS dev hosts). The shim is fine for our
- * use — these UUIDs identify a conversation row in our backend; they
- * don't need cryptographic strength.
- */
-function _genUuid(): string {
-  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
-    return crypto.randomUUID();
-  }
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
-    const r = (Math.random() * 16) | 0;
-    const v = c === "x" ? r : (r & 0x3) | 0x8;
-    return v.toString(16);
-  });
-}
-
-interface ComposedWrappersProps {
-  wrappers: React.ComponentType<{ children: ReactNode }>[];
-  children: ReactNode;
-}
-
-/**
- * Apply the wrappers array outer→inner. wrappers[0] is the outermost; the
- * last entry is closest to children. Pure render-time composition; no state.
- */
-function ComposedWrappers({ wrappers, children }: ComposedWrappersProps) {
-  let tree: ReactNode = children;
-  // Iterate in reverse so wrappers[0] ends up outermost.
-  for (let i = wrappers.length - 1; i >= 0; i--) {
-    const W = wrappers[i];
-    tree = <W>{tree}</W>;
-  }
-  return <>{tree}</>;
-}