feat: Implement dk CLI presence check with installation prompt and integrate sonner for notifications.

Author: notdp

electron/main/index.ts

@@ -67,9 +67,13 @@ export function createMainWindow(): BrowserWindow {
     mainWindow = null;
   });
 
-  if (useDevServer) {
-    mainWindow.webContents.openDevTools({ mode: 'detach' });
-  }
+  mainWindow.webContents.setWindowOpenHandler((details) => {
+    if (details.url.startsWith('http:') || details.url.startsWith('https:')) {
+      require('electron').shell.openExternal(details.url);
+      return { action: 'deny' };
+    }
+    return { action: 'allow' };
+  });
 
   return mainWindow;
 }
@@ -80,26 +84,26 @@ export function getMainWindow(): BrowserWindow | null {
 
 async function initApp() {
   console.log('[oroio] Starting app...');
-  
+
   // Set dock icon on macOS (for dev mode)
   if (process.platform === 'darwin' && !app.isPackaged) {
     const iconPath = path.join(__dirname, '..', '..', 'assets', 'icon.png');
     app.dock.setIcon(iconPath);
   }
-  
+
   registerIpcHandlers();
-  
+
   try {
     console.log('[oroio] Getting key list...');
     const keys = await getKeyList();
     console.log('[oroio] Keys loaded:', keys.length);
-    
+
     console.log('[oroio] Initializing tray...');
     initTray(keys);
     console.log('[oroio] Tray initialized');
-    
+
     initNotifier(keys);
-    
+
     // Auto open main window on start
     createMainWindow();
     console.log('[oroio] App ready');

electron/main/ipc.ts

@@ -2,6 +2,7 @@ import { ipcMain, BrowserWindow, shell } from 'electron';
 import * as fs from 'fs/promises';
 import * as path from 'path';
 import * as os from 'os';
+import { exec } from 'child_process';
 import {
   getKeyList,
   getCurrentKey,
@@ -358,6 +359,19 @@ Droid instructions here.
   ipcMain.handle('util:openPath', async (_event, filePath: string): Promise<void> => {
     await shell.openPath(filePath);
   });
+
+  // dk CLI check
+  ipcMain.handle('dk:check', async (): Promise<{ installed: boolean; installCmd: string; platform: string }> => {
+    const platform = os.platform();
+    const cmd = platform === 'win32' ? 'where dk' : 'which dk';
+    const installed = await new Promise<boolean>((resolve) => {
+      exec(cmd, (error) => resolve(!error));
+    });
+    const installCmd = platform === 'win32'
+      ? 'irm https://raw.githubusercontent.com/notdp/oroio/main/install.ps1 | iex'
+      : 'curl -fsSL https://raw.githubusercontent.com/notdp/oroio/main/install.sh | bash';
+    return { installed, installCmd, platform };
+  });
 }
 
 function notifyAllWindows(channel: string, ...args: any[]): void {

electron/main/keyManager.ts

@@ -69,10 +69,13 @@ function encryptKeys(keys: string[]): Buffer {
 }
 
 async function ensureStore(): Promise<void> {
+  await fs.mkdir(OROIO_DIR, { recursive: true });
+  // 如果 keys.enc 不存在，创建空的加密文件
   try {
-    await fs.mkdir(OROIO_DIR, { recursive: true });
+    await fs.access(KEYS_FILE);
   } catch {
-    // ignore
+    const encrypted = encryptKeys([]);
+    await fs.writeFile(KEYS_FILE, encrypted);
   }
 }
 

electron/package.json

@@ -10,7 +10,7 @@
     "url": "https://github.com/notdp/oroio.git"
   },
   "scripts": {
-    "dev": "concurrently \"npm run dev:main\" \"npm run dev:renderer\"",
+    "dev": "concurrently \"npm run dev:main\" \"npm run dev:renderer\" \"sleep 2 && USE_DEV_SERVER=true electron .\"",
     "dev:main": "tsc -p tsconfig.main.json --watch",
     "dev:renderer": "cd ../web && npm run dev",
     "build": "npm run build:main && npm run build:renderer",
@@ -74,4 +74,4 @@
       ]
     }
   }
-}
+}

electron/preload/index.ts

@@ -26,6 +26,12 @@ export interface McpServer {
   env?: Record<string, string>;
 }
 
