@geminilight/mindos 0.5.69 → 0.6.0

package/app/components/ask/AskContent.tsx

@@ -1,14 +1,17 @@
 'use client';
 
 import { useEffect, useLayoutEffect, useRef, useState, useCallback } from 'react';
-import { Sparkles, Send, AtSign, Paperclip, StopCircle, RotateCcw, History, X, Maximize2, Minimize2, PanelRight, AppWindow } from 'lucide-react';
+import { Sparkles, Send, Paperclip, StopCircle, RotateCcw, History, X, Zap, Maximize2, Minimize2, PanelRight, AppWindow } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
 import type { Message } from '@/lib/types';
 import { useAskSession } from '@/hooks/useAskSession';
 import { useFileUpload } from '@/hooks/useFileUpload';
 import { useMention } from '@/hooks/useMention';
+import { useSlashCommand } from '@/hooks/useSlashCommand';
+import type { SlashItem } from '@/hooks/useSlashCommand';
 import MessageList from '@/components/ask/MessageList';
 import MentionPopover from '@/components/ask/MentionPopover';
+import SlashCommandPopover from '@/components/ask/SlashCommandPopover';
 import SessionHistory from '@/components/ask/SessionHistory';
 import FileChip from '@/components/ask/FileChip';
 import { consumeUIMessageStream } from '@/lib/agent/stream-consumer';
@@ -173,9 +176,23 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
   const [showHistory, setShowHistory] = useState(false);
   const [isDragOver, setIsDragOver] = useState(false);
 
+  const [selectedSkill, setSelectedSkill] = useState<SlashItem | null>(null);
+
   const session = useAskSession(currentFile);
   const upload = useFileUpload();
   const mention = useMention();
+  const slash = useSlashCommand();
+
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const files = (e as CustomEvent).detail?.files;
+      if (Array.isArray(files) && files.length > 0) {
+        upload.injectFiles(files);
+      }
+    };
+    window.addEventListener('mindos:inject-ask-files', handler);
+    return () => window.removeEventListener('mindos:inject-ask-files', handler);
+  }, [upload]);
 
   // Focus and init session when becoming visible (edge-triggered for panel, level-triggered for modal)
   const prevVisibleRef = useRef(false);
@@ -192,6 +209,8 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
       setAttachedFiles(currentFile ? [currentFile] : []);
       upload.clearAttachments();
       mention.resetMention();
+      slash.resetSlash();
+      setSelectedSkill(null);
       setShowHistory(false);
     } else if (!visible && variant === 'modal') {
       // Modal: abort streaming on close
@@ -215,12 +234,13 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
     const handler = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         if (mention.mentionQuery !== null) { mention.resetMention(); return; }
+        if (slash.slashQuery !== null) { slash.resetSlash(); return; }
         onClose();
       }
     };
     window.addEventListener('keydown', handler);
     return () => window.removeEventListener('keydown', handler);
-  }, [variant, visible, onClose, mention]);
+  }, [variant, visible, onClose, mention, slash]);
 
   useEffect(() => {
     if (!isPanel) return;
@@ -241,29 +261,67 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
   }, [input, isPanel, isLoading, visible, panelComposerHeight]);
 
   const mentionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const handleInputChange = useCallback((val: string) => {
+  const slashTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const handleInputChange = useCallback((val: string, cursorPos?: number) => {
     setInput(val);
+    const pos = cursorPos ?? val.length;
     if (mentionTimerRef.current) clearTimeout(mentionTimerRef.current);
-    mentionTimerRef.current = setTimeout(() => mention.updateMentionFromInput(val), 80);
-  }, [mention]);
+    if (slashTimerRef.current) clearTimeout(slashTimerRef.current);
+    mentionTimerRef.current = setTimeout(() => mention.updateMentionFromInput(val, pos), 80);
+    slashTimerRef.current = setTimeout(() => slash.updateSlashFromInput(val, pos), 80);
+  }, [mention, slash]);
 
   useEffect(() => {
-    return () => { if (mentionTimerRef.current) clearTimeout(mentionTimerRef.current); };
+    return () => {
+      if (mentionTimerRef.current) clearTimeout(mentionTimerRef.current);
+      if (slashTimerRef.current) clearTimeout(slashTimerRef.current);
+    };
   }, []);
 
   const selectMention = useCallback((filePath: string) => {
-    const atIdx = input.lastIndexOf('@');
-    setInput(input.slice(0, atIdx));
+    const el = inputRef.current;
+    const cursorPos = el
+      ? (el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement ? el.selectionStart ?? input.length : input.length)
+      : input.length;
+    const before = input.slice(0, cursorPos);
+    const atIdx = before.lastIndexOf('@');
+    const newVal = input.slice(0, atIdx) + input.slice(cursorPos);
+    setInput(newVal);
     mention.resetMention();
     if (!attachedFiles.includes(filePath)) {
       setAttachedFiles(prev => [...prev, filePath]);
     }
-    setTimeout(() => inputRef.current?.focus(), 0);
+    setTimeout(() => {
+      inputRef.current?.focus();
+      inputRef.current?.setSelectionRange(atIdx, atIdx);
+    }, 0);
   }, [input, attachedFiles, mention]);
 
