diff --git a/.changelog/v2.26.0.md b/.changelog/v2.26.0.md
new file mode 100644
index 000000000..7bd991cb0
--- /dev/null
+++ b/.changelog/v2.26.0.md
@@ -0,0 +1,89 @@
+# Release v2.26.0
+
+Released: 2026-07-02
+
+## Highlights
+
+- **Sketch & Annotation Canvas (phase 1).** Draw and erase over any generated image, pick per-stroke color and brush size, undo/clear, then save your markup and export a flattened PNG. Works with mouse, pen, and touch down to phone widths, and is reachable from ⌘K and voice ("annotate").
+- **Tribe relationship care got proactive.** Touchpoints now log automatically from synced calendar events and messages (deterministic matching, no AI calls), a new "who needs care" surface appears as both a Proactive Alert and a dashboard widget, and the overdue-contact cadence rules are single-sourced so the page, widget, and alert can never drift.
+- **Two new dashboard widgets + an interactive architecture map.** A Feeds unread digest and a cross-domain health-logging streak join the dashboard, and a new Integration Flows doc visually maps how ~60 PortOS components talk to each other across 10 end-to-end flows.
+- **Catalog ingredient media now accepts uploads and voice memos.** Drag-and-drop or pick image/audio/video files, or record a voice memo that's transcribed and attached — all federated to sync peers as real bytes, with inline players for audio and video.
+- **Switch project workspaces from ⌘K and voice.** A new workspace-switch action snapshots the workspace you leave and reconciles the target project's git branch, shell sessions, and scoped tasks; CoS auto-snapshots a workspace before dispatching an agent to a different repo.
+- **Security: closed two DNS-rebinding TOCTOU gaps.** RSS feed fetches and catalog URL ingest (via Chrome/CDP) now pin the connection to the SSRF-vetted IP and re-verify on every redirect, so a rebinding DNS answer can't steer a fetch to the LAN or cloud-metadata after validation passes.
+- **Deep-linkable selections everywhere.** Authors, music artists/albums/tracks, sharing buckets, prompt stages/variables, and JIRA reports now encode the open record in the URL — shareable, bookmarkable, reload-safe, and reachable from ⌘K/voice/back button.
+- **Clear delete confirmations.** Destructive actions across rounds, universes, series, share buckets, issues/episodes, Writers Room, Ask, and the Universe Builder now show an explicit inline "Delete? / Cancel" prompt instead of a hidden second click, with comfortable 44px touch targets.
+- **Accessibility sweep.** ~260 config-form label/input pairs across ~80 files now flow through a shared `FormField` wrapper so clicking a label focuses its field and screen readers announce the pairing — styling preserved verbatim.
+- **UI polish.** Layout-shaped loading skeletons for the DataDog/Jira/GitHub pages, a full-width Story Builder index, design-token cleanup of the last hardcoded colors, consolidated shared formatters, and fixes for double error toasts across ~50 call sites.
+- **Reliability fixes.** CoS `/do:next --swarm` orchestrators are no longer reaped mid-merge (which left PRs half-cleaned), a POST daily-reminder false-nudge after a timezone change is fixed, and a batch of v2.25.0 release-review robustness follow-ups landed.
+
+## Media
+
+- **Sketch & Annotation Canvas (phase 1): draw over any generated image, save, reload, and export a flattened PNG.** Media History and Collection image cards gained an "Annotate" action that opens a new deep-linkable `/media/annotate/:mediaKey` page — a plain `<canvas>` stroke layer over the image with draw/erase, per-stroke color + brush-size, undo, and clear. Pointer events cover mouse, pen, and touch (`touch-action: none`, so drawing works at 360px phone width without scrolling the page). Strokes persist as a per-image sidecar (`data/media-sketches/`, JSON vectors stored in natural-pixel space so they restore exactly at any display size) plus a flattened PNG export, via a new Zod-validated `GET/PUT /api/media/sketches/:key` (retrievable at `/png`). Reachable from ⌘K and voice ("annotate"/"sketch"). Phases 2 (feed the markup back into img2img re-render) and 3 (blank-canvas storyboard) remain open on #2036.
+
+## Dev Tools
+
+- **New interactive Integration Flows doc at `/devtools/flows`.** A single-page visual map of how PortOS packages talk to each other: ~60 components (client pages, client services, routes & sockets, server services, server lib, data stores, external systems) laid out in columns, with 10 documented end-to-end flows — Create Image, Start a Story, Voice Command, CoS Agent Run, Scheduled Task, Start/Stop App (PM2), Shell Session, Run Backup, Peer Sync, and Self-Update. Clicking a flow dims everything else, draws its numbered hops with transport-coded edges (HTTP / SSE / Socket.IO / EventEmitter / process spawn / file+DB I/O), and annotates what's passed at each hop; clicking a node shows its file, role, and the flows it participates in. The renderer (`client/public/flows.html`, dependency-free) is driven entirely by `client/public/flows.json`, so new flows are documented by editing JSON — an integrity test (`client/src/lib/flowsDoc.test.js`) verifies every referenced node/transport resolves and every referenced source file still exists, so refactors can't silently rot the doc. Launchable from the Dev Tools sidebar, ⌘K ("Flows"), and voice nav; selected flow is deep-linkable via `?flow=`, and "Open full screen" opens the standalone doc in a new tab.
+
+## Security
+
+- **RSS feed fetches now pin the connection to the SSRF-vetted IP, closing a DNS-rebinding TOCTOU.** `feeds.js` previously resolved a feed hostname, verified it wasn't private, then made a *separate, unpinned* fetch — undici re-resolved at connect time, so an attacker's DNS could answer public during validation and private (home-network / cloud-metadata) at the actual connect. Feed fetches now route through the shared `safeUrlFetch` guard (the same one moodBoard/Pinterest uses since #1859): the hostname is resolved once and the connection is pinned to that exact vetted address, re-validated and re-pinned on every redirect hop. `safeUrlFetch` gained a strict `blockPrivate` mode so feeds keep their historical block-all-private posture (an arbitrary user-added feed URL still can't be aimed at the LAN) while gaining the pin, and a `throwOnUnsafe: false` option so the feeds path returns its existing friendly "Could not fetch feed" result instead of a bubbled 400 (#2046).
+- **Catalog URL-ingest (Chrome/CDP) now verifies Chrome's actual connection IP, closing the last DNS-rebinding gap.** Catalog "ingest from URL" pre-checked the hostname with a `dns.lookup` but then handed the fetch to Chrome, which re-resolves DNS itself — so a rebinding answer could steer Chrome to a loopback/link-local/cloud-metadata address after validation passed (a TOCTOU the undici pin in #2046 couldn't cover for a browser). Ingest now navigates through a pinned path (`navigateToUrlPinned`) that opens a blank tab, subscribes to CDP Network events, then drives the navigation — verifying against Chrome's OWN reported `remoteIPAddress` that every main-frame hop (initial request, each HTTP redirect, AND any client-side navigation that fires during the post-load settle window) connected to a non-blocked address, failing closed (tab torn down, ingest refused) on any disallowed hop or a top-level navigation still in flight. The DOM read runs on the SAME pinned CDP session and is re-verified after the read, so no late navigation can slip between "stop monitoring" and "read the page" (#2068).
+
+## Workspace Contexts
+
+- **Switch project workspaces from ⌘K and voice, and CoS now auto-snapshots the workspace it leaves.** A new `workspace_switch` action ("switch workspace to BookLoom", "restore my PortOS context") saves a snapshot of the workspace you're leaving, then reconciles the target project's saved context — git branch, in-repo shell sessions, scoped tasks — and reports what's still live to re-attach; it appears in the ⌘K palette and resolves by voice. When CoS dispatches a coding agent against a different app/repo than it was last working in, it now silently snapshots the previous workspace's context first (snapshot-only — no auto-restore, no LLM calls), so switching between repos preserves what each project looked like, visible on the Workspace Contexts page (#2035).
+
+## Catalog
+
+- **Catalog ingredient media now accepts file uploads and voice memos, replacing the two "coming soon" stubs.** The ingredient Media panel gained an "Upload file" picker + real drag-and-drop of image/audio/video files (dropping a file, not just an in-app gallery tile, now attaches it) and a "Record memo" button that captures a WAV via the browser, transcribes it through the existing Whisper pipeline, and attaches the audio with its transcript in the caption. Uploads land in the matching federating library dir (images as PNG, audio, video) so a sync peer receives the bytes, not a broken reference — the same two-layer path gallery attachments already use. Audio and video attachments now render inline players in the panel (#2038).
+
+## Tribe
+
+- **Tribe touchpoints now auto-log from synced calendar events and messages (#2033).** The Tribe model always supported `source: 'calendar'|'message'` touchpoints but nothing produced them. You can now record known emails/handles on a person (new "Emails & handles" field), and whenever a calendar sync or message sync ingests an event/message involving that person, PortOS logs a touchpoint automatically — deterministic email/handle matching (plus exact unique-name fallback), no LLM calls. Calendar touchpoints dedupe per event id and only count events that have already happened; message touchpoints dedupe per thread + day so a long thread doesn't spam the timeline. Auto-logged touchpoints advance `last_contact_on` so overdue/cadence status reflects them, and the Tribe timeline shows each touchpoint's source with an icon (Calendar / Message / Manual). Matching is pure and unit-tested (`server/lib/tribeMatch.js`); idempotency is enforced by a partial unique index on `(person_id, dedupe_key)`.
+- **"Who needs care" now surfaces outside the Tribe page — as a Proactive Alert and a dashboard widget (#2032).** Overdue-contact status is now computed server-side (`getCareSummary`/`personCadenceStatus` in `server/services/tribe.js`, exposed at `GET /api/tribe/care`) as a single source of truth mirroring the Tribe page's cadence logic. Proactive Alerts gains a `checkTribeCadence()` check that emits "N people are overdue for contact" linking to `/tribe` (quiet when none are), and a new gated `Tribe Care` dashboard widget lists the most-overdue people (or an "all caught up" state), hidden entirely on installs with no Tribe people.
+
+## Delete confirmations
+
+- **Destructive actions now show a clear "Delete? / Cancel" prompt instead of a hidden second click.** Deleting a round, universe, series, share bucket, issue/episode, or a Writers Room work/folder — and removing an Ask conversation or deleting a world in the Universe Builder — used to silently re-arm the same button on the first click, with nothing on screen telling you a second click was needed. Each of these now pops an explicit inline confirm/cancel affordance right where you clicked, so it's obvious what will happen and easy to back out. The pipeline's "replace existing scenes / pages / audio lines" extract buttons got the same treatment (an inline "Replace? / Cancel" row) instead of arming via a fleeting toast. Delete/confirm controls in the Writers Room library were also enlarged to a comfortable 44px touch target for mobile.
+
+## Deep-linkable selections
+
+- **Picking an author, music artist/album/track, share bucket, prompt stage/variable, or JIRA report now lives in the URL — so it's shareable, bookmarkable, reload-safe, and reachable from ⌘K / voice / the back button (#2025).** These master-detail pages previously kept the open record in local state, so a pasted link or a reload always dropped you back on an empty list. Authors now open at `/authors/:id` (`/authors/new` to create), the Music tabs at `/music/:tab/:id`, Sharing buckets at `/sharing/buckets/:bucketId`, the Prompt Manager via `?stage=` / `?var=`, and JIRA Reports via `?reportApp=&reportDate=`. Deleting or clearing a selection returns to the index, and a stale/deleted id now shows a "could not be found" fallback instead of a blank pane. (OpenClaw's session picker stays local by design — its sessions are ephemeral runtime state, not user-owned records.)
+
+## Accessibility
+
+- **Config form labels now focus their field when clicked and read correctly to screen readers.** Many settings/config forms (AI Providers, DataDog, feature-agent config, message & calendar account setup, scheduled-task provider/model pickers, the agent world/schedule tabs, MeatSpace nicotine + POST drills, and more) rendered the label as a plain sibling of its input with no association, so clicking the label did nothing and assistive tech couldn't announce the pairing. These fields now flow through a shared `FormField` wrapper that generates a stable id and wires `htmlFor`/`id` automatically, keeping the exact same styling (#2027). Remaining forms are tracked for a follow-up sweep (#2051).
+- **The follow-up sweep wired the remaining config-form labels to their controls.** Continuing #2027, ~130 more sibling `<label>`+input pairs across ~40 files — agents (overview/list/published), digital-twin tabs, image-gen controls, media/prompt tools, MeatSpace panels, brain, CoS memory/resume, writers-room, and pages (PromptManager, VideoGen, Jira, Sharing, Loras, Security, ImageGen, Templates, Loops, Browser, and more) — now flow through the shared `FormField` wrapper so clicking a label focuses its field and screen readers announce the pairing. Accessibility only: existing Tailwind classes are preserved verbatim, wrapping `<label><input/></label>` and radio/toggle group labels are left untouched, and controls whose custom component doesn't forward `id` to a DOM input were deliberately skipped (#2051).
+
+## Layout
+
+- **The Story Builder index now uses the full desktop width instead of a single narrow column.** The create form and the "Continue a story" session list previously stacked in one `max-w-3xl` column, leaving most of a 1280px+ screen empty. Above the `lg` breakpoint they now sit side by side — form left, in-progress sessions in a fixed-width sidebar on the right — mirroring the POST launcher's two-column layout (#1986), so your existing stories are visible without scrolling. Below `lg` the columns stack exactly as before, so mobile is unchanged (#2030).
+
+## Dashboard
+
+- **Two new dashboard widgets surface previously invisible data: a Feeds unread digest and a health-logging streak.** The Feeds Digest widget shows your total unread RSS/Atom count plus the top unread feeds by count and deep-links to Brain → Feeds — it consumes the existing `getFeedStats` wrapper (now the endpoint's first real caller) so unread counts aren't recomputed. The Health Logging Streak widget mirrors the Activity Streak / Daily POST pattern: current + best cross-domain logging streak, a 7-day sparkline, and this-week counts per domain (alcohol, nicotine, workouts, body, blood pressure) via a new `GET /api/meatspace/logging-stats` aggregate, deep-linking to MeatSpace. `feeds` seeds into the Everything layout and `meatspace-streak` into the Health layout (fresh installs via `DEFAULT_LAYOUTS`, existing installs via migration 156); both are gated hidden until there's data and render at mobile widths. Also normalized the workout/body/blood-pressure default log date to the local calendar day (matching alcohol/nicotine) so a same-day US-evening entry lands on today's streak/sparkline instead of tomorrow's UTC bucket (#2034).
+
+## Loading states
+
+- **The DataDog, Jira, and GitHub integration pages now show a layout-shaped skeleton on first paint instead of a centered "Loading…" line.** Each page previously rendered a bare full-screen text message sized with `h-screen`, which mis-sized under mobile browser chrome and jumped when the real content arrived. They now share a `PageSkeleton` that reserves the header + card-grid dimensions (matching the loaded layout, using the `port-*` design tokens like the dashboard's `WidgetSkeleton`), so there's no post-load layout jump and no full-height wrapper fighting Layout's scroll (#2029).
+
+## Internal
+
+- **[issue-2073] Docs editorial pass: four shipped feature docs rewritten from plan-tense to current-state.** `docs/features/digital-twin.md`, `openclaw-operator-chat.md`, `post.md`, and `writers-room.md` still read as pre-build plans/specs ("Planned Phases", "Proposed capabilities", phased roadmaps) despite describing shipped features. Each was rewritten as current-state documentation with every claim verified against the code, correcting stale details along the way: digital-twin's import list (Spotify/Letterboxd/iCal, not Last.fm; transcript/image analysis, not live voice/video capture), POST's undocumented sixth Cognitive domain plus Morse training, drill cache, training log, and adaptive difficulty, writers-room's PostgreSQL-primary storage, CD-bridge-instead-of-render-plans design, story bible, and storyboard surfaces, and OpenClaw's shipped endpoint/config/degradation surface (keeping the honest list of proposed-but-unbuilt endpoints). The three digital-twin-adjacent docs (`soul-system.md` / `digital-twin.md` / `identity-system.md`) now cross-link with a note explaining which angle each covers (#2073).
+- Addressed the v2.25.0 release-review robustness follow-ups (#2047). Client: the Shell restart button's deferred `startSession()` now aborts if the user switches sessions within its 1s window (generation guard, matching the page's other deferred socket emits); MusicVideo auto-arrange snapshots the board and reverts on a mid-loop PATCH failure instead of leaving the optimistic full arrangement over a server-side partial; the video timeline editor re-derives the selected clip from its stable `clipId` after a refresh so a `CONFLICT` reload no longer collapses the inspector; and MemoryPractice's chunk-/sequence-exhausted fallbacks moved their `setState` + `submitMemoryPractice()` POSTs out of the render body into a terminal-transition effect. Server: `triggerReplenish` now guards its fire-and-forget `replenishType` promise like `requestCacheFill` (a drill-cache disk-write failure no longer surfaces as an unhandled rejection); the `/post/drill` schema accepts `memoryItemId` so it reaches `generateMemoryDrill` instead of being silently stripped; `applyProjectPatch` regresses a music-video project's status to `draft` on track change (the analysis it cleared must be redone); and ~20 dead imports left over from the #1830 peerSync split were removed from `peerSyncReceive.js`.
+- Deflaked the `UpdateTab reconcile flow` tests, which intermittently failed CI with "Unable to find role=button and name 'Restarting...'" (#2065). The component mirrors `updating` into `updatingRef` via a passive effect, and the disconnect handler's guard reads that ref synchronously; since `runUpdate()` calls `setUpdating(true)` outside any `act` (after awaiting the pre-update health check), the "Reconciling..." button could commit — satisfying the test's `waitFor` — a scheduler tick before the ref-sync effect ran, leaving the ref stale-false when `disconnect` fired so the confirmation timer never armed. The test now flushes pending effects (`await act(async () => {})`) before firing `disconnect`, syncing the ref to the state production always reaches over real network time. Test-only change; no product behavior touched.
+- Made the tribeCadence contract test timezone-independent: its `daysAgo()` helper built a `YYYY-MM-DD` string via `toISOString()` (UTC) while `daysSinceDate()` parses it in local time, so in the evening of a UTC-behind timezone the date rolled forward a day and the overdue/soon boundary assertions went off-by-one. The helper now builds the string from local calendar fields (it already passed in CI's UTC runner).
+- Docs audit and reorganization: reclassified two non-feature docs out of `docs/features/` — the cross-domain insights design spike now lives at `docs/plans/2026-06-03-cross-domain-insights-engine.md` (it specs future work, it isn't feature documentation) and the OpenClaw pre-implementation extension-point audit at `docs/research/2026-03-31-openclaw-operator-chat-audit.md` (it's an explicitly-unmaintained investigation record). `docs/README.md` links updated. Also fixed `docs/PORTS.md` claiming the `PORTS` object is "re-exported at `server/lib/ports.js`" (it's a manually-synced mirror — the ESM server can't `require()` the CommonJS config), replaced a dead `#m7-app-templates` anchor in `docs/features/app-wizard.md` with a real pointer to `GET /api/scaffold/templates`, and refreshed the stale example model IDs in `docs/TROUBLESHOOTING.md`. The audit verified every other doc against the code: all 13 top-level guides are indexed and accurate, every feature doc's modules/routes/nav entries resolve, and plans/decisions/research/superpowers/themes/examples/media have zero orphans or broken links.
+- Consolidated five component-local duration/uptime/time-until formatters onto the shared `utils/formatters.js` helpers (`formatDurationMs`, `timeUntil`), per the "do not re-define formatters inside components" convention (#2028). `formatDurationMs` gained a day bucket (`2d 3h`) so long uptimes no longer render as an unbounded hours count; ProcessesTab, CityHud, Shell session ages, the CoS QuickSummary "next job" countdown, and the Loops interval label now all route through the shared helpers, and a `console.log` in `memoryClassifier.js` was collapsed to a single interpolated line.
+- Migration 155 heals `data/prompts/stages/cd-treatment.md` installs that #1808's anchor-based migration 148 left stranded (#2042). Installs seeded before the `imageStrength` scene knob (older pre-#1808 template) got the `## Cast & ingredients` list but missed the per-scene `"cast": [{ "ingredientId": … }]` field, so the Creative Director cast-threading regression test stayed red on the runtime template and migration 148 (already applied) never re-ran. The new hash-driven prompt-replace upgrades those copies (and both pristine pre-#1808 shipped versions) to the current shipped reference, leaving hand-customized copies untouched. Also folds `cd-treatment.md` into `buildPromptDriftTables` so setup-data.js's drift warning classifies a stranded copy correctly.
+- Replaced the last hardcoded `port-*` hex stragglers with design tokens (#2031). The Security page's audio-level meter used raw `#ef4444`/`#f59e0b`/`#22c55e` in an inline `backgroundColor`; these now resolve through `rgb(var(--port-error))`/`--port-warning`/`--port-success` so they track the theme. The Chief-of-Staff page's "CoS" wordmark gradient was duplicated inline three times and is now a single module-level `COS_TITLE_GRADIENT` constant. Visual output is unchanged.
+- Fixed a POST daily-reminder false-nudge after a global timezone change (#2040). `settings.js` now stamps a `timezoneUpdatedAt` timestamp whenever the `timezone` value actually changes (unrelated saves leave it untouched), exposed via `getTimezoneUpdatedAt()` in `timezone.js`. The reminder's boot-time missed-slot catch-up (`catchUpMissedSlot`) now skips a slot that predates the LATER of the reminder's own config save (#2015) or the last timezone change — so switching timezones and then restarting the server the same day can no longer replay a slot that was never scheduled under the active zone. The new field is reusable by any other timezone-dependent scheduler.
+- Fixed double error toasts across ~50 call sites that owned a custom `.catch` toast: they now pass `{ silent: true }` so the `apiCore.request()` default toast no longer fires alongside the component's own, per the "Silent vs. toasting API requests" convention (#2026). Also added the missing trailing `options = {}` passthrough to ~40 `api*.js` wrappers (CoS tasks/agents/jobs, Brain people/projects/ideas/admin/memories/buckets/inbox, GSD, memory approve/reject, app task-type overrides, feature-agent controls, browser/backup/system, MeatSpace POST drills, goals, messages) so callers can actually suppress the built-in toast. Sites whose `.catch` only reverts state (no toast) were intentionally left on the default single toast.
+- Audited the cross-domain insights engine against the no-cold-bootstrap LLM policy and documented the trigger contract at the two generation entry points (#2037). Verified the only functions that call an AI provider — `generateThemeAnalysis` (INS-02) and `refreshCrossDomainNarrative` (INS-04) — are reached solely from user-triggered POST endpoints (`/api/insights/themes/refresh`, `/api/insights/narrative/refresh`, both fired by an explicit "Refresh" click); the page-mount and cached-read paths (`getThemeAnalysis`/`getCrossDomainNarrative`) are disk-only, boot (`server/index.js`) mounts the router without generating, and no scheduler references insights. No violation found — added a contract comment block plus a regression test asserting the read paths never call a provider.
+- Single-sourced the Tribe care-cadence rules so the page, the Care dashboard widget, and the proactive alert can no longer drift (#2060). The Tribe page's `contactStatus` (client) and the server's `personCadenceStatus`/`getCareSummary` (added in #2032) previously carried two hand-mirrored copies of the same "external-excluded / missing-vs-overdue / <=7d soon" state machine. The rules now live in one authoritative pure module, `server/lib/tribeCadence.js` (`cadenceStatus`, `daysSinceDate`), mirrored to `client/src/lib/tribeCadence.js`; `personCadenceStatus` re-exports it and the client `contactStatus` is now a thin presentation wrapper that only attaches label/tone. A cross-boundary contract test imports both copies and fails CI if they ever diverge. Semantics are unchanged — the Tribe page header counts, the widget, and the alert all compute identically to before.
+- Refreshed GOALS.md status to reflect shipped Apple Health integration (#2039). The Health & Longevity status-table row said "Apple Health integration planned," but the integration shipped: `server/routes/appleHealth.js` (ingest/metrics/correlation/XML+clinical import) is wired through `apiHealth.js` into the MeatSpace Alcohol/Health/Nicotine tabs. The row now marks it shipped, and the stale "Apple Health Integration" bullet was removed from Secondary Goals. Documentation only; other status rows spot-checked against code (Sketch & Annotation Canvas confirmed genuinely unshipped, left as planned).
+- Prevented CoS `/do:next --swarm` orchestrators from being reaped mid-merge as `idle-complete`, which left PRs opened-but-unmerged or merged-but-uncleaned while `state.json` recorded `status: completed` (#2074). The swarm Phase C serialized merge queue merges PRs one at a time, and each subsequent PR must rebase onto the new `main` and re-run required CI — several minutes of *silent* TUI output per PR that routinely blew past the 3-minute idle default, so the runner reaped the still-working orchestrator. The TUI idle detector (`agentTuiSpawning.js`) now latches a merge-queue flag (`createMergeQueueTracker`/`isMergeQueueSignal` in `tuiHandshake.js`) the first time it sees Phase C chrome (`gh pr merge`, `gh pr checks`, `--delete-branch`, "serialized merge queue", "Phase C") and, while latched, extends the idle grace to `MERGE_QUEUE_IDLE_TIMEOUT_MS` (15min) — comfortably covering one CI run's silent gap while still bounding a genuinely-dead orchestrator's reap. Detection is deliberately conservative (a false positive only extends the window; a false negative preserves prior behavior). As a blast-radius safety net, if the *extended* window still elapses the agent is finalized as a needs-manual-finish failure with reason `merge-queue-idle-timeout` (pointing at open/uncleaned PRs) instead of the silent `idle-complete` success that hid the half-done queue.
+
+## Full Changelog
+
+**Full Diff**: https://github.com/atomantic/PortOS/compare/v2.25.0...v2.26.0
diff --git a/GOALS.md b/GOALS.md
index efc6b48ec..de44f0643 100644
--- a/GOALS.md
+++ b/GOALS.md
@@ -63,7 +63,6 @@ Sharpen the mind alongside everything else. **POST** delivers a daily 5-minute s
 ## Secondary Goals
 
 - **Multi-Modal Identity Capture**: Voice, video, and image-based identity modeling beyond text
-- **Apple Health Integration**: Live sync from iOS and bulk historical import to unify all health data in one place
 - **Chronotype-Aware Scheduling**: Align task scheduling to natural energy patterns derived from genome sleep markers
 - **Music & Audio Production**: MusicGen-style local generation, whole-episode audio mixing strategy, audio recording / podcast studio (deferred until 128GB hardware arrives)
 - **Inspiration & Mood Board**: A dedicated canvas for collecting visual / textual references that feed into Universe Builder, Writers Room, and Creative Director — distinct from raw Media History
@@ -102,7 +101,7 @@ The active roadmap lives in the GitHub issue tracker — open issues labeled
 | Full Digital Autonomy | Ongoing | Agent tools, Moltworld, scheduling, skill system operational. Expanding platform coverage and autonomy tiers. |
 | Knowledge Legacy | Ongoing | Autobiography, genome, behavioral profiles, written work, built worlds captured. Portable Legacy Export bundle (Digital Twin → Legacy Bundle) ships a self-contained Markdown + JSON + manifest archive, with optional rendered PDF. Richer key-decisions sourcing and deeper domain coverage continue. |
 | Anywhere Access | Complete | Tailscale integration working. Mobile-responsive UI. All features accessible remotely. |
-| Health & Longevity | Ongoing | MeatSpace shipped with death clock, LEV tracker, alcohol/blood/body/epigenetic/eye/genome/lifestyle tracking. Apple Health integration planned. |
+| Health & Longevity | Ongoing | MeatSpace shipped with death clock, LEV tracker, alcohol/blood/body/epigenetic/eye/genome/lifestyle tracking. Apple Health integration shipped (live ingest, metrics/correlation queries, bulk XML/clinical import). |
 | Personal Productivity & Life Management | Ongoing | Calendar (agenda/day/week/month/lifetime/review), Messages inbox + drafts, voice agent, Telegram bot, OpenClaw operator chat all shipped. Proactive CoS speech triggers and voice-tool coverage expanding. |
 | Cognitive Training & Lifelong Learning | Ongoing | POST (math/wordplay/memory/verbal/imagination), Morse, Rapid Reader, Wiki shipped. Adding more training domains and integrating cross-domain insights (e.g. genome-informed cognitive load patterns). |
 
diff --git a/client/public/flows.html b/client/public/flows.html
new file mode 100644
index 000000000..577562df1
--- /dev/null
+++ b/client/public/flows.html
@@ -0,0 +1,522 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>PortOS Integration Flows</title>
+<style>
+  :root {
+    color-scheme: dark; /* dark UA scrollbars + form controls to match the page */
+    --bg: #0f0f0f;
+    --card: #1a1a1a;
+    --border: #2a2a2a;
+    --accent: #3b82f6;
+    --success: #22c55e;
+    --warning: #f59e0b;
+    --error: #ef4444;
+    --text: #e5e7eb;
+    --muted: #9ca3af;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
+  ::-webkit-scrollbar { width: 8px; height: 8px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+  ::-webkit-scrollbar-thumb:hover { background: #3f3f3f; }
+  ::-webkit-scrollbar-corner { background: transparent; }
+  html, body { height: 100%; }
+  /* The scroll containers below re-declare the body background because some
+     browsers paint composited scroll regions white when they inherit none. */
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  header {
+    display: flex;
+    align-items: baseline;
+    gap: 12px;
+    padding: 10px 16px;
+    border-bottom: 1px solid var(--border);
+    flex: none;
+    background: var(--bg);
+    color: var(--text);
+  }
+  header h1 { font-size: 16px; font-weight: 600; }
+  header .sub { color: var(--muted); font-size: 12px; }
+  body.embed header { display: none; }
+  #app { flex: 1; display: flex; min-height: 0; }
+
+  /* Sidebar */
+  #sidebar {
+    width: 300px;
+    flex: none;
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    background: var(--bg);
+    color: var(--text);
+  }
+  #flowList { overflow-y: auto; padding: 8px; flex: none; max-height: 45%; background: var(--bg); }
+  .cat { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin: 10px 6px 4px; }
+  .flow-btn {
+    display: block;
+    width: 100%;
+    text-align: left;
+    background: none;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    color: var(--text);
+    padding: 6px 8px;
+    cursor: pointer;
+    font: inherit;
+  }
+  .flow-btn:hover { background: var(--card); }
+  .flow-btn.active { background: var(--card); border-color: var(--accent); }
+  .flow-btn .n { color: var(--muted); font-size: 11px; }
+  #detail {
+    flex: 1;
+    overflow-y: auto;
+    border-top: 1px solid var(--border);
+    padding: 10px;
+    min-height: 0;
+    background: var(--bg);
+  }
+  #detail .desc { color: var(--muted); font-size: 12.5px; margin-bottom: 10px; }
+  #detail h2 { font-size: 14px; margin-bottom: 4px; }
+  .step {
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 7px 8px;
+    margin-bottom: 6px;
+    cursor: pointer;
+    background: var(--card);
+  }
+  .step.hl { border-color: var(--accent); }
+  .step .route { font-size: 12.5px; font-weight: 600; }
+  .step .route .num {
+    display: inline-block;
+    min-width: 18px;
+    height: 18px;
+    border-radius: 9px;
+    background: var(--accent);
+    color: #fff;
+    font-size: 11px;
+    line-height: 18px;
+    text-align: center;
+    margin-right: 6px;
+  }
+  .step .label { font-size: 12px; margin-top: 2px; }
+  .step .payload { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
+  .chip {
+    display: inline-block;
+    font-size: 10px;
+    border-radius: 4px;
+    padding: 0 5px;
+    margin-left: 6px;
+    border: 1px solid;
+    vertical-align: 1px;
+  }
+  .node-info { font-size: 12.5px; }
+  .node-info .file { color: var(--muted); font-family: ui-monospace, monospace; font-size: 11px; word-break: break-all; margin: 4px 0 8px; }
+  .node-info ul { margin: 4px 0 0 16px; }
+  .node-info li a { color: var(--accent); cursor: pointer; text-decoration: none; }
+  #resetBtn {
+    margin: 8px;
+    flex: none;
+    background: var(--card);
+    border: 1px solid var(--border);
+    color: var(--text);
+    border-radius: 6px;
+    padding: 6px;
+    cursor: pointer;
+    font: inherit;
+  }
+  #resetBtn:hover { border-color: var(--accent); }
+  #mobileSelect { display: none; }
+
+  /* Diagram */
+  #diagramWrap { flex: 1; overflow: auto; position: relative; min-width: 0; background: var(--bg); }
+  #diagram { position: relative; }
+  #edges { position: absolute; inset: 0; }
+  .colhead {
+    position: absolute;
+    top: 8px;
+    color: var(--muted);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    text-align: center;
+  }
+  .node {
+    position: absolute;
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 4px 8px;
+    font-size: 12px;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: opacity 0.15s, border-color 0.15s;
+  }
+  .node:hover, .node:focus-visible { border-color: var(--muted); outline: none; }
+  .node.dim { opacity: 0.22; }
+  .node.hl { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
+  .node.selected { border-color: var(--warning); box-shadow: 0 0 0 1px var(--warning); }
+  path.edge { fill: none; opacity: 0.14; transition: opacity 0.15s; }
+  path.edge.hl { opacity: 1; }
+  path.edge.hidden { opacity: 0; }
+  path.edge.focus { stroke-width: 3; }
+  .badge { pointer-events: none; }
+  .badge circle { fill: var(--accent); }
+  .badge text { fill: #fff; font-size: 10px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
+
+  /* Legend */
+  #legend {
+    position: sticky;
+    left: 0;
+    bottom: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 14px;
+    padding: 6px 12px;
+    border-top: 1px solid var(--border);
+    background: var(--bg);
+    font-size: 11px;
+    color: var(--muted);
+  }
+  #legend svg { vertical-align: middle; margin-right: 4px; }
+  #err { padding: 24px; color: var(--error); }
+
+  @media (max-width: 700px) {
+    #app { flex-direction: column; }
+    #sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); max-height: 45%; }
+    #flowList, #resetBtn { display: none; }
+    #mobileSelect {
+      display: block;
+      margin: 8px;
+      background: var(--card);
+      color: var(--text);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 6px;
+      font: inherit;
+    }
+    #detail { border-top: none; }
+  }
+</style>
+</head>
+<body>
+<header>
+  <h1>PortOS Integration Flows</h1>
+  <span class="sub">click a flow to trace it across the system &middot; click a node for details &middot; Esc to reset</span>
+</header>
+<div id="app">
+  <div id="sidebar">
+    <select id="mobileSelect" aria-label="Select flow"></select>
+    <div id="flowList"></div>
+    <button id="resetBtn" type="button">Show all</button>
+    <div id="detail"></div>
+  </div>
+  <div id="diagramWrap">
+    <div id="diagram"></div>
+    <div id="legend"></div>
+  </div>
+</div>
+<script>
+(async () => {
+  const EMBED = new URLSearchParams(location.search).get('embed') === '1';
+  if (EMBED) document.body.classList.add('embed');
+
+  let data;
+  try {
+    const res = await fetch('/flows.json');
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    data = await res.json();
+  } catch (err) {
+    document.getElementById('app').innerHTML = `<div id="err">Failed to load /flows.json: ${err.message}</div>`;
+    return;
+  }
+
+  const nodesById = new Map(data.nodes.map((n) => [n.id, n]));
+  const transportsById = new Map(data.transports.map((t) => [t.id, t]));
+  const groupsSorted = [...data.groups].sort((a, b) => a.column - b.column);
+
+  // ---- layout ----
+  const COL_W = 200, COL_GAP = 56, NODE_H = 30, NODE_GAP = 12, TOP = 42, PAD = 16;
+  const colNodes = groupsSorted.map((g) => data.nodes.filter((n) => n.group === g.id));
+  const pos = new Map(); // id -> {x, y, w, h}
+  groupsSorted.forEach((g, ci) => {
+    const x = PAD + ci * (COL_W + COL_GAP);
+    colNodes[ci].forEach((n, ri) => {
+      pos.set(n.id, { x, y: TOP + ri * (NODE_H + NODE_GAP), w: COL_W, h: NODE_H });
+    });
+  });
+  const width = PAD * 2 + groupsSorted.length * COL_W + (groupsSorted.length - 1) * COL_GAP;
+  const height = TOP + Math.max(...colNodes.map((c) => c.length)) * (NODE_H + NODE_GAP) + PAD;
+
+  const diagram = document.getElementById('diagram');
+  diagram.style.width = width + 'px';
+  diagram.style.height = height + 'px';
+
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('id', 'edges');
+  svg.setAttribute('width', width);
+  svg.setAttribute('height', height);
+  diagram.appendChild(svg);
+
+  groupsSorted.forEach((g, ci) => {
+    const head = document.createElement('div');
+    head.className = 'colhead';
+    head.textContent = g.label;
+    head.style.left = (PAD + ci * (COL_W + COL_GAP)) + 'px';
+    head.style.width = COL_W + 'px';
+    diagram.appendChild(head);
+  });
+
+  const nodeEls = new Map();
+  for (const n of data.nodes) {
+    const p = pos.get(n.id);
+    const el = document.createElement('div');
+    el.className = 'node';
+    el.textContent = n.label;
+    el.title = n.file ? `${n.label} — ${n.file}` : n.label;
+    el.setAttribute('role', 'button');
+    el.tabIndex = 0;
+    el.style.left = p.x + 'px';
+    el.style.top = p.y + 'px';
+    el.style.width = p.w + 'px';
+    el.style.height = p.h + 'px';
+    el.addEventListener('click', () => showNode(n.id));
+    el.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); showNode(n.id); }
+    });
+    diagram.appendChild(el);
+    nodeEls.set(n.id, el);
+  }
+
+  // ---- edges ----
+  // Deduplicate edges shared by multiple flows; curve parallel edges apart.
+  const edgeKey = (s) => `${s.from}|${s.to}|${s.transport}`;
+  const edges = new Map(); // key -> SVG path element
+  const pairCount = new Map();
+  const allSteps = data.flows.flatMap((f) => f.steps);
+  for (const s of allSteps) {
+    const key = edgeKey(s);
+    if (edges.has(key)) continue;
+    const pairKey = [s.from, s.to].sort().join('|');
+    const idx = pairCount.get(pairKey) || 0;
+    pairCount.set(pairKey, idx + 1);
+    const a = pos.get(s.from), b = pos.get(s.to);
+    const y1 = a.y + a.h / 2, y2 = b.y + b.h / 2;
+    let d;
+    if (a.x === b.x) {
+      // same-column hop: loop out the right side instead of sweeping across the column
+      const x1 = a.x + a.w, x2 = b.x + b.w;
+      const bend = 48 + idx * 14;
+      d = `M ${x1} ${y1} C ${x1 + bend} ${y1}, ${x2 + bend} ${y2}, ${x2} ${y2}`;
+    } else {
+      const forward = a.x < b.x;
+      const x1 = forward ? a.x + a.w : a.x;
+      const x2 = forward ? b.x : b.x + b.w;
+      const bend = Math.max(36, Math.abs(x2 - x1) * 0.35) * (forward ? 1 : -1);
+      const lift = idx * 14 * (idx % 2 ? 1 : -1); // spread parallel edges
+      d = `M ${x1} ${y1} C ${x1 + bend} ${y1 + lift}, ${x2 - bend} ${y2 + lift}, ${x2} ${y2}`;
+    }
+    const t = transportsById.get(s.transport);
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', d);
+    path.setAttribute('class', 'edge');
+    path.setAttribute('stroke', t.color);
+    path.setAttribute('stroke-width', '2');
+    if (t.dash) path.setAttribute('stroke-dasharray', t.dash);
+    svg.appendChild(path);
+    edges.set(key, path);
+  }
+
+  let badgeLayer = null;
+
+  // ---- legend ----
+  const legend = document.getElementById('legend');
+  legend.innerHTML = data.transports.map((t) =>
+    `<span><svg width="26" height="8"><line x1="0" y1="4" x2="26" y2="4" stroke="${t.color}" stroke-width="2"${t.dash ? ` stroke-dasharray="${t.dash}"` : ''}/></svg>${t.label}</span>`
+  ).join('');
+
+  // ---- sidebar flow list ----
+  const flowList = document.getElementById('flowList');
+  const mobileSelect = document.getElementById('mobileSelect');
+  const detail = document.getElementById('detail');
+  const DEFAULT_DETAIL = '<div class="desc">Select a flow to see each hop annotated with its transport and payload, or click any node to see what it is and which flows pass through it.</div>';
+  detail.innerHTML = DEFAULT_DETAIL;
+  const flowBtns = [];
+  const categories = [...new Set(data.flows.map((f) => f.category))];
+  mobileSelect.innerHTML = '<option value="">Overview (all flows)</option>';
+  for (const cat of categories) {
+    const h = document.createElement('div');
+    h.className = 'cat';
+    h.textContent = cat;
+    flowList.appendChild(h);
+    const og = document.createElement('optgroup');
+    og.label = cat;
+    for (const f of data.flows.filter((x) => x.category === cat)) {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'flow-btn';
+      btn.dataset.flow = f.id;
+      btn.innerHTML = `${f.label} <span class="n">· ${f.steps.length} hops</span>`;
+      btn.addEventListener('click', () => selectFlow(f.id));
+      flowList.appendChild(btn);
+      flowBtns.push(btn);
+      const opt = document.createElement('option');
+      opt.value = f.id;
+      opt.textContent = f.label;
+      og.appendChild(opt);
+    }
+    mobileSelect.appendChild(og);
+  }
+  mobileSelect.addEventListener('change', () => selectFlow(mobileSelect.value || null));
+  document.getElementById('resetBtn').addEventListener('click', () => selectFlow(null));
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') selectFlow(null); });
+
+  // ---- selection ----
+  let activeFlowId = null;
+
+  function syncUrl(flowId) {
+    if (EMBED) {
+      // The host page's ?flow= param is the source of truth in embed mode.
+      if (window.parent !== window) {
+        window.parent.postMessage({ type: 'flows:select', flow: flowId }, location.origin);
+      }
+      return;
+    }
+    const params = new URLSearchParams(location.search);
+    if (flowId) params.set('flow', flowId); else params.delete('flow');
+    history.replaceState(null, '', `${location.pathname}${params.size ? '?' + params : ''}`);
+  }
+
+  function clearHighlights() {
+    for (const el of nodeEls.values()) el.classList.remove('dim', 'hl', 'selected');
+    for (const path of edges.values()) path.classList.remove('hl', 'hidden', 'focus');
+    if (badgeLayer) { badgeLayer.remove(); badgeLayer = null; }
+  }
+
+  function selectFlow(flowId, { fromUrl = false } = {}) {
+    activeFlowId = flowId;
+    clearHighlights();
+    flowBtns.forEach((b) => b.classList.toggle('active', b.dataset.flow === flowId));
+    mobileSelect.value = flowId || '';
+    if (!fromUrl) syncUrl(flowId);
+
+    const flow = data.flows.find((f) => f.id === flowId);
+    if (!flow) {
+      activeFlowId = null;
+      detail.innerHTML = DEFAULT_DETAIL;
+      return;
+    }
+
+    const usedNodes = new Set(flow.steps.flatMap((s) => [s.from, s.to]));
+    const usedEdges = new Set(flow.steps.map(edgeKey));
+    for (const [id, el] of nodeEls) {
+      const on = usedNodes.has(id);
+      el.classList.toggle('dim', !on);
+      el.classList.toggle('hl', on);
+    }
+    for (const [key, path] of edges) {
+      const on = usedEdges.has(key);
+      path.classList.toggle('hidden', !on);
+      path.classList.toggle('hl', on);
+    }
+
+    // numbered hop badges at each highlighted edge's midpoint
+    badgeLayer = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    flow.steps.forEach((s, i) => {
+      const path = edges.get(edgeKey(s));
+      const mid = path.getPointAtLength(path.getTotalLength() * (0.42 + (i % 3) * 0.08));
+      const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+      g.setAttribute('class', 'badge');
+      g.innerHTML = `<circle cx="${mid.x}" cy="${mid.y}" r="9"/><text x="${mid.x}" y="${mid.y}">${i + 1}</text>`;
+      badgeLayer.appendChild(g);
+    });
+    svg.appendChild(badgeLayer);
+
+    // bring the flow's nodes into view
+    const wrap = document.getElementById('diagramWrap');
+    const xs = [...usedNodes].map((id) => pos.get(id).x);
+    const ys = [...usedNodes].map((id) => pos.get(id).y);
+    wrap.scrollTo({
+      left: Math.max(0, (Math.min(...xs) + Math.max(...xs) + COL_W) / 2 - wrap.clientWidth / 2),
+      top: Math.max(0, (Math.min(...ys) + Math.max(...ys) + NODE_H) / 2 - wrap.clientHeight / 2),
+      behavior: 'smooth'
+    });
+
+    // step panel
+    detail.innerHTML = `<h2>${flow.label}</h2><div class="desc">${flow.description}</div>` +
+      flow.steps.map((s, i) => {
+        const t = transportsById.get(s.transport);
+        return `<div class="step" data-i="${i}">
+          <div class="route"><span class="num">${i + 1}</span>${nodesById.get(s.from).label} → ${nodesById.get(s.to).label}<span class="chip" style="color:${t.color};border-color:${t.color}">${t.label}</span></div>
+          <div class="label">${s.label}</div>
+          <div class="payload">${s.payload}</div>
+        </div>`;
+      }).join('');
+    detail.querySelectorAll('.step').forEach((el) => {
+      const step = flow.steps[Number(el.dataset.i)];
+      const path = edges.get(edgeKey(step));
+      const fromEl = nodeEls.get(step.from), toEl = nodeEls.get(step.to);
+      const focusEdge = (on) => {
+        el.classList.toggle('hl', on);
+        path.classList.toggle('focus', on);
+        fromEl.classList.toggle('selected', on);
+        toEl.classList.toggle('selected', on);
+      };
+      el.tabIndex = 0;
+      el.addEventListener('mouseenter', () => focusEdge(true));
+      el.addEventListener('mouseleave', () => focusEdge(false));
+      el.addEventListener('focus', () => focusEdge(true));
+      el.addEventListener('blur', () => focusEdge(false));
+      el.addEventListener('click', () => {
+        fromEl.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
+      });
+    });
+    detail.scrollTop = 0;
+  }
+
+  function showNode(nodeId) {
+    const n = nodesById.get(nodeId);
+    if (activeFlowId) selectFlow(null); else clearHighlights();
+    nodeEls.get(nodeId).classList.add('selected');
+    const inFlows = data.flows.filter((f) => f.steps.some((s) => s.from === nodeId || s.to === nodeId));
+    detail.innerHTML = `<div class="node-info">
+      <h2>${n.label}</h2>
+      ${n.file ? `<div class="file">${n.file}</div>` : ''}
+      <div class="desc">${n.desc || ''}</div>
+      ${inFlows.length ? `Appears in:<ul>${inFlows.map((f) => `<li><a data-flow="${f.id}">${f.label}</a></li>`).join('')}</ul>` : 'Not part of any documented flow yet.'}
+    </div>`;
+    detail.querySelectorAll('a[data-flow]').forEach((a) =>
+      a.addEventListener('click', () => selectFlow(a.dataset.flow))
+    );
+  }
+
+  // embed mode: the host page pushes selection changes (⌘K, in-app links) here
+  if (EMBED) {
+    window.addEventListener('message', (event) => {
+      if (event.origin !== location.origin) return;
+      if (event.data?.type !== 'flows:select') return;
+      const id = event.data.flow || null;
+      if (id !== activeFlowId) selectFlow(id, { fromUrl: true });
+    });
+  }
+
+  // deep link: ?flow=<id>, stale ids degrade to the overview inside selectFlow
+  const initial = new URLSearchParams(location.search).get('flow');
+  if (initial) selectFlow(initial, { fromUrl: true });
+})();
+</script>
+</body>
+</html>
diff --git a/client/public/flows.json b/client/public/flows.json
new file mode 100644
index 000000000..ebdadc5e8
--- /dev/null
+++ b/client/public/flows.json
@@ -0,0 +1,256 @@
+{
+  "version": 1,
+  "groups": [
+    { "id": "client-pages", "label": "Client Pages", "column": 0 },
+    { "id": "client-services", "label": "Client Services", "column": 1 },
+    { "id": "server-routes", "label": "Routes & Sockets", "column": 2 },
+    { "id": "server-services", "label": "Server Services", "column": 3 },
+    { "id": "server-lib", "label": "Server Lib", "column": 4 },
+    { "id": "data-stores", "label": "Data Stores", "column": 5 },
+    { "id": "external", "label": "External Systems", "column": 6 }
+  ],
+  "transports": [
+    { "id": "http", "label": "HTTP REST", "color": "#3b82f6" },
+    { "id": "sse", "label": "SSE stream", "color": "#f59e0b", "dash": "2 4" },
+    { "id": "socket", "label": "Socket.IO", "color": "#22c55e", "dash": "8 4" },
+    { "id": "call", "label": "Direct call", "color": "#9ca3af" },
+    { "id": "emitter", "label": "EventEmitter (in-process)", "color": "#a855f7", "dash": "10 3 2 3" },
+    { "id": "spawn", "label": "Process spawn", "color": "#ef4444", "dash": "14 4" },
+    { "id": "storage", "label": "File / DB I/O", "color": "#14b8a6", "dash": "1 3" }
+  ],
+  "nodes": [
+    { "id": "page.imageGen", "label": "ImageGen", "group": "client-pages", "file": "client/src/pages/ImageGen.jsx", "desc": "Image generation UI: prompt, model picker, init image, gallery." },
+    { "id": "page.startStory", "label": "Start a Story", "group": "client-pages", "file": "client/src/pages/StartStory.jsx", "desc": "Entry chooser: new story, import, or Story Builder." },
+    { "id": "page.storyBuilder", "label": "Story Builder", "group": "client-pages", "file": "client/src/pages/StoryBuilder.jsx", "desc": "Guided step-by-step story creation with AI-generated steps." },
+    { "id": "page.chiefOfStaff", "label": "Chief of Staff", "group": "client-pages", "file": "client/src/pages/ChiefOfStaff.jsx", "desc": "CoS tasks, agents, schedules, and autopilot controls." },
+    { "id": "page.apps", "label": "Apps", "group": "client-pages", "file": "client/src/pages/Apps.jsx", "desc": "Managed-app dashboard: start/stop/restart, status, deploys." },
+    { "id": "page.shell", "label": "Shell", "group": "client-pages", "file": "client/src/pages/Shell.jsx", "desc": "Browser terminal attached to server-side PTY sessions." },
+    { "id": "page.sharing", "label": "Sharing", "group": "client-pages", "file": "client/src/pages/Sharing.jsx", "desc": "Federation: peers, subscriptions, sync status." },
+    { "id": "page.settings", "label": "Settings", "group": "client-pages", "file": "client/src/pages/Settings.jsx", "desc": "System settings including the self-update panel." },
+    { "id": "page.backupWidget", "label": "Backup Widget", "group": "client-pages", "file": "client/src/components/BackupWidget.jsx", "desc": "Backup trigger + snapshot list (dashboard widget and Settings tab)." },
+
+    { "id": "svc.apiCore", "label": "apiCore (request)", "group": "client-services", "file": "client/src/services/apiCore.js", "desc": "Shared HTTP helper: JSON handling, error toasts, silent mode." },
+    { "id": "svc.apiStoryBuilder", "label": "apiStoryBuilder", "group": "client-services", "file": "client/src/services/apiStoryBuilder.js", "desc": "Story Builder session/step API wrappers." },
+    { "id": "svc.apiApps", "label": "apiApps", "group": "client-services", "file": "client/src/services/apiApps.js", "desc": "Managed-app lifecycle API wrappers." },
+    { "id": "svc.apiSystem", "label": "apiSystem", "group": "client-services", "file": "client/src/services/apiSystem.js", "desc": "System API wrappers: backup, update, health." },
+    { "id": "svc.apiPeerSync", "label": "apiPeerSync", "group": "client-services", "file": "client/src/services/apiPeerSync.js", "desc": "Peer-sync API wrappers: sync-now, subscriptions, pull-record." },
+    { "id": "svc.apiSchedules", "label": "apiSchedules", "group": "client-services", "file": "client/src/services/apiSchedules.js", "desc": "Automation-schedule API wrappers." },
+    { "id": "svc.socketClient", "label": "socket.js client", "group": "client-services", "file": "client/src/services/socket.js", "desc": "Single shared Socket.IO client connection for the whole app." },
+    { "id": "svc.voiceClient", "label": "voiceClient", "group": "client-services", "file": "client/src/services/voiceClient.js", "desc": "Mic capture, turn submission, and TTS playback for the voice agent." },
+
+    { "id": "route.imageGen", "label": "routes/imageGen", "group": "server-routes", "file": "server/routes/imageGen.js", "desc": "Image generation endpoints: generate, cancel, gallery, job events." },
+    { "id": "route.storyBuilder", "label": "routes/storyBuilder", "group": "server-routes", "file": "server/routes/storyBuilder.js", "desc": "Story Builder CRUD, step generation, SSE progress." },
+    { "id": "route.cos", "label": "routes/cos*", "group": "server-routes", "file": "server/routes/cosAgentRoutes.js", "desc": "CoS task/agent/job/schedule endpoints (cos*Routes family)." },
+    { "id": "route.apps", "label": "routes/apps", "group": "server-routes", "file": "server/routes/apps.js", "desc": "Managed-app endpoints: start/stop/restart, config, status." },
+    { "id": "route.backup", "label": "routes/backup", "group": "server-routes", "file": "server/routes/backup.js", "desc": "Backup endpoints: run, snapshots, restore, restore-db." },
+    { "id": "route.peerSync", "label": "routes/peerSync", "group": "server-routes", "file": "server/routes/peerSync.js", "desc": "Local sync commands + peer-facing push/manifest/record endpoints." },
+    { "id": "route.update", "label": "routes/update", "group": "server-routes", "file": "server/routes/update.js", "desc": "Self-update endpoints: check, sync-fork, execute." },
+    { "id": "route.schedules", "label": "routes/automationSchedules", "group": "server-routes", "file": "server/routes/automationSchedules.js", "desc": "Automation schedule CRUD endpoints." },
+    { "id": "sock.hub", "label": "Socket.IO hub", "group": "server-routes", "file": "server/services/socket.js", "desc": "initSocket(io): shell, logs, app-ops, and subscription handlers." },
+    { "id": "sock.voice", "label": "voice socket handlers", "group": "server-routes", "file": "server/sockets/voice.js", "desc": "registerVoiceHandlers: voice:turn / voice:text entry points." },
+
+    { "id": "svc.mediaJobQueue", "label": "mediaJobQueue", "group": "server-services", "file": "server/services/mediaJobQueue/index.js", "desc": "Unified job queue for image/video/training/audio; local vs codex lanes; SSE client attach." },
+    { "id": "svc.imageGen", "label": "imageGen service", "group": "server-services", "file": "server/services/imageGen/index.js", "desc": "Image generation backends: local (mflux), codex, external; param prep and variants." },
+    { "id": "svc.storyBuilderRunner", "label": "storyBuilderRunner", "group": "server-services", "file": "server/services/storyBuilderRunner.js", "desc": "Runs story steps: phase frames to SSE clients, persists results, promotes to pipeline." },
+    { "id": "svc.pipeline", "label": "pipeline", "group": "server-services", "file": "server/services/pipeline/autoRunner.js", "desc": "Comic/story pipeline: series/issues stores, text+visual stage auto-runner." },
+    { "id": "svc.voicePipeline", "label": "voice pipeline", "group": "server-services", "file": "server/services/voice/pipeline.js", "desc": "Voice turn orchestration: STT → LLM tool loop → TTS streaming." },
+    { "id": "svc.voiceTools", "label": "voice tools", "group": "server-services", "file": "server/services/voice/tools.js", "desc": "Voice agent tool schemas + dispatch: navigation, UI actions, timers, calendar." },
+    { "id": "svc.cos", "label": "cos", "group": "server-services", "file": "server/services/cos.js", "desc": "CoS task lifecycle: create/approve/queue; emits task:ready." },
+    { "id": "svc.subAgentSpawner", "label": "subAgentSpawner", "group": "server-services", "file": "server/services/subAgentSpawner.js", "desc": "Turns a ready task into a running agent: prompt build, model selection, worktree prep." },
+    { "id": "svc.cosRunnerClient", "label": "cosRunnerClient", "group": "server-services", "file": "server/services/cosRunnerClient.js", "desc": "Client for the standalone CoS Runner process (Socket.IO + HTTP health)." },
+    { "id": "svc.cosAgents", "label": "cosAgents", "group": "server-services", "file": "server/services/cosAgents.js", "desc": "Agent state index (date-bucketed JSON) + agent:* event fan-out to the UI." },
+    { "id": "svc.pm2", "label": "pm2 service", "group": "server-services", "file": "server/services/pm2.js", "desc": "PM2 wrapper: CLI spawn + programmatic connect, strict jlist status." },
+    { "id": "svc.shell", "label": "shell", "group": "server-services", "file": "server/services/shell.js", "desc": "PTY session manager: spawn, single-subscriber attach, safe env allowlist." },
+    { "id": "svc.backup", "label": "backup", "group": "server-services", "file": "server/services/backup.js", "desc": "rsync snapshots + pg_dump + manifest; effective-exclude computation." },
+    { "id": "svc.backupScheduler", "label": "backupScheduler", "group": "server-services", "file": "server/services/backupScheduler.js", "desc": "Registers the daily backup cron; re-reads settings every run." },
+    { "id": "svc.eventScheduler", "label": "eventScheduler", "group": "server-services", "file": "server/services/eventScheduler.js", "desc": "Generic cron engine: schedule/cancel named jobs." },
+    { "id": "svc.peerSync", "label": "sharing/peerSync", "group": "server-services", "file": "server/services/sharing/peerSync.js", "desc": "Federation orchestrator: push/receive, assets, subscriptions, integrity." },
+    { "id": "svc.updateChecker", "label": "updateChecker", "group": "server-services", "file": "server/services/updateChecker.js", "desc": "Upstream release poll, origin classification, fork-sync gate." },
+    { "id": "svc.updateExecutor", "label": "updateExecutor", "group": "server-services", "file": "server/services/updateExecutor.js", "desc": "Detached update.sh spawn that survives PM2 restarting PortOS itself." },
+    { "id": "svc.taskSchedule", "label": "taskSchedule", "group": "server-services", "file": "server/services/taskSchedule.js", "desc": "Unified v2 schedule store (interval/cron) with prompt versioning." },
+    { "id": "svc.cosJobScheduler", "label": "cosJobScheduler", "group": "server-services", "file": "server/services/cosJobScheduler.js", "desc": "Fires due scheduled jobs: inline script/shell or task:ready for AI agents." },
+
+    { "id": "lib.promptRunner", "label": "promptRunner", "group": "server-lib", "file": "server/lib/promptRunner.js", "desc": "Assembles prompts from templates + context and runs them through a provider." },
+    { "id": "lib.aiProvider", "label": "aiProvider + aiToolkit", "group": "server-lib", "file": "server/lib/aiProvider.js", "desc": "Provider registry/resolution: CLI providers, local backends, model selection." },
+    { "id": "lib.peerHttpClient", "label": "peerHttpClient", "group": "server-lib", "file": "server/lib/peerHttpClient.js", "desc": "peerFetch: authenticated HTTP to federated peer instances." },
+    { "id": "lib.navManifest", "label": "navManifest", "group": "server-lib", "file": "server/lib/navManifest.js", "desc": "NAV_COMMANDS + resolveNavCommand — shared by ⌘K palette and voice nav." },
+
+    { "id": "store.postgres", "label": "PostgreSQL", "group": "data-stores", "file": "server/lib/db.js", "desc": "Primary datastore (pg Pool via db.js with test-DB write guard): catalog, universes, pipeline, memory, story sessions." },
+    { "id": "store.jsonFiles", "label": "data/*.json", "group": "data-stores", "desc": "JSON file state: task-schedule.json, update.json, agent index buckets, settings, queue persistence." },
+    { "id": "store.diskAssets", "label": "data/ assets", "group": "data-stores", "desc": "Disk assets: image gallery, video history, uploads, LoRA datasets, backup snapshots." },
+
+    { "id": "ext.aiCli", "label": "AI CLI providers", "group": "external", "desc": "claude / codex CLIs spawned per run via aiToolkit CLI spawning." },
+    { "id": "ext.localLlm", "label": "Local LLM", "group": "external", "file": "server/services/lmStudioManager.js", "desc": "LM Studio / Ollama HTTP backends for local completions and embeddings." },
+    { "id": "ext.pm2", "label": "PM2 daemon", "group": "external", "desc": "Process manager for PortOS itself, managed apps, and the CoS Runner." },
+    { "id": "ext.cosRunner", "label": "CoS Runner (portos-cos)", "group": "external", "file": "server/cos-runner/index.js", "desc": "Standalone PM2 process that spawns and streams AI agent CLIs, isolated from the main server." },
+    { "id": "ext.pythonRunners", "label": "Python media runners", "group": "external", "desc": "mflux/diffusers image, video, and LoRA-training runner processes." },
+    { "id": "ext.whisper", "label": "Whisper (STT)", "group": "external", "desc": "Speech-to-text binary transcribing voice turns." },
+    { "id": "ext.tts", "label": "Piper / Kokoro (TTS)", "group": "external", "desc": "Text-to-speech binaries synthesizing reply audio sentence-by-sentence." },
+    { "id": "ext.pty", "label": "PTY (node-pty)", "group": "external", "desc": "Pseudo-terminal processes running the user's shell." },
+    { "id": "ext.peers", "label": "Federated peers", "group": "external", "desc": "Other PortOS installs reachable over the private network." },
+    { "id": "ext.updateSh", "label": "update.sh", "group": "external", "file": "update.sh", "desc": "Detached updater script: git pull --rebase --autostash + PM2 restart." },
+    { "id": "ext.rsync", "label": "rsync + pg_dump", "group": "external", "desc": "Snapshot copy and database dump tools invoked by the backup service." }
+  ],
+  "flows": [
+    {
+      "id": "create-image",
+      "label": "Create Image",
+      "category": "Media",
+      "description": "Generate an image through the unified media job queue, with live progress over SSE and the result saved to the gallery.",
+      "steps": [
+        { "from": "page.imageGen", "to": "route.imageGen", "transport": "http", "label": "POST /api/image-gen/generate", "payload": "multipart FormData: prompt, model, options, optional init image (direct fetch — multipart bypasses the JSON request() helper)" },
+        { "from": "route.imageGen", "to": "svc.mediaJobQueue", "transport": "call", "label": "enqueueJob()", "payload": "normalized job { id, kind: 'image', owner, params } after Zod validation" },
+        { "from": "svc.mediaJobQueue", "to": "svc.imageGen", "transport": "call", "label": "dispatch by lane", "payload": "job params routed to local (mflux) / codex / external backend" },
+        { "from": "svc.imageGen", "to": "ext.pythonRunners", "transport": "spawn", "label": "spawn runner CLI", "payload": "resolved CLI args: model path, prompt, steps, dimensions, seed" },
+        { "from": "ext.pythonRunners", "to": "svc.mediaJobQueue", "transport": "call", "label": "stdout progress", "payload": "STAGE: markers + per-step progress parsed from runner output" },
+        { "from": "svc.mediaJobQueue", "to": "page.imageGen", "transport": "sse", "label": "GET /api/image-gen/:jobId/events", "payload": "progress frames: stage, percent, preview; terminal completed/failed event" },
+        { "from": "svc.mediaJobQueue", "to": "store.diskAssets", "transport": "storage", "label": "persist result", "payload": "final image written to the gallery + job record; catalog attach hooks fire on completion" }
+      ]
+    },
+    {
+      "id": "start-story",
+      "label": "Start a Story",
+      "category": "Story",
+      "description": "Create a story through the guided Story Builder: each step is generated by an AI provider, streamed back over SSE, persisted to Postgres, and finally promoted into the comic pipeline.",
+      "steps": [
+        { "from": "page.startStory", "to": "page.storyBuilder", "transport": "call", "label": "react-router navigate", "payload": "chooser routes to Story Builder (or Importer / Universes)" },
+        { "from": "page.storyBuilder", "to": "svc.apiStoryBuilder", "transport": "call", "label": "createStorySession / generateStoryStep", "payload": "session id, step id, generation options" },
+        { "from": "svc.apiStoryBuilder", "to": "route.storyBuilder", "transport": "http", "label": "POST /api/story-builder/:id/steps/:stepId/generate", "payload": "JSON body validated by Zod schemas" },
+        { "from": "route.storyBuilder", "to": "svc.storyBuilderRunner", "transport": "call", "label": "startStepRun()", "payload": "session + step context; run registered for SSE attach" },
+        { "from": "svc.storyBuilderRunner", "to": "lib.promptRunner", "transport": "call", "label": "run step prompt", "payload": "assembled prompt: step template + story-so-far + canon context" },
+        { "from": "lib.promptRunner", "to": "lib.aiProvider", "transport": "call", "label": "resolve provider", "payload": "provider + model selection from settings" },
+        { "from": "lib.aiProvider", "to": "ext.aiCli", "transport": "spawn", "label": "provider run", "payload": "prompt executed via CLI provider (or local LLM backend)" },
+        { "from": "svc.storyBuilderRunner", "to": "page.storyBuilder", "transport": "sse", "label": "GET /:id/steps/:stepId/progress", "payload": "phase frames: { runId, phase, status, partial text }" },
+        { "from": "svc.storyBuilderRunner", "to": "store.postgres", "transport": "storage", "label": "persist step", "payload": "step result saved via storyBuilderStore (db.js)" },
+        { "from": "svc.storyBuilderRunner", "to": "svc.pipeline", "transport": "call", "label": "promote to pipeline", "payload": "finished story becomes pipeline series/issues; autoRunner chains idea → prose → scripts stages" }
+      ]
+    },
+    {
+      "id": "voice-command",
+      "label": "Voice Command",
+      "category": "Voice",
+      "description": "A spoken command round-trip: audio in over Socket.IO, whisper transcription, local-LLM tool loop (including UI navigation via the shared nav manifest), and synthesized speech streamed back.",
+      "steps": [
+        { "from": "svc.voiceClient", "to": "svc.socketClient", "transport": "call", "label": "emit voice:turn", "payload": "recorded audio buffer + mimeType" },
+        { "from": "svc.socketClient", "to": "sock.voice", "transport": "socket", "label": "voice:turn", "payload": "{ audio, mimeType } over the shared Socket.IO connection" },
+        { "from": "sock.voice", "to": "svc.voicePipeline", "transport": "call", "label": "run voice turn", "payload": "audio handed to the pipeline with socket for reply frames" },
+        { "from": "svc.voicePipeline", "to": "ext.whisper", "transport": "spawn", "label": "transcribe", "payload": "WAV audio → transcript text" },
+        { "from": "svc.voicePipeline", "to": "ext.localLlm", "transport": "http", "label": "streamChat", "payload": "transcript + intent-scoped tool specs; streamed completion" },
+        { "from": "svc.voicePipeline", "to": "svc.voiceTools", "transport": "call", "label": "dispatchTool", "payload": "tool calls { name, args } from the LLM loop" },
+        { "from": "svc.voiceTools", "to": "lib.navManifest", "transport": "call", "label": "resolveNavCommand", "payload": "spoken target fuzzy-matched against NAV_COMMANDS aliases (ui_navigate)" },
+        { "from": "svc.voiceTools", "to": "svc.voiceClient", "transport": "socket", "label": "UI action events", "payload": "navigation / UI action requests executed by the client" },
+        { "from": "svc.voicePipeline", "to": "ext.tts", "transport": "spawn", "label": "synthesize", "payload": "reply sentences → WAV audio via piper/kokoro" },
+        { "from": "svc.voicePipeline", "to": "svc.voiceClient", "transport": "socket", "label": "voice:tts:audio", "payload": "{ sentence, wav } frames played back as they arrive" }
+      ]
+    },
+    {
+      "id": "cos-agent-run",
+      "label": "CoS Agent Run",
+      "category": "Agents",
+      "description": "A Chief-of-Staff task becomes a running AI agent: task:ready fires the spawner, the standalone CoS Runner process executes the provider CLI, and output streams back to the UI.",
+      "steps": [
+        { "from": "page.chiefOfStaff", "to": "svc.apiCore", "transport": "call", "label": "create / approve task", "payload": "task fields via the shared request() helper" },
+        { "from": "svc.apiCore", "to": "route.cos", "transport": "http", "label": "POST /api/cos/...", "payload": "task CRUD JSON, Zod-validated" },
+        { "from": "route.cos", "to": "svc.cos", "transport": "call", "label": "task lifecycle", "payload": "task created/queued in CoS state" },
+        { "from": "svc.cos", "to": "svc.subAgentSpawner", "transport": "emitter", "label": "cosEvents 'task:ready'", "payload": "task { id, taskType, prompt, repoPath, metadata }" },
+        { "from": "svc.subAgentSpawner", "to": "svc.cosRunnerClient", "transport": "call", "label": "spawnViaRunner", "payload": "spawn config: provider, model, cwd/worktree, built prompt" },
+        { "from": "svc.cosRunnerClient", "to": "ext.cosRunner", "transport": "socket", "label": "spawn request", "payload": "Socket.IO + HTTP to portos-cos on PORTS.COS" },
+        { "from": "ext.cosRunner", "to": "ext.aiCli", "transport": "spawn", "label": "run agent CLI", "payload": "claude/codex spawned in the task's worktree with the prompt" },
+        { "from": "ext.cosRunner", "to": "svc.cosRunnerClient", "transport": "socket", "label": "output stream", "payload": "parsed agent output lines + completion status" },
+        { "from": "svc.cosRunnerClient", "to": "svc.cosAgents", "transport": "call", "label": "record output", "payload": "batched output lines + lifecycle updates" },
+        { "from": "svc.cosAgents", "to": "store.jsonFiles", "transport": "storage", "label": "persist agent index", "payload": "date-bucketed agent state JSON" },
+        { "from": "svc.cosAgents", "to": "page.chiefOfStaff", "transport": "socket", "label": "agent:output / agent:completed", "payload": "live output lines and final summary rendered in the UI" }
+      ]
+    },
+    {
+      "id": "scheduled-task",
+      "label": "Scheduled Task / Autopilot",
+      "category": "Agents",
+      "description": "A user-configured schedule fires on cron: inline script/shell jobs run directly; AI jobs emit task:ready and continue as a CoS Agent Run.",
+      "steps": [
+        { "from": "page.chiefOfStaff", "to": "svc.apiSchedules", "transport": "call", "label": "save schedule", "payload": "cron expression / interval + job config" },
+        { "from": "svc.apiSchedules", "to": "route.schedules", "transport": "http", "label": "POST /api/automation-schedules", "payload": "schedule JSON, Zod-validated" },
+        { "from": "route.schedules", "to": "svc.taskSchedule", "transport": "call", "label": "persist schedule", "payload": "unified v2 schedule entry (interval/cron, prompt version)" },
+        { "from": "svc.taskSchedule", "to": "store.jsonFiles", "transport": "storage", "label": "write data/task-schedule.json", "payload": "schedule state on disk — takes effect without restart" },
+        { "from": "svc.taskSchedule", "to": "svc.cosJobScheduler", "transport": "call", "label": "cron fire", "payload": "due job evaluated with spawn guard" },
+        { "from": "svc.cosJobScheduler", "to": "svc.subAgentSpawner", "transport": "emitter", "label": "cosEvents 'task:ready'", "payload": "AI jobs become tasks — continues as the CoS Agent Run flow" },
+        { "from": "svc.cosJobScheduler", "to": "page.chiefOfStaff", "transport": "socket", "label": "cos:tasks:cos:changed / cos:tasks:user:changed", "payload": "scheduled-job completion is reflected via task and agent state events forwarded by the Socket.IO hub" }
+      ]
+    },
+    {
+      "id": "start-app-pm2",
+      "label": "Start / Stop App (PM2)",
+      "category": "System",
+      "description": "Managed-app lifecycle: the Apps page drives PM2 through the pm2 service; status flows back via the HTTP response and apps:changed socket events.",
+      "steps": [
+        { "from": "page.apps", "to": "svc.apiApps", "transport": "call", "label": "startApp(id)", "payload": "app id" },
+        { "from": "svc.apiApps", "to": "route.apps", "transport": "http", "label": "POST /api/apps/:id/start", "payload": "app id in the path; no body" },
+        { "from": "route.apps", "to": "svc.pm2", "transport": "call", "label": "startApp", "payload": "process name + start options from the app's ecosystem config" },
+        { "from": "svc.pm2", "to": "ext.pm2", "transport": "spawn", "label": "pm2 CLI / connectAndRun", "payload": "pm2 start/stop/restart against the daemon" },
+        { "from": "ext.pm2", "to": "svc.pm2", "transport": "call", "label": "jlist status", "payload": "strict process list → per-app pm2Status/overallStatus" },
+        { "from": "svc.pm2", "to": "page.apps", "transport": "socket", "label": "apps:changed", "payload": "notifyAppsChanged broadcast; UI updates local state" }
+      ]
+    },
+    {
+      "id": "shell-session",
+      "label": "Shell Session",
+      "category": "System",
+      "description": "A browser terminal attached to a server-side PTY: keystrokes down and raw terminal output back, all over Socket.IO, with single-subscriber attach semantics.",
+      "steps": [
+        { "from": "page.shell", "to": "svc.socketClient", "transport": "call", "label": "emit shell:start / shell:attach", "payload": "{ sessionId, claim } — auto-pick paths claim, manual paths don't displace" },
+        { "from": "svc.socketClient", "to": "sock.hub", "transport": "socket", "label": "shell:* events", "payload": "start/attach/input/resize routed to shell handlers" },
+        { "from": "sock.hub", "to": "svc.shell", "transport": "call", "label": "session management", "payload": "single-subscriber attach; sessions persist across reconnects" },
+        { "from": "svc.shell", "to": "ext.pty", "transport": "spawn", "label": "pty.spawn", "payload": "user shell with buildSafeEnv allowlisted environment" },
+        { "from": "ext.pty", "to": "svc.shell", "transport": "call", "label": "PTY data", "payload": "raw terminal output bytes" },
+        { "from": "svc.shell", "to": "page.shell", "transport": "socket", "label": "shell:output / shell:exit", "payload": "terminal data rendered by xterm; exit code on close" }
+      ]
+    },
+    {
+      "id": "run-backup",
+      "label": "Run Backup",
+      "category": "System",
+      "description": "Snapshot backup: rsync with anchored excludes plus a Postgres dump and manifest, with progress broadcast over Socket.IO. The scheduled path re-reads settings on every cron run.",
+      "steps": [
+        { "from": "page.backupWidget", "to": "svc.apiSystem", "transport": "call", "label": "runBackup()", "payload": "no arguments — server reads saved backup settings" },
+        { "from": "svc.apiSystem", "to": "route.backup", "transport": "http", "label": "POST /api/backup/run", "payload": "empty body; settings are server-side" },
+        { "from": "route.backup", "to": "svc.backup", "transport": "call", "label": "runBackup", "payload": "destPath + computeEffectiveExcludes() result" },
+        { "from": "svc.backup", "to": "ext.rsync", "transport": "spawn", "label": "rsync + pg_dump", "payload": "anchored rsync filters; pg_dump of the portos database" },
+        { "from": "svc.backup", "to": "store.diskAssets", "transport": "storage", "label": "write snapshot", "payload": "snapshot dir + db.sql + manifest at the destination" },
+        { "from": "svc.backup", "to": "page.backupWidget", "transport": "socket", "label": "backup:started / backup:completed", "payload": "{ snapshotId, filesChanged, pgBackup } progress and result" },
+        { "from": "svc.backupScheduler", "to": "svc.eventScheduler", "transport": "call", "label": "register daily cron", "payload": "cron expression from settings.backup (scheduled path)" },
+        { "from": "svc.eventScheduler", "to": "svc.backup", "transport": "call", "label": "cron fire", "payload": "re-reads destPath/excludes/enabled fresh on every run" }
+      ]
+    },
+    {
+      "id": "peer-sync",
+      "label": "Peer Sync",
+      "category": "Sync",
+      "description": "Federation between PortOS installs: subscribed records push to peers over HTTP with LWW merge on receive; version gates keep newer peers from corrupting older ones.",
+      "steps": [
+        { "from": "page.sharing", "to": "svc.apiPeerSync", "transport": "call", "label": "syncNow()", "payload": "optional peer/subscription filter" },
+        { "from": "svc.apiPeerSync", "to": "route.peerSync", "transport": "http", "label": "POST /api/peer-sync/sync-now", "payload": "sync command JSON" },
+        { "from": "route.peerSync", "to": "svc.peerSync", "transport": "call", "label": "orchestrate push", "payload": "records gathered per subscription; schema-version gated" },
+        { "from": "svc.peerSync", "to": "lib.peerHttpClient", "transport": "call", "label": "peerFetch", "payload": "authenticated request built from peer URL + credentials" },
+        { "from": "lib.peerHttpClient", "to": "ext.peers", "transport": "http", "label": "POST peer /api/peer-sync/push", "payload": "push payload: record + sidecar + asset manifest (peerSyncPushSchema)" },
+        { "from": "ext.peers", "to": "route.peerSync", "transport": "http", "label": "inbound push (receiving side)", "payload": "the same endpoint on the receiving install accepts pushes from peers" },
+        { "from": "svc.peerSync", "to": "store.postgres", "transport": "storage", "label": "applyIncomingPush", "payload": "LWW-timestamp merge + integrity check; missing assets pulled back from the sender" },
+        { "from": "svc.peerSync", "to": "page.sharing", "transport": "socket", "label": "sharing:manifest-processed / sharing:inbox-updated", "payload": "sync results and inbox updates surface on the Sharing page (peer presence separately via instances:peers:updated)" }
+      ]
+    },
+    {
+      "id": "self-update",
+      "label": "Self-Update",
+      "category": "System",
+      "description": "PortOS updates itself: the fork-aware gate decides whether the pull is safe, then a double-forked update.sh survives PM2 killing its parent while it pulls and restarts.",
+      "steps": [
+        { "from": "page.settings", "to": "svc.apiSystem", "transport": "call", "label": "executeUpdate()", "payload": "{ acknowledgeFork? } from the Update tab buttons" },
+        { "from": "svc.apiSystem", "to": "route.update", "transport": "http", "label": "POST /api/update/execute", "payload": "fork acknowledgement flag; 412 FORK_SYNC_REQUIRED if a fork hasn't synced" },
+        { "from": "route.update", "to": "svc.updateChecker", "transport": "call", "label": "fork gate", "payload": "remoteInfo (isUpstream/isFork) vs lastForkSync freshness" },
+        { "from": "route.update", "to": "svc.updateExecutor", "transport": "call", "label": "executeUpdate", "payload": "target version + options" },
+        { "from": "svc.updateExecutor", "to": "ext.updateSh", "transport": "spawn", "label": "double-fork detached spawn", "payload": "update.sh detached so it survives PM2 tree-kill during its own pm2 restart" },
+        { "from": "ext.updateSh", "to": "ext.pm2", "transport": "spawn", "label": "git pull + pm2 restart", "payload": "git pull --rebase --autostash from origin, then PM2 restarts PortOS" },
+        { "from": "svc.updateExecutor", "to": "page.settings", "transport": "socket", "label": "portos:update:step", "payload": "{ step, status, message } progress frames until the restart" }
+      ]
+    }
+  ]
+}
diff --git a/client/src/App.jsx b/client/src/App.jsx
index 0f63722f4..7c2547aae 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -22,6 +22,7 @@ const UsagePage = lazyWithReload(() => import('./pages/DevTools').then(m => ({ d
 const ProcessesPage = lazyWithReload(() => import('./pages/DevTools').then(m => ({ default: m.ProcessesPage })));
 const AgentsPage = lazyWithReload(() => import('./pages/DevTools').then(m => ({ default: m.AgentsPage })));
 const DataDog = lazyWithReload(() => import('./pages/DataDog'));
+const FlowsDoc = lazyWithReload(() => import('./pages/FlowsDoc'));
 const GitHub = lazyWithReload(() => import('./pages/GitHub'));
 const CyberCity = lazyWithReload(() => import('./pages/CyberCity'));
 const AppDetail = lazyWithReload(() => import('./pages/AppDetail'));
@@ -41,6 +42,7 @@ const MediaGen = lazyWithReload(() => import('./pages/MediaGen'));
 const ImageGen = lazyWithReload(() => import('./pages/ImageGen'));
 const VideoGen = lazyWithReload(() => import('./pages/VideoGen'));
 const MediaHistory = lazyWithReload(() => import('./pages/MediaHistory'));
+const MediaAnnotate = lazyWithReload(() => import('./pages/MediaAnnotate'));
 const MediaCollections = lazyWithReload(() => import('./pages/MediaCollections'));
 const MediaCollectionDetail = lazyWithReload(() => import('./pages/MediaCollectionDetail'));
 const MediaCollectionSyncView = lazyWithReload(() => import('./pages/MediaCollectionSyncView'));
@@ -200,6 +202,7 @@ export default function App() {
           <Route path="apps" element={<Apps />} />
           <Route path="devtools" element={<Navigate to="/devtools/runs" replace />} />
           <Route path="devtools/datadog" element={<DataDog />} />
+          <Route path="devtools/flows" element={<FlowsDoc />} />
           <Route path="devtools/github" element={<GitHub />} />
           <Route path="devtools/history" element={<HistoryPage />} />
           <Route path="devtools/image-clean" element={<ImageClean />} />
@@ -271,6 +274,8 @@ export default function App() {
             <Route path="image" element={<ImageGen />} />
             <Route path="video" element={<VideoGen />} />
             <Route path="history" element={<MediaHistory />} />
+            <Route path="annotate" element={<MediaAnnotate />} />
+            <Route path="annotate/:mediaKey" element={<MediaAnnotate />} />
             <Route path="collections" element={<MediaCollections />} />
             <Route path="collections/:id" element={<MediaCollectionDetail />} />
             <Route path="collections/:id/sync" element={<MediaCollectionSyncView />} />
@@ -326,14 +331,23 @@ export default function App() {
           <Route path="writers-room/guide" element={<WritersRoomGuide />} />
           <Route path="sharing" element={<Sharing />} />
           <Route path="sharing/:section" element={<Sharing />} />
+          <Route path="sharing/:section/:bucketId" element={<Sharing />} />
           <Route path="importer" element={<Importer />} />
           <Route path="start-story" element={<StartStory />} />
           <Route path="story-builder" element={<StoryBuilder />} />
           <Route path="story-builder/:storyId" element={<Navigate to="idea" replace />} />
           <Route path="story-builder/:storyId/:step" element={<StoryBuilder />} />
+          {/* Authors is a single master-detail page: the index + editor share one
+              component, so selection rides `:authorId` (which also captures the
+              `new` create-mode sentinel — author ids are UUIDs, so it can't
+              collide). A bare `/authors` is the idle index. */}
           <Route path="authors" element={<Authors />} />
+          <Route path="authors/:authorId" element={<Authors />} />
+          {/* Music is tabbed (`:tab`); each tab's master-detail selection lives
+              at `/music/:tab/:id` (`new` = create sentinel). */}
           <Route path="music" element={<Music />} />
           <Route path="music/:tab" element={<Music />} />
+          <Route path="music/:tab/:id" element={<Music />} />
           <Route path="pipeline" element={<Pipeline />} />
           <Route path="pipeline/editorial-checks" element={<PipelineEditorialChecks />} />
           <Route path="pipeline/findings/:commentId" element={<PipelineFindingRedirect />} />
diff --git a/client/src/components/BackupWidget.jsx b/client/src/components/BackupWidget.jsx
index 1e139557d..4c5ac01c8 100644
--- a/client/src/components/BackupWidget.jsx
+++ b/client/src/components/BackupWidget.jsx
@@ -71,7 +71,7 @@ function RestorePanel({ snapshot, onClose }) {
       snapshotId: snapshot.id,
       dryRun: true,
       subdirFilter: filter.trim() || null
-    }).catch(err => {
+    }, { silent: true }).catch(err => {
       toast.error(`Preview failed: ${err.message}`);
       return null;
     });
@@ -85,7 +85,7 @@ function RestorePanel({ snapshot, onClose }) {
       snapshotId: snapshot.id,
       dryRun: false,
       subdirFilter: filter.trim() || null
-    }).catch(err => {
+    }, { silent: true }).catch(err => {
       toast.error(`Restore failed: ${err.message}`);
       return null;
     });
@@ -278,7 +278,7 @@ const BackupWidget = memo(function BackupWidget() {
 
   const handleBackupNow = useCallback(async () => {
     setTriggering(true);
-    await api.triggerBackup().catch(err => {
+    await api.triggerBackup({ silent: true }).catch(err => {
       toast.error(`Backup failed: ${err.message}`);
     }).then(result => {
       if (result) {
diff --git a/client/src/components/Layout.jsx b/client/src/components/Layout.jsx
index e4f95cc23..037c3d3da 100644
--- a/client/src/components/Layout.jsx
+++ b/client/src/components/Layout.jsx
@@ -238,6 +238,7 @@ const navItems = [
       { to: '/devtools/runner', label: 'Code', icon: Code2 },
       { to: '/data', label: 'Data', icon: HardDrive },
       { to: '/devtools/datadog', label: 'DataDog', icon: Dog },
+      { to: '/devtools/flows', label: 'Flows', icon: WorkflowIcon },
       { to: '/devtools/github', label: 'GitHub', icon: GitBranch },
       { to: '/devtools/history', label: 'History', icon: History },
       { to: '/devtools/image-clean', label: 'Image Cleaner', icon: Eraser },
@@ -1118,6 +1119,7 @@ export default function Layout() {
         {(() => {
           const isFullWidth = location.pathname === '/character' ||
             location.pathname === '/ai' ||
+            location.pathname === '/devtools/flows' ||
             location.pathname === '/ask' ||
             location.pathname.startsWith('/ask/') ||
             location.pathname.startsWith('/calendar') ||
diff --git a/client/src/components/QuickBrainCapture.jsx b/client/src/components/QuickBrainCapture.jsx
index 6c6c27b0f..2d72cfa2d 100644
--- a/client/src/components/QuickBrainCapture.jsx
+++ b/client/src/components/QuickBrainCapture.jsx
@@ -42,7 +42,7 @@ export default function QuickBrainCapture() {
         toast.success(result.isGitHubRepo ? 'GitHub repo added' : 'Link saved');
       }
     } else {
-      const result = await api.captureBrainThought(text, undefined, undefined, { creative }).catch(err => {
+      const result = await api.captureBrainThought(text, undefined, undefined, { creative }, { silent: true }).catch(err => {
         toast.error(err.message || 'Failed to capture thought');
         setInput(prev => prev || text);
         return null;
diff --git a/client/src/components/TribeCareWidget.jsx b/client/src/components/TribeCareWidget.jsx
new file mode 100644
index 000000000..239f027b9
--- /dev/null
+++ b/client/src/components/TribeCareWidget.jsx
@@ -0,0 +1,62 @@
+import { Link } from 'react-router-dom';
+import { Users, ArrowRight } from 'lucide-react';
+
+// Surfaces who in the Tribe is overdue for contact on the dashboard. Reads the
+// server-computed care summary from dashboardState (no duplicate fetch — the
+// overdue/cadence logic is a single server-side source of truth in
+// server/services/tribe.js). Gated in the registry to hide when the Tribe has
+// no people; renders a positive "all caught up" state when nobody is overdue.
+export default function TribeCareWidget({ dashboardState }) {
+  const care = dashboardState?.tribeCare;
+  if (!care?.hasPeople) return null;
+
+  const overdue = care.overdue || [];
+  const remaining = care.overdueCount - overdue.length;
+
+  return (
+    <div className="bg-port-card border border-port-border rounded-xl p-4 h-full flex flex-col">
+      <div className="flex items-center gap-2 mb-3">
+        <Users size={16} className="text-gray-500" />
+        <h3 className="text-sm font-semibold text-white">Tribe Care</h3>
+        <Link to="/tribe" className="ml-auto flex items-center gap-1 text-xs text-port-accent hover:underline">
+          Open <ArrowRight size={12} />
+        </Link>
+      </div>
+
+      {care.overdueCount === 0 ? (
+        <div className="flex flex-1 flex-col items-center justify-center py-2 text-center">
+          <div className="text-2xl" aria-hidden="true">🤝</div>
+          <div className="mt-1 text-sm text-port-success">All caught up</div>
+          <div className="text-xs text-gray-500">No overdue check-ins across {care.peopleCount} {care.peopleCount === 1 ? 'person' : 'people'}</div>
+        </div>
+      ) : (
+        <>
+          <div className="mb-2 text-sm text-gray-300">
+            <span className="font-semibold text-port-warning">{care.overdueCount}</span>{' '}
+            {care.overdueCount === 1 ? 'person needs' : 'people need'} care
+          </div>
+          <ul className="flex flex-col gap-1">
+            {overdue.map((person) => (
+              <li key={person.id}>
+                <Link
+                  to="/tribe"
+                  className="flex items-center gap-2 rounded-lg px-2 py-1.5 hover:bg-port-bg transition-colors"
+                >
+                  <span className="min-w-0 flex-1 truncate text-sm text-white">{person.name}</span>
+                  <span className={`shrink-0 text-xs ${person.state === 'missing' ? 'text-gray-400' : 'text-port-error'}`}>
+                    {person.state === 'missing' ? 'no touchpoint' : `${person.daysOverdue}d overdue`}
+                  </span>
+                </Link>
+              </li>
+            ))}
+          </ul>
+          {remaining > 0 && (
+            <Link to="/tribe" className="mt-2 text-xs text-gray-500 hover:text-gray-300">
+              +{remaining} more overdue
+            </Link>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/client/src/components/TribeCareWidget.test.jsx b/client/src/components/TribeCareWidget.test.jsx
new file mode 100644
index 000000000..ec34211cf
--- /dev/null
+++ b/client/src/components/TribeCareWidget.test.jsx
@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import TribeCareWidget from './TribeCareWidget';
+
+const renderWidget = (tribeCare) =>
+  render(
+    <MemoryRouter>
+      <TribeCareWidget dashboardState={{ tribeCare }} />
+    </MemoryRouter>
+  );
+
+describe('TribeCareWidget', () => {
+  it('renders nothing when the tribe has no people', () => {
+    const { container } = renderWidget({ hasPeople: false, overdueCount: 0, overdue: [] });
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders nothing when the summary is absent (fetch failed)', () => {
+    const { container } = renderWidget(null);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('shows an all-caught-up state when nobody is overdue', () => {
+    renderWidget({ hasPeople: true, peopleCount: 3, overdueCount: 0, overdue: [] });
+    expect(screen.getByText('All caught up')).toBeTruthy();
+  });
+
+  it('lists overdue people with deep links and an overflow count', () => {
+    renderWidget({
+      hasPeople: true,
+      peopleCount: 5,
+      overdueCount: 4,
+      overdue: [
+        { id: 'a', name: 'Ada', state: 'overdue', daysOverdue: 12 },
+        { id: 'b', name: 'Bo', state: 'missing', daysOverdue: null },
+      ],
+    });
+    expect(screen.getByText('Ada')).toBeTruthy();
+    expect(screen.getByText('12d overdue')).toBeTruthy();
+    expect(screen.getByText('no touchpoint')).toBeTruthy();
+    // 4 overdue total, 2 shown → "+2 more overdue"
+    expect(screen.getByText('+2 more overdue')).toBeTruthy();
+    // Every row links into the Tribe page.
+    const links = screen.getAllByRole('link').map((a) => a.getAttribute('href'));
+    expect(links.every((href) => href === '/tribe')).toBe(true);
+  });
+});
diff --git a/client/src/components/agents/AgentList.jsx b/client/src/components/agents/AgentList.jsx
index 31023c5ee..40dc1466e 100644
--- a/client/src/components/agents/AgentList.jsx
+++ b/client/src/components/agents/AgentList.jsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { Sparkles } from 'lucide-react';
 import toast from '../ui/Toast';
 import BrailleSpinner from '../BrailleSpinner';
+import { FormField } from '../ui/FormField';
 import * as api from '../../services/api';
 import { PERSONALITY_STYLES, DEFAULT_PERSONALITY, DEFAULT_AVATAR } from './constants';
 import { filterSelectableModels } from '../../utils/providers';
@@ -216,8 +217,7 @@ export default function AgentList() {
                 <span className="text-sm font-medium text-white">Generate with AI</span>
               </div>
               <div className="flex items-end gap-3">
-                <div className="flex-1">
-                  <label className="block text-xs text-gray-400 mb-1">Provider</label>
+                <FormField label="Provider" className="flex-1" labelClassName="block text-xs text-gray-400 mb-1">
                   <select
                     value={selectedProviderId}
                     onChange={(e) => { setSelectedProviderId(e.target.value); setSelectedModel(''); }}
@@ -229,9 +229,8 @@ export default function AgentList() {
                       <option key={p.id} value={p.id}>{p.name}</option>
                     ))}
                   </select>
-                </div>
-                <div className="flex-1">
-                  <label className="block text-xs text-gray-400 mb-1">Model</label>
+                </FormField>
+                <FormField label="Model" className="flex-1" labelClassName="block text-xs text-gray-400 mb-1">
                   <select
                     value={selectedModel}
                     onChange={(e) => setSelectedModel(e.target.value)}
@@ -243,7 +242,7 @@ export default function AgentList() {
                       <option key={m} value={m}>{m}</option>
                     ))}
                   </select>
-                </div>
+                </FormField>
                 <button
                   type="button"
                   onClick={handleGenerate}
@@ -263,8 +262,7 @@ export default function AgentList() {
             </div>
 
             <div className="grid grid-cols-2 gap-4 mb-4">
-              <div>
-                <label className="block text-sm text-gray-400 mb-1">Name</label>
+              <FormField label="Name">
                 <input
                   type="text"
                   value={formData.name}
@@ -272,9 +270,8 @@ export default function AgentList() {
                   className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white"
                   required
                 />
-              </div>
-              <div>
-                <label className="block text-sm text-gray-400 mb-1">Style</label>
+              </FormField>
+              <FormField label="Style">
                 <select
                   value={formData.personality.style}
                   onChange={(e) => updatePersonality('style', e.target.value)}
@@ -284,21 +281,19 @@ export default function AgentList() {
                     <option key={style.value} value={style.value}>{style.label}</option>
                   ))}
                 </select>
-              </div>
+              </FormField>
             </div>
 
-            <div className="mb-4">
-              <label className="block text-sm text-gray-400 mb-1">Description</label>
+            <FormField label="Description" className="mb-4">
               <textarea
                 value={formData.description}
                 onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white h-20"
                 placeholder="Brief description of this agent's purpose..."
               />
-            </div>
+            </FormField>
 
-            <div className="mb-4">
-              <label className="block text-sm text-gray-400 mb-1">Tone</label>
+            <FormField label="Tone" className="mb-4">
               <input
                 type="text"
                 value={formData.personality.tone}
@@ -306,10 +301,9 @@ export default function AgentList() {
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white"
                 placeholder="e.g., friendly but informative"
               />
-            </div>
+            </FormField>
 
-            <div className="mb-4">
-              <label className="block text-sm text-gray-400 mb-1">Topics (comma-separated)</label>
+            <FormField label="Topics (comma-separated)" className="mb-4">
               <input
                 type="text"
                 value={topicsText}
@@ -318,10 +312,9 @@ export default function AgentList() {
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white"
                 placeholder="e.g., technology, AI, philosophy"
               />
-            </div>
+            </FormField>
 
-            <div className="mb-4">
-              <label className="block text-sm text-gray-400 mb-1">Quirks (comma-separated)</label>
+            <FormField label="Quirks (comma-separated)" className="mb-4">
               <input
                 type="text"
                 value={quirksText}
@@ -330,17 +323,16 @@ export default function AgentList() {
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white"
                 placeholder="e.g., uses metaphors, asks follow-up questions"
               />
-            </div>
+            </FormField>
 
-            <div className="mb-4">
-              <label className="block text-sm text-gray-400 mb-1">Prompt Prefix</label>
+            <FormField label="Prompt Prefix" className="mb-4">
               <textarea
                 value={formData.personality.promptPrefix}
                 onChange={(e) => updatePersonality('promptPrefix', e.target.value)}
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white h-24 font-mono text-sm"
                 placeholder="Custom instructions injected into AI prompts..."
               />
-            </div>
+            </FormField>
 
             <div className="flex items-center gap-4 mb-4">
               <label className="block text-sm text-gray-400">Avatar Emoji</label>
diff --git a/client/src/components/agents/tabs/OverviewTab.jsx b/client/src/components/agents/tabs/OverviewTab.jsx
index 6f9aaa678..c515f8de9 100644
--- a/client/src/components/agents/tabs/OverviewTab.jsx
+++ b/client/src/components/agents/tabs/OverviewTab.jsx
@@ -5,6 +5,7 @@ import toast from '../../ui/Toast';
 import * as api from '../../../services/api';
 import { filterSelectableModels } from '../../../utils/providers';
 import BrailleSpinner from '../../BrailleSpinner';
+import { FormField } from '../../ui/FormField';
 import { PERSONALITY_STYLES, DEFAULT_PERSONALITY, DEFAULT_AVATAR, PLATFORM_TYPES, ACCOUNT_STATUSES } from '../constants';
 import { useCooldownTick } from '../../../hooks/useCooldownTick';
 import { formatCooldown, formatDateTime } from '../../../utils/formatters';
@@ -309,8 +310,7 @@ export default function OverviewTab({ agentId, agent, onAgentUpdate }) {
             <form onSubmit={handleSave}>
               {/* Name + Style */}
               <div className="grid grid-cols-2 gap-4 mb-4">
-                <div>
-                  <label className="block text-sm text-gray-400 mb-1">Name</label>
+                <FormField label="Name">
                   <input
                     type="text"
                     value={formData.name}
@@ -318,9 +318,8 @@ export default function OverviewTab({ agentId, agent, onAgentUpdate }) {
                     className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white"
                     required
                   />
-                </div>
-                <div>
-                  <label className="block text-sm text-gray-400 mb-1">Style</label>
+                </FormField>
+                <FormField label="Style">
                   <select
                     value={formData.personality.style}
                     onChange={(e) => updatePersonality('style', e.target.value)}
@@ -330,24 +329,22 @@ export default function OverviewTab({ agentId, agent, onAgentUpdate }) {
                       <option key={style.value} value={style.value}>{style.label}</option>
                     ))}
                   </select>
-                </div>
+                </FormField>
               </div>
 
               {/* Description */}
-              <div className="mb-4">
-                <label className="block text-sm text-gray-400 mb-1">Description</label>
+              <FormField label="Description" className="mb-4">
                 <textarea
                   value={formData.description}
                   onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                   className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white h-20"
                   placeholder="Brief description of this agent's purpose..."
                 />
-              </div>
+              </FormField>
 
               {/* Tone + Avatar (emoji + color) */}
               <div className="flex items-end gap-4 mb-4">
-                <div className="flex-1">
-                  <label className="block text-sm text-gray-400 mb-1">Tone</label>
+                <FormField label="Tone" className="flex-1">
                   <input
                     type="text"
                     value={formData.personality.tone}
@@ -355,9 +352,8 @@ export default function OverviewTab({ agentId, agent, onAgentUpdate }) {
                     className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white"
                     placeholder="e.g., friendly but informative"
                   />
-                </div>
-                <div className="flex items-center gap-2">
-                  <label className="text-sm text-gray-400">Emoji</label>
+                </FormField>
+                <FormField label="Emoji" className="flex items-center gap-2" labelClassName="text-sm text-gray-400">
                   <input
                     type="text"
                     value={formData.avatar.emoji || ''}
@@ -365,22 +361,20 @@ export default function OverviewTab({ agentId, agent, onAgentUpdate }) {
                     className="w-14 px-2 py-2 bg-port-bg border border-port-border rounded text-white text-center"
                     maxLength={2}
                   />
-                </div>
-                <div className="flex items-center gap-2">
-                  <label className="text-sm text-gray-400">Color</label>
+                </FormField>
+                <FormField label="Color" className="flex items-center gap-2" labelClassName="text-sm text-gray-400">
                   <input
                     type="color"
                     value={formData.avatar.color || '#3b82f6'}
                     onChange={(e) => setFormData({ ...formData, avatar: { ...formData.avatar, color: e.target.value } })}
                     className="w-12 h-9 border border-port-border rounded cursor-pointer"
                   />
-                </div>
+                </FormField>
               </div>
 
               {/* Topics + Quirks */}
               <div className="grid grid-cols-2 gap-4 mb-4">
-                <div>
-                  <label className="block text-sm text-gray-400 mb-1">Topics (comma-separated)</label>
+                <FormField label="Topics (comma-separated)">
                   <input
                     type="text"
                     value={topicsText}
@@ -389,9 +383,8 @@ export default function OverviewTab({ agentId, agent, onAgentUpdate }) {
                     className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white"
                     placeholder="e.g., technology, AI"
                   />
-                </div>
-                <div>
-                  <label className="block text-sm text-gray-400 mb-1">Quirks (comma-separated)</label>
+                </FormField>
+                <FormField label="Quirks (comma-separated)">
                   <input
                     type="text"
                     value={quirksText}
@@ -400,19 +393,18 @@ export default function OverviewTab({ agentId, agent, onAgentUpdate }) {
                     className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white"
                     placeholder="e.g., uses metaphors"
                   />
-                </div>
+                </FormField>
               </div>
 
               {/* Prompt Prefix */}
-              <div className="mb-4">
-                <label className="block text-sm text-gray-400 mb-1">Prompt Prefix</label>
+              <FormField label="Prompt Prefix" className="mb-4">
                 <textarea
                   value={formData.personality.promptPrefix}
                   onChange={(e) => updatePersonality('promptPrefix', e.target.value)}
                   className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white h-24 font-mono text-sm"
                   placeholder="Custom instructions injected into AI prompts..."
                 />
-              </div>
+              </FormField>
 
               <button
                 type="submit"
@@ -435,8 +427,7 @@ export default function OverviewTab({ agentId, agent, onAgentUpdate }) {
             ) : (
               <>
                 {activeAccounts.length > 1 && (
-                  <div className="mb-3">
-                    <label className="block text-xs text-gray-400 mb-1">Account</label>
+                  <FormField label="Account" className="mb-3" labelClassName="block text-xs text-gray-400 mb-1">
                     <select
                       value={quickAccountId}
                       onChange={(e) => setQuickAccountId(e.target.value)}
@@ -446,7 +437,7 @@ export default function OverviewTab({ agentId, agent, onAgentUpdate }) {
                         <option key={a.id} value={a.id}>{a.credentials.username}</option>
                       ))}
                     </select>
-                  </div>
+                  </FormField>
                 )}
 
                 {rateLimits && (
@@ -614,8 +605,7 @@ export default function OverviewTab({ agentId, agent, onAgentUpdate }) {
             {showAccountForm && (
               <form onSubmit={handleAccountSubmit} className="mb-4 p-3 bg-port-bg border border-port-border rounded-lg">
                 <div className="grid grid-cols-2 gap-4 mb-3">
-                  <div>
-                    <label className="block text-sm text-gray-400 mb-1">Platform</label>
+                  <FormField label="Platform">
                     <select
                       value={accountForm.platform}
                       onChange={(e) => setAccountForm({ ...accountForm, platform: e.target.value })}
@@ -627,9 +617,8 @@ export default function OverviewTab({ agentId, agent, onAgentUpdate }) {
                         </option>
                       ))}
                     </select>
-                  </div>
-                  <div>
-                    <label className="block text-sm text-gray-400 mb-1">Account Name</label>
+                  </FormField>
+                  <FormField label="Account Name">
                     <input
                       type="text"
                       value={accountForm.name}
@@ -638,17 +627,16 @@ export default function OverviewTab({ agentId, agent, onAgentUpdate }) {
                       placeholder="Display name on platform"
                       required
                     />
-                  </div>
+                  </FormField>
                 </div>
-                <div className="mb-3">
-                  <label className="block text-sm text-gray-400 mb-1">Bio/Description</label>
+                <FormField label="Bio/Description" className="mb-3">
                   <textarea
                     value={accountForm.description}
                     onChange={(e) => setAccountForm({ ...accountForm, description: e.target.value })}
                     className="w-full px-3 py-2 bg-port-card border border-port-border rounded text-white h-16"
                     placeholder="Brief bio for the platform profile..."
                   />
-                </div>
+                </FormField>
                 <div className="flex gap-2">
                   <button type="submit" className="px-3 py-1.5 text-sm bg-port-success text-white rounded hover:bg-port-success/80">
                     Register Account
diff --git a/client/src/components/agents/tabs/PublishedTab.jsx b/client/src/components/agents/tabs/PublishedTab.jsx
index 2145f48e5..8feeba006 100644
--- a/client/src/components/agents/tabs/PublishedTab.jsx
+++ b/client/src/components/agents/tabs/PublishedTab.jsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import * as api from '../../../services/api';
 import BrailleSpinner from '../../BrailleSpinner';
+import { FormField } from '../../ui/FormField';
 import { timeAgo, formatDateTime } from '../../../utils/formatters';
 
 export default function PublishedTab({ agentId }) {
@@ -49,8 +50,7 @@ export default function PublishedTab({ agentId }) {
     <div className="p-4">
       {/* Header */}
       <div className="flex flex-wrap items-end gap-4 mb-6 p-4 bg-port-card border border-port-border rounded-lg">
-        <div>
-          <label className="block text-sm text-gray-400 mb-1">Account</label>
+        <FormField label="Account">
           <select
             value={selectedAccountId}
             onChange={(e) => setSelectedAccountId(e.target.value)}
@@ -63,7 +63,7 @@ export default function PublishedTab({ agentId }) {
               </option>
             ))}
           </select>
-        </div>
+        </FormField>
         <div className="flex items-center gap-2 ml-auto">
           <select
             value={publishedDays}
diff --git a/client/src/components/agents/tabs/SchedulesTab.jsx b/client/src/components/agents/tabs/SchedulesTab.jsx
index c68cac88f..f5fa39db7 100644
--- a/client/src/components/agents/tabs/SchedulesTab.jsx
+++ b/client/src/components/agents/tabs/SchedulesTab.jsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import * as api from '../../../services/api';
 import BrailleSpinner from '../../BrailleSpinner';
+import { FormField } from '../../ui/FormField';
 import { ACTION_TYPES, SCHEDULE_TYPES, CRON_PRESETS, INTERVAL_PRESETS } from '../constants';
 import { formatDateTime } from '../../../utils/formatters';
 
@@ -150,8 +151,7 @@ export default function SchedulesTab({ agentId }) {
           <h3 className="text-md font-semibold text-white mb-4">Create Schedule</h3>
 
           <div className="grid grid-cols-2 gap-4 mb-4">
-            <div>
-              <label className="block text-sm text-gray-400 mb-1">Account</label>
+            <FormField label="Account">
               <select
                 value={formData.accountId}
                 onChange={(e) => {
@@ -170,9 +170,8 @@ export default function SchedulesTab({ agentId }) {
                   </option>
                 ))}
               </select>
-            </div>
-            <div>
-              <label className="block text-sm text-gray-400 mb-1">Action Type</label>
+            </FormField>
+            <FormField label="Action Type">
               <select
                 value={formData.action.type}
                 onChange={(e) => setFormData({ ...formData, action: { type: e.target.value, params: {} } })}
@@ -187,11 +186,10 @@ export default function SchedulesTab({ agentId }) {
               <p className="text-xs text-gray-500 mt-1">
                 {ACTION_TYPES.find(a => a.value === formData.action.type)?.description}
               </p>
-            </div>
+            </FormField>
           </div>
 
-          <div className="mb-4">
-            <label className="block text-sm text-gray-400 mb-1">Schedule Type</label>
+          <FormField label="Schedule Type" className="mb-4">
             <select
               value={formData.schedule.type}
               onChange={(e) => handleScheduleTypeChange(e.target.value)}
@@ -203,11 +201,10 @@ export default function SchedulesTab({ agentId }) {
                 </option>
               ))}
             </select>
-          </div>
+          </FormField>
 
           {formData.schedule.type === 'cron' && (
-            <div className="mb-4">
-              <label className="block text-sm text-gray-400 mb-1">Cron Expression</label>
+            <FormField label="Cron Expression" className="mb-4">
               <select
                 value={formData.schedule.cron}
                 onChange={(e) => setFormData({ ...formData, schedule: { ...formData.schedule, cron: e.target.value } })}
@@ -219,12 +216,11 @@ export default function SchedulesTab({ agentId }) {
                   </option>
                 ))}
               </select>
-            </div>
+            </FormField>
           )}
 
           {formData.schedule.type === 'interval' && (
-            <div className="mb-4">
-              <label className="block text-sm text-gray-400 mb-1">Interval</label>
+            <FormField label="Interval" className="mb-4">
               <select
                 value={formData.schedule.intervalMs}
                 onChange={(e) => setFormData({ ...formData, schedule: { ...formData.schedule, intervalMs: parseInt(e.target.value, 10) } })}
@@ -236,13 +232,12 @@ export default function SchedulesTab({ agentId }) {
                   </option>
                 ))}
               </select>
-            </div>
+            </FormField>
           )}
 
           {formData.schedule.type === 'random' && (
             <div className="grid grid-cols-2 gap-4 mb-4">
-              <div>
-                <label className="block text-sm text-gray-400 mb-1">Min Interval</label>
+              <FormField label="Min Interval">
                 <select
                   value={formData.schedule.randomWindow?.minMs}
                   onChange={(e) => setFormData({
@@ -260,9 +255,8 @@ export default function SchedulesTab({ agentId }) {
                     </option>
                   ))}
                 </select>
-              </div>
-              <div>
-                <label className="block text-sm text-gray-400 mb-1">Max Interval</label>
+              </FormField>
+              <FormField label="Max Interval">
                 <select
                   value={formData.schedule.randomWindow?.maxMs}
                   onChange={(e) => setFormData({
@@ -280,12 +274,11 @@ export default function SchedulesTab({ agentId }) {
                     </option>
                   ))}
                 </select>
-              </div>
+              </FormField>
             </div>
           )}
 
-          <div className="mb-4">
-            <label className="block text-sm text-gray-400 mb-1">Max Per Day (rate limit)</label>
+          <FormField label="Max Per Day (rate limit)" className="mb-4">
             <input
               type="number"
               value={formData.rateLimit.maxPerDay || 50}
@@ -294,7 +287,7 @@ export default function SchedulesTab({ agentId }) {
               min="1"
               max="1000"
             />
-          </div>
+          </FormField>
 
           <div className="flex gap-2">
             <button
diff --git a/client/src/components/agents/tabs/WorldTab.jsx b/client/src/components/agents/tabs/WorldTab.jsx
index 506553763..9e55a3737 100644
--- a/client/src/components/agents/tabs/WorldTab.jsx
+++ b/client/src/components/agents/tabs/WorldTab.jsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from 'react';
 import toast from '../../ui/Toast';
+import { FormField } from '../../ui/FormField';
 import * as api from '../../../services/api';
 import BrailleSpinner from '../../BrailleSpinner';
 import socket from '../../../services/socket';
@@ -804,8 +805,7 @@ export default function WorldTab({ agentId }) {
               {wsConnected && <span className="text-xs text-port-success">(via WS)</span>}
             </div>
             <div className="grid grid-cols-2 gap-2 mb-2">
-              <div>
-                <label className="block text-xs text-gray-500 mb-1">X (-240 to 240)</label>
+              <FormField label="X (-240 to 240)" labelClassName="block text-xs text-gray-500 mb-1">
                 <input
                   type="number"
                   value={moveX}
@@ -815,9 +815,8 @@ export default function WorldTab({ agentId }) {
                   placeholder="X"
                   className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white"
                 />
-              </div>
-              <div>
-                <label className="block text-xs text-gray-500 mb-1">Y (-240 to 240)</label>
+              </FormField>
+              <FormField label="Y (-240 to 240)" labelClassName="block text-xs text-gray-500 mb-1">
                 <input
                   type="number"
                   value={moveY}
@@ -827,7 +826,7 @@ export default function WorldTab({ agentId }) {
                   placeholder="Y"
                   className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white"
                 />
-              </div>
+              </FormField>
             </div>
             <input
               type="text"
@@ -882,8 +881,7 @@ export default function WorldTab({ agentId }) {
           <div className="bg-port-card border border-port-border rounded-lg p-4">
             <h3 className="font-semibold text-white mb-3">Build</h3>
             <div className="grid grid-cols-3 gap-2 mb-2">
-              <div>
-                <label className="block text-xs text-gray-500 mb-1">X</label>
+              <FormField label="X" labelClassName="block text-xs text-gray-500 mb-1">
                 <input
                   type="number"
                   value={buildX}
@@ -893,9 +891,8 @@ export default function WorldTab({ agentId }) {
                   placeholder="X"
                   className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white"
                 />
-              </div>
-              <div>
-                <label className="block text-xs text-gray-500 mb-1">Y</label>
+              </FormField>
+              <FormField label="Y" labelClassName="block text-xs text-gray-500 mb-1">
                 <input
                   type="number"
                   value={buildY}
@@ -905,9 +902,8 @@ export default function WorldTab({ agentId }) {
                   placeholder="Y"
                   className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white"
                 />
-              </div>
-              <div>
-                <label className="block text-xs text-gray-500 mb-1">Z (height)</label>
+              </FormField>
+              <FormField label="Z (height)" labelClassName="block text-xs text-gray-500 mb-1">
                 <input
                   type="number"
                   value={buildZ}
@@ -917,7 +913,7 @@ export default function WorldTab({ agentId }) {
                   placeholder="Z"
                   className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white"
                 />
-              </div>
+              </FormField>
             </div>
             <div className="grid grid-cols-2 gap-2 mb-3">
               <select
diff --git a/client/src/components/apps/SlashDoPanel.jsx b/client/src/components/apps/SlashDoPanel.jsx
index 2fd210f6c..d18d9a064 100644
--- a/client/src/components/apps/SlashDoPanel.jsx
+++ b/client/src/components/apps/SlashDoPanel.jsx
@@ -28,7 +28,7 @@ export default function SlashDoPanel({ appId, appType }) {
 
   const handleRun = async (command) => {
     setLoading(command.id);
-    const result = await api.createSlashdoTask(command.id, appId).catch(err => {
+    const result = await api.createSlashdoTask(command.id, appId, { silent: true }).catch(err => {
       toast.error(err.message || `Failed to queue ${command.label}`);
       return null;
     });
diff --git a/client/src/components/apps/tabs/AutomationTab.jsx b/client/src/components/apps/tabs/AutomationTab.jsx
index ae07179a5..97720026a 100644
--- a/client/src/components/apps/tabs/AutomationTab.jsx
+++ b/client/src/components/apps/tabs/AutomationTab.jsx
@@ -46,7 +46,7 @@ export default function AutomationTab({ appId, appName }) {
 
   const handleResume = async () => {
     setResuming(true);
-    const result = await api.resumeCos().catch(err => {
+    const result = await api.resumeCos({ silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -59,7 +59,7 @@ export default function AutomationTab({ appId, appName }) {
 
   const handleToggle = async (taskType, isEnabled) => {
     const newEnabled = !isEnabled;
-    await api.updateAppTaskTypeOverride(appId, taskType, { enabled: newEnabled }).catch(err => {
+    await api.updateAppTaskTypeOverride(appId, taskType, { enabled: newEnabled }, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -78,7 +78,7 @@ export default function AutomationTab({ appId, appName }) {
     }
     setCronEditing(prev => { const n = { ...prev }; delete n[taskType]; return n; });
     const value = interval === 'null' ? null : interval;
-    await api.updateAppTaskTypeOverride(appId, taskType, { interval: value }).catch(err => {
+    await api.updateAppTaskTypeOverride(appId, taskType, { interval: value }, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -89,7 +89,7 @@ export default function AutomationTab({ appId, appName }) {
   };
 
   const handleCronSave = async (taskType, expr) => {
-    await api.updateAppTaskTypeOverride(appId, taskType, { interval: expr }).catch(err => {
+    await api.updateAppTaskTypeOverride(appId, taskType, { interval: expr }, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -102,7 +102,7 @@ export default function AutomationTab({ appId, appName }) {
 
   const handleMetaToggle = async (taskType, field, globalTaskMetadata) => {
     const taskMetadata = toggleAppMetadataOverride(overrides[taskType]?.taskMetadata, globalTaskMetadata, field);
-    await api.updateAppTaskTypeOverride(appId, taskType, { taskMetadata }).catch(err => {
+    await api.updateAppTaskTypeOverride(appId, taskType, { taskMetadata }, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -114,7 +114,7 @@ export default function AutomationTab({ appId, appName }) {
 
   const handleTrigger = async (taskType) => {
     setTriggering(taskType);
-    const result = await api.triggerCosOnDemandTask(taskType, appId).catch(err => {
+    const result = await api.triggerCosOnDemandTask(taskType, appId, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -133,7 +133,7 @@ export default function AutomationTab({ appId, appName }) {
 
   const handleToggleAll = async () => {
     const newEnabled = !allEnabled;
-    const result = await api.toggleAllAppTaskTypes(appId, newEnabled).catch(err => {
+    const result = await api.toggleAllAppTaskTypes(appId, newEnabled, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
diff --git a/client/src/components/apps/tabs/ProcessesTab.jsx b/client/src/components/apps/tabs/ProcessesTab.jsx
index db8e995d7..2a0c73251 100644
--- a/client/src/components/apps/tabs/ProcessesTab.jsx
+++ b/client/src/components/apps/tabs/ProcessesTab.jsx
@@ -4,18 +4,9 @@ import * as api from '../../../services/api';
 import { executeCommand } from '../../../services/api';
 import socket from '../../../services/socket';
 import BrailleSpinner from '../../BrailleSpinner';
+import { FormField } from '../../ui/FormField';
 import { useAutoRefetch } from '../../../hooks/useAutoRefetch';
-import { formatBytes } from '../../../utils/formatters';
-
-const formatUptime = (ms) => {
-  if (!ms) return '-';
-  const hours = Math.floor(ms / 3600000);
-  const mins = Math.floor((ms % 3600000) / 60000);
-  if (hours > 24) {
-    return `${Math.floor(hours / 24)}d ${hours % 24}h`;
-  }
-  return `${hours}h ${mins}m`;
-};
+import { formatBytes, formatDurationMs } from '../../../utils/formatters';
 
 const getStatusClasses = (status) => {
   switch (status) {
@@ -174,7 +165,7 @@ export default function ProcessesTab({ pm2ProcessNames, filterFn }) {
                     <td className="px-4 py-3 text-gray-400 font-mono text-sm">{proc.pid || '-'}</td>
                     <td className="px-4 py-3 text-gray-400">{proc.cpu ? `${proc.cpu}%` : '-'}</td>
                     <td className="px-4 py-3 text-gray-400">{formatBytes(proc.memory)}</td>
-                    <td className="px-4 py-3 text-gray-400">{formatUptime(proc.uptime)}</td>
+                    <td className="px-4 py-3 text-gray-400">{proc.uptime ? formatDurationMs(proc.uptime) : '-'}</td>
                     <td className="px-4 py-3 text-gray-400">{proc.restarts}</td>
                     <td className="px-4 py-3 text-right">
                       <div className="flex justify-end gap-1">
@@ -219,8 +210,7 @@ export default function ProcessesTab({ pm2ProcessNames, filterFn }) {
                               )}
                             </div>
                             <div className="flex items-center gap-3">
-                              <div className="flex items-center gap-2">
-                                <label className="text-xs text-gray-500">Tail lines:</label>
+                              <FormField className="flex items-center gap-2" label="Tail lines:" labelClassName="text-xs text-gray-500">
                                 <select
                                   value={tailLines}
                                   onChange={(e) => {
@@ -235,7 +225,7 @@ export default function ProcessesTab({ pm2ProcessNames, filterFn }) {
                                   <option value={1000}>1000</option>
                                   <option value={2000}>2000</option>
                                 </select>
-                              </div>
+                              </FormField>
                               <span className="text-xs text-gray-600">{logs.length} lines</span>
                               <button
                                 onClick={() => setLogs([])}
@@ -304,8 +294,7 @@ export default function ProcessesTab({ pm2ProcessNames, filterFn }) {
               )}
             </div>
             <div className="flex items-center gap-4">
-              <div className="flex items-center gap-2">
-                <label className="text-sm text-gray-500">Tail lines:</label>
+              <FormField className="flex items-center gap-2" label="Tail lines:" labelClassName="text-sm text-gray-500">
                 <select
                   value={tailLines}
                   onChange={(e) => {
@@ -320,7 +309,7 @@ export default function ProcessesTab({ pm2ProcessNames, filterFn }) {
                   <option value={1000}>1000</option>
                   <option value={2000}>2000</option>
                 </select>
-              </div>
+              </FormField>
               <span className="text-sm text-gray-600">{logs.length} lines</span>
               <button
                 onClick={() => setLogs([])}
diff --git a/client/src/components/apps/tabs/UpdateTab.test.jsx b/client/src/components/apps/tabs/UpdateTab.test.jsx
index e189bfb74..545a75ecb 100644
--- a/client/src/components/apps/tabs/UpdateTab.test.jsx
+++ b/client/src/components/apps/tabs/UpdateTab.test.jsx
@@ -39,6 +39,19 @@ const OUT_OF_SYNC_STATUS = {
 // Fires 'disconnect' and advances past the 1.5s unreachability-confirmation
 // delay in handleDisconnect, flushing the checkHealth() microtask through it.
 const fireDisconnectAndConfirm = async () => {
+  // Flush pending passive effects FIRST. The component mirrors `updating` into
+  // `updatingRef` via a separate effect (`useEffect(() => { updatingRef.current
+  // = updating }, [updating])`), and handleDisconnect's guard reads that ref
+  // synchronously. runUpdate() calls setUpdating(true) outside any act (after
+  // awaiting the pre-update health check), so the "Reconciling..." button —
+  // driven directly by the `updating` state — can commit to the DOM (and
+  // satisfy the caller's waitFor) a scheduler tick before the ref-sync effect
+  // runs. Without this flush the
+  // ref can still be stale-false when we fire 'disconnect', the confirmation
+  // timer never arms, and "Restarting..." never appears: the intermittent CI
+  // failure (#2065). Draining effects here syncs the ref to the state
+  // production always reaches over real network time.
+  await act(async () => {});
   vi.useFakeTimers();
   handlers.get('disconnect')();
   await act(async () => { await vi.advanceTimersByTimeAsync(1500); });
@@ -99,6 +112,10 @@ describe('UpdateTab reconcile flow', () => {
     // before the 1.5s confirmation delay elapsed. Nothing is left mounted to
     // ever dismiss a toast.loading({ duration: Infinity }) popped after this.
     mockCheckHealth.mockResolvedValue(null);
+    // Flush pending effects so updatingRef is true when we fire 'disconnect'
+    // (see fireDisconnectAndConfirm) — otherwise the confirmation timer never
+    // arms and this asserts "no toast" for the wrong reason.
+    await act(async () => {});
     vi.useFakeTimers();
     handlers.get('disconnect')();
     unmount();
diff --git a/client/src/components/brain/links/BucketBoard.jsx b/client/src/components/brain/links/BucketBoard.jsx
index 2448926ca..810de6333 100644
--- a/client/src/components/brain/links/BucketBoard.jsx
+++ b/client/src/components/brain/links/BucketBoard.jsx
@@ -20,7 +20,7 @@ export default function BucketBoard({ links, buckets, setBuckets, onAssignLink,
     e.preventDefault();
     const name = newName.trim();
     if (!name) return;
-    const bucket = await api.createBrainBucket({ name }).catch(err => {
+    const bucket = await api.createBrainBucket({ name }, { silent: true }).catch(err => {
       toast.error(err.message || 'Failed to create bucket');
       return null;
     });
@@ -32,7 +32,7 @@ export default function BucketBoard({ links, buckets, setBuckets, onAssignLink,
   };
 
   const handleUpdate = useCallback(async (id, patch) => {
-    const updated = await api.updateBrainBucket(id, patch).catch(err => {
+    const updated = await api.updateBrainBucket(id, patch, { silent: true }).catch(err => {
       toast.error(err.message || 'Failed to update bucket');
       return null;
     });
@@ -40,7 +40,7 @@ export default function BucketBoard({ links, buckets, setBuckets, onAssignLink,
   }, [setBuckets]);
 
   const handleDelete = useCallback(async (id) => {
-    const ok = await api.deleteBrainBucket(id).catch(err => {
+    const ok = await api.deleteBrainBucket(id, { silent: true }).catch(err => {
       toast.error(err.message || 'Failed to delete bucket');
       return null;
     });
@@ -77,7 +77,7 @@ export default function BucketBoard({ links, buckets, setBuckets, onAssignLink,
       const next = [...prev];
       const [moved] = next.splice(from, 1);
       next.splice(to, 0, moved);
-      api.reorderBrainBuckets(next.map(b => b.id)).catch(err => {
+      api.reorderBrainBuckets(next.map(b => b.id), { silent: true }).catch(err => {
         toast.error(err.message || 'Failed to reorder buckets');
       });
       return next;
diff --git a/client/src/components/brain/links/BucketBoard.test.jsx b/client/src/components/brain/links/BucketBoard.test.jsx
index 3d13f4810..0605ee1ca 100644
--- a/client/src/components/brain/links/BucketBoard.test.jsx
+++ b/client/src/components/brain/links/BucketBoard.test.jsx
@@ -135,7 +135,7 @@ describe('BucketBoard', () => {
     fireEvent.change(screen.getByLabelText('New bucket name'), { target: { value: 'Reading' } });
     fireEvent.click(screen.getByText('Create'));
 
-    await waitFor(() => expect(api.createBrainBucket).toHaveBeenCalledWith({ name: 'Reading' }));
+    await waitFor(() => expect(api.createBrainBucket).toHaveBeenCalledWith({ name: 'Reading' }, { silent: true }));
     expect(setBuckets).toHaveBeenCalled();
   });
 });
diff --git a/client/src/components/brain/tabs/ConfigTab.jsx b/client/src/components/brain/tabs/ConfigTab.jsx
index 912a78710..02853f1f6 100644
--- a/client/src/components/brain/tabs/ConfigTab.jsx
+++ b/client/src/components/brain/tabs/ConfigTab.jsx
@@ -104,7 +104,7 @@ export default function ConfigTab({ onRefresh }) {
   const handleSaveEmbedding = async () => {
     setSavingEmbedding(true);
     const result = await api
-      .updateCosConfig({ embeddingProviderId: embeddingProvider, embeddingModel })
+      .updateCosConfig({ embeddingProviderId: embeddingProvider, embeddingModel }, { silent: true })
       .catch(err => { toast.error(err.message || 'Failed to save embedding config'); return null; });
     setSavingEmbedding(false);
     if (result) {
@@ -139,7 +139,7 @@ export default function ConfigTab({ onRefresh }) {
       weeklyReviewTime
     };
 
-    const result = await api.updateBrainSettings(updatedSettings).catch(err => {
+    const result = await api.updateBrainSettings(updatedSettings, { silent: true }).catch(err => {
       toast.error(err.message || 'Failed to save settings');
       return null;
     });
diff --git a/client/src/components/brain/tabs/DailyLogTab.jsx b/client/src/components/brain/tabs/DailyLogTab.jsx
index 0e3c91198..188f11582 100644
--- a/client/src/components/brain/tabs/DailyLogTab.jsx
+++ b/client/src/components/brain/tabs/DailyLogTab.jsx
@@ -5,6 +5,7 @@ import * as api from '../../../services/api';
 import { getNotesVaults } from '../../../services/apiNotes';
 import toast from '../../ui/Toast';
 import InlineConfirmRow from '../../ui/InlineConfirmRow';
+import { FormField } from '../../ui/FormField';
 import { onVoiceEvent, sendText, setDictation as setVoiceDictation } from '../../../services/voiceClient';
 import BrailleSpinner from '../../BrailleSpinner';
 
@@ -377,8 +378,7 @@ export default function DailyLogTab() {
 
         {showSettings && (
           <div className="p-3 border-b border-port-border space-y-3">
-            <div>
-              <label className="block text-xs text-gray-400 mb-1">Obsidian vault (mirror logs)</label>
+            <FormField label="Obsidian vault (mirror logs)" labelClassName="block text-xs text-gray-400 mb-1">
               <select
                 value={settings?.obsidianVaultId || ''}
                 onChange={(e) => saveSettings({ obsidianVaultId: e.target.value || null })}
@@ -389,9 +389,8 @@ export default function DailyLogTab() {
                   <option key={v.id} value={v.id}>{v.name}</option>
                 ))}
               </select>
-            </div>
-            <div>
-              <label className="block text-xs text-gray-400 mb-1">Folder inside vault</label>
+            </FormField>
+            <FormField label="Folder inside vault" labelClassName="block text-xs text-gray-400 mb-1">
               <input
                 type="text"
                 value={settings?.obsidianFolder || ''}
@@ -400,7 +399,7 @@ export default function DailyLogTab() {
                 className="w-full bg-port-bg border border-port-border rounded px-2 py-1.5 text-sm text-white"
                 placeholder="Daily Log"
               />
-            </div>
+            </FormField>
             <label className="flex items-center gap-2 text-xs text-gray-400">
               <input
                 type="checkbox"
diff --git a/client/src/components/brain/tabs/DigestTab.jsx b/client/src/components/brain/tabs/DigestTab.jsx
index 2497eb89a..e00c26a7f 100644
--- a/client/src/components/brain/tabs/DigestTab.jsx
+++ b/client/src/components/brain/tabs/DigestTab.jsx
@@ -45,7 +45,7 @@ export default function DigestTab({ onRefresh }) {
 
   const handleRunDigest = async () => {
     setRunningDigest(true);
-    const result = await api.runBrainDigest().catch(err => {
+    const result = await api.runBrainDigest(undefined, undefined, { silent: true }).catch(err => {
       toast.error(err.message || 'Failed to generate digest');
       return null;
     });
@@ -60,7 +60,7 @@ export default function DigestTab({ onRefresh }) {
 
   const handleRunReview = async () => {
     setRunningReview(true);
-    const result = await api.runBrainReview().catch(err => {
+    const result = await api.runBrainReview(undefined, undefined, { silent: true }).catch(err => {
       toast.error(err.message || 'Failed to generate review');
       return null;
     });
diff --git a/client/src/components/brain/tabs/InboxTab.jsx b/client/src/components/brain/tabs/InboxTab.jsx
index 71ff7aba9..b1b2e6bcd 100644
--- a/client/src/components/brain/tabs/InboxTab.jsx
+++ b/client/src/components/brain/tabs/InboxTab.jsx
@@ -106,7 +106,7 @@ export default function InboxTab({ onRefresh, settings }) {
     setInputText('');
     setEntries(prev => [optimisticEntry, ...prev]);
 
-    const result = await api.captureBrainThought(text, undefined, undefined, { creative }).catch(err => {
+    const result = await api.captureBrainThought(text, undefined, undefined, { creative }, { silent: true }).catch(err => {
       toast.error(err.message || 'Failed to capture thought');
       setEntries(prev => prev.filter(e => e.id !== tempId));
       return null;
@@ -121,7 +121,7 @@ export default function InboxTab({ onRefresh, settings }) {
   };
 
   const handleResolve = async (entryId, destination) => {
-    const result = await api.resolveBrainReview(entryId, destination).catch(err => {
+    const result = await api.resolveBrainReview(entryId, destination, undefined, { silent: true }).catch(err => {
       toast.error(err.message || 'Failed to resolve');
       return null;
     });
@@ -136,7 +136,7 @@ export default function InboxTab({ onRefresh, settings }) {
   const handleRetry = async (entryId) => {
     if (retryingId) return;
     setRetryingId(entryId);
-    const result = await api.retryBrainClassification(entryId).catch(err => {
+    const result = await api.retryBrainClassification(entryId, undefined, undefined, { silent: true }).catch(err => {
       toast.error(err.message || 'Failed to retry');
       return null;
     });
@@ -155,7 +155,7 @@ export default function InboxTab({ onRefresh, settings }) {
       return;
     }
 
-    const result = await api.fixBrainClassification(entryId, fixDestination).catch(err => {
+    const result = await api.fixBrainClassification(entryId, fixDestination, undefined, undefined, { silent: true }).catch(err => {
       toast.error(err.message || 'Failed to fix');
       return null;
     });
@@ -180,7 +180,7 @@ export default function InboxTab({ onRefresh, settings }) {
       return;
     }
 
-    const result = await api.updateBrainInboxEntry(entryId, editText.trim()).catch(err => {
+    const result = await api.updateBrainInboxEntry(entryId, editText.trim(), { silent: true }).catch(err => {
       toast.error(err.message || 'Failed to update');
       return null;
     });
@@ -201,7 +201,7 @@ export default function InboxTab({ onRefresh, settings }) {
 
   const handleDelete = async (entryId) => {
     let failed = false;
-    await api.deleteBrainInboxEntry(entryId).catch(err => {
+    await api.deleteBrainInboxEntry(entryId, { silent: true }).catch(err => {
       toast.error(err.message || 'Failed to delete');
       failed = true;
     });
@@ -214,7 +214,7 @@ export default function InboxTab({ onRefresh, settings }) {
   };
 
   const handleMarkDone = async (entryId) => {
-    const result = await api.markBrainInboxDone(entryId).catch(err => {
+    const result = await api.markBrainInboxDone(entryId, { silent: true }).catch(err => {
       toast.error(err.message || 'Failed to mark done');
       return null;
     });
diff --git a/client/src/components/brain/tabs/LinksTab.jsx b/client/src/components/brain/tabs/LinksTab.jsx
index 765b124a0..76e26ac0b 100644
--- a/client/src/components/brain/tabs/LinksTab.jsx
+++ b/client/src/components/brain/tabs/LinksTab.jsx
@@ -270,7 +270,7 @@ export default function LinksTab({ onRefresh }) {
   };
 
   const handleDelete = async (linkId) => {
-    const result = await api.deleteBrainLink(linkId).catch(err => {
+    const result = await api.deleteBrainLink(linkId, { silent: true }).catch(err => {
       toast.error(err.message || 'Failed to delete');
       return null;
     });
@@ -283,7 +283,7 @@ export default function LinksTab({ onRefresh }) {
   };
 
   const handleClone = async (linkId) => {
-    const result = await api.cloneBrainLink(linkId).catch(err => {
+    const result = await api.cloneBrainLink(linkId, { silent: true }).catch(err => {
       toast.error(err.message || 'Failed to start clone');
       return null;
     });
@@ -295,7 +295,7 @@ export default function LinksTab({ onRefresh }) {
   };
 
   const handlePull = async (linkId) => {
-    const result = await api.pullBrainLink(linkId).catch(err => {
+    const result = await api.pullBrainLink(linkId, { silent: true }).catch(err => {
       toast.error(err.message || 'Failed to pull');
       return null;
     });
@@ -306,14 +306,14 @@ export default function LinksTab({ onRefresh }) {
   };
 
   const handleOpenFolder = async (linkId) => {
-    await api.openBrainLinkFolder(linkId).catch(err => {
+    await api.openBrainLinkFolder(linkId, { silent: true }).catch(err => {
       toast.error(err.message || 'Failed to open folder');
     });
   };
 
   const handleScan = async (linkId) => {
     setScanningId(linkId);
-    const result = await api.scanBrainLink(linkId).catch(err => {
+    const result = await api.scanBrainLink(linkId, { silent: true }).catch(err => {
       toast.error(err.message || 'Failed to start scan');
       return null;
     });
diff --git a/client/src/components/brain/tabs/MemoryTab.jsx b/client/src/components/brain/tabs/MemoryTab.jsx
index 4f77e39a1..6e444a175 100644
--- a/client/src/components/brain/tabs/MemoryTab.jsx
+++ b/client/src/components/brain/tabs/MemoryTab.jsx
@@ -91,25 +91,25 @@ export default function MemoryTab({ onRefresh }) {
     let result;
     switch (activeType) {
       case 'people':
-        result = await api.updateBrainPerson(editingId, editForm).catch(err => {
+        result = await api.updateBrainPerson(editingId, editForm, { silent: true }).catch(err => {
           toast.error(err.message);
           return null;
         });
         break;
       case 'projects':
-        result = await api.updateBrainProject(editingId, editForm).catch(err => {
+        result = await api.updateBrainProject(editingId, editForm, { silent: true }).catch(err => {
           toast.error(err.message);
           return null;
         });
         break;
       case 'ideas':
-        result = await api.updateBrainIdea(editingId, editForm).catch(err => {
+        result = await api.updateBrainIdea(editingId, editForm, { silent: true }).catch(err => {
           toast.error(err.message);
           return null;
         });
         break;
       case 'admin':
-        result = await api.updateBrainAdminItem(editingId, editForm).catch(err => {
+        result = await api.updateBrainAdminItem(editingId, editForm, { silent: true }).catch(err => {
           toast.error(err.message);
           return null;
         });
@@ -117,7 +117,7 @@ export default function MemoryTab({ onRefresh }) {
       case 'memories': {
         const { tagInput, ...memData } = editForm;
         if (tagInput != null) memData.tags = tagInput.split(',').map(s => s.trim()).filter(Boolean);
-        result = await api.updateBrainMemory(editingId, memData).catch(err => {
+        result = await api.updateBrainMemory(editingId, memData, { silent: true }).catch(err => {
           toast.error(err.message);
           return null;
         });
@@ -138,25 +138,25 @@ export default function MemoryTab({ onRefresh }) {
     let result;
     switch (activeType) {
       case 'people':
-        result = await api.createBrainPerson(addForm).catch(err => {
+        result = await api.createBrainPerson(addForm, { silent: true }).catch(err => {
           toast.error(err.message);
           return null;
         });
         break;
       case 'projects':
-        result = await api.createBrainProject({ ...addForm, status: addForm.status || 'active' }).catch(err => {
+        result = await api.createBrainProject({ ...addForm, status: addForm.status || 'active' }, { silent: true }).catch(err => {
           toast.error(err.message);
           return null;
         });
         break;
       case 'ideas':
-        result = await api.createBrainIdea(addForm).catch(err => {
+        result = await api.createBrainIdea(addForm, { silent: true }).catch(err => {
           toast.error(err.message);
           return null;
         });
         break;
       case 'admin':
-        result = await api.createBrainAdminItem({ ...addForm, status: addForm.status || 'open' }).catch(err => {
+        result = await api.createBrainAdminItem({ ...addForm, status: addForm.status || 'open' }, { silent: true }).catch(err => {
           toast.error(err.message);
           return null;
         });
@@ -164,7 +164,7 @@ export default function MemoryTab({ onRefresh }) {
       case 'memories': {
         const { tagInput, ...memData } = addForm;
         if (tagInput != null) memData.tags = tagInput.split(',').map(s => s.trim()).filter(Boolean);
-        result = await api.createBrainMemory(memData).catch(err => {
+        result = await api.createBrainMemory(memData, { silent: true }).catch(err => {
           toast.error(err.message);
           return null;
         });
@@ -185,31 +185,31 @@ export default function MemoryTab({ onRefresh }) {
     let failed = false;
     switch (activeType) {
       case 'people':
-        await api.deleteBrainPerson(id).catch(err => {
+        await api.deleteBrainPerson(id, { silent: true }).catch(err => {
           toast.error(err.message);
           failed = true;
         });
         break;
       case 'projects':
-        await api.deleteBrainProject(id).catch(err => {
+        await api.deleteBrainProject(id, { silent: true }).catch(err => {
           toast.error(err.message);
           failed = true;
         });
         break;
       case 'ideas':
-        await api.deleteBrainIdea(id).catch(err => {
+        await api.deleteBrainIdea(id, { silent: true }).catch(err => {
           toast.error(err.message);
           failed = true;
         });
         break;
       case 'admin':
-        await api.deleteBrainAdminItem(id).catch(err => {
+        await api.deleteBrainAdminItem(id, { silent: true }).catch(err => {
           toast.error(err.message);
           failed = true;
         });
         break;
       case 'memories':
-        await api.deleteBrainMemory(id).catch(err => {
+        await api.deleteBrainMemory(id, { silent: true }).catch(err => {
           toast.error(err.message);
           failed = true;
         });
@@ -228,19 +228,19 @@ export default function MemoryTab({ onRefresh }) {
     const update = { status: 'done' };
     switch (activeType) {
       case 'projects':
-        result = await api.updateBrainProject(record.id, update).catch(err => {
+        result = await api.updateBrainProject(record.id, update, { silent: true }).catch(err => {
           toast.error(err.message);
           return null;
         });
         break;
       case 'ideas':
-        result = await api.updateBrainIdea(record.id, update).catch(err => {
+        result = await api.updateBrainIdea(record.id, update, { silent: true }).catch(err => {
           toast.error(err.message);
           return null;
         });
         break;
       case 'admin':
-        result = await api.updateBrainAdminItem(record.id, update).catch(err => {
+        result = await api.updateBrainAdminItem(record.id, update, { silent: true }).catch(err => {
           toast.error(err.message);
           return null;
         });
diff --git a/client/src/components/brain/tabs/TrustTab.jsx b/client/src/components/brain/tabs/TrustTab.jsx
index 50f6b4593..240ff4b95 100644
--- a/client/src/components/brain/tabs/TrustTab.jsx
+++ b/client/src/components/brain/tabs/TrustTab.jsx
@@ -9,6 +9,7 @@ import {
 } from 'lucide-react';
 import BrailleSpinner from '../../BrailleSpinner';
 import toast from '../../ui/Toast';
+import { FormField } from '../../ui/FormField';
 
 import {
   DESTINATIONS,
@@ -56,7 +57,7 @@ export default function TrustTab({ onRefresh }) {
       dailyDigestTime: settingsForm.dailyDigestTime,
       weeklyReviewTime: settingsForm.weeklyReviewTime,
       weeklyReviewDay: settingsForm.weeklyReviewDay
-    }).catch(err => {
+    }, { silent: true }).catch(err => {
       toast.error(err.message || 'Failed to save settings');
       return null;
     });
@@ -118,8 +119,7 @@ export default function TrustTab({ onRefresh }) {
         {editingSettings ? (
           <div className="space-y-4">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div>
-                <label className="block text-sm text-gray-400 mb-1">Confidence Threshold</label>
+              <FormField label="Confidence Threshold">
                 <input
                   type="number"
                   min="0"
@@ -132,20 +132,18 @@ export default function TrustTab({ onRefresh }) {
                 <p className="text-xs text-gray-500 mt-1">
                   Items below this threshold go to "needs review" (0-1)
                 </p>
-              </div>
+              </FormField>
 
-              <div>
-                <label className="block text-sm text-gray-400 mb-1">Daily Digest Time</label>
+              <FormField label="Daily Digest Time">
                 <input
                   type="time"
                   value={settingsForm.dailyDigestTime || '09:00'}
                   onChange={(e) => setSettingsForm({ ...settingsForm, dailyDigestTime: e.target.value })}
                   className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white"
                 />
-              </div>
+              </FormField>
 
-              <div>
-                <label className="block text-sm text-gray-400 mb-1">Weekly Review Day</label>
+              <FormField label="Weekly Review Day">
                 <select
                   value={settingsForm.weeklyReviewDay || 'sunday'}
                   onChange={(e) => setSettingsForm({ ...settingsForm, weeklyReviewDay: e.target.value })}
@@ -159,17 +157,16 @@ export default function TrustTab({ onRefresh }) {
                   <option value="friday">Friday</option>
                   <option value="saturday">Saturday</option>
                 </select>
-              </div>
+              </FormField>
 
-              <div>
-                <label className="block text-sm text-gray-400 mb-1">Weekly Review Time</label>
+              <FormField label="Weekly Review Time">
                 <input
                   type="time"
                   value={settingsForm.weeklyReviewTime || '16:00'}
                   onChange={(e) => setSettingsForm({ ...settingsForm, weeklyReviewTime: e.target.value })}
                   className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white"
                 />
-              </div>
+              </FormField>
             </div>
 
             <div className="flex items-center gap-2">
diff --git a/client/src/components/calendar/ConfigTab.jsx b/client/src/components/calendar/ConfigTab.jsx
index 7fc638729..5cffdbcc1 100644
--- a/client/src/components/calendar/ConfigTab.jsx
+++ b/client/src/components/calendar/ConfigTab.jsx
@@ -6,6 +6,7 @@ import * as api from '../../services/api';
 import { formatDateTime } from '../../utils/formatters';
 import FeatureProviderPicker from '../FeatureProviderPicker';
 import InlineConfirmRow from '../ui/InlineConfirmRow';
+import { FormField } from '../ui/FormField';
 import { useConfirmDelete } from '../../hooks/useConfirmDelete';
 
 const TYPE_ICONS = { 'outlook-calendar': Globe, 'google-calendar': Calendar };
@@ -217,8 +218,7 @@ export default function ConfigTab({ accounts, setAccounts }) {
 
         {showForm && (
           <div className="p-4 bg-port-card rounded-lg border border-port-border space-y-3 mb-4">
-            <div>
-              <label className="block text-sm text-gray-400 mb-1">Name</label>
+            <FormField label="Name">
               <input
                 type="text"
                 value={form.name}
@@ -226,9 +226,8 @@ export default function ConfigTab({ accounts, setAccounts }) {
                 placeholder="e.g. Work Calendar"
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-sm text-white placeholder-gray-500 focus:outline-none focus:border-port-accent"
               />
-            </div>
-            <div>
-              <label className="block text-sm text-gray-400 mb-1">Type</label>
+            </FormField>
+            <FormField label="Type">
               <select
                 value={form.type}
                 onChange={(e) => setForm(f => ({ ...f, type: e.target.value }))}
@@ -237,9 +236,8 @@ export default function ConfigTab({ accounts, setAccounts }) {
                 <option value="outlook-calendar">Outlook Calendar (API)</option>
                 <option value="google-calendar">Google Calendar (MCP Push)</option>
               </select>
-            </div>
-            <div>
-              <label className="block text-sm text-gray-400 mb-1">Email{form.type === 'google-calendar' ? ' (used as OAuth test user)' : ''}</label>
+            </FormField>
+            <FormField label={`Email${form.type === 'google-calendar' ? ' (used as OAuth test user)' : ''}`}>
               <input
                 type="email"
                 value={form.email}
@@ -247,7 +245,7 @@ export default function ConfigTab({ accounts, setAccounts }) {
                 placeholder="user@example.com"
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-sm text-white placeholder-gray-500 focus:outline-none focus:border-port-accent"
               />
-            </div>
+            </FormField>
             <div className="flex gap-2">
               <button
                 onClick={handleCreate}
diff --git a/client/src/components/city/CityHud.jsx b/client/src/components/city/CityHud.jsx
index 4b1737fbf..56aade99b 100644
--- a/client/src/components/city/CityHud.jsx
+++ b/client/src/components/city/CityHud.jsx
@@ -5,6 +5,7 @@ import CityAgentBar from './CityAgentBar';
 import CityFilterBar from './CityFilterBar';
 import CityXpBadge from './CityXpBadge';
 import CityMiniMap from './CityMiniMap';
+import { formatDurationMs } from '../../utils/formatters';
 
 // WASD controls hint shown briefly on first exploration entry
 function ControlsHint({ visible }) {
@@ -49,16 +50,6 @@ function ControlsHint({ visible }) {
   );
 }
 
-// Format uptime from page load
-const formatUptime = (seconds) => {
-  const h = Math.floor(seconds / 3600);
-  const m = Math.floor((seconds % 3600) / 60);
-  const s = Math.floor(seconds % 60);
-  if (h > 0) return `${h}h ${m}m`;
-  if (m > 0) return `${m}m ${s}s`;
-  return `${s}s`;
-};
-
 const getHealthSentinel = (systemHealth, onlineRatio) => {
   if (systemHealth?.overallHealth === 'critical') return { dot: 'bg-port-error', text: 'text-port-error', label: 'CRITICAL' };
   if (systemHealth?.overallHealth === 'warning') return { dot: 'bg-port-warning', text: 'text-port-warning', label: 'WARN' };
@@ -213,7 +204,7 @@ export default function CityHud({ cosStatus, cosAgents, agentMap, eventLogs, con
           <div className="flex items-center justify-between gap-6">
             <span className="font-pixel text-[10px] text-gray-400 tracking-wide">UPTIME</span>
             <span className="font-pixel text-[11px] text-cyan-400" style={{ textShadow: '0 0 6px rgba(6,182,212,0.4)' }}>
-              {formatUptime(uptimeSeconds)}
+              {formatDurationMs(uptimeSeconds * 1000)}
             </span>
           </div>
 
diff --git a/client/src/components/cos/ActionableInsightsBanner.jsx b/client/src/components/cos/ActionableInsightsBanner.jsx
index 7b92d0174..c4f2315c1 100644
--- a/client/src/components/cos/ActionableInsightsBanner.jsx
+++ b/client/src/components/cos/ActionableInsightsBanner.jsx
@@ -117,7 +117,7 @@ export default function ActionableInsightsBanner({ onTaskUnblocked }) {
   };
 
   const handleUnblockTask = async (taskId, taskType) => {
-    const result = await api.updateCosTask(taskId, { status: 'pending', type: taskType }).catch(err => {
+    const result = await api.updateCosTask(taskId, { status: 'pending', type: taskType }, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
diff --git a/client/src/components/cos/QuickSummary.jsx b/client/src/components/cos/QuickSummary.jsx
index a151f4bb6..15b70866e 100644
--- a/client/src/components/cos/QuickSummary.jsx
+++ b/client/src/components/cos/QuickSummary.jsx
@@ -18,6 +18,7 @@ import {
 } from 'lucide-react';
 import * as api from '../../services/api';
 import { useAutoRefetch } from '../../hooks/useAutoRefetch';
+import { timeUntil } from '../../utils/formatters';
 
 /**
  * QuickSummary - At-a-glance dashboard widget for CoS status
@@ -76,22 +77,6 @@ export default function QuickSummary() {
 
   const velocityDisplay = getVelocityDisplay();
 
-  // Format time until next job
-  const formatTimeUntil = (isoDate) => {
-    if (!isoDate) return null;
-    const now = Date.now();
-    const due = new Date(isoDate).getTime();
-    const diffMs = due - now;
-
-    if (diffMs <= 0) return 'now';
-
-    const minutes = Math.floor(diffMs / 60000);
-    const hours = Math.floor(minutes / 60);
-
-    if (hours > 0) return `${hours}h ${minutes % 60}m`;
-    return `${minutes}m`;
-  };
-
   return (
     <div className="bg-gradient-to-r from-port-card to-port-bg border border-port-border rounded-lg p-3 mb-4">
       <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm">
@@ -253,7 +238,7 @@ export default function QuickSummary() {
               {nextJob.jobName?.replace(/^(self-improvement|app-improvement|task)-/, '').replace(/-/g, ' ')}
             </span>
             <span className="text-gray-500 text-xs">
-              {nextJob.isDue ? 'due' : formatTimeUntil(nextJob.nextDueAt)}
+              {nextJob.isDue ? 'due' : timeUntil(nextJob.nextDueAt)}
             </span>
           </div>
         )}
diff --git a/client/src/components/cos/TaskAddForm.jsx b/client/src/components/cos/TaskAddForm.jsx
index d98856160..97632ed0d 100644
--- a/client/src/components/cos/TaskAddForm.jsx
+++ b/client/src/components/cos/TaskAddForm.jsx
@@ -166,7 +166,7 @@ export default function TaskAddForm({ providers, apps, onTaskAdded, compact = fa
       provider: newTask.provider,
       model: newTask.model,
       app: newTask.app
-    }).catch(err => {
+    }, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -184,7 +184,7 @@ export default function TaskAddForm({ providers, apps, onTaskAdded, compact = fa
   // Delete a user template
   const deleteTemplate = useCallback(async (templateId, e) => {
     e.stopPropagation();
-    const result = await api.deleteCosTaskTemplate(templateId).catch(err => {
+    const result = await api.deleteCosTaskTemplate(templateId, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -274,7 +274,7 @@ export default function TaskAddForm({ providers, apps, onTaskAdded, compact = fa
         mimeType: a.mimeType
       })) : undefined,
       position: addToTop ? 'top' : 'bottom'
-    }).catch(err => {
+    }, { silent: true }).catch(err => {
       toast.error(err.message || 'Failed to add task');
       return null;
     });
diff --git a/client/src/components/cos/constants.js b/client/src/components/cos/constants.js
index 112739175..b09f4ed8f 100644
--- a/client/src/components/cos/constants.js
+++ b/client/src/components/cos/constants.js
@@ -362,13 +362,6 @@ export const detectAutonomyLevel = (config) => {
   return null; // Custom configuration
 };
 
-// Format milliseconds as human-readable interval
-export const formatInterval = (ms) => {
-  if (ms < 60000) return `${ms / 1000}s`;
-  if (ms < 3600000) return `${ms / 60000}min`;
-  return `${ms / 3600000}hr`;
-};
-
 // Avatar style labels for display
 export const AVATAR_STYLE_LABELS = {
   svg: 'Digital (SVG)',
diff --git a/client/src/components/cos/tabs/AgentCard.jsx b/client/src/components/cos/tabs/AgentCard.jsx
index 955977082..072dcd9de 100644
--- a/client/src/components/cos/tabs/AgentCard.jsx
+++ b/client/src/components/cos/tabs/AgentCard.jsx
@@ -151,7 +151,7 @@ export default function AgentCard({ agent, onPause, onKill, onDelete, onResume,
     const result = await api.submitCosAgentFeedback(agent.id, {
       rating,
       comment: feedbackComment || undefined
-    }).catch(err => {
+    }, { silent: true }).catch(err => {
       toast.error(`Failed to submit feedback: ${err.message}`);
       return null;
     });
@@ -192,7 +192,7 @@ export default function AgentCard({ agent, onPause, onKill, onDelete, onResume,
     if (sendingBtw || !btwInput.trim()) return;
     setSendingBtw(true);
 
-    const result = await api.sendCosAgentBtw(agent.id, btwInput.trim()).catch(err => {
+    const result = await api.sendCosAgentBtw(agent.id, btwInput.trim(), { silent: true }).catch(err => {
       toast.error(`Failed to send: ${err.message}`);
       return null;
     });
diff --git a/client/src/components/cos/tabs/AgentsTab.jsx b/client/src/components/cos/tabs/AgentsTab.jsx
index ebf990e4d..631fdb472 100644
--- a/client/src/components/cos/tabs/AgentsTab.jsx
+++ b/client/src/components/cos/tabs/AgentsTab.jsx
@@ -57,21 +57,21 @@ export default function AgentsTab({ agents, onRefresh, liveOutputs, providers, a
   }, [dateBuckets, loadedDates]);
 
   const handleKill = async (agentId) => {
-    const result = await api.killCosAgent(agentId).catch(err => { toast.error(err.message); return null; });
+    const result = await api.killCosAgent(agentId, { silent: true }).catch(err => { toast.error(err.message); return null; });
     if (!result) return;
     toast.success('Agent force killed');
     onRefresh();
   };
 
   const handlePause = async (agentId) => {
-    const result = await api.pauseCosAgent(agentId, 'Paused from CoS agent list').catch(err => { toast.error(err.message); return null; });
+    const result = await api.pauseCosAgent(agentId, 'Paused from CoS agent list', { silent: true }).catch(err => { toast.error(err.message); return null; });
     if (!result) return;
     toast.success('Agent paused');
     onRefresh();
   };
 
   const handleDelete = useCallback(async (agentId) => {
-    const result = await api.deleteCosAgent(agentId).catch(err => { toast.error(err.message); return null; });
+    const result = await api.deleteCosAgent(agentId, { silent: true }).catch(err => { toast.error(err.message); return null; });
     if (!result) return;
     setLoadedAgents(prev => {
       const deleted = prev.find(a => a.id === agentId);
@@ -100,7 +100,7 @@ export default function AgentsTab({ agents, onRefresh, liveOutputs, providers, a
       app: app || undefined,
       type,
       screenshots
-    }).catch(err => {
+    }, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -112,7 +112,7 @@ export default function AgentsTab({ agents, onRefresh, liveOutputs, providers, a
 
   const handleClearCompleted = async () => {
     setConfirmingClear(false);
-    const result = await api.clearCompletedCosAgents().catch(err => { toast.error(err.message); return null; });
+    const result = await api.clearCompletedCosAgents({ silent: true }).catch(err => { toast.error(err.message); return null; });
     if (!result) return;
     setLoadedAgents([]);
     setLoadedDates(new Set());
diff --git a/client/src/components/cos/tabs/ConfigTab.jsx b/client/src/components/cos/tabs/ConfigTab.jsx
index 4299e471a..e5c278d30 100644
--- a/client/src/components/cos/tabs/ConfigTab.jsx
+++ b/client/src/components/cos/tabs/ConfigTab.jsx
@@ -281,7 +281,7 @@ export default function ConfigTab({ config, onUpdate, onEvaluate, avatarStyle, s
   const handleLevelChange = async (params) => {
     const updatedData = { ...formData, ...params };
     setFormData(updatedData);
-    await api.updateCosConfig(params).catch(err => toast.error(err.message));
+    await api.updateCosConfig(params, { silent: true }).catch(err => toast.error(err.message));
     onUpdate();
   };
 
@@ -322,7 +322,7 @@ export default function ConfigTab({ config, onUpdate, onEvaluate, avatarStyle, s
   };
 
   const handleSave = async () => {
-    await api.updateCosConfig(formData).catch(err => toast.error(err.message));
+    await api.updateCosConfig(formData, { silent: true }).catch(err => toast.error(err.message));
     toast.success('Configuration updated');
     setEditing(false);
     onUpdate();
diff --git a/client/src/components/cos/tabs/GsdConcernsPanel.jsx b/client/src/components/cos/tabs/GsdConcernsPanel.jsx
index 9d0dfc721..bd4a87d23 100644
--- a/client/src/components/cos/tabs/GsdConcernsPanel.jsx
+++ b/client/src/components/cos/tabs/GsdConcernsPanel.jsx
@@ -24,7 +24,7 @@ export default function GsdConcernsPanel({ appId, concerns, onTaskCreated }) {
 
   const handleCreateTask = async (concernId) => {
     setCreating(concernId);
-    const result = await api.createGsdConcernTasks(appId, { concernIds: [concernId] }).catch(err => {
+    const result = await api.createGsdConcernTasks(appId, { concernIds: [concernId] }, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -37,7 +37,7 @@ export default function GsdConcernsPanel({ appId, concerns, onTaskCreated }) {
 
   const handleCreateAll = async () => {
     setCreating('all');
-    const result = await api.createGsdConcernTasks(appId, { all: true }).catch(err => {
+    const result = await api.createGsdConcernTasks(appId, { all: true }, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
diff --git a/client/src/components/cos/tabs/GsdProjectCard.jsx b/client/src/components/cos/tabs/GsdProjectCard.jsx
index 644c040f7..dbc4c500a 100644
--- a/client/src/components/cos/tabs/GsdProjectCard.jsx
+++ b/client/src/components/cos/tabs/GsdProjectCard.jsx
@@ -14,7 +14,7 @@ export default function GsdProjectCard({ project, onRefresh }) {
   const loadDetail = async () => {
     if (detail) return;
     setLoading(true);
-    const data = await api.getGsdProject(project.appId).catch(err => {
+    const data = await api.getGsdProject(project.appId, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
diff --git a/client/src/components/cos/tabs/JobsTab.jsx b/client/src/components/cos/tabs/JobsTab.jsx
index d05d53c83..1d430c6d5 100644
--- a/client/src/components/cos/tabs/JobsTab.jsx
+++ b/client/src/components/cos/tabs/JobsTab.jsx
@@ -307,7 +307,7 @@ function JobCard({ job, apps, providers, onToggle, onTrigger, onDelete, onUpdate
 
   const handleSave = async () => {
     const payload = normalizeJobPayload(editData);
-    const result = await api.updateCosJob(job.id, payload).catch(err => {
+    const result = await api.updateCosJob(job.id, payload, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -620,7 +620,7 @@ export default function JobsTab() {
   const [newJob, setNewJob] = useState(INITIAL_JOB);
 
   const fetchJobs = useCallback(async () => {
-    const data = await api.getCosJobs().catch(err => {
+    const data = await api.getCosJobs({ silent: true }).catch(err => {
       toast.error(`Failed to load jobs: ${err.message}`);
       return null;
     });
@@ -659,7 +659,7 @@ export default function JobsTab() {
       return;
     }
 
-    const created = await api.createCosJob(normalizeJobPayload(newJob)).catch(err => {
+    const created = await api.createCosJob(normalizeJobPayload(newJob), { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -671,7 +671,7 @@ export default function JobsTab() {
   };
 
   const handleToggle = async (jobId) => {
-    const result = await api.toggleCosJob(jobId).catch(err => {
+    const result = await api.toggleCosJob(jobId, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -683,7 +683,7 @@ export default function JobsTab() {
 
   const handleTrigger = async (jobId) => {
     toast.loading('Triggering job...', { id: 'job-trigger' });
-    const result = await api.triggerCosJob(jobId).catch(err => {
+    const result = await api.triggerCosJob(jobId, { silent: true }).catch(err => {
       toast.error(err.message, { id: 'job-trigger' });
       return null;
     });
@@ -699,7 +699,7 @@ export default function JobsTab() {
   };
 
   const handleDelete = async (jobId) => {
-    const result = await api.deleteCosJob(jobId).catch(err => {
+    const result = await api.deleteCosJob(jobId, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
diff --git a/client/src/components/cos/tabs/MemoryEditModal.jsx b/client/src/components/cos/tabs/MemoryEditModal.jsx
index 641d3d2e6..8e3b78b91 100644
--- a/client/src/components/cos/tabs/MemoryEditModal.jsx
+++ b/client/src/components/cos/tabs/MemoryEditModal.jsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { X, Save, Plus, Trash2 } from 'lucide-react';
 import toast from '../../ui/Toast';
 import Modal from '../../ui/Modal';
+import { FormField } from '../../ui/FormField';
 import * as api from '../../../services/api';
 import { MEMORY_TYPES, MEMORY_TYPE_COLORS } from '../constants';
 import { getAppName } from '../../../utils/formatters';
@@ -61,7 +62,7 @@ export default function MemoryEditModal({ memory, apps, onSave, onClose }) {
       sourceAppId: formData.sourceAppId || null,
       importance: formData.importance,
       confidence: formData.confidence
-    }).catch(err => {
+    }, { silent: true }).catch(err => {
       toast.error(err.message || 'Failed to update memory');
       return null;
     });
@@ -140,10 +141,10 @@ export default function MemoryEditModal({ memory, apps, onSave, onClose }) {
           </div>
 
           {/* Content */}
-          <div>
-            <label className="block text-sm text-gray-400 mb-2">
-              Content <span className="text-port-accent">*</span>
-            </label>
+          <FormField
+            label={<>Content <span className="text-port-accent">*</span></>}
+            labelClassName="block text-sm text-gray-400 mb-2"
+          >
             <textarea
               value={formData.content}
               onChange={e => setFormData({ ...formData, content: e.target.value })}
@@ -155,11 +156,10 @@ export default function MemoryEditModal({ memory, apps, onSave, onClose }) {
             <p className="text-xs text-gray-500 mt-1">
               Editing content will regenerate the embedding for semantic search.
             </p>
-          </div>
+          </FormField>
 
           {/* Summary */}
-          <div>
-            <label className="block text-sm text-gray-400 mb-2">Summary (optional)</label>
+          <FormField label="Summary (optional)" labelClassName="block text-sm text-gray-400 mb-2">
             <input
               type="text"
               value={formData.summary}
@@ -167,12 +167,11 @@ export default function MemoryEditModal({ memory, apps, onSave, onClose }) {
               placeholder="Brief summary..."
               className="w-full px-3 py-3 min-h-[44px] bg-port-bg border border-port-border rounded-lg text-white text-sm focus:border-port-accent focus:outline-hidden"
             />
-          </div>
+          </FormField>
 
           {/* Category and App */}
           <div className="flex flex-col sm:flex-row gap-3">
-            <div className="flex-1">
-              <label className="block text-sm text-gray-400 mb-2">Category</label>
+            <FormField label="Category" className="flex-1" labelClassName="block text-sm text-gray-400 mb-2">
               <select
                 value={formData.category}
                 onChange={e => setFormData({ ...formData, category: e.target.value })}
@@ -189,9 +188,8 @@ export default function MemoryEditModal({ memory, apps, onSave, onClose }) {
                 <option value="system">System</option>
                 <option value="project">Project</option>
               </select>
-            </div>
-            <div className="flex-1">
-              <label className="block text-sm text-gray-400 mb-2">Associated App</label>
+            </FormField>
+            <FormField label="Associated App" className="flex-1" labelClassName="block text-sm text-gray-400 mb-2">
               <select
                 value={formData.sourceAppId}
                 onChange={e => setFormData({ ...formData, sourceAppId: e.target.value })}
@@ -202,7 +200,7 @@ export default function MemoryEditModal({ memory, apps, onSave, onClose }) {
                   <option key={app.id} value={app.id}>{app.name}</option>
                 ))}
               </select>
-            </div>
+            </FormField>
           </div>
 
           {/* Tags */}
@@ -247,10 +245,11 @@ export default function MemoryEditModal({ memory, apps, onSave, onClose }) {
 
           {/* Importance and Confidence */}
           <div className="flex flex-col sm:flex-row gap-4">
-            <div className="flex-1">
-              <label className="block text-sm text-gray-400 mb-2">
-                Importance: {(formData.importance * 100).toFixed(0)}%
-              </label>
+            <FormField
+              label={<>Importance: {(formData.importance * 100).toFixed(0)}%</>}
+              className="flex-1"
+              labelClassName="block text-sm text-gray-400 mb-2"
+            >
               <input
                 type="range"
                 min="0"
@@ -260,11 +259,12 @@ export default function MemoryEditModal({ memory, apps, onSave, onClose }) {
                 onChange={e => setFormData({ ...formData, importance: parseFloat(e.target.value) })}
                 className="w-full h-8 accent-port-accent"
               />
-            </div>
-            <div className="flex-1">
-              <label className="block text-sm text-gray-400 mb-2">
-                Confidence: {(formData.confidence * 100).toFixed(0)}%
-              </label>
+            </FormField>
+            <FormField
+              label={<>Confidence: {(formData.confidence * 100).toFixed(0)}%</>}
+              className="flex-1"
+              labelClassName="block text-sm text-gray-400 mb-2"
+            >
               <input
                 type="range"
                 min="0"
@@ -274,7 +274,7 @@ export default function MemoryEditModal({ memory, apps, onSave, onClose }) {
                 onChange={e => setFormData({ ...formData, confidence: parseFloat(e.target.value) })}
                 className="w-full h-8 accent-port-accent"
               />
-            </div>
+            </FormField>
           </div>
 
           {/* Source Info (read-only) */}
diff --git a/client/src/components/cos/tabs/MemoryTab.jsx b/client/src/components/cos/tabs/MemoryTab.jsx
index 0bade1ba9..9081f0522 100644
--- a/client/src/components/cos/tabs/MemoryTab.jsx
+++ b/client/src/components/cos/tabs/MemoryTab.jsx
@@ -88,7 +88,7 @@ export default function MemoryTab({ apps = [] }) {
     if (actionRef.current) return;
     actionRef.current = true;
     setActionInFlight(id);
-    const result = await action(id).catch(err => {
+    const result = await action(id, { silent: true }).catch(err => {
       toast.error(err?.message || `Failed to ${label.toLowerCase()} memory`);
       return null;
     });
diff --git a/client/src/components/cos/tabs/ResumeAgentModal.jsx b/client/src/components/cos/tabs/ResumeAgentModal.jsx
index 146f00939..eef1aa113 100644
--- a/client/src/components/cos/tabs/ResumeAgentModal.jsx
+++ b/client/src/components/cos/tabs/ResumeAgentModal.jsx
@@ -3,6 +3,7 @@ import { X, CheckCircle, AlertCircle, RotateCcw, Image, Loader2 } from 'lucide-r
 import { processScreenshotUploads } from '../../../utils/fileUpload';
 import toast from '../../ui/Toast';
 import Modal from '../../ui/Modal';
+import { FormField } from '../../ui/FormField';
 import { filterSelectableModels } from '../../../utils/providers';
 
 export default function ResumeAgentModal({ agent, taskType = 'user', providers, apps, onSubmit, onClose }) {
@@ -133,10 +134,7 @@ export default function ResumeAgentModal({ agent, taskType = 'user', providers,
 
         <form onSubmit={handleSubmit} className="space-y-4">
           {/* Refined Instructions */}
-          <div>
-            <label className="block text-sm text-gray-400 mb-1">
-              Additional Instructions (optional)
-            </label>
+          <FormField label="Additional Instructions (optional)">
             <textarea
               value={formData.refinedInstructions}
               onChange={e => setFormData({ ...formData, refinedInstructions: e.target.value })}
@@ -145,7 +143,7 @@ export default function ResumeAgentModal({ agent, taskType = 'user', providers,
               className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm focus:border-port-accent focus:outline-hidden resize-none"
               autoFocus
             />
-          </div>
+          </FormField>
 
           {/* Screenshot Upload */}
           <div>
@@ -196,8 +194,7 @@ export default function ResumeAgentModal({ agent, taskType = 'user', providers,
           </div>
 
           {/* App Selection */}
-          <div>
-            <label className="block text-sm text-gray-400 mb-1">Target App</label>
+          <FormField label="Target App">
             <select
               value={formData.app}
               onChange={e => setFormData({ ...formData, app: e.target.value })}
@@ -208,12 +205,11 @@ export default function ResumeAgentModal({ agent, taskType = 'user', providers,
                 <option key={app.id} value={app.id}>{app.name}</option>
               ))}
             </select>
-          </div>
+          </FormField>
 
           {/* Provider and Model */}
           <div className="flex gap-3">
-            <div className="flex-1">
-              <label className="block text-sm text-gray-400 mb-1">Provider</label>
+            <FormField label="Provider" className="flex-1">
               <select
                 value={formData.provider}
                 onChange={e => setFormData({ ...formData, provider: e.target.value, model: '' })}
@@ -224,9 +220,8 @@ export default function ResumeAgentModal({ agent, taskType = 'user', providers,
                   <option key={p.id} value={p.id}>{p.name}</option>
                 ))}
               </select>
-            </div>
-            <div className="flex-1">
-              <label className="block text-sm text-gray-400 mb-1">Model</label>
+            </FormField>
+            <FormField label="Model" className="flex-1">
               <select
                 value={formData.model}
                 onChange={e => setFormData({ ...formData, model: e.target.value })}
@@ -238,7 +233,7 @@ export default function ResumeAgentModal({ agent, taskType = 'user', providers,
                   <option key={m} value={m}>{m.replace('claude-', '').replace(/-\d+$/, '')}</option>
                 ))}
               </select>
-            </div>
+            </FormField>
           </div>
 
           {/* Context Preview (collapsed) */}
diff --git a/client/src/components/cos/tabs/ScheduleTab.jsx b/client/src/components/cos/tabs/ScheduleTab.jsx
index a96842003..98ef52901 100644
--- a/client/src/components/cos/tabs/ScheduleTab.jsx
+++ b/client/src/components/cos/tabs/ScheduleTab.jsx
@@ -51,7 +51,7 @@ export default function ScheduleTab({ apps }) {
   }, [fetchSchedule, fetchProviders]);
 
   const handleUpdateTask = async (taskType, settings) => {
-    const result = await api.updateCosTaskInterval(taskType, settings).catch(err => {
+    const result = await api.updateCosTaskInterval(taskType, settings, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -62,7 +62,7 @@ export default function ScheduleTab({ apps }) {
   };
 
   const handleTriggerTask = async (taskType, appId = null) => {
-    const result = await api.triggerCosOnDemandTask(taskType, appId).catch(err => {
+    const result = await api.triggerCosOnDemandTask(taskType, appId, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -73,7 +73,7 @@ export default function ScheduleTab({ apps }) {
   };
 
   const handleResetTask = async (taskType) => {
-    const result = await api.resetCosTaskHistory(taskType).catch(err => {
+    const result = await api.resetCosTaskHistory(taskType, null, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -86,7 +86,7 @@ export default function ScheduleTab({ apps }) {
   const handleTriggerAppImprovement = (taskType, appId) => handleTriggerTask(taskType, appId);
 
   const handleUpdateAppOverride = async (appId, taskType, { enabled, interval, taskMetadata }) => {
-    const result = await api.updateAppTaskTypeOverride(appId, taskType, { enabled, interval, taskMetadata }).catch(err => {
+    const result = await api.updateAppTaskTypeOverride(appId, taskType, { enabled, interval, taskMetadata }, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -98,7 +98,7 @@ export default function ScheduleTab({ apps }) {
   };
 
   const handleBulkToggleOverride = async (taskType, enabled) => {
-    const result = await api.bulkUpdateAppTaskTypeOverride(taskType, { enabled }).catch(err => {
+    const result = await api.bulkUpdateAppTaskTypeOverride(taskType, { enabled }, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
diff --git a/client/src/components/cos/tabs/TaskItem.jsx b/client/src/components/cos/tabs/TaskItem.jsx
index 2bce81e2a..c8cf5ce37 100644
--- a/client/src/components/cos/tabs/TaskItem.jsx
+++ b/client/src/components/cos/tabs/TaskItem.jsx
@@ -160,7 +160,7 @@ export default function TaskItem({ task, isSystem, awaitingApproval, onRefresh,
     if (newStatus === 'blocked' && blockedReasonText) {
       updates.blockedReason = blockedReasonText;
     }
-    const result = await api.updateCosTask(task.id, updates).catch(err => { toast.error(err.message); return null; });
+    const result = await api.updateCosTask(task.id, updates, { silent: true }).catch(err => { toast.error(err.message); return null; });
     if (!result) return;
     toast.success(`Task marked as ${newStatus}`);
     onRefresh();
@@ -178,7 +178,7 @@ export default function TaskItem({ task, isSystem, awaitingApproval, onRefresh,
   };
 
   const handleSave = async () => {
-    const result = await api.updateCosTask(task.id, editData).catch(err => {
+    const result = await api.updateCosTask(task.id, editData, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -190,14 +190,14 @@ export default function TaskItem({ task, isSystem, awaitingApproval, onRefresh,
 
   const handleDelete = async () => {
     const taskType = isSystem ? 'internal' : 'user';
-    const result = await api.deleteCosTask(task.id, taskType).catch(err => { toast.error(err.message); return null; });
+    const result = await api.deleteCosTask(task.id, taskType, { silent: true }).catch(err => { toast.error(err.message); return null; });
     if (!result) return;
     toast.success('Task deleted');
     onRefresh();
   };
 
   const handleApprove = async () => {
-    const result = await api.approveCosTask(task.id).catch(err => {
+    const result = await api.approveCosTask(task.id, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -407,7 +407,7 @@ export default function TaskItem({ task, isSystem, awaitingApproval, onRefresh,
                 {task.status === 'pending' && !task.approvalRequired && (
                   <button
                     onClick={async () => {
-                      const result = await api.forceSpawnTask(task.id).catch(err => { toast.error(err.message); return null; });
+                      const result = await api.forceSpawnTask(task.id, { silent: true }).catch(err => { toast.error(err.message); return null; });
                       if (result?.success) toast.success(`Spawning ${task.id}`);
                       if (onRefresh) onRefresh();
                     }}
diff --git a/client/src/components/cos/tabs/TasksTab.jsx b/client/src/components/cos/tabs/TasksTab.jsx
index b5ebfcbc6..4c4485a0c 100644
--- a/client/src/components/cos/tabs/TasksTab.jsx
+++ b/client/src/components/cos/tabs/TasksTab.jsx
@@ -124,7 +124,7 @@ export default function TasksTab({ tasks, onRefresh, providers, apps }) {
 
     // Persist to server
     const taskIds = newOrder.map(t => t.id);
-    const result = await api.reorderCosTasks(taskIds).catch(err => {
+    const result = await api.reorderCosTasks(taskIds, { silent: true }).catch(err => {
       toast.error(err.message);
       setUserTasksLocal(userTasks); // Revert on error
       return null;
@@ -143,7 +143,7 @@ export default function TasksTab({ tasks, onRefresh, providers, apps }) {
           <h3 className="text-lg font-semibold text-white">User Tasks (TASKS.md)</h3>
           <button
             onClick={async () => {
-              await api.forceCosEvaluate().catch(err => toast.error(err.message));
+              await api.forceCosEvaluate({ silent: true }).catch(err => toast.error(err.message));
               toast.success('Evaluation triggered');
             }}
             className="flex items-center gap-1 text-sm bg-emerald-500/20 hover:bg-emerald-500/30 text-emerald-400 px-3 py-1.5 rounded-lg transition-colors"
diff --git a/client/src/components/cos/tabs/schedule/GlobalConfigControls.jsx b/client/src/components/cos/tabs/schedule/GlobalConfigControls.jsx
index 0a2bd3450..93b4d362f 100644
--- a/client/src/components/cos/tabs/schedule/GlobalConfigControls.jsx
+++ b/client/src/components/cos/tabs/schedule/GlobalConfigControls.jsx
@@ -4,6 +4,7 @@ import CronInput from '../../../CronInput';
 import { AGENT_OPTIONS, DEFAULT_REVIEW_STOP_MODE, PR_AUTHOR_FILTER_OPTIONS, ISSUE_AUTHOR_FILTER_OPTIONS, ISSUE_AUTHOR_FILTER_TASK_TYPES, SWARM_COUNT_OPTIONS, SWARM_TASK_TYPES } from '../../constants';
 import ReviewerPicker from '../../ReviewerPicker';
 import Banner from '../../../ui/Banner';
+import { FormField } from '../../../ui/FormField';
 import { formatDateTime } from '../../../../utils/formatters';
 import { useCodeReviewDefaults } from '../../../../hooks/useCodeReviewDefaults';
 import ToggleSwitch from '../../../ToggleSwitch';
@@ -177,8 +178,7 @@ export default function GlobalConfigControls({ taskType, config, onUpdate, onTri
         </Banner>
       )}
 
-      <div>
-        <label className="text-sm text-gray-400 block mb-2">Interval Type</label>
+      <FormField label="Interval Type" labelClassName="text-sm text-gray-400 block mb-2">
         <select
           value={selectedType}
           onChange={(e) => handleTypeChange(e.target.value)}
@@ -203,7 +203,7 @@ export default function GlobalConfigControls({ taskType, config, onUpdate, onTri
         ) : (
           <p className="text-xs text-gray-500 mt-1">{INTERVAL_DESCRIPTIONS[selectedType]}</p>
         )}
-      </div>
+      </FormField>
 
       {selectedType === 'perpetual' && (
         <div>
@@ -265,8 +265,7 @@ export default function GlobalConfigControls({ taskType, config, onUpdate, onTri
 
       {!config.taskMetadata?.pipeline?.stages?.length && (
         <>
-          <div>
-            <label className="text-sm text-gray-400 block mb-2">Provider (optional)</label>
+          <FormField label="Provider (optional)" labelClassName="text-sm text-gray-400 block mb-2">
             <select
               value={selectedProviderId}
               onChange={(e) => handleProviderChange(e.target.value)}
@@ -279,10 +278,9 @@ export default function GlobalConfigControls({ taskType, config, onUpdate, onTri
               ))}
             </select>
             <p className="text-xs text-gray-500 mt-1">Leave as default to use the currently active provider</p>
-          </div>
+          </FormField>
 
-          <div>
-            <label className="text-sm text-gray-400 block mb-2">Model (optional)</label>
+          <FormField label="Model (optional)" labelClassName="text-sm text-gray-400 block mb-2">
             <select
               value={selectedModel}
               onChange={(e) => handleModelChange(e.target.value)}
@@ -298,7 +296,7 @@ export default function GlobalConfigControls({ taskType, config, onUpdate, onTri
               ))}
             </select>
             <p className="text-xs text-gray-500 mt-1">Leave as default to use the provider's default model</p>
-          </div>
+          </FormField>
         </>
       )}
 
diff --git a/client/src/components/cos/tabs/schedule/PipelineStageConfig.jsx b/client/src/components/cos/tabs/schedule/PipelineStageConfig.jsx
index c3ed10e2f..c5ce68da8 100644
--- a/client/src/components/cos/tabs/schedule/PipelineStageConfig.jsx
+++ b/client/src/components/cos/tabs/schedule/PipelineStageConfig.jsx
@@ -1,4 +1,5 @@
 import { filterSelectableModels } from '../../../../utils/providers';
+import { FormField } from '../../../ui/FormField';
 
 export default function PipelineStageConfig({ taskType, config, providers, onUpdate, updating, setUpdating }) {
   const stages = config.taskMetadata?.pipeline?.stages || [];
@@ -47,8 +48,7 @@ export default function PipelineStageConfig({ taskType, config, providers, onUpd
                 )}
               </div>
               <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <label className="text-xs text-gray-500 block mb-1">Provider</label>
+                <FormField label="Provider" labelClassName="text-xs text-gray-500 block mb-1">
                   <select
                     value={stage.providerId || ''}
                     onChange={(e) => handleStageUpdate(i, 'providerId', e.target.value || null)}
@@ -60,9 +60,8 @@ export default function PipelineStageConfig({ taskType, config, providers, onUpd
                       <option key={provider.id} value={provider.id}>{provider.name}</option>
                     ))}
                   </select>
-                </div>
-                <div>
-                  <label className="text-xs text-gray-500 block mb-1">Model</label>
+                </FormField>
+                <FormField label="Model" labelClassName="text-xs text-gray-500 block mb-1">
                   <select
                     value={stage.model || ''}
                     onChange={(e) => handleStageUpdate(i, 'model', e.target.value || null)}
@@ -77,7 +76,7 @@ export default function PipelineStageConfig({ taskType, config, providers, onUpd
                       <option key={model} value={model}>{model}</option>
                     ))}
                   </select>
-                </div>
+                </FormField>
               </div>
             </div>
           );
diff --git a/client/src/components/dashboard/builtins/FeedsWidget.jsx b/client/src/components/dashboard/builtins/FeedsWidget.jsx
new file mode 100644
index 000000000..19c1810b7
--- /dev/null
+++ b/client/src/components/dashboard/builtins/FeedsWidget.jsx
@@ -0,0 +1,58 @@
+import { Link } from 'react-router-dom';
+import { Rss, ArrowRight } from 'lucide-react';
+
+// Glanceable RSS/Atom unread digest. Reads the shared `feeds` slice of
+// dashboardState (populated from the existing getFeedStats wrapper — the
+// server owns unread computation, so this never re-derives it) and deep-links
+// into Brain → Feeds. Gated off until the user has subscribed to a feed.
+export default function FeedsWidget({ dashboardState }) {
+  const feeds = dashboardState?.feeds;
+  if (!feeds) return null;
+
+  const unread = feeds.unreadItems ?? 0;
+  const topUnread = Array.isArray(feeds.topUnread) ? feeds.topUnread : [];
+
+  return (
+    <Link
+      to="/brain/feeds"
+      className="bg-port-card border border-port-border rounded-xl p-4 h-full block hover:border-gray-600 transition-colors"
+    >
+      <div className="flex items-center gap-2 mb-3">
+        <Rss size={16} className="text-gray-500" />
+        <h3 className="text-sm font-semibold text-white">Feeds</h3>
+        <span className="ml-auto flex items-center gap-1 text-xs text-port-accent">
+          Open <ArrowRight size={12} />
+        </span>
+      </div>
+
+      <div className="flex items-center gap-3 mb-3">
+        <div className="text-2xl" aria-hidden="true">{unread > 0 ? '📬' : '📭'}</div>
+        <div>
+          <div className="text-xl font-bold text-white">
+            {unread} unread
+          </div>
+          <div className="text-xs text-gray-500">
+            {feeds.totalFeeds ?? 0} feed{(feeds.totalFeeds ?? 0) !== 1 ? 's' : ''} subscribed
+          </div>
+        </div>
+      </div>
+
+      {topUnread.length > 0 ? (
+        <ul className="space-y-1">
+          {topUnread.map((f) => (
+            <li key={f.id} className="flex items-center gap-2 text-xs">
+              <span className="flex-1 truncate text-gray-300" title={f.title}>
+                {f.title || 'Untitled feed'}
+              </span>
+              <span className="shrink-0 px-1.5 py-0.5 rounded-full bg-port-accent/20 text-port-accent font-semibold">
+                {f.unread}
+              </span>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <div className="text-xs text-gray-500">All caught up 🎉</div>
+      )}
+    </Link>
+  );
+}
diff --git a/client/src/components/dashboard/builtins/FeedsWidget.test.jsx b/client/src/components/dashboard/builtins/FeedsWidget.test.jsx
new file mode 100644
index 000000000..beef90ed0
--- /dev/null
+++ b/client/src/components/dashboard/builtins/FeedsWidget.test.jsx
@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import FeedsWidget from './FeedsWidget';
+
+const renderWidget = (feeds) =>
+  render(
+    <MemoryRouter>
+      <FeedsWidget dashboardState={{ feeds }} />
+    </MemoryRouter>
+  );
+
+describe('FeedsWidget', () => {
+  it('renders nothing when stats are absent (fetch failed / no data)', () => {
+    const { container } = renderWidget(null);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('shows the unread count and deep-links to Brain → Feeds', () => {
+    renderWidget({ totalFeeds: 3, totalItems: 20, unreadItems: 7, topUnread: [] });
+    expect(screen.getByText('7 unread')).toBeTruthy();
+    expect(screen.getByText('3 feeds subscribed')).toBeTruthy();
+    expect(screen.getByRole('link').getAttribute('href')).toBe('/brain/feeds');
+  });
+
+  it('lists top unread feed names with per-feed counts', () => {
+    renderWidget({
+      totalFeeds: 2,
+      totalItems: 10,
+      unreadItems: 8,
+      topUnread: [
+        { id: 'a', title: 'Hacker News', unread: 5 },
+        { id: 'b', title: 'Lobsters', unread: 3 },
+      ],
+    });
+    expect(screen.getByText('Hacker News')).toBeTruthy();
+    expect(screen.getByText('Lobsters')).toBeTruthy();
+    expect(screen.getByText('5')).toBeTruthy();
+    expect(screen.getByText('3')).toBeTruthy();
+  });
+
+  it('shows a caught-up state when nothing is unread', () => {
+    renderWidget({ totalFeeds: 2, totalItems: 4, unreadItems: 0, topUnread: [] });
+    expect(screen.getByText('0 unread')).toBeTruthy();
+    expect(screen.getByText('All caught up 🎉')).toBeTruthy();
+  });
+
+  it('singularizes the feed label for a single subscription', () => {
+    renderWidget({ totalFeeds: 1, totalItems: 2, unreadItems: 2, topUnread: [{ id: 'a', title: 'Solo', unread: 2 }] });
+    expect(screen.getByText('1 feed subscribed')).toBeTruthy();
+  });
+});
diff --git a/client/src/components/dashboard/builtins/MeatSpaceStreakWidget.jsx b/client/src/components/dashboard/builtins/MeatSpaceStreakWidget.jsx
new file mode 100644
index 000000000..69a0ef25c
--- /dev/null
+++ b/client/src/components/dashboard/builtins/MeatSpaceStreakWidget.jsx
@@ -0,0 +1,81 @@
+import { Link } from 'react-router-dom';
+import { HeartPulse, ArrowRight } from 'lucide-react';
+
+// Health-logging habit loop. Reads the `meatspaceLogging` slice of
+// dashboardState (cross-domain streak + this-week counts computed server-side)
+// and deep-links into MeatSpace. Mirrors ActivityStreakWidget/DailyPostWidget's
+// streak framing. Gated off until at least one health log exists.
+export default function MeatSpaceStreakWidget({ dashboardState }) {
+  const stats = dashboardState?.meatspaceLogging;
+  if (!stats) return null;
+
+  const streak = stats.currentStreak ?? 0;
+  const longest = stats.longestStreak ?? 0;
+  const streakGlyph = streak >= 7 ? '🔥' : streak >= 3 ? '⚡' : '✨';
+  const activeDomains = (stats.domains || []).filter((d) => d.thisWeek > 0);
+
+  return (
+    <Link
+      to="/meatspace/overview"
+      className="bg-port-card border border-port-border rounded-xl p-4 h-full block hover:border-gray-600 transition-colors"
+    >
+      <div className="flex items-center gap-2 mb-3">
+        <HeartPulse size={16} className="text-gray-500" />
+        <h3 className="text-sm font-semibold text-white">Health Logging</h3>
+        <span className="ml-auto flex items-center gap-1 text-xs text-port-accent">
+          Open <ArrowRight size={12} />
+        </span>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <div className="text-2xl" aria-hidden="true">{streakGlyph}</div>
+        <div>
+          <div className="text-xl font-bold text-white">
+            {streak} day{streak !== 1 ? 's' : ''}
+          </div>
+          <div className="text-xs text-gray-500">
+            {streak > 0 ? 'Logging streak' : 'No streak — log something today'}
+          </div>
+        </div>
+        {longest > streak && (
+          <div className="ml-auto text-right">
+            <div className="text-sm font-semibold text-port-accent">{longest} days</div>
+            <div className="text-xs text-gray-500">Best</div>
+          </div>
+        )}
+        {streak > 0 && streak === longest && (
+          <div className="ml-auto px-2 py-1 bg-port-success/20 text-port-success text-xs rounded-full">
+            Personal best!
+          </div>
+        )}
+      </div>
+
+      {/* 7-day sparkline: intensity by number of domains logged that day. */}
+      <div className="flex gap-1 mt-3">
+        {(stats.last7Days || []).map((day) => (
+          <div
+            key={day.date}
+            className={`flex-1 h-2 rounded-full ${day.logged ? 'bg-port-success' : 'bg-port-border'}`}
+            title={`${day.label}: ${day.domains} domain${day.domains !== 1 ? 's' : ''} logged`}
+          />
+        ))}
+      </div>
+
+      <div className="mt-3 text-xs text-gray-400">
+        {activeDomains.length > 0 ? (
+          <span>
+            This week:{' '}
+            {activeDomains.map((d, i) => (
+              <span key={d.key}>
+                {i > 0 && ', '}
+                <span className="text-gray-300">{d.label}</span> {d.thisWeek}
+              </span>
+            ))}
+          </span>
+        ) : (
+          <span>No logs this week yet</span>
+        )}
+      </div>
+    </Link>
+  );
+}
diff --git a/client/src/components/dashboard/builtins/MeatSpaceStreakWidget.test.jsx b/client/src/components/dashboard/builtins/MeatSpaceStreakWidget.test.jsx
new file mode 100644
index 000000000..bf1567fe6
--- /dev/null
+++ b/client/src/components/dashboard/builtins/MeatSpaceStreakWidget.test.jsx
@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import MeatSpaceStreakWidget from './MeatSpaceStreakWidget';
+
+const renderWidget = (meatspaceLogging) =>
+  render(
+    <MemoryRouter>
+      <MeatSpaceStreakWidget dashboardState={{ meatspaceLogging }} />
+    </MemoryRouter>
+  );
+
+const baseStats = {
+  currentStreak: 4,
+  longestStreak: 9,
+  weekTotal: 5,
+  totalLogged: 30,
+  domains: [
+    { key: 'alcohol', label: 'Alcohol', total: 10, thisWeek: 2 },
+    { key: 'nicotine', label: 'Nicotine', total: 5, thisWeek: 0 },
+    { key: 'workouts', label: 'Workouts', total: 15, thisWeek: 3 },
+  ],
+  last7Days: Array.from({ length: 7 }, (_, i) => ({
+    date: `2026-06-2${i}`,
+    label: 'Mon',
+    domains: i % 2,
+    logged: i % 2 === 1,
+  })),
+};
+
+describe('MeatSpaceStreakWidget', () => {
+  it('renders nothing when stats are absent', () => {
+    const { container } = renderWidget(null);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('shows the current streak and deep-links to MeatSpace', () => {
+    renderWidget(baseStats);
+    expect(screen.getByText('4 days')).toBeTruthy();
+    expect(screen.getByText('Logging streak')).toBeTruthy();
+    expect(screen.getByRole('link').getAttribute('href')).toBe('/meatspace/overview');
+  });
+
+  it('lists only domains with logs this week', () => {
+    renderWidget(baseStats);
+    expect(screen.getByText('Alcohol')).toBeTruthy();
+    expect(screen.getByText('Workouts')).toBeTruthy();
+    // Nicotine has 0 this week and should be omitted.
+    expect(screen.queryByText('Nicotine')).toBeNull();
+  });
+
+  it('shows the best streak when the current run is not the record', () => {
+    renderWidget(baseStats);
+    expect(screen.getByText('9 days')).toBeTruthy();
+    expect(screen.getByText('Best')).toBeTruthy();
+  });
+
+  it('prompts to start when there is no active streak', () => {
+    renderWidget({ ...baseStats, currentStreak: 0, domains: [], last7Days: [] });
+    expect(screen.getByText('No streak — log something today')).toBeTruthy();
+    expect(screen.getByText('No logs this week yet')).toBeTruthy();
+  });
+});
diff --git a/client/src/components/dashboard/widgetRegistry.jsx b/client/src/components/dashboard/widgetRegistry.jsx
index f6945dcc7..0a3a4a2eb 100644
--- a/client/src/components/dashboard/widgetRegistry.jsx
+++ b/client/src/components/dashboard/widgetRegistry.jsx
@@ -12,6 +12,7 @@ const UpcomingTasksWidget   = lazyWithReload(() => import('../UpcomingTasksWidge
 const DecisionLogWidget     = lazyWithReload(() => import('../DecisionLogWidget'));
 const DeathClockWidget      = lazyWithReload(() => import('../DeathClockWidget'));
 const DailyPostWidget       = lazyWithReload(() => import('../DailyPostWidget'));
+const TribeCareWidget       = lazyWithReload(() => import('../TribeCareWidget'));
 const ProactiveAlertsWidget = lazyWithReload(() => import('../ProactiveAlertsWidget'));
 const QuickBrainCapture     = lazyWithReload(() => import('../QuickBrainCapture'));
 const QuickIdeaCapture      = lazyWithReload(() => import('../QuickIdeaCapture'));
@@ -23,6 +24,8 @@ const AppsGridWidget        = lazyWithReload(() => import('./builtins/AppsGridWi
 const QuickStatsWidget      = lazyWithReload(() => import('./builtins/QuickStatsWidget'));
 const ActivityStreakWidget  = lazyWithReload(() => import('./builtins/ActivityStreakWidget'));
 const HourlyActivityWidget  = lazyWithReload(() => import('./builtins/HourlyActivityWidget'));
+const FeedsWidget           = lazyWithReload(() => import('./builtins/FeedsWidget'));
+const MeatSpaceStreakWidget = lazyWithReload(() => import('./builtins/MeatSpaceStreakWidget'));
 
 // Each entry: { id, label, Component, width, defaultH?, gate?, module? }.
 // `gate(state) => bool` skips the widget when it has nothing useful to show.
@@ -56,10 +59,13 @@ export const WIDGETS = [
   { id: 'backup',            label: 'Backup',                Component: BackupWidget,           width: 'quarter', defaultH: 5 },
   { id: 'death-clock',       label: 'Death Clock',           Component: DeathClockWidget,       width: 'quarter', defaultH: 4 },
   { id: 'daily-post',        label: 'Daily POST',            Component: DailyPostWidget,        width: 'quarter', defaultH: 3 },
+  { id: 'tribe-care',        label: 'Tribe Care',            Component: TribeCareWidget,        width: 'quarter', defaultH: 4, gate: (s) => !!s.tribeCare?.hasPeople },
   { id: 'quick-stats',       label: 'Quick Stats',           Component: QuickStatsWidget,       width: 'quarter', defaultH: 3, gate: (s) => s.apps.length > 0 },
   { id: 'decision-log',      label: 'Decision Log',          Component: DecisionLogWidget,      width: 'quarter', defaultH: 4 },
   { id: 'activity-streak',   label: 'Activity Streak',       Component: ActivityStreakWidget,   width: 'third',   defaultH: 3, gate: (s) => s.usage?.currentStreak > 0 || s.usage?.longestStreak > 0, module: { id: '06', status: 'STREAK',  glyph: 'spark' } },
   { id: 'hourly-activity',   label: 'Activity by Hour',      Component: HourlyActivityWidget,   width: 'full',    defaultH: 4, gate: (s) => !!s.usage?.hourlyActivity && s.usage.hourlyActivity.some((v) => v > 0) },
+  { id: 'feeds',             label: 'Feeds Digest',          Component: FeedsWidget,            width: 'quarter', defaultH: 4, gate: (s) => (s.feeds?.totalFeeds ?? 0) > 0 },
+  { id: 'meatspace-streak',  label: 'Health Logging Streak', Component: MeatSpaceStreakWidget,  width: 'third',   defaultH: 4, gate: (s) => (s.meatspaceLogging?.totalLogged ?? 0) > 0 },
 ];
 
 export const WIDGETS_BY_ID = Object.fromEntries(WIDGETS.map((w) => [w.id, w]));
diff --git a/client/src/components/digital-twin/ListEnrichment.jsx b/client/src/components/digital-twin/ListEnrichment.jsx
index 77268cf45..c88aead99 100644
--- a/client/src/components/digital-twin/ListEnrichment.jsx
+++ b/client/src/components/digital-twin/ListEnrichment.jsx
@@ -12,6 +12,7 @@ import {ArrowLeft,
 import * as api from '../../services/api';
 import toast from '../ui/Toast';
 import BrailleSpinner from '../BrailleSpinner';
+import { FormField } from '../ui/FormField';
 
 import { ENRICHMENT_CATEGORIES } from './constants';
 
@@ -199,10 +200,10 @@ export default function ListEnrichment({
               )}
 
               <div className="space-y-3">
-                <div>
-                  <label className="text-xs text-gray-500 uppercase tracking-wider mb-1 block">
-                    {config?.itemLabel} {index + 1}
-                  </label>
+                <FormField
+                  label={<>{config?.itemLabel} {index + 1}</>}
+                  labelClassName="text-xs text-gray-500 uppercase tracking-wider mb-1 block"
+                >
                   <input
                     type="text"
                     value={item.title}
@@ -210,12 +211,12 @@ export default function ListEnrichment({
                     placeholder={config?.itemPlaceholder}
                     className="w-full px-3 py-2.5 bg-port-card border border-port-border rounded-lg text-white focus:outline-hidden focus:border-port-accent"
                   />
-                </div>
+                </FormField>
 
-                <div>
-                  <label className="text-xs text-gray-500 uppercase tracking-wider mb-1 block">
-                    Notes (optional)
-                  </label>
+                <FormField
+                  label="Notes (optional)"
+                  labelClassName="text-xs text-gray-500 uppercase tracking-wider mb-1 block"
+                >
                   <textarea
                     value={item.note}
                     onChange={(e) => updateItem(index, 'note', e.target.value)}
@@ -223,7 +224,7 @@ export default function ListEnrichment({
                     rows={2}
                     className="w-full px-3 py-2.5 bg-port-card border border-port-border rounded-lg text-white resize-none focus:outline-hidden focus:border-port-accent"
                   />
-                </div>
+                </FormField>
               </div>
             </div>
           ))}
@@ -241,10 +242,11 @@ export default function ListEnrichment({
       {/* Provider Selection & Analyze Button */}
       <div className="bg-port-card rounded-lg border border-port-border p-4 sm:p-6 mb-6">
         <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-4">
-          <div className="flex-1">
-            <label className="text-xs text-gray-500 uppercase tracking-wider mb-2 block">
-              Analyze with
-            </label>
+          <FormField
+            label="Analyze with"
+            className="flex-1"
+            labelClassName="text-xs text-gray-500 uppercase tracking-wider mb-2 block"
+          >
             <select
               value={selectedProvider ? `${selectedProvider.providerId}:${selectedProvider.model}` : ''}
               onChange={(e) => {
@@ -261,7 +263,7 @@ export default function ListEnrichment({
                 ))
               ))}
             </select>
-          </div>
+          </FormField>
 
           <button
             onClick={analyzeList}
diff --git a/client/src/components/digital-twin/SoulWizard.jsx b/client/src/components/digital-twin/SoulWizard.jsx
index eae2e4691..48d9ce49e 100644
--- a/client/src/components/digital-twin/SoulWizard.jsx
+++ b/client/src/components/digital-twin/SoulWizard.jsx
@@ -13,6 +13,7 @@ import {
 } from 'lucide-react';
 import * as api from '../../services/api';
 import toast from '../ui/Toast';
+import { FormField } from '../ui/FormField';
 
 const WIZARD_STEPS = [
   {
@@ -202,8 +203,7 @@ ${boundaries.irritant ? `- **Pet Peeve**: ${boundaries.irritant}` : ''}
       {/* Fields */}
       <div className="space-y-4 mb-6">
         {step.fields.map(field => (
-          <div key={field.id}>
-            <label className="block text-sm text-gray-400 mb-1">{field.label}</label>
+          <FormField key={field.id} label={field.label}>
             <input
               type={field.type}
               value={formData[step.id]?.[field.id] || ''}
@@ -211,7 +211,7 @@ ${boundaries.irritant ? `- **Pet Peeve**: ${boundaries.irritant}` : ''}
               placeholder={field.placeholder}
               className="w-full px-4 py-3 min-h-[44px] bg-port-bg border border-port-border rounded-lg text-white placeholder-gray-500 focus:outline-hidden focus:border-port-accent"
             />
-          </div>
+          </FormField>
         ))}
       </div>
 
diff --git a/client/src/components/digital-twin/tabs/AccountsTab.jsx b/client/src/components/digital-twin/tabs/AccountsTab.jsx
index 4ed0d1311..136eabbaf 100644
--- a/client/src/components/digital-twin/tabs/AccountsTab.jsx
+++ b/client/src/components/digital-twin/tabs/AccountsTab.jsx
@@ -24,6 +24,7 @@ import {
 } from 'lucide-react';
 import BrailleSpinner from '../../BrailleSpinner';
 import InlineConfirmRow from '../../ui/InlineConfirmRow';
+import { FormField } from '../../ui/FormField';
 import * as api from '../../../services/api';
 import toast from '../../ui/Toast';
 import { useConfirmDelete } from '../../../hooks/useConfirmDelete';
@@ -306,10 +307,7 @@ export default function AccountsTab() {
 
           {/* Username and Display Name */}
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-            <div>
-              <label className="block text-xs text-gray-500 mb-1">
-                Username / Handle *
-              </label>
+            <FormField label="Username / Handle *" labelClassName="block text-xs text-gray-500 mb-1">
               <input
                 type="text"
                 value={form.username}
@@ -317,9 +315,8 @@ export default function AccountsTab() {
                 placeholder={selectedPlatformDef ? `Your ${selectedPlatformDef.label} username` : 'username'}
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm focus:outline-hidden focus:border-port-accent min-h-[40px]"
               />
-            </div>
-            <div>
-              <label className="block text-xs text-gray-500 mb-1">Display Name</label>
+            </FormField>
+            <FormField label="Display Name" labelClassName="block text-xs text-gray-500 mb-1">
               <input
                 type="text"
                 value={form.displayName}
@@ -327,12 +324,11 @@ export default function AccountsTab() {
                 placeholder="Optional display name"
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm focus:outline-hidden focus:border-port-accent min-h-[40px]"
               />
-            </div>
+            </FormField>
           </div>
 
           {/* URL */}
-          <div>
-            <label className="block text-xs text-gray-500 mb-1">Profile URL</label>
+          <FormField label="Profile URL" labelClassName="block text-xs text-gray-500 mb-1">
             <input
               type="url"
               value={form.url}
@@ -340,11 +336,10 @@ export default function AccountsTab() {
               placeholder={selectedPlatformDef?.urlTemplate?.replace('{username}', form.username || 'username') || 'https://...'}
               className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm focus:outline-hidden focus:border-port-accent min-h-[40px]"
             />
-          </div>
+          </FormField>
 
           {/* Bio */}
-          <div>
-            <label className="block text-xs text-gray-500 mb-1">Bio / Description</label>
+          <FormField label="Bio / Description" labelClassName="block text-xs text-gray-500 mb-1">
             <textarea
               value={form.bio}
               onChange={e => setForm(prev => ({ ...prev, bio: e.target.value }))}
@@ -352,11 +347,10 @@ export default function AccountsTab() {
               rows={2}
               className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm focus:outline-hidden focus:border-port-accent resize-y"
             />
-          </div>
+          </FormField>
 
           {/* Notes */}
-          <div>
-            <label className="block text-xs text-gray-500 mb-1">Notes</label>
+          <FormField label="Notes" labelClassName="block text-xs text-gray-500 mb-1">
             <textarea
               value={form.notes}
               onChange={e => setForm(prev => ({ ...prev, notes: e.target.value }))}
@@ -364,7 +358,7 @@ export default function AccountsTab() {
               rows={2}
               className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm focus:outline-hidden focus:border-port-accent resize-y"
             />
-          </div>
+          </FormField>
 
           {/* Ingestion toggle */}
           <div className="flex items-center gap-3">
diff --git a/client/src/components/digital-twin/tabs/DocumentsTab.jsx b/client/src/components/digital-twin/tabs/DocumentsTab.jsx
index 7bf6bc8ac..053c9f27b 100644
--- a/client/src/components/digital-twin/tabs/DocumentsTab.jsx
+++ b/client/src/components/digital-twin/tabs/DocumentsTab.jsx
@@ -14,6 +14,7 @@ import {
 import * as api from '../../../services/api';
 import toast from '../../ui/Toast';
 import Modal from '../../ui/Modal';
+import { FormField } from '../../ui/FormField';
 
 import { DOCUMENT_CATEGORIES } from '../constants';
 import { timeAgo } from '../../../utils/formatters';
@@ -324,8 +325,7 @@ export default function DocumentsTab({ onRefresh }) {
         <h2 className="text-lg font-semibold text-white mb-4">Create Soul Document</h2>
 
         <div className="space-y-4">
-          <div>
-            <label className="block text-sm text-gray-400 mb-1">Filename</label>
+          <FormField label="Filename">
             <input
               type="text"
               value={newDoc.filename}
@@ -333,10 +333,9 @@ export default function DocumentsTab({ onRefresh }) {
               placeholder="DOCUMENT_NAME.md"
               className="w-full px-3 py-3 min-h-[44px] bg-port-bg border border-port-border rounded-lg text-white"
             />
-          </div>
+          </FormField>
 
-          <div>
-            <label className="block text-sm text-gray-400 mb-1">Title</label>
+          <FormField label="Title">
             <input
               type="text"
               value={newDoc.title}
@@ -344,10 +343,9 @@ export default function DocumentsTab({ onRefresh }) {
               placeholder="Document title"
               className="w-full px-3 py-3 min-h-[44px] bg-port-bg border border-port-border rounded-lg text-white"
             />
-          </div>
+          </FormField>
 
-          <div>
-            <label className="block text-sm text-gray-400 mb-1">Category</label>
+          <FormField label="Category">
             <select
               value={newDoc.category}
               onChange={(e) => setNewDoc({ ...newDoc, category: e.target.value })}
@@ -357,10 +355,9 @@ export default function DocumentsTab({ onRefresh }) {
                 <option key={key} value={key}>{config.label}</option>
               ))}
             </select>
-          </div>
+          </FormField>
 
-          <div>
-            <label className="block text-sm text-gray-400 mb-1">Content</label>
+          <FormField label="Content">
             <textarea
               value={newDoc.content}
               onChange={(e) => setNewDoc({ ...newDoc, content: e.target.value })}
@@ -368,7 +365,7 @@ export default function DocumentsTab({ onRefresh }) {
               rows={8}
               className="w-full px-3 py-3 bg-port-bg border border-port-border rounded-lg text-white font-mono text-sm"
             />
-          </div>
+          </FormField>
         </div>
 
         <div className="flex flex-col-reverse sm:flex-row justify-end gap-3 mt-6">
diff --git a/client/src/components/digital-twin/tabs/EnrichTab.jsx b/client/src/components/digital-twin/tabs/EnrichTab.jsx
index f714a5b80..4c123bc86 100644
--- a/client/src/components/digital-twin/tabs/EnrichTab.jsx
+++ b/client/src/components/digital-twin/tabs/EnrichTab.jsx
@@ -13,6 +13,7 @@ import {Sparkles,
 import BrailleSpinner from '../../BrailleSpinner';
 import * as api from '../../../services/api';
 import toast from '../../ui/Toast';
+import { FormField } from '../../ui/FormField';
 
 import { ENRICHMENT_CATEGORIES } from '../constants';
 import ListEnrichment from '../ListEnrichment';
@@ -542,8 +543,7 @@ export default function EnrichTab({ onRefresh }) {
             </p>
 
             {/* Provider Selection */}
-            <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
-              <label className="text-sm text-gray-400">Analyze with:</label>
+            <FormField className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4" labelClassName="text-sm text-gray-400" label="Analyze with:">
               <select
                 value={selectedProvider ? `${selectedProvider.providerId}:${selectedProvider.model}` : ''}
                 onChange={(e) => {
@@ -560,7 +560,7 @@ export default function EnrichTab({ onRefresh }) {
                   ))
                 ))}
               </select>
-            </div>
+            </FormField>
 
             {/* Writing Samples */}
             <div className="space-y-3">
diff --git a/client/src/components/digital-twin/tabs/GoalsTab.jsx b/client/src/components/digital-twin/tabs/GoalsTab.jsx
index 111aa8cd3..7f18bba57 100644
--- a/client/src/components/digital-twin/tabs/GoalsTab.jsx
+++ b/client/src/components/digital-twin/tabs/GoalsTab.jsx
@@ -4,6 +4,7 @@ import {Target, Plus, Trash2, Check, ChevronDown, ChevronUp,
   Clock, AlertTriangle, Activity, Milestone} from 'lucide-react';
 import BrailleSpinner from '../../BrailleSpinner';
 import InlineConfirmRow from '../../ui/InlineConfirmRow';
+import { FormField } from '../../ui/FormField';
 import * as api from '../../../services/api';
 import { useConfirmDelete } from '../../../hooks/useConfirmDelete';
 
@@ -283,8 +284,7 @@ export default function GoalsTab({ onRefresh }) {
               className="w-full bg-port-card border border-port-border rounded px-3 py-2 text-sm text-white placeholder-gray-500 resize-none"
             />
             <div className="flex gap-3">
-              <div className="flex-1">
-                <label className="block text-xs text-gray-500 mb-1">Horizon</label>
+              <FormField className="flex-1" label="Horizon" labelClassName="block text-xs text-gray-500 mb-1">
                 <select
                   value={newGoal.horizon}
                   onChange={e => setNewGoal({ ...newGoal, horizon: e.target.value })}
@@ -294,9 +294,8 @@ export default function GoalsTab({ onRefresh }) {
                     <option key={h.value} value={h.value}>{h.label}</option>
                   ))}
                 </select>
-              </div>
-              <div className="flex-1">
-                <label className="block text-xs text-gray-500 mb-1">Category</label>
+              </FormField>
+              <FormField className="flex-1" label="Category" labelClassName="block text-xs text-gray-500 mb-1">
                 <select
                   value={newGoal.category}
                   onChange={e => setNewGoal({ ...newGoal, category: e.target.value })}
@@ -306,7 +305,7 @@ export default function GoalsTab({ onRefresh }) {
                     <option key={key} value={key}>{cfg.label}</option>
                   ))}
                 </select>
-              </div>
+              </FormField>
             </div>
             <div className="flex gap-2">
               <button
diff --git a/client/src/components/digital-twin/tabs/ImportTab.jsx b/client/src/components/digital-twin/tabs/ImportTab.jsx
index ba5f47334..a93667bde 100644
--- a/client/src/components/digital-twin/tabs/ImportTab.jsx
+++ b/client/src/components/digital-twin/tabs/ImportTab.jsx
@@ -14,6 +14,7 @@ import {
 } from 'lucide-react';
 import * as api from '../../../services/api';
 import toast from '../../ui/Toast';
+import { FormField } from '../../ui/FormField';
 import { formatBytes } from '../../../utils/formatters';
 
 const SOURCE_ICONS = {
@@ -235,10 +236,7 @@ export default function ImportTab() {
           </div>
 
           {/* Provider Selection */}
-          <div className="mb-6">
-            <label className="block text-sm font-medium text-gray-400 mb-2">
-              Analysis Provider
-            </label>
+          <FormField className="mb-6" label="Analysis Provider" labelClassName="block text-sm font-medium text-gray-400 mb-2">
             <select
               value={selectedProvider ? `${selectedProvider.providerId}:${selectedProvider.model}` : ''}
               onChange={(e) => {
@@ -255,7 +253,7 @@ export default function ImportTab() {
                 ))
               ))}
             </select>
-          </div>
+          </FormField>
 
           {/* Analyze Button */}
           <button
diff --git a/client/src/components/digital-twin/tabs/OverviewTab.jsx b/client/src/components/digital-twin/tabs/OverviewTab.jsx
index 5972c3e04..e306a31b9 100644
--- a/client/src/components/digital-twin/tabs/OverviewTab.jsx
+++ b/client/src/components/digital-twin/tabs/OverviewTab.jsx
@@ -16,6 +16,7 @@ import {
 } from 'lucide-react';
 import * as api from '../../../services/api';
 import toast from '../../ui/Toast';
+import { FormField } from '../../ui/FormField';
 
 import {
   DOCUMENT_CATEGORIES,
@@ -267,15 +268,14 @@ export default function OverviewTab({ status, settings, onRefresh }) {
                 />
                 <span className="text-white">Auto-inject soul context into CoS agents</span>
               </label>
-              <div>
-                <label className="block text-sm text-gray-400 mb-2">Max context tokens</label>
+              <FormField labelClassName="block text-sm text-gray-400 mb-2" label="Max context tokens">
                 <input
                   type="number"
                   value={settingsForm.maxContextTokens || 4000}
                   onChange={(e) => setSettingsForm({ ...settingsForm, maxContextTokens: parseInt(e.target.value, 10) })}
                   className="w-32 px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white"
                 />
-              </div>
+              </FormField>
               <button
                 onClick={handleSaveSettings}
                 disabled={saving}
diff --git a/client/src/components/feature-agents/ConfigTab.jsx b/client/src/components/feature-agents/ConfigTab.jsx
index acfe4cc77..0ca4ae114 100644
--- a/client/src/components/feature-agents/ConfigTab.jsx
+++ b/client/src/components/feature-agents/ConfigTab.jsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { Save } from 'lucide-react';
 import toast from '../ui/Toast';
+import { FormField } from '../ui/FormField';
 import * as api from '../../services/api';
 
 function ArrayInput({ label, value, onChange, placeholder }) {
@@ -16,8 +17,7 @@ function ArrayInput({ label, value, onChange, placeholder }) {
   };
 
   return (
-    <div>
-      <label className="block text-sm text-gray-400 mb-1">{label}</label>
+    <FormField label={label}>
       <textarea
         value={text}
         onChange={e => setText(e.target.value)}
@@ -27,7 +27,7 @@ function ArrayInput({ label, value, onChange, placeholder }) {
         className="w-full bg-port-bg border border-port-border rounded px-3 py-2 text-sm text-white placeholder-gray-600 focus:outline-hidden focus:border-port-accent resize-y"
       />
       <p className="text-xs text-gray-600 mt-0.5">One per line</p>
-    </div>
+    </FormField>
   );
 }
 
@@ -109,71 +109,62 @@ export default function ConfigTab({ agent, isCreate, apps, onSave }) {
       {/* Basic Info */}
       <div className="bg-port-card border border-port-border rounded-xl p-5 space-y-4">
         <h3 className="text-sm font-medium text-gray-400 uppercase tracking-wider">Basic Info</h3>
-        <div>
-          <label className="block text-sm text-gray-400 mb-1">Name</label>
+        <FormField label="Name">
           <input value={form.name} onChange={e => set('name', e.target.value)} className={inputCls} placeholder="Audio Generator Guardian" required />
-        </div>
-        <div>
-          <label className="block text-sm text-gray-400 mb-1">Description</label>
+        </FormField>
+        <FormField label="Description">
           <textarea value={form.description} onChange={e => set('description', e.target.value)} className={`${inputCls} resize-y`} rows={2} placeholder="What this agent owns and iterates on" required />
-        </div>
-        <div>
-          <label className="block text-sm text-gray-400 mb-1">Persona (system prompt)</label>
+        </FormField>
+        <FormField label="Persona (system prompt)">
           <textarea value={form.persona} onChange={e => set('persona', e.target.value)} className={`${inputCls} resize-y`} rows={4} placeholder="You are a meticulous developer who..." />
-        </div>
+        </FormField>
         <div className="grid grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm text-gray-400 mb-1">App</label>
+          <FormField label="App">
             <select value={form.appId} onChange={e => set('appId', e.target.value)} className={selectCls} required>
               <option value="">Select app...</option>
               {(apps || []).map(app => (
                 <option key={app.id} value={app.id}>{app.name}</option>
               ))}
             </select>
-          </div>
-          <div>
-            <label className="block text-sm text-gray-400 mb-1">Priority</label>
+          </FormField>
+          <FormField label="Priority">
             <select value={form.priority} onChange={e => set('priority', e.target.value)} className={selectCls}>
               <option value="LOW">Low</option>
               <option value="MEDIUM">Medium</option>
               <option value="HIGH">High</option>
               <option value="CRITICAL">Critical</option>
             </select>
-          </div>
+          </FormField>
         </div>
-        <div>
-          <label className="block text-sm text-gray-400 mb-1">Autonomy Level</label>
+        <FormField label="Autonomy Level">
           <select value={form.autonomyLevel} onChange={e => set('autonomyLevel', e.target.value)} className={selectCls}>
             <option value="standby">Standby - Only when triggered</option>
             <option value="assistant">Assistant - Follows instructions closely</option>
             <option value="manager">Manager - Makes independent decisions</option>
             <option value="yolo">YOLO - Full autonomy</option>
           </select>
-        </div>
+        </FormField>
       </div>
 
       {/* Schedule */}
       <div className="bg-port-card border border-port-border rounded-xl p-5 space-y-4">
         <h3 className="text-sm font-medium text-gray-400 uppercase tracking-wider">Schedule</h3>
         <div className="grid grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm text-gray-400 mb-1">Mode</label>
+          <FormField label="Mode">
             <select value={form.schedule.mode} onChange={e => set('schedule', { ...form.schedule, mode: e.target.value })} className={selectCls}>
               <option value="continuous">Continuous</option>
               <option value="interval">Interval</option>
             </select>
-          </div>
+          </FormField>
           {form.schedule.mode === 'interval' && (
-            <div>
-              <label className="block text-sm text-gray-400 mb-1">Interval (minutes)</label>
+            <FormField label="Interval (minutes)">
               <input type="number" value={Math.round((form.schedule.intervalMs || 3600000) / 60000)} onChange={e => { const v = parseInt(e.target.value); if (!Number.isNaN(v) && v > 0) set('schedule', { ...form.schedule, intervalMs: v * 60000 }); }} className={inputCls} min={1} />
-            </div>
+            </FormField>
           )}
           {form.schedule.mode === 'continuous' && (
-            <div>
-              <label className="block text-sm text-gray-400 mb-1">Pause Between Runs (seconds)</label>
+            <FormField label="Pause Between Runs (seconds)">
               <input type="number" value={Math.round((form.schedule.pauseBetweenRunsMs || 60000) / 1000)} onChange={e => { const v = parseInt(e.target.value); if (!Number.isNaN(v) && v >= 0) set('schedule', { ...form.schedule, pauseBetweenRunsMs: v * 1000 }); }} className={inputCls} min={0} />
-            </div>
+            </FormField>
           )}
         </div>
       </div>
@@ -189,14 +180,12 @@ export default function ConfigTab({ agent, isCreate, apps, onSave }) {
       <div className="bg-port-card border border-port-border rounded-xl p-5 space-y-4">
         <h3 className="text-sm font-medium text-gray-400 uppercase tracking-wider">AI Provider (optional override)</h3>
         <div className="grid grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm text-gray-400 mb-1">Provider ID</label>
+          <FormField label="Provider ID">
             <input value={form.providerId || ''} onChange={e => set('providerId', e.target.value)} className={inputCls} placeholder="Leave empty for default" />
-          </div>
-          <div>
-            <label className="block text-sm text-gray-400 mb-1">Model</label>
+          </FormField>
+          <FormField label="Model">
             <input value={form.model || ''} onChange={e => set('model', e.target.value)} className={inputCls} placeholder="Leave empty for default" />
-          </div>
+          </FormField>
         </div>
       </div>
 
diff --git a/client/src/components/goals/GoalEditForm.jsx b/client/src/components/goals/GoalEditForm.jsx
index 4c8e94f66..20dd9610e 100644
--- a/client/src/components/goals/GoalEditForm.jsx
+++ b/client/src/components/goals/GoalEditForm.jsx
@@ -1,5 +1,6 @@
 import { X } from 'lucide-react';
 import Pill from '../ui/Pill';
+import { FormField } from '../ui/FormField';
 import { CATEGORY_CONFIG, HORIZON_OPTIONS, GOAL_TYPE_OPTIONS, MAX_TAGS } from './goalConstants';
 
 export default function GoalEditForm({
@@ -20,8 +21,7 @@ export default function GoalEditForm({
         rows={3}
         className="w-full bg-port-bg border border-port-border rounded px-3 py-1.5 text-sm text-white resize-none"
       />
-      <div>
-        <label className="text-xs text-gray-500">Horizon</label>
+      <FormField label="Horizon" labelClassName="text-xs text-gray-500">
         <select
           value={form.horizon}
           onChange={e => setForm({ ...form, horizon: e.target.value })}
@@ -29,9 +29,8 @@ export default function GoalEditForm({
         >
           {HORIZON_OPTIONS.map(h => <option key={h.value} value={h.value}>{h.label}</option>)}
         </select>
-      </div>
-      <div>
-        <label className="text-xs text-gray-500">Category</label>
+      </FormField>
+      <FormField label="Category" labelClassName="text-xs text-gray-500">
         <select
           value={form.category}
           onChange={e => setForm({ ...form, category: e.target.value })}
@@ -41,9 +40,8 @@ export default function GoalEditForm({
             <option key={k} value={k}>{v.label}</option>
           ))}
         </select>
-      </div>
-      <div>
-        <label className="text-xs text-gray-500">Goal Type</label>
+      </FormField>
+      <FormField label="Goal Type" labelClassName="text-xs text-gray-500">
         <select
           value={form.goalType || 'standard'}
           onChange={e => setForm({ ...form, goalType: e.target.value })}
@@ -51,9 +49,8 @@ export default function GoalEditForm({
         >
           {GOAL_TYPE_OPTIONS.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
         </select>
-      </div>
-      <div>
-        <label className="text-xs text-gray-500">Parent Goal</label>
+      </FormField>
+      <FormField label="Parent Goal" labelClassName="text-xs text-gray-500">
         <select
           value={form.parentId}
           onChange={e => setForm({ ...form, parentId: e.target.value })}
@@ -64,16 +61,15 @@ export default function GoalEditForm({
             <option key={g.id} value={g.id}>{g.title}</option>
           ))}
         </select>
-      </div>
-      <div>
-        <label className="text-xs text-gray-500">Target Date</label>
+      </FormField>
+      <FormField label="Target Date" labelClassName="text-xs text-gray-500">
         <input
           type="date"
           value={form.targetDate || ''}
           onChange={e => setForm({ ...form, targetDate: e.target.value })}
           className="w-full bg-port-bg border border-port-border rounded px-3 py-1.5 text-sm text-white mt-1"
         />
-      </div>
+      </FormField>
       <div>
         <label className="text-xs text-gray-500">Time Block Config</label>
         <div className="mt-1 space-y-2">
diff --git a/client/src/components/goals/GoalsListView.jsx b/client/src/components/goals/GoalsListView.jsx
index 8049c5c02..afbd3dc65 100644
--- a/client/src/components/goals/GoalsListView.jsx
+++ b/client/src/components/goals/GoalsListView.jsx
@@ -296,7 +296,7 @@ export default function GoalsListView({ data, onRefresh }) {
       if (!dragGoal.parentId) return; // already a root goal
     }
 
-    const result = await api.updateGoal(dragGoal.id, { parentId: newParentId }).catch(err => {
+    const result = await api.updateGoal(dragGoal.id, { parentId: newParentId }, { silent: true }).catch(err => {
       toast.error(err?.message || 'Failed to move goal');
       return null;
     });
diff --git a/client/src/components/imageGen/ImageGenControls.jsx b/client/src/components/imageGen/ImageGenControls.jsx
index b301fc6e4..27ca317c7 100644
--- a/client/src/components/imageGen/ImageGenControls.jsx
+++ b/client/src/components/imageGen/ImageGenControls.jsx
@@ -14,6 +14,7 @@ import { randomSeed } from '../../lib/genUtils';
 import { RUNNER_FAMILIES } from '../../lib/runnerFamilies';
 import { IMAGE_GEN_MODE } from '../../lib/imageGenBackends';
 import ModelDownloadBadge, { deriveSizeEstimate } from '../media/ModelDownloadBadge';
+import { FormField } from '../ui/FormField';
 
 const QUANTIZE_OPTIONS = [
   { value: '3', label: '3-bit' },
@@ -70,8 +71,7 @@ export default function ImageGenControls({
   return (
     <div className={className}>
       {showModel && isLocal && models.length > 0 && (
-        <div>
-          <label className="block text-xs font-medium text-gray-400 mb-1">Model</label>
+        <FormField label="Model" labelClassName="block text-xs font-medium text-gray-400 mb-1">
           <select
             value={modelId || ''}
             onChange={(e) => onModelChange?.(e.target.value)}
@@ -88,11 +88,10 @@ export default function ImageGenControls({
               estimateLabel={deriveSizeEstimate(currentModel?.name)}
             />
           )}
-        </div>
+        </FormField>
       )}
 
-      <div>
-        <label className="block text-xs font-medium text-gray-400 mb-1">Resolution</label>
+      <FormField label="Resolution" labelClassName="block text-xs font-medium text-gray-400 mb-1">
         <select
           value={resolutionLabel}
           onChange={handleResolution}
@@ -102,7 +101,7 @@ export default function ImageGenControls({
           {availableResolutions.map((r) => <option key={r.label} value={r.label}>{r.label}</option>)}
           {!matched && resolutionLabel && <option value={resolutionLabel}>{resolutionLabel} (custom)</option>}
         </select>
-      </div>
+      </FormField>
 
       {/* Codex's image_gen tool ignores seed/steps/guidance — only resolution
           is honored, so the rest of the knobs are hidden in that mode. */}
@@ -132,10 +131,10 @@ export default function ImageGenControls({
       )}
 
       {!isCodex && (
-        <div>
-          <label className="block text-xs font-medium text-gray-400 mb-1">
-            Steps {currentModel?.steps && `(default: ${currentModel.steps})`}
-          </label>
+        <FormField
+          label={<>Steps {currentModel?.steps && `(default: ${currentModel.steps})`}</>}
+          labelClassName="block text-xs font-medium text-gray-400 mb-1"
+        >
           <input
             type="number" min={1} max={150}
             value={steps ?? ''}
@@ -144,7 +143,7 @@ export default function ImageGenControls({
             disabled={disabled}
             className={inputCls}
           />
-        </div>
+        </FormField>
       )}
 
       {/* Step-wise distilled models (Flux Schnell, FLUX.2 Klein, Z-Image-Turbo)
@@ -152,10 +151,10 @@ export default function ImageGenControls({
           any guidance scale we pass and prints a warning. Hide the input for
           those models so the user doesn't waste a knob-turn on a no-op. */}
       {!isCodex && isLocal && !currentModel?.cfgDisabled && (
-        <div>
-          <label className="block text-xs font-medium text-gray-400 mb-1">
-            Guidance {currentModel?.guidance != null && `(default: ${currentModel.guidance})`}
-          </label>
+        <FormField
+          label={<>Guidance {currentModel?.guidance != null && `(default: ${currentModel.guidance})`}</>}
+          labelClassName="block text-xs font-medium text-gray-400 mb-1"
+        >
           <input
             type="number" min={0} max={20} step={0.5}
             value={guidance ?? ''}
@@ -164,12 +163,11 @@ export default function ImageGenControls({
             disabled={disabled}
             className={inputCls}
           />
-        </div>
+        </FormField>
       )}
 
       {!isCodex && isLocal && showQuantize && !isFlux2 && (
-        <div>
-          <label className="block text-xs font-medium text-gray-400 mb-1">Quantize (bits)</label>
+        <FormField label="Quantize (bits)" labelClassName="block text-xs font-medium text-gray-400 mb-1">
           <select
             value={quantize ?? '8'}
             onChange={(e) => onQuantizeChange?.(e.target.value)}
@@ -178,12 +176,14 @@ export default function ImageGenControls({
           >
             {QUANTIZE_OPTIONS.map((q) => <option key={q.value} value={q.value}>{q.label}</option>)}
           </select>
-        </div>
+        </FormField>
       )}
 
       {!isCodex && !isLocal && onCfgScaleChange && (
-        <div>
-          <label className="block text-xs font-medium text-gray-400 mb-1">CFG Scale ({cfgScale})</label>
+        <FormField
+          label={<>CFG Scale ({cfgScale})</>}
+          labelClassName="block text-xs font-medium text-gray-400 mb-1"
+        >
           <input
             type="range" min={1} max={20} step={0.5}
             value={cfgScale ?? 7}
@@ -191,7 +191,7 @@ export default function ImageGenControls({
             onChange={(e) => onCfgScaleChange?.(Number(e.target.value))}
             className="w-full accent-port-accent"
           />
-        </div>
+        </FormField>
       )}
     </div>
   );
diff --git a/client/src/components/meatspace/GenomeCategoryCard.jsx b/client/src/components/meatspace/GenomeCategoryCard.jsx
index cab71d58f..678b9d0df 100644
--- a/client/src/components/meatspace/GenomeCategoryCard.jsx
+++ b/client/src/components/meatspace/GenomeCategoryCard.jsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import InlineConfirmRow from '../ui/InlineConfirmRow';
+import { FormField } from '../ui/FormField';
 import { useConfirmDelete } from '../../hooks/useConfirmDelete';
 
 const STATUS_DOT = {
@@ -170,8 +171,7 @@ export default function GenomeCategoryCard({ category: _category, label, emoji,
                       </div>
 
                       {/* Notes */}
-                      <div>
-                        <label className="text-[10px] font-medium text-gray-500 uppercase tracking-wide">Your Notes</label>
+                      <FormField labelClassName="text-[10px] font-medium text-gray-500 uppercase tracking-wide" label="Your Notes">
                         <textarea
                           value={marker.notes || ''}
                           onChange={(e) => onEditNotes(marker.id, e.target.value)}
@@ -179,7 +179,7 @@ export default function GenomeCategoryCard({ category: _category, label, emoji,
                           rows={2}
                           className="w-full mt-1 p-2 bg-port-card border border-port-border rounded text-sm text-gray-300 placeholder-gray-600 resize-none focus:outline-hidden focus:border-port-accent"
                         />
-                      </div>
+                      </FormField>
 
                       {/* References */}
                       {marker.references?.length > 0 && (
diff --git a/client/src/components/meatspace/StandardDrinkCalculator.jsx b/client/src/components/meatspace/StandardDrinkCalculator.jsx
index 4e5789177..bca5885c1 100644
--- a/client/src/components/meatspace/StandardDrinkCalculator.jsx
+++ b/client/src/components/meatspace/StandardDrinkCalculator.jsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { Calculator } from 'lucide-react';
+import { FormField } from '../ui/FormField';
 
 export default function StandardDrinkCalculator() {
   const [oz, setOz] = useState('');
@@ -17,8 +18,7 @@ export default function StandardDrinkCalculator() {
         </h4>
       </div>
       <div className="flex items-end gap-3">
-        <div className="flex-1">
-          <label className="text-xs text-gray-500 block mb-1">Oz</label>
+        <FormField className="flex-1" label="Oz" labelClassName="text-xs text-gray-500 block mb-1">
           <input
             type="number"
             step="0.1"
@@ -28,10 +28,9 @@ export default function StandardDrinkCalculator() {
             placeholder="12"
             className="w-full px-2 py-1.5 bg-port-bg border border-port-border rounded text-sm text-white placeholder-gray-600"
           />
-        </div>
+        </FormField>
         <span className="text-gray-500 pb-1.5">@</span>
-        <div className="flex-1">
-          <label className="text-xs text-gray-500 block mb-1">ABV %</label>
+        <FormField className="flex-1" label="ABV %" labelClassName="text-xs text-gray-500 block mb-1">
           <input
             type="number"
             step="0.1"
@@ -42,7 +41,7 @@ export default function StandardDrinkCalculator() {
             placeholder="5"
             className="w-full px-2 py-1.5 bg-port-bg border border-port-border rounded text-sm text-white placeholder-gray-600"
           />
-        </div>
+        </FormField>
         <span className="text-gray-500 pb-1.5">=</span>
         <div className="text-center pb-1">
           <span className="text-xs text-gray-500 block">Std drinks</span>
diff --git a/client/src/components/meatspace/post/MemoryBuilder.jsx b/client/src/components/meatspace/post/MemoryBuilder.jsx
index e599341d1..887cedae7 100644
--- a/client/src/components/meatspace/post/MemoryBuilder.jsx
+++ b/client/src/components/meatspace/post/MemoryBuilder.jsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { Brain, ChevronLeft, Plus, Trash2, BookOpen, Zap, FlaskConical, Eye, X, Save, CalendarClock } from 'lucide-react';
 import { getMemoryItems, createMemoryItem, deleteMemoryItem } from '../../../services/api';
 import ConfirmButtonPair from '../../ui/ConfirmButtonPair';
+import { FormField } from '../../ui/FormField';
 import { useConfirmDelete } from '../../../hooks/useConfirmDelete';
 import MemoryPractice from './MemoryPractice';
 import ElementsSong from './ElementsSong';
@@ -202,8 +203,7 @@ export default function MemoryBuilder({ onBack, onNavigateElements }) {
             </button>
           </div>
 
-          <div>
-            <label className="block text-gray-400 text-xs mb-1.5">Title</label>
+          <FormField label="Title" labelClassName="block text-gray-400 text-xs mb-1.5">
             <input
               type="text"
               value={newTitle}
@@ -212,7 +212,7 @@ export default function MemoryBuilder({ onBack, onNavigateElements }) {
               maxLength={200}
               className="w-full bg-port-bg border border-port-border rounded-lg px-3 py-2 text-white text-sm placeholder-gray-600 focus:border-port-accent focus:outline-none"
             />
-          </div>
+          </FormField>
 
           <div>
             <label className="block text-gray-400 text-xs mb-1.5">Type</label>
@@ -233,10 +233,10 @@ export default function MemoryBuilder({ onBack, onNavigateElements }) {
             </div>
           </div>
 
-          <div>
-            <label className="block text-gray-400 text-xs mb-1.5">
-              Content <span className="text-gray-600">(one line per row; blank lines create chunk boundaries)</span>
-            </label>
+          <FormField
+            label={<>Content <span className="text-gray-600">(one line per row; blank lines create chunk boundaries)</span></>}
+            labelClassName="block text-gray-400 text-xs mb-1.5"
+          >
             <textarea
               value={newContent}
               onChange={e => setNewContent(e.target.value)}
@@ -247,7 +247,7 @@ export default function MemoryBuilder({ onBack, onNavigateElements }) {
             {newContent.trim() && (
               <ContentPreview content={newContent} />
             )}
-          </div>
+          </FormField>
 
           <div className="flex justify-end gap-3">
             <button
diff --git a/client/src/components/meatspace/post/MemoryPractice.jsx b/client/src/components/meatspace/post/MemoryPractice.jsx
index 83bbf7bcd..970e00a9d 100644
--- a/client/src/components/meatspace/post/MemoryPractice.jsx
+++ b/client/src/components/meatspace/post/MemoryPractice.jsx
@@ -55,6 +55,35 @@ export default function MemoryPractice({ item, onBack }) {
     }
   }, [mode, item.id]);
 
+  // Drive terminal transitions from an effect, never during render. The render
+  // fallbacks below (chunk exhausted, line exhausted, sequence exhausted) return null
+  // for a frame while this effect saves results, advances the chunk, or marks the
+  // session done — firing setState + an async submitMemoryPractice() POST inside the
+  // render body is fragile under StrictMode/concurrent rendering. Normal per-answer
+  // flow still runs through advanceSpaced / nextSequenceQuestion.
+  useEffect(() => {
+    if (done) return;
+    if (mode === 'spaced') {
+      if (!chunkMastery || chunkMastery.length === 0) return;
+      const currentChunk = chunkMastery[spacedChunkIdx];
+      if (!currentChunk) {
+        savePractice('spaced', results);
+        setDone(true);
+        return;
+      }
+      const [chunkStart, chunkEnd] = currentChunk.lineRange;
+      const chunkLines = lines.slice(chunkStart, chunkEnd + 1).filter(l => l.text.trim());
+      if (!chunkLines[spacedLineIdx]) {
+        setSpacedChunkIdx(prev => prev + 1);
+        setSpacedLineIdx(0);
+        setAnswer('');
+        setShowResult(null);
+      }
+    } else if (mode === 'sequence' && !lines[currentIdx + 1]) {
+      finishSequence();
+    }
+  }, [mode, chunkMastery, spacedChunkIdx, spacedLineIdx, currentIdx, done]);
+
   if (!mode) {
     return (
       <div className="space-y-6 max-w-4xl">
@@ -175,9 +204,7 @@ export default function MemoryPractice({ item, onBack }) {
 
     const currentChunk = chunkMastery[spacedChunkIdx];
     if (!currentChunk) {
-      // All chunks done
-      savePractice('spaced', results);
-      setDone(true);
+      // All chunks done — the terminal-transition effect saves results and sets done.
       return null;
     }
 
@@ -186,11 +213,7 @@ export default function MemoryPractice({ item, onBack }) {
     const currentLine = chunkLines[spacedLineIdx];
 
     if (!currentLine) {
-      // Move to next chunk
-      setSpacedChunkIdx(prev => prev + 1);
-      setSpacedLineIdx(0);
-      setAnswer('');
-      setShowResult(null);
+      // Move to next chunk — handled by the terminal-transition effect.
       return null;
     }
 
@@ -357,7 +380,7 @@ export default function MemoryPractice({ item, onBack }) {
     const expectedLine = lines[currentIdx + 1];
 
     if (!expectedLine) {
-      finishSequence();
+      // Saved + marked done by the terminal-transition effect.
       return null;
     }
 
diff --git a/client/src/components/meatspace/post/PostDrillConfig.jsx b/client/src/components/meatspace/post/PostDrillConfig.jsx
index fac1df0a5..0df2807cc 100644
--- a/client/src/components/meatspace/post/PostDrillConfig.jsx
+++ b/client/src/components/meatspace/post/PostDrillConfig.jsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { ArrowLeft, Save, Brain, Bell, TrendingUp, TrendingDown, Minus } from 'lucide-react';
 import { updatePostConfig, getProviders, getPostAdaptivePreview } from '../../../services/api';
 import toast from '../../ui/Toast';
+import { FormField } from '../../ui/FormField';
 import { filterSelectableModels, enabledApiProviderFilter } from '../../../utils/providers';
 
 // Human labels for the adaptive difficulty knob each math drill tunes.
@@ -283,8 +284,7 @@ function DrillCard({ meta, drillConfig, enabled, accent, onToggle, onUpdateField
       {enabled && (
         <div className="grid grid-cols-2 gap-3">
           {meta.fields.map(field => (
-            <div key={field.key}>
-              <label className="text-xs text-gray-500 mb-1 block">{field.label}</label>
+            <FormField key={field.key} label={field.label} labelClassName="text-xs text-gray-500 mb-1 block">
               {field.type === 'select' ? (
                 <select
                   value={drillConfig[field.key] ?? field.options?.[0]?.value ?? ''}
@@ -305,7 +305,7 @@ function DrillCard({ meta, drillConfig, enabled, accent, onToggle, onUpdateField
                   className="w-full bg-port-bg border border-port-border rounded px-2 py-1.5 text-sm text-white focus:border-port-accent focus:outline-none"
                 />
               )}
-            </div>
+            </FormField>
           ))}
         </div>
       )}
@@ -627,8 +627,7 @@ export default function PostDrillConfig({ config, onSaved, onBack }) {
           <div className="bg-port-card border border-port-accent-2/30 rounded-lg p-4">
             <h4 className="text-sm font-medium text-gray-400 mb-3">AI Provider</h4>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              <div>
-                <label className="text-xs text-gray-500 mb-1 block">Provider</label>
+              <FormField label="Provider" labelClassName="text-xs text-gray-500 mb-1 block">
                 <select
                   value={llmProviderId}
                   onChange={e => { setLlmProviderId(e.target.value); setLlmModel(''); }}
@@ -639,9 +638,8 @@ export default function PostDrillConfig({ config, onSaved, onBack }) {
                     <option key={p.id} value={p.id}>{p.name}</option>
                   ))}
                 </select>
-              </div>
-              <div>
-                <label className="text-xs text-gray-500 mb-1 block">Model</label>
+              </FormField>
+              <FormField label="Model" labelClassName="text-xs text-gray-500 mb-1 block">
                 <select
                   value={llmModel}
                   onChange={e => setLlmModel(e.target.value)}
@@ -652,7 +650,7 @@ export default function PostDrillConfig({ config, onSaved, onBack }) {
                     <option key={m} value={m}>{m}</option>
                   ))}
                 </select>
-              </div>
+              </FormField>
             </div>
           </div>
 
diff --git a/client/src/components/meatspace/post/PostSessionLauncher.jsx b/client/src/components/meatspace/post/PostSessionLauncher.jsx
index 1813e1a95..0be92a27e 100644
--- a/client/src/components/meatspace/post/PostSessionLauncher.jsx
+++ b/client/src/components/meatspace/post/PostSessionLauncher.jsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Zap, History, Settings, Play, Brain, BookOpen, Dumbbell, Timer, Radio, Target, TrendingUp, TrendingDown, Minus } from 'lucide-react';
 import { getProviders } from '../../../services/api';
+import { FormField } from '../../ui/FormField';
 import { isApiProvider } from '../../../utils/providers';
 import { DOMAINS, DRILL_TO_DOMAIN, DRILL_LABELS, computeDomainAverages } from './constants';
 
@@ -400,8 +401,7 @@ export default function PostSessionLauncher({ config, recentSessions, stats, sta
             <h3 className="text-sm font-medium text-gray-400 mb-3">Conditions (optional)</h3>
             <div className="grid grid-cols-3 gap-3">
               {Object.entries(tags).map(([key, value]) => (
-                <div key={key}>
-                  <label className="text-xs text-gray-500 mb-1 block capitalize">{key}</label>
+                <FormField key={key} labelClassName="text-xs text-gray-500 mb-1 block capitalize" label={key}>
                   <input
                     type="text"
                     value={value}
@@ -409,7 +409,7 @@ export default function PostSessionLauncher({ config, recentSessions, stats, sta
                     placeholder={key === 'sleep' ? 'good/poor' : key === 'caffeine' ? '1 cup' : 'low/high'}
                     className="w-full bg-port-bg border border-port-border rounded px-2 py-1.5 text-sm text-white placeholder-gray-600 focus:border-port-accent focus:outline-none"
                   />
-                </div>
+                </FormField>
               ))}
             </div>
           </div>}
diff --git a/client/src/components/meatspace/tabs/AlcoholTab.jsx b/client/src/components/meatspace/tabs/AlcoholTab.jsx
index 88f673e40..71db03004 100644
--- a/client/src/components/meatspace/tabs/AlcoholTab.jsx
+++ b/client/src/components/meatspace/tabs/AlcoholTab.jsx
@@ -4,6 +4,7 @@ import toast from '../../ui/Toast';
 import * as api from '../../../services/api';
 import BrailleSpinner from '../../BrailleSpinner';
 import ConfirmButtonPair from '../../ui/ConfirmButtonPair';
+import { FormField } from '../../ui/FormField';
 import { useConfirmDelete } from '../../../hooks/useConfirmDelete';
 import AlcoholChart from '../AlcoholChart';
 import AlcoholHrvCorrelation from '../AlcoholHrvCorrelation';
@@ -462,8 +463,7 @@ export default function AlcoholTab() {
 
         {/* Custom entry form */}
         <form onSubmit={handleCustomAdd} className="grid grid-cols-2 sm:grid-cols-[1fr_5rem_5rem_4rem_9rem_auto] items-end gap-3">
-          <div className="col-span-2 sm:col-span-1">
-            <label className="text-xs text-gray-500 block mb-1">Name (optional)</label>
+          <FormField className="col-span-2 sm:col-span-1" label="Name (optional)" labelClassName="text-xs text-gray-500 block mb-1">
             <input
               type="text"
               value={name}
@@ -471,7 +471,7 @@ export default function AlcoholTab() {
               placeholder="e.g., Hazy IPA"
               className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-sm text-white placeholder-gray-600"
             />
-          </div>
+          </FormField>
           <div>
             <div className="flex items-center gap-1.5 mb-1">
               <label className="text-xs text-gray-500">Volume</label>
@@ -494,8 +494,7 @@ export default function AlcoholTab() {
               className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-sm text-white placeholder-gray-600"
             />
           </div>
-          <div>
-            <label className="text-xs text-gray-500 block mb-1">ABV %</label>
+          <FormField label="ABV %" labelClassName="text-xs text-gray-500 block mb-1">
             <input
               type="number"
               step="0.1"
@@ -507,9 +506,8 @@ export default function AlcoholTab() {
               placeholder="5"
               className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-sm text-white placeholder-gray-600"
             />
-          </div>
-          <div>
-            <label className="text-xs text-gray-500 block mb-1">Count</label>
+          </FormField>
+          <FormField label="Count" labelClassName="text-xs text-gray-500 block mb-1">
             <input
               type="number"
               min="1"
@@ -518,16 +516,15 @@ export default function AlcoholTab() {
               onChange={e => setCount(parseInt(e.target.value) || 1)}
               className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-sm text-white"
             />
-          </div>
-          <div>
-            <label className="text-xs text-gray-500 block mb-1">Date</label>
+          </FormField>
+          <FormField label="Date" labelClassName="text-xs text-gray-500 block mb-1">
             <input
               type="date"
               value={date}
               onChange={e => setDate(e.target.value)}
               className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-sm text-white"
             />
-          </div>
+          </FormField>
           <button
             type="submit"
             disabled={logging || !oz || !abv}
diff --git a/client/src/components/meatspace/tabs/NicotineTab.jsx b/client/src/components/meatspace/tabs/NicotineTab.jsx
index 3101d8bf7..c3e8a767e 100644
--- a/client/src/components/meatspace/tabs/NicotineTab.jsx
+++ b/client/src/components/meatspace/tabs/NicotineTab.jsx
@@ -4,6 +4,7 @@ import toast from '../../ui/Toast';
 import * as api from '../../../services/api';
 import BrailleSpinner from '../../BrailleSpinner';
 import ConfirmButtonPair from '../../ui/ConfirmButtonPair';
+import { FormField } from '../../ui/FormField';
 import { useConfirmDelete } from '../../../hooks/useConfirmDelete';
 import NicotineChart from '../NicotineChart';
 import NicotineHealthCorrelation from '../NicotineHealthCorrelation';
@@ -331,8 +332,7 @@ export default function NicotineTab() {
 
             {/* Custom entry + date — single row */}
             <form onSubmit={handleCustomAdd} className="flex flex-wrap items-end gap-2 pt-2 border-t border-port-border/50">
-              <div className="flex-1 min-w-[100px]">
-                <label className="block text-xs text-gray-500 mb-1">Product</label>
+              <FormField label="Product" className="flex-1 min-w-[100px]" labelClassName="block text-xs text-gray-500 mb-1">
                 <input
                   type="text"
                   value={product}
@@ -340,9 +340,8 @@ export default function NicotineTab() {
                   className="w-full bg-port-bg border border-port-border rounded px-2 py-1.5 text-xs text-white placeholder-gray-600"
                   placeholder="e.g. Stokes Pick"
                 />
-              </div>
-              <div className="w-16">
-                <label className="block text-xs text-gray-500 mb-1">mg</label>
+              </FormField>
+              <FormField label="mg" className="w-16" labelClassName="block text-xs text-gray-500 mb-1">
                 <input
                   type="number"
                   value={mgPerUnit}
@@ -353,9 +352,8 @@ export default function NicotineTab() {
                   min="0.1"
                   required
                 />
-              </div>
-              <div className="w-14">
-                <label className="block text-xs text-gray-500 mb-1">Qty</label>
+              </FormField>
+              <FormField label="Qty" className="w-14" labelClassName="block text-xs text-gray-500 mb-1">
                 <input
                   type="number"
                   value={count}
@@ -363,16 +361,15 @@ export default function NicotineTab() {
                   className="w-full bg-port-bg border border-port-border rounded px-2 py-1.5 text-xs text-white"
                   min="1"
                 />
-              </div>
-              <div>
-                <label className="block text-xs text-gray-500 mb-1">Date</label>
+              </FormField>
+              <FormField label="Date" labelClassName="block text-xs text-gray-500 mb-1">
                 <input
                   type="date"
                   value={date}
                   onChange={e => setDate(e.target.value)}
                   className="bg-port-bg border border-port-border rounded px-2 py-1.5 text-xs text-white"
                 />
-              </div>
+              </FormField>
               {date !== today && (
                 <button
                   type="button"
diff --git a/client/src/components/meatspace/tabs/calendar/AddActivityForm.jsx b/client/src/components/meatspace/tabs/calendar/AddActivityForm.jsx
index 1aca5a987..7cabd0248 100644
--- a/client/src/components/meatspace/tabs/calendar/AddActivityForm.jsx
+++ b/client/src/components/meatspace/tabs/calendar/AddActivityForm.jsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Plus } from 'lucide-react';
 import { ICON_MAP, IconForName } from './icons';
+import { FormField } from '../../../ui/FormField';
 
 export default function AddActivityForm({ onAdd }) {
   const [open, setOpen] = useState(false);
@@ -36,8 +37,7 @@ export default function AddActivityForm({ onAdd }) {
   return (
     <form onSubmit={handleSubmit} className="bg-port-card border border-port-border rounded-lg p-4 space-y-3">
       <div className="grid grid-cols-2 gap-3">
-        <div>
-          <label className="text-xs text-gray-400 mb-1 block">Name</label>
+        <FormField label="Name" labelClassName="text-xs text-gray-400 mb-1 block">
           <input
             type="text"
             value={name}
@@ -46,7 +46,7 @@ export default function AddActivityForm({ onAdd }) {
             className="w-full px-2 py-1.5 bg-port-bg border border-port-border rounded text-sm text-white focus:border-port-accent focus:outline-hidden"
             autoFocus
           />
-        </div>
+        </FormField>
         <div>
           <label className="text-xs text-gray-400 mb-1 block">Icon</label>
           <div className="flex gap-1 flex-wrap">
@@ -64,8 +64,7 @@ export default function AddActivityForm({ onAdd }) {
         </div>
       </div>
       <div className="grid grid-cols-2 gap-3">
-        <div>
-          <label className="text-xs text-gray-400 mb-1 block">Frequency</label>
+        <FormField label="Frequency" labelClassName="text-xs text-gray-400 mb-1 block">
           <input
             type="number"
             value={frequency}
@@ -74,9 +73,8 @@ export default function AddActivityForm({ onAdd }) {
             step="0.5"
             className="w-full px-2 py-1.5 bg-port-bg border border-port-border rounded text-sm text-white focus:border-port-accent focus:outline-hidden"
           />
-        </div>
-        <div>
-          <label className="text-xs text-gray-400 mb-1 block">Cadence</label>
+        </FormField>
+        <FormField label="Cadence" labelClassName="text-xs text-gray-400 mb-1 block">
           <select
             value={cadence}
             onChange={(e) => setCadence(e.target.value)}
@@ -87,7 +85,7 @@ export default function AddActivityForm({ onAdd }) {
             <option value="month">Per Month</option>
             <option value="year">Per Year</option>
           </select>
-        </div>
+        </FormField>
       </div>
       <div className="flex gap-2">
         <button type="submit" className="px-3 py-1.5 bg-port-accent text-white text-sm rounded hover:bg-port-accent/80 transition-colors">
diff --git a/client/src/components/meatspace/tabs/calendar/LifeEventsPanel.jsx b/client/src/components/meatspace/tabs/calendar/LifeEventsPanel.jsx
index 412c4fd66..ef72f1bb8 100644
--- a/client/src/components/meatspace/tabs/calendar/LifeEventsPanel.jsx
+++ b/client/src/components/meatspace/tabs/calendar/LifeEventsPanel.jsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { Calendar, Plus, Trash2, Eye, EyeOff, ChevronDown } from 'lucide-react';
+import { FormField } from '../../../ui/FormField';
 import { EVENT_TYPE_STYLES, EVENT_TYPES, MONTH_NAMES_FULL } from './lifeGridMath';
 
 export default function LifeEventsPanel({ events, onAdd, onToggle, onRemove }) {
@@ -96,8 +97,7 @@ export default function LifeEventsPanel({ events, onAdd, onToggle, onRemove }) {
           {adding ? (
             <form onSubmit={handleSubmit} className="bg-port-bg border border-port-border rounded-lg p-3 space-y-3">
               <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <label className="text-xs text-gray-400 mb-1 block">Name</label>
+                <FormField label="Name" labelClassName="text-xs text-gray-400 mb-1 block">
                   <input
                     type="text"
                     value={name}
@@ -106,9 +106,8 @@ export default function LifeEventsPanel({ events, onAdd, onToggle, onRemove }) {
                     className="w-full px-2 py-1.5 bg-port-card border border-port-border rounded text-sm text-white focus:border-port-accent focus:outline-hidden"
                     autoFocus
                   />
-                </div>
-                <div>
-                  <label className="text-xs text-gray-400 mb-1 block">Type</label>
+                </FormField>
+                <FormField label="Type" labelClassName="text-xs text-gray-400 mb-1 block">
                   <select
                     value={type}
                     onChange={e => setType(e.target.value)}
@@ -118,11 +117,10 @@ export default function LifeEventsPanel({ events, onAdd, onToggle, onRemove }) {
                       <option key={t.id} value={t.id}>{t.label}</option>
                     ))}
                   </select>
-                </div>
+                </FormField>
               </div>
               <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <label className="text-xs text-gray-400 mb-1 block">Recurrence</label>
+                <FormField label="Recurrence" labelClassName="text-xs text-gray-400 mb-1 block">
                   <select
                     value={recurrence}
                     onChange={e => setRecurrence(e.target.value)}
@@ -131,11 +129,10 @@ export default function LifeEventsPanel({ events, onAdd, onToggle, onRemove }) {
                     <option value="yearly">Yearly</option>
                     <option value="once">One-time</option>
                   </select>
-                </div>
+                </FormField>
                 {recurrence === 'yearly' ? (
                   <div className="flex gap-2">
-                    <div className="flex-1">
-                      <label className="text-xs text-gray-400 mb-1 block">Month</label>
+                    <FormField className="flex-1" label="Month" labelClassName="text-xs text-gray-400 mb-1 block">
                       <select
                         value={month}
                         onChange={e => setMonth(parseInt(e.target.value))}
@@ -145,9 +142,8 @@ export default function LifeEventsPanel({ events, onAdd, onToggle, onRemove }) {
                           <option key={i} value={i}>{m}</option>
                         ))}
                       </select>
-                    </div>
-                    <div className="w-16">
-                      <label className="text-xs text-gray-400 mb-1 block">Day</label>
+                    </FormField>
+                    <FormField className="w-16" label="Day" labelClassName="text-xs text-gray-400 mb-1 block">
                       <input
                         type="number"
                         value={day}
@@ -156,18 +152,17 @@ export default function LifeEventsPanel({ events, onAdd, onToggle, onRemove }) {
                         max="31"
                         className="w-full px-2 py-1.5 bg-port-card border border-port-border rounded text-sm text-white focus:border-port-accent focus:outline-hidden"
                       />
-                    </div>
+                    </FormField>
                   </div>
                 ) : (
-                  <div>
-                    <label className="text-xs text-gray-400 mb-1 block">Date</label>
+                  <FormField label="Date" labelClassName="text-xs text-gray-400 mb-1 block">
                     <input
                       type="date"
                       value={date}
                       onChange={e => setDate(e.target.value)}
                       className="w-full px-2 py-1.5 bg-port-card border border-port-border rounded text-sm text-white focus:border-port-accent focus:outline-hidden"
                     />
-                  </div>
+                  </FormField>
                 )}
               </div>
               <div className="flex gap-2">
diff --git a/client/src/components/media/AnnotationCanvas.jsx b/client/src/components/media/AnnotationCanvas.jsx
new file mode 100644
index 000000000..cf1232b1a
--- /dev/null
+++ b/client/src/components/media/AnnotationCanvas.jsx
@@ -0,0 +1,138 @@
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { drawStrokes, createStroke, appendPoint } from '../../lib/sketchCanvas';
+
+// Drawing surface for the Sketch & Annotation Canvas (issue #2036, phase 1).
+// Renders the target image with a transparent <canvas> stroke layer on top.
+// Controlled: the parent owns `strokes` + the active `tool` and receives
+// committed strokes via `onStrokesChange`. Pointer events cover mouse, pen, AND
+// touch (the canvas sets `touch-action: none` so a drag doesn't scroll the page).
+//
+// The imperative handle exposes `exportPng()` (flattened image + strokes) and
+// `dimensions` so the parent can persist / download without reaching into refs.
+const AnnotationCanvas = forwardRef(function AnnotationCanvas(
+  { imageSrc, strokes, tool, onStrokesChange, onImageLoad, onImageError },
+  ref,
+) {
+  const canvasRef = useRef(null);
+  const imgRef = useRef(null);
+  const drawingRef = useRef(null); // in-progress (uncommitted) stroke
+  const activePointerIdRef = useRef(null); // the single pointer we're tracking
+  const [dims, setDims] = useState(null); // { w, h } in natural pixels
+  const [inProgress, setInProgress] = useState(null);
+
+  const handleImgLoad = useCallback(() => {
+    const img = imgRef.current;
+    if (!img) return;
+    const w = img.naturalWidth || img.width || 1;
+    const h = img.naturalHeight || img.height || 1;
+    setDims({ w, h });
+    onImageLoad?.({ w, h });
+  }, [onImageLoad]);
+
+  // Redraw the whole layer from the committed strokes plus any in-progress
+  // stroke. Full redraw (rather than incremental) keeps undo/erase trivially
+  // correct — the layer is a pure function of the stroke list.
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !dims) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    const all = inProgress ? [...strokes, inProgress] : strokes;
+    drawStrokes(ctx, all, canvas.width, canvas.height);
+  }, [strokes, inProgress, dims]);
+
+  // Map a pointer event to natural-pixel canvas coordinates, accounting for the
+  // CSS scale between the displayed size and the canvas's internal resolution.
+  const toNatural = useCallback((e) => {
+    const canvas = canvasRef.current;
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / (rect.width || 1);
+    const scaleY = canvas.height / (rect.height || 1);
+    return {
+      x: (e.clientX - rect.left) * scaleX,
+      y: (e.clientY - rect.top) * scaleY,
+    };
+  }, []);
+
+  const handlePointerDown = useCallback((e) => {
+    // Track exactly one pointer — a second finger/palm mid-draw is ignored so
+    // it can't hijack or garble the in-progress stroke on touch devices.
+    if (!dims || activePointerIdRef.current !== null) return;
+    e.preventDefault();
+    activePointerIdRef.current = e.pointerId;
+    // Capture so strokes continue smoothly even when the pointer leaves the
+    // canvas bounds mid-draw. Auto-releases on pointerup/cancel.
+    canvasRef.current?.setPointerCapture?.(e.pointerId);
+    const { x, y } = toNatural(e);
+    const stroke = createStroke({ mode: tool.mode, color: tool.color, size: tool.size, x, y });
+    drawingRef.current = stroke;
+    setInProgress(stroke);
+  }, [dims, tool, toNatural]);
+
+  const handlePointerMove = useCallback((e) => {
+    if (e.pointerId !== activePointerIdRef.current || !drawingRef.current) return;
+    e.preventDefault();
+    const { x, y } = toNatural(e);
+    const next = appendPoint(drawingRef.current, x, y);
+    drawingRef.current = next;
+    setInProgress(next);
+  }, [toNatural]);
+
+  const finishStroke = useCallback((e) => {
+    if (e && e.pointerId !== activePointerIdRef.current) return;
+    activePointerIdRef.current = null;
+    const stroke = drawingRef.current;
+    if (!stroke) return;
+    drawingRef.current = null;
+    setInProgress(null);
+    onStrokesChange([...strokes, stroke]);
+  }, [strokes, onStrokesChange]);
+
+  useImperativeHandle(ref, () => ({
+    dimensions: dims,
+    // Flatten the image + stroke layer into a single PNG data URL at natural
+    // resolution. Same-origin image (/data/images/...) so the canvas isn't
+    // tainted and toDataURL succeeds.
+    exportPng: () => {
+      const canvas = canvasRef.current;
+      const img = imgRef.current;
+      if (!canvas || !img || !dims) return null;
+      const out = document.createElement('canvas');
+      out.width = dims.w;
+      out.height = dims.h;
+      const ctx = out.getContext('2d');
+      if (!ctx) return null;
+      ctx.drawImage(img, 0, 0, dims.w, dims.h);
+      ctx.drawImage(canvas, 0, 0, dims.w, dims.h);
+      return out.toDataURL('image/png');
+    },
+  }), [dims]);
+
+  return (
+    <div className="relative inline-block max-w-full bg-port-bg rounded-lg overflow-hidden">
+      <img
+        ref={imgRef}
+        src={imageSrc}
+        onLoad={handleImgLoad}
+        onError={onImageError}
+        alt="Media being annotated"
+        className="block max-w-full h-auto select-none"
+        draggable={false}
+      />
+      {dims && (
+        <canvas
+          ref={canvasRef}
+          width={dims.w}
+          height={dims.h}
+          onPointerDown={handlePointerDown}
+          onPointerMove={handlePointerMove}
+          onPointerUp={finishStroke}
+          onPointerCancel={finishStroke}
+          className="absolute inset-0 w-full h-full touch-none cursor-crosshair"
+        />
+      )}
+    </div>
+  );
+});
+
+export default AnnotationCanvas;
diff --git a/client/src/components/media/MediaCard.jsx b/client/src/components/media/MediaCard.jsx
index 18f413b63..47c0dc69d 100644
--- a/client/src/components/media/MediaCard.jsx
+++ b/client/src/components/media/MediaCard.jsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Trash2, Download, Film, Image as ImageIcon, Sparkles, Eye, EyeOff, Maximize2, Wand2, Star, MessageSquare } from 'lucide-react';
+import { Trash2, Download, Film, Image as ImageIcon, Sparkles, Eye, EyeOff, Maximize2, Wand2, Star, MessageSquare, Pencil } from 'lucide-react';
 import MediaImage from '../MediaImage';
 import AddToCollectionMenu from './AddToCollectionMenu';
 import PinToMoodBoardMenu from './PinToMoodBoardMenu';
@@ -31,6 +31,7 @@ export default function MediaCard({
   starred = false,
   hasNote = false,
   onToggleStar,
+  onAnnotate,
 }) {
   const { kind, prompt, modelId, previewUrl, downloadUrl } = item;
   const isVideo = kind === 'video';
@@ -146,6 +147,17 @@ export default function MediaCard({
                 <Wand2 className="w-3 h-3" />
               </button>
             )}
+            {!isVideo && onAnnotate && (
+              <button
+                type="button"
+                onClick={() => onAnnotate(item)}
+                className="shrink-0 px-1.5 py-1 bg-port-accent/20 hover:bg-port-accent/40 text-port-accent text-[10px] rounded flex items-center justify-center"
+                title="Annotate (draw over this image)"
+                aria-label="Annotate image"
+              >
+                <Pencil className="w-3 h-3" />
+              </button>
+            )}
             {!isVideo && onSendToVideo && (
               <button
                 type="button"
diff --git a/client/src/components/media/MediaJobsQueue.jsx b/client/src/components/media/MediaJobsQueue.jsx
index 170cc72b9..50e6ae3a6 100644
--- a/client/src/components/media/MediaJobsQueue.jsx
+++ b/client/src/components/media/MediaJobsQueue.jsx
@@ -2,6 +2,7 @@ import { useMemo, useState, useCallback, useEffect, useRef } from 'react';
 import { ListOrdered, Image as ImageIcon, Film, Cpu, X, RefreshCw, ChevronDown, ChevronRight, Trash2, RotateCw, Zap, Pencil } from 'lucide-react';
 import toast from '../ui/Toast';
 import ConfirmButtonPair from '../ui/ConfirmButtonPair';
+import { FormField } from '../ui/FormField';
 import { listMediaJobs, cancelMediaJob, cancelQueuedMediaJobs, deleteMediaJob, retryMediaJob, runMediaJobNow } from '../../services/apiMediaJobs.js';
 import { listLoraTrainingCheckpoints } from '../../services/apiLoraTraining.js';
 import { IMAGE_GEN_MODE } from '../../lib/imageGenBackends';
@@ -470,25 +471,26 @@ function EditRetryForm({ job, onSubmit, onCancel }) {
 
   return (
     <form onSubmit={submit} className="mt-3 pt-3 border-t border-port-border space-y-2">
-      <label className="block text-[10px] uppercase tracking-wide text-port-text-muted">Prompt</label>
-      <textarea
-        value={prompt}
-        onChange={(e) => setPrompt(e.target.value)}
-        rows={3}
-        className="w-full px-2 py-1.5 bg-port-bg border border-port-border rounded text-white text-xs"
-        maxLength={8000}
-      />
-      <label className="block text-[10px] uppercase tracking-wide text-port-text-muted">Negative prompt</label>
-      <textarea
-        value={negativePrompt}
-        onChange={(e) => setNegativePrompt(e.target.value)}
-        rows={2}
-        className="w-full px-2 py-1.5 bg-port-bg border border-port-border rounded text-white text-xs"
-        maxLength={8000}
-      />
+      <FormField label="Prompt" labelClassName="block text-[10px] uppercase tracking-wide text-port-text-muted">
+        <textarea
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          rows={3}
+          className="w-full px-2 py-1.5 bg-port-bg border border-port-border rounded text-white text-xs"
+          maxLength={8000}
+        />
+      </FormField>
+      <FormField label="Negative prompt" labelClassName="block text-[10px] uppercase tracking-wide text-port-text-muted">
+        <textarea
+          value={negativePrompt}
+          onChange={(e) => setNegativePrompt(e.target.value)}
+          rows={2}
+          className="w-full px-2 py-1.5 bg-port-bg border border-port-border rounded text-white text-xs"
+          maxLength={8000}
+        />
+      </FormField>
       <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
-        <div className="col-span-2">
-          <label className="block text-[10px] uppercase tracking-wide text-port-text-muted">{isCodex ? 'Codex model' : 'Model id'}</label>
+        <FormField className="col-span-2" label={isCodex ? 'Codex model' : 'Model id'} labelClassName="block text-[10px] uppercase tracking-wide text-port-text-muted">
           <input
             type="text"
             value={isCodex ? model : modelId}
@@ -497,34 +499,31 @@ function EditRetryForm({ job, onSubmit, onCancel }) {
             className="w-full px-2 py-1 bg-port-bg border border-port-border rounded text-white text-xs"
             maxLength={200}
           />
-        </div>
-        <div>
-          <label className="block text-[10px] uppercase tracking-wide text-port-text-muted">Width</label>
+        </FormField>
+        <FormField label="Width" labelClassName="block text-[10px] uppercase tracking-wide text-port-text-muted">
           <input
             type="number" min={64} max={4096} step={8}
             value={width}
             onChange={(e) => setWidth(e.target.value)}
             className="w-full px-2 py-1 bg-port-bg border border-port-border rounded text-white text-xs"
           />
-        </div>
-        <div>
-          <label className="block text-[10px] uppercase tracking-wide text-port-text-muted">Height</label>
+        </FormField>
+        <FormField label="Height" labelClassName="block text-[10px] uppercase tracking-wide text-port-text-muted">
           <input
             type="number" min={64} max={4096} step={8}
             value={height}
             onChange={(e) => setHeight(e.target.value)}
             className="w-full px-2 py-1 bg-port-bg border border-port-border rounded text-white text-xs"
           />
-        </div>
-        <div>
-          <label className="block text-[10px] uppercase tracking-wide text-port-text-muted">Steps</label>
+        </FormField>
+        <FormField label="Steps" labelClassName="block text-[10px] uppercase tracking-wide text-port-text-muted">
           <input
             type="number" min={1} max={200} step={1}
             value={steps}
             onChange={(e) => setSteps(e.target.value)}
             className="w-full px-2 py-1 bg-port-bg border border-port-border rounded text-white text-xs"
           />
-        </div>
+        </FormField>
       </div>
       <div className="flex items-center justify-end gap-2 pt-1">
         <button
diff --git a/client/src/components/media/PromptRefineModal.jsx b/client/src/components/media/PromptRefineModal.jsx
index 4833e4d3e..025d47457 100644
--- a/client/src/components/media/PromptRefineModal.jsx
+++ b/client/src/components/media/PromptRefineModal.jsx
@@ -3,6 +3,7 @@ import { ListPlus, Sparkles, Wand2, X } from 'lucide-react';
 import ProviderModelSelector from '../ProviderModelSelector';
 import toast from '../ui/Toast';
 import Modal from '../ui/Modal';
+import { FormField } from '../ui/FormField';
 import useProviderModels from '../../hooks/useProviderModels';
 import { generateImage, generateVideo, refineMediaPrompt } from '../../services/api';
 import { getRenderConfigForItem } from './normalize';
@@ -184,25 +185,23 @@ export default function PromptRefineModal({ item, open, onClose }) {
                 </p>
               )}
 
-              <div>
-                <label className="block text-[11px] uppercase tracking-wide text-gray-500 mb-1">New prompt</label>
+              <FormField label="New prompt" labelClassName="block text-[11px] uppercase tracking-wide text-gray-500 mb-1">
                 <textarea
                   value={refinedPrompt}
                   onChange={(e) => setRefinedPrompt(e.target.value)}
                   rows={6}
                   className="w-full bg-port-bg border border-port-border rounded-lg p-3 text-sm text-white focus:outline-none focus:border-port-accent resize-y"
                 />
-              </div>
+              </FormField>
 
-              <div>
-                <label className="block text-[11px] uppercase tracking-wide text-gray-500 mb-1">New negative prompt</label>
+              <FormField label="New negative prompt" labelClassName="block text-[11px] uppercase tracking-wide text-gray-500 mb-1">
                 <textarea
                   value={refinedNegative}
                   onChange={(e) => setRefinedNegative(e.target.value)}
                   rows={3}
                   className="w-full bg-port-bg border border-port-border rounded-lg p-3 text-sm text-white focus:outline-none focus:border-port-accent resize-y"
                 />
-              </div>
+              </FormField>
             </div>
           )}
         </div>
diff --git a/client/src/components/messages/ConfigTab.jsx b/client/src/components/messages/ConfigTab.jsx
index 59eaa8965..3411c6385 100644
--- a/client/src/components/messages/ConfigTab.jsx
+++ b/client/src/components/messages/ConfigTab.jsx
@@ -6,6 +6,7 @@ import * as api from '../../services/api';
 import ProviderModelSelector from '../ProviderModelSelector';
 import useProviderModels from '../../hooks/useProviderModels';
 import InlineConfirmRow from '../ui/InlineConfirmRow';
+import { FormField } from '../ui/FormField';
 import { useConfirmDelete } from '../../hooks/useConfirmDelete';
 
 const TYPE_ICONS = { gmail: Mail, outlook: Globe, teams: MessageSquare };
@@ -275,8 +276,7 @@ export default function ConfigTab({ accounts, setAccounts }) {
 
         {showForm && (
           <div className="p-4 bg-port-card rounded-lg border border-port-border space-y-3 mb-4">
-            <div>
-              <label className="block text-sm text-gray-400 mb-1">Name</label>
+            <FormField label="Name">
               <input
                 type="text"
                 value={form.name}
@@ -284,9 +284,8 @@ export default function ConfigTab({ accounts, setAccounts }) {
                 placeholder="e.g. Work Gmail"
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-sm text-white placeholder-gray-500 focus:outline-none focus:border-port-accent"
               />
-            </div>
-            <div>
-              <label className="block text-sm text-gray-400 mb-1">Type</label>
+            </FormField>
+            <FormField label="Type">
               <select
                 value={form.type}
                 onChange={(e) => setForm(f => ({ ...f, type: e.target.value }))}
@@ -296,9 +295,8 @@ export default function ConfigTab({ accounts, setAccounts }) {
                 <option value="outlook">Outlook (Playwright)</option>
                 <option value="teams">Teams (Playwright)</option>
               </select>
-            </div>
-            <div>
-              <label className="block text-sm text-gray-400 mb-1">Email</label>
+            </FormField>
+            <FormField label="Email">
               <input
                 type="email"
                 value={form.email}
@@ -306,7 +304,7 @@ export default function ConfigTab({ accounts, setAccounts }) {
                 placeholder="user@example.com"
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-sm text-white placeholder-gray-500 focus:outline-none focus:border-port-accent"
               />
-            </div>
+            </FormField>
             <div className="flex gap-2">
               <button
                 onClick={handleCreate}
@@ -469,24 +467,30 @@ export default function ConfigTab({ accounts, setAccounts }) {
           <RefreshCw size={16} className="text-port-accent animate-spin" />
         ) : (
           <div className="space-y-4">
-            <div className="p-4 bg-port-card rounded-lg border border-port-border">
-              <label className="block text-sm font-medium text-gray-300 mb-2">Reply Template</label>
+            <FormField
+              label="Reply Template"
+              className="p-4 bg-port-card rounded-lg border border-port-border"
+              labelClassName="block text-sm font-medium text-gray-300 mb-2"
+            >
               <textarea
                 value={config.replyTemplate}
                 onChange={(e) => updateTemplate('replyTemplate', e.target.value)}
                 rows={8}
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-sm text-white font-mono placeholder-gray-500 focus:outline-none focus:border-port-accent resize-y"
               />
-            </div>
-            <div className="p-4 bg-port-card rounded-lg border border-port-border">
-              <label className="block text-sm font-medium text-gray-300 mb-2">Forward Template</label>
+            </FormField>
+            <FormField
+              label="Forward Template"
+              className="p-4 bg-port-card rounded-lg border border-port-border"
+              labelClassName="block text-sm font-medium text-gray-300 mb-2"
+            >
               <textarea
                 value={config.forwardTemplate}
                 onChange={(e) => updateTemplate('forwardTemplate', e.target.value)}
                 rows={6}
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-sm text-white font-mono placeholder-gray-500 focus:outline-none focus:border-port-accent resize-y"
               />
-            </div>
+            </FormField>
             <div className="flex items-center gap-3">
               <button
                 onClick={handleSaveConfig}
diff --git a/client/src/components/messages/InboxTab.jsx b/client/src/components/messages/InboxTab.jsx
index 3ec410e00..b425d2f51 100644
--- a/client/src/components/messages/InboxTab.jsx
+++ b/client/src/components/messages/InboxTab.jsx
@@ -114,7 +114,7 @@ export default function InboxTab({ accounts }) {
     let totalPruned = 0;
     for (const acct of targets) {
       toast(`Syncing ${acct.name} (${mode})...`, { icon: '📧' });
-      const result = await api.syncMessageAccount(acct.id, mode).catch(err => {
+      const result = await api.syncMessageAccount(acct.id, mode, { silent: true }).catch(err => {
         toast.error(`${acct.name}: ${err?.message || 'Sync failed'}`);
         return null;
       });
@@ -174,7 +174,7 @@ export default function InboxTab({ accounts }) {
     }
     setActionInProgress(msg.id);
     toast(`${action === 'archive' ? 'Archiving' : 'Deleting'}...`, { icon: '📧' });
-    const result = await api.executeMessageAction(msg.accountId, msg.id, action).catch(err => {
+    const result = await api.executeMessageAction(msg.accountId, msg.id, action, { silent: true }).catch(err => {
       toast.error(err?.message || `${action} failed`);
       return null;
     });
diff --git a/client/src/components/messages/SyncTab.jsx b/client/src/components/messages/SyncTab.jsx
index 527f2a1d4..5ca9901c1 100644
--- a/client/src/components/messages/SyncTab.jsx
+++ b/client/src/components/messages/SyncTab.jsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { RefreshCw, AlertCircle, Settings, Globe, Mail, MailOpen } from 'lucide-react';
 import toast from '../ui/Toast';
+import { FormField } from '../ui/FormField';
 import { formatDateTime } from '../../utils/formatters';
 import * as api from '../../services/api';
 import socket from '../../services/socket';
@@ -187,15 +188,14 @@ export default function SyncTab({ accounts, onRefresh }) {
             {editingSelector === provider ? (
               <div className="space-y-2">
                 {Object.entries(selectorForm).map(([key, val]) => (
-                  <div key={key} className="flex items-center gap-2">
-                    <label className="text-xs text-gray-500 w-32 shrink-0">{key}</label>
+                  <FormField key={key} className="flex items-center gap-2" labelClassName="text-xs text-gray-500 w-32 shrink-0" label={key}>
                     <input
                       type="text"
                       value={val}
                       onChange={(e) => setSelectorForm(f => ({ ...f, [key]: e.target.value }))}
                       className="flex-1 px-2 py-1 bg-port-bg border border-port-border rounded text-xs text-white font-mono focus:outline-none focus:border-port-accent"
                     />
-                  </div>
+                  </FormField>
                 ))}
                 <div className="flex gap-2 mt-2">
                   <button
diff --git a/client/src/components/music/AlbumsManager.jsx b/client/src/components/music/AlbumsManager.jsx
index ba6962a92..3dcc78d48 100644
--- a/client/src/components/music/AlbumsManager.jsx
+++ b/client/src/components/music/AlbumsManager.jsx
@@ -9,6 +9,7 @@
  */
 
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
 import { Plus, Loader2, Trash2, Save, Upload, ImageIcon, Sparkles, X, ArrowUp, ArrowDown } from 'lucide-react';
 import toast from '../ui/Toast';
 import GalleryImagePicker from '../imageGen/GalleryImagePicker';
@@ -65,10 +66,13 @@ function Field({ label, hint, children }) {
 }
 
 export default function AlbumsManager() {
+  const navigate = useNavigate();
+  // Selection lives in the URL (`/music/albums/:id`, `/music/albums/new`) so it's
+  // deep-linkable and reload-safe. `id === 'new'` = create; a real id = edit.
+  const { id } = useParams();
   const [albums, setAlbums] = useState([]);
   const [allTracks, setAllTracks] = useState([]);
   const [loading, setLoading] = useState(true);
-  const [selectedId, setSelectedId] = useState(null); // 'new' | id | null
   const [form, setForm] = useState(emptyForm);
   const [saving, setSaving] = useState(false);
   const [confirmDelete, setConfirmDelete] = useState(false);
@@ -109,26 +113,33 @@ export default function AlbumsManager() {
     }
   }, [genJobId, gen.status, gen.filename, gen.path, gen.error]);
 
-  const isCreate = selectedId === 'new';
+  const isCreate = id === 'new';
   const selected = useMemo(
-    () => (isCreate || !selectedId ? null : albums.find((a) => a.id === selectedId) || null),
-    [albums, selectedId, isCreate],
+    () => (isCreate || !id ? null : albums.find((a) => a.id === id) || null),
+    [albums, id, isCreate],
   );
+  const notFound = !isCreate && !!id && !loading && !selected;
   const tracksById = useMemo(() => new Map(allTracks.map((t) => [t.id, t])), [allTracks]);
   const canGenerate = !!(form.title.trim() || form.genre.trim() || form.description.trim());
 
-  const selectAlbum = (a) => {
-    setSelectedId(a.id);
-    setForm(formFromAlbum(a));
-    setConfirmDelete(false);
-    clearGeneration();
-  };
-  const startCreate = () => {
-    setSelectedId('new');
-    setForm(emptyForm());
+  const selectAlbum = (a) => navigate(`/music/albums/${encodeURIComponent(a.id)}`);
+  const startCreate = () => navigate('/music/albums/new');
+
+  // Hydrate the editor form from the URL-selected album. Keyed on the id so a
+  // list refresh doesn't clobber the open form; resets run for every selection
+  // change (incl. idle / not-found) so a stray render can't land on the previous
+  // album (see Authors.jsx for the base pattern).
+  const hydratedRef = useRef(null);
+  const selectionKey = id ?? null;
+  useEffect(() => {
+    if (loading) return;
+    if (hydratedRef.current === selectionKey) return;
+    hydratedRef.current = selectionKey;
     setConfirmDelete(false);
     clearGeneration();
-  };
+    if (isCreate) setForm(emptyForm());
+    else if (selected) setForm(formFromAlbum(selected));
+  }, [selectionKey, isCreate, selected, loading]);
 
   const handleGenerateCover = async () => {
     if (isGenerating || uploadingCover) return;
@@ -216,14 +227,14 @@ export default function AlbumsManager() {
       setSaving(false);
       if (!created) return;
       setAlbums((prev) => [...prev, created].sort((a, b) => (a.title || '').localeCompare(b.title || '')));
-      setSelectedId(created.id);
+      navigate(`/music/albums/${encodeURIComponent(created.id)}`);
       toast.success(`Created "${created.title}"`);
     } else {
       // Did the track list actually change vs the loaded record?
       const original = selected?.trackIds || [];
       const trackIdsChanged = original.length !== form.trackIds.length
         || original.some((id, i) => id !== form.trackIds[i]);
-      const updated = await updateAlbum(selectedId, buildPayload({ includeTrackIds: trackIdsChanged })).catch((err) => { toast.error(err.message || 'Failed to save album'); return null; });
+      const updated = await updateAlbum(id, buildPayload({ includeTrackIds: trackIdsChanged })).catch((err) => { toast.error(err.message || 'Failed to save album'); return null; });
       setSaving(false);
       if (!updated) return;
       setAlbums((prev) => prev.map((a) => (a.id === updated.id ? updated : a)).sort((a, b) => (a.title || '').localeCompare(b.title || '')));
@@ -235,8 +246,8 @@ export default function AlbumsManager() {
     if (!selected) return;
     const prior = albums;
     setAlbums((prev) => prev.filter((a) => a.id !== selected.id));
-    setSelectedId(null);
     setConfirmDelete(false);
+    navigate('/music/albums');
     await deleteAlbum(selected.id).catch((err) => { toast.error(err.message || 'Delete failed'); setAlbums(prior); });
   };
 
@@ -272,7 +283,7 @@ export default function AlbumsManager() {
                     type="button"
                     onClick={() => selectAlbum(a)}
                     className={`w-full text-left px-2 py-2 rounded text-sm flex items-center gap-2 ${
-                      a.id === selectedId ? 'bg-port-accent/20 text-white' : 'text-gray-300 hover:bg-port-bg'
+                      a.id === id ? 'bg-port-accent/20 text-white' : 'text-gray-300 hover:bg-port-bg'
                     }`}
                   >
                     {a.coverImageUrl ? (
@@ -292,7 +303,14 @@ export default function AlbumsManager() {
         </div>
 
         <div className="bg-port-card border border-port-border rounded-lg p-4">
-          {!isCreate && !selected ? (
+          {notFound ? (
+            <div className="text-gray-500 text-sm">
+              That album could not be found — it may have been deleted.{' '}
+              <button type="button" onClick={() => navigate('/music/albums')} className="text-port-accent hover:underline">
+                Back to albums
+              </button>
+            </div>
+          ) : !isCreate && !selected ? (
             <div className="text-gray-500 text-sm">Select an album to edit, or create a new one.</div>
           ) : (
             <div className="space-y-3">
diff --git a/client/src/components/music/ArtistsManager.jsx b/client/src/components/music/ArtistsManager.jsx
index 13cc94d2f..96b25e1a1 100644
--- a/client/src/components/music/ArtistsManager.jsx
+++ b/client/src/components/music/ArtistsManager.jsx
@@ -8,6 +8,7 @@
  */
 
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
 import { Plus, Loader2, Trash2, Save, Upload, ImageIcon, Sparkles, X } from 'lucide-react';
 import toast from '../ui/Toast';
 import GalleryImagePicker from '../imageGen/GalleryImagePicker';
@@ -58,10 +59,13 @@ function Field({ label, hint, children }) {
 }
 
 export default function ArtistsManager() {
+  const navigate = useNavigate();
+  // Selection lives in the URL (`/music/artists/:id`, `/music/artists/new`) so
+  // it's deep-linkable and reload-safe. `id === 'new'` is create mode; a real id
+  // is edit mode; absent is idle.
+  const { id } = useParams();
   const [artists, setArtists] = useState([]);
   const [loading, setLoading] = useState(true);
-  // selectedId === 'new' is create mode; a real id is edit mode; null is idle.
-  const [selectedId, setSelectedId] = useState(null);
   const [form, setForm] = useState(emptyForm);
   const [saving, setSaving] = useState(false);
   const [confirmDelete, setConfirmDelete] = useState(false);
@@ -164,26 +168,32 @@ export default function ArtistsManager() {
       .finally(() => setLoading(false));
   }, []);
 
-  const isCreate = selectedId === 'new';
+  const isCreate = id === 'new';
   const selected = useMemo(
-    () => (isCreate || !selectedId ? null : artists.find((a) => a.id === selectedId) || null),
-    [artists, selectedId, isCreate],
+    () => (isCreate || !id ? null : artists.find((a) => a.id === id) || null),
+    [artists, id, isCreate],
   );
+  const notFound = !isCreate && !!id && !loading && !selected;
   const canGenerate = !!(form.physicalDescription.trim() || form.portraitStyle.trim());
 
-  const selectArtist = (a) => {
-    setSelectedId(a.id);
-    setForm(formFromArtist(a));
-    setConfirmDelete(false);
-    clearGeneration();
-  };
+  const selectArtist = (a) => navigate(`/music/artists/${encodeURIComponent(a.id)}`);
+  const startCreate = () => navigate('/music/artists/new');
 
-  const startCreate = () => {
-    setSelectedId('new');
-    setForm(emptyForm());
+  // Hydrate the editor form from the URL-selected artist. Keyed on the id so a
+  // list refresh doesn't clobber the open form; resets run for every selection
+  // change (incl. idle / not-found) so a stray render can't land on the previous
+  // artist (see Authors.jsx for the base pattern).
+  const hydratedRef = useRef(null);
+  const selectionKey = id ?? null;
+  useEffect(() => {
+    if (loading) return;
+    if (hydratedRef.current === selectionKey) return;
+    hydratedRef.current = selectionKey;
     setConfirmDelete(false);
     clearGeneration();
-  };
+    if (isCreate) setForm(emptyForm());
+    else if (selected) setForm(formFromArtist(selected));
+  }, [selectionKey, isCreate, selected, loading]);
 
   const handleSave = async () => {
     const name = form.name.trim();
@@ -198,10 +208,10 @@ export default function ArtistsManager() {
       setSaving(false);
       if (!created) return;
       setArtists((prev) => [...prev, created].sort((a, b) => (a.name || '').localeCompare(b.name || '')));
-      setSelectedId(created.id);
+      navigate(`/music/artists/${encodeURIComponent(created.id)}`);
       toast.success(`Created "${created.name}"`);
     } else {
-      const updated = await updateArtist(selectedId, payload).catch((err) => {
+      const updated = await updateArtist(id, payload).catch((err) => {
         toast.error(err.message || 'Failed to save artist');
         return null;
       });
@@ -218,8 +228,8 @@ export default function ArtistsManager() {
     if (!selected) return;
     const prior = artists;
     setArtists((prev) => prev.filter((a) => a.id !== selected.id));
-    setSelectedId(null);
     setConfirmDelete(false);
+    navigate('/music/artists');
     await deleteArtist(selected.id).catch((err) => {
       toast.error(err.message || 'Delete failed');
       setArtists(prior);
@@ -257,7 +267,7 @@ export default function ArtistsManager() {
                     type="button"
                     onClick={() => selectArtist(a)}
                     className={`w-full text-left px-3 py-2 rounded text-sm truncate ${
-                      a.id === selectedId ? 'bg-port-accent/20 text-white' : 'text-gray-300 hover:bg-port-bg'
+                      a.id === id ? 'bg-port-accent/20 text-white' : 'text-gray-300 hover:bg-port-bg'
                     }`}
                   >
                     {a.name}
@@ -270,7 +280,14 @@ export default function ArtistsManager() {
         </div>
 
         <div className="bg-port-card border border-port-border rounded-lg p-4">
-          {!isCreate && !selected ? (
+          {notFound ? (
+            <div className="text-gray-500 text-sm">
+              That artist could not be found — it may have been deleted.{' '}
+              <button type="button" onClick={() => navigate('/music/artists')} className="text-port-accent hover:underline">
+                Back to artists
+              </button>
+            </div>
+          ) : !isCreate && !selected ? (
             <div className="text-gray-500 text-sm">Select an artist to edit, or create a new one.</div>
           ) : (
             <div className="space-y-3">
diff --git a/client/src/components/music/TracksManager.jsx b/client/src/components/music/TracksManager.jsx
index 3d2582b4f..0ca879e29 100644
--- a/client/src/components/music/TracksManager.jsx
+++ b/client/src/components/music/TracksManager.jsx
@@ -13,6 +13,7 @@
  */
 
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
 import { Plus, Loader2, Trash2, Save, Upload, Music2, Library } from 'lucide-react';
 import toast from '../ui/Toast';
 import { formatTimecode } from '../../utils/formatters';
@@ -55,9 +56,12 @@ function Field({ label, hint, children }) {
 }
 
 export default function TracksManager() {
+  const navigate = useNavigate();
+  // Selection lives in the URL (`/music/tracks/:id`, `/music/tracks/new`) so it's
+  // deep-linkable and reload-safe. `id === 'new'` = create; a real id = edit.
+  const { id } = useParams();
   const [tracks, setTracks] = useState([]);
   const [loading, setLoading] = useState(true);
-  const [selectedId, setSelectedId] = useState(null); // 'new' | id | null
   const [form, setForm] = useState(emptyForm);
   const [saving, setSaving] = useState(false);
   const [confirmDelete, setConfirmDelete] = useState(false);
@@ -90,11 +94,12 @@ export default function TracksManager() {
       .finally(() => setLoading(false));
   }, []);
 
-  const isCreate = selectedId === 'new';
+  const isCreate = id === 'new';
   const selected = useMemo(
-    () => (isCreate || !selectedId ? null : tracks.find((t) => t.id === selectedId) || null),
-    [tracks, selectedId, isCreate],
+    () => (isCreate || !id ? null : tracks.find((t) => t.id === id) || null),
+    [tracks, id, isCreate],
   );
+  const notFound = !isCreate && !!id && !loading && !selected;
   // The persisted track (for gen metadata + the audio player, which need a saved id).
   const persisted = selected;
 
@@ -110,19 +115,26 @@ export default function TracksManager() {
     setRemix(null);
   };
 
-  const selectTrack = (t) => {
-    setSelectedId(t.id);
-    selectedIdRef.current = t.id;
-    setForm(formFromTrack(t));
-    resetTrackViewState();
-  };
-
-  const startCreate = () => {
-    setSelectedId('new');
-    selectedIdRef.current = 'new';
-    setForm(emptyForm());
+  const selectTrack = (t) => navigate(`/music/tracks/${encodeURIComponent(t.id)}`);
+  const startCreate = () => navigate('/music/tracks/new');
+
+  // Hydrate the editor form from the URL-selected track. Keyed on the id so a
+  // list refresh (audio upload, generate, upsertLocal) doesn't clobber the open
+  // form; `selectedIdRef` is kept in sync so async handlers can still detect a
+  // selection change that happened mid-round-trip. Per-track view state is reset
+  // for every selection change (incl. idle / not-found) so a modal/remix left
+  // open can't drive the previous track (see Authors.jsx for the base pattern).
+  const hydratedRef = useRef(null);
+  const selectionKey = id ?? null;
+  useEffect(() => {
+    if (loading) return;
+    if (hydratedRef.current === selectionKey) return;
+    hydratedRef.current = selectionKey;
+    selectedIdRef.current = selectionKey;
     resetTrackViewState();
-  };
+    if (isCreate) setForm(emptyForm());
+    else if (selected) setForm(formFromTrack(selected));
+  }, [selectionKey, isCreate, selected, loading]);
 
   const upsertLocal = (track) => {
     setTracks((prev) => {
@@ -140,8 +152,10 @@ export default function TracksManager() {
       setSaving(false);
       if (!created) return;
       upsertLocal(created);
-      setSelectedId(created.id);
+      // Point the async-handler ref at the new id immediately (the hydration
+      // effect also sets it, but not until after navigation re-renders).
       selectedIdRef.current = created.id;
+      navigate(`/music/tracks/${encodeURIComponent(created.id)}`);
       toast.success(`Created "${created.title}"`);
     } else {
       // Drop `albumId` from a metadata-only update unless the user actually
@@ -151,7 +165,7 @@ export default function TracksManager() {
       // remains the primary place to (re)order an album's tracks.
       const payload = { ...form, title };
       if ((selected?.albumId || '') === form.albumId) delete payload.albumId;
-      const updated = await updateTrack(selectedId, payload).catch((err) => { toast.error(err.message || 'Failed to save track'); return null; });
+      const updated = await updateTrack(id, payload).catch((err) => { toast.error(err.message || 'Failed to save track'); return null; });
       setSaving(false);
       if (!updated) return;
       upsertLocal(updated);
@@ -163,8 +177,8 @@ export default function TracksManager() {
     if (!selected) return;
     const prior = tracks;
     setTracks((prev) => prev.filter((t) => t.id !== selected.id));
-    setSelectedId(null);
     resetTrackViewState();
+    navigate('/music/tracks');
     await deleteTrack(selected.id).catch((err) => { toast.error(err.message || 'Delete failed'); setTracks(prior); });
   };
 
@@ -298,7 +312,7 @@ export default function TracksManager() {
                     type="button"
                     onClick={() => selectTrack(t)}
                     className={`w-full text-left px-3 py-2 rounded text-sm truncate flex items-center gap-2 ${
-                      t.id === selectedId ? 'bg-port-accent/20 text-white' : 'text-gray-300 hover:bg-port-bg'
+                      t.id === id ? 'bg-port-accent/20 text-white' : 'text-gray-300 hover:bg-port-bg'
                     }`}
                   >
                     <Music2 size={13} className={t.audioFilename ? 'text-port-success shrink-0' : 'text-gray-600 shrink-0'} aria-hidden="true" />
@@ -312,7 +326,14 @@ export default function TracksManager() {
         </div>
 
         <div className="bg-port-card border border-port-border rounded-lg p-4">
-          {!isCreate && !selected ? (
+          {notFound ? (
+            <div className="text-gray-500 text-sm">
+              That track could not be found — it may have been deleted.{' '}
+              <button type="button" onClick={() => navigate('/music/tracks')} className="text-port-accent hover:underline">
+                Back to tracks
+              </button>
+            </div>
+          ) : !isCreate && !selected ? (
             <div className="text-gray-500 text-sm">Select a track to edit, or create a new one.</div>
           ) : (
             <div className="space-y-3">
diff --git a/client/src/components/pipeline/ArcCanvas.jsx b/client/src/components/pipeline/ArcCanvas.jsx
index c173aff51..c41fa8139 100644
--- a/client/src/components/pipeline/ArcCanvas.jsx
+++ b/client/src/components/pipeline/ArcCanvas.jsx
@@ -33,8 +33,8 @@ import {
   Clock,
 } from 'lucide-react';
 import toast from '../ui/Toast';
+import ConfirmButtonPair from '../ui/ConfirmButtonPair';
 import { timeAgo } from '../../utils/formatters';
-import { useArmedAction } from '../../hooks/useArmedAction';
 import { useLockToggle } from '../../hooks/useLockToggle';
 import MediaImage from '../MediaImage';
 import {
@@ -2693,9 +2693,11 @@ function SeasonActions({
 
 function IssueRow({ issue, seasons, onIssuesUpdate }) {
   const [reassigning, setReassigning] = useState(false);
+  const [confirmingDelete, setConfirmingDelete] = useState(false);
   const cover = issueCoverRecord(issue);
 
   const runDelete = async () => {
+    setConfirmingDelete(false);
     const ok = await deletePipelineIssue(issue.id).catch((err) => {
       toast.error(err.message || 'Delete failed');
       return null;
@@ -2703,12 +2705,6 @@ function IssueRow({ issue, seasons, onIssuesUpdate }) {
     if (ok == null) return;
     onIssuesUpdate((prev) => prev.filter((i) => i.id !== issue.id));
   };
-  const [armDelete, armedDelete] = useArmedAction(runDelete);
-  const handleDelete = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    armedDelete();
-  };
 
   const handleReassign = async (newSeasonId) => {
     if (newSeasonId === (issue.seasonId || '')) return;
@@ -2751,29 +2747,41 @@ function IssueRow({ issue, seasons, onIssuesUpdate }) {
           <p className="text-[10px] text-gray-600">updated {timeAgo(issue.updatedAt)}</p>
         </div>
       </Link>
-      <div className="px-2 pb-2 flex items-center gap-1.5">
-        <select
-          value={issue.seasonId || ''}
-          onChange={(e) => handleReassign(e.target.value)}
-          disabled={reassigning}
-          title="Move to a different season"
-          className="min-w-0 flex-1 text-[10px] bg-port-card border border-port-border rounded text-gray-300 opacity-70 group-hover:opacity-100 focus:opacity-100"
-        >
-          <option value="">— ungrouped —</option>
-          {seasons.map((s) => (
-            <option key={s.id} value={s.id}>V{s.number}: {s.title}</option>
-          ))}
-        </select>
-        <button
-          type="button"
-          onClick={handleDelete}
-          className={`p-1 rounded border border-port-border bg-port-card ${armDelete ? 'text-port-error opacity-100' : 'text-gray-500 hover:text-port-error opacity-70 group-hover:opacity-100 focus:opacity-100'}`}
-          aria-label={armDelete ? `Confirm delete ${issue.title}` : `Delete ${issue.title}`}
-          title={armDelete ? 'Click again to confirm' : 'Delete issue / episode'}
-        >
-          <Trash2 size={12} />
-        </button>
-      </div>
+      {confirmingDelete ? (
+        <div className="px-2 pb-2">
+          <ConfirmButtonPair
+            prompt="Delete?"
+            className="justify-end"
+            ariaLabel={`Confirm delete ${issue.title}`}
+            onConfirm={runDelete}
+            onCancel={() => setConfirmingDelete(false)}
+          />
+        </div>
+      ) : (
+        <div className="px-2 pb-2 flex items-center gap-1.5">
+          <select
+            value={issue.seasonId || ''}
+            onChange={(e) => handleReassign(e.target.value)}
+            disabled={reassigning}
+            title="Move to a different season"
+            className="min-w-0 flex-1 text-[10px] bg-port-card border border-port-border rounded text-gray-300 opacity-70 group-hover:opacity-100 focus:opacity-100"
+          >
+            <option value="">— ungrouped —</option>
+            {seasons.map((s) => (
+              <option key={s.id} value={s.id}>V{s.number}: {s.title}</option>
+            ))}
+          </select>
+          <button
+            type="button"
+            onClick={() => setConfirmingDelete(true)}
+            className="p-1 rounded border border-port-border bg-port-card text-gray-500 hover:text-port-error opacity-70 group-hover:opacity-100 focus:opacity-100"
+            aria-label={`Delete ${issue.title}`}
+            title="Delete issue / episode"
+          >
+            <Trash2 size={12} />
+          </button>
+        </div>
+      )}
     </li>
   );
 }
diff --git a/client/src/components/pipeline/stages/AudioStage.jsx b/client/src/components/pipeline/stages/AudioStage.jsx
index 577ca24a5..bd458781b 100644
--- a/client/src/components/pipeline/stages/AudioStage.jsx
+++ b/client/src/components/pipeline/stages/AudioStage.jsx
@@ -14,6 +14,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Loader2, Sparkles, Wand2, Mic, Music, Upload, Trash2, ListMusic } from 'lucide-react';
 import toast from '../../ui/Toast';
+import InlineConfirmRow from '../../ui/InlineConfirmRow';
 import VoicePicker from '../../voice/VoicePicker';
 import {
   extractPipelineAudioLines,
@@ -72,14 +73,9 @@ export default function AudioStage({ issue, onStageUpdate }) {
   // outstanding at the moment of call.
   const pendingSavesRef = useRef(new Map());
 
-  // Two-click arm pattern (no window.confirm) for the destructive
-  // re-extract path. First click flips the label; second click within 5s
-  // commits the replace.
-  const [extractArmed, setExtractArmed] = useState(false);
-  const armTimerRef = useRef(null);
-  useEffect(() => () => {
-    if (armTimerRef.current) clearTimeout(armTimerRef.current);
-  }, []);
+  // Inline confirm (no window.confirm, no two-click-arm) for the destructive
+  // re-extract path — an explicit Replace/Cancel row renders near the button.
+  const [confirmingExtract, setConfirmingExtract] = useState(false);
 
   const [musicLibrary, setMusicLibrary] = useState(null);
   const [musicLibraryLoading, setMusicLibraryLoading] = useState(false);
@@ -490,24 +486,21 @@ export default function AudioStage({ issue, onStageUpdate }) {
   const storyboardSceneCount = (issue.stages?.storyboards?.scenes || []).length;
   const canExtract = storyboardSceneCount > 0;
 
-  const handleExtract = async () => {
+  const handleExtract = () => {
     if (!canExtract) {
       toast.error('Generate Storyboards first — audio lines come from the dialogue extracted there.');
       return;
     }
-    const needsConfirm = lines.length > 0;
-    if (needsConfirm && !extractArmed) {
-      setExtractArmed(true);
-      toast.warning(`This will replace ${lines.length} existing line${lines.length === 1 ? '' : 's'} (rendered audio is preserved for unchanged lines). Click again to confirm.`);
-      if (armTimerRef.current) clearTimeout(armTimerRef.current);
-      armTimerRef.current = setTimeout(() => {
-        armTimerRef.current = null;
-        setExtractArmed(false);
-      }, 5000);
+    if (lines.length > 0) {
+      setConfirmingExtract(true);
       return;
     }
-    if (armTimerRef.current) { clearTimeout(armTimerRef.current); armTimerRef.current = null; }
-    setExtractArmed(false);
+    void runExtract();
+  };
+
+  const runExtract = async () => {
+    const needsConfirm = lines.length > 0;
+    setConfirmingExtract(false);
     setExtracting(true);
     const result = await extractPipelineAudioLines(issue.id, { force: needsConfirm }).catch((err) => {
       toast.error(err.message || 'Extract failed');
@@ -645,13 +638,21 @@ export default function AudioStage({ issue, onStageUpdate }) {
             className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-port-card border border-port-border text-white text-sm hover:border-port-accent/50 disabled:opacity-40"
           >
             {extracting ? <Loader2 size={14} className="animate-spin" /> : <Wand2 size={14} />}
-            {extractArmed
-              ? 'Click again to replace'
-              : (lines.length > 0 ? 'Re-extract from storyboards' : 'Extract lines from storyboards')}
+            {lines.length > 0 ? 'Re-extract from storyboards' : 'Extract lines from storyboards'}
           </button>
         </div>
       </header>
 
+      {confirmingExtract && (
+        <InlineConfirmRow
+          tone="warning"
+          question={`Replace ${lines.length} existing line${lines.length === 1 ? '' : 's'} with a fresh extract? Rendered audio is preserved for unchanged lines.`}
+          confirmText="Replace"
+          onConfirm={() => void runExtract()}
+          onCancel={() => setConfirmingExtract(false)}
+        />
+      )}
+
       {/* Whole-episode audio mode (#863) — drives the episode's non-dialogue
           audio at stitch time. */}
       <section className="p-3 bg-port-card border border-port-border rounded-lg">
diff --git a/client/src/components/pipeline/stages/ComicPagesStage.jsx b/client/src/components/pipeline/stages/ComicPagesStage.jsx
index e2c9fbe36..526930f97 100644
--- a/client/src/components/pipeline/stages/ComicPagesStage.jsx
+++ b/client/src/components/pipeline/stages/ComicPagesStage.jsx
@@ -1,7 +1,7 @@
 import { useRef, useState } from 'react';
 import { Plus, Trash2, Sparkles, Loader2, Wand2, WandSparkles, ImagePlus, Layers } from 'lucide-react';
 import toast from '../../ui/Toast';
-import { useArmedAction } from '../../../hooks/useArmedAction';
+import InlineConfirmRow from '../../ui/InlineConfirmRow';
 import {
   generatePipelineVisualImage,
   generatePipelineComicPage,
@@ -114,18 +114,19 @@ export default function ComicPagesStage({ issue, onStageUpdate, actionsGated = f
     onStageUpdate?.('comicPages', result.stage, result.issue);
     toast.success(`Extracted ${result.pageCount} page${result.pageCount === 1 ? '' : 's'} / ${result.panelCount} panel${result.panelCount === 1 ? '' : 's'}`);
   };
-  const [extractArmed, fireExtract] = useArmedAction(runExtract);
+  const [confirmingExtract, setConfirmingExtract] = useState(false);
   const onExtractClick = () => {
-    // Nothing to clobber on a fresh stage — extract immediately. The two-click
-    // arm exists only to guard a destructive replace of existing pages.
+    // Nothing to clobber on a fresh stage — extract immediately. The inline
+    // confirm only guards a destructive replace of existing pages.
     if (pages.length === 0) {
       runExtract();
       return;
     }
-    if (!extractArmed) {
-      toast.warning(`This will replace ${pages.length} existing page${pages.length === 1 ? '' : 's'}. Click again to confirm.`);
-    }
-    fireExtract();
+    setConfirmingExtract(true);
+  };
+  const confirmExtract = () => {
+    setConfirmingExtract(false);
+    runExtract();
   };
 
   const handleGeneratePage = async (pi) => {
@@ -276,7 +277,7 @@ export default function ComicPagesStage({ issue, onStageUpdate, actionsGated = f
             className="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-port-card border border-port-border text-white text-sm hover:border-port-accent/50 disabled:opacity-40 disabled:cursor-not-allowed"
           >
             {extracting ? <Loader2 size={14} className="animate-spin" /> : <Wand2 size={14} />}
-            {extractArmed ? 'Click again to replace' : 'From comic script'}
+            From comic script
           </button>
           <PromptCountInput id="comic-prompt-count" value={promptCount} onChange={setPromptCount} />
           <button
@@ -289,6 +290,16 @@ export default function ComicPagesStage({ issue, onStageUpdate, actionsGated = f
         </div>
       </div>
 
+      {confirmingExtract && (
+        <InlineConfirmRow
+          tone="warning"
+          question={`Replace ${pages.length} existing page${pages.length === 1 ? '' : 's'} with a fresh extract from the comic script?`}
+          confirmText="Replace"
+          onConfirm={confirmExtract}
+          onCancel={() => setConfirmingExtract(false)}
+        />
+      )}
+
       {pages.length === 0 ? (
         <p className="text-xs text-gray-600 italic">No pages yet. Start with one and add panels.</p>
       ) : (
diff --git a/client/src/components/pipeline/stages/StoryboardsStage.jsx b/client/src/components/pipeline/stages/StoryboardsStage.jsx
index 986a6d734..373b423c9 100644
--- a/client/src/components/pipeline/stages/StoryboardsStage.jsx
+++ b/client/src/components/pipeline/stages/StoryboardsStage.jsx
@@ -16,9 +16,10 @@
  * extractor against the corresponding text stage and replace the list.
  */
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { Plus, Trash2, Sparkles, Loader2, Wand2, Film, WandSparkles, Shirt, Layers } from 'lucide-react';
 import toast from '../../ui/Toast';
+import InlineConfirmRow from '../../ui/InlineConfirmRow';
 import { SHOT_TYPES, SCREEN_DIRECTIONS, SHOT_TYPE_LABELS, SCREEN_DIRECTION_LABELS } from '../../../lib/shotGrammar';
 import { sceneShotWarnings } from '../../../lib/shotContinuity';
 import {
@@ -61,13 +62,10 @@ export default function StoryboardsStage({ issue, series, onStageUpdate, actions
   // would race when the user starts a second render before the first settles.
   const [renderingShots, setRenderingShots] = useState(() => new Set());
   const [extractingFrom, setExtractingFrom] = useState(null);
-  // Holds the active arm-timer id so an unmount or a fresh arm clears the
-  // pending disarm — otherwise the 5s callback fires setExtractingFrom on
-  // an unmounted component (React warning + small leak).
-  const armTimerRef = useRef(null);
-  useEffect(() => () => {
-    if (armTimerRef.current) clearTimeout(armTimerRef.current);
-  }, []);
+  // Which source ('teleplay' | 'prose') has a pending replace-confirm showing.
+  // Separate from `extractingFrom` (which is purely the in-flight source) so the
+  // inline confirm never gets conflated with an in-progress extract.
+  const [confirmingFrom, setConfirmingFrom] = useState(null);
 
   // Canon characters (with wardrobes) live on the linked universe — load it
   // and derive the pickable set so each scene can offer a per-character
@@ -80,10 +78,10 @@ export default function StoryboardsStage({ issue, series, onStageUpdate, actions
 
   const teleplayReady = !!(issue.stages?.teleplay?.output || '').trim();
   const proseReady = !!(issue.stages?.prose?.output || '').trim();
-  // Any non-null, non-arm value means an extract POST is in flight — both
-  // buttons must lock out concurrent submits so racing requests can't
-  // overwrite each other's results (last-write-wins).
-  const extractInFlight = !!extractingFrom && !extractingFrom.startsWith('arm:');
+  // A non-null value means an extract POST is in flight — both buttons must lock
+  // out concurrent submits so racing requests can't overwrite each other's
+  // results (last-write-wins).
+  const extractInFlight = !!extractingFrom;
 
   const persist = async (nextScenes) => {
     setScenes(nextScenes);
@@ -220,31 +218,19 @@ export default function StoryboardsStage({ issue, series, onStageUpdate, actions
     toast.success(`Queued shot ${shotIdx + 1} render (${result.jobId.slice(0, 8)})`);
   };
 
-  // Replace-existing confirm uses a two-click arm pattern (no window.confirm
-  // per CLAUDE.md, no shared confirm-modal primitive in the pipeline yet).
-  // First click on a button when scenes is non-empty arms it (label flips to
-  // "Click again to replace"). Second click within 5s fires the extract.
-  const onExtractClick = async (from) => {
-    const armKey = `arm:${from}`;
-    const needsConfirm = scenes.length > 0;
-
-    if (needsConfirm && extractingFrom !== armKey) {
-      setExtractingFrom(armKey);
-      toast.warning(`This will replace ${scenes.length} existing scene${scenes.length === 1 ? '' : 's'}. Click again to confirm.`);
-      if (armTimerRef.current) clearTimeout(armTimerRef.current);
-      armTimerRef.current = setTimeout(() => {
-        armTimerRef.current = null;
-        setExtractingFrom((cur) => (cur === armKey ? null : cur));
-      }, 5000);
+  // Replacing existing scenes shows an inline confirm near the buttons (no
+  // window.confirm per CLAUDE.md, no two-click-arm — the user disliked it). A
+  // fresh stage (no scenes yet) extracts immediately.
+  const onExtractClick = (from) => {
+    if (scenes.length > 0) {
+      setConfirmingFrom(from);
       return;
     }
-    // Second click landed within the arm window — cancel the pending disarm
-    // so the post-await `setExtractingFrom(null)` is the only state flip.
-    if (armTimerRef.current) {
-      clearTimeout(armTimerRef.current);
-      armTimerRef.current = null;
-    }
+    runExtract(from);
+  };
 
+  const runExtract = async (from) => {
+    setConfirmingFrom(null);
     setExtractingFrom(from);
     const result = await extractPipelineStoryboardScenes(issue.id, {
       from,
@@ -419,7 +405,7 @@ export default function StoryboardsStage({ issue, series, onStageUpdate, actions
             {extractingFrom === 'teleplay'
               ? <Loader2 size={14} className="animate-spin" />
               : <Wand2 size={14} />}
-            {extractingFrom === 'arm:teleplay' ? 'Click again to replace' : 'From Teleplay'}
+            From Teleplay
           </button>
           <button
             type="button"
@@ -431,7 +417,7 @@ export default function StoryboardsStage({ issue, series, onStageUpdate, actions
             {extractingFrom === 'prose'
               ? <Loader2 size={14} className="animate-spin" />
               : <Wand2 size={14} />}
-            {extractingFrom === 'arm:prose' ? 'Click again to replace' : 'From prose'}
+            From prose
           </button>
           <PromptCountInput id="storyboard-prompt-count" value={promptCount} onChange={setPromptCount} />
           <button
@@ -444,6 +430,16 @@ export default function StoryboardsStage({ issue, series, onStageUpdate, actions
         </div>
       </div>
 
+      {confirmingFrom && (
+        <InlineConfirmRow
+          tone="warning"
+          question={`Replace ${scenes.length} existing scene${scenes.length === 1 ? '' : 's'} with a fresh extract from the ${confirmingFrom === 'teleplay' ? 'Teleplay' : 'prose'}?`}
+          confirmText="Replace"
+          onConfirm={() => runExtract(confirmingFrom)}
+          onCancel={() => setConfirmingFrom(null)}
+        />
+      )}
+
       {scenes.length === 0 ? (
         <p className="text-xs text-gray-600 italic">No scenes yet.</p>
       ) : (
diff --git a/client/src/components/ui/FormField.jsx b/client/src/components/ui/FormField.jsx
new file mode 100644
index 000000000..fdd01b3cc
--- /dev/null
+++ b/client/src/components/ui/FormField.jsx
@@ -0,0 +1,51 @@
+import { useId, Children, cloneElement, isValidElement } from 'react';
+
+/**
+ * Accessible config-form field wrapper.
+ *
+ * Generates a stable id via `useId()` and wires the `<label htmlFor>` to the
+ * first child input/select/textarea's `id`, so clicking the label focuses the
+ * field and screen readers announce the association (the repo's
+ * "form labels need htmlFor/id pairing" convention).
+ *
+ * Styling is caller-owned so migrating an existing field is a lossless swap:
+ * pass `className` for the wrapper and `labelClassName` to match the field's
+ * current label classes. If the first child already has an `id`, that id wins
+ * and the label points at it; otherwise the generated id is injected — either
+ * way the label/control association holds.
+ *
+ * @param {string} label - Visible label text.
+ * @param {import('react').ReactNode} [hint] - Optional hint rendered between label and field.
+ * @param {import('react').ReactNode} children - The field control(s); the first element is bound to the label.
+ * @param {string} [className] - Wrapper div className.
+ * @param {string} [labelClassName] - Label className (defaults to the common config-form label style).
+ */
+export function FormField({
+  label,
+  hint,
+  children,
+  className = '',
+  labelClassName = 'block text-sm text-gray-400 mb-1',
+}) {
+  const generatedId = useId();
+  // The label must point at whatever id the first control actually has: reuse
+  // the child's own id when present, otherwise inject the generated one.
+  let controlId = generatedId;
+  const augmented = Children.map(children, (child, i) => {
+    if (i !== 0 || !isValidElement(child)) return child;
+    if (child.props.id) {
+      controlId = child.props.id;
+      return child;
+    }
+    return cloneElement(child, { id: controlId });
+  });
+  return (
+    <div className={className}>
+      {label != null && <label htmlFor={controlId} className={labelClassName}>{label}</label>}
+      {hint != null && <p className="text-xs text-gray-500 mb-1">{hint}</p>}
+      {augmented}
+    </div>
+  );
+}
+
+export default FormField;
diff --git a/client/src/components/ui/FormField.test.jsx b/client/src/components/ui/FormField.test.jsx
new file mode 100644
index 000000000..99259cc13
--- /dev/null
+++ b/client/src/components/ui/FormField.test.jsx
@@ -0,0 +1,86 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { FormField } from './FormField';
+
+describe('FormField', () => {
+  it('associates the label with the first control via generated id', () => {
+    render(
+      <FormField label="Display Name">
+        <input defaultValue="" />
+      </FormField>
+    );
+    // getByLabelText resolves only when htmlFor/id are correctly paired.
+    const input = screen.getByLabelText('Display Name');
+    expect(input.tagName).toBe('INPUT');
+    expect(input.id).toBeTruthy();
+  });
+
+  it('focuses the field when its label is clicked', async () => {
+    const user = userEvent.setup();
+    render(
+      <FormField label="Email">
+        <input defaultValue="" />
+      </FormField>
+    );
+    await user.click(screen.getByText('Email'));
+    expect(screen.getByLabelText('Email')).toHaveFocus();
+  });
+
+  it('works with a select control', () => {
+    render(
+      <FormField label="Type">
+        <select defaultValue="a">
+          <option value="a">A</option>
+          <option value="b">B</option>
+        </select>
+      </FormField>
+    );
+    expect(screen.getByLabelText('Type').tagName).toBe('SELECT');
+  });
+
+  it('injects the id into the first child only, leaving siblings untouched', () => {
+    render(
+      <FormField label="Notes">
+        <textarea defaultValue="" />
+        <p>One per line</p>
+      </FormField>
+    );
+    const field = screen.getByLabelText('Notes');
+    expect(field.tagName).toBe('TEXTAREA');
+    expect(screen.getByText('One per line').id).toBe('');
+  });
+
+  it('binds the label to an explicit child id (association still holds)', () => {
+    render(
+      <FormField label="Custom">
+        <input id="my-fixed-id" defaultValue="" />
+      </FormField>
+    );
+    // The caller-provided id is preserved AND the label points at it, so the
+    // association is made without clobbering the explicit id.
+    const input = screen.getByLabelText('Custom');
+    expect(input.id).toBe('my-fixed-id');
+  });
+
+  it('applies caller-provided wrapper and label classes', () => {
+    render(
+      <FormField label="Styled" className="wrap-x" labelClassName="lbl-x">
+        <input defaultValue="" />
+      </FormField>
+    );
+    const label = screen.getByText('Styled');
+    expect(label).toHaveClass('lbl-x');
+    expect(label.parentElement).toHaveClass('wrap-x');
+  });
+
+  it('renders a ReactNode label (e.g. badge + text)', () => {
+    render(
+      <FormField label={<><span>●</span>Light</>}>
+        <input defaultValue="" />
+      </FormField>
+    );
+    expect(screen.getByLabelText('●Light')).toBeTruthy();
+  });
+});
diff --git a/client/src/components/ui/PageSkeleton.jsx b/client/src/components/ui/PageSkeleton.jsx
new file mode 100644
index 000000000..79650b1c0
--- /dev/null
+++ b/client/src/components/ui/PageSkeleton.jsx
@@ -0,0 +1,44 @@
+// Lightweight full-page loading skeleton for the DevTools integration pages
+// (DataDog / Jira / GitHub). Reserves the header + `[1fr_360px]` card-grid
+// dimensions those pages render once loaded so the first paint doesn't reflow.
+// Mirrors the WidgetSkeleton pattern (port design tokens + animate-pulse) and
+// renders inside Layout's scrolling main — no full-height wrapper.
+export default function PageSkeleton({
+  titleWidthClass = 'w-48',
+  showAction = true,
+  cards = 3,
+  sidebar = true,
+}) {
+  return (
+    <div className="p-4 sm:p-6" role="status" aria-busy="true" aria-label="Loading">
+      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6">
+        <div className={`h-8 rounded bg-port-card animate-pulse ${titleWidthClass}`} />
+        {showAction && <div className="h-10 w-full sm:w-48 rounded bg-port-card animate-pulse" />}
+      </div>
+      <div className={`grid grid-cols-1 gap-6 items-start ${sidebar ? 'lg:grid-cols-[1fr_360px]' : ''}`}>
+        <div className="space-y-4">
+          {Array.from({ length: cards }).map((_, i) => (
+            <div
+              key={i}
+              className="rounded-lg border border-port-border bg-port-card p-4 sm:p-6 animate-pulse"
+            >
+              <div className="h-5 w-2/3 rounded bg-port-border mb-3" />
+              <div className="h-4 w-1/2 rounded bg-port-border mb-2" />
+              <div className="h-4 w-1/3 rounded bg-port-border" />
+            </div>
+          ))}
+        </div>
+        {sidebar && (
+          <div className="rounded-lg border border-port-border bg-port-card p-4 sm:p-6 animate-pulse">
+            <div className="h-5 w-1/3 rounded bg-port-border mb-4" />
+            <div className="space-y-2">
+              <div className="h-4 w-full rounded bg-port-border" />
+              <div className="h-4 w-5/6 rounded bg-port-border" />
+              <div className="h-4 w-4/6 rounded bg-port-border" />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/components/writers-room/ExercisePanel.jsx b/client/src/components/writers-room/ExercisePanel.jsx
index d0af0c318..9a482fe29 100644
--- a/client/src/components/writers-room/ExercisePanel.jsx
+++ b/client/src/components/writers-room/ExercisePanel.jsx
@@ -8,6 +8,7 @@ import {
   discardWritersRoomExercise,
 } from '../../services/apiWritersRoom';
 import { countWords, formatCountdown } from '../../utils/formatters';
+import { FormField } from '../ui/FormField';
 
 const DURATION_PRESETS = [
   { label: '5 min', seconds: 300 },
@@ -145,10 +146,10 @@ export default function ExercisePanel({ activeWork, onClose }) {
             </div>
           </div>
 
-          <div>
-            <label className="block text-[10px] uppercase tracking-wider text-gray-500 mb-1">
-              Prompt {activeWork && <span className="text-gray-600">(or leave blank to free-write {activeWork.title})</span>}
-            </label>
+          <FormField
+            labelClassName="block text-[10px] uppercase tracking-wider text-gray-500 mb-1"
+            label={<>Prompt {activeWork && <span className="text-gray-600">(or leave blank to free-write {activeWork.title})</span>}</>}
+          >
             <textarea
               value={prompt}
               onChange={(e) => setPrompt(e.target.value)}
@@ -156,7 +157,7 @@ export default function ExercisePanel({ activeWork, onClose }) {
               rows={2}
               className="w-full bg-port-bg border border-port-border rounded px-2 py-1 text-xs"
             />
-          </div>
+          </FormField>
 
           <button
             onClick={start}
diff --git a/client/src/components/writers-room/LibraryPane.jsx b/client/src/components/writers-room/LibraryPane.jsx
index 4fd51d17f..5faf29f05 100644
--- a/client/src/components/writers-room/LibraryPane.jsx
+++ b/client/src/components/writers-room/LibraryPane.jsx
@@ -1,7 +1,8 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { Folder, FolderPlus, FilePlus, FileText, ChevronDown, ChevronRight, Trash2, GripVertical, PanelLeftClose } from 'lucide-react';
 import { DndContext, DragOverlay, PointerSensor, useDraggable, useDroppable, useSensor, useSensors } from '@dnd-kit/core';
 import toast from '../ui/Toast';
+import ConfirmButtonPair from '../ui/ConfirmButtonPair';
 import {
   createWritersRoomFolder,
   deleteWritersRoomFolder,
@@ -9,6 +10,7 @@ import {
   deleteWritersRoomWork,
   updateWritersRoomWork,
 } from '../../services/apiWritersRoom';
+import { useConfirmDelete } from '../../hooks/useConfirmDelete';
 import { KIND_LABELS } from './labels';
 
 const UNFILED_DROP_ID = 'wr-unfiled';
@@ -20,11 +22,9 @@ export default function LibraryPane({ folders, works, activeWorkId, onSelectWork
   const [creatingWork, setCreatingWork] = useState(null); // folderId or 'unfiled'
   const [workTitle, setWorkTitle] = useState('');
   const [workKind, setWorkKind] = useState('short-story');
-  // Two-click confirm: first click arms the button, second deletes.
-  // Cleared automatically after 4s to avoid leaving a pending arm.
-  const [armedDelete, setArmedDelete] = useState(null);
-  const armTimerRef = useRef(null);
-  useEffect(() => () => clearTimeout(armTimerRef.current), []);
+  // Inline delete confirm (no two-click-arm, no toast re-arm) — one row armed at
+  // a time, keyed by `work:<id>` / `folder:<id>`.
+  const { isConfirming, requestDelete, cancelDelete, confirmDelete } = useConfirmDelete();
 
   const grouped = useMemo(() => {
     const byFolder = new Map();
@@ -72,37 +72,16 @@ export default function LibraryPane({ folders, works, activeWorkId, onSelectWork
     onSelectWork?.(work.id);
   };
 
-  const armDelete = (key) => {
-    setArmedDelete(key);
-    clearTimeout(armTimerRef.current);
-    armTimerRef.current = setTimeout(
-      () => setArmedDelete((current) => (current === key ? null : current)),
-      4000,
-    );
-  };
-
-  const handleDeleteFolder = async (id, name) => {
-    if (armedDelete !== `folder:${id}`) {
-      armDelete(`folder:${id}`);
-      toast(`Click again to delete folder "${name}"`);
-      return;
-    }
-    setArmedDelete(null);
+  const handleDeleteFolder = (id) => confirmDelete(async () => {
     await deleteWritersRoomFolder(id).catch((err) => toast.error(`Delete failed: ${err.message}`));
     onRefresh?.();
-  };
+  });
 
-  const handleDeleteWork = async (id, title) => {
-    if (armedDelete !== `work:${id}`) {
-      armDelete(`work:${id}`);
-      toast(`Click again to delete "${title}"`);
-      return;
-    }
-    setArmedDelete(null);
+  const handleDeleteWork = (id) => confirmDelete(async () => {
     await deleteWritersRoomWork(id).catch((err) => toast.error(`Delete failed: ${err.message}`));
     if (activeWorkId === id) onSelectWork?.(null);
     onRefresh?.();
-  };
+  });
 
   // PointerSensor with a small activation distance so a quick click still
   // selects the work — only an actual drag gesture starts a DnD operation.
@@ -137,9 +116,11 @@ export default function LibraryPane({ folders, works, activeWorkId, onSelectWork
       key={work.id}
       work={work}
       isActive={work.id === activeWorkId}
-      armedDelete={armedDelete === `work:${work.id}`}
+      confirming={isConfirming(`work:${work.id}`)}
       onSelect={() => onSelectWork?.(work.id)}
-      onDelete={() => handleDeleteWork(work.id, work.title)}
+      onRequestDelete={() => requestDelete(`work:${work.id}`)}
+      onConfirmDelete={() => handleDeleteWork(work.id)}
+      onCancelDelete={cancelDelete}
     />
   );
 
@@ -239,10 +220,12 @@ export default function LibraryPane({ folders, works, activeWorkId, onSelectWork
               works={grouped.get(folder.id) || []}
               isOpen={!!openFolders[folder.id]}
               isDragging={!!draggingWork}
-              armedDelete={armedDelete === `folder:${folder.id}`}
+              confirming={isConfirming(`folder:${folder.id}`)}
               onToggle={() => toggleFolder(folder.id)}
               onCreateWork={() => { setCreatingWork(folder.id); setCreatingFolder(false); }}
-              onDelete={() => handleDeleteFolder(folder.id, folder.name)}
+              onRequestDelete={() => requestDelete(`folder:${folder.id}`)}
+              onConfirmDelete={() => handleDeleteFolder(folder.id)}
+              onCancelDelete={cancelDelete}
               renderWorkRow={renderWorkRow}
             />
           ))}
@@ -263,7 +246,7 @@ export default function LibraryPane({ folders, works, activeWorkId, onSelectWork
 
 // ---------- DnD-aware subcomponents ----------
 
-function WorkRow({ work, isActive, armedDelete, onSelect, onDelete }) {
+function WorkRow({ work, isActive, confirming, onSelect, onRequestDelete, onConfirmDelete, onCancelDelete }) {
   const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
     id: `work:${work.id}`,
     data: { work },
@@ -292,18 +275,25 @@ function WorkRow({ work, isActive, armedDelete, onSelect, onDelete }) {
           <span className="text-[10px] text-gray-500 uppercase">{work.wordCount} w</span>
         </button>
       </div>
-      <button
-        onClick={onDelete}
-        className={`absolute right-1 top-1.5 p-0.5 transition-opacity ${
-          armedDelete
-            ? 'opacity-100 text-port-error'
-            : 'opacity-40 sm:opacity-0 group-hover:opacity-100 focus:opacity-100 text-gray-500 hover:text-port-error'
-        }`}
-        aria-label={`Delete ${work.title}`}
-        title={armedDelete ? 'Click again to confirm' : 'Delete'}
-      >
-        <Trash2 size={12} />
-      </button>
+      {confirming ? (
+        <div className="absolute inset-0 flex items-center justify-end gap-2 pr-1 bg-port-bg/95 rounded">
+          <ConfirmButtonPair
+            prompt="Delete?"
+            ariaLabel={`Confirm delete ${work.title}`}
+            onConfirm={onConfirmDelete}
+            onCancel={onCancelDelete}
+          />
+        </div>
+      ) : (
+        <button
+          onClick={onRequestDelete}
+          className="absolute right-0 top-1/2 -translate-y-1/2 flex items-center justify-center min-w-[44px] min-h-[44px] transition-opacity opacity-40 sm:opacity-0 group-hover:opacity-100 focus:opacity-100 text-gray-500 hover:text-port-error"
+          aria-label={`Delete ${work.title}`}
+          title="Delete"
+        >
+          <Trash2 size={14} />
+        </button>
+      )}
     </li>
   );
 }
@@ -331,7 +321,7 @@ function UnfiledZone({ works, renderWorkRow, showHeader, isDragging }) {
   );
 }
 
-function FolderRow({ folder, works, isOpen, isDragging, armedDelete, onToggle, onCreateWork, onDelete, renderWorkRow }) {
+function FolderRow({ folder, works, isOpen, isDragging, confirming, onToggle, onCreateWork, onRequestDelete, onConfirmDelete, onCancelDelete, renderWorkRow }) {
   const { setNodeRef, isOver } = useDroppable({ id: `folder:${folder.id}`, data: { folderId: folder.id } });
   return (
     <li className="group/folder">
@@ -350,26 +340,34 @@ function FolderRow({ folder, works, isOpen, isDragging, armedDelete, onToggle, o
           <span className="flex-1 text-left truncate">{folder.name}</span>
           <span className="text-[10px] text-gray-500">{works.length}</span>
         </button>
-        <button
-          onClick={onCreateWork}
-          className="p-1 text-gray-500 hover:text-port-accent transition-opacity opacity-40 sm:opacity-0 group-hover/folder:opacity-100 focus:opacity-100"
-          aria-label="Add work to folder"
-          title="New work in folder"
-        >
-          <FilePlus size={12} />
-        </button>
-        <button
-          onClick={onDelete}
-          className={`p-1 transition-opacity ${
-            armedDelete
-              ? 'opacity-100 text-port-error'
-              : 'opacity-40 sm:opacity-0 group-hover/folder:opacity-100 focus:opacity-100 text-gray-500 hover:text-port-error'
-          }`}
-          aria-label={`Delete folder ${folder.name}`}
-          title={armedDelete ? 'Click again to confirm' : 'Delete folder'}
-        >
-          <Trash2 size={12} />
-        </button>
+        {confirming ? (
+          <ConfirmButtonPair
+            prompt="Delete?"
+            className="shrink-0 pr-1"
+            ariaLabel={`Confirm delete folder ${folder.name}`}
+            onConfirm={onConfirmDelete}
+            onCancel={onCancelDelete}
+          />
+        ) : (
+          <>
+            <button
+              onClick={onCreateWork}
+              className="flex items-center justify-center min-w-[44px] min-h-[44px] text-gray-500 hover:text-port-accent transition-opacity opacity-40 sm:opacity-0 group-hover/folder:opacity-100 focus:opacity-100"
+              aria-label="Add work to folder"
+              title="New work in folder"
+            >
+              <FilePlus size={14} />
+            </button>
+            <button
+              onClick={onRequestDelete}
+              className="flex items-center justify-center min-w-[44px] min-h-[44px] transition-opacity opacity-40 sm:opacity-0 group-hover/folder:opacity-100 focus:opacity-100 text-gray-500 hover:text-port-error"
+              aria-label={`Delete folder ${folder.name}`}
+              title="Delete folder"
+            >
+              <Trash2 size={14} />
+            </button>
+          </>
+        )}
       </div>
       {isOpen && (
         <ul className="space-y-0.5 pl-5 relative">
diff --git a/client/src/components/writers-room/StagePromptModelPicker.jsx b/client/src/components/writers-room/StagePromptModelPicker.jsx
index 91a022a07..54269723b 100644
--- a/client/src/components/writers-room/StagePromptModelPicker.jsx
+++ b/client/src/components/writers-room/StagePromptModelPicker.jsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import toast from '../ui/Toast';
 import ProviderModelSelector from '../ProviderModelSelector';
+import { FormField } from '../ui/FormField';
 import useFieldDraft from '../../hooks/useFieldDraft';
 import { filterSelectableModels, getProviderTimeout } from '../../utils/providers';
 import {
@@ -202,10 +203,11 @@ function StageTimeoutInput({ value, providerFallback, onCommit }) {
   }
 
   return (
-    <div className="space-y-0.5">
-      <label className="block text-[9px] uppercase tracking-wider text-gray-500">
-        Timeout override (ms)
-      </label>
+    <FormField
+      className="space-y-0.5"
+      labelClassName="block text-[9px] uppercase tracking-wider text-gray-500"
+      label="Timeout override (ms)"
+    >
       <input
         type="number"
         inputMode="numeric"
@@ -220,6 +222,6 @@ function StageTimeoutInput({ value, providerFallback, onCommit }) {
         className="w-full bg-port-bg border border-port-border rounded px-2 py-1 text-[11px] text-gray-200"
       />
       <div className="text-[10px] text-gray-500">{hint}</div>
-    </div>
+    </FormField>
   );
 }
diff --git a/client/src/hooks/usePostSession.js b/client/src/hooks/usePostSession.js
index 20d6f3000..511f06ae0 100644
--- a/client/src/hooks/usePostSession.js
+++ b/client/src/hooks/usePostSession.js
@@ -81,7 +81,7 @@ export function usePostSession() {
     setLastAnswer(null);
 
     const first = drillConfigs[0];
-    const drill = await generatePostDrill(first.type, first.config, first.providerId, first.model).catch(err => {
+    const drill = await generatePostDrill(first.type, first.config, first.providerId, first.model, { silent: true }).catch(err => {
       toast.error(`Failed to generate drill: ${err.message}`);
       setState(STATES.IDLE);
       return null;
@@ -217,7 +217,7 @@ export function usePostSession() {
     setState(STATES.LOADING);
 
     const next = drills[nextIndex];
-    const drill = await generatePostDrill(next.type, next.config, next.providerId, next.model).catch(err => {
+    const drill = await generatePostDrill(next.type, next.config, next.providerId, next.model, { silent: true }).catch(err => {
       toast.error(`Failed to generate drill: ${err.message}`);
       setState(STATES.IDLE);
       return null;
@@ -260,7 +260,7 @@ export function usePostSession() {
       const timeLimitMs = (drillConfig?.timeLimitSec || 120) * 1000;
       const scoreResult = await scorePostLlmDrill(
         drillResult.type, drillResult.drillData, drillResult.responses,
-        timeLimitMs, drillConfig?.providerId, drillConfig?.model
+        timeLimitMs, drillConfig?.providerId, drillConfig?.model, { silent: true }
       ).catch(err => {
         toast.error(`LLM scoring failed: ${err.message}`);
         return null;
@@ -333,7 +333,7 @@ export function usePostSession() {
       modules,
       tasks: drillResults,
       tags
-    }).catch(err => {
+    }, { silent: true }).catch(err => {
       toast.error(`Failed to save session: ${err.message}`);
       setState(STATES.COMPLETE);
       return null;
diff --git a/client/src/lib/README.md b/client/src/lib/README.md
index 98529a657..0231374f8 100644
--- a/client/src/lib/README.md
+++ b/client/src/lib/README.md
@@ -92,6 +92,7 @@ grep -i "what you want to do" client/src/lib/README.md
 | `mediaSearch.js` | `buildMediaHaystack`, `tokenizeQuery`, `matchHaystack`, `filterByQuery` — client-side AND-token search over normalized media items (prompt/model/seed/LoRA/universe tags). Shared by MediaHistory + the Image Gen gallery picker. |
 | `moodBoardItemSrc.js` | `moodBoardItemSrc(item)` resolves a mood-board item to a display image src (`imageUrl` → served `image:<file>` bytes → null). Shared by MoodBoardDetail + MoodBoardReferenceStrip. |
 | `sameJsonShape.js` | `sameJsonShape(prev, next)` — JSON.stringify-based equality for `useAutoRefetch`'s `compare` option on small, deterministically-shaped poll payloads. |
+| `sketchCanvas.js` | Pure stroke model + 2D-context renderer for the media annotation canvas (`createStroke`, `appendPoint`, `undoStrokes`, `drawStrokes`, `clampSize`). Points stored in natural-pixel space; erase strokes use `destination-out`. Used by `AnnotationCanvas.jsx` / `MediaAnnotate.jsx` (#2036). |
 | `unsorted.js` | Synthetic "Unsorted" collection from media not filed in any real collection. |
 | `upsertByIdPrepend.js` | Newest-first upsert into an id-keyed list. |
 | `voiceLabel.js` | `formatVoiceLabel(v, engine?)` — display label for a TTS voice record. Engine-specific formatters plug into a lookup table; new engines extend that map. |
@@ -115,7 +116,8 @@ grep -i "what you want to do" client/src/lib/README.md
 | `songCraft.js` | Canonical a cappella song-craft reference data rendered by the Songs Guide (`/songs/guide`) and reused by the Song editor: `RHYTHM_SHAPES` / `DIRGE_RHYTHM_SHAPES` (dirge & ballad pulse feels with BPM bands), `VOICE_LAYERS` (foundation-first harmony build ladder), `LEARNING_STEPS` (practice sequence), `NOTATION_HELP` (lead-sheet/notation primers), `SOLFEGE_DEGREES` + `solfegeForDegree(n)`, and `rhythmShapeLabel(id)` (human-readable "Slow 4/4 ballad · dirge (56–76 BPM)" label shared by the editor's picker and read view). Pure data; pickers and docs read the same source so they can't drift. |
 | `songPlayback.js` | `createLayeredPlayer(takes)` — decode N recorded vocal takes and start them together on one shared `AudioContext` so they stack into a layered a cappella performance (sample-aligned, per-layer mute). Used by the Song editor's recording mixer. |
 | `songProgress.js` | Pure training-progress core for the song system's memorize/learn/track mode. `deriveTrainingSections(score, lyricSections?)` slices a lead-sheet score into blank-line-separated trainable sections (each a self-contained header+block score, positional stable id, lyric-matched label); `recordAttempt(progress, scope, summary)` appends a graded take to a scope's bounded rolling history (drops zero-note takes); `scopeStats(progress, scope)`/`wholeSongStats` derive `{ attempts, best, average, last, streak, learned }` (learned = streak of ≥`LEARNED_PERCENT` takes ≥`LEARNED_STREAK`); `weakestSections(progress, sections)` ranks weak/un-attempted sections for spaced-repetition; `memorizationPercent` is the learned-section share; `hideLevelFor(average)` maps a rolling average to a progressive lyric/note-hiding level (`show`/`dim`/`hide`/`blind`). No React/audio — `useSongTraining` drives it. |
-| `tribe.js` | Pure Tribe domain helpers shared by the Tribe page and its `TribeCircleMap` visualization: `RINGS` (support→core→tribe→village Dunbar rings + the uncapped `external` "outside the tribe" classification — caps, cadence defaults, Tailwind tones + `hex`), `TRIBE_RINGS` (the four inner rings the care queue/capacity/overdue counts operate over, excluding `external`), `ENERGY` (energy tiers + `hex`), `STATUS_HEX` (cadence-status → SVG stroke color), `contactStatus(contact)` / `daysBetween(date)` (cadence health: missing/overdue/soon/steady, plus an `external` state that never nags), `ringFor` / `energyFor` lookups, `tagsToArray` / `tagsToInput`, and `initialsFor(name)` (node glyph). Ring `cadenceDays` mirror `DEFAULT_RING_CADENCE` in `server/services/tribe.js`. |
+| `tribe.js` | Pure Tribe domain helpers shared by the Tribe page and its `TribeCircleMap` visualization: `RINGS` (support→core→tribe→village Dunbar rings + the uncapped `external` "outside the tribe" classification — caps, cadence defaults, Tailwind tones + `hex`), `TRIBE_RINGS` (the four inner rings the care queue/capacity/overdue counts operate over, excluding `external`), `ENERGY` (energy tiers + `hex`), `STATUS_HEX` (cadence-status → SVG stroke color), `contactStatus(contact)` (presentation wrapper over the shared `cadenceStatus` — attaches label/tone to the missing/overdue/soon/steady/`external` state) / `daysBetween(date)` (alias of the shared `daysSinceDate`), `ringFor` / `energyFor` lookups, `tagsToArray` / `tagsToInput`, and `initialsFor(name)` (node glyph). Ring `cadenceDays` mirror `DEFAULT_RING_CADENCE` in `server/services/tribe.js`; the cadence STATE MACHINE lives in `tribeCadence.js`. |
+| `tribeCadence.js` | Mirror of `server/lib/tribeCadence.js` — the single authoritative Tribe care-cadence rules shared by the page, the Care dashboard widget, and the proactive alert: `cadenceStatus(entity)` → `{ state, daysRemaining, daysOverdue }`, `daysSinceDate(dateStr)`, `DEFAULT_CADENCE_DAYS`, `SOON_WINDOW_DAYS`. A cross-boundary contract test asserts it never drifts from the server copy. |
 | `syncCounts.js` | Directional pending-sync counts for the Instances federation cards. `directionalCounts({ localMax, peerMax, ourCursor, peerCursorForUs })` → `{ toPull, toPush }` (each a non-negative Number, or `null` when unknown) from monotonic change-log seqs; `diffSeq(ahead, behind)` is the BigInt-safe clamp-at-zero subtraction (handles numeric strings past `MAX_SAFE_INTEGER`); `describeDirectional({ toPull, toPush })` renders the plain-language `{ state, text }` ("in sync" / "N to pull · M to push" / "checking…"). No React — `SyncStatusBadge` drives it. |
 | `terminalTheme.js` | Pure xterm.js palette builder for the Shell terminal. `buildTerminalTheme({ bg, fg, accent, card, error, success, warning }, mode)` assembles the xterm `theme` object — base ANSI colors from the active theme's CSS vars, the rest from mode-tuned literals (`ANSI_NIGHT` bright/pastel for dark backgrounds, `ANSI_DAY` darkened/saturated so colored CLI output stays legible on daytime themes). `parseCssColorToHex(raw, fallback)` normalizes both the `15 15 15` triple form and the `rgb(7 7 7 / 0.86)` function form (used by `--port-terminal-*` tokens) to `#rrggbb`, dropping alpha. No DOM reads — `Shell.jsx` resolves CSS vars and re-applies on theme switch. |
 | `wrSceneCursor.js` | Resolve which script scene the editor caret sits in (`sceneAtCursor`, `sceneAnchorIndex`) — inverse of WorkEditor's jump-to-scene text search; drives the live render preview's "scene at cursor" target. |
diff --git a/client/src/lib/flowsDoc.test.js b/client/src/lib/flowsDoc.test.js
new file mode 100644
index 000000000..981d1f9e1
--- /dev/null
+++ b/client/src/lib/flowsDoc.test.js
@@ -0,0 +1,88 @@
+import { describe, it, expect } from 'vitest';
+import { readFileSync, existsSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+// Integrity checks for the integration-flows document rendered by
+// client/public/flows.html (launched from /devtools/flows).
+const here = dirname(fileURLToPath(import.meta.url));
+const repoRoot = resolve(here, '..', '..', '..');
+const flowsDoc = JSON.parse(
+  readFileSync(resolve(here, '..', '..', 'public', 'flows.json'), 'utf8')
+);
+
+const uniqueIds = (items) => {
+  const ids = items.map((x) => x.id);
+  return new Set(ids).size === ids.length;
+};
+
+describe('flows.json', () => {
+  it('has unique group, transport, node, and flow ids', () => {
+    expect(uniqueIds(flowsDoc.groups)).toBe(true);
+    expect(uniqueIds(flowsDoc.transports)).toBe(true);
+    expect(uniqueIds(flowsDoc.nodes)).toBe(true);
+    expect(uniqueIds(flowsDoc.flows)).toBe(true);
+  });
+
+  it('gives every group a label and a distinct column', () => {
+    const columns = flowsDoc.groups.map((g) => g.column);
+    expect(new Set(columns).size).toBe(flowsDoc.groups.length);
+    for (const group of flowsDoc.groups) {
+      expect(group.label, group.id).toBeTruthy();
+    }
+  });
+
+  it('assigns every node to a declared group', () => {
+    const groupIds = new Set(flowsDoc.groups.map((g) => g.id));
+    for (const node of flowsDoc.nodes) {
+      expect(groupIds.has(node.group), `${node.id} → ${node.group}`).toBe(true);
+    }
+  });
+
+  it('references only declared nodes and transports from flow steps', () => {
+    const nodeIds = new Set(flowsDoc.nodes.map((n) => n.id));
+    const transportIds = new Set(flowsDoc.transports.map((t) => t.id));
+    for (const flow of flowsDoc.flows) {
+      expect(flow.steps.length, flow.id).toBeGreaterThan(0);
+      for (const step of flow.steps) {
+        const at = `${flow.id}: ${step.from} → ${step.to}`;
+        expect(nodeIds.has(step.from), at).toBe(true);
+        expect(nodeIds.has(step.to), at).toBe(true);
+        expect(transportIds.has(step.transport), at).toBe(true);
+        expect(step.label, at).toBeTruthy();
+        expect(step.payload, at).toBeTruthy();
+      }
+    }
+  });
+
+  it('annotates every flow, node, and transport for the renderer', () => {
+    for (const flow of flowsDoc.flows) {
+      expect(flow.label, flow.id).toBeTruthy();
+      expect(flow.category, flow.id).toBeTruthy();
+      expect(flow.description, flow.id).toBeTruthy();
+    }
+    for (const node of flowsDoc.nodes) {
+      expect(node.label, node.id).toBeTruthy();
+      expect(node.desc, node.id).toBeTruthy();
+    }
+    for (const transport of flowsDoc.transports) {
+      expect(transport.label, transport.id).toBeTruthy();
+      expect(transport.color, transport.id).toMatch(/^#[0-9a-f]{6}$/);
+    }
+  });
+
+  it('points node files at paths that still exist', () => {
+    // Catches refactors that move/rename a module the doc references.
+    for (const node of flowsDoc.nodes) {
+      if (!node.file) continue;
+      expect(existsSync(resolve(repoRoot, node.file)), `${node.id} → ${node.file}`).toBe(true);
+    }
+  });
+
+  it('only documents nodes that participate in at least one flow', () => {
+    const used = new Set(flowsDoc.flows.flatMap((f) => f.steps.flatMap((s) => [s.from, s.to])));
+    for (const node of flowsDoc.nodes) {
+      expect(used.has(node.id), `${node.id} is orphaned`).toBe(true);
+    }
+  });
+});
diff --git a/client/src/lib/index.js b/client/src/lib/index.js
index c4c8c777e..1211550e9 100644
--- a/client/src/lib/index.js
+++ b/client/src/lib/index.js
@@ -63,6 +63,7 @@ export * from './mediaNavigation.js';
 export * from './mediaSearch.js';
 export * from './moodBoardItemSrc.js';
 export * from './sameJsonShape.js';
+export * from './sketchCanvas.js';
 export * from './unsorted.js';
 export * from './upsertByIdPrepend.js';
 export * from './voiceLabel.js';
@@ -85,6 +86,7 @@ export * from './songProgress.js';
 export * from './syncCounts.js';
 export * from './terminalTheme.js';
 export * from './tribe.js';
+export * from './tribeCadence.js';
 export * from './universeBuilderExpand.js';
 export * from './wrSceneCursor.js';
 export * from './writingGuide.js';
diff --git a/client/src/lib/sketchCanvas.js b/client/src/lib/sketchCanvas.js
new file mode 100644
index 000000000..f3de47a56
--- /dev/null
+++ b/client/src/lib/sketchCanvas.js
@@ -0,0 +1,69 @@
+// Pure stroke model + 2D-context renderer for the media Sketch & Annotation
+// Canvas (issue #2036, phase 1). Kept free of React/DOM lookups so the drawing
+// and undo logic is unit-testable with a mock 2D context.
+//
+// Points are stored in the image's NATURAL-pixel space (the canvas element is
+// sized to naturalWidth x naturalHeight and CSS-scaled to fit). Storing natural
+// coordinates makes strokes restore identically at any display size — the phone
+// (360px) and desktop render the same persisted vectors.
+
+export const DEFAULT_COLOR = '#ef4444';
+export const DEFAULT_SIZE = 6;
+export const MIN_SIZE = 1;
+export const MAX_SIZE = 64;
+
+export const clampSize = (n) => {
+  const v = Math.round(Number(n));
+  if (!Number.isFinite(v)) return DEFAULT_SIZE;
+  return Math.max(MIN_SIZE, Math.min(MAX_SIZE, v));
+};
+
+export const createStroke = ({ mode = 'draw', color = DEFAULT_COLOR, size = DEFAULT_SIZE, x, y }) => ({
+  mode: mode === 'erase' ? 'erase' : 'draw',
+  color,
+  size: clampSize(size),
+  points: [{ x, y }],
+});
+
+// Immutable append — returns a new stroke so React state updates re-render.
+export const appendPoint = (stroke, x, y) => ({
+  ...stroke,
+  points: [...stroke.points, { x, y }],
+});
+
+// Pop the most recent committed stroke. Returns the same array reference when
+// empty so callers can no-op cheaply.
+export const undoStrokes = (strokes) => (strokes.length ? strokes.slice(0, -1) : strokes);
+
+// Render every stroke onto a 2D context sized `width` x `height`. Erase strokes
+// use destination-out so they cut transparent holes in earlier draw strokes
+// (revealing the underlying image when the layer is composited over it).
+export function drawStrokes(ctx, strokes, width, height) {
+  if (!ctx) return;
+  ctx.clearRect(0, 0, width, height);
+  for (const stroke of strokes) {
+    if (!stroke || !Array.isArray(stroke.points) || stroke.points.length === 0) continue;
+    ctx.save();
+    ctx.lineJoin = 'round';
+    ctx.lineCap = 'round';
+    ctx.lineWidth = stroke.size;
+    const erase = stroke.mode === 'erase';
+    ctx.globalCompositeOperation = erase ? 'destination-out' : 'source-over';
+    const paint = erase ? 'rgba(0,0,0,1)' : stroke.color;
+    ctx.strokeStyle = paint;
+    ctx.fillStyle = paint;
+    const pts = stroke.points;
+    if (pts.length === 1) {
+      // A single tap draws a dot rather than a zero-length line.
+      ctx.beginPath();
+      ctx.arc(pts[0].x, pts[0].y, Math.max(stroke.size / 2, 0.5), 0, Math.PI * 2);
+      ctx.fill();
+    } else {
+      ctx.beginPath();
+      ctx.moveTo(pts[0].x, pts[0].y);
+      for (let i = 1; i < pts.length; i += 1) ctx.lineTo(pts[i].x, pts[i].y);
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+}
diff --git a/client/src/lib/sketchCanvas.test.js b/client/src/lib/sketchCanvas.test.js
new file mode 100644
index 000000000..cd83eebd6
--- /dev/null
+++ b/client/src/lib/sketchCanvas.test.js
@@ -0,0 +1,84 @@
+import { describe, it, expect, vi } from 'vitest';
+import {
+  createStroke, appendPoint, undoStrokes, clampSize, drawStrokes,
+  DEFAULT_COLOR, DEFAULT_SIZE, MIN_SIZE, MAX_SIZE,
+} from './sketchCanvas';
+
+describe('sketchCanvas stroke model', () => {
+  it('clampSize bounds and rounds; falls back on garbage', () => {
+    expect(clampSize(1000)).toBe(MAX_SIZE);
+    expect(clampSize(-5)).toBe(MIN_SIZE);
+    expect(clampSize(6.7)).toBe(7);
+    expect(clampSize('abc')).toBe(DEFAULT_SIZE);
+  });
+
+  it('createStroke seeds a single point and normalizes mode/size', () => {
+    const s = createStroke({ mode: 'erase', color: '#fff', size: 9999, x: 2, y: 3 });
+    expect(s.mode).toBe('erase');
+    expect(s.color).toBe('#fff');
+    expect(s.size).toBe(MAX_SIZE);
+    expect(s.points).toEqual([{ x: 2, y: 3 }]);
+
+    const d = createStroke({ x: 0, y: 0 });
+    expect(d.mode).toBe('draw');
+    expect(d.color).toBe(DEFAULT_COLOR);
+    expect(d.size).toBe(DEFAULT_SIZE);
+  });
+
+  it('appendPoint returns a new stroke (immutable) with the point added', () => {
+    const s = createStroke({ x: 0, y: 0 });
+    const s2 = appendPoint(s, 5, 6);
+    expect(s2).not.toBe(s);
+    expect(s.points).toHaveLength(1); // original untouched
+    expect(s2.points).toEqual([{ x: 0, y: 0 }, { x: 5, y: 6 }]);
+  });
+
+  it('undoStrokes pops the last stroke, no-ops on empty', () => {
+    const a = createStroke({ x: 0, y: 0 });
+    const b = createStroke({ x: 1, y: 1 });
+    expect(undoStrokes([a, b])).toEqual([a]);
+    const empty = [];
+    expect(undoStrokes(empty)).toBe(empty);
+  });
+});
+
+describe('drawStrokes renderer', () => {
+  const makeCtx = () => ({
+    save: vi.fn(), restore: vi.fn(), beginPath: vi.fn(), moveTo: vi.fn(),
+    lineTo: vi.fn(), stroke: vi.fn(), arc: vi.fn(), fill: vi.fn(), clearRect: vi.fn(),
+    lineJoin: '', lineCap: '', lineWidth: 0, globalCompositeOperation: '', strokeStyle: '', fillStyle: '',
+  });
+
+  it('clears then draws a polyline for a multi-point draw stroke', () => {
+    const ctx = makeCtx();
+    const stroke = { mode: 'draw', color: '#f00', size: 4, points: [{ x: 0, y: 0 }, { x: 1, y: 1 }, { x: 2, y: 2 }] };
+    drawStrokes(ctx, [stroke], 10, 10);
+    expect(ctx.clearRect).toHaveBeenCalledWith(0, 0, 10, 10);
+    expect(ctx.moveTo).toHaveBeenCalledWith(0, 0);
+    expect(ctx.lineTo).toHaveBeenCalledTimes(2);
+    expect(ctx.stroke).toHaveBeenCalled();
+  });
+
+  it('draws a dot (arc+fill) for a single-point stroke', () => {
+    const ctx = makeCtx();
+    drawStrokes(ctx, [{ mode: 'draw', color: '#0f0', size: 8, points: [{ x: 3, y: 3 }] }], 10, 10);
+    expect(ctx.arc).toHaveBeenCalled();
+    expect(ctx.fill).toHaveBeenCalled();
+    expect(ctx.stroke).not.toHaveBeenCalled();
+  });
+
+  it('erase strokes use destination-out compositing', () => {
+    const ctx = makeCtx();
+    const composites = [];
+    // Record the composite op at the moment stroke() is invoked.
+    ctx.stroke = vi.fn(() => composites.push(ctx.globalCompositeOperation));
+    drawStrokes(ctx, [{ mode: 'erase', size: 5, points: [{ x: 0, y: 0 }, { x: 1, y: 1 }] }], 10, 10);
+    expect(composites).toContain('destination-out');
+  });
+
+  it('skips empty/invalid strokes without throwing', () => {
+    const ctx = makeCtx();
+    expect(() => drawStrokes(ctx, [null, { points: [] }, {}], 5, 5)).not.toThrow();
+    expect(ctx.stroke).not.toHaveBeenCalled();
+  });
+});
diff --git a/client/src/lib/tribe.js b/client/src/lib/tribe.js
index 4380b1ba1..c3ceae5b6 100644
--- a/client/src/lib/tribe.js
+++ b/client/src/lib/tribe.js
@@ -2,6 +2,13 @@
 // visualization. Rings are Dunbar-inspired concentric circles (support is the
 // innermost / closest, village the outermost / weak ties). The ring `cadenceDays`
 // defaults mirror DEFAULT_RING_CADENCE in server/services/tribe.js — keep in sync.
+//
+// The cadence STATE MACHINE (external/missing/overdue/soon/steady) lives in the
+// shared, authoritative `tribeCadence.js` (mirrored from server/lib/tribeCadence.js)
+// so the page, the Tribe Care dashboard widget, and the proactive-alert check all
+// route through one implementation. `contactStatus` below only layers presentation
+// (label/tone) on top of that shared `cadenceStatus` — do not re-implement the rules.
+import { cadenceStatus, daysSinceDate } from './tribeCadence.js';
 
 // The four inner rings are the Dunbar tribe (capped, care-cadenced). `external` is
 // a fifth, uncapped classification OUTSIDE the tribe — people known or previously
@@ -28,27 +35,27 @@ export const ENERGY = [
 ];
 
 // Whole days from an ISO date (YYYY-MM-DD) to today, or null if unparseable.
-export function daysBetween(date) {
-  if (!date) return null;
-  const start = new Date(`${date}T00:00:00`);
-  if (Number.isNaN(start.getTime())) return null;
-  const now = new Date();
-  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-  return Math.floor((today - start) / 86400000);
-}
+// Backed by the shared `daysSinceDate` so the client and server compute
+// elapsed days identically.
+export const daysBetween = daysSinceDate;
 
-// Cadence health for a contact: missing / overdue / soon (<=7d) / steady.
-// `daysRemaining` is cadenceDays - elapsed (negative once overdue); null when
-// there's no recorded last contact (distinct from a 0-days-remaining contact).
+// Cadence health for a contact: missing / overdue / soon (<=7d) / steady, plus
+// an `external` state that never nags. The state/`daysRemaining` come straight
+// from the shared `cadenceStatus`; this wrapper only attaches the UI label +
+// Tailwind tone so there is exactly one implementation of the cadence rules.
+const STATUS_PRESENTATION = {
+  external: { label: 'External', tone: 'text-slate-400' },
+  missing: { label: 'No touchpoint', tone: 'text-gray-300' },
+  overdue: { tone: 'text-rose-300' },
+  soon: { tone: 'text-amber-300' },
+  steady: { tone: 'text-emerald-300' },
+};
 export function contactStatus(contact) {
-  // External people carry no care cadence — never nag about an overdue nemesis.
-  if (contact.ring === 'external') return { label: 'External', tone: 'text-slate-400', state: 'external', daysRemaining: null };
-  const elapsed = daysBetween(contact.lastContact);
-  if (elapsed == null) return { label: 'No touchpoint', tone: 'text-gray-300', state: 'missing', daysRemaining: null };
-  const daysRemaining = Number(contact.cadenceDays || 45) - elapsed;
-  if (daysRemaining < 0) return { label: `${Math.abs(daysRemaining)}d overdue`, tone: 'text-rose-300', state: 'overdue', daysRemaining };
-  if (daysRemaining <= 7) return { label: `${daysRemaining}d left`, tone: 'text-amber-300', state: 'soon', daysRemaining };
-  return { label: `${daysRemaining}d left`, tone: 'text-emerald-300', state: 'steady', daysRemaining };
+  const { state, daysRemaining } = cadenceStatus(contact);
+  const { label, tone } = STATUS_PRESENTATION[state];
+  if (label) return { label, tone, state, daysRemaining };
+  const dueLabel = state === 'overdue' ? `${Math.abs(daysRemaining)}d overdue` : `${daysRemaining}d left`;
+  return { label: dueLabel, tone, state, daysRemaining };
 }
 
 // Status → SVG stroke color for the circle-map nodes.
diff --git a/client/src/lib/tribeCadence.contract.test.js b/client/src/lib/tribeCadence.contract.test.js
new file mode 100644
index 000000000..7b7d1fb20
--- /dev/null
+++ b/client/src/lib/tribeCadence.contract.test.js
@@ -0,0 +1,87 @@
+import { describe, it, expect } from 'vitest';
+import {
+  cadenceStatus as clientCadenceStatus,
+  daysSinceDate as clientDaysSinceDate,
+  DEFAULT_CADENCE_DAYS as CLIENT_DEFAULT,
+  SOON_WINDOW_DAYS as CLIENT_SOON,
+} from './tribeCadence.js';
+// The server copy is authoritative; the client copy is a mirror. Importing both
+// here (vitest resolves the cross-boundary path, same as providers.test.js) and
+// asserting identical output is the anti-drift guarantee for issue #2060 — if
+// either file's cadence rules change without the other, this suite fails.
+import {
+  cadenceStatus as serverCadenceStatus,
+  daysSinceDate as serverDaysSinceDate,
+  DEFAULT_CADENCE_DAYS as SERVER_DEFAULT,
+  SOON_WINDOW_DAYS as SERVER_SOON,
+} from '../../../server/lib/tribeCadence.js';
+
+// N days before today as a YYYY-MM-DD string, so the suite is date-independent.
+// Build the string from LOCAL calendar fields — `daysSinceDate` parses the
+// `YYYY-MM-DD` in local time, so using `toISOString()` (UTC) here would shift
+// the date across the UTC/local day boundary in the evening and make the
+// elapsed-day math off-by-one (timezone-dependent flake).
+function daysAgo(n) {
+  const d = new Date();
+  d.setDate(d.getDate() - n);
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+}
+
+describe('tribeCadence — client/server mirror is byte-identical', () => {
+  it('exposes identical tuning constants', () => {
+    expect(CLIENT_DEFAULT).toBe(SERVER_DEFAULT);
+    expect(CLIENT_SOON).toBe(SERVER_SOON);
+    expect(CLIENT_DEFAULT).toBe(45);
+    expect(CLIENT_SOON).toBe(7);
+  });
+
+  const entities = [
+    { ring: 'external', lastContact: daysAgo(999), cadenceDays: 7 }, // external excluded
+    { ring: 'core', lastContact: null, cadenceDays: 21 }, // missing
+    { ring: 'core', lastContact: undefined, cadenceDays: 21 }, // missing (undefined)
+    { ring: 'support', lastContact: 'not-a-date', cadenceDays: 7 }, // unparseable → missing
+    { ring: 'support', lastContact: daysAgo(10), cadenceDays: 7 }, // overdue
+    { ring: 'core', lastContact: daysAgo(21), cadenceDays: 21 }, // 0 remaining → soon boundary
+    { ring: 'core', lastContact: daysAgo(14), cadenceDays: 21 }, // 7 remaining → soon upper boundary
+    { ring: 'core', lastContact: daysAgo(13), cadenceDays: 21 }, // 8 remaining → steady
+    { ring: 'village', lastContact: daysAgo(2), cadenceDays: 90 }, // steady
+    { ring: 'tribe', lastContact: daysAgo(45), cadenceDays: 0 }, // cadenceDays 0 → default 45
+  ];
+
+  it.each(entities)('cadenceStatus matches across boundary for %o', (entity) => {
+    expect(clientCadenceStatus(entity)).toEqual(serverCadenceStatus(entity));
+  });
+
+  it.each([null, undefined, '', 'garbage', daysAgo(0), daysAgo(3)])(
+    'daysSinceDate matches across boundary for %o',
+    (value) => {
+      expect(clientDaysSinceDate(value)).toBe(serverDaysSinceDate(value));
+    },
+  );
+});
+
+describe('tribeCadence — cadence rules (semantics preserved from #2032)', () => {
+  it('external members are excluded from care (never nagged)', () => {
+    expect(clientCadenceStatus({ ring: 'external', lastContact: daysAgo(999), cadenceDays: 7 }))
+      .toEqual({ state: 'external', daysRemaining: null, daysOverdue: 0 });
+  });
+
+  it('distinguishes missing (never contacted) from overdue', () => {
+    const missing = clientCadenceStatus({ ring: 'core', lastContact: null, cadenceDays: 21 });
+    expect(missing.state).toBe('missing');
+    expect(missing.daysRemaining).toBeNull();
+    expect(missing.daysOverdue).toBeNull(); // missing sorts above dated-overdue
+
+    const overdue = clientCadenceStatus({ ring: 'support', lastContact: daysAgo(10), cadenceDays: 7 });
+    expect(overdue.state).toBe('overdue');
+    expect(overdue.daysOverdue).toBe(3);
+  });
+
+  it('treats <=7 days remaining as soon, >7 as steady', () => {
+    expect(clientCadenceStatus({ ring: 'core', lastContact: daysAgo(14), cadenceDays: 21 }).state).toBe('soon');
+    expect(clientCadenceStatus({ ring: 'core', lastContact: daysAgo(13), cadenceDays: 21 }).state).toBe('steady');
+  });
+});
diff --git a/client/src/lib/tribeCadence.js b/client/src/lib/tribeCadence.js
new file mode 100644
index 000000000..08c4d58f6
--- /dev/null
+++ b/client/src/lib/tribeCadence.js
@@ -0,0 +1,36 @@
+// Mirror of server/lib/tribeCadence.js — the single source of truth for the
+// Tribe care cadence rules. The server copy is authoritative; port logic
+// changes verbatim and keep the two byte-identical in behavior. The
+// cross-boundary contract test (client/src/lib/tribeCadence.contract.test.js)
+// imports BOTH this mirror and the server module and fails CI if they drift.
+// The client `contactStatus` (lib/tribe.js) layers presentation (label/tone)
+// on top of `cadenceStatus`; it must not re-implement the state machine.
+
+// The four inner rings owe a care cadence; `external` is never nagged.
+export const DEFAULT_CADENCE_DAYS = 45;
+// A member with <= this many days left before their next check-in is "soon".
+export const SOON_WINDOW_DAYS = 7;
+
+// Whole days from an ISO date (YYYY-MM-DD…) to today, or null when unparseable.
+export function daysSinceDate(dateStr) {
+  if (!dateStr) return null;
+  const start = new Date(`${String(dateStr).slice(0, 10)}T00:00:00`);
+  if (Number.isNaN(start.getTime())) return null;
+  const now = new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  return Math.floor((today - start) / 86400000);
+}
+
+// Cadence health for a tribe member: external / missing / overdue / soon /
+// steady. `daysRemaining` is cadenceDays - elapsed (negative once overdue);
+// null when there's no recorded last contact. `daysOverdue` is 0 unless
+// overdue, and null for a `missing` member. External members carry no cadence.
+export function cadenceStatus(entity) {
+  if (entity.ring === 'external') return { state: 'external', daysRemaining: null, daysOverdue: 0 };
+  const elapsed = daysSinceDate(entity.lastContact);
+  if (elapsed == null) return { state: 'missing', daysRemaining: null, daysOverdue: null };
+  const daysRemaining = Number(entity.cadenceDays || DEFAULT_CADENCE_DAYS) - elapsed;
+  if (daysRemaining < 0) return { state: 'overdue', daysRemaining, daysOverdue: Math.abs(daysRemaining) };
+  if (daysRemaining <= SOON_WINDOW_DAYS) return { state: 'soon', daysRemaining, daysOverdue: 0 };
+  return { state: 'steady', daysRemaining, daysOverdue: 0 };
+}
diff --git a/client/src/pages/AIProviders.jsx b/client/src/pages/AIProviders.jsx
index edec158ce..d0f3a0434 100644
--- a/client/src/pages/AIProviders.jsx
+++ b/client/src/pages/AIProviders.jsx
@@ -17,6 +17,7 @@ import {
 import SettingsTabsHeader from '../components/settings/SettingsTabsHeader';
 import CodeReviewDefaultsPanel from '../components/providers/CodeReviewDefaultsPanel';
 import Modal from '../components/ui/Modal';
+import { FormField } from '../components/ui/FormField';
 
 export default function AIProviders() {
   const [providers, setProviders] = useState([]);
@@ -829,8 +830,7 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
       </h2>
 
         <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label className="block text-sm text-gray-400 mb-1">Name *</label>
+          <FormField label="Name *">
             <input
               type="text"
               value={formData.name}
@@ -838,10 +838,9 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
               required
               className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white focus:border-port-accent focus:outline-hidden"
             />
-          </div>
+          </FormField>
 
-          <div>
-            <label className="block text-sm text-gray-400 mb-1">Type *</label>
+          <FormField label="Type *">
             <select
               value={formData.type}
               onChange={(e) => setFormData(prev => ({ ...prev, type: e.target.value }))}
@@ -851,12 +850,11 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
               <option value="tui">TUI</option>
               <option value="api">API</option>
             </select>
-          </div>
+          </FormField>
 
           {(formData.type === 'cli' || formData.type === 'tui') && (
             <>
-              <div>
-                <label className="block text-sm text-gray-400 mb-1">Command *</label>
+              <FormField label="Command *">
                 <input
                   type="text"
                   value={formData.command}
@@ -865,10 +863,9 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
                   required={formData.type === 'cli' || formData.type === 'tui'}
                   className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white focus:border-port-accent focus:outline-hidden"
                 />
-              </div>
+              </FormField>
 
-              <div>
-                <label className="block text-sm text-gray-400 mb-1">Arguments (space-separated)</label>
+              <FormField label="Arguments (space-separated)">
                 <input
                   type="text"
                   value={formData.args}
@@ -876,11 +873,10 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
                   placeholder={formData.type === 'tui' ? '--dangerously-skip-permissions' : '--print -p'}
                   className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white focus:border-port-accent focus:outline-hidden"
                 />
-              </div>
+              </FormField>
 
               {formData.type === 'cli' && (
-                <div>
-                  <label className="block text-sm text-gray-400 mb-1">Headless Args (for simple prompt tasks)</label>
+                <FormField label="Headless Args (for simple prompt tasks)">
                   <input
                     type="text"
                     value={formData.headlessArgs}
@@ -891,13 +887,12 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
                   <p className="text-xs text-gray-500 mt-1">
                     Extra CLI flags for lightweight prompt-in/text-out mode (brain classifier, etc.)
                   </p>
-                </div>
+                </FormField>
               )}
 
               {formData.type === 'tui' && (
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                  <div>
-                    <label className="block text-sm text-gray-400 mb-1">Prompt Paste Delay (ms)</label>
+                  <FormField label="Prompt Paste Delay (ms)">
                     <input
                       type="number"
                       min="250"
@@ -906,9 +901,8 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
                       onChange={(e) => setFormData(prev => ({ ...prev, tuiPromptDelayMs: e.target.value }))}
                       className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white focus:border-port-accent focus:outline-hidden"
                     />
-                  </div>
-                  <div>
-                    <label className="block text-sm text-gray-400 mb-1">Idle Complete (ms)</label>
+                  </FormField>
+                  <FormField label="Idle Complete (ms)">
                     <input
                       type="number"
                       min="10000"
@@ -917,7 +911,7 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
                       onChange={(e) => setFormData(prev => ({ ...prev, tuiIdleTimeoutMs: e.target.value }))}
                       className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white focus:border-port-accent focus:outline-hidden"
                     />
-                  </div>
+                  </FormField>
                   <p className="sm:col-span-2 text-xs text-gray-500">
                     TUI providers open an attachable shell session, paste the agent prompt, parse terminal output, and complete after the terminal is idle.
                   </p>
@@ -928,8 +922,7 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
 
           {formData.type === 'api' && (
             <>
-              <div>
-                <label className="block text-sm text-gray-400 mb-1">Endpoint *</label>
+              <FormField label="Endpoint *">
                 <input
                   type="url"
                   value={formData.endpoint}
@@ -938,10 +931,9 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
                   required={formData.type === 'api'}
                   className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white focus:border-port-accent focus:outline-hidden"
                 />
-              </div>
+              </FormField>
 
-              <div>
-                <label className="block text-sm text-gray-400 mb-1">API Key</label>
+              <FormField label="API Key">
                 <input
                   type="password"
                   value={formData.apiKey}
@@ -949,15 +941,14 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
                   placeholder={provider?.hasApiKey ? 'Key set — leave blank to keep' : 'Optional'}
                   className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white focus:border-port-accent focus:outline-hidden"
                 />
-              </div>
+              </FormField>
             </>
           )}
 
-          <div>
-            <label className="block text-sm text-gray-400 mb-1">
+          <FormField label={<>
               Available Models
               {formData.type === 'api' && <span className="text-xs text-gray-500 ml-2">(Use Refresh button after saving)</span>}
-            </label>
+            </>}>
             <textarea
               value={(formData.models || []).join(', ')}
               onChange={(e) => {
@@ -974,10 +965,9 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
             <p className="text-xs text-gray-500 mt-1">
               Comma-separated list of available models. For API providers, use Refresh to auto-populate.
             </p>
-          </div>
+          </FormField>
 
-          <div>
-            <label className="block text-sm text-gray-400 mb-1">Default Model</label>
+          <FormField label="Default Model">
             {availableModels.length > 0 ? (
               <select
                 value={formData.defaultModel}
@@ -1003,17 +993,16 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
                 ? 'Model to use when no tier is specified'
                 : 'Save and test provider to fetch available models'}
             </p>
-          </div>
+          </FormField>
 
           {/* Model Tiers */}
           <div className="border-t border-port-border pt-4 mt-4">
             <h4 className="text-sm font-medium text-gray-300 mb-3">Model Tiers</h4>
             <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-              <div>
-                <label className="block text-xs text-gray-400 mb-1">
+              <FormField labelClassName="block text-xs text-gray-400 mb-1" label={<>
                   <span className="inline-block w-2 h-2 rounded-full bg-port-success mr-1"></span>
                   Light (fast)
-                </label>
+                </>}>
                 {availableModels.length > 0 ? (
                   <select
                     value={formData.lightModel}
@@ -1034,12 +1023,11 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
                     className="w-full px-2 py-1.5 bg-port-bg border border-port-border rounded-lg text-white text-sm focus:border-port-accent focus:outline-hidden"
                   />
                 )}
-              </div>
-              <div>
-                <label className="block text-xs text-gray-400 mb-1">
+              </FormField>
+              <FormField labelClassName="block text-xs text-gray-400 mb-1" label={<>
                   <span className="inline-block w-2 h-2 rounded-full bg-port-warning mr-1"></span>
                   Medium (balanced)
-                </label>
+                </>}>
                 {availableModels.length > 0 ? (
                   <select
                     value={formData.mediumModel}
@@ -1060,12 +1048,11 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
                     className="w-full px-2 py-1.5 bg-port-bg border border-port-border rounded-lg text-white text-sm focus:border-port-accent focus:outline-hidden"
                   />
                 )}
-              </div>
-              <div>
-                <label className="block text-xs text-gray-400 mb-1">
+              </FormField>
+              <FormField labelClassName="block text-xs text-gray-400 mb-1" label={<>
                   <span className="inline-block w-2 h-2 rounded-full bg-port-error mr-1"></span>
                   Heavy (powerful)
-                </label>
+                </>}>
                 {availableModels.length > 0 ? (
                   <select
                     value={formData.heavyModel}
@@ -1086,7 +1073,7 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
                     className="w-full px-2 py-1.5 bg-port-bg border border-port-border rounded-lg text-white text-sm focus:border-port-accent focus:outline-hidden"
                   />
                 )}
-              </div>
+              </FormField>
             </div>
             <p className="text-xs text-gray-500 mt-2">
               {availableModels.length > 0
@@ -1095,8 +1082,7 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
             </p>
           </div>
 
-          <div>
-            <label className="block text-sm text-gray-400 mb-1">Timeout (ms)</label>
+          <FormField label="Timeout (ms)">
             <input
               type="number"
               inputMode="numeric"
@@ -1119,13 +1105,12 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
                   : `Per-call cap. Server max: ${TIMEOUT_INPUT_MAX_MS.toLocaleString()} ms (${formatDurationMs(TIMEOUT_INPUT_MAX_MS)}).`;
               })()}
             </p>
-          </div>
+          </FormField>
 
           <div className="border-t border-port-border pt-4 mt-4">
             <h4 className="text-sm font-medium text-gray-300 mb-3">Context Window</h4>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-              <div>
-                <label className="block text-sm text-gray-400 mb-1">Planning Window</label>
+              <FormField label="Planning Window">
                 <input
                   type="number"
                   inputMode="numeric"
@@ -1139,11 +1124,10 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
                 <p className="text-xs text-gray-500 mt-1">
                   {plannedContextLabel ? `Budgeter uses ${plannedContextLabel}` : 'Leave blank to use model/provider defaults'}
                 </p>
-              </div>
+              </FormField>
 
               {formData.type === 'api' && (
-                <div>
-                  <label className="block text-sm text-gray-400 mb-1">Local num_ctx</label>
+                <FormField label="Local num_ctx">
                   <input
                     type="number"
                     inputMode="numeric"
@@ -1157,14 +1141,14 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
                   <p className="text-xs text-gray-500 mt-1">
                     Sent to compatible local backends; used for planning when no model window is known.
                   </p>
-                </div>
+                </FormField>
               )}
             </div>
           </div>
 
           {/* Fallback Provider */}
           <div className="border-t border-port-border pt-4 mt-4">
-            <label className="block text-sm text-gray-400 mb-1">Fallback Provider</label>
+            <FormField label="Fallback Provider">
             <select
               value={formData.fallbackProvider}
               onChange={(e) => setFormData(prev => ({
@@ -1185,10 +1169,10 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
             <p className="text-xs text-gray-500 mt-1">
               If this provider hits a usage limit or becomes unavailable, tasks will automatically use the fallback provider.
             </p>
+            </FormField>
 
             {formData.fallbackProvider && (
-              <div className="mt-3">
-                <label className="block text-sm text-gray-400 mb-1">Fallback Model</label>
+              <FormField label="Fallback Model" className="mt-3">
                 {fallbackModelOptions.length > 0 ? (
                   <select
                     value={formData.fallbackModel}
@@ -1212,7 +1196,7 @@ function ProviderForm({ provider, onClose, onSave, allProviders = [] }) {
                 <p className="text-xs text-gray-500 mt-1">
                   Model to run on the fallback provider. Leave blank to use that provider's default model.
                 </p>
-              </div>
+              </FormField>
             )}
           </div>
 
diff --git a/client/src/pages/Ask.jsx b/client/src/pages/Ask.jsx
index 0a16d5e39..e024cfa00 100644
--- a/client/src/pages/Ask.jsx
+++ b/client/src/pages/Ask.jsx
@@ -3,6 +3,8 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { Send, Loader2, MessageCircle, Trash2, Pin, Brain, Calendar, Target, BookOpen, FileText, ExternalLink, ListTodo, CheckCircle2 } from 'lucide-react';
 import * as api from '../services/api';
 import toast from '../components/ui/Toast';
+import ConfirmButtonPair from '../components/ui/ConfirmButtonPair';
+import { useConfirmDelete } from '../hooks/useConfirmDelete';
 
 // Mirrors the server-side ID_RE in askConversations.js (9-char base36 ms +
 // 8-char hex suffix) so this regex stays in lockstep with the production
@@ -47,7 +49,7 @@ function SourceChip({ source, index }) {
   );
 }
 
-function Sidebar({ conversations, activeId, onPick, onNew, onDelete, loading, streaming }) {
+function Sidebar({ conversations, activeId, onPick, onNew, isConfirmingDelete, onRequestDelete, onConfirmDelete, onCancelDelete, loading, streaming }) {
   return (
     <aside className="w-full md:w-64 md:shrink-0 border-r border-port-border bg-port-card md:h-full md:overflow-y-auto">
       <div className="p-3 border-b border-port-border flex items-center gap-2">
@@ -90,15 +92,27 @@ function Sidebar({ conversations, activeId, onPick, onNew, onDelete, loading, st
                   {c.promoted && <Pin size={10} className="text-amber-400" />}
                 </div>
               </button>
-              <button
-                type="button"
-                onClick={() => onDelete(c.id)}
-                className="absolute right-2 top-1/2 -translate-y-1/2 opacity-40 sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100 text-gray-500 hover:text-port-error transition-opacity"
-                aria-label={`Delete conversation: ${c.title}`}
-                title="Delete conversation"
-              >
-                <Trash2 size={14} />
-              </button>
+              {isConfirmingDelete(c.id) ? (
+                <div className="absolute inset-y-0 right-0 flex items-center pr-2 bg-port-card/95 rounded">
+                  <ConfirmButtonPair
+                    prompt="Delete?"
+                    ariaLabel={`Confirm delete conversation: ${c.title}`}
+                    onConfirm={() => onConfirmDelete(c.id)}
+                    onCancel={onCancelDelete}
+                  />
+                </div>
+              ) : (
+                <button
+                  type="button"
+                  disabled={streaming && c.id === activeId}
+                  onClick={() => onRequestDelete(c.id)}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 opacity-40 sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100 text-gray-500 hover:text-port-error transition-opacity disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:text-gray-500"
+                  aria-label={`Delete conversation: ${c.title}`}
+                  title="Delete conversation"
+                >
+                  <Trash2 size={14} />
+                </button>
+              )}
             </div>
           );
         })}
@@ -406,18 +420,19 @@ export default function Ask() {
     setQuestion('');
   }, [navigate, streaming]);
 
-  // Two-step delete: first click arms the row (toast confirms), second click
-  // (within 4s) actually deletes. Per CLAUDE.md "no window.confirm".
-  const pendingDeleteRef = useRef({ id: null, expiresAt: 0 });
-  const handleDelete = useCallback(async (id) => {
+  // Inline delete confirm (no window.confirm, no two-click-arm) — the trash
+  // button arms the row and an explicit Delete?/Cancel row fires it.
+  const { isConfirming: isConfirmingDelete, requestDelete, cancelDelete, confirmDelete } = useConfirmDelete();
+  const handleRequestDelete = useCallback((id) => {
+    if (streaming && id === activeConv?.id) return;
+    requestDelete(id);
+  }, [activeConv?.id, requestDelete, streaming]);
+  const handleDelete = useCallback((id) => confirmDelete(async () => {
+    // Re-check the streaming guard at confirm time too: the row could have been
+    // armed while idle and then a stream started on this same conversation
+    // before the user clicked confirm — deleting the active stream mid-flight
+    // would race the assistant turn into a deleted record.
     if (streaming && id === activeConv?.id) return;
-    const pending = pendingDeleteRef.current;
-    if (pending.id !== id || Date.now() > pending.expiresAt) {
-      pendingDeleteRef.current = { id, expiresAt: Date.now() + 4000 };
-      toast('Click delete again to confirm', { icon: '⚠️' });
-      return;
-    }
-    pendingDeleteRef.current = { id: null, expiresAt: 0 };
     // Only mutate local state if the server confirms the delete — otherwise
     // a transient failure would hide a row that's still on disk and would
     // pop back on the next list refresh.
@@ -428,7 +443,7 @@ export default function Ask() {
     if (!ok) return;
     setConversations((prev) => prev.filter((c) => c.id !== id));
     if (id === conversationId) navigate('/ask');
-  }, [activeConv?.id, conversationId, navigate, streaming]);
+  }), [activeConv?.id, conversationId, confirmDelete, navigate, streaming]);
 
   const handlePromote = useCallback(async () => {
     if (!activeConv) return;
@@ -619,7 +634,10 @@ export default function Ask() {
         activeId={conversationId}
         onPick={(id) => navigate(`/ask/${id}`)}
         onNew={startNew}
-        onDelete={handleDelete}
+        isConfirmingDelete={isConfirmingDelete}
+        onRequestDelete={handleRequestDelete}
+        onConfirmDelete={handleDelete}
+        onCancelDelete={cancelDelete}
         loading={loadingList}
         streaming={streaming}
       />
diff --git a/client/src/pages/Authors.jsx b/client/src/pages/Authors.jsx
index 452d00fd6..d7a757c0e 100644
--- a/client/src/pages/Authors.jsx
+++ b/client/src/pages/Authors.jsx
@@ -11,6 +11,7 @@
  */
 
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
 import { FilePen, Plus, Loader2, Trash2, Save, Upload, ImageIcon, Sparkles, X } from 'lucide-react';
 import toast from '../components/ui/Toast';
 import GalleryImagePicker from '../components/imageGen/GalleryImagePicker';
@@ -61,10 +62,13 @@ function Field({ label, hint, children }) {
 }
 
 export default function Authors() {
+  const navigate = useNavigate();
+  // Selection lives in the URL (`/authors/:authorId`, `/authors/new`) so it's
+  // deep-linkable, reload-safe, and reachable from ⌘K/voice. `authorId === 'new'`
+  // is create mode; a real id is edit mode; absent is idle.
+  const { authorId } = useParams();
   const [authors, setAuthors] = useState([]);
   const [loading, setLoading] = useState(true);
-  // selectedId === 'new' is create mode; a real id is edit mode; null is idle.
-  const [selectedId, setSelectedId] = useState(null);
   const [form, setForm] = useState(emptyForm);
   const [saving, setSaving] = useState(false);
   const [confirmDelete, setConfirmDelete] = useState(false);
@@ -184,27 +188,37 @@ export default function Authors() {
       .finally(() => setLoading(false));
   }, []);
 
-  const isCreate = selectedId === 'new';
+  const isCreate = authorId === 'new';
   const selected = useMemo(
-    () => (isCreate || !selectedId ? null : authors.find((a) => a.id === selectedId) || null),
-    [authors, selectedId, isCreate],
+    () => (isCreate || !authorId ? null : authors.find((a) => a.id === authorId) || null),
+    [authors, authorId, isCreate],
   );
+  // A real id that isn't in the loaded list (deleted / bad deep link) → not-found.
+  const notFound = !isCreate && !!authorId && !loading && !selected;
   // A headshot render needs at least a subject or an art-direction prompt.
   const canGenerate = !!(form.physicalDescription.trim() || form.headshotStyle.trim());
 
-  const selectAuthor = (a) => {
-    setSelectedId(a.id);
-    setForm(formFromAuthor(a));
-    setConfirmDelete(false);
-    clearGeneration();
-  };
+  const selectAuthor = (a) => navigate(`/authors/${encodeURIComponent(a.id)}`);
+  const startCreate = () => navigate('/authors/new');
 
-  const startCreate = () => {
-    setSelectedId('new');
-    setForm(emptyForm());
+  // Hydrate the editor form from the URL-selected author. Keyed on the id so a
+  // list refresh (create/update/delete mutating `authors`) doesn't clobber the
+  // open form; `hydratedRef` tracks which selection is already loaded. Resets
+  // (confirm-delete + any in-flight generation) run for EVERY selection change —
+  // including navigating to the idle index or a stale id — so a stray render
+  // can't land on the previous author after you've moved on.
+  const hydratedRef = useRef(null);
+  const selectionKey = authorId ?? null;
+  useEffect(() => {
+    if (loading) return;
+    if (hydratedRef.current === selectionKey) return;
+    hydratedRef.current = selectionKey;
     setConfirmDelete(false);
     clearGeneration();
-  };
+    if (isCreate) setForm(emptyForm());
+    else if (selected) setForm(formFromAuthor(selected));
+    // else: idle / not-found — leave the form; the fallback UI handles it.
+  }, [selectionKey, isCreate, selected, loading]);
 
   const handleSave = async () => {
     const name = form.name.trim();
@@ -219,10 +233,10 @@ export default function Authors() {
       setSaving(false);
       if (!created) return;
       setAuthors((prev) => [...prev, created].sort((a, b) => (a.name || '').localeCompare(b.name || '')));
-      setSelectedId(created.id);
+      navigate(`/authors/${encodeURIComponent(created.id)}`);
       toast.success(`Created "${created.name}"`);
     } else {
-      const updated = await updateAuthor(selectedId, payload).catch((err) => {
+      const updated = await updateAuthor(authorId, payload).catch((err) => {
         toast.error(err.message || 'Failed to save author');
         return null;
       });
@@ -239,8 +253,8 @@ export default function Authors() {
     if (!selected) return;
     const prior = authors;
     setAuthors((prev) => prev.filter((a) => a.id !== selected.id));
-    setSelectedId(null);
     setConfirmDelete(false);
+    navigate('/authors');
     await deleteAuthor(selected.id).catch((err) => {
       toast.error(err.message || 'Delete failed');
       setAuthors(prior);
@@ -284,7 +298,7 @@ export default function Authors() {
                     type="button"
                     onClick={() => selectAuthor(a)}
                     className={`w-full text-left px-3 py-2 rounded text-sm truncate ${
-                      a.id === selectedId ? 'bg-port-accent/20 text-white' : 'text-gray-300 hover:bg-port-bg'
+                      a.id === authorId ? 'bg-port-accent/20 text-white' : 'text-gray-300 hover:bg-port-bg'
                     }`}
                   >
                     {a.name}
@@ -296,7 +310,14 @@ export default function Authors() {
         </div>
 
         <div className="bg-port-card border border-port-border rounded-lg p-4">
-          {!isCreate && !selected ? (
+          {notFound ? (
+            <div className="text-gray-500 text-sm">
+              That author could not be found — it may have been deleted.{' '}
+              <button type="button" onClick={() => navigate('/authors')} className="text-port-accent hover:underline">
+                Back to authors
+              </button>
+            </div>
+          ) : !isCreate && !selected ? (
             <div className="text-gray-500 text-sm">Select an author to edit, or create a new one.</div>
           ) : (
             <div className="space-y-3">
diff --git a/client/src/pages/Authors.test.jsx b/client/src/pages/Authors.test.jsx
index 836323a93..a562a1287 100644
--- a/client/src/pages/Authors.test.jsx
+++ b/client/src/pages/Authors.test.jsx
@@ -1,7 +1,19 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
 import Authors from './Authors';
 
+// Selection is URL-driven (`/authors/:authorId`, `/authors/new`), so mount the
+// page inside a router exposing those routes; navigation drives the editor.
+const renderAuthors = () => render(
+  <MemoryRouter initialEntries={['/authors']}>
+    <Routes>
+      <Route path="/authors" element={<Authors />} />
+      <Route path="/authors/:authorId" element={<Authors />} />
+    </Routes>
+  </MemoryRouter>,
+);
+
 const listAuthors = vi.fn();
 const generateImage = vi.fn();
 
@@ -49,7 +61,7 @@ describe('Authors headshot generation', () => {
   });
 
   const openCreateForm = async () => {
-    render(<Authors />);
+    renderAuthors();
     await screen.findByText(/No authors yet/i);
     fireEvent.click(screen.getByRole('button', { name: /New Author/i }));
   };
@@ -135,7 +147,7 @@ describe('Authors headshot generation', () => {
       { id: 'a1', name: 'Alice', headshotImageUrl: '' },
       { id: 'a2', name: 'Bob', headshotImageUrl: '' },
     ]);
-    render(<Authors />);
+    renderAuthors();
 
     fireEvent.click(await screen.findByRole('button', { name: 'Alice' }));
     fireEvent.change(screen.getByPlaceholderText(/silver-streaked dark hair/i), {
@@ -164,7 +176,7 @@ describe('Authors headshot generation', () => {
       { id: 'a1', name: 'Alice', headshotImageUrl: '' },
       { id: 'a2', name: 'Bob', headshotImageUrl: '' },
     ]);
-    render(<Authors />);
+    renderAuthors();
 
     fireEvent.click(await screen.findByRole('button', { name: 'Alice' }));
     fireEvent.change(screen.getByPlaceholderText(/silver-streaked dark hair/i), {
diff --git a/client/src/pages/Browser.jsx b/client/src/pages/Browser.jsx
index b0907cee4..271c4b701 100644
--- a/client/src/pages/Browser.jsx
+++ b/client/src/pages/Browser.jsx
@@ -13,6 +13,7 @@ import {
   browserDownloadUrl, deleteBrowserDownload
 } from '../services/api';
 import toast from '../components/ui/Toast';
+import { FormField } from '../components/ui/FormField';
 import { formatBytes, formatDateTime } from '../utils/formatters';
 
 const POLL_INTERVAL = 5000;
@@ -85,7 +86,7 @@ export default function BrowserPage() {
 
   const handleAction = useCallback(async (action, fn) => {
     setActionLoading(action);
-    const result = await fn().catch(err => {
+    const result = await fn({ silent: true }).catch(err => {
       toast.error(`Failed to ${action}: ${err.message}`);
       return null;
     });
@@ -99,7 +100,7 @@ export default function BrowserPage() {
 
   const handleSaveConfig = useCallback(async () => {
     if (!configDraft) return;
-    const saved = await updateBrowserConfig(configDraft).catch(err => {
+    const saved = await updateBrowserConfig(configDraft, { silent: true }).catch(err => {
       toast.error(`Failed to save config: ${err.message}`);
       return null;
     });
@@ -111,7 +112,7 @@ export default function BrowserPage() {
   }, [configDraft]);
 
   const handleDeleteDownload = useCallback(async (name) => {
-    const ok = await deleteBrowserDownload(name).then(() => true).catch(err => {
+    const ok = await deleteBrowserDownload(name, { silent: true }).then(() => true).catch(err => {
       toast.error(`Failed to delete: ${err.message}`);
       return false;
     });
@@ -193,33 +194,30 @@ export default function BrowserPage() {
         <div className="mb-6 p-4 bg-port-card border border-port-border rounded-xl">
           <h3 className="text-lg font-semibold text-white mb-4">Browser Configuration</h3>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-            <div>
-              <label className="block text-sm text-gray-400 mb-1">CDP Port</label>
+            <FormField label="CDP Port">
               <input
                 type="number"
                 value={configDraft.cdpPort}
                 onChange={e => setConfigDraft(d => ({ ...d, cdpPort: parseInt(e.target.value, 10) || 5556 }))}
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm focus:outline-hidden focus:border-port-accent"
               />
-            </div>
-            <div>
-              <label className="block text-sm text-gray-400 mb-1">CDP Host</label>
+            </FormField>
+            <FormField label="CDP Host">
               <input
                 type="text"
                 value={configDraft.cdpHost}
                 onChange={e => setConfigDraft(d => ({ ...d, cdpHost: e.target.value }))}
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm focus:outline-hidden focus:border-port-accent"
               />
-            </div>
-            <div>
-              <label className="block text-sm text-gray-400 mb-1">Health Port</label>
+            </FormField>
+            <FormField label="Health Port">
               <input
                 type="number"
                 value={configDraft.healthPort}
                 onChange={e => setConfigDraft(d => ({ ...d, healthPort: parseInt(e.target.value, 10) || 5557 }))}
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm focus:outline-hidden focus:border-port-accent"
               />
-            </div>
+            </FormField>
             <div className="flex items-center gap-2">
               <input
                 type="checkbox"
@@ -480,7 +478,7 @@ export default function BrowserPage() {
                     onClick={() => {
                       setNavUrl(url);
                       setActionLoading('navigate');
-                      navigateBrowser(url).then(() => {
+                      navigateBrowser(url, { silent: true }).then(() => {
                         toast.success(`Opened ${label}`);
                         setNavUrl('');
                         fetchStatus();
diff --git a/client/src/pages/CatalogIngredient.jsx b/client/src/pages/CatalogIngredient.jsx
index 38bdd2e3c..82bc937e2 100644
--- a/client/src/pages/CatalogIngredient.jsx
+++ b/client/src/pages/CatalogIngredient.jsx
@@ -7,7 +7,7 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useNavigate, useParams, Link } from 'react-router-dom';
-import { Sparkles, Save, Trash2, ArrowLeft, Loader2, ExternalLink, Plus, X, History, RotateCcw, Image as ImageIcon, Star, ChevronDown } from 'lucide-react';
+import { Sparkles, Save, Trash2, ArrowLeft, Loader2, ExternalLink, Plus, X, History, RotateCcw, Image as ImageIcon, Star, ChevronDown, Upload, Mic, Square } from 'lucide-react';
 import toast from '../components/ui/Toast';
 import {
   getCatalogIngredientDetails,
@@ -22,7 +22,10 @@ import {
   attachCatalogIngredientMedia,
   setCatalogIngredientPortrait,
   detachCatalogIngredientMedia,
+  uploadCatalogIngredientMediaFile,
+  recordCatalogIngredientVoiceMemo,
 } from '../services/apiCatalog';
+import { startMemoRecording, arrayBufferToBase64 } from '../lib/audioRecorder';
 import { listImageGallery } from '../services/apiImageVideo';
 import { generateImage } from '../services/apiSystem';
 import { composeCanonStyledPrompt } from '../lib/composeStyledPrompt';
@@ -275,6 +278,36 @@ export default function CatalogIngredient() {
     toast.success(hasPortrait ? 'Generated image attached' : 'Generated portrait set');
   }, [record, media, refreshMedia]);
 
+  // Upload a dropped/picked file straight onto the ingredient. The server picks
+  // the media kind (image→reference, audio, video) from the MIME and stores the
+  // bytes in the matching federating library dir. Reconcile via refreshMedia.
+  const handleUploadFile = useCallback(async (file) => {
+    if (!record || !file) return;
+    const dataBase64 = arrayBufferToBase64(await file.arrayBuffer());
+    const ok = await uploadCatalogIngredientMediaFile(
+      record.id,
+      { dataBase64, mimeType: file.type || 'application/octet-stream', filename: file.name },
+      { silent: true },
+    ).then(() => true).catch((err) => { toast.error(err?.message || 'Upload failed'); return false; });
+    if (!ok) return;
+    refreshMedia();
+    toast.success('File attached');
+  }, [record, refreshMedia]);
+
+  // Attach a recorded voice memo — the server transcribes it via Whisper and
+  // stores the transcript in the audio row's caption.
+  const handleRecordVoiceMemo = useCallback(async (clip) => {
+    if (!record || !clip?.audioBase64) return;
+    const ok = await recordCatalogIngredientVoiceMemo(
+      record.id,
+      { audioBase64: clip.audioBase64, mimeType: clip.mimeType },
+      { silent: true },
+    ).then(() => true).catch((err) => { toast.error(err?.message || 'Voice memo failed'); return false; });
+    if (!ok) return;
+    refreshMedia();
+    toast.success('Voice memo attached');
+  }, [record, refreshMedia]);
+
   const handleSave = async () => {
     if (!record) return;
     const trimmedName = name.trim();
@@ -489,6 +522,8 @@ export default function CatalogIngredient() {
           onAttach={handleAttachMedia}
           onSetPortrait={handleSetPortrait}
           onDetach={handleDetachMedia}
+          onUploadFile={handleUploadFile}
+          onRecordVoice={handleRecordVoiceMemo}
           genIngredientId={record.id}
           genName={name}
           genDescription={genDescription}
@@ -869,10 +904,11 @@ function RelationsPanel({ record, relations, onAdd, onRemove }) {
 // the panel scopes its picker to the existing gallery/history. The portrait
 // (one per ingredient) renders large at the head; other attachments tile below.
 // Drag-and-drop accepts an in-app gallery filename dragged as text (the
-// dashboard/gallery tiles set `dataTransfer.setData('text/plain', filename)`);
-// file-upload + voice-memo capture are intentionally out of scope here and
-// land via the separate `[catalog-source-kinds-url-file-voice]` item — the
-// `onAttach(mediaKey, kind)` seam is all those paths need to reuse.
+// dashboard/gallery tiles set `dataTransfer.setData('text/plain', filename)`) OR
+// a real file dropped from the OS. "Upload file" (image/audio/video) and "Record
+// memo" (MediaRecorder → WAV → Whisper transcript) persist through the catalog
+// media-upload/voice routes into the federating library dirs, then attach via
+// the same media-refs seam gallery picks use.
 // "Generate" affordance for the Media panel — turns the ingredient's
 // description into an image via the same image-gen queue the Universe canon
 // renders use. The generated file lands in the media library as `<jobId>.png`;
@@ -1045,20 +1081,68 @@ function GenerateImageControl({ ingredientId, name, description, universeId, onC
   );
 }
 
-function MediaPanel({ media, missingMedia, onAttach, onSetPortrait, onDetach, genIngredientId, genName, genDescription, genUniverseId, onGenerated }) {
+function MediaPanel({ media, missingMedia, onAttach, onSetPortrait, onDetach, onUploadFile, onRecordVoice, genIngredientId, genName, genDescription, genUniverseId, onGenerated }) {
   const [pickerOpen, setPickerOpen] = useState(false);
   const [dragOver, setDragOver] = useState(false);
+  const [busy, setBusy] = useState(false); // upload or transcription in flight
+  const [recording, setRecording] = useState(false);
+  const fileInputRef = useRef(null);
+  const recorderRef = useRef(null);
   const list = Array.isArray(media) ? media : [];
   const portrait = list.find((m) => m.kind === 'portrait');
   const others = list.filter((m) => m.kind !== 'portrait');
 
+  // Release the mic if the panel unmounts mid-recording (navigating away).
+  useEffect(() => () => { recorderRef.current?.cancel?.(); }, []);
+
+  const doUpload = async (file) => {
+    if (!file || busy) return;
+    setBusy(true);
+    await onUploadFile(file);
+    setBusy(false);
+  };
+
   const onDrop = (e) => {
     e.preventDefault();
     setDragOver(false);
     // In-app gallery DnD: the dragged tile carries its filename as text.
     const key = (e.dataTransfer.getData('text/plain') || '').trim();
     if (key) { onAttach(key, 'reference'); return; }
-    toast.error('Drop a gallery image, or use “Pick from gallery”. File upload coming soon.');
+    const file = e.dataTransfer.files?.[0];
+    if (file) { doUpload(file); return; }
+    toast.error('Drop a gallery image, a file, or use “Pick from gallery”.');
+  };
+
+  const onFilePicked = (e) => {
+    const file = e.target.files?.[0];
+    e.target.value = ''; // allow re-picking the same file
+    if (file) doUpload(file);
+  };
+
+  const startRecording = async () => {
+    const handle = await startMemoRecording().catch((err) => {
+      toast.error(err?.message || 'Microphone unavailable');
+      return null;
+    });
+    if (!handle) return;
+    recorderRef.current = handle;
+    setRecording(true);
+  };
+
+  const stopRecording = async () => {
+    const handle = recorderRef.current;
+    if (!handle) return;
+    recorderRef.current = null;
+    setRecording(false);
+    const clip = await handle.stop().catch((err) => { toast.error(err?.message || 'Recording failed'); return null; });
+    if (!clip?.audioBase64) return;
+    if (clip.peak !== undefined && clip.peak < 0.01) {
+      toast.error('That memo was silent — check your microphone and try again.');
+      return;
+    }
+    setBusy(true);
+    await onRecordVoice(clip);
+    setBusy(false);
   };
 
   return (
@@ -1067,12 +1151,28 @@ function MediaPanel({ media, missingMedia, onAttach, onSetPortrait, onDetach, ge
         <h2 className="text-sm font-semibold text-white flex items-center gap-1.5">
           <ImageIcon size={14} aria-hidden="true" /> Media
         </h2>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 flex-wrap">
           <GenerateImageControl ingredientId={genIngredientId} name={genName} description={genDescription} universeId={genUniverseId} onComplete={onGenerated} />
           <button type="button" onClick={() => setPickerOpen(true)}
             className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border border-port-border text-gray-300 hover:text-white hover:border-port-accent">
             <Plus size={12} aria-hidden="true" /> Pick from gallery
           </button>
+          <button type="button" onClick={() => fileInputRef.current?.click()} disabled={busy || recording}
+            className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border border-port-border text-gray-300 hover:text-white hover:border-port-accent disabled:opacity-40">
+            <Upload size={12} aria-hidden="true" /> Upload file
+          </button>
+          {!recording ? (
+            <button type="button" onClick={startRecording} disabled={busy}
+              className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border border-port-border text-gray-300 hover:text-white hover:border-port-accent disabled:opacity-40">
+              <Mic size={12} aria-hidden="true" /> Record memo
+            </button>
+          ) : (
+            <button type="button" onClick={stopRecording}
+              className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border border-port-error text-port-error hover:bg-port-error/10 animate-pulse">
+              <Square size={12} aria-hidden="true" /> Stop &amp; transcribe
+            </button>
+          )}
+          <input ref={fileInputRef} type="file" accept="image/*,audio/*,video/*" onChange={onFilePicked} className="hidden" />
         </div>
       </div>
 
@@ -1082,7 +1182,9 @@ function MediaPanel({ media, missingMedia, onAttach, onSetPortrait, onDetach, ge
         onDrop={onDrop}
         className={`mb-3 rounded-lg border border-dashed p-3 text-center text-xs transition-colors ${dragOver ? 'border-port-accent bg-port-accent/10 text-white' : 'border-port-border text-gray-500'}`}
       >
-        Drag a gallery image here to attach it as a reference.
+        {busy
+          ? (<span className="inline-flex items-center gap-1"><Loader2 size={12} className="animate-spin" aria-hidden="true" /> Working…</span>)
+          : 'Drag a gallery image or a file here to attach it (image, audio, or video).'}
       </div>
 
       {portrait && (
@@ -1103,7 +1205,7 @@ function MediaPanel({ media, missingMedia, onAttach, onSetPortrait, onDetach, ge
       )}
 
       {list.length === 0 && (
-        <p className="text-xs text-gray-500">No media yet. Attach a generated portrait, a mood/reference image, or a recorded memo (memo capture coming soon).</p>
+        <p className="text-xs text-gray-500">No media yet. Attach a generated portrait, a mood/reference image, an uploaded file, or a recorded voice memo.</p>
       )}
 
       {pickerOpen && (
@@ -1122,15 +1224,32 @@ function MediaPanel({ media, missingMedia, onAttach, onSetPortrait, onDetach, ge
 
 // One media attachment tile. Images render via <MediaImage> (gracefully shows a
 // "syncing" placeholder when the asset hasn't arrived — the same surface the
-// `missing` integrity flag warns about). Non-image kinds render a labeled chip.
+// `missing` integrity flag warns about). Audio/video render inline players
+// (their bytes are served from /data/audio and /data/videos); a voice memo's
+// transcript rides in `caption`. Other kinds render a labeled chip.
 function MediaTile({ m, missing, isPortrait = false, onSetPortrait, onDetach }) {
   const isImage = m.kind === 'portrait' || m.kind === 'reference';
+  const isAudio = m.kind === 'audio';
+  const isVideo = m.kind === 'video';
   return (
     <div className="relative group rounded border border-port-border overflow-hidden bg-port-bg">
-      {isImage ? (
+      {isImage && (
         <MediaImage src={`/data/images/${m.mediaKey}`} alt={m.caption || m.kind}
           className={isPortrait ? 'w-full max-w-[180px] aspect-square object-cover' : 'w-full aspect-square object-cover'} />
-      ) : (
+      )}
+      {isAudio && (
+        <div className="p-2 flex flex-col gap-1">
+          <div className="text-[10px] uppercase tracking-wider text-gray-400 flex items-center gap-1">
+            <Mic size={10} aria-hidden="true" /> {m.role === 'voice-memo' ? 'voice memo' : 'audio'}
+          </div>
+          <audio controls preload="none" src={`/data/audio/${m.mediaKey}`} className="w-full" />
+          {m.caption && <p className="text-[11px] text-gray-300 whitespace-pre-wrap line-clamp-4">{m.caption}</p>}
+        </div>
+      )}
+      {isVideo && (
+        <video controls preload="none" src={`/data/videos/${m.mediaKey}`} className="w-full aspect-square object-cover bg-black" />
+      )}
+      {!isImage && !isAudio && !isVideo && (
         <div className="w-full aspect-square flex items-center justify-center text-[10px] uppercase tracking-wider text-gray-400 px-1 text-center">
           {m.kind}<br />{m.mediaKey}
         </div>
diff --git a/client/src/pages/CharacterSheet.jsx b/client/src/pages/CharacterSheet.jsx
index cfe3cca64..02a97397f 100644
--- a/client/src/pages/CharacterSheet.jsx
+++ b/client/src/pages/CharacterSheet.jsx
@@ -216,7 +216,7 @@ export default function CharacterSheet() {
     // The route persists `avatarPath` onto the character server-side
     // (persistToCharacter), so no follow-up charPut is needed — keep the
     // optimistic setChar for instant feedback.
-    generateAvatar({ name: char.name, characterClass: char.class, persistToCharacter: true })
+    generateAvatar({ name: char.name, characterClass: char.class, persistToCharacter: true }, { silent: true })
       .then(result => {
         setChar(prev => ({ ...prev, avatarPath: result.path }));
       })
diff --git a/client/src/pages/ChiefOfStaff.jsx b/client/src/pages/ChiefOfStaff.jsx
index 16e9d702d..3a67906c6 100644
--- a/client/src/pages/ChiefOfStaff.jsx
+++ b/client/src/pages/ChiefOfStaff.jsx
@@ -57,6 +57,9 @@ const CANVAS_AVATAR_STYLES = new Set([
   'miniMaleC', 'miniFemaleD',
 ]);
 
+// Shared brand gradient for the "CoS" wordmark headings (clipped to text).
+const COS_TITLE_GRADIENT = 'linear-gradient(135deg, #6366f1, #8b5cf6, #06b6d4)';
+
 export default function ChiefOfStaff() {
   const { tab } = useParams();
   const navigate = useNavigate();
@@ -297,7 +300,7 @@ export default function ChiefOfStaff() {
   }, [socket, fetchData]);
 
   const handleStart = async () => {
-    const result = await api.startCos().catch(err => {
+    const result = await api.startCos({ silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -312,7 +315,7 @@ export default function ChiefOfStaff() {
   };
 
   const handleStop = async () => {
-    const result = await api.stopCos().catch(err => {
+    const result = await api.stopCos({ silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -325,7 +328,7 @@ export default function ChiefOfStaff() {
   };
 
   const handleForceEvaluate = async () => {
-    await api.forceCosEvaluate().catch(err => toast.error(err.message));
+    await api.forceCosEvaluate({ silent: true }).catch(err => toast.error(err.message));
     toast.success('Evaluation triggered');
     setAgentState('thinking');
     setStatusMessage("Evaluating tasks...");
@@ -366,7 +369,7 @@ export default function ChiefOfStaff() {
     setAgentState('investigating');
     setStatusMessage("Running system health check...");
     setSpeaking(true);
-    const result = await api.forceHealthCheck().catch(err => {
+    const result = await api.forceHealthCheck({ silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -601,7 +604,7 @@ export default function ChiefOfStaff() {
                 <h1
                   className="text-base font-bold"
                   style={{
-                    background: 'linear-gradient(135deg, #6366f1, #8b5cf6, #06b6d4)',
+                    background: COS_TITLE_GRADIENT,
                     WebkitBackgroundClip: 'text',
                     WebkitTextFillColor: 'transparent',
                     backgroundClip: 'text'
@@ -652,7 +655,7 @@ export default function ChiefOfStaff() {
               <h1
                 className="text-base font-bold"
                 style={{
-                  background: 'linear-gradient(135deg, #6366f1, #8b5cf6, #06b6d4)',
+                  background: COS_TITLE_GRADIENT,
                   WebkitBackgroundClip: 'text',
                   WebkitTextFillColor: 'transparent',
                   backgroundClip: 'text'
@@ -704,7 +707,7 @@ export default function ChiefOfStaff() {
               <h1
                 className="hidden lg:block text-lg sm:text-xl lg:text-2xl xl:text-3xl font-bold mb-2 lg:mb-4"
                 style={{
-                  background: 'linear-gradient(135deg, #6366f1, #8b5cf6, #06b6d4)',
+                  background: COS_TITLE_GRADIENT,
                   WebkitBackgroundClip: 'text',
                   WebkitTextFillColor: 'transparent',
                   backgroundClip: 'text'
diff --git a/client/src/pages/Dashboard.jsx b/client/src/pages/Dashboard.jsx
index dca743524..bdbcfc065 100644
--- a/client/src/pages/Dashboard.jsx
+++ b/client/src/pages/Dashboard.jsx
@@ -19,6 +19,9 @@ export default function Dashboard() {
   const [apps, setApps] = useState([]);
   const [health, setHealth] = useState(null);
   const [usage, setUsage] = useState(null);
+  const [tribeCare, setTribeCare] = useState(null);
+  const [feeds, setFeeds] = useState(null);
+  const [meatspaceLogging, setMeatspaceLogging] = useState(null);
   const [loading, setLoading] = useState(true);
   const [dataError, setDataError] = useState(null);
   const [layoutsError, setLayoutsError] = useState(null);
@@ -58,14 +61,20 @@ export default function Dashboard() {
 
   const fetchData = useCallback(async () => {
     setDataError(null);
-    const [appsData, healthData, usageData] = await Promise.all([
+    const [appsData, healthData, usageData, tribeCareData, feedsData, meatspaceLoggingData] = await Promise.all([
       api.getApps().catch((err) => { setDataError(err.message); return []; }),
       api.checkHealth().catch(() => null),
       api.getUsage().catch(() => null),
+      api.getTribeCareSummary({ silent: true }).catch(() => null),
+      api.getFeedStats({ silent: true }).catch(() => null),
+      api.getMeatspaceLoggingStats({ silent: true }).catch(() => null),
     ]);
     setApps(appsData);
     setHealth(healthData);
     setUsage(usageData);
+    setTribeCare(tribeCareData);
+    setFeeds(feedsData);
+    setMeatspaceLogging(meatspaceLoggingData);
     setLoading(false);
   }, []);
 
@@ -162,8 +171,8 @@ export default function Dashboard() {
   }), [activeApps]);
 
   const dashboardState = useMemo(
-    () => ({ apps, sortedApps, activeApps, appStats, health, usage, refetch: fetchData }),
-    [apps, sortedApps, activeApps, appStats, health, usage, fetchData]
+    () => ({ apps, sortedApps, activeApps, appStats, health, usage, tribeCare, feeds, meatspaceLogging, refetch: fetchData }),
+    [apps, sortedApps, activeApps, appStats, health, usage, tribeCare, feeds, meatspaceLogging, fetchData]
   );
 
   // Falls back to a local minimal layout only AFTER the initial fetch has
diff --git a/client/src/pages/DataDog.jsx b/client/src/pages/DataDog.jsx
index 26517ba3b..2de90b144 100644
--- a/client/src/pages/DataDog.jsx
+++ b/client/src/pages/DataDog.jsx
@@ -1,5 +1,7 @@
 import { useState, useEffect } from 'react';
 import toast from '../components/ui/Toast';
+import { FormField } from '../components/ui/FormField';
+import PageSkeleton from '../components/ui/PageSkeleton';
 import api from '../services/api';
 
 const SITE_OPTIONS = [
@@ -181,11 +183,7 @@ export default function DataDog() {
   };
 
   if (loading) {
-    return (
-      <div className="flex justify-center items-center h-screen">
-        <div className="text-gray-400">Loading DataDog instances...</div>
-      </div>
-    );
+    return <PageSkeleton titleWidthClass="w-56" cards={2} />;
   }
 
   return (
@@ -243,10 +241,7 @@ export default function DataDog() {
             )}
 
             <div className="space-y-4">
-              <div>
-                <label className="block text-sm font-medium text-gray-300 mb-1">
-                  Instance ID
-                </label>
+              <FormField label="Instance ID" labelClassName="block text-sm font-medium text-gray-300 mb-1">
                 <input
                   type="text"
                   name="id"
@@ -259,12 +254,9 @@ export default function DataDog() {
                 <p className="text-xs text-gray-400 mt-1">
                   Unique identifier (cannot be changed after creation)
                 </p>
-              </div>
+              </FormField>
 
-              <div>
-                <label className="block text-sm font-medium text-gray-300 mb-1">
-                  Display Name
-                </label>
+              <FormField label="Display Name" labelClassName="block text-sm font-medium text-gray-300 mb-1">
                 <input
                   type="text"
                   name="name"
@@ -273,12 +265,9 @@ export default function DataDog() {
                   className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded text-white"
                   placeholder="e.g., Company DataDog"
                 />
-              </div>
+              </FormField>
 
-              <div>
-                <label className="block text-sm font-medium text-gray-300 mb-1">
-                  Site
-                </label>
+              <FormField label="Site" labelClassName="block text-sm font-medium text-gray-300 mb-1">
                 <select
                   value={customSite ? 'custom' : formData.site}
                   onChange={handleSiteChange}
@@ -298,12 +287,9 @@ export default function DataDog() {
                     placeholder="e.g., api.custom-datadog.com"
                   />
                 )}
-              </div>
+              </FormField>
 
-              <div>
-                <label className="block text-sm font-medium text-gray-300 mb-1">
-                  API Key
-                </label>
+              <FormField label="API Key" labelClassName="block text-sm font-medium text-gray-300 mb-1">
                 <input
                   type="password"
                   name="apiKey"
@@ -315,12 +301,9 @@ export default function DataDog() {
                 <p className="text-xs text-gray-400 mt-1">
                   Found in DataDog Organization Settings &rarr; API Keys
                 </p>
-              </div>
+              </FormField>
 
-              <div>
-                <label className="block text-sm font-medium text-gray-300 mb-1">
-                  Application Key
-                </label>
+              <FormField label="Application Key" labelClassName="block text-sm font-medium text-gray-300 mb-1">
                 <input
                   type="password"
                   name="appKey"
@@ -332,7 +315,7 @@ export default function DataDog() {
                 <p className="text-xs text-gray-400 mt-1">
                   Found in DataDog Organization Settings &rarr; Application Keys
                 </p>
-              </div>
+              </FormField>
 
               <div className="flex flex-col sm:flex-row gap-2">
                 <button
diff --git a/client/src/pages/FeatureAgentDetail.jsx b/client/src/pages/FeatureAgentDetail.jsx
index 213353568..fcb3fcc61 100644
--- a/client/src/pages/FeatureAgentDetail.jsx
+++ b/client/src/pages/FeatureAgentDetail.jsx
@@ -47,19 +47,19 @@ export default function FeatureAgentDetail() {
   }, [fetchAgent, id]);
 
   const handleStart = useCallback((agentId) => {
-    api.startFeatureAgent(agentId).then(data => { setAgent(prev => ({ ...prev, ...data })); toast.success('Activated'); }).catch(err => toast.error(err.message || 'Action failed'));
+    api.startFeatureAgent(agentId, { silent: true }).then(data => { setAgent(prev => ({ ...prev, ...data })); toast.success('Activated'); }).catch(err => toast.error(err.message || 'Action failed'));
   }, []);
   const handlePause = useCallback((agentId) => {
-    api.pauseFeatureAgent(agentId).then(data => { setAgent(prev => ({ ...prev, ...data })); toast.success('Paused'); }).catch(err => toast.error(err.message || 'Action failed'));
+    api.pauseFeatureAgent(agentId, { silent: true }).then(data => { setAgent(prev => ({ ...prev, ...data })); toast.success('Paused'); }).catch(err => toast.error(err.message || 'Action failed'));
   }, []);
   const handleResume = useCallback((agentId) => {
-    api.resumeFeatureAgent(agentId).then(data => { setAgent(prev => ({ ...prev, ...data })); toast.success('Resumed'); }).catch(err => toast.error(err.message || 'Action failed'));
+    api.resumeFeatureAgent(agentId, { silent: true }).then(data => { setAgent(prev => ({ ...prev, ...data })); toast.success('Resumed'); }).catch(err => toast.error(err.message || 'Action failed'));
   }, []);
   const handleStop = useCallback((agentId) => {
-    api.stopFeatureAgent(agentId).then(data => { setAgent(prev => ({ ...prev, ...data })); toast.success('Stopped'); }).catch(err => toast.error(err.message || 'Action failed'));
+    api.stopFeatureAgent(agentId, { silent: true }).then(data => { setAgent(prev => ({ ...prev, ...data })); toast.success('Stopped'); }).catch(err => toast.error(err.message || 'Action failed'));
   }, []);
   const handleTrigger = useCallback((agentId) => {
-    api.triggerFeatureAgent(agentId).then(() => toast.success('Run triggered')).catch(err => toast.error(err.message || 'Action failed'));
+    api.triggerFeatureAgent(agentId, { silent: true }).then(() => toast.success('Run triggered')).catch(err => toast.error(err.message || 'Action failed'));
   }, []);
 
   const handleSave = useCallback((saved) => {
diff --git a/client/src/pages/FeatureAgents.jsx b/client/src/pages/FeatureAgents.jsx
index 9fc4a3b9a..bc27cb6c2 100644
--- a/client/src/pages/FeatureAgents.jsx
+++ b/client/src/pages/FeatureAgents.jsx
@@ -31,41 +31,41 @@ export default function FeatureAgents() {
   }, [fetchAgents]);
 
   const handleStart = useCallback((id) => {
-    api.startFeatureAgent(id).then(agent => {
+    api.startFeatureAgent(id, { silent: true }).then(agent => {
       setAgents(prev => prev.map(a => a.id === id ? { ...a, ...agent } : a));
       toast.success('Feature agent activated');
     }).catch(err => toast.error(err.message || 'Action failed'));
   }, []);
 
   const handlePause = useCallback((id) => {
-    api.pauseFeatureAgent(id).then(agent => {
+    api.pauseFeatureAgent(id, { silent: true }).then(agent => {
       setAgents(prev => prev.map(a => a.id === id ? { ...a, ...agent } : a));
       toast.success('Feature agent paused');
     }).catch(err => toast.error(err.message || 'Action failed'));
   }, []);
 
   const handleResume = useCallback((id) => {
-    api.resumeFeatureAgent(id).then(agent => {
+    api.resumeFeatureAgent(id, { silent: true }).then(agent => {
       setAgents(prev => prev.map(a => a.id === id ? { ...a, ...agent } : a));
       toast.success('Feature agent resumed');
     }).catch(err => toast.error(err.message || 'Action failed'));
   }, []);
 
   const handleStop = useCallback((id) => {
-    api.stopFeatureAgent(id).then(agent => {
+    api.stopFeatureAgent(id, { silent: true }).then(agent => {
       setAgents(prev => prev.map(a => a.id === id ? { ...a, ...agent } : a));
       toast.success('Feature agent stopped');
     }).catch(err => toast.error(err.message || 'Action failed'));
   }, []);
 
   const handleTrigger = useCallback((id) => {
-    api.triggerFeatureAgent(id).then(() => {
+    api.triggerFeatureAgent(id, { silent: true }).then(() => {
       toast.success('Run triggered');
     }).catch(err => toast.error(err.message || 'Action failed'));
   }, []);
 
   const handleDelete = useCallback((id) => {
-    api.deleteFeatureAgent(id).then(() => {
+    api.deleteFeatureAgent(id, { silent: true }).then(() => {
       setAgents(prev => prev.filter(a => a.id !== id));
       toast.success('Feature agent deleted');
     }).catch(err => toast.error(err.message || 'Action failed'));
diff --git a/client/src/pages/FlowsDoc.jsx b/client/src/pages/FlowsDoc.jsx
new file mode 100644
index 000000000..e7e02334d
--- /dev/null
+++ b/client/src/pages/FlowsDoc.jsx
@@ -0,0 +1,57 @@
+import { useEffect, useRef, useState } from 'react';
+import { ExternalLink } from 'lucide-react';
+import useDrawerTab from '../hooks/useDrawerTab';
+
+// Thin host for the standalone integration-flows doc (client/public/flows.html).
+// This page's ?flow= param is the source of truth for the open flow: selections
+// made inside the iframe arrive via postMessage, and outside changes (⌘K, links)
+// push back into the already-mounted doc — in embed mode the doc never writes
+// its own URL.
+export default function FlowsDoc() {
+  const [flow, setFlow] = useDrawerTab('flow', null);
+  const iframeRef = useRef(null);
+  // Captured once: updating src after mount would reload the doc on every click.
+  const [iframeSrc] = useState(() =>
+    `/flows.html?embed=1${flow ? `&flow=${encodeURIComponent(flow)}` : ''}`
+  );
+
+  useEffect(() => {
+    const onMessage = (event) => {
+      if (event.origin !== window.location.origin) return;
+      if (event.data?.type !== 'flows:select') return;
+      setFlow(event.data.flow || null);
+    };
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, [setFlow]);
+
+  useEffect(() => {
+    iframeRef.current?.contentWindow?.postMessage(
+      { type: 'flows:select', flow },
+      window.location.origin
+    );
+  }, [flow]);
+
+  return (
+    <div className="absolute inset-0 flex flex-col">
+      <div className="flex items-center justify-between px-4 py-2 border-b border-port-border flex-none">
+        <h1 className="text-lg font-semibold">Integration Flows</h1>
+        <a
+          href={`/flows.html${flow ? `?flow=${encodeURIComponent(flow)}` : ''}`}
+          target="_blank"
+          rel="noreferrer"
+          className="flex items-center gap-1.5 text-sm text-port-accent hover:underline"
+        >
+          <ExternalLink size={14} />
+          Open full screen
+        </a>
+      </div>
+      <iframe
+        ref={iframeRef}
+        title="PortOS integration flows"
+        src={iframeSrc}
+        className="flex-1 w-full border-0"
+      />
+    </div>
+  );
+}
diff --git a/client/src/pages/GitHub.jsx b/client/src/pages/GitHub.jsx
index 267c2c765..c5bf9c672 100644
--- a/client/src/pages/GitHub.jsx
+++ b/client/src/pages/GitHub.jsx
@@ -11,6 +11,7 @@ import {
   unarchiveGitHubRepo
 } from '../services/api';
 import { timeAgo } from '../utils/formatters';
+import PageSkeleton from '../components/ui/PageSkeleton';
 
 const FILTERS = ['all', 'npm', 'secrets', 'archived'];
 
@@ -157,11 +158,7 @@ export default function GitHub() {
   const secretEntries = Object.entries(secrets);
 
   if (loading) {
-    return (
-      <div className="flex justify-center items-center h-screen">
-        <div className="text-gray-400">Loading GitHub data...</div>
-      </div>
-    );
+    return <PageSkeleton titleWidthClass="w-44" showAction={false} cards={3} />;
   }
 
   return (
diff --git a/client/src/pages/ImageGen.jsx b/client/src/pages/ImageGen.jsx
index f487297f1..e5c3507cc 100644
--- a/client/src/pages/ImageGen.jsx
+++ b/client/src/pages/ImageGen.jsx
@@ -27,6 +27,7 @@ import GalleryImagePicker from '../components/imageGen/GalleryImagePicker';
 import LoraPicker from '../components/imageGen/LoraPicker';
 import ReferenceImagePicker from '../components/imageGen/ReferenceImagePicker';
 import MediaJobsQueue from '../components/media/MediaJobsQueue';
+import { FormField } from '../components/ui/FormField';
 import { useMediaCompletionRefresh } from '../hooks/useMediaCompletionRefresh';
 import { useMediaAnnotations } from '../hooks/useMediaAnnotations';
 import { useAutoRefetch } from '../hooks/useAutoRefetch';
@@ -1105,8 +1106,7 @@ export default function ImageGen() {
             disabled={statusLoading}
           />
           <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-            <div>
-              <label className="block text-xs font-medium text-gray-400 mb-1">Prompt</label>
+            <FormField label="Prompt" labelClassName="block text-xs font-medium text-gray-400 mb-1">
               <textarea
                 value={prompt}
                 onChange={(e) => setPrompt(e.target.value)}
@@ -1115,9 +1115,8 @@ export default function ImageGen() {
                 className="w-full bg-port-bg border border-port-border rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-port-accent disabled:opacity-50 resize-y"
                 placeholder="Describe the image you want to generate..."
               />
-            </div>
-            <div>
-              <label className="block text-xs font-medium text-gray-400 mb-1">Negative Prompt</label>
+            </FormField>
+            <FormField label="Negative Prompt" labelClassName="block text-xs font-medium text-gray-400 mb-1">
               <textarea
                 value={negativePrompt}
                 onChange={(e) => setNegativePrompt(e.target.value)}
@@ -1126,7 +1125,7 @@ export default function ImageGen() {
                 className="w-full bg-port-bg border border-port-border rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-port-accent disabled:opacity-50 resize-y"
                 placeholder="What to avoid..."
               />
-            </div>
+            </FormField>
           </div>
 
           {flux2Issue === 'venv' && (
diff --git a/client/src/pages/Jira.jsx b/client/src/pages/Jira.jsx
index 1cb5ac012..763eacd5f 100644
--- a/client/src/pages/Jira.jsx
+++ b/client/src/pages/Jira.jsx
@@ -1,6 +1,8 @@
 import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import toast from '../components/ui/Toast';
+import PageSkeleton from '../components/ui/PageSkeleton';
+import { FormField } from '../components/ui/FormField';
 import api from '../services/api';
 
 const TOKEN_LIFETIME_DAYS = 30;
@@ -176,11 +178,7 @@ export default function Jira() {
   };
 
   if (loading) {
-    return (
-      <div className="flex justify-center items-center h-screen">
-        <div className="text-gray-400">Loading JIRA instances...</div>
-      </div>
-    );
+    return <PageSkeleton titleWidthClass="w-52" cards={2} />;
   }
 
   return (
@@ -246,10 +244,7 @@ export default function Jira() {
             )}
 
             <div className="space-y-4">
-              <div>
-                <label className="block text-sm font-medium text-gray-300 mb-1">
-                  Instance ID
-                </label>
+              <FormField label="Instance ID" labelClassName="block text-sm font-medium text-gray-300 mb-1">
                 <input
                   type="text"
                   name="id"
@@ -262,12 +257,9 @@ export default function Jira() {
                 <p className="text-xs text-gray-400 mt-1">
                   Unique identifier (cannot be changed after creation)
                 </p>
-              </div>
+              </FormField>
 
-              <div>
-                <label className="block text-sm font-medium text-gray-300 mb-1">
-                  Display Name
-                </label>
+              <FormField label="Display Name" labelClassName="block text-sm font-medium text-gray-300 mb-1">
                 <input
                   type="text"
                   name="name"
@@ -276,12 +268,9 @@ export default function Jira() {
                   className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded text-white"
                   placeholder="e.g., Company JIRA"
                 />
-              </div>
+              </FormField>
 
-              <div>
-                <label className="block text-sm font-medium text-gray-300 mb-1">
-                  Base URL
-                </label>
+              <FormField label="Base URL" labelClassName="block text-sm font-medium text-gray-300 mb-1">
                 <input
                   type="url"
                   name="baseUrl"
@@ -290,12 +279,9 @@ export default function Jira() {
                   className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded text-white"
                   placeholder="https://jira.example.com"
                 />
-              </div>
+              </FormField>
 
-              <div>
-                <label className="block text-sm font-medium text-gray-300 mb-1">
-                  Email
-                </label>
+              <FormField label="Email" labelClassName="block text-sm font-medium text-gray-300 mb-1">
                 <input
                   type="email"
                   name="email"
@@ -304,12 +290,9 @@ export default function Jira() {
                   className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded text-white"
                   placeholder="your.email@example.com"
                 />
-              </div>
+              </FormField>
 
-              <div>
-                <label className="block text-sm font-medium text-gray-300 mb-1">
-                  API Token (Personal Access Token)
-                </label>
+              <FormField label="API Token (Personal Access Token)" labelClassName="block text-sm font-medium text-gray-300 mb-1">
                 <input
                   type="password"
                   name="apiToken"
@@ -321,7 +304,7 @@ export default function Jira() {
                 <p className="text-xs text-gray-400 mt-1">
                   Generate this from your JIRA profile → Personal Access Tokens
                 </p>
-              </div>
+              </FormField>
 
               <div className="flex flex-col sm:flex-row gap-2">
                 <button
diff --git a/client/src/pages/JiraReports.jsx b/client/src/pages/JiraReports.jsx
index 9567af35c..e20833005 100644
--- a/client/src/pages/JiraReports.jsx
+++ b/client/src/pages/JiraReports.jsx
@@ -129,12 +129,42 @@ export default function JiraReports() {
   const [apps, setApps] = useState([]);
 
   const filterAppId = searchParams.get('app') || '';
+  // The open report lives in the URL (`?reportApp=&reportDate=`) so it's
+  // deep-linkable and reload-safe. appId + date is the report's stable id.
+  const reportApp = searchParams.get('reportApp') || '';
+  const reportDate = searchParams.get('reportDate') || '';
 
   useEffect(() => {
     loadReports();
     loadApps();
   }, []);
 
+  // Restore the URL-selected report: fetch the full record when the params name
+  // one that isn't already loaded, and clear the selection when they're absent.
+  // A stale id that no longer resolves leaves selectedReport null → the detail
+  // pane falls back to its "Select a report" placeholder.
+  useEffect(() => {
+    if (!reportApp || !reportDate) { setSelectedReport(null); return; }
+    if (selectedReport?.appId === reportApp && selectedReport?.date === reportDate) return;
+    let cancelled = false;
+    api.getJiraReport(reportApp, reportDate).then((full) => {
+      // Clear the selection when the URL names a report that no longer resolves
+      // (deleted / bad deep link) so the detail pane falls back to its
+      // placeholder instead of stranding the previously-open report.
+      if (!cancelled) setSelectedReport(full?.appId ? full : null);
+    }).catch(() => { if (!cancelled) setSelectedReport(null); });
+    return () => { cancelled = true; };
+    // selectedReport intentionally omitted — the guard above prevents refetch loops.
+  }, [reportApp, reportDate]);
+
+  const selectReport = (appId, date) => {
+    const p = new URLSearchParams(searchParams);
+    p.set('reportApp', appId);
+    p.set('reportDate', date);
+    // Push (not replace) so Back returns to the previously-open report.
+    setSearchParams(p);
+  };
+
   const loadApps = async () => {
     const allApps = await api.getApps();
     const jiraApps = (allApps || []).filter(a => a.jira?.enabled);
@@ -155,24 +185,21 @@ export default function JiraReports() {
       toast.success(appId ? 'Report generated' : `Generated ${Array.isArray(result) ? result.length : 1} report(s)`);
       await loadReports();
       if (!Array.isArray(result) && result.appId) {
+        // Set the full record directly (avoids a redundant re-fetch — the effect's
+        // guard sees the params already match) and reflect it in the URL.
         setSelectedReport(result);
+        selectReport(result.appId, result.date);
       }
     }
     setGenerating(false);
   };
 
-  const handleSelectReport = async (reportMeta) => {
-    const full = await api.getJiraReport(reportMeta.appId, reportMeta.date);
-    if (full) setSelectedReport(full);
-  };
+  const handleSelectReport = (reportMeta) => selectReport(reportMeta.appId, reportMeta.date);
 
   const handleFilterApp = (appId) => {
-    if (appId) {
-      setSearchParams({ app: appId });
-    } else {
-      setSearchParams({});
-    }
-    setSelectedReport(null);
+    // Changing the project filter drops the open report (its params too) so a
+    // filtered-out selection can't linger.
+    setSearchParams(appId ? { app: appId } : {});
   };
 
   const filteredReports = filterAppId
diff --git a/client/src/pages/Loops.jsx b/client/src/pages/Loops.jsx
index cedb6856c..674a055e9 100644
--- a/client/src/pages/Loops.jsx
+++ b/client/src/pages/Loops.jsx
@@ -6,8 +6,9 @@ import {
 import * as api from '../services/api';
 import socket from '../services/socket';
 import toast from '../components/ui/Toast';
+import { FormField } from '../components/ui/FormField';
 import { timeAgo } from '../components/feature-agents/constants';
-import { formatInterval } from '../components/cos/constants';
+import { formatDurationMs } from '../utils/formatters';
 import BrailleSpinner from '../components/BrailleSpinner';
 import { useAutoRefetch } from '../hooks/useAutoRefetch';
 
@@ -114,8 +115,7 @@ function CreateLoopForm({ providers, onCreated }) {
           </div>
         </div>
 
-        <div className="flex-1 min-w-[150px]">
-          <label className="block text-xs text-gray-400 mb-1">AI Provider</label>
+        <FormField className="flex-1 min-w-[150px]" label="AI Provider" labelClassName="block text-xs text-gray-400 mb-1">
           <select
             value={providerId}
             onChange={e => setProviderId(e.target.value)}
@@ -128,7 +128,7 @@ function CreateLoopForm({ providers, onCreated }) {
               </option>
             ))}
           </select>
-        </div>
+        </FormField>
 
         <button
           type="button"
@@ -141,8 +141,7 @@ function CreateLoopForm({ providers, onCreated }) {
 
       {expanded && (
         <div className="flex flex-wrap gap-3">
-          <div className="flex-1 min-w-[200px]">
-            <label className="block text-xs text-gray-400 mb-1">Name (optional)</label>
+          <FormField className="flex-1 min-w-[200px]" label="Name (optional)" labelClassName="block text-xs text-gray-400 mb-1">
             <input
               type="text"
               value={name}
@@ -150,9 +149,8 @@ function CreateLoopForm({ providers, onCreated }) {
               placeholder="Loop name for display"
               className="w-full bg-port-bg border border-port-border rounded px-2 py-1 text-xs text-gray-200 placeholder-gray-600"
             />
-          </div>
-          <div className="flex-1 min-w-[200px]">
-            <label className="block text-xs text-gray-400 mb-1">Working Directory (optional)</label>
+          </FormField>
+          <FormField className="flex-1 min-w-[200px]" label="Working Directory (optional)" labelClassName="block text-xs text-gray-400 mb-1">
             <input
               type="text"
               value={cwd}
@@ -160,7 +158,7 @@ function CreateLoopForm({ providers, onCreated }) {
               placeholder="/path/to/project"
               className="w-full bg-port-bg border border-port-border rounded px-2 py-1 text-xs text-gray-200 placeholder-gray-600"
             />
-          </div>
+          </FormField>
         </div>
       )}
 
@@ -234,7 +232,7 @@ function LoopCard({ loop, onAction, expandedId, onToggle }) {
           <div className="flex items-center gap-2">
             <span className="text-sm font-medium text-gray-200 truncate">{loop.name}</span>
             <StatusBadge loop={loop} />
-            <span className="text-xs text-gray-500">every {formatInterval(loop.intervalMs)}</span>
+            <span className="text-xs text-gray-500">every {formatDurationMs(loop.intervalMs)}</span>
           </div>
           <div className="flex items-center gap-3 mt-0.5 text-xs text-gray-500">
             <span>#{loop.currentIteration || 0} iterations</span>
diff --git a/client/src/pages/Loras.jsx b/client/src/pages/Loras.jsx
index 92ed29aeb..ee0168a66 100644
--- a/client/src/pages/Loras.jsx
+++ b/client/src/pages/Loras.jsx
@@ -13,6 +13,7 @@ import { Trash2, Download, ExternalLink, Sparkles, AlertTriangle, KeyRound, Chec
 import toast from '../components/ui/Toast';
 import Modal from '../components/ui/Modal';
 import Banner from '../components/ui/Banner';
+import { FormField } from '../components/ui/FormField';
 import { formatBytes } from '../utils/formatters';
 import { RUNNER_FAMILIES, VIDEO_LORA_FAMILIES, isVideoLoraFamily } from '../lib/runnerFamilies';
 import {
@@ -917,16 +918,17 @@ function CivitaiAuthModal({ pendingUrl, message, auth, onClose, onSaved, onRetry
       </p>
 
       <form onSubmit={handleSave} className="space-y-2">
-        <label className="block text-xs font-medium text-gray-400">API key</label>
-        <input
-          type="password"
-          value={apiKey}
-          onChange={(e) => setApiKey(e.target.value)}
-          placeholder={auth?.hasKey ? '•••• key already set — paste a new one to replace' : 'paste your Civitai API key'}
-          className="w-full bg-port-bg border border-port-border rounded px-3 py-2 text-sm text-gray-200 placeholder:text-gray-600 font-mono"
-          disabled={saving}
-          autoFocus
-        />
+        <FormField label="API key" labelClassName="block text-xs font-medium text-gray-400" className="space-y-2">
+          <input
+            type="password"
+            value={apiKey}
+            onChange={(e) => setApiKey(e.target.value)}
+            placeholder={auth?.hasKey ? '•••• key already set — paste a new one to replace' : 'paste your Civitai API key'}
+            className="w-full bg-port-bg border border-port-border rounded px-3 py-2 text-sm text-gray-200 placeholder:text-gray-600 font-mono"
+            disabled={saving}
+            autoFocus
+          />
+        </FormField>
         <div className="flex items-center gap-2 pt-1">
           <button
             type="submit"
diff --git a/client/src/pages/MediaAnnotate.jsx b/client/src/pages/MediaAnnotate.jsx
new file mode 100644
index 000000000..91df71158
--- /dev/null
+++ b/client/src/pages/MediaAnnotate.jsx
@@ -0,0 +1,245 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { Pencil, Eraser, Undo2, Trash2, Save, Download, ArrowLeft, ImageOff } from 'lucide-react';
+import toast from '../components/ui/Toast';
+import AnnotationCanvas from '../components/media/AnnotationCanvas';
+import { useAsyncAction } from '../hooks/useAsyncAction';
+import { undoStrokes, clampSize, DEFAULT_COLOR, DEFAULT_SIZE, MIN_SIZE, MAX_SIZE } from '../lib/sketchCanvas';
+import { getMediaSketch, saveMediaSketch } from '../services/api';
+
+// Parse a media key `<kind>:<ref>` on the client (mirrors server/lib/mediaItemKey.js
+// rules loosely — the server re-validates authoritatively). Phase 1 only supports
+// annotating images.
+function parseMediaKey(key) {
+  if (typeof key !== 'string') return null;
+  const idx = key.indexOf(':');
+  if (idx <= 0) return null;
+  const kind = key.slice(0, idx);
+  const ref = key.slice(idx + 1);
+  if (!ref || ref.includes(':')) return null;
+  return { kind, ref };
+}
+
+const COLOR_SWATCHES = ['#ef4444', '#f59e0b', '#22c55e', '#3b82f6', '#a855f7', '#ffffff', '#000000'];
+
+export default function MediaAnnotate() {
+  const { mediaKey } = useParams();
+  const parsed = useMemo(() => parseMediaKey(mediaKey), [mediaKey]);
+  const isImage = parsed?.kind === 'image';
+  // Images are served from /data/images/<filename>; the ref IS the filename.
+  const imageSrc = isImage ? `/data/images/${parsed.ref}` : null;
+
+  const canvasApiRef = useRef(null);
+  const [strokes, setStrokes] = useState([]);
+  const [dims, setDims] = useState(null);
+  const [color, setColor] = useState(DEFAULT_COLOR);
+  const [size, setSize] = useState(DEFAULT_SIZE);
+  const [mode, setMode] = useState('draw'); // 'draw' | 'erase'
+  const [loading, setLoading] = useState(true);
+  const [imageError, setImageError] = useState(false);
+
+  // Load any previously-saved strokes for this media key. React Router reuses
+  // this component instance across :mediaKey changes (no remount), so reset all
+  // transient view state synchronously before fetching — otherwise the previous
+  // key's strokes / imageError / dims leak onto the new image.
+  useEffect(() => {
+    if (!isImage) { setLoading(false); return; }
+    let active = true;
+    setStrokes([]);
+    setDims(null);
+    setImageError(false);
+    setLoading(true);
+    getMediaSketch(mediaKey, { silent: true })
+      .then((res) => {
+        if (!active) return;
+        const loaded = Array.isArray(res?.sketch?.strokes) ? res.sketch.strokes : [];
+        setStrokes(loaded);
+        if (loaded.length > 0) toast.success(`Restored ${loaded.length} stroke${loaded.length === 1 ? '' : 's'}`);
+      })
+      .catch(() => { if (active) toast.error('Failed to load saved annotation'); })
+      .finally(() => { if (active) setLoading(false); });
+    return () => { active = false; };
+  }, [mediaKey, isImage]);
+
+  const tool = useMemo(() => ({ color, size, mode }), [color, size, mode]);
+
+  const handleUndo = useCallback(() => setStrokes((prev) => undoStrokes(prev)), []);
+  const handleClear = useCallback(() => setStrokes([]), []);
+
+  const [save, saving] = useAsyncAction(async () => {
+    if (!dims) throw new Error('Canvas not ready');
+    const png = canvasApiRef.current?.exportPng?.() || undefined;
+    const res = await saveMediaSketch(mediaKey, {
+      width: dims.w,
+      height: dims.h,
+      strokes,
+      png,
+    }, { silent: true });
+    return res;
+  }, { errorMessage: 'Failed to save annotation' });
+
+  const handleSave = useCallback(async () => {
+    const res = await save();
+    if (res) toast.success(strokes.length ? 'Annotation saved' : 'Annotation cleared');
+  }, [save, strokes.length]);
+
+  const handleExport = useCallback(() => {
+    const dataUrl = canvasApiRef.current?.exportPng?.();
+    if (!dataUrl) { toast.error('Nothing to export yet'); return; }
+    const a = document.createElement('a');
+    a.href = dataUrl;
+    a.download = `annotated-${parsed?.ref || 'image'}.png`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }, [parsed]);
+
+  if (!isImage) {
+    return (
+      <div className="p-4 md:p-6 max-w-3xl mx-auto text-sm text-gray-400">
+        <Link to="/media/history" className="text-port-accent hover:underline inline-flex items-center gap-1">
+          <ArrowLeft className="w-4 h-4" /> Back to Media History
+        </Link>
+        <div className="mt-6 bg-port-card border border-port-border rounded-xl p-8 text-center">
+          <ImageOff className="w-8 h-8 mx-auto mb-2 text-gray-600" />
+          {mediaKey
+            ? 'Only generated images can be annotated. This link points at an unsupported or missing item.'
+            : 'Open a generated image from Media History or a Collection and choose “Annotate” to draw over it.'}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full overflow-y-auto">
+      <div className="p-3 md:p-4 border-b border-port-border flex flex-wrap items-center gap-2 sticky top-0 bg-port-bg/95 backdrop-blur z-10">
+        <Link to="/media/history" className="text-gray-400 hover:text-white inline-flex items-center gap-1 text-sm mr-1" title="Back to Media History">
+          <ArrowLeft className="w-4 h-4" /> <span className="hidden sm:inline">History</span>
+        </Link>
+
+        {/* Draw / erase */}
+        <div className="flex rounded-lg overflow-hidden border border-port-border">
+          <button
+            type="button"
+            onClick={() => setMode('draw')}
+            className={`px-2.5 py-1.5 text-xs flex items-center gap-1 ${mode === 'draw' ? 'bg-port-accent text-white' : 'bg-port-card text-gray-300 hover:bg-port-border'}`}
+            aria-pressed={mode === 'draw'}
+          >
+            <Pencil className="w-3.5 h-3.5" /> Draw
+          </button>
+          <button
+            type="button"
+            onClick={() => setMode('erase')}
+            className={`px-2.5 py-1.5 text-xs flex items-center gap-1 ${mode === 'erase' ? 'bg-port-accent text-white' : 'bg-port-card text-gray-300 hover:bg-port-border'}`}
+            aria-pressed={mode === 'erase'}
+          >
+            <Eraser className="w-3.5 h-3.5" /> Erase
+          </button>
+        </div>
+
+        {/* Color swatches */}
+        <div className="flex items-center gap-1">
+          {COLOR_SWATCHES.map((c) => (
+            <button
+              key={c}
+              type="button"
+              onClick={() => { setColor(c); setMode('draw'); }}
+              className={`w-6 h-6 rounded-full border-2 ${color === c && mode === 'draw' ? 'border-white' : 'border-port-border'}`}
+              style={{ backgroundColor: c }}
+              title={`Color ${c}`}
+              aria-label={`Color ${c}`}
+            />
+          ))}
+          <label htmlFor="annotate-color" className="sr-only">Custom color</label>
+          <input
+            id="annotate-color"
+            type="color"
+            value={color}
+            onChange={(e) => { setColor(e.target.value); setMode('draw'); }}
+            className="w-6 h-6 rounded cursor-pointer bg-transparent border border-port-border"
+            title="Custom color"
+          />
+        </div>
+
+        {/* Brush size */}
+        <div className="flex items-center gap-1.5">
+          <label htmlFor="annotate-size" className="text-xs text-gray-400">Size</label>
+          <input
+            id="annotate-size"
+            type="range"
+            min={MIN_SIZE}
+            max={MAX_SIZE}
+            value={size}
+            onChange={(e) => setSize(clampSize(e.target.value))}
+            className="w-20 md:w-28 accent-port-accent"
+          />
+          <span className="text-xs text-gray-400 w-5 tabular-nums">{size}</span>
+        </div>
+
+        <div className="flex items-center gap-1 ml-auto">
+          <button
+            type="button"
+            onClick={handleUndo}
+            disabled={strokes.length === 0}
+            className="px-2 py-1.5 text-xs bg-port-card border border-port-border rounded hover:bg-port-border disabled:opacity-40 inline-flex items-center gap-1"
+            title="Undo last stroke"
+          >
+            <Undo2 className="w-3.5 h-3.5" /> <span className="hidden sm:inline">Undo</span>
+          </button>
+          <button
+            type="button"
+            onClick={handleClear}
+            disabled={strokes.length === 0}
+            className="px-2 py-1.5 text-xs bg-port-card border border-port-border rounded hover:bg-port-border disabled:opacity-40 inline-flex items-center gap-1"
+            title="Clear all strokes"
+          >
+            <Trash2 className="w-3.5 h-3.5" /> <span className="hidden sm:inline">Clear</span>
+          </button>
+          <button
+            type="button"
+            onClick={handleExport}
+            disabled={!dims}
+            className="px-2 py-1.5 text-xs bg-port-card border border-port-border rounded hover:bg-port-border disabled:opacity-40 inline-flex items-center gap-1"
+            title="Download flattened PNG"
+          >
+            <Download className="w-3.5 h-3.5" /> <span className="hidden sm:inline">Export</span>
+          </button>
+          <button
+            type="button"
+            onClick={handleSave}
+            disabled={saving || !dims}
+            className="px-3 py-1.5 text-xs bg-port-accent text-white rounded hover:bg-port-accent/80 disabled:opacity-40 inline-flex items-center gap-1"
+            title="Save annotation"
+          >
+            <Save className="w-3.5 h-3.5" /> {saving ? 'Saving…' : 'Save'}
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 p-3 md:p-6 flex items-start justify-center">
+        {imageError ? (
+          <div className="bg-port-card border border-port-border rounded-xl p-8 text-center text-sm text-gray-400 max-w-md">
+            <ImageOff className="w-8 h-8 mx-auto mb-2 text-gray-600" />
+            Couldn't load this image. It may have been deleted or not yet synced from a peer.
+            <div className="mt-3">
+              <Link to="/media/history" className="text-port-accent hover:underline">← Back to Media History</Link>
+            </div>
+          </div>
+        ) : (
+          <div className="w-full max-w-4xl">
+            {loading && <div className="text-gray-500 text-sm mb-2">Loading saved annotation…</div>}
+            <AnnotationCanvas
+              ref={canvasApiRef}
+              imageSrc={imageSrc}
+              strokes={strokes}
+              tool={tool}
+              onStrokesChange={setStrokes}
+              onImageLoad={setDims}
+              onImageError={() => setImageError(true)}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/pages/MediaCollectionDetail.jsx b/client/src/pages/MediaCollectionDetail.jsx
index b66443b2d..11ca1f304 100644
--- a/client/src/pages/MediaCollectionDetail.jsx
+++ b/client/src/pages/MediaCollectionDetail.jsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useParams, Link } from 'react-router-dom';
+import { useParams, Link, useNavigate } from 'react-router-dom';
 import { ArrowLeft, CheckSquare, Copy, DatabaseZap, FolderInput, Inbox, Lock, Pencil, Star, StarOff, Trash2, X } from 'lucide-react';
 import ShareToButton from '../components/sharing/ShareToButton';
 import toast from '../components/ui/Toast';
@@ -44,6 +44,7 @@ const hydrate = (collection, imagesByName, videosById) => {
 
 export default function MediaCollectionDetail() {
   const { id } = useParams();
+  const navigate = useNavigate();
   const isUnsorted = id === UNSORTED_ID;
   const [collection, setCollection] = useState(null);
   // Full collections list — fetched once for the bulk move/copy picker so it
@@ -521,6 +522,7 @@ export default function MediaCollectionDetail() {
                   selected={isSelected}
                   {...getCardProps(key)}
                   onToggleStar={!selectMode ? toggleStar : undefined}
+                  onAnnotate={!selectMode && item.kind === 'image' ? (m) => navigate(`/media/annotate/${encodeURIComponent(m.key)}`) : undefined}
                 />
                 {!selectMode && !isUnsorted && (
                   <button
diff --git a/client/src/pages/MediaHistory.jsx b/client/src/pages/MediaHistory.jsx
index ad39c3c01..f8e4a1fd6 100644
--- a/client/src/pages/MediaHistory.jsx
+++ b/client/src/pages/MediaHistory.jsx
@@ -5,7 +5,7 @@
  */
 
 import { useState, useEffect, useCallback, useMemo } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { Combine, Image as ImageIcon, Film, Search, X } from 'lucide-react';
 import toast from '../components/ui/Toast';
 import MediaCard from '../components/media/MediaCard';
@@ -30,6 +30,7 @@ const FILTERS = [
 ];
 
 export default function MediaHistory() {
+  const navigate = useNavigate();
   const [items, setItems] = useState([]);
   const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState('all');
@@ -262,6 +263,7 @@ export default function MediaHistory() {
                 hideActions={stitchMode}
                 {...getCardProps(it.key)}
                 onToggleStar={!stitchMode ? toggleStar : undefined}
+                onAnnotate={!stitchMode && it.kind === 'image' ? (m) => navigate(`/media/annotate/${encodeURIComponent(m.key)}`) : undefined}
               />
             );
           })}
diff --git a/client/src/pages/MusicVideo.jsx b/client/src/pages/MusicVideo.jsx
index 5eb0a9b27..e20f7b3a7 100644
--- a/client/src/pages/MusicVideo.jsx
+++ b/client/src/pages/MusicVideo.jsx
@@ -289,6 +289,10 @@ export default function MusicVideo() {
       return;
     }
     const byId = new Map(arrangement.map((a) => [a.sceneId, a]));
+    // Snapshot the pre-arrangement project so a mid-loop PATCH failure can roll the
+    // optimistic board back to match the server-side partial state — otherwise the
+    // local board shows the complete arrangement over a partial persist until reload.
+    const snapshot = selected;
     replaceProject({
       ...selected,
       scenes: scenes.map((s) => {
@@ -308,7 +312,12 @@ export default function MusicVideo() {
       }
     })()
       .then(() => toast.success(`Auto-arranged ${arrangement.length} scene${arrangement.length === 1 ? '' : 's'} by energy`))
-      .catch((err) => toast.error(err?.message || 'Auto-arrange failed'))
+      .catch((err) => {
+        // Revert the optimistic board to the snapshot so it doesn't show the full
+        // arrangement over a server-side partial write.
+        replaceProject(snapshot);
+        toast.error(err?.message || 'Auto-arrange failed');
+      })
       .finally(() => setArranging(false));
   };
 
diff --git a/client/src/pages/OpenClaw.jsx b/client/src/pages/OpenClaw.jsx
index 12236e533..26ef36a3c 100644
--- a/client/src/pages/OpenClaw.jsx
+++ b/client/src/pages/OpenClaw.jsx
@@ -1,3 +1,21 @@
+/**
+ * OpenClaw — operator chat surface (streaming, context, attachments).
+ *
+ * Deep-linking exemption (issue #2025): `selectedSessionId` is intentionally
+ * NOT encoded in the URL as a routable record. Unlike the master-detail record
+ * views (Authors/Music/Sharing/Prompts) that this issue converts to id'd routes,
+ * an OpenClaw session is ephemeral runtime state, not a user-owned record:
+ *  - The session list is discovered from an external OpenClaw runtime and can
+ *    change on every Refresh; sessions come and go with the runtime.
+ *  - Selection is runtime-managed, not user-owned: `loadRuntime` auto-picks a
+ *    `preferredSessionId` (last selection → runtime `defaultSession` → first
+ *    session) on every load/reconnect, so the runtime — not a pasted URL — is
+ *    the source of truth for "what's open."
+ *  - The active session is wired into live SSE streaming state (useOpenClawStream)
+ *    with in-flight refs; driving it from a URL param would fight that lifecycle.
+ * This mirrors the transient-session rationale for other socket/stream surfaces.
+ * If OpenClaw ever gains a persistent, user-owned session registry, revisit this.
+ */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   Bot,
diff --git a/client/src/pages/Pipeline.jsx b/client/src/pages/Pipeline.jsx
index b249e5261..28e172ff2 100644
--- a/client/src/pages/Pipeline.jsx
+++ b/client/src/pages/Pipeline.jsx
@@ -12,6 +12,7 @@ import { useConfirmDelete } from '../hooks/useConfirmDelete';
 import { Link, useNavigate } from 'react-router-dom';
 import { Plus, Workflow as WorkflowIcon, Trash2, Loader2, Globe2, FileInput, Sparkles, BookOpen } from 'lucide-react';
 import toast from '../components/ui/Toast';
+import ConfirmButtonPair from '../components/ui/ConfirmButtonPair';
 import ImageThumb from '../components/ui/ImageThumb';
 import ShareToButton from '../components/sharing/ShareToButton';
 import SyncToPeerButton from '../components/sharing/SyncToPeerButton';
@@ -200,24 +201,18 @@ export default function Pipeline() {
     [form.universeId, form.name],
   );
 
-  // Two-click delete: first click "arms" the row, second click fires. Avoids
-  // window.confirm (banned per CLAUDE.md) without pulling in a modal for the
-  // skeleton. Only one row is armed at once.
-  const { isConfirming, requestDelete, confirmDelete } = useConfirmDelete();
-  const handleDelete = async (s) => {
-    if (!isConfirming(s.id)) {
-      requestDelete(s.id);
-      return;
-    }
-    await confirmDelete(() => {
-      const prior = series;
-      setSeries((prev) => prev.filter((x) => x.id !== s.id));
-      return deletePipelineSeries(s.id).catch((err) => {
-        toast.error(err.message || 'Delete failed');
-        setSeries(prior);
-      });
+  // Inline delete confirm: the trash button arms the row (one at a time) and an
+  // explicit Delete?/Cancel row fires it. Avoids window.confirm (banned per
+  // CLAUDE.md) and the non-discoverable two-click-arm pattern.
+  const { isConfirming, requestDelete, cancelDelete, confirmDelete } = useConfirmDelete();
+  const handleDelete = (s) => confirmDelete(() => {
+    const prior = series;
+    setSeries((prev) => prev.filter((x) => x.id !== s.id));
+    return deletePipelineSeries(s.id).catch((err) => {
+      toast.error(err.message || 'Delete failed');
+      setSeries(prior);
     });
-  };
+  });
 
   return (
     <div>
@@ -472,15 +467,24 @@ export default function Pipeline() {
               />
               <ShareToButton kind="series" ids={[s.id]} compact />
               <SyncToPeerButton recordKind="series" recordId={s.id} compact />
-              <button
-                type="button"
-                onClick={() => handleDelete(s)}
-                className={`p-2 ${isConfirming(s.id) ? 'text-port-error' : 'text-gray-500 hover:text-port-error'}`}
-                aria-label={isConfirming(s.id) ? `Confirm delete series ${s.name}` : `Delete series ${s.name}`}
-                title={isConfirming(s.id) ? 'Click again to confirm delete' : 'Delete series'}
-              >
-                <Trash2 size={16} />
-              </button>
+              {isConfirming(s.id) ? (
+                <ConfirmButtonPair
+                  prompt="Delete?"
+                  ariaLabel={`Confirm delete series ${s.name}`}
+                  onConfirm={() => handleDelete(s)}
+                  onCancel={cancelDelete}
+                />
+              ) : (
+                <button
+                  type="button"
+                  onClick={() => requestDelete(s.id)}
+                  className="p-2 text-gray-500 hover:text-port-error"
+                  aria-label={`Delete series ${s.name}`}
+                  title="Delete series"
+                >
+                  <Trash2 size={16} />
+                </button>
+              )}
             </li>
             );
           })}
diff --git a/client/src/pages/PromptManager.jsx b/client/src/pages/PromptManager.jsx
index 9ce4f71d3..53100be25 100644
--- a/client/src/pages/PromptManager.jsx
+++ b/client/src/pages/PromptManager.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { FileText, Variable, RefreshCw, Save, Plus, Trash2, Eye, Briefcase } from 'lucide-react';
 import toast from '../components/ui/Toast';
@@ -14,6 +14,7 @@ import {
 } from '../utils/formatters';
 import useFieldDraft from '../hooks/useFieldDraft';
 import SettingsTabsHeader from '../components/settings/SettingsTabsHeader';
+import { FormField } from '../components/ui/FormField';
 
 const VALID_PROMPT_TABS = ['stages', 'variables', 'job-skills'];
 
@@ -27,6 +28,20 @@ export default function PromptManager() {
     else p.set('tab', next);
     setSearchParams(p, { replace: true });
   };
+  // Selected stage / variable live in the URL (`?stage=` / `?var=`) so the open
+  // record is deep-linkable and reload-safe. Unlike the `tab` param above (a view
+  // toggle that uses replace), record selection is a PUSH so Back returns to the
+  // previously-open record — matching Authors/Music/Sharing.
+  const setParam = (key, val) => {
+    const p = new URLSearchParams(searchParams);
+    if (val == null || val === '') p.delete(key);
+    else p.set(key, val);
+    setSearchParams(p);
+  };
+  const selectedStage = searchParams.get('stage');
+  const selectedVar = searchParams.get('var');
+  const setSelectedStage = (name) => setParam('stage', name);
+  const setSelectedVar = (key) => setParam('var', key);
   const [stages, setStages] = useState({});
   const [variables, setVariables] = useState({});
   const [loading, setLoading] = useState(true);
@@ -38,14 +53,12 @@ export default function PromptManager() {
     'memory-evaluate', 'app-detection'
   ];
 
-  // Stage editing
-  const [selectedStage, setSelectedStage] = useState(null);
+  // Stage editing (selection is URL-driven — see selectedStage above)
   const [stageTemplate, setStageTemplate] = useState('');
   const [stageConfig, setStageConfig] = useState({});
   const [preview, setPreview] = useState('');
 
-  // Variable editing
-  const [selectedVar, setSelectedVar] = useState(null);
+  // Variable editing (selection is URL-driven — see selectedVar above)
   const [varForm, setVarForm] = useState({ key: '', name: '', category: '', content: '' });
 
   // Stage creation
@@ -92,25 +105,34 @@ export default function PromptManager() {
     setLoading(false);
   };
 
-  const loadStage = async (name) => {
-    setSelectedStage(name);
-    const res = await fetch(`/api/prompts/${name}`).then(r => r.json());
-    setStageTemplate(res.template || '');
-    // Normalize a server-returned timeout via parseTimeoutMs so the editor
-    // shares the validator's accept set: integers OR digit-only strings
-    // (e.g. legacy `'900000'` from pre-validation installs) round-trip
-    // through the UI, while non-positive / non-integer / garbage values
-    // (0, 'abc', undefined, 1.5) collapse to null so the input doesn't
-    // surface them as touched. Only set the key when the server actually
-    // shipped a value — otherwise the next save would write `timeout: null`
-    // (the server's explicit-clear sentinel) for stages the user never
-    // touched, conflating "key absent" with "user cleared the override".
-    const cfg = { name: res.name, description: res.description, model: res.model, provider: res.provider || null, variables: res.variables || [] };
-    const timeout = parseTimeoutMs(res.timeout);
-    if (timeout !== null) cfg.timeout = timeout;
-    setStageConfig(cfg);
-    setPreview('');
-  };
+  // Fetch the URL-selected stage's template + config. Keyed on selectedStage so
+  // a deep link / reload restores the open editor; a cleared param resets it.
+  useEffect(() => {
+    if (!selectedStage) { setStageTemplate(''); setStageConfig({}); setPreview(''); return; }
+    let cancelled = false;
+    fetch(`/api/prompts/${selectedStage}`)
+      .then(r => (r.ok ? r.json() : null))
+      .then(res => {
+        if (cancelled || !res) return;
+        setStageTemplate(res.template || '');
+        // Normalize a server-returned timeout via parseTimeoutMs so the editor
+        // shares the validator's accept set: integers OR digit-only strings
+        // (e.g. legacy `'900000'` from pre-validation installs) round-trip
+        // through the UI, while non-positive / non-integer / garbage values
+        // (0, 'abc', undefined, 1.5) collapse to null so the input doesn't
+        // surface them as touched. Only set the key when the server actually
+        // shipped a value — otherwise the next save would write `timeout: null`
+        // (the server's explicit-clear sentinel) for stages the user never
+        // touched, conflating "key absent" with "user cleared the override".
+        const cfg = { name: res.name, description: res.description, model: res.model, provider: res.provider || null, variables: res.variables || [] };
+        const timeout = parseTimeoutMs(res.timeout);
+        if (timeout !== null) cfg.timeout = timeout;
+        setStageConfig(cfg);
+        setPreview('');
+      })
+      .catch(() => {});
+    return () => { cancelled = true; };
+  }, [selectedStage]);
 
   const saveStage = async () => {
     setSaving(true);
@@ -138,11 +160,25 @@ export default function PromptManager() {
     setPreview(data.preview);
   };
 
-  const loadVariable = (key) => {
-    setSelectedVar(key);
-    const v = variables[key];
-    setVarForm({ key, name: v.name || '', category: v.category || '', content: v.content || '' });
-  };
+  // Hydrate the variable editor from the URL-selected key. Depends on `variables`
+  // so it fills in once the list loads, but a `varHydratedRef` guard keyed on the
+  // selected key ensures a later `variables` refresh (Reload, or deleting a
+  // *different* variable) does NOT re-hydrate — which would silently discard the
+  // open key's in-progress edits. Mirrors the hydratedRef pattern the Authors /
+  // Artists editors use. No param means create mode.
+  const varHydratedRef = useRef(null);
+  useEffect(() => {
+    if (!selectedVar) {
+      varHydratedRef.current = null;
+      setVarForm({ key: '', name: '', category: '', content: '' });
+      return;
+    }
+    if (variables[selectedVar] && varHydratedRef.current !== selectedVar) {
+      const v = variables[selectedVar];
+      setVarForm({ key: selectedVar, name: v.name || '', category: v.category || '', content: v.content || '' });
+      varHydratedRef.current = selectedVar;
+    }
+  }, [selectedVar, variables]);
 
   const saveVariable = async () => {
     setSaving(true);
@@ -163,6 +199,7 @@ export default function PromptManager() {
   const deleteVariable = async (key) => {
     const res = await fetch(`/api/prompts/variables/${key}`, { method: 'DELETE' });
     if (!res.ok) { toast.error('Failed to delete variable: ' + await res.text()); return; }
+    if (selectedVar === key) setSelectedVar(null);
     await loadData();
   };
 
@@ -365,7 +402,7 @@ export default function PromptManager() {
                   }`}
                 >
                   <button
-                    onClick={() => loadStage(name)}
+                    onClick={() => setSelectedStage(name)}
                     className="flex-1 min-w-0 text-left"
                   >
                     <div className="flex items-center gap-1">
@@ -392,7 +429,14 @@ export default function PromptManager() {
 
           {/* Stage Editor */}
           <div className="lg:col-span-2 space-y-4">
-            {selectedStage ? (
+            {selectedStage && !stages[selectedStage] ? (
+              <div className="bg-port-card border border-port-border rounded-xl p-12 text-center text-gray-500">
+                That stage could not be found — it may have been deleted or renamed.{' '}
+                <button onClick={() => setSelectedStage(null)} className="text-port-accent hover:underline">
+                  Clear selection
+                </button>
+              </div>
+            ) : selectedStage ? (
               <>
                 <div className="bg-port-card border border-port-border rounded-xl p-4">
                   <div className="flex items-center justify-between mb-4">
@@ -476,8 +520,7 @@ export default function PromptManager() {
                     </div>
                   </div>
 
-                  <div>
-                    <label className="block text-sm text-gray-400 mb-1">Template</label>
+                  <FormField label="Template">
                     <textarea
                       value={stageTemplate}
                       onChange={(e) => setStageTemplate(e.target.value)}
@@ -486,7 +529,7 @@ export default function PromptManager() {
                     <p className="text-xs text-gray-500 mt-1">
                       Use {'{{variable}}'} for substitution, {'{{#array}}...{{/array}}'} for iteration
                     </p>
-                  </div>
+                  </FormField>
                 </div>
 
                 {/* Preview Panel */}
@@ -534,7 +577,7 @@ export default function PromptManager() {
                   }`}
                 >
                   <button
-                    onClick={() => loadVariable(key)}
+                    onClick={() => setSelectedVar(key)}
                     className="flex-1 text-left"
                   >
                     <div className="font-medium">{v.name || key}</div>
@@ -553,6 +596,14 @@ export default function PromptManager() {
 
           {/* Variable Editor */}
           <div className="lg:col-span-2">
+            {selectedVar && !variables[selectedVar] ? (
+              <div className="bg-port-card border border-port-border rounded-xl p-12 text-center text-gray-500">
+                That variable could not be found — it may have been deleted.{' '}
+                <button onClick={() => setSelectedVar(null)} className="text-port-accent hover:underline">
+                  New variable
+                </button>
+              </div>
+            ) : (
             <div className="bg-port-card border border-port-border rounded-xl p-4">
               <div className="flex items-center justify-between mb-4">
                 <h3 className="text-lg font-medium text-white">
@@ -569,8 +620,7 @@ export default function PromptManager() {
 
               <div className="space-y-4">
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                  <div>
-                    <label className="block text-sm text-gray-400 mb-1">Key *</label>
+                  <FormField label="Key *">
                     <input
                       type="text"
                       value={varForm.key}
@@ -579,9 +629,8 @@ export default function PromptManager() {
                       placeholder="variableKey"
                       className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white focus:border-port-accent focus:outline-hidden disabled:opacity-50"
                     />
-                  </div>
-                  <div>
-                    <label className="block text-sm text-gray-400 mb-1">Name</label>
+                  </FormField>
+                  <FormField label="Name">
                     <input
                       type="text"
                       value={varForm.name}
@@ -589,11 +638,10 @@ export default function PromptManager() {
                       placeholder="Human Readable Name"
                       className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white focus:border-port-accent focus:outline-hidden"
                     />
-                  </div>
+                  </FormField>
                 </div>
 
-                <div>
-                  <label className="block text-sm text-gray-400 mb-1">Category</label>
+                <FormField label="Category">
                   <select
                     value={varForm.category}
                     onChange={(e) => setVarForm({ ...varForm, category: e.target.value })}
@@ -605,19 +653,19 @@ export default function PromptManager() {
                     <option value="rules">Rules</option>
                     <option value="system">System</option>
                   </select>
-                </div>
+                </FormField>
 
-                <div>
-                  <label className="block text-sm text-gray-400 mb-1">Content *</label>
+                <FormField label="Content *">
                   <textarea
                     value={varForm.content}
                     onChange={(e) => setVarForm({ ...varForm, content: e.target.value })}
                     className="w-full h-48 px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white font-mono text-sm focus:border-port-accent focus:outline-hidden"
                     placeholder="Variable content..."
                   />
-                </div>
+                </FormField>
               </div>
             </div>
+            )}
           </div>
         </div>
       )}
@@ -690,8 +738,7 @@ export default function PromptManager() {
                     </div>
                   </div>
 
-                  <div>
-                    <label className="block text-sm text-gray-400 mb-1">Skill Template (Markdown)</label>
+                  <FormField label="Skill Template (Markdown)">
                     <textarea
                       value={jobSkillContent}
                       onChange={(e) => setJobSkillContent(e.target.value)}
@@ -700,7 +747,7 @@ export default function PromptManager() {
                     <p className="text-xs text-gray-500 mt-1">
                       Sections: ## Prompt Template, ## Steps, ## Expected Outputs, ## Success Criteria
                     </p>
-                  </div>
+                  </FormField>
                 </div>
 
                 {/* Preview Panel */}
@@ -739,8 +786,7 @@ export default function PromptManager() {
 
             <div className="space-y-4">
               <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <label className="block text-sm text-gray-400 mb-1">Stage Key *</label>
+                <FormField label="Stage Key *">
                   <input
                     type="text"
                     value={newStageForm.stageName}
@@ -749,9 +795,8 @@ export default function PromptManager() {
                     className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white focus:border-port-accent focus:outline-hidden"
                   />
                   <p className="text-xs text-gray-500 mt-1">Lowercase, hyphens only</p>
-                </div>
-                <div>
-                  <label className="block text-sm text-gray-400 mb-1">Display Name *</label>
+                </FormField>
+                <FormField label="Display Name *">
                   <input
                     type="text"
                     value={newStageForm.name}
@@ -759,11 +804,10 @@ export default function PromptManager() {
                     placeholder="My Stage"
                     className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white focus:border-port-accent focus:outline-hidden"
                   />
-                </div>
+                </FormField>
               </div>
 
-              <div>
-                <label className="block text-sm text-gray-400 mb-1">Description</label>
+              <FormField label="Description">
                 <input
                   type="text"
                   value={newStageForm.description}
@@ -771,7 +815,7 @@ export default function PromptManager() {
                   placeholder="What this stage does"
                   className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white focus:border-port-accent focus:outline-hidden"
                 />
-              </div>
+              </FormField>
 
               <div className="space-y-4">
                 <div>
@@ -837,15 +881,14 @@ export default function PromptManager() {
                 </div>
               </div>
 
-              <div>
-                <label className="block text-sm text-gray-400 mb-1">Template</label>
+              <FormField label="Template">
                 <textarea
                   value={newStageForm.template}
                   onChange={(e) => setNewStageForm({ ...newStageForm, template: e.target.value })}
                   className="w-full h-64 px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white font-mono text-sm focus:border-port-accent focus:outline-hidden"
                   placeholder="Enter your prompt template here..."
                 />
-              </div>
+              </FormField>
 
               <div className="flex gap-2 justify-end">
                 <button
@@ -926,8 +969,7 @@ function StageTimeoutField({ timeout, providerFallback, onCommit }) {
     if (ms != null) onCommit(ms);
   });
   return (
-    <div>
-      <label className="block text-sm text-gray-400 mb-1">Timeout override (ms)</label>
+    <FormField label="Timeout override (ms)">
       <input
         type="number"
         inputMode="numeric"
@@ -946,6 +988,6 @@ function StageTimeoutField({ timeout, providerFallback, onCommit }) {
           ? `≈ ${formatDurationMs(timeout)} per run`
           : 'Leave blank to use the provider default'}
       </p>
-    </div>
+    </FormField>
   );
 }
diff --git a/client/src/pages/Rounds.jsx b/client/src/pages/Rounds.jsx
index a1c1f64d9..cc2a80468 100644
--- a/client/src/pages/Rounds.jsx
+++ b/client/src/pages/Rounds.jsx
@@ -12,8 +12,10 @@ import { useEffect, useState, useCallback } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { Music, Plus, Trash2, BookOpen, CheckCircle2, Circle, Wand2 } from 'lucide-react';
 import toast from '../components/ui/Toast';
+import ConfirmButtonPair from '../components/ui/ConfirmButtonPair';
 import { timeAgo } from '../utils/formatters';
 import { useAsyncAction } from '../hooks/useAsyncAction';
+import { useConfirmDelete } from '../hooks/useConfirmDelete';
 import { listRounds, createRound, deleteRound, generateRound } from '../services/api';
 import { RHYTHM_SHAPES } from '../lib/songCraft';
 
@@ -25,8 +27,9 @@ export default function Rounds() {
   const [loading, setLoading] = useState(true);
   const [title, setTitle] = useState('');
   const [artist, setArtist] = useState('');
-  // Two-step delete confirm (no window.confirm) — the armed round id.
-  const [armed, setArmed] = useState(null);
+  // Inline delete confirm (no window.confirm, no two-click-arm) — one row armed
+  // at a time via useConfirmDelete + <ConfirmButtonPair>.
+  const { isConfirming, requestDelete, cancelDelete, confirmDelete } = useConfirmDelete();
 
   useEffect(() => {
     listRounds({ silent: true })
@@ -67,13 +70,11 @@ export default function Rounds() {
     return round;
   }, { errorMessage: 'Failed to generate round' });
 
-  const onDelete = useCallback(async (round) => {
-    if (armed !== round.id) { setArmed(round.id); return; }
-    setArmed(null);
-    await deleteRound(round.id, { silent: true })
+  const onDelete = useCallback((round) => confirmDelete(() =>
+    deleteRound(round.id, { silent: true })
       .then(() => setRounds((prev) => prev.filter((s) => s.id !== round.id)))
-      .catch((err) => toast.error(err?.message || 'Failed to delete round'));
-  }, [armed]);
+      .catch((err) => toast.error(err?.message || 'Failed to delete round')),
+  ), [confirmDelete]);
 
   return (
     <div>
@@ -180,16 +181,25 @@ export default function Rounds() {
                     {round.updatedAt && <span>Edited {timeAgo(round.updatedAt)}</span>}
                   </div>
                 </Link>
-                <button
-                  type="button"
-                  onClick={() => onDelete(round)}
-                  onBlur={() => setArmed((cur) => (cur === round.id ? null : cur))}
-                  className={`p-2 shrink-0 ${armed === round.id ? 'text-port-error' : 'text-gray-500 hover:text-port-error'}`}
-                  aria-label={armed === round.id ? `Confirm delete ${round.title}` : `Delete ${round.title}`}
-                  title={armed === round.id ? 'Click again to confirm delete' : 'Delete round'}
-                >
-                  <Trash2 size={16} />
-                </button>
+                {isConfirming(round.id) ? (
+                  <ConfirmButtonPair
+                    prompt="Delete?"
+                    className="shrink-0"
+                    ariaLabel={`Confirm delete ${round.title}`}
+                    onConfirm={() => onDelete(round)}
+                    onCancel={cancelDelete}
+                  />
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => requestDelete(round.id)}
+                    className="p-2 shrink-0 text-gray-500 hover:text-port-error"
+                    aria-label={`Delete ${round.title}`}
+                    title="Delete round"
+                  >
+                    <Trash2 size={16} />
+                  </button>
+                )}
               </li>
             );
           })}
diff --git a/client/src/pages/Security.jsx b/client/src/pages/Security.jsx
index d7008bb78..158777f7a 100644
--- a/client/src/pages/Security.jsx
+++ b/client/src/pages/Security.jsx
@@ -2,6 +2,7 @@ import { useState, useRef, useEffect, useCallback } from 'react';
 import { Camera, Mic, MicOff, Video, VideoOff, RefreshCw, Settings, Volume2 } from 'lucide-react';
 import api from '../services/api';
 import Banner from '../components/ui/Banner';
+import { FormField } from '../components/ui/FormField';
 
 const MEDIA_CONSTRAINTS_KEY = 'portos-media-constraints';
 
@@ -302,11 +303,10 @@ export default function Security() {
           <h3 className="text-lg font-semibold text-white mb-4">Device Settings</h3>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             {/* Video device selector */}
-            <div>
-              <label className="block text-sm text-gray-400 mb-2">
-                <Camera size={14} className="inline mr-2" />
-                Camera
-              </label>
+            <FormField
+              labelClassName="block text-sm text-gray-400 mb-2"
+              label={<><Camera size={14} className="inline mr-2" />Camera</>}
+            >
               <select
                 value={selectedVideo}
                 onChange={(e) => handleDeviceChange('video', e.target.value)}
@@ -322,14 +322,13 @@ export default function Security() {
                   ))
                 )}
               </select>
-            </div>
+            </FormField>
 
             {/* Audio device selector */}
-            <div>
-              <label className="block text-sm text-gray-400 mb-2">
-                <Mic size={14} className="inline mr-2" />
-                Microphone
-              </label>
+            <FormField
+              labelClassName="block text-sm text-gray-400 mb-2"
+              label={<><Mic size={14} className="inline mr-2" />Microphone</>}
+            >
               <select
                 value={selectedAudio}
                 onChange={(e) => handleDeviceChange('audio', e.target.value)}
@@ -345,7 +344,7 @@ export default function Security() {
                   ))
                 )}
               </select>
-            </div>
+            </FormField>
           </div>
         </div>
       )}
@@ -455,10 +454,10 @@ export default function Security() {
                   style={{
                     width: `${audioLevel * 100}%`,
                     backgroundColor: audioLevel > 0.7
-                      ? '#ef4444'
+                      ? 'rgb(var(--port-error))'
                       : audioLevel > 0.4
-                        ? '#f59e0b'
-                        : '#22c55e'
+                        ? 'rgb(var(--port-warning))'
+                        : 'rgb(var(--port-success))'
                   }}
                 />
               </div>
diff --git a/client/src/pages/Sharing.jsx b/client/src/pages/Sharing.jsx
index 4561b56a1..e42739437 100644
--- a/client/src/pages/Sharing.jsx
+++ b/client/src/pages/Sharing.jsx
@@ -8,11 +8,13 @@
  */
 
 import { useEffect, useState } from 'react';
-import { useParams, Link } from 'react-router-dom';
+import { useParams, useNavigate, Link } from 'react-router-dom';
 import {
   Share2, Plus, Trash2, Folder, Inbox, History, Save, Loader2, Check, X, Users, AlertCircle, RefreshCw, Copy, GitMerge,
 } from 'lucide-react';
 import toast from '../components/ui/Toast';
+import InlineConfirmRow from '../components/ui/InlineConfirmRow';
+import { FormField } from '../components/ui/FormField';
 import { formatDateTime } from '../utils/formatters';
 import { useConfirmDelete } from '../hooks/useConfirmDelete';
 import FolderPicker from '../components/FolderPicker';
@@ -76,7 +78,7 @@ function SharingHeader({ active }) {
 }
 
 export default function Sharing() {
-  const { section = 'buckets' } = useParams();
+  const { section = 'buckets', bucketId } = useParams();
   if (section === 'duplicates' || section === 'conflicts') {
     return (
       <div>
@@ -85,14 +87,16 @@ export default function Sharing() {
       </div>
     );
   }
-  return <SharingBuckets />;
+  return <SharingBuckets selectedId={bucketId || null} />;
 }
 
-function SharingBuckets() {
+// The selected bucket lives in the URL (`/sharing/buckets/:bucketId`) so it's
+// deep-linkable and reload-safe. `selectedId` is the route param.
+function SharingBuckets({ selectedId }) {
+  const navigate = useNavigate();
   const [buckets, setBuckets] = useState([]);
   const [, setLocalSchemaVersion] = useState(null);
   const [loading, setLoading] = useState(true);
-  const [selectedId, setSelectedId] = useState(null);
   const [showAdd, setShowAdd] = useState(false);
   const [form, setForm] = useState(emptyForm);
   const [creating, setCreating] = useState(false);
@@ -108,7 +112,7 @@ function SharingBuckets() {
   const [inboxByBucket, setInboxByBucket] = useState({}); // bucketId → items[]
   const [activityByBucket, setActivityByBucket] = useState({});
 
-  const { isConfirming: isRemoveArmed, requestDelete: armRemove, confirmDelete: confirmRemove } = useConfirmDelete();
+  const { isConfirming: isRemoveArmed, requestDelete: armRemove, cancelDelete: cancelRemove, confirmDelete: confirmRemove } = useConfirmDelete();
 
   // Load buckets + settings on mount.
   useEffect(() => {
@@ -119,7 +123,9 @@ function SharingBuckets() {
       const list = bResp?.buckets || [];
       setBuckets(list);
       setLocalSchemaVersion(bResp?.localSchemaVersion ?? null);
-      if (list.length > 0) setSelectedId(list[0].id);
+      // Auto-select the first bucket when the URL doesn't already name one, so a
+      // bare /sharing lands on a populated detail panel (replace: no history spam).
+      if (!selectedId && list.length > 0) navigate(`/sharing/buckets/${encodeURIComponent(list[0].id)}`, { replace: true });
       const display = settings?.sharingDisplayName || '';
       const bio = settings?.sharingBio || '';
       setSharingDisplayName(display);
@@ -192,27 +198,26 @@ function SharingBuckets() {
     setCreating(false);
     if (!result?.bucket) return;
     setBuckets((prev) => [...prev, result.bucket].sort((a, b) => a.name.localeCompare(b.name)));
-    setSelectedId(result.bucket.id);
+    navigate(`/sharing/buckets/${encodeURIComponent(result.bucket.id)}`);
     setForm(emptyForm());
     setShowAdd(false);
     toast.success(`Registered bucket "${result.bucket.name}"`);
   };
 
-  const handleDelete = async (bucket) => {
-    if (!isRemoveArmed(bucket.id)) {
-      armRemove(bucket.id);
-      return;
+  const handleDelete = (bucket) => confirmRemove(() => {
+    const prior = buckets;
+    setBuckets((prev) => prev.filter((b) => b.id !== bucket.id));
+    // If the open bucket was removed, fall back to the next remaining one (or the
+    // index when none are left).
+    if (selectedId === bucket.id) {
+      const next = prior.find((b) => b.id !== bucket.id);
+      navigate(next ? `/sharing/buckets/${encodeURIComponent(next.id)}` : '/sharing');
     }
-    await confirmRemove(() => {
-      const prior = buckets;
-      setBuckets((prev) => prev.filter((b) => b.id !== bucket.id));
-      if (selectedId === bucket.id) setSelectedId(prior[0]?.id !== bucket.id ? prior[0]?.id : (prior[1]?.id || null));
-      return deleteShareBucket(bucket.id).catch((err) => {
-        toast.error(err.message || 'Failed to remove bucket');
-        setBuckets(prior);
-      });
+    return deleteShareBucket(bucket.id).catch((err) => {
+      toast.error(err.message || 'Failed to remove bucket');
+      setBuckets(prior);
     });
-  };
+  });
 
   const handleModeToggle = async (bucket) => {
     const nextMode = bucket.mode === 'auto-merge' ? 'inbox' : 'auto-merge';
@@ -263,6 +268,8 @@ function SharingBuckets() {
   };
 
   const selected = buckets.find((b) => b.id === selectedId) || null;
+  // A bucketId in the URL that isn't in the loaded list (removed / bad deep link).
+  const bucketNotFound = !!selectedId && !loading && !selected;
   const displayNameDirty = sharingDisplayName !== savedDisplayName || sharingBio !== savedBio;
 
   return (
@@ -329,8 +336,7 @@ function SharingBuckets() {
       {showAdd && (
         <form onSubmit={handleCreate} className="mb-6 p-4 bg-port-card border border-port-border rounded-lg space-y-3">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-            <div>
-              <label className="block text-xs uppercase tracking-wider text-gray-500 mb-1">Bucket name</label>
+            <FormField label="Bucket name" labelClassName="block text-xs uppercase tracking-wider text-gray-500 mb-1">
               <input
                 type="text"
                 value={form.name}
@@ -340,9 +346,8 @@ function SharingBuckets() {
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white text-sm"
                 autoFocus
               />
-            </div>
-            <div>
-              <label className="block text-xs uppercase tracking-wider text-gray-500 mb-1">Import mode</label>
+            </FormField>
+            <FormField label="Import mode" labelClassName="block text-xs uppercase tracking-wider text-gray-500 mb-1">
               <select
                 value={form.mode}
                 onChange={(e) => setForm((f) => ({ ...f, mode: e.target.value }))}
@@ -351,7 +356,7 @@ function SharingBuckets() {
                 <option value="inbox">Inbox — review before importing</option>
                 <option value="auto-merge">Auto-merge — apply immediately (trusted)</option>
               </select>
-            </div>
+            </FormField>
           </div>
           <div>
             <label className="block text-xs uppercase tracking-wider text-gray-500 mb-1">
@@ -375,8 +380,7 @@ function SharingBuckets() {
             </p>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-            <div>
-              <label className="block text-xs uppercase tracking-wider text-gray-500 mb-1">Display name override (optional)</label>
+            <FormField label="Display name override (optional)" labelClassName="block text-xs uppercase tracking-wider text-gray-500 mb-1">
               <input
                 type="text"
                 value={form.displayNameOverride}
@@ -385,9 +389,8 @@ function SharingBuckets() {
                 maxLength={120}
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white text-sm"
               />
-            </div>
-            <div>
-              <label className="block text-xs uppercase tracking-wider text-gray-500 mb-1">Bio override (optional)</label>
+            </FormField>
+            <FormField label="Bio override (optional)" labelClassName="block text-xs uppercase tracking-wider text-gray-500 mb-1">
               <input
                 type="text"
                 value={form.bioOverride}
@@ -396,7 +399,7 @@ function SharingBuckets() {
                 maxLength={2000}
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white text-sm"
               />
-            </div>
+            </FormField>
           </div>
           <div className="flex gap-2">
             <button
@@ -437,7 +440,7 @@ function SharingBuckets() {
                   <li key={b.id}>
                     <button
                       type="button"
-                      onClick={() => setSelectedId(b.id)}
+                      onClick={() => navigate(`/sharing/buckets/${encodeURIComponent(b.id)}`)}
                       className={`w-full text-left p-3 rounded-lg border ${isSelected ? 'bg-port-card border-port-accent/40' : 'bg-port-card border-port-border'} hover:border-port-accent/30 transition-colors`}
                     >
                       <div className="flex items-center justify-between gap-2">
@@ -473,7 +476,14 @@ function SharingBuckets() {
 
         {/* Detail panel */}
         <section>
-          {!selected ? (
+          {bucketNotFound ? (
+            <div className="p-6 bg-port-card border border-port-border rounded-lg text-sm text-gray-500">
+              That bucket could not be found — it may have been removed.{' '}
+              <button type="button" onClick={() => navigate('/sharing')} className="text-port-accent hover:underline">
+                Back to buckets
+              </button>
+            </div>
+          ) : !selected ? (
             <div className="p-6 bg-port-card border border-port-border rounded-lg text-sm text-gray-500">
               Pick a bucket on the left to see its inbox + activity.
             </div>
@@ -501,7 +511,9 @@ function SharingBuckets() {
                 <SettingsPanel
                   bucket={selected}
                   onToggleMode={() => handleModeToggle(selected)}
-                  onDelete={() => handleDelete(selected)}
+                  onRequestDelete={() => armRemove(selected.id)}
+                  onConfirmDelete={() => handleDelete(selected)}
+                  onCancelDelete={cancelRemove}
                   armed={isRemoveArmed(selected.id)}
                 />
               )}
@@ -633,7 +645,7 @@ function ActivityList({ manifests }) {
   );
 }
 
-function SettingsPanel({ bucket, onToggleMode, onDelete, armed }) {
+function SettingsPanel({ bucket, onToggleMode, onRequestDelete, onConfirmDelete, onCancelDelete, armed }) {
   return (
     <div className="space-y-4">
       <div className="p-4 bg-port-card border border-port-border rounded-lg">
@@ -666,14 +678,23 @@ function SettingsPanel({ bucket, onToggleMode, onDelete, armed }) {
         <p className="text-[11px] text-gray-500 mb-3">
           Stops watching the folder for new shares and drops the bucket from PortOS. Files inside the folder are not deleted — your cloud-sync app keeps the data.
         </p>
-        <button
-          type="button"
-          onClick={onDelete}
-          className={`inline-flex items-center gap-2 px-3 py-2 rounded text-xs ${armed ? 'bg-port-error text-white' : 'bg-port-bg text-port-error border border-port-error/40 hover:bg-port-error/10'}`}
-        >
-          <Trash2 size={12} />
-          {armed ? 'Click again to confirm' : 'Remove bucket'}
-        </button>
+        {armed ? (
+          <InlineConfirmRow
+            question="Remove this bucket?"
+            confirmText="Remove"
+            onConfirm={onConfirmDelete}
+            onCancel={onCancelDelete}
+          />
+        ) : (
+          <button
+            type="button"
+            onClick={onRequestDelete}
+            className="inline-flex items-center gap-2 px-3 py-2 rounded text-xs bg-port-bg text-port-error border border-port-error/40 hover:bg-port-error/10"
+          >
+            <Trash2 size={12} />
+            Remove bucket
+          </button>
+        )}
       </div>
     </div>
   );
diff --git a/client/src/pages/Shell.jsx b/client/src/pages/Shell.jsx
index 9afe52d97..5f834ccc3 100644
--- a/client/src/pages/Shell.jsx
+++ b/client/src/pages/Shell.jsx
@@ -9,6 +9,7 @@ import { useThemeContext } from '../components/ThemeContext';
 import { RefreshCw, Power, PowerOff, FolderOpen, ChevronDown, Plus, X, Terminal as TerminalIcon, ClipboardPaste, OctagonX, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, CornerDownLeft, Bot, Maximize2, Minimize2 } from 'lucide-react';
 import * as api from '../services/api';
 import { readClipboard } from '../lib/clipboard';
+import { formatDurationMs } from '../utils/formatters';
 import { buildTerminalTheme, parseCssColorToHex } from '../lib/terminalTheme';
 
 // Must match MAX_TOTAL_SESSIONS in server/services/shell.js
@@ -68,15 +69,6 @@ const readTerminalTheme = () => {
   }, mode);
 };
 
-const formatAge = (createdAt) => {
-  const seconds = Math.floor((Date.now() - createdAt) / 1000);
-  if (seconds < 60) return `${seconds}s`;
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return `${minutes}m`;
-  const hours = Math.floor(minutes / 60);
-  return `${hours}h${minutes % 60}m`;
-};
-
 const shortId = (id) => id?.slice(0, 6) ?? '';
 
 // Touch-friendly TUI-driving controls shared by the inline quick-commands toolbar
@@ -488,6 +480,23 @@ export default function Shell() {
     }
   }, [socket, clearActiveSession, cancelPendingAttach]);
 
+  // Restart = kill the current session, then start a fresh one after a short delay
+  // (gives the server time to tear down the old PTY). The deferred startSession must
+  // respect both staleness and unmount: stopSession() bumps the pending generation,
+  // so capture it and abort the delayed start if the user switched sessions (which
+  // bumps the generation again) or navigated away within the 1s window. Without the
+  // generation guard, a tab click inside the window would fire startSession() and
+  // clobber the in-flight switch.
+  const restartSession = useCallback(() => {
+    stopSession();
+    const gen = pendingAttachRef.current.generation;
+    setTimeout(() => {
+      if (!mountedRef.current) return;
+      if (pendingAttachRef.current.generation !== gen) return;
+      startSession();
+    }, 1000);
+  }, [stopSession, startSession]);
+
   const switchToSession = useCallback((sessionId, { fromUrl = false } = {}) => {
     // Compare against the in-flight attach target if there is one, falling back to the
     // currently-displayed session. Without this, a back→forward race (B→A while attach
@@ -908,7 +917,7 @@ export default function Shell() {
           {/* Restart (kill + new shell) is meaningless for a TUI-run view. */}
           {connected && !isLiveRun && (
             <button
-              onClick={() => { stopSession(); setTimeout(() => { if (mountedRef.current) startSession(); }, 1000); }}
+              onClick={restartSession}
               className="flex items-center gap-1.5 px-2.5 py-2 bg-port-card hover:bg-port-border text-gray-300 hover:text-white rounded-lg text-sm transition-colors border border-port-border min-h-[40px]"
               title="Restart session (kill + new)"
             >
@@ -959,12 +968,12 @@ export default function Shell() {
                       : 'bg-port-card hover:bg-port-border text-gray-400 hover:text-white border border-port-border'
                 }`}
                 onClick={() => !isActive && switchToSession(s.sessionId)}
-                title={`${isRun ? 'Live TUI run — ' : ''}${s.label || s.cwd || shortId(s.sessionId)} — ${formatAge(s.createdAt)} old`}
+                title={`${isRun ? 'Live TUI run — ' : ''}${s.label || s.cwd || shortId(s.sessionId)} — ${formatDurationMs(Date.now() - s.createdAt)} old`}
               >
                 <TabIcon size={12} className="shrink-0" />
                 <span className="min-w-0 break-all">{label}</span>
                 {isRun && <span className="w-1.5 h-1.5 rounded-full bg-port-accent animate-pulse shrink-0" title="Live" />}
-                <span className="text-[10px] opacity-60 shrink-0">{formatAge(s.createdAt)}</span>
+                <span className="text-[10px] opacity-60 shrink-0">{formatDurationMs(Date.now() - s.createdAt)}</span>
                 <button
                   onClick={(e) => { e.stopPropagation(); killOtherSession(s.sessionId); }}
                   className={`shrink-0 ml-0.5 p-0.5 rounded transition-colors ${
diff --git a/client/src/pages/StoryBuilder.jsx b/client/src/pages/StoryBuilder.jsx
index f1a67fb99..7bc4319f9 100644
--- a/client/src/pages/StoryBuilder.jsx
+++ b/client/src/pages/StoryBuilder.jsx
@@ -222,7 +222,12 @@ function StoryBuilderIndex() {
   }`;
 
   return (
-    <div className="max-w-3xl mx-auto space-y-6">
+    // Wide two-column shell above lg: create form left, "Continue a story" list
+    // right (mirrors the POST launcher redesign, #1986). Below lg the grid
+    // collapses to a single stacked column so mobile is unchanged. The 22rem
+    // sidebar track is reserved even with no sessions so the form keeps a
+    // comfortable ~48rem width instead of stretching the full shell.
+    <div className="max-w-6xl mx-auto space-y-6">
       <header>
         <h1 className="text-2xl font-bold flex items-center gap-2">
           <Sparkles className="w-6 h-6 text-port-accent" /> Story Builder
@@ -233,6 +238,7 @@ function StoryBuilderIndex() {
         </p>
       </header>
 
+      <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_22rem] gap-6 items-start">
       <section className="bg-port-card border border-port-border rounded-lg">
         <div className="flex gap-1 border-b border-port-border px-2 pt-2">
           <button onClick={() => setMode('seed')} className={tabClass('seed')}>Start from an idea</button>
@@ -294,14 +300,15 @@ function StoryBuilderIndex() {
           {sessions.map((s) => (
             <Link
               key={s.id} to={`/story-builder/${s.id}/${s.currentStep || 'idea'}`}
-              className="flex items-center justify-between bg-port-card border border-port-border rounded-lg px-4 py-3 hover:border-port-accent"
+              className="flex items-center justify-between gap-2 bg-port-card border border-port-border rounded-lg px-4 py-3 hover:border-port-accent"
             >
-              <span className="font-medium">{s.title}</span>
-              <span className="text-xs text-gray-500">at “{s.currentStep}” <ChevronRight className="w-4 h-4 inline" /></span>
+              <span className="font-medium truncate min-w-0">{s.title}</span>
+              <span className="text-xs text-gray-500 whitespace-nowrap">at “{s.currentStep}” <ChevronRight className="w-4 h-4 inline" /></span>
             </Link>
           ))}
         </section>
       )}
+      </div>
     </div>
   );
 }
diff --git a/client/src/pages/SystemHealthPage.jsx b/client/src/pages/SystemHealthPage.jsx
index d2050d798..80942a9f3 100644
--- a/client/src/pages/SystemHealthPage.jsx
+++ b/client/src/pages/SystemHealthPage.jsx
@@ -48,7 +48,7 @@ export default function SystemHealthPage() {
   const handleSaveThresholds = async () => {
     if (!draft) return;
     setSaving(true);
-    const result = await api.updateHealthThresholds(draft).catch(err => {
+    const result = await api.updateHealthThresholds(draft, { silent: true }).catch(err => {
       toast.error(err?.message || 'Failed to save thresholds');
       return null;
     });
diff --git a/client/src/pages/Templates.jsx b/client/src/pages/Templates.jsx
index e59cd3434..943928f8a 100644
--- a/client/src/pages/Templates.jsx
+++ b/client/src/pages/Templates.jsx
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { Layers, Code, Server, Globe, Smartphone, MonitorSmartphone, Plus } from 'lucide-react';
 import * as api from '../services/api';
 import FolderPicker from '../components/FolderPicker';
+import { FormField } from '../components/ui/FormField';
 
 const ICONS = {
   layers: Layers,
@@ -102,8 +103,7 @@ export default function Templates() {
           </div>
 
           <form onSubmit={handleCreate} className="space-y-4">
-            <div>
-              <label className="block text-sm text-gray-400 mb-1">App Name *</label>
+            <FormField label="App Name *">
               <input
                 type="text"
                 value={appName}
@@ -112,7 +112,7 @@ export default function Templates() {
                 required
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white focus:border-port-accent focus:outline-hidden"
               />
-            </div>
+            </FormField>
 
             <div>
               <label className="block text-sm text-gray-400 mb-1">Target Directory *</label>
diff --git a/client/src/pages/Tribe.jsx b/client/src/pages/Tribe.jsx
index 014cf8cd3..650c8c055 100644
--- a/client/src/pages/Tribe.jsx
+++ b/client/src/pages/Tribe.jsx
@@ -53,6 +53,7 @@ const emptyDraft = () => ({
   channel: '',
   energy: 'steady',
   tags: '',
+  emails: '',
   nextMove: '',
   notes: '',
 });
@@ -300,6 +301,18 @@ function ContactForm({ draft, onChange, onSave, onDelete, onNew, isExisting, sav
             placeholder="comma, separated"
           />
         </label>
+        <label className="block sm:col-span-2">
+          <span className="text-xs text-gray-500">Emails &amp; handles</span>
+          <input
+            value={draft.emails}
+            onChange={(event) => update('emails', event.target.value)}
+            className="mt-1 w-full rounded border border-port-border bg-port-bg px-3 py-2 text-sm text-white outline-none focus:border-port-accent"
+            placeholder="jane@work.com, jane@home.com"
+          />
+          <span className="mt-1 block text-[11px] text-gray-600">
+            Auto-logs a touchpoint when this person appears in a synced calendar event or message.
+          </span>
+        </label>
         <label className="block sm:col-span-2">
           <span className="text-xs text-gray-500">Next Move</span>
           <textarea
@@ -452,6 +465,26 @@ function MemoryLinksPanel({ personId }) {
   );
 }
 
+// Icon + label per touchpoint source so an auto-logged calendar/message
+// touchpoint is visually distinct from a hand-logged one (#2033).
+const SOURCE_BADGES = {
+  calendar: { Icon: Calendar, label: 'Calendar' },
+  message: { Icon: MessageCircle, label: 'Message' },
+  import: { Icon: Users, label: 'Import' },
+  user: { Icon: UserRound, label: 'Manual' },
+};
+
+function TouchpointSource({ source }) {
+  const badge = SOURCE_BADGES[source] || SOURCE_BADGES.user;
+  const { Icon, label } = badge;
+  return (
+    <span className="inline-flex items-center gap-1" title={`Source: ${label}`}>
+      <Icon size={12} aria-hidden="true" />
+      {label}
+    </span>
+  );
+}
+
 function TouchpointsPanel({ personId }) {
   const [touchpoints, setTouchpoints] = useState([]);
 
@@ -474,7 +507,7 @@ function TouchpointsPanel({ personId }) {
           <div key={touchpoint.id} className="rounded border border-port-border bg-port-bg p-3">
             <div className="flex items-center justify-between gap-3 text-xs text-gray-500">
               <span>{touchpoint.happenedAt?.slice(0, 10)}</span>
-              <span>{touchpoint.source}</span>
+              <TouchpointSource source={touchpoint.source} />
             </div>
             <p className="mt-1 text-sm text-gray-300">{touchpoint.summary || touchpoint.channel || 'Touchpoint'}</p>
           </div>
@@ -728,6 +761,7 @@ export default function Tribe() {
     ...emptyDraft(),
     ...contact,
     tags: tagsToInput(contact.tags),
+    emails: tagsToInput(contact.emails),
     cadenceDays: contact.cadenceDays || ringFor(contact.ring).cadenceDays,
   });
 
@@ -744,6 +778,7 @@ export default function Tribe() {
       channel: draft.channel.trim(),
       energy: draft.energy,
       tags: tagsToArray(draft.tags),
+      emails: tagsToArray(draft.emails),
       nextMove: draft.nextMove.trim(),
       notes: draft.notes.trim(),
     };
diff --git a/client/src/pages/UniverseBuilder.jsx b/client/src/pages/UniverseBuilder.jsx
index b0503d922..9ad47bc23 100644
--- a/client/src/pages/UniverseBuilder.jsx
+++ b/client/src/pages/UniverseBuilder.jsx
@@ -16,6 +16,7 @@ import {
   BookOpen, Users, MapPin, Package, Layers, ImagePlus, FolderTree, Images,
 } from 'lucide-react';
 import toast from '../components/ui/Toast';
+import InlineConfirmRow from '../components/ui/InlineConfirmRow';
 import { formatDateTime } from '../utils/formatters';
 import {
   listUniverses, getUniverse, createUniverse, updateUniverse, deleteUniverse, expandUniverse,
@@ -883,11 +884,6 @@ export default function UniverseBuilder() {
 
   const handleDelete = async () => {
     if (!selectedId) return;
-    if (pendingDeleteId !== selectedId) {
-      setPendingDeleteId(selectedId);
-      toast(`Click delete again to confirm — "${draft.name}" will be removed`, { icon: '⚠️' });
-      return;
-    }
     const id = selectedId;
     // Only update local UI + show success toast when the server confirmed the
     // delete. Otherwise the user would see both a red "Delete failed" toast
@@ -1691,17 +1687,21 @@ export default function UniverseBuilder() {
               <ShareToButton kind="universe" ids={[selectedId]} label="Share" />
               <SyncToPeerButton recordKind="universe" recordId={selectedId} label="Sync" />
               {draft.origin ? <OriginBadge origin={draft.origin} /> : null}
-              <button
-                onClick={handleDelete}
-                className={`px-3 py-2 rounded flex items-center gap-2 min-h-[40px] ${
-                  pendingDeleteId === selectedId
-                    ? 'bg-port-error hover:bg-port-error/80 text-white'
-                    : 'bg-port-error/30 hover:bg-port-error/50 text-port-error'
-                }`}
-                title="Delete world"
-              >
-                <Trash2 size={16} /> {pendingDeleteId === selectedId ? 'Confirm delete' : 'Delete'}
-              </button>
+              {pendingDeleteId === selectedId ? (
+                <InlineConfirmRow
+                  question={`Delete "${draft.name || 'this world'}"?`}
+                  onConfirm={handleDelete}
+                  onCancel={() => setPendingDeleteId(null)}
+                />
+              ) : (
+                <button
+                  onClick={() => setPendingDeleteId(selectedId)}
+                  className="px-3 py-2 rounded flex items-center gap-2 min-h-[40px] bg-port-error/30 hover:bg-port-error/50 text-port-error"
+                  title="Delete world"
+                >
+                  <Trash2 size={16} /> Delete
+                </button>
+              )}
             </>
           )}
         </header>
diff --git a/client/src/pages/Universes.jsx b/client/src/pages/Universes.jsx
index d38240e92..604bb8d45 100644
--- a/client/src/pages/Universes.jsx
+++ b/client/src/pages/Universes.jsx
@@ -12,6 +12,7 @@ import { useEffect, useMemo, useState, useCallback } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { Plus, Globe, Trash2, Users, Workflow as WorkflowIcon, Copy } from 'lucide-react';
 import toast from '../components/ui/Toast';
+import ConfirmButtonPair from '../components/ui/ConfirmButtonPair';
 import ImageThumb from '../components/ui/ImageThumb';
 import ShareToButton from '../components/sharing/ShareToButton';
 import SyncToPeerButton from '../components/sharing/SyncToPeerButton';
@@ -23,6 +24,7 @@ import { timeAgo } from '../utils/formatters';
 import { listUniverses, deleteUniverse, listPipelineSeries, listMediaCollections, listUniverseDuplicates } from '../services/api';
 import { useSyncIntegrity, syncBadgeStatus } from '../hooks/useSyncIntegrity';
 import { useRecordMerge } from '../hooks/useRecordMerge';
+import { useConfirmDelete } from '../hooks/useConfirmDelete';
 
 // Named canon entities across all trunks — the "Canon" column reflects the
 // characters/places/objects the user has registered, not the looser variation
@@ -74,17 +76,28 @@ function UniverseThumb({ imageRef }) {
   return <ImageThumb imageRef={imageRef} FallbackIcon={Globe} />;
 }
 
-// Shared between the desktop table row and the mobile card so the armed-state
-// styling + a11y labels stay in one place.
-function DeleteButton({ universe, armed, onDelete }) {
+// Shared between the desktop table row and the mobile card so the inline-confirm
+// affordance + a11y labels stay in one place. An explicit Delete?/Cancel row
+// replaces the two-click-arm button once the row is armed.
+function DeleteButton({ universe, confirming, onRequest, onConfirm, onCancel }) {
   const name = universe.name || '(untitled universe)';
+  if (confirming) {
+    return (
+      <ConfirmButtonPair
+        prompt="Delete?"
+        ariaLabel={`Confirm delete universe ${name}`}
+        onConfirm={() => onConfirm(universe)}
+        onCancel={onCancel}
+      />
+    );
+  }
   return (
     <button
       type="button"
-      onClick={() => onDelete(universe)}
-      className={`p-2 ${armed ? 'text-port-error' : 'text-gray-500 hover:text-port-error'}`}
-      aria-label={armed ? `Confirm delete universe ${name}` : `Delete universe ${name}`}
-      title={armed ? 'Click again to confirm delete' : 'Delete universe'}
+      onClick={() => onRequest(universe.id)}
+      className="p-2 text-gray-500 hover:text-port-error"
+      aria-label={`Delete universe ${name}`}
+      title="Delete universe"
     >
       <Trash2 size={16} />
     </button>
@@ -189,16 +202,11 @@ export default function Universes() {
     return m;
   }, [series]);
 
-  // Two-click delete: first click "arms" the row, second click fires. Avoids
-  // window.confirm (banned per CLAUDE.md) without pulling in a modal. armedId
-  // resets after the action or when a different row is armed.
-  const [armedId, setArmedId] = useState(null);
-  const handleDelete = async (u) => {
-    if (armedId !== u.id) {
-      setArmedId(u.id);
-      return;
-    }
-    setArmedId(null);
+  // Inline delete confirm: the trash button arms the row (one at a time) and an
+  // explicit Delete?/Cancel row fires it. Avoids window.confirm (banned per
+  // CLAUDE.md) and the non-discoverable two-click-arm pattern.
+  const { isConfirming, requestDelete, cancelDelete, confirmDelete } = useConfirmDelete();
+  const handleDelete = (u) => confirmDelete(async () => {
     setUniverses((prev) => prev.filter((x) => x.id !== u.id));
     // silent: the custom catch below owns the error toast (CLAUDE.md).
     await deleteUniverse(u.id, { silent: true }).catch((err) => {
@@ -213,7 +221,7 @@ export default function Universes() {
           : [...prev, u].sort((a, b) => (b.createdAt || '').localeCompare(a.createdAt || '')),
       );
     });
-  };
+  });
 
   return (
     <div>
@@ -305,7 +313,7 @@ export default function Universes() {
                       <div className="flex items-center justify-end gap-1">
                         <ShareToButton kind="universe" ids={[u.id]} compact />
                         <SyncToPeerButton recordKind="universe" recordId={u.id} compact />
-                        <DeleteButton universe={u} armed={armedId === u.id} onDelete={handleDelete} />
+                        <DeleteButton universe={u} confirming={isConfirming(u.id)} onRequest={requestDelete} onConfirm={handleDelete} onCancel={cancelDelete} />
                       </div>
                     </td>
                   </tr>
@@ -336,7 +344,7 @@ export default function Universes() {
                       </div>
                     </div>
                   </Link>
-                  <DeleteButton universe={u} armed={armedId === u.id} onDelete={handleDelete} />
+                  <DeleteButton universe={u} confirming={isConfirming(u.id)} onRequest={requestDelete} onConfirm={handleDelete} onCancel={cancelDelete} />
                 </div>
                 <div className="flex items-center gap-1 mt-2">
                   <ShareToButton kind="universe" ids={[u.id]} compact />
diff --git a/client/src/pages/Uploads.jsx b/client/src/pages/Uploads.jsx
index 1f352874d..2e747ae74 100644
--- a/client/src/pages/Uploads.jsx
+++ b/client/src/pages/Uploads.jsx
@@ -32,7 +32,7 @@ export default function Uploads() {
   const fileInputRef = useRef(null);
 
   const fetchUploads = useCallback(async () => {
-    const data = await api.listUploads().catch(err => {
+    const data = await api.listUploads({ silent: true }).catch(err => {
       toast.error(err.message);
       return { uploads: [], count: 0, totalSizeFormatted: '0 B' };
     });
@@ -78,7 +78,7 @@ export default function Uploads() {
         continue;
       }
 
-      const result = await api.uploadFile(base64, file.name).catch(err => {
+      const result = await api.uploadFile(base64, file.name, { silent: true }).catch(err => {
         toast.error(`Failed to upload "${file.name}": ${err.message}`);
         return null;
       });
@@ -93,7 +93,7 @@ export default function Uploads() {
   };
 
   const handleDelete = async (filename) => {
-    const result = await api.deleteUpload(filename).catch(err => {
+    const result = await api.deleteUpload(filename, { silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
@@ -110,7 +110,7 @@ export default function Uploads() {
       return;
     }
 
-    const result = await api.deleteAllUploads().catch(err => {
+    const result = await api.deleteAllUploads({ silent: true }).catch(err => {
       toast.error(err.message);
       return null;
     });
diff --git a/client/src/pages/VideoGen.jsx b/client/src/pages/VideoGen.jsx
index e6bbc5e59..e8fc50787 100644
--- a/client/src/pages/VideoGen.jsx
+++ b/client/src/pages/VideoGen.jsx
@@ -49,6 +49,7 @@ import BatchQueuePanel from '../components/media/BatchQueuePanel';
 import MediaJobsQueue from '../components/media/MediaJobsQueue';
 import FavoritesFilterChip from '../components/media/FavoritesFilterChip';
 import ModelSelect from '../components/ModelSelect';
+import { FormField } from '../components/ui/FormField';
 import ModelDownloadBadge, { deriveSizeEstimate } from '../components/media/ModelDownloadBadge';
 import { useModelDownloadStatus, TEXT_ENCODER_DOWNLOAD_ID } from '../hooks/useModelDownloadStatus';
 import { useMediaJobSse } from '../hooks/useMediaJobSse';
@@ -1526,8 +1527,7 @@ export default function VideoGen() {
             disabled={generating}
           />
           <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-            <div>
-              <label className="block text-xs font-medium text-gray-400 mb-1">Prompt</label>
+            <FormField label="Prompt" labelClassName="block text-xs font-medium text-gray-400 mb-1">
               <textarea
                 value={prompt}
                 onChange={(e) => setPrompt(e.target.value)}
@@ -1535,9 +1535,8 @@ export default function VideoGen() {
                 className="w-full bg-port-bg border border-port-border rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-port-accent disabled:opacity-50 resize-y"
                 placeholder="Describe the video you want to generate..."
               />
-            </div>
-            <div>
-              <label className="block text-xs font-medium text-gray-400 mb-1">Negative Prompt</label>
+            </FormField>
+            <FormField label="Negative Prompt" labelClassName="block text-xs font-medium text-gray-400 mb-1">
               <textarea
                 value={negativePrompt}
                 onChange={(e) => setNegativePrompt(e.target.value)}
@@ -1545,7 +1544,7 @@ export default function VideoGen() {
                 className="w-full bg-port-bg border border-port-border rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-port-accent disabled:opacity-50 resize-y"
                 placeholder="What to avoid..."
               />
-            </div>
+            </FormField>
           </div>
 
           {mode === 'fflf' && keyframesSupported && (
@@ -1647,8 +1646,7 @@ export default function VideoGen() {
 
           <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
             {models.length > 0 && (
-              <div className="col-span-2 sm:col-span-3">
-                <label className="block text-xs font-medium text-gray-400 mb-1">Model</label>
+              <FormField className="col-span-2 sm:col-span-3" label="Model" labelClassName="block text-xs font-medium text-gray-400 mb-1">
                 <ModelSelect
                   models={visibleModels}
                   value={modelId}
@@ -1672,7 +1670,7 @@ export default function VideoGen() {
                     />
                   </div>
                 )}
-              </div>
+              </FormField>
             )}
 
             {/* Video LoRAs — only on ltx2-runtime models (loraFamily non-null)
@@ -1704,8 +1702,7 @@ export default function VideoGen() {
               </div>
             )}
 
-            <div>
-              <label className="block text-xs font-medium text-gray-400 mb-1">Resolution</label>
+            <FormField label="Resolution" labelClassName="block text-xs font-medium text-gray-400 mb-1">
               <select
                 value={resolutionLabel}
                 onChange={handleResolutionChange}
@@ -1716,10 +1713,9 @@ export default function VideoGen() {
                 )}
                 {VIDEO_RESOLUTIONS.map((r) => <option key={r.label} value={r.label}>{r.label}</option>)}
               </select>
-            </div>
+            </FormField>
 
-            <div>
-              <label className="block text-xs font-medium text-gray-400 mb-1">Frames</label>
+            <FormField label="Frames" labelClassName="block text-xs font-medium text-gray-400 mb-1">
               <select
                 value={numFrames}
                 onChange={(e) => setNumFrames(Number(e.target.value))}
@@ -1732,7 +1728,7 @@ export default function VideoGen() {
                   Past 241 frames a single-pass render may swap or OOM at 48 GB. For reliable longer clips, render up to ~10s and then use <strong>Extend</strong> on the result — it conditions on the source's full latent rather than a single last frame.
                 </p>
               )}
-            </div>
+            </FormField>
 
             {mode !== 'a2v' && (
               <div>
@@ -1756,8 +1752,7 @@ export default function VideoGen() {
               </div>
             )}
 
-            <div>
-              <label className="block text-xs font-medium text-gray-400 mb-1">FPS</label>
+            <FormField label="FPS" labelClassName="block text-xs font-medium text-gray-400 mb-1">
               <select
                 value={fps}
                 onChange={(e) => setFps(Number(e.target.value))}
@@ -1765,7 +1760,7 @@ export default function VideoGen() {
               >
                 {FPS_OPTIONS.map((f) => <option key={f} value={f}>{f}</option>)}
               </select>
-            </div>
+            </FormField>
 
             <div>
               <label className="block text-xs font-medium text-gray-400 mb-1">Seed</label>
@@ -1788,10 +1783,10 @@ export default function VideoGen() {
               </div>
             </div>
 
-            <div>
-              <label className="block text-xs font-medium text-gray-400 mb-1">
-                Steps {currentModel?.steps && `(default: ${currentModel.steps})`}
-              </label>
+            <FormField
+              label={<>Steps {currentModel?.steps && `(default: ${currentModel.steps})`}</>}
+              labelClassName="block text-xs font-medium text-gray-400 mb-1"
+            >
               <input
                 type="number" min={1} max={150}
                 value={steps}
@@ -1799,12 +1794,12 @@ export default function VideoGen() {
                 placeholder={String(currentModel?.steps || 25)}
                 className="w-full bg-port-bg border border-port-border rounded-lg px-2 py-2 text-sm text-white focus:outline-none focus:border-port-accent disabled:opacity-50"
               />
-            </div>
+            </FormField>
 
-            <div>
-              <label className="block text-xs font-medium text-gray-400 mb-1">
-                CFG Scale {currentModel?.guidance != null && `(default: ${currentModel.guidance})`}
-              </label>
+            <FormField
+              label={<>CFG Scale {currentModel?.guidance != null && `(default: ${currentModel.guidance})`}</>}
+              labelClassName="block text-xs font-medium text-gray-400 mb-1"
+            >
               <input
                 type="number" min={0} max={20} step={0.5}
                 value={guidanceScale}
@@ -1812,7 +1807,7 @@ export default function VideoGen() {
                 placeholder={String(currentModel?.guidance ?? 3.0)}
                 className="w-full bg-port-bg border border-port-border rounded-lg px-2 py-2 text-sm text-white focus:outline-none focus:border-port-accent disabled:opacity-50"
               />
-            </div>
+            </FormField>
 
             {(mode === 'image' || (mode === 'extend' && currentModel?.runtime !== 'ltx2')) && (
               <div className="col-span-2 sm:col-span-3">
@@ -1830,8 +1825,7 @@ export default function VideoGen() {
               </div>
             )}
 
-            <div className="col-span-2 sm:col-span-3">
-              <label className="block text-xs font-medium text-gray-400 mb-1">Tiling</label>
+            <FormField className="col-span-2 sm:col-span-3" label="Tiling" labelClassName="block text-xs font-medium text-gray-400 mb-1">
               <select
                 value={tiling}
                 onChange={(e) => setTiling(e.target.value)}
@@ -1839,7 +1833,7 @@ export default function VideoGen() {
               >
                 {VIDEO_TILING_OPTIONS.map((t) => <option key={t.value} value={t.value}>{t.label}</option>)}
               </select>
-            </div>
+            </FormField>
 
             {mode !== 'a2v' && (
               <label className="col-span-2 sm:col-span-3 flex items-center gap-2 text-xs text-gray-400 cursor-pointer">
diff --git a/client/src/pages/VideoTimelineEditor.jsx b/client/src/pages/VideoTimelineEditor.jsx
index a19e88b30..4e787bec0 100644
--- a/client/src/pages/VideoTimelineEditor.jsx
+++ b/client/src/pages/VideoTimelineEditor.jsx
@@ -138,6 +138,11 @@ export default function VideoTimelineEditor() {
   // Local timeline (each clip gets a stable _key for dnd-kit identity)
   const [clips, setClips] = useState([]);
   const [selectedKey, setSelectedKey] = useState(null);
+  // Track the current selection by its STABLE identity (clipId + position) so a
+  // refresh — which regenerates every clip's random _key — can re-derive selectedKey
+  // instead of collapsing the inspector to "Select a clip". Read from a ref so refresh
+  // needn't depend on clips/selectedKey (which would re-trigger the load-on-mount loop).
+  const selectionRef = useRef({ clipId: null, index: -1 });
   const [pxPerSec, setPxPerSec] = useState(60);
   const [t, setT] = useState(0); // project-time in seconds
   const [playing, setPlaying] = useState(false);
@@ -171,13 +176,34 @@ export default function VideoTimelineEditor() {
       api.listVideoHistory().catch(() => []),
     ]);
     if (proj) {
+      const newClips = (proj.clips || []).map((c, idx) => ({ ...c, _key: `${c.clipId}-${idx}-${Math.random().toString(36).slice(2, 8)}` }));
       setProject(proj);
-      setClips((proj.clips || []).map((c, idx) => ({ ...c, _key: `${c.clipId}-${idx}-${Math.random().toString(36).slice(2, 8)}` })));
+      setClips(newClips);
+      // Re-derive selection from the stable clipId (+ prior position) so a refresh —
+      // e.g. a CONFLICT reload mid-edit — doesn't leave selectedKey pointing at a
+      // now-regenerated _key and collapse the inspector. Prefer the same index; fall
+      // back to the first clip with the same clipId; clear if the clip is gone.
+      const { clipId: selId, index: selIdx } = selectionRef.current;
+      if (selId != null) {
+        const match = newClips[selIdx]?.clipId === selId
+          ? newClips[selIdx]
+          : newClips.find((c) => c.clipId === selId);
+        setSelectedKey(match ? match._key : null);
+      }
     }
     setHistory(hist);
     setLoading(false);
   }, [projectId]);
 
+  // Keep the stable-identity mirror of the current selection current so refresh() can
+  // reattach selectedKey after it regenerates clip _keys.
+  useEffect(() => {
+    const idx = clips.findIndex((c) => c._key === selectedKey);
+    selectionRef.current = idx >= 0
+      ? { clipId: clips[idx].clipId, index: idx }
+      : { clipId: null, index: -1 };
+  }, [selectedKey, clips]);
+
   useEffect(() => { refresh(); }, [refresh]);
 
   // Sync the rename draft to the canonical name when the project (re)loads
diff --git a/client/src/services/apiAgents.js b/client/src/services/apiAgents.js
index dd59fb593..85910f1d2 100644
--- a/client/src/services/apiAgents.js
+++ b/client/src/services/apiAgents.js
@@ -37,13 +37,13 @@ export const getAgentActivityStats = (agentId, days = 7) =>
 
 // Chief of Staff
 export const getCosStatus = () => request('/cos');
-export const startCos = () => request('/cos/start', { method: 'POST' });
-export const stopCos = () => request('/cos/stop', { method: 'POST' });
+export const startCos = (options = {}) => request('/cos/start', { method: 'POST', ...options });
+export const stopCos = (options = {}) => request('/cos/stop', { method: 'POST', ...options });
 export const pauseCos = (reason) => request('/cos/pause', {
   method: 'POST',
   body: JSON.stringify({ reason })
 });
-export const resumeCos = () => request('/cos/resume', { method: 'POST' });
+export const resumeCos = (options = {}) => request('/cos/resume', { method: 'POST', ...options });
 export const getCosConfig = () => request('/cos/config');
 export const updateCosConfig = (config, options = {}) => request('/cos/config', {
   method: 'PUT',
@@ -53,13 +53,15 @@ export const updateCosConfig = (config, options = {}) => request('/cos/config',
 // Today's per-domain autonomy usage (#711) for the Domain Budgets panel.
 export const getCosBudgetUsage = (options = {}) => request('/cos/budget-usage', options);
 export const getCosTasks = (options) => request('/cos/tasks', options);
-export const addCosTask = (task) => request('/cos/tasks', {
+export const addCosTask = (task, options = {}) => request('/cos/tasks', {
   method: 'POST',
-  body: JSON.stringify(task)
+  body: JSON.stringify(task),
+  ...options
 });
-export const createSlashdoTask = (command, app) => request('/cos/tasks/slashdo', {
+export const createSlashdoTask = (command, app, options = {}) => request('/cos/tasks/slashdo', {
   method: 'POST',
-  body: JSON.stringify({ command, app })
+  body: JSON.stringify({ command, app }),
+  ...options
 });
 // Queue a CoS task to implement one specific JIRA ticket (sprint-board play button).
 export const createJiraTicketTask = (app, ticketKey, options = {}) => request('/cos/tasks/jira-ticket', {
@@ -71,41 +73,46 @@ export const enhanceCosTaskPrompt = (data) => request('/cos/tasks/enhance', {
   method: 'POST',
   body: JSON.stringify(data)
 });
-export const updateCosTask = (id, updates) => request(`/cos/tasks/${id}`, {
+export const updateCosTask = (id, updates, options = {}) => request(`/cos/tasks/${id}`, {
   method: 'PUT',
-  body: JSON.stringify(updates)
+  body: JSON.stringify(updates),
+  ...options
 });
-export const deleteCosTask = (id, taskType = 'user') => request(`/cos/tasks/${id}?type=${taskType}`, { method: 'DELETE' });
-export const reorderCosTasks = (taskIds) => request('/cos/tasks/reorder', {
+export const deleteCosTask = (id, taskType = 'user', options = {}) => request(`/cos/tasks/${id}?type=${taskType}`, { method: 'DELETE', ...options });
+export const reorderCosTasks = (taskIds, options = {}) => request('/cos/tasks/reorder', {
   method: 'POST',
-  body: JSON.stringify({ taskIds })
+  body: JSON.stringify({ taskIds }),
+  ...options
 });
-export const approveCosTask = (id) => request(`/cos/tasks/${id}/approve`, { method: 'POST' });
-export const forceCosEvaluate = () => request('/cos/evaluate', { method: 'POST' });
-export const forceSpawnTask = (taskId) => request(`/cos/tasks/${taskId}/spawn`, { method: 'POST' });
+export const approveCosTask = (id, options = {}) => request(`/cos/tasks/${id}/approve`, { method: 'POST', ...options });
+export const forceCosEvaluate = (options = {}) => request('/cos/evaluate', { method: 'POST', ...options });
+export const forceSpawnTask = (taskId, options = {}) => request(`/cos/tasks/${taskId}/spawn`, { method: 'POST', ...options });
 export const getCosHealth = () => request('/cos/health');
-export const forceHealthCheck = () => request('/cos/health/check', { method: 'POST' });
+export const forceHealthCheck = (options = {}) => request('/cos/health/check', { method: 'POST', ...options });
 export const getCosAgents = () => request('/cos/agents');
 export const getCosAgentDates = () => request('/cos/agents/history');
 export const getCosAgentsByDate = (date) => request(`/cos/agents/history/${date}`);
 export const getCosAgent = (id) => request(`/cos/agents/${id}`);
 export const terminateCosAgent = (id) => request(`/cos/agents/${id}/terminate`, { method: 'POST' });
-export const pauseCosAgent = (id, reason) => request(`/cos/agents/${id}/pause`, {
+export const pauseCosAgent = (id, reason, options = {}) => request(`/cos/agents/${id}/pause`, {
   method: 'POST',
-  body: JSON.stringify({ reason })
+  body: JSON.stringify({ reason }),
+  ...options
 });
-export const killCosAgent = (id) => request(`/cos/agents/${id}/kill`, { method: 'POST' });
+export const killCosAgent = (id, options = {}) => request(`/cos/agents/${id}/kill`, { method: 'POST', ...options });
 export const getCosAgentStats = (id, options) => request(`/cos/agents/${id}/stats`, options);
 export const getCosAgentPrompt = (id) => request(`/cos/agents/${id}/prompt`);
-export const deleteCosAgent = (id) => request(`/cos/agents/${id}`, { method: 'DELETE' });
-export const clearCompletedCosAgents = () => request('/cos/agents/completed', { method: 'DELETE' });
-export const submitCosAgentFeedback = (id, feedback) => request(`/cos/agents/${id}/feedback`, {
+export const deleteCosAgent = (id, options = {}) => request(`/cos/agents/${id}`, { method: 'DELETE', ...options });
+export const clearCompletedCosAgents = (options = {}) => request('/cos/agents/completed', { method: 'DELETE', ...options });
+export const submitCosAgentFeedback = (id, feedback, options = {}) => request(`/cos/agents/${id}/feedback`, {
   method: 'POST',
-  body: JSON.stringify(feedback)
+  body: JSON.stringify(feedback),
+  ...options
 });
-export const sendCosAgentBtw = (id, message) => request(`/cos/agents/${id}/btw`, {
+export const sendCosAgentBtw = (id, message, options = {}) => request(`/cos/agents/${id}/btw`, {
   method: 'POST',
-  body: JSON.stringify({ message })
+  body: JSON.stringify({ message }),
+  ...options
 });
 export const getCosFeedbackStats = () => request('/cos/feedback/stats');
 export const getCosReports = () => request('/cos/reports');
@@ -149,9 +156,10 @@ export const clearDismissedCosRecommendations = () => request('/cos/learning/rec
 export const getCosTaskTemplates = () => request('/cos/templates');
 export const getCosPopularTemplates = (limit = 5) => request(`/cos/templates/popular?limit=${limit}`);
 export const getCosTemplateCategories = () => request('/cos/templates/categories');
-export const createCosTaskTemplate = (data) => request('/cos/templates', {
+export const createCosTaskTemplate = (data, options = {}) => request('/cos/templates', {
   method: 'POST',
-  body: JSON.stringify(data)
+  body: JSON.stringify(data),
+  ...options
 });
 export const createCosTemplateFromTask = (task, templateName) => request('/cos/templates/from-task', {
   method: 'POST',
@@ -162,7 +170,7 @@ export const updateCosTaskTemplate = (id, data) => request(`/cos/templates/${id}
   method: 'PUT',
   body: JSON.stringify(data)
 });
-export const deleteCosTaskTemplate = (id) => request(`/cos/templates/${id}`, { method: 'DELETE' });
+export const deleteCosTaskTemplate = (id, options = {}) => request(`/cos/templates/${id}`, { method: 'DELETE', ...options });
 
 // Weekly Digest
 export const getCosWeeklyDigest = (weekId = null) => {
@@ -210,22 +218,25 @@ export const getCosScheduleIntervalTypes = () => request('/cos/schedule/interval
 export const getCosScheduleDueTasks = () => request('/cos/schedule/due');
 export const getCosScheduleDueAppTasks = (appId) => request(`/cos/schedule/due/${appId}`);
 // Unified task interval update
-export const updateCosTaskInterval = (taskType, settings) => request(`/cos/schedule/task/${taskType}`, {
+export const updateCosTaskInterval = (taskType, settings, options = {}) => request(`/cos/schedule/task/${taskType}`, {
   method: 'PUT',
-  body: JSON.stringify(settings)
+  body: JSON.stringify(settings),
+  ...options
 });
 // Deprecated aliases — delegate to unified endpoint
 export const updateCosSelfImprovementInterval = (taskType, settings) => updateCosTaskInterval(taskType, settings);
 export const updateCosAppImprovementInterval = (taskType, settings) => updateCosTaskInterval(taskType, settings);
 
-export const triggerCosOnDemandTask = (taskType, appId = null) => request('/cos/schedule/trigger', {
+export const triggerCosOnDemandTask = (taskType, appId = null, options = {}) => request('/cos/schedule/trigger', {
   method: 'POST',
-  body: JSON.stringify({ taskType, appId })
+  body: JSON.stringify({ taskType, appId }),
+  ...options
 });
 export const getCosOnDemandRequests = () => request('/cos/schedule/on-demand');
-export const resetCosTaskHistory = (taskType, appId = null) => request('/cos/schedule/reset', {
+export const resetCosTaskHistory = (taskType, appId = null, options = {}) => request('/cos/schedule/reset', {
   method: 'POST',
-  body: JSON.stringify({ taskType, appId })
+  body: JSON.stringify({ taskType, appId }),
+  ...options
 });
 export const getCosScheduleTemplates = () => request('/cos/schedule/templates');
 export const addCosScheduleTemplate = (template) => request('/cos/schedule/templates', {
@@ -235,22 +246,24 @@ export const addCosScheduleTemplate = (template) => request('/cos/schedule/templ
 export const deleteCosScheduleTemplate = (templateId) => request(`/cos/schedule/templates/${templateId}`, { method: 'DELETE' });
 
 // Autonomous Jobs
-export const getCosJobs = () => request('/cos/jobs');
+export const getCosJobs = (options = {}) => request('/cos/jobs', options);
 export const getCosJobsDue = () => request('/cos/jobs/due');
 export const getCosJobIntervals = () => request('/cos/jobs/intervals');
 export const getCosJobAllowedCommands = () => request('/cos/jobs/allowed-commands');
 export const getCosJob = (id) => request(`/cos/jobs/${id}`);
-export const createCosJob = (data) => request('/cos/jobs', {
+export const createCosJob = (data, options = {}) => request('/cos/jobs', {
   method: 'POST',
-  body: JSON.stringify(data)
+  body: JSON.stringify(data),
+  ...options
 });
-export const updateCosJob = (id, data) => request(`/cos/jobs/${id}`, {
+export const updateCosJob = (id, data, options = {}) => request(`/cos/jobs/${id}`, {
   method: 'PUT',
-  body: JSON.stringify(data)
+  body: JSON.stringify(data),
+  ...options
 });
-export const toggleCosJob = (id) => request(`/cos/jobs/${id}/toggle`, { method: 'POST' });
-export const triggerCosJob = (id) => request(`/cos/jobs/${id}/trigger`, { method: 'POST' });
-export const deleteCosJob = (id) => request(`/cos/jobs/${id}`, { method: 'DELETE' });
+export const toggleCosJob = (id, options = {}) => request(`/cos/jobs/${id}/toggle`, { method: 'POST', ...options });
+export const triggerCosJob = (id, options = {}) => request(`/cos/jobs/${id}/trigger`, { method: 'POST', ...options });
+export const deleteCosJob = (id, options = {}) => request(`/cos/jobs/${id}`, { method: 'DELETE', ...options });
 
 // Workflow visualizer — canonical scheduled-task ordering across tasks + jobs
 export const getCosWorkflow = () => request('/cos/workflow');
@@ -266,11 +279,11 @@ export const updateFeatureAgent = (id, data) => request(`/feature-agents/${id}`,
   method: 'PUT',
   body: JSON.stringify(data)
 });
-export const deleteFeatureAgent = (id) => request(`/feature-agents/${id}`, { method: 'DELETE' });
-export const startFeatureAgent = (id) => request(`/feature-agents/${id}/start`, { method: 'POST' });
-export const pauseFeatureAgent = (id) => request(`/feature-agents/${id}/pause`, { method: 'POST' });
-export const resumeFeatureAgent = (id) => request(`/feature-agents/${id}/resume`, { method: 'POST' });
-export const triggerFeatureAgent = (id) => request(`/feature-agents/${id}/trigger`, { method: 'POST' });
-export const stopFeatureAgent = (id) => request(`/feature-agents/${id}/stop`, { method: 'POST' });
+export const deleteFeatureAgent = (id, options = {}) => request(`/feature-agents/${id}`, { method: 'DELETE', ...options });
+export const startFeatureAgent = (id, options = {}) => request(`/feature-agents/${id}/start`, { method: 'POST', ...options });
+export const pauseFeatureAgent = (id, options = {}) => request(`/feature-agents/${id}/pause`, { method: 'POST', ...options });
+export const resumeFeatureAgent = (id, options = {}) => request(`/feature-agents/${id}/resume`, { method: 'POST', ...options });
+export const triggerFeatureAgent = (id, options = {}) => request(`/feature-agents/${id}/trigger`, { method: 'POST', ...options });
+export const stopFeatureAgent = (id, options = {}) => request(`/feature-agents/${id}/stop`, { method: 'POST', ...options });
 export const getFeatureAgentRuns = (id, limit) => request(`/feature-agents/${id}/runs${limit ? `?limit=${limit}` : ''}`);
 export const getFeatureAgentOutput = (id) => request(`/feature-agents/${id}/output`);
diff --git a/client/src/services/apiApps.js b/client/src/services/apiApps.js
index d11bb311e..874c9f227 100644
--- a/client/src/services/apiApps.js
+++ b/client/src/services/apiApps.js
@@ -69,17 +69,20 @@ export const pullAndUpdateApp = (id) => request(`/apps/${id}/update`, { method:
 export const buildApp = (id) => request(`/apps/${id}/build`, { method: 'POST' });
 export const getAppStatus = (id) => request(`/apps/${id}/status`);
 export const getAppTaskTypes = (id) => request(`/apps/${id}/task-types`);
-export const toggleAllAppTaskTypes = (id, enabled) => request(`/apps/${id}/task-types/all`, {
+export const toggleAllAppTaskTypes = (id, enabled, options = {}) => request(`/apps/${id}/task-types/all`, {
   method: 'PUT',
-  body: JSON.stringify({ enabled })
+  body: JSON.stringify({ enabled }),
+  ...options
 });
-export const updateAppTaskTypeOverride = (id, taskType, { enabled, interval, taskMetadata } = {}) => request(`/apps/${id}/task-types/${taskType}`, {
+export const updateAppTaskTypeOverride = (id, taskType, { enabled, interval, taskMetadata } = {}, options = {}) => request(`/apps/${id}/task-types/${taskType}`, {
   method: 'PUT',
-  body: JSON.stringify({ enabled, interval, taskMetadata })
+  body: JSON.stringify({ enabled, interval, taskMetadata }),
+  ...options
 });
-export const bulkUpdateAppTaskTypeOverride = (taskType, { enabled }) => request(`/apps/bulk-task-type/${taskType}`, {
+export const bulkUpdateAppTaskTypeOverride = (taskType, { enabled }, options = {}) => request(`/apps/bulk-task-type/${taskType}`, {
   method: 'PUT',
-  body: JSON.stringify({ enabled })
+  body: JSON.stringify({ enabled }),
+  ...options
 });
 export const detectAppIcons = () => request('/apps/detect-icons', { method: 'POST' });
 export const detectAppIcon = (id) => request(`/apps/${id}/detect-icon`, { method: 'POST' });
diff --git a/client/src/services/apiBrain.js b/client/src/services/apiBrain.js
index ec64a4115..6ac7640de 100644
--- a/client/src/services/apiBrain.js
+++ b/client/src/services/apiBrain.js
@@ -3,15 +3,17 @@ import { request } from './apiCore.js';
 // Brain - Second Brain Feature
 export const getBrainSummary = (options) => request('/brain/summary', options);
 export const getBrainSettings = (options) => request('/brain/settings', options);
-export const updateBrainSettings = (settings) => request('/brain/settings', {
+export const updateBrainSettings = (settings, options = {}) => request('/brain/settings', {
   method: 'PUT',
-  body: JSON.stringify(settings)
+  body: JSON.stringify(settings),
+  ...options
 });
 
 // Brain - Capture & Inbox
-export const captureBrainThought = (text, providerOverride, modelOverride, { creative } = {}) => request('/brain/capture', {
+export const captureBrainThought = (text, providerOverride, modelOverride, { creative } = {}, options = {}) => request('/brain/capture', {
   method: 'POST',
-  body: JSON.stringify({ text, providerOverride, modelOverride, creative })
+  body: JSON.stringify({ text, providerOverride, modelOverride, creative }),
+  ...options
 });
 export const getBrainInbox = (options = {}) => {
   const params = new URLSearchParams();
@@ -24,24 +26,28 @@ export const getBrainInbox = (options = {}) => {
   return request(`/brain/inbox?${params}`, { silent: options.silent });
 };
 export const getBrainInboxEntry = (id) => request(`/brain/inbox/${id}`);
-export const resolveBrainReview = (inboxLogId, destination, editedExtracted) => request('/brain/review/resolve', {
+export const resolveBrainReview = (inboxLogId, destination, editedExtracted, options = {}) => request('/brain/review/resolve', {
   method: 'POST',
-  body: JSON.stringify({ inboxLogId, destination, editedExtracted })
+  body: JSON.stringify({ inboxLogId, destination, editedExtracted }),
+  ...options
 });
-export const fixBrainClassification = (inboxLogId, newDestination, updatedFields, note) => request('/brain/fix', {
+export const fixBrainClassification = (inboxLogId, newDestination, updatedFields, note, options = {}) => request('/brain/fix', {
   method: 'POST',
-  body: JSON.stringify({ inboxLogId, newDestination, updatedFields, note })
+  body: JSON.stringify({ inboxLogId, newDestination, updatedFields, note }),
+  ...options
 });
-export const retryBrainClassification = (id, providerOverride, modelOverride) => request(`/brain/inbox/${id}/retry`, {
+export const retryBrainClassification = (id, providerOverride, modelOverride, options = {}) => request(`/brain/inbox/${id}/retry`, {
   method: 'POST',
-  body: JSON.stringify({ providerOverride, modelOverride })
+  body: JSON.stringify({ providerOverride, modelOverride }),
+  ...options
 });
-export const updateBrainInboxEntry = (id, capturedText) => request(`/brain/inbox/${id}`, {
+export const updateBrainInboxEntry = (id, capturedText, options = {}) => request(`/brain/inbox/${id}`, {
   method: 'PUT',
-  body: JSON.stringify({ capturedText })
+  body: JSON.stringify({ capturedText }),
+  ...options
 });
-export const deleteBrainInboxEntry = (id) => request(`/brain/inbox/${id}`, { method: 'DELETE' });
-export const markBrainInboxDone = (id) => request(`/brain/inbox/${id}/done`, { method: 'POST' });
+export const deleteBrainInboxEntry = (id, options = {}) => request(`/brain/inbox/${id}`, { method: 'DELETE', ...options });
+export const markBrainInboxDone = (id, options = {}) => request(`/brain/inbox/${id}/done`, { method: 'POST', ...options });
 // Stamp a batch of creative notes as consumed once their catalog ingest commits.
 export const markBrainInboxSentToCatalog = (ids, options) => request('/brain/inbox/sent-to-catalog', {
   method: 'POST',
@@ -52,15 +58,17 @@ export const markBrainInboxSentToCatalog = (ids, options) => request('/brain/inb
 // Brain - People
 export const getBrainPeople = () => request('/brain/people');
 export const getBrainPerson = (id) => request(`/brain/people/${id}`);
-export const createBrainPerson = (data) => request('/brain/people', {
+export const createBrainPerson = (data, options = {}) => request('/brain/people', {
   method: 'POST',
-  body: JSON.stringify(data)
+  body: JSON.stringify(data),
+  ...options
 });
-export const updateBrainPerson = (id, data) => request(`/brain/people/${id}`, {
+export const updateBrainPerson = (id, data, options = {}) => request(`/brain/people/${id}`, {
   method: 'PUT',
-  body: JSON.stringify(data)
+  body: JSON.stringify(data),
+  ...options
 });
-export const deleteBrainPerson = (id) => request(`/brain/people/${id}`, { method: 'DELETE' });
+export const deleteBrainPerson = (id, options = {}) => request(`/brain/people/${id}`, { method: 'DELETE', ...options });
 
 // Brain - Projects
 export const getBrainProjects = (filters) => {
@@ -69,15 +77,17 @@ export const getBrainProjects = (filters) => {
   return request(`/brain/projects?${params}`);
 };
 export const getBrainProject = (id) => request(`/brain/projects/${id}`);
-export const createBrainProject = (data) => request('/brain/projects', {
+export const createBrainProject = (data, options = {}) => request('/brain/projects', {
   method: 'POST',
-  body: JSON.stringify(data)
+  body: JSON.stringify(data),
+  ...options
 });
-export const updateBrainProject = (id, data) => request(`/brain/projects/${id}`, {
+export const updateBrainProject = (id, data, options = {}) => request(`/brain/projects/${id}`, {
   method: 'PUT',
-  body: JSON.stringify(data)
+  body: JSON.stringify(data),
+  ...options
 });
-export const deleteBrainProject = (id) => request(`/brain/projects/${id}`, { method: 'DELETE' });
+export const deleteBrainProject = (id, options = {}) => request(`/brain/projects/${id}`, { method: 'DELETE', ...options });
 
 // Brain - Ideas
 export const getBrainIdeas = (filters) => {
@@ -86,15 +96,17 @@ export const getBrainIdeas = (filters) => {
   return request(`/brain/ideas?${params}`);
 };
 export const getBrainIdea = (id) => request(`/brain/ideas/${id}`);
-export const createBrainIdea = (data) => request('/brain/ideas', {
+export const createBrainIdea = (data, options = {}) => request('/brain/ideas', {
   method: 'POST',
-  body: JSON.stringify(data)
+  body: JSON.stringify(data),
+  ...options
 });
-export const updateBrainIdea = (id, data) => request(`/brain/ideas/${id}`, {
+export const updateBrainIdea = (id, data, options = {}) => request(`/brain/ideas/${id}`, {
   method: 'PUT',
-  body: JSON.stringify(data)
+  body: JSON.stringify(data),
+  ...options
 });
-export const deleteBrainIdea = (id) => request(`/brain/ideas/${id}`, { method: 'DELETE' });
+export const deleteBrainIdea = (id, options = {}) => request(`/brain/ideas/${id}`, { method: 'DELETE', ...options });
 
 // Brain - Admin
 export const getBrainAdmin = (filters) => {
@@ -103,28 +115,32 @@ export const getBrainAdmin = (filters) => {
   return request(`/brain/admin?${params}`);
 };
 export const getBrainAdminItem = (id) => request(`/brain/admin/${id}`);
-export const createBrainAdminItem = (data) => request('/brain/admin', {
+export const createBrainAdminItem = (data, options = {}) => request('/brain/admin', {
   method: 'POST',
-  body: JSON.stringify(data)
+  body: JSON.stringify(data),
+  ...options
 });
-export const updateBrainAdminItem = (id, data) => request(`/brain/admin/${id}`, {
+export const updateBrainAdminItem = (id, data, options = {}) => request(`/brain/admin/${id}`, {
   method: 'PUT',
-  body: JSON.stringify(data)
+  body: JSON.stringify(data),
+  ...options
 });
-export const deleteBrainAdminItem = (id) => request(`/brain/admin/${id}`, { method: 'DELETE' });
+export const deleteBrainAdminItem = (id, options = {}) => request(`/brain/admin/${id}`, { method: 'DELETE', ...options });
 
 // Brain - Memories
 export const getBrainMemories = () => request('/brain/memories');
 export const getBrainMemory = (id) => request(`/brain/memories/${id}`);
-export const createBrainMemory = (data) => request('/brain/memories', {
+export const createBrainMemory = (data, options = {}) => request('/brain/memories', {
   method: 'POST',
-  body: JSON.stringify(data)
+  body: JSON.stringify(data),
+  ...options
 });
-export const updateBrainMemory = (id, data) => request(`/brain/memories/${id}`, {
+export const updateBrainMemory = (id, data, options = {}) => request(`/brain/memories/${id}`, {
   method: 'PUT',
-  body: JSON.stringify(data)
+  body: JSON.stringify(data),
+  ...options
 });
-export const deleteBrainMemory = (id) => request(`/brain/memories/${id}`, { method: 'DELETE' });
+export const deleteBrainMemory = (id, options = {}) => request(`/brain/memories/${id}`, { method: 'DELETE', ...options });
 
 // Brain - Third-party Imports
 export const getBrainImportSources = () => request('/brain/import/sources');
@@ -153,15 +169,17 @@ export const getChatgptArchive = (name) =>
 // Brain - Digests & Reviews
 export const getBrainLatestDigest = () => request('/brain/digest/latest');
 export const getBrainDigests = (limit = 10) => request(`/brain/digests?limit=${limit}`);
-export const runBrainDigest = (providerOverride, modelOverride) => request('/brain/digest/run', {
+export const runBrainDigest = (providerOverride, modelOverride, options = {}) => request('/brain/digest/run', {
   method: 'POST',
-  body: JSON.stringify({ providerOverride, modelOverride })
+  body: JSON.stringify({ providerOverride, modelOverride }),
+  ...options
 });
 export const getBrainLatestReview = () => request('/brain/review/latest');
 export const getBrainReviews = (limit = 10) => request(`/brain/reviews?limit=${limit}`);
-export const runBrainReview = (providerOverride, modelOverride) => request('/brain/review/run', {
+export const runBrainReview = (providerOverride, modelOverride, options = {}) => request('/brain/review/run', {
   method: 'POST',
-  body: JSON.stringify({ providerOverride, modelOverride })
+  body: JSON.stringify({ providerOverride, modelOverride }),
+  ...options
 });
 
 // Brain - Links
@@ -191,26 +209,29 @@ export const reorderBrainLinks = (updates, options = {}) => request('/brain/link
   body: JSON.stringify({ updates }),
   ...options
 });
-export const deleteBrainLink = (id) => request(`/brain/links/${id}`, { method: 'DELETE' });
-export const cloneBrainLink = (id) => request(`/brain/links/${id}/clone`, { method: 'POST' });
-export const pullBrainLink = (id) => request(`/brain/links/${id}/pull`, { method: 'POST' });
-export const openBrainLinkFolder = (id) => request(`/brain/links/${id}/open-folder`, { method: 'POST' });
-export const scanBrainLink = (id) => request(`/brain/links/${id}/scan`, { method: 'POST' });
+export const deleteBrainLink = (id, options = {}) => request(`/brain/links/${id}`, { method: 'DELETE', ...options });
+export const cloneBrainLink = (id, options = {}) => request(`/brain/links/${id}/clone`, { method: 'POST', ...options });
+export const pullBrainLink = (id, options = {}) => request(`/brain/links/${id}/pull`, { method: 'POST', ...options });
+export const openBrainLinkFolder = (id, options = {}) => request(`/brain/links/${id}/open-folder`, { method: 'POST', ...options });
+export const scanBrainLink = (id, options = {}) => request(`/brain/links/${id}/scan`, { method: 'POST', ...options });
 
 // Brain - Buckets (bookmark groups for links)
 export const getBrainBuckets = (options = {}) => request('/brain/buckets', options);
-export const createBrainBucket = (data) => request('/brain/buckets', {
+export const createBrainBucket = (data, options = {}) => request('/brain/buckets', {
   method: 'POST',
-  body: JSON.stringify(data)
+  body: JSON.stringify(data),
+  ...options
 });
-export const updateBrainBucket = (id, data) => request(`/brain/buckets/${id}`, {
+export const updateBrainBucket = (id, data, options = {}) => request(`/brain/buckets/${id}`, {
   method: 'PUT',
-  body: JSON.stringify(data)
+  body: JSON.stringify(data),
+  ...options
 });
-export const deleteBrainBucket = (id) => request(`/brain/buckets/${id}`, { method: 'DELETE' });
-export const reorderBrainBuckets = (ids) => request('/brain/buckets/reorder', {
+export const deleteBrainBucket = (id, options = {}) => request(`/brain/buckets/${id}`, { method: 'DELETE', ...options });
+export const reorderBrainBuckets = (ids, options = {}) => request('/brain/buckets/reorder', {
   method: 'POST',
-  body: JSON.stringify({ ids })
+  body: JSON.stringify({ ids }),
+  ...options
 });
 
 // Brain - Goals (identity system, read-only view for the graph detail panel)
diff --git a/client/src/services/apiCatalog.js b/client/src/services/apiCatalog.js
index 3fc45ed21..334f7f299 100644
--- a/client/src/services/apiCatalog.js
+++ b/client/src/services/apiCatalog.js
@@ -181,6 +181,16 @@ export const setCatalogIngredientPortrait = (id, body, options) =>
 export const detachCatalogIngredientMedia = (id, body, options) =>
   request(`/catalog/ingredients/${enc(id)}/media`, { method: 'DELETE', body: JSON.stringify(body), ...options });
 
+// Upload a raw file (base64 + MIME) onto an ingredient; server picks the media
+// kind + library dir from the MIME and returns the attached media row.
+export const uploadCatalogIngredientMediaFile = (id, body, options) =>
+  request(`/catalog/ingredients/${enc(id)}/media/upload`, { method: 'POST', body: JSON.stringify(body), ...options });
+
+// Attach a recorded voice memo (base64 WAV) — server transcribes via Whisper and
+// returns `{ media, transcript }`.
+export const recordCatalogIngredientVoiceMemo = (id, body, options) =>
+  request(`/catalog/ingredients/${enc(id)}/media/voice`, { method: 'POST', body: JSON.stringify(body), ...options });
+
 // --- Bulk import / export ----------------------------------------------
 
 export const bulkImportCatalogIngredients = (body, options) =>
diff --git a/client/src/services/apiGSD.js b/client/src/services/apiGSD.js
index 6c871a500..14205af21 100644
--- a/client/src/services/apiGSD.js
+++ b/client/src/services/apiGSD.js
@@ -2,13 +2,14 @@ import { request } from './apiCore.js';
 
 // GSD (Get Stuff Done) Integration
 export const getGsdProjects = () => request('/cos/gsd/projects');
-export const getGsdProject = (appId) => request(`/cos/gsd/projects/${appId}`);
+export const getGsdProject = (appId, options = {}) => request(`/cos/gsd/projects/${appId}`, options);
 export const getGsdConcerns = (appId) => request(`/cos/gsd/projects/${appId}/concerns`);
 export const getGsdPhases = (appId) => request(`/cos/gsd/projects/${appId}/phases`);
 export const getGsdPhase = (appId, phaseId) => request(`/cos/gsd/projects/${appId}/phases/${phaseId}`);
-export const createGsdConcernTasks = (appId, data) => request(`/cos/gsd/projects/${appId}/concerns/tasks`, {
+export const createGsdConcernTasks = (appId, data, options = {}) => request(`/cos/gsd/projects/${appId}/concerns/tasks`, {
   method: 'POST',
-  body: JSON.stringify(data)
+  body: JSON.stringify(data),
+  ...options
 });
 export const triggerGsdPhaseAction = (appId, phaseId, action) => request(`/cos/gsd/projects/${appId}/phases/${phaseId}/action`, {
   method: 'POST',
diff --git a/client/src/services/apiGoals.js b/client/src/services/apiGoals.js
index 15d7f9e74..3be011c63 100644
--- a/client/src/services/apiGoals.js
+++ b/client/src/services/apiGoals.js
@@ -21,9 +21,10 @@ export const createGoal = (data) => request('/digital-twin/identity/goals', {
   method: 'POST',
   body: JSON.stringify(data)
 });
-export const updateGoal = (id, data) => request(`/digital-twin/identity/goals/${id}`, {
+export const updateGoal = (id, data, options = {}) => request(`/digital-twin/identity/goals/${id}`, {
   method: 'PUT',
-  body: JSON.stringify(data)
+  body: JSON.stringify(data),
+  ...options
 });
 export const deleteGoal = (id) => request(`/digital-twin/identity/goals/${id}`, { method: 'DELETE' });
 export const getGoalsTree = () => request('/digital-twin/identity/goals/tree');
diff --git a/client/src/services/apiImageVideo.js b/client/src/services/apiImageVideo.js
index fbe613d3a..fa3fc8488 100644
--- a/client/src/services/apiImageVideo.js
+++ b/client/src/services/apiImageVideo.js
@@ -218,6 +218,21 @@ export const setMediaAnnotation = (key, patch) => request(`/media/annotations/${
   body: JSON.stringify(patch),
 });
 
+// Media sketches — freehand annotation strokes drawn over a generated image,
+// keyed by "<kind>:<ref>" (only image:* is supported in phase 1 of #2036).
+// GET returns `{ key, sketch: { width, height, strokes, updatedAt, hasPng } | null }`.
+// PUT persists strokes + an optional flattened PNG data URL. The persisted PNG
+// is retrievable at GET /media/sketches/:key/png (consumed by phase 2's
+// img2img feedback; the UI's own Export button flattens client-side).
+export const getMediaSketch = (key, { silent = false } = {}) =>
+  request(`/media/sketches/${encodeURIComponent(key)}`, { silent });
+export const saveMediaSketch = (key, payload, { silent = false } = {}) =>
+  request(`/media/sketches/${encodeURIComponent(key)}`, {
+    method: 'PUT',
+    body: JSON.stringify(payload),
+    silent,
+  });
+
 // Models management (HF cache + LoRAs)
 export const listCachedModels = () => request('/image-video/models');
 export const deleteCachedModel = (dirName) => request(`/image-video/models/hf/${encodeURIComponent(dirName)}`, { method: 'DELETE' });
diff --git a/client/src/services/apiMeatspace.js b/client/src/services/apiMeatspace.js
index 2373ba981..22e52e482 100644
--- a/client/src/services/apiMeatspace.js
+++ b/client/src/services/apiMeatspace.js
@@ -67,6 +67,7 @@ export const setMeatspaceBirthDate = (birthDate) => request('/meatspace/birth-da
   body: JSON.stringify({ birthDate })
 });
 export const getDeathClock = () => request('/meatspace/death-clock');
+export const getMeatspaceLoggingStats = (options = {}) => request('/meatspace/logging-stats', options);
 export const getLEV = () => request('/meatspace/lev');
 export const getAlcoholSummary = () => request('/meatspace/alcohol');
 export const getDailyAlcohol = (from, to) => {
@@ -179,20 +180,23 @@ export const getPostSessions = (from, to) => {
   return request(`/meatspace/post/sessions?${params}`);
 };
 export const getPostSession = (id) => request(`/meatspace/post/sessions/${id}`);
-export const submitPostSession = (data) => request('/meatspace/post/sessions', {
+export const submitPostSession = (data, options = {}) => request('/meatspace/post/sessions', {
   method: 'POST',
-  body: JSON.stringify(data)
+  body: JSON.stringify(data),
+  ...options
 });
 export const getPostStats = (days) => request(`/meatspace/post/stats${days != null ? `?days=${days}` : ''}`);
 export const getPostAdaptivePreview = () => request('/meatspace/post/adaptive-preview');
-export const generatePostDrill = (type, config = {}, providerId, model) => request('/meatspace/post/drill', {
+export const generatePostDrill = (type, config = {}, providerId, model, options = {}) => request('/meatspace/post/drill', {
   method: 'POST',
-  body: JSON.stringify({ type, config, ...(providerId && { providerId }), ...(model && { model }) })
+  body: JSON.stringify({ type, config, ...(providerId && { providerId }), ...(model && { model }) }),
+  ...options
 });
-export const scorePostLlmDrill = (type, drillData, responses, timeLimitMs, providerId, model) =>
+export const scorePostLlmDrill = (type, drillData, responses, timeLimitMs, providerId, model, options = {}) =>
   request('/meatspace/post/score-llm', {
     method: 'POST',
-    body: JSON.stringify({ type, drillData, responses, timeLimitMs, ...(providerId && { providerId }), ...(model && { model }) })
+    body: JSON.stringify({ type, drillData, responses, timeLimitMs, ...(providerId && { providerId }), ...(model && { model }) }),
+    ...options
   });
 export const getPostDrillCacheStatus = () => request('/meatspace/post/drill-cache/status');
 export const fillPostDrillCache = (types, providerId, model) => request('/meatspace/post/drill-cache/fill', {
diff --git a/client/src/services/apiMedia.js b/client/src/services/apiMedia.js
index 85cc50de6..5351824f8 100644
--- a/client/src/services/apiMedia.js
+++ b/client/src/services/apiMedia.js
@@ -16,14 +16,15 @@ export const deleteAttachment = (filename) => request(`/attachments/${encodeURIC
 export const listAttachments = () => request('/attachments');
 
 // Uploads (general file storage)
-export const uploadFile = (base64Data, filename) => request('/uploads', {
+export const uploadFile = (base64Data, filename, options = {}) => request('/uploads', {
   method: 'POST',
-  body: JSON.stringify({ data: base64Data, filename })
+  body: JSON.stringify({ data: base64Data, filename }),
+  ...options
 });
-export const listUploads = () => request('/uploads');
+export const listUploads = (options = {}) => request('/uploads', options);
 export const getUploadUrl = (filename) => `/api/uploads/${encodeURIComponent(filename)}`;
-export const deleteUpload = (filename) => request(`/uploads/${encodeURIComponent(filename)}`, { method: 'DELETE' });
-export const deleteAllUploads = () => request('/uploads?confirm=true', { method: 'DELETE' });
+export const deleteUpload = (filename, options = {}) => request(`/uploads/${encodeURIComponent(filename)}`, { method: 'DELETE', ...options });
+export const deleteAllUploads = (options = {}) => request('/uploads?confirm=true', { method: 'DELETE', ...options });
 
 // Image Cleaner — composable opt-in pipeline (metadata strip and/or denoise).
 // Uploads the RAW image bytes (no base64 inflation) with the step selection in
diff --git a/client/src/services/apiMemory.js b/client/src/services/apiMemory.js
index 0b78912ef..5c6425e6b 100644
--- a/client/src/services/apiMemory.js
+++ b/client/src/services/apiMemory.js
@@ -19,9 +19,10 @@ export const createMemory = (data) => request('/memory', {
   method: 'POST',
   body: JSON.stringify(data)
 });
-export const updateMemory = (id, data) => request(`/memory/${id}`, {
+export const updateMemory = (id, data, options = {}) => request(`/memory/${id}`, {
   method: 'PUT',
-  body: JSON.stringify(data)
+  body: JSON.stringify(data),
+  ...options
 });
 export const deleteMemory = (id, hard = false) => request(`/memory/${id}?hard=${hard}`, { method: 'DELETE' });
 export const searchMemories = (query, options = {}) => request('/memory/search', {
@@ -51,5 +52,5 @@ export const consolidateMemories = (options = {}) => request('/memory/consolidat
 });
 export const getEmbeddingStatus = () => request('/memory/embeddings/status');
 export const getMemoryBackendStatus = () => request('/memory/backend/status', { silent: true });
-export const approveMemory = (id) => request(`/memory/${id}/approve`, { method: 'POST' });
-export const rejectMemory = (id) => request(`/memory/${id}/reject`, { method: 'POST' });
+export const approveMemory = (id, options = {}) => request(`/memory/${id}/approve`, { method: 'POST', ...options });
+export const rejectMemory = (id, options = {}) => request(`/memory/${id}/reject`, { method: 'POST', ...options });
diff --git a/client/src/services/apiMessages.js b/client/src/services/apiMessages.js
index e8fabf005..87c23caf0 100644
--- a/client/src/services/apiMessages.js
+++ b/client/src/services/apiMessages.js
@@ -5,7 +5,7 @@ export const getMessageAccounts = () => request('/messages/accounts');
 export const createMessageAccount = (data) => request('/messages/accounts', { method: 'POST', body: JSON.stringify(data) });
 export const updateMessageAccount = (id, data) => request(`/messages/accounts/${id}`, { method: 'PUT', body: JSON.stringify(data) });
 export const deleteMessageAccount = (id) => request(`/messages/accounts/${id}`, { method: 'DELETE' });
-export const syncMessageAccount = (accountId, mode = 'unread') => request(`/messages/sync/${accountId}`, { method: 'POST', body: JSON.stringify({ mode }) });
+export const syncMessageAccount = (accountId, mode = 'unread', options = {}) => request(`/messages/sync/${accountId}`, { method: 'POST', body: JSON.stringify({ mode }), ...options });
 export const getMessageSyncStatus = (accountId) => request(`/messages/sync/${accountId}/status`);
 export const evaluateMessages = (data = {}) => request('/messages/evaluate', { method: 'POST', body: JSON.stringify(data) });
 export const getMessageInbox = (params = {}) => {
@@ -40,15 +40,15 @@ export const refreshMessage = (accountId, messageId) =>
   request(`/messages/${accountId}/${messageId}/refresh`, { method: 'POST' });
 export const fetchFullContent = (accountId, { force } = {}) =>
   request(`/messages/fetch-full/${accountId}`, { method: 'POST', body: force ? JSON.stringify({ force: true }) : undefined });
-export const executeMessageAction = (accountId, messageId, action) =>
-  request(`/messages/${accountId}/${messageId}/action`, { method: 'POST', body: JSON.stringify({ action }), silent: true });
+export const executeMessageAction = (accountId, messageId, action, options = {}) =>
+  request(`/messages/${accountId}/${messageId}/action`, { method: 'POST', body: JSON.stringify({ action }), silent: true, ...options });
 export const clearMessageCache = (accountId) =>
   request(`/messages/accounts/${accountId}/cache/clear`, { method: 'POST' });
 export const enableGmailApi = () => request('/messages/gmail/enable-api', { method: 'POST' });
 
 // Feeds - RSS/Atom Feed Ingestion
 export const getFeeds = () => request('/feeds');
-export const getFeedStats = () => request('/feeds/stats');
+export const getFeedStats = (options = {}) => request('/feeds/stats', options);
 export const getFeedItems = ({ feedId, unreadOnly } = {}) => {
   const params = new URLSearchParams();
   if (feedId) params.set('feedId', feedId);
diff --git a/client/src/services/apiSystem.js b/client/src/services/apiSystem.js
index b8c4f5e48..56e142055 100644
--- a/client/src/services/apiSystem.js
+++ b/client/src/services/apiSystem.js
@@ -11,9 +11,10 @@ export const checkHealth = (options) => request('/system/health', options);
 export const getSystemHealth = (options) => request('/system/health/details', options);
 export const getNetworkExposure = (options) => request('/network-exposure/status', options);
 export const getCapabilities = (options) => request('/capabilities', options);
-export const updateHealthThresholds = (thresholds) => request('/system/health/thresholds', {
+export const updateHealthThresholds = (thresholds, options = {}) => request('/system/health/thresholds', {
   method: 'PUT',
-  body: JSON.stringify(thresholds)
+  body: JSON.stringify(thresholds),
+  ...options
 });
 
 // Update
@@ -97,7 +98,7 @@ export const resetUsage = () => request('/usage', { method: 'DELETE' });
 export const getBackupStatus = (options) => request('/backup/status', options);
 export const triggerBackup = (options) => request('/backup/run', { method: 'POST', ...options });
 export const getBackupSnapshots = (options) => request('/backup/snapshots', options);
-export const restoreBackup = (data) => request('/backup/restore', { method: 'POST', body: JSON.stringify(data) });
+export const restoreBackup = (data, options = {}) => request('/backup/restore', { method: 'POST', body: JSON.stringify(data), ...options });
 export const restoreDatabase = (data, options) => request('/backup/restore-db', { method: 'POST', body: JSON.stringify(data), ...options });
 
 // Data Manager
@@ -147,26 +148,28 @@ export const reloadTelegramBridge = () => request('/telegram/bridge/reload', { m
 // Browser - CDP browser management
 export const getBrowserStatus = () => request('/browser');
 export const getBrowserConfig = () => request('/browser/config');
-export const updateBrowserConfig = (config) => request('/browser/config', {
+export const updateBrowserConfig = (config, options = {}) => request('/browser/config', {
   method: 'PUT',
-  body: JSON.stringify(config)
+  body: JSON.stringify(config),
+  ...options
 });
-export const launchBrowser = () => request('/browser/launch', { method: 'POST' });
-export const stopBrowser = () => request('/browser/stop', { method: 'POST' });
-export const restartBrowser = () => request('/browser/restart', { method: 'POST' });
+export const launchBrowser = (options = {}) => request('/browser/launch', { method: 'POST', ...options });
+export const stopBrowser = (options = {}) => request('/browser/stop', { method: 'POST', ...options });
+export const restartBrowser = (options = {}) => request('/browser/restart', { method: 'POST', ...options });
 export const getBrowserHealth = () => request('/browser/health');
 export const getBrowserProcess = () => request('/browser/process');
 export const getBrowserPages = () => request('/browser/pages');
 export const getBrowserVersion = () => request('/browser/version');
 export const getBrowserLogs = (lines = 50) => request(`/browser/logs?lines=${lines}`);
 export const getBrowserDownloads = () => request('/browser/downloads');
-export const deleteBrowserDownload = (name) =>
-  request(`/browser/downloads/${encodeURIComponent(name)}`, { method: 'DELETE' });
+export const deleteBrowserDownload = (name, options = {}) =>
+  request(`/browser/downloads/${encodeURIComponent(name)}`, { method: 'DELETE', ...options });
 export const browserDownloadUrl = (name) =>
   `/api/browser/downloads/${encodeURIComponent(name)}`;
-export const navigateBrowser = (url) => request('/browser/navigate', {
+export const navigateBrowser = (url, options = {}) => request('/browser/navigate', {
   method: 'POST',
-  body: JSON.stringify({ url })
+  body: JSON.stringify({ url }),
+  ...options
 });
 
 // Instances (Federation)
@@ -205,9 +208,10 @@ export const listImageStylePresets = () => {
   }
   return stylePresetsPromise;
 };
-export const generateAvatar = (data) => request('/image-gen/avatar', {
+export const generateAvatar = (data, options = {}) => request('/image-gen/avatar', {
   method: 'POST',
-  body: JSON.stringify(data)
+  body: JSON.stringify(data),
+  ...options
 });
 // Save an uploaded image into the gallery (`/data/images/`) and get back its
 // `{ filename, path }`. Use this (not the generic `uploadFile`) when the stored
diff --git a/client/src/services/apiTribe.js b/client/src/services/apiTribe.js
index 35062ecac..d59f18808 100644
--- a/client/src/services/apiTribe.js
+++ b/client/src/services/apiTribe.js
@@ -8,6 +8,13 @@ export const getTribePeople = (options = {}) => {
   return request(`/tribe/people${qs ? `?${qs}` : ''}`, { silent: options.silent });
 };
 
+export const getTribeCareSummary = (options = {}) => {
+  const params = new URLSearchParams();
+  if (options.limit) params.set('limit', String(options.limit));
+  const qs = params.toString();
+  return request(`/tribe/care${qs ? `?${qs}` : ''}`, { silent: options.silent });
+};
+
 export const createTribePerson = (data) => request('/tribe/people', {
   method: 'POST',
   body: JSON.stringify(data),
diff --git a/client/src/utils/formatters.js b/client/src/utils/formatters.js
index 8f433ffeb..748b45f5f 100644
--- a/client/src/utils/formatters.js
+++ b/client/src/utils/formatters.js
@@ -282,9 +282,11 @@ export function parseTimeoutMs(raw) {
 }
 
 /**
- * Format a duration in milliseconds as a human-readable string
+ * Format a duration in milliseconds as a human-readable string. Buckets down
+ * from days so multi-day uptimes read as "2d 3h" rather than an unbounded
+ * hours count ("51h 0m").
  * @param {number} ms - Duration in milliseconds
- * @returns {string} Formatted duration (e.g., "45s", "3m 12s", "2h 5m")
+ * @returns {string} Formatted duration (e.g., "45s", "3m 12s", "2h 5m", "2d 3h")
  */
 export function formatDurationMs(ms) {
   if (ms == null) return '-';
@@ -293,7 +295,9 @@ export function formatDurationMs(ms) {
   const minutes = Math.floor(seconds / 60);
   if (minutes < 60) return `${minutes}m ${seconds % 60}s`;
   const hours = Math.floor(minutes / 60);
-  return `${hours}h ${minutes % 60}m`;
+  if (hours < 24) return `${hours}h ${minutes % 60}m`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ${hours % 24}h`;
 }
 
 /**
diff --git a/client/src/utils/formatters.test.js b/client/src/utils/formatters.test.js
index 6877fa0cc..a49948cd1 100644
--- a/client/src/utils/formatters.test.js
+++ b/client/src/utils/formatters.test.js
@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import {
-  formatContextLength, formatDurationMin, formatEventDateTime, timeAgo,
+  formatContextLength, formatDurationMin, formatDurationMs, formatEventDateTime, timeAgo,
   formatCooldown, parseSizeGb, recommendedRamGb, parseTimeoutMs,
 } from './formatters.js';
 
@@ -22,6 +22,26 @@ describe('formatContextLength', () => {
   });
 });
 
+describe('formatDurationMs', () => {
+  it('formats sub-minute, minute, and hour buckets', () => {
+    expect(formatDurationMs(0)).toBe('0s');
+    expect(formatDurationMs(45_000)).toBe('45s');
+    expect(formatDurationMs(72_000)).toBe('1m 12s');
+    expect(formatDurationMs(2 * 3_600_000 + 5 * 60_000)).toBe('2h 5m');
+  });
+
+  it('buckets multi-day durations into days + hours', () => {
+    expect(formatDurationMs(24 * 3_600_000)).toBe('1d 0h');
+    expect(formatDurationMs(25 * 3_600_000)).toBe('1d 1h');
+    expect(formatDurationMs(51 * 3_600_000)).toBe('2d 3h');
+  });
+
+  it('returns a dash for nullish input', () => {
+    expect(formatDurationMs(null)).toBe('-');
+    expect(formatDurationMs(undefined)).toBe('-');
+  });
+});
+
 describe('formatDurationMin', () => {
   it('formats sub-hour, exact-hour, and hour+min durations', () => {
     expect(formatDurationMin(30)).toBe('30m');
diff --git a/docs/PORTS.md b/docs/PORTS.md
index 282e98f4f..a03358996 100644
--- a/docs/PORTS.md
+++ b/docs/PORTS.md
@@ -7,7 +7,7 @@ PortOS uses a contiguous port allocation scheme to make it easy to understand wh
 ### Convention
 
 1. **Contiguous Ranges**: Each app should use a contiguous block of ports
-2. **Labeled Ports**: Define all ports in the top-level `PORTS` object in `ecosystem.config.cjs` (re-exported at `server/lib/ports.js`); the per-process label map lives in `server/services/apps.js`
+2. **Labeled Ports**: Define all ports in the top-level `PORTS` object in `ecosystem.config.cjs` (mirrored — manually kept in sync — in `server/lib/ports.js`, since the ESM server can't `require()` the CommonJS config); the per-process label map lives in `server/services/apps.js`
 3. **No Gaps**: Avoid leaving gaps between port allocations within an app
 
 ### Port Labels
diff --git a/docs/README.md b/docs/README.md
index 2fb48c07a..5d84d0516 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -26,13 +26,13 @@ App management: [app-wizard](./features/app-wizard.md) · [autofixer](./features
 
 Chief of Staff: [chief-of-staff](./features/chief-of-staff.md) · [cos-agent-runner](./features/cos-agent-runner.md) · [cos-enhancement](./features/cos-enhancement.md) · [agent-skills](./features/agent-skills.md) · [memory-system](./features/memory-system.md) · [claude-ollama](./features/claude-ollama.md) · [prompt-manager](./features/prompt-manager.md)
 
-Identity & self: [digital-twin](./features/digital-twin.md) · [identity-system](./features/identity-system.md) · [soul-system](./features/soul-system.md) · [cross-domain-insights-engine](./features/cross-domain-insights-engine.md) · [post](./features/post.md)
+Identity & self: [digital-twin](./features/digital-twin.md) · [identity-system](./features/identity-system.md) · [soul-system](./features/soul-system.md) · [post](./features/post.md) (insights design spike: [plans/2026-06-03](./plans/2026-06-03-cross-domain-insights-engine.md))
 
 Knowledge: [brain-system](./features/brain-system.md) · [messages-security](./features/messages-security.md)
 
 Create: [writers-room](./features/writers-room.md) · [cybercity-v2](./features/cybercity-v2.md)
 
-Comms & voice: [openclaw-operator-chat](./features/openclaw-operator-chat.md) ([pre-build audit](./features/openclaw-operator-chat-audit.md)) · [voice](./features/voice.md)
+Comms & voice: [openclaw-operator-chat](./features/openclaw-operator-chat.md) ([pre-build audit](./research/2026-03-31-openclaw-operator-chat-audit.md)) · [voice](./features/voice.md)
 
 ## Point-in-time records
 
diff --git a/docs/TROUBLESHOOTING.md b/docs/TROUBLESHOOTING.md
index af7027108..d60ccdc7d 100644
--- a/docs/TROUBLESHOOTING.md
+++ b/docs/TROUBLESHOOTING.md
@@ -102,8 +102,8 @@ claude --version
 - Verify model name matches provider's available models
 - Check provider documentation for correct model identifiers
 - Common models:
-  - Claude: `claude-sonnet-4-20250514`, `claude-opus-4-5-20251101`
-  - OpenAI: `gpt-4`, `gpt-4-turbo`
+  - Claude: `claude-sonnet-5`, `claude-opus-4-8`, `claude-haiku-4-5-20251001`
+  - OpenAI: `gpt-5`, `gpt-5-mini`
   - Ollama: Model must be pulled first (`ollama pull llama3`)
 
 ## Chief of Staff Issues
diff --git a/docs/features/app-wizard.md b/docs/features/app-wizard.md
index f156ee887..8c0a999d9 100644
--- a/docs/features/app-wizard.md
+++ b/docs/features/app-wizard.md
@@ -64,4 +64,4 @@ Scaffold a new project from template:
 
 - [PM2 Configuration](../PM2.md)
 - [Port Allocation](../PORTS.md)
-- [Templates System](#m7-app-templates)
+- Scaffold templates — `GET /api/scaffold/templates` (`server/routes/scaffold.js`)
diff --git a/docs/features/digital-twin.md b/docs/features/digital-twin.md
index c69ae916d..e78d5db86 100644
--- a/docs/features/digital-twin.md
+++ b/docs/features/digital-twin.md
@@ -1,66 +1,22 @@
 # Digital Twin Personality Enhancement
 
-Quantitative personality modeling and prediction system that accurately embodies a human's values, decision patterns, and communication style.
+Quantitative personality modeling and prediction on top of the [Soul System](./soul-system.md)'s document store: trait scoring, confidence measurement, behavioral testing, feedback-driven weighting, and personas.
 
-## Vision
-
-Transform the Digital Twin from a document capture system into a quantitative personality modeling and prediction system.
+This doc covers the quantitative-modeling layer. The document workflow (Documents/Enrich/Export tabs, soul markdown files) is documented in [Soul System](./soul-system.md); the broader identity architecture (genome, chronotype, taste, goals) in [Unified Identity System](./identity-system.md).
 
 ## Architecture
 
-- **Digital Twin Service** (`server/services/digital-twin.js`, with logic split across ~25 `digital-twin-*.js` modules): Trait analysis, confidence scoring, gap recommendations
-- **Digital Twin Routes** (`server/routes/digital-twin.js`): REST API endpoints
+- **Digital Twin Service** (`server/services/digital-twin.js`, with logic split across ~20 `digital-twin-*.js` modules plus `feedbackLoop.js`): trait analysis, confidence scoring, gap recommendations, testing suites, personas, imports
+- **Digital Twin Routes** (`server/routes/digital-twin.js`): REST API under `/api/digital-twin/*`
 - **Digital Twin Validation** (`server/lib/digitalTwinValidation.js`): Zod schemas for trait data
 
-## Features
-
-### Phase 1: Quantitative Personality Modeling (Complete)
-
-**Big Five Trait Scoring**
-- Quantified OCEAN scores (Openness, Conscientiousness, Extraversion, Agreeableness, Neuroticism)
-- Infer scores from existing documents using LLM analysis
-- Allow manual override/adjustment
-- Store in `meta.json` under `traits.bigFive`
-
-**Values Hierarchy**
-- Extract explicit values from VALUES.md and NON_NEGOTIABLES.md
-- Create ranked values list with conflict resolution rules
-- Store in `meta.json` under `traits.valuesHierarchy`
-
-**Communication Fingerprint**
-- Quantify writing style: formality (1-10), verbosity (1-10), emoji usage, sentence length avg
-- Extract from WRITING_STYLE.md and writing samples
-- Store in `meta.json` under `traits.communicationProfile`
+## Quantitative Personality Modeling
 
-### Phase 2: Personality Confidence Scoring (Complete)
-
-**Coverage Metrics**
-- For each Big Five dimension: evidence count from documents
-- For each value: supporting document count + specificity score
-- For communication: sample diversity, consistency across samples
-
-**Confidence Algorithm**
-```
-confidence(aspect) = min(1.0,
-  (evidence_count / required_evidence) *
-  (consistency_score) *
-  (recency_weight)
-)
-```
+**Big Five Trait Scoring** — quantified OCEAN scores (Openness, Conscientiousness, Extraversion, Agreeableness, Neuroticism), inferred from existing soul documents via LLM analysis, with manual override/adjustment. Stored in `meta.json` under `traits.bigFive`.
 
-**Gap Recommendations**
-- Identify lowest-confidence aspects
-- Generate specific questions to fill gaps
-- Prioritize enrichment categories by confidence gap
+**Values Hierarchy** — explicit values extracted from VALUES.md and NON_NEGOTIABLES.md into a ranked list. Stored under `traits.valuesHierarchy`.
 
-### Phase 4: External Data Integration (Complete)
-
-Import from external sources to reduce manual input:
-- Goodreads CSV import for reading preferences
-- Spotify/Last.fm for music profile
-- Calendar pattern analysis for routines
-
-## Data Structure
+**Communication Fingerprint** — quantified writing style (formality, verbosity, sentence length, emoji usage, tone), extracted from WRITING_STYLE.md and writing samples. Stored under `traits.communicationProfile`.
 
 ```javascript
 traits: {
@@ -77,13 +33,60 @@ traits: {
 }
 ```
 
+## Confidence Scoring & Gap Recommendations
+
+Per-dimension confidence is computed either by an AI pass (`calculateConfidence`) or a deterministic local fallback (`calculateLocalConfidence` in `server/services/digital-twin-analysis.js`) that scores each Big Five dimension plus communication from document evidence. Results persist at `meta.confidence`.
+
+Gap recommendations identify the lowest-confidence aspects, generate specific questions to fill them, and prioritize enrichment categories by confidence gap. They regenerate after enrichment answers and data imports.
+
+## Behavioral Feedback Loop
+
+`server/services/feedbackLoop.js` captures "sounds like me" / "doesn't sound like me" validations on twin responses, tracks feedback patterns, and computes suggested per-document weight adjustments (`documentWeightAdjustments`), surfaced through the feedback stats routes. The adjustments are recorded and reported — they do not yet feed automatically into the document weights that context assembly sorts by (those come from each document's user-set weight). Feedback persists in `feedback.json` (peer-synced). Routes: `POST /feedback`, `GET /feedback/stats`, `POST /feedback/recalculate`, `GET /feedback/recent`.
+
+## External Data Import
+
+`server/services/digital-twin-import.js` reduces manual input by importing:
+
+- **Goodreads** CSV export (reading preferences)
+- **Spotify** extended streaming history JSON (music profile)
+- **Letterboxd** film export
+- **iCal** calendar files — event categorization and recurring-pattern analysis (routines)
+
+Routes: `GET /import/sources`, `POST /import/analyze`, `POST /import/save`.
+
+## Transcript & Image Analysis
+
+Multi-modal capture works on pasted/uploaded artifacts — there is no live audio or video capture infrastructure:
+
+- **Interview analysis** (`POST /interview/analyze`) — extracts traits from a pasted conversation transcript
+- **Spoken vs. written style comparison** (`POST /style/spoken-written`, `digital-twin-style-comparison.js`) — compares a pasted speech transcript against written samples; the output is qualitative (spoken/written profiles, differences, a suggested communication profile), not a numeric match score
+- **Image identity** (`POST /identity/image`, `digital-twin-image-identity.js`) — analyzes an uploaded image for identity/visual-spec content
+
+## Behavioral Testing Suites
+
+All run from the Test tab, graded by an LLM scorer with pass/partial/fail verdicts (`parseScorerVerdict`), with per-suite run history:
+
+- **Behavioral tests** — the base suite plus AI-generated dynamic tests (see [Soul System](./soul-system.md))
+- **Multi-turn conversation suite** (`MULTI_TURN_SUITE.md`, `digital-twin-multi-turn-testing.js`) — plays each scenario's user turns in order (the twin sees its own prior replies) and grades whether the twin stayed consistent across the whole conversation: not contradicting earlier turns, caving to repeated pushback, or forgetting a stated constraint
+- **Values-alignment suite** (`VALUES_ALIGNMENT_SUITE.md`, `digital-twin-values-testing.js`) — poses ethical dilemmas and grades each answer against the ranked values hierarchy
+- **Adversarial boundary suite** (`ADVERSARIAL_BOUNDARY_SUITE.md`, `digital-twin-adversarial-testing.js`) — tries to manipulate the embodied twin (authority pressure, flattery, guilt, incremental escalation, harmful reframing) into crossing a stated boundary; grades held / partial / breached
+
+Suite spec documents ship in `data.reference/digital-twin/`.
+
+## Personas & Context Switching
+
+`server/services/digital-twin-personas.js` provides named personas (e.g. Professional, Casual, Family) with full CRUD, stored in `meta.personas`. One persona is active at a time (`meta.settings.activePersonaId`); its `traitAdjustments` blend over the base twin's quantitative traits to produce a per-context communication calibration. All four Test-tab suites (behavioral, values-alignment, adversarial-boundary, multi-turn) can execute *as* a selected persona, and each run-history entry records which persona it embodied.
+
 ## UI Components
 
-- `PersonalityMap.jsx` - Radar chart of Big Five with confidence coloring
-- `ConfidenceGauge.jsx` - Per-dimension confidence indicator
-- `GapRecommendations.jsx` - Prioritized enrichment suggestions
+Page: `client/src/pages/DigitalTwin.jsx`. Quantitative-layer components in `client/src/components/digital-twin/`:
 
-## API Endpoints
+- `PersonalityMap.jsx` — radar chart of Big Five with confidence coloring
+- `ConfidenceGauge.jsx` — per-dimension confidence indicator
+- `GapRecommendations.jsx` — prioritized enrichment suggestions
+- `InterviewAnalysisCard.jsx`, `PersonaBadge.jsx`, `tabs/AdversarialBoundaryPanel.jsx`, and the tab panels under `tabs/`
+
+## API Endpoints (quantitative layer)
 
 | Route | Description |
 |-------|-------------|
@@ -93,41 +96,30 @@ traits: {
 | GET /api/digital-twin/confidence | Get confidence scores |
 | POST /api/digital-twin/confidence/calculate | Recalculate confidence |
 | GET /api/digital-twin/gaps | Get gap recommendations |
+| POST /api/digital-twin/feedback | Submit "sounds like me" validation |
+| GET/POST /api/digital-twin/feedback/* | Feedback stats, recalculate weights, recent |
+| GET/POST /api/digital-twin/{values,adversarial,multi-turn}-tests[/run,/history] | Testing suites |
+| GET/POST /api/digital-twin/personas, PUT/DELETE /api/digital-twin/personas/:id | Persona CRUD (no GET by id) |
+| GET/PUT /api/digital-twin/personas/active | Active persona selection |
+| GET/POST /api/digital-twin/import/* | External data import |
+| POST /api/digital-twin/interview/analyze | Transcript trait extraction |
+| POST /api/digital-twin/style/spoken-written | Spoken vs written comparison |
+| POST /api/digital-twin/identity/image[/save] | Image identity analysis |
+| GET/POST/DELETE /api/digital-twin/snapshots[/:id,/compare] | Twin snapshots and comparison |
 
-## Planned Phases
-
-### Phase 3: Behavioral Feedback Loop
-- Response validation: "sounds like me" / "not quite me" ratings
-- Feedback analysis and document improvement suggestions
-- Adaptive document weighting based on feedback patterns
-
-### Phase 5: Multi-Modal Personality Capture
-- Voice analysis for speech patterns
-- Video interview for facial expressions and gestures
-- Comparison of spoken vs written style
-
-### Phase 6: Advanced Behavioral Testing
-- Complex multi-turn conversation scenarios — **done**: the Test tab's multi-turn suite (`MULTI_TURN_SUITE.md`) plays each scenario's user turns in order (the twin sees its own prior replies) and grades whether the twin stayed consistent / partial / inconsistent across the whole conversation — not contradicting earlier turns, caving to repeated pushback, or forgetting a stated constraint
-- Ethical dilemma tests aligned with stated values — **done**: the Test tab's values-alignment suite poses dilemmas and grades each answer against the user's ranked values hierarchy
-- Quantitative scoring of communication style match
-- Adversarial testing of boundaries — **done**: the Test tab's adversarial-boundary suite (`ADVERSARIAL_BOUNDARY_SUITE.md`) tries to manipulate the embodied twin (authority pressure, flattery, guilt, incremental escalation, harmful reframing) into crossing a stated boundary, and grades each response held / partial / breached
+The document/test/enrich/export endpoints shared with the document workflow are listed in [Soul System](./soul-system.md).
 
-### Phase 7: Twin Personas & Context Switching
-- Named personas (Professional, Casual, Family, Creative)
-- Blending rules for trait variation per context
-- Per-persona testing — **done**: the Test tab can run the behavioral and values-alignment suites *as* a selected persona (or the base twin), and each run-history entry records which persona it embodied
+## Not Built
 
-## Success Metrics
+Kept as an honest record of the original roadmap's unshipped ideas:
 
-| Metric | Current | Target |
-|--------|---------|--------|
-| Behavioral test pass rate | ~70% | >90% |
-| Enrichment category coverage | Manual | Confidence-guided |
-| User feedback: "sounds like me" | N/A | >85% |
-| Time to usable twin | Hours | <30 min |
-| Trait confidence coverage | 0% | >80% across all dimensions |
+- Live voice-audio analysis and video-interview capture (only pasted transcripts and uploaded images are supported)
+- A numeric communication-style match score (style comparison is qualitative)
+- Multi-persona blending (one active persona overlays the base twin)
+- Last.fm import (music import is Spotify-only)
 
 ## Related Features
 
-- [Soul System](./soul-system.md) - Document-based identity management
-- [Chief of Staff](./chief-of-staff.md) - Uses twin context in agent prompts
+- [Soul System](./soul-system.md) — document-based identity management (the document workflow this layer builds on)
+- [Unified Identity System](./identity-system.md) — genome/chronotype/taste/goals identity architecture
+- [Chief of Staff](./chief-of-staff.md) — uses twin context in agent prompts
diff --git a/docs/features/identity-system.md b/docs/features/identity-system.md
index 7c7951d38..2fdf48762 100644
--- a/docs/features/identity-system.md
+++ b/docs/features/identity-system.md
@@ -1,6 +1,8 @@
 # Unified Digital Twin Identity System (M42)
 
 > **Status:** design plan, since largely implemented (`server/services/identity.js`, `server/routes/identity.js`, `data/digital-twin/{identity,chronotype,goals}.json`). Kept here as the identity-architecture reference; phase/roadmap sections below are the original plan, and a few items (e.g. `aesthetics.json`) remain unbuilt. For current behavior, trust the code paths named in each section.
+>
+> Three docs cover the digital-twin subsystem from different angles: [Soul System](./soul-system.md) (the **document workflow**), [Digital Twin](./digital-twin.md) (the **quantitative modeling layer**), and this one (the **unified identity architecture**).
 
 Connects Genome (117 markers, 32 categories), Chronotype (5 sleep markers + behavioral), Aesthetic Taste (P2 complete, P2.5 adds twin-aware prompting), and Mortality-Aware Goals into a single coherent Identity architecture with cross-insights engine.
 
diff --git a/docs/features/openclaw-operator-chat.md b/docs/features/openclaw-operator-chat.md
index 2c0fac9ce..6402418ab 100644
--- a/docs/features/openclaw-operator-chat.md
+++ b/docs/features/openclaw-operator-chat.md
@@ -1,446 +1,74 @@
 # OpenClaw Operator Chat
 
-> **Status: implemented.** See `server/routes/openclaw.js`, `server/integrations/openclaw/api.js`, `client/src/pages/OpenClaw.jsx`, and the client service `client/src/services/apiOpenclaw.js` (not the proposed `openclaw.js`). The shipped endpoint surface differs from this proposal: `GET /api/openclaw/status`, `GET /api/openclaw/sessions`, `GET/POST /api/openclaw/sessions/:id/messages`, and streaming `POST /api/openclaw/sessions/:id/messages/stream`. The proposed `POST /sessions`, `GET /jobs`, `GET /subagents`, and `POST /context/compose` were not built.
-
-A generic, first-party operator chat surface inside PortOS that allows a user to communicate with a local or privately reachable OpenClaw runtime without relying on third-party messaging providers like Telegram.
+A generic, first-party operator chat surface inside PortOS for talking to a local or privately reachable [OpenClaw](https://github.com/openclaw/openclaw) runtime — without routing sensitive operator conversations through third-party messaging providers like Telegram.
 
 ## Why this exists
 
-PortOS is already reachable over Tailscale and is intended to be a secure, self-hosted operating surface. For sensitive operator work, routing chat through Telegram or another third-party messaging network adds avoidable privacy and security exposure.
-
-This feature adds a **generic** assistant/operator chat module to PortOS so users can:
-
-- chat with their assistant directly inside PortOS
-- inspect session state without leaving the app
-- keep sensitive machine/admin context off third-party transports
-- use PortOS as a first-party local operator console
-
-## Critical product constraint
-
-PortOS is a public open-source project used by many people.
-
-Therefore:
-
-- **do not bake any private assistant identity into product features**
-- **do not assume one specific assistant persona or relationship model**
-- **do not assume one specific machine/network topology**
-- **do not assume OpenClaw is always present**
-
-This feature must remain:
-
-- generic
-- optional
-- instance-configurable
-- safe for users running their own OpenClaw or no assistant at all
-
-Identity, assistant naming, local network details, and machine-specific behavior must live in local/private configuration or git-ignored instance data.
-
-## Product framing
-
-This should be presented as something like:
-
-- **Operator Chat**
-- **Assistant Console**
-- **OpenClaw**
-- **Runtime Chat**
-
-Not:
-
-- a hardcoded persona name
-- a product-level "Rowan" feature
-- a fixed Chief-of-Staff replacement
-
-## Goals
-
-1. Provide a first-party chat UI inside PortOS for talking to an assistant/runtime.
-2. Reduce reliance on Telegram for operator/admin conversations.
-3. Keep the feature generic enough for any PortOS instance to connect to its own OpenClaw deployment.
-4. Preserve clean boundaries between:
-   - PortOS UI
-   - assistant runtime
-   - private instance config
-5. Make chat adjacent to PortOS state, apps, repos, tasks, and services.
-
-## Non-goals
-
-- replacing all external messaging integrations
-- embedding assistant identity into PortOS core
-- making PortOS depend on OpenClaw to function
-- exposing private machine details through public/open-source defaults
-- coupling this feature tightly to one user's workflow
-
-## Existing PortOS extension points that make this feasible
-
-PortOS already has several relevant building blocks:
-
-### UI patterns
-- `client/src/pages/ChiefOfStaff.jsx`
-- `client/src/components/cos/*`
-- existing tabbed operational UI patterns
-- event logs, terminal-style panels, status indicators
-
-### Networking and real-time
-- `client/src/services/socket.js` uses relative paths and is already Tailscale-friendly
-- `server/index.js` already mounts Socket.IO and API routes for local/private access
-
-### Agent/runtime patterns
-- CoS page and agent runner already model:
-  - status
-  - running jobs
-  - event streams
-  - agent outputs
-- `server/cos-runner/` already provides a process/runtime management pattern
-
-### Messaging patterns
-- `client/src/pages/Messages.jsx`
-- `server/routes/messages.js`
-- existing draft/message/thread models can inform UX, even if operator chat is a separate domain
-
-### Security assumptions
-- PortOS already assumes trusted-network/private access via Tailscale
-- this is compatible with a local-first assistant console
-
-## High-level architecture
-
-### Separation of concerns
-
-#### PortOS is responsible for:
-- operator UI
-- session list UI
-- message history UI
-- context attachment UX
-- runtime connection status
-- local authentication to PortOS itself
-- optional linking between chat and PortOS pages/apps/tasks
-
-#### OpenClaw is responsible for:
-- session runtime
-- message handling
-- tool execution
-- subagent/session orchestration
-- response generation
-- runtime-side security/policy enforcement
-
-### Integration model
-
-PortOS should talk to OpenClaw through a small adapter/integration layer, not by reimplementing assistant logic.
-
-Suggested shape:
-
-- **server integration module**
-  - `server/integrations/openclaw/*`
-- **PortOS API routes**
-  - `server/routes/openclaw.js`
-- **client service wrapper**
-  - `client/src/services/openclaw.js`
-- **UI page**
-  - `client/src/pages/OpenClaw.jsx` or `client/src/pages/OperatorChat.jsx`
-
-## Proposed capabilities
-
-### Phase 1 — MVP: first-party assistant chat
-
-A page inside PortOS where the user can:
-
-- see whether an OpenClaw runtime is configured/reachable
-- view available sessions or a default session
-- load recent message history
-- send a message
-- receive assistant replies
-- see timestamps and basic status
-
-Suggested features:
-
-- session selector
-- message timeline
-- input composer
-- connection status badge
-- send/receive loading states
-- optional "reply in current session" mode
-
-### Phase 2 — operator-aware context
-
-Allow the user to send a message with attached PortOS context such as:
-
-- current page/app
-- selected repo/app
-- active task
-- system status summary
-- current machine/app metadata
-
-Examples:
+PortOS is reachable over Tailscale and is intended to be a secure, self-hosted operating surface. For sensitive operator work, routing chat through Telegram or another third-party messaging network adds avoidable privacy and security exposure. Operator Chat keeps assistant conversations first-party: chat with your assistant directly inside PortOS, inspect session state without leaving the app, and keep machine/admin context off third-party transports.
 
-- "look at this app"
-- "review the current queue"
-- "inspect the service behind this page"
-- "summarize what changed here"
+## Product constraints
 
-This context should be explicit and user-controlled, not silently leaked.
+PortOS is a public open-source project used by many people, so this feature is:
 
-### Phase 3 — runtime visibility and controls
+- **Generic** — no assistant identity, persona, or relationship model is baked into product code.
+- **Optional** — PortOS works cleanly without OpenClaw; the page degrades gracefully when unconfigured.
+- **Instance-configurable** — identity, endpoints, tokens, and machine topology live in local, git-ignored config (`data/openclaw/config.json`) or environment variables, never in committed defaults.
 
-Expose runtime information such as:
+## Architecture
 
-- connected runtime endpoint
-- active sessions
-- spawned subagents/jobs
-- recent tool actions
-- execution status
-- reminders/cron job visibility if supported
+PortOS talks to the OpenClaw runtime through a thin adapter — it does not reimplement assistant logic:
 
-This should feel like an operator console, not just a basic chat box.
+- **Integration module** — `server/integrations/openclaw/api.js` is the entire runtime client: config loading, auth headers, upstream calls, session/message/status normalization, and error translation. It reaches the runtime through two upstream paths: a tool-invoke endpoint (`/tools/invoke`, for `sessions_list` / `sessions_history`) and an OpenAI-Responses-style endpoint (`/v1/responses`, for send + stream with `model: openclaw:<agentId>`).
+- **Routes** — `server/routes/openclaw.js`, mounted at `/api/openclaw`.
+- **Client service** — `client/src/services/apiOpenClaw.js` (status, sessions, messages, non-streaming send, SSE streaming send).
+- **Page** — `client/src/pages/OpenClaw.jsx` at `/openclaw` (registered in `App.jsx` and in `NAV_COMMANDS` under the Brain section, so it is reachable from ⌘K and voice nav).
 
-### Phase 4 — structured PortOS actions
+Responsibility split: PortOS owns the operator UI, session list, message history, attachment/context UX, and runtime connection status. OpenClaw owns the session runtime, message handling, tool execution, orchestration, response generation, and runtime-side policy enforcement.
 
-Optional future capabilities:
+## API surface
 
-- ask assistant to inspect a repo and open linked results
-- pass page context to assistant with one click
-- show inline approvals/review items
-- link assistant output to Review / Goals / Apps / Brain surfaces
+| Route | Description |
+|-------|-------------|
+| `GET /api/openclaw/status` | Configured? Reachable (live `sessions_list` probe)? Default session, label, runtime info (allowlisted fields only — never the raw upstream payload) |
+| `GET /api/openclaw/sessions` | List sessions discovered from the runtime |
+| `GET /api/openclaw/sessions/:id/messages` | Message history (`?limit=`, default 50, max 200) |
+| `POST /api/openclaw/sessions/:id/messages` | Send a message (non-streaming) |
+| `POST /api/openclaw/sessions/:id/messages/stream` | Send a message, stream the reply as SSE |
 
-## Privacy and security model
+Both send routes validate with a shared Zod schema: a required non-empty `message`, an optional `context` object (`appName`, `repoPath`, `directoryPath`, `extraInstructions` — flattened into prose server-side and prepended to the input), and optional `attachments` (max 8, image/file, base64 or URL, ~10 MB per attachment and 50 MB combined). Send routes return 503 `OPENCLAW_UNCONFIGURED` when not configured; the history route soft-fails to `{ configured: false, reachable: false, messages: [] }` instead.
 
-### Public/open-source code may contain
-- generic OpenClaw connector support
-- generic UI for assistant/runtime chat
-- generic settings for endpoint/auth/session behavior
-- generic local data storage hooks
+**Proposed but not built** (kept here as an honest record of the original proposal's larger surface): `POST /api/openclaw/sessions` (create/bind a session — sessions are discovery-only today; the client injects a synthetic "default" session but cannot create one), `GET /api/openclaw/jobs`, `GET /api/openclaw/subagents`, and `POST /api/openclaw/context/compose` (context is composed inline on the send payload instead of via a separate endpoint).
 
-### Private instance-local data must contain
-- assistant identity/persona
-- local machine topology
-- hostnames, ports, URLs, tokens
-- role preferences
-- private operator notes
-- machine-specific context mapping
+## UI
 
-### Rules
-- no private assistant identity in product defaults
-- no machine-specific hostnames or ports in committed code/docs beyond generic examples
-- no assumptions about Telegram or other third-party transports
-- no assumptions that all users want autonomous operator chat
-- fail gracefully when OpenClaw is unconfigured or unreachable
+Two-column layout on `/openclaw`:
 
-## Configuration model
+- **Left sidebar** — runtime status panel (label, configured, reachable, default session), session list with a "Show older chats" partition, and a refresh action.
+- **Main panel** — role-tagged message timeline with timestamps and per-message attachment chips, a streaming placeholder while the assistant replies, and a composer (⌘↵ to send, Stop button for in-flight streams).
 
-### Public-safe config surface
-PortOS can expose generic settings like:
+Context and attachments are explicit and user-controlled, not silently leaked: an app/repo picker (`AppContextPicker`), a directory-context input, an extra-instructions input, and file/image attachments via drag-and-drop, paste, or file picker (`useOpenClawAttachments`; streaming via `useOpenClawStream`).
 
-```json
-{
-  "enabled": true,
-  "provider": "openclaw",
-  "transport": "http",
-  "sessionMode": "default",
-  "allowContextAttachments": true,
-  "showRuntimeStatus": true
-}
-```
+## Configuration
 
-### Private instance-local config
-Actual endpoint/auth/session defaults should live in local, git-ignored config, for example:
+Config resolves in two layers — environment variables override the file:
 
-```json
-{
-  "enabled": true,
-  "baseUrl": "http://100.x.x.x:PORT",
-  "authToken": "...",
-  "defaultSession": "main",
-  "label": "Local Operator Runtime",
-  "paths": {
-    "toolsInvoke": "/tools/invoke",
-    "responses": "/v1/responses"
-  }
-}
-```
+- **File**: `data/openclaw/config.json` (git-ignored; reference template at `data.reference/openclaw/config.json` ships with `enabled: false`). Fields: `enabled`, `baseUrl`, `authToken`, `authHeader`, `authScheme`, `defaultSession`, `defaultAgentId`, `timeoutMs`, `label`, `paths` (upstream path overrides) — the file accepts the same keys the env vars override.
+- **Env**: `OPENCLAW_ENABLED`, `OPENCLAW_BASE_URL`, `OPENCLAW_AUTH_TOKEN`, `OPENCLAW_AUTH_HEADER` (default `Authorization`), `OPENCLAW_AUTH_SCHEME` (default `Bearer`; empty string = token-only), `OPENCLAW_LABEL`, `OPENCLAW_DEFAULT_SESSION`, `OPENCLAW_DEFAULT_AGENT_ID` (default `main`), `OPENCLAW_TIMEOUT_MS` (default 15000).
 
-The exact file/location should align with PortOS local config conventions, but must remain out of public repo defaults if it contains private topology or credentials.
-
-## Suggested API surface inside PortOS
-
-These would be PortOS routes that proxy or adapt to an OpenClaw runtime.
-
-### Status
-- `GET /api/openclaw/status`
-  - runtime reachable?
-  - configured?
-  - default session?
-
-### Sessions
-- `GET /api/openclaw/sessions`
-- `GET /api/openclaw/sessions/:id/messages`
-- `POST /api/openclaw/sessions/:id/messages`
-- `POST /api/openclaw/sessions`
-  - create or bind a new operator session if needed
-
-### Optional runtime actions
-- `GET /api/openclaw/jobs`
-- `GET /api/openclaw/subagents`
-- `POST /api/openclaw/context/compose`
-  - build a safe context bundle from current PortOS state
-
-These should remain thin adapters where possible.
-
-## UI proposal
-
-### New page
-A new page such as:
-
-- `/openclaw`
-- `/operator-chat`
-- `/assistant`
-
-I recommend **`/openclaw`** or **`/operator-chat`**.
-
-### Page layout
-
-#### Left rail
-- runtime status
-- session list
-- quick actions
-- optional recent tasks/subagents
-
-#### Main panel
-- message timeline
-- streamed assistant replies
-- tool activity summaries (optional)
-- context chips
-
-#### Right rail (future)
-- current page/app context
-- recent system events
-- inspectable attachments
-
-### UX principles
-- chat should feel calm and operational, not social-media-like
-- context attachments should be explicit
-- runtime status should be visible
-- errors should be actionable
-- chat must not block normal PortOS use
-
-## Integration with existing PortOS surfaces
-
-### Chief of Staff
-Relationship:
-- CoS remains an autonomous/managed system surface
-- OpenClaw chat is a direct operator conversation surface
-
-Possible links:
-- "Ask about this CoS task"
-- "Open in Operator Chat"
-- "Send BTW / additional context"
-
-### Messages
-Relationship:
-- Messages page manages external communications/accounts
-- OpenClaw Operator Chat is an internal/local console
-
-This distinction should stay clear in the UI.
-
-### Review
-Assistant outputs that need human attention could eventually create Review items.
-
-### Apps / Instances / DevTools / Shell
-These are strong context sources for chat attachments and operator actions.
-
-## Failure modes to design for
-
-- OpenClaw unreachable
-- OpenClaw configured incorrectly
-- runtime session missing/expired
-- streaming disconnects
-- PortOS page context too large/noisy
-- user accidentally sharing more context than intended
-- partial feature deployment on instances without OpenClaw
+"Configured" requires `enabled` not false AND a well-formed `http:`/`https:` `baseUrl` (other schemes are rejected). There is no settings-page UI for this — it is deliberately file/env-only, keeping private topology out of synced app state.
 
 ## Graceful degradation
 
-If OpenClaw is not configured:
-- hide the page by default or show a setup screen
-- do not break PortOS navigation
-- do not throw noisy errors in unrelated pages
-
-If runtime is unavailable:
-- show disconnected status
-- preserve local UI state where possible
-- allow retry/reconnect
-
-## Suggested implementation order
-
-### Step 1 — Spec and extension-point audit
-- confirm PortOS route/page placement
-- confirm local config pattern
-- confirm whether proxying through PortOS server is preferable to direct browser calls
-
-### Step 2 — Thin server adapter
-- add OpenClaw integration module
-- add status/session/message proxy routes
-- keep adapter minimal
-
-### Step 3 — MVP UI page
-- session list
-- message timeline
-- composer
-- status badge
-
-### Step 4 — context attachments
-- current page/app/task context chips
-- explicit attach/send flow
-
-### Step 5 — runtime/operator extras
-- subagents
-- jobs
-- session status
-- linked review actions
-
-## Recommended design decisions
-
-1. **Keep the product generic**
-   - no private assistant identity in public code
-
-2. **Use local/private config for identity and topology**
-   - assistant name, endpoint, role, machine map stay local
-
-3. **Proxy through PortOS server first**
-   - keeps auth/config simpler
-   - avoids browser-side exposure of private runtime details
-   - fits existing PortOS API patterns
-
-4. **Do not merge this into Messages**
-   - operator chat is a different domain than email/SMS/Telegram messaging
-
-5. **Keep OpenClaw optional**
-   - PortOS must still work cleanly without it
-
-## Open questions
-
-1. Should OpenClaw chat live as a top-level page or under Chief of Staff?
-   - My recommendation: top-level page or top-level tool, not hidden under CoS
-
-2. Should PortOS support multiple runtimes or one default runtime first?
-   - My recommendation: one default runtime first, design for future plurality
-
-3. Should chat sessions be created/managed by PortOS or discovered from OpenClaw?
-   - My recommendation: discover existing sessions first, optionally allow PortOS to create a dedicated operator session
-
-4. Should tool activity be shown in the timeline from the start?
-   - My recommendation: basic status first, detailed tool activity later
-
-## Initial deliverables
+- Unconfigured: the page stays visible with an "Unconfigured" badge, an empty-state prompt to add local config, a disabled composer, and no noisy errors elsewhere in the app.
+- Unreachable: status shows "Unavailable" with the probe's error message; `getRuntimeStatus`/`listSessions` return structured `{ configured, reachable, ... }` payloads rather than throwing.
+- The status endpoint's runtime info is allowlisted so upstream payloads and tokens never leak to the client.
 
-- this feature spec
-- PortOS extension-point audit
-- minimal server-side OpenClaw adapter
-- minimal `/openclaw` page
-- local private config example (git-ignored)
+## Relationship to other surfaces
 
-## Bottom line
+- **Chief of Staff** — CoS remains the autonomous/managed agent surface; Operator Chat is a direct conversation surface. They are separate domains.
+- **Messages** — the Messages page manages external communications/accounts; Operator Chat is an internal/local console. The distinction is deliberate.
 
-PortOS should gain a **generic, optional, first-party OpenClaw operator chat surface** so users can communicate with their assistant/runtime directly over their private network instead of depending on Telegram.
+## Tests
 
-That feature should be:
-- generic in product code
-- private in identity/config
-- optional per instance
-- aligned with existing PortOS CoS, socket, and Tailscale architecture
+- `server/routes/openclaw.test.js` — route coverage: status/sessions configured + unconfigured, history limits and clamping, send validation (missing message, attachment count/size caps), 503 guards, SSE content-type and event streaming.
+- `server/integrations/openclaw/api.test.js` — `getRuntimeStatus` field allowlisting, unreachable → `runtime: null`, unconfigured → no fetch.
diff --git a/docs/features/post.md b/docs/features/post.md
index d2f104532..32fa3e552 100644
--- a/docs/features/post.md
+++ b/docs/features/post.md
@@ -1,190 +1,108 @@
 # POST (Power On Self Test)
 
-## Overview
+POST is a daily cognitive self-test and training system within MeatSpace. Sessions take ~5 minutes and balance testing with active training — teaching techniques and building skills, not just measuring them.
 
-POST is a daily cognitive self-test and training system within MeatSpace. It covers five cognitive domains: **Math**, **Memory**, **Wordplay**, **Verbal Agility**, and **Imagination**. Sessions are designed to take ~5 minutes and balance testing with active training — teaching techniques and building skills, not just measuring them.
+> The POST overhaul epic (#1985) is actively evolving this area (responsive layouts, analytics, spaced repetition, adaptive difficulty). This doc describes the shipped state; expect churn.
 
 ## Cognitive Domains
 
-### 1. Mental Math (existing)
-- **Doubling Chain** — sequential doubling from a seed number
-- **Serial Subtraction** — countdown by a fixed subtrahend (e.g., 100 - 7 - 7 - 7...)
-- **Multiplication** — random N-digit multiplication problems
-- **Powers** — base^exponent calculations
-- **Estimation** — approximate large arithmetic within tolerance
+Six drill domains, each individually enable/disable-able (`client/src/components/meatspace/post/constants.js`):
 
-### 2. Memory (new: Memory Builder)
-Configurable memory training for songs, poems, sequences, speeches, or any ordered content.
+### Mental Math (~60s)
+`doubling-chain` (sequential doubling from a seed), `serial-subtraction` (countdown by a fixed subtrahend), `multiplication` (random N-digit problems), `powers` (base^exponent), `estimation` (approximate large arithmetic within tolerance).
 
-**Built-in Content:**
-- Tom Lehrer's "The Elements" — periodic table set to music, with interactive element identification
+### Memory (~90s)
+Memory Builder drills drawn from the user's memory items: `memory-sequence`, `memory-element-flash`, and `memory-fill-blank`, practiced in the standalone Memory Builder (see below). The server's scored-session rescoring accepts `memory-sequence`/`memory-element-flash` (`POST_SUPPORTED_MEMORY_TYPES`), but the session launcher currently composes scored sessions from the math, wordplay/verbal/imagination (LLM), and cognitive domains only — memory training runs separately.
 
-**Custom Content:**
-- User adds any text/song/sequence they want to memorize
-- System breaks it into chunks and builds progressive recall exercises
+### Wordplay (~60s)
+`pun-wordplay` and `word-association`, plus the cacheable wordplay set: `compound-chain`, `bridge-word`, `double-meaning`, `idiom-twist`. All LLM-scored.
 
-**Training Modes:**
-- **Learn** — progressive reveal: show content line-by-line, then chunk-by-chunk, building from small to large
-- **Fill-in-the-Blank** — show partial content with blanks to fill; difficulty increases as more words are blanked
-- **Sequence Recall** — given a starting point, continue the sequence from memory
-- **Random Prompt** — given a random line/chunk, identify what comes before and after
-- **Speed Run** — recite the full sequence as fast as possible with accuracy tracking
+### Verbal Agility (~60s)
+`wit-comeback` (respond to scenarios with humor), `verbal-fluency` (name category items against the clock), `story-recall` (read a paragraph, answer detail questions). LLM-scored.
 
-**Spaced Repetition:**
-- Track per-chunk mastery (how often recalled correctly, average response time)
-- Focus training on weakest chunks
-- Graduated difficulty: new items start with heavy hints, mastered items tested with no hints
+### Imagination & Ideation (~60s)
+`what-if` (absurd hypotheticals), `alternative-uses` (divergent-thinking classic), `story-prompt` (micro-story from 3 random words), `invention-pitch`, `reframe` (recast a negative situation positively/humorously). LLM-scored for originality, elaboration, and feasibility.
 
-### 3. Wordplay (existing, enhanced)
-- **Pun/Wordplay** — create puns on given topics (LLM-scored)
-- **Word Association** — free-associate with prompt words (LLM-scored)
+### Cognitive (~90s)
+Classic psychometric drills, scored deterministically server-side (`server/services/meatspacePostCognitive.js`, runner `PostCognitiveDrillRunner.jsx`): `n-back`, `digit-span`, `stroop`, `schulte-table`, `mental-rotation`, `reaction-time`.
 
-### 4. Verbal Agility (existing)
-- **Wit Comeback** — respond to scenarios with humor (LLM-scored)
-- **Verbal Fluency** — name items in a category within time limit (LLM-scored)
-- **Story Recall** — read a paragraph, answer detail questions (LLM-scored)
+### Morse (training-only)
+`MorseTrainer.jsx` (`morse-copy`, `morse-head-copy`, `morse-send`, deep-linked at `/post/morse/:mode`) is deliberately excluded from scored sessions — Morse practice posts to the training log only.
 
-### 5. Imagination & Ideation (new)
-Creative thinking exercises scored by AI for originality, elaboration, and feasibility.
+## Session Structure
 
-- **What If** — respond to absurd hypothetical scenarios ("What if gravity reversed for 10 minutes every Tuesday?")
-- **Alternative Uses** — list creative uses for a common object (divergent thinking classic)
-- **Story Prompt** — given 3 random words, create a micro-story connecting them
-- **Invention Pitch** — given a problem, pitch an inventive solution in 2-3 sentences
-- **Reframe** — take a negative situation and reframe it positively/humorously
+The launcher offers two ways to start (`DrillTransition.jsx` handles the between-drill interstitials; the session state machine is `client/src/hooks/usePostSession.js`):
 
-## Session Structure (~5 minutes)
+- **Full session** — queues every enabled math/LLM/cognitive drill; math and LLM drills carry their configured time limits, while cognitive drills are self-paced/stimulus-driven with no countdown.
+- **Quick session** — pulls one random drill per enabled domain against the per-domain time budgets above (~5.5 minutes total with transitions).
 
-A POST session pulls one drill from each enabled domain, time-budgeted:
+## Training vs Testing
 
-| Domain | Drill Count | Time Budget |
-|--------|-------------|-------------|
-| Math | 1 drill (e.g., 10 multiplication problems) | ~60s |
-| Memory | 1 memory item exercise | ~90s |
-| Wordplay | 1 drill (e.g., 3 pun challenges) | ~60s |
-| Verbal | 1 drill (e.g., 1 story recall) | ~60s |
-| Imagination | 1 drill (e.g., 2 what-if prompts) | ~60s |
+The session launcher (`PostSessionLauncher.jsx`) has a per-session Test/Train toggle:
 
-Total: ~5.5 minutes with transitions. Users can enable/disable any domain.
+- **Test** — timed, scored, saved to session history (`POST /api/meatspace/post/sessions`).
+- **Train** — immediate feedback, hints on wrong answers, not scored; entries go to a separate training log (`POST /api/meatspace/post/training`) with its own stats, streaks, and entries endpoints (`server/services/meatspacePostTraining.js` → `data/meatspace/post-training-log.json`).
 
-## Training vs Testing
+## Memory Builder
+
+Configurable memory training for songs, poems, sequences, speeches, or any ordered content (`server/services/meatspacePostMemory.js`; client `MemoryBuilder.jsx`, `MemoryPractice.jsx`).
 
-Each domain supports two modes:
-- **Train** — learning-focused: hints, progressive difficulty, immediate feedback, no final score
-- **Test** — performance-focused: timed, scored, saved to session history
-
-The session launcher lets users pick mode per-domain. Training sessions are tracked separately (practice count, streaks) but don't contribute to the scored POST history.
-
-## Elements Song Memory Builder
-
-### Content Structure
-The Tom Lehrer "Elements Song" is stored as structured data:
-- Full lyrics split into lines
-- Each element name mapped to its atomic number and symbol
-- Musical phrases grouped for chunked learning
-
-### Interactive Features
-- **Karaoke Mode** — lyrics scroll with timing, user fills in blanked element names
-- **Element Flash** — show atomic number or symbol, user names the element (and vice versa)
-- **Sequence Game** — "What element comes after Arsenic in the song?"
-- **Progress Map** — periodic table colored by mastery (green = solid, yellow = shaky, red = unlearned)
-- **Audio Reference** — link to the song for listening practice (user provides their own audio file)
-
-### Data Model
-```json
-{
-  "memoryItems": [
-    {
-      "id": "elements-song",
-      "title": "The Elements (Tom Lehrer)",
-      "type": "song",
-      "builtin": true,
-      "content": {
-        "lines": [
-          { "text": "There's antimony, arsenic, aluminum, selenium", "elements": ["Sb", "As", "Al", "Se"] },
-          { "text": "And hydrogen and oxygen and nitrogen and rhenium", "elements": ["H", "O", "N", "Re"] }
-        ],
-        "chunks": [
-          { "id": "verse-1", "lineRange": [0, 3], "label": "Verse 1" }
-        ]
-      },
-      "mastery": {
-        "overallPct": 45,
-        "chunks": { "verse-1": { "correct": 12, "attempts": 20, "lastPracticed": "2026-03-08" } },
-        "elements": { "Sb": { "correct": 5, "attempts": 5 }, "As": { "correct": 3, "attempts": 5 } }
-      }
-    }
-  ]
-}
-```
-
-### Custom Memory Items
-Users can add their own items via the Config page:
-```json
-{
-  "id": "user-uuid",
-  "title": "Gettysburg Address",
-  "type": "speech",
-  "builtin": false,
-  "content": {
-    "lines": [
-      { "text": "Four score and seven years ago our fathers brought forth on this continent, a new nation" },
-      { "text": "conceived in Liberty, and dedicated to the proposition that all men are created equal." }
-    ],
-    "chunks": [
-      { "id": "opening", "lineRange": [0, 1], "label": "Opening" }
-    ]
-  },
-  "mastery": {}
-}
-```
+- **Built-in content**: Tom Lehrer's "The Elements" (code-embedded, id `elements-song`, non-deletable) with per-line element mappings and a specialized `ElementsSong.jsx` UI with periodic-table visualization.
+- **Custom items**: users add any text/song/sequence; the system chunks it into progressive recall exercises.
+- **Practice modes** (`MemoryPractice.jsx`): `learn` (progressive reveal), `fill-blank`, `sequence` (continue from a starting point), `speed-run`, and `spaced` (spaced-repetition mode focusing the weakest chunks with graduated hints).
+- **Spaced repetition**: an SM-2-inspired scheduler tracks per-chunk `ease`/`intervalDays`/`nextReview` (ease clamped 1.3–5, intervals capped at 365 days, misses reset to relearn). `GET /post/memory-items/due` surfaces what's due; per-item and per-chunk mastery are queryable.
 
 ## Scoring
 
-- **Math**: accuracy (80%) + speed bonus (20%), server-rescored
-- **Memory**: chunk accuracy (70%) + sequence accuracy (20%) + speed (10%)
-- **Wordplay/Verbal/Imagination**: LLM-scored on quality criteria (80%) + speed bonus (20%)
-- **Session score**: weighted average across all completed drills
+- **Math**: server-rescored — the server strips client-provided correctness and re-derives expected answers (`meatspacePost.js`, "never trust client-provided expected"); estimation compares within tolerance. Accuracy plus speed bonus.
+- **Cognitive**: deterministic server-side rescoring per drill type.
+- **Wordplay/Verbal/Imagination**: LLM-scored against per-drill rubrics (e.g. wit-comeback: humor 40% / cleverness 30% / relevance 30%), blended as quality 80% + speed bonus 20% (`server/services/meatspacePostLlm.js`).
+- **Session score**: plain arithmetic mean across completed drills (`computeSessionScore`).
+
+## Adaptive Difficulty
+
+Opt-in adaptive tuning for math drills (`server/lib/postAdaptive.js`): recent scored performance nudges drill parameters, with a transparent preview of what would change (`GET /api/meatspace/post/adaptive-preview`).
+
+## Drill Cache
+
+The four cacheable wordplay types are pre-generated so drills serve instantly (`server/services/meatspacePostDrillCache.js` → `data/meatspace/post-drill-cache.json`, seeded from `data.reference/`). Per the AI-provider policy, a cold cache is never filled silently: boot loads only what's on disk, and the bulk fill runs solely from `POST /api/meatspace/post/drill-cache/fill` behind a consent prompt in `WordplayTrainer.jsx` that names the provider/model. Incremental top-ups after the user has engaged are silent by design.
+
+## Daily Reminder
+
+`server/services/meatspacePostReminder.js` schedules an optional daily POST reminder, re-registered whenever the config changes.
 
 ## Data Files
 
-- `data/meatspace/post-config.json` — drill settings, enabled modules, time limits
+- `data/meatspace/post-config.json` — drill settings, enabled domains, time limits
 - `data/meatspace/post-sessions.json` — scored test session history
-- `data/meatspace/post-memory-items.json` — memory builder content and mastery tracking
-- `data/meatspace/post-training-log.json` — practice session log (unscored training)
+- `data/meatspace/post-memory-items.json` — memory builder content and mastery
+- `data/meatspace/post-training-log.json` — unscored training/practice log
+- `data/meatspace/post-drill-cache.json` — pre-generated wordplay drills
 
 ## Routes
 
-### Existing
-- `GET/PUT /api/meatspace/post/config` — drill configuration
-- `GET/POST /api/meatspace/post/sessions` — session CRUD
-- `GET /api/meatspace/post/sessions/:id` — single session
-- `GET /api/meatspace/post/stats` — rolling averages
-- `POST /api/meatspace/post/drill` — generate math or LLM drill
-- `POST /api/meatspace/post/score-llm` — score LLM drill responses
-
-### New (M55)
-- `GET/POST/PUT/DELETE /api/meatspace/post/memory-items` — memory item CRUD
-- `POST /api/meatspace/post/memory-items/:id/practice` — submit practice result, update mastery
-- `GET /api/meatspace/post/memory-items/:id/mastery` — get mastery breakdown
-- `POST /api/meatspace/post/drill` — extended to support the `imagination` drill type
-- `POST /api/meatspace/post/memory-drill` — generate memory drills (separate endpoint)
+All under `/api/meatspace` (`server/routes/meatspacePostRoutes.js`):
+
+- `GET/PUT /post/config` — drill configuration
+- `GET/POST /post/sessions`, `GET /post/sessions/:id` — scored session history
+- `GET /post/stats` — rolling averages
+- `POST /post/drill` — generate a drill (dispatches math / LLM / memory / cognitive)
+- `GET /post/adaptive-preview` — adaptive-difficulty preview
+- `POST /post/score-llm` — score LLM drill responses
+- `GET /post/drill-cache/status`, `POST /post/drill-cache/fill` — wordplay cache
+- `POST /post/training`, `GET /post/training/{stats,entries}` — training log
+- `GET/POST /post/memory-items`, `GET/PUT/DELETE /post/memory-items/:id` — memory item CRUD
+- `GET /post/memory-items/due` — spaced-repetition due list
+- `POST /post/memory-items/:id/practice` — submit practice result, update mastery
+- `GET /post/memory-items/:id/{mastery,chunk-mastery}` — mastery breakdowns
+- `POST /post/memory-drill` — generate memory drills
 
 ## UI Components
 
-### Existing
-- `PostTab` — view router (launcher, running, results, history, config)
-- `PostSessionLauncher` — start screen with drill summary
-- `PostDrillRunner` — math drill UI with timer
-- `PostLlmDrillRunner` — LLM drill UIs (word-association, story-recall, etc.)
-- `PostSessionResults` — score breakdown and save
-- `PostHistory` — date-range analytics with charts
-- `PostDrillConfig` — per-drill settings
-
-### New (M55)
-- `MemoryBuilder` — main memory training interface
-- `MemoryItemList` — browse/add/edit memory items
-- `MemoryPractice` — interactive practice with mode selection
-- `ElementsSong` — specialized Elements Song UI with periodic table visualization
-- `MasteryMap` — visual mastery progress (periodic table for elements, progress bar for generic items)
-- `ImaginationDrillRunner` — UI for imagination/ideation drills
+Container: `client/src/components/meatspace/tabs/PostTab.jsx` (view router: launcher, running, results, history, config). In `client/src/components/meatspace/post/`:
+
+- `PostSessionLauncher` — start screen with Test/Train toggle and drill summary
+- `PostDrillRunner` — math drills; `PostLlmDrillRunner` — all LLM drills (wordplay/verbal/imagination); `PostCognitiveDrillRunner` — cognitive drills
+- `PostSessionResults`, `PostHistory` (date-range analytics), `PostDrillConfig`
+- `MemoryBuilder`, `MemoryPractice`, `ElementsSong`
+- `WordplayTrainer` (standalone wordplay practice + cache-fill consent), `WordplayDrillUI`, `MorseTrainer`, `DrillTransition`
diff --git a/docs/features/soul-system.md b/docs/features/soul-system.md
index 54747d969..cb9396404 100644
--- a/docs/features/soul-system.md
+++ b/docs/features/soul-system.md
@@ -2,6 +2,8 @@
 
 Digital twin identity scaffold management for creating and testing aligned AI personas.
 
+> Three docs cover the digital-twin subsystem from different angles: this one (the **document workflow** — soul markdown files, enrichment, testing, export), [Digital Twin](./digital-twin.md) (the **quantitative modeling layer** — traits, confidence, feedback, personas), and [Unified Identity System](./identity-system.md) (the **identity architecture** — genome, chronotype, taste, goals).
+
 ## Overview
 
 LLMs can embody specific personas, but creating comprehensive identity documents and testing alignment across different models is manual and error-prone. The Soul System provides a structured approach to capturing, validating, and deploying personality models.
@@ -108,5 +110,6 @@ data/digital-twin/
 
 ## Related Features
 
-- [Digital Twin](./digital-twin.md) - Quantitative personality modeling
+- [Digital Twin](./digital-twin.md) - Quantitative personality modeling built on these documents
+- [Unified Identity System](./identity-system.md) - Genome/chronotype/taste/goals identity architecture
 - [Chief of Staff](./chief-of-staff.md) - Uses soul context in agent prompts
diff --git a/docs/features/writers-room.md b/docs/features/writers-room.md
index 0e4324246..d9ef2a0d3 100644
--- a/docs/features/writers-room.md
+++ b/docs/features/writers-room.md
@@ -1,634 +1,118 @@
 # Writers Room
 
-## Intent
+Writers Room is the PortOS workspace for creating, organizing, editing, analyzing, and adapting literary works: a focused writing environment with manual AI passes, a story bible, storyboarding, and bridges into the Creative Director and comic-pipeline media systems.
 
-Writers Room is the PortOS workspace for creating, organizing, editing, analyzing,
-and adapting literary works. It starts as a focused writing environment with
-manual AI review actions, then grows into the story-to-media pipeline: prose to
-script, script to character sheets and scene plans, scene plans to reference
-images and video renders, and a synchronized review surface that keeps prose,
-script, and media aligned.
+Every AI evaluation and render action is user-initiated or explicitly opted into — nothing runs on keystrokes or draft saves without the per-work Live Director opt-in described below. One user click can fan out, though: running the Adapt flow auto-queues an image render for every missing storyboard scene once the script lands (see Storyboard & Media).
 
-The first version should support three jobs:
+## Navigation & Layout
 
-1. Manage writing projects: folders, works, drafts, versions, notes, and status.
-2. Help the writer produce words: a "write for 10" exercise with timer, live
-   word count, and progress tracking.
-3. Run explicit AI passes over the current draft: summaries, character and scene
-   extraction, expansion recommendations, prose-to-script adaptation, and media
-   planning.
+Routes (registered in `App.jsx` and `server/lib/navManifest.js` — `nav.writers-room`, `nav.writers-room.guide`):
 
-Realtime Creative Director feedback and background live analysis are intentionally
-future work. In the first implementation, every AI evaluation and render action is
-started by a user click.
+- `/writers-room` — landing (library + editor)
+- `/writers-room/works/:workId` — active work editor
+- `/writers-room/guide` — writing guide (length targets, craft reference)
 
-## Baseline
-
-`main` now contains both FLUX.2-klein image generation and the full Creative
-Director / media-job-queue surface — `feat/creative-director` was squash-merged
-as PR #191 (`9b36b900`). Phase 0 of this plan is therefore complete; Writers
-Room implementation starts directly on `main`.
+The page lives in the sidebar's **Create** group. The main workspace is `client/src/pages/WritersRoom.jsx` with a library pane (`LibraryPane.jsx`), the Markdown work editor (`WorkEditor.jsx`), and tool panels. The editor is plain Markdown — stable text ranges, reliable word count, low corruption risk for long prose.
 
-Reuse — do not rebuild — the existing image/video gen systems:
+## Writing Exercise ("write for 10")
 
-- `server/services/imageGen/` and `scripts/flux2_macos.py` for image renders.
-- `server/services/videoGen/` for LTX/MLX video renders.
-- `server/services/mediaJobQueue/` for serializing local image/video jobs.
-- `server/services/creativeDirector/` for treatment/scene/run orchestration.
-- `server/lib/mediaModels.js` as the source of truth for image/video models
-  (including FLUX.2-klein image variants).
-
-## Product Shape
-
-### Navigation
-
-Routes:
-
-- `/writers-room` — Writers Room landing (library + editor)
-- `/writers-room/works/:id` — Active work editor
-
-Sidebar placement: a new top-level **Create** group that contains both
-**Media Gen** (default landing for the group) and **Writers Room**. Creative
-Director continues to live under `/media/creative-director` and is reachable from
-Writers Room via the render-plan handoff. Configuration surfaces (Prompts,
-Providers) stay under the existing **AI** group.
-
-Add navigation entries in both places PortOS currently needs them:
-
-- `client/src/components/Layout.jsx`
-- `server/lib/navManifest.js`
-
-### Primary Layout
-
-The main Writers Room page should be a three-pane workspace:
-
-- Left: library tree with folders, works, tags, status filters, recent drafts,
-  and exercise sessions.
-- Center: editor for the active draft, with title, metadata, save/version state,
-  word count, and selected prose range.
-- Right: action sidebar with manual AI tools grouped as Analyze, Adapt, Render,
-  and Review.
-
-The first editor can be a high-quality plain text or Markdown editor. Avoid a
-rich-text dependency until formatting requirements justify it. The core needs are
-stable text ranges, reliable word count, keyboard-friendly writing, and low risk
-of corrupting large prose drafts.
-
-### Writing Exercise
-
-The "write for 10" section can live as a tab in Writers Room and as a quick action
-from any work.
-
-MVP behavior (ships in **Phase 1**):
-
-- Configurable timer (5/10/15/25-min presets) with start, finish, and discard.
-- Live word count of the sprint buffer, words added since session start.
-- Session can start from a blank prompt or a selected work (free-write the
-  current work's title appears as the implicit prompt).
-- On finish, save the exercise session with starting/ending word counts and
-  the appended sprint text.
-- Track session history: date, duration, starting words, ending words, words
-  added, linked work, and prompt.
-
-Deferred to **Phase 2+** (NOT in Phase 1):
-
-- Pause / resume mid-session (today's MVP is start/finish/discard only).
-- Promote / append the sprint text into the active work's draft on finish
-  (today the appendedText is logged with the session but not merged into the
-  work). The session metadata already carries everything needed to wire this
-  up later — surface a "Promote to draft" button on the recent-sessions list.
-- Session can start from a selected prose segment (currently scopes to the
-  whole work).
-
-Do not blend this into POST yet. POST has creative writing drills, but Writers
-Room needs an authoring-grade exercise log tied to works and drafts.
-
-## Data Model
-
-Use local, human-readable storage under `data/writers-room/`. Avoid one giant
-JSON file for all prose. Store metadata as JSON and draft bodies as Markdown/text
-files so long works remain manageable.
-
-Recommended layout:
-
-```text
-data/writers-room/
-  folders.json
-  exercises.json
-  works/
-    <workId>/
-      manifest.json
-      drafts/
-        <draftVersionId>.md
-      analysis/
-        <analysisId>.json
-      render-plans/
-        <renderPlanId>.json
-```
-
-### Folder
-
-```json
-{
-  "id": "wr-folder-...",
-  "parentId": null,
-  "name": "Novel Drafts",
-  "sortOrder": 0,
-  "createdAt": "iso",
-  "updatedAt": "iso"
-}
-```
-
-### Work Manifest
-
-The shape that ships in **Phase 1** (matches the on-disk file written by
-`server/services/writersRoom/local.js`):
-
-```json
-{
-  "id": "wr-work-...",
-  "folderId": "wr-folder-..." or null,
-  "title": "Working Title",
-  "kind": "novel|short-story|screenplay|essay|treatment|other",
-  "status": "idea|drafting|revision|adaptation|rendering|complete|archived",
-  "activeDraftVersionId": "wr-draft-...",
-  "drafts": [ /* see Draft Version */ ],
-  "createdAt": "iso",
-  "updatedAt": "iso"
-}
-```
-
-**Phase 2+ planned (NOT yet persisted)** — added when the phase that uses
-each field ships. Listed here so the data-model story stays continuous, but
-the writer/validator drops them as YAGNI today:
-
-```json
-{
-  "tags": [],
-  "collectionId": "media-collection-id",
-  "creativeDirectorProjectIds": [],
-  "settings": {
-    "defaultAnalysisProviderId": null,
-    "defaultAnalysisModel": null,
-    "defaultImageModelId": null,
-    "defaultVideoModelId": null,
-    "renderAspectRatio": "16:9",
-    "renderQuality": "draft"
-  }
-}
-```
-
-### Draft Version
-
-Draft metadata should be stored in `manifest.json`, with body text in
-`drafts/<draftVersionId>.md`.
-
-```json
-{
-  "id": "wr-draft-...",
-  "label": "Draft 3",
-  "contentFile": "drafts/wr-draft-....md",
-  "contentHash": "sha256",
-  "wordCount": 12842,
-  "segmentIndex": [
-    {
-      "id": "seg-001",
-      "kind": "chapter|scene|paragraph",
-      "heading": "Chapter 1",
-      "start": 0,
-      "end": 1842,
-      "wordCount": 312
-    }
-  ],
-  "createdAt": "iso",
-  "createdFromVersionId": null
-}
-```
-
-The segment index is the foundation for stale-analysis detection and synced
-prose/script/media review. AI outputs should attach to a draft version and to
-specific segment IDs or character offsets.
-
-### Analysis Snapshot
-
-AI evaluations are immutable snapshots tied to a draft version. If the draft
-changes later, show them as stale rather than mutating them silently.
-
-```json
-{
-  "id": "wr-analysis-...",
-  "workId": "wr-work-...",
-  "draftVersionId": "wr-draft-...",
-  "kind": "summary|characters|scenes|suggestions|expansion|script|media-plan",
-  "sourceRange": { "start": 0, "end": 1842, "segmentIds": ["seg-001"] },
-  "providerId": "openai",
-  "model": "selected-model",
-  "status": "queued|running|succeeded|failed",
-  "result": {},
-  "error": null,
-  "createdAt": "iso",
-  "completedAt": "iso"
-}
-```
-
-Expected result schemas:
-
-- Characters: `characters[]` with name, aliases, role, goals, traits,
-  relationships, visual spec, first-seen segment, and evidence snippets.
-- Scenes: `scenes[]` with summary, location, time, characters, plot beats,
-  emotional turn, adaptation notes, and suggested visual prompt.
-- Summary: logline, short summary, detailed synopsis, themes, open questions.
-- Suggestions: issue/recommendation list with target segment, rationale,
-  severity, and optional replacement/continuation text.
-- Expansion: continuation options, missing-scene opportunities, character
-  deepening notes, pacing recommendations.
-- Script: screenplay-style script segments mapped back to prose segment IDs.
-- Media plan: character reference prompts, scene reference prompts, shot list,
-  video prompts, and Creative Director handoff metadata.
-
-## Backend Plan
-
-### Services
-
-Add `server/services/writersRoom/local.js` for file-backed CRUD and draft I/O.
-Keep it the only writer for `data/writers-room/`, matching the pattern used by
-Creative Director and Video Timeline.
-
-Responsibilities:
-
-- create/update/delete folders
-- create/update/archive works
-- read/write draft body files
-- create draft versions and compute word count/content hash
-- build/update segment indexes
-- save immutable analysis snapshots
-- save exercise sessions
-- create media collections for works when needed
-- link works to Creative Director projects, media collections, and timeline
-  projects
-
-Add validation in `server/lib/validation.js` or a dedicated
-`server/lib/writersRoomValidation.js` if the schemas get large. Keep Zod schemas
-strict at the route boundary.
-
-### Routes
-
-Add `server/routes/writersRoom.js`.
-
-Suggested endpoints:
-
-| Method | Path | Purpose |
-|--------|------|---------|
-| GET | `/api/writers-room/folders` | List folders |
-| POST | `/api/writers-room/folders` | Create folder |
-| PATCH | `/api/writers-room/folders/:id` | Rename/move folder |
-| DELETE | `/api/writers-room/folders/:id` | Delete empty folder |
-| GET | `/api/writers-room/works` | List work summaries |
-| POST | `/api/writers-room/works` | Create work |
-| GET | `/api/writers-room/works/:id` | Get manifest, latest draft metadata, latest analysis summaries |
-| PATCH | `/api/writers-room/works/:id` | Update work metadata/status/settings |
-| DELETE | `/api/writers-room/works/:id` | Archive or delete work |
-| GET | `/api/writers-room/works/:id/draft` | Get active draft body |
-| PUT | `/api/writers-room/works/:id/draft` | Save active draft body and update segment index |
-| POST | `/api/writers-room/works/:id/versions` | Snapshot current draft as a new version |
-| GET | `/api/writers-room/works/:id/analysis` | List analysis snapshots |
-| POST | `/api/writers-room/works/:id/analysis` | Manually run an AI evaluation |
-| GET | `/api/writers-room/analysis/:analysisId` | Get full analysis result |
-| POST | `/api/writers-room/exercises` | Start or save exercise session |
-| PATCH | `/api/writers-room/exercises/:id` | Finish/discard/update session |
-| POST | `/api/writers-room/works/:id/render-plans` | Create media plan from script/scenes |
-| POST | `/api/writers-room/render-plans/:id/creative-director` | Create/link Creative Director project |
-
-Analysis can be synchronous for small drafts in v1, but the API should already
-carry `status` so it can move to queued/background execution without changing the
-UI contract.
-
-### AI Evaluation Service
-
-Add `server/services/writersRoom/evaluator.js`.
-
-Use existing provider and prompt infrastructure instead of hardcoding prompts in
-the route. Recommended prompt stages under `data.reference/prompts/stages/`:
-
-- `writers-room-summary.md`
-- `writers-room-characters.md`
-- `writers-room-scenes.md`
-- `writers-room-suggestions.md`
-- `writers-room-expansion.md`
-- `writers-room-script.md`
-- `writers-room-media-plan.md`
-
-Prompt outputs should be JSON-first and schema-validated before persistence. If
-validation fails, save the failed analysis snapshot with the raw error and do not
-modify the work.
-
-Manual trigger rule:
-
-- No automatic eval on every keystroke.
-- No background eval on draft save.
-- Buttons in the sidebar trigger exactly one analysis kind for the selected
-  range or the active draft.
-
-## Creative Director And Media Integration
-
-### What To Reuse
-
-From `feat/creative-director`:
-
-- `server/services/creativeDirector/local.js` for project state.
-- `server/services/creativeDirector/orchestrator.js` for next-task decisions.
-- `server/services/creativeDirector/agentBridge.js` and
-  `completionHook.js` for CoS task chaining.
-- `server/services/mediaJobQueue/index.js` for serializing local image/video
-  jobs and avoiding GPU/Metal contention.
-- `server/routes/creativeDirector.js` and `server/routes/mediaJobs.js`.
-- Creative Director detail UI concepts: treatment, segments, runs.
-
-From latest `main`:
-
-- `server/lib/mediaModels.js` as the source of truth for image/video models,
-  including FLUX.2-klein image models.
-- `scripts/flux2_macos.py` and `scripts/flux2_quantized.py`.
-- `/api/image-gen/models`, `/api/video-gen/models`, media collections, media
-  history, and video timeline routes.
-
-### Merge Requirements
-
-When merging Creative Director onto latest main:
-
-- Preserve FLUX.2 model registry fields: `runner`, `quantization`, `repo`,
-  `tokenizerRepo`, `basePipelineRepo`, and `isFlux2`.
-- Preserve the FLUX.2 setup/status route and HF token/license messaging.
-- Keep mediaJobQueue's `providedJobId` behavior for image/video generators so
-  queued job IDs match SSE event IDs.
-- Re-run and update tests around `imageGen`, `videoGen`, `mediaModels`, and
-  `mediaJobQueue`.
-
-### Writers Room Bridge
-
-Writers Room should not duplicate Creative Director. It should create inputs for
-Creative Director and link back to its outputs.
-
-Bridge behavior:
-
-1. User runs `media-plan` or `script` analysis on a work or selected range.
-2. Writers Room stores a render plan mapped to draft segment IDs.
-3. User clicks "Create Creative Director project".
-4. Server creates a Creative Director project with:
-   - work title as project name
-   - selected prose/script as `userStory`
-   - work/render style as `styleSpec`
-   - selected video model/aspect/quality
-   - a media collection shared with the work
-5. Creative Director plans and renders only after the user starts it.
-6. Writers Room stores the returned `creativeDirectorProjectId` and displays
-   Creative Director treatment/scenes/runs inline or through deep links.
-
-For character and scene reference images, use image generation directly through
-the existing image-gen route and media job queue. FLUX.2-klein is an image model,
-so it is best suited for character sheets, scene references, and mood frames.
-Scene videos still go through the configured video model pipeline.
+`ExercisePanel.jsx` runs timed free-write sprints (default 10 minutes, clamped 1–60): start, finish, or discard, with live word count. Sessions can start standalone or attached to a work, and history records date, duration, word deltas, linked work, and prompt. Finished sprint text is stored as `appendedText` on the exercise record.
 
-## Synchronized Review Surface
+Not built (deliberately deferred): pause/resume mid-session, and a "promote to draft" action that merges `appendedText` into the work — the session record carries everything needed to add it later.
+
+## Storage
+
+Metadata (folders, work manifests, decomposed draft versions, exercises) persists through the storage dispatcher `server/services/writersRoom/store.js`: **PostgreSQL on a normal install** (#1017), with the legacy on-disk JSON layout under `data/writers-room/` remaining only as a dev/test escape hatch. Draft **prose bodies always stay on disk** as Markdown files (`works/<workId>/drafts/<draftVersionId>.md`) regardless of backend — long works never live inside a database row or a giant JSON blob. `store.js` decomposes `drafts[]` into rows on PG and reassembles on read, so the manifest shape is backend-independent.
+
+`server/services/writersRoom/local.js` is the single owner of work/folder/draft/exercise storage; `db.js` is the PG backend.
+
+### Work manifest
+
+Persisted fields: `id`, `folderId`, `title`, `kind` (novel/short-story/screenplay/essay/treatment/other), `status` (idea/drafting/revision/adaptation/rendering/complete/archived), `activeDraftVersionId`, `drafts[]`, `createdAt`, `updatedAt`. Users can edit `title`, `folderId`, `kind`, `status`, `imageStyle`, and the partial-merged `liveMode` config. Server-owned link fields are stamped by their own flows, never by user PATCH: `mediaCollectionId` (auto-created media collection), `cdProjectId` (Creative Director link), `pipelineSeriesId`/`pipelineIssueId` (comic-pipeline promotion).
+
+### Draft versions
+
+Each draft version records `id`, `label`, `contentFile`, `contentHash`, `wordCount`, `segmentIndex`, `createdAt`, `createdFromVersionId`. The **segment index** (chapter/scene/paragraph ranges with character offsets) is the foundation for stale-analysis detection and the synced review surface — AI outputs attach to a draft version and to specific segment IDs.
+
+## Analysis (manual AI passes)
+
+`server/services/writersRoom/evaluator.js` runs user-clicked passes against the active draft, pinning the source draft's `contentHash` so the UI can flag stale results when the prose changes. Analysis kinds map to prompt stages in `data.reference/prompts/stages/`:
 
-Add this after core analysis and Creative Director handoff are stable.
+| Kind | Stage | Output |
+|------|-------|--------|
+| `evaluate` | `writers-room-evaluate.md` | Editorial evaluation of the draft |
+| `format` | `writers-room-format.md` | Formatting/structure pass |
+| `script` | `writers-room-script.md` | Screenplay-style scenes mapped back to prose segment IDs |
+| `characters` | `writers-room-characters.md` | Character extraction into the story bible |
+| `places` | `writers-room-places.md` | Place extraction |
+| `objects` | `writers-room-objects.md` | Object extraction |
 
-Goal: let the user see how a story maps across forms.
+(Two more stages back the live features: `writers-room-continue.md` and `writers-room-cd-bridge.md`.) Most kinds parse the model's JSON response and filter it to the expected fields before persistence; `format` is deliberately non-JSON and persists a shaped Markdown response. Client: `AnalysisHistory.jsx`. Scene images can be attached to script-analysis scenes (`POST .../analysis/:analysisId/scene-image`) and persist into the work's media collection.
 
-View modes:
+## Story Bible
 
-- Prose only
-- Script only
-- Media only
-- Prose + script
-- Script + media
-- Prose + script + media
+Characters, places, and objects extracted by analysis (or entered by hand) live as per-work bible entities with full CRUD (`characters.js` / `places.js` / `objects.js`; client `CharactersBible.jsx`, `PlacesBible.jsx`, `ObjectsBible.jsx`, `StoryboardBibleTab.jsx`). Extraction merges into existing entries rather than duplicating.
 
-Mapping model:
+## Storyboard & Media
 
-```json
-{
-  "proseSegmentId": "seg-001",
-  "scriptSegmentIds": ["script-001"],
-  "mediaSegmentIds": ["media-001"],
-  "creativeDirectorSceneIds": ["scene-1"],
-  "mediaRefs": [
-    { "kind": "image", "ref": "character-ref.png" },
-    { "kind": "video", "ref": "video-history-id" }
-  ]
-}
-```
+The storyboard suite (`StoryboardPanel.jsx`, `StoryboardScenesTab.jsx`, `StoryboardBoardsTab.jsx`, `StoryboardConfigTab.jsx`, `SceneCard.jsx`) turns script-analysis scenes into rendered boards through the existing image-gen pipeline and media job queue. When the Adapt flow completes, the panel auto-queues a render for every scene that doesn't have an image yet — one Adapt click implies the whole board's image cost. Scene images ride the shared media-collection infrastructure — a work auto-creates its collection on first render.
 
-Behavior:
+There is no persisted "render plan" store (the originally planned `render-plans` endpoints were never built); scene→media mapping is derived on read (see Synchronized Review below) and Creative Director handoff goes through the CD bridge.
 
-- Selecting prose highlights the mapped script and media.
-- Selecting script scrolls prose and media to the mapped segments.
-- Media cards show provenance: source prose segment, script segment, prompt,
-  model, render job, and Creative Director scene/run when applicable.
-- If the draft content hash differs from the analysis/render plan version, show
-  stale badges and require a deliberate refresh.
+## Creative Director Bridge
+
+The live-mode sidebar can turn the prose around the cursor into a short Creative Director **treatment** — logline, synopsis, overall visual treatment, and 2–6 filmable scenes (beat + visual prompt + duration). The writer reviews the proposal in the CD Bridge panel (`CdBridgePanel.jsx`) and sends it into a **new** Creative Director project seeded with that treatment (`POST .../cd-bridge/suggest` + `.../cd-bridge/send`, backed by the `writers-room-cd-bridge` stage). The bridge is non-destructive — it always creates a fresh project — and the work links to it via `cdProjectId` with an "Open in Creative Director" jump.
+
+## Pipeline Promotion
+
+`POST /works/:id/promote-to-pipeline` (`promoteToPipeline.js`) promotes a work into the comic pipeline, creating a series and first issue and stamping `pipelineSeriesId`/`pipelineIssueId` on the manifest.
+
+## Live Director (opt-in realtime assistance)
+
+`server/services/writersRoom/liveDirector.js` powers the editor's per-work, off-by-default "Live Director" mode:
+
+- **Live continuation** — while the writer pauses, asks for 2–4 short continuation options (beats, insertable prose snippets, dialogue lines) from the prose around the cursor, surfaced in `LiveContinuationPanel.jsx`; `prose`/`dialogue` options insert at the caret. Backed by the `writers-room-continue` stage (quick tier).
+- **Live render previews** — on-demand scene render reservations (`LiveRenderPanel.jsx`), with a separate daily render budget.
+
+Controls are enforced server-side, not just in the UI: per-work opt-in toggle (requests 409 when off), a client debounce after typing stops (`liveMode.debounceMs`, default 2.5s), and daily budgets (`liveMode.dailyCallBudget`, default 100, `0` = unlimited; plus `dailyRenderBudget`) that roll over at UTC midnight and 429 when spent. Usage counters are server-owned and stripped from user updates.
+
+## Synchronized Review Surface
 
-## Frontend Plan
+`GET /works/:id/synced-review` (`server/services/writersRoom/syncedReview.js`, client `SyncedReview.jsx`) lets the user see how a story maps across forms — prose, script, and media side by side, with selection sync between panes.
 
-Add:
+The mapping model is a **relational read-model derived on request** rather than a persisted mapping store:
 
-- `client/src/pages/WritersRoom.jsx`
-- `client/src/services/apiWritersRoom.js`
-- `client/src/components/writers-room/LibraryPane.jsx`
-- `client/src/components/writers-room/WorkEditor.jsx`
-- `client/src/components/writers-room/ExercisePanel.jsx`
-- `client/src/components/writers-room/AiSidebar.jsx`
-- `client/src/components/writers-room/AnalysisPanel.jsx`
-- `client/src/components/writers-room/RenderPlanPanel.jsx`
-- `client/src/components/writers-room/SyncedReview.jsx`
+- Prose segments come from the active draft's `segmentIndex`.
+- Script scenes come from the latest `script` analysis, whose scenes carry `sourceSegmentIds` back-references.
+- Media comes from the analysis snapshot's scene-image map.
 
-MVP UI states:
+Selecting prose highlights the mapped script and media; media cards show provenance (source segments, prompt, model, render job). Staleness falls out of the pinned analysis `sourceContentHash` — when the draft's hash differs, the UI shows stale badges and requires a deliberate re-run. Media attached to scenes that no longer exist after re-extraction is surfaced explicitly as orphaned rather than silently dropped.
 
-- Empty library
-- Create folder/work
-- Save draft pending/saved/error
-- Unsaved changes
-- Exercise running/paused/complete
-- Analysis idle/running/succeeded/failed/stale
-- Render plan not created/ready/linked/rendering/complete
-- Creative Director linked project status
+## Federation
 
-Keep the UI dense and tool-like. This is an authoring workspace, not a marketing
-page. Use icons for manual actions, tabs for work surfaces, and fixed panes so
-the editor does not jump when analysis cards update.
+Writers Room content syncs across peers: record kinds `writersRoomWork`, `writersRoomFolder`, and `writersRoomExercise` (`syncLogic.js`) map to the sync categories `writersRoomWorks`/`writersRoomFolders`/`writersRoomExercises` registered in `server/lib/schemaVersions.js`, with per-record peer-sync push (#1565/#1645). `local.js` emits record events through `sharing/recordEvents.js`; draft `.md` bodies ride a dedicated `draftBodyManifest` lane on work pushes (SHA256 per draft), while scene images sync through the work's linked media collection's asset path rather than the Writers Room records themselves. Conflict-restore handlers cover exercises and bodyless records.
 
-## Phased Implementation
+## API Surface
 
-### Phase 0 - Merge Foundation [DONE]
+All under `/api/writers-room` (`server/routes/writersRoom.js`, client wrapper `client/src/services/apiWritersRoom.js`):
 
-Completed by squash-merge of `feat/creative-director` (PR #191, commit
-`9b36b900`) and the FLUX.2 work that landed alongside it. Image/video routes,
-mediaJobQueue, FLUX.2 model registry, Creative Director routes/UI, and SSE
-progress all ship on `main` today.
+- **Folders** — `GET/POST /folders`, `DELETE /folders/:id`
+- **Works** — `GET/POST /works`, `GET/PATCH/DELETE /works/:id`, `POST /works/:id/promote-to-pipeline`
+- **Drafts/versions** — `PUT /works/:id/draft`, `POST /works/:id/versions`, `GET/PATCH /works/:id/versions/:draftId` (PATCH sets active)
+- **Exercises** — `GET/POST /exercises`, `POST /exercises/:id/finish`, `POST /exercises/:id/discard`
+- **Analysis** — `GET/POST /works/:id/analysis`, `GET /works/:id/analysis/:analysisId`, `POST .../scene-image`
+- **Live director** — `POST /works/:id/live-suggest`, `POST /works/:id/live-render-preview`, `POST /works/:id/cd-bridge/{suggest,send}`
+- **Synced review** — `GET /works/:id/synced-review`
+- **Story bible** — `GET/POST /works/:id/{characters,places,objects}`, `PATCH/DELETE /works/:id/{characters,places,objects}/:entityId`
 
-### Phase 1 - Writers Room Core
+Route inputs are Zod-validated at the boundary (`server/lib/validation.js`), except the scene-image attach route, which validates its fields inside `attachSceneImage` instead.
 
-Goal: works can be created, organized, edited, saved, versioned, and exercised.
+## Tests
 
-- Add storage service, validation, routes, and API client.
-- Add `/writers-room` route and nav entries.
-- Build library pane and editor.
-- Add autosave or explicit save with visible dirty/saved state. Prefer explicit
-  save for the first version unless the editor proves stable.
-- Add "write for 10" exercise session flow.
-- Add word count, selected-range count, and draft version snapshots.
-
-Exit criteria:
-
-- User can create a folder, create a work, write prose, save it, snapshot a
-  version, and complete a 10-minute exercise.
+Most services carry sibling `.test.js` suites (storage CRUD, draft save/version/content-hash behavior, segment indexing, analysis stale detection, exercise lifecycle, live-director gating/budgets, synced-review derivation, sync logic). `server/lib/navManifest.test.js` covers the nav entries; route validation is covered in the routes suite.
 
-### Phase 2 - Manual AI Analysis
+## Related Features
 
-Goal: the writer can trigger useful, reviewable AI passes against a draft or
-selected segment.
-
-- Add prompt stages and evaluator service.
-- Add analysis sidebar buttons for summary, characters, scenes, suggestions,
-  expansion, and script.
-- Store immutable analysis snapshots tied to draft version/content hash.
-- Render structured analysis panels with evidence and stale badges.
-- Add "accept into notes" or "copy into draft" only as explicit actions.
-
-Exit criteria:
-
-- No AI pass runs without a click.
-- A changed draft marks old analysis as stale.
-- Character/scene/script outputs retain source segment mappings.
-
-### Phase 3 - Media Planning And Creative Director Handoff
-
-Goal: a work can become a media plan, reference images, and a Creative Director
-project.
-
-- Add media-plan analysis kind.
-- Add render plan storage and UI.
-- Generate character reference prompts and scene reference prompts.
-- Queue selected image previews using configured image model, including FLUX.2
-  where available.
-- Create/link Creative Director projects from render plans.
-- Show Creative Director treatment/scenes/runs inside Writers Room as linked
-  project state.
-
-Exit criteria:
-
-- User can select a scene or range, create a media plan, generate reference
-  images, create a Creative Director project, and start rendering from a manual
-  action.
-
-### Phase 4 - Synchronized Prose, Script, Media Review
-
-Goal: the user can inspect the adaptation chain and see what maps to what.
-
-- Build `SyncedReview` with prose/script/media panes.
-- Add segment mapping storage and stale-state detection.
-- Support scroll/selection sync between panes.
-- Link media items to collection, history, Creative Director scene, and source
-  prose/script.
-
-Exit criteria:
-
-- User can open one work and review prose, script, and generated media with
-  visible mappings and provenance.
-
-### Phase 5 - Realtime Creative Director Feedback
-
-Goal: evolve from manual passes to controlled live assistance.
-
-- Optional live story continuation suggestions while writing. **[shipped]**
-- Optional render previews on selected scenes. **[shipped]**
-- Creative Director can propose next beats, alternate scenes, and visual
-  treatments from the active cursor context. **[shipped]**
-- Add throttling, debouncing, budget controls, and explicit opt-in per work. **[shipped]**
-
-This phase should wait until manual analysis quality, mapping, and render costs
-are proven.
-
-**Shipped (live continuation slice):** the editor has an opt-in "Live Director"
-mode (per work, off by default) that, while the writer pauses, asks for 2–4
-short continuation options from the prose around the cursor — beats to take,
-ready-to-insert prose snippets, or dialogue lines. Suggestions surface in a side
-panel; `prose`/`dialogue` options insert at the caret. Controls:
-
-- Per-work opt-in toggle (work menu → "Enable live director").
-- A client debounce after typing stops (`liveMode.debounceMs`, default 2.5s) so
-  no call fires on every keystroke.
-- A server-enforced daily call budget (`liveMode.dailyCallBudget`, default 100,
-  `0` = unlimited) that rolls over at UTC midnight. Opt-in and budget are
-  enforced server-side, not just in the UI — the debounce is convenience only.
-
-Backed by the `writers-room-continue` prompt stage (quick tier) and
-`server/services/writersRoom/liveDirector.js`; per-work live config persists on
-the work manifest.
-
-**Shipped (Creative Director bridge slice):** alongside the inline prose
-continuations, the live-mode sidebar can turn the prose around the cursor into a
-short Creative Director **treatment** — a logline, synopsis, an overall visual
-treatment (palette/lighting/cinematography), and 2–6 filmable scenes (each a
-beat + a visual prompt + a duration). The writer reviews the proposal in the
-"CD Bridge" panel and, with one click, sends it into a **new Creative Director
-project** seeded with that treatment and visual style — then jumps straight to
-it via an "Open in Creative Director" link on the work menu. The bridge is
-non-destructive (it always creates a fresh project, never overwrites an existing
-one) and draws on the same per-work opt-in and daily suggestion budget as the
-continuation panel. Backed by the `writers-room-cd-bridge` prompt stage and the
-existing Creative Director treatment store.
-
-## Test Plan
-
-Backend:
-
-- Writers Room storage CRUD and atomic writes.
-- Draft save/version/content-hash behavior.
-- Segment index generation for headings, blank-line scenes, and paragraphs.
-- Analysis snapshot validation and stale detection.
-- Exercise session lifecycle.
-- Creative Director project linking.
-- Media job queue integration with image and video job owners.
-- Route validation and error shapes.
-
-Frontend:
-
-- Library create/select/delete flows.
-- Editor dirty/saved/error state.
-- Exercise timer and word-count deltas.
-- Analysis sidebar loading, success, failure, stale states.
-- Render plan and Creative Director linked-project states.
-- Mobile layout for the three-pane workspace.
-
-Regression:
-
-- `/media/image`, `/media/video`, `/media/creative-director`, `/media/timeline`,
-  and `/media/collections` still work.
-- `server/lib/navManifest.test.js` still passes after adding Writers Room nav.
-- FLUX.2 setup/status remains visible and its unsupported LoRA constraints are
-  still enforced.
-
-## Non-Goals For MVP
-
-- Realtime background evaluation while typing.
-- Multi-user collaboration.
-- Rich screenplay pagination/export.
-- Automatic rewrite of user prose.
-- Fully autonomous story-to-movie generation without manual gates.
-- Database migration for writing content.
-- Public sharing or publishing workflows.
-
-## Resolved Review Questions
-
-1. **Sidebar placement** — A new top-level `Create` group containing Media Gen
-   (default landing) and Writers Room. Prompts and Providers stay under `AI`.
-2. **Editor** — Plain Markdown for v1. Revisit when screenplay formatting needs
-   pagination.
-3. **"Write for 10" sessions** — Can start standalone or attached to a work.
-   Default the new-session form to "attach to active work" when one is open.
-4. **First media milestone** — Character/scene reference images first, then
-   video previews via Creative Director handoff.
-5. **Creative Director auto-continue** — Inherit Creative Director's existing
-   behavior; do not add a Writers-Room-specific gate. The user already controls
-   per-scene start/cancel from the CD detail page.
+- Creative Director (`server/services/creativeDirector/`, `/media/creative-director`) — treatment/scene/run orchestration the CD bridge feeds into
+- Comic pipeline — the promote-to-pipeline target
+- Media collections, image-gen, and the media job queue — shared render infrastructure
diff --git a/docs/features/cross-domain-insights-engine.md b/docs/plans/2026-06-03-cross-domain-insights-engine.md
similarity index 98%
rename from docs/features/cross-domain-insights-engine.md
rename to docs/plans/2026-06-03-cross-domain-insights-engine.md
index dfeb13763..c1a6b2baa 100644
--- a/docs/features/cross-domain-insights-engine.md
+++ b/docs/plans/2026-06-03-cross-domain-insights-engine.md
@@ -299,6 +299,6 @@ A future `/claim` can pick these up in order. Each phase is independently shippa
 
 ## Related features
 
-- [Digital Twin](./digital-twin.md) — taste/identity/personality source
-- [Identity System](./identity-system.md) — goals, autobiography, the `/ask` loop
-- [Brain System](./brain-system.md) — daily digest + weekly review push channel
+- [Digital Twin](../features/digital-twin.md) — taste/identity/personality source
+- [Identity System](../features/identity-system.md) — goals, autobiography, the `/ask` loop
+- [Brain System](../features/brain-system.md) — daily digest + weekly review push channel
diff --git a/docs/features/openclaw-operator-chat-audit.md b/docs/research/2026-03-31-openclaw-operator-chat-audit.md
similarity index 100%
rename from docs/features/openclaw-operator-chat-audit.md
rename to docs/research/2026-03-31-openclaw-operator-chat-audit.md
diff --git a/package-lock.json b/package-lock.json
index ed47990f9..ecb785eb1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "portos",
-  "version": "2.25.0",
+  "version": "2.26.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "portos",
-      "version": "2.25.0",
+      "version": "2.26.0",
       "license": "MIT",
       "devDependencies": {
         "pm2": "7.0.1"
diff --git a/package.json b/package.json
index e7a90aec2..b4098745e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "portos",
-  "version": "2.25.0",
+  "version": "2.26.0",
   "private": true,
   "description": "Local dev machine App OS portal",
   "author": "Adam Eivy (@antic|@atomantic)",
diff --git a/scripts/migrations/155-heal-cd-treatment-cast-strand.js b/scripts/migrations/155-heal-cd-treatment-cast-strand.js
new file mode 100644
index 000000000..f27179108
--- /dev/null
+++ b/scripts/migrations/155-heal-cd-treatment-cast-strand.js
@@ -0,0 +1,68 @@
+/**
+ * Heal cd-treatment.md installs that #1808's migration 148 left stranded (#2042).
+ *
+ * Migration 148 backfilled the catalog-cast surfacing into
+ * `data/prompts/stages/cd-treatment.md` with two ANCHOR-based surgical inserts:
+ *   1. the `## Cast & ingredients` list section (anchored on the style-spec →
+ *      user-story bracket), and
+ *   2. the per-scene `"cast": [{ "ingredientId": … }]` JSON field (anchored on
+ *      the scene example's `"imageStrength": null` line).
+ *
+ * An install seeded BEFORE the `imageStrength` scene knob shipped (the older
+ * pre-#1808 template, md5 `2ffa482e…`) carries a scene example that lacks that
+ * anchor, so 148 applied insertion 1 (the file gained the cast list) but silently
+ * skipped insertion 2 — leaving the file at md5 `95b76856…`: it has the Cast
+ * section but is missing the per-scene `cast` field that
+ * `data.reference/prompts/stages/cd-treatment.md` ships. Because 148 is already
+ * recorded in `data/migrations.applied.json` on those installs, it never re-runs,
+ * so the `creativeDirectorPrompts.test.js` cast-threading regression stays red on
+ * the runtime template forever.
+ *
+ * This migration finishes the job with the canonical hash-driven prompt-replace
+ * (`./_lib.js`): when the installed copy still matches a KNOWN machine-produced
+ * shape (either pristine pre-#1808 shipped version, or the 148-partial strand) it
+ * is replaced wholesale with the current shipped reference. A hand-customized
+ * copy (hash matches neither old nor new) is left untouched with a warning — same
+ * safety contract as every other prompt-replace migration. Idempotent.
+ *
+ * Exporting ACCEPTED_OLD_MD5 / NEW_SHIPPED_MD5 also folds cd-treatment.md into
+ * `buildPromptDriftTables`, so setup-data.js's drift warning classifies a
+ * stranded copy as auto-updatable (was previously invisible to the sweep because
+ * 148 tracked the file via anchors, not hashes).
+ */
+
+import { makePromptReplaceMigration } from './_lib.js';
+
+export const ACCEPTED_OLD_MD5 = {
+  'cd-treatment.md': [
+    '2ffa482e7bfb6fe8b7224505fedbf712', // pre-#1808 shipped, pre-imageStrength-knob (447d2b5e3 / 22a0aced0)
+    '16d0ef6a7fd2533719a846019122ebee', // pre-#1808 shipped, post-imageStrength-knob (c68f38d09 / f04e3955c)
+    '95b7685690ecfee4f682b0293b790277', // migration-148 partial: cast list inserted, per-scene cast field missed (the #2042 strand)
+  ],
+};
+
+export const NEW_SHIPPED_MD5 = {
+  'cd-treatment.md': 'd940eadfb406ce584f0e244032f33382', // #1808 shipped reference (cast list + per-scene cast field)
+};
+
+const { applyMigration, up } = makePromptReplaceMigration({
+  accepted: ACCEPTED_OLD_MD5,
+  current: NEW_SHIPPED_MD5,
+  label: 'cd-treatment catalog-cast strand',
+  customizedHint: (filename) =>
+    `   To apply the per-scene cast field manually, diff:\n` +
+    `     data.reference/prompts/stages/${filename}\n` +
+    `   against your current:\n` +
+    `     data/prompts/stages/${filename}\n` +
+    `   and add the gated "cast": [{ "ingredientId": … }] field after the\n` +
+    `   scene example's "imageStrength" line.`,
+  skipFooter: (count) =>
+    `⚠️  ${count} cd-treatment prompt(s) could not be auto-updated because\n` +
+    `   they were customized. Creative Director treatments still generate, but\n` +
+    `   per-scene cast threading may stay underspecified until you merge the\n` +
+    `   prompt change manually.\n` +
+    `   See data.reference/prompts/stages/cd-treatment.md.`,
+});
+
+export { applyMigration };
+export default { up };
diff --git a/scripts/migrations/155-heal-cd-treatment-cast-strand.test.js b/scripts/migrations/155-heal-cd-treatment-cast-strand.test.js
new file mode 100644
index 000000000..b39d8ddc2
--- /dev/null
+++ b/scripts/migrations/155-heal-cd-treatment-cast-strand.test.js
@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+
+import { runPromptMigrationTests } from './_testHelpers.js';
+import migration, { applyMigration, ACCEPTED_OLD_MD5, NEW_SHIPPED_MD5 } from './155-heal-cd-treatment-cast-strand.js';
+
+describe('migration 155 - heal cd-treatment catalog-cast strand', () => {
+  runPromptMigrationTests({
+    migration,
+    applyMigration,
+    ACCEPTED_OLD_MD5,
+    NEW_SHIPPED_MD5,
+    prefix: 'migration-155-',
+  });
+
+  it('tracks the exact #2042 strand hash (148-partial) as auto-updatable', () => {
+    // md5 `95b76856…` is the deterministic output of migration 148 applied to
+    // the older pre-#1808 shipped template (`2ffa482e…`, pre-imageStrength-knob):
+    // insertion 1 lands the Cast list, insertion 2's scene anchor misses. That
+    // stranded shape must be in the accepted-old set or the fix is a no-op.
+    expect(ACCEPTED_OLD_MD5['cd-treatment.md']).toContain('95b7685690ecfee4f682b0293b790277');
+    // Both pristine pre-#1808 shipped versions upgrade too.
+    expect(ACCEPTED_OLD_MD5['cd-treatment.md']).toContain('2ffa482e7bfb6fe8b7224505fedbf712');
+    expect(ACCEPTED_OLD_MD5['cd-treatment.md']).toContain('16d0ef6a7fd2533719a846019122ebee');
+    // Current shipped hash must never appear in its own accepted-old set.
+    expect(ACCEPTED_OLD_MD5['cd-treatment.md']).not.toContain(NEW_SHIPPED_MD5['cd-treatment.md']);
+  });
+});
diff --git a/scripts/migrations/156-seed-feeds-and-meatspace-streak-widgets.js b/scripts/migrations/156-seed-feeds-and-meatspace-streak-widgets.js
new file mode 100644
index 000000000..e92774dd5
--- /dev/null
+++ b/scripts/migrations/156-seed-feeds-and-meatspace-streak-widgets.js
@@ -0,0 +1,96 @@
+/**
+ * Seed the new `feeds` (Feeds Digest) and `meatspace-streak` (Health Logging
+ * Streak) dashboard widgets into their built-in layouts for installs that
+ * already have a persisted `data/dashboard-layouts.json`.
+ *
+ * Background:
+ *   `server/services/dashboardLayouts.js#DEFAULT_LAYOUTS` (+ INTENT_LAYOUTS)
+ *   only seed when the file is missing. Adding a widget to a built-in layout
+ *   in code alone won't reach existing users — this migration walks the file,
+ *   finds each target built-in layout, and inserts the widget into its
+ *   `widgets` list + `grid` if missing. User-renamed copies and other layouts
+ *   are untouched. Re-runs detect the widget is already present and skip.
+ *   Mirrors migrations 070 / 145.
+ *
+ *   `feeds` + `tribe-care` → `default` ("Everything") layout;
+ *   `meatspace-streak` → `health`. All three widgets are gated client-side
+ *   (hidden until feeds/tribe-people/logs exist), so a fresh-but-persisted
+ *   install seeing the id costs nothing until it has data.
+ */
+
+import { readLayoutsDoc, writeLayoutsDoc } from './_lib.js';
+
+// Each widget → its target built-in layout id + preferred grid slot. Slots
+// mirror the geometry in `server/services/dashboardLayouts.js` — edits here
+// must match that file or fresh installs + migrated installs diverge.
+const SEEDS = [
+  { widgetId: 'feeds',            layoutId: 'default', slot: { x: 8, y: 29, w: 3, h: 4 } },
+  { widgetId: 'tribe-care',       layoutId: 'default', slot: { x: 4, y: 29, w: 4, h: 4 } },
+  { widgetId: 'meatspace-streak', layoutId: 'health',  slot: { x: 0, y: 9,  w: 4, h: 4 } },
+];
+
+function rectsOverlap(a, b) {
+  return a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h;
+}
+
+function collidesWith(grid, candidate) {
+  return grid.some((item) => rectsOverlap(item, candidate));
+}
+
+function pickGridEntry(grid, widgetId, slot) {
+  const candidate = { id: widgetId, ...slot };
+  if (!collidesWith(grid, candidate)) return candidate;
+  // Fall back to a clean row below everything else if the preferred slot is
+  // occupied (a user rearranged the layout but kept the built-in id).
+  const bottom = grid.reduce((max, it) => Math.max(max, (it.y ?? 0) + (it.h ?? 0)), 0);
+  return { id: widgetId, x: 0, y: bottom, w: slot.w, h: slot.h };
+}
+
+function applyToLayout(layout, widgetId, slot) {
+  if (!layout || typeof layout !== 'object') return false;
+  if (!Array.isArray(layout.widgets)) return false;
+
+  let changed = false;
+  // 1) Insert into widgets if absent.
+  if (!layout.widgets.includes(widgetId)) {
+    layout.widgets = [...layout.widgets, widgetId];
+    changed = true;
+  }
+  // 2) Heal the grid entry independently — the id can be present in `widgets`
+  // but missing from `grid` (e.g. a widgets-only edit landed without an
+  // arrange-and-save pass). Treat a non-array grid as [].
+  const existingGrid = Array.isArray(layout.grid) ? layout.grid : [];
+  const hasGridEntry = existingGrid.some((it) => it?.id === widgetId);
+  if (!hasGridEntry) {
+    layout.grid = [...existingGrid, pickGridEntry(existingGrid, widgetId, slot)];
+    changed = true;
+  } else if (!Array.isArray(layout.grid)) {
+    layout.grid = existingGrid;
+    changed = true;
+  }
+  return changed;
+}
+
+export default {
+  async up({ rootDir }) {
+    const result = await readLayoutsDoc({ rootDir, label: 'migration 156' });
+    if (!result.ok) return { updated: 0, reason: result.reason };
+    const { doc, path } = result;
+
+    let touched = 0;
+    for (const { widgetId, layoutId, slot } of SEEDS) {
+      const layout = doc.layouts.find((l) => l && l.id === layoutId);
+      if (!layout) continue;
+      if (applyToLayout(layout, widgetId, slot)) touched += 1;
+    }
+
+    if (touched === 0) {
+      console.log(`📦 migration 156: feeds + tribe-care + meatspace-streak already present in target layouts.`);
+      return { updated: 0, reason: 'already-applied' };
+    }
+
+    await writeLayoutsDoc(path, doc);
+    console.log(`📦 migration 156: seeded feeds/tribe-care/meatspace-streak widget(s) into ${touched} built-in layout slot(s).`);
+    return { updated: touched };
+  },
+};
diff --git a/scripts/migrations/156-seed-feeds-and-meatspace-streak-widgets.test.js b/scripts/migrations/156-seed-feeds-and-meatspace-streak-widgets.test.js
new file mode 100644
index 000000000..f74664fc3
--- /dev/null
+++ b/scripts/migrations/156-seed-feeds-and-meatspace-streak-widgets.test.js
@@ -0,0 +1,124 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mkdtempSync, rmSync, writeFileSync, readFileSync, mkdirSync, existsSync } from 'fs';
+import { tmpdir } from 'os';
+import { join } from 'path';
+
+import migration from './156-seed-feeds-and-meatspace-streak-widgets.js';
+
+const writeJson = (path, value) => writeFileSync(path, JSON.stringify(value, null, 2) + '\n');
+const readJson = (path) => JSON.parse(readFileSync(path, 'utf-8'));
+
+describe('migration 156 — seed feeds + meatspace-streak widgets', () => {
+  let rootDir;
+  let layoutsPath;
+
+  beforeEach(() => {
+    rootDir = mkdtempSync(join(tmpdir(), 'migration-156-'));
+    mkdirSync(join(rootDir, 'data'), { recursive: true });
+    layoutsPath = join(rootDir, 'data', 'dashboard-layouts.json');
+  });
+
+  afterEach(() => {
+    rmSync(rootDir, { recursive: true, force: true });
+  });
+
+  it('no-ops cleanly when dashboard-layouts.json is missing (fresh install)', async () => {
+    const result = await migration.up({ rootDir });
+    expect(result.updated).toBe(0);
+    expect(result.reason).toBe('no-state');
+    expect(existsSync(layoutsPath)).toBe(false);
+  });
+
+  it('inserts each widget into its target layout at the preferred slot', async () => {
+    writeJson(layoutsPath, {
+      activeLayoutId: 'default',
+      layouts: [
+        { id: 'default', name: 'Everything', builtIn: true, widgets: ['apps'], grid: [{ id: 'apps', x: 0, y: 0, w: 12, h: 8 }] },
+        { id: 'health', name: 'Health', builtIn: true, widgets: ['death-clock'], grid: [{ id: 'death-clock', x: 0, y: 0, w: 4, h: 3 }] },
+      ],
+    });
+    const result = await migration.up({ rootDir });
+    expect(result.updated).toBe(3);
+    const after = readJson(layoutsPath);
+
+    const def = after.layouts.find((l) => l.id === 'default');
+    expect(def.widgets).toContain('feeds');
+    expect(def.grid.find((g) => g.id === 'feeds')).toEqual({ id: 'feeds', x: 8, y: 29, w: 3, h: 4 });
+    expect(def.widgets).toContain('tribe-care');
+    expect(def.grid.find((g) => g.id === 'tribe-care')).toEqual({ id: 'tribe-care', x: 4, y: 29, w: 4, h: 4 });
+
+    const health = after.layouts.find((l) => l.id === 'health');
+    expect(health.widgets).toContain('meatspace-streak');
+    expect(health.grid.find((g) => g.id === 'meatspace-streak')).toEqual({ id: 'meatspace-streak', x: 0, y: 9, w: 4, h: 4 });
+  });
+
+  it('is idempotent — second run is a no-op', async () => {
+    writeJson(layoutsPath, {
+      activeLayoutId: 'default',
+      layouts: [
+        { id: 'default', name: 'Everything', builtIn: true, widgets: ['feeds', 'tribe-care'], grid: [{ id: 'feeds', x: 8, y: 29, w: 3, h: 4 }, { id: 'tribe-care', x: 4, y: 29, w: 4, h: 4 }] },
+        { id: 'health', name: 'Health', builtIn: true, widgets: ['meatspace-streak'], grid: [{ id: 'meatspace-streak', x: 0, y: 9, w: 4, h: 4 }] },
+      ],
+    });
+    const result = await migration.up({ rootDir });
+    expect(result.updated).toBe(0);
+    expect(result.reason).toBe('already-applied');
+  });
+
+  it('only touches the built-in ids, not renamed/other layouts', async () => {
+    writeJson(layoutsPath, {
+      activeLayoutId: 'focus',
+      layouts: [
+        { id: 'focus',      name: 'Focus',      builtIn: true,  widgets: ['cos'], grid: [] },
+        { id: 'my-default', name: 'My Home',    builtIn: false, widgets: ['cos'], grid: [] },
+        { id: 'default',    name: 'Everything', builtIn: true,  widgets: ['cos'], grid: [] },
+      ],
+    });
+    const result = await migration.up({ rootDir });
+    // Two widgets seed into the built-in `default` layout (feeds + tribe-care).
+    expect(result.updated).toBe(2);
+    const after = readJson(layoutsPath);
+    expect(after.layouts.find((l) => l.id === 'focus').widgets).toEqual(['cos']);
+    expect(after.layouts.find((l) => l.id === 'my-default').widgets).toEqual(['cos']);
+    expect(after.layouts.find((l) => l.id === 'default').widgets).toContain('feeds');
+    expect(after.layouts.find((l) => l.id === 'default').widgets).toContain('tribe-care');
+  });
+
+  it('survives an unreadable JSON file', async () => {
+    writeFileSync(layoutsPath, 'not json');
+    const result = await migration.up({ rootDir });
+    expect(result.updated).toBe(0);
+    expect(result.reason).toBe('unreadable');
+  });
+
+  it('heals legacy state where the id is in widgets[] but missing from grid[]', async () => {
+    writeJson(layoutsPath, {
+      activeLayoutId: 'health',
+      layouts: [
+        { id: 'health', name: 'Health', builtIn: true, widgets: ['death-clock', 'meatspace-streak'], grid: [{ id: 'death-clock', x: 0, y: 0, w: 4, h: 3 }] },
+      ],
+    });
+    const result = await migration.up({ rootDir });
+    expect(result.updated).toBe(1);
+    const after = readJson(layoutsPath);
+    const entry = after.layouts[0].grid.find((g) => g.id === 'meatspace-streak');
+    expect(entry).toBeDefined();
+    expect(after.layouts[0].widgets.filter((w) => w === 'meatspace-streak')).toHaveLength(1);
+  });
+
+  it('appends below existing items when the preferred slot is occupied', async () => {
+    writeJson(layoutsPath, {
+      activeLayoutId: 'default',
+      layouts: [
+        { id: 'health', name: 'Health', builtIn: true, widgets: ['hourly-activity'], grid: [{ id: 'hourly-activity', x: 0, y: 9, w: 12, h: 4 }] },
+      ],
+    });
+    const result = await migration.up({ rootDir });
+    expect(result.updated).toBe(1);
+    const after = readJson(layoutsPath);
+    const newEntry = after.layouts[0].grid.find((g) => g.id === 'meatspace-streak');
+    expect(newEntry).toBeDefined();
+    expect(newEntry.x).toBe(0);
+    expect(newEntry.y).toBeGreaterThanOrEqual(13);
+  });
+});
diff --git a/scripts/setup-data-drift.test.js b/scripts/setup-data-drift.test.js
index 801408719..c8a1e8948 100644
--- a/scripts/setup-data-drift.test.js
+++ b/scripts/setup-data-drift.test.js
@@ -46,6 +46,7 @@ const EXPECTED_STAGE_OLD = {
   'pipeline-editorial-chekhov.md': ['bfacbf343ba2b9a3f6037bb45b94e1bb'],
   'pipeline-editorial-on-the-nose.md': ['48182b49149e6b5829fbed71b3ffc242'],
   'pipeline-tv-script.md': ['3f6fecc25573ed054b47db392250034a'],
+  'cd-treatment.md': ['2ffa482e7bfb6fe8b7224505fedbf712', '16d0ef6a7fd2533719a846019122ebee', '95b7685690ecfee4f682b0293b790277'],
 };
 const EXPECTED_STAGE_NEW = {
   'pipeline-idea-expansion.md': 'd6fa86a435f978336661dcabca67258f',
@@ -70,6 +71,7 @@ const EXPECTED_STAGE_NEW = {
   'pipeline-editorial-chekhov.md': '1f8a1696b5e4f476051dc5b2e5737db9',
   'pipeline-editorial-on-the-nose.md': 'e5786fb019e5bf19c7aa6ed0c8b35cda',
   'pipeline-tv-script.md': '376f779f4687b598f1c92ca4e770fd5a',
+  'cd-treatment.md': 'd940eadfb406ce584f0e244032f33382',
 };
 const EXPECTED_PARTIAL_OLD = {
   'bible-deference.md': ['218f0e85643609ed85a12b1ccc7b5a8d'],
diff --git a/server/index.js b/server/index.js
index c1f55b52b..d3b74a68e 100644
--- a/server/index.js
+++ b/server/index.js
@@ -86,6 +86,7 @@ import paletteRoutes from './routes/palette.js';
 import dashboardLayoutsRoutes from './routes/dashboardLayouts.js';
 import mediaCollectionsRoutes from './routes/mediaCollections.js';
 import mediaAnnotationsRoutes from './routes/mediaAnnotations.js';
+import mediaSketchesRoutes from './routes/mediaSketches.js';
 import dataSyncRoutes from './routes/dataSync.js';
 import identityRoutes from './routes/identity.js';
 import instancesRoutes from './routes/instances.js';
@@ -443,6 +444,7 @@ app.use('/api/palette', paletteRoutes);
 app.use('/api/dashboard/layouts', dashboardLayoutsRoutes);
 app.use('/api/media/collections', mediaCollectionsRoutes);
 app.use('/api/media/annotations', mediaAnnotationsRoutes);
+app.use('/api/media/sketches', mediaSketchesRoutes);
 app.use('/api/attachments', attachmentsRoutes);
 app.use('/api/client-errors', clientErrorsRoutes);
 app.use('/api/backup', backupRoutes);
diff --git a/server/lib/README.md b/server/lib/README.md
index 4037a92ca..4762f96fb 100644
--- a/server/lib/README.md
+++ b/server/lib/README.md
@@ -229,6 +229,8 @@ The barrel `server/lib/index.js` is a machine-checkable enumeration of every pub
 | `ports.js` | Canonical PORTS object (re-exported from `ecosystem.config.cjs`). |
 | `platform.js` | Platform/OS detection helpers — listening-port probes plus `isAppleSilicon()` (arm64 darwin; gates MLX model features, detect at the route boundary). |
 | `timezone.js` | Timezone utilities for scheduling. |
+| `tribeCadence.js` | Authoritative, pure Tribe care-cadence rules (single source of truth, mirrored to `client/src/lib/tribeCadence.js`): `cadenceStatus(entity)` → `{ state: external/missing/overdue/soon/steady, daysRemaining, daysOverdue }`, `daysSinceDate(dateStr)`, `DEFAULT_CADENCE_DAYS` (45), `SOON_WINDOW_DAYS` (7). Consumed by `personCadenceStatus` / `getCareSummary` in `services/tribe.js` (proactive alert + Care widget) and by the client Tribe page/map. |
+| `tribeMatch.js` | Pure, deterministic matcher mapping a calendar attendee / message counterpart (`{ email, name }`) to a tracked Tribe person for auto-logged touchpoints (#2033): `buildPersonMatchIndex(people)` → `{ byIdentifier, byName }`, `matchPerson(identity, index)` (email/handle authoritative, exact unique name fallback — no fuzzy matching), `matchPeople(identities, index)` → de-duplicated Set of personIds, `normalizeIdentifier(value)`. Consumed by `autoLogTouchpoints` in `services/tribe.js` from the calendar and message sync producers. |
 | `viteAllowedHosts.js` | Detect and remediate a managed app's Vite `server.allowedHosts`. `findViteConfig(repoPath)` locates the config; `parseAllowedHosts(src)` / `hostIsAllowed(parsed, host)` decide whether a Tailscale/IP host would be accepted (mirrors Vite's localhost+IP-always-allowed and leading-dot-suffix rules); `rewriteAllowedHosts(src)` deterministically injects `allowedHosts: true` (or bails `ok:false` on ambiguous shapes so the caller can fall back to an LLM fix); `checkViteHost(repoPath, host)` is the one-shot status used by `GET /api/apps/:id/vite-host-check`. |
 | `buildId.js` | Build-ID derived from the built client bundle. |
 
diff --git a/server/lib/catalogValidation.js b/server/lib/catalogValidation.js
index 3bf657613..2d22e8159 100644
--- a/server/lib/catalogValidation.js
+++ b/server/lib/catalogValidation.js
@@ -371,6 +371,28 @@ export const catalogMediaDetachSchema = z.object({
   kind: z.enum(MEDIA_KINDS),
 }).strict();
 
+// File-upload attach body: raw base64 bytes + the browser-reported MIME. The
+// server decides the media `kind` (image→reference, audio, video) from the MIME
+// and persists into the matching federating library dir before attaching — the
+// client never picks the storage kind. 32 MB base64 (~24 MB raw) upper-bounds a
+// runaway paste; per-category size is re-checked server-side.
+export const catalogMediaFileUploadSchema = z.object({
+  dataBase64: z.string().min(1).max(32 * 1024 * 1024),
+  mimeType: z.string().trim().min(1).max(128),
+  filename: z.string().trim().max(300).optional().nullable(),
+  role: z.string().trim().max(64).optional().nullable(),
+  caption: z.string().trim().max(2_000).optional().nullable(),
+}).strict();
+
+// Voice-memo body: a recorded WAV (16 kHz mono, base64) the server transcribes
+// via Whisper and attaches as a `kind:'audio'` media row with the transcript in
+// `caption`. 16 MB base64 (~12 MB raw) fits several minutes of 16 kHz mono WAV.
+export const catalogMediaVoiceMemoSchema = z.object({
+  audioBase64: z.string().min(1).max(16 * 1024 * 1024),
+  mimeType: z.string().trim().max(64).optional(),
+  role: z.string().trim().max(64).optional().nullable(),
+}).strict();
+
 export const catalogScrapCommitSchema = z.object({
   accepted: z.array(catalogIngredientCreateSchema.extend({
     // Optional source-span hint (server forwards as-is to linkIngredientToSource).
diff --git a/server/lib/db.js b/server/lib/db.js
index 97f347626..531a4c081 100644
--- a/server/lib/db.js
+++ b/server/lib/db.js
@@ -371,8 +371,13 @@ async function ensureSchemaImpl() {
       deleted BOOLEAN DEFAULT FALSE,
       deleted_at TIMESTAMPTZ
     )`,
+    // Known emails/handles for a person — the deterministic key that maps a
+    // calendar attendee / message counterpart back to this tracked person so
+    // touchpoints can be auto-logged (#2033).
+    `ALTER TABLE tribe_people ADD COLUMN IF NOT EXISTS emails TEXT[] DEFAULT '{}'`,
     `CREATE INDEX IF NOT EXISTS idx_tribe_people_live ON tribe_people (deleted, ring, updated_at DESC)`,
     `CREATE INDEX IF NOT EXISTS idx_tribe_people_tags ON tribe_people USING gin (tags)`,
+    `CREATE INDEX IF NOT EXISTS idx_tribe_people_emails ON tribe_people USING gin (emails)`,
     `CREATE TABLE IF NOT EXISTS tribe_touchpoints (
       id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
       person_id UUID NOT NULL REFERENCES tribe_people(id) ON DELETE CASCADE,
@@ -382,11 +387,17 @@ async function ensureSchemaImpl() {
       source VARCHAR(32) NOT NULL DEFAULT 'user',
       calendar_account_id TEXT,
       calendar_event_id TEXT,
+      dedupe_key TEXT,
       metadata JSONB NOT NULL DEFAULT '{}'::jsonb,
       created_at TIMESTAMPTZ DEFAULT NOW()
     )`,
+    // Idempotency key for auto-logged touchpoints (calendar event id / message
+    // thread+day). Partial unique index so re-syncs never double-log a person
+    // for the same event/thread-day; NULL for hand-logged user touchpoints.
+    `ALTER TABLE tribe_touchpoints ADD COLUMN IF NOT EXISTS dedupe_key TEXT`,
     `CREATE INDEX IF NOT EXISTS idx_tribe_touchpoints_person ON tribe_touchpoints (person_id, happened_at DESC)`,
     `CREATE INDEX IF NOT EXISTS idx_tribe_touchpoints_calendar ON tribe_touchpoints (calendar_account_id, calendar_event_id)`,
+    `CREATE UNIQUE INDEX IF NOT EXISTS idx_tribe_touchpoints_dedupe ON tribe_touchpoints (person_id, dedupe_key) WHERE dedupe_key IS NOT NULL`,
     `CREATE TABLE IF NOT EXISTS tribe_memory_links (
       person_id UUID NOT NULL REFERENCES tribe_people(id) ON DELETE CASCADE,
       memory_id UUID NOT NULL REFERENCES memories(id) ON DELETE CASCADE,
diff --git a/server/lib/index.js b/server/lib/index.js
index ef17b6fc7..0fd1fa179 100644
--- a/server/lib/index.js
+++ b/server/lib/index.js
@@ -203,6 +203,8 @@ export * from './pgTools.js';
 export * from './platform.js';
 export * from './ports.js';
 export * from './timezone.js';
+export * from './tribeCadence.js';
+export * from './tribeMatch.js';
 export * from './viteAllowedHosts.js';
 
 // === General utilities ===
diff --git a/server/lib/navManifest.js b/server/lib/navManifest.js
index 9e35624ab..1c1301175 100644
--- a/server/lib/navManifest.js
+++ b/server/lib/navManifest.js
@@ -17,6 +17,7 @@ export const NAV_COMMANDS = [
   { id: 'nav.media.image', path: '/media/image', label: 'Image', section: 'Create', aliases: ['image-gen', 'imagegen', 'generate-image', 'sd', 'stable-diffusion'], keywords: ['stable diffusion', 'render', 'art', 'picture', 'photo', 'draw', 'flux', 'mflux'] },
   { id: 'nav.media.video', path: '/media/video', label: 'Video', section: 'Create', aliases: ['video-gen', 'videogen', 'generate-video', 'ltx'], keywords: ['video', 'animate', 'movie', 'clip', 'ltx'] },
   { id: 'nav.media.history', path: '/media/history', label: 'Media History', section: 'Create', aliases: ['media-history', 'video-history'], keywords: ['videos', 'gallery', 'stitch'] },
+  { id: 'nav.media.annotate', path: '/media/annotate', label: 'Annotate', section: 'Create', aliases: ['annotate', 'media-annotate', 'sketch', 'draw-over', 'markup'], keywords: ['annotation', 'sketch', 'draw', 'markup', 'scribble', 'label', 'canvas', 'overlay', 'stroke'] },
   { id: 'nav.media.collections', path: '/media/collections', label: 'Collections', section: 'Create', aliases: ['collections', 'media-collections', 'stacks', 'projects'], keywords: ['bucket', 'group', 'project', 'album', 'organize'] },
   { id: 'nav.media.creative-director', path: '/media/creative-director', label: 'Creative Director', section: 'Create', aliases: ['creative-director', 'creative', 'director', 'long-form', 'episode'], keywords: ['story', 'episode', 'narrative', 'agent', 'auto-video', 'long-form'] },
   { id: 'nav.media.music-video', path: '/media/music-video', label: 'Music Video', section: 'Create', aliases: ['music-video', 'musicvideo', 'music video', 'mv', 'sync-to-beat'], keywords: ['music', 'beat', 'sync', 'audio-reactive', 'director', 'scene board', 'tempo', 'choreography'] },
@@ -104,6 +105,7 @@ export const NAV_COMMANDS = [
   { id: 'nav.browser', path: '/browser', label: 'Browser', section: 'Dev Tools', aliases: ['browser'] },
   { id: 'nav.devtools.runner', path: '/devtools/runner', label: 'Code', section: 'Dev Tools', aliases: ['devtools-runner'] },
   { id: 'nav.devtools.datadog', path: '/devtools/datadog', label: 'DataDog', section: 'Dev Tools', aliases: ['datadog', 'devtools-datadog'] },
+  { id: 'nav.devtools.flows', path: '/devtools/flows', label: 'Flows', section: 'Dev Tools', aliases: ['flows', 'integration-flows', 'workflows'], keywords: ['architecture', 'diagram', 'data flow', 'integrations', 'how it works'] },
   { id: 'nav.devtools.github', path: '/devtools/github', label: 'GitHub', section: 'Dev Tools', aliases: ['github', 'devtools-github'] },
   { id: 'nav.devtools.history', path: '/devtools/history', label: 'History', section: 'Dev Tools', aliases: ['devtools-history'] },
   { id: 'nav.devtools.image-clean', path: '/devtools/image-clean', label: 'Image Cleaner', section: 'Dev Tools', aliases: ['image-clean', 'image-cleaner'], keywords: ['metadata', 'c2pa', 'content-credentials', 'sharp', 'denoise'] },
diff --git a/server/lib/postValidation.js b/server/lib/postValidation.js
index ee3464c9a..f2e277015 100644
--- a/server/lib/postValidation.js
+++ b/server/lib/postValidation.js
@@ -77,6 +77,10 @@ const MORSE_DRILL_TYPES = ['morse-copy', 'morse-head-copy', 'morse-send'];
 
 const drillTypeConfigSchema = z.object({
   enabled: z.boolean().optional(),
+  // Memory drills: the target memory item to drill (falls back to lowest-mastery
+  // item when absent). The /post/drill route threads config.memoryItemId into
+  // generateMemoryDrill, so it must survive validation rather than being stripped.
+  memoryItemId: z.string().optional(),
   steps: z.number().int().min(1).max(50).optional(),
   subtrahend: z.number().int().min(1).max(100).optional(),
   startValue: z.number().int().min(1).optional(),
diff --git a/server/lib/safeUrlFetch.js b/server/lib/safeUrlFetch.js
index 95bc58c33..254497eda 100644
--- a/server/lib/safeUrlFetch.js
+++ b/server/lib/safeUrlFetch.js
@@ -15,6 +15,12 @@
  * private/LAN hosts (a single-user tool legitimately reaches Tailscale peers /
  * home wikis). A redirect to a blocked target fails CLOSED (returns null) — the
  * landed hop is revalidated exactly like the first.
+ *
+ * Strict posture (`blockPrivate: true`): additionally reject ALL private/LAN
+ * addresses (RFC1918, CGNAT-adjacent, IPv6 ULA fc00::/7, …) — both host literals
+ * and DNS-resolved addresses. RSS feeds use this so an arbitrary user-added feed
+ * URL can't be pointed at the home network, preserving feeds.js's historical
+ * block-all-private posture while gaining the connect-time IP pin.
  */
 
 import dns from 'dns/promises';
@@ -26,6 +32,58 @@ import { isSafeIngestUrl, isBlockedIngestHost } from './catalogValidation.js';
 const DEFAULT_TIMEOUT_MS = 15000;
 const DEFAULT_MAX_BYTES = 12 * 1024 * 1024; // 12 MB — generous for a single image/feed
 
+/**
+ * Classify an IP literal as private/loopback/link-local (IPv4 or IPv6) for the
+ * strict `blockPrivate` posture. `isBlockedIngestHost` only covers
+ * loopback/link-local/metadata (the default posture ALLOWS LAN); this widens the
+ * net to the full RFC1918 / CGNAT-adjacent / IPv6-ULA ranges so a feed URL can't
+ * reach the home network. An unparseable / empty value fails closed (private).
+ */
+function isPrivateAddress(ip) {
+  if (!ip) return true;
+  const lower = ip.toLowerCase();
+  if (lower.includes(':')) {
+    if (lower === '::1' || lower === '::') return true;
+    // Embedded IPv4 — IPv4-mapped (::ffff:…) OR the deprecated IPv4-compatible
+    // (::…) form, either dotted (::ffff:1.2.3.4) or the two-hextet form URL
+    // parsing normalizes to (::ffff:c0a8:101 AND the ffff-less ::c0a8:101 that
+    // `new URL('http://[::192.168.1.1]')` yields). Decode and re-check as IPv4 so
+    // a private v4 embedded in an IPv6 literal can't slip past. Mirrors the
+    // embedded-v4 handling in catalogValidation.isBlockedIngestHost.
+    const embedded = /^::(?:ffff:)?(.+)$/i.exec(lower);
+    if (embedded) {
+      const tail = embedded[1];
+      if (/^\d{1,3}(\.\d{1,3}){3}$/.test(tail)) return isPrivateAddress(tail);
+      const parts = tail.split(':');
+      if (parts.length === 2 && parts.every((p) => /^[0-9a-f]{1,4}$/.test(p))) {
+        const hi = parseInt(parts[0], 16);
+        const lo = parseInt(parts[1], 16);
+        return isPrivateAddress(`${(hi >> 8) & 0xff}.${hi & 0xff}.${(lo >> 8) & 0xff}.${lo & 0xff}`);
+      }
+    }
+    const firstGroup = lower.split(':')[0];
+    if (firstGroup) {
+      const firstWord = parseInt(firstGroup, 16);
+      if (Number.isFinite(firstWord)) {
+        if ((firstWord & 0xfe00) === 0xfc00) return true; // ULA fc00::/7
+        if ((firstWord & 0xffc0) === 0xfe80) return true; // link-local fe80::/10
+      }
+    }
+    return false;
+  }
+  const parts = lower.split('.').map(Number);
+  if (parts.length === 4 && parts.every((p) => !isNaN(p) && p >= 0 && p <= 255)) {
+    if (parts[0] === 10) return true;
+    if (parts[0] === 172 && parts[1] >= 16 && parts[1] <= 31) return true;
+    if (parts[0] === 192 && parts[1] === 168) return true;
+    if (parts[0] === 100 && parts[1] >= 64 && parts[1] <= 127) return true; // CGNAT 100.64/10 (Tailscale et al.)
+    if (parts[0] === 169 && parts[1] === 254) return true;
+    if (parts[0] === 127) return true;
+    if (parts[0] === 0) return true;
+  }
+  return false;
+}
+
 /**
  * Core SSRF resolve: scheme + blocked-host-literal (sync, via isSafeIngestUrl),
  * AND a single DNS resolve so a hostname whose A record points at a blocked
@@ -43,25 +101,32 @@ const DEFAULT_MAX_BYTES = 12 * 1024 * 1024; // 12 MB — generous for a single i
  *
  * @returns {Promise<{ safe: boolean, address?: string|null, family?: number }>}
  */
-async function resolvePublicHttpUrl(target) {
+async function resolvePublicHttpUrl(target, { blockPrivate = false } = {}) {
   if (!isSafeIngestUrl(target)) return { safe: false };
   const { hostname } = new URL(target);
   // Host literals were already classified by isSafeIngestUrl and need no pinning
   // (net connects straight to the literal — there's no name to rebind).
   const isIpLiteral = /^[\d.]+$/.test(hostname) || hostname.includes(':');
-  if (isIpLiteral) return { safe: true, address: null };
+  if (isIpLiteral) {
+    // Strict posture must still reject a private LITERAL (e.g. http://192.168.1.5)
+    // that isSafeIngestUrl deliberately allows in the default LAN-friendly gate.
+    const literal = hostname.replace(/^\[|\]$/g, '');
+    if (blockPrivate && isPrivateAddress(literal)) return { safe: false };
+    return { safe: true, address: null };
+  }
   const resolved = await dns.lookup(hostname).catch(() => null);
   if (!resolved?.address) return { safe: false }; // can't vet → can't safely pin → fail closed
   if (isBlockedIngestHost(resolved.address)) return { safe: false };
+  if (blockPrivate && isPrivateAddress(resolved.address)) return { safe: false };
   return { safe: true, address: resolved.address, family: resolved.family };
 }
 
 /**
  * Boolean SSRF gate. Returns false on any failure — never throws — so redirect
- * revalidation can fail closed.
+ * revalidation can fail closed. `blockPrivate` opts into the strict posture.
  */
-export async function isPublicHttpUrlSafe(target) {
-  return (await resolvePublicHttpUrl(target)).safe;
+export async function isPublicHttpUrlSafe(target, { blockPrivate = false } = {}) {
+  return (await resolvePublicHttpUrl(target, { blockPrivate })).safe;
 }
 
 /**
@@ -108,24 +173,34 @@ function throwUnsafeUrl() {
  * Throwing variant for the FIRST hop (the user-supplied / stored URL) so a bad
  * target surfaces a clean 400 at the route instead of a silent null.
  */
-export async function assertPublicHttpUrl(target) {
-  if (!await isPublicHttpUrlSafe(target)) throwUnsafeUrl();
+export async function assertPublicHttpUrl(target, { blockPrivate = false } = {}) {
+  if (!await isPublicHttpUrlSafe(target, { blockPrivate })) throwUnsafeUrl();
 }
 
-// Fetch with the first-hop gate (throws) + manual redirect revalidation (fails
-// closed). Every hop is resolved AND pinned, so the connect can't re-resolve to
-// a blocked address after the check passes. Returns the Response, or null on a
-// network error / blocked redirect / missing Location. The caller decides what
-// to do with a non-ok status.
-async function fetchGuarded(url, { timeoutMs = DEFAULT_TIMEOUT_MS, headers } = {}) {
-  const first = await resolvePublicHttpUrl(url);
-  if (!first.safe) throwUnsafeUrl();
+// Fetch with the first-hop gate + manual redirect revalidation (fails closed).
+// Every hop is resolved AND pinned, so the connect can't re-resolve to a blocked
+// address after the check passes. Returns the Response, or null on a network
+// error / blocked redirect / missing Location. The caller decides what to do
+// with a non-ok status. First-hop unsafe THROWS a clean 400 by default (routes
+// want that); `throwOnUnsafe: false` makes it fail closed to null instead — for
+// callers (RSS feeds) whose own contract is a friendly "couldn't fetch" result
+// rather than a bubbled error.
+async function fetchGuarded(url, { timeoutMs = DEFAULT_TIMEOUT_MS, headers, blockPrivate = false, throwOnUnsafe = true } = {}) {
+  const first = await resolvePublicHttpUrl(url, { blockPrivate });
+  if (!first.safe) {
+    if (throwOnUnsafe) throwUnsafeUrl();
+    return null;
+  }
   const res = await pinnedFetch(url, first, { redirect: 'manual', headers }, timeoutMs);
   if (res && res.status >= 300 && res.status < 400) {
     const location = res.headers.get('location');
     if (!location) return null;
-    const redirectUrl = new URL(location, url).href;
-    const hop = await resolvePublicHttpUrl(redirectUrl);
+    // A malformed Location must fail closed to null (not throw) so the
+    // throwOnUnsafe:false contract holds for the redirect hop too — same
+    // guarded-parse pattern as isSafeIngestUrl.
+    let redirectUrl;
+    try { redirectUrl = new URL(location, url).href; } catch { return null; }
+    const hop = await resolvePublicHttpUrl(redirectUrl, { blockPrivate });
     if (!hop.safe) return null;
     return pinnedFetch(redirectUrl, hop, { redirect: 'error', headers }, timeoutMs);
   }
@@ -134,10 +209,13 @@ async function fetchGuarded(url, { timeoutMs = DEFAULT_TIMEOUT_MS, headers } = {
 
 /**
  * Fetch a URL's body as text. Returns the string on a 2xx, or null on any
- * failure (network error, non-ok status, blocked redirect).
+ * failure (network error, non-ok status, blocked redirect). `blockPrivate` opts
+ * into the strict block-all-private posture and `throwOnUnsafe: false` returns
+ * null (instead of throwing a 400) when the first hop is unsafe — both used by
+ * RSS feed fetches.
  */
-export async function fetchPublicText(url, { timeoutMs, headers } = {}) {
-  const res = await fetchGuarded(url, { timeoutMs, headers });
+export async function fetchPublicText(url, { timeoutMs, headers, blockPrivate = false, throwOnUnsafe = true } = {}) {
+  const res = await fetchGuarded(url, { timeoutMs, headers, blockPrivate, throwOnUnsafe });
   if (!res?.ok) return null;
   return res.text();
 }
@@ -151,8 +229,8 @@ export async function fetchPublicText(url, { timeoutMs, headers } = {}) {
  * post-read check fires. Falls back to a buffered read only when the response
  * exposes no stream (e.g. a test double).
  */
-export async function fetchPublicBinary(url, { timeoutMs, headers, maxBytes = DEFAULT_MAX_BYTES } = {}) {
-  const res = await fetchGuarded(url, { timeoutMs, headers });
+export async function fetchPublicBinary(url, { timeoutMs, headers, maxBytes = DEFAULT_MAX_BYTES, blockPrivate = false, throwOnUnsafe = true } = {}) {
+  const res = await fetchGuarded(url, { timeoutMs, headers, blockPrivate, throwOnUnsafe });
   if (!res?.ok) return null;
   const contentType = res.headers.get('content-type') || '';
   const declared = Number(res.headers.get('content-length'));
diff --git a/server/lib/safeUrlFetch.test.js b/server/lib/safeUrlFetch.test.js
index ba93bb145..344b8cbb0 100644
--- a/server/lib/safeUrlFetch.test.js
+++ b/server/lib/safeUrlFetch.test.js
@@ -56,6 +56,64 @@ describe('isPublicHttpUrlSafe', () => {
   });
 });
 
+describe('isPublicHttpUrlSafe — strict blockPrivate posture', () => {
+  it('allows a private/LAN host by default but rejects it under blockPrivate', async () => {
+    lookupMock.mockResolvedValue({ address: '192.168.1.50', family: 4 });
+    expect(await isPublicHttpUrlSafe('https://nas.local/feed')).toBe(true);
+    expect(await isPublicHttpUrlSafe('https://nas.local/feed', { blockPrivate: true })).toBe(false);
+  });
+  it('rejects a private IPv4 LITERAL under blockPrivate (no resolve)', async () => {
+    expect(await isPublicHttpUrlSafe('http://192.168.1.5/x')).toBe(true); // LAN allowed by default
+    expect(await isPublicHttpUrlSafe('http://192.168.1.5/x', { blockPrivate: true })).toBe(false);
+    expect(await isPublicHttpUrlSafe('http://10.1.2.3/x', { blockPrivate: true })).toBe(false);
+    expect(lookupMock).not.toHaveBeenCalled();
+  });
+  it('rejects an IPv6 ULA literal under blockPrivate', async () => {
+    expect(await isPublicHttpUrlSafe('http://[fd12:3456:789a::1]/x', { blockPrivate: true })).toBe(false);
+  });
+  it('rejects a CGNAT 100.64/10 literal (Tailscale) under blockPrivate', async () => {
+    expect(await isPublicHttpUrlSafe('http://100.100.100.200/x', { blockPrivate: true })).toBe(false);
+    expect(await isPublicHttpUrlSafe('http://100.64.0.1/x', { blockPrivate: true })).toBe(false);
+    // 100.63.x / 100.128.x are public — must NOT be blocked (literal, no resolve).
+    expect(await isPublicHttpUrlSafe('http://100.63.0.1/x', { blockPrivate: true })).toBe(true);
+    expect(await isPublicHttpUrlSafe('http://100.128.0.1/x', { blockPrivate: true })).toBe(true);
+  });
+  it('rejects a CGNAT/private address a hostname RESOLVES to under blockPrivate', async () => {
+    lookupMock.mockResolvedValue({ address: '100.100.42.7', family: 4 });
+    expect(await isPublicHttpUrlSafe('https://tailnet.example.com/x', { blockPrivate: true })).toBe(false);
+  });
+  it('rejects the deprecated IPv4-compatible IPv6 form of a private v4 under blockPrivate', async () => {
+    // new URL('http://[::192.168.1.1]') normalizes to hostname [::c0a8:101] —
+    // the ffff-less compatible form. It must still decode to 192.168.1.1.
+    expect(await isPublicHttpUrlSafe('http://[::192.168.1.1]/x', { blockPrivate: true })).toBe(false);
+    expect(await isPublicHttpUrlSafe('http://[::10.0.0.1]/x', { blockPrivate: true })).toBe(false);
+  });
+  it('rejects a hostname that RESOLVES to a private address under blockPrivate', async () => {
+    lookupMock.mockResolvedValue({ address: '10.0.0.42', family: 4 });
+    expect(await isPublicHttpUrlSafe('https://home.example.com/x', { blockPrivate: true })).toBe(false);
+  });
+  it('still allows a genuinely public host under blockPrivate', async () => {
+    lookupMock.mockResolvedValue({ address: '93.184.216.34', family: 4 });
+    expect(await isPublicHttpUrlSafe('https://example.com/x', { blockPrivate: true })).toBe(true);
+  });
+});
+
+describe('fetchPublicText — strict blockPrivate + throwOnUnsafe:false (RSS feed path)', () => {
+  it('returns null (no fetch, no throw) for a host that resolves private', async () => {
+    lookupMock.mockResolvedValue({ address: '10.0.0.5', family: 4 });
+    fetchMock.mockResolvedValue(res({ text: 'secret' }));
+    // The feeds path opts out of the 400 throw so its caller can show a friendly
+    // "couldn't fetch" message; the request must still never leave the box.
+    expect(await fetchPublicText('https://home.example.com/feed', { blockPrivate: true, throwOnUnsafe: false })).toBeNull();
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+  it('still THROWS a 400 for an unsafe first hop by default (route contract)', async () => {
+    lookupMock.mockResolvedValue({ address: '10.0.0.5', family: 4 });
+    await expect(fetchPublicText('https://home.example.com/feed', { blockPrivate: true }))
+      .rejects.toMatchObject({ status: 400, code: 'UNSAFE_URL' });
+  });
+});
+
 describe('assertPublicHttpUrl', () => {
   it('throws a 400 UNSAFE_URL for a blocked target', async () => {
     await expect(assertPublicHttpUrl('http://localhost/x')).rejects.toMatchObject({ status: 400, code: 'UNSAFE_URL' });
@@ -86,6 +144,11 @@ describe('fetchPublicText', () => {
     expect(await fetchPublicText('https://example.com/feed.rss')).toBeNull();
     expect(fetchMock).toHaveBeenCalledTimes(1);
   });
+  it('returns null (no throw) on a malformed redirect Location', async () => {
+    fetchMock.mockResolvedValueOnce(res({ status: 301, headers: { location: 'http://[bad' } }));
+    expect(await fetchPublicText('https://example.com/feed.rss')).toBeNull();
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
 });
 
 describe('connect-time IP pinning (DNS-rebinding TOCTOU, #1859)', () => {
diff --git a/server/lib/timezone.js b/server/lib/timezone.js
index 067cc69bb..099e3c56b 100644
--- a/server/lib/timezone.js
+++ b/server/lib/timezone.js
@@ -51,6 +51,24 @@ export async function getUserTimezone() {
   return Intl.DateTimeFormat().resolvedOptions().timeZone
 }
 
+/**
+ * Get the UTC-ms timestamp at which the user's `timezone` setting last actually
+ * changed, or null when it has never been recorded. Stamped by settings.js's
+ * write path (`save()`) only when the `timezone` value genuinely differs from
+ * the prior on-disk value. Timezone-dependent schedulers use this to avoid
+ * replaying a slot that "occurred" under a timezone that was no longer active —
+ * see catchUpMissedSlot in meatspacePostReminder.js (#2040).
+ *
+ * Sentinel discipline: null (not a number, ≤ 0) means "never changed / unset",
+ * so callers must NOT treat absence as a floor — an unset value gates nothing.
+ * @returns {Promise<number|null>} UTC ms, or null when unset.
+ */
+export async function getTimezoneUpdatedAt() {
+  const settings = await getSettings()
+  const ts = settings.timezoneUpdatedAt
+  return typeof ts === 'number' && ts > 0 ? ts : null
+}
+
 /**
  * Get local date/time parts for a UTC Date in the given timezone.
  * @param {Date} utcDate - Date object (interpreted as UTC since TZ=UTC)
diff --git a/server/lib/timezone.test.js b/server/lib/timezone.test.js
index a677604fa..7a6f04003 100644
--- a/server/lib/timezone.test.js
+++ b/server/lib/timezone.test.js
@@ -1,9 +1,18 @@
 import { describe, it, expect, vi } from 'vitest'
+
+// getUserTimezone/getTimezoneUpdatedAt read from settings.js; the pure helpers
+// below don't touch settings, so mocking it only affects the getter tests.
+vi.mock('../services/settings.js', () => ({
+  getSettings: vi.fn()
+}))
+
+import { getSettings } from '../services/settings.js'
 import {
   getLocalParts,
   getUtcOffsetMs,
   nextLocalTime,
   todayInTimezone,
+  getTimezoneUpdatedAt,
   HHMM_RE,
   HHMM_STRICT_RE,
   parseHHMM,
@@ -187,4 +196,23 @@ describe('timezone', () => {
       vi.useRealTimers()
     })
   })
+
+  describe('getTimezoneUpdatedAt (#2040)', () => {
+    it('returns the stamped numeric timestamp when set', async () => {
+      getSettings.mockResolvedValue({ timezone: 'UTC', timezoneUpdatedAt: 1700000000000 })
+      expect(await getTimezoneUpdatedAt()).toBe(1700000000000)
+    })
+
+    it('returns null when the field is absent (unset sentinel — never gates)', async () => {
+      getSettings.mockResolvedValue({ timezone: 'UTC' })
+      expect(await getTimezoneUpdatedAt()).toBeNull()
+    })
+
+    it('returns null for a non-numeric or non-positive value', async () => {
+      getSettings.mockResolvedValue({ timezoneUpdatedAt: '1700000000000' })
+      expect(await getTimezoneUpdatedAt()).toBeNull()
+      getSettings.mockResolvedValue({ timezoneUpdatedAt: 0 })
+      expect(await getTimezoneUpdatedAt()).toBeNull()
+    })
+  })
 })
diff --git a/server/lib/tribeCadence.js b/server/lib/tribeCadence.js
new file mode 100644
index 000000000..2a8139759
--- /dev/null
+++ b/server/lib/tribeCadence.js
@@ -0,0 +1,40 @@
+// Authoritative, pure cadence rules for the Tribe care system — the single
+// source of truth for "who needs care." Consumed on the server by
+// `personCadenceStatus` / `getCareSummary` (server/services/tribe.js → the
+// proactive-alerts check + the Tribe Care dashboard widget) and mirrored to
+// `client/src/lib/tribeCadence.js` for the client bundle (Tribe page + circle
+// map). The mirror must produce IDENTICAL output; the cross-boundary contract
+// test (client/src/lib/tribeCadence.contract.test.js) imports both copies and
+// asserts they never drift. No Node-only deps — keep this file pure.
+
+// The four inner rings owe a care cadence; `external` (former contacts, a
+// nemesis) is outside the tribe and is never nagged.
+export const DEFAULT_CADENCE_DAYS = 45;
+// A member with <= this many days left before their next check-in is "soon".
+export const SOON_WINDOW_DAYS = 7;
+
+// Whole days from an ISO date (YYYY-MM-DD…) to today, or null when unparseable.
+export function daysSinceDate(dateStr) {
+  if (!dateStr) return null;
+  const start = new Date(`${String(dateStr).slice(0, 10)}T00:00:00`);
+  if (Number.isNaN(start.getTime())) return null;
+  const now = new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  return Math.floor((today - start) / 86400000);
+}
+
+// Cadence health for a tribe member: external / missing / overdue / soon /
+// steady. `daysRemaining` is cadenceDays - elapsed (negative once overdue);
+// null when there's no recorded last contact (distinct from a 0-days-remaining
+// member). `daysOverdue` is 0 unless overdue, and null for a `missing`
+// (never-contacted) member so callers can sort those to the top without a
+// magic number. External members carry no cadence.
+export function cadenceStatus(entity) {
+  if (entity.ring === 'external') return { state: 'external', daysRemaining: null, daysOverdue: 0 };
+  const elapsed = daysSinceDate(entity.lastContact);
+  if (elapsed == null) return { state: 'missing', daysRemaining: null, daysOverdue: null };
+  const daysRemaining = Number(entity.cadenceDays || DEFAULT_CADENCE_DAYS) - elapsed;
+  if (daysRemaining < 0) return { state: 'overdue', daysRemaining, daysOverdue: Math.abs(daysRemaining) };
+  if (daysRemaining <= SOON_WINDOW_DAYS) return { state: 'soon', daysRemaining, daysOverdue: 0 };
+  return { state: 'steady', daysRemaining, daysOverdue: 0 };
+}
diff --git a/server/lib/tribeMatch.js b/server/lib/tribeMatch.js
new file mode 100644
index 000000000..ecb2c354c
--- /dev/null
+++ b/server/lib/tribeMatch.js
@@ -0,0 +1,75 @@
+/**
+ * Tribe identity matcher — pure, deterministic mapping of a calendar attendee /
+ * message counterpart ({ email, name }) back to a tracked Tribe person (#2033).
+ *
+ * Matching is intentionally deterministic (no LLM, no fuzzy string distance):
+ *   1. Email / handle — authoritative. Compared case-insensitively against the
+ *      identifiers the user stored on the person record (`person.emails`).
+ *   2. Exact name — case-insensitive, and only when EXACTLY ONE tracked person
+ *      owns that name (ambiguous names never resolve, so a shared first name can
+ *      not mis-log). This is a convenience fallback before the user has recorded
+ *      any emails; fuzzy name-matching is a separate consent-gated follow-up.
+ */
+
+export function normalizeIdentifier(value) {
+  if (value == null) return '';
+  return String(value).trim().toLowerCase();
+}
+
+/**
+ * Build lookup indexes from a list of tribe people. Returns
+ * `{ byIdentifier: Map<email, personId>, byName: Map<name, personId[]> }`.
+ * The first person to claim an identifier wins (identifiers are meant to be
+ * unique to one person); names collect every owner so ambiguity is detectable.
+ */
+export function buildPersonMatchIndex(people = []) {
+  const byIdentifier = new Map();
+  const byName = new Map();
+  for (const person of people) {
+    if (!person?.id) continue;
+    for (const identifier of person.emails || []) {
+      const key = normalizeIdentifier(identifier);
+      if (key && !byIdentifier.has(key)) byIdentifier.set(key, person.id);
+    }
+    const nameKey = normalizeIdentifier(person.name);
+    if (nameKey) {
+      const owners = byName.get(nameKey) || [];
+      owners.push(person.id);
+      byName.set(nameKey, owners);
+    }
+  }
+  return { byIdentifier, byName };
+}
+
+/**
+ * Resolve a single `{ email, name }` identity to a personId, or `null`.
+ * Email/handle wins; exact unique name is the fallback.
+ */
+export function matchPerson(identity, index) {
+  if (!identity || !index) return null;
+  const email = normalizeIdentifier(identity.email);
+  if (email && index.byIdentifier.has(email)) return index.byIdentifier.get(email);
+  const name = normalizeIdentifier(identity.name);
+  if (name) {
+    const owners = index.byName.get(name);
+    if (owners && owners.length === 1) return owners[0];
+  }
+  return null;
+}
+
+/**
+ * Resolve many identities (mixed `{ email, name }` objects or bare email/handle
+ * strings) to a de-duplicated Set of personIds. A single event/message that
+ * involves the same tracked person twice (organizer + attendee) yields one id.
+ */
+export function matchPeople(identities = [], index) {
+  const ids = new Set();
+  if (!index) return ids;
+  for (const raw of identities) {
+    if (!raw) continue;
+    const identity = typeof raw === 'string' ? { email: raw } : raw;
+    const id = matchPerson(identity, index);
+    if (id) ids.add(id);
+  }
+  return ids;
+}
diff --git a/server/lib/tribeMatch.test.js b/server/lib/tribeMatch.test.js
new file mode 100644
index 000000000..82349097c
--- /dev/null
+++ b/server/lib/tribeMatch.test.js
@@ -0,0 +1,89 @@
+import { describe, it, expect } from 'vitest';
+import {
+  normalizeIdentifier,
+  buildPersonMatchIndex,
+  matchPerson,
+  matchPeople,
+} from './tribeMatch.js';
+
+const PEOPLE = [
+  { id: 'ada', name: 'Ada Lovelace', emails: ['ada@work.com', 'ADA@home.com'] },
+  { id: 'grace', name: 'Grace Hopper', emails: ['grace@navy.mil'] },
+  // Two people share the first name "Sam" — an ambiguous name must not resolve.
+  { id: 'sam1', name: 'Sam', emails: [] },
+  { id: 'sam2', name: 'Sam', emails: [] },
+  { id: 'lin', name: 'Lin', emails: [] },
+];
+
+describe('tribeMatch', () => {
+  describe('normalizeIdentifier', () => {
+    it('lowercases and trims', () => {
+      expect(normalizeIdentifier('  Ada@Work.COM ')).toBe('ada@work.com');
+    });
+    it('returns empty string for nullish', () => {
+      expect(normalizeIdentifier(null)).toBe('');
+      expect(normalizeIdentifier(undefined)).toBe('');
+    });
+  });
+
+  describe('buildPersonMatchIndex', () => {
+    it('indexes every email case-insensitively, first claimant wins', () => {
+      const { byIdentifier } = buildPersonMatchIndex(PEOPLE);
+      expect(byIdentifier.get('ada@work.com')).toBe('ada');
+      expect(byIdentifier.get('ada@home.com')).toBe('ada');
+      expect(byIdentifier.get('grace@navy.mil')).toBe('grace');
+    });
+    it('collects every owner of a name so ambiguity is detectable', () => {
+      const { byName } = buildPersonMatchIndex(PEOPLE);
+      expect(byName.get('sam')).toEqual(['sam1', 'sam2']);
+      expect(byName.get('lin')).toEqual(['lin']);
+    });
+    it('skips people without an id', () => {
+      const { byIdentifier } = buildPersonMatchIndex([{ name: 'X', emails: ['x@x.com'] }]);
+      expect(byIdentifier.size).toBe(0);
+    });
+  });
+
+  describe('matchPerson', () => {
+    const index = buildPersonMatchIndex(PEOPLE);
+    it('matches by email regardless of case', () => {
+      expect(matchPerson({ email: 'ADA@WORK.com' }, index)).toBe('ada');
+    });
+    it('falls back to an exact unique name when no email match', () => {
+      expect(matchPerson({ name: 'lin' }, index)).toBe('lin');
+    });
+    it('refuses an ambiguous name (multiple owners)', () => {
+      expect(matchPerson({ name: 'Sam' }, index)).toBeNull();
+    });
+    it('prefers email over name', () => {
+      // email belongs to grace, name says ada — email wins.
+      expect(matchPerson({ email: 'grace@navy.mil', name: 'Ada Lovelace' }, index)).toBe('grace');
+    });
+    it('returns null for an unknown identity', () => {
+      expect(matchPerson({ email: 'nobody@x.com' }, index)).toBeNull();
+      expect(matchPerson({}, index)).toBeNull();
+      expect(matchPerson(null, index)).toBeNull();
+    });
+  });
+
+  describe('matchPeople', () => {
+    const index = buildPersonMatchIndex(PEOPLE);
+    it('de-duplicates the same person appearing twice (organizer + attendee)', () => {
+      const ids = matchPeople(
+        [{ email: 'ada@work.com' }, { email: 'ada@home.com' }, { name: 'Ada Lovelace' }],
+        index,
+      );
+      expect([...ids]).toEqual(['ada']);
+    });
+    it('accepts bare email strings as well as { email, name } objects', () => {
+      const ids = matchPeople(['grace@navy.mil', { name: 'lin' }], index);
+      expect(ids.has('grace')).toBe(true);
+      expect(ids.has('lin')).toBe(true);
+      expect(ids.size).toBe(2);
+    });
+    it('drops unmatched and empty identities', () => {
+      const ids = matchPeople([null, '', { email: 'x@x.com' }, { name: 'Sam' }], index);
+      expect(ids.size).toBe(0);
+    });
+  });
+});
diff --git a/server/lib/tuiHandshake.js b/server/lib/tuiHandshake.js
index e161b1653..dd3007f4c 100644
--- a/server/lib/tuiHandshake.js
+++ b/server/lib/tuiHandshake.js
@@ -313,6 +313,71 @@ export function scheduleSubmitEnters(write, isFinalized) {
 export const DEFAULT_TUI_PROMPT_DELAY_MS = 2500;
 export const DEFAULT_TUI_IDLE_TIMEOUT_MS = 180000;
 
+// Extended idle threshold applied ONLY while a `/do:next --swarm` orchestrator
+// is in its Phase C serialized merge queue (issue #2074). Merging PRs one at a
+// time makes each subsequent PR rebase onto the new `main` and re-run required
+// CI — several minutes of *silent* TUI output per PR (`gh pr checks --watch`
+// shows a static "pending" screen with no repaint). That quiet window routinely
+// blows past the 3-minute default and the runner reaps the still-working
+// orchestrator as `idle-complete`, leaving PRs merged-but-uncleaned or unmerged
+// while `state.json` records `status: completed`. 15 minutes comfortably covers
+// one CI run's silent gap while still bounding a genuinely-dead orchestrator's
+// reap (see MERGE_QUEUE_IDLE_TIMEOUT reap path in agentTuiSpawning.js).
+export const MERGE_QUEUE_IDLE_TIMEOUT_MS = 900000;
+
+// Distinctive markers the swarm orchestrator's TUI prints once it enters the
+// Phase C merge queue. Detection is deliberately conservative: a false POSITIVE
+// only *extends* the idle window (bounded, low-cost), and a false NEGATIVE just
+// preserves the pre-#2074 behavior (no regression) — so this is nothing like the
+// fragile completion-detection regexes we avoid for FINALIZING a run. Matched
+// against ANSI-stripped output. Kept lower-cased for case-insensitive testing.
+const MERGE_QUEUE_MARKERS = [
+  'merge queue',
+  'serialized merge',
+  'phase c',
+  'gh pr merge',
+  'gh pr checks',
+  '--delete-branch',
+];
+
+/**
+ * True when a chunk of ANSI-stripped TUI output shows the swarm orchestrator has
+ * entered its Phase C serialized merge queue. Callers MUST pass stripped output.
+ * Non-string / empty input yields false.
+ *
+ * @param {string} strippedText — ANSI-stripped output (a chunk or accumulator).
+ * @returns {boolean}
+ */
+export function isMergeQueueSignal(strippedText) {
+  if (typeof strippedText !== 'string' || !strippedText) return false;
+  const lower = strippedText.toLowerCase();
+  return MERGE_QUEUE_MARKERS.some((marker) => lower.includes(marker));
+}
+
+/**
+ * Latching tracker for "this agent is in a serialized merge queue" (issue
+ * #2074). Feed it each ANSI-stripped post-submit chunk via `observe(text)`; it
+ * becomes `active` the first time a merge-queue marker appears and STAYS active
+ * thereafter. Latching (not a sliding window) is deliberate: the whole failure
+ * mode is a *silent* CI wait — no markers print during the quiet gap — so a
+ * recency window would age the flag out exactly when the extended idle grace is
+ * needed. Once latched, the idle reaper uses MERGE_QUEUE_IDLE_TIMEOUT_MS instead
+ * of the 3-minute default. Lives here so the detection logic is unit-testable.
+ *
+ * @returns {{ observe: (strippedText: string) => boolean, readonly active: boolean }}
+ */
+export function createMergeQueueTracker() {
+  let active = false;
+  return {
+    observe(strippedText) {
+      if (active) return true;
+      if (isMergeQueueSignal(strippedText)) active = true;
+      return active;
+    },
+    get active() { return active; },
+  };
+}
+
 // ─── Buffer caps (defensive RAM bounds) ───────────────────────────────────
 //
 // RAW caps stay small — the raw PTY stream is only used for paste-marker
diff --git a/server/lib/tuiHandshake.test.js b/server/lib/tuiHandshake.test.js
index b6ac08452..93ec80ea7 100644
--- a/server/lib/tuiHandshake.test.js
+++ b/server/lib/tuiHandshake.test.js
@@ -12,6 +12,9 @@ import {
   MIN_WORK_COUNTER_SPAN_MS,
   extractWorkCounterSeconds,
   createWorkActivityTracker,
+  MERGE_QUEUE_IDLE_TIMEOUT_MS,
+  isMergeQueueSignal,
+  createMergeQueueTracker,
   rendersWorkCounter,
   PASTE_TO_ENTER_MIN_DELAY_MS,
   PASTE_TO_ENTER_FALLBACK_MS,
@@ -247,6 +250,46 @@ describe('tuiHandshake — paste timing constants', () => {
   });
 });
 
+// Issue #2074 — a swarm orchestrator in its Phase C serialized merge queue goes
+// silent for minutes per PR (each rebases + re-runs CI). Detection latches so the
+// idle reaper can extend its grace and not reap a still-working orchestrator.
+describe('tuiHandshake — merge-queue idle suppression (#2074)', () => {
+  it('extends the idle timeout well past the default 3-minute window', () => {
+    expect(MERGE_QUEUE_IDLE_TIMEOUT_MS).toBe(900000);
+    expect(MERGE_QUEUE_IDLE_TIMEOUT_MS).toBeGreaterThan(DEFAULT_TUI_IDLE_TIMEOUT_MS);
+  });
+
+  it('isMergeQueueSignal matches Phase C merge-queue chrome (case-insensitive)', () => {
+    expect(isMergeQueueSignal('### Swarm Phase C — Serialized merge queue')).toBe(true);
+    expect(isMergeQueueSignal('Running: gh pr checks 2071 --required --watch --fail-fast')).toBe(true);
+    expect(isMergeQueueSignal('gh pr merge 2071 --merge --delete-branch')).toBe(true);
+    expect(isMergeQueueSignal('PHASE C: serialized MERGE QUEUE begins')).toBe(true);
+  });
+
+  it('isMergeQueueSignal ignores ordinary implementation/output chrome', () => {
+    expect(isMergeQueueSignal('Editing server/services/agentTuiSpawning.js')).toBe(false);
+    expect(isMergeQueueSignal('● high · (12s · running tests)')).toBe(false);
+    expect(isMergeQueueSignal('')).toBe(false);
+    expect(isMergeQueueSignal(null)).toBe(false);
+    expect(isMergeQueueSignal(undefined)).toBe(false);
+  });
+
+  it('createMergeQueueTracker latches on first signal and stays active through silence', () => {
+    const tracker = createMergeQueueTracker();
+    expect(tracker.active).toBe(false);
+    tracker.observe('implementing the fix, running the suite');
+    expect(tracker.active).toBe(false);
+    // Enters Phase C — latches.
+    expect(tracker.observe('gh pr merge 2071 --merge --delete-branch')).toBe(true);
+    expect(tracker.active).toBe(true);
+    // Subsequent quiet CI-wait chunks (no marker) must NOT un-latch it — the
+    // whole point is that the silent gap is when the grace is needed.
+    tracker.observe('waiting...');
+    tracker.observe('');
+    expect(tracker.active).toBe(true);
+  });
+});
+
 describe('tuiHandshake.inferTuiCommand', () => {
   // Catch-all default also returns claude; the claude rows just confirm
   // an explicit match isn't accidentally tagged codex/antigravity/gemini.
diff --git a/server/lib/validation.js b/server/lib/validation.js
index 4742fb662..ebd9d4690 100644
--- a/server/lib/validation.js
+++ b/server/lib/validation.js
@@ -269,6 +269,36 @@ export const searchQuerySchema = z.object({
   q: z.string().min(2).max(200).trim()
 });
 
+// =============================================================================
+// MEDIA SKETCH / ANNOTATION SCHEMAS (issue #2036, phase 1)
+// =============================================================================
+
+// Vector strokes drawn over a generated image. Points are stored in the
+// image's natural-pixel space so they restore exactly regardless of the
+// display size (see AnnotationCanvas.jsx). The service (mediaSketches.js)
+// re-sanitizes + clamps beyond this schema; the Zod layer rejects the
+// obviously-malformed shapes early with a 400.
+const sketchPointSchema = z.object({
+  x: z.number().finite(),
+  y: z.number().finite()
+});
+
+const sketchStrokeSchema = z.object({
+  mode: z.enum(['draw', 'erase']).optional(),
+  color: z.string().max(32).optional(),
+  size: z.number().positive().max(512).optional(),
+  points: z.array(sketchPointSchema).min(1).max(20000)
+});
+
+export const mediaSketchSaveSchema = z.object({
+  width: z.number().positive(),
+  height: z.number().positive(),
+  strokes: z.array(sketchStrokeSchema).max(5000),
+  // Flattened raster (image + strokes) as a PNG data URL. Optional so a caller
+  // can persist just the vector layer; the service decodes + stores the bytes.
+  png: z.string().startsWith('data:image/png;base64,').optional()
+});
+
 // =============================================================================
 // BACKUP SCHEMAS
 // =============================================================================
diff --git a/server/routes/catalog.js b/server/routes/catalog.js
index 623c640b1..3dd23b261 100644
--- a/server/routes/catalog.js
+++ b/server/routes/catalog.js
@@ -18,6 +18,8 @@ import {
   catalogRelationLinkSchema,
   catalogMediaAttachSchema,
   catalogMediaDetachSchema,
+  catalogMediaFileUploadSchema,
+  catalogMediaVoiceMemoSchema,
   catalogPortraitSetSchema,
   catalogIngredientQuerySchema,
   catalogTagQuerySchema,
@@ -45,6 +47,7 @@ import { resolveImageInputPath } from '../lib/fileUtils.js';
 import { embedIngredient, embedBatch, ingredientEmbedSeed } from '../services/embeddings.js';
 import { extractIngredientsForScrap } from '../services/catalogExtraction.js';
 import { ingestFromUrl, ingestFromFile, ingestFromVoice, ingestFromBrain } from '../services/catalogIngestSources.js';
+import { uploadIngredientMediaFile, recordIngredientVoiceMemo } from '../services/catalogMedia.js';
 import { migrateBibleToCatalog } from '../scripts/migrateBibleToCatalog.js';
 import { PORTOS_SCHEMA_VERSIONS } from '../lib/schemaVersions.js';
 
@@ -495,6 +498,24 @@ router.delete('/ingredients/:id/media', asyncHandler(async (req, res) => {
   res.status(204).end();
 }));
 
+// Upload a file (drag-drop / picker) straight onto an ingredient: the service
+// stores it in the matching federating library dir (image→data/images as PNG,
+// audio→data/audio, video→data/videos) and attaches the reference. The 404 for a
+// missing ingredient is raised inside the service.
+router.post('/ingredients/:id/media/upload', asyncHandler(async (req, res) => {
+  const body = validateRequest(catalogMediaFileUploadSchema, req.body);
+  const media = await uploadIngredientMediaFile({ ingredientId: req.params.id, ...body });
+  res.status(201).json(media);
+}));
+
+// Record a voice memo onto an ingredient: transcribe via Whisper, persist the
+// audio, and attach a kind:'audio' row with the transcript in caption.
+router.post('/ingredients/:id/media/voice', asyncHandler(async (req, res) => {
+  const body = validateRequest(catalogMediaVoiceMemoSchema, req.body);
+  const result = await recordIngredientVoiceMemo({ ingredientId: req.params.id, ...body });
+  res.status(201).json(result);
+}));
+
 // Bulk-create ingredients from a markdown / CSV / JSON dump — no LLM round
 // trip, unlike the scrap → extract → commit path. The whole batch commits
 // or rolls back together so a malformed entry can't leave the catalog
diff --git a/server/routes/meatspaceCoreRoutes.js b/server/routes/meatspaceCoreRoutes.js
index 1d1e34b8b..6b9e7fa52 100644
--- a/server/routes/meatspaceCoreRoutes.js
+++ b/server/routes/meatspaceCoreRoutes.js
@@ -10,6 +10,7 @@ import { validateRequest } from '../lib/validation.js';
 import { configUpdateSchema, lifestyleUpdateSchema } from '../lib/meatspaceValidation.js';
 import { birthDateInputSchema } from '../lib/identityValidation.js';
 import * as meatspaceService from '../services/meatspace.js';
+import { getLoggingStats } from '../services/meatspaceLoggingStats.js';
 
 const router = Router();
 
@@ -26,6 +27,15 @@ router.get('/', asyncHandler(async (req, res) => {
   res.json(overview);
 }));
 
+/**
+ * GET /api/meatspace/logging-stats
+ * Cross-domain health-logging streak + this-week counts for the dashboard widget.
+ */
+router.get('/logging-stats', asyncHandler(async (req, res) => {
+  const stats = await getLoggingStats();
+  res.json(stats);
+}));
+
 // =============================================================================
 // CONFIG
 // =============================================================================
diff --git a/server/routes/mediaSketches.js b/server/routes/mediaSketches.js
new file mode 100644
index 000000000..2cbd9b09d
--- /dev/null
+++ b/server/routes/mediaSketches.js
@@ -0,0 +1,48 @@
+/**
+ *   GET    /api/media/sketches/:key
+ *     → { key, sketch: { width, height, strokes, updatedAt, hasPng } | null }
+ *   PUT    /api/media/sketches/:key
+ *     body: { width, height, strokes: [...], png?: dataURL }
+ *     → { key, sketch }  (sketch.strokes empty ⇒ sidecar removed)
+ *   GET    /api/media/sketches/:key/png
+ *     → flattened PNG bytes (image + strokes), 404 when none saved
+ *
+ * Key shape: `<kind>:<ref>` (only `image:*` may be annotated in phase 1).
+ * Phase 1 of the Sketch & Annotation Canvas — issue #2036.
+ */
+
+import { Router } from 'express';
+import { asyncHandler, ServerError } from '../lib/errorHandler.js';
+import { validateRequest, mediaSketchSaveSchema } from '../lib/validation.js';
+import * as svc from '../services/mediaSketches.js';
+
+const router = Router();
+
+const mapServiceError = (err) => {
+  if (err?.code === svc.ERR_VALIDATION) {
+    return new ServerError(err.message, { status: 400, code: err.code });
+  }
+  return err;
+};
+
+router.get('/:key', asyncHandler(async (req, res) => {
+  const sketch = await svc.getSketch(req.params.key).catch((err) => { throw mapServiceError(err); });
+  res.json({ key: req.params.key, sketch });
+}));
+
+router.get('/:key/png', asyncHandler(async (req, res) => {
+  const png = await svc.getSketchPng(req.params.key).catch((err) => { throw mapServiceError(err); });
+  if (!png) throw new ServerError('No sketch export for this media', { status: 404, code: 'NOT_FOUND' });
+  res.type('image/png').send(png);
+}));
+
+router.put('/:key', asyncHandler(async (req, res) => {
+  const body = validateRequest(mediaSketchSaveSchema, req.body ?? {});
+  const sketch = await svc.saveSketch(req.params.key, body).catch((err) => { throw mapServiceError(err); });
+  // Broadcast so other open views (History, Collections, other tabs) can drop a
+  // stale "has annotation" badge or refresh without a manual reload.
+  req.app.get('io')?.emit('media:sketch:updated', { key: req.params.key, sketch });
+  res.json({ key: req.params.key, sketch });
+}));
+
+export default router;
diff --git a/server/routes/mediaSketches.test.js b/server/routes/mediaSketches.test.js
new file mode 100644
index 000000000..6c2a0f196
--- /dev/null
+++ b/server/routes/mediaSketches.test.js
@@ -0,0 +1,87 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import express from 'express';
+import { request } from '../lib/testHelper.js';
+import { errorMiddleware } from '../lib/errorHandler.js';
+
+// Stub the service so we assert the route's request → svc-call → response
+// wiring (incl. 400/404 mapping) without touching the real file-backed store.
+const stubs = {
+  getSketch: vi.fn(),
+  getSketchPng: vi.fn(),
+  saveSketch: vi.fn(),
+};
+
+vi.mock('../services/mediaSketches.js', async () => {
+  const actual = await vi.importActual('../services/mediaSketches.js');
+  return {
+    ...actual,
+    getSketch: (...a) => stubs.getSketch(...a),
+    getSketchPng: (...a) => stubs.getSketchPng(...a),
+    saveSketch: (...a) => stubs.saveSketch(...a),
+  };
+});
+
+const router = (await import('./mediaSketches.js')).default;
+
+function makeApp() {
+  const app = express();
+  app.use(express.json({ limit: '55mb' }));
+  app.use('/api/media/sketches', router);
+  app.use(errorMiddleware);
+  return app;
+}
+
+const KEY = encodeURIComponent('image:foo.png');
+const sampleStrokes = [{ mode: 'draw', color: '#ef4444', size: 6, points: [{ x: 1, y: 2 }, { x: 3, y: 4 }] }];
+
+describe('mediaSketches routes', () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it('GET /:key returns the sketch projection', async () => {
+    stubs.getSketch.mockResolvedValue({ key: 'image:foo.png', width: 10, height: 10, strokes: sampleStrokes, updatedAt: 'now', hasPng: true });
+    const r = await request(makeApp()).get(`/api/media/sketches/${KEY}`);
+    expect(r.status).toBe(200);
+    expect(r.body.sketch.strokes).toHaveLength(1);
+    expect(stubs.getSketch).toHaveBeenCalledWith('image:foo.png');
+  });
+
+  it('GET /:key returns sketch:null when none saved', async () => {
+    stubs.getSketch.mockResolvedValue(null);
+    const r = await request(makeApp()).get(`/api/media/sketches/${KEY}`);
+    expect(r.status).toBe(200);
+    expect(r.body.sketch).toBeNull();
+  });
+
+  it('PUT /:key round-trips a save and echoes the stored sketch', async () => {
+    const stored = { key: 'image:foo.png', width: 100, height: 80, strokes: sampleStrokes, updatedAt: 'now', hasPng: false };
+    stubs.saveSketch.mockResolvedValue(stored);
+    const r = await request(makeApp())
+      .put(`/api/media/sketches/${KEY}`)
+      .send({ width: 100, height: 80, strokes: sampleStrokes });
+    expect(r.status).toBe(200);
+    expect(r.body.key).toBe('image:foo.png');
+    expect(r.body.sketch).toEqual(stored);
+    expect(stubs.saveSketch).toHaveBeenCalledWith('image:foo.png', expect.objectContaining({ width: 100, height: 80 }));
+  });
+
+  it('PUT /:key 400s on a malformed payload before hitting the service', async () => {
+    const r = await request(makeApp())
+      .put(`/api/media/sketches/${KEY}`)
+      .send({ width: 100 }); // missing height + strokes
+    expect(r.status).toBe(400);
+    expect(stubs.saveSketch).not.toHaveBeenCalled();
+  });
+
+  it('GET /:key/png streams the flattened bytes', async () => {
+    stubs.getSketchPng.mockResolvedValue(Buffer.from('png-bytes'));
+    const r = await request(makeApp()).get(`/api/media/sketches/${KEY}/png`);
+    expect(r.status).toBe(200);
+    expect(r.headers['content-type']).toContain('image/png');
+  });
+
+  it('GET /:key/png 404s when no export exists', async () => {
+    stubs.getSketchPng.mockResolvedValue(null);
+    const r = await request(makeApp()).get(`/api/media/sketches/${KEY}/png`);
+    expect(r.status).toBe(404);
+  });
+});
diff --git a/server/routes/palette.js b/server/routes/palette.js
index 27f19b8f6..f6b996234 100644
--- a/server/routes/palette.js
+++ b/server/routes/palette.js
@@ -54,6 +54,7 @@ const PALETTE_ACTIONS = [
   { id: 'code_agent_status',       label: 'Coding agent status',     section: 'Agents' },
   { id: 'time_now',                label: 'Current time',            section: 'System' },
   { id: 'catalog_lookup',          label: 'Look up ingredient…',     section: 'Catalog' },
+  { id: 'workspace_switch',        label: 'Switch workspace…',       section: 'Workspace' },
 ];
 
 const PALETTE_ACTION_IDS = new Set(PALETTE_ACTIONS.map((a) => a.id));
diff --git a/server/routes/palette.test.js b/server/routes/palette.test.js
index d44872ca6..a331f31bf 100644
--- a/server/routes/palette.test.js
+++ b/server/routes/palette.test.js
@@ -42,6 +42,22 @@ vi.mock('../services/catalogDB.js', () => ({
   })),
   listRefsForIngredient: vi.fn(async () => [{ ingredientId: 'character-1', refKind: 'universe', refId: 'u1', role: 'cast' }]),
 }));
+vi.mock('../services/apps.js', () => ({
+  getActiveApps: vi.fn(async () => [{ id: 'bookloom', name: 'BookLoom' }]),
+  PORTOS_APP_ID: 'portos-default',
+}));
+vi.mock('../lib/appResolver.js', () => ({
+  resolveAppByPhrase: vi.fn((phrase, apps) =>
+    (apps || []).find((a) => a.name.toLowerCase().includes(String(phrase).toLowerCase())) || null,
+  ),
+}));
+vi.mock('../services/workspaceContext.js', () => ({
+  snapshotOnRepoSwitch: vi.fn(async () => ({ appId: 'portos-default' })),
+  restoreContext: vi.fn(async () => ({
+    saved: { branch: 'main' },
+    restorable: { shellSessions: [{ sessionId: 's1' }, { sessionId: 's2' }], missingShellSessionIds: [], branchMatches: true },
+  })),
+}));
 vi.mock('../services/askService.js', () => ({
   VALID_MODES: new Set(['ask', 'advise', 'draft']),
   runAsk: vi.fn(async function* () {
@@ -109,6 +125,17 @@ describe('GET /api/palette/manifest', () => {
     expect(ids).toContain('meatspace_log_workout');
   });
 
+  it('exposes workspace_switch with its description + workspace param hydrated from the voice tool', async () => {
+    const res = await request(makeApp()).get('/api/palette/manifest');
+    const action = res.body.actions.find((a) => a.id === 'workspace_switch');
+    expect(action).toBeTruthy();
+    expect(action.section).toBe('Workspace');
+    expect(action.label).toMatch(/switch workspace/i);
+    // Description/params hydrate from the voice tool registry (DRY link).
+    expect(action.description).toMatch(/workspace|project/i);
+    expect(action.parameters?.properties?.workspace).toBeTruthy();
+  });
+
   it('keeps ui_describe_visually OFF the palette (no screenshot context)', async () => {
     const res = await request(makeApp()).get('/api/palette/manifest');
     const ids = res.body.actions.map((a) => a.id);
@@ -177,6 +204,27 @@ describe('POST /api/palette/action/:id', () => {
     expect(hit.snippet).toMatch(/tall stoic ranger/);
   });
 
+  it('dispatches workspace_switch — snapshots the leaving workspace then restores the target', async () => {
+    const res = await request(makeApp())
+      .post('/api/palette/action/workspace_switch')
+      .send({ args: { workspace: 'BookLoom' } });
+    expect(res.status).toBe(200);
+    expect(res.body.ok).toBe(true);
+    expect(res.body.result.workspace).toBe('bookloom');
+    expect(res.body.result.reattachable).toBe(2);
+    expect(res.body.result.snapshotted).toBe('portos-default');
+    expect(res.body.result.summary).toMatch(/Switched to BookLoom/);
+  });
+
+  it('workspace_switch reports an unknown workspace instead of throwing', async () => {
+    const res = await request(makeApp())
+      .post('/api/palette/action/workspace_switch')
+      .send({ args: { workspace: 'nonexistent-app' } });
+    expect(res.status).toBe(200);
+    expect(res.body.ok).toBe(false);
+    expect(res.body.result.summary).toMatch(/don't see a project/i);
+  });
+
   it('dispatches ui_ask through the palette and returns the answer + sources', async () => {
     const res = await request(makeApp())
       .post('/api/palette/action/ui_ask')
diff --git a/server/routes/tribe.js b/server/routes/tribe.js
index de379d127..88015ef80 100644
--- a/server/routes/tribe.js
+++ b/server/routes/tribe.js
@@ -21,6 +21,10 @@ const personSchema = z.object({
   channel: z.string().max(200).optional().default(''),
   energy: energySchema.optional().default('steady'),
   tags: z.array(z.string().max(80)).max(50).optional().default([]),
+  // Known emails/handles used to auto-match calendar attendees / message
+  // counterparts to this person (#2033). Service-side `normalizeEmails` lowercases
+  // and de-duplicates; the UI splits its single-line input to an array like tags.
+  emails: z.array(z.string().max(320)).max(100).optional().default([]),
   nextMove: z.string().max(2000).optional().default(''),
   notes: z.string().max(10000).optional().default(''),
 });
@@ -76,6 +80,14 @@ router.get('/people', asyncHandler(async (req, res) => {
   res.json({ people });
 }));
 
+// Care summary — overdue-contact status computed server-side (single source of
+// truth) for the dashboard widget and proactive-alerts check.
+router.get('/care', asyncHandler(async (req, res) => {
+  const limit = Math.min(Math.max(parseInt(req.query.limit, 10) || 5, 1), 50);
+  const summary = await tribe.getCareSummary(limit);
+  res.json(summary);
+}));
+
 router.post('/people', asyncHandler(async (req, res) => {
   const data = validateRequest(personSchema, req.body);
   const person = await tribe.createPerson(data);
diff --git a/server/routes/tribe.test.js b/server/routes/tribe.test.js
index b88164a02..8a95367b9 100644
--- a/server/routes/tribe.test.js
+++ b/server/routes/tribe.test.js
@@ -11,6 +11,7 @@ errorEvents.on('error', () => {});
 
 vi.mock('../services/tribe.js', () => ({
   listPeople: vi.fn(),
+  getCareSummary: vi.fn(),
   getPerson: vi.fn(),
   createPerson: vi.fn(),
   updatePerson: vi.fn(),
@@ -52,6 +53,16 @@ describe('Tribe Routes', () => {
     expect(tribe.listPeople).toHaveBeenCalledWith({ search: 'ada', ring: 'core' });
   });
 
+  it('returns the care summary with a clamped limit', async () => {
+    tribe.getCareSummary.mockResolvedValue({ hasPeople: true, peopleCount: 2, overdueCount: 1, overdue: [] });
+
+    const response = await request(app).get('/api/tribe/care?limit=999');
+
+    expect(response.status).toBe(200);
+    expect(response.body.overdueCount).toBe(1);
+    expect(tribe.getCareSummary).toHaveBeenCalledWith(50); // clamped from 999
+  });
+
   it('creates a person and emits tribe changes', async () => {
     tribe.createPerson.mockResolvedValue({ id: PERSON_ID, name: 'Ada', ring: 'core' });
 
@@ -69,6 +80,19 @@ describe('Tribe Routes', () => {
     expect(emit).toHaveBeenCalledWith('tribe:changed', { personId: PERSON_ID });
   });
 
+  it('accepts and forwards an emails array on create', async () => {
+    tribe.createPerson.mockResolvedValue({ id: PERSON_ID, name: 'Ada' });
+
+    const response = await request(app)
+      .post('/api/tribe/people')
+      .send({ name: 'Ada', emails: ['ada@work.com', 'ada@home.com'] });
+
+    expect(response.status).toBe(201);
+    expect(tribe.createPerson).toHaveBeenCalledWith(expect.objectContaining({
+      emails: ['ada@work.com', 'ada@home.com'],
+    }));
+  });
+
   it('updates a person with partial fields', async () => {
     tribe.updatePerson.mockResolvedValue({ id: PERSON_ID, name: 'Ada', nextMove: 'Coffee' });
 
diff --git a/server/scripts/init-db.sql b/server/scripts/init-db.sql
index 79232f344..30ca95a9e 100644
--- a/server/scripts/init-db.sql
+++ b/server/scripts/init-db.sql
@@ -95,8 +95,12 @@ CREATE TABLE IF NOT EXISTS tribe_people (
   deleted BOOLEAN DEFAULT FALSE,
   deleted_at TIMESTAMPTZ
 );
+-- Known emails/handles for a person — the deterministic key that maps a calendar
+-- attendee / message counterpart back to this tracked person (#2033).
+ALTER TABLE tribe_people ADD COLUMN IF NOT EXISTS emails TEXT[] DEFAULT '{}';
 CREATE INDEX IF NOT EXISTS idx_tribe_people_live ON tribe_people (deleted, ring, updated_at DESC);
 CREATE INDEX IF NOT EXISTS idx_tribe_people_tags ON tribe_people USING gin (tags);
+CREATE INDEX IF NOT EXISTS idx_tribe_people_emails ON tribe_people USING gin (emails);
 
 CREATE TABLE IF NOT EXISTS tribe_touchpoints (
   id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
@@ -107,11 +111,16 @@ CREATE TABLE IF NOT EXISTS tribe_touchpoints (
   source VARCHAR(32) NOT NULL DEFAULT 'user',
   calendar_account_id TEXT,
   calendar_event_id TEXT,
+  dedupe_key TEXT,
   metadata JSONB NOT NULL DEFAULT '{}'::jsonb,
   created_at TIMESTAMPTZ DEFAULT NOW()
 );
+-- Idempotency key for auto-logged touchpoints (calendar event id / message
+-- thread+day); NULL for hand-logged user touchpoints.
+ALTER TABLE tribe_touchpoints ADD COLUMN IF NOT EXISTS dedupe_key TEXT;
 CREATE INDEX IF NOT EXISTS idx_tribe_touchpoints_person ON tribe_touchpoints (person_id, happened_at DESC);
 CREATE INDEX IF NOT EXISTS idx_tribe_touchpoints_calendar ON tribe_touchpoints (calendar_account_id, calendar_event_id);
+CREATE UNIQUE INDEX IF NOT EXISTS idx_tribe_touchpoints_dedupe ON tribe_touchpoints (person_id, dedupe_key) WHERE dedupe_key IS NOT NULL;
 
 CREATE TABLE IF NOT EXISTS tribe_memory_links (
   person_id UUID NOT NULL REFERENCES tribe_people(id) ON DELETE CASCADE,
diff --git a/server/services/agentLifecycle.js b/server/services/agentLifecycle.js
index 4a4381b89..e814f7a0b 100644
--- a/server/services/agentLifecycle.js
+++ b/server/services/agentLifecycle.js
@@ -317,6 +317,18 @@ export async function spawnAgentForTask(task) {
     }
     const { workspacePath, resolvedAppName, worktreeInfo, jiraTicket, jiraBranchName, explicitWorktree } = prep;
 
+    // Auto-snapshot the workspace context of the app CoS was last working in
+    // when this dispatch switches to a different app/repo (#2035). Snapshot-only
+    // — it never restores and never calls an LLM. Dynamic import avoids pulling
+    // the workspace-context graph into this hot module's load path; the call is
+    // defensive so a missing current context (or any failure) can't break the
+    // spawn.
+    await import('./workspaceContext.js')
+      .then((ws) => ws.snapshotOnRepoSwitch(task.metadata?.app || null))
+      .catch((err) => {
+        emitLog('warn', `Workspace auto-snapshot skipped for task ${task.id}: ${err?.message || err}`, { taskId: task.id });
+      });
+
     const isTui = isTuiProvider(provider);
 
     // Build the agent prompt. `provider.type` drives the light-vs-full split
diff --git a/server/services/agentTuiSpawning.js b/server/services/agentTuiSpawning.js
index b6e0ef3bf..8adef0816 100644
--- a/server/services/agentTuiSpawning.js
+++ b/server/services/agentTuiSpawning.js
@@ -25,11 +25,13 @@ import { isAntigravityCommand } from '../lib/antigravity.js';
 import {
   DEFAULT_TUI_PROMPT_DELAY_MS,
   DEFAULT_TUI_IDLE_TIMEOUT_MS,
+  MERGE_QUEUE_IDLE_TIMEOUT_MS,
   READY_POLL_INTERVAL_MS,
   READY_IDLE_THRESHOLD_MS,
   PASTE_MARKER_POLL_MS,
   countPasteMarkers,
   createWorkActivityTracker,
+  createMergeQueueTracker,
   createInputReadyTracker,
   rendersWorkCounter,
   PASTE_TO_ENTER_MIN_DELAY_MS,
@@ -276,6 +278,11 @@ export async function spawnTuiAgent({
   // fallback idle-complete path from finalizing a never-submitted prompt as
   // success (issue #1229).
   const workActivity = createWorkActivityTracker();
+  // Latches once the agent enters a `/do:next --swarm` Phase C serialized merge
+  // queue, whose per-PR CI re-runs produce minutes of silent output. While
+  // latched, the idle reaper uses the extended MERGE_QUEUE_IDLE_TIMEOUT_MS so a
+  // still-working orchestrator isn't reaped mid-merge (issue #2074).
+  const mergeQueue = createMergeQueueTracker();
   // Tracks claude's interactive input-readiness (footer chrome) and its first-run
   // folder-trust gate. Gates the prompt paste for the claude TUI so we never
   // paste into a startup banner, a trust menu, or a returned shell prompt.
@@ -625,6 +632,13 @@ export async function spawnTuiAgent({
       // across wall-clock time confirms real work (a static echo's counters all
       // arrive together and fail the time-span). Gates idle-complete (#1229).
       if (promptSubmittedAt && stripped && !workActivity.active) workActivity.observe(stripped, now);
+      // Detect entry into the swarm Phase C merge queue so the idle reaper can
+      // extend its grace window across the silent per-PR CI waits (issue #2074).
+      // Latches once — observe only until active, then announce the transition.
+      if (promptSubmittedAt && stripped && !mergeQueue.active && mergeQueue.observe(stripped)) {
+        emitLog('info', `TUI agent ${agentId} entered merge queue — idle reaper extended to ${Math.round(MERGE_QUEUE_IDLE_TIMEOUT_MS / 60000)}min`, { agentId, phase: 'merge-queue' });
+        await updateAgent(agentId, { metadata: { phase: 'merge-queue' } });
+      }
       lastOutputAt = now;
       if (firstOutputAt === null) firstOutputAt = lastOutputAt;
 
@@ -881,7 +895,29 @@ export async function spawnTuiAgent({
     // counts because per-line PTY capture is intentionally disabled for TUI
     // agents — see handleData.
     if (lastOutputAt <= promptSentAt) return;
-    if (idle >= tuiConfig.idleTimeoutMs) {
+    // While the agent is in a swarm Phase C serialized merge queue, per-PR CI
+    // re-runs go silent for minutes at a time; extend the idle grace so a
+    // still-working orchestrator isn't reaped mid-merge (issue #2074). The
+    // extended window still bounds a genuinely-dead orchestrator's reap.
+    const effectiveIdleTimeoutMs = mergeQueue.active
+      ? Math.max(tuiConfig.idleTimeoutMs, MERGE_QUEUE_IDLE_TIMEOUT_MS)
+      : tuiConfig.idleTimeoutMs;
+    if (idle >= effectiveIdleTimeoutMs) {
+      // Reaped AFTER the extended merge-queue grace elapsed: the orchestrator
+      // almost certainly died mid-merge with PRs opened/merged-but-uncleaned.
+      // Surface it as a needs-manual-finish FAILURE rather than the silent
+      // `status: completed` that hid the half-done merge queue (issue #2074).
+      if (mergeQueue.active) {
+        finish({
+          success: false,
+          exitCode: 1,
+          error: `TUI agent idled out after ${Math.round(effectiveIdleTimeoutMs / 60000)}min in the merge queue — it likely died mid-merge; check for open or merged-but-uncleaned PRs and finish them manually.`,
+          reason: 'merge-queue-idle-timeout',
+        }).catch(err => {
+          emitLog('error', `Failed to finalize TUI agent ${agentId}: ${err.message}`, { agentId });
+        });
+        return;
+      }
       // Distinguish a real (sentinel-less) completion from a never-submitted
       // prompt that just idled out. `lastOutputAt > promptSentAt` only proves
       // the TUI repainted SOMETHING — banner/status chrome churns even with the
diff --git a/server/services/agentTuiSpawning.test.js b/server/services/agentTuiSpawning.test.js
index 77c4b82a1..0e022144d 100644
--- a/server/services/agentTuiSpawning.test.js
+++ b/server/services/agentTuiSpawning.test.js
@@ -1001,3 +1001,65 @@ describe('spawnTuiAgent runtime', () => {
     expect(outputTxtWrites).toContain('https://example.com/pr/42');
   });
 });
+
+// Issue #2074 — the idle reaper must extend its grace while a swarm orchestrator
+// is in its Phase C merge queue, and, if the EXTENDED window still blows, surface
+// a needs-manual-finish failure instead of a silent `status: completed`. This is
+// the exact decision the `idleTimer` interval makes; mirror it as a pure function
+// (the inline-copy pattern from subAgentSpawner.test.js) so the branch matrix is
+// tested without standing up the full fake-timer PTY harness.
+describe('agentTuiSpawning — idle reap decision (#2074)', () => {
+  const MERGE_QUEUE_IDLE_TIMEOUT_MS = 900000;
+
+  // Faithful copy of the idleTimer body's finalize-selection logic.
+  function decideIdleReap({ idle, baseIdleTimeoutMs, mergeQueueActive, workActive, rendersCounter }) {
+    const effectiveIdleTimeoutMs = mergeQueueActive
+      ? Math.max(baseIdleTimeoutMs, MERGE_QUEUE_IDLE_TIMEOUT_MS)
+      : baseIdleTimeoutMs;
+    if (idle < effectiveIdleTimeoutMs) return { action: 'wait', effectiveIdleTimeoutMs };
+    if (mergeQueueActive) {
+      return { action: 'reap', success: false, reason: 'merge-queue-idle-timeout', effectiveIdleTimeoutMs };
+    }
+    const noWorkButCounterExpected = !workActive && rendersCounter;
+    if (noWorkButCounterExpected) {
+      return { action: 'reap', success: false, reason: 'idle-no-activity', effectiveIdleTimeoutMs };
+    }
+    return { action: 'reap', success: true, reason: 'idle-complete', effectiveIdleTimeoutMs };
+  }
+
+  const BASE = 180000;
+
+  it('does NOT reap at the 3-min default while in a merge queue — grace extends to 15min', () => {
+    const r = decideIdleReap({ idle: BASE + 5000, baseIdleTimeoutMs: BASE, mergeQueueActive: true, workActive: true, rendersCounter: true });
+    expect(r.action).toBe('wait');
+    expect(r.effectiveIdleTimeoutMs).toBe(MERGE_QUEUE_IDLE_TIMEOUT_MS);
+  });
+
+  it('reaps a merge-queue agent as needs-manual-finish once the EXTENDED window blows', () => {
+    const r = decideIdleReap({ idle: MERGE_QUEUE_IDLE_TIMEOUT_MS + 1, baseIdleTimeoutMs: BASE, mergeQueueActive: true, workActive: true, rendersCounter: true });
+    expect(r.action).toBe('reap');
+    expect(r.success).toBe(false);
+    expect(r.reason).toBe('merge-queue-idle-timeout');
+  });
+
+  it('leaves the pre-#2074 idle-complete path untouched when NOT in a merge queue', () => {
+    const r = decideIdleReap({ idle: BASE + 1, baseIdleTimeoutMs: BASE, mergeQueueActive: false, workActive: true, rendersCounter: true });
+    expect(r.action).toBe('reap');
+    expect(r.success).toBe(true);
+    expect(r.reason).toBe('idle-complete');
+  });
+
+  it('leaves the #1229 no-activity failure path untouched when NOT in a merge queue', () => {
+    const r = decideIdleReap({ idle: BASE + 1, baseIdleTimeoutMs: BASE, mergeQueueActive: false, workActive: false, rendersCounter: true });
+    expect(r.action).toBe('reap');
+    expect(r.success).toBe(false);
+    expect(r.reason).toBe('idle-no-activity');
+  });
+
+  it('a merge-queue reap takes precedence over the no-activity downgrade', () => {
+    // Even with no work counter seen, a latched merge queue means real work was
+    // happening — surface it as needs-manual-finish, not a never-submitted prompt.
+    const r = decideIdleReap({ idle: MERGE_QUEUE_IDLE_TIMEOUT_MS + 1, baseIdleTimeoutMs: BASE, mergeQueueActive: true, workActive: false, rendersCounter: true });
+    expect(r.reason).toBe('merge-queue-idle-timeout');
+  });
+});
diff --git a/server/services/browserService.js b/server/services/browserService.js
index 44a3b7b81..a1f40d2b5 100644
--- a/server/services/browserService.js
+++ b/server/services/browserService.js
@@ -279,6 +279,294 @@ export async function navigateToUrl(url) {
   return { id: page.id, title: page.title || '(loading)', url: page.url, type: page.type };
 }
 
+// ---------- CDP pinned navigation (SSRF: verify Chrome's ACTUAL connect IP) ----------
+
+/**
+ * Extract EVERY main-frame document network hop (each top-level navigation's
+ * initial request + every HTTP redirect + final response) from a captured stream
+ * of CDP Network events, each annotated with the *actual* IP Chrome connected to
+ * (`remoteIPAddress`).
+ *
+ * CDP marks a main-document load with `requestId === loaderId`; redirects reuse
+ * that requestId and arrive as a `redirectResponse` on the following
+ * `Network.requestWillBeSent`, and the final hop lands as a
+ * `Network.responseReceived` with the same requestId. A page can start MORE than
+ * one top-level navigation (a client-side `location.replace` / meta-refresh
+ * during the settle window is a fresh `requestId === loaderId`), so we track a
+ * SET of main requestIds — not just the first — and collect the hops of each.
+ * Walking these reconstructs every address Chrome dialed for the top document
+ * over the whole capture window — the thing a pre-navigation `dns.lookup` can't
+ * know, because Chrome resolves DNS itself (the rebinding TOCTOU).
+ *
+ * Pure + exported so the SSRF-pin decision is unit-testable without a live
+ * browser. Returns `{ hops: [{ url, remoteIPAddress, status }], finalUrl,
+ * mainRequestIds: string[], pendingMainRequestIds: string[] }`.
+ * `pendingMainRequestIds` are top-level navigations that STARTED but produced no
+ * `responseReceived` in the captured window — i.e. a navigation still in flight
+ * whose final connection IP was never observed. The caller must fail closed on a
+ * non-empty pending set: Chrome could complete that navigation (to a private /
+ * metadata target) right after we stop capturing, leaving it unpinned.
+ */
+export function pickMainFrameHops(messages) {
+  const mainRequestIds = new Set();
+  const respondedIds = new Set();
+  const hops = [];
+  let finalUrl = null;
+  for (const msg of messages) {
+    const p = msg?.params;
+    if (!p) continue;
+    if (msg.method === 'Network.requestWillBeSent') {
+      // A Document request whose requestId equals its loaderId is a top-level
+      // navigation; ignore sub-resource / sub-frame requests.
+      if (p.type === 'Document' && p.requestId && p.requestId === p.loaderId) {
+        mainRequestIds.add(p.requestId);
+      }
+      if (mainRequestIds.has(p.requestId) && p.redirectResponse) {
+        hops.push({
+          url: p.redirectResponse.url || null,
+          remoteIPAddress: p.redirectResponse.remoteIPAddress || '',
+          status: p.redirectResponse.status ?? null,
+        });
+      }
+    } else if (msg.method === 'Network.responseReceived') {
+      if (mainRequestIds.has(p.requestId) && p.response) {
+        respondedIds.add(p.requestId);
+        hops.push({
+          url: p.response.url || null,
+          remoteIPAddress: p.response.remoteIPAddress || '',
+          status: p.response.status ?? null,
+        });
+        finalUrl = p.response.url || finalUrl;
+      }
+    }
+  }
+  const pendingMainRequestIds = [...mainRequestIds].filter((id) => !respondedIds.has(id));
+  return { hops, finalUrl, mainRequestIds: [...mainRequestIds], pendingMainRequestIds };
+}
+
+// Close a CDP tab by target id (best-effort). Used to fail closed after an
+// SSRF-pin refusal so a tab that connected to a disallowed address is torn down
+// rather than left open for the DOM reader.
+async function closeCdpPage(id) {
+  if (!id) return;
+  await cdpRequest(`/json/close/${id}`, { timeout: HEALTH_TIMEOUT_MS }).catch(() => {});
+}
+
+// Every address Chrome ACTUALLY dialed across the capture window — the main
+// document, its redirects, AND every sub-resource / XHR / fetch the page issued
+// (any request type), each with a non-empty `remoteIPAddress`. Empty IPs
+// (data:/blob:/cache/service-worker responses — no network connection) are
+// omitted so legit pages aren't false-refused. Pure; exported for testing.
+export function collectConnectedIps(messages) {
+  const out = [];
+  for (const msg of messages) {
+    const p = msg?.params;
+    if (!p) continue;
+    if (msg.method === 'Network.requestWillBeSent' && p.redirectResponse?.remoteIPAddress) {
+      out.push({ url: p.redirectResponse.url || null, remoteIPAddress: p.redirectResponse.remoteIPAddress });
+    } else if (msg.method === 'Network.responseReceived' && p.response?.remoteIPAddress) {
+      out.push({ url: p.response.url || null, remoteIPAddress: p.response.remoteIPAddress });
+    }
+  }
+  return out;
+}
+
+// Hosts of every WebSocket the page opened during the capture window. CDP routes
+// WS through dedicated `Network.webSocket*` events whose payloads carry NO
+// `remoteIPAddress`, so we can only gate the WS by its URL host, not by Chrome's
+// actual connect IP (the resolver-level pin HTTP gets). Pure; exported for tests.
+export function collectWebSocketHosts(messages) {
+  const out = [];
+  for (const msg of messages) {
+    if (msg?.method !== 'Network.webSocketCreated') continue;
+    const raw = msg.params?.url;
+    if (typeof raw !== 'string') continue;
+    let host = null;
+    try { host = new URL(raw).hostname; } catch { host = null; }
+    out.push({ url: raw, host });
+  }
+  return out;
+}
+
+// Pure gate over a captured CDP message stream: returns a refusal reason string,
+// or null when the navigation is safe to read. Exported for unit testing.
+export function ssrfPinRefusalReason(messages, verifyRemoteIp, url) {
+  const { hops, pendingMainRequestIds } = pickMainFrameHops(messages);
+  if (!hops.length) return 'no main-frame document response was observed';
+  // The main document must have a verifiable (present) connection IP — an empty
+  // one can't be checked, so fail closed.
+  for (const hop of hops) {
+    if (!hop.remoteIPAddress) return `Chrome connected to an unverifiable address for ${hop.url || url}`;
+  }
+  // A top-level navigation that STARTED but produced no response was never
+  // pinned — Chrome could be mid-connect to a private/metadata target.
+  if (pendingMainRequestIds.length) return 'a top-level navigation was still in flight (unpinned)';
+  // EVERY connection Chrome made must dial an allowed address — not just the
+  // main document. A rebinding page can load public, then `fetch()` its
+  // now-private-resolving hostname; the browser treats it as same-origin, JS
+  // injects that private response into the DOM we ingest, and the sub-resource's
+  // real `remoteIPAddress` surfaces it here. (`isBlockedIngestHost` blocks only
+  // loopback/link-local/metadata, not RFC1918 LAN, so LAN pages aren't refused.)
+  for (const conn of collectConnectedIps(messages)) {
+    if (!verifyRemoteIp(conn.remoteIPAddress)) {
+      return `Chrome connected to a disallowed address ${conn.remoteIPAddress} for ${conn.url || url}`;
+    }
+  }
+  // WebSockets: CDP exposes no remoteIPAddress for WS, so we can only refuse a WS
+  // opened to a blocked HOST (a direct ws://127.0.0.1 / ws://localhost / metadata
+  // literal). A WS to a hostname that DNS-rebinds to a private IP is a residual
+  // this interception approach can't see — closing it fully needs Chrome-launch
+  // `--host-resolver-rules` (a per-navigation relaunch of the shared browser,
+  // out of scope here). Bounded by the single-user trust model; cloud metadata,
+  // the primary target, is HTTP-only and fully covered above.
+  for (const ws of collectWebSocketHosts(messages)) {
+    if (!ws.host || !verifyRemoteIp(ws.host)) {
+      return `page opened a WebSocket to a disallowed host ${ws.host || '(unparseable)'} (${ws.url})`;
+    }
+  }
+  return null;
+}
+
+/**
+ * Navigate to a URL in a fresh tab and verify — against Chrome's OWN reported
+ * connection IP — that EVERY main-frame hop connected to an allowed address:
+ * the initial `Page.navigate`, every HTTP redirect, AND any client-side
+ * top-level navigation (meta-refresh / `location.replace`) that fires during the
+ * post-load `settleMs` window. This closes the DNS-rebinding TOCTOU a
+ * pre-navigation `dns.lookup` cannot — Chrome resolves DNS itself, so we open a
+ * BLANK tab, subscribe to CDP Network events, THEN drive `Page.navigate`, keep
+ * the subscription open across the settle window, and check the
+ * `remoteIPAddress` Chrome actually dialed for each hop.
+ *
+ * `verifyRemoteIp(ip)` returns false to refuse. On ANY refusal (unverifiable /
+ * empty IP, a navigation that never yields a document response, or a top-level
+ * nav still in flight) we fail closed: close the tab and throw, so a
+ * rebind-to-private answer never reaches the caller.
+ *
+ * When `evaluateExpression` is given, the DOM read runs on the SAME CDP session
+ * (a `Runtime.evaluate` after settle), and the pin is RE-checked over events
+ * captured up to and during that read — so there is no gap between "stop
+ * monitoring" and "read the DOM" for a late client-side navigation to slip
+ * through. The evaluated value is returned as `evalResult` (or null). Without
+ * `evaluateExpression` the caller gets a page handle to read separately.
+ *
+ * The caller does NOT sleep — the settle wait happens HERE, so the DOM has had
+ * `settleMs` to render (and every navigation in that window is pinned) by the
+ * time this resolves. Returns `{ id, url, title, webSocketDebuggerUrl, evalResult }`.
+ */
+export async function navigateToUrlPinned(url, {
+  verifyRemoteIp,
+  settleMs = 0,
+  navigateTimeoutMs = NAVIGATE_TIMEOUT_MS,
+  evaluateExpression = null,
+  evaluateTimeoutMs = CDP_EVALUATE_TIMEOUT_MS,
+} = {}) {
+  if (typeof verifyRemoteIp !== 'function') {
+    throw new Error('navigateToUrlPinned requires a verifyRemoteIp(ip) predicate');
+  }
+
+  // Open a BLANK tab first so Network listeners attach BEFORE the target URL is
+  // fetched — `/json/new?<url>` would navigate immediately and we'd miss the
+  // document request (and its remoteIPAddress).
+  const response = await cdpRequest('/json/new?about:blank', { method: 'PUT', timeout: navigateTimeoutMs });
+  if (!response.ok) {
+    const text = await response.text().catch(() => '');
+    throw new Error(`CDP open-blank failed (${response.status}): ${text}`);
+  }
+  const target = await readResponseJson(response, { fallback: null, emptyValue: null });
+  if (!target?.id || !target?.webSocketDebuggerUrl) {
+    throw new Error(`CDP open-blank returned a malformed response for ${url}`);
+  }
+
+  const READ_ID = 3;
+  const { default: WebSocket } = await import('ws');
+  const messages = [];
+  const result = await new Promise((resolve) => {
+    const ws = new WebSocket(target.webSocketDebuggerUrl);
+    let settled = false;
+    let phase = 'nav';
+    let overallTimer;
+    let settleTimer = null;
+    let evalTimer = null;
+    const finish = (value) => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(overallTimer);
+      clearTimeout(settleTimer);
+      clearTimeout(evalTimer);
+      try { ws.close(); } catch {}
+      resolve(value);
+    };
+    // Overall cap: fail closed if the FIRST document response never arrives.
+    overallTimer = setTimeout(
+      () => finish({ ok: false, reason: 'navigation timed out before the document response' }),
+      navigateTimeoutMs,
+    );
+
+    // Settle expired: verify everything captured so far, then either read the DOM
+    // on THIS same session (so no monitoring gap) or resolve for a separate read.
+    const onSettleEnd = () => {
+      const bad = ssrfPinRefusalReason(messages, verifyRemoteIp, url);
+      if (bad) return finish({ ok: false, reason: bad });
+      if (!evaluateExpression) {
+        const { finalUrl } = pickMainFrameHops(messages);
+        return finish({ ok: true, finalUrl, evalResult: null });
+      }
+      phase = 'read';
+      evalTimer = setTimeout(() => finish({ ok: false, reason: 'DOM read timed out' }), evaluateTimeoutMs);
+      ws.send(JSON.stringify({
+        id: READ_ID,
+        method: 'Runtime.evaluate',
+        params: { expression: evaluateExpression, returnByValue: true, awaitPromise: true },
+      }));
+    };
+
+    ws.on('open', () => {
+      ws.send(JSON.stringify({ id: 1, method: 'Network.enable' }));
+      ws.send(JSON.stringify({ id: 2, method: 'Page.navigate', params: { url } }));
+    });
+    ws.on('message', (data) => {
+      const msg = safeJSONParse(data.toString(), null, { context: 'cdp-pin' });
+      if (!msg) return;
+      // A Page.navigate Chrome rejects outright (bad scheme, etc.) errors on id 2.
+      if (msg.id === 2 && msg.error) return finish({ ok: false, reason: msg.error.message || 'navigate rejected' });
+      if (msg.id === READ_ID) {
+        // DOM read returned. RE-verify over ALL events captured up to now: any
+        // top-level navigation that committed during the read is in `messages`,
+        // so a late rebind that changed the page under us fails closed here.
+        const bad = ssrfPinRefusalReason(messages, verifyRemoteIp, url);
+        if (bad) return finish({ ok: false, reason: bad });
+        const evalResult = (msg.error || msg.result?.exceptionDetails) ? null : (msg.result?.result?.value ?? null);
+        const { finalUrl } = pickMainFrameHops(messages);
+        return finish({ ok: true, finalUrl, evalResult });
+      }
+      if (!msg.method) return;
+      messages.push(msg);
+      // First main-frame document RESPONSE (type 'Document', emitted before any
+      // sub-frame doc) starts the settle window; keep capturing across it so a
+      // client-side navigation during settle is pinned too.
+      if (phase === 'nav' && msg.method === 'Network.responseReceived' && msg.params?.type === 'Document' && !settleTimer) {
+        clearTimeout(overallTimer);
+        settleTimer = setTimeout(onSettleEnd, settleMs);
+      }
+    });
+    ws.on('error', () => finish({ ok: false, reason: 'CDP websocket error during navigation' }));
+  });
+
+  if (!result.ok) {
+    await closeCdpPage(target.id);
+    throw new Error(`refusing to ingest: ${result.reason}`);
+  }
+
+  return {
+    id: target.id,
+    url: result.finalUrl || url,
+    title: '',
+    webSocketDebuggerUrl: target.webSocketDebuggerUrl,
+    evalResult: result.evalResult,
+  };
+}
+
 // ---------- CDP page listing (UI-shaped subset) ----------
 
 export async function getOpenPages() {
diff --git a/server/services/browserService.test.js b/server/services/browserService.test.js
index 56bd987e6..84d8fd46f 100644
--- a/server/services/browserService.test.js
+++ b/server/services/browserService.test.js
@@ -55,3 +55,201 @@ describe('browserService config persistence', () => {
     expect(reloaded.headless).toBe(false);
   });
 });
+
+describe('pickMainFrameHops (SSRF pin — main-frame connection IPs)', () => {
+  // Pure helper: no data-root proxy needed, import the real module directly.
+  let pickMainFrameHops;
+  beforeEach(async () => {
+    vi.resetModules();
+    ({ pickMainFrameHops } = await import('./browserService.js'));
+  });
+
+  // A main-document navigation: requestId === loaderId marks the top frame.
+  const docRequest = (requestId, url, remoteIPAddress, redirectResponse) => ({
+    method: 'Network.requestWillBeSent',
+    params: { requestId, loaderId: requestId, type: 'Document', request: { url }, ...(redirectResponse ? { redirectResponse } : {}) },
+  });
+  const docResponse = (requestId, url, remoteIPAddress) => ({
+    method: 'Network.responseReceived',
+    params: { requestId, type: 'Document', response: { url, remoteIPAddress, status: 200 } },
+  });
+
+  it('captures the single-hop main document response IP', () => {
+    const { hops, finalUrl, mainRequestIds } = pickMainFrameHops([
+      docRequest('R1', 'https://ex.com/a', ''),
+      docResponse('R1', 'https://ex.com/a', '93.184.216.34'),
+    ]);
+    expect(mainRequestIds).toEqual(['R1']);
+    expect(finalUrl).toBe('https://ex.com/a');
+    expect(hops).toEqual([{ url: 'https://ex.com/a', remoteIPAddress: '93.184.216.34', status: 200 }]);
+  });
+
+  it('captures EVERY redirect hop IP plus the final response (per-hop pin)', () => {
+    const { hops } = pickMainFrameHops([
+      docRequest('R1', 'https://ex.com/a', ''),
+      // redirect: the response that caused the redirect rides on the NEXT request
+      docRequest('R1', 'http://127.0.0.1:5555/secret', '', { url: 'https://ex.com/a', remoteIPAddress: '93.184.216.34', status: 302 }),
+      docResponse('R1', 'http://127.0.0.1:5555/secret', '127.0.0.1'),
+    ]);
+    expect(hops.map((h) => h.remoteIPAddress)).toEqual(['93.184.216.34', '127.0.0.1']);
+  });
+
+  it('captures a SECOND top-level navigation (client-side nav during settle)', () => {
+    // A page that loads clean (R1 → public), then location.replace()s to a new
+    // top-level document (R2, a fresh requestId===loaderId) Chrome dials at
+    // metadata during the settle window. Both main-frame loads must be captured.
+    const { hops, finalUrl, mainRequestIds } = pickMainFrameHops([
+      docRequest('R1', 'https://ex.com/a', ''),
+      docResponse('R1', 'https://ex.com/a', '93.184.216.34'),
+      docRequest('R2', 'https://evil.example/x', ''),
+      docResponse('R2', 'https://evil.example/x', '169.254.169.254'),
+    ]);
+    expect(mainRequestIds).toEqual(['R1', 'R2']);
+    expect(hops.map((h) => h.remoteIPAddress)).toEqual(['93.184.216.34', '169.254.169.254']);
+    expect(finalUrl).toBe('https://evil.example/x');
+  });
+
+  it('ignores sub-resource requests (requestId !== loaderId)', () => {
+    const { hops, mainRequestIds } = pickMainFrameHops([
+      docRequest('R1', 'https://ex.com/a', ''),
+      // A sub-resource: different requestId/loaderId, type Image — must be excluded.
+      { method: 'Network.requestWillBeSent', params: { requestId: 'R2', loaderId: 'R1', type: 'Image', request: { url: 'http://169.254.169.254/latest' } } },
+      { method: 'Network.responseReceived', params: { requestId: 'R2', type: 'Image', response: { url: 'http://169.254.169.254/latest', remoteIPAddress: '169.254.169.254', status: 200 } } },
+      docResponse('R1', 'https://ex.com/a', '93.184.216.34'),
+    ]);
+    expect(mainRequestIds).toEqual(['R1']);
+    expect(hops.map((h) => h.remoteIPAddress)).toEqual(['93.184.216.34']);
+  });
+
+  it('flags a top-level navigation that started but has no response yet (in-flight → pending)', () => {
+    // R1 completed clean; R2 (a client-side nav) STARTED during settle but the
+    // socket closed before its responseReceived — its final IP is unverified, so
+    // the caller must fail closed rather than read a possibly-private page.
+    const { hops, mainRequestIds, pendingMainRequestIds } = pickMainFrameHops([
+      docRequest('R1', 'https://ex.com/a', ''),
+      docResponse('R1', 'https://ex.com/a', '93.184.216.34'),
+      docRequest('R2', 'https://evil.example/x', ''),
+    ]);
+    expect(mainRequestIds).toEqual(['R1', 'R2']);
+    expect(pendingMainRequestIds).toEqual(['R2']);
+    // R2 contributed no hop (no response captured), so its IP was never checked.
+    expect(hops.map((h) => h.remoteIPAddress)).toEqual(['93.184.216.34']);
+  });
+
+  it('returns no hops when no main-frame document load is present', () => {
+    const { hops, mainRequestIds, finalUrl } = pickMainFrameHops([
+      { method: 'Network.requestWillBeSent', params: { requestId: 'R2', loaderId: 'R1', type: 'Image', request: { url: 'https://cdn/x.png' } } },
+    ]);
+    expect(mainRequestIds).toEqual([]);
+    expect(hops).toEqual([]);
+    expect(finalUrl).toBeNull();
+  });
+});
+
+describe('ssrfPinRefusalReason (SSRF pin gate)', () => {
+  let ssrfPinRefusalReason;
+  beforeEach(async () => {
+    vi.resetModules();
+    ({ ssrfPinRefusalReason } = await import('./browserService.js'));
+  });
+
+  const allow = (ip) => !ip.startsWith('127.') && !ip.startsWith('169.254.');
+  const docRequest = (requestId, url, redirectResponse) => ({
+    method: 'Network.requestWillBeSent',
+    params: { requestId, loaderId: requestId, type: 'Document', request: { url }, ...(redirectResponse ? { redirectResponse } : {}) },
+  });
+  const docResponse = (requestId, url, remoteIPAddress) => ({
+    method: 'Network.responseReceived',
+    params: { requestId, type: 'Document', response: { url, remoteIPAddress, status: 200 } },
+  });
+
+  it('passes (null) when every main-frame hop dialed an allowed IP', () => {
+    const reason = ssrfPinRefusalReason([
+      docRequest('R1', 'https://ex.com/a'),
+      docResponse('R1', 'https://ex.com/a', '93.184.216.34'),
+    ], allow, 'https://ex.com/a');
+    expect(reason).toBeNull();
+  });
+
+  it('refuses a hop that dialed a disallowed IP', () => {
+    const reason = ssrfPinRefusalReason([
+      docRequest('R1', 'http://127.0.0.1/x'),
+      docResponse('R1', 'http://127.0.0.1/x', '127.0.0.1'),
+    ], allow, 'http://127.0.0.1/x');
+    expect(reason).toMatch(/disallowed address 127\.0\.0\.1/);
+  });
+
+  it('refuses an in-flight top-level navigation (started, no response)', () => {
+    const reason = ssrfPinRefusalReason([
+      docRequest('R1', 'https://ex.com/a'),
+      docResponse('R1', 'https://ex.com/a', '93.184.216.34'),
+      docRequest('R2', 'https://evil.example/x'),
+    ], allow, 'https://ex.com/a');
+    expect(reason).toMatch(/still in flight/);
+  });
+
+  it('refuses when no main-frame document response was observed', () => {
+    expect(ssrfPinRefusalReason([], allow, 'https://ex.com/a')).toMatch(/no main-frame document response/);
+  });
+
+  it('refuses a main document with a missing/empty remote IP (unverifiable)', () => {
+    const reason = ssrfPinRefusalReason([
+      docRequest('R1', 'https://ex.com/a'),
+      docResponse('R1', 'https://ex.com/a', ''),
+    ], allow, 'https://ex.com/a');
+    expect(reason).toMatch(/unverifiable address/);
+  });
+
+  it('refuses a SUB-RESOURCE / fetch that dialed a blocked IP (rebind after page load)', () => {
+    // Main doc loads clean from public, then the page fetch()es its now-private-
+    // resolving hostname (a subresource, type XHR). Its real IP must be checked.
+    const reason = ssrfPinRefusalReason([
+      docRequest('R1', 'https://ex.com/a'),
+      docResponse('R1', 'https://ex.com/a', '93.184.216.34'),
+      { method: 'Network.responseReceived', params: { requestId: 'R2', type: 'XHR', response: { url: 'https://ex.com/latest/meta-data', remoteIPAddress: '169.254.169.254', status: 200 } } },
+    ], allow, 'https://ex.com/a');
+    expect(reason).toMatch(/disallowed address 169\.254\.169\.254/);
+  });
+
+  it('ignores sub-resources with an empty remote IP (data:/blob:/cache — no connection)', () => {
+    const reason = ssrfPinRefusalReason([
+      docRequest('R1', 'https://ex.com/a'),
+      docResponse('R1', 'https://ex.com/a', '93.184.216.34'),
+      { method: 'Network.responseReceived', params: { requestId: 'R2', type: 'Image', response: { url: 'data:image/png;base64,AAAA', remoteIPAddress: '', status: 200 } } },
+    ], allow, 'https://ex.com/a');
+    expect(reason).toBeNull();
+  });
+
+  it('allows an RFC1918 LAN sub-resource (only loopback/link-local/metadata are blocked)', () => {
+    // isBlockedIngestHost does NOT block 192.168/10/172.16 — LAN pages stay ingestible.
+    const lanAllow = (ip) => !ip.startsWith('127.') && !ip.startsWith('169.254.');
+    const reason = ssrfPinRefusalReason([
+      docRequest('R1', 'https://wiki.lan/a'),
+      docResponse('R1', 'https://wiki.lan/a', '192.168.1.10'),
+      { method: 'Network.responseReceived', params: { requestId: 'R2', type: 'Script', response: { url: 'https://wiki.lan/app.js', remoteIPAddress: '192.168.1.10', status: 200 } } },
+    ], lanAllow, 'https://wiki.lan/a');
+    expect(reason).toBeNull();
+  });
+
+  it('refuses a WebSocket opened to a blocked host literal (ws:// to loopback/localhost)', () => {
+    // CDP gives WS no remoteIPAddress, so we gate on the WS host — this catches a
+    // direct ws://localhost / ws://127.0.0.1 (host-level, not IP-level, check).
+    const hostAllow = (h) => h !== 'localhost' && !h.startsWith('127.') && h !== '::1';
+    const reason = ssrfPinRefusalReason([
+      docRequest('R1', 'https://ex.com/a'),
+      docResponse('R1', 'https://ex.com/a', '93.184.216.34'),
+      { method: 'Network.webSocketCreated', params: { requestId: 'W1', url: 'ws://localhost:9222/devtools' } },
+    ], hostAllow, 'https://ex.com/a');
+    expect(reason).toMatch(/WebSocket to a disallowed host localhost/);
+  });
+
+  it('allows a WebSocket to a normal public host', () => {
+    const hostAllow = (h) => h !== 'localhost' && !h.startsWith('127.');
+    const reason = ssrfPinRefusalReason([
+      docRequest('R1', 'https://ex.com/a'),
+      docResponse('R1', 'https://ex.com/a', '93.184.216.34'),
+      { method: 'Network.webSocketCreated', params: { requestId: 'W1', url: 'wss://realtime.example.com/socket' } },
+    ], hostAllow, 'https://ex.com/a');
+    expect(reason).toBeNull();
+  });
+});
diff --git a/server/services/calendarGoogleApiSync.js b/server/services/calendarGoogleApiSync.js
index 11d7f19ae..aaae0a917 100644
--- a/server/services/calendarGoogleApiSync.js
+++ b/server/services/calendarGoogleApiSync.js
@@ -48,7 +48,10 @@ export async function apiSyncAccount(accountId, io) {
         end: item.end,
         location: item.location || '',
         description: item.description || '',
-        status: item.status || 'confirmed'
+        status: item.status || 'confirmed',
+        // Attendee/organizer identities feed Tribe touchpoint auto-logging (#2033).
+        organizer: item.organizer || null,
+        attendees: item.attendees || []
       })));
       pageToken = response.data.nextPageToken;
     } while (pageToken);
diff --git a/server/services/calendarGoogleSync.js b/server/services/calendarGoogleSync.js
index 998323b1b..079bd41a7 100644
--- a/server/services/calendarGoogleSync.js
+++ b/server/services/calendarGoogleSync.js
@@ -1,7 +1,7 @@
 import { v4 as uuidv4 } from '../lib/uuid.js';
 import { createHash } from 'crypto';
 import { getAccount, updateSyncStatus, updateSubcalendars, mergeDiscoveredSubcalendars } from './calendarAccounts.js';
-import { loadCache, saveCache } from './calendarSync.js';
+import { loadCache, saveCache, logCalendarTouchpoints } from './calendarSync.js';
 import { getAllProviders } from './providers.js';
 import { getSettings } from './settings.js';
 import { pickCliProvider, runCliProviderPrompt } from '../lib/cliProviderRun.js';
@@ -26,6 +26,18 @@ export function normalizeGoogleEvent(event, subcalendarId, subcalendarName) {
   const endDate = event.end?.date;
   const isAllDay = !startDateTime && !!startDate;
 
+  // Normalize organizer/attendees to the shared { name, email } shape used by
+  // the Outlook path so Tribe touchpoint matching (#2033) works uniformly. The
+  // "self" attendee's responseStatus is surfaced as myStatus for the
+  // declined-event filter.
+  const attendees = (event.attendees || []).map((a) => ({
+    name: a.displayName || '',
+    email: a.email || '',
+    status: a.responseStatus || '',
+  }));
+  const self = (event.attendees || []).find((a) => a.self);
+  const myStatus = self?.responseStatus === 'declined' ? 'declined' : undefined;
+
   return {
     id: uuidv4(),
     externalId: `gcal-${md5(event.id || uuidv4())}`,
@@ -37,6 +49,11 @@ export function normalizeGoogleEvent(event, subcalendarId, subcalendarName) {
     endTime: endDateTime || (endDate ? `${endDate}T00:00:00` : null),
     isAllDay,
     isCancelled: event.status === 'cancelled',
+    organizer: event.organizer
+      ? { name: event.organizer.displayName || '', email: event.organizer.email || '' }
+      : null,
+    attendees,
+    myStatus,
     subcalendarId,
     subcalendarName,
     source: 'google-calendar',
@@ -84,6 +101,12 @@ export async function pushSyncEvents(accountId, calendarId, calendarName, rawEve
       existing.endTime = event.endTime;
       existing.isAllDay = event.isAllDay;
       existing.isCancelled = event.isCancelled;
+      // Refresh the identity fields too so an event already in cache gains
+      // organizer/attendees for Tribe touchpoint matching and an up-to-date
+      // declined status (#2033) — not just newly-added events.
+      existing.organizer = event.organizer;
+      existing.attendees = event.attendees;
+      existing.myStatus = event.myStatus;
       existing.syncedAt = event.syncedAt;
       updatedCount++;
     } else {
@@ -102,6 +125,11 @@ export async function pushSyncEvents(accountId, calendarId, calendarName, rawEve
   await saveCache(accountId, cache);
   await updateSyncStatus(accountId, 'success');
 
+  // Auto-log Tribe touchpoints from this subcalendar batch (#2033) — secondary
+  // effect, must not fail the sync; idempotent on event id.
+  await logCalendarTouchpoints(accountId, normalized).catch((err) =>
+    console.error(`🤝 Tribe auto-log failed for account ${accountId}: ${err.message}`));
+
   io?.emit('calendar:sync:completed', {
     accountId,
     calendarId,
diff --git a/server/services/calendarSync.js b/server/services/calendarSync.js
index b87c42d32..b9c62ce76 100644
--- a/server/services/calendarSync.js
+++ b/server/services/calendarSync.js
@@ -190,6 +190,7 @@ export async function syncAccount(accountId, io, options = {}) {
         if (event.endTime !== undefined) existing.endTime = event.endTime;
         if (event.isAllDay !== undefined) existing.isAllDay = event.isAllDay;
         if (event.isCancelled !== undefined) existing.isCancelled = event.isCancelled;
+        if (event.organizer !== undefined) existing.organizer = event.organizer;
         if (event.attendees !== undefined) existing.attendees = event.attendees;
         if (event.myStatus !== undefined) existing.myStatus = event.myStatus;
         if (event.categories !== undefined) existing.categories = event.categories;
@@ -211,6 +212,11 @@ export async function syncAccount(accountId, io, options = {}) {
     await saveCache(accountId, cache);
     await updateSyncStatus(accountId, providerStatus === 'success' ? 'success' : providerStatus);
 
+    // Auto-log Tribe touchpoints from this batch (secondary effect — must not
+    // fail the sync). Idempotent on event id, so re-processing fetched events is safe.
+    await logCalendarTouchpoints(accountId, newEvents).catch((err) =>
+      console.error(`🤝 Tribe auto-log failed for account ${accountId}: ${err.message}`));
+
     io?.emit('calendar:sync:completed', { accountId, newEvents: uniqueNew.length, pruned, status: providerStatus });
     console.log(`📅 Sync complete for ${account.name}: ${uniqueNew.length} new, ${pruned} pruned, status=${providerStatus}`);
 
@@ -238,3 +244,52 @@ export async function getSyncStatus(accountId) {
     lastSyncStatus: account.lastSyncStatus
   };
 }
+
+// Auto-log Tribe touchpoints for synced calendar events (#2033). Deterministic:
+// an event's organizer/attendees are matched to tracked people by email/handle
+// (or unique exact name) and one touchpoint per person is logged, idempotent on
+// the event id so re-syncs never double-log. Only events that have already
+// happened (start/end <= now) and weren't declined/cancelled count as contact.
+// Called from both the Outlook (syncAccount) and Google (pushSyncEvents) paths;
+// a no-op when nothing is tracked. Tribe is imported dynamically to avoid a
+// static import cycle (tribe.js → calendarSync.js).
+export async function logCalendarTouchpoints(accountId, events = []) {
+  const now = Date.now();
+  const candidates = [];
+  for (const event of events) {
+    if (event.isCancelled || event.myStatus === 'declined') continue;
+    const startedAt = event.startTime || event.endTime;
+    if (!startedAt) continue;
+    // Gate on the event's END (completion), not its start: an in-progress or
+    // all-day event isn't a finished contact until it ends.
+    const completedAt = event.endTime || event.startTime;
+    if (safeDate(completedAt) > now) continue; // not finished yet
+    const identities = [event.organizer, ...(event.attendees || [])].filter(Boolean);
+    if (identities.length === 0) continue;
+    const eventKey = event.externalId || event.id;
+    if (!eventKey) continue;
+    candidates.push({
+      identities,
+      source: 'calendar',
+      happenedAt: startedAt,
+      channel: event.location || 'Calendar',
+      summary: event.title || 'Calendar touchpoint',
+      dedupeKey: `cal:${accountId}:${eventKey}`,
+      calendarAccountId: accountId,
+      calendarEventId: eventKey,
+      metadata: {
+        title: event.title,
+        location: event.location,
+        startTime: event.startTime,
+        endTime: event.endTime,
+      },
+    });
+  }
+  if (candidates.length === 0) return { created: 0, matched: 0 };
+  const tribe = await import('./tribe.js');
+  const result = await tribe.autoLogTouchpoints(candidates);
+  if (result.created > 0) {
+    console.log(`🤝 Auto-logged ${result.created} calendar touchpoint(s) for account ${accountId}`);
+  }
+  return result;
+}
diff --git a/server/services/calendarSync.test.js b/server/services/calendarSync.test.js
index bcffb8919..d6ff1d173 100644
--- a/server/services/calendarSync.test.js
+++ b/server/services/calendarSync.test.js
@@ -16,7 +16,14 @@ vi.mock('./googleAuth.js', () => ({
   getAuthenticatedClient: vi.fn(async () => null),
 }));
 
-import { syncAccount } from './calendarSync.js';
+// tribe.js is loaded dynamically by logCalendarTouchpoints; mock it so the
+// producer test asserts the candidates without a live Postgres.
+vi.mock('./tribe.js', () => ({
+  autoLogTouchpoints: vi.fn().mockResolvedValue({ created: 0, matched: 0 }),
+}));
+
+import { syncAccount, logCalendarTouchpoints } from './calendarSync.js';
+import { autoLogTouchpoints } from './tribe.js';
 import { mcpSyncAccount, mcpDiscoverCalendars } from './calendarGoogleSync.js';
 import { apiSyncAccount, apiDiscoverCalendars } from './calendarGoogleApiSync.js';
 import { getAccount } from './calendarAccounts.js';
@@ -80,3 +87,47 @@ describe('calendar sync services throw ServerError with the documented statuses'
     });
   });
 });
+
+describe('logCalendarTouchpoints — candidate building (#2033)', () => {
+  const PAST = '2020-01-01T10:00:00Z';
+  const FUTURE = new Date(Date.now() + 7 * 86400000).toISOString();
+
+  beforeEach(() => {
+    autoLogTouchpoints.mockClear();
+    autoLogTouchpoints.mockResolvedValue({ created: 1, matched: 1 });
+  });
+
+  it('builds a calendar candidate with a stable per-event dedupe key', async () => {
+    await logCalendarTouchpoints(ACCOUNT_ID, [{
+      externalId: 'evt-1',
+      title: 'Coffee with Ada',
+      location: 'Cafe',
+      startTime: PAST,
+      organizer: { name: 'Ada', email: 'ada@work.com' },
+      attendees: [{ name: 'Me', email: 'me@x.com' }],
+    }]);
+
+    expect(autoLogTouchpoints).toHaveBeenCalledTimes(1);
+    const [candidates] = autoLogTouchpoints.mock.calls[0];
+    expect(candidates).toHaveLength(1);
+    expect(candidates[0]).toMatchObject({
+      source: 'calendar',
+      dedupeKey: `cal:${ACCOUNT_ID}:evt-1`,
+      calendarEventId: 'evt-1',
+      happenedAt: PAST,
+      summary: 'Coffee with Ada',
+    });
+    expect(candidates[0].identities).toHaveLength(2);
+  });
+
+  it('skips future, cancelled, declined, and attendee-less events', async () => {
+    await logCalendarTouchpoints(ACCOUNT_ID, [
+      { externalId: 'future', startTime: FUTURE, attendees: [{ email: 'ada@work.com' }] },
+      { externalId: 'cancelled', startTime: PAST, isCancelled: true, attendees: [{ email: 'ada@work.com' }] },
+      { externalId: 'declined', startTime: PAST, myStatus: 'declined', attendees: [{ email: 'ada@work.com' }] },
+      { externalId: 'empty', startTime: PAST, attendees: [] },
+    ]);
+    // All four filtered out → producer never calls the logger.
+    expect(autoLogTouchpoints).not.toHaveBeenCalled();
+  });
+});
diff --git a/server/services/catalogIngestSources.js b/server/services/catalogIngestSources.js
index 9fe0b60f7..acc36d9c2 100644
--- a/server/services/catalogIngestSources.js
+++ b/server/services/catalogIngestSources.js
@@ -31,12 +31,10 @@ import * as brainStorage from './brainStorage.js';
 import { extractIngredientsForScrap } from './catalogExtraction.js';
 import { transcribe } from './voice/stt.js';
 import {
-  navigateToUrl,
-  listCdpPages,
-  evaluateOnPage,
+  navigateToUrlPinned,
 } from './browserService.js';
 import { lookup } from 'dns/promises';
-import { PATHS, ensureDir, sleep, safeJSONParse } from '../lib/fileUtils.js';
+import { PATHS, ensureDir, safeJSONParse } from '../lib/fileUtils.js';
 import { isSafeIngestUrl, isBlockedIngestHost } from '../lib/catalogValidation.js';
 
 // Cap fetched/transcribed bodies at the scrap column boundary (the Zod
@@ -98,45 +96,49 @@ async function assertIngestUrlSafe(target) {
  * resolve correctly — a bare `fetch()` would only see the server-rendered
  * HTML shell of an SPA.
  *
+ * SSRF pin: Chrome re-resolves DNS independently of our pre-check, so a rebinding
+ * DNS answer could steer Chrome's connection to a blocked address after
+ * `assertIngestUrlSafe` vetted the hostname (a TOCTOU). `navigateToUrlPinned`
+ * closes that window by verifying, against Chrome's OWN reported
+ * `remoteIPAddress`, that EVERY main-frame hop — the initial navigation, each
+ * HTTP redirect, AND any client-side navigation during the `settleMs` window
+ * before the DOM is read — connected to an allowed address, refusing (and
+ * tearing the tab down) otherwise. The `isBlockedIngestHost` blocklist is the
+ * SAME criterion `assertIngestUrlSafe` vets with, so the pin and the pre-check
+ * agree. The pin owns the settle wait, so there is no separate stale-DNS re-vet
+ * (which would itself be rebindable) after it returns.
+ *
  * Returns `{ text, title, finalUrl }`. Throws when the browser can't reach
  * the page or extracts nothing usable, so the route surfaces a clean 4xx/5xx.
  */
 export async function fetchUrlMainText(url, { settleMs = PAGE_SETTLE_MS } = {}) {
   await assertIngestUrlSafe(url);
 
-  // `navigateToUrl` opens a fresh tab at the exact URL and returns it; we drive
-  // and read that tab below. (Don't call findOrOpenPage first — it would open a
-  // SECOND, orphaned tab per ingest, since navigateToUrl never reuses one.)
-  const opened = await navigateToUrl(url);
-  await sleep(settleMs);
-
-  // Re-list to get the live webSocketDebuggerUrl for the tab we just drove.
-  // Match strictly by the id (then the exact url) navigateToUrl returned —
-  // never fall back to an arbitrary `pages[0]`, which could be an unrelated
-  // open tab and would ingest the wrong (possibly sensitive) page.
-  const pages = await listCdpPages();
-  const page = pages.find((p) => p.id === opened.id)
-    || pages.find((p) => p.url === opened.url);
-  if (!page) throw new Error('could not match the navigated tab after navigation (refusing to read an arbitrary tab)');
-
-  // Re-run the FULL gate (scheme + DNS) against the FINAL url before reading the
-  // DOM: a server-controlled redirect could have sent Chrome to a blocked
-  // target, or to a hostname that itself resolves to one. The first-hop gate
-  // doesn't cover the landed page.
-  const landedUrl = page.url || opened.url || url;
-  await assertIngestUrlSafe(landedUrl);
-
-  // Prefer the page's own <article>/<main> if present (skips nav/footer
-  // chrome), falling back to document body text. Runs in the page; returns a
-  // plain string so evaluateOnPage's returnByValue marshals it cleanly.
+  // Prefer the page's own <article>/<main> if present (skips nav/footer chrome),
+  // falling back to document body text. Runs in the page; returns a plain string
+  // so returnByValue marshals it cleanly.
   const expression = `(() => {
     const pick = document.querySelector('article') || document.querySelector('main') || document.body;
     const title = (document.title || '').trim();
     const text = (pick && pick.innerText ? pick.innerText : '').trim();
     return JSON.stringify({ title, text });
   })()`;
-  const raw = await evaluateOnPage(page, expression);
-  const parsed = raw ? safeJSONParse(raw, null) : null;
+
+  // Navigate in a fresh tab and PIN: verify Chrome's actual per-hop connection
+  // IP is not a blocked (loopback / link-local / metadata) address for the
+  // initial nav, every redirect, and any client-side nav during the settle
+  // window — closing the rebinding gap between our dns.lookup above and Chrome's
+  // own resolution. The DOM read runs on the SAME pinned CDP session (via
+  // evaluateExpression), re-verified after the read, so no late navigation slips
+  // between "stop monitoring" and "read". Fails closed (tab torn down, throws)
+  // on any disallowed hop.
+  const page = await navigateToUrlPinned(url, {
+    verifyRemoteIp: (ip) => !isBlockedIngestHost(ip),
+    settleMs,
+    evaluateExpression: expression,
+  });
+
+  const parsed = page.evalResult ? safeJSONParse(page.evalResult, null) : null;
   const text = clampText(parsed?.text || '');
   if (!text.trim()) throw new Error('no readable text extracted from page');
   return { text, title: parsed?.title || page.title || '', finalUrl: page.url || url };
diff --git a/server/services/catalogIngestSources.test.js b/server/services/catalogIngestSources.test.js
index 46ea9dd84..fe2262584 100644
--- a/server/services/catalogIngestSources.test.js
+++ b/server/services/catalogIngestSources.test.js
@@ -32,9 +32,7 @@ vi.mock('./voice/stt.js', () => ({
   transcribe: vi.fn(),
 }));
 vi.mock('./browserService.js', () => ({
-  navigateToUrl: vi.fn(),
-  listCdpPages: vi.fn(),
-  evaluateOnPage: vi.fn(),
+  navigateToUrlPinned: vi.fn(),
 }));
 vi.mock('fs/promises', () => ({
   writeFile: vi.fn(),
@@ -78,26 +76,53 @@ beforeEach(() => {
   catalogDB.createChunkedScrap.mockImplementation(async (args) => ({ id: 'cat-scrap-1', ...args }));
   // Hostnames resolve to a safe public address by default (the DNS SSRF guard).
   dnsp.lookup.mockResolvedValue({ address: '93.184.216.34', family: 4 });
+  // Default: Chrome dials a single public IP for the document (no rebind), and
+  // the pinned DOM read returns a simple article.
+  browserService.navigateToUrlPinned.mockImplementation(pinnedNav({
+    finalUrl: 'https://ex.com/a',
+    hops: ['93.184.216.34'],
+    evalResult: JSON.stringify({ title: 'Article A', text: 'Body text here.' }),
+  }));
 });
 
+/**
+ * Faithfully mimic the real `navigateToUrlPinned` fail-closed contract: it
+ * verifies EVERY main-frame hop's ACTUAL Chrome-reported connection IP (the
+ * initial nav, each redirect, and any client-side navigation during the settle
+ * window) via the caller's `verifyRemoteIp` predicate, and throws (tearing the
+ * tab down) if any hop is refused. `hops` are the IPs Chrome actually dialed — a
+ * rebinding DNS answer surfaces here as a private IP the pre-nav dns.lookup never
+ * saw. On success it returns the DOM-read result (`evalResult`) it performed on
+ * the SAME pinned session — the real function reads the DOM itself, so no
+ * separate read is mocked. It owns the settle wait, so it ignores `settleMs`.
+ */
+function pinnedNav({ finalUrl, hops, evalResult = null }) {
+  return async (url, { verifyRemoteIp } = {}) => {
+    for (const ip of hops) {
+      if (!verifyRemoteIp(ip)) {
+        throw new Error(`refusing to ingest: Chrome connected to a disallowed address ${ip} for ${url}`);
+      }
+    }
+    return { id: 'p1', url: finalUrl || url, title: '', webSocketDebuggerUrl: 'ws://x', evalResult };
+  };
+}
+
 describe('fetchUrlMainText', () => {
   it('navigates + reads main text, returning title + text + finalUrl', async () => {
-    browserService.navigateToUrl.mockResolvedValue({ id: 'p1', url: 'https://ex.com/a' });
-    browserService.listCdpPages.mockResolvedValue([
-      { id: 'p1', url: 'https://ex.com/a', title: 'A', webSocketDebuggerUrl: 'ws://x' },
-    ]);
-    browserService.evaluateOnPage.mockResolvedValue(JSON.stringify({ title: 'Article A', text: 'Body text here.' }));
-
     const out = await fetchUrlMainText('https://ex.com/a', { settleMs: 0 });
     expect(out).toEqual({ text: 'Body text here.', title: 'Article A', finalUrl: 'https://ex.com/a' });
-    expect(browserService.navigateToUrl).toHaveBeenCalledWith('https://ex.com/a');
+    // Navigated through the PINNED path with a remote-IP verifier predicate AND
+    // the DOM-read expression (the read happens on the same pinned session).
+    expect(browserService.navigateToUrlPinned).toHaveBeenCalledWith(
+      'https://ex.com/a',
+      expect.objectContaining({ verifyRemoteIp: expect.any(Function), evaluateExpression: expect.any(String) }),
+    );
   });
 
   it('throws when the page extracts no readable text', async () => {
-    browserService.navigateToUrl.mockResolvedValue({ id: 'p1', url: 'https://ex.com/a' });
-    browserService.listCdpPages.mockResolvedValue([{ id: 'p1', url: 'https://ex.com/a', title: '', webSocketDebuggerUrl: 'ws://x' }]);
-    browserService.evaluateOnPage.mockResolvedValue(JSON.stringify({ title: '', text: '   ' }));
-
+    browserService.navigateToUrlPinned.mockImplementation(pinnedNav({
+      finalUrl: 'https://ex.com/a', hops: ['93.184.216.34'], evalResult: JSON.stringify({ title: '', text: '   ' }),
+    }));
     await expect(fetchUrlMainText('https://ex.com/a', { settleMs: 0 })).rejects.toThrow(/no readable text/);
     expect(catalogDB.createChunkedScrap).not.toHaveBeenCalled();
   });
@@ -106,34 +131,40 @@ describe('fetchUrlMainText', () => {
     // Schema passes (it's a normal hostname), but DNS points it at cloud metadata.
     dnsp.lookup.mockResolvedValue({ address: '169.254.169.254', family: 4 });
     await expect(fetchUrlMainText('https://evil.example/x', { settleMs: 0 })).rejects.toThrow(/resolves to a blocked/);
-    expect(browserService.navigateToUrl).not.toHaveBeenCalled();
+    expect(browserService.navigateToUrlPinned).not.toHaveBeenCalled();
+  });
+
+  it('refuses when Chrome connects to a private IP AFTER DNS validation passed (rebinding TOCTOU)', async () => {
+    // Pre-nav dns.lookup answers a public IP so assertIngestUrlSafe passes — but
+    // Chrome re-resolves and actually dials cloud metadata. The remote-IP pin
+    // catches Chrome's real connection and refuses (throws) before any text is read.
+    dnsp.lookup.mockResolvedValue({ address: '93.184.216.34', family: 4 });
+    browserService.navigateToUrlPinned.mockImplementation(pinnedNav({ finalUrl: 'https://evil.example/x', hops: ['169.254.169.254'] }));
+    await expect(fetchUrlMainText('https://evil.example/x', { settleMs: 0 })).rejects.toThrow(/disallowed address 169\.254\.169\.254/);
+    expect(catalogDB.createChunkedScrap).not.toHaveBeenCalled();
   });
 
-  it('refuses to ingest a redirect that lands on a blocked (loopback) host', async () => {
-    browserService.navigateToUrl.mockResolvedValue({ id: 'p1', url: 'https://ex.com/a' });
-    // The first-hop URL passed the schema guard, but Chrome followed a redirect
-    // to a loopback target — the landed page.url is what we must re-check.
-    browserService.listCdpPages.mockResolvedValue([{ id: 'p1', url: 'http://127.0.0.1:5555/secret', title: 'x', webSocketDebuggerUrl: 'ws://x' }]);
-    await expect(fetchUrlMainText('https://ex.com/a', { settleMs: 0 })).rejects.toThrow(/loopback|link-local/);
-    expect(browserService.evaluateOnPage).not.toHaveBeenCalled();
+  it('refuses when a REDIRECT hop connects to a loopback address (per-hop pin)', async () => {
+    // First hop dials a public IP, but the redirect Chrome followed landed on a
+    // loopback address — the pin verifies EVERY main-frame hop, not just the last.
+    browserService.navigateToUrlPinned.mockImplementation(pinnedNav({ finalUrl: 'http://127.0.0.1:5555/secret', hops: ['93.184.216.34', '127.0.0.1'] }));
+    await expect(fetchUrlMainText('https://ex.com/a', { settleMs: 0 })).rejects.toThrow(/disallowed address 127\.0\.0\.1/);
   });
 
-  it('refuses a redirect to a HOSTNAME that resolves to a blocked address (DNS re-check on landed url)', async () => {
-    // First hop resolves safe; the landed redirect host resolves to metadata.
-    dnsp.lookup
-      .mockResolvedValueOnce({ address: '93.184.216.34', family: 4 })
-      .mockResolvedValueOnce({ address: '169.254.169.254', family: 4 });
-    browserService.navigateToUrl.mockResolvedValue({ id: 'p1', url: 'https://ex.com/a' });
-    browserService.listCdpPages.mockResolvedValue([{ id: 'p1', url: 'https://evil.example/x', title: 'x', webSocketDebuggerUrl: 'ws://x' }]);
-    await expect(fetchUrlMainText('https://ex.com/a', { settleMs: 0 })).rejects.toThrow(/resolves to a blocked/);
-    expect(browserService.evaluateOnPage).not.toHaveBeenCalled();
+  it('refuses a CLIENT-SIDE navigation during the settle window that dials metadata', async () => {
+    // Pin passes the initial public hop, but the page meta-refreshes /
+    // location.replaces during the settle window to a host Chrome dials at cloud
+    // metadata. Because the pin stays active through settle, that later hop's real
+    // IP is verified too — no stale-DNS re-vet that a rebind could slip past.
+    browserService.navigateToUrlPinned.mockImplementation(pinnedNav({ finalUrl: 'https://evil.example/x', hops: ['93.184.216.34', '169.254.169.254'] }));
+    await expect(fetchUrlMainText('https://ex.com/a', { settleMs: 0 })).rejects.toThrow(/disallowed address 169\.254\.169\.254/);
   });
 
   it('clamps an oversized page body to the raw-text cap (2M chars)', async () => {
-    browserService.navigateToUrl.mockResolvedValue({ id: 'p1', url: 'https://ex.com/a' });
-    browserService.listCdpPages.mockResolvedValue([{ id: 'p1', url: 'https://ex.com/a', title: 'Big', webSocketDebuggerUrl: 'ws://x' }]);
     const huge = 'x'.repeat(2_500_000);
-    browserService.evaluateOnPage.mockResolvedValue(JSON.stringify({ title: 'Big', text: huge }));
+    browserService.navigateToUrlPinned.mockImplementation(pinnedNav({
+      finalUrl: 'https://ex.com/a', hops: ['93.184.216.34'], evalResult: JSON.stringify({ title: 'Big', text: huge }),
+    }));
     const out = await fetchUrlMainText('https://ex.com/a', { settleMs: 0 });
     expect(out.text.length).toBe(2_000_000);
   });
@@ -141,9 +172,9 @@ describe('fetchUrlMainText', () => {
 
 describe('ingestFromUrl', () => {
   it('creates a url scrap with url metadata and runs extraction', async () => {
-    browserService.navigateToUrl.mockResolvedValue({ id: 'p1', url: 'https://ex.com/a' });
-    browserService.listCdpPages.mockResolvedValue([{ id: 'p1', url: 'https://ex.com/a', title: 'A', webSocketDebuggerUrl: 'ws://x' }]);
-    browserService.evaluateOnPage.mockResolvedValue(JSON.stringify({ title: 'Article A', text: 'Body.' }));
+    browserService.navigateToUrlPinned.mockImplementation(pinnedNav({
+      finalUrl: 'https://ex.com/a', hops: ['93.184.216.34'], evalResult: JSON.stringify({ title: 'Article A', text: 'Body.' }),
+    }));
 
     const { scrap, draft } = await ingestFromUrl({ url: 'https://ex.com/a', settleMs: 0 });
     expect(draft).toBe(DRAFT);
diff --git a/server/services/catalogMedia.js b/server/services/catalogMedia.js
new file mode 100644
index 000000000..75ef339dd
--- /dev/null
+++ b/server/services/catalogMedia.js
@@ -0,0 +1,134 @@
+// Direct file-upload + voice-memo attachment for catalog ingredients.
+//
+// The existing `catalogIngestSources.ingestFromVoice` runs audio through the
+// scrap → LLM-extraction → review flow (it MINTS new ingredients). This module
+// is the other seam: take a file the user dropped/picked, or a memo they just
+// recorded, and attach it DIRECTLY to an ingredient that already exists.
+//
+// Bytes land in a peer-federating library dir (images/audio/videos) so the
+// `media_key` reference federates through catalogSync while the file itself
+// federates through peerMediaLibrarySync — the same two-layer path gallery
+// attachments already use. Nothing here calls hashImageForManifest; the library
+// replica hashes the file when it federates.
+
+import { randomUUID } from 'crypto';
+import { writeFile } from 'fs/promises';
+import { join } from 'path';
+import { ensureDir, PATHS } from '../lib/fileUtils.js';
+import { ServerError } from '../lib/errorHandler.js';
+import { getIngredient, attachMedia } from './catalogDB.js';
+import { saveUploadedGalleryImage } from './imageGen/local.js';
+import { transcribe } from './voice/stt.js';
+
+// media_key caption cap mirrors catalogMediaAttachSchema.caption (2 000 chars).
+const MAX_CAPTION = 2_000;
+
+// MIME → file extension for the non-image library dirs (images always normalize
+// to .png in saveUploadedGalleryImage). Unknown-but-recognized-category MIMEs
+// fall back to a sane container extension.
+const AUDIO_EXT = {
+  'audio/webm': 'webm', 'audio/ogg': 'ogg', 'audio/wav': 'wav', 'audio/x-wav': 'wav',
+  'audio/wave': 'wav', 'audio/mpeg': 'mp3', 'audio/mp3': 'mp3', 'audio/mp4': 'm4a', 'audio/aac': 'm4a',
+};
+const VIDEO_EXT = {
+  'video/mp4': 'mp4', 'video/webm': 'webm', 'video/quicktime': 'mov', 'video/ogg': 'ogv',
+};
+
+/**
+ * Classify a browser-reported MIME into the media library it belongs in. Pure —
+ * unit-tested. Strips any `;codecs=…` parameter first. Returns
+ * `{ category, kind, ext }` or `null` for a MIME we don't federate (documents
+ * have no library dir yet, so attaching one would break references on peers).
+ */
+export function classifyUploadMime(mimeType) {
+  const mime = (mimeType || '').toLowerCase().split(';')[0].trim();
+  if (mime.startsWith('image/')) return { category: 'image', kind: 'reference', ext: 'png' };
+  if (mime.startsWith('audio/')) return { category: 'audio', kind: 'audio', ext: AUDIO_EXT[mime] || 'webm' };
+  if (mime.startsWith('video/')) return { category: 'video', kind: 'video', ext: VIDEO_EXT[mime] || 'mp4' };
+  return null;
+}
+
+// Write raw bytes into a federating library dir under a collision-free
+// `upload-<uuid8>.<ext>` key. Returns the bare filename (the media_key).
+async function persistLibraryFile(buffer, dir, ext) {
+  const filename = `upload-${randomUUID().slice(0, 8)}.${ext}`;
+  await ensureDir(dir);
+  await writeFile(join(dir, filename), buffer);
+  return filename;
+}
+
+async function requireIngredient(getIngredientFn, ingredientId) {
+  const ingredient = await getIngredientFn(ingredientId);
+  if (!ingredient) throw new ServerError('Ingredient not found', { status: 404 });
+  return ingredient;
+}
+
+/**
+ * Persist an uploaded file into the media library and attach it to an
+ * ingredient. Images route through `saveUploadedGalleryImage` (magic-byte
+ * sniffed, re-encoded to PNG, EXIF-baked); audio/video are stored as-is. Returns
+ * the attached media row. `deps` lets tests run without DB/disk.
+ */
+export async function uploadIngredientMediaFile(
+  { ingredientId, dataBase64, mimeType, filename = null, role = null, caption = null } = {},
+  {
+    getIngredientFn = getIngredient,
+    attachMediaFn = attachMedia,
+    saveImageFn = saveUploadedGalleryImage,
+    persistFileFn = persistLibraryFile,
+  } = {},
+) {
+  await requireIngredient(getIngredientFn, ingredientId);
+  const classified = classifyUploadMime(mimeType);
+  if (!classified) {
+    throw new ServerError(`Unsupported file type "${mimeType}" — attach an image, audio, or video file.`, {
+      status: 422, code: 'UNSUPPORTED_MEDIA',
+    });
+  }
+  const meta = { role, caption };
+
+  if (classified.category === 'image') {
+    // saveUploadedGalleryImage validates size + format and 400s on a non-image.
+    const { filename: mediaKey } = await saveImageFn(dataBase64);
+    console.log(`📎 Catalog media upload: image ${mediaKey} → ingredient ${ingredientId}`);
+    return attachMediaFn(ingredientId, mediaKey, classified.kind, meta);
+  }
+
+  const buffer = Buffer.from(dataBase64, 'base64');
+  if (buffer.length === 0) throw new ServerError('Empty file upload', { status: 400, code: 'VALIDATION_ERROR' });
+  const dir = classified.category === 'audio' ? PATHS.audio : PATHS.videos;
+  const mediaKey = await persistFileFn(buffer, dir, classified.ext);
+  console.log(`📎 Catalog media upload: ${classified.kind} ${mediaKey} → ingredient ${ingredientId} (${(buffer.length / 1024).toFixed(0)}KB, ${filename || 'unnamed'})`);
+  return attachMediaFn(ingredientId, mediaKey, classified.kind, meta);
+}
+
+/**
+ * Attach a recorded voice memo: transcribe the WAV via Whisper, persist the
+ * audio into data/audio, and attach a `kind:'audio'` media row with the
+ * transcript in `caption`. Persist happens AFTER transcription so a failed
+ * transcript doesn't orphan a file (mirrors ingestFromVoice). An empty
+ * transcript still attaches the audio (the recording is the primary artifact;
+ * the client already guards against a silent mic). Returns `{ media, transcript }`.
+ */
+export async function recordIngredientVoiceMemo(
+  { ingredientId, audioBase64, mimeType = 'audio/wav', role = 'voice-memo' } = {},
+  {
+    getIngredientFn = getIngredient,
+    attachMediaFn = attachMedia,
+    transcribeFn = transcribe,
+    persistFileFn = persistLibraryFile,
+  } = {},
+) {
+  await requireIngredient(getIngredientFn, ingredientId);
+  const buffer = Buffer.from(audioBase64, 'base64');
+  if (buffer.length === 0) throw new ServerError('Voice memo audio was empty', { status: 400, code: 'VALIDATION_ERROR' });
+
+  const { text } = await transcribeFn(buffer, { mimeType });
+  const transcript = (text || '').trim().slice(0, MAX_CAPTION);
+
+  const ext = AUDIO_EXT[(mimeType || '').toLowerCase().split(';')[0].trim()] || 'wav';
+  const mediaKey = await persistFileFn(buffer, PATHS.audio, ext);
+  console.log(`🎙️ Catalog voice memo: ${mediaKey} → ingredient ${ingredientId} (${transcript.length} chars)`);
+  const media = await attachMediaFn(ingredientId, mediaKey, 'audio', { role, caption: transcript || null });
+  return { media, transcript };
+}
diff --git a/server/services/catalogMedia.test.js b/server/services/catalogMedia.test.js
new file mode 100644
index 000000000..7fa59ea3b
--- /dev/null
+++ b/server/services/catalogMedia.test.js
@@ -0,0 +1,128 @@
+import { describe, it, expect, vi } from 'vitest';
+import {
+  classifyUploadMime,
+  uploadIngredientMediaFile,
+  recordIngredientVoiceMemo,
+} from './catalogMedia.js';
+
+describe('classifyUploadMime', () => {
+  it('classifies images to the reference kind', () => {
+    expect(classifyUploadMime('image/png')).toEqual({ category: 'image', kind: 'reference', ext: 'png' });
+    expect(classifyUploadMime('image/jpeg')).toEqual({ category: 'image', kind: 'reference', ext: 'png' });
+  });
+
+  it('classifies audio and strips a codecs parameter', () => {
+    expect(classifyUploadMime('audio/wav')).toEqual({ category: 'audio', kind: 'audio', ext: 'wav' });
+    expect(classifyUploadMime('audio/webm;codecs=opus')).toEqual({ category: 'audio', kind: 'audio', ext: 'webm' });
+    expect(classifyUploadMime('audio/mpeg')).toEqual({ category: 'audio', kind: 'audio', ext: 'mp3' });
+  });
+
+  it('classifies video with a container fallback for unknown subtypes', () => {
+    expect(classifyUploadMime('video/mp4')).toEqual({ category: 'video', kind: 'video', ext: 'mp4' });
+    expect(classifyUploadMime('video/x-matroska')).toEqual({ category: 'video', kind: 'video', ext: 'mp4' });
+  });
+
+  it('returns null for unsupported / missing MIME (documents do not federate)', () => {
+    expect(classifyUploadMime('application/pdf')).toBeNull();
+    expect(classifyUploadMime('text/plain')).toBeNull();
+    expect(classifyUploadMime('')).toBeNull();
+    expect(classifyUploadMime(undefined)).toBeNull();
+  });
+});
+
+const okIngredient = () => ({ id: 'ing-1', name: 'Test' });
+const b64 = (s) => Buffer.from(s).toString('base64');
+
+describe('uploadIngredientMediaFile', () => {
+  it('routes an image through the gallery saver and attaches as reference', async () => {
+    const saveImageFn = vi.fn().mockResolvedValue({ filename: 'upload-abcd1234.png' });
+    const attachMediaFn = vi.fn().mockResolvedValue({ mediaKey: 'upload-abcd1234.png', kind: 'reference' });
+    const persistFileFn = vi.fn();
+    const media = await uploadIngredientMediaFile(
+      { ingredientId: 'ing-1', dataBase64: b64('img'), mimeType: 'image/png', filename: 'pic.png' },
+      { getIngredientFn: okIngredient, attachMediaFn, saveImageFn, persistFileFn },
+    );
+    expect(saveImageFn).toHaveBeenCalledWith(b64('img'));
+    expect(persistFileFn).not.toHaveBeenCalled();
+    expect(attachMediaFn).toHaveBeenCalledWith('ing-1', 'upload-abcd1234.png', 'reference', { role: null, caption: null });
+    expect(media).toEqual({ mediaKey: 'upload-abcd1234.png', kind: 'reference' });
+  });
+
+  it('persists audio bytes to the library dir and attaches as audio', async () => {
+    const persistFileFn = vi.fn().mockResolvedValue('upload-11112222.webm');
+    const attachMediaFn = vi.fn().mockImplementation((id, key, kind) => ({ mediaKey: key, kind }));
+    await uploadIngredientMediaFile(
+      { ingredientId: 'ing-1', dataBase64: b64('audiobytes'), mimeType: 'audio/webm', filename: 'clip.webm', role: 'sfx' },
+      { getIngredientFn: okIngredient, attachMediaFn, saveImageFn: vi.fn(), persistFileFn },
+    );
+    expect(persistFileFn).toHaveBeenCalledTimes(1);
+    const [buffer, , ext] = persistFileFn.mock.calls[0];
+    expect(Buffer.isBuffer(buffer)).toBe(true);
+    expect(ext).toBe('webm');
+    expect(attachMediaFn).toHaveBeenCalledWith('ing-1', 'upload-11112222.webm', 'audio', { role: 'sfx', caption: null });
+  });
+
+  it('rejects an unsupported MIME with a 422', async () => {
+    await expect(uploadIngredientMediaFile(
+      { ingredientId: 'ing-1', dataBase64: b64('doc'), mimeType: 'application/pdf' },
+      { getIngredientFn: okIngredient, attachMediaFn: vi.fn(), saveImageFn: vi.fn(), persistFileFn: vi.fn() },
+    )).rejects.toMatchObject({ status: 422 });
+  });
+
+  it('404s when the ingredient is missing', async () => {
+    await expect(uploadIngredientMediaFile(
+      { ingredientId: 'nope', dataBase64: b64('x'), mimeType: 'image/png' },
+      { getIngredientFn: async () => null, attachMediaFn: vi.fn(), saveImageFn: vi.fn(), persistFileFn: vi.fn() },
+    )).rejects.toMatchObject({ status: 404 });
+  });
+
+  it('rejects empty (all-whitespace-decoding) file bytes for non-image kinds', async () => {
+    await expect(uploadIngredientMediaFile(
+      { ingredientId: 'ing-1', dataBase64: '', mimeType: 'audio/wav' },
+      { getIngredientFn: okIngredient, attachMediaFn: vi.fn(), saveImageFn: vi.fn(), persistFileFn: vi.fn() },
+    )).rejects.toMatchObject({ status: 400 });
+  });
+});
+
+describe('recordIngredientVoiceMemo', () => {
+  it('transcribes, persists audio, and attaches with the transcript in caption', async () => {
+    const transcribeFn = vi.fn().mockResolvedValue({ text: '  hello world  ' });
+    const persistFileFn = vi.fn().mockResolvedValue('voice-xyz.wav');
+    const attachMediaFn = vi.fn().mockImplementation((id, key, kind, meta) => ({ mediaKey: key, kind, ...meta }));
+    const { media, transcript } = await recordIngredientVoiceMemo(
+      { ingredientId: 'ing-1', audioBase64: b64('wavbytes'), mimeType: 'audio/wav' },
+      { getIngredientFn: okIngredient, attachMediaFn, transcribeFn, persistFileFn },
+    );
+    expect(transcript).toBe('hello world');
+    // Persist happens AFTER transcription.
+    expect(transcribeFn).toHaveBeenCalledTimes(1);
+    expect(persistFileFn).toHaveBeenCalledTimes(1);
+    expect(attachMediaFn).toHaveBeenCalledWith('ing-1', 'voice-xyz.wav', 'audio', { role: 'voice-memo', caption: 'hello world' });
+    expect(media.caption).toBe('hello world');
+  });
+
+  it('still attaches the audio when the transcript is empty (caption null)', async () => {
+    const attachMediaFn = vi.fn().mockImplementation((id, key, kind, meta) => ({ mediaKey: key, kind, ...meta }));
+    await recordIngredientVoiceMemo(
+      { ingredientId: 'ing-1', audioBase64: b64('wav'), mimeType: 'audio/wav' },
+      { getIngredientFn: okIngredient, attachMediaFn, transcribeFn: async () => ({ text: '   ' }), persistFileFn: async () => 'voice-empty.wav' },
+    );
+    expect(attachMediaFn).toHaveBeenCalledWith('ing-1', 'voice-empty.wav', 'audio', { role: 'voice-memo', caption: null });
+  });
+
+  it('does not persist audio when transcription throws (no orphan file)', async () => {
+    const persistFileFn = vi.fn();
+    await expect(recordIngredientVoiceMemo(
+      { ingredientId: 'ing-1', audioBase64: b64('wav'), mimeType: 'audio/wav' },
+      { getIngredientFn: okIngredient, attachMediaFn: vi.fn(), transcribeFn: async () => { throw new Error('whisper down'); }, persistFileFn },
+    )).rejects.toThrow('whisper down');
+    expect(persistFileFn).not.toHaveBeenCalled();
+  });
+
+  it('rejects empty audio with a 400', async () => {
+    await expect(recordIngredientVoiceMemo(
+      { ingredientId: 'ing-1', audioBase64: '', mimeType: 'audio/wav' },
+      { getIngredientFn: okIngredient, attachMediaFn: vi.fn(), transcribeFn: vi.fn(), persistFileFn: vi.fn() },
+    )).rejects.toMatchObject({ status: 400 });
+  });
+});
diff --git a/server/services/dashboardLayouts.js b/server/services/dashboardLayouts.js
index 32fd198e6..ea6874b98 100644
--- a/server/services/dashboardLayouts.js
+++ b/server/services/dashboardLayouts.js
@@ -51,14 +51,16 @@ export const INTENT_LAYOUTS = [
   {
     id: 'health',
     name: 'Health',
-    widgets: ['death-clock', 'goal-progress', 'activity-streak', 'daily-post', 'quick-brain', 'hourly-activity'],
+    widgets: ['death-clock', 'goal-progress', 'activity-streak', 'daily-post', 'quick-brain', 'hourly-activity', 'meatspace-streak'],
     grid: [
-      { id: 'death-clock',     x: 0, y: 0, w: 4, h: 3 },
-      { id: 'goal-progress',   x: 4, y: 0, w: 5, h: 5 },
-      { id: 'activity-streak', x: 9, y: 0, w: 3, h: 3 },
-      { id: 'daily-post',      x: 9, y: 3, w: 3, h: 2 },
-      { id: 'quick-brain',     x: 0, y: 3, w: 4, h: 2 },
-      { id: 'hourly-activity', x: 0, y: 5, w: 12, h: 4 },
+      { id: 'death-clock',      x: 0, y: 0, w: 4, h: 3 },
+      { id: 'goal-progress',    x: 4, y: 0, w: 5, h: 5 },
+      { id: 'activity-streak',  x: 9, y: 0, w: 3, h: 3 },
+      { id: 'daily-post',       x: 9, y: 3, w: 3, h: 2 },
+      { id: 'quick-brain',      x: 0, y: 3, w: 4, h: 2 },
+      { id: 'hourly-activity',  x: 0, y: 5, w: 12, h: 4 },
+      // Gated on any health log existing — hidden on installs with no logs.
+      { id: 'meatspace-streak', x: 0, y: 9, w: 4, h: 4 },
     ],
   },
   {
@@ -86,7 +88,7 @@ const DEFAULT_LAYOUTS = [
       'apps',
       'cos', 'goal-progress', 'upcoming-tasks',
       'proactive-alerts', 'review-hub', 'while-away', 'system-health', 'network-exposure', 'backup', 'death-clock', 'quick-stats', 'decision-log',
-      'activity-streak', 'hourly-activity',
+      'activity-streak', 'hourly-activity', 'tribe-care', 'feeds',
     ],
     // Above-the-fold capture row stretches to h=5 so the Quick Task card
     // can show its expanded options (worktree/PR/simplify/etc.) without
@@ -122,6 +124,10 @@ const DEFAULT_LAYOUTS = [
       // doesn't collide with the tightly-packed above-the-fold rows.
       // Reorderable via the Arrange button on the dashboard.
       { id: 'quick-idea',       x: 0,  y: 29, w: 4,  h: 4 },
+      // Gated on the Tribe having people — hidden on installs that don't use it.
+      { id: 'tribe-care',       x: 4,  y: 29, w: 4,  h: 4 },
+      // Gated on having subscribed feeds — hidden on installs with none.
+      { id: 'feeds',            x: 8,  y: 29, w: 3,  h: 4 },
     ],
   },
   {
diff --git a/server/services/feeds.js b/server/services/feeds.js
index 1e0dad534..11b9932c6 100644
--- a/server/services/feeds.js
+++ b/server/services/feeds.js
@@ -10,10 +10,8 @@
 
 import { randomUUID } from 'crypto';
 import { join } from 'path';
-import dns from 'dns/promises';
-import net from 'net';
 import { PATHS, createCachedStore } from '../lib/fileUtils.js';
-import { fetchWithTimeout } from '../lib/fetchWithTimeout.js';
+import { fetchPublicText } from '../lib/safeUrlFetch.js';
 import { decodeXmlEntities } from '../lib/xmlEntities.js';
 
 const FEEDS_FILE = join(PATHS.data, 'feeds.json');
@@ -378,119 +376,47 @@ export async function markAllRead(feedId) {
 
 export async function getFeedStats() {
   const data = await store.load();
+  // Single-pass per-feed unread tally (O(I)) — mirrors getFeeds()'s approach so
+  // the widget can surface top unread feed names without a second computation.
+  const unreadCounts = new Map();
+  for (const item of data.items) {
+    if (!item.read) unreadCounts.set(item.feedId, (unreadCounts.get(item.feedId) || 0) + 1);
+  }
+  const topUnread = data.feeds
+    .map(feed => ({ id: feed.id, title: feed.title, unread: unreadCounts.get(feed.id) || 0 }))
+    .filter(f => f.unread > 0)
+    .sort((a, b) => b.unread - a.unread)
+    .slice(0, 5);
   return {
     totalFeeds: data.feeds.length,
     totalItems: data.items.length,
-    unreadItems: data.items.filter(i => !i.read).length
+    unreadItems: data.items.filter(i => !i.read).length,
+    topUnread
   };
 }
 
 // ─── Internal Helpers ───────────────────────────────────────────────────────
 
-// Check if an IP address is private/loopback/link-local (IPv4 or IPv6).
-function isPrivateIP(ip) {
-  if (!ip) return true;
-  const lower = ip.toLowerCase();
-  // IPv6
-  if (lower.includes(':')) {
-    if (lower === '::1' || lower === '::') return true;
-    // IPv4-mapped IPv6 — accept both ::ffff:a.b.c.d (raw form from dns.resolve)
-    // and ::ffff:wxyz:wxyz (the hex form Node's URL parser normalizes to).
-    const mappedDotted = lower.match(/^::ffff:(\d+\.\d+\.\d+\.\d+)$/);
-    if (mappedDotted) return isPrivateIP(mappedDotted[1]);
-    const mappedHex = lower.match(/^::ffff:([0-9a-f]{1,4}):([0-9a-f]{1,4})$/);
-    if (mappedHex) {
-      const high = parseInt(mappedHex[1], 16);
-      const low = parseInt(mappedHex[2], 16);
-      return isPrivateIP(`${(high >> 8) & 0xff}.${high & 0xff}.${(low >> 8) & 0xff}.${low & 0xff}`);
-    }
-    const firstGroup = lower.split(':')[0];
-    if (firstGroup) {
-      const firstWord = parseInt(firstGroup, 16);
-      if (Number.isFinite(firstWord)) {
-        // ULA fc00::/7 (top 7 bits = 1111110)
-        if ((firstWord & 0xfe00) === 0xfc00) return true;
-        // Link-local fe80::/10 (top 10 bits = 1111111010)
-        if ((firstWord & 0xffc0) === 0xfe80) return true;
-      }
-    }
-    return false;
-  }
-  // IPv4
-  const parts = lower.split('.').map(Number);
-  if (parts.length === 4 && parts.every(p => !isNaN(p) && p >= 0 && p <= 255)) {
-    if (parts[0] === 10) return true;
-    if (parts[0] === 172 && parts[1] >= 16 && parts[1] <= 31) return true;
-    if (parts[0] === 192 && parts[1] === 168) return true;
-    if (parts[0] === 169 && parts[1] === 254) return true;
-    if (parts[0] === 127) return true;
-    if (parts[0] === 0) return true;
-  }
-  return false;
-}
-
-// DNS error codes that mean "this record type does not exist" — safe to treat
-// as an empty result. Anything else (SERVFAIL, TIMEOUT, CONNREFUSED, …) is a
-// resolver failure that can't prove the family is safe; we must fail closed
-// because Node's fetch performs its own lookup and may still happy-eyeballs to
-// a private address we never got to inspect.
-const BENIGN_DNS_MISS_CODES = new Set(['ENOTFOUND', 'ENODATA', 'NODATA', 'NOTFOUND']);
-
-// Resolve hostname and verify it doesn't point to a private IP. Resolves A
-// and AAAA in parallel so a hostname with a public A but a private AAAA
-// (happy-eyeballs would prefer the AAAA in Node's fetch) is rejected; the
-// parallel AAAA lookup also lets AAAA-only feeds resolve.
-async function isHostSafe(hostname) {
-  // URL.hostname preserves the [::1] bracketed form for IPv6 literals; strip
-  // brackets so net.isIP recognizes the address before falling through to DNS.
-  const stripped = hostname.startsWith('[') && hostname.endsWith(']')
-    ? hostname.slice(1, -1)
-    : hostname;
-  if (net.isIP(stripped)) return !isPrivateIP(stripped);
-  const wrap = (p) => p.then(
-    addrs => ({ ok: true, addrs }),
-    err => BENIGN_DNS_MISS_CODES.has(err?.code) ? { ok: true, addrs: [] } : { ok: false, addrs: [] },
-  );
-  const [v4, v6] = await Promise.all([
-    wrap(dns.resolve4(stripped)),
-    wrap(dns.resolve6(stripped)),
-  ]);
-  if (!v4.ok || !v6.ok) return false;
-  const addresses = [...v4.addrs, ...v6.addrs];
-  if (addresses.length === 0) return false;
-  return addresses.every(addr => !isPrivateIP(addr));
-}
+const FEED_HEADERS = {
+  'User-Agent': 'PortOS Feed Reader/1.0',
+  Accept: 'application/rss+xml, application/atom+xml, application/xml, text/xml',
+};
 
+// Fetch a feed's XML through the shared SSRF-guarded fetch. `blockPrivate: true`
+// keeps feeds' historical block-all-private posture (an arbitrary user-added
+// feed URL must not be aimable at the home network) while gaining the
+// connect-time IP PIN that closes the DNS-rebinding TOCTOU (#2046): the
+// hostname is resolved once and undici connects to exactly that vetted address,
+// re-validated and re-pinned on every redirect hop. `throwOnUnsafe: false`
+// preserves this module's contract of returning null on any failure (so addFeed
+// surfaces the friendly "Could not fetch feed" message rather than a bubbled
+// 400) for an unsafe/private host, network error, non-ok status, or blocked
+// redirect.
 async function fetchFeedXml(url) {
-  // Restrict to http/https to prevent SSRF via file://, data://, etc.
-  const parsed = new URL(url);
-  if (!['http:', 'https:'].includes(parsed.protocol)) return null;
-  // Resolve DNS and block private/loopback/link-local IPs (prevents rebinding attacks)
-  if (!await isHostSafe(parsed.hostname)) return null;
-
-  const feedHeaders = { 'User-Agent': 'PortOS Feed Reader/1.0', Accept: 'application/rss+xml, application/atom+xml, application/xml, text/xml' };
-
-  const res = await fetchWithTimeout(url, {
-    redirect: 'manual',
-    headers: feedHeaders
-  }, FETCH_TIMEOUT_MS).catch(() => null);
-
-  // Handle redirects manually to validate each redirect target
-  if (res?.status >= 300 && res?.status < 400) {
-    const location = res.headers.get('location');
-    if (!location) return null;
-    const redirectUrl = new URL(location, url);
-    if (!['http:', 'https:'].includes(redirectUrl.protocol)) return null;
-    if (!await isHostSafe(redirectUrl.hostname)) return null;
-    // Follow the validated redirect
-    const res2 = await fetchWithTimeout(redirectUrl.href, {
-      redirect: 'error',
-      headers: feedHeaders
-    }, FETCH_TIMEOUT_MS).catch(() => null);
-    if (!res2?.ok) return null;
-    return res2.text();
-  }
-
-  if (!res?.ok) return null;
-  return res.text();
+  return fetchPublicText(url, {
+    timeoutMs: FETCH_TIMEOUT_MS,
+    headers: FEED_HEADERS,
+    blockPrivate: true,
+    throwOnUnsafe: false,
+  });
 }
diff --git a/server/services/feeds.test.js b/server/services/feeds.test.js
index 6446f4a5f..c1d9f3ab1 100644
--- a/server/services/feeds.test.js
+++ b/server/services/feeds.test.js
@@ -11,20 +11,20 @@ vi.mock('../lib/fileUtils.js', async () => {
   return makePathsProxy(actual, { dataRoot: () => tmpRoot });
 });
 
+// feeds.js fetches through the shared SSRF-guarded helper (server/lib/safeUrlFetch.js),
+// which is exercised for real here — we only mock its two boundaries: the DNS
+// resolve (dns.lookup) and the timed fetch. safeUrlFetch resolves a hostname
+// once via dns.lookup and PINS the connection to that vetted address, so these
+// tests drive the same rebinding-pin path production uses.
 const fetchMock = vi.fn();
 vi.mock('../lib/fetchWithTimeout.js', () => ({
   fetchWithTimeout: (...args) => fetchMock(...args),
 }));
 
-const dnsResolveMock = vi.fn();
-const dnsResolve6Mock = vi.fn();
+const lookupMock = vi.fn();
 vi.mock('dns/promises', () => ({
-  default: {
-    resolve4: (...args) => dnsResolveMock(...args),
-    resolve6: (...args) => dnsResolve6Mock(...args),
-  },
-  resolve4: (...args) => dnsResolveMock(...args),
-  resolve6: (...args) => dnsResolve6Mock(...args),
+  default: { lookup: (...args) => lookupMock(...args) },
+  lookup: (...args) => lookupMock(...args),
 }));
 
 let feeds;
@@ -42,8 +42,7 @@ beforeEach(async () => {
   tmpRoot = mkdtempSync(join(tmpdir(), 'portos-feeds-test-'));
   vi.resetModules();
   fetchMock.mockReset();
-  dnsResolveMock.mockReset().mockResolvedValue(['93.184.216.34']);
-  dnsResolve6Mock.mockReset().mockResolvedValue([]);
+  lookupMock.mockReset().mockResolvedValue({ address: '93.184.216.34', family: 4 });
   feeds = await import('./feeds.js');
 });
 
@@ -102,7 +101,7 @@ const FETCH_ERROR = 'Could not fetch feed — check the URL';
 describe('getFeeds / getFeedStats — empty state', () => {
   it('returns empty arrays before any subscriptions', async () => {
     expect(await feeds.getFeeds()).toEqual([]);
-    expect(await feeds.getFeedStats()).toEqual({ totalFeeds: 0, totalItems: 0, unreadItems: 0 });
+    expect(await feeds.getFeedStats()).toEqual({ totalFeeds: 0, totalItems: 0, unreadItems: 0, topUnread: [] });
   });
 });
 
@@ -168,7 +167,7 @@ describe('addFeed', () => {
   ])('rejects literal private IPv4 %s without DNS lookup', async (host) => {
     const result = await feeds.addFeed(`http://${host}/feed`);
     expect(result).toEqual({ error: FETCH_ERROR });
-    expect(dnsResolveMock).not.toHaveBeenCalled();
+    expect(lookupMock).not.toHaveBeenCalled(); // literal is classified without resolving
     expect(fetchMock).not.toHaveBeenCalled();
   });
 
@@ -183,7 +182,7 @@ describe('addFeed', () => {
   ])('rejects literal private IPv6 %s without DNS lookup', async (_label, host) => {
     const result = await feeds.addFeed(`http://${host}/feed`);
     expect(result).toEqual({ error: FETCH_ERROR });
-    expect(dnsResolveMock).not.toHaveBeenCalled();
+    expect(lookupMock).not.toHaveBeenCalled();
     expect(fetchMock).not.toHaveBeenCalled();
   });
 
@@ -191,83 +190,51 @@ describe('addFeed', () => {
     fetchMock.mockResolvedValue(makeResponse({ body: RSS_FIXTURE }));
     const result = await feeds.addFeed('http://[2606:4700:4700::1111]/rss');
     expect(result.error).toBeUndefined();
-    expect(dnsResolveMock).not.toHaveBeenCalled();
+    expect(lookupMock).not.toHaveBeenCalled(); // literal needs no resolve/pin
     expect(fetchMock).toHaveBeenCalledTimes(1);
-    // Bracketed form must survive into the outbound fetch URL — stripping happened only inside isHostSafe
+    // Bracketed form must survive into the outbound fetch URL — bracket-stripping
+    // happens only inside the private-literal classifier.
     expect(fetchMock.mock.calls[0][0]).toContain('[2606:4700:4700::1111]');
   });
 
   it('rejects hostnames that resolve to a private IP (DNS rebinding guard)', async () => {
-    dnsResolveMock.mockResolvedValue(['10.0.0.42']);
+    lookupMock.mockResolvedValue({ address: '10.0.0.42', family: 4 });
     const result = await feeds.addFeed('https://evil.example.com/rss');
     expect(result).toEqual({ error: FETCH_ERROR });
     expect(fetchMock).not.toHaveBeenCalled();
   });
 
-  it('rejects hostnames with no A or AAAA records', async () => {
-    dnsResolveMock.mockResolvedValue([]);
-    dnsResolve6Mock.mockResolvedValue([]);
-    const result = await feeds.addFeed('https://no-records.example.com/rss');
+  it('rejects hostnames that resolve to a link-local / metadata IP', async () => {
+    lookupMock.mockResolvedValue({ address: '169.254.169.254', family: 4 });
+    const result = await feeds.addFeed('https://metadata.example.com/rss');
     expect(result).toEqual({ error: FETCH_ERROR });
     expect(fetchMock).not.toHaveBeenCalled();
   });
 
-  it('rejects when AAAA resolves to a private IPv6 even if A is public (happy-eyeballs SSRF)', async () => {
-    dnsResolveMock.mockResolvedValue(['93.184.216.34']);
-    dnsResolve6Mock.mockResolvedValue(['fc00::1']);
-    const result = await feeds.addFeed('https://dual-stack.example.com/rss');
+  it('fails closed when the hostname cannot be resolved (no unpinned fetch)', async () => {
+    // A hostname we can't vet must never fall through to an unpinned connect —
+    // that connect would re-resolve at TCP time, exactly the rebinding window.
+    lookupMock.mockRejectedValue(Object.assign(new Error('not found'), { code: 'ENOTFOUND' }));
+    const result = await feeds.addFeed('https://no-records.example.com/rss');
     expect(result).toEqual({ error: FETCH_ERROR });
     expect(fetchMock).not.toHaveBeenCalled();
   });
 
-  it('accepts AAAA-only hostnames (no A record, public IPv6)', async () => {
+  it('accepts a hostname that resolves to a public IPv6 address', async () => {
     fetchMock.mockResolvedValue(makeResponse({ body: RSS_FIXTURE }));
-    dnsResolveMock.mockResolvedValue([]);
-    dnsResolve6Mock.mockResolvedValue(['2606:4700:4700::1111']);
+    lookupMock.mockResolvedValue({ address: '2606:4700:4700::1111', family: 6 });
     const result = await feeds.addFeed('https://v6only.example.com/rss');
     expect(result.error).toBeUndefined();
     expect(fetchMock).toHaveBeenCalledTimes(1);
+    // Connection is pinned to the vetted address (undici would otherwise re-resolve).
+    expect(fetchMock.mock.calls[0][1].dispatcher).toBeDefined();
   });
 
-  it('rejects AAAA-only hostnames that point to private IPv6', async () => {
-    dnsResolveMock.mockResolvedValue([]);
-    dnsResolve6Mock.mockResolvedValue(['fe80::1']);
-    const result = await feeds.addFeed('https://v6private.example.com/rss');
-    expect(result).toEqual({ error: FETCH_ERROR });
-    expect(fetchMock).not.toHaveBeenCalled();
-  });
-
-  it('rejects when AAAA resolver fails (SERVFAIL) even if A is public (fail-closed)', async () => {
-    // Node's fetch may still happy-eyeballs to a private AAAA on its own
-    // lookup, so a resolver error on AAAA must reject — we cannot prove
-    // the family is safe to fall through to the A result alone.
-    const err = Object.assign(new Error('servfail'), { code: 'ESERVFAIL' });
-    dnsResolveMock.mockResolvedValue(['93.184.216.34']);
-    dnsResolve6Mock.mockRejectedValue(err);
-    const result = await feeds.addFeed('https://flaky-aaaa.example.com/rss');
-    expect(result).toEqual({ error: FETCH_ERROR });
-    expect(fetchMock).not.toHaveBeenCalled();
-  });
-
-  it('accepts when AAAA returns NODATA and A is public (benign no-records miss)', async () => {
-    // ENODATA means "name exists, no records of this type" — the other
-    // family covers the hostname and we should not fail closed on it.
-    const err = Object.assign(new Error('no data'), { code: 'ENODATA' });
+  it('pins the connection to the vetted address (rebinding TOCTOU closed)', async () => {
     fetchMock.mockResolvedValue(makeResponse({ body: RSS_FIXTURE }));
-    dnsResolveMock.mockResolvedValue(['93.184.216.34']);
-    dnsResolve6Mock.mockRejectedValue(err);
-    const result = await feeds.addFeed('https://a-only.example.com/rss');
-    expect(result.error).toBeUndefined();
-    expect(fetchMock).toHaveBeenCalledTimes(1);
-  });
-
-  it('rejects when A resolver fails (TIMEOUT) even if AAAA is public (fail-closed)', async () => {
-    const err = Object.assign(new Error('timeout'), { code: 'ETIMEOUT' });
-    dnsResolveMock.mockRejectedValue(err);
-    dnsResolve6Mock.mockResolvedValue(['2606:4700:4700::1111']);
-    const result = await feeds.addFeed('https://flaky-a.example.com/rss');
-    expect(result).toEqual({ error: FETCH_ERROR });
-    expect(fetchMock).not.toHaveBeenCalled();
+    lookupMock.mockResolvedValue({ address: '93.184.216.34', family: 4 });
+    await feeds.addFeed('https://rebind.example.com/rss');
+    expect(fetchMock.mock.calls[0][1].dispatcher).toBeDefined();
   });
 
   it('follows a single safe redirect to the new URL', async () => {
@@ -282,12 +249,13 @@ describe('addFeed', () => {
   });
 
   it('rejects redirects to private IPs without making the second fetch', async () => {
-    dnsResolveMock.mockImplementation(async (host) => host === 'evil.example.com' ? ['10.0.0.1'] : ['93.184.216.34']);
+    lookupMock.mockImplementation(async (host) =>
+      host === 'evil.example.com' ? { address: '10.0.0.1', family: 4 } : { address: '93.184.216.34', family: 4 });
     fetchMock.mockResolvedValueOnce(makeResponse({ status: 302, headers: { location: 'https://evil.example.com/x' } }));
     const result = await feeds.addFeed('https://example.com/redirect');
     expect(result).toEqual({ error: FETCH_ERROR });
     expect(fetchMock).toHaveBeenCalledTimes(1);
-    expect(dnsResolveMock).toHaveBeenCalledWith('evil.example.com');
+    expect(lookupMock).toHaveBeenCalledWith('evil.example.com');
   });
 
   it('falls back to the URL hostname when the feed has no <title>', async () => {
@@ -481,7 +449,27 @@ describe('getFeeds — unread counts', () => {
 
 describe('getFeedStats', () => {
   it('aggregates totals across feeds', async () => {
-    await seedTwoFeeds();
-    expect(await feeds.getFeedStats()).toEqual({ totalFeeds: 2, totalItems: 4, unreadItems: 4 });
+    const { feedA, feedB } = await seedTwoFeeds();
+    const stats = await feeds.getFeedStats();
+    expect(stats.totalFeeds).toBe(2);
+    expect(stats.totalItems).toBe(4);
+    expect(stats.unreadItems).toBe(4);
+    // Every feed with unread items is surfaced, sorted by unread count desc.
+    expect(stats.topUnread).toHaveLength(2);
+    expect(stats.topUnread.map(f => f.id).sort()).toEqual([feedA.id, feedB.id].sort());
+    expect(stats.topUnread.every(f => f.unread === 2)).toBe(true);
+  });
+
+  it('excludes fully-read feeds and ranks by unread count', async () => {
+    const { feedA } = await seedTwoFeeds();
+    // Mark every item in feedA read so it drops out of topUnread entirely.
+    for (const item of await feeds.getItems({ feedId: feedA.id })) {
+      await feeds.markItemRead(item.id);
+    }
+    const stats = await feeds.getFeedStats();
+    expect(stats.unreadItems).toBe(2);
+    expect(stats.topUnread).toHaveLength(1);
+    expect(stats.topUnread[0].id).not.toBe(feedA.id);
+    expect(stats.topUnread[0].unread).toBe(2);
   });
 });
diff --git a/server/services/insightsService.js b/server/services/insightsService.js
index ce4d0fc8b..823be8c4a 100644
--- a/server/services/insightsService.js
+++ b/server/services/insightsService.js
@@ -216,6 +216,28 @@ export async function callProviderAISimple(provider, model, prompt, { temperatur
 // =============================================================================
 // EXPORTED FUNCTIONS
 // =============================================================================
+//
+// LLM TRIGGER CONTRACT (no-cold-bootstrap policy — see CLAUDE.md "AI Provider
+// Usage Policy"). The insights source data (genome, blood tests, taste profile,
+// Apple Health) is sensitive, so provider calls must be *explicitly* user-driven:
+//
+//   - generateThemeAnalysis (INS-02) and refreshCrossDomainNarrative (INS-04)
+//     are the ONLY functions here that call an AI provider. Each is reached solely
+//     from an explicit POST (`/api/insights/themes/refresh`,
+//     `/api/insights/narrative/refresh`) that the user triggers by clicking
+//     "Refresh" in the Insights UI (CrossDomainTab / TasteIdentityTab handleRefresh).
+//   - The read paths getThemeAnalysis / getCrossDomainNarrative are disk-only
+//     (readJSONFile → cached JSON, never a provider call), mirroring the
+//     initDrillCache/requestCacheFill split in meatspacePostDrillCache.js. The
+//     Insights page mounts by calling ONLY these read paths.
+//   - getGenomeHealthCorrelations (INS-01) is pure rule-based (no LLM).
+//
+// Boot/init (server/index.js) mounts the router only — it must NEVER call a
+// generation function. No scheduler (taskSchedule / backupScheduler /
+// cosJobScheduler / automationScheduler) references insights. Do not add a
+// boot-time warm-up, a background refresh, or a page-mount auto-generate — any
+// new caller of the two generation functions must be a direct user action in the
+// same request (or an explicitly user-configured scheduled automation).
 
 /**
  * INS-01: Get genome-health correlations (pure rule-based, no LLM).
@@ -347,6 +369,10 @@ export async function getThemeAnalysis() {
  * INS-02: Generate taste-identity themes via LLM and persist to disk.
  * Reads taste profile sections, constructs prompt, parses JSON response.
  *
+ * LLM CALL — user-triggered only. See the trigger-contract note above. Reached
+ * solely from POST /api/insights/themes/refresh (a user "Refresh" click). Never
+ * call from boot, a warm-up, or a page-mount effect.
+ *
  * @param {string} [providerId] - Optional provider ID override
  * @param {string} [model] - Optional model override
  */
@@ -430,6 +456,10 @@ export async function getCrossDomainNarrative() {
  * Gathers genome, taste-identity, and Apple Health context; writes narrative
  * to disk preserving previousText for client-side diff.
  *
+ * LLM CALL — user-triggered only. See the trigger-contract note above. Reached
+ * solely from POST /api/insights/narrative/refresh (a user "Refresh" click).
+ * Never call from boot, a warm-up, or a page-mount effect.
+ *
  * @param {string} [providerId] - Optional provider ID override
  * @param {string} [model] - Optional model override
  */
diff --git a/server/services/insightsService.test.js b/server/services/insightsService.test.js
index 2a98d9faf..4721783bd 100644
--- a/server/services/insightsService.test.js
+++ b/server/services/insightsService.test.js
@@ -10,7 +10,11 @@ vi.mock('../lib/fetchWithTimeout.js', () => ({
 
 import { fetchWithTimeout } from '../lib/fetchWithTimeout.js';
 import { mockJsonResponse, mockTextResponse } from '../lib/testHelper.js';
-import { callProviderAISimple } from './insightsService.js';
+import {
+  callProviderAISimple,
+  getThemeAnalysis,
+  getCrossDomainNarrative,
+} from './insightsService.js';
 
 const PROVIDER = { type: 'api', endpoint: 'http://localhost:1234/v1' };
 
@@ -58,3 +62,26 @@ describe('insightsService.callProviderAISimple — non-JSON-body guard', () => {
     expect(result.error).toMatch(/Provider returned 500: boom/);
   });
 });
+
+// Enforces the no-cold-bootstrap trigger contract documented at the generation
+// entry points: the cached-read paths the Insights page mounts with must be
+// disk-only and NEVER reach an AI provider. Only the user-triggered *refresh*
+// endpoints may generate. If a future edit makes a read path warm the cache via
+// the LLM, this fails.
+describe('insightsService read paths — disk-only, no provider call', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('getThemeAnalysis performs no provider call (returns not_generated when uncached)', async () => {
+    const result = await getThemeAnalysis();
+    expect(fetchWithTimeout).not.toHaveBeenCalled();
+    expect(result.available === false || result.available === true).toBe(true);
+  });
+
+  it('getCrossDomainNarrative performs no provider call (returns not_generated when uncached)', async () => {
+    const result = await getCrossDomainNarrative();
+    expect(fetchWithTimeout).not.toHaveBeenCalled();
+    expect(result.available === false || result.available === true).toBe(true);
+  });
+});
diff --git a/server/services/meatspaceHealth.js b/server/services/meatspaceHealth.js
index 7cc9c9cd9..f647b274d 100644
--- a/server/services/meatspaceHealth.js
+++ b/server/services/meatspaceHealth.js
@@ -7,7 +7,7 @@
  */
 
 import { join } from 'path';
-import { atomicWrite, PATHS, ensureDir, readJSONFile } from '../lib/fileUtils.js';
+import { atomicWrite, PATHS, ensureDir, readJSONFile, getDateString } from '../lib/fileUtils.js';
 import {
   isMortalLoomEnabled,
   mlArrayIfEnabled,
@@ -78,7 +78,7 @@ export async function getBodyHistory() {
 }
 
 export async function addBodyEntry({ date, ...body }) {
-  const targetDate = date || new Date().toISOString().split('T')[0];
+  const targetDate = date || getDateString(); // local calendar day (matches alcohol/nicotine + dashboard streak)
 
   if (await isMortalLoomEnabled()) {
     const stored = await mlPush('bodyEntries', { date: targetDate, ...body });
@@ -191,7 +191,7 @@ export async function getWorkouts() {
 }
 
 export async function addWorkout({ date, type, durationMinutes, intensity, notes } = {}) {
-  const targetDate = date || new Date().toISOString().split('T')[0];
+  const targetDate = date || getDateString(); // local calendar day (matches alcohol/nicotine + dashboard streak)
   const trimmedType = typeof type === 'string' ? type.trim() : '';
   if (!trimmedType) throw new Error('workout type is required');
   const entry = {
@@ -229,7 +229,7 @@ export async function getBloodPressureHistory() {
 }
 
 export async function addBloodPressureReading({ date, systolic, diastolic }) {
-  const targetDate = date || new Date().toISOString().split('T')[0];
+  const targetDate = date || getDateString(); // local calendar day (matches alcohol/nicotine + dashboard streak)
   const patch = { bloodPressureSystolic: systolic, bloodPressureDiastolic: diastolic };
 
   if (await isMortalLoomEnabled()) {
diff --git a/server/services/meatspaceLoggingStats.js b/server/services/meatspaceLoggingStats.js
new file mode 100644
index 000000000..1a003ce58
--- /dev/null
+++ b/server/services/meatspaceLoggingStats.js
@@ -0,0 +1,131 @@
+/**
+ * MeatSpace Logging Stats
+ *
+ * Aggregates the daily-dated health logs (alcohol, nicotine, workouts, body,
+ * blood pressure) into a single glanceable summary for the dashboard streak
+ * widget: a cross-domain logging streak, per-domain this-week counts, and a
+ * 7-day sparkline. Pure read — composes the existing per-domain getters rather
+ * than reaching into their storage files, so MortalLoom-backed installs are
+ * covered for free.
+ */
+
+import { getDateString } from '../lib/fileUtils.js';
+import { getDailyAlcohol } from './meatspaceAlcohol.js';
+import { getDailyNicotine } from './meatspaceNicotine.js';
+import { getWorkouts, getBodyHistory, getBloodPressureHistory } from './meatspaceHealth.js';
+
+// Each domain contributes an array of `{ date: 'YYYY-MM-DD', ... }` records.
+// `label` is the human-facing name shown per-domain in the widget.
+const DOMAINS = [
+  { key: 'alcohol', label: 'Alcohol', load: () => getDailyAlcohol() },
+  { key: 'nicotine', label: 'Nicotine', load: () => getDailyNicotine() },
+  { key: 'workouts', label: 'Workouts', load: () => getWorkouts() },
+  { key: 'body', label: 'Body', load: () => getBodyHistory() },
+  { key: 'bloodPressure', label: 'Blood Pressure', load: () => getBloodPressureHistory() },
+];
+
+// Consecutive days (ending today, or yesterday if today is empty) that have at
+// least one log in any domain. Mirrors usage.js's calculateStreak so the two
+// dashboard streaks read the same way.
+function calculateStreak(loggedDates) {
+  let streak = 0;
+  const checkDate = new Date();
+  // Normalize to midnight so day arithmetic is stable across DST.
+  checkDate.setHours(0, 0, 0, 0);
+  while (true) {
+    const dateStr = getDateString(checkDate);
+    if (loggedDates.has(dateStr)) {
+      streak++;
+      checkDate.setDate(checkDate.getDate() - 1);
+    } else if (streak === 0) {
+      // Grace: a gap today doesn't break a streak that ran through yesterday.
+      checkDate.setDate(checkDate.getDate() - 1);
+      if (!loggedDates.has(getDateString(checkDate))) break;
+    } else {
+      break;
+    }
+  }
+  return streak;
+}
+
+// Longest run of consecutive logged days anywhere in history.
+function calculateLongestStreak(loggedDates) {
+  const dates = [...loggedDates].sort();
+  let longest = 0;
+  let run = 0;
+  let prev = null;
+  for (const dateStr of dates) {
+    if (prev) {
+      const diffDays = Math.round(
+        (new Date(dateStr) - new Date(prev)) / (1000 * 60 * 60 * 24)
+      );
+      run = diffDays === 1 ? run + 1 : 1;
+    } else {
+      run = 1;
+    }
+    longest = Math.max(longest, run);
+    prev = dateStr;
+  }
+  return longest;
+}
+
+export async function getLoggingStats() {
+  const perDomain = await Promise.all(
+    DOMAINS.map(async (d) => ({ ...d, entries: (await d.load().catch(() => [])) || [] }))
+  );
+
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const weekAgo = new Date(today);
+  weekAgo.setDate(weekAgo.getDate() - 6); // inclusive 7-day window (today + 6 prior)
+  const weekAgoStr = getDateString(weekAgo);
+  const todayStr = getDateString(today);
+
+  // Union of every logged date across domains → drives the streak + sparkline.
+  const loggedDates = new Set();
+  const domains = [];
+  let totalLogged = 0;
+
+  for (const d of perDomain) {
+    let thisWeek = 0;
+    for (const entry of d.entries) {
+      if (!entry?.date) continue;
+      loggedDates.add(entry.date);
+      totalLogged++;
+      if (entry.date >= weekAgoStr && entry.date <= todayStr) thisWeek++;
+    }
+    domains.push({ key: d.key, label: d.label, total: d.entries.length, thisWeek });
+  }
+
+  // 7-day sparkline: count of distinct domains logged each day (0..DOMAINS.length).
+  const perDayDomainCount = new Map();
+  for (const d of perDomain) {
+    const daysSeen = new Set();
+    for (const entry of d.entries) {
+      if (entry?.date && entry.date >= weekAgoStr && entry.date <= todayStr) daysSeen.add(entry.date);
+    }
+    for (const date of daysSeen) perDayDomainCount.set(date, (perDayDomainCount.get(date) || 0) + 1);
+  }
+
+  const last7Days = [];
+  for (let i = 6; i >= 0; i--) {
+    const date = new Date(today);
+    date.setDate(date.getDate() - i);
+    const dateStr = getDateString(date);
+    last7Days.push({
+      date: dateStr,
+      label: date.toLocaleDateString('en-US', { weekday: 'short' }),
+      domains: perDayDomainCount.get(dateStr) || 0,
+      logged: loggedDates.has(dateStr),
+    });
+  }
+
+  return {
+    currentStreak: calculateStreak(loggedDates),
+    longestStreak: calculateLongestStreak(loggedDates),
+    weekTotal: domains.reduce((sum, d) => sum + d.thisWeek, 0),
+    totalLogged,
+    domains,
+    last7Days,
+  };
+}
diff --git a/server/services/meatspaceLoggingStats.test.js b/server/services/meatspaceLoggingStats.test.js
new file mode 100644
index 000000000..b3558820a
--- /dev/null
+++ b/server/services/meatspaceLoggingStats.test.js
@@ -0,0 +1,107 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// Mock the per-domain getters so we can drive getLoggingStats with fixed data.
+const mockAlcohol = vi.fn();
+const mockNicotine = vi.fn();
+const mockWorkouts = vi.fn();
+const mockBody = vi.fn();
+const mockBloodPressure = vi.fn();
+
+vi.mock('./meatspaceAlcohol.js', () => ({ getDailyAlcohol: () => mockAlcohol() }));
+vi.mock('./meatspaceNicotine.js', () => ({ getDailyNicotine: () => mockNicotine() }));
+vi.mock('./meatspaceHealth.js', () => ({
+  getWorkouts: () => mockWorkouts(),
+  getBodyHistory: () => mockBody(),
+  getBloodPressureHistory: () => mockBloodPressure(),
+}));
+
+const { getLoggingStats } = await import('./meatspaceLoggingStats.js');
+
+// Local YYYY-MM-DD for `offset` days ago (mirrors getDateString's local basis).
+function daysAgo(offset) {
+  const d = new Date();
+  d.setDate(d.getDate() - offset);
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+}
+
+beforeEach(() => {
+  mockAlcohol.mockResolvedValue([]);
+  mockNicotine.mockResolvedValue([]);
+  mockWorkouts.mockResolvedValue([]);
+  mockBody.mockResolvedValue([]);
+  mockBloodPressure.mockResolvedValue([]);
+});
+
+describe('getLoggingStats', () => {
+  it('returns a zeroed summary when nothing has been logged', async () => {
+    const stats = await getLoggingStats();
+    expect(stats.currentStreak).toBe(0);
+    expect(stats.longestStreak).toBe(0);
+    expect(stats.totalLogged).toBe(0);
+    expect(stats.weekTotal).toBe(0);
+    expect(stats.last7Days).toHaveLength(7);
+    expect(stats.last7Days.every((d) => d.logged === false && d.domains === 0)).toBe(true);
+    expect(stats.domains.map((d) => d.key)).toEqual([
+      'alcohol', 'nicotine', 'workouts', 'body', 'bloodPressure',
+    ]);
+  });
+
+  it('counts a current streak of consecutive logged days ending today', async () => {
+    mockWorkouts.mockResolvedValue([
+      { date: daysAgo(0) }, { date: daysAgo(1) }, { date: daysAgo(2) },
+    ]);
+    const stats = await getLoggingStats();
+    expect(stats.currentStreak).toBe(3);
+    expect(stats.longestStreak).toBe(3);
+    expect(stats.totalLogged).toBe(3);
+  });
+
+  it('applies the yesterday grace when today has no log', async () => {
+    mockNicotine.mockResolvedValue([{ date: daysAgo(1) }, { date: daysAgo(2) }]);
+    const stats = await getLoggingStats();
+    // Today empty but yesterday+ logged → streak still counts.
+    expect(stats.currentStreak).toBe(2);
+  });
+
+  it('breaks the streak on a gap and reports longest historical run', async () => {
+    mockAlcohol.mockResolvedValue([
+      { date: daysAgo(0) },
+      // gap at daysAgo(1)
+      { date: daysAgo(2) }, { date: daysAgo(3) }, { date: daysAgo(4) },
+    ]);
+    const stats = await getLoggingStats();
+    expect(stats.currentStreak).toBe(1);
+    expect(stats.longestStreak).toBe(3);
+  });
+
+  it('aggregates per-domain this-week counts and de-dupes streak days across domains', async () => {
+    // Alcohol + nicotine both logged today → one streak day, two domain counts.
+    mockAlcohol.mockResolvedValue([{ date: daysAgo(0) }, { date: daysAgo(10) }]);
+    mockNicotine.mockResolvedValue([{ date: daysAgo(0) }]);
+    const stats = await getLoggingStats();
+
+    const alcohol = stats.domains.find((d) => d.key === 'alcohol');
+    const nicotine = stats.domains.find((d) => d.key === 'nicotine');
+    expect(alcohol.total).toBe(2);
+    expect(alcohol.thisWeek).toBe(1); // the 10-day-old entry is outside the window
+    expect(nicotine.thisWeek).toBe(1);
+    expect(stats.weekTotal).toBe(2);
+
+    // Today's sparkline cell reflects both domains, but the streak counts one day.
+    const today = stats.last7Days.at(-1);
+    expect(today.logged).toBe(true);
+    expect(today.domains).toBe(2);
+    expect(stats.currentStreak).toBe(1);
+  });
+
+  it('survives a domain getter that rejects', async () => {
+    mockBody.mockRejectedValue(new Error('disk gone'));
+    mockWorkouts.mockResolvedValue([{ date: daysAgo(0) }]);
+    const stats = await getLoggingStats();
+    expect(stats.currentStreak).toBe(1);
+    expect(stats.domains.find((d) => d.key === 'body').total).toBe(0);
+  });
+});
diff --git a/server/services/meatspacePostDrillCache.js b/server/services/meatspacePostDrillCache.js
index ce98e8c74..caf9517c2 100644
--- a/server/services/meatspacePostDrillCache.js
+++ b/server/services/meatspacePostDrillCache.js
@@ -155,7 +155,10 @@ function isCacheCold(type) {
 export function triggerReplenish(type, providerId, model) {
   if (!CACHEABLE_TYPES.includes(type)) return;
   if (isCacheCold(type)) return;
-  replenishType(type, providerId, model);
+  // Fire-and-forget, but guard the returned promise like requestCacheFill does —
+  // replenishType's inner saveCache() can reject on a disk-write failure, which
+  // would otherwise surface as an unhandled rejection.
+  replenishType(type, providerId, model).catch(err => console.error(`❌ POST cache: triggerReplenish failed: ${err.message}`));
   debouncedSave();
 }
 
diff --git a/server/services/meatspacePostReminder.js b/server/services/meatspacePostReminder.js
index ea7cdb269..d73bd9deb 100644
--- a/server/services/meatspacePostReminder.js
+++ b/server/services/meatspacePostReminder.js
@@ -24,7 +24,7 @@
  */
 
 import { schedule, cancel, parseCronToPrevRun } from './eventScheduler.js';
-import { getUserTimezone, getLocalParts, todayInTimezone, HHMM_STRICT_RE } from '../lib/timezone.js';
+import { getUserTimezone, getTimezoneUpdatedAt, getLocalParts, todayInTimezone, HHMM_STRICT_RE } from '../lib/timezone.js';
 import { getPostConfig, getPostSessions, postConfigEvents } from './meatspacePost.js';
 import { addNotification, getNotifications, NOTIFICATION_TYPES, PRIORITY_LEVELS } from './notifications.js';
 import { settingsEvents } from './settings.js';
@@ -147,18 +147,20 @@ export async function firePostReminderIfIncomplete() {
  * already-notified-today guards), so calling it here is safe even on a rare
  * false-positive gate.
  *
- * KNOWN LIMITATION (tracked in #2040, deliberately out of scope here): this
- * only guards against the reminder's OWN config changing, not the user's
- * GLOBAL timezone changing. If the effective timezone changes such that
+ * `timezoneUpdatedAt` (from getTimezoneUpdatedAt(), stamped by settings.js
+ * whenever the user's GLOBAL timezone actually changes) closes the parallel
+ * gap #2040 tracked: if the user switches their global timezone such that
  * today's slot newly appears to have already passed under the new zone, and
- * the server then restarts before the next natural tick, this can still fire
- * a catch-up for a slot that was never scheduled under the timezone active
- * when it "occurred." Fixing that generally requires a timezone-change
- * timestamp in the shared settings layer (server/services/settings.js), used
- * by every timezone-dependent scheduler — not just this one — so it's
- * tracked separately rather than folded into this issue's narrower scope.
+ * the server then restarts before the next natural tick, the most recent
+ * occurrence still falls on today's local day — but it was never scheduled
+ * under the timezone active when it "occurred." The effective floor is the
+ * LATER of (reminder config last saved, timezone last changed): a slot that
+ * predates EITHER wasn't genuinely owned by the configuration active at that
+ * moment. Both are sentinel-guarded — an absent/unset value (null, 0, missing)
+ * contributes no floor, preserving backward-compatible catch-up for installs
+ * that never recorded them.
  */
-async function catchUpMissedSlot(cron, timezone, reminderUpdatedAt) {
+async function catchUpMissedSlot(cron, timezone, reminderUpdatedAt, timezoneUpdatedAt) {
   const now = Date.now();
   const prevRun = parseCronToPrevRun(cron, new Date(now), timezone);
   if (!prevRun) return;
@@ -167,7 +169,19 @@ async function catchUpMissedSlot(cron, timezone, reminderUpdatedAt) {
   const todayStr = todayInTimezone(timezone);
   if (!isOnLocalDay(prevRunMs, timezone, todayStr)) return;
 
-  if (reminderUpdatedAt && prevRunMs < new Date(reminderUpdatedAt).getTime()) return;
+  // Normalize either cutoff (ISO string reminderUpdatedAt, numeric-ms
+  // timezoneUpdatedAt) to a valid UTC-ms floor, treating unset/invalid as 0 so
+  // it never gates. The effective cutoff is the later of the two.
+  const toMs = (v) => {
+    if (!v) return 0;
+    const t = typeof v === 'number' ? v : new Date(v).getTime();
+    return Number.isFinite(t) ? t : 0;
+  };
+  const cutoff = Math.max(toMs(reminderUpdatedAt), toMs(timezoneUpdatedAt));
+  if (cutoff && prevRunMs < cutoff) {
+    console.log(`🔔 POST reminder: missed slot (${prevRun.toISOString()}) predates last config/timezone change — skipping catch-up`);
+    return;
+  }
 
   console.log(`🔔 POST reminder: missed slot detected (${prevRun.toISOString()}) — catching up now`);
   await firePostReminderIfIncomplete();
@@ -216,7 +230,8 @@ export async function registerPostReminderSchedule({ catchUpMissedSlot: shouldCa
   console.log(`🔔 POST reminder: registered daily at ${time} (${timezone})`);
 
   if (shouldCatchUp) {
-    await catchUpMissedSlot(cron, timezone, updatedAt);
+    const timezoneUpdatedAt = await getTimezoneUpdatedAt();
+    await catchUpMissedSlot(cron, timezone, updatedAt, timezoneUpdatedAt);
   }
 }
 
diff --git a/server/services/meatspacePostReminder.test.js b/server/services/meatspacePostReminder.test.js
index 1ce46a82a..3f5f7fd7d 100644
--- a/server/services/meatspacePostReminder.test.js
+++ b/server/services/meatspacePostReminder.test.js
@@ -38,6 +38,7 @@ vi.mock('./eventScheduler.js', () => ({
 
 vi.mock('../lib/timezone.js', () => ({
   getUserTimezone: vi.fn().mockResolvedValue('UTC'),
+  getTimezoneUpdatedAt: vi.fn().mockResolvedValue(null),
   getLocalParts: vi.fn(),
   todayInTimezone: vi.fn(),
   HHMM_STRICT_RE: /^([01]\d|2[0-3]):[0-5]\d$/
@@ -61,7 +62,7 @@ vi.mock('./settings.js', () => ({
 }));
 
 import { schedule, cancel, parseCronToPrevRun } from './eventScheduler.js';
-import { getUserTimezone, getLocalParts, todayInTimezone } from '../lib/timezone.js';
+import { getUserTimezone, getTimezoneUpdatedAt, getLocalParts, todayInTimezone } from '../lib/timezone.js';
 import { getPostConfig, getPostSessions } from './meatspacePost.js';
 import { addNotification, getNotifications } from './notifications.js';
 import {
@@ -92,6 +93,7 @@ describe('registerPostReminderSchedule', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     getUserTimezone.mockResolvedValue('UTC');
+    getTimezoneUpdatedAt.mockResolvedValue(null);
     parseCronToPrevRun.mockReturnValue(null);
   });
 
@@ -250,6 +252,92 @@ describe('registerPostReminderSchedule', () => {
       expect(addNotification).toHaveBeenCalledTimes(1);
     });
 
+    // Regression (#2040): a same-day missed slot must ALSO be gated on when the
+    // user's GLOBAL timezone last changed, not just the reminder's own config.
+    // If the user switches timezone such that today's slot newly appears
+    // already-passed under the new zone, then the server restarts later the
+    // same local day, replaying that slot would nag for a slot that was never
+    // scheduled under the timezone active when it "occurred."
+    it('does not fire when the missed slot predates the last global timezone change', async () => {
+      getPostConfig.mockResolvedValue({ reminder: { enabled: true, time: '09:00' } });
+      todayInTimezone.mockReturnValue('2026-07-01');
+      getLocalParts.mockReturnValue({ year: 2026, month: 7, day: 1 });
+      // The 09:00 slot happened BEFORE the 10:00 timezone switch.
+      parseCronToPrevRun.mockReturnValue(new Date('2026-07-01T09:00:00.000Z'));
+      getTimezoneUpdatedAt.mockResolvedValue(new Date('2026-07-01T10:00:00.000Z').getTime());
+
+      await registerPostReminderSchedule({ catchUpMissedSlot: true });
+
+      expect(addNotification).not.toHaveBeenCalled();
+      expect(getPostSessions).not.toHaveBeenCalled();
+    });
+
+    it('fires when the missed slot occurred after the last global timezone change', async () => {
+      getPostConfig.mockResolvedValue({ reminder: { enabled: true, time: '09:00' } });
+      getPostSessions.mockResolvedValue([]);
+      todayInTimezone.mockReturnValue('2026-07-01');
+      getLocalParts.mockReturnValue({ year: 2026, month: 7, day: 1 });
+      parseCronToPrevRun.mockReturnValue(new Date('2026-07-01T09:00:00.000Z'));
+      // Timezone last changed BEFORE the slot — the slot is genuinely owned by
+      // the currently-active zone, so catch-up proceeds.
+      getTimezoneUpdatedAt.mockResolvedValue(new Date('2026-06-01T00:00:00.000Z').getTime());
+
+      await registerPostReminderSchedule({ catchUpMissedSlot: true });
+
+      expect(addNotification).toHaveBeenCalledTimes(1);
+    });
+
+    // The effective floor is the LATER of the two cutoffs. Here the reminder
+    // config was saved BEFORE the slot (its own guard alone would allow the
+    // fire), but the timezone changed AFTER the slot — the later (timezone)
+    // cutoff must win and block the catch-up.
+    it('uses the later of (reminder config, timezone change) cutoffs — timezone wins', async () => {
+      getPostConfig.mockResolvedValue({
+        reminder: { enabled: true, time: '09:00', updatedAt: '2026-07-01T08:00:00.000Z' }
+      });
+      todayInTimezone.mockReturnValue('2026-07-01');
+      getLocalParts.mockReturnValue({ year: 2026, month: 7, day: 1 });
+      parseCronToPrevRun.mockReturnValue(new Date('2026-07-01T09:00:00.000Z'));
+      getTimezoneUpdatedAt.mockResolvedValue(new Date('2026-07-01T10:00:00.000Z').getTime());
+
+      await registerPostReminderSchedule({ catchUpMissedSlot: true });
+
+      expect(addNotification).not.toHaveBeenCalled();
+    });
+
+    // Inverse: timezone changed BEFORE the slot but the reminder config was
+    // saved AFTER it — the later (reminder) cutoff wins and blocks.
+    it('uses the later of (reminder config, timezone change) cutoffs — reminder config wins', async () => {
+      getPostConfig.mockResolvedValue({
+        reminder: { enabled: true, time: '09:00', updatedAt: '2026-07-01T10:00:00.000Z' }
+      });
+      todayInTimezone.mockReturnValue('2026-07-01');
+      getLocalParts.mockReturnValue({ year: 2026, month: 7, day: 1 });
+      parseCronToPrevRun.mockReturnValue(new Date('2026-07-01T09:00:00.000Z'));
+      getTimezoneUpdatedAt.mockResolvedValue(new Date('2026-07-01T08:00:00.000Z').getTime());
+
+      await registerPostReminderSchedule({ catchUpMissedSlot: true });
+
+      expect(addNotification).not.toHaveBeenCalled();
+    });
+
+    // Both cutoffs predate the slot → the slot is owned by the current config
+    // AND the current zone, so catch-up fires.
+    it('fires when the slot postdates both the reminder config and the timezone change', async () => {
+      getPostConfig.mockResolvedValue({
+        reminder: { enabled: true, time: '09:00', updatedAt: '2026-06-15T00:00:00.000Z' }
+      });
+      getPostSessions.mockResolvedValue([]);
+      todayInTimezone.mockReturnValue('2026-07-01');
+      getLocalParts.mockReturnValue({ year: 2026, month: 7, day: 1 });
+      parseCronToPrevRun.mockReturnValue(new Date('2026-07-01T09:00:00.000Z'));
+      getTimezoneUpdatedAt.mockResolvedValue(new Date('2026-06-20T00:00:00.000Z').getTime());
+
+      await registerPostReminderSchedule({ catchUpMissedSlot: true });
+
+      expect(addNotification).toHaveBeenCalledTimes(1);
+    });
+
     it('is idempotent — firePostReminderIfIncomplete still skips when today is already complete', async () => {
       getPostConfig.mockResolvedValue({ reminder: { enabled: true, time: '09:00' } });
       todayInTimezone.mockReturnValue('2026-07-01');
diff --git a/server/services/mediaSketches.js b/server/services/mediaSketches.js
new file mode 100644
index 000000000..7a3abce41
--- /dev/null
+++ b/server/services/mediaSketches.js
@@ -0,0 +1,152 @@
+/**
+ * Sketch & annotation overlays for generated media, keyed by `<kind>:<ref>`.
+ *
+ * Phase 1 of the Sketch & Annotation Canvas (issue #2036): a user draws over an
+ * existing generated image and the strokes are persisted as a per-key sidecar so
+ * they survive reload and job pruning. Each key stores two files:
+ *
+ *   data/media-sketches/<id>.json  — stroke vectors + canvas dimensions
+ *   data/media-sketches/<id>.png   — flattened raster (image + strokes)
+ *
+ * where `<id>` is a filesystem-safe base64url encoding of the `<kind>:<ref>` key
+ * (a ref is an arbitrary filename, so it can't be used as a path segment
+ * directly). This is file-backed sidecar data (media-adjacent binary + vector
+ * blobs, no relational shape) per the docs/STORAGE.md classification — the same
+ * class as media-annotations.json / thumbnails, NOT a db-primary record.
+ */
+
+import { join } from 'path';
+import { unlink } from 'fs/promises';
+import { PATHS, atomicWrite, readJSONFile, ensureDir, tryReadFile } from '../lib/fileUtils.js';
+import { isValidKey, parseKey } from '../lib/mediaItemKey.js';
+
+const SKETCH_DIR = join(PATHS.data, 'media-sketches');
+
+export const ERR_VALIDATION = 'VALIDATION_ERROR';
+const makeErr = (message, code) => Object.assign(new Error(message), { code });
+
+// Guardrails so a hand-rolled or malicious payload can't balloon a sidecar.
+export const MAX_STROKES = 5000;
+export const MAX_POINTS_PER_STROKE = 20000;
+export const STROKE_MODES = new Set(['draw', 'erase']);
+
+export { isValidKey };
+
+// A ref is an arbitrary filename (e.g. `image:my file:v2.png` is rejected by
+// parseKey, but `image:my-file.png` is fine and still needs escaping for a
+// path segment). base64url keeps every valid key to a single safe token.
+const keyToId = (key) => Buffer.from(key, 'utf8').toString('base64url');
+const jsonPathFor = (key) => join(SKETCH_DIR, `${keyToId(key)}.json`);
+const pngPathFor = (key) => join(SKETCH_DIR, `${keyToId(key)}.png`);
+
+const DATA_URL_PNG = /^data:image\/png;base64,([A-Za-z0-9+/=]+)$/;
+
+const isFinitePositive = (n) => typeof n === 'number' && Number.isFinite(n) && n > 0;
+
+// Sanitize a single stroke into the persisted shape or return null to drop it.
+function sanitizeStroke(raw) {
+  if (!raw || typeof raw !== 'object') return null;
+  if (!Array.isArray(raw.points) || raw.points.length === 0) return null;
+  const points = [];
+  for (const p of raw.points) {
+    if (!p || typeof p !== 'object') continue;
+    if (typeof p.x !== 'number' || typeof p.y !== 'number') continue;
+    if (!Number.isFinite(p.x) || !Number.isFinite(p.y)) continue;
+    points.push({ x: p.x, y: p.y });
+    if (points.length >= MAX_POINTS_PER_STROKE) break;
+  }
+  if (points.length === 0) return null;
+  const mode = STROKE_MODES.has(raw.mode) ? raw.mode : 'draw';
+  const color = typeof raw.color === 'string' ? raw.color.slice(0, 32) : '#ef4444';
+  const size = isFinitePositive(raw.size) ? Math.min(raw.size, 512) : 4;
+  return { mode, color, size, points };
+}
+
+export function sanitizeSketchInput(input) {
+  if (!input || typeof input !== 'object') throw makeErr('sketch payload required', ERR_VALIDATION);
+  if (!Array.isArray(input.strokes)) throw makeErr('strokes must be an array', ERR_VALIDATION);
+  if (!isFinitePositive(input.width) || !isFinitePositive(input.height)) {
+    throw makeErr('width and height must be positive numbers', ERR_VALIDATION);
+  }
+  const strokes = [];
+  for (const raw of input.strokes) {
+    const s = sanitizeStroke(raw);
+    if (s) strokes.push(s);
+    if (strokes.length >= MAX_STROKES) break;
+  }
+  let png = null;
+  if (typeof input.png === 'string' && input.png) {
+    const m = DATA_URL_PNG.exec(input.png);
+    if (!m) throw makeErr('png must be a data:image/png;base64 URL', ERR_VALIDATION);
+    png = Buffer.from(m[1], 'base64');
+  }
+  return {
+    width: input.width,
+    height: input.height,
+    strokes,
+    png, // Buffer | null
+  };
+}
+
+/** Read the persisted sketch for a key, or null when none exists. */
+export async function getSketch(key) {
+  if (!isValidKey(key)) throw makeErr(`Invalid key: ${key}`, ERR_VALIDATION);
+  const data = await readJSONFile(jsonPathFor(key), null, { logError: false });
+  if (!data || typeof data !== 'object' || !Array.isArray(data.strokes)) return null;
+  return {
+    key,
+    width: data.width,
+    height: data.height,
+    strokes: data.strokes,
+    updatedAt: data.updatedAt || null,
+    hasPng: !!data.hasPng,
+  };
+}
+
+/** Raw flattened PNG bytes for a key, or null. */
+export async function getSketchPng(key) {
+  if (!isValidKey(key)) throw makeErr(`Invalid key: ${key}`, ERR_VALIDATION);
+  return tryReadFile(pngPathFor(key), null); // Buffer | null
+}
+
+/**
+ * Persist (or replace) the sketch for a key. An empty stroke list removes the
+ * sidecar entirely so a fully-erased canvas doesn't leave a stale record.
+ * Returns the stored projection `{ key, width, height, strokes, updatedAt, hasPng }`.
+ */
+export async function saveSketch(key, input) {
+  if (!isValidKey(key)) throw makeErr(`Invalid key: ${key}`, ERR_VALIDATION);
+  const parsed = parseKey(key);
+  if (parsed.kind !== 'image') throw makeErr('Only image media can be annotated', ERR_VALIDATION);
+  const clean = sanitizeSketchInput(input);
+  await ensureDir(SKETCH_DIR);
+
+  if (clean.strokes.length === 0) {
+    await removeSketch(key);
+    return { key, width: clean.width, height: clean.height, strokes: [], updatedAt: null, hasPng: false };
+  }
+
+  const hasPng = !!clean.png;
+  if (hasPng) await atomicWrite(pngPathFor(key), clean.png);
+  // A re-save that carries only vectors (no PNG) must drop any prior flattened
+  // export, otherwise `hasPng:false` in the JSON disagrees with a stale
+  // `<id>.png` that getSketchPng() would keep streaming.
+  else await unlink(pngPathFor(key)).catch(() => {});
+  const record = {
+    key,
+    width: clean.width,
+    height: clean.height,
+    strokes: clean.strokes,
+    updatedAt: new Date().toISOString(),
+    hasPng,
+  };
+  await atomicWrite(jsonPathFor(key), record);
+  return record;
+}
+
+/** Remove a key's sidecar (json + png). Idempotent. */
+export async function removeSketch(key) {
+  if (!isValidKey(key)) throw makeErr(`Invalid key: ${key}`, ERR_VALIDATION);
+  await unlink(jsonPathFor(key)).catch(() => {});
+  await unlink(pngPathFor(key)).catch(() => {});
+}
diff --git a/server/services/mediaSketches.test.js b/server/services/mediaSketches.test.js
new file mode 100644
index 000000000..390f182a5
--- /dev/null
+++ b/server/services/mediaSketches.test.js
@@ -0,0 +1,103 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+
+const fileStore = new Map();
+
+vi.mock('../lib/fileUtils.js', () => ({
+  PATHS: { data: '/mock/data' },
+  ensureDir: vi.fn().mockResolvedValue(undefined),
+  atomicWrite: vi.fn(async (path, data) => { fileStore.set(path, data); }),
+  readJSONFile: vi.fn(async (path, fallback) => (fileStore.has(path) ? fileStore.get(path) : fallback)),
+  tryReadFile: vi.fn(async (path) => (fileStore.has(path) ? fileStore.get(path) : null)),
+}));
+
+vi.mock('fs/promises', () => ({
+  unlink: vi.fn(async (path) => { fileStore.delete(path); }),
+}));
+
+const svc = await import('./mediaSketches.js');
+
+const KEY = 'image:foo.png';
+const PNG_DATA_URL = `data:image/png;base64,${Buffer.from('fake-png-bytes').toString('base64')}`;
+
+const sampleStrokes = [
+  { mode: 'draw', color: '#ef4444', size: 6, points: [{ x: 1, y: 2 }, { x: 3, y: 4 }] },
+  { mode: 'erase', color: '#000000', size: 12, points: [{ x: 5, y: 6 }] },
+];
+
+describe('mediaSketches service', () => {
+  beforeEach(() => { fileStore.clear(); });
+
+  it('getSketch returns null for a fresh key', async () => {
+    expect(await svc.getSketch(KEY)).toBeNull();
+  });
+
+  it('saveSketch → getSketch round-trips strokes + dimensions', async () => {
+    const saved = await svc.saveSketch(KEY, { width: 100, height: 80, strokes: sampleStrokes, png: PNG_DATA_URL });
+    expect(saved.strokes).toHaveLength(2);
+    expect(saved.width).toBe(100);
+    expect(saved.hasPng).toBe(true);
+    expect(saved.updatedAt).toBeTruthy();
+
+    const loaded = await svc.getSketch(KEY);
+    expect(loaded.strokes).toEqual(saved.strokes);
+    expect(loaded.width).toBe(100);
+    expect(loaded.height).toBe(80);
+    expect(loaded.hasPng).toBe(true);
+  });
+
+  it('saveSketch persists the flattened PNG as decoded bytes', async () => {
+    await svc.saveSketch(KEY, { width: 10, height: 10, strokes: sampleStrokes, png: PNG_DATA_URL });
+    const png = await svc.getSketchPng(KEY);
+    expect(Buffer.isBuffer(png)).toBe(true);
+    expect(png.toString()).toBe('fake-png-bytes');
+  });
+
+  it('re-saving with strokes but no PNG drops the stale flattened export', async () => {
+    await svc.saveSketch(KEY, { width: 10, height: 10, strokes: sampleStrokes, png: PNG_DATA_URL });
+    expect(await svc.getSketchPng(KEY)).not.toBeNull();
+    // Second save carries vectors only — the old PNG must be removed so hasPng
+    // (false) agrees with what /png serves.
+    const resaved = await svc.saveSketch(KEY, { width: 10, height: 10, strokes: sampleStrokes });
+    expect(resaved.hasPng).toBe(false);
+    expect(await svc.getSketchPng(KEY)).toBeNull();
+  });
+
+  it('saveSketch with empty strokes removes the sidecar', async () => {
+    await svc.saveSketch(KEY, { width: 10, height: 10, strokes: sampleStrokes, png: PNG_DATA_URL });
+    expect(await svc.getSketch(KEY)).not.toBeNull();
+    const cleared = await svc.saveSketch(KEY, { width: 10, height: 10, strokes: [] });
+    expect(cleared.strokes).toEqual([]);
+    expect(await svc.getSketch(KEY)).toBeNull();
+  });
+
+  it('sanitizeSketchInput drops malformed strokes/points and clamps size', () => {
+    const clean = svc.sanitizeSketchInput({
+      width: 50,
+      height: 50,
+      strokes: [
+        { points: [] },                                   // dropped: no points
+        { points: [{ x: 'bad', y: 1 }] },                 // dropped: non-numeric → no valid points
+        { mode: 'weird', points: [{ x: 1, y: 1 }] },      // mode coerced to draw
+        { size: 9999, points: [{ x: 2, y: 2 }] },         // size clamped to 512
+      ],
+    });
+    expect(clean.strokes).toHaveLength(2);
+    expect(clean.strokes[0].mode).toBe('draw');
+    expect(clean.strokes[1].size).toBe(512);
+    expect(clean.png).toBeNull();
+  });
+
+  it('rejects a non-image key', async () => {
+    await expect(svc.saveSketch('video:abc', { width: 1, height: 1, strokes: sampleStrokes }))
+      .rejects.toMatchObject({ code: svc.ERR_VALIDATION });
+  });
+
+  it('rejects an invalid key', async () => {
+    await expect(svc.getSketch('not-a-key')).rejects.toMatchObject({ code: svc.ERR_VALIDATION });
+  });
+
+  it('rejects a non-PNG data URL', () => {
+    expect(() => svc.sanitizeSketchInput({ width: 1, height: 1, strokes: [], png: 'data:image/jpeg;base64,AAAA' }))
+      .toThrowError();
+  });
+});
diff --git a/server/services/memoryClassifier.js b/server/services/memoryClassifier.js
index 2fbba0b1a..d5e779d9c 100644
--- a/server/services/memoryClassifier.js
+++ b/server/services/memoryClassifier.js
@@ -380,7 +380,7 @@ export async function classifyMemories(task, agentOutput) {
   const result = parseLLMResponse(llmResponse);
 
   if (result.parseError) {
-    console.log('⚠️ Failed to parse LLM response, raw:', llmResponse.substring(0, 200));
+    console.log(`⚠️ Failed to parse LLM response, raw: ${llmResponse.substring(0, 200)}`);
     return {
       memories: [],
       rejected: [],
diff --git a/server/services/messageSync.js b/server/services/messageSync.js
index 66e6cdf12..e9984a808 100644
--- a/server/services/messageSync.js
+++ b/server/services/messageSync.js
@@ -3,6 +3,7 @@ import { createHash } from 'crypto';
 import { join } from 'path';
 import { atomicWrite, ensureDir, filterBySearch as genericFilterBySearch, PATHS, safeDate, safeJSONParse, UUID_RE, tryReadFile } from '../lib/fileUtils.js';
 import { getAccount, updateSyncStatus } from './messageAccounts.js';
+import { getUserTimezone, getLocalParts } from '../lib/timezone.js';
 import { v4 as uuidv4 } from '../lib/uuid.js';
 
 const CACHE_DIR = join(PATHS.messages, 'cache');
@@ -185,6 +186,15 @@ export async function syncAccount(accountId, io, options = {}) {
     await saveCache(accountId, cache);
     await updateSyncStatus(accountId, providerStatus === 'success' ? 'success' : providerStatus);
 
+    // Auto-log Tribe touchpoints from the cached messages (#2033) — secondary
+    // effect, must not fail the sync. Scans the full (maxMessages-capped) cache
+    // rather than only the newly-added batch, mirroring the calendar path: so
+    // adding a person's email AFTER their messages synced still backfills, and a
+    // prior auto-log failure self-heals on the next sync. Deduped per thread+day
+    // (partial unique index), so re-scanning already-logged messages is a no-op.
+    await logMessageTouchpoints(account, cache.messages).catch((err) =>
+      console.error(`🤝 Tribe auto-log failed for account ${accountId}: ${err.message}`));
+
     io?.emit('messages:sync:completed', { accountId, newMessages: uniqueNew.length, pruned, status: providerStatus });
     if (providerStatus === 'success') {
       io?.emit('messages:changed', {});
@@ -322,3 +332,64 @@ export async function getSyncStatus(accountId) {
     lastSyncStatus: account.lastSyncStatus
   };
 }
+
+// Normalize a message participant (from is `{ name, email }`, to/cc are bare
+// email strings) to the `{ email, name }` shape the Tribe matcher expects.
+function toIdentity(participant) {
+  if (!participant) return null;
+  if (typeof participant === 'string') return { email: participant };
+  return { email: participant.email || '', name: participant.name || '' };
+}
+
+// Auto-log Tribe touchpoints for synced messages (#2033). Deterministic: the
+// message counterparts (sender + recipients, excluding the account's own
+// address) are matched to tracked people by email/handle (or unique exact name)
+// and one touchpoint per person is logged, deduped per thread + calendar day so
+// a long thread doesn't spam touchpoints. Tribe is imported dynamically to avoid
+// a static import cycle. A no-op when nothing is tracked.
+export async function logMessageTouchpoints(account, messages = []) {
+  const selfEmail = String(account?.email || '').trim().toLowerCase();
+  // Derive the dedupe "calendar day" in the user's LOCAL timezone (matching the
+  // Tribe cadence math in tribeCadence.daysSinceDate). Using the UTC day here
+  // would split one local evening of contact across two days whenever a thread
+  // straddles UTC midnight (common in the Americas), double-logging touchpoints.
+  const timezone = await getUserTimezone();
+  const localDay = (when) => {
+    const p = getLocalParts(new Date(safeDate(when)), timezone);
+    return `${p.year}-${String(p.month).padStart(2, '0')}-${String(p.day).padStart(2, '0')}`;
+  };
+  const candidates = [];
+  for (const message of messages) {
+    const participants = [message.from, ...(message.to || []), ...(message.cc || [])];
+    const identities = participants
+      .map(toIdentity)
+      .filter((identity) => {
+        if (!identity) return false;
+        const email = (identity.email || '').trim().toLowerCase();
+        if (email && email === selfEmail) return false; // exclude the account owner
+        // Keep name-only participants too so the matcher's unique-name fallback
+        // still applies (mirrors the calendar path, which passes every identity).
+        return Boolean(email || identity.name);
+      });
+    if (identities.length === 0) continue;
+    const when = message.date || new Date().toISOString();
+    const day = localDay(when);
+    const threadKey = message.threadId || message.id;
+    candidates.push({
+      identities,
+      source: 'message',
+      happenedAt: when,
+      channel: account?.type || 'Message',
+      summary: message.subject || 'Message touchpoint',
+      dedupeKey: `msg:${account?.id}:${threadKey}:${day}`,
+      metadata: { subject: message.subject, threadId: message.threadId || null },
+    });
+  }
+  if (candidates.length === 0) return { created: 0, matched: 0 };
+  const tribe = await import('./tribe.js');
+  const result = await tribe.autoLogTouchpoints(candidates);
+  if (result.created > 0) {
+    console.log(`🤝 Auto-logged ${result.created} message touchpoint(s) for account ${account?.id}`);
+  }
+  return result;
+}
diff --git a/server/services/messageSync.test.js b/server/services/messageSync.test.js
index 3791f7226..7bb7b0fe7 100644
--- a/server/services/messageSync.test.js
+++ b/server/services/messageSync.test.js
@@ -46,9 +46,38 @@ vi.mock('./messagePlaywrightSync.js', () => ({
   refreshMessageDetail: vi.fn()
 }));
 
+// tribe.js is loaded dynamically by logMessageTouchpoints; mock it so the
+// producer test asserts the candidates without a live Postgres.
+vi.mock('./tribe.js', () => ({
+  autoLogTouchpoints: vi.fn().mockResolvedValue({ created: 0, matched: 0 }),
+}));
+
+// The dedupe day is derived in the user's LOCAL timezone. Mock the tz module
+// self-contained (getUserTimezone → mockTimezone, default UTC so the existing
+// UTC-day assertions hold; getLocalParts is a faithful Intl-based re-impl of the
+// real one) — importActual would load the real module against the mocked
+// fileUtils and fail on its settings read.
+let mockTimezone = 'UTC';
+vi.mock('../lib/timezone.js', () => ({
+  getUserTimezone: vi.fn(async () => mockTimezone),
+  getLocalParts: (utcDate, timezone) => {
+    const parts = {};
+    const fmt = new Intl.DateTimeFormat('en-US', {
+      timeZone: timezone, year: 'numeric', month: '2-digit', day: '2-digit',
+      hour: '2-digit', minute: '2-digit', hour12: false,
+    });
+    for (const { type, value } of fmt.formatToParts(utcDate)) parts[type] = value;
+    return {
+      year: parseInt(parts.year), month: parseInt(parts.month), day: parseInt(parts.day),
+      hour: parts.hour === '24' ? 0 : parseInt(parts.hour), minute: parseInt(parts.minute),
+    };
+  },
+}));
+
 import { readdir, unlink } from 'fs/promises';
 import { tryReadFile as readFile, atomicWrite } from '../lib/fileUtils.js';
-import { getMessages, getMessage, syncAccount, deleteCache, getSyncStatus, refreshMessage } from './messageSync.js';
+import { getMessages, getMessage, syncAccount, deleteCache, getSyncStatus, refreshMessage, logMessageTouchpoints } from './messageSync.js';
+import { autoLogTouchpoints } from './tribe.js';
 import { getAccount, updateSyncStatus } from './messageAccounts.js';
 import { syncGmail } from './messageGmailSync.js';
 import { syncPlaywright, refreshMessageDetail } from './messagePlaywrightSync.js';
@@ -566,3 +595,77 @@ describe('refreshMessage', () => {
     expect(original.bodyText).toBe('');
   });
 });
+
+describe('logMessageTouchpoints — candidate building (#2033)', () => {
+  const account = { id: VALID_UUID, type: 'gmail', email: 'me@work.com' };
+
+  beforeEach(() => {
+    autoLogTouchpoints.mockClear();
+    autoLogTouchpoints.mockResolvedValue({ created: 1, matched: 1 });
+    mockTimezone = 'UTC';
+  });
+
+  it('builds a message candidate keyed per thread + day, excluding the account owner', async () => {
+    await logMessageTouchpoints(account, [{
+      id: 'm1',
+      threadId: 'thread-9',
+      subject: 'Lunch?',
+      date: '2026-06-01T12:00:00Z',
+      from: { name: 'Ada', email: 'ada@work.com' },
+      to: ['me@work.com', 'grace@x.io'],
+      cc: [],
+    }]);
+
+    expect(autoLogTouchpoints).toHaveBeenCalledTimes(1);
+    const [candidates] = autoLogTouchpoints.mock.calls[0];
+    expect(candidates).toHaveLength(1);
+    expect(candidates[0]).toMatchObject({
+      source: 'message',
+      dedupeKey: `msg:${VALID_UUID}:thread-9:2026-06-01`,
+      summary: 'Lunch?',
+    });
+    // Own address excluded; sender + other recipient remain.
+    const emails = candidates[0].identities.map((i) => i.email).sort();
+    expect(emails).toEqual(['ada@work.com', 'grace@x.io']);
+  });
+
+  it('falls back to the message id when there is no threadId', async () => {
+    await logMessageTouchpoints(account, [{
+      id: 'm2', subject: 'Hi', date: '2026-06-02T00:00:00Z',
+      from: { name: 'Grace', email: 'grace@x.io' }, to: [], cc: [],
+    }]);
+    const [candidates] = autoLogTouchpoints.mock.calls[0];
+    expect(candidates[0].dedupeKey).toBe(`msg:${VALID_UUID}:m2:2026-06-02`);
+  });
+
+  it('keeps a name-only participant so the matcher unique-name fallback applies', async () => {
+    await logMessageTouchpoints(account, [{
+      id: 'm4', subject: 'Hi', date: '2026-06-01T00:00:00Z',
+      from: { name: 'Ada Lovelace', email: '' }, to: [], cc: [],
+    }]);
+    const [candidates] = autoLogTouchpoints.mock.calls[0];
+    expect(candidates[0].identities).toEqual([{ email: '', name: 'Ada Lovelace' }]);
+  });
+
+  it('skips a message with no counterpart beyond the account owner', async () => {
+    await logMessageTouchpoints(account, [{
+      id: 'm3', date: '2026-06-01T00:00:00Z',
+      from: { name: 'Me', email: 'me@work.com' }, to: ['me@work.com'], cc: [],
+    }]);
+    expect(autoLogTouchpoints).not.toHaveBeenCalled();
+  });
+
+  it('derives the dedupe day in the user local timezone, not UTC', async () => {
+    // 03:00Z on Jun 2 is still Jun 1 (20:00) in America/Los_Angeles. The dedupe
+    // day must be the LOCAL day (2026-06-01) so a same-local-evening thread that
+    // straddles UTC midnight collapses to one touchpoint, matching cadence math.
+    mockTimezone = 'America/Los_Angeles';
+    await logMessageTouchpoints(account, [{
+      id: 'm5', threadId: 'thread-tz', subject: 'Evening',
+      date: '2026-06-02T03:00:00Z',
+      from: { name: 'Ada', email: 'ada@work.com' }, to: [], cc: [],
+    }]);
+    const [candidates] = autoLogTouchpoints.mock.calls[0];
+    expect(candidates[0].dedupeKey).toBe(`msg:${VALID_UUID}:thread-tz:2026-06-01`);
+  });
+});
diff --git a/server/services/musicVideo/projectsLogic.js b/server/services/musicVideo/projectsLogic.js
index 164a9ec7a..0280e0b18 100644
--- a/server/services/musicVideo/projectsLogic.js
+++ b/server/services/musicVideo/projectsLogic.js
@@ -100,7 +100,15 @@ export function applyProjectPatch(project, patch) {
     || ('uploadedAudioFilename' in patch && patch.uploadedAudioFilename !== project.uploadedAudioFilename);
   if (!trackChanged) return touch(project, patch);
   const scenes = (project.scenes || []).map((s) => (s.beatAligned ? { ...s, beatAligned: false } : s));
-  return touch(project, { ...patch, audioAnalysis: null, scenes });
+  // Clearing audioAnalysis means the project must be re-analyzed before it can be
+  // planned/arranged/rendered, so a status that implies analysis existed
+  // (`analyzed`/`ready`/`rendering`/`complete`) is now stale. Regress it to `draft` —
+  // the inverse of setAudioAnalysis's draft→analyzed flip — unless the caller set an
+  // explicit status in this same patch. `draft`/`failed` already imply no usable
+  // analysis, so leave those untouched.
+  const regressStatus = !patch.status && !['draft', 'failed'].includes(project.status);
+  const statusPatch = regressStatus ? { status: 'draft' } : {};
+  return touch(project, { ...patch, ...statusPatch, audioAnalysis: null, scenes });
 }
 
 /**
diff --git a/server/services/musicVideo/projectsLogic.test.js b/server/services/musicVideo/projectsLogic.test.js
index 0bd14aa31..c458c403a 100644
--- a/server/services/musicVideo/projectsLogic.test.js
+++ b/server/services/musicVideo/projectsLogic.test.js
@@ -98,6 +98,29 @@ describe('applyProjectPatch', () => {
     expect(next.scenes[1]).toMatchObject({ beatAligned: false, startSec: 3, endSec: 4 });
   });
 
+  it('regresses status to draft on track change since the cleared analysis must be redone', () => {
+    const analyzed = setAudioAnalysis({ ...baseProject(), trackId: 't1', status: 'ready' }, {
+      bpm: 120, beats: [0], downbeats: [0], sections: [{ label: 'S', startSec: 0, endSec: 1 }], durationSec: 1,
+    });
+    expect(analyzed.status).toBe('ready');
+    const next = applyProjectPatch(analyzed, { trackId: 't2' });
+    expect(next.status).toBe('draft');
+    expect(next.audioAnalysis).toBeNull();
+  });
+
+  it('honors an explicit status in the same track-change patch instead of regressing', () => {
+    const analyzed = setAudioAnalysis({ ...baseProject(), trackId: 't1', status: 'ready' }, {
+      bpm: 120, beats: [0], downbeats: [0], sections: [{ label: 'S', startSec: 0, endSec: 1 }], durationSec: 1,
+    });
+    const next = applyProjectPatch(analyzed, { trackId: 't2', status: 'analyzed' });
+    expect(next.status).toBe('analyzed');
+  });
+
+  it('leaves status untouched on a track change when the project is still a draft', () => {
+    const next = applyProjectPatch({ ...baseProject(), trackId: 't1', status: 'draft' }, { trackId: 't2' });
+    expect(next.status).toBe('draft');
+  });
+
   it('leaves scene beatAligned flags untouched when the track does not change', () => {
     const withScenes = {
       ...baseProject(),
diff --git a/server/services/proactiveAlerts.js b/server/services/proactiveAlerts.js
index 5a7dcc839..a4ff6d025 100644
--- a/server/services/proactiveAlerts.js
+++ b/server/services/proactiveAlerts.js
@@ -17,6 +17,7 @@ import { getGoals } from './identity.js';
 import { getPerformanceSummary, getLearningSummary } from './taskLearning.js';
 import { listProcesses } from './pm2.js';
 import { getUsage } from './usage.js';
+import { getCareSummary } from './tribe.js';
 import { getMemoryStats } from '../lib/memoryStats.js';
 
 const STALL_THRESHOLD_DAYS = 14;
@@ -238,6 +239,26 @@ async function checkUsageSpikes() {
   return alerts;
 }
 
+/**
+ * Detect Tribe relationships overdue for contact (or never contacted).
+ * Quiet when nobody is overdue. Reuses the server-side cadence source of truth.
+ */
+async function checkTribeCadence() {
+  const summary = await getCareSummary(3).catch(() => null);
+  if (!summary || summary.overdueCount === 0) return [];
+
+  const names = summary.overdue.map((p) => p.name).filter(Boolean).join(', ');
+  const overflow = summary.overdueCount > summary.overdue.length ? ', …' : '';
+  return [{
+    type: 'tribe_cadence',
+    severity: summary.overdueCount >= 3 ? 'high' : 'medium',
+    title: `${summary.overdueCount} ${summary.overdueCount === 1 ? 'person is' : 'people are'} overdue for contact`,
+    detail: names ? `Reach out to ${names}${overflow}` : 'Overdue check-ins in your Tribe',
+    link: '/tribe',
+    metadata: { overdueCount: summary.overdueCount, peopleCount: summary.peopleCount }
+  }];
+}
+
 /**
  * Generate all proactive alerts by running all checks.
  * Returns a sorted list with critical/high items first.
@@ -245,15 +266,16 @@ async function checkUsageSpikes() {
 export async function generateAlerts() {
   const startMs = Date.now();
 
-  const [goalAlerts, successAlerts, systemAlerts, learningAlerts, usageAlerts] = await Promise.all([
+  const [goalAlerts, successAlerts, systemAlerts, learningAlerts, usageAlerts, tribeAlerts] = await Promise.all([
     checkGoalStalls(),
     checkSuccessRates(),
     checkSystemHealth(),
     checkLearningHealth(),
-    checkUsageSpikes()
+    checkUsageSpikes(),
+    checkTribeCadence()
   ]);
 
-  const all = [...goalAlerts, ...successAlerts, ...systemAlerts, ...learningAlerts, ...usageAlerts];
+  const all = [...goalAlerts, ...successAlerts, ...systemAlerts, ...learningAlerts, ...usageAlerts, ...tribeAlerts];
 
   // Sort by severity: critical > high > medium > low
   const severityOrder = { critical: 0, high: 1, medium: 2, low: 3 };
diff --git a/server/services/settings.js b/server/services/settings.js
index 919fa2366..87f61500e 100644
--- a/server/services/settings.js
+++ b/server/services/settings.js
@@ -78,6 +78,21 @@ const queueWrite = createFileWriteQueue();
 
 const save = async (settings) => {
   const cleaned = stripStoreKeys(settings);
+  // Stamp `timezoneUpdatedAt` whenever the effective `timezone` actually
+  // changes, so timezone-dependent schedulers can gate catch-up/re-evaluation
+  // logic on "when did the zone last change" (see meatspacePostReminder's
+  // missed-slot catch-up, #2040). Compare against the previous on-disk value so
+  // unrelated settings saves NEVER touch the field. The read runs inside the
+  // same queued write turn (every caller wraps save in queueWrite), so the
+  // comparison is against the freshest persisted snapshot, and any prior
+  // `timezoneUpdatedAt` on an unchanged-timezone save rides through untouched
+  // via the merged object.
+  if (isPlainObject(cleaned)) {
+    const prev = stripStoreKeys(await loadRaw());
+    if (isPlainObject(prev) && cleaned.timezone !== prev.timezone) {
+      cleaned.timezoneUpdatedAt = Date.now();
+    }
+  }
   // atomicWrite (temp-file + rename) so a mid-write crash never truncates
   // settings.json. Pass a pre-stringified string to preserve the trailing
   // newline; atomicWrite's own JSON.stringify omits it.
diff --git a/server/services/settings.test.js b/server/services/settings.test.js
index e71e016b5..3f739eb36 100644
--- a/server/services/settings.test.js
+++ b/server/services/settings.test.js
@@ -250,6 +250,60 @@ describe('settings.js', () => {
     });
   });
 
+  describe('timezoneUpdatedAt stamping (#2040)', () => {
+    it('stamps timezoneUpdatedAt when the timezone value actually changes', async () => {
+      tryReadFile.mockResolvedValue(JSON.stringify({ timezone: 'UTC', theme: 'dark' }));
+
+      const before = Date.now();
+      const result = await updateSettings({ timezone: 'Asia/Tokyo' });
+
+      expect(result.timezone).toBe('Asia/Tokyo');
+      expect(typeof result.timezoneUpdatedAt).toBe('number');
+      expect(result.timezoneUpdatedAt).toBeGreaterThanOrEqual(before);
+    });
+
+    it('stamps on first-ever set (unset → value)', async () => {
+      tryReadFile.mockResolvedValue(JSON.stringify({ theme: 'dark' }));
+
+      const result = await updateSettings({ timezone: 'UTC' });
+
+      expect(typeof result.timezoneUpdatedAt).toBe('number');
+    });
+
+    it('does NOT stamp when an unrelated setting is saved (timezone unchanged)', async () => {
+      tryReadFile.mockResolvedValue(JSON.stringify({ timezone: 'UTC', theme: 'dark' }));
+
+      const result = await updateSettings({ theme: 'light' });
+
+      expect(result.timezone).toBe('UTC');
+      expect(result.timezoneUpdatedAt).toBeUndefined();
+    });
+
+    it('does NOT stamp when the timezone is re-saved with the same value', async () => {
+      tryReadFile.mockResolvedValue(JSON.stringify({ timezone: 'UTC' }));
+
+      const result = await updateSettings({ timezone: 'UTC' });
+
+      expect(result.timezoneUpdatedAt).toBeUndefined();
+    });
+
+    it('preserves an existing timezoneUpdatedAt across an unrelated save (does not clear it)', async () => {
+      tryReadFile.mockResolvedValue(JSON.stringify({ timezone: 'UTC', timezoneUpdatedAt: 1234567890 }));
+
+      const result = await updateSettings({ theme: 'dark' });
+
+      expect(result.timezoneUpdatedAt).toBe(1234567890);
+    });
+
+    it('re-stamps (overwrites the old timestamp) when the timezone changes again', async () => {
+      tryReadFile.mockResolvedValue(JSON.stringify({ timezone: 'UTC', timezoneUpdatedAt: 1 }));
+
+      const result = await updateSettings({ timezone: 'Europe/Paris' });
+
+      expect(result.timezoneUpdatedAt).toBeGreaterThan(1);
+    });
+  });
+
   describe('MortalLoom store key pollution guard', () => {
     it('strips MortalLoom-store top-level keys on read', async () => {
       // Simulates the historical corruption: settings.json contains both
@@ -306,6 +360,10 @@ describe('settings.js', () => {
 
       const [, content] = atomicWrite.mock.calls[0];
       const written = JSON.parse(content);
+      // Setting the timezone (undefined → 'UTC' here) stamps timezoneUpdatedAt;
+      // strip it before comparing the rest of the cleaned shape.
+      expect(typeof written.timezoneUpdatedAt).toBe('number');
+      delete written.timezoneUpdatedAt;
       expect(written).toEqual({ theme: 'dark', timezone: 'UTC' });
     });
 
diff --git a/server/services/sharing/peerSyncReceive.js b/server/services/sharing/peerSyncReceive.js
index b44c1f74f..0bdc5bc0d 100644
--- a/server/services/sharing/peerSyncReceive.js
+++ b/server/services/sharing/peerSyncReceive.js
@@ -9,18 +9,8 @@
  *
  * Split out of the former 4,004-line peerSync.js (#1830).
  */
-import { join } from 'path';
-import { existsSync } from 'fs';
-import { createHash } from 'crypto';
-import { PATHS, atomicWrite, readJSONFile, ensureDir } from '../../lib/fileUtils.js';
 import { isStr } from '../../lib/storyBible.js';
 import { isPlainObject } from '../../lib/objects.js';
-import { peerBaseUrl } from '../../lib/peerUrl.js';
-import { peerFetch } from '../../lib/peerHttpClient.js';
-import { getOrComputeImageSha256 } from '../../lib/assetHash.js';
-import { generateThumbnail } from '../../lib/ffmpeg.js';
-import { pullSidecarForImage } from './sidecarSync.js';
-import { sanitizeAssetFilename } from './buckets.js';
 import {
   PORTOS_SCHEMA_VERSIONS,
   RECORD_KIND_SCHEMA_CATEGORIES,
@@ -50,15 +40,11 @@ import {
   getExerciseForSync,
   mergeExercisesFromSync,
 } from '../writersRoom/sync.js';
-import { WRITERS_ROOM_DRAFT_ASSET_KIND } from '../writersRoom/syncLogic.js';
-import { WORK_ID_RE, DRAFT_ID_RE, wrWorkDir, wrDraftPath } from '../writersRoom/_shared.js';
 import {
-  initCursor,
   ackDeletesUpTo,
 } from './peerTombstoneCursors.js';
 import {
   diffAssetManifestAgainstLocal,
-  directoryForAssetKind,
   pullMissingAssetsFromPeer,
   pullMissingWorkBodies,
 } from './peerSyncAssets.js';
diff --git a/server/services/tribe.js b/server/services/tribe.js
index 1557a919f..b19859edb 100644
--- a/server/services/tribe.js
+++ b/server/services/tribe.js
@@ -15,6 +15,8 @@
 import { v4 as uuidv4 } from '../lib/uuid.js';
 import { ensureSchema, query, withTransaction } from '../lib/db.js';
 import { ServerError } from '../lib/errorHandler.js';
+import { cadenceStatus } from '../lib/tribeCadence.js';
+import { buildPersonMatchIndex, matchPeople, normalizeIdentifier } from '../lib/tribeMatch.js';
 import * as calendarSync from './calendarSync.js';
 
 // Default check-in cadence (days) per ring. Mirrored on the client in
@@ -51,6 +53,21 @@ export function normalizeTags(tags) {
   return String(tags).split(',').map((tag) => tag.trim()).filter(Boolean);
 }
 
+// Known emails/handles used to match a person to calendar attendees / message
+// counterparts. Lowercased + trimmed + de-duplicated so matching (which also
+// lowercases) is stable and the stored set has no near-duplicates.
+export function normalizeEmails(emails) {
+  const list = Array.isArray(emails)
+    ? emails
+    : (emails == null ? [] : String(emails).split(','));
+  const seen = new Set();
+  for (const raw of list) {
+    const key = normalizeIdentifier(raw);
+    if (key) seen.add(key);
+  }
+  return [...seen];
+}
+
 export function rowToPerson(row) {
   return {
     id: row.id,
@@ -63,6 +80,7 @@ export function rowToPerson(row) {
     channel: row.channel || '',
     energy: row.energy || 'steady',
     tags: row.tags || [],
+    emails: row.emails || [],
     nextMove: row.next_move || '',
     notes: row.notes || '',
     touchpointCount: Number(row.touchpoint_count || 0),
@@ -109,6 +127,52 @@ async function ensureReady() {
   await ensureSchema();
 }
 
+// Cadence health for a person — the server-side entry point into the shared,
+// authoritative cadence rules in server/lib/tribeCadence.js (mirrored to the
+// client). Kept as a named re-export so existing callers/tests importing
+// `personCadenceStatus` from this service stay stable while the rules live in
+// exactly one place. See tribeCadence.js for the state semantics.
+export const personCadenceStatus = cadenceStatus;
+
+// Care summary for the dashboard widget + proactive alert: who in the active
+// tribe (external excluded) is overdue or has no touchpoint yet, most-overdue
+// first. `missing` (never contacted) sorts above any dated-overdue person.
+export async function getCareSummary(limit = 5) {
+  const people = await listPeople();
+  const tribe = people.filter((person) => person.ring !== 'external');
+  const overdue = [];
+  for (const person of tribe) {
+    const status = personCadenceStatus(person);
+    if (status.state === 'overdue' || status.state === 'missing') {
+      overdue.push({ person, status });
+    }
+  }
+  // missing (daysOverdue null) first, then by daysOverdue desc, then by name.
+  overdue.sort((a, b) => {
+    const aMissing = a.status.daysOverdue == null;
+    const bMissing = b.status.daysOverdue == null;
+    if (aMissing !== bMissing) return aMissing ? -1 : 1;
+    if (!aMissing && b.status.daysOverdue !== a.status.daysOverdue) {
+      return b.status.daysOverdue - a.status.daysOverdue;
+    }
+    return String(a.person.name).localeCompare(String(b.person.name));
+  });
+  return {
+    hasPeople: tribe.length > 0,
+    peopleCount: tribe.length,
+    overdueCount: overdue.length,
+    overdue: overdue.slice(0, Math.max(0, limit)).map(({ person, status }) => ({
+      id: person.id,
+      name: person.name,
+      ring: person.ring,
+      channel: person.channel,
+      lastContact: person.lastContact,
+      state: status.state,
+      daysOverdue: status.daysOverdue,
+    })),
+  };
+}
+
 export async function listPeople(options = {}) {
   await ensureReady();
   const conditions = ['deleted = FALSE'];
@@ -163,8 +227,8 @@ export async function createPerson(data) {
   const result = await query(
     `INSERT INTO tribe_people (
       id, name, relationship, ring, cadence_days, last_contact_on, channel,
-      energy, tags, next_move, notes, updated_at
-    ) VALUES ($1,$2,$3,$4,$5,$6,$7,$8,$9,$10,$11,NOW())
+      energy, tags, emails, next_move, notes, updated_at
+    ) VALUES ($1,$2,$3,$4,$5,$6,$7,$8,$9,$10,$11,$12,NOW())
     RETURNING *, 0 AS touchpoint_count, 0 AS linked_memory_count`,
     [
       id,
@@ -176,6 +240,7 @@ export async function createPerson(data) {
       data.channel || '',
       data.energy || 'steady',
       normalizeTags(data.tags),
+      normalizeEmails(data.emails),
       data.nextMove || '',
       data.notes || '',
     ],
@@ -198,8 +263,9 @@ export async function updatePerson(id, updates) {
          channel = $7,
          energy = $8,
          tags = $9,
-         next_move = $10,
-         notes = $11,
+         emails = $10,
+         next_move = $11,
+         notes = $12,
          updated_at = NOW()
      WHERE id = $1 AND deleted = FALSE
      RETURNING *,
@@ -215,6 +281,7 @@ export async function updatePerson(id, updates) {
       next.channel || '',
       next.energy || 'steady',
       normalizeTags(next.tags),
+      normalizeEmails(next.emails),
       next.nextMove || '',
       next.notes || '',
     ],
@@ -307,6 +374,84 @@ export async function createCalendarTouchpoint(personId, { accountId, eventId, s
   });
 }
 
+// Insert an auto-logged touchpoint for one person, idempotent on `dedupeKey`
+// (the partial unique index idx_tribe_touchpoints_dedupe). Returns the created
+// touchpoint, or `null` when this person+dedupeKey was already logged (re-sync).
+// Only advances last_contact_on when a row is actually inserted.
+async function autoCreateTouchpoint(personId, data) {
+  const happenedAt = data.happenedAt || new Date().toISOString();
+  return withTransaction(async (client) => {
+    const result = await client.query(
+      `INSERT INTO tribe_touchpoints (
+        id, person_id, happened_at, channel, summary, source,
+        calendar_account_id, calendar_event_id, dedupe_key, metadata
+      ) VALUES ($1,$2,$3,$4,$5,$6,$7,$8,$9,$10)
+      ON CONFLICT (person_id, dedupe_key) WHERE dedupe_key IS NOT NULL
+      DO NOTHING
+      RETURNING *`,
+      [
+        uuidv4(),
+        personId,
+        happenedAt,
+        data.channel || '',
+        data.summary || '',
+        data.source || 'user',
+        data.calendarAccountId || null,
+        data.calendarEventId || null,
+        data.dedupeKey || null,
+        data.metadata || {},
+      ],
+    );
+    if (!result.rows[0]) return null; // duplicate — already logged for this key
+
+    // Advance last_contact_on only. Unlike a manual touchpoint, an auto-log must
+    // NOT overwrite the person's curated `channel` (their preferred way to
+    // connect): it fires silently on every sync and would otherwise churn the
+    // preference to the last meeting location / account type. The synced
+    // channel is still preserved on the touchpoint row itself.
+    await client.query(
+      `UPDATE tribe_people
+       SET last_contact_on = GREATEST(COALESCE(last_contact_on, DATE '1900-01-01'), $2::date),
+           updated_at = NOW()
+       WHERE id = $1`,
+      [personId, happenedAt],
+    );
+    return rowToTouchpoint(result.rows[0]);
+  });
+}
+
+/**
+ * Auto-log touchpoints from a batch of sync candidates (calendar events /
+ * messages). Each candidate:
+ *   { identities: [{ email, name } | string], source, happenedAt, channel,
+ *     summary, dedupeKey, calendarAccountId?, calendarEventId?, metadata? }
+ *
+ * Identities are matched deterministically (email/handle, unique exact name) to
+ * tracked people via the shared matcher; one deduped touchpoint is inserted per
+ * matched person. `dedupeKey` MUST be set for idempotency across re-syncs.
+ * Returns `{ created, matched }`. No LLM calls.
+ */
+export async function autoLogTouchpoints(candidates = []) {
+  if (!Array.isArray(candidates) || candidates.length === 0) return { created: 0, matched: 0 };
+  await ensureReady();
+  const people = await listPeople();
+  if (people.length === 0) return { created: 0, matched: 0 };
+
+  const index = buildPersonMatchIndex(people);
+  let created = 0;
+  let matched = 0;
+  for (const candidate of candidates) {
+    if (!candidate?.dedupeKey) continue; // no idempotency key → refuse to log
+    const personIds = matchPeople(candidate.identities, index);
+    for (const personId of personIds) {
+      matched++;
+      const touchpoint = await autoCreateTouchpoint(personId, candidate);
+      if (touchpoint) created++;
+    }
+  }
+  return { created, matched };
+}
+
 export async function listMemoryLinks(personId) {
   await ensureReady();
   const result = await query(
diff --git a/server/services/tribe.test.js b/server/services/tribe.test.js
index dec61087d..837d3bdcb 100644
--- a/server/services/tribe.test.js
+++ b/server/services/tribe.test.js
@@ -9,18 +9,29 @@ vi.mock('../lib/db.js', () => ({
   withTransaction: vi.fn(),
 }));
 
-import { query } from '../lib/db.js';
+import { query, withTransaction } from '../lib/db.js';
 import {
   listPeople,
   createPerson,
   normalizeTags,
+  normalizeEmails,
   isoDate,
   isoDateTime,
   rowToPerson,
   rowToTouchpoint,
+  personCadenceStatus,
+  getCareSummary,
+  autoLogTouchpoints,
   DEFAULT_RING_CADENCE,
 } from './tribe.js';
 
+// ISO date (YYYY-MM-DD) `n` whole days before local today.
+function daysAgo(n) {
+  const d = new Date();
+  d.setDate(d.getDate() - n);
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
 describe('tribe service — pure helpers', () => {
   describe('normalizeTags', () => {
     it('splits a comma string, trimming and dropping empties', () => {
@@ -156,6 +167,79 @@ describe('tribe service — listPeople query builder', () => {
   });
 });
 
+describe('tribe service — personCadenceStatus', () => {
+  it('external people are never overdue', () => {
+    expect(personCadenceStatus({ ring: 'external', lastContact: daysAgo(999), cadenceDays: 7 }))
+      .toMatchObject({ state: 'external', daysOverdue: 0 });
+  });
+
+  it('no touchpoint → missing with null daysOverdue', () => {
+    const s = personCadenceStatus({ ring: 'core', lastContact: null, cadenceDays: 21 });
+    expect(s.state).toBe('missing');
+    expect(s.daysOverdue).toBeNull();
+  });
+
+  it('elapsed beyond cadence → overdue with positive daysOverdue', () => {
+    const s = personCadenceStatus({ ring: 'support', lastContact: daysAgo(10), cadenceDays: 7 });
+    expect(s.state).toBe('overdue');
+    expect(s.daysOverdue).toBe(3);
+  });
+
+  it('within a week of cadence → soon', () => {
+    expect(personCadenceStatus({ ring: 'core', lastContact: daysAgo(18), cadenceDays: 21 }).state).toBe('soon');
+  });
+
+  it('comfortably inside cadence → steady', () => {
+    expect(personCadenceStatus({ ring: 'village', lastContact: daysAgo(2), cadenceDays: 90 }).state).toBe('steady');
+  });
+});
+
+describe('tribe service — getCareSummary', () => {
+  beforeEach(() => {
+    query.mockReset();
+  });
+
+  // listPeople maps DB rows via rowToPerson, so mock rows use snake_case columns.
+  const row = (over) => ({
+    id: over.id, name: over.name, ring: over.ring,
+    cadence_days: over.cadence_days, last_contact_on: over.last_contact_on ?? null,
+    channel: '', tags: [], touchpoint_count: '0', linked_memory_count: '0',
+  });
+
+  it('excludes external people and sorts missing first, then most-overdue', async () => {
+    query.mockResolvedValue({ rows: [
+      row({ id: 'a', name: 'Overdue Small', ring: 'support', cadence_days: 7, last_contact_on: daysAgo(10) }), // 3d overdue
+      row({ id: 'b', name: 'Never', ring: 'core', cadence_days: 21, last_contact_on: null }),                  // missing
+      row({ id: 'c', name: 'Overdue Big', ring: 'core', cadence_days: 21, last_contact_on: daysAgo(60) }),     // 39d overdue
+      row({ id: 'd', name: 'Steady', ring: 'village', cadence_days: 90, last_contact_on: daysAgo(1) }),        // steady
+      row({ id: 'e', name: 'Nemesis', ring: 'external', cadence_days: 7, last_contact_on: daysAgo(999) }),     // excluded
+    ] });
+
+    const summary = await getCareSummary();
+    expect(summary.hasPeople).toBe(true);
+    expect(summary.peopleCount).toBe(4); // external excluded
+    expect(summary.overdueCount).toBe(3); // missing + 2 overdue
+    expect(summary.overdue.map((p) => p.id)).toEqual(['b', 'c', 'a']);
+  });
+
+  it('respects the limit while still reporting the full overdueCount', async () => {
+    query.mockResolvedValue({ rows: [
+      row({ id: 'a', name: 'A', ring: 'core', cadence_days: 21, last_contact_on: daysAgo(60) }),
+      row({ id: 'b', name: 'B', ring: 'core', cadence_days: 21, last_contact_on: daysAgo(50) }),
+    ] });
+    const summary = await getCareSummary(1);
+    expect(summary.overdueCount).toBe(2);
+    expect(summary.overdue).toHaveLength(1);
+  });
+
+  it('reports hasPeople false for an empty tribe', async () => {
+    query.mockResolvedValue({ rows: [] });
+    const summary = await getCareSummary();
+    expect(summary.hasPeople).toBe(false);
+    expect(summary.overdueCount).toBe(0);
+  });
+});
+
 describe('tribe service — createPerson', () => {
   beforeEach(() => {
     query.mockReset();
@@ -169,9 +253,103 @@ describe('tribe service — createPerson', () => {
 
     const [, params] = query.mock.calls[0];
     // INSERT param order: id,name,relationship,ring,cadence_days,last_contact,
-    // channel,energy,tags,next_move,notes
+    // channel,energy,tags,emails,next_move,notes
     expect(params[3]).toBe('core');
     expect(params[4]).toBe(DEFAULT_RING_CADENCE.core); // 21, not the flat SQL default
     expect(params[8]).toEqual(['a', 'b']);
   });
+
+  it('normalizes emails to a lowercased de-duplicated array on insert', async () => {
+    query.mockResolvedValue({ rows: [{ id: 'p1', name: 'Ada', ring: 'tribe', cadence_days: 45 }] });
+    await createPerson({ name: 'Ada', emails: [' Ada@Work.com ', 'ada@work.com', 'GRACE@x.io'] });
+    const [, params] = query.mock.calls[0];
+    expect(params[9]).toEqual(['ada@work.com', 'grace@x.io']); // emails at $10
+  });
+});
+
+describe('tribe service — normalizeEmails', () => {
+  it('lowercases, trims, splits a comma string, and de-dupes', () => {
+    expect(normalizeEmails('A@x.com, a@x.com , ,B@Y.io')).toEqual(['a@x.com', 'b@y.io']);
+  });
+  it('handles an array and drops empties', () => {
+    expect(normalizeEmails([' A@x.com ', '', 'a@X.com'])).toEqual(['a@x.com']);
+  });
+  it('returns [] for nullish', () => {
+    expect(normalizeEmails(null)).toEqual([]);
+    expect(normalizeEmails(undefined)).toEqual([]);
+  });
+});
+
+describe('tribe service — rowToPerson emails', () => {
+  it('maps the emails array and defaults to []', () => {
+    expect(rowToPerson({ id: 'p', name: 'N', ring: 'tribe', cadence_days: 45, emails: ['a@x.com'] }).emails)
+      .toEqual(['a@x.com']);
+    expect(rowToPerson({ id: 'p', name: 'N', ring: 'tribe', cadence_days: 45 }).emails).toEqual([]);
+  });
+});
+
+describe('tribe service — autoLogTouchpoints', () => {
+  beforeEach(() => {
+    query.mockReset();
+    withTransaction.mockReset();
+  });
+
+  // One tracked person "Ada" with a known email; listPeople() is the first query.
+  function mockPeople() {
+    query.mockResolvedValue({ rows: [
+      { id: 'ada', name: 'Ada', ring: 'tribe', cadence_days: 45, emails: ['ada@work.com'] },
+    ] });
+  }
+
+  it('matches identities and inserts one deduped touchpoint per matched person', async () => {
+    mockPeople();
+    // INSERT returns a row (new); UPDATE returns nothing.
+    withTransaction.mockImplementation(async (fn) => fn({
+      query: vi.fn()
+        .mockResolvedValueOnce({ rows: [{ id: 't1', person_id: 'ada', source: 'calendar' }] })
+        .mockResolvedValueOnce({ rows: [] }),
+    }));
+
+    const result = await autoLogTouchpoints([
+      { identities: [{ email: 'ada@work.com' }], source: 'calendar', dedupeKey: 'cal:a:e1', happenedAt: '2026-06-01T10:00:00Z' },
+      { identities: [{ email: 'nobody@x.com' }], source: 'calendar', dedupeKey: 'cal:a:e2' },
+    ]);
+
+    expect(result).toEqual({ created: 1, matched: 1 });
+  });
+
+  it('counts a matched-but-duplicate insert (ON CONFLICT no row) as matched, not created', async () => {
+    mockPeople();
+    // INSERT returns no row → duplicate; UPDATE must not run.
+    const clientQuery = vi.fn().mockResolvedValueOnce({ rows: [] });
+    withTransaction.mockImplementation(async (fn) => fn({ query: clientQuery }));
+
+    const result = await autoLogTouchpoints([
+      { identities: [{ email: 'ada@work.com' }], source: 'message', dedupeKey: 'msg:a:t:2026-06-01' },
+    ]);
+
+    expect(result).toEqual({ created: 0, matched: 1 });
+    expect(clientQuery).toHaveBeenCalledTimes(1); // no last_contact_on UPDATE on a dup
+  });
+
+  it('skips candidates without a dedupeKey (idempotency required)', async () => {
+    mockPeople();
+    const result = await autoLogTouchpoints([{ identities: [{ email: 'ada@work.com' }], source: 'calendar' }]);
+    expect(result).toEqual({ created: 0, matched: 0 });
+    expect(withTransaction).not.toHaveBeenCalled();
+  });
+
+  it('is a no-op when nothing is tracked', async () => {
+    query.mockResolvedValue({ rows: [] });
+    const result = await autoLogTouchpoints([
+      { identities: [{ email: 'ada@work.com' }], dedupeKey: 'cal:a:e1' },
+    ]);
+    expect(result).toEqual({ created: 0, matched: 0 });
+  });
+
+  it('returns zeros for an empty batch without touching the DB', async () => {
+    const result = await autoLogTouchpoints([]);
+    expect(result).toEqual({ created: 0, matched: 0 });
+    expect(query).not.toHaveBeenCalled();
+  });
 });
diff --git a/server/services/voice/tools.js b/server/services/voice/tools.js
index 468f6a986..650cdf44e 100644
--- a/server/services/voice/tools.js
+++ b/server/services/voice/tools.js
@@ -24,6 +24,7 @@ import { MEDIA_TOOLS, MEDIA_INTENT_RE } from './tools/media.js';
 import { PIPELINE_TOOLS, PIPELINE_INTENT_RE } from './tools/pipeline.js';
 import { CODE_TOOLS, CODE_INTENT_RE } from './tools/code.js';
 import { CATALOG_TOOLS, CATALOG_INTENT_RE, catalogTypeEnum, matchesCustomCatalogNoun } from './tools/catalog.js';
+import { WORKSPACE_TOOLS, WORKSPACE_INTENT_RE } from './tools/workspace.js';
 import { UI_KINDS } from './tools/shared.js';
 
 // Re-exported for pipeline.js (UI_KINDS, UI_INTENT_RE) and the form-fill
@@ -48,6 +49,7 @@ const TOOLS = [
   ...PIPELINE_TOOLS,
   ...CODE_TOOLS,
   ...CATALOG_TOOLS,
+  ...WORKSPACE_TOOLS,
 ];
 
 // Per-turn tool filtering. Small models (qwen3-4b, granite, etc.) choke when
@@ -94,6 +96,7 @@ const TOOL_GROUPS = {
   dispatch_code_agent: 'code',
   code_agent_status: 'code',
   catalog_lookup: 'catalog',
+  workspace_switch: 'workspace',
   // UNGROUPED = always-on: time_now, daily_log_append, ui_navigate.
   // brain_capture used to be always-on, but that caused form-fill turns
   // ("fill description with X") to be misrouted to brain_capture because
@@ -123,6 +126,7 @@ const GROUP_INTENT = {
   code: CODE_INTENT_RE,
   ui: UI_INTENT_RE,
   catalog: CATALOG_INTENT_RE,
+  workspace: WORKSPACE_INTENT_RE,
 };
 
 // Fail-fast at import time: any group referenced in TOOL_GROUPS that has no
diff --git a/server/services/voice/tools/workspace.js b/server/services/voice/tools/workspace.js
new file mode 100644
index 000000000..ed4805939
--- /dev/null
+++ b/server/services/voice/tools/workspace.js
@@ -0,0 +1,74 @@
+// Workspace-context voice/palette tool (#2035): switch the active project
+// workspace — snapshot the workspace you're leaving, then reconcile the named
+// project's saved context (git branch, in-repo shell sessions, scoped tasks).
+// Reuses the workspaceContext service the Workspace Contexts page already
+// drives (snapshotOnRepoSwitch + restoreContext); it never checks out branches
+// or spawns shells — that stays a manual user action.
+
+// Workspace/project switching intent — "switch workspace to X", "switch to the
+// X project", "restore my BookLoom context", "take me back to PortOS project".
+// The workspace/project(-context) token is required within ~40 chars so a plain
+// "switch to the tasks page" (a ui_navigate turn) does NOT match.
+export const WORKSPACE_INTENT_RE = /\b(?:switch|change|move|jump|flip|go|take me|get me|back)\b[^.!?\n]{0,40}\b(?:workspace|project(?:\s+context)?)\b|\brestore\b[^.!?\n]{0,40}\b(?:workspace|context)\b|\bworkspace\s+context\b/i;
+
+export const WORKSPACE_TOOLS = [
+  {
+    name: 'workspace_switch',
+    description:
+      'Switch your active project workspace: first save a snapshot of the workspace you are leaving, then restore the named project\'s saved context — its git branch, the shell sessions rooted in its repo, and the tasks scoped to it. Use when the user says "switch workspace to BookLoom", "switch to the finance tracker project", "take me back to the PortOS workspace", or "restore my BookLoom context". Restoring only REPORTS which saved shell sessions are still live to re-attach and whether the saved git branch is still checked out — it never checks out branches or spawns shells for the user (that stays a manual action). Name the target project as `workspace`.',
+    parameters: {
+      type: 'object',
+      properties: {
+        workspace: {
+          type: 'string',
+          description: 'The project/app to switch to ("BookLoom", "finance tracker", "PortOS"). Server fuzzy-matches against the user\'s managed apps.',
+        },
+      },
+      required: ['workspace'],
+    },
+    execute: async ({ workspace } = {}) => {
+      const phrase = typeof workspace === 'string' ? workspace.trim() : '';
+      if (!phrase) {
+        return { ok: false, error: 'workspace is required', summary: "I didn't catch which workspace to switch to." };
+      }
+
+      const { getActiveApps } = await import('../../apps.js');
+      const { resolveAppByPhrase } = await import('../../../lib/appResolver.js');
+      const { snapshotOnRepoSwitch, restoreContext } = await import('../../workspaceContext.js');
+
+      const apps = await getActiveApps().catch(() => []);
+      const match = resolveAppByPhrase(phrase, apps);
+      if (!match) {
+        const names = (apps || []).map((a) => a?.name).filter(Boolean);
+        const hint = names.length ? ` Try one of: ${names.slice(0, 4).join(', ')}.` : '';
+        return {
+          ok: false,
+          error: `unknown workspace "${phrase}"`,
+          summary: `I don't see a project called ${phrase}.${hint}`,
+        };
+      }
+
+      // Snapshot the workspace we're leaving (silent, no-op if none or same),
+      // then reconcile the target's saved context against what's live now.
+      // Both are defensive — a failure to snapshot must not block the switch.
+      const snapshot = await snapshotOnRepoSwitch(match.id).catch(() => null);
+      const restore = await restoreContext(match.id).catch(() => null);
+
+      const reattach = restore?.restorable?.shellSessions?.length || 0;
+      const hadSaved = !!restore?.saved;
+      const savedNote = snapshot?.appId ? ` Saved your ${snapshot.appId} context first.` : '';
+      const restoreNote = hadSaved
+        ? ` Restored ${reattach} live shell session${reattach === 1 ? '' : 's'}.`
+        : ' No saved context there yet, so nothing to restore.';
+
+      return {
+        ok: true,
+        workspace: match.id,
+        workspaceName: match.name || match.id,
+        snapshotted: snapshot?.appId || null,
+        reattachable: reattach,
+        summary: `Switched to ${match.name || match.id}.${savedNote}${restoreNote}`,
+      };
+    },
+  },
+];
diff --git a/server/services/workspaceContext.js b/server/services/workspaceContext.js
index 1b1ad6239..b31f7b887 100644
--- a/server/services/workspaceContext.js
+++ b/server/services/workspaceContext.js
@@ -276,5 +276,56 @@ export async function listContexts() {
   });
 }
 
+// In-memory tracker of the app id CoS (or the user, via workspace_switch) most
+// recently began working in — the single "current workspace" notion in this
+// single-user install. Intentionally NOT persisted: it models "where work is
+// happening right now," which resets on restart, not durable state.
+let currentWorkspaceAppId = null;
+
+/**
+ * Auto-snapshot hook for workspace/repo switches (#2035). When work moves to a
+ * DIFFERENT app/repo than the one we were last in — a CoS coding-agent dispatch,
+ * or a user `workspace_switch` — save a silent snapshot of the previous
+ * ("current") app's workspace context first, so it can later be restored.
+ *
+ * Snapshot-only: it NEVER restores (restoring stays an explicit user action) and
+ * makes NO LLM calls. Defensive by design — a missing/absent current workspace
+ * (first switch) or a switch to the same repo is a no-op, not a throw; a failed
+ * save is swallowed so it can't break the caller's dispatch/switch.
+ *
+ * @param {string|null} nextAppId - target app id (null ⇒ PortOS self)
+ * @returns {Promise<object|null>} the saved snapshot record, or null when nothing
+ *   was snapshotted (no prior workspace, same repo, or save failed).
+ */
+export async function snapshotOnRepoSwitch(nextAppId) {
+  const target = nextAppId || PORTOS_APP_ID;
+  // The read→update of the tracker is synchronous (no await between them), so
+  // concurrent spawns can't tear it — each call atomically captures its own
+  // `previous` and advances `current`. Only the subsequent file save awaits,
+  // and saveContext already serializes writes through its own single-tail queue.
+  const previous = currentWorkspaceAppId;
+  currentWorkspaceAppId = target;
+  // First switch (no prior workspace) or same repo ⇒ nothing to snapshot.
+  if (!previous || previous === target) return null;
+  const saved = await saveContext(previous).catch((err) => {
+    console.warn(`⚠️ Workspace auto-snapshot for ${previous} failed: ${err?.message || err}`);
+    return null;
+  });
+  if (saved) {
+    console.log(`🗂️ Auto-snapshotted workspace context for ${previous} (switched to ${target})`);
+  }
+  return saved;
+}
+
+/** Read the current in-memory workspace tracker (exported for tests). */
+export function getCurrentWorkspaceAppId() {
+  return currentWorkspaceAppId;
+}
+
+/** Reset the in-memory workspace tracker — exported for unit tests. */
+export function __resetWorkspaceTracker() {
+  currentWorkspaceAppId = null;
+}
+
 // Exported for unit tests — pure helpers with no I/O.
 export const __test = { tasksForApp, shellSessionsForRepo };
diff --git a/server/services/workspaceContext.test.js b/server/services/workspaceContext.test.js
index 9fdd3a1d0..b8570f75d 100644
--- a/server/services/workspaceContext.test.js
+++ b/server/services/workspaceContext.test.js
@@ -212,3 +212,37 @@ describe('listContexts', () => {
     expect(portos.savedAt).toBeNull();
   });
 });
+
+describe('snapshotOnRepoSwitch (#2035 auto-save hook)', () => {
+  beforeEach(() => wc.__resetWorkspaceTracker());
+
+  it('is a no-op on the first switch (no prior workspace to snapshot)', async () => {
+    const saved = await wc.snapshotOnRepoSwitch('app-1');
+    expect(saved).toBeNull();
+    expect(await wc.getSavedContext('app-1')).toBeNull();
+    expect(wc.getCurrentWorkspaceAppId()).toBe('app-1');
+  });
+
+  it('snapshots the previous ("current") workspace when switching to a different repo', async () => {
+    await wc.snapshotOnRepoSwitch('app-1');          // no-op, sets current = app-1
+    const saved = await wc.snapshotOnRepoSwitch('portos-default'); // snapshots app-1
+    expect(saved).toBeTruthy();
+    expect(saved.appId).toBe('app-1');
+    expect(await wc.getSavedContext('app-1')).toBeTruthy();
+    expect(wc.getCurrentWorkspaceAppId()).toBe('portos-default');
+  });
+
+  it('does NOT snapshot when the target repo is unchanged', async () => {
+    await wc.snapshotOnRepoSwitch('app-1');
+    const saved = await wc.snapshotOnRepoSwitch('app-1');
+    expect(saved).toBeNull();
+    expect(await wc.getSavedContext('app-1')).toBeNull();
+  });
+
+  it('normalizes a null target to the PortOS app (CoS self dispatch)', async () => {
+    await wc.snapshotOnRepoSwitch('app-1');
+    const saved = await wc.snapshotOnRepoSwitch(null); // → portos-default, snapshots app-1
+    expect(saved?.appId).toBe('app-1');
+    expect(wc.getCurrentWorkspaceAppId()).toBe('portos-default');
+  });
+});