@geminilight/mindos 0.6.73 → 0.6.74

package/_standalone/components/settings/McpExternalTools.tsx

@@ -1,252 +0,0 @@
-'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

@@ -1,207 +0,0 @@
-'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

@@ -1,177 +0,0 @@
-'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>
-  );
-}