+  const selectSlashCommand = useCallback((item: SlashItem) => {
+    const el = inputRef.current;
+    const cursorPos = el
+      ? (el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement ? el.selectionStart ?? input.length : input.length)
+      : input.length;
+    const before = input.slice(0, cursorPos);
+    const slashIdx = before.lastIndexOf('/');
+    const newVal = input.slice(0, slashIdx) + input.slice(cursorPos);
+    setInput(newVal);
+    setSelectedSkill(item);
+    slash.resetSlash();
+    setTimeout(() => {
+      inputRef.current?.focus();
+      inputRef.current?.setSelectionRange(slashIdx, slashIdx);
+    }, 0);
+  }, [input, slash]);
+
   const handleInputKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
       if (mention.mentionQuery !== null) {
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          mention.resetMention();
+          return;
+        }
         if (e.key === 'ArrowDown') {
           e.preventDefault();
           mention.navigateMention('down');
@@ -279,29 +337,51 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
         }
         return;
       }
-      // Panel: multiline input — Enter sends, Shift+Enter inserts newline (textarea default).
+      if (slash.slashQuery !== null) {
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          slash.resetSlash();
+          return;
+        }
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          slash.navigateSlash('down');
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          slash.navigateSlash('up');
+        } else if (e.key === 'Enter' || e.key === 'Tab') {
+          if (e.key === 'Enter' && e.shiftKey) return;
+          if (slash.slashResults.length > 0) {
+            e.preventDefault();
+            selectSlashCommand(slash.slashResults[slash.slashIndex]);
+          }
+        }
+        return;
+      }
       if (variant === 'panel' && e.key === 'Enter' && !e.shiftKey && !isLoading && input.trim()) {
         e.preventDefault();
         (e.currentTarget as HTMLTextAreaElement).form?.requestSubmit();
       }
     },
-    [mention, selectMention, variant, isLoading, input],
+    [mention, selectMention, slash, selectSlashCommand, variant, isLoading, input],
   );
 
   const handleStop = useCallback(() => { abortRef.current?.abort(); }, []);
 
   const handleSubmit = useCallback(async (e: React.FormEvent) => {
     e.preventDefault();
-    if (mention.mentionQuery !== null) return;
+    if (mention.mentionQuery !== null || slash.slashQuery !== null) return;
     const text = input.trim();
     if (!text || isLoading) return;
 
-    // Attach current timestamp so backend knows EXACTLY when the user typed this message
-    const userMsg: Message = { role: 'user', content: text, timestamp: Date.now() };
+    const content = selectedSkill
+      ? `Use the skill ${selectedSkill.name}: ${text}`
+      : text;
+    const userMsg: Message = { role: 'user', content, timestamp: Date.now() };
     const requestMessages = [...session.messages, userMsg];
-    // And for the incoming assistant response, give it an initial timestamp
     session.setMessages([...requestMessages, { role: 'assistant', content: '', timestamp: Date.now() }]);
     setInput('');
+    setSelectedSkill(null);
     if (onFirstMessage && !firstMessageFired.current) {
       firstMessageFired.current = true;
       onFirstMessage();
@@ -399,7 +479,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
       setIsLoading(false);
       abortRef.current = null;
     }
-  }, [input, session, isLoading, currentFile, attachedFiles, upload.localAttachments, mention.mentionQuery, t.ask.errorNoResponse, t.ask.stopped, onFirstMessage]);
+  }, [input, session, isLoading, currentFile, attachedFiles, upload.localAttachments, mention.mentionQuery, slash.slashQuery, selectedSkill, t.ask.errorNoResponse, t.ask.stopped, onFirstMessage]);
 
   const handleResetSession = useCallback(() => {
     if (isLoading) return;
@@ -408,9 +488,11 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
     setAttachedFiles(currentFile ? [currentFile] : []);
     upload.clearAttachments();
     mention.resetMention();
+    slash.resetSlash();
+    setSelectedSkill(null);
     setShowHistory(false);
     setTimeout(() => inputRef.current?.focus(), 0);
-  }, [isLoading, currentFile, session, upload, mention]);
+  }, [isLoading, currentFile, session, upload, mention, slash]);
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
     if (e.dataTransfer.types.includes('text/mindos-path')) {
@@ -438,8 +520,10 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
     setAttachedFiles(currentFile ? [currentFile] : []);
     upload.clearAttachments();
     mention.resetMention();
+    slash.resetSlash();
+    setSelectedSkill(null);
     setTimeout(() => inputRef.current?.focus(), 0);
-  }, [session, currentFile, upload, mention]);
+  }, [session, currentFile, upload, mention, slash]);
 
   const iconSize = isPanel ? 13 : 14;
   const inputIconSize = isPanel ? 14 : 15;
