@promptbook/cli 0.112.0-96 → 0.112.0-98

package/apps/agents-server/src/components/AdminTerminal/AdminTerminalCard.tsx

@@ -0,0 +1,279 @@
+'use client';
+
+import { Loader2, Play, Send, SquareTerminal } from 'lucide-react';
+import type { ReactNode } from 'react';
+import { useEffect, useRef } from 'react';
+import { Card } from '../Homepage/Card';
+import type { AdminTerminalSession } from './useAdminTerminalSession';
+
+/**
+ * One quick terminal action rendered next to the input box.
+ */
+type AdminTerminalQuickAction = {
+    /**
+     * Visible button label.
+     */
+    readonly label: string;
+
+    /**
+     * Raw terminal input sent when the button is clicked.
+     */
+    readonly input: string;
+};
+
+/**
+ * Props accepted by the shared admin terminal card.
+ */
+type AdminTerminalCardProps<TSession extends AdminTerminalSession> = {
+    /**
+     * Title shown above the terminal card.
+     */
+    readonly title: string;
+
+    /**
+     * Short description of what the terminal is for.
+     */
+    readonly description: string;
+
+    /**
+     * Optional extra hint shown below the description.
+     */
+    readonly hint?: string;
+
+    /**
+     * Active or latest terminal session snapshot.
+     */
+    readonly session: TSession | null;
+
+    /**
+     * Controlled terminal input value.
+     */
+    readonly input: string;
+
+    /**
+     * Updates the controlled terminal input.
+     */
+    readonly onInputChange: (value: string) => void;
+
+    /**
+     * Starts or reconnects to the terminal session.
+     */
+    readonly onStart: () => void;
+
+    /**
+     * Stops the active terminal session.
+     */
+    readonly onStop: () => void;
+
+    /**
+     * Sends one raw input chunk to the terminal.
+     */
+    readonly onSend: (input: string) => void;
+
+    /**
+     * Whether the surrounding page is still loading the initial terminal state.
+     */
+    readonly isLoading?: boolean;
+
+    /**
+     * Whether a session start request is currently pending.
+     */
+    readonly isStarting?: boolean;
+
+    /**
+     * Whether a terminal input request is currently pending.
+     */
+    readonly isSending?: boolean;
+
+    /**
+     * Whether a session stop request is currently pending.
+     */
+    readonly isStopping?: boolean;
+
+    /**
+     * Label used for the start button while the session is idle.
+     */
+    readonly startLabel: string;
+
+    /**
+     * Label used for the start button while the session is already running.
+     */
+    readonly runningLabel?: string;
+
+    /**
+     * Label used for the stop button.
+     */
+    readonly stopLabel: string;
+
+    /**
+     * Label shown above the terminal output.
+     */
+    readonly outputLabel: string;
+
+    /**
+     * Empty-state text shown before any terminal output exists.
+     */
+    readonly outputEmptyState: string;
+
+    /**
+     * Placeholder used by the terminal input control.
+     */
+    readonly inputPlaceholder: string;
+
+    /**
+     * Optional shortcut buttons that send raw terminal input.
+     */
+    readonly quickActions?: ReadonlyArray<AdminTerminalQuickAction>;
+
+    /**
+     * Optional extra content inserted between the description and the terminal output.
+     */
+    readonly children?: ReactNode;
+};
+
+const INPUT_CLASS_NAME =
+    'w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 disabled:bg-gray-50 disabled:text-gray-500';
+
+/**
+ * Shared terminal card used by super-admin pages that expose interactive browser terminals.
+ */
+export function AdminTerminalCard<TSession extends AdminTerminalSession>({
+    title,
+    description,
+    hint,
+    session,
+    input,
+    onInputChange,
+    onStart,
+    onStop,
+    onSend,
+    isLoading = false,
+    isStarting = false,
+    isSending = false,
+    isStopping = false,
+    startLabel,
+    runningLabel,
+    stopLabel,
+    outputLabel,
+    outputEmptyState,
+    inputPlaceholder,
+    quickActions = [],
+    children,
+}: AdminTerminalCardProps<TSession>) {
+    const outputReference = useRef<HTMLPreElement | null>(null);
+
+    useEffect(() => {
+        if (!outputReference.current) {
+            return;
+        }
+
+        outputReference.current.scrollTop = outputReference.current.scrollHeight;
+    }, [session?.output]);
+
+    return (
+        <Card className="hover:border-gray-200 hover:shadow-md">
+            <div className="space-y-4">
+                <div className="space-y-2">
+                    <h2 className="text-lg font-semibold text-slate-900">{title}</h2>
+                    <p className="text-sm text-slate-600">{description}</p>
+                    {hint ? <p className="text-sm text-slate-600">{hint}</p> : null}
+                </div>
+
+                <div className="flex flex-wrap items-center gap-3">
+                    <button
+                        type="button"
+                        onClick={onStart}
+                        disabled={isLoading || isStarting || session?.isRunning}
+                        className="inline-flex items-center gap-2 rounded-md bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-60"
+                    >
+                        {isStarting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Play className="h-4 w-4" />}
+                        {session?.isRunning ? runningLabel || startLabel : startLabel}
+                    </button>
+                    <button
+                        type="button"
+                        onClick={onStop}
+                        disabled={!session?.isRunning || isStopping}
+                        className="inline-flex items-center gap-2 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-60"
+                    >
+                        {isStopping ? (
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                        ) : (
+                            <SquareTerminal className="h-4 w-4" />
+                        )}
+                        {stopLabel}
+                    </button>
+                </div>
+
+                {children}
+
+                <div className="space-y-2">
+                    <div className="flex flex-wrap items-center justify-between gap-3">
+                        <h3 className="text-sm font-semibold text-slate-700">{outputLabel}</h3>
+                        {session ? (
+                            <span className="text-xs text-slate-500">
+                                {session.isRunning
+                                    ? 'Running'
+                                    : session.exitCode === 0
+                                      ? 'Finished successfully'
+                                      : 'Finished with an error'}
+                            </span>
+                        ) : (
+                            <span className="text-xs text-slate-500">No session started yet.</span>
+                        )}
+                    </div>
+                    <pre
+                        ref={outputReference}
+                        className="max-h-96 overflow-auto rounded-xl border border-slate-200 bg-slate-950 p-4 text-xs text-slate-100"
+                    >
+                        {session?.output || outputEmptyState}
+                    </pre>
+                </div>
+
+                <form
+                    className="flex flex-col gap-3 md:flex-row"
+                    onSubmit={(event) => {
+                        event.preventDefault();
+
+                        if (!input.trim()) {
+                            return;
+                        }
+
+                        const formattedInput = input.endsWith('\n') ? input : `${input}\n`;
+                        onSend(formattedInput);
+                        onInputChange('');
+                    }}
+                >
+                    <input
+                        type="text"
+                        value={input}
+                        onChange={(event) => onInputChange(event.target.value)}
+                        disabled={!session?.isRunning || isSending}
+                        placeholder={inputPlaceholder}
+                        className={INPUT_CLASS_NAME}
+                    />
+                    <div className="flex flex-wrap gap-3">
+                        <button
+                            type="submit"
+                            disabled={!session?.isRunning || isSending || input.trim() === ''}
+                            className="inline-flex items-center justify-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60"
+                        >
+                            {isSending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
+                            Send
+                        </button>
+                        {quickActions.map((quickAction) => (
+                            <button
+                                key={`${quickAction.label}:${quickAction.input}`}
+                                type="button"
+                                onClick={() => onSend(quickAction.input)}
+                                disabled={!session?.isRunning || isSending}
+                                className="inline-flex items-center justify-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-60"
+                            >
+                                {quickAction.label}
+                            </button>
+                        ))}
+                    </div>
+                </form>
+            </div>
+        </Card>
+    );
+}

package/apps/agents-server/src/components/AdminTerminal/useAdminTerminalSession.ts

@@ -0,0 +1,336 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+
+/**
+ * Minimal terminal-session shape used by the shared admin terminal hook.
+ */
+export type AdminTerminalSession = {
+    /**
+     * Session identifier.
+     */
+    readonly id: string;
+
+    /**
+     * Whether the terminal process is still running.
+     */
+    readonly isRunning: boolean;
+
+    /**
+     * Buffered terminal output.
+     */
+    readonly output: string;
+
+    /**
+     * ISO timestamp when the session started.
+     */
+    readonly startedAt: string;
+
+    /**
+     * ISO timestamp when the session finished.
+     */
+    readonly finishedAt: string | null;
+
+    /**
+     * Exit code when available.
+     */
+    readonly exitCode: number | null;
+
+    /**
+     * Exit signal when available.
+     */
+    readonly signal: string | null;
+};
+
+/**
+ * Shared API response shape used by the admin terminal routes.
+ */
+type AdminTerminalSessionResponse<TSession extends AdminTerminalSession> = {
+    /**
+     * Loaded or updated session snapshot.
+     */
+    readonly session: TSession | null;
+
+    /**
+     * API error, when the request failed.
+     */
+    readonly error?: string;
+};
+
+/**
+ * Options accepted by the shared admin terminal hook.
+ */
+type UseAdminTerminalSessionOptions = {
+    /**
+     * Base API route used for GET/POST/PATCH/DELETE requests.
+     */
+    readonly basePath: string;
+
+    /**
+     * Fallback error message used when loading the latest session fails.
+     */
+    readonly loadErrorMessage: string;
+
+    /**
+     * Fallback error message used when starting a new session fails.
+     */
+    readonly startErrorMessage: string;
+
+    /**
+     * Fallback error message used when sending input fails.
+     */
+    readonly sendErrorMessage: string;
+
+    /**
+     * Fallback error message used when stopping a session fails.
+     */
+    readonly stopErrorMessage: string;
+
+    /**
+     * Success message shown after starting a new session.
+     */
+    readonly startSuccessMessage: string;
+
+    /**
+     * Success message shown when the process exits with code `0`.
+     */
+    readonly finishSuccessMessage: string;
+
+    /**
+     * Error message shown when the process exits with a non-zero code.
+     */
+    readonly finishErrorMessage: string;
+};
+
+/**
+ * Shared browser hook for admin pages that start, stream, write to, and stop one terminal session.
+ *
+ * @param options - API endpoints and user-facing messages for the terminal.
+ * @returns Session state, status messages, and imperative helpers.
+ */
+export function useAdminTerminalSession<TSession extends AdminTerminalSession>(
+    options: UseAdminTerminalSessionOptions,
+) {
+    const [session, setSession] = useState<TSession | null>(null);
+    const [input, setInput] = useState('');
+    const [isLoadingSession, setIsLoadingSession] = useState(true);
+    const [isStarting, setIsStarting] = useState(false);
+    const [isSending, setIsSending] = useState(false);
+    const [isStopping, setIsStopping] = useState(false);
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+    const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+    /**
+     * Loads the latest session snapshot for the current terminal.
+     */
+    const loadSession = useCallback(async (): Promise<void> => {
+        try {
+            setIsLoadingSession(true);
+            setErrorMessage(null);
+
+            const response = await fetch(options.basePath, { cache: 'no-store' });
+            const payload = (await response.json()) as AdminTerminalSessionResponse<TSession>;
+
+            if (!response.ok) {
+                throw new Error(payload.error || options.loadErrorMessage);
+            }
+
+            setSession(payload.session);
+        } catch (error) {
+            setErrorMessage(error instanceof Error ? error.message : options.loadErrorMessage);
+        } finally {
+            setIsLoadingSession(false);
+        }
+    }, [options.basePath, options.loadErrorMessage]);
+
+    useEffect(() => {
+        void loadSession();
+    }, [loadSession]);
+
+    useEffect(() => {
+        const sessionId = session?.id;
+        if (!sessionId) {
+            return;
+        }
+
+        const eventSource = new EventSource(`${options.basePath}?sessionId=${encodeURIComponent(sessionId)}&stream=1`);
+
+        const handleSnapshot = (event: MessageEvent<string>) => {
+            const payload = JSON.parse(event.data) as TSession;
+            setSession(payload);
+        };
+        const handleOutput = (event: MessageEvent<string>) => {
+            const payload = JSON.parse(event.data) as { readonly chunk: string };
+            setSession((currentSession) => {
+                if (!currentSession || currentSession.id !== sessionId) {
+                    return currentSession;
+                }
+
+                return {
+                    ...currentSession,
+                    output: currentSession.output + payload.chunk,
+                };
+            });
+        };
+        const handleExit = (event: MessageEvent<string>) => {
+            const payload = JSON.parse(event.data) as TSession;
+            setSession(payload);
+            setIsStarting(false);
+            setIsSending(false);
+            setIsStopping(false);
+
+            if (payload.exitCode === 0) {
+                setSuccessMessage(options.finishSuccessMessage);
+                setErrorMessage(null);
+            } else {
+                setSuccessMessage(null);
+                setErrorMessage(options.finishErrorMessage);
+            }
+
+            eventSource.close();
+        };
+
+        eventSource.addEventListener('snapshot', handleSnapshot as EventListener);
+        eventSource.addEventListener('output', handleOutput as EventListener);
+        eventSource.addEventListener('exit', handleExit as EventListener);
+        eventSource.onerror = () => {
+            eventSource.close();
+        };
+
+        return () => {
+            eventSource.close();
+        };
+    }, [options.basePath, options.finishErrorMessage, options.finishSuccessMessage, session?.id]);
+
+    /**
+     * Starts or reconnects to the managed terminal session.
+     */
+    const startSession = useCallback(async (): Promise<void> => {
+        try {
+            setIsStarting(true);
+            setErrorMessage(null);
+            setSuccessMessage(null);
+
+            const response = await fetch(options.basePath, { method: 'POST' });
+            const payload = (await response.json()) as AdminTerminalSessionResponse<TSession>;
+
+            if (!response.ok || !payload.session) {
+                throw new Error(payload.error || options.startErrorMessage);
+            }
+
+            setSession(payload.session);
+            setSuccessMessage(options.startSuccessMessage);
+        } catch (error) {
+            setErrorMessage(error instanceof Error ? error.message : options.startErrorMessage);
+        } finally {
+            setIsStarting(false);
+        }
+    }, [options.basePath, options.startErrorMessage, options.startSuccessMessage]);
+
+    /**
+     * Sends one raw input chunk to the running terminal session.
+     *
+     * @param nextInput - Raw text or control characters to write.
+     */
+    const sendInput = useCallback(
+        async (nextInput: string): Promise<void> => {
+            if (!session) {
+                return;
+            }
+
+            try {
+                setIsSending(true);
+                setErrorMessage(null);
+
+                const response = await fetch(options.basePath, {
+                    method: 'PATCH',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        sessionId: session.id,
+                        input: nextInput,
+                    }),
+                });
+                const payload = (await response.json()) as AdminTerminalSessionResponse<TSession>;
+
+                if (!response.ok) {
+                    throw new Error(payload.error || options.sendErrorMessage);
+                }
+
+                if (payload.session) {
+                    setSession(payload.session);
+                }
+            } catch (error) {
+                setErrorMessage(error instanceof Error ? error.message : options.sendErrorMessage);
+            } finally {
+                setIsSending(false);
+            }
+        },
+        [options.basePath, options.sendErrorMessage, session],
+    );
+
+    /**
+     * Stops the active terminal session.
+     */
+    const stopSession = useCallback(async (): Promise<void> => {
+        if (!session) {
+            return;
+        }
+
+        try {
+            setIsStopping(true);
+            setErrorMessage(null);
+
+            const response = await fetch(options.basePath, {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    sessionId: session.id,
+                }),
+            });
+            const payload = (await response.json()) as AdminTerminalSessionResponse<TSession>;
+
+            if (!response.ok) {
+                throw new Error(payload.error || options.stopErrorMessage);
+            }
+
+            if (payload.session) {
+                setSession(payload.session);
+            }
+        } catch (error) {
+            setErrorMessage(error instanceof Error ? error.message : options.stopErrorMessage);
+        } finally {
+            setIsStopping(false);
+        }
+    }, [options.basePath, options.stopErrorMessage, session]);
+
+    /**
+     * Clears any terminal status messages shown above the panel.
+     */
+    const clearMessages = useCallback((): void => {
+        setErrorMessage(null);
+        setSuccessMessage(null);
+    }, []);
+
+    return {
+        session,
+        input,
+        setInput,
+        isLoadingSession,
+        isStarting,
+        isSending,
+        isStopping,
+        errorMessage,
+        successMessage,
+        setErrorMessage,
+        setSuccessMessage,
+        clearMessages,
+        loadSession,
+        startSession,
+        sendInput,
+        stopSession,
+    };
+}

