fix(ui,server): Fix project icon updates and image upload issues

- Fix setProjectCustomIcon using wrong property name (customIcon -> customIconPath) - Add currentProject state update to setProjectIcon and setProjectCustomIcon - Fix data URL regex to handle all formats (e.g., charset=utf-8 in GIFs) - Increase project icon size limit from 2MB to 5MB for animated GIFs - Add toast notifications for upload validation errors - Add image error fallback to folder icon in project switcher - Make HttpApiClient get/put methods public for store access - Fix TypeScript errors in app-store.ts (trashedAt type, font properties) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 06:12:03 +00:00 · 2026-01-27 00:09:55 +01:00
parent c848306e4c
commit a60904bd51
10 changed files with 129 additions and 140 deletions
--- a/apps/server/src/routes/fs/routes/save-board-background.ts
+++ b/apps/server/src/routes/fs/routes/save-board-background.ts
@@ -31,7 +31,9 @@ export function createSaveBoardBackgroundHandler() {
      await secureFs.mkdir(boardDir, { recursive: true });

      // Decode base64 data (remove data URL prefix if present)
-      const base64Data = data.replace(/^data:image\/\w+;base64,/, '');
+      // Use a regex that handles all data URL formats including those with extra params
+      // e.g., data:image/gif;charset=utf-8;base64,R0lGOD...
+      const base64Data = data.replace(/^data:[^,]+,/, '');
      const buffer = Buffer.from(base64Data, 'base64');

      // Use a fixed filename for the board background (overwrite previous)
--- a/apps/server/src/routes/fs/routes/save-image.ts
+++ b/apps/server/src/routes/fs/routes/save-image.ts
@@ -31,7 +31,9 @@ export function createSaveImageHandler() {
      await secureFs.mkdir(imagesDir, { recursive: true });

      // Decode base64 data (remove data URL prefix if present)
-      const base64Data = data.replace(/^data:image\/\w+;base64,/, '');
+      // Use a regex that handles all data URL formats including those with extra params
+      // e.g., data:image/gif;charset=utf-8;base64,R0lGOD...
+      const base64Data = data.replace(/^data:[^,]+,/, '');
      const buffer = Buffer.from(base64Data, 'base64');

      // Generate unique filename with timestamp
--- a/apps/ui/src/components/layout/project-switcher/components/edit-project-dialog.tsx
+++ b/apps/ui/src/components/layout/project-switcher/components/edit-project-dialog.tsx
@@ -15,6 +15,7 @@ import { getAuthenticatedImageUrl } from '@/lib/api-fetch';
 import { getHttpApiClient } from '@/lib/http-api-client';
 import type { Project } from '@/lib/electron';
 import { IconPicker } from './icon-picker';
+import { toast } from 'sonner';

 interface EditProjectDialogProps {
  project: Project;
@@ -52,11 +53,18 @@ export function EditProjectDialog({ project, open, onOpenChange }: EditProjectDi
    // Validate file type
    const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
    if (!validTypes.includes(file.type)) {
+      toast.error(
+        `Invalid file type: ${file.type || 'unknown'}. Please use JPG, PNG, GIF or WebP.`
+      );
      return;
    }

-    // Validate file size (max 2MB for icons)
-    if (file.size > 2 * 1024 * 1024) {
+    // Validate file size (max 5MB for icons - allows animated GIFs)
+    const maxSize = 5 * 1024 * 1024;
+    if (file.size > maxSize) {
+      toast.error(
+        `File too large (${(file.size / 1024 / 1024).toFixed(2)} MB). Maximum size is 5 MB.`
+      );
      return;
    }

@@ -72,15 +80,24 @@ export function EditProjectDialog({ project, open, onOpenChange }: EditProjectDi
          file.type,
          project.path
        );
+
        if (result.success && result.path) {
          setCustomIconPath(result.path);
          // Clear the Lucide icon when custom icon is set
          setIcon(null);
+          toast.success('Icon uploaded successfully');
+        } else {
+          toast.error('Failed to upload icon');
        }
        setIsUploadingIcon(false);
      };
+      reader.onerror = () => {
+        toast.error('Failed to read file');
+        setIsUploadingIcon(false);
+      };
      reader.readAsDataURL(file);
    } catch {
+      toast.error('Failed to upload icon');
      setIsUploadingIcon(false);
    }
  };
@@ -162,7 +179,7 @@ export function EditProjectDialog({ project, open, onOpenChange }: EditProjectDi
                    {isUploadingIcon ? 'Uploading...' : 'Upload Custom Icon'}
                  </Button>
                  <p className="text-xs text-muted-foreground mt-1">
-                    PNG, JPG, GIF or WebP. Max 2MB.
+                    PNG, JPG, GIF or WebP. Max 5MB.
                  </p>
                </div>
              </div>
--- a/apps/ui/src/components/layout/project-switcher/components/project-context-menu.tsx
+++ b/apps/ui/src/components/layout/project-switcher/components/project-context-menu.tsx
@@ -59,7 +59,7 @@ interface ThemeButtonProps {
  /** Handler for pointer leave events (used to clear preview) */
  onPointerLeave: (e: React.PointerEvent) => void;
  /** Handler for click events (used to select theme) */
-  onClick: () => void;
+  onClick: (e: React.MouseEvent) => void;
 }

 /**
@@ -77,6 +77,7 @@ const ThemeButton = memo(function ThemeButton({
  const Icon = option.icon;
  return (
    <button
+      type="button"
      onPointerEnter={onPointerEnter}
      onPointerLeave={onPointerLeave}
      onClick={onClick}
@@ -145,7 +146,10 @@ const ThemeColumn = memo(function ThemeColumn({
            isSelected={selectedTheme === option.value}
            onPointerEnter={() => onPreviewEnter(option.value)}
            onPointerLeave={onPreviewLeave}
-            onClick={() => onSelect(option.value)}
+            onClick={(e) => {
+              e.stopPropagation();
+              onSelect(option.value);
+            }}
          />
        ))}
      </div>
@@ -193,7 +197,6 @@ export function ProjectContextMenu({
  const {
    moveProjectToTrash,
    theme: globalTheme,
-    setTheme,
    setProjectTheme,
    setPreviewTheme,
  } = useAppStore();
@@ -316,13 +319,24 @@ export function ProjectContextMenu({

  const handleThemeSelect = useCallback(
    (value: ThemeMode | typeof USE_GLOBAL_THEME) => {
+      // Clear any pending close timeout to prevent race conditions
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = null;
+      }
+
+      // Close menu first
+      setShowThemeSubmenu(false);
+      onClose();
+
+      // Then apply theme changes
      setPreviewTheme(null);
      const isUsingGlobal = value === USE_GLOBAL_THEME;
-      setTheme(isUsingGlobal ? globalTheme : value);
+      // Only set project theme - don't change global theme
+      // The UI uses getEffectiveTheme() which handles: previewTheme ?? projectTheme ?? globalTheme
      setProjectTheme(project.id, isUsingGlobal ? null : value);
-      setShowThemeSubmenu(false);
    },
-    [globalTheme, project.id, setPreviewTheme, setProjectTheme, setTheme]
+    [onClose, project.id, setPreviewTheme, setProjectTheme]
  );

  const handleConfirmRemove = useCallback(() => {
@@ -426,9 +440,13 @@ export function ProjectContextMenu({
                  <div className="p-2">
                    {/* Use Global Option */}
                    <button
+                      type="button"
                      onPointerEnter={() => handlePreviewEnter(globalTheme)}
                      onPointerLeave={handlePreviewLeave}
-                      onClick={() => handleThemeSelect(USE_GLOBAL_THEME)}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleThemeSelect(USE_GLOBAL_THEME);
+                      }}
                      className={cn(
                        'w-full flex items-center gap-2 px-3 py-2 rounded-md',
                        'text-sm font-medium text-left',
--- a/apps/ui/src/components/layout/project-switcher/components/project-switcher-item.tsx
+++ b/apps/ui/src/components/layout/project-switcher/components/project-switcher-item.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Folder, LucideIcon } from 'lucide-react';
 import * as LucideIcons from 'lucide-react';
 import { cn, sanitizeForTestId } from '@/lib/utils';
@@ -19,6 +20,8 @@ export function ProjectSwitcherItem({
  onClick,
  onContextMenu,
 }: ProjectSwitcherItemProps) {
+  const [imageError, setImageError] = useState(false);
+
  // Convert index to hotkey label: 0 -> "1", 1 -> "2", ..., 8 -> "9", 9 -> "0"
  const hotkeyLabel =
    hotkeyIndex !== undefined && hotkeyIndex >= 0 && hotkeyIndex <= 9
@@ -35,7 +38,7 @@ export function ProjectSwitcherItem({
  };

  const IconComponent = getIconComponent();
-  const hasCustomIcon = !!project.customIconPath;
+  const hasCustomIcon = !!project.customIconPath && !imageError;

  // Combine project.id with sanitized name for uniqueness and readability
  // Format: project-switcher-{id}-{sanitizedName}
@@ -74,6 +77,7 @@ export function ProjectSwitcherItem({
            'w-8 h-8 rounded-lg object-cover transition-all duration-200',
            isActive ? 'ring-1 ring-brand-500/50' : 'group-hover:scale-110'
          )}
+          onError={() => setImageError(true)}
        />
      ) : (
        <IconComponent
--- a/apps/ui/src/components/layout/sidebar/components/project-selector-with-options.tsx
+++ b/apps/ui/src/components/layout/sidebar/components/project-selector-with-options.tsx
@@ -100,14 +100,8 @@ export function ProjectSelectorWithOptions({

  const { sensors, handleDragEnd } = useDragAndDrop({ projects, reorderProjects });

-  const {
-    globalTheme,
-    setTheme,
-    setProjectTheme,
-    setPreviewTheme,
-    handlePreviewEnter,
-    handlePreviewLeave,
-  } = useProjectTheme();
+  const { globalTheme, setProjectTheme, setPreviewTheme, handlePreviewEnter, handlePreviewLeave } =
+    useProjectTheme();

  if (!sidebarOpen || projects.length === 0) {
    return null;
@@ -281,11 +275,8 @@ export function ProjectSelectorWithOptions({
                  onValueChange={(value) => {
                    if (currentProject) {
                      setPreviewTheme(null);
-                      if (value !== '') {
-                        setTheme(value as ThemeMode);
-                      } else {
-                        setTheme(globalTheme);
-                      }
+                      // Only set project theme - don't change global theme
+                      // The UI uses getEffectiveTheme() which handles: previewTheme ?? projectTheme ?? globalTheme
                      setProjectTheme(
                        currentProject.id,
                        value === '' ? null : (value as ThemeMode)
--- a/apps/ui/src/components/layout/sidebar/components/theme-menu-item.tsx
+++ b/apps/ui/src/components/layout/sidebar/components/theme-menu-item.tsx
@@ -9,19 +9,15 @@ export const ThemeMenuItem = memo(function ThemeMenuItem({
 }: ThemeMenuItemProps) {
  const Icon = option.icon;
  return (
-    <div
-      key={option.value}
+    <DropdownMenuRadioItem
+      value={option.value}
+      data-testid={`project-theme-${option.value}`}
+      className="text-xs py-1.5"
      onPointerEnter={() => onPreviewEnter(option.value)}
      onPointerLeave={onPreviewLeave}
    >
-      <DropdownMenuRadioItem
-        value={option.value}
-        data-testid={`project-theme-${option.value}`}
-        className="text-xs py-1.5"
-      >
-        <Icon className="w-3.5 h-3.5 mr-1.5" style={{ color: option.color }} />
-        <span>{option.label}</span>
-      </DropdownMenuRadioItem>
-    </div>
+      <Icon className="w-3.5 h-3.5 mr-1.5" style={{ color: option.color }} />
+      <span>{option.label}</span>
+    </DropdownMenuRadioItem>
  );
 });
--- a/apps/ui/src/components/views/project-settings-view/project-identity-section.tsx
+++ b/apps/ui/src/components/views/project-settings-view/project-identity-section.tsx
@@ -68,10 +68,10 @@ export function ProjectIdentitySection({ project }: ProjectIdentitySectionProps)
      return;
    }

-    // Validate file size (max 2MB for icons)
-    if (file.size > 2 * 1024 * 1024) {
+    // Validate file size (max 5MB for icons - allows animated GIFs)
+    if (file.size > 5 * 1024 * 1024) {
      toast.error('File too large', {
-        description: 'Please upload an image smaller than 2MB.',
+        description: 'Please upload an image smaller than 5MB.',
      });
      return;
    }
@@ -208,7 +208,7 @@ export function ProjectIdentitySection({ project }: ProjectIdentitySectionProps)
                  {isUploadingIcon ? 'Uploading...' : 'Upload Custom Icon'}
                </Button>
                <p className="text-xs text-muted-foreground mt-1">
-                  PNG, JPG, GIF or WebP. Max 2MB.
+                  PNG, JPG, GIF or WebP. Max 5MB.
                </p>
              </div>
            </div>
--- a/apps/ui/src/lib/http-api-client.ts
+++ b/apps/ui/src/lib/http-api-client.ts
@@ -946,7 +946,7 @@ export class HttpApiClient implements ElectronAPI {
    return response.json();
  }

-  private async get<T>(endpoint: string): Promise<T> {
+  async get<T>(endpoint: string): Promise<T> {
    // Ensure API key is initialized before making request
    await waitForApiKeyInit();
    const response = await fetch(`${this.serverUrl}${endpoint}`, {
@@ -976,7 +976,7 @@ export class HttpApiClient implements ElectronAPI {
    return response.json();
  }

-  private async put<T>(endpoint: string, body?: unknown): Promise<T> {
+  async put<T>(endpoint: string, body?: unknown): Promise<T> {
    // Ensure API key is initialized before making request
    await waitForApiKeyInit();
    const response = await fetch(`${this.serverUrl}${endpoint}`, {
--- a/apps/ui/src/store/app-store.ts
+++ b/apps/ui/src/store/app-store.ts
@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 // Note: persist middleware removed - settings now sync via API (use-settings-sync.ts)
 import type { Project, TrashedProject } from '@/lib/electron';
-import { getElectronAPI } from '@/lib/electron';
+import { saveProjects, saveTrashedProjects } from '@/lib/electron';
 import { getHttpApiClient } from '@/lib/http-api-client';
 import { createLogger } from '@automaker/utils/logger';
 // Note: setItem/getItem moved to ./utils/theme-utils.ts
@@ -360,7 +360,7 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({

    const trashedProject: TrashedProject = {
      ...project,
-      trashedAt: Date.now(),
+      trashedAt: new Date().toISOString(),
    };

    set((state) => ({
@@ -369,12 +369,9 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
      currentProject: state.currentProject?.id === projectId ? null : state.currentProject,
    }));

-    // Persist to Electron store if available
-    const electronAPI = getElectronAPI();
-    if (electronAPI) {
-      electronAPI.projects.setProjects(get().projects);
-      electronAPI.projects.setTrashedProjects(get().trashedProjects);
-    }
+    // Persist to storage
+    saveProjects(get().projects);
+    saveTrashedProjects(get().trashedProjects);
  },

  restoreTrashedProject: (projectId: string) => {
@@ -390,12 +387,9 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
      trashedProjects: state.trashedProjects.filter((p) => p.id !== projectId),
    }));

-    // Persist to Electron store if available
-    const electronAPI = getElectronAPI();
-    if (electronAPI) {
-      electronAPI.projects.setProjects(get().projects);
-      electronAPI.projects.setTrashedProjects(get().trashedProjects);
-    }
+    // Persist to storage
+    saveProjects(get().projects);
+    saveTrashedProjects(get().trashedProjects);
  },

  deleteTrashedProject: (projectId: string) => {
@@ -403,21 +397,15 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
      trashedProjects: state.trashedProjects.filter((p) => p.id !== projectId),
    }));

-    // Persist to Electron store if available
-    const electronAPI = getElectronAPI();
-    if (electronAPI) {
-      electronAPI.projects.setTrashedProjects(get().trashedProjects);
-    }
+    // Persist to storage
+    saveTrashedProjects(get().trashedProjects);
  },

  emptyTrash: () => {
    set({ trashedProjects: [] });

-    // Persist to Electron store if available
-    const electronAPI = getElectronAPI();
-    if (electronAPI) {
-      electronAPI.projects.setTrashedProjects([]);
-    }
+    // Persist to storage
+    saveTrashedProjects([]);
  },

  setCurrentProject: (project) => {
@@ -474,14 +462,10 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
    get().addProject(newProject);
    get().setCurrentProject(newProject);

-    // Persist to Electron store if available
-    const electronAPI = getElectronAPI();
-    if (electronAPI) {
-      // Small delay to ensure state is updated before persisting
-      setTimeout(() => {
-        electronAPI.projects.setProjects(get().projects);
-      }, 0);
-    }
+    // Persist to storage (small delay to ensure state is updated)
+    setTimeout(() => {
+      saveProjects(get().projects);
+    }, 0);

    return newProject;
  },
@@ -564,11 +548,8 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
      ),
    }));

-    // Persist to Electron store if available
-    const electronAPI = getElectronAPI();
-    if (electronAPI) {
-      electronAPI.projects.setProjects(get().projects);
-    }
+    // Persist to storage
+    saveProjects(get().projects);
  },

  setProjectIcon: (projectId: string, icon: string | null) => {
@@ -576,27 +557,31 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
      projects: state.projects.map((p) =>
        p.id === projectId ? { ...p, icon: icon ?? undefined } : p
      ),
+      // Also update currentProject if it's the one being modified
+      currentProject:
+        state.currentProject?.id === projectId
+          ? { ...state.currentProject, icon: icon ?? undefined }
+          : state.currentProject,
    }));

-    // Persist to Electron store if available
-    const electronAPI = getElectronAPI();
-    if (electronAPI) {
-      electronAPI.projects.setProjects(get().projects);
-    }
+    // Persist to storage
+    saveProjects(get().projects);
  },

  setProjectCustomIcon: (projectId: string, customIconPath: string | null) => {
    set((state) => ({
      projects: state.projects.map((p) =>
-        p.id === projectId ? { ...p, customIcon: customIconPath ?? undefined } : p
+        p.id === projectId ? { ...p, customIconPath: customIconPath ?? undefined } : p
      ),
+      // Also update currentProject if it's the one being modified
+      currentProject:
+        state.currentProject?.id === projectId
+          ? { ...state.currentProject, customIconPath: customIconPath ?? undefined }
+          : state.currentProject,
    }));

-    // Persist to Electron store if available
-    const electronAPI = getElectronAPI();
-    if (electronAPI) {
-      electronAPI.projects.setProjects(get().projects);
-    }
+    // Persist to storage
+    saveProjects(get().projects);
  },

  setProjectName: (projectId: string, name: string) => {
@@ -609,11 +594,8 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
          : state.currentProject,
    }));

-    // Persist to Electron store if available
-    const electronAPI = getElectronAPI();
-    if (electronAPI) {
-      electronAPI.projects.setProjects(get().projects);
-    }
+    // Persist to storage
+    saveProjects(get().projects);
  },

  // View actions
@@ -659,11 +641,8 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
      );
    }

-    // Persist to Electron store if available
-    const electronAPI = getElectronAPI();
-    if (electronAPI) {
-      electronAPI.projects.setProjects(get().projects);
-    }
+    // Persist to storage
+    saveProjects(get().projects);
  },
  getEffectiveTheme: () => {
    const state = get();
@@ -696,11 +675,8 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
          : state.currentProject,
    }));

