@geminilight/mindos 0.6.28 → 0.6.29

package/app/components/SearchModal.tsx

@@ -1,22 +1,32 @@
 'use client';
 
-import { useState, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
+import { useState, useEffect, useCallback, useRef, useLayoutEffect, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
-import { Search, X, FileText, Table } from 'lucide-react';
+import { Search, X, FileText, Table, Settings, RotateCcw, Moon, Sun, Bot, Compass, HelpCircle } from 'lucide-react';
 import { SearchResult } from '@/lib/types';
 import { encodePath } from '@/lib/utils';
 import { apiFetch } from '@/lib/api';
 import { useLocale } from '@/lib/LocaleContext';
+import { toast } from '@/lib/toast';
 
 interface SearchModalProps {
   open: boolean;
   onClose: () => void;
 }
 
+type PaletteTab = 'search' | 'actions';
+
+interface CommandAction {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+  shortcut?: string;
+  execute: () => void;
+}
+
 /** Highlight matched text fragments in a snippet based on the query */
 function highlightSnippet(snippet: string, query: string): React.ReactNode {
   if (!query.trim()) return snippet;
-  // Split query into words and escape for regex
   const words = query.trim().split(/\s+/).filter(Boolean);
   const escaped = words.map(w => w.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
   const pattern = new RegExp(`(${escaped.join('|')})`, 'gi');
@@ -31,12 +41,74 @@ export default function SearchModal({ open, onClose }: SearchModalProps) {
   const [results, setResults] = useState<SearchResult[]>([]);
   const [loading, setLoading] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [tab, setTab] = useState<PaletteTab>('search');
+  const [actionIndex, setActionIndex] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
   const resultsRef = useRef<HTMLDivElement>(null);
+  const actionsRef = useRef<HTMLDivElement>(null);
   const router = useRouter();
   const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const { t } = useLocale();
 
+  const isDark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
+
+  const actions: CommandAction[] = useMemo(() => [
+    {
+      id: 'settings',
+      label: t.search.openSettings,
+      icon: <Settings size={15} />,
+      shortcut: '⌘,',
+      execute: () => { router.push('/settings'); onClose(); },
+    },
+    {
+      id: 'restart-walkthrough',
+      label: t.search.restartWalkthrough,
+      icon: <RotateCcw size={15} />,
+      execute: () => {
+        fetch('/api/setup', {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ walkthroughStep: 0, walkthroughDismissed: false }),
+        }).then(() => {
+          toast.success(t.search.walkthroughRestarted);
+        }).catch(() => {
+          toast.error('Failed to restart walkthrough');
+        });
+        onClose();
+      },
+    },
+    {
+      id: 'toggle-dark-mode',
+      label: t.search.toggleDarkMode,
+      icon: isDark ? <Sun size={15} /> : <Moon size={15} />,
+      execute: () => {
+        const html = document.documentElement;
+        const nowDark = html.classList.contains('dark');
+        html.classList.toggle('dark', !nowDark);
+        try { localStorage.setItem('theme', nowDark ? 'light' : 'dark'); } catch { /* noop */ }
+        onClose();
+      },
+    },
+    {
+      id: 'go-agents',
+      label: t.search.goToAgents,
+      icon: <Bot size={15} />,
+      execute: () => { router.push('/agents'); onClose(); },
+    },
+    {
+      id: 'go-discover',
+      label: t.search.goToDiscover,
+      icon: <Compass size={15} />,
+      execute: () => { router.push('/discover'); onClose(); },
+    },
+    {
+      id: 'go-help',
+      label: t.search.goToHelp,
+      icon: <HelpCircle size={15} />,
+      execute: () => { router.push('/help'); onClose(); },
+    },
+  ], [t, router, onClose, isDark]);
+
   // Focus input when modal opens
   useEffect(() => {
     if (open) {
@@ -44,6 +116,8 @@ export default function SearchModal({ open, onClose }: SearchModalProps) {
       setQuery('');
       setResults([]);
       setSelectedIndex(0);
+      setTab('search');
+      setActionIndex(0);
     }
   }, [open]);
 
@@ -86,26 +160,51 @@ export default function SearchModal({ open, onClose }: SearchModalProps) {
     const handler = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         onClose();
+      } else if (e.key === 'Tab') {
+        // Tab switches between Search/Actions tabs
+        e.preventDefault();
+        setTab(prev => prev === 'search' ? 'actions' : 'search');
+        setActionIndex(0);
+        setSelectedIndex(0);
       } else if (e.key === 'ArrowDown') {
         e.preventDefault();
-        setSelectedIndex(i => Math.min(i + 1, results.length - 1));
+        if (tab === 'search') {
+          setSelectedIndex(i => Math.min(i + 1, results.length - 1));
+        } else {
+          setActionIndex(i => Math.min(i + 1, actions.length - 1));
+        }
       } else if (e.key === 'ArrowUp') {
         e.preventDefault();
-        setSelectedIndex(i => Math.max(i - 1, 0));
+        if (tab === 'search') {
+          setSelectedIndex(i => Math.max(i - 1, 0));
+        } else {
+          setActionIndex(i => Math.max(i - 1, 0));
+        }
       } else if (e.key === 'Enter') {
-        if (results[selectedIndex]) navigate(results[selectedIndex]);
+        if (tab === 'search') {
+          if (results[selectedIndex]) navigate(results[selectedIndex]);
+        } else {
+          if (actions[actionIndex]) actions[actionIndex].execute();
+        }
       }
     };
     window.addEventListener('keydown', handler);
     return () => window.removeEventListener('keydown', handler);
-  }, [open, onClose, results, selectedIndex, navigate]);
+  }, [open, onClose, results, selectedIndex, navigate, tab, actions, actionIndex]);
 
   useLayoutEffect(() => {
-    const container = resultsRef.current;
-    if (!container) return;
-    const selected = container.children[selectedIndex] as HTMLElement | undefined;
-    selected?.scrollIntoView({ block: 'nearest' });
-  }, [selectedIndex]);
+    if (tab === 'search') {
+      const container = resultsRef.current;
+      if (!container) return;
+      const selected = container.children[selectedIndex] as HTMLElement | undefined;
+      selected?.scrollIntoView({ block: 'nearest' });
+    } else {
+      const container = actionsRef.current;
+      if (!container) return;
+      const selected = container.children[actionIndex] as HTMLElement | undefined;
+      selected?.scrollIntoView({ block: 'nearest' });
+    }
+  }, [selectedIndex, actionIndex, tab]);
 
   if (!open) return null;
 
