feat(web): add BYOK module with form UI and thinking config

Author: notdp

electron/main/ipc.ts

@@ -44,6 +44,18 @@ interface McpServer {
   env?: Record<string, string>;
 }
 
+interface CustomModel {
+  model_display_name?: string;
+  model: string;
+  base_url: string;
+  api_key: string;
+  provider: 'anthropic' | 'openai' | 'generic-chat-completion-api';
+  max_tokens?: number;
+  supports_images?: boolean;
+  extra_args?: Record<string, unknown>;
+  extra_headers?: Record<string, string>;
+}
+
 interface DkConfig {
   ascii?: string;
   [key: string]: string | undefined;
@@ -360,6 +372,55 @@ Droid instructions here.
     await shell.openPath(mcpConfig);
   });
 
+  // BYOK (Custom Models) handlers
+  ipcMain.handle('byok:list', async (): Promise<CustomModel[]> => {
+    const configFile = path.join(FACTORY_DIR, 'config.json');
+    try {
+      const content = await fs.readFile(configFile, 'utf-8');
+      const config = JSON.parse(content);
+      return config.custom_models || [];
+    } catch {
+      return [];
+    }
+  });
+
+  ipcMain.handle('byok:remove', async (_event, index: number): Promise<void> => {
+    const configFile = path.join(FACTORY_DIR, 'config.json');
+    try {
+      const content = await fs.readFile(configFile, 'utf-8');
+      const config = JSON.parse(content);
+      if (config.custom_models && index >= 0 && index < config.custom_models.length) {
+        config.custom_models.splice(index, 1);
+        await fs.writeFile(configFile, JSON.stringify(config, null, 2));
+      }
+    } catch {
+      // Config doesn't exist or is invalid
+    }
+  });
+
+  ipcMain.handle('byok:update', async (_event, index: number, modelConfig: CustomModel): Promise<void> => {
+    const configFile = path.join(FACTORY_DIR, 'config.json');
+    let config: { custom_models?: CustomModel[]; [key: string]: unknown } = {};
+    try {
+      const content = await fs.readFile(configFile, 'utf-8');
+      config = JSON.parse(content);
+    } catch {
+      // File doesn't exist or is invalid
+    }
+    if (!config.custom_models) {
+      config.custom_models = [];
+    }
+    if (index === -1) {
+      // Add new model
+      config.custom_models.push(modelConfig);
+    } else if (index >= 0 && index < config.custom_models.length) {
+      // Update existing model
+      config.custom_models[index] = modelConfig;
+    }
+    await fs.mkdir(FACTORY_DIR, { recursive: true });
+    await fs.writeFile(configFile, JSON.stringify(config, null, 2));
+  });
+
   // Utility handlers
   ipcMain.handle('util:openPath', async (_event, filePath: string): Promise<void> => {
     await shell.openPath(filePath);

electron/preload/index.ts

@@ -26,6 +26,18 @@ export interface McpServer {
   env?: Record<string, string>;
 }
 
+export interface CustomModel {
+  model_display_name?: string;
+  model: string;
+  base_url: string;
+  api_key: string;
+  provider: 'anthropic' | 'openai' | 'generic-chat-completion-api';
+  max_tokens?: number;
+  supports_images?: boolean;
+  extra_args?: Record<string, unknown>;
+  extra_headers?: Record<string, string>;
+}
+
 export interface DkCheckResult {
   installed: boolean;
   installCmd: string;
@@ -75,6 +87,10 @@ export interface OroioAPI {
   removeMcpServer: (name: string) => Promise<void>;
   updateMcpServer: (name: string, config: Omit<McpServer, 'name'>) => Promise<void>;
   openMcpConfig: () => Promise<void>;
+  // BYOK (Custom Models)
+  listCustomModels: () => Promise<CustomModel[]>;
+  removeCustomModel: (index: number) => Promise<void>;
+  updateCustomModel: (index: number, config: CustomModel) => Promise<void>;
   // Utilities
   openPath: (path: string) => Promise<void>;
 }
@@ -127,6 +143,10 @@ const api: OroioAPI = {
   removeMcpServer: (name: string) => ipcRenderer.invoke('mcp:remove', name),
   updateMcpServer: (name: string, config: Omit<McpServer, 'name'>) => ipcRenderer.invoke('mcp:update', name, config),
   openMcpConfig: () => ipcRenderer.invoke('mcp:openConfig'),
+  // BYOK (Custom Models)
+  listCustomModels: () => ipcRenderer.invoke('byok:list'),
+  removeCustomModel: (index: number) => ipcRenderer.invoke('byok:remove', index),
+  updateCustomModel: (index: number, config: CustomModel) => ipcRenderer.invoke('byok:update', index, config),
   // Utilities
   openPath: (p: string) => ipcRenderer.invoke('util:openPath', p),
 };

web/package-lock.json

@@ -13,9 +13,12 @@
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tailwindcss/vite": "^4.1.17",

web/package.json

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import { Key, Sparkles, Terminal, Bot, Plug, Github, Volume2, VolumeX, Sun, Moon, Command, Settings, Check, X } from 'lucide-react';
+import { Key, Sparkles, Terminal, Bot, Plug, Github, Volume2, VolumeX, Sun, Moon, Command, Settings, Check, X, Blocks, Cpu } from 'lucide-react';
 import { Kbd } from '@/components/ui/kbd';
 import { useSound } from '@/hooks/useSound';
 import { Toaster } from 'sonner';
@@ -8,18 +8,21 @@ import SkillsManager from '@/components/SkillsManager';
 import CommandsManager from '@/components/CommandsManager';
 import DroidsManager from '@/components/DroidsManager';
 import McpManager from '@/components/McpManager';
+import ByokManager from '@/components/ByokManager';
 import PinDialog from '@/components/PinDialog';
 import { cn } from '@/lib/utils';
 import { checkAuth, authenticate, isElectron, checkDk, getDkConfig, setDkConfig, type DkConfig } from '@/utils/api';
 
-type Tab = 'keys' | 'commands' | 'skills' | 'droids' | 'mcp';
+type Tab = 'keys' | 'commands' | 'skills' | 'droids' | 'mcp' | 'byok' | 'extensions';
 
 const tabs: { id: Tab; label: string; icon: typeof Key }[] = [
   { id: 'keys', label: 'KEYS', icon: Key },
   { id: 'commands', label: 'COMMANDS', icon: Command },
   { id: 'skills', label: 'SKILLS', icon: Sparkles },
   { id: 'droids', label: 'DROIDS', icon: Bot },
   { id: 'mcp', label: 'MCP', icon: Plug },
+  { id: 'byok', label: 'BYOK', icon: Cpu },
+  { id: 'extensions', label: 'EXT', icon: Blocks },
 ];
 
 export default function App() {
@@ -373,6 +376,14 @@ export default function App() {
                   {activeTab === 'skills' && <SkillsManager />}
                   {activeTab === 'droids' && <DroidsManager />}
                   {activeTab === 'mcp' && <McpManager />}
+                  {activeTab === 'byok' && <ByokManager />}
+                  {activeTab === 'extensions' && (
+                    <div className="flex flex-col items-center justify-center h-64 text-muted-foreground">
+                      <Blocks className="h-10 w-10 mb-3 opacity-40" />
+                      <p className="text-sm">Extensions coming soon</p>
+                      <p className="text-xs text-muted-foreground/70 mt-1">Custom plugins and integrations</p>
+                    </div>
+                  )}
                 </>
               )}
             </main>
@@ -468,6 +479,14 @@ export default function App() {
               {activeTab === 'skills' && <SkillsManager />}
               {activeTab === 'droids' && <DroidsManager />}
               {activeTab === 'mcp' && <McpManager />}
+              {activeTab === 'byok' && <ByokManager />}
+              {activeTab === 'extensions' && (
+                <div className="flex flex-col items-center justify-center h-64 text-muted-foreground">
+                  <Blocks className="h-10 w-10 mb-3 opacity-40" />
+                  <p className="text-sm">Extensions coming soon</p>
+                  <p className="text-xs text-muted-foreground/70 mt-1">Custom plugins and integrations</p>
+                </div>
+              )}
             </>
           )}
         </main>