Skip to content

Redesign the TL;DR panel: Key Points, Jira-aware Checklist, left-rail layout#8

Merged
shacharPash merged 7 commits into
mainfrom
tldr-panel-redesign
Jun 4, 2026
Merged

Redesign the TL;DR panel: Key Points, Jira-aware Checklist, left-rail layout#8
shacharPash merged 7 commits into
mainfrom
tldr-panel-redesign

Conversation

@shacharPash

Copy link
Copy Markdown
Owner

Reworks the TL;DR panel so it gets the reviewer into the code faster. (Re-opened against `main` — the original #7 auto-closed when its stacked base branch was deleted after #6 merged; this is the same work, rebased onto main so it carries only the redesign commits.)

What changed

  • Tabs: Brief🎯 Key Points (color-coded card stack, tagged by the model via CHANGE:/RISK:/CONTEXT: so cards are deterministic); ✅ Checklist is Jira-aware (ticket acceptance criteria when connected, AI-generated otherwise, with a source note); 🐦 Tweet removed.
  • Readability: calm amber code chips (was saturated-blue "confetti"); long chips wrap instead of overflowing; brighter text.
  • Layout: Summary moved into the top of the left rail; diff fills full viewport height; left rail scrolls; Summary / Insights / Files each collapse to focus on the code; review-effort pill moved to the diff toolbar.

Design + full decision trail: docs/superpowers/specs/2026-06-03-tldr-tabs-redesign-design.md.

Verification

  • typecheck + 70 tests + build green
  • Verified live against cli/cli#13510 and redislabsdev/cloud-vercel-service#277: all four tabs render, tagged Key Points cards correct, full-height layout, collapsible sections persist, no app console errors.

🤖 Generated with Claude Code

shacharPash and others added 7 commits June 4, 2026 11:43
Rename Brief -> Changes & Risks (card stack, 🎯), make Checklist
Jira-aware with a source note, remove Tweet. Defer PM view / Flow.

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

- Brief -> Changes & Risks: color-coded card stack (core/risk/context),
  file:line pinned as a chip; emoji 📌 -> 🎯 to stop clashing with the
  top SummaryCard.
- Checklist stays labelled Checklist but is now Jira-aware. New shared
  checklistSource() picks the grounding: full Jira (token present + ticket
  has a description) -> items derived from the ticket's acceptance criteria
  via buildChecklistAcPrompt; link-only / no Jira -> AI-generated. An in-pane
  source note (Jira chevron + key + link, or '✨ AI-generated') says which.
- Inject the ticket description only for this persona's system prompt, not
  via formatJiraContext (which deliberately keeps descriptions out).
- Remove the Tweet tab/persona (redundant with the top summary).
- Extract JiraIcon into a shared component (reused by JiraBadge + checklist).
- Tests for checklistSource's three states.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Driven by live feedback after the first tab redesign:

- Rename 'Changes & Risks' -> 'Key Points' (not every PR has a risk, so
  '& Risks' over-promised).
- Calmer inline code: one shared treatment across Plain English / Key Points /
  Checklist / Summary / Before-After — warm amber (--ident #e3a857) in a
  hairline chip instead of a saturated-blue bordered chip on every identifier.
- Fix the Checklist Jira source-note contrast (was accent-blue text on an
  accent-blue tint): bright --fg text, key + link in --info.
- Layout: drop the full-width Summary band; SummaryCard now sits at the top of
  the left rail (Summary + Before/After -> TL;DR tabs -> files) and the diff
  starts at the very top, full height. The ~420px rail caps line length that
  used to run 150+ chars wide; the summary headline + before/after now render
  backticks as amber chips instead of literal backticks.
- Remove the now-dead SummaryResizer component and summaryHeight preference;
  the card is content-height in the rail (capped, scrolls internally).
- Focus mode: dropped — the new layout + existing rail resizer make it redundant.

Verified live against cli/cli#13510: all four tabs render, amber chips read
cleanly, no console errors. typecheck + 70 tests + build all green.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Left rail couldn't scroll (tall content unreachable) and there was no easy
way to hide parts to focus on the files + code.

- Single scroll rail: .rail-scroll (flex:1, overflow-y:auto) holds the three
  sections at natural height; ReviewFooter stays pinned below. Dropped the
  per-pane 50vh internal scrolls (no more nested scrollbars).
- Collapsible sections via a shared RailSectionHead (chevron + title, optional
  right slot): 📌 Summary, 💡 Insights (tabs), 🗂 Files (reviewed count in the
  right slot). Each collapses to a slim header; state persists per section
  (summaryCollapsed / tldrCollapsed / filesCollapsed) so 'collapse Summary +
  Insights to scan files + code' survives reload.
- Removed TLDRResizer + tldrHeight pref and the TL;DR ✕/collapsed-pill — the
  scroll + collapse model replaces drag-to-size (mirrors the SummaryResizer
  removal).

Verified live against cli/cli#13510: sections collapse/expand, state persists
across reload, footer pinned, no console errors. typecheck + 70 tests + build green.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The HealthBanner renders null when healthy, so .app had only two children
(header + .main). With a fixed 3-track grid (52px auto 1fr), .main landed on
the 'auto' row and the 1fr row sat empty — the diff and rail only filled the
top of the screen, leaving a black gap, and 'Ready to approve' floated mid-page.

Switch .app to a flex column (header fixed 52px, optional banner, .main flex:1)
so .main always eats the remaining height regardless of whether the banner
renders. The diff now fills the screen and the footer pins to the bottom.

Verified live against cli/cli#13510: full-height diff, footer pinned bottom,
sections collapse/expand correctly, no console errors.

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

Key Points cards were classified by a client-side keyword regex over the first
80 chars of each bullet, so a bullet led by a long identifier missed its signal
words and fell back to 'Context' — even when it was the core change (e.g. PR
#277 showed Context/Risk/Context with no Core card).

- TL;DR prompt now requires each bullet to start with CHANGE: / RISK: /
  CONTEXT:. parseBullets reads the tag (CHANGE→core, RISK→risk, CONTEXT→note)
  and strips it from the displayed text. classify() stays as a fallback for
  untagged/legacy output and now scans the whole bullet, not just 80 chars.
- Move the review-effort pill out of the Summary card into the diff toolbar,
  right-aligned on the same row as View/Theme (it describes the code, so it
  belongs on the code's toolbar).

Verified live against PR #277: cards now render Core change / ⚠ Risk / Context
correctly (the core change is the lead card again); effort pill sits top-right
in the toolbar. typecheck + 70 tests + build green; no app console errors.

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

The shared inline-code chip rule had white-space:nowrap, so a long token like
'GET /v1/products/{productId}/plans' couldn't wrap and bled past the right edge
of the narrow Before/After cards. Replace nowrap with overflow-wrap:anywhere so
long identifiers/paths break and stay inside the card.

Verified: a long chip in a 180px card now wraps (height ~3 lines) and no longer
overflows (measured chipRight 165 <= cardRight 180).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@shacharPash shacharPash merged commit 12e5105 into main Jun 4, 2026
1 check passed
@shacharPash shacharPash deleted the tldr-panel-redesign branch June 4, 2026 08:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant