@nextclaw/ui 0.15.10 → 0.15.12

package/src/features/chat/features/message/components/chat-message-list.container.tsx

@@ -1,4 +1,10 @@
-import { useCallback, useMemo } from "react";
+import {
+  useCallback,
+  useMemo,
+  useState,
+  type FocusEvent,
+  type RefObject,
+} from "react";
 import type { NcpMessage } from "@nextclaw/ncp";
 import {
   type ChatInlineDisplayViewModel,
@@ -8,10 +14,15 @@ import {
   ChatMessageList,
 } from "@nextclaw/agent-chat-ui";
 import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
-import { adaptChatMessage, type ChatMessageSource } from "@/features/chat/features/message/utils/chat-message.utils";
+import {
+  adaptChatMessage,
+  type ChatMessageSource,
+} from "@/features/chat/features/message/utils/chat-message.utils";
 import { buildChatMessageProcessSummary } from "@/features/chat/features/message/utils/chat-message-process-summary.utils";
+import { buildChatMessageExecutionPresentation } from "@/features/chat/features/message/utils/chat-message-execution-summary.utils";
 import {
   buildChatMessageAdapterTexts,
+  buildChatMessageExecutionLabels,
   buildChatMessageTexts,
 } from "@/features/chat/features/message/utils/chat-message-texts.utils";
 import {
@@ -19,37 +30,111 @@ import {
   resolveWorkspaceReferencePath,
 } from "@/features/chat/features/input/utils/chat-inline-token.utils";
 import { adaptNcpMessageToUiMessage } from "@/features/chat/features/session/utils/ncp-session-adapter.utils";
-import {
-  readContextCompactionTimeline,
-  type ContextCompactionTimelineView,
-} from "@/features/chat/features/session/utils/ncp-session-context-metadata.utils";
+import { type ContextCompactionTimelineView } from "@/features/chat/features/session/utils/ncp-session-context-metadata.utils";
 import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
 import { ChatInlineFilePreview } from "@/features/chat/features/message/components/chat-inline-file-preview";
 import { ChatInlinePanelAppCard } from "@/features/chat/features/message/components/chat-inline-panel-app-card";
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
-import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 import { useChatMessageLayoutStore } from "@/features/chat/stores/chat-message-layout.store";
 import { useNcpChatSelectedSession } from "@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state";
+import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
+import {
+  buildSessionTypeOptions,
+  DEFAULT_SESSION_TYPE,
+  normalizeSessionType,
+} from "@/features/chat/features/session-type/utils/chat-session-type.utils";
 import { useI18n } from "@/app/components/i18n-provider";
+import { useChatMessageVirtualizer } from "@/features/chat/features/message/hooks/use-chat-message-virtualizer";
+import {
+  buildChatMessageTimelineItems,
+  isVisibleChatMessage,
+  type ChatTimelineItem,
+  type ContextInheritanceTimelineView,
+} from "@/features/chat/features/message/utils/chat-message-timeline.utils";
 import { buildServerPathContentUrl } from "@/shared/lib/api";
 import { formatDateTime, t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
 
 type ChatMessageListContainerProps = {
   messages: readonly NcpMessage[];
   isSending: boolean;
+  sessionKey: string | null;
+  scrollRef: RefObject<HTMLDivElement | null>;
   className?: string;
 };
 
-const INHERITED_FROM_SESSION_METADATA_KEY = "inherited_from_session_id";
+class ChatMessageViewModelAdapter {
+  private readonly cache = new WeakMap<
+    NcpMessage,
+    {
+      language: Parameters<typeof formatDateTime>[1];
+      processSummaryLabel: string | null;
+      executionPresentationKey: string | null;
+      viewModel: ChatMessageViewModel;
+    }
+  >();
 
-const messageViewModelCache = new WeakMap<
-  NcpMessage,
-  {
-    language: string;
-    processSummaryLabel: string | null;
-    viewModel: ChatMessageViewModel;
-  }
->();
+  adapt = (params: {
+    executionLabels: ReturnType<typeof buildChatMessageExecutionLabels>;
+    language: Parameters<typeof formatDateTime>[1];
+    processedLabel: string;
+    rawMessages: readonly NcpMessage[];
+    texts: ReturnType<typeof buildChatMessageAdapterTexts>;
+  }): ChatMessageViewModel[] => {
+    const { executionLabels, language, processedLabel, rawMessages, texts } =
+      params;
+    return rawMessages.filter(isVisibleChatMessage).flatMap((message) => {
+      const processSummary = buildChatMessageProcessSummary({
+        message,
+        processedLabel,
+      });
+      const processSummaryLabel = processSummary?.label ?? null;
+      const executionPresentation = buildChatMessageExecutionPresentation({
+        message,
+        labels: executionLabels,
+      });
+      const executionPresentationKey = executionPresentation?.cacheKey ?? null;
+      const cached = this.cache.get(message);
+      if (
+        cached &&
+        cached.language === language &&
+        cached.processSummaryLabel === processSummaryLabel &&
+        cached.executionPresentationKey === executionPresentationKey
+      ) {
+        return [cached.viewModel];
+      }
+
+      const uiMessage = adaptNcpMessageToUiMessage(message);
+      const sourceMessage: ChatMessageSource = {
+        id: uiMessage.id,
+        role: uiMessage.role,
+        meta: {
+          timestamp: uiMessage.meta?.timestamp,
+          status: uiMessage.meta?.status,
+          inlineTokens: readInlineTokensFromMetadata(message.metadata),
+          processSummary,
+          executionSummaryLabel: executionPresentation?.summaryLabel,
+          moreActions: executionPresentation?.moreActions,
+        },
+        parts: uiMessage.parts as unknown as ChatMessageSource["parts"],
+      };
+      const viewModel = adaptChatMessage(sourceMessage, {
+        formatTimestamp: (value) => formatDateTime(value, language),
+        texts,
+      });
+
+      this.cache.set(message, {
+        language,
+        processSummaryLabel,
+        executionPresentationKey,
+        viewModel,
+      });
+      return [viewModel];
+    });
+  };
+}
+
+const chatMessageViewModelAdapter = new ChatMessageViewModelAdapter();
 
 function renderChatInlineDisplay(display: ChatInlineDisplayViewModel) {
   if (display.target.type !== "panel_app") {
@@ -65,43 +150,28 @@ function renderChatInlineDisplay(display: ChatInlineDisplayViewModel) {
   );
 }
 
-const renderChatToolAgent = (agentId: string) => <AgentIdentityAvatar agentId={agentId} className="h-4 w-4 shrink-0" />;
-const renderChatPanelAppCard = (panelApp: ChatPanelAppCardViewModel) => <ChatInlinePanelAppCard panelApp={panelApp} />;
+const renderChatToolAgent = (agentId: string) => (
+  <AgentIdentityAvatar agentId={agentId} className="h-4 w-4 shrink-0" />
+);
+const renderChatPanelAppCard = (panelApp: ChatPanelAppCardViewModel) => (
+  <ChatInlinePanelAppCard panelApp={panelApp} />
+);
 
-type ContextInheritanceTimelineView = {
-  sourceSessionId: string;
-  inheritedMessageCount: number;
-};
-
-type ContextInheritanceTimelineBoundary = ContextInheritanceTimelineView & {
-  boundaryIndex: number;
-};
-
-type ChatTimelineItem =
-  | {
-      kind: "messages";
-      key: string;
-      messages: ChatMessageViewModel[];
-    }
-  | {
-      kind: "compaction";
-      key: string;
-      checkpoint: ContextCompactionTimelineView;
-    }
-  | {
-      kind: "context-inheritance";
-      key: string;
-      inheritance: ContextInheritanceTimelineView;
-    };
-
-function ChatContextCompactionDivider({ checkpoint }: { checkpoint: ContextCompactionTimelineView }) {
+function ChatContextCompactionDivider({
+  checkpoint,
+}: {
+  checkpoint: ContextCompactionTimelineView;
+}) {
   const title = [
     `${t("chatContextCompactionCoveredMessages")}: ${checkpoint.coveredSessionMessageCount}`,
     `${t("chatContextCompactionOriginalTokens")}: ${checkpoint.originalEstimatedTokens}`,
     `${t("chatContextCompactionProjectedTokens")}: ${checkpoint.projectedEstimatedTokens}`,
   ].join("\n");
   return (
-    <div className="my-4 flex items-center gap-3 text-[11px] text-muted-foreground" title={title}>
+    <div
+      className="my-4 flex items-center gap-3 text-[11px] text-muted-foreground"
+      title={title}
+    >
       <div className="h-px flex-1 bg-border" />
       <div className="inline-flex items-center gap-2 rounded-full border border-border bg-muted px-3 py-1">
         {checkpoint.status === "compressing" ? (
@@ -120,13 +190,20 @@ function ChatContextCompactionDivider({ checkpoint }: { checkpoint: ContextCompa
   );
 }
 
-function ChatContextInheritanceDivider({ inheritance }: { inheritance: ContextInheritanceTimelineView }) {
+function ChatContextInheritanceDivider({
+  inheritance,
+}: {
+  inheritance: ContextInheritanceTimelineView;
+}) {
   const title = [
     `${t("chatContextInheritanceSourceSession")}: ${inheritance.sourceSessionId}`,
     `${t("chatContextInheritanceMessages")}: ${inheritance.inheritedMessageCount}`,
   ].join("\n");
   return (
-    <div className="my-4 flex items-center gap-3 text-[11px] text-emerald-700" title={title}>
+    <div
+      className="my-4 flex items-center gap-3 text-[11px] text-emerald-700"
+      title={title}
+    >
       <div className="h-px flex-1 bg-emerald-100" />
       <div className="inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1">
         <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
@@ -137,155 +214,41 @@ function ChatContextInheritanceDivider({ inheritance }: { inheritance: ContextIn
   );
 }
 
-function resolveCompactionBoundaryIndex(params: {
-  rawMessages: readonly NcpMessage[];
-  visibleRawMessages: readonly NcpMessage[];
-  rawMessageId: string;
-}): number {
-  const { rawMessageId, rawMessages, visibleRawMessages } = params;
-  const physicalIndex = rawMessages.findIndex((message) => message.id === rawMessageId);
-  if (physicalIndex < 0) {
-    return visibleRawMessages.length - 1;
-  }
-  const previousVisibleCount = rawMessages.slice(0, physicalIndex).filter(isVisibleChatMessage).length;
-  return previousVisibleCount - 1;
-}
-
-function readInheritedSourceSessionId(message: NcpMessage): string | null {
-  const value = message.metadata?.[INHERITED_FROM_SESSION_METADATA_KEY];
-  return typeof value === "string" && value.trim() ? value.trim() : null;
-}
-
-function isVisibleChatMessage(message: NcpMessage): boolean {
-  return !readContextCompactionTimeline(message) && !readInheritedSourceSessionId(message);
-}
-
-function resolveContextInheritanceBoundary(messages: readonly NcpMessage[]): ContextInheritanceTimelineBoundary | null {
-  const boundaryIndex = messages.findIndex((message) => readInheritedSourceSessionId(message));
-  if (boundaryIndex < 0) {
-    return null;
-  }
-  const sourceSessionId = readInheritedSourceSessionId(messages[boundaryIndex]);
-  if (!sourceSessionId) {
-    return null;
-  }
-  return {
-    boundaryIndex: messages.slice(0, boundaryIndex).filter(isVisibleChatMessage).length,
-    sourceSessionId,
-    inheritedMessageCount: messages.filter((message) => readInheritedSourceSessionId(message) === sourceSessionId)
-      .length,
-  };
-}
-
-function buildTimelineItems(params: {
-  rawMessages: readonly NcpMessage[];
-  messages: ChatMessageViewModel[];
-}): ChatTimelineItem[] {
-  const visibleRawMessages = params.rawMessages.filter(isVisibleChatMessage);
-  const checkpoints = params.rawMessages
-    .map((message) => ({
-      rawMessageId: message.id,
-      checkpoint: readContextCompactionTimeline(message),
-    }))
-    .filter(
-      (
-        entry,
-      ): entry is {
-        rawMessageId: string;
-        checkpoint: ContextCompactionTimelineView;
-      } => Boolean(entry.checkpoint),
-    )
-    .map((entry) => ({
-      key: entry.rawMessageId,
-      checkpoint: entry.checkpoint,
-      boundaryIndex: resolveCompactionBoundaryIndex({
-        rawMessages: params.rawMessages,
-        visibleRawMessages,
-        rawMessageId: entry.rawMessageId,
-      }),
-    }))
-    .sort((left, right) => left.boundaryIndex - right.boundaryIndex);
-  const contextInheritance = resolveContextInheritanceBoundary(params.rawMessages);
-
-  const items: ChatTimelineItem[] = [];
-  let pendingMessages: ChatMessageViewModel[] = [];
-  let checkpointCursor = 0;
-  const flushPendingMessages = (key: string) => {
-    if (pendingMessages.length === 0) {
-      return;
-    }
-    items.push({
-      kind: "messages",
-      key,
-      messages: pendingMessages,
-    });
-    pendingMessages = [];
-  };
-
-  visibleRawMessages.forEach((rawMessage, index) => {
-    if (contextInheritance?.boundaryIndex === index) {
-      flushPendingMessages("messages-before-context-inheritance");
-      items.push({
-        kind: "context-inheritance",
-        key: "context-inheritance",
-        inheritance: contextInheritance,
-      });
-    }
-    const message = params.messages[index];
-    if (message) {
-      pendingMessages.push(message);
-    }
-    while (checkpointCursor < checkpoints.length && checkpoints[checkpointCursor]?.boundaryIndex <= index) {
-      const currentCheckpoint = checkpoints[checkpointCursor];
-      flushPendingMessages(`messages-before-${currentCheckpoint.key}`);
-      items.push({
-        kind: "compaction",
-        key: currentCheckpoint.key,
-        checkpoint: currentCheckpoint.checkpoint,
-      });
-      checkpointCursor += 1;
-    }
-  });
-  if (contextInheritance?.boundaryIndex === visibleRawMessages.length) {
-    flushPendingMessages("messages-before-context-inheritance");
-    items.push({
-      kind: "context-inheritance",
-      key: "context-inheritance",
-      inheritance: contextInheritance,
-    });
-  }
-  while (checkpointCursor < checkpoints.length) {
-    const currentCheckpoint = checkpoints[checkpointCursor];
-    flushPendingMessages(`messages-before-${currentCheckpoint.key}`);
-    items.push({
-      kind: "compaction",
-      key: currentCheckpoint.key,
-      checkpoint: currentCheckpoint.checkpoint,
-    });
-    checkpointCursor += 1;
-  }
-  flushPendingMessages("messages-final");
-  if (items.length === 0) {
-    items.push({
-      kind: "messages",
-      key: "messages-empty",
-      messages: [],
-    });
-  }
-  return items;
-}
-
 export function ChatMessageListContainer({
   messages: rawMessages,
   isSending,
+  scrollRef,
+  sessionKey,
   className,
 }: ChatMessageListContainerProps) {
   const presenter = usePresenter();
   const { language } = useI18n();
   const messageLayout = useChatMessageLayoutStore((state) => state.layout);
-  const selectedSessionKey = useChatSessionListStore((state) => state.snapshot.selectedSessionKey);
-  const selectedSession = useNcpChatSelectedSession(selectedSessionKey);
-  const localFileBasePath = selectedSession?.workingDir ?? selectedSession?.projectRoot ?? null;
+  const selectedSession = useNcpChatSelectedSession(sessionKey);
+  const sessionTypesData = useChatQueryStore(
+    (state) => state.snapshot.sessionTypesQuery?.data ?? null,
+  );
+  const activeSessionType = normalizeSessionType(
+    selectedSession?.sessionType ??
+      sessionTypesData?.defaultType ??
+      DEFAULT_SESSION_TYPE,
+  );
+  const sessionTypeOption = buildSessionTypeOptions(
+    sessionTypesData?.options ?? [],
+  ).find((option) => option.value === activeSessionType);
+  const assistantAvatarIcon = sessionTypeOption?.icon?.src?.trim() ? (
+    <SessionContextIconNode
+      icon={{
+        kind: "runtime-image",
+        src: sessionTypeOption.icon.src,
+        alt: sessionTypeOption.icon.alt ?? null,
+        name: sessionTypeOption.label,
+      }}
+      className="h-[65%] w-[65%]"
+    />
+  ) : undefined;
+  const localFileBasePath =
+    selectedSession?.workingDir ?? selectedSession?.projectRoot ?? null;
   const renderInlineDisplayWithFiles = useCallback(
     (display: ChatInlineDisplayViewModel) => {
       const panelAppDisplay = renderChatInlineDisplay(display);
@@ -296,7 +259,7 @@ export function ChatMessageListContainer({
         return (
           <ChatInlineFilePreview
             display={display}
-            parentSessionKey={selectedSessionKey}
+            parentSessionKey={sessionKey}
             sessionProjectRoot={selectedSession?.projectRoot ?? null}
             sessionWorkingDir={localFileBasePath}
             onFileOpen={presenter.chatThreadManager.openFilePreview}
@@ -305,64 +268,71 @@ export function ChatMessageListContainer({
       }
       return undefined;
     },
-    [localFileBasePath, presenter.chatThreadManager, selectedSession?.projectRoot, selectedSessionKey],
+    [
+      localFileBasePath,
+      presenter.chatThreadManager,
+      selectedSession?.projectRoot,
+      sessionKey,
+    ],
   );
   const resolveFileContentUrl = useCallback(
-    (action: { path: string }) => buildServerPathContentUrl(action.path, localFileBasePath),
+    (action: { path: string }) =>
+      buildServerPathContentUrl(action.path, localFileBasePath),
     [localFileBasePath],
   );
-  const texts = useMemo(() => buildChatMessageAdapterTexts(language), [language]);
-
-  const messages = useMemo(() => {
-    const visibleRawMessages = rawMessages.filter(isVisibleChatMessage);
-    const processedLabel = t("chatProcessSummaryProcessed");
-    return visibleRawMessages.flatMap((message) => {
-      const processSummary = buildChatMessageProcessSummary({
-        message,
-        processedLabel,
-      });
-      const processSummaryLabel = processSummary?.label ?? null;
-      const cached = messageViewModelCache.get(message);
-      if (cached && cached.language === language && cached.processSummaryLabel === processSummaryLabel) {
-        return [cached.viewModel];
-      }
-
-      const uiMessage = adaptNcpMessageToUiMessage(message);
-      const sourceMessage: ChatMessageSource = {
-        id: uiMessage.id,
-        role: uiMessage.role,
-        meta: {
-          timestamp: uiMessage.meta?.timestamp,
-          status: uiMessage.meta?.status,
-          inlineTokens: readInlineTokensFromMetadata(message.metadata),
-          processSummary,
-        },
-        parts: uiMessage.parts as unknown as ChatMessageSource["parts"],
-      };
-      const viewModel = adaptChatMessage(sourceMessage, {
-        formatTimestamp: (value) => formatDateTime(value, language),
-        texts,
-      });
+  const texts = useMemo(
+    () => buildChatMessageAdapterTexts(language),
+    [language],
+  );
+  const executionLabels = useMemo(
+    () => buildChatMessageExecutionLabels(language),
+    [language],
+  );
 
-      messageViewModelCache.set(message, {
+  const messages = useMemo(
+    () =>
+      chatMessageViewModelAdapter.adapt({
+        executionLabels,
         language,
-        processSummaryLabel,
-        viewModel,
-      });
-      return [viewModel];
-    });
-  }, [language, rawMessages, texts]);
+        processedLabel: t("chatProcessSummaryProcessed"),
+        rawMessages,
+        texts,
+      }),
+    [executionLabels, language, rawMessages, texts],
+  );
 
-  const hasAssistantDraft = useMemo(
+  const activeAssistantMessage = messages.findLast(
+    (message) =>
+      message.role === "assistant" &&
+      (message.status === "streaming" || message.status === "pending"),
+  );
+  const hasAssistantDraft = Boolean(activeAssistantMessage);
+  const messageTexts = useMemo(
+    () => buildChatMessageTexts(language),
+    [language],
+  );
+  const timelineItems = useMemo(
+    () => buildChatMessageTimelineItems({ rawMessages, messages }),
+    [messages, rawMessages],
+  );
+  const virtualRows = useMemo<ChatTimelineItem[]>(
     () =>
-      messages.some(
-        (message) => message.role === "assistant" && (message.status === "streaming" || message.status === "pending"),
-      ),
-    [messages],
+      isSending && !hasAssistantDraft
+        ? [...timelineItems, { kind: "typing", key: "typing" }]
+        : timelineItems,
+    [hasAssistantDraft, isSending, timelineItems],
+  );
+  const [focusedRowKey, setFocusedRowKey] = useState<string | null>(null);
+  const activeRowKey = activeAssistantMessage ? `message:${activeAssistantMessage.id}` : null;
+  const { containerRef, virtualizer } = useChatMessageVirtualizer({
+    rows: virtualRows,
+    scrollRef,
+    activeRowKey,
+    focusedRowKey,
+  });
+  const sessionSkillsQuery = useChatQueryStore(
+    (state) => state.snapshot.sessionSkillsQuery,
   );
-  const messageTexts = useMemo(() => buildChatMessageTexts(language), [language]);
-  const timelineItems = useMemo(() => buildTimelineItems({ rawMessages, messages }), [messages, rawMessages]);
-  const sessionSkillsQuery = useChatQueryStore((state) => state.snapshot.sessionSkillsQuery);
   const handleInlineTokenClick = useCallback(
     (token: ChatInlineTokenViewModel) => {
       if (token.kind === "panel_app") {
@@ -371,7 +341,10 @@ export function ChatMessageListContainer({
         });
         return;
       }
-      if (token.kind === "workspace_file" || token.kind === "workspace_directory") {
+      if (
+        token.kind === "workspace_file" ||
+        token.kind === "workspace_directory"
+      ) {
         const path = resolveWorkspaceReferencePath({
           projectRoot: selectedSession?.projectRoot,
           relativePath: token.key,
@@ -391,7 +364,9 @@ export function ChatMessageListContainer({
         return;
       }
       const records = sessionSkillsQuery?.data?.records ?? [];
-      const matched = records.find((record) => record.ref === skillKey || record.name === skillKey);
+      const matched = records.find(
+        (record) => record.ref === skillKey || record.name === skillKey,
+      );
       const skillPath = matched?.path?.trim();
       if (!skillPath) {
         return;
@@ -403,10 +378,21 @@ export function ChatMessageListContainer({
         previewViewer: "rendered",
       });
     },
-    [presenter.chatThreadManager, presenter.chatUiManager, selectedSession?.projectRoot, sessionSkillsQuery],
+    [
+      presenter.chatThreadManager,
+      presenter.chatUiManager,
+      selectedSession?.projectRoot,
+      sessionSkillsQuery,
+    ],
   );
   const handleAttachmentOpen = useCallback(
-    (file: { label: string; mimeType: string; dataUrl?: string; sizeBytes?: number; isImage: boolean }) => {
+    (file: {
+      label: string;
+      mimeType: string;
+      dataUrl?: string;
+      sizeBytes?: number;
+      isImage: boolean;
+    }) => {
       const contentUrl = file.dataUrl?.trim();
       if (!contentUrl) {
         return;
@@ -422,32 +408,54 @@ export function ChatMessageListContainer({
     },
     [presenter.chatThreadManager],
   );
+  const handleRowBlur = useCallback((event: FocusEvent<HTMLDivElement>) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      setFocusedRowKey(null);
+    }
+  }, []);
   return (
-    <div className={className}>
-      {timelineItems.map((item, index) =>
-        item.kind === "compaction" ? (
-          <ChatContextCompactionDivider key={item.key} checkpoint={item.checkpoint} />
-        ) : item.kind === "context-inheritance" ? (
-          <ChatContextInheritanceDivider key={item.key} inheritance={item.inheritance} />
-        ) : (
-          <ChatMessageList
+    <div className={cn("relative", className)} ref={containerRef}>
+      {virtualizer.getVirtualItems().map((virtualRow) => {
+        const item = virtualRows[virtualRow.index];
+        if (!item) {
+          return null;
+        }
+        return (
+          <div
+            data-index={virtualRow.index}
             key={item.key}
-            layout={messageLayout}
-            messages={item.messages}
-            isSending={index === timelineItems.length - 1 ? isSending : false}
-            hasAssistantDraft={hasAssistantDraft}
-            texts={messageTexts}
-            onToolAction={presenter.chatThreadManager.handleToolAction}
-            onFileOpen={presenter.chatThreadManager.openFilePreview}
-            onAttachmentOpen={handleAttachmentOpen}
-            onInlineTokenClick={handleInlineTokenClick}
-            resolveFileContentUrl={resolveFileContentUrl}
-            renderInlineDisplay={renderInlineDisplayWithFiles}
-            renderToolAgent={renderChatToolAgent}
-            renderPanelAppCard={renderChatPanelAppCard}
-          />
-        ),
-      )}
+            ref={virtualizer.measureElement}
+            onBlurCapture={handleRowBlur}
+            onFocusCapture={() => setFocusedRowKey(item.key)}
+            className="absolute left-0 top-0 w-full"
+          >
+            {item.kind === "compaction" ? (
+              <ChatContextCompactionDivider checkpoint={item.checkpoint} />
+            ) : item.kind === "context-inheritance" ? (
+              <ChatContextInheritanceDivider inheritance={item.inheritance} />
+            ) : (
+              <div className={item.kind === "message" ? "pb-5" : undefined}>
+                <ChatMessageList
+                  assistantAvatarIcon={assistantAvatarIcon}
+                  layout={messageLayout}
+                  messages={item.kind === "message" ? [item.message] : []}
+                  isSending={item.kind === "typing"}
+                  hasAssistantDraft={hasAssistantDraft}
+                  texts={messageTexts}
+                  onToolAction={presenter.chatThreadManager.handleToolAction}
+                  onFileOpen={presenter.chatThreadManager.openFilePreview}
+                  onAttachmentOpen={handleAttachmentOpen}
+                  onInlineTokenClick={handleInlineTokenClick}
+                  resolveFileContentUrl={resolveFileContentUrl}
+                  renderInlineDisplay={renderInlineDisplayWithFiles}
+                  renderToolAgent={renderChatToolAgent}
+                  renderPanelAppCard={renderChatPanelAppCard}
+                />
+              </div>
+            )}
+          </div>
+        );
+      })}
     </div>
   );
 }