@geminilight/mindos 0.6.53 → 0.6.55

package/app/components/renderers/image/ImageRenderer.tsx

@@ -0,0 +1,203 @@
+'use client';
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import type { RendererContext } from '@/lib/renderers/registry';
+
+/** Zoom presets — "fit" means object-fit: contain */
+type ZoomMode = 'fit' | number;
+
+const ZOOM_STEPS = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4];
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/**
+ * Image Renderer — professional image viewer with:
+ * - Fit-to-view / actual-size toggle
+ * - Zoom in/out with presets
+ * - Checkerboard background for transparent images
+ * - Natural dimensions + file size display
+ * - Loading / error states with retry
+ */
+export function ImageRenderer({ filePath }: RendererContext) {
+  const src = `/api/file/raw?path=${encodeURIComponent(filePath)}`;
+  const fileName = filePath.split('/').pop() ?? 'image';
+  const ext = fileName.split('.').pop()?.toLowerCase() ?? '';
+  const isTransparent = ['png', 'svg', 'webp', 'ico', 'gif'].includes(ext);
+
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [retryKey, setRetryKey] = useState(0);
+  const [zoom, setZoom] = useState<ZoomMode>('fit');
+  const [naturalSize, setNaturalSize] = useState<{ w: number; h: number } | null>(null);
+  const [fileSize, setFileSize] = useState<number | null>(null);
+  const imgRef = useRef<HTMLImageElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleLoad = useCallback(() => {
+    setLoading(false);
+    const img = imgRef.current;
+    if (img) {
+      setNaturalSize({ w: img.naturalWidth, h: img.naturalHeight });
+    }
+  }, []);
+
+  const handleError = useCallback(() => {
+    setLoading(false);
+    setError(true);
+  }, []);
+
+  const handleRetry = useCallback(() => {
+    setError(false);
+    setLoading(true);
+    setRetryKey(k => k + 1);
+  }, []);
+
+  // Fetch file size — only once after image loads successfully
+  useEffect(() => {
+    if (loading || error || fileSize !== null) return;
+    fetch(src, { method: 'HEAD' })
+      .then(res => {
+        const cl = res.headers.get('Content-Length');
+        if (cl) setFileSize(parseInt(cl, 10));
+      })
+      .catch(() => {});
+  }, [src, loading, error, fileSize]);
+
+  const zoomIn = useCallback(() => {
+    setZoom(prev => {
+      const current = prev === 'fit' ? 1 : prev;
+      const next = ZOOM_STEPS.find(s => s > current);
+      return next ?? current;
+    });
+  }, []);
+
+  const zoomOut = useCallback(() => {
+    setZoom(prev => {
+      const current = prev === 'fit' ? 1 : prev;
+      const next = [...ZOOM_STEPS].reverse().find(s => s < current);
+      return next ?? current;
+    });
+  }, []);
+
+  const toggleFit = useCallback(() => {
+    setZoom(prev => prev === 'fit' ? 1 : 'fit');
+  }, []);
+
+  // Keyboard shortcuts — only active when container is focused or page body is active
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handler = (e: KeyboardEvent) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+      // Only respond when the image viewer area has focus or body is active
+      if (document.activeElement !== document.body && !container.contains(document.activeElement)) return;
+      if (e.key === '+' || e.key === '=') { e.preventDefault(); zoomIn(); }
+      if (e.key === '-') { e.preventDefault(); zoomOut(); }
+      if (e.key === '0') { e.preventDefault(); setZoom('fit'); }
+      if (e.key === '1') { e.preventDefault(); setZoom(1); }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [zoomIn, zoomOut]);
+
+  const zoomPercent = zoom === 'fit' ? 'Fit' : `${Math.round(zoom * 100)}%`;
+  // Only use pixel dimensions when we know the natural size (avoids layout jump)
+  const zoomStyle = zoom === 'fit'
+    ? { maxWidth: '100%', maxHeight: '70vh', objectFit: 'contain' as const }
+    : naturalSize
+      ? { width: naturalSize.w * zoom, height: 'auto' }
+      : { maxWidth: '100%', maxHeight: '70vh', objectFit: 'contain' as const }; // fallback to fit while loading
+
+  return (
+    <div className="w-full flex flex-col gap-0">
+      {/* Toolbar */}
+      <div className="flex items-center justify-between px-3 py-2 border-b border-border text-xs text-[var(--text-secondary)]">
+        <div className="flex items-center gap-3">
+          {naturalSize && (
+            <span>{naturalSize.w} x {naturalSize.h}</span>
+          )}
+          {fileSize !== null && (
+            <span>{formatBytes(fileSize)}</span>
+          )}
+          <span className="uppercase opacity-60">{ext}</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <button
+            onClick={zoomOut}
+            disabled={!naturalSize}
+            className="px-2 py-1 rounded hover:bg-[var(--bg-hover)] transition-colors disabled:opacity-30"
+            title="Zoom out (-)"
+          >
+            -
+          </button>
+          <button
+            onClick={toggleFit}
+            disabled={!naturalSize}
+            className="px-2 py-1 rounded hover:bg-[var(--bg-hover)] transition-colors min-w-[48px] text-center disabled:opacity-30"
+            title={zoom === 'fit' ? 'Actual size (1)' : 'Fit to view (0)'}
+          >
+            {zoomPercent}
+          </button>
+          <button
+            onClick={zoomIn}
+            disabled={!naturalSize}
+            className="px-2 py-1 rounded hover:bg-[var(--bg-hover)] transition-colors disabled:opacity-30"
+            title="Zoom in (+)"
+          >
+            +
+          </button>
+        </div>
+      </div>
+
+      {/* Image area */}
+      <div
+        ref={containerRef}
+        tabIndex={-1}
+        className={`relative flex-1 min-h-[70vh] overflow-auto flex items-center justify-center outline-none ${
+          isTransparent ? 'bg-checkerboard' : 'bg-[var(--bg-secondary)]'
+        }`}
+      >
+        {loading && !error && (
+          <div className="absolute inset-0 flex items-center justify-center z-10">
+            <span className="text-sm text-[var(--text-tertiary)] animate-pulse">
+              Loading...
+            </span>
+          </div>
+        )}
+        {error && (
+          <div className="absolute inset-0 flex flex-col items-center justify-center z-10 gap-2">
+            <span className="text-sm text-[var(--text-secondary)]">
+              Failed to load image
+            </span>
+            <button
+              onClick={handleRetry}
+              className="text-xs px-3 py-1.5 rounded-md bg-[var(--bg-tertiary)] hover:bg-[var(--bg-hover)] transition-colors"
+            >
+              Retry
+            </button>
+          </div>
+        )}
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          key={retryKey}
+          ref={imgRef}
+          src={src}
+          alt={fileName}
+          onLoad={handleLoad}
+          onError={handleError}
+          draggable={false}
+          className="select-none"
+          style={{
+            display: error ? 'none' : 'block',
+            ...zoomStyle,
+          }}
+        />
+      </div>
+    </div>
+  );
+}

