Skip to content

Match the Workshop center pane headers to the side panels - #1816

Merged
dcellison merged 2 commits into
mainfrom
fix/timeline-header
Oct 12, 2026
Merged

dcellison merged 2 commits into
mainfrom
fix/timeline-header

Conversation

@dcellison

@dcellison dcellison commented Oct 12, 2026 •

Copy link
Copy Markdown
Owner

Closes #1815

Summary

Every center pane header now matches the side panels: one line, no breadcrumb, a title styled like the sidebar's "Kai Workshop" label, and the sidebar's icon buttons.

Titles (styles.css)

  • One shared rule gives .conversation-header h2, .agent-workspace-header h1, .workspaces-header h1, .settings-header h1, and .memory-header h1 the .overline typography (0.68rem, weight 720, 0.16em letter spacing, uppercase, accent colour) with zero margin and ellipsis truncation. The four old serif title rules are gone. .context-pane h2 (Agent activity) keeps its serif style.
  • The Activity title symbol (Mentions, Following, Reviews) shrinks from 1rem to 0.85rem to sit inside the small label.
  • Agents keeps its counts line beside the title, now centered rather than baseline-aligned.

Breadcrumbs removed from the conversation header, ActivityWorkspaceHeader, AgentWorkspace, MemoryExplorer, FactReview, MemoryReconciliation, WorkspacesWorkspace, ScheduledJobsWorkspace, and SettingsWorkspace, along with the unused .breadcrumbs rule. The workshopName prop that only fed the breadcrumb is removed from ActivityWorkspaceHeader, MentionsInbox, FollowingThreads, ReviewsWorkspace, and AgentWorkspace.

Icons

  • Header actions use nav-tool-button (or nav-add-button for Create agent), so they are the same size as the side panel icons; header action gaps match .nav-heading-actions. The per-header SVG size overrides (.workspaces-header-actions svg, .fact-review-button svg, .reviews-launch-button svg) are removed.
  • New icons.tsx holds BackIcon and CloseIcon (moved from App.tsx), replacing the text "←" and "×" glyphs, which followed the font size instead of the button size.
  • Memory keeps its wider action gap so the Fact review count badge does not cover the next button.

Unchanged: modal dialog headers (workspace creation and similar) and the detail panes on the right of Workspaces, Scheduled jobs, and Memory.

Testing

  • npm run typecheck clean.
  • npx vitest run: 289 passed. Breadcrumb text assertions now check that no .breadcrumbs element renders; the settings and agents tests expect the sidebar button classes and SVG icons.
  • npm run verify-generated clean.
  • Not yet checked in a real browser.

@dcellison dcellison changed the title Match the Workshop conversation header to the side panels Match the Workshop center pane headers to the side panels Oct 12, 2026
@dcellison
dcellison merged commit 1094aae into main Oct 12, 2026
6 checks passed
@dcellison
dcellison deleted the fix/timeline-header branch October 12, 2026 17:23
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.

Match the Workshop center pane headers to the side panels

2 participants