@robosystems/core 0.6.1 → 0.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robosystems/core",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Shared RoboSystems frontend core library (auth, contexts, task monitoring, UI components) for the RoboSystems Next.js apps",
   "license": "MIT",
   "private": false,

package/ui-components/api-keys/ApiKeysCard.d.ts

@@ -2,5 +2,10 @@ import React from 'react';
 export interface ApiKeysCardProps {
     theme?: any;
     className?: string;
+    /**
+     * When set, the card links MCP users to the app's Connect page (the
+     * ready-made connector-URL flow) — e.g. "/connect" in robosystems-app.
+     */
+    connectHref?: string;
 }
 export declare const ApiKeysCard: React.FC<ApiKeysCardProps>;

package/ui-components/api-keys/ApiKeysCard.js

@@ -2,14 +2,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as SDK from '@robosystems/client';
 import { Button } from 'flowbite-react';
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { HiKey, HiPlusCircle } from 'react-icons/hi';
+import { GraphContext } from '../../contexts';
 import { Spinner } from '../Spinner';
 import { SettingsCard } from '../forms/SettingsCard';
 import { StatusAlert } from '../forms/StatusAlert';
 import { ApiKeyTable } from './ApiKeyTable';
 import { CreateApiKeyModal } from './CreateApiKeyModal';
-export const ApiKeysCard = ({ theme, className = '', }) => {
+export const ApiKeysCard = ({ theme, className = '', connectHref, }) => {
+    var _a;
+    // Read the graph context leniently: outside a GraphProvider the scope
+    // selector simply doesn't render, preserving the card's old standalone
+    // contract instead of throwing.
+    const graphContext = useContext(GraphContext);
+    const availableGraphs = (_a = graphContext === null || graphContext === void 0 ? void 0 : graphContext.state.graphs) !== null && _a !== void 0 ? _a : [];
     const [apiKeys, setApiKeys] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [isOpenCreateModal, setIsOpenCreateModal] = useState(false);
@@ -49,12 +56,13 @@ export const ApiKeysCard = ({ theme, className = '', }) => {
         }
     };
     const handleCreateKey = async (data) => {
-        var _a;
+        var _a, _b;
         // Always use SDK to create key
         const response = await SDK.createUserApiKey({
             body: {
                 name: data.name,
                 description: `API key for ${data.name}`,
+                graph_id: data.graphId,
             },
         });
         await fetchApiKeys(); // Refresh the list
@@ -64,11 +72,12 @@ export const ApiKeysCard = ({ theme, className = '', }) => {
         return {
             id: (apiKeyInfo === null || apiKeyInfo === void 0 ? void 0 : apiKeyInfo.id) || '',
             name: (apiKeyInfo === null || apiKeyInfo === void 0 ? void 0 : apiKeyInfo.name) || data.name,
+            graphId: (_a = apiKeyInfo === null || apiKeyInfo === void 0 ? void 0 : apiKeyInfo.graph_id) !== null && _a !== void 0 ? _a : data.graphId,
             key: (responseData === null || responseData === void 0 ? void 0 : responseData.key) || '', // The actual API key value
             createdAt: (apiKeyInfo === null || apiKeyInfo === void 0 ? void 0 : apiKeyInfo.created_at) || new Date().toISOString(),
             lastUsedAt: (apiKeyInfo === null || apiKeyInfo === void 0 ? void 0 : apiKeyInfo.last_used_at) || null,
             expiresAt: null,
-            isActive: (_a = apiKeyInfo === null || apiKeyInfo === void 0 ? void 0 : apiKeyInfo.is_active) !== null && _a !== void 0 ? _a : true,
+            isActive: (_b = apiKeyInfo === null || apiKeyInfo === void 0 ? void 0 : apiKeyInfo.is_active) !== null && _b !== void 0 ? _b : true,
             isSystem: false,
         };
     };
@@ -93,5 +102,11 @@ export const ApiKeysCard = ({ theme, className = '', }) => {
             day: 'numeric',
         });
     };
