@robosystems/core 0.6.1 → 0.6.3

package/auth-components/AuthProvider.d.ts

@@ -6,4 +6,11 @@ interface AuthProviderProps {
 }
 export declare function AuthProvider({ children, apiUrl, }: AuthProviderProps): import("react").JSX.Element;
 export declare function useAuth(): AuthContextType;
+/**
+ * Like `useAuth`, but returns `null` outside an `AuthProvider` instead of
+ * throwing. For components that integrate with auth when it is present but must
+ * still render without it — design-system previews and isolated component tests
+ * mount components with no provider around them.
+ */
+export declare function useOptionalAuth(): AuthContextType | null;
 export {};

package/auth-components/AuthProvider.js

@@ -562,3 +562,12 @@ export function useAuth() {
     }
     return context;
 }
+/**
+ * Like `useAuth`, but returns `null` outside an `AuthProvider` instead of
+ * throwing. For components that integrate with auth when it is present but must
+ * still render without it — design-system previews and isolated component tests
+ * mount components with no provider around them.
+ */
+export function useOptionalAuth() {
+    return useContext(AuthContext);
+}

package/auth-components/SignInForm.d.ts

@@ -17,4 +17,10 @@ export interface SignInFormProps {
  * auth body) stays "Invalid email or password"; 5xx gets its own message.
  */
 export declare function loginErrorMessage(error: unknown): string;
+/**
+ * Messages for the `?reason=` a redirect into the login page can carry. The
+ * producer is `AuthProvider`'s `logout(reason)`, which sends the user to
+ * `/login?reason=<reason>`; without this the redirect arrives unexplained.
+ */
+export declare const SIGN_IN_NOTICES: Record<string, string>;
 export declare function SignInForm({ onSuccess, onRedirect, redirectTo, className, apiUrl, enableSSO, currentApp, }: SignInFormProps): React.JSX.Element;

package/auth-components/SignInForm.js

@@ -26,6 +26,16 @@ export function loginErrorMessage(error) {
     }
     return 'Invalid email or password';
 }
