@geminilight/mindos 0.6.72 → 0.6.73

package/_standalone/components/settings/McpExternalTools.tsx

@@ -0,0 +1,252 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { Loader2, ChevronDown, ChevronRight, Wrench, Zap, Shield } from 'lucide-react';
+import { toast } from '@/lib/toast';
+import { apiFetch } from '@/lib/api';
+
+interface ToolInfo {
+  name: string;
+  description: string;
+}
+
+interface ServerInfo {
+  name: string;
+  toolCount: number;
+  tools: ToolInfo[];
+  directTools: boolean | string[] | false;
+  lifecycle: string;
+  cached: boolean;
+}
+
+type DirectMode = 'proxy' | 'all' | 'select';
+
+function getMode(dt: boolean | string[] | false): DirectMode {
+  if (dt === true) return 'all';
+  if (Array.isArray(dt) && dt.length > 0) return 'select';
+  return 'proxy';
+}
+
+function getSelectedTools(dt: boolean | string[] | false): Set<string> {
+  if (Array.isArray(dt)) return new Set(dt);
+  return new Set();
+}
+
+export default function McpExternalTools() {
+  const [servers, setServers] = useState<ServerInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [expanded, setExpanded] = useState<string | null>(null);
+  const [saving, setSaving] = useState<string | null>(null);
+
+  const fetchTools = useCallback(async () => {
+    try {
+      const data = await apiFetch<{ servers: ServerInfo[] }>('/api/mcp/tools');
+      setServers(data.servers);
+    } catch {
+      // No MCP config or servers — show empty state
+      setServers([]);
+    }
+    setLoading(false);
+  }, []);
+
+  useEffect(() => { fetchTools(); }, [fetchTools]);
+
+  const handleModeChange = async (serverName: string, mode: DirectMode, selected?: string[]) => {
+    setSaving(serverName);
+    try {
+      const directTools = mode === 'all' ? true : mode === 'select' ? (selected ?? []) : false;
+      await apiFetch('/api/mcp/direct-tools', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ server: serverName, directTools }),
+      });
+      setServers((prev) =>
+        prev.map((s) => s.name === serverName ? { ...s, directTools } : s),
+      );
+      toast.success('Saved');
+    } catch {
+      toast.error('Failed to save');
+    }
+    setSaving(null);
+  };
+
+  const handleToggleTool = async (serverName: string, toolName: string, checked: boolean) => {
+    const server = servers.find((s) => s.name === serverName);
+    if (!server) return;
+    const current = getSelectedTools(server.directTools);
+    if (checked) current.add(toolName); else current.delete(toolName);
+    const selected = [...current];
+    await handleModeChange(serverName, selected.length > 0 ? 'select' : 'proxy', selected);
+  };
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-4">
+        <Loader2 size={16} className="animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (servers.length === 0) {
+    return (
+      <div className="px-1 py-3">
+        <p className="text-xs text-muted-foreground">
+          No external MCP servers configured. Add servers to <code className="text-2xs bg-muted px-1 py-0.5 rounded">~/.mindos/mcp.json</code> to get started.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1.5">
+      {servers.map((server) => {
+        const mode = getMode(server.directTools);
+        const selected = getSelectedTools(server.directTools);
+        const isExpanded = expanded === server.name;
+        const isSaving = saving === server.name;
+
+        return (
+          <div key={server.name} className="border border-border rounded-lg overflow-hidden">
+            {/* Server header */}
+            <button
+              type="button"
+              onClick={() => setExpanded(isExpanded ? null : server.name)}
+              className="w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-muted/30 transition-colors"
+            >
+              {isExpanded
+                ? <ChevronDown size={12} className="text-muted-foreground shrink-0" />
+                : <ChevronRight size={12} className="text-muted-foreground shrink-0" />}
+              <span className="text-xs font-semibold text-foreground truncate">{server.name}</span>
+              <span className="text-2xs text-muted-foreground">
+                {server.toolCount} {server.toolCount === 1 ? 'tool' : 'tools'}
+              </span>
+              <div className="flex-1" />
+              <ModeBadge mode={mode} count={selected.size} />
+              {isSaving && <Loader2 size={12} className="animate-spin text-muted-foreground" />}
+            </button>
+
+            {/* Expanded panel */}
+            {isExpanded && (
+              <div className="border-t border-border bg-muted/10 px-3 py-2.5 space-y-2.5">
+                {/* Mode selector */}
+                <div className="flex items-center gap-1.5">
+                  <ModeButton
+                    active={mode === 'proxy'}
+                    onClick={() => handleModeChange(server.name, 'proxy')}
+                    icon={<Shield size={11} />}
+                    label="Proxy only"
+                  />
+                  <ModeButton
+                    active={mode === 'all'}
+                    onClick={() => handleModeChange(server.name, 'all')}
+                    icon={<Zap size={11} />}
+                    label="All direct"
+                  />
+                  <ModeButton
+                    active={mode === 'select'}
+                    onClick={() => {
+                      if (mode !== 'select') {
+                        handleModeChange(server.name, 'select', []);
+                      }
+                    }}
+                    icon={<Wrench size={11} />}
+                    label="Select"
+                  />
+                </div>
+
+                {/* Tool list (shown for 'select' mode or expanded) */}
+                {server.tools.length > 0 && (mode === 'select' || mode === 'all') && (
+                  <div className="space-y-0.5 max-h-48 overflow-y-auto">
+                    {server.tools.map((tool) => {
+                      const isChecked = mode === 'all' || selected.has(tool.name);
+                      return (
+                        <label
+                          key={tool.name}
+                          className="flex items-start gap-2 px-2 py-1 rounded hover:bg-muted/30 cursor-pointer"
+                        >
+                          <input
+                            type="checkbox"
+                            checked={isChecked}
+                            disabled={mode === 'all'}
+                            onChange={(e) => handleToggleTool(server.name, tool.name, e.target.checked)}
+                            className="mt-0.5 w-3 h-3 rounded accent-[var(--amber)] cursor-pointer"
+                          />
+                          <div className="min-w-0">
+                            <span className="text-xs font-mono text-foreground">{tool.name}</span>
+                            {tool.description && (
+                              <p className="text-2xs text-muted-foreground line-clamp-1">{tool.description}</p>
+                            )}
+                          </div>
+                        </label>
+                      );
+                    })}
+                  </div>
+                )}
+
+                {/* No cached tools hint */}
+                {!server.cached && (
+                  <p className="text-2xs text-muted-foreground italic">
+                    Tool list not yet cached. Tools will appear after the first connection.
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+        );
+      })}
+
+      {/* Info text */}
+      <p className="text-2xs text-muted-foreground px-1 pt-1 leading-relaxed">
+        <strong>Direct</strong> tools (~150 tokens each) can be called directly by the agent.{' '}
+        <strong>Proxy</strong> tools (~200 tokens total) require <code className="text-2xs bg-muted px-0.5 rounded">mcp(&#123;search/call&#125;)</code> but save context.{' '}
+        Changes take effect on the next agent session.
+      </p>
+    </div>
+  );
+}
+
+/* ── Sub-components ── */
+
+function ModeBadge({ mode, count }: { mode: DirectMode; count: number }) {
+  if (mode === 'all') {
+    return (
+      <span className="text-2xs px-1.5 py-0.5 rounded-full bg-[var(--amber-subtle)] text-[var(--amber-text)] font-medium leading-none">
+        All direct
+      </span>
+    );
+  }
+  if (mode === 'select' && count > 0) {
+    return (
+      <span className="text-2xs px-1.5 py-0.5 rounded-full bg-[var(--amber-subtle)] text-[var(--amber-text)] font-medium leading-none">
+        {count} direct
+      </span>
+    );
+  }
+  return (
+    <span className="text-2xs px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground font-medium leading-none">
+      Proxy only
+    </span>
+  );
+}
+
+function ModeButton({ active, onClick, icon, label }: {
+  active: boolean;
+  onClick: () => void;
+  icon: React.ReactNode;
+  label: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`flex items-center gap-1 px-2 py-1 rounded-md text-2xs font-medium transition-colors ${
+        active
+          ? 'bg-[var(--amber-subtle)] text-[var(--amber-text)] border border-[var(--amber)]/30'
+          : 'bg-muted/50 text-muted-foreground border border-border/50 hover:bg-muted hover:text-foreground'
+      }`}
+    >
+      {icon}
+      {label}
+    </button>
+  );
+}

package/_standalone/components/settings/McpPortSection.tsx

@@ -0,0 +1,207 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { Loader2, AlertTriangle, CheckCircle2, Settings } from 'lucide-react';
+import { apiFetch } from '@/lib/api';
+import { toast } from '@/lib/toast';
+
+/* ── Types ─────────────────────────────────────────────────────── */
+
+interface PortStatus {
+  checking: boolean;
+  available: boolean | null;
+  isSelf: boolean;
+  suggestion: number | null;
+  invalid?: boolean;
+}
+
+interface CheckPortResult {
+  available: boolean;
+  isSelf?: boolean;
+  suggestion?: number | null;
+}
+
+const EMPTY_STATUS: PortStatus = { checking: false, available: null, isSelf: false, suggestion: null };
+
+/* ── McpPortSection (compact, inline) ──────────────────────────── */
+
+export default function McpPortSection({ m }: { m: Record<string, any> }) {
+  const [origPort, setOrigPort] = useState<number>(0);
+  const [port, setPort] = useState<number>(0);
+  const [status, setStatus] = useState<PortStatus>(EMPTY_STATUS);
+  const [updating, setUpdating] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const pollRef = useRef<ReturnType<typeof setInterval>>(undefined);
+
+  useEffect(() => {
+    apiFetch<{ mcpPort?: number }>('/api/settings').then(d => {
+      const p = d.mcpPort || 8781;
+      setOrigPort(p);
+      setPort(p);
+    }).catch(() => {});
+  }, []);
+
+  useEffect(() => () => { clearTimeout(timerRef.current); clearInterval(pollRef.current); }, []);
+
+  const hasChanges = port !== origPort;
+  const portInvalid = port < 1024 || port > 65535;
+  const portUnavailable = status.checking || (status.available === false && !status.isSelf);
+
+  const checkPort = useCallback(async (p: number) => {
+    if (p < 1024 || p > 65535) {
+      setStatus({ ...EMPTY_STATUS, available: false, invalid: true });
+      return;
+    }
+    setStatus({ ...EMPTY_STATUS, checking: true });
+    try {
+      const res = await apiFetch<CheckPortResult>('/api/setup/check-port', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ port: p }),
+      });
+      setStatus({
+        checking: false,
+        available: res.available,
+        isSelf: res.isSelf ?? false,
+        suggestion: res.suggestion ?? null,
+      });
+    } catch {
+      setStatus(EMPTY_STATUS);
+    }
+  }, []);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const v = parseInt(e.target.value, 10) || port;
+    setPort(v);
+    setStatus(EMPTY_STATUS);
+    clearTimeout(timerRef.current);
+    if (v >= 1024 && v <= 65535) {
+      timerRef.current = setTimeout(() => checkPort(v), 500);
+    }
+  };
+
+  const handleBlur = () => {
+    clearTimeout(timerRef.current);
+    if (port >= 1024 && port <= 65535) checkPort(port);
+  };
+
+  const handleUpdate = async () => {
+    if (!hasChanges || portInvalid || portUnavailable || updating) return;
+
+    setUpdating(true);
+    try {
+      const res = await apiFetch<CheckPortResult>('/api/setup/check-port', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ port }),
+      });
+      if (!res.available && !res.isSelf) {
+        setStatus({ checking: false, available: false, isSelf: false, suggestion: res.suggestion ?? null });
+        setUpdating(false);
+        toast.error(m.portInUse(port));
+        return;
+      }
+
+      await apiFetch('/api/settings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ mcpPort: port }),
+      });
+
+      try {
+        await apiFetch('/api/mcp/restart', { method: 'POST' });
+      } catch {
+        setUpdating(false);
+        toast.error(m.portUpdateFailed);
+        return;
+      }
+
+      const deadline = Date.now() + 60_000;
+      pollRef.current = setInterval(async () => {
+        if (Date.now() > deadline) {
+          clearInterval(pollRef.current);
+          setUpdating(false);
+          toast.error(m.portRestartTimeout);
+          return;
+        }
+        try {
+          const s = await apiFetch<{ running: boolean; port: number }>('/api/mcp/status', { timeout: 3000 });
+          if (s.running) {
+            clearInterval(pollRef.current);
+            setUpdating(false);
+            setOrigPort(port);
+            toast.success(m.portUpdateSuccess);
+          }
+        } catch { /* keep polling */ }
+      }, 3000);
+    } catch {
+      setUpdating(false);
+      toast.error(m.portUpdateFailed);
+    }
+  };
+
+  if (origPort === 0) return null;
+
+  return (
+    <div className="rounded-lg border border-border overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2 bg-muted/30">
+        <Settings size={11} className="text-muted-foreground" />
+        <span className="text-xs font-medium text-muted-foreground">{m.mcpPortLabel}</span>
+      </div>
+      <div className="px-3 py-2.5 space-y-2">
+        <div className="flex items-center gap-2">
+          <input
+            type="number" min={1024} max={65535} value={port}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            className="flex-1 px-2.5 py-1.5 text-sm rounded-lg border border-border bg-muted/30 text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring tabular-nums"
+          />
+          <button
+            type="button"
+            onClick={handleUpdate}
+            disabled={!hasChanges || portInvalid || portUnavailable || updating}
+            className="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors shrink-0
+              bg-[var(--amber)] text-[var(--amber-foreground)]
+              hover:opacity-90
+              disabled:opacity-40 disabled:cursor-not-allowed
+              focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {updating ? <Loader2 size={12} className="animate-spin" /> : (m.portUpdateBtn)}
+          </button>
+        </div>
+
+        {/* Status feedback */}
+        {status.checking && (
+          <p className="text-2xs flex items-center gap-1 text-muted-foreground">
+            <Loader2 size={10} className="animate-spin" /> {m.portChecking}
+          </p>
+        )}
+        {!status.checking && status.available === false && !status.invalid && (
+          <div className="flex items-center gap-2">
+            <p className="text-2xs flex items-center gap-1 text-[var(--amber)]">
+              <AlertTriangle size={10} /> {m.portInUse(port)}
+            </p>
+            {status.suggestion !== null && (
+              <button type="button"
+                onClick={() => { setPort(status.suggestion!); setStatus(EMPTY_STATUS); setTimeout(() => checkPort(status.suggestion!), 0); }}
+                className="text-2xs px-1.5 py-0.5 rounded border border-[var(--amber)] text-[var(--amber)] transition-colors hover:bg-[var(--amber-subtle)]"
+              >
+                {m.portSuggest(status.suggestion)}
+              </button>
+            )}
+          </div>
+        )}
+        {!status.checking && status.invalid && (
+          <p className="text-2xs flex items-center gap-1 text-destructive">
+            <AlertTriangle size={10} /> 1024 – 65535
+          </p>
+        )}
+        {!status.checking && status.available === true && (
+          <p className="text-2xs flex items-center gap-1 text-success">
+            <CheckCircle2 size={10} /> {status.isSelf ? m.portSelf : m.portAvailable}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

package/_standalone/components/settings/McpSkillCreateForm.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import { useState } from 'react';
+import { X, Plus, Loader2, AlertCircle } from 'lucide-react';
+
+const skillFrontmatter = (n: string) => `---
+name: ${n}
+description: >
+  Describe WHEN the agent should use this
+  skill. Be specific about trigger conditions.
+---`;
+
+const SKILL_TEMPLATES: Record<string, (name: string) => string> = {
+  general: (n) => `${skillFrontmatter(n)}
+
+# Instructions
+
+## Context
+<!-- Background knowledge for the agent -->
+
+## Steps
+1.
+2.
+
+## Rules
+<!-- Constraints, edge cases, formats -->
+- `,
+
+  'tool-use': (n) => `${skillFrontmatter(n)}
+
+# Instructions
+
+## Available Tools
+<!-- List tools the agent can use -->
+-
+
+## When to Use
+<!-- Conditions that trigger this skill -->
+
+## Output Format
+<!-- Expected response structure -->
+`,
+
+  workflow: (n) => `${skillFrontmatter(n)}
+
+# Instructions
+
+## Trigger
+<!-- What triggers this workflow -->
+
+## Steps
+1.
+2.
+
+## Validation
+<!-- How to verify success -->
+
+## Rollback
+<!-- What to do on failure -->
+`,
+};
+
+interface SkillCreateFormProps {
+  onSave: (name: string, content: string) => Promise<void>;
+  onCancel: () => void;
+  saving: boolean;
+  error: string;
+  m: Record<string, any> | undefined;
+}
+
+export default function SkillCreateForm({ onSave, onCancel, saving, error, m }: SkillCreateFormProps) {
+  const [newName, setNewName] = useState('');
+  const [newContent, setNewContent] = useState('');
+  const [selectedTemplate, setSelectedTemplate] = useState<'general' | 'tool-use' | 'workflow'>('general');
+
+  const getTemplate = (skillName: string, tmpl?: 'general' | 'tool-use' | 'workflow') => {
+    const key = tmpl || selectedTemplate;
+    const fn = SKILL_TEMPLATES[key] || SKILL_TEMPLATES.general;
+    return fn(skillName || 'my-skill');
+  };
+
+  const handleNameChange = (val: string) => {
+    const cleaned = val.toLowerCase().replace(/[^a-z0-9-]/g, '');
+    const oldTemplate = getTemplate(newName || 'my-skill');
+    if (!newContent || newContent === oldTemplate) {
+      setNewContent(getTemplate(cleaned || 'my-skill'));
+    }
+    setNewName(cleaned);
+  };
+
+  const handleTemplateChange = (tmpl: 'general' | 'tool-use' | 'workflow') => {
+    const oldTemplate = getTemplate(newName || 'my-skill', selectedTemplate);
+    setSelectedTemplate(tmpl);
+    if (!newContent || newContent === oldTemplate) {
+      setNewContent(getTemplate(newName || 'my-skill', tmpl));
+    }
+  };
+
+  // Initialize content on first render
+  if (!newContent) {
+    // Use a timeout-free approach: set default on next tick won't work in render.
+    // Instead, initialize via useState default or useEffect. For simplicity, set inline.
+  }
+
+  return (
+    <div className="border border-border rounded-lg p-3 space-y-2">
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-medium">{m?.addSkill ?? '+ Add Skill'}</span>
+        <button onClick={onCancel} className="p-0.5 rounded hover:bg-muted text-muted-foreground">
+          <X size={12} />
+        </button>
+      </div>
+      <div className="space-y-1">
+        <label className="text-2xs text-muted-foreground">{m?.skillName ?? 'Name'}</label>
+        <input
+          type="text"
+          value={newName}
+          onChange={e => handleNameChange(e.target.value)}
+          placeholder="my-skill"
+          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-2xs text-muted-foreground">{m?.skillTemplate ?? 'Template'}</label>
+        <div className="flex rounded-md border border-border overflow-hidden w-fit">
+          {(['general', 'tool-use', 'workflow'] as const).map((tmpl, i) => (
+            <button
+              key={tmpl}
+              onClick={() => handleTemplateChange(tmpl)}
+              className={`px-2.5 py-1 text-xs transition-colors ${i > 0 ? 'border-l border-border' : ''} ${
+                selectedTemplate === tmpl
+                  ? 'bg-[var(--amber-subtle)] text-[var(--amber-text)] font-medium'
+                  : 'text-muted-foreground hover:bg-muted'
+              }`}
+            >
+              {tmpl === 'general' ? (m?.skillTemplateGeneral ?? 'General')
+                : tmpl === 'tool-use' ? (m?.skillTemplateToolUse ?? 'Tool-use')
+                : (m?.skillTemplateWorkflow ?? 'Workflow')}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="space-y-1">
+        <label className="text-2xs text-muted-foreground">{m?.skillContent ?? 'Content'}</label>
+        <textarea
+          value={newContent || getTemplate(newName || 'my-skill')}
+          onChange={e => setNewContent(e.target.value)}
+          rows={16}
+          placeholder="Skill instructions (markdown)..."
+          className="w-full px-2.5 py-1.5 text-xs rounded-md border border-border bg-background text-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring resize-y font-mono"
+        />
+      </div>
+      {error && (
+        <p className="text-2xs text-destructive flex items-center gap-1">
+          <AlertCircle size={10} />
+          {error}
+        </p>
+      )}
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => onSave(newName.trim(), newContent || getTemplate(newName.trim() || 'my-skill'))}
+          disabled={!newName.trim() || saving}
+          className="flex items-center gap-1 px-2.5 py-1 text-xs rounded-md disabled:opacity-40 disabled:cursor-not-allowed transition-colors bg-[var(--amber)] text-[var(--amber-foreground)]"
+        >
+          {saving && <Loader2 size={10} className="animate-spin" />}
+          {m?.saveSkill ?? 'Save'}
+        </button>
+        <button
+          onClick={onCancel}
+          className="px-2.5 py-1 text-xs rounded-md border border-border text-muted-foreground hover:text-foreground transition-colors"
+        >
+          {m?.cancelSkill ?? 'Cancel'}
+        </button>
+      </div>
+    </div>
+  );
+}