@cosmoops/connect-sdk 0.7.0 → 0.9.0

package/dist/cjs/client/components/ask-ai.js

@@ -0,0 +1,334 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectAskAi = ConnectAskAi;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@heroui/react");
+const lucide_react_1 = require("lucide-react");
+const streamdown_1 = require("streamdown");
+const provider_js_1 = require("../provider.js");
+const ai_widgets_js_1 = require("./ai-widgets.js");
+const PANEL_WIDTH = "w-full lg:w-[400px]";
+/**
+ * `blurIn` over the default `fadeIn`: Gemini arrives in bursts rather than an
+ * even token drip, and a blur masks a batch landing at once where a plain
+ * opacity fade just flickers. Hoisted to module scope because Streamdown
+ * compares `animated` by reference.
+ */
+const ANIMATED = {
+    animation: "blurIn",
+    duration: 220,
+    easing: "ease-out",
+    sep: "word",
+};
+/**
+ * The "working on it" state - a highlight sweeping through the word rather
+ * than a spinner beside it. `connect-ai-shimmer` is defined in the SDK's
+ * `theme.css`, which every application platform already imports.
+ */
+function ThinkingShimmer({ label = "Thinking" }) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: "connect-ai-shimmer text-xs font-medium", role: "status", children: label }));
+}
+/** Open while it streams, collapsed once the answer lands. */
+function ThinkingDisclosure({ text, isStreaming }) {
+    if (!text)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("details", { className: "group mb-2", open: isStreaming, children: [(0, jsx_runtime_1.jsxs)("summary", { className: "flex cursor-pointer list-none items-center gap-1 text-[11px] font-medium text-muted select-none hover:text-foreground", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Brain, { className: "size-3" }), isStreaming ? (0, jsx_runtime_1.jsx)(ThinkingShimmer, {}) : "Thinking", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "size-3 transition-transform group-open:rotate-180" })] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-1.5 border-s-2 border-border ps-2 text-xs whitespace-pre-wrap text-muted italic", children: text })] }));
+}
+/**
+ * Structural guards, one per widget.
+ *
+ * The published package carries no schema validator, and should not gain one
+ * for this - so each tool input is checked for the fields its renderer would
+ * otherwise crash on. Anything that fails renders nothing: the model's prose
+ * sits around it either way, so a missing widget reads as terse rather than
+ * broken, which is the better failure.
+ */
+const isArray = (value) => Array.isArray(value) && value.length > 0;
+const field = (input, key) => typeof input === "object" && input !== null ? input[key] : undefined;
+function renderTool(name, input, renderMarkdown) {
+    switch (name) {
+        case "showTable":
+            return isArray(field(input, "columns")) && Array.isArray(field(input, "rows")) ? ((0, jsx_runtime_1.jsx)(ai_widgets_js_1.AiTable, { ...input })) : null;
+        case "showChart":
+            return isArray(field(input, "series")) ? (0, jsx_runtime_1.jsx)(ai_widgets_js_1.AiChart, { ...input }) : null;
+        case "showMetrics":
+            return isArray(field(input, "metrics")) ? (0, jsx_runtime_1.jsx)(ai_widgets_js_1.AiMetrics, { ...input }) : null;
+        case "showTimeline":
+            return isArray(field(input, "events")) ? (0, jsx_runtime_1.jsx)(ai_widgets_js_1.AiTimeline, { ...input }) : null;
+        case "showDetails":
+            return isArray(field(input, "fields")) ? (0, jsx_runtime_1.jsx)(ai_widgets_js_1.AiDetails, { ...input }) : null;
+        case "showSteps":
+            return isArray(field(input, "steps")) ? ((0, jsx_runtime_1.jsx)(ai_widgets_js_1.AiSteps, { ...input, renderDetail: renderMarkdown })) : null;
+        case "showSources":
+            return isArray(field(input, "sources")) ? (0, jsx_runtime_1.jsx)(ai_widgets_js_1.AiSources, { ...input }) : null;
+        default:
+            return null;
+    }
+}
+/** Placeholder while a tool's arguments are still arriving, sized like the real thing. */
+function ToolSkeleton() {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "my-3 flex h-24 animate-pulse items-center justify-center rounded-lg border border-border bg-surface-secondary", role: "status", "aria-label": "Preparing result", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { className: "size-4 text-accent/60", "aria-hidden": true }) }));
+}
+/**
+ * One server-sent event stream, folded into the turn being built.
+ *
+ * Hand-rolled rather than pulled from `@ai-sdk/react`, and that is a deliberate
+ * trade: this package ships to partners, and `ai` + `@ai-sdk/react` is a large
+ * dependency to add to every application platform for one panel. The wire format
+ * is small, both ends of it are ours, and the chunk kinds below are all this
+ * panel can render.
+ *
+ * Tool arguments are read from `tool-input-available` - the complete object -
+ * rather than reassembled from `tool-input-delta` fragments. `tool-input-start`
+ * is enough to put a skeleton on screen in the meantime, and partial-JSON
+ * parsing buys nothing a placeholder does not.
+ *
+ * Chunks are newline-delimited `data:` frames; a frame can split across network
+ * reads, so the tail of each read is carried forward rather than parsed.
+ */
+async function readStream(response, onChunk) {
+    const body = response.body;
+    if (!body)
+        throw new Error("Ask AI returned no stream");
+    const reader = body.pipeThrough(new TextDecoderStream()).getReader();
+    let buffer = "";
+    for (;;) {
+        const { done, value } = await reader.read();
+        if (done)
+            break;
+        buffer += value;
+        // Everything up to the last newline is whole; whatever follows it is a
+        // partial frame and waits for the next read.
+        const lines = buffer.split("\n");
+        buffer = lines.pop() ?? "";
+        for (const line of lines) {
+            if (!line.startsWith("data:"))
+                continue;
+            const payload = line.slice(5).trim();
+            if (!payload || payload === "[DONE]")
+                continue;
+            let chunk;
+            try {
+                chunk = JSON.parse(payload);
+            }
+            catch {
+                // A frame we cannot parse is a frame we cannot render. Dropping it
+                // keeps the rest of the answer flowing, which is strictly better than
+                // failing the whole turn over one malformed chunk.
+                continue;
+            }
+            switch (chunk.type) {
+                case "text-delta":
+                    if (chunk.delta)
+                        onChunk({ text: chunk.delta });
+                    break;
+                case "reasoning-delta":
+                    if (chunk.delta)
+                        onChunk({ reasoning: chunk.delta });
+                    break;
+                case "tool-input-start":
+                    if (chunk.toolCallId && chunk.toolName) {
+                        onChunk({ toolStart: { id: chunk.toolCallId, name: chunk.toolName } });
+                    }
+                    break;
+                case "tool-input-available":
+                    if (chunk.toolCallId)
+                        onChunk({ toolInput: { id: chunk.toolCallId, input: chunk.input } });
+                    break;
+                case "error":
+                    throw new Error(chunk.errorText || "Ask AI failed");
+            }
+        }
+    }
+}
+/**
+ * Index of the final text block, or `-1`. A reverse loop rather than
+ * `findLastIndex`, which is ES2023 - this package targets ES2022 so its
+ * published output stays usable on the runtimes its `engines` field claims.
+ */
+function lastTextBlockIndex(blocks) {
+    for (let index = blocks.length - 1; index >= 0; index--) {
+        if (blocks[index]?.kind === "text")
+            return index;
+    }
+    return -1;
+}
+/** Appends a text delta to the open text block, or opens one after a widget. */
+function appendText(blocks, text) {
+    const last = blocks.at(-1);
+    if (last?.kind === "text") {
+        return [...blocks.slice(0, -1), { kind: "text", text: last.text + text }];
+    }
+    return [...blocks, { kind: "text", text }];
+}
+/**
+ * Ask AI - a chat panel grounded in the signed-in workspace's Context Index,
+ * streamed through your own bridge.
+ *
+ * Answers are not only prose. Connect's model can call a small set of
+ * presentation tools - `showTable`, `showChart`, `showMetrics`, `showTimeline`,
+ * `showDetails`, `showSteps`, `showSources` - and this panel renders each one
+ * natively: a sortable table with a CSV download, a chart, a row of metric
+ * tiles. Values arrive raw with a format tag, so they are formatted here rather
+ * than by the model, which is what lets a column sort numerically.
+ *
+ * Nothing here holds a credential: it POSTs to `${basePath}/ai/chat` on your
+ * own origin, and `createConnectHandler` is what reaches Connect. The workspace
+ * is resolved from the caller's session there, never sent from the browser - so
+ * a user can only ever ask about the workspace they are signed into.
+ *
+ * ```tsx
+ * <AppShell name="Dispatch" nav={nav}>
+ *   {children}
+ * </AppShell>
+ * ```
+ *
+ * `AppShell` mounts it by default. Mount it directly only when you are not
+ * using the shell: it renders a fixed corner trigger plus a panel that is an
+ * *in-flow flex sibling* at `lg` and up, so opening it pushes your content
+ * aside rather than covering it. That requires it to be the last child of a
+ * `flex` row owning the viewport height - which is exactly what `AppShell` is.
+ * Below `lg` it is a full-screen sheet with a backdrop instead; there is no
+ * room to push anything on a phone.
+ *
+ * **Host setup:** markdown rendering needs `streamdown` installed, one Tailwind
+ * `@source "…/node_modules/streamdown/dist/*.js"` line so its utility classes
+ * are generated, and `import "streamdown/styles.css"` for the streaming
+ * animation. The colour tokens Streamdown expects are already mapped in this
+ * SDK's `theme.css`.
+ *
+ * Answers require the workspace's Context Index to be turned on (a workspace
+ * admin toggle in Connect) and your API key to carry the `ai:chat` scope.
+ * Neither is something the browser can discover, so both surface as a message
+ * in the panel rather than as a hidden button.
+ */
+function ConnectAskAi({ title = "Ask AI", assistantName = "Assistant", placeholder = "Ask a question...", hint = "Ask a question about your workspace - answers are grounded in what your team has indexed.", defaultOpen = false, markdownPlugins, }) {
+    const { session, isLoading, streamResource } = (0, provider_js_1.useConnect)();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(defaultOpen);
+    const [turns, setTurns] = (0, react_1.useState)([]);
+    const [input, setInput] = (0, react_1.useState)("");
+    const [isBusy, setIsBusy] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const abortRef = (0, react_1.useRef)(null);
+    const bottomRef = (0, react_1.useRef)(null);
+    // Ids only have to be unique within one mounted conversation, so a counter is
+    // enough - and unlike `crypto.randomUUID()` it cannot differ between the
+    // server's render and the browser's.
+    const nextId = (0, react_1.useRef)(0);
+    (0, react_1.useEffect)(() => {
+        bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+    }, [turns]);
+    // A conversation left mid-stream should stop costing tokens the moment the
+    // panel goes away.
+    (0, react_1.useEffect)(() => () => abortRef.current?.abort(), []);
+    const renderMarkdown = (0, react_1.useCallback)((text, isStreaming = false) => ((0, jsx_runtime_1.jsx)(streamdown_1.Streamdown, { className: "connect-ai-body", mode: isStreaming ? "streaming" : "static", isAnimating: isStreaming, animated: ANIMATED, caret: isStreaming ? "block" : undefined, plugins: markdownPlugins, 
+        // Retrieved documents cite real URLs; an interstitial on every one of
+        // them turns a citation into a chore. The renderer still sanitises the
+        // markup itself, which is the part that matters.
+        linkSafety: LINK_SAFETY, children: text })), [markdownPlugins]);
+    const stop = (0, react_1.useCallback)(() => {
+        abortRef.current?.abort();
+        abortRef.current = null;
+        setIsBusy(false);
+    }, []);
+    const send = (0, react_1.useCallback)(async (text) => {
+        const controller = new AbortController();
+        abortRef.current = controller;
+        setError(null);
+        setIsBusy(true);
+        const userTurn = {
+            id: `u${nextId.current++}`,
+            role: "user",
+            blocks: [{ kind: "text", text }],
+            reasoning: "",
+        };
+        const answerId = `a${nextId.current++}`;
+        // The wire format Connect reads - part-based `UIMessage`s, not flat
+        // strings. Built from the turns *plus* this one rather than from state,
+        // which has not been committed yet at this point. Only text is sent back:
+        // a widget is a rendering of something the model already said.
+        const history = [...turns, userTurn].map((turn) => ({
+            id: turn.id,
+            role: turn.role,
+            parts: [
+                {
+                    type: "text",
+                    text: turn.blocks
+                        .filter((block) => block.kind === "text")
+                        .map((block) => block.text)
+                        .join(""),
+                },
+            ],
+        }));
+        setTurns((current) => [...current, userTurn]);
+        const patchAnswer = (patch) => setTurns((current) => current.map((turn) => (turn.id === answerId ? patch(turn) : turn)));
+        try {
+            // Relative to the provider's own `basePath` - `streamResource` prefixes
+            // it, the same way every other bridge call is addressed.
+            const response = await streamResource("/ai/chat", { messages: history }, { signal: controller.signal });
+            // The assistant's turn is appended only once the stream is live, so a
+            // failed request leaves an error under the question rather than an
+            // empty bubble that never fills.
+            setTurns((current) => [...current, { id: answerId, role: "assistant", blocks: [], reasoning: "" }]);
+            await readStream(response, (chunk) => {
+                if (chunk.text) {
+                    patchAnswer((turn) => ({ ...turn, blocks: appendText(turn.blocks, chunk.text) }));
+                }
+                if (chunk.reasoning) {
+                    patchAnswer((turn) => ({ ...turn, reasoning: turn.reasoning + chunk.reasoning }));
+                }
+                if (chunk.toolStart) {
+                    const { id, name } = chunk.toolStart;
+                    patchAnswer((turn) => ({ ...turn, blocks: [...turn.blocks, { kind: "tool", id, name, input: null }] }));
+                }
+                if (chunk.toolInput) {
+                    const { id, input: toolInput } = chunk.toolInput;
+                    patchAnswer((turn) => ({
+                        ...turn,
+                        blocks: turn.blocks.map((block) => block.kind === "tool" && block.id === id ? { ...block, input: toolInput } : block),
+                    }));
+                }
+            });
+        }
+        catch (cause) {
+            // Pressing Stop aborts the fetch, which lands here - a decision, not a
+            // failure, and nothing to report.
+            if (!controller.signal.aborted) {
+                setError(cause instanceof Error ? cause.message : "Ask AI failed");
+            }
+        }
+        finally {
+            if (abortRef.current === controller)
+                abortRef.current = null;
+            setIsBusy(false);
+        }
+    }, [streamResource, turns]);
+    const lastTurn = turns.at(-1);
+    const isAnswering = isBusy && lastTurn?.role === "assistant";
+    const rendered = (0, react_1.useMemo)(() => turns.map((turn) => {
+        const isLive = isAnswering && turn.id === lastTurn?.id;
+        const lastTextIndex = lastTextBlockIndex(turn.blocks);
+        return ((0, jsx_runtime_1.jsxs)("div", { className: `connect-ai-host rounded-md border border-border p-2.5 text-sm ${turn.role === "user" ? "bg-surface-secondary" : "bg-accent/5"}`, children: [(0, jsx_runtime_1.jsx)("p", { className: "mb-1 text-[11px] font-semibold tracking-wide text-muted uppercase", children: turn.role === "user" ? "You" : assistantName }), turn.role === "assistant" && ((0, jsx_runtime_1.jsx)(ThinkingDisclosure, { text: turn.reasoning, isStreaming: isLive && lastTextIndex === -1 })), turn.blocks.map((block, index) => block.kind === "text" ? (
+                // The user's own turn is shown as they typed it - running a
+                // question that happens to start with `#` through the markdown
+                // renderer would turn it into a heading.
+                (0, jsx_runtime_1.jsx)("div", { children: turn.role === "user" ? ((0, jsx_runtime_1.jsx)("p", { className: "whitespace-pre-wrap", children: block.text })) : (renderMarkdown(block.text, isLive && index === lastTextIndex)) }, index)) : block.input === null ? ((0, jsx_runtime_1.jsx)(ToolSkeleton, {}, block.id)) : ((0, jsx_runtime_1.jsx)("div", { children: renderTool(block.name, block.input, renderMarkdown) }, block.id))), isLive && lastTextIndex === -1 && turn.blocks.length === 0 && (0, jsx_runtime_1.jsx)(ThinkingShimmer, {})] }, turn.id));
+    }), [turns, isAnswering, lastTurn?.id, assistantName, renderMarkdown]);
+    // Signed out there is no workspace to ground an answer in, and the bridge
+    // would answer 401 - so there is nothing to offer, not even a button.
+    if (isLoading || !session?.user)
+        return null;
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        const text = input.trim();
+        if (!text || isBusy)
+            return;
+        setInput("");
+        void send(text);
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isOpen && ((0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, variant: "primary", "aria-label": title, onPress: () => setIsOpen(true), className: "fixed bottom-4 end-4 z-30 size-12 rounded-full shadow-lg sm:bottom-6 sm:end-6", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { className: "size-5" }) })), (0, jsx_runtime_1.jsx)("div", { className: `fixed inset-0 z-40 bg-backdrop transition-opacity lg:hidden ${isOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`, onClick: () => setIsOpen(false), "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("aside", { "aria-hidden": !isOpen, className: `fixed inset-y-0 end-0 z-50 flex flex-col border-s border-border bg-surface shadow-xl transition-transform duration-300 ease-in-out ${PANEL_WIDTH} ${isOpen ? "translate-x-0" : "translate-x-full rtl:-translate-x-full"} lg:static lg:z-auto lg:translate-x-0 lg:shadow-none lg:transition-[width] ${isOpen ? "" : "lg:w-0 lg:overflow-hidden lg:border-s-0"}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `flex h-full shrink-0 flex-col ${PANEL_WIDTH}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 border-b border-border px-4 py-3", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { className: "size-4 shrink-0 text-accent" }), (0, jsx_runtime_1.jsx)("span", { className: "flex-1 text-sm font-semibold", children: title }), (0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, size: "sm", variant: "tertiary", "aria-label": "Close", onPress: () => setIsOpen(false), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "size-4" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 space-y-3 overflow-y-auto p-4", children: [turns.length === 0 && (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-muted", children: hint }), rendered, isBusy && lastTurn?.role === "user" && ((0, jsx_runtime_1.jsxs)("div", { className: "rounded-md border border-border bg-accent/5 p-2.5 text-sm", children: [(0, jsx_runtime_1.jsx)("p", { className: "mb-1 text-[11px] font-semibold tracking-wide text-muted uppercase", children: assistantName }), (0, jsx_runtime_1.jsx)(ThinkingShimmer, {})] })), error && (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-danger", children: error }), (0, jsx_runtime_1.jsx)("div", { ref: bottomRef })] }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: "flex gap-2 border-t border-border p-3", children: [(0, jsx_runtime_1.jsxs)(react_2.TextField, { variant: "secondary", className: "flex-1", children: [(0, jsx_runtime_1.jsx)(react_2.Label, { className: "sr-only", children: placeholder }), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: placeholder, value: input, onChange: (event) => setInput(event.currentTarget.value), disabled: isBusy })] }), isBusy ? ((0, jsx_runtime_1.jsx)(react_2.Button, { type: "button", isIconOnly: true, variant: "secondary", "aria-label": "Stop generating", onPress: stop, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Square, { className: "size-3.5" }) })) : ((0, jsx_runtime_1.jsx)(react_2.Button, { type: "submit", isIconOnly: true, variant: "primary", "aria-label": "Send", isDisabled: !input.trim(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Send, { className: "size-3.5" }) }))] })] }) })] }));
+}
+/** Hoisted for the same reference-equality reason as `ANIMATED` - Streamdown compares it by identity. */
+const LINK_SAFETY = { enabled: false };