+export interface DkCheckResult {
+  installed: boolean;
+  installCmd: string;
+  platform: string;
+}
+
 export interface OroioAPI {
   keys: {
     list: () => Promise<any[]>;
@@ -39,6 +45,8 @@ export interface OroioAPI {
     read: (filename: string) => Promise<ArrayBuffer | null>;
   };
   on: (channel: string, callback: (...args: any[]) => void) => () => void;
+  // dk CLI check
+  checkDk: () => Promise<DkCheckResult>;
   // Skills
   listSkills: () => Promise<Skill[]>;
   createSkill: (name: string) => Promise<void>;
@@ -86,6 +94,8 @@ const api: OroioAPI = {
     ipcRenderer.on(channel, listener);
     return () => ipcRenderer.removeListener(channel, listener);
   },
+  // dk CLI check
+  checkDk: () => ipcRenderer.invoke('dk:check'),
   // Skills
   listSkills: () => ipcRenderer.invoke('skills:list'),
   createSkill: (name: string) => ipcRenderer.invoke('skills:create', name),

web/package-lock.json

@@ -26,6 +26,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-grab": "^0.0.54",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.17"
   },

web/package.json

@@ -1,14 +1,15 @@
 import { useState, useEffect, useCallback } from 'react';
-import { Key, Sparkles, Terminal, Bot, Plug, Activity } from 'lucide-react';
-import KeyList from '@/components/KeyList';
+import { Key, Sparkles, Terminal, Bot, Plug, Github } from 'lucide-react';
+import { Toaster } from 'sonner';
+import KeyList, { showDkMissingToast } from '@/components/KeyList';
 import SkillsManager from '@/components/SkillsManager';
 import CommandsManager from '@/components/CommandsManager';
 import DroidsManager from '@/components/DroidsManager';
 import McpManager from '@/components/McpManager';
 import PinDialog from '@/components/PinDialog';
 import { cn } from '@/lib/utils';
 import { Kbd } from '@/components/ui/kbd';
-import { checkAuth, authenticate, isElectron } from '@/utils/api';
+import { checkAuth, authenticate, isElectron, checkDk } from '@/utils/api';
 
 type Tab = 'keys' | 'commands' | 'skills' | 'droids' | 'mcp';
 
@@ -31,28 +32,43 @@ export default function App() {
   });
   const [fakePid] = useState(() => Math.floor(Math.random() * 9000) + 1000);
   const [fakeMemory] = useState(() => Math.floor(Math.random() * 50) + 20);
-  
+
   // Auth state
   const [authChecking, setAuthChecking] = useState(true);
   const [authenticated, setAuthenticated] = useState(false);
   const [authRequired, setAuthRequired] = useState(false);
   const [authError, setAuthError] = useState<string | undefined>();
+  const [dkMissing, setDkMissing] = useState(false);
 
   // Check auth on mount
   useEffect(() => {
-    if (isElectron) {
-      setAuthenticated(true);
-      setAuthChecking(false);
-      return;
-    }
-    checkAuth().then(result => {
-      setAuthRequired(result.required);
-      setAuthenticated(result.authenticated);
-      setAuthChecking(false);
-    }).catch(() => {
-      setAuthChecking(false);
-      setAuthenticated(true); // Assume no auth if check fails
-    });
+    const initChecks = async () => {
+      if (isElectron) {
+        setAuthenticated(true);
+        setAuthChecking(false);
+        // Check DK status
+        try {
+          const dkResult = await checkDk();
+          if (dkResult && !dkResult.installed) {
+            setDkMissing(true);
+          }
+        } catch (e) {
+          console.error("Failed to check DK status", e);
+        }
+        return;
+      }
+
+      try {
+        const result = await checkAuth();
+        setAuthRequired(result.required);
+        setAuthenticated(result.authenticated);
+      } catch {
+        setAuthenticated(true);
+      } finally {
+        setAuthChecking(false);
+      }
+    };
+    initChecks();
   }, []);
 
   const handlePinSubmit = async (pin: string): Promise<boolean> => {
@@ -107,6 +123,7 @@ export default function App() {
 
   return (
     <div className="min-h-screen bg-background text-foreground font-mono p-4 md:p-8 selection:bg-primary selection:text-primary-foreground relative overflow-hidden transition-colors duration-300">
+      <Toaster position="bottom-center" theme={theme} richColors />
       <div className="scanline" />
       <div className="max-w-5xl mx-auto space-y-8 relative z-10">
 
@@ -122,15 +139,32 @@ export default function App() {
 
             <div className="flex items-center gap-4 text-xs">
               <div className="flex items-center gap-2 text-muted-foreground mr-4 border-r border-border pr-4 h-full">
-                <div className="flex items-center gap-2">
-                  <Activity className="w-3 h-3" />
-                  <span>HOST: LOCALHOST</span>
-                </div>
-                <span className="text-muted-foreground/30">|</span>
-                <div className="flex items-center gap-2">
-                  <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
-                  <span>STATUS: CONNECTED</span>
-                </div>
+
+                <button
+                  className={cn(
+                    "flex items-center gap-2",
+                    dkMissing && "cursor-pointer hover:opacity-80 transition-opacity"
+                  )}
+                  onClick={async () => {
+                    if (dkMissing && isElectron) {
+                      const result = await checkDk();
+                      if (result && !result.installed) {
+                        showDkMissingToast(result.installCmd);
+                      }
+                    }
+                  }}
+                  disabled={!dkMissing}
+                >
+                  <span className={cn(
+                    "w-2 h-2 rounded-full animate-pulse",
+                    dkMissing ? "bg-amber-500" : "bg-emerald-500"
+                  )} />
+                  <span className={cn(
+                    dkMissing && "text-amber-500 font-bold"
+                  )}>
+                    {dkMissing ? "STATUS: DK MISSING" : "STATUS: CONNECTED"}
+                  </span>
+                </button>
               </div>
 
               <div className="flex items-center border border-border select-none bg-background">
@@ -158,6 +192,17 @@ export default function App() {
                   DARK
                 </button>
               </div>
+
+              <a
+                href="https://github.com/notdp/oroio"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 px-3 py-1 border border-border bg-background hover:bg-muted text-muted-foreground hover:text-foreground transition-all text-[10px] tracking-wider font-medium"
+                title="View Source on GitHub"
+              >
+                <Github className="w-3 h-3" />
+                <span>GITHUB</span>
+              </a>
             </div>
           </div>
         </header>