feat: comprehensive UI overhaul — theme, header, bubbles, sidebars, review page, launch screen

[sam-phinizy]

Summary

Major UI overhaul across the entire application, driven by iterative design feedback:

• Theme & Color System: GitHub-dark surface elevation (#0D1117 → #161B22 → #1C2129), opacity-based text scale, tiered amber accents (solid fill reserved for Submit only), softened borders
• Header Consolidation: Merged two-row header into single 3-column CSS grid — PR context left, tabs center-locked, actions right. Zero jitter across tab switches.
• Collapsed Inline Bubbles: Annotations collapsed by default with compact single-line summary. n/N keyboard navigation auto-expands focused bubble with position counter (◀ 2/6)
• Collapsible Sidebars: Toggle buttons in panel headers, 24px expand rails when collapsed. Cmd+B/Cmd+Shift+B, Ctrl+h/Ctrl+l, \ for vim-style toggling
• Review Page Overhaul: Smart proximity merging (annotations within 5 lines share one code snippet), inline thread rendering, status dots (amber/green), hover-sync between L-tags and snippet lines, hidden reply input until activated
• Launch Screen: Hero PR input centered, two-column pathing (Local Review + Recent Sessions), progressive disclosure, sidebars hidden on initial view
• Persistent Submit Button: Review actions (Submit/Approve/Request Changes) visible across all tab modes
• Keyboard: [/] cycle through Code→Review→PR tabs

Test plan

• Launch app with no workspace — verify clean launch screen with hero PR input, no sidebars
• Open a folder — verify sidebars appear, header shows with centered tabs
• Open a GitHub PR — verify PR context in header left, Submit button always visible
• Switch tabs with [/] — verify tabs stay centered, no layout jitter
• Toggle sidebars with Cmd+B, Cmd+Shift+B, Ctrl+h, Ctrl+l, \
• Check inline annotation bubbles are collapsed by default
• Navigate annotations with n/N — verify auto-expand, scroll, position counter
• Open Review tab — verify proximity-merged context blocks, status dots on snippet lines
• Hover L-tag in review thread — verify corresponding snippet line highlights
• Click Reply on a thread — verify input appears, submit button works
• Resolve/unresolve annotations — verify status dot color changes

🤖 Generated with Claude Code

[Copilot]

Pull request overview

Major UI overhaul to modernize the app’s dark theme, consolidate header/navigation, improve annotation workflows (collapsed bubbles + keyboard navigation), add collapsible sidebars, revamp the Review page layout, and introduce a new launch screen.

Changes:

• Introduces a new GitHub-dark-inspired surface/token system and updates component styling to match (reduced gradients, new accents, shadows).
• Consolidates header UX into a single toolbar, adds sidebar collapse/expand rails + shortcuts, and adds n/N annotation navigation.
• Overhauls Review page rendering (proximity grouping, merged snippets, inline threads, status dots, hover-sync) and redesigns the launch screen (hero PR input + recent sessions).

Reviewed changes

Copilot reviewed 39 out of 42 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
src/lib/stores/reviewPage.svelte.ts	Adds logging around opening/loading review page data.
src/lib/controllers/appShell.svelte.ts	Adds annotation navigation + sidebar/view cycling shortcut plumbing.
src/lib/commands.ts	Extends command context; adds sidebar toggle commands.
src/lib/codemirror/theme.ts	Restyles inline annotation bubble UI + adds navigation footer styles.
src/lib/codemirror/bubbles.ts	Switches bubble expansion to single “focused line” model + exposes helpers.
src/components/review-header/ReviewSubmitControl.svelte	Focus handling for submit modal textarea.
src/components/review-header/ReviewContextBanner.svelte	Removes legacy review context banner component.
src/components/review-header/ReviewActionsGroup.svelte	Removes legacy review actions group component.
src/components/editor-pane/WorkspaceToolbar.svelte	New consolidated header/toolbar layout with persistent review actions + badges.
src/components/Toolbar.svelte	Simplifies toolbar background styling (drops gradient).
src/components/SettingsDialog.svelte	Updates dialog background to flat surface token.
src/components/ReviewWorkspaceHeader.test.ts	Removes tests for deleted header component.
src/components/ReviewWorkspaceHeader.svelte	Removes legacy header component (replaced by consolidated toolbar).
src/components/ReviewPage.svelte	Implements proximity grouping, inline threads, reply UX changes, hover sync, status dots, and logging.
src/components/ReviewCodeSnippet.svelte	Adds annotated-line status dots + line hover class support.
src/components/GitHubInbox.svelte	Replaces inbox with new “launch screen” UX (hero input, recent sessions, queue).
src/components/FileTree.svelte	Adds optional collapse button + style tweaks.
src/components/EditorPane.svelte	Exposes view cycling/select APIs; renames enterDiff import; binds PR view state outward.
src/components/CommandPalette.test.ts	Updates mocked command context to match new interface.
src/components/CommandPalette.svelte	Updates palette background styling to flat surface token.
src/components/AnnotationSidebar.svelte	Adds optional collapse control + restyled header tabs.
src/components/AnnotationPopover.svelte	Updates popover background styling to flat surface token.
src/components/AnnotationCard.svelte	Updates card background styling to flat surface token.
src/components/AnnotationBubble.svelte	Adds focused position footer (◀ x/y + n/N hints).
src/app.css	Updates global design tokens (surfaces, text opacity scale, accents, shadows, scrollbar).
src/App.svelte	Wires consolidated toolbar, collapsible side panels/rails, and PR view state.
src-tauri/src/lib.rs	Adds tauri log plugin and changes annotation shortcut accelerator string.
src-tauri/gen/schemas/macOS-schema.json	Adds log permission entries to generated schema.
src-tauri/gen/schemas/desktop-schema.json	Adds log permission entries to generated schema.
src-tauri/gen/schemas/capabilities.json	Adds log:default permission to default capability set.
src-tauri/capabilities/default.json	Adds log:default permission.
src-tauri/Cargo.toml	Adds Rust dependencies for logging (tauri-plugin-log, log).
package.json	Adds @tauri-apps/plugin-log.
package-lock.json	Locks @tauri-apps/plugin-log dependency.
docs/superpowers/specs/2026-03-29-ui-overhaul-design.md	Adds design spec for the UI overhaul.
docs/superpowers/plans/2026-03-30-05-review-page-overhaul.md	Adds implementation plan for review page overhaul.
docs/superpowers/plans/2026-03-30-03-collapsed-bubbles-navigation.md	Adds implementation plan for collapsed bubbles + navigation.
docs/superpowers/plans/2026-03-29-02-header-consolidation.md	Adds implementation plan for header consolidation.
docs/superpowers/plans/2026-03-29-01-theme-color-system.md	Adds implementation plan for theme/token changes.
Cargo.lock	Updates lockfile for new Rust dependencies.

Comments suppressed due to low confidence (2)

src/components/editor-pane/WorkspaceToolbar.svelte:46

• getReviewPageState is imported and assigned to reviewState but reviewState is never used. With noUnusedLocals enabled, this will fail type-check/build; remove the import and the unused reviewState variable (or use it).
  src/components/editor-pane/WorkspaceToolbar.svelte:37
• onAgentReviewVerdict is destructured from props but never referenced. With noUnusedLocals enabled, this will fail the build; remove it from $props()/type or wire it into the local review approve/request-changes buttons instead of calling submitReviewVerdict directly.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

SubmitGitHubReviewResult is imported but never used. With noUnusedLocals enabled this will cause a TypeScript error; remove the unused type import or use it for submitActiveGitHubReview typing.

[Copilot]

The animation name used (review-submit-thinking) does not match the defined keyframes (-global-review-submit-thinking), so the “Submitting…” arrow animation won’t run. Rename the keyframes to match the animation name (or update the animation: property accordingly).

[Copilot]

ReviewCard is imported but no longer used in this component. With noUnusedLocals enabled, this will fail type-check/build; remove the unused import.

Suggested change

import ReviewCard from "./ReviewCard.svelte";

[Copilot]

KIND_LABELS is declared but never used. With noUnusedLocals enabled, this will fail type-check/build; remove it or render the kind label in the UI.

[Copilot]

info() logging in derived computations (e.g., snippet merging) will run frequently and, combined with the app-wide log level set to Info, can create significant log spam and UI slowdown. Consider removing these logs or gating them behind a debug flag / using a more verbose log level.

Suggested change

	function mergeSnippets(snippets: (FileSnippet | null)[]): FileSnippet | null {
	const valid = snippets.filter((s): s is FileSnippet => s !== null);
	info(`[ReviewPage] mergeSnippets: ${snippets.length} input, ${valid.length} valid`);
	const DEBUG_SNIPPET_LOGS = false;
	function mergeSnippets(snippets: (FileSnippet | null)[]): FileSnippet | null {
	const valid = snippets.filter((s): s is FileSnippet => s !== null);
	if (DEBUG_SNIPPET_LOGS) {
	info(`[ReviewPage] mergeSnippets: ${snippets.length} input, ${valid.length} valid`);
	}

[Copilot]

setFocusedBubbleEffect toggles focus off when the same line is set again. When there is only one annotated line, n/N navigation wraps to the same line and will collapse the bubble instead of keeping it focused. Consider making setFocusedBubbleEffect an idempotent “set” operation (no toggle) and handling click-to-collapse separately.

[Copilot]

The app enables tauri_plugin_log at Info level globally. Since the UI code now emits many info() logs (e.g., ReviewPage derived recomputes), this can have performance and disk/log-size impact in production; consider lowering the default level or making it conditional on debug/dev builds.

Suggested change

	.level(log::LevelFilter::Info)
	.level(if cfg!(debug_assertions) {
	log::LevelFilter::Info
	} else {
	log::LevelFilter::Warn
	})

[Copilot]

openReviewPage adds multiple console.log/console.error calls. This will be noisy in production and can slow down repeated open/close cycles; prefer the Tauri log plugin (already added in this PR) and/or guard logs behind a debug setting.

[Copilot]

The error banner uses var(--danger), but the theme tokens define --color-danger (no --danger variable). This will render with invalid colors. Use the existing danger token (var(--color-danger) or a semantic token used elsewhere).

Suggested change

	background: color-mix(in srgb, var(--danger) 10%, var(--surface-panel));
	color: var(--danger);
	background: color-mix(in srgb, var(--color-danger) 10%, var(--surface-panel));
	color: var(--color-danger);