@gafj/gafj 0.1.20 → 0.1.28

package/bin/cli.js

@@ -321,6 +321,7 @@ async function main(argv) {
     const { createHostedServer } = require("../http/hosted");
     const { firebaseVerifier } = require("../http/identity");
     const { Log } = require("../store/log");
+    const pkg = require("../package.json");
     const env = process.env;
     const root = env.GAFJ_HOSTED_ROOT || "/data";
     if (!env.GAFJ_FIREBASE_PROJECT_ID) { process.stderr.write("serve-hosted needs GAFJ_FIREBASE_PROJECT_ID (and GAFJ_FIREBASE_API_KEY, GAFJ_FIREBASE_AUTH_DOMAIN for the sign-in page)\n"); process.exit(2); }

package/bridge/credits.js

@@ -53,7 +53,8 @@ async function relayFetch(homeDir, path, { method = "GET", body, fetchImpl, auth
 async function runPacket(homeDir, { packet, fetchImpl, auth }) {
   const started = Date.now();
   const op_id = ulid(started);
-  const r = await relayFetch(homeDir, "/op", { method: "POST", body: { op: packet.op, op_id, packet }, fetchImpl, auth });
+  const op = packet.operation || packet.op;
+  const r = await relayFetch(homeDir, "/op", { method: "POST", body: { op, op_id, packet }, fetchImpl, auth });
   if (!r || typeof r.content !== "string") throw new CreditsError("relay reply had no content", 502);
   return { content: r.content, provider: "credits", model: r.model || null, tokens_in: r.tokens_in ?? null, tokens_out: r.tokens_out ?? null, latency_ms: Date.now() - started, charged: r.charged, credits_left: r.credits_left };
 }

package/core/scoring.js

@@ -128,8 +128,10 @@ function conceptTags(requirementText) {
   return hit;
 }
 
+/** Lines a job board adds around a posting; never a requirement of the job. */
+const BOARD_NOISE = /\b(your profile and resume match|see how you compare|applicants?\b.*\b(ago|clicked)|easy apply|promoted by|reposted|set alert for similar|show more|show less|tailor my resume|help me stand out|create cover letter|people you can reach out to|meet the hiring team|skills you have|sign in to|referrals increase)\b/i;
 function lines(text) {
-  return String(text).split(/\r?\n|(?<=[.;])\s{2,}/).map((l) => l.trim()).filter(Boolean);
+  return String(text).split(/\r?\n|(?<=[.;])\s{2,}/).map((l) => l.trim()).filter((l) => l && !BOARD_NOISE.test(l));
 }
 
 /** Every figure in a document: money, percents, counts, durations. */

package/http/api.js

@@ -118,7 +118,10 @@ route("POST", "/api/kb/:id/review", (c, p, b) => mutate(c.db, { candidate_id: c.
 
 // postings: UI paste inserts accepted; accept promotes a proposed row
 route("GET", "/api/postings", (c) => c.db.prepare(`SELECT p.id AS posting_id, p.status, p.company, p.title, p.location, p.comp_text, p.captured_at, p.taken_down_at,
-    (SELECT count(*) FROM scoring s WHERE s.posting_id = p.id AND s.status = 'frozen') > 0 AS scoring_frozen, a.id AS application_id FROM posting p LEFT JOIN application a ON a.posting_id = p.id
+    (SELECT count(*) FROM scoring s WHERE s.posting_id = p.id AND s.status = 'frozen') > 0 AS scoring_frozen,
+    (SELECT s.fit_score FROM scoring s WHERE s.posting_id = p.id AND s.status = 'frozen' ORDER BY s.scored_at DESC, s.rowid DESC LIMIT 1) AS fit_score,
+    (SELECT s.verdict FROM scoring s WHERE s.posting_id = p.id AND s.status = 'frozen' ORDER BY s.scored_at DESC, s.rowid DESC LIMIT 1) AS verdict,
+    a.id AS application_id FROM posting p LEFT JOIN application a ON a.posting_id = p.id
     WHERE p.candidate_id = ? ORDER BY p.captured_at DESC`).all(c.candidate_id).map((r) => ({ ...r, scoring_frozen: !!r.scoring_frozen })));
 route("GET", "/api/postings/:id", (c, p) => {
   const r = c.db.prepare("SELECT id AS posting_id, status, company, title, location, comp_text, source_url, captured_at, taken_down_at, raw_text FROM posting WHERE id = ? AND candidate_id = ?").get(p.id, c.candidate_id);

package/http/hosted.js

@@ -34,8 +34,34 @@ const { UI_DIR } = require("./server");
 const COOKIE = "gafj_hs";
 const SESSION_TTL_MS = 30 * 24 * 3600 * 1000;
 const IDLE_CLOSE_MS = 10 * 60 * 1000;
-const SIGNIN_CSP = "default-src 'self'; script-src 'self' https://www.gstatic.com https://apis.google.com; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self' https://identitytoolkit.googleapis.com https://securetoken.googleapis.com https://www.googleapis.com https://apis.google.com; frame-src https://*.firebaseapp.com https://accounts.google.com; frame-ancestors 'none'; base-uri 'none'; form-action 'self'; object-src 'none'";
+const SIGNIN_CSP = "default-src 'self'; script-src 'self' https://www.gstatic.com https://apis.google.com; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self' https://identitytoolkit.googleapis.com https://securetoken.googleapis.com https://www.googleapis.com https://apis.google.com; frame-src 'self' https://*.firebaseapp.com https://accounts.google.com; frame-ancestors 'none'; base-uri 'none'; form-action 'self'; object-src 'none'";
 const MIME = { ".html": "text/html; charset=utf-8", ".js": "text/javascript; charset=utf-8", ".mjs": "text/javascript; charset=utf-8", ".css": "text/css; charset=utf-8", ".json": "application/json; charset=utf-8", ".svg": "image/svg+xml", ".png": "image/png", ".webmanifest": "application/manifest+json", ".ico": "image/x-icon", ".woff2": "font/woff2" };
+/**
+ * Google sign-in's handler pages live on <project>.firebaseapp.com. Served from another site, the
+ * popup and redirect flows depend on third-party storage that browsers now block, so the app
+ * serves them itself: everything under /__/ is fetched from Firebase and passed through, and the
+ * sign-in page uses this host as its auth domain. Firebase's own headers come back with the page;
+ * only hop-by-hop and cookie headers are dropped.
+ */
+const PASS_REQ = new Set(["accept", "accept-language", "content-type", "content-length", "referer", "user-agent", "x-requested-with", "origin"]);
+const DROP_RES = new Set(["set-cookie", "transfer-encoding", "connection", "keep-alive", "content-encoding", "content-length", "strict-transport-security", "alt-svc"]);
+async function proxyAuth(req, res, { projectId, fetchImpl, originOf }) {
+  const upstream = `https://${projectId}.firebaseapp.com${req.url}`;
+  const headers = {};
+  for (const [k, v] of Object.entries(req.headers)) if (PASS_REQ.has(k)) headers[k] = v;
+  if (headers.origin) headers.origin = `https://${projectId}.firebaseapp.com`;
+  if (headers.referer) headers.referer = headers.referer.replace(originOf, `https://${projectId}.firebaseapp.com`);
+  headers["accept-encoding"] = "identity";
+  const body = req.method === "GET" || req.method === "HEAD" ? undefined : await new Promise((resolve, reject) => { const c = []; req.on("data", (d) => c.push(d)); req.on("end", () => resolve(Buffer.concat(c))); req.on("error", reject); });
+  const r = await fetchImpl(upstream, { method: req.method, headers, body, redirect: "manual" });
+  const out = {};
+  for (const [k, v] of r.headers.entries()) if (!DROP_RES.has(k.toLowerCase())) out[k] = v;
+  const buf = Buffer.from(await r.arrayBuffer());
+  out["content-length"] = String(buf.length);
+  res.writeHead(r.status, out);
+  return res.end(buf);
+}
+
 const BLOCKED_IN_HOSTED = [/^\/api\/settings\/providers/, /^\/api\/mcp-config$/, /^\/api\/restore-test$/];
 
 function json(res, status, body) {
@@ -157,7 +183,9 @@ function createHostedServer(o) {
     res.on("finish", () => log.write(res.statusCode >= 500 ? "error" : res.statusCode >= 400 ? "warn" : "info", "request",
       { entity: "http", entity_id: `${req.method} ${p}`, actor: who ? "user" : "anon", ms: Date.now() - started, status: res.statusCode }));
     try {
+      if (p === "/healthz" && req.method === "GET") return json(res, 200, { ok: true, version: o.version }); // the platform's check arrives under its own host name
       if (host && String(req.headers.host || "").toLowerCase() !== host) return json(res, 421, { error: "wrong host" });
+      if (p.startsWith("/__/") && o.firebase && o.firebase.projectId) return proxyAuth(req, res, { projectId: o.firebase.projectId, fetchImpl: o.fetch || fetch, originOf: originOf(req) });
       const mutation = req.method !== "GET" && req.method !== "HEAD";
       securityHeaders(res, { noStore: isApi || p.startsWith("/auth/") || p.startsWith("/account/") });
 
@@ -166,7 +194,8 @@ function createHostedServer(o) {
         res.writeHead(200, { "Content-Type": MIME[".html"], "Cache-Control": "no-cache" });
         return fs.createReadStream(path.join(UI_DIR, "hosted", "signin.html")).pipe(res);
       }
-      if (p === "/signin/config.json") return json(res, 200, { firebase: o.firebase || null, signed_in: !!sessionOf(req) });
+      // the auth domain is this host, so Google's handler pages come through the proxy above and stay same-site
+      if (p === "/signin/config.json") return json(res, 200, { firebase: o.firebase ? { ...o.firebase, authDomain: String(req.headers.host || o.firebase.authDomain || "").toLowerCase() } : null, signed_in: !!sessionOf(req) });
       if (p === "/auth/session" && req.method === "POST") {
         const g = mutationCheck(req);
         if (g) return json(res, g.status, { error: g.error });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gafj/gafj",
-  "version": "0.1.20",
+  "version": "0.1.28",
   "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/categories.js

@@ -0,0 +1,52 @@
+"use strict";
+
+/**
+ * The categories operation's reply: the model reads a posting and proposes the five to eight
+ * things the employer is really asking for, each with its verbatim lines. Saving one records the
+ * attempt on its run and lands a proposed scoring row through the same door the paste route and
+ * MCP use; every evidence line must be a substring of the posting or the whole reply is refused.
+ */
+
+const { ulid } = require("../core/ulid");
+const { extractJson } = require("../core/extract");
+const { SCHEMAS, validate } = require("../core/schemas");
+const { withTx } = require("./tx");
+const { appendEvent } = require("./events");
+const { TransitionError, NotFound } = require("./transitions");
+const { proposeCategories } = require("./proposals");
+
+const MAX_ATTEMPTS = 3;
+
+function saveCategories(db, { run_id, content, route, actor, now, provider, model, tokens_in, tokens_out, latency_ms }) {
+  return withTx(db, (d) => {
+    const run = d.prepare("SELECT * FROM ai_run WHERE id = ?").get(run_id);
+    if (!run) throw new NotFound("run");
+    if (run.operation !== "categories") throw new TransitionError("this run is not a categories run; use the document door");
+    const attempts = d.prepare("SELECT count(*) c FROM ai_attempt WHERE ai_run_id = ?").get(run.id).c;
+    if (attempts >= MAX_ATTEMPTS) return { run_id: run.id, status: "blocked", attempt: attempts, stop: true, errors: ["three attempts used; open a fresh packet"] };
+    const attemptNo = attempts + 1;
+    const ex = extractJson(content);
+    const errors = [];
+    let parsed = null;
+    if (ex.error) errors.push("schema: " + ex.error + (typeof content === "string" && content.trim() ? ` (reply began: "${content.trim().slice(0, 160).replace(/\s+/g, " ")}")` : " (the reply was empty)"));
+    else {
+      parsed = ex.value;
+      for (const e of validate(parsed, SCHEMAS.categories)) errors.push(`${e.path}: ${e.message}`);
+    }
+    let result = null;
+    if (parsed && !errors.length) {
+      try { result = proposeCategories(d, { candidate_id: run.candidate_id, posting_id: run.posting_id, categories: parsed.categories, now, actor }); }
+      catch (e) { errors.push(e.message); }
+    }
+    const ok = !!result;
+    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)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`).run(attemptId, run.id, attemptNo, provider || null, model || null, tokens_in ?? null, tokens_out ?? null, latency_ms ?? null, null, ok ? "passed" : "blocked", ok ? null : (ex.error ? "schema" : "evidence"), now, now);
+    const final = ok ? "passed" : attemptNo >= MAX_ATTEMPTS ? "blocked" : "pending";
+    d.prepare("UPDATE ai_run SET final_result = ?, finished_at = CASE WHEN ? = 'pending' THEN finished_at ELSE ? END WHERE id = ?").run(final, final, now, run.id);
+    appendEvent(d, { candidate_id: run.candidate_id, entity: "ai_run", entity_id: run.id, event: ok ? "categories_saved" : "categories_blocked", actor_type: actor.type, actor_ref: actor.ref, payload: { attempt: attemptNo, categories: result ? result.categories : 0, errors: errors.length, route }, at: now });
+    return { run_id: run.id, status: ok ? "passed" : "blocked", attempt: attemptNo, stop: attemptNo >= MAX_ATTEMPTS && !ok, errors, scoring_id: result ? result.scoring_id : null, categories: result ? result.categories : 0 };
+  });
+}
+
+module.exports = { saveCategories };

package/store/reply.js

@@ -13,6 +13,7 @@ function saveReply(db, a) {
   const run = a.run_id ? db.prepare("SELECT operation FROM ai_run WHERE id = ?").get(a.run_id) : null;
   if (run && run.operation === "extract") return require("./onboarding").saveExtraction(db, a);
   if (run && run.operation === "discover") return require("./discover").saveDiscovery(db, a);
+  if (run && run.operation === "categories") return require("./categories").saveCategories(db, a);
   return ingestDocument(db, a);
 }
 

package/store/scoring.js

@@ -53,7 +53,7 @@ function proposeFromScan(db, { posting_id, now, actor }) {
   const title = String(p.title || "").toLowerCase();
   const add = (line, weight, hard) => {
     const l = String(line).trim();
-    const name = l.replace(/^[-*•\u2022\d.)\s]+/, "").replace(/[^\w&/ ,'()+%$-]+/g, " ").replace(/\s+/g, " ").trim();
+    const name = l.replace(/^(?:[-*•\u2022]+\s*|\d{1,2}[.)]\s+)/, "").replace(/[^\w&/ ,'()+%$-]+/g, " ").replace(/\s+/g, " ").trim();
     if (!l || l.length < 12 || seen.has(l) || cats.length >= 8 || HEADING.test(name) || name.split(/\s+/).length < 3) return;
     if (title && name.toLowerCase().includes(title)) return; // the posting's own title line is not a requirement
     seen.add(l);
@@ -70,7 +70,7 @@ function proposeFromScan(db, { posting_id, now, actor }) {
     for (const l of all) {
       if (cats.length >= 5) break;
       const t = String(l).trim();
-      const name = t.replace(/^[-*•\u2022\d.)\s]+/, "").replace(/\s+/g, " ").trim();
+      const name = t.replace(/^(?:[-*•\u2022]+\s*|\d{1,2}[.)]\s+)/, "").replace(/\s+/g, " ").trim();
       if (t.length < 8 || seen.has(t) || HEADING.test(name) || META.test(t)) continue;
       seen.add(t);
       cats.push({ category: name.slice(0, 80), weight: 5, jd_evidence: [t.slice(0, 400)], is_hard_gate: false });

package/store/setup.js

@@ -27,8 +27,11 @@ function setupView(db, homeDir, candidate_id) {
   const aiChosen = !!(cfg.setup && cfg.setup.ai_chosen) && usable;
   const pos = require("./positions").counts(db, candidate_id);
   const posDone = pos.total > 0 && pos.proposed === 0;
+  const bal = cfg.credits && cfg.credits.last_balance;
+  const creditsDone = !!(bal && Number(bal.available) > 0);
   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: "credits", title: "Get credits", done: creditsDone, detail: bal ? `${bal.available} available` : 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: "positions", title: "Confirm your jobs, schools, and awards", done: posDone, detail: pos.total ? (posDone ? `${pos.total} position${pos.total === 1 ? "" : "s"} confirmed` : `${pos.proposed} of ${pos.total} to confirm`) : null },
@@ -36,8 +39,10 @@ function setupView(db, homeDir, candidate_id) {
     { 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" };
+  // a hosted account signed in to use the included AI; which AI is not a question there (Paste stays a Settings option)
+  const shown = cfg.hosted ? steps.filter((s) => s.key !== "ai") : steps.filter((s) => s.key !== "credits");
+  const next = shown.find((s) => !s.done);
+  return { steps: shown, 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. */

package/ui/app.css

@@ -53,7 +53,10 @@ textarea { width: 100%; min-height: 120px; font-family: var(--mono); font-size:
 .rail .brand .mark { width: 40px; height: 40px; border-radius: 9px; margin-right: 10px; border: 1px solid #333744; }
 .rail .brand span { flex: 1; }
 .rail nav, .rail > a { display: flex; flex-direction: column; gap: 2px; }
-.rail a { color: var(--rail-muted); padding: 9px 10px; border-radius: 6px; display: block; font-size: 13.5px; }
+.rail a { color: var(--rail-muted); padding: 9px 10px; border-radius: 6px; display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
+.rail a .ico { flex: none; opacity: .75; }
+.rail a.active .ico { opacity: 1; }
+.rail a .short { display: none; }
 .rail a.active { background: var(--rail-active); color: var(--rail-text); font-weight: 600; }
 .rail a:hover { background: var(--rail-active); color: var(--rail-text); text-decoration: none; }
 .rail .foot { margin-top: auto; font-size: 11.5px; color: var(--rail-dim); display: flex; flex-direction: column; gap: 4px; }
@@ -62,7 +65,7 @@ textarea { width: 100%; min-height: 120px; font-family: var(--mono); font-size:
 .rail .theme-toggle { background: transparent; border: 1px solid #333744; color: var(--rail-muted); padding: 3px 6px; font-size: 11px; border-radius: 5px; }
 .rail .theme-toggle:hover { border-color: var(--accent); color: var(--rail-text); }
 
-.main { padding: 28px 32px; max-width: 1200px; background: var(--surface); }
+.main { padding: 28px 32px; max-width: 1200px; background: var(--surface); min-width: 0; }
 h1 { font-size: 22px; margin: 0 0 4px; font-weight: 700; }
 h2 { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 22px 0 8px; font-weight: 500; }
 h3 { font-size: 15px; margin: 12px 0 6px; font-weight: 600; }
@@ -130,7 +133,11 @@ form.inline input, form.inline select { min-width: 120px; }
 table.cats { border-collapse: collapse; width: 100%; font-size: 13px; }
 table.cats th, table.cats td { border-bottom: 1px solid var(--line); padding: 6px; text-align: left; vertical-align: top; }
 table.cats th { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 500; }
-table.cats input:not([type=checkbox]) { width: 100%; }
+table.cats input:not([type=checkbox]) { width: 100%; box-sizing: border-box; }
+table.cats td:first-child { min-width: 220px; }
+table.cats td:nth-child(2), table.cats td:nth-child(3) { width: 64px; }
+table.cats input.narrow { min-width: 54px; padding: 6px 6px; }
+table.cats td:nth-child(5) { font-family: var(--sans); font-size: 12.5px; color: var(--muted); }
 input.narrow { width: 76px; }
 pre.wrap { white-space: pre-wrap; }
 /* KB "receipt" moment: the confirmed span highlighted inline against its muted source sentence. */
@@ -159,6 +166,7 @@ mark { background: var(--good-bg); color: var(--good-bright); border-radius: 3px
 .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-compact { display: none; }
 .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); }
@@ -173,7 +181,8 @@ mark { background: var(--good-bg); color: var(--good-bright); border-radius: 3px
 .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; }
+.welcome-nav { margin: 0 0 6px; justify-content: space-between; align-items: baseline; }
+.welcome-nav h3 { margin: 0; }
 /* 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; }
@@ -183,6 +192,45 @@ mark { background: var(--good-bg); color: var(--good-bright); border-radius: 3px
 .switch input:checked + .track::after { left: 18px; }
 .switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
 /* a small spinner beside anything that is with the model */
+.tablewrap { overflow-x: auto; max-width: 100%; margin: 4px 0; }
+.fit { font-family: var(--mono); font-weight: 600; min-width: 34px; text-align: center; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line-2); }
+.fit.good { color: var(--accent); border-color: var(--accent); }
+.row.wide > input { flex: 1; min-width: 220px; }
+form.answer { margin: 6px 0 2px; display: grid; gap: 6px; }
+form.answer input, form.answer textarea { width: 100%; box-sizing: border-box; }
+.bar { display: inline-block; width: 160px; height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; vertical-align: middle; }
+.bar > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .9s linear; }
 .spin { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; }
 @keyframes spin { to { transform: rotate(360deg); } }
 @media (prefers-reduced-motion: reduce) { .spin { animation: none; border-top-color: var(--line-2); } }
+
+/* Phones: the rail becomes a bottom bar; everything else stacks. */
+@media (max-width: 720px) {
+  html, body { overflow-x: hidden; }
+  .layout { grid-template-columns: 1fr; }
+  .rail { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; flex-direction: row; gap: 0; padding: 4px 2px calc(4px + env(safe-area-inset-bottom)); border-top: 1px solid #2a2e38; }
+  .rail .brand, .rail .foot { display: none; }
+  .rail a { flex: 1; flex-direction: column; gap: 3px; padding: 6px 2px; font-size: 10.5px; border-radius: 8px; text-align: center; letter-spacing: .01em; }
+  .rail a .full { display: none; }
+  .rail a .short { display: block; }
+  .rail a .ico { width: 20px; height: 20px; }
+  .main { padding: 16px 14px calc(76px + env(safe-area-inset-bottom)); max-width: none; }
+  .grid2 { grid-template-columns: 1fr; gap: 12px; }
+  h1 { font-size: 20px; }
+  .card { padding: 12px; }
+  .row > input, .row > select, form.inline input, form.inline select { min-width: 0; max-width: 100%; flex: 1 1 140px; }
+  .row.wide > input { min-width: 0; }
+  textarea { max-width: 100%; }
+  pre { max-width: 100%; }
+  .tablewrap { overflow-x: auto; max-width: 100%; }
+  .welcome { padding: 18px 14px 40px; }
+  .stepper { display: none; }
+  .stepper-compact { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 500 12px var(--mono); color: var(--muted); }
+  .stepper-compact .bar { flex: 1; width: auto; }
+  .welcome-head { flex-wrap: wrap; gap: 10px; }
+  .welcome-head > div { flex: 1 1 200px; min-width: 0; }
+  .welcome-head .links { flex-direction: column; gap: 4px; white-space: nowrap; align-items: flex-end; margin-left: 0; }
+  .welcome-head .small { white-space: nowrap; }
+  .ai-options { grid-template-columns: 1fr; }
+  .bar { width: 100px; }
+}

package/ui/app.js

@@ -7,19 +7,31 @@ 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";
+import { Welcome, wizardHold } from "./screens/welcome.js";
+
+// line icons for the nav; on a phone the rail folds into a bottom bar of these with short labels
+const ICON = {
+  home: "M3 11 12 3l9 8v10h-6v-6H9v6H3z",
+  apps: "M4 7h16v13H4zM9 7V4h6v3M4 12h16",
+  interviews: "M4 5h16v15H4zM4 10h16M8 3v4M16 3v4",
+  postings: "M5 4h14v16H5zM8 8h8M8 12h8M8 16h5",
+  kb: "M4 4h7a2 2 0 0 1 2 2v14a2 2 0 0 0-2-2H4zM20 4h-7a2 2 0 0 0-2 2v14a2 2 0 0 1 2-2h7z",
+  settings: "M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM19 12l2-1-1.5-3-2.2.6a7 7 0 0 0-1.6-1l-.3-2.3h-3.4l-.3 2.3a7 7 0 0 0-1.6 1L7.9 8 6.4 11l2 1a7 7 0 0 0 0 2l-2 1 1.5 3 2.2-.6a7 7 0 0 0 1.6 1l.3 2.3h3.4l.3-2.3a7 7 0 0 0 1.6-1l2.2.6 1.5-3-2-1a7 7 0 0 0 0-2z",
+};
+const Icon = ({ d }) => html`<svg class="ico" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round" aria-hidden="true"><path d=${d} /></svg>`;
 
 function Rail({ route, me }) {
   const is = (p) => (route.path === p || (p !== "/" && route.path.startsWith(p)) ? "active" : "");
   const theme = useTheme();
+  const item = (href, key, full, short) => html`<a href=${href} class=${is(href.slice(1))}><${Icon} d=${ICON[key]} /><span class="full">${full}</span><span class="short">${short}</span></a>`;
   return html`<nav class="rail">
     <div class="brand"><img class="mark" src="/icon-192.png" alt="" width="40" height="40" /><span>GAF-J</span><button class="theme-toggle" title=${theme.dark ? "switch to light" : "switch to dark"} onClick=${theme.toggle}>${theme.dark ? "☾" : "☀"}</button></div>
-    <a href="#/" class=${is("/")}>Dashboard</a>
-    <a href="#/applications" class=${is("/applications")}>Applications</a>
-    <a href="#/interviews" class=${is("/interviews")}>Interviews</a>
-    <a href="#/postings" class=${is("/postings")}>Postings</a>
-    <a href="#/kb" class=${is("/kb")}>Knowledge base</a>
-    <a href="#/settings" class=${is("/settings")}>Settings</a>
+    ${item("#/", "home", "Dashboard", "Home")}
+    ${item("#/applications", "apps", "Applications", "Apps")}
+    ${item("#/interviews", "interviews", "Interviews", "Prep")}
+    ${item("#/postings", "postings", "Postings", "Jobs")}
+    ${item("#/kb", "kb", "Knowledge base", "Record")}
+    ${item("#/settings", "settings", "Settings", "Settings")}
     <div class="foot">
       <div class="name">${me ? me.name : ""}</div>
       <div>AI: ${me ? me.route : ""}</div>
@@ -60,7 +72,7 @@ function App() {
   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]);
+  useEffect(() => { if (gate === false || wizardHold.on) 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)} />`;

package/ui/hosted/signin.css

@@ -1,7 +1,6 @@
 .signin { max-width: 420px; margin: 10vh auto; padding: 32px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; text-align: center; }
-.signin .mark { width: 64px; height: 64px; border-radius: 14px; margin-bottom: 12px; }
-.signin h1 { font-family: var(--mono); font-size: 20px; margin: 0 0 8px; }
-.signin .sub { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 22px; text-align: left; }
+.signin .mark { width: 80px; height: 80px; border-radius: 18px; margin-bottom: 18px; }
+.signin .sub { color: var(--muted); font-family: var(--sans); font-size: 14px; line-height: 1.6; margin: 0 0 22px; text-align: left; }
 .signin button.primary { width: 100%; padding: 11px; font-size: 15px; }
 .signin details { text-align: left; margin-top: 22px; border-top: 1px solid var(--line); padding-top: 12px; }
 .signin textarea { min-height: 70px; font-size: 11px; }

package/ui/hosted/signin.html

@@ -10,8 +10,7 @@
 </head>
 <body>
 <main class="signin">
-  <img class="mark" src="/icon-192.png" alt="" width="64" height="64">
-  <h1>GAF-J</h1>
+  <img class="mark" src="/icon-192.png" alt="GAF-J" width="80" height="80">
   <p class="sub">Sign in with Google. Your record, documents, and campaign live in your account here, encrypted, yours to export or delete in one click.</p>
   <button id="google" class="primary" type="button">Continue with Google</button>
   <p id="status" class="small muted" hidden></p>

package/ui/screens/dashboard.js

@@ -40,11 +40,12 @@ function Setup({ s, reload }) {
 
 export function Dashboard({ live }) {
   const [snap, setSnap] = useState(null);
+  const [postings, setPostings] = useState([]);
   const [setup, setSetup] = useState(null);
   const [msg, setMsg] = useState("");
   const [err, setErr] = useState("");
   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]);
+  useEffect(() => { api.get("/api/snapshot").then(setSnap).catch((e) => setErr(e.message)); api.get("/api/postings").then(setPostings).catch(() => {}); 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>`;
@@ -54,6 +55,13 @@ export function Dashboard({ live }) {
     <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>Postings (${postings.length})</h2>
+    <div class="card">${postings.length ? html`<ul class="list">${postings.slice(0, 12).map((p) => html`<li key=${p.posting_id}>
+      ${p.fit_score != null ? html`<span class=${"fit " + (p.verdict === "pursue" ? "good" : "")} title=${p.verdict}>${Number(p.fit_score).toFixed(1)}</span>` : html`<span class="fit muted" title="not scored yet">–</span>`}
+      <a href=${"#/postings/" + p.posting_id}><b>${p.company}</b>: ${p.title}</a>
+      ${p.verdict ? html`<span class=${"tag " + (p.verdict === "pursue" ? "passed" : "warn")}>${p.verdict}</span>` : html`<span class="tag warn">unscored</span>`}
+      ${p.application_id ? html`<a class="small" href=${"#/applications/" + p.application_id}>application</a>` : p.status === "accepted" && p.fit_score != null ? html`<span class="small muted">open it to log an application and make the resume</span>` : ""}</li>`)}</ul>`
+      : html`<span class="muted">no postings yet; paste one under Postings</span>`}</div>
     <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

@@ -30,6 +30,11 @@ export function Onboarding({ d, reload, setErr, route, compact }) {
     } catch (e) { setRunning((x) => ({ ...x, [s.source_document_id]: "failed: " + e.message })); }
   };
   const isRunning = (id) => running[id] && typeof running[id] === "object";
+  // a progress bar with no signal from the model: it fills against the time a file of this size usually takes,
+  // eases toward ninety-five percent past that, and completes only when the reply lands
+  const expectMs = (chars) => 12000 + (Number(chars) || 0) * 9;
+  const progress = (id, chars) => { const t = Date.now() - running[id].started; const e = expectMs(chars); return t < e ? (t / e) * 85 : 85 + 10 * (1 - Math.exp(-(t - e) / e)); };
+  const Bar = ({ id, chars }) => html`<span class="bar" title=${`usually about ${Math.round(expectMs(chars) / 1000 / 10) * 10} seconds for a file this size`}><span style=${`width:${progress(id, chars).toFixed(1)}%`}></span></span>`;
   const extract = async (s) => {
     if (!direct) { setModal({ source: s }); return; }
     await runOne(s);
@@ -65,7 +70,8 @@ export function Onboarding({ d, reload, setErr, route, compact }) {
     ${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" disabled=${isRunning(s.source_document_id)} onClick=${() => extract(s)}>${isRunning(s.source_document_id) ? html`<span class="spin"></span> extracting · ${elapsed(Date.now() - running[s.source_document_id].started)}` : direct ? "Extract" : "Extract (paste)"}</button>` : ""}
+      ${!s.empty ? html`<button class="small" disabled=${isRunning(s.source_document_id)} onClick=${() => extract(s)}>${isRunning(s.source_document_id) ? html`<span class="spin"></span> reading · ${elapsed(Date.now() - running[s.source_document_id].started)}` : direct ? "Extract" : "Extract (paste)"}</button>` : ""}
+      ${isRunning(s.source_document_id) ? html`<${Bar} id=${s.source_document_id} chars=${s.chars} />` : ""}
       <button class="small danger" title="remove this file and anything proposed from it; confirmed records stay" onClick=${async () => { if (!confirm(`Remove ${s.filename}? Records already confirmed stay; pending rows from this file go.`)) return; try { await api.del(`/api/sources/${s.source_document_id}`); await reload(); } catch (e) { setErr(e.message); } }}>remove</button>
       ${running[s.source_document_id] && !isRunning(s.source_document_id) ? 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>` : ""}
@@ -90,6 +96,36 @@ 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() } : {}) });
+/** One box per question. The kind says which field the answer is; the record's own details ride along unchanged. */
+const ANSWER = {
+  tenure: { hint: "the phrase you would put on a resume: nine years in operations roles", field: "tenure" },
+  metric: { hint: "the figure with its unit, as you would state it: $430,000, 18%, 12-person team", field: "metric" },
+  scope: { hint: "one resume line that states the size: led a team of 12 across 3 sites", field: "wording" },
+  skill: { hint: "one resume line that names the skill and where it showed", field: "wording" },
+  context: { hint: "a few sentences, in your own words", field: "summary", long: true },
+  story: { hint: "a few sentences, in your own words: the situation, what you did, what came of it", field: "summary", long: true },
+};
+export function AnswerBox({ q, onSubmit, onSkip }) {
+  const [text, setText] = useState("");
+  const a = ANSWER[q.kind] || ANSWER.context;
+  const submit = (e) => {
+    e.preventDefault();
+    const v = text.trim();
+    if (!v) return;
+    const d = { ...fromDraft(q.draft), metrics: [], verbs: [], wordings: [], tenure: "" };
+    const base = { title: d.title, company: d.company, role: d.role, dates: d.dates, summary: "", metrics: [], verbs: [], wordings: [], tags: [] };
+    if (a.field === "tenure") base.tenure = v;
+    else if (a.field === "metric") base.metrics = [v];
+    else if (a.field === "wording") base.wordings = [v];
+    else base.summary = v;
+    onSubmit(base);
+  };
+  return html`<form class="answer" onSubmit=${submit}>
+    ${a.long ? html`<textarea required placeholder=${a.hint} value=${text} onInput=${(e) => setText(e.target.value)} rows="3"></textarea>` : html`<input required placeholder=${a.hint} value=${text} onInput=${(e) => setText(e.target.value)} />`}
+    <div class="row"><button class="primary small">Add answer</button>${onSkip ? html`<button type="button" class="small" onClick=${onSkip}>Skip</button>` : ""}<span class="small muted">lands as a pending row on this record; nothing changes until you confirm it</span></div>
+  </form>`;
+}
+
 /** The resume header: name, email, phone, city, links. Prefilled from the first resume; yours to change here or in Settings. */
 export function ContactForm({ setErr, compact }) {
   const [c, setC] = useState(null);
@@ -214,8 +250,7 @@ export function KB({ live }) {
       <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); }} />`
-          : 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`, {})}>Dismiss</button></div>`}</div></li>`)}
+        <${AnswerBox} q=${q} onSubmit=${(draft) => post(`/api/kb/questions/${q.question_id}/answer`, { draft })} onSkip=${() => post(`/api/kb/questions/${q.question_id}/dismiss`, {})} /></div></li>`)}
       ${(d.questions || []).length ? "" : html`<li class="muted">no open questions</li>`}</ul></div>
     ${modal && modal.op === "discover" ? html`<${PacketModal} op="discover" label="Discovery questions" target=${{}} onClose=${() => setModal(null)} onSaved=${load} />` : ""}
     <h2>Holes (questions your own records raise)</h2>

package/ui/screens/postings.js

@@ -1,5 +1,6 @@
 import { html, useState, useEffect } from "../vendor/preact.mjs";
 import { cleanPosting, guessPosting, api } from "../lib.js";
+import { PacketModal } from "./packet.js";
 
 /** Screen 2: paste a posting, store and scan locally, edit the proposed categories, freeze, log the application. */
 
@@ -27,9 +28,9 @@ function CategoryEditor({ posting, scoring, onDone }) {
       <td class="small mono">${c.jd_evidence.map((e, j) => html`<div key=${j}>"${e}"</div>`)}</td>
       <td><button class="small" onClick=${() => setCats(cats.filter((_, j) => j !== i))}>drop</button></td></tr>`)}
     </tbody></table>
-    <p class="small muted">Five to eight categories. Weights come from the employer's emphasis. A score left blank is filled mechanically from the evidence ranking; your own score wins when you type one. Every evidence line must be verbatim from the posting or the freeze is rejected.</p>
+    <p class="small muted">Five to eight categories. Every evidence line must be verbatim from the posting or scoring is refused.</p>
     ${err ? html`<p class="error">${err}</p>` : ""}
-    <div class="row"><button class="primary" disabled=${busy || cats.length < 5} onClick=${freeze}>Freeze categories → score</button></div>
+    <div class="row"><button class="primary" disabled=${busy || cats.length < 5} onClick=${freeze}>${busy ? "scoring" : "Score my record against these"}</button><span class="small muted">weight is the employer's emphasis; score is how well your confirmed records meet it, computed unless you type one</span></div>
   </div>`;
 }
 
@@ -50,6 +51,18 @@ export function Postings({ live, id }) {
   };
   const [err, setErr] = useState("");
   const [msg, setMsg] = useState("");
+  const [me, setMe] = useState(null);
+  const [modal, setModal] = useState(null);
+  const [asking, setAsking] = useState(false);
+  useEffect(() => { api.get("/api/me").then(setMe).catch(() => {}); }, []);
+  const direct = me && (me.route === "byo_key" || me.route === "credits");
+  // the AI reads the posting and proposes the five to eight things the employer is really asking for, each with its verbatim line
+  const askAi = async (posting_id) => {
+    if (!direct) { setModal({ op: "categories", posting_id }); return; }
+    setAsking(true); setErr(""); setMsg("");
+    try { const r = await api.post(`/api/run/categories?posting_id=${encodeURIComponent(posting_id)}`, {}); if (r.status !== "passed") setErr("refused: " + (r.errors || []).join("; ")); else setMsg("your AI proposed the categories; edit and freeze below"); await load(); } catch (e) { setErr(e.message); }
+    setAsking(false);
+  };
   const load = async () => { setRows(await api.get("/api/postings")); if (id) setSel(await api.get(`/api/postings/${id}`)); };
   useEffect(() => { load().catch((e) => setErr(e.message)); }, [live, id]);
   const store = async (e) => {
@@ -57,6 +70,8 @@ export function Postings({ live, id }) {
     try {
       const r = await api.post("/api/postings", form);
       await api.post(`/api/postings/${r.posting_id}/scan`);
+      if (direct) { try { await api.post(`/api/run/categories?posting_id=${encodeURIComponent(r.posting_id)}`, {}); } catch (e3) { setErr("your AI could not propose categories (" + e3.message + "); the local scan's draft is scored instead"); } }
+      try { await api.post(`/api/postings/${r.posting_id}/freeze`, {}); } catch (e4) { /* fewer than five usable lines; the editor below says so */ }
       setForm({ company: "", title: "", source_url: "", location: "", comp_text: "", raw_text: "" });
       setGuessed({ company: true, title: true });
       location.hash = "#/postings/" + r.posting_id;
@@ -69,36 +84,35 @@ export function Postings({ live, id }) {
   return html`<div>
     <h1>Postings</h1>
     ${err ? html`<p class="error">${err}</p>` : ""}${msg ? html`<p class="small muted">${msg}</p>` : ""}
-    <div class="grid2">
-      <div>
-        <h2>Paste posting</h2>
-        <form class="card" onSubmit=${store}>
-          <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>
-      </div>
-      <div>
-        ${sel ? html`<h2>${sel.company}: ${sel.title}</h2>
+    ${sel ? html`<p class="small"><a href="#/postings">← all postings</a></p>
+<h2>${sel.company}: ${sel.title}</h2>
           <div class="card">
             <div class="row"><span class="tag">${sel.status}</span><span class="muted small">${[sel.location, sel.comp_text].filter(Boolean).join(" · ")}</span>
               ${sel.status === "proposed" ? html`<button class="primary" onClick=${() => act(`/api/postings/${sel.posting_id}/accept`)}>Accept</button>` : ""}
               ${sel.status === "proposed" ? html`<button onClick=${() => act(`/api/postings/${sel.posting_id}/archive`)}>Archive</button>` : ""}
+              <button class="primary" disabled=${asking} onClick=${() => askAi(sel.posting_id)}>${asking ? "asking" : "Ask your AI for categories"}</button>
               <button onClick=${() => act(`/api/postings/${sel.posting_id}/scan`)}>Scan again</button></div>
+            ${modal ? html`<${PacketModal} op="categories" label="Categories" target=${{ posting_id: modal.posting_id }} onClose=${() => setModal(null)} onSaved=${load} />` : ""}
             <details><summary>raw text (${sel.raw_text.length} chars)</summary><pre class="mono wrap">${sel.raw_text}</pre></details>
           </div>
-          ${frozen ? html`<div class="card"><b>fit ${frozen.fit_score} · ${frozen.verdict.toUpperCase()}</b> <span class="muted small">${frozen.verdict_reason}</span>
+          ${frozen ? html`<div class="card"><b>Fit ${frozen.fit_score} of 10 · ${frozen.verdict.toUpperCase()}</b> <span class="muted small">${frozen.verdict_reason}</span>
             <ul class="list">${frozen.categories.map((c, i) => html`<li key=${i}><span class="mono">w${c.weight} s${c.score}</span> ${c.category} ${c.is_hard_gate ? html`<span class="tag warn">hard gate</span>` : ""} <span class="small muted">${(c.evidence_ids || []).slice(0, 3).join(", ")}</span></li>`)}</ul>
             ${!rows.find((r) => r.posting_id === sel.posting_id && r.application_id) && sel.status === "accepted" ? html`<div class="row"><button class="primary" onClick=${async () => { const r = await act("/api/applications", { posting_id: sel.posting_id }); if (r) location.hash = "#/applications/" + r.application_id; }}>Log application</button></div>` : ""}
           </div>` : ""}
           <h3>${frozen ? "Re-score" : "Proposed categories"} ${proposed ? html`<span class="tag">draft from ${proposed.scored_at.slice(0, 10)}</span>` : ""}</h3>
-          ${proposed || frozen ? html`<div class="card"><${CategoryEditor} key=${(proposed || frozen).scoring_id} posting=${sel} scoring=${proposed || frozen} onDone=${load} /></div>` : html`<p class="muted">no categories yet; scan the posting or let a model propose them through MCP</p>`}
+          ${proposed || frozen ? html`<div class="card">${proposed && !frozen ? html`<p class="small muted">${direct ? "A quick local scan made this draft. \"Ask your AI for categories\" above replaces it with a read of the whole posting." : "A quick local scan made this draft; your AI can do better through the button above."}</p>` : ""}<${CategoryEditor} key=${(proposed || frozen).scoring_id} posting=${sel} scoring=${proposed || frozen} onDone=${load} /></div>` : html`<p class="muted">no categories yet; ask your AI above, or scan the posting</p>`}
           ${sel.gaps.length ? html`<h3>KB gaps (${sel.gaps.length})</h3><ul class="list">${sel.gaps.map((g) => html`<li key=${g.gap_id}>${g.question} <span class="small muted">"${g.requirement_text}"</span> ${g.resolved_at ? html`<span class="tag passed">answered</span>` : html`<a class="small" href="#/kb">answer</a>`}</li>`)}</ul>` : ""}
-        ` : html`<p class="muted">pick a posting</p>`}
-      </div>
-    </div>
+        ` : html`<div>
+        <h2>Paste posting</h2>
+        <form class="card" onSubmit=${store}>
+          <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, scanned, then your AI proposes what the employer wants and your record is scored against it</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>
+
+      </div>`}
   </div>`;
 }

package/ui/screens/settings.js

@@ -51,7 +51,7 @@ export function Settings({ live }) {
     <div class="card">
       ${(s.hosted
         ? [["credits", "Credits: your documents run on the included AI, paid in credits"], ["paste", "Paste: copy a packet into any chat you already pay for, paste the JSON back"]]
-        : [["paste", "Paste: copy a packet into any chat, paste the JSON back"], ["mcp", "Claude Desktop / Claude Code through the local MCP server"], ["byo_key", "My providers: the local server calls the one you mark active"], ["credits", "Credits: the local server sends packets to the hosted relay with your sign-in token (relay not deployed yet)"]]
+        : [["paste", "Paste: copy a packet into any chat, paste the JSON back"], ["mcp", "Claude Desktop / Claude Code through the local MCP server"], ["byo_key", "My providers: the local server calls the one you mark active"], ["credits", "Credits: the local server sends packets to the hosted relay with your sign-in token"]]
       ).map(([r, label]) => html`<div key=${r}><label><input type="radio" name="route" checked=${s.route === r} disabled=${r === "credits" && !s.hosted && !(s.credits && s.credits.has_token)} onChange=${() => put({ route: r })} /> ${label}</label></div>`)}
       ${s.hosted ? "" : html`<div class="row"><button onClick=${async () => setMcp(mcp ? null : await api.get("/api/mcp-config"))}>${mcp ? "hide" : "Print MCP config"}</button></div>`}
       ${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>` : ""}
@@ -99,7 +99,7 @@ export function Settings({ live }) {
         <div class="row"><button type="button" onClick=${async () => { setMsg(""); try { const r = await api.get("/api/credits/balance"); setMsg(`balance: ${r.available} available`); await load(); } catch (e2) { setErr(e2.message); } }}>check balance</button>
           ${[["starter", "25 credits, $9"], ["campaign", "100 credits, $29"], ["season", "300 credits, $69"]].map(([k, label]) => html`<button type="button" key=${k} onClick=${async () => { setMsg(""); try { const r = await api.post("/api/credits/checkout", { pack: k }); location.href = r.url; } catch (e2) { setErr(e2.message); } }}>buy ${label}</button>`)}</div>
         <p class="small muted">Stripe takes the card; GAF-J never sees it. Credits arrive within a few seconds of paying and never expire. A document costs a few credits, reading a resume a few more; the exact prices are shown before each run.</p>
-        ${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>` : ""}` : html`<p class="small muted">A paid route for people without their own AI subscription. The relay is written and tested but not deployed; nothing here works until it is. The relay runs named operations on the packet the app built, never a free prompt, and never stores packet or reply text.</p>
+` : html`<p class="small muted">A paid route for people without their own AI subscription. Sign in at https://app.gaf-j.com/signin, copy the token it shows, paste it here with the relay address. The relay runs named operations on the packet the app built, never a free prompt, and never stores packet or reply text.</p>
       <form class="inline" onSubmit=${(e) => { e.preventDefault(); const f = e.target.elements; put({ credits: { relay_url: f.relay.value, ...(f.token.value ? { id_token: f.token.value } : {}) } }); f.token.value = ""; }}>
         <input name="relay" placeholder="relay url (https)" value=${(s.credits && s.credits.relay_url) || ""} />
         <input name="token" type="password" placeholder=${s.credits && s.credits.has_token ? `sign-in token ${s.credits.token} (blank keeps it)` : "sign-in token"} />
@@ -107,18 +107,18 @@ export function Settings({ live }) {
         <button type="button" onClick=${async () => { setMsg(""); try { const r = await api.get("/api/credits/balance"); setMsg(`balance: ${r.available} available`); await load(); } catch (e2) { setErr(e2.message); } }} disabled=${!(s.credits && s.credits.has_token)}>check balance</button>
         ${s.credits && s.credits.has_token ? html`<button type="button" class="danger" onClick=${() => put({ credits: { id_token: null } })}>sign out</button>` : ""}
       </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>` : ""}
+      ${s.credits && s.credits.last_balance ? html`<p class="small"><b>${s.credits.last_balance.available} credits available</b>${s.credits.last_balance.reserved ? ` (${s.credits.last_balance.reserved} held for a run in progress)` : ""}, checked ${new Date(s.credits.last_balance.at).toLocaleString()}</p>` : ""}
     </div>
     <h2>Usage</h2>
     <div class="card">
-      ${usage && usage.by_op.length ? html`<table class="cats"><thead><tr><th>operation</th><th>result</th><th>runs</th><th>tokens in</th><th>tokens out</th><th>model</th></tr></thead><tbody>
+      ${usage && usage.by_op.length ? html`<div class="tablewrap"><table class="cats"><thead><tr><th>operation</th><th>result</th><th>runs</th><th>tokens in</th><th>tokens out</th><th>model</th></tr></thead><tbody>
         ${usage.by_op.flatMap((u) => [
           html`<tr key=${u.op + "p"}><td rowspan="2"><b>${u.op}</b><div class="small muted">${(u.avg_ms / 1000).toFixed(0)} s avg</div></td><td><span class="tag passed">passed</span></td><td>${u.passed}</td><td>${u.in_passed.toLocaleString()}</td><td>${u.out_passed.toLocaleString()}</td><td rowspan="2" class="small muted">${u.model || ""}</td></tr>`,
           html`<tr key=${u.op + "f"}><td><span class="tag blocked">failed</span></td><td>${u.failed}</td><td>${u.in_failed.toLocaleString()}</td><td>${u.out_failed.toLocaleString()}</td></tr>`,
         ])}
         <tr><td><b>total</b></td><td></td><td>${usage.by_op.reduce((n, u) => n + u.attempts, 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></tr>
         <tr><td colspan="2"><b>of which wasted on failures</b></td><td>${usage.by_op.reduce((n, u) => n + u.failed, 0)}</td><td>${usage.by_op.reduce((n, u) => n + u.in_failed, 0).toLocaleString()}</td><td>${usage.by_op.reduce((n, u) => n + u.out_failed, 0).toLocaleString()}</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"}. "Failed" is a reply that came back but did not pass the gate. ${usage.unrecorded ? `${usage.unrecorded} call${usage.unrecorded === 1 ? "" : "s"} never returned (a timeout or a dropped connection): no tokens recorded here, but the provider still billed the input.` : ""} Paste runs are not counted. Multiply by your provider's price per million tokens for the cost.</p>`
+      </tbody></table></div><p class="small muted">Counted from every run through your own provider or credits since ${usage.since ? new Date(usage.since).toLocaleDateString() : "the start"}. "Failed" is a reply that came back but did not pass the gate. ${usage.unrecorded ? `${usage.unrecorded} call${usage.unrecorded === 1 ? "" : "s"} never returned (a timeout or a dropped connection): no tokens recorded here, but the provider still billed the input.` : ""} Paste runs are not counted. 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>
@@ -129,9 +129,9 @@ export function Settings({ live }) {
     <h2>House rules</h2>
     <div class="card">
       <p class="small muted">Style rules only. Integrity rules (provenance, metrics, tenure, verbs, history) have no switch.</p>
-      <table class="cats"><thead><tr><th>rule</th>${KINDS.map((k) => html`<th key=${k}>${k}</th>`)}</tr></thead><tbody>
+      <div class="tablewrap"><table class="cats"><thead><tr><th>rule</th>${KINDS.map((k) => html`<th key=${k}>${k}</th>`)}</tr></thead><tbody>
         ${["no_dashes", "style_config"].map((rule) => html`<tr key=${rule}><td>${rule}</td>${KINDS.map((k) => html`<td key=${k}><select onChange=${(e) => setSev(rule, k, e.target.value)}>${["block", "warn", "off"].map((sev) => html`<option key=${sev} value=${sev} selected=${(h[rule][k] || "warn") === sev}>${sev}</option>`)}</select></td>`)}</tr>`)}
-      </tbody></table>
+      </tbody></table></div>
       <form class="inline" onSubmit=${(e) => { e.preventDefault(); const v = e.target.elements.allow.value.trim(); if (v) hr({ hyphen_allow: [...h.hyphen_allow, v] }); e.target.reset(); }}>
         <span>allowed hyphen compounds: ${h.hyphen_allow.map((a) => html`<span class="tag" key=${a}>${a} <a href="#/settings" onClick=${(e) => { e.preventDefault(); hr({ hyphen_allow: h.hyphen_allow.filter((x) => x !== a) }); }}>×</a></span> `)}</span>
         <input name="allow" placeholder="cross-functional" /><button>allow</button></form>

package/ui/screens/welcome.js

@@ -1,6 +1,6 @@
 import { html, useState, useEffect } from "../vendor/preact.mjs";
 import { api, cleanPosting, guessPosting } from "../lib.js";
-import { Onboarding, DraftForm, fromDraft, Positions, ContactForm } from "./kb.js";
+import { Onboarding, DraftForm, fromDraft, Positions, ContactForm, AnswerBox } from "./kb.js";
 import { PacketModal } from "./packet.js";
 
 /**
@@ -10,6 +10,9 @@ import { PacketModal } from "./packet.js";
  * step flips when the store says so; "skip for now" opens the app anyway.
  */
 
+/** While the wizard shows its final result, the app's gate waits for "Open the app". */
+export const wizardHold = { on: false };
+
 const KIND_LABEL = { anthropic: "Anthropic (Claude)", openai_compatible: "OpenAI, or any OpenAI-compatible server", gemini: "Google Gemini" };
 
 function StepAi({ s, reload, hosted }) {
@@ -58,12 +61,31 @@ function StepAi({ s, reload, hosted }) {
   </div>`;
 }
 
-function StepPosting({ reload }) {
+/** Hosted only: the included AI runs on credits, so the first step is having some. */
+function StepCredits({ reload, setErr }) {
+  const [bal, setBal] = useState(null);
+  const [busy, setBusy] = useState("");
+  const check = async () => { setBusy("check"); try { setErr(""); const r = await api.get("/api/credits/balance"); setBal(r); await reload(); } catch (e) { setErr(e.message); } setBusy(""); };
+  useEffect(() => { check(); }, []);
+  const buy = async (pack) => { setBusy(pack); try { setErr(""); const r = await api.post("/api/credits/checkout", { pack }); location.href = r.url; } catch (e) { setErr(e.message); setBusy(""); } };
+  return html`<div>
+    <p>Reading your resumes, asking what is missing, and every document you make run on the included AI and cost credits: a few per resume read, a few per document. Buy a pack once; nothing recurs and credits never expire. Stripe takes the card; GAF-J never sees it.</p>
+    <div class="ai-options">
+      ${[["starter", "Starter", "25 credits", "$9", "enough to read your resumes and make a few documents"], ["campaign", "Campaign", "100 credits", "$29", "a full search: many postings, resumes, and prep"], ["season", "Season", "300 credits", "$69", "a long search, or a career change with many versions"]].map(([k, name, n, price, why]) => html`<button key=${k} disabled=${!!busy} onClick=${() => buy(k)}><b>${name}: ${n}, ${price}</b><span class="small muted">${why}</span></button>`)}
+    </div>
+    <div class="row" style="margin-top:12px"><span class="small">${bal ? html`<b>${bal.available} credits available</b>` : busy === "check" ? "checking" : "balance unknown"}</span><button class="small" disabled=${!!busy} onClick=${check}>check again</button>
+      <span class="small muted">Prefer to use a chat you already pay for? Settings, AI route, Paste; then this step can be skipped.</span></div>
+  </div>`;
+}
+
+function StepPosting({ reload, direct, onResult }) {
   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 [busy, setBusy] = useState(false);
+  const [result, setResult] = useState(null);
   const onPaste = (raw) => {
     const t = cleanPosting(raw);
     setText(t);
@@ -73,13 +95,30 @@ function StepPosting({ reload }) {
   };
   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); }
+    setBusy(true);
+    try {
+      const r = await api.post("/api/postings", { company, title, raw_text: text });
+      await api.post(`/api/postings/${r.posting_id}/scan`, {});
+      let note = "";
+      if (direct) { setBusy("ai"); try { const c = await api.post(`/api/run/categories?posting_id=${encodeURIComponent(r.posting_id)}`, {}); if (c.status !== "passed") note = "your AI's categories were refused (" + (c.errors || []).slice(0, 1).join("") + "); the local scan's draft is scored instead"; } catch (e3) { note = "your AI could not propose categories (" + e3.message + "); the local scan's draft is scored instead"; } }
+      setBusy("score");
+      if (onResult) onResult();
+      try { const f = await api.post(`/api/postings/${r.posting_id}/freeze`, {}); setResult({ ...f, posting_id: r.posting_id, note }); } catch (e4) { setResult({ posting_id: r.posting_id, note: (note ? note + ". " : "") + "Not scored yet: " + e4.message }); }
+      await reload();
+    } catch (e2) { setErr(e2.message); }
+    setBusy(false);
   };
+  if (result) return html`<div>
+    ${result.fit_score != null ? html`<p><b>Fit ${result.fit_score} of 10 · ${String(result.verdict).toUpperCase()}</b> <span class="muted small">${result.verdict_reason}</span></p>
+      <ul class="list">${(result.categories || []).map((c, i) => html`<li key=${i}><span class="mono small">weight ${c.weight} · score ${c.score}</span> ${c.category} ${c.is_hard_gate ? html`<span class="tag warn">must have</span>` : ""}</li>`)}</ul>` : ""}
+    ${result.note ? html`<p class="small error">${result.note}</p>` : ""}
+    <p class="small muted">Weight is how much the employer stressed it; score is how well your confirmed records meet it. Open <a href=${"#/postings/" + result.posting_id}>the posting</a> to edit either and re-score, or to log an application and make the resume.</p>
+  </div>`;
   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>
+    <div class="row wide"><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" disabled=${!!busy}>${busy === "ai" ? "asking your AI what the employer wants" : busy === "score" ? "scoring your record against it" : busy ? "storing" : "Store and score"}</button>${err ? html`<span class="error small">${err}</span>` : ""}</div>
   </form>`;
 }
 
@@ -93,20 +132,33 @@ export function Welcome({ live, onDone }) {
   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));
+  const hold = () => { wizardHold.on = true; };
+  const release = () => { wizardHold.on = false; onDone(); };
+  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 && !wizardHold.on) 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;
+  // with every step done there is no next; the last step stays on screen with its result
+  const last = setup.steps.length - 1;
+  const nextIdx = setup.next ? setup.steps.findIndex((x) => x.key === setup.next) : setup.steps.length;
+  const idx = view !== null && view <= Math.min(nextIdx, last) ? view : Math.min(nextIdx, last);
+  // when the step on screen completes (an extraction lands, a record is confirmed), stay on it so the result is
+  // readable; Continue moves on. The pin is by step key, so a reload does not lose it.
+  const [pinned, setPinned] = useState(null);
+  const pinnedIdx = pinned ? setup.steps.findIndex((x) => x.key === pinned) : -1;
+  const stay = view === null && pinnedIdx >= 0 && pinnedIdx < nextIdx && setup.steps[pinnedIdx].done && setup.steps[pinnedIdx].key !== "ai" && setup.steps[pinnedIdx].key !== "credits";
+  const at = stay ? pinnedIdx : idx;
+  const shown = setup.steps[at];
+  useEffect(() => { if (shown && !shown.done) setPinned(shown.key); }, [shown && !shown.done ? shown.key : null]);
+  const step = setup.steps[at].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} hosted=${!!me.hosted} />`,
+    credits: html`<${StepCredits} reload=${load} setErr=${setErr} />`,
     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>`,
     positions: html`<div><p>Before the records: the jobs, schools, volunteer roles, awards, and certifications themselves, each once. Your AI quoted them from your resumes. Fix a name, add a city, correct a date, then confirm. Every record under a job follows it.</p>
@@ -121,17 +173,19 @@ export function Welcome({ live, onDone }) {
       ${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>`
+        <${AnswerBox} q=${q} onSubmit=${(draft) => post(`/api/kb/questions/${q.question_id}/answer`, { draft })} onSkip=${() => post(`/api/kb/questions/${q.question_id}/dismiss`, {})} /></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} />`,
+    posting: html`<${StepPosting} reload=${load} direct=${direct} onResult=${hold} />`,
   };
   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">Seven 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>
+    <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">${["", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight"][setup.steps.length] || setup.steps.length} 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", {}); release(); }}>skip for now</a></span></div>
+    <div class="stepper-compact"><span>Step ${at + 1} of ${setup.steps.length}</span><span class="bar"><span style=${`width:${Math.round((setup.steps.filter((x) => x.done).length / setup.steps.length) * 100)}%`}></span></span></div>
+    <ol class="stepper">${setup.steps.map((st, i) => html`<li key=${st.key} class=${(st.done ? "done" : "") + (i === at ? " 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>
+    <div class="card welcome-body">
+      <div class="row between welcome-nav"><h3>${at + 1}. ${setup.steps[at].title}</h3><div class="row">${at > 0 ? html`<button class="small" onClick=${() => setView(at - 1)}>← Back</button>` : ""}${setup.complete && at === last ? html`<button class="primary small" onClick=${release}>Open the app →</button>` : at < nextIdx ? html`<button class=${stay ? "primary small" : "small"} onClick=${() => { setPinned(null); setView(null); }}>Continue →</button>` : ""}</div></div>
+      ${body[step]}</div>
     ${modal === "discover" ? html`<${PacketModal} op="discover" label="Discovery questions" target=${{}} onClose=${() => setModal(null)} onSaved=${load} />` : ""}
   </div>`;
 }