Redesign the TL;DR panel: Key Points, Jira-aware Checklist, left-rail layout#8
Merged
Conversation
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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
Brief→ 🎯 Key Points (color-coded card stack, tagged by the model viaCHANGE:/RISK:/CONTEXT:so cards are deterministic); ✅ Checklist is Jira-aware (ticket acceptance criteria when connected, AI-generated otherwise, with a source note); 🐦 Tweet removed.Design + full decision trail:
docs/superpowers/specs/2026-06-03-tldr-tabs-redesign-design.md.Verification
typecheck+ 70 tests +buildgreencli/cli#13510andredislabsdev/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