machinaos 0.0.76 → 0.0.78

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

@@ -0,0 +1,189 @@
+/**
+ * CommandPaletteHost — Dashboard-level command list registration.
+ *
+ * Owns the canonical command set that the global ⌘K palette surfaces.
+ * Receives every action as a handler prop (Dashboard already has them
+ * in scope) plus the active theme controls; assembles a `CommandItem[]`
+ * with stable IDs, hints, and keyboard shortcuts and renders the
+ * underlying CommandPalette.
+ *
+ * New shell action: add a handler to `Handlers`, wire it through from
+ * Dashboard, append a `CommandItem` to `commands` below. No edits to
+ * the CommandPalette primitive itself.
+ */
+
+import * as React from 'react';
+import {
+  Settings as SettingsIcon,
+  KeyRound,
+  Save,
+  Play,
+  Square,
+  FilePlus,
+  FolderOpen,
+  PanelLeftClose,
+  PanelRightClose,
+  Terminal,
+  Palette as PaletteIcon,
+  Download,
+  Upload,
+} from 'lucide-react';
+import { CommandPalette, type CommandItem } from './CommandPalette';
+import { AVAILABLE_THEMES, useTheme, type ThemeName } from '../../contexts/ThemeContext';
+
+interface Handlers {
+  save: () => void;
+  newWorkflow: () => void;
+  open: () => void;
+  run: () => void;
+  stop: () => void;
+  isDeploying: boolean;
+  exportFile: () => void;
+  importJSON: () => void;
+  openSettings: () => void;
+  openCredentials: () => void;
+  toggleSidebar: () => void;
+  toggleComponentPalette: () => void;
+  toggleConsolePanel: () => void;
+}
+
+const THEME_LABEL: Record<ThemeName, string> = {
+  light:        'Light',
+  dark:         'Dark',
+  renaissance:  'Renaissance',
+  greek:        'Greek',
+  edo:          'Edo',
+  steampunk:    'Steampunk',
+  atomic:       'Atomic Modern',
+  cyber:        'Cyber-Tyranny',
+  wasteland:    'Wasteland',
+  rot:          'Necromantic Rot',
+  plague:       'Plague City',
+  surveillance: 'Surveillance',
+};
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  handlers: Handlers;
+}
+
+export const CommandPaletteHost: React.FC<Props> = ({ open, onOpenChange, handlers }) => {
+  const { theme, setTheme } = useTheme();
+
+  const commands: CommandItem[] = React.useMemo(() => {
+    const list: CommandItem[] = [
+      // ── Workflow ───────────────────────────────────────────────────
+      {
+        id: 'workflow.new',
+        label: 'New Workflow',
+        group: 'Workflow',
+        icon: FilePlus,
+        onRun: handlers.newWorkflow,
+      },
+      {
+        id: 'workflow.open',
+        label: 'Open Workflow',
+        group: 'Workflow',
+        icon: FolderOpen,
+        onRun: handlers.open,
+      },
+      {
+        id: 'workflow.save',
+        label: 'Save Workflow',
+        group: 'Workflow',
+        icon: Save,
+        shortcut: '⌘S',
+        onRun: handlers.save,
+      },
+      {
+        id: 'workflow.export',
+        label: 'Export Workflow',
+        group: 'Workflow',
+        icon: Download,
+        onRun: handlers.exportFile,
+      },
+      {
+        id: 'workflow.import',
+        label: 'Import Workflow',
+        group: 'Workflow',
+        icon: Upload,
+        onRun: handlers.importJSON,
+      },
+
+      // ── Run ────────────────────────────────────────────────────────
+      handlers.isDeploying
+        ? {
+            id: 'run.stop',
+            label: 'Stop Workflow',
+            group: 'Run',
+            icon: Square,
+            onRun: handlers.stop,
+          }
+        : {
+            id: 'run.start',
+            label: 'Start Workflow',
+            group: 'Run',
+            icon: Play,
+            onRun: handlers.run,
+          },
+
+      // ── Open panels ────────────────────────────────────────────────
+      {
+        id: 'open.settings',
+        label: 'Open Settings',
+        group: 'Open',
+        icon: SettingsIcon,
+        onRun: handlers.openSettings,
+      },
+      {
+        id: 'open.credentials',
+        label: 'Open Credentials',
+        group: 'Open',
+        icon: KeyRound,
+        onRun: handlers.openCredentials,
+      },
+
+      // ── View toggles ───────────────────────────────────────────────
+      {
+        id: 'view.sidebar',
+        label: 'Toggle Sidebar',
+        group: 'View',
+        icon: PanelLeftClose,
+        onRun: handlers.toggleSidebar,
+      },
+      {
+        id: 'view.palette',
+        label: 'Toggle Component Palette',
+        group: 'View',
+        icon: PanelRightClose,
+        onRun: handlers.toggleComponentPalette,
+      },
+      {
+        id: 'view.console',
+        label: 'Toggle Console / Chat Panel',
+        group: 'View',
+        icon: Terminal,
+        onRun: handlers.toggleConsolePanel,
+      },
+    ];
+
+    // ── Theme switch ─────────────────────────────────────────────────
+    for (const name of AVAILABLE_THEMES) {
+      list.push({
+        id: `theme.${name}`,
+        label: `Switch theme: ${THEME_LABEL[name]}`,
+        group: 'Theme',
+        icon: PaletteIcon,
+        hint: name === theme ? 'active' : undefined,
+        onRun: () => setTheme(name),
+      });
+    }
+
+    return list;
+  }, [handlers, theme, setTheme]);
+
+  return <CommandPalette open={open} onOpenChange={onOpenChange} commands={commands} />;
+};
+
+export default CommandPaletteHost;

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