package/app/components/renderers/image/manifest.ts

@@ -0,0 +1,17 @@
+import type { RendererDefinition } from '@/lib/renderers/registry';
+
+const IMAGE_EXTENSIONS = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'bmp', 'ico']);
+
+export const manifest: RendererDefinition = {
+  id: 'image',
+  name: 'Image Viewer',
+  description: 'Renders image files with zoom, fit-to-view, and transparency support.',
+  author: 'MindOS',
+  icon: '🖼',
+  tags: ['image', 'photo', 'viewer', 'png', 'jpg', 'svg'],
+  builtin: true,
+  core: true,
+  appBuiltinFeature: true,
+  match: ({ extension }) => IMAGE_EXTENSIONS.has(extension),
+  load: () => import('./ImageRenderer').then(m => ({ default: m.ImageRenderer })),
+};

package/app/components/renderers/pdf/PdfRenderer.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import type { RendererContext } from '@/lib/renderers/registry';
+
+/**
+ * PDF Renderer — embeds the browser's native PDF viewer via iframe.
+ * Fetches the PDF binary from /api/file/raw and displays inline.
+ * Read-only: no editing capability (PDF editing is out of scope).
+ */
+export function PdfRenderer({ filePath }: RendererContext) {
+  const src = `/api/file/raw?path=${encodeURIComponent(filePath)}`;
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  // Increment key to force iframe remount on retry
+  const [retryKey, setRetryKey] = useState(0);
+
+  const handleRetry = useCallback(() => {
+    setError(false);
+    setLoading(true);
+    setRetryKey(k => k + 1);
+  }, []);
+
+  return (
+    <div className="w-full h-full min-h-[80vh] flex flex-col relative">
+      {loading && !error && (
+        <div className="absolute inset-0 flex items-center justify-center bg-[var(--bg-secondary)] rounded-lg z-10">
+          <span className="text-sm text-[var(--text-tertiary)] animate-pulse">
+            Loading PDF...
+          </span>
+        </div>
+      )}
+      {error && (
+        <div className="absolute inset-0 flex flex-col items-center justify-center bg-[var(--bg-secondary)] rounded-lg z-10 gap-2">
+          <span className="text-sm text-[var(--text-secondary)]">
+            Failed to load PDF
+          </span>
+          <button
+            onClick={handleRetry}
+            className="text-xs px-3 py-1.5 rounded-md bg-[var(--bg-tertiary)] hover:bg-[var(--bg-hover)] transition-colors"
+          >
+            Retry
+          </button>
+        </div>
+      )}
+      <iframe
+        key={retryKey}
+        src={src}
+        className="w-full flex-1 min-h-[80vh] border-0 rounded-lg bg-[var(--bg-secondary)]"
+        title={filePath.split('/').pop() ?? 'PDF'}
+        onLoad={() => setLoading(false)}
+        onError={() => { setLoading(false); setError(true); }}
+        style={{ display: error ? 'none' : 'block' }}
+      />
+    </div>
+  );
+}

