@geminilight/mindos 0.6.7 → 0.6.12

package/app/components/OrganizeToast.tsx

@@ -0,0 +1,386 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  Check, X, Loader2, Sparkles, AlertCircle, Undo2,
+  ChevronDown, FilePlus, FileEdit, ExternalLink,
+} from 'lucide-react';
+import { useLocale } from '@/lib/LocaleContext';
+import type { useAiOrganize } from '@/hooks/useAiOrganize';
+import type { OrganizeStageHint } from '@/hooks/useAiOrganize';
+import { encodePath } from '@/lib/utils';
+import {
+  appendEntry, updateEntry, generateEntryId,
+  type OrganizeHistoryEntry,
+} from '@/lib/organize-history';
+
+const AUTO_DISMISS_MS = 3 * 60 * 1000; // 3 minutes
+const THINKING_TIMEOUT_MS = 5000;
+
+type AiOrganize = ReturnType<typeof useAiOrganize>;
+
+function stageText(
+  t: ReturnType<typeof useLocale>['t'],
+  hint: { stage: OrganizeStageHint; detail?: string } | null,
+): string {
+  const fi = t.fileImport as Record<string, unknown>;
+  if (!hint) return fi.organizeProcessing as string;
+  switch (hint.stage) {
+    case 'connecting': return fi.organizeConnecting as string;
+    case 'analyzing': return fi.organizeAnalyzing as string;
+    case 'reading': return (fi.organizeReading as (d?: string) => string)(hint.detail);
+    case 'thinking': return fi.organizeThinking as string;
+    case 'writing': return (fi.organizeWriting as (d?: string) => string)(hint.detail);
+    default: return fi.organizeProcessing as string;
+  }
+}
+
+/** Self-contained timer for organizing phase */
+function useOrganizeTimer(isOrganizing: boolean, stageHint: AiOrganize['stageHint']) {
+  const [elapsed, setElapsed] = useState(0);
+  const [thinkingOverride, setThinkingOverride] = useState(false);
+  const lastEventRef = useRef(Date.now());
+
+  useEffect(() => {
+    lastEventRef.current = Date.now();
+    setThinkingOverride(false);
+  }, [stageHint]);
+
+  useEffect(() => {
+    if (!isOrganizing) { setElapsed(0); setThinkingOverride(false); return; }
+    const timer = setInterval(() => {
+      setElapsed(e => e + 1);
+      if (Date.now() - lastEventRef.current >= THINKING_TIMEOUT_MS) {
+        setThinkingOverride(true);
+      }
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [isOrganizing]);
+
+  return {
+    elapsed,
+    displayHint: thinkingOverride ? { stage: 'thinking' as const } : stageHint,
+  };
+}
+
+interface OrganizeToastProps {
+  aiOrganize: AiOrganize;
+  onDismiss: () => void;
+  /** Called when AI organize flow should be cancelled entirely */
+  onCancel: () => void;
+  /** Callback to notify history panel of updates */
+  onHistoryUpdate?: () => void;
+}
+
+export default function OrganizeToast({
+  aiOrganize, onDismiss, onCancel, onHistoryUpdate,
+}: OrganizeToastProps) {
+  const { t } = useLocale();
+  const router = useRouter();
+  const fi = t.fileImport as Record<string, unknown>;
+
+  const isOrganizing = aiOrganize.phase === 'organizing';
+  const { elapsed, displayHint } = useOrganizeTimer(isOrganizing, aiOrganize.stageHint);
+
+  const [expanded, setExpanded] = useState(false);
+  const [undoing, setUndoing] = useState(false);
+  const dismissTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const historyIdRef = useRef<string | null>(null);
+
+  const isDone = aiOrganize.phase === 'done';
+  const isError = aiOrganize.phase === 'error';
+  const isActive = isOrganizing || isDone || isError;
+
+  const okCount = aiOrganize.changes.filter(c => c.ok && !c.undone).length;
+
+  // Reset historyId when a new organize session starts
+  useEffect(() => {
+    if (isOrganizing) {
+      historyIdRef.current = null;
+    }
+  }, [isOrganizing]);
+
+  // Write to history when organize completes
+  useEffect(() => {
+    if (isDone && !historyIdRef.current) {
+      const id = generateEntryId();
+      historyIdRef.current = id;
+      appendEntry({
+        id,
+        timestamp: Date.now(),
+        sourceFiles: aiOrganize.sourceFileNames,
+        files: aiOrganize.changes.map(c => ({
+          action: c.action,
+          path: c.path,
+          ok: c.ok,
+          undone: c.undone,
+        })),
+        status: 'completed',
+      });
+      onHistoryUpdate?.();
+    }
+  }, [isDone, aiOrganize.changes, aiOrganize.sourceFileNames, onHistoryUpdate]);
+
+  // Auto-dismiss timer (3 min after done, reset on user interaction)
+  const resetTimer = useCallback(() => {
+    if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
+    if (isDone || isError) {
+      dismissTimerRef.current = setTimeout(() => {
+        onDismiss();
+      }, AUTO_DISMISS_MS);
+    }
+  }, [isDone, isError, onDismiss]);
+
+  useEffect(() => {
+    resetTimer();
+    return () => { if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current); };
+  }, [resetTimer]);
+
+  const handleUserAction = useCallback(() => {
+    resetTimer();
+  }, [resetTimer]);
+
+  const handleUndoOne = useCallback(async (path: string) => {
+    handleUserAction();
+    setUndoing(true);
+    const ok = await aiOrganize.undoOne(path);
+    setUndoing(false);
+    if (ok) {
+      window.dispatchEvent(new Event('mindos:files-changed'));
+      // History sync deferred to next render when aiOrganize.changes is updated
+      setTimeout(() => {
+        if (historyIdRef.current) {
+          const updated = aiOrganize.changes.map(c => ({
+            action: c.action, path: c.path, ok: c.ok,
+            undone: c.path === path ? true : c.undone,
+          }));
+          const allUndone = updated.every(c => !c.ok || c.undone);
+          updateEntry(historyIdRef.current, {
+            files: updated,
+            status: allUndone ? 'undone' : 'partial',
+          });
+          onHistoryUpdate?.();
+        }
+      }, 0);
+    }
+  }, [aiOrganize, handleUserAction, onHistoryUpdate]);
+
+  const handleUndoAll = useCallback(async () => {
+    handleUserAction();
+    setUndoing(true);
+    const reverted = await aiOrganize.undoAll();
+    setUndoing(false);
+    if (reverted > 0) {
+      window.dispatchEvent(new Event('mindos:files-changed'));
+      if (historyIdRef.current) {
+        updateEntry(historyIdRef.current, {
+          files: aiOrganize.changes.map(c => ({
+            action: c.action, path: c.path, ok: c.ok,
+            undone: c.ok ? true : c.undone,
+          })),
+          status: 'undone',
+        });
+        onHistoryUpdate?.();
+      }
+    }
+  }, [aiOrganize, handleUserAction, onHistoryUpdate]);
+
+  const handleViewFile = useCallback((path: string) => {
+    handleUserAction();
+    router.push(`/view/${encodePath(path)}`);
+  }, [router, handleUserAction]);
+
+  const handleDismiss = useCallback(() => {
+    onDismiss();
+  }, [onDismiss]);
+
+  if (!isActive) return null;
+
+  // Expanded panel (file list with per-file undo)
+  if (expanded && (isDone || isError)) {
+    return (
+      <div
+        className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 w-[420px] max-w-[calc(100vw-2rem)] bg-card border border-border rounded-xl shadow-xl animate-in fade-in-0 slide-in-from-bottom-2 duration-200"
+        onClick={handleUserAction}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+          <div className="flex items-center gap-2">
+            {isDone ? <Check size={14} className="text-success" /> : <AlertCircle size={14} className="text-error" />}
+            <span className="text-xs font-medium text-foreground">
+              {isDone ? fi.organizeReviewTitle as string : fi.organizeErrorTitle as string}
+            </span>
+          </div>
+          <button
+            type="button"
+            onClick={() => setExpanded(false)}
+            className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <ChevronDown size={14} />
+          </button>
+        </div>
+
+        {/* File list */}
+        {isDone && (
+          <div className="max-h-[240px] overflow-y-auto p-2 space-y-0.5">
+            {aiOrganize.changes.map((c, idx) => {
+              const wasUndone = c.undone;
+              const undoable = aiOrganize.canUndo(c.path);
+              const fileName = c.path.split('/').pop() ?? c.path;
+
+              return (
+                <div
+                  key={`${c.path}-${idx}`}
+                  className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors ${wasUndone ? 'bg-muted/30 opacity-50' : 'bg-muted/50'}`}
+                >
+                  {wasUndone ? (
+                    <Undo2 size={14} className="text-muted-foreground shrink-0" />
+                  ) : c.action === 'create' ? (
+                    <FilePlus size={14} className="text-success shrink-0" />
+                  ) : (
+                    <FileEdit size={14} className="text-[var(--amber)] shrink-0" />
+                  )}
+                  <span className={`truncate flex-1 ${wasUndone ? 'line-through text-muted-foreground' : 'text-foreground'}`}>
+                    {fileName}
+                  </span>
+                  {wasUndone ? (
+                    <span className="text-xs text-muted-foreground shrink-0">{fi.organizeUndone as string}</span>
+                  ) : (
+                    <span className={`text-xs shrink-0 ${c.ok ? 'text-muted-foreground' : 'text-error'}`}>
+                      {!c.ok ? fi.organizeFailed as string
+                        : c.action === 'create' ? fi.organizeCreated as string
+                        : fi.organizeUpdated as string}
+                    </span>
+                  )}
+                  {undoable && (
+                    <button
+                      type="button"
+                      onClick={() => handleUndoOne(c.path)}
+                      disabled={undoing}
+                      className="text-2xs text-muted-foreground/60 hover:text-foreground transition-colors shrink-0 px-1 disabled:opacity-40"
+                      title={fi.organizeUndoOne as string}
+                    >
+                      <Undo2 size={12} />
+                    </button>
+                  )}
+                  {c.ok && !c.undone && (
+                    <button
+                      type="button"
+                      onClick={() => handleViewFile(c.path)}
+                      className="text-2xs text-muted-foreground/60 hover:text-[var(--amber)] transition-colors shrink-0 px-1"
+                      title={fi.organizeViewFile as string}
+                    >
+                      <ExternalLink size={12} />
+                    </button>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        {isError && (
+          <div className="p-4 text-center">
+            <p className="text-xs text-muted-foreground">{aiOrganize.error}</p>
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex items-center justify-end gap-3 px-4 py-3 border-t border-border">
+          {isDone && aiOrganize.hasAnyUndoable && (
+            <button
+              onClick={handleUndoAll}
+              disabled={undoing}
+              className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-1.5 disabled:opacity-50"
+            >
+              {undoing ? <Loader2 size={12} className="animate-spin" /> : <Undo2 size={12} />}
+              {fi.organizeUndoAll as string}
+            </button>
+          )}
+          <button
+            onClick={handleDismiss}
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium bg-[var(--amber)] text-[var(--amber-foreground)] hover:opacity-90 transition-all"
+          >
+            <Check size={12} />
+            {fi.organizeDone as string}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // Compact toast bar
+  return (
+    <div
+      className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-3 bg-card border border-border rounded-xl shadow-lg px-4 py-3 max-w-md animate-in fade-in-0 slide-in-from-bottom-2 duration-200"
+      onClick={handleUserAction}
+    >
+      {isDone ? (
+        <>
+          <Check size={16} className="text-success shrink-0" />
+          <span className="text-xs text-foreground truncate">
+            {(fi.organizeReviewDesc as (n: number) => string)(okCount)}
+          </span>
+          {aiOrganize.changes.length > 0 && (
+            <button
+              type="button"
+              onClick={() => { setExpanded(true); handleUserAction(); }}
+              className="flex items-center gap-1 text-xs font-medium text-[var(--amber)] hover:opacity-80 transition-colors shrink-0"
+            >
+              <ChevronDown size={12} className="rotate-180" />
+              {fi.organizeExpand as string}
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={handleDismiss}
+            className="flex items-center gap-1 text-xs font-medium text-[var(--amber)] hover:opacity-80 transition-colors shrink-0"
+          >
+            <Check size={12} />
+            {fi.organizeDone as string}
+          </button>
+        </>
+      ) : isError ? (
+        <>
+          <AlertCircle size={16} className="text-error shrink-0" />
+          <span className="text-xs text-foreground truncate">{fi.organizeError as string}</span>
+          <button
+            type="button"
+            onClick={() => { setExpanded(true); handleUserAction(); }}
+            className="text-xs font-medium text-[var(--amber)] hover:opacity-80 transition-colors shrink-0"
+          >
+            {fi.organizeExpand as string}
+          </button>
+          <button
+            type="button"
+            onClick={handleDismiss}
+            className="text-muted-foreground/50 hover:text-muted-foreground transition-colors shrink-0"
+          >
+            <X size={14} />
+          </button>
+        </>
+      ) : (
+        <>
+          <div className="relative shrink-0">
+            <Sparkles size={16} className="text-[var(--amber)]" />
+            <Loader2 size={10} className="absolute -bottom-0.5 -right-0.5 text-[var(--amber)] animate-spin" />
+          </div>
+          <span className="text-xs text-foreground truncate">
+            {stageText(t, displayHint)}
+          </span>
+          <span className="text-xs text-muted-foreground/60 tabular-nums shrink-0">
+            {(fi.organizeElapsed as (s: number) => string)(elapsed)}
+          </span>
+          <button
+            type="button"
+            onClick={handleDismiss}
+            className="text-muted-foreground/50 hover:text-muted-foreground transition-colors shrink-0"
+          >
+            <X size={14} />
+          </button>
+        </>
+      )}
+    </div>
+  );
+}

package/app/components/Panel.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useMemo, useState } from 'react';
-import { ChevronsDownUp, ChevronsUpDown } from 'lucide-react';
+import { ChevronsDownUp, ChevronsUpDown, FilePlus, Import } from 'lucide-react';
 import type { PanelId } from './ActivityBar';
 import type { FileNode } from '@/lib/types';
 import FileTree from './FileTree';
@@ -29,6 +29,7 @@ const DEFAULT_PANEL_WIDTH: Record<PanelId, number> = {
   echo: 280,
   agents: 280,
   discover: 280,
+  history: 280,
 };
 
 const MIN_PANEL_WIDTH = 240;
@@ -52,7 +53,7 @@ interface PanelProps {
   /** Callback to toggle maximize */
   onMaximize?: () => void;
   /** Callback to open import modal for a space */
-  onImport?: (space: string) => void;
+  onImport?: (space?: string) => void;
   /** Lazy-loaded panel content for search/ask/plugins */
   children?: React.ReactNode;
 }
@@ -108,11 +109,30 @@ 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">
+            <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"
+              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>
             <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"
               aria-label={t.sidebar.collapseLevel}
               title={t.sidebar.collapseLevel}
@@ -128,6 +148,7 @@ export default function Panel({
                 }
                 return next;
               })}
+              onDoubleClick={() => setMaxOpenDepth(null)}
               className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
               aria-label={t.sidebar.expandLevel}
               title={t.sidebar.expandLevel}

package/app/components/Sidebar.tsx

@@ -167,7 +167,7 @@ export default function Sidebar({ fileTree, collapsed = false, onCollapse, onExp
         </div>
       </header>
 
-      {mobileOpen && <div className="md:hidden fixed inset-0 z-40 bg-black/60 backdrop-blur-sm" onClick={() => setMobileOpen(false)} />}
+      {mobileOpen && <div className="md:hidden fixed inset-0 z-40 overlay-backdrop" onClick={() => setMobileOpen(false)} />}
 
       <aside className={`md:hidden fixed top-0 left-0 h-screen w-[85vw] max-w-[320px] z-50 bg-card border-r border-border flex flex-col transition-transform duration-300 ease-in-out ${mobileOpen ? 'translate-x-0' : '-translate-x-full'}`}>
         {sidebarContent}

package/app/components/SidebarLayout.tsx

@@ -13,6 +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,
@@ -27,6 +28,7 @@ import SettingsModal from './SettingsModal';
 import KeyboardShortcuts from './KeyboardShortcuts';
 import ChangesBanner from './changes/ChangesBanner';
 import SpaceInitToast from './SpaceInitToast';
+import OrganizeToast from './OrganizeToast';
 import { MobileSyncDot, useSyncStatus } from './SyncStatusBar';
 import { FileNode } from '@/lib/types';
 import { useLocale } from '@/lib/LocaleContext';
@@ -38,6 +40,7 @@ import McpProvider from '@/hooks/useMcpData';
 import '@/lib/renderers/index'; // client-side renderer registration source of truth
 import { useLeftPanel } from '@/hooks/useLeftPanel';
 import { useAskPanel } from '@/hooks/useAskPanel';
+import { useAiOrganize } from '@/hooks/useAiOrganize';
 import type { Tab } from './settings/types';
 
 interface SidebarLayoutProps {
@@ -74,6 +77,33 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
     return RIGHT_AGENT_DETAIL_DEFAULT_WIDTH;
   });
 
+  // ── AI Organize (lifted from ImportModal so toast shares state) ──
+  const aiOrganize = useAiOrganize();
+  const [organizeToastVisible, setOrganizeToastVisible] = useState(false);
+  const [historyRefreshToken, setHistoryRefreshToken] = useState(0);
+
+  // Show toast whenever organize is active
+  useEffect(() => {
+    if (aiOrganize.phase === 'organizing' || aiOrganize.phase === 'done' || aiOrganize.phase === 'error') {
+      setOrganizeToastVisible(true);
+    }
+  }, [aiOrganize.phase]);
+
+  const handleOrganizeToastDismiss = useCallback(() => {
+    setOrganizeToastVisible(false);
+    if (aiOrganize.phase !== 'organizing') {
+      aiOrganize.reset();
+    } else {
+      aiOrganize.abort();
+      aiOrganize.reset();
+    }
+  }, [aiOrganize]);
+
+  const handleHistoryUpdate = useCallback(() => {
+    setHistoryRefreshToken(t => t + 1);
+    window.dispatchEvent(new Event('mindos:organize-history-update'));
+  }, []);
+
   // ── Import modal state ──
   const [importModalOpen, setImportModalOpen] = useState(false);
   const [importDefaultSpace, setImportDefaultSpace] = useState<string | undefined>(undefined);
@@ -345,6 +375,9 @@ 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 ── */}
@@ -418,7 +451,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         </div>
       </header>
 
-      {mobileOpen && <div className="md:hidden fixed inset-0 z-40 bg-black/60 backdrop-blur-sm" onClick={() => setMobileOpen(false)} />}
+      {mobileOpen && <div className="md:hidden fixed inset-0 z-40 overlay-backdrop" onClick={() => setMobileOpen(false)} />}
       <aside className={`md:hidden fixed top-0 left-0 h-screen w-[85vw] max-w-[320px] z-50 bg-card border-r border-border flex flex-col transition-transform duration-300 ease-in-out ${mobileOpen ? 'translate-x-0' : '-translate-x-full'}`}>
         <div className="flex items-center justify-between px-4 py-4 border-b border-border shrink-0">
           <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
@@ -489,8 +522,18 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         onClose={handleCloseImport}
         defaultSpace={importDefaultSpace}
         initialFiles={importInitialFiles}
+        aiOrganize={aiOrganize}
       />
 
+      {organizeToastVisible && (
+        <OrganizeToast
+          aiOrganize={aiOrganize}
+          onDismiss={handleOrganizeToastDismiss}
+          onCancel={() => { aiOrganize.abort(); aiOrganize.reset(); setOrganizeToastVisible(false); }}
+          onHistoryUpdate={handleHistoryUpdate}
+        />
+      )}
+
       <style>{`
         @media (min-width: 768px) {
           :root {

package/app/components/agents/AgentDetailContent.tsx

@@ -192,14 +192,35 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
   }, [a.detail.mcpServerHint]);
 
   if (!agent) {
+    const connectedAgents = mcp.agents
+      .filter((ag) => ag.key !== agentKey && resolveAgentStatus(ag) === 'connected')
+      .slice(0, 3);
+
     return (
       <div className="content-width px-4 md:px-6 py-8 md:py-10">
         <Link href="/agents" className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground mb-4">
           <ArrowLeft size={14} />
           {a.backToOverview}
         </Link>
-        <div className="rounded-lg border border-border bg-card p-6">
-          <p className="text-sm text-foreground">{a.detailNotFound}</p>
+        <div className="rounded-lg border border-border bg-card p-6 space-y-4">
+          <p className="text-sm text-foreground font-medium">{a.detailNotFound}</p>
+          <p className="text-xs text-muted-foreground">{a.detailNotFoundHint}</p>
+          {connectedAgents.length > 0 && (
+            <div className="pt-2 border-t border-border">
+              <p className="text-xs text-muted-foreground mb-2">{a.detailNotFoundSuggestion}</p>
+              <div className="flex flex-wrap gap-2">
+                {connectedAgents.map((ag) => (
+                  <Link
+                    key={ag.key}
+                    href={`/agents/${encodeURIComponent(ag.key)}`}
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium bg-muted text-foreground hover:bg-muted/80 transition-colors"
+                  >
+                    {ag.name}
+                  </Link>
+                ))}
+              </div>
+            </div>
+          )}
         </div>
       </div>
     );
@@ -219,11 +240,11 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
         <div className="flex items-center gap-3.5 px-5 py-4">
           <AgentAvatar name={agent.name} status={status} size="md" />
           <div className="min-w-0 flex-1">
-            <h1 className="text-lg font-semibold tracking-tight font-display text-foreground">{agent.name}</h1>
+            <h1 className="text-lg font-semibold tracking-tight font-display text-foreground truncate">{agent.name}</h1>
             <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 mt-0.5 text-2xs text-muted-foreground/60">
               <span className={`font-medium px-1.5 py-px rounded-full ${
                 status === 'connected' ? 'bg-success/10 text-success'
-                  : status === 'detected' ? 'bg-[var(--amber-subtle)] text-[var(--amber)]'
+                  : status === 'detected' ? 'bg-[var(--amber-subtle)] text-[var(--amber-text)]'
                     : 'bg-muted text-muted-foreground'
               }`}>{status}</span>
               <span className="font-mono">{agent.transport ?? agent.preferredTransport}</span>
@@ -240,12 +261,12 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
 
       {/* ═══════════ MCP MANAGEMENT ═══════════ */}
       <section className="rounded-xl border border-border bg-card p-4 space-y-3">
-        <div className="flex items-center justify-between">
-          <h2 className="text-xs font-semibold text-foreground flex items-center gap-2">
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <h2 className="text-xs font-semibold text-foreground flex items-center gap-2 shrink-0">
             <Server size={12} className="text-muted-foreground/50" />
             {a.detail.mcpManagement}
           </h2>
-          <div className="flex items-center gap-1.5">
+          <div className="flex flex-wrap items-center gap-1.5">
             {!isMindOS && (
               <ActionButton
                 onClick={() => void handleCopySnippet()}
@@ -339,8 +360,8 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
 
       {/* ═══════════ SKILL ASSIGNMENTS ═══════════ */}
       <section className="rounded-xl border border-border bg-card p-4 space-y-3">
-        <div className="flex items-center justify-between">
-          <h2 className="text-xs font-semibold text-foreground flex items-center gap-2">
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <h2 className="text-xs font-semibold text-foreground flex items-center gap-2 shrink-0">
             <Zap size={12} className="text-muted-foreground/50" />
             {a.detail.skillAssignments}
           </h2>
@@ -395,7 +416,7 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
                       >
                         {skill.name}
                       </button>
-                      <span className={`text-2xs px-1.5 py-0.5 rounded shrink-0 ${skill.source === 'builtin' ? 'bg-muted text-muted-foreground' : 'bg-[var(--amber-dim)] text-[var(--amber)]'}`}>
+                      <span className={`text-2xs px-1.5 py-0.5 rounded shrink-0 ${skill.source === 'builtin' ? 'bg-muted text-muted-foreground' : 'bg-[var(--amber-dim)] text-[var(--amber-text)]'}`}>
                         {skill.source === 'builtin' ? a.detail.skillsSourceBuiltin : a.detail.skillsSourceUser}
                       </span>
 
@@ -520,9 +541,9 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
 
 function DetailLine({ label, value }: { label: string; value: string }) {
   return (
-    <div className="flex items-baseline gap-2 px-0.5">
+    <div className="flex items-baseline gap-2 px-0.5 min-w-0">
       <span className="text-2xs text-muted-foreground/50 uppercase tracking-wider shrink-0 min-w-[60px]">{label}</span>
-      <span className="text-xs text-foreground/80 font-mono truncate">{value}</span>
+      <span className="text-xs text-foreground/80 font-mono truncate min-w-0">{value}</span>
     </div>
   );
 }

package/app/components/agents/AgentsMcpSection.tsx

@@ -306,7 +306,7 @@ function ByAgentView({
                         {agent.name}
                       </Link>
                       <span className="text-2xs text-muted-foreground font-mono shrink-0">{agent.transport ?? agent.preferredTransport}</span>
-                      <span className={`text-2xs px-1.5 py-0.5 rounded shrink-0 ${status === 'connected' ? 'bg-success/10 text-success' : status === 'detected' ? 'bg-[var(--amber-dim)] text-[var(--amber)]' : 'bg-muted text-muted-foreground'}`}>
+                      <span className={`text-2xs px-1.5 py-0.5 rounded shrink-0 ${status === 'connected' ? 'bg-success/10 text-success' : status === 'detected' ? 'bg-[var(--amber-dim)] text-[var(--amber-text)]' : 'bg-muted text-muted-foreground'}`}>
                         {copy.status[status]}
                       </span>
                     </div>