Phase 1.2: session login + empty HTMX dashboard

- Session login for the single user Sam: server-side session store with an
  HMAC-signed session cookie, POST /login, POST /logout, and double-submit
  CSRF on every form post. Unauthenticated requests to / and /partials/*
  redirect to /login?next=...
- Empty dashboard shell in the Family Home Lab design system: left nav
  (category and folder placeholders), centre list, right detail pane.
- Copy tokens.css and the self-hosted Inter fonts from the family-home-lab
  design system into web/static; vendor htmx 2.0.4. No cross-project imports
  at runtime.
- Dark mode via prefers-color-scheme plus a persisted toggle; phone-first
  layout with 44px touch targets, hairline borders, 8px grid, pill CTAs.
- Config: EMAIL_AGENT_PASSWORD for the login password, falling back to
  EMAIL_AGENT_SESSION_SECRET so one configured secret is enough.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

web/embed.go

@@ -0,0 +1,23 @@
+// Package web holds the server-rendered templates and static assets for the
+// Email Agent UI.
+//
+// The assets are embedded in the binary so the container image needs no
+// separate file tree and cannot drift from the code.
+//
+// tokens.css and the Inter woff2 files are copied verbatim from the Family Home
+// Lab design system (AGENTS.md §6); they are compiled into this project rather
+// than imported across projects.
+package web
+
+import "embed"
+
+// StaticFS holds the /static tree: design tokens, self-hosted Inter fonts,
+// htmx, and the application stylesheet.
+//
+//go:embed static
+var StaticFS embed.FS
+
+// TemplateFS holds the server-rendered HTML templates.
+//
+//go:embed templates
+var TemplateFS embed.FS

web/static/app.css

@@ -0,0 +1,293 @@
+/* ============================================================
+   Email Agent — application styles
+   Built on Family Home Lab tokens.css (do not edit tokens here).
+   Base unit: 8px. Touch targets >= 44px. Pill CTAs, 4px inputs.
+   ============================================================ */
+
+*,
+*::before,
+*::after { box-sizing: border-box; }
+
+html, body { height: 100%; }
+
+body {
+  margin: 0;
+  font: var(--type-body-md);
+  color: var(--ink-secondary);
+  background: var(--canvas-soft);
+  -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3, p { margin: 0; }
+
+a { color: var(--primary); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+/* ---------- primitives ---------- */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-xs);
+  min-height: 44px;
+  padding: 0 var(--space-lg);
+  border: 1px solid transparent;
+  border-radius: var(--rounded-full);
+  font: var(--type-button);
+  cursor: pointer;
+  transition: transform .08s ease, background-color .15s ease, box-shadow .15s ease;
+  white-space: nowrap;
+}
+.btn:active { transform: scale(.97); }
+
+.btn-primary {
+  background: var(--primary);
+  color: var(--on-primary);
+}
+.btn-primary:hover { background: var(--primary-active); }
+
+.btn-utility {
+  background: var(--surface);
+  color: var(--ink);
+  border-radius: var(--rounded-md);
+  min-height: 44px;
+  padding: 0 var(--space-md);
+  box-shadow: var(--shadow-level-1);
+  border: 1px solid var(--hairline);
+}
+.btn-utility:hover { background: var(--surface-2); }
+
+.btn-block { width: 100%; }
+
+.text-input {
+  width: 100%;
+  min-height: 44px;
+  padding: var(--space-xs) var(--space-sm);
+  background: var(--surface);
+  color: var(--ink);
+  font: var(--type-body-md);
+  border: 1px solid var(--hairline);
+  border-radius: var(--rounded-xs);
+}
+.text-input:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: var(--shadow-level-1);
+}
+
+.field { display: flex; flex-direction: column; gap: var(--space-xxs); }
+.field > label { font: var(--type-caption); color: var(--ink-muted); }
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xxs);
+  padding: 4px 8px;
+  border-radius: var(--rounded-full);
+  font: var(--type-eyebrow);
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  color: var(--ink-muted);
+}
+
+.hairline { border: 1px solid var(--hairline); }
+
+.muted { color: var(--ink-muted); }
+.faint { color: var(--ink-faint); }
+
+/* ---------- login ---------- */
+
+.login-body {
+  background: var(--secondary);
+}
+
+.login-wrap {
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-xl);
+  padding: var(--space-lg);
+}
+
+.login-greeting {
+  font: var(--type-display-1);
+  color: #fff;
+  text-align: center;
+  letter-spacing: -1.5px;
+}
+
+.auth-card {
+  width: 100%;
+  max-width: 400px;
+  background: var(--surface);
+  border-radius: var(--rounded-lg);
+  box-shadow: var(--shadow-level-2);
+  padding: var(--space-xxl) var(--space-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.auth-brand {
+  font: var(--type-eyebrow);
+  color: var(--ink-faint);
+  letter-spacing: .125px;
+  text-transform: uppercase;
+}
+
+.auth-card h1, .auth-card h2 {
+  font: var(--type-heading-1);
+  color: var(--ink);
+}
+.auth-card h2 { font: var(--type-heading-2); }
+
+.auth-card p { font: var(--type-body-sm); color: var(--ink-muted); }
+
+.auth-form { display: flex; flex-direction: column; gap: var(--space-md); }
+
+.alert {
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: var(--rounded-xs);
+  font: var(--type-body-sm);
+  border: 1px solid var(--hairline);
+  background: var(--surface-2);
+  color: var(--ink-secondary);
+}
+.alert-error { border-color: var(--sticker-red); color: var(--sticker-red); }
+
+/* ---------- dashboard chrome ---------- */
+
+.nav-bar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-md);
+  padding: var(--space-xs) var(--space-md);
+  min-height: 56px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--hairline);
+}
+.nav-bar .wordmark { font: var(--type-title); color: var(--ink); }
+.nav-bar .nav-actions { display: flex; align-items: center; gap: var(--space-xs); }
+
+.page { max-width: var(--container-max); margin: 0 auto; padding: var(--space-lg) var(--space-md); }
+
+.greeting { font: var(--type-heading-1); color: var(--ink); margin-bottom: var(--space-lg); }
+
+.shell {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-md);
+  align-items: start;
+}
+
+@media (min-width: 760px) {
+  .shell { grid-template-columns: 220px minmax(0, 1fr); }
+}
+@media (min-width: 1080px) {
+  .shell { grid-template-columns: 220px minmax(0, 1fr) 340px; }
+}
+
+.panel {
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--rounded-lg);
+  overflow: hidden;
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-xs);
+  padding: var(--space-sm) var(--space-md);
+  border-bottom: 1px solid var(--hairline);
+}
+.panel-head h2 { font: var(--type-title); color: var(--ink); }
+
+.panel-body { padding: var(--space-md); }
+
+/* left nav: vertical list on desktop, horizontal scroller on phone */
+.nav-groups { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-md); }
+
+@media (max-width: 759px) {
+  .nav-groups {
+    flex-direction: row;
+    overflow-x: auto;
+    gap: var(--space-md);
+    padding: var(--space-xs) var(--space-sm);
+    -webkit-overflow-scrolling: touch;
+  }
+  .nav-group { min-width: max-content; }
+  .nav-group-items { flex-direction: row; }
+}
+
+.nav-group-title {
+  font: var(--type-eyebrow);
+  color: var(--ink-faint);
+  text-transform: uppercase;
+  letter-spacing: .125px;
+  margin-bottom: var(--space-xs);
+}
+.nav-group-items { display: flex; flex-direction: column; gap: 2px; }
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  min-height: 44px;
+  padding: 0 var(--space-sm);
+  border-radius: var(--rounded-sm);
+  font: var(--type-body-sm);
+  color: var(--ink-secondary);
+}
+.nav-item:hover { background: var(--surface-2); text-decoration: none; }
+.nav-item .dot {
+  width: 8px; height: 8px; border-radius: var(--rounded-full);
+  background: var(--ink-faint); flex: 0 0 auto;
+}
+.nav-item .count { margin-left: auto; font: var(--type-caption); color: var(--ink-faint); }
+
+/* centre list */
+.msg-list { display: flex; flex-direction: column; }
+.msg-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  min-height: 64px;
+  padding: var(--space-sm) var(--space-md);
+  border-bottom: 1px solid var(--hairline);
+}
+.msg-row:last-child { border-bottom: 0; }
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-sm);
+  text-align: center;
+  padding: var(--space-xxl) var(--space-lg);
+}
+.empty-state .empty-title { font: var(--type-title); color: var(--ink); }
+.empty-state .empty-copy { font: var(--type-body-sm); color: var(--ink-muted); max-width: 32ch; }
+
+.detail-body { padding: var(--space-lg) var(--space-md); }
+
+/* dark-mode toggle shows the right glyph */
+.theme-toggle .icon-dark { display: none; }
+[data-theme="dark"] .theme-toggle .icon-dark { display: inline; }
+[data-theme="dark"] .theme-toggle .icon-light { display: none; }
+
+/* subtle, non-decorative loading pulse (no spinners) */
+.htmx-request .empty-state { opacity: .55; transition: opacity .15s ease; }

