@cosmoops/connect-sdk 0.9.0 → 0.16.0

package/README.md

@@ -12,13 +12,14 @@ npm install @cosmoops/connect-sdk
 npm install streamdown   # optional — Ask AI's markdown renderer, see step 4
 ```
 
-Two entry points, and the split is a security boundary, not a preference:
+Five entry points, and the split is a security boundary, not a preference:
 
 | Import | Runs in | Holds the API key |
 | --- | --- | --- |
 | `@cosmoops/connect-sdk/server` | your backend | **yes** |
 | `@cosmoops/connect-sdk/client` | the browser | never |
 | `@cosmoops/connect-sdk/next` | your backend | **yes** (Next.js plug-and-play) |
+| `@cosmoops/connect-sdk/mcp` | your backend | **yes** (store, as MCP tools) |
 | `@cosmoops/connect-sdk` | anywhere | types + `ConnectError` only |
 
 The browser half never sees a credential. It calls your own origin, and
@@ -35,7 +36,7 @@ The fast path — most integrations are this and nothing else. Not on Next.js?
 Skip to [Other frameworks](#other-frameworks); the shape is the same, you
 just wire the session cookie yourself.
 
-**1. Install and get credentials.** From your application's Integration tab
+**1. Install and get credentials.** From your application's Connect client section
 in Connect, copy the API key and OAuth client id.
 
 ```bash
@@ -87,7 +88,7 @@ import "streamdown/styles.css";
 Skip the last two if you pass `askAi={false}` to `AppShell`. The colour tokens
 Streamdown expects are already mapped onto HeroUI's in `theme.css`.
 
-**5. Register the redirect URI.** In the application's Integration tab, add
+**5. Register the redirect URI.** In the application's Connect client section, add
 `{your origin}/api/connect/callback`. This is the one step the SDK cannot do
 for you.
 
@@ -123,7 +124,7 @@ layout and Connect's dashboard rather than files it can safely write. See
 
 Two things most integrations add next:
 
