@geminilight/mindos 0.5.19 → 0.5.21

package/app/components/settings/McpAgentInstall.tsx

@@ -0,0 +1,227 @@
+'use client';
+
+import { useState } from 'react';
+import { CheckCircle2, AlertCircle, Loader2 } from 'lucide-react';
+import { apiFetch } from '@/lib/api';
+import type { AgentInfo, McpAgentInstallProps } from './types';
+
+/* ── Agent Install ─────────────────────────────────────────────── */
+
+export default function AgentInstall({ agents, t, onRefresh }: McpAgentInstallProps) {
+  const m = t.settings?.mcp;
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [transport, setTransport] = useState<'auto' | 'stdio' | 'http'>('auto');
+  const [httpUrl, setHttpUrl] = useState('http://localhost:8787/mcp');
+  const [httpToken, setHttpToken] = useState('');
+  const [scopes, setScopes] = useState<Record<string, 'project' | 'global'>>({});
+  const [installing, setInstalling] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  const getEffectiveTransport = (agent: AgentInfo) => {
+    if (transport === 'auto') return agent.preferredTransport;
+    return transport;
+  };
+
+  const toggle = (key: string) => {
+    setSelected(prev => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key); else next.add(key);
+      return next;
+    });
+  };
+
+  const handleInstall = async () => {
+    if (selected.size === 0) return;
+    setInstalling(true);
+    setMessage(null);
+    try {
+      const payload = {
+        agents: [...selected].map(key => {
+          const agent = agents.find(a => a.key === key);
+          const effectiveTransport = transport === 'auto'
+            ? (agent?.preferredTransport || 'stdio')
+            : transport;
+          return {
+            key,
+            scope: scopes[key] || (agent?.hasProjectScope ? 'project' : 'global'),
+            transport: effectiveTransport,
+          };
+        }),
+        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', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+      const ok = res.results.filter(r => r.status === 'ok').length;
+      const fail = res.results.filter(r => r.status === 'error');
+      if (fail.length > 0) {
+        setMessage({ type: 'error', text: fail.map(f => `${f.agent}: ${f.message}`).join('; ') });
+      } else {
+        setMessage({ type: 'success', text: m?.installSuccess ? m.installSuccess(ok) : `${ok} agent(s) configured` });
+      }
+      setSelected(new Set());
+      onRefresh();
+    } catch {
+      setMessage({ type: 'error', text: m?.installFailed ?? 'Install failed' });
+    } finally {
+      setInstalling(false);
+      setTimeout(() => setMessage(null), 4000);
+    }
+  };
+
+  // Show http fields if transport is 'http', or 'auto' with any http-preferred agent selected
+  const showHttpFields = transport === 'http' || (transport === 'auto' && [...selected].some(key => {
+    const agent = agents.find(a => a.key === key);
+    return agent?.preferredTransport === 'http';
+  }));
+
+  return (
+    <div className="space-y-3 pt-2">
+      {/* Agent list */}
+      <div className="space-y-1">
+        {agents.map(agent => (
+          <div key={agent.key} className="flex items-center gap-3 py-1.5 text-sm">
+            <input
+              type="checkbox"
+              checked={selected.has(agent.key)}
+              onChange={() => toggle(agent.key)}
+              className="rounded border-border"
+              style={{ accentColor: 'var(--amber)' }}
+            />
+            <span className="w-28 shrink-0 text-xs">{agent.name}</span>
+            <span className="text-2xs px-1.5 py-0.5 rounded font-mono"
+              style={{ background: 'rgba(100,100,120,0.08)' }}>
+              {getEffectiveTransport(agent)}
+            </span>
+            {agent.installed ? (
+              <>
+                <span className="text-2xs px-1.5 py-0.5 rounded bg-success/15 text-success font-mono">
+                  {agent.transport}
+                </span>
+                <span className="text-2xs text-muted-foreground">{agent.scope}</span>
+              </>
+            ) : (
+              <span className="text-2xs text-muted-foreground">
+                {agent.present ? (m?.detected ?? 'Detected') : (m?.notFound ?? 'Not found')}
+              </span>
+            )}
+            {/* Scope selector */}
+            {selected.has(agent.key) && agent.hasProjectScope && agent.hasGlobalScope && (
+              <select
+                value={scopes[agent.key] || 'project'}
+                onChange={e => setScopes({ ...scopes, [agent.key]: e.target.value as 'project' | 'global' })}
+                className="ml-auto text-2xs px-1.5 py-0.5 rounded border border-border bg-background text-foreground"
+              >
+                <option value="project">{m?.project ?? 'Project'}</option>
+                <option value="global">{m?.global ?? 'Global'}</option>
+              </select>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Select detected / Clear buttons */}
+      <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)
+          ))}
+          className="px-2.5 py-1 rounded-md border transition-colors hover:bg-muted/50"
+          style={{ borderColor: 'var(--amber)', color: 'var(--amber)' }}>
+          {m?.selectDetected ?? 'Select Detected'}
+        </button>
+        <button type="button"
+          onClick={() => setSelected(new Set())}
+          className="px-2.5 py-1 rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground">
+          {m?.clearSelection ?? 'Clear'}
+        </button>
+      </div>
+
+      {/* Transport selector */}
+      <div className="flex items-center gap-4 text-xs pt-1">
+        <label className="flex items-center gap-1.5 cursor-pointer">
+          <input
+            type="radio"
+            name="transport"
+            checked={transport === 'auto'}
+            onChange={() => setTransport('auto')}
+            style={{ accentColor: 'var(--amber)' }}
+          />
+          {m?.transportAuto ?? 'auto (recommended)'}
+        </label>
+        <label className="flex items-center gap-1.5 cursor-pointer">
+          <input
+            type="radio"
+            name="transport"
+            checked={transport === 'stdio'}
+            onChange={() => setTransport('stdio')}
+            style={{ accentColor: 'var(--amber)' }}
+          />
+          {m?.transportStdio ?? 'stdio'}
+        </label>
+        <label className="flex items-center gap-1.5 cursor-pointer">
+          <input
+            type="radio"
+            name="transport"
+            checked={transport === 'http'}
+            onChange={() => setTransport('http')}
+            style={{ accentColor: 'var(--amber)' }}
+          />
+          {m?.transportHttp ?? 'http'}
+        </label>
+      </div>
+
+      {/* HTTP settings */}
+      {showHttpFields && (
+        <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"
+            />
+          </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"
+            />
+          </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"
+        style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+      >
+        {installing && <Loader2 size={12} className="animate-spin" />}
+        {installing ? (m?.installing ?? 'Installing...') : (m?.installSelected ?? 'Install Selected')}
+      </button>
+
+      {/* Message */}
+      {message && (
+        <div className="flex items-center gap-1.5 text-xs" role="status">
+          {message.type === 'success' ? (
+            <><CheckCircle2 size={12} className="text-success" /><span className="text-success">{message.text}</span></>
+          ) : (
+            <><AlertCircle size={12} className="text-destructive" /><span className="text-destructive">{message.text}</span></>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/app/components/settings/McpServerStatus.tsx

@@ -0,0 +1,172 @@
+'use client';
+
+import { useState, useEffect, useMemo } from 'react';
+import { Plug, Copy, Check, ChevronDown } from 'lucide-react';
+import type { McpStatus, AgentInfo, McpServerStatusProps } from './types';
+
+/* ── Helpers ───────────────────────────────────────────────────── */
+
+function CopyButton({ text, label, copiedLabel }: { text: string; label: string; copiedLabel?: string }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch { /* clipboard unavailable */ }
+  };
+  return (
+    <button
+      onClick={handleCopy}
+      className="flex items-center gap-1 px-2.5 py-1 text-xs rounded-md border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+    >
+      {copied ? <Check size={11} /> : <Copy size={11} />}
+      {copied ? (copiedLabel ?? 'Copied!') : label}
+    </button>
+  );
+}
+
+/* ── Config Snippet Generator ─────────────────────────────────── */
+
+function generateConfigSnippet(
+  agent: AgentInfo,
+  status: McpStatus,
+  token?: string,
+): { snippet: string; path: string } {
+  const isRunning = status.running;
+
+  // Determine entry (stdio vs http)
+  const stdioEntry: Record<string, unknown> = { type: 'stdio', command: 'mindos', args: ['mcp'] };
+  const httpEntry: Record<string, unknown> = { url: status.endpoint };
+  if (token) httpEntry.headers = { Authorization: `Bearer ${token}` };
+  const entry = isRunning ? httpEntry : stdioEntry;
+
+  // TOML format (Codex)
+  if (agent.format === 'toml') {
+    const lines: string[] = [`[${agent.configKey}.mindos]`];
+    if (isRunning) {
+      lines.push(`type = "http"`);
+      lines.push(`url = "${status.endpoint}"`);
+      if (token) {
+        lines.push('');
+        lines.push(`[${agent.configKey}.mindos.headers]`);
+        lines.push(`Authorization = "Bearer ${token}"`);
+      }
+    } else {
+      lines.push(`command = "mindos"`);
+      lines.push(`args = ["mcp"]`);
+      lines.push('');
+      lines.push(`[${agent.configKey}.mindos.env]`);
+      lines.push(`MCP_TRANSPORT = "stdio"`);
+    }
+    return { snippet: lines.join('\n'), path: agent.globalPath };
+  }
+
+  // JSON with globalNestedKey (VS Code project-level uses flat key)
+  if (agent.globalNestedKey) {
+    // project-level: flat key structure
+    const projectSnippet = JSON.stringify({ [agent.configKey]: { mindos: entry } }, null, 2);
+    return { snippet: projectSnippet, path: agent.projectPath ?? agent.globalPath };
+  }
+
+  // Standard JSON
+  const snippet = JSON.stringify({ [agent.configKey]: { mindos: entry } }, null, 2);
+  return { snippet, path: agent.globalPath };
+}
+
+/* ── MCP Server Status ─────────────────────────────────────────── */
+
+export default function ServerStatus({ status, agents, t }: McpServerStatusProps) {
+  const m = t.settings?.mcp;
+  const [expanded, setExpanded] = useState(false);
+  const [selectedAgent, setSelectedAgent] = useState<string>('');
+
+  // Auto-select first installed or first detected agent
+  useEffect(() => {
+    if (agents.length > 0 && !selectedAgent) {
+      const first = agents.find(a => a.installed) ?? agents.find(a => a.present) ?? agents[0];
+      if (first) setSelectedAgent(first.key);
+    }
+  }, [agents, selectedAgent]);
+
+  if (!status) return null;
+
+  const currentAgent = agents.find(a => a.key === selectedAgent);
+  // 🟡 MINOR #9: Memoize snippet generation to avoid recomputing on every render
+  const snippetResult = useMemo(() => currentAgent ? generateConfigSnippet(currentAgent, status) : null, [currentAgent, status]);
+
+  return (
+    <div>
+      {/* Summary line — always visible */}
+      <button
+        type="button"
+        onClick={() => setExpanded(!expanded)}
+        className="w-full flex items-center gap-2.5 text-xs"
+      >
+        <Plug size={14} className="text-muted-foreground shrink-0" />
+        <span className={`inline-block w-1.5 h-1.5 rounded-full shrink-0 ${status.running ? 'bg-success' : 'bg-muted-foreground'}`} />
+        <span className="text-foreground font-medium">
+          {status.running ? (m?.running ?? 'Running') : (m?.stopped ?? 'Stopped')}
+        </span>
+        {status.running && (
+          <>
+            <span className="text-muted-foreground">·</span>
+            <span className="font-mono text-muted-foreground">{status.transport.toUpperCase()}</span>
+            <span className="text-muted-foreground">·</span>
+            <span className="text-muted-foreground">{m?.toolsRegistered ? m.toolsRegistered(status.toolCount) : `${status.toolCount} tools`}</span>
+            <span className="text-muted-foreground">·</span>
+            <span className={status.authConfigured ? 'text-success' : 'text-muted-foreground'}>
+              {status.authConfigured ? (m?.authSet ?? 'Token set') : (m?.authNotSet ?? 'No token')}
+            </span>
+          </>
+        )}
+        <ChevronDown size={12} className={`ml-auto text-muted-foreground transition-transform shrink-0 ${expanded ? 'rotate-180' : ''}`} />
+      </button>
+
+      {/* Expanded details */}
+      {expanded && (
+        <div className="pt-3 mt-3 border-t border-border space-y-3">
+          {/* Endpoint + copy */}
+          <div className="flex items-center gap-2 text-xs">
+            <span className="text-muted-foreground shrink-0">{m?.endpoint ?? 'Endpoint'}</span>
+            <span className="font-mono text-foreground truncate">{status.endpoint}</span>
+            <CopyButton text={status.endpoint} label={m?.copyEndpoint ?? 'Copy'} copiedLabel={m?.copied} />
+          </div>
+
+          {/* Quick Setup */}
+          {agents.length > 0 && (
+            <div className="space-y-2.5">
+              <div className="flex items-center gap-2 text-xs">
+                <span className="text-muted-foreground shrink-0">{m?.configureFor ?? 'Configure for'}</span>
+                <select
+                  value={selectedAgent}
+                  onChange={e => setSelectedAgent(e.target.value)}
+                  className="text-xs px-2 py-1 rounded-md border border-border bg-background text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                >
+                  {agents.map(a => (
+                    <option key={a.key} value={a.key}>
+                      {a.name}{a.installed ? ' ✓' : a.present ? ' ·' : ''}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {snippetResult && (
+                <>
+                  <div className="flex items-center gap-2 text-xs">
+                    <span className="text-muted-foreground shrink-0">{m?.configPath ?? 'Config path'}</span>
+                    <span className="font-mono text-foreground text-2xs">{snippetResult.path}</span>
+                  </div>
+                  <pre className="text-xs font-mono bg-muted/50 border border-border rounded-lg p-3 overflow-x-auto whitespace-pre">
+                    {snippetResult.snippet}
+                  </pre>
+                  <CopyButton text={snippetResult.snippet} label={m?.copyConfig ?? 'Copy Config'} copiedLabel={m?.copied} />
+                </>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}