web/static/tokens.css

@@ -0,0 +1,110 @@
+/* ============================================================
+   Family Home Lab — Design Tokens
+   Source: DESIGN.md (Notion design language)
+   Only structural/semantic tokens here. All values map 1:1.
+   ============================================================ */
+
+/* Inter (@fontsource) — self-hosted substitute for NotionInter */
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/inter-400.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/inter-500.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/inter-600.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/inter-700.woff2") format("woff2"); }
+
+:root {
+  /* --- Surface --- */
+  --canvas-soft: #f6f5f4;
+  --surface: #ffffff;
+  --surface-2: #f2f2f1;
+  --hairline: #e6e6e6;
+
+  /* --- Text --- */
+  --ink: #000000;
+  --ink-secondary: #31302e;
+  --ink-muted: #615d59;
+  --ink-faint: #a39e98;
+
+  /* --- Structural accents --- */
+  --primary: #0075de;          /* the ONLY action colour */
+  --primary-active: #005bab;
+  --on-primary: #ffffff;
+  --secondary: #213183;        /* deep indigo — login band + greeting only */
+
+  /* --- Sticker palette (decorative only) --- */
+  --sticker-sky: #62aef0;      /* chat */
+  --sticker-purple: #d6b6f6;   /* image */
+  --sticker-pink: #ff64c8;     /* video */
+  --sticker-orange: #dd5b00;   /* audio */
+  --sticker-teal: #2a9d99;     /* docs */
+  --sticker-green: #1aae39;    /* status: online/saved */
+  --sticker-red: #d33a2b;     /* status: failed / error (ON_OFF.md decision) */
+  --sticker-purple-deep: #391c57; /* illustration only */
+  --sticker-orange-deep: #793400; /* illustration only */
+
+  /* --- Typography (Inter, self-hosted via @font-face) --- */
+  --font-family: "Inter", -apple-system, system-ui, "Segoe UI",
+    Helvetica, Arial, sans-serif;
+
+  /* Font-family is baked into each token below: the CSS `font` shorthand
+     resets font-family to the UA default (serif) unless a family is written,
+     and it cannot carry letter-spacing — so weights/sizes ship inline and the
+     family is appended per token. */
+  --type-display-1: 700 48px/1.05 var(--font-family);
+  --type-heading-1: 700 32px/1.1 var(--font-family);
+  --type-heading-2: 700 22px/1.27 var(--font-family);
+  --type-title: 600 17px/1.4 var(--font-family);
+  --type-body-md: 400 15px/1.5 var(--font-family);
+  --type-body-sm: 400 14px/1.4 var(--font-family);
+  --type-button: 500 15px/1.4 var(--font-family);
+  --type-caption: 400 13px/1.43 var(--font-family);
+  --type-eyebrow: 600 12px/1.33 var(--font-family);
+
+  /* --- Layout (base unit 8px) --- */
+  --space-xxs: 4px;
+  --space-xs: 8px;
+  --space-sm: 12px;
+  --space-md: 16px;
+  --space-lg: 24px;
+  --space-xl: 28px;
+  --space-xxl: 32px;
+
+  --container-max: 1200px;
+
+  /* --- Elevation --- */
+  --shadow-level-1: rgba(0, 0, 0, 0.01) 0 0.175px 1px,
+    rgba(0, 0, 0, 0.02) 0 0.8px 3px,
+    rgba(0, 0, 0, 0.027) 0 2px 8px,
+    rgba(0, 0, 0, 0.04) 0 4px 18px;
+  --shadow-level-2: rgba(0, 0, 0, 0.0122) 0 0.175px 1px,
+    rgba(0, 0, 0, 0.024) 0 0.8px 3px,
+    rgba(0, 0, 0, 0.032) 0 2px 8px,
+    rgba(0, 0, 0, 0.047) 0 4px 18px,
+    rgba(0, 0, 0, 0.05) 0 23px 52px;
+
+  /* --- Shapes --- */
+  --rounded-xs: 4px;
+  --rounded-sm: 5px;
+  --rounded-md: 8px;
+  --rounded-lg: 12px;
+  --rounded-full: 9999px;
+}
+
+/* Dark mode — flip the semantic tokens only (components use var(--…)). */
+[data-theme="dark"] {
+  --canvas-soft: #141518;
+  --surface: #1c1e22;
+  --surface-2: #24262c;
+  --hairline: #33363d;
+  --ink: #f5f6f7;
+  --ink-secondary: #dcdee2;
+  --ink-muted: #a9adb6;
+  --ink-faint: #727680;
+  --primary: #3d8be0;
+  --primary-active: #5d9ff0;
+  --on-primary: #ffffff;
+  --secondary: #10142a;
+  --shadow-level-1: rgba(0, 0, 0, 0.45) 0 1px 3px;
+  --shadow-level-2: rgba(0, 0, 0, 0.55) 0 5px 22px;
+}
+
+/* Numerals: enable OpenType lnum */
+html { font-feature-settings: "lnum" 1; }

