@cosmoops/connect-sdk 0.6.0 → 0.9.0

package/dist/cjs/client/components/access-gate.js

@@ -25,9 +25,17 @@ function formatDate(iso) {
  * `ConnectReadinessGate`/`ConnectReadinessBanner` already use. `ConnectAccessGate`
  * is a priority ordering over the same data, not a second opinion about it.
  *
- * Priority, first match wins: `suspended` > `no_subscription` >
- * `onboarding_pending` > any other blocking code (`blocked`) >
- * `payment_retry` (advisory - `children` still render) > `clear`.
+ * Priority, first match wins: `suspended` > `audience_mismatch` >
+ * `no_subscription` > `onboarding_pending` > any other blocking code
+ * (`blocked`) > `payment_retry` (advisory - `children` still render) >
+ * `clear`.
+ *
+ * `audience_mismatch` outranks `no_subscription` deliberately, and the
+ * ordering is the whole point of it: a workspace of the wrong account type
+ * carries BOTH blockers at once, and showing the subscription one first sent
+ * the customer to a plan picker whose subscribe call
+ * (`ActivateSubscriptionUseCase`) rejects them for the audience anyway. The
+ * account type is the reason; the missing subscription is a consequence.
  */
 function useConnectAccessGate() {
     const { session, isLoading: sessionLoading } = (0, provider_js_1.useConnect)();
@@ -47,9 +55,13 @@ function useConnectAccessGate() {
     }
     const readiness = data.readiness;
     const blocking = (0, helpers_js_1.blockingBlockers)(readiness);
-    const suspended = blocking.find((b) => b.code === "organization_suspended");
+    const suspended = blocking.find((b) => b.code === "workspace_suspended");
     if (suspended)
         return { state: "suspended", blocker: suspended, paymentRetry: null };
+    const audienceMismatch = blocking.find((b) => b.code === "audience_mismatch");
+    if (audienceMismatch) {
+        return { state: "audience_mismatch", blocker: audienceMismatch, paymentRetry: null };
+    }
     const noSubscription = blocking.find((b) => b.code === "subscription_missing");
     if (noSubscription)
         return { state: "no_subscription", blocker: noSubscription, paymentRetry: null };
@@ -109,16 +121,39 @@ function ConnectAccessGate({ children, fallback, loading, className }) {
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fallback ?? (0, jsx_runtime_1.jsx)(AccessGateFallback, { state: gate.state, blocker: gate.blocker, className: className }) }));
 }
 function AccessGateFallback({ state, blocker, className, }) {
+    if (state === "audience_mismatch") {
+        // `requiredWorkspaceType` rather than the message, which is documented as
+        // human-facing and subject to rewording - the title has to name the right
+        // account type even after someone rephrases the sentence below it.
+        const required = blocker?.requiredWorkspaceType ?? null;
+        return ((0, jsx_runtime_1.jsx)(GateCard, { icon: required === "individual" ? lucide_react_1.User : lucide_react_1.Building2, iconClassName: "text-muted", title: required === "business"
+                ? "Business account required"
+                : required === "individual"
+                    ? "Individual account required"
+                    : "Not available for this account type", 
+            // The server names the application in its own message, which reads
+            // better than anything composable here; the fallback covers a blocker
+            // that arrived without one.
+            message: blocker?.message ??
+                (required
+                    ? `This application is only available to ${required} accounts.`
+                    : "This application isn't available to this account's type."), 
+            // Deliberately no action, even if one were sent: `Workspace.type` is
+            // set at sign-up and no screen changes it, so any button here would
+            // only move the dead end somewhere else. Switching means a different
+            // account, which is a conversation with support, not a link.
+            resolveUrl: null, className: className }));
+    }
     if (state === "no_subscription") {
-        return ((0, jsx_runtime_1.jsx)(GateCard, { icon: lucide_react_1.CreditCard, iconClassName: "text-accent", title: "Choose a plan to continue", message: blocker?.message ?? "This workspace isn't subscribed to this service yet.", actionLabel: "See plans", resolveUrl: blocker?.resolveUrl ?? null, className: className }));
+        return ((0, jsx_runtime_1.jsx)(GateCard, { icon: lucide_react_1.CreditCard, iconClassName: "text-accent", title: "Choose a plan to continue", message: blocker?.message ?? "This workspace isn't subscribed to this application yet.", actionLabel: "See plans", resolveUrl: blocker?.resolveUrl ?? null, className: className }));
     }
     if (state === "suspended") {
         return ((0, jsx_runtime_1.jsx)(GateCard, { icon: lucide_react_1.Ban, iconClassName: "text-danger", title: "Workspace suspended", message: blocker?.message ?? "This workspace has been suspended.", resolveUrl: null, className: className }));
     }
     if (state === "onboarding_pending") {
-        return ((0, jsx_runtime_1.jsx)(GateCard, { icon: lucide_react_1.Clock, iconClassName: "text-muted", title: "Waiting on approval", message: blocker?.message ?? "This workspace is waiting on approval before it can use this service.", resolveUrl: null, className: className }));
+        return ((0, jsx_runtime_1.jsx)(GateCard, { icon: lucide_react_1.Clock, iconClassName: "text-muted", title: "Waiting on approval", message: blocker?.message ?? "This workspace is waiting on approval before it can use this application.", resolveUrl: null, className: className }));
     }
-    // "blocked" - any other blocking code (verification, audience, seats, ...).
+    // "blocked" - any other blocking code (verification, seats, ...).
     // Full fidelity for a code this component doesn't special-case: the same
     // banner-in-a-card `ConnectReadinessGate` falls back to, rather than
     // `GateCard`'s single-blocker shape - there can be more than one of these

package/dist/cjs/client/components/account-sessions.js

@@ -44,7 +44,7 @@ function ordered(sessions) {
 }
 /**
  * One row's revoke action, confirmed before it fires - revoking a session
- * ends every partner-service sign-in from that same browser, not just this
+ * ends every partner-application sign-in from that same browser, not just this
  * one. Closes on confirm, not on response - the same convention every
  * destructive confirmation in this codebase follows - so the dialog itself
  * needs no async/pending state of its own; the row simply disappears once
@@ -58,11 +58,11 @@ function ordered(sessions) {
  */
 function RevokeRow({ session, onRevoke }) {
     const label = deviceLabel(session);
-    return ((0, jsx_runtime_1.jsxs)(react_2.AlertDialog, { children: [(0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, size: "sm", variant: "tertiary", className: "shrink-0 text-muted hover:text-danger", "aria-label": `Sign out ${label}`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { className: "size-4" }) }), (0, jsx_runtime_1.jsx)(react_2.AlertDialog.Backdrop, { children: (0, jsx_runtime_1.jsx)(react_2.AlertDialog.Container, { children: (0, jsx_runtime_1.jsxs)(react_2.AlertDialog.Dialog, { className: "sm:max-w-100", children: [(0, jsx_runtime_1.jsx)(react_2.AlertDialog.CloseTrigger, {}), (0, jsx_runtime_1.jsxs)(react_2.AlertDialog.Header, { children: [(0, jsx_runtime_1.jsx)(react_2.AlertDialog.Icon, { status: "danger" }), (0, jsx_runtime_1.jsx)(react_2.AlertDialog.Heading, { children: "Sign out this device?" })] }), (0, jsx_runtime_1.jsx)(react_2.AlertDialog.Body, { children: (0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-muted", children: ["This ends every sign-in from ", label, ", on every service, not just this one."] }) }), (0, jsx_runtime_1.jsxs)(react_2.AlertDialog.Footer, { children: [(0, jsx_runtime_1.jsx)(react_2.Button, { slot: "close", variant: "secondary", className: "text-xs", children: "Cancel" }), (0, jsx_runtime_1.jsx)(react_2.Button, { slot: "close", variant: "danger", className: "text-xs", onPress: onRevoke, children: "Sign out" })] })] }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.AlertDialog, { children: [(0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, size: "sm", variant: "tertiary", className: "shrink-0 text-muted hover:text-danger", "aria-label": `Sign out ${label}`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { className: "size-4" }) }), (0, jsx_runtime_1.jsx)(react_2.AlertDialog.Backdrop, { children: (0, jsx_runtime_1.jsx)(react_2.AlertDialog.Container, { children: (0, jsx_runtime_1.jsxs)(react_2.AlertDialog.Dialog, { className: "sm:max-w-100", children: [(0, jsx_runtime_1.jsx)(react_2.AlertDialog.CloseTrigger, {}), (0, jsx_runtime_1.jsxs)(react_2.AlertDialog.Header, { children: [(0, jsx_runtime_1.jsx)(react_2.AlertDialog.Icon, { status: "danger" }), (0, jsx_runtime_1.jsx)(react_2.AlertDialog.Heading, { children: "Sign out this device?" })] }), (0, jsx_runtime_1.jsx)(react_2.AlertDialog.Body, { children: (0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-muted", children: ["This ends every sign-in from ", label, ", on every application, not just this one."] }) }), (0, jsx_runtime_1.jsxs)(react_2.AlertDialog.Footer, { children: [(0, jsx_runtime_1.jsx)(react_2.Button, { slot: "close", variant: "secondary", className: "text-xs", children: "Cancel" }), (0, jsx_runtime_1.jsx)(react_2.Button, { slot: "close", variant: "danger", className: "text-xs", onPress: onRevoke, children: "Sign out" })] })] }) }) })] }));
 }
 /**
  * Every device signed into this Connect account - not scoped to this
- * service, see `ConnectUserSession`'s doc comment. Owns the one
+ * application, see `ConnectUserSession`'s doc comment. Owns the one
  * `useConnectSessions()` call for this modal; every revoke action here
  * mutates through it and re-reads the list itself, since nothing else
  * invalidates it automatically - see `mutateResource`'s doc comment.

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

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AI_TONE_DOT = exports.AI_TONE_CHIP = exports.AI_EMPTY_VALUE = void 0;
+exports.formatAiValue = formatAiValue;
+exports.isNumericAiFormat = isNumericAiFormat;
+exports.aiStatusTone = aiStatusTone;
+/**
+ * The one place a model-supplied value becomes a string.
+ *
+ * Ask AI's presentation tools send raw values with a `format` tag beside them
+ * rather than pre-formatted strings (see `AiValueFormat`), and this is the half
+ * that makes that worth doing: an amount renders in the viewer's own locale, a
+ * table sorts numerically, and the same figure reads identically on a chart
+ * axis, in a tooltip and in a metric tile.
+ *
+ * Every branch is total. A value that cannot be formatted the way it was
+ * tagged - a `date` that is not a date, a `currency` that is not a number -
+ * falls back to its plain string rather than throwing inside a render.
+ */
+/** Renders in place of a missing value - an em dash, not the word "null". */
+exports.AI_EMPTY_VALUE = "—";
+const NUMBER = new Intl.NumberFormat("en-IN");
+const PERCENT = new Intl.NumberFormat("en-IN", { style: "percent", maximumFractionDigits: 1 });
+/**
+ * Rupees, not paise - the tool contract says so, because the model is emitting
+ * a figure a person would say out loud. `formatPrice` in `plan-pricing.ts` is
+ * the paise-denominated twin, for amounts that came out of Connect's billing.
+ */
+const CURRENCY = new Intl.NumberFormat("en-IN", {
+    style: "currency",
+    currency: "INR",
+    maximumFractionDigits: 2,
+});
+const DATE = new Intl.DateTimeFormat("en-IN", { day: "numeric", month: "short", year: "numeric" });
+const DATE_TIME = new Intl.DateTimeFormat("en-IN", {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+});
+function formatBytes(bytes) {
+    const units = ["B", "KB", "MB", "GB", "TB"];
+    let value = bytes;
+    let unit = 0;
+    while (value >= 1024 && unit < units.length - 1) {
+        value /= 1024;
+        unit++;
+    }
+    return `${value >= 10 || unit === 0 ? Math.round(value) : value.toFixed(1)} ${units[unit]}`;
+}
+function formatDuration(seconds) {
+    if (seconds < 60)
+        return `${Math.round(seconds)}s`;
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60)
+        return `${minutes}m`;
+    const hours = Math.floor(minutes / 60);
+    const remainder = minutes % 60;
+    if (hours < 24)
+        return remainder ? `${hours}h ${remainder}m` : `${hours}h`;
+    return `${Math.floor(hours / 24)}d ${hours % 24}h`;
+}
+function asDate(value) {
+    if (typeof value !== "string" && typeof value !== "number")
+        return null;
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+}
+function formatAiValue(value, format = "text") {
+    if (value === null || value === undefined || value === "")
+        return exports.AI_EMPTY_VALUE;
+    switch (format) {
+        case "number":
+            return typeof value === "number" ? NUMBER.format(value) : String(value);
+        case "currency":
+            return typeof value === "number" ? CURRENCY.format(value) : String(value);
+        case "percent":
+            return typeof value === "number" ? PERCENT.format(value) : String(value);
+        case "bytes":
+            return typeof value === "number" ? formatBytes(value) : String(value);
+        case "duration":
+            return typeof value === "number" ? formatDuration(value) : String(value);
+        case "date": {
+            const date = asDate(value);
+            return date ? DATE.format(date) : String(value);
+        }
+        case "datetime": {
+            const date = asDate(value);
+            return date ? DATE_TIME.format(date) : String(value);
+        }
+        default:
+            return String(value);
+    }
+}
+/** Numeric columns read far better right-aligned; everything else stays with the text. */
+function isNumericAiFormat(format = "text") {
+    return (format === "number" ||
+        format === "currency" ||
+        format === "percent" ||
+        format === "bytes" ||
+        format === "duration");
+}
+/**
+ * A status word to a tone. A small keyword list rather than an enum on the
+ * wire, because the model names states from the partner's own domain
+ * ("provisioning", "in transit") - and anything unrecognised is neutral, which
+ * is the right answer for a word nobody can interpret.
+ */
+const POSITIVE = new Set(["active", "paid", "succeeded", "success", "complete", "completed", "approved", "healthy", "live", "enabled", "delivered", "on", "yes"]);
+const WARNING = new Set(["pending", "processing", "trialing", "trial", "grace", "review", "queued", "partial", "draft", "in_transit"]);
+const DANGER = new Set(["failed", "error", "overdue", "suspended", "cancelled", "canceled", "rejected", "expired", "past_due", "blocked", "disabled", "off"]);
+function aiStatusTone(value) {
+    const word = String(value ?? "").trim().toLowerCase().replace(/\s+/g, "_");
+    if (POSITIVE.has(word))
+        return "positive";
+    if (WARNING.has(word))
+        return "warning";
+    if (DANGER.has(word))
+        return "danger";
+    return "neutral";
+}
+/** HeroUI semantic tokens only, so these inherit whatever theme the host defined. */
+exports.AI_TONE_CHIP = {
+    neutral: "bg-surface-tertiary text-foreground",
+    positive: "bg-success/15 text-success",
+    warning: "bg-warning/20 text-warning",
+    danger: "bg-danger/15 text-danger",
+};
+exports.AI_TONE_DOT = {
+    neutral: "bg-muted",
+    positive: "bg-success",
+    warning: "bg-warning",
+    danger: "bg-danger",
+};

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

