@agent-native/core 0.103.0 → 0.104.0

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

@@ -1,9 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconBrain, IconClock, IconExternalLink, IconFolder, IconPlugConnected, IconSearch, IconShieldLock, IconX, } from "@tabler/icons-react";
+import { IconBook2, IconChecklist, IconClock, IconExternalLink, IconFolder, IconHistory, IconHierarchy2, IconNotes, IconPlugConnected, IconTopologyRing2, IconSearch, IconShieldLock, IconX, } from "@tabler/icons-react";
 import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { MCP_CONNECT_GUIDES, MCP_CONNECT_MCP_URL_TEMPLATE, MCP_STATIC_TOKEN_FALLBACK, interpolateMcpConnectTemplate, } from "../../shared/mcp-connect-content.js";
 import { appPath } from "../api-path.js";
-import { Tooltip, TooltipContent, TooltipTrigger, } from "../components/ui/tooltip.js";
 import { useT } from "../i18n.js";
 import { useOrg } from "../org/hooks.js";
 import { McpIntegrationDialog,
@@ -12,8 +11,9 @@ import { McpIntegrationDialog,
  } from "../resources/McpIntegrationDialog.js";
 import { McpServerDetail } from "../resources/McpServerDetail.js";
 import { useCreateMcpServer, useDeleteMcpServer, useMcpServers, } from "../resources/use-mcp-servers.js";
-import { AgentsSection } from "../settings/AgentsSection.js";
 import { cn } from "../utils.js";
+import { AgentEmptyState } from "./AgentEmptyState.js";
+import { AgentTabFrame } from "./AgentTabFrame.js";
 const AgentContextTab = lazy(() => import("./AgentContextTab.js").then((module) => ({
     default: module.AgentContextTab,
 })));
@@ -36,6 +36,9 @@ function resolveTabId(tabs, value) {
     const normalized = normalizeTabId(value);
     if (!normalized)
         return null;
+    if (normalized === "context" && tabs.some((tab) => tab.id === "snapshots")) {
+        return "snapshots";
+    }
     if (tabs.some((tab) => tab.id === normalized))
         return normalized;
     const section = normalized.split(":", 1)[0];
@@ -45,41 +48,48 @@ function resolveTabId(tabs, value) {
 function updateTabHash(tabId) {
     if (typeof window === "undefined")
         return;
-    const hash = tabId === "context" ? "" : `#${encodeURIComponent(tabId)}`;
+    const hash = tabId === "files" ? "" : `#${encodeURIComponent(tabId)}`;
     window.history.pushState(null, "", `${window.location.pathname}${window.location.search}${hash}`);
 }
-function initialScope() {
-    if (typeof window === "undefined")
-        return "user";
-    try {
-        const queryScope = new URLSearchParams(window.location.search).get("scope");
-        if (queryScope === "org" || queryScope === "user")
-            return queryScope;
-        return localStorage.getItem("agent-page-scope") === "org" ? "org" : "user";
-    }
-    catch {
-        return "user";
-    }
-}
-function updateScopeUrl(scope) {
-    if (typeof window === "undefined")
-        return;
-    const search = new URLSearchParams(window.location.search);
-    search.set("scope", scope);
-    const query = search.toString();
-    window.history.replaceState(null, "", `${window.location.pathname}${query ? `?${query}` : ""}${window.location.hash}`);
-}
 function TabLoading() {
     return (_jsxs("div", { className: "space-y-3", "aria-busy": "true", children: [_jsx("div", { className: "h-5 w-36 animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-20 animate-pulse rounded-lg border border-border bg-muted/30" }), _jsx("div", { className: "h-20 animate-pulse rounded-lg border border-border bg-muted/30" })] }));
 }
 function EmptySlot({ label }) {
     return (_jsx("div", { className: "flex min-h-[220px] items-center justify-center rounded-lg border border-dashed border-border/70 bg-muted/10", children: _jsx("span", { className: "sr-only", children: label }) }));
 }
-function FilesTab({ scope }) {
-    return (_jsx("div", { className: "h-[calc(100vh-14rem)] min-h-[480px]", children: _jsx(ResourcesPanel, { showMcpServers: false, scope: scope === "org" ? "shared" : "personal" }, scope) }));
-}
-function ScopeBadge({ scope }) {
-    return (_jsx("span", { className: "rounded-full border border-border bg-muted/40 px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: scope === "user" ? "Personal" : "Organization" }));
+const RESOURCE_TAB_COPY = {
+    files: {
+        title: "Files",
+        description: "Plain workspace files the agent can read and write.",
+    },
+    instructions: {
+        title: "Instructions",
+        description: "The rules, preferences, and project guidance that steer the agent.",
+    },
+    agents: {
+        title: "Agents",
+        description: "Reusable profiles for focused sub-agents and delegated work.",
+    },
+    memory: {
+        title: "Memory",
+        description: "Durable notes the agent can retrieve across conversations.",
+    },
+    skills: {
+        title: "Skills",
+        description: "Specialized instructions that give the agent repeatable abilities.",
+    },
+    learnings: {
+        title: "Learnings",
+        description: "Corrections and patterns worth carrying forward for future work.",
+    },
+    "remote-agents": {
+        title: "Remote agents",
+        description: "Other agents this workspace can call through A2A.",
+    },
+};
+function AgentResourceTab({ scope, view, }) {
+    const copy = RESOURCE_TAB_COPY[view];
+    return (_jsx(AgentTabFrame, { title: copy.title, description: copy.description, children: _jsx("div", { className: "min-h-[480px]", children: _jsx(ResourcesPanel, { showMcpServers: false, resourceFilter: view, resourceTreeVariant: view === "files" ? "tree" : "collection", scope: "personal" }, `${scope}-${view}`) }) }));
 }
 function ServerStatus({ server }) {
     if (server.status.state === "connected") {
@@ -90,7 +100,7 @@ function ServerStatus({ server }) {
     }
     return (_jsx("span", { className: "text-[11px] text-muted-foreground", children: "Status unknown" }));
 }
-function ConnectionsTab({ scope, canManageOrg = false }) {
+function ConnectionsTab({ canManageOrg = false }) {
     const t = useT();
     const serversQuery = useMcpServers();
     const createServer = useCreateMcpServer();
@@ -102,7 +112,6 @@ function ConnectionsTab({ scope, canManageOrg = false }) {
     const data = serversQuery.data;
     const hasOrg = Boolean(data?.orgId);
     const canCreateOrgMcp = hasOrg && canManageOrg;
-    const activeScope = scope === "org" ? "org" : "user";
     const onCreateMcpServer = useCallback(async (args) => {
         if (args.scope === "org" && !canCreateOrgMcp) {
             throw new Error("Only organization admins can add organization MCP servers.");
@@ -132,12 +141,17 @@ function ConnectionsTab({ scope, canManageOrg = false }) {
         const key = `${server.scope}:${server.id}`;
         const canDelete = server.scope === "user" || canManageOrg;
         const selected = selectedServer?.id === server.id && selectedServer.scope === server.scope;
-        return (_jsxs("div", { className: cn("rounded-lg border border-border bg-card p-3 transition-colors", selected && "border-foreground/30 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: [_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(ScopeBadge, { scope: server.scope }), server.scope === activeScope && (_jsx("span", { className: "text-[10px] text-muted-foreground", children: "Selected scope" }))] }), _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 (_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 (_jsxs("div", { className: "space-y-8", children: [_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-base font-semibold text-foreground", children: "MCP servers" }), _jsx("p", { className: "mt-1 max-w-2xl text-sm leading-relaxed text-muted-foreground", children: "Tools and services this agent can reach. The page scope controls where new servers are saved." })] }), _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") })] }), 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." })) : data && data.user.length + data.org.length > 0 ? (_jsxs("div", { className: "space-y-2", children: [data.user.map(renderServer), data.org.map(renderServer)] })) : (_jsx("div", { className: "rounded-lg border border-dashed border-border p-5 text-sm text-muted-foreground", children: "No MCP servers are connected yet." })), _jsx(McpIntegrationDialog, { open: dialogOpen, onOpenChange: setDialogOpen, defaultScope: activeScope, canCreateOrgMcp: canCreateOrgMcp, hasOrg: hasOrg, onCreateMcpServer: onCreateMcpServer })] }), _jsxs("section", { className: "space-y-3 border-t border-border/70 pt-6", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-base font-semibold text-foreground", children: "Remote agents" }), _jsx("p", { className: "mt-1 max-w-2xl text-sm leading-relaxed text-muted-foreground", children: "Other agents this app can call through A2A." })] }), _jsx("div", { className: "rounded-lg border border-border bg-card p-4", children: _jsx(AgentsSection, {}) })] })] }));
+    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: () => {
+                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: [
+                        { 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"
+                                    ? "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 })] }) }));
 }
 function CopyField({ label, value }) {
     const [copied, setCopied] = useState(false);
@@ -210,43 +224,93 @@ function AccessTab({ appName: appNameProp, }) {
         : null;
     const guide = MCP_CONNECT_GUIDES.find((item) => item.id === activeGuide) ??
         MCP_CONNECT_GUIDES[0];
-    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-base font-semibold text-foreground", children: "Access" }), _jsx("p", { className: "mt-1 max-w-2xl text-sm leading-relaxed text-muted-foreground", children: "Choose which external clients can talk to this app's agent and follow the setup for each one. Grants, scopes, and revocation will live here in a future pass." })] }), urls ? (_jsxs(_Fragment, { children: [_jsx(CopyField, { label: "MCP URL", value: urls.mcpUrl }), agentCardAvailable && (_jsx(CopyField, { label: "A2A agent card", value: urls.agentCardUrl })), _jsxs("section", { className: "space-y-3 rounded-lg border border-border bg-card p-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Client setup" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "These instructions are also available on the full connect page." })] }), _jsx("div", { className: "flex gap-1 overflow-x-auto border-b border-border pb-2", role: "tablist", "aria-label": "Choose your AI assistant", children: MCP_CONNECT_GUIDES.map((item) => (_jsx("button", { type: "button", role: "tab", "aria-selected": item.id === guide?.id, onClick: () => setActiveGuide(item.id), className: cn("shrink-0 cursor-pointer rounded-md px-2.5 py-1.5 text-xs font-medium", item.id === guide?.id
+    return (_jsx(AgentTabFrame, { title: "Access", description: "Choose which external clients can talk to this app's agent.", children: _jsx("div", { className: "space-y-6", children: urls ? (_jsxs(_Fragment, { children: [_jsx(CopyField, { label: "MCP URL", value: urls.mcpUrl }), agentCardAvailable && (_jsx(CopyField, { label: "A2A agent card", value: urls.agentCardUrl })), _jsxs("section", { className: "space-y-3 border-t border-border/70 pt-6", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Client setup" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "These instructions are also available on the full connect page." })] }), _jsx("div", { className: "flex gap-1 overflow-x-auto border-b border-border pb-2", role: "tablist", "aria-label": "Choose your AI assistant", children: MCP_CONNECT_GUIDES.map((item) => (_jsx("button", { type: "button", role: "tab", "aria-selected": item.id === guide?.id, onClick: () => setActiveGuide(item.id), className: cn("shrink-0 cursor-pointer rounded-md px-2.5 py-1.5 text-xs font-medium", item.id === guide?.id
                                         ? "bg-accent text-foreground"
-                                        : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), children: item.label }, item.id))) }), guide && templateValues && (_jsxs("div", { className: "space-y-3 pt-1", role: "tabpanel", children: [guide.steps?.length ? (_jsx("ol", { className: "list-decimal space-y-2 ps-5 text-xs leading-relaxed text-muted-foreground", children: guide.steps.map((step) => (_jsx("li", { children: interpolateMcpConnectTemplate(step, templateValues) }, step))) })) : null, guide.intro && (_jsx("p", { className: "text-xs text-muted-foreground", children: interpolateMcpConnectTemplate(guide.intro, templateValues) })), guide.commandTemplate && (_jsx(CopyField, { label: "Command", value: interpolateMcpConnectTemplate(guide.commandTemplate, templateValues) })), guide.configTemplate && (_jsx(CopyField, { label: "MCP config", value: interpolateMcpConnectTemplate(guide.configTemplate, templateValues) })), guide.action?.kind === "link" && guide.action.href && (_jsxs("a", { href: guide.action.href, target: "_blank", rel: "noopener noreferrer", className: "inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent", children: [guide.action.label, _jsx(IconExternalLink, { className: "size-3.5" })] })), guide.note && (_jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: interpolateMcpConnectTemplate(guide.note, templateValues) }))] }))] }), _jsxs("section", { className: "rounded-lg border border-border/70 bg-muted/10 p-4", children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: MCP_STATIC_TOKEN_FALLBACK.title }), _jsxs("p", { className: "mt-1 text-xs leading-relaxed text-muted-foreground", children: [MCP_STATIC_TOKEN_FALLBACK.state, ". Open the connect page to create a token for clients that cannot complete OAuth."] }), _jsxs("a", { href: urls.connectUrl, className: "mt-3 inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent", children: ["Open full connect page", _jsx(IconExternalLink, { className: "size-3.5" })] })] })] })) : (_jsx(TabLoading, {}))] }));
+                                        : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), children: item.label }, item.id))) }), guide && templateValues && (_jsxs("div", { className: "space-y-3 pt-1", role: "tabpanel", children: [guide.steps?.length ? (_jsx("ol", { className: "list-decimal space-y-2 ps-5 text-xs leading-relaxed text-muted-foreground", children: guide.steps.map((step) => (_jsx("li", { children: interpolateMcpConnectTemplate(step, templateValues) }, step))) })) : null, guide.intro && (_jsx("p", { className: "text-xs text-muted-foreground", children: interpolateMcpConnectTemplate(guide.intro, templateValues) })), guide.commandTemplate && (_jsx(CopyField, { label: "Command", value: interpolateMcpConnectTemplate(guide.commandTemplate, templateValues) })), guide.configTemplate && (_jsx(CopyField, { label: "MCP config", value: interpolateMcpConnectTemplate(guide.configTemplate, templateValues) })), guide.action?.kind === "link" && guide.action.href && (_jsxs("a", { href: guide.action.href, target: "_blank", rel: "noopener noreferrer", className: "inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent", children: [guide.action.label, _jsx(IconExternalLink, { className: "size-3.5" })] })), guide.note && (_jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: interpolateMcpConnectTemplate(guide.note, templateValues) }))] }))] }), _jsxs("section", { className: "border-t border-border/70 pt-6", children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: MCP_STATIC_TOKEN_FALLBACK.title }), _jsxs("p", { className: "mt-1 text-xs leading-relaxed text-muted-foreground", children: [MCP_STATIC_TOKEN_FALLBACK.state, ". Open the connect page to create a token for clients that cannot complete OAuth."] }), _jsxs("a", { href: urls.connectUrl, className: "mt-3 inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent", children: ["Open full connect page", _jsx(IconExternalLink, { className: "size-3.5" })] })] })] })) : (_jsx(TabLoading, {})) }) }));
 }
