@moldable-ai/ui 0.1.1

package/dist/lib/commands.test.js

@@ -0,0 +1,111 @@
+import { afterEach, describe, expect, it } from 'vitest';
+// Re-implement isInMoldable for testing (since it accesses window)
+function isInMoldable() {
+    if (typeof window === 'undefined')
+        return false;
+    return window.parent !== window;
+}
+describe('commands utilities', () => {
+    describe('isInMoldable', () => {
+        const originalWindow = global.window;
+        afterEach(() => {
+            // Restore original window
+            if (originalWindow) {
+                global.window = originalWindow;
+            }
+        });
+        it('returns false when window is undefined (SSR)', () => {
+            // @ts-expect-error - intentionally setting to undefined
+            global.window = undefined;
+            // Re-evaluate with undefined window
+            const result = typeof window === 'undefined' ? false : window.parent !== window;
+            expect(result).toBe(false);
+        });
+        it('returns false when parent equals window (not in iframe)', () => {
+            // jsdom default: window.parent === window
+            expect(isInMoldable()).toBe(false);
+        });
+        it('returns true when parent differs from window (in iframe)', () => {
+            // Mock the iframe scenario
+            const mockParent = {};
+            const originalParent = window.parent;
+            Object.defineProperty(window, 'parent', {
+                value: mockParent,
+                writable: true,
+                configurable: true,
+            });
+            expect(isInMoldable()).toBe(true);
+            // Restore
+            Object.defineProperty(window, 'parent', {
+                value: originalParent,
+                writable: true,
+                configurable: true,
+            });
+        });
+    });
+    describe('CommandAction types', () => {
+        it('navigate action has path', () => {
+            const action = { type: 'navigate', path: '/settings' };
+            expect(action.type).toBe('navigate');
+            expect(action.path).toBe('/settings');
+        });
+        it('message action has payload', () => {
+            const action = { type: 'message', payload: { foo: 'bar' } };
+            expect(action.type).toBe('message');
+            expect(action.payload).toEqual({ foo: 'bar' });
+        });
+        it('focus action has target', () => {
+            const action = { type: 'focus', target: 'input-field' };
+            expect(action.type).toBe('focus');
+            expect(action.target).toBe('input-field');
+        });
+    });
+    describe('AppCommand structure', () => {
+        it('accepts valid command definition', () => {
+            const command = {
+                id: 'add-todo',
+                label: 'Add Todo',
+                shortcut: 'a',
+                icon: '➕',
+                group: 'Tasks',
+                action: { type: 'message', payload: {} },
+            };
+            expect(command.id).toBe('add-todo');
+            expect(command.label).toBe('Add Todo');
+            expect(command.shortcut).toBe('a');
+            expect(command.icon).toBe('➕');
+            expect(command.group).toBe('Tasks');
+        });
+        it('works with minimal required fields', () => {
+            const command = {
+                id: 'test',
+                label: 'Test Command',
+                action: { type: 'navigate', path: '/' },
+            };
+            expect(command.id).toBeDefined();
+            expect(command.label).toBeDefined();
+            expect(command.action).toBeDefined();
+        });
+    });
+    describe('CommandMessage structure', () => {
+        it('has correct type marker', () => {
+            const message = {
+                type: 'moldable:command',
+                command: 'add-todo',
+                payload: { text: 'Buy milk' },
+            };
+            expect(message.type).toBe('moldable:command');
+            expect(message.command).toBe('add-todo');
+            expect(message.payload).toEqual({ text: 'Buy milk' });
+        });
+        it('works without payload', () => {
+            const message = {
+                type: 'moldable:command',
+                command: 'refresh',
+            };
+            expect(message.type).toBe('moldable:command');
+            expect(message.command).toBe('refresh');
+            expect(message.payload).toBeUndefined();
+        });
+    });
+});

package/dist/lib/theme.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+export type Theme = 'light' | 'dark' | 'system';
+type ResolvedTheme = 'light' | 'dark';
+interface ThemeContextValue {
+    theme: Theme;
+    resolvedTheme: ResolvedTheme;
+    setTheme: (theme: Theme) => void;
+}
+export declare function ThemeProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+/**
+ * Inline script to prevent theme flash on page load.
+ * Add this to your <head> in layout.tsx:
+ *
+ * ```tsx
+ * <head>
+ *   <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+ * </head>
+ * ```
+ */
+export declare const themeScript = "\n(function() {\n  var params = new URLSearchParams(window.location.search);\n  var theme = params.get('theme');\n  if (!theme) {\n    theme = localStorage.getItem('moldable-theme');\n  }\n  if (theme === 'system' || !theme) {\n    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n  }\n  document.documentElement.classList.add(theme);\n})();\n";
+export {};
+//# sourceMappingURL=theme.d.ts.map

