shraga 0.0.3 → 0.1.2

package/src/client/components/ConversationPane.tsx

@@ -0,0 +1,277 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { ServerEvent } from '@/lib/ws';
+import { useConversation, type Attachment, type ChatMessage, type MessageBlock } from '@/hooks/useConversation';
+import { useArtifacts } from '@/hooks/useArtifacts';
+import { apiFetch, historyToMessages } from '@/lib/sessionApi';
+import { useWorkspace } from '@/lib/workspaceContext';
+import { useSlots, type ConversationControllerCtx } from '@/lib/slots';
+import { randomUUID } from '@/lib/utils';
+import { ChatView } from '@/components/ChatView';
+import { MessageInput, type MessageInputHandle } from '@/components/MessageInput';
+import { ArtifactPanel } from '@/components/ArtifactPanel';
+import { ConversationHeader } from '@/components/ConversationHeader';
+
+interface SessionDirectives {
+  model?: string;
+  turns?: number;
+  thinking?: string;
+  engine?: string;
+}
+
+/**
+ * A single live conversation. Owns its own message stream, artifacts, and session metadata — all
+ * scoped to `sessionId` — over the shared socket from {@link useWorkspace}. The core wires chat only;
+ * optional add-on extensions live behind {@link ClientSlots}, filled by an add-on build.
+ */
+export function ConversationPane({ nodeId, sessionId }: { nodeId: string; sessionId?: string }) {
+  const ws = useWorkspace();
+  const slots = useSlots();
+  const inputRef = useRef<MessageInputHandle>(null);
+
+  // Add-on seams (all inert in the core): an opaque per-pane input handle forwarded to inputAdornments,
+  // a provider of opaque per-send options merged into every send, and add-on status items for statusChips.
+  const [inputCtx, setInputCtx] = useState<unknown>();
+  const [statusItems, setStatusItems] = useState<unknown[]>([]);
+  const sendOptionsRef = useRef<(() => Record<string, unknown> | undefined) | undefined>(undefined);
+
+  // `sessionId` is the tab's identity at mount; a fresh chat adopts its real id mid-stream (below).
+  const [currentSessionId, setCurrentSessionId] = useState<string | undefined>(sessionId);
+  const currentSessionIdRef = useRef(currentSessionId);
+  currentSessionIdRef.current = currentSessionId;
+  const initialSessionId = useRef(sessionId).current;
+
+  const [sessionDirectives, setSessionDirectives] = useState<SessionDirectives | undefined>();
+  const [sessionScheduleId, setSessionScheduleId] = useState<string | undefined>();
+  const [sessionLastModel, setSessionLastModel] = useState<string | undefined>();
+  const [multiParticipant, setMultiParticipant] = useState(false);
+
+  const artifacts = useArtifacts(currentSessionId, ws.getToken, ws.token);
+  const busyRef = useRef(false);
+
+  const handleNewSession = useCallback(
+    (id: string) => {
+      ws.bumpSidebar();
+      if (id === currentSessionIdRef.current) return; // turn `done` on the same session — no re-assign churn.
+      setCurrentSessionId(id);
+      ws.assignSession(nodeId, id);
+    },
+    [ws, nodeId],
+  );
+
+  // Per-pane raw events (filtered to this session): artifacts, model pill, tab title.
+  const handlePaneEvent = useCallback(
+    (event: ServerEvent) => {
+      if (event.type === 'artifact') {
+        if (event.sessionId === currentSessionIdRef.current) artifacts.handleArtifactEvent(event);
+      } else if (event.type === 'directives') {
+        // Optimistic-then-confirm pill: drop stale ground-truth so the pill shows the just-requested
+        // model. Untagged event — gate on this pane being mid-turn so idle panes don't flicker.
+        if (busyRef.current) setSessionLastModel(undefined);
+      } else if (event.type === 'model_resolved' && event.sessionId === currentSessionIdRef.current) {
+        setSessionLastModel(event.model);
+      }
+    },
+    [ws, nodeId, artifacts],
+  );
+
+  const conv = useConversation(ws.socket, {
+    getToken: ws.getToken,
+    initialSessionId: sessionId,
+    onNewSession: handleNewSession,
+    onDirectivesChanged: setSessionDirectives,
+    onParticipantsChanged: setMultiParticipant,
+    onEvent: handlePaneEvent,
+  });
+  busyRef.current = conv.busy;
+
+  // Load history once at mount (only if this tab opened onto an existing session). A fresh chat
+  // starts empty and accumulates from the stream — never reload it, or in-flight tokens are lost.
+  useEffect(() => {
+    if (!initialSessionId) return;
+    let aborted = false;
+    (async () => {
+      try {
+        const res = await apiFetch(`/api/sessions/${initialSessionId}/messages`, ws.getToken);
+        const data = await res.json();
+        if (aborted) return;
+        conv.setMessages(historyToMessages(data));
+        setMultiParticipant(Array.isArray(data.participants) && data.participants.length > 1);
+        if (data.busy) conv.setBusy(true);
+      } catch (err) {
+        if (!aborted) console.error('[pane] history load failed:', err);
+      }
+    })();
+    return () => {
+      aborted = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialSessionId]);
+
+  // Load session directives/meta whenever the bound session changes (safe — touches no messages).
+  useEffect(() => {
+    if (!currentSessionId) {
+      setSessionDirectives(undefined);
+      setSessionScheduleId(undefined);
+      setSessionLastModel(undefined);
+      return;
+    }
+    apiFetch(`/api/sessions/${currentSessionId}/meta`, ws.getToken)
+      .then((r) => r.json())
+      .then((meta: any) => {
+        setSessionDirectives(meta.directives);
+        setSessionScheduleId(meta.scheduleId);
+        setSessionLastModel(meta.lastModel);
+        if (meta.runStatus === 'running') conv.setBusy(true);
+      })
+      .catch(() => {});
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentSessionId, ws.getToken]);
+
+  const handleSend = useCallback(
+    (text: string, truncateAt?: number, attachments?: Attachment[]) => {
+      // Merge any add-on-provided opaque send options (read at send time); undefined in the core.
+      conv.sendMessage(text, currentSessionIdRef.current, attachments, truncateAt, sendOptionsRef.current?.());
+    },
+    [conv],
+  );
+
+  // Headless per-conversation controller seam (add-on lifecycle + input/send/inject hooks). Rebuilt
+  // each render; an add-on binds via refs/effects. The core ships no controller, so nothing runs.
+  const controllerCtx: ConversationControllerCtx = {
+    sessionId: currentSessionId,
+    busy: conv.busy,
+    socket: ws.socket,
+    getToken: ws.getToken,
+    setInputCtx,
+    setSendOptions: (get) => { sendOptionsRef.current = get; },
+    setInputText: (t) => inputRef.current?.setText(t),
+    send: (text, options, meta) =>
+      conv.sendMessage(text, currentSessionIdRef.current, undefined, undefined, options, meta?.echo !== false),
+    appendAssistant: (blocks) =>
+      conv.setMessages((prev: ChatMessage[]) =>
+        prev.concat({ id: randomUUID(), role: 'assistant', blocks: blocks as unknown as MessageBlock[] })),
+    setStatusItems,
+  };
+
+  const handleUpload = useCallback(
+    async (file: File) => {
+      const t = await ws.getToken();
+      if (!t) return null;
+      try {
+        const res = await fetch('/api/upload', {
+          method: 'POST',
+          headers: {
+            Authorization: `Bearer ${t}`,
+            'x-filename': encodeURIComponent(file.name),
+            'Content-Type': file.type || 'application/octet-stream',
+            'x-session-id': currentSessionIdRef.current || '',
+          },
+          body: file,
+        });
+        return (await res.json()) as Attachment;
+      } catch (err) {
+        console.error('[upload] Failed:', err);
+        return null;
+      }
+    },
+    [ws],
+  );
+
+  const handleFork = useCallback(
+    async (truncateAtIndex?: number) => {
+      const sid = currentSessionIdRef.current;
+      if (!sid) return;
+      const t = await ws.getToken();
+      if (!t) return;
+      try {
+        const res = await fetch(`/api/sessions/${sid}/fork`, {
+          method: 'POST',
+          headers: { Authorization: `Bearer ${t}`, 'Content-Type': 'application/json' },
+          body: JSON.stringify(truncateAtIndex != null ? { truncateAtIndex } : {}),
+        });
+        if (!res.ok) {
+          console.error('[fork] server error:', (await res.json().catch(() => ({}))).error || res.status);
+          return;
+        }
+        const { sessionId: newId } = await res.json();
+        ws.bumpSidebar();
+        ws.openSession(newId);
+      } catch (err) {
+        console.error('[fork] failed:', err);
+      }
+    },
+    [ws],
+  );
+
+  const truncateAndSend = useCallback(
+    (msgId: string, text: string, attachments?: Attachment[]) => {
+      if (conv.busy) return;
+      const idx = conv.messages.findIndex((m) => m.id === msgId);
+      if (idx >= 0) conv.setMessages(conv.messages.slice(0, idx));
+      handleSend(text, idx >= 0 ? idx : undefined, attachments);
+    },
+    [conv, handleSend],
+  );
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      {slots.conversationController?.(controllerCtx)}
+      <ConversationHeader
+        sessionId={currentSessionId}
+        agentConfig={ws.agentConfig}
+        sessionDirectives={sessionDirectives}
+        sessionLastModel={sessionLastModel}
+        sessionScheduleId={sessionScheduleId}
+        artifactCount={artifacts.artifacts.length}
+        getToken={ws.getToken}
+        onConfigSaved={ws.setAgentConfig}
+        onDirectivesSaved={setSessionDirectives}
+        onFork={() => handleFork()}
+        onToggleArtifacts={artifacts.togglePanel}
+        onScheduleClick={ws.openSchedules}
+      />
+      <div className="flex-1 flex min-h-0">
+        <div className="flex-1 flex flex-col min-w-0">
+          <ChatView
+            messages={conv.messages}
+            busy={conv.busy}
+            multiParticipant={multiParticipant}
+            connectionStatus={ws.connectionStatus ?? undefined}
+            onPermissionRespond={conv.respondPermission}
+            onQuestionRespond={conv.respondQuestion}
+            onReplay={truncateAndSend}
+            onEdit={truncateAndSend}
+            onFork={(messageIndex) => handleFork(messageIndex)}
+            statusItems={statusItems}
+          />
+          <MessageInput
+            ref={inputRef}
+            onSend={(text, attachments) => handleSend(text, undefined, attachments)}
+            onSteer={conv.steer}
+            onQueue={conv.addToQueue}
+            onRemoveQueued={conv.removeFromQueue}
+            queue={conv.queue}
+            onUpload={handleUpload}
+            onCancel={conv.cancel}
+            disabled={false}
+            busy={conv.busy}
+            skills={ws.skills}
+            workspaceFiles={ws.workspaceFiles}
+            sessionId={currentSessionId}
+            inputCtx={inputCtx}
+          />
+        </div>
+        {artifacts.panelOpen && artifacts.artifacts.length > 0 && currentSessionId && (
+          <ArtifactPanel
+            artifacts={artifacts.artifacts}
+            selectedId={artifacts.selectedId}
+            sessionId={currentSessionId}
+            getToken={ws.getToken}
+            onSelect={artifacts.selectArtifact}
+            onClose={artifacts.closePanel}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/client/components/LoginPage.tsx

@@ -0,0 +1,81 @@
+import { Bot } from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { signInWithGoogle } from '@/lib/firebase';
+import { useState } from 'react';
+import { useSlots } from '@/lib/slots';
+
+interface LoginPageProps {
+  /** Active provider. 'local' → email/password form; 'firebase' → Google. */
+  mode?: 'local' | 'firebase' | null;
+  /** Local mode with no users yet → create-first-user form. */
+  needsSetup?: boolean;
+  /** Return an error message, or null on success. */
+  onLoginLocal?: (email: string, password: string) => Promise<string | null>;
+  onRegisterLocal?: (email: string, password: string) => Promise<string | null>;
+}
+
+export function LoginPage({ mode = 'firebase', needsSetup = false, onLoginLocal, onRegisterLocal }: LoginPageProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const isLocal = mode === 'local';
+  const slots = useSlots();
+
+  async function handleGoogle() {
+    setLoading(true);
+    setError('');
+    try {
+      await signInWithGoogle();
+    } catch (e: any) {
+      setError(e.message || 'Sign-in failed');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleLocal(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    const fn = needsSetup ? onRegisterLocal : onLoginLocal;
+    const err = fn ? await fn(email.trim(), password) : 'Local auth unavailable';
+    if (err) setError(err);
+    setLoading(false);
+  }
+
+  return (
+    <div className="flex h-full items-center justify-center bg-background">
+      <div className="flex flex-col items-center gap-6 p-8 rounded-xl border bg-card shadow-sm w-full max-w-sm">
+        <div className="flex flex-col items-center gap-2">
+          <div className="flex items-center justify-center w-12 h-12 rounded-full bg-primary text-primary-foreground">
+            <Bot className="w-6 h-6" />
+          </div>
+          <h1 className="text-xl font-semibold">Shraga</h1>
+          <p className="text-sm text-muted-foreground text-center">
+            {isLocal ? (needsSetup ? 'Create your account to get started' : 'Sign in to your agent workspace') : 'Sign in to access the AI agent workspace'}
+          </p>
+        </div>
+
+        {error && <p className="text-sm text-destructive text-center">{error}</p>}
+
+        {isLocal ? (
+          <form onSubmit={handleLocal} className="flex flex-col gap-3 w-full">
+            <Input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="username" required />
+            <Input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete={needsSetup ? 'new-password' : 'current-password'} required />
+            <Button type="submit" disabled={loading || !email || !password} className="w-full">
+              {loading ? 'Please wait…' : needsSetup ? 'Create account' : 'Sign in'}
+            </Button>
+          </form>
+        ) : (
+          <Button onClick={handleGoogle} disabled={loading} className="w-full">
+            {loading ? 'Signing in…' : 'Continue with Google'}
+          </Button>
+        )}
+
+        {slots.loginExtras?.()}
+      </div>
+    </div>
+  );
+}

package/src/client/components/MachineStats.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import type { AgentSocket, ServerEvent } from '@/lib/ws';
+import { cn } from '@/lib/utils';
+
+type Sample = Extract<ServerEvent, { type: 'stats' }>['sample'];
+
+const WINDOW = 120;
+
+interface Props {
+  socket: AgentSocket | null;
+  getToken: () => Promise<string | null>;
+}
+
+// One shared sampler runs on the server; this just renders what it broadcasts.
+export function MachineStats({ socket, getToken }: Props) {
+  const [samples, setSamples] = useState<Sample[]>([]);
+
+  // Seed from the cached server buffer once.
+  useEffect(() => {
+    getToken()
+      .then(t => (t ? fetch('/api/stats', { headers: { Authorization: `Bearer ${t}` } }) : null))
+      .then(r => r?.json())
+      .then(d => d?.samples && setSamples(d.samples))
+      .catch(err => console.warn('[MachineStats] seed failed', err));
+  }, [getToken]);
+
+  // Append live points over WS.
+  useEffect(() => {
+    if (!socket) return;
+    const off = socket.on(ev => {
+      if (ev.type === 'stats') {
+        setSamples(prev => [...prev, ev.sample].slice(-WINDOW));
+      }
+    });
+    return () => { off(); };
+  }, [socket]);
+
+  if (!samples.length) return null;
+  const latest = samples[samples.length - 1];
+
+  return (
+    <div className="flex items-center justify-center gap-2 text-[10px] text-muted-foreground/60">
+      <Metric label="cpu" value={latest.cpu} series={samples.map(s => s.cpu)} />
+      <Metric label="mem" value={latest.mem} series={samples.map(s => s.mem)} />
+    </div>
+  );
+}
+
+function level(v: number) {
+  return v >= 90 ? 'text-red-500' : v >= 75 ? 'text-amber-500' : 'text-emerald-500';
+}
+
+function Metric({ label, value, series }: { label: string; value: number; series: number[] }) {
+  return (
+    <span className="flex items-center gap-1" title={`${label} ${value}% — last ${series.length} samples`}>
+      <span className="uppercase tracking-wide">{label}</span>
+      <Sparkline series={series} className={level(value)} />
+      <span className={cn('tabular-nums', level(value))}>{value}%</span>
+    </span>
+  );
+}
+
+// Inline SVG sparkline (0-100 domain) — no chart lib, fixed viewBox so it scales crisply.
+function Sparkline({ series, className }: { series: number[]; className?: string }) {
+  const W = 40, H = 12;
+  const n = series.length;
+  const pts = series.map((v, i) => {
+    const x = n > 1 ? (i / (n - 1)) * W : 0;
+    const y = H - (Math.max(0, Math.min(100, v)) / 100) * H;
+    return `${x.toFixed(1)},${y.toFixed(1)}`;
+  }).join(' ');
+  return (
+    <svg width={W} height={H} viewBox={`0 0 ${W} ${H}`} className={cn('overflow-visible', className)} preserveAspectRatio="none">
+      <polyline points={pts} fill="none" stroke="currentColor" strokeWidth={1} strokeLinejoin="round" strokeLinecap="round" />
+    </svg>
+  );
+}

package/src/client/components/McpManager.tsx

@@ -0,0 +1,209 @@
+import { useEffect, useState } from 'react';
+import { Plus, Trash2, Settings, Lock } from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogBody, DialogFooter } from './ui/dialog';
+
+export interface McpServerConfig {
+  command: string;
+  args?: string[];
+  env?: Record<string, string>;
+  readonly?: boolean;
+}
+export type McpConfig = Record<string, McpServerConfig>;
+
+interface Props {
+  getToken: () => Promise<string | null>;
+  trigger?: React.ReactNode;
+}
+
+const emptyServer = (): McpServerConfig => ({ command: '', args: [], env: {} });
+
+export function McpManager({ getToken, trigger }: Props) {
+  const [config, setConfig] = useState<McpConfig>({});
+  const [open, setOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [editingEnv, setEditingEnv] = useState<Set<string>>(new Set());
+  const toggleEditing = (id: string) =>
+    setEditingEnv((s) => { const next = new Set(s); next.has(id) ? next.delete(id) : next.add(id); return next; });
+
+  useEffect(() => {
+    if (!open) return;
+    getToken().then((token) => {
+      if (!token) return;
+      fetch('/api/mcps', { headers: { Authorization: `Bearer ${token}` } })
+        .then((r) => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.json(); })
+        .then(setConfig)
+        .catch((e) => console.error('[McpManager] fetch failed', e));
+    });
+  }, [open, getToken]);
+
+  const save = async () => {
+    setSaving(true);
+    const token = await getToken();
+    try {
+      await fetch('/api/mcps', {
+        method: 'PUT',
+        headers: { Authorization: `Bearer ${token ?? ''}`, 'Content-Type': 'application/json' },
+        body: JSON.stringify(config),
+      });
+      setOpen(false);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const addServer = () => {
+    const name = `server-${Date.now()}`;
+    setConfig((c) => ({ ...c, [name]: emptyServer() }));
+  };
+
+  const removeServer = (name: string) => {
+    setConfig((c) => {
+      const next = { ...c };
+      delete next[name];
+      return next;
+    });
+  };
+
+  const updateServer = (name: string, key: keyof McpServerConfig, value: string) => {
+    setConfig((c) => ({ ...c, [name]: { ...c[name], [key]: key === 'args' ? value.split(' ') : value } }));
+  };
+
+  const updateEnvKey = (name: string, oldKey: string, newKey: string) => {
+    setConfig((c) => {
+      const env = { ...c[name].env };
+      const val = env[oldKey] ?? '';
+      delete env[oldKey];
+      if (newKey.trim()) env[newKey.trim()] = val;
+      return { ...c, [name]: { ...c[name], env } };
+    });
+  };
+
+  const updateEnvVal = (name: string, key: string, val: string) => {
+    setConfig((c) => ({
+      ...c,
+      [name]: { ...c[name], env: { ...c[name].env, [key]: val } },
+    }));
+  };
+
+  const removeEnvKey = (name: string, key: string) => {
+    setConfig((c) => {
+      const env = { ...c[name].env };
+      delete env[key];
+      return { ...c, [name]: { ...c[name], env } };
+    });
+  };
+
+  const addEnvKey = (name: string) => {
+    const key = `KEY_${Date.now()}`;
+    setConfig((c) => ({
+      ...c,
+      [name]: { ...c[name], env: { ...c[name].env, [key]: '' } },
+    }));
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {trigger || (
+          <Button variant="ghost" size="icon" title="MCP Servers">
+            <Settings className="w-4 h-4" />
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent className="max-w-[95vw] sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>MCP Servers</DialogTitle>
+        </DialogHeader>
+
+        <DialogBody className="space-y-4">
+          {Object.entries(config).map(([name, server]) => {
+            const isReadonly = !!server.readonly;
+            return (
+            <div key={name} className={`border rounded-lg p-4 space-y-3 ${isReadonly ? 'opacity-70' : ''}`}>
+              <div className="flex items-center justify-between">
+                <span className="font-medium text-sm flex items-center gap-1.5">
+                  {isReadonly && <Lock className="w-3 h-3 text-muted-foreground" />}
+                  {name}
+                </span>
+                {!isReadonly && (
+                  <Button variant="ghost" size="icon" onClick={() => removeServer(name)}>
+                    <Trash2 className="w-4 h-4 text-destructive" />
+                  </Button>
+                )}
+              </div>
+              {isReadonly ? (
+                <p className="text-xs text-muted-foreground">Configured in shraga.config.ts</p>
+              ) : (
+              <div className="grid gap-2">
+                <Input
+                  placeholder="Command (e.g. npx)"
+                  value={server.command}
+                  onChange={(e) => updateServer(name, 'command', e.target.value)}
+                />
+                <Input
+                  placeholder="Args (space-separated)"
+                  value={(server.args || []).join(' ')}
+                  onChange={(e) => updateServer(name, 'args', e.target.value)}
+                />
+                {Object.entries(server.env || {}).length > 0 && (
+                  <div className="space-y-2">
+                    <span className="text-xs text-muted-foreground">Environment variables</span>
+                    {Object.entries(server.env || {}).map(([k, v]) => (
+                      <div key={k} className="flex gap-2 items-center">
+                        <Input
+                          className="w-1/3 font-mono text-xs"
+                          value={k}
+                          onChange={(e) => updateEnvKey(name, k, e.target.value)}
+                          placeholder="KEY"
+                        />
+                        {editingEnv.has(`${name}:${k}`) ? (
+                          <Input
+                            className="flex-1 font-mono text-xs"
+                            placeholder="paste new value"
+                            autoFocus
+                            onChange={(e) => updateEnvVal(name, k, e.target.value)}
+                            onBlur={() => toggleEditing(`${name}:${k}`)}
+                          />
+                        ) : (
+                          <span
+                            className="flex-1 font-mono text-xs text-muted-foreground truncate cursor-pointer px-3 py-2 border rounded-md bg-background hover:border-ring"
+                            onClick={() => toggleEditing(`${name}:${k}`)}
+                            title="Click to change"
+                          >{v || '(empty — click to set)'}</span>
+                        )}
+                        <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0" onClick={() => removeEnvKey(name, k)}>
+                          <Trash2 className="w-3 h-3 text-muted-foreground" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+                <Button variant="ghost" size="sm" className="text-xs text-muted-foreground" onClick={() => addEnvKey(name)}>
+                  + Add env var
+                </Button>
+              </div>
+              )}
+            </div>
+            );
+          })}
+
+          {Object.keys(config).length === 0 && (
+            <p className="text-sm text-muted-foreground text-center py-4">No MCP servers configured</p>
+          )}
+        </DialogBody>
+
+        <DialogFooter className="flex gap-2">
+          <Button variant="outline" onClick={addServer} className="gap-2">
+            <Plus className="w-4 h-4" /> Add Server
+          </Button>
+          <Button onClick={save} disabled={saving}>
+            {saving ? 'Saving…' : 'Save'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}