@gafj/gafj 0.1.1

package/ui/screens/document.js

@@ -0,0 +1,64 @@
+import { html, useState, useEffect } from "../vendor/preact.mjs";
+import { api, fmtWhen } from "../lib.js";
+
+const label = (k) => k.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^\w/, (c) => c.toUpperCase());
+const txt = (v) => (v && typeof v === "object" && "text" in v ? v.text : v);
+
+function Generic({ c }) {
+  return html`${Object.entries(c).map(([k, v]) => {
+    if (v == null || v === "" || (Array.isArray(v) && !v.length)) return "";
+    if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") return html`<p key=${k}><b>${label(k)}:</b> ${String(v)}</p>`;
+    if (v && typeof v === "object" && "text" in v && "claims" in v) return html`<p key=${k}><b>${label(k)}:</b> ${v.text}</p>`;
+    if (Array.isArray(v)) return html`<div key=${k}><h2>${label(k)}</h2>${typeof v[0] === "string" ? html`<ul>${v.map((x, i) => html`<li key=${i}>${x}</li>`)}</ul>`
+      : v[0] && "text" in v[0] && "claims" in v[0] ? html`<ul>${v.map((x, i) => html`<li key=${i}>${x.text}</li>`)}</ul>`
+      : html`<ol>${v.map((x, i) => html`<li key=${i}>${Object.entries(x).map(([kk, vv]) => vv == null || vv === "" ? "" : html`<div key=${kk}><b>${label(kk)}:</b> ${typeof vv === "object" && !Array.isArray(vv) ? txt(vv) : Array.isArray(vv) ? vv.map(txt).join("; ") : String(vv)}</div>`)}</li>`)}</ol>`}</div>`;
+    if (typeof v === "object") return html`<div key=${k}><h2>${label(k)}</h2><${Generic} c=${v} /></div>`;
+    return "";
+  })}`;
+}
+
+function OnePager({ c, header }) {
+  return html`<div>
+    <p><b>${c.posture}</b>${c.hard_stop ? html` · <span class="error">${c.hard_stop}</span>` : ""}</p>
+    <h2>Stories</h2><ul>${c.stories.map((s, i) => html`<li key=${i}><span class="lead">${s.lead}:</span> ${s.line.text}</li>`)}</ul>
+    <h2>Amber gaps</h2><ul>${c.amber_gaps.map((g, i) => html`<li key=${i}>${g.text}</li>`)}</ul>
+    <h2>Answer keys</h2><ul>${c.answer_keys.map((k, i) => html`<li key=${i}><b>${k.trigger}</b>: ${k.key}</li>`)}</ul>
+    <h2>Questions to ask</h2><ol>${c.questions.map((q, i) => html`<li key=${i}>${q}</li>`)}</ol>
+    <h2>Do nots</h2><ul>${c.do_nots.map((q, i) => html`<li key=${i}>${q}</li>`)}</ul>
+    ${c.technical_page && Object.keys(c.technical_page).length ? html`<div class="pagebreak"><h2>Technical page</h2><${Generic} c=${c.technical_page} /></div>` : ""}
+  </div>`;
+}
+
+function Resume({ c }) {
+  return html`<div>
+    <h1>${c.headline}</h1><p>${(c.specialties || []).join(" · ")}</p>${c.headerLinks && c.headerLinks.length ? html`<p class="small">${c.headerLinks.join(" | ")}</p>` : ""}
+    <h2>Career Highlights</h2><ul>${c.careerHighlights.map((h, i) => html`<li key=${i}><b>${h.leadIn}</b> ${h.proof.text}</li>`)}</ul>
+    <h2>${c.experienceSectionTitle || "Experience"}</h2>
+    ${c.experience.map((e, i) => html`<div key=${i}><p><b>${e.role}</b>, ${e.company} <span class="muted">${e.dates}</span>${e.section === "concurrent" ? html` <span class="tag">concurrent</span>` : ""}</p>${e.scope ? html`<p><i>${e.scope}</i></p>` : ""}<ul>${(e.bullets || []).map((b, j) => html`<li key=${j}>${b.text.text}</li>`)}</ul></div>`)}
+    ${c.skills && c.skills.length ? html`<h2>Skills</h2><p>${c.skills.join(" · ")}</p>` : ""}
+  </div>`;
+}
+
+export function Document({ id, live }) {
+  const [d, setD] = useState(null);
+  const [err, setErr] = useState("");
+  const [msg, setMsg] = useState("");
+  useEffect(() => { api.get(`/api/documents/${id}`).then(setD).catch((e) => setErr(e.message)); }, [id, live]);
+  if (err) return html`<p class="error">${err}</p>`;
+  if (!d) return html`<p class="muted">loading</p>`;
+  const h = d.header || {};
+  const back = d.interview_id ? "#/interviews/" + d.interview_id : d.application_id ? "#/applications/" + d.application_id : "#/applications";
+  const exportMd = async () => { try { const r = await api.post(`/api/documents/${id}/export`, { format: "md" }); setMsg("written: " + r.file); } catch (e) { setMsg(e.message); } };
+  return html`<div>
+    <div class="row between noprint"><div><a href=${back}>← back</a> <span class=${"tag " + d.status}>${d.status.toUpperCase()}</span> <span class="muted small">${d.kind} · ${d.route}</span></div>
+      <div class="row"><button onClick=${() => print()}>Print</button>${d.status === "passed" ? html`<button onClick=${exportMd}>Export Markdown</button>` : ""}</div></div>
+    ${msg ? html`<p class="small mono noprint">${msg}</p>` : ""}
+    ${d.blocks.length ? html`<div class="card noprint"><b class="error">Blocked</b><ul>${d.blocks.map((b, i) => html`<li key=${i}><b>${b.rule}</b> <span class="mono">${b.path}</span> "${b.span}" ${b.hint}</li>`)}</ul></div>` : ""}
+    ${d.warnings.length ? html`<details class="noprint"><summary>${d.warnings.length} warnings</summary><ul>${d.warnings.map((w, i) => html`<li key=${i}><b>${w.rule}</b> <span class="mono">${w.path}</span> "${w.span}" ${w.hint}</li>`)}</ul></details>` : ""}
+    <div class=${"doc " + d.kind}>
+      ${d.kind !== "resume" ? html`<div class="row between"><div><b>${h.company || ""}</b>${h.title ? " · " + h.title : ""}</div><div class="small">${h.round_label ? `${h.round_label} ${h.format} · ${fmtWhen(h.scheduled_at, h.tz)}` : ""}</div></div>
+        ${h.people && h.people.length ? html`<p class="small">${h.people.map((p) => p.title ? `${p.name} (${p.title})` : p.name).join(", ")}</p>` : ""}` : ""}
+      ${d.kind === "onepager" ? html`<${OnePager} c=${d.content} header=${h} />` : d.kind === "resume" ? html`<${Resume} c=${d.content} />` : d.kind === "email" ? html`<div><p><b>Subject:</b> ${d.content.subject}</p><p style="white-space:pre-wrap">${d.content.body.text}</p></div>` : html`<${Generic} c=${d.content} />`}
+    </div>
+  </div>`;
+}

