# Case Browse — UI/UX Redesign Options

**Page:** `/admin/fraud/cases/browse/:session_id` (`CaseBrowseLive`)
**Status:** Proposal — no code changes yet
**Date:** 2026-07-05

---

## 1. Current-State Audit

The page is a faithful Jube "Skim" parity build: top nav strip → macro bar → dense
header field row → primary tabs (split left/right panel) → fixed-height bottom
dock with 7 journal tabs. Functionally complete, but several UX issues stand out.

### 1.1 Header strip (biggest problem area)

| # | Issue | Evidence |
|---|-------|----------|
| H1 | **13 unrelated controls in one flat wrapping row** — identity fields, status controls, lock controls, diary controls, and rating all have equal visual weight. Nothing tells the analyst "these three belong together." | `case_browse_live.html.heex:58-241` |
| H2 | **Read-only values styled as inputs.** Case ID / Case Key / Case Key Value / Old Closed Status / Diary User render as bordered text inputs. They look editable, invite clicks, and waste the strongest visual affordance (a border box) on static data. | lines 64, 71, 78, 113, 210 |
| H3 | **Confusing naming: "Closed Status" vs "Status".** "Closed Status" is actually the *case lifecycle status* (Open / Under Review / … / Closed) and "Status" is the *workflow status*. Jube's naming, but new analysts consistently misread it. | lines 84, 174 |
| H4 | **Case Key truncates.** `w-28` clips `CASE-2026-DC81AF` to `CASE-2026-DC81AI…` (visible in screenshot). The primary identifier of the record cannot be read or copied comfortably. | line 72 |
| H5 | **Silent auto-save.** Every dropdown/toggle/date persists immediately with no success feedback. Errors get a banner (good), but success is indistinguishable from "nothing happened" — this already caused the "my change didn't save" confusion documented in `case_browse_live.ex:124-129`. | all `phx-change` forms |
| H6 | **Toggle + On/Off caption below** creates a 3-line-tall element among 2-line-tall neighbors; the row baseline jitters (`items-end` + wrap). | lines 137-152, 190-205 |
| H7 | **Rate stars orphaned.** On wide screens they sit at the row's end; when the row wraps (as in the screenshot) they drop to a lonely second line. Purpose (analyst feedback for model tuning) is not communicated at all. | lines 229-239 |

### 1.2 Navigation & orientation

| # | Issue |
|---|-------|
| N1 | **No keyboard navigation.** This is a *skim* workflow — the whole point is rapid case-after-case triage — yet Back/Next require mouse clicks. |
| N2 | **"1 / 9" counter is low-signal.** Tiny gray text; no sense of progress, no jump-to, no indication of which search produced these 9 cases. |
| N3 | **"Fetching" in red** reads as an error, not a loading state. |
| N4 | **"← Search" placement** at far right, styled as a link, competes with the counter. Back/Next on the left, exit on the right — the eye has to travel the full width to understand navigation. |
| N5 | **The header status color band** (Jube parity: header takes workflow-status colors) is good, but nothing labels *why* the header is that color. |

### 1.3 Content zones

