fix(docker): Address remaining PR #745 review comments

- Move Playwright install after node_modules copy to use pinned version
- Use local playwright binary instead of npx to avoid registry fetch
- Add --user automaker -w /app flags to docker exec commands
- Change bold text to proper heading in README (MD036 lint fix)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Dockerfile

@@ -118,6 +118,7 @@ RUN curl -fsSL https://opencode.ai/install | bash && \
     echo "=== Checking OpenCode CLI installation ===" && \
     ls -la /home/automaker/.local/bin/ && \
     (which opencode && opencode --version) || echo "opencode installed (may need auth setup)"
+
 USER root
 
 # Add PATH to profile so it's available in all interactive shells (for login shells)
@@ -147,6 +148,15 @@ COPY --from=server-builder /app/apps/server/package*.json ./apps/server/
 # Copy node_modules (includes symlinks to libs)
 COPY --from=server-builder /app/node_modules ./node_modules
 
+# Install Playwright Chromium browser for AI agent verification tests
+# This adds ~300MB to the image but enables automated testing mode out of the box
+# Using the locally installed playwright ensures we use the pinned version from package-lock.json
+USER automaker
+RUN ./node_modules/.bin/playwright install chromium && \
+    echo "=== Playwright Chromium installed ===" && \
+    ls -la /home/automaker/.cache/ms-playwright/ || echo "Playwright browsers installed"
+USER root
+
 # Create data and projects directories
 RUN mkdir -p /data /projects && chown automaker:automaker /data /projects
 

README.md

@@ -338,6 +338,42 @@ services:
 
 The Docker image supports both AMD64 and ARM64 architectures. The GitHub CLI and Claude CLI are automatically downloaded for the correct architecture during build.
 
+##### Playwright for Automated Testing
+
+The Docker image includes **Playwright Chromium pre-installed** for AI agent verification tests. When agents implement features in automated testing mode, they use Playwright to verify the implementation works correctly.
+
+**No additional setup required** - Playwright verification works out of the box.
+
+#### Optional: Persist browsers for manual updates
+
+By default, Playwright Chromium is pre-installed in the Docker image. If you need to manually update browsers or want to persist browser installations across container restarts (not image rebuilds), you can mount a volume.
+
+**Important:** When you first add this volume mount to an existing setup, the empty volume will override the pre-installed browsers. You must re-install them:
+
+```bash
+# After adding the volume mount for the first time
+docker exec --user automaker -w /app automaker-server npx playwright install chromium
+```
+
+Add this to your `docker-compose.override.yml`:
+
+```yaml
+services:
+  server:
+    volumes:
+      - playwright-cache:/home/automaker/.cache/ms-playwright
+
+volumes:
+  playwright-cache:
+    name: automaker-playwright-cache
+```
+
+**Updating browsers manually:**
+
+```bash
+docker exec --user automaker -w /app automaker-server npx playwright install chromium
+```
+
 ### Testing
 
 #### End-to-End Tests (Playwright)

apps/server/src/routes/worktree/routes/init-git.ts

@@ -43,10 +43,14 @@ export function createInitGitHandler() {
         // .git doesn't exist, continue with initialization
       }
 
