@aion0/forge 0.10.36 → 0.10.37

package/components/ConnectorsPanel.tsx

@@ -83,6 +83,35 @@ interface TestResult {
 
 const SECRET_MASK = '••••••••';
 
+// ─── Config template import ───────────────────────────────
+
+interface TemplatePrompt {
+  key: string;
+  label: string;
+  hint?: string;
+  url?: string;
+  url_label?: string;
+  secret?: boolean;
+  required?: boolean;
+  targets: Array<{ connector: string; field_path: string }>;
+}
+
+interface TemplateModalState {
+  template: any;
+  pending: TemplatePrompt[];
+  static_apply_targets: string[];
+  missing_manifests: string[];
+  values: Record<string, string>;
+}
+
+interface TemplateApplyResult {
+  applied: string[];
+  enabled_changed: string[];
+  skipped_missing_manifest: string[];
+  fields_preserved: Array<{ connector: string; field: string; reason: string }>;
+  fields_left_empty: Array<{ connector: string; field: string }>;
+}
+
 export default function ConnectorsPanel() {
   const [state, setState] = useState<MarketState | null>(null);
   const [busyId, setBusyId] = useState('');
@@ -102,6 +131,16 @@ export default function ConnectorsPanel() {
   const [dragOver, setDragOver] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  // ─── Config template import ───────────────────────────────
+  // The "Import Template" button accepts a JSON file that pre-fills shared
+  // defaults (base URLs, etc.) and prompts the user once for each ${key}
+  // placeholder. Same key shared by multiple connectors → asked once.
+  const tplFileInputRef = useRef<HTMLInputElement>(null);
+  const [tplAnalyzing, setTplAnalyzing] = useState(false);
+  const [tplApplying, setTplApplying] = useState(false);
+  const [tplModal, setTplModal] = useState<TemplateModalState | null>(null);
+  const [tplResult, setTplResult] = useState<TemplateApplyResult | null>(null);
+
   const [testing, setTesting] = useState(false);
   const [testResult, setTestResult] = useState<TestResult | null>(null);
 
@@ -153,6 +192,12 @@ export default function ConnectorsPanel() {
     }).catch(() => {});
   }, []);
 