package/app/components/renderers/pdf/manifest.ts

@@ -0,0 +1,15 @@
+import type { RendererDefinition } from '@/lib/renderers/registry';
+
+export const manifest: RendererDefinition = {
+  id: 'pdf',
+  name: 'PDF Viewer',
+  description: 'Renders PDF files using the browser built-in PDF viewer.',
+  author: 'MindOS',
+  icon: '📄',
+  tags: ['pdf', 'document', 'viewer'],
+  builtin: true,
+  core: true,
+  appBuiltinFeature: true,
+  match: ({ extension }) => extension === 'pdf',
+  load: () => import('./PdfRenderer').then(m => ({ default: m.PdfRenderer })),
+};

package/app/components/renderers/video/VideoRenderer.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import type { RendererContext } from '@/lib/renderers/registry';
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/**
+ * Video Renderer — native HTML5 video player with file info bar.
+ * Uses browser built-in controls (play/pause, seek, volume, fullscreen, PiP).
+ * Supports Range requests for seeking without downloading entire file.
+ */
+export function VideoRenderer({ filePath }: RendererContext) {
+  const src = `/api/file/raw?path=${encodeURIComponent(filePath)}`;
+  const fileName = filePath.split('/').pop() ?? 'video';
+  const ext = fileName.split('.').pop()?.toLowerCase() ?? '';
+
+  const [error, setError] = useState(false);
+  const [retryKey, setRetryKey] = useState(0);
+  const [fileSize, setFileSize] = useState<number | null>(null);
+  const [resolution, setResolution] = useState<{ w: number; h: number } | null>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    fetch(src, { method: 'HEAD' })
+      .then(res => {
+        const cl = res.headers.get('Content-Length');
+        if (cl) setFileSize(parseInt(cl, 10));
+      })
+      .catch(() => {});
+  }, [src]);
+
+  const handleLoadedMetadata = useCallback(() => {
+    const video = videoRef.current;
+    if (video) {
+      setResolution({ w: video.videoWidth, h: video.videoHeight });
+    }
+  }, []);
+
+  const handleRetry = useCallback(() => {
+    setError(false);
+    setRetryKey(k => k + 1);
+  }, []);
+
+  return (
+    <div className="w-full flex flex-col gap-0">
+      {/* Info bar */}
+      <div className="flex items-center gap-3 px-3 py-2 border-b border-border text-xs text-[var(--text-secondary)]">
+        {resolution && (
+          <span>{resolution.w} x {resolution.h}</span>
+        )}
+        {fileSize !== null && (
+          <span>{formatBytes(fileSize)}</span>
+        )}
+        <span className="uppercase opacity-60">{ext}</span>
+      </div>
+
+      {/* Player area */}
+      <div className="flex-1 min-h-[50vh] flex items-center justify-center bg-black rounded-b-lg overflow-hidden">
+        {error ? (
+          <div className="flex flex-col items-center gap-2">
+            <span className="text-sm text-neutral-400">Failed to load video</span>
+            <button
+              onClick={handleRetry}
+              className="text-xs px-3 py-1.5 rounded-md bg-neutral-800 hover:bg-neutral-700 text-neutral-200 transition-colors"
+            >
+              Retry
+            </button>
+          </div>
+        ) : (
+          /* eslint-disable-next-line jsx-a11y/media-has-caption */
+          <video
+            key={retryKey}
+            ref={videoRef}
+            controls
+            preload="metadata"
+            className="max-w-full max-h-[70vh]"
+            onLoadedMetadata={handleLoadedMetadata}
+            onError={() => setError(true)}
+          >
+            <source src={src} />
+          </video>
+        )}
+      </div>
+    </div>
+  );
+}

