feat: add right-side activity panel for agent status

- 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>
This commit is contained in:
David Kaya
2026-03-21 18:34:05 +01:00
co-authored by Copilot
parent 867f2932df
commit 9138aa8819
4 changed files with 94 additions and 47 deletions
+7 -1
View File
@@ -3,10 +3,11 @@ import type { ReactNode } from 'react';
interface AppShellProps {
sidebar: ReactNode;
content: ReactNode;
detailPanel?: ReactNode;
overlay?: ReactNode;
}
export function AppShell({ sidebar, content, overlay }: AppShellProps) {
export function AppShell({ sidebar, content, detailPanel, overlay }: AppShellProps) {
return (
<div className="relative flex h-screen bg-[var(--color-surface-0)] text-zinc-100">
{/* Full-width drag region matching the title bar overlay height */}
@@ -16,6 +17,11 @@ export function AppShell({ sidebar, content, overlay }: AppShellProps) {
{sidebar}
</aside>
<main className="relative min-w-0 flex-1">{content}</main>
{detailPanel && (
<aside className="flex w-64 shrink-0 flex-col border-l border-[var(--color-border)] bg-[var(--color-surface-1)]">
{detailPanel}
</aside>
)}
{overlay}
</div>
);