@robosystems/core 0.13.0 → 0.13.1

package/components/console/ConsoleContent.d.ts

@@ -1,4 +1,6 @@
 import type { ConsoleConfig } from './types';
-export declare function ConsoleContent({ config }: {
+export declare function ConsoleContent({ config, variant, }: {
     config: ConsoleConfig;
+    /** `panel` drops the page header and fills its container (the drawer). */
+    variant?: 'page' | 'panel';
 }): import("react").JSX.Element;

package/components/console/ConsoleContent.js

@@ -75,7 +75,7 @@ function copyRowsJson(rows) {
     var _a;
     (_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText(JSON.stringify(rows, null, 2));
 }
-export function ConsoleContent({ config }) {
+export function ConsoleContent({ config, variant = 'page', }) {
     const { state: graphState } = useGraphContext();
     const graphId = graphState.currentGraphId;
     const streamingQuery = useStreamingQuery();
@@ -738,10 +738,11 @@ export function ConsoleContent({ config }) {
     };
     // ── Render ──────────────────────────────────────────────────────────
     const { header } = config;
-    return (_jsxs("div", { className: "mx-auto max-w-7xl space-y-6 p-4 sm:p-6", children: [_jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-4", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3 sm:gap-4", children: [_jsx("div", { className: `shrink-0 rounded-lg bg-gradient-to-br ${header.gradientFrom} ${header.gradientTo} p-2.5 sm:p-3`, children: _jsx(HiTerminal, { className: "h-6 w-6 text-white sm:h-8 sm:w-8" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "font-heading text-2xl font-bold break-words text-gray-900 sm:text-3xl dark:text-white", children: header.title }), _jsx("p", { className: "mt-1 text-sm break-words text-gray-500 dark:text-gray-400", children: header.subtitle })] })] }), (streamingQuery.isStreaming || operatorProgress.isRunning) && (_jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400", children: [_jsx("span", { className: "inline-block h-2 w-2 animate-pulse rounded-full bg-green-500" }), operatorProgress.isRunning && operatorProgress.message
+    const isPanel = variant === 'panel';
+    return (_jsxs("div", { className: isPanel ? 'h-full' : 'mx-auto max-w-7xl space-y-6 p-4 sm:p-6', children: [!isPanel && (_jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-4", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3 sm:gap-4", children: [_jsx("div", { className: `shrink-0 rounded-lg bg-gradient-to-br ${header.gradientFrom} ${header.gradientTo} p-2.5 sm:p-3`, children: _jsx(HiTerminal, { className: "h-6 w-6 text-white sm:h-8 sm:w-8" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "font-heading text-2xl font-bold break-words text-gray-900 sm:text-3xl dark:text-white", children: header.title }), _jsx("p", { className: "mt-1 text-sm break-words text-gray-500 dark:text-gray-400", children: header.subtitle })] })] }), (streamingQuery.isStreaming || operatorProgress.isRunning) && (_jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400", children: [_jsx("span", { className: "inline-block h-2 w-2 animate-pulse rounded-full bg-green-500" }), operatorProgress.isRunning && operatorProgress.message
                                 ? operatorProgress.message
                                 : 'Processing...', operatorProgress.percentage !== undefined &&
-                                ` (${operatorProgress.percentage}%)`] }))] }), _jsx(Card, { className: "overflow-hidden bg-gray-950 !p-0 [&>div]:!p-0", children: _jsxs("div", { className: "flex flex-col bg-gray-950", style: { height: 'calc(100vh - 280px)' }, children: [_jsxs("div", { ref: terminalScrollRef, className: "flex-1 overflow-y-auto p-4 font-mono text-sm", children: [terminalMessages.map((message) => (_jsxs("div", { className: "mb-4", children: [_jsxs("div", { className: "mb-1 flex items-center gap-2 text-xs text-gray-700", children: [_jsx("span", { children: message.timestamp.toLocaleTimeString() }), _jsx("span", { children: "-" }), _jsx("span", { className: "tracking-wider uppercase", children: message.type })] }), _jsxs("div", { className: `leading-relaxed break-words ${message.markdown && !message.isAnimating
+                                ` (${operatorProgress.percentage}%)`] }))] })), _jsx(Card, { className: `overflow-hidden bg-gray-950 !p-0 [&>div]:!p-0 ${isPanel ? 'h-full rounded-none border-0 [&>div]:h-full' : ''}`, children: _jsxs("div", { className: "flex flex-col bg-gray-950", style: { height: isPanel ? '100%' : 'calc(100vh - 280px)' }, children: [_jsxs("div", { ref: terminalScrollRef, className: "flex-1 overflow-y-auto p-4 font-mono text-sm", children: [terminalMessages.map((message) => (_jsxs("div", { className: "mb-4", children: [_jsxs("div", { className: "mb-1 flex items-center gap-2 text-xs text-gray-700", children: [_jsx("span", { children: message.timestamp.toLocaleTimeString() }), _jsx("span", { children: "-" }), _jsx("span", { className: "tracking-wider uppercase", children: message.type })] }), _jsxs("div", { className: `leading-relaxed break-words ${message.markdown && !message.isAnimating
                                                 ? ''
                                                 : 'whitespace-pre-wrap'} ${message.type === 'system'
                                                 ? 'text-cyan-400'

package/components/console/ConsoleDrawer.d.ts

@@ -0,0 +1,15 @@
+import type { ConsoleConfig } from './types';
+/** Height of the closed drawer's bar. */
+export declare const CONSOLE_DRAWER_BAR_HEIGHT = 32;
+/** Set on <html> to the space the drawer covers; pad page content by it. */
+export declare const CONSOLE_DRAWER_HEIGHT_VAR = "--console-drawer-height";
+/**
+ * The console as a bottom panel, like VS Code's: a thin bar when closed, a
+ * resizable panel when open, toggled with Ctrl+`. It stays mounted once
+ * opened, so the conversation survives closing it. `className` positions it,
+ * e.g. an offset for the app's sidebar.
+ */
+export declare function ConsoleDrawer({ config, className, }: {
+    config: ConsoleConfig;
+    className?: string;
+}): import("react").JSX.Element;

package/components/console/ConsoleDrawer.js

@@ -0,0 +1,129 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { HiChevronDown, HiChevronUp, HiOutlineArrowsExpand, HiOutlineMinus, HiTerminal, } from 'react-icons/hi';
+import { ConsoleContent } from './ConsoleContent';
+const STORAGE_KEY = 'robosystems:console-drawer';
+/** Height of the closed drawer's bar. */
+export const CONSOLE_DRAWER_BAR_HEIGHT = 32;
+/** Set on <html> to the space the drawer covers; pad page content by it. */
+export const CONSOLE_DRAWER_HEIGHT_VAR = '--console-drawer-height';
+const DEFAULT_HEIGHT = 320;
+const MIN_HEIGHT = 160;
+// Leave the page's own header in view at full stretch.
+const MAX_HEIGHT_RATIO = 0.8;
+function readState() {
+    try {
+        const raw = window.localStorage.getItem(STORAGE_KEY);
+        if (raw) {
+            const parsed = JSON.parse(raw);
+            return {
+                open: parsed.open === true,
+                height: typeof parsed.height === 'number' ? parsed.height : DEFAULT_HEIGHT,
+            };
+        }
+    }
+    catch (_a) {
+        // Storage blocked or corrupt: start closed at the default height.
+    }
+    return { open: false, height: DEFAULT_HEIGHT };
+}
+function writeState(state) {
+    try {
+        window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+    }
+    catch (_a) {
+        // Not persisting is fine; the drawer still works for this page view.
+    }
+}
+function clampHeight(height) {
+    const max = Math.floor(window.innerHeight * MAX_HEIGHT_RATIO);
+    return Math.min(Math.max(height, MIN_HEIGHT), Math.max(max, MIN_HEIGHT));
+}
+/**
+ * The console as a bottom panel, like VS Code's: a thin bar when closed, a
+ * resizable panel when open, toggled with Ctrl+`. It stays mounted once
+ * opened, so the conversation survives closing it. `className` positions it,
+ * e.g. an offset for the app's sidebar.
+ */
+export function ConsoleDrawer({ config, className = 'left-0 right-0', }) {
+    const [state, setState] = useState({
+        open: false,
+        height: DEFAULT_HEIGHT,
+    });
+    // Mount the console on first open, then keep it.
+    const [hasOpened, setHasOpened] = useState(false);
+    const dragging = useRef(false);
+    // The height to return to when a maximized drawer is restored.
+    const restoreHeight = useRef(DEFAULT_HEIGHT);
+    useEffect(() => {
+        const stored = readState();
+        setState(Object.assign(Object.assign({}, stored), { height: clampHeight(stored.height) }));
+        if (stored.open)
+            setHasOpened(true);
+    }, []);
+    const toggle = useCallback(() => {
+        setState((prev) => {
+            const merged = Object.assign(Object.assign({}, prev), { open: !prev.open });
+            writeState(merged);
+            return merged;
+        });
+        setHasOpened(true);
+    }, []);
+    useEffect(() => {
+        const covered = state.open ? state.height : CONSOLE_DRAWER_BAR_HEIGHT;
+        document.documentElement.style.setProperty(CONSOLE_DRAWER_HEIGHT_VAR, `${covered}px`);
+    }, [state.open, state.height]);
+    useEffect(() => () => {
+        document.documentElement.style.removeProperty(CONSOLE_DRAWER_HEIGHT_VAR);
+    }, []);
+    useEffect(() => {
+        const onKey = (event) => {
+            if (event.ctrlKey && event.key === '`') {
+                event.preventDefault();
+                toggle();
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [toggle]);
+    const setHeight = (height) => {
+        setState((prev) => {
+            const merged = Object.assign(Object.assign({}, prev), { height: clampHeight(height) });
+            writeState(merged);
+            return merged;
+        });
+    };
+    const isMaximized = typeof window !== 'undefined' &&
+        state.height >= clampHeight(Number.POSITIVE_INFINITY);
+    const toggleMaximized = () => {
+        if (isMaximized) {
+            setHeight(restoreHeight.current);
+        }
+        else {
+            restoreHeight.current = state.height;
+            setHeight(Number.POSITIVE_INFINITY);
+        }
+    };
+    const onResizeStart = (event) => {
+        event.preventDefault();
+        dragging.current = true;
+        const onMove = (move) => {
+            if (!dragging.current)
+                return;
+            setState((prev) => (Object.assign(Object.assign({}, prev), { height: clampHeight(window.innerHeight - move.clientY) })));
+        };
+        const onUp = () => {
+            dragging.current = false;
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+            setState((prev) => {
+                writeState(prev);
+                return prev;
+            });
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+    };
+    return (_jsxs("div", { className: `fixed bottom-0 z-30 flex flex-col border-t border-gray-800 bg-gray-950 shadow-2xl ${className}`, style: { height: state.open ? state.height : undefined }, "data-testid": "console-drawer", children: [state.open && (_jsx("div", { role: "separator", "aria-orientation": "horizontal", "aria-label": "Resize console", onPointerDown: onResizeStart, onDoubleClick: () => setHeight(DEFAULT_HEIGHT), title: "Drag to resize; double-click to reset", className: "h-1 shrink-0 cursor-row-resize bg-gray-800 hover:bg-cyan-700" })), _jsxs("div", { className: "flex h-8 shrink-0 items-center text-xs text-gray-400", children: [_jsxs("button", { type: "button", onClick: toggle, "aria-expanded": state.open, className: "flex h-full flex-1 items-center gap-2 px-3 hover:text-gray-200", children: [_jsx(HiTerminal, { className: "h-4 w-4" }), _jsx("span", { className: "font-medium tracking-wider uppercase", children: "Console" }), _jsx("span", { className: "text-gray-600", children: "Ctrl+`" }), _jsx("span", { className: "ml-auto", children: state.open ? (_jsx(HiChevronDown, { className: "h-4 w-4" })) : (_jsx(HiChevronUp, { className: "h-4 w-4" })) })] }), state.open && (_jsx("button", { type: "button", onClick: toggleMaximized, "aria-label": isMaximized ? 'Restore console size' : 'Maximize console', title: isMaximized ? 'Restore' : 'Maximize', className: "flex h-full items-center px-3 hover:text-gray-200", children: isMaximized ? (_jsx(HiOutlineMinus, { className: "h-4 w-4" })) : (_jsx(HiOutlineArrowsExpand, { className: "h-4 w-4" })) }))] }), hasOpened && (_jsx("div", { className: `min-h-0 flex-1 ${state.open ? '' : 'hidden'}`, children: _jsx(ConsoleContent, { config: config, variant: "panel" }) }))] }));
+}

package/components/console/index.d.ts

@@ -1,4 +1,5 @@
 export { ConsoleContent } from './ConsoleContent';
+export { CONSOLE_DRAWER_BAR_HEIGHT, CONSOLE_DRAWER_HEIGHT_VAR, ConsoleDrawer, } from './ConsoleDrawer';
 export { ConsoleMarkdown } from './ConsoleMarkdown';
 export { EXAMPLE_SETS, buildGraphAwareConsoleConfig, getGraphExampleKind, useGraphAwareConsoleConfig, } from './graphAwareConfig';
 export type { ConsoleBranding, GraphExampleKind, GraphExampleSet, } from './graphAwareConfig';

package/components/console/index.js

@@ -1,4 +1,5 @@
 export { ConsoleContent } from './ConsoleContent';
+export { CONSOLE_DRAWER_BAR_HEIGHT, CONSOLE_DRAWER_HEIGHT_VAR, ConsoleDrawer, } from './ConsoleDrawer';
 export { ConsoleMarkdown } from './ConsoleMarkdown';
 export { EXAMPLE_SETS, buildGraphAwareConsoleConfig, getGraphExampleKind, useGraphAwareConsoleConfig, } from './graphAwareConfig';
 export { ProgressiveText } from './ProgressiveText';

package/components/index.d.ts

@@ -1,4 +1,4 @@
-export { ConsoleContent } from './console';
+export { CONSOLE_DRAWER_BAR_HEIGHT, CONSOLE_DRAWER_HEIGHT_VAR, ConsoleContent, ConsoleDrawer, } from './console';
 export { EntitySelector, type EntityGroup, type SelectableEntity, } from './EntitySelector';
 export { EntitySelectorCore, type EntityLike, type EntityRecord, type EntitySelectorProps, type GraphWithEntities, } from './EntitySelectorCore';
 export { GraphFilters, byGraphType, composeFilters, excludeRepositories, excludeSubgraphs, hasAllSchemaExtensions, hasAnySchemaExtension, hasSchemaExtension, onlyEntityGraphs, onlyGenericGraphs, onlyRepositories, onlyUserGraphs, } from './graph-filters';

package/components/index.js

@@ -1,4 +1,4 @@
-export { ConsoleContent } from './console';
+export { CONSOLE_DRAWER_BAR_HEIGHT, CONSOLE_DRAWER_HEIGHT_VAR, ConsoleContent, ConsoleDrawer, } from './console';
 export { EntitySelector, } from './EntitySelector';
 export { EntitySelectorCore, } from './EntitySelectorCore';
 export { GraphFilters, byGraphType, composeFilters, excludeRepositories, excludeSubgraphs, hasAllSchemaExtensions, hasAnySchemaExtension, hasSchemaExtension, onlyEntityGraphs, onlyGenericGraphs, onlyRepositories, onlyUserGraphs, } from './graph-filters';

package/index.d.ts

@@ -11,7 +11,7 @@ export { clearGraphSelection, getGraphSelection, persistGraphSelection, } from '
 export { clearEntitySelection, getEntitySelection, persistEntitySelection, } from './actions/entity-actions';
 export type { Entities, Entity, User } from './types';
 export { customTheme } from './theme';
-export { buildGraphAwareConsoleConfig, ConsoleContent, EXAMPLE_SETS, getGraphExampleKind, useGraphAwareConsoleConfig, } from './components/console';
+export { buildGraphAwareConsoleConfig, CONSOLE_DRAWER_BAR_HEIGHT, CONSOLE_DRAWER_HEIGHT_VAR, ConsoleContent, ConsoleDrawer, EXAMPLE_SETS, getGraphExampleKind, useGraphAwareConsoleConfig, } from './components/console';
 export type { ConsoleBranding, ConsoleCommandContext, ConsoleConfig, ConsoleExtraCommand, ConsoleHeaderConfig, ConsoleMcpConfig, ConsoleWelcomeConfig, GraphExampleKind, GraphExampleSet, SampleQuery, } from './components/console';
 export { anchoredMessage, errorDetail, ReportChat, type ReportChatProps, } from './components/report-chat';
 export { ActiveSubscriptions, BrowseRepositories, EntitySelector, EntitySelectorCore, GraphSelectorCore, PageLayout, RepositoryGuard, SearchBar, SearchContent, SearchHitCard, SearchPagination, SearchResultsMeta, useIsRepository, type ActiveSubscriptionsProps, type BrowseRepositoriesProps, type EntityGroup, type EntityLike, type EntityRecord, type EntitySelectorProps, type GraphSelectorProps, type GraphWithEntities, type SearchBarProps, type SearchConfig, type SearchFilterConfig, type SearchHitCardProps, type SearchPaginationProps, type SearchResultsMetaProps, type SelectableEntity, } from './components';

package/index.js

@@ -32,7 +32,7 @@ export { clearEntitySelection, getEntitySelection, persistEntitySelection, } fro
 export { customTheme } from './theme';
 // Export components
 // Export console components
-export { buildGraphAwareConsoleConfig, ConsoleContent, EXAMPLE_SETS, getGraphExampleKind, useGraphAwareConsoleConfig, } from './components/console';
+export { buildGraphAwareConsoleConfig, CONSOLE_DRAWER_BAR_HEIGHT, CONSOLE_DRAWER_HEIGHT_VAR, ConsoleContent, ConsoleDrawer, EXAMPLE_SETS, getGraphExampleKind, useGraphAwareConsoleConfig, } from './components/console';
 export { anchoredMessage, errorDetail, ReportChat, } from './components/report-chat';
 export { ActiveSubscriptions, BrowseRepositories, EntitySelector, EntitySelectorCore, GraphSelectorCore, PageLayout, RepositoryGuard, SearchBar, SearchContent, SearchHitCard, SearchPagination, SearchResultsMeta, useIsRepository, } from './components';
 // Export graph filters

package/package.json

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