Skip to content

Right-Rail Sidebar Redesign (Expert Mode)

Status: Proposal (April 2026) — Phases A + B implementing on branch rightsidebar-redesign-claude Reviewer role assumed: Product designer + frontend architect who shipped the home, DraftLint, and left-sidebar redesigns on this branch, looking at the right rail through the lens of CoLab's AutoReview pattern. Purpose: Unify the five right-rail "analysis tool" panels (Vision, DraftLint, CNC, DFM, Fusion) under a shared shell — consistent chrome, one CTA style, one severity palette, one run-state model, one findings-row affordance. Related: - Home Redesign, DraftLint Redesign, Left Sidebar Redesign — shared tokens and patterns. - Code Review — PDF Report Template (G) — severity palette and rule-ID contract. - Code Review — Product Trust Gaps (F) — findings contract, activity log, advisory vs hard.

How The Right Rail Differs From The Left Rail

  • Left rail = feedback inbox (issues, reviews, lessons, requirements).
  • Right rail = tool-and-result console (configure → run → read findings → export).

Different mental model, different chrome. From the CoLab PRD, the closest match is AutoReview (AI Peer Checker): configure, run, findings with citations, accept/reject per finding, export. CoLab's AutoReview screens show a tight vertical stack with no tabs inside the panel.

Current State

Tab File LOC Notes
vision VisionAnalysisSidebar.tsx 895 Screenshot/view-set AI vision review; provider config, sensitivity/confidence criteria
draftlint DraftLintSidebar.tsx 509 Drawing scan against standards profiles (partly modernised in DraftLint Phase A/B)
cnc CncAnalysisSidebar.tsx 494 CNC geometry analysis with thresholds + filter criteria
dfm DfmSidebar.tsx 3,382 Full rule-driven DFM review + PDF export
fusion FusionAnalysisSidebar.tsx 520 Fusion analysis (rule + vision blend)
rep ReportTemplateBuilderSidebar.tsx 445 Report template builder — not in current rail order

Diagnosis

  1. Saturated orange CTAs on every panel except DraftLint (fixed in its Phase A) — clashes with the calm palette.
  2. No shared header pattern. Each sidebar has its own heading, close button, context strip.
  3. No stage tracker. Users don't know where they are (configure vs running vs review).
  4. Severity tokens diverge per panel.
  5. Findings lists inconsistent in density, metadata, hover affordance.
  6. Export buttons inconsistent — four different UIs for the same concept.
  7. DFM sidebar is a 3,382-line monolith (code-review D2/D3).
  8. No shared run-state model.
  9. Inconsistent findings contract — rule_id / standard clause / observed / target / confidence aren't uniformly surfaced.

Design Principles

  1. One run, one panel — configure → run → review, all in one vertical flow; no tabs inside.
  2. State is visible — stage tracker at top.
  3. Configuration is dense — more controls per screen; chip groups and compact selects.
  4. Findings list matches the left-sidebar pattern — reuse SeverityDot, TypeChip, Avatar atoms.
  5. Run state is non-modal — progress strip; partial results browsable.
  6. Export is one button, one menu.
  7. Calm palette + PDF-report severity tokens.
  8. No new npm packages in Phase A or B.

Proposed Shared Shell — RightPanel

Composition-style wrapper so each sidebar keeps its panel-specific controls while inheriting the chrome:

┌─────────────────────────────────────────────┐
│ DFM Review                       ╳  Export▾ │  header (title · close · export)
├─────────────────────────────────────────────┤
│  Configure · Run · Review                   │  stage tracker
├─────────────────────────────────────────────┤
│  CONTEXT                                    │  readonly context strip
│  Part    rev_a                              │
│  Mode    CNC · Aluminum                     │
├─────────────────────────────────────────────┤
│  ▾ Profile                                  │  collapsible sections
│  ▾ Criteria                                 │
│  ▾ Advanced                                 │
├─────────────────────────────────────────────┤
│  [ ▸ Run DFM review ]  last run 2.1 s       │  primary CTA (--accent-1)
├─────────────────────────────────────────────┤
│  RESULTS          12 findings · 3 critical  │
│                                             │
│  ● DFM-07  Sharp internal corner   92%  ›   │
│  ● DFM-06  Wall too thin           88%  ›   │
│  ─ rows continue ─                          │
├─────────────────────────────────────────────┤
│  Export all · Copy ID                       │  footer
└─────────────────────────────────────────────┘

Atoms

Reused from LeftPanel/: SeverityDot, TypeChip, Avatar.

New for RightPanel/: - RightPanel.tsx — shell (header, stage tracker, scroll body, CTA slot, footer) - RightPanelSection.tsx — collapsible config section (persisted open/closed state) - RightPanelContext.tsx — readonly context strip - RunButton.tsx — primary CTA with idle / running / done states - ProgressStrip.tsx — thin progress indicator at top of panel during run - FindingRow.tsx — dense finding row (severity dot, key, title, confidence, chevron) - ExportMenu.tsx — shared dropdown (PDF / HTML / JSON / CSV where applicable) - ProfileChip.tsx — profile chip + modal (generalised from DraftLint Phase B) - useRunState.ts / useCollapsedSections.ts — state hooks

Run state model

