machinaos 0.0.76 → 0.0.78

package/client/src/components/parameterPanel/MiddleSection.tsx

@@ -3,7 +3,6 @@ import { Loader2, Save } from 'lucide-react';
 import { toast } from 'sonner';
 import { useMutation, useQueries, useQuery } from '@tanstack/react-query';
 
-import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Progress } from '@/components/ui/progress';
 import { Checkbox } from '@/components/ui/checkbox';
@@ -30,7 +29,6 @@ import { ActionButton } from '@/components/ui/action-button';
 import ParameterRenderer from '../ParameterRenderer';
 import ToolSchemaEditor from './ToolSchemaEditor';
 import MasterSkillEditor from './MasterSkillEditor';
-import { useAppTheme } from '../../hooks/useAppTheme';
 import { useAppStore } from '../../store/useAppStore';
 import { useWebSocket, CompactionStats } from '../../contexts/WebSocketContext';
 import { useUserSettingsQuery } from '../../hooks/useUserSettingsQuery';
@@ -44,7 +42,12 @@ import { ExecutionResult } from '../../services/executionService';
 import { Edge } from 'reactflow';
 import { shouldShowParameter } from '../../utils/parameterVisibility';
 
-import { resolveNodeDescription } from '../../lib/nodeSpec';
+import { resolveNodeDescription, getCachedNodeSpec } from '../../lib/nodeSpec';
+
+const isMasterSkillNodeType = (nodeType: string | undefined): boolean => {
+  if (!nodeType) return false;
+  return (getCachedNodeSpec(nodeType)?.uiHints as any)?.isMasterSkillEditor === true;
+};
 // Wave 10.G.3: retired the three tribal arrays `SKILL_NODE_TYPES`,
 // `TOOL_NODE_TYPES`, and `AGENT_WITH_SKILLS_TYPES`. The parameter panel
 // now reads `uiHints.hasSkills` / `uiHints.isToolPanel` /
