cli-jaw 2.1.1 → 2.1.3

package/public/manager/src/manager-shortcut-runner.ts

@@ -0,0 +1,107 @@
+import type { DashboardDetailTab, DashboardInstance, DashboardShortcutAction, DashboardSidebarMode } from './types';
+import { panelShortcutBus } from './panels/panel-shortcut-bus';
+import { getDesktop } from './panels/desktop-bridge';
+
+/**
+ * Dependencies the manager keyboard-shortcut runner needs from <App>.
+ * Extracted from App.tsx to keep the component under the dashboard line budget;
+ * behaviour is identical — App passes current render values on every call.
+ */
+export interface ManagerShortcutRunnerDeps {
+    selectedInstance: DashboardInstance | null;
+    filtered: DashboardInstance[];
+    activeDetailTab: DashboardDetailTab;
+    setDrawerOpen: (open: boolean) => void;
+    handleSidebarModeChange: (mode: DashboardSidebarMode) => void;
+    handlePreview: (instance: DashboardInstance) => void;
+    selectRelativeInstance: (direction: 1 | -1) => void;
+    handleTabChange: (tab: DashboardDetailTab) => void;
+    setPreviewRefreshKey: (updater: (key: number) => number) => void;
+    handleSidebarToggle: () => void;
+}
+
+export function runManagerShortcut(action: DashboardShortcutAction, deps: ManagerShortcutRunnerDeps): void {
+    if (panelShortcutBus.dispatch(action)) return;
+    if (action === 'focusInstances') {
+        deps.handleSidebarModeChange('instances');
+        deps.setDrawerOpen(false);
+        return;
+    }
+    if (action === 'focusActiveSession') {
+        const target = deps.selectedInstance?.ok
+            ? deps.selectedInstance
+            : deps.filtered.find(instance => instance.ok) || null;
+        if (target) deps.handlePreview(target);
+        else deps.handleSidebarModeChange('instances');
+        return;
+    }
+    if (action === 'focusNotes') {
+        deps.handleSidebarModeChange('notes');
+        deps.setDrawerOpen(false);
+        return;
+    }
+    if (action === 'previousInstance') {
+        deps.selectRelativeInstance(-1);
+        return;
+    }
+    if (action === 'nextInstance') {
+        deps.selectRelativeInstance(1);
+        return;
+    }
+    if (action === 'closeFocusedTab') {
+        const active = document.activeElement;
+        if (active?.closest('.browser-webview-stack, .browser-tab-strip')) {
+            document.dispatchEvent(new CustomEvent('jaw:shortcut-action', { detail: 'closeBrowserTab' }));
+        } else if (active?.closest('.terminal-panel, .xterm')) {
+            document.dispatchEvent(new CustomEvent('jaw:shortcut-action', { detail: 'closeTerminalTab' }));
+        } else if (active?.closest('.bottom-panel')) {
+            panelShortcutBus.dispatch('closeActiveBottomTab');
+        } else if (active?.closest('.right-panel')) {
+            panelShortcutBus.dispatch('toggleRightPanel');
+        }
+        return;
+    }
+    if (action === 'switchTab1') { deps.handleTabChange('overview'); return; }
+    if (action === 'switchTab2') { deps.handleTabChange('preview'); return; }
+    if (action === 'switchTab3') { deps.handleTabChange('logs'); return; }
+    if (action === 'switchTab4') { deps.handleTabChange('settings'); return; }
+    if (action === 'previousTab' || action === 'nextTab') {
+        const tabs: DashboardDetailTab[] = ['overview', 'preview', 'logs', 'settings'];
+        const idx = tabs.indexOf(deps.activeDetailTab);
+        const dir = action === 'nextTab' ? 1 : -1;
+        deps.handleTabChange(tabs[(idx + dir + tabs.length) % tabs.length]);
+        return;
+    }
+    if (action === 'browserReload' || action === 'browserHardReload' || action === 'browserFocusUrl' || action === 'browserBack' || action === 'browserForward') {
+        const el = document.activeElement;
+        if (el?.closest('.browser-webview-stack, .browser-tab-strip, .browser-panel')) {
+            document.dispatchEvent(new CustomEvent('jaw:shortcut-action', { detail: action }));
+            return;
+        }
+        // Focus is NOT in the browser panel → reload acts on the preview or app.
+        // Preview focus refreshes the preview for both soft and hard (the iframe
+        // has no separate hard-reload concept).
+        if (action === 'browserReload' || action === 'browserHardReload') {
+            if (el?.closest('.preview-panel')) {
+                deps.setPreviewRefreshKey(key => key + 1);
+            } else if (action === 'browserReload') {
+                getDesktop()?.reloadWindow?.();
+            } else {
+                getDesktop()?.hardReloadWindow?.();
+            }
+        }
+        // browserFocusUrl / Back / Forward are browser-only → no-op outside the panel.
+        return;
+    }
+    if (action === 'terminalClear' || action === 'terminalNewTab') {
+        const el = document.activeElement;
+        if (el?.closest('.terminal-panel, .xterm')) {
+            document.dispatchEvent(new CustomEvent('jaw:shortcut-action', { detail: action }));
+        }
+        return;
+    }
+    if (action === 'toggleLeftSidebar') {
+        deps.handleSidebarToggle();
+        return;
+    }
+}

