lakehouse/mcp-server/UX_FIX_PLAN.md

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.