package/dist/cjs/client/components/nav.js

@@ -89,7 +89,7 @@ function isNavItemActive(item, activeHref) {
         return false;
     return normalizePath(item.href) === activeHref;
 }
-/** Hrefs declared `gateExempt` - the routes `ConnectAppShell` renders outside its `ConnectAccessGate`. */
+/** Hrefs declared `gateExempt` - the routes `AppShell` renders outside its `ConnectAccessGate`. */
 function gateExemptPaths(nav) {
     return flattenNav(nav)
         .filter((item) => item.gateExempt)

package/dist/cjs/client/components/side-nav.js

@@ -39,7 +39,7 @@ function NavRow({ item, isActive, hasActiveChild, collapsed, depth, renderLink,
  * The sidebar's nav column on its own - sections, items, one level of
  * children, and the active highlight.
  *
- * `ConnectAppShell` renders this inside its rail and its mobile drawer, and it
+ * `AppShell` renders this inside its rail and its mobile drawer, and it
  * is exported for a host that wants the shell's navigation without its
  * chrome: the same items, the same active resolution, dropped into a layout
  * you already have.

package/dist/cjs/client/components/user-menu.js

@@ -27,6 +27,28 @@ function initials(name, email) {
 function openExternal(url) {
     window.open(url, "_blank", "noopener,noreferrer");
 }
+/**
+ * Connect's profile page, with the context it needs to offer a way back here.
+ *
+ * Connect answers `/profile` for any signed-in user, so the bare URL works on
+ * its own - these two params only add the "Back to <your app>" banner. It
+ * validates `return_to` against this `client_id`'s registered redirect
+ * origins and silently drops the banner if they don't match, so a wrong or
+ * stale `appUrl`/`clientId` pairing degrades to what it did before rather
+ * than erroring.
+ *
+ * `window.location.href` rather than a configured home URL: the point is to
+ * come back to the page they left, and only the browser knows which one that
+ * is.
+ */
+function profileUrl(appUrl, clientId) {
+    const url = new URL("/profile", appUrl);
+    url.searchParams.set("client_id", clientId);
+    if (typeof window !== "undefined") {
+        url.searchParams.set("return_to", window.location.href);
+    }
+    return url.toString();
+}
 /**
  * The member's photo, with their initials underneath it.
  *
@@ -122,7 +144,7 @@ function DestinationTile({ icon, label, url, }) {
  * the modal programmatically; sign-out uses `slot="close"` instead.
  */
 function ConnectUserMenu({ compact = false, onSignOut, className, theme, onThemeChange, }) {
-    const { session, isLoading, signOut, appUrl } = (0, provider_js_1.useConnect)();
+    const { session, isLoading, signOut, appUrl, clientId } = (0, provider_js_1.useConnect)();
     if (isLoading) {
         return ((0, jsx_runtime_1.jsxs)("div", { className: `flex items-center gap-2 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "size-8 shrink-0 rounded-full" }), !compact && (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-4 w-24" })] }));
     }
@@ -136,7 +158,7 @@ function ConnectUserMenu({ compact = false, onSignOut, className, theme, onTheme
                 // `pl-1` against the default right padding is optical, not sloppy: a
                 // circular avatar needs less inset than a text label to look evenly
                 // seated in the button.
-                className: `gap-2 pl-1 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsx)(UserAvatar, { user: user, size: "sm" }), !compact && (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-foreground", children: label })] }), (0, jsx_runtime_1.jsx)(react_1.Modal.Backdrop, { children: (0, jsx_runtime_1.jsx)(react_1.Modal.Container, { size: "md", scroll: "inside", children: (0, jsx_runtime_1.jsxs)(react_1.Modal.Dialog, { children: [(0, jsx_runtime_1.jsx)(react_1.Modal.CloseTrigger, {}), (0, jsx_runtime_1.jsx)(react_1.Modal.Header, { children: (0, jsx_runtime_1.jsx)(react_1.Modal.Heading, { children: "Account" }) }), (0, jsx_runtime_1.jsxs)(react_1.Modal.Body, { className: "flex flex-col gap-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: `flex items-start gap-3 rounded-xl border border-border ${surfaces_js_1.PANEL_FILL} p-4`, children: [(0, jsx_runtime_1.jsx)(UserAvatar, { user: user, size: "lg" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [(0, jsx_runtime_1.jsx)("p", { className: "truncate text-sm font-semibold text-foreground", children: label }), user.email && (0, jsx_runtime_1.jsx)("p", { className: "truncate text-xs text-muted", children: user.email }), (0, jsx_runtime_1.jsx)("p", { className: "truncate text-xs text-muted", children: user.workspaceName }), (role || planChip || !user.emailVerified) && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-1.5 flex flex-wrap items-center gap-1.5", children: [role && ((0, jsx_runtime_1.jsx)(react_1.Chip, { size: "sm", variant: "soft", color: "accent", children: humanizeRole(role) })), planChip, !user.emailVerified && ((0, jsx_runtime_1.jsx)(react_1.Chip, { size: "sm", variant: "soft", color: "warning", children: "Email unverified" }))] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [(0, jsx_runtime_1.jsx)(DestinationTile, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.UserRound, { className: surfaces_js_1.ICON, "aria-hidden": "true" }), label: "Profile", url: `${appUrl}/profile` }), (0, jsx_runtime_1.jsx)(DestinationTile, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CreditCard, { className: surfaces_js_1.ICON, "aria-hidden": "true" }), label: "Billing", url: `${appUrl}/billing` }), (0, jsx_runtime_1.jsx)(DestinationTile, { icon: (0, jsx_runtime_1.jsx)(mark_js_1.ConnectMark, { className: surfaces_js_1.ICON }), label: "Connect", url: appUrl })] }), theme && onThemeChange && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-foreground", children: "Appearance" }), (0, jsx_runtime_1.jsx)(react_1.ToggleButtonGroup, { fullWidth: true, "aria-label": "Theme", selectionMode: "single", disallowEmptySelection: true, selectedKeys: [theme], onSelectionChange: (keys) => {
+                className: `gap-2 pl-1 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsx)(UserAvatar, { user: user, size: "sm" }), !compact && (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-foreground", children: label })] }), (0, jsx_runtime_1.jsx)(react_1.Modal.Backdrop, { children: (0, jsx_runtime_1.jsx)(react_1.Modal.Container, { size: "md", scroll: "inside", children: (0, jsx_runtime_1.jsxs)(react_1.Modal.Dialog, { children: [(0, jsx_runtime_1.jsx)(react_1.Modal.CloseTrigger, {}), (0, jsx_runtime_1.jsx)(react_1.Modal.Header, { children: (0, jsx_runtime_1.jsx)(react_1.Modal.Heading, { children: "Account" }) }), (0, jsx_runtime_1.jsxs)(react_1.Modal.Body, { className: "flex flex-col gap-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: `flex items-start gap-3 rounded-xl border border-border ${surfaces_js_1.PANEL_FILL} p-4`, children: [(0, jsx_runtime_1.jsx)(UserAvatar, { user: user, size: "lg" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [(0, jsx_runtime_1.jsx)("p", { className: "truncate text-sm font-semibold text-foreground", children: label }), user.email && (0, jsx_runtime_1.jsx)("p", { className: "truncate text-xs text-muted", children: user.email }), (0, jsx_runtime_1.jsx)("p", { className: "truncate text-xs text-muted", children: user.workspaceName }), (role || planChip || !user.emailVerified) && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-1.5 flex flex-wrap items-center gap-1.5", children: [role && ((0, jsx_runtime_1.jsx)(react_1.Chip, { size: "sm", variant: "soft", color: "accent", children: humanizeRole(role) })), planChip, !user.emailVerified && ((0, jsx_runtime_1.jsx)(react_1.Chip, { size: "sm", variant: "soft", color: "warning", children: "Email unverified" }))] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [(0, jsx_runtime_1.jsx)(DestinationTile, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.UserRound, { className: surfaces_js_1.ICON, "aria-hidden": "true" }), label: "Profile", url: profileUrl(appUrl, clientId) }), (0, jsx_runtime_1.jsx)(DestinationTile, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CreditCard, { className: surfaces_js_1.ICON, "aria-hidden": "true" }), label: "Billing", url: `${appUrl}/billing` }), (0, jsx_runtime_1.jsx)(DestinationTile, { icon: (0, jsx_runtime_1.jsx)(mark_js_1.ConnectMark, { className: surfaces_js_1.ICON }), label: "Connect", url: appUrl })] }), theme && onThemeChange && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-foreground", children: "Appearance" }), (0, jsx_runtime_1.jsx)(react_1.ToggleButtonGroup, { fullWidth: true, "aria-label": "Theme", selectionMode: "single", disallowEmptySelection: true, selectedKeys: [theme], onSelectionChange: (keys) => {
                                                     const [next] = [...keys];
                                                     if (typeof next === "string")
                                                         onThemeChange(next);
@@ -175,13 +197,14 @@ function ConnectInvoicesButton({ className }) {
  * `ConnectHomeButton`.
  *
  * It was reachable only from inside `ConnectUserMenu`, which meant an app that
- * builds its own account menu had to hardcode `${appUrl}/profile` to offer it.
+ * builds its own account menu had to hardcode `${appUrl}/profile` to offer it -
+ * and got no `return_to`, so the user had no way back.
  */
 function ConnectProfileButton({ className }) {
-    const { session, appUrl } = (0, provider_js_1.useConnect)();
+    const { session, appUrl, clientId } = (0, provider_js_1.useConnect)();
     if (!session?.user)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "tertiary", className: className, onPress: () => openExternal(`${appUrl}/profile`), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.UserRound, { className: "size-4 shrink-0" }), "Profile", (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "size-3.5 shrink-0 text-muted" })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "tertiary", className: className, onPress: () => openExternal(profileUrl(appUrl, clientId)), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.UserRound, { className: "size-4 shrink-0" }), "Profile", (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "size-3.5 shrink-0 text-muted" })] }));
 }
 /** A plain "Open Connect" button, for a footer or a help menu. */
 function ConnectHomeButton({ className }) {

package/dist/cjs/client/components/workspace-type-gate.js

@@ -0,0 +1,48 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectWorkspaceTypeGate = ConnectWorkspaceTypeGate;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const provider_js_1 = require("../provider.js");
+/**
+ * Renders `children` only for a workspace of the given type.
+ *
+ * ```tsx
+ * <ConnectWorkspaceTypeGate type="business">
+ *   <TeamMembersTable />
+ * </ConnectWorkspaceTypeGate>
+ * ```
+ *
+ * The point is dead controls, not access: an `"individual"` workspace has
+ * exactly one seat and can never have another, so a members table, an invite
+ * button and a seat meter are all things that can only ever fail there.
+ * Hiding them is a better answer than letting someone press one and read an
+ * error about an account shape they did not choose.
+ *
+ * This is emphatically **not** the audience gate. It does not know what your
+ * application is sold to and will happily render a business-only subtree to a
+ * business workspace that has no business being in your application at all -
+ * that is `<ConnectAccessGate>`'s job, off the `audience_mismatch` readiness
+ * blocker. Use this one *inside* an application both audiences can reach, to
+ * vary what each sees.
+ *
+ * Like every gate in this package it is a **UX gate, not a security
+ * boundary**: the browser can ignore it. Anything that must not happen for an
+ * individual workspace has to be refused on your server too.
+ *
+ * Renders `loading` - not `fallback` - while the session is unknown, so a
+ * business account never flickers through the individual-account layout.
+ */
+function ConnectWorkspaceTypeGate({ type, children, fallback = null, loading = null, }) {
+    const { session, isLoading } = (0, provider_js_1.useConnect)();
+    const workspaceType = session?.user?.workspaceType ?? null;
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading });
+    // Signed out is not "the other type" - there is no workspace to be a type
+    // of yet, and rendering the fallback here would put an individual-account
+    // layout in front of a visitor who has not signed in.
+    if (!workspaceType)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading });
+    const accepted = Array.isArray(type) ? type : [type];
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: accepted.includes(workspaceType) ? children : fallback });
+}

package/dist/cjs/client/index.js

@@ -1,8 +1,8 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConnectFeatureGate = exports.useConnectAccessGate = exports.ConnectAccessGate = exports.ConnectReadinessGate = exports.ConnectReadinessBanner = exports.resolveSubscriptionState = exports.ConnectSeatUsage = exports.ConnectTrialBanner = exports.ConnectSubscriptionCard = exports.ConnectNoSubscriptionCard = exports.ConnectSubscriptionGate = exports.ConnectSubscribeDialog = exports.ConnectPlans = exports.ConnectIntegrationsModal = exports.ConnectAppsGrid = exports.gateExemptPaths = exports.isNavItemActive = exports.resolveActivePath = exports.normalizePath = exports.flattenNav = exports.normalizeNav = exports.useActivePath = exports.ConnectSideNav = exports.ConnectAppShell = exports.ConnectAccountSessions = exports.ConnectSignOutButton = exports.ConnectHomeButton = exports.ConnectProfileButton = exports.ConnectInvoicesButton = exports.ConnectManageSubscriptionButton = exports.ConnectUserMenu = exports.ConnectRegisterButton = exports.ConnectLoginButton = exports.ConnectLogo = exports.ConnectMark = exports.isConnectError = exports.ConnectError = exports.normalizePlanFeatures = exports.blockingBlockers = exports.CONNECT_APP_URL = exports.useConnectResource = exports.useConnectIntegrations = exports.useConnectSessions = exports.useConnectAddonUsage = exports.useConnectApps = exports.useConnectPlans = exports.useConnectEntitlements = exports.useConnectUser = exports.useConnect = exports.ConnectProvider = void 0;
-exports.resolvePlanGroup = exports.groupPlansByTier = exports.ACTION_LABEL = exports.discountLabel = exports.annualSaving = exports.resolveAction = exports.monthlyOf = exports.formatPrice = exports.buildCheckoutUrl = exports.useConnectCheckout = exports.ConnectPlansPage = exports.ConnectUsageMeter = exports.useConnectFeature = void 0;
+exports.AI_EMPTY_VALUE = exports.aiStatusTone = exports.isNumericAiFormat = exports.formatAiValue = exports.AiSources = exports.AiSteps = exports.AiDetails = exports.AiTimeline = exports.AiMetrics = exports.AiChart = exports.AiTable = exports.ConnectAskAi = exports.ConnectAppsGrid = exports.gateExemptPaths = exports.isNavItemActive = exports.resolveActivePath = exports.normalizePath = exports.flattenNav = exports.normalizeNav = exports.useActivePath = exports.ConnectSideNav = exports.AppShell = exports.ConnectAccountSessions = exports.ConnectSignOutButton = exports.ConnectHomeButton = exports.ConnectProfileButton = exports.ConnectInvoicesButton = exports.ConnectManageSubscriptionButton = exports.ConnectUserMenu = exports.ConnectRegisterButton = exports.ConnectLoginButton = exports.ConnectLogo = exports.ConnectMark = exports.isConnectError = exports.ConnectError = exports.normalizePlanFeatures = exports.blockingBlockers = exports.CONNECT_APP_URL = exports.useConnectResource = exports.useConnectIntegrations = exports.useConnectSessions = exports.useConnectAddonUsage = exports.useConnectApps = exports.useConnectPlans = exports.useConnectEntitlements = exports.useConnectAudience = exports.useConnectWorkspaceType = exports.useConnectUser = exports.useConnect = exports.ConnectProvider = void 0;
+exports.resolvePlanGroup = exports.groupPlansByTier = exports.ACTION_LABEL = exports.discountLabel = exports.annualSaving = exports.resolveAction = exports.monthlyOf = exports.formatPrice = exports.buildCheckoutUrl = exports.useConnectCheckout = exports.ConnectPlansPage = exports.ConnectUsageMeter = exports.ConnectWorkspaceTypeGate = exports.useConnectFeature = exports.ConnectFeatureGate = exports.useConnectAccessGate = exports.ConnectAccessGate = exports.ConnectReadinessGate = exports.ConnectReadinessBanner = exports.resolveSubscriptionState = exports.ConnectSeatUsage = exports.ConnectTrialBanner = exports.ConnectSubscriptionCard = exports.ConnectNoSubscriptionCard = exports.ConnectSubscriptionGate = exports.ConnectSubscribeDialog = exports.ConnectPlans = exports.ConnectIntegrationsModal = exports.AI_TONE_DOT = exports.AI_TONE_CHIP = void 0;
 /**
  * Browser half of `@cosmoops/connect-sdk` - React components and hooks.
  *
@@ -19,6 +19,8 @@ var provider_js_1 = require("./provider.js");
 Object.defineProperty(exports, "ConnectProvider", { enumerable: true, get: function () { return provider_js_1.ConnectProvider; } });
 Object.defineProperty(exports, "useConnect", { enumerable: true, get: function () { return provider_js_1.useConnect; } });
 Object.defineProperty(exports, "useConnectUser", { enumerable: true, get: function () { return provider_js_1.useConnectUser; } });
+Object.defineProperty(exports, "useConnectWorkspaceType", { enumerable: true, get: function () { return provider_js_1.useConnectWorkspaceType; } });
+Object.defineProperty(exports, "useConnectAudience", { enumerable: true, get: function () { return provider_js_1.useConnectAudience; } });
 Object.defineProperty(exports, "useConnectEntitlements", { enumerable: true, get: function () { return provider_js_1.useConnectEntitlements; } });
 Object.defineProperty(exports, "useConnectPlans", { enumerable: true, get: function () { return provider_js_1.useConnectPlans; } });
 Object.defineProperty(exports, "useConnectApps", { enumerable: true, get: function () { return provider_js_1.useConnectApps; } });
@@ -59,7 +61,7 @@ Object.defineProperty(exports, "ConnectAccountSessions", { enumerable: true, get
 // reaching for a sidebar wants to find the launcher and the account menu in
 // the same breath, since the shell already mounts both.
 var app_shell_js_1 = require("./components/app-shell.js");
-Object.defineProperty(exports, "ConnectAppShell", { enumerable: true, get: function () { return app_shell_js_1.ConnectAppShell; } });
+Object.defineProperty(exports, "AppShell", { enumerable: true, get: function () { return app_shell_js_1.AppShell; } });
 var side_nav_js_1 = require("./components/side-nav.js");
 Object.defineProperty(exports, "ConnectSideNav", { enumerable: true, get: function () { return side_nav_js_1.ConnectSideNav; } });
 var use_active_path_js_1 = require("./use-active-path.js");
@@ -77,6 +79,30 @@ Object.defineProperty(exports, "isNavItemActive", { enumerable: true, get: funct
 Object.defineProperty(exports, "gateExemptPaths", { enumerable: true, get: function () { return nav_js_1.gateExemptPaths; } });
 var apps_grid_js_1 = require("./components/apps-grid.js");
 Object.defineProperty(exports, "ConnectAppsGrid", { enumerable: true, get: function () { return apps_grid_js_1.ConnectAppsGrid; } });
+// `AppShell askAi` mounts this; exported for an app that wants the panel
+// without the frame, or wants it somewhere other than the shell's flex row
+// (at which point it overlays rather than pushes - see its doc comment).
+var ask_ai_js_1 = require("./components/ask-ai.js");
+Object.defineProperty(exports, "ConnectAskAi", { enumerable: true, get: function () { return ask_ai_js_1.ConnectAskAi; } });
+// The seven widgets an Ask AI answer can draw, and the formatter they share -
+// exported so a partner rendering Connect's chat somewhere else entirely (a
+// support console, an embedded assistant) gets the same table, chart and metric
+// tiles rather than reimplementing them from the wire types.
+var ai_widgets_js_1 = require("./components/ai-widgets.js");
+Object.defineProperty(exports, "AiTable", { enumerable: true, get: function () { return ai_widgets_js_1.AiTable; } });
+Object.defineProperty(exports, "AiChart", { enumerable: true, get: function () { return ai_widgets_js_1.AiChart; } });
+Object.defineProperty(exports, "AiMetrics", { enumerable: true, get: function () { return ai_widgets_js_1.AiMetrics; } });
+Object.defineProperty(exports, "AiTimeline", { enumerable: true, get: function () { return ai_widgets_js_1.AiTimeline; } });
+Object.defineProperty(exports, "AiDetails", { enumerable: true, get: function () { return ai_widgets_js_1.AiDetails; } });
+Object.defineProperty(exports, "AiSteps", { enumerable: true, get: function () { return ai_widgets_js_1.AiSteps; } });
+Object.defineProperty(exports, "AiSources", { enumerable: true, get: function () { return ai_widgets_js_1.AiSources; } });
+var ai_format_js_1 = require("./components/ai-format.js");
+Object.defineProperty(exports, "formatAiValue", { enumerable: true, get: function () { return ai_format_js_1.formatAiValue; } });
+Object.defineProperty(exports, "isNumericAiFormat", { enumerable: true, get: function () { return ai_format_js_1.isNumericAiFormat; } });
+Object.defineProperty(exports, "aiStatusTone", { enumerable: true, get: function () { return ai_format_js_1.aiStatusTone; } });
+Object.defineProperty(exports, "AI_EMPTY_VALUE", { enumerable: true, get: function () { return ai_format_js_1.AI_EMPTY_VALUE; } });
+Object.defineProperty(exports, "AI_TONE_CHIP", { enumerable: true, get: function () { return ai_format_js_1.AI_TONE_CHIP; } });
+Object.defineProperty(exports, "AI_TONE_DOT", { enumerable: true, get: function () { return ai_format_js_1.AI_TONE_DOT; } });
 var integrations_modal_js_1 = require("./components/integrations-modal.js");
 Object.defineProperty(exports, "ConnectIntegrationsModal", { enumerable: true, get: function () { return integrations_modal_js_1.ConnectIntegrationsModal; } });
 var plans_js_1 = require("./components/plans.js");
@@ -104,6 +130,8 @@ Object.defineProperty(exports, "useConnectAccessGate", { enumerable: true, get:
 var feature_gate_js_1 = require("./components/feature-gate.js");
 Object.defineProperty(exports, "ConnectFeatureGate", { enumerable: true, get: function () { return feature_gate_js_1.ConnectFeatureGate; } });
 Object.defineProperty(exports, "useConnectFeature", { enumerable: true, get: function () { return feature_gate_js_1.useConnectFeature; } });
+var workspace_type_gate_js_1 = require("./components/workspace-type-gate.js");
+Object.defineProperty(exports, "ConnectWorkspaceTypeGate", { enumerable: true, get: function () { return workspace_type_gate_js_1.ConnectWorkspaceTypeGate; } });
 var usage_meter_js_1 = require("./components/usage-meter.js");
 Object.defineProperty(exports, "ConnectUsageMeter", { enumerable: true, get: function () { return usage_meter_js_1.ConnectUsageMeter; } });
 var plans_page_js_1 = require("./components/plans-page.js");