package/app/components/renderers/video/manifest.ts

@@ -0,0 +1,17 @@
+import type { RendererDefinition } from '@/lib/renderers/registry';
+
+const VIDEO_EXTENSIONS = new Set(['mp4', 'webm', 'mov', 'mkv']);
+
+export const manifest: RendererDefinition = {
+  id: 'video',
+  name: 'Video Player',
+  description: 'Plays video files with native browser controls.',
+  author: 'MindOS',
+  icon: '🎬',
+  tags: ['video', 'movie', 'recording', 'mp4', 'webm'],
+  builtin: true,
+  core: true,
+  appBuiltinFeature: true,
+  match: ({ extension }) => VIDEO_EXTENSIONS.has(extension),
+  load: () => import('./VideoRenderer').then(m => ({ default: m.VideoRenderer })),
+};

package/app/components/settings/McpTab.tsx

@@ -7,7 +7,7 @@ import { copyToClipboard } from '@/lib/clipboard';
 import { apiFetch } from '@/lib/api';
 import CustomSelect from '@/components/CustomSelect';
 import type { SelectItem } from '@/components/CustomSelect';
-import type { McpTabProps, McpStatus, AgentInfo } from './types';
+import type { McpTabProps, McpStatus, AgentInfo, ConnectionMode } from './types';
 import AgentInstall from './McpAgentInstall';
 import SkillsSection from './McpSkillsSection';
 