@@ -87,8 +90,7 @@ const MiddleSection: React.FC<MiddleSectionProps> = ({
   isLoadingParameters = false,
   executionResults = []
 }) => {
-  const theme = useAppTheme();
-  const { currentWorkflow } = useAppStore();
+  const currentWorkflow = useAppStore((s) => s.currentWorkflow);
   const { clearMemory, resetSkill, sendRequest, getNodeParameters, compactionStats: contextCompactionStats, updateCompactionStats } = useWebSocket();
 
   const [showClearMemoryDialog, setShowClearMemoryDialog] = useState(false);
@@ -297,7 +299,7 @@ const MiddleSection: React.FC<MiddleSectionProps> = ({
   const masterSkillEdgeSources = useMemo<string[]>(() => {
     const nodes = currentWorkflow?.nodes || [];
     return skillEdges
-      .filter((edge) => nodes.find((n: any) => n.id === edge.source)?.type === 'masterSkill')
+      .filter((edge) => isMasterSkillNodeType(nodes.find((n: any) => n.id === edge.source)?.type))
       .map((edge) => edge.source);
   }, [skillEdges, currentWorkflow?.nodes]);
 
@@ -425,7 +427,7 @@ const MiddleSection: React.FC<MiddleSectionProps> = ({
     for (const edge of skillEdges) {
       const sourceNode = nodes.find((n: any) => n.id === edge.source);
       const nodeType = sourceNode?.type || '';
-      if (nodeType === 'masterSkill') continue;
+      if (isMasterSkillNodeType(nodeType)) continue;
       const def = resolveNodeDescription(nodeType);
       skills.push({
         id: edge.source,
@@ -452,7 +454,7 @@ const MiddleSection: React.FC<MiddleSectionProps> = ({
 
     for (const edge of skillEdges) {
       const sourceNode = nodes.find((n: any) => n.id === edge.source);
-      if (sourceNode?.type === 'masterSkill') {
+      if (isMasterSkillNodeType(sourceNode?.type)) {
         const params = masterSkillParams[edge.source];
         const skillsConfig = params?.skills_config || {};
 
@@ -510,38 +512,21 @@ const MiddleSection: React.FC<MiddleSectionProps> = ({
   const consoleOutput = isCodeExecutorNode ? getConsoleOutput() : '';
 
   return (
-    <div style={{
-      flex: 1,
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-      overflow: 'hidden',
-      position: 'relative'
-    }}>
+    <div className="relative flex h-full flex-1 flex-col overflow-hidden">
       {/* Description - hide for code editor nodes (Python, Skill) and masterSkill */}
       {!needsCodeEditorLayout && !isMasterSkillNode && (
-        <div style={{
-          padding: `${theme.spacing.lg} ${theme.spacing.xl} ${theme.spacing.sm}`,
-          borderBottom: `1px solid ${theme.colors.border}`,
-          backgroundColor: theme.colors.backgroundAlt,
-          flexShrink: 0
-        }}>
-          <p style={{
-            margin: 0,
-            fontSize: theme.fontSize.base,
-            color: theme.colors.textSecondary,
-            lineHeight: '1.5',
-          }}>
+        <div className="shrink-0 border-b border-border-default bg-bg-panel px-6 pt-4 pb-2">
+          <p className="m-0 text-base leading-[1.5] text-fg-muted">
             {nodeDefinition.description}
           </p>
         </div>
       )}
 
       {/* Main Content Area - Flexible */}
-      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, overflow: 'hidden' }}>
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
         {/* Master Skill Editor - Full panel for masterSkill nodes */}
         {isMasterSkillNode ? (
-          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: theme.spacing.lg, overflow: 'hidden' }}>
+          <div className="flex flex-1 flex-col overflow-hidden p-4">
             <MasterSkillEditor
               skillsConfig={parameters.skills_config || {}}
               onConfigChange={(config) => onParameterChange('skills_config', config)}
@@ -553,45 +538,34 @@ const MiddleSection: React.FC<MiddleSectionProps> = ({
         ) : (
         <>
         {/* Parameters */}
-        <div style={{
-          padding: theme.spacing.xl,
-          flex: needsCodeEditorLayout ? '3' : 1,
-          overflowY: needsCodeEditorLayout ? 'hidden' : 'auto',
-          overflowX: 'hidden',
-          width: '100%',
-          boxSizing: 'border-box',
-          minHeight: 0,
-          display: needsCodeEditorLayout ? 'flex' : 'block',
-          flexDirection: 'column'
-        }}>
+        <div
+          className={cn(
+            'box-border min-h-0 w-full overflow-x-hidden p-6',
+            needsCodeEditorLayout
+              ? 'flex flex-[3] flex-col overflow-y-hidden'
+              : 'block flex-1 overflow-y-auto',
+          )}
+        >
           {/* Parameters Container */}
-          <div style={{
-            backgroundColor: theme.colors.background,
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: theme.borderRadius.md,
-            padding: theme.spacing.lg,
-            boxShadow: `0 1px 3px ${theme.colors.shadowLight}`,
-            height: needsCodeEditorLayout ? '100%' : 'auto',
-            display: needsCodeEditorLayout ? 'flex' : 'block',
-            flexDirection: 'column',
-            boxSizing: 'border-box'
-          }}>
+          <div
+            className={cn(
+              'box-border rounded-md border border-border-default bg-bg-elevated p-4 shadow-sm',
+              needsCodeEditorLayout ? 'flex h-full flex-col' : 'block h-auto',
+            )}
+          >
             {/* All Parameters - standard n8n style */}
             {visibleParams.map((param: INodeProperties, index: number) => {
               // Check if this parameter is a code editor - give it more flex space
               const isCodeParam = (param as any).typeOptions?.editor === 'code';
+              const isLast = index === visibleParams.length - 1;
               return (
               <div
                 key={param.name}
-                style={{
-                  paddingBottom: index < visibleParams.length - 1 ? theme.spacing.md : 0,
-                  marginBottom: index < visibleParams.length - 1 ? theme.spacing.md : 0,
-                  borderBottom: index < visibleParams.length - 1 ? `1px solid ${theme.colors.border}` : 'none',
-                  flex: needsCodeEditorLayout && isCodeParam ? 1 : 'none',
-                  display: needsCodeEditorLayout ? 'flex' : 'block',
-                  flexDirection: 'column',
-                  minHeight: needsCodeEditorLayout && isCodeParam ? '300px' : 0
-                }}
+                className={cn(
+                  needsCodeEditorLayout ? 'flex flex-col' : 'block',
+                  !isLast && 'mb-3 border-b border-border-default pb-3',
+                  needsCodeEditorLayout && isCodeParam ? 'min-h-[300px] flex-1' : 'min-h-0 flex-none',
+                )}
               >
                 <ParameterRenderer
                   parameter={param}
@@ -618,21 +592,21 @@ const MiddleSection: React.FC<MiddleSectionProps> = ({
 
             {/* Clear Memory Button - Only for memory nodes */}
             {isMemoryNode && (
-              <div className="mt-3 flex justify-end border-t border-border pt-3">
-                <Button
-                  variant="destructive"
-                  size="sm"
+              <div className="mt-3 flex justify-end border-t border-border-default pt-3">
+                <ActionButton
+                  intent="stop"
                   onClick={() => setShowClearMemoryDialog(true)}
+                  className="h-8"
                 >
                   <Trash2 className="h-3.5 w-3.5" />
                   Clear Memory
-                </Button>
+                </ActionButton>
               </div>
             )}
 
             {/* Reset Skill Button - Only for built-in skill nodes */}
             {isSkillNode && (
-              <div className="mt-3 flex justify-end border-t border-border pt-3">
+              <div className="mt-3 flex justify-end border-t border-border-default pt-3">
                 <ActionButton
                   intent="config"
                   onClick={() => setShowResetSkillDialog(true)}
@@ -710,18 +684,18 @@ const MiddleSection: React.FC<MiddleSectionProps> = ({
 
           {/* Token Usage Section - Only for agent nodes with memory connected */}
           {isAgentWithSkills && connectedMemorySessionId && (
-            <Accordion type="single" collapsible defaultValue="tokens" style={{ marginTop: 16 }}>
+            <Accordion type="single" collapsible defaultValue="tokens" className="mt-4">
               <AccordionItem value="tokens">
                 <AccordionTrigger>
                   {(() => {
                     const ctxLen = compactionStats?.context_length || 0;
                     const displayMax = ctxLen > 0 ? ctxLen : compactionStats?.threshold || 0;
                     return (
-                      <span className="flex flex-1 items-center gap-2">
+                      <span className="font-display tracking-[var(--type-tracking-display)] [text-transform:var(--type-uppercase)] text-fg-default flex flex-1 items-center gap-2">
                         <Zap className="h-4 w-4" />
                         Token Usage
                         {compactionStats && displayMax > 0 && (
-                          <span className="ml-auto text-xs text-muted-foreground">
+                          <span className="ml-auto text-xs text-fg-muted normal-case tracking-normal">
                             {Math.round(compactionStats.total / 1000)}K / {Math.round(displayMax / 1000)}K{ctxLen > 0 ? ' context' : ''}
                           </span>
                         )}
@@ -769,8 +743,9 @@ const MiddleSection: React.FC<MiddleSectionProps> = ({
                                   step={10000}
                                   className="h-7 w-28 text-xs"
                                 />
-                                <Button
-                                  size="icon-sm"
+                                <ActionButton
+                                  intent="save"
+                                  className="h-7 w-7 px-0"
                                   disabled={savingThreshold || !connectedMemorySessionId}
                                   onClick={() => {
                                     if (!connectedMemorySessionId) return;
@@ -781,7 +756,7 @@ const MiddleSection: React.FC<MiddleSectionProps> = ({
                                   }}
                                 >
                                   {savingThreshold ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Save className="h-3.5 w-3.5" />}
-                                </Button>
+                                </ActionButton>
                               </div>
                             </div>
                           ) : (
@@ -829,12 +804,12 @@ const MiddleSection: React.FC<MiddleSectionProps> = ({
             >
               <AccordionItem value="skills">
                 <AccordionTrigger>
-                  <span className="flex flex-1 items-center gap-2">
+                  <span className="font-display tracking-[var(--type-tracking-display)] [text-transform:var(--type-uppercase)] text-fg-default flex flex-1 items-center gap-2">
                     <Sparkles className="h-4 w-4" />
                     Connected Skills
                     <Badge
                       variant={expandedConnectedSkills.length > 0 ? 'default' : 'outline'}
-                      className="ml-auto"
+                      className="ml-auto normal-case tracking-normal"
                     >
                       {expandedConnectedSkills.length}
                     </Badge>
@@ -894,20 +869,22 @@ const MiddleSection: React.FC<MiddleSectionProps> = ({
             <Accordion type="single" collapsible defaultValue="console" className="flex min-h-0 flex-1 flex-col">
               <AccordionItem value="console" className="flex min-h-0 flex-1 flex-col">
                 <AccordionTrigger>
-                  <span className="flex flex-1 items-center gap-2">
+                  <span className="font-display tracking-[var(--type-tracking-display)] [text-transform:var(--type-uppercase)] text-fg-default flex flex-1 items-center gap-2">
                     <TerminalSquare className="h-4 w-4" />
                     Console
                     {consoleOutput && (
-                      <Badge variant="success" className="ml-auto">Output</Badge>
+                      <Badge variant="success" className="ml-auto normal-case tracking-normal">Output</Badge>
                     )}
                   </span>
                 </AccordionTrigger>
                 <AccordionContent className="flex min-h-0 flex-1 flex-col">
-                  <div className="min-h-0 flex-1 overflow-y-auto rounded-md bg-[#1a1a2e] p-2 font-mono text-sm leading-relaxed">
+                  <div className="min-h-0 flex-1 overflow-y-auto rounded-md bg-bg-app p-2 font-mono text-sm leading-relaxed">
                     {consoleOutput ? (
                       <pre
-                        className="m-0 whitespace-pre-wrap break-words"
-                        style={{ color: consoleOutput.startsWith('Error') ? theme.dracula.red : theme.dracula.green }}
+                        className={cn(
+                          'm-0 whitespace-pre-wrap break-words',
+                          consoleOutput.startsWith('Error') ? 'text-destructive' : 'text-success',
+                        )}
                       >
                         {consoleOutput}
                       </pre>

package/client/src/components/parameterPanel/ToolSchemaEditor.tsx

@@ -33,7 +33,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Button } from '@/components/ui/button';
+import { ActionButton } from '@/components/ui/action-button';
 import { Checkbox } from '@/components/ui/checkbox';
 
 import { resolveNodeDescription } from '../../lib/nodeSpec';
@@ -122,10 +122,12 @@ function formValuesToConfig(values: ToolSchemaFormValues): ToolSchemaConfig {
 // Editor
 // ---------------------------------------------------------------------------
 
-const ToolSchemaEditor: React.FC<ToolSchemaEditorProps> = ({ nodeId }) => {
-  const { getToolSchema, saveToolSchema, deleteToolSchema, isLoading } = useToolSchema();
-  const { isConnected } = useWebSocket();
-  const { currentWorkflow } = useAppStore();
+// Outer component is the gate: it only calls the hooks needed to decide
+// whether the editor should render at all. The full hook surface (form,
+// effects, field array) lives in <ToolSchemaEditorBody/> so React's
+// rules-of-hooks invariants hold whether the gate is open or closed.
+const ToolSchemaEditor: React.FC<ToolSchemaEditorProps> = ({ nodeId, toolName, toolDescription }) => {
+  const currentWorkflow = useAppStore((s) => s.currentWorkflow);
 
   const currentNode = useMemo(() => {
     if (!currentWorkflow?.nodes) return null;
@@ -139,6 +141,14 @@ const ToolSchemaEditor: React.FC<ToolSchemaEditorProps> = ({ nodeId }) => {
   const isAndroidTool = (currentNodeDef?.uiHints as any)?.isAndroidToolkit === true;
   if (!isAndroidTool) return null;
 
+  return <ToolSchemaEditorBody nodeId={nodeId} toolName={toolName} toolDescription={toolDescription} />;
+};
+
+const ToolSchemaEditorBody: React.FC<ToolSchemaEditorProps> = ({ nodeId }) => {
+  const { getToolSchema, saveToolSchema, deleteToolSchema, isLoading } = useToolSchema();
+  const { isConnected } = useWebSocket();
+  const currentWorkflow = useAppStore((s) => s.currentWorkflow);
+
   const connectedServices = useMemo(() => {
     if (!currentWorkflow?.edges || !currentWorkflow?.nodes) return [];
     const incomingEdges = currentWorkflow.edges.filter((edge) => edge.target === nodeId);
@@ -244,7 +254,7 @@ const ToolSchemaEditor: React.FC<ToolSchemaEditorProps> = ({ nodeId }) => {
               !isExpanded && '-rotate-90'
             )}
           />
-          <span className="font-semibold text-foreground">Connected Services</span>
+          <span className="font-display tracking-[var(--type-tracking-display)] [text-transform:var(--type-uppercase)] text-sm font-semibold text-fg-default">Connected Services</span>
         </div>
         <span className="text-sm text-muted-foreground">
           {connectedServices.length} service(s)
@@ -279,18 +289,16 @@ const ToolSchemaEditor: React.FC<ToolSchemaEditorProps> = ({ nodeId }) => {
                 )}
               </div>
             ) : (
-              <div className="mb-3 rounded border border-dracula-orange/30 bg-dracula-orange/10 p-2 text-sm text-dracula-orange">
+              <div className="mb-3 rounded border border-warning/30 bg-warning/10 p-2 text-sm text-warning">
                 Connect Android nodes to the input handle
               </div>
             )}
 
             <div className="mb-2 flex items-center justify-between">
-              <label className="text-sm text-muted-foreground">Schema Fields</label>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="h-7 border-dracula-cyan/40 bg-dracula-cyan/15 text-dracula-cyan hover:bg-dracula-cyan/25"
+              <label className="font-display tracking-[var(--type-tracking-display)] [text-transform:var(--type-uppercase)] text-sm text-fg-muted">Schema Fields</label>
+              <ActionButton
+                intent="tools"
+                className="h-7"
                 onClick={() =>
                   append({
                     name: `field_${fields.length + 1}`,
@@ -301,7 +309,7 @@ const ToolSchemaEditor: React.FC<ToolSchemaEditorProps> = ({ nodeId }) => {
                 }
               >
                 + Add
-              </Button>
+              </ActionButton>
             </div>
 
             <div className="flex flex-col gap-1">
@@ -312,17 +320,16 @@ const ToolSchemaEditor: React.FC<ToolSchemaEditorProps> = ({ nodeId }) => {
 
             {hasChanges && (
               <div className="mt-3 flex justify-end gap-2">
-                <Button type="button" variant="outline" size="sm" onClick={handleReset}>
+                <ActionButton intent="config" type="button" onClick={handleReset}>
                   Reset
-                </Button>
-                <Button
+                </ActionButton>
+                <ActionButton
+                  intent="save"
                   type="submit"
-                  size="sm"
                   disabled={isLoading || saveStatus === 'saving'}
-                  className="border-dracula-green/40 bg-dracula-green/15 text-dracula-green hover:bg-dracula-green/25"
                 >
                   {saveStatus === 'saving' ? 'Saving...' : saveStatus === 'saved' ? 'Saved!' : 'Save'}
-                </Button>
+                </ActionButton>
               </div>
             )}
           </form>
@@ -391,14 +398,13 @@ const FieldRow: React.FC<{ index: number; onRemove: () => void }> = ({ index, on
             </FormItem>
           )}
         />
-        <Button
-          type="button"
-          size="sm"
+        <ActionButton
+          intent="stop"
           onClick={onRemove}
-          className="h-7 border-none bg-dracula-red/15 px-2 text-xs text-dracula-red hover:bg-dracula-red/25"
+          className="h-7 px-2 text-xs"
         >
           X
-        </Button>
+        </ActionButton>
       </div>
       <FormField
         control={control}

package/client/src/components/parameterPanel/__tests__/InputSection.test.tsx

@@ -11,13 +11,18 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
+import { renderWithProviders as render } from '../../../test/providers';
 
 // --- Mocks -----------------------------------------------------------------
 
 const storeState: { currentWorkflow: any } = { currentWorkflow: null };
+// Threads the slice selector so `useAppStore((s) => s.currentWorkflow)`
+// returns the right slice. A no-arg `useAppStore()` returns the whole
+// state for legacy whole-store consumers.
 vi.mock('../../../store/useAppStore', () => ({
-  useAppStore: () => storeState,
+  useAppStore: <T,>(selector?: (state: typeof storeState) => T): T | typeof storeState =>
+    selector ? selector(storeState) : storeState,
 }));
 
 const wsMock = {

package/client/src/components/ui/AIResultModal.tsx

@@ -51,7 +51,7 @@ const AIResultModal: React.FC<AIResultModalProps> = ({ isOpen, onClose, result }
         <div className="border-b border-border bg-muted p-4">
           <div className="mb-2 flex items-start justify-between">
             <div>
-              <h3 className="m-0 text-base font-semibold text-foreground">
+              <h3 className="m-0 font-display text-base font-semibold tracking-[var(--type-tracking-display)] text-fg-default [text-transform:var(--type-uppercase)]">
                 {result.nodeName} Result
               </h3>
               <p className="mt-1 mb-0 text-sm text-muted-foreground">

package/client/src/components/ui/CollapsibleSection.tsx

@@ -23,22 +23,26 @@ const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
   const open = !isCollapsed;
   return (
     <Collapsible open={open} onOpenChange={() => onToggle()}>
-      <div className="overflow-hidden rounded-lg border border-border bg-background">
-        <CollapsibleTrigger className="flex w-full cursor-pointer items-center justify-between gap-2 border-none bg-muted px-4 py-3 text-base text-foreground transition-colors hover:bg-card">
+      {/* bg-bg-app + border-default for the outer card; bg-bg-elevated
+          on the trigger so the head sits above the body — matches the
+          handoff `.cat` / `.cat-head` two-tier surface. `cat` /
+          `cat-head` co-classes activate per-theme decorations. */}
+      <div className={cn('cat overflow-hidden rounded-lg border border-border-default bg-bg-app', isCollapsed && 'collapsed')}>
+        <CollapsibleTrigger className="cat-head flex w-full cursor-pointer items-center justify-between gap-2 border-none bg-bg-elevated px-4 py-3 text-base text-fg-default transition-colors hover:bg-bg-hover">
           {typeof title === 'string' ? (
-            <span className="font-medium">{title}</span>
+            <span className="font-display font-medium">{title}</span>
           ) : (
             <div className="flex flex-1 items-center">{title}</div>
           )}
           <ChevronDown
             className={cn(
-              'h-3 w-3 shrink-0 text-muted-foreground transition-transform',
+              'h-3 w-3 shrink-0 text-fg-muted transition-transform',
               isCollapsed && '-rotate-90'
             )}
           />
         </CollapsibleTrigger>
 
-        <CollapsibleContent className={cn('transition-[padding]', open && 'p-3')}>
+        <CollapsibleContent className={cn('cat-body transition-[padding]', open && 'p-3')}>
           {children}
         </CollapsibleContent>
       </div>

package/client/src/components/ui/CommandPalette.tsx

@@ -0,0 +1,147 @@
+/**
+ * CommandPalette — global ⌘K (Ctrl+K) command launcher.
+ *
+ * Lightweight shell action surface inspired by the design handoff's
+ * `.cmdk` panel. Keeps a small registered command set in state; the
+ * Dashboard wires the actual handlers (`onOpenSettings`, etc.) via the
+ * `commands` prop. Composes on top of the cmdk library that ships with
+ * the codebase (CredentialsPalette uses the same dependency).
+ *
+ * Token-driven: chrome reads bg-bg-elevated + border-border-strong;
+ * active row reads bg-bg-active + text-accent. Under Renaissance the
+ * panel becomes an "open scroll" via the per-theme background image
+ * (declared in renaissance.css `.cmdk` block — wired through here by
+ * applying the `cmdk` class on the outer wrapper). Under Cyber it
+ * becomes a "root terminal" with neon-cyan border + scanlines.
+ */
+
+import * as React from 'react';
+import { useEffect } from 'react';
+import { Command } from 'cmdk';
+import { Search } from 'lucide-react';
+import { Dialog, DialogPortal, DialogOverlay, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import { Dialog as DialogPrimitive } from 'radix-ui';
+import { cn } from '@/lib/utils';
+
+export interface CommandItem {
+  id: string;
+  label: string;
+  hint?: string;
+  shortcut?: string;
+  /** lucide-react icon component */
+  icon?: React.ComponentType<{ className?: string }>;
+  /** Group label used to bucket items in the list. */
+  group?: string;
+  /** Invoked when the user presses Enter / clicks the row. */
+  onRun: () => void;
+}
+
+interface CommandPaletteProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  commands: CommandItem[];
+}
+
+export const CommandPalette: React.FC<CommandPaletteProps> = ({ open, onOpenChange, commands }) => {
+  // ⌘K / Ctrl+K toggles the palette globally.
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        onOpenChange(!open);
+      } else if (e.key === 'Escape' && open) {
+        onOpenChange(false);
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [open, onOpenChange]);
+
+  // Bucket commands by group so the list renders Command.Group sections.
+  const groups = React.useMemo(() => {
+    const buckets: Record<string, CommandItem[]> = {};
+    for (const cmd of commands) {
+      const key = cmd.group ?? 'Actions';
+      (buckets[key] ??= []).push(cmd);
+    }
+    return buckets;
+  }, [commands]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogPortal>
+        <DialogOverlay className="bg-bg-overlay" />
+        <DialogPrimitive.Content
+          data-slot="command-palette"
+          className={cn(
+            // `cmdk` class is the per-theme decorative hook (renaissance
+            // and cyber CSS apply backgrounds + borders + scanlines via
+            // `:root[data-theme="..."] .cmdk`).
+            'cmdk fixed left-1/2 top-[14%] z-50 w-[min(560px,92vw)] -translate-x-1/2 overflow-hidden rounded-md border border-border-strong bg-bg-elevated shadow-2xl outline-none',
+            'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 duration-100',
+          )}
+        >
+          <DialogTitle className="sr-only">Command palette</DialogTitle>
+          <DialogDescription className="sr-only">Run a command from the keyboard</DialogDescription>
+
+          <Command label="Command palette" className="flex flex-col" shouldFilter>
+            <div className="relative border-b border-border-default px-4">
+              <Search className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-fg-muted" />
+              <Command.Input
+                placeholder="Type a command or search..."
+                autoFocus
+                className="h-12 w-full bg-transparent pl-7 font-display text-[15px] tracking-[var(--type-tracking-display)] text-fg-default placeholder:text-fg-faint focus:outline-none [text-transform:var(--type-uppercase)]"
+              />
+            </div>
+
+            <Command.List className="max-h-[360px] overflow-y-auto p-1.5">
+              <Command.Empty className="px-3 py-6 text-center text-sm text-fg-muted">
+                No matching commands
+              </Command.Empty>
+
+              {Object.entries(groups).map(([groupName, items]) => (
+                <Command.Group
+                  key={groupName}
+                  heading={groupName}
+                  className="px-1 py-1 text-[10px] font-semibold uppercase tracking-wider text-fg-faint"
+                >
+                  {items.map((cmd) => {
+                    const Icon = cmd.icon;
+                    return (
+                      <Command.Item
+                        key={cmd.id}
+                        value={`${cmd.label} ${cmd.hint ?? ''}`}
+                        onSelect={() => {
+                          onOpenChange(false);
+                          // Defer the action one frame so the dialog
+                          // closes cleanly before the handler fires
+                          // (avoids focus-trap clashes when the action
+                          // opens another modal).
+                          requestAnimationFrame(() => cmd.onRun());
+                        }}
+                        className="flex cursor-pointer items-center gap-3 rounded-sm px-3 py-2 text-sm text-fg-default data-[selected=true]:bg-bg-active data-[selected=true]:text-accent"
+                      >
+                        {Icon && <Icon className="h-4 w-4 shrink-0" />}
+                        <span className="flex-1 truncate font-display">{cmd.label}</span>
+                        {cmd.hint && (
+                          <span className="font-mono text-[11px] text-fg-faint">{cmd.hint}</span>
+                        )}
+                        {cmd.shortcut && (
+                          <kbd className="ml-auto rounded-sm border border-border-default bg-bg-app px-1.5 py-0.5 font-mono text-[10px] text-fg-muted">
+                            {cmd.shortcut}
+                          </kbd>
+                        )}
+                      </Command.Item>
+                    );
+                  })}
+                </Command.Group>
+              ))}
+            </Command.List>
+          </Command>
+        </DialogPrimitive.Content>
+      </DialogPortal>
+    </Dialog>
+  );
+};
+
+export default CommandPalette;