package/dist/lib/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/lib/theme.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAEd,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAC/C,KAAK,aAAa,GAAG,OAAO,GAAG,MAAM,CAAA;AAErC,UAAU,iBAAiB;IACzB,KAAK,EAAE,KAAK,CAAA;IACZ,aAAa,EAAE,aAAa,CAAA;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACjC;AA6CD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CA0ClE;AAED,wBAAgB,QAAQ,sBAMvB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,kYAYvB,CAAA"}

package/dist/lib/theme.js

@@ -0,0 +1,103 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useState, } from 'react';
+const ThemeContext = createContext(null);
+const STORAGE_KEY = 'moldable-theme';
+function getSystemTheme() {
+    if (typeof window === 'undefined')
+        return 'dark';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+}
+// Check for theme in URL parameter (used when embedded in iframe)
+function getUrlTheme() {
+    if (typeof window === 'undefined')
+        return null;
+    const params = new URLSearchParams(window.location.search);
+    const theme = params.get('theme');
+    if (theme === 'light' || theme === 'dark' || theme === 'system') {
+        return theme;
+    }
+    return null;
+}
+function getStoredTheme() {
+    if (typeof window === 'undefined')
+        return 'system';
+    // URL parameter takes precedence (for iframe embedding)
+    const urlTheme = getUrlTheme();
+    if (urlTheme)
+        return urlTheme;
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === 'light' || stored === 'dark' || stored === 'system') {
+        return stored;
+    }
+    return 'system';
+}
+function resolveTheme(theme) {
+    if (theme === 'system') {
+        return getSystemTheme();
+    }
+    return theme;
+}
+export function ThemeProvider({ children }) {
+    const [theme, setThemeState] = useState(() => getStoredTheme());
+    const [resolvedTheme, setResolvedTheme] = useState(() => resolveTheme(theme));
+    const setTheme = useCallback((newTheme) => {
+        setThemeState(newTheme);
+        localStorage.setItem(STORAGE_KEY, newTheme);
+    }, []);
+    // Apply theme to document
+    useEffect(() => {
+        const resolved = resolveTheme(theme);
+        setResolvedTheme(resolved);
+        const root = document.documentElement;
+        root.classList.remove('light', 'dark');
+        root.classList.add(resolved);
+    }, [theme]);
+    // Listen for system theme changes
+    useEffect(() => {
+        if (theme !== 'system')
+            return;
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const handleChange = () => {
+            const resolved = getSystemTheme();
+            setResolvedTheme(resolved);
+            document.documentElement.classList.remove('light', 'dark');
+            document.documentElement.classList.add(resolved);
+        };
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, [theme]);
+    return (_jsx(ThemeContext.Provider, { value: { theme, resolvedTheme, setTheme }, children: children }));
+}
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+}
+/**
+ * Inline script to prevent theme flash on page load.
+ * Add this to your <head> in layout.tsx:
+ *
+ * ```tsx
+ * <head>
+ *   <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+ * </head>
+ * ```
+ */
+export const themeScript = `
+(function() {
+  var params = new URLSearchParams(window.location.search);
+  var theme = params.get('theme');
+  if (!theme) {
+    theme = localStorage.getItem('moldable-theme');
+  }
+  if (theme === 'system' || !theme) {
+    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  document.documentElement.classList.add(theme);
+})();
+`;