-- **A shell** — `AppShell` from `/client` is the sidebar, top bar and access
+- **A shell** — `AppShell` from `/client` is the rail and the access
   gate every application platform needs. See [App shell](#app-shell).
 - **Route protection before render** — see [Route protection and
   `proxy.ts`](#route-protection-and-proxyts) below; `requireConnectSession()`
@@ -136,7 +137,7 @@ for you under the hood.
 
 ## Server setup
 
-One credential does three jobs — the API key plaintext from your application's Integration tab is also your OAuth2 `client_secret` and the key your `id_token` is signed with. Revoking it revokes all three.
+One credential does three jobs — the API key plaintext from your application's Connect client section is also your OAuth2 `client_secret` and the key your `id_token` is signed with. Revoking it revokes all three.
 
 ```ts
 import { ConnectClient } from "@cosmoops/connect-sdk/server";
@@ -518,17 +519,17 @@ that URL yourself instead.
 import {
   AppShell,
   ConnectLoginButton, ConnectRegisterButton,
-  ConnectUserMenu, ConnectAppsGrid, ConnectPlans,
+  ConnectUserButton, ConnectAppsGrid, ConnectPlans,
 } from "@cosmoops/connect-sdk/client";
 
-// The whole frame — sidebar, top bar, access gate, Ask AI. See "App shell" below.
-<AppShell name="Dispatch" nav={nav}>{children}</AppShell>
+// The whole frame — the rail, the access gate, Ask AI. See "App shell" below.
+<AppShell name="Dispatch" nav={nav} secondaryNav={settingsNav}>{children}</AppShell>
 
 // Or the pieces, if you already have a layout. The pair swaps automatically
 // on sign-in state.
-<ConnectAppsGrid />
+<ConnectAppsGrid variant="icon" />
 <ConnectLoginButton />
-<ConnectUserMenu />
+<ConnectUserButton variant="inline" />
 
 // Pricing page
 <ConnectPlans />
@@ -536,10 +537,13 @@ import {
 
 | Component | What it does |
 | --- | --- |
-| `AppShell` | **The whole application frame** — collapsible sidebar, top bar with the launcher and account menu, and your pages in the middle. Mounts `ConnectAccessGate` for you. |
-| `ConnectSideNav` | The sidebar's nav column on its own — sections, one level of children, active-route highlight — for an app that already has its own chrome. |
+| `AppShell` | **The whole application frame** — one collapsible rail carrying the brand, workspace switcher, both navs, the launcher and the account row, with your pages beside it. No top bar. Mounts `ConnectAccessGate` for you. The one `/client` export without the `Connect` prefix; alias it on import if your own layout shares the name. |
+| `ConnectSidebar` · `ConnectSidebarHeader` · `ConnectSidebarBody` · `ConnectSidebarFooter` · `ConnectSidebarRow` | The rail in pieces, for chrome the props cannot express. `AppShell` composes exactly these; they coordinate through `ConnectShellProvider`. |
+| `ConnectSidebarNav` | The rail's nav column on its own — sections, one level of children, active-route highlight — for an app that already has its own chrome. (Was `ConnectSideNav`.) |
 | `ConnectLoginButton` · `ConnectRegisterButton` | "Continue with Connect", in the shape people know from Google. Render nothing when signed in. |
-| `ConnectUserMenu` | Avatar, name, workspace. Profile, Manage subscription and Open Connect each open Connect in a new tab; Sign out acts in place. Renders nothing when signed out. |
+| `ConnectUserButton` | The account row at the foot of the rail — circular avatar, name over email — opening a modal with identity, sessions and the Connect destinations. Profile, Manage subscription and Open Connect each open Connect in a new tab; Sign out acts in place. Renders nothing when signed out. (Was `ConnectUserMenu`.) |
+| `ConnectProfileModal` | The same modal with no trigger, driven by `isOpen`/`onOpenChange` — for an app keeping its own account control. |
+| `ConnectWorkspaceSwitcher` | Sits in the rail's header. Hides itself for an account with one workspace; shows unusable ones disabled, with the reason. |
 | `ConnectAppsGrid` | Google-style launcher — grid icon opening a modal of every app this workspace can open. |
 | `ConnectPlans` | Monthly/annual toggle, features, add-ons, live discount, coupon field, and the subscribe / upgrade / downgrade / cancel flow. |
 | `ConnectPlansPage` | A whole `/plans` page — readiness banner, current subscription, and the grid. What `connect-sdk init` scaffolds. |
@@ -706,21 +710,20 @@ export function Shell({ children }: { children: React.ReactNode }) {
       nav={[
         { label: "Overview", href: "/", icon: <LayoutDashboard className="size-5" /> },
         { label: "Shipments", href: "/shipments", icon: <Truck className="size-5" /> },
+      ]}
+      // Pinned to the foot of the rail: the routes you go to in order to
+      // change how the job works, not to do it.
+      secondaryNav={[
         {
-          title: "Workspace",
+          label: "Settings",
+          href: "/settings",
+          icon: <Settings className="size-5" />,
           items: [
-            {
-              label: "Settings",
-              href: "/settings",
-              icon: <Settings className="size-5" />,
-              items: [
-                { label: "Members", href: "/settings/members" },
-                { label: "Billing", href: "/settings/billing" },
-              ],
-            },
-            { label: "Plans", href: "/plans", icon: <Receipt className="size-5" />, gateExempt: true },
+            { label: "Members", href: "/settings/members" },
+            { label: "Billing", href: "/settings/billing" },
           ],
         },
+        { label: "Plans", href: "/plans", icon: <Receipt className="size-5" />, gateExempt: true },
       ]}
     >
       {children}
@@ -729,10 +732,16 @@ export function Shell({ children }: { children: React.ReactNode }) {
 }
 ```
 
-That is the entire layout of a application platform. Everything that should look
-identical across the family — the lockup, the rail geometry, the active-route
-treatment, the app launcher, the account menu, the mobile drawer — comes from
-here; only `name`, `icon` and `nav` differ per platform.
+That is the entire layout of an application platform. Everything that should
+look identical across the family — the lockup, the rail geometry, the
+active-route treatment, the app launcher, the account row, the mobile drawer —
+comes from here; only `name`, `icon` and the two navs differ per platform.
+
+**There is no top bar.** The launcher and the account row live at the foot of
+the rail, one press from wherever the pointer already is, and a page's own
+heading belongs to the page — put it in `ConnectPageShell` from
+`@cosmoops/connect-sdk/ui`. Below `md` a slim bar carries the drawer trigger
+and nothing else.
 
 **Routing is a prop.** The SDK ships into any React app and cannot import
 `next/link`, so `renderLink` is how your router gets involved; the default is a
@@ -747,7 +756,7 @@ around `children` — an app that ships a shell and forgets the gate is an app
 that lets a suspended workspace keep working. The chrome is never gated: the
 sidebar, the lockup, the account menu and sign-out stay reachable in every
 blocked state. Routes that resolve a block rather than needing one — your
-pricing page — are flagged where they are declared:
+pricing page — are flagged where they are declared, in either nav:
 
 ```tsx
 { label: "Plans", href: "/plans", gateExempt: true }
@@ -771,26 +780,38 @@ Connect, and `ai:chat` on the API key behind your bridge.
 
 Other things worth knowing:
 
-- **The rail collapses to icons** and remembers the choice per browser
-  (`localStorage`). Drive it yourself with `collapsed` + `onCollapsedChange`,
-  or pin it open with `collapsible={false}`.
-- **Below `md` there is no rail**, only a drawer behind the top bar's menu
+- **The rail starts collapsed** and remembers the choice per browser
+  (`localStorage`). The icon rail is the resting state; expanding is the
+  deliberate act. Expanded, the collapse control sits at the header's trailing
+  edge; collapsed, hovering the lockup swaps it for the expand glyph — so the
+  rail spends no row on a permanent control, at the cost of the lockup no
+  longer being a link home while collapsed. Pass `defaultCollapsed={false}` to
+  open by default, drive it with `collapsed` + `onCollapsedChange`, or pin it
+  open with `collapsible={false}`.
+- **The collapse animates width and nothing else.** Every row is laid out so
+  its glyph sits on the same horizontal centre in both states, and labels are
+  clipped rather than re-measured — so no row reflows and nothing drifts
+  sideways mid-transition.
+- **Below `md` there is no rail**, only a drawer behind the mobile bar's menu
   button — a 64px icon strip on a phone is a worse drawer, not a smaller one.
 - **Children unfold only on the branch you are on.** A sidebar that opens
   every branch at once is a sitemap.
 - **No `isSignedIn` branch, in here or in yours.** The auth buttons render
-  nothing once a session exists, the account menu renders nothing without one,
+  nothing once a session exists, the account row renders nothing without one,
   and the launcher renders nothing when signed out.
-- `title`, `headerActions`, `sidebarFooter` and `footer` are slots;
-  `contentClassName` replaces the content pane's default max-width and
-  padding.
-- `theme` / `onThemeChange` pass straight through to `ConnectUserMenu` — the
+- `secondaryNav`, `sidebarFooter` and `footer` are slots; `contentClassName`
+  replaces the content pane's default max-width and padding. (`title` and
+  `headerActions` are gone with the top bar — see the 0.12.0 changelog entry.)
+- `theme` / `onThemeChange` pass straight through to `ConnectUserButton` — the
   SDK has no theme provider of its own, deliberately.
 
-`ConnectSideNav` is the nav column alone, for an app with chrome it already
-likes. `resolveActivePath` and `isNavItemActive` are the same pure functions
-the rail highlights with, exported so a breadcrumb or a document title derived
-from your nav cannot disagree with it.
+`ConnectSidebarNav` is the nav column alone, for an app with chrome it already
+likes, and `ConnectSidebar` / `ConnectSidebarHeader` / `ConnectSidebarBody` /
+`ConnectSidebarFooter` / `ConnectSidebarRow` are the rest of the rail — the
+exact pieces `AppShell` composes, so chrome the props cannot express is a
+rearrangement rather than a fork. `resolveActivePath` and `isNavItemActive` are
+the same pure functions the rail highlights with, exported so a breadcrumb or a
+document title derived from your nav cannot disagree with it.
 
 ### Logo
 
@@ -825,6 +846,56 @@ So the hand-off is a URL, and Connect renders it as a modal over the relevant pa
 
 Full history: [CHANGELOG.md](./CHANGELOG.md). Latest first:
 
+### 0.12.0 — breaking
+
+The application shell is one column. **The top bar is gone**; the rail holds
+everything it used to, and starts collapsed.
+
+- **`title` and `headerActions` are removed** with the bar that held them. A
+  page's heading goes in `ConnectPageShell` (from `/ui`), next to that page's
+  own breadcrumbs and actions; an application-level control goes in
+  `sidebarFooter` as a `ConnectSidebarRow`.
+- **`defaultCollapsed` now defaults to `true`.** Pass `false` for 0.11's
+  behaviour.
+- **`ConnectSideNav` → `ConnectSidebarNav`**, **`ConnectUserMenu` →
+  `ConnectUserButton`**. Both old names remain as deprecated aliases.
+  `AppShell` keeps its name — the one export here without the `Connect`
+  prefix, as decided in 0.8.0.
+- **New:** `secondaryNav` (a second nav group pinned to the foot of the rail),
+  `ConnectProfileModal` (the account modal with no trigger), and the rail's
+  own pieces — `ConnectSidebar`, `ConnectSidebarHeader`, `ConnectSidebarBody`,
+  `ConnectSidebarFooter`, `ConnectSidebarRow`, `ConnectShellProvider`,
+  `useConnectShell`, `sidebarRowClass`.
+- **The workspace switcher moved into the rail's header** and is collapse-aware;
+  the account row sits at the foot with a circular avatar.
+- **Fixed:** the closed Ask AI panel occupied 400px at `lg` and up on every page
+  with `askAi` on; sidebar contrast (the active row was **below WCAG AA** in
+  both schemes); the launcher and account rows looked permanently selected.
+
+### 0.11.0 — breaking
+
+- **`ConnectUser.workspaceId`, `workspaceName` and `workspaceType` are
+  nullable.** They are `null` for exactly one thing: a **Connect platform
+  staff** session, which belongs to no workspace. If you never enable staff
+  access — it is off by default — this is a type narrow and nothing else.
+  `?? ""` is the wrong fix: decide what your tenanting does with a session that
+  has no tenant.
+- **Connect platform staff sign-in**, `platformAccess` on `exchangeCode()` and
+  `getUser()`, `<ConnectPlatformGate>` and `useConnectPlatformAccess()`.
+
+### 0.10.0
+
+- **`@cosmoops/connect-sdk/ui`** — `ConnectPageShell`, `ConnectSection`,
+  `ConnectEmptyState`, `ConnectStatusChip`, `ConnectSettingRow`. Deliberately
+  *not* a `"use client"` module, so a page shell does not become a client
+  boundary.
+- `ConnectLinkButton`, `ConnectConfirmDialog`, `ConnectCursorPagination`,
+  `ConnectFilterTabs`, `ConnectAccountSessions` — built since 0.8 and reachable
+  from no entry point until now.
+- `ConnectWorkspaceSwitcher`, `useConnectWorkspaces()`,
+  `useConnectWorkspaceMembers()`, and the `workspaces` resource on the server
+  client.
+
 ### 0.9.0
 
 - **Ask AI**, mounted by `AppShell` by default — a chat panel grounded in the

package/dist/cjs/cli/doctor.js

@@ -162,8 +162,8 @@ function checkEnv(root) {
             status: "fail",
             title: `${name} set`,
             detail: declaredEmpty
-                ? `Declared but empty in .env.local. The value is in your application's Integration tab in Connect.`
-                : `Not found in .env.local or the environment. Both values are in your application's Integration tab in Connect.`,
+                ? `Declared but empty in .env.local. The value is in your application's Connect client section in Connect.`
+                : `Not found in .env.local or the environment. Both values are in your application's Connect client section in Connect.`,
         };
     });
 }