-    return (_jsxs(SettingsCard, { title: "API Keys", description: "Manage your API keys for programmatic access", icon: HiKey, theme: theme === null || theme === void 0 ? void 0 : theme.card, className: className, children: [_jsx("div", { className: "mb-4 flex items-center justify-end", children: _jsxs(Button, { theme: theme === null || theme === void 0 ? void 0 : theme.button, color: "blue", onClick: () => setIsOpenCreateModal(true), children: [_jsx(HiPlusCircle, { className: "mr-2 h-5 w-5" }), "Create API Key"] }) }), error && (_jsx(StatusAlert, { type: "error", message: error, theme: theme === null || theme === void 0 ? void 0 : theme.alert })), isLoading ? (_jsx("div", { className: "flex justify-center py-4", children: _jsx(Spinner, { size: "lg" }) })) : !Array.isArray(apiKeys) || apiKeys.length === 0 ? (_jsxs("div", { className: "rounded-lg border border-zinc-200 bg-zinc-50 p-8 text-center dark:border-zinc-700 dark:bg-zinc-800", children: [_jsx(HiKey, { className: "mx-auto mb-3 h-12 w-12 text-zinc-400" }), _jsx("h3", { className: "mb-2 text-lg font-semibold text-zinc-900 dark:text-zinc-100", children: "No API keys yet" }), _jsx("p", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Create an API key to access your graphs programmatically" })] })) : (_jsx(ApiKeyTable, { apiKeys: apiKeys, onRevokeKey: handleRevokeKey, theme: theme, formatDate: formatDate })), _jsx(CreateApiKeyModal, { isOpen: isOpenCreateModal, onClose: () => setIsOpenCreateModal(false), onCreateKey: handleCreateKey, theme: theme })] }));
+    return (_jsxs(SettingsCard, { title: "API Keys", description: "Manage your API keys for programmatic access", icon: HiKey, theme: theme === null || theme === void 0 ? void 0 : theme.card, className: className, children: [_jsx("div", { className: "mb-4 flex items-center justify-end", children: _jsxs(Button, { theme: theme === null || theme === void 0 ? void 0 : theme.button, color: "blue", onClick: () => setIsOpenCreateModal(true), children: [_jsx(HiPlusCircle, { className: "mr-2 h-5 w-5" }), "Create API Key"] }) }), error && (_jsx(StatusAlert, { type: "error", message: error, theme: theme === null || theme === void 0 ? void 0 : theme.alert })), isLoading ? (_jsx("div", { className: "flex justify-center py-4", children: _jsx(Spinner, { size: "lg" }) })) : !Array.isArray(apiKeys) || apiKeys.length === 0 ? (_jsxs("div", { className: "rounded-lg border border-zinc-200 bg-zinc-50 p-8 text-center dark:border-zinc-700 dark:bg-zinc-800", children: [_jsx(HiKey, { className: "mx-auto mb-3 h-12 w-12 text-zinc-400" }), _jsx("h3", { className: "mb-2 text-lg font-semibold text-zinc-900 dark:text-zinc-100", children: "No API keys yet" }), _jsx("p", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Create an API key to access your graphs programmatically" })] })) : (_jsx(ApiKeyTable, { apiKeys: apiKeys, onRevokeKey: handleRevokeKey, theme: theme, formatDate: formatDate })), connectHref && (_jsxs("p", { className: "mt-4 text-sm text-zinc-500 dark:text-zinc-400", children: ["Connecting Claude or another MCP client? Generate a ready-made connector URL from the", ' ', _jsx("a", { href: connectHref, className: "text-primary-600 dark:text-primary-400 font-medium hover:underline", children: "Connect page" }), "."] })), _jsx(CreateApiKeyModal, { isOpen: isOpenCreateModal, onClose: () => setIsOpenCreateModal(false), onCreateKey: handleCreateKey, theme: theme, graphs: availableGraphs.map((g) => {
+                    var _a;
+                    return ({
+                        graphId: g.graphId,
+                        graphName: (_a = g.graphName) !== null && _a !== void 0 ? _a : g.graphId,
+                    });
+                }) })] }));
 };

package/ui-components/api-keys/CreateApiKeyModal.d.ts

@@ -1,11 +1,18 @@
 import React from 'react';
 import type { ApiKeyWithValue } from '../types';
+export interface CreateApiKeyModalGraph {
+    graphId: string;
+    graphName: string;
+}
 export interface CreateApiKeyModalProps {
     isOpen: boolean;
     onClose: () => void;
     onCreateKey: (data: {
         name: string;
+        graphId?: string;
     }) => Promise<ApiKeyWithValue>;
     theme?: any;
+    /** Graphs offered as scope choices; omit to create account-wide keys only */
+    graphs?: CreateApiKeyModalGraph[];
 }
 export declare const CreateApiKeyModal: React.FC<CreateApiKeyModalProps>;

package/ui-components/api-keys/CreateApiKeyModal.js

@@ -1,15 +1,17 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Label, Modal, ModalBody, ModalFooter, ModalHeader, } from 'flowbite-react';
+import { Button, Label, Modal, ModalBody, ModalFooter, ModalHeader, Select, } from 'flowbite-react';
 import { useState } from 'react';
 import { Spinner } from '../Spinner';
 import { SettingsFormField } from '../forms/SettingsFormField';
 import { StatusAlert } from '../forms/StatusAlert';
 import { ApiKeyDisplay } from './ApiKeyDisplay';
-export const CreateApiKeyModal = ({ isOpen, onClose, onCreateKey, theme, }) => {
+export const CreateApiKeyModal = ({ isOpen, onClose, onCreateKey, theme, graphs, }) => {
+    var _a;
     const [isCreating, setIsCreating] = useState(false);
     const [newApiKey, setNewApiKey] = useState(null);
     const [keyName, setKeyName] = useState('');
+    const [scopeGraphId, setScopeGraphId] = useState('');
     const [error, setError] = useState(null);
     const handleSubmit = async (e) => {
         e.preventDefault();
@@ -18,6 +20,7 @@ export const CreateApiKeyModal = ({ isOpen, onClose, onCreateKey, theme, }) => {
         try {
             const result = await onCreateKey({
                 name: keyName,
+                graphId: scopeGraphId || undefined,
             });
             setNewApiKey(result);
         }
@@ -31,6 +34,7 @@ export const CreateApiKeyModal = ({ isOpen, onClose, onCreateKey, theme, }) => {
     const handleCloseModal = () => {
         onClose();
         setKeyName('');
+        setScopeGraphId('');
         setNewApiKey(null);
         setError(null);
     };
@@ -43,5 +47,7 @@ export const CreateApiKeyModal = ({ isOpen, onClose, onCreateKey, theme, }) => {
             day: 'numeric',
         });
     };
-    return (_jsxs(Modal, { theme: theme === null || theme === void 0 ? void 0 : theme.modal, show: isOpen, onClose: handleCloseModal, children: [_jsx(ModalHeader, { children: "Create API Key" }), _jsx(ModalBody, { children: newApiKey ? (_jsxs("div", { children: [_jsx(StatusAlert, { type: "success", message: "Your API key has been created.", theme: theme === null || theme === void 0 ? void 0 : theme.alert }), _jsxs("div", { className: "mb-4 space-y-4", children: [_jsx(ApiKeyDisplay, { label: "ROBOSYSTEMS_API_KEY", value: newApiKey.key, keyId: newApiKey.id, theme: theme }), _jsx("p", { className: "text-sm font-medium text-red-600 dark:text-red-400", children: "\u26A0\uFE0F Important: Save this API key somewhere safe. For security reasons, you cannot view it again after closing this dialog." })] }), _jsxs("div", { className: "mb-2", children: [_jsx(Label, { theme: theme === null || theme === void 0 ? void 0 : theme.label, htmlFor: "keyDetails", children: "Key Details" }), _jsxs("div", { className: "mt-2 space-y-2 rounded-lg border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-700 dark:bg-zinc-800", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium text-zinc-500 dark:text-zinc-400", children: "Name:" }), _jsx("span", { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: newApiKey.name })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium text-zinc-500 dark:text-zinc-400", children: "Created:" }), _jsx("span", { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: formatDate(newApiKey.createdAt) })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium text-zinc-500 dark:text-zinc-400", children: "Status:" }), _jsx("span", { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: "Active" })] })] })] })] })) : (_jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsx(SettingsFormField, { id: "keyName", label: "API Key Name", placeholder: "My API Key", value: keyName, onChange: (e) => setKeyName(e.target.value), required: true, theme: theme }), _jsx("p", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Give your API key a memorable name to identify it later" }), _jsx("div", { className: "bg-primary-50 dark:bg-primary-900/30 rounded-lg p-3", children: _jsxs("p", { className: "text-primary-800 dark:text-primary-300 text-sm", children: [_jsx("strong", { children: "Note:" }), " API keys do not expire by date. Keys that haven't been used for 90 days will be automatically deactivated for security."] }) }), error && (_jsx(StatusAlert, { type: "error", message: error, theme: theme === null || theme === void 0 ? void 0 : theme.alert }))] })) }), _jsx(ModalFooter, { children: newApiKey ? (_jsx(Button, { theme: theme === null || theme === void 0 ? void 0 : theme.button, color: "blue", onClick: handleCloseModal, children: "Done" })) : (_jsxs(_Fragment, { children: [_jsx(Button, { theme: theme === null || theme === void 0 ? void 0 : theme.button, color: "gray", onClick: handleCloseModal, children: "Cancel" }), _jsx(Button, { theme: theme === null || theme === void 0 ? void 0 : theme.button, color: "primary", onClick: handleSubmit, disabled: isCreating || !keyName, children: isCreating ? (_jsx(Spinner, { size: "sm", className: "text-white" })) : ('Create API Key') })] })) })] }));
+    return (_jsxs(Modal, { theme: theme === null || theme === void 0 ? void 0 : theme.modal, show: isOpen, onClose: handleCloseModal, children: [_jsx(ModalHeader, { children: "Create API Key" }), _jsx(ModalBody, { children: newApiKey ? (_jsxs("div", { children: [_jsx(StatusAlert, { type: "success", message: "Your API key has been created.", theme: theme === null || theme === void 0 ? void 0 : theme.alert }), _jsxs("div", { className: "mb-4 space-y-4", children: [_jsx(ApiKeyDisplay, { label: "ROBOSYSTEMS_API_KEY", value: newApiKey.key, keyId: newApiKey.id, theme: theme }), _jsx("p", { className: "text-sm font-medium text-red-600 dark:text-red-400", children: "\u26A0\uFE0F Important: Save this API key somewhere safe. For security reasons, you cannot view it again after closing this dialog." })] }), _jsxs("div", { className: "mb-2", children: [_jsx(Label, { theme: theme === null || theme === void 0 ? void 0 : theme.label, htmlFor: "keyDetails", children: "Key Details" }), _jsxs("div", { className: "mt-2 space-y-2 rounded-lg border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-700 dark:bg-zinc-800", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium text-zinc-500 dark:text-zinc-400", children: "Name:" }), _jsx("span", { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: newApiKey.name })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium text-zinc-500 dark:text-zinc-400", children: "Scope:" }), _jsx("span", { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: (_a = newApiKey.graphId) !== null && _a !== void 0 ? _a : 'Account-wide' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium text-zinc-500 dark:text-zinc-400", children: "Created:" }), _jsx("span", { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: formatDate(newApiKey.createdAt) })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium text-zinc-500 dark:text-zinc-400", children: "Status:" }), _jsx("span", { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: "Active" })] })] })] })] })) : (_jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsx(SettingsFormField, { id: "keyName", label: "API Key Name", placeholder: "My API Key", value: keyName, onChange: (e) => setKeyName(e.target.value), required: true, theme: theme }), _jsx("p", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Give your API key a memorable name to identify it later" }), graphs && graphs.length > 0 && (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { theme: theme === null || theme === void 0 ? void 0 : theme.label, htmlFor: "keyScope", children: "Scope" }), _jsxs(Select, { id: "keyScope", theme: theme === null || theme === void 0 ? void 0 : theme.select, value: scopeGraphId, onChange: (e) => setScopeGraphId(e.target.value), children: [_jsx("option", { value: "", children: "Account-wide (all graphs)" }), graphs.map((graph) => (_jsxs("option", { value: graph.graphId, children: [graph.graphName, " (", graph.graphId, ")"] }, graph.graphId)))] }), _jsx("p", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: scopeGraphId
+                                        ? 'Graph-scoped: works only for this graph (and its subgraphs), and is the only kind of key accepted inside an MCP connector URL.'
+                                        : 'Account-wide: works for every graph via the X-API-Key header and the SDKs. Not accepted inside MCP connector URLs — pick a graph scope for that, or use the Connect page.' })] })), _jsx("div", { className: "bg-primary-50 dark:bg-primary-900/30 rounded-lg p-3", children: _jsxs("p", { className: "text-primary-800 dark:text-primary-300 text-sm", children: [_jsx("strong", { children: "Note:" }), " API keys do not expire by date. Keys that haven't been used for 90 days will be automatically deactivated for security."] }) }), error && (_jsx(StatusAlert, { type: "error", message: error, theme: theme === null || theme === void 0 ? void 0 : theme.alert }))] })) }), _jsx(ModalFooter, { children: newApiKey ? (_jsx(Button, { theme: theme === null || theme === void 0 ? void 0 : theme.button, color: "blue", onClick: handleCloseModal, children: "Done" })) : (_jsxs(_Fragment, { children: [_jsx(Button, { theme: theme === null || theme === void 0 ? void 0 : theme.button, color: "gray", onClick: handleCloseModal, children: "Cancel" }), _jsx(Button, { theme: theme === null || theme === void 0 ? void 0 : theme.button, color: "primary", onClick: handleSubmit, disabled: isCreating || !keyName, children: isCreating ? (_jsx(Spinner, { size: "sm", className: "text-white" })) : ('Create API Key') })] })) })] }));
 };