@aion0/forge 0.8.4 → 0.8.6

package/components/PipelineView.tsx

@@ -459,6 +459,70 @@ export default function PipelineView({ onViewTask, focusPipelineId, onFocusHandl
   const [editorIsConversation, setEditorIsConversation] = useState(false);
   const [showImport, setShowImport] = useState(false);
   const [importYaml, setImportYaml] = useState('');
+  const importFileRef = useRef<HTMLInputElement | null>(null);
+
+  // Marketplace state — pull pipeline templates from the configured
+  // workflowRepoUrl (default: aiwatching/forge-workflow). Stays collapsed
+  // until the user clicks the header button.
+  type MarketRow = {
+    kind: 'pipeline'; name: string; display_name: string; description?: string;
+    version: string; author?: string; tags?: string[];
+    source: 'registry' | 'local'; installed: boolean;
+    installed_version?: string; has_update?: boolean;
+  };
+  const [showMarketplace, setShowMarketplace] = useState(false);
+  const [marketRows, setMarketRows] = useState<MarketRow[] | null>(null);
+  const [marketBusy, setMarketBusy] = useState(false);
+  const [marketErr, setMarketErr] = useState<string>('');
+
+  async function fetchMarketplace() {
+    try {
+      const res = await fetch('/api/workflows/marketplace');
+      const data = await res.json();
+      setMarketRows((data.pipelines || []) as MarketRow[]);
+    } catch (e) {
+      setMarketErr(e instanceof Error ? e.message : String(e));
+      setMarketRows([]);
+    }
+  }
+
+  async function syncMarketplace() {
+    setMarketBusy(true);
+    setMarketErr('');
+    try {
+      const res = await fetch('/api/workflows/marketplace', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'sync' }),
+      });
+      const data = await res.json();
+      if (!data.ok) setMarketErr(data.error || 'sync failed');
+      await fetchMarketplace();
+    } catch (e) {
+      setMarketErr(e instanceof Error ? e.message : String(e));
+    } finally {
+      setMarketBusy(false);
+    }
+  }
+
+  async function installFromMarketplace(name: string) {
+    setMarketBusy(true);
+    setMarketErr('');
+    try {
+      const res = await fetch('/api/workflows/marketplace', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'install', kind: 'pipeline', name }),
+      });
+      const data = await res.json();
+      if (!data.ok) { setMarketErr(data.error || 'install failed'); return; }
+      await Promise.all([fetchMarketplace(), fetchData()]);
+    } catch (e) {
+      setMarketErr(e instanceof Error ? e.message : String(e));
+    } finally {
+      setMarketBusy(false);
+    }
+  }
   const [agents, setAgents] = useState<{ id: string; name: string; detected?: boolean }[]>([]);
 
   // "Load older runs" state, per-workflow. The initial /api/pipelines fetch
@@ -694,19 +758,155 @@ initial_prompt: "{{input.task}}"
             onClick={() => { setImportYaml(generateConversationTemplate()); setShowImport(true); }}
             className="text-[9px] text-purple-400 hover:underline"
           >+ Conversation</button>
+          <button
+            onClick={() => {
+              const next = !showMarketplace;
+              setShowMarketplace(next);
+              if (next && marketRows == null) void fetchMarketplace();
+            }}
+            className="text-[9px] text-blue-400 hover:underline"
+            title="Import a workflow from the marketplace as a new local copy"
+          >+ From marketplace</button>
         </div>
 