web/templates/dashboard.html

@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Email Agent</title>
+  <link rel="stylesheet" href="/static/tokens.css">
+  <link rel="stylesheet" href="/static/app.css">
+  <script>
+    (function () {
+      try {
+        var t = localStorage.getItem("ea-theme");
+        if (!t) t = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+        document.documentElement.setAttribute("data-theme", t);
+      } catch (e) {}
+    })();
+    function eaToggleTheme() {
+      var el = document.documentElement;
+      var next = el.getAttribute("data-theme") === "dark" ? "light" : "dark";
+      el.setAttribute("data-theme", next);
+      try { localStorage.setItem("ea-theme", next); } catch (e) {}
+    }
+  </script>
+</head>
+<body>
+  <header class="nav-bar">
+    <span class="wordmark">Email Agent</span>
+    <div class="nav-actions">
+      <button class="btn btn-utility theme-toggle" type="button" onclick="eaToggleTheme()" aria-label="Toggle dark mode">
+        <span class="icon-light" aria-hidden="true">&#9790;</span>
+        <span class="icon-dark" aria-hidden="true">&#9728;</span>
+      </button>
+      <form method="post" action="/logout">
+        <input type="hidden" name="csrf" value="{{.CSRFToken}}">
+        <button class="btn btn-utility" type="submit">Log out</button>
+      </form>
+    </div>
+  </header>
+
+  <main class="page">
+    <h1 class="greeting">{{.Greeting}}, Sam</h1>
+
+    <div class="shell">
+      <aside class="panel" aria-label="Categories and folders">
+        <div class="nav-groups">
+          <div class="nav-group">
+            <div class="nav-group-title">Categories</div>
+            <div class="nav-group-items">
+              {{range .Categories}}
+              <a class="nav-item" href="#">
+                <span class="dot" style="background: {{.Color}}"></span>
+                <span>{{.Name}}</span>
+                <span class="count">0</span>
+              </a>
+              {{end}}
+            </div>
+          </div>
+          <div class="nav-group">
+            <div class="nav-group-title">Folders</div>
+            <div class="nav-group-items">
+              {{range .Folders}}
+              <a class="nav-item" href="#">
+                <span class="dot" style="background: {{.Color}}"></span>
+                <span>{{.Name}}</span>
+                <span class="count">0</span>
+              </a>
+              {{end}}
+            </div>
+          </div>
+        </div>
+      </aside>
+
+      <section class="panel" aria-label="Message list">
+        <div class="panel-head">
+          <h2>Inbox</h2>
+          <button class="btn btn-utility" type="button"
+                  hx-get="/partials/inbox" hx-target="#inbox-list" hx-swap="innerHTML">
+            Refresh
+          </button>
+        </div>
+        <div id="inbox-list" class="msg-list"
+             hx-get="/partials/inbox" hx-trigger="load" hx-swap="innerHTML"></div>
+      </section>
+
+      <aside class="panel detail-pane" aria-label="Message detail">
+        <div class="panel-head"><h2>Message</h2></div>
+        <div class="detail-body">
+          <p class="muted">Select a message to read it here.</p>
+          <p class="faint" style="margin-top: var(--space-xs);">Recommended action, reply draft, and history will appear in this pane.</p>
+        </div>
+      </aside>
+    </div>
+  </main>
+
+  <script src="/static/htmx.min.js" defer></script>
+</body>
+</html>

