ui: staffing co-pilot UX fixes — new-tab reference nav + discoverable collapsibles

Reconciles month-old working-tree UX work (served per-request, live on the demo since
2026-05-30) into git. Implements UX_FIX_PLAN.md's 5 user complaints: reference pages
(Profiler/Architecture/Spec/Onboard/Alerts/Workspaces) open in new tabs; contract-card
collapsible shows a persistent chevron + expand/collapse label in both states; proof.html
gains a substrate-signals chapter. Not authored this session — captured as-is (working
state verified: pages serve 200).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

mcp-server/UX_FIX_PLAN.md

@@ -0,0 +1,94 @@
+# Staffing Co-Pilot UX Fix Plan (devop.live/lakehouse)
+
+**Target file:** `/home/profit/lakehouse/mcp-server/search.html` (239KB, ~4100 lines) — THIS is the
+main dashboard served at `/` (route at `index.ts:1258`; name "search.html" is historical).
+Sibling pages: `console.html` (Walkthrough), `proof.html` (Architecture), `spec.html`, `onboard.html`,
+`profiler.html`, `contractor.html`, `workspaces.html`, `alerts.html`.
+
+**Serving:** Bun `mcp-server/index.ts` on `:3700`, nginx `/lakehouse/` → `127.0.0.1:3700`.
+Restart after edits: HTML is read per-request (`Bun.file`), so **no restart needed for .html edits** —
+just reload the browser. (Restart only if editing index.ts: it's pid 1254, `bun run mcp-server/index.ts`.)
+
+**Constraints:** neo-brutalist, compact, distinct colors, NO fake timers. Surgical edits only.
+Dashboard fires real SQL + /intelligence/* — don't break data wiring. Repo is FROZEN Rust legacy;
+J explicitly authorized work on this surface.
+
+**Base path quirk:** nav uses `var P = location.pathname.indexOf('/lakehouse')>=0?'/lakehouse':''`.
+Relative hrefs (`href="console"`) resolve fine under `/lakehouse/`.
+
+## User's 5 complaints → fixes (line numbers in search.html)
+
+### 1+2. New tabs for reference pages (HIGH)
+- **Top nav lines 594-599**: add `target="_blank" rel="noopener"` to Profiler, Architecture(proof),
+  Spec, Onboard, Alerts, Workspaces. LEAVE 592-593 (Dashboard `href="."`, Walkthrough `href="console"`) same-tab.
+- **Footer line 781**: `<a href="proof">Architecture</a>` → add `target="_blank" rel="noopener"`. Keep Console same-tab.
+- **Dynamic footer lines 1024-1026**: proof link needs `target=_blank rel=noopener` + `.ft` class styling (currently unstyled).
+
+### 3. Collapsible "preview" not discoverable (HIGH)
+Primary = **contract card expandable panel** (markup ~2620-2820, CSS grid-template-rows ~160-220).
+Chevron rotates 180° but hint text "click for full curve…" only shows collapsed; vanishes on expand.
+Fix: chevron always visible+larger(16px); persistent "Expand details"/"Collapse" label in BOTH states;
+cursor:pointer on card header; hover border-left/bg shift; optional localStorage per-card.
+Secondary collapsibles: ⓪ legacy-bridge narrative (~820-900) → default COLLAPSED for returning users
+(localStorage 'seen_intro'); ② Staffer's Console preview (~1400-1500) → make collapsible, "Open full console →".
+
+### 4. Clickable elements don't look clickable (HIGH)
+Add global CSS: `[onclick]{cursor:pointer}` + reusable `.clickable` class with :hover (bg lift #161b22→#1c2333
++ border accent), :active (translateY(1px)), :focus-visible (outline).
+Apply to: insight cards (~1180-1280), alert rows (~1700-1780), worker result rows (~990-1030 — add hover '›' chevron
+for drilldown discoverability per feedback_test_drilldowns), collapsible section headers (~820-830, ~1400-1410),
+action chips/buttons (~740-760, standardize .btn/.chip).
+
+### 5. Layout clutter / flat hierarchy (HIGH)
+8 sections at equal weight: ⓪ Not-a-CRM narrative, ① Live Market, Forecast, ② Staffer Console,
+Market Intelligence, ③ Worker Search, ④ System Activity, ⑤ Substrate Signals.
+3-tier fix: PRIMARY always-visible (Live Market, Worker Search, Staffer Console);
+SECONDARY collapsible-open (Forecast, Market Intelligence); TERTIARY collapse-by-default or relocate
+(⓪ narrative → collapsible banner; ⑤ Substrate Signals → move to proof.html/Architecture; ④ System Activity demote).
+Also: Live Market vs Market Intelligence may overlap — differentiate headers or merge w/ sub-tabs.
+Long card walls → add "show top 5 / show all" truncation.
+
+### Cross-page nav consistency (MEDIUM)
+Each of 8 pages has hardcoded nav with differing link sets/order/labels and unreliable .active.
+Canonical set + order, each page sets .active on its own entry, brand/logo → `href="."`.
+Long-term: extract nav to shared JS snippet served by index.ts to stop drift.
+
+## ✅ SHIPPED 2026-05-30 (live-verified via curl against :3700; HTML served per-request → no restart)
+- **#1+#2 New tabs** — search.html: 6 nav reference links (Profiler/Architecture/Spec/Onboard/Alerts/Workspaces)
+  + footer Architecture + dynamic-footer Architecture now `target="_blank" rel="noopener"` with ↗ glyph.
+  Dashboard + Walkthrough stay same-tab (primary flow). VERIFIED: 7 static new-tab links served; nav listing clean.
+- **#4 Clickability** — global affordance CSS inserted after `.ft a:hover{...}` (NOT `.ft a{margin}` — that anchor
+  was a hallucination): `[onclick]{cursor:pointer}`, `[role=button]`, `.iworker` cursor+hover-lift+active,
+  `details>summary` cursor+hover, global `:focus-visible`. VERIFIED served (affordance_css=1, iworker_cursor=1, summary_hover=1).
+- **#3 partial** — every `<details>` collapsible now has visible hover affordance (cursor+bg). Contract-card toggle NOT yet (below).
+- **Nav consistency** — added Profiler link to onboard/workspaces/alerts (verified profiler=1 each);
+  fixed contractor.html back-link `href="/"`→`href="."` (real bug: `/` = LLM-Team UI on :5000, ejected users out of lakehouse; verified root-bug=0, dot-fixed=1);
+  fixed profiler.html empty `href=""`→relative `.`/`console` (was JS-only/fragile; verified empty-href=0).
+
+> CORRECTION LOG: first edit pass (earlier this session) FAILED silently — old_strings were guessed
+> (`.ft a{margin:0 4px}`, a fake footer string, `ui-copilot/dashboard.html` path). Re-done with grep/Read-verified
+> exact strings. The real dashboard file is `search.html` (route index.ts:1258), NOT `dashboard.html` (orphan) or `ui/`.
+
+## (status note) — rounds 2 & 3 are recorded in the SHIPPED sections below; this block is superseded.
+- #3 contract-card collapse → DONE round 2 (persistent `.card-top-toggle`).
+- #5 declutter (⑤ relocate, ④ demote, ③ disclosure, Market Intelligence clarify, dead CSS) → DONE round 3.
+- Still open: nav shared-component refactor (deferred, needs restart) + optional contract truncation (skipped on purpose). See "DELIBERATELY NOT DONE".
+
+## Recommended execution order
+1. New-tab attrs (lines 594-599, 781, 1024-1026) — trivial, high impact.
+2. Global `.clickable` CSS helper + apply to onclick elements.
+3. Collapsible affordance (chevron+label persistent, cursor, hover) on contract cards + section headers.
+4. Default-collapse ⓪ narrative for returning users (localStorage).
+5. Hierarchy/declutter (tiering, relocate ⑤ to proof, truncation).
+6. Nav consistency pass across sibling files.
+
+## VERIFY before claiming done (J's rules: test drilldowns, no greenwashing)
+- `curl -s localhost:3700/ | grep target=_blank` confirms new-tab attrs present.
+- Load https://devop.live/lakehouse/ in browser: click a contract card (expand+collapse visible),
+  hover a worker row (cursor+chevron), click reference nav (opens new tab), reload (intro stays collapsed).
+- Don't restart the service for HTML-only edits.
+
+## Audit provenance
+5-dimension parallel Explore audit, run wf_c897f421-db1, full JSON at
+`/tmp/claude-0/-home-profit/c6ca0218-678c-4a30-833c-1063e40e7f69/tasks/wm9x4y52d.output`.
+NOTE: line numbers are audit estimates — `grep` to confirm exact lines before each Edit.