feat: add toggle to show unvalidated models in model selector (#413)

* feat: add toggle to show unvalidated models in model selector

Add a toggle switch in the model configuration dialog to allow users to
display models that haven't been validated. This helps users who work with
model providers that have disabled their verification endpoints.

Changes:
- Add showUnvalidatedModels field to MultiModelConfig type
- Add setShowUnvalidatedModels method to useModelConfig hook
- Add Switch toggle in model-config-dialog footer
- Update model-selector to filter based on showUnvalidatedModels setting
- Add warning icon for unvalidated models in the selector
- Add i18n translations for en/zh/ja

Closes #410

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

* fix: wrap AlertTriangle in span for title attribute

The AlertTriangle icon from lucide-react doesn't support the title prop directly.
Wrapped it in a span element to properly display the tooltip.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

.github/workflows/auto-format.yml

@@ -14,7 +14,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
         with:
-          ref: ${{ github.head_ref }}
+          ref: ${{ github.event.pull_request.head.sha }}
           token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Setup Node.js
@@ -37,11 +37,21 @@ jobs:
             echo "has_changes=true" >> $GITHUB_OUTPUT
           fi
 
+      # For fork PRs, just fail if formatting is needed (can't push to forks)
+      - name: Fail if fork PR needs formatting
+        if: steps.changes.outputs.has_changes == 'true' && github.event.pull_request.head.repo.full_name != github.repository
+        run: |
+          echo "::error::This PR has formatting issues. Please run 'npx @biomejs/biome check --write .' locally and push the changes."
+          git diff --stat
+          exit 1
+
+      # For same-repo PRs, commit and push the changes
       - name: Commit changes
-        if: steps.changes.outputs.has_changes == 'true'
+        if: steps.changes.outputs.has_changes == 'true' && github.event.pull_request.head.repo.full_name == github.repository
         run: |
           git config --global user.name "github-actions[bot]"
           git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git remote set-url origin https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}
           git add .
           git commit -m "style: auto-format with Biome"
-          git push
+          git push origin HEAD:${{ github.head_ref }}

.github/workflows/ci.yml

@@ -0,0 +1,44 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Type check
+        run: npx tsc --noEmit
+
+      - name: Lint check
+        run: npm run check
+
+      - name: Build
+        run: npm run build
+
+      - name: Security audit
+        run: npm audit --audit-level=high --omit=dev

app/[lang]/page.tsx

@@ -1,4 +1,5 @@
 "use client"
+import { usePathname, useRouter } from "next/navigation"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { DrawIoEmbed } from "react-drawio"
 import type { ImperativePanelHandle } from "react-resizable-panels"
@@ -10,6 +11,7 @@ import {
     ResizablePanelGroup,
 } from "@/components/ui/resizable"
 import { useDiagram } from "@/contexts/diagram-context"
+import { i18n, type Locale } from "@/lib/i18n/config"
 
 const drawioBaseUrl =
     process.env.NEXT_PUBLIC_DRAWIO_BASE_URL || "https://embed.diagrams.net"
@@ -24,6 +26,8 @@ export default function Home() {
         showSaveDialog,
         setShowSaveDialog,
     } = useDiagram()
+    const router = useRouter()
+    const pathname = usePathname()
     const [isMobile, setIsMobile] = useState(false)
     const [isChatVisible, setIsChatVisible] = useState(true)
     const [drawioUi, setDrawioUi] = useState<"min" | "sketch">("min")