@@ -20,8 +20,13 @@ export function McpTab({ t }: McpTabProps) {
   const [mode, setMode] = useState<'cli' | 'mcp'>('cli');
   const [restarting, setRestarting] = useState(false);
   const [selectedAgent, setSelectedAgent] = useState('');
+  const [savingMode, setSavingMode] = useState(false);
   const restartPollRef = useRef<ReturnType<typeof setInterval>>(undefined);
 
+  // Derive mcpEnabled from server state
+  const serverConnectionMode = mcp?.status?.connectionMode;
+  const mcpEnabled = serverConnectionMode?.mcp ?? false;
+
   useEffect(() => () => clearInterval(restartPollRef.current), []);
 
   if (!mcp || mcp.loading) {
@@ -42,6 +47,26 @@ export function McpTab({ t }: McpTabProps) {
   const mindosEnabled = mcp.skills?.find(s => s.name === 'mindos')?.enabled ?? true;
   const activeSkillName = mindosEnabled ? 'mindos' : 'mindos-zh';
 
+  const handleToggleMcp = async (enabled: boolean) => {
+    setSavingMode(true);
+    try {
+      await apiFetch('/api/settings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          connectionMode: { cli: true, mcp: enabled },
+        }),
+      });
+      await mcp.refresh();
+      // Switch view to MCP tab when enabling
+      if (enabled) setMode('mcp');
+    } catch {
+      toast.error('Failed to toggle connection mode');
+    } finally {
+      setSavingMode(false);
+    }
+  };
+
   const handleRestart = async () => {
     setRestarting(true);
     try {
@@ -72,6 +97,15 @@ export function McpTab({ t }: McpTabProps) {
 
   return (
     <div className="space-y-6">
+      {/* 0. Connection Mode Toggle */}
+      <ConnectionModeCard
+        mcpEnabled={mcpEnabled}
+        onToggle={handleToggleMcp}
+        saving={savingMode}
+        mcpRunning={mcp.status?.running ?? false}
+        m={m}
+      />
+
       {/* 1. Auth Token */}
       <AuthTokenCard status={mcp.status} m={m} />
 
@@ -91,6 +125,7 @@ export function McpTab({ t }: McpTabProps) {
         onRestart={handleRestart}
         onRefresh={mcp.refresh}
         activeSkillName={activeSkillName}
+        mcpEnabled={mcpEnabled}
         m={m}
         t={t}
       />
@@ -114,6 +149,83 @@ export function McpTab({ t }: McpTabProps) {
   );
 }
 
+/* ── Connection Mode Card ── */
+
+function ConnectionModeCard({ mcpEnabled, onToggle, saving, mcpRunning, m }: {
+  mcpEnabled: boolean;
+  onToggle: (enabled: boolean) => void;
+  saving: boolean;
+  mcpRunning: boolean;
+  m: Record<string, any> | undefined;
+}) {
+  return (
+    <div className="rounded-xl border border-border bg-card overflow-hidden">
+      <div className="flex items-center gap-2.5 px-4 pt-4 pb-3">
+        <div className="w-7 h-7 rounded-lg bg-[var(--amber-subtle)] flex items-center justify-center shrink-0">
+          <Plug size={14} className="text-[var(--amber)]" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <h3 className="text-sm font-semibold text-foreground">{m?.modeCardTitle ?? 'Connection Mode'}</h3>
+          <p className="text-2xs text-muted-foreground">{m?.modeCardDesc ?? 'Choose how agents connect to MindOS.'}</p>
+        </div>
+      </div>
+      <div className="px-4 pb-4 space-y-2">
+        {/* CLI - always on */}
+        <div className="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-muted/30 border border-border/50">
+          <input type="checkbox" checked disabled className="w-3.5 h-3.5 rounded accent-[var(--amber)]" />
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-1.5">
+              <Terminal size={12} className="text-muted-foreground" />
+              <span className="text-xs font-semibold text-foreground">CLI</span>
+              <span className="text-2xs px-1.5 py-0.5 rounded-full bg-success/10 text-success font-medium leading-none">
+                {m?.alwaysOn ?? 'Always On'}
+              </span>
+            </div>
+            <p className="text-2xs text-muted-foreground mt-0.5">{m?.cliModeDesc ?? 'Claude Code, Gemini CLI, Codex, etc.'}</p>
+          </div>
+        </div>
+
+        {/* MCP - toggleable */}
+        <label className={`flex items-center gap-3 px-3 py-2.5 rounded-lg border cursor-pointer transition-colors ${
+          mcpEnabled
+            ? 'border-[var(--amber)]/40 bg-[var(--amber)]/[0.03]'
+            : 'border-border/50 bg-muted/30 hover:bg-muted/50'
+        }`}>
+          <input
+            type="checkbox"
+            checked={mcpEnabled}
+            disabled={saving}
+            onChange={(e) => onToggle(e.target.checked)}
+            className="w-3.5 h-3.5 rounded accent-[var(--amber)] cursor-pointer"
+          />
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-1.5">
+              <Plug size={12} className={mcpEnabled ? 'text-[var(--amber)]' : 'text-muted-foreground'} />
+              <span className="text-xs font-semibold text-foreground">MCP</span>
+              {mcpEnabled && (
+                <span className={`text-2xs px-1.5 py-0.5 rounded-full font-medium leading-none ${
+                  mcpRunning ? 'bg-success/10 text-success' : 'bg-[var(--amber-subtle)] text-[var(--amber-text)]'
+                }`}>
+                  {mcpRunning ? (m?.mcpRunning ?? 'Running') : (m?.mcpStopped ?? 'Stopped')}
+                </span>
+              )}
+            </div>
+            <p className="text-2xs text-muted-foreground mt-0.5">{m?.mcpModeDesc ?? 'Claude Desktop, Cursor, Windsurf, etc.'}</p>
+          </div>
+          {saving && <Loader2 size={14} className="animate-spin text-[var(--amber)] shrink-0" />}
+        </label>
+
+        {/* Hint text */}
+        <p className="text-2xs text-muted-foreground px-1 leading-relaxed">
+          {mcpEnabled
+            ? (m?.mcpEnabledHint ?? 'MCP mode enabled. Disable to simplify the interface if you only use CLI agents.')
+            : (m?.mcpDisabledHint ?? 'Enable MCP to connect Desktop clients like Claude Desktop or Cursor.')}
+        </p>
+      </div>
+    </div>
+  );
+}
+
 /* ── Auth Token Card ── */
 
 function AuthTokenCard({ status, m }: {
@@ -195,7 +307,7 @@ function useCopyField() {
 
 /* ── Connect Card — header + CLI/MCP tabs + detected agents ── */
 
-function ConnectCard({ mode, onModeChange, status, agents, connectedAgents, detectedAgents, notFoundAgents, currentAgent, selectedAgent, onSelectAgent, restarting, onRestart, onRefresh, activeSkillName, m, t }: {
+function ConnectCard({ mode, onModeChange, status, agents, connectedAgents, detectedAgents, notFoundAgents, currentAgent, selectedAgent, onSelectAgent, restarting, onRestart, onRefresh, activeSkillName, mcpEnabled, m, t }: {
   mode: 'cli' | 'mcp';
   onModeChange: (m: 'cli' | 'mcp') => void;
   status: McpStatus | null;
@@ -210,11 +322,15 @@ function ConnectCard({ mode, onModeChange, status, agents, connectedAgents, dete
   onRestart: () => void;
   onRefresh: () => void;
   activeSkillName: string;
+  mcpEnabled: boolean;
   m: Record<string, any> | undefined;
   t: McpTabProps['t'];
 }) {
   if (!status) return null;
 
+  // If MCP is disabled, force CLI view
+  const effectiveMode = mcpEnabled ? mode : 'cli';
+
   return (
     <div className="rounded-xl border border-border bg-card overflow-hidden">
       {/* Header */}
@@ -225,38 +341,48 @@ function ConnectCard({ mode, onModeChange, status, agents, connectedAgents, dete
         <h3 className="text-sm font-semibold text-foreground">{m?.connectionTitle ?? 'Connect Agents'}</h3>
       </div>
 
-      {/* Tab switcher */}
-      <div className="grid grid-cols-2 mx-4 mb-3 rounded-lg border border-border overflow-hidden">
-        <button
-          onClick={() => onModeChange('cli')}
-          className={`flex flex-col items-start px-3 py-2.5 text-left transition-colors ${
-            mode === 'cli' ? 'bg-muted' : 'hover:bg-muted/50'
-          }`}
-        >
+      {/* Tab switcher — only show both tabs when MCP is enabled */}
+      {mcpEnabled ? (
+        <div className="grid grid-cols-2 mx-4 mb-3 rounded-lg border border-border overflow-hidden">
+          <button
+            onClick={() => onModeChange('cli')}
+            className={`flex flex-col items-start px-3 py-2.5 text-left transition-colors ${
+              effectiveMode === 'cli' ? 'bg-muted' : 'hover:bg-muted/50'
+            }`}
+          >
+            <span className="flex items-center gap-1.5">
+              <Terminal size={12} className={effectiveMode === 'cli' ? 'text-[var(--amber)]' : 'text-muted-foreground'} />
+              <span className={`text-xs font-semibold ${effectiveMode === 'cli' ? 'text-foreground' : 'text-muted-foreground'}`}>CLI</span>
+              <span className="text-2xs px-1 py-0.5 rounded bg-[var(--amber-subtle)] text-[var(--amber-text)] font-medium leading-none">{m?.recommended ?? 'Recommended'}</span>
+            </span>
+            <span className="text-2xs text-muted-foreground mt-0.5">{m?.cliAgents ?? 'Claude Code · Gemini CLI · Codex'}</span>
+          </button>
+          <button
+            onClick={() => onModeChange('mcp')}
+            className={`flex flex-col items-start px-3 py-2.5 text-left transition-colors border-l border-border ${
+              effectiveMode === 'mcp' ? 'bg-muted' : 'hover:bg-muted/50'
+            }`}
+          >
+            <span className="flex items-center gap-1.5">
+              <Plug size={12} className={effectiveMode === 'mcp' ? 'text-foreground' : 'text-muted-foreground'} />
+              <span className={`text-xs font-semibold ${effectiveMode === 'mcp' ? 'text-foreground' : 'text-muted-foreground'}`}>MCP</span>
+            </span>
+            <span className="text-2xs text-muted-foreground mt-0.5">{m?.mcpAgents ?? 'Claude Desktop · Cursor'}</span>
+          </button>
+        </div>
+      ) : (
+        <div className="mx-4 mb-3 px-3 py-2 rounded-lg border border-border bg-muted/30">
           <span className="flex items-center gap-1.5">
-            <Terminal size={12} className={mode === 'cli' ? 'text-[var(--amber)]' : 'text-muted-foreground'} />
-            <span className={`text-xs font-semibold ${mode === 'cli' ? 'text-foreground' : 'text-muted-foreground'}`}>CLI</span>
+            <Terminal size={12} className="text-[var(--amber)]" />
+            <span className="text-xs font-semibold text-foreground">CLI</span>
             <span className="text-2xs px-1 py-0.5 rounded bg-[var(--amber-subtle)] text-[var(--amber-text)] font-medium leading-none">{m?.recommended ?? 'Recommended'}</span>
           </span>
-          <span className="text-2xs text-muted-foreground mt-0.5">{m?.cliAgents ?? 'Claude Code · Gemini CLI · Codex'}</span>
-        </button>
-        <button
-          onClick={() => onModeChange('mcp')}
-          className={`flex flex-col items-start px-3 py-2.5 text-left transition-colors border-l border-border ${
-            mode === 'mcp' ? 'bg-muted' : 'hover:bg-muted/50'
-          }`}
-        >
-          <span className="flex items-center gap-1.5">
-            <Plug size={12} className={mode === 'mcp' ? 'text-foreground' : 'text-muted-foreground'} />
-            <span className={`text-xs font-semibold ${mode === 'mcp' ? 'text-foreground' : 'text-muted-foreground'}`}>MCP</span>
-          </span>
-          <span className="text-2xs text-muted-foreground mt-0.5">{m?.mcpAgents ?? 'Claude Desktop · Cursor'}</span>
-        </button>
-      </div>
+        </div>
+      )}
 
       {/* Tab content */}
       <div className="px-4 pb-4 space-y-4">
-        {mode === 'cli' ? (
+        {effectiveMode === 'cli' ? (
           <CliGuide status={status} activeSkillName={activeSkillName} agents={agents} connectedAgents={connectedAgents} detectedAgents={detectedAgents} notFoundAgents={notFoundAgents} onRefresh={onRefresh} m={m} t={t} />
         ) : (
           <McpGuide

package/app/components/settings/PluginsTab.tsx

@@ -66,7 +66,7 @@ export function PluginsTab({ pluginStates, setPluginStates, t }: PluginsTabProps
         </div>
       )}
 
-      <div className="flex items-center gap-2 text-xs text-muted-foreground border border-dashed border-border rounded-xl px-4 py-3">
+      <div className="flex items-center gap-2 text-xs text-muted-foreground border border-border/40 bg-card/30 rounded-xl px-4 py-3">
         <Puzzle size={13} className="shrink-0" />
         <span>{t.settings.plugins.comingSoon}</span>
       </div>