@datalayer/agent-runtimes 1.0.4 → 1.0.5

package/lib/hooks/useContextSnapshot.js

@@ -2,43 +2,15 @@
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useContext } from 'react';
-import { useQuery, QueryClientContext } from '@tanstack/react-query';
-import { getApiBaseFromConfig } from '../utils';
 /**
- * Hook to poll agent context-snapshot from the backend.
- * Returns cumulative token usage (input/output breakdown) tracked by the agent server.
+ * Hook that previously polled agent context-snapshot from the backend.
+ *
+ * The REST endpoint has been removed — context snapshot data is now
+ * delivered via the WebSocket stream (`agent.snapshot` messages).
+ * This hook is kept as a no-op so existing call-sites compile without
+ * changes; the token-usage bar simply stays hidden until a WS-based
+ * replacement is wired in.
  */
-export function useContextSnapshot(enabled, configEndpoint, agentId, authToken) {
-    const queryClient = useContext(QueryClientContext);
-    if (!queryClient) {
-        return { data: undefined, isLoading: false, isError: false, error: null };
-    }
-    const snapshotUrl = configEndpoint && agentId
-        ? `${getApiBaseFromConfig(configEndpoint)}/configure/agents/${encodeURIComponent(agentId)}/context-snapshot`
-        : undefined;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return useQuery({
-        queryKey: ['context-snapshot-header', agentId, snapshotUrl],
-        queryFn: async () => {
-            if (!snapshotUrl) {
-                throw new Error('No context-snapshot URL available');
-            }
-            const headers = { 'Content-Type': 'application/json' };
-            if (authToken) {
-                headers['Authorization'] = `Bearer ${authToken}`;
-            }
-            const response = await fetch(snapshotUrl, { headers });
-            if (!response.ok) {
-                throw new Error(`Context snapshot fetch failed: ${response.statusText}`);
-            }
-            return response.json();
-        },
-        enabled: enabled && !!snapshotUrl,
-        // Poll every 10s, but stop after an error (e.g. runtime terminated).
-        refetchInterval: query => (query.state.status === 'error' ? false : 10_000),
-        refetchOnMount: 'always',
-        staleTime: 0,
-        retry: 1,
-    });
+export function useContextSnapshot(_enabled, _configEndpoint, _agentId, _authToken) {
+    return { data: undefined, isLoading: false, isError: false, error: null };
 }

package/lib/hooks/useMonitoring.js

@@ -25,6 +25,9 @@ export function toMetricValue(row) {
     return 0;
 }
 export async function fetchOtelMetricRows({ metric, serviceName, runUrl, apiKey, limit = 500, }) {
+    if (!runUrl || !apiKey) {
+        return [];
+    }
     const client = createOtelClient({
         baseUrl: runUrl,
         token: apiKey,

package/lib/hooks/useSandbox.d.ts

@@ -1,12 +1,24 @@
 import type { SandboxStatusData } from '../types/context';
 /**
- * Hook to poll sandbox execution status from the backend.
- * Returns whether a sandbox is available and if code is currently executing.
+ * Subscribe to the sandbox execution status via the
+ * `/api/v1/configure/sandbox/ws` WebSocket.
+ *
+ * This hook replaces the previous REST-polling implementation — the server
+ * now pushes status updates in real time and accepts interrupt requests over
+ * the same connection.
+ *
+ * @param enabled         Whether to open the WebSocket connection.
+ * @param configEndpoint  Base `configEndpoint` used by other chat hooks
+ *                        (e.g. `http://localhost:8765/api/v1/configure/config`).
+ * @param authToken       Optional bearer token (passed as `?token=` query param
+ *                        because browsers cannot set headers on WebSocket).
+ * @param agentId         Optional agent id; the backend returns an
+ *                        agent-scoped status when provided.
+ * @returns `{ data, interrupt }` where `data` is the latest status (or
+ *          `undefined` until the first message) and `interrupt()` sends an
+ *          `{ action: 'interrupt' }` message over the same WebSocket.
  */
-export declare function useSandbox(enabled: boolean, configEndpoint?: string, authToken?: string): import("@tanstack/query-core").QueryObserverRefetchErrorResult<SandboxStatusData, Error> | import("@tanstack/query-core").QueryObserverSuccessResult<SandboxStatusData, Error> | import("@tanstack/query-core").QueryObserverLoadingErrorResult<SandboxStatusData, Error> | import("@tanstack/query-core").QueryObserverPendingResult<SandboxStatusData, Error> | import("@tanstack/query-core").QueryObserverPlaceholderResult<SandboxStatusData, Error> | {
-    data: undefined;
-    isLoading: boolean;
-    isError: boolean;
-    error: null;
-    refetch: () => Promise<any>;
+export declare function useSandbox(enabled: boolean, configEndpoint?: string, authToken?: string, agentId?: string): {
+    data: SandboxStatusData | undefined;
+    interrupt: () => void;
 };

package/lib/hooks/useSandbox.js

@@ -2,48 +2,113 @@
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useContext } from 'react';
-import { useQuery, QueryClientContext } from '@tanstack/react-query';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { getApiBaseFromConfig } from '../utils';
+const RECONNECT_BASE_MS = 1000;
+const RECONNECT_MAX_MS = 30000;
+function isRetryableCloseCode(code) {
+    // Avoid reconnect loops for policy/auth/protocol closures.
+    const nonRetryable = new Set([1002, 1003, 1007, 1008, 4401, 4403]);
+    return !nonRetryable.has(code);
+}
 /**
- * Hook to poll sandbox execution status from the backend.
- * Returns whether a sandbox is available and if code is currently executing.
+ * Subscribe to the sandbox execution status via the
+ * `/api/v1/configure/sandbox/ws` WebSocket.
+ *
+ * This hook replaces the previous REST-polling implementation — the server
+ * now pushes status updates in real time and accepts interrupt requests over
+ * the same connection.
+ *
+ * @param enabled         Whether to open the WebSocket connection.
+ * @param configEndpoint  Base `configEndpoint` used by other chat hooks
+ *                        (e.g. `http://localhost:8765/api/v1/configure/config`).
+ * @param authToken       Optional bearer token (passed as `?token=` query param
+ *                        because browsers cannot set headers on WebSocket).
+ * @param agentId         Optional agent id; the backend returns an
+ *                        agent-scoped status when provided.
+ * @returns `{ data, interrupt }` where `data` is the latest status (or
+ *          `undefined` until the first message) and `interrupt()` sends an
+ *          `{ action: 'interrupt' }` message over the same WebSocket.
  */
-export function useSandbox(enabled, configEndpoint, authToken) {
-    const queryClient = useContext(QueryClientContext);
-    if (!queryClient) {
-        return {
-            data: undefined,
-            isLoading: false,
-            isError: false,
-            error: null,
-            refetch: () => Promise.resolve({}),
+export function useSandbox(enabled, configEndpoint, authToken, agentId) {
+    const [data, setData] = useState(undefined);
+    const wsRef = useRef(null);
+    useEffect(() => {
+        if (!enabled || !configEndpoint) {
+            setData(undefined);
+            return;
+        }
+        const apiBase = getApiBaseFromConfig(configEndpoint);
+        if (!apiBase)
+            return;
+        const wsBase = apiBase.replace(/^http/, 'ws');
+        const params = [];
+        if (agentId) {
+            params.push(`agent_id=${encodeURIComponent(agentId)}`);
+        }
+        if (authToken) {
+            // WebSocket API cannot set custom headers — pass token via query param.
+            params.push(`token=${encodeURIComponent(authToken)}`);
+        }
+        const url = `${wsBase}/configure/sandbox/ws${params.length ? `?${params.join('&')}` : ''}`;
+        let disposed = false;
+        let reconnectTimer;
+        let reconnectAttempts = 0;
+        const scheduleReconnect = (code) => {
+            if (disposed || !isRetryableCloseCode(code))
+                return;
+            const delay = Math.min(RECONNECT_BASE_MS * 2 ** reconnectAttempts, RECONNECT_MAX_MS);
+            reconnectAttempts += 1;
+            reconnectTimer = setTimeout(connect, delay);
+        };
+        const connect = () => {
+            if (disposed)
+                return;
+            const ws = new WebSocket(url);
+            wsRef.current = ws;
+            ws.onopen = () => {
+                reconnectAttempts = 0;
+            };
+            ws.onmessage = event => {
+                try {
+                    const msg = JSON.parse(event.data);
+                    if (msg && msg.action === 'interrupt')
+                        return;
+                    const variant = typeof msg?.variant === 'string' ? msg.variant : '';
+                    setData({
+                        available: variant !== 'unavailable' && variant !== 'error',
+                        sandbox_running: Boolean(msg?.sandbox_running),
+                        is_executing: Boolean(msg?.is_executing),
+                        variant,
+                    });
+                }
+                catch {
+                    // Ignore malformed messages.
+                }
+            };
+            ws.onclose = event => {
+                wsRef.current = null;
+                scheduleReconnect(event.code);
+            };
+            ws.onerror = () => {
+                ws.close();
+            };
+        };
+        connect();
+        return () => {
+            disposed = true;
+            if (reconnectTimer)
+                clearTimeout(reconnectTimer);
+            wsRef.current?.close();
+            wsRef.current = null;
+            setData(undefined);
         };
-    }
-    const statusUrl = configEndpoint
-        ? `${getApiBaseFromConfig(configEndpoint)}/configure/sandbox-status`
-        : undefined;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return useQuery({
-        queryKey: ['sandbox-status', statusUrl],
-        queryFn: async () => {
-            if (!statusUrl) {
-                throw new Error('No sandbox status URL available');
-            }
-            const headers = { 'Content-Type': 'application/json' };
-            if (authToken) {
-                headers['Authorization'] = `Bearer ${authToken}`;
-            }
-            const response = await fetch(statusUrl, { headers });
-            if (!response.ok) {
-                throw new Error(`Sandbox status fetch failed: ${response.statusText}`);
-            }
-            return response.json();
-        },
-        enabled: enabled && !!statusUrl,
-        refetchInterval: query => (query.state.status === 'error' ? false : 2_000),
-        refetchOnMount: 'always',
-        staleTime: 0,
-        retry: 1,
-    });
+    }, [enabled, configEndpoint, authToken, agentId]);
+    const interrupt = useCallback(() => {
+        const ws = wsRef.current;
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ action: 'interrupt' }));
+        }
+    }, []);
+    return { data, interrupt };
 }

package/lib/hooks/useSkills.d.ts

@@ -1,13 +1,31 @@
-import type { SkillsResponse } from '../types/skills';
+import type { SkillInfo } from '../types/skills';
 /**
- * Hook to fetch available skills from backend.
+ * Derive the list of skills from the WS-pushed `codemodeStatus`.
+ *
+ * The server-side SkillsArea pushes per-skill status (`available`,
+ * `enabled`, `loaded`) via the monitoring WebSocket inside the
+ * `codemodeStatus.skills` array.  This hook reads from the Zustand
+ * store — no REST call is made.
  */
-export declare function useSkills(enabled: boolean, baseEndpoint?: string, authToken?: string): import("@tanstack/query-core").QueryObserverRefetchErrorResult<SkillsResponse, Error> | import("@tanstack/query-core").QueryObserverSuccessResult<SkillsResponse, Error> | import("@tanstack/query-core").QueryObserverLoadingErrorResult<SkillsResponse, Error> | import("@tanstack/query-core").QueryObserverPendingResult<SkillsResponse, Error> | import("@tanstack/query-core").QueryObserverPlaceholderResult<SkillsResponse, Error> | {
-    data: undefined;
+export declare function useSkills(_enabled: boolean, _baseEndpoint?: string, _authToken?: string): {
+    data: {
+        skills: SkillInfo[];
+        total: number;
+    } | undefined;
     isLoading: boolean;
     isError: boolean;
     error: null;
     refetch: () => Promise<{
-        data: undefined;
+        data: {
+            skills: SkillInfo[];
+            total: number;
+        } | undefined;
     }>;
 };
+export declare function useSkillActions(agentId?: string): {
+    enableSkill: (skillId: string) => boolean;
+    disableSkill: (skillId: string) => boolean;
+    approveSkill: (skillId: string) => boolean;
+    unapproveSkill: (skillId: string) => boolean;
+};
+export { useAgentRuntimeLoadedSkills } from '../stores';

package/lib/hooks/useSkills.js

@@ -2,45 +2,100 @@
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useContext } from 'react';
-import { useQuery, QueryClientContext } from '@tanstack/react-query';
+import { useCallback, useMemo } from 'react';
+import { agentRuntimeStore, useAgentRuntimeCodemodeStatus } from '../stores';
+function parseSkillStatus(value) {
+    if (value === 'available' || value === 'enabled' || value === 'loaded') {
+        return value;
+    }
+    return 'available';
+}
+// ---------------------------------------------------------------------------
+// Skills from WS snapshot
+// ---------------------------------------------------------------------------
 /**
- * Hook to fetch available skills from backend.
+ * Derive the list of skills from the WS-pushed `codemodeStatus`.
+ *
+ * The server-side SkillsArea pushes per-skill status (`available`,
+ * `enabled`, `loaded`) via the monitoring WebSocket inside the
+ * `codemodeStatus.skills` array.  This hook reads from the Zustand
+ * store — no REST call is made.
  */
-export function useSkills(enabled, baseEndpoint, authToken) {
-    const queryClient = useContext(QueryClientContext);
-    if (!queryClient) {
-        return {
-            data: undefined,
-            isLoading: false,
-            isError: false,
-            error: null,
-            refetch: () => Promise.resolve({ data: undefined }),
-        };
-    }
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return useQuery({
-        queryFn: async () => {
-            if (!baseEndpoint) {
-                return { skills: [], total: 0 };
-            }
-            // Derive skills endpoint from config endpoint.
-            const skillsEndpoint = baseEndpoint.replace('/configure', '/skills');
-            const headers = {
-                'Content-Type': 'application/json',
-            };
-            if (authToken) {
-                headers['Authorization'] = `Bearer ${authToken}`;
-            }
-            const response = await fetch(skillsEndpoint, { headers });
-            if (!response.ok) {
-                throw new Error(`Skills fetch failed: ${response.statusText}`);
-            }
-            return response.json();
-        },
-        queryKey: ['skills', baseEndpoint || 'jupyter'],
-        enabled,
-        staleTime: 5 * 60 * 1000,
-        retry: 1,
-    });
+export function useSkills(_enabled, _baseEndpoint, _authToken) {
+    const codemodeStatus = useAgentRuntimeCodemodeStatus();
+    const data = useMemo(() => {
+        if (!codemodeStatus) {
+            return undefined;
+        }
+        const skills = (codemodeStatus.skills ?? []).map(s => ({
+            id: s.id ?? s.name,
+            name: s.name,
+            description: s.description,
+            tags: s.tags,
+            has_scripts: s.has_scripts,
+            has_resources: s.has_resources,
+            status: parseSkillStatus(s.status),
+            approved: s.approved !== false,
+            skill_definition: s.skill_definition ?? null,
+            source_variant: s.source_variant,
+            module: s.module,
+            package: s.package,
+            method: s.method,
+            path: s.path,
+        }));
+        return { skills, total: skills.length };
+    }, [codemodeStatus]);
+    return {
+        data,
+        isLoading: false,
+        isError: false,
+        error: null,
+        refetch: () => Promise.resolve({ data }),
+    };
+}
+// ---------------------------------------------------------------------------
+// Skill enable / disable via WebSocket
+// ---------------------------------------------------------------------------
+export function useSkillActions(agentId) {
+    const enableSkill = useCallback((skillId) => {
+        const ok = agentRuntimeStore
+            .getState()
+            .sendRawMessage({ type: 'skill_enable', skillId }, agentId);
+        if (!ok) {
+            console.warn('[useSkillActions] skill_enable dropped: websocket not ready');
+        }
+        return ok;
+    }, [agentId]);
+    const disableSkill = useCallback((skillId) => {
+        const ok = agentRuntimeStore
+            .getState()
+            .sendRawMessage({ type: 'skill_disable', skillId }, agentId);
+        if (!ok) {
+            console.warn('[useSkillActions] skill_disable dropped: websocket not ready');
+        }
+        return ok;
+    }, [agentId]);
+    const approveSkill = useCallback((skillId) => {
+        const ok = agentRuntimeStore
+            .getState()
+            .sendRawMessage({ type: 'skill_approve', skillId }, agentId);
+        if (!ok) {
+            console.warn('[useSkillActions] skill_approve dropped: websocket not ready');
+        }
+        return ok;
+    }, [agentId]);
+    const unapproveSkill = useCallback((skillId) => {
+        const ok = agentRuntimeStore
+            .getState()
+            .sendRawMessage({ type: 'skill_unapprove', skillId }, agentId);
+        if (!ok) {
+            console.warn('[useSkillActions] skill_unapprove dropped: websocket not ready');
+        }
+        return ok;
+    }, [agentId]);
+    return { enableSkill, disableSkill, approveSkill, unapproveSkill };
 }
+// ---------------------------------------------------------------------------
+// Loaded skills (kept for backward compat with AgentSkillsExample sidebar)
+// ---------------------------------------------------------------------------
+export { useAgentRuntimeLoadedSkills } from '../stores';

package/lib/hooks/useToolApprovals.d.ts

@@ -1,45 +1,69 @@
 import type { ToolApprovalFilters } from '../types/tool-approvals';
-export declare function useToolApprovalsQuery(filters?: ToolApprovalFilters): import("@tanstack/react-query").UseQueryResult<import("../types").ToolApproval[], Error>;
+/**
+ * Normalised approval record. Both snake_case (server-native) and
+ * camelCase (TypeScript-idiomatic) keys are present so existing UI
+ * consumers keep working regardless of which naming they read.
+ */
+export type ApprovalRecord = {
+    id: string;
+    agent_id: string;
+    agentId: string;
+    pod_name: string;
+    podName: string;
+    tool_name: string;
+    toolName: string;
+    tool_call_id?: string;
+    toolCallId?: string;
+    tool_args: Record<string, unknown>;
+    toolArgs: Record<string, unknown>;
+    status: string;
+    note?: string | null;
+    created_at: string;
+    createdAt: string;
+    updated_at?: string;
+    updatedAt?: string;
+    read?: boolean;
+};
+interface ApprovalsQueryData {
+    approvals: ApprovalRecord[];
+    total: number;
+}
+interface MutationResult {
+    isPending: boolean;
+    mutate: (vars: {
+        id: string;
+        note?: string;
+    }) => void;
+    mutateAsync: (vars: {
+        id: string;
+        note?: string;
+    }) => Promise<void>;
+}
+export declare function useToolApprovalsQuery(filters?: ToolApprovalFilters): import("@tanstack/react-query").UseQueryResult<ApprovalsQueryData, Error>;
 export declare function usePendingApprovalCount(): import("@tanstack/react-query").UseQueryResult<{
     count: number;
 }, Error>;
-export declare function useApproveToolRequest(): import("@tanstack/react-query").UseMutationResult<void, Error, {
-    id: string;
-    note?: string;
-}, unknown>;
-export declare function useRejectToolRequest(): import("@tanstack/react-query").UseMutationResult<void, Error, {
-    id: string;
-    note?: string;
-}, unknown>;
-export declare function useMarkToolApprovalRead(): import("@tanstack/react-query").UseMutationResult<void, Error, {
-    id: string;
-}, unknown>;
-export declare function useMarkToolApprovalUnread(): import("@tanstack/react-query").UseMutationResult<void, Error, {
-    id: string;
-}, unknown>;
-export declare function useDeleteToolApproval(): import("@tanstack/react-query").UseMutationResult<void, Error, {
-    id: string;
-}, unknown>;
+export declare function useApproveToolRequest(): MutationResult;
+export declare function useRejectToolRequest(): MutationResult;
+export declare function useMarkToolApprovalRead(): MutationResult;
+export declare function useMarkToolApprovalUnread(): MutationResult;
+/**
+ * Delete a tool approval.
+ *
+ * Sends a ``tool_approval_delete`` message over the shared websocket.
+ * The local cache is updated only after the server emits
+ * ``tool_approval_deleted``.
+ */
+export declare function useDeleteToolApproval(): MutationResult;
 export declare function useToolApprovals(filters?: ToolApprovalFilters): {
-    approvalsQuery: import("@tanstack/react-query").UseQueryResult<import("../types").ToolApproval[], Error>;
+    approvalsQuery: import("@tanstack/react-query").UseQueryResult<ApprovalsQueryData, Error>;
     pendingCountQuery: import("@tanstack/react-query").UseQueryResult<{
         count: number;
     }, Error>;
-    approve: import("@tanstack/react-query").UseMutationResult<void, Error, {
-        id: string;
-        note?: string;
-    }, unknown>;
-    reject: import("@tanstack/react-query").UseMutationResult<void, Error, {
-        id: string;
-        note?: string;
-    }, unknown>;
-    markRead: import("@tanstack/react-query").UseMutationResult<void, Error, {
-        id: string;
-    }, unknown>;
-    markUnread: import("@tanstack/react-query").UseMutationResult<void, Error, {
-        id: string;
-    }, unknown>;
-    remove: import("@tanstack/react-query").UseMutationResult<void, Error, {
-        id: string;
-    }, unknown>;
+    approve: MutationResult;
+    reject: MutationResult;
+    markRead: MutationResult;
+    markUnread: MutationResult;
+    remove: MutationResult;
 };
+export {};