-    // Persist to Electron store if available
-    const electronAPI = getElectronAPI();
-    if (electronAPI) {
-      electronAPI.projects.setProjects(get().projects);
-    }
+    // Persist to storage
+    saveProjects(get().projects);
  },
  setProjectFontMono: (projectId: string, fontFamily: string | null) => {
    set((state) => ({
@@ -714,20 +690,17 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
          : state.currentProject,
    }));

-    // Persist to Electron store if available
-    const electronAPI = getElectronAPI();
-    if (electronAPI) {
-      electronAPI.projects.setProjects(get().projects);
-    }
+    // Persist to storage
+    saveProjects(get().projects);
  },
  getEffectiveFontSans: () => {
    const state = get();
-    const projectFont = state.currentProject?.fontSans;
+    const projectFont = state.currentProject?.fontFamilySans;
    return getEffectiveFont(projectFont, state.fontFamilySans, UI_SANS_FONT_OPTIONS);
  },
  getEffectiveFontMono: () => {
    const state = get();
-    const projectFont = state.currentProject?.fontMono;
+    const projectFont = state.currentProject?.fontFamilyMono;
    return getEffectiveFont(projectFont, state.fontFamilyMono, UI_MONO_FONT_OPTIONS);
  },

@@ -744,11 +717,8 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
          : state.currentProject,
    }));

