fix(test): Set HOSTNAME in dev server tests for consistent behavior

Dev server test was failing on non-localhost hostnames (e.g., 'fedora')
because it expected 'localhost' in the URL. Now sets HOSTNAME env var
in test setup and restores it in teardown for consistent test behavior
across all environments.

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

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/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;
-}