@geminilight/mindos 0.6.40 → 0.6.41

package/app/app/api/ask/route.ts

@@ -13,6 +13,7 @@ import {
   type ToolDefinition,
   SessionManager,
   SettingsManager,
+  bashTool,
 } from '@mariozechner/pi-coding-agent';
 import { NextRequest, NextResponse } from 'next/server';
 import fs from 'fs';
@@ -316,7 +317,7 @@ function toPiCustomToolDefinitions(tools: AgentTool<any>[]): ToolDefinition<any,
           params: args,
           result: outputText.startsWith('Error:') ? 'error' : 'ok',
           message: outputText.slice(0, 200),
-          agentName: 'MindOS Ask',
+          agentName: 'MindOS',
         });
       } catch {
         // logging must never kill the stream
@@ -669,7 +670,7 @@ export async function POST(req: NextRequest) {
       resourceLoader,
       sessionManager: SessionManager.inMemory(),
       settingsManager,
-      tools: [],
+      tools: askMode === 'agent' ? [bashTool] : [],
       customTools,
     });
 

package/app/app/api/mcp/install/route.ts

@@ -5,10 +5,11 @@ import path from 'path';
 import { MCP_AGENTS, expandHome } from '@/lib/mcp-agents';
 import { readSettings } from '@/lib/settings';
 
-/** Parse JSONC — strips single-line (//) and block comments before JSON.parse */
+/** Parse JSONC — strips comments before JSON.parse. Returns {} for empty/whitespace-only input. */
 function parseJsonc(text: string): Record<string, unknown> {
   let stripped = text.replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*$)/gm, (m, g) => g ? '' : m);
   stripped = stripped.replace(/\/\*[\s\S]*?\*\//g, '');
+  if (!stripped.trim()) return {};
   return JSON.parse(stripped);
 }
 

package/app/app/api/mcp/status/route.ts

@@ -2,18 +2,29 @@ export const dynamic = 'force-dynamic';
 import { NextRequest, NextResponse } from 'next/server';
 import { readSettings } from '@/lib/settings';
 import { maskToken } from '@/lib/format';
+import { networkInterfaces } from 'os';
 
 /** Parse hostname from Host header, handling IPv6 brackets */
 function parseHostname(host: string): string {
-  // IPv6: [::1]:3003 → [::1]
   if (host.includes(']')) {
     return host.slice(0, host.lastIndexOf(']') + 1);
   }
-  // IPv4/hostname: 192.168.1.1:3003 → 192.168.1.1
   const colonIdx = host.lastIndexOf(':');
   return colonIdx > 0 ? host.slice(0, colonIdx) : host;
 }
 