package/public/manager/src/manager-shortcuts.ts

@@ -134,12 +134,27 @@ export function shortcutMatches(event: KeyboardEvent, raw: string): boolean {
         && resolveEventKey(event) === parsed.key;
 }
 
+/**
+ * Actions whose keyboard shortcut is owned by the Electron application menu
+ * accelerator (single source of truth), so the renderer keydown matcher must
+ * NOT also match them — otherwise ⌘R fires twice (menu + keydown). The actions
+ * stay in MANAGER_SHORTCUT_ACTIONS so the menu can still dispatch them by name;
+ * only the renderer-side keyboard binding is suppressed. This also makes a
+ * persisted user keymap carrying Meta+R harmless, and preserves the browser's
+ * native ⌘R in a pure web build (no menu, no match → no preventDefault).
+ */
+export const RENDERER_DISABLED_SHORTCUT_ACTIONS = new Set<DashboardShortcutAction>([
+    'browserReload',
+    'browserHardReload',
+]);
+
 export function actionForShortcutEvent(
     event: KeyboardEvent,
     keymap: unknown,
 ): DashboardShortcutAction | null {
     const shortcuts = normalizeManagerShortcutKeymap(keymap);
     for (const action of MANAGER_SHORTCUT_ACTIONS) {
+        if (RENDERER_DISABLED_SHORTCUT_ACTIONS.has(action)) continue;
         if (shortcutMatches(event, shortcuts[action])) return action;
         if (MANAGER_SHORTCUT_ALIASES[action]?.some(shortcut => shortcutMatches(event, shortcut))) return action;
     }

package/public/manager/src/panels/desktop-bridge.ts

@@ -47,6 +47,16 @@ export type FolderBridgeApi = {
     onDirChange: (cb: (dirPath: string) => void) => () => void;
 };
 
+export type DroppedPathEntry = {
+    name: string;
+    path: string;
+    kind: 'file' | 'directory';
+};
+
+export type DragDropBridgeApi = {
+    resolveDroppedItems: (files: File[]) => Promise<{ ok: boolean; entries?: DroppedPathEntry[]; rejected?: Array<{ path: string; reason: string }>; error?: string }>;
+};
+
 export type ShortcutBridgeApi = {
     onAction: (cb: (action: DashboardShortcutAction) => void) => () => void;
 };
@@ -87,10 +97,13 @@ export type CliJawDesktopApi = {
     terminal?: TerminalBridgeApi | undefined;
     diff?: DiffBridgeApi | undefined;
     folder?: FolderBridgeApi | undefined;
+    dragDrop?: DragDropBridgeApi | undefined;
     clipboard?: ClipboardBridgeApi | undefined;
     permissions?: PermissionDiagnosticsBridgeApi | undefined;
     shortcuts?: ShortcutBridgeApi | undefined;
     browser?: BrowserBridgeApi | undefined;
+    reloadWindow?: (() => void) | undefined;
+    hardReloadWindow?: (() => void) | undefined;
 };
 
 export function getDesktop(): CliJawDesktopApi | null {

package/public/manager/src/settings/SettingsSidebar.tsx

@@ -21,9 +21,9 @@ const CATEGORIES: SidebarEntry[] = [
     { id: 'channels-discord', label: 'Channels — Discord', group: 'channels' },
     { id: 'heartbeat', label: 'Heartbeat & schedules', group: 'automation' },
     { id: 'memory', label: 'Memory', group: 'automation' },
+    { id: 'mcp', label: 'MCP servers', group: 'mcp' },
     { id: 'speech', label: 'Speech & keys', group: 'integrations' },
     { id: 'prompts', label: 'Prompts', group: 'integrations' },
-    { id: 'mcp', label: 'MCP servers', group: 'integrations' },
     { id: 'browser', label: 'Browser / CDP', group: 'integrations' },
     { id: 'network', label: 'Network', group: 'network-security' },
     { id: 'permissions', label: 'Permissions', group: 'network-security' },

package/public/manager/src/settings/components/sidebar-filter.ts

@@ -14,6 +14,7 @@ export type SidebarEntry = {
 export const SIDEBAR_GROUP_ORDER: ReadonlyArray<SettingsCategoryGroup> = [
     'runtime',
     'identity',
+    'mcp',
     'channels',
     'automation',
     'integrations',
@@ -24,6 +25,7 @@ export const SIDEBAR_GROUP_ORDER: ReadonlyArray<SettingsCategoryGroup> = [
 export const SIDEBAR_GROUP_LABELS: Record<SettingsCategoryGroup, string> = {
     runtime: 'Runtime',
     identity: 'Identity',
+    mcp: 'MCP',
     channels: 'Channels',
     automation: 'Automation',
     integrations: 'Integrations',

package/public/manager/src/settings/pages/Mcp.tsx

@@ -1,13 +1,3 @@
-// Phase 8 — MCP page: structured editor for server cards plus an Advanced
-// JSON view, plus action buttons for sync/install/reset against the
-// unified MCP config (`/api/mcp`).
-//
-// The page owns one synthetic dirty-store key (`mcp.config`) carrying the
-// full normalized config. Save PUTs back with `toPersistShape` to keep the
-// on-disk JSON minimal. Render-time validation (duplicate names, missing
-// commands, malformed env) gates the dirty entry's `valid` flag — invalid
-// configs cannot save.
-
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { SettingsPageProps } from '../types';
 import { JsonEditorField } from '../fields';
@@ -21,7 +11,9 @@ import {
 import { InlineWarn } from './components/InlineWarn';
 import { McpServerCard } from './components/McpServerCard';
 import {
+    countInstallBundleCandidates,
     findDuplicateNames,
+    getServerTag,
     makeEmptyServer,
     newServerName,
     normalizeMcpConfig,
@@ -46,6 +38,9 @@ type SyncResultsPayload = {
     servers?: unknown;
 };
 
+type ModalTab = 'active' | 'add';
+type AddSubTab = 'local' | 'remote';
+
 export default function Mcp({ port, client, dirty, registerSave }: SettingsPageProps) {
     const { state, refresh, setData } = usePageSnapshot<unknown>(client, '/api/mcp');
     const [draft, setDraft] = useState<McpConfig>({ servers: {} });
@@ -55,6 +50,18 @@ export default function Mcp({ port, client, dirty, registerSave }: SettingsPageP
     const [actionState, setActionState] = useState<ActionResult>({ kind: 'idle' });
     const actionRunIdRef = useRef(0);
 
+    const [modalOpen, setModalOpen] = useState(false);
+    const [modalTab, setModalTab] = useState<ModalTab>('active');
+    const [addSubTab, setAddSubTab] = useState<AddSubTab>('local');
+    const [addName, setAddName] = useState('');
+    const [addCommand, setAddCommand] = useState('');
+    const [addArgs, setAddArgs] = useState('');
+    const [addEnv, setAddEnv] = useState('');
+    const [addUrl, setAddUrl] = useState('');
+    const [addHeaders, setAddHeaders] = useState('');
+    const [addError, setAddError] = useState<string | null>(null);
+    const [addPending, setAddPending] = useState(false);
+
     const original = useMemo<McpConfig>(
         () => (state.kind === 'ready' ? normalizeMcpConfig(state.data) : { servers: {} }),
         [state],
@@ -69,9 +76,7 @@ export default function Mcp({ port, client, dirty, registerSave }: SettingsPageP
     }, [state]);
 
     useEffect(() => {
-        return () => {
-            dirty.remove(DIRTY_KEY);
-        };
+        return () => { dirty.remove(DIRTY_KEY); };
     }, [dirty]);
 
     const names = useMemo(() => Object.keys(draft.servers), [draft]);
@@ -85,6 +90,10 @@ export default function Mcp({ port, client, dirty, registerSave }: SettingsPageP
     const hasFieldErrors = validations.some((v) => v.result.kind === 'invalid');
     const hasDupes = duplicates.size > 0;
     const isValid = !hasFieldErrors && !hasDupes && advancedValid;
+    const bundleCandidates = useMemo(
+        () => countInstallBundleCandidates(draft.servers),
+        [draft],
+    );
 
     const writeDirty = useCallback(
         (next: McpConfig, valid: boolean) => {
@@ -101,7 +110,6 @@ export default function Mcp({ port, client, dirty, registerSave }: SettingsPageP
         (next: McpConfig, nextOrder?: string[]) => {
             setDraft(next);
             if (nextOrder) setOrder(nextOrder);
-            // Recompute validity on the next draft, not the stale `isValid`.
             const ns = nextOrder ?? Object.keys(next.servers);
             const dupes = findDuplicateNames(ns);
             const fieldOk = ns.every(
@@ -115,8 +123,6 @@ export default function Mcp({ port, client, dirty, registerSave }: SettingsPageP
     const onRenameServer = useCallback(
         (oldName: string, nextName: string) => {
             if (oldName === nextName) return;
-            // Preserve insertion order; keep the same card in place even if the
-            // new name collides with a later card (validation surfaces the dupe).
             const nextOrder = order.map((n) => (n === oldName ? nextName : n));
             const nextServers: Record<string, McpServer> = {};
             for (const n of nextOrder) {
@@ -185,9 +191,6 @@ export default function Mcp({ port, client, dirty, registerSave }: SettingsPageP
         if (!(DIRTY_KEY in bundle)) return;
         const body = bundle[DIRTY_KEY];
         const updated = await client.put<unknown>('/api/mcp', body);
-        // /api/mcp PUT returns `{ ok, servers: string[] }` — re-fetch to get the
-        // canonical persisted shape rather than reusing the (possibly trimmed)
-        // request body.
         dirty.clear();
         const fresh = await client.get<unknown>('/api/mcp').catch(() => updated);
         const normalized = normalizeMcpConfig(fresh);
@@ -211,9 +214,7 @@ export default function Mcp({ port, client, dirty, registerSave }: SettingsPageP
                     !window.confirm(
                         `You have unsaved MCP edits. ${label} will use the on-disk config, not your unsaved changes. Continue?`,
                     )
-                ) {
-                    return;
-                }
+                ) { return; }
             }
             const runId = actionRunIdRef.current + 1;
             actionRunIdRef.current = runId;
@@ -236,6 +237,94 @@ export default function Mcp({ port, client, dirty, registerSave }: SettingsPageP
         [client, dirty],
     );
 
+    const resetAddForm = useCallback(() => {
+        setAddName('');
+        setAddCommand('');
+        setAddArgs('');
+        setAddEnv('');
+        setAddUrl('');
+        setAddHeaders('');
+        setAddError(null);
+        setAddPending(false);
+    }, []);
+
+    const openModal = useCallback(() => {
+        setModalTab('active');
+        resetAddForm();
+        setModalOpen(true);
+    }, [resetAddForm]);
+
+    const closeModal = useCallback(() => {
+        setModalOpen(false);
+        resetAddForm();
+    }, [resetAddForm]);
+
+    const handleAddAndSync = useCallback(async () => {
+        const name = addName.trim() || newServerName(Object.keys(original.servers));
+        const server: McpServer = addSubTab === 'remote'
+            ? { url: addUrl.trim(), ...(addHeaders.trim() ? { headers: parseSimpleKV(addHeaders) } : {}) }
+            : {
+                command: addCommand.trim(),
+                ...(addArgs.trim() ? { args: addArgs.split(/\r?\n|,/).map(s => s.trim()).filter(Boolean) } : {}),
+                ...(addEnv.trim() ? { env: parseSimpleKV(addEnv) } : {}),
+            };
+
+        const validation = validateServer(name, server);
+        if (validation.kind === 'invalid') {
+            setAddError(validation.reason);
+            return;
+        }
+        if (original.servers[name]) {
+            setAddError(`Server "${name}" already exists.`);
+            return;
+        }
+
+        setAddPending(true);
+        setAddError(null);
+
+        try {
+            const merged: McpConfig = {
+                ...original,
+                servers: { ...original.servers, [name]: server },
+            };
+            await client.put<unknown>('/api/mcp', toPersistShape(merged));
+            await client.post<unknown>('/api/mcp/sync', {});
+            dirty.clear();
+            const fresh = await client.get<unknown>('/api/mcp').catch(() => merged);
+            const normalized = normalizeMcpConfig(fresh);
+            setDraft(normalized);
+            setOrder(Object.keys(normalized.servers));
+            setData(fresh);
+            await refresh();
+            closeModal();
+        } catch (err: unknown) {
+            setAddError(err instanceof Error ? err.message : String(err));
+            setAddPending(false);
+        }
+    }, [addName, addSubTab, addUrl, addHeaders, addCommand, addArgs, addEnv, original, client, dirty, refresh, setData, closeModal]);
+
+    const handleRemoveFromModal = useCallback(async (name: string) => {
+        const nextServers = { ...original.servers };
+        delete nextServers[name];
+        const merged: McpConfig = { ...original, servers: nextServers };
+        try {
+            await client.put<unknown>('/api/mcp', toPersistShape(merged));
+            await client.post<unknown>('/api/mcp/sync', {});
+            dirty.clear();
+            const fresh = await client.get<unknown>('/api/mcp').catch(() => merged);
+            const normalized = normalizeMcpConfig(fresh);
+            setDraft(normalized);
+            setOrder(Object.keys(normalized.servers));
+            setData(fresh);
+            await refresh();
+        } catch (err: unknown) {
+            setActionState({
+                kind: 'error',
+                message: err instanceof Error ? err.message : String(err),
+            });
+        }
+    }, [original, client, dirty, refresh, setData]);
+
     if (state.kind === 'loading') return <PageLoading />;
     if (state.kind === 'offline') return <PageOffline port={port} />;
     if (state.kind === 'error') return <PageError message={state.message} />;
@@ -277,15 +366,6 @@ export default function Mcp({ port, client, dirty, registerSave }: SettingsPageP
                         );
                     })}
                 </div>
-                <div className="mcp-servers-actions">
-                    <button
-                        type="button"
-                        className="settings-action"
-                        onClick={onAddServer}
-                    >
-                        Add server
-                    </button>
-                </div>
                 {hasDupes && (
                     <InlineWarn role="alert">
                         Duplicate server name{dupeNames.length === 1 ? '' : 's'}: {dupeNames.join(', ')}.
@@ -294,7 +374,7 @@ export default function Mcp({ port, client, dirty, registerSave }: SettingsPageP
                 )}
                 {hasFieldErrors && !hasDupes && (
                     <InlineWarn role="alert">
-                        Some servers have errors (missing command or invalid name).
+                        Some servers have errors (missing command/URL or invalid name).
                         Saving is blocked until they are fixed.
                     </InlineWarn>
                 )}
@@ -305,6 +385,13 @@ export default function Mcp({ port, client, dirty, registerSave }: SettingsPageP
                 hint="These act on the saved config. Save edits first if you want them included."
             >
                 <div className="mcp-action-buttons">
+                    <button
+                        type="button"
+                        className="settings-action"
+                        onClick={openModal}
+                    >
+                        + Add, Set MCP
+                    </button>
                     <button
                         type="button"
                         className="settings-action"
@@ -316,10 +403,10 @@ export default function Mcp({ port, client, dirty, registerSave }: SettingsPageP
                     <button
                         type="button"
                         className="settings-action"
-                        disabled={actionState.kind === 'pending'}
+                        disabled={actionState.kind === 'pending' || bundleCandidates === 0}
                         onClick={() => void runAction('Install bundle', '/api/mcp/install')}
                     >
-                        Install bundle
+                        Install bundle ({bundleCandidates})
                     </button>
                     <button
                         type="button"
@@ -331,9 +418,7 @@ export default function Mcp({ port, client, dirty, registerSave }: SettingsPageP
                                 !window.confirm(
                                     'Reset MCP config to defaults? Your custom servers will be removed.',
                                 )
-                            ) {
-                                return;
-                            }
+                            ) { return; }
                             void runAction('Reset to defaults', '/api/mcp/reset');
                         }}
                     >
@@ -341,14 +426,10 @@ export default function Mcp({ port, client, dirty, registerSave }: SettingsPageP
                     </button>
                 </div>
                 {actionState.kind === 'pending' && (
-                    <p className="settings-section-hint" role="status">
-                        {actionState.label}…
-                    </p>
+                    <p className="settings-section-hint" role="status">{actionState.label}…</p>
                 )}
                 {actionState.kind === 'success' && (
-                    <p className="settings-section-hint" role="status">
-                        ✅ {actionState.message}
-                    </p>
+                    <p className="settings-section-hint" role="status">{actionState.message}</p>
                 )}
                 {actionState.kind === 'error' && (
                     <InlineWarn role="alert">{actionState.message}</InlineWarn>
@@ -382,6 +463,193 @@ export default function Mcp({ port, client, dirty, registerSave }: SettingsPageP
                     </p>
                 )}
             </SettingsSection>
+
+            {modalOpen && (
+                <div className="mcp-modal-backdrop" onClick={closeModal}>
+                    <div
+                        className="mcp-modal"
+                        role="dialog"
+                        aria-modal="true"
+                        aria-label="MCP Server Management"
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        <div className="mcp-modal-tabs">
+                            <button
+                                type="button"
+                                className={`mcp-modal-tab${modalTab === 'active' ? ' is-active' : ''}`}
+                                onClick={() => setModalTab('active')}
+                            >
+                                Active Servers
+                            </button>
+                            <button
+                                type="button"
+                                className={`mcp-modal-tab${modalTab === 'add' ? ' is-active' : ''}`}
+                                onClick={() => { setModalTab('add'); resetAddForm(); }}
+                            >
+                                Add New
+                            </button>
+                        </div>
+
+                        <div className="mcp-modal-body">
+                            {modalTab === 'active' && (
+                                <div className="mcp-active-list">
+                                    {Object.keys(original.servers).length === 0 && (
+                                        <p className="settings-section-hint">No active MCP servers.</p>
+                                    )}
+                                    {Object.entries(original.servers).map(([name, srv]) => {
+                                        const tag = getServerTag(srv);
+                                        return (
+                                            <div key={name} className="mcp-active-row">
+                                                <span className="mcp-active-name">{name}</span>
+                                                <span className="mcp-active-detail">
+                                                    {srv.url || [srv.command, ...(srv.args || [])].filter(Boolean).join(' ')}
+                                                </span>
+                                                {tag && <span className="mcp-server-tag" data-tag={tag}>[{tag}]</span>}
+                                                <button
+                                                    type="button"
+                                                    className="settings-action settings-action-discard mcp-active-remove"
+                                                    onClick={() => void handleRemoveFromModal(name)}
+                                                >
+                                                    Remove
+                                                </button>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            )}
+
+                            {modalTab === 'add' && (
+                                <div className="mcp-add-form">
+                                    <div className="mcp-add-subtabs">
+                                        <button
+                                            type="button"
+                                            className={`mcp-modal-tab${addSubTab === 'local' ? ' is-active' : ''}`}
+                                            onClick={() => setAddSubTab('local')}
+                                        >
+                                            Local
+                                        </button>
+                                        <button
+                                            type="button"
+                                            className={`mcp-modal-tab${addSubTab === 'remote' ? ' is-active' : ''}`}
+                                            onClick={() => setAddSubTab('remote')}
+                                        >
+                                            Remote
+                                        </button>
+                                    </div>
+
+                                    <label className="settings-field settings-field-text">
+                                        <span className="settings-field-label">Name</span>
+                                        <input
+                                            type="text"
+                                            value={addName}
+                                            placeholder="my-server"
+                                            spellCheck={false}
+                                            onChange={(e) => setAddName(e.target.value)}
+                                        />
+                                    </label>
+
+                                    {addSubTab === 'local' ? (
+                                        <>
+                                            <label className="settings-field settings-field-text">
+                                                <span className="settings-field-label">Command</span>
+                                                <input
+                                                    type="text"
+                                                    value={addCommand}
+                                                    placeholder="npx"
+                                                    spellCheck={false}
+                                                    onChange={(e) => setAddCommand(e.target.value)}
+                                                />
+                                            </label>
+                                            <label className="settings-field settings-field-text">
+                                                <span className="settings-field-label">Args (one per line)</span>
+                                                <textarea
+                                                    value={addArgs}
+                                                    rows={3}
+                                                    spellCheck={false}
+                                                    placeholder="-y&#10;@upstash/context7-mcp"
+                                                    onChange={(e) => setAddArgs(e.target.value)}
+                                                />
+                                            </label>
+                                            <label className="settings-field settings-field-text">
+                                                <span className="settings-field-label">Env (KEY=value per line)</span>
+                                                <textarea
+                                                    value={addEnv}
+                                                    rows={2}
+                                                    spellCheck={false}
+                                                    onChange={(e) => setAddEnv(e.target.value)}
+                                                />
+                                            </label>
+                                        </>
+                                    ) : (
+                                        <>
+                                            <label className="settings-field settings-field-text">
+                                                <span className="settings-field-label">URL</span>
+                                                <input
+                                                    type="text"
+                                                    value={addUrl}
+                                                    placeholder="https://mcp.example.com/sse"
+                                                    spellCheck={false}
+                                                    onChange={(e) => setAddUrl(e.target.value)}
+                                                />
+                                            </label>
+                                            <label className="settings-field settings-field-text">
+                                                <span className="settings-field-label">Headers (KEY=value per line)</span>
+                                                <textarea
+                                                    value={addHeaders}
+                                                    rows={2}
+                                                    spellCheck={false}
+                                                    onChange={(e) => setAddHeaders(e.target.value)}
+                                                />
+                                            </label>
+                                        </>
+                                    )}
+
+                                    {addError && <InlineWarn role="alert">{addError}</InlineWarn>}
+
+                                    <div className="mcp-add-actions">
+                                        <button
+                                            type="button"
+                                            className="settings-action"
+                                            onClick={closeModal}
+                                        >
+                                            Cancel
+                                        </button>
+                                        <button
+                                            type="button"
+                                            className="settings-action"
+                                            disabled={addPending}
+                                            onClick={() => void handleAddAndSync()}
+                                        >
+                                            {addPending ? 'Adding…' : 'Add & Sync'}
+                                        </button>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+
+                        <button
+                            type="button"
+                            className="mcp-modal-close"
+                            aria-label="Close"
+                            onClick={closeModal}
+                        >
+                            &times;
+                        </button>
+                    </div>
+                </div>
+            )}
         </form>
     );
 }
+
+function parseSimpleKV(text: string): Record<string, string> {
+    const out: Record<string, string> = {};
+    for (const line of text.split(/\r?\n/)) {
+        const t = line.trim();
+        if (!t || t.startsWith('#')) continue;
+        const eq = t.indexOf('=');
+        if (eq === -1) continue;
+        out[t.slice(0, eq).trim()] = t.slice(eq + 1);
+    }
+    return out;
+}