web/templates/inbox.html

@@ -0,0 +1,5 @@
+<div class="empty-state">
+  <div class="empty-title">No messages yet</div>
+  <p class="empty-copy">Mail fetch arrives in Phase 2. New messages will appear here, grouped by category, with a recommended action on each row.</p>
+  <span class="pill">IMAP scan not connected</span>
+</div>

web/templates/login.html

@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Sign in · Email Agent</title>
+  <link rel="stylesheet" href="/static/tokens.css">
+  <link rel="stylesheet" href="/static/app.css">
+  <script>
+    (function () {
+      try {
+        var t = localStorage.getItem("ea-theme");
+        if (!t) t = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+        document.documentElement.setAttribute("data-theme", t);
+      } catch (e) {}
+    })();
+  </script>
+</head>
+<body class="login-body">
+  <main class="login-wrap">
+    <h1 class="login-greeting">{{.PartOfDay}}, Sam</h1>
+    <form class="auth-card" method="post" action="/login" autocomplete="on">
+      <div>
+        <p class="auth-brand">Email Agent</p>
+        <h2>Sign in</h2>
+        <p class="muted">The family inbox triage desk.</p>
+      </div>
+
+      {{if .Error}}<div class="alert alert-error" role="alert">{{.Error}}</div>{{end}}
+      {{if not .Configured}}<div class="alert" role="status">Login is not configured. Set <code>EMAIL_AGENT_PASSWORD</code> (or <code>EMAIL_AGENT_SESSION_SECRET</code>) on the host.</div>{{end}}
+
+      <input type="hidden" name="csrf" value="{{.CSRFToken}}">
+      <input type="hidden" name="next" value="{{.Next}}">
+
+      <div class="field">
+        <label for="password">Password</label>
+        <input class="text-input" type="password" id="password" name="password"
+               autocomplete="current-password" required {{if .Configured}}autofocus{{end}}>
+      </div>
+
+      <button class="btn btn-primary btn-block" type="submit">Sign in</button>
+    </form>
+  </main>
+</body>
+</html>