@@ -0,0 +1,232 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AiTable = AiTable;
+exports.AiChart = AiChart;
+exports.AiMetrics = AiMetrics;
+exports.AiTimeline = AiTimeline;
+exports.AiDetails = AiDetails;
+exports.AiSteps = AiSteps;
+exports.AiSources = AiSources;
+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 ai_format_js_1 = require("./ai-format.js");
+/**
+ * What Ask AI draws.
+ *
+ * Seven widgets, one per data shape, rendered from the model's own tool call -
+ * see `AiToolName`. Everything here is HeroUI semantic tokens and inline SVG:
+ * **no charting library, no table library, no new dependency**, because this
+ * package ships to partners and a chart library is not a reasonable thing to
+ * make every application platform install for one panel.
+ *
+ * The hand-rolled chart is the deliberate part of that. A 400px side panel does
+ * not need pan, zoom, brushes or animation; it needs axis labels a human can
+ * read and a line that goes where the numbers do. That is ~80 lines of SVG.
+ */
+/** The four small panels share one frame, so an answer with two of them reads as one object. */
+function Panel({ title, children }) {
+    return ((0, jsx_runtime_1.jsxs)("figure", { className: "my-3 rounded-lg border border-border p-3", children: [title && (0, jsx_runtime_1.jsx)("figcaption", { className: "mb-2 text-xs font-semibold", children: title }), children] }));
+}
+const TONE_TEXT = {
+    neutral: "text-muted",
+    positive: "text-success",
+    warning: "text-warning",
+    danger: "text-danger",
+};
+function StatusChip({ value }) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: `inline-block rounded-full px-1.5 py-0.5 text-[10px] font-medium ${ai_format_js_1.AI_TONE_CHIP[(0, ai_format_js_1.aiStatusTone)(value)]}`, children: String(value) }));
+}
+/* ------------------------------------------------------------------ table */
+/**
+ * `showTable`. Sorting and CSV are what a table is *for* - once an answer is
+ * tabular the next thing anyone wants is to reorder it or take it elsewhere,
+ * and a markdown table can do neither. Both work off the raw values, so
+ * "₹12,500" sorts as 12500 and the export carries numbers a spreadsheet can add.
+ */
+function AiTable({ title, columns, rows, caption }) {
+    // By column *index*: rows are positional (see `AiTableInput`), so the index
+    // is the only identity a column has.
+    const [sort, setSort] = (0, react_1.useState)(null);
+    const sorted = (0, react_1.useMemo)(() => {
+        if (!sort)
+            return rows;
+        const direction = sort.direction === "asc" ? 1 : -1;
+        return [...rows].sort((a, b) => {
+            const left = a[sort.column];
+            const right = b[sort.column];
+            // Missing values sink in both directions. The alternative is empty rows
+            // migrating to the top when you reverse a column, which reads as data
+            // appearing out of nowhere.
+            if (left === null || left === undefined)
+                return 1;
+            if (right === null || right === undefined)
+                return -1;
+            if (typeof left === "number" && typeof right === "number")
+                return (left - right) * direction;
+            return String(left).localeCompare(String(right)) * direction;
+        });
+    }, [rows, sort]);
+    const downloadCsv = () => {
+        const escape = (value) => `"${String(value ?? "").replaceAll('"', '""')}"`;
+        const csv = [
+            columns.map((column) => escape(column.label)).join(","),
+            ...sorted.map((row) => columns.map((_column, index) => escape(row[index])).join(",")),
+        ].join("\n");
+        const url = URL.createObjectURL(new Blob([csv], { type: "text/csv;charset=utf-8" }));
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = `${(title ?? "table").toLowerCase().replaceAll(/[^a-z0-9]+/g, "-")}.csv`;
+        link.click();
+        URL.revokeObjectURL(url);
+    };
+    const toggleSort = (column) => setSort((current) => current?.column === column
+        ? current.direction === "asc"
+            ? { column, direction: "desc" }
+            : null
+        : { column, direction: "asc" });
+    return ((0, jsx_runtime_1.jsxs)("figure", { className: "my-3 overflow-hidden rounded-lg border border-border", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 border-b border-border bg-surface-secondary px-3 py-2", children: [(0, jsx_runtime_1.jsx)("figcaption", { className: "flex-1 truncate text-xs font-semibold", children: title ?? "Results" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-[11px] text-muted", children: [rows.length, " rows"] }), (0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, size: "sm", variant: "tertiary", "aria-label": "Download as CSV", onPress: downloadCsv, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { className: "size-3.5" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "overflow-x-auto", children: (0, jsx_runtime_1.jsxs)("table", { className: "w-full text-xs", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { className: "border-b border-border", children: columns.map((column, columnIndex) => {
+                                    const isSorted = sort?.column === columnIndex;
+                                    const Icon = !isSorted ? lucide_react_1.ChevronsUpDown : sort.direction === "asc" ? lucide_react_1.ArrowUp : lucide_react_1.ArrowDown;
+                                    return ((0, jsx_runtime_1.jsx)("th", { scope: "col", className: "p-0", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => toggleSort(columnIndex), "aria-label": `Sort by ${column.label}`, className: `flex w-full items-center gap-1 px-2.5 py-1.5 font-medium whitespace-nowrap hover:bg-surface-secondary ${(0, ai_format_js_1.isNumericAiFormat)(column.format) ? "justify-end" : "justify-start"}`, children: [column.label, (0, jsx_runtime_1.jsx)(Icon, { className: `size-3 shrink-0 ${isSorted ? "text-foreground" : "text-muted/60"}` })] }) }, columnIndex));
+                                }) }) }), (0, jsx_runtime_1.jsxs)("tbody", { children: [sorted.map((row, index) => ((0, jsx_runtime_1.jsx)("tr", { className: "border-b border-border/60 last:border-b-0", children: columns.map((column, columnIndex) => {
+                                        const value = row[columnIndex] ?? null;
+                                        return ((0, jsx_runtime_1.jsx)("td", { className: `px-2.5 py-1.5 align-top ${(0, ai_format_js_1.isNumericAiFormat)(column.format) ? "text-end tabular-nums" : "text-start"}`, children: column.format === "status" && value !== null ? ((0, jsx_runtime_1.jsx)(StatusChip, { value: value })) : ((0, jsx_runtime_1.jsx)("span", { className: value === null ? "text-muted" : undefined, children: (0, ai_format_js_1.formatAiValue)(value, column.format) })) }, columnIndex));
+                                    }) }, index))), sorted.length === 0 && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: columns.length, className: "px-2.5 py-3 text-center text-muted", children: ai_format_js_1.AI_EMPTY_VALUE }) }))] })] }) }), caption && (0, jsx_runtime_1.jsx)("p", { className: "border-t border-border px-3 py-1.5 text-[11px] text-muted", children: caption })] }));
+}
+/* ------------------------------------------------------------------ chart */
+/**
+ * The theme's categorical ramp. Series identity is carried by the legend as
+ * well as the hue, never by hue alone.
+ */
+const SERIES_COLORS = [
+    "var(--chart-cat-1, var(--accent))",
+    "var(--chart-cat-2, var(--warning))",
+    "var(--chart-cat-3, var(--success))",
+    "var(--chart-cat-4, var(--danger))",
+    "var(--chart-cat-5, var(--muted))",
+];
+const VIEW_W = 320;
+const VIEW_H = 140;
+const PAD = { top: 8, right: 8, bottom: 20, left: 44 };
+/**
+ * `showChart`. Cartesian kinds are drawn as SVG against a fixed viewBox and
+ * scaled by the browser, which is why there is no resize observer here: the
+ * chart is resolution-independent, so "responsive" costs nothing at runtime.
+ *
+ * `pie` is deliberately *not* a pie. In a 400px column a pie plus its legend
+ * is smaller than the labels it needs, and reading angles is worse than
+ * reading lengths at any size - so proportions render as a labelled bar list,
+ * which answers the same question and stays legible.
+ */
+function AiChart({ title, kind, xLabel, yLabel, valueFormat, series, caption }) {
+    const format = (value) => (0, ai_format_js_1.formatAiValue)(value, valueFormat);
+    const axis = series[0]?.points.map((point) => point.x) ?? [];
+    // Which x the pointer is nearest. An SVG chart is an interactive chart:
+    // without this the exact values are unreadable, because a 140px-tall plot
+    // can only carry three axis labels.
+    const [hovered, setHovered] = (0, react_1.useState)(null);
+    if (kind === "pie") {
+        const slices = series[0]?.points ?? [];
+        // Guards a divide-by-zero on an all-zero set, which would otherwise make
+        // every bar `NaN%` wide.
+        const total = slices.reduce((sum, point) => sum + (point.y ?? 0), 0) || 1;
+        return ((0, jsx_runtime_1.jsxs)(Panel, { title: title, children: [(0, jsx_runtime_1.jsx)("ul", { className: "space-y-1.5", children: slices.map((slice, index) => ((0, jsx_runtime_1.jsxs)("li", { className: "text-xs", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline justify-between gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "truncate", children: slice.x }), (0, jsx_runtime_1.jsxs)("span", { className: "shrink-0 tabular-nums text-muted", children: [format(slice.y ?? 0), " \u00B7 ", Math.round(((slice.y ?? 0) / total) * 100), "%"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-0.5 h-1.5 overflow-hidden rounded-full bg-surface-tertiary", children: (0, jsx_runtime_1.jsx)("div", { className: "h-full rounded-full", style: {
+                                        width: `${((slice.y ?? 0) / total) * 100}%`,
+                                        backgroundColor: SERIES_COLORS[index % SERIES_COLORS.length],
+                                    } }) })] }, slice.x))) }), caption && (0, jsx_runtime_1.jsx)("p", { className: "mt-2 text-[11px] text-muted", children: caption })] }));
+    }
+    const values = series.flatMap((entry) => entry.points.map((point) => point.y)).filter((y) => y !== null);
+    // A flat series would give a zero-height range and divide by zero; padding
+    // the top by 1 draws it as a line across the middle instead of NaN.
+    const max = values.length ? Math.max(...values, 0) : 1;
+    const min = values.length ? Math.min(...values, 0) : 0;
+    const range = max - min || 1;
+    const plotW = VIEW_W - PAD.left - PAD.right;
+    const plotH = VIEW_H - PAD.top - PAD.bottom;
+    const xAt = (index) => PAD.left + (axis.length <= 1 ? plotW / 2 : (index / (axis.length - 1)) * plotW);
+    const yAt = (value) => PAD.top + plotH - ((value - min) / range) * plotH;
+    /** Ticks at the extremes and the midpoint - three labels is all a 140px-tall plot can carry. */
+    const yTicks = [min, min + range / 2, max];
+    // First, middle and last x label only, for the same reason.
+    const xTicks = axis.length <= 3 ? axis.map((_, i) => i) : [0, Math.floor((axis.length - 1) / 2), axis.length - 1];
+    return ((0, jsx_runtime_1.jsxs)(Panel, { title: title, children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [hovered !== null && (
+                    // Positioned as a percentage of the plot so it tracks the mark at any
+                    // rendered width - the SVG scales, and this has to scale with it.
+                    (0, jsx_runtime_1.jsxs)("div", { className: "pointer-events-none absolute top-0 z-10 -translate-x-1/2 rounded-md border border-border bg-overlay px-2 py-1 text-[10px] shadow-lg", style: { left: `${(xAt(hovered) / VIEW_W) * 100}%` }, children: [(0, jsx_runtime_1.jsx)("p", { className: "font-medium", children: axis[hovered] }), series.map((entry, index) => {
+                                const value = entry.points[hovered]?.y;
+                                return ((0, jsx_runtime_1.jsxs)("p", { className: "flex items-center gap-1 text-muted", children: [(0, jsx_runtime_1.jsx)("span", { className: "size-1.5 shrink-0 rounded-full", style: { backgroundColor: SERIES_COLORS[index % SERIES_COLORS.length] }, "aria-hidden": true }), (0, jsx_runtime_1.jsx)("span", { className: "tabular-nums", children: value === null || value === undefined ? ai_format_js_1.AI_EMPTY_VALUE : format(value) })] }, entry.name));
+                            })] })), (0, jsx_runtime_1.jsxs)("svg", { viewBox: `0 0 ${VIEW_W} ${VIEW_H}`, className: "w-full", role: "img", "aria-label": title ?? "Chart", onMouseLeave: () => setHovered(null), children: [yTicks.map((tick) => ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("line", { x1: PAD.left, x2: VIEW_W - PAD.right, y1: yAt(tick), y2: yAt(tick), stroke: "var(--separator)", strokeDasharray: "3 3" }), (0, jsx_runtime_1.jsx)("text", { x: PAD.left - 4, y: yAt(tick) + 3, textAnchor: "end", fontSize: "7", fill: "var(--muted)", children: format(tick) })] }, tick))), xTicks.map((index) => ((0, jsx_runtime_1.jsx)("text", { x: xAt(index), y: VIEW_H - 6, textAnchor: "middle", fontSize: "7", fill: "var(--muted)", children: axis[index] }, index))), series.map((entry, seriesIndex) => {
+                                const color = SERIES_COLORS[seriesIndex % SERIES_COLORS.length];
+                                if (kind === "bar") {
+                                    const slot = plotW / Math.max(axis.length, 1);
+                                    // A 2px surface gap between adjacent series, so two bars in one
+                                    // slot read as two marks rather than one two-toned block.
+                                    const width = Math.max(2, (slot * 0.7) / series.length - (series.length > 1 ? 2 : 0));
+                                    return entry.points.map((point, index) => point.y === null ? null : ((0, jsx_runtime_1.jsx)("rect", { x: xAt(index) - (width * series.length) / 2 + seriesIndex * width, y: Math.min(yAt(point.y), yAt(0)), width: width, height: Math.max(1, Math.abs(yAt(point.y) - yAt(0))), fill: color, rx: "3" }, `${entry.name}-${point.x}`)));
+                                }
+                                // `null` breaks the path into separate segments rather than drawing
+                                // a straight line through a gap that has no data in it.
+                                const segments = [];
+                                let current = [];
+                                entry.points.forEach((point, index) => {
+                                    if (point.y === null) {
+                                        if (current.length)
+                                            segments.push(current.join(" "));
+                                        current = [];
+                                        return;
+                                    }
+                                    current.push(`${current.length ? "L" : "M"}${xAt(index)},${yAt(point.y)}`);
+                                });
+                                if (current.length)
+                                    segments.push(current.join(" "));
+                                return ((0, jsx_runtime_1.jsxs)("g", { children: [kind === "area" && segments.length === 1 && ((0, jsx_runtime_1.jsx)("path", { d: `${segments[0]} L${xAt(entry.points.length - 1)},${yAt(min)} L${xAt(0)},${yAt(min)} Z`, fill: color, fillOpacity: "0.15" })), segments.map((segment) => ((0, jsx_runtime_1.jsx)("path", { d: segment, fill: "none", stroke: color, strokeWidth: "1.5", strokeLinejoin: "round" }, segment)))] }, entry.name));
+                            }), axis.map((label, index) => ((0, jsx_runtime_1.jsx)("rect", { x: xAt(index) - plotW / Math.max(axis.length, 1) / 2, y: PAD.top, width: plotW / Math.max(axis.length, 1), height: plotH, fill: "transparent", onMouseEnter: () => setHovered(index) }, label))), hovered !== null && ((0, jsx_runtime_1.jsx)("line", { x1: xAt(hovered), x2: xAt(hovered), y1: PAD.top, y2: PAD.top + plotH, stroke: "var(--border)", strokeWidth: "1" }))] })] }), (series.length > 1 || xLabel || yLabel) && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] text-muted", children: [series.length > 1 &&
+                        series.map((entry, index) => ((0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "size-2 rounded-full", style: { backgroundColor: SERIES_COLORS[index % SERIES_COLORS.length] }, "aria-hidden": true }), entry.name] }, entry.name))), yLabel && (0, jsx_runtime_1.jsxs)("span", { children: ["y: ", yLabel] }), xLabel && (0, jsx_runtime_1.jsxs)("span", { children: ["x: ", xLabel] })] })), caption && (0, jsx_runtime_1.jsx)("p", { className: "mt-2 text-[11px] text-muted", children: caption })] }));
+}
+/* ----------------------------------------------------------------- panels */
+/**
+ * `showMetrics`. A delta is coloured by `deltaMeaning`, not by its sign -
+ * churn rising is bad and revenue rising is good, and painting both green
+ * because the arrow points up is exactly the confidently-wrong signal a
+ * dashboard must never send. The arrow still shows direction, so meaning and
+ * direction stay two separate channels.
+ */
+function AiMetrics({ title, metrics }) {
+    return ((0, jsx_runtime_1.jsx)(Panel, { title: title, children: (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 gap-2", children: metrics.map((metric) => {
+                const delta = metric.delta ?? null;
+                const rising = delta !== null && delta > 0;
+                const Arrow = delta === null || delta === 0 ? lucide_react_1.Minus : rising ? lucide_react_1.TrendingUp : lucide_react_1.TrendingDown;
+                const good = metric.deltaMeaning === "neutral" || delta === null || delta === 0
+                    ? null
+                    : metric.deltaMeaning === "up-is-good"
+                        ? rising
+                        : !rising;
+                return ((0, jsx_runtime_1.jsxs)("div", { className: "rounded-md bg-surface-secondary p-2.5", children: [(0, jsx_runtime_1.jsx)("p", { className: "truncate text-[11px] text-muted", children: metric.label }), (0, jsx_runtime_1.jsx)("p", { className: "mt-0.5 text-base font-semibold tabular-nums", children: (0, ai_format_js_1.formatAiValue)(metric.value, metric.format) }), delta !== null && ((0, jsx_runtime_1.jsxs)("p", { className: `mt-0.5 flex items-center gap-0.5 text-[11px] tabular-nums ${good === null ? "text-muted" : good ? "text-success" : "text-danger"}`, children: [(0, jsx_runtime_1.jsx)(Arrow, { className: "size-3", "aria-hidden": true }), (0, ai_format_js_1.formatAiValue)(Math.abs(delta), "percent")] })), metric.hint && (0, jsx_runtime_1.jsx)("p", { className: "mt-0.5 text-[10px] text-muted", children: metric.hint })] }, metric.label));
+            }) }) }));
+}
+/** `showTimeline`: dated events, oldest first, on a single rail. */
+function AiTimeline({ title, events }) {
+    return ((0, jsx_runtime_1.jsx)(Panel, { title: title, children: (0, jsx_runtime_1.jsxs)("ol", { className: "relative space-y-3 ps-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "absolute inset-y-1 start-1 w-px bg-border", "aria-hidden": true }), events.map((event, index) => ((0, jsx_runtime_1.jsxs)("li", { className: "relative", children: [(0, jsx_runtime_1.jsx)("span", { className: `absolute -start-4 top-1 size-2 rounded-full ring-2 ring-surface ${ai_format_js_1.AI_TONE_DOT[event.tone]}`, "aria-hidden": true }), (0, jsx_runtime_1.jsx)("p", { className: "text-[11px] text-muted", children: (0, ai_format_js_1.formatAiValue)(event.at, "datetime") }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs font-medium", children: event.title }), event.detail && (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-muted", children: event.detail })] }, `${event.at}-${index}`)))] }) }));
+}
+/** `showDetails`: one entity's fields, as a definition list rather than a one-row table. */
+function AiDetails({ title, fields }) {
+    return ((0, jsx_runtime_1.jsx)(Panel, { title: title, children: (0, jsx_runtime_1.jsx)("dl", { className: "divide-y divide-border/60", children: fields.map((field) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3 py-1.5 first:pt-0 last:pb-0", children: [(0, jsx_runtime_1.jsx)("dt", { className: "w-2/5 shrink-0 text-xs text-muted", children: field.label }), (0, jsx_runtime_1.jsx)("dd", { className: `min-w-0 flex-1 text-xs break-words ${TONE_TEXT[field.tone]}`, children: field.format === "status" && field.value !== null ? ((0, jsx_runtime_1.jsx)(StatusChip, { value: field.value })) : ((0, ai_format_js_1.formatAiValue)(field.value, field.format)) })] }, field.label))) }) }));
+}
+/** `showSteps`: an ordered procedure. `renderDetail` is how the panel feeds each step back through its markdown renderer. */
+function AiSteps({ title, steps, renderDetail, }) {
+    return ((0, jsx_runtime_1.jsx)(Panel, { title: title, children: (0, jsx_runtime_1.jsx)("ol", { className: "space-y-2.5", children: steps.map((step, index) => ((0, jsx_runtime_1.jsxs)("li", { className: "flex gap-2.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-accent/12 text-[10px] font-semibold text-accent", children: index + 1 }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs font-medium", children: step.title }), step.detail && ((0, jsx_runtime_1.jsx)("div", { className: "mt-0.5 text-xs text-muted", children: renderDetail ? renderDetail(step.detail) : (0, jsx_runtime_1.jsx)("span", { className: "whitespace-pre-wrap", children: step.detail }) }))] })] }, step.title))) }) }));
+}
+/**
+ * `showSources`: what a grounded answer actually rested on. The point of a
+ * citation is that it can be opened, so a source with a `uri` is a link and one
+ * without is still a named row - never a marker with nothing behind it.
+ */
+function AiSources({ sources }) {
+    return ((0, jsx_runtime_1.jsxs)("figure", { className: "my-3 rounded-lg border border-border bg-surface-secondary p-2.5", children: [(0, jsx_runtime_1.jsx)("figcaption", { className: "mb-1.5 text-[11px] font-semibold tracking-wide text-muted uppercase", children: "Sources" }), (0, jsx_runtime_1.jsx)("ul", { className: "space-y-1.5", children: sources.map((source, index) => {
+                    const label = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { className: "mt-0.5 size-3 shrink-0 text-muted", "aria-hidden": true }), (0, jsx_runtime_1.jsxs)("span", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "block truncate text-xs font-medium", children: source.title }), source.snippet && (0, jsx_runtime_1.jsxs)("span", { className: "mt-0.5 block text-[11px] text-muted italic", children: ["\u201C", source.snippet, "\u201D"] })] })] }));
+                    return ((0, jsx_runtime_1.jsx)("li", { children: source.uri ? ((0, jsx_runtime_1.jsxs)("a", { href: source.uri, target: "_blank", rel: "noopener noreferrer", className: "flex gap-1.5 rounded-sm hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus", children: [label, (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "mt-0.5 size-3 shrink-0 text-muted", "aria-hidden": true })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "flex gap-1.5", children: label })) }, `${source.uri ?? source.title}-${index}`));
+                }) })] }));
+}

package/dist/cjs/client/components/app-shell.js

@@ -1,7 +1,7 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConnectAppShell = ConnectAppShell;
+exports.AppShell = AppShell;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@heroui/react");
@@ -9,6 +9,7 @@ const lucide_react_1 = require("lucide-react");
 const provider_js_1 = require("../provider.js");
 const access_gate_js_1 = require("./access-gate.js");
 const apps_grid_js_1 = require("./apps-grid.js");
+const ask_ai_js_1 = require("./ask-ai.js");
 const auth_buttons_js_1 = require("./auth-buttons.js");
 const logo_js_1 = require("./logo.js");
 const side_nav_js_1 = require("./side-nav.js");
@@ -67,12 +68,12 @@ function BrandLink({ name, icon, homeHref, collapsed, renderLink, }) {
     });
 }
 /**
- * The application frame every CosmoOps service platform runs inside: a
+ * The application frame every CosmoOps application platform runs inside: a
  * collapsible sidebar, a top bar carrying the app launcher and the account
  * menu, and your pages in the middle.
  *
  * This is the piece each partner was otherwise writing by hand, and writing
- * slightly differently - which is how a family of services stops looking like
+ * slightly differently - which is how a family of applications stops looking like
  * one product. Everything that should be identical across platforms (the
  * lockup, the rail geometry, the active-route treatment, the launcher, the
  * account menu, the access gate) lives here; everything that genuinely
@@ -82,12 +83,12 @@ function BrandLink({ name, icon, homeHref, collapsed, renderLink, }) {
  * "use client";
  * import Link from "next/link";
  * import { usePathname } from "next/navigation";
- * import { ConnectAppShell } from "@cosmoops/connect-sdk/client";
+ * import { AppShell } from "@cosmoops/connect-sdk/client";
  * import { LayoutDashboard, Truck } from "lucide-react";
  *
  * export function Shell({ children }: { children: React.ReactNode }) {
  *   return (
- *     <ConnectAppShell
+ *     <AppShell
  *       name="Dispatch"
  *       icon={<Truck />}
  *       activePath={usePathname()}
@@ -98,7 +99,7 @@ function BrandLink({ name, icon, homeHref, collapsed, renderLink, }) {
  *       ]}
  *     >
  *       {children}
- *     </ConnectAppShell>
+ *     </AppShell>
  *   );
  * }
  * ```
@@ -112,7 +113,7 @@ function BrandLink({ name, icon, homeHref, collapsed, renderLink, }) {
  * so a page with a shell, a plan table and a usage meter still makes one
  * session read.
  */
-function ConnectAppShell({ name, icon, homeHref = "/", nav, activePath, renderLink = side_nav_js_1.defaultRenderLink, title, headerActions, sidebarFooter, footer, defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, collapsible = true, showAppsGrid = true, showAuthButtons = true, theme, onThemeChange, gate = true, gateExemptRoutes, className, contentClassName, children, }) {
+function AppShell({ name, icon, homeHref = "/", nav, activePath, renderLink = side_nav_js_1.defaultRenderLink, title, headerActions, sidebarFooter, footer, defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, collapsible = true, showAppsGrid = true, showAuthButtons = true, theme, onThemeChange, gate = true, gateExemptRoutes, askAi = true, className, contentClassName, children, }) {
     const { session, isLoading } = (0, provider_js_1.useConnect)();
     const pathname = (0, use_active_path_js_1.useActivePath)(activePath);
     const [mobileOpen, setMobileOpen] = (0, react_1.useState)(false);
@@ -153,5 +154,5 @@ function ConnectAppShell({ name, icon, homeHref = "/", nav, activePath, renderLi
                             // leaves this icon-only button with no accessible name at all.
                             // The wrapper is for trigger elements React Aria cannot drive
                             // directly; a HeroUI `Button` is not one.
-                            (0, jsx_runtime_1.jsxs)(react_2.Tooltip, { delay: 200, children: [(0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, variant: "tertiary", size: "sm", "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", className: collapsed ? "" : "self-start", onPress: toggleCollapsed, children: collapsed ? (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftOpen, { className: "size-4" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { className: "size-4" }) }), (0, jsx_runtime_1.jsx)(react_2.Tooltip.Content, { placement: "right", children: collapsed ? "Expand sidebar" : "Collapse sidebar" })] }))] })] }), (0, jsx_runtime_1.jsx)(react_2.Drawer.Backdrop, { isOpen: mobileOpen, onOpenChange: setMobileOpen, children: (0, jsx_runtime_1.jsx)(react_2.Drawer.Content, { placement: "left", className: "w-72 max-w-[80vw]", children: (0, jsx_runtime_1.jsxs)(react_2.Drawer.Dialog, { "aria-label": "Navigation menu", children: [(0, jsx_runtime_1.jsx)(react_2.Drawer.CloseTrigger, {}), (0, jsx_runtime_1.jsx)(react_2.Drawer.Header, { children: (0, jsx_runtime_1.jsx)(react_2.Drawer.Heading, { "aria-label": name, children: (0, jsx_runtime_1.jsx)(logo_js_1.ConnectLogo, { name: name, icon: icon }) }) }), (0, jsx_runtime_1.jsx)(react_2.Drawer.Body, { children: sideNav(true) }), sidebarFooter && (0, jsx_runtime_1.jsx)(react_2.Drawer.Footer, { className: "flex flex-col items-stretch gap-3", children: sidebarFooter })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [(0, jsx_runtime_1.jsxs)("header", { className: "flex h-16 shrink-0 items-center gap-3 border-b border-border bg-surface px-4 md:px-6", children: [(0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, variant: "tertiary", size: "sm", className: "md:hidden", "aria-label": "Open navigation menu", onPress: () => setMobileOpen(true), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Menu, { className: "size-5" }) }), typeof title === "string" ? ((0, jsx_runtime_1.jsx)("h1", { className: "truncate text-lg font-semibold text-foreground", children: title })) : (title), (0, jsx_runtime_1.jsxs)("div", { className: "ml-auto flex items-center gap-1", children: [headerActions, showAppsGrid && (0, jsx_runtime_1.jsx)(apps_grid_js_1.ConnectAppsGrid, {}), (0, jsx_runtime_1.jsx)(user_menu_js_1.ConnectUserMenu, { compact: true, theme: theme, onThemeChange: onThemeChange }), showAuthButtons && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(auth_buttons_js_1.ConnectLoginButton, { size: "sm" }), (0, jsx_runtime_1.jsx)(auth_buttons_js_1.ConnectRegisterButton, { size: "sm" })] }))] })] }), (0, jsx_runtime_1.jsx)("main", { className: "flex-1 overflow-y-auto", children: (0, jsx_runtime_1.jsxs)("div", { className: contentClassName ?? "mx-auto w-full max-w-6xl px-4 py-6 md:px-6 md:py-8", children: [gated ? (0, jsx_runtime_1.jsx)(access_gate_js_1.ConnectAccessGate, { children: children }) : children, footer] }) })] })] }));
+                            (0, jsx_runtime_1.jsxs)(react_2.Tooltip, { delay: 200, children: [(0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, variant: "tertiary", size: "sm", "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", className: collapsed ? "" : "self-start", onPress: toggleCollapsed, children: collapsed ? (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftOpen, { className: "size-4" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { className: "size-4" }) }), (0, jsx_runtime_1.jsx)(react_2.Tooltip.Content, { placement: "right", children: collapsed ? "Expand sidebar" : "Collapse sidebar" })] }))] })] }), (0, jsx_runtime_1.jsx)(react_2.Drawer.Backdrop, { isOpen: mobileOpen, onOpenChange: setMobileOpen, children: (0, jsx_runtime_1.jsx)(react_2.Drawer.Content, { placement: "left", className: "w-72 max-w-[80vw]", children: (0, jsx_runtime_1.jsxs)(react_2.Drawer.Dialog, { "aria-label": "Navigation menu", children: [(0, jsx_runtime_1.jsx)(react_2.Drawer.CloseTrigger, {}), (0, jsx_runtime_1.jsx)(react_2.Drawer.Header, { children: (0, jsx_runtime_1.jsx)(react_2.Drawer.Heading, { "aria-label": name, children: (0, jsx_runtime_1.jsx)(logo_js_1.ConnectLogo, { name: name, icon: icon }) }) }), (0, jsx_runtime_1.jsx)(react_2.Drawer.Body, { children: sideNav(true) }), sidebarFooter && (0, jsx_runtime_1.jsx)(react_2.Drawer.Footer, { className: "flex flex-col items-stretch gap-3", children: sidebarFooter })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [(0, jsx_runtime_1.jsxs)("header", { className: "flex h-16 shrink-0 items-center gap-3 border-b border-border bg-surface px-4 md:px-6", children: [(0, jsx_runtime_1.jsx)(react_2.Button, { isIconOnly: true, variant: "tertiary", size: "sm", className: "md:hidden", "aria-label": "Open navigation menu", onPress: () => setMobileOpen(true), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Menu, { className: "size-5" }) }), typeof title === "string" ? ((0, jsx_runtime_1.jsx)("h1", { className: "truncate text-lg font-semibold text-foreground", children: title })) : (title), (0, jsx_runtime_1.jsxs)("div", { className: "ml-auto flex items-center gap-1", children: [headerActions, showAppsGrid && (0, jsx_runtime_1.jsx)(apps_grid_js_1.ConnectAppsGrid, {}), (0, jsx_runtime_1.jsx)(user_menu_js_1.ConnectUserMenu, { compact: true, theme: theme, onThemeChange: onThemeChange }), showAuthButtons && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(auth_buttons_js_1.ConnectLoginButton, { size: "sm" }), (0, jsx_runtime_1.jsx)(auth_buttons_js_1.ConnectRegisterButton, { size: "sm" })] }))] })] }), (0, jsx_runtime_1.jsx)("main", { className: "flex-1 overflow-y-auto", children: (0, jsx_runtime_1.jsxs)("div", { className: contentClassName ?? "mx-auto w-full max-w-6xl px-4 py-6 md:px-6 md:py-8", children: [gated ? (0, jsx_runtime_1.jsx)(access_gate_js_1.ConnectAccessGate, { children: children }) : children, footer] }) })] }), askAi && (0, jsx_runtime_1.jsx)(ask_ai_js_1.ConnectAskAi, { ...(askAi === true ? {} : askAi) })] }));
 }

