Skip to content

feat: UI v2 overhaul — sidebar redesign, message layouts, session graph, resume-in-terminal#27

Open
userFRM wants to merge 9 commits intomasterfrom
ui/v2-overhaul
Open

feat: UI v2 overhaul — sidebar redesign, message layouts, session graph, resume-in-terminal#27
userFRM wants to merge 9 commits intomasterfrom
ui/v2-overhaul

Conversation

@userFRM
Copy link
Owner

@userFRM userFRM commented Mar 3, 2026

Summary

Complete redesign of the application interface, touching 18 files with ~4,000 lines added and ~6,200 lines removed (net reduction of ~2,200 lines). Focused on professional UX, multi-source agent support, and developer workflow integration.

Sidebar Redesign

  • Tabbed navigation — Browse, Starred, Archive, Trash, Analytics tabs with per-tab empty states
  • AppBar — Global full-text search (via API), per-source filter chips, system/dark/light theme cycling
  • Hierarchical session tree — Parent → subagent → team grouping with depth-aware connectors and type indicators
  • Collapsible project groups — Click project headers to collapse/expand; toolbar buttons for collapse-all / expand-all
  • Context menu — Right-click any session for: Star, Rename, Archive, Copy ID, Copy path, Resume in terminal, Delete
  • Session graph — Force-directed visualization of session relationships (custom layout engine, no external deps)
  • Soft-delete workflow — Trash tab with restore and permanent delete support via new API endpoint

Message Layout System

  • 4 switchable layouts toggled via header buttons, persisted to localStorage:
    • Bubbles — Chat-style with user messages right-aligned and assistant left-aligned, rounded bubble borders
    • Cards — Bordered cards per turn with role badge headers, nested tool call cards
    • Terminal — Compact left-border accent, dense typography, uppercase role labels
    • Stream — Full-width continuous flow, no chrome, alternating background bands (inspired by danielcorin.com/posts/continuous-flow)
  • All layouts work in both dark and light themes
  • Tool calls, thinking blocks, images, and teammate cards render correctly in each layout

Resume in Terminal

  • One-click CLI resume — Generates the correct resume command per agent source and copies to clipboard:
    • claude --resume <id> with optional --dangerously-skip-permissions, --fork-session, --print
    • codex resume <id>
    • gemini --resume <id>
    • opencode --session <id>
  • Available from both the sidebar context menu and the main panel's more-menu
  • Includes cd <cwd> prefix when the session has a working directory

Code Quality

  • data-role attributes on .msg-turn divs enable pure-CSS layout targeting without JS changes
  • Extracted tree-helpers.ts and force-layout.ts into dedicated modules
  • Net ~2,200 lines removed — cleaned dead CSS, removed legacy theme toggles, eliminated unused settings

Test plan

  • Load app with multiple sessions from different sources (claude, codex, gemini, opencode)
  • Verify sidebar tabs: Browse, Starred, Archive, Trash switch correctly with per-tab content
  • Test global search: type 2+ chars, verify full-text results dropdown, click to navigate
  • Test source filter: toggle checkboxes in filter dropdown, verify session list filters
  • Right-click a session → verify context menu with all options including "Resume in terminal"
  • Click "Resume in terminal" → verify toast and clipboard contains correct CLI command
  • Test all 4 layout modes: switch between Bubbles, Cards, Terminal, Stream via header toggle
  • Verify layouts persist across page refresh
  • Collapse/expand project groups in sidebar; use collapse-all/expand-all buttons
  • Open session graph tab and verify force-directed layout renders
  • Test trash: delete a session, find it in Trash tab, restore it, permanently delete another
  • Verify dark/light/system theme cycling via AppBar button
  • npm run build passes with no errors

🤖 Generated with Claude Code

userFRM and others added 9 commits February 25, 2026 17:57
@userFRM
feat: checkbox right-side, footer row layout, SessionTree trivial fil…
03ae214 
…ter + task preview labels
@userFRM
feat(sidebar): depth-aware hierarchy — type indicators, tree connecto…
1af2cab 
…rs, task preview, grand-subagent support, team stats; better session labels via Agent C
@userFRM @claude
feat(sidebar): session item polish — border depth, task preview, comp…
334d27d 
…act mode, hover glow, source dot

