@@ -509,8 +792,8 @@ export const ChatHistoryPane = memo(function ChatHistoryPane({
hiddenMessageCount={hiddenMessageCount}
isUnusedConversation={isUnusedConversation(conversation)}
locale={locale}
- messages={visibleMessages}
- messageStartIndex={visibleMessageStartIndex}
+ messages={messages}
+ messageStartIndex={0}
onArticleRef={handleArticleRef}
onCopyMessage={onCopyMessage}
onAddToNote={onAddToNote}
@@ -522,13 +805,15 @@ export const ChatHistoryPane = memo(function ChatHistoryPane({
onRespondQuestion={onRespondQuestion}
onRetry={onRetry}
onRevealEarlier={revealEarlierMessages}
+ onRowRef={handleRowRef}
renderAssistantHtml={conversationHtmlRenderingEnabled}
retryContent={
- conversation.messages.at(-2)?.role === "user"
- ? conversation.messages.at(-2)?.content
+ messages.at(-2)?.role === "user"
+ ? messages.at(-2)?.content
: undefined
}
- totalMessageCount={conversation.messages.length}
+ segments={segments}
+ totalMessageCount={total}
/>
diff --git a/src/renderer/src/ChatTimeline.tsx b/src/renderer/src/ChatTimeline.tsx
index 313e4386..541a1d33 100644
--- a/src/renderer/src/ChatTimeline.tsx
+++ b/src/renderer/src/ChatTimeline.tsx
@@ -43,6 +43,8 @@ import { useLiveMessage } from './live-message-store'
import { formatTime, type TimeFormatLocale } from './time-format'
import { formatCompactTokens } from './token-format'
import { isCancelledMessage } from './message-terminal-status'
+import type { MessageWindowSegment } from './chat-message-window'
+
export type ToolActivity = ConversationToolActivity
@@ -1343,6 +1345,39 @@ export const ChatMessageRow = memo(function ChatMessageRow(
return
})
+type ChatMessageWindowRowProps = ChatMessageRowProps & {
+ index: number
+ onRowRef?: (messageId: string, element: HTMLElement | null) => void
+}
+
+// A measured wrapper around one row of the windowed timeline. The wrapper
+// holds the row's article and its compression markers, so its height is the
+// row's full height in the list.
+const ChatMessageWindowRow = memo(function ChatMessageWindowRow({
+ index,
+ onRowRef,
+ ...props
+}: ChatMessageWindowRowProps): React.JSX.Element {
+ const messageId = props.message.id
+ const rowRef = useMemo(
+ () =>
+ onRowRef
+ ? (element: HTMLDivElement | null) => onRowRef(messageId, element)
+ : undefined,
+ [messageId, onRowRef]
+ )
+ return (
+
+
+
+ )
+})
+
type ChatTimelineProps = {
onAddToNote?: ChatMessageRowProps['onAddToNote']
onOpenImageModelSettings?: () => void
@@ -1382,6 +1417,14 @@ type ChatTimelineProps = {
renderAssistantHtml?: boolean
retryContent?: string
totalMessageCount: number
+ /**
+ * Windowed layout (PERF-14). When set, `messages` holds every loaded
+ * message starting at `messageStartIndex`, and only the rows listed here
+ * are mounted; spacers stand in for the rest. Each row is wrapped in an
+ * element reported through `onRowRef` so the pane can measure it.
+ */
+ segments?: readonly MessageWindowSegment[]
+ onRowRef?: (messageId: string, element: HTMLElement | null) => void
}
export const ChatTimeline = memo(function ChatTimeline({
@@ -1408,10 +1451,84 @@ export const ChatTimeline = memo(function ChatTimeline({
onRevealEarlier,
renderAssistantHtml = false,
retryContent,
- totalMessageCount
+ totalMessageCount,
+ segments,
+ onRowRef
}: ChatTimelineProps): React.JSX.Element {
const { t } = useTranslation('app')
+ if (segments) {
+ const rowProps = {
+ onAddToNote,
+ onOpenImageModelSettings,
+ onReselectImageSources,
+ onEditImage,
+ artifactById,
+ conversationId,
+ locale,
+ onArticleRef,
+ onCopyMessage,
+ onDownloadImage,
+ onOpenCitationContext,
+ onOpenCitationSource,
+ onOpenImage,
+ onRespondApproval,
+ onRespondQuestion,
+ onRetry,
+ renderAssistantHtml,
+ retryContent
+ }
+ // One flat keyed list, so the "load earlier" control keeps its DOM node
+ // (and focus) while the rows around it change. The control sits above
+ // the top spacer, at the start of the scrollable history.
+ const children: React.JSX.Element[] = []
+ if (hiddenMessageCount > 0) {
+ children.push(
+
+ )
+ }
+ for (const segment of segments) {
+ if (segment.kind === 'spacer') {
+ children.push(
+
+ )
+ continue
+ }
+ const message = messages[segment.index - messageStartIndex]
+ if (!message) continue
+ children.push(
+
+ )
+ }
+ return (
+
{children}
+ )
+ }
+
return (
{hiddenMessageCount > 0 && (
diff --git a/src/renderer/src/ConversationSidebar.tsx b/src/renderer/src/ConversationSidebar.tsx
new file mode 100644
index 00000000..1968a1fd
--- /dev/null
+++ b/src/renderer/src/ConversationSidebar.tsx
@@ -0,0 +1,728 @@
+import {
+ Check,
+ ChevronDown,
+ ChevronRight,
+ Copy,
+ Download,
+ Edit3,
+ GitFork,
+ MessageSquarePlus,
+ MoreHorizontal,
+ Pin,
+ PinOff,
+ RefreshCw,
+ Trash2,
+ X,
+} from "lucide-react";
+import { memo, useDeferredValue, useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import {
+ projectChannelLabels,
+ type AssistantProject,
+ type AssistantSchedule,
+ type AssistantTask,
+} from "../../shared/assistant-contracts";
+import { getConversationDisplayTitle, type Conversation } from "./chat-conversation";
+import type { ConversationActivity } from "./conversation-activity";
+import { useConversationList, type ConversationStore } from "./conversation-store";
+import { formatMediumDateTime } from "./locale-formatters";
+import type { AppNotificationInput } from "./notifications";
+import { OverflowMarquee } from "./OverflowMarquee";
+import { findTaskSchedule } from "./TaskScheduleActions";
+import { formatConversationListTime, type TimeFormatLocale } from "./time-format";
+import { useConversationListOrder } from "./use-conversation-list-order";
+import { DestructiveConfirmActions } from "./WorkspacePrimitives";
+
+/** Delay before searching message text, so typing does not scan every keystroke. */
+const conversationSearchSnapshotDelayMs = 250;
+const emptyConversationTasks: AssistantTask[] = [];
+const emptyAssistantSchedules: AssistantSchedule[] = [];
+type SearchMatches = { query: string; ids: ReadonlySet
};
+const noSearchMatches: SearchMatches = { query: "", ids: new Set() };
+
+export function ConversationBranchBadge({
+ sourceTitle,
+}: {
+ sourceTitle: string;
+}): React.JSX.Element {
+ const { t } = useTranslation("app");
+ const label = t("conversation.branch.badge", {
+ title: sourceTitle,
+ });
+ return (
+
+
+
+ );
+}
+
+export type ConversationListRowHandlers = {
+ toggleTasks: (conversationId: string) => void;
+ select: (conversationId: string) => void;
+ toggleActions: (conversationId: string) => void;
+ registerActionTrigger: (conversationId: string, element: HTMLButtonElement | null) => void;
+ closeActions: (conversationId: string) => void;
+ pin: (conversation: Conversation) => void;
+ branch: (conversation: Conversation, disabledReason: string | undefined) => void;
+ startRename: (conversationId: string) => void;
+ copy: (conversation: Conversation) => void;
+ exportConversation: (conversation: Conversation) => void;
+ cancelDelete: () => void;
+ confirmDelete: (conversationId: string) => void;
+ requestDelete: (conversationId: string) => void;
+ saveTitle: (conversationId: string, title: string) => void;
+ cancelRename: (conversationId: string) => void;
+ openTask: (task: AssistantTask) => void;
+ viewAllTasks: (conversationId: string, firstTaskId: string | undefined) => void;
+};
+
+type ConversationListRowProps = {
+ conversation: Conversation;
+ conversationTitle: string;
+ conversationTasks: readonly AssistantTask[];
+ tasksExpanded: boolean;
+ activity: ConversationActivity | undefined;
+ branchSourceTitle: string | undefined;
+ branchDisabledReason: string | undefined;
+ branching: boolean;
+ active: boolean;
+ unread: boolean;
+ actionsOpen: boolean;
+ menuVisible: boolean;
+ pinDisabled: boolean;
+ renaming: boolean;
+ confirmingDelete: boolean;
+ deleting: boolean;
+ selectedTaskId: string | undefined;
+ schedules: readonly AssistantSchedule[];
+ locale: TimeFormatLocale;
+ /** Current calendar day; re-renders rows so "today" times stay correct. */
+ listTimeDay: string;
+ actionsRef: React.RefObject;
+ handlers: ConversationListRowHandlers;
+};
+
+// Rows skip re-rendering unless their own props change, so streaming into one
+// conversation re-renders only that row instead of the whole list.
+const ConversationListRow = memo(function ConversationListRow({
+ conversation,
+ conversationTitle,
+ conversationTasks,
+ tasksExpanded,
+ activity,
+ branchSourceTitle,
+ branchDisabledReason,
+ branching,
+ active,
+ unread,
+ actionsOpen,
+ menuVisible,
+ pinDisabled,
+ renaming,
+ confirmingDelete,
+ deleting,
+ selectedTaskId,
+ schedules,
+ locale,
+ listTimeDay,
+ actionsRef,
+ handlers,
+}: ConversationListRowProps): React.JSX.Element {
+ void listTimeDay;
+ const { t } = useTranslation("app");
+ const { t: tWorkspace } = useTranslation("workspace");
+ const branchDisabledReasonId = `conversation-branch-disabled-${conversation.id}`;
+ return (
+
+
+ {conversationTasks.length > 0 && (
+
+ )}
+
+ {activity && (
+
+ )}
+
+
+ {menuVisible && createPortal(
+
{
+ if (event.defaultPrevented) return;
+ if (event.key === "Escape") {
+ event.preventDefault();
+ event.stopPropagation();
+ handlers.closeActions(conversation.id);
+ return;
+ }
+ if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+ event.preventDefault();
+ const items = Array.from(event.currentTarget.querySelectorAll
('button:not(:disabled):not([aria-disabled="true"])'));
+ const index = items.indexOf(document.activeElement as HTMLButtonElement);
+ const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : (index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length;
+ items[next]?.focus();
+ }}
+ aria-label={t("conversation.actions.region", {
+ title: conversationTitle,
+ })}
+ className="conversation-actions"
+ id={`conversation-actions-${conversation.id}`}
+ >
+
+ {!conversation.remote && (
+ <>
+
+ {branchDisabledReason && (
+
+ {branchDisabledReason}
+
+ )}
+
+ )}
+ {!conversation.remote && (
+
+ )}
+
+
+ {!conversation.remote && (
+ }
+ onCancel={handlers.cancelDelete}
+ onConfirm={() => handlers.confirmDelete(conversation.id)}
+ onRequestConfirm={() => handlers.requestDelete(conversation.id)}
+ triggerAriaLabel={t(
+ "conversation.delete.triggerAria",
+ {
+ title: conversationTitle,
+ },
+ )}
+ triggerLabel={t("conversation.delete.trigger")}
+ />
+ )}
+ , document.body
+ )}
+ {!conversation.remote &&
+ renaming && (
+
+ )}
+ {tasksExpanded && conversationTasks.length > 0 && (
+
+ {conversationTasks.slice(0, 3).map((task) => {
+ const schedule = findTaskSchedule(task, schedules);
+ const statusLabel = tWorkspace(
+ `task.status.${task.status}`,
+ );
+ const metadata = schedule
+ ? [
+ tWorkspace(
+ `sidebar.tasks.schedule.recurrence.${schedule.recurrence}`,
+ ),
+ task.status === "completed"
+ ? undefined
+ : statusLabel,
+ ]
+ .filter((value) => value !== undefined)
+ .join(" · ")
+ : task.status === "completed"
+ ? ""
+ : statusLabel;
+ return (
+ -
+
+
+ );
+ })}
+ {conversationTasks.length > 3 && (
+ -
+
+
+ )}
+
+ )}
+
+ {!loadError &&
+ filteredConversations.map((conversation) => {
+ const conversationTasks =
+ tasksByConversation.get(conversation.id) ?? emptyConversationTasks;
+ const tasksExpanded = expandedTaskConversationIds.has(conversation.id);
+ const branchUnavailable =
+ activeConversationIds.has(conversation.id) ||
+ queuedConversationIds.has(conversation.id);
+ const branchDisabledReason = !conversationStoreReady
+ ? t("conversation.branch.storageUnavailable")
+ : branchingConversationId
+ ? branchingConversationId === conversation.id
+ ? t("conversation.branch.creating")
+ : t("conversation.branch.anotherCreating")
+ : branchUnavailable
+ ? t("conversation.branch.unavailable")
+ : undefined;
+ return (
+
task.id === selectedAssistantTaskId) ? selectedAssistantTaskId : undefined}
+ tasksExpanded={tasksExpanded}
+ unread={unreadConversationIds.has(conversation.id)}
+ />
+ );
+ })}
+ {loadError ? (
+
+ {t("conversation.loadFailed")}
+ {loadError}
+
+
+ ) : filteredConversations.length === 0 ? (
+ deferredSearchQuery.trim() ? (
+
+ {t("conversation.noMatches")}
+ {t("conversation.noMatchesDescription")}
+
+
+ ) : activeProjectKind === "channel" ? (
+
+ {t("conversation.noRemote")}
+ {t("chat.remote.waiting")}
+
+ ) : (
+
+ {t("conversation.empty")}
+ {t("conversation.emptyDescription")}
+
+
+ )
+ ) : null}
+
)
expect(vi.getTimerCount()).toBe(1)
diff --git a/src/renderer/src/use-conversation-list-order.ts b/src/renderer/src/use-conversation-list-order.ts
index 04a997b5..23d177ff 100644
--- a/src/renderer/src/use-conversation-list-order.ts
+++ b/src/renderer/src/use-conversation-list-order.ts
@@ -1,4 +1,4 @@
-import { useEffect, useEffectEvent, useMemo, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
import { sortConversationsForDisplay, type Conversation } from './chat-conversation'
export function useConversationListOrder(
@@ -16,8 +16,10 @@ export function useConversationListOrder(
}))
const byId = useMemo(() => new Map(conversations.map(item => [item.id, item])), [conversations])
const reconciled = useMemo(() => {
+ const listed = new Set(order.ids)
+ // New, repinned, or (after a reorder from older input) unlisted rows.
const changed = new Set(conversations.filter(item =>
- !order.pins.has(item.id) || order.pins.get(item.id) !== Boolean(item.pinned),
+ !order.pins.has(item.id) || order.pins.get(item.id) !== Boolean(item.pinned) || !listed.has(item.id),
).map(item => item.id))
const scopeChanged = order.scope !== scope
if (!scopeChanged && !changed.size && order.ids.length === byId.size) return order
@@ -37,15 +39,21 @@ export function useConversationListOrder(
}, [byId, conversations, order, scope])
if (reconciled !== order) setOrder(reconciled)
- const reorder = useEffectEvent(() => {
- if (menuOpen || mouseWithin.current || Date.now() < scrollIdleAt.current ||
- listRef.current?.contains(document.activeElement)) return
- const ids = sortConversationsForDisplay(conversations).map(item => item.id)
- setOrder(current => ids.every((id, index) => current.ids[index] === id) && ids.length === current.ids.length
- ? current : { ...current, ids })
+ // Latest inputs for the interval. Not useEffectEvent: React 19.2 never
+ // refreshes effect events of simple memo components (such as the sidebar),
+ // so the tick would sort a stale list.
+ const latest = useRef({ conversations, menuOpen })
+ useLayoutEffect(() => {
+ latest.current = { conversations, menuOpen }
})
useEffect(() => {
- const timer = window.setInterval(() => reorder(), 5000)
+ const timer = window.setInterval(() => {
+ if (latest.current.menuOpen || mouseWithin.current || Date.now() < scrollIdleAt.current ||
+ listRef.current?.contains(document.activeElement)) return
+ const ids = sortConversationsForDisplay(latest.current.conversations).map(item => item.id)
+ setOrder(current => ids.every((id, index) => current.ids[index] === id) && ids.length === current.ids.length
+ ? current : { ...current, ids })
+ }, 5000)
return () => window.clearInterval(timer)
}, [])
diff --git a/tests/support/app-perf-driver.mjs b/tests/support/app-perf-driver.mjs
index 79398fa8..cf1c601f 100644
--- a/tests/support/app-perf-driver.mjs
+++ b/tests/support/app-perf-driver.mjs
@@ -575,7 +575,7 @@ try {
return { latency: { count: 1, p50: openMs, p95: openMs, max: openMs }, fields: { openMs, renderedMessages } }
})
- await measure('scroll-long-conversation', 'Wheel-scroll up through the long conversation for 3 s', async () => {
+ await measure('scroll-long-conversation', 'Wheel-scroll up through the long conversation for 3 s', () => withRendererProfile('scroll-long-conversation', async () => {
const point = await js(`(() => { const e = document.querySelector('.chat-history-pane[data-active=true] #chat-message-list') || document.querySelector('.chat-history-pane[data-active=true]'); const r = e.getBoundingClientRect(); return { x: Math.round(r.x + r.width / 2), y: Math.round(r.y + r.height / 2) }; })()`)
const scroller = `(() => { const p = document.querySelector('.chat-history-pane[data-active=true]'); const c = p && [p, ...p.querySelectorAll('*')].find(e => e.scrollHeight > e.clientHeight + 4 && /(auto|scroll)/.test(getComputedStyle(e).overflowY)); return c ? c.scrollTop : null; })()`;
const before = await js(scroller)
@@ -587,7 +587,7 @@ try {
await sleep(300)
const after = await js(scroller)
return { fields: { scrollTopBefore: before, scrollTopAfter: after, scrolledPx: before === null || after === null ? null : before - after } }
- })
+ }))
await screenshot('long-conversation')
diff --git a/tests/support/frosted-glass-driver.mjs b/tests/support/frosted-glass-driver.mjs
index d938f441..c2c7ba14 100644
--- a/tests/support/frosted-glass-driver.mjs
+++ b/tests/support/frosted-glass-driver.mjs
@@ -120,11 +120,22 @@ app.whenReady().then(async () => {
await waitFor("!document.querySelector('.runtime-checklist__content')")
await evaluate(`document.querySelector('.chat-history-pane[data-active="true"] .chat').scrollTop = 400`)
await waitFor("document.querySelector('.chat-scroll-to-bottom') !== null")
- const toggleAnchor = await evaluate(`document.querySelector('.chat-history-pane[data-active="true"] article').getBoundingClientRect().top`)
+ // The timeline is windowed (PERF-14): the first mounted row can change while
+ // the reader's place stays put, so track one visible message by id.
+ const anchorRow = await evaluate(`(() => {
+ const pane = document.querySelector('.chat-history-pane[data-active="true"]');
+ const top = pane.querySelector('.chat').getBoundingClientRect().top;
+ const row = [...pane.querySelectorAll('article')].find(a => a.getBoundingClientRect().bottom > top + 1);
+ const id = row.closest('[data-message-id]')?.dataset.messageId ?? row.id;
+ return { id, top: row.getBoundingClientRect().top };
+ })()`)
+ const anchorTop = `(() => { const pane = document.querySelector('.chat-history-pane[data-active="true"]');
+ const wrapper = pane.querySelector('[data-message-id=${JSON.stringify(anchorRow.id)}]');
+ return (wrapper?.querySelector('article') ?? document.getElementById(${JSON.stringify(anchorRow.id)})).getBoundingClientRect().top; })()`
for (const enabled of [true, false]) {
await evaluate(`for (const e of [document.documentElement, document.querySelector('.app-shell')]) e.dataset.frostedGlass = '${enabled}'`)
await evaluate('new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)))')
- assert.equal(await evaluate(`document.querySelector('.chat-history-pane[data-active="true"] article').getBoundingClientRect().top`), toggleAnchor, 'toggle preserves reader position')
+ assert.equal(await evaluate(anchorTop), anchorRow.top, 'toggle preserves reader position')
}
for (const theme of ['light', 'dark']) {
await evaluate(`document.documentElement.dataset.theme = '${theme}'`)
@@ -169,10 +180,16 @@ app.whenReady().then(async () => {
await waitFor(`document.querySelector('.chat-history-pane[data-active="true"]').dataset.conversationId === 'a'`)
assert.equal(await evaluate(`document.querySelector('.chat-history-pane[data-active="true"] .chat').scrollTop`), 400, 'keep-alive scroll position')
await evaluate(`document.querySelector('.chat-history-pane[data-active="true"] .chat').scrollTop = 0`)
- const anchor = await evaluate(`document.querySelector('.chat-history-pane[data-active="true"] article').getBoundingClientRect().top`)
+ const firstRowId = `document.querySelector('.chat-history-pane[data-active="true"] [data-message-id]').dataset.messageId`
+ const prependId = await evaluate(firstRowId)
+ const rowTop = id => `document.querySelector('.chat-history-pane[data-active="true"] [data-message-id=${JSON.stringify(id)}] article').getBoundingClientRect().top`
+ const anchor = await evaluate(rowTop(prependId))
await click('.load-earlier-messages')
- await waitFor(`document.querySelectorAll('.chat-history-pane[data-active="true"] article').length === 100`)
- const restoredAnchor = await evaluate(`document.querySelectorAll('.chat-history-pane[data-active="true"] article')[20].getBoundingClientRect().top`)
+ // Earlier rows load above; the windowed list may mount some of them, but the
+ // row the reader was looking at must not move.
+ await waitFor(`${firstRowId} !== ${JSON.stringify(prependId)}`)
+ await evaluate('new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)))')
+ const restoredAnchor = await evaluate(rowTop(prependId))
assert.ok(Math.abs(restoredAnchor - anchor) < 1, 'prepend preserves message anchor')
await click('.runtime-checklist__toggle')
await waitFor(`!!document.querySelector('.runtime-checklist__content')`)