type RunState =
  | { kind: "idle" }
  | { kind: "configuring" }
  | { kind: "running"; progressPercent?: number; stageLabel?: string; onCancel?: () => void }
  | { kind: "succeeded"; completedAt: number; durationMs: number }
  | { kind: "failed"; error: string };

Per-Panel Specifics

  • Vision. Context strip shows part + screenshot count. Profile chip = provider route (OpenAI / local). Criteria sections preserved. Findings tagged "DFM Assistant Notes" (honours F7). Export: PDF + JSON.
  • DraftLint. Already close; two deltas — header renames to "DraftLint · Drawing scan", stage tracker also shown in the sidebar (not just the workspace).
  • CNC. Context strip = part + node. Criteria sections (Thresholds / Filters / Aggravating factor) preserved as RightPanelSections. Export: PDF.
  • DFM. Phase A+B wraps the chrome; structural split deferred to Phase C given the 3,382-line footprint. Finding payload contract work also Phase C (ties to F4).
  • Fusion. Same shell, same contract. Each finding labelled kind: "deterministic" | "advisory". Export: PDF + JSON.
  • Rep / Report Template Builder. Left URL-only; not in rail.

Interaction Patterns

Pattern Behaviour
Run CTA triggers running; replaces button with progress strip + Cancel.
Progress Pulled from RunState.progressPercent + optional stageLabel.
Cancel Returns to configuring, preserves inputs.
Re-run After success, CTA becomes "Re-run"; shows "last run X s ago".
Row selection Opens a detail drawer inside the same panel.
Jump to geometry Emits an event the viewer listens for.
Keyboard R run, E export, j/k navigate findings, Esc close detail.
Collapsible sections Open/closed state persisted per-panel in localStorage.

Design Tokens (all reused)

  • --accent-1 for primary CTA.
  • --surface-1/2/3, --border-1/2, --text-1/2/3 for chrome.
  • Severity palette from PDF-report tokens (#C0392B, #E67E22, #F1C40F, #3498DB).
  • Confidence in tabular-nums. Rule IDs in JetBrains Mono 10.5 pt (same as left-sidebar keys).

Phased Plan

Phase A — visual refresh (frontend only, ~2 days) — IMPLEMENTING NOW

  • Swap orange gradients for --accent-1 across Vision / CNC / DFM / Fusion submit/export CTAs.
  • Align severity palette tokens across the four panels.
  • Align header + close-button style.
  • Calm progress strip style.
  • Export button style unified.
  • No file splits, no new components.

Phase B — shared shell (frontend only, ~1 week) — IMPLEMENTING NOW

  • New web/src/components/RightPanel/ package (shell + atoms + state hooks).
  • Vision, DraftLint, CNC, Fusion sidebars wrap their content in the shared shell (composition; each keeps its panel-specific controls inside).
  • DFM sidebar wraps the chrome only; internal split deferred to Phase C.
  • Saved config per panel in localStorage.
  • Keyboard shortcuts (R / E / j / k / Esc).

Phase C — deeper state + findings contract + DFM split (deferred)

  • Standardise finding payload (rule_id, standard_clause, ruleset_version, observed, target, confidence, evidence_pointer).
  • Per-finding disposition (Accept / Rework / Waive) persisted server-side.
  • Unified PDF export via the redesigned builder (G1–G14).
  • Cross-tab run-presence indicators.
  • Finish the DfmSidebar/ split.

Open Questions (do not block A/B)

  1. Cross-panel running state — queue or parallel? Pick: parallel, with a top-bar indicator in Phase C.
  2. Findings list density — 36px / 40px / 44px? Pick: 40px with one summary line.
  3. Profile chip shape for DFM (material/process/industry) — three chips or one combined? Pick: three chips.
  4. Rep tab — promote or keep hidden? Pick: keep hidden.
  5. Rail label for Vision — "Vision" or "AI Vision"? Pick: "AI Vision" for clarity (Phase C cleanup).
  6. Advisory vs hard tagging — client-side heuristic OK in Phase B? Pick: yes; proper backend flag lands in Phase C.

Implementation Notes

  • Branch: rightsidebar-redesign-claude, cut from leftsidebar-redesign-claude.
  • Repo: D:\02_Code\54_ClaudeReview_Rapiddraft\rapiddraft_utumpitch.
  • No new npm packages.
  • Class namespace: .rp / .rp-* / .rp-finding-row — avoids conflicts with .lp* / .dfm-sidebar__* / .vision-sidebar__*.
  • Build verification: npm run build must pass.
  • Local only; never pushed.

Acceptance Criteria For Phases A + B

  • All five active right-rail panels wrap in RightPanel and show the same header, stage tracker, CTA style, and footer.
  • Severity palette and CTA tokens align with left-sidebar + PDF-report tokens exactly.
  • Each panel renders: context strip → collapsible criteria sections → primary CTA → progress strip during run → findings list → export menu.
  • Vision / CNC / Fusion remain under ~500 lines each after migration (they already are; the shell should not bloat them).
  • DraftLint sidebar stays at or below 500 lines.
  • DFM sidebar passes through the shell with no internal split in this phase.
  • Keyboard shortcuts R / E / j / k / Esc work on every panel.
  • Saved section state persists across reloads.
  • npm run build passes; existing Playwright specs still pass.