package/apps/agents-server/src/components/Header/buildHeaderSystemMenuItems.ts

@@ -3,6 +3,7 @@ import {
     Code2,
     Globe2,
     KeyRound,
+    RefreshCw,
     Settings2,
     UserRound,
     Wrench,
@@ -202,6 +203,11 @@ export function buildHeaderSystemMenuItems({
         },
         ...(isGlobalAdmin
             ? [
+                  {
+                      label: translate('header.update'),
+                      href: '/admin/update',
+                      icon: RefreshCw,
+                  } as SubMenuItem,
                   {
                       label: translate('header.database'),
                       href: '/admin/database',
@@ -214,6 +220,10 @@ export function buildHeaderSystemMenuItems({
                       label: translate('header.codeRunners'),
                       href: '/admin/code-runners',
                   } as SubMenuItem,
+                  {
+                      label: translate('header.cliAccess'),
+                      href: '/admin/cli-access',
+                  } as SubMenuItem,
               ]
             : []),
     ];

package/apps/agents-server/src/languages/ServerTranslationKeys.ts

@@ -142,9 +142,11 @@ export const SERVER_TRANSLATION_KEYS = [
     'header.createNewUser',
     'header.servers',
     'header.environmentVariables',
+    'header.update',
     'header.database',
     'header.logs',
     'header.codeRunners',
+    'header.cliAccess',
     'header.models',
     'header.openApiDocumentation',
     'header.apiTokens',

package/apps/agents-server/src/languages/translations/czech.yaml

@@ -136,9 +136,11 @@ header.viewAllUsers: Zobrazit všechny uživatele
 header.createNewUser: Vytvořit nového uživatele
 header.servers: Servery
 header.environmentVariables: Proměnné prostředí
+header.update: Aktualizace
 header.database: Databáze
 header.logs: Logy
 header.codeRunners: Code runnery
+header.cliAccess: CLI přístup
 header.models: Modely
 header.openApiDocumentation: Dokumentace OpenAPI
 header.apiTokens: API tokeny

package/apps/agents-server/src/languages/translations/english.yaml

@@ -138,9 +138,11 @@ header.viewAllUsers: View all users
 header.createNewUser: Create new user
 header.servers: Servers
 header.environmentVariables: Environment variables
+header.update: Update
 header.database: Database
 header.logs: Logs
 header.codeRunners: Code runners
+header.cliAccess: CLI Access
 header.models: Models
 header.openApiDocumentation: OpenAPI Documentation
 header.apiTokens: API Tokens