@invect/ui 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@invect/ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Complete React components and routes for Invect workflow management",
   "keywords": [
     "components",
@@ -74,12 +74,13 @@
     "codemirror": "^6.0.2",
     "nanoid": "^5.1.6",
     "prettier": "^3.8.1",
+    "react-hotkeys-hook": "^5.2.4",
     "react-markdown": "^10.1.0",
     "react-resizable-panels": "^3.0.6",
     "remark-gfm": "^4.0.1",
     "zustand": "^5.0.9",
-    "@invect/core": "0.0.1",
-    "@invect/layouts": "0.0.1"
+    "@invect/core": "0.0.2",
+    "@invect/layouts": "0.0.2"
   },
   "devDependencies": {
     "@radix-ui/react-dropdown-menu": "^2.1.16",

package/src/Invect.tsx

@@ -26,13 +26,23 @@ import { AppSideMenu } from './components/side-menu/side-menu';
 
 export interface InvectProps {
   reactQueryClient?: QueryClient;
-  apiBaseUrl?: string;
-  basePath?: string;
+  apiPath?: string;
+  frontendPath?: string;
   useMemoryRouter?: boolean; // Use MemoryRouter instead of BrowserRouter (useful for testing)
   /** Frontend plugins that contribute sidebar items, routes, panel tabs, header actions, etc. */
   plugins?: InvectFrontendPlugin[];
-  /** Pre-configured API client instance (e.g. for demo mode). When provided, apiBaseUrl is ignored. */
+  /** Pre-configured API client instance (e.g. for demo mode). When provided, apiPath is ignored. */
   apiClient?: ApiClient;
+  /**
+   * Invect configuration object (from defineConfig).
+   * When provided, `apiPath` and `frontendPath` are read from the config
+   * unless explicitly overridden by the individual props.
+   */
+  config?: {
+    apiPath?: string;
+    frontendPath?: string;
+    plugins?: Array<{ frontend?: InvectFrontendPlugin }>;
+  };
 }
 
 // Create a default QueryClient if none is provided
@@ -193,12 +203,20 @@ InvectRoutes.displayName = 'InvectRoutes';
 export const Invect = React.memo(
   ({
     reactQueryClient,
-    apiBaseUrl = 'http://localhost:3000/invect',
-    basePath = '/invect',
+    apiPath: apiPathProp,
+    frontendPath: frontendPathProp,
     useMemoryRouter = false,
     plugins,
     apiClient,
+    config,
   }: InvectProps) => {
+    const apiBaseUrl = apiPathProp ?? config?.apiPath ?? 'http://localhost:3000/invect';
+    const basePath = frontendPathProp ?? config?.frontendPath ?? '/invect';
+    const resolvedPlugins =
+      plugins ??
+      config?.plugins
+        ?.map((p) => p.frontend)
+        .filter((p): p is InvectFrontendPlugin => p !== null && p !== undefined);
     const client = reactQueryClient || createDefaultQueryClient();
     const hasRouter = useHasRouterContext();
 
@@ -208,7 +226,7 @@ export const Invect = React.memo(
         apiBaseUrl={apiBaseUrl}
         apiClient={apiClient}
         basePath={basePath}
-        plugins={plugins}
+        plugins={resolvedPlugins}
       />
     );
 

package/src/components/flow-editor/FlowCommandPalette.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import {
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+} from '~/components/ui/command';
+import { CATEGORY_LABELS, type ShortcutCategory } from './keyboard-shortcuts';
+import {
+  Save,
+  Play,
+  Copy,
+  Scissors,
+  ClipboardPaste,
+  CopyPlus,
+  Trash2,
+  BoxSelect,
+  Maximize,
+  ZoomIn,
+  ZoomOut,
+  PanelLeft,
+  Moon,
+  Keyboard,
+  Search,
+  MessageSquare,
+} from 'lucide-react';
+
+// ---------------------------------------------------------------------------
+// Command palette for the flow editor (⌘K)
+// ---------------------------------------------------------------------------
+
+export interface CommandPaletteAction {
+  id: string;
+  label: string;
+  description?: string;
+  category: ShortcutCategory;
+  icon?: React.ReactNode;
+  shortcutDisplay?: string;
+  onSelect: () => void;
+  disabled?: boolean;
+}
+
+interface FlowCommandPaletteProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  actions: CommandPaletteAction[];
+}
+
+/** Icons mapped to shortcut IDs for visual consistency */
+const SHORTCUT_ICONS: Record<string, React.ReactNode> = {
+  'command-palette': <Search className="size-4" />,
+  save: <Save className="size-4" />,
+  'execute-flow': <Play className="size-4" />,
+  'show-shortcuts': <Keyboard className="size-4" />,
+  copy: <Copy className="size-4" />,
+  cut: <Scissors className="size-4" />,
+  paste: <ClipboardPaste className="size-4" />,
+  duplicate: <CopyPlus className="size-4" />,
+  'delete-selection': <Trash2 className="size-4" />,
+  'select-all': <BoxSelect className="size-4" />,
+  'fit-view': <Maximize className="size-4" />,
+  'zoom-in': <ZoomIn className="size-4" />,
+  'zoom-out': <ZoomOut className="size-4" />,
+  'toggle-sidebar': <PanelLeft className="size-4" />,
+  'toggle-theme': <Moon className="size-4" />,
+  'toggle-chat': <MessageSquare className="size-4" />,
+};
+
+export function FlowCommandPalette({ open, onOpenChange, actions }: FlowCommandPaletteProps) {
+  // Group actions by category
+  const grouped = React.useMemo(() => {
+    const groups: Record<ShortcutCategory, CommandPaletteAction[]> = {
+      general: [],
+      editing: [],
+      navigation: [],
+      view: [],
+    };
+    for (const action of actions) {
+      groups[action.category].push(action);
+    }
+    return groups;
+  }, [actions]);
+
+  const handleSelect = React.useCallback(
+    (action: CommandPaletteAction) => {
+      onOpenChange(false);
+      // Defer execution to let the dialog close first
+      requestAnimationFrame(() => {
+        action.onSelect();
+      });
+    },
+    [onOpenChange],
+  );
+
+  const categoryOrder: ShortcutCategory[] = ['general', 'editing', 'navigation', 'view'];
+  const nonEmptyCategories = categoryOrder.filter((cat) => grouped[cat].length > 0);
+
+  return (
+    <CommandDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Command Palette"
+      description="Search for commands..."
+    >
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No commands found.</CommandEmpty>
+        {nonEmptyCategories.map((category, index) => (
+          <React.Fragment key={category}>
+            {index > 0 && <CommandSeparator />}
+            <CommandGroup heading={CATEGORY_LABELS[category]}>
+              {grouped[category].map((action) => (
+                <CommandItem
+                  key={action.id}
+                  value={`${action.label} ${action.description ?? ''}`}
+                  onSelect={() => handleSelect(action)}
+                  disabled={action.disabled}
+                >
+                  {action.icon ?? SHORTCUT_ICONS[action.id] ?? null}
+                  <span>{action.label}</span>
+                  {action.shortcutDisplay && (
+                    <CommandShortcut>{action.shortcutDisplay}</CommandShortcut>
+                  )}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </React.Fragment>
+        ))}
+      </CommandList>
+    </CommandDialog>
+  );
+}

package/src/components/flow-editor/FlowEditor.tsx

@@ -42,6 +42,9 @@ import { useNodeExecutions } from '~/api/executions.api';
 import { extractOutputValue } from './node-config-panel/utils';
 import { nanoid } from 'nanoid';
 import { useCopyPaste } from './use-copy-paste';
+import { useKeyboardShortcuts } from './use-keyboard-shortcuts';
+import { FlowCommandPalette } from './FlowCommandPalette';
+import { ShortcutsHelpDialog } from './ShortcutsHelpDialog';
 
 // Stable references for React Flow - defined at module scope to avoid re-renders
 const EDGE_TYPES: EdgeTypes = {
@@ -251,6 +254,15 @@ export function FlowWorkbenchView({
   // Copy/paste/cut/duplicate/delete keyboard shortcuts
   useCopyPaste({ flowId, reactFlowInstance });
 
+  // Command palette, keyboard shortcuts, and help dialog
+  const {
+    commandPaletteOpen,
+    setCommandPaletteOpen,
+    shortcutsHelpOpen,
+    setShortcutsHelpOpen,
+    commandPaletteActions,
+  } = useKeyboardShortcuts();
+
   // Use React Flow's built-in hook to detect when nodes have been initialized
   // This is true when all nodes have been measured and their handles registered
   const nodesInitializedFromHook = useNodesInitialized();
@@ -997,6 +1009,12 @@ export function FlowWorkbenchView({
         availableTools={availableTools}
         initialToolInstanceId={configPanelToolInstanceId}
       />
+      <FlowCommandPalette
+        open={commandPaletteOpen}
+        onOpenChange={setCommandPaletteOpen}
+        actions={commandPaletteActions}
+      />
+      <ShortcutsHelpDialog open={shortcutsHelpOpen} onOpenChange={setShortcutsHelpOpen} />
     </>
   );
 }

package/src/components/flow-editor/ShortcutsHelpDialog.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '~/components/ui/dialog';
+import {
+  CATEGORY_LABELS,
+  getShortcutDisplay,
+  getShortcutsByCategory,
+  type ShortcutCategory,
+} from './keyboard-shortcuts';
+
+// ---------------------------------------------------------------------------
+// Keyboard shortcuts help overlay (? key)
+// ---------------------------------------------------------------------------
+
+interface ShortcutsHelpDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function ShortcutsHelpDialog({ open, onOpenChange }: ShortcutsHelpDialogProps) {
+  const grouped = React.useMemo(() => getShortcutsByCategory(), []);
+  const categoryOrder: ShortcutCategory[] = ['general', 'editing', 'navigation', 'view'];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>Keyboard Shortcuts</DialogTitle>
+        <DialogDescription>A reference of all available keyboard shortcuts.</DialogDescription>
+      </DialogHeader>
+      <DialogContent className="max-w-lg" showCloseButton>
+        <div className="space-y-4">
+          <h2 className="text-lg font-semibold">Keyboard Shortcuts</h2>
+          {categoryOrder.map((category) => {
+            const shortcuts = grouped[category];
+            if (shortcuts.length === 0) {
+              return null;
+            }
+            return (
+              <div key={category}>
+                <h3 className="mb-2 text-xs font-medium tracking-wider uppercase text-muted-foreground">
+                  {CATEGORY_LABELS[category]}
+                </h3>
+                <div className="space-y-1">
+                  {shortcuts.map((shortcut) => (
+                    <div
+                      key={shortcut.id}
+                      className="flex items-center justify-between py-1.5 px-2 rounded-md text-sm"
+                    >
+                      <span>{shortcut.label}</span>
+                      <kbd className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-mono rounded bg-muted text-muted-foreground border border-border">
+                        {getShortcutDisplay(shortcut)}
+                      </kbd>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/flow-editor/keyboard-shortcuts.ts

@@ -0,0 +1,203 @@
+// ---------------------------------------------------------------------------
+// Keyboard shortcut definitions for the flow editor
+// ---------------------------------------------------------------------------
+
+export interface KeyboardShortcut {
+  /** Unique identifier */
+  id: string;
+  /** Human-readable label shown in command palette and help overlay */
+  label: string;
+  /** Key combo in react-hotkeys-hook format (e.g. "mod+k", "shift+a") */
+  keys: string;
+  /** Display string for macOS (e.g. "⌘K") */
+  macDisplay: string;
+  /** Display string for Windows/Linux (e.g. "Ctrl+K") */
+  winDisplay: string;
+  /** Category for grouping in the command palette */
+  category: ShortcutCategory;
+  /** Optional description for the command palette */
+  description?: string;
+  /** If true, this shortcut is also available when editing text inputs */
+  enableOnFormTags?: boolean;
+}
+
+export type ShortcutCategory = 'general' | 'editing' | 'navigation' | 'view';
+
+const isMac = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+
+/** Get the platform-appropriate display string for a shortcut */
+export function getShortcutDisplay(shortcut: KeyboardShortcut): string {
+  return isMac ? shortcut.macDisplay : shortcut.winDisplay;
+}
+
+// ---------------------------------------------------------------------------
+// Shortcut definitions
+// ---------------------------------------------------------------------------
+
+export const SHORTCUTS = {
+  // === General ===
+  commandPalette: {
+    id: 'command-palette',
+    label: 'Open Command Palette',
+    keys: 'mod+k',
+    macDisplay: '⌘K',
+    winDisplay: 'Ctrl+K',
+    category: 'general',
+    enableOnFormTags: true,
+  },
+  save: {
+    id: 'save',
+    label: 'Save Flow',
+    keys: 'mod+s',
+    macDisplay: '⌘S',
+    winDisplay: 'Ctrl+S',
+    category: 'general',
+    enableOnFormTags: true,
+  },
+  executeFlow: {
+    id: 'execute-flow',
+    label: 'Run Flow',
+    keys: 'mod+enter',
+    macDisplay: '⌘↵',
+    winDisplay: 'Ctrl+Enter',
+    category: 'general',
+    enableOnFormTags: true,
+  },
+  showShortcuts: {
+    id: 'show-shortcuts',
+    label: 'Show Keyboard Shortcuts',
+    keys: 'shift+/',
+    macDisplay: '?',
+    winDisplay: '?',
+    category: 'general',
+  },
+
+  // === Editing ===
+  copy: {
+    id: 'copy',
+    label: 'Copy Selected Nodes',
+    keys: 'mod+c',
+    macDisplay: '⌘C',
+    winDisplay: 'Ctrl+C',
+    category: 'editing',
+  },
+  cut: {
+    id: 'cut',
+    label: 'Cut Selected Nodes',
+    keys: 'mod+x',
+    macDisplay: '⌘X',
+    winDisplay: 'Ctrl+X',
+    category: 'editing',
+  },
+  paste: {
+    id: 'paste',
+    label: 'Paste Nodes',
+    keys: 'mod+v',
+    macDisplay: '⌘V',
+    winDisplay: 'Ctrl+V',
+    category: 'editing',
+  },
+  duplicate: {
+    id: 'duplicate',
+    label: 'Duplicate Selected Nodes',
+    keys: 'mod+d',
+    macDisplay: '⌘D',
+    winDisplay: 'Ctrl+D',
+    category: 'editing',
+  },
+  deleteSelection: {
+    id: 'delete-selection',
+    label: 'Delete Selected Nodes',
+    keys: 'backspace',
+    macDisplay: '⌫',
+    winDisplay: 'Delete',
+    category: 'editing',
+  },
+  selectAll: {
+    id: 'select-all',
+    label: 'Select All Nodes',
+    keys: 'mod+a',
+    macDisplay: '⌘A',
+    winDisplay: 'Ctrl+A',
+    category: 'editing',
+  },
+
+  // === Navigation ===
+  fitView: {
+    id: 'fit-view',
+    label: 'Fit View',
+    keys: 'mod+shift+f',
+    macDisplay: '⌘⇧F',
+    winDisplay: 'Ctrl+Shift+F',
+    category: 'navigation',
+  },
+  zoomIn: {
+    id: 'zoom-in',
+    label: 'Zoom In',
+    keys: 'mod+=',
+    macDisplay: '⌘+',
+    winDisplay: 'Ctrl++',
+    category: 'navigation',
+  },
+  zoomOut: {
+    id: 'zoom-out',
+    label: 'Zoom Out',
+    keys: 'mod+-',
+    macDisplay: '⌘−',
+    winDisplay: 'Ctrl+-',
+    category: 'navigation',
+  },
+
+  // === View ===
+  toggleSidebar: {
+    id: 'toggle-sidebar',
+    label: 'Toggle Node Sidebar',
+    keys: 'mod+b',
+    macDisplay: '⌘B',
+    winDisplay: 'Ctrl+B',
+    category: 'view',
+  },
+  toggleTheme: {
+    id: 'toggle-theme',
+    label: 'Toggle Dark/Light Mode',
+    keys: 'mod+shift+l',
+    macDisplay: '⌘⇧L',
+    winDisplay: 'Ctrl+Shift+L',
+    category: 'view',
+  },
+  toggleChat: {
+    id: 'toggle-chat',
+    label: 'Toggle AI Chat Assistant',
+    keys: 'mod+shift+a',
+    macDisplay: '⌘⇧A',
+    winDisplay: 'Ctrl+Shift+A',
+    category: 'view',
+  },
+} as const satisfies Record<string, KeyboardShortcut>;
+
+export type ShortcutId = keyof typeof SHORTCUTS;
+
+/** All shortcuts as a flat array, for iteration */
+export const ALL_SHORTCUTS: KeyboardShortcut[] = Object.values(SHORTCUTS);
+
+/** Shortcuts grouped by category */
+export function getShortcutsByCategory(): Record<ShortcutCategory, KeyboardShortcut[]> {
+  const grouped: Record<ShortcutCategory, KeyboardShortcut[]> = {
+    general: [],
+    editing: [],
+    navigation: [],
+    view: [],
+  };
+  for (const shortcut of ALL_SHORTCUTS) {
+    grouped[shortcut.category].push(shortcut);
+  }
+  return grouped;
+}
+
+/** Human-readable category labels */
+export const CATEGORY_LABELS: Record<ShortcutCategory, string> = {
+  general: 'General',
+  editing: 'Editing',
+  navigation: 'Navigation',
+  view: 'View',
+};

package/src/components/flow-editor/serialize-to-sdk.ts

@@ -155,19 +155,19 @@ function serializeEdge(edge: ClipboardEdge, nodeIdToRef: Map<string, string>): s
 /**
  * Convert clipboard nodes and edges into SDK source code text.
  *
- * Returns a string like:
+ * Returns a string shaped like a `defineFlow()` body:
  * ```
- * // Nodes
- * input('query', { variableName: 'query' }),
- *
- * model('answer', {
- *   credentialId: 'cred-abc',
- *   model: 'gpt-4o-mini',
- *   prompt: '{{ query }}',
- * }),
- *
- * // Edges
- * ['query', 'answer'],
+ * nodes: [
+ *   input('query', { variableName: 'query' }),
+ *   model('answer', {
+ *     credentialId: 'cred-abc',
+ *     model: 'gpt-4o-mini',
+ *     prompt: '{{ query }}',
+ *   }),
+ * ],
+ * edges: [
+ *   ['query', 'answer'],
+ * ],
  * ```
  */
 export function serializeToSDK(nodes: ClipboardNode[], edges: ClipboardEdge[]): string {
@@ -179,25 +179,26 @@ export function serializeToSDK(nodes: ClipboardNode[], edges: ClipboardEdge[]):
 
   const parts: string[] = [];
 
-  // Nodes section
+  // Nodes array
   if (nodes.length > 0) {
-    parts.push('// Nodes');
+    parts.push('nodes: [');
     for (const n of nodes) {
-      parts.push(serializeNode(n) + ',');
-      parts.push('');
+      parts.push('  ' + serializeNode(n) + ',');
     }
+    parts.push('],');
   }
 
-  // Edges section
+  // Edges array
   const serializedEdges = edges
     .map((e) => serializeEdge(e, nodeIdToRef))
     .filter((e): e is string => e !== null);
 
   if (serializedEdges.length > 0) {
-    parts.push('// Edges');
+    parts.push('edges: [');
     for (const e of serializedEdges) {
-      parts.push(e + ',');
+      parts.push('  ' + e + ',');
     }
+    parts.push('],');
   }
 
   return parts.join('\n').trimEnd();