@@ -509,6 +593,27 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
         labels={{ connecting: t.ask.connecting, thinking: t.ask.thinking, generating: t.ask.generating }}
       />
 
+      {/* Popovers — rendered outside overflow containers so they can extend freely */}
+      {mention.mentionQuery !== null && mention.mentionResults.length > 0 && (
+        <div className="shrink-0 px-2 pb-1">
+          <MentionPopover
+            results={mention.mentionResults}
+            selectedIndex={mention.mentionIndex}
+            onSelect={selectMention}
+          />
+        </div>
+      )}
+
+      {slash.slashQuery !== null && slash.slashResults.length > 0 && (
+        <div className="shrink-0 px-2 pb-1">
+          <SlashCommandPopover
+            results={slash.slashResults}
+            selectedIndex={slash.slashIndex}
+            onSelect={selectSlashCommand}
+          />
+        </div>
+      )}
+
       {/* Input area — panel: fixed-height shell + top drag handle (persisted); modal: simple block */}
       <div
         className={cn(
@@ -547,7 +652,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
           {attachedFiles.length > 0 && (
             <div className={cn('shrink-0', isPanel ? 'px-3 pt-2 pb-1' : 'px-4 pt-2.5 pb-1')}>
               <div className={`text-muted-foreground/70 mb-1 ${isPanel ? 'text-[10px]' : 'text-xs'}`}>
-                {isPanel ? 'Context' : 'Knowledge Base Context'}
+                {t.ask.attachFile}
               </div>
               <div className={`flex flex-wrap ${isPanel ? 'gap-1' : 'gap-1.5'}`}>
                 {attachedFiles.map(f => (
@@ -560,7 +665,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
           {upload.localAttachments.length > 0 && (
             <div className={cn('shrink-0', isPanel ? 'px-3 pb-1' : 'px-4 pb-1')}>
               <div className={`text-muted-foreground/70 mb-1 ${isPanel ? 'text-[10px]' : 'text-xs'}`}>
-                {isPanel ? 'Uploaded' : 'Uploaded Files'}
+                {t.ask.uploadedFiles}
               </div>
               <div className={`flex flex-wrap ${isPanel ? 'gap-1' : 'gap-1.5'}`}>
                 {upload.localAttachments.map((f, idx) => (
@@ -570,16 +675,25 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
             </div>
           )}
 
-          {upload.uploadError && (
-            <div className={cn('shrink-0 pb-1 text-xs text-error', isPanel ? 'px-3' : 'px-4')}>{upload.uploadError}</div>
+          {selectedSkill && (
+            <div className={cn('shrink-0', isPanel ? 'px-3 pt-1.5 pb-1' : 'px-4 pt-2 pb-1')}>
+              <span className="inline-flex items-center gap-1.5 pl-2 pr-1 py-1 rounded-md text-xs bg-[var(--amber)]/10 border border-[var(--amber)]/25 text-foreground">
+                <Zap size={11} className="text-[var(--amber)] shrink-0" />
+                <span className="font-medium">{selectedSkill.name}</span>
+                <button
+                  type="button"
+                  onClick={() => { setSelectedSkill(null); inputRef.current?.focus(); }}
+                  className="p-0.5 rounded text-muted-foreground hover:text-foreground transition-colors shrink-0"
+                  aria-label={`Remove skill ${selectedSkill.name}`}
+                >
+                  <X size={10} />
+                </button>
+              </span>
+            </div>
           )}
 
-          {mention.mentionQuery !== null && mention.mentionResults.length > 0 && (
-            <MentionPopover
-              results={mention.mentionResults}
-              selectedIndex={mention.mentionIndex}
-              onSelect={selectMention}
-            />
+          {upload.uploadError && (
+            <div className={cn('shrink-0 pb-1 text-xs text-error', isPanel ? 'px-3' : 'px-4')}>{upload.uploadError}</div>
           )}
 
           <form
@@ -607,32 +721,13 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
             }}
           />
 
-          <button
-            type="button"
-            onClick={() => {
-              const el = inputRef.current;
-              if (!el) return;
-              const pos = el.selectionStart ?? input.length;
-              const newVal = input.slice(0, pos) + '@' + input.slice(pos);
-              handleInputChange(newVal);
-              setTimeout(() => {
-                el.focus();
-                el.setSelectionRange(pos + 1, pos + 1);
-              }, 0);
-            }}
-            className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0"
-            title="@ mention file"
-          >
-            <AtSign size={inputIconSize} />
-          </button>
-
           {isPanel ? (
             <textarea
               ref={(el) => {
                 inputRef.current = el;
               }}
               value={input}
-              onChange={e => handleInputChange(e.target.value)}
+              onChange={e => handleInputChange(e.target.value, e.target.selectionStart ?? undefined)}
               onKeyDown={handleInputKeyDown}
               placeholder={t.ask.placeholder}
               rows={1}
@@ -644,7 +739,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
                 inputRef.current = el;
               }}
               value={input}
-              onChange={e => handleInputChange(e.target.value)}
+              onChange={e => handleInputChange(e.target.value, e.target.selectionStart ?? undefined)}
               onKeyDown={handleInputKeyDown}
               placeholder={t.ask.placeholder}
               className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none min-w-0"
@@ -656,7 +751,7 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
               <StopCircle size={inputIconSize} />
             </button>
           ) : (
-            <button type="submit" disabled={!input.trim() || mention.mentionQuery !== null} className="p-1.5 rounded-md disabled:opacity-40 disabled:cursor-not-allowed transition-opacity shrink-0 bg-[var(--amber)] text-[var(--amber-foreground)]">
+            <button type="submit" disabled={!input.trim() || mention.mentionQuery !== null || slash.slashQuery !== null} className="p-1.5 rounded-md disabled:opacity-40 disabled:cursor-not-allowed transition-opacity shrink-0 bg-[var(--amber)] text-[var(--amber-foreground)]">
               <Send size={isPanel ? 13 : 14} />
             </button>
           )}
@@ -685,6 +780,9 @@ export default function AskContent({ visible, currentFile, initialMessage, onFir
         <span suppressHydrationWarning>
           <kbd className="font-mono">@</kbd> {t.ask.attachFile}
         </span>
+        <span suppressHydrationWarning>
+          <kbd className="font-mono">/</kbd> {t.ask.skillsHint}
+        </span>
         {!isPanel && (
           <span suppressHydrationWarning>
             <kbd className="font-mono">ESC</kbd> {t.search.close}

package/app/components/ask/MentionPopover.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useRef } from 'react';
-import { FileText, Table } from 'lucide-react';
+import { FileText, Table, FolderOpen } from 'lucide-react';
 
 interface MentionPopoverProps {
   results: string[];
@@ -22,10 +22,16 @@ export default function MentionPopover({ results, selectedIndex, onSelect }: Men
   if (results.length === 0) return null;
 
   return (
-    <div className="mx-4 mb-1 border border-border rounded-lg bg-card shadow-lg overflow-hidden">
-      <div ref={listRef} className="max-h-[240px] overflow-y-auto">
+    <div className="border border-border rounded-lg bg-card shadow-lg overflow-hidden">
+      <div className="px-3 py-1.5 border-b border-border flex items-center gap-1.5">
+        <FolderOpen size={11} className="text-muted-foreground/50" />
+        <span className="text-2xs font-medium text-muted-foreground/70 uppercase tracking-wider">Files</span>
+        <span className="text-2xs text-muted-foreground/40 ml-auto">{results.length}</span>
+      </div>
+      <div ref={listRef} className="max-h-[360px] overflow-y-auto">
       {results.map((f, idx) => {
         const name = f.split('/').pop() ?? f;
+        const dir = f.split('/').slice(0, -1).join('/');
         const isCsv = name.endsWith('.csv');
         return (
           <button
@@ -46,15 +52,17 @@ export default function MentionPopover({ results, selectedIndex, onSelect }: Men
             ) : (
               <FileText size={13} className="text-muted-foreground shrink-0" />
             )}
-            <span className="truncate flex-1">{name}</span>
-            <span className="text-2xs text-muted-foreground/50 truncate max-w-[140px] shrink-0">
-              {f.split('/').slice(0, -1).join('/')}
-            </span>
+            <span className="truncate font-medium flex-1">{name}</span>
+            {dir && (
+              <span className="text-2xs text-muted-foreground/40 truncate max-w-[140px] shrink-0">
+                {dir}
+              </span>
+            )}
           </button>
         );
       })}
       </div>
-      <div className="px-3 py-1.5 border-t border-border flex gap-3 text-2xs text-muted-foreground/50 shrink-0">
+      <div className="px-3 py-1.5 border-t border-border flex gap-3 text-2xs text-muted-foreground/40 shrink-0">
         <span>↑↓ navigate</span>
         <span>↵ select</span>
         <span>ESC dismiss</span>

package/app/components/ask/SlashCommandPopover.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { Zap } from 'lucide-react';
+import type { SlashItem } from '@/hooks/useSlashCommand';
+
+interface SlashCommandPopoverProps {
+  results: SlashItem[];
+  selectedIndex: number;
+  onSelect: (item: SlashItem) => void;
+}
+
+export default function SlashCommandPopover({ results, selectedIndex, onSelect }: SlashCommandPopoverProps) {
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = listRef.current;
+    if (!container) return;
+    const selected = container.children[selectedIndex] as HTMLElement | undefined;
+    selected?.scrollIntoView({ block: 'nearest' });
+  }, [selectedIndex]);
+
+  if (results.length === 0) return null;
+
+  return (
+    <div className="border border-border rounded-lg bg-card shadow-lg overflow-hidden">
+      <div className="px-3 py-1.5 border-b border-border flex items-center gap-1.5">
+        <Zap size={11} className="text-[var(--amber)]/50" />
+        <span className="text-2xs font-medium text-muted-foreground/70 uppercase tracking-wider">Skills</span>
+        <span className="text-2xs text-muted-foreground/40 ml-auto">{results.length}</span>
+      </div>
+      <div ref={listRef} className="max-h-[360px] overflow-y-auto">
+        {results.map((item, idx) => (
+          <button
+            key={item.name}
+            type="button"
+            onMouseDown={(e) => {
+              e.preventDefault();
+              onSelect(item);
+            }}
+            className={`w-full flex items-center gap-2.5 px-3 py-2 text-left transition-colors ${
+              idx === selectedIndex
+                ? 'bg-accent text-foreground'
+                : 'text-muted-foreground hover:bg-muted'
+            }`}
+          >
+            <Zap size={13} className="text-[var(--amber)] shrink-0" />
+            <span className="text-sm font-medium shrink-0">/{item.name}</span>
+            {item.description && (
+              <span className="text-2xs text-muted-foreground/50 truncate min-w-0 flex-1">{item.description}</span>
+            )}
+          </button>
+        ))}
+      </div>
+      <div className="px-3 py-1.5 border-t border-border flex gap-3 text-2xs text-muted-foreground/40 shrink-0">
+        <span>↑↓ navigate</span>
+        <span>↵ / Tab select</span>
+        <span>ESC dismiss</span>
+      </div>
+    </div>
+  );
+}

package/app/components/panels/AgentsPanelAgentGroups.tsx

@@ -34,13 +34,14 @@ export function AgentsPanelAgentGroups({
 }) {
   return (
     <div>
-      <div className="px-0 py-1 mb-0.5">
-        <span className="text-2xs font-semibold text-muted-foreground uppercase tracking-wider">{p.rosterLabel}</span>
+      <div className="px-0 py-1.5 mb-1">
+        <span className="text-2xs font-semibold text-muted-foreground/70 uppercase tracking-wider">{p.rosterLabel}</span>
       </div>
       {connected.length > 0 && (
         <section className="mb-3">
-          <h3 className="text-[11px] font-medium text-muted-foreground/90 uppercase tracking-wider mb-2 pl-0.5">
-            {p.sectionConnected} ({connected.length})
+          <h3 className="flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground/80 uppercase tracking-wider mb-2 pl-0.5">
+            <span className="w-1 h-3 rounded-full bg-[var(--success)]/50" aria-hidden="true" />
+            {p.sectionConnected} <span className="text-muted-foreground/50 tabular-nums">({connected.length})</span>
           </h3>
           <div className="space-y-1.5">
             {connected.map(agent => (
@@ -60,8 +61,9 @@ export function AgentsPanelAgentGroups({
 
       {detected.length > 0 && (
         <section className="mb-3">
-          <h3 className="text-[11px] font-medium text-muted-foreground/90 uppercase tracking-wider mb-2 pl-0.5">
-            {p.sectionDetected} ({detected.length})
+          <h3 className="flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground/80 uppercase tracking-wider mb-2 pl-0.5">
+            <span className="w-1 h-3 rounded-full bg-[var(--amber)]/50" aria-hidden="true" />
+            {p.sectionDetected} <span className="text-muted-foreground/50 tabular-nums">({detected.length})</span>
           </h3>
           <div className="space-y-1.5">
             {detected.map(agent => (

package/app/components/panels/AgentsPanelHubNav.tsx

@@ -27,18 +27,18 @@ export function AgentsPanelHubNav({
       <PanelNavRow
         icon={<LayoutDashboard size={14} className="text-[var(--amber)]" />}
         title={copy.navOverview}
-        badge={<span className="text-2xs tabular-nums text-muted-foreground">{connectedCount}</span>}
+        badge={<span className="text-2xs tabular-nums text-muted-foreground/60 px-1.5 py-0.5 rounded bg-muted/40 font-medium">{connectedCount}</span>}
         href="/agents"
         active={inAgentsRoute && (tab === null || tab === 'overview')}
       />
       <PanelNavRow
-        icon={<Server size={14} className="text-muted-foreground" />}
+        icon={<Server size={14} className={inAgentsRoute && tab === 'mcp' ? 'text-[var(--amber)]' : 'text-muted-foreground'} />}
         title={copy.navMcp}
         href="/agents?tab=mcp"
         active={inAgentsRoute && tab === 'mcp'}
       />
       <PanelNavRow
-        icon={<Zap size={14} className="text-muted-foreground" />}
+        icon={<Zap size={14} className={inAgentsRoute && tab === 'skills' ? 'text-[var(--amber)]' : 'text-muted-foreground'} />}
         title={copy.navSkills}
         href="/agents?tab=skills"
         active={inAgentsRoute && tab === 'skills'}

package/app/components/panels/DiscoverPanel.tsx

@@ -1,11 +1,15 @@
 'use client';
 
-import { Lightbulb, Blocks, Zap, LayoutTemplate, User, Download, RefreshCw, Repeat, Rocket, Search, Handshake, ShieldCheck } from 'lucide-react';
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { Lightbulb, Blocks, Zap, LayoutTemplate, User, Download, RefreshCw, Repeat, Rocket, Search, Handshake, ShieldCheck, ChevronDown } from 'lucide-react';
 import PanelHeader from './PanelHeader';
 import { PanelNavRow, ComingSoonBadge } from './PanelNavRow';
 import { useLocale } from '@/lib/LocaleContext';
 import { useCases } from '@/components/explore/use-cases';
 import { openAskModal } from '@/hooks/useAskModal';
+import { getPluginRenderers, isRendererEnabled, setRendererEnabled, loadDisabledState } from '@/lib/renderers/registry';
+import { Toggle } from '../settings/Primitives';
 
 interface DiscoverPanelProps {
   active: boolean;
@@ -56,8 +60,44 @@ export default function DiscoverPanel({ active, maximized, onMaximize }: Discove
   const { t } = useLocale();
   const d = t.panels.discover;
   const e = t.explore;
+  const p = t.panels.plugins;
+  const router = useRouter();
+
+  const [pluginsMounted, setPluginsMounted] = useState(false);
+  const [showPlugins, setShowPlugins] = useState(false);
+  const [, forceUpdate] = useState(0);
+  const [existingFiles, setExistingFiles] = useState<Set<string>>(new Set());
+  const fetchedRef = useRef(false);
+
+  useEffect(() => {
+    loadDisabledState();
+    setPluginsMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!pluginsMounted || fetchedRef.current) return;
+    fetchedRef.current = true;
+    const entryPaths = getPluginRenderers().map(r => r.entryPath).filter((ep): ep is string => !!ep);
+    if (entryPaths.length === 0) return;
+    fetch('/api/files')
+      .then(r => r.ok ? r.json() : [])
+      .then((allPaths: string[]) => {
+        const pathSet = new Set(allPaths);
+        setExistingFiles(new Set(entryPaths.filter(ep => pathSet.has(ep))));
+      })
+      .catch(() => {});
+  }, [pluginsMounted]);
+
+  const handleToggle = useCallback((id: string, enabled: boolean) => {
+    setRendererEnabled(id, enabled);
+    forceUpdate(n => n + 1);
+    window.dispatchEvent(new Event('renderer-state-changed'));
+  }, []);
+
+  const handleOpenPlugin = useCallback((entryPath: string) => {
+    router.push(`/view/${entryPath.split('/').map(encodeURIComponent).join('/')}`);
+  }, [router]);
 
-  /** Type-safe lookup for use case i18n */
   const getUseCaseText = (id: string): { title: string; prompt: string } | undefined => {
     const map: Record<string, { title: string; desc: string; prompt: string }> = {
       c1: e.c1, c2: e.c2, c3: e.c3, c4: e.c4, c5: e.c5,
@@ -66,6 +106,9 @@ export default function DiscoverPanel({ active, maximized, onMaximize }: Discove
     return map[id];
   };
 
+  const renderers = pluginsMounted ? getPluginRenderers() : [];
+  const enabledCount = pluginsMounted ? renderers.filter(r => isRendererEnabled(r.id)).length : 0;
+
   return (
     <div className={`flex flex-col h-full ${active ? '' : 'hidden'}`}>
       <PanelHeader title={d.title} maximized={maximized} onMaximize={onMaximize} />
@@ -97,6 +140,49 @@ export default function DiscoverPanel({ active, maximized, onMaximize }: Discove
 
         <div className="mx-4 border-t border-border" />
 
+        {/* Installed extensions (merged from Plugins panel) */}
+        <div className="py-2">
+          <button
+            type="button"
+            onClick={() => setShowPlugins(v => !v)}
+            className="w-full flex items-center gap-1.5 px-4 py-1.5 text-left"
+          >
+            <ChevronDown size={11} className={`text-muted-foreground transition-transform duration-150 ${showPlugins ? '' : '-rotate-90'}`} />
+            <Blocks size={13} className="text-muted-foreground shrink-0" />
+            <span className="text-2xs font-medium text-muted-foreground uppercase tracking-wider flex-1">
+              {p.title}
+            </span>
+            <span className="text-2xs text-muted-foreground tabular-nums">{enabledCount}/{renderers.length}</span>
+          </button>
+          {showPlugins && renderers.map(r => {
+            const enabled = isRendererEnabled(r.id);
+            const fileExists = r.entryPath ? existingFiles.has(r.entryPath) : false;
+            const canOpen = enabled && r.entryPath && fileExists;
+            return (
+              <div
+                key={r.id}
+                className={`flex items-center gap-2 px-4 py-1.5 mx-1 rounded-sm transition-colors ${canOpen ? 'cursor-pointer hover:bg-muted/50' : ''} ${!enabled ? 'opacity-50' : ''}`}
+                onClick={canOpen ? () => handleOpenPlugin(r.entryPath!) : undefined}
+                role={canOpen ? 'link' : undefined}
+                tabIndex={canOpen ? 0 : undefined}
+                onKeyDown={canOpen ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleOpenPlugin(r.entryPath!); } } : undefined}
+              >
+                <span className="text-sm shrink-0" suppressHydrationWarning>{r.icon}</span>
+                <span className="text-xs text-foreground truncate flex-1">{r.name}</span>
+                {r.core ? (
+                  <span className="text-2xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground shrink-0">{p.core}</span>
+                ) : (
+                  <div onClick={e => e.stopPropagation()}>
+                    <Toggle checked={enabled} onChange={v => handleToggle(r.id, v)} size="sm" />
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="mx-4 border-t border-border" />
+
         {/* Quick try — use case list */}
         <div className="py-2">
           <div className="px-4 py-1.5">