-export function AgentTabsPage({ appName, extraTabs = [], defaultTab = "context", className, enableSearch = true, searchPlaceholder = "Search agent settings", hiddenTabs = [], value, onValueChange, }) {
-    const { data: org, isLoading: orgLoading } = useOrg();
-    const hasOrg = Boolean(org?.orgId);
+export function AgentTabsPage({ appName, extraTabs = [], extraTabFactories = [], defaultTab = "files", className, enableSearch = true, searchPlaceholder = "Search agent workspace", hiddenTabs = [], value, onValueChange, }) {
+    const { data: org } = useOrg();
     const canManageOrg = !org?.orgId || org.role === "owner" || org.role === "admin";
-    const [scope, setScope] = useState(initialScope);
-    const scopeInitialized = useRef(false);
+    const scope = "user";
     const rootRef = useRef(null);
     const searchRef = useRef(null);
     const [query, setQuery] = useState("");
     const normalizedHiddenTabs = useMemo(() => new Set(hiddenTabs.map((tab) => normalizeTabId(tab)).filter(Boolean)), [hiddenTabs]);
+    const scopeControl = null;
+    const scopedExtraTabs = useMemo(() => extraTabFactories.map((factory) => factory({ scope, canManageOrg, scopeControl })), [canManageOrg, extraTabFactories, scope, scopeControl]);
     const tabs = useMemo(() => [
-        {
-            id: "context",
-            label: "Context",
-            icon: IconBrain,
-            keywords: "influence provenance prompt",
-            content: (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-lg font-semibold text-foreground", children: "Context" }), _jsx("p", { className: "mt-1 text-sm leading-relaxed text-muted-foreground", children: "See what can influence this agent and why." })] }), _jsx("div", { className: "min-h-[220px] rounded-lg border border-dashed border-border/70 bg-muted/10 p-4", children: _jsx(Suspense, { fallback: _jsx(TabLoading, {}), children: _jsx(AgentContextTab, { scope: scope, canManageOrg: canManageOrg }) }) })] })),
-        },
         {
             id: "files",
             label: "Files",
             icon: IconFolder,
-            keywords: "workspace resources instructions skills",
-            content: (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-lg font-semibold text-foreground", children: "Files" }), _jsx("p", { className: "mt-1 text-sm leading-relaxed text-muted-foreground", children: "Workspace files that shape the agent's context." })] }), _jsx(Suspense, { fallback: _jsx(TabLoading, {}), children: _jsx(FilesTab, { scope: scope, canManageOrg: canManageOrg }) })] })),
+            group: "resources",
+            keywords: "workspace plain files documents uploads",
+            content: (_jsx(Suspense, { fallback: _jsx(TabLoading, {}), children: _jsx(AgentResourceTab, { scope: scope, view: "files" }) })),
+        },
+        {
+            id: "instructions",
+            label: "Instructions",
+            icon: IconChecklist,
+            group: "resources",
+            keywords: "agents md rules preferences guidance",
+            content: (_jsx(Suspense, { fallback: _jsx(TabLoading, {}), children: _jsx(AgentResourceTab, { scope: scope, view: "instructions" }) })),
+        },
+        {
+            id: "agents",
+            label: "Agents",
+            icon: IconHierarchy2,
+            group: "resources",
+            keywords: "custom sub agents delegate profiles",
+            content: (_jsx(Suspense, { fallback: _jsx(TabLoading, {}), children: _jsx(AgentResourceTab, { scope: scope, view: "agents" }) })),
+        },
+        {
+            id: "memory",
+            label: "Memory",
+            icon: IconNotes,
+            group: "resources",
+            keywords: "long term notes memory index recall",
+            content: (_jsx(Suspense, { fallback: _jsx(TabLoading, {}), children: _jsx(AgentResourceTab, { scope: scope, view: "memory" }) })),
+        },
+        {
+            id: "skills",
+            label: "Skills",
+            icon: IconBook2,
+            group: "resources",
+            keywords: "abilities reusable instructions workflows",
+            content: (_jsx(Suspense, { fallback: _jsx(TabLoading, {}), children: _jsx(AgentResourceTab, { scope: scope, view: "skills" }) })),
+        },
+        {
+            id: "learnings",
+            label: "Learnings",
+            icon: IconHistory,
+            group: "resources",
+            keywords: "corrections patterns knowledge feedback",
+            content: (_jsx(Suspense, { fallback: _jsx(TabLoading, {}), children: _jsx(AgentResourceTab, { scope: scope, view: "learnings" }) })),
+        },
+        {
+            id: "remote-agents",
+            label: "Remote agents",
+            icon: IconTopologyRing2,
+            group: "resources",
+            keywords: "a2a connected remote agents delegation",
+            content: (_jsx(Suspense, { fallback: _jsx(TabLoading, {}), children: _jsx(AgentResourceTab, { scope: scope, view: "remote-agents" }) })),
+        },
+        {
+            id: "snapshots",
+            label: "Snapshots",
+            icon: IconHistory,
+            group: "agent",
+            keywords: "context recent loads provenance tokens",
+            content: (_jsx(Suspense, { fallback: _jsx(TabLoading, {}), children: _jsx(AgentContextTab, { scope: scope, canManageOrg: canManageOrg }) })),
         },
         {
             id: "connections",
             label: "Connections",
             icon: IconPlugConnected,
-            keywords: "mcp servers tools remote agents a2a",
+            group: "agent",
+            keywords: "mcp servers tools integrations",
             searchEntries: [
                 { id: "mcp-servers", label: "MCP servers", keywords: "tools" },
-                { id: "remote-agents", label: "Remote agents", keywords: "a2a" },
             ],
             content: _jsx(ConnectionsTab, { scope: scope, canManageOrg: canManageOrg }),
         },
@@ -254,13 +318,15 @@ export function AgentTabsPage({ appName, extraTabs = [], defaultTab = "context",
             id: "jobs",
             label: "Jobs",
             icon: IconClock,
+            group: "agent",
             keywords: "scheduled automations recurring",
-            content: (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-lg font-semibold text-foreground", children: "Jobs" }), _jsx("p", { className: "mt-1 text-sm leading-relaxed text-muted-foreground", children: "Scheduled work that can run with this agent." })] }), _jsx("div", { className: "min-h-[220px] rounded-lg border border-dashed border-border/70 bg-muted/10 p-4", children: _jsx(Suspense, { fallback: _jsx(TabLoading, {}), children: _jsx(AgentJobsTab, { scope: scope, canManageOrg: canManageOrg }) }) })] })),
+            content: (_jsx(Suspense, { fallback: _jsx(TabLoading, {}), children: _jsx(AgentJobsTab, { scope: scope, canManageOrg: canManageOrg }) })),
         },
         {
             id: "access",
             label: "Access",
             icon: IconShieldLock,
+            group: "agent",
             keywords: "external clients oauth a2a exposure",
             searchEntries: [
                 {
@@ -277,7 +343,8 @@ export function AgentTabsPage({ appName, extraTabs = [], defaultTab = "context",
             content: (_jsx(AccessTab, { scope: scope, canManageOrg: canManageOrg, appName: appName })),
         },
         ...extraTabs,
-    ], [canManageOrg, extraTabs, scope]);
+        ...scopedExtraTabs,
+    ], [appName, canManageOrg, extraTabs, scope, scopedExtraTabs]);
     const visibleTabs = useMemo(() => tabs.filter((tab) => !normalizedHiddenTabs.has(tab.id)), [normalizedHiddenTabs, tabs]);
     const fallbackTab = visibleTabs.some((tab) => tab.id === defaultTab)
         ? defaultTab
@@ -302,23 +369,6 @@ export function AgentTabsPage({ appName, extraTabs = [], defaultTab = "context",
         }
         return groups;
     }, [visibleTabs]);
-    useEffect(() => {
-        if (scopeInitialized.current || orgLoading)
-            return;
-        scopeInitialized.current = true;
-        if (!hasOrg && scope === "org")
-            setScope("user");
-    }, [hasOrg, orgLoading, scope]);
-    useEffect(() => {
-        if (orgLoading)
-            return;
-        const resolvedScope = hasOrg ? scope : "user";
-        if (resolvedScope !== scope) {
-            setScope(resolvedScope);
-            return;
-        }
-        updateScopeUrl(resolvedScope);
-    }, [hasOrg, orgLoading, scope]);
     useEffect(() => {
         if (!isControlled && !visibleTabs.some((tab) => tab.id === internalTab)) {
             setInternalTab(fallbackTab);
@@ -340,16 +390,6 @@ export function AgentTabsPage({ appName, extraTabs = [], defaultTab = "context",
             setInternalTab(tabId);
         onValueChange?.(tabId);
     }, [isControlled, onValueChange]);
-    const changeScope = (next) => {
-        if (next === "org" && !hasOrg)
-            return;
-        setScope(next);
-        try {
-            localStorage.setItem("agent-page-scope", next);
-        }
-        catch { }
-        updateScopeUrl(next);
-    };
     const searchIndex = useMemo(() => {
         const entries = [];
         for (const tab of visibleTabs) {
@@ -391,22 +431,18 @@ export function AgentTabsPage({ appName, extraTabs = [], defaultTab = "context",
             updateTabHash(entry.tabId);
         }
     }, [changeTab, isControlled]);
-    return (_jsxs("div", { ref: rootRef, className: cn("flex h-full min-h-0 w-full flex-col overflow-hidden bg-background", className), children: [_jsxs("header", { className: "flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-border px-4 py-3 sm:px-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-base font-semibold text-foreground", children: "Agent" }), _jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: "What can influence this agent, and why." })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: "Scope" }), _jsxs("div", { className: "flex rounded-md border border-border bg-muted/30 p-0.5", role: "radiogroup", "aria-label": "Agent scope", children: [_jsx("button", { type: "button", role: "radio", "aria-checked": scope !== "org" || !hasOrg, onClick: () => changeScope("user"), className: cn("cursor-pointer rounded px-2.5 py-1.5 text-xs font-medium", scope !== "org" || !hasOrg
-                                            ? "bg-background text-foreground shadow-sm"
-                                            : "text-muted-foreground hover:text-foreground"), children: "Personal" }), hasOrg && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", role: "radio", "aria-checked": scope === "org", onClick: () => changeScope("org"), className: cn("cursor-pointer rounded px-2.5 py-1.5 text-xs font-medium", scope === "org"
-                                                        ? "bg-background text-foreground shadow-sm"
-                                                        : "text-muted-foreground hover:text-foreground"), children: "Organization" }) }), !canManageOrg && (_jsx(TooltipContent, { children: "Organization settings are read-only for members." }))] }))] })] })] }), _jsxs("div", { className: "flex min-h-0 flex-1 flex-col sm:flex-row", children: [_jsxs("div", { className: "flex shrink-0 flex-col gap-2 bg-background p-2 sm:min-h-0 sm:w-56 sm:overflow-y-auto sm:p-3", children: [enableSearch ? (_jsxs("div", { className: "relative sm:mb-1", children: [_jsx(IconSearch, { className: "pointer-events-none absolute start-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx("input", { ref: searchRef, type: "search", value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: (event) => {
-                                            if (event.key === "Escape")
-                                                setQuery("");
-                                            if (event.key === "Enter" && results[0]) {
-                                                event.preventDefault();
-                                                selectSearchResult(results[0]);
-                                            }
-                                        }, placeholder: searchPlaceholder, "aria-label": searchPlaceholder, className: "h-8 w-full rounded-md border border-border bg-background ps-8 pe-7 text-[13px] text-foreground outline-none transition-colors placeholder:text-muted-foreground focus:border-foreground/30 focus:ring-2 focus:ring-accent/40" }), query && (_jsx("button", { type: "button", onClick: () => setQuery(""), "aria-label": "Clear search", className: "absolute end-1.5 top-1/2 flex size-5 -translate-y-1/2 cursor-pointer items-center justify-center rounded text-muted-foreground hover:bg-accent/60 hover:text-foreground", children: _jsx(IconX, { className: "size-3.5" }) }))] })) : null, query.trim() ? (_jsx("div", { role: "listbox", "aria-label": "Agent search results", className: "flex flex-col gap-0.5", children: results.length === 0 ? (_jsx("p", { className: "px-2 py-6 text-center text-xs text-muted-foreground", children: "No matching agent settings" })) : (results.map((entry) => (_jsx("button", { type: "button", role: "option", onClick: () => selectSearchResult(entry), className: "flex cursor-pointer items-start gap-2 rounded-md px-2.5 py-2 text-start text-sm text-foreground hover:bg-accent/60", children: _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate font-medium", children: entry.label }), _jsx("span", { className: "truncate text-[11px] text-muted-foreground", children: entry.description ?? entry.tabId })] }) }, entry.id)))) })) : (_jsx("nav", { "aria-label": "Agent sections", role: "tablist", className: "flex gap-1 overflow-x-auto sm:flex-col sm:overflow-x-visible", children: tabGroups.map((group, groupIndex) => (_jsx("div", { className: cn("contents sm:block", groupIndex > 0 &&
-                                        "sm:mt-2 sm:border-t sm:border-border/60 sm:pt-2"), children: _jsx("div", { className: "contents sm:flex sm:flex-col sm:gap-1", children: group.tabs.map((tab) => {
+    return (_jsx("div", { ref: rootRef, className: cn("flex h-full min-h-0 w-full flex-col overflow-hidden bg-background", className), children: _jsxs("div", { className: "flex min-h-0 flex-1 flex-col sm:flex-row", children: [_jsxs("div", { className: "flex shrink-0 flex-col gap-2 bg-background p-2 sm:min-h-0 sm:w-56 sm:overflow-y-auto sm:p-3", children: [enableSearch ? (_jsxs("div", { className: "relative sm:mb-1", children: [_jsx(IconSearch, { className: "pointer-events-none absolute start-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx("input", { ref: searchRef, type: "search", value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: (event) => {
+                                        if (event.key === "Escape")
+                                            setQuery("");
+                                        if (event.key === "Enter" && results[0]) {
+                                            event.preventDefault();
+                                            selectSearchResult(results[0]);
+                                        }
+                                    }, placeholder: searchPlaceholder, "aria-label": searchPlaceholder, className: "h-8 w-full rounded-md border border-border bg-background ps-8 pe-7 text-[13px] text-foreground outline-none transition-colors placeholder:text-muted-foreground focus:border-foreground/30 focus:ring-2 focus:ring-accent/40" }), query && (_jsx("button", { type: "button", onClick: () => setQuery(""), "aria-label": "Clear search", className: "absolute end-1.5 top-1/2 flex size-5 -translate-y-1/2 cursor-pointer items-center justify-center rounded text-muted-foreground hover:bg-accent/60 hover:text-foreground", children: _jsx(IconX, { className: "size-3.5" }) }))] })) : null, query.trim() ? (_jsx("div", { role: "listbox", "aria-label": "Agent search results", className: "flex flex-col gap-0.5", children: results.length === 0 ? (_jsx("p", { className: "px-2 py-6 text-center text-xs text-muted-foreground", children: "No matching agent workspace items" })) : (results.map((entry) => (_jsx("button", { type: "button", role: "option", onClick: () => selectSearchResult(entry), className: "flex cursor-pointer items-start gap-2 rounded-md px-2.5 py-2 text-start text-sm text-foreground hover:bg-accent/60", children: _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate font-medium", children: entry.label }), _jsx("span", { className: "truncate text-[11px] text-muted-foreground", children: entry.description ?? entry.tabId })] }) }, entry.id)))) })) : (_jsx("nav", { "aria-label": "Agent sections", role: "tablist", className: "flex gap-1 overflow-x-auto sm:flex-col sm:overflow-x-visible", children: tabGroups.map((group, groupIndex) => (_jsxs("div", { className: cn("contents sm:block", groupIndex > 0 &&
+                                    "sm:mt-2 sm:border-t sm:border-border/60 sm:pt-2"), children: [group.id === "resources" && (_jsx("div", { className: "hidden px-2.5 pb-1 pt-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground/50 sm:block", children: "Agent resources" })), group.id === "agent" && (_jsx("div", { className: "hidden px-2.5 pb-1 pt-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground/50 sm:block", children: "Agent operations" })), _jsx("div", { className: "contents sm:flex sm:flex-col sm:gap-1", children: group.tabs.map((tab) => {
                                             const Icon = tab.icon;
                                             const selected = tab.id === selectedTab?.id;
-                                            return (_jsxs("button", { type: "button", role: "tab", "aria-selected": selected, "aria-controls": `agent-tabpanel-${tab.id}`, onClick: () => {
+                                            return (_jsxs("button", { type: "button", id: `agent-tab-${tab.id}`, role: "tab", "aria-selected": selected, "aria-controls": `agent-tabpanel-${tab.id}`, onClick: () => {
                                                     changeTab(tab.id);
                                                     if (!isControlled)
                                                         updateTabHash(tab.id);
@@ -415,6 +451,6 @@ export function AgentTabsPage({ appName, extraTabs = [], defaultTab = "context",
                                                     : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), children: [Icon ? (_jsx(Icon, { className: cn("size-4 shrink-0", selected
                                                             ? "text-foreground"
                                                             : "text-muted-foreground") })) : null, _jsx("span", { className: "truncate", children: tab.label })] }, tab.id));
-                                        }) }) }, group.id))) }))] }), _jsx("div", { id: `agent-tabpanel-${selectedTab?.id ?? "context"}`, role: "tabpanel", "aria-labelledby": `agent-tab-${selectedTab?.id ?? "context"}`, className: "min-h-0 min-w-0 flex-1 overflow-y-auto p-4 sm:p-6", children: selectedTab?.content ?? _jsx(EmptySlot, { label: "Agent section" }) })] })] }));
+                                        }) })] }, group.id))) }))] }), _jsx("div", { id: `agent-tabpanel-${selectedTab?.id ?? "context"}`, role: "tabpanel", "aria-labelledby": `agent-tab-${selectedTab?.id ?? "context"}`, className: "min-h-0 min-w-0 flex-1 overflow-y-auto p-4 sm:p-6", children: selectedTab?.content ?? _jsx(EmptySlot, { label: "Agent section" }) })] }) }));
 }
 //# sourceMappingURL=AgentTabsPage.js.map