package/ui/screens/interview.js

@@ -0,0 +1,85 @@
+import { html, useState, useEffect } from "../vendor/preact.mjs";
+import { api, fmtWhen, OPS, toIso, localZone } from "../lib.js";
+import { PacketModal } from "./packet.js";
+
+function Person({ p }) {
+  return html`<li><b>${p.name}</b> <span class="muted">${[p.title, p.org].filter(Boolean).join(", ")}</span>
+    ${p.intel_text ? html`<details><summary>intel</summary><div class="intel">${p.intel_text}</div></details>` : html`<span class="muted small">no intel yet</span>`}</li>`;
+}
+
+export function Interview({ id, live }) {
+  const [d, setD] = useState(null);
+  const [err, setErr] = useState("");
+  const [modal, setModal] = useState(null);
+  const [debrief, setDebrief] = useState("");
+  const [pinQ, setPinQ] = useState("");
+  const [pinHits, setPinHits] = useState([]);
+  const [resched, setResched] = useState(null);
+  const [personName, setPersonName] = useState("");
+  const load = () => api.get(`/api/interviews/${id}`).then((x) => { setD(x); setErr(""); }).catch((e) => setErr(e.message));
+  useEffect(() => { load(); }, [id, live]);
+  const post = async (path, body) => { try { await api.post(path, body); await load(); } catch (e) { setErr(e.message + (e.allowed ? " (allowed: " + e.allowed.join(", ") + ")" : "")); } };
+  if (err && !d) return html`<p class="error">${err}</p>`;
+  if (!d) return html`<p class="muted">loading</p>`;
+  const searchPins = async () => setPinHits(await api.get(`/api/accomplishments?q=${encodeURIComponent(pinQ)}&limit=8`));
+  const pin = (rid) => post(`/api/interviews/${id}/pins`, { ids: [...d.pinned_ids.filter((x) => x !== rid), rid] });
+  const unpin = (rid) => post(`/api/interviews/${id}/pins`, { ids: d.pinned_ids.filter((x) => x !== rid) });
+  const target = { interview_id: id, name: `${d.company} ${d.round_label}` };
+  const docsByKind = {};
+  for (const doc of d.documents) (docsByKind[doc.kind] = docsByKind[doc.kind] || []).push(doc);
+  return html`<div>
+    <div class="sub"><a href=${"#/applications/" + d.application_id}>${d.company}: ${d.title}</a></div>
+    <h1>${d.company} · ${d.round_label} · ${fmtWhen(d.scheduled_at, d.tz)} · ${d.format} <span class="tag">${d.status}</span></h1>
+    ${err ? html`<p class="error">${err}</p>` : ""}
+    <div class="grid2">
+      <div>
+        <h2>People</h2>
+        <div class="card"><ul class="list">${d.people.map((p) => html`<${Person} key=${p.person_id} p=${p} />`)}${d.people.length ? "" : html`<li class="muted">no one attached yet</li>`}</ul>
+          <form class="inline noprint" onSubmit=${(e) => { e.preventDefault(); if (personName.trim()) { post(`/api/interviews/${id}/people`, { name: personName.trim() }); setPersonName(""); } }}>
+            <input placeholder="add a person (first name is fine)" value=${personName} onInput=${(e) => setPersonName(e.target.value)} /><button>add</button></form></div>
+        <h2>Prior rounds</h2>
+        <div class="card">${d.prior_rounds.length ? d.prior_rounds.map((r) => html`<div key=${r.interview_id}><a href=${"#/interviews/" + r.interview_id}>${r.round_label} ${r.format}</a> <span class="muted">${fmtWhen(r.scheduled_at, r.tz)}</span> <span class="tag">${r.status}${r.outcome !== "pending" ? ", " + r.outcome : ""}</span>
+          ${r.debrief_text ? html`<details><summary>debrief</summary><div class="intel">${r.debrief_text}</div></details>` : html`<span class="muted small"> no debrief</span>`}</div>`) : html`<span class="muted">first round</span>`}</div>
+        <h2>Pinned</h2>
+        <div class="card"><ul class="list">${d.pinned.map((p) => html`<li key=${p.id}><span class="tag pin">${p.id}</span> ${p.company}: ${p.title} <button class="small noprint" onClick=${() => unpin(p.id)}>unpin</button></li>`)}${d.pinned.length ? "" : html`<li class="muted">nothing pinned; pinned records go first in every packet</li>`}</ul>
+          <form class="inline noprint" onSubmit=${(e) => { e.preventDefault(); searchPins(); }}><input placeholder="search the knowledge base" value=${pinQ} onInput=${(e) => setPinQ(e.target.value)} /><button>search</button></form>
+          ${pinHits.length ? html`<ul class="list">${pinHits.map((r) => html`<li key=${r.id}><span class="mono">${r.id}</span> ${r.company}: ${r.title} <button class="small" onClick=${() => pin(r.id)}>pin</button></li>`)}</ul>` : ""}</div>
+      </div>
+      <div>
+        <h2>Build</h2>
+        <div class="card noprint">
+          <div class="row">${OPS.map((o) => html`<button key=${o.op} onClick=${() => setModal({ op: o.op, label: o.label })}>${o.label}</button>`)}</div>
+          <p class="small muted">via: paste (default). With Claude Desktop connected, ask: "Prep me for my ${d.company} ${d.round_label}"; it calls get_prep_packet and save_document itself and this screen updates.</p>
+        </div>
+        <h2>Documents</h2>
+        <div class="card"><ul class="list">${d.documents.map((doc) => html`<li key=${doc.document_id}>
+          <a href=${"#/documents/" + doc.document_id}>${doc.kind}</a> <span class=${"tag " + doc.status}>${doc.status.toUpperCase()}</span>
+          ${doc.warnings.length ? html`<span class="tag warn">${doc.warnings.length} warning${doc.warnings.length > 1 ? "s" : ""}</span>` : ""}
+          ${doc.status === "blocked" ? html`<span class="small error">${doc.blocks[0] ? doc.blocks[0].rule + " " + (doc.blocks[0].path || "") : ""}</span> <button class="small noprint" onClick=${async () => setModal({ op: doc.kind === "email" ? "followup" : doc.kind, label: "Repair " + doc.kind, doc: await api.get(`/api/documents/${doc.document_id}`) })}>repair</button>` : ""}
+          ${doc.status === "passed" ? html`<button class="small noprint" onClick=${() => post(doc.kind === "practice" ? `/api/documents/${doc.document_id}/workbook` : `/api/documents/${doc.document_id}/export`, { format: "md" })}>${doc.kind === "practice" ? "workbook" : "export"}</button>` : ""}
+          ${doc.rendered_rel_path ? html`<span class="small mono muted">${doc.rendered_rel_path}</span>` : ""}
+          <span class="small muted">${doc.route} ${doc.created_at.slice(0, 16).replace("T", " ")}</span></li>`)}
+          ${d.documents.length ? "" : html`<li class="muted">nothing built yet</li>`}</ul></div>
+        <h2>After</h2>
+        <div class="card noprint">
+          ${d.status === "scheduled" ? html`<div class="row">
+            <button class="primary" onClick=${() => post(`/api/interviews/${id}/complete`, {})}>Mark completed</button>
+            ${!d.invite_received_at ? html`<button onClick=${() => post(`/api/interviews/${id}/invite-received`, {})}>Invite received</button>` : html`<span class="tag">invite received</span>`}
+            <button onClick=${() => setResched(resched ? null : { at: "", tz: d.tz || localZone() })}>Reschedule</button>
+            <button class="danger" onClick=${() => { if (confirm("Cancel this interview?")) post(`/api/interviews/${id}/cancel`, {}); }}>Cancel</button></div>
+            ${resched ? html`<form class="inline" onSubmit=${(e) => { e.preventDefault(); post(`/api/interviews/${id}/reschedule`, { scheduled_at: toIso(resched.at, resched.tz), tz: resched.tz }); setResched(null); }}>
+              <input type="datetime-local" required value=${resched.at} onInput=${(e) => setResched({ ...resched, at: e.target.value })} /><input value=${resched.tz} onInput=${(e) => setResched({ ...resched, tz: e.target.value })} /><button class="primary">save</button></form>` : ""}` : ""}
+          ${d.status === "completed" ? html`<div>
+            <div class="row">outcome: ${["advanced", "rejected", "ghosted"].map((o) => html`<button key=${o} class=${d.outcome === o ? "primary" : ""} onClick=${() => post(`/api/interviews/${id}/outcome`, { outcome: o })}>${o}</button>`)}</div>
+            <h3>Debrief</h3>
+            ${d.debrief_text ? html`<div class="intel">${d.debrief_text}</div><p class="small muted">captured ${d.debrief_captured_at}</p>` : ""}
+            <textarea placeholder="What happened, who said what, in their words where you can. Quotes in a thank-you must come from here." value=${debrief} onInput=${(e) => setDebrief(e.target.value)}></textarea>
+            <div class="row"><button class="primary" disabled=${!debrief.trim()} onClick=${() => { post(`/api/interviews/${id}/debrief`, { text: debrief }); setDebrief(""); }}>${d.debrief_text ? "Replace debrief" : "Save debrief"}</button></div>
+          </div>` : ""}
+          ${d.status === "cancelled" || d.status === "superseded" ? html`<span class="muted">${d.status}</span>` : ""}
+        </div>
+      </div>
+    </div>
+    ${modal ? html`<${PacketModal} op=${modal.op} label=${modal.label} target=${target} document=${modal.doc} onClose=${() => setModal(null)} onSaved=${() => load()} />` : ""}
+  </div>`;
+}

