fraim 2.0.128 → 2.0.130

package/public/first-run/index.html

@@ -10,18 +10,17 @@
   <main class="page">
     <header class="page-header">
       <h1>Set up FRAIM</h1>
-      <p class="lede" id="lede">We're getting your machine ready. Sit tight — we'll only need you for one step.</p>
+      <p class="lede" id="lede">We are getting your machine ready for FRAIM.</p>
     </header>
 
     <section class="card">
       <ul class="checklist" id="checklist" data-testid="setup-checklist" aria-label="FRAIM setup checklist">
         <!-- Skeleton rows shown until the async session-load completes.
              Replaced wholesale by script.js once /api/first-run/session returns. -->
-        <li class="row skeleton-row" data-row-id="node" data-row-status="pending"><span class="icon" aria-hidden="true">·</span><span class="label">Node.js</span><span class="verb" data-testid="row-verb">checking…</span></li>
-        <li class="row skeleton-row" data-row-id="git" data-row-status="pending"><span class="icon" aria-hidden="true">·</span><span class="label">git</span><span class="verb" data-testid="row-verb">checking…</span></li>
-        <li class="row skeleton-row" data-row-id="agent" data-row-status="pending"><span class="icon" aria-hidden="true">·</span><span class="label">AI agent</span><span class="verb" data-testid="row-verb">checking…</span></li>
-        <li class="row skeleton-row" data-row-id="agent-login" data-row-status="pending"><span class="icon" aria-hidden="true">·</span><span class="label">Sign in</span><span class="verb" data-testid="row-verb">checking…</span></li>
-        <li class="row skeleton-row" data-row-id="project" data-row-status="pending"><span class="icon" aria-hidden="true">·</span><span class="label">Project folder</span><span class="verb" data-testid="row-verb">checking…</span></li>
+        <li class="row skeleton-row" data-row-id="node" data-row-status="pending"><span class="icon" aria-hidden="true">.</span><span class="label">Node.js</span><span class="verb" data-testid="row-verb">checking...</span></li>
+        <li class="row skeleton-row" data-row-id="git" data-row-status="pending"><span class="icon" aria-hidden="true">.</span><span class="label">git</span><span class="verb" data-testid="row-verb">checking...</span></li>
+        <li class="row skeleton-row" data-row-id="fraim" data-row-status="pending"><span class="icon" aria-hidden="true">.</span><span class="label">FRAIM</span><span class="verb" data-testid="row-verb">checking...</span></li>
+        <li class="row skeleton-row" data-row-id="agent" data-row-status="pending"><span class="icon" aria-hidden="true">.</span><span class="label">AI Employees</span><span class="verb" data-testid="row-verb">checking...</span></li>
       </ul>
       <div class="actions">
         <button id="primary-button" class="primary-button" data-testid="primary-button">Set up FRAIM</button>

package/public/first-run/script.js

@@ -8,40 +8,43 @@
 
   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');
-    }
+    if (tone) STATUS_EL.setAttribute('data-tone', tone);
+    else STATUS_EL.removeAttribute('data-tone');
+  }
+
+  function setHeader(title, lede) {
+    const h1El = document.querySelector('.page-header h1');
+    if (h1El) h1El.textContent = title;
+    if (LEDE_EL) LEDE_EL.textContent = lede;
   }
 
   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.';
+    const complete = rows.every((r) => r.status === 'ok' || r.status === 'manual-required') && rows.some((r) => r.status === 'ok');
+    if (complete) {
+      const setupResult = state.session && state.session.state ? state.session.state.setupResult : null;
+      if (setupResult && setupResult.detectedSurfaceCount > 0) {
+        LEDE_EL.textContent = 'The following AI agents are now ready to function as your AI Employees.';
+      } else {
+        LEDE_EL.textContent = "You do not seem to have any AI agents on this machine.";
+      }
       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.';
+      LEDE_EL.textContent = "Something did not go through. Pick the right next step below.";
       return;
     }
     if (rows.some((r) => r.status === 'ok')) {
-      LEDE_EL.textContent = 'Some pieces are already on your machine. We\'re finishing the rest now.';
+      LEDE_EL.textContent = 'FRAIM is finishing setup on this machine.';
       return;
     }
