@slycode/slycode 0.2.18 → 0.2.19

package/dist/web/src/components/StoreView.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useState } from 'react';
-import type { StoreData, StoreAssetInfo, AssetType } from '@/lib/types';
+import { useState, useEffect } from 'react';
+import type { StoreData, StoreAssetInfo, AssetType, ProviderId, Project } from '@/lib/types';
 import { AssetViewer } from './AssetViewer';
 
 interface StoreViewProps {
@@ -21,7 +21,8 @@ export function StoreView({ data, onFix, onAssistant, onRefresh }: StoreViewProp
   const [viewingAsset, setViewingAsset] = useState<StoreAssetInfo | null>(null);
   const [confirmDelete, setConfirmDelete] = useState<{ name: string; type: AssetType } | null>(null);
   const [deleting, setDeleting] = useState(false);
-  const [expandedSections, setExpandedSections] = useState({
+  const [deployTarget, setDeployTarget] = useState<{ name: string } | null>(null);
+  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({
     skills: true,
     agents: true,
     mcp: true,
@@ -48,8 +49,9 @@ export function StoreView({ data, onFix, onAssistant, onRefresh }: StoreViewProp
   }
 
   const sections = [
-    { key: 'skills' as const, label: 'Skills', assets: data.skills },
-    { key: 'agents' as const, label: 'Agents', assets: data.agents },
+    { key: 'skills', label: 'Skills', assets: data.skills },
+    { key: 'agents', label: 'Agents', assets: data.agents },
+    { key: 'mcp', label: 'MCP Configs', assets: data.mcp },
   ];
 
   return (
@@ -114,6 +116,15 @@ export function StoreView({ data, onFix, onAssistant, onRefresh }: StoreViewProp
                       </td>
                       <td className="px-4 py-2 text-right">
                         <div className="flex items-center justify-end gap-1">
+                          {asset.type === 'mcp' && (
+                            <button
+                              onClick={() => setDeployTarget({ name: asset.name })}
+                              className="rounded border border-neon-blue-400/30 bg-neon-blue-400/10 px-2 py-1 text-xs font-medium text-neon-blue-400 hover:bg-neon-blue-400/20"
+                              title="Deploy to project"
+                            >
+                              Deploy
+                            </button>
+                          )}
                           <button
                             onClick={() => setConfirmDelete({ name: asset.name, type: asset.type })}
                             className="rounded border border-red-400/30 bg-red-400/10 px-2 py-1 text-xs font-medium text-red-500 hover:bg-red-400/20"
@@ -155,62 +166,6 @@ export function StoreView({ data, onFix, onAssistant, onRefresh }: StoreViewProp
         </div>
       ))}
 
-      {/* MCP section */}
-      {data.mcp.length > 0 && (
-        <div className="rounded-lg border border-void-200 bg-white shadow-(--shadow-card) dark:border-void-700 dark:bg-void-850">
-          <button
-            onClick={() => toggleSection('mcp')}
-            className="flex w-full items-center justify-between px-4 py-3"
-          >
-            <div className="flex items-center gap-2">
-              <h3 className="text-sm font-semibold text-void-900 dark:text-void-100">MCP Configs</h3>
-              <span className="rounded-full bg-void-100 px-2 py-0.5 text-xs text-void-600 dark:bg-void-700 dark:text-void-300">
-                {data.mcp.length}
-              </span>
-            </div>
-            <svg
-              className={`h-4 w-4 text-void-400 transition-transform ${expandedSections.mcp ? 'rotate-180' : ''}`}
-              fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
-            >
-              <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-            </svg>
-          </button>
-          {expandedSections.mcp && (
-            <div className="border-t border-void-100 dark:border-void-700">
-              <table className="w-full text-sm">
-                <thead>
-                  <tr className="border-b border-void-200 dark:border-void-700">
-                    <th className="px-4 py-2 text-left text-xs font-medium text-void-500 dark:text-void-400">Name</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-void-500 dark:text-void-400">Description</th>
-                    <th className="px-4 py-2 text-left text-xs font-medium text-void-500 dark:text-void-400">Version</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {data.mcp.map(mcp => (
-                    <tr key={mcp.name} className="border-b border-void-100 dark:border-void-800">
-                      <td className="px-4 py-2 font-medium text-void-900 dark:text-void-100">
-                        <span className="flex items-center gap-2">
-                          {mcp.name}
-                          <span className={`rounded px-1.5 py-0.5 text-[10px] font-medium ${typeBadgeColors.mcp}`}>
-                            mcp
-                          </span>
-                        </span>
-                      </td>
-                      <td className="px-4 py-2 text-void-500 dark:text-void-400">
-                        {(mcp.frontmatter?.description as string) || '-'}
-                      </td>
-                      <td className="px-4 py-2 text-void-500 dark:text-void-400">
-                        {mcp.frontmatter?.version ? `v${mcp.frontmatter.version}` : '-'}
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
-      )}
-
       {/* Delete confirmation dialog */}
       {confirmDelete && (
         <div
@@ -248,6 +203,158 @@ export function StoreView({ data, onFix, onAssistant, onRefresh }: StoreViewProp
           onClose={() => setViewingAsset(null)}
         />
       )}
+
+      {/* MCP deploy dialog */}
+      {deployTarget && (
+        <McpDeployDialog
+          mcpName={deployTarget.name}
+          onClose={() => setDeployTarget(null)}
+          onDeployed={() => { setDeployTarget(null); onRefresh?.(); }}
+        />
+      )}
+    </div>
+  );
+}
+
+/**
+ * Deploy an MCP from the store to a project.
+ */
+function McpDeployDialog({ mcpName, onClose, onDeployed }: {
+  mcpName: string;
+  onClose: () => void;
+  onDeployed: () => void;
+}) {
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [selectedProject, setSelectedProject] = useState('');
+  const [selectedProvider, setSelectedProvider] = useState<ProviderId>('claude');
+  const [deploying, setDeploying] = useState(false);
+  const [result, setResult] = useState<{ success: boolean; message: string } | null>(null);
+
+  useEffect(() => {
+    fetch('/api/dashboard')
+      .then(r => r.json())
+      .then(data => {
+        if (data.projects) setProjects(data.projects);
+      })
+      .catch(() => {});
+  }, []);
+
+  async function handleDeploy() {
+    if (!selectedProject) return;
+    setDeploying(true);
+    setResult(null);
+    try {
+      const res = await fetch('/api/cli-assets/sync', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          changes: [{
+            assetName: mcpName,
+            assetType: 'mcp',
+            projectId: selectedProject,
+            action: 'deploy',
+            provider: selectedProvider,
+            source: 'store',
+          }],
+        }),
+      });
+      const data = await res.json();
+      const firstResult = data.results?.[0];
+      if (res.ok && firstResult?.success && firstResult?.error) {
+        // success=true but has error message means "already present — skipped"
+        setResult({ success: true, message: firstResult.error });
+      } else if (res.ok && firstResult?.success) {
+        setResult({ success: true, message: `Deployed to ${projects.find(p => p.id === selectedProject)?.name || selectedProject}` });
+        setTimeout(onDeployed, 1200);
+      } else {
+        setResult({ success: false, message: data.results?.[0]?.error || data.error || 'Deploy failed' });
+      }
+    } catch {
+      setResult({ success: false, message: 'Network error' });
+    }
+    setDeploying(false);
+  }
+
+  const providers: { id: ProviderId; label: string }[] = [
+    { id: 'claude', label: 'Claude' },
+    { id: 'codex', label: 'Codex' },
+    { id: 'gemini', label: 'Gemini' },
+  ];
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
+      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+    >
+      <div className="mx-4 w-full max-w-sm rounded-lg border border-void-700 bg-void-850 p-5 shadow-(--shadow-overlay)">
+        <h3 className="text-sm font-semibold text-void-100">
+          Deploy MCP: <span className="text-neon-blue-400">{mcpName}</span>
+        </h3>
+
+        <div className="mt-4 space-y-3">
+          {/* Project picker */}
+          <div>
+            <label className="mb-1 block text-xs font-medium text-void-400">Project</label>
+            <select
+              value={selectedProject}
+              onChange={(e) => setSelectedProject(e.target.value)}
+              className="w-full rounded-md border border-void-700 bg-void-900 px-3 py-2 text-sm text-void-200 focus:border-neon-blue-400/50 focus:outline-none"
+            >
+              <option value="">Select project...</option>
+              {projects.map(p => (
+                <option key={p.id} value={p.id}>{p.name}</option>
+              ))}
+            </select>
+          </div>
+
+          {/* Provider picker */}
+          <div>
+            <label className="mb-1 block text-xs font-medium text-void-400">Provider</label>
+            <div className="flex gap-1">
+              {providers.map(p => (
+                <button
+                  key={p.id}
+                  onClick={() => setSelectedProvider(p.id)}
+                  className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
+                    selectedProvider === p.id
+                      ? 'border border-neon-blue-400/40 bg-neon-blue-400/20 text-neon-blue-400'
+                      : 'border border-void-700 text-void-400 hover:border-void-600 hover:text-void-200'
+                  }`}
+                >
+                  {p.label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Result message */}
+          {result && (
+            <div className={`rounded-md border p-2 text-xs ${
+              result.success
+                ? 'border-green-400/30 bg-green-400/10 text-green-400'
+                : 'border-red-400/30 bg-red-400/10 text-red-400'
+            }`}>
+              {result.message}
+            </div>
+          )}
+        </div>
+
+        <div className="mt-4 flex justify-end gap-2">
+          <button
+            onClick={onClose}
+            className="rounded px-3 py-1.5 text-sm text-void-400 hover:text-void-200"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleDeploy}
+            disabled={!selectedProject || deploying}
+            className="rounded bg-neon-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-neon-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {deploying ? 'Deploying...' : 'Deploy'}
+          </button>
+        </div>
+      </div>
     </div>
   );
 }

package/dist/web/src/lib/asset-scanner.ts

@@ -350,7 +350,7 @@ export function getAssetPath(projectPath: string, assetType: AssetType, assetNam
     case 'agent':
       return path.join(projectPath, '.claude', 'agents', `${assetName}.md`);
     case 'mcp':
-      return path.join(projectPath, '.claude', 'settings.json');
+      return path.join(projectPath, '.mcp.json');
     default:
       return path.join(projectPath, '.claude', 'skills', assetName);
   }

package/dist/web/src/lib/mcp-common.ts

@@ -19,11 +19,12 @@ import { getProviderMcpConfigPath } from './provider-paths';
 
 export interface CommonMcpConfig {
   name: string;
-  command: string;
+  command?: string;
   args?: string[];
   env?: Record<string, string>;
+  url?: string;
+  headers?: Record<string, string>;
   timeout?: number;
-  transport?: string;
   version?: string;
   description?: string;
   updated?: string;
@@ -54,12 +55,20 @@ export function parseMcpFromStore(jsonPath: string): CommonMcpConfig | null {
  * Claude uses JSON: { "mcpServers": { "name": { command, args, env } } }
  */
 export function transformToClaudeMcp(config: CommonMcpConfig): Record<string, unknown> {
-  const entry: Record<string, unknown> = {
-    command: config.command,
-  };
-  if (config.args?.length) entry.args = config.args;
-  if (config.env && Object.keys(config.env).length > 0) entry.env = config.env;
-  if (config.timeout) entry.timeout = config.timeout;
+  const entry: Record<string, unknown> = {};
+
+  if (config.url) {
+    // HTTP transport
+    entry.type = 'http';
+    entry.url = config.url;
+    if (config.headers && Object.keys(config.headers).length > 0) entry.headers = config.headers;
+  } else if (config.command) {
+    // Stdio transport
+    entry.command = config.command;
+    if (config.args?.length) entry.args = config.args;
+    if (config.env && Object.keys(config.env).length > 0) entry.env = config.env;
+    if (config.timeout) entry.timeout = config.timeout;
+  }
 
   return { [config.name]: entry };
 }
@@ -69,11 +78,18 @@ export function transformToClaudeMcp(config: CommonMcpConfig): Record<string, un
  * Gemini also uses JSON, similar to Claude.
  */
 export function transformToGeminiMcp(config: CommonMcpConfig): Record<string, unknown> {
-  const entry: Record<string, unknown> = {
-    command: config.command,
-  };
-  if (config.args?.length) entry.args = config.args;
-  if (config.env && Object.keys(config.env).length > 0) entry.env = config.env;
+  const entry: Record<string, unknown> = {};
+
+  if (config.url) {
+    // HTTP transport — Gemini uses httpUrl (NOT url; url means SSE in Gemini)
+    entry.httpUrl = config.url;
+    if (config.headers && Object.keys(config.headers).length > 0) entry.headers = config.headers;
+  } else if (config.command) {
+    // Stdio transport
+    entry.command = config.command;
+    if (config.args?.length) entry.args = config.args;
+    if (config.env && Object.keys(config.env).length > 0) entry.env = config.env;
+  }
 
   return { [config.name]: entry };
 }
@@ -85,18 +101,30 @@ export function transformToGeminiMcp(config: CommonMcpConfig): Record<string, un
 export function transformToCodexMcp(config: CommonMcpConfig): string {
   const lines: string[] = [];
   lines.push(`[mcp_servers.${config.name}]`);
-  lines.push(`command = "${config.command}"`);
-
-  if (config.args?.length) {
-    const argsStr = config.args.map(a => `"${a}"`).join(', ');
-    lines.push(`args = [${argsStr}]`);
-  }
 
-  if (config.env && Object.keys(config.env).length > 0) {
-    lines.push('');
-    lines.push(`[mcp_servers.${config.name}.env]`);
-    for (const [key, value] of Object.entries(config.env)) {
-      lines.push(`${key} = "${value}"`);
+  if (config.url) {
+    // HTTP transport — Codex uses url + http_headers (not headers)
+    lines.push(`url = "${config.url}"`);
+    if (config.headers && Object.keys(config.headers).length > 0) {
+      lines.push('');
+      lines.push(`[mcp_servers.${config.name}.http_headers]`);
+      for (const [key, value] of Object.entries(config.headers)) {
+        lines.push(`${key} = "${value}"`);
+      }
+    }
+  } else if (config.command) {
+    // Stdio transport
+    lines.push(`command = "${config.command}"`);
+    if (config.args?.length) {
+      const argsStr = config.args.map(a => `"${a}"`).join(', ');
+      lines.push(`args = [${argsStr}]`);
+    }
+    if (config.env && Object.keys(config.env).length > 0) {
+      lines.push('');
+      lines.push(`[mcp_servers.${config.name}.env]`);
+      for (const [key, value] of Object.entries(config.env)) {
+        lines.push(`${key} = "${value}"`);
+      }
     }
   }
 
@@ -111,20 +139,22 @@ export function transformToCodexMcp(config: CommonMcpConfig): string {
  * Activate an MCP server in a project for a specific provider.
  * Reads the provider's config file, merges the MCP entry, writes back.
  */
+export type ActivateResult = 'deployed' | 'already_exists';
+
 export function activateMcp(
   projectPath: string,
   provider: ProviderId,
   config: CommonMcpConfig,
-): void {
+): ActivateResult {
   const configPath = getProviderMcpConfigPath(projectPath, provider);
   if (!configPath) {
     throw new Error(`Provider '${provider}' does not have an MCP config path`);
   }
 
   if (provider === 'codex') {
-    activateCodexMcp(configPath, config);
+    return activateCodexMcp(configPath, config);
   } else {
-    activateJsonMcp(configPath, config, provider);
+    return activateJsonMcp(configPath, config, provider);
   }
 }
 
@@ -154,7 +184,7 @@ function activateJsonMcp(
   configPath: string,
   config: CommonMcpConfig,
   provider: ProviderId,
-): void {
+): ActivateResult {
   let existing: Record<string, unknown> = {};
   try {
     if (fs.existsSync(configPath)) {
@@ -165,6 +195,10 @@ function activateJsonMcp(
   }
 
   const mcpServers = (existing.mcpServers || {}) as Record<string, unknown>;
+
+  // Skip if an entry with this name already exists
+  if (config.name in mcpServers) return 'already_exists';
+
   const transformed = provider === 'claude'
     ? transformToClaudeMcp(config)
     : transformToGeminiMcp(config);
@@ -174,6 +208,7 @@ function activateJsonMcp(
 
   fs.mkdirSync(path.dirname(configPath), { recursive: true });
   fs.writeFileSync(configPath, JSON.stringify(existing, null, 2) + '\n');
+  return 'deployed';
 }
 
 function deactivateJsonMcp(configPath: string, mcpName: string): void {
@@ -196,7 +231,7 @@ function deactivateJsonMcp(configPath: string, mcpName: string): void {
 // TOML-based MCP (Codex)
 // ============================================================================
 
-function activateCodexMcp(configPath: string, config: CommonMcpConfig): void {
+function activateCodexMcp(configPath: string, config: CommonMcpConfig): ActivateResult {
   let content = '';
   try {
     if (fs.existsSync(configPath)) {
@@ -206,8 +241,9 @@ function activateCodexMcp(configPath: string, config: CommonMcpConfig): void {
     content = '';
   }
 
-  // Remove existing section for this MCP if present
-  content = removeTomlSection(content, `mcp_servers.${config.name}`);
+  // Skip if this MCP section already exists
+  const sectionHeader = `[mcp_servers.${config.name}]`;
+  if (content.includes(sectionHeader)) return 'already_exists';
 
   // Append new section
   const tomlSection = transformToCodexMcp(config);
@@ -215,6 +251,7 @@ function activateCodexMcp(configPath: string, config: CommonMcpConfig): void {
 
   fs.mkdirSync(path.dirname(configPath), { recursive: true });
   fs.writeFileSync(configPath, content);
+  return 'deployed' as const;
 }
 
 function deactivateCodexMcp(configPath: string, mcpName: string): void {
@@ -230,25 +267,27 @@ function deactivateCodexMcp(configPath: string, mcpName: string): void {
 }
 
 /**
- * Remove a TOML section and its contents.
- * Simple approach: find [section.name] header, remove lines until next [section] or EOF.
+ * Remove a TOML section and all its subsections.
+ * Matches [sectionName] and any [sectionName.*] (e.g. .env, .http_headers).
+ * Removes lines until the next unrelated [section] or EOF.
  */
 function removeTomlSection(content: string, sectionName: string): string {
   const lines = content.split('\n');
   const result: string[] = [];
-  const header = `[${sectionName}]`;
-  const envHeader = `[${sectionName}.env]`;
+  const prefix = `[${sectionName}`;
   let skipping = false;
 
   for (const line of lines) {
     const trimmed = line.trim();
 
-    if (trimmed === header || trimmed === envHeader) {
+    // Match [sectionName] or [sectionName.anything]
+    if (trimmed.startsWith(prefix) && (trimmed === `${prefix}]` || trimmed.startsWith(`${prefix}.`))) {
       skipping = true;
       continue;
     }
 
-    if (skipping && trimmed.startsWith('[') && trimmed !== header && trimmed !== envHeader) {
+    // Stop skipping when we hit a different section header
+    if (skipping && trimmed.startsWith('[')) {
       skipping = false;
     }
 

package/dist/web/src/lib/provider-paths.ts

@@ -18,7 +18,7 @@ const PROVIDER_PATHS: Record<ProviderId, ProviderAssetPaths> = {
   claude: {
     skills: '.claude/skills',
     agents: '.claude/agents',
-    mcpConfig: '.claude/settings.json',
+    mcpConfig: '.mcp.json',
   },
   agents: {
     skills: '.agents/skills',

package/dist/web/src/lib/store-scanner.ts

@@ -109,7 +109,7 @@ function scanStoreMcp(storePath: string): StoreAssetInfo[] {
           description: parsed.description,
           updated: parsed.updated,
         },
-        isValid: !!(parsed.name && parsed.command),
+        isValid: !!(parsed.name && (parsed.command || parsed.url)),
       });
     }
   } catch {