package/dist/cjs/client/components/apps-grid.js

@@ -22,7 +22,7 @@ function AppTile({ app }) {
 }
 /**
  * The Google-style app launcher: a grid icon in your top bar that opens a
- * modal of every Connect service this organization can actually open.
+ * modal of every Connect application this workspace can actually open.
  *
  * Only launchable apps appear, so no tile is a dead end - a paused
  * subscription still shows, badged, because a dunning cycle should not make a
@@ -39,9 +39,9 @@ function ConnectAppsGrid({ className, label = "Switch app" }) {
     if (sessionLoading || !session?.user)
         return null;
     const apps = data?.apps ?? [];
-    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsxs)(react_1.Modal, { children: [(0, jsx_runtime_1.jsx)(react_1.Button, { isIconOnly: true, variant: "primary", "aria-label": label, className: className, children: (0, jsx_runtime_1.jsx)(lucide_react_1.LayoutGrid, { className: "size-5" }) }), (0, jsx_runtime_1.jsx)(react_1.Modal.Backdrop, { children: (0, jsx_runtime_1.jsx)(react_1.Modal.Container, { children: (0, jsx_runtime_1.jsxs)(react_1.Modal.Dialog, { className: "sm:max-w-md", 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: "Your apps" }) }), (0, jsx_runtime_1.jsxs)(react_1.Modal.Body, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-3 gap-2", children: Array.from({ length: 6 }, (_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-2 p-3", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "size-12 rounded-xl" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-3 w-14" })] }, index))) })), !isLoading && error && ((0, jsx_runtime_1.jsx)("p", { className: "py-6 text-center text-sm text-danger", children: "Could not load your apps." })), !isLoading && !error && apps.length === 0 && ((0, jsx_runtime_1.jsx)("p", { className: "py-6 text-center text-sm text-muted", children: "No other apps yet. Anything this workspace subscribes to shows up here." })), !isLoading && !error && apps.length > 0 && ((0, jsx_runtime_1.jsx)(motion_js_1.m.div, { className: "grid grid-cols-3 gap-2", variants: { show: { transition: { staggerChildren: 0.04 } } }, initial: "hidden", animate: "show", children: apps.map((app) => ((0, jsx_runtime_1.jsx)(motion_js_1.m.div, { variants: { hidden: { opacity: 0, y: 8 }, show: { opacity: 1, y: 0, transition: motion_js_1.ENTER } }, children: (0, jsx_runtime_1.jsx)(AppTile, { app: app }) }, app.serviceId))) }))] }), (0, jsx_runtime_1.jsx)(react_1.Modal.Footer, { children: (0, jsx_runtime_1.jsx)(ConnectBrowseAllLink, {}) })] }) }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(motion_js_1.MotionProvider, { children: (0, jsx_runtime_1.jsxs)(react_1.Modal, { children: [(0, jsx_runtime_1.jsx)(react_1.Button, { isIconOnly: true, variant: "primary", "aria-label": label, className: className, children: (0, jsx_runtime_1.jsx)(lucide_react_1.LayoutGrid, { className: "size-5" }) }), (0, jsx_runtime_1.jsx)(react_1.Modal.Backdrop, { children: (0, jsx_runtime_1.jsx)(react_1.Modal.Container, { children: (0, jsx_runtime_1.jsxs)(react_1.Modal.Dialog, { className: "sm:max-w-md", 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: "Your apps" }) }), (0, jsx_runtime_1.jsxs)(react_1.Modal.Body, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-3 gap-2", children: Array.from({ length: 6 }, (_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-2 p-3", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "size-12 rounded-xl" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-3 w-14" })] }, index))) })), !isLoading && error && ((0, jsx_runtime_1.jsx)("p", { className: "py-6 text-center text-sm text-danger", children: "Could not load your apps." })), !isLoading && !error && apps.length === 0 && ((0, jsx_runtime_1.jsx)("p", { className: "py-6 text-center text-sm text-muted", children: "No other apps yet. Anything this workspace subscribes to shows up here." })), !isLoading && !error && apps.length > 0 && ((0, jsx_runtime_1.jsx)(motion_js_1.m.div, { className: "grid grid-cols-3 gap-2", variants: { show: { transition: { staggerChildren: 0.04 } } }, initial: "hidden", animate: "show", children: apps.map((app) => ((0, jsx_runtime_1.jsx)(motion_js_1.m.div, { variants: { hidden: { opacity: 0, y: 8 }, show: { opacity: 1, y: 0, transition: motion_js_1.ENTER } }, children: (0, jsx_runtime_1.jsx)(AppTile, { app: app }) }, app.applicationId))) }))] }), (0, jsx_runtime_1.jsx)(react_1.Modal.Footer, { children: (0, jsx_runtime_1.jsx)(ConnectBrowseAllLink, {}) })] }) }) })] }) }));
 }
 function ConnectBrowseAllLink() {
     const { appUrl } = (0, provider_js_1.useConnect)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "tertiary", className: "w-full", onPress: () => window.open(`${appUrl}/services`, "_blank", "noopener,noreferrer"), children: ["Browse all services", (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "size-3.5 text-muted" })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Button, { variant: "tertiary", className: "w-full", onPress: () => window.open(`${appUrl}/applications`, "_blank", "noopener,noreferrer"), children: ["Browse all applications", (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { className: "size-3.5 text-muted" })] }));
 }