fraim-framework 2.0.127 → 2.0.128

package/public/first-run/script.js

@@ -1,361 +1,417 @@
-(function () {
-  const stepOrder = ['welcome', 'prereqs', 'agent', 'configure', 'project', 'launch', 'finish'];
-  const stepLabels = {
-    welcome: 'Welcome',
-    prereqs: 'System prerequisites',
-    agent: 'AI agent',
-    configure: 'Configure FRAIM',
-    project: 'Project folder',
-    launch: 'Open your AI',
-    finish: 'Your first prompt',
-  };
-
-  const state = {
-    session: null,
-    selectedAgentId: null,
-  };
-
-  const content = document.getElementById('content');
-  const statusEl = document.getElementById('status');
-  const detailsEl = document.getElementById('details');
-  const stepsEl = document.getElementById('steps');
-
-  function escapeHtml(value) {
-    return String(value)
-      .replace(/&/g, '&')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#39;');
-  }
-
-  function setStatus(message, error) {
-    statusEl.textContent = message;
-    statusEl.classList.toggle('error', Boolean(error));
-  }
-
-  function setDetails(text) {
-    if (!text) {
-      detailsEl.hidden = true;
-      detailsEl.textContent = '';
-      return;
-    }
-    detailsEl.hidden = false;
-    detailsEl.textContent = text;
-  }
-
-  function firstIncompleteStep(session) {
-    for (const stepId of stepOrder) {
-      const status = session.state.stepStates[stepId];
-      if (status !== 'complete') {
-        return stepId;
-      }
-    }
-    return 'finish';
-  }
-
-  function renderSteps(session) {
-    const active = firstIncompleteStep(session);
-    stepsEl.innerHTML = stepOrder.map((stepId) => {
-      const status = session.state.stepStates[stepId];
-      const activeClass = stepId === active ? ' active' : '';
-      return `<li class="step${activeClass}" data-step="${stepId}"><strong>${stepLabels[stepId]}</strong><span>${status}</span></li>`;
-    }).join('');
-  }
-
-  async function api(path, method, body) {
-    const headers = {};
-    if (body) {
-      headers['Content-Type'] = 'application/json';
-    }
-    if (state.session && state.session.requestToken) {
-      headers['x-fraim-first-run-token'] = state.session.requestToken;
-    }
-
-    const response = await fetch(path, {
-      method: method || 'GET',
-      headers: Object.keys(headers).length > 0 ? headers : undefined,
-      body: body ? JSON.stringify(body) : undefined,
-    });
-
-    if (response.status === 204) {
-      return null;
-    }
-
-    const json = await response.json();
-    if (!response.ok) {
-      throw new Error(json.error || 'Request failed.');
-    }
-    return json;
-  }
-
-  async function loadSession() {
-    state.session = await api('/api/first-run/session');
-    if (!state.selectedAgentId && state.session.state.selectedAgentId) {
-      state.selectedAgentId = state.session.state.selectedAgentId;
-    }
-    render();
-  }
-
-  function renderWelcome() {
-    return `
-      <h2>One guided setup</h2>
-      <p class="lede">This flow uses your FRAIM key, writes FRAIM config where it belongs, initializes your project, and gives you a clean handoff prompt.</p>
-      <div class="actions">
-        <button id="start-prereqs">Get started</button>
-      </div>
-    `;
-  }
-
-  function renderPrereqs() {
-    return `
-      <h2>System prerequisites</h2>
-      <p class="lede">We’ll confirm that Node.js, npx, and git are callable before moving into agent setup.</p>
-      <div class="grid">
-        <article class="stat"><h3>Node.js</h3><p>Required for FRAIM CLI orchestration.</p></article>
-        <article class="stat"><h3>npx</h3><p>Used to invoke the packaged FRAIM runtime.</p></article>
-        <article class="stat"><h3>git</h3><p>Required for project initialization and issue-based workflows.</p></article>
-      </div>
-      <div class="actions">
-        <button id="run-prereqs">Run checks</button>
-      </div>
-    `;
-  }
-
-  function renderAgents(session) {
-    const cards = session.agents.map((agent) => {
-      const selected = state.selectedAgentId === agent.id ? ' style="border-color: var(--accent); background: var(--accent-2);"' : '';
-      const actionLabel = agent.detected ? `Use ${agent.label}` : `Choose ${agent.label}`;
-      return `
-        <article class="agent-card"${selected}>
-          <h3>${agent.label}</h3>
-          <p>${agent.detected ? 'Detected on this machine.' : 'Not detected yet. You can still choose it and follow the vendor login/install flow.'}</p>
-          <p style="margin-top:10px">${agent.detail}</p>
-          <div class="actions">
-            <button class="select-agent" data-agent="${agent.id}">${actionLabel}</button>
-          </div>
-        </article>
-      `;
-    }).join('');
-
-    return `
-      <h2>Choose your AI agent</h2>
-      <p class="lede">Pick the agent you want FRAIM to guide for your first run. Subscription/vendor-owned login remains outside FRAIM.</p>
-      <div class="grid">${cards}</div>
-    `;
-  }
-
-  function renderConfigure() {
-    return `
-      <h2>Configure FRAIM</h2>
-      <p class="lede">This writes your FRAIM global config and updates supported agent config on the machine where possible.</p>
-      <div class="actions">
-        <button id="configure-fraim">Write config</button>
-      </div>
-    `;
-  }
-
-  function renderProject(session) {
-    const projectPath = escapeHtml(session.state.workspacePath || '');
-    return `
-      <h2>Pick a project folder</h2>
-      <p class="lede">Choose an existing folder or create a new one. FRAIM will initialize git when needed and run <code>fraim init-project</code> there.</p>
-      <label for="project-path">Project path</label>
-      <div class="path-row">
-        <input id="project-path" type="text" value="${projectPath}" placeholder="C:\\Projects\\my-project or /Users/you/Projects/my-project">
-        <button class="secondary" id="pick-folder">Browse</button>
-      </div>
-      <div class="actions">
-        <button id="init-project">Initialize project</button>
-      </div>
-    `;
-  }
-
-  function renderLaunch(session) {
-    const launchCommand = session.state.lastLaunchCommand
-      ? `<p><strong>Launch command:</strong> <code>${escapeHtml(session.state.lastLaunchCommand)}</code></p>`
-      : '';
-    return `
-      <h2>Open your AI</h2>
-      <p class="lede">FRAIM will attempt a best-effort launch, then run a deterministic probe where the selected CLI supports it.</p>
-      ${launchCommand}
-      <div class="actions">
-        <button id="launch-agent">Launch and verify</button>
-      </div>
-    `;
-  }
-
-  function renderFinish(session) {
-    const prompt = escapeHtml(session.prompt || 'Onboard this project');
-    const resourcesUrl = escapeHtml(session.state.resourcesUrl);
-    return `
-      <h2>Your first prompt</h2>
-      <p class="lede">Copy this into your agent if it is not already open. FRAIM also writes it to your local install artifact for later recovery.</p>
-      <div class="prompt" id="prompt-box">${prompt}</div>
-      <div class="actions">
-        <button class="secondary" id="copy-prompt">Copy prompt</button>
-        <button id="finish-flow">Done</button>
-      </div>
-      <p style="margin-top:18px"><a href="${resourcesUrl}" target="_blank" rel="noreferrer">Open FRAIM resources</a></p>
-    `;
-  }
-
-  function render() {
-    const session = state.session;
-    if (!session) {
-      return;
-    }
-
-    renderSteps(session);
-    const active = firstIncompleteStep(session);
-    if (active === 'prereqs' && session.state.stepStates.welcome === 'complete') {
-      content.innerHTML = renderPrereqs();
-    } else if (active === 'agent') {
-      content.innerHTML = renderAgents(session);
-    } else if (active === 'configure') {
-      content.innerHTML = renderConfigure();
-    } else if (active === 'project') {
-      content.innerHTML = renderProject(session);
-    } else if (active === 'launch') {
-      content.innerHTML = renderLaunch(session);
-    } else if (active === 'finish') {
-      content.innerHTML = renderFinish(session);
-    } else {
-      content.innerHTML = renderWelcome();
-    }
-    bindActions();
-  }
-
-  function bindActions() {
-    const startPrereqs = document.getElementById('start-prereqs');
-    if (startPrereqs) {
-      startPrereqs.addEventListener('click', async function () {
-        state.session.state.stepStates.welcome = 'complete';
-        state.session.state.stepStates.prereqs = 'running';
-        render();
-      });
-    }
-
-    const runPrereqs = document.getElementById('run-prereqs');
-    if (runPrereqs) {
-      runPrereqs.addEventListener('click', async function () {
-        setStatus('Checking prerequisites…');
-        try {
-          const result = await api('/api/first-run/prereqs', 'POST');
-          setStatus(result.message, !result.ok);
-          setDetails('');
-          await loadSession();
-        } catch (error) {
-          setStatus(error.message, true);
-        }
-      });
-    }
-
-    document.querySelectorAll('.select-agent').forEach(function (button) {
-      button.addEventListener('click', async function () {
-        const agentId = this.getAttribute('data-agent');
-        setStatus('Saving agent selection…');
-        try {
-          const result = await api('/api/first-run/agents/select', 'POST', { agentId: agentId });
-          state.selectedAgentId = agentId;
-          setStatus(result.message);
-          setDetails(result.launchCommand ? `Vendor login command: ${result.launchCommand}` : '');
-          await loadSession();
-        } catch (error) {
-          setStatus(error.message, true);
-        }
-      });
-    });
-
-    const configureFraim = document.getElementById('configure-fraim');
-    if (configureFraim) {
-      configureFraim.addEventListener('click', async function () {
-        setStatus('Writing FRAIM config…');
-        try {
-          const result = await api('/api/first-run/configure', 'POST');
-          setStatus(result.message, !result.ok);
-          setDetails('');
-          await loadSession();
-        } catch (error) {
-          setStatus(error.message, true);
-        }
-      });
-    }
-
-    const pickFolder = document.getElementById('pick-folder');
-    if (pickFolder) {
-      pickFolder.addEventListener('click', async function () {
-        try {
-          const picked = await api('/api/first-run/project-path/pick', 'POST');
-          if (picked && picked.path) {
-            document.getElementById('project-path').value = picked.path;
-          }
-        } catch (error) {
-          setStatus(error.message, true);
-        }
-      });
-    }
-
-    const initProject = document.getElementById('init-project');
-    if (initProject) {
-      initProject.addEventListener('click', async function () {
-        const projectPath = document.getElementById('project-path').value.trim();
-        if (!projectPath) {
-          setStatus('Project path is required.', true);
-          return;
-        }
-        setStatus('Initializing project…');
-        try {
-          const result = await api('/api/first-run/project', 'POST', { projectPath: projectPath, initializeGit: true });
-          setStatus(result.message, !result.ok);
-          setDetails('');
-          await loadSession();
-        } catch (error) {
-          setStatus(error.message, true);
-        }
-      });
-    }
-
-    const launchAgent = document.getElementById('launch-agent');
-    if (launchAgent) {
-      launchAgent.addEventListener('click', async function () {
-        setStatus('Launching agent and running probe…');
-        try {
-          const result = await api('/api/first-run/launch', 'POST');
-          setStatus(result.message, !result.ok);
-          setDetails(result.output || result.launchCommand || '');
-          await loadSession();
-        } catch (error) {
-          setStatus(error.message, true);
-        }
-      });
-    }
-
-    const copyPrompt = document.getElementById('copy-prompt');
-    if (copyPrompt) {
-      copyPrompt.addEventListener('click', async function () {
-        const prompt = document.getElementById('prompt-box').textContent || '';
-        await navigator.clipboard.writeText(prompt);
-        setStatus('Prompt copied.');
-      });
-    }
-
-    const finishFlow = document.getElementById('finish-flow');
-    if (finishFlow) {
-      finishFlow.addEventListener('click', async function () {
-        setStatus('Writing final prompt artifact…');
-        try {
-          const result = await api('/api/first-run/finish', 'POST');
-          setStatus(result.message);
-          setDetails('');
-        } catch (error) {
-          setStatus(error.message, true);
-        }
-      });
-    }
-  }
-
-  loadSession().catch(function (error) {
-    setStatus(error.message || 'Could not load first-run.', true);
-  });
-}());
+(function () {
+  'use strict';
+
+  const CHECKLIST_EL = document.getElementById('checklist');
+  const PRIMARY_BUTTON = document.getElementById('primary-button');
+  const STATUS_EL = document.getElementById('status');
+  const LEDE_EL = document.getElementById('lede');
+
+  const state = {
+    session: null,
+    activeAgentPickerRowId: null,
+    runningRowId: null,
+  };
+
+  function setStatus(text, tone) {
+    STATUS_EL.textContent = text || '';
+    if (tone) {
+      STATUS_EL.setAttribute('data-tone', tone);
+    } else {
+      STATUS_EL.removeAttribute('data-tone');
+    }
+  }
+
+  function applyHeading(rows) {
+    if (!LEDE_EL) return;
+    if (rows.every((r) => r.status === 'ok')) {
+      LEDE_EL.textContent = 'You\'re ready. Open the Hub to get started.';
+      return;
+    }
+    const errored = rows.find((r) => r.status === 'error');
+    if (errored) {
+      LEDE_EL.textContent = 'Something didn\'t go through. Pick the right next step below.';
+      return;
+    }
+    const onlyProjectLeft = rows.filter((r) => r.status !== 'ok').every((r) => r.id === 'project');
+    if (onlyProjectLeft) {
+      LEDE_EL.textContent = 'Almost there — pick a project folder where FRAIM should work.';
+      return;
+    }
+    if (rows.some((r) => r.status === 'ok')) {
+      LEDE_EL.textContent = 'Some pieces are already on your machine. We\'re finishing the rest now.';
+      return;
+    }
+    LEDE_EL.textContent = 'We\'re getting your machine ready. Sit tight — we\'ll only need you for one step.';
+  }
+
+  async function api(path, method, body) {
+    const headers = {};
+    if (body !== undefined) headers['Content-Type'] = 'application/json';
+    if (state.session && state.session.requestToken) {
+      headers['x-fraim-first-run-token'] = state.session.requestToken;
+    }
+    const response = await fetch(path, {
+      method: method || 'GET',
+      headers: Object.keys(headers).length > 0 ? headers : undefined,
+      body: body !== undefined ? JSON.stringify(body) : undefined,
+    });
+    if (response.status === 204) return null;
+    let json = null;
+    try {
+      json = await response.json();
+    } catch (e) {
+      throw new Error(`Server returned invalid JSON (status ${response.status}).`);
+    }
+    if (!response.ok) {
+      throw new Error(json && json.error ? json.error : `Request failed (status ${response.status}).`);
+    }
+    return json;
+  }
+
+  async function loadSession() {
+    state.session = await api('/api/first-run/session');
+    render();
+  }
+
+  function setSessionFromActionResponse(actionResp) {
+    // Action responses include rows + primaryButtonLabel + state but not
+    // every session-level field. Merge into the held session view.
+    if (!state.session) return;
+    state.session.state = actionResp.state;
+    state.session.rows = actionResp.rows;
+    state.session.primaryButtonLabel = actionResp.primaryButtonLabel;
+    state.session.currentAgentId = actionResp.state.agentId;
+  }
+
+  function findRow(rowId) {
+    return state.session.rows.find((row) => row.id === rowId);
+  }
+
+  function makeIcon(status) {
+    const icon = document.createElement('span');
+    icon.className = 'icon';
+    icon.setAttribute('aria-hidden', 'true');
+    icon.textContent =
+      status === 'ok' ? '✓' :
+      status === 'in-progress' ? '⠋' :
+      status === 'manual-required' ? '!' :
+      status === 'error' ? '!' :
+      '·';
+    return icon;
+  }
+
+  function renderRow(row) {
+    const li = document.createElement('li');
+    li.className = 'row';
+    li.setAttribute('data-row-id', row.id);
+    li.setAttribute('data-row-status', row.status);
+
+    li.appendChild(makeIcon(row.status));
+
+    const label = document.createElement('span');
+    label.className = 'label';
+    label.textContent = row.label;
+    li.appendChild(label);
+
+    const verb = document.createElement('span');
+    verb.className = 'verb';
+    verb.setAttribute('data-testid', 'row-verb');
+    verb.textContent = row.verb || '';
+    li.appendChild(verb);
+
+    if (row.detail) {
+      const detail = document.createElement('span');
+      detail.className = 'detail';
+      detail.setAttribute('data-testid', 'row-detail');
+      detail.textContent = row.detail;
+      li.appendChild(detail);
+    }
+
+    // Inline `Change…` link on the agent row
+    if (row.id === 'agent') {
+      const change = document.createElement('button');
+      change.type = 'button';
+      change.className = 'change-link';
+      change.setAttribute('data-testid', 'change-agent');
+      change.textContent = 'Change…';
+      change.addEventListener('click', () => toggleAgentPicker(row.id));
+      li.appendChild(change);
+      if (state.activeAgentPickerRowId === row.id) {
+        li.appendChild(renderAgentPicker());
+      }
+    }
+
+    // Project picker affordance for the project row
+    if (row.id === 'project' && row.status !== 'ok') {
+      const picker = document.createElement('div');
+      picker.className = 'project-picker';
+      picker.setAttribute('data-testid', 'project-picker');
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.placeholder = 'C:\\Projects\\my-project or /Users/you/Projects/my-project';
+      input.value = state.session.state.workspacePath || '';
+      input.id = 'project-path-input';
+      const browse = document.createElement('button');
+      browse.type = 'button';
+      browse.className = 'browse';
+      browse.textContent = 'Browse';
+      browse.addEventListener('click', async () => {
+        try {
+          const picked = await api('/api/first-run/project-path/pick', 'POST');
+          if (picked && picked.path) input.value = picked.path;
+        } catch (err) {
+          setStatus(err.message, 'error');
+        }
+      });
+      picker.appendChild(input);
+      picker.appendChild(browse);
+      li.appendChild(picker);
+
+      // Preflight summary — show the user what FRAIM will do to their machine
+      // before they click Continue. Without this, a non-tech user has no way
+      // to know we're about to write to ~/.claude.json, drop GitHub workflow
+      // files, and call the registry. The "no surprises" half of the
+      // non-tech-user invariant lives here.
+      const preflight = document.createElement('div');
+      preflight.className = 'preflight-summary';
+      preflight.setAttribute('data-testid', 'preflight-summary');
+      const heading = document.createElement('div');
+      heading.className = 'preflight-heading';
+      heading.textContent = 'When you click Continue, FRAIM will:';
+      preflight.appendChild(heading);
+      const items = [
+        'Configure your AI agent so it can talk to FRAIM (a backup of your existing config is saved first).',
+        'Create a fraim/ folder inside the project you picked, with the workflow templates.',
+        'If the project has a GitHub remote, install the FRAIM GitHub Action and labels.',
+        'Download the latest FRAIM jobs and skills from the registry (uses your install key).',
+      ];
+      const ul = document.createElement('ul');
+      ul.className = 'preflight-list';
+      for (const text of items) {
+        const item = document.createElement('li');
+        item.textContent = text;
+        ul.appendChild(item);
+      }
+      preflight.appendChild(ul);
+      li.appendChild(preflight);
+    }
+
+    if (row.streamOutput) {
+      const stream = document.createElement('pre');
+      stream.className = 'row-stream';
+      stream.setAttribute('data-testid', 'row-stream');
+      stream.textContent = row.streamOutput;
+      li.appendChild(stream);
+    }
+
+    if (row.manualMessage) {
+      const message = document.createElement('div');
+      message.className = 'manual-message';
+      message.textContent = row.manualMessage;
+      li.appendChild(message);
+    }
+
+    if (row.status === 'error' && row.errorFrame && window.FraimErrorFrame) {
+      const frame = window.FraimErrorFrame.render(row.errorFrame, (action) => onErrorAction(row.id, action));
+      li.appendChild(frame);
+    }
+
+    return li;
+  }
+
+  function renderAgentPicker() {
+    const wrap = document.createElement('div');
+    wrap.className = 'agent-picker';
+    wrap.setAttribute('data-testid', 'agent-picker');
+
+    const header = document.createElement('div');
+    header.textContent = 'Pick the AI agent FRAIM should set up:';
+    header.style.color = 'var(--muted)';
+    header.style.fontSize = '13px';
+    wrap.appendChild(header);
+
+    const optionsWrap = document.createElement('div');
+    optionsWrap.className = 'options';
+    for (const option of state.session.agentOptions) {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'option';
+      btn.setAttribute('data-agent-id', option.id);
+      btn.setAttribute('aria-pressed', String(option.id === state.session.currentAgentId));
+      btn.textContent = option.label;
+      btn.addEventListener('click', async () => {
+        try {
+          const resp = await api('/api/first-run/agent/change', 'POST', { agentId: option.id });
+          setSessionFromActionResponse(resp);
+          state.activeAgentPickerRowId = null;
+          render();
+          setStatus(resp.message || `Selected ${option.label}.`);
+        } catch (err) {
+          setStatus(err.message, 'error');
+        }
+      });
+      optionsWrap.appendChild(btn);
+    }
+    wrap.appendChild(optionsWrap);
+
+    const advanced = document.createElement('details');
+    const summary = document.createElement('summary');
+    summary.textContent = 'Advanced: I have a different CLI';
+    advanced.appendChild(summary);
+    const warning = document.createElement('div');
+    warning.className = 'custom-warning';
+    warning.textContent = 'FRAIM will not auto-invoke unknown CLIs in v1. You will need to invoke this CLI manually from the Hub.';
+    advanced.appendChild(warning);
+    const form = document.createElement('div');
+    form.className = 'custom-form';
+    const nameInput = document.createElement('input');
+    nameInput.type = 'text';
+    nameInput.placeholder = 'CLI name (e.g. my-agent)';
+    const prefixInput = document.createElement('input');
+    prefixInput.type = 'text';
+    prefixInput.placeholder = 'Invocation prefix (e.g. $my-agent run)';
+    const submit = document.createElement('button');
+    submit.type = 'button';
+    submit.textContent = 'Use this CLI';
+    submit.addEventListener('click', async () => {
+      const name = nameInput.value.trim();
+      const invocationPrefix = prefixInput.value.trim();
+      if (!name) {
+        setStatus('Custom CLI name is required.', 'error');
+        return;
+      }
+      try {
+        const resp = await api('/api/first-run/agent/change', 'POST', { customAgent: { name, invocationPrefix } });
+        setSessionFromActionResponse(resp);
+        state.activeAgentPickerRowId = null;
+        render();
+        setStatus(resp.message);
+      } catch (err) {
+        setStatus(err.message, 'error');
+      }
+    });
+    form.appendChild(nameInput);
+    form.appendChild(prefixInput);
+    form.appendChild(submit);
+    advanced.appendChild(form);
+    wrap.appendChild(advanced);
+
+    return wrap;
+  }
+
+  function toggleAgentPicker(rowId) {
+    state.activeAgentPickerRowId = state.activeAgentPickerRowId === rowId ? null : rowId;
+    render();
+  }
+
+  async function runRow(rowId, extraBody) {
+    if (state.runningRowId) return;
+    state.runningRowId = rowId;
+    PRIMARY_BUTTON.disabled = true;
+    setStatus(`Running ${rowId}…`);
+    try {
+      const body = extraBody || {};
+      if (rowId === 'project') {
+        const input = document.getElementById('project-path-input');
+        if (input && input.value.trim()) {
+          body.projectPath = input.value.trim();
+        }
+      }
+      const resp = await api(`/api/first-run/rows/${rowId}/run`, 'POST', body);
+      setSessionFromActionResponse(resp);
+      setStatus(resp.message, resp.ok ? null : 'error');
+    } catch (err) {
+      setStatus(err.message, 'error');
+    } finally {
+      state.runningRowId = null;
+      PRIMARY_BUTTON.disabled = false;
+      render();
+    }
+  }
+
+  async function onErrorAction(rowId, action) {
+    const body = { errorActionId: action.id };
+    if (action.id === 'alternative' && action.alternativeAgentId) {
+      body.alternativeAgentId = action.alternativeAgentId;
+    }
+    await runRow(rowId, body);
+  }
+
+  async function onPrimaryClick() {
+    if (!state.session) return;
+    const rows = state.session.rows;
+    const projectRow = rows.find((r) => r.id === 'project');
+    const projectOk = projectRow && projectRow.status === 'ok';
+    const allOk = rows.every((r) => r.status === 'ok');
+    // Open-Hub gate: either everything is genuinely ok, or the user has
+    // explicitly chosen to handle the remaining steps themselves
+    // (Skip-and-continue → manual-required) and the project is ready.
+    const skipPathDone = projectOk && rows.every((r) => r.status === 'ok' || r.status === 'manual-required');
+
+    if (allOk || skipPathDone) {
+      try {
+        const finishResp = await api('/api/first-run/finish', 'POST');
+        setStatus(finishResp.message);
+        const openResp = await api('/api/first-run/open-hub', 'POST');
+        if (openResp && openResp.message) setStatus(openResp.message);
+      } catch (err) {
+        setStatus(err.message, 'error');
+      }
+      return;
+    }
+    // Find the first PENDING row (not just non-ok). Manual-required rows
+    // represent steps the user has chosen to handle themselves (skip on
+    // agent) or steps that are inherently manual (project pick) — both
+    // should not be silently re-run on a Continue click.
+    let next = rows.find((r) => r.status === 'pending' && r.id !== 'project');
+    if (!next) {
+      // No pending non-project rows. If the project row still needs a path,
+      // focus the input. Otherwise run project to finalize, or fall through
+      // to "open hub" if nothing remains.
+      const projectRow = rows.find((r) => r.id === 'project');
+      if (projectRow && projectRow.status !== 'ok') {
+        next = projectRow;
+      }
+    }
+    if (!next) return;
+    if (next.id === 'project') {
+      const input = document.getElementById('project-path-input');
+      if (input && !input.value.trim()) {
+        input.focus();
+        setStatus('Pick a project folder to continue.');
+        return;
+      }
+    }
+    await runRow(next.id);
+
+    // Auto-progress: keep running pending non-project rows until one errors
+    // or surfaces a manual-required state that isn't the project row (e.g.
+    // the agent-login row asking for a vendor sign-in). The project row is
+    // always manual by design and does not block the auto-progress loop.
+    while (state.session) {
+      const blockingError = state.session.rows.find((r) => r.status === 'error');
+      const blockingManual = state.session.rows.find((r) => r.status === 'manual-required' && r.id !== 'project');
+      if (blockingError || blockingManual) break;
+      const nextRow = state.session.rows.find((r) => r.status === 'pending' && r.id !== 'project');
+      if (!nextRow) break;
+      await runRow(nextRow.id);
+    }
+  }
+
+  function render() {
+    if (!state.session) return;
+    const { rows, primaryButtonLabel } = state.session;
+    CHECKLIST_EL.innerHTML = '';
+    for (const row of rows) {
+      CHECKLIST_EL.appendChild(renderRow(row));
+    }
+    PRIMARY_BUTTON.textContent = primaryButtonLabel || 'Set up FRAIM';
+    applyHeading(rows);
+  }
+
+  PRIMARY_BUTTON.addEventListener('click', onPrimaryClick);
+
+  loadSession().catch((err) => {
+    setStatus(err.message || 'Could not load first-run.', 'error');
+  });
+}());