-      // Initialize git and create an initial empty commit
-      await execAsync(`git init && git commit --allow-empty -m "Initial commit"`, {
-        cwd: projectPath,
-      });
+      // Initialize git with 'main' as the default branch (matching GitHub's standard since 2020)
+      // and create an initial empty commit
+      await execAsync(
+        `git init --initial-branch=main && git commit --allow-empty -m "Initial commit"`,
+        {
+          cwd: projectPath,
+        }
+      );
 
       res.json({
         success: true,

apps/server/tests/integration/helpers/git-test-repo.ts

@@ -20,8 +20,8 @@ export interface TestRepo {
 export async function createTestGitRepo(): Promise<TestRepo> {
   const tmpDir = await fs.mkdtemp(path.join(os.tmpdir(), 'automaker-test-'));
 
-  // Initialize git repo
-  await execAsync('git init', { cwd: tmpDir });
+  // Initialize git repo with 'main' as the default branch (matching GitHub's standard)
+  await execAsync('git init --initial-branch=main', { cwd: tmpDir });
 
   // Use environment variables instead of git config to avoid affecting user's git config
   // These env vars override git config without modifying it
@@ -38,9 +38,6 @@ export async function createTestGitRepo(): Promise<TestRepo> {
   await execAsync('git add .', { cwd: tmpDir, env: gitEnv });
   await execAsync('git commit -m "Initial commit"', { cwd: tmpDir, env: gitEnv });
 
-  // Create main branch explicitly
-  await execAsync('git branch -M main', { cwd: tmpDir });
-
   return {
     path: tmpDir,
     cleanup: async () => {

apps/server/tests/integration/routes/worktree/create.integration.test.ts

@@ -14,7 +14,8 @@ describe('worktree create route - repositories without commits', () => {
 
   async function initRepoWithoutCommit() {
     repoPath = await fs.mkdtemp(path.join(os.tmpdir(), 'automaker-no-commit-'));
-    await execAsync('git init', { cwd: repoPath });
+    // Initialize with 'main' as the default branch (matching GitHub's standard)
+    await execAsync('git init --initial-branch=main', { cwd: repoPath });
     // Don't set git config - use environment variables in commit operations instead
     // to avoid affecting user's git config
     // Intentionally skip creating an initial commit

apps/server/tests/unit/services/dev-server-service.test.ts

@@ -30,11 +30,16 @@ import net from 'net';
 
 describe('dev-server-service.ts', () => {
   let testDir: string;
+  let originalHostname: string | undefined;
 
   beforeEach(async () => {
     vi.clearAllMocks();
     vi.resetModules();
 
+    // Store and set HOSTNAME for consistent test behavior
+    originalHostname = process.env.HOSTNAME;
+    process.env.HOSTNAME = 'localhost';
+
     testDir = path.join(os.tmpdir(), `dev-server-test-${Date.now()}`);
     await fs.mkdir(testDir, { recursive: true });
 
@@ -56,6 +61,13 @@ describe('dev-server-service.ts', () => {
   });
 
   afterEach(async () => {
+    // Restore original HOSTNAME
+    if (originalHostname === undefined) {
+      delete process.env.HOSTNAME;
+    } else {
+      process.env.HOSTNAME = originalHostname;
+    }
+
     try {
       await fs.rm(testDir, { recursive: true, force: true });
     } catch {

apps/ui/scripts/prepare-server.mjs

@@ -7,8 +7,8 @@
  */
 
 import { execSync } from 'child_process';
-import { cpSync, existsSync, mkdirSync, rmSync, writeFileSync, readFileSync } from 'fs';
-import { join, dirname } from 'path';
+import { cpSync, existsSync, mkdirSync, rmSync, writeFileSync, readFileSync, lstatSync } from 'fs';
+import { join, dirname, resolve } from 'path';
 import { fileURLToPath } from 'url';
 
 const __filename = fileURLToPath(import.meta.url);
@@ -112,6 +112,29 @@ execSync('npm install --omit=dev', {
   },
 });
 
+// Step 6b: Replace symlinks for local packages with real copies
+// npm install creates symlinks for file: references, but these break when packaged by electron-builder
+console.log('🔗 Replacing symlinks with real directory copies...');
+const nodeModulesAutomaker = join(BUNDLE_DIR, 'node_modules', '@automaker');
+for (const pkgName of LOCAL_PACKAGES) {
+  const pkgDir = pkgName.replace('@automaker/', '');
+  const nmPkgPath = join(nodeModulesAutomaker, pkgDir);
+  try {
+    // lstatSync does not follow symlinks, allowing us to check for broken ones
+    if (lstatSync(nmPkgPath).isSymbolicLink()) {
+      const realPath = resolve(BUNDLE_DIR, 'libs', pkgDir);
+      rmSync(nmPkgPath);
+      cpSync(realPath, nmPkgPath, { recursive: true });
+      console.log(`   ✓ Replaced symlink: ${pkgName}`);
+    }
+  } catch (error) {
+    // If the path doesn't exist, lstatSync throws ENOENT. We can safely ignore this.
+    if (error.code !== 'ENOENT') {
+      throw error;
+    }
+  }
+}
+
 // Step 7: Rebuild native modules for current architecture
 // This is critical for modules like node-pty that have native bindings
 console.log('🔨 Rebuilding native modules for current architecture...');

apps/ui/src/components/layout/project-switcher/project-switcher.tsx

@@ -1,7 +1,7 @@
 import { useState, useCallback, useEffect } from 'react';
 import { Plus, Bug, FolderOpen, BookOpen } from 'lucide-react';
 import { useNavigate, useLocation } from '@tanstack/react-router';
-import { cn } from '@/lib/utils';
+import { cn, isMac } from '@/lib/utils';
 import { useAppStore } from '@/store/app-store';
 import { useOSDetection } from '@/hooks/use-os-detection';
 import { ProjectSwitcherItem } from './components/project-switcher-item';
@@ -11,9 +11,12 @@ import { NotificationBell } from './components/notification-bell';
 import { NewProjectModal } from '@/components/dialogs/new-project-modal';
 import { OnboardingDialog } from '@/components/layout/sidebar/dialogs';
 import { useProjectCreation } from '@/components/layout/sidebar/hooks';
-import { SIDEBAR_FEATURE_FLAGS } from '@/components/layout/sidebar/constants';
+import {
+  MACOS_ELECTRON_TOP_PADDING_CLASS,
+  SIDEBAR_FEATURE_FLAGS,
+} from '@/components/layout/sidebar/constants';
 import type { Project } from '@/lib/electron';
-import { getElectronAPI } from '@/lib/electron';
+import { getElectronAPI, isElectron } from '@/lib/electron';
 import { initializeProject, hasAppSpec, hasAutomakerDir } from '@/lib/project-init';
 import { toast } from 'sonner';
 import { CreateSpecDialog } from '@/components/views/spec-view/dialogs';
@@ -279,7 +282,12 @@ export function ProjectSwitcher() {
         data-testid="project-switcher"
       >
         {/* Automaker Logo and Version */}
-        <div className="flex flex-col items-center pt-3 pb-2 px-2">
+        <div
+          className={cn(
+            'flex flex-col items-center pb-2 px-2',
+            isMac && isElectron() ? MACOS_ELECTRON_TOP_PADDING_CLASS : 'pt-3'
+          )}
+        >
           <button
             onClick={() => navigate({ to: '/dashboard' })}
             className="group flex flex-col items-center gap-0.5"

apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx

@@ -6,6 +6,7 @@ import type { LucideIcon } from 'lucide-react';
 import { cn, isMac } from '@/lib/utils';
 import { formatShortcut } from '@/store/app-store';
 import { isElectron, type Project } from '@/lib/electron';
+import { MACOS_ELECTRON_TOP_PADDING_CLASS } from '../constants';
 import { getAuthenticatedImageUrl } from '@/lib/api-fetch';
 import { useAppStore } from '@/store/app-store';
 import {
@@ -89,7 +90,7 @@ export function SidebarHeader({
       <div
         className={cn(
           'shrink-0 flex flex-col items-center relative px-2 pt-3 pb-2',
-          isMac && isElectron() && 'pt-[10px]'
+          isMac && isElectron() && MACOS_ELECTRON_TOP_PADDING_CLASS
         )}
       >
         <Tooltip>
@@ -240,7 +241,7 @@ export function SidebarHeader({
     <div
       className={cn(
         'shrink-0 flex flex-col relative px-3 pt-3 pb-2',
-        isMac && isElectron() && 'pt-[10px]'
+        isMac && isElectron() && MACOS_ELECTRON_TOP_PADDING_CLASS
       )}
     >
       {/* Header with logo and project dropdown */}

apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx

@@ -3,7 +3,9 @@ import type { NavigateOptions } from '@tanstack/react-router';
 import { ChevronDown, Wrench, Github, Folder } from 'lucide-react';
 import * as LucideIcons from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
-import { cn } from '@/lib/utils';
+import { cn, isMac } from '@/lib/utils';
+import { isElectron } from '@/lib/electron';
+import { MACOS_ELECTRON_TOP_PADDING_CLASS } from '../constants';
 import { formatShortcut, useAppStore } from '@/store/app-store';
 import { getAuthenticatedImageUrl } from '@/lib/api-fetch';
 import type { NavSection } from '../types';
@@ -117,7 +119,12 @@ export function SidebarNavigation({
       className={cn(
         'flex-1 overflow-y-auto scrollbar-hide px-3 pb-2',
         // Add top padding in discord mode since there's no header
-        sidebarStyle === 'discord' ? 'pt-3' : 'mt-1'
+        // Extra padding for macOS Electron to avoid traffic light overlap
+        sidebarStyle === 'discord'
+          ? isMac && isElectron()
+            ? MACOS_ELECTRON_TOP_PADDING_CLASS
+            : 'pt-3'
+          : 'mt-1'
       )}
     >
       {/* Project name display for classic/discord mode */}

apps/ui/src/components/layout/sidebar/constants.ts

@@ -1,5 +1,11 @@
 import { darkThemes, lightThemes } from '@/config/theme-options';
 
+/**
+ * Tailwind class for top padding on macOS Electron to avoid overlapping with traffic light window controls.
+ * This padding is applied conditionally when running on macOS in Electron.
+ */
+export const MACOS_ELECTRON_TOP_PADDING_CLASS = 'pt-[38px]';
+
 /**
  * Shared constants for theme submenu positioning and layout.
  * Used across project-context-menu and project-selector-with-options components

apps/ui/src/components/ui/provider-icon.tsx

@@ -116,9 +116,8 @@ const PROVIDER_ICON_DEFINITIONS: Record<ProviderIconKey, ProviderIconDefinition>
   },
   copilot: {
     viewBox: '0 0 98 96',
-    // Official GitHub Octocat logo mark
+    // Official GitHub Octocat logo mark (theme-aware via currentColor)
     path: 'M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z',
-    fill: '#ffffff',
   },
 };
 

apps/ui/src/store/app-store.ts

@@ -60,8 +60,6 @@ import {
   type ShortcutKey,
   type KeyboardShortcuts,
   type BackgroundSettings,
-  type UISliceState,
-  type UISliceActions,
   // Settings types
   type ApiKeys,
   // Chat types
@@ -111,13 +109,16 @@ import {
 } from './utils';
 
 // Import default values from modular defaults files
-import { defaultTerminalState, MAX_INIT_OUTPUT_LINES } from './defaults';
-
-// Import UI slice
-import { createUISlice, initialUIState } from './slices';
+import { defaultBackgroundSettings, defaultTerminalState, MAX_INIT_OUTPUT_LINES } from './defaults';
 
 // Import internal theme utils (not re-exported publicly)
-import { persistEffectiveThemeForProject } from './utils/theme-utils';
+import {
+  getEffectiveFont,
+  saveThemeToStorage,
+  saveFontSansToStorage,
+  saveFontMonoToStorage,
+  persistEffectiveThemeForProject,
+} from './utils/theme-utils';
 
 const logger = createLogger('AppStore');
 const OPENCODE_BEDROCK_PROVIDER_ID = 'amazon-bedrock';
@@ -145,8 +146,6 @@ export type {
   ShortcutKey,
   KeyboardShortcuts,
   BackgroundSettings,
-  UISliceState,
-  UISliceActions,
   ApiKeys,
   ImageAttachment,
   TextFileAttachment,
@@ -214,72 +213,56 @@ export { defaultBackgroundSettings, defaultTerminalState, MAX_INIT_OUTPUT_LINES
 // - defaultTerminalState (./defaults/terminal-defaults.ts)
 
 const initialState: AppState = {
-  // Spread UI slice state first
-  ...initialUIState,
-
-  // Project state
   projects: [],
   currentProject: null,
   trashedProjects: [],
   projectHistory: [],
   projectHistoryIndex: -1,
-
-  // Agent Session state
+  currentView: 'welcome',
+  sidebarOpen: true,
+  sidebarStyle: 'unified',
+  collapsedNavSections: {},
+  mobileSidebarHidden: false,
   lastSelectedSessionByProject: {},
-
-  // Features/Kanban
+  theme: getStoredTheme() || 'dark',
+  fontFamilySans: getStoredFontSans(),
+  fontFamilyMono: getStoredFontMono(),
   features: [],
-
-  // App spec
   appSpec: '',
-
-  // IPC status
   ipcConnected: false,
-
-  // API Keys
   apiKeys: {
     anthropic: '',
     google: '',
     openai: '',
   },
-
-  // Chat Sessions
   chatSessions: [],
   currentChatSession: null,
-
-  // Auto Mode
+  chatHistoryOpen: false,
   autoModeByWorktree: {},
   autoModeActivityLog: [],
   maxConcurrency: DEFAULT_MAX_CONCURRENCY,
-
-  // Feature Default Settings
+  boardViewMode: 'kanban',
   defaultSkipTests: true,
   enableDependencyBlocking: true,
   skipVerificationInAutoMode: false,
   enableAiCommitMessages: true,
   planUseSelectedWorktreeBranch: true,
   addFeatureUseSelectedWorktreeBranch: false,
-
-  // Worktree Settings
   useWorktrees: true,
   currentWorktreeByProject: {},
   worktreesByProject: {},
-
-  // Server Settings
+  keyboardShortcuts: DEFAULT_KEYBOARD_SHORTCUTS,
+  muteDoneSound: false,
+  disableSplashScreen: false,
   serverLogLevel: 'info',
   enableRequestLogging: true,
-
-  // Model Settings
+  showQueryDevtools: true,
   enhancementModel: 'claude-sonnet',
   validationModel: 'claude-opus',
   phaseModels: DEFAULT_PHASE_MODELS,
   favoriteModels: [],
-
-  // Cursor CLI Settings
   enabledCursorModels: getAllCursorModelIds(),
   cursorDefaultModel: 'cursor-auto',
-
-  // Codex CLI Settings
   enabledCodexModels: getAllCodexModelIds(),
   codexDefaultModel: 'codex-gpt-5.2-codex',
   codexAutoLoadAgents: false,
@@ -287,8 +270,6 @@ const initialState: AppState = {
   codexApprovalPolicy: 'on-request',
   codexEnableWebSearch: false,
   codexEnableImages: false,
-
-  // OpenCode CLI Settings
   enabledOpencodeModels: getAllOpencodeModelIds(),
   opencodeDefaultModel: DEFAULT_OPENCODE_MODEL,
   dynamicOpencodeModels: [],
@@ -298,101 +279,61 @@ const initialState: AppState = {
   opencodeModelsError: null,
   opencodeModelsLastFetched: null,
   opencodeModelsLastFailedAt: null,
-
-  // Gemini CLI Settings
   enabledGeminiModels: getAllGeminiModelIds(),
   geminiDefaultModel: DEFAULT_GEMINI_MODEL,
-
-  // Copilot SDK Settings
   enabledCopilotModels: getAllCopilotModelIds(),
   copilotDefaultModel: DEFAULT_COPILOT_MODEL,
-
-  // Provider Settings
   disabledProviders: [],
-
-  // Claude Agent SDK Settings
   autoLoadClaudeMd: false,
   skipSandboxWarning: false,
-
-  // MCP Servers
   mcpServers: [],
-
-  // Editor Configuration
   defaultEditorCommand: null,
-
-  // Terminal Configuration
   defaultTerminalId: null,
-
-  // Skills Configuration
   enableSkills: true,
   skillsSources: ['user', 'project'] as Array<'user' | 'project'>,
-
-  // Subagents Configuration
   enableSubagents: true,
   subagentsSources: ['user', 'project'] as Array<'user' | 'project'>,
-
-  // Prompt Customization
   promptCustomization: {},
-
-  // Event Hooks
   eventHooks: [],
-
-  // Claude-Compatible Providers
   claudeCompatibleProviders: [],
   claudeApiProfiles: [],
   activeClaudeApiProfileId: null,
-
-  // Project Analysis
   projectAnalysis: null,
   isAnalyzing: false,
-
-  // Terminal state
+  boardBackgroundByProject: {},
+  previewTheme: null,
   terminalState: defaultTerminalState,
   terminalLayoutByProject: {},
-
-  // Spec Creation
   specCreatingForProject: null,
-
-  // Planning
   defaultPlanningMode: 'skip' as PlanningMode,
   defaultRequirePlanApproval: false,
   defaultFeatureModel: DEFAULT_GLOBAL_SETTINGS.defaultFeatureModel,
   pendingPlanApproval: null,
-
-  // Claude Usage Tracking
   claudeRefreshInterval: 60,
   claudeUsage: null,
   claudeUsageLastUpdated: null,
-
-  // Codex Usage Tracking
   codexUsage: null,
   codexUsageLastUpdated: null,
-
-  // Codex Models
   codexModels: [],
   codexModelsLoading: false,
   codexModelsError: null,
   codexModelsLastFetched: null,
   codexModelsLastFailedAt: null,
-
-  // Pipeline Configuration
   pipelineConfigByProject: {},
-
-  // Project-specific Worktree Settings
+  worktreePanelVisibleByProject: {},
+  showInitScriptIndicatorByProject: {},
   defaultDeleteBranchByProject: {},
+  autoDismissInitScriptIndicatorByProject: {},
   useWorktreesByProject: {},
-
-  // Init Script State
+  worktreePanelCollapsed: false,
+  lastProjectDir: '',
+  recentFolders: [],
   initScriptState: {},
 };
 
-export const useAppStore = create<AppState & AppActions>()((set, get, store) => ({
-  // Spread initial non-UI state
+export const useAppStore = create<AppState & AppActions>()((set, get) => ({
   ...initialState,
 
-  // Spread UI slice (includes UI state and actions)
-  ...createUISlice(set, get, store),
-
   // Project actions
   setProjects: (projects) => set({ projects }),
 
@@ -657,9 +598,28 @@ export const useAppStore = create<AppState & AppActions>()((set, get, store) =>
     saveProjects(get().projects);
   },
 
-  // View actions - provided by UI slice
+  // View actions
+  setCurrentView: (view) => set({ currentView: view }),
+  toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
+  setSidebarOpen: (open) => set({ sidebarOpen: open }),
+  setSidebarStyle: (style) => set({ sidebarStyle: style }),
+  setCollapsedNavSections: (sections) => set({ collapsedNavSections: sections }),
+  toggleNavSection: (sectionLabel) =>
+    set((state) => ({
+      collapsedNavSections: {
+        ...state.collapsedNavSections,
+        [sectionLabel]: !state.collapsedNavSections[sectionLabel],
+      },
+    })),
+  toggleMobileSidebarHidden: () =>
+    set((state) => ({ mobileSidebarHidden: !state.mobileSidebarHidden })),
+  setMobileSidebarHidden: (hidden) => set({ mobileSidebarHidden: hidden }),
 
-  // Theme actions (setTheme, getEffectiveTheme, setPreviewTheme provided by UI slice)
+  // Theme actions
+  setTheme: (theme) => {
+    set({ theme });
+    saveThemeToStorage(theme);
+  },
   setProjectTheme: (projectId: string, theme: ThemeMode | null) => {
     set((state) => ({
       projects: state.projects.map((p) =>
@@ -684,17 +644,34 @@ export const useAppStore = create<AppState & AppActions>()((set, get, store) =>
     // Persist to storage
     saveProjects(get().projects);
   },
+  getEffectiveTheme: () => {
+    const state = get();
+    // If there's a preview theme, use it (for hover preview)
+    if (state.previewTheme) return state.previewTheme;
+    // Otherwise, use project theme if set, or fall back to global theme
+    const projectTheme = state.currentProject?.theme as ThemeMode | undefined;
+    return projectTheme ?? state.theme;
+  },
+  setPreviewTheme: (theme) => set({ previewTheme: theme }),
 
-  // Font actions (setFontSans, setFontMono, getEffectiveFontSans, getEffectiveFontMono provided by UI slice)
+  // Font actions
+  setFontSans: (fontFamily) => {
+    set({ fontFamilySans: fontFamily });
+    saveFontSansToStorage(fontFamily);
+  },
+  setFontMono: (fontFamily) => {
+    set({ fontFamilyMono: fontFamily });
+    saveFontMonoToStorage(fontFamily);
+  },
   setProjectFontSans: (projectId: string, fontFamily: string | null) => {
     set((state) => ({
       projects: state.projects.map((p) =>
-        p.id === projectId ? { ...p, fontFamilySans: fontFamily ?? undefined } : p
+        p.id === projectId ? { ...p, fontSans: fontFamily ?? undefined } : p
       ),
       // Also update currentProject if it's the one being changed
       currentProject:
         state.currentProject?.id === projectId
-          ? { ...state.currentProject, fontFamilySans: fontFamily ?? undefined }
+          ? { ...state.currentProject, fontSans: fontFamily ?? undefined }
           : state.currentProject,
     }));
 
@@ -704,18 +681,28 @@ export const useAppStore = create<AppState & AppActions>()((set, get, store) =>
   setProjectFontMono: (projectId: string, fontFamily: string | null) => {
     set((state) => ({
       projects: state.projects.map((p) =>
-        p.id === projectId ? { ...p, fontFamilyMono: fontFamily ?? undefined } : p
+        p.id === projectId ? { ...p, fontMono: fontFamily ?? undefined } : p
       ),
       // Also update currentProject if it's the one being changed
       currentProject:
         state.currentProject?.id === projectId
-          ? { ...state.currentProject, fontFamilyMono: fontFamily ?? undefined }
+          ? { ...state.currentProject, fontMono: fontFamily ?? undefined }
           : state.currentProject,
     }));
 
     // Persist to storage
     saveProjects(get().projects);
   },
+  getEffectiveFontSans: () => {
+    const state = get();
+    const projectFont = state.currentProject?.fontFamilySans;
+    return getEffectiveFont(projectFont, state.fontFamilySans, UI_SANS_FONT_OPTIONS);
+  },
+  getEffectiveFontMono: () => {
+    const state = get();
+    const projectFont = state.currentProject?.fontFamilyMono;
+    return getEffectiveFont(projectFont, state.fontFamilyMono, UI_MONO_FONT_OPTIONS);
+  },
 
   // Claude API Profile actions (per-project override)
   setProjectClaudeApiProfile: (projectId: string, profileId: string | null | undefined) => {
@@ -899,7 +886,8 @@ export const useAppStore = create<AppState & AppActions>()((set, get, store) =>
       currentChatSession:
         state.currentChatSession?.id === sessionId ? null : state.currentChatSession,
     })),
-  // setChatHistoryOpen and toggleChatHistory - provided by UI slice
+  setChatHistoryOpen: (open) => set({ chatHistoryOpen: open }),
+  toggleChatHistory: () => set((state) => ({ chatHistoryOpen: !state.chatHistoryOpen })),
 
   // Auto Mode actions (per-worktree)
   getWorktreeKey: (projectId: string, branchName: string | null) =>
@@ -1030,7 +1018,8 @@ export const useAppStore = create<AppState & AppActions>()((set, get, store) =>
     }));
   },
 
-  // Kanban Card Settings actions - setBoardViewMode provided by UI slice
+  // Kanban Card Settings actions
+  setBoardViewMode: (mode) => set({ boardViewMode: mode }),
 
   // Feature Default Settings actions
   setDefaultSkipTests: (skip) => set({ defaultSkipTests: skip }),
@@ -1105,17 +1094,29 @@ export const useAppStore = create<AppState & AppActions>()((set, get, store) =>
     return mainWorktree?.branch ?? null;
   },
 
-  // Keyboard Shortcuts actions - provided by UI slice
+  // Keyboard Shortcuts actions
+  setKeyboardShortcut: (key, value) =>
+    set((state) => ({
+      keyboardShortcuts: { ...state.keyboardShortcuts, [key]: value },
+    })),
+  setKeyboardShortcuts: (shortcuts) =>
+    set((state) => ({
+      keyboardShortcuts: { ...state.keyboardShortcuts, ...shortcuts },
+    })),
+  resetKeyboardShortcuts: () => set({ keyboardShortcuts: DEFAULT_KEYBOARD_SHORTCUTS }),
 
-  // Audio Settings actions - setMuteDoneSound provided by UI slice
+  // Audio Settings actions
+  setMuteDoneSound: (muted) => set({ muteDoneSound: muted }),
 
-  // Splash Screen actions - setDisableSplashScreen provided by UI slice
+  // Splash Screen actions
+  setDisableSplashScreen: (disabled) => set({ disableSplashScreen: disabled }),
 
   // Server Log Level actions
   setServerLogLevel: (level) => set({ serverLogLevel: level }),
   setEnableRequestLogging: (enabled) => set({ enableRequestLogging: enabled }),
 
-  // Developer Tools actions - setShowQueryDevtools provided by UI slice
+  // Developer Tools actions
+  setShowQueryDevtools: (show) => set({ showQueryDevtools: show }),
 
   // Enhancement Model actions
   setEnhancementModel: (model) => set({ enhancementModel: model }),
@@ -1485,7 +1486,96 @@ export const useAppStore = create<AppState & AppActions>()((set, get, store) =>
     })),
   getLastSelectedSession: (projectPath) => get().lastSelectedSessionByProject[projectPath] ?? null,
 
-  // Board Background actions - provided by UI slice
+  // Board Background actions
+  setBoardBackground: (projectPath, imagePath) =>
+    set((state) => ({
+      boardBackgroundByProject: {
+        ...state.boardBackgroundByProject,
+        [projectPath]: {
+          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
+          imagePath,
+          imageVersion: Date.now(), // Bust cache on image change
+        },
+      },
+    })),
+  setCardOpacity: (projectPath, opacity) =>
+    set((state) => ({
+      boardBackgroundByProject: {
+        ...state.boardBackgroundByProject,
+        [projectPath]: {
+          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
+          cardOpacity: opacity,
+        },
+      },
+    })),
+  setColumnOpacity: (projectPath, opacity) =>
+    set((state) => ({
+      boardBackgroundByProject: {
+        ...state.boardBackgroundByProject,
+        [projectPath]: {
+          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
+          columnOpacity: opacity,
+        },
+      },
+    })),
+  setColumnBorderEnabled: (projectPath, enabled) =>
+    set((state) => ({
+      boardBackgroundByProject: {
+        ...state.boardBackgroundByProject,
+        [projectPath]: {
+          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
+          columnBorderEnabled: enabled,
+        },
+      },
+    })),
+  getBoardBackground: (projectPath) =>
+    get().boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings,
+  setCardGlassmorphism: (projectPath, enabled) =>
+    set((state) => ({
+      boardBackgroundByProject: {
+        ...state.boardBackgroundByProject,
+        [projectPath]: {
+          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
+          cardGlassmorphism: enabled,
+        },
+      },
+    })),
+  setCardBorderEnabled: (projectPath, enabled) =>
+    set((state) => ({
+      boardBackgroundByProject: {
+        ...state.boardBackgroundByProject,
+        [projectPath]: {
+          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
+          cardBorderEnabled: enabled,
+        },
+      },
+    })),
+  setCardBorderOpacity: (projectPath, opacity) =>
+    set((state) => ({
+      boardBackgroundByProject: {
+        ...state.boardBackgroundByProject,
+        [projectPath]: {
+          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
+          cardBorderOpacity: opacity,
+        },
+      },
+    })),
+  setHideScrollbar: (projectPath, hide) =>
+    set((state) => ({
+      boardBackgroundByProject: {
+        ...state.boardBackgroundByProject,
+        [projectPath]: {
+          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
+          hideScrollbar: hide,
+        },
+      },
+    })),
+  clearBoardBackground: (projectPath) =>
+    set((state) => {
+      const newBackgrounds = { ...state.boardBackgroundByProject };
+      delete newBackgrounds[projectPath];
+      return { boardBackgroundByProject: newBackgrounds };
+    }),
 
   // Terminal actions
   setTerminalUnlocked: (unlocked, token) =>
@@ -2235,9 +2325,27 @@ export const useAppStore = create<AppState & AppActions>()((set, get, store) =>
       };
     }),
 
-  // Worktree Panel Visibility actions - provided by UI slice
+  // Worktree Panel Visibility actions
+  setWorktreePanelVisible: (projectPath, visible) =>
+    set((state) => ({
+      worktreePanelVisibleByProject: {
+        ...state.worktreePanelVisibleByProject,
+        [projectPath]: visible,
+      },
+    })),
+  getWorktreePanelVisible: (projectPath) =>
+    get().worktreePanelVisibleByProject[projectPath] ?? true,
 
-  // Init Script Indicator Visibility actions - provided by UI slice
+  // Init Script Indicator Visibility actions
+  setShowInitScriptIndicator: (projectPath, visible) =>
+    set((state) => ({
+      showInitScriptIndicatorByProject: {
+        ...state.showInitScriptIndicatorByProject,
+        [projectPath]: visible,
+      },
+    })),
+  getShowInitScriptIndicator: (projectPath) =>
+    get().showInitScriptIndicatorByProject[projectPath] ?? true,
 
   // Default Delete Branch actions
   setDefaultDeleteBranch: (projectPath, deleteBranch) =>
@@ -2249,7 +2357,16 @@ export const useAppStore = create<AppState & AppActions>()((set, get, store) =>
     })),
   getDefaultDeleteBranch: (projectPath) => get().defaultDeleteBranchByProject[projectPath] ?? false,
 
-  // Auto-dismiss Init Script Indicator actions - provided by UI slice
+  // Auto-dismiss Init Script Indicator actions
+  setAutoDismissInitScriptIndicator: (projectPath, autoDismiss) =>
+    set((state) => ({
+      autoDismissInitScriptIndicatorByProject: {
+        ...state.autoDismissInitScriptIndicatorByProject,
+        [projectPath]: autoDismiss,
+      },
+    })),
+  getAutoDismissInitScriptIndicator: (projectPath) =>
+    get().autoDismissInitScriptIndicatorByProject[projectPath] ?? true,
 
   // Use Worktrees Override actions
   setProjectUseWorktrees: (projectPath, useWorktrees) =>
@@ -2265,7 +2382,15 @@ export const useAppStore = create<AppState & AppActions>()((set, get, store) =>
     return projectOverride !== undefined ? projectOverride : get().useWorktrees;
   },
 
-  // UI State actions - provided by UI slice
+  // UI State actions
+  setWorktreePanelCollapsed: (collapsed) => set({ worktreePanelCollapsed: collapsed }),
+  setLastProjectDir: (dir) => set({ lastProjectDir: dir }),
+  setRecentFolders: (folders) => set({ recentFolders: folders }),
+  addRecentFolder: (folder) =>
+    set((state) => {
+      const filtered = state.recentFolders.filter((f) => f !== folder);
+      return { recentFolders: [folder, ...filtered].slice(0, 10) };
+    }),
 
   // Claude Usage Tracking actions
   setClaudeRefreshInterval: (interval) => set({ claudeRefreshInterval: interval }),

apps/ui/src/store/slices/index.ts

@@ -1 +0,0 @@
-export { createUISlice, initialUIState, type UISlice } from './ui-slice';

apps/ui/src/store/slices/ui-slice.ts

@@ -1,343 +0,0 @@
-import type { StateCreator } from 'zustand';
-import { UI_SANS_FONT_OPTIONS, UI_MONO_FONT_OPTIONS } from '@/config/ui-font-options';
-import type { SidebarStyle } from '@automaker/types';
-import type {
-  ViewMode,
-  ThemeMode,
-  BoardViewMode,
-  KeyboardShortcuts,
-  BackgroundSettings,
-  UISliceState,
-  UISliceActions,
-} from '../types/ui-types';
-import type { AppState, AppActions } from '../types/state-types';
-import {
-  getStoredTheme,
-  getStoredFontSans,
-  getStoredFontMono,
-  DEFAULT_KEYBOARD_SHORTCUTS,
-} from '../utils';
-import { defaultBackgroundSettings } from '../defaults';
-import {
-  getEffectiveFont,
-  saveThemeToStorage,
-  saveFontSansToStorage,
-  saveFontMonoToStorage,
-} from '../utils/theme-utils';
-
-/**
- * UI Slice
- * Contains all UI-related state and actions extracted from the main app store.
- * This is the first slice pattern implementation in the codebase.
- */
-export type UISlice = UISliceState & UISliceActions;
-
-/**
- * Initial UI state values
- */
-export const initialUIState: UISliceState = {
-  // Core UI State
-  currentView: 'welcome',
-  sidebarOpen: true,
-  sidebarStyle: 'unified',
-  collapsedNavSections: {},
-  mobileSidebarHidden: false,
-
-  // Theme State
-  theme: getStoredTheme() || 'dark',
-  previewTheme: null,
-
-  // Font State
-  fontFamilySans: getStoredFontSans(),
-  fontFamilyMono: getStoredFontMono(),
-
-  // Board UI State
-  boardViewMode: 'kanban',
-  boardBackgroundByProject: {},
-
-  // Settings UI State
-  keyboardShortcuts: DEFAULT_KEYBOARD_SHORTCUTS,
-  muteDoneSound: false,
-  disableSplashScreen: false,
-  showQueryDevtools: true,
-  chatHistoryOpen: false,
-
-  // Panel Visibility State
-  worktreePanelCollapsed: false,
-  worktreePanelVisibleByProject: {},
-  showInitScriptIndicatorByProject: {},
-  autoDismissInitScriptIndicatorByProject: {},
-
-  // File Picker UI State
-  lastProjectDir: '',
-  recentFolders: [],
-};
-
-/**
- * Creates the UI slice for the Zustand store.
- *
- * Uses the StateCreator pattern to allow the slice to access other parts
- * of the combined store state (e.g., currentProject for theme resolution).
- */
-export const createUISlice: StateCreator<AppState & AppActions, [], [], UISlice> = (set, get) => ({
-  // Spread initial state
-  ...initialUIState,
-
-  // ============================================================================
-  // View Actions
-  // ============================================================================
-
-  setCurrentView: (view: ViewMode) => set({ currentView: view }),
-
-  toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
-
-  setSidebarOpen: (open: boolean) => set({ sidebarOpen: open }),
-
-  setSidebarStyle: (style: SidebarStyle) => set({ sidebarStyle: style }),
-
-  setCollapsedNavSections: (sections: Record<string, boolean>) =>
-    set({ collapsedNavSections: sections }),
-
-  toggleNavSection: (sectionLabel: string) =>
-    set((state) => ({
-      collapsedNavSections: {
-        ...state.collapsedNavSections,
-        [sectionLabel]: !state.collapsedNavSections[sectionLabel],
-      },
-    })),
-
-  toggleMobileSidebarHidden: () =>
-    set((state) => ({ mobileSidebarHidden: !state.mobileSidebarHidden })),
-
-  setMobileSidebarHidden: (hidden: boolean) => set({ mobileSidebarHidden: hidden }),
-
-  // ============================================================================
-  // Theme Actions
-  // ============================================================================
-
-  setTheme: (theme: ThemeMode) => {
-    set({ theme });
-    saveThemeToStorage(theme);
-  },
-
-  getEffectiveTheme: (): ThemeMode => {
-    const state = get();
-    // If there's a preview theme, use it (for hover preview)
-    if (state.previewTheme) return state.previewTheme;
-    // Otherwise, use project theme if set, or fall back to global theme
-    const projectTheme = state.currentProject?.theme as ThemeMode | undefined;
-    return projectTheme ?? state.theme;
-  },
-
-  setPreviewTheme: (theme: ThemeMode | null) => set({ previewTheme: theme }),
-
-  // ============================================================================
-  // Font Actions
-  // ============================================================================
-
-  setFontSans: (fontFamily: string | null) => {
-    set({ fontFamilySans: fontFamily });
-    saveFontSansToStorage(fontFamily);
-  },
-
-  setFontMono: (fontFamily: string | null) => {
-    set({ fontFamilyMono: fontFamily });
-    saveFontMonoToStorage(fontFamily);
-  },
-
-  getEffectiveFontSans: (): string | null => {
-    const state = get();
-    const projectFont = state.currentProject?.fontFamilySans;
-    return getEffectiveFont(projectFont, state.fontFamilySans, UI_SANS_FONT_OPTIONS);
-  },
-
-  getEffectiveFontMono: (): string | null => {
-    const state = get();
-    const projectFont = state.currentProject?.fontFamilyMono;
-    return getEffectiveFont(projectFont, state.fontFamilyMono, UI_MONO_FONT_OPTIONS);
-  },
-
-  // ============================================================================
-  // Board View Actions
-  // ============================================================================
-
-  setBoardViewMode: (mode: BoardViewMode) => set({ boardViewMode: mode }),
-
-  setBoardBackground: (projectPath: string, imagePath: string | null) =>
-    set((state) => ({
-      boardBackgroundByProject: {
-        ...state.boardBackgroundByProject,
-        [projectPath]: {
-          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
-          imagePath,
-          imageVersion: Date.now(), // Bust cache on image change
-        },
-      },
-    })),
-
-  setCardOpacity: (projectPath: string, opacity: number) =>
-    set((state) => ({
-      boardBackgroundByProject: {
-        ...state.boardBackgroundByProject,
-        [projectPath]: {
-          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
-          cardOpacity: opacity,
-        },
-      },
-    })),
-
-  setColumnOpacity: (projectPath: string, opacity: number) =>
-    set((state) => ({
-      boardBackgroundByProject: {
-        ...state.boardBackgroundByProject,
-        [projectPath]: {
-          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
-          columnOpacity: opacity,
-        },
-      },
-    })),
-
-  setColumnBorderEnabled: (projectPath: string, enabled: boolean) =>
-    set((state) => ({
-      boardBackgroundByProject: {
-        ...state.boardBackgroundByProject,
-        [projectPath]: {
-          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
-          columnBorderEnabled: enabled,
-        },
-      },
-    })),
-
-  setCardGlassmorphism: (projectPath: string, enabled: boolean) =>
-    set((state) => ({
-      boardBackgroundByProject: {
-        ...state.boardBackgroundByProject,
-        [projectPath]: {
-          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
-          cardGlassmorphism: enabled,
-        },
-      },
-    })),
-
-  setCardBorderEnabled: (projectPath: string, enabled: boolean) =>
-    set((state) => ({
-      boardBackgroundByProject: {
-        ...state.boardBackgroundByProject,
-        [projectPath]: {
-          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
-          cardBorderEnabled: enabled,
-        },
-      },
-    })),
-
-  setCardBorderOpacity: (projectPath: string, opacity: number) =>
-    set((state) => ({
-      boardBackgroundByProject: {
-        ...state.boardBackgroundByProject,
-        [projectPath]: {
-          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
-          cardBorderOpacity: opacity,
-        },
-      },
-    })),
-
-  setHideScrollbar: (projectPath: string, hide: boolean) =>
-    set((state) => ({
-      boardBackgroundByProject: {
-        ...state.boardBackgroundByProject,
-        [projectPath]: {
-          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
-          hideScrollbar: hide,
-        },
-      },
-    })),
-
-  getBoardBackground: (projectPath: string): BackgroundSettings =>
-    get().boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings,
-
-  clearBoardBackground: (projectPath: string) =>
-    set((state) => {
-      const newBackgrounds = { ...state.boardBackgroundByProject };
-      delete newBackgrounds[projectPath];
-      return { boardBackgroundByProject: newBackgrounds };
-    }),
-
-  // ============================================================================
-  // Settings UI Actions
-  // ============================================================================
-
-  setKeyboardShortcut: (key: keyof KeyboardShortcuts, value: string) =>
-    set((state) => ({
-      keyboardShortcuts: { ...state.keyboardShortcuts, [key]: value },
-    })),
-
-  setKeyboardShortcuts: (shortcuts: Partial<KeyboardShortcuts>) =>
-    set((state) => ({
-      keyboardShortcuts: { ...state.keyboardShortcuts, ...shortcuts },
-    })),
-
-  resetKeyboardShortcuts: () => set({ keyboardShortcuts: DEFAULT_KEYBOARD_SHORTCUTS }),
-
-  setMuteDoneSound: (muted: boolean) => set({ muteDoneSound: muted }),
-
-  setDisableSplashScreen: (disabled: boolean) => set({ disableSplashScreen: disabled }),
-
-  setShowQueryDevtools: (show: boolean) => set({ showQueryDevtools: show }),
-
-  setChatHistoryOpen: (open: boolean) => set({ chatHistoryOpen: open }),
-
-  toggleChatHistory: () => set((state) => ({ chatHistoryOpen: !state.chatHistoryOpen })),
-
-  // ============================================================================
-  // Panel Visibility Actions
-  // ============================================================================
-
-  setWorktreePanelCollapsed: (collapsed: boolean) => set({ worktreePanelCollapsed: collapsed }),
-
-  setWorktreePanelVisible: (projectPath: string, visible: boolean) =>
-    set((state) => ({
-      worktreePanelVisibleByProject: {
-        ...state.worktreePanelVisibleByProject,
-        [projectPath]: visible,
-      },
-    })),
-
-  getWorktreePanelVisible: (projectPath: string): boolean =>
-    get().worktreePanelVisibleByProject[projectPath] ?? true,
-
-  setShowInitScriptIndicator: (projectPath: string, visible: boolean) =>
-    set((state) => ({
-      showInitScriptIndicatorByProject: {
-        ...state.showInitScriptIndicatorByProject,
-        [projectPath]: visible,
-      },
-    })),
-
-  getShowInitScriptIndicator: (projectPath: string): boolean =>
-    get().showInitScriptIndicatorByProject[projectPath] ?? true,
-
-  setAutoDismissInitScriptIndicator: (projectPath: string, autoDismiss: boolean) =>
-    set((state) => ({
-      autoDismissInitScriptIndicatorByProject: {
-        ...state.autoDismissInitScriptIndicatorByProject,
-        [projectPath]: autoDismiss,
-      },
-    })),
-
-  getAutoDismissInitScriptIndicator: (projectPath: string): boolean =>
-    get().autoDismissInitScriptIndicatorByProject[projectPath] ?? true,
-
-  // ============================================================================
-  // File Picker UI Actions
-  // ============================================================================
-
-  setLastProjectDir: (dir: string) => set({ lastProjectDir: dir }),
-
-  setRecentFolders: (folders: string[]) => set({ recentFolders: folders }),
-
-  addRecentFolder: (folder: string) =>
-    set((state) => {
-      const filtered = state.recentFolders.filter((f) => f !== folder);
-      return { recentFolders: [folder, ...filtered].slice(0, 10) };
-    }),
-});

apps/ui/src/store/types/ui-types.ts

@@ -117,112 +117,3 @@ export interface KeyboardShortcuts {
   closeTerminal: string;
   newTerminalTab: string;
 }
-
-// Import SidebarStyle from @automaker/types for UI slice
-import type { SidebarStyle } from '@automaker/types';
-
-/**
- * UI Slice State
- * Contains all UI-related state that is extracted into the UI slice.
- */
-export interface UISliceState {
-  // Core UI State
-  currentView: ViewMode;
-  sidebarOpen: boolean;
-  sidebarStyle: SidebarStyle;
-  collapsedNavSections: Record<string, boolean>;
-  mobileSidebarHidden: boolean;
-
-  // Theme State
-  theme: ThemeMode;
-  previewTheme: ThemeMode | null;
-
-  // Font State
-  fontFamilySans: string | null;
-  fontFamilyMono: string | null;
-
-  // Board UI State
-  boardViewMode: BoardViewMode;
-  boardBackgroundByProject: Record<string, BackgroundSettings>;
-
-  // Settings UI State
-  keyboardShortcuts: KeyboardShortcuts;
-  muteDoneSound: boolean;
-  disableSplashScreen: boolean;
-  showQueryDevtools: boolean;
-  chatHistoryOpen: boolean;
-
-  // Panel Visibility State
-  worktreePanelCollapsed: boolean;
-  worktreePanelVisibleByProject: Record<string, boolean>;
-  showInitScriptIndicatorByProject: Record<string, boolean>;
-  autoDismissInitScriptIndicatorByProject: Record<string, boolean>;
-
-  // File Picker UI State
-  lastProjectDir: string;
-  recentFolders: string[];
-}
-
-/**
- * UI Slice Actions
- * Contains all UI-related actions that are extracted into the UI slice.
- */
-export interface UISliceActions {
-  // View Actions
-  setCurrentView: (view: ViewMode) => void;
-  toggleSidebar: () => void;
-  setSidebarOpen: (open: boolean) => void;
-  setSidebarStyle: (style: SidebarStyle) => void;
-  setCollapsedNavSections: (sections: Record<string, boolean>) => void;
-  toggleNavSection: (sectionLabel: string) => void;
-  toggleMobileSidebarHidden: () => void;
-  setMobileSidebarHidden: (hidden: boolean) => void;
-
-  // Theme Actions (Pure UI only - project theme actions stay in main store)
-  setTheme: (theme: ThemeMode) => void;
-  getEffectiveTheme: () => ThemeMode;
-  setPreviewTheme: (theme: ThemeMode | null) => void;
-
-  // Font Actions (Pure UI only - project font actions stay in main store)
-  setFontSans: (fontFamily: string | null) => void;
-  setFontMono: (fontFamily: string | null) => void;
-  getEffectiveFontSans: () => string | null;
-  getEffectiveFontMono: () => string | null;
-
-  // Board View Actions
-  setBoardViewMode: (mode: BoardViewMode) => void;
-  setBoardBackground: (projectPath: string, imagePath: string | null) => void;
-  setCardOpacity: (projectPath: string, opacity: number) => void;
-  setColumnOpacity: (projectPath: string, opacity: number) => void;
-  setColumnBorderEnabled: (projectPath: string, enabled: boolean) => void;
-  setCardGlassmorphism: (projectPath: string, enabled: boolean) => void;
-  setCardBorderEnabled: (projectPath: string, enabled: boolean) => void;
-  setCardBorderOpacity: (projectPath: string, opacity: number) => void;
-  setHideScrollbar: (projectPath: string, hide: boolean) => void;
-  getBoardBackground: (projectPath: string) => BackgroundSettings;
-  clearBoardBackground: (projectPath: string) => void;
-
-  // Settings UI Actions
-  setKeyboardShortcut: (key: keyof KeyboardShortcuts, value: string) => void;
-  setKeyboardShortcuts: (shortcuts: Partial<KeyboardShortcuts>) => void;
-  resetKeyboardShortcuts: () => void;
-  setMuteDoneSound: (muted: boolean) => void;
-  setDisableSplashScreen: (disabled: boolean) => void;
-  setShowQueryDevtools: (show: boolean) => void;
-  setChatHistoryOpen: (open: boolean) => void;
-  toggleChatHistory: () => void;
-
-  // Panel Visibility Actions
-  setWorktreePanelCollapsed: (collapsed: boolean) => void;
-  setWorktreePanelVisible: (projectPath: string, visible: boolean) => void;
-  getWorktreePanelVisible: (projectPath: string) => boolean;
-  setShowInitScriptIndicator: (projectPath: string, visible: boolean) => void;
-  getShowInitScriptIndicator: (projectPath: string) => boolean;
-  setAutoDismissInitScriptIndicator: (projectPath: string, autoDismiss: boolean) => void;
-  getAutoDismissInitScriptIndicator: (projectPath: string) => boolean;
-
-  // File Picker UI Actions
-  setLastProjectDir: (dir: string) => void;
-  setRecentFolders: (folders: string[]) => void;
-  addRecentFolder: (folder: string) => void;
-}

docker-compose.override.yml.example

@@ -21,9 +21,13 @@ services:
       # - ~/.local/share/opencode:/home/automaker/.local/share/opencode
       # - ~/.config/opencode:/home/automaker/.config/opencode
 
-      # Playwright browser cache - persists installed browsers across container restarts
-      # Run 'npx playwright install --with-deps chromium' once, and it will persist
+      # ===== Playwright Browser Cache (Optional) =====
+      # Playwright Chromium is PRE-INSTALLED in the Docker image for automated testing.
+      # Uncomment below to persist browser cache across container rebuilds (saves ~300MB download):
       # - playwright-cache:/home/automaker/.cache/ms-playwright
+      #
+      # To update Playwright browsers manually:
+      #   docker exec --user automaker -w /app automaker-server npx playwright install chromium
     environment:
       # Set root directory for all projects and file operations
       # Users can only create/open projects within this directory
@@ -37,6 +41,7 @@ services:
       # - CURSOR_API_KEY=${CURSOR_API_KEY:-}
 
 volumes:
-  # Playwright cache volume (persists Chromium installs)
+  # Playwright cache volume - optional, persists browser updates across container rebuilds
+  # Uncomment if you mounted the playwright-cache volume above
   # playwright-cache:
   #   name: automaker-playwright-cache

libs/platform/src/system-paths.ts

@@ -750,6 +750,9 @@ export function electronUserDataWriteFileSync(
     throw new Error('[SystemPaths] Electron userData path not initialized');
   }
   const fullPath = path.join(electronUserDataPath, relativePath);
+  // Ensure parent directory exists (may not exist on first launch)
+  const dir = path.dirname(fullPath);
+  fsSync.mkdirSync(dir, { recursive: true });
   fsSync.writeFileSync(fullPath, data, options);
 }