@@ -58,6 +62,18 @@ export default function Home() {
 
     // Load preferences from localStorage after mount
     useEffect(() => {
+        // Restore saved locale and redirect if needed
+        const savedLocale = localStorage.getItem("next-ai-draw-io-locale")
+        if (savedLocale && i18n.locales.includes(savedLocale as Locale)) {
+            const pathParts = pathname.split("/").filter(Boolean)
+            const currentLocale = pathParts[0]
+            if (currentLocale !== savedLocale) {
+                pathParts[0] = savedLocale
+                router.replace(`/${pathParts.join("/")}`)
+                return // Wait for redirect
+            }
+        }
+
         const savedUi = localStorage.getItem("drawio-theme")
         if (savedUi === "min" || savedUi === "sketch") {
             setDrawioUi(savedUi)
@@ -84,7 +100,7 @@ export default function Home() {
         }
 
         setIsLoaded(true)
-    }, [])
+    }, [pathname, router])
 
     const handleDarkModeChange = async () => {
         await saveDiagramToStorage()

components/chat-input.tsx

@@ -162,6 +162,7 @@ interface ChatInputProps {
     models?: FlattenedModel[]
     selectedModelId?: string
     onModelSelect?: (modelId: string | undefined) => void
+    showUnvalidatedModels?: boolean
     onConfigureModels?: () => void
 }
 
@@ -183,6 +184,7 @@ export function ChatInput({
     models = [],
     selectedModelId,
     onModelSelect = () => {},
+    showUnvalidatedModels = false,
     onConfigureModels = () => {},
 }: ChatInputProps) {
     const dict = useDictionary()
@@ -482,6 +484,7 @@ export function ChatInput({
                             onSelect={onModelSelect}
                             onConfigure={onConfigureModels}
                             disabled={isDisabled}
+                            showUnvalidatedModels={showUnvalidatedModels}
                         />
 
                         <div className="w-px h-5 bg-border mx-1" />

components/chat-panel.tsx

@@ -1071,6 +1071,7 @@ export default function ChatPanel({
                     models={modelConfig.models}
                     selectedModelId={modelConfig.selectedModelId}
                     onModelSelect={modelConfig.setSelectedModelId}
+                    showUnvalidatedModels={modelConfig.showUnvalidatedModels}
                     onConfigureModels={() => setShowModelConfigDialog(true)}
                 />
             </footer>

components/model-config-dialog.tsx

@@ -50,6 +50,7 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
 import { useDictionary } from "@/hooks/use-dictionary"
 import type { UseModelConfigReturn } from "@/hooks/use-model-config"
 import { formatMessage } from "@/lib/i18n/utils"
@@ -412,11 +413,7 @@ export function ModelConfigDialog({
                                                 setSelectedProviderId(
                                                     provider.id,
                                                 )
-                                                setValidationStatus(
-                                                    provider.validated
-                                                        ? "success"
-                                                        : "idle",
-                                                )
+                                                setValidationStatus("idle")
                                                 setShowApiKey(false)
                                             }}
                                             className={cn(
@@ -555,6 +552,20 @@ export function ModelConfigDialog({
                                                     </span>
                                                 </div>
                                             )}
+                                            <Button
+                                                variant="ghost"
+                                                size="sm"
+                                                onClick={() =>
+                                                    setDeleteConfirmOpen(true)
+                                                }
+                                                className="text-destructive hover:text-destructive hover:bg-destructive/10"
+                                            >
+                                                <Trash2 className="h-4 w-4 mr-1.5" />
+                                                {
+                                                    dict.modelConfig
+                                                        .deleteProvider
+                                                }
+                                            </Button>
                                         </div>
 
                                         {/* Configuration Section */}
@@ -1416,24 +1427,6 @@ export function ModelConfigDialog({
                                                 )}
                                             </div>
                                         </ConfigSection>
-
-                                        {/* Danger Zone */}
-                                        <div className="pt-4">
-                                            <Button
-                                                variant="ghost"
-                                                size="sm"
-                                                onClick={() =>
-                                                    setDeleteConfirmOpen(true)
-                                                }
-                                                className="text-muted-foreground hover:text-destructive hover:bg-destructive/5 rounded-xl"
-                                            >
-                                                <Trash2 className="h-4 w-4 mr-2" />
-                                                {
-                                                    dict.modelConfig
-                                                        .deleteProvider
-                                                }
-                                            </Button>
-                                        </div>
                                     </div>
                                 </ScrollArea>
                             </>
@@ -1455,10 +1448,23 @@ export function ModelConfigDialog({
 
                 {/* Footer */}
                 <div className="px-6 py-3 border-t border-border-subtle bg-surface-1/30 shrink-0">
-                    <p className="text-xs text-muted-foreground text-center flex items-center justify-center gap-1.5">
-                        <Key className="h-3 w-3" />
-                        {dict.modelConfig.apiKeyStored}
-                    </p>
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                            <Switch
+                                checked={modelConfig.showUnvalidatedModels}
+                                onCheckedChange={
+                                    modelConfig.setShowUnvalidatedModels
+                                }
+                            />
+                            <Label className="text-xs text-muted-foreground cursor-pointer">
+                                {dict.modelConfig.showUnvalidatedModels}
+                            </Label>
+                        </div>
+                        <p className="text-xs text-muted-foreground flex items-center gap-1.5">
+                            <Key className="h-3 w-3" />
+                            {dict.modelConfig.apiKeyStored}
+                        </p>
+                    </div>
                 </div>
             </DialogContent>
 

components/model-selector.tsx

@@ -1,6 +1,13 @@
 "use client"
 
-import { Bot, Check, ChevronDown, Server, Settings2 } from "lucide-react"
+import {
+    AlertTriangle,
+    Bot,
+    Check,
+    ChevronDown,
+    Server,
+    Settings2,
+} from "lucide-react"
 import { useMemo, useState } from "react"
 import {
     ModelSelectorContent,
@@ -26,6 +33,7 @@ interface ModelSelectorProps {
     onSelect: (modelId: string | undefined) => void
     onConfigure: () => void
     disabled?: boolean
+    showUnvalidatedModels?: boolean
 }
 
 // Map our provider names to models.dev logo names
@@ -67,17 +75,20 @@ export function ModelSelector({
     onSelect,
     onConfigure,
     disabled = false,
+    showUnvalidatedModels = false,
 }: ModelSelectorProps) {
     const dict = useDictionary()
     const [open, setOpen] = useState(false)
-    // Only show validated models in the selector
-    const validatedModels = useMemo(
-        () => models.filter((m) => m.validated === true),
-        [models],
-    )
+    // Filter models based on showUnvalidatedModels setting
+    const displayModels = useMemo(() => {
+        if (showUnvalidatedModels) {
+            return models
+        }
+        return models.filter((m) => m.validated === true)
+    }, [models, showUnvalidatedModels])
     const groupedModels = useMemo(
-        () => groupModelsByProvider(validatedModels),
-        [validatedModels],
+        () => groupModelsByProvider(displayModels),
+        [displayModels],
     )
 
     // Find selected model for display
@@ -126,7 +137,7 @@ export function ModelSelector({
                 />
                 <ModelSelectorList className="[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
                     <ModelSelectorEmpty>
-                        {validatedModels.length === 0 && models.length > 0
+                        {displayModels.length === 0 && models.length > 0
                             ? dict.modelConfig.noVerifiedModels
                             : dict.modelConfig.noModelsFound}
                     </ModelSelectorEmpty>
@@ -191,6 +202,16 @@ export function ModelSelector({
                                         <ModelSelectorName>
                                             {model.modelId}
                                         </ModelSelectorName>
+                                        {model.validated !== true && (
+                                            <span
+                                                title={
+                                                    dict.modelConfig
+                                                        .unvalidatedModelWarning
+                                                }
+                                            >
+                                                <AlertTriangle className="ml-auto h-3 w-3 text-warning" />
+                                            </span>
+                                        )}
                                     </ModelSelectorItem>
                                 ))}
                             </ModelSelectorGroup>
@@ -213,7 +234,9 @@ export function ModelSelector({
                     </ModelSelectorGroup>
                     {/* Info text */}
                     <div className="px-3 py-2 text-xs text-muted-foreground border-t">
-                        {dict.modelConfig.onlyVerifiedShown}
+                        {showUnvalidatedModels
+                            ? dict.modelConfig.allModelsShown
+                            : dict.modelConfig.onlyVerifiedShown}
                     </div>
                 </ModelSelectorList>
             </ModelSelectorContent>

components/settings-dialog.tsx

@@ -151,6 +151,9 @@ function SettingsContent({
     }, [open])
 
     const changeLanguage = (lang: string) => {
+        // Save locale to localStorage for persistence across restarts
+        localStorage.setItem("next-ai-draw-io-locale", lang)
+
         const parts = pathname.split("/")
         if (parts.length > 1 && i18n.locales.includes(parts[1] as Locale)) {
             parts[1] = lang

electron/main/port-manager.ts

@@ -3,16 +3,16 @@ import { app } from "electron"
 
 /**
  * Port configuration
+ * Using fixed ports to preserve localStorage across restarts
+ * (localStorage is origin-specific, so changing ports loses all saved data)
  */
 const PORT_CONFIG = {
     // Development mode uses fixed port for hot reload compatibility
     development: 6002,
-    // Production mode port range (will find first available)
-    production: {
-        min: 10000,
-        max: 65535,
-    },
-    // Maximum attempts to find an available port
+    // Production mode uses fixed port (61337) to preserve localStorage
+    // Falls back to sequential ports if unavailable
+    production: 61337,
+    // Maximum attempts to find an available port (fallback)
     maxAttempts: 100,
 }
 
@@ -36,19 +36,11 @@ export function isPortAvailable(port: number): Promise<boolean> {
     })
 }
 
-/**
- * Generate a random port within the production range
- */
-function getRandomPort(): number {
-    const { min, max } = PORT_CONFIG.production
-    return Math.floor(Math.random() * (max - min + 1)) + min
-}
-
 /**
  * Find an available port
  * - In development: uses fixed port (6002)
- * - In production: finds a random available port
- * - If a port was previously allocated, verifies it's still available
+ * - In production: uses fixed port (61337) to preserve localStorage
+ * - Falls back to sequential ports if preferred port is unavailable
  *
  * @param reuseExisting If true, try to reuse the previously allocated port
  * @returns Promise<number> The available port
@@ -56,6 +48,9 @@ function getRandomPort(): number {
  */
 export async function findAvailablePort(reuseExisting = true): Promise<number> {
     const isDev = !app.isPackaged
+    const preferredPort = isDev
+        ? PORT_CONFIG.development
+        : PORT_CONFIG.production
 
     // Try to reuse cached port if requested and available
     if (reuseExisting && allocatedPort !== null) {
@@ -69,29 +64,22 @@ export async function findAvailablePort(reuseExisting = true): Promise<number> {
         allocatedPort = null
     }
 
-    if (isDev) {
-        // Development mode: use fixed port
-        const port = PORT_CONFIG.development
-        const available = await isPortAvailable(port)
-        if (available) {
-            allocatedPort = port
-            return port
-        }
-        console.warn(
-            `Development port ${port} is in use, finding alternative...`,
-        )
+    // Try preferred port first
+    if (await isPortAvailable(preferredPort)) {
+        allocatedPort = preferredPort
+        return preferredPort
     }
 
-    // Production mode or dev port unavailable: find random available port
-    for (let attempt = 0; attempt < PORT_CONFIG.maxAttempts; attempt++) {
-        const port = isDev
-            ? PORT_CONFIG.development + attempt + 1
-            : getRandomPort()
+    console.warn(
+        `Preferred port ${preferredPort} is in use, finding alternative...`,
+    )
 
-        const available = await isPortAvailable(port)
-        if (available) {
+    // Fallback: try sequential ports starting from preferred + 1
+    for (let attempt = 1; attempt <= PORT_CONFIG.maxAttempts; attempt++) {
+        const port = preferredPort + attempt
+        if (await isPortAvailable(port)) {
             allocatedPort = port
-            console.log(`Allocated port: ${port}`)
+            console.log(`Allocated fallback port: ${port}`)
             return port
         }
     }

hooks/use-model-config.ts

@@ -109,9 +109,11 @@ export interface UseModelConfigReturn {
     models: FlattenedModel[]
     selectedModel: FlattenedModel | undefined
     selectedModelId: string | undefined
+    showUnvalidatedModels: boolean
 
     // Actions
     setSelectedModelId: (modelId: string | undefined) => void
+    setShowUnvalidatedModels: (show: boolean) => void
     addProvider: (provider: ProviderName) => ProviderConfig
     updateProvider: (
         providerId: string,
@@ -160,6 +162,13 @@ export function useModelConfig(): UseModelConfigReturn {
         }))
     }, [])
 
+    const setShowUnvalidatedModels = useCallback((show: boolean) => {
+        setConfig((prev) => ({
+            ...prev,
+            showUnvalidatedModels: show,
+        }))
+    }, [])
+
     const addProvider = useCallback(
         (provider: ProviderName): ProviderConfig => {
             const newProvider = createProviderConfig(provider)
@@ -278,7 +287,9 @@ export function useModelConfig(): UseModelConfigReturn {
         models,
         selectedModel,
         selectedModelId: config.selectedModelId,
+        showUnvalidatedModels: config.showUnvalidatedModels ?? false,
         setSelectedModelId,
+        setShowUnvalidatedModels,
         addProvider,
         updateProvider,
         deleteProvider,

lib/i18n/dictionaries/en.json

@@ -243,6 +243,9 @@
         "default": "Default",
         "serverDefault": "Server Default",
         "configureModels": "Configure Models...",
-        "onlyVerifiedShown": "Only verified models are shown"
+        "onlyVerifiedShown": "Only verified models are shown",
+        "showUnvalidatedModels": "Show unvalidated models",
+        "allModelsShown": "All models are shown (including unvalidated)",
+        "unvalidatedModelWarning": "This model has not been validated"
     }
 }

lib/i18n/dictionaries/ja.json

@@ -243,6 +243,9 @@
         "default": "デフォルト",
         "serverDefault": "サーバーデフォルト",
         "configureModels": "モデルを設定...",
-        "onlyVerifiedShown": "検証済みのモデルのみ表示"
+        "onlyVerifiedShown": "検証済みのモデルのみ表示",
+        "showUnvalidatedModels": "未検証のモデルを表示",
+        "allModelsShown": "すべてのモデルを表示（未検証を含む）",
+        "unvalidatedModelWarning": "このモデルは検証されていません"
     }
 }

lib/i18n/dictionaries/zh.json

@@ -243,6 +243,9 @@
         "default": "默认",
         "serverDefault": "服务器默认",
         "configureModels": "配置模型...",
-        "onlyVerifiedShown": "仅显示已验证的模型"
+        "onlyVerifiedShown": "仅显示已验证的模型",
+        "showUnvalidatedModels": "显示未验证的模型",
+        "allModelsShown": "显示所有模型（包括未验证的）",
+        "unvalidatedModelWarning": "此模型尚未验证"
     }
 }

lib/types/model-config.ts

@@ -40,6 +40,7 @@ export interface MultiModelConfig {
     version: 1
     providers: ProviderConfig[]
     selectedModelId?: string // Currently selected model's UUID
+    showUnvalidatedModels?: boolean // Show models that haven't been validated
 }
 
 // Flattened model for dropdown display
@@ -83,22 +84,24 @@ export const PROVIDER_INFO: Record<
 // Suggested models per provider for quick add
 export const SUGGESTED_MODELS: Record<ProviderName, string[]> = {
     openai: [
-        // GPT-4o series (latest)
+        "gpt-5.2-pro",
+        "gpt-5.2-chat-latest",
+        "gpt-5.2",
+        "gpt-5.1-codex-mini",
+        "gpt-5.1-codex",
+        "gpt-5.1-chat-latest",
+        "gpt-5.1",
+        "gpt-5-pro",
+        "gpt-5",
+        "gpt-5-mini",
+        "gpt-5-nano",
+        "gpt-5-codex",
+        "gpt-5-chat-latest",
+        "gpt-4.1",
+        "gpt-4.1-mini",
+        "gpt-4.1-nano",
         "gpt-4o",
         "gpt-4o-mini",
-        "gpt-4o-2024-11-20",
-        // GPT-4 Turbo
-        "gpt-4-turbo",
-        "gpt-4-turbo-preview",
-        // o1/o3 reasoning models
-        "o1",
-        "o1-mini",
-        "o1-preview",
-        "o3-mini",
-        // GPT-4
-        "gpt-4",
-        // GPT-3.5
-        "gpt-3.5-turbo",
     ],
     anthropic: [
         // Claude 4.5 series (latest)

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "next-ai-draw-io",
-    "version": "0.4.6",
+    "version": "0.4.7",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "next-ai-draw-io",
-            "version": "0.4.6",
+            "version": "0.4.7",
             "license": "Apache-2.0",
             "dependencies": {
                 "@ai-sdk/amazon-bedrock": "^4.0.1",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "next-ai-draw-io",
-    "version": "0.4.6",
+    "version": "0.4.7",
     "license": "Apache-2.0",
     "private": true,
     "main": "dist-electron/main/index.js",

renovate.json

@@ -0,0 +1,40 @@
+{
+    "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+    "extends": ["config:recommended"],
+    "schedule": ["after 10am on saturday"],
+    "timezone": "Asia/Tokyo",
+    "packageRules": [
+        {
+            "matchUpdateTypes": ["minor", "patch"],
+            "matchPackagePatterns": ["*"],
+            "groupName": "minor and patch dependencies",
+            "automerge": true
+        },
+        {
+            "matchUpdateTypes": ["major"],
+            "matchPackagePatterns": ["*"],
+            "automerge": false
+        },
+        {
+            "matchPackagePatterns": ["@ai-sdk/*"],
+            "groupName": "AI SDK packages"
+        },
+        {
+            "matchPackagePatterns": ["@radix-ui/*"],
+            "groupName": "Radix UI packages"
+        },
+        {
+            "matchPackagePatterns": ["electron", "electron-builder"],
+            "groupName": "Electron packages",
+            "automerge": false
+        },
+        {
+            "matchPackagePatterns": ["@ai-sdk/*", "ai", "next"],
+            "groupName": "Core framework packages",
+            "automerge": false
+        }
+    ],
+    "vulnerabilityAlerts": {
+        "enabled": true
+    }
+}