@aion0/forge 0.10.40 → 0.10.42

package/components/SettingsModal.tsx

@@ -47,9 +47,19 @@ function SecretChangeDialog({ field, label, isSet, onSave, onClose }: {
   const [error, setError] = useState('');
   const [saving, setSaving] = useState(false);
 
+  // First-time admin password bootstrap: when the user is setting the
+  // admin password itself AND none exists yet, there's nothing to verify
+  // against — hide the "Admin password" input and just collect the new
+  // value. Backend mirrors the bypass.
+  const isFirstAdminSet = field === 'telegramTunnelPassword' && !isSet;
+
   const canSave = mode === 'clear'
     ? adminPassword.length > 0
-    : (adminPassword.length > 0 && newValue.length > 0 && newValue === confirmValue);
+    : (
+        (isFirstAdminSet || adminPassword.length > 0)
+        && newValue.length > 0
+        && newValue === confirmValue
+      );
 
   const handleSave = async () => {
     if (mode === 'change' && newValue !== confirmValue) {
@@ -95,15 +105,22 @@ function SecretChangeDialog({ field, label, isSet, onSave, onClose }: {
           )}
         </div>
 
-        <div className="space-y-1">
-          <label className="text-[10px] text-[var(--text-secondary)]">Admin password (login password)</label>
-          <SecretInput
-            value={adminPassword}
-            onChange={v => { setAdminPassword(v); setError(''); }}
-            placeholder="Enter login password to verify"
-            className={inputClass}
-          />
-        </div>
+        {!isFirstAdminSet && (
+          <div className="space-y-1">
+            <label className="text-[10px] text-[var(--text-secondary)]">Admin password (login password)</label>
+            <SecretInput
+              value={adminPassword}
+              onChange={v => { setAdminPassword(v); setError(''); }}
+              placeholder="Enter login password to verify"
+              className={inputClass}
+            />
+          </div>
+        )}
+        {isFirstAdminSet && (
+          <p className="text-[10px] text-[var(--text-secondary)]">
+            No admin password set yet — skipping verification. Pick one below.
+          </p>
+        )}
 
         {mode === 'change' && (
           <>
@@ -346,6 +363,41 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
       >
         <h2 className="text-sm font-bold">Settings</h2>
 
+        {/* Identity — display name, email, company, dept. At the top
+            because every other config (connector usernames, Jenkins
+            inject_params, tunnel ownership) derives from these via
+            {user.*} / {dept.*} tokens. Company + dept are auto-filled
+            by the wizard when picking an enterprise template; changing
+            dept here triggers a re-apply of that dept's template. */}
+        <div className="grid grid-cols-2 gap-2">
+          <div className="space-y-1">
+            <label className="text-xs text-[var(--text-secondary)] font-semibold uppercase">Display Name</label>
+            <input
+              type="text"
+              value={(settings as any).displayName || ''}
+              onChange={e => setSettings({ ...settings, displayName: e.target.value } as any)}
+              placeholder="Forge"
+              className="w-full px-2 py-1 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)]"
+            />
+          </div>
+          <div className="space-y-1">
+            <label className="text-xs text-[var(--text-secondary)] font-semibold uppercase">Email</label>
+            <input
+              type="email"
+              value={(settings as any).displayEmail || ''}
+              onChange={e => setSettings({ ...settings, displayEmail: e.target.value } as any)}
+              placeholder="local@forge"
+              className="w-full px-2 py-1 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)]"
+            />
+          </div>
+        </div>
+        <ProfileCompanyDeptRow settings={settings} setSettings={setSettings} />
+
+        {/* Marketplace Providers (enterprise repo keys) — right after
+            identity because most users who care about settings at all
+            are here to manage / inspect enterprise sources. */}
+        <MarketplaceProvidersSection />
+
         {/* Project Roots */}
         <div className="space-y-2">
           <label className="text-xs text-[var(--text-secondary)] font-semibold uppercase">
@@ -803,59 +855,6 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
 
         </div>
 
-        {/* Display Name */}
-        <div className="space-y-2">
-          <label className="text-xs text-[var(--text-secondary)] font-semibold uppercase">
-            Display Name
-          </label>
-          <input
-            type="text"
-            value={(settings as any).displayName || ''}
-            onChange={e => setSettings({ ...settings, displayName: e.target.value } as any)}
-            placeholder="Forge"
-            className="w-full px-2 py-1 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)]"
-          />
-        </div>
-
-        {/* Email */}
-        <div className="space-y-2">
-          <label className="text-xs text-[var(--text-secondary)] font-semibold uppercase">
-            Email
-          </label>
-          <input
-            type="email"
-            value={(settings as any).displayEmail || ''}
-            onChange={e => setSettings({ ...settings, displayEmail: e.target.value } as any)}
-            placeholder="local@forge"
-            className="w-full px-2 py-1 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)]"
-          />
-        </div>
-
-        {/* Re-run Onboarding */}
-        <div className="space-y-2">
-          <label className="text-xs text-[var(--text-secondary)] font-semibold uppercase">
-            Onboarding
-          </label>
-          <button
-            type="button"
-            onClick={async () => {
-              await fetch('/api/onboarding', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ action: 'reset' }),
-              });
-              // Reload so the Dashboard banner re-renders.
-              window.location.reload();
-            }}
-            className="text-[11px] px-2.5 py-1 border border-[var(--accent)] text-[var(--accent)] rounded hover:bg-[var(--accent)] hover:text-white"
-          >
-            ↺ Re-run Onboarding wizard
-          </button>
-          <p className="text-[10px] text-[var(--text-secondary)]">
-            Re-opens the first-run setup banner. Existing values are preserved — the wizard never overwrites non-empty fields.
-          </p>
-        </div>
-
         {/* Admin Password */}
         <div className="space-y-2">
           <label className="text-xs text-[var(--text-secondary)] font-semibold uppercase">
@@ -1356,6 +1355,326 @@ function AddProfileForm({ type, baseAgents, onAdd }: {
   );
 }
 
+/**
+ * Company + Dept dropdowns for the Identity block. Pure profile fields
+ * — editing them just updates the label. The wizard does the actual
+ * template apply on first setup; to re-pick a template the user goes
+ * through Re-run wizard.
+ */
+function ProfileCompanyDeptRow({ settings, setSettings }: { settings: any; setSettings: (s: any) => void }) {
+  const [sources, setSources] = useState<EnterpriseSourceView[]>([]);
+  useEffect(() => {
+    fetch('/api/enterprise-keys').then(r => r.json()).then(j => setSources(j.sources || [])).catch(() => {});
+  }, []);
+  const currentCompany: string = settings?.company || '';
+  const sourceForCompany = sources.find(s => s.display_name === currentCompany);
+  return (
+    <div className="space-y-1">
+      <div className="grid grid-cols-2 gap-2">
+        <div className="space-y-1">
+          <label className="text-xs text-[var(--text-secondary)] font-semibold uppercase">Company</label>
+          <select
+            value={currentCompany}
+            onChange={e => setSettings({ ...settings, company: e.target.value, dept: '' })}
+            className="w-full px-2 py-1 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)]"
+          >
+            <option value="">(none — public)</option>
+            {sources.map(s => (
+              <option key={s.tenant_id} value={s.display_name}>{s.display_name}</option>
+            ))}
+          </select>
+        </div>
+        <div className="space-y-1">
+          <label className="text-xs text-[var(--text-secondary)] font-semibold uppercase">Department</label>
+          <select
+            value={settings?.dept || ''}
+            disabled={!sourceForCompany?.departments?.length}
+            onChange={e => setSettings({ ...settings, dept: e.target.value })}
+            className="w-full px-2 py-1 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)] disabled:opacity-50"
+          >
+            <option value="">{sourceForCompany?.departments?.length ? '(pick a dept…)' : '(no depts)'}</option>
+            {sourceForCompany?.departments?.map(d => (
+              <option key={d.id} value={d.display_name}>{d.display_name}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <p className="text-[10px] text-[var(--text-secondary)]">
+        Auto-filled by the wizard. Editing here just updates the label — to re-apply a different dept's template, use ↺ Re-run wizard below.
+      </p>
+    </div>
+  );
+}
+
+interface EnterpriseSourceView {
+  tenant_id: string;
+  display_name: string;
+  repo_url: string;
+  priority: number;
+  pat_preview: string;
+  last_sync?: { ok: boolean; error?: string; fetched_at: string } | null;
+  departments?: Array<{ id: string; display_name: string; has_template?: boolean }>;
+  active_dept?: string | null;
+}
+
+/**
+ * Marketplace Providers — manage the enterprise keys that unlock private
+ * connector / workflow registries. See lib/enterprise.ts for the on-disk
+ * format. UI surface: list of configured sources (priority order) + add
+ * field + remove button. Re-order is intentionally not exposed yet —
+ * `remove + add again` is good enough for Phase 1 and avoids the modal
+ * drag-and-drop complexity; revisit if real users want it.
+ */
+function MarketplaceProvidersSection() {
+  const [sources, setSources] = useState<EnterpriseSourceView[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [adding, setAdding] = useState(false);
+  const [newKey, setNewKey] = useState('');
+  const [error, setError] = useState('');
+  const [status, setStatus] = useState('');
+  // "+ Add another enterprise tenant" is collapsed by default — only one
+  // key is typical, and the input doesn't belong next to the sync /
+  // reinstall actions (those operate on EXISTING sources). Auto-open
+  // when there are zero sources so first-time users still see it.
+  const [showAddTenant, setShowAddTenant] = useState(false);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const r = await fetch('/api/enterprise-keys');
+      const data = await r.json();
+      setSources(data?.sources || []);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { load(); }, [load]);
+  // Reveal the Add-tenant input automatically when there are no
+  // sources at all — otherwise it stays tucked behind a disclosure.
+  useEffect(() => {
+    if (!loading && sources.length === 0) setShowAddTenant(true);
+  }, [loading, sources.length]);
+
+  const handleAdd = async () => {
+    const key = newKey.trim();
+    if (!key) return;
+    setError('');
+    setStatus('');
+    setAdding(true);
+    try {
+      const r = await fetch('/api/enterprise-keys', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ key }),
+      });
+      const data = await r.json();
+      if (!data.ok) {
+        setError(data.error || 'failed to add key');
+      } else {
+        setNewKey('');
+        setStatus(`✓ Added ${data.tenant_id} — marketplace synced`);
+        await load();
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setAdding(false);
+    }
+  };
+
+  const [resyncing, setResyncing] = useState(false);
+
+  // Comprehensive sync: connectors (registry + manifests + wizard
+  // templates) + workflows (pipelines + recipes) + skills, from every
+  // configured source (public + each enterprise tenant). Same endpoint
+  // as Marketplace top → ↻ Sync all so both views agree.
+  // User: "settings 的 re-sync 是同步所有的数据的".
+  const handleResync = async () => {
+    setError('');
+    setStatus('');
+    setResyncing(true);
+    try {
+      const r = await fetch('/api/marketplace/sync-all', { method: 'POST' });
+      const data = await r.json();
+      if (!data.ok && data.error) { setError(data.error); }
+      else {
+        const parts: string[] = [];
+        if (data.connectors) parts.push(`connectors ${data.connectors.sources_ok ?? 0}/${data.connectors.sources_total ?? 0} sources, ${data.connectors.manifests_refreshed ?? 0} manifests`);
+        if (data.workflows) parts.push(`workflows ${data.workflows.pipelines ?? 0} pipelines + ${data.workflows.recipes ?? 0} recipes`);
+        if (data.skills) parts.push(`skills ${data.skills.synced ?? 0}`);
+        setStatus(`✓ Synced — ${parts.join(' · ')}`);
+      }
+      await load();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setResyncing(false);
+    }
+  };
+
+  const handleRemove = async (tenant_id: string) => {
+    if (!confirm(`Remove enterprise source "${tenant_id}"?\n\nInstalled connectors stay on disk; they just stop receiving updates from this source.`)) return;
+    setError('');
+    setStatus('');
+    try {
+      const r = await fetch(`/api/enterprise-keys?tenant_id=${encodeURIComponent(tenant_id)}`, { method: 'DELETE' });
+      const data = await r.json();
+      if (!data.ok) { setError(data.error || 'remove failed'); return; }
+      setStatus(`✓ Removed ${tenant_id}`);
+      await load();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      <label className="text-xs text-[var(--text-secondary)] font-semibold uppercase">
+        Enterprise
+      </label>
+      <p className="text-[10px] text-[var(--text-secondary)]">
+        Private enterprise registries layered on top of the public marketplace. Higher in this list = higher priority (overrides the public one when the same id exists). Keys are encrypted at rest.
+      </p>
+
+      {/* Configured sources */}
+      <div className="rounded border border-[var(--border)] divide-y divide-[var(--border)] bg-[var(--bg-tertiary)]">
+        {loading ? (
+          <div className="px-3 py-2 text-[11px] text-[var(--text-secondary)]">Loading…</div>
+        ) : sources.length === 0 ? (
+          <div className="px-3 py-2 text-[11px] text-[var(--text-secondary)] italic">
+            No enterprise sources configured. Public marketplace only.
+          </div>
+        ) : (
+          sources.map((s) => {
+            const sync = s.last_sync;
+            const synced = sync?.ok;
+            const failed = sync && !sync.ok;
+            return (
+            <div key={s.tenant_id} className="px-3 py-2 flex flex-col gap-1">
+              <div className="flex items-center gap-2">
+                <span className="text-[10px] px-1.5 py-0.5 rounded bg-amber-500/15 text-amber-400 shrink-0">
+                  🔒 {s.display_name}
+                </span>
+                <div className="flex-1 min-w-0">
+                  <div className="text-[11px] font-mono text-[var(--text-primary)] truncate" title={s.repo_url}>
+                    {s.repo_url}
+                  </div>
+                  <div className="text-[9px] text-[var(--text-secondary)] mt-0.5 flex items-center gap-2">
+                    <span>priority {s.priority} · PAT {s.pat_preview}</span>
+                    {synced && <span className="text-emerald-500">● synced</span>}
+                    {failed && <span className="text-red-400">✗ sync failed</span>}
+                    {!sync && <span className="italic">(no sync yet)</span>}
+                  </div>
+                  {/* Dept selection lives in the Identity row above —
+                      it's a profile property, not a tenant property. */}
+                </div>
+                <button
+                  onClick={() => handleRemove(s.tenant_id)}
+                  className="text-[10px] px-2 py-0.5 rounded border border-red-500/30 text-red-400 hover:bg-red-500/10"
+                >
+                  Remove
+                </button>
+              </div>
+              {failed && sync?.error && (
+                <div className="text-[10px] text-red-300 border border-red-500/30 bg-red-500/5 rounded px-2 py-1 leading-snug whitespace-pre-wrap break-words">
+                  {sync.error}
+                </div>
+              )}
+            </div>
+            );
+          })
+        )}
+      </div>
+
+      <div className="flex gap-2">
+        <button
+          onClick={handleResync}
+          disabled={resyncing}
+          className="text-[11px] px-3 py-1.5 rounded border border-[var(--border)] text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] disabled:opacity-40"
+          title="Sync EVERYTHING from every source (public + each enterprise tenant): connectors + workflows + skills + wizard templates. Same as Marketplace top → Sync all."
+        >
+          {resyncing ? 'Syncing…' : '↻ Sync all'}
+        </button>
+        <button
+          type="button"
+          onClick={async () => {
+            await fetch('/api/onboarding', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ action: 'reset' }),
+            });
+            window.location.reload();
+          }}
+          className="text-[11px] px-3 py-1.5 rounded border border-[var(--accent)] text-[var(--accent)] hover:bg-[var(--accent)] hover:text-white"
+          title="Re-run the onboarding wizard to swap tenant / dept or re-apply template defaults."
+        >
+          ↺ Re-run wizard
+        </button>
+      </div>
+
+      {/* Status / error */}
+      {error && (
+        <div className="text-[10px] text-red-400 border border-red-500/30 bg-red-500/5 rounded px-2 py-1">
+          {error}
+        </div>
+      )}
+      {status && !error && (
+        <div className="text-[10px] text-green-400">{status}</div>
+      )}
+
+      <p className="text-[9px] text-[var(--text-secondary)] italic">
+        Removing a source keeps its installed connectors/workflows on disk — they just stop getting updates from that source.
+      </p>
+
+      {/* Add another tenant — separate concept from sync/reinstall.
+          Collapsed by default since most users only ever have one. */}
+      <div className="border-t border-[var(--border)] pt-2 mt-1">
+        {!showAddTenant ? (
+          <button
+            onClick={() => setShowAddTenant(true)}
+            className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+          >
+            + Add another enterprise tenant
+          </button>
+        ) : (
+          <div className="space-y-1.5">
+            <label className="text-[10px] text-[var(--text-secondary)] block">
+              Add another enterprise tenant (different company / org). Already-configured tenants show above — this is only for layering ANOTHER private registry on top.
+            </label>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                placeholder="acme:github_pat_xxx  or  github_pat_xxx@github.com/org/forge-enterprise-agent-yourco"
+                value={newKey}
+                onChange={(e) => setNewKey(e.target.value)}
+                onKeyDown={(e) => { if (e.key === 'Enter' && !adding) handleAdd(); }}
+                className="flex-1 text-[11px] font-mono px-2 py-1.5 rounded bg-[var(--bg-primary)] border border-[var(--border)] text-[var(--text-primary)] placeholder:text-[var(--text-secondary)]/50"
+              />
+              <button
+                onClick={handleAdd}
+                disabled={adding || !newKey.trim()}
+                className="text-[11px] px-3 py-1.5 rounded bg-[var(--accent)] text-white hover:opacity-90 disabled:opacity-40"
+              >
+                {adding ? 'Adding…' : 'Add tenant'}
+              </button>
+              <button
+                onClick={() => { setShowAddTenant(false); setNewKey(''); }}
+                className="text-[10px] px-2 py-1.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+    </div>
+  );
+}
+
 function AgentsSection({ settings, setSettings }: { settings: any; setSettings: (s: any) => void }) {
   const { registry: modelsRegistry } = useModelsRegistry();
   const [agents, setAgents] = useState<AgentEntry[]>([]);