@gafj/gafj 0.1.1

package/ui/app.css

@@ -0,0 +1,137 @@
+/* GAF-J visual system: ink rail + warm paper (light, default) and ink rail + graphite canvas (dark, by choice).
+   The rail is a brand constant — #14171c in both modes, never themed. Fonts are self-hosted
+   (ui/fonts/*.woff2, latin subset only) so the CSP's style-src/font-src 'self' never has to loosen. */
+
+@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/fonts/spacegrotesk-var.woff2") format("woff2"); }
+@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/plexmono-400.woff2") format("woff2"); }
+@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/plexmono-500.woff2") format("woff2"); }
+@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/plexmono-600.woff2") format("woff2"); }
+
+:root {
+  --sans: "Space Grotesk", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --rail: #14171c; --rail-active: #20242c; --rail-text: #e6e8ec; --rail-muted: #8b90a0; --rail-dim: #5b6070;
+
+  /* light (default) */
+  --canvas: #f6f4ef; --surface: #ffffff; --surface-2: #ffffff;
+  --line: #e3ddd0; --line-2: #d9d2c4;
+  --ink: #1c1f26; --muted: #6b7280; --dim: #8a8477;
+  --accent: #0e8f83; --accent-ink: #ffffff; --accent-hover: #0b746a;
+  --good: #1f9d5c; --good-bg: #dff3e6; --good-bright: #146942;
+  --warn: #b5750d; --warn-bg: #f5e6cc;
+  --bad: #c8392c; --bad-bg: #f6dedb; --bad-bright: #8f261c;
+  --pin: #7c4fd1; --pin-bg: #ece3fa;
+  --shadow: 0 20px 60px -35px #0003;
+}
+/* dark is a choice, never inferred from the OS */
+:root[data-theme="dark"] { --canvas: #0e1015; --surface: #15171d; --surface-2: #1b1e24;
+  --line: #262a33; --line-2: #333744; --ink: #e9ebf0; --muted: #8b90a0; --dim: #5b6070;
+  --accent: #3ecfc0; --accent-ink: #0e1015; --accent-hover: #6fe0d4;
+  --good: #34c77b; --good-bg: #234d3a; --good-bright: #7bf0ac;
+  --warn: #e0a634; --warn-bg: #4a3a1c;
+  --bad: #e0554a; --bad-bg: #4a2b28; --bad-bright: #ff9d94;
+  --pin: #a578e8; --pin-bg: #3a2f52; --shadow: 0 20px 60px -30px #000; }
+
+* { box-sizing: border-box; }
+html, body { margin: 0; background: var(--canvas); color: var(--ink); font: 14px/1.5 var(--sans); }
+a { color: var(--accent); text-decoration: none; transition: color .15s; }
+a:hover { color: var(--accent-hover); text-decoration: underline; }
+button, select, input, textarea { font: inherit; color: inherit; }
+button { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 7px 13px; cursor: pointer; font-size: 13px; transition: border-color .15s, opacity .15s; }
+button:hover { border-color: var(--accent); }
+button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
+button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
+button.danger { color: var(--bad); }
+button.small { padding: 5px 10px; font-size: 12px; }
+button:disabled { opacity: .5; cursor: default; }
+input, select, textarea { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 7px 9px; }
+textarea { width: 100%; min-height: 120px; font-family: var(--mono); font-size: 12px; }
+
+.layout { display: grid; grid-template-columns: 170px 1fr; min-height: 100vh; }
+.rail { background: var(--rail); color: var(--rail-text); padding: 22px 16px; display: flex; flex-direction: column; gap: 22px; }
+.rail .brand { font-family: var(--mono); font-weight: 600; font-size: 15px; letter-spacing: .02em; display: flex; align-items: center; justify-content: space-between; }
+.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.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; }
+.rail .foot .name { color: #c7cad2; }
+.rail .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--good); margin-right: 6px; }
+.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); }
+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; }
+.sub { color: var(--muted); margin-bottom: 8px; font-family: var(--mono); font-size: 12px; }
+.card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; }
+.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
+.row.between { justify-content: space-between; }
+.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+.list { list-style: none; margin: 0; padding: 0; }
+.list li { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
+.list li:last-child { border-bottom: 0; }
+.tag { display: inline-block; font-family: var(--mono); font-size: 10.5px; padding: 3px 10px; border-radius: 100px; border: 1px solid var(--line-2); color: var(--muted); }
+.tag.passed { color: var(--good); border-color: var(--good-bg); }
+.tag.blocked { color: var(--bad); border-color: var(--bad-bg); }
+.tag.warn { color: var(--warn); border-color: var(--warn); }
+.tag.pin { color: var(--pin); border-color: var(--pin); }
+.need { color: var(--bad); }
+.need.soft { color: var(--warn); }
+.muted { color: var(--muted); }
+.mono { font-family: var(--mono); font-size: 12px; }
+.small { font-size: 12px; }
+.error { color: var(--bad); }
+details summary { cursor: pointer; color: var(--accent); }
+.intel { white-space: pre-wrap; margin: 6px 0 0 14px; color: var(--ink); }
+form.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
+form.inline input, form.inline select { min-width: 120px; }
+.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: flex-start; justify-content: center; padding: 30px 12px; overflow: auto; z-index: 10; }
+.modal { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; width: min(960px, 100%); padding: 18px 20px 22px; box-shadow: var(--shadow); }
+.modal h1 { font-size: 17px; }
+
+/* packet gate: terminal / scan-line direction. .term is a monospace status block on the
+   near-black canvas tone in both themes, colored by the leading VALIDATE line. */
+.term { background: var(--canvas); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin: 8px 0; font-family: var(--mono); }
+.term .headline { font-size: 12px; margin-bottom: 8px; }
+.term.blocked .headline { color: var(--bad); }
+.term.passed .headline { color: var(--good); }
+.term .kv { font-size: 12px; color: var(--dim); line-height: 1.9; }
+.term .kv b { color: var(--muted); font-weight: 500; }
+.term .kv .hl { background: var(--bad-bg); color: var(--bad-bright); border-radius: 3px; padding: 0 3px; }
+.block { border-left: 3px solid var(--bad); border-radius: 0 6px 6px 0; padding: 10px 12px; margin: 8px 0; background: var(--surface-2); }
+.block.warn { border-left-color: var(--warn); }
+.block .path { font-family: var(--mono); font-size: 11px; color: var(--dim); }
+.block textarea { min-height: 60px; margin-top: 6px; }
+.nearby { margin: 6px 0 0 10px; font-size: 12px; }
+.nearby button { padding: 2px 7px; font-size: 12px; margin-right: 4px; }
+.attempt { color: var(--muted); font-size: 12px; font-family: var(--mono); }
+
+.doc { background: var(--surface-2); padding: 28px 36px; border: 1px solid var(--line); border-radius: 8px; max-width: 800px; }
+.doc h1 { font-size: 22px; }
+.doc h2 { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 3px; margin: 16px 0 6px; font-family: var(--sans); }
+.doc p { margin: 4px 0; }
+.doc ol, .doc ul { margin: 4px 0; padding-left: 20px; }
+.doc.onepager { font-size: 12.5px; line-height: 1.3; }
+.doc.onepager h2 { margin: 10px 0 4px; font-size: 12px; }
+.doc .lead { font-weight: 700; }
+@media print {
+  :root { --canvas: #fff; --surface: #fff; --surface-2: #fff; --line: #ccc; --ink: #111; --muted: #555; --accent: #0b5fff; }
+  .rail, .noprint, .modal-back { display: none !important; }
+  .layout { display: block; }
+  .main { padding: 0; max-width: none; background: #fff; }
+  .doc { border: 0; padding: 0; max-width: none; }
+  .doc.onepager { font-size: 10.5pt; line-height: 1.25; }
+  @page { margin: 12mm; }
+}
+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%; }
+input.narrow { width: 76px; }
+pre.wrap { white-space: pre-wrap; }
+/* KB "receipt" moment: the confirmed span highlighted inline against its muted source sentence. */
+mark { background: var(--good-bg); color: var(--good-bright); border-radius: 3px; padding: 0 3px; font-weight: 500; }

package/ui/app.js

@@ -0,0 +1,75 @@
+import { h, html, render, useState, useEffect } from "./vendor/preact.mjs";
+import { api, fmtWhen, useRoute, useLive, useTheme } from "./lib.js";
+import { Dashboard } from "./screens/dashboard.js";
+import { Application } from "./screens/application.js";
+import { Interview } from "./screens/interview.js";
+import { Document } from "./screens/document.js";
+import { Postings } from "./screens/postings.js";
+import { KB } from "./screens/kb.js";
+import { Settings } from "./screens/settings.js";
+
+function Rail({ route, me }) {
+  const is = (p) => (route.path === p || (p !== "/" && route.path.startsWith(p)) ? "active" : "");
+  const theme = useTheme();
+  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>
+    <div class="foot">
+      <div class="name">${me ? me.name : ""}</div>
+      <div>AI: ${me ? me.route : ""}</div>
+      <div><span class="dot"></span>local</div>
+      <div>${me ? "v" + me.version : ""}</div>
+    </div>
+  </nav>`;
+}
+
+function Applications({ live }) {
+  const [rows, setRows] = useState(null);
+  useEffect(() => { api.get("/api/applications").then(setRows); }, [live]);
+  if (!rows) return html`<p class="muted">loading</p>`;
+  return html`<div><h1>Applications</h1><ul class="list">${rows.map((r) => html`<li key=${r.application_id}>
+    <a href=${"#/applications/" + r.application_id}>${r.company}: ${r.title}</a>
+    <span class="tag">${r.status}</span>${r.fit_score != null ? html`<span class="muted">fit ${r.fit_score}</span>` : ""}
+    ${r.taken_down_at ? html`<span class="tag warn">taken down</span>` : ""}
+  </li>`)}</ul></div>`;
+}
+
+function Interviews({ live }) {
+  const [snap, setSnap] = useState(null);
+  const [apps, setApps] = useState([]);
+  useEffect(() => { api.get("/api/snapshot").then(setSnap); api.get("/api/applications").then(setApps); }, [live]);
+  if (!snap) return html`<p class="muted">loading</p>`;
+  return html`<div><h1>Interviews</h1>
+    <h2>Upcoming</h2>
+    <ul class="list">${snap.upcoming.map((u) => html`<li key=${u.interview_id}><a href=${"#/interviews/" + u.interview_id}>${u.company} ${u.round} ${u.format}</a><span class="muted">${fmtWhen(u.scheduled_at, u.tz)}</span><span class="muted">${u.people.join(", ")}</span></li>`)}
+    ${snap.upcoming.length ? "" : html`<li class="muted">nothing scheduled</li>`}</ul>
+    <h2>By application</h2>
+    <ul class="list">${apps.map((a) => html`<li key=${a.application_id}><a href=${"#/applications/" + a.application_id}>${a.company}</a><span class="muted">${a.scheduled} scheduled</span></li>`)}</ul>
+  </div>`;
+}
+
+function App() {
+  const route = useRoute();
+  const live = useLive();
+  const [me, setMe] = useState(null);
+  useEffect(() => { api.get("/api/me").then(setMe).catch(() => setMe({ name: "no session", route: "", version: "" })); }, []);
+  const seg = route.path.split("/").filter(Boolean);
+  let screen;
+  if (seg[0] === "applications" && seg[1]) screen = html`<${Application} id=${seg[1]} live=${live} />`;
+  else if (seg[0] === "applications") screen = html`<${Applications} live=${live} />`;
+  else if (seg[0] === "interviews" && seg[1]) screen = html`<${Interview} id=${seg[1]} live=${live} />`;
+  else if (seg[0] === "interviews") screen = html`<${Interviews} live=${live} />`;
+  else if (seg[0] === "documents" && seg[1]) screen = html`<${Document} id=${seg[1]} live=${live} />`;
+  else if (seg[0] === "postings") screen = html`<${Postings} id=${seg[1]} live=${live} />`;
+  else if (seg[0] === "kb") screen = html`<${KB} live=${live} />`;
+  else if (seg[0] === "settings") screen = html`<${Settings} live=${live} />`;
+  else screen = html`<${Dashboard} live=${live} />`;
+  return html`<div class="layout"><${Rail} route=${route} me=${me} /><main class="main">${screen}</main></div>`;
+}
+
+render(h(App), document.getElementById("app"));

package/ui/hosted/signin.css

@@ -0,0 +1,8 @@
+.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 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; }
+.signin .foot { margin-top: 20px; }

package/ui/hosted/signin.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Sign in · GAF-J</title>
+<link rel="icon" href="/icon-192.png" type="image/png">
+<link rel="stylesheet" href="/app.css">
+<link rel="stylesheet" href="/hosted/signin.css">
+</head>
+<body>
+<main class="signin">
+  <img class="mark" src="/icon-192.png" alt="" width="64" height="64">
+  <h1>GAF-J</h1>
+  <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>
+  <details id="local">
+    <summary>Using the free app on your own PC?</summary>
+    <p class="small">Sign in here, then copy the token below into Settings, Credits, on your PC. It is good for one hour; the app asks for a new one when it expires.</p>
+    <textarea id="token" readonly rows="4" placeholder="sign in first"></textarea>
+    <div class="row"><button id="copy" type="button" class="small">copy token</button></div>
+  </details>
+  <p class="small muted foot">No password. Nothing here trains a model. By continuing you agree to the <a href="https://gaf-j.com/terms/">Terms</a> and <a href="https://gaf-j.com/privacy/">Privacy Policy</a>. Questions: <a href="mailto:admin@gaf-j.com">admin@gaf-j.com</a></p>
+</main>
+<script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-app-compat.js"></script>
+<script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-auth-compat.js"></script>
+<script src="/hosted/signin.js"></script>
+</body>
+</html>

package/ui/hosted/signin.js

@@ -0,0 +1,28 @@
+/* Sign-in for the hosted app and for the local app's credits card. Firebase Auth (Google) mints an ID token;
+   POST /auth/session turns it into a server session cookie. Nothing else leaves this page. */
+(function () {
+  var status = document.getElementById("status");
+  var say = function (t, bad) { status.hidden = !t; status.textContent = t || ""; status.className = "small " + (bad ? "error" : "muted"); };
+  var tokenBox = document.getElementById("token");
+  document.getElementById("copy").addEventListener("click", function () { tokenBox.select(); try { navigator.clipboard.writeText(tokenBox.value); say("copied"); } catch (e) { say("select and copy the token by hand"); } });
+  fetch("/signin/config.json", { credentials: "same-origin" }).then(function (r) { return r.json(); }).then(function (c) {
+    if (c.signed_in) { say("you are signed in; opening the app"); location.href = "/"; return; }
+    if (!c.firebase || !c.firebase.apiKey) { say("sign-in is not configured on this server yet", true); document.getElementById("google").disabled = true; return; }
+    if (typeof firebase === "undefined") { say("could not load the sign-in library", true); return; }
+    firebase.initializeApp({ apiKey: c.firebase.apiKey, authDomain: c.firebase.authDomain, projectId: c.firebase.projectId });
+    document.getElementById("google").addEventListener("click", function () {
+      say("opening Google");
+      var provider = new firebase.auth.GoogleAuthProvider();
+      firebase.auth().signInWithPopup(provider).then(function (r) { return r.user.getIdToken(true); }).then(function (idToken) {
+        tokenBox.value = idToken;
+        return fetch("/auth/session", { method: "POST", credentials: "same-origin", headers: { "content-type": "application/json" }, body: JSON.stringify({ id_token: idToken }) })
+          .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); })
+          .then(function (x) {
+            if (!x.ok) { say(x.j.error || "sign-in refused", true); return; }
+            if (document.getElementById("local").open) { say("signed in as " + (x.j.email || x.j.uid) + "; copy the token for your PC, or open the app"); return; }
+            location.href = "/";
+          });
+      }).catch(function (e) { say(e && e.message ? e.message : "sign-in failed", true); });
+    });
+  }).catch(function () { say("could not reach the server", true); });
+})();

package/ui/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>GAF-J</title>
+<link rel="stylesheet" href="/app.css">
+<link rel="manifest" href="/manifest.webmanifest">
+<meta name="theme-color" content="#14171c">
+<meta name="application-name" content="GAF-J">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-title" content="GAF-J">
+<link rel="icon" href="/icon-192.png" type="image/png">
+<link rel="apple-touch-icon" href="/icon-192.png">
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/app.js"></script>
+</body>
+</html>

package/ui/lib.js

@@ -0,0 +1,92 @@
+import { useState, useEffect } from "./vendor/preact.mjs";
+
+async function req(method, path, body) {
+  const r = await fetch(path, { method, headers: body !== undefined ? { "content-type": "application/json" } : {}, body: body !== undefined ? JSON.stringify(body) : undefined, credentials: "same-origin" });
+  const text = await r.text();
+  let data;
+  try { data = JSON.parse(text); } catch (_) { data = { error: text }; }
+  if (r.status === 401) { if (data.hosted) { location.href = "/signin"; } data.error = data.hosted ? "signed out" : "session expired; run gafj url and open the new link"; }
+  if (!r.ok) { const e = new Error(data.error || r.statusText); e.status = r.status; e.allowed = data.allowed; e.detail = data.detail; throw e; }
+  return data;
+}
+export const api = { get: (p) => req("GET", p), post: (p, b) => req("POST", p, b === undefined ? {} : b), put: (p, b) => req("PUT", p, b === undefined ? {} : b) };
+
+export function fmtWhen(iso, tz) {
+  if (!iso) return "";
+  try {
+    return new Intl.DateTimeFormat(undefined, { weekday: "short", month: "numeric", day: "numeric", hour: "numeric", minute: "2-digit", timeZone: tz || undefined, timeZoneName: "short" }).format(new Date(iso));
+  } catch (_) { return iso; }
+}
+
+export function localZone() {
+  try { return Intl.DateTimeFormat().resolvedOptions().timeZone; } catch (_) { return "UTC"; }
+}
+
+/** datetime-local value + IANA zone to ISO. */
+export function toIso(local, tz) {
+  if (!local) return null;
+  const [d, t] = local.split("T");
+  const [y, m, day] = d.split("-").map(Number);
+  const [hh, mm] = t.split(":").map(Number);
+  const guess = Date.UTC(y, m - 1, day, hh, mm);
+  const offset = (zoneOffsetMs(guess, tz));
+  return new Date(guess - offset).toISOString();
+}
+function zoneOffsetMs(utcMs, tz) {
+  try {
+    const parts = new Intl.DateTimeFormat("en-US", { timeZone: tz, hourCycle: "h23", year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }).formatToParts(new Date(utcMs));
+    const g = (t) => Number(parts.find((p) => p.type === t).value);
+    return Date.UTC(g("year"), g("month") - 1, g("day"), g("hour"), g("minute"), g("second")) - utcMs;
+  } catch (_) { return 0; }
+}
+
+export function useRoute() {
+  const parse = () => ({ path: (location.hash.replace(/^#/, "") || "/") });
+  const [route, setRoute] = useState(parse);
+  useEffect(() => { const on = () => setRoute(parse()); addEventListener("hashchange", on); return () => removeEventListener("hashchange", on); }, []);
+  return route;
+}
+
+/** A counter that bumps on every change event from the server; screens refetch on it. */
+export function useLive() {
+  const [n, setN] = useState(0);
+  useEffect(() => {
+    let es;
+    let timer = null;
+    const bump = () => { clearTimeout(timer); timer = setTimeout(() => setN((x) => x + 1), 150); };
+    try {
+      es = new EventSource("/api/events");
+      es.addEventListener("change", bump);
+    } catch (_) { /* no SSE */ }
+    return () => { if (es) es.close(); };
+  }, []);
+  return n;
+}
+
+export const OPS = [
+  { op: "prep", label: "Prep" }, { op: "onepager", label: "One-pager" }, { op: "deep_answers", label: "Deep answers" },
+  { op: "practice", label: "Practice env" }, { op: "followup", label: "Thank-you draft" },
+];
+export const APP_NEXT = { to_apply: ["applied", "pass"], applied: ["rejected", "closed", "offer", "pass"], offer: ["closed", "rejected"], rejected: [], closed: [], pass: [] };
+
+/** Light (default) or dark, an explicit choice; the OS preference is not consulted. Persisted client-side only; never sent to the server. */
+const THEME_KEY = "gafj-theme";
+function applyTheme(t) { if (t === "light" || t === "dark") document.documentElement.dataset.theme = t; else delete document.documentElement.dataset.theme; }
+try { applyTheme(localStorage.getItem(THEME_KEY)); } catch (_) { /* private mode */ }
+export function useTheme() {
+  const [theme, setThemeState] = useState(() => { try { return localStorage.getItem(THEME_KEY) || ""; } catch (_) { return ""; } });
+  const setTheme = (t) => { setThemeState(t); applyTheme(t); try { if (t) localStorage.setItem(THEME_KEY, t); else localStorage.removeItem(THEME_KEY); } catch (_) { /* private mode */ } };
+  const dark = theme === "dark";
+  return { theme, dark, toggle: () => setTheme(dark ? "light" : "dark") };
+}
+
+/** The browser's install prompt, captured early so the settings screen can offer it. */
+export const installer = { event: null, listeners: new Set(), installed: false };
+addEventListener("beforeinstallprompt", (e) => { e.preventDefault(); installer.event = e; for (const l of installer.listeners) l(); });
+addEventListener("appinstalled", () => { installer.installed = true; installer.event = null; for (const l of installer.listeners) l(); });
+export function useInstall() {
+  const [, tick] = useState(0);
+  useEffect(() => { const l = () => tick((n) => n + 1); installer.listeners.add(l); return () => installer.listeners.delete(l); }, []);
+  const standalone = matchMedia("(display-mode: standalone)").matches || navigator.standalone === true;
+  return { canInstall: !!installer.event, installed: installer.installed || standalone, install: async () => { if (!installer.event) return; installer.event.prompt(); await installer.event.userChoice; installer.event = null; } };
+}

package/ui/manifest.webmanifest

@@ -0,0 +1,18 @@
+{
+  "id": "/",
+  "name": "GAF-J",
+  "short_name": "GAF-J",
+  "description": "Local job campaign engine: one store, one ingest door, your own AI subscription.",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "display_override": ["window-controls-overlay", "standalone"],
+  "background_color": "#f6f4ef",
+  "theme_color": "#14171c",
+  "lang": "en",
+  "icons": [
+    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
+    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
+    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ]
+}

package/ui/screens/application.js

@@ -0,0 +1,73 @@
+import { html, useState, useEffect } from "../vendor/preact.mjs";
+import { api, fmtWhen, toIso, localZone, APP_NEXT } from "../lib.js";
+import { PacketModal } from "./packet.js";
+
+export function Application({ id, live }) {
+  const [a, setA] = useState(null);
+  const [err, setErr] = useState("");
+  const [posting, setPosting] = useState(null);
+  const [form, setForm] = useState(null);
+  const [correct, setCorrect] = useState(null);
+  const [note, setNote] = useState(null);
+  const [modal, setModal] = useState(null);
+  const load = () => api.get(`/api/applications/${id}`).then((x) => { setA(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 && !a) return html`<p class="error">${err}</p>`;
+  if (!a) return html`<p class="muted">loading</p>`;
+  const next = APP_NEXT[a.status] || [];
+  const passedResume = a.documents.find((d) => d.kind === "resume" && d.status === "passed");
+  const target = { posting_id: a.posting_id, name: a.posting.company };
+  return html`<div>
+    <h1>${a.posting.company} · ${a.posting.title}</h1>
+    <div class="sub"><span class="tag">${a.status}</span> ${a.scoring ? html`fit ${a.scoring.fit_score} (${a.scoring.verdict}, ${a.scoring.rubric_version})` : html`<span class="error">scoring not frozen</span>`}
+      ${a.posting.taken_down_at ? html`<span class="tag warn">posting taken down</span>` : ""} ${a.applied_at ? html`<span class="muted">applied ${a.applied_at.slice(0, 10)}</span>` : ""}</div>
+    ${err ? html`<p class="error">${err}</p>` : ""}
+    <div class="row noprint">
+      <button onClick=${async () => setPosting(posting ? null : await api.get(`/api/postings/${a.posting_id}`))}>${posting ? "hide posting" : "view posting"}</button>
+      <label>decision by <input type="date" value=${(a.decision_expected_at || "").slice(0, 10)} onChange=${(e) => post(`/api/applications/${id}/decision-expected`, { at: e.target.value ? e.target.value + "T00:00:00Z" : null })} /></label>
+      ${next.length ? html`<select onChange=${(e) => { if (e.target.value) { post(`/api/applications/${id}/status`, { status: e.target.value, resume_doc_id: passedResume ? passedResume.document_id : undefined }); e.target.value = ""; } }}>
+        <option value="">Status ▾</option>${next.map((s) => html`<option key=${s} value=${s}>${s}</option>`)}</select>` : ""}
+      <button onClick=${() => setCorrect(correct ? null : { status: "applied", reason: "" })}>Correct…</button>
+      <button onClick=${() => setNote(note === null ? a.notes || "" : null)}>Note</button>
+      ${!a.posting.taken_down_at ? html`<button onClick=${() => post(`/api/postings/${a.posting_id}/taken-down`, {})}>Posting taken down</button>` : ""}
+    </div>
+    ${correct ? html`<form class="inline" onSubmit=${(e) => { e.preventDefault(); post(`/api/applications/${id}/correct`, correct); setCorrect(null); }}>
+      <select onChange=${(e) => setCorrect({ ...correct, status: e.target.value })}>${["applied", "to_apply", "offer"].map((s) => html`<option key=${s} value=${s} selected=${correct.status === s}>${s}</option>`)}</select>
+      <input required placeholder="reason for the correction" value=${correct.reason} onInput=${(e) => setCorrect({ ...correct, reason: e.target.value })} /><button class="primary">correct</button></form>` : ""}
+    ${note !== null ? html`<div><textarea value=${note} onInput=${(e) => setNote(e.target.value)}></textarea><div class="row"><button class="primary" onClick=${() => { post(`/api/applications/${id}/notes`, { notes: note }); setNote(null); }}>save note</button></div></div>` : a.notes ? html`<div class="card intel">${a.notes}</div>` : ""}
+    ${posting ? html`<div class="card"><div class="muted small">${[posting.location, posting.comp_text, posting.source_url].filter(Boolean).join(" · ")}</div><pre class="mono" style="white-space:pre-wrap">${posting.raw_text}</pre></div>` : ""}
+    <div class="grid2">
+      <div>
+        <h2>Documents</h2>
+        <div class="card"><ul class="list">${a.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>
+          ${a.resume_doc_id === doc.document_id ? html`<span class="tag">submitted</span>` : ""}
+          ${doc.status === "blocked" ? html`<span class="small error">${doc.blocks[0] ? doc.blocks[0].rule : ""}</span> ${doc.posting_id ? html`<button class="small noprint" onClick=${async () => setModal({ op: doc.kind, label: "Repair " + doc.kind, doc: await api.get(`/api/documents/${doc.document_id}`) })}>repair</button>` : ""}` : ""}
+          <span class="small muted">${doc.route} ${doc.created_at.slice(0, 10)}</span></li>`)}${a.documents.length ? "" : html`<li class="muted">nothing built yet</li>`}</ul>
+          <div class="row noprint"><button onClick=${() => setModal({ op: "resume", label: "Resume" })}>Resume</button><button onClick=${() => setModal({ op: "cover", label: "Cover letter" })}>Cover letter</button></div></div>
+        <h2>Comms</h2>
+        <div class="card"><ul class="list">${a.communications.map((c) => html`<li key=${c.communication_id}>${c.kind} <span class="muted">${c.sent_at.slice(0, 10)}</span> ${c.round_label ? html`<span class="muted">after ${c.round_label}</span>` : ""} ${c.to_addr ? html`<span class="muted">→ ${c.to_addr}</span>` : ""}</li>`)}${a.communications.length ? "" : html`<li class="muted">nothing sent</li>`}</ul></div>
+        <h2>People</h2>
+        <div class="card"><ul class="list">${a.people.map((p) => html`<li key=${p.person_id + p.role}><b>${p.name}</b> <span class="muted">${[p.title, p.org].filter(Boolean).join(", ")}</span> <span class="tag">${p.role}</span></li>`)}${a.people.length ? "" : html`<li class="muted">no one yet</li>`}</ul></div>
+      </div>
+      <div>
+        <h2>Interviews</h2>
+        <div class="card"><ul class="list">${a.interviews.map((i) => html`<li key=${i.interview_id}>
+          <a href=${"#/interviews/" + i.interview_id}>${i.round_label} ${i.format}</a> <span class="mono">${fmtWhen(i.scheduled_at, i.tz)}</span> <span class="tag">${i.status}${i.outcome !== "pending" ? " · " + i.outcome : ""}</span>
+          <span class="muted small">${i.people.map((p) => p.name).join(", ")}</span></li>`)}${a.interviews.length ? "" : html`<li class="muted">none</li>`}</ul>
+          <div class="row noprint"><button onClick=${() => setForm(form ? null : { round_label: "R" + (a.interviews.length + 1), at: "", tz: localZone(), format: "screen", people: "" })}>+ schedule</button></div>
+          ${form ? html`<form class="inline" onSubmit=${(e) => { e.preventDefault(); post("/api/interviews", { application_id: id, round_label: form.round_label, scheduled_at: toIso(form.at, form.tz), tz: form.tz, format: form.format, people: form.people.split(",").map((s) => s.trim()).filter(Boolean).map((name) => ({ name })) }); setForm(null); }}>
+            <input required value=${form.round_label} onInput=${(e) => setForm({ ...form, round_label: e.target.value })} placeholder="R3" />
+            <input type="datetime-local" required value=${form.at} onInput=${(e) => setForm({ ...form, at: e.target.value })} />
+            <input value=${form.tz} onInput=${(e) => setForm({ ...form, tz: e.target.value })} title="IANA zone" />
+            <select onChange=${(e) => setForm({ ...form, format: e.target.value })}>${["screen", "hm", "panel", "technical", "onsite"].map((f) => html`<option key=${f} value=${f} selected=${form.format === f}>${f}</option>`)}</select>
+            <input value=${form.people} onInput=${(e) => setForm({ ...form, people: e.target.value })} placeholder="people, comma separated" />
+            <button class="primary">schedule</button></form>` : ""}
+        </div>
+        ${a.scoring && a.scoring.categories.length ? html`<h2>Scoring</h2><div class="card"><ul class="list">${a.scoring.categories.map((c, i) => html`<li key=${i}><span class="mono">w${c.weight}${c.score != null ? " s" + c.score : ""}</span> ${c.category} ${c.is_hard_gate ? html`<span class="tag warn">hard gate</span>` : ""}</li>`)}</ul><p class="small muted">${a.scoring.verdict_reason || ""}</p></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/dashboard.js

@@ -0,0 +1,37 @@
+import { html, useState, useEffect } from "../vendor/preact.mjs";
+import { api, fmtWhen } from "../lib.js";
+
+export function Dashboard({ live }) {
+  const [snap, setSnap] = useState(null);
+  const [msg, setMsg] = useState("");
+  const [err, setErr] = useState("");
+  useEffect(() => { api.get("/api/snapshot").then(setSnap).catch((e) => setErr(e.message)); }, [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>`;
+  const link = (n) => n.interview_id ? "#/interviews/" + n.interview_id : n.interview_ids ? "#/interviews/" + n.interview_ids[0] : "#/applications";
+  return html`<div>
+    <h1>Dashboard</h1>
+    <div class="sub">${new Date(snap.now).toLocaleString()}</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>
+    <h2>Upcoming</h2>
+    <div class="card"><ul class="list">${snap.upcoming.map((u) => html`<li key=${u.interview_id}>
+      <span class="mono">${fmtWhen(u.scheduled_at, u.tz)}</span> <a href=${"#/interviews/" + u.interview_id}>${u.company} ${u.round} ${u.format}</a> <span class="muted">${u.people.join(", ")}</span></li>`)}
+      ${snap.upcoming.length ? "" : html`<li class="muted">nothing scheduled</li>`}</ul></div>
+    <div class="grid2">
+      <div><h2>Active (${snap.active.length})</h2><div class="card"><ul class="list">${snap.active.map((a) => html`<li key=${a.application_id}>
+        <a href=${"#/applications/" + a.application_id}>${a.company}</a> <span class="muted">${a.title}</span> <span class="tag">${a.status}</span>${a.fit != null ? html`<span class="muted">fit ${a.fit}</span>` : ""}</li>`)}</ul></div></div>
+      <div><h2>Closed (${snap.closed.length})</h2><div class="card"><ul class="list">${snap.closed.map((a) => html`<li key=${a.application_id}>
+        <a href=${"#/applications/" + a.application_id}>${a.company}</a> <span class="muted">${a.title}</span> <span class="tag">${a.status}</span></li>`)}</ul></div></div>
+    </div>
+    <h2>Aging</h2>
+    <div class="card"><ul class="list">${snap.aging.map((a, i) => html`<li key=${i}><a href=${"#/applications/" + a.application_id}>${a.text}</a></li>`)}${snap.aging.length ? "" : html`<li class="muted">nothing aging</li>`}</ul></div>
+    <div class="row noprint">
+      <button onClick=${() => act("/api/export-tracker", "tracker written")}>Export tracker snapshot</button>
+      <button onClick=${() => act("/api/backup", "backup written")}>Back up</button>
+      ${msg ? html`<span class="small mono">${msg}</span>` : ""}${err ? html`<span class="error small">${err}</span>` : ""}
+    </div>
+  </div>`;
+}