+        {/* Marketplace import — each pipeline in the registry can be
+            cloned to as many local copies as you want, each with a
+            unique name. The local copy is fully independent of the
+            upstream — edits don't propagate either way. */}
+        {showMarketplace && (
+          <div className="p-3 border-b border-[var(--border)] space-y-2">
+            <div className="flex items-center gap-2 mb-1">
+              <span className="text-[10px] font-semibold text-[var(--text-secondary)] flex-1">
+                Pipelines from forge-workflow
+              </span>
+              <button
+                onClick={() => void syncMarketplace()}
+                disabled={marketBusy}
+                className="text-[9px] px-2 py-0.5 border border-[var(--border)] text-[var(--text-secondary)] rounded hover:text-[var(--text-primary)] disabled:opacity-50"
+              >{marketBusy ? '…' : 'Sync'}</button>
+            </div>
+            {marketRows == null ? (
+              <div className="text-[10px] text-[var(--text-secondary)]">Loading…</div>
+            ) : marketRows.length === 0 ? (
+              <div className="text-[10px] text-[var(--text-secondary)]">
+                Nothing yet — click <b>Sync</b> to pull the registry.
+              </div>
+            ) : (
+              <div className="space-y-1.5 max-h-80 overflow-y-auto">
+                {marketRows.map((r) => (
+                  <div key={r.name} className="border border-[var(--border)]/60 rounded p-2 bg-[var(--bg-tertiary)]/40">
+                    <div className="flex items-baseline gap-1.5">
+                      <span className="text-[10px] font-semibold text-[var(--text-primary)] truncate flex-1">{r.display_name}</span>
+                      <span className="text-[8px] text-[var(--text-secondary)] font-mono">v{r.version}</span>
+                      {r.installed && (
+                        <span className="text-[8px] text-[var(--green)]">installed</span>
+                      )}
+                      {r.installed && (
+                        <button
+                          onClick={async () => {
+                            if (!confirm(`Reinstall "${r.name}" from registry (v${r.version})?\n\nThis OVERWRITES your local copy at ~/.forge/data/flows/${r.name}.yaml — any local edits will be lost.`)) return;
+                            setMarketBusy(true);
+                            setMarketErr('');
+                            try {
+                              const res = await fetch('/api/workflows/marketplace', {
+                                method: 'POST',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify({ action: 'install', kind: 'pipeline', name: r.name, target_name: r.name, overwrite: true }),
+                              });
+                              const data = await res.json();
+                              if (!data.ok) { setMarketErr(data.error || 'reinstall failed'); return; }
+                              await Promise.all([fetchMarketplace(), fetchData()]);
+                              alert(`"${r.name}" reinstalled from registry (v${r.version}).`);
+                            } catch (e) {
+                              setMarketErr(e instanceof Error ? e.message : String(e));
+                            } finally { setMarketBusy(false); }
+                          }}
+                          disabled={marketBusy}
+                          className="text-[8px] px-2 py-0.5 border border-[var(--yellow)] text-[var(--yellow)] rounded hover:bg-[var(--yellow)] hover:text-black disabled:opacity-50"
+                          title="Overwrite the local copy with the latest from registry"
+                        >Reinstall</button>
+                      )}
+                      <button
+                        onClick={async () => {
+                          const installed = r.installed;
+                          const defaultName = installed ? `${r.name}-2` : r.name;
+                          const localName = window.prompt(
+                            installed
+                              ? `"${r.name}" is already installed locally. Pick a NEW name for an additional copy (or click Reinstall to overwrite):`
+                              : `Create a local copy of "${r.name}". Pick a name for your copy:`,
+                            defaultName,
+                          );
+                          if (!localName) return;
+                          const trimmed = localName.trim();
+                          if (!/^[a-z0-9][a-z0-9_-]*$/.test(trimmed)) {
+                            alert('Name must be lowercase alphanumerics + hyphens/underscores');
+                            return;
+                          }
+                          setMarketBusy(true);
+                          setMarketErr('');
+                          try {
+                            const res = await fetch('/api/workflows/marketplace', {
+                              method: 'POST',
+                              headers: { 'Content-Type': 'application/json' },
+                              body: JSON.stringify({ action: 'install', kind: 'pipeline', name: r.name, target_name: trimmed }),
+                            });
+                            const data = await res.json();
+                            if (!data.ok) { setMarketErr(data.error || 'import failed'); return; }
+                            await Promise.all([fetchMarketplace(), fetchData()]);
+                            alert(`Imported as "${data.installed_as}". Open it from the Workflows list.`);
+                          } catch (e) {
+                            setMarketErr(e instanceof Error ? e.message : String(e));
+                          } finally { setMarketBusy(false); }
+                        }}
+                        disabled={marketBusy}
+                        className="text-[8px] px-2 py-0.5 border border-[var(--accent)] text-[var(--accent)] rounded hover:bg-[var(--accent)] hover:text-white disabled:opacity-50"
+                      >{r.installed ? 'Import as new copy…' : 'Import as…'}</button>
+                    </div>
+                    {r.description && (
+                      <p className="text-[9px] text-[var(--text-secondary)] mt-1 line-clamp-3">{r.description}</p>
+                    )}
+                    {r.tags && r.tags.length > 0 && (
+                      <div className="text-[8px] text-[var(--text-secondary)] mt-1">
+                        {r.tags.map((t) => `#${t}`).join(' ')}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+            {marketErr && (
+              <div className="text-[10px] text-[var(--red)]">{marketErr}</div>
+            )}
+          </div>
+        )}
+
         {/* Import form */}
         {showImport && (
           <div className="p-3 border-b border-[var(--border)] space-y-2">
+            <input
+              ref={importFileRef}
+              type="file"
+              accept=".yaml,.yml"
+              className="hidden"
+              onChange={(e) => {
+                const f = e.target.files?.[0];
+                e.target.value = '';
+                if (!f) return;
+                f.text().then(setImportYaml).catch(() => alert('Failed to read file'));
+              }}
+            />
             <textarea
               value={importYaml}
               onChange={e => setImportYaml(e.target.value)}
-              placeholder="Paste YAML workflow here..."
+              placeholder="Paste YAML workflow here, or pick a .yaml file →"
               className="w-full h-40 text-xs font-mono bg-[var(--bg-tertiary)] border border-[var(--border)] rounded p-2 text-[var(--text-primary)] resize-none focus:outline-none focus:border-[var(--accent)]"
               spellCheck={false}
             />
             <div className="flex gap-2">
+              <button
+                onClick={() => importFileRef.current?.click()}
+                className="text-[10px] px-3 py-1 border border-[var(--border)] text-[var(--text-secondary)] rounded hover:text-[var(--text-primary)]"
+              >Pick file…</button>
               <button
                 onClick={async () => {
                   if (!importYaml.trim()) return;
@@ -850,6 +1050,45 @@ initial_prompt: "{{input.task}}"
                     className="text-[8px] text-green-400 hover:underline shrink-0"
                     title={w.builtin ? 'View YAML' : 'Edit'}
                   >{w.builtin ? 'View' : 'Edit'}</button>
+                  <button
+                    onClick={async (e) => {
+                      e.stopPropagation();
+                      try {
+                        const res = await fetch(`/api/pipelines?type=workflow-yaml&name=${encodeURIComponent(w.name)}`);
+                        const data = await res.json();
+                        if (!data.yaml) { alert('Failed to load yaml'); return; }
+                        // Trigger a file download — share = send this .yaml file.
+                        const blob = new Blob([data.yaml], { type: 'application/x-yaml' });
+                        const url = URL.createObjectURL(blob);
+                        const a = document.createElement('a');
+                        a.href = url; a.download = `${w.name}.yaml`; a.click();
+                        URL.revokeObjectURL(url);
+                      } catch { alert('Export failed'); }
+                    }}
+                    className="text-[8px] text-blue-400 hover:underline shrink-0"
+                    title="Download YAML to share"
+                  >Export</button>
+                  {!w.builtin && (
+                    <button
+                      onClick={async (e) => {
+                        e.stopPropagation();
+                        if (!confirm(`Delete workflow "${w.name}"? This removes the .yaml file from disk.`)) return;
+                        try {
+                          const res = await fetch('/api/pipelines', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ action: 'delete-workflow', name: w.name }),
+                          });
+                          const data = await res.json();
+                          if (!res.ok || data.error) { alert(`Delete failed: ${data.error || res.status}`); return; }
+                          if (activeWorkflow === w.name) setActiveWorkflow(null);
+                          fetchData();
+                        } catch { alert('Delete failed'); }
+                      }}
+                      className="text-[8px] text-[var(--red)] hover:underline shrink-0"
+                      title="Delete this user workflow"
+                    >Del</button>
+                  )}
                 </div>
                 {/* Execution history for this workflow */}
                 {isActive && (() => {
@@ -1018,11 +1257,15 @@ initial_prompt: "{{input.task}}"
                 Started: {new Date(selectedPipeline.createdAt).toLocaleString()}
                 {selectedPipeline.completedAt && ` · Completed: ${new Date(selectedPipeline.completedAt).toLocaleString()}`}
               </div>
-              {Object.keys(selectedPipeline.input).length > 0 && (
-                <div className="text-[9px] text-[var(--text-secondary)] mt-1">
-                  Input: {Object.entries(selectedPipeline.input).map(([k, v]) => `${k}="${v}"`).join(', ')}
-                </div>
-              )}
+              {Object.keys(selectedPipeline.input).length > 0 && (() => {
+                const inputStr = Object.entries(selectedPipeline.input).map(([k, v]) => `${k}="${v}"`).join(', ');
+                return (
+                  <div
+                    className="text-[9px] text-[var(--text-secondary)] mt-1 max-h-20 overflow-y-auto whitespace-pre-wrap break-words"
+                    title={inputStr}
+                  >Input: {inputStr}</div>
+                );
+              })()}
             </div>
 
             {/* Conversation or DAG visualization */}
@@ -1088,7 +1331,12 @@ initial_prompt: "{{input.task}}"
                     >{w.builtin ? 'View YAML' : 'Edit'}</button>
                   </div>
                 </div>
-                {w.description && <p className="text-[10px] text-[var(--text-secondary)] mt-1">{w.description}</p>}
+                {w.description && (
+                  <p
+                    className="text-[10px] text-[var(--text-secondary)] mt-1 max-h-20 overflow-y-auto whitespace-pre-wrap break-words"
+                    title={w.description}
+                  >{w.description}</p>
+                )}
                 {Object.keys(w.input).length > 0 && (
                   <div className="mt-2 flex flex-wrap gap-1">
                     {Object.entries(w.input).map(([k, v]) => (

package/components/SettingsModal.tsx

@@ -860,9 +860,10 @@ function ProfileRow({ id, cfg, inputClass, onUpdate, onDelete }: {
                   <select value={cfg.provider || 'anthropic'} onChange={e => onUpdate({ ...cfg, provider: e.target.value })} className={inputClass}>
                     <option value="anthropic">Anthropic</option>
                     <option value="openai">OpenAI</option>
+                    <option value="grok">Grok / xAI</option>
+                    <option value="google">Google / Gemini</option>
+                    <option value="deepseek">DeepSeek</option>
                     <option value="litellm">LiteLLM (OpenAI-compatible proxy)</option>
-                    <option value="grok">Grok</option>
-                    <option value="google">Google</option>
                   </select>
                 </div>
                 <div className="flex-1">
@@ -871,11 +872,28 @@ function ProfileRow({ id, cfg, inputClass, onUpdate, onDelete }: {
                 </div>
               </div>
               <div>
-                <label className="text-[8px] text-[var(--text-secondary)]">Base URL (optional · LiteLLM / Azure / self-hosted proxy)</label>
+                <label className="text-[8px] text-[var(--text-secondary)]">
+                  Base URL {(() => {
+                    const p = (cfg.provider || '').toLowerCase();
+                    if (p === 'litellm') return '— required (LiteLLM / proxy)';
+                    if (p === '' || p === 'other') return '— optional';
+                    return '— optional, leave empty to use the provider default below';
+                  })()}
+                </label>
                 <input
                   value={cfg.baseUrl || ''}
                   onChange={e => onUpdate({ ...cfg, baseUrl: e.target.value })}
-                  placeholder={cfg.provider === 'anthropic' ? 'https://api.anthropic.com' : 'http://127.0.0.1:4000/v1'}
+                  placeholder={(() => {
+                    switch ((cfg.provider || '').toLowerCase()) {
+                      case 'anthropic': return 'https://api.anthropic.com  (default)';
+                      case 'openai': return 'https://api.openai.com/v1  (default)';
+                      case 'grok': case 'xai': return 'https://api.x.ai/v1  (default)';
+                      case 'google': case 'gemini': return 'https://generativelanguage.googleapis.com/v1beta/openai  (default)';
+                      case 'deepseek': return 'https://api.deepseek.com  (default)';
+                      case 'litellm': return 'http://127.0.0.1:4000/v1';
+                      default: return 'https://...';
+                    }
+                  })()}
                   className={inputClass + ' font-mono'}
                 />
               </div>
@@ -1085,9 +1103,10 @@ function AddProfileForm({ type, baseAgents, onAdd }: {
               <select value={provider} onChange={e => setProvider(e.target.value)} className={inputClass}>
                 <option value="anthropic">Anthropic</option>
                 <option value="openai">OpenAI</option>
+                <option value="grok">Grok / xAI</option>
+                <option value="google">Google / Gemini</option>
+                <option value="deepseek">DeepSeek</option>
                 <option value="litellm">LiteLLM (OpenAI-compatible proxy)</option>
-                <option value="grok">Grok</option>
-                <option value="google">Google</option>
               </select>
             </div>
             <div className="flex-1">
@@ -1100,11 +1119,23 @@ function AddProfileForm({ type, baseAgents, onAdd }: {
             <input type="password" value={apiKey} onChange={e => setApiKey(e.target.value)} placeholder="sk-..." className={inputClass} />
           </div>
           <div>
-            <label className="text-[8px] text-[var(--text-secondary)]">Base URL (optional · LiteLLM / Azure / self-hosted)</label>
+            <label className="text-[8px] text-[var(--text-secondary)]">
+              Base URL {provider === 'litellm' ? '(required)' : '(optional — leave empty for provider default)'}
+            </label>
             <input
               value={baseUrl}
               onChange={e => setBaseUrl(e.target.value)}
-              placeholder={provider === 'anthropic' ? 'https://api.anthropic.com' : 'http://127.0.0.1:4000/v1'}
+              placeholder={(() => {
+                switch (provider) {
+                  case 'anthropic': return 'https://api.anthropic.com  (default)';
+                  case 'openai': return 'https://api.openai.com/v1  (default)';
+                  case 'grok': return 'https://api.x.ai/v1  (default)';
+                  case 'google': return 'https://generativelanguage.googleapis.com/v1beta/openai  (default)';
+                  case 'deepseek': return 'https://api.deepseek.com  (default)';
+                  case 'litellm': return 'http://127.0.0.1:4000/v1';
+                  default: return 'https://...';
+                }
+              })()}
               className={inputClass + ' font-mono'}
             />
           </div>
@@ -1175,9 +1206,13 @@ function AgentsSection({ settings, setSettings }: { settings: any; setSettings:
           });
         }
 
-        // Add configured but not detected agents
+        // Add configured but not detected agents. Skip rows that are
+        // profiles (CLI profile with `base`, or API profile with
+        // `type: 'api'`) — those have their own Profiles section below
+        // and don't belong in the Agents list.
         for (const [id, cfg] of Object.entries(configured) as [string, any][]) {
           if (merged.find(a => a.id === id)) continue;
+          if (cfg.type === 'api' || cfg.base) continue;
           merged.push({
             id,
             name: cfg.name ?? id,
@@ -1751,7 +1786,7 @@ function ChatAgentSelect({ settings, setSettings }: { settings: any; setSettings
     <div className="mt-4 pt-3 border-t border-[var(--border)]">
       <label className="text-xs text-[var(--text-secondary)] font-semibold uppercase mb-2 block">Chat backend</label>
       <div className="flex items-center gap-2">
-        <span className="text-[9px] text-[var(--text-secondary)]">Default chat agent:</span>
+        <span className="text-[9px] text-[var(--text-secondary)]">Default chat profile:</span>
         <select
           value={settings.chatAgent || ''}
           onChange={e => setSettings({ ...settings, chatAgent: e.target.value })}