package/dist/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/lib/workspace.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode } from 'react';
+/**
+ * Header name used to pass workspace ID from client to server.
+ * Keep in sync with @moldable-ai/storage WORKSPACE_HEADER
+ */
+export declare const WORKSPACE_HEADER = "x-moldable-workspace";
+interface WorkspaceContextValue {
+    /**
+     * The current workspace ID (from URL param or default 'personal')
+     */
+    workspaceId: string;
+    /**
+     * Fetch function that automatically includes the workspace header.
+     * Use this for all API calls to ensure workspace isolation.
+     */
+    fetchWithWorkspace: typeof fetch;
+}
+export declare function WorkspaceProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access current workspace context.
+ *
+ * @returns workspaceId and fetchWithWorkspace utility
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { workspaceId, fetchWithWorkspace } = useWorkspace()
+ *
+ *   // Use in TanStack Query
+ *   const { data } = useQuery({
+ *     queryKey: ['notes', workspaceId],
+ *     queryFn: () => fetchWithWorkspace('/api/notes').then(r => r.json()),
+ *   })
+ * }
+ * ```
+ */
+export declare function useWorkspace(): WorkspaceContextValue;
+export {};
+//# sourceMappingURL=workspace.d.ts.map

package/dist/lib/workspace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace.d.ts","sourceRoot":"","sources":["../../src/lib/workspace.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAA;AAEd;;;GAGG;AACH,eAAO,MAAM,gBAAgB,yBAAyB,CAAA;AAEtD,UAAU,qBAAqB;IAC7B;;OAEG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,kBAAkB,EAAE,OAAO,KAAK,CAAA;CACjC;AAcD,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAuDtE;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,0BAM3B"}

package/dist/lib/workspace.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+/**
+ * Header name used to pass workspace ID from client to server.
+ * Keep in sync with @moldable-ai/storage WORKSPACE_HEADER
+ */
+export const WORKSPACE_HEADER = 'x-moldable-workspace';
+const WorkspaceContext = createContext(null);
+/**
+ * Get workspace ID from URL query parameter.
+ * Used when app is embedded in Moldable desktop iframe.
+ */
+function getUrlWorkspace() {
+    if (typeof window === 'undefined')
+        return null;
+    const params = new URLSearchParams(window.location.search);
+    return params.get('workspace');
+}
+export function WorkspaceProvider({ children }) {
+    const [workspaceId, setWorkspaceId] = useState('personal');
+    // Read workspace from URL on mount and when URL changes
+    useEffect(() => {
+        const urlWorkspace = getUrlWorkspace();
+        if (urlWorkspace) {
+            setWorkspaceId(urlWorkspace);
+        }
+    }, []);
+    // Listen for URL changes (e.g., when workspace switches and iframe reloads)
+    useEffect(() => {
+        const handleUrlChange = () => {
+            const urlWorkspace = getUrlWorkspace();
+            if (urlWorkspace && urlWorkspace !== workspaceId) {
+                setWorkspaceId(urlWorkspace);
+            }
+        };
+        // Check on popstate (back/forward navigation)
+        window.addEventListener('popstate', handleUrlChange);
+        return () => {
+            window.removeEventListener('popstate', handleUrlChange);
+        };
+    }, [workspaceId]);
+    // Create a fetch wrapper that adds the workspace header
+    const fetchWithWorkspace = useCallback(async (input, init) => {
+        const headers = new Headers(init?.headers);
+        headers.set(WORKSPACE_HEADER, workspaceId);
+        return fetch(input, {
+            ...init,
+            headers,
+        });
+    }, [workspaceId]);
+    const value = useMemo(() => ({
+        workspaceId,
+        fetchWithWorkspace,
+    }), [workspaceId, fetchWithWorkspace]);
+    return (_jsx(WorkspaceContext.Provider, { value: value, children: children }));
+}
+/**
+ * Hook to access current workspace context.
+ *
+ * @returns workspaceId and fetchWithWorkspace utility
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { workspaceId, fetchWithWorkspace } = useWorkspace()
+ *
+ *   // Use in TanStack Query
+ *   const { data } = useQuery({
+ *     queryKey: ['notes', workspaceId],
+ *     queryFn: () => fetchWithWorkspace('/api/notes').then(r => r.json()),
+ *   })
+ * }
+ * ```
+ */
+export function useWorkspace() {
+    const context = useContext(WorkspaceContext);
+    if (!context) {
+        throw new Error('useWorkspace must be used within a WorkspaceProvider');
+    }
+    return context;
+}

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@moldable-ai/ui",
+  "version": "0.1.1",
+  "description": "Shared UI components for Moldable applications",
+  "author": "Desiderata LLC",
+  "license": "Elastic-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/moldable-ai/moldable.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://moldable.sh",
+  "bugs": {
+    "url": "https://github.com/moldable-ai/moldable/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./src/styles/index.css"
+  },
+  "files": [
+    "dist",
+    "src/styles",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "@tailwindcss/typography": "^0.5.16",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "1.1.0",
+    "framer-motion": "^12.15.0",
+    "lucide-react": "^0.473.0",
+    "react-markdown": "^10.1.0",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
+    "shiki": "^3.21.0",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^4.1.10",
+    "tw-animate-css": "^1.3.4"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.3",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.1.6",
+    "jsdom": "^26.1.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4",
+    "@moldable-ai/eslint-config": "0.0.1",
+    "@moldable-ai/prettier-config": "0.0.1",
+    "@moldable-ai/typescript-config": "0.0.1"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "lint": "eslint . --ext .ts,.tsx --max-warnings 0",
+    "format": "prettier --write . --ignore-path ../../.prettierignore",
+    "check-types": "tsc --noEmit",
+    "test": "vitest run"
+  }
+}

