@gafj/gafj 0.1.2 → 0.1.4

package/README.md

@@ -28,6 +28,7 @@ Status: phases 1 through 6 built and tested (82 public tests on the synthetic ca
 - Bullet register (screen 6): `house_rules.bullet_register` is `result_first` (default, RAS), `action_first`, or `posting`; it travels in the resume packet's HOUSE RULES and `core/rules/resume.md` says what each means. Same facts, same claims, same gate; only word order.
 - Backup folder (screen 6): `config.backup_dir`, meant for a synced folder (Drive, OneDrive, Dropbox); `store/backup_dir.js` writes dated consistent copies there (`gafj backup`, the Back up now button, and one a day at `serve` start), keeps the newest 14, never prunes a pre-restore copy, and refuses the data folder itself. The live store never goes to a synced folder.
 - Hosted tier (plan W, gates 2 and 4 as code): `http/hosted.js` runs the same routes, screens, and doors behind a Google sign-in with one store per user under `<root>/tenants/<uid>/`; the session names the uid, the uid names the folder, and no query spans tenants (`test/hosted.test.js` drives every parameterized route as user B with user A's ids and expects 404 and no leaked text). Provider keys, MCP config, and the restore test are 404 for hosted users; the model is reached through the relay with a service key and the uid (`x-gafj-service`, `x-gafj-uid`; the relay's second auth path), never a stored user token. `/account/export` streams a restorable backup, `/account/delete` removes the folder and every session. `http/identity.js` verifies Firebase ID tokens with node:crypto against Google's JWK set, no SDK. `ui/hosted/signin.html` is the one page with a loosened CSP (Firebase Auth from gstatic). `gafj serve-hosted` is configured by environment only; `deploy/hosted/` holds the Dockerfile and fly.toml; `functions/relay/deploy.js` builds the relay with Firebase Admin, Stripe, and the Anthropic SDK and `functions/index.js` exports it as `relay`. Nothing is deployed; `docs/operator-setup.md` is the list of what only the operator can do.
+- First run: `ui/screens/welcome.js` gates the app until the six setup steps are done or skipped (`store/setup.js`, `/api/setup`): which AI (key saved and tested inline; paste; Claude Desktop config inline), upload, extract (Extract all runs every file through the active provider; paste opens a packet per file), confirm pending inline, discovery questions inline, first posting inline. The dashboard carries the same checklist afterwards. Provider form is provider plus key with an advanced fold; the first provider becomes active and the route switches to it.
 - `bin/cli.js`: `start` (the one command: candidate if none, then url or serve), `migrate`, `import`, `snapshot`, `review`, `lint`, `list`, `score-freeze`, `packet`, `ingest`, `render`, `export`, `backup`, `restore`, `mcp`, `print-mcp-config`, `serve`, `url`, `rotate-token`, `install-startup`, `allow-host`, `init`, `onboard`; every other command names its phase and exits
 
 Onboarding another candidate, phase 5b:

package/http/api.js

@@ -151,6 +151,12 @@ route("GET", "/api/kb/questions", (c, p, b, q) => discover.listQuestions(c.db, c
 route("POST", "/api/kb/questions/:id/answer", (c, p, b) => discover.answerQuestion(c.db, { candidate_id: c.candidate_id, question_id: p.id, draft: need(b, "draft"), now: c.now(), actor: ACTOR("answer_question") }));
 route("POST", "/api/kb/questions/:id/dismiss", (c, p) => discover.dismissQuestion(c.db, { candidate_id: c.candidate_id, question_id: p.id, now: c.now(), actor: ACTOR("dismiss_question") }));
 
+// guided setup (first run)
+const setup = require("../store/setup");
+route("GET", "/api/setup", (c) => setup.setupView(c.db, c.home, c.candidate_id));
+route("POST", "/api/setup/ai", (c, p, b) => { const r = setup.chooseAi(c.db, c.home, c.candidate_id, { route: need(b, "route"), now: c.now(), actor: ACTOR("setup") }); if (c.reload) c.reload(); return r; });
+route("POST", "/api/setup/dismiss", (c, p, b) => setup.dismiss(c.db, c.home, c.candidate_id, { dismissed: b.dismissed !== false }));
+
 // settings (screen 6)
 const settings = require("../store/settings");
 route("GET", "/api/settings", (c) => settings.getSettings(c.db, c.home, c.candidate_id));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gafj/gafj",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "GAF-J: a local campaign engine for job search. One SQLite file, one ingest door, your own AI subscription.",
   "homepage": "https://gaf-j.com",
   "repository": {

package/store/setup.js

@@ -0,0 +1,54 @@
+"use strict";
+
+/**
+ * The guided setup (first run): six steps in the order they must happen,
+ * each computed from the store, so the checklist is never out of date and
+ * nothing is stored except two flags in config: which AI route the user
+ * chose on purpose (the default is paste, which says nothing), and whether
+ * they dismissed the card. The card leaves on its own when every step is done.
+ */
+
+const { readConfig, writeConfig } = require("./config");
+
+const ROUTE_LABEL = { paste: "Paste", mcp: "Claude Desktop", byo_key: "My providers", credits: "Credits" };
+
+function setupView(db, homeDir, candidate_id) {
+  const cfg = readConfig(homeDir);
+  const one = (sql, ...a) => db.prepare(sql).get(...a).c;
+  const sources = one("SELECT count(*) c FROM source_document WHERE candidate_id = ?", candidate_id);
+  const extracted = one("SELECT count(*) c FROM ai_run WHERE candidate_id = ? AND operation = 'extract' AND final_result = 'passed'", candidate_id);
+  const pending = one("SELECT count(*) c FROM pending_accomplishment WHERE candidate_id = ?", candidate_id);
+  const confirmed = one("SELECT count(*) c FROM accomplishment WHERE candidate_id = ?", candidate_id);
+  const questions = one("SELECT count(*) c FROM kb_question WHERE candidate_id = ?", candidate_id);
+  const postings = one("SELECT count(*) c FROM posting WHERE candidate_id = ?", candidate_id);
+  const aiChosen = !!(cfg.setup && cfg.setup.ai_chosen);
+  const steps = [
+    { key: "ai", title: "Tell GAF-J which AI you use", done: aiChosen, detail: aiChosen ? `Using ${ROUTE_LABEL[cfg.route] || cfg.route}` : null },
+    { key: "upload", title: "Upload your resumes", done: sources > 0, detail: sources ? `${sources} file${sources === 1 ? "" : "s"} uploaded` : null },
+    { key: "extract", title: "Extract records from them", done: extracted > 0 || pending > 0 || confirmed > 0, detail: extracted ? `${extracted} extraction${extracted === 1 ? "" : "s"} saved` : null },
+    { key: "confirm", title: "Confirm the records you stand behind", done: confirmed > 0, detail: confirmed ? `${confirmed} confirmed${pending ? `, ${pending} still pending` : ""}` : (pending ? `${pending} waiting for you` : null) },
+    { key: "discover", title: "Answer what's missing", done: questions > 0, detail: questions ? `${questions} question${questions === 1 ? "" : "s"} asked` : null },
+    { key: "posting", title: "Paste your first job posting", done: postings > 0, detail: postings ? `${postings} posting${postings === 1 ? "" : "s"}` : null },
+  ];
+  const next = steps.find((s) => !s.done);
+  return { steps, next: next ? next.key : null, complete: !next, dismissed: !!(cfg.setup && cfg.setup.dismissed), route: cfg.route || "paste" };
+}
+
+/** The user picked how they will use AI; the route is set and the step is done. */
+function chooseAi(db, homeDir, candidate_id, { route, now, actor }) {
+  const settings = require("./settings");
+  settings.putSettings(db, homeDir, candidate_id, { route }, { now, actor });
+  const cfg = readConfig(homeDir);
+  cfg.setup = { ...(cfg.setup || {}), ai_chosen: true };
+  writeConfig(homeDir, cfg);
+  return setupView(db, homeDir, candidate_id);
+}
+
+function dismiss(db, homeDir, candidate_id, { dismissed = true } = {}) {
+  const cfg = readConfig(homeDir);
+  cfg.setup = { ...(cfg.setup || {}), dismissed: !!dismissed };
+  writeConfig(homeDir, cfg);
+  return setupView(db, homeDir, candidate_id);
+}
+
+module.exports = { setupView, chooseAi, dismiss };

package/ui/app.css

@@ -135,3 +135,38 @@ input.narrow { width: 76px; }
 pre.wrap { white-space: pre-wrap; }
 /* KB "receipt" moment: the confirmed span highlighted inline against its muted source sentence. */
 mark { background: var(--good-bg); color: var(--good-bright); border-radius: 3px; padding: 0 3px; font-weight: 500; }
+
+/* guided setup on the dashboard: the next step is open with its words and its button; done steps collapse to a line */
+.setup { margin-top: 10px; border-color: var(--accent); }
+.setup-steps { list-style: none; margin: 10px 0 0; padding: 0; }
+.setup-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); align-items: start; }
+.setup-steps li:first-child { border-top: 0; }
+.setup-steps .n { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); }
+.setup-steps li.done .n { background: var(--good-bg); color: var(--good-bright); border-color: var(--good-bg); }
+.setup-steps li.next .n { border-color: var(--accent); color: var(--accent); font-weight: 600; }
+.setup-steps li.done .t { color: var(--muted); }
+.setup-steps li.later .t { color: var(--dim); }
+.setup-steps li.next .t { font-weight: 600; }
+.setup-steps p { margin: 4px 0 8px; color: var(--muted); max-width: 66ch; }
+.ai-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-top: 4px; }
+.ai-options button { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; height: 100%; }
+.ai-options button:hover { border-color: var(--accent); }
+.provider-form details.advanced { width: 100%; }
+.provider-form details.advanced input { margin: 6px 6px 0 0; min-width: 240px; }
+
+/* the first-run screen: no rail, one step at a time */
+.welcome { max-width: 860px; margin: 0 auto; padding: 36px 24px 60px; background: var(--surface); min-height: 100vh; }
+.welcome-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
+.welcome-head img { border-radius: 9px; }
+.welcome-head a { margin-left: auto; }
+.stepper { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--dim); }
+.stepper li { display: inline-flex; align-items: center; gap: 6px; }
+.stepper li.done { color: var(--muted); }
+.stepper li.now { color: var(--ink); font-weight: 600; }
+.stepper .n { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; }
+.stepper li.done .n { background: var(--good-bg); color: var(--good-bright); border-color: var(--good-bg); }
+.stepper li.now .n { border-color: var(--accent); color: var(--accent); }
+.welcome-body h3 { margin-top: 0; }
+.welcome-body p { color: var(--muted); max-width: 66ch; }
+.welcome-body .card { border: 0; padding: 0; background: transparent; }
+.ai-options button.picked { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

package/ui/app.js

@@ -7,6 +7,7 @@ import { Document } from "./screens/document.js";
 import { Postings } from "./screens/postings.js";
 import { KB } from "./screens/kb.js";
 import { Settings } from "./screens/settings.js";
+import { Welcome } from "./screens/welcome.js";
 
 function Rail({ route, me }) {
   const is = (p) => (route.path === p || (p !== "/" && route.path.startsWith(p)) ? "active" : "");
@@ -57,8 +58,12 @@ function App() {
   const route = useRoute();
   const live = useLive();
   const [me, setMe] = useState(null);
+  const [gate, setGate] = useState(null); // null: unknown; true: show the first-run screen; false: the app
   useEffect(() => { api.get("/api/me").then(setMe).catch(() => setMe({ name: "no session", route: "", version: "" })); }, []);
+  useEffect(() => { if (gate === false) return; api.get("/api/setup").then((s) => setGate(!s.complete && !s.dismissed)).catch(() => setGate(false)); }, [live]);
   const seg = route.path.split("/").filter(Boolean);
+  if (gate === null) return html`<div class="welcome"><p class="muted">loading</p></div>`;
+  if (gate) return html`<${Welcome} live=${live} onDone=${() => setGate(false)} />`;
   let screen;
   if (seg[0] === "applications" && seg[1]) screen = html`<${Application} id=${seg[1]} live=${live} />`;
   else if (seg[0] === "applications") screen = html`<${Applications} live=${live} />`;

package/ui/screens/dashboard.js

@@ -1,11 +1,50 @@
 import { html, useState, useEffect } from "../vendor/preact.mjs";
 import { api, fmtWhen } from "../lib.js";
 
+/** The six steps a new user takes, in order, with the words for each and where the button goes. */
+const STEPS = {
+  ai: { why: "GAF-J never writes text itself. It hands a packet of your confirmed facts to an AI you already have, then checks every figure in the reply. Pick how you will connect one; you can change it later in Settings.", cta: null },
+  upload: { why: "Every resume you have, old ones too. Word, PDF, Markdown, or plain text. The text is read on this PC; nothing is uploaded anywhere.", cta: ["#/kb", "Open Knowledge base"] },
+  extract: { why: "Your AI reads each uploaded file and proposes records where every number and phrase is quoted from the file; anything it cannot quote is refused. With a provider key, Extract all runs the whole pile in one click; on the paste route each file is one packet you carry to your chat and back.", cta: ["#/kb", "Extract on Knowledge base"] },
+  discover_direct: null,
+  confirm: { why: "Under Pending, read each proposed record. Confirm the ones you can stand behind in an interview, edit what is off, dismiss the rest. Only confirmed records can ever appear in a document.", cta: ["#/kb", "Review Pending"] },
+  discover: { why: "Click Ask what's missing. Your AI reads the confirmed records and asks the questions a coach would: the figure a record lacks, the size of a team, the story behind a bare bullet. Each answer strengthens a record.", cta: ["#/kb", "Ask what's missing"] },
+  posting: { why: "Paste the text of a job you want. GAF-J scores it against your record, shows what the posting asks for and what you have, and from there builds the resume, the interview prep, and the rest.", cta: ["#/postings", "Paste a posting"] },
+};
+const AI_OPTIONS = [
+  ["paste", "Paste", "Works with any chat you already pay for: ChatGPT, Claude, Gemini. Copy the packet, paste the reply. No keys, no setup."],
+  ["mcp", "Claude Desktop", "Claude talks to the app directly through a local connector. Print the config in Settings and add it to Claude Desktop."],
+  ["byo_key", "My own API key", "The app calls the provider itself with a key you add in Settings. The key never leaves this PC."],
+];
+
+function Setup({ s, reload }) {
+  const [busy, setBusy] = useState(false);
+  const choose = async (route) => { setBusy(true); try { await api.post("/api/setup/ai", { route }); await reload(); } finally { setBusy(false); } };
+  const done = s.steps.filter((x) => x.done).length;
+  return html`<div class="card setup">
+    <div class="row between"><b>Getting started: ${done} of ${s.steps.length}</b><button class="small" onClick=${async () => { await api.post("/api/setup/dismiss", {}); reload(); }}>hide</button></div>
+    <ol class="setup-steps">${s.steps.map((st, i) => {
+      const meta = STEPS[st.key];
+      const isNext = s.next === st.key;
+      return html`<li key=${st.key} class=${st.done ? "done" : isNext ? "next" : "later"}>
+        <span class="n mono">${st.done ? "✓" : i + 1}</span>
+        <div>
+          <div class="t">${st.title}${st.detail ? html` <span class="muted small">· ${st.detail}</span>` : ""}</div>
+          ${isNext ? html`<p class="small">${meta.why}</p>
+            ${st.key === "ai" ? html`<div class="ai-options">${AI_OPTIONS.map(([r, label, text]) => html`<button key=${r} disabled=${busy} onClick=${() => choose(r)}><b>${label}</b><span class="small muted">${text}</span></button>`)}</div>`
+              : html`<div class="row"><a href=${meta.cta[0]}><button class="primary small">${meta.cta[1]}</button></a></div>`}` : ""}
+        </div></li>`;
+    })}</ol>
+  </div>`;
+}
+
 export function Dashboard({ live }) {
   const [snap, setSnap] = useState(null);
+  const [setup, setSetup] = useState(null);
   const [msg, setMsg] = useState("");
   const [err, setErr] = useState("");
-  useEffect(() => { api.get("/api/snapshot").then(setSnap).catch((e) => setErr(e.message)); }, [live]);
+  const loadSetup = () => api.get("/api/setup").then(setSetup).catch(() => setSetup(null));
+  useEffect(() => { api.get("/api/snapshot").then(setSnap).catch((e) => setErr(e.message)); loadSetup(); }, [live]);
   const act = async (path, label) => { setMsg(""); setErr(""); try { const r = await api.post(path); setMsg(`${label}: ${r.file}`); } catch (e) { setErr(e.message); } };
   if (err && !snap) return html`<p class="error">${err}</p>`;
   if (!snap) return html`<p class="muted">loading</p>`;
@@ -13,6 +52,8 @@ export function Dashboard({ live }) {
   return html`<div>
     <h1>Dashboard</h1>
     <div class="sub">${new Date(snap.now).toLocaleString()}</div>
+    ${setup && !setup.complete && !setup.dismissed ? html`<${Setup} s=${setup} reload=${loadSetup} />` : ""}
+    ${setup && !setup.complete && setup.dismissed ? html`<p class="small muted">Setup is hidden. <a href="#/" onClick=${async (e) => { e.preventDefault(); await api.post("/api/setup/dismiss", { dismissed: false }); loadSetup(); }}>Show the steps again</a>.</p>` : ""}
     <h2>Needs you now</h2>
     <div class="card">${snap.needs_you.length ? html`<ul class="list">${snap.needs_you.map((n, i) => html`<li key=${i}>
       <span class=${"need " + (n.kind === "thankyou_due" || n.kind === "review" ? "soft" : "")}>●</span> <a href=${link(n)}>${n.text}</a></li>`)}</ul>` : html`<span class="muted">nothing waiting on you</span>`}</div>

package/ui/screens/kb.js

@@ -7,11 +7,35 @@ function readFileBase64(file) {
 }
 
 /** Onboarding: upload resumes, build extraction packets, decide duplicate groups. */
-function Onboarding({ d, reload, setErr }) {
+export function Onboarding({ d, reload, setErr, route, compact }) {
   const [modal, setModal] = useState(null);
   const [busy, setBusy] = useState(false);
   const [style, setStyle] = useState(null);
+  const [running, setRunning] = useState({});
   const b = d.batch;
+  const direct = route === "byo_key" || route === "credits";
+  // with a provider or credits the extraction runs here; otherwise the packet opens for paste
+  const runOne = async (s) => {
+    setRunning((r) => ({ ...r, [s.source_document_id]: "running" }));
+    try {
+      const r = await api.post(`/api/run/extract?source_document_id=${s.source_document_id}`, {});
+      setRunning((x) => ({ ...x, [s.source_document_id]: r.status === "passed" ? `${r.pending_ids.length} records proposed` : `refused: ${(r.errors || []).slice(0, 2).join("; ")}` }));
+    } catch (e) { setRunning((x) => ({ ...x, [s.source_document_id]: "failed: " + e.message })); }
+  };
+  const extract = async (s) => {
+    if (!direct) { setModal({ source: s }); return; }
+    await runOne(s);
+    await reload();
+  };
+  // one click for the whole pile: every file that has not been extracted yet, one after another
+  const [all, setAll] = useState(null);
+  const extractAll = async () => {
+    const todo = (b ? b.sources : []).filter((s) => !s.empty && s.pending === 0);
+    for (let i = 0; i < todo.length; i++) { setAll(`${i + 1} of ${todo.length}: ${todo[i].filename}`); await runOne(todo[i]); }
+    setAll(null);
+    await reload();
+  };
+  const notYet = b ? b.sources.filter((s) => !s.empty && s.pending === 0).length : 0;
   const upload = async (e) => {
     setBusy(true);
     try {
@@ -28,16 +52,19 @@ function Onboarding({ d, reload, setErr }) {
   const groups = b ? b.groups.map((g) => ({ id: g, rows: b.pending.filter((p) => p.dedup_group_id === g) })) : [];
   return html`<div class="card">
     <div class="row"><input type="file" multiple accept=".docx,.pdf,.md,.txt" disabled=${busy} onChange=${upload} /><span class="small muted">docx, pdf, md, txt; text is extracted locally, no OCR</span></div>
+    ${direct && notYet > 1 ? html`<div class="row"><button class="primary" disabled=${!!all} onClick=${extractAll}>${all ? "Extracting " + all : `Extract all ${notYet} files`}</button><span class="small muted">one after another through your AI; a few seconds each</span></div>` : ""}
+    ${!direct && notYet > 1 ? html`<p class="small muted">On the paste route each file is one packet you carry to your chat and back; with a provider key in Settings the whole pile runs in one click.</p>` : ""}
     ${b ? html`<ul class="list">${b.sources.map((s) => html`<li key=${s.source_document_id}><b>${s.filename}</b> <span class="tag">${s.kind}</span>
       ${s.empty ? html`<span class="tag blocked">no text</span>` : html`<span class="muted small">${s.chars} chars</span>`}
       <span class="muted small">${s.pending} pending, ${s.runs} runs</span>
-      ${!s.empty ? html`<button class="small" onClick=${() => setModal({ source: s })}>Extract</button>` : ""}</li>`)}
+      ${!s.empty ? html`<button class="small" disabled=${running[s.source_document_id] === "running"} onClick=${() => extract(s)}>${running[s.source_document_id] === "running" ? "extracting" : direct ? "Extract" : "Extract (paste)"}</button>` : ""}
+      ${running[s.source_document_id] && running[s.source_document_id] !== "running" ? html`<span class="small muted">${running[s.source_document_id]}</span>` : ""}</li>`)}
       ${b.sources.length ? "" : html`<li class="muted">upload a resume to start</li>`}</ul>` : ""}
     ${b && b.pending.length ? html`<div class="row"><button onClick=${() => post(`/api/onboarding/batches/${b.batch_id}/dedup`)}>Suggest duplicates</button><span class="small muted">same employer, overlapping dates, a shared figure; nothing merges without you</span></div>` : ""}
     ${groups.map((g) => html`<div class="block warn" key=${g.id}><b>These may be the same accomplishment</b>
       <ul class="list">${g.rows.map((p) => html`<li key=${p.pending_id}><span class="mono small">${p.pending_id.slice(-6)}</span> ${p.draft.title} <span class="muted small">${p.draft.company} · ${p.draft.metrics.join(", ")}</span> <button class="small" onClick=${() => post(`/api/kb/groups/${g.id}/merge`, { keep_id: p.pending_id })}>merge into this one</button></li>`)}</ul>
       <button class="small" onClick=${() => post(`/api/kb/groups/${g.id}/keep`)}>Keep separate</button></div>`)}
-    <div class="row"><button class="small" onClick=${() => setStyle(style ? null : d.style)}>${style ? "hide" : "Proposed house style from these sources"}</button></div>
+    ${compact ? "" : html`<div class="row"><button class="small" onClick=${() => setStyle(style ? null : d.style)}>${style ? "hide" : "Proposed house style from these sources"}</button></div>`}
     ${style ? html`<pre class="mono small wrap">${JSON.stringify(style, null, 1)}</pre><p class="small muted">Set your choices on the settings screen; a new candidate defaults to warn.</p>` : ""}
     ${modal ? html`<${PacketModal} op="extract" label=${"Extract " + modal.source.filename} target=${{ source_document_id: modal.source.source_document_id, name: modal.source.filename }} onClose=${() => setModal(null)} onSaved=${reload} />` : ""}
   </div>`;
@@ -54,9 +81,9 @@ function Excerpt({ text, span }) {
 const EMPTY = { title: "", company: "", role: "", dates: "", summary: "", metrics: "", verbs: "", wordings: "", tenure: "" };
 const toDraft = (f) => ({ title: f.title, company: f.company, role: f.role, dates: f.dates, summary: f.summary,
   metrics: f.metrics.split(/[;,]/).map((s) => s.trim()).filter(Boolean), verbs: f.verbs.split(/[;,]/).map((s) => s.trim()).filter(Boolean), wordings: f.wordings.split(/\n/).map((s) => s.trim()).filter(Boolean), ...(f.tenure && f.tenure.trim() ? { tenure: f.tenure.trim() } : {}) });
-const fromDraft = (d) => ({ title: d.title || "", company: d.company || "", role: d.role || "", dates: d.dates || "", summary: d.summary || "", metrics: (d.metrics || []).join(", "), verbs: (d.verbs || []).join(", "), wordings: (d.wordings || []).join("\n"), tenure: d.tenure || "" });
+export const fromDraft = (d) => ({ title: d.title || "", company: d.company || "", role: d.role || "", dates: d.dates || "", summary: d.summary || "", metrics: (d.metrics || []).join(", "), verbs: (d.verbs || []).join(", "), wordings: (d.wordings || []).join("\n"), tenure: d.tenure || "" });
 
-function DraftForm({ initial, onSubmit, label }) {
+export function DraftForm({ initial, onSubmit, label }) {
   const [f, setF] = useState(initial || EMPTY);
   const up = (k) => (e) => setF({ ...f, [k]: e.target.value });
   return html`<form onSubmit=${(e) => { e.preventDefault(); onSubmit(toDraft(f)); }}>
@@ -81,7 +108,8 @@ export function KB({ live }) {
   const [ob, setOb] = useState(null);
   const [modal, setModal] = useState(null);
   const [texts, setTexts] = useState({});
-  const load = () => Promise.all([api.get("/api/kb"), api.get("/api/onboarding")]).then(([x, o]) => { setD(x); setOb(o); setErr(""); }).catch((e) => setErr(e.message));
+  const [me, setMe] = useState(null);
+  const load = () => Promise.all([api.get("/api/kb"), api.get("/api/onboarding"), api.get("/api/me")]).then(([x, o, m]) => { setD(x); setOb(o); setMe(m); setErr(""); }).catch((e) => setErr(e.message));
   const showSource = async (id) => { if (texts[id]) return; const s = await api.get(`/api/sources/${id}`); setTexts({ ...texts, [id]: s.text }); };
   useEffect(() => { load(); }, [live]);
   const post = async (path, body) => { try { await api.post(path, body); await load(); } catch (e) { setErr(e.message); } };
@@ -94,14 +122,14 @@ export function KB({ live }) {
     <div class="sub">${d.confirmed} confirmed · ${d.gaps.length} gap${d.gaps.length === 1 ? "" : "s"} · ${(d.questions || []).length} question${(d.questions || []).length === 1 ? "" : "s"} · ${(d.holes || []).length} hole${(d.holes || []).length === 1 ? "" : "s"} · ${d.pending.length} pending · ${d.review.length} dimensions to review · revision ${d.kb_revision}</div>
     ${err ? html`<p class="error">${err}</p>` : ""}
     <h2>Onboarding (your resumes to records)</h2>
-    ${ob ? html`<${Onboarding} d=${ob} reload=${load} setErr=${setErr} />` : ""}
+    ${ob ? html`<${Onboarding} d=${ob} reload=${load} setErr=${setErr} route=${me && me.route} />` : ""}
     <h2>Gaps (questions from postings)</h2>
     <div class="card"><ul class="list">${d.gaps.map((g) => html`<li key=${g.gap_id}><div><b>?</b> ${g.company} asks: <i>"${g.requirement_text}"</i>. ${g.question}
       ${answering === g.gap_id ? html`<${DraftForm} label="Answer" onSubmit=${(draft) => { post(`/api/kb/gaps/${g.gap_id}/answer`, { draft }); setAnswering(null); }} />` : html`<button class="small" onClick=${() => setAnswering(g.gap_id)}>Answer</button>`}</div></li>`)}
       ${d.gaps.length ? "" : html`<li class="muted">no open gaps</li>`}</ul></div>
     <h2>Discovery (the AI asks, you answer)</h2>
     <div class="card"><p class="small muted">The shakedown after upload: the AI reads your confirmed records and asks what a coach would ask, one atom per question. Your answer lands pending against that record; nothing changes until you confirm it. Ask again once these are answered or dismissed.</p>
-      <div class="row"><button disabled=${(d.questions || []).length > 0 || d.confirmed === 0} onClick=${() => setModal({ op: "discover" })}>Ask what's missing</button>
+      <div class="row"><button disabled=${(d.questions || []).length > 0 || d.confirmed === 0} onClick=${async () => { if (me && (me.route === "byo_key" || me.route === "credits")) { try { setErr(""); const r = await api.post("/api/run/discover", {}); if (r.status !== "passed") setErr("refused: " + (r.errors || []).join("; ")); await load(); } catch (e) { setErr(e.message); } } else setModal({ op: "discover" }); }}>Ask what's missing</button>
         <span class="small muted">${d.confirmed === 0 ? "confirm at least one record first" : (d.questions || []).length ? `${d.questions.length} open` : "twelve questions at most per round"}</span></div>
       <ul class="list">${(d.questions || []).map((q) => html`<li key=${q.question_id}><div><span class="tag">${q.kind}</span> <b>${q.title}</b> <span class="muted">${q.company}, ${q.role}</span><br />${q.question}${q.why ? html` <span class="small muted">(${q.why})</span>` : ""}
         ${answering === q.question_id ? html`<${DraftForm} label="Add answer as pending" initial=${fromDraft(q.draft)} onSubmit=${(draft) => { post(`/api/kb/questions/${q.question_id}/answer`, { draft }); setAnswering(null); }} />`

package/ui/screens/postings.js

@@ -37,6 +37,25 @@ export function Postings({ live, id }) {
   const [rows, setRows] = useState([]);
   const [sel, setSel] = useState(null);
   const [form, setForm] = useState({ company: "", title: "", source_url: "", location: "", comp_text: "", raw_text: "" });
+  const [guessed, setGuessed] = useState({ company: true, title: true });
+  // the paste is all a person should have to give; company and title are guessed from its first lines and can be corrected
+  const onPaste = (text) => {
+    const lines = text.split(/\r?\n/).map((l) => l.trim()).filter(Boolean).slice(0, 12);
+    const next = { ...form, raw_text: text };
+    if (guessed.title) {
+      const t = lines.find((l) => l.length <= 90 && !/^https?:/i.test(l) && !/^(at|company|location|posted|apply|share)\b/i.test(l));
+      next.title = t || "";
+    }
+    if (guessed.company) {
+      let c = "";
+      for (const l of lines) { const m = l.match(/^(?:at|company[:\s]+|employer[:\s]+)\s*([^|·,]{2,60})/i); if (m) { c = m[1].trim(); break; } }
+      if (!c) { const i = lines.findIndex((l) => l === next.title); const cand = lines[i + 1] || ""; if (cand && cand.length <= 50 && !/^https?:/i.test(cand) && !/\d{4}/.test(cand)) c = cand.replace(/^[·|\-\s]+/, ""); }
+      next.company = c;
+    }
+    const url = lines.find((l) => /^https?:\/\//i.test(l));
+    if (url && !form.source_url) next.source_url = url;
+    setForm(next);
+  };
   const [err, setErr] = useState("");
   const [msg, setMsg] = useState("");
   const load = async () => { setRows(await api.get("/api/postings")); if (id) setSel(await api.get(`/api/postings/${id}`)); };
@@ -47,6 +66,7 @@ export function Postings({ live, id }) {
       const r = await api.post("/api/postings", form);
       await api.post(`/api/postings/${r.posting_id}/scan`);
       setForm({ company: "", title: "", source_url: "", location: "", comp_text: "", raw_text: "" });
+      setGuessed({ company: true, title: true });
       location.hash = "#/postings/" + r.posting_id;
       setMsg(r.created ? "stored and scanned" : "already stored; scanned again");
     } catch (e2) { setErr(e2.message); }
@@ -61,10 +81,10 @@ export function Postings({ live, id }) {
       <div>
         <h2>Paste posting</h2>
         <form class="card" onSubmit=${store}>
-          <div class="row"><input required placeholder="company" value=${form.company} onInput=${(e) => setForm({ ...form, company: e.target.value })} /><input required placeholder="title" value=${form.title} onInput=${(e) => setForm({ ...form, title: e.target.value })} /></div>
-          <div class="row"><input placeholder="url" value=${form.source_url} onInput=${(e) => setForm({ ...form, source_url: e.target.value })} /><input placeholder="location" value=${form.location} onInput=${(e) => setForm({ ...form, location: e.target.value })} /><input placeholder="comp text" value=${form.comp_text} onInput=${(e) => setForm({ ...form, comp_text: e.target.value })} /></div>
-          <textarea required placeholder="raw posting text, stored verbatim, now" value=${form.raw_text} onInput=${(e) => setForm({ ...form, raw_text: e.target.value })}></textarea>
-          <div class="row"><button class="primary">Store + scan</button><span class="small muted">local, no model</span></div>
+          <textarea required placeholder="Paste the whole job posting here, exactly as the site shows it. Company and title fill in below from what you paste." value=${form.raw_text} onInput=${(e) => onPaste(e.target.value)}></textarea>
+          <div class="row"><input required placeholder="company (guessed from the paste; fix if wrong)" value=${form.company} onInput=${(e) => { setGuessed({ ...guessed, company: false }); setForm({ ...form, company: e.target.value }); }} /><input required placeholder="title (guessed; fix if wrong)" value=${form.title} onInput=${(e) => { setGuessed({ ...guessed, title: false }); setForm({ ...form, title: e.target.value }); }} /></div>
+          <div class="row"><input placeholder="link to the posting (optional)" value=${form.source_url} onInput=${(e) => setForm({ ...form, source_url: e.target.value })} /></div>
+          <div class="row"><button class="primary">Store + scan</button><span class="small muted">stored on this PC and scored locally; no AI is called for this step</span></div>
         </form>
         <h2>Stored</h2>
         <div class="card"><ul class="list">${rows.map((r) => html`<li key=${r.posting_id}><a href=${"#/postings/" + r.posting_id}>${r.company}: ${r.title}</a> <span class="tag">${r.status}</span> ${r.scoring_frozen ? html`<span class="tag passed">frozen</span>` : html`<span class="tag warn">unscored</span>`} ${r.application_id ? html`<a class="small" href=${"#/applications/" + r.application_id}>application</a>` : ""} ${r.taken_down_at ? html`<span class="tag warn">taken down</span>` : ""}</li>`)}${rows.length ? "" : html`<li class="muted">none yet</li>`}</ul></div>

package/ui/screens/settings.js

@@ -4,6 +4,8 @@ import { api, useInstall } from "../lib.js";
 /** Screen 6: AI route, providers (keys write-only), house rules per kind, data folder, backup, startup. */
 
 const KINDS = ["resume", "cover", "onepager", "email", "prep", "deep_answers", "practice", "cheatsheet"];
+const KIND_LABEL = { anthropic: "Anthropic (Claude)", openai_compatible: "OpenAI, or any OpenAI-compatible server", gemini: "Google Gemini" };
+const KIND_MODEL = { anthropic: "claude-fable-5-1" };
 
 export function Settings({ live }) {
   const [s, setS] = useState(null);
@@ -49,13 +51,25 @@ export function Settings({ live }) {
       <button class="small" onClick=${() => setProv({ id: p.id, kind: p.kind, label: p.label, model: p.model || "", base_url: p.base_url || "", api_key: "" })}>edit</button>
       <button class="small danger" onClick=${async () => { await fetch(`/api/settings/providers/${p.id}`, { method: "DELETE", headers: { "content-type": "application/json" }, body: "{}" }); load(); }}>remove</button></li>`)}
       ${s.providers.length ? "" : html`<li class="muted">none; add one to use the byo_key route</li>`}</ul>
-      ${prov ? html`<form class="inline" onSubmit=${async (e) => { e.preventDefault(); try { if (prov.id) await api.put(`/api/settings/providers/${prov.id}`, prov); else await api.post("/api/settings/providers", prov); setProv(null); load(); } catch (e2) { setErr(e2.message); } }}>
-        <select onChange=${(e) => setProv({ ...prov, kind: e.target.value })}>${["anthropic", "openai_compatible", "gemini"].map((k) => html`<option key=${k} value=${k} selected=${prov.kind === k}>${k}</option>`)}</select>
-        <input placeholder="label" value=${prov.label} onInput=${(e) => setProv({ ...prov, label: e.target.value })} />
-        <input placeholder="model" value=${prov.model} onInput=${(e) => setProv({ ...prov, model: e.target.value })} />
-        <input placeholder="base url (blank for the vendor default; http only on localhost)" value=${prov.base_url} onInput=${(e) => setProv({ ...prov, base_url: e.target.value })} />
-        <input type="password" placeholder=${prov.id ? "new key (blank keeps the stored one)" : "api key"} value=${prov.api_key} onInput=${(e) => setProv({ ...prov, api_key: e.target.value })} />
-        <button class="primary">save</button><button type="button" onClick=${() => setProv(null)}>cancel</button></form>` : html`<button class="small" onClick=${() => setProv({ id: null, kind: "anthropic", label: "", model: "", base_url: "", api_key: "" })}>+ add</button>`}
+      ${prov ? html`<form class="inline provider-form" onSubmit=${async (e) => { e.preventDefault(); try {
+          const body = { ...prov, label: prov.label || KIND_LABEL[prov.kind] };
+          const saved = prov.id ? await api.put(`/api/settings/providers/${prov.id}`, body) : await api.post("/api/settings/providers", body);
+          // the first provider becomes the active one and the app switches to it; then the key is tried at once
+          if (!s.providers.length || !s.active_provider_id) await api.put("/api/settings", { active_provider_id: saved.id, route: "byo_key" });
+          setProv(null);
+          setMsg("testing the key");
+          const t = await api.post(`/api/settings/providers/${saved.id}/test`, {});
+          setMsg(t.ok ? `key works: ${t.message}` : `key failed: ${t.message}`);
+          load();
+        } catch (e2) { setErr(e2.message); } }}>
+        <select onChange=${(e) => setProv({ ...prov, kind: e.target.value })}>${Object.entries(KIND_LABEL).map(([k, label]) => html`<option key=${k} value=${k} selected=${prov.kind === k}>${label}</option>`)}</select>
+        <input type="password" required=${!prov.id} placeholder=${prov.id ? "new key (blank keeps the stored one)" : "paste your API key"} value=${prov.api_key} onInput=${(e) => setProv({ ...prov, api_key: e.target.value })} />
+        <button class="primary">save and test</button><button type="button" onClick=${() => setProv(null)}>cancel</button>
+        <details class="advanced"><summary class="small muted">advanced: name, model, base url</summary>
+          <input placeholder=${"name, default " + KIND_LABEL[prov.kind]} value=${prov.label} onInput=${(e) => setProv({ ...prov, label: e.target.value })} />
+          <input placeholder=${"model, default " + (KIND_MODEL[prov.kind] || "the provider's current default")} value=${prov.model} onInput=${(e) => setProv({ ...prov, model: e.target.value })} />
+          ${prov.kind === "openai_compatible" ? html`<input placeholder="base url, blank for api.openai.com; http only on localhost" value=${prov.base_url} onInput=${(e) => setProv({ ...prov, base_url: e.target.value })} />` : ""}
+        </details></form>` : html`<button class="small" onClick=${() => setProv({ id: null, kind: "anthropic", label: "", model: "", base_url: "", api_key: "" })}>+ add</button>`}
       <p class="small muted">Keys live in config.json under your user only, never in the store, never in a log. A read shows the last four characters.</p>
     </div>`}
     <h2>Credits</h2>

package/ui/screens/welcome.js

@@ -0,0 +1,123 @@
+import { html, useState, useEffect } from "../vendor/preact.mjs";
+import { api } from "../lib.js";
+import { Onboarding, DraftForm, fromDraft } from "./kb.js";
+import { PacketModal } from "./packet.js";
+
+/**
+ * The first run, before the app: one step at a time, everything done on this
+ * screen. The order is the order the data needs: an AI to read with, files to
+ * read, records to confirm, questions to answer, a posting to aim at. Each
+ * step flips when the store says so; "skip for now" opens the app anyway.
+ */
+
+const KIND_LABEL = { anthropic: "Anthropic (Claude)", openai_compatible: "OpenAI, or any OpenAI-compatible server", gemini: "Google Gemini" };
+
+function StepAi({ s, reload }) {
+  const [pick, setPick] = useState(null);
+  const [key, setKey] = useState("");
+  const [kind, setKind] = useState("anthropic");
+  const [msg, setMsg] = useState("");
+  const [mcp, setMcp] = useState(null);
+  const choose = async (route) => { await api.post("/api/setup/ai", { route }); await reload(); };
+  const saveKey = async (e) => {
+    e.preventDefault(); setMsg("saving");
+    try {
+      const saved = await api.post("/api/settings/providers", { kind, label: KIND_LABEL[kind], model: "", base_url: "", api_key: key });
+      await api.put("/api/settings", { active_provider_id: saved.id, route: "byo_key" });
+      setMsg("testing the key");
+      const t = await api.post(`/api/settings/providers/${saved.id}/test`, {});
+      if (!t.ok) { setMsg("the key did not work: " + t.message); return; }
+      setMsg("key works");
+      await api.post("/api/setup/ai", { route: "byo_key" });
+      await reload();
+    } catch (e2) { setMsg(e2.message); }
+  };
+  return html`<div>
+    <p>GAF-J never writes text itself. It hands a packet of your confirmed facts to an AI you already have, then checks every figure that comes back. How will you connect one?</p>
+    <div class="ai-options">
+      <button class=${pick === "byo_key" ? "picked" : ""} onClick=${() => setPick("byo_key")}><b>My own API key</b><span class="small muted">Best. The app calls the provider itself, everything runs in one click. The key stays on this PC.</span></button>
+      <button class=${pick === "paste" ? "picked" : ""} onClick=${() => setPick("paste")}><b>Paste</b><span class="small muted">Any chat you already pay for: ChatGPT, Claude, Gemini. You copy a packet in and paste the reply back, each time.</span></button>
+      <button class=${pick === "mcp" ? "picked" : ""} onClick=${async () => { setPick("mcp"); setMcp(await api.get("/api/mcp-config")); }}><b>Claude Desktop</b><span class="small muted">Claude talks to the app directly through a local connector you add once.</span></button>
+    </div>
+    ${pick === "byo_key" ? html`<form class="inline" onSubmit=${saveKey} style="margin-top:12px">
+      <select value=${kind} onChange=${(e) => setKind(e.target.value)}>${Object.entries(KIND_LABEL).map(([k, l]) => html`<option key=${k} value=${k}>${l}</option>`)}</select>
+      <input type="password" required placeholder="paste your API key" value=${key} onInput=${(e) => setKey(e.target.value)} />
+      <button class="primary">Save and test</button>${msg ? html`<span class="small muted">${msg}</span>` : ""}
+      <p class="small muted" style="width:100%">Get a key at console.anthropic.com, platform.openai.com, or aistudio.google.com. It is stored in a file under your user only, never in the database, never in a log.</p></form>` : ""}
+    ${pick === "paste" ? html`<div style="margin-top:12px"><p class="small muted">Fine for a first try. Each step below will show a packet to copy into your chat and a box to paste the reply into.</p><button class="primary" onClick=${() => choose("paste")}>Use paste</button></div>` : ""}
+    ${pick === "mcp" && mcp ? html`<div style="margin-top:12px"><p class="small">Claude Desktop, Settings, Developer, Edit Config, merge this into <span class="mono">mcpServers</span>, save, restart Claude Desktop:</p><textarea readonly value=${JSON.stringify(mcp.desktop, null, 2)}></textarea><button class="primary" onClick=${() => choose("mcp")}>I added it</button></div>` : ""}
+  </div>`;
+}
+
+function StepPosting({ reload }) {
+  const [text, setText] = useState("");
+  const [company, setCompany] = useState("");
+  const [title, setTitle] = useState("");
+  const [g, setG] = useState({ company: true, title: true });
+  const [err, setErr] = useState("");
+  const onPaste = (t) => {
+    setText(t);
+    const lines = t.split(/\r?\n/).map((l) => l.trim()).filter(Boolean).slice(0, 12);
+    let ti = title, co = company;
+    if (g.title) ti = lines.find((l) => l.length <= 90 && !/^https?:/i.test(l) && !/^(at|company|location|posted|apply|share)\b/i.test(l)) || "";
+    if (g.company) { co = ""; for (const l of lines) { const m = l.match(/^(?:at|company[:\s]+|employer[:\s]+)\s*([^|·,]{2,60})/i); if (m) { co = m[1].trim(); break; } } if (!co) { const i = lines.findIndex((l) => l === ti); const c = lines[i + 1] || ""; if (c && c.length <= 50 && !/^https?:/i.test(c) && !/\d{4}/.test(c)) co = c.replace(/^[·|\-\s]+/, ""); } }
+    setTitle(ti); setCompany(co);
+  };
+  const store = async (e) => {
+    e.preventDefault(); setErr("");
+    try { const r = await api.post("/api/postings", { company, title, raw_text: text }); await api.post(`/api/postings/${r.posting_id}/scan`, {}); await reload(); } catch (e2) { setErr(e2.message); }
+  };
+  return html`<form onSubmit=${store}>
+    <p>Paste the text of a job you want, exactly as the site shows it. GAF-J scores it against your record and shows what the posting asks for beside what you have. Everything else (the resume, the prep) starts from there.</p>
+    <textarea required placeholder="the whole posting" value=${text} onInput=${(e) => onPaste(e.target.value)}></textarea>
+    <div class="row"><input required placeholder="company (guessed; fix if wrong)" value=${company} onInput=${(e) => { setG({ ...g, company: false }); setCompany(e.target.value); }} /><input required placeholder="title (guessed; fix if wrong)" value=${title} onInput=${(e) => { setG({ ...g, title: false }); setTitle(e.target.value); }} /></div>
+    <div class="row"><button class="primary">Store and score</button>${err ? html`<span class="error small">${err}</span>` : ""}</div>
+  </form>`;
+}
+
+export function Welcome({ live, onDone }) {
+  const [setup, setSetup] = useState(null);
+  const [ob, setOb] = useState(null);
+  const [kb, setKb] = useState(null);
+  const [me, setMe] = useState(null);
+  const [err, setErr] = useState("");
+  const [modal, setModal] = useState(null);
+  const [answering, setAnswering] = useState(null);
+  const [busy, setBusy] = useState("");
+  const load = () => Promise.all([api.get("/api/setup"), api.get("/api/onboarding"), api.get("/api/kb"), api.get("/api/me")]).then(([s, o, k, m]) => { setSetup(s); setOb(o); setKb(k); setMe(m); if (s.complete) onDone(); }).catch((e) => setErr(e.message));
+  useEffect(() => { load(); }, [live]);
+  const post = async (path, body) => { try { setErr(""); await api.post(path, body || {}); await load(); } catch (e) { setErr(e.message); } };
+  if (!setup || !ob || !kb || !me) return html`<div class="welcome"><p class="muted">loading</p></div>`;
+  const direct = me.route === "byo_key" || me.route === "credits";
+  const step = setup.next;
+  const idx = setup.steps.findIndex((x) => x.key === step);
+  const discover = async () => {
+    if (!direct) { setModal("discover"); return; }
+    setBusy("asking"); try { const r = await api.post("/api/run/discover", {}); if (r.status !== "passed") setErr("refused: " + (r.errors || []).join("; ")); await load(); } catch (e) { setErr(e.message); } setBusy("");
+  };
+  const body = {
+    ai: html`<${StepAi} s=${setup} reload=${load} />`,
+    upload: html`<div><p>Every resume you have, old ones too: Word, PDF, Markdown, or plain text. The text is read on this PC. Nothing is uploaded anywhere.</p><${Onboarding} d=${ob} reload=${load} setErr=${setErr} route=${me.route} compact=${true} /></div>`,
+    extract: html`<div><p>${direct ? "Your AI reads each file and proposes records where every number and phrase is quoted from the file; anything it cannot quote is refused. One click runs the whole pile." : "For each file, Extract opens a packet: copy it into your chat, paste the JSON reply back. Your AI proposes records where every number and phrase is quoted from the file."}</p><${Onboarding} d=${ob} reload=${load} setErr=${setErr} route=${me.route} compact=${true} /></div>`,
+    confirm: html`<div><p>These are the records your AI proposed. Confirm the ones you can stand behind in an interview, edit what is off, dismiss the rest. Only confirmed records can ever appear in a document.</p>
+      <ul class="list">${kb.pending.map((p) => html`<li key=${p.pending_id}><div><b>${p.draft.title}</b> <span class="muted">${p.draft.company}, ${p.draft.role}</span>
+        <div class="small muted">metrics: ${(p.draft.metrics || []).join(", ") || "none"} · verbs: ${(p.draft.verbs || []).join(", ") || "none"}${p.draft.dates ? " · " + p.draft.dates : ""}</div>
+        ${answering === p.pending_id ? html`<${DraftForm} initial=${fromDraft(p.draft)} label="Confirm with these edits" onSubmit=${(draft) => { post(`/api/kb/pending/${p.pending_id}/confirm`, { edits: draft }); setAnswering(null); }} />`
+          : html`<div class="row"><button class="primary small" onClick=${() => post(`/api/kb/pending/${p.pending_id}/confirm`, {})}>Confirm</button><button class="small" onClick=${() => setAnswering(p.pending_id)}>Edit</button><button class="small danger" onClick=${() => post(`/api/kb/pending/${p.pending_id}/dismiss`, {})}>Dismiss</button></div>`}</div></li>`)}
+      ${kb.pending.length ? "" : html`<li class="muted">nothing pending; go back and extract, or add a record by hand on the Knowledge base screen later</li>`}</ul>
+      ${kb.pending.length > 1 ? html`<div class="row"><button onClick=${async () => { for (const p of kb.pending) await api.post(`/api/kb/pending/${p.pending_id}/confirm`, {}); await load(); }}>Confirm all ${kb.pending.length}</button><span class="small muted">only if you have read them</span></div>` : ""}</div>`,
+    discover: html`<div><p>Your AI reads the confirmed records and asks what a coach would: the figure a record lacks, the size of a team, the story behind a bare bullet. Each answer lands on the record it is about.</p>
+      ${kb.questions.length ? html`<ul class="list">${kb.questions.map((q) => html`<li key=${q.question_id}><div><span class="tag">${q.kind}</span> <b>${q.title}</b> <span class="muted">${q.company}</span><br />${q.question}
+        ${answering === q.question_id ? html`<${DraftForm} label="Add answer" initial=${fromDraft(q.draft)} onSubmit=${(draft) => { post(`/api/kb/questions/${q.question_id}/answer`, { draft }); setAnswering(null); }} />` : html`<div class="row"><button class="small" onClick=${() => setAnswering(q.question_id)}>Answer</button><button class="small danger" onClick=${() => post(`/api/kb/questions/${q.question_id}/dismiss`, {})}>Skip</button></div>`}</div></li>`)}</ul>`
+        : html`<div class="row"><button class="primary" disabled=${!!busy} onClick=${discover}>${busy ? "asking" : "Ask what's missing"}</button><button onClick=${() => post("/api/setup/dismiss", { dismissed: true })}>Later</button></div>`}</div>`,
+    posting: html`<${StepPosting} reload=${load} />`,
+  };
+  return html`<div class="welcome">
+    <div class="welcome-head"><img src="/icon-192.png" alt="" width="40" height="40" /><div><b>Welcome to GAF-J${me.name ? ", " + me.name : ""}</b><div class="small muted">Six short steps, then the app is yours.</div></div>
+      <a class="small" href="#/" onClick=${async (e) => { e.preventDefault(); await api.post("/api/setup/dismiss", {}); onDone(); }}>skip for now</a></div>
+    <ol class="stepper">${setup.steps.map((st, i) => html`<li key=${st.key} class=${st.done ? "done" : i === idx ? "now" : ""}><span class="n mono">${st.done ? "✓" : i + 1}</span>${st.title}</li>`)}</ol>
+    ${err ? html`<p class="error">${err}</p>` : ""}
+    <div class="card welcome-body"><h3>${idx + 1}. ${setup.steps[idx].title}</h3>${body[step]}</div>
+    ${modal === "discover" ? html`<${PacketModal} op="discover" label="Discovery questions" target=${{}} onClose=${() => setModal(null)} onSaved=${load} />` : ""}
+  </div>`;
+}