From 87e4c2da46cba3e7b3b9c3ce617d3e0ee952cbbc Mon Sep 17 00:00:00 2001
From: Test User <test@example.com>
Date: Wed, 1 Apr 2026 19:30:42 -0700
Subject: [PATCH 1/3] feat(web-ui): /sessions/[id] detail page (#509)

- New page wiring SplitPane + AgentChatPanel + AgentTerminal
- Header: back link, short session ID, state badge, cost, End Session button
- Active sessions: SplitPane with chat (45%) + terminal (55%), per-session storageKey
- Ended sessions: read-only AgentChatPanel with history, no terminal, ended banner
- Loading skeleton and error states (404 session-not-found + generic)
- Error feedback when End Session fails
- AgentChatPanel: readOnly + initialMessages props for ended session view
- sessionsApi: getOne() and getMessages() endpoints
- 19 unit tests covering all acceptance criteria
---
 .../sessions/SessionDetailPage.test.tsx       | 309 ++++++++++++++++++
 web-ui/src/app/sessions/[id]/page.tsx         | 215 +++++++++++-
 .../components/sessions/AgentChatPanel.tsx    |  24 +-
 web-ui/src/lib/api.ts                         |  34 ++
 4 files changed, 560 insertions(+), 22 deletions(-)
 create mode 100644 web-ui/src/__tests__/components/sessions/SessionDetailPage.test.tsx

diff --git a/web-ui/src/__tests__/components/sessions/SessionDetailPage.test.tsx b/web-ui/src/__tests__/components/sessions/SessionDetailPage.test.tsx
new file mode 100644
index 00000000..58a5ab80
--- /dev/null
+++ b/web-ui/src/__tests__/components/sessions/SessionDetailPage.test.tsx
@@ -0,0 +1,309 @@
+'use client';
+
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { useParams, useRouter } from 'next/navigation';
+import useSWR from 'swr';
+import SessionDetailPage from '@/app/sessions/[id]/page';
+import { sessionsApi } from '@/lib/api';
+import type { Session } from '@/types';
+
+// ── Mocks ────────────────────────────────────────────────────────────────
+
+jest.mock('next/navigation', () => ({
+  useParams: jest.fn(),
+  useRouter: jest.fn(),
+}));
+
+jest.mock('swr');
+
+jest.mock('@/lib/api', () => ({
+  sessionsApi: {
+    getOne: jest.fn(),
+    end: jest.fn(),
+    getMessages: jest.fn(),
+  },
+}));
+
+jest.mock('@/components/sessions/AgentChatPanel', () => ({
+  AgentChatPanel: ({
+    sessionId,
+    readOnly,
+  }: {
+    sessionId: string;
+    readOnly?: boolean;
+  }) => (
+    <div
+      data-testid="agent-chat-panel"
+      data-session-id={sessionId}
+      data-read-only={readOnly ? 'true' : 'false'}
+    >
+      {!readOnly && <textarea aria-label="Message input" />}
+    </div>
+  ),
+}));
+
+jest.mock('@/components/sessions/AgentTerminal', () => ({
+  AgentTerminal: ({ sessionId }: { sessionId: string }) => (
+    <div data-testid="agent-terminal" data-session-id={sessionId} />
+  ),
+}));
+
+jest.mock('@/components/sessions/SplitPane', () => ({
+  SplitPane: ({
+    left,
+    right,
+    storageKey,
+  }: {
+    left: React.ReactNode;
+    right: React.ReactNode;
+    storageKey?: string;
+  }) => (
+    <div data-testid="split-pane" data-storage-key={storageKey}>
+      <div data-testid="split-pane-left">{left}</div>
+      <div data-testid="split-pane-right">{right}</div>
+    </div>
+  ),
+}));
+
+const mockUseParams = useParams as jest.MockedFunction<typeof useParams>;
+const mockUseRouter = useRouter as jest.MockedFunction<typeof useRouter>;
+const mockUseSWR = useSWR as jest.MockedFunction<typeof useSWR>;
+const mockSessApiEnd = sessionsApi.end as jest.MockedFunction<typeof sessionsApi.end>;
+const mockSessApiGetMessages = sessionsApi.getMessages as jest.MockedFunction<
+  typeof sessionsApi.getMessages
+>;
+
+function swrResult(overrides: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  data?: any;
+  isLoading?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  error?: any;
+}): ReturnType<typeof useSWR> {
+  return {
+    data: overrides.data ?? undefined,
+    isLoading: overrides.isLoading ?? false,
+    error: overrides.error ?? null,
+    mutate: jest.fn(),
+    isValidating: false,
+  } as unknown as ReturnType<typeof useSWR>;
+}
+
+const SESSION_ID = 'session-abc123def456';
+const SHORT_ID = SESSION_ID.slice(-8);
+
+function makeSession(overrides: Partial<Session> = {}): Session {
+  return {
+    id: SESSION_ID,
+    state: 'active',
+    workspace_path: '/home/user/myproject',
+    model: 'claude-sonnet-4-6',
+    created_at: '2026-04-01T10:00:00Z',
+    ended_at: null,
+    cost_usd: 0.0123,
+    agent_name: null,
+    ...overrides,
+  };
+}
+
+const mockRouterPush = jest.fn();
+
+function setupRouter() {
+  mockUseRouter.mockReturnValue({
+    push: mockRouterPush,
+    replace: jest.fn(),
+    back: jest.fn(),
+    forward: jest.fn(),
+    refresh: jest.fn(),
+    prefetch: jest.fn(),
+  } as ReturnType<typeof useRouter>);
+}
+
+function setupParams(id = SESSION_ID) {
+  mockUseParams.mockReturnValue({ id });
+}
+
+// ── Tests ────────────────────────────────────────────────────────────────
+
+describe('SessionDetailPage', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    setupParams();
+    setupRouter();
+  });
+
+  // ── Loading state ────────────────────────────────────────────────────
+
+  it('shows loading skeleton while session data is fetching', () => {
+    mockUseSWR.mockReturnValue(swrResult({ isLoading: true }));
+    render(<SessionDetailPage />);
+    expect(screen.getByTestId('session-detail-skeleton')).toBeInTheDocument();
+  });
+
+  // ── Active session ───────────────────────────────────────────────────
+
+  it('renders header with back link for active session', () => {
+    const session = makeSession();
+    mockUseSWR.mockReturnValue(swrResult({ data: session }));
+    render(<SessionDetailPage />);
+    expect(screen.getByRole('link', { name: /sessions/i })).toHaveAttribute('href', '/sessions');
+  });
+
+  it('renders session short ID in header', () => {
+    const session = makeSession();
+    mockUseSWR.mockReturnValue(swrResult({ data: session }));
+    render(<SessionDetailPage />);
+    expect(screen.getByText(new RegExp(SHORT_ID))).toBeInTheDocument();
+  });
+
+  it('renders active state badge for active session', () => {
+    const session = makeSession({ state: 'active' });
+    mockUseSWR.mockReturnValue(swrResult({ data: session }));
+    render(<SessionDetailPage />);
+    expect(screen.getByText('active')).toBeInTheDocument();
+  });
+
+  it('renders SplitPane with AgentChatPanel and AgentTerminal for active session', () => {
+    const session = makeSession({ state: 'active' });
+    mockUseSWR.mockReturnValue(swrResult({ data: session }));
+    render(<SessionDetailPage />);
+    expect(screen.getByTestId('split-pane')).toBeInTheDocument();
+    expect(screen.getByTestId('agent-chat-panel')).toBeInTheDocument();
+    expect(screen.getByTestId('agent-terminal')).toBeInTheDocument();
+  });
+
+  it('passes session-specific storageKey to SplitPane', () => {
+    const session = makeSession();
+    mockUseSWR.mockReturnValue(swrResult({ data: session }));
+    render(<SessionDetailPage />);
+    expect(screen.getByTestId('split-pane')).toHaveAttribute(
+      'data-storage-key',
+      `session-split-${SESSION_ID}`
+    );
+  });
+
+  it('passes sessionId to AgentChatPanel and AgentTerminal', () => {
+    const session = makeSession();
+    mockUseSWR.mockReturnValue(swrResult({ data: session }));
+    render(<SessionDetailPage />);
+    expect(screen.getByTestId('agent-chat-panel')).toHaveAttribute('data-session-id', SESSION_ID);
+    expect(screen.getByTestId('agent-terminal')).toHaveAttribute('data-session-id', SESSION_ID);
+  });
+
+  it('renders input bar for active session (not read-only)', () => {
+    const session = makeSession({ state: 'active' });
+    mockUseSWR.mockReturnValue(swrResult({ data: session }));
+    render(<SessionDetailPage />);
+    expect(screen.getByTestId('agent-chat-panel')).toHaveAttribute('data-read-only', 'false');
+  });
+
+  // ── End Session ──────────────────────────────────────────────────────
+
+  it('renders enabled End Session button for active session', () => {
+    const session = makeSession({ state: 'active' });
+    mockUseSWR.mockReturnValue(swrResult({ data: session }));
+    render(<SessionDetailPage />);
+    const btn = screen.getByRole('button', { name: /end session/i });
+    expect(btn).toBeEnabled();
+  });
+
+  it('calls sessionsApi.end and redirects to /sessions on End Session click', async () => {
+    mockSessApiEnd.mockResolvedValue(undefined);
+    const session = makeSession({ state: 'active' });
+    mockUseSWR.mockReturnValue(swrResult({ data: session }));
+    render(<SessionDetailPage />);
+    fireEvent.click(screen.getByRole('button', { name: /end session/i }));
+    await waitFor(() => {
+      expect(mockSessApiEnd).toHaveBeenCalledWith(SESSION_ID);
+      expect(mockRouterPush).toHaveBeenCalledWith('/sessions');
+    });
+  });
+
+  it('shows error message and re-enables button when sessionsApi.end rejects', async () => {
+    mockSessApiEnd.mockRejectedValue(new Error('Network error'));
+    const session = makeSession({ state: 'active' });
+    mockUseSWR.mockReturnValue(swrResult({ data: session }));
+    render(<SessionDetailPage />);
+    fireEvent.click(screen.getByRole('button', { name: /end session/i }));
+    await waitFor(() => {
+      expect(mockRouterPush).not.toHaveBeenCalled();
+      expect(screen.getByText(/failed to end session/i)).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /end session/i })).toBeEnabled();
+    });
+  });
+
+  // ── Ended session ────────────────────────────────────────────────────
+
+  it('renders ended state for ended session', () => {
+    const session = makeSession({ state: 'ended', ended_at: '2026-04-01T11:00:00Z' });
+    mockUseSWR.mockReturnValue(swrResult({ data: session }));
+    mockSessApiGetMessages.mockResolvedValue([]);
+    render(<SessionDetailPage />);
+    // The badge shows the state and the banner also mentions 'ended'
+    expect(screen.getAllByText(/ended/i).length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('renders "session ended" banner for ended session', () => {
+    const session = makeSession({ state: 'ended', ended_at: '2026-04-01T11:00:00Z' });
+    mockUseSWR.mockReturnValue(swrResult({ data: session }));
+    mockSessApiGetMessages.mockResolvedValue([]);
+    render(<SessionDetailPage />);
+    expect(screen.getByText(/this session has ended/i)).toBeInTheDocument();
+  });
+
+  it('does not render AgentTerminal for ended session', () => {
+    const session = makeSession({ state: 'ended', ended_at: '2026-04-01T11:00:00Z' });
+    mockUseSWR.mockReturnValue(swrResult({ data: session }));
+    mockSessApiGetMessages.mockResolvedValue([]);
+    render(<SessionDetailPage />);
+    expect(screen.queryByTestId('agent-terminal')).not.toBeInTheDocument();
+  });
+
+  it('renders AgentChatPanel in read-only mode for ended session', () => {
+    const session = makeSession({ state: 'ended', ended_at: '2026-04-01T11:00:00Z' });
+    mockUseSWR.mockReturnValue(swrResult({ data: session }));
+    mockSessApiGetMessages.mockResolvedValue([]);
+    render(<SessionDetailPage />);
+    expect(screen.getByTestId('agent-chat-panel')).toHaveAttribute('data-read-only', 'true');
+  });
+
+  it('renders disabled End Session button for ended session', () => {
+    const session = makeSession({ state: 'ended', ended_at: '2026-04-01T11:00:00Z' });
+    mockUseSWR.mockReturnValue(swrResult({ data: session }));
+    mockSessApiGetMessages.mockResolvedValue([]);
+    render(<SessionDetailPage />);
+    const btn = screen.getByRole('button', { name: /end session/i });
+    expect(btn).toBeDisabled();
+  });
+
+  // ── Error state ──────────────────────────────────────────────────────
+
+  it('renders "Session not found" error when fetch returns 404-like error', () => {
+    mockUseSWR.mockReturnValue(
+      swrResult({ error: { status: 404, detail: 'Session not found' } })
+    );
+    render(<SessionDetailPage />);
+    expect(screen.getByText(/session not found/i)).toBeInTheDocument();
+    // Multiple back links exist (header + error body) — all point to /sessions
+    const links = screen.getAllByRole('link', { name: /back to sessions/i });
+    expect(links.length).toBeGreaterThanOrEqual(1);
+    links.forEach((link) => expect(link).toHaveAttribute('href', '/sessions'));
+  });
+
+  it('renders generic error state for non-404 errors', () => {
+    mockUseSWR.mockReturnValue(
+      swrResult({ error: { status: 500, detail: 'Internal server error' } })
+    );
+    render(<SessionDetailPage />);
+    expect(screen.getByText(/failed to load session/i)).toBeInTheDocument();
+  });
+
+  // ── Page title ───────────────────────────────────────────────────────
+
+  it('includes session short ID in document title', () => {
+    const session = makeSession();
+    mockUseSWR.mockReturnValue(swrResult({ data: session }));
+    render(<SessionDetailPage />);
+    expect(document.title).toContain(SHORT_ID);
+  });
+});
diff --git a/web-ui/src/app/sessions/[id]/page.tsx b/web-ui/src/app/sessions/[id]/page.tsx
index bbf07f87..27b4eacf 100644
--- a/web-ui/src/app/sessions/[id]/page.tsx
+++ b/web-ui/src/app/sessions/[id]/page.tsx
@@ -1,33 +1,216 @@
 'use client';
 
-import { useParams } from 'next/navigation';
+import { useEffect, useState, useCallback } from 'react';
+import { useParams, useRouter } from 'next/navigation';
 import Link from 'next/link';
+import useSWR from 'swr';
 import { ArrowLeft01Icon } from '@hugeicons/react';
 import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { AgentChatPanel } from '@/components/sessions/AgentChatPanel';
+import { AgentTerminal } from '@/components/sessions/AgentTerminal';
+import { SplitPane } from '@/components/sessions/SplitPane';
+import { sessionsApi } from '@/lib/api';
+import type { ChatMessage, Session } from '@/types';
+
+// ── Helpers ──────────────────────────────────────────────────────────────
+
+function shortId(id: string): string {
+  return id.slice(-8);
+}
+
+function stateBadgeVariant(state: Session['state']): 'default' | 'secondary' | 'outline' {
+  if (state === 'active') return 'default';
+  if (state === 'ended') return 'secondary';
+  return 'outline';
+}
+
+// ── Loading skeleton ──────────────────────────────────────────────────────
+
+function SessionDetailSkeleton() {
+  return (
+    <div data-testid="session-detail-skeleton" className="flex h-screen flex-col">
+      {/* Header skeleton */}
+      <div className="flex items-center gap-4 border-b px-4 py-3">
+        <div className="h-8 w-24 animate-pulse rounded bg-muted" />
+        <div className="h-5 w-32 animate-pulse rounded bg-muted" />
+        <div className="ml-auto h-8 w-28 animate-pulse rounded bg-muted" />
+      </div>
+      {/* Body skeleton */}
+      <div className="flex flex-1 gap-0">
+        <div className="h-full flex-1 animate-pulse bg-muted/50" />
+        <div className="w-px bg-border" />
+        <div className="h-full flex-1 animate-pulse bg-muted/50" />
+      </div>
+    </div>
+  );
+}
+
+// ── Main component ────────────────────────────────────────────────────────
 
 export default function SessionDetailPage() {
   const params = useParams<{ id: string }>();
+  const router = useRouter();
   const sessionId = params.id;
 
+  const { data: session, isLoading, error } = useSWR<Session>(
+    sessionId ? `/api/v2/sessions/${sessionId}` : null,
+    () => sessionsApi.getOne(sessionId),
+    { refreshInterval: (data) => (data?.state === 'active' ? 5000 : 0) }
+  );
+
+  const [endingSession, setEndingSession] = useState(false);
+  const [endError, setEndError] = useState<string | null>(null);
+  const [historyMessages, setHistoryMessages] = useState<ChatMessage[] | undefined>(undefined);
+
+  // Set page title once session is loaded
+  useEffect(() => {
+    if (session) {
+      document.title = `Session #${shortId(session.id)} — CodeFRAME`;
+    }
+  }, [session]);
+
+  // Load message history for ended sessions via REST
+  useEffect(() => {
+    if (session?.state === 'ended' && historyMessages === undefined) {
+      sessionsApi
+        .getMessages(session.id)
+        .then(setHistoryMessages)
+        .catch(() => setHistoryMessages([]));
+    }
+  }, [session, historyMessages]);
+
+  const handleEndSession = useCallback(async () => {
+    if (!session || session.state !== 'active') return;
+    setEndingSession(true);
+    setEndError(null);
+    try {
+      await sessionsApi.end(session.id);
+      router.push('/sessions');
+    } catch {
+      setEndError('Failed to end session. Please try again.');
+    } finally {
+      setEndingSession(false);
+    }
+  }, [session, router]);
+
+  // ── Loading ──────────────────────────────────────────────────────────
+
+  if (isLoading) {
+    return <SessionDetailSkeleton />;
+  }
+
+  // ── Error ────────────────────────────────────────────────────────────
+
+  if (error || !session) {
+    const isNotFound = error?.status === 404 || error?.detail === 'Session not found';
+    return (
+      <main className="min-h-screen bg-background">
+        <div className="mx-auto max-w-7xl px-4 py-8">
+          <div className="mb-6">
+            <Button asChild variant="ghost" size="sm">
+              <Link href="/sessions">
+                <ArrowLeft01Icon className="h-4 w-4 mr-1" />
+                Back to Sessions
+              </Link>
+            </Button>
+          </div>
+          <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-8 text-center">
+            {isNotFound ? (
+              <>
+                <p className="text-sm font-medium text-foreground">Session not found</p>
+                <p className="mt-2 text-xs text-muted-foreground">
+                  This session may have been deleted or the ID is incorrect.
+                </p>
+                <Button asChild variant="outline" size="sm" className="mt-4">
+                  <Link href="/sessions">Back to Sessions</Link>
+                </Button>
+              </>
+            ) : (
+              <>
+                <p className="text-sm font-medium text-destructive">Failed to load session</p>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {error?.detail ?? 'An unexpected error occurred.'}
+                </p>
+              </>
+            )}
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  // ── Loaded ───────────────────────────────────────────────────────────
+
+  const isActive = session.state === 'active';
+  const sid = shortId(session.id);
+
   return (
-    <main className="min-h-screen bg-background">
-      <div className="mx-auto max-w-7xl px-4 py-8">
-        <div className="mb-6 flex items-center gap-3">
-          <Button asChild variant="ghost" size="sm">
-            <Link href="/sessions">
-              <ArrowLeft01Icon className="h-4 w-4" />
-              Back to Sessions
-            </Link>
+    <main className="flex h-screen flex-col bg-background overflow-hidden">
+      {/* Header */}
+      <header className="flex shrink-0 items-center gap-3 border-b bg-background px-4 py-2">
+        <Button asChild variant="ghost" size="sm" className="shrink-0">
+          <Link href="/sessions">
+            <ArrowLeft01Icon className="h-4 w-4 mr-1" />
+            Sessions
+          </Link>
+        </Button>
+
+        <span className="font-mono text-sm font-medium text-foreground">
+          Session #{sid}
+        </span>
+
+        <Badge variant={stateBadgeVariant(session.state)} className="capitalize">
+          {session.state}
+        </Badge>
+
+        <span className="font-mono text-xs text-muted-foreground">
+          ${(session.cost_usd ?? 0).toFixed(4)}
+        </span>
+
+        <div className="ml-auto flex items-center gap-2">
+          {endError && (
+            <span className="text-xs text-destructive">{endError}</span>
+          )}
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={!isActive || endingSession}
+            onClick={handleEndSession}
+          >
+            {endingSession ? 'Ending…' : 'End Session'}
           </Button>
         </div>
-        <div className="rounded-lg border bg-muted/50 p-8 text-center">
-          <p className="text-sm font-medium text-foreground">
-            Session {sessionId?.slice(-8)}
-          </p>
-          <p className="mt-1 text-xs text-muted-foreground">
-            Session detail view coming soon.
-          </p>
+      </header>
+
+      {/* Ended session banner */}
+      {!isActive && (
+        <div className="shrink-0 border-b bg-muted/50 px-4 py-2 text-center text-xs text-muted-foreground">
+          This session has ended.{' '}
+          <Link href="/sessions" className="underline hover:text-foreground">
+            View history
+          </Link>
         </div>
+      )}
+
+      {/* Body — SplitPane for active, chat-only for ended */}
+      <div className="flex-1 overflow-hidden" style={{ height: 'calc(100vh - var(--header-height, 48px))' }}>
+        {isActive ? (
+          <SplitPane
+            left={<AgentChatPanel sessionId={session.id} className="h-full" />}
+            right={<AgentTerminal sessionId={session.id} className="h-full" />}
+            defaultSplit={45}
+            storageKey={`session-split-${session.id}`}
+            className="h-full"
+          />
+        ) : (
+          <AgentChatPanel
+            sessionId={session.id}
+            readOnly
+            initialMessages={historyMessages}
+            className="h-full"
+          />
+        )}
       </div>
     </main>
   );
diff --git a/web-ui/src/components/sessions/AgentChatPanel.tsx b/web-ui/src/components/sessions/AgentChatPanel.tsx
index 342fda88..181ec6f4 100644
--- a/web-ui/src/components/sessions/AgentChatPanel.tsx
+++ b/web-ui/src/components/sessions/AgentChatPanel.tsx
@@ -19,6 +19,10 @@ import type { ChatMessage, AgentChatStatus } from '@/types';
 interface AgentChatPanelProps {
   sessionId: string;
   className?: string;
+  /** When true, hides the input bar (e.g. for ended sessions). */
+  readOnly?: boolean;
+  /** Pre-loaded messages to display instead of live WebSocket messages. */
+  initialMessages?: ChatMessage[];
 }
 
 // ── Status dot ───────────────────────────────────────────────────────────
@@ -192,9 +196,17 @@ function MessageRow({
 
 // ── Main component ────────────────────────────────────────────────────────
 
-export function AgentChatPanel({ sessionId, className }: AgentChatPanelProps) {
-  const { state, sendMessage, interrupt } = useAgentChat(sessionId);
-  const { messages, status, costUsd } = state;
+export function AgentChatPanel({
+  sessionId,
+  className,
+  readOnly = false,
+  initialMessages,
+}: AgentChatPanelProps) {
+  const { state, sendMessage, interrupt } = useAgentChat(
+    readOnly ? null : sessionId
+  );
+  const { status, costUsd } = state;
+  const messages = initialMessages ?? state.messages;
 
   const [value, setValue] = useState('');
   const [autoScroll, setAutoScroll] = useState(true);
@@ -292,8 +304,8 @@ export function AgentChatPanel({ sessionId, className }: AgentChatPanelProps) {
         <div ref={bottomRef} />
       </div>
 
-      {/* Input bar */}
-      <div className="border-t bg-background px-4 py-3">
+      {/* Input bar — hidden in read-only mode */}
+      {!readOnly && <div className="border-t bg-background px-4 py-3">
         <div className="flex items-end gap-2">
           {isBusy && (
             <Button
@@ -328,7 +340,7 @@ export function AgentChatPanel({ sessionId, className }: AgentChatPanelProps) {
             <SentIcon className="h-4 w-4" />
           </Button>
         </div>
-      </div>
+      </div>}
     </div>
   );
 }
diff --git a/web-ui/src/lib/api.ts b/web-ui/src/lib/api.ts
index eaaaf4e6..b8be6b6c 100644
--- a/web-ui/src/lib/api.ts
+++ b/web-ui/src/lib/api.ts
@@ -47,6 +47,7 @@ import type {
   SessionState,
   SessionListResponse,
   SessionCreateRequest,
+  ChatMessage,
 } from '@/types';
 
 // FastAPI validation error format
@@ -653,6 +654,39 @@ export const sessionsApi = {
     return response.data;
   },
 
+  /**
+   * Get a single session by ID
+   */
+  getOne: async (id: string): Promise<Session> => {
+    const response = await api.get<Session>(
+      `/api/v2/sessions/${encodeURIComponent(id)}`
+    );
+    return response.data;
+  },
+
+  /**
+   * Get message history for a session (REST, for ended sessions)
+   */
+  getMessages: async (
+    id: string,
+    params?: { limit?: number; offset?: number }
+  ): Promise<ChatMessage[]> => {
+    const response = await api.get<
+      Array<{
+        id: string;
+        role: string;
+        content: string;
+        created_at: string;
+      }>
+    >(`/api/v2/sessions/${encodeURIComponent(id)}/messages`, { params });
+    return response.data.map((m) => ({
+      id: m.id,
+      role: m.role as ChatMessage['role'],
+      content: m.content,
+      createdAt: m.created_at,
+    }));
+  },
+
   /**
    * End (delete) a session
    */

From cd8e6dedded3e3e5b09322e898d3d9aad864e401 Mon Sep 17 00:00:00 2001
From: Test User <test@example.com>
Date: Wed, 1 Apr 2026 19:35:19 -0700
Subject: [PATCH 2/3] fix: address code review feedback on PR #520

- Remove 'use client' directive from test file (no-op in Jest)
- Remove redundant inline height style (flex-1 handles this)
- Use useRef flag for message history fetch (avoids dep array smell)
- Fix conditional JSX wrapper formatting in AgentChatPanel
- Add role='alert' to error message for a11y
---
 .../sessions/SessionDetailPage.test.tsx       |  8 +--
 web-ui/src/app/sessions/[id]/page.tsx         | 14 ++--
 .../components/sessions/AgentChatPanel.tsx    | 66 ++++++++++---------
 3 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/web-ui/src/__tests__/components/sessions/SessionDetailPage.test.tsx b/web-ui/src/__tests__/components/sessions/SessionDetailPage.test.tsx
index 58a5ab80..10123a13 100644
--- a/web-ui/src/__tests__/components/sessions/SessionDetailPage.test.tsx
+++ b/web-ui/src/__tests__/components/sessions/SessionDetailPage.test.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { useParams, useRouter } from 'next/navigation';
 import useSWR from 'swr';
@@ -74,11 +72,9 @@ const mockSessApiGetMessages = sessionsApi.getMessages as jest.MockedFunction<
 >;
 
 function swrResult(overrides: {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  data?: any;
+  data?: unknown;
   isLoading?: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  error?: any;
+  error?: unknown;
 }): ReturnType<typeof useSWR> {
   return {
     data: overrides.data ?? undefined,
diff --git a/web-ui/src/app/sessions/[id]/page.tsx b/web-ui/src/app/sessions/[id]/page.tsx
index 27b4eacf..bbb81297 100644
--- a/web-ui/src/app/sessions/[id]/page.tsx
+++ b/web-ui/src/app/sessions/[id]/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import Link from 'next/link';
 import useSWR from 'swr';
@@ -62,6 +62,7 @@ export default function SessionDetailPage() {
   const [endingSession, setEndingSession] = useState(false);
   const [endError, setEndError] = useState<string | null>(null);
   const [historyMessages, setHistoryMessages] = useState<ChatMessage[] | undefined>(undefined);
+  const messagesFetchedRef = useRef(false);
 
   // Set page title once session is loaded
   useEffect(() => {
@@ -70,15 +71,16 @@ export default function SessionDetailPage() {
     }
   }, [session]);
 
-  // Load message history for ended sessions via REST
+  // Load message history for ended sessions via REST (once per mount)
   useEffect(() => {
-    if (session?.state === 'ended' && historyMessages === undefined) {
+    if (session?.state === 'ended' && !messagesFetchedRef.current) {
+      messagesFetchedRef.current = true;
       sessionsApi
         .getMessages(session.id)
         .then(setHistoryMessages)
         .catch(() => setHistoryMessages([]));
     }
-  }, [session, historyMessages]);
+  }, [session]);
 
   const handleEndSession = useCallback(async () => {
     if (!session || session.state !== 'active') return;
@@ -170,7 +172,7 @@ export default function SessionDetailPage() {
 
         <div className="ml-auto flex items-center gap-2">
           {endError && (
-            <span className="text-xs text-destructive">{endError}</span>
+            <span className="text-xs text-destructive" role="alert">{endError}</span>
           )}
           <Button
             variant="outline"
@@ -194,7 +196,7 @@ export default function SessionDetailPage() {
       )}
 
       {/* Body — SplitPane for active, chat-only for ended */}
-      <div className="flex-1 overflow-hidden" style={{ height: 'calc(100vh - var(--header-height, 48px))' }}>
+      <div className="flex-1 overflow-hidden">
         {isActive ? (
           <SplitPane
             left={<AgentChatPanel sessionId={session.id} className="h-full" />}
diff --git a/web-ui/src/components/sessions/AgentChatPanel.tsx b/web-ui/src/components/sessions/AgentChatPanel.tsx
index 181ec6f4..3b1dd55a 100644
--- a/web-ui/src/components/sessions/AgentChatPanel.tsx
+++ b/web-ui/src/components/sessions/AgentChatPanel.tsx
@@ -305,42 +305,44 @@ export function AgentChatPanel({
       </div>
 
       {/* Input bar — hidden in read-only mode */}
-      {!readOnly && <div className="border-t bg-background px-4 py-3">
-        <div className="flex items-end gap-2">
-          {isBusy && (
+      {!readOnly && (
+        <div className="border-t bg-background px-4 py-3">
+          <div className="flex items-end gap-2">
+            {isBusy && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={interrupt}
+                aria-label="Interrupt agent"
+              >
+                <Cancel01Icon className="h-4 w-4 mr-1" />
+                Interrupt
+              </Button>
+            )}
+            <textarea
+              ref={textareaRef}
+              value={value}
+              onChange={handleInput}
+              onKeyDown={handleKeyDown}
+              disabled={isBusy}
+              placeholder="Message your agent... (Enter to send)"
+              rows={1}
+              aria-label="Message input"
+              style={{ maxHeight: '9rem' }}
+              className="flex-1 resize-none rounded-md border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+            />
             <Button
-              variant="outline"
-              size="sm"
-              onClick={interrupt}
-              aria-label="Interrupt agent"
+              size="icon"
+              onClick={handleSend}
+              disabled={isBusy || !value.trim()}
+              aria-label="Send message"
+              className="shrink-0"
             >
-              <Cancel01Icon className="h-4 w-4 mr-1" />
-              Interrupt
+              <SentIcon className="h-4 w-4" />
             </Button>
-          )}
-          <textarea
-            ref={textareaRef}
-            value={value}
-            onChange={handleInput}
-            onKeyDown={handleKeyDown}
-            disabled={isBusy}
-            placeholder="Message your agent... (Enter to send)"
-            rows={1}
-            aria-label="Message input"
-            style={{ maxHeight: '9rem' }}
-            className="flex-1 resize-none rounded-md border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-          />
-          <Button
-            size="icon"
-            onClick={handleSend}
-            disabled={isBusy || !value.trim()}
-            aria-label="Send message"
-            className="shrink-0"
-          >
-            <SentIcon className="h-4 w-4" />
-          </Button>
+          </div>
         </div>
-      </div>}
+      )}
     </div>
   );
 }

From e6e9acc0aa248d1ad67496771127fdf88993c8c1 Mon Sep 17 00:00:00 2001
From: Test User <test@example.com>
Date: Thu, 2 Apr 2026 08:59:25 -0700
Subject: [PATCH 3/3] refactor: split page into server wrapper + client
 component for dynamic title metadata

- page.tsx: server component exporting generateMetadata for dynamic page title
- SessionDetailClient.tsx: client component with all interactive logic
- Tests now import SessionDetailClient directly + test generateMetadata
- 20 tests passing
---
 .../sessions/SessionDetailPage.test.tsx       |  63 ++---
 .../app/sessions/[id]/SessionDetailClient.tsx | 214 +++++++++++++++++
 web-ui/src/app/sessions/[id]/page.tsx         | 224 +-----------------
 3 files changed, 257 insertions(+), 244 deletions(-)
 create mode 100644 web-ui/src/app/sessions/[id]/SessionDetailClient.tsx

diff --git a/web-ui/src/__tests__/components/sessions/SessionDetailPage.test.tsx b/web-ui/src/__tests__/components/sessions/SessionDetailPage.test.tsx
index 10123a13..a529059f 100644
--- a/web-ui/src/__tests__/components/sessions/SessionDetailPage.test.tsx
+++ b/web-ui/src/__tests__/components/sessions/SessionDetailPage.test.tsx
@@ -1,14 +1,13 @@
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { useParams, useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import useSWR from 'swr';
-import SessionDetailPage from '@/app/sessions/[id]/page';
+import { SessionDetailClient } from '@/app/sessions/[id]/SessionDetailClient';
 import { sessionsApi } from '@/lib/api';
 import type { Session } from '@/types';
 
 // ── Mocks ────────────────────────────────────────────────────────────────
 
 jest.mock('next/navigation', () => ({
-  useParams: jest.fn(),
   useRouter: jest.fn(),
 }));
 
@@ -63,7 +62,6 @@ jest.mock('@/components/sessions/SplitPane', () => ({
   ),
 }));
 
-const mockUseParams = useParams as jest.MockedFunction<typeof useParams>;
 const mockUseRouter = useRouter as jest.MockedFunction<typeof useRouter>;
 const mockUseSWR = useSWR as jest.MockedFunction<typeof useSWR>;
 const mockSessApiEnd = sessionsApi.end as jest.MockedFunction<typeof sessionsApi.end>;
@@ -115,16 +113,11 @@ function setupRouter() {
   } as ReturnType<typeof useRouter>);
 }
 
-function setupParams(id = SESSION_ID) {
-  mockUseParams.mockReturnValue({ id });
-}
-
 // ── Tests ────────────────────────────────────────────────────────────────
 
-describe('SessionDetailPage', () => {
+describe('SessionDetailClient', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    setupParams();
     setupRouter();
   });
 
@@ -132,7 +125,7 @@ describe('SessionDetailPage', () => {
 
   it('shows loading skeleton while session data is fetching', () => {
     mockUseSWR.mockReturnValue(swrResult({ isLoading: true }));
-    render(<SessionDetailPage />);
+    render(<SessionDetailClient sessionId={SESSION_ID} />);
     expect(screen.getByTestId('session-detail-skeleton')).toBeInTheDocument();
   });
 
@@ -141,28 +134,28 @@ describe('SessionDetailPage', () => {
   it('renders header with back link for active session', () => {
     const session = makeSession();
     mockUseSWR.mockReturnValue(swrResult({ data: session }));
-    render(<SessionDetailPage />);
+    render(<SessionDetailClient sessionId={SESSION_ID} />);
     expect(screen.getByRole('link', { name: /sessions/i })).toHaveAttribute('href', '/sessions');
   });
 
   it('renders session short ID in header', () => {
     const session = makeSession();
     mockUseSWR.mockReturnValue(swrResult({ data: session }));
-    render(<SessionDetailPage />);
+    render(<SessionDetailClient sessionId={SESSION_ID} />);
     expect(screen.getByText(new RegExp(SHORT_ID))).toBeInTheDocument();
   });
 
   it('renders active state badge for active session', () => {
     const session = makeSession({ state: 'active' });
     mockUseSWR.mockReturnValue(swrResult({ data: session }));
-    render(<SessionDetailPage />);
+    render(<SessionDetailClient sessionId={SESSION_ID} />);
     expect(screen.getByText('active')).toBeInTheDocument();
   });
 
   it('renders SplitPane with AgentChatPanel and AgentTerminal for active session', () => {
     const session = makeSession({ state: 'active' });
     mockUseSWR.mockReturnValue(swrResult({ data: session }));
-    render(<SessionDetailPage />);
+    render(<SessionDetailClient sessionId={SESSION_ID} />);
     expect(screen.getByTestId('split-pane')).toBeInTheDocument();
     expect(screen.getByTestId('agent-chat-panel')).toBeInTheDocument();
     expect(screen.getByTestId('agent-terminal')).toBeInTheDocument();
@@ -171,7 +164,7 @@ describe('SessionDetailPage', () => {
   it('passes session-specific storageKey to SplitPane', () => {
     const session = makeSession();
     mockUseSWR.mockReturnValue(swrResult({ data: session }));
-    render(<SessionDetailPage />);
+    render(<SessionDetailClient sessionId={SESSION_ID} />);
     expect(screen.getByTestId('split-pane')).toHaveAttribute(
       'data-storage-key',
       `session-split-${SESSION_ID}`
@@ -181,7 +174,7 @@ describe('SessionDetailPage', () => {
   it('passes sessionId to AgentChatPanel and AgentTerminal', () => {
     const session = makeSession();
     mockUseSWR.mockReturnValue(swrResult({ data: session }));
-    render(<SessionDetailPage />);
+    render(<SessionDetailClient sessionId={SESSION_ID} />);
     expect(screen.getByTestId('agent-chat-panel')).toHaveAttribute('data-session-id', SESSION_ID);
     expect(screen.getByTestId('agent-terminal')).toHaveAttribute('data-session-id', SESSION_ID);
   });
@@ -189,7 +182,7 @@ describe('SessionDetailPage', () => {
   it('renders input bar for active session (not read-only)', () => {
     const session = makeSession({ state: 'active' });
     mockUseSWR.mockReturnValue(swrResult({ data: session }));
-    render(<SessionDetailPage />);
+    render(<SessionDetailClient sessionId={SESSION_ID} />);
     expect(screen.getByTestId('agent-chat-panel')).toHaveAttribute('data-read-only', 'false');
   });
 
@@ -198,7 +191,7 @@ describe('SessionDetailPage', () => {
   it('renders enabled End Session button for active session', () => {
     const session = makeSession({ state: 'active' });
     mockUseSWR.mockReturnValue(swrResult({ data: session }));
-    render(<SessionDetailPage />);
+    render(<SessionDetailClient sessionId={SESSION_ID} />);
     const btn = screen.getByRole('button', { name: /end session/i });
     expect(btn).toBeEnabled();
   });
@@ -207,7 +200,7 @@ describe('SessionDetailPage', () => {
     mockSessApiEnd.mockResolvedValue(undefined);
     const session = makeSession({ state: 'active' });
     mockUseSWR.mockReturnValue(swrResult({ data: session }));
-    render(<SessionDetailPage />);
+    render(<SessionDetailClient sessionId={SESSION_ID} />);
     fireEvent.click(screen.getByRole('button', { name: /end session/i }));
     await waitFor(() => {
       expect(mockSessApiEnd).toHaveBeenCalledWith(SESSION_ID);
@@ -219,7 +212,7 @@ describe('SessionDetailPage', () => {
     mockSessApiEnd.mockRejectedValue(new Error('Network error'));
     const session = makeSession({ state: 'active' });
     mockUseSWR.mockReturnValue(swrResult({ data: session }));
-    render(<SessionDetailPage />);
+    render(<SessionDetailClient sessionId={SESSION_ID} />);
     fireEvent.click(screen.getByRole('button', { name: /end session/i }));
     await waitFor(() => {
       expect(mockRouterPush).not.toHaveBeenCalled();
@@ -234,7 +227,7 @@ describe('SessionDetailPage', () => {
     const session = makeSession({ state: 'ended', ended_at: '2026-04-01T11:00:00Z' });
     mockUseSWR.mockReturnValue(swrResult({ data: session }));
     mockSessApiGetMessages.mockResolvedValue([]);
-    render(<SessionDetailPage />);
+    render(<SessionDetailClient sessionId={SESSION_ID} />);
     // The badge shows the state and the banner also mentions 'ended'
     expect(screen.getAllByText(/ended/i).length).toBeGreaterThanOrEqual(1);
   });
@@ -243,7 +236,7 @@ describe('SessionDetailPage', () => {
     const session = makeSession({ state: 'ended', ended_at: '2026-04-01T11:00:00Z' });
     mockUseSWR.mockReturnValue(swrResult({ data: session }));
     mockSessApiGetMessages.mockResolvedValue([]);
-    render(<SessionDetailPage />);
+    render(<SessionDetailClient sessionId={SESSION_ID} />);
     expect(screen.getByText(/this session has ended/i)).toBeInTheDocument();
   });
 
@@ -251,7 +244,7 @@ describe('SessionDetailPage', () => {
     const session = makeSession({ state: 'ended', ended_at: '2026-04-01T11:00:00Z' });
     mockUseSWR.mockReturnValue(swrResult({ data: session }));
     mockSessApiGetMessages.mockResolvedValue([]);
-    render(<SessionDetailPage />);
+    render(<SessionDetailClient sessionId={SESSION_ID} />);
     expect(screen.queryByTestId('agent-terminal')).not.toBeInTheDocument();
   });
 
@@ -259,7 +252,7 @@ describe('SessionDetailPage', () => {
     const session = makeSession({ state: 'ended', ended_at: '2026-04-01T11:00:00Z' });
     mockUseSWR.mockReturnValue(swrResult({ data: session }));
     mockSessApiGetMessages.mockResolvedValue([]);
-    render(<SessionDetailPage />);
+    render(<SessionDetailClient sessionId={SESSION_ID} />);
     expect(screen.getByTestId('agent-chat-panel')).toHaveAttribute('data-read-only', 'true');
   });
 
@@ -267,7 +260,7 @@ describe('SessionDetailPage', () => {
     const session = makeSession({ state: 'ended', ended_at: '2026-04-01T11:00:00Z' });
     mockUseSWR.mockReturnValue(swrResult({ data: session }));
     mockSessApiGetMessages.mockResolvedValue([]);
-    render(<SessionDetailPage />);
+    render(<SessionDetailClient sessionId={SESSION_ID} />);
     const btn = screen.getByRole('button', { name: /end session/i });
     expect(btn).toBeDisabled();
   });
@@ -278,7 +271,7 @@ describe('SessionDetailPage', () => {
     mockUseSWR.mockReturnValue(
       swrResult({ error: { status: 404, detail: 'Session not found' } })
     );
-    render(<SessionDetailPage />);
+    render(<SessionDetailClient sessionId={SESSION_ID} />);
     expect(screen.getByText(/session not found/i)).toBeInTheDocument();
     // Multiple back links exist (header + error body) — all point to /sessions
     const links = screen.getAllByRole('link', { name: /back to sessions/i });
@@ -290,16 +283,24 @@ describe('SessionDetailPage', () => {
     mockUseSWR.mockReturnValue(
       swrResult({ error: { status: 500, detail: 'Internal server error' } })
     );
-    render(<SessionDetailPage />);
+    render(<SessionDetailClient sessionId={SESSION_ID} />);
     expect(screen.getByText(/failed to load session/i)).toBeInTheDocument();
   });
 
   // ── Page title ───────────────────────────────────────────────────────
 
-  it('includes session short ID in document title', () => {
+  it('includes session short ID in the header', () => {
     const session = makeSession();
     mockUseSWR.mockReturnValue(swrResult({ data: session }));
-    render(<SessionDetailPage />);
-    expect(document.title).toContain(SHORT_ID);
+    render(<SessionDetailClient sessionId={SESSION_ID} />);
+    // Short ID appears in the header "Session #<shortId>" text
+    expect(screen.getByText(new RegExp(SHORT_ID))).toBeInTheDocument();
+  });
+
+  it('generateMetadata returns title with session short ID', async () => {
+    // Import and test generateMetadata directly
+    const { generateMetadata } = await import('@/app/sessions/[id]/page');
+    const meta = await generateMetadata({ params: Promise.resolve({ id: SESSION_ID }) });
+    expect((meta as { title: string }).title).toContain(SHORT_ID);
   });
 });
diff --git a/web-ui/src/app/sessions/[id]/SessionDetailClient.tsx b/web-ui/src/app/sessions/[id]/SessionDetailClient.tsx
new file mode 100644
index 00000000..bf1173cd
--- /dev/null
+++ b/web-ui/src/app/sessions/[id]/SessionDetailClient.tsx
@@ -0,0 +1,214 @@
+'use client';
+
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import useSWR from 'swr';
+import { ArrowLeft01Icon } from '@hugeicons/react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { AgentChatPanel } from '@/components/sessions/AgentChatPanel';
+import { AgentTerminal } from '@/components/sessions/AgentTerminal';
+import { SplitPane } from '@/components/sessions/SplitPane';
+import { sessionsApi } from '@/lib/api';
+import type { ChatMessage, Session } from '@/types';
+
+// ── Helpers ──────────────────────────────────────────────────────────────
+
+function shortId(id: string): string {
+  return id.slice(-8);
+}
+
+function stateBadgeVariant(state: Session['state']): 'default' | 'secondary' | 'outline' {
+  if (state === 'active') return 'default';
+  if (state === 'ended') return 'secondary';
+  return 'outline';
+}
+
+// ── Loading skeleton ──────────────────────────────────────────────────────
+
+function SessionDetailSkeleton() {
+  return (
+    <div data-testid="session-detail-skeleton" className="flex h-screen flex-col">
+      {/* Header skeleton */}
+      <div className="flex items-center gap-4 border-b px-4 py-3">
+        <div className="h-8 w-24 animate-pulse rounded bg-muted" />
+        <div className="h-5 w-32 animate-pulse rounded bg-muted" />
+        <div className="ml-auto h-8 w-28 animate-pulse rounded bg-muted" />
+      </div>
+      {/* Body skeleton */}
+      <div className="flex flex-1 gap-0">
+        <div className="h-full flex-1 animate-pulse bg-muted/50" />
+        <div className="w-px bg-border" />
+        <div className="h-full flex-1 animate-pulse bg-muted/50" />
+      </div>
+    </div>
+  );
+}
+
+// ── Main component ────────────────────────────────────────────────────────
+
+interface SessionDetailClientProps {
+  sessionId: string;
+}
+
+export function SessionDetailClient({ sessionId }: SessionDetailClientProps) {
+  const router = useRouter();
+
+  const { data: session, isLoading, error } = useSWR<Session>(
+    sessionId ? `/api/v2/sessions/${sessionId}` : null,
+    () => sessionsApi.getOne(sessionId),
+    { refreshInterval: (data) => (data?.state === 'active' ? 5000 : 0) }
+  );
+
+  const [endingSession, setEndingSession] = useState(false);
+  const [endError, setEndError] = useState<string | null>(null);
+  const [historyMessages, setHistoryMessages] = useState<ChatMessage[] | undefined>(undefined);
+  const messagesFetchedRef = useRef(false);
+
+  // Load message history for ended sessions via REST (once per mount)
+  useEffect(() => {
+    if (session?.state === 'ended' && !messagesFetchedRef.current) {
+      messagesFetchedRef.current = true;
+      sessionsApi
+        .getMessages(session.id)
+        .then(setHistoryMessages)
+        .catch(() => setHistoryMessages([]));
+    }
+  }, [session]);
+
+  const handleEndSession = useCallback(async () => {
+    if (!session || session.state !== 'active') return;
+    setEndingSession(true);
+    setEndError(null);
+    try {
+      await sessionsApi.end(session.id);
+      router.push('/sessions');
+    } catch {
+      setEndError('Failed to end session. Please try again.');
+    } finally {
+      setEndingSession(false);
+    }
+  }, [session, router]);
+
+  // ── Loading ──────────────────────────────────────────────────────────
+
+  if (isLoading) {
+    return <SessionDetailSkeleton />;
+  }
+
+  // ── Error ────────────────────────────────────────────────────────────
+
+  if (error || !session) {
+    const isNotFound = error?.status === 404 || error?.detail === 'Session not found';
+    return (
+      <main className="min-h-screen bg-background">
+        <div className="mx-auto max-w-7xl px-4 py-8">
+          <div className="mb-6">
+            <Button asChild variant="ghost" size="sm">
+              <Link href="/sessions">
+                <ArrowLeft01Icon className="h-4 w-4 mr-1" />
+                Back to Sessions
+              </Link>
+            </Button>
+          </div>
+          <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-8 text-center">
+            {isNotFound ? (
+              <>
+                <p className="text-sm font-medium text-foreground">Session not found</p>
+                <p className="mt-2 text-xs text-muted-foreground">
+                  This session may have been deleted or the ID is incorrect.
+                </p>
+                <Button asChild variant="outline" size="sm" className="mt-4">
+                  <Link href="/sessions">Back to Sessions</Link>
+                </Button>
+              </>
+            ) : (
+              <>
+                <p className="text-sm font-medium text-destructive">Failed to load session</p>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {error?.detail ?? 'An unexpected error occurred.'}
+                </p>
+              </>
+            )}
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  // ── Loaded ───────────────────────────────────────────────────────────
+
+  const isActive = session.state === 'active';
+  const sid = shortId(session.id);
+
+  return (
+    <main className="flex h-screen flex-col bg-background overflow-hidden">
+      {/* Header */}
+      <header className="flex shrink-0 items-center gap-3 border-b bg-background px-4 py-2">
+        <Button asChild variant="ghost" size="sm" className="shrink-0">
+          <Link href="/sessions">
+            <ArrowLeft01Icon className="h-4 w-4 mr-1" />
+            Sessions
+          </Link>
+        </Button>
+
+        <span className="font-mono text-sm font-medium text-foreground">
+          Session #{sid}
+        </span>
+
+        <Badge variant={stateBadgeVariant(session.state)} className="capitalize">
+          {session.state}
+        </Badge>
+
+        <span className="font-mono text-xs text-muted-foreground">
+          ${(session.cost_usd ?? 0).toFixed(4)}
+        </span>
+
+        <div className="ml-auto flex items-center gap-2">
+          {endError && (
+            <span className="text-xs text-destructive" role="alert">{endError}</span>
+          )}
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={!isActive || endingSession}
+            onClick={handleEndSession}
+          >
+            {endingSession ? 'Ending…' : 'End Session'}
+          </Button>
+        </div>
+      </header>
+
+      {/* Ended session banner */}
+      {!isActive && (
+        <div className="shrink-0 border-b bg-muted/50 px-4 py-2 text-center text-xs text-muted-foreground">
+          This session has ended.{' '}
+          <Link href="/sessions" className="underline hover:text-foreground">
+            View history
+          </Link>
+        </div>
+      )}
+
+      {/* Body — SplitPane for active, chat-only for ended */}
+      <div className="flex-1 overflow-hidden">
+        {isActive ? (
+          <SplitPane
+            left={<AgentChatPanel sessionId={session.id} className="h-full" />}
+            right={<AgentTerminal sessionId={session.id} className="h-full" />}
+            defaultSplit={45}
+            storageKey={`session-split-${session.id}`}
+            className="h-full"
+          />
+        ) : (
+          <AgentChatPanel
+            sessionId={session.id}
+            readOnly
+            initialMessages={historyMessages}
+            className="h-full"
+          />
+        )}
+      </div>
+    </main>
+  );
+}
diff --git a/web-ui/src/app/sessions/[id]/page.tsx b/web-ui/src/app/sessions/[id]/page.tsx
index bbb81297..7aed0045 100644
--- a/web-ui/src/app/sessions/[id]/page.tsx
+++ b/web-ui/src/app/sessions/[id]/page.tsx
@@ -1,219 +1,17 @@
-'use client';
+import type { Metadata } from 'next';
+import { SessionDetailClient } from './SessionDetailClient';
 
-import { useEffect, useRef, useState, useCallback } from 'react';
-import { useParams, useRouter } from 'next/navigation';
-import Link from 'next/link';
-import useSWR from 'swr';
-import { ArrowLeft01Icon } from '@hugeicons/react';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { AgentChatPanel } from '@/components/sessions/AgentChatPanel';
-import { AgentTerminal } from '@/components/sessions/AgentTerminal';
-import { SplitPane } from '@/components/sessions/SplitPane';
-import { sessionsApi } from '@/lib/api';
-import type { ChatMessage, Session } from '@/types';
-
-// ── Helpers ──────────────────────────────────────────────────────────────
-
-function shortId(id: string): string {
-  return id.slice(-8);
-}
-
-function stateBadgeVariant(state: Session['state']): 'default' | 'secondary' | 'outline' {
-  if (state === 'active') return 'default';
-  if (state === 'ended') return 'secondary';
-  return 'outline';
+interface PageProps {
+  params: Promise<{ id: string }>;
 }
 
-// ── Loading skeleton ──────────────────────────────────────────────────────
-
-function SessionDetailSkeleton() {
-  return (
-    <div data-testid="session-detail-skeleton" className="flex h-screen flex-col">
-      {/* Header skeleton */}
-      <div className="flex items-center gap-4 border-b px-4 py-3">
-        <div className="h-8 w-24 animate-pulse rounded bg-muted" />
-        <div className="h-5 w-32 animate-pulse rounded bg-muted" />
-        <div className="ml-auto h-8 w-28 animate-pulse rounded bg-muted" />
-      </div>
-      {/* Body skeleton */}
-      <div className="flex flex-1 gap-0">
-        <div className="h-full flex-1 animate-pulse bg-muted/50" />
-        <div className="w-px bg-border" />
-        <div className="h-full flex-1 animate-pulse bg-muted/50" />
-      </div>
-    </div>
-  );
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { id } = await params;
+  const shortId = id.slice(-8);
+  return { title: `Session #${shortId} — CodeFRAME` };
 }
 
-// ── Main component ────────────────────────────────────────────────────────
-
-export default function SessionDetailPage() {
-  const params = useParams<{ id: string }>();
-  const router = useRouter();
-  const sessionId = params.id;
-
-  const { data: session, isLoading, error } = useSWR<Session>(
-    sessionId ? `/api/v2/sessions/${sessionId}` : null,
-    () => sessionsApi.getOne(sessionId),
-    { refreshInterval: (data) => (data?.state === 'active' ? 5000 : 0) }
-  );
-
-  const [endingSession, setEndingSession] = useState(false);
-  const [endError, setEndError] = useState<string | null>(null);
-  const [historyMessages, setHistoryMessages] = useState<ChatMessage[] | undefined>(undefined);
-  const messagesFetchedRef = useRef(false);
-
-  // Set page title once session is loaded
-  useEffect(() => {
-    if (session) {
-      document.title = `Session #${shortId(session.id)} — CodeFRAME`;
-    }
-  }, [session]);
-
-  // Load message history for ended sessions via REST (once per mount)
-  useEffect(() => {
-    if (session?.state === 'ended' && !messagesFetchedRef.current) {
-      messagesFetchedRef.current = true;
-      sessionsApi
-        .getMessages(session.id)
-        .then(setHistoryMessages)
-        .catch(() => setHistoryMessages([]));
-    }
-  }, [session]);
-
-  const handleEndSession = useCallback(async () => {
-    if (!session || session.state !== 'active') return;
-    setEndingSession(true);
-    setEndError(null);
-    try {
-      await sessionsApi.end(session.id);
-      router.push('/sessions');
-    } catch {
-      setEndError('Failed to end session. Please try again.');
-    } finally {
-      setEndingSession(false);
-    }
-  }, [session, router]);
-
-  // ── Loading ──────────────────────────────────────────────────────────
-
-  if (isLoading) {
-    return <SessionDetailSkeleton />;
-  }
-
-  // ── Error ────────────────────────────────────────────────────────────
-
-  if (error || !session) {
-    const isNotFound = error?.status === 404 || error?.detail === 'Session not found';
-    return (
-      <main className="min-h-screen bg-background">
-        <div className="mx-auto max-w-7xl px-4 py-8">
-          <div className="mb-6">
-            <Button asChild variant="ghost" size="sm">
-              <Link href="/sessions">
-                <ArrowLeft01Icon className="h-4 w-4 mr-1" />
-                Back to Sessions
-              </Link>
-            </Button>
-          </div>
-          <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-8 text-center">
-            {isNotFound ? (
-              <>
-                <p className="text-sm font-medium text-foreground">Session not found</p>
-                <p className="mt-2 text-xs text-muted-foreground">
-                  This session may have been deleted or the ID is incorrect.
-                </p>
-                <Button asChild variant="outline" size="sm" className="mt-4">
-                  <Link href="/sessions">Back to Sessions</Link>
-                </Button>
-              </>
-            ) : (
-              <>
-                <p className="text-sm font-medium text-destructive">Failed to load session</p>
-                <p className="mt-1 text-xs text-muted-foreground">
-                  {error?.detail ?? 'An unexpected error occurred.'}
-                </p>
-              </>
-            )}
-          </div>
-        </div>
-      </main>
-    );
-  }
-
-  // ── Loaded ───────────────────────────────────────────────────────────
-
-  const isActive = session.state === 'active';
-  const sid = shortId(session.id);
-
-  return (
-    <main className="flex h-screen flex-col bg-background overflow-hidden">
-      {/* Header */}
-      <header className="flex shrink-0 items-center gap-3 border-b bg-background px-4 py-2">
-        <Button asChild variant="ghost" size="sm" className="shrink-0">
-          <Link href="/sessions">
-            <ArrowLeft01Icon className="h-4 w-4 mr-1" />
-            Sessions
-          </Link>
-        </Button>
-
-        <span className="font-mono text-sm font-medium text-foreground">
-          Session #{sid}
-        </span>
-
-        <Badge variant={stateBadgeVariant(session.state)} className="capitalize">
-          {session.state}
-        </Badge>
-
-        <span className="font-mono text-xs text-muted-foreground">
-          ${(session.cost_usd ?? 0).toFixed(4)}
-        </span>
-
-        <div className="ml-auto flex items-center gap-2">
-          {endError && (
-            <span className="text-xs text-destructive" role="alert">{endError}</span>
-          )}
-          <Button
-            variant="outline"
-            size="sm"
-            disabled={!isActive || endingSession}
-            onClick={handleEndSession}
-          >
-            {endingSession ? 'Ending…' : 'End Session'}
-          </Button>
-        </div>
-      </header>
-
-      {/* Ended session banner */}
-      {!isActive && (
-        <div className="shrink-0 border-b bg-muted/50 px-4 py-2 text-center text-xs text-muted-foreground">
-          This session has ended.{' '}
-          <Link href="/sessions" className="underline hover:text-foreground">
-            View history
-          </Link>
-        </div>
-      )}
-
-      {/* Body — SplitPane for active, chat-only for ended */}
-      <div className="flex-1 overflow-hidden">
-        {isActive ? (
-          <SplitPane
-            left={<AgentChatPanel sessionId={session.id} className="h-full" />}
-            right={<AgentTerminal sessionId={session.id} className="h-full" />}
-            defaultSplit={45}
-            storageKey={`session-split-${session.id}`}
-            className="h-full"
-          />
-        ) : (
-          <AgentChatPanel
-            sessionId={session.id}
-            readOnly
-            initialMessages={historyMessages}
-            className="h-full"
-          />
-        )}
-      </div>
-    </main>
-  );
+export default async function SessionDetailPage({ params }: PageProps) {
+  const { id } = await params;
+  return <SessionDetailClient sessionId={id} />;
 }