-    LEDE_EL.textContent = 'We\'re getting your machine ready. Sit tight — we\'ll only need you for one step.';
+    LEDE_EL.textContent = 'We are getting your machine ready for FRAIM.';
   }
 
   async function api(path, method, body) {
@@ -74,8 +77,6 @@
   }
 
   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;
@@ -83,20 +84,16 @@
     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 === 'in-progress' ? '...' :
       status === 'manual-required' ? '!' :
       status === 'error' ? '!' :
-      '·';
+      '.';
     return icon;
   }
 
@@ -127,75 +124,6 @@
       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';
@@ -219,105 +147,45 @@
     return li;
   }
 
-  function renderAgentPicker() {
-    const wrap = document.createElement('div');
-    wrap.className = 'agent-picker';
-    wrap.setAttribute('data-testid', 'agent-picker');
+  function renderSetupSummary() {
+    const setupResult = state.session && state.session.state ? state.session.state.setupResult : null;
+    if (!setupResult) return null;
 
-    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');
+    const li = document.createElement('li');
+    li.className = 'setup-result';
+    li.setAttribute('data-testid', 'setup-result');
+
+    const title = document.createElement('strong');
+    title.textContent = setupResult.detectedSurfaceCount > 0
+      ? 'The following AI agents are now ready to function as your AI Employees'
+      : "You do not seem to have any AI agents on this machine";
+    li.appendChild(title);
+
+    if (setupResult.detectedSurfaceCount > 0) {
+      const list = document.createElement('ul');
+      list.className = 'surface-list';
+      for (const surface of setupResult.configuredSurfaces || []) {
+        const item = document.createElement('li');
+        item.textContent = surface.name;
+        list.appendChild(item);
       }
-    });
-    form.appendChild(nameInput);
-    form.appendChild(prefixInput);
-    form.appendChild(submit);
-    advanced.appendChild(form);
-    wrap.appendChild(advanced);
-
-    return wrap;
-  }
+      li.appendChild(list);
+    } else {
+      const copy = document.createElement('p');
+      copy.textContent = "Let's recruit some agents who can function as your AI Employees.";
+      li.appendChild(copy);
+    }
 
-  function toggleAgentPicker(rowId) {
-    state.activeAgentPickerRowId = state.activeAgentPickerRowId === rowId ? null : rowId;
-    render();
+    return li;
   }
 
   async function runRow(rowId, extraBody) {
     if (state.runningRowId) return;
     state.runningRowId = rowId;
     PRIMARY_BUTTON.disabled = true;
-    setStatus(`Running ${rowId}…`);
+    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);
+      const resp = await api(`/api/first-run/rows/${rowId}/run`, 'POST', extraBody || {});
       setSessionFromActionResponse(resp);
       setStatus(resp.message, resp.ok ? null : 'error');
     } catch (err) {
@@ -339,72 +207,252 @@
 
   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) {
+
+    if (state.session.primaryButtonLabel === 'Get Started') {
+      PRIMARY_BUTTON.disabled = true;
+      const setupResult = state.session.state ? state.session.state.setupResult : null;
+      if (setupResult && setupResult.detectedSurfaceCount === 0) {
+        renderRecruitAgents();
+        return;
+      }
       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');
+        const ideData = await api('/api/first-run/ide-commands');
+        renderStartWorking(ideData ? ideData.commands : []);
+      } catch (_err) {
+        renderStartWorking([]);
       }
       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;
-      }
-    }
+
+    const next = state.session.rows.find((r) => r.status === 'pending');
     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 (blockingError) break;
+      const nextRow = state.session.rows.find((r) => r.status === 'pending');
       if (!nextRow) break;
       await runRow(nextRow.id);
     }
   }
 
