@assistkick/create 1.19.0 → 1.22.0

package/templates/assistkick-product-system/packages/frontend/src/components/McpConfigModal.tsx

@@ -0,0 +1,307 @@
+/**
+ * McpConfigModal — Modal dialog for editing per-user MCP server configurations.
+ * Scope toggle: Global (user-level) or Project (project-scoped).
+ * Two tabs per scope: Localhost (local dev only) and Remote (all environments).
+ * Each tab has a JSON textarea editor with validation and save functionality.
+ */
+
+import {useCallback, useEffect, useState} from 'react';
+import {Globe, X} from 'lucide-react';
+import {apiClient} from '../api/client';
+import {useProjectStore} from '../stores/useProjectStore';
+
+interface McpConfigModalProps {
+  onClose: () => void;
+}
+
+type ConfigTab = 'localhost' | 'remote';
+type Scope = 'global' | 'project';
+
+const PLACEHOLDER_CONFIG = JSON.stringify(
+  {
+    'example-server': {
+      url: 'http://localhost:8080/sse',
+    },
+  },
+  null,
+  2,
+);
+
+export function McpConfigModal({onClose}: McpConfigModalProps) {
+  const selectedProjectId = useProjectStore((s) => s.selectedProjectId);
+
+  const [scope, setScope] = useState<Scope>('global');
+  const [activeTab, setActiveTab] = useState<ConfigTab>('localhost');
+
+  // Separate state for global and project configs
+  const [globalLocalhostJson, setGlobalLocalhostJson] = useState('{}');
+  const [globalRemoteJson, setGlobalRemoteJson] = useState('{}');
+  const [projectLocalhostJson, setProjectLocalhostJson] = useState('{}');
+  const [projectRemoteJson, setProjectRemoteJson] = useState('{}');
+
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        // Load global configs
+        const {configs: globalConfigs} = await apiClient.getMcpConfigs();
+        for (const cfg of globalConfigs) {
+          const formatted = JSON.stringify(JSON.parse(cfg.mcpServersJson), null, 2);
+          if (cfg.configType === 'localhost') setGlobalLocalhostJson(formatted);
+          if (cfg.configType === 'remote') setGlobalRemoteJson(formatted);
+        }
+
+        // Load project configs if a project is selected
+        if (selectedProjectId) {
+          const {configs: projectConfigs} = await apiClient.getMcpConfigs(selectedProjectId);
+          for (const cfg of projectConfigs) {
+            const formatted = JSON.stringify(JSON.parse(cfg.mcpServersJson), null, 2);
+            if (cfg.configType === 'localhost') setProjectLocalhostJson(formatted);
+            if (cfg.configType === 'remote') setProjectRemoteJson(formatted);
+          }
+        }
+      } catch (err: any) {
+        setError(`Failed to load configs: ${err.message}`);
+      } finally {
+        setLoading(false);
+      }
+    };
+    load();
+  }, [selectedProjectId]);
+
+  const getCurrentJson = (): string => {
+    if (scope === 'global') return activeTab === 'localhost' ? globalLocalhostJson : globalRemoteJson;
+    return activeTab === 'localhost' ? projectLocalhostJson : projectRemoteJson;
+  };
+
+  const setCurrentJson = (value: string) => {
+    if (scope === 'global') {
+      if (activeTab === 'localhost') setGlobalLocalhostJson(value);
+      else setGlobalRemoteJson(value);
+    } else {
+      if (activeTab === 'localhost') setProjectLocalhostJson(value);
+      else setProjectRemoteJson(value);
+    }
+  };
+
+  const currentJson = getCurrentJson();
+
+  const validateJson = useCallback((json: string): string | null => {
+    try {
+      const parsed = JSON.parse(json);
+      if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+        return 'Must be a JSON object (e.g. { "server-name": { ... } })';
+      }
+      return null;
+    } catch {
+      return 'Invalid JSON syntax';
+    }
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    const jsonToSave = getCurrentJson();
+    const validationError = validateJson(jsonToSave);
+    if (validationError) {
+      setError(validationError);
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+    setSuccess(null);
+
+    const projectId = scope === 'project' ? selectedProjectId : null;
+
+    try {
+      await apiClient.saveMcpConfig(activeTab, jsonToSave, projectId);
+      const scopeLabel = scope === 'project' ? 'Project' : 'Global';
+      const typeLabel = activeTab === 'localhost' ? 'localhost' : 'remote';
+      setSuccess(`${scopeLabel} ${typeLabel} config saved`);
+      setTimeout(() => setSuccess(null), 3000);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setSaving(false);
+    }
+  }, [scope, activeTab, selectedProjectId, globalLocalhostJson, globalRemoteJson, projectLocalhostJson, projectRemoteJson, validateJson]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+        e.preventDefault();
+        handleSave();
+      }
+    },
+    [onClose, handleSave],
+  );
+
+  const jsonError = validateJson(currentJson);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+      onKeyDown={handleKeyDown}
+    >
+      <div className="bg-surface border border-edge rounded-lg shadow-xl w-[640px] max-h-[80vh] flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-edge">
+          <h2 className="text-sm font-semibold text-content">MCP Server Configuration</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-content-muted hover:text-content transition-colors"
+          >
+            <X size={16} />
+          </button>
+        </div>
+
+        {/* Scope toggle */}
+        <div className="flex items-center gap-1 px-4 py-2 border-b border-edge">
+          <span className="text-[11px] text-content-muted mr-2">Scope:</span>
+          <button
+            type="button"
+            className={`h-6 px-2.5 rounded text-[11px] font-mono transition-colors ${
+              scope === 'global'
+                ? 'bg-accent text-white'
+                : 'text-content-muted bg-transparent border border-edge hover:bg-surface-raised'
+            }`}
+            onClick={() => {
+              setScope('global');
+              setError(null);
+              setSuccess(null);
+            }}
+          >
+            Global
+          </button>
+          <button
+            type="button"
+            className={`h-6 px-2.5 rounded text-[11px] font-mono transition-colors ${
+              scope === 'project'
+                ? 'bg-accent text-white'
+                : 'text-content-muted bg-transparent border border-edge hover:bg-surface-raised'
+            }`}
+            onClick={() => {
+              setScope('project');
+              setError(null);
+              setSuccess(null);
+            }}
+            disabled={!selectedProjectId}
+            title={selectedProjectId ? `Project: ${selectedProjectId}` : 'No project selected'}
+          >
+            Project
+          </button>
+          {scope === 'project' && selectedProjectId && (
+            <span className="text-[10px] text-content-muted ml-1 font-mono truncate max-w-[200px]">
+              {selectedProjectId}
+            </span>
+          )}
+        </div>
+
+        {/* Description */}
+        <div className="px-4 py-2 text-[11px] text-content-muted border-b border-edge">
+          {scope === 'global' ? (
+            <>
+              <strong>Global</strong> configs apply to all projects for your user.{' '}
+              Project-specific configs are merged on top (project overrides global).
+            </>
+          ) : (
+            <>
+              <strong>Project</strong> configs only apply to this project and override global configs
+              with the same server name.
+            </>
+          )}
+          {' '}<strong>Localhost</strong> servers are excluded in Docker.{' '}
+          <strong>Remote</strong> servers are used everywhere.
+        </div>
+
+        {/* Tabs */}
+        <div className="flex border-b border-edge">
+          {(['localhost', 'remote'] as ConfigTab[]).map((tab) => (
+            <button
+              key={tab}
+              type="button"
+              className={`flex-1 px-4 py-2 text-xs font-mono transition-colors ${
+                activeTab === tab
+                  ? 'text-accent border-b-2 border-accent bg-surface-alt'
+                  : 'text-content-muted hover:text-content hover:bg-surface-raised'
+              }`}
+              onClick={() => {
+                setActiveTab(tab);
+                setError(null);
+                setSuccess(null);
+              }}
+            >
+              {tab === 'localhost' ? 'Localhost' : 'Remote'}
+            </button>
+          ))}
+        </div>
+
+        {/* Editor */}
+        <div className="flex-1 overflow-auto p-4">
+          {loading ? (
+            <div className="text-content-muted text-xs text-center py-8">Loading...</div>
+          ) : (
+            <>
+              <label className="block text-[11px] text-content-muted mb-1.5">
+                mcpServers JSON ({activeTab === 'localhost' ? 'local dev only' : 'all environments'})
+              </label>
+              <textarea
+                className={`w-full h-64 bg-surface-alt border rounded font-mono text-xs text-content p-3 resize-y focus:outline-none focus:ring-1 ${
+                  jsonError ? 'border-error focus:ring-error' : 'border-edge focus:ring-accent'
+                }`}
+                value={currentJson}
+                onChange={(e) => {
+                  setCurrentJson(e.target.value);
+                  setError(null);
+                }}
+                placeholder={PLACEHOLDER_CONFIG}
+                spellCheck={false}
+              />
+              {jsonError && <p className="text-[11px] text-error mt-1">{jsonError}</p>}
+              <p className="text-[10px] text-content-muted mt-1.5">
+                Enter the content of the{' '}
+                <code className="bg-surface-raised px-1 rounded">mcpServers</code> object. Example:{' '}
+                <code className="bg-surface-raised px-1 rounded">
+                  {'{ "jetbrains": { "url": "http://localhost:6637/sse" } }'}
+                </code>
+              </p>
+            </>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between px-4 py-3 border-t border-edge">
+          <div className="text-[11px]">
+            {error && <span className="text-error">{error}</span>}
+            {success && <span className="text-accent">{success}</span>}
+          </div>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="h-7 px-3 rounded text-[11px] font-mono text-content-secondary bg-transparent border border-edge hover:bg-surface-raised transition-colors"
+            >
+              Close
+            </button>
+            <button
+              type="button"
+              onClick={handleSave}
+              disabled={saving || !!jsonError || loading}
+              className="h-7 px-3 rounded text-[11px] font-mono text-white bg-accent hover:bg-accent/90 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+            >
+              {saving ? 'Saving...' : 'Save'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/assistkick-product-system/packages/shared/db/migrations/0001_superb_roxanne_simpson.sql

@@ -0,0 +1,8 @@
+CREATE TABLE `user_mcp_configs` (
+	`id` text PRIMARY KEY NOT NULL,
+	`user_id` text NOT NULL,
+	`config_type` text NOT NULL,
+	`mcp_servers_json` text DEFAULT '{}' NOT NULL,
+	`created_at` text NOT NULL,
+	`updated_at` text NOT NULL
+);

package/templates/assistkick-product-system/packages/shared/db/migrations/0002_noisy_maelstrom.sql

@@ -0,0 +1 @@
+ALTER TABLE `user_mcp_configs` ADD `project_id` text;