@datalayer/agent-runtimes 1.0.4 → 1.0.5

package/lib/chat/header/ChatHeaderBase.d.ts

@@ -9,19 +9,24 @@
  */
 import { type ReactNode } from 'react';
 import type { ChatViewMode, HeaderButtonsConfig } from '../../types/chat';
-import type { SandboxStatusData } from '../../types/context';
+import type { SandboxWsStatus } from '../../types/sandbox';
 export interface ChatBaseHeaderProps {
     title?: string;
+    subtitle?: string;
     brandIcon?: ReactNode;
     headerContent?: ReactNode;
     headerActions?: ReactNode;
     showInformation?: boolean;
     onInformationClick?: () => void;
     padding: number;
-    /** Sandbox status from the backend */
-    sandboxStatus?: SandboxStatusData;
-    /** Callback to interrupt sandbox code execution */
-    onSandboxInterrupt: () => void;
+    /** API base URL passed to SandboxStatusIndicator */
+    sandboxApiBase?: string;
+    /** Auth token passed to SandboxStatusIndicator */
+    sandboxAuthToken?: string;
+    /** Agent ID passed to SandboxStatusIndicator for agent-scoped status */
+    sandboxAgentId?: string;
+    /** Optional sandbox status override for immediate indicator updates */
+    sandboxStatusData?: SandboxWsStatus | null;
     /** Header button configuration */
     headerButtons?: HeaderButtonsConfig;
     /** Current count of messages (used to conditionally show clear button) */
@@ -35,4 +40,4 @@ export interface ChatBaseHeaderProps {
     /** Callback when view mode changes */
     onChatViewModeChange?: (mode: ChatViewMode) => void;
 }
-export declare function ChatBaseHeader({ title, brandIcon, headerContent, headerActions, showInformation, onInformationClick, padding, sandboxStatus, onSandboxInterrupt, headerButtons, messageCount, onNewChat, onClear, chatViewMode, onChatViewModeChange, }: ChatBaseHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatBaseHeader({ title, subtitle, brandIcon, headerContent, headerActions, showInformation, onInformationClick, padding, sandboxApiBase, sandboxAuthToken, sandboxAgentId, sandboxStatusData, headerButtons, messageCount, onNewChat, onClear, chatViewMode, onChatViewModeChange, }: ChatBaseHeaderProps): import("react/jsx-runtime").JSX.Element;

package/lib/chat/header/ChatHeaderBase.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Heading, IconButton, Truncate } from '@primer/react';
+import { Heading, IconButton, Text, Truncate } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { PlusIcon, TrashIcon, GearIcon, CircleIcon, SquareFillIcon, CommentDiscussionIcon, DeviceMobileIcon, SidebarExpandIcon, InfoIcon, } from '@primer/octicons-react';
+import { PlusIcon, TrashIcon, GearIcon, CommentDiscussionIcon, DeviceMobileIcon, SidebarExpandIcon, InfoIcon, } from '@primer/octicons-react';
 import { AiAgentIcon } from '@datalayer/icons-react';
+import { SandboxStatusIndicator } from '../indicators/SandboxStatusIndicator';
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export function ChatBaseHeader({ title, brandIcon, headerContent, headerActions, showInformation, onInformationClick, padding, sandboxStatus, onSandboxInterrupt, headerButtons, messageCount, onNewChat, onClear, chatViewMode, onChatViewModeChange, }) {
+export function ChatBaseHeader({ title, subtitle, brandIcon, headerContent, headerActions, showInformation, onInformationClick, padding, sandboxApiBase, sandboxAuthToken, sandboxAgentId, sandboxStatusData, headerButtons, messageCount, onNewChat, onClear, chatViewMode, onChatViewModeChange, }) {
     return (_jsx(Box, { sx: {
             display: 'flex',
             flexDirection: 'column',
@@ -23,21 +24,22 @@ export function ChatBaseHeader({ title, brandIcon, headerContent, headerActions,
                         gap: 2,
                         minWidth: 0,
                         flex: '1 1 auto',
-                    }, children: [brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), title && (_jsx(Heading, { as: "h3", sx: {
-                                fontSize: 2,
-                                fontWeight: 'semibold',
+                    }, children: [brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), (title || subtitle) && (_jsxs(Box, { sx: {
+                                display: 'flex',
+                                flexDirection: 'column',
                                 minWidth: 0,
                                 maxWidth: '100%',
-                            }, children: _jsx(Truncate, { title: title, maxWidth: "28ch", children: title }) })), headerContent, showInformation && (_jsx(IconButton, { icon: InfoIcon, "aria-label": "Information", variant: "invisible", size: "small", onClick: onInformationClick }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }, children: [sandboxStatus?.available &&
-                            sandboxStatus?.sandbox_running &&
-                            (sandboxStatus.is_executing ? (_jsx(IconButton, { icon: SquareFillIcon, "aria-label": "Interrupt code execution", variant: "invisible", size: "small", sx: { color: 'danger.fg' }, onClick: onSandboxInterrupt })) : (_jsx(Box, { sx: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    width: 28,
-                                    height: 28,
-                                    color: 'fg.subtle',
-                                }, title: "Code sandbox ready", children: _jsx(CircleIcon, { size: 12 }) }))), headerButtons?.showNewChat && (_jsx(IconButton, { icon: PlusIcon, "aria-label": "New chat", variant: "invisible", size: "small", onClick: onNewChat })), headerButtons?.showClear && messageCount > 0 && (_jsx(IconButton, { icon: TrashIcon, "aria-label": "Clear messages", variant: "invisible", size: "small", onClick: onClear })), headerButtons?.showSettings && (_jsx(IconButton, { icon: GearIcon, "aria-label": "Settings", variant: "invisible", size: "small", onClick: headerButtons.onSettings })), chatViewMode && onChatViewModeChange && (_jsx(Box, { sx: {
+                            }, children: [title && (_jsx(Heading, { as: "h3", sx: {
+                                        fontSize: 2,
+                                        fontWeight: 'semibold',
+                                        minWidth: 0,
+                                        maxWidth: '100%',
+                                    }, children: _jsx(Truncate, { title: title, maxWidth: "28ch", children: title }) })), subtitle && (_jsx(Text, { sx: {
+                                        fontSize: 0,
+                                        color: 'fg.muted',
+                                        minWidth: 0,
+                                        maxWidth: '100%',
+                                    }, children: _jsx(Truncate, { title: subtitle, maxWidth: "40ch", children: subtitle }) }))] })), headerContent, showInformation && (_jsx(IconButton, { icon: InfoIcon, "aria-label": "Information", variant: "invisible", size: "small", onClick: onInformationClick }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }, children: [_jsx(SandboxStatusIndicator, { apiBase: sandboxApiBase, authToken: sandboxAuthToken, agentId: sandboxAgentId, statusOverride: sandboxStatusData }), headerButtons?.showNewChat && (_jsx(IconButton, { icon: PlusIcon, "aria-label": "New chat", variant: "invisible", size: "small", onClick: onNewChat })), headerButtons?.showClear && messageCount > 0 && (_jsx(IconButton, { icon: TrashIcon, "aria-label": "Clear messages", variant: "invisible", size: "small", onClick: onClear })), headerButtons?.showSettings && (_jsx(IconButton, { icon: GearIcon, "aria-label": "Settings", variant: "invisible", size: "small", onClick: headerButtons.onSettings })), chatViewMode && onChatViewModeChange && (_jsx(Box, { sx: {
                                 display: 'inline-flex',
                                 alignItems: 'center',
                                 bg: 'neutral.muted',

package/lib/chat/indicators/McpStatusIndicator.d.ts

@@ -1,9 +1,12 @@
+import type { McpToolsetsStatusResponse } from '../../types/mcp';
 export interface McpStatusIndicatorProps {
-    /** API base URL (e.g. "http://127.0.0.1:8765"). Defaults to
-     *  the current host on non-localhost, or localhost:8765. */
+    /** Pre-fetched MCP status data pushed via WebSocket.  When provided the
+     *  component will NOT poll the REST endpoint. */
+    data?: McpToolsetsStatusResponse | null;
+    /** @deprecated — Only used when `data` is not provided. */
     apiBase?: string;
-    /** Optional auth token for authenticated requests (e.g. K8s ingress). */
+    /** @deprecated — Only used when `data` is not provided. */
     authToken?: string;
 }
-export declare function McpStatusIndicator({ apiBase, authToken, }: McpStatusIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function McpStatusIndicator({ data: wsData, apiBase, authToken, }: McpStatusIndicatorProps): import("react/jsx-runtime").JSX.Element;
 export default McpStatusIndicator;

package/lib/chat/indicators/McpStatusIndicator.js

@@ -21,19 +21,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo } from 'react';
 import { Tooltip } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { useQuery } from '@tanstack/react-query';
 import { MCP_STATUS_COLORS, MCP_STATUS_LABELS } from '../../types/mcp';
 /* ── Helpers ───────────────────────────────────────────── */
-function getApiBase(apiBase) {
-    if (apiBase)
-        return apiBase;
-    if (typeof window === 'undefined')
-        return '';
-    const host = window.location.hostname;
-    return host === 'localhost' || host === '127.0.0.1'
-        ? 'http://127.0.0.1:8765'
-        : '';
-}
 function deriveAggregate(servers) {
     if (!servers || servers.length === 0)
         return 'none';
@@ -47,7 +36,7 @@ function deriveAggregate(servers) {
 }
 function buildTooltipText(aggregate, servers) {
     if (aggregate === 'none')
-        return MCP_STATUS_LABELS.none;
+        return 'No MCP Server defined';
     const lines = [MCP_STATUS_LABELS[aggregate]];
     for (const s of servers) {
         let detail = `• ${s.id}: ${s.status}`;
@@ -79,29 +68,15 @@ function useInjectKeyframes() {
     }, []);
 }
 /* ── Component ─────────────────────────────────────────── */
-export function McpStatusIndicator({ apiBase, authToken, }) {
+export function McpStatusIndicator({ data: wsData, apiBase, authToken, }) {
     useInjectKeyframes();
-    const { data } = useQuery({
-        queryKey: ['mcp-toolsets-status', apiBase],
-        queryFn: async () => {
-            const base = getApiBase(apiBase);
-            const headers = {};
-            if (authToken) {
-                headers['Authorization'] = `Bearer ${authToken}`;
-            }
-            const response = await fetch(`${base}/api/v1/configure/mcp-toolsets-status`, { headers });
-            if (!response.ok)
-                throw new Error('Failed to fetch MCP status');
-            return response.json();
-        },
-        refetchInterval: 5000,
-    });
-    const servers = data?.servers ?? [];
+    // REST polling removed — data comes exclusively via WS `agent.snapshot`.
+    const effectiveData = wsData;
+    const servers = effectiveData?.servers ?? [];
     const aggregate = useMemo(() => deriveAggregate(servers), [servers]);
     const tooltipText = useMemo(() => buildTooltipText(aggregate, servers), [aggregate, servers]);
-    // Hide when no servers are configured at all.
-    if (aggregate === 'none')
-        return null;
+    // Show a subtle gray dot when no MCP servers are configured.
+    // The tooltip tells the user none are defined.
     return (_jsx(Tooltip, { text: tooltipText, direction: "n", children: _jsx("button", { type: "button", "aria-label": tooltipText, style: {
                 display: 'inline-flex',
                 alignItems: 'center',

package/lib/chat/indicators/SandboxStatusIndicator.d.ts

@@ -1,3 +1,4 @@
+import type { SandboxWsStatus } from '../../types/sandbox';
 export interface SandboxStatusIndicatorProps {
     /** API base URL (e.g. "http://127.0.0.1:8765"). */
     apiBase?: string;
@@ -5,6 +6,8 @@ export interface SandboxStatusIndicatorProps {
     authToken?: string;
     /** Agent ID to scope sandbox status to a specific agent. */
     agentId?: string;
+    /** Optional status override to update indicator immediately from parent UI. */
+    statusOverride?: SandboxWsStatus | null;
 }
-export declare function SandboxStatusIndicator({ apiBase, authToken, agentId, }: SandboxStatusIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SandboxStatusIndicator({ apiBase, authToken, agentId, statusOverride, }: SandboxStatusIndicatorProps): import("react/jsx-runtime").JSX.Element;
 export default SandboxStatusIndicator;

package/lib/chat/indicators/SandboxStatusIndicator.js

@@ -81,7 +81,7 @@ function useInjectKeyframes() {
     }, []);
 }
 /* ── Component ─────────────────────────────────────────── */
-export function SandboxStatusIndicator({ apiBase, authToken, agentId, }) {
+export function SandboxStatusIndicator({ apiBase, authToken, agentId, statusOverride, }) {
     useInjectKeyframes();
     const [status, setStatus] = useState(null);
     const wsRef = useRef(null);
@@ -138,17 +138,17 @@ export function SandboxStatusIndicator({ apiBase, authToken, agentId, }) {
         }
     }, []);
     // ---- Derived display values ----
-    const aggregate = useMemo(() => deriveAggregate(status), [status]);
+    const effectiveStatus = statusOverride ?? status;
+    const aggregate = useMemo(() => deriveAggregate(effectiveStatus), [effectiveStatus]);
     const tooltipText = useMemo(() => {
-        if (!status)
-            return SANDBOX_STATUS_LABELS.unavailable;
+        if (!effectiveStatus)
+            return 'No Sandbox defined';
         const label = SANDBOX_STATUS_LABELS[aggregate];
-        const variant = status.variant;
+        const variant = effectiveStatus.variant;
         return `${label} (${variant})`;
-    }, [aggregate, status]);
-    // Hide when sandbox is not available at all.
-    if (aggregate === 'unavailable')
-        return null;
+    }, [aggregate, effectiveStatus]);
+    // Show a subtle gray dot when sandbox is unavailable.
+    // The tooltip tells the user none is configured.
     return (_jsx(Tooltip, { text: tooltipText, direction: "n", children: _jsx("button", { type: "button", "aria-label": tooltipText, onClick: aggregate === 'executing' ? sendInterrupt : undefined, style: {
                 display: 'inline-flex',
                 alignItems: 'center',

package/lib/chat/indicators/SkillsStatusIndicator.d.ts

@@ -0,0 +1,7 @@
+export interface SkillsStatusIndicatorProps {
+    skillsCount: number;
+    enabledCount: number;
+    loading?: boolean;
+}
+export declare function SkillsStatusIndicator({ skillsCount, enabledCount, loading, }: SkillsStatusIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export default SkillsStatusIndicator;

package/lib/chat/indicators/SkillsStatusIndicator.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * SkillsStatusIndicator — Round status dot representing skill state.
+ *
+ * Aggregate logic:
+ * - no skills configured -> none (gray)
+ * - skills loading       -> loading (amber, pulsing)
+ * - some enabled         -> active (green)
+ * - none enabled         -> inactive (gray)
+ */
+import { useEffect, useMemo } from 'react';
+import { Tooltip } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+const SKILLS_STATUS_COLORS = {
+    none: '#8b949e',
+    loading: '#d29922',
+    inactive: '#8b949e',
+    active: '#3fb950',
+};
+const SKILLS_PULSE_KEYFRAMES = `
+@keyframes skills-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+`;
+function useInjectKeyframes() {
+    useEffect(() => {
+        const id = '__skills-pulse-keyframes__';
+        if (document.getElementById(id))
+            return;
+        const style = document.createElement('style');
+        style.id = id;
+        style.textContent = SKILLS_PULSE_KEYFRAMES;
+        document.head.appendChild(style);
+    }, []);
+}
+function deriveAggregate(skillsCount, enabledCount, loading) {
+    if (skillsCount <= 0)
+        return 'none';
+    if (loading)
+        return 'loading';
+    if (enabledCount > 0)
+        return 'active';
+    return 'inactive';
+}
+function buildTooltip(aggregate, skillsCount, enabledCount) {
+    if (aggregate === 'none')
+        return 'No Skills defined';
+    if (aggregate === 'loading') {
+        return `Skills loading (${enabledCount}/${skillsCount} enabled)`;
+    }
+    if (aggregate === 'active') {
+        return `Skills active (${enabledCount}/${skillsCount} enabled)`;
+    }
+    return `Skills available (${enabledCount}/${skillsCount} enabled)`;
+}
+export function SkillsStatusIndicator({ skillsCount, enabledCount, loading = false, }) {
+    useInjectKeyframes();
+    const aggregate = useMemo(() => deriveAggregate(skillsCount, enabledCount, loading), [skillsCount, enabledCount, loading]);
+    const tooltipText = useMemo(() => buildTooltip(aggregate, skillsCount, enabledCount), [aggregate, skillsCount, enabledCount]);
+    return (_jsx(Tooltip, { text: tooltipText, direction: "n", children: _jsx("button", { type: "button", "aria-label": tooltipText, style: {
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 28,
+                height: 28,
+                padding: 0,
+                border: 'none',
+                background: 'none',
+                cursor: 'default',
+                lineHeight: 0,
+            }, children: _jsx(Box, { as: "span", sx: {
+                    display: 'inline-block',
+                    width: 12,
+                    height: 12,
+                    borderRadius: '50%',
+                    bg: SKILLS_STATUS_COLORS[aggregate],
+                    flexShrink: 0,
+                    ...(aggregate === 'loading' && {
+                        animation: 'skills-pulse 1.5s ease-in-out infinite',
+                    }),
+                } }) }) }));
+}
+export default SkillsStatusIndicator;

package/lib/chat/indicators/index.d.ts

@@ -15,3 +15,4 @@ export { McpStatusIndicator, type McpStatusIndicatorProps, } from './McpStatusIn
 export type { McpServerStatus, McpAggregateStatus } from '../../types/mcp';
 export { SandboxStatusIndicator, type SandboxStatusIndicatorProps, } from './SandboxStatusIndicator';
 export type { SandboxAggregateStatus, SandboxWsStatus, } from '../../types/sandbox';
+export { SkillsStatusIndicator, type SkillsStatusIndicatorProps, } from './SkillsStatusIndicator';

package/lib/chat/indicators/index.js

@@ -17,3 +17,4 @@
  */
 export { McpStatusIndicator, } from './McpStatusIndicator';
 export { SandboxStatusIndicator, } from './SandboxStatusIndicator';
+export { SkillsStatusIndicator, } from './SkillsStatusIndicator';

package/lib/chat/messages/ChatMessageList.d.ts

@@ -7,7 +7,7 @@
 import { type ReactNode, type RefObject } from 'react';
 import type { DisplayItem, AvatarConfig, RenderToolResult } from '../../types/chat';
 export interface ToolApprovalConfig {
-    /** Base API URL for the agent runtime (e.g., http://localhost:8765/api/v1) */
+    /** Base API URL for the agent runtime (e.g., `http://localhost:8765/api/v1`). */
     apiBaseUrl: string;
     /** Auth token for API calls */
     authToken?: string;

package/lib/chat/messages/ChatMessageList.js

@@ -9,138 +9,133 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *
  * @module chat/messages/MessageList
  */
-import { useState, useEffect, useCallback, } from 'react';
+import { useState, useCallback, useMemo, } from 'react';
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { Streamdown } from 'streamdown';
 import { streamdownMarkdownStyles, streamdownCodeBlockStyles, } from '../styles/streamdownStyles';
 import { ToolCallDisplay } from '../tools/ToolCallDisplay';
 import { isToolCallMessage, getMessageText } from '../../utils';
+import { useAgentRuntimeStore } from '../../stores/agentRuntimeStore';
 // ---------------------------------------------------------------------------
-// DefaultToolCallRenderer — handles tool approval for a single tool call
+// Normalize helper
 // ---------------------------------------------------------------------------
-function DefaultToolCallRenderer({ item, approvalConfig, onRespond, }) {
+function normalizeName(name) {
+    return name
+        .replace(/:[0-9]+\.[0-9]+\.[0-9]+.*$/, '')
+        .replace(/[-_]/g, '')
+        .toLowerCase();
+}
+// ---------------------------------------------------------------------------
+// DefaultToolCallRenderer — reads approvals from the Zustand store,
+// sends decisions over the shared WebSocket (no REST polling).
+// ---------------------------------------------------------------------------
+function DefaultToolCallRenderer({ item, onRespond, }) {
     const resultObject = item.result && typeof item.result === 'object'
         ? item.result
         : undefined;
     // Detect pending approval from tool result (pydantic-deferred mode)
     const isPendingFromResult = item.status === 'inProgress' && resultObject?.pending_approval === true;
+    // Extract the approval_id carried in the tool result by the adapter.
+    // This is always available when the SSE stream contained a
+    // `tool-approval-request` event, even when the Zustand store has not been
+    // populated (e.g. no monitoring WS open).
+    const resultApprovalId = typeof resultObject?.approval_id === 'string'
+        ? resultObject.approval_id
+        : undefined;
     // In ai-agents-wrapper mode, the server blocks waiting for approval and
     // never sends a tool-result with pending_approval. The tool stays in
-    // 'executing' status. We proactively poll the approval API to detect if
-    // a pending approval record exists for this tool.
+    // 'executing' status.
     const isExecuting = item.status === 'executing';
-    const [matchedApprovalId, setMatchedApprovalId] = useState(null);
     const [decision, setDecision] = useState();
-    const [loading, setLoading] = useState(false);
-    // Should we poll the approval API?
-    const shouldPoll = (isPendingFromResult || isExecuting) &&
-        !!approvalConfig?.apiBaseUrl &&
-        !decision;
-    // Normalize tool name for matching (strip version suffix, dashes/underscores, lowercase)
-    const normalizedToolName = item.toolName
-        .replace(/:[0-9]+\.[0-9]+\.[0-9]+.*$/, '')
-        .replace(/[-_]/g, '')
-        .toLowerCase();
-    // Poll for matching approval record when tool is executing or pending approval
-    useEffect(() => {
-        if (!shouldPoll || !approvalConfig?.apiBaseUrl)
+    const normalizedToolName = useMemo(() => normalizeName(item.toolName), [item.toolName]);
+    // Skill tools (`run_skill_script`, `load_skill`, `read_skill_resource`) are
+    // gated by the server under a synthetic approval ``tool_name`` of the form
+    // ``skill:<skill_id>`` (see ``SkillsGuardrailCapability._request_skill_approval``).
+    // Capture the skill id carried in the tool-call arguments so we can match
+    // the inline approval button against that synthetic approval entry.
+    const skillApprovalKey = useMemo(() => {
+        const SKILL_TOOLS = new Set([
+            'run_skill_script',
+            'load_skill',
+            'read_skill_resource',
+        ]);
+        if (!SKILL_TOOLS.has(item.toolName))
+            return null;
+        const a = (item.args ?? {});
+        const raw = a.skill_name ?? a.skill ?? a.name;
+        if (typeof raw !== 'string' || raw.length === 0)
+            return null;
+        // Strip optional ``<name>:<version>`` suffix to the base skill id.
+        const base = raw.split(':', 1)[0] || raw;
+        return `skill:${base}`.toLowerCase();
+    }, [item.toolName, item.args]);
+    // Read pending approvals from the Zustand store (fed by the agent-runtime WS).
+    const approvals = useAgentRuntimeStore(s => s.approvals);
+    // Prefer an exact match by approval id (when present in SSE tool result).
+    const matchedByResultId = useMemo(() => {
+        if (!resultApprovalId)
+            return null;
+        return approvals.find(a => a.id === resultApprovalId) ?? null;
+    }, [approvals, resultApprovalId]);
+    // Match the synthetic ``skill:<id>`` approval for skill tool calls.  This
+    // runs whenever the tool call is a skill tool so the inline Approve/Deny
+    // buttons surface even when the server is blocked in
+    // ``ToolApprovalManager.request_and_wait`` (status stays ``executing`` and
+    // no ``pending_approval=True`` result is ever emitted).
+    const matchedBySkill = useMemo(() => {
+        if (!skillApprovalKey)
+            return null;
+        return (approvals.find(a => a.tool_name?.toLowerCase() === skillApprovalKey) ??
+            null);
+    }, [approvals, skillApprovalKey]);
+    // Fallback to matching by tool name for inline approval flows that don't
+    // always provide approval_id in the tool result payload.
+    const matchedByName = useMemo(() => {
+        if (!isPendingFromResult && !isExecuting)
+            return null;
+        return (approvals.find(a => normalizeName(a.tool_name) === normalizedToolName) ??
+            null);
+    }, [approvals, normalizedToolName, isPendingFromResult, isExecuting]);
+    const matchedApproval = matchedByResultId ?? matchedBySkill ?? matchedByName;
+    // Prefer the store-matched approval id, fall back to the id from the tool
+    // result (SSE path). This ensures the approve/deny buttons work even when
+    // the monitoring WS is not connected.
+    const effectiveApprovalId = matchedApproval?.id ?? resultApprovalId ?? null;
+    // Reflect approval decisions that happened outside this card (e.g. sidebar).
+    const externalDecision = matchedApproval?.status === 'approved'
+        ? 'approved'
+        : matchedApproval?.status === 'rejected'
+            ? 'denied'
+            : undefined;
+    const makeDecision = useCallback((action) => {
+        if (!effectiveApprovalId)
             return;
-        let cancelled = false;
-        const poll = async () => {
-            try {
-                const headers = {
-                    'Content-Type': 'application/json',
-                };
-                if (approvalConfig.authToken) {
-                    headers['Authorization'] = `Bearer ${approvalConfig.authToken}`;
-                }
-                const res = await fetch(`${approvalConfig.apiBaseUrl}/tool-approvals?status=pending`, { headers });
-                if (!res.ok || cancelled)
-                    return;
-                const data = await res.json();
-                const approvals = Array.isArray(data)
-                    ? data
-                    : (data.approvals ??
-                        data.requests ??
-                        []);
-                // Match by normalized tool name
-                const match = approvals.find(a => {
-                    const aNormalized = String(a.tool_name || '')
-                        .replace(/:[0-9]+\.[0-9]+\.[0-9]+.*$/, '')
-                        .replace(/[-_]/g, '')
-                        .toLowerCase();
-                    return aNormalized === normalizedToolName && a.status === 'pending';
-                });
-                if (match && !cancelled) {
-                    setMatchedApprovalId(match.id);
-                }
-            }
-            catch {
-                // Retry on next interval
-            }
-        };
-        poll();
-        const interval = setInterval(poll, 3000);
-        return () => {
-            cancelled = true;
-            clearInterval(interval);
-        };
-    }, [
-        shouldPoll,
-        approvalConfig?.apiBaseUrl,
-        approvalConfig?.authToken,
-        normalizedToolName,
-    ]);
-    const makeDecision = useCallback(async (action) => {
-        if (!matchedApprovalId || !approvalConfig?.apiBaseUrl)
-            return;
-        setLoading(true);
-        try {
-            const headers = {
-                'Content-Type': 'application/json',
-            };
-            if (approvalConfig.authToken) {
-                headers['Authorization'] = `Bearer ${approvalConfig.authToken}`;
-            }
-            const res = await fetch(`${approvalConfig.apiBaseUrl}/tool-approvals/${matchedApprovalId}/${action}`, {
-                method: 'POST',
-                headers,
-                body: JSON.stringify({}),
-            });
-            if (res.ok) {
-                setDecision(action === 'approve' ? 'approved' : 'denied');
-                onRespond({
-                    type: 'tool-approval-decision',
-                    approved: action === 'approve',
-                    approvalId: matchedApprovalId,
-                    toolName: item.toolName,
-                });
-            }
-        }
-        catch {
-            // Allow retry
-        }
-        finally {
-            setLoading(false);
-        }
-    }, [
-        matchedApprovalId,
-        approvalConfig?.apiBaseUrl,
-        approvalConfig?.authToken,
-        onRespond,
-        item.toolCallId,
-        item.toolName,
-    ]);
+        const approved = action === 'approve';
+        // Use ONLY the adapter continuation path (SSE/POST). Sending both WS and
+        // continuation decisions can trigger duplicate approval cycles.
+        setDecision(approved ? 'approved' : 'denied');
+        onRespond({
+            type: 'tool-approval-decision',
+            approved,
+            approvalId: effectiveApprovalId,
+            toolName: item.toolName,
+        });
+    }, [effectiveApprovalId, onRespond, item.toolName]);
     // Show approval UI when we have a confirmed pending approval (from result
-    // or discovered via polling) or after a decision has been made.
-    const hasApproval = isPendingFromResult || !!matchedApprovalId;
-    const approvalState = decision || (hasApproval ? 'pending' : undefined);
-    return (_jsx(ToolCallDisplay, { toolCallId: item.toolCallId, toolName: item.toolName, args: item.args, result: item.result, status: item.status, error: item.error, executionError: item.executionError, codeError: item.codeError, exitCode: item.exitCode, approvalRequired: hasApproval, approvalState: approvalState, onApprove: matchedApprovalId && !decision
-            ? () => void makeDecision('approve')
-            : undefined, onDeny: matchedApprovalId && !decision
-            ? () => void makeDecision('reject')
-            : undefined, approvalLoading: loading }));
+    // or discovered via the store) or after a decision has been made.
+    const hasApproval = isPendingFromResult || !!effectiveApprovalId || !!externalDecision;
+    const approvalState = decision || externalDecision || (hasApproval ? 'pending' : undefined);
+    const approvalDecisionSource = decision
+        ? 'inline'
+        : externalDecision
+            ? 'external'
+            : undefined;
+    return (_jsx(ToolCallDisplay, { toolCallId: item.toolCallId, toolName: item.toolName, args: item.args, result: item.result, status: item.status, error: item.error, executionError: item.executionError, codeError: item.codeError, exitCode: item.exitCode, approvalRequired: hasApproval, approvalState: approvalState, approvalDecisionSource: approvalDecisionSource, onApprove: effectiveApprovalId && !decision && !externalDecision
+            ? () => makeDecision('approve')
+            : undefined, onDeny: effectiveApprovalId && !decision && !externalDecision
+            ? () => makeDecision('reject')
+            : undefined, approvalLoading: false }));
 }
 // ---------------------------------------------------------------------------
 // Component