Use pt-3 pb-3 (12px each) for symmetric vertical padding so content
is visually centered in every header bar.
To keep headers draggable, each header container gets the drag-region
class and all interactive elements (buttons) get the no-drag class.
The global fallback drag strip is reduced to h-3.
Title bar overlay reduced from 40px to 32px (standard Windows size).
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Add RunTimeline component with vertical event timeline, collapsible run
cards, per-kind icons, status animations, and agent lane badges
- Add runTimelineFormatting helpers for timestamps, durations, labels,
content truncation, and consecutive thinking-event collapsing
- Integrate Timeline section into ActivityPanel between Agents and Tools
- Wire jump-to-message in App.tsx using DOM data-message-id attributes
on ChatPane messages with smooth scroll and temporary highlight ring
- Add comprehensive unit tests for all formatting helpers
- Update HANDOVER.md to document completed frontend implementation
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Use indigo accent consistently instead of blue for toggle states
- Replace bulky toggle cards with compact toggle switches in Activity panel
- Fix input focus states to use app-standard indigo glow
- Use semantic nav icons: Server for MCP, Code for LSP
- Style Save button with indigo primary, Delete with subtle destructive hover
- Add Info icon to callout hints
- Center empty states, clean up list item detail text
- Fix indentation in App.tsx settings overlay wiring
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Reduce chat header padding and tighten the title/subtitle line height so the border-bottom lines up with the activity side panel header.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace colored letter badges with official SVG icons sourced from
Simple Icons (Anthropic, Google Gemini) and Wikimedia Commons (OpenAI).
- Create shared ProviderIcons.tsx with OpenAI, Anthropic, and Gemini
SVG icon components using the official brand marks
- Update PatternEditor ModelSelect dropdown to use real provider icons
- Update ActivityPanel model badges to use real provider icons
- Remove duplicated providerStyles objects from both files
Icons are inline SVG using currentColor for theme-aware coloring.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Create model catalog (src/shared/domain/models.ts) with 12 models
from OpenAI, Anthropic, and Google including tier metadata
- Replace free-text model input with custom ModelSelect dropdown
grouped by provider with colored provider icons (green AI for
OpenAI, orange A for Anthropic, blue G for Google)
- Show tier badges (premium/standard/fast) on each model option
- Highlight currently selected model with indigo accent
- Update ActivityPanel to show provider icons on model badges
for visual consistency across the app
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Each agent now renders as a card with:
- Status dot and name
- Model badge (e.g. gpt-5.4) and reasoning effort badge
- Agent description text
- Live activity status label
Cards highlight with blue/emerald borders when active/completed.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Create ActivityPanel component showing per-agent status with
activity dots, agent names, and contextual status labels
- Add detailPanel slot to AppShell layout (right aside, w-64)
- Move agent activity display from inline ChatPane card to the
dedicated side panel
- Remove activity prop and inline panel from ChatPane
- Panel appears when a session is selected, hidden on WelcomePane
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