-    // Persist to Electron store if available
-    const electronAPI = getElectronAPI();
-    if (electronAPI) {
-      electronAPI.projects.setProjects(get().projects);
-    }
+    // Persist to storage
+    saveProjects(get().projects);
  },

  // Project Phase Model Overrides
@@ -781,11 +751,8 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
      };
    });

-    // Persist to Electron store if available
-    const electronAPI = getElectronAPI();
-    if (electronAPI) {
-      electronAPI.projects.setProjects(get().projects);
-    }
+    // Persist to storage
+    saveProjects(get().projects);
  },

  clearAllProjectPhaseModelOverrides: (projectId: string) => {
@@ -804,11 +771,8 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
      };
    });

-    // Persist to Electron store if available
-    const electronAPI = getElectronAPI();
-    if (electronAPI) {
-      electronAPI.projects.setProjects(get().projects);
-    }
+    // Persist to storage
+    saveProjects(get().projects);
  },

  // Project Default Feature Model Override
@@ -830,11 +794,8 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
      };
    });

-    // Persist to Electron store if available
-    const electronAPI = getElectronAPI();
-    if (electronAPI) {
-      electronAPI.projects.setProjects(get().projects);
-    }
+    // Persist to storage
+    saveProjects(get().projects);
  },

  // Feature actions