+/**
+ * Messages for the `?reason=` a redirect into the login page can carry. The
+ * producer is `AuthProvider`'s `logout(reason)`, which sends the user to
+ * `/login?reason=<reason>`; without this the redirect arrives unexplained.
+ */
+export const SIGN_IN_NOTICES = {
+    password_changed: 'Your password was updated. Please sign in with your new password.',
+    session_expired: 'Your session expired. Please sign in again.',
+    session_invalid: 'Your session is no longer valid. Please sign in again.',
+};
 export function SignInForm({ onSuccess, onRedirect, redirectTo = '/home', className = '', apiUrl, enableSSO = true, currentApp, }) {
     const [formData, setFormData] = useState({
         email: '',
@@ -35,6 +45,17 @@ export function SignInForm({ onSuccess, onRedirect, redirectTo = '/home', classN
     const [error, setError] = useState('');
     const [ssoChecking, setSSOChecking] = useState(enableSSO);
     const [redirecting, setRedirecting] = useState(false);
+    const [notice, setNotice] = useState('');
+    // Read via window.location rather than useSearchParams(): the latter forces
+    // the consuming app to wrap this component in a Suspense boundary during
+    // static prerender, and the login pages render it bare. Runs before the SSO
+    // effect below, which strips its own params from the URL.
+    useEffect(() => {
+        const reason = new URLSearchParams(window.location.search).get('reason');
+        if (reason && SIGN_IN_NOTICES[reason]) {
+            setNotice(SIGN_IN_NOTICES[reason]);
+        }
+    }, []);
     const authClient = useMemo(() => new RoboSystemsAuthClient(apiUrl), [apiUrl]);
     const { checkSSOAuthentication, handleSSOLogin } = useSSO(apiUrl);
     // Check for existing authentication or SSO login on mount
@@ -131,7 +152,7 @@ export function SignInForm({ onSuccess, onRedirect, redirectTo = '/home', classN
     if (ssoChecking || redirecting) {
         return (_jsx("div", { className: "via-primary-950 flex min-h-screen items-center justify-center bg-linear-to-br from-black to-zinc-900 p-6", children: _jsx("div", { className: "w-full max-w-md", children: _jsxs("div", { className: "text-center", children: [_jsx(LogoBadge, { animate: "loop", className: "mx-auto h-16 w-16" }), _jsx("h1", { className: "font-heading mt-4 text-center text-2xl font-semibold tracking-tight text-white", children: appName })] }) }) }));
     }
-    return (_jsx("div", { className: "via-primary-950 flex min-h-screen items-center justify-center bg-linear-to-br from-black to-zinc-900 px-4 py-12 sm:px-6 lg:px-8", children: _jsxs("div", { className: "w-full max-w-lg space-y-8", children: [_jsxs("div", { className: "text-center", children: [_jsx(LogoBadge, { animate: "once", className: "mx-auto h-14 w-14" }), _jsx("h1", { className: "font-heading mt-4 text-center text-2xl font-semibold tracking-tight text-white", children: appName }), _jsx("h2", { className: "mt-2 text-center text-xl font-semibold tracking-tight text-gray-300", children: "Sign in to your account" })] }), _jsxs("form", { className: ['mt-8 space-y-6', className].filter(Boolean).join(' '), onSubmit: handleSubmit, children: [error && (_jsx("div", { className: "rounded-md border border-red-800 bg-red-900/50 p-4", children: _jsx("div", { className: "text-sm text-red-300", children: error }) })), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "email", className: "sr-only", children: "Email address" }), _jsx("input", { id: "email", name: "email", type: "email", autoComplete: "email", required: true, value: formData.email, onChange: handleInputChange, className: "focus:ring-primary-500 relative block w-full rounded-md border-0 bg-gray-800 px-5 py-4 text-base leading-7 text-white ring-1 ring-gray-600 ring-inset placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset", placeholder: "Email address", disabled: loading || redirecting })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "password", className: "sr-only", children: "Password" }), _jsx("input", { id: "password", name: "password", type: "password", autoComplete: "current-password", required: true, value: formData.password, onChange: handleInputChange, className: "focus:ring-primary-500 relative block w-full rounded-md border-0 bg-gray-800 px-5 py-4 text-base leading-7 text-white ring-1 ring-gray-600 ring-inset placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset", placeholder: "Password", disabled: loading || redirecting })] })] }), _jsx("div", { children: _jsxs("button", { type: "submit", disabled: loading || redirecting, className: "group bg-primary-600 hover:bg-primary-700 focus-visible:outline-primary-500 relative flex w-full justify-center rounded-md px-4 py-3 text-sm font-semibold text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid disabled:cursor-not-allowed disabled:opacity-50", children: [loading && _jsx(Spinner, { size: "sm", className: "mr-2 text-white" }), redirecting
+    return (_jsx("div", { className: "via-primary-950 flex min-h-screen items-center justify-center bg-linear-to-br from-black to-zinc-900 px-4 py-12 sm:px-6 lg:px-8", children: _jsxs("div", { className: "w-full max-w-lg space-y-8", children: [_jsxs("div", { className: "text-center", children: [_jsx(LogoBadge, { animate: "once", className: "mx-auto h-14 w-14" }), _jsx("h1", { className: "font-heading mt-4 text-center text-2xl font-semibold tracking-tight text-white", children: appName }), _jsx("h2", { className: "mt-2 text-center text-xl font-semibold tracking-tight text-gray-300", children: "Sign in to your account" })] }), _jsxs("form", { className: ['mt-8 space-y-6', className].filter(Boolean).join(' '), onSubmit: handleSubmit, children: [error && (_jsx("div", { className: "rounded-md border border-red-800 bg-red-900/50 p-4", children: _jsx("div", { className: "text-sm text-red-300", children: error }) })), notice && !error && (_jsx("div", { className: "border-primary-800 bg-primary-900/50 rounded-md border p-4", children: _jsx("div", { className: "text-primary-200 text-sm", children: notice }) })), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "email", className: "sr-only", children: "Email address" }), _jsx("input", { id: "email", name: "email", type: "email", autoComplete: "email", required: true, value: formData.email, onChange: handleInputChange, className: "focus:ring-primary-500 relative block w-full rounded-md border-0 bg-gray-800 px-5 py-4 text-base leading-7 text-white ring-1 ring-gray-600 ring-inset placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset", placeholder: "Email address", disabled: loading || redirecting })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "password", className: "sr-only", children: "Password" }), _jsx("input", { id: "password", name: "password", type: "password", autoComplete: "current-password", required: true, value: formData.password, onChange: handleInputChange, className: "focus:ring-primary-500 relative block w-full rounded-md border-0 bg-gray-800 px-5 py-4 text-base leading-7 text-white ring-1 ring-gray-600 ring-inset placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset", placeholder: "Password", disabled: loading || redirecting })] })] }), _jsx("div", { children: _jsxs("button", { type: "submit", disabled: loading || redirecting, className: "group bg-primary-600 hover:bg-primary-700 focus-visible:outline-primary-500 relative flex w-full justify-center rounded-md px-4 py-3 text-sm font-semibold text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid disabled:cursor-not-allowed disabled:opacity-50", children: [loading && _jsx(Spinner, { size: "sm", className: "mr-2 text-white" }), redirecting
                                         ? 'Redirecting...'
                                         : loading
                                             ? 'Signing in...'

package/auth-components/index.d.ts

@@ -1,6 +1,6 @@
 export { AppSwitcher } from './AppSwitcher';
 export { AuthGuard } from './AuthGuard';
-export { AuthProvider, useAuth } from './AuthProvider';
+export { AuthProvider, useAuth, useOptionalAuth } from './AuthProvider';
 export { SignInForm } from './SignInForm';
 export { SignUpForm } from './SignUpForm';
 export { TurnstileWidget, useTurnstile } from './TurnstileWidget';

package/auth-components/index.js

@@ -1,6 +1,6 @@
 export { AppSwitcher } from './AppSwitcher';
 export { AuthGuard } from './AuthGuard';
-export { AuthProvider, useAuth } from './AuthProvider';
+export { AuthProvider, useAuth, useOptionalAuth } from './AuthProvider';
 export { SignInForm } from './SignInForm';
 export { SignUpForm } from './SignUpForm';
 export { TurnstileWidget, useTurnstile } from './TurnstileWidget';

package/auth-core/types.d.ts

@@ -71,7 +71,7 @@ export interface AuthContextType {
     };
     login: (email: string, password: string) => Promise<AuthUser>;
     register: (email: string, password: string, name?: string) => Promise<AuthUser>;
-    logout: () => Promise<void>;
+    logout: (reason?: string) => Promise<void>;
     refreshUser: () => Promise<AuthUser | null>;
     refreshSession: (force?: boolean) => Promise<void>;
     forgotPassword: (email: string) => Promise<{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robosystems/core",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "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') })] })) })] }));
 };

package/ui-components/settings/PasswordInformationCard.js

@@ -4,6 +4,8 @@ import * as SDK from '@robosystems/client';
 import { Button } from 'flowbite-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { HiLockClosed } from 'react-icons/hi';
+import { useOptionalAuth } from '../../auth-components/AuthProvider';
+import { ConfirmModal } from '../ConfirmModal';
 import { Spinner } from '../Spinner';
 import { SettingsCard } from '../forms/SettingsCard';
 import { SettingsFormField } from '../forms/SettingsFormField';
@@ -15,7 +17,10 @@ export const PasswordInformationCard = ({ theme, onUpdate = undefined, onSuccess
     const [newPassword, setNewPassword] = useState('');
     const [passwordStrength, setPasswordStrength] = useState(null);
     const [checkingPassword, setCheckingPassword] = useState(false);
+    const [pendingUpdate, setPendingUpdate] = useState(null);
     const debounceRef = useRef(null);
+    const formRef = useRef(null);
+    const auth = useOptionalAuth();
     const checkPassword = useCallback(async (password) => {
         if (password.length < 4) {
             setPasswordStrength(null);
@@ -57,8 +62,7 @@ export const PasswordInformationCard = ({ theme, onUpdate = undefined, onSuccess
                 clearTimeout(debounceRef.current);
         };
     }, [newPassword, checkPassword]);
-    const handleSubmit = async (event) => {
-        var _a, _b, _c;
+    const handleSubmit = (event) => {
         event.preventDefault();
         setError(null);
         setSuccess(false);
@@ -95,18 +99,25 @@ export const PasswordInformationCard = ({ theme, onUpdate = undefined, onSuccess
             }
             return;
         }
+        // A password change ends every session, this one included, so take an
+        // explicit confirmation before doing something the user can't walk back.
+        setPendingUpdate(updateData);
+    };
+    const handleConfirm = async () => {
+        var _a, _b, _c, _d;
+        if (!pendingUpdate)
+            return;
         setIsLoading(true);
-        const form = event.currentTarget;
         try {
             if (onUpdate) {
-                await onUpdate(updateData);
+                await onUpdate(pendingUpdate);
             }
             else {
                 const response = await SDK.updateUserPassword({
                     body: {
-                        current_password: updateData.currentPassword,
-                        new_password: updateData.newPassword,
-                        confirm_password: updateData.confirmPassword,
+                        current_password: pendingUpdate.currentPassword,
+                        new_password: pendingUpdate.newPassword,
+                        confirm_password: pendingUpdate.confirmPassword,
                     },
                 });
                 if (response.error) {
@@ -116,14 +127,28 @@ export const PasswordInformationCard = ({ theme, onUpdate = undefined, onSuccess
                     throw new Error(typeof detail === 'string' ? detail : 'Failed to update password.');
                 }
             }
+            setPendingUpdate(null);
             if (onSuccess) {
                 onSuccess('Password updated successfully.');
             }
             else {
                 setSuccess(true);
             }
+            // The server invalidates every session on a password change, so the token
+            // this app holds is already dead. Sign out deliberately instead of
+            // letting it fail on the next request as an unexplained error.
+            if (auth) {
+                try {
+                    await auth.logout('password_changed');
+                    return; // navigating away — leave the card as-is
+                }
+                catch (_e) {
+                    // The password did change; only the redirect failed. Fall through so
+                    // the card resets rather than sitting on a spinner.
+                }
+            }
             // Clear form fields and strength state
-            form.reset();
+            (_d = formRef.current) === null || _d === void 0 ? void 0 : _d.reset();
             setNewPassword('');
             setPasswordStrength(null);
             setTimeout(() => {
@@ -141,6 +166,7 @@ export const PasswordInformationCard = ({ theme, onUpdate = undefined, onSuccess
             else {
                 setError(msg);
             }
+            setPendingUpdate(null);
             setIsLoading(false);
         }
     };
@@ -162,6 +188,6 @@ export const PasswordInformationCard = ({ theme, onUpdate = undefined, onSuccess
                 : passwordStrength.score < 80
                     ? 'text-primary-300'
                     : 'text-green-400';
-    return (_jsxs(SettingsCard, { title: "Password information", description: "Update your password to keep your account secure", icon: HiLockClosed, theme: theme === null || theme === void 0 ? void 0 : theme.card, className: className, children: [_jsxs("div", { className: "space-y-4", children: [error && (_jsx(StatusAlert, { type: "error", message: error, theme: theme === null || theme === void 0 ? void 0 : theme.alert })), success && (_jsx(StatusAlert, { type: "success", message: "Password updated successfully.", theme: theme === null || theme === void 0 ? void 0 : theme.alert }))] }), _jsx("form", { onSubmit: handleSubmit, children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "grid gap-4 md:grid-cols-2", children: _jsx(SettingsFormField, { id: "currentPassword", label: "Current password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", theme: theme }) }), _jsxs("div", { className: "grid items-start gap-4 md:grid-cols-2", children: [_jsxs("div", { children: [_jsx(SettingsFormField, { id: "newPassword", label: "New password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", theme: theme, onChange: (e) => setNewPassword(e.target.value) }), _jsx("div", { className: "mt-2 min-h-[2.75rem]", children: passwordStrength && (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-1.5 flex-1 overflow-hidden rounded-full bg-gray-700", children: _jsx("div", { className: `h-full rounded-full transition-all duration-300 ${strengthBarColor}`, style: { width: `${passwordStrength.score}%` } }) }), _jsx("span", { className: `text-xs font-medium capitalize ${strengthTextColor}`, children: passwordStrength.strength.replace('-', ' ') })] }), passwordStrength.errors.length > 0 && (_jsx("p", { className: "text-xs text-red-400", children: passwordStrength.errors[0] })), passwordStrength.errors.length === 0 &&
-                                                        passwordStrength.suggestions.length > 0 && (_jsx("p", { className: "text-xs text-gray-400", children: passwordStrength.suggestions[0] }))] })) })] }), _jsx(SettingsFormField, { id: "confirmPassword", label: "Confirm password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", theme: theme })] }), _jsx("div", { className: "flex justify-end pt-2", children: _jsx(Button, { theme: theme === null || theme === void 0 ? void 0 : theme.button, color: "blue", type: "submit", disabled: isLoading || checkingPassword, children: isLoading ? (_jsx(Spinner, { size: "sm", className: "text-white" })) : ('Update Password') }) })] }) })] }));
+    return (_jsxs(SettingsCard, { title: "Password information", description: "Update your password to keep your account secure", icon: HiLockClosed, theme: theme === null || theme === void 0 ? void 0 : theme.card, className: className, children: [_jsxs("div", { className: "space-y-4", children: [error && (_jsx(StatusAlert, { type: "error", message: error, theme: theme === null || theme === void 0 ? void 0 : theme.alert })), success && (_jsx(StatusAlert, { type: "success", message: "Password updated successfully.", theme: theme === null || theme === void 0 ? void 0 : theme.alert }))] }), _jsx("form", { ref: formRef, onSubmit: handleSubmit, children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "grid gap-4 md:grid-cols-2", children: _jsx(SettingsFormField, { id: "currentPassword", label: "Current password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", theme: theme }) }), _jsxs("div", { className: "grid items-start gap-4 md:grid-cols-2", children: [_jsxs("div", { children: [_jsx(SettingsFormField, { id: "newPassword", label: "New password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", theme: theme, onChange: (e) => setNewPassword(e.target.value) }), _jsx("div", { className: "mt-2 min-h-[2.75rem]", children: passwordStrength && (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-1.5 flex-1 overflow-hidden rounded-full bg-gray-700", children: _jsx("div", { className: `h-full rounded-full transition-all duration-300 ${strengthBarColor}`, style: { width: `${passwordStrength.score}%` } }) }), _jsx("span", { className: `text-xs font-medium capitalize ${strengthTextColor}`, children: passwordStrength.strength.replace('-', ' ') })] }), passwordStrength.errors.length > 0 && (_jsx("p", { className: "text-xs text-red-400", children: passwordStrength.errors[0] })), passwordStrength.errors.length === 0 &&
+                                                        passwordStrength.suggestions.length > 0 && (_jsx("p", { className: "text-xs text-gray-400", children: passwordStrength.suggestions[0] }))] })) })] }), _jsx(SettingsFormField, { id: "confirmPassword", label: "Confirm password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", theme: theme })] }), _jsx("div", { className: "flex justify-end pt-2", children: _jsx(Button, { theme: theme === null || theme === void 0 ? void 0 : theme.button, color: "blue", type: "submit", disabled: isLoading || checkingPassword, children: isLoading ? (_jsx(Spinner, { size: "sm", className: "text-white" })) : ('Update Password') }) })] }) }), _jsx(ConfirmModal, { show: pendingUpdate !== null, onClose: () => setPendingUpdate(null), onConfirm: handleConfirm, loading: isLoading, title: "Change password", confirmLabel: "Change password", loadingLabel: "Changing\u2026", confirmColor: "blue", confirmIcon: HiLockClosed, children: _jsx("p", { className: "text-sm text-gray-300", children: "Changing your password signs you out everywhere, including on this device. You'll need to sign in again with your new password." }) })] }));
 };