@@ -176,7 +176,7 @@ function checkRedirectUri() {
     return {
         status: "warn",
         title: "Redirect URI registered in Connect",
-        detail: "Not checkable from here. Confirm {your origin}/api/connect/callback is listed as a redirect URI in your application's Integration tab - including the deployed origin, not just http://localhost:3000.",
+        detail: "Not checkable from here. Confirm {your origin}/api/connect/callback is listed as a redirect URI in your application's Connect client section - including the deployed origin, not just http://localhost:3000.",
     };
 }
 const MARKER = { pass: "  ok  ", warn: " note ", fail: " FAIL " };

package/dist/cjs/cli/init.js

@@ -44,7 +44,7 @@ const PLANS_PAGE = `"use client";
 // with the other exports) whenever you want your own copy or layout.
 export { ConnectPlansPage as default } from "@cosmoops/connect-sdk/client";
 `;
-const ENV_TEMPLATE = `# CosmoOps Connect - values come from your application's Integration tab.
+const ENV_TEMPLATE = `# CosmoOps Connect - values come from your application's Connect client section.
 CONNECT_API_KEY=
 CONNECT_CLIENT_ID=
 `;
@@ -111,7 +111,7 @@ function runInit(argv = []) {
         console.log(`  ${marker}  ${(0, node_path_1.relative)(root, target)}  - ${scaffold.description}`);
     }
     const env = ensureEnv(root);
-    console.log(`  ${env === "skipped" ? "exists " : env === "appended" ? "updated" : "created"}  .env.local  - fill in the two values from your application's Integration tab`);
+    console.log(`  ${env === "skipped" ? "exists " : env === "appended" ? "updated" : "created"}  .env.local  - fill in the two values from your application's Connect client section`);
     // The two steps a scaffolder must not do for you: editing an existing layout
     // means parsing and rewriting JSX someone else wrote, and the redirect URI
     // lives in Connect, not in this repo.