@@ -845,7 +806,7 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
    })),
  addFeature: (feature) => {
    const id = feature.id ?? `feature-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-    const newFeature: Feature = { ...feature, id };
+    const newFeature = { ...feature, id } as Feature;
    set((state) => ({ features: [...state.features, newFeature] }));
    return newFeature;
  },
@@ -2471,8 +2432,7 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({

    try {
      const httpApi = getHttpApiClient();
-      const response = await httpApi.get('/api/codex/models');
-      const data = response.data as {
+      const data = await httpApi.get<{
        success: boolean;
        models?: Array<{
          id: string;
@@ -2484,7 +2444,7 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
          isDefault: boolean;
        }>;
        error?: string;
-      };
+      }>('/api/codex/models');

      if (data.success && data.models) {
        set({
@@ -2542,8 +2502,7 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({

    try {
      const httpApi = getHttpApiClient();
-      const response = await httpApi.get('/api/opencode/models');
-      const data = response.data as {
+      const data = await httpApi.get<{
        success: boolean;
        models?: ModelDefinition[];
        providers?: Array<{
@@ -2553,7 +2512,7 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
          authMethod?: string;
        }>;
        error?: string;
-      };
+      }>('/api/opencode/models');

      if (data.success && data.models) {
        // Filter out Bedrock models