@agent-native/core 0.145.5 → 0.145.6

package/dist/client/chat/tool-call-display.js

@@ -8,6 +8,7 @@ import { ConnectBuilderCard } from "../ConnectBuilderCard.js";
 import { useT } from "../i18n.js";
 import { McpAppRenderer } from "../mcp-apps/McpAppRenderer.js";
 import { findMcpIntegrationForToolName } from "../resources/mcp-integration-catalog.js";
+import { McpIntegrationLogo } from "../resources/McpIntegrationLogo.js";
 import { BashCell, EditCell, WriteCell, FilesChangedSummary, } from "../tool-cells/index.js";
 import { humanizeToolName, isCallAgentToolCallShadowed, } from "../tool-display.js";
 import { cn } from "../utils.js";
@@ -19,6 +20,198 @@ import { isBuiltinDataWidgetActionRenderer, resolveBuiltinActionChatRenderer, re
 export const ChatRunningContext = React.createContext(false);
 export const ChatRunDurationContext = React.createContext(null);
 export const ASSISTANT_VISIBLE_TOOL_CALL_LIMIT = 3;
+const TOOL_CALL_ENTRY_DURATION_MS = 220;
+const TOOL_CALL_STACK_MOTION_DURATION_MS = 220;
+const TOOL_CALL_STACK_EASING = "cubic-bezier(0.23, 1, 0.32, 1)";
+function toolStackMotionKey(element, index) {
+    const toolCallId = element.dataset.agentToolCallId;
+    if (toolCallId)
+        return `tool:${toolCallId}`;
+    const summaryId = element.dataset.agentToolSummary;
+    if (summaryId)
+        return `summary:${summaryId}`;
+    return `anonymous:${index}`;
+}
+function prefersReducedMotionForToolStack() {
+    return (typeof window !== "undefined" &&
+        typeof window.matchMedia === "function" &&
+        window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+}
+function startToolStackAnimation(element, keyframes) {
+    if (typeof element.animate !== "function")
+        return null;
+    return element.animate(keyframes, {
+        duration: TOOL_CALL_STACK_MOTION_DURATION_MS,
+        easing: TOOL_CALL_STACK_EASING,
+        fill: "both",
+    });
+}
+function prepareToolStackExitClone(clone, snapshot) {
+    clone.classList.remove("agent-tool-call--entering", "agent-tool-call--stack-entering");
+    clone
+        .querySelectorAll(".agent-tool-call--entering, .agent-tool-call--stack-entering")
+        .forEach((element) => {
+        element.classList.remove("agent-tool-call--entering", "agent-tool-call--stack-entering");
+    });
+    clone.classList.add("agent-tool-call-stack__exit");
+    clone.setAttribute("aria-hidden", "true");
+    clone.removeAttribute("data-agent-tool-call-id");
+    clone.removeAttribute("data-agent-tool-summary");
+    clone.removeAttribute("data-agent-tool-motion-token");
+    clone.style.left = `${snapshot.left}px`;
+    clone.style.top = `${snapshot.top}px`;
+    clone.style.width = `${snapshot.width}px`;
+    clone.style.height = `${snapshot.height}px`;
+    clone.style.transform = "translate3d(0, 0, 0)";
+    clone.style.transition = "none";
+    clone.style.animation = "none";
+    clone.style.opacity = "1";
+}
+/**
+ * Keeps the visible tool stack spatially continuous as streaming calls change
+ * which rows belong to the collapsed history bucket. The rendered data stays
+ * untouched; this only animates the DOM's before/after positions.
+ */
+export function ToolCallStackMotion({ children, className, }) {
+    const stackRef = useRef(null);
+    const previousRef = useRef(new Map());
+    const activeMotionsRef = useRef(new Map());
+    const exitAnimationsRef = useRef(new Map());
+    useLayoutEffect(() => {
+        const stack = stackRef.current;
+        if (!stack)
+            return;
+        const previous = previousRef.current;
+        const visualPrevious = new Map(previous);
+        for (const [key, activeMotion] of activeMotionsRef.current) {
+            if (stack.contains(activeMotion.element)) {
+                const previousSnapshot = previous.get(key);
+                if (previousSnapshot) {
+                    const rect = activeMotion.element.getBoundingClientRect();
+                    visualPrevious.set(key, {
+                        ...previousSnapshot,
+                        top: rect.top,
+                        left: rect.left,
+                    });
+                }
+            }
+            activeMotion.animation.cancel();
+        }
+        activeMotionsRef.current.clear();
+        for (const [ghost, animation] of exitAnimationsRef.current) {
+            animation.cancel();
+            ghost.remove();
+        }
+        exitAnimationsRef.current.clear();
+        const elements = Array.from(stack.querySelectorAll("[data-agent-tool-call-id], [data-agent-tool-summary]"));
+        const current = new Map();
+        for (const [index, element] of elements.entries()) {
+            const rect = element.getBoundingClientRect();
+            current.set(toolStackMotionKey(element, index), {
+                top: rect.top,
+                left: rect.left,
+                width: rect.width,
+                height: rect.height,
+                clone: element.cloneNode(true),
+            });
+        }
+        previousRef.current = current;
+        if (previous.size === 0 || prefersReducedMotionForToolStack())
+            return;
+        const summary = elements.find((element) => element.dataset.agentToolSummary !== undefined);
+        const summaryRect = summary?.getBoundingClientRect();
+        const elementsByKey = new Map(elements.map((element, index) => [
+            toolStackMotionKey(element, index),
+            element,
+        ]));
+        for (const [key, after] of current.entries()) {
+            const before = visualPrevious.get(key);
+            if (!before) {
+                const node = elementsByKey.get(key);
+                if (!node)
+                    continue;
+                if (node.dataset.agentToolSummary !== undefined)
+                    continue;
+                if (node.dataset.agentToolCallId !== undefined &&
+                    !node.classList.contains("agent-tool-call--entering")) {
+                    node.classList.add("agent-tool-call--stack-entering");
+                    window.setTimeout(() => {
+                        node.classList.remove("agent-tool-call--stack-entering");
+                    }, TOOL_CALL_ENTRY_DURATION_MS);
+                }
+                continue;
+            }
+            const dx = before.left - after.left;
+            const dy = before.top - after.top;
+            if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5)
+                continue;
+            const node = elementsByKey.get(key);
+            if (!node)
+                continue;
+            if (node.dataset.agentToolSummary !== undefined)
+                continue;
+            const animation = startToolStackAnimation(node, [
+                { transform: `translate3d(${dx}px, ${dy}px, 0)` },
+                { transform: "translate3d(0, 0, 0)" },
+            ]);
+            if (!animation)
+                continue;
+            activeMotionsRef.current.set(key, { element: node, animation });
+            const clearMotion = () => {
+                if (activeMotionsRef.current.get(key)?.animation === animation) {
+                    activeMotionsRef.current.delete(key);
+                }
+            };
+            animation.onfinish = clearMotion;
+            animation.oncancel = clearMotion;
+        }
+        for (const [key, before] of visualPrevious.entries()) {
+            if (current.has(key) || !key.startsWith("tool:"))
+                continue;
+            const ghost = before.clone;
+            prepareToolStackExitClone(ghost, before);
+            document.body?.appendChild(ghost);
+            if (!ghost.isConnected)
+                continue;
+            const targetTop = summaryRect?.top ?? before.top - 8;
+            const targetLeft = summaryRect?.left ?? before.left;
+            const animation = startToolStackAnimation(ghost, [
+                { transform: "translate3d(0, 0, 0)", opacity: 1 },
+                {
+                    transform: `translate3d(${targetLeft - before.left}px, ${targetTop - before.top}px, 0)`,
+                    opacity: 0,
+                },
+            ]);
+            if (!animation) {
+                ghost.remove();
+                continue;
+            }
+            exitAnimationsRef.current.set(ghost, animation);
+            const clearExit = () => {
+                if (exitAnimationsRef.current.get(ghost) === animation) {
+                    exitAnimationsRef.current.delete(ghost);
+                }
+                ghost.remove();
+            };
+            animation.onfinish = clearExit;
+            animation.oncancel = clearExit;
+        }
+    });
+    useEffect(() => {
+        return () => {
+            for (const { animation } of activeMotionsRef.current.values()) {
+                animation.cancel();
+            }
+            activeMotionsRef.current.clear();
+            for (const [ghost, animation] of exitAnimationsRef.current) {
+                animation.cancel();
+                ghost.remove();
+            }
+            exitAnimationsRef.current.clear();
+        };
+    }, []);
+    return (_jsx("div", { ref: stackRef, className: cn("agent-tool-call-stack", className), children: children }));
+}
 export const ApprovalContext = React.createContext(null);
 /** Pending human-in-the-loop gate still waiting for Approve/Deny. */
 export function toolCallHasPendingApproval(part) {
@@ -28,12 +221,25 @@ export function toolCallHasPendingApproval(part) {
         approval.dismissed !== true);
 }
 export const TOOL_LONG_RUNNING_HINT_DELAY_MS = 45_000;
-export function ToolActivityPresentation({ toolName, isRunning, isActiveTail, suppressLongRunningHint = false, children, }) {
+export function ToolActivityPresentation({ toolName, isRunning, isActiveTail, toolCallId, suppressLongRunningHint = false, children, }) {
     const [showLongRunningHint, setShowLongRunningHint] = useState(false);
     // A batched update can first reveal a tool with its result already attached.
     // Presentation follows the active chat tail rather than execution state so
     // that newly revealed completed tools still get their entrance motion.
-    const [animateEntry] = useState(isActiveTail);
+    const [animateEntry, setAnimateEntry] = useState(isActiveTail);
+    const previousActiveTailRef = useRef(isActiveTail);
+    useEffect(() => {
+        if (isActiveTail && !previousActiveTailRef.current) {
+            setAnimateEntry(true);
+        }
+        previousActiveTailRef.current = isActiveTail;
+    }, [isActiveTail]);
+    useEffect(() => {
+        if (!animateEntry)
+            return;
+        const timeout = window.setTimeout(() => setAnimateEntry(false), TOOL_CALL_ENTRY_DURATION_MS);
+        return () => window.clearTimeout(timeout);
+    }, [animateEntry]);
     useEffect(() => {
         if (!isRunning || suppressLongRunningHint) {
             setShowLongRunningHint(false);
@@ -45,7 +251,7 @@ export function ToolActivityPresentation({ toolName, isRunning, isActiveTail, su
         }, TOOL_LONG_RUNNING_HINT_DELAY_MS);
         return () => window.clearTimeout(timeout);
     }, [isRunning, suppressLongRunningHint, toolName]);
-    return (_jsxs("div", { className: cn("agent-tool-call", animateEntry && "agent-tool-call--entering"), "data-running": isRunning ? "true" : undefined, children: [children, isRunning && showLongRunningHint && (_jsx("div", { className: "mt-0.5 px-2.5 pb-2 text-[11px] leading-snug text-muted-foreground/80", children: "Still working. Large updates can take a minute or two." }))] }));
+    return (_jsx("div", { className: cn("agent-tool-call", animateEntry && "agent-tool-call--entering"), "data-agent-tool-call-id": toolCallId, "data-running": isRunning ? "true" : undefined, children: _jsxs("div", { className: "agent-tool-call__content", children: [children, isRunning && showLongRunningHint && (_jsx("div", { className: "mt-0.5 px-2.5 pb-2 text-[11px] leading-snug text-muted-foreground/80", children: "Still working. Large updates can take a minute or two." }))] }) }));
 }
 function stringifyToolValue(value, pretty = false) {
     if (typeof value === "string")
@@ -139,18 +345,19 @@ export function toolResultPayload(result) {
     };
 }
 const brandIcons = new Map();
-function brandToolIcon(logoUrl, name) {
-    const cached = brandIcons.get(logoUrl);
+function brandToolIcon(logoUrl, name, integrationId) {
+    const cacheKey = integrationId ? `${integrationId}:${logoUrl}` : logoUrl;
+    const cached = brandIcons.get(cacheKey);
     if (cached)
         return cached;
-    const Icon = ({ className, size }) => (_jsx("img", { src: logoUrl, alt: "", "aria-hidden": true, width: size, height: size, title: name, className: cn("rounded-[3px] object-contain", className) }));
-    brandIcons.set(logoUrl, Icon);
+    const Icon = ({ className, size }) => (_jsx(McpIntegrationLogo, { name: name, logoUrl: logoUrl, integrationId: integrationId, className: cn("size-4 rounded-[3px] border-0", className), imageClassName: "size-full", style: size === undefined ? undefined : { width: size, height: size }, title: name }));
+    brandIcons.set(cacheKey, Icon);
     return Icon;
 }
 function resolveToolIcon(toolName) {
     const integration = findMcpIntegrationForToolName(toolName);
     if (integration) {
-        return brandToolIcon(integration.logoUrl, integration.name);
+        return brandToolIcon(integration.logoUrl, integration.name, integration.id);
     }
     const name = toolName.toLowerCase();
     if (name.includes("slack"))
@@ -258,13 +465,13 @@ function ApprovalAffordance({ toolName, approval, }) {
                 }, className: cn("inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs font-medium transition-colors", "text-foreground hover:bg-muted"), children: [_jsx(IconX, { className: "h-3.5 w-3.5" }), "Deny"] })] }));
 }
 // ─── ToolCallDisplay ──────────────────────────────────────────────────────────