- Depth-0 items get 3px left border (vs 2px for subagents) as primary hierarchy signal
- Task preview: 11px, no opacity/italic, clearly readable but secondary
- Compact mode hides task preview while preserving time + msg count for subagents
- Depth-0 hover gets a subtle inset glow in its accent color; subagents get lighter hover
- Selected state brightens left border to full accent with inset glow
- Subagent text badges (agent/sub) replaced with tiny colored source dot by provider

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@userFRM @claude
feat(sidebar): project grouping toggle, sorted grand-subagents, per-t…
fbe3ab5 
…ab empty states, team grandchild indicator

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@userFRM @claude
feat(sidebar): cleanPreview improvements, source pill UX, scroll fade…
c43f1a8 
…, search kbd hint

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@userFRM
Merge branch 'sidebar/team-grouping-polish'
ffe0b33
@userFRM
merge: sidebar agents A+B+C — item polish, project grouping, source p…
3eda16d 
…ills, cleanPreview, scroll fade
@userFRM @claude
feat: sidebar rethink — separate providers/tree, dynamic right panel,…
1d47bbc 
… font consistency, project right-click, map header fix

- Store: add selectedProject / setSelectedProject for project-level selection
- Sidebar: move source filters into collapsible "providers" section with
  toggle arrow; project grouping is now always-on in browse tab (removed
  toggle button); project headers are clickable (select project) and
  right-clickable (context menu: select all, delete all, expand/collapse);
  clicking a session clears project selection; "select empty" shows toast
  when no empty sessions found
- SessionTree: dynamic scoping — filters graph by selectedProject, or
  falls back to current session cluster, or 20 recent roots; header title
  reflects scope (folder icon + project name / session label / default);
  overflow: hidden + position: relative on tree-panel; sticky header
- CSS: replace var(--mono) with var(--sans) on team-group-header,
  team-group-msgs, subagent-badge, plan-badge, project-header-*;
  new .project-header-row styles with selected state; new .providers-*
  styles; tree-panel min-width: 280px, max-width: 60vw; sticky header

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@userFRM @claude
feat: complete UI v2 overhaul — sidebar redesign, message layouts, se…
5a67486 
…ssion graph, resume-in-terminal

Major redesign of the application interface with focus on professional UX,
multi-source agent support, and developer workflow integration.

Sidebar:
- Rebuilt sidebar with tabbed navigation (Browse, Starred, Archive, Trash, Analytics)
- AppBar with global search (full-text via API), source filters, theme cycling
- Hierarchical session tree with parent/subagent/team grouping
- Collapsible project groups with collapse-all/expand-all toolbar
- Right-click context menu with star, rename, archive, copy ID/path, resume, delete
- Session graph visualization (force-directed layout via custom engine)
- Permanent delete with soft-delete/trash/restore workflow
- Source-aware color coding across all agent types

Message Layouts:
- 4 switchable CSS-only layout variants (Bubbles, Cards, Terminal, Stream)
- Bubble layout: chat-style with user right-aligned, assistant left-aligned
- Card layout: bordered cards per turn with role badges and nested tool cards
- Terminal layout: compact left-border accent with dense typography
- Stream layout: full-width continuous flow with alternating background bands
- Layout preference persisted to localStorage
- All layouts support dark/light themes, tool calls, thinking blocks, images

Resume in Terminal:
- buildResumeCommand() generates CLI commands per agent source
- Supports claude (--resume, --dangerously-skip-permissions, --fork-session, --print)
- Supports codex (resume), gemini (--resume), opencode (--session)
- Available via right-click context menu and main panel more-menu
- One-click copy of resume command with toast feedback

Other:
- data-role attributes on message turns for CSS parent targeting
- Extracted tree-helpers and force-layout into dedicated modules
- Cleaned up dead CSS (~3000 lines removed, ~1800 added)
- Removed unused compactSidebar setting and legacy theme toggle code

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@userFRM