@@ -114,85 +213,140 @@ export default function SearchModal({ open, onClose }: SearchModalProps) {
       className="fixed inset-0 z-50 flex items-end md:items-start justify-center md:pt-[15vh] modal-backdrop"
       onClick={(e) => e.target === e.currentTarget && onClose()}
     >
-      <div role="dialog" aria-modal="true" aria-label="Search" className="w-full md:max-w-xl md:mx-4 bg-card border-t md:border border-border rounded-t-2xl md:rounded-xl shadow-2xl overflow-hidden max-h-[85vh] md:max-h-none flex flex-col">
+      <div role="dialog" aria-modal="true" aria-label="Command palette" className="w-full md:max-w-xl md:mx-4 bg-card border-t md:border border-border rounded-t-2xl md:rounded-xl shadow-2xl overflow-hidden max-h-[85vh] md:max-h-none flex flex-col">
         {/* Mobile drag indicator */}
         <div className="flex justify-center pt-2 pb-0 md:hidden">
           <div className="w-8 h-1 rounded-full bg-muted-foreground/20" />
         </div>
-        {/* Search input */}
-        <div className="flex items-center gap-3 px-4 py-3 border-b border-border">
-          <Search size={16} className="text-muted-foreground shrink-0" />
-          <input
-            ref={inputRef}
-            type="text"
-            value={query}
-            onChange={handleChange}
-            placeholder={t.search.placeholder}
-            className="flex-1 bg-transparent text-foreground placeholder:text-muted-foreground text-sm outline-none"
-          />
-          {loading && (
-            <div className="w-4 h-4 border-2 border-muted-foreground/40 border-t-foreground rounded-full animate-spin shrink-0" />
-          )}
-          {!loading && query && (
-            <button onClick={() => { setQuery(''); setResults([]); inputRef.current?.focus(); }}>
-              <X size={14} className="text-muted-foreground hover:text-foreground" />
-            </button>
-          )}
-          <kbd className="hidden md:inline text-xs text-muted-foreground border border-border rounded px-1.5 py-0.5 font-mono">ESC</kbd>
+
+        {/* Tab bar */}
+        <div className="flex items-center gap-1 px-4 pt-2 pb-0">
+          <button
+            onClick={() => { setTab('search'); setTimeout(() => inputRef.current?.focus(), 50); }}
+            className={`px-3 py-1.5 text-xs font-medium rounded-t transition-colors ${
+              tab === 'search'
+                ? 'text-foreground border-b-2 border-[var(--amber)]'
+                : 'text-muted-foreground hover:text-foreground'
+            }`}
+          >
+            {t.search.tabSearch}
+          </button>
+          <button
+            onClick={() => { setTab('actions'); setActionIndex(0); }}
+            className={`px-3 py-1.5 text-xs font-medium rounded-t transition-colors ${
+              tab === 'actions'
+                ? 'text-foreground border-b-2 border-[var(--amber)]'
+                : 'text-muted-foreground hover:text-foreground'
+            }`}
+          >
+            {t.search.tabActions}
+          </button>
         </div>
 
-        {/* Results */}
-        <div ref={resultsRef} className="max-h-[50vh] md:max-h-80 overflow-y-auto flex-1">
-          {results.length === 0 && query && !loading && (
-            <div className="px-4 py-8 text-center text-sm text-muted-foreground">{t.search.noResults}</div>
-          )}
-          {results.length === 0 && !query && (
-            <div className="px-4 py-8 text-center text-sm text-muted-foreground/60">{t.search.prompt}</div>
-          )}
-          {results.map((result, i) => {
-            const ext = result.path.endsWith('.csv') ? '.csv' : '.md';
-            const parts = result.path.split('/');
-            const fileName = parts[parts.length - 1];
-            const dirPath = parts.slice(0, -1).join('/');
-            return (
+        {/* Search tab */}
+        {tab === 'search' && (
+          <>
+            {/* Search input */}
+            <div className="flex items-center gap-3 px-4 py-3 border-b border-border">
+              <Search size={16} className="text-muted-foreground shrink-0" />
+              <input
+                ref={inputRef}
+                type="text"
+                value={query}
+                onChange={handleChange}
+                placeholder={t.search.placeholder}
+                className="flex-1 bg-transparent text-foreground placeholder:text-muted-foreground text-sm outline-none"
+              />
+              {loading && (
+                <div className="w-4 h-4 border-2 border-muted-foreground/40 border-t-foreground rounded-full animate-spin shrink-0" />
+              )}
+              {!loading && query && (
+                <button onClick={() => { setQuery(''); setResults([]); inputRef.current?.focus(); }}>
+                  <X size={14} className="text-muted-foreground hover:text-foreground" />
+                </button>
+              )}
+              <kbd className="hidden md:inline text-xs text-muted-foreground border border-border rounded px-1.5 py-0.5 font-mono">ESC</kbd>
+            </div>
+
+            {/* Results */}
+            <div ref={resultsRef} className="max-h-[50vh] md:max-h-80 overflow-y-auto flex-1">
+              {results.length === 0 && query && !loading && (
+                <div className="px-4 py-8 text-center text-sm text-muted-foreground">{t.search.noResults}</div>
+              )}
+              {results.length === 0 && !query && (
+                <div className="px-4 py-8 text-center text-sm text-muted-foreground/60">{t.search.prompt}</div>
+              )}
+              {results.map((result, i) => {
+                const ext = result.path.endsWith('.csv') ? '.csv' : '.md';
+                const parts = result.path.split('/');
+                const fileName = parts[parts.length - 1];
+                const dirPath = parts.slice(0, -1).join('/');
+                return (
+                  <button
+                    key={result.path}
+                    onClick={() => navigate(result)}
+                    onMouseEnter={() => setSelectedIndex(i)}
+                    className={`
+                      w-full px-4 py-3 flex items-start gap-3 text-left transition-colors duration-75
+                      ${i === selectedIndex ? 'bg-muted' : 'hover:bg-muted/50'}
+                      ${i < results.length - 1 ? 'border-b border-border' : ''}
+                    `}
+                  >
+                    {ext === '.csv'
+                      ? <Table size={14} className="text-success shrink-0 mt-0.5" />
+                      : <FileText size={14} className="text-muted-foreground shrink-0 mt-0.5" />
+                    }
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-baseline gap-2 flex-wrap">
+                        <span className="text-sm text-foreground font-medium truncate" title={fileName}>{fileName}</span>
+                        {dirPath && (
+                          <span className="text-xs text-muted-foreground truncate" title={dirPath}>{dirPath}</span>
+                        )}
+                      </div>
+                      {result.snippet && (
+                        <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2 leading-relaxed" title={result.snippet}>
+                          {highlightSnippet(result.snippet, query)}
+                        </p>
+                      )}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+
+            {/* Footer — desktop only */}
+            {results.length > 0 && (
+              <div className="hidden md:flex px-4 py-2 border-t border-border items-center gap-3 text-xs text-muted-foreground/60">
+                <span><kbd className="font-mono">↑↓</kbd> {t.search.navigate}</span>
+                <span><kbd className="font-mono">↵</kbd> {t.search.open}</span>
+                <span><kbd className="font-mono">ESC</kbd> {t.search.close}</span>
+              </div>
+            )}
+          </>
+        )}
+
+        {/* Actions tab */}
+        {tab === 'actions' && (
+          <div ref={actionsRef} className="max-h-[50vh] md:max-h-80 overflow-y-auto flex-1 py-1">
+            {actions.map((action, i) => (
               <button
-                key={result.path}
-                onClick={() => navigate(result)}
-                onMouseEnter={() => setSelectedIndex(i)}
+                key={action.id}
+                onClick={() => action.execute()}
+                onMouseEnter={() => setActionIndex(i)}
                 className={`
-                  w-full px-4 py-3 flex items-start gap-3 text-left transition-colors duration-75
-                  ${i === selectedIndex ? 'bg-muted' : 'hover:bg-muted/50'}
-                  ${i < results.length - 1 ? 'border-b border-border' : ''}
+                  w-full px-4 py-2.5 flex items-center gap-3 text-left transition-colors duration-75
+                  ${i === actionIndex ? 'bg-muted' : 'hover:bg-muted/50'}
                 `}
               >
-                {ext === '.csv'
-                  ? <Table size={14} className="text-success shrink-0 mt-0.5" />
-                  : <FileText size={14} className="text-muted-foreground shrink-0 mt-0.5" />
-                }
-                <div className="min-w-0 flex-1">
-                  <div className="flex items-baseline gap-2 flex-wrap">
-                    <span className="text-sm text-foreground font-medium truncate" title={fileName}>{fileName}</span>
-                    {dirPath && (
-                      <span className="text-xs text-muted-foreground truncate" title={dirPath}>{dirPath}</span>
-                    )}
-                  </div>
-                  {result.snippet && (
-                    <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2 leading-relaxed" title={result.snippet}>
-                      {highlightSnippet(result.snippet, query)}
-                    </p>
-                  )}
-                </div>
+                <span className="text-muted-foreground shrink-0">{action.icon}</span>
+                <span className="text-sm text-foreground flex-1">{action.label}</span>
+                {action.shortcut && (
+                  <kbd className="text-xs text-muted-foreground/60 font-mono border border-border rounded px-1.5 py-0.5">
+                    {action.shortcut}
+                  </kbd>
+                )}
               </button>
-            );
-          })}
-        </div>
-
-        {/* Footer — desktop only */}
-        {results.length > 0 && (
-          <div className="hidden md:flex px-4 py-2 border-t border-border items-center gap-3 text-xs text-muted-foreground/60">
-            <span><kbd className="font-mono">↑↓</kbd> {t.search.navigate}</span>
-            <span><kbd className="font-mono">↵</kbd> {t.search.open}</span>
-            <span><kbd className="font-mono">ESC</kbd> {t.search.close}</span>
+            ))}
           </div>
         )}
       </div>

package/app/components/agents/AgentDetailContent.tsx

@@ -5,6 +5,7 @@ import { useCallback, useMemo, useState } from 'react';
 import { ArrowLeft, ChevronDown, Globe, Server, Search, Trash2, Zap } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useLocale } from '@/lib/LocaleContext';
+import { toast } from '@/lib/toast';
 import { useMcpData } from '@/hooks/useMcpData';
 import { useA2aRegistry } from '@/hooks/useA2aRegistry';
 import { apiFetch } from '@/lib/api';
@@ -35,7 +36,6 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
   const [editContent, setEditContent] = useState('');
   const [editError, setEditError] = useState<string | null>(null);
   const [saveBusy, setSaveBusy] = useState(false);
-  const [snippetCopied, setSnippetCopied] = useState(false);
   const [mcpBusy, setMcpBusy] = useState(false);
   const [mcpMessage, setMcpMessage] = useState<string | null>(null);
   const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
@@ -162,9 +162,7 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
 
   const handleCopySnippet = useCallback(async () => {
     const ok = await copyToClipboard(snippet.snippet);
-    if (!ok) return;
-    setSnippetCopied(true);
-    setTimeout(() => setSnippetCopied(false), 1200);
+    if (ok) toast.copy();
   }, [snippet.snippet]);
 
   const handleApplyMcpConfig = useCallback(async (scope: 'project' | 'global', transport: 'stdio' | 'http') => {
@@ -277,7 +275,7 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
                 onClick={() => void handleCopySnippet()}
                 disabled={false}
                 busy={false}
-                label={snippetCopied ? a.detail.mcpCopied : a.detail.mcpCopySnippet}
+                label={a.detail.mcpCopySnippet}
               />
             )}
             <ActionButton

package/app/components/agents/AgentsContentPage.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
+import { toast } from '@/lib/toast';
 import { useLocale } from '@/lib/LocaleContext';
 import { useMcpData } from '@/hooks/useMcpData';
 import { useA2aRegistry } from '@/hooks/useA2aRegistry';
@@ -14,14 +15,20 @@ import {
 import AgentsOverviewSection from './AgentsOverviewSection';
 import AgentsMcpSection from './AgentsMcpSection';
 import AgentsSkillsSection from './AgentsSkillsSection';
+import AgentsPanelA2aTab from './AgentsPanelA2aTab';
 
 export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab }) {
   const { t } = useLocale();
   const a = t.agentsContent;
   const mcp = useMcpData();
   const a2a = useA2aRegistry();
-  const [copyState, setCopyState] = useState<string | null>(null);
   const pageHeader = useMemo(() => {
+    if (tab === 'a2a') {
+      return {
+        title: a.navNetwork,
+        subtitle: a.a2aTabEmptyHint,
+      };
+    }
     if (tab === 'skills') {
       return {
         title: a.navSkills,
@@ -62,9 +69,7 @@ export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab })
     if (!agent) return;
     const snippet = generateSnippet(agent, mcp.status, agent.preferredTransport);
     const ok = await copyToClipboard(snippet.snippet);
-    if (!ok) return;
-    setCopyState(agentKey);
-    setTimeout(() => setCopyState(null), 1500);
+    if (ok) toast.copy();
   };
 
   return (
@@ -93,12 +98,22 @@ export default function AgentsContentPage({ tab }: { tab: AgentsDashboardTab })
       )}
 
       {tab === 'mcp' && (
-        <AgentsMcpSection copy={{ ...a.mcp, status: a.status }} mcp={mcp} buckets={buckets} copyState={copyState} onCopySnippet={copySnippet} />
+        <AgentsMcpSection copy={{ ...a.mcp, status: a.status }} mcp={mcp} buckets={buckets} copyState={null} onCopySnippet={copySnippet} />
       )}
 
       {tab === 'skills' && (
         <AgentsSkillsSection copy={a.skills} mcp={mcp} buckets={buckets} />
       )}
+
+      {tab === 'a2a' && (
+        <AgentsPanelA2aTab
+          agents={a2a.agents}
+          discovering={a2a.discovering}
+          error={a2a.error}
+          onDiscover={a2a.discover}
+          onRemove={a2a.remove}
+        />
+      )}
     </div>
   );
 }