@agent-native/core 0.137.2 → 0.137.4

package/dist/client/agent-page/AgentJobsTab.js

@@ -1,9 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "@agent-native/toolkit/ui/button";
-import { IconBolt, IconCalendarEvent, IconClock, IconAlertTriangle, IconEye, IconLoader2, IconPencil, IconPlayerPause, IconPlayerPlay, IconTrash, } from "@tabler/icons-react";
+import { IconBolt, IconCalendarEvent, IconClock, IconAlertTriangle, IconChevronDown, IconEye, IconLoader2, IconPencil, IconPlayerPause, IconPlayerPlay, IconTrash, } from "@tabler/icons-react";
 import { useState } from "react";
 import { AgentAskPopover } from "../AgentAskPopover.js";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../components/ui/dialog.js";
+import { Popover, PopoverContent, PopoverTrigger, } from "../components/ui/popover.js";
 import { useFormatters, useT } from "../i18n.js";
 import { automationCreationContext } from "../settings/AutomationsSection.js";
 import { AgentEmptyState } from "./AgentEmptyState.js";
@@ -96,7 +97,7 @@ function detailsFields(entry, t, formatDateTime) {
 export function organizationAutomationCreationContext() {
     return "The user wants to create a new organization automation. Use manage-automations with action=define and scope=organization to create it. Ask clarifying questions if needed about whether it runs on a schedule or event, any conditions, and what actions to take.";
 }
-export function AgentJobsTab({ canManageOrg = false }) {
+export function AgentJobsTab({ canManageOrg = false, hideHeader = false, }) {
     const t = useT();
     const formatters = useFormatters();
     const personalJobsQuery = useRecurringJobs("user");
@@ -181,51 +182,55 @@ export function AgentJobsTab({ canManageOrg = false }) {
                         defaultValue: "Create an automation that does this: ",
                     }), title: t("jobs.automationsCreateTitle", {
                         defaultValue: "Create an automation",
-                    }) })) })) : (_jsx("div", { className: "divide-y divide-border/60 border-y border-border/60", children: entries.map((entry) => {
-                    const resource = entry.resource;
-                    const lastRun = formatDateTime(resource.lastRun);
-                    const lastCheck = formatDateTime(resource.lastCheck);
-                    const nextRun = formatDateTime(resource.nextRun);
-                    const triggerDescription = entry.kind === "automation" && entry.triggerType === "event"
-                        ? t("jobs.automationEventTrigger", {
-                            defaultValue: "On {{event}}",
-                            event: entry.resource.event ?? "event",
-                        })
-                        : resource.scheduleDescription ||
-                            resource.schedule ||
-                            t("jobs.scheduledTrigger", {
-                                defaultValue: "Scheduled",
-                            });
-                    const instructions = entry.kind === "automation"
-                        ? entry.resource.body
-                        : entry.resource.instructions;
-                    return (_jsx("article", { className: "py-4 first:pt-5 last:pb-5", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "mt-0.5 text-muted-foreground", children: entry.triggerType === "event" ? (_jsx(IconBolt, { className: "size-4" })) : (_jsx(IconClock, { className: "size-4" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("h3", { className: "truncate text-sm font-medium", children: resource.name.replace(/-/g, " ") }), _jsx("span", { className: "rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: entry.triggerType === "event"
-                                                        ? t("jobs.eventTrigger", {
-                                                            defaultValue: "Event-triggered",
-                                                        })
-                                                        : t("jobs.scheduledTrigger", {
-                                                            defaultValue: "Scheduled",
-                                                        }) }), _jsx("span", { className: resource.enabled
-                                                        ? "rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-medium text-emerald-600 dark:text-emerald-400"
-                                                        : "rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: resource.enabled
-                                                        ? t("jobs.enabled", { defaultValue: "Enabled" })
-                                                        : t("jobs.paused", { defaultValue: "Paused" }) }), resource.lastStatus ? (_jsx("span", { className: "rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: resource.lastStatus })) : null] }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: triggerDescription }), _jsx("p", { className: "mt-1 line-clamp-2 text-xs text-muted-foreground/80", children: instructions }), lastRun || nextRun || lastCheck ? (_jsxs("div", { className: "mt-2 flex flex-wrap gap-x-4 gap-y-1 text-[11px] text-muted-foreground", children: [nextRun ? (_jsxs("span", { children: [t("jobs.nextRun", { defaultValue: "Next run" }), ":", " ", nextRun] })) : null, _jsxs("span", { children: [t("jobs.lastRun", { defaultValue: "Last run" }), ":", " ", lastRun ??
-                                                            t("jobs.neverRan", { defaultValue: "Never" })] }), !lastRun && lastCheck ? (_jsxs("span", { children: [t("jobs.lastChecked", {
-                                                            defaultValue: "Last checked",
-                                                        }), ": ", lastCheck] })) : null] })) : null, resource.lastError ? (_jsxs("p", { className: "mt-2 flex items-start gap-1.5 text-[11px] text-destructive", children: [_jsx(IconAlertTriangle, { className: "mt-px size-3 shrink-0" }), _jsx("span", { className: "min-w-0 break-words", children: resource.lastError })] })) : null] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "cursor-pointer px-2 text-xs", onClick: () => setDetailsTarget(entry), children: [_jsx(IconEye, { className: "size-3.5" }), t("jobs.details", { defaultValue: "Details" })] }), resource.canUpdate ? (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "cursor-pointer px-2 text-xs", disabled: mutationPending || runAutomationMutation.isPending, onClick: () => setRunTarget(entry), children: [_jsx(IconPlayerPlay, { className: "size-3.5" }), t("jobs.runNow", { defaultValue: "Run now" })] }), entry.triggerType === "schedule" ? (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "cursor-pointer px-2 text-xs", disabled: mutationPending, onClick: () => setScheduleTarget(entry), children: [_jsx(IconPencil, { className: "size-3.5" }), t("jobs.edit", { defaultValue: "Edit" })] })) : null, _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "cursor-pointer px-2 text-xs", disabled: mutationPending, onClick: () => mutateEntry(entry, "update", {
-                                                        enabled: !resource.enabled,
-                                                    }), children: [resource.enabled ? (_jsx(IconPlayerPause, { className: "size-3.5" })) : (_jsx(IconPlayerPlay, { className: "size-3.5" })), resource.enabled
-                                                            ? t("jobs.pause", { defaultValue: "Pause" })
-                                                            : t("jobs.resume", { defaultValue: "Resume" })] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-8 cursor-pointer text-muted-foreground hover:text-destructive", "aria-label": t("jobs.delete", {
-                                                        defaultValue: "Delete",
-                                                    }), onClick: () => setDeleteTarget(entry), children: _jsx(IconTrash, { className: "size-3.5" }) })] })) : null] })] }) }, `${entry.kind}:${resource.id}`));
-                }) }))] }));
+                    }) })), variant: "card" })) : (_jsx("div", { className: "overflow-hidden rounded-xl border border-border/70 bg-card text-card-foreground", children: _jsx("div", { className: "divide-y divide-border/60 px-4", children: entries.map((entry) => {
+                        const resource = entry.resource;
+                        const lastRun = formatDateTime(resource.lastRun);
+                        const lastCheck = formatDateTime(resource.lastCheck);
+                        const nextRun = formatDateTime(resource.nextRun);
+                        const triggerDescription = entry.kind === "automation" && entry.triggerType === "event"
+                            ? t("jobs.automationEventTrigger", {
+                                defaultValue: "On {{event}}",
+                                event: entry.resource.event ?? "event",
+                            })
+                            : resource.scheduleDescription ||
+                                resource.schedule ||
+                                t("jobs.scheduledTrigger", {
+                                    defaultValue: "Scheduled",
+                                });
+                        const instructions = entry.kind === "automation"
+                            ? entry.resource.body
+                            : entry.resource.instructions;
+                        return (_jsx("article", { className: "py-4 first:pt-5 last:pb-5", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "mt-0.5 text-muted-foreground", children: entry.triggerType === "event" ? (_jsx(IconBolt, { className: "size-4" })) : (_jsx(IconClock, { className: "size-4" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("h3", { className: "truncate text-sm font-medium", children: resource.name.replace(/-/g, " ") }), _jsx("span", { className: "rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: entry.triggerType === "event"
+                                                            ? t("jobs.eventTrigger", {
+                                                                defaultValue: "Event-triggered",
+                                                            })
+                                                            : t("jobs.scheduledTrigger", {
+                                                                defaultValue: "Scheduled",
+                                                            }) }), _jsx("span", { className: resource.enabled
+                                                            ? "rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-medium text-emerald-600 dark:text-emerald-400"
+                                                            : "rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: resource.enabled
+                                                            ? t("jobs.enabled", { defaultValue: "Enabled" })
+                                                            : t("jobs.paused", { defaultValue: "Paused" }) }), resource.lastStatus ? (_jsx("span", { className: "rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: resource.lastStatus })) : null] }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: triggerDescription }), _jsx("p", { className: "hidden", children: instructions }), lastRun || nextRun || lastCheck ? (_jsxs("div", { className: "hidden", children: [nextRun ? (_jsxs("span", { children: [t("jobs.nextRun", { defaultValue: "Next run" }), ":", " ", nextRun] })) : null, _jsxs("span", { children: [t("jobs.lastRun", { defaultValue: "Last run" }), ":", " ", lastRun ??
+                                                                t("jobs.neverRan", { defaultValue: "Never" })] }), !lastRun && lastCheck ? (_jsxs("span", { children: [t("jobs.lastChecked", {
+                                                                defaultValue: "Last checked",
+                                                            }), ": ", lastCheck] })) : null] })) : null, resource.lastError ? (_jsxs("p", { className: "mt-2 flex items-start gap-1.5 text-[11px] text-destructive", children: [_jsx(IconAlertTriangle, { className: "mt-px size-3 shrink-0" }), _jsx("span", { className: "min-w-0 break-words", children: resource.lastError })] })) : null] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [resource.canUpdate ? (_jsx("button", { type: "button", role: "switch", "aria-checked": resource.enabled, "aria-label": resource.enabled
+                                                    ? "Pause automation"
+                                                    : "Resume automation", disabled: mutationPending, onClick: () => mutateEntry(entry, "update", {
+                                                    enabled: !resource.enabled,
+                                                }), className: `relative h-5 w-9 rounded-full transition-colors disabled:opacity-50 ${resource.enabled ? "bg-primary" : "bg-muted"}`, children: _jsx("span", { className: `absolute top-0.5 size-4 rounded-full bg-background shadow-sm transition-transform ${resource.enabled ? "start-[18px]" : "start-0.5"}` }) })) : null, _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "cursor-pointer gap-1 px-2.5 text-xs", children: ["Manage", _jsx(IconChevronDown, { className: "size-3.5" })] }) }), _jsxs(PopoverContent, { align: "end", className: "w-40 p-1", children: [_jsxs("button", { type: "button", onClick: () => setDetailsTarget(entry), className: "flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-xs hover:bg-accent", children: [_jsx(IconEye, { className: "size-3.5" }), " Details"] }), resource.canUpdate ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", disabled: runAutomationMutation.isPending, onClick: () => setRunTarget(entry), className: "flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-xs hover:bg-accent disabled:opacity-50", children: [_jsx(IconPlayerPlay, { className: "size-3.5" }), " Run now"] }), entry.triggerType === "schedule" ? (_jsxs("button", { type: "button", onClick: () => setScheduleTarget(entry), className: "flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-xs hover:bg-accent", children: [_jsx(IconPencil, { className: "size-3.5" }), " Edit"] })) : null, _jsxs("button", { type: "button", onClick: () => setDeleteTarget(entry), className: "flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-xs text-destructive hover:bg-destructive/10", children: [_jsx(IconTrash, { className: "size-3.5" }), " Delete"] })] })) : null] })] })] }), _jsxs("div", { className: "hidden", children: [_jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "cursor-pointer px-2 text-xs", onClick: () => setDetailsTarget(entry), children: [_jsx(IconEye, { className: "size-3.5" }), t("jobs.details", { defaultValue: "Details" })] }), resource.canUpdate ? (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "cursor-pointer px-2 text-xs", disabled: mutationPending || runAutomationMutation.isPending, onClick: () => setRunTarget(entry), children: [_jsx(IconPlayerPlay, { className: "size-3.5" }), t("jobs.runNow", { defaultValue: "Run now" })] }), entry.triggerType === "schedule" ? (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "cursor-pointer px-2 text-xs", disabled: mutationPending, onClick: () => setScheduleTarget(entry), children: [_jsx(IconPencil, { className: "size-3.5" }), t("jobs.edit", { defaultValue: "Edit" })] })) : null, _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "cursor-pointer px-2 text-xs", disabled: mutationPending, onClick: () => mutateEntry(entry, "update", {
+                                                            enabled: !resource.enabled,
+                                                        }), children: [resource.enabled ? (_jsx(IconPlayerPause, { className: "size-3.5" })) : (_jsx(IconPlayerPlay, { className: "size-3.5" })), resource.enabled
+                                                                ? t("jobs.pause", { defaultValue: "Pause" })
+                                                                : t("jobs.resume", { defaultValue: "Resume" })] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-8 cursor-pointer text-muted-foreground hover:text-destructive", "aria-label": t("jobs.delete", {
+                                                            defaultValue: "Delete",
+                                                        }), onClick: () => setDeleteTarget(entry), children: _jsx(IconTrash, { className: "size-3.5" }) })] })) : null] })] }) }, `${entry.kind}:${resource.id}`));
+                    }) }) }))] }));
     const mutationError = personalJobsMutation.error ||
         personalAutomationsMutation.error ||
         organizationJobsMutation.error ||
         organizationAutomationsMutation.error ||
         runAutomationMutation.error;
