@geminilight/mindos 0.6.74 → 0.6.75

package/_standalone/components/settings/McpConnectGuides.tsx

@@ -0,0 +1,439 @@
+'use client';
+
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { AlertCircle, Check, CheckCircle2, ChevronDown, ChevronRight, Code2, Copy, Globe, Link2, Loader2, Monitor, Plug, RefreshCw, RotateCcw, Terminal, Users, Wifi, WifiOff } from 'lucide-react';
+import type { McpStatus, AgentInfo, McpTabProps, ConnectionMode } from './types';
+import type { Messages } from '@/lib/i18n';
+import { toast } from '@/lib/toast';
+import { useMcpData } from '@/lib/stores/mcp-store';
+import { generateSnippet } from '@/lib/mcp-snippets';
+import { copyToClipboard } from '@/lib/clipboard';
+import CustomSelect from '@/components/CustomSelect';
+import type { SelectItem } from '@/components/CustomSelect';
+import AgentInstall from './McpAgentInstall';
+import McpPortSection from './McpPortSection';
+
+export function useCopyField() {
+  const [copiedField, setCopiedField] = useState<string | null>(null);
+  useEffect(() => {
+    if (!copiedField) return;
+    const timer = setTimeout(() => setCopiedField(null), 2000);
+    return () => clearTimeout(timer);
+  }, [copiedField]);
+  const handleCopy = useCallback(async (text: string, field: string) => {
+    if (!text) return;
+    const ok = await copyToClipboard(text);
+    if (ok) { setCopiedField(field); toast.copy(); }
+  }, []);
+  return { copiedField, handleCopy };
+}
+
+/* ── Connect Card — header + CLI/MCP tabs + detected agents ── */
+
+export default 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;
+  agents: AgentInfo[];
+  connectedAgents: AgentInfo[];
+  detectedAgents: AgentInfo[];
+  notFoundAgents: AgentInfo[];
+  currentAgent: AgentInfo | null;
+  selectedAgent: string;
+  onSelectAgent: (key: string) => void;
+  restarting: boolean;
+  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 */}
+      <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">
+          <Link2 size={14} className="text-[var(--amber)]" />
+        </div>
+        <h3 className="text-sm font-semibold text-foreground">{m?.connectionTitle ?? 'Connect Agents'}</h3>
+      </div>
+
+      {/* 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="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>
+        </div>
+      )}
+
+      {/* Tab content */}
+      <div className="px-4 pb-4 space-y-4">
+        {effectiveMode === 'cli' ? (
+          <CliGuide status={status} activeSkillName={activeSkillName} agents={agents} connectedAgents={connectedAgents} detectedAgents={detectedAgents} notFoundAgents={notFoundAgents} onRefresh={onRefresh} m={m} t={t} />
+        ) : (
+          <McpGuide
+            status={status} agents={agents} activeSkillName={activeSkillName}
+            connectedAgents={connectedAgents} detectedAgents={detectedAgents} notFoundAgents={notFoundAgents}
+            currentAgent={currentAgent} selectedAgent={selectedAgent} onSelectAgent={onSelectAgent}
+            restarting={restarting} onRestart={onRestart} onRefresh={onRefresh} m={m} t={t}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ── CLI Guide (local + remote setup) ── */
+
+function CliGuide({ status, activeSkillName, agents, connectedAgents, detectedAgents, notFoundAgents, onRefresh, m, t }: {
+  status: McpStatus; activeSkillName: string; agents: AgentInfo[]; connectedAgents: AgentInfo[]; detectedAgents: AgentInfo[]; notFoundAgents: AgentInfo[];
+  onRefresh: () => void; m: Record<string, any> | undefined; t: McpTabProps['t'];
+}) {
+  const { copiedField, handleCopy } = useCopyField();
+
+  const hasToken = status.authConfigured && !!status.authToken;
+  const remoteHost = status.localIP || 'localhost';
+  const webPort = typeof window !== 'undefined' ? window.location.port || '3456' : '3456';
+  const remoteUrl = `http://${remoteHost}:${webPort}`;
+  const maskedAuthToken = status.maskedToken ?? '';
+
+  return (
+    <>
+      {/* Local */}
+      <div className="space-y-2.5">
+        <div className="flex items-center gap-2">
+          <Monitor size={12} className="text-success" />
+          <span className="text-xs font-semibold text-foreground">{m?.localTitle ?? 'Local'}</span>
+          <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-2xs font-medium bg-success/10 text-success">
+            <CheckCircle2 size={10} />
+            {m?.localReady ?? 'Ready to use'}
+          </span>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          {m?.cliLocalDesc ?? 'MindOS Skill is built-in. Install the CLI and you\'re good to go.'}
+        </p>
+        <CodeBlock code="mindos file list" label={m?.cliSkillVerify ?? 'Verify'} onCopy={handleCopy} copiedField={copiedField} fieldId="cli-verify" />
+
+        {/* Detected Agents — install Skill locally */}
+        {agents.length > 0 && (
+          <InlineCollapsible
+            icon={<Users size={12} className="text-muted-foreground" />}
+            title={m?.detectedAgentsTitle ?? 'Detected Agents'}
+            badge={`${connectedAgents.length + detectedAgents.length}/${agents.length}`}
+          >
+            <AgentInstall agents={agents} t={t} onRefresh={onRefresh} mode="cli" activeSkillName={activeSkillName} />
+          </InlineCollapsible>
+        )}
+      </div>
+
+      {/* Remote */}
+      <div className="border-t border-border pt-3 space-y-3">
+        <div className="flex items-center gap-2">
+          <Globe size={12} className="text-muted-foreground" />
+          <span className="text-xs font-semibold text-foreground">{m?.remoteTitle ?? 'Remote Access'}</span>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          {m?.cliRemoteDesc ?? 'Install the CLI on another machine and connect to this MindOS server.'}
+        </p>
+        <StepBlock step="1" label={m?.cliSkillInstall ?? 'Install'}>
+          <CodeBlock code="npm install -g @geminilight/mindos" onCopy={handleCopy} copiedField={copiedField} fieldId="cli-install" compact />
+        </StepBlock>
+        <StepBlock step="2" label={m?.cliRemoteConfigure ?? 'Configure'}>
+          <div className="space-y-1">
+            <CodeBlock code={`mindos config set url ${remoteUrl}`} onCopy={handleCopy} copiedField={copiedField} fieldId="cli-url" compact />
+            <CodeBlock
+              code={`mindos config set authToken ${hasToken ? maskedAuthToken : '<token>'}`}
+              onCopy={(_, field) => {
+                handleCopy(`mindos config set authToken ${status.authToken ?? '<token>'}`, field);
+              }}
+              copiedField={copiedField} fieldId="cli-token" compact
+              hint={hasToken ? (m?.tokenCopyFullHint ?? 'Copies full token') : undefined}
+            />
+          </div>
+        </StepBlock>
+        <StepBlock step="3" label={m?.cliInstallSkill ?? 'Install Skill'}>
+          <CodeBlock code={`npx skills add GeminiLight/MindOS --skill ${activeSkillName} -g -y`} onCopy={handleCopy} copiedField={copiedField} fieldId="cli-skill" compact />
+        </StepBlock>
+        <StepBlock step="4" label={m?.cliSkillVerify ?? 'Verify'}>
+          <CodeBlock code="mindos file list" onCopy={handleCopy} copiedField={copiedField} fieldId="cli-remote-verify" compact />
+        </StepBlock>
+      </div>
+    </>
+  );
+}
+
+/* ── MCP Guide (status + snippets + remote) ── */
+
+function McpGuide({ status, agents, activeSkillName, connectedAgents, detectedAgents, notFoundAgents, currentAgent, selectedAgent, onSelectAgent, restarting, onRestart, onRefresh, m, t }: {
+  status: McpStatus;
+  agents: AgentInfo[];
+  activeSkillName: string;
+  connectedAgents: AgentInfo[];
+  detectedAgents: AgentInfo[];
+  notFoundAgents: AgentInfo[];
+  currentAgent: AgentInfo | null;
+  selectedAgent: string;
+  onSelectAgent: (key: string) => void;
+  restarting: boolean;
+  onRestart: () => void;
+  onRefresh: () => void;
+  m: Record<string, any> | undefined;
+  t: McpTabProps['t'];
+}) {
+  const { copiedField, handleCopy } = useCopyField();
+
+  const hasToken = status.authConfigured && !!status.authToken;
+  const remoteHost = status.localIP || 'localhost';
+  const mcpUrl = `http://${remoteHost}:${status.port}/mcp`;
+
+  const localSnippet = useMemo(
+    () => currentAgent ? generateSnippet(currentAgent, status, 'stdio') : null,
+    [currentAgent, status]
+  );
+  const remoteSnippet = useMemo(
+    () => currentAgent ? generateSnippet(currentAgent, status, 'http') : null,
+    [currentAgent, status]
+  );
+
+  return (
+    <>
+      {/* MCP Status */}
+      <McpStatusInline status={status} restarting={restarting} onRestart={onRestart} onRefresh={onRefresh} m={m} />
+
+      {/* MCP Port Configuration */}
+      {m && <McpPortSection m={m} />}
+
+      {/* Local (stdio) */}
+      <div className="space-y-2.5">
+        <div className="flex items-center gap-2">
+          <Monitor size={12} className={status.running ? 'text-success' : 'text-muted-foreground'} />
+          <span className="text-xs font-semibold text-foreground">{m?.localTitle ?? 'Local'}</span>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          {m?.mcpLocalDesc ?? 'Copy the config snippet and paste into your agent\'s MCP settings.'}
+        </p>
+        {agents.length > 0 && (
+          <div className="space-y-3">
+            <CustomSelect
+              value={selectedAgent}
+              onChange={onSelectAgent}
+              options={[
+                ...(connectedAgents.length > 0 ? [{ label: m?.connectedGroup ?? 'Connected', options: connectedAgents.map(a => ({ value: a.key, label: a.name })) }] : []),
+                ...(detectedAgents.length > 0 ? [{ label: m?.detectedGroup ?? 'Detected', options: detectedAgents.map(a => ({ value: a.key, label: a.name })) }] : []),
+                ...(notFoundAgents.length > 0 ? [{ label: m?.notFoundGroup ?? 'Not Installed', options: notFoundAgents.map(a => ({ value: a.key, label: a.name })) }] : []),
+              ] as SelectItem[]}
+            />
+            {currentAgent && localSnippet && (
+              <>
+                {currentAgent.present && currentAgent.installed && (
+                  <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-2xs font-medium bg-success/10 text-success">
+                    <CheckCircle2 size={10} /> {m?.tagConnected ?? 'Connected'}
+                  </span>
+                )}
+                <pre className="text-[11px] font-mono bg-muted/50 border border-border rounded-lg p-3 overflow-x-auto whitespace-pre select-all max-h-[200px] overflow-y-auto">
+                  {localSnippet.displaySnippet}
+                </pre>
+                <div className="flex items-center gap-3 text-sm">
+                  <button onClick={async () => { const ok = await copyToClipboard(localSnippet.snippet); if (ok) toast.copy(); }}
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0">
+                    <Copy size={14} /> {m?.copyConfig ?? 'Copy'}
+                  </button>
+                  <span className="text-muted-foreground">→</span>
+                  <span className="font-mono text-muted-foreground truncate text-2xs">{localSnippet.path}</span>
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Detected Agents — install MCP config + Skill locally */}
+      {agents.length > 0 && (
+        <InlineCollapsible
+          icon={<Users size={12} className="text-muted-foreground" />}
+          title={m?.detectedAgentsTitle ?? 'Detected Agents'}
+          badge={`${connectedAgents.length + detectedAgents.length}/${agents.length}`}
+        >
+          <AgentInstall agents={agents} t={t} onRefresh={onRefresh} mode="mcp" activeSkillName={activeSkillName} />
+        </InlineCollapsible>
+      )}
+
+      {/* Remote */}
+      <div className="border-t border-border pt-3 space-y-3">
+        <div className="flex items-center gap-2">
+          <Globe size={12} className="text-muted-foreground" />
+          <span className="text-xs font-semibold text-foreground">{m?.remoteTitle ?? 'Remote Access'}</span>
+        </div>
+        {!hasToken && (
+          <p className="flex items-center gap-1.5 text-xs text-[var(--amber-text)]">
+            <AlertCircle size={12} /> {m?.noAuthWarning ?? 'Set an Auth Token in Settings → General before enabling remote access.'}
+          </p>
+        )}
+        <div className="space-y-1">
+          <span className="text-2xs font-medium text-muted-foreground uppercase tracking-wider">{m?.serverUrl ?? 'MCP Server URL'}</span>
+          <div className="flex items-center gap-2 px-2.5 py-1.5 bg-muted/50 border border-border rounded-lg">
+            <code className="flex-1 text-xs font-mono text-foreground select-all truncate">{mcpUrl}</code>
+            <CopyButton onCopy={() => handleCopy(mcpUrl, 'mcp-url')} copied={copiedField === 'mcp-url'} size="sm" />
+          </div>
+        </div>
+        {agents.length > 0 && currentAgent && remoteSnippet && (
+          <>
+            <pre className="text-[11px] font-mono bg-muted/50 border border-border rounded-lg p-3 overflow-x-auto whitespace-pre select-all max-h-[200px] overflow-y-auto">
+              {remoteSnippet.displaySnippet}
+            </pre>
+            <div className="flex items-center gap-3 text-sm">
+              <button onClick={async () => { const ok = await copyToClipboard(remoteSnippet.snippet); if (ok) toast.copy(); }}
+                className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0">
+                <Copy size={14} /> {m?.copyConfig ?? 'Copy'}
+              </button>
+              <span className="text-muted-foreground">→</span>
+              <span className="font-mono text-muted-foreground truncate text-2xs">{remoteSnippet.path}</span>
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  );
+}
+
+/* ── Inline Collapsible (inside a card) ── */
+
+function InlineCollapsible({ icon, title, badge, defaultOpen = false, children }: {
+  icon?: React.ReactNode;
+  title: string;
+  badge?: string;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  return (
+    <div className="rounded-lg border border-border overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setOpen(v => !v)}
+        className="flex items-center gap-2 w-full px-3 py-2 text-left bg-muted/30 hover:bg-muted/60 transition-colors"
+      >
+        {open ? <ChevronDown size={11} className="text-muted-foreground" /> : <ChevronRight size={11} className="text-muted-foreground" />}
+        {icon}
+        <span className="text-xs font-medium text-muted-foreground">{title}</span>
+        {badge && <span className="text-2xs text-muted-foreground/70 ml-auto">{badge}</span>}
+      </button>
+      {open && <div className="px-3 py-2.5 border-t border-border">{children}</div>}
+    </div>
+  );
+}
+
+/* ── Step Block ── */
+
+function StepBlock({ step, label, children }: { step: string; label: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center gap-2">
+        <span className="w-4 h-4 rounded-full bg-muted flex items-center justify-center text-2xs font-semibold text-muted-foreground shrink-0">{step}</span>
+        <span className="text-2xs font-medium text-muted-foreground uppercase tracking-wider">{label}</span>
+      </div>
+      <div className="pl-6">{children}</div>
+    </div>
+  );
+}
+
+/* ── MCP Status (compact inline) ── */
+
+function McpStatusInline({ status, restarting, onRestart, onRefresh, m }: {
+  status: McpStatus; restarting: boolean; onRestart: () => void; onRefresh: () => void; m: Record<string, any> | undefined;
+}) {
+  return (
+    <div className="flex items-center justify-between px-3 py-2 rounded-lg border border-border bg-muted/30">
+      <div className="flex items-center gap-2 text-xs">
+        {restarting ? (
+          <><Loader2 size={11} className="animate-spin text-[var(--amber)]" /><span className="text-[var(--amber)]">{m?.restarting ?? 'Restarting...'}</span></>
+        ) : (
+          <>
+            <span className={`inline-block w-1.5 h-1.5 rounded-full shrink-0 ${status.running ? 'bg-success' : 'bg-muted-foreground'}`} />
+            <span className="font-medium text-foreground">MCP {status.running ? (m?.running ?? 'Running') : (m?.stopped ?? 'Stopped')}</span>
+            {status.running && <><span className="text-muted-foreground">·</span><span className="text-muted-foreground">:{status.port}</span><span className="text-muted-foreground">·</span><span className="text-muted-foreground">{status.toolCount} {m?.tools ?? 'tools'}</span></>}
+          </>
+        )}
+      </div>
+      <div className="flex items-center gap-1.5">
+        {!status.running && !restarting && (
+          <button onClick={onRestart} className="flex items-center gap-1 px-2 py-1 text-2xs rounded-md font-medium text-[var(--amber-foreground)] bg-[var(--amber)] transition-colors">
+            <RotateCcw size={11} /> {m?.restart ?? 'Restart'}
+          </button>
+        )}
+        <button onClick={onRefresh} className="p-1 rounded-md border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
+          <RefreshCw size={11} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/* ── Code Block ── */
+
+function CodeBlock({ label, code, onCopy, copiedField, fieldId, compact, hint }: {
+  label?: string; code: string; onCopy: (text: string, field: string) => void; copiedField: string | null; fieldId: string; compact?: boolean; hint?: string;
+}) {
+  return (
+    <div className={compact ? '' : 'space-y-1'}>
+      {label && <span className="text-2xs font-medium text-muted-foreground uppercase tracking-wider">{label}</span>}
+      <div className={`flex items-center gap-2 ${compact ? 'px-2.5 py-1.5' : 'px-3 py-2'} bg-muted/50 border border-border rounded-lg`}>
+        <code className="flex-1 text-xs font-mono text-foreground select-all truncate">{code}</code>
+        {hint && <span className="text-2xs text-muted-foreground/60 shrink-0 hidden sm:inline">{hint}</span>}
+        <CopyButton onCopy={() => onCopy(code, fieldId)} copied={copiedField === fieldId} size="sm" />
+      </div>
+    </div>
+  );
+}
+
+/* ── Copy Button ── */
+
+export function CopyButton({ onCopy, copied, title, size }: { onCopy: () => void; copied: boolean; title?: string; size?: 'sm' | 'md' }) {
+  const sz = size === 'sm' ? 11 : 14;
+  const pad = size === 'sm' ? 'p-1' : 'p-2';
+  return (
+    <button type="button" onClick={onCopy} title={title ?? 'Copy'}
+      className={`shrink-0 ${pad} rounded-lg border transition-colors focus-visible:ring-2 focus-visible:ring-ring ${
+        copied ? 'border-success/50 bg-success/10 text-success' : 'border-border text-muted-foreground hover:text-foreground hover:bg-muted'
+      }`}>
+      {copied ? <Check size={sz} /> : <Copy size={sz} />}
+    </button>
+  );
+}