| # | Issue |
|---|-------|
| C1 | **Left panel is ~wasted space.** In Detail Views it shows exactly one clickable item (the case key value) in a 192px column + a 4px divider. In Visualisation it's empty. Only Forms uses it meaningfully. |
| C2 | **Bottom dock is fixed at 240px** and not resizable. The Case Key Journal (AG Grid, the analyst's main evidence view) gets ~170px of usable rows while "Case Detail Views" above may be half empty. |
| C3 | **7 bottom tabs with `overflow-x-auto`** — on smaller widths tabs silently scroll out of view with no affordance. |
| C4 | **Empty states are bare italic text** ("No activations to display.") with no explanation of *why* (e.g., decline-opened cases have no key journal — the code knows this and only the key-journal tab explains it). |
| C5 | **Details tab is a flat 16-row label:value dump** — identity, lifecycle, lock state, and audit timestamps all interleaved, followed by payload. No grouping, no copy-to-clipboard, no visual distinction of the "Why This Case Was Opened" block (which is arguably the most important content on the page). |
| C6 | **Status values render raw** (`open`, `under_review`) in Detail Views while a `status_badge/1` helper already exists and is unused there. |

### 1.4 Accessibility / consistency

- Everything is `text-xs` (~12px) including primary data; gray-on-gray labels (`text-gray-500` on `bg-gray-50`) run near the 4.5:1 contrast floor.
- Toggles and star buttons have no `aria-label` / `aria-pressed`; toggles are `<button>`s that read as unnamed buttons to screen readers.
- Focus styles are explicitly removed (`focus:outline-none`) in several places without a replacement ring.
- Native `<select>`/`<input>` mixed with custom toggles — three different control heights in one row.

---

## 2. Design Options

Three options, in increasing order of departure from the current Jube-parity
layout. All three keep every existing capability and LiveView event; they differ
only in structure and presentation.

---

### Option A — "Polish in place" (conservative, ~1–2 days)

Keep the exact Jube zone structure (top strip / header row / split panel /
bottom dock). Fix grouping, hierarchy, and feedback without moving anything.

```
┌──────────────────────────────────────────────────────────────────────────┐
│ [← Search]  [◀ Back] [Next ▶]   ⣿⣿⣿⣿⣿░░░░ Case 1 of 9      ⟳ Loading…  │
├──────────────────────────────────────────────────────────────────────────┤
│ ● ● ●  Macros                                                            │
├──────────────────────────────────────────────────────────────────────────┤
│ CASE-2026-DC81AF  #40 · 987654321        │ Closed Status [Open ▾]        │
│ (plain text, copy icon, full width)      │ Old: —   Closed User [— ▾]    │
│                                          ├───────────────────────────────┤
│ ┌ Lock ────────────┐ ┌ Diary ─────────┐  │ Workflow Status [testOpen ▾]  │
│ │ [⏻ On] user_1    │ │ [⏻ Off] — date │  │ Rate ★★★☆☆                    │
│ └──────────────────┘ └────────────────┘  │                               │
├──────────────────────────────────────────────────────────────────────────┤
│  ... rest identical ...                                                  │
└──────────────────────────────────────────────────────────────────────────┘
```

Changes:

1. **Group the header into 4 labeled clusters:** *Identity* (plain text, not
   inputs — with a copy-to-clipboard icon on Case Key), *Resolution* (Closed
   Status + Old Closed Status + Closed User), *Assignment* (Locked + Locked
   User, Diary + Diary User + Diary Date), *Workflow* (Status + Rate). Thin
   vertical separators between clusters; each cluster gets one small
   caps-label instead of 13 individual labels.
2. **Read-only data becomes text**, not boxed inputs (fixes H2, H4 — full case
   ref visible).
3. **Save feedback:** a transient "✓ Saved" pulse next to the changed control
   (LiveView already round-trips, so this is a small assign + CSS animation).
   Keep the error banner.
4. **Rename labels:** "Closed Status" → "Case Status", "Status" → "Workflow
   Status" (display only — events/fields unchanged; note this diverges from
   Jube's on-screen wording only).
5. **Nav strip:** move ← Search to the far left (it's "up" in the hierarchy),
   Back/Next as a joined segmented control, progress bar + "Case n of N",
   neutral spinner instead of red "Fetching". Add `phx-window-keyup` for
   ←/→ = Back/Next (skip when focus is in an input).
6. **Detail Views grouping:** three collapsible sections — *Summary*,
   *Why This Case Was Opened* (promoted, amber/left-border callout),
   *Transaction Details / Payload*. Use `status_badge/1` for status values.
7. **Empty states with reasons** and consistent styling (icon + one sentence +
   the "why" where the code knows it).
8. Accessibility pass: aria-labels on toggles/stars, visible focus rings,
   bump body data from 11px to 12px, labels to `gray-600`.

**Pros:** Zero re-learning for anyone trained on Jube; smallest diff; all
changes are template-level (a handful of new assigns for save-feedback).
**Cons:** The structural problems (wasted left panel, fixed bottom dock,
one-row header cramming) remain.

---

### Option B — "Command bar + resizable dock" (moderate, ~3–5 days) ⭐ recommended

Keep the vertical zone order but restructure *within* zones: a two-tier header
(identity line + action line), collapse the left panel into the content area,
and make the bottom dock resizable.

```
┌──────────────────────────────────────────────────────────────────────────┐
│ ← Search   ◀ ▶   ▓▓▓▓░░░░░ 1 / 9                    ● ● ●  Macros        │  tier 0: nav + macros merged
├──────────────────────────────────────────────────────────────────────────┤
│ CASE-2026-DC81AF ⧉   #40 · Key 987654321 ⧉    [OPEN] [testOpen] 🔒user_1 │  tier 1: identity + state
│                                              opened 07/04 05:50 PM  ★★★☆☆│  (plain text + badges)
├──────────────────────────────────────────────────────────────────────────┤
│ Case Status [Open ▾]  Closed User [— ▾]  │ Lock [⏻] [user ▾] │ Diary [⏻] │  tier 2: actions toolbar
│ Workflow [testOpen ▾]                     │                   │ [date 📅] │  (only editable things)
├──────────────────────────────────────────────────────────────────────────┤
│ Case Detail Views │ Case Visualisation │ Case Forms                      │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │  (full-width content — left panel only appears on Forms tab,        │ │
│ │   Detail Views shows Summary / Why Opened / Payload sections)       │ │
│ └──────────────────────────────────────────────────────────────────────┘ │
├════════════ drag to resize ══════════════════════════════════════════════┤
│ Activations │ Key Journal │ Journal │ Notes ③ │ Events │ Forms │ Uploads ②│
│ Top [100] Elevation [0.00] Activations only [⏻]   [Refresh] [Drill]      │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │  AG Grid / tables                                                    │ │
│ └──────────────────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────────────┘
```

Everything in Option A, plus:

1. **Two-tier header.** Tier 1 is *read-only identity and state at a glance*:
   case ref + id + key value as copyable text, status badge, workflow-status
   badge (carrying the workflow colors that today tint the whole row — the
   badge is the color carrier, so the header itself can stay neutral and
   legible), lock indicator with holder, opened-at, rating. Tier 2 is *only
   the editable controls*, in three separator-divided groups: Resolution /
   Lock / Diary. Splitting "what is" from "what you can change" resolves
   H1/H2/H5 at the root.
2. **Left panel becomes contextual.** Detail Views and Visualisation render
   full-width (fixes C1); the panel slides in only for Case Forms where the
   form list actually needs it. Case Keys move into the Detail Views summary
   section (it was one item).
3. **Resizable bottom dock:** a drag handle (small JS hook, ~30 lines, persist
   height to localStorage) plus a maximize/restore button on the dock — the
   key-journal AG Grid is where investigations actually happen and it deserves
   more than 170px (fixes C2).
4. **Tab badges:** counts on Notes / Uploads / Forms Journal tabs
   (`Notes ③`) so analysts see at a glance whether evidence exists without
   clicking through 7 tabs.
5. **Sticky drill context:** the amber "Drilled on …" bar gains an ✕ to clear
   the drill (today the only way back is Refresh, which is undiscoverable).

**Pros:** Fixes every audit item; layout still recognizably Jube (zones in the
same order, same tab names) so parity-trained analysts keep their mental model;
resizable dock is the single biggest day-to-day quality-of-life win.
**Cons:** Header restructure touches most of the template; drag-resize needs a
new JS hook; the moved Case Keys / hidden left panel is a small parity
deviation worth flagging to stakeholders.

---

### Option C — "Investigator workspace" (ambitious, ~2 weeks)

Abandon the Jube layout in favor of a modern case-investigation IDE: persistent
right rail for case state + actions, main area maximized for evidence, journals
as full-height switchable views instead of a cramped dock.

```
┌──────────────────────────────────────────────────────────────────────────┐
│ ← Search    ◀ ▶  1/9 ▓▓░░░   CASE-2026-DC81AF   [OPEN]        ● ● ● Macros│
├───────────────────────────────────────────────────────┬──────────────────┤
│  Evidence area (75%)                                  │  Case rail (25%) │
│ ┌ Details ┬ Key Journal ┬ Activations ┬ Journals ▾ ┬─┐│ ┌──────────────┐ │
│ │                                                    ││ │ WHY OPENED   │ │
│ │   Selected view gets FULL height —                 ││ │ rule text…   │ │
│ │   AG Grid finally has room to breathe.             ││ ├──────────────┤ │
│ │                                                    ││ │ STATE        │ │
│ │   "Journals ▾" collapses the four low-traffic      ││ │ Status  [▾]  │ │
│ │   journals (Case/Events/Forms/Uploads) into one    ││ │ Workflow[▾]  │ │
│ │   dropdown tab.                                    ││ │ Lock ⏻ user  │ │
│ │                                                    ││ │ Diary ⏻ date │ │
│ │                                                    ││ │ Rate ★★★☆☆   │ │
│ │                                                    ││ ├──────────────┤ │
│ │                                                    ││ │ NOTES (3)    │ │
│ │                                                    ││ │ + quick note │ │
│ └────────────────────────────────────────────────────┘│ └──────────────┘ │
└───────────────────────────────────────────────────────┴──────────────────┘
```

Key ideas beyond A/B:

1. **Right rail = the case's control panel.** "Why opened" callout pinned at
   top (always visible while scanning evidence — the #1 context an analyst
   needs), then state controls, then quick-notes. Notes move out of the bottom
   tabs entirely: analysts write notes *while* looking at evidence, so the two
   must be visible simultaneously.
2. **One tab strip, full-height views.** Top tabs and bottom tabs merge;
   the four low-traffic journals collapse into a "Journals ▾" split-tab.
   The activations filter bar (Top / Elevation / Only) appears inside the
   views that use it.
3. **Skim ergonomics:** `←`/`→` case navigation, `j`/`k` row navigation in
   grids, `n` focus-note, visible shortcut hints; optional "auto-advance on
   close" (closing a case jumps to the next one — the actual skim loop).

**Pros:** Best possible ergonomics for high-volume triage; notes-beside-evidence
and full-height grids are genuinely better than anything Jube offers.
**Cons:** Breaks Jube parity outright (this page exists *because* of parity —
see project scope); largest effort; needs stakeholder sign-off and probably a
feature-flag/em-toggle so trained analysts can keep the classic layout during
transition.

---

## 3. Cross-cutting quick wins (do these regardless of option)

| # | Win | Effort |
|---|-----|--------|
| Q1 | ←/→ keyboard Back/Next (`phx-window-keyup`, skip when typing) | ~30 min |
| Q2 | "✓ Saved" pulse on successful auto-save | ~1 h |
| Q3 | Copy-to-clipboard on Case Ref / Case Key Value | ~30 min |
| Q4 | Neutral spinner replaces red "Fetching" | 5 min |
| Q5 | `status_badge/1` used in Detail Views; Title Case status labels | 15 min |
| Q6 | Empty states explain *why* (esp. Activations & Key Journal for decline-opened cases) | ~1 h |
| Q7 | aria-labels + `aria-pressed` on toggles/stars, restore focus rings | ~1 h |
| Q8 | Tab count badges (Notes / Uploads / Forms Journal) | ~1 h |
| Q9 | ✕ to clear the drill selection from the amber banner | ~30 min |

---

## 4. Recommendation

**Option B + the quick wins.** It fixes every issue in the audit, keeps the
Jube mental model intact (this project's stated scope is Jube parity), and its
one real structural addition — the resizable bottom dock — directly serves the
page's core activity: reading the Case Key Journal grid. Option A is the
fallback if header restructuring is deemed too much churn right now; Option C
is worth revisiting after parity sign-off, ideally behind a layout toggle.

Suggested sequencing for Option B:

1. Quick wins Q1–Q9 (independently shippable, immediate value)
2. Two-tier header restructure (template-only)
3. Contextual left panel + Detail Views sections
4. Resizable dock JS hook + tab badges

---

## 5. Open questions for stakeholders

1. Is on-screen relabeling of "Closed Status" → "Case Status" acceptable, or is
   verbatim Jube wording a hard parity requirement?
2. Should the workflow-status color continue to tint the whole header row
   (Jube behavior) or move to a badge (Option B proposal)?
3. Is "auto-advance to next case on close" desirable, or do analysts want to
   review the closed state before moving on?
4. Are there users on <1440px screens? That decides how aggressively the
   header must be allowed to wrap.