+/** Get first non-internal IPv4 address */
+function getLocalIP(): string | null {
+  try {
+    for (const ifaces of Object.values(networkInterfaces())) {
+      for (const iface of ifaces ?? []) {
+        if (iface.family === 'IPv4' && !iface.internal) return iface.address;
+      }
+    }
+  } catch { /* ignore */ }
+  return null;
+}
+
 export async function GET(req: NextRequest) {
   try {
     const settings = readSettings();
@@ -52,12 +63,9 @@ export async function GET(req: NextRequest) {
       port,
       toolCount: running ? 24 : 0,
       authConfigured,
-      // Masked for display; full token only used server-side in snippet generation
       maskedToken: authConfigured ? maskToken(token) : undefined,
-      // Full token for config snippet copy — this API is protected by proxy.ts middleware
-      // (same-origin or bearer token required). Consistent with /api/settings which also
-      // exposes the token to authenticated users.
       authToken: authConfigured ? token : undefined,
+      localIP: getLocalIP(),
     });
   } catch (err) {
     return NextResponse.json({ error: String(err) }, { status: 500 });

package/app/app/view/[...path]/ViewPageClient.tsx

@@ -58,8 +58,8 @@ export default function ViewPageClient({
   );
 
   const [useRaw, setUseRaw] = useRendererState<boolean>('_raw', filePath, false);
-  // Global graph mode — shared across all md files (not per-file)
-  const [graphMode, setGraphMode] = useRendererState<boolean>('_graphMode', '_global', false);
+  // Graph mode — per-view, resets when navigating to a different file
+  const [graphMode, setGraphMode] = useState(false);
   const router = useRouter();
   const [editing, setEditing] = useState(initialEditing || content === '');
   const [editContent, setEditContent] = useState(content);
@@ -167,7 +167,7 @@ export default function ViewPageClient({
     setGraphMode(prev => !prev);
   }, [setGraphMode]);
 
-  const effectiveGraphMode = hydrated ? graphMode : false;
+  const effectiveGraphMode = graphMode;
 
   // Resolve renderer: for md files, graph mode overrides normal resolution
   const registryRenderer = resolveRenderer(filePath, extension);
@@ -383,22 +383,6 @@ export default function ViewPageClient({
               <span className="text-xs text-error hidden sm:inline">{saveError}</span>
             )}
 
-            {/* Graph toggle — only for md files, hidden when graph plugin is disabled */}
-            {extension === 'md' && !editing && !isDraft && isRendererEnabled('graph') && (
-              <button
-                onClick={handleToggleGraph}
-                className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors font-display"
-                style={{
-                  background: effectiveGraphMode ? `${'var(--amber)'}22` : 'var(--muted)',
-                  color: effectiveGraphMode ? 'var(--amber)' : 'var(--muted-foreground)',
-                }}
-                title={effectiveGraphMode ? 'Switch to document view' : 'Switch to Wiki Graph'}
-              >
-                {effectiveGraphMode ? <FileText size={13} /> : <Share2 size={13} />}
-                <span className="hidden sm:inline">{effectiveGraphMode ? 'Doc' : 'Graph'}</span>
-              </button>
-            )}
-
             {/* Renderer toggle — only shown when a custom renderer exists (excludes graph-mode override) */}
             {registryRenderer && !editing && !isDraft && !graphRenderer && (
               <button
@@ -463,14 +447,6 @@ export default function ViewPageClient({
                 >
                   <Star size={16} className={pinned ? 'fill-[var(--amber)] text-[var(--amber)]' : ''} />
                 </button>
-                <button
-                  type="button"
-                  onClick={() => setExportOpen(true)}
-                  className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-                  title={t.fileTree.export}
-                >
-                  <Download size={16} />
-                </button>
                 <button
                   ref={moreRef}
                   type="button"
@@ -485,6 +461,15 @@ export default function ViewPageClient({
                     ref={moreMenuRef}
                     className="absolute right-0 top-full mt-1 z-50 min-w-[160px] rounded-lg border border-border bg-card shadow-lg py-1"
                   >
+                    {extension === 'md' && !editing && !isDraft && isRendererEnabled('graph') && (
+                      <button className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-muted transition-colors text-left" onClick={() => { setMoreOpen(false); handleToggleGraph(); }}>
+                        {effectiveGraphMode ? <FileText size={14} className="shrink-0" /> : <Share2 size={14} className="shrink-0" />}
+                        {effectiveGraphMode ? (t.view?.switchToDoc ?? 'Document view') : (t.view?.switchToGraph ?? 'Wiki Graph')}
+                      </button>
+                    )}
+                    <button className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-muted transition-colors text-left" onClick={() => { setMoreOpen(false); setExportOpen(true); }}>
+                      <Download size={14} className="shrink-0" /> {t.fileTree?.export ?? 'Export'}
+                    </button>
                     <button className="w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-muted transition-colors text-left" onClick={handleCopyPath}>
                       <Copy size={14} className="shrink-0" /> {t.view?.copyPath ?? t.fileTree?.copyPath ?? 'Copy Path'}
                     </button>

package/app/components/FileTree.tsx

@@ -77,11 +77,12 @@ function countContentFiles(node: FileNode): number {
   return (node.children ?? []).reduce((sum, c) => sum + countContentFiles(c), 0);
 }
 
-/** Filter out system files and dot-entries that shouldn't appear by default. */
+/** Filter out hidden entries (dot-files at root, system files) when show-hidden is off. */
 function filterHiddenNodes(nodes: FileNode[], isRoot: boolean): FileNode[] {
   return nodes.filter(node => {
     if (isRoot && node.name.startsWith('.')) return false;
     if (node.type === 'file' && SYSTEM_FILES.has(node.name)) return false;
+    if (node.type === 'directory' && node.name.startsWith('.')) return false;
     return true;
   });
 }
@@ -426,7 +427,7 @@ function DirectoryNode({ node, depth, currentPath, onNavigate, maxOpenDepth, onI
           onClick={toggle}
           className="shrink-0 p-1 rounded hover:bg-muted text-muted-foreground transition-colors"
           style={{ marginLeft: `${depth * 12 + 4}px` }}
-          aria-label={open ? 'Collapse' : 'Expand'}
+          aria-label={open ? `Collapse ${node.name}` : `Expand ${node.name}`}
         >
           <span className="block transition-transform duration-150" style={{ transform: open ? 'rotate(0deg)' : 'rotate(-90deg)' }}>
             <ChevronDown size={13} />

package/app/components/MarkdownView.tsx

@@ -51,11 +51,18 @@ function CopyButton({ code }: { code: string }) {
   );
 }
 
-// Heading components with suppressHydrationWarning to prevent
-// rehype-slug + emoji hydration mismatches between server and client
+// react-markdown passes an AST `node` prop to custom components;
+// strip it (and any other non-DOM keys) before forwarding to the real element.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function stripNonDom(props: Record<string, any>): Record<string, any> {
+  const { node, inline, ordered, depth, isHeader, ...domProps } = props;
+  return domProps;
+}
+
 function makeHeading(Tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') {
-  const HeadingComponent = ({ children, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
-    <Tag {...props} suppressHydrationWarning>{children}</Tag>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const HeadingComponent = ({ children, ...props }: any) => (
+    <Tag {...stripNonDom(props)} suppressHydrationWarning>{children}</Tag>
   );
   HeadingComponent.displayName = Tag;
   return HeadingComponent;
@@ -68,11 +75,12 @@ const components: Components = {
   h4: makeHeading('h4'),
   h5: makeHeading('h5'),
   h6: makeHeading('h6'),
-  code({ children, ...props }) {
-    return <code {...props} suppressHydrationWarning>{children}</code>;
+  code({ children, node, ...rest }) {
+    void node;
+    return <code {...stripNonDom(rest)} suppressHydrationWarning>{children}</code>;
   },
-  pre({ children, ...props }) {
-    // Extract code string from children
+  pre({ children, node, ...rest }) {
+    void node;
     let codeString = '';
     if (children && typeof children === 'object' && 'props' in children) {
       const codeEl = children as React.ReactElement<{ children?: React.ReactNode }>;
@@ -80,31 +88,38 @@ const components: Components = {
     }
     return (
       <div className="relative group">
-        <pre {...props} suppressHydrationWarning>{children}</pre>
+        <pre {...stripNonDom(rest)} suppressHydrationWarning>{children}</pre>
         <CopyButton code={codeString} />
       </div>
     );
   },
-  li({ children, ...props }) {
-    return <li {...props} suppressHydrationWarning>{children}</li>;
+  li({ children, node, ...rest }) {
+    void node;
+    return <li {...stripNonDom(rest)} suppressHydrationWarning>{children}</li>;
+  },
+  p({ children, node, ...rest }) {
+    void node;
+    return <p {...stripNonDom(rest)} suppressHydrationWarning>{children}</p>;
   },
-  a({ href, children, ...props }) {
+  a({ href, children, node, ...rest }) {
+    void node;
     const isExternal = href?.startsWith('http');
     return (
       <a
         href={href}
         target={isExternal ? '_blank' : undefined}
         rel={isExternal ? 'noopener noreferrer' : undefined}
-        {...props}
+        {...stripNonDom(rest)}
       >
         {children}
       </a>
     );
   },
-  img({ src, alt, ...props }) {
+  img({ src, alt, node, ...rest }) {
+    void node;
     if (!src) return null;
     // eslint-disable-next-line @next/next/no-img-element
-    return <img src={src} alt={alt ?? ''} {...props} />;
+    return <img src={src} alt={alt ?? ''} {...stripNonDom(rest)} />;
   },
 };
 

package/app/components/RightAskPanel.tsx

@@ -9,7 +9,9 @@ import { useResizeDrag } from '@/hooks/useResizeDrag';
 const DEFAULT_WIDTH = 420;
 const MIN_WIDTH = 400;
 const MAX_WIDTH_ABS = 4000;
-const FOCUS_SNAP_THRESHOLD = 80;
+const ENTER_SNAP_THRESHOLD = 80;
+const EXIT_SNAP_THRESHOLD = 16;
+const MIN_CONTENT_WIDTH = 360;
 
 import type { AcpAgentSelection } from '@/hooks/useAskModal';
 
@@ -37,6 +39,7 @@ export default function RightAskPanel({
   maximized = false, onMaximize, sidebarOffset = 0,
 }: RightAskPanelProps) {
   const snapFiredRef = useRef(false);
+  const justExitedMaxRef = useRef(false);
 
   const maxAvailable = typeof window !== 'undefined'
     ? window.innerWidth - sidebarOffset
@@ -45,12 +48,28 @@ export default function RightAskPanel({
   const handleResize = useCallback((w: number) => {
     if (snapFiredRef.current) return;
     const clamped = Math.min(w, maxAvailable);
-    if (maximized && clamped < maxAvailable - FOCUS_SNAP_THRESHOLD && onMaximize) {
+
+    // Exit maximized: user drags right even a little (16px) → exit immediately
+    if (maximized && clamped < maxAvailable - EXIT_SNAP_THRESHOLD && onMaximize) {
+      justExitedMaxRef.current = true;
       onMaximize();
-      onWidthChange(clamped);
+      const maxPanelForContent = typeof window !== 'undefined'
+        ? window.innerWidth - sidebarOffset - MIN_CONTENT_WIDTH
+        : clamped;
+      onWidthChange(Math.min(clamped, maxPanelForContent));
       return;
     }
-    if (!maximized && clamped >= maxAvailable - FOCUS_SNAP_THRESHOLD && onMaximize) {
+
+    // Snap to fullscreen: panel near max edge OR content squeezed below minimum.
+    // Suppress content-based snap while justExitedMaxRef is true (user recently
+    // exited fullscreen and panel is still wide); only re-enable once the panel
+    // has been shrunk enough that content is comfortable (reset in handleMouseDown).
+    const contentRemaining = typeof window !== 'undefined'
+      ? window.innerWidth - sidebarOffset - clamped
+      : Infinity;
+    const shouldSnap = clamped >= maxAvailable - ENTER_SNAP_THRESHOLD
+      || (!justExitedMaxRef.current && contentRemaining < MIN_CONTENT_WIDTH);
+    if (!maximized && shouldSnap && onMaximize) {
       snapFiredRef.current = true;
       onMaximize();
       return;
@@ -58,7 +77,7 @@ export default function RightAskPanel({
     if (!maximized) {
       onWidthChange(clamped);
     }
-  }, [maxAvailable, onMaximize, maximized, onWidthChange]);
+  }, [maxAvailable, sidebarOffset, onMaximize, maximized, onWidthChange]);
 
   const handleResizeEnd = useCallback((w: number) => {
     if (snapFiredRef.current) return;
@@ -77,8 +96,19 @@ export default function RightAskPanel({
 
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
     snapFiredRef.current = false;
+    // Only re-enable content-based snap once the panel has been shrunk enough
+    // that content is comfortably above minimum. This prevents the bounce:
+    // exit fullscreen → new drag → immediately re-snap because panel still wide.
+    if (justExitedMaxRef.current) {
+      const currentContent = typeof window !== 'undefined'
+        ? window.innerWidth - sidebarOffset - width
+        : Infinity;
+      if (currentContent >= MIN_CONTENT_WIDTH) {
+        justExitedMaxRef.current = false;
+      }
+    }
     rawMouseDown(e);
-  }, [rawMouseDown]);
+  }, [rawMouseDown, sidebarOffset, width]);
 
   const effectiveWidth = maximized
     ? `calc(100vw - ${sidebarOffset}px)`

package/app/components/Sidebar.tsx

@@ -102,13 +102,13 @@ export default function Sidebar({ fileTree, collapsed = false, onCollapse, onExp
         </button>
         {/* Desktop action buttons — trimmed to 4 */}
         <div className="hidden md:flex items-center gap-1">
-          <button onClick={() => setSearchOpen(true)} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={t.sidebar.searchTitle} aria-label={t.sidebar.searchTitle}>
+          <button onClick={() => setSearchOpen(true)} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={t.sidebar.searchTitle} aria-hidden="true" tabIndex={-1}>
             <Search size={15} />
           </button>
-          <button onClick={() => setSettingsOpen(true)} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={t.sidebar.settingsTitle} aria-label={t.sidebar.settingsTitle}>
+          <button onClick={() => setSettingsOpen(true)} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={t.sidebar.settingsTitle} aria-hidden="true" tabIndex={-1}>
             <Settings size={15} />
           </button>
-          <button onClick={onCollapse} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={t.sidebar.collapseTitle} aria-label={t.sidebar.collapseTitle}>
+          <button onClick={onCollapse} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={t.sidebar.collapseTitle} aria-hidden="true" tabIndex={-1}>
             <PanelLeftClose size={15} />
           </button>
         </div>

package/app/components/agents/AgentsMcpSection.tsx

@@ -339,6 +339,9 @@ function ByAgentView({
                         variant="primary"
                       />
                     )}
+                    {!agent.installed && (
+                      <span className="text-2xs text-muted-foreground/60">or CLI Skill</span>
+                    )}
                   </div>
                 </div>
 

package/app/components/help/HelpContent.tsx

@@ -18,6 +18,7 @@ function Section({ id, icon, title, defaultOpen = false, children }: {
 
   return (
     <div id={id} className="bg-card border border-border rounded-lg overflow-hidden scroll-mt-4">
+      <h2 className="sr-only">{title}</h2>
       <button
         onClick={() => setOpen(v => !v)}
         className="w-full flex items-center gap-3 px-5 py-4 text-left hover:bg-muted/50 transition-colors focus-visible:ring-2 focus-visible:ring-ring"

package/app/components/settings/McpAgentInstall.tsx

@@ -1,14 +1,16 @@
 'use client';
 
 import { useState } from 'react';
-import { CheckCircle2, AlertCircle, Loader2 } from 'lucide-react';
+import { CheckCircle2, AlertCircle, Loader2, Copy } from 'lucide-react';
 import CustomSelect from '@/components/CustomSelect';
 import { apiFetch } from '@/lib/api';
+import { copyToClipboard } from '@/lib/clipboard';
+import { toast } from '@/lib/toast';
 import type { AgentInfo, McpAgentInstallProps } from './types';
 
 /* ── Agent Install ─────────────────────────────────────────────── */
 
-export default function AgentInstall({ agents, t, onRefresh }: McpAgentInstallProps) {
+export default function AgentInstall({ agents, t, onRefresh, mode = 'mcp', activeSkillName = 'mindos' }: McpAgentInstallProps) {
   const m = t.settings?.mcp;
   const [selected, setSelected] = useState<Set<string>>(new Set());
   const [transport, setTransport] = useState<'auto' | 'stdio' | 'http'>('auto');
@@ -31,7 +33,8 @@ export default function AgentInstall({ agents, t, onRefresh }: McpAgentInstallPr
     });
   };
 
-  const handleInstall = async () => {
+  /* ── MCP mode: install MCP config via API ── */
+  const handleMcpInstall = async () => {
     if (selected.size === 0) return;
     setInstalling(true);
     setMessage(null);
@@ -50,7 +53,6 @@ export default function AgentInstall({ agents, t, onRefresh }: McpAgentInstallPr
         }),
         transport,
         ...(transport === 'http' ? { url: httpUrl, token: httpToken } : {}),
-        // For auto mode, pass http settings for agents that need it
         ...(transport === 'auto' ? { url: httpUrl, token: httpToken } : {}),
       };
       const res = await apiFetch<{ results: Array<{ agent: string; status: string; message?: string }> }>('/api/mcp/install', {
@@ -81,8 +83,18 @@ export default function AgentInstall({ agents, t, onRefresh }: McpAgentInstallPr
     return agent?.preferredTransport === 'http';
   }));
 
+  /* ═══ CLI mode: show skill install commands ═══ */
+  if (mode === 'cli') {
+    return <CliSkillInstall agents={agents} m={m} activeSkillName={activeSkillName} />;
+  }
+
+  /* ═══ MCP mode: full MCP config install ═══ */
   return (
     <div className="space-y-3 pt-2">
+      <p className="text-xs text-muted-foreground">
+        {m?.mcpInstallDesc ?? 'Install MCP config + Skill to detected agents on this machine.'}
+      </p>
+
       {/* Agent list */}
       <div className="space-y-1">
         {agents.map(agent => (
@@ -109,7 +121,6 @@ export default function AgentInstall({ agents, t, onRefresh }: McpAgentInstallPr
                 {agent.present ? (m?.detected ?? 'Detected') : (m?.notFound ?? 'Not found')}
               </span>
             )}
-            {/* Scope selector */}
             {selected.has(agent.key) && agent.hasProjectScope && agent.hasGlobalScope && (
               <CustomSelect
                 value={scopes[agent.key] || 'project'}
@@ -126,12 +137,10 @@ export default function AgentInstall({ agents, t, onRefresh }: McpAgentInstallPr
         ))}
       </div>
 
-      {/* Select detected / Clear buttons */}
+      {/* Quick select */}
       <div className="flex gap-2 text-xs pt-1">
         <button type="button"
-          onClick={() => setSelected(new Set(
-            agents.filter(a => !a.installed && a.present).map(a => a.key)
-          ))}
+          onClick={() => setSelected(new Set(agents.filter(a => !a.installed && a.present).map(a => a.key)))}
           className="px-2.5 py-1 rounded-md border border-[var(--amber)] text-[var(--amber)] transition-colors hover:bg-muted/50">
           {m?.selectDetected ?? 'Select Detected'}
         </button>
@@ -163,32 +172,20 @@ export default function AgentInstall({ agents, t, onRefresh }: McpAgentInstallPr
         <div className="space-y-2 pl-5 text-xs">
           <div className="space-y-1">
             <label className="text-muted-foreground">{m?.httpUrl ?? 'MCP URL'}</label>
-            <input
-              type="text"
-              value={httpUrl}
-              onChange={e => setHttpUrl(e.target.value)}
-              className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background font-mono text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring"
-            />
+            <input type="text" value={httpUrl} onChange={e => setHttpUrl(e.target.value)}
+              className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background font-mono text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring" />
           </div>
           <div className="space-y-1">
             <label className="text-muted-foreground">{m?.httpToken ?? 'Auth Token'}</label>
-            <input
-              type="password"
-              value={httpToken}
-              onChange={e => setHttpToken(e.target.value)}
-              placeholder="Bearer token"
-              className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background font-mono text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring"
-            />
+            <input type="password" value={httpToken} onChange={e => setHttpToken(e.target.value)} placeholder="Bearer token"
+              className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background font-mono text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring" />
           </div>
         </div>
       )}
 
       {/* Install button */}
-      <button
-        onClick={handleInstall}
-        disabled={selected.size === 0 || installing}
-        className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed bg-[var(--amber)] text-[var(--amber-foreground)]"
-      >
+      <button onClick={handleMcpInstall} disabled={selected.size === 0 || installing}
+        className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed bg-[var(--amber)] text-[var(--amber-foreground)]">
         {installing && <Loader2 size={12} className="animate-spin" />}
         {installing ? (m?.installing ?? 'Installing...') : (m?.installSelected ?? 'Install Selected')}
       </button>
@@ -206,3 +203,73 @@ export default function AgentInstall({ agents, t, onRefresh }: McpAgentInstallPr
     </div>
   );
 }
+
+/* ── CLI Skill Install — generates per-agent CLI commands ── */
+
+function CliSkillInstall({ agents, m, activeSkillName }: {
+  agents: AgentInfo[];
+  m: Record<string, any> | undefined;
+  activeSkillName: string;
+}) {
+  const [selectedAgent, setSelectedAgent] = useState(agents[0]?.key ?? 'claude-code');
+  const agent = agents.find(a => a.key === selectedAgent);
+  const cmd = `npx skills add GeminiLight/MindOS --skill ${activeSkillName} -a ${selectedAgent} -g -y`;
+
+  const handleCopy = async () => {
+    const ok = await copyToClipboard(cmd);
+    if (ok) toast.copy();
+  };
+
+  const connected = agents.filter(a => a.present && a.installed);
+  const detected = agents.filter(a => a.present && !a.installed);
+  const notFound = agents.filter(a => !a.present);
+
+  return (
+    <div className="space-y-3 pt-2">
+      <p className="text-xs text-muted-foreground">
+        {m?.cliInstallDesc ?? 'Install the MindOS Skill to your agent so it can operate your knowledge base.'}
+      </p>
+
+      {/* Agent selector */}
+      <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 })) }] : []),
+        ]}
+      />
+
+      {/* Status */}
+      {agent && (
+        <div className="flex items-center gap-2 text-2xs">
+          {agent.present && agent.installed ? (
+            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full font-medium bg-success/10 text-success">
+              <CheckCircle2 size={10} /> {m?.tagConnected ?? 'Connected'}
+            </span>
+          ) : agent.present ? (
+            <span className="text-muted-foreground">{m?.detected ?? 'Detected'}</span>
+          ) : (
+            <span className="text-muted-foreground">{m?.notFound ?? 'Not found'}</span>
+          )}
+          {agent.installedSkillCount != null && agent.installedSkillCount > 0 && (
+            <span className="text-muted-foreground">{agent.installedSkillCount} {m?.skillsInstalled ?? 'skills installed'}</span>
+          )}
+        </div>
+      )}
+
+      {/* Command */}
+      <div className="flex items-center gap-1.5">
+        <code className="flex-1 text-[10px] font-mono bg-muted/50 border border-border rounded-lg px-2.5 py-2 text-muted-foreground select-all overflow-x-auto whitespace-nowrap">
+          {cmd}
+        </code>
+        <button onClick={handleCopy}
+          className="p-1.5 rounded-md border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0">
+          <Copy size={11} />
+        </button>
+      </div>
+    </div>
+  );
+}

package/app/components/settings/McpSkillsSection.tsx

@@ -29,7 +29,7 @@ export default function SkillsSection({ t }: McpSkillsSectionProps) {
   const [createError, setCreateError] = useState('');
 
   const [search, setSearch] = useState('');
-  const [builtinCollapsed, setBuiltinCollapsed] = useState(false);
+  const [builtinCollapsed, setBuiltinCollapsed] = useState(true);
   const [editing, setEditing] = useState<string | null>(null);
   const [editContent, setEditContent] = useState('');
   const [editError, setEditError] = useState('');