-    return (_jsxs(AgentTabFrame, { title: t("jobs.pageTitle", { defaultValue: "Automations" }), description: t("jobs.pageDescription", {
+    return (_jsxs(AgentTabFrame, { compact: hideHeader, title: t("jobs.pageTitle", { defaultValue: "Automations" }), description: t("jobs.pageDescription", {
             defaultValue: "Manage agent tasks that run on a schedule or in response to events.",
         }), actions: _jsx(AgentAskPopover, { context: automationCreationContext(), prompt: t("jobs.automationPrompt", {
                 defaultValue: "Create an automation that does this: ",
@@ -233,7 +238,13 @@ export function AgentJobsTab({ canManageOrg = false }) {
                 defaultValue: "Create an automation",
             }), label: t("jobs.newAutomation", {
                 defaultValue: "New automation",
-            }) }), children: [_jsxs("div", { className: "space-y-7", children: [renderSection({
+            }) }), children: [_jsxs("div", { className: "space-y-7", children: [hideHeader ? (_jsx("div", { className: "flex justify-end", children: _jsx(AgentAskPopover, { context: automationCreationContext(), prompt: t("jobs.automationPrompt", {
+                                defaultValue: "Create an automation that does this: ",
+                            }), title: t("jobs.automationsCreateTitle", {
+                                defaultValue: "Create an automation",
+                            }), label: t("jobs.newAutomation", {
+                                defaultValue: "New automation",
+                            }) }) })) : null, renderSection({
                         title: t("jobs.personal", { defaultValue: "Personal" }),
                         description: t("jobs.personalDescription", {
                             defaultValue: "Scheduled and event-triggered automations that run for you.",
@@ -244,7 +255,7 @@ export function AgentJobsTab({ canManageOrg = false }) {
                             personalJobsQuery.error,
                             personalAutomationsQuery.error,
                         ].filter(Boolean),
-                    }), _jsx("div", { className: "border-t border-border/70 pt-6", children: renderSection({
+                    }), _jsx("div", { className: "pt-2", children: renderSection({
                             title: t("jobs.organization", { defaultValue: "Organization" }),
                             description: t("jobs.organizationDescription", {
                                 defaultValue: "Scheduled and event-triggered automations shared with this organization.",

package/dist/client/agent-page/AgentTabFrame.d.ts

@@ -7,8 +7,9 @@ interface AgentTabFrameProps {
     actions?: ReactNode;
     children: ReactNode;
     className?: string;
+    compact?: boolean;
 }
 /** Shared settings surface for Manage agent page tabs. */
-export declare function AgentTabFrame({ title, description, helpHref, helpLabel, actions, children, className, }: AgentTabFrameProps): import("react").JSX.Element;
+export declare function AgentTabFrame({ title, description, helpHref, helpLabel, actions, children, className, compact, }: AgentTabFrameProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=AgentTabFrame.d.ts.map

package/dist/client/agent-page/AgentTabFrame.js

@@ -2,7 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconHelpCircle } from "@tabler/icons-react";
 import { cn } from "../utils.js";
 /** Shared settings surface for Manage agent page tabs. */
-export function AgentTabFrame({ title, description, helpHref, helpLabel, actions, children, className, }) {
-    return (_jsxs("div", { className: cn("mx-auto flex w-full max-w-5xl flex-col gap-6", className), children: [_jsxs("header", { className: "flex flex-wrap items-start justify-between gap-4 pb-5", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("h2", { className: "text-xl font-semibold tracking-tight text-foreground", children: title }), helpHref && (_jsx("a", { href: helpHref, target: "_blank", rel: "noopener noreferrer", "aria-label": helpLabel ?? `Open ${title} documentation`, title: helpLabel ?? `Open ${title} documentation`, className: "inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground", children: _jsx(IconHelpCircle, { className: "size-4" }) }))] }), _jsx("p", { className: "max-w-2xl text-sm leading-relaxed text-muted-foreground", children: description })] }), actions] }), _jsx("div", { className: "min-w-0", children: children })] }));
+export function AgentTabFrame({ title, description, helpHref, helpLabel, actions, children, className, compact = false, }) {
+    return (_jsxs("div", { className: cn(compact
+            ? "flex w-full flex-col gap-6"
+            : "mx-auto flex w-full max-w-5xl flex-col gap-6", className), children: [!compact && (_jsxs("header", { className: "flex flex-wrap items-start justify-between gap-4 pb-5", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("h2", { className: "text-xl font-semibold tracking-tight text-foreground", children: title }), helpHref && (_jsx("a", { href: helpHref, target: "_blank", rel: "noopener noreferrer", "aria-label": helpLabel ?? `Open ${title} documentation`, title: helpLabel ?? `Open ${title} documentation`, className: "inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground", children: _jsx(IconHelpCircle, { className: "size-4" }) }))] }), _jsx("p", { className: "max-w-2xl text-sm leading-relaxed text-muted-foreground", children: description })] }), actions] })), _jsx("div", { className: "min-w-0", children: children })] }));
 }
 //# sourceMappingURL=AgentTabFrame.js.map

package/dist/client/agent-page/AgentTabsPage.js

@@ -127,7 +127,7 @@ function ConnectionsTab({ canManageOrg = false }) {
     const canCreateOrgMcp = hasOrg && canManageOrg;
     const onCreateMcpServer = useCallback(async (args) => {
         if (args.scope === "org" && !canCreateOrgMcp) {
-            throw new Error("Only organization admins can add organization MCP servers.");
+            throw new Error("Only organization admins can add organization agent integrations.");
         }
         return createServer.mutateAsync(args);
     }, [canCreateOrgMcp, createServer]);
@@ -156,15 +156,15 @@ function ConnectionsTab({ canManageOrg = false }) {
         const selected = selectedServer?.id === server.id && selectedServer.scope === server.scope;
         return (_jsxs("div", { className: cn("group/connection-row py-4 transition-colors first:pt-5 last:pb-5", selected && "bg-accent/20"), children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsxs("button", { type: "button", onClick: () => setSelectedServer(selected ? null : server), className: "min-w-0 flex-1 cursor-pointer text-start", children: [_jsx("div", { className: "flex flex-wrap items-center gap-2", children: _jsx("span", { className: "truncate text-sm font-medium text-foreground", children: server.name }) }), _jsx("code", { className: "mt-1 block truncate text-[11px] text-muted-foreground", children: server.url }), _jsxs("div", { className: "mt-2 flex items-center gap-2", children: [_jsx(ServerStatus, { server: server }), server.description && (_jsx("span", { className: "truncate text-[11px] text-muted-foreground/70", children: server.description }))] })] }), canDelete && (_jsx("button", { type: "button", onClick: () => void removeServer(server), disabled: deleteServer.isPending, className: cn("cursor-pointer rounded-md px-2 py-1 text-[11px] font-medium text-muted-foreground hover:bg-destructive/10 hover:text-destructive", deleteTarget === key && "bg-destructive/10 text-destructive"), children: deleteTarget === key ? "Confirm" : "Delete" }))] }), selected && (_jsx("div", { className: "mt-3 border-t border-border/70 pt-3", children: _jsx(McpServerDetail, { server: server }) }))] }, key));
     };
-    return (_jsx(AgentTabFrame, { title: "Connections", description: "Tools and services this agent can reach, grouped by where they are configured.", actions: _jsx("button", { type: "button", onClick: () => {
+    return (_jsx(AgentTabFrame, { title: "Agent integrations", description: "Tools and services this agent can reach, grouped by where they are configured.", actions: _jsx("button", { type: "button", onClick: () => {
                 setError(null);
                 setDialogOpen(true);
-            }, className: "cursor-pointer rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90", children: t("mcpIntegrations.connect") }), children: _jsxs("section", { className: "space-y-4", children: [error && (_jsx("p", { className: "rounded-md border border-destructive/20 bg-destructive/5 px-3 py-2 text-xs text-destructive", children: error })), serversQuery.isLoading ? (_jsx(TabLoading, {})) : serversQuery.isError ? (_jsx("p", { className: "rounded-md border border-destructive/20 bg-destructive/5 px-3 py-2 text-xs text-destructive", children: "Could not load MCP servers." })) : (_jsx("div", { className: "space-y-6", children: [
+            }, className: "cursor-pointer rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90", children: t("mcpIntegrations.connect") }), children: _jsxs("section", { className: "space-y-4", children: [error && (_jsx("p", { className: "rounded-md border border-destructive/20 bg-destructive/5 px-3 py-2 text-xs text-destructive", children: error })), serversQuery.isLoading ? (_jsx(TabLoading, {})) : serversQuery.isError ? (_jsx("p", { className: "rounded-md border border-destructive/20 bg-destructive/5 px-3 py-2 text-xs text-destructive", children: "Could not load agent integrations." })) : (_jsx("div", { className: "space-y-6", children: [
                         { label: "Personal", servers: data?.user ?? [] },
                         { label: "Organization", servers: data?.org ?? [] },
-                    ].map((section) => (_jsxs("section", { className: "space-y-2", children: [_jsx("h2", { className: "text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground/70", children: section.label }), section.servers.length > 0 ? (_jsx("div", { className: "divide-y divide-border/60 border-y border-border/60", children: section.servers.map(renderServer) })) : (_jsx(AgentEmptyState, { icon: IconPlugConnected, title: `No ${section.label.toLowerCase()} connections yet`, description: section.label === "Personal"
+                    ].map((section) => (_jsxs("section", { className: "space-y-2", children: [_jsx("h2", { className: "text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground/70", children: section.label }), section.servers.length > 0 ? (_jsx("div", { className: "divide-y divide-border/60 border-y border-border/60", children: section.servers.map(renderServer) })) : (_jsx(AgentEmptyState, { icon: IconPlugConnected, title: `No ${section.label.toLowerCase()} agent integrations yet`, description: section.label === "Personal"
                                     ? "Connect a service to give the agent access to it."
-                                    : "Organization connections shared with this workspace will appear here." }))] }, section.label))) })), _jsx(McpIntegrationDialog, { open: dialogOpen, onOpenChange: setDialogOpen, defaultScope: "user", canCreateOrgMcp: canCreateOrgMcp, hasOrg: hasOrg, onCreateMcpServer: onCreateMcpServer })] }) }));
+                                    : "Organization agent integrations shared with this workspace will appear here." }))] }, section.label))) })), _jsx(McpIntegrationDialog, { open: dialogOpen, onOpenChange: setDialogOpen, defaultScope: "user", canCreateOrgMcp: canCreateOrgMcp, hasOrg: hasOrg, onCreateMcpServer: onCreateMcpServer })] }) }));
 }
 export const AGENT_ACCESS_DOCS_HREF = {
     mcp: "https://agent-native.com/docs/mcp-protocol",
@@ -323,12 +323,16 @@ export function AgentTabsPage({ appName, extraTabs = [], extraTabFactories = [],
         },
         {
             id: "connections",
-            label: "Connections",
+            label: "Agent integrations",
             icon: IconPlugConnected,
             group: "agent",
-            keywords: "mcp servers tools integrations",
+            keywords: "agent integrations tools connections",
             searchEntries: [
-                { id: "mcp-servers", label: "MCP servers", keywords: "tools" },
+                {
+                    id: "mcp-servers",
+                    label: "Agent integrations",
+                    keywords: "tools integrations connections",
+                },
             ],
             content: _jsx(ConnectionsTab, { scope: scope, canManageOrg: canManageOrg }),
         },

package/dist/client/agent-page/AgentWorkspaceContent.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+export type AgentWorkspaceTab = "overview" | "resources" | "automations" | "agents" | "access";
+export declare function AgentWorkspaceContent({ overview, className, activeTab, }: {
+    overview: ReactNode;
+    activeTab: AgentWorkspaceTab;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function agentWorkspaceTabHash(tab: AgentWorkspaceTab): string;
+export declare function isAgentWorkspaceTab(value: string): boolean;
+//# sourceMappingURL=AgentWorkspaceContent.d.ts.map

package/dist/client/agent-page/AgentWorkspaceContent.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconBook2, IconBolt, IconChecklist, IconFolder, IconHierarchy2, IconHistory, IconNotes, IconShieldLock, IconTopologyRing2, } from "@tabler/icons-react";
+import { lazy, Suspense, useEffect, useState } from "react";
+import { AgentsSection } from "../settings/AgentsSection.js";
+import { cn } from "../utils.js";
+import { AgentJobsTab } from "./AgentJobsTab.js";
+const ResourcesPanel = lazy(() => import("../resources/ResourcesPanel.js").then((module) => ({
+    default: module.ResourcesPanel,
+})));
+const RESOURCE_TABS = [
+    { id: "files", label: "Files", icon: IconFolder },
+    { id: "instructions", label: "Instructions", icon: IconChecklist },
+    { id: "agents", label: "Agents", icon: IconHierarchy2 },
+    { id: "memory", label: "Memory", icon: IconNotes },
+    { id: "skills", label: "Skills", icon: IconBook2 },
+    { id: "learnings", label: "Learnings", icon: IconHistory },
+    { id: "remote-agents", label: "Remote agents", icon: IconTopologyRing2 },
+];
+const HUB_TABS = [
+    { id: "overview", label: "Overview", icon: IconHierarchy2 },
+    { id: "resources", label: "Resources", icon: IconFolder },
+    { id: "automations", label: "Automations", icon: IconBolt },
+    { id: "agents", label: "Connected agents", icon: IconTopologyRing2 },
+    { id: "access", label: "Access", icon: IconShieldLock },
+];
+const RESOURCE_IDS = new Set(RESOURCE_TABS.map((tab) => tab.id));
+function normalizeHash(value) {
+    return decodeURIComponent(value.replace(/^#/, "")).toLowerCase();
+}
+function initialHubState() {
+    if (typeof window === "undefined") {
+        return { tab: "overview", resource: "files" };
+    }
+    const hash = normalizeHash(window.location.hash);
+    const parts = hash.split(":");
+    const scoped = parts[0] === "agent";
+    const requested = scoped ? parts[1] : hash;
+    const resource = scoped && RESOURCE_IDS.has(parts[2])
+        ? parts[2]
+        : "files";
+    if (requested === "resources" ||
+        (!scoped && RESOURCE_IDS.has(hash))) {
+        return {
+            tab: "resources",
+            resource: scoped ? resource : hash,
+        };
+    }
+    if (requested === "automations" || requested === "jobs") {
+        return { tab: "automations", resource };
+    }
+    if (requested === "agents" ||
+        requested === "a2a" ||
+        requested === "connected-agents" ||
+        requested === "remote-agents") {
+        return { tab: "agents", resource };
+    }
+    if (requested === "access")
+        return { tab: "access", resource };
+    return { tab: "overview", resource };
+}
+function ResourceContent({ resource }) {
+    const copy = RESOURCE_TABS.find((tab) => tab.id === resource);
+    return (_jsxs("div", { className: "space-y-5", children: [_jsx("div", { className: "flex items-center gap-1 overflow-x-auto", children: RESOURCE_TABS.map((tab) => {
+                    const Icon = tab.icon;
+                    const selected = tab.id === resource;
+                    return (_jsxs("button", { type: "button", onClick: () => {
+                            if (typeof window !== "undefined") {
+                                window.history.pushState(null, "", `${window.location.pathname}${window.location.search}#agent:resources:${tab.id}`);
+                                window.dispatchEvent(new Event("hashchange"));
+                            }
+                        }, className: cn("inline-flex shrink-0 items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors", selected
+                            ? "bg-accent text-foreground"
+                            : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), children: [_jsx(Icon, { className: "size-3.5" }), tab.label] }, tab.id));
+                }) }), _jsxs("header", { className: "space-y-1", children: [_jsx("h2", { className: "text-lg font-semibold tracking-tight text-foreground", children: copy?.label ?? "Resources" }), _jsx("p", { className: "text-sm leading-5 text-muted-foreground", children: resource === "files"
+                            ? "Add context the agent can use across conversations."
+                            : "Manage the resources that shape how the agent works." })] }), _jsx(Suspense, { fallback: _jsx("div", { className: "h-48 animate-pulse rounded-xl border border-border bg-muted/20" }), children: _jsx(ResourcesPanel, { showMcpServers: false, resourceFilter: resource, resourceTreeVariant: "collection", scope: "personal" }, resource) })] }));
+}
+function AccessContent() {
+    return (_jsx("div", { children: _jsx("div", { className: "rounded-xl border border-border/70 bg-card text-card-foreground", children: _jsx("div", { className: "px-5 py-5 sm:px-6", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground", children: _jsx(IconShieldLock, { className: "size-4" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Agent access" }), _jsx("p", { className: "mt-1 text-sm leading-5 text-muted-foreground", children: "Use the agent card and MCP endpoints from connected clients." })] })] }) }) }) }));
+}
+export function AgentWorkspaceContent({ overview, className, activeTab, }) {
+    const [{ resource }, setState] = useState(initialHubState);
+    useEffect(() => {
+        const sync = () => setState(initialHubState());
+        window.addEventListener("hashchange", sync);
+        window.addEventListener("popstate", sync);
+        return () => {
+            window.removeEventListener("hashchange", sync);
+            window.removeEventListener("popstate", sync);
+        };
+    }, []);
+    const page = HUB_TABS.find((item) => item.id === activeTab);
+    const pageDescription = activeTab === "overview"
+        ? "Configure how your agent works, what it knows, and what it can do."
+        : activeTab === "resources"
+            ? "Add context the agent can use across conversations."
+            : activeTab === "automations"
+                ? "Schedule and manage agent tasks."
+                : activeTab === "agents"
+                    ? "Connect agents to delegate work from chat."
+                    : "Control how other apps and agents access this agent.";
+    return (_jsxs("div", { className: cn("w-full space-y-6", className), children: [_jsxs("header", { className: "space-y-1", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: activeTab === "overview" ? "Agent" : page?.label }), _jsx("p", { className: "text-sm leading-5 text-muted-foreground", children: pageDescription })] }), activeTab === "overview" && overview, activeTab === "resources" && _jsx(ResourceContent, { resource: resource }), activeTab === "automations" && (_jsx(Suspense, { fallback: _jsx("div", { className: "h-48 animate-pulse rounded-xl border border-border bg-muted/20" }), children: _jsx(AgentJobsTab, { scope: "user", canManageOrg: true, hideHeader: true }) })), activeTab === "agents" && _jsx(AgentsSection, {}), activeTab === "access" && _jsx(AccessContent, {})] }));
+}
+export function agentWorkspaceTabHash(tab) {
+    return `agent:${tab}`;
+}
+export function isAgentWorkspaceTab(value) {
+    return value === "agent" || value.startsWith("agent:");
+}
+//# sourceMappingURL=AgentWorkspaceContent.js.map

package/dist/client/agent-page/AutomationDetailsDialog.js

@@ -24,7 +24,7 @@ export function AutomationDetailsDialog({ open, name, triggerSummary, fields, co
                 onClose();
         }, children: _jsxs(DialogContent, { className: "max-h-[85vh] max-w-2xl overflow-y-auto", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: name.replace(/-/g, " ") }), _jsx(DialogDescription, { children: triggerSummary })] }), _jsxs("div", { className: "space-y-4", children: [lastError ? (_jsxs("div", { className: "flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/5 p-2.5", children: [_jsx(IconAlertTriangle, { className: "mt-0.5 size-4 shrink-0 text-destructive" }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-xs font-medium text-destructive", children: t("jobs.blockedTitle", {
                                                 defaultValue: "This automation is not running",
-                                            }) }), _jsx("p", { className: "mt-0.5 break-words text-xs text-muted-foreground", children: lastError })] })] })) : null, _jsx("dl", { className: "grid grid-cols-2 gap-x-4 gap-y-2", children: fields.map((field) => (_jsxs("div", { className: "min-w-0", children: [_jsx("dt", { className: "text-[11px] uppercase tracking-wide text-muted-foreground/70", children: field.label }), _jsx("dd", { className: `mt-0.5 break-words text-sm ${field.mono ? "font-mono text-xs" : ""}`, children: field.value })] }, field.label))) }), condition ? (_jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium text-foreground", children: t("jobs.condition", { defaultValue: "Condition" }) }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: condition })] })) : null, _jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium text-foreground", children: t("jobs.instructions", { defaultValue: "Instructions" }) }), _jsx("p", { className: "mt-1 max-h-56 overflow-y-auto whitespace-pre-wrap rounded-md bg-muted/50 p-2.5 text-sm text-muted-foreground", children: instructions })] }), mcpTools.length > 0 ? (_jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium text-foreground", children: t("jobs.mcpTools", { defaultValue: "Connected MCP tools" }) }), _jsx("div", { className: "mt-1 flex flex-wrap gap-1.5", children: mcpTools.map((toolName) => (_jsx("code", { className: "rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground", children: toolName }, toolName))) })] })) : null, _jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium text-foreground", children: t("jobs.pastRuns", { defaultValue: "Past runs" }) }), runsQuery.isLoading ? (_jsxs("div", { className: "mt-2 flex items-center gap-2 text-xs text-muted-foreground", "aria-busy": "true", children: [_jsx(IconLoader2, { className: "size-3.5 animate-spin" }), t("jobs.loading", { defaultValue: "Loading…" })] })) : runsQuery.error ? (_jsx("p", { className: "mt-1 text-xs text-destructive", children: t("jobs.runsLoadError", {
+                                            }) }), _jsx("p", { className: "mt-0.5 break-words text-xs text-muted-foreground", children: lastError })] })] })) : null, _jsx("dl", { className: "grid grid-cols-2 gap-x-4 gap-y-2", children: fields.map((field) => (_jsxs("div", { className: "min-w-0", children: [_jsx("dt", { className: "text-[11px] uppercase tracking-wide text-muted-foreground/70", children: field.label }), _jsx("dd", { className: `mt-0.5 break-words text-sm ${field.mono ? "font-mono text-xs" : ""}`, children: field.value })] }, field.label))) }), condition ? (_jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium text-foreground", children: t("jobs.condition", { defaultValue: "Condition" }) }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: condition })] })) : null, _jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium text-foreground", children: t("jobs.instructions", { defaultValue: "Instructions" }) }), _jsx("p", { className: "mt-1 max-h-56 overflow-y-auto whitespace-pre-wrap rounded-md bg-muted/50 p-2.5 text-sm text-muted-foreground", children: instructions })] }), mcpTools.length > 0 ? (_jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium text-foreground", children: t("jobs.mcpTools", { defaultValue: "Connected agent tools" }) }), _jsx("div", { className: "mt-1 flex flex-wrap gap-1.5", children: mcpTools.map((toolName) => (_jsx("code", { className: "rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground", children: toolName }, toolName))) })] })) : null, _jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium text-foreground", children: t("jobs.pastRuns", { defaultValue: "Past runs" }) }), runsQuery.isLoading ? (_jsxs("div", { className: "mt-2 flex items-center gap-2 text-xs text-muted-foreground", "aria-busy": "true", children: [_jsx(IconLoader2, { className: "size-3.5 animate-spin" }), t("jobs.loading", { defaultValue: "Loading…" })] })) : runsQuery.error ? (_jsx("p", { className: "mt-1 text-xs text-destructive", children: t("jobs.runsLoadError", {
                                         defaultValue: "Could not load run history.",
                                     }) })) : runs.length === 0 ? (_jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: t("jobs.noRuns", {
                                         defaultValue: "This automation has not executed yet. Only real executions are recorded here.",

package/dist/client/chat/run-recovery.js

@@ -3,7 +3,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // LoopLimitContinueCard, BuilderConnectCta, BuilderSetupCard, ApiKeyConnect,
 // PlanModeCallout, and getLoopLimitMetadata / getRunErrorMetadata exports used
 // by AssistantChatInner.
-import { IconLoader2, IconCheck, IconCopy, IconX, IconChevronDown, IconExternalLink, IconGitFork, IconGauge, IconSettings, IconArrowRight, IconAlertTriangle, IconPlayerPlay, IconRefresh, IconPlus, IconClipboardList, } from "@tabler/icons-react";
+import { IconLoader2, IconCheck, IconCopy, IconX, IconChevronDown, IconGitFork, IconGauge, IconSettings, IconArrowRight, IconAlertTriangle, IconPlayerPlay, IconRefresh, IconPlus, IconClipboardList, } from "@tabler/icons-react";
 import { useState, useEffect, useCallback, useRef } from "react";
 import { saveAgentEngineApiKey, } from "../agent-engine-key.js";
 import { agentNativePath } from "../api-path.js";
@@ -128,7 +128,7 @@ export function BuilderConnectCta({ variant = "primary", onConnected, }) {
     if (configured) {
         return (_jsxs("div", { className: containerClass, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-xs font-medium text-foreground", children: "Builder.io" }), _jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5", children: orgName ? `Connected — ${orgName}` : "Connected" })] }), _jsxs("span", { className: "ml-auto inline-flex items-center gap-1 shrink-0 rounded-md bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-500", children: [_jsx(IconCheck, { size: 10 }), "Connected"] })] }));
     }