@@ -137,7 +137,7 @@ Three things left, all one-time:
      Tailwind roots its content scan inside node_modules and skips your app.
 
   3. Register {your origin}/api/connect/callback as a redirect URI in your
-     application's Integration tab in Connect.
+     application's Connect client section in Connect.
 
 No next.config.ts changes needed - not even transpilePackages: dist/ is
 already ES2022 with "use client" hoisted, so Turbopack and webpack consume it

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

@@ -40,12 +40,31 @@ function formatDate(iso) {
 function useConnectAccessGate() {
     const { session, isLoading: sessionLoading } = (0, provider_js_1.useConnect)();
     const { data, isLoading: entitlementsLoading } = (0, provider_js_1.useConnectEntitlements)();
-    if (sessionLoading || (session?.user && entitlementsLoading)) {
+    if (sessionLoading) {
         return { state: "loading", blocker: null, paymentRetry: null };
     }
     if (!session?.user) {
         return { state: "signed_out", blocker: null, paymentRetry: null };
     }
+    // Connect platform staff pass straight through, and this check has to come
+    // *before* the entitlements read below or the gate would hard-block them.
+    //
+    // Every state this gate can report is a fact about a workspace - suspended,
+    // no plan, wrong audience, awaiting approval, payment due. A staff session
+    // has no workspace at all (see `SessionAccess.staff`), so it has no subscription
+    // either, and `subscription_missing` would send an operator to your plan
+    // picker to buy a plan for a workspace that does not exist. "Nothing is
+    // blocking this session" is the truthful answer, not a lenient one.
+    //
+    // The entitlements request is still issued - hooks cannot be called
+    // conditionally - and the bridge answers it `403 no_workspace`. That costs
+    // one failed request per staff page load, and its result is ignored here.
+    if (session.staff) {
+        return { state: "clear", blocker: null, paymentRetry: null };
+    }
+    if (entitlementsLoading) {
+        return { state: "loading", blocker: null, paymentRetry: null };
+    }
     if (!data) {
         // Signed in, not loading, yet nothing came back - a failed read (see
         // `error` on `useConnectEntitlements`). Fail open rather than hard-block

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

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.matchConnectScreen = matchConnectScreen;
+exports.isLinkableConnectScreen = isLinkableConnectScreen;
+/**
+ * Matching a live path against the screens your application declared.
+ *
+ * The same rule Connect uses for its own routes, and it has to be here too
+ * because only this side knows what your app's routes are: a dynamic segment
+ * matches exactly one path segment, and where several patterns fit, the most
+ * *literal* wins - so `/deals/new` resolves to itself rather than to
+ * `/deals/[dealId]` merely because that also fits.
+ *
+ * Plain functions with no React and no imports beyond the type, so the panel,
+ * the action links and any host that wants to reuse the matching can share one
+ * implementation.
+ */
+/** Trims the query string, the hash and any trailing slash. */
+function normalise(path) {
+    const withoutQuery = path.split(/[?#]/)[0] ?? "";
+    return withoutQuery.length > 1 ? withoutQuery.replace(/\/+$/, "") : withoutQuery;
+}
+/**
+ * The declared screen a live path is on, or `null` if none matches.
+ *
+ * `null` is a normal outcome, not an error: an application need only describe
+ * the screens it wants the assistant to know about, and an undescribed one
+ * simply costs the assistant its orientation rather than costing the user an
+ * answer.
+ */
+function matchConnectScreen(screens, path) {
+    const segments = normalise(path).split("/").filter(Boolean);
+    let best = null;
+    for (const screen of screens) {
+        const pattern = normalise(screen.path).split("/").filter(Boolean);
+        if (pattern.length !== segments.length)
+            continue;
+        let literals = 0;
+        let matches = true;
+        for (let i = 0; i < pattern.length; i++) {
+            const part = pattern[i];
+            if (part.startsWith("[") && part.endsWith("]"))
+                continue;
+            if (part !== segments[i]) {
+                matches = false;
+                break;
+            }
+            literals++;
+        }
+        if (matches && (!best || literals > best.literals))
+            best = { screen, literals };
+    }
+    return best?.screen ?? null;
+}
+/**
+ * Whether an href the model produced may be rendered as a link.
+ *
+ * Same reasoning as Connect's own `showActions` check, and the same conclusion:
+ * an assistant that can emit an arbitrary URL is a redirect the model can be
+ * talked into, and retrieved content shares a context window with its
+ * tool-calling authority. So a link is drawn only when it resolves to a screen
+ * *your application declared* - which makes an external destination structurally
+ * impossible, since no route pattern has a scheme or a host.
+ *
+ * The protocol-relative form is refused separately: `//evil.example.com` has no
+ * scheme for a path matcher to trip over, and would otherwise reach an anchor
+ * as an absolute destination.
+ */
+function isLinkableConnectScreen(screens, href) {
+    if (!href.startsWith("/") || href.startsWith("//"))
+        return false;
+    return matchConnectScreen(screens, href) !== null;
+}

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

@@ -8,10 +8,12 @@ exports.AiTimeline = AiTimeline;
 exports.AiDetails = AiDetails;
 exports.AiSteps = AiSteps;
 exports.AiSources = AiSources;
+exports.AiActions = AiActions;
 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_screens_js_1 = require("./ai-screens.js");
 const ai_format_js_1 = require("./ai-format.js");
 /**
  * What Ask AI draws.
@@ -230,3 +232,38 @@ function AiSources({ sources }) {
                     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}`));
                 }) })] }));
 }
+/**
+ * Where to go next, as links into *your* application.
+ *
+ * ## Why links and not navigation
+ *
+ * The obvious version of "the assistant can act" moves the user. It is also the
+ * version that breaks the property the whole design rests on: nothing happens
+ * without a click. Retrieved content shares a context window with the model's
+ * tool-calling authority, so an auto-navigate is a redirect primitive that
+ * content can reach. A link cannot be, and loses nothing - the user was going
+ * to click something anyway.
+ *
+ * ## Why every href is checked against your declared screens
+ *
+ * The model can emit any string. Only your application knows which strings are
+ * real routes, which is why `screens` is a prop rather than something Connect
+ * could supply. A link that does not resolve is *dropped* rather than rendered
+ * broken - the prose around it still stands, so a missing link reads as terse
+ * rather than wrong.
+ *
+ * `renderLink` is how this stays router-agnostic. Given one, a link is your
+ * framework's - a Next `<Link>`, a TanStack `<Link>` - and navigation is a
+ * client transition. Without one it falls back to an anchor, which works
+ * everywhere and costs a document load.
+ */
+function AiActions({ title, actions, screens, renderLink, }) {
+    const resolved = actions.filter((action) => (0, ai_screens_js_1.isLinkableConnectScreen)(screens, action.href));
+    if (resolved.length === 0)
+        return null;
+    const className = "group flex items-center gap-2 rounded-lg border border-separator bg-surface px-3 py-2 no-underline transition-colors hover:border-accent";
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "my-3", children: [title ? (0, jsx_runtime_1.jsx)("p", { className: "mb-1.5 text-xs font-medium text-muted", children: title }) : null, (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-1.5", children: resolved.map((action) => {
+                    const body = ((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 text-foreground", children: action.label }), action.detail ? ((0, jsx_runtime_1.jsx)("span", { className: "block truncate text-[11px] text-muted", children: action.detail })) : null] }));
+                    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderLink ? (renderLink({ href: action.href, className, children: body })) : ((0, jsx_runtime_1.jsx)("a", { href: action.href, className: className, children: body })) }, action.href));
+                }) })] }));
+}