Deploy: merged engine (Sam's UX overhaul + Turing driving the panels)

Squashed deploy of GitHub main 6fb67d4 onto the Space. Identical application
tree; docs/ux-overhaul-2026-07/ is omitted because the Space's pre-receive
hook rejects binaries over ~100 KB, and the two Structure-viewer captures sit
in Sam's e6a9d5f — in the pushed HISTORY, so recompressing the current files
can't clear it.

The Space is therefore a DEPLOY MIRROR from here on, not a second copy of the
repo: it carries the running app, GitHub carries the full history, the design
docs and the test suite. Future deploys are squashes onto this line, not plain
pushes, since the two histories no longer share a tip.

Contents, in full: Sam's light-mode surface hierarchy, Structure view filling
its canvas with app-owned fullscreen, pill composer, centered bench chip,
theme toggle relocated out of the hidden topbar, the plasmid cloning-log
data-integrity guard, and the first-party behaviour collector; the two defects
that merge shipped (a TypeError killing cockpit init on every phone, and a
collapsed rail nothing could reopen) fixed; and Turing now painting real
results into the Library / Guides / Primers panels instead of leaving them
empty, tool nav restored on Mission Control, one radius language throughout.

Needs migration 0016_agent_runs.sql and 0017_client_events.sql run against
Supabase; both degrade silently until then.

Co-Authored-By: Claude <noreply@anthropic.com>

dee/auth.py

@@ -773,6 +773,121 @@ def record_ping_async(*, session_id: str, visible_ms: int) -> None:
     threading.Thread(target=_post_supabase, args=("rpc/record_ping", body), daemon=True).start()
 
 
+# ─── First-party UX-behaviour collector ingest ────────────────────────
+# collector.js batches client-side UX signals (dead/rage clicks, scroll depth,
+# funnel steps, feature clicks, client errors) and POSTs them to /api/collect.
+# We batch-insert them into public.client_events (migration 0017). Same
+# fire-and-forget / daemon-thread / service-role pattern as log_event; no-op if
+# Supabase env is unset.
+#
+# NEVER trust the client's shape. We:
+#   • whitelist `kind` against _CLIENT_EVENT_KINDS,
+#   • cap every string length,
+#   • coerce value_num to a finite float or NULL,
+#   • sanitize `meta` to a shallow dict of bounded primitives,
+#   • drop any other keys the client sent.
+# The client sends only an opaque session id + these structural events — the
+# SERVER stamps who: user_id if signed in, else a salted /24-IP+UA fingerprint
+# (never a raw IP), read from g.auth + request headers HERE, synchronously,
+# before the daemon thread (which has no request context).
+
+# The only event kinds we persist. Anything else is silently dropped.
+_CLIENT_EVENT_KINDS = frozenset({
+    "dead_click", "rage_click", "scroll_depth",
+    "funnel_step", "funnel_exit", "feature_click", "client_error",
+})
+_CLIENT_EVENTS_MAX   = 100   # rows per request (server-side cap; client also caps)
+_CLIENT_STR_MAX      = 200   # selector / route string cap
+_CLIENT_META_KEYS    = 20    # max keys kept from a single meta object
+_CLIENT_META_STR_MAX = 120   # per-value string cap inside meta
+
+
+def _sanitize_client_meta(meta: Any) -> Dict[str, Any]:
+    """Coerce a client-supplied meta object into a shallow dict of bounded
+    primitives. Drops nested structures, over-long strings, and anything that
+    isn't a str/int/float/bool — so no value-bearing blob can ride in."""
+    if not isinstance(meta, dict):
+        return {}
+    out: Dict[str, Any] = {}
+    for k, v in list(meta.items())[:_CLIENT_META_KEYS]:
+        ks = str(k)[:40]
+        if isinstance(v, bool):
+            out[ks] = v
+        elif isinstance(v, int):
+            out[ks] = v
+        elif isinstance(v, float):
+            # Reject NaN / +-inf (PostgREST/Postgres jsonb can't store them).
+            if v == v and v not in (float("inf"), float("-inf")):
+                out[ks] = v
+        elif isinstance(v, str):
+            out[ks] = v[:_CLIENT_META_STR_MAX]
+        # else: drop (list/dict/None/other)
+    return out
+
+
+def log_client_events_async(session_id: str, events: Any) -> None:
+    """Fire-and-forget batch insert into public.client_events. Reads g.auth +
+    request headers SYNCHRONOUSLY (to stamp user_id / anon_fingerprint), builds
+    sanitized rows, then hands the batch to a daemon thread. No-op if Supabase
+    isn't configured, or if nothing survives sanitization. Must be called from
+    a request context."""
+    if not session_id or not (SUPABASE_URL and SUPABASE_SERVICE_KEY):
+        return
+    if not isinstance(events, list) or not events:
+        return
+    try:
+        auth = get_auth()
+    except Exception:  # noqa: BLE001 — no request context
+        return
+
+    user_id = auth.user_id
+    anon    = _anon_fingerprint() if auth.anonymous else None
+    sid     = str(session_id)[:64]
+
+    rows = []
+    for ev in events[:_CLIENT_EVENTS_MAX]:
+        if not isinstance(ev, dict):
+            continue
+        kind = str(ev.get("kind") or "")[:64]
+        if kind not in _CLIENT_EVENT_KINDS:
+            continue
+
+        route = ev.get("route")
+        route = str(route)[:_CLIENT_STR_MAX] if isinstance(route, str) and route else None
+
+        selector = ev.get("selector")
+        selector = str(selector)[:_CLIENT_STR_MAX] if isinstance(selector, str) and selector else None
+
+        value_num = None
+        v = ev.get("value_num")
+        if isinstance(v, bool):
+            value_num = None  # bools are ints in Python — reject explicitly
+        elif isinstance(v, (int, float)):
+            fv = float(v)
+            if fv == fv and fv not in (float("inf"), float("-inf")):
+                value_num = fv
+
+        client_ts = ev.get("client_ts")
+        client_ts = str(client_ts)[:40] if isinstance(client_ts, str) and client_ts else None
+
+        rows.append({
+            "session_id":       sid,
+            "user_id":          user_id,
+            "anon_fingerprint": anon,
+            "kind":             kind,
+            "route":            route,
+            "selector":         selector,
+            "value_num":        value_num,
+            "meta":             _sanitize_client_meta(ev.get("meta")),
+            "client_ts":        client_ts,
+        })
+
+    if not rows:
+        return
+    # PostgREST bulk-inserts a JSON array in one round-trip.
+    threading.Thread(target=_post_supabase, args=("client_events", rows), daemon=True).start()
+
+
 # ─── Library save (signed-in users only) ─────────────────────────────
 # After /api/run finishes, the worker thread calls save_library_async()
 # with the per-job CSV path and a few metadata fields. We upload the CSV

dee/server.py

@@ -794,6 +794,11 @@ _RL_RULES = [
     ("/api/ping",                      (60,  60)),   # dwell heartbeat — its own
                                                      # bucket so ~2/min never eats
                                                      # the shared default budget
+    ("/api/collect",                   (120, 60)),   # UX-behaviour collector — its
+                                                     # OWN generous bucket (batched
+                                                     # sendBeacon flushes, up to
+                                                     # ~1/5s + on hide) so it never
+                                                     # eats the shared /api budget
     ("/api/orchestrator/poll",         (240, 60)),   # event poll — spends NOTHING (reads an
                                                      # in-memory event log). Fires ~1/s while
                                                      # the agent works, so it needs its own
@@ -971,6 +976,31 @@ def create_app() -> Flask:
         # 204: no body; sendBeacon ignores the response anyway.
         return ("", 204)
 
+    @app.post("/api/collect")
+    def api_collect() -> Response:
+        """First-party UX-behaviour ingest (sibling of /api/ping). The
+        collector.js batch POSTs {session_id, events:[…]} via sendBeacon —
+        dead/rage clicks, scroll depth, funnel steps, feature clicks, client
+        errors. STRUCTURE ONLY: the client sends element ids / data-analytics
+        labels / tag paths, never sequence content, and never identity — the
+        server stamps user_id / anon_fingerprint from g.auth in
+        log_client_events_async, which also whitelists `kind`, caps string
+        lengths, and drops unexpected keys (never trusts client shape).
+
+        Auth optional, best-effort — returns 204 fast and never does work on
+        the request thread (the writer fires off a daemon thread)."""
+        try:
+            data = request.get_json(silent=True) or {}
+            sid = str(data.get("session_id") or "")[:64]
+            events = data.get("events")
+            # Cap events per request so a crafted payload can't fan out into a
+            # huge batch insert; the writer re-caps + sanitizes each row.
+            if sid and isinstance(events, list) and events:
+                _auth.log_client_events_async(sid, events[:100])
+        except Exception:  # noqa: BLE001 — telemetry never affects the response
+            pass
+        return ("", 204)
+
     @app.before_request
     def _enforce_rate_limit() -> Optional[Response]:
         # Throttle only API calls — the SPA shell + static assets are cheap and

dee/static/app.css

@@ -46,13 +46,13 @@ html {
        gray-0 (was pure white) is now the warmest paper; gray-9 (was near-black)
        stays as ink. The progression in between is desaturated and warmed so
        every surface reads as "off-white paper" rather than "tinted slate". */
-    --gray-0:  #FBFAF6;  /* warm paper card */
-    --gray-1:  #F7F5F0;  /* warm paper canvas */
+    --gray-0:  #FFFFFF;  /* card — pure white so it reads as raised off the warm canvas */
+    --gray-1:  #EFEBE2;  /* warm paper canvas — darkened so white cards separate clearly */
     --gray-2:  #EFECE5;  /* paper soft */
-    --gray-3:  #E5E2DC;  /* hairline-soft */
-    --gray-4:  #D6D3D1;  /* hairline */
+    --gray-3:  #D9D3C8;  /* hairline-soft — strengthened so card borders are visible in light */
+    --gray-4:  #C8C1B4;  /* hairline */
     --gray-5:  #B8B4AE;  /* hairline-strong */
-    --gray-6:  #8A857E;  /* ink faint */
+    --gray-6:  #6E6A65;  /* ink faint — darkened from #8A857E for WCAG AA in light */
     --gray-7:  #6B6862;  /* ink soft */
     --gray-8:  #2A2A29;  /* ink */
     --gray-9:  #0A0A0A;  /* ink strong */
@@ -96,7 +96,7 @@ html {
     --ink:             var(--gray-8);
     --ink-soft:        var(--gray-7);
     --ink-faint:       var(--gray-6);
-    --ink-disabled:    var(--gray-5);
+    --ink-disabled:    #8A857E;   /* decoupled from shared --gray-5; darkened for readability */
 
     /* Button-hover fill/text. Deliberately FIXED (not redefined in the dark
        block) so an action button always inverts to a near-black rectangle with
@@ -190,6 +190,7 @@ html {
     --gray-7:  #B2ACA2;   /* ink soft              */
     --gray-8:  #D9D4CA;   /* ink                   */
     --gray-9:  #F4F1E9;   /* ink strong (off-white)*/
+    --ink-disabled:  #8C877F;  /* decoupled from --gray-5 (#514D47) so meta/disabled text is legible on dark paper */
 
     /* Dark glyphs read on the off-white --ink-strong fill (see light block). */
     --on-ink:  #17150F;
@@ -1565,19 +1566,25 @@ input:focus, textarea:focus, select:focus {
     overflow: hidden;
     position: relative;
 }
-.alphafold-viewer .msp-plugin { background: #0E141B !important; }
+/* The same overrides apply to the Structure tab's host (.struct-viewer), which
+ * shares Mol*'s default light control theme and would otherwise show dark-brown
+ * icons on our dark canvas. */
+.alphafold-viewer .msp-plugin, .struct-viewer .msp-plugin { background: #0E141B !important; }
 /* Dark-theme Mol*'s own floating viewport controls. Mol* ships a LIGHT control
  * theme — a cream "semi-transparent" backing strip with dark-brown icons —
  * which clashes with (and renders nearly invisible on) our dark canvas. Recolor
  * the strip dark and the icons light so the whole viewer reads as one dark
  * surface that matches the site. */
-.alphafold-viewer .msp-semi-transparent-background {
+.alphafold-viewer .msp-semi-transparent-background,
+.struct-viewer .msp-semi-transparent-background {
     background: rgba(14, 20, 27, 0.72) !important;
 }
-.alphafold-viewer .msp-viewport-controls-buttons .msp-btn-icon {
+.alphafold-viewer .msp-viewport-controls-buttons .msp-btn-icon,
+.struct-viewer .msp-viewport-controls-buttons .msp-btn-icon {
     color: rgba(233, 237, 243, 0.80) !important;
 }
-.alphafold-viewer .msp-viewport-controls-buttons .msp-btn-icon:hover {
+.alphafold-viewer .msp-viewport-controls-buttons .msp-btn-icon:hover,
+.struct-viewer .msp-viewport-controls-buttons .msp-btn-icon:hover {
     color: #fff !important;
     background: rgba(255, 255, 255, 0.10) !important;
 }
@@ -3553,8 +3560,8 @@ body[data-route="turing"] .workspace { padding: 0; max-width: none; flex: 1; min
     gap: 10px;
     padding: 8px max(env(safe-area-inset-right, 0px), 20px)
             8px max(env(safe-area-inset-left, 0px), 20px);
-    background: #FFF8EC;
-    border-bottom: 1px solid #E8D8AC;
+    background: #FCEECC;
+    border-bottom: 1px solid #E3C88A;
     box-shadow: inset 4px 0 0 0 #B47A1F;
     font-family: var(--font-body);
     font-size: 12.5px;
@@ -3768,6 +3775,8 @@ body[data-route="turing"] .workspace { padding: 0; max-width: none; flex: 1; min
     background: var(--brand-50);
 }
 .theme-toggle svg { width: 18px; height: 18px; }
+/* Relocated into the sidebar footer, above the account chip. */
+.sidebar-theme { align-self: center; margin: 4px auto 6px; }
 /* Icon swap — specificity matched (.theme-toggle .theme-icon-*) so neither the
  * base `.theme-toggle svg` rule nor the dark override can leak both icons in. */
 .theme-toggle .theme-icon-sun  { display: none; }
@@ -6790,26 +6799,12 @@ body[data-ui="bench"] #navTuring { display: none; }
 .mc-h { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3.4vw, 36px);
     letter-spacing: -0.02em; color: var(--ink-strong); margin: 0 0 22px; line-height: 1.05; }
 
-/* command spine */
-.mc-cmd { position: relative; display: flex; align-items: center; gap: 12px; border: 1px solid var(--ink-strong);
-    padding: 12px 12px 12px 18px; background: var(--bg-card); }
-.mc-cmd-i { width: 16px; height: 16px; color: var(--ink-faint); flex: none; }
-.mc-cmd input { flex: 1; border: 0; background: none; font-family: var(--font-ui); font-size: 15px;
-    color: var(--ink); outline: none; }
-.mc-cmd input::placeholder { color: var(--ink-faint); }
-.mc-cmd-k { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); border: 1px solid var(--line-strong);
-    padding: 3px 7px; letter-spacing: 0.05em; flex: none; }
-.mc-cmd-send { width: 38px; height: 38px; border-radius: 50%; background: var(--ink-strong);
-    color: var(--on-ink); border: 0; cursor: pointer; font-size: 16px; line-height: 1; flex: none; }
-.mc-cmd-send:hover { background: var(--hover-fill); color: var(--hover-text); }
-.mc-palette { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; background: var(--bg-card);
-    border: 1px solid var(--line-strong); box-shadow: var(--elev-2, 0 8px 30px rgba(0,0,0,.10)); max-height: 320px; overflow: auto; }
-.mc-pal-item { display: flex; align-items: baseline; gap: 12px; padding: 11px 16px; cursor: pointer;
-    border-bottom: 1px solid var(--line); }
-.mc-pal-item:last-child { border-bottom: 0; }
-.mc-pal-item.sel, .mc-pal-item:hover { background: var(--bg-hover); }
-.mc-pal-l { font-size: 14px; color: var(--ink-strong); }
-.mc-pal-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-faint); margin-left: auto; }
+/* The Mission Control command bar and its ⌘K palette were deleted with the
+   second composer (one chat, 2026-07-27); .mc-cmd* / .mc-palette / .mc-pal-*
+   had no markup left to style. Sam's focus-ring fix from that block — put
+   focus on the CONTAINER, not the inner input, so it stops reading as a
+   second box nested inside the first — is carried over to .finder-in below,
+   which is the search box that replaced it. */
 
 /* engine telemetry strip */
 /* Wraps on container width, for the same reason .mc-grid does — the old
@@ -6873,6 +6868,12 @@ body[data-ui="bench"] #navTuring { display: none; }
     font-family: inherit; font-size: 15px; color: var(--ink-strong);
 }
 .finder-in input::placeholder { color: var(--ink-faint); }
+/* Focus belongs to the whole box, not the inner input — a ring on the input
+   itself reads as a second box nested inside the first. Carried over from the
+   command bar this replaced, which had exactly that bug; here the input was
+   simply left with no focus indication at all, which is the other failure. */
+.finder-in input:focus, .finder-in input:focus-visible { box-shadow: none; outline: none; }
+.finder-box:focus-within { border-color: var(--ink-soft); box-shadow: 0 0 0 3px var(--brand-ring), var(--elev-4, 0 24px 64px rgba(0,0,0,.3)); }
 .finder-in kbd {
     font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint);
     border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 5px; flex: none;
@@ -7034,21 +7035,31 @@ body[data-ui="bench"] #navTuring { display: none; }
    fold_structure tool with a public AlphaFold-DB model. Reuses the existing
    .alphafold-loading overlay styling for the load/error states.
    ═══════════════════════════════════════════════════════════════════════ */
-.view--structure { padding: 28px 32px 40px; overflow: auto; }
-.struct { max-width: 1080px; margin: 0 auto; }
-.struct-head { display: flex; align-items: flex-end; justify-content: space-between;
+/* Fill the canvas. The Structure view is a flex COLUMN that fills the bench
+   canvas height so the Mol* host takes every pixel left below the head/note
+   (head + note stay their intrinsic height; the viewer flexes to fill). The
+   live section carries class `view--structure2`; `.view--structure` is kept
+   as a belt-and-braces alias. min-height:0 lets the flex child actually
+   shrink; overflow:auto is a floor-scroll safety on very short viewports. */
+.view--structure2, .view--structure { padding: 28px 32px 40px; flex: 1 1 auto; height: 100%; min-height: 0; overflow: auto; }
+.struct { max-width: none; margin: 0; height: 100%; min-height: min(62vh, 560px);
+    display: flex; flex-direction: column; }
+.struct-head { flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: space-between;
     gap: 20px; margin-bottom: 18px; }
 .struct-head h2 { font-weight: 500; letter-spacing: -0.012em; margin: 2px 0 0; }
-.struct-viewer { position: relative; width: 100%; height: min(62vh, 560px);
+.struct-head-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
+.struct-viewer { position: relative; flex: 1 1 auto; min-height: 0; width: 100%;
     border: 1px solid var(--line-strong); background: #0E141B; overflow: hidden; }
+/* App-owned fullscreen (Mol*'s native expand is disabled for this host). */
+.struct-viewer--full { position: fixed; inset: 0; z-index: 60; height: auto; width: auto;
+    border: 0; border-radius: 0; }
 .struct-empty { position: absolute; inset: 0; display: flex; align-items: center;
     justify-content: center; text-align: center; padding: 28px; color: rgba(255,255,255,.62);
     font-size: 13.5px; line-height: 1.6; max-width: 460px; margin: auto; }
-.struct-note { margin-top: 12px; font-size: 12px; color: var(--ink-faint); line-height: 1.6; }
+.struct-note { flex: 0 0 auto; margin-top: 12px; font-size: 12px; color: var(--ink-faint); line-height: 1.6; }
 @media (max-width: 860px) {
-    .view--structure { padding: 20px 18px 32px; }
+    .view--structure2, .view--structure { padding: 20px 18px 32px; }
     .struct-head { flex-direction: column; align-items: flex-start; }
-    .struct-viewer { height: 52vh; }
 }
 
 /* ═══════════════════════════════════════════════════════════════════════
@@ -7075,12 +7086,12 @@ body[data-ui="bench"][data-bench="open"] .content > footer { display: none; }
 
 /* Top strand: back · specimen · loop spine */
 body[data-ui="bench"][data-bench="open"] .bench-strip {
-    display: flex; align-items: center; gap: 22px; padding: 0 22px;
+    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; padding: 0 22px;
     position: fixed; top: 0; left: 0; right: 0; height: var(--bench-strip-h); z-index: 40;
     background: var(--bg-app); border-bottom: 1px solid var(--line);
 }
 .bench-back { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-soft);
-    background: none; border: none; cursor: pointer; padding: 4px 6px; }
+    background: none; border: none; cursor: pointer; padding: 4px 6px; justify-self: start; }
 .bench-back:hover { color: var(--ink-strong); }
 .bench-specimen { display: flex; align-items: center; gap: 11px; padding: 5px 13px 5px 7px; border: 1px solid var(--line-strong); }
 .bench-spec-thumb { width: 28px; height: 28px; background: #070809; display: flex; align-items: center;
@@ -7192,12 +7203,12 @@ body[data-ui="bench"][data-bench="open"] .workspace > .view {
    ═══════════════════════════════════════════════════════════════════════ */
 body[data-ruo="accepted"] .research-strip {
     padding-top: 5px; padding-bottom: 5px;
-    background: transparent; border-bottom: 1px solid var(--line);
-    box-shadow: none; font-size: 11px; color: var(--ink-faint);
-    opacity: .72; transition: opacity var(--t-fast);
+    background: rgba(180, 120, 40, 0.06); border-bottom: 1px solid var(--line);
+    box-shadow: inset 3px 0 0 0 var(--warning); font-size: 11px; color: var(--ink-soft);
+    opacity: 1; transition: opacity var(--t-fast);
 }
 body[data-ruo="accepted"] .research-strip:hover { opacity: 1; }
-body[data-ruo="accepted"] .research-strip-dot { color: var(--ink-faint); }
+body[data-ruo="accepted"] .research-strip-dot { color: var(--warning); }
 /* Keep the load-bearing words; drop the sentence that repeats the modal. */
 body[data-ruo="accepted"] .research-strip-text .ruo-long { display: none; }
 
@@ -7469,24 +7480,24 @@ body[data-cockpit="open"]:not([data-bench="open"]) .cockpit { top: 0; }
 
 /* ── composer ───────────────────────────────────────────────────────── */
 .cp-compose {
-    flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px;
-    padding: 10px 12px 12px;
-    border-top: 1px solid var(--line);
-    background: var(--bg-card);
+    flex: 0 0 auto; display: flex; align-items: flex-end; gap: 6px;
+    margin: 10px 12px 12px; padding: 4px 4px 4px 16px;
+    border: 1px solid var(--line-strong); border-radius: 22px;
+    background: var(--bg-app);
 }
+.cp-compose:focus-within { border-color: var(--ink-soft); box-shadow: 0 0 0 3px var(--brand-ring); }
 .cp-compose textarea {
-    flex: 1; resize: none; border: 1px solid var(--line-strong); border-radius: 8px;
-    padding: 9px 11px; font: inherit; font-size: 13px; line-height: 1.45;
-    background: var(--bg-app); color: var(--ink); max-height: 160px;
+    flex: 1; resize: none; border: 0; border-radius: 0;
+    padding: 8px 0; font: inherit; font-size: 13px; line-height: 1.45;
+    background: none; color: var(--ink); max-height: 160px;
     font-family: inherit;
 }
 .cp-compose textarea:focus {
-    outline: none; border-color: var(--ink-soft);
-    box-shadow: 0 0 0 3px var(--brand-ring);
+    outline: none; border: 0; box-shadow: none;
 }
 .cp-send {
-    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
-    border: 1px solid var(--ink-strong); background: var(--ink-strong);
+    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
+    border: 0; background: var(--ink-strong);
     color: var(--on-ink); font-size: 15px; line-height: 1;
 }
 .cp-send:hover { opacity: 0.86; }

dee/static/app.js

@@ -449,6 +449,12 @@ function showRoute(name) {
     // Mission Control is a bench-mode-only view; lazy-load its portfolio the
     // first time it's shown (reuses the saved-work list endpoints).
     if (name === 'mission' && window.TDMission) window.TDMission.show();
+    // Structure tab: if it's opened with no real structure resolved, the
+    // controller paints a live rotating demo hero (guarded so it never races
+    // or overrides a real gene resolve).
+    if (name === 'structure' && window.TDStructure && window.TDStructure.onShown) {
+        try { window.TDStructure.onShown(); } catch (e) {}
+    }
     // Bench: keep the canvas tab in sync, and close the bench chrome when
     // navigating away to Mission Control / Turing.
     if (window.TDBench) window.TDBench.onRoute(name);
@@ -3504,6 +3510,44 @@ function _afApplyBg(viewer) {
     try { viewer.plugin.canvas3d.setProps({ renderer: { backgroundColor: _AF_BG } }); } catch (_) {}
 }
 
+// ── Structure-tab runtime dressing (spin / pinned controls / resize) ─────────
+// All best-effort per the telemetry-never-breaks-UX rule: a failed setProps
+// must never blank the viewer. These are ONLY invoked by the Structure
+// controller — the identify / ESMFold / CRISPR embeds never call them, so
+// those keep their exact prior behaviour (no spin, controls off, expand on).
+function _afSpinOn(viewer) {
+    try { viewer.plugin.canvas3d.setProps({ trackball: { animate: { name: 'spin', params: { speed: 1 } } } }); } catch (_) {}
+}
+function _afSpinOff(viewer) {
+    try { viewer.plugin.canvas3d.setProps({ trackball: { animate: { name: 'off', params: {} } } }); } catch (_) {}
+}
+// Auto-rotate as a live hero: spin until the user first touches the canvas
+// (pointer OR wheel), then stop for good. Capture + once so a single gesture
+// anywhere in the host halts it and the listener cleans itself up.
+function _afAutoRotate(viewer, hostEl) {
+    if (!viewer || !hostEl) return;
+    _afSpinOn(viewer);
+    const stop = () => { _afSpinOff(viewer); };
+    try {
+        hostEl.addEventListener('pointerdown', stop, { once: true, capture: true });
+        hostEl.addEventListener('wheel', stop, { once: true, capture: true });
+    } catch (_) {}
+}
+// Pin Mol*'s controls panel open on the right. On this prebuilt build the
+// `layoutShowControls` option alone is not enough — the regionState is what
+// actually reveals the panel.
+function _afPinControls(viewer) {
+    try {
+        viewer.plugin.layout.setProps({
+            showControls: true,
+            regionState: { left: 'hidden', right: 'full', top: 'full', bottom: 'full' },
+        });
+    } catch (_) {}
+}
+function _afResize(viewer) {
+    try { viewer.plugin.canvas3d.handleResize(); } catch (_) {}
+}
+
 // Honest failure UI. A transient EBI outage gets a "temporarily unreachable +
 // Retry" affordance (the model DOES exist, EBI just blipped); a genuine
 // absence says so plainly. Never again claim "model doesn't exist" when the
@@ -3533,7 +3577,7 @@ function _afShowError(host, transient, retry) {
 // Mol* viewer mount. Loads the AlphaFold model from the EBI CDN and renders
 // it inside #alphafoldViewer. We wait for the molstar global to appear
 // (script is loaded async) before mounting.
-async function mountAlphaFoldViewer(hit, host) {
+async function mountAlphaFoldViewer(hit, host, extraOpts) {
     // `host` defaults to the page-level identify embed, but the per-variant
     // AlphaFold modal passes its own host (#foldViewer) so the same resilient
     // loader serves both embeds.
@@ -3544,23 +3588,31 @@ async function mountAlphaFoldViewer(hit, host) {
 
     const molstar = await _afWaitMolstar();
     if (!molstar) {
-        _afShowError(host, true, () => mountAlphaFoldViewer(hit, host));   // CDN blip → retry, don't tell them to refresh
+        _afShowError(host, true, () => mountAlphaFoldViewer(hit, host, extraOpts));   // CDN blip → retry, don't tell them to refresh
         return;
     }
     try {
-        const viewer = await molstar.Viewer.create(host, _AF_VIEWER_OPTS);
+        // Per-host option overrides layer OVER the shared defaults so the
+        // Structure tab can turn controls on / native-expand off WITHOUT
+        // changing _AF_VIEWER_OPTS (which the identify/ESMFold/CRISPR 360px
+        // embeds still rely on — controls off, expand on). Callers that pass
+        // nothing get the exact previous behaviour.
+        const opts = Object.assign({}, _AF_VIEWER_OPTS, extraOpts || {});
+        const viewer = await molstar.Viewer.create(host, opts);
         _afApplyBg(viewer);
+        host.__mviewer = viewer;   // stash so runtime calls (spin/layout/resize) can find it
         const { candidates, exists } = await _afResolve(pdbUrl);
         if (!await _afTryLoad(viewer, candidates)) {
             // exists === false → genuinely no model; otherwise treat as a
             // transient EBI blip and offer a retry.
-            _afShowError(host, exists !== false, () => mountAlphaFoldViewer(hit, host));
+            _afShowError(host, exists !== false, () => mountAlphaFoldViewer(hit, host, extraOpts));
             return;
         }
         const overlay = host.querySelector('.alphafold-loading');
         if (overlay) overlay.remove();
+        return viewer;   // hand the instance back so the caller can spin/pin/resize it
     } catch (err) {
-        _afShowError(host, true, () => mountAlphaFoldViewer(hit, host));
+        _afShowError(host, true, () => mountAlphaFoldViewer(hit, host, extraOpts));
     }
 }
 
@@ -8755,13 +8807,17 @@ function runOracle(opts){
                  outcomes: [{ subject, measured_value: parseFloat($('poResult').value), outcome: 'measured' }] };
     });
     // Cloning assembly logger
-    wire('coSave', 'coStatus', () => {
+    wire('coSave', 'coStatus', (set) => {
+        // Require an explicit outcome — a never-touched form must not inject a
+        // fabricated "Gibson → Assembled" datapoint into the shared prior.
+        const outcome = $('coResult').value;
+        if (!outcome) { set('Pick an assembly outcome first.', true); return null; }
         const method = $('coMethod').value;
         const frags = parseInt($('coFrags').value || '2', 10);
         const overlap = parseInt($('coOverlap').value || '25', 10);
         const subject = `${method}|frags=${frags}|overlap=${overlap}`;
         return { tool: 'cloning', design_id: uuid(),
-                 outcomes: [{ subject, measured_value: parseFloat($('coResult').value), outcome: 'measured' }] };
+                 outcomes: [{ subject, measured_value: parseFloat(outcome), outcome: 'measured' }] };
     });
 })();
 
@@ -9616,6 +9672,9 @@ function runOracle(opts){
 // ═══════════════════════════════════════════════════════════════════════
 (function () {
     let mountedAcc = null;   // don't remount the structure already showing
+    let viewerRef = null;    // the live Mol* viewer (real structure OR demo hero)
+    let demoActive = false;  // true while the PCSK9 demo hero owns the host
+    let busy = false;        // a mount (real or demo) is in flight — guards the race
 
     function el(id) { return document.getElementById(id); }
 
@@ -9628,6 +9687,18 @@ function runOracle(opts){
         } catch (_) { return ''; }
     }
 
+    // Runtime dressing shared by the real + demo mounts: keep the viewer
+    // reference, auto-rotate as a hero until first touch, pin the controls
+    // panel open, and re-fit the canvas once the panel has taken its width.
+    // Every step is best-effort — a failure here must never blank the viewer.
+    function dress(viewer, host) {
+        if (!viewer) return;
+        viewerRef = viewer;
+        try { _afAutoRotate(viewer, host); } catch (_) {}
+        try { _afPinControls(viewer); } catch (_) {}
+        try { setTimeout(function () { _afResize(viewer); }, 80); } catch (_) {}
+    }
+
     function show(info) {
         info = info || {};
         const url = safeAfUrl(info.alphafold_url);
@@ -9655,9 +9726,23 @@ function runOracle(opts){
 
         if (mountedAcc && mountedAcc === acc) return;   // already showing this one
         mountedAcc = acc;
+        demoActive = false;   // a real structure always supersedes the demo hero
+        busy = true;
+        // If the demo hero was spinning, halt it before we replace the host DOM.
+        try { if (viewerRef) _afSpinOff(viewerRef); } catch (_) {}
         host.innerHTML = '<div class="alphafold-loading">Loading predicted structure…</div>';
         host.dataset.pdbUrl = url;
-        try { mountAlphaFoldViewer({ alphafold_url: url }, host); } catch (_) {}
+        // Structure-only overrides: controls panel ON, Mol*'s broken native
+        // expand OFF (we own fullscreen). _AF_VIEWER_OPTS itself is untouched,
+        // so the identify/ESMFold/CRISPR embeds are unaffected.
+        (async function () {
+            try {
+                const viewer = await mountAlphaFoldViewer({ alphafold_url: url }, host,
+                    { layoutShowControls: true, viewportShowExpand: false });
+                if (viewer) dress(viewer, host);
+            } catch (_) {
+            } finally { busy = false; }
+        })();
     }
 
     // Show it AND bring the Structure tab forward (only inside an open bench —
@@ -9670,7 +9755,81 @@ function runOracle(opts){
         }
     }
 
-    window.TDStructure = { show: show, open: open };
+    // Empty-state hero. When the Structure tab is opened with NO real structure
+    // resolved (and none loading), mount a public demo model — PCSK9 / Q8NBP7,
+    // straight from AlphaFold-DB via the confirmed loadAlphaFoldDb API — and let
+    // it rotate. This makes the viewer a live hero with no backend and lets it
+    // be seen before any protein is named.
+    //
+    // GUARD HARD: this must NEVER override or race a real gene resolve. We bail
+    // if a real structure is mounted (mountedAcc), a mount is in flight (busy),
+    // the demo is already up (demoActive), or a Mol* plugin already occupies the
+    // host — and we re-check mountedAcc after every await so a resolve that
+    // lands mid-load always wins.
+    async function onShown() {
+        const host = el('structViewer');
+        if (!host) return;
+        if (mountedAcc || busy || demoActive) return;
+        if (host.querySelector('.msp-plugin')) return;   // a viewer is already mounted
+        const prevHTML = host.innerHTML;                 // the empty-state placeholder
+        busy = true; demoActive = true;
+        try {
+            host.innerHTML = '<div class="alphafold-loading">Loading a demo structure…</div>';
+            const molstar = await ensureMolstar();
+            if (!molstar || mountedAcc) { throw new Error('unavailable-or-superseded'); }
+            const opts = Object.assign({}, _AF_VIEWER_OPTS,
+                { layoutShowControls: true, viewportShowExpand: false });
+            const viewer = await molstar.Viewer.create(host, opts);
+            _afApplyBg(viewer);
+            host.__mviewer = viewer;
+            if (mountedAcc) { return; }               // a real resolve won the race
+            await viewer.loadAlphaFoldDb('Q8NBP7');   // PCSK9 — confirmed on this build
+            if (mountedAcc) { return; }               // ...check again after the fetch
+            const ov = host.querySelector('.alphafold-loading'); if (ov) ov.remove();
+            dress(viewer, host);
+        } catch (_) {
+            demoActive = false;
+            // Restore the empty-state message if nothing actually mounted.
+            try { if (!host.querySelector('.msp-plugin')) host.innerHTML = prevHTML; } catch (e) {}
+        } finally { busy = false; }
+    }
+
+    // App-owned fullscreen. Mol*'s native expand is disabled for this host
+    // (viewportShowExpand:false), so we toggle a .struct-viewer--full class
+    // (position:fixed; inset:0) and re-fit the canvas. Escape exits.
+    function isFull() {
+        const h = el('structViewer');
+        return !!(h && h.classList.contains('struct-viewer--full'));
+    }
+    function setFull(on) {
+        const host = el('structViewer'); if (!host) return;
+        host.classList.toggle('struct-viewer--full', !!on);
+        const btn = el('structFullBtn');
+        if (btn) {
+            btn.setAttribute('aria-pressed', on ? 'true' : 'false');
+            btn.textContent = on ? 'Exit fullscreen' : 'Fullscreen';
+        }
+        try { requestAnimationFrame(function () { if (viewerRef) _afResize(viewerRef); }); } catch (_) {}
+    }
+    (function wireFullscreen() {
+        try {
+            const btn = el('structFullBtn');
+            if (btn && btn.dataset.wired !== '1') {
+                btn.dataset.wired = '1';
+                btn.addEventListener('click', function () { try { setFull(!isFull()); } catch (_) {} });
+            }
+            document.addEventListener('keydown', function (e) {
+                if (e.key === 'Escape' && isFull()) { try { setFull(false); } catch (_) {} }
+            });
+        } catch (_) {}
+    })();
+
+    window.TDStructure = { show: show, open: open, onShown: onShown };
+
+    // Cold deep-link: showRoute() runs during initial script execution, BEFORE
+    // this controller is defined, so its #structure hook can't have reached us.
+    // If we loaded straight into the Structure tab, kick the hero here.
+    try { if (document.body.getAttribute('data-route') === 'structure') onShown(); } catch (e) {}
 })();
 
 

dee/static/cockpit.js

@@ -368,8 +368,6 @@
                       'aria-expanded="false" aria-label="Past runs" title="Past runs">&#9662;</button>' +
               '<button type="button" class="cp-icon" id="cpExport" ' +
                       'aria-label="Export this run" title="Export run as Markdown">&#8595;</button>' +
-              '<button type="button" class="cp-min" id="cpMin" aria-label="Collapse Turing" ' +
-                      'aria-expanded="true" title="Collapse">&minus;</button>' +
             '</header>' +
             '<div class="cp-menu" id="cpMenu" role="menu" hidden></div>' +
             /* Cost and context are already computed server-side and returned
@@ -396,7 +394,6 @@
             input: root.querySelector("#cpInput"),
             stateLbl: root.querySelector("#cpState"),
             stop: root.querySelector("#cpStop"),
-            min: root.querySelector("#cpMin"),
             jump: root.querySelector("#cpJump"),
             newBtn: root.querySelector("#cpNew"),
             histBtn: root.querySelector("#cpHist"),
@@ -462,9 +459,6 @@
             if (state.stick) showJump(false);
         }, { passive: true });
         state.els.jump.addEventListener("click", function () { scrollDown(true); });
-        // The whole header is the hit target when collapsed — a 20px glyph is
-        // not a reasonable tap target on a phone.
-        state.els.min.addEventListener("click", toggleMin);
         root.querySelector(".cp-head").addEventListener("click", function (e) {
             if (document.body.getAttribute("data-cockpit") === "min" &&
                 !e.target.closest(".cp-stop")) toggleMin();
@@ -1180,15 +1174,20 @@
     }
     function close() { document.body.removeAttribute("data-cockpit"); }
 
+    /* Collapsed ⇄ expanded. The header's collapse BUTTON was removed (it set an
+       unstyled state and hid the rail with no way back), but the state itself
+       is still entered on purpose: boot() starts a phone collapsed so the rail
+       doesn't bury the app behind a sheet nobody asked for.
+
+       Guarding this whole function on the removed button made it a no-op — and
+       since the rail is the only way into the product, that left every phone
+       booted into a collapsed rail with no way to expand it: the exact trap the
+       button was removed to avoid, from the other side. Clicking .cp-head is
+       the way back (see the handler in wire(), and the cursor:pointer rule). */
     function toggleMin() {
         var min = document.body.getAttribute("data-cockpit") === "min";
         document.body.setAttribute("data-cockpit", min ? "open" : "min");
-        if (state.els) {
-            state.els.min.innerHTML = min ? "&minus;" : "&plus;";
-            state.els.min.setAttribute("aria-expanded", min ? "true" : "false");
-            state.els.min.setAttribute("title", min ? "Collapse" : "Expand");
-            if (min) scrollDown();
-        }
+        if (min) scrollDown();
     }
 
     function reset() {
@@ -1548,10 +1547,9 @@
         // there and let them pull it up. Desktop has room for both.
         var narrow = window.matchMedia && window.matchMedia("(max-width: 900px)").matches;
         document.body.setAttribute("data-cockpit", narrow ? "min" : "open");
-        if (narrow && state.els) {
-            state.els.min.innerHTML = "&plus;";
-            state.els.min.setAttribute("aria-expanded", "false");
-        }
+        // Nothing to label here any more — the collapse button is gone, and
+        // dereferencing it threw a TypeError on every narrow-viewport boot,
+        // which killed cockpit init on phones outright.
         restore();
     }
     if (document.readyState !== "loading") boot();

dee/static/collector.js

@@ -0,0 +1,443 @@
+/* TuringDNA first-party UX-behaviour collector.
+ *
+ * A small, best-effort companion to telemetry.js. Where telemetry.js measures
+ * HOW LONG a user stays, this measures WHERE THE UX RUBS: clicks that do
+ * nothing (dead_click), frustration bursts (rage_click), how far a view is read
+ * (scroll_depth), how users move between tools (funnel_step / funnel_exit),
+ * which labelled controls get used (feature_click), and front-end breakage
+ * (client_error).
+ *
+ * PRIVACY (non-negotiable — see PRIVACY.md and #pasteArea/#metaPreview et al.):
+ *   The product promises proprietary genetic sequences are NEVER sent to a
+ *   third party. This collector captures element STRUCTURE ONLY — an `id`, a
+ *   developer-authored `data-analytics` label, or a `tag[role]:nth-of-type`
+ *   path. It NEVER reads `.value`, `.textContent`, `.innerText`, input contents,
+ *   or any user-typed string. See describe()/safeSelector() below — those are
+ *   the single chokepoint, and they touch only tagName / id / role /
+ *   data-analytics / sibling index.
+ *
+ * IDENTITY: the client sends ONLY an opaque session id + a list of events. It
+ *   never sends who the user is. The SERVER stamps user_id / anon_fingerprint
+ *   from the request (see /api/collect → auth.log_client_events_async). The
+ *   session id is the SAME persisted `td_session_id` telemetry.js uses, so
+ *   these events join the existing app_sessions row (which already carries the
+ *   user_id captured by telemetry's authenticated beats).
+ *
+ * TRANSPORT: events are batched and flushed via navigator.sendBeacon to
+ *   /api/collect on whichever comes first — ~10 events, ~5 s, or the tab
+ *   hiding / unloading. Everything is wrapped in try/catch; telemetry must
+ *   never throw into, or break, the UX.
+ */
+(function () {
+    'use strict';
+
+    // ── Shared, persisted session id ──────────────────────────────────────
+    // Identical logic to telemetry.js so, whichever script runs first, both
+    // read the SAME id from localStorage (key 'td_session_id') and the events
+    // join the same app_sessions row. Falls back to an in-memory id if
+    // localStorage is unavailable (private mode / sandboxed iframe).
+    function uuid() {
+        try { if (window.crypto && crypto.randomUUID) return crypto.randomUUID(); } catch (e) {}
+        return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+            var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
+            return v.toString(16);
+        });
+    }
+    function sessionId() {
+        try {
+            var k = 'td_session_id';
+            var v = localStorage.getItem(k);
+            if (!v) { v = uuid(); localStorage.setItem(k, v); }
+            return v;
+        } catch (e) { return uuid(); }
+    }
+    var SID = sessionId();
+
+    // ── Batch + flush ─────────────────────────────────────────────────────
+    var MAX_BATCH   = 10;     // flush when the queue reaches this many events
+    var FLUSH_MS    = 5000;   // …or after this long, whichever comes first
+    var MAX_QUEUE   = 100;    // hard cap; drop OLDEST if a burst outruns flush
+    var MAX_SEL_LEN = 200;    // safe-selector length cap (server re-caps too)
+    var queue = [];
+    var flushTimer = null;
+
+    function currentRoute() {
+        try { return document.body.getAttribute('data-route') || ''; } catch (e) { return ''; }
+    }
+
+    function enqueue(kind, opts) {
+        try {
+            opts = opts || {};
+            var ev = {
+                kind:      kind,
+                route:     opts.route != null ? opts.route : currentRoute(),
+                selector:  opts.selector != null ? String(opts.selector).slice(0, MAX_SEL_LEN) : null,
+                value_num: (typeof opts.value_num === 'number' && isFinite(opts.value_num)) ? opts.value_num : null,
+                meta:      opts.meta || {},
+                client_ts: new Date().toISOString()
+            };
+            queue.push(ev);
+            if (queue.length > MAX_QUEUE) queue.splice(0, queue.length - MAX_QUEUE);
+            if (queue.length >= MAX_BATCH) { flush(false); return; }
+            if (flushTimer == null) {
+                flushTimer = setTimeout(function () { flush(false); }, FLUSH_MS);
+            }
+        } catch (e) { /* best-effort — never throw into the UX */ }
+    }
+
+    function flush(force) {
+        try {
+            if (flushTimer != null) { clearTimeout(flushTimer); flushTimer = null; }
+            if (!queue.length) return;
+            var batch = queue;
+            queue = [];
+            var body = JSON.stringify({ session_id: SID, events: batch });
+            var sent = false;
+            if (navigator.sendBeacon) {
+                try {
+                    sent = navigator.sendBeacon('/api/collect', new Blob([body], { type: 'application/json' }));
+                } catch (e) { sent = false; }
+            }
+            if (!sent) {
+                // Fallback: keepalive fetch (rides auth.js's JWT wrapper, so a
+                // size/time flush from a signed-in user can still be attributed
+                // server-side). Beacon stays the primary path on unload.
+                try {
+                    fetch('/api/collect', {
+                        method:  'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body:    body,
+                        keepalive: true
+                    }).catch(function () {});
+                } catch (e) { /* give up — telemetry is best-effort */ }
+            }
+        } catch (e) { /* ignore */ }
+    }
+
+    // ── Safe element descriptor (STRUCTURE ONLY) ──────────────────────────
+    // The privacy chokepoint. Reads ONLY tagName / id / role / data-analytics
+    // / sibling index — never value, textContent, innerText, or attributes
+    // that could carry user input. Returns a short, structural path like
+    // `#resultsCard>button[role=button]:nth-of-type(2)`.
+    function describe(el) {
+        try {
+            if (!el || el.nodeType !== 1) return null;
+            var a = el.getAttribute && el.getAttribute('data-analytics');
+            if (a) return '[data-analytics=' + String(a).slice(0, 60) + ']';
+            if (el.id) return '#' + String(el.id).slice(0, 80);
+            var tag = (el.tagName || '').toLowerCase();
+            var role = el.getAttribute && el.getAttribute('role');
+            var sel = tag + (role ? '[role=' + String(role).slice(0, 24) + ']' : '');
+            var p = el.parentNode;
+            if (p && p.children && p.children.length > 1) {
+                var same = 0, idx = 0, i;
+                for (i = 0; i < p.children.length; i++) {
+                    var c = p.children[i];
+                    if (c.tagName === el.tagName) { same++; if (c === el) idx = same; }
+                }
+                if (same > 1 && idx > 0) sel += ':nth-of-type(' + idx + ')';
+            }
+            return sel;
+        } catch (e) { return null; }
+    }
+
+    function safeSelector(el) {
+        // Walk up to ~4 crumbs, stopping at the first id / data-analytics
+        // anchor (which uniquely locates the node without more context).
+        try {
+            var crumbs = [], node = el, hops = 0;
+            while (node && node.nodeType === 1 && hops < 4) {
+                var d = describe(node);
+                if (!d) break;
+                crumbs.unshift(d);
+                if (d.charAt(0) === '#' || d.indexOf('[data-analytics=') === 0) break;
+                node = node.parentNode;
+                hops++;
+            }
+            return crumbs.join('>').slice(0, MAX_SEL_LEN);
+        } catch (e) { return null; }
+    }
+
+    var INTERACTIVE = 'a,button,input,select,textarea,label,summary,details,option,[role=button],[role=tab],[role=menuitem],[role=option],[tabindex],[contenteditable]';
+
+    // ── dead_click ────────────────────────────────────────────────────────
+    // A click that lands on nothing interactive AND causes no observable
+    // change → the user thought something was clickable but it wasn't.
+    //
+    // "Did anything change?" MUST be scoped to the CLICKED ELEMENT'S OWN
+    // SUBTREE (PostHog-style). Watching the whole document is defeated by any
+    // unrelated background DOM churn — retry loops, live updates, animations:
+    // some node almost always mutates within the window, so every click looks
+    // live and dead_click never fires (the false-negative bug caught in
+    // review). A dead click means *this element and its descendants* didn't
+    // change, PLUS no navigation, focus change, or text-selection change.
+    function selSnapshot() {
+        // A comparable signature of the current selection built from ONLY node
+        // references + integer offsets + booleans — NEVER the selected text
+        // (getSelection().toString() would expose a proprietary sequence the
+        // user highlighted). This lets us detect that the selection CHANGED
+        // without ever reading its content.
+        try {
+            var s = window.getSelection && window.getSelection();
+            if (!s) return null;
+            return {
+                n: s.rangeCount, c: s.isCollapsed,
+                an: s.anchorNode, ao: s.anchorOffset,
+                fn: s.focusNode,  fo: s.focusOffset
+            };
+        } catch (e) { return null; }
+    }
+    function selChanged(a, b) {
+        if (!a || !b) return false;   // indeterminate → don't suppress
+        return a.n !== b.n || a.c !== b.c ||
+               a.an !== b.an || a.ao !== b.ao ||
+               a.fn !== b.fn || a.fo !== b.fo;
+    }
+
+    function watchForDeadClick(target, x, y) {
+        try {
+            var hrefBefore   = location.href;
+            var activeBefore = document.activeElement;
+            var selBefore    = selSnapshot();
+            var mutated = false;
+            var mo = null;
+            try {
+                mo = new MutationObserver(function () { mutated = true; });
+                // SCOPED to the clicked element's own subtree — churn anywhere
+                // ELSE in the document can no longer set this flag. We only ever
+                // flip a boolean; the mutation records are never read.
+                mo.observe(target, {
+                    childList: true, subtree: true, attributes: true, characterData: true
+                });
+            } catch (e) { mo = null; }
+            var hashMoved = false;
+            function onHash() { hashMoved = true; }
+            window.addEventListener('hashchange', onHash, true);
+
+            setTimeout(function () {
+                try {
+                    if (mo) mo.disconnect();
+                    window.removeEventListener('hashchange', onHash, true);
+                    var changed = mutated || hashMoved ||
+                        location.href !== hrefBefore ||
+                        document.activeElement !== activeBefore ||
+                        selChanged(selBefore, selSnapshot());
+                    if (!changed) {
+                        enqueue('dead_click', {
+                            selector: safeSelector(target),
+                            meta: { x: Math.round(x), y: Math.round(y) }
+                        });
+                    }
+                } catch (e2) { /* ignore */ }
+            }, 350);
+        } catch (e) { /* ignore */ }
+    }
+
+    // ── rage_click ──────────────────────────────────────────────────────
+    // >= 3 clicks within 1 s all within a 30 px radius → frustration. Emit at
+    // most once per burst (cooldown) so a 6-click flurry is one signal.
+    var RAGE_MIN = 3, RAGE_WINDOW_MS = 1000, RAGE_RADIUS = 30, RAGE_COOLDOWN_MS = 1000;
+    var clickRing = [];   // recent {x,y,t}
+    var lastRageAt = 0;
+
+    function checkRage(target, x, y, t) {
+        try {
+            clickRing.push({ x: x, y: y, t: t });
+            // keep only the last 1 s
+            while (clickRing.length && t - clickRing[0].t > RAGE_WINDOW_MS) clickRing.shift();
+            if (clickRing.length < RAGE_MIN) return;
+            // all recent clicks within the radius of the current point?
+            var tight = true;
+            for (var i = 0; i < clickRing.length; i++) {
+                var dx = clickRing[i].x - x, dy = clickRing[i].y - y;
+                if (dx * dx + dy * dy > RAGE_RADIUS * RAGE_RADIUS) { tight = false; break; }
+            }
+            if (tight && (t - lastRageAt) > RAGE_COOLDOWN_MS) {
+                lastRageAt = t;
+                enqueue('rage_click', {
+                    selector: safeSelector(target),
+                    value_num: clickRing.length,
+                    meta: { x: Math.round(x), y: Math.round(y), count: clickRing.length }
+                });
+            }
+        } catch (e) { /* ignore */ }
+    }
+
+    // ── feature_click ───────────────────────────────────────────────────
+    // Any click within an element carrying a developer-authored data-analytics
+    // label. The label is our own text (never user input), safe to record.
+    function checkFeatureClick(target) {
+        try {
+            var el = target && target.closest ? target.closest('[data-analytics]') : null;
+            if (!el) return;
+            var label = el.getAttribute('data-analytics');
+            if (!label) return;
+            enqueue('feature_click', {
+                selector: safeSelector(el),
+                meta: { label: String(label).slice(0, 60) }
+            });
+        } catch (e) { /* ignore */ }
+    }
+
+    // Single delegated, capture-phase click handler feeds all three.
+    document.addEventListener('click', function (e) {
+        try {
+            var target = e.target;
+            if (!target || target.nodeType !== 1) return;
+            var x = (typeof e.clientX === 'number') ? e.clientX : 0;
+            var y = (typeof e.clientY === 'number') ? e.clientY : 0;
+            var t = Date.now();   // one consistent clock for the rage ring
+
+            checkFeatureClick(target);
+            checkRage(target, x, y, t);
+
+            var interactive = target.closest ? target.closest(INTERACTIVE) : null;
+            if (!interactive) watchForDeadClick(target, x, y);
+        } catch (err) { /* best-effort */ }
+    }, true);
+
+    // ── scroll_depth ──────────────────────────────────────────────────────
+    // Max read depth per route, bucketed 25/50/75/100, once per bucket per
+    // route. The app has SEVERAL scroll containers depending on mode (the
+    // window in the classic tool views, `.workspace` in an open bench,
+    // `.view--mission` / `.view--structure2` which set their own overflow).
+    // Rather than guess, we listen on the window in CAPTURE phase — scroll
+    // doesn't bubble, but capture still sees scrolls from any descendant
+    // container — and read the metrics off whatever element actually scrolled.
+    var BUCKETS = [25, 50, 75, 100];
+    var firedBuckets = {};   // bucket -> true, for the CURRENT route
+    var scrollScheduled = false;
+    var lastScrollTarget = null;
+
+    function scrollMetrics(evTarget) {
+        try {
+            var el;
+            if (!evTarget || evTarget === document || evTarget === window ||
+                evTarget === document.documentElement || evTarget === document.body) {
+                el = document.scrollingElement || document.documentElement;
+                return {
+                    st: el.scrollTop,
+                    sh: el.scrollHeight,
+                    ch: el.clientHeight || window.innerHeight
+                };
+            }
+            return { st: evTarget.scrollTop, sh: evTarget.scrollHeight, ch: evTarget.clientHeight };
+        } catch (e) { return null; }
+    }
+
+    function measureScroll() {
+        scrollScheduled = false;
+        try {
+            var m = scrollMetrics(lastScrollTarget);
+            if (!m) return;
+            var scrollable = m.sh - m.ch;
+            if (scrollable <= 4) return;   // nothing meaningful to scroll
+            var pct = ((m.st + m.ch) / m.sh) * 100;
+            if (pct < 0) pct = 0; if (pct > 100) pct = 100;
+            for (var i = 0; i < BUCKETS.length; i++) {
+                var b = BUCKETS[i];
+                if (pct >= b && !firedBuckets[b]) {
+                    firedBuckets[b] = true;
+                    enqueue('scroll_depth', { value_num: b, meta: { bucket: b } });
+                }
+            }
+        } catch (e) { /* ignore */ }
+    }
+
+    window.addEventListener('scroll', function (e) {
+        try {
+            lastScrollTarget = e.target;
+            if (!scrollScheduled) {
+                scrollScheduled = true;
+                if (window.requestAnimationFrame) requestAnimationFrame(measureScroll);
+                else setTimeout(measureScroll, 100);
+            }
+        } catch (err) { /* ignore */ }
+    }, true);
+
+    // ── funnel_step / funnel_exit ─────────────────────────────────────────
+    // The SPA switches views by stamping body[data-route] (showRoute in
+    // app.js). Observing that attribute catches EVERY route change — hashchange
+    // navigations, the bench canvas tabs, and programmatic routeTo() alike —
+    // without having to hook each path. Each change is a funnel step; the
+    // final step on unload is a funnel_exit.
+    var lastRoute = currentRoute();
+
+    function onRouteChange(next) {
+        try {
+            if (next === lastRoute) return;
+            var from = lastRoute;
+            lastRoute = next;
+            firedBuckets = {};              // scroll depth is per-route
+            enqueue('funnel_step', { route: next, meta: { from: from, to: next } });
+        } catch (e) { /* ignore */ }
+    }
+
+    try {
+        var bodyObserver = new MutationObserver(function () {
+            onRouteChange(currentRoute());
+        });
+        bodyObserver.observe(document.body, { attributes: true, attributeFilter: ['data-route'] });
+    } catch (e) {
+        // Fallback for no-MutationObserver: at least catch hash navigations.
+        window.addEventListener('hashchange', function () {
+            setTimeout(function () { onRouteChange(currentRoute()); }, 0);
+        }, false);
+    }
+
+    // ── client_error ──────────────────────────────────────────────────────
+    // Front-end breakage as a signal. We record only the error CLASS, the
+    // script source (basename, to avoid leaking query-string data), and the
+    // line/column — never the free-text message, which can embed values.
+    function sourceBasename(src) {
+        try {
+            if (!src) return null;
+            var s = String(src).split('?')[0].split('#')[0];
+            var parts = s.split('/');
+            return parts[parts.length - 1].slice(0, 80) || null;
+        } catch (e) { return null; }
+    }
+    function errName(err) {
+        try { if (err && err.name) return String(err.name).slice(0, 40); } catch (e) {}
+        return 'Error';
+    }
+
+    window.addEventListener('error', function (e) {
+        try {
+            // Ignore resource-load errors (img/script 404s) — those have no
+            // e.error and a target that isn't the window.
+            if (e && e.target && e.target !== window && e.target.nodeType === 1) return;
+            enqueue('client_error', {
+                meta: {
+                    name:   e && e.error ? errName(e.error) : 'Error',
+                    source: sourceBasename(e && e.filename),
+                    line:   (e && typeof e.lineno === 'number') ? e.lineno : null,
+                    col:    (e && typeof e.colno === 'number') ? e.colno : null
+                }
+            });
+        } catch (err) { /* ignore */ }
+    }, true);
+
+    window.addEventListener('unhandledrejection', function (e) {
+        try {
+            var reason = e && e.reason;
+            enqueue('client_error', {
+                meta: {
+                    name:   (reason && reason.name) ? String(reason.name).slice(0, 40) : 'UnhandledRejection',
+                    source: (reason && reason.fileName) ? sourceBasename(reason.fileName) : null,
+                    line:   (reason && typeof reason.lineNumber === 'number') ? reason.lineNumber : null,
+                    kind:   'promise'
+                }
+            });
+        } catch (err) { /* ignore */ }
+    }, true);
+
+    // ── Flush triggers: tab hide / unload ─────────────────────────────────
+    document.addEventListener('visibilitychange', function () {
+        if (document.visibilityState === 'hidden') flush(true);
+    });
+    window.addEventListener('pagehide', function () {
+        try { enqueue('funnel_exit', { route: currentRoute() }); } catch (e) {}
+        flush(true);
+    });
+})();

dee/static/index.html

@@ -112,7 +112,7 @@
     <!-- ?v= query bumps invalidate browser + iframe asset caches when app.css /
          app.js change. Bump these numbers whenever you ship a frontend update —
          without them, users keep getting the stale file for up to a week. -->
-    <link rel="stylesheet" href="/static/app.css?v=20260727-agentpaint2" />
+    <link rel="stylesheet" href="/static/app.css?v=20260727-unified" />
     <link rel="icon" type="image/svg+xml" href="/static/favicon.svg?v=2" />
     <link rel="apple-touch-icon" href="/static/favicon.svg?v=2" />
     <!-- Mol* (PDBe) 3-D viewer is ~4.9 MB. We do NOT eager-load it on every
@@ -248,7 +248,7 @@
                 -->
                 <div class="nav-loop">
                     <p class="nav-loop-lbl">The loop</p>
-                    <a class="nav-item nav-step" href="#design" title="Directed Evolution">
+                    <a class="nav-item nav-step" href="#design" data-analytics="nav-design" title="Directed Evolution">
                         <span class="nav-icon" aria-hidden="true">
                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
                                 <path d="M7 3c0 4.5 10 6 10 9s-10 4.5-10 9"/>
@@ -259,7 +259,7 @@
                         <span class="nav-step-nm">Directed Evolution</span>
                         <span class="nav-step-ph">Design</span>
                     </a>
-                    <a class="nav-item nav-step" href="#plasmid" title="Plasmid Editor">
+                    <a class="nav-item nav-step" href="#plasmid" data-analytics="nav-plasmid" title="Plasmid Editor">
                         <span class="nav-icon" aria-hidden="true">
                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
                                 <circle cx="12" cy="12" r="8"/>
@@ -269,7 +269,7 @@
                         <span class="nav-step-nm">Plasmid Editor</span>
                         <span class="nav-step-ph">Build</span>
                     </a>
-                    <a class="nav-item nav-step" href="#crispr" title="CRISPR">
+                    <a class="nav-item nav-step" href="#crispr" data-analytics="nav-crispr" title="CRISPR">
                         <span class="nav-icon" aria-hidden="true">
                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
                                 <circle cx="6" cy="6" r="2.6"/>
@@ -280,7 +280,7 @@
                         <span class="nav-step-nm">CRISPR</span>
                         <span class="nav-step-ph">Edit</span>
                     </a>
-                    <a class="nav-item nav-step" href="#primers" title="Primer Analysis">
+                    <a class="nav-item nav-step" href="#primers" data-analytics="nav-primers" title="Primer Analysis">
                         <span class="nav-icon" aria-hidden="true">
                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
                                 <circle cx="10.5" cy="10.5" r="6.5"/>
@@ -356,6 +356,15 @@
                 The account menu opens upward; "Sign out" asks the wrapper to drop the
                 Supabase session, then lands on /signin.
             -->
+            <button class="theme-toggle sidebar-theme" id="themeToggle" type="button" aria-label="Toggle light and dark theme" aria-pressed="false" title="Toggle light / dark">
+                <svg class="theme-icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+                </svg>
+                <svg class="theme-icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="12" cy="12" r="4.5"/>
+                    <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
+                </svg>
+            </button>
             <a class="sidebar-signin" id="sidebarSignin" href="https://turingdna.com/signin/?from=app" target="_top">
                 <span class="acct-avatar acct-avatar--ghost" aria-hidden="true">
                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -417,18 +426,9 @@
                     <h1 class="topbar-title" id="topbarTitle">Plasmid Editor</h1>
                     <span class="topbar-sub" id="topbarSub">Map, annotate &amp; clone your construct</span>
                 </div>
-                <!-- Light / dark theme toggle. State lives on <html data-theme>,
-                     persisted to localStorage by app.js. Sun shows in dark mode,
-                     moon in light mode (CSS-swapped by the data-theme attr). -->
-                <button class="theme-toggle" id="themeToggle" type="button" aria-label="Toggle light and dark theme" aria-pressed="false" title="Toggle light / dark">
-                    <svg class="theme-icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
-                    </svg>
-                    <svg class="theme-icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                        <circle cx="12" cy="12" r="4.5"/>
-                        <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
-                    </svg>
-                </button>
+                <!-- Theme toggle relocated to the sidebar footer, by the account chip
+                     (see #themeToggle in the aside) — it now stays reachable in the bench
+                     view, where this topbar is hidden. -->
             </header>
 
             <!-- =================================================================
@@ -482,19 +482,12 @@
 
             <div class="bench-canvashead" id="benchCanvasHead" hidden>
               <nav class="bench-tabs" id="benchTabs" aria-label="Construct artifacts">
-                <button class="bench-tab" data-route="structure" type="button">Structure</button>
-                <button class="bench-tab" data-route="design"  type="button">Library</button>
-                <button class="bench-tab" data-route="plasmid" type="button">Map</button>
-                <button class="bench-tab" data-route="crispr"  type="button">Guides</button>
-                <button class="bench-tab" data-route="primers" type="button">Primers</button>
+                <button class="bench-tab" data-route="structure" data-analytics="bench-tab-structure" type="button">Structure</button>
+                <button class="bench-tab" data-route="design"  data-analytics="bench-tab-design" type="button">Library</button>
+                <button class="bench-tab" data-route="plasmid" data-analytics="bench-tab-plasmid" type="button">Map</button>
+                <button class="bench-tab" data-route="crispr"  data-analytics="bench-tab-crispr" type="button">Guides</button>
+                <button class="bench-tab" data-route="primers" data-analytics="bench-tab-primers" type="button">Primers</button>
               </nav>
-              <div class="bench-verbs" aria-label="Do more with this construct">
-                <span class="bench-verbs-lbl">Do more &rarr;</span>
-                <button class="bench-verb" data-verb="design"  type="button">Evolve</button>
-                <button class="bench-verb" data-verb="plasmid" type="button">Build plasmid</button>
-                <button class="bench-verb" data-verb="crispr"  type="button">Design guides</button>
-                <button class="bench-verb" data-verb="primers" type="button">Check primers</button>
-              </div>
             </div>
 
             <div class="workspace">
@@ -590,7 +583,10 @@
                       <h2 id="structTitle">Predicted structure</h2>
                       <p class="card-sub" id="structSub">Turing loads the wild-type model as soon as you name a protein.</p>
                     </div>
-                    <a class="ghost" id="structEntryLink" target="_blank" rel="noopener" hidden>Open AlphaFold entry</a>
+                    <div class="struct-head-actions">
+                      <a class="ghost" id="structEntryLink" target="_blank" rel="noopener" hidden>Open AlphaFold entry</a>
+                      <button class="ghost" id="structFullBtn" type="button" aria-pressed="false">Fullscreen</button>
+                    </div>
                   </header>
                   <div class="struct-viewer" id="structViewer">
                     <div class="struct-empty" id="structEmpty">
@@ -641,7 +637,7 @@
                             <h2>Provide a wild-type</h2>
                             <p class="card-sub">FASTA, SnapGene, GenBank, raw DNA, or raw protein. Auto-detected.</p>
                         </div>
-                        <button class="ghost" type="button" id="deExampleBtn"
+                        <button class="ghost" type="button" id="deExampleBtn" data-analytics="de-example"
                                 title="Loads GFP — a classic directed-evolution target">Try an example</button>
                     </header>
 
@@ -742,9 +738,11 @@
 
                 <section class="card" id="settingsCard">
                     <header class="card-header">
-                        <p class="card-kicker">&sect; 2 &middot; Search</p>
-                        <h2>Tune the parameters</h2>
-                        <p class="card-sub">Sensible defaults — change if you know what you're after.</p>
+                        <div class="card-header-left">
+                            <p class="card-kicker">&sect; 2 &middot; Search</p>
+                            <h2>Tune the parameters</h2>
+                            <p class="card-sub">Sensible defaults — change if you know what you're after.</p>
+                        </div>
                     </header>
 
                     <div class="setting-grid">
@@ -790,12 +788,14 @@
 
                 <section class="card run-card" id="runCard">
                     <header class="card-header">
-                        <p class="card-kicker">&sect; 3 &middot; Generate</p>
-                        <h2>Run the engine</h2>
-                        <p class="card-sub">Scoring runs on our GPU. Your individual sequences are never shared, exposed, or reproduced; only anonymous, aggregated signals improve our models. <a href="https://turingdna.com/privacy/" target="_blank" rel="noopener">Privacy</a>.</p>
+                        <div class="card-header-left">
+                            <p class="card-kicker">&sect; 3 &middot; Generate</p>
+                            <h2>Run the engine</h2>
+                            <p class="card-sub">Scoring runs on our GPU. Your individual sequences are never shared, exposed, or reproduced; only anonymous, aggregated signals improve our models. <a href="https://turingdna.com/privacy/" target="_blank" rel="noopener">Privacy</a>.</p>
+                        </div>
                     </header>
 
-                    <button id="runBtn" type="button" class="primary primary-lg" disabled>
+                    <button id="runBtn" type="button" class="primary primary-lg" data-analytics="de-run" disabled>
                         <span class="primary-icon" aria-hidden="true">
                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                 <polygon points="6 3 20 12 6 21 6 3" fill="currentColor"/>
@@ -854,13 +854,13 @@
                                     <span class="caret">▾</span>
                                 </button>
                                 <div class="download-menu-items" id="downloadMenuItems" hidden>
-                                    <a class="download-item" data-format="csv">CSV</a>
-                                    <a class="download-item" data-format="xlsx">Excel</a>
-                                    <a class="download-item" data-format="fasta">FASTA &middot; protein</a>
-                                    <a class="download-item" data-format="fasta-dna">FASTA &middot; DNA</a>
-                                    <a class="download-item" data-format="gb">GenBank</a>
-                                    <a class="download-item" data-format="json">JSON</a>
-                                    <a class="download-item" data-format="tsv">TSV</a>
+                                    <a class="download-item" data-format="csv" data-analytics="export-csv">CSV</a>
+                                    <a class="download-item" data-format="xlsx" data-analytics="export-xlsx">Excel</a>
+                                    <a class="download-item" data-format="fasta" data-analytics="export-fasta">FASTA &middot; protein</a>
+                                    <a class="download-item" data-format="fasta-dna" data-analytics="export-fasta-dna">FASTA &middot; DNA</a>
+                                    <a class="download-item" data-format="gb" data-analytics="export-gb">GenBank</a>
+                                    <a class="download-item" data-format="json" data-analytics="export-json">JSON</a>
+                                    <a class="download-item" data-format="tsv" data-analytics="export-tsv">TSV</a>
                                 </div>
                             </div>
                         </div>
@@ -1833,6 +1833,7 @@
                           <label class="design-opt">Overlap (bp)<input type="number" id="coOverlap" min="0" max="120" value="25" /></label>
                           <label class="design-opt">Result
                               <select id="coResult" class="design-opt-select">
+                                  <option value="" selected>Select outcome…</option>
                                   <option value="1">Assembled</option>
                                   <option value="0.5">Partial</option>
                                   <option value="0">Failed</option>
@@ -2355,13 +2356,19 @@
     <!-- Cloning reference data must load before app.js so the Designer
          can read VECTORS / ENZYMES / CLONING_METHODS / TAGS / LINKERS. -->
     <script src="/static/cloning_db.js?v=20260530-ui-polish" defer></script>
-    <script src="/static/app.js?v=20260727-agentpaint2" defer></script>
+    <script src="/static/app.js?v=20260727-unified" defer></script>
     <!-- THE COCKPIT — the persistent orchestrator rail. Loads after app.js so
          TDBench/TDStructure exist when a tool result asks the workspace to
          render something. This is the only conversation surface in the app. -->
-    <script src="/static/cockpit.js?v=20260727-agentpaint2" defer></script>
+    <script src="/static/cockpit.js?v=20260727-unified" defer></script>
     <!-- Dwell-time heartbeat. Loads after auth.js so its /api/ping calls go
          through the JWT-attaching fetch wrapper (signed-in attribution). -->
     <script src="/static/telemetry.js?v=20260622-analytics" defer></script>
+    <!-- First-party UX-behaviour collector (dead/rage clicks, scroll depth,
+         funnel steps, feature clicks, client errors). Structure-only, never
+         reads sequence content; shares telemetry.js's persisted td_session_id
+         and POSTs batches to /api/collect via sendBeacon. First-party /static
+         file so it satisfies the strict script-src CSP. -->
+    <script src="/static/collector.js?v=20260727-unified" defer></script>
 </body>
 </html>

dee/static/telemetry.js

@@ -35,7 +35,22 @@
         });
     }
 
-    var sessionId = uuid();
+    // ONE persisted session id, shared with collector.js via localStorage
+    // (key 'td_session_id') using identical logic in both files — whichever
+    // script runs first mints it, the other reads it. This is what joins the
+    // collector's client_events to THIS session's app_sessions row (which
+    // carries the user_id captured by the authenticated beats below). Falls
+    // back to a per-load in-memory id if localStorage is unavailable.
+    function persistedSessionId() {
+        try {
+            var k = 'td_session_id';
+            var v = localStorage.getItem(k);
+            if (!v) { v = uuid(); localStorage.setItem(k, v); }
+            return v;
+        } catch (e) { return uuid(); }
+    }
+
+    var sessionId = persistedSessionId();
     var visibleMs = 0;  // accumulated foreground time from FINISHED segments
     var segStart  = (document.visibilityState === 'visible') ? Date.now() : 0;
 

supabase/migrations/0017_client_events.sql

@@ -0,0 +1,106 @@
+-- 0017_client_events.sql
+-- First-party UX-behaviour telemetry: client_events.
+--
+-- Why: 0011_analytics.sql captures engagement (events) and dwell (app_sessions),
+-- but nothing about HOW the UI is actually used — where clicks fall dead, where
+-- users rage-click, how far a view is read, how they move between tools, and
+-- what breaks in the browser. This table stores those client-side signals so
+-- friction and funnels become queryable. Written by the Flask backend via the
+-- service role (auth.log_client_events_async), fed by collector.js → /api/collect.
+--
+-- Privacy: mirrors public.events / public.runs — NO sequence content and NO
+-- free-text values. The client sends only element STRUCTURE (an id, a
+-- data-analytics label, or a tag[role]:nth-of-type path) in `selector`, bounded
+-- numeric/label `meta`, and an opaque session id. Identity is NOT sent by the
+-- client: the server stamps user_id (if signed in) or a salted /24-IP+UA
+-- `anon_fingerprint` (never a raw IP). session_id joins public.app_sessions.
+-- Retention is bounded by prune_old_client_events() (companion to 0011's
+-- prune_old_analytics and 0010's prune_old_runs).
+--
+-- Run once in the Supabase SQL editor. Re-runnable: table/function use
+-- IF NOT EXISTS / OR REPLACE, and policies are dropped before (re)create.
+
+create extension if not exists "pgcrypto";
+
+-- ═══════════════════════════════════════════════════════════════════════
+-- CLIENT_EVENTS — one row per client-side UX signal
+-- ───────────────────────────────────────────────────────────────────────
+-- kind ∈ {dead_click, rage_click, scroll_depth, funnel_step, funnel_exit,
+--         feature_click, client_error}  (whitelisted server-side).
+-- selector = SAFE structural descriptor only (never content). value_num carries
+-- a scalar where it makes sense (scroll bucket 25/50/75/100, rage click count).
+-- meta is a small bag of bounded primitives (coords, from/to route, error class).
+create table if not exists public.client_events (
+    id                uuid primary key default gen_random_uuid(),
+    session_id        text,
+    user_id           uuid references auth.users(id) on delete cascade,
+    anon_fingerprint  text,
+    kind              text not null,
+    route             text,
+    selector          text,          -- element STRUCTURE only, never content
+    value_num         numeric,
+    meta              jsonb not null default '{}'::jsonb,
+    client_ts         timestamptz,
+    created_at        timestamptz not null default now()
+);
+
+comment on table public.client_events is
+    'First-party UX-behaviour signals (dead/rage clicks, scroll depth, funnel '
+    'steps, feature clicks, client errors). Structure-only — no sequence '
+    'content, no free-text values. session_id joins public.app_sessions.';
+comment on column public.client_events.selector is
+    'Safe structural descriptor (id / data-analytics label / tag[role]:nth-of-type). '
+    'Never element value or textContent.';
+
+create index if not exists client_events_kind_idx    on public.client_events(kind, created_at desc);
+create index if not exists client_events_session_idx on public.client_events(session_id);
+create index if not exists client_events_route_idx   on public.client_events(route, kind);
+
+
+-- ═══════════════════════════════════════════════════════════════════════
+-- ROW-LEVEL SECURITY — deny by default; a user may read their OWN rows;
+-- writes go through the service role. We ALSO add an explicit service-role
+-- insert policy (belt-and-suspenders — service_role already bypasses RLS).
+-- ═══════════════════════════════════════════════════════════════════════
+alter table public.client_events enable row level security;
+
+drop policy if exists "client_events_select_own"     on public.client_events;
+drop policy if exists "client_events_insert_service"  on public.client_events;
+
+create policy "client_events_select_own"
+    on public.client_events for select using (auth.uid() = user_id);
+create policy "client_events_insert_service"
+    on public.client_events for insert to service_role with check (true);
+
+
+-- ═══════════════════════════════════════════════════════════════════════
+-- RETENTION SWEEP — companion to 0011's prune_old_analytics. Free tier has no
+-- pg_cron, so this is a callable maintenance routine; safe to run repeatedly
+-- and only ever deletes OLD rows.
+--
+-- Usage (run anytime in the SQL editor):
+--     select public.prune_old_client_events(90);   -- delete rows older than 90 days
+-- ═══════════════════════════════════════════════════════════════════════
+create or replace function public.prune_old_client_events(retain_days integer default 90)
+returns integer
+language plpgsql
+security definer
+set search_path = public
+as $$
+declare
+    deleted integer;
+begin
+    delete from public.client_events
+        where created_at < now() - make_interval(days => greatest(retain_days, 1));
+    get diagnostics deleted = row_count;
+    return deleted;
+end;
+$$;
+
+revoke all on function public.prune_old_client_events(integer) from public;
+revoke all on function public.prune_old_client_events(integer) from anon;
+revoke all on function public.prune_old_client_events(integer) from authenticated;
+
+comment on function public.prune_old_client_events(integer) is
+    'Maintenance: delete public.client_events rows older than retain_days '
+    '(default 90). Run manually or via pg_cron. Added in 0017_client_events.sql.';