package/src/styles/index.css

@@ -0,0 +1,199 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@plugin "@tailwindcss/typography";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-status-running: var(--status-running);
+  --color-status-stopped: var(--status-stopped);
+  --color-status-pending: var(--status-pending);
+  --color-status-error: var(--status-error);
+  --color-terminal: var(--terminal);
+  --color-terminal-header: var(--terminal-header);
+  --color-terminal-foreground: var(--terminal-foreground);
+  --color-terminal-muted: var(--terminal-muted);
+  --color-terminal-border: var(--terminal-border);
+  --color-terminal-stdout: var(--terminal-stdout);
+  --color-terminal-stderr: var(--terminal-stderr);
+  --color-terminal-error: var(--terminal-error);
+  --chat-safe-padding: var(--chat-safe-padding);
+}
+
+:root {
+  --radius: 0.65rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.7145 0.185 45.03);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.5866 0.1994 31.76);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.7145 0.185 45.03);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.967 0.001 286.375);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.7145 0.185 45.03);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.9212 0.0029 264.54);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.7145 0.185 45.03);
+  --warning: oklch(0.75 0.15 75);
+  --warning-foreground: oklch(0.35 0.1 75);
+  --success: oklch(0.65 0.2 145);
+  --success-foreground: oklch(0.985 0 0);
+  --status-running: oklch(0.65 0.2 145);
+  --status-stopped: oklch(0.552 0.016 285.938);
+  --status-pending: oklch(0.75 0.15 75);
+  --status-error: oklch(0.5866 0.1994 31.76);
+  /* Terminal - stays dark in both modes */
+  --terminal: oklch(0.16 0 0);
+  --terminal-header: oklch(0.22 0 0);
+  --terminal-foreground: oklch(0.97 0 0);
+  --terminal-muted: oklch(0.55 0 0);
+  --terminal-border: oklch(0.32 0 0);
+  --terminal-stdout: oklch(0.75 0 0);
+  --terminal-stderr: oklch(0.78 0.12 75);
+  --terminal-error: oklch(0.7 0.16 25);
+  --chat-safe-padding: 104px;
+}
+
+.dark {
+  --background: oklch(0.235 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.269 0.0018 286.28);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.269 0.0018 286.28);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.7145 0.185 45.03);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.3375 0.0035 286.21);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.3375 0.0035 286.21);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.3375 0.0035 286.21);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.7145 0.185 45.03);
+  --chart-1: oklch(0.7145 0.185 45.03);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.235 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.7145 0.185 45.03);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.3375 0.0035 286.21);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.7145 0.185 45.03);
+  --warning: oklch(0.8 0.12 75);
+  --warning-foreground: oklch(0.25 0.08 75);
+  --success: oklch(0.7 0.18 145);
+  --success-foreground: oklch(0.235 0 0);
+  --status-running: oklch(0.7 0.18 145);
+  --status-stopped: oklch(0.705 0.015 286.067);
+  --status-pending: oklch(0.8 0.12 75);
+  --status-error: oklch(0.704 0.191 22.216);
+  /* Terminal - same dark look in dark mode */
+  --terminal: oklch(0.16 0 0);
+  --terminal-header: oklch(0.22 0 0);
+  --terminal-foreground: oklch(0.97 0 0);
+  --terminal-muted: oklch(0.55 0 0);
+  --terminal-border: oklch(0.32 0 0);
+  --terminal-stdout: oklch(0.75 0 0);
+  --terminal-stderr: oklch(0.78 0.12 75);
+  --terminal-error: oklch(0.7 0.16 25);
+  --chat-safe-padding: 104px;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  ::selection {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+}
+
+@layer utilities {
+  .scrollbar-hide {
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+/* Shiki dual-theme support: override inline styles in dark mode */
+.dark .shiki,
+.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+}