@geminilight/mindos 0.6.14 → 0.6.16

package/app/components/Panel.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { useMemo, useState } from 'react';
-import { ChevronsDownUp, ChevronsUpDown, FilePlus, Import } from 'lucide-react';
+import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { ChevronsDownUp, ChevronsUpDown, Plus, Import, FileText, Layers } from 'lucide-react';
 import type { PanelId } from './ActivityBar';
 import type { FileNode } from '@/lib/types';
 import FileTree from './FileTree';
@@ -77,11 +78,48 @@ export default function Panel({
   const width = maximized ? undefined : (panelWidth ?? defaultWidth);
 
   const { t } = useLocale();
+  const router = useRouter();
 
   // File tree depth control: null = manual (no override), number = forced max open depth
   const [maxOpenDepth, setMaxOpenDepth] = useState<number | null>(null);
   const treeMaxDepth = useMemo(() => getMaxDepth(fileTree), [fileTree]);
 
+  // "New" dropdown popover
+  const [newPopover, setNewPopover] = useState(false);
+  const newBtnRef = useRef<HTMLButtonElement>(null);
+  const newPopoverRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!newPopover) return;
+    const handler = (e: MouseEvent) => {
+      if (
+        newBtnRef.current && !newBtnRef.current.contains(e.target as Node) &&
+        newPopoverRef.current && !newPopoverRef.current.contains(e.target as Node)
+      ) {
+        setNewPopover(false);
+      }
+    };
+    const keyHandler = (e: KeyboardEvent) => { if (e.key === 'Escape') setNewPopover(false); };
+    document.addEventListener('mousedown', handler);
+    document.addEventListener('keydown', keyHandler);
+    return () => {
+      document.removeEventListener('mousedown', handler);
+      document.removeEventListener('keydown', keyHandler);
+    };
+  }, [newPopover]);
+
+  // Double-click hint: show only until user has used it once
+  const [dblHintSeen, setDblHintSeen] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return localStorage.getItem('mindos-tree-dblclick-hint') === '1';
+  });
+  const markDblHintSeen = useCallback(() => {
+    if (!dblHintSeen) {
+      setDblHintSeen(true);
+      try { localStorage.setItem('mindos-tree-dblclick-hint', '1'); } catch { /* ignore */ }
+    }
+  }, [dblHintSeen]);
+
   const handleMouseDown = useResizeDrag({
     width: panelWidth ?? defaultWidth,
     minWidth: MIN_PANEL_WIDTH,
@@ -109,49 +147,77 @@ export default function Panel({
       <div className={`flex flex-col h-full ${activePanel === 'files' ? '' : 'hidden'}`}>
         <PanelHeader title={t.sidebar.files}>
           <div className="flex items-center gap-0.5">
+            {/* New (File / Space) */}
+            <div className="relative">
+              <button
+                ref={newBtnRef}
+                type="button"
+                onClick={() => setNewPopover(v => !v)}
+                className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors focus-visible:ring-1 focus-visible:ring-ring"
+                aria-label={t.sidebar.new}
+                title={t.sidebar.new}
+              >
+                <Plus size={13} />
+              </button>
+              {newPopover && (
+                <div
+                  ref={newPopoverRef}
+                  className="absolute top-full right-0 mt-1 min-w-[152px] bg-card border border-border rounded-lg shadow-lg py-1 z-50"
+                >
+                  <button
+                    className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-foreground hover:bg-muted transition-colors text-left"
+                    onClick={() => { setNewPopover(false); router.push('/view/Untitled.md'); }}
+                  >
+                    <FileText size={14} className="shrink-0" />
+                    {t.sidebar.newFile}
+                  </button>
+                  <button
+                    className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-foreground hover:bg-muted transition-colors text-left"
+                    onClick={() => { setNewPopover(false); window.dispatchEvent(new Event('mindos:create-space')); }}
+                  >
+                    <Layers size={14} className="shrink-0 text-[var(--amber)]" />
+                    {t.sidebar.newSpace}
+                  </button>
+                </div>
+              )}
+            </div>
+            {/* Import */}
             <button
               type="button"
               onClick={() => onImport?.()}
-              className="p-1 rounded text-[var(--amber)] hover:bg-muted hover:text-[var(--amber)] transition-colors focus-visible:ring-1 focus-visible:ring-ring"
+              className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors focus-visible:ring-1 focus-visible:ring-ring"
               aria-label={t.sidebar.importFile}
               title={t.sidebar.importFile}
             >
               <Import size={13} />
             </button>
-            <button
-              type="button"
-              onClick={() => window.location.assign('/view/Untitled.md')}
-              className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors focus-visible:ring-1 focus-visible:ring-ring"
-              aria-label={t.sidebar.newFile}
-              title={t.sidebar.newFile}
-            >
-              <FilePlus size={13} />
-            </button>
+            {/* Separator: create actions | view actions */}
+            <div className="w-px h-3.5 bg-border mx-0.5" />
+            {/* Collapse Level */}
             <button
               onClick={() => setMaxOpenDepth(prev => {
                 const current = prev ?? treeMaxDepth;
                 return Math.max(-1, current - 1);
               })}
-              onDoubleClick={() => setMaxOpenDepth(-1)}
-              className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+              onDoubleClick={() => { setMaxOpenDepth(-1); markDblHintSeen(); }}
+              className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors focus-visible:ring-1 focus-visible:ring-ring"
               aria-label={t.sidebar.collapseLevel}
-              title={t.sidebar.collapseLevel}
+              title={dblHintSeen ? t.sidebar.collapseLevel : (t.sidebar.collapseLevelHint ?? t.sidebar.collapseLevel)}
             >
               <ChevronsDownUp size={13} />
             </button>
+            {/* Expand Level */}
             <button
               onClick={() => setMaxOpenDepth(prev => {
                 const current = prev ?? 0;
                 const next = current + 1;
-                if (next > treeMaxDepth) {
-                  return null; // fully expanded → release back to manual
-                }
+                if (next > treeMaxDepth) return null;
                 return next;
               })}
-              onDoubleClick={() => setMaxOpenDepth(null)}
-              className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+              onDoubleClick={() => { setMaxOpenDepth(null); markDblHintSeen(); }}
+              className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors focus-visible:ring-1 focus-visible:ring-ring"
               aria-label={t.sidebar.expandLevel}
-              title={t.sidebar.expandLevel}
+              title={dblHintSeen ? t.sidebar.expandLevel : (t.sidebar.expandLevelHint ?? t.sidebar.expandLevel)}
             >
               <ChevronsUpDown size={13} />
             </button>

package/app/components/SidebarLayout.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
 import Link from 'next/link';
 import { Search, Settings, Menu, X, FolderInput } from 'lucide-react';
@@ -13,7 +13,7 @@ import SearchPanel from './panels/SearchPanel';
 import AgentsPanel from './panels/AgentsPanel';
 import DiscoverPanel from './panels/DiscoverPanel';
 import EchoPanel from './panels/EchoPanel';
-import ImportHistoryPanel from './panels/ImportHistoryPanel';
+
 import RightAskPanel from './RightAskPanel';
 import RightAgentDetailPanel, {
   RIGHT_AGENT_DETAIL_DEFAULT_WIDTH,
@@ -29,6 +29,7 @@ import KeyboardShortcuts from './KeyboardShortcuts';
 import ChangesBanner from './changes/ChangesBanner';
 import SpaceInitToast from './SpaceInitToast';
 import OrganizeToast from './OrganizeToast';
+import CreateSpaceModal from './CreateSpaceModal';
 import { MobileSyncDot, useSyncStatus } from './SyncStatusBar';
 import { FileNode } from '@/lib/types';
 import { useLocale } from '@/lib/LocaleContext';
@@ -43,6 +44,18 @@ import { useAskPanel } from '@/hooks/useAskPanel';
 import { useAiOrganize } from '@/hooks/useAiOrganize';
 import type { Tab } from './settings/types';
 
+function collectDirPaths(nodes: FileNode[], prefix = ''): string[] {
+  const result: string[] = [];
+  for (const n of nodes) {
+    if (n.type === 'directory' && !n.name.startsWith('.')) {
+      const p = prefix ? `${prefix}/${n.name}` : n.name;
+      result.push(p);
+      if (n.children) result.push(...collectDirPaths(n.children, p));
+    }
+  }
+  return result;
+}
+
 interface SidebarLayoutProps {
   fileTree: FileNode[];
   children: React.ReactNode;
@@ -131,6 +144,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
   const { t } = useLocale();
   const router = useRouter();
   const pathname = usePathname();
+  const dirPaths = useMemo(() => collectDirPaths(fileTree), [fileTree]);
   const { status: syncStatus, fetchStatus: syncStatusRefresh } = useSyncStatus();
 
   const currentFile = pathname.startsWith('/view/')
@@ -375,9 +389,6 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         <div className={`flex flex-col h-full ${lp.activePanel === 'discover' ? '' : 'hidden'}`}>
           <DiscoverPanel active={lp.activePanel === 'discover'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
         </div>
-        <div className={`flex flex-col h-full ${lp.activePanel === 'history' ? '' : 'hidden'}`}>
-          <ImportHistoryPanel active={lp.activePanel === 'history'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} refreshToken={historyRefreshToken} />
-        </div>
       </Panel>
 
       {/* ── Right-side Ask AI Panel ── */}
@@ -504,6 +515,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         </div>
 
         <SpaceInitToast />
+        <CreateSpaceModal t={t} dirPaths={dirPaths} />
 
         {/* Global drag overlay */}
         {dragOverlay && !importModalOpen && (
@@ -523,6 +535,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         defaultSpace={importDefaultSpace}
         initialFiles={importInitialFiles}
         aiOrganize={aiOrganize}
+        dirPaths={dirPaths}
       />
 
       {organizeToastVisible && (

package/app/components/changes/ChangesContentPage.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { ChevronDown, ChevronRight, History, RefreshCw } from 'lucide-react';
 import { apiFetch } from '@/lib/api';
 import { useLocale } from '@/lib/LocaleContext';
+import CustomSelect from '@/components/CustomSelect';
 import { collapseDiffContext, buildLineDiff } from './line-diff';
 
 /** Semantic color for operation type badges */
@@ -102,6 +103,25 @@ export default function ChangesContentPage({ initialPath = '' }: { initialPath?:
     return ['all', ...ops];
   }, [events, opFilter]);
 
+  const sourceSelectOptions = useMemo(
+    () => [
+      { value: 'all', label: t.changes.filters.all },
+      { value: 'agent', label: t.changes.filters.agent },
+      { value: 'user', label: t.changes.filters.user },
+      { value: 'system', label: t.changes.filters.system },
+    ],
+    [t],
+  );
+
+  const opSelectOptions = useMemo(
+    () =>
+      opOptions.map((op) => ({
+        value: op,
+        label: op === 'all' ? t.changes.filters.operationAll : op,
+      })),
+    [opOptions, t],
+  );
+
   const sourceLabel = useCallback((source: ChangeEvent['source']) => {
     if (source === 'agent') return t.changes.filters.agent;
     if (source === 'user') return t.changes.filters.user;
@@ -161,33 +181,24 @@ export default function ChangesContentPage({ initialPath = '' }: { initialPath?:
                   className="mt-1 w-full px-2.5 py-1.5 text-sm bg-background border border-border rounded-lg text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 />
               </label>
-              <label className="block">
+              <div className="block">
                 <span className="text-xs text-muted-foreground font-display">{t.changes.filters.source}</span>
-                <select
+                <CustomSelect
                   value={sourceFilter}
-                  onChange={(e) => setSourceFilter(e.target.value as 'all' | 'agent' | 'user' | 'system')}
-                  className="mt-1 w-full px-2.5 py-1.5 text-sm bg-background border border-border rounded-lg text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                >
-                  <option value="all">{t.changes.filters.all}</option>
-                  <option value="agent">{t.changes.filters.agent}</option>
-                  <option value="user">{t.changes.filters.user}</option>
-                  <option value="system">{t.changes.filters.system}</option>
-                </select>
-              </label>
-              <label className="block">
+                  onChange={(v) => setSourceFilter(v as 'all' | 'agent' | 'user' | 'system')}
+                  options={sourceSelectOptions}
+                  className="mt-1"
+                />
+              </div>
+              <div className="block">
                 <span className="text-xs text-muted-foreground font-display">{t.changes.filters.operation}</span>
-                <select
+                <CustomSelect
                   value={opFilter}
-                  onChange={(e) => setOpFilter(e.target.value)}
-                  className="mt-1 w-full px-2.5 py-1.5 text-sm bg-background border border-border rounded-lg text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                >
-                  {opOptions.map((op) => (
-                    <option key={op} value={op}>
-                      {op === 'all' ? t.changes.filters.operationAll : op}
-                    </option>
-                  ))}
-                </select>
-              </label>
+                  onChange={setOpFilter}
+                  options={opSelectOptions}
+                  className="mt-1"
+                />
+              </div>
               <label className="block">
                 <span className="text-xs text-muted-foreground font-display">{t.changes.filters.keyword}</span>
                 <input

package/app/components/renderers/csv/ConfigPanel.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { X } from 'lucide-react';
+import CustomSelect from '@/components/CustomSelect';
 import type { CsvConfig, ViewType } from './types';
 
 export function ConfigPanel({ headers, cfg, view, onClose, onChange }: {
@@ -11,18 +12,20 @@ export function ConfigPanel({ headers, cfg, view, onClose, onChange }: {
   onChange: (cfg: CsvConfig) => void;
 }) {
   const labelStyle: React.CSSProperties = { color: 'var(--muted-foreground)', fontSize: '0.72rem' };
-  const selectStyle: React.CSSProperties = { background: 'var(--background)', color: 'var(--foreground)', borderColor: 'var(--border)', fontSize: '0.72rem' };
 
   function FieldSelect({ label, value, onChange: onCh }: { label: string; value: string; onChange: (v: string) => void }) {
     return (
       <div className="flex items-center justify-between gap-2">
         <span className="font-display" style={labelStyle}>{label}</span>
-        <select value={value} onChange={e => onCh(e.target.value)}
-          className="rounded px-2 py-1 outline-none border font-display" style={selectStyle}
-        >
-          <option value="">— none —</option>
-          {headers.map(h => <option key={h} value={h}>{h}</option>)}
-        </select>
+        <CustomSelect
+          value={value}
+          onChange={onCh}
+          size="sm"
+          options={[
+            { value: '', label: '— none —' },
+            ...headers.map(h => ({ value: h, label: h })),
+          ]}
+        />
       </div>
     );
   }

package/app/components/settings/KnowledgeTab.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback, useSyncExternalStore, useRef } from '
 import { Copy, Check, RefreshCw, Trash2, Sparkles, ChevronDown, ChevronRight, Loader2, Cpu, Zap, Database as DatabaseIcon, HardDrive, RotateCcw } from 'lucide-react';
 import type { KnowledgeTabProps } from './types';
 import { Field, Input, EnvBadge, SectionLabel, Toggle } from './Primitives';
+import { ConfirmDialog } from '@/components/agents/AgentsPrimitives';
 import { apiFetch } from '@/lib/api';
 import { copyToClipboard } from '@/lib/clipboard';
 import { formatBytes, formatUptime } from '@/lib/format';
@@ -99,12 +100,17 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
   const [resetting, setResetting] = useState(false);
   // revealed holds the plaintext token after regenerate, until user navigates away
   const [revealedToken, setRevealedToken] = useState<string | null>(null);
+  const [showResetConfirm, setShowResetConfirm] = useState(false);
+  const [showCleanupConfirm, setShowCleanupConfirm] = useState(false);
 
   const hasToken = !!(data.authToken);
   const displayToken = revealedToken ?? data.authToken ?? '';
 
-  async function handleResetToken() {
-    if (!confirm(k.authTokenResetConfirm)) return;
+  function handleResetToken() {
+    setShowResetConfirm(true);
+  }
+
+  async function doResetToken() {
     setResetting(true);
     try {
       const res = await apiFetch<{ ok: boolean; token: string }>('/api/settings/reset-token', { method: 'POST' });
@@ -165,16 +171,7 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
             <div className="text-xs text-muted-foreground mt-0.5">{k.cleanupExamplesHint}</div>
           </div>
           <button
-            onClick={async () => {
-              if (!confirm(k.cleanupExamplesConfirm(exampleCount))) return;
-              setCleaningUp(true);
-              const r = await cleanupExamplesAction();
-              setCleaningUp(false);
-              if (r.success) {
-                setCleanupResult(r.deleted);
-                setExampleCount(0);
-              }
-            }}
+            onClick={() => setShowCleanupConfirm(true)}
             disabled={cleaningUp}
             className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0 disabled:opacity-50"
           >
@@ -301,6 +298,35 @@ export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
 
       {/* System Monitoring — collapsible */}
       <MonitoringSection />
+
+      <ConfirmDialog
+        open={showResetConfirm}
+        title={k.authTokenReset ?? 'Regenerate Token'}
+        message={k.authTokenResetConfirm}
+        confirmLabel={k.authTokenReset ?? 'Regenerate'}
+        cancelLabel="Cancel"
+        onConfirm={() => { setShowResetConfirm(false); doResetToken(); }}
+        onCancel={() => setShowResetConfirm(false)}
+      />
+      <ConfirmDialog
+        open={showCleanupConfirm}
+        title={k.cleanupExamples ?? 'Cleanup Examples'}
+        message={exampleCount !== null ? k.cleanupExamplesConfirm(exampleCount) : ''}
+        confirmLabel={k.cleanupExamplesButton ?? 'Clean up'}
+        cancelLabel="Cancel"
+        variant="destructive"
+        onConfirm={async () => {
+          setShowCleanupConfirm(false);
+          setCleaningUp(true);
+          const r = await cleanupExamplesAction();
+          setCleaningUp(false);
+          if (r.success) {
+            setCleanupResult(r.deleted);
+            setExampleCount(0);
+          }
+        }}
+        onCancel={() => setShowCleanupConfirm(false)}
+      />
     </div>
   );
 }

package/app/components/settings/McpAgentInstall.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import { CheckCircle2, AlertCircle, Loader2 } from 'lucide-react';
+import CustomSelect from '@/components/CustomSelect';
 import { apiFetch } from '@/lib/api';
 import type { AgentInfo, McpAgentInstallProps } from './types';
 
@@ -90,8 +91,7 @@ export default function AgentInstall({ agents, t, onRefresh }: McpAgentInstallPr
               type="checkbox"
               checked={selected.has(agent.key)}
               onChange={() => toggle(agent.key)}
-              className="rounded border-border"
-              style={{ accentColor: 'var(--amber)' }}
+              className="form-check"
             />
             <span className="w-28 shrink-0 text-xs">{agent.name}</span>
             <span className="text-2xs px-1.5 py-0.5 rounded font-mono bg-muted">
@@ -111,14 +111,16 @@ export default function AgentInstall({ agents, t, onRefresh }: McpAgentInstallPr
             )}
             {/* Scope selector */}
             {selected.has(agent.key) && agent.hasProjectScope && agent.hasGlobalScope && (
-              <select
+              <CustomSelect
                 value={scopes[agent.key] || 'project'}
-                onChange={e => setScopes({ ...scopes, [agent.key]: e.target.value as 'project' | 'global' })}
-                className="ml-auto text-2xs px-1.5 py-0.5 rounded border border-border bg-background text-foreground"
-              >
-                <option value="project">{m?.project ?? 'Project'}</option>
-                <option value="global">{m?.global ?? 'Global'}</option>
-              </select>
+                onChange={v => setScopes({ ...scopes, [agent.key]: v as 'project' | 'global' })}
+                size="sm"
+                className="ml-auto"
+                options={[
+                  { value: 'project', label: m?.project ?? 'Project' },
+                  { value: 'global', label: m?.global ?? 'Global' },
+                ]}
+              />
             )}
           </div>
         ))}
@@ -143,33 +145,15 @@ export default function AgentInstall({ agents, t, onRefresh }: McpAgentInstallPr
       {/* Transport selector */}
       <div className="flex items-center gap-4 text-xs pt-1">
         <label className="flex items-center gap-1.5 cursor-pointer">
-          <input
-            type="radio"
-            name="transport"
-            checked={transport === 'auto'}
-            onChange={() => setTransport('auto')}
-            style={{ accentColor: 'var(--amber)' }}
-          />
+          <input type="radio" name="transport" checked={transport === 'auto'} onChange={() => setTransport('auto')} className="form-radio" />
           {m?.transportAuto ?? 'auto (recommended)'}
         </label>
         <label className="flex items-center gap-1.5 cursor-pointer">
-          <input
-            type="radio"
-            name="transport"
-            checked={transport === 'stdio'}
-            onChange={() => setTransport('stdio')}
-            style={{ accentColor: 'var(--amber)' }}
-          />
+          <input type="radio" name="transport" checked={transport === 'stdio'} onChange={() => setTransport('stdio')} className="form-radio" />
           {m?.transportStdio ?? 'stdio'}
         </label>
         <label className="flex items-center gap-1.5 cursor-pointer">
-          <input
-            type="radio"
-            name="transport"
-            checked={transport === 'http'}
-            onChange={() => setTransport('http')}
-            style={{ accentColor: 'var(--amber)' }}
-          />
+          <input type="radio" name="transport" checked={transport === 'http'} onChange={() => setTransport('http')} className="form-radio" />
           {m?.transportHttp ?? 'http'}
         </label>
       </div>

package/app/components/settings/McpSkillsSection.tsx

@@ -7,10 +7,13 @@ import {
 } from 'lucide-react';
 import { apiFetch } from '@/lib/api';
 import { useMcpDataOptional } from '@/hooks/useMcpData';
+import { ConfirmDialog } from '@/components/agents/AgentsPrimitives';
 import { copyToClipboard } from '@/lib/clipboard';
 import type { SkillInfo, McpSkillsSectionProps } from './types';
 import SkillRow from './McpSkillRow';
 import SkillCreateForm from './McpSkillCreateForm';
+import CustomSelect from '@/components/CustomSelect';
+import type { SelectItem } from '@/components/CustomSelect';
 
 /* ── Skills Section ────────────────────────────────────────────── */
 
@@ -33,6 +36,7 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
   const [loadingContent, setLoadingContent] = useState<string | null>(null);
   const [loadErrors, setLoadErrors] = useState<Record<string, string>>({});
   const [switchingLang, setSwitchingLang] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
 
   const fetchSkills = useCallback(async () => {
     try {
@@ -82,9 +86,11 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
     }
   };
 
-  const handleDelete = async (name: string) => {
-    const confirmMsg = m?.skillDeleteConfirm ? m.skillDeleteConfirm(name) : `Delete skill "${name}"?`;
-    if (!confirm(confirmMsg)) return;
+  const handleDelete = (name: string) => {
+    setDeleteTarget(name);
+  };
+
+  const doDelete = async (name: string) => {
     try {
       await apiFetch('/api/skills', {
         method: 'POST',
@@ -365,6 +371,21 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
         })()}
         m={m}
       />
+
+      <ConfirmDialog
+        open={!!deleteTarget}
+        title="Delete skill?"
+        message={deleteTarget ? (m?.skillDeleteConfirm?.(deleteTarget) ?? `Delete skill "${deleteTarget}"?`) : ''}
+        confirmLabel="Delete"
+        cancelLabel="Cancel"
+        variant="destructive"
+        onConfirm={async () => {
+          const name = deleteTarget!;
+          setDeleteTarget(null);
+          await doDelete(name);
+        }}
+        onCancel={() => setDeleteTarget(null)}
+      />
     </div>
   );
 }
@@ -399,30 +420,25 @@ function SkillCliHint({ agents, skillName, m }: {
       </p>
 
       {/* Agent selector */}
-      <div className="relative">
-        <select
-          value={selectedAgent}
-          onChange={(e) => setSelectedAgent(e.target.value)}
-          className="w-full appearance-none px-2.5 py-1.5 pr-7 text-2xs rounded-md border border-border bg-background text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-        >
-          {connected.length > 0 && (
-            <optgroup label={m?.connectedGroup ?? 'Connected'}>
-              {connected.map(a => <option key={a.key} value={a.key}>✓ {a.name}</option>)}
-            </optgroup>
-          )}
-          {detected.length > 0 && (
-            <optgroup label={m?.detectedGroup ?? 'Detected'}>
-              {detected.map(a => <option key={a.key} value={a.key}>○ {a.name}</option>)}
-            </optgroup>
-          )}
-          {notFound.length > 0 && (
-            <optgroup label={m?.notFoundGroup ?? 'Not Installed'}>
-              {notFound.map(a => <option key={a.key} value={a.key}>· {a.name}</option>)}
-            </optgroup>
-          )}
-        </select>
-        <ChevronDown size={12} className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none" />
-      </div>
+      <CustomSelect
+        value={selectedAgent}
+        onChange={setSelectedAgent}
+        size="sm"
+        options={[
+          ...(connected.length > 0 ? [{
+            label: m?.connectedGroup ?? 'Connected',
+            options: connected.map(a => ({ value: a.key, label: a.name })),
+          }] : []),
+          ...(detected.length > 0 ? [{
+            label: m?.detectedGroup ?? 'Detected',
+            options: detected.map(a => ({ value: a.key, label: a.name })),
+          }] : []),
+          ...(notFound.length > 0 ? [{
+            label: m?.notFoundGroup ?? 'Not Installed',
+            options: notFound.map(a => ({ value: a.key, label: a.name })),
+          }] : []),
+        ] as SelectItem[]}
+      />
 
       {/* Command */}
       <div className="flex items-center gap-1.5">