@agent-native/core 0.152.1 → 0.153.0

package/dist/client/extensions/ExtensionViewer.js

@@ -81,6 +81,7 @@ function extensionRole(value) {
     return value === "owner" ||
         value === "admin" ||
         value === "editor" ||
+        value === "commenter" ||
         value === "viewer"
         ? value
         : "viewer";
@@ -441,6 +442,7 @@ export function ExtensionViewer({ extensionId }) {
                 const role = binding.role === "owner" ||
                     binding.role === "admin" ||
                     binding.role === "editor" ||
+                    binding.role === "commenter" ||
                     binding.role === "viewer"
                     ? binding.role
                     : "viewer";
@@ -732,7 +734,7 @@ export function ExtensionViewer({ extensionId }) {
                                                     ? t("extensions.sandboxedCustomBlockCreatedBy", {
                                                         email: extension.ownerEmail,
                                                     })
-                                                    : t("extensions.sandboxedCustomBlock"), children: t("extensions.customBlockSandboxed") })), extension.canEdit && !isLocalExtension && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: startRename, className: "shrink-0 cursor-pointer rounded p-0.5 text-muted-foreground/40 opacity-0 group-hover/name:opacity-100 hover:text-foreground", children: _jsx(IconPencil, { className: "h-3 w-3" }) }) }), _jsx(TooltipContent, { children: "Rename" })] }))] }))] }) }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: () => setRefreshKey((k) => k + 1), className: "inline-flex items-center justify-center rounded-md h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer", children: _jsx(IconRefresh, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { children: "Refresh" })] }), !isLocalExtension && (_jsxs(_Fragment, { children: [_jsx(ExtensionHistoryPopover, { extensionId: extensionId, canEdit: extension.canEdit, onRestored: () => setRefreshKey((k) => k + 1), onOpenChange: onPopoverOpenChange }), _jsx(EditToolPopover, { extension: extension, onOpenChange: onPopoverOpenChange })] })), _jsx(ToolMoreMenu, { extensionId: extensionId, toolName: extension.name, ownerEmail: extension.ownerEmail, canDelete: extension.canDelete, canEdit: extension.canEdit, sourceMode: extension.source?.mode, onOpenChange: onPopoverOpenChange }), !isLocalExtension && (_jsx(_Fragment, { children: _jsx(ShareButton, { resourceType: "extension", resourceId: extensionId, resourceTitle: extension.name, onOpenChange: onPopoverOpenChange, accessNote: _jsx(_Fragment, { children: "Extensions can be shared inside your organization only \u2014 they run with the viewer's credentials, so cross-org access isn't supported." }) }) })), _jsx(AgentToggleButton, {})] })] }), isLocalExtension && (_jsxs("div", { className: "shrink-0 border-b bg-muted/30 px-4 py-2 text-xs text-muted-foreground", children: ["Repo-backed extension. Edit", " ", _jsx("span", { className: "font-mono text-foreground", children: extension.source?.entryPath ?? "extensions/*/index.html" }), " ", "in your workspace, then refresh this preview."] })), _jsxs("div", { className: "relative flex-1 min-h-0", children: [!iframeReady && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-background z-10", children: _jsx(IconLoader2, { className: "size-5 animate-spin text-muted-foreground", role: "status", "aria-label": "Loading" }) })), _jsx("iframe", { [SESSION_REPLAY_IFRAME_ATTRIBUTE]: "", ref: iframeRef, src: iframeSrcDoc ? undefined : iframeSrc, srcDoc: iframeSrcDoc, className: "h-full w-full border-0", sandbox: EXTENSION_IFRAME_SANDBOX, title: extension.name, style: {
+                                                    : t("extensions.sandboxedCustomBlock"), children: t("extensions.customBlockSandboxed") })), extension.canEdit && !isLocalExtension && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: startRename, className: "shrink-0 cursor-pointer rounded p-0.5 text-muted-foreground/40 opacity-0 group-hover/name:opacity-100 hover:text-foreground", children: _jsx(IconPencil, { className: "h-3 w-3" }) }) }), _jsx(TooltipContent, { children: "Rename" })] }))] }))] }) }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: () => setRefreshKey((k) => k + 1), className: "inline-flex items-center justify-center rounded-md h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer", children: _jsx(IconRefresh, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { children: "Refresh" })] }), !isLocalExtension && (_jsxs(_Fragment, { children: [_jsx(ExtensionHistoryPopover, { extensionId: extensionId, canEdit: extension.canEdit, onRestored: () => setRefreshKey((k) => k + 1), onOpenChange: onPopoverOpenChange }), _jsx(EditToolPopover, { extension: extension, onOpenChange: onPopoverOpenChange })] })), _jsx(ToolMoreMenu, { extensionId: extensionId, toolName: extension.name, ownerEmail: extension.ownerEmail, canDelete: extension.canDelete, canEdit: extension.canEdit, sourceMode: extension.source?.mode, onOpenChange: onPopoverOpenChange }), !isLocalExtension && (_jsx(_Fragment, { children: _jsx(ShareButton, { resourceType: "extension", resourceId: extensionId, allowedRoles: ["viewer", "editor", "admin"], resourceTitle: extension.name, onOpenChange: onPopoverOpenChange, accessNote: _jsx(_Fragment, { children: "Extensions can be shared inside your organization only \u2014 they run with the viewer's credentials, so cross-org access isn't supported." }) }) })), _jsx(AgentToggleButton, {})] })] }), isLocalExtension && (_jsxs("div", { className: "shrink-0 border-b bg-muted/30 px-4 py-2 text-xs text-muted-foreground", children: ["Repo-backed extension. Edit", " ", _jsx("span", { className: "font-mono text-foreground", children: extension.source?.entryPath ?? "extensions/*/index.html" }), " ", "in your workspace, then refresh this preview."] })), _jsxs("div", { className: "relative flex-1 min-h-0", children: [!iframeReady && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-background z-10", children: _jsx(IconLoader2, { className: "size-5 animate-spin text-muted-foreground", role: "status", "aria-label": "Loading" }) })), _jsx("iframe", { [SESSION_REPLAY_IFRAME_ATTRIBUTE]: "", ref: iframeRef, src: iframeSrcDoc ? undefined : iframeSrc, srcDoc: iframeSrcDoc, className: "h-full w-full border-0", sandbox: EXTENSION_IFRAME_SANDBOX, title: extension.name, style: {
                                 pointerEvents: openPopoverCount > 0 ? "none" : "auto",
                             }, onLoad: () => {
                                 sendThemeToIframe();

package/dist/client/extensions/InlineExtensionFrame.js

@@ -54,6 +54,7 @@ function normalizeRole(value) {
     return value === "owner" ||
         value === "admin" ||
         value === "editor" ||
+        value === "commenter" ||
         value === "viewer"
         ? value
         : "viewer";

package/dist/client/extensions/iframe-bridge.d.ts

@@ -13,7 +13,7 @@
  */
 export declare function isAllowedExtensionPath(path: string, extensionId: string): boolean;
 export declare function sanitizeExtensionRequestOptions(value: unknown): RequestInit;
-export type ExtensionBridgeRole = "owner" | "admin" | "editor" | "viewer";
+export type ExtensionBridgeRole = "owner" | "admin" | "editor" | "commenter" | "viewer";
 export interface BridgePolicyContext {
     /** Extension id currently owning the iframe. Used for narrow helper-specific exceptions. */
     extensionId?: string;
@@ -39,7 +39,8 @@ export interface BridgePolicyResult {
 /**
  * Decide whether the iframe is allowed to proxy this request given the
  * viewer's role on the extension. Authors (and owner/admin/editor in general)
- * keep the full bridge surface; viewers get a strictly read-only subset.
+ * keep the full bridge surface; commenters and viewers get a strictly
+ * read-only subset because extensions have no comment-specific bridge APIs.
  *
  * Called BEFORE the request leaves the parent — so a denial is local-only
  * and never reveals server state to the iframe.

package/dist/client/extensions/iframe-bridge.js

@@ -119,7 +119,8 @@ const READ_METHODS = new Set(["GET", "HEAD"]);
 /**
  * Decide whether the iframe is allowed to proxy this request given the
  * viewer's role on the extension. Authors (and owner/admin/editor in general)
- * keep the full bridge surface; viewers get a strictly read-only subset.
+ * keep the full bridge surface; commenters and viewers get a strictly
+ * read-only subset because extensions have no comment-specific bridge APIs.
  *
  * Called BEFORE the request leaves the parent — so a denial is local-only
  * and never reveals server state to the iframe.
@@ -138,7 +139,8 @@ export function checkBridgePolicy(path, method, ctx) {
     if (ctx.role === "editor") {
         return { ok: true };
     }
-    // From here on: role === "viewer". Lock down everything beyond reads.
+    // From here on: role === "commenter" or "viewer". Lock down everything
+    // beyond reads; extensions have no comment-specific bridge APIs.
     const upperMethod = method.toUpperCase();
     // SQL is denied for viewers entirely (defense-in-depth: dev mode bypasses
     // the production scoping shim).

package/dist/client/i18n.js

@@ -7,6 +7,7 @@ import { createContext, useCallback, useContext, useEffect, useMemo, useRef, use
 import { I18nextProvider, initReactI18next, useTranslation, } from "react-i18next";
 import defaultEnglishMessages from "../localization/default-messages.js";
 import { DEFAULT_LOCALE, LOCALE_HYDRATION_GLOBAL, LOCALE_METADATA, LOCALE_STORAGE_KEY, SUPPORTED_LOCALES, localeDirection, normalizeLocalizationPreference, resolveLocaleFromCandidates, resolveLocaleFromPreference, } from "../localization/shared.js";
+import { injectedAgentNativeConfig } from "./app-config.js";
 import { setClientAppState } from "./application-state.js";
 import { callAction } from "./use-action.js";
 import { cn } from "./utils.js";
@@ -127,11 +128,27 @@ function readHydrationPayload() {
 function resolveInitialState(args) {
     const hydration = readHydrationPayload();
     const preference = normalizeLocalizationPreference(args.initialPreference ?? hydration.preference ?? readStoredPreference()).locale;
-    const locale = args.initialLocale ??
+    const requestedLocale = args.initialLocale ??
         hydration.locale ??
         resolveLocaleFromPreference(preference, browserLanguageCandidates());
+    const locale = args.supportedLocales.includes(requestedLocale)
+        ? requestedLocale
+        : args.sourceLocale;
     return { locale, preference };
 }
+function resolveSupportedLocales(args) {
+    const configured = injectedAgentNativeConfig().translations?.locales;
+    const candidates = configured ??
+        args.catalog?.supportedLocales ?? [args.sourceLocale];
+    const supported = candidates.filter((locale) => SUPPORTED_LOCALES.includes(locale));
+    return [
+        args.sourceLocale,
+        ...supported.filter((locale) => locale !== args.sourceLocale),
+    ].filter((locale, index, all) => all.indexOf(locale) === index);
+}
+function resolveSupportedLocale(locale, supportedLocales, sourceLocale) {
+    return supportedLocales.includes(locale) ? locale : sourceLocale;
+}
 function normalizeLoadedMessages(value) {
     if (!value || typeof value !== "object" || Array.isArray(value))
         return null;
@@ -173,9 +190,14 @@ export function AgentNativeI18nProvider({ children, catalog, initialLocale, init
     const sourceLocale = catalog?.sourceLocale ?? DEFAULT_LOCALE;
     const sourceMessages = catalog?.messages ?? {};
     const loadMessages = catalog?.loadMessages;
-    const supportedLocales = catalog?.supportedLocales ?? SUPPORTED_LOCALES;
+    const supportedLocales = useMemo(() => resolveSupportedLocales({ catalog, sourceLocale }), [catalog, sourceLocale]);
     const hydration = readHydrationPayload();
-    const initialState = useMemo(() => resolveInitialState({ initialLocale, initialPreference }), [initialLocale, initialPreference]);
+    const initialState = useMemo(() => resolveInitialState({
+        initialLocale,
+        initialPreference,
+        sourceLocale,
+        supportedLocales,
+    }), [initialLocale, initialPreference, sourceLocale, supportedLocales]);
     const [preference, setPreferenceState] = useState(initialState.preference);
     const [locale, setLocale] = useState(initialState.locale);
     const [loading, setLoading] = useState(false);
@@ -204,8 +226,8 @@ export function AgentNativeI18nProvider({ children, catalog, initialLocale, init
         const nextLocale = preference === "system"
             ? resolveLocaleFromCandidates(browserLanguageCandidates())
             : preference;
-        setLocale(nextLocale);
-    }, [preference]);
+        setLocale(resolveSupportedLocale(nextLocale, supportedLocales, sourceLocale));
+    }, [preference, sourceLocale, supportedLocales]);
     useEffect(() => {
         let cancelled = false;
         async function applyLocale() {
@@ -247,6 +269,7 @@ export function AgentNativeI18nProvider({ children, catalog, initialLocale, init
         locale,
         namespace,
         sourceLocale,
+        supportedLocales,
     ]);
     useEffect(() => {
         if (typeof document === "undefined")

package/dist/client/integrations/IntegrationConnectionChoice.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+export interface IntegrationConnectionChoiceProps {
+    name: string;
+    logo?: ReactNode;
+    showWorkspaceOption: boolean;
+    busy?: boolean;
+    onPersonal: () => void;
+    onWorkspace: () => void;
+}
+/** The one small decision before an integration's advanced setup surface. */
+export declare function IntegrationConnectionChoice({ name, logo, showWorkspaceOption, busy, onPersonal, onWorkspace, }: IntegrationConnectionChoiceProps): import("react").JSX.Element;

package/dist/client/integrations/IntegrationConnectionChoice.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconLoader2, IconUser, IconUsersGroup } from "@tabler/icons-react";
+/** The one small decision before an integration's advanced setup surface. */
+export function IntegrationConnectionChoice({ name, logo, showWorkspaceOption, busy = false, onPersonal, onWorkspace, }) {
+    return (_jsxs("div", { className: "flex min-h-full flex-1 flex-col bg-background", children: [_jsx("header", { className: "flex min-h-16 items-center border-b border-border px-6 sm:px-10", children: _jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [logo ? (_jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-md bg-muted/50 text-foreground", children: logo })) : null, _jsxs("span", { className: "truncate text-sm font-medium text-foreground", children: ["Connect ", name] })] }) }), _jsx("main", { className: "flex flex-1 justify-center overflow-y-auto px-6 py-12 sm:px-10 sm:py-[12vh]", children: _jsxs("div", { className: "w-full max-w-[420px] self-start", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-[-0.03em] text-foreground sm:text-[28px]", children: "Who should use this?" }), _jsx("p", { className: "mt-2 text-sm leading-6 text-muted-foreground", children: "Choose where this connection is available." }), _jsxs("div", { className: "mt-8 grid gap-2.5", children: [_jsxs("button", { type: "button", onClick: onPersonal, disabled: busy, "aria-busy": busy, className: "flex min-h-12 items-center gap-3 rounded-lg bg-primary px-4 py-3 text-left text-primary-foreground transition-[background-color,opacity] hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-wait disabled:opacity-60", children: [_jsx(IconUser, { className: "size-4 shrink-0 opacity-75" }), _jsx("span", { className: "min-w-0 flex-1 text-sm font-medium", children: "Connect for me" }), busy ? (_jsx(IconLoader2, { className: "size-4 shrink-0 animate-spin" })) : null] }), showWorkspaceOption ? (_jsxs("button", { type: "button", onClick: onWorkspace, disabled: busy, className: "flex min-h-12 items-center gap-3 rounded-lg bg-muted/50 px-4 py-3 text-left text-foreground transition-colors hover:bg-muted/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-wait disabled:opacity-60", children: [_jsx(IconUsersGroup, { className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "min-w-0 flex-1 text-sm font-medium", children: "Set up for workspace" })] })) : null] })] }) })] }));
+}

package/dist/client/integrations/IntegrationGrid.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+export interface IntegrationGridItem {
+    id: string;
+    name: string;
+    description?: string;
+    logo: ReactNode;
+    status?: string;
+    statusClassName?: string;
+    actionLabel: string;
+    actionAriaLabel?: string;
+    disabled?: boolean;
+    onAction: () => void;
+}
+export interface IntegrationGridProps {
+    items: IntegrationGridItem[];
+    emptyLabel?: string;
+    className?: string;
+}
+/**
+ * The shared integration list surface. Keep provider rows intentionally
+ * boring: identity, one-line context, and one clear next action.
+ */
+export declare function IntegrationGrid({ items, emptyLabel, className, }: IntegrationGridProps): import("react").JSX.Element;

package/dist/client/integrations/IntegrationGrid.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../utils.js";
+/**
+ * The shared integration list surface. Keep provider rows intentionally
+ * boring: identity, one-line context, and one clear next action.
+ */
+export function IntegrationGrid({ items, emptyLabel = "No integrations found.", className, }) {
+    if (items.length === 0) {
+        return (_jsx("div", { className: cn("rounded-xl bg-muted/30 px-5 py-8 text-center text-xs text-muted-foreground", className), children: emptyLabel }));
+    }
+    return (_jsx("div", { className: cn("grid gap-2 overflow-hidden rounded-xl bg-muted/20 p-2", "sm:grid-cols-2", className), children: items.map((item) => (_jsxs("article", { className: "flex min-w-0 items-center gap-3 rounded-lg bg-muted/35 px-3 py-3.5", children: [_jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-md bg-background/80 text-foreground", children: item.logo }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("h3", { className: "truncate text-sm font-medium text-foreground", children: item.name }), item.status ? (_jsx("span", { className: cn("shrink-0 text-[11px] font-medium text-muted-foreground", item.statusClassName), children: item.status })) : null] }), item.description ? (_jsx("p", { className: "mt-0.5 line-clamp-1 text-xs leading-5 text-muted-foreground", children: item.description })) : null] }), _jsx("button", { type: "button", onClick: item.onAction, disabled: item.disabled, "aria-label": item.actionAriaLabel ?? `${item.actionLabel} ${item.name}`, className: "inline-flex h-8 shrink-0 items-center justify-center gap-1 rounded-md border border-border bg-background px-2.5 text-xs font-medium text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", children: item.actionLabel })] }, item.id))) }));
+}

package/dist/client/integrations/IntegrationsPanel.js

@@ -1,13 +1,14 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconPlus, IconBrandSlack, IconBrandTelegram, IconBrandWhatsapp, IconBrandGoogleDrive, IconTerminal2, IconBuildingSkyscraper, IconCopy, IconCheck, IconChevronLeft, IconChevronRight, IconExternalLink, IconCircleCheck, IconInfoCircle, IconSearch, IconServer, IconLoader2, IconRefresh, } from "@tabler/icons-react";
+import { IconPlus, IconBrandSlack, IconBrandTelegram, IconBrandWhatsapp, IconBrandGoogleDrive, IconTerminal2, IconBuildingSkyscraper, IconCopy, IconCheck, IconChevronLeft, IconExternalLink, IconCircleCheck, IconInfoCircle, IconSearch, IconServer, IconLoader2, IconRefresh, } from "@tabler/icons-react";
 import { useState, useCallback, useEffect, useMemo } from "react";
 import { agentNativePath } from "../api-path.js";
 import { Tooltip, TooltipContent, TooltipTrigger, } from "../components/ui/tooltip.js";
 import { useT } from "../i18n.js";
-import { getDefaultMcpIntegrations, } from "../resources/mcp-integration-catalog.js";
+import { getDefaultMcpIntegrations } from "../resources/mcp-integration-catalog.js";
 import { McpIntegrationDialog } from "../resources/McpIntegrationDialog.js";
 import { McpIntegrationLogo } from "../resources/McpIntegrationLogo.js";
 import { useCreateMcpServer, useDeleteMcpServer, useMcpServers, useReconnectMcpServer, } from "../resources/use-mcp-servers.js";
+import { IntegrationGrid } from "./IntegrationGrid.js";
 import { useIntegrationStatus, } from "./useIntegrationStatus.js";
 import { isNonPublicWebhookUrl } from "./webhook-url.js";
 const PLATFORMS = [
@@ -228,22 +229,6 @@ export function LegacyIntegrationsPanel() {
                                             : "bg-muted-foreground/55"}` }))] }, platform.id));
                     }), _jsx("div", { className: "rounded-md border border-border bg-muted/30 px-2.5 py-2 text-[10px] text-muted-foreground", children: t("integrations.sharedMessaging") })] }))] }));
 }
-function IntegrationGalleryCard({ platform, status, onSelect, }) {
-    const connected = Boolean(status?.configured || status?.enabled);
-    const active = Boolean(status?.enabled && status?.configured);
-    const stateLabel = platform.isClient
-        ? "Available"
-        : active
-            ? "Connected"
-            : connected
-                ? "Ready to enable"
-                : "Set up";
-    return (_jsxs("button", { type: "button", onClick: () => onSelect(platform), className: "group flex min-h-28 items-start gap-3 rounded-xl border border-border/80 bg-card p-4 text-start transition-colors hover:border-foreground/25 hover:bg-accent/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl border border-border/70 bg-background text-foreground shadow-sm", children: _jsx(platform.icon, { size: 21, strokeWidth: 1.8 }) }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: platform.label }), _jsx("span", { className: active
-                                    ? "shrink-0 text-[10px] font-medium text-emerald-600 dark:text-emerald-400"
-                                    : connected
-                                        ? "shrink-0 text-[10px] font-medium text-amber-600 dark:text-amber-400"
-                                        : "shrink-0 text-[10px] text-muted-foreground", children: stateLabel })] }), _jsx("span", { className: "line-clamp-2 text-xs leading-5 text-muted-foreground", children: platform.description }), _jsxs("span", { className: "mt-1 flex items-center gap-1 text-[11px] font-medium text-foreground/70 transition-colors group-hover:text-foreground", children: [connected || platform.isClient ? "Manage" : "Connect", _jsx(IconChevronRight, { className: "size-3.5 rtl:-scale-x-100" })] })] })] }));
-}
 function compareMcpUrl(value) {
     try {
         const url = new URL(value.trim());
@@ -270,16 +255,15 @@ function McpServerStatus({ server, onReconnect, reconnecting = false, reconnectE
     }
     return (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx("span", { className: "size-1.5 rounded-full bg-muted-foreground/50" }), "Status unknown"] }));
 }
-function McpCatalogItem({ integration, connected, onConnect, }) {
-    return (_jsxs("div", { className: "flex min-w-0 items-center gap-3 border-b border-border/60 py-4 last:border-b-0", children: [_jsx(McpIntegrationLogo, { name: integration.name, logoUrl: integration.logoUrl, integrationId: integration.id }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate text-sm font-medium text-foreground", children: integration.name }), connected && (_jsx("span", { className: "shrink-0 text-[11px] font-medium text-emerald-600 dark:text-emerald-400", children: "Connected" }))] }), _jsx("p", { className: "mt-0.5 line-clamp-1 text-xs leading-5 text-muted-foreground", children: integration.description || integration.useCase })] }), _jsx("button", { type: "button", onClick: () => onConnect(integration.id), className: "shrink-0 rounded-md border border-border bg-background px-2.5 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-accent", children: connected ? "Manage" : "Connect" })] }));
-}
 function McpIntegrationsSection({ query }) {
+    const t = useT();
     const serversQuery = useMcpServers();
     const createServer = useCreateMcpServer();
     const deleteServer = useDeleteMcpServer();
     const reconnectServer = useReconnectMcpServer();
     const [dialogOpen, setDialogOpen] = useState(false);
     const [initialIntegrationId, setInitialIntegrationId] = useState(null);
+    const [connectIntegrationId, setConnectIntegrationId] = useState(null);
     const [deleteTarget, setDeleteTarget] = useState(null);
     const [deleteError, setDeleteError] = useState(null);
     const [reconnectingKey, setReconnectingKey] = useState(null);
@@ -306,8 +290,33 @@ function McpIntegrationsSection({ query }) {
             serversQuery.data?.role === "admin"));
     const openCatalog = useCallback((integrationId) => {
         setInitialIntegrationId(integrationId ?? null);
+        setConnectIntegrationId(null);
+        setDialogOpen(true);
+    }, []);
+    const openQuickConnect = useCallback((integrationId) => {
+        setInitialIntegrationId(null);
+        setConnectIntegrationId(integrationId);
         setDialogOpen(true);
     }, []);
+    const openConnection = useCallback((integrationId, connected) => {
+        if (connected) {
+            openCatalog(integrationId);
+            return;
+        }
+        const integration = catalog.find((item) => item.id === integrationId);
+        const requiresSetup = Boolean(integration &&
+            !integration.managedOAuth &&
+            (integration.connectionMode === "manual" ||
+                integration.availability === "provider-setup" ||
+                integration.availability === "client-restricted" ||
+                integration.authMode === "headers"));
+        if (requiresSetup) {
+            openCatalog(integrationId);
+        }
+        else {
+            openQuickConnect(integrationId);
+        }
+    }, [catalog, openCatalog, openQuickConnect]);
     const removeServer = useCallback(async (server) => {
         const key = `${server.scope}:${server.id}`;
         if (deleteTarget !== key) {
@@ -351,13 +360,33 @@ function McpIntegrationsSection({ query }) {
                                     serversQuery.data?.role === "owner" ||
                                     serversQuery.data?.role === "admin";
                                 return (_jsxs("div", { className: "flex items-start gap-3 py-3.5", children: [_jsx("span", { className: "mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg border border-border/70 bg-background text-muted-foreground", children: _jsx(IconServer, { className: "size-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "truncate text-sm font-medium text-foreground", children: server.name }), _jsx("span", { className: "text-[11px] text-muted-foreground", children: server.scope === "user"
-                                                                ? "Personal"
-                                                                : "Organization" })] }), _jsx(McpServerStatus, { server: server, onReconnect: server.status.state === "error"
+                                                                ? t("mcpIntegrations.personal")
+                                                                : t("mcpIntegrations.sharedWithWorkspace") })] }), _jsx(McpServerStatus, { server: server, onReconnect: server.status.state === "error"
                                                         ? () => void reconnect(server)
                                                         : undefined, reconnecting: reconnectingKey === key, reconnectError: reconnectError?.key === key
                                                         ? reconnectError.message
                                                         : undefined })] }), canRemove && (_jsx("button", { type: "button", onClick: () => void removeServer(server), disabled: deleteServer.isPending, className: "shrink-0 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-accent disabled:opacity-50", children: deleteTarget === key ? "Confirm" : "Remove" }))] }, key));
-                            }) }) })] })) : null, filteredCatalog.length > 0 && (_jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-center justify-between gap-3", children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Available integrations" }), _jsxs("span", { className: "text-xs text-muted-foreground", children: [filteredCatalog.length, " integrations"] })] }), _jsx("div", { className: "grid gap-x-8 overflow-hidden rounded-xl border border-border/70 bg-card px-4 sm:grid-cols-2", children: filteredCatalog.map((integration) => (_jsx(McpCatalogItem, { integration: integration, connected: connectedUrls.has(compareMcpUrl(integration.url)), onConnect: openCatalog }, integration.id))) })] })), filteredCatalog.length === 0 && normalizedQuery && (_jsxs("p", { className: "border-y border-border/60 py-4 text-xs text-muted-foreground", children: ["No agent integrations match \u201C", query, "\u201D."] })), _jsx(McpIntegrationDialog, { open: dialogOpen, onOpenChange: setDialogOpen, initialIntegrationId: initialIntegrationId, defaultScope: "user", canCreateOrgMcp: canCreateOrgMcp, hasOrg: hasOrg, onCreateMcpServer: (args) => createServer.mutateAsync(args) })] }));
+                            }) }) })] })) : null, filteredCatalog.length > 0 && (_jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-center justify-between gap-3", children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Available integrations" }), _jsxs("span", { className: "text-xs text-muted-foreground", children: [filteredCatalog.length, " integrations"] })] }), _jsx(IntegrationGrid, { items: filteredCatalog.map((integration) => {
+                            const connected = connectedUrls.has(compareMcpUrl(integration.url));
+                            return {
+                                id: integration.id,
+                                name: integration.name,
+                                description: integration.description || integration.useCase,
+                                logo: (_jsx(McpIntegrationLogo, { name: integration.name, logoUrl: integration.logoUrl, integrationId: integration.id, className: "size-7 rounded-md", imageClassName: "size-full p-1" })),
+                                status: connected ? t("mcpIntegrations.connected") : undefined,
+                                statusClassName: "text-emerald-600 dark:text-emerald-400",
+                                actionLabel: connected
+                                    ? "Manage"
+                                    : t("mcpIntegrations.connect"),
+                                onAction: () => openConnection(integration.id, connected),
+                            };
+                        }) })] })), filteredCatalog.length === 0 && normalizedQuery && (_jsxs("p", { className: "border-y border-border/60 py-4 text-xs text-muted-foreground", children: ["No agent integrations match \u201C", query, "\u201D."] })), _jsx(McpIntegrationDialog, { open: dialogOpen, onOpenChange: (open) => {
+                    setDialogOpen(open);
+                    if (!open) {
+                        setInitialIntegrationId(null);
+                        setConnectIntegrationId(null);
+                    }
+                }, initialIntegrationId: initialIntegrationId, connectIntegrationId: connectIntegrationId, defaultScope: "user", canCreateOrgMcp: canCreateOrgMcp, hasOrg: hasOrg, onCreateMcpServer: (args) => createServer.mutateAsync(args) })] }));
 }
 export function IntegrationsPanel() {
     const { statuses, loading, refetch } = useIntegrationStatus();
@@ -384,11 +413,48 @@ export function IntegrationsPanel() {
     if (selectedPlatform) {
         return (_jsx(IntegrationDetail, { platform: selectedPlatform, serverStatus: statusMap.get(selectedPlatform.id), onBack: () => setSelectedPlatform(null), onRefresh: refetch }));
     }
-    return (_jsxs("div", { className: "w-full space-y-8", children: [_jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold tracking-[-0.04em] text-foreground", children: "Integrations" }), _jsx("p", { className: "mt-1.5 max-w-2xl text-sm leading-6 text-muted-foreground", children: "Connect the tools your agent can use to gather context, take action, and meet your team where work already happens." })] }), _jsxs("label", { className: "relative block w-full lg:max-w-xs", children: [_jsx(IconSearch, { className: "pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx("input", { type: "search", value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Search integrations", "aria-label": "Search integrations", className: "h-9 w-full rounded-lg border border-border bg-background ps-9 pe-3 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus:border-foreground/30 focus:ring-2 focus:ring-accent/40" })] })] }), _jsx(McpIntegrationsSection, { query: normalizedQuery }), loading ? (_jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: [0, 1, 2, 3].map((item) => (_jsx("div", { className: "h-28 animate-pulse rounded-xl border border-border bg-muted/30" }, item))) })) : (_jsxs(_Fragment, { children: [!normalizedQuery && connectedPlatforms.length > 0 && (_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: "Connected" }), _jsxs("span", { className: "text-xs text-muted-foreground", children: [connectedPlatforms.length, " connected"] })] }), _jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: connectedPlatforms.map((platform) => (_jsx(IntegrationGalleryCard, { platform: platform, status: statusMap.get(platform.id), onSelect: setSelectedPlatform }, platform.id))) })] })), ["Messaging", "Workspace tools", "Agent clients"].map((category) => {
+    return (_jsxs("div", { className: "w-full space-y-8", children: [_jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold tracking-[-0.04em] text-foreground", children: "Integrations" }), _jsx("p", { className: "mt-1.5 max-w-2xl text-sm leading-6 text-muted-foreground", children: "Connect the tools your agent can use to gather context, take action, and meet your team where work already happens." })] }), _jsxs("label", { className: "relative block w-full lg:max-w-xs", children: [_jsx(IconSearch, { className: "pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx("input", { type: "search", value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Search integrations", "aria-label": "Search integrations", className: "h-9 w-full rounded-lg border border-border bg-background ps-9 pe-3 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus:border-foreground/30 focus:ring-2 focus:ring-accent/40" })] })] }), _jsx(McpIntegrationsSection, { query: normalizedQuery }), loading ? (_jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: [0, 1, 2, 3].map((item) => (_jsx("div", { className: "h-28 animate-pulse rounded-xl border border-border bg-muted/30" }, item))) })) : (_jsxs(_Fragment, { children: [!normalizedQuery && connectedPlatforms.length > 0 && (_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: "Connected" }), _jsxs("span", { className: "text-xs text-muted-foreground", children: [connectedPlatforms.length, " connected"] })] }), _jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: _jsx(IntegrationGrid, { items: connectedPlatforms.map((platform) => {
+                                        const status = statusMap.get(platform.id);
+                                        return {
+                                            id: platform.id,
+                                            name: platform.label,
+                                            description: platform.description,
+                                            logo: _jsx(platform.icon, { size: 18, strokeWidth: 1.8 }),
+                                            status: platform.isClient
+                                                ? "Available"
+                                                : status?.enabled && status.configured
+                                                    ? "Connected"
+                                                    : "Ready to enable",
+                                            statusClassName: status?.enabled && status.configured
+                                                ? "text-emerald-600 dark:text-emerald-400"
+                                                : "text-amber-600 dark:text-amber-400",
+                                            actionLabel: "Manage",
+                                            onAction: () => setSelectedPlatform(platform),
+                                        };
+                                    }) }) })] })), ["Messaging", "Workspace tools", "Agent clients"].map((category) => {
                         const platforms = filteredPlatforms.filter((platform) => platform.category === category &&
                             (!connectedPlatforms.includes(platform) || normalizedQuery));
                         if (platforms.length === 0)
                             return null;
-                        return (_jsxs("section", { className: "mt-8 space-y-3 first:mt-0", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: category }), _jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: platforms.map((platform) => (_jsx(IntegrationGalleryCard, { platform: platform, status: statusMap.get(platform.id), onSelect: setSelectedPlatform }, platform.id))) })] }, category));
+                        return (_jsxs("section", { className: "mt-8 space-y-3 first:mt-0", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: category }), _jsx(IntegrationGrid, { items: platforms.map((platform) => {
+                                        const status = statusMap.get(platform.id);
+                                        const connected = Boolean(status?.configured || status?.enabled);
+                                        return {
+                                            id: platform.id,
+                                            name: platform.label,
+                                            description: platform.description,
+                                            logo: _jsx(platform.icon, { size: 18, strokeWidth: 1.8 }),
+                                            status: connected
+                                                ? status?.enabled && status.configured
+                                                    ? "Connected"
+                                                    : "Ready to enable"
+                                                : undefined,
+                                            statusClassName: status?.enabled && status.configured
+                                                ? "text-emerald-600 dark:text-emerald-400"
+                                                : "text-amber-600 dark:text-amber-400",
+                                            actionLabel: connected ? "Manage" : "Connect",
+                                            onAction: () => setSelectedPlatform(platform),
+                                        };
+                                    }) })] }, category));
                     }), filteredPlatforms.length === 0 && !mcpCatalogMatches && (_jsxs("div", { className: "rounded-xl border border-dashed border-border p-8 text-center", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "No integrations found" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Try a different tool or category." })] }))] }))] }));
 }

package/dist/client/integrations/index.d.ts

@@ -1,4 +1,6 @@
 export { IntegrationsPanel } from "./IntegrationsPanel.js";
+export { IntegrationGrid, type IntegrationGridItem, type IntegrationGridProps, } from "./IntegrationGrid.js";
+export { IntegrationConnectionChoice, type IntegrationConnectionChoiceProps, } from "./IntegrationConnectionChoice.js";
 export { useIntegrationStatus } from "./useIntegrationStatus.js";
 export type { IntegrationStatus } from "./useIntegrationStatus.js";
 export { listIntegrationEnvStatuses, listIntegrationStatuses, saveIntegrationEnvVars, setIntegrationEnabled, setupIntegration, disconnectManagedIntegrationInstallation, listManagedIntegrationInstallations, managedIntegrationOAuthUrl, managedSlackAgentManifestUrl, listManagedIntegrationScopes, saveManagedIntegrationScope, listManagedIntegrationBudgets, listManagedIntegrationMemory, forgetManagedIntegrationMemory, saveManagedIntegrationBudget, testManagedIntegrationInstallation, IntegrationClientError, type ClientIntegrationInstallation, type ClientIntegrationScope, type ClientIntegrationUsageBudget, type ClientIntegrationMemory, type ClientIntegrationStatus, type IntegrationEnvStatus, type SavedEnvVarsResult, } from "./api.js";

package/dist/client/integrations/index.js

@@ -1,3 +1,5 @@
 export { IntegrationsPanel } from "./IntegrationsPanel.js";
+export { IntegrationGrid, } from "./IntegrationGrid.js";
+export { IntegrationConnectionChoice, } from "./IntegrationConnectionChoice.js";
 export { useIntegrationStatus } from "./useIntegrationStatus.js";
 export { listIntegrationEnvStatuses, listIntegrationStatuses, saveIntegrationEnvVars, setIntegrationEnabled, setupIntegration, disconnectManagedIntegrationInstallation, listManagedIntegrationInstallations, managedIntegrationOAuthUrl, managedSlackAgentManifestUrl, listManagedIntegrationScopes, saveManagedIntegrationScope, listManagedIntegrationBudgets, listManagedIntegrationMemory, forgetManagedIntegrationMemory, saveManagedIntegrationBudget, testManagedIntegrationInstallation, IntegrationClientError, } from "./api.js";

package/dist/client/onboarding/FirstRunOnboarding.d.ts

@@ -2,5 +2,7 @@ import React from "react";
 export interface FirstRunOnboardingProps {
     /** Test hook; generated apps use the public Vite flag instead. */
     skipIntegrations?: boolean;
+    /** The shared startup gate has already resolved this account as eligible. */
+    initialFirstRun?: boolean;
 }
-export declare function FirstRunOnboarding({ skipIntegrations, }?: FirstRunOnboardingProps): React.JSX.Element | null;
+export declare function FirstRunOnboarding({ skipIntegrations, initialFirstRun, }?: FirstRunOnboardingProps): React.JSX.Element | null;