From 2251a69f1a1227c05f5a68e6a3360315f6b3f50c Mon Sep 17 00:00:00 2001
From: ejclaw <phj1081@gmail.com>
Date: Tue, 28 Apr 2026 13:49:43 +0900
Subject: [PATCH] Extract dashboard RoomCardV2 component

---
 apps/dashboard/src/App.tsx             | 506 +-------------
 apps/dashboard/src/RoomCardV2.test.tsx | 111 ++++
 apps/dashboard/src/RoomCardV2.tsx      | 869 +++++++++++++++++++++++++
 3 files changed, 988 insertions(+), 498 deletions(-)
 create mode 100644 apps/dashboard/src/RoomCardV2.test.tsx
 create mode 100644 apps/dashboard/src/RoomCardV2.tsx

diff --git a/apps/dashboard/src/App.tsx b/apps/dashboard/src/App.tsx
index c5e687f..84ee950 100644
--- a/apps/dashboard/src/App.tsx
+++ b/apps/dashboard/src/App.tsx
@@ -1,5 +1,4 @@
-import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
-import { Send } from 'lucide-react';
+import { useEffect, useMemo, useState, type ReactNode } from 'react';
 
 import {
   type ClaudeAccountSummary,
@@ -55,11 +54,8 @@ import {
   type DashboardFreshness,
   type DashboardView,
 } from './DashboardNav';
-import {
-  buildRoomThreadEntries,
-  isInternalProtocolPayload,
-  isWatcherRoomMessage,
-} from './roomThread';
+import { isInternalProtocolPayload } from './roomThread';
+import { RoomCardV2, type RoomEntryWithService } from './RoomCardV2';
 import { ParsedBody } from './ParsedBody';
 import { redactSecretsForPreview } from './redaction';
 import './styles.css';
@@ -1742,54 +1738,6 @@ function HealthPanel({
   );
 }
 
-function RoomMessageForm({
-  busy,
-  onChange,
-  onSubmit,
-  t,
-  value,
-}: {
-  busy: boolean;
-  onChange: (value: string) => void;
-  onSubmit: () => void;
-  t: Messages;
-  value: string;
-}) {
-  return (
-    <form
-      className="room-compose"
-      onSubmit={(event) => {
-        event.preventDefault();
-        onSubmit();
-      }}
-    >
-      <textarea
-        aria-label={t.rooms.message}
-        maxLength={8000}
-        onChange={(event) => onChange(event.target.value)}
-        onKeyDown={(event) => {
-          if (event.key !== 'Enter') return;
-          if (event.shiftKey || event.nativeEvent.isComposing) return;
-          if (busy || !value.trim()) return;
-          event.preventDefault();
-          onSubmit();
-        }}
-        placeholder={t.rooms.messagePlaceholder}
-        rows={1}
-        value={value}
-      />
-      <button
-        aria-label={busy ? t.rooms.sending : t.rooms.send}
-        disabled={busy || !value.trim()}
-        title={busy ? t.rooms.sending : t.rooms.send}
-        type="submit"
-      >
-        <Send size={16} strokeWidth={2} aria-hidden />
-      </button>
-    </form>
-  );
-}
-
 type RoomFilter = 'all' | 'processing' | 'waiting' | 'inactive';
 type RoomSort = 'recent' | 'name' | 'queue';
 
@@ -1811,18 +1759,6 @@ function roomSortLabel(s: RoomSort, t: Messages): string {
   return t.rooms.sortName;
 }
 
-interface RoomEntryWithService {
-  jid: string;
-  name: string;
-  folder: string;
-  agentType: string;
-  status: 'processing' | 'waiting' | 'inactive';
-  elapsedMs: number | null;
-  pendingMessages: boolean;
-  pendingTasks: number;
-  serviceId: string;
-}
-
 function RoomBoardV2({
   inbox,
   onSendRoomMessage,
@@ -2027,6 +1963,9 @@ function RoomBoardV2({
                 draft={drafts[selectedEntry.jid] ?? ''}
                 entry={selectedEntry}
                 expanded={true}
+                formatDate={formatDate}
+                formatDuration={formatDuration}
+                formatLiveElapsed={formatLiveElapsed}
                 inboxItems={inbox.filter(
                   (item) => item.roomJid === selectedEntry.jid,
                 )}
@@ -2037,6 +1976,8 @@ function RoomBoardV2({
                 onToggle={() => {}}
                 pendingMessages={pendingMessages[selectedEntry.jid] ?? []}
                 pinned={true}
+                senderRoleClass={senderRoleClass}
+                statusLabel={statusLabel}
                 t={t}
               />
             ) : (
@@ -2049,437 +1990,6 @@ function RoomBoardV2({
   );
 }
 
-function RoomCardV2({
-  activity,
-  activityLoading,
-  busy,
-  draft,
-  entry,
-  expanded,
-  inboxItems,
-  locale,
-  onDraftChange,
-  onSendMessage,
-  onToggle,
-  pendingMessages = [],
-  pinned = false,
-  t,
-}: {
-  activity: DashboardRoomActivity | undefined;
-  activityLoading: boolean;
-  busy: boolean;
-  draft: string;
-  entry: RoomEntryWithService;
-  expanded: boolean;
-  inboxItems: InboxItem[];
-  locale: Locale;
-  onDraftChange: (value: string) => void;
-  onSendMessage: () => void;
-  onToggle: () => void;
-  pendingMessages?: Array<DashboardRoomActivity['messages'][number]>;
-  pinned?: boolean;
-  t: Messages;
-}) {
-  const task = activity?.pairedTask ?? null;
-  const turn = task?.currentTurn ?? null;
-  const outputs = task?.outputs ?? [];
-  const latestOutput = outputs.at(-1) ?? null;
-  const messages = activity?.messages ?? [];
-  const isProcessing = entry.status === 'processing';
-  const liveTurnStart =
-    turn && turn.completedAt === null
-      ? new Date(turn.createdAt).getTime()
-      : null;
-  const [tick, setTick] = useState(() => Date.now());
-  useEffect(() => {
-    if (!isProcessing || liveTurnStart === null) return;
-    const id = window.setInterval(() => setTick(Date.now()), 1000);
-    return () => window.clearInterval(id);
-  }, [isProcessing, liveTurnStart]);
-  const liveElapsedMs =
-    liveTurnStart === null ? null : Math.max(0, tick - liveTurnStart);
-
-  // Discord live-edit messages are stored with this 3-character invisible
-  // prefix (TASK_STATUS_MESSAGE_PREFIX). When paired_turns.progress_text
-  // hasn't been written yet (codex runner timing), fall back to scanning
-  // the messages table for the most recent prefixed message — but only
-  // ones from the current turn (timestamp >= turn.createdAt) and matching
-  // the current turn's role to avoid showing a stale reviewer status while
-  // owner is now speaking.
-  const TASK_STATUS_PREFIX = '⁣⁣⁣';
-  const liveStatusFallback = (() => {
-    if (!isProcessing) return null;
-    if (!turn) return null;
-    if (turn.progressText && turn.progressText.trim()) return null;
-    const turnStartMs = turn.createdAt ? new Date(turn.createdAt).getTime() : 0;
-    const turnRole = senderRoleClass(turn.role); // role-owner / -reviewer / -arbiter / -human
-    for (let i = messages.length - 1; i >= 0; i--) {
-      const m = messages[i];
-      if (!m.content.startsWith(TASK_STATUS_PREFIX)) continue;
-      const ts = m.timestamp ? new Date(m.timestamp).getTime() : 0;
-      if (ts < turnStartMs) continue;
-      const senderRole = senderRoleClass(m.senderName);
-      if (senderRole !== turnRole) continue;
-      const body = m.content.slice(TASK_STATUS_PREFIX.length);
-      const stripped = body.replace(/\n\n\d+[초smhMSH]?$/, '').trim();
-      return stripped || null;
-    }
-    return null;
-  })();
-  const liveProgressDisplay =
-    turn?.progressText && turn.progressText.trim()
-      ? turn.progressText
-      : liveStatusFallback;
-
-  const messagesLen = messages.length;
-  const outputsLen = outputs.length;
-  const pendingLen = pendingMessages.length;
-  const wasNearBottomRef = useRef(true);
-  useEffect(() => {
-    const detail = document.querySelector(
-      '.rooms-detail',
-    ) as HTMLElement | null;
-    if (!detail) return;
-    if (!wasNearBottomRef.current) return;
-    const run = () => {
-      detail.scrollTop = detail.scrollHeight;
-    };
-    requestAnimationFrame(() => requestAnimationFrame(run));
-  }, [entry.jid, messagesLen, outputsLen, pendingLen]);
-  useEffect(() => {
-    const detail = document.querySelector(
-      '.rooms-detail',
-    ) as HTMLElement | null;
-    if (!detail) return;
-    const onScroll = () => {
-      const distance =
-        detail.scrollHeight - detail.scrollTop - detail.clientHeight;
-      wasNearBottomRef.current = distance < 80;
-    };
-    detail.addEventListener('scroll', onScroll, { passive: true });
-    return () => detail.removeEventListener('scroll', onScroll);
-  }, [entry.jid]);
-
-  const queueChips: string[] = [];
-  if (entry.pendingTasks > 0)
-    queueChips.push(`${entry.pendingTasks} ${t.rooms.tasks}`);
-  if (entry.pendingMessages) queueChips.push(t.rooms.queueWaitingMessages);
-  const lastUpdated = turn?.updatedAt ?? task?.updatedAt ?? null;
-  const lastWatcher =
-    [...messages].reverse().find(isWatcherRoomMessage) ?? null;
-  const watcherCount = messages.filter(isWatcherRoomMessage).length;
-  const watcherMessages = messages.filter(isWatcherRoomMessage);
-  const agentMessages = buildRoomThreadEntries({
-    messages,
-    outputs,
-    pendingMessages,
-  });
-
-  return (
-    <article
-      aria-expanded={pinned ? undefined : expanded}
-      className={`room-card-v2 status-${entry.status}${expanded ? ' is-expanded' : ''}${pinned ? ' is-pinned' : ''}`}
-      onClick={pinned ? undefined : onToggle}
-      onKeyDown={
-        pinned
-          ? undefined
-          : (e) => {
-              if (e.target !== e.currentTarget) return;
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                onToggle();
-              }
-            }
-      }
-      role={pinned ? undefined : 'button'}
-      tabIndex={pinned ? undefined : 0}
-    >
-      <div className="room-card-head">
-        <span className={`room-pulse pulse-${entry.status}`}>
-          {isProcessing ? <span className="pulse-dot" /> : null}
-        </span>
-        <span className="room-title-block">
-          <strong>{entry.name}</strong>
-          <span className="room-sub">
-            <em>{entry.agentType}</em>
-            {inboxItems.length > 0 ? (
-              <span className="room-inbox-badges" aria-label={t.panels.inbox}>
-                {inboxItems.slice(0, 3).map((item) => (
-                  <span
-                    className={`room-inbox-pip sev-${item.severity}`}
-                    key={item.id}
-                    title={t.inbox.kinds[item.kind]}
-                  >
-                    {t.inbox.kinds[item.kind]}
-                  </span>
-                ))}
-              </span>
-            ) : null}
-          </span>
-        </span>
-        {!isProcessing ? (
-          <span className={`room-status pill pill-${entry.status}`}>
-            {statusLabel(entry.status, t)}
-          </span>
-        ) : (
-          <span />
-        )}
-        {!pinned ? (
-          <span className="room-toggle" aria-hidden>
-            {expanded ? '▾' : '▸'}
-          </span>
-        ) : null}
-      </div>
-
-      {turn && !isProcessing ? (
-        <div className="room-current-turn">
-          <span>
-            <strong className={senderRoleClass(turn.role)}>{turn.role}</strong>
-            <em>{turn.intentKind}</em>
-            {turn.attemptNo > 1 ? (
-              <small>
-                {t.rooms.attempt} {turn.attemptNo}
-              </small>
-            ) : null}
-          </span>
-          {task && task.roundTripCount > 0 ? (
-            <small>
-              · {t.rooms.round} {task.roundTripCount}
-            </small>
-          ) : null}
-          {lastUpdated ? (
-            <small style={{ marginLeft: 'auto' }}>
-              {formatDate(lastUpdated, locale)}
-            </small>
-          ) : null}
-        </div>
-      ) : null}
-
-      {queueChips.length > 0 ||
-      (entry.elapsedMs && entry.elapsedMs > 0 && isProcessing) ? (
-        <div className="room-card-meta">
-          {queueChips.length > 0 ? (
-            <span className="meta-cell">
-              <strong>{queueChips.join(' · ')}</strong>
-            </span>
-          ) : null}
-          {isProcessing && entry.elapsedMs ? (
-            <span className="meta-cell">
-              <strong>{formatDuration(entry.elapsedMs, t)}</strong>
-            </span>
-          ) : null}
-        </div>
-      ) : null}
-
-      {!expanded && isProcessing && turn ? (
-        <div className="room-live">
-          <header>
-            <span className="live-dot" aria-hidden />
-            <span className="live-label">LIVE</span>
-            <strong className={senderRoleClass(turn.role)}>{turn.role}</strong>
-            <em>{turn.intentKind}</em>
-            <span className="live-state pill pill-processing">
-              {turn.state}
-            </span>
-            {turn.executorServiceId ? (
-              <span className="live-exec">{turn.executorServiceId}</span>
-            ) : null}
-            {turn.attemptNo > 1 ? (
-              <span className="live-attempt">
-                {t.rooms.attempt} {turn.attemptNo}
-              </span>
-            ) : null}
-            <time>
-              {formatDate(turn.progressUpdatedAt ?? turn.updatedAt, locale)}
-            </time>
-          </header>
-          {turn.progressText && turn.progressText.trim() ? (
-            <pre className="live-progress">{turn.progressText}</pre>
-          ) : turn.activeRunId ? (
-            <code className="live-run">{turn.activeRunId}</code>
-          ) : null}
-        </div>
-      ) : null}
-
-      {!expanded && latestOutput && !isProcessing ? (
-        <div className="room-preview">
-          <ParsedBody text={latestOutput.outputText} truncate={140} />
-        </div>
-      ) : null}
-
-      {!expanded && watcherCount > 0 && lastWatcher ? (
-        <div className="room-watcher-strip">
-          <span className="watcher-tag">워쳐 {watcherCount}</span>
-          <span className="watcher-line">
-            <strong className={senderRoleClass(lastWatcher.senderName)}>
-              {lastWatcher.senderName}
-            </strong>
-            <span>{lastWatcher.content.slice(0, 90)}</span>
-          </span>
-          <time>{formatDate(lastWatcher.timestamp, locale)}</time>
-        </div>
-      ) : null}
-
-      {!expanded && !latestOutput && !isProcessing && !activityLoading ? (
-        <p className="room-empty">{t.rooms.noActivity}</p>
-      ) : null}
-
-      {!expanded && activityLoading && !activity ? (
-        <p className="room-empty">{t.rooms.loadingActivity}</p>
-      ) : null}
-
-      {expanded ? (
-        <div
-          className="room-expanded"
-          onClick={(e) => e.stopPropagation()}
-          onKeyDown={(e) => e.stopPropagation()}
-        >
-          {turn?.lastError ? (
-            <div className="room-alert">
-              <strong>{t.rooms.error}</strong>
-              <ParsedBody text={turn.lastError} />
-            </div>
-          ) : null}
-
-          <section className="room-section room-thread-section">
-            <header>
-              <h4>{t.rooms.activity}</h4>
-              <small>{agentMessages.length}</small>
-            </header>
-            {agentMessages.length === 0 && !(isProcessing && turn) ? (
-              <p className="room-empty">{t.rooms.noActivity}</p>
-            ) : (
-              <ol className="room-timeline">
-                {agentMessages.map((entry) => {
-                  const verdict = entry.verdict;
-                  const verdictTone = verdict
-                    ? /fail|error/i.test(verdict)
-                      ? 'fail'
-                      : /done|ok|pass/i.test(verdict)
-                        ? 'done'
-                        : 'info'
-                    : null;
-                  const sectionClass = senderRoleClass(
-                    entry.senderName,
-                  ).replace('role-', 'role-section-');
-                  return (
-                    <li
-                      className={`room-timeline-item ${sectionClass}`}
-                      key={entry.id}
-                    >
-                      <header className="room-timeline-header">
-                        <span
-                          className={`role-chip ${senderRoleClass(entry.senderName)}`}
-                        >
-                          {entry.senderName}
-                        </span>
-                        <time>{formatDate(entry.timestamp, locale)}</time>
-                        {entry.turnNumber !== undefined ? (
-                          <span className="parsed-marker parsed-marker-info">
-                            #{entry.turnNumber}
-                          </span>
-                        ) : null}
-                        {verdict ? (
-                          <span
-                            className={`parsed-marker parsed-marker-${verdictTone}`}
-                          >
-                            {verdict}
-                          </span>
-                        ) : null}
-                      </header>
-                      <div className="room-timeline-body">
-                        <ParsedBody text={entry.content} />
-                      </div>
-                    </li>
-                  );
-                })}
-                {turn &&
-                turn.completedAt === null &&
-                (isProcessing || liveProgressDisplay) ? (
-                  <li
-                    className={`room-timeline-item ${senderRoleClass(turn.role).replace('role-', 'role-section-')} ${isProcessing ? 'room-timeline-live' : 'room-timeline-paused'}`}
-                  >
-                    <header className="room-timeline-header">
-                      {isProcessing ? (
-                        <span
-                          className="live-dot live-dot-inline"
-                          aria-hidden
-                        />
-                      ) : (
-                        <span className="paused-dot" aria-hidden />
-                      )}
-                      <span
-                        className={`role-chip ${senderRoleClass(turn.role)}`}
-                      >
-                        {turn.role}
-                      </span>
-                      <time>
-                        {formatDate(
-                          turn.progressUpdatedAt ?? turn.updatedAt,
-                          locale,
-                        )}
-                      </time>
-                      {liveElapsedMs !== null ? (
-                        <span className="live-elapsed">
-                          +{formatLiveElapsed(liveElapsedMs, t)}
-                        </span>
-                      ) : null}
-                      {!isProcessing ? (
-                        <span className="live-label paused">중단됨</span>
-                      ) : null}
-                    </header>
-                    <div className="room-timeline-body">
-                      {liveProgressDisplay ? (
-                        <pre className="live-progress">
-                          {liveProgressDisplay}
-                        </pre>
-                      ) : (
-                        <p className="room-empty">{t.rooms.loadingActivity}</p>
-                      )}
-                    </div>
-                  </li>
-                ) : null}
-              </ol>
-            )}
-          </section>
-
-          {watcherMessages.length > 0 ? (
-            <details className="room-watcher-fold">
-              <summary>
-                <span className="watcher-tag">워쳐</span>
-                <small>{watcherMessages.length}</small>
-              </summary>
-              <ul className="room-watcher-list">
-                {watcherMessages.map((message) => (
-                  <li className="room-watcher-item" key={message.id}>
-                    <header>
-                      <strong className={senderRoleClass(message.senderName)}>
-                        {message.senderName}
-                      </strong>
-                      <time>{formatDate(message.timestamp, locale)}</time>
-                    </header>
-                    <ParsedBody text={message.content} truncate={200} />
-                  </li>
-                ))}
-              </ul>
-            </details>
-          ) : null}
-
-          <section className="room-section room-compose-section">
-            <RoomMessageForm
-              busy={busy}
-              onChange={onDraftChange}
-              onSubmit={onSendMessage}
-              t={t}
-              value={draft}
-            />
-          </section>
-        </div>
-      ) : null}
-    </article>
-  );
-}
-
 function UsageQuotaMeter({
   row,
   rowName,
diff --git a/apps/dashboard/src/RoomCardV2.test.tsx b/apps/dashboard/src/RoomCardV2.test.tsx
new file mode 100644
index 0000000..710c195
--- /dev/null
+++ b/apps/dashboard/src/RoomCardV2.test.tsx
@@ -0,0 +1,111 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import type { DashboardRoomActivity } from './api';
+import { messages } from './i18n';
+import { RoomCardV2, type RoomEntryWithService } from './RoomCardV2';
+
+const t = messages.ko;
+
+const entry: RoomEntryWithService = {
+  jid: 'room-1',
+  name: 'eyejokerdb-main',
+  folder: 'eyejokerdb',
+  agentType: 'codex',
+  status: 'inactive',
+  elapsedMs: null,
+  pendingMessages: false,
+  pendingTasks: 0,
+  serviceId: 'svc-1',
+};
+
+const formatters = {
+  formatDate: (value: string | null | undefined) => value ?? '-',
+  formatDuration: (value: number | null) => (value === null ? '-' : `${value}`),
+  formatLiveElapsed: (value: number) => `${value}`,
+  senderRoleClass: (value: string | null | undefined) =>
+    (value ?? '').toLowerCase().includes('owner') ? 'role-owner' : 'role-human',
+  statusLabel: (status: string) => status,
+};
+
+function activity(
+  overrides: Partial<DashboardRoomActivity> = {},
+): DashboardRoomActivity {
+  return {
+    serviceId: 'svc-1',
+    jid: 'room-1',
+    name: 'eyejokerdb-main',
+    folder: 'eyejokerdb',
+    agentType: 'codex',
+    status: 'inactive',
+    elapsedMs: null,
+    pendingMessages: false,
+    pendingTasks: 0,
+    messages: [],
+    pairedTask: null,
+    ...overrides,
+  };
+}
+
+describe('RoomCardV2', () => {
+  it('renders an inactive room without activity', () => {
+    const html = renderToStaticMarkup(
+      <RoomCardV2
+        activity={undefined}
+        activityLoading={false}
+        busy={false}
+        draft=""
+        entry={entry}
+        expanded={false}
+        inboxItems={[]}
+        locale="ko"
+        onDraftChange={() => {}}
+        onSendMessage={() => {}}
+        onToggle={() => {}}
+        pinned={false}
+        t={t}
+        {...formatters}
+      />,
+    );
+
+    expect(html).toContain('eyejokerdb-main');
+    expect(html).toContain(t.rooms.noActivity);
+  });
+
+  it('renders regular bot messages in the expanded thread', () => {
+    const html = renderToStaticMarkup(
+      <RoomCardV2
+        activity={activity({
+          messages: [
+            {
+              id: 'bot-1',
+              sender: 'bot-1',
+              senderName: 'owner',
+              content: 'TASK_DONE\n\nprod 배포 완료',
+              timestamp: '2026-04-28T02:00:00.000Z',
+              isFromMe: false,
+              isBotMessage: true,
+              sourceKind: 'bot',
+            },
+          ],
+        })}
+        activityLoading={false}
+        busy={false}
+        draft=""
+        entry={entry}
+        expanded={true}
+        inboxItems={[]}
+        locale="ko"
+        onDraftChange={() => {}}
+        onSendMessage={() => {}}
+        onToggle={() => {}}
+        pinned={true}
+        t={t}
+        {...formatters}
+      />,
+    );
+
+    expect(html).toContain('TASK_DONE');
+    expect(html).toContain('prod 배포 완료');
+  });
+});
diff --git a/apps/dashboard/src/RoomCardV2.tsx b/apps/dashboard/src/RoomCardV2.tsx
new file mode 100644
index 0000000..1f77e34
--- /dev/null
+++ b/apps/dashboard/src/RoomCardV2.tsx
@@ -0,0 +1,869 @@
+import { useEffect, useRef, useState } from 'react';
+import { Send } from 'lucide-react';
+
+import type { DashboardOverview, DashboardRoomActivity } from './api';
+import type { Locale, Messages } from './i18n';
+import { ParsedBody } from './ParsedBody';
+import {
+  buildRoomThreadEntries,
+  isWatcherRoomMessage,
+  type RoomThreadEntry,
+} from './roomThread';
+
+type InboxItem = DashboardOverview['inbox'][number];
+type RoomMessage = DashboardRoomActivity['messages'][number];
+type RoomOutput = NonNullable<
+  DashboardRoomActivity['pairedTask']
+>['outputs'][number];
+type RoomTask = NonNullable<DashboardRoomActivity['pairedTask']>;
+type RoomTurn = NonNullable<RoomTask['currentTurn']>;
+
+export interface RoomEntryWithService {
+  jid: string;
+  name: string;
+  folder: string;
+  agentType: string;
+  status: 'processing' | 'waiting' | 'inactive';
+  elapsedMs: number | null;
+  pendingMessages: boolean;
+  pendingTasks: number;
+  serviceId: string;
+}
+
+interface RoomCardFormatters {
+  formatDate: (value: string | null | undefined, locale: Locale) => string;
+  formatDuration: (value: number | null, t: Messages) => string;
+  formatLiveElapsed: (value: number, t: Messages) => string;
+  senderRoleClass: (value: string | null | undefined) => string;
+  statusLabel: (status: string, t: Messages) => string;
+}
+
+interface RoomMessageFormProps {
+  busy: boolean;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  t: Messages;
+  value: string;
+}
+
+function RoomMessageForm({
+  busy,
+  onChange,
+  onSubmit,
+  t,
+  value,
+}: RoomMessageFormProps) {
+  return (
+    <form
+      className="room-compose"
+      onSubmit={(event) => {
+        event.preventDefault();
+        onSubmit();
+      }}
+    >
+      <textarea
+        aria-label={t.rooms.message}
+        maxLength={8000}
+        onChange={(event) => onChange(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key !== 'Enter') return;
+          if (event.shiftKey || event.nativeEvent.isComposing) return;
+          if (busy || !value.trim()) return;
+          event.preventDefault();
+          onSubmit();
+        }}
+        placeholder={t.rooms.messagePlaceholder}
+        rows={1}
+        value={value}
+      />
+      <button
+        aria-label={busy ? t.rooms.sending : t.rooms.send}
+        disabled={busy || !value.trim()}
+        title={busy ? t.rooms.sending : t.rooms.send}
+        type="submit"
+      >
+        <Send size={16} strokeWidth={2} aria-hidden />
+      </button>
+    </form>
+  );
+}
+
+export interface RoomCardV2Props extends RoomCardFormatters {
+  activity: DashboardRoomActivity | undefined;
+  activityLoading: boolean;
+  busy: boolean;
+  draft: string;
+  entry: RoomEntryWithService;
+  expanded: boolean;
+  inboxItems: InboxItem[];
+  locale: Locale;
+  onDraftChange: (value: string) => void;
+  onSendMessage: () => void;
+  onToggle: () => void;
+  pendingMessages?: RoomMessage[];
+  pinned?: boolean;
+  t: Messages;
+}
+
+export function RoomCardV2({
+  activity,
+  activityLoading,
+  busy,
+  draft,
+  entry,
+  expanded,
+  formatDate,
+  formatDuration,
+  formatLiveElapsed,
+  inboxItems,
+  locale,
+  onDraftChange,
+  onSendMessage,
+  onToggle,
+  pendingMessages = [],
+  pinned = false,
+  senderRoleClass,
+  statusLabel,
+  t,
+}: RoomCardV2Props) {
+  const task = activity?.pairedTask ?? null;
+  const turn = task?.currentTurn ?? null;
+  const outputs = task?.outputs ?? [];
+  const latestOutput = outputs.at(-1) ?? null;
+  const messages = activity?.messages ?? [];
+  const isProcessing = entry.status === 'processing';
+  const liveTurnStart =
+    turn && turn.completedAt === null
+      ? new Date(turn.createdAt).getTime()
+      : null;
+  const [tick, setTick] = useState(() => Date.now());
+  useEffect(() => {
+    if (!isProcessing || liveTurnStart === null) return;
+    const id = window.setInterval(() => setTick(Date.now()), 1000);
+    return () => window.clearInterval(id);
+  }, [isProcessing, liveTurnStart]);
+
+  const liveElapsedMs =
+    liveTurnStart === null ? null : Math.max(0, tick - liveTurnStart);
+  const liveProgressDisplay =
+    turn?.progressText && turn.progressText.trim()
+      ? turn.progressText
+      : getLiveStatusFallback({
+          isProcessing,
+          messages,
+          senderRoleClass,
+          turn,
+        });
+  const lastUpdated = turn?.updatedAt ?? task?.updatedAt ?? null;
+  const watcherMessages = messages.filter(isWatcherRoomMessage);
+  const lastWatcher = watcherMessages.at(-1) ?? null;
+  const agentMessages = buildRoomThreadEntries({
+    messages,
+    outputs,
+    pendingMessages,
+  });
+
+  useRoomDetailAutoscroll({
+    entryJid: entry.jid,
+    messagesLen: messages.length,
+    outputsLen: outputs.length,
+    pendingLen: pendingMessages.length,
+  });
+
+  const formatters = {
+    formatDate,
+    formatDuration,
+    formatLiveElapsed,
+    senderRoleClass,
+    statusLabel,
+  };
+
+  return (
+    <article
+      aria-expanded={pinned ? undefined : expanded}
+      className={`room-card-v2 status-${entry.status}${expanded ? ' is-expanded' : ''}${pinned ? ' is-pinned' : ''}`}
+      onClick={pinned ? undefined : onToggle}
+      onKeyDown={
+        pinned
+          ? undefined
+          : (e) => {
+              if (e.target !== e.currentTarget) return;
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onToggle();
+              }
+            }
+      }
+      role={pinned ? undefined : 'button'}
+      tabIndex={pinned ? undefined : 0}
+    >
+      <RoomCardHead
+        entry={entry}
+        expanded={expanded}
+        inboxItems={inboxItems}
+        isProcessing={isProcessing}
+        pinned={pinned}
+        statusLabel={statusLabel}
+        t={t}
+      />
+      <RoomCurrentTurnSummary
+        formatDate={formatDate}
+        lastUpdated={lastUpdated}
+        locale={locale}
+        senderRoleClass={senderRoleClass}
+        task={task}
+        turn={turn}
+        t={t}
+      />
+      <RoomCardMeta
+        entry={entry}
+        formatDuration={formatDuration}
+        isProcessing={isProcessing}
+        t={t}
+      />
+      <CollapsedLiveTurn
+        expanded={expanded}
+        formatDate={formatDate}
+        isProcessing={isProcessing}
+        locale={locale}
+        senderRoleClass={senderRoleClass}
+        t={t}
+        turn={turn}
+      />
+      <CollapsedOutputPreview
+        expanded={expanded}
+        isProcessing={isProcessing}
+        latestOutput={latestOutput}
+      />
+      <CollapsedWatcherStrip
+        expanded={expanded}
+        formatDate={formatDate}
+        lastWatcher={lastWatcher}
+        locale={locale}
+        senderRoleClass={senderRoleClass}
+        watcherCount={watcherMessages.length}
+      />
+      <CollapsedEmptyState
+        activity={activity}
+        activityLoading={activityLoading}
+        expanded={expanded}
+        isProcessing={isProcessing}
+        latestOutput={latestOutput}
+        t={t}
+      />
+      {expanded ? (
+        <RoomExpandedContent
+          agentMessages={agentMessages}
+          busy={busy}
+          draft={draft}
+          formatters={formatters}
+          isProcessing={isProcessing}
+          liveElapsedMs={liveElapsedMs}
+          liveProgressDisplay={liveProgressDisplay}
+          locale={locale}
+          onDraftChange={onDraftChange}
+          onSendMessage={onSendMessage}
+          t={t}
+          turn={turn}
+          watcherMessages={watcherMessages}
+        />
+      ) : null}
+    </article>
+  );
+}
+
+function useRoomDetailAutoscroll({
+  entryJid,
+  messagesLen,
+  outputsLen,
+  pendingLen,
+}: {
+  entryJid: string;
+  messagesLen: number;
+  outputsLen: number;
+  pendingLen: number;
+}) {
+  const wasNearBottomRef = useRef(true);
+  useEffect(() => {
+    const detail = document.querySelector(
+      '.rooms-detail',
+    ) as HTMLElement | null;
+    if (!detail) return;
+    if (!wasNearBottomRef.current) return;
+    const run = () => {
+      detail.scrollTop = detail.scrollHeight;
+    };
+    requestAnimationFrame(() => requestAnimationFrame(run));
+  }, [entryJid, messagesLen, outputsLen, pendingLen]);
+  useEffect(() => {
+    const detail = document.querySelector(
+      '.rooms-detail',
+    ) as HTMLElement | null;
+    if (!detail) return;
+    const onScroll = () => {
+      const distance =
+        detail.scrollHeight - detail.scrollTop - detail.clientHeight;
+      wasNearBottomRef.current = distance < 80;
+    };
+    detail.addEventListener('scroll', onScroll, { passive: true });
+    return () => detail.removeEventListener('scroll', onScroll);
+  }, [entryJid]);
+}
+
+const TASK_STATUS_PREFIX = '⁣⁣⁣';
+
+function getLiveStatusFallback({
+  isProcessing,
+  messages,
+  senderRoleClass,
+  turn,
+}: {
+  isProcessing: boolean;
+  messages: RoomMessage[];
+  senderRoleClass: RoomCardFormatters['senderRoleClass'];
+  turn: RoomTurn | null;
+}): string | null {
+  if (!isProcessing) return null;
+  if (!turn) return null;
+  if (turn.progressText && turn.progressText.trim()) return null;
+  const turnStartMs = turn.createdAt ? new Date(turn.createdAt).getTime() : 0;
+  const turnRole = senderRoleClass(turn.role);
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const message = messages[i];
+    if (!message.content.startsWith(TASK_STATUS_PREFIX)) continue;
+    const ts = message.timestamp ? new Date(message.timestamp).getTime() : 0;
+    if (ts < turnStartMs) continue;
+    const senderRole = senderRoleClass(message.senderName);
+    if (senderRole !== turnRole) continue;
+    const body = message.content.slice(TASK_STATUS_PREFIX.length);
+    const stripped = body.replace(/\n\n\d+[초smhMSH]?$/, '').trim();
+    return stripped || null;
+  }
+  return null;
+}
+
+function RoomCardHead({
+  entry,
+  expanded,
+  inboxItems,
+  isProcessing,
+  pinned,
+  statusLabel,
+  t,
+}: {
+  entry: RoomEntryWithService;
+  expanded: boolean;
+  inboxItems: InboxItem[];
+  isProcessing: boolean;
+  pinned: boolean;
+  statusLabel: RoomCardFormatters['statusLabel'];
+  t: Messages;
+}) {
+  return (
+    <div className="room-card-head">
+      <span className={`room-pulse pulse-${entry.status}`}>
+        {isProcessing ? <span className="pulse-dot" /> : null}
+      </span>
+      <span className="room-title-block">
+        <strong>{entry.name}</strong>
+        <span className="room-sub">
+          <em>{entry.agentType}</em>
+          {inboxItems.length > 0 ? (
+            <span className="room-inbox-badges" aria-label={t.panels.inbox}>
+              {inboxItems.slice(0, 3).map((item) => (
+                <span
+                  className={`room-inbox-pip sev-${item.severity}`}
+                  key={item.id}
+                  title={t.inbox.kinds[item.kind]}
+                >
+                  {t.inbox.kinds[item.kind]}
+                </span>
+              ))}
+            </span>
+          ) : null}
+        </span>
+      </span>
+      {!isProcessing ? (
+        <span className={`room-status pill pill-${entry.status}`}>
+          {statusLabel(entry.status, t)}
+        </span>
+      ) : (
+        <span />
+      )}
+      {!pinned ? (
+        <span className="room-toggle" aria-hidden>
+          {expanded ? '▾' : '▸'}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+function RoomCurrentTurnSummary({
+  formatDate,
+  lastUpdated,
+  locale,
+  senderRoleClass,
+  task,
+  turn,
+  t,
+}: {
+  formatDate: RoomCardFormatters['formatDate'];
+  lastUpdated: string | null;
+  locale: Locale;
+  senderRoleClass: RoomCardFormatters['senderRoleClass'];
+  task: RoomTask | null;
+  turn: RoomTurn | null;
+  t: Messages;
+}) {
+  if (!turn || turn.completedAt === null) return null;
+  return (
+    <div className="room-current-turn">
+      <span>
+        <strong className={senderRoleClass(turn.role)}>{turn.role}</strong>
+        <em>{turn.intentKind}</em>
+        {turn.attemptNo > 1 ? (
+          <small>
+            {t.rooms.attempt} {turn.attemptNo}
+          </small>
+        ) : null}
+      </span>
+      {task && task.roundTripCount > 0 ? (
+        <small>
+          · {t.rooms.round} {task.roundTripCount}
+        </small>
+      ) : null}
+      {lastUpdated ? (
+        <small style={{ marginLeft: 'auto' }}>
+          {formatDate(lastUpdated, locale)}
+        </small>
+      ) : null}
+    </div>
+  );
+}
+
+function RoomCardMeta({
+  entry,
+  formatDuration,
+  isProcessing,
+  t,
+}: {
+  entry: RoomEntryWithService;
+  formatDuration: RoomCardFormatters['formatDuration'];
+  isProcessing: boolean;
+  t: Messages;
+}) {
+  const queueChips: string[] = [];
+  if (entry.pendingTasks > 0)
+    queueChips.push(`${entry.pendingTasks} ${t.rooms.tasks}`);
+  if (entry.pendingMessages) queueChips.push(t.rooms.queueWaitingMessages);
+  if (
+    queueChips.length === 0 &&
+    !(entry.elapsedMs && entry.elapsedMs > 0 && isProcessing)
+  ) {
+    return null;
+  }
+
+  return (
+    <div className="room-card-meta">
+      {queueChips.length > 0 ? (
+        <span className="meta-cell">
+          <strong>{queueChips.join(' · ')}</strong>
+        </span>
+      ) : null}
+      {isProcessing && entry.elapsedMs ? (
+        <span className="meta-cell">
+          <strong>{formatDuration(entry.elapsedMs, t)}</strong>
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+function CollapsedLiveTurn({
+  expanded,
+  formatDate,
+  isProcessing,
+  locale,
+  senderRoleClass,
+  t,
+  turn,
+}: {
+  expanded: boolean;
+  formatDate: RoomCardFormatters['formatDate'];
+  isProcessing: boolean;
+  locale: Locale;
+  senderRoleClass: RoomCardFormatters['senderRoleClass'];
+  t: Messages;
+  turn: RoomTurn | null;
+}) {
+  if (expanded || !isProcessing || !turn) return null;
+  return (
+    <div className="room-live">
+      <header>
+        <span className="live-dot" aria-hidden />
+        <span className="live-label">LIVE</span>
+        <strong className={senderRoleClass(turn.role)}>{turn.role}</strong>
+        <em>{turn.intentKind}</em>
+        <span className="live-state pill pill-processing">{turn.state}</span>
+        {turn.executorServiceId ? (
+          <span className="live-exec">{turn.executorServiceId}</span>
+        ) : null}
+        {turn.attemptNo > 1 ? (
+          <span className="live-attempt">
+            {t.rooms.attempt} {turn.attemptNo}
+          </span>
+        ) : null}
+        <time>
+          {formatDate(turn.progressUpdatedAt ?? turn.updatedAt, locale)}
+        </time>
+      </header>
+      {turn.progressText && turn.progressText.trim() ? (
+        <pre className="live-progress">{turn.progressText}</pre>
+      ) : turn.activeRunId ? (
+        <code className="live-run">{turn.activeRunId}</code>
+      ) : null}
+    </div>
+  );
+}
+
+function CollapsedOutputPreview({
+  expanded,
+  isProcessing,
+  latestOutput,
+}: {
+  expanded: boolean;
+  isProcessing: boolean;
+  latestOutput: RoomOutput | null;
+}) {
+  if (expanded || !latestOutput || isProcessing) return null;
+  return (
+    <div className="room-preview">
+      <ParsedBody text={latestOutput.outputText} truncate={140} />
+    </div>
+  );
+}
+
+function CollapsedWatcherStrip({
+  expanded,
+  formatDate,
+  lastWatcher,
+  locale,
+  senderRoleClass,
+  watcherCount,
+}: {
+  expanded: boolean;
+  formatDate: RoomCardFormatters['formatDate'];
+  lastWatcher: RoomMessage | null;
+  locale: Locale;
+  senderRoleClass: RoomCardFormatters['senderRoleClass'];
+  watcherCount: number;
+}) {
+  if (expanded || watcherCount === 0 || !lastWatcher) return null;
+  return (
+    <div className="room-watcher-strip">
+      <span className="watcher-tag">워쳐 {watcherCount}</span>
+      <span className="watcher-line">
+        <strong className={senderRoleClass(lastWatcher.senderName)}>
+          {lastWatcher.senderName}
+        </strong>
+        <span>{lastWatcher.content.slice(0, 90)}</span>
+      </span>
+      <time>{formatDate(lastWatcher.timestamp, locale)}</time>
+    </div>
+  );
+}
+
+function CollapsedEmptyState({
+  activity,
+  activityLoading,
+  expanded,
+  isProcessing,
+  latestOutput,
+  t,
+}: {
+  activity: DashboardRoomActivity | undefined;
+  activityLoading: boolean;
+  expanded: boolean;
+  isProcessing: boolean;
+  latestOutput: RoomOutput | null;
+  t: Messages;
+}) {
+  if (expanded) return null;
+  if (!latestOutput && !isProcessing && !activityLoading) {
+    return <p className="room-empty">{t.rooms.noActivity}</p>;
+  }
+  if (activityLoading && !activity) {
+    return <p className="room-empty">{t.rooms.loadingActivity}</p>;
+  }
+  return null;
+}
+
+function RoomExpandedContent({
+  agentMessages,
+  busy,
+  draft,
+  formatters,
+  isProcessing,
+  liveElapsedMs,
+  liveProgressDisplay,
+  locale,
+  onDraftChange,
+  onSendMessage,
+  t,
+  turn,
+  watcherMessages,
+}: {
+  agentMessages: RoomThreadEntry[];
+  busy: boolean;
+  draft: string;
+  formatters: RoomCardFormatters;
+  isProcessing: boolean;
+  liveElapsedMs: number | null;
+  liveProgressDisplay: string | null;
+  locale: Locale;
+  onDraftChange: (value: string) => void;
+  onSendMessage: () => void;
+  t: Messages;
+  turn: RoomTurn | null;
+  watcherMessages: RoomMessage[];
+}) {
+  return (
+    <div
+      className="room-expanded"
+      onClick={(e) => e.stopPropagation()}
+      onKeyDown={(e) => e.stopPropagation()}
+    >
+      {turn?.lastError ? (
+        <div className="room-alert">
+          <strong>{t.rooms.error}</strong>
+          <ParsedBody text={turn.lastError} />
+        </div>
+      ) : null}
+      <RoomThreadSection
+        agentMessages={agentMessages}
+        formatters={formatters}
+        isProcessing={isProcessing}
+        liveElapsedMs={liveElapsedMs}
+        liveProgressDisplay={liveProgressDisplay}
+        locale={locale}
+        t={t}
+        turn={turn}
+      />
+      <RoomWatcherFold
+        formatDate={formatters.formatDate}
+        locale={locale}
+        senderRoleClass={formatters.senderRoleClass}
+        watcherMessages={watcherMessages}
+      />
+      <section className="room-section room-compose-section">
+        <RoomMessageForm
+          busy={busy}
+          onChange={onDraftChange}
+          onSubmit={onSendMessage}
+          t={t}
+          value={draft}
+        />
+      </section>
+    </div>
+  );
+}
+
+function RoomThreadSection({
+  agentMessages,
+  formatters,
+  isProcessing,
+  liveElapsedMs,
+  liveProgressDisplay,
+  locale,
+  t,
+  turn,
+}: {
+  agentMessages: RoomThreadEntry[];
+  formatters: RoomCardFormatters;
+  isProcessing: boolean;
+  liveElapsedMs: number | null;
+  liveProgressDisplay: string | null;
+  locale: Locale;
+  t: Messages;
+  turn: RoomTurn | null;
+}) {
+  const showLiveItem =
+    turn && turn.completedAt === null && (isProcessing || liveProgressDisplay);
+  return (
+    <section className="room-section room-thread-section">
+      <header>
+        <h4>{t.rooms.activity}</h4>
+        <small>{agentMessages.length}</small>
+      </header>
+      {agentMessages.length === 0 && !(isProcessing && turn) ? (
+        <p className="room-empty">{t.rooms.noActivity}</p>
+      ) : (
+        <ol className="room-timeline">
+          {agentMessages.map((entry) => (
+            <RoomTimelineEntry
+              entry={entry}
+              formatDate={formatters.formatDate}
+              key={entry.id}
+              locale={locale}
+              senderRoleClass={formatters.senderRoleClass}
+            />
+          ))}
+          {showLiveItem ? (
+            <RoomLiveTimelineEntry
+              formatLiveElapsed={formatters.formatLiveElapsed}
+              formatDate={formatters.formatDate}
+              isProcessing={isProcessing}
+              liveElapsedMs={liveElapsedMs}
+              liveProgressDisplay={liveProgressDisplay}
+              locale={locale}
+              senderRoleClass={formatters.senderRoleClass}
+              t={t}
+              turn={turn}
+            />
+          ) : null}
+        </ol>
+      )}
+    </section>
+  );
+}
+
+function RoomTimelineEntry({
+  entry,
+  formatDate,
+  locale,
+  senderRoleClass,
+}: {
+  entry: RoomThreadEntry;
+  formatDate: RoomCardFormatters['formatDate'];
+  locale: Locale;
+  senderRoleClass: RoomCardFormatters['senderRoleClass'];
+}) {
+  const verdict = entry.verdict;
+  const verdictTone = verdict
+    ? /fail|error/i.test(verdict)
+      ? 'fail'
+      : /done|ok|pass/i.test(verdict)
+        ? 'done'
+        : 'info'
+    : null;
+  const sectionClass = senderRoleClass(entry.senderName).replace(
+    'role-',
+    'role-section-',
+  );
+  return (
+    <li className={`room-timeline-item ${sectionClass}`}>
+      <header className="room-timeline-header">
+        <span className={`role-chip ${senderRoleClass(entry.senderName)}`}>
+          {entry.senderName}
+        </span>
+        <time>{formatDate(entry.timestamp, locale)}</time>
+        {entry.turnNumber !== undefined ? (
+          <span className="parsed-marker parsed-marker-info">
+            #{entry.turnNumber}
+          </span>
+        ) : null}
+        {verdict ? (
+          <span className={`parsed-marker parsed-marker-${verdictTone}`}>
+            {verdict}
+          </span>
+        ) : null}
+      </header>
+      <div className="room-timeline-body">
+        <ParsedBody text={entry.content} />
+      </div>
+    </li>
+  );
+}
+
+function RoomLiveTimelineEntry({
+  formatDate,
+  formatLiveElapsed,
+  isProcessing,
+  liveElapsedMs,
+  liveProgressDisplay,
+  locale,
+  senderRoleClass,
+  t,
+  turn,
+}: {
+  formatDate: RoomCardFormatters['formatDate'];
+  formatLiveElapsed: RoomCardFormatters['formatLiveElapsed'];
+  isProcessing: boolean;
+  liveElapsedMs: number | null;
+  liveProgressDisplay: string | null;
+  locale: Locale;
+  senderRoleClass: RoomCardFormatters['senderRoleClass'];
+  t: Messages;
+  turn: RoomTurn;
+}) {
+  return (
+    <li
+      className={`room-timeline-item ${senderRoleClass(turn.role).replace('role-', 'role-section-')} ${isProcessing ? 'room-timeline-live' : 'room-timeline-paused'}`}
+    >
+      <header className="room-timeline-header">
+        {isProcessing ? (
+          <span className="live-dot live-dot-inline" aria-hidden />
+        ) : (
+          <span className="paused-dot" aria-hidden />
+        )}
+        <span className={`role-chip ${senderRoleClass(turn.role)}`}>
+          {turn.role}
+        </span>
+        <time>
+          {formatDate(turn.progressUpdatedAt ?? turn.updatedAt, locale)}
+        </time>
+        {liveElapsedMs !== null ? (
+          <span className="live-elapsed">
+            +{formatLiveElapsed(liveElapsedMs, t)}
+          </span>
+        ) : null}
+        {!isProcessing ? (
+          <span className="live-label paused">중단됨</span>
+        ) : null}
+      </header>
+      <div className="room-timeline-body">
+        {liveProgressDisplay ? (
+          <pre className="live-progress">{liveProgressDisplay}</pre>
+        ) : (
+          <p className="room-empty">{t.rooms.loadingActivity}</p>
+        )}
+      </div>
+    </li>
+  );
+}
+
+function RoomWatcherFold({
+  formatDate,
+  locale,
+  senderRoleClass,
+  watcherMessages,
+}: {
+  formatDate: RoomCardFormatters['formatDate'];
+  locale: Locale;
+  senderRoleClass: RoomCardFormatters['senderRoleClass'];
+  watcherMessages: RoomMessage[];
+}) {
+  if (watcherMessages.length === 0) return null;
+  return (
+    <details className="room-watcher-fold">
+      <summary>
+        <span className="watcher-tag">워쳐</span>
+        <small>{watcherMessages.length}</small>
+      </summary>
+      <ul className="room-watcher-list">
+        {watcherMessages.map((message) => (
+          <li className="room-watcher-item" key={message.id}>
+            <header>
+              <strong className={senderRoleClass(message.senderName)}>
+                {message.senderName}
+              </strong>
+              <time>{formatDate(message.timestamp, locale)}</time>
+            </header>
+            <ParsedBody text={message.content} truncate={200} />
+          </li>
+        ))}
+      </ul>
+    </details>
+  );
+}