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.