@@ -22,6 +22,8 @@ const ComponentItem: React.FC<ComponentItemProps> = ({ definition: localDefiniti
   const iconRaw = spec?.icon ?? definition.icon;
 
   return (
+    // bg-bg-app + border-default match the handoff `.comp` card.
+    // Hover lifts via translate + outline + soft tint backdrop.
     <Card
       size="sm"
       draggable
@@ -31,13 +33,17 @@ const ComponentItem: React.FC<ComponentItemProps> = ({ definition: localDefiniti
       }}
       onDragEnd={() => setIsDragging(false)}
       className={cn(
-        'group relative flex-row items-center gap-3 px-3 py-2 cursor-grab select-none',
-        'transition-all duration-150 ease-out',
-        'hover:-translate-y-0.5 hover:ring-2 hover:ring-foreground/15 hover:shadow-md',
+        // `comp` + `row` are handoff structural hooks: comp activates
+        // per-theme component-card decorations (left accent bar on Cyber,
+        // boomerang corners on Atomic, gold border on Renaissance hover);
+        // row enables the global hover-sound delegate.
+        'comp row group relative flex-row items-center gap-3 px-3 py-2 cursor-grab select-none',
+        'border-border-default bg-bg-app transition-all duration-150 ease-out',
+        'hover:-translate-y-0.5 hover:bg-bg-hover hover:ring-2 hover:ring-foreground/15 hover:shadow-md',
         isDragging && 'opacity-50',
       )}
     >
-      <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted ring-1 ring-foreground/10">
+      <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-bg-elevated ring-1 ring-border-default/40">
         <NodeIcon
           icon={iconRaw}
           className="h-5 w-5 text-lg"
@@ -46,16 +52,16 @@ const ComponentItem: React.FC<ComponentItemProps> = ({ definition: localDefiniti
       </div>
 
       <div className="min-w-0 flex-1">
-        <div className="truncate text-sm font-medium text-foreground">
+        <div className="truncate font-display text-sm font-medium text-fg-default">
           {definition.displayName}
         </div>
-        <div className="truncate text-xs leading-tight text-muted-foreground">
+        <div className="truncate text-xs leading-tight text-fg-muted">
           {definition.description}
         </div>
       </div>
 
       <GripVertical
-        className="h-4 w-4 shrink-0 text-muted-foreground opacity-30 transition-opacity group-hover:opacity-60"
+        className="h-4 w-4 shrink-0 text-fg-faint opacity-50 transition-opacity group-hover:opacity-80"
         aria-hidden
       />
     </Card>

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

@@ -27,7 +27,7 @@ const ComponentPalette: React.FC<ComponentPaletteProps> = ({
   specsReady = false,
 }) => {
   const theme = useAppTheme();
-  const { isVisible } = useNodeAllowlist();
+  const { isBlocked, isAllowed } = useNodeAllowlist();
 
   // Backend-driven group metadata via the shared WS-in-queryFn hook.
   // `useNodeGroups` returns the full query result so we can render a
@@ -55,9 +55,16 @@ const ComponentPalette: React.FC<ComponentPaletteProps> = ({
     const definitions = listCachedNodeSpecs().map(nodeSpecToDescription);
 
     const filteredDefinitions = definitions.filter((definition) => {
-      // Filter by backend allowlist (server/config/node_allowlist.json).
-      // Applied only in normal mode; dev mode shows every node.
-      if (!proMode && !isVisible(definition.name)) return false;
+      // Backend allowlist (server/config/node_allowlist.json). Two-tier:
+      //   1. `disabled_groups` + `disabled_nodes` — absolute blocklist
+      //      enforced in BOTH normal and dev mode. The node's group
+      //      array is passed so `disabled_groups` fires on every plugin
+      //      in the group (e.g. all 16 android service nodes hidden by
+      //      one entry).
+      //   2. `enabled_nodes` — positive allowlist applied only in
+      //      normal mode; dev/pro mode bypasses it.
+      if (isBlocked(definition.name, definition.group)) return false;
+      if (!proMode && !isAllowed(definition.name)) return false;
 
       // Filter by search query
       if (searchQuery.trim()) {
@@ -99,7 +106,7 @@ const ComponentPalette: React.FC<ComponentPaletteProps> = ({
     });
 
     return categories;
-  }, [searchQuery, proMode, groupIndex, isVisible, specsReady]);
+  }, [searchQuery, proMode, groupIndex, isBlocked, isAllowed, specsReady]);
 
   const totalComponents = Object.values(categorizedComponents).reduce(
     (acc, components) => acc + components.length, 
@@ -107,19 +114,23 @@ const ComponentPalette: React.FC<ComponentPaletteProps> = ({
   );
 
   return (
-    <div className="flex h-full w-full flex-col overflow-hidden bg-muted/30">
-      {/* Header Section */}
-      <div className="border-b border-border bg-card p-4">
+    // Palette shell: `palette` co-class activates per-theme decorations
+    // (panel textures, neon side-glow on Cyber, marble grain on Greek).
+    <div className="palette flex h-full w-full flex-col overflow-hidden border-l border-border-default bg-bg-panel">
+      {/* Header Section — bg-bg-app drops one elevation step. */}
+      <div className="border-b border-border-default bg-bg-app p-4">
         <div className="mb-3 flex items-center justify-between">
-          <h2 className="text-base font-semibold text-foreground">Components</h2>
-          <Badge variant="secondary" className="text-xs font-medium">
+          <h2 className="font-display text-base font-semibold tracking-[var(--type-tracking-display)] text-fg-default [text-transform:var(--type-uppercase)]">
+            Components
+          </h2>
+          <Badge variant="secondary" className="font-mono text-xs font-medium">
             {totalComponents}
           </Badge>
         </div>
 
         {/* Search Input */}
         <div className="relative">
-          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-fg-faint" />
           <Input
             type="text"
             placeholder="Search..."
@@ -135,7 +146,7 @@ const ComponentPalette: React.FC<ComponentPaletteProps> = ({
         {groupsLoading ? (
           <PaletteSkeleton />
         ) : Object.keys(categorizedComponents).length === 0 ? (
-          <div className="flex flex-col items-center px-6 py-12 text-center text-muted-foreground">
+          <div className="flex flex-col items-center px-6 py-12 text-center text-fg-muted">
             <Search className="mb-3 h-12 w-12 opacity-50" />
             <p className="text-sm">
               No components found matching "{searchQuery}"
@@ -167,7 +178,7 @@ const ComponentPalette: React.FC<ComponentPaletteProps> = ({
                               fallback={<span>📦</span>}
                             />
                           </span>
-                          <span className="text-sm font-semibold text-foreground">
+                          <span className="font-display text-sm font-semibold tracking-[var(--type-tracking-display)] text-fg-default [text-transform:var(--type-uppercase)]">
                             {config.label}
                           </span>
                         </div>

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

@@ -362,8 +362,11 @@ const ConsolePanel: React.FC<ConsolePanelProps> = ({
   // ------------------------------ Render ------------------------------
 
   return (
+    // `chat` co-class is the design-handoff structural hook for per-theme
+    // panel decorations (parchment vellum on Renaissance, neon cyan
+    // top-glow on Cyber, washi noise on Edo, etc.).
     <div
-      className="relative"
+      className="chat relative"
       onWheel={e => {
         // Prevent scroll from propagating to the canvas/page when the cursor
         // is over the panel header, resize handle, or non-scrollable areas.
@@ -386,7 +389,7 @@ const ConsolePanel: React.FC<ConsolePanelProps> = ({
       {/* Panel Header */}
       <div
         onClick={onToggle}
-        className="flex cursor-pointer items-center justify-between border-t border-border bg-card px-3 py-1.5 select-none"
+        className="flex cursor-pointer items-center justify-between border-t border-border-default bg-bg-elevated px-3 py-1.5 select-none"
       >
         <div className="flex items-center gap-2">
           <ChevronDown
@@ -395,7 +398,7 @@ const ConsolePanel: React.FC<ConsolePanelProps> = ({
               !isOpen && 'rotate-180'
             )}
           />
-          <span className="flex items-center gap-1.5 text-sm font-semibold text-foreground">
+          <span className="flex items-center gap-1.5 font-display text-sm font-semibold tracking-[var(--type-tracking-display)] text-fg-default [text-transform:var(--type-uppercase)]">
             Chat / Console
             {(consoleLogs.length > 0 || (chatMessages && chatMessages.length > 0)) && (
               <Badge variant="secondary" className="text-xs">
@@ -411,7 +414,7 @@ const ConsolePanel: React.FC<ConsolePanelProps> = ({
         ref={containerRef}
         style={{ height: isOpen ? `${panelHeight}px` : '0px' }}
         className={cn(
-          'flex flex-row overflow-hidden bg-background',
+          'flex flex-row overflow-hidden bg-bg-app',
           'max-h-[calc(100vh-90px)]',
           (isResizing || isHorizontalResizing) ? '[transition:none]' : 'transition-[height] duration-200 ease-in-out'
         )}
@@ -422,9 +425,9 @@ const ConsolePanel: React.FC<ConsolePanelProps> = ({
           className="relative flex flex-col overflow-hidden"
         >
           {/* Header */}
-          <div className="flex min-h-[32px] items-center justify-between border-b border-border bg-card px-3 py-1.5">
+          <div className="flex min-h-[32px] items-center justify-between border-b border-border-default bg-bg-elevated px-3 py-1.5">
             <div className="flex items-center gap-2">
-              <span className="flex items-center gap-1.5 text-sm font-semibold text-foreground">
+              <span className="flex items-center gap-1.5 font-display text-sm font-semibold tracking-[var(--type-tracking-display)] text-fg-default [text-transform:var(--type-uppercase)]">
                 Chat
                 {chatMessages && chatMessages.length > 0 && (
                   <Badge variant="success" className="text-xs">{chatMessages.length}</Badge>
@@ -483,10 +486,15 @@ const ConsolePanel: React.FC<ConsolePanelProps> = ({
                     <div
                       key={`${msg.timestamp}-${index}`}
                       className={cn(
-                        'max-w-[80%] px-3 py-2 break-words',
+                        // `chat-msg` + `chat-msg-user` / `chat-msg-bot`
+                        // co-classes activate per-theme bubble decorations
+                        // (Renaissance: gold-foil user / vellum bot with
+                        // ✦ marker; Cyber: > USER:: / < NODE:: prefixes
+                        // with neon glow; etc.).
+                        'chat-msg max-w-[80%] px-3 py-2 break-words',
                         isUser
-                          ? 'mr-0 ml-auto rounded-l-xl rounded-tr-xl rounded-br-sm bg-node-agent-soft'
-                          : 'mr-auto ml-0 rounded-r-xl rounded-tl-xl rounded-bl-sm bg-card'
+                          ? 'chat-msg-user mr-0 ml-auto rounded-l-xl rounded-tr-xl rounded-br-sm bg-node-agent-soft'
+                          : 'chat-msg-bot mr-auto ml-0 rounded-r-xl rounded-tl-xl rounded-bl-sm border border-border-default bg-bg-elevated'
                       )}
                     >
                       {isUser ? (
@@ -512,7 +520,7 @@ const ConsolePanel: React.FC<ConsolePanelProps> = ({
           </div>
 
           {/* Input */}
-          <div className="flex items-center gap-2 border-t border-border bg-card px-4 py-2.5">
+          <div className="flex items-center gap-2 border-t border-border-default bg-bg-elevated px-4 py-2.5">
             <Input
               ref={chatInputRef}
               type="text"
@@ -549,7 +557,7 @@ const ConsolePanel: React.FC<ConsolePanelProps> = ({
         {/* ===================== Console / Terminal Section (right) ===================== */}
         <div className="flex flex-1 flex-col overflow-hidden">
           {/* Header with tabs + filters */}
-          <div className="flex min-h-[32px] items-center justify-between border-b border-border bg-card px-3 py-1.5">
+          <div className="flex min-h-[32px] items-center justify-between border-b border-border-default bg-bg-elevated px-3 py-1.5">
             {/* Tab buttons */}
             <div className="flex items-center gap-1">
               <button

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

@@ -0,0 +1,28 @@
+/**
+ * Wraps content (typically a heading or first paragraph) with the
+ * `v-display drop-cap` className so theme CSS rules like the
+ * Renaissance `.v-display.drop-cap::first-letter` rule fire on the
+ * first letter. Under themes that don't define a drop-cap rule it's a
+ * no-op (just two extra class names on the wrapper).
+ */
+import React from 'react';
+
+export interface DropCapProps {
+  as?: 'h1' | 'h2' | 'h3' | 'p' | 'span' | 'div';
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const DropCap: React.FC<DropCapProps> = ({
+  as: Tag = 'span',
+  className = '',
+  children,
+}) => {
+  return (
+    <Tag className={`v-display drop-cap ${className}`.trim()}>
+      {children}
+    </Tag>
+  );
+};
+
+export default DropCap;

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

@@ -98,7 +98,11 @@ const EditableNodeLabel: React.FC<EditableNodeLabelProps> = ({
         onBlur={handleSave}
         onClick={(e) => e.stopPropagation()}
         className={cn(
-          'mt-2 h-auto max-w-[120px] border-accent px-1 py-0.5 text-center text-xs font-medium',
+          // Both `sq-node-label` and `node-label` co-classes always emit so
+          // per-theme CSS rules fire for whichever parent topology this
+          // label sits inside (`.sq-node` for square, `.node` for
+          // rectangular). Wave 26.B.
+          'sq-node-label node-label mt-2 h-auto max-w-[120px] border-accent px-1 py-0.5 text-center text-xs font-medium',
           className
         )}
       />
@@ -110,7 +114,11 @@ const EditableNodeLabel: React.FC<EditableNodeLabelProps> = ({
       onDoubleClick={onActivate}
       title="Double-click to rename"
       className={cn(
-        'mt-2 max-w-[120px] cursor-text text-center text-xs leading-tight font-medium text-foreground',
+        // Both `sq-node-label` and `node-label` co-classes always emit so
+        // per-theme CSS rules fire for whichever parent topology this
+        // label sits inside (`.sq-node` for square, `.node` for
+        // rectangular). Wave 26.B.
+        'sq-node-label node-label mt-2 max-w-[120px] cursor-text text-center text-xs leading-tight font-medium text-foreground',
         className
       )}
     >

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

@@ -19,7 +19,7 @@ interface InputDataItem {
 }
 
 const InputNodesPanel: React.FC<InputNodesPanelProps> = ({ nodeId }) => {
-  const { currentWorkflow } = useAppStore();
+  const currentWorkflow = useAppStore((s) => s.currentWorkflow);
   const { getNodeOutput } = useWebSocket();
   const [inputData, setInputData] = useState<InputDataItem[]>([]);
   const [loading, setLoading] = useState(false);

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

@@ -9,7 +9,7 @@
  * if you need a new prop.
  */
 
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { X, Settings } from 'lucide-react';
 import {
   Dialog,
@@ -21,6 +21,7 @@ import {
 } from '@/components/ui/dialog';
 import { Dialog as DialogPrimitive } from 'radix-ui';
 import { cn } from '@/lib/utils';
+import { Sounds } from '@/lib/sound';
 
 interface ModalProps {
   isOpen: boolean;
@@ -62,14 +63,40 @@ const Modal: React.FC<ModalProps> = ({
 }) => {
   const showHeader = Boolean(title || headerActions);
 
+  // Fire per-theme open/close sounds on isOpen transitions only — not
+  // on first mount (use a previous-value ref to detect the actual
+  // edge). Sounds.play is a no-op when the engine is disabled.
+  const prevOpenRef = useRef(isOpen);
+  useEffect(() => {
+    const prev = prevOpenRef.current;
+    if (prev !== isOpen) {
+      Sounds.play(isOpen ? 'modalOpen' : 'modalClose');
+      prevOpenRef.current = isOpen;
+    }
+  }, [isOpen]);
+
   return (
     <Dialog open={isOpen} onOpenChange={(next) => { if (!next) onClose(); }}>
       <DialogPortal>
-        <DialogOverlay className="bg-black/50 supports-backdrop-filter:backdrop-blur-xs" />
+        {/* bg-bg-overlay reads --bg-overlay (each theme owns its own
+            scrim alpha + tone — Renaissance uses ink-brown, Cyber uses
+            void-near-black, light/dark use plain blacks). */}
+        <DialogOverlay className="bg-bg-overlay supports-backdrop-filter:backdrop-blur-xs" />
         <DialogPrimitive.Content
           data-slot="dialog-content"
           className={cn(
-            'fixed top-1/2 left-1/2 z-50 flex -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border border-border bg-background shadow-2xl outline-none',
+            // bg-bg-app + border-border-default consume the new-contract
+            // tokens directly so modals inherit the surface hierarchy
+            // defined by the active theme (parchment under Renaissance,
+            // void under Cyber).
+            //
+            // `modal` + `modal-frame` are the design-handoff structural
+            // hooks — per-theme CSS targets these classes for nailed-up
+            // borders (Plague), gilded corners (Renaissance), neon
+            // scanlines (Cyber), double-rule frames (Greek), parchment
+            // textures (Renaissance) on the modal content.
+            'modal modal-frame',
+            'fixed top-1/2 left-1/2 z-50 flex -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border border-border-default bg-bg-app 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',
             className
           )}
@@ -81,15 +108,20 @@ const Modal: React.FC<ModalProps> = ({
           }}
         >
           {showHeader ? (
-            <div className="relative flex w-full items-center border-b border-border bg-card px-5 py-3">
-              <DialogTitle className="absolute left-5 flex items-center gap-2 text-base font-semibold text-foreground/80">
+            // Header: bg-bg-panel sits one elevation step above bg-bg-app
+            // (panel surface above page surface). font-display + tracking
+            // + text-transform are theme-driven so titles read as Cinzel
+            // uppercase under Renaissance and Major Mono Display under
+            // Cyber, while staying clean sans-serif under light/dark.
+            <div className="modal-head relative flex w-full items-center border-b border-border-default bg-bg-panel px-5 py-3">
+              <DialogTitle className="absolute left-5 flex items-center gap-2 font-display text-base font-semibold tracking-[var(--type-tracking-display)] text-fg-default [text-transform:var(--type-uppercase)]">
                 <Settings className="h-4 w-4 opacity-70" />
                 {title}
               </DialogTitle>
               <div className="flex flex-1 items-center justify-center">{headerActions}</div>
               <DialogClose
                 onClick={onClose}
-                className="absolute right-5 inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                className="absolute right-5 inline-flex h-8 w-8 items-center justify-center rounded-md text-fg-muted transition-colors hover:bg-bg-hover hover:text-fg-default"
                 aria-label="Close"
               >
                 <X className="h-[18px] w-[18px]" />

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

@@ -156,7 +156,7 @@ const OutputDisplayPanel: React.FC<OutputDisplayPanelProps> = ({ results, onClea
       <div className="flex items-center justify-between border-b border-border bg-background px-4 py-3">
         <div className="flex items-center gap-2">
           <Play className="h-4 w-4 text-success" />
-          <span className="text-sm font-semibold text-foreground">Execution Results</span>
+          <span className="font-display text-sm font-semibold tracking-[var(--type-tracking-display)] text-fg-default [text-transform:var(--type-uppercase)]">Execution Results</span>
           <Badge variant="secondary" className="text-xs">{results.length}</Badge>
         </div>
         {onClear && (