-export function ToolCallDisplay({ toolName, argsText, args, result, mcpApp, chatUI, isRunning, outcome, structuredMeta, approval, repeatCount, isLatestRunning = isRunning, isActiveTail, }) {
+export function ToolCallDisplay({ toolName, toolCallId, argsText, args, result, mcpApp, chatUI, isRunning, outcome, structuredMeta, approval, repeatCount, isLatestRunning = isRunning, isActiveTail, }) {
     const showActiveTail = isActiveTail ?? isLatestRunning;
     // Delegate to bespoke cells when structured metadata is present.
     // These must be separate components so hook order in ToolCallDisplayGeneric
     // is always stable (no conditional hook calls).
     const toolKind = structuredMeta?.toolKind;
-    const wrapToolDisplay = (children) => (_jsx(ToolActivityPresentation, { toolName: toolName, isRunning: isRunning, isActiveTail: showActiveTail, suppressLongRunningHint: toolName === "call-agent" || toolName.startsWith("agent:"), children: children }));
+    const wrapToolDisplay = (children) => (_jsx(ToolActivityPresentation, { toolName: toolName, isRunning: isRunning, isActiveTail: showActiveTail, toolCallId: toolCallId, suppressLongRunningHint: toolName === "call-agent" || toolName.startsWith("agent:"), children: children }));
     if (toolKind === "bash") {
         return wrapToolDisplay(_jsx(BashCell, { meta: structuredMeta, output: result, isRunning: isRunning }));
     }
@@ -426,10 +633,10 @@ function AgentCallCell({ agentName, activity, progress, responseText, isRunning,
 function AgentActivityToolCallRow({ tool, isActiveTail, }) {
     const isRunning = tool.status === "running";
     const ToolIcon = resolveToolIcon(tool.name);
-    return (_jsx(ToolActivityPresentation, { toolName: tool.name, isRunning: isRunning, isActiveTail: isActiveTail, suppressLongRunningHint: true, children: _jsxs("div", { className: "my-0.5 flex w-full items-center gap-1.5 rounded-md py-0.5 text-left text-[13px] text-muted-foreground", children: [_jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: isRunning ? (_jsx(IconLoader2, { className: "size-3.5 animate-spin" })) : (_jsx(ToolIcon, { className: "size-3.5" })) }), _jsx("span", { className: cn("min-w-0 truncate font-normal", isActiveTail && "agent-running-shimmer"), children: humanizeToolName(tool.name) })] }) }));
+    return (_jsx(ToolActivityPresentation, { toolName: tool.name, isRunning: isRunning, isActiveTail: isActiveTail, toolCallId: tool.id, suppressLongRunningHint: true, children: _jsxs("div", { className: "my-0.5 flex w-full items-center gap-1.5 rounded-md py-0.5 text-left text-[13px] text-muted-foreground", children: [_jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: isRunning ? (_jsx(IconLoader2, { className: "size-3.5 animate-spin" })) : (_jsx(ToolIcon, { className: "size-3.5" })) }), _jsx("span", { className: cn("min-w-0 truncate font-normal", isActiveTail && "agent-running-shimmer"), children: humanizeToolName(tool.name) })] }) }));
 }
 // ─── ToolCallFallback ──────────────────────────────────────────────────────────