+  function renderRecruitAgents() {
+    CHECKLIST_EL.className = 'selection-container recruit-container';
+    CHECKLIST_EL.innerHTML = '';
+    PRIMARY_BUTTON.style.display = 'none';
+    setHeader('Recruit AI Employees', 'Choose how you want to add AI Employees to this machine.');
+
+    const options = [
+      { title: 'Claude Code', desc: 'Install Claude Code and connect it to FRAIM.' },
+      { title: 'Codex', desc: 'Install Codex and connect it to FRAIM.' },
+      { title: 'Gemini CLI', desc: 'Install Gemini CLI and connect it to FRAIM.' },
+      { title: 'Bring Your Own Agent', desc: 'Install Cursor, Windsurf, Kiro, VS Code, or another supported AI tool.' },
+    ];
+
+    for (const option of options) {
+      const li = document.createElement('li');
+      const card = document.createElement('div');
+      card.className = 'user-type-card recruit-card';
+      const title = document.createElement('strong');
+      title.className = 'card-title';
+      title.textContent = option.title;
+      const desc = document.createElement('p');
+      desc.className = 'card-desc';
+      desc.textContent = option.desc;
+      card.appendChild(title);
+      card.appendChild(desc);
+
+      if (option.title === 'Bring Your Own Agent') {
+        const note = document.createElement('p');
+        note.className = 'card-desc';
+        note.textContent = 'When you are done installing your agent, run:';
+        card.appendChild(note);
+        const cmd = document.createElement('div');
+        cmd.className = 'cmd-block';
+        cmd.textContent = 'npx fraim add-ide';
+        card.appendChild(cmd);
+      }
+
+      li.appendChild(card);
+      CHECKLIST_EL.appendChild(li);
+    }
+
+    const continueLi = document.createElement('li');
+    const continueBtn = document.createElement('button');
+    continueBtn.type = 'button';
+    continueBtn.className = 'btn btn-primary btn-block';
+    continueBtn.textContent = 'Continue';
+    continueBtn.addEventListener('click', async () => {
+      try {
+        const ideData = await api('/api/first-run/ide-commands');
+        renderStartWorking(ideData ? ideData.commands : []);
+      } catch (_err) {
+        renderStartWorking([]);
+      }
+    });
+    continueLi.appendChild(continueBtn);
+    CHECKLIST_EL.appendChild(continueLi);
+  }
+
+  function renderStartWorking(ideCommands) {
+    CHECKLIST_EL.className = 'selection-container start-container';
+    CHECKLIST_EL.innerHTML = '';
+    PRIMARY_BUTTON.style.display = 'none';
+    setHeader('Get your AI Employees to start working', 'Choose where you want to work.');
+
+    const ideLi = document.createElement('li');
+    const ideCard = document.createElement('div');
+    ideCard.className = 'user-type-card';
+    ideCard.appendChild(cardHeader('</>', 'In my IDE', 'Claude Code, Cursor, Codex, or another AI tool'));
+    const ideBtn = document.createElement('button');
+    ideBtn.type = 'button';
+    ideBtn.className = 'btn btn-secondary btn-block';
+    ideBtn.textContent = 'Show command';
+    ideBtn.addEventListener('click', async () => {
+      try {
+        await api('/api/first-run/set-preference', 'POST', { choice: 'ide' });
+      } catch (_err) { /* non-fatal */ }
+      renderIdeCommandDisplay(ideCommands);
+    });
+    ideCard.appendChild(ideBtn);
+    ideLi.appendChild(ideCard);
+    CHECKLIST_EL.appendChild(ideLi);
+
+    const orLi = document.createElement('li');
+    orLi.className = 'route-or';
+    orLi.setAttribute('role', 'separator');
+    orLi.setAttribute('aria-hidden', 'true');
+    orLi.textContent = 'or';
+    CHECKLIST_EL.appendChild(orLi);
+
+    const hubLi = document.createElement('li');
+    const hubCard = document.createElement('div');
+    hubCard.className = 'user-type-card user-type-card--featured';
+    hubCard.appendChild(cardHeader('Hub', 'In FRAIM Hub', 'Browser-based launcher'));
+    const hubBtn = document.createElement('button');
+    hubBtn.type = 'button';
+    hubBtn.className = 'btn btn-primary btn-block';
+    hubBtn.textContent = 'Open Hub';
+    hubBtn.addEventListener('click', async () => {
+      try {
+        await api('/api/first-run/set-preference', 'POST', { choice: 'hub' });
+      } catch (_err) { /* non-fatal */ }
+      try {
+        hubBtn.disabled = true;
+        setStatus('Opening Hub...');
+        const openResp = await api('/api/first-run/open-hub', 'POST');
+        if (openResp && openResp.message) setStatus(openResp.message);
+        if (openResp && openResp.hubUrl) window.location.replace(openResp.hubUrl);
+      } catch (err) {
+        hubBtn.disabled = false;
+        setStatus(err.message, 'error');
+      }
+    });
+    hubCard.appendChild(hubBtn);
+    hubLi.appendChild(hubCard);
+    CHECKLIST_EL.appendChild(hubLi);
+  }
+
+  function cardHeader(iconText, titleText, descText) {
+    const header = document.createElement('div');
+    header.className = 'card-header';
+    const icon = document.createElement('div');
+    icon.className = 'card-icon';
+    icon.textContent = iconText;
+    const text = document.createElement('div');
+    const title = document.createElement('strong');
+    title.className = 'card-title';
+    title.textContent = titleText;
+    const desc = document.createElement('p');
+    desc.className = 'card-desc';
+    desc.textContent = descText;
+    text.appendChild(title);
+    text.appendChild(desc);
+    header.appendChild(icon);
+    header.appendChild(text);
+    return header;
+  }
+
+  function renderIdeCommandDisplay(commands) {
+    CHECKLIST_EL.className = 'selection-container';
+    CHECKLIST_EL.innerHTML = '';
+    setHeader('Work in your IDE', 'Open your project in your AI tool and type:');
+
+    const cmdList = (commands && commands.length > 0) ? commands : ['/fraim onboard this project'];
+    for (const cmd of cmdList) {
+      const li = document.createElement('li');
+      const row = document.createElement('div');
+      row.className = 'command-row';
+      const block = document.createElement('div');
+      block.className = 'cmd-block';
+      block.textContent = cmd;
+      const copyBtn = document.createElement('button');
+      copyBtn.type = 'button';
+      copyBtn.className = 'btn btn-secondary';
+      copyBtn.textContent = 'Copy';
+      copyBtn.setAttribute('aria-label', `Copy command: ${cmd}`);
+      copyBtn.addEventListener('click', async () => {
+        try {
+          await navigator.clipboard.writeText(cmd);
+          copyBtn.textContent = 'Copied';
+          setTimeout(() => { copyBtn.textContent = 'Copy'; }, 1500);
+        } catch (_err) {
+          // Fallback for environments where clipboard API is unavailable.
+          try {
+            const ta = document.createElement('textarea');
+            ta.value = cmd;
+            ta.style.position = 'fixed';
+            ta.style.opacity = '0';
+            document.body.appendChild(ta);
+            ta.select();
+            document.execCommand('copy');
+            document.body.removeChild(ta);
+            copyBtn.textContent = 'Copied';
+            setTimeout(() => { copyBtn.textContent = 'Copy'; }, 1500);
+          } catch (_e) {
+            copyBtn.textContent = 'Copy failed';
+            setTimeout(() => { copyBtn.textContent = 'Copy'; }, 1500);
+          }
+        }
+      });
+      row.appendChild(block);
+      row.appendChild(copyBtn);
+      li.appendChild(row);
+      CHECKLIST_EL.appendChild(li);
+    }
+
+    const switchLi = document.createElement('li');
+    const switchLink = document.createElement('button');
+    switchLink.type = 'button';
+    switchLink.className = 'text-button';
+    switchLink.textContent = 'Switch to FRAIM Hub';
+    switchLink.addEventListener('click', async () => {
+      try {
+        await api('/api/first-run/set-preference', 'POST', { choice: 'hub' });
+        const openResp = await api('/api/first-run/open-hub', 'POST');
+        if (openResp && openResp.hubUrl) window.location.replace(openResp.hubUrl);
+      } catch (err) {
+        setStatus(err.message, 'error');
+      }
+    });
+    switchLi.appendChild(switchLink);
+    CHECKLIST_EL.appendChild(switchLi);
+  }
+
   function render() {
     if (!state.session) return;
+    CHECKLIST_EL.className = 'checklist';
+    PRIMARY_BUTTON.style.display = '';
     const { rows, primaryButtonLabel } = state.session;
     CHECKLIST_EL.innerHTML = '';
     for (const row of rows) {
       CHECKLIST_EL.appendChild(renderRow(row));
     }
+    if (primaryButtonLabel === 'Get Started') {
+      const summary = renderSetupSummary();
+      if (summary) CHECKLIST_EL.appendChild(summary);
+    }
     PRIMARY_BUTTON.textContent = primaryButtonLabel || 'Set up FRAIM';
     applyHeading(rows);
   }