package/ui/screens/kb.js

@@ -0,0 +1,142 @@
+import { html, useState, useEffect } from "../vendor/preact.mjs";
+import { api } from "../lib.js";
+import { PacketModal } from "./packet.js";
+
+function readFileBase64(file) {
+  return new Promise((resolve, reject) => { const r = new FileReader(); r.onload = () => resolve(String(r.result).split(",")[1]); r.onerror = reject; r.readAsDataURL(file); });
+}
+
+/** Onboarding: upload resumes, build extraction packets, decide duplicate groups. */
+function Onboarding({ d, reload, setErr }) {
+  const [modal, setModal] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const [style, setStyle] = useState(null);
+  const b = d.batch;
+  const upload = async (e) => {
+    setBusy(true);
+    try {
+      for (const f of e.target.files) {
+        const r = await api.post("/api/sources", { batch_id: b ? b.batch_id : undefined, filename: f.name, data_base64: await readFileBase64(f) });
+        if (r.empty) setErr(`${f.name}: ${r.failure}`);
+      }
+      await reload();
+    } catch (e2) { setErr(e2.message); }
+    setBusy(false);
+    e.target.value = "";
+  };
+  const post = async (path, body) => { try { await api.post(path, body || {}); await reload(); } catch (e) { setErr(e.message); } };
+  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>
+    ${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>`)}
+      ${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>
+    ${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>`;
+}
+
+function Excerpt({ text, span }) {
+  if (!span || !text) return "";
+  const a = Math.max(0, span.start - 60), b = Math.min(text.length, span.end + 60);
+  return html`<span class="small muted">…${text.slice(a, span.start)}<mark>${text.slice(span.start, span.end)}</mark>${text.slice(span.end, b)}…</span>`;
+}
+
+/** Screen 5: gaps to answer, pending rows to confirm, imported dimensions to review, confirmed records to search. */
+
+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 || "" });
+
+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)); }}>
+    <div class="row"><input required placeholder="title (what you did, with the figure)" value=${f.title} onInput=${up("title")} /></div>
+    <div class="row"><input required placeholder="company" value=${f.company} onInput=${up("company")} /><input required placeholder="role" value=${f.role} onInput=${up("role")} /><input placeholder="dates, e.g. 2019-03 to 2021-08" value=${f.dates} onInput=${up("dates")} /></div>
+    <textarea placeholder="summary in your words" value=${f.summary} onInput=${up("summary")}></textarea>
+    <div class="row"><input placeholder="metrics, comma separated: 18%, $430,000" value=${f.metrics} onInput=${up("metrics")} /><input placeholder="verbs you own: led, built" value=${f.verbs} onInput=${up("verbs")} /></div>
+    <textarea placeholder="resume wordings, one per line" value=${f.wordings} onInput=${up("wordings")}></textarea>
+    <div class="row"><input placeholder="tenure phrase you will stand behind, e.g. 7+ years in fulfillment (optional)" value=${f.tenure} onInput=${up("tenure")} /></div>
+    <div class="row"><button class="primary">${label}</button></div>
+  </form>`;
+}
+
+export function KB({ live }) {
+  const [d, setD] = useState(null);
+  const [err, setErr] = useState("");
+  const [q, setQ] = useState("");
+  const [hits, setHits] = useState([]);
+  const [answering, setAnswering] = useState(null);
+  const [editing, setEditing] = useState(null);
+  const [adding, setAdding] = useState(false);
+  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 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); } };
+  if (err && !d) return html`<p class="error">${err}</p>`;
+  if (!d) return html`<p class="muted">loading</p>`;
+  const byRecord = {};
+  for (const r of d.review) (byRecord[r.id] = byRecord[r.id] || { id: r.id, title: r.title, company: r.company, items: [] }).items.push(r);
+  return html`<div>
+    <h1>Knowledge base</h1>
+    <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} />` : ""}
+    <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>
+        <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>`)}
+      ${(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>
+    <div class="card"><p class="small muted">A record with no confirmed figure, or an ownership verb with no scope. An answer extends that record; nothing is stored until you confirm it under Pending.</p><ul class="list">${(d.holes || []).map((h) => html`<li key=${h.hole_id}><div><b>?</b> <b>${h.title}</b> <span class="muted">${h.company}, ${h.role}</span><br />${h.question}
+      ${answering === h.hole_id ? html`<${DraftForm} label="Add answer as pending" initial=${fromDraft(h.draft)} onSubmit=${(draft) => { post("/api/kb/pending", { draft: { ...draft, replaces: h.draft.replaces } }); setAnswering(null); }} />` : html`<button class="small" onClick=${() => setAnswering(h.hole_id)}>Answer</button>`}</div></li>`)}
+      ${(d.holes || []).length ? "" : html`<li class="muted">no holes: every record carries a confirmed figure and every ownership claim a scope</li>`}</ul></div>
+    <h2>Pending (written, not yet confirmed)</h2>
+    <div class="card"><ul class="list">${d.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> <span class="tag">${p.source}</span>${p.draft.replaces ? html` <span class="tag">extends an existing record</span>` : ""}
+      <div class="small muted">metrics: ${(p.draft.metrics || []).join(", ") || "none"} · verbs: ${(p.draft.verbs || []).join(", ") || "none"}${p.draft.dates ? " · " + p.draft.dates : ""}</div>
+      ${p.source === "onboarding" && p.draft.excerpts ? html`<details onToggle=${(e) => { if (e.target.open) showSource(p.draft.source_document_id); }}><summary>source excerpts</summary>
+        ${texts[p.draft.source_document_id] ? html`<ul class="list small">
+          <li>company <${Excerpt} text=${texts[p.draft.source_document_id]} span=${p.draft.excerpts.company} /></li>
+          <li>role <${Excerpt} text=${texts[p.draft.source_document_id]} span=${p.draft.excerpts.role} /></li>
+          ${p.draft.excerpts.dates ? html`<li>dates <${Excerpt} text=${texts[p.draft.source_document_id]} span=${p.draft.excerpts.dates} /></li>` : ""}
+          ${(p.draft.metrics || []).map((m, i) => html`<li key=${"m" + i}>metric ${m} <${Excerpt} text=${texts[p.draft.source_document_id]} span=${p.draft.excerpts.metrics[i]} /></li>`)}
+          ${(p.draft.verbs || []).map((v, i) => html`<li key=${"v" + i}>verb ${v} <${Excerpt} text=${texts[p.draft.source_document_id]} span=${p.draft.excerpts.verbs[i]} /></li>`)}
+          ${(p.draft.wordings || []).map((w, i) => html`<li key=${"w" + i}>wording <${Excerpt} text=${texts[p.draft.source_document_id]} span=${p.draft.excerpts.wordings[i]} /></li>`)}
+        </ul>` : html`<span class="muted small">loading</span>`}</details>` : ""}
+      ${editing === 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 }); setEditing(null); }} />`
+        : html`<div class="row"><button class="primary small" onClick=${() => post(`/api/kb/pending/${p.pending_id}/confirm`, {})}>Confirm</button><button class="small" onClick=${() => setEditing(p.pending_id)}>Edit</button><button class="small danger" onClick=${() => post(`/api/kb/pending/${p.pending_id}/dismiss`, {})}>Dismiss</button></div>`}</div></li>`)}
+      ${d.pending.length ? "" : html`<li class="muted">nothing pending</li>`}</ul>
+      ${adding ? html`<${DraftForm} label="Add as pending" onSubmit=${(draft) => { post("/api/kb/pending", { draft }); setAdding(false); }} />` : html`<button class="small" onClick=${() => setAdding(true)}>+ write one by hand</button>`}</div>
+    <h2>Review (imported, not yet evidence)</h2>
+    <div class="card">${Object.values(byRecord).slice(0, 40).map((r) => html`<div key=${r.id}><b>${r.company}</b> · ${r.title} <span class="mono small">${r.id}</span>
+      <ul class="list">${r.items.map((it, i) => html`<li key=${i}><span class="tag">${it.dimension}</span> ${it.value} <span class="muted small">${it.detail || ""}</span>
+        <button class="small" onClick=${() => post(`/api/kb/${r.id}/review`, { dimension: it.dimension, value: it.value, action: "confirm" })}>Confirm</button>
+        <button class="small danger" onClick=${() => post(`/api/kb/${r.id}/review`, { dimension: it.dimension, value: it.value, action: "drop" })}>Drop</button></li>`)}
+      <li><button class="small" onClick=${() => post(`/api/kb/${r.id}/review`, { dimension: "metric", value: "*", action: "confirm" })}>confirm all metrics</button> <button class="small" onClick=${() => post(`/api/kb/${r.id}/review`, { dimension: "verb", value: "*", action: "confirm" })}>confirm all verbs</button></li></ul></div>`)}
+      ${d.review.length ? "" : html`<span class="muted">everything imported is confirmed</span>`}${Object.keys(byRecord).length > 40 ? html`<p class="muted small">first 40 records shown</p>` : ""}</div>
+    <h2>Confirmed</h2>
+    <div class="card"><form class="inline" onSubmit=${async (e) => { e.preventDefault(); setHits(await api.get(`/api/accomplishments?q=${encodeURIComponent(q)}&limit=20`)); }}><input placeholder="search" value=${q} onInput=${(e) => setQ(e.target.value)} /><button>search</button></form>
+      <ul class="list">${hits.map((r) => html`<li key=${r.id}><div><span class="mono small">${r.id}</span> <b>${r.company}</b> · ${r.title}<div class="small muted">${r.metrics.map((m) => m.value).join(", ")}${r.verbs.length ? " · " + r.verbs.map((v) => v.verb).join(", ") : ""}</div></div></li>`)}</ul></div>
+  </div>`;
+}

package/ui/screens/packet.js

@@ -0,0 +1,122 @@
+import { html, useState, useEffect } from "../vendor/preact.mjs";
+import { api } from "../lib.js";
+
+/**
+ * Screen 7: the packet modal and the form-based repair editor. Blocks
+ * render as rows with the field, the offending span, and the nearest
+ * records; you pick or delete, then re-ingest as route manual. Raw JSON
+ * stays behind an advanced toggle. Nothing is ever auto-substituted.
+ */
+
+function parsePath(p) {
+  const s = String(p || "").replace(/^\$\.?/, "");
+  const out = [];
+  for (const m of s.matchAll(/([^.[\]]+)|\[(\d+)\]/g)) out.push(m[2] !== undefined ? Number(m[2]) : m[1]);
+  return out;
+}
+function getAt(obj, keys) { let v = obj; for (const k of keys) { if (v == null) return undefined; v = v[k]; } return v; }
+function setAt(obj, keys, val) {
+  const copy = JSON.parse(JSON.stringify(obj));
+  let v = copy;
+  for (let i = 0; i < keys.length - 1; i++) v = v[keys[i]];
+  v[keys[keys.length - 1]] = val;
+  return copy;
+}
+function deleteAt(obj, keys) {
+  const copy = JSON.parse(JSON.stringify(obj));
+  let v = copy;
+  for (let i = 0; i < keys.length - 1; i++) v = v[keys[i]];
+  const last = keys[keys.length - 1];
+  if (Array.isArray(v)) v.splice(last, 1); else delete v[last];
+  return copy;
+}
+function dropSentence(text, span) {
+  if (!span) return text;
+  const parts = String(text).split(/(?<=[.!?])\s+/);
+  const kept = parts.filter((s) => !s.includes(span));
+  return kept.length === parts.length ? text.split(span).join("") : kept.join(" ");
+}
+
+function BlockRow({ b, content, onChange, kind }) {
+  const keys = parsePath(b.path);
+  const isClaim = keys.includes("claims");
+  const textKeys = isClaim ? keys.slice(0, keys.indexOf("claims")).concat("text") : keys;
+  const value = getAt(content, textKeys);
+  const isText = typeof value === "string";
+  const claimKeys = isClaim ? keys : null;
+  const claim = claimKeys ? getAt(content, claimKeys) : null;
+  const warn = kind === "warn";
+  return html`<div>
+    <div class=${"term " + (warn ? "warn" : "blocked")}>
+      <div class="headline">> VALIDATE ${b.path || "$"} … ${warn ? "WARN" : "BLOCKED"}</div>
+      <div class="kv"><b>rule:</b> ${b.rule}<br />
+        ${b.span ? html`<b>span:</b> <span class="hl">"${b.span}"</span><br />` : ""}
+        <b>reason:</b> ${b.hint}</div>
+    </div>
+    ${isText && !warn ? html`<div class="block"><textarea value=${value} onInput=${(e) => onChange(setAt(content, textKeys, e.target.value))}></textarea>
+      <div class="row small"><button onClick=${() => onChange(setAt(content, textKeys, dropSentence(value, b.span)))}>delete sentence</button></div></div>` : ""}
+    ${claim ? html`<div class="nearby">claim ${JSON.stringify(claim)}
+      ${b.nearby && b.nearby.length ? html`<div>nearby (diagnostic only): ${b.nearby.map((n) => html`<button key=${n.id} onClick=${() => onChange(setAt(content, claimKeys.concat("source_id"), n.id))}>pick ${n.id}</button><span class="muted">${n.company}: ${n.title}</span> `)}</div>` : ""}
+      <button onClick=${() => onChange(deleteAt(content, claimKeys))}>delete claim</button></div>` : ""}
+  </div>`;
+}
+
+export function PacketModal({ op, label, target, document: doc, onClose, onSaved }) {
+  const [state, setState] = useState({ loading: !doc, packet: null, run_id: doc ? null : null, paste: "", error: "" });
+  const [reply, setReply] = useState("");
+  const [result, setResult] = useState(null);
+  const [content, setContent] = useState(doc ? doc.content : null);
+  const [docId, setDocId] = useState(doc ? doc.document_id : null);
+  const [raw, setRaw] = useState(false);
+  const [busy, setBusy] = useState(false);
+  useEffect(() => {
+    if (doc) { setResult({ status: doc.status, blocks: doc.blocks, warnings: doc.warnings, attempt: null }); return; }
+    const q = target.interview_id ? `?interview_id=${target.interview_id}` : target.source_document_id ? `?source_document_id=${target.source_document_id}` : target.posting_id ? `?posting_id=${target.posting_id}` : "";
+    api.get(`/api/packets/${op}${q}`).then((r) => setState({ loading: false, packet: r.packet, run_id: r.run_id, paste: r.paste_text, error: "" }))
+      .catch((e) => setState({ loading: false, packet: null, run_id: null, paste: "", error: e.message + (e.detail ? " " + JSON.stringify(e.detail) : "") }));
+  }, [op, doc]);
+  const copy = async () => { try { await navigator.clipboard.writeText(state.paste); } catch (_) { /* select manually */ } };
+  const apply = (r) => {
+    setResult(r);
+    if (r.document_id) { setDocId(r.document_id); if (r.status === "blocked") api.get(`/api/documents/${r.document_id}`).then((d) => setContent(d.content)); }
+    if (r.status === "passed" && onSaved) onSaved(r);
+  };
+  const validate = async () => {
+    setBusy(true);
+    try { apply(await api.post(`/api/runs/${state.run_id}/ingest`, { content: reply, route: "paste" })); } catch (e) { setResult({ status: "error", blocks: [{ rule: "request", path: "", span: "", hint: e.message }], warnings: [] }); }
+    setBusy(false);
+  };
+  const repair = async () => {
+    setBusy(true);
+    try { apply(await api.post(`/api/documents/${docId}/repair`, { content })); } catch (e) { setResult({ status: "error", blocks: [{ rule: "request", path: "", span: "", hint: e.message }], warnings: [] }); }
+    setBusy(false);
+  };
+  const blocked = result && result.status === "blocked" && result.blocks;
+  return html`<div class="modal-back" onClick=${(e) => { if (e.target === e.currentTarget) onClose(); }}><div class="modal">
+    <div class="row between"><h1>${label}${target && target.name && !label.includes(target.name) ? " · " + target.name : ""}</h1><button onClick=${onClose}>close</button></div>
+    ${state.error ? html`<p class="error">${state.error}</p>` : ""}
+    ${state.loading ? html`<p class="muted">building the packet</p>` : ""}
+    ${state.packet ? html`<div>
+      <div class="row"><button class="primary" onClick=${copy}>Copy all</button><span class="small muted">${state.packet.kb_slice.length} records, run ${state.run_id}. Paste into any chat. Ask for one JSON block back.</span></div>
+      <details><summary>show packet text</summary><textarea readonly value=${state.paste}></textarea></details>
+      <h3>Paste the AI's JSON (fences are fine)</h3>
+      <textarea value=${reply} onInput=${(e) => setReply(e.target.value)} placeholder='{"posture": ...}'></textarea>
+      <div class="row"><button class="primary" disabled=${busy || !reply.trim()} onClick=${validate}>Validate + save</button>
+        ${result && result.attempt ? html`<span class="attempt">attempt ${result.attempt} of 3${result.stop ? ", stopped: hand this to yourself, open a fresh packet" : ""}</span>` : ""}</div>
+    </div>` : ""}
+    ${result ? html`<div>
+      ${result.status === "passed" && result.document_id ? html`<div class="term passed"><div class="headline">> VALIDATE ${op} … PASSED${(result.warnings || []).length ? ` (${result.warnings.length} warning${result.warnings.length === 1 ? "" : "s"})` : ""}</div></div><p>Saved as <a href=${"#/documents/" + result.document_id} onClick=${onClose}>document</a>.</p>` : ""}
+      ${result.status === "error" ? html`<div class="term blocked"><div class="headline">> VALIDATE … ERROR</div><div class="kv">${result.blocks[0].hint}</div></div>` : ""}
+      ${result.errors && result.errors.length ? html`<div><div class="term blocked"><div class="headline">> VALIDATE … REJECTED (${result.errors.length} problem${result.errors.length === 1 ? "" : "s"})</div></div>${result.errors.map((e, i) => html`<div class="block" key=${i}><span class="mono small">${e}</span></div>`)}<p class="small muted">Fix the JSON in the chat and paste it again; every atom must be a verbatim excerpt at its span.</p></div>` : ""}
+      ${result.pending_ids && result.pending_ids.length ? html`<div class="term passed"><div class="headline">> VALIDATE … PASSED (${result.pending_ids.length} pending row${result.pending_ids.length === 1 ? "" : "s"} proposed)</div></div>` : ""}
+      ${result.question_ids && result.question_ids.length ? html`<div class="term passed"><div class="headline">> VALIDATE … PASSED (${result.question_ids.length} question${result.question_ids.length === 1 ? "" : "s"} to answer)</div>${result.notes ? html`<div class="kv">${result.notes}</div>` : ""}</div><p class="small muted">Close this and answer them under Discovery; each answer lands pending against its record.</p>` : ""}
+      ${blocked ? html`<div class="term blocked"><div class="headline">> VALIDATE ${op} … BLOCKED (${result.blocks.length} ${result.blocks.length === 1 ? "problem" : "problems"})</div></div>` : ""}
+      ${blocked && content ? result.blocks.map((b, i) => html`<${BlockRow} key=${i} b=${b} content=${content} onChange=${setContent} kind="block" />`) : ""}
+      ${blocked && !content ? result.blocks.map((b, i) => html`<${BlockRow} key=${i} b=${b} content=${{}} onChange=${() => {}} kind="block" />`) : ""}
+      ${result.warnings && result.warnings.length ? html`<details><summary>${result.warnings.length} warnings</summary>${result.warnings.map((w, i) => html`<${BlockRow} key=${i} b=${w} content=${content || {}} onChange=${setContent} kind="warn" />`)}</details>` : ""}
+      ${blocked && content ? html`<div class="row"><button class="primary" disabled=${busy} onClick=${repair}>Validate + save repaired</button>
+        <button onClick=${() => setRaw(!raw)}>advanced: raw JSON</button></div>
+        ${raw ? html`<textarea value=${JSON.stringify(content, null, 1)} onInput=${(e) => { try { setContent(JSON.parse(e.target.value)); } catch (_) { /* keep typing */ } }}></textarea>` : ""}` : ""}
+    </div>` : ""}
+  </div></div>`;
+}

package/ui/screens/postings.js

@@ -0,0 +1,92 @@
+import { html, useState, useEffect } from "../vendor/preact.mjs";
+import { api } from "../lib.js";
+
+/** Screen 2: paste a posting, store and scan locally, edit the proposed categories, freeze, log the application. */
+
+function CategoryEditor({ posting, scoring, onDone }) {
+  const [cats, setCats] = useState(scoring ? scoring.categories.map((c) => ({ category: c.category, weight: c.weight, jd_evidence: c.jd_evidence, is_hard_gate: !!c.is_hard_gate, score: c.score })) : []);
+  const [err, setErr] = useState("");
+  const [busy, setBusy] = useState(false);
+  const set = (i, patch) => setCats(cats.map((c, j) => (j === i ? { ...c, ...patch } : c)));
+  const freeze = async () => {
+    setBusy(true); setErr("");
+    try {
+      const scores = cats.filter((c) => c.score != null && c.score !== "").map((c) => ({ category: c.category, score: Number(c.score) }));
+      await api.post(`/api/postings/${posting.posting_id}/freeze`, { categories: cats.map(({ category, weight, jd_evidence, is_hard_gate }) => ({ category, weight: Number(weight), jd_evidence, is_hard_gate })), scores });
+      onDone();
+    } catch (e) { setErr(e.message); }
+    setBusy(false);
+  };
+  return html`<div>
+    <table class="cats"><thead><tr><th>category</th><th>wt</th><th>score</th><th>gate</th><th>evidence line (verbatim)</th><th></th></tr></thead><tbody>
+    ${cats.map((c, i) => html`<tr key=${i}>
+      <td><input value=${c.category} onInput=${(e) => set(i, { category: e.target.value })} /></td>
+      <td><input type="number" min="1" max="10" value=${c.weight} onInput=${(e) => set(i, { weight: e.target.value })} class="narrow" /></td>
+      <td><input type="number" min="0" max="10" step="0.5" value=${c.score ?? ""} placeholder="auto" onInput=${(e) => set(i, { score: e.target.value })} class="narrow" /></td>
+      <td><input type="checkbox" checked=${c.is_hard_gate} onChange=${(e) => set(i, { is_hard_gate: e.target.checked })} /></td>
+      <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>
+    ${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>`;
+}
+
+export function Postings({ live, id }) {
+  const [rows, setRows] = useState([]);
+  const [sel, setSel] = useState(null);
+  const [form, setForm] = useState({ company: "", title: "", source_url: "", location: "", comp_text: "", raw_text: "" });
+  const [err, setErr] = useState("");
+  const [msg, setMsg] = useState("");
+  const load = async () => { setRows(await api.get("/api/postings")); if (id) setSel(await api.get(`/api/postings/${id}`)); };
+  useEffect(() => { load().catch((e) => setErr(e.message)); }, [live, id]);
+  const store = async (e) => {
+    e.preventDefault(); setErr(""); setMsg("");
+    try {
+      const r = await api.post("/api/postings", form);
+      await api.post(`/api/postings/${r.posting_id}/scan`);
+      setForm({ company: "", title: "", source_url: "", location: "", comp_text: "", raw_text: "" });
+      location.hash = "#/postings/" + r.posting_id;
+      setMsg(r.created ? "stored and scanned" : "already stored; scanned again");
+    } catch (e2) { setErr(e2.message); }
+  };
+  const act = async (path, body) => { setErr(""); try { const r = await api.post(path, body || {}); await load(); return r; } catch (e) { setErr(e.message + (e.allowed ? " (allowed: " + e.allowed.join(", ") + ")" : "")); } };
+  const frozen = sel && sel.scoring.find((s) => s.status === "frozen");
+  const proposed = sel && sel.scoring.find((s) => s.status === "proposed");
+  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}>
+          <div class="row"><input required placeholder="company" value=${form.company} onInput=${(e) => setForm({ ...form, company: e.target.value })} /><input required placeholder="title" value=${form.title} onInput=${(e) => setForm({ ...form, title: e.target.value })} /></div>
+          <div class="row"><input placeholder="url" value=${form.source_url} onInput=${(e) => setForm({ ...form, source_url: e.target.value })} /><input placeholder="location" value=${form.location} onInput=${(e) => setForm({ ...form, location: e.target.value })} /><input placeholder="comp text" value=${form.comp_text} onInput=${(e) => setForm({ ...form, comp_text: e.target.value })} /></div>
+          <textarea required placeholder="raw posting text, stored verbatim, now" value=${form.raw_text} onInput=${(e) => setForm({ ...form, raw_text: e.target.value })}></textarea>
+          <div class="row"><button class="primary">Store + scan</button><span class="small muted">local, no model</span></div>
+        </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>
+          <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 onClick=${() => act(`/api/postings/${sel.posting_id}/scan`)}>Scan again</button></div>
+            <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>
+            <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>`}
+          ${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>
+  </div>`;
+}