@gafj/gafj 0.1.3 → 0.1.6

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/bridge/byo_key.js

@@ -40,8 +40,8 @@ async function runPacket(homeDir, id, { packet, fetchImpl }) {
   const { renderPasteText } = require("./paste");
   const started = Date.now();
   try {
-    const r = await adapter.complete({ provider: p, system: "You are a careful writing engine. Reply with exactly one fenced json block matching OUTPUT SCHEMA and nothing else.", user: renderPasteText(packet), max_tokens: 8000, fetch: fetchImpl });
-    return { content: r.text, provider: p.kind, model: r.model || p.model, tokens_in: r.tokens_in, tokens_out: r.tokens_out, latency_ms: Date.now() - started };
+    const r = await adapter.complete({ provider: p, system: "You are a careful writing engine. Reply with exactly one fenced json block matching OUTPUT SCHEMA and nothing else.", user: renderPasteText(packet), max_tokens: 16000, fetch: fetchImpl });
+    return { content: r.text, provider: p.kind, model: r.model || p.model, tokens_in: r.tokens_in, tokens_out: r.tokens_out, latency_ms: Date.now() - started, stop_reason: r.stop_reason || null };
   } catch (e) {
     throw Object.assign(new Error(scrub(e.message, p.api_key)), { status: 502 });
   }

package/bridge/providers/anthropic.js

@@ -10,7 +10,7 @@ async function complete({ provider, system, user, max_tokens = 4000, fetch }) {
   const data = await post(fetch, `${base}/v1/messages`, { "x-api-key": provider.api_key || "", "anthropic-version": "2023-06-01" },
     { model, max_tokens, system, messages: [{ role: "user", content: user }] });
   const text = (data.content || []).filter((c) => c.type === "text").map((c) => c.text).join("\n");
-  return { text, model: data.model || model, tokens_in: data.usage && data.usage.input_tokens, tokens_out: data.usage && data.usage.output_tokens };
+  return { text, model: data.model || model, tokens_in: data.usage && data.usage.input_tokens, tokens_out: data.usage && data.usage.output_tokens, stop_reason: data.stop_reason || null };
 }
 
 module.exports = { complete, DEFAULT_URL, DEFAULT_MODEL };

package/http/api.js

@@ -151,6 +151,14 @@ 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") }));
 
+// usage: tokens per operation from the attempts the app recorded; the pricing test reads this
+route("GET", "/api/usage", (c) => ({
+  by_op: c.db.prepare(`SELECT r.operation AS op, count(*) AS attempts, sum(CASE WHEN a.result = 'passed' THEN 1 ELSE 0 END) AS passed,
+      coalesce(sum(a.tokens_in), 0) AS tokens_in, coalesce(sum(a.tokens_out), 0) AS tokens_out, coalesce(avg(a.latency_ms), 0) AS avg_ms, max(a.model) AS model
+    FROM ai_attempt a JOIN ai_run r ON r.id = a.ai_run_id WHERE r.candidate_id = ? AND a.tokens_in IS NOT NULL GROUP BY r.operation ORDER BY r.operation`).all(c.candidate_id),
+  since: c.db.prepare("SELECT min(a.started_at) AS s FROM ai_attempt a JOIN ai_run r ON r.id = a.ai_run_id WHERE r.candidate_id = ? AND a.tokens_in IS NOT NULL").get(c.candidate_id).s,
+}));
+
 // guided setup (first run)
 const setup = require("../store/setup");
 route("GET", "/api/setup", (c) => setup.setupView(c.db, c.home, c.candidate_id));
@@ -194,18 +202,24 @@ route("POST", "/api/run/:op", async (c, p, b, q) => {
   if (cfg.route !== "byo_key" && cfg.route !== "credits") throw bad("the active route is neither byo_key nor credits; set it in settings", 409);
   const routeName = cfg.route;
   let reply;
+  // resolve the provider before a run row exists: one saved provider is the active one even if nobody clicked the radio
+  let providerId = null;
+  if (routeName === "byo_key") {
+    providerId = b.provider_id || cfg.active_provider_id || ((cfg.providers || []).length === 1 ? cfg.providers[0].id : null);
+    if (!providerId) throw bad((cfg.providers || []).length ? "pick the active provider in Settings" : "add a provider key in Settings", 409);
+    if (!cfg.active_provider_id && !b.provider_id) settings.putSettings(c.db, c.home, c.candidate_id, { active_provider_id: providerId }, { now: c.now(), actor: ACTOR("run") });
+  }
   if (p.op === "discover") require("../store/discover").assertCanOpen(c.db, c.candidate_id);
   const opened = openRun(c.db, { op: p.op, candidate_id: c.candidate_id, interview_id: q.get("interview_id") || undefined, posting_id: q.get("posting_id") || undefined, source_document_id: q.get("source_document_id") || undefined, route: routeName, actor: ACTOR("run"), now: c.now() });
   if (routeName === "credits") {
     const { runPacket } = require("../bridge/credits");
     reply = await runPacket(c.home, { packet: opened.packet, fetchImpl: c.fetch, auth: c.relayAuth });
   } else {
-    const providerId = b.provider_id || cfg.active_provider_id;
-    if (!providerId) throw bad("no active provider", 409);
     const { runPacket } = require("../bridge/byo_key");
     reply = await runPacket(c.home, providerId, { packet: opened.packet, fetchImpl: c.fetch });
   }
   const r = saveReply(c.db, { run_id: opened.run_id, content: reply.content, route: routeName, actor: ACTOR("run"), now: c.now(), provider: reply.provider, model: reply.model, tokens_in: reply.tokens_in, tokens_out: reply.tokens_out, latency_ms: reply.latency_ms });
+  if (r.status !== "passed" && reply.stop_reason === "max_tokens") r.errors = [...(r.errors || []), "the reply was cut off at the token limit"];
   return reply.credits_left === undefined ? r : { ...r, charged: reply.charged, credits_left: reply.credits_left };
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gafj/gafj",
-  "version": "0.1.3",
+  "version": "0.1.6",
   "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/onboarding.js

@@ -145,7 +145,8 @@ function saveExtraction(db, { run_id, content, route, actor, now, provider, mode
     const ex = extractJson(content);
     let result;
     let parsed = null;
-    if (ex.error) result = { accepted: false, errors: ["schema: " + ex.error], pending_ids: [] };
+    // the reply is never stored; on a schema miss its opening is echoed back to the caller once so the failure can be read
+    if (ex.error) result = { accepted: false, errors: ["schema: " + ex.error + (typeof content === "string" && content.trim() ? ` (reply began: "${content.trim().slice(0, 160).replace(/\s+/g, " ")}")` : " (the reply was empty)")], pending_ids: [] };
     else { parsed = ex.value; result = { accepted: false, errors: [], pending_ids: [] }; }
     const attemptId = ulid(Date.parse(now) + 100 + attemptNo);
     d.prepare(`INSERT INTO ai_attempt (id, ai_run_id, attempt_no, provider, model, tokens_in, tokens_out, latency_ms, output_hash, result, error_code, started_at, finished_at)

package/store/setup.js

@@ -21,7 +21,10 @@ function setupView(db, homeDir, 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);
+  // byo_key counts only with a usable provider: the active one, or the single one saved
+  const providers = cfg.providers || [];
+  const usable = cfg.route !== "byo_key" || !!(cfg.active_provider_id && providers.some((x) => x.id === cfg.active_provider_id)) || providers.length === 1;
+  const aiChosen = !!(cfg.setup && cfg.setup.ai_chosen) && usable;
   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 },

package/ui/app.css

@@ -151,3 +151,34 @@ mark { background: var(--good-bg); color: var(--good-bright); border-radius: 3px
 .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); }
+.welcome-head .links { margin-left: auto; display: flex; gap: 14px; }
+.stepper li.can { cursor: pointer; }
+.stepper li.can:hover { color: var(--accent); }
+.welcome-nav { margin-top: 16px; justify-content: space-between; }
+/* a switch: one provider is on at a time; off everywhere is a warning, not a state to sit in */
+.switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
+.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
+.switch .track { width: 34px; height: 18px; border-radius: 100px; background: var(--line-2); position: relative; transition: background .15s; }
+.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); transition: left .15s; box-shadow: 0 1px 2px #0003; }
+.switch input:checked + .track { background: var(--accent); }
+.switch input:checked + .track::after { left: 18px; }
+.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

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 && seg[0] !== "settings") 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} />`;
@@ -67,7 +72,7 @@ function App() {
   else if (seg[0] === "documents" && seg[1]) screen = html`<${Document} id=${seg[1]} live=${live} />`;
   else if (seg[0] === "postings") screen = html`<${Postings} id=${seg[1]} live=${live} />`;
   else if (seg[0] === "kb") screen = html`<${KB} live=${live} />`;
-  else if (seg[0] === "settings") screen = html`<${Settings} live=${live} />`;
+  else if (seg[0] === "settings") screen = html`<div>${gate ? html`<p class="small"><a href="#/">← back to setup</a></p>` : ""}<${Settings} live=${live} /></div>`;
   else screen = html`<${Dashboard} live=${live} />`;
   return html`<div class="layout"><${Rail} route=${route} me=${me} /><main class="main">${screen}</main></div>`;
 }

package/ui/screens/dashboard.js

@@ -5,7 +5,8 @@ import { api, fmtWhen } from "../lib.js";
 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: "Beside each uploaded file, click Extract. A packet opens: copy it into your AI, paste its JSON reply back. Your AI proposes records where every number and phrase is quoted from the file; anything it cannot quote is refused.", cta: ["#/kb", "Extract on 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"] },

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/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);
@@ -11,8 +13,9 @@ export function Settings({ live }) {
   const [msg, setMsg] = useState("");
   const [prov, setProv] = useState(null);
   const [mcp, setMcp] = useState(null);
+  const [usage, setUsage] = useState(null);
   const inst = useInstall();
-  const load = () => api.get("/api/settings").then((x) => { setS(x); setErr(""); }).catch((e) => setErr(e.message));
+  const load = () => Promise.all([api.get("/api/settings"), api.get("/api/usage").catch(() => null)]).then(([x, u]) => { setS(x); setUsage(u); setErr(""); }).catch((e) => setErr(e.message));
   useEffect(() => { load(); }, [live]);
   const put = async (patch) => { setMsg(""); try { setS(await api.put("/api/settings", patch)); setMsg("saved"); } catch (e) { setErr(e.message); } };
   const post = async (path, body, label) => { setMsg(""); try { const r = await api.post(path, body); setMsg(label ? `${label}: ${r.file || r.message || JSON.stringify(r)}` : JSON.stringify(r)); await load(); } catch (e) { setErr(e.message); } };
@@ -41,21 +44,35 @@ export function Settings({ live }) {
       ${mcp ? html`<div><p class="small">Claude Desktop, merge into mcpServers:</p><textarea readonly value=${JSON.stringify(mcp.desktop, null, 2)}></textarea><p class="small">Claude Code:</p><textarea readonly value=${mcp.code}></textarea></div>` : ""}
     </div>
     ${s.hosted ? "" : html`<h2>My providers</h2>
-    <div class="card"><ul class="list">${s.providers.map((p) => html`<li key=${p.id}>
-      <label><input type="radio" name="active" checked=${s.active_provider_id === p.id} onChange=${() => put({ active_provider_id: p.id })} /></label>
+    <div class="card">
+      ${s.providers.length && !s.providers.some((p) => p.id === s.active_provider_id) ? html`<div class="block warn"><b>No provider is switched on.</b> Turn one on below, or nothing can run. Exactly one is on at a time.</div>` : ""}
+      <ul class="list">${s.providers.map((p) => html`<li key=${p.id}>
+      <label class="switch" title=${s.active_provider_id === p.id ? "on: this provider runs your documents" : "off"}><input type="checkbox" checked=${s.active_provider_id === p.id} onChange=${(e) => put({ active_provider_id: e.target.checked ? p.id : null })} /><span class="track"></span><span class="small">${s.active_provider_id === p.id ? "on" : "off"}</span></label>
       <b>${p.label}</b> <span class="tag">${p.kind}</span> <span class="muted">${p.model || ""}</span> <span class="mono small">${p.key || "no key"}</span> <span class="muted small">${p.base_url || ""}</span>
       ${p.last_test ? html`<span class=${"tag " + (p.last_test.ok ? "passed" : "blocked")}>${p.last_test.ok ? "ok" : "failed"}</span>` : ""}
       <button class="small" onClick=${() => post(`/api/settings/providers/${p.id}/test`, {}, "test")}>test</button>
       <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>
@@ -73,6 +90,14 @@ export function Settings({ live }) {
       </form>`}
       ${s.credits && s.credits.last_balance ? html`<p class="small">${s.credits.last_balance.available} credits available (${s.credits.last_balance.reserved} held), checked ${s.credits.last_balance.at}</p>` : ""}
     </div>
+    <h2>Usage</h2>
+    <div class="card">
+      ${usage && usage.by_op.length ? html`<table class="cats"><thead><tr><th>operation</th><th>runs</th><th>passed</th><th>tokens in</th><th>tokens out</th><th>avg seconds</th><th>model</th></tr></thead><tbody>
+        ${usage.by_op.map((u) => html`<tr key=${u.op}><td>${u.op}</td><td>${u.attempts}</td><td>${u.passed}</td><td>${u.tokens_in.toLocaleString()}</td><td>${u.tokens_out.toLocaleString()}</td><td>${(u.avg_ms / 1000).toFixed(1)}</td><td class="small muted">${u.model || ""}</td></tr>`)}
+        <tr><td><b>total</b></td><td>${usage.by_op.reduce((n, u) => n + u.attempts, 0)}</td><td>${usage.by_op.reduce((n, u) => n + u.passed, 0)}</td><td><b>${usage.by_op.reduce((n, u) => n + u.tokens_in, 0).toLocaleString()}</b></td><td><b>${usage.by_op.reduce((n, u) => n + u.tokens_out, 0).toLocaleString()}</b></td><td></td><td></td></tr>
+      </tbody></table><p class="small muted">Counted from every run through your own provider or credits since ${usage.since ? new Date(usage.since).toLocaleDateString() : "the start"}. Paste runs are not counted; the app never sees those token counts. Multiply by your provider's price per million tokens for the cost.</p>`
+        : html`<p class="small muted">Nothing counted yet. Runs through your own provider key or credits record their token counts here.</p>`}
+    </div>
     <h2>Bullet register</h2>
     <div class="card">
       ${[["result_first", "Result first (RAS): the figure leads, the action follows. \"29.3% off annual freight by rebidding 40 lanes.\""], ["action_first", "Action first: the verb leads, the result closes. \"Rebid 40 lanes, taking 29.3% off annual freight.\""], ["posting", "Let the posting decide: verb-led responsibility lines get action first, outcome-led lines get result first; the AI says which in its notes."]].map(([r, label]) => html`<div key=${r}><label><input type="radio" name="register" checked=${(h.bullet_register || "result_first") === r} onChange=${() => hr({ bullet_register: r })} /> ${label}</label></div>`)}

package/ui/screens/welcome.js

@@ -0,0 +1,126 @@
+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 [view, setView] = useState(null); // a step the user went back to; null follows the next undone step
+  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 nextIdx = setup.steps.findIndex((x) => x.key === setup.next);
+  const idx = view !== null && view <= Math.max(nextIdx, 0) ? view : nextIdx;
+  const step = setup.steps[idx].key;
+  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>Your resumes: Word, PDF, Markdown, or plain text. Five to ten of your most different versions is plenty; near-identical copies only add duplicates to merge. 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>
+      <span class="links"><a class="small" href="#/settings">Settings</a><a class="small" href="#/" onClick=${async (e) => { e.preventDefault(); await api.post("/api/setup/dismiss", {}); onDone(); }}>skip for now</a></span></div>
+    <ol class="stepper">${setup.steps.map((st, i) => html`<li key=${st.key} class=${(st.done ? "done" : "") + (i === idx ? " now" : "") + (i <= nextIdx ? " can" : "")} onClick=${() => { if (i <= nextIdx) setView(i); }} title=${i <= nextIdx ? "open this step" : ""}><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 class="row welcome-nav">${idx > 0 ? html`<button class="small" onClick=${() => setView(idx - 1)}>← Back</button>` : ""}${idx < nextIdx ? html`<button class="small" onClick=${() => setView(null)}>Continue →</button>` : ""}</div></div>
+    ${modal === "discover" ? html`<${PacketModal} op="discover" label="Discovery questions" target=${{}} onClose=${() => setModal(null)} onSaved=${load} />` : ""}
+  </div>`;
+}