-export function ToolCallFallback({ toolName, args, argsText, result, ...rest }) {
+export function ToolCallFallback({ toolName, toolCallId, args, argsText, result, ...rest }) {
     const chatRunning = React.useContext(ChatRunningContext);
     // A spinner is a claim that something is running right now, so it needs an
     // actually-running chat. `chatRunning` already stays true across
@@ -437,7 +644,7 @@ export function ToolCallFallback({ toolName, args, argsText, result, ...rest })
     // so an activity placeholder alone must never resurrect one on rehydrated
     // history.
     const isRunning = result === undefined && chatRunning;
-    return (_jsx(ToolCallDisplay, { toolName: toolName, args: args, argsText: argsText, result: typeof result === "string"
+    return (_jsx(ToolCallDisplay, { toolName: toolName, toolCallId: toolCallId, args: args, argsText: argsText, result: typeof result === "string"
             ? result
             : result !== undefined
                 ? JSON.stringify(result)
@@ -467,7 +674,7 @@ export function ReconnectStreamMessage({ content, allowActivitySpinner = true, }
         if (part.type === "reasoning") {
             return (_jsx(ReasoningCell, { text: part.text, isStreaming: chatRunning && i === streamingReasoningPartIndex, resetKey: `reconnect-reasoning-${i}`, defaultOpen: i === latestReasoningPartIndex, collapseWhenReplaced: i < latestReasoningPartIndex }, `reconnect-reasoning-${i}`));
         }
-        return (_jsx(ToolCallDisplay, { toolName: part.toolName, argsText: part.argsText, args: part.args, result: part.result, mcpApp: part.mcpApp, chatUI: part.chatUI, structuredMeta: part.structuredMeta, outcome: part.outcome, isRunning: part.result === undefined &&
+        return (_jsx(ToolCallDisplay, { toolName: part.toolName, toolCallId: part.toolCallId, argsText: part.argsText, args: part.args, result: part.result, mcpApp: part.mcpApp, chatUI: part.chatUI, structuredMeta: part.structuredMeta, outcome: part.outcome, isRunning: part.result === undefined &&
                 (chatRunning || (allowActivitySpinner && part.activity === true)), isActiveTail: i === latestActiveToolIndex, approval: part.approval, repeatCount: part.repeatCount }, `reconnect-tool-${i}`));
     };
     const renderedParts = [];
@@ -476,7 +683,7 @@ export function ReconnectStreamMessage({ content, allowActivitySpinner = true, }
     const flushSummary = (endIndex) => {
         if (summaryStartIndex < 0)
             return;
-        renderedParts.push(_jsx(RanToolsSummary, { toolCount: summaryToolCount, children: content
+        renderedParts.push(_jsx(RanToolsSummary, { toolCount: summaryToolCount, motionKey: `reconnect-${summaryStartIndex}`, children: content
                 .slice(summaryStartIndex, endIndex)
                 .map((part, offset) => renderPart(part, summaryStartIndex + offset)) }, `reconnect-tool-summary-${summaryStartIndex}`));
         summaryStartIndex = -1;
@@ -499,7 +706,7 @@ export function ReconnectStreamMessage({ content, allowActivitySpinner = true, }
         renderedParts.push(renderPart(part, i));
     }
     flushSummary(content.length);
-    return (_jsx("div", { className: "flex justify-start", children: _jsx("div", { className: "w-full max-w-[95%] text-sm leading-relaxed text-foreground space-y-1", children: renderedParts }) }));
+    return (_jsx("div", { className: "flex justify-start", children: _jsx("div", { className: "w-full max-w-[95%] text-sm leading-relaxed text-foreground", children: _jsx(ToolCallStackMotion, { className: "space-y-1", children: renderedParts }) }) }));
 }
 function getReconnectToolSummaryInfo(content) {
     const toolCallIndices = content.reduce((indices, part, index) => {
@@ -625,10 +832,10 @@ export function WorkedForSummary({ durationMs, defaultOpen = false, autoCollapse
         : "Worked";
     return (_jsxs("div", { className: "my-1 w-full", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, className: "flex items-center gap-1.5 py-0.5 text-[13px] text-muted-foreground transition-colors hover:text-foreground", children: [_jsx("span", { children: label }), _jsx(IconChevronRight, { className: cn("size-3.5 shrink-0 transition-transform", open && "rotate-90") })] }), _jsx(AnimatedCollapse, { open: open, children: _jsx(WorkSummaryContentContext.Provider, { value: true, children: _jsx("div", { className: "pt-1", children: children }) }) })] }));
 }
-export function RanToolsSummary({ toolCount, children, }) {
+export function RanToolsSummary({ toolCount, motionKey = "summary", children, }) {
     const [open, setOpen] = useState(false);
     const label = `Ran ${toolCount} ${toolCount === 1 ? "tool" : "tools"}`;
-    return (_jsxs("div", { className: "my-1 w-full", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, className: "flex items-center gap-1.5 py-0.5 text-[13px] text-muted-foreground transition-colors hover:text-foreground", children: [_jsx("span", { children: label }), _jsx(IconChevronRight, { className: cn("size-3.5 shrink-0 transition-transform", open && "rotate-90") })] }), _jsx(AnimatedCollapse, { open: open, children: _jsx("div", { className: "pt-1", children: children }) })] }));
+    return (_jsxs("div", { className: "agent-tool-summary my-1 w-full", "data-agent-tool-summary": motionKey, children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, className: "flex items-center gap-1.5 py-0.5 text-[13px] text-muted-foreground transition-colors hover:text-foreground", children: [_jsx("span", { className: "agent-tool-summary__label", children: label }), _jsx(IconChevronRight, { className: cn("size-3.5 shrink-0 transition-transform", open && "rotate-90") })] }), _jsx(AnimatedCollapse, { open: open, children: _jsx("div", { className: "pt-1", children: children }) })] }));
 }
 // ─── Re-export for AssistantMessage ───────────────────────────────────────────
 // AssistantMessage in AssistantChat.tsx uses FilesChangedSummary directly, so

package/dist/client/extensions/ExtensionsSidebarSection.js

@@ -665,7 +665,7 @@ export function ExtensionsSidebarSection() {
     };
     return (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs("div", { className: "relative min-w-0 py-1", children: [_jsxs("div", { className: cn("group/extensions-section relative flex w-full min-w-0 items-center rounded-md text-sm font-medium transition-[opacity,color,background-color] hover:text-primary", location.pathname.startsWith("/extensions")
                         ? "text-sidebar-accent-foreground"
-                        : "text-muted-foreground hover:bg-sidebar-accent/50", extensionsOpen && sortedTools.length > 0 && "mb-1"), children: [_jsx("button", { type: "button", onClick: toggleExtensionsOpen, className: "absolute inset-0 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "aria-label": extensionsOpen ? copy.collapse : copy.expand, "aria-expanded": extensionsOpen }), _jsxs("div", { className: "pointer-events-none relative z-10 flex min-w-0 flex-1 items-center gap-2 px-3 py-1.5 pr-20", children: [_jsx(IconTool, { className: "h-4 w-4 shrink-0" }), _jsxs(HoverCard, { openDelay: 1200, closeDelay: 200, children: [_jsx(HoverCardTrigger, { asChild: true, children: _jsx("span", { className: "pointer-events-auto min-w-0 select-none truncate", onClick: toggleExtensionsOpen, children: copy.title }) }), _jsxs(HoverCardContent, { side: "top", align: "start", sideOffset: 8, className: "w-72 space-y-3 p-3", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-semibold text-foreground", children: copy.title }), _jsx("p", { className: "mt-1 text-xs leading-relaxed text-muted-foreground", children: copy.description })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Link, { to: "/extensions", className: "inline-flex h-8 items-center rounded-md border px-2.5 text-xs font-medium text-foreground transition-colors hover:bg-accent", children: copy.open }), _jsx("a", { href: "https://agent-native.com/docs/extensions", target: "_blank", rel: "noopener noreferrer", className: "inline-flex h-8 items-center rounded-md px-2.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground", children: copy.learnMore })] })] })] })] }), _jsxs("div", { className: "absolute right-1 top-1/2 z-20 flex -translate-y-1/2 items-center", children: [_jsx(ExtensionSortMenu, { value: sortModeState, onChange: setExtensionSortMode, showHidden: showGloballyHidden, onShowHiddenChange: setShowGloballyHidden, copy: copy }), _jsxs(Popover, { open: showCreate, onOpenChange: setShowCreate, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "pointer-events-none inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground/70 opacity-0 transition-[opacity,color,background-color] hover:bg-accent hover:text-accent-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover/extensions-section:pointer-events-auto group-hover/extensions-section:opacity-100 group-focus-within/extensions-section:pointer-events-auto group-focus-within/extensions-section:opacity-100 data-[state=open]:pointer-events-auto data-[state=open]:opacity-100", "aria-label": copy.newExtension, children: _jsx(IconPlus, { className: "h-3.5 w-3.5" }) }) }), _jsxs(PopoverContent, { side: "right", align: "start", collisionPadding: 8, className: "relative z-[360] w-[min(420px,calc(100vw-16px))] px-2 pb-2 pt-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 ps-1 pb-2", children: [_jsx("p", { className: "text-sm font-semibold text-foreground", children: copy.newExtension }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("a", { href: "https://agent-native.com/docs/extensions", target: "_blank", rel: "noopener noreferrer", className: "inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "aria-label": copy.learnMore, children: _jsx(IconHelpCircle, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: copy.learnMore })] })] }), _jsx(PromptComposer, { autoFocus: true, placeholder: copy.createPlaceholder, draftScope: "extensions:sidebar-create", onSubmit: handleCreate })] })] }), _jsx("button", { type: "button", onClick: toggleExtensionsOpen, className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground/70 hover:bg-accent hover:text-foreground", "aria-label": extensionsOpen ? copy.collapse : copy.expand, "aria-expanded": extensionsOpen, children: _jsx(IconChevronDown, { className: cn("h-3.5 w-3.5 shrink-0 transition-transform", !extensionsOpen && "-rotate-90") }) })] })] }), extensionsOpen &&
+                        : "text-muted-foreground hover:bg-sidebar-accent/50", extensionsOpen && sortedTools.length > 0 && "mb-1"), children: [_jsx("button", { type: "button", onClick: toggleExtensionsOpen, className: "absolute inset-0 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "aria-label": extensionsOpen ? copy.collapse : copy.expand, "aria-expanded": extensionsOpen }), _jsxs("div", { className: "pointer-events-none relative z-10 flex min-w-0 flex-1 items-center gap-2 px-3 py-1.5 pr-20", children: [_jsx(IconTool, { className: "h-4 w-4 shrink-0" }), _jsxs(HoverCard, { openDelay: 1200, closeDelay: 200, children: [_jsx(HoverCardTrigger, { asChild: true, children: _jsx("span", { className: "pointer-events-auto min-w-0 select-none truncate", onClick: toggleExtensionsOpen, children: copy.title }) }), _jsxs(HoverCardContent, { side: "top", align: "start", sideOffset: 8, className: "w-72 space-y-3 p-3", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-semibold text-foreground", children: copy.title }), _jsx("p", { className: "mt-1 text-xs leading-relaxed text-muted-foreground", children: copy.description })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Link, { to: "/extensions", className: "inline-flex h-8 items-center rounded-md border px-2.5 text-xs font-medium text-foreground transition-colors hover:bg-accent", children: copy.open }), _jsx("a", { href: "https://agent-native.com/docs/extensions", target: "_blank", rel: "noopener noreferrer", className: "inline-flex h-8 items-center rounded-md px-2.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground", children: copy.learnMore })] })] })] })] }), _jsxs("div", { className: "absolute right-1 top-1/2 z-20 flex -translate-y-1/2 items-center", children: [_jsx(ExtensionSortMenu, { value: sortModeState, onChange: setExtensionSortMode, showHidden: showGloballyHidden, onShowHiddenChange: setShowGloballyHidden, copy: copy }), _jsxs(Popover, { open: showCreate, onOpenChange: setShowCreate, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "pointer-events-none inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground/70 opacity-0 transition-[opacity,color,background-color] hover:bg-accent hover:text-accent-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover/extensions-section:pointer-events-auto group-hover/extensions-section:opacity-100 group-focus-within/extensions-section:pointer-events-auto group-focus-within/extensions-section:opacity-100 data-[state=open]:pointer-events-auto data-[state=open]:opacity-100", "aria-label": copy.newExtension, children: _jsx(IconPlus, { className: "h-3.5 w-3.5" }) }) }), _jsxs(PopoverContent, { side: "right", align: "start", collisionPadding: 8, className: "relative z-[360] w-[min(420px,calc(100vw-16px))] px-2 pb-2 pt-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 ps-1 pb-2", children: [_jsx("p", { className: "text-sm font-semibold text-foreground", children: copy.newExtension }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("a", { href: "https://agent-native.com/docs/extensions", target: "_blank", rel: "noopener noreferrer", className: "inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "aria-label": copy.learnMore, children: _jsx(IconHelpCircle, { className: "size-3" }) }) }), _jsx(TooltipContent, { children: copy.learnMore })] })] }), _jsx(PromptComposer, { autoFocus: true, placeholder: copy.createPlaceholder, draftScope: "extensions:sidebar-create", onSubmit: handleCreate })] })] }), _jsx("button", { type: "button", onClick: toggleExtensionsOpen, className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground/70 hover:bg-accent hover:text-foreground", "aria-label": extensionsOpen ? copy.collapse : copy.expand, "aria-expanded": extensionsOpen, children: _jsx(IconChevronDown, { className: cn("h-3.5 w-3.5 shrink-0 transition-transform", !extensionsOpen && "-rotate-90") }) })] })] }), extensionsOpen &&
                     (extensionsQuery.isLoading ? (_jsx("div", { className: "min-w-0 space-y-0.5 px-0.5", children: [1, 2, 3].map((i) => (_jsx("div", { className: "flex items-center rounded-md px-2 py-1.5", children: _jsx("div", { className: "h-3 rounded bg-muted animate-pulse", style: { width: `${60 + i * 20}px` } }) }, i))) })) : extensionsQuery.isError ? (_jsx(ExtensionQueryErrorState, { compact: true, message: copy.loadError, onRetry: () => void extensionsQuery.refetch(), retrying: extensionsQuery.isFetching })) : sortedTools.length === 0 ? null : (_jsxs("div", { className: "min-w-0 space-y-0.5 px-0.5", children: [visibleTools.map((extension) => {
                                 const isActive = isExtensionPathname(location.pathname, extension.id);
                                 const isFav = favoriteIds.has(extension.id);

package/dist/client/frame-protocol.d.ts

@@ -114,6 +114,10 @@ export interface SidebarModeMessage {
         width?: number;
         /** Whether the app's sidebar should be open. */
         open?: boolean;
+        /** Whether the sidebar is using the wide fixed drawer presentation. */
+        wide?: boolean;
+        /** Width reserved in the app layout while the wide drawer overlays it. */
+        placeholderWidth?: number;
     };
 }
 export interface DesignInitMessage {

package/dist/client/i18n.js

@@ -405,6 +405,15 @@ const CORE_FALLBACK_MESSAGES = {
     "agentPanel.cliRequiresDevMode": "CLI requires dev mode",
     "agentPanel.cliRequiresDevModeDescription": "Run this app locally with pnpm dev or use Builder.io to access the CLI terminal.",
     "agentPanel.toggleAgent": "Toggle agent",
+    "runtimeConfig.warningTitle": "Production configuration warning",
+    "runtimeConfig.errorTitle": "Production configuration error",
+    "runtimeConfig.issue_one": "{{count}} issue",
+    "runtimeConfig.issue_other": "{{count}} issues",
+    "runtimeConfig.showDetails": "Show configuration details",
+    "runtimeConfig.hideDetails": "Hide configuration details",
+    "runtimeConfig.copyPrompt": "Copy prompt for AI",
+    "runtimeConfig.copied": "Prompt copied",
+    "runtimeConfig.copyFailed": "Copy failed",
 };
 function flattenMessages(value, prefix = "", out = {}) {
     if (!value || typeof value !== "object" || Array.isArray(value))

package/dist/client/integrations/IntegrationsPanel.js

@@ -6,6 +6,7 @@ import { Tooltip, TooltipContent, TooltipTrigger, } from "../components/ui/toolt
 import { useT } from "../i18n.js";
 import { getDefaultMcpIntegrations, } from "../resources/mcp-integration-catalog.js";
 import { McpIntegrationDialog } from "../resources/McpIntegrationDialog.js";
+import { McpIntegrationLogo } from "../resources/McpIntegrationLogo.js";
 import { useCreateMcpServer, useDeleteMcpServer, useMcpServers, useReconnectMcpServer, } from "../resources/use-mcp-servers.js";
 import { useIntegrationStatus, } from "./useIntegrationStatus.js";
 import { isNonPublicWebhookUrl } from "./webhook-url.js";
@@ -253,10 +254,6 @@ function compareMcpUrl(value) {
         return value.trim().replace(/\/+$/, "");
     }
 }
-function McpLogo({ integration }) {
-    const [failed, setFailed] = useState(false);
-    return (_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border/70 bg-background text-xs font-semibold text-muted-foreground", children: failed ? (integration.name.slice(0, 1)) : (_jsx("img", { src: integration.logoUrl, alt: "", loading: "lazy", decoding: "async", className: "size-7 object-contain", onError: () => setFailed(true) })) }));
-}
 function McpServerStatus({ server, onReconnect, reconnecting = false, reconnectError, }) {
     const t = useT();
     if (server.status.state === "connected") {
@@ -274,7 +271,7 @@ function McpServerStatus({ server, onReconnect, reconnecting = false, reconnectE
     return (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx("span", { className: "size-1.5 rounded-full bg-muted-foreground/50" }), "Status unknown"] }));
 }
 function McpCatalogItem({ integration, connected, onConnect, }) {
-    return (_jsxs("div", { className: "flex min-w-0 items-center gap-3 border-b border-border/60 py-4 last:border-b-0", children: [_jsx(McpLogo, { integration: integration }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate text-sm font-medium text-foreground", children: integration.name }), connected && (_jsx("span", { className: "shrink-0 text-[11px] font-medium text-emerald-600 dark:text-emerald-400", children: "Connected" }))] }), _jsx("p", { className: "mt-0.5 line-clamp-1 text-xs leading-5 text-muted-foreground", children: integration.description || integration.useCase })] }), _jsx("button", { type: "button", onClick: () => onConnect(integration.id), className: "shrink-0 rounded-md border border-border bg-background px-2.5 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-accent", children: connected ? "Manage" : "Connect" })] }));
+    return (_jsxs("div", { className: "flex min-w-0 items-center gap-3 border-b border-border/60 py-4 last:border-b-0", children: [_jsx(McpIntegrationLogo, { name: integration.name, logoUrl: integration.logoUrl, integrationId: integration.id }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate text-sm font-medium text-foreground", children: integration.name }), connected && (_jsx("span", { className: "shrink-0 text-[11px] font-medium text-emerald-600 dark:text-emerald-400", children: "Connected" }))] }), _jsx("p", { className: "mt-0.5 line-clamp-1 text-xs leading-5 text-muted-foreground", children: integration.description || integration.useCase })] }), _jsx("button", { type: "button", onClick: () => onConnect(integration.id), className: "shrink-0 rounded-md border border-border bg-background px-2.5 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-accent", children: connected ? "Manage" : "Connect" })] }));
 }
 function McpIntegrationsSection({ query }) {
     const serversQuery = useMcpServers();

package/dist/client/onboarding/FirstRunOnboarding.js

@@ -6,6 +6,7 @@ import { appPath } from "../api-path.js";
 import { Tooltip, TooltipContent, TooltipTrigger, } from "../components/ui/tooltip.js";
 import { buildMcpOAuthStartUrl, filterMcpIntegrations, getDefaultMcpIntegrations, navigateToMcpOAuthStart, shouldOfferMcpIntegrationOrganizationScope, } from "../resources/mcp-integration-catalog.js";
 import { McpIntegrationDialog } from "../resources/McpIntegrationDialog.js";
+import { McpIntegrationLogo } from "../resources/McpIntegrationLogo.js";
 import { formatMcpServerError, useCreateMcpServer, useMcpServers, } from "../resources/use-mcp-servers.js";
 import { useBuilderConnectFlow } from "../settings/useBuilderStatus.js";
 import { cn } from "../utils.js";
@@ -230,9 +231,7 @@ function CapabilityList({ capabilities, compact = false, className, }) {
 }
 function McpIntegrationCard({ integration, connected, busy, onConnect, }) {
     const actionLabel = "Connect";
-    return (_jsxs("article", { className: "flex min-w-0 items-center gap-3 border-b border-border/70 py-3.5 sm:pe-4", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [_jsxs("span", { className: "relative flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-card text-xs font-semibold text-muted-foreground", children: [integration.name.slice(0, 1), _jsx("img", { src: integration.logoUrl, alt: "", className: "absolute inset-0 size-full object-contain p-1", onError: (event) => {
-                                    event.currentTarget.hidden = true;
-                                } })] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "truncate text-sm font-medium text-foreground", children: integration.name }), connected ? (_jsx("span", { className: "rounded-full border border-border bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: "Connected" })) : null] }), _jsx("p", { className: "mt-1 line-clamp-2 text-[11px] leading-4 text-muted-foreground", children: integration.description })] })] }), _jsxs("button", { type: "button", onClick: () => onConnect(integration), disabled: connected || busy, "aria-label": `${actionLabel} ${integration.name}`, className: "inline-flex min-h-8 shrink-0 items-center justify-center gap-1.5 rounded-md border border-border bg-background px-3 text-[11px] font-medium text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", children: [busy ? _jsx(IconLoader2, { className: "animate-spin", size: 13 }) : null, connected ? "Connected" : actionLabel] })] }));
+    return (_jsxs("article", { className: "flex min-w-0 items-center gap-3 border-b border-border/70 py-3.5 sm:pe-4", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [_jsx(McpIntegrationLogo, { name: integration.name, logoUrl: integration.logoUrl, integrationId: integration.id, className: "size-8 rounded-md", imageClassName: "size-full p-1" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "truncate text-sm font-medium text-foreground", children: integration.name }), connected ? (_jsx("span", { className: "rounded-full border border-border bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: "Connected" })) : null] }), _jsx("p", { className: "mt-1 line-clamp-2 text-[11px] leading-4 text-muted-foreground", children: integration.description })] })] }), _jsxs("button", { type: "button", onClick: () => onConnect(integration), disabled: connected || busy, "aria-label": `${actionLabel} ${integration.name}`, className: "inline-flex min-h-8 shrink-0 items-center justify-center gap-1.5 rounded-md border border-border bg-background px-3 text-[11px] font-medium text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", children: [busy ? _jsx(IconLoader2, { className: "animate-spin", size: 13 }) : null, connected ? "Connected" : actionLabel] })] }));
 }
 function CapabilityRow({ capability, compact, }) {
     return (_jsxs("div", { className: cn("flex items-start justify-between gap-3", compact ? "py-2" : "py-3"), children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: cn("font-medium", compact ? "text-[11px]" : "text-sm"), children: capability.label }), _jsx(CapabilityInfoButton, { capability: capability, ariaLabel: `Why ${capability.label} is needed` })] }), _jsx("p", { className: "mt-1 text-[11px] leading-4 text-muted-foreground", children: capability.keySummary })] }), _jsx("span", { className: cn("shrink-0 text-[10px] uppercase tracking-[0.08em]", capability.required ? "text-primary" : "text-muted-foreground"), children: capability.required ? "Required" : "Optional" })] }));

package/dist/client/org/TeamPage.js

@@ -1,15 +1,16 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@agent-native/toolkit/ui/alert-dialog";
 import { Button as ToolkitButton } from "@agent-native/toolkit/ui/button";
+import { Pagination, PaginationContent, PaginationItem, PaginationNext, PaginationPrevious, } from "@agent-native/toolkit/ui/pagination";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@agent-native/toolkit/ui/select";
 import { Switch } from "@agent-native/toolkit/ui/switch";
 import { IconUserPlus, IconTrash, IconCrown, IconShieldCheck, IconLoader2, IconCheck, IconPencil, IconAt, IconX, IconKey, IconCopy, IconRefresh, IconEye, IconEyeOff, IconCloudUpload, IconFileImport, IconPlus, IconAlertTriangle, IconUsersGroup, IconHelpCircle, IconExternalLink, } from "@tabler/icons-react";
-import { forwardRef, useMemo, useRef, useState, } from "react";
+import { forwardRef, useEffect, useMemo, useRef, useState, } from "react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../components/ui/tooltip.js";
 import { useT } from "../i18n.js";
 import { SettingsGroup, SettingsRow } from "../settings/SettingsRow.js";
 import { cn } from "../utils.js";
-import { useOrg, useOrgMembers, useOrgInvitations, useCreateOrg, useUpdateOrg, useBulkInviteMembers, useChangeMemberRole, useAcceptInvitation, useRemoveMember, useDeleteOrg, useSwitchOrg, useSetOrgDomain, useSetOrgWorkspaceUrl, useSetOrgAuthProvider, useRevealA2ASecret, useSetA2ASecret, useSyncA2ASecret, useJoinByDomain, useAppRoles, useSetAppMemberRole, } from "./hooks.js";
+import { useOrg, useOrgMembers, useOrgInvitations, useCreateOrg, useUpdateOrg, useBulkInviteMembers, useChangeMemberRole, useAcceptInvitation, useRemoveMember, useDeleteOrg, useSwitchOrg, useSetOrgDomain, useSetOrgWorkspaceUrl, useSetOrgAuthProvider, useRevealA2ASecret, useSetA2ASecret, useSyncA2ASecret, useJoinByDomain, useAppRoles, useSetAppMemberRole, ORG_MEMBER_PAGE_SIZE, } from "./hooks.js";
 const Button = forwardRef(({ className, ...props }, ref) => (_jsx(ToolkitButton, { ref: ref, variant: "ghost", className: cn("h-auto p-0 hover:bg-transparent hover:text-inherit active:scale-100 [&_svg]:!size-auto", className), ...props })));
 Button.displayName = "TeamPrimitiveButton";
 function RoleIcon({ role }) {
@@ -96,19 +97,40 @@ function OrgNameDisplay({ name, canEdit }) {
 function MembersCard({ appRoles }) {
     const t = useT();
     const { data: org } = useOrg();
-    const { data: membersData, isLoading: isLoadingMembers } = useOrgMembers();
+    const [memberOffset, setMemberOffset] = useState(0);
+    const { data: membersData, isLoading: isLoadingMembers, isFetching: isFetchingMembers, isPlaceholderData: isPlaceholderMembers, } = useOrgMembers(memberOffset);
     const { data: invitationsData } = useOrgInvitations();
     const switchOrg = useSwitchOrg();
+    useEffect(() => {
+        setMemberOffset(0);
+    }, [org?.orgId]);
+    useEffect(() => {
+        if (memberOffset > 0 &&
+            membersData &&
+            !isLoadingMembers &&
+            !isFetchingMembers &&
+            !isPlaceholderMembers &&
+            membersData.members.length === 0) {
+            setMemberOffset((currentOffset) => Math.max(0, currentOffset - ORG_MEMBER_PAGE_SIZE));
+        }
+    }, [
+        isFetchingMembers,
+        isLoadingMembers,
+        isPlaceholderMembers,
+        memberOffset,
+        membersData,
+    ]);
     if (!org?.orgId)
         return null;
     const isOwner = org.role === "owner";
     const isOwnerOrAdmin = isOwner || org.role === "admin";
     const members = membersData?.members ?? [];
+    const totalMembers = membersData?.totalCount ?? 0;
     const pendingInvites = invitationsData?.invitations ?? [];
     const hasMultipleOrgs = (org.orgs?.length ?? 0) > 1;
-    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(SettingsGroup, { title: "Organization", children: [_jsx(SettingsRow, { id: "organization", label: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(IconUsersGroup, { className: "size-4 text-muted-foreground" }), _jsx(OrgNameDisplay, { name: org.orgName ?? "", canEdit: isOwnerOrAdmin })] }), description: `${t("org.memberCount", { count: members.length })} · ${t("org.youAreRole", { role: org.role })}`, control: hasMultipleOrgs ? (_jsxs(Select, { value: org.orgId ?? "", onValueChange: (value) => switchOrg.mutate(value || null), disabled: switchOrg.isPending, children: [_jsx(SelectTrigger, { className: "h-auto w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-xs sm:w-auto", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: org.orgs.map((o) => (_jsx(SelectItem, { value: o.orgId, children: o.orgName }, o.orgId))) })] })) : undefined }), isOwnerOrAdmin && (_jsxs(_Fragment, { children: [_jsx(DomainSettingsSection, { domain: org.allowedDomain, ownerEmail: org.email }), _jsx(WorkspaceUrlSettingsSection, { workspaceUrl: org.workspaceUrl }), _jsx(AuthProviderSettingsSection, { requiredAuthProvider: org.requiredAuthProvider }), isOwner && _jsx(A2ASecretSection, { isSet: Boolean(org.a2aSecretSet) })] })), switchOrg.error && (_jsx("div", { className: "px-5 pb-4", children: _jsx(ErrorText, { error: switchOrg.error }) }))] }), _jsx(MembersTableCard, { members: members, pendingInvites: pendingInvites, isLoadingMembers: isLoadingMembers, currentUserEmail: org.email, currentUserRole: org.role ?? null, appRoles: appRoles }), isOwner && _jsx(DangerZoneCard, { orgName: org.orgName ?? "" })] }));
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(SettingsGroup, { title: "Organization", children: [_jsx(SettingsRow, { id: "organization", label: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(IconUsersGroup, { className: "size-4 text-muted-foreground" }), _jsx(OrgNameDisplay, { name: org.orgName ?? "", canEdit: isOwnerOrAdmin })] }), description: `${t("org.memberCount", { count: totalMembers })} · ${t("org.youAreRole", { role: org.role })}`, control: hasMultipleOrgs ? (_jsxs(Select, { value: org.orgId ?? "", onValueChange: (value) => switchOrg.mutate(value || null), disabled: switchOrg.isPending, children: [_jsx(SelectTrigger, { className: "h-auto w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-xs sm:w-auto", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: org.orgs.map((o) => (_jsx(SelectItem, { value: o.orgId, children: o.orgName }, o.orgId))) })] })) : undefined }), isOwnerOrAdmin && (_jsxs(_Fragment, { children: [_jsx(DomainSettingsSection, { domain: org.allowedDomain, ownerEmail: org.email }), _jsx(WorkspaceUrlSettingsSection, { workspaceUrl: org.workspaceUrl }), _jsx(AuthProviderSettingsSection, { requiredAuthProvider: org.requiredAuthProvider }), isOwner && _jsx(A2ASecretSection, { isSet: Boolean(org.a2aSecretSet) })] })), switchOrg.error && (_jsx("div", { className: "px-5 pb-4", children: _jsx(ErrorText, { error: switchOrg.error }) }))] }), _jsx(MembersTableCard, { members: members, totalMembers: totalMembers, pendingInvites: pendingInvites, isLoadingMembers: isLoadingMembers, isFetchingMembers: isFetchingMembers, currentUserEmail: org.email, currentUserRole: org.role ?? null, appRoles: appRoles, memberOffset: memberOffset, hasNextPage: membersData?.hasMore === true, nextMemberOffset: membersData?.nextOffset ?? null, onMemberPageChange: setMemberOffset }), isOwner && _jsx(DangerZoneCard, { orgName: org.orgName ?? "" })] }));
 }
-function MembersTableCard({ members, pendingInvites, isLoadingMembers, currentUserEmail, currentUserRole, appRoles, }) {
+function MembersTableCard({ members, totalMembers, pendingInvites, isLoadingMembers, isFetchingMembers, currentUserEmail, currentUserRole, appRoles, memberOffset, hasNextPage, nextMemberOffset, onMemberPageChange, }) {
     const t = useT();
     const [showInviteForm, setShowInviteForm] = useState(false);
     const canInvite = currentUserRole === "owner" || currentUserRole === "admin";
@@ -117,7 +139,28 @@ function MembersTableCard({ members, pendingInvites, isLoadingMembers, currentUs
         a.email.toLowerCase(),
         a.role,
     ]));
-    return (_jsxs("section", { className: "overflow-hidden rounded-xl border border-border/70 bg-card text-card-foreground", children: [_jsxs("div", { className: "flex flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium", children: t("org.members") }), _jsx("p", { className: "text-xs text-muted-foreground", children: t("org.memberCount", { count: members.length }) })] }), canInvite && !showInviteForm && (_jsxs(Button, { type: "button", intent: "primary", emphasis: "solid", onClick: () => setShowInviteForm(true), className: "inline-flex items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90", children: [_jsx(IconUserPlus, { size: 14 }), t("org.inviteMembers")] }))] }), canInvite && showInviteForm && (_jsx("div", { className: "border-b border-border p-4", children: _jsx(BulkInviteForm, { currentUserRole: currentUserRole, onClose: () => setShowInviteForm(false) }) })), _jsx("div", { className: "divide-y divide-border/60 border-t border-border/60", children: isLoadingMembers && members.length === 0 ? ([0, 1, 2].map((i) => (_jsxs("div", { className: "flex items-center gap-3 px-5 py-4", children: [_jsx("div", { className: "size-8 animate-pulse rounded-full bg-muted" }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-3.5 animate-pulse rounded bg-muted", style: { width: `${180 + i * 48}px` } }), _jsx("div", { className: "h-3 w-20 animate-pulse rounded bg-muted" })] })] }, i)))) : members.length === 0 && pendingInvites.length === 0 ? (_jsx("div", { className: "px-5 py-10 text-center text-sm text-muted-foreground", children: t("org.noMembers") })) : (_jsxs(_Fragment, { children: [members.map((m) => (_jsx(MemberRow, { email: m.email, role: m.role, isCurrentUser: m.email === currentUserEmail, currentUserRole: currentUserRole, appRoles: appRoles, appRole: appRoleByEmail.get(m.email.toLowerCase()) ?? null, canManageAppRoles: Boolean(appRoleData?.canManage) }, m.email))), pendingInvites.map((inv) => (_jsx(PendingInviteRow, { invite: inv }, inv.id)))] })) })] }));
+    return (_jsxs("section", { className: "overflow-hidden rounded-xl border border-border/70 bg-card text-card-foreground", children: [_jsxs("div", { className: "flex flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium", children: t("org.members") }), _jsx("p", { className: "text-xs text-muted-foreground", children: t("org.memberCount", { count: totalMembers }) })] }), canInvite && !showInviteForm && (_jsxs(Button, { type: "button", intent: "primary", emphasis: "solid", onClick: () => setShowInviteForm(true), className: "inline-flex items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90", children: [_jsx(IconUserPlus, { size: 14 }), t("org.inviteMembers")] }))] }), canInvite && showInviteForm && (_jsx("div", { className: "border-b border-border p-4", children: _jsx(BulkInviteForm, { currentUserRole: currentUserRole, onClose: () => setShowInviteForm(false) }) })), _jsx("div", { className: "divide-y divide-border/60 border-t border-border/60", children: isLoadingMembers && members.length === 0 ? ([0, 1, 2].map((i) => (_jsxs("div", { className: "flex items-center gap-3 px-5 py-4", children: [_jsx("div", { className: "size-8 animate-pulse rounded-full bg-muted" }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-3.5 animate-pulse rounded bg-muted", style: { width: `${180 + i * 48}px` } }), _jsx("div", { className: "h-3 w-20 animate-pulse rounded bg-muted" })] })] }, i)))) : members.length === 0 && pendingInvites.length === 0 ? (_jsx("div", { className: "px-5 py-10 text-center text-sm text-muted-foreground", children: t("org.noMembers") })) : (_jsxs(_Fragment, { children: [members.map((m) => (_jsx(MemberRow, { email: m.email, role: m.role, isCurrentUser: m.email === currentUserEmail, currentUserRole: currentUserRole, appRoles: appRoles, appRole: appRoleByEmail.get(m.email.toLowerCase()) ?? null, canManageAppRoles: Boolean(appRoleData?.canManage) }, m.email))), pendingInvites.map((inv) => (_jsx(PendingInviteRow, { invite: inv }, inv.id)))] })) }), (memberOffset > 0 || hasNextPage) && (_jsx(MemberPagination, { memberOffset: memberOffset, totalMembers: totalMembers, hasNextPage: hasNextPage, nextMemberOffset: nextMemberOffset, isFetchingMembers: isFetchingMembers, onMemberPageChange: onMemberPageChange }))] }));
+}
+function MemberPagination({ memberOffset, totalMembers, hasNextPage, nextMemberOffset, isFetchingMembers, onMemberPageChange, }) {
+    const t = useT();
+    const currentPage = Math.floor(memberOffset / ORG_MEMBER_PAGE_SIZE) + 1;
+    const totalPages = Math.max(1, Math.ceil(totalMembers / ORG_MEMBER_PAGE_SIZE));
+    const canGoPrevious = memberOffset > 0 && !isFetchingMembers;
+    const canGoNext = hasNextPage && nextMemberOffset !== null && !isFetchingMembers;
+    return (_jsxs("div", { className: "flex flex-col gap-3 border-t border-border/60 px-5 py-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsx("p", { className: "text-xs text-muted-foreground", "aria-live": "polite", children: t("org.memberPageStatus", {
+                    page: currentPage,
+                    totalPages,
+                }) }), _jsx(Pagination, { "aria-label": t("org.memberPagination"), className: "mx-0 w-auto justify-start sm:justify-end", children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { href: "#", "aria-label": t("org.previousMemberPage"), "aria-disabled": !canGoPrevious, tabIndex: canGoPrevious ? undefined : -1, className: cn("text-xs", !canGoPrevious && "pointer-events-none opacity-50"), onClick: (event) => {
+                                    event.preventDefault();
+                                    if (canGoPrevious) {
+                                        onMemberPageChange(Math.max(0, memberOffset - ORG_MEMBER_PAGE_SIZE));
+                                    }
+                                } }) }), _jsx(PaginationItem, { children: _jsx(PaginationNext, { href: "#", "aria-label": t("org.nextMemberPage"), "aria-disabled": !canGoNext, tabIndex: canGoNext ? undefined : -1, className: cn("text-xs", !canGoNext && "pointer-events-none opacity-50"), onClick: (event) => {
+                                    event.preventDefault();
+                                    if (canGoNext && nextMemberOffset !== null) {
+                                        onMemberPageChange(nextMemberOffset);
+                                    }
+                                } }) })] }) })] }));
 }
 function DangerZoneCard({ orgName }) {
     const t = useT();

package/dist/client/org/hooks.d.ts

@@ -11,9 +11,14 @@ export interface UseOrgRoleResult {
     error: Error | null;
 }
 export declare function useOrgRole(): UseOrgRoleResult;
-export declare function useOrgMembers(): import("@tanstack/react-query").UseQueryResult<NoInfer<{
+export declare const ORG_MEMBER_PAGE_SIZE = 25;
+export interface OrgMembersPage {
     members: OrgMember[];
-}>, Error>;
+    totalCount: number;
+    hasMore: boolean;
+    nextOffset: number | null;
+}
+export declare function useOrgMembers(offset?: number): import("@tanstack/react-query").UseQueryResult<NoInfer<OrgMembersPage>, Error>;
 export declare function useOrgInvitations(): import("@tanstack/react-query").UseQueryResult<NoInfer<{
     invitations: OrgPendingInvitation[];
 }>, Error>;