feat: add chat header with session title and agent status indicator

[devin-ai-integration]

Issue

• resolve: https://github.com/route06/liam-internal/issues/5835

Why is this change needed?

In Deep Modeling mode, workflows can take a long time to execute. Users may scroll through the chat to review artifacts or ERD while waiting. The existing WorkflowRunningIndicator only appears at the bottom of the chat timeline, so users lose visibility of workflow progress when scrolled away from the bottom.

This change adds a sticky header to the chat that displays:

1. Session title - so users always know which session they're viewing
2. Agent execution status - showing which agents are completed (✓), currently running (with animation), or pending, in the workflow order: PM Agent → DB Agent → QA Agent

Changes

New Components

• ChatHeader: Sticky header component that displays session title and conditionally shows agent status during workflow execution
• AgentStatusIndicator: Visual indicator showing the three-agent workflow pipeline with status badges

Data Flow

• Fetches session title from design_sessions table in both SessionDetailPage and PublicSessionDetailPage
• Extracts current and completed agents by analyzing AI messages in the chat (checking message.name field)
• Filters out internal "lead" agent from display

Styling

• Header uses position: sticky to remain visible during scroll
• Reuses existing WorkflowRunningIndicator component for running animation
• Completed agents show checkmark (✓), running agents show animated dots, pending agents are grayed out

Important Review Points

⚠️ This implementation was not manually tested in a running environment - only lint and typecheck passed. Please verify:

1. Visual appearance: Check that the sticky header looks correct and doesn't interfere with chat scrolling
2. Agent status accuracy: Verify the status updates correctly as workflow progresses through PM → DB → QA agents
3. Session title handling: Test with long session titles to ensure truncation works properly
4. Responsive behavior: Check layout on different screen widths
5. Both session types: Test on both private sessions (/sessions/:id) and public sessions (/p/:id)

Agent Detection Logic

The implementation assumes:

• Agent roles are stored in message.name as 'pm', 'db', 'qa', or 'lead'
• Workflow order is always PM Agent → DB Agent → QA Agent
• Any agent that has sent a message is marked as "completed" (this may not distinguish between "finished" and "currently sending messages")

If these assumptions don't hold, the status display may be inaccurate.

---

Session: https://app.devin.ai/sessions/c49442eadf6048efbc61c859f97bb6d9
Requested by: [email protected]

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR that start with 'DevinAI' or '@devin'.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
liam-app	Ready	Preview	Comment	Oct 27, 2025 6:47am
liam-assets	Ready	Preview	Comment	Oct 27, 2025 6:47am
liam-storybook	Ready	Preview	Comment	Oct 27, 2025 6:47am

2 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
liam-docs	Ignored	Preview		Oct 27, 2025 6:47am
liam-erd-sample	Skipped			Oct 27, 2025 6:47am

[giselles-ai]

Finished running flow.

Step	Status	Updated(UTC)
1	✅	Oct 24, 2025 12:22am
2	✅	Oct 24, 2025 12:24am
3	✅	Oct 24, 2025 12:24am

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[giselles-ai]

Check changeset necessity

Status: NOT REQUIRED

Reason:

• Changes are confined to the application code under frontend/apps/app (maps to @liam-hq/app), which is in the ignore list.
• No modifications to publishable packages: @liam-hq/cli, @liam-hq/erd-core, @liam-hq/schema, or @liam-hq/ui.
• While the change is user-facing (sticky ChatHeader with session title and agent status), it affects only the app, not any published package APIs.
• No API or performance changes in target packages that would warrant a version bump.

Changeset (copy & paste):

# No changeset required for this PR because it only changes the ignored package (@liam-hq/app).

[supabase]

Updates to Preview Branch (devin/1761265205-chat-header-agent-status) ↗︎

Deployments	Status	Updated
Database	✅	Mon, 27 Oct 2025 06:44:40 UTC
Services	✅	Mon, 27 Oct 2025 06:44:40 UTC
APIs	✅	Mon, 27 Oct 2025 06:44:40 UTC

Tasks are run on every commit but only new migration files are pushed.
Close and reopen this PR if you want to apply changes from existing seed or migration files.

Tasks	Status	Updated
Configurations	✅	Mon, 27 Oct 2025 06:44:53 UTC
Migrations	✅	Mon, 27 Oct 2025 06:44:57 UTC
Seeding	✅	Mon, 27 Oct 2025 06:44:58 UTC
Edge Functions	✅	Mon, 27 Oct 2025 06:44:58 UTC

---

View logs for this Workflow Run ↗︎.
Learn more about Supabase for Git ↗︎.