+  // Forge ships a bundled connector template (templates/connector-config-template.json),
+  // so the Import button is always one-click. Users can override by
+  // dropping their own at <dataDir>/config-template.json — the GET
+  // endpoint picks the override automatically. No mount-time probe
+  // needed; we just always show the one-click button.
+
   // ─── Actions ──────────────────────────────────────────────
   async function sync() {
     setSyncing(true); setError('');
@@ -229,6 +274,92 @@ export default function ConnectorsPanel() {
     if (f) uploadFile(f);
   }
 
+  // ─── Config template: one-click import (bundled or local override) ──
+  // Always hits GET — the server picks the user override at
+  // <dataDir>/config-template.json if present, else the bundled
+  // templates/connector-config-template.json that ships with Forge.
+  async function onClickImport() {
+    if (tplAnalyzing || tplApplying) return;
+    setTplAnalyzing(true); setError(''); setTplResult(null);
+    try {
+      const r = await fetch('/api/connectors/import-config-template');
+      const j = await r.json();
+      if (!r.ok || j.ok === false) {
+        setError(j.error || 'template load failed');
+        return;
+      }
+      if (!j.pending?.length) {
+        await applyTemplate(j.template, {});
+        return;
+      }
+      setTplModal({
+        template: j.template,
+        pending: j.pending,
+        static_apply_targets: j.static_apply_targets || [],
+        missing_manifests: j.missing_manifests || [],
+        values: {},
+      });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally { setTplAnalyzing(false); }
+  }
+
+  // ─── Config template: analyze (file pick) ─────────────────
+  async function onPickTemplateFile(ev: React.ChangeEvent<HTMLInputElement>) {
+    const f = ev.target.files?.[0];
+    ev.target.value = '';
+    if (!f) return;
+    setTplAnalyzing(true); setError(''); setTplResult(null);
+    try {
+      const fd = new FormData();
+      fd.append('file', f);
+      const r = await fetch('/api/connectors/import-config-template', {
+        method: 'POST', body: fd,
+      });
+      const j = await r.json();
+      if (!r.ok || j.ok === false) {
+        setError(j.error || 'template analyze failed');
+        return;
+      }
+      // If nothing to ask, apply directly (only static defaults).
+      if (!j.pending?.length) {
+        await applyTemplate(j.template, {});
+        return;
+      }
+      setTplModal({
+        template: j.template,
+        pending: j.pending,
+        static_apply_targets: j.static_apply_targets || [],
+        missing_manifests: j.missing_manifests || [],
+        values: {},
+      });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally { setTplAnalyzing(false); }
+  }
+
+  async function applyTemplate(template: any, values: Record<string, string>) {
+    setTplApplying(true); setError('');
+    try {
+      const r = await fetch('/api/connectors/import-config-template', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ template, values }),
+      });
+      const j = await r.json();
+      if (!r.ok || j.ok === false) {
+        setError(j.error || 'template apply failed');
+        return;
+      }
+      setTplModal(null);
+      setTplResult(j as TemplateApplyResult);
+      await refresh();
+      if (selectedId) await loadDetail(selectedId);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally { setTplApplying(false); }
+  }
+
   async function runTest() {
     if (!selectedId) return;
     setTesting(true); setTestResult(null);
@@ -334,6 +465,31 @@ export default function ConnectorsPanel() {
           onChange={onPickFile}
           className="hidden"
         />
+        <input
+          ref={tplFileInputRef}
+          type="file"
+          accept=".json,application/json"
+          onChange={onPickTemplateFile}
+          className="hidden"
+        />
+        <button
+          type="button"
+          onClick={onClickImport}
+          disabled={tplAnalyzing || tplApplying}
+          title="One-click import — uses the bundled connector template (or your <dataDir>/config-template.json override). Asks once for each missing token; shared keys (e.g. gitlab_pat used by gitlab+jenkins) are asked once."
+          className="text-[10px] px-2.5 py-0.5 border border-[var(--border)] text-[var(--text-secondary)] rounded hover:border-[var(--accent)] hover:text-[var(--accent)] transition-colors disabled:opacity-40"
+        >
+          {tplAnalyzing ? 'Analyzing…' : tplApplying ? 'Applying…' : '↥ Import Template'}
+        </button>
+        <button
+          type="button"
+          onClick={() => tplFileInputRef.current?.click()}
+          disabled={tplAnalyzing || tplApplying}
+          title="Override: pick a different template file"
+          className="text-[10px] px-1.5 py-0.5 text-[var(--text-secondary)] hover:text-[var(--accent)] disabled:opacity-40"
+        >
+          (or file…)
+        </button>
         <button
           type="button"
           onClick={() => fileInputRef.current?.click()}
@@ -639,6 +795,176 @@ export default function ConnectorsPanel() {
           })()}
         </div>
       </div>
+
+      {/* ─── Template Import: prompt modal ─────────────────── */}
+      {tplModal && (
+        <TemplateImportModal
+          state={tplModal}
+          onChange={(values) => setTplModal({ ...tplModal, values })}
+          onCancel={() => setTplModal(null)}
+          onSubmit={(values) => applyTemplate(tplModal.template, values)}
+          submitting={tplApplying}
+        />
+      )}
+
+      {/* ─── Template Import: result toast ─────────────────── */}
+      {tplResult && (
+        <TemplateImportResultModal
+          result={tplResult}
+          onClose={() => setTplResult(null)}
+        />
+      )}
+    </div>
+  );
+}
+
+// ─── Template Import: prompt modal ──────────────────────────
+
+function TemplateImportModal({
+  state, onChange, onCancel, onSubmit, submitting,
+}: {
+  state: TemplateModalState;
+  onChange: (values: Record<string, string>) => void;
+  onCancel: () => void;
+  onSubmit: (values: Record<string, string>) => void;
+  submitting: boolean;
+}) {
+  const required = state.pending.filter(p => p.required);
+  const missingRequired = required.filter(p => !(state.values[p.key] || '').trim());
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-6">
+      <div className="bg-[var(--bg-primary)] border border-[var(--border)] rounded-md shadow-xl max-w-2xl w-full max-h-[85vh] flex flex-col">
+        <div className="px-4 py-3 border-b border-[var(--border)] shrink-0">
+          <h3 className="text-sm font-medium text-[var(--text-primary)]">Import Connector Config Template</h3>
+          <p className="text-[11px] text-[var(--text-secondary)] mt-1">
+            Static defaults will be applied to <strong>{state.static_apply_targets.length}</strong> connector{state.static_apply_targets.length === 1 ? '' : 's'} ({state.static_apply_targets.join(', ')}).
+            {state.missing_manifests.length > 0 && (
+              <> Skipped (not installed): <span className="text-amber-500">{state.missing_manifests.join(', ')}</span>.</>
+            )}
+            <br />
+            Fill in the fields below — values shared across connectors are asked once. Existing non-empty fields are preserved.
+          </p>
+        </div>
+        <div className="flex-1 overflow-y-auto px-4 py-3 space-y-3">
+          {state.pending.map(p => {
+            const v = state.values[p.key] ?? '';
+            return (
+              <div key={p.key} className="space-y-1">
+                <label className="text-[11px] font-medium text-[var(--text-primary)] flex items-center gap-1.5 flex-wrap">
+                  {p.label}
+                  {p.required ? <span className="text-red-500">*</span> : <span className="text-[9px] text-[var(--text-secondary)]">(optional)</span>}
+                  {p.url && (
+                    <a
+                      href={p.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="ml-auto text-[10px] text-[var(--accent)] hover:underline"
+                      title={p.url}
+                    >
+                      ↗ {p.url_label || 'Get token'}
+                    </a>
+                  )}
+                </label>
+                {p.hint && (
+                  <p className="text-[10px] text-[var(--text-secondary)] leading-snug">{p.hint}</p>
+                )}
+                <input
+                  type={p.secret ? 'password' : 'text'}
+                  value={v}
+                  onChange={(e) => onChange({ ...state.values, [p.key]: e.target.value })}
+                  placeholder={p.required ? 'required' : 'leave blank to skip'}
+                  className="w-full text-[11px] bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1 text-[var(--text-primary)] font-mono focus:outline-none focus:border-[var(--accent)]"
+                />
+                <p className="text-[9px] text-[var(--text-secondary)]">
+                  → {p.targets.map(t => `${t.connector}${t.field_path ? '.' + t.field_path : ''}`).join(', ')}
+                </p>
+              </div>
+            );
+          })}
+        </div>
+        <div className="px-4 py-2 border-t border-[var(--border)] shrink-0 flex items-center justify-end gap-2">
+          {missingRequired.length > 0 && (
+            <span className="text-[10px] text-amber-500 mr-auto">
+              {missingRequired.length} required field{missingRequired.length === 1 ? '' : 's'} empty
+            </span>
+          )}
+          <button
+            type="button"
+            onClick={onCancel}
+            disabled={submitting}
+            className="text-[10px] px-2.5 py-1 border border-[var(--border)] text-[var(--text-secondary)] rounded hover:border-[var(--text-primary)] disabled:opacity-40"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={() => onSubmit(state.values)}
+            disabled={submitting || missingRequired.length > 0}
+            className="text-[10px] px-2.5 py-1 border border-[var(--accent)] text-[var(--accent)] rounded hover:bg-[var(--accent)] hover:text-white disabled:opacity-40"
+          >
+            {submitting ? 'Applying…' : 'Apply'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TemplateImportResultModal({
+  result, onClose,
+}: { result: TemplateApplyResult; onClose: () => void; }) {
+  return (
+    <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-6">
+      <div className="bg-[var(--bg-primary)] border border-[var(--border)] rounded-md shadow-xl max-w-xl w-full max-h-[80vh] flex flex-col">
+        <div className="px-4 py-3 border-b border-[var(--border)] shrink-0 flex items-center">
+          <h3 className="text-sm font-medium text-[var(--text-primary)]">Import Complete</h3>
+        </div>
+        <div className="flex-1 overflow-y-auto px-4 py-3 space-y-3 text-[11px] text-[var(--text-primary)]">
+          <div>
+            <div className="text-[10px] uppercase tracking-wide text-[var(--text-secondary)] mb-1">Applied ({result.applied.length})</div>
+            <div className="text-emerald-500">{result.applied.join(', ') || '—'}</div>
+          </div>
+          {result.fields_preserved.length > 0 && (
+            <div>
+              <div className="text-[10px] uppercase tracking-wide text-[var(--text-secondary)] mb-1">Preserved (existing values not overwritten)</div>
+              <ul className="text-[var(--text-secondary)] font-mono text-[10px] space-y-0.5">
+                {result.fields_preserved.map((f, i) => (
+                  <li key={i}>{f.connector}.{f.field}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+          {result.fields_left_empty.length > 0 && (
+            <div>
+              <div className="text-[10px] uppercase tracking-wide text-[var(--text-secondary)] mb-1">Left empty (optional fields skipped)</div>
+              <ul className="text-amber-500 font-mono text-[10px] space-y-0.5">
+                {result.fields_left_empty.map((f, i) => (
+                  <li key={i}>{f.connector}.{f.field}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+          {result.skipped_missing_manifest.length > 0 && (
+            <div>
+              <div className="text-[10px] uppercase tracking-wide text-[var(--text-secondary)] mb-1">Skipped (manifest not installed)</div>
+              <div className="text-amber-500">{result.skipped_missing_manifest.join(', ')}</div>
+              <p className="text-[10px] text-[var(--text-secondary)] mt-1">
+                Sync the marketplace first (Refresh button), then re-import the template.
+              </p>
+            </div>
+          )}
+        </div>
+        <div className="px-4 py-2 border-t border-[var(--border)] shrink-0 flex justify-end">
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-[10px] px-2.5 py-1 border border-[var(--accent)] text-[var(--accent)] rounded hover:bg-[var(--accent)] hover:text-white"
+          >
+            OK
+          </button>
+        </div>
+      </div>
     </div>
   );
 }

package/components/Dashboard.tsx

@@ -28,6 +28,7 @@ const LoginStatusPanel = lazy(() => import('./LoginStatusPanel'));
 const ActivityPanel = lazy(() => import('./ActivityPanel'));
 const WorkspaceView = lazy(() => import('./WorkspaceView'));
 // WorkspaceTree moved into ProjectDetail — no longer needed at Dashboard level
+import { OnboardingBanner, OnboardingDrawer } from './OnboardingWizard';
 
 interface UsageSummary {
   provider: string;
@@ -133,6 +134,17 @@ export default function Dashboard({ user }: { user: any }) {
   const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
   const [showNewTask, setShowNewTask] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
+  const [needsOnboarding, setNeedsOnboarding] = useState(false);
+  const [showOnboarding, setShowOnboarding] = useState(false);
+  useEffect(() => {
+    fetch('/api/onboarding').then(r => r.json()).then(j => {
+      const need = !!(j?.ok && !j.onboardingCompleted);
+      setNeedsOnboarding(need);
+      // Auto-open the drawer when setup is needed — saves the user a click.
+      // They can still click "Skip" inside the drawer to dismiss.
+      if (need) setShowOnboarding(true);
+    }).catch(() => {});
+  }, []);
   const [showMonitor, setShowMonitor] = useState(false);
   const [showLoginStatus, setShowLoginStatus] = useState(false);
   const [loginBadge, setLoginBadge] = useState<{ broken: number; total: number } | null>(null);
@@ -294,7 +306,22 @@ export default function Dashboard({ user }: { user: any }) {
   const queued = tasks.filter(t => t.status === 'queued');
 
   return (
-    <div className="h-screen flex">
+    <div className="h-screen flex flex-col">
+      {needsOnboarding && (
+        <OnboardingBanner onOpen={() => setShowOnboarding(true)} />
+      )}
+      {showOnboarding && (
+        <OnboardingDrawer
+          onClose={() => setShowOnboarding(false)}
+          onComplete={() => {
+            setShowOnboarding(false);
+            setNeedsOnboarding(false);
+            // Reload settings so chat picks up new API profile etc.
+            fetchData();
+          }}
+        />
+      )}
+      <div className="flex-1 flex min-h-0">
       {/* Browser — left side */}
       {browserMode === 'left' && (
         <>
@@ -951,6 +978,7 @@ export default function Dashboard({ user }: { user: any }) {
         </Suspense>
       )}
 
+      </div>{/* /flex-1 inner container */}
       {showMonitor && <Suspense fallback={null}><MonitorPanel onClose={() => setShowMonitor(false)} /></Suspense>}
       {showLoginStatus && <Suspense fallback={null}><LoginStatusPanel onClose={() => { setShowLoginStatus(false); /* refresh badge after panel actions */ fetch('/api/login-status').then(r => r.json()).then(j => { const rows = j.rows || []; const broken = rows.filter((r: any) => r.result && !r.result.ok).length; setLoginBadge({ broken, total: rows.length }); }).catch(() => {}); }} /></Suspense>}