@geminilight/mindos 0.6.40 → 0.6.42

package/_standalone/__tests__/core/tools.test.ts

@@ -57,12 +57,12 @@ describe('tools: list_files', () => {
     seedFile('data.csv', 'a,b,c');
   });
 
-  it('lists all files with default params (excluding system files)', async () => {
+  it('lists all files with default params', async () => {
     const result = await callTool('list_files', {});
     expect(result).toContain('Profile/');
     expect(result).toContain('Identity.md');
     expect(result).toContain('Goals.md');
-    expect(result).not.toContain('README.md'); // System file hidden from Agent
+    expect(result).toContain('README.md'); // System files now included in tree
     expect(result).toContain('data.csv');
     expect(result).not.toContain('Error:');
   });
@@ -71,15 +71,13 @@ describe('tools: list_files', () => {
     const result = await callTool('list_files', { path: 'Profile' });
     expect(result).toContain('Identity.md');
     expect(result).toContain('Goals.md');
-    expect(result).not.toContain('README.md');
     expect(result).not.toContain('data.csv');
   });
 
-  it('respects depth parameter (hides system files)', async () => {
+  it('respects depth parameter', async () => {
     const result = await callTool('list_files', { depth: 1 });
     expect(result).toContain('Profile/');
     expect(result).toContain('...');
-    expect(result).not.toContain('README.md'); // System file hidden
   });
 
   it('returns error message for non-existent directory', async () => {
@@ -91,7 +89,6 @@ describe('tools: list_files', () => {
   it('handles nested subdirectory path', async () => {
     const result = await callTool('list_files', { path: 'Projects/Products' });
     expect(result).toContain('ProductA.md');
-    expect(result).not.toContain('README.md');
   });
 
   it('returns (empty directory) for dir with no allowed files', async () => {

package/_standalone/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/_standalone/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/_standalone/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/_standalone/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/_standalone/components/agents/AgentsMcpSection.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useMemo, useState } from 'react';
 import Link from 'next/link';
 import { RefreshCw, Search, Server } from 'lucide-react';
+import { apiFetch } from '@/lib/api';
 import type { McpContextValue } from '@/lib/stores/mcp-store';
 import type { AgentBuckets, AgentStatusFilter, AgentTransportFilter } from './agents-content-model';
 import {
@@ -58,6 +59,8 @@ export default function AgentsMcpSection({
     cancel: string;
     noAvailableAgents: string;
     manualRemoveHint: string;
+    removeSuccess: string;
+    removeFailed: string;
     reconnectAllInServer: string;
     reconnectAllRunning: string;
     reconnectAllDone: (ok: number, failed: number) => string;
@@ -339,6 +342,9 @@ function ByAgentView({
                         variant="primary"
                       />
                     )}
+                    {!agent.installed && (
+                      <span className="text-2xs text-muted-foreground/60">or CLI Skill</span>
+                    )}
                   </div>
                 </div>
 
@@ -380,7 +386,7 @@ function ByServerView({
   onReconnect: (agent: ReturnType<typeof sortAgentsByStatus>[number]) => Promise<void>;
 }) {
   const [pickerServer, setPickerServer] = useState<string | null>(null);
-  const [confirmState, setConfirmState] = useState<{ agentName: string; serverName: string } | null>(null);
+  const [confirmState, setConfirmState] = useState<{ agentKey: string; agentName: string; serverName: string } | null>(null);
   const [hintMessage, setHintMessage] = useState<string | null>(null);
   const [reconnectingServer, setReconnectingServer] = useState<string | null>(null);
   const [reconnectMsg, setReconnectMsg] = useState<Record<string, string>>({});
@@ -393,11 +399,27 @@ function ByServerView({
     [onInstallMindos],
   );
 
-  const handleConfirmRemove = useCallback(() => {
+  const handleConfirmRemove = useCallback(async () => {
+    if (!confirmState) return;
+    const { agentKey } = confirmState;
     setConfirmState(null);
-    setHintMessage(copy.manualRemoveHint);
+
+    // Find agent info to determine scope
+    const agent = allAgents.find(a => a.key === agentKey);
+    const scope = agent?.scope === 'project' ? 'project' : 'global';
+
+    try {
+      await apiFetch('/api/mcp/uninstall', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ agents: [{ key: agentKey, scope }] }),
+      });
+      setHintMessage(copy.removeSuccess ?? 'Removed. Restart your agent to apply.');
+    } catch {
+      setHintMessage(copy.removeFailed ?? 'Failed to remove. Try editing the config file manually.');
+    }
     setTimeout(() => setHintMessage(null), 4000);
-  }, [copy.manualRemoveHint]);
+  }, [confirmState, allAgents, copy]);
 
   const handleReconnectAllInServer = useCallback(
     async (serverName: string, agents: typeof allAgents) => {
@@ -517,7 +539,7 @@ function ByServerView({
                       <AgentAvatar
                         name={agent.name}
                         status={agentStatus}
-                        onRemove={() => setConfirmState({ agentName: agent.name, serverName: srv.serverName })}
+                        onRemove={() => setConfirmState({ agentKey: agent.key, agentName: agent.name, serverName: srv.serverName })}
                       />
                     </Link>
                   );

package/_standalone/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/_standalone/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('');