-    return (_jsxs("div", { className: containerClass, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-xs font-medium text-foreground", children: "Connect Builder.io" }), _jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5 max-w-[220px]", children: "Free credits for LLM, hosting, and more \u2014 no API key needed" }), error && _jsx("p", { className: "mt-1 text-[10px] text-destructive", children: error })] }), _jsx("button", { type: "button", onClick: () => start(), disabled: connecting, className: "ml-auto inline-flex items-center gap-1 shrink-0 rounded-md bg-foreground px-3 py-1.5 text-[11px] font-medium no-underline text-background hover:opacity-90 disabled:opacity-60 disabled:cursor-wait", "aria-busy": connecting, children: connecting ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { size: 10, className: "animate-spin" }), "Waiting\u2026"] })) : (_jsxs(_Fragment, { children: ["Connect", _jsx(IconExternalLink, { size: 10 })] })) })] }));
+    return (_jsxs("div", { className: containerClass, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-xs font-medium text-foreground", children: "Connect Builder.io" }), _jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5 max-w-[220px]", children: "Free credits for LLM, hosting, and more \u2014 no API key needed" }), error && _jsx("p", { className: "mt-1 text-[10px] text-destructive", children: error })] }), _jsx("button", { type: "button", onClick: () => start(), disabled: connecting, className: "ml-auto inline-flex items-center gap-1 shrink-0 rounded-md bg-foreground px-3 py-1.5 text-[11px] font-medium no-underline text-background hover:opacity-90 disabled:opacity-60 disabled:cursor-wait", "aria-busy": connecting, children: connecting ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { size: 10, className: "animate-spin" }), "Waiting\u2026"] })) : ("Connect") })] }));
 }
 // ─── ApiKeyConnect ────────────────────────────────────────────────────────────
 const API_KEY_PROVIDERS = [
@@ -277,7 +277,7 @@ export function RunErrorRecoveryCard({ info, onContinue, onRetry, onFork, onDism
             onDismiss();
         }
     }, [builderReconnectResolved, onDismiss]);
-    return (_jsxs("div", { className: "rounded-lg border border-amber-500/25 bg-amber-500/[0.06] p-3 text-sm", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-amber-500/10 text-amber-700 dark:text-amber-300", children: _jsx(IconAlertTriangle, { size: 14 }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "font-medium text-foreground", children: runErrorHeadline(info) }), _jsx("p", { className: "mt-1 text-xs leading-relaxed text-muted-foreground", children: info.message }), shouldShowBuilderReconnect && !builderReconnectResolved && (_jsx("p", { className: "mt-2 text-xs leading-relaxed text-muted-foreground", children: "The current Builder.io or model-provider credential was rejected. Reconnect Builder.io, then retry this message." })), isConnectionRecoveryError && (_jsx("p", { className: "mt-2 text-xs leading-relaxed text-muted-foreground", children: "If retry lands on the same error, start a new chat session and continue from what already changed." })), (info.runId || info.errorCode || info.details) && (_jsxs("button", { type: "button", onClick: () => setDetailsOpen((v) => !v), className: "mt-2 inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-foreground", children: [_jsx(IconChevronDown, { size: 12, className: cn("transition-transform", detailsOpen && "rotate-180") }), "Details"] })), detailsOpen && (_jsxs("div", { className: "mt-2 rounded-md border border-border/60 bg-background/70 p-2 font-mono text-[11px] leading-relaxed text-muted-foreground", children: [info.runId && _jsxs("div", { children: ["run: ", info.runId] }), info.errorCode && _jsxs("div", { children: ["code: ", info.errorCode] }), info.details && (_jsx("pre", { className: "mt-2 max-h-28 overflow-auto whitespace-pre-wrap break-words font-mono", children: info.details }))] }))] }), _jsx("button", { type: "button", onClick: onDismiss, "aria-label": "Dismiss", className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-background/80 hover:text-foreground", children: _jsx(IconX, { size: 14 }) })] }), _jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [shouldShowBuilderReconnect && !builderReconnectResolved && (_jsxs("button", { type: "button", onClick: () => builderReconnect.start(), disabled: builderReconnect.connecting, className: "inline-flex h-8 items-center gap-1.5 rounded-md bg-foreground px-3 text-xs font-medium text-background hover:opacity-90 disabled:cursor-wait disabled:opacity-70", children: [builderReconnect.connecting ? (_jsx(IconLoader2, { size: 13, className: "animate-spin" })) : (_jsx(IconExternalLink, { size: 13 })), builderReconnect.connecting
+    return (_jsxs("div", { className: "rounded-lg border border-amber-500/25 bg-amber-500/[0.06] p-3 text-sm", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-amber-500/10 text-amber-700 dark:text-amber-300", children: _jsx(IconAlertTriangle, { size: 14 }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "font-medium text-foreground", children: runErrorHeadline(info) }), _jsx("p", { className: "mt-1 text-xs leading-relaxed text-muted-foreground", children: info.message }), shouldShowBuilderReconnect && !builderReconnectResolved && (_jsx("p", { className: "mt-2 text-xs leading-relaxed text-muted-foreground", children: "The current Builder.io or model-provider credential was rejected. Reconnect Builder.io, then retry this message." })), isConnectionRecoveryError && (_jsx("p", { className: "mt-2 text-xs leading-relaxed text-muted-foreground", children: "If retry lands on the same error, start a new chat session and continue from what already changed." })), (info.runId || info.errorCode || info.details) && (_jsxs("button", { type: "button", onClick: () => setDetailsOpen((v) => !v), className: "mt-2 inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-foreground", children: [_jsx(IconChevronDown, { size: 12, className: cn("transition-transform", detailsOpen && "rotate-180") }), "Details"] })), detailsOpen && (_jsxs("div", { className: "mt-2 rounded-md border border-border/60 bg-background/70 p-2 font-mono text-[11px] leading-relaxed text-muted-foreground", children: [info.runId && _jsxs("div", { children: ["run: ", info.runId] }), info.errorCode && _jsxs("div", { children: ["code: ", info.errorCode] }), info.details && (_jsx("pre", { className: "mt-2 max-h-28 overflow-auto whitespace-pre-wrap break-words font-mono", children: info.details }))] }))] }), _jsx("button", { type: "button", onClick: onDismiss, "aria-label": "Dismiss", className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-background/80 hover:text-foreground", children: _jsx(IconX, { size: 14 }) })] }), _jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [shouldShowBuilderReconnect && !builderReconnectResolved && (_jsxs("button", { type: "button", onClick: () => builderReconnect.start(), disabled: builderReconnect.connecting, className: "inline-flex h-8 items-center gap-1.5 rounded-md bg-foreground px-3 text-xs font-medium text-background hover:opacity-90 disabled:cursor-wait disabled:opacity-70", children: [builderReconnect.connecting ? (_jsx(IconLoader2, { size: 13, className: "animate-spin" })) : null, builderReconnect.connecting
                                 ? "Connecting Builder.io"
                                 : "Reconnect Builder.io"] })), canRecover && (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: onContinue, className: "inline-flex h-8 items-center gap-1.5 rounded-md bg-foreground px-3 text-xs font-medium text-background hover:opacity-90", children: [_jsx(IconPlayerPlay, { size: 13 }), "Continue"] }), _jsxs("button", { type: "button", onClick: onRetry, className: "inline-flex h-8 items-center gap-1.5 rounded-md border border-border bg-background px-3 text-xs font-medium text-foreground hover:bg-accent", children: [_jsx(IconRefresh, { size: 13 }), isQueryError ? "Diagnose and retry" : "Retry"] })] })), canRecover && isConnectionRecoveryError && (_jsxs("button", { type: "button", onClick: startNewChat, className: "inline-flex h-8 items-center gap-1.5 rounded-md border border-border bg-background px-3 text-xs font-medium text-foreground hover:bg-accent", children: [_jsx(IconPlus, { size: 13 }), "New chat"] })), canRecover && onFork && !isConnectionRecoveryError && (_jsxs("button", { type: "button", onClick: handleFork, disabled: forking, title: "Fork this conversation into a separate chat thread.", "aria-label": "Fork this conversation into a separate chat thread", className: "inline-flex h-8 items-center gap-1.5 rounded-md border border-border bg-background px-3 text-xs font-medium text-foreground hover:bg-accent disabled:cursor-wait disabled:opacity-70", children: [forking ? (_jsx(IconLoader2, { size: 13, className: "animate-spin" })) : (_jsx(IconGitFork, { size: 13 })), forking ? "Forking..." : "Fork chat"] })), _jsxs("button", { type: "button", onClick: copyDetails, className: "ml-auto inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs font-medium text-muted-foreground hover:bg-background/80 hover:text-foreground", children: [copyState === "copied" ? (_jsx(IconCheck, { size: 13 })) : copyState === "failed" ? (_jsx(IconX, { size: 13 })) : (_jsx(IconCopy, { size: 13 })), _jsx("span", { "aria-live": "polite", children: copyState === "copied"
                                     ? "Copied"

package/dist/client/error-format.js

@@ -115,7 +115,7 @@ export function normalizeChatError(errorMessage, errorCode) {
     }
     if (isProviderAuthenticationError(text, errorCode)) {
         return {
-            message: "The model provider rejected the saved API key. Update the key in API Keys & Connections, then retry.",
+            message: "The model provider rejected the saved API key. Update the key in Settings → Integrations → API keys, then retry.",
             details: text,
         };
     }

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

@@ -1,3 +1,4 @@
 import React from "react";
+export declare function LegacyIntegrationsPanel(): React.JSX.Element;
 export declare function IntegrationsPanel(): React.JSX.Element;
 //# sourceMappingURL=IntegrationsPanel.d.ts.map