+
= (props) => {
- const renderContent = (): JSX.Element => {
- const sessionId = props.activeSessionId()
+ const sessionId = createMemo(() => props.activeSessionId())
+ const hasSession = createMemo(() => Boolean(sessionId() && sessionId() !== "info"))
+ const diffs = createMemo(() => (hasSession() ? props.activeSessionDiffs() : null))
- const hasSession = Boolean(sessionId && sessionId !== "info")
- const diffs = hasSession ? props.activeSessionDiffs() : null
+ const sorted = createMemo(() => {
+ const list = diffs()
+ if (!Array.isArray(list)) return []
+ return [...list].sort((a, b) => String(a.file || "").localeCompare(String(b.file || "")))
+ })
- const sorted = Array.isArray(diffs) ? [...diffs].sort((a, b) => String(a.file || "").localeCompare(String(b.file || ""))) : []
- const totals = sorted.reduce(
+ const totals = createMemo(() => {
+ return sorted().reduce(
(acc, item) => {
acc.additions += typeof item.additions === "number" ? item.additions : 0
acc.deletions += typeof item.deletions === "number" ? item.deletions : 0
@@ -47,41 +51,61 @@ const ChangesTab: Component = (props) => {
},
{ additions: 0, deletions: 0 },
)
+ })
- const mostChanged = sorted.length
- ? sorted.reduce((best, item) => {
- const bestAdd = typeof (best as any)?.additions === "number" ? (best as any).additions : 0
- const bestDel = typeof (best as any)?.deletions === "number" ? (best as any).deletions : 0
- const bestScore = bestAdd + bestDel
+ const mostChanged = createMemo(() => {
+ const items = sorted()
+ if (items.length === 0) return null
+ return items.reduce((best, item) => {
+ const bestAdd = typeof (best as any)?.additions === "number" ? (best as any).additions : 0
+ const bestDel = typeof (best as any)?.deletions === "number" ? (best as any).deletions : 0
+ const bestScore = bestAdd + bestDel
- const add = typeof (item as any)?.additions === "number" ? (item as any).additions : 0
- const del = typeof (item as any)?.deletions === "number" ? (item as any).deletions : 0
- const score = add + del
+ const add = typeof (item as any)?.additions === "number" ? (item as any).additions : 0
+ const del = typeof (item as any)?.deletions === "number" ? (item as any).deletions : 0
+ const score = add + del
- if (score > bestScore) return item
- if (score < bestScore) return best
- return String(item.file || "").localeCompare(String((best as any)?.file || "")) < 0 ? item : best
- }, sorted[0])
- : null
+ if (score > bestScore) return item
+ if (score < bestScore) return best
+ return String(item.file || "").localeCompare(String((best as any)?.file || "")) < 0 ? item : best
+ }, items[0])
+ })
- // Auto-select the most-changed file if none selected.
+ const selectedFileData = createMemo(() => {
const currentSelected = props.selectedFile()
- const selectedFileData = sorted.find((f) => f.file === currentSelected) || mostChanged
-
- const scopeKey = `${props.instanceId}:${hasSession ? sessionId : "no-session"}`
-
- const emptyViewerMessage = () => {
- if (!hasSession) return props.t("instanceShell.sessionChanges.noSessionSelected")
- if (diffs === undefined) return props.t("instanceShell.sessionChanges.loading")
- if (!Array.isArray(diffs) || diffs.length === 0) return props.t("instanceShell.sessionChanges.empty")
- return props.t("instanceShell.filesShell.viewerEmpty")
+ const items = sorted()
+ if (currentSelected) {
+ const match = items.find((f) => f.file === currentSelected)
+ if (match) return match
}
+ return mostChanged()
+ })
+
+ const scopeKey = createMemo(() => `${props.instanceId}:${hasSession() ? sessionId() : "no-session"}`)
+
+ const emptyViewerMessage = createMemo(() => {
+ if (!hasSession()) return props.t("instanceShell.sessionChanges.noSessionSelected")
+ const currentDiffs = diffs()
+ if (currentDiffs === undefined) return props.t("instanceShell.sessionChanges.loading")
+ if (!Array.isArray(currentDiffs) || currentDiffs.length === 0) return props.t("instanceShell.sessionChanges.empty")
+ return props.t("instanceShell.filesShell.viewerEmpty")
+ })
+
+ const headerPath = createMemo(() => {
+ const file = selectedFileData()
+ return file?.file ? String(file.file) : props.t("instanceShell.rightPanel.tabs.changes")
+ })
+
+ const renderContent = (): JSX.Element => {
+ const sortedList = sorted()
+ const totalsValue = totals()
+ const selected = selectedFileData()
const renderViewer = () => (
0 ? selectedFileData : null}
+ when={selected && hasSession() && sortedList.length > 0 ? selected : null}
fallback={
{emptyViewerMessage()}
@@ -90,7 +114,7 @@ const ChangesTab: Component = (props) => {
>
{(file) => (
= (props) => {
)
const renderListPanel = () => (
- 0} fallback={renderEmptyList()}>
-
+ 0} fallback={renderEmptyList()}>
+
{(item) => (
{
props.onSelectFile(item.file, props.isPhoneLayout())
}}
@@ -134,11 +158,11 @@ const ChangesTab: Component = (props) => {
)
const renderListOverlay = () => (
- 0} fallback={renderEmptyList()}>
-
+ 0} fallback={renderEmptyList()}>
+
{(item) => (
{
props.onSelectFile(item.file, true)
}}
@@ -159,8 +183,6 @@ const ChangesTab: Component = (props) => {
)
- const headerPath = () => (selectedFileData?.file ? selectedFileData.file : props.t("instanceShell.rightPanel.tabs.changes"))
-
return (
= (props) => {
= (props) => {
- const renderContent = (): JSX.Element => {
- const sessionId = props.activeSessionId()
+ const sessionId = createMemo(() => props.activeSessionId())
+ const hasSession = createMemo(() => Boolean(sessionId() && sessionId() !== "info"))
+ const entries = createMemo(() => (hasSession() ? props.entries() : null))
- const hasSession = Boolean(sessionId && sessionId !== "info")
- const entries = hasSession ? props.entries() : null
+ const sorted = createMemo(() => {
+ const list = entries()
+ if (!Array.isArray(list)) return []
+ return [...list].sort((a, b) => String(a.path || "").localeCompare(String(b.path || "")))
+ })
- const sorted = Array.isArray(entries)
- ? [...entries].sort((a, b) => String(a.path || "").localeCompare(String(b.path || "")))
- : []
-
- const totals = sorted.reduce(
+ const totals = createMemo(() => {
+ return sorted().reduce(
(acc, item) => {
acc.additions += typeof item.added === "number" ? item.added : 0
acc.deletions += typeof item.removed === "number" ? item.removed : 0
@@ -64,21 +65,33 @@ const GitChangesTab: Component = (props) => {
},
{ additions: 0, deletions: 0 },
)
+ })
- const nonDeleted = sorted.filter((item) => item && item.status !== "deleted")
-
- const emptyViewerMessage = () => {
- if (!hasSession) return "Select a session to view changes."
- if (entries === null) return "Loading git changes…"
- if (nonDeleted.length === 0) return "No git changes yet."
- return "No file selected."
- }
+ const nonDeleted = createMemo(() => sorted().filter((item) => item && item.status !== "deleted"))
+ const selectedEntry = createMemo(() => {
+ const list = sorted()
const selectedPath = props.selectedPath()
const fallbackPath = props.mostChangedPath()
- const selectedEntry =
- sorted.find((item) => item.path === selectedPath) ||
- (fallbackPath ? sorted.find((item) => item.path === fallbackPath) : null)
+ const found =
+ list.find((item) => item.path === selectedPath) ||
+ (fallbackPath ? list.find((item) => item.path === fallbackPath) : undefined)
+ return found ?? null
+ })
+
+ const emptyViewerMessage = createMemo(() => {
+ if (!hasSession()) return "Select a session to view changes."
+ const currentEntries = entries()
+ if (currentEntries === null) return "Loading git changes…"
+ if (nonDeleted().length === 0) return "No git changes yet."
+ return "No file selected."
+ })
+
+ const renderContent = (): JSX.Element => {
+ const totalsValue = totals()
+ const selected = selectedEntry()
+ const sortedList = sorted()
+ const nonDeletedList = nonDeleted()
const renderViewer = () => (
- +{totals.additions}
+ +{totalsValue.additions}
- -{totals.deletions}
+ -{totalsValue.deletions}
diff --git a/packages/ui/src/components/instance/shell/right-panel/tabs/GitChangesTab.tsx b/packages/ui/src/components/instance/shell/right-panel/tabs/GitChangesTab.tsx
index 4575f1e5..b2ab7ff4 100644
--- a/packages/ui/src/components/instance/shell/right-panel/tabs/GitChangesTab.tsx
+++ b/packages/ui/src/components/instance/shell/right-panel/tabs/GitChangesTab.tsx
@@ -1,4 +1,4 @@
-import { For, Show, type Accessor, type Component, type JSX } from "solid-js"
+import { For, Show, createMemo, type Accessor, type Component, type JSX } from "solid-js"
import type { File as GitFileStatus } from "@opencode-ai/sdk/v2/client"
import { RefreshCw } from "lucide-solid"
@@ -46,17 +46,18 @@ interface GitChangesTabProps {
}
const GitChangesTab: Component
@@ -91,12 +104,12 @@ const GitChangesTab: Component = (props) => {
fallback={
= (props) => {
}
>
{(file) => (
-
}
>
@@ -141,8 +154,8 @@ const GitChangesTab: Component = (props) => {
const renderEmptyList = () => 0} fallback={renderEmptyList()}>
-
+ 0} fallback={renderEmptyList()}>
+
{(item) => (
{emptyViewerMessage()}
const renderListPanel = () => (
- = (props) => {
)
const renderListOverlay = () => (
- 0} fallback={renderEmptyList()}>
-
+ 0} fallback={renderEmptyList()}>
+
{(item) => (
= (props) => {
)
return (
-
-
- {selectedEntry?.path || "Git Changes"}
-
+
+
+ {selected?.path || "Git Changes"}
+
= (props) => {
class="files-header-icon-button"
title={props.t("instanceShell.rightPanel.actions.refresh")}
aria-label={props.t("instanceShell.rightPanel.actions.refresh")}
- disabled={!hasSession || props.statusLoading() || entries === null}
+ disabled={!hasSession() || props.statusLoading() || entries() === null}
style={{ "margin-left": "auto" }}
onClick={() => props.onRefresh()}
>
()
if (globalCache && cacheMatches(globalCache)) {
setHtml(globalCache.html)
- part.renderCache = globalCache
notifyRendered()
return
}
@@ -100,14 +99,11 @@ export function Markdown(props: MarkdownProps) {
const commitCacheEntry = (renderedHtml: string) => {
const cacheEntry: RenderCache = { text, html: renderedHtml, theme: themeKey, mode: version }
setHtml(renderedHtml)
- part.renderCache = cacheEntry
cacheHandle.set(cacheEntry)
notifyRendered()
}
if (!highlightEnabled) {
- part.renderCache = undefined
-
try {
const rendered = await renderMarkdown(text, { suppressHighlight: true })
@@ -185,7 +181,6 @@ export function Markdown(props: MarkdownProps) {
if (latestRequestedText === text) {
const cacheEntry: RenderCache = { text, html: rendered, theme: themeKey, mode: version }
setHtml(rendered)
- part.renderCache = cacheEntry
cacheHandle.set(cacheEntry)
notifyRendered()
}
@@ -202,5 +197,15 @@ export function Markdown(props: MarkdownProps) {
const proseClass = () => "markdown-body"
- return
+ return (
+
+ )
}
diff --git a/packages/ui/src/components/message-anchors.ts b/packages/ui/src/components/message-anchors.ts
new file mode 100644
index 00000000..266ce5ff
--- /dev/null
+++ b/packages/ui/src/components/message-anchors.ts
@@ -0,0 +1,9 @@
+export const MESSAGE_ANCHOR_PREFIX = "message-anchor-"
+
+export function getMessageAnchorId(messageId: string) {
+ return `${MESSAGE_ANCHOR_PREFIX}${messageId}`
+}
+
+export function getMessageIdFromAnchorId(anchorId: string) {
+ return anchorId.startsWith(MESSAGE_ANCHOR_PREFIX) ? anchorId.slice(MESSAGE_ANCHOR_PREFIX.length) : anchorId
+}
diff --git a/packages/ui/src/components/message-block-list.tsx b/packages/ui/src/components/message-block-list.tsx
deleted file mode 100644
index 3db083cc..00000000
--- a/packages/ui/src/components/message-block-list.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Index, type Accessor } from "solid-js"
-import VirtualItem from "./virtual-item"
-import MessageBlock from "./message-block"
-import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
-
-export function getMessageAnchorId(messageId: string) {
- return `message-anchor-${messageId}`
-}
-
-const VIRTUAL_ITEM_MARGIN_PX = 800
-
-interface MessageBlockListProps {
- instanceId: string
- sessionId: string
- store: () => InstanceMessageStore
- messageIds: () => string[]
- lastAssistantIndex: () => number
- showThinking: () => boolean
- thinkingDefaultExpanded: () => boolean
- showUsageMetrics: () => boolean
- scrollContainer: Accessor
- loading?: boolean
- onRevert?: (messageId: string) => void
- onFork?: (messageId?: string) => void
- onContentRendered?: () => void
- setBottomSentinel: (element: HTMLDivElement | null) => void
- suspendMeasurements?: () => boolean
-}
-
-export default function MessageBlockList(props: MessageBlockListProps) {
- return (
- <>
-
- {(messageId, index) => (
- !props.loading}
- suspendMeasurements={props.suspendMeasurements}
- >
-
- )}
-
-
-
- )
-}
diff --git a/packages/ui/src/components/message-block.tsx b/packages/ui/src/components/message-block.tsx
index 0d485c94..9b518435 100644
--- a/packages/ui/src/components/message-block.tsx
+++ b/packages/ui/src/components/message-block.tsx
@@ -1,5 +1,5 @@
-import { For, Match, Show, Switch, createEffect, createMemo, createSignal, untrack } from "solid-js"
-import { ChevronsDownUp, ChevronsUpDown, ExternalLink, FoldVertical, Trash2 } from "lucide-solid"
+import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onCleanup, untrack } from "solid-js"
+import { ChevronsDownUp, ChevronsUpDown, ExternalLink, FoldVertical, ListStart, Trash } from "lucide-solid"
import MessageItem from "./message-item"
import ToolCall from "./tool-call"
import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
@@ -12,8 +12,17 @@ import { formatTokenTotal } from "../lib/formatters"
import { sessions, setActiveParentSession, setActiveSession } from "../stores/sessions"
import { setActiveInstanceId } from "../stores/instances"
import { showAlertDialog } from "../stores/alerts"
-import { deleteMessagePart } from "../stores/session-actions"
+import { deleteMessage } from "../stores/session-actions"
import { useI18n } from "../lib/i18n"
+import type { DeleteHoverState } from "../types/delete-hover"
+
+function DeleteUpToIcon() {
+ return (
+
+ )
+}
const TOOL_ICON = "🔧"
const USER_BORDER_COLOR = "var(--message-user-border)"
@@ -23,10 +32,10 @@ const TOOL_BORDER_COLOR = "var(--message-tool-border)"
type ToolCallPart = Extract
-type ToolState = import("@opencode-ai/sdk").ToolState
-type ToolStateRunning = import("@opencode-ai/sdk").ToolStateRunning
-type ToolStateCompleted = import("@opencode-ai/sdk").ToolStateCompleted
-type ToolStateError = import("@opencode-ai/sdk").ToolStateError
+type ToolState = import("@opencode-ai/sdk/v2").ToolState
+type ToolStateRunning = import("@opencode-ai/sdk/v2").ToolStateRunning
+type ToolStateCompleted = import("@opencode-ai/sdk/v2").ToolStateCompleted
+type ToolStateError = import("@opencode-ai/sdk/v2").ToolStateError
function isToolStateRunning(state: ToolState | undefined): state is ToolStateRunning {
return Boolean(state && state.status === "running")
@@ -194,8 +203,13 @@ interface MessageContentItemProps {
messageIndex: number
lastAssistantIndex: () => number
onRevert?: (messageId: string) => void
+ onDeleteMessagesUpTo?: (messageId: string) => void | Promise
onFork?: (messageId?: string) => void
onContentRendered?: () => void
+ showDeleteMessage?: boolean
+ onDeleteHoverChange?: (state: DeleteHoverState) => void
+ selectedMessageIds?: () => Set
+ onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
}
function isSupportedPartType(part: unknown): boolean {
@@ -282,7 +296,12 @@ function MessageContentItem(props: MessageContentItemProps) {
sessionId={props.sessionId}
isQueued={isQueued()}
showAgentMeta={showAgentMeta()}
+ showDeleteMessage={props.showDeleteMessage}
+ onDeleteHoverChange={props.onDeleteHoverChange}
+ selectedMessageIds={props.selectedMessageIds}
+ onToggleSelectedMessage={props.onToggleSelectedMessage}
onRevert={props.onRevert}
+ onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
onFork={props.onFork}
onContentRendered={props.onContentRendered}
/>
@@ -298,11 +317,41 @@ interface ToolCallItemProps {
messageId: string
partId: string
onContentRendered?: () => void
+ showDeleteMessage?: boolean
+ deleteHover?: () => DeleteHoverState
+ onDeleteHoverChange?: (state: DeleteHoverState) => void
+ onDeleteMessagesUpTo?: (messageId: string) => void | Promise
+ selectedMessageIds?: () => Set
+ selectedToolPartKeys?: () => Set
+ onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
}
function ToolCallItem(props: ToolCallItemProps) {
const { t } = useI18n()
- const [deleting, setDeleting] = createSignal(false)
+ const [deletingMessage, setDeletingMessage] = createSignal(false)
+ const [deletingUpTo, setDeletingUpTo] = createSignal(false)
+
+ const isSelectedForDeletion = () => Boolean(props.selectedMessageIds?.().has(props.messageId))
+
+ const isSelectedToolPartForDeletion = () => Boolean(props.selectedToolPartKeys?.().has(`${props.messageId}:${props.partId}`))
+
+ const isDeleteOverlayActive = () => {
+ if (isSelectedForDeletion()) return true
+ if (isSelectedToolPartForDeletion()) return true
+ const hover = props.deleteHover?.() ?? ({ kind: "none" } as DeleteHoverState)
+ if (hover.kind === "message") {
+ return hover.messageId === props.messageId
+ }
+ if (hover.kind === "deleteUpTo") {
+ const ids = props.store().getSessionMessageIds(props.sessionId)
+ const targetIndex = ids.indexOf(hover.messageId)
+ if (targetIndex === -1) return false
+ const currentIndex = ids.indexOf(props.messageId)
+ if (currentIndex === -1) return false
+ return currentIndex >= targetIndex
+ }
+ return false
+ }
const record = createMemo(() => props.store().getMessage(props.messageId))
const messageInfo = createMemo(() => props.store().getMessageInfo(props.messageId))
@@ -319,14 +368,6 @@ function ToolCallItem(props: ToolCallItemProps) {
const messageVersion = createMemo(() => record()?.revision ?? 0)
const partVersion = createMemo(() => partEntry()?.revision ?? 0)
- const deleteDisabled = createMemo(() => {
- if (deleting()) return true
- // Avoid deleting while a tool is actively running to prevent confusing UI states.
- if (isToolStateRunning(toolState())) return true
- // Avoid deleting permission prompts from here; those are interactive.
- return Boolean(toolPart()?.pendingPermission)
- })
-
const taskSessionId = createMemo(() => {
const state = toolState()
if (!state) return ""
@@ -350,38 +391,72 @@ function ToolCallItem(props: ToolCallItemProps) {
navigateToTaskSession(location)
}
- const handleDeleteToolPart = async (event: MouseEvent) => {
+ const handleDeleteMessage = async (event: MouseEvent) => {
event.preventDefault()
event.stopPropagation()
- if (deleteDisabled()) return
+ if (!props.showDeleteMessage) return
+ if (deletingMessage()) return
- setDeleting(true)
+ setDeletingMessage(true)
try {
- await deleteMessagePart(props.instanceId, props.sessionId, props.messageId, props.partId)
+ await deleteMessage(props.instanceId, props.sessionId, props.messageId)
} catch (error) {
- showAlertDialog(t("messageBlock.tool.deletePart.failed.message"), {
- title: t("messageBlock.tool.deletePart.failed.title"),
+ showAlertDialog(t("messageItem.actions.deleteMessageFailedMessage"), {
+ title: t("messageItem.actions.deleteMessageFailedTitle"),
detail: error instanceof Error ? error.message : String(error),
variant: "error",
})
} finally {
- setDeleting(false)
+ setDeletingMessage(false)
+ }
+ }
+
+ const handleDeleteUpTo = async (event: MouseEvent) => {
+ event.preventDefault()
+ event.stopPropagation()
+ if (!props.showDeleteMessage) return
+ if (!props.onDeleteMessagesUpTo) return
+ if (deletingUpTo()) return
+
+ setDeletingUpTo(true)
+ try {
+ await props.onDeleteMessagesUpTo(props.messageId)
+ } finally {
+ setDeletingUpTo(false)
}
}
return (
{(resolvedToolPart) => (
- <>
+
+ selectedToolPartKeys?: () => Set
+ onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
onRevert?: (messageId: string) => void
+ onDeleteMessagesUpTo?: (messageId: string) => void | Promise
onFork?: (messageId?: string) => void
onContentRendered?: () => void
}
@@ -481,6 +579,30 @@ export default function MessageBlock(props: MessageBlockProps) {
const messageInfo = createMemo(() => props.store().getMessageInfo(props.messageId))
const sessionCache = getSessionRenderCache(props.instanceId, props.sessionId)
+ const isDeleteMessageHovered = () => {
+ const hover = props.deleteHover?.() ?? ({ kind: "none" } as DeleteHoverState)
+
+ const selected = props.selectedMessageIds?.() ?? new Set()
+ if (selected.has(props.messageId)) {
+ return true
+ }
+
+ if (hover.kind === "message") {
+ return hover.messageId === props.messageId
+ }
+
+ if (hover.kind === "deleteUpTo") {
+ const ids = props.store().getSessionMessageIds(props.sessionId)
+ const targetIndex = ids.indexOf(hover.messageId)
+ if (targetIndex === -1) return false
+ const currentIndex = ids.indexOf(props.messageId)
+ if (currentIndex === -1) return false
+ return currentIndex >= targetIndex
+ }
+
+ return false
+ }
+
const block = createMemo(() => {
const current = record()
if (!current) return null
@@ -668,9 +790,13 @@ export default function MessageBlock(props: MessageBlockProps) {
return (
{(resolvedBlock) => (
-
- +{totals.additions}
+ +{totalsValue.additions}
- -{totals.deletions}
+ -{totalsValue.deletions}
{(err) => {err()}}
@@ -226,23 +239,23 @@ const GitChangesTab: Component
-
)}
)
@@ -470,7 +562,13 @@ interface MessageBlockProps {
showThinking: () => boolean
thinkingDefaultExpanded: () => boolean
showUsageMetrics: () => boolean
+ deleteHover?: () => DeleteHoverState
+ onDeleteHoverChange?: (state: DeleteHoverState) => void
+ selectedMessageIds?: () => Set
+
-
+
+
+
+
+
@@ -418,7 +510,7 @@ function ToolCallItem(props: ToolCallItemProps) {
sessionId={props.sessionId}
onContentRendered={props.onContentRendered}
/>
-
+
+
@@ -709,6 +847,14 @@ export default function MessageBlock(props: MessageBlockProps) {
part={(item as StepDisplayItem).part}
messageInfo={(item as StepDisplayItem).messageInfo}
showAgentMeta
+ showDeleteMessage={index() === 0}
+ instanceId={props.instanceId}
+ sessionId={props.sessionId}
+ messageId={props.messageId}
+ onDeleteHoverChange={props.onDeleteHoverChange}
+ onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+ selectedMessageIds={props.selectedMessageIds}
+ onToggleSelectedMessage={props.onToggleSelectedMessage}
/>
@@ -718,6 +864,14 @@ export default function MessageBlock(props: MessageBlockProps) {
messageInfo={(item as StepDisplayItem).messageInfo}
showUsage={props.showUsageMetrics()}
borderColor={(item as StepDisplayItem).accentColor}
+ showDeleteMessage={index() === 0}
+ instanceId={props.instanceId}
+ sessionId={props.sessionId}
+ messageId={props.messageId}
+ onDeleteHoverChange={props.onDeleteHoverChange}
+ onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+ selectedMessageIds={props.selectedMessageIds}
+ onToggleSelectedMessage={props.onToggleSelectedMessage}
/>
@@ -728,7 +882,11 @@ export default function MessageBlock(props: MessageBlockProps) {
instanceId={props.instanceId}
sessionId={props.sessionId}
messageId={(item as CompactionDisplayItem).messageId}
- partId={(item as CompactionDisplayItem).partId}
+ showDeleteMessage={index() === 0}
+ onDeleteHoverChange={props.onDeleteHoverChange}
+ onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+ selectedMessageIds={props.selectedMessageIds}
+ onToggleSelectedMessage={props.onToggleSelectedMessage}
/>
@@ -738,9 +896,13 @@ export default function MessageBlock(props: MessageBlockProps) {
instanceId={props.instanceId}
sessionId={props.sessionId}
messageId={(item as ReasoningDisplayItem).messageId}
- partId={(item as ReasoningDisplayItem).partId}
showAgentMeta={(item as ReasoningDisplayItem).showAgentMeta}
defaultExpanded={(item as ReasoningDisplayItem).defaultExpanded}
+ showDeleteMessage={index() === 0}
+ onDeleteHoverChange={props.onDeleteHoverChange}
+ onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+ selectedMessageIds={props.selectedMessageIds}
+ onToggleSelectedMessage={props.onToggleSelectedMessage}
/>
@@ -759,6 +921,14 @@ interface StepCardProps {
showAgentMeta?: boolean
showUsage?: boolean
borderColor?: string
+ showDeleteMessage?: boolean
+ instanceId?: string
+ sessionId?: string
+ messageId?: string
+ onDeleteHoverChange?: (state: DeleteHoverState) => void
+ onDeleteMessagesUpTo?: (messageId: string) => void | Promise
+ selectedMessageIds?: () => Set
+ onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
}
interface CompactionCardProps {
@@ -768,12 +938,18 @@ interface CompactionCardProps {
instanceId: string
sessionId: string
messageId: string
- partId: string
+ showDeleteMessage?: boolean
+ onDeleteHoverChange?: (state: DeleteHoverState) => void
+ onDeleteMessagesUpTo?: (messageId: string) => void | Promise
+ selectedMessageIds?: () => Set
+ onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
}
function CompactionCard(props: CompactionCardProps) {
const { t } = useI18n()
- const [deleting, setDeleting] = createSignal(false)
+ const [deletingMessage, setDeletingMessage] = createSignal(false)
+ const [deletingUpTo, setDeletingUpTo] = createSignal(false)
+ const isSelectedForDeletion = () => Boolean(props.selectedMessageIds?.().has(props.messageId))
const isAuto = () => Boolean((props.part as any)?.auto)
const label = () => (isAuto() ? t("messageBlock.compaction.autoLabel") : t("messageBlock.compaction.manualLabel"))
const borderColor = () => props.borderColor ?? (isAuto() ? "var(--session-status-compacting-fg)" : USER_BORDER_COLOR)
@@ -781,44 +957,98 @@ function CompactionCard(props: CompactionCardProps) {
const containerClass = () =>
`message-compaction-card ${isAuto() ? "message-compaction-card--auto" : "message-compaction-card--manual"}`
- const canDelete = () => Boolean(props.partId) && !deleting()
+ const canDeleteMessage = () => Boolean(props.showDeleteMessage) && !deletingMessage()
- const handleDelete = async (event: MouseEvent) => {
+ const handleDeleteMessage = async (event: MouseEvent) => {
event.preventDefault()
event.stopPropagation()
- if (!canDelete()) return
- setDeleting(true)
+ if (!props.showDeleteMessage) return
+ if (!canDeleteMessage()) return
+ setDeletingMessage(true)
try {
- await deleteMessagePart(props.instanceId, props.sessionId, props.messageId, props.partId)
+ await deleteMessage(props.instanceId, props.sessionId, props.messageId)
} catch (error) {
- showAlertDialog(t("messagePart.actions.deleteFailedMessage"), {
- title: t("messagePart.actions.deleteFailedTitle"),
+ showAlertDialog(t("messageItem.actions.deleteMessageFailedMessage"), {
+ title: t("messageItem.actions.deleteMessageFailedTitle"),
detail: error instanceof Error ? error.message : String(error),
variant: "error",
})
} finally {
- setDeleting(false)
+ setDeletingMessage(false)
+ }
+ }
+
+ const handleDeleteUpTo = async (event: MouseEvent) => {
+ event.preventDefault()
+ event.stopPropagation()
+ if (!props.showDeleteMessage) return
+ if (!props.onDeleteMessagesUpTo) return
+ if (deletingUpTo()) return
+
+ setDeletingUpTo(true)
+ try {
+ await props.onDeleteMessagesUpTo(props.messageId)
+ } finally {
+ setDeletingUpTo(false)
}
}
return (
-
+ >) => {
const entries = [
@@ -902,17 +1171,83 @@ function StepCard(props: StepCardProps) {
return null
}
return (
-
+
+
+
+
+
+
@@ -828,6 +1058,9 @@ function CompactionCard(props: CompactionCardProps) {
function StepCard(props: StepCardProps) {
const { t } = useI18n()
+ const [deletingMessage, setDeletingMessage] = createSignal(false)
+ const [deletingUpTo, setDeletingUpTo] = createSignal(false)
+ const isSelectedForDeletion = () => Boolean(props.messageId && props.selectedMessageIds?.().has(props.messageId))
const timestamp = () => {
const value = props.messageInfo?.time?.created ?? (props.part as any)?.time?.start ?? Date.now()
const date = new Date(value)
@@ -872,6 +1105,42 @@ function StepCard(props: StepCardProps) {
const finishStyle = () => (props.borderColor ? { "border-left-color": props.borderColor } : undefined)
+ const canDeleteMessage = () =>
+ Boolean(props.showDeleteMessage && props.instanceId && props.sessionId && props.messageId) && !deletingMessage()
+
+ const handleDeleteMessage = async (event: MouseEvent) => {
+ event.preventDefault()
+ event.stopPropagation()
+ if (!canDeleteMessage()) return
+ setDeletingMessage(true)
+ try {
+ await deleteMessage(props.instanceId!, props.sessionId!, props.messageId!)
+ } catch (error) {
+ showAlertDialog(t("messageItem.actions.deleteMessageFailedMessage"), {
+ title: t("messageItem.actions.deleteMessageFailedTitle"),
+ detail: error instanceof Error ? error.message : String(error),
+ variant: "error",
+ })
+ } finally {
+ setDeletingMessage(false)
+ }
+ }
+
+ const handleDeleteUpTo = async (event: MouseEvent) => {
+ event.preventDefault()
+ event.stopPropagation()
+ if (!props.messageId) return
+ if (!props.onDeleteMessagesUpTo) return
+ if (deletingUpTo()) return
+
+ setDeletingUpTo(true)
+ try {
+ await props.onDeleteMessagesUpTo(props.messageId)
+ } finally {
+ setDeletingUpTo(false)
+ }
+ }
+
const renderUsageChips = (usage: NonNullable
+
)
}
return (
-
+
+
+ {
+ event.stopPropagation()
+ }}
+ onChange={(event) => {
+ event.stopPropagation()
+ const next = Boolean((event.currentTarget as HTMLInputElement).checked)
+ props.onToggleSelectedMessage?.(props.messageId!, next)
+ }}
+ aria-label={t("messageItem.selection.checkboxAriaLabel")}
+ title={t("messageItem.selection.checkboxAriaLabel")}
+ />
+
+
{(value) => {t("messageBlock.step.agentLabel", { agent: value() })}}
@@ -939,15 +1274,27 @@ interface ReasoningCardProps {
instanceId: string
sessionId: string
messageId: string
- partId: string
showAgentMeta?: boolean
defaultExpanded?: boolean
+ showDeleteMessage?: boolean
+ onDeleteHoverChange?: (state: DeleteHoverState) => void
+ onDeleteMessagesUpTo?: (messageId: string) => void | Promise
+ selectedMessageIds?: () => Set
+ onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
}
function ReasoningCard(props: ReasoningCardProps) {
const { t } = useI18n()
const [expanded, setExpanded] = createSignal(Boolean(props.defaultExpanded))
- const [deleting, setDeleting] = createSignal(false)
+ const [deletingMessage, setDeletingMessage] = createSignal(false)
+ const [deletingUpTo, setDeletingUpTo] = createSignal(false)
+ const isSelectedForDeletion = () => Boolean(props.selectedMessageIds?.().has(props.messageId))
+
+ let headerEl: HTMLDivElement | undefined
+ let actionsEl: HTMLDivElement | undefined
+ let primaryEl: HTMLSpanElement | undefined
+ let metaMeasureEl: HTMLSpanElement | undefined
+ const [showMetaInline, setShowMetaInline] = createSignal(true)
createEffect(() => {
setExpanded(Boolean(props.defaultExpanded))
@@ -974,6 +1321,35 @@ function ReasoningCard(props: ReasoningCardProps) {
return modelID
}
+ const hasMeta = () => Boolean(props.showAgentMeta && (agentIdentifier() || modelIdentifier()))
+
+ const updateMetaLayout = () => {
+ if (!hasMeta()) return
+ if (!headerEl || !actionsEl || !primaryEl || !metaMeasureEl) return
+
+ const headerWidth = headerEl.getBoundingClientRect().width
+ const actionsWidth = actionsEl.getBoundingClientRect().width
+ const primaryWidth = primaryEl.getBoundingClientRect().width
+ const metaWidth = metaMeasureEl.getBoundingClientRect().width
+
+ const availableLeft = Math.max(0, headerWidth - actionsWidth - 12)
+ setShowMetaInline(primaryWidth + metaWidth + 8 <= availableLeft)
+ }
+
+ createEffect(() => {
+ if (!hasMeta() || typeof ResizeObserver === "undefined") {
+ setShowMetaInline(true)
+ return
+ }
+
+ updateMetaLayout()
+ const observer = new ResizeObserver(() => updateMetaLayout())
+ if (headerEl) observer.observe(headerEl)
+ if (actionsEl) observer.observe(actionsEl)
+ if (primaryEl) observer.observe(primaryEl)
+ onCleanup(() => observer.disconnect())
+ })
+
const reasoningText = () => {
const part = props.part as any
if (!part) return ""
@@ -1014,30 +1390,45 @@ function ReasoningCard(props: ReasoningCardProps) {
const viewHideLabel = () =>
expanded() ? t("messageBlock.reasoning.indicator.hide") : t("messageBlock.reasoning.indicator.view")
- const hasDeleteTarget = () => Boolean(props.partId)
- const canDelete = () => hasDeleteTarget() && !deleting()
+ const canDeleteMessage = () => Boolean(props.showDeleteMessage) && !deletingMessage()
- const handleDelete = async (event: MouseEvent) => {
+ const handleDeleteMessage = async (event: MouseEvent) => {
event.preventDefault()
event.stopPropagation()
- if (!canDelete()) return
- setDeleting(true)
+ if (!props.showDeleteMessage) return
+ if (!canDeleteMessage()) return
+ setDeletingMessage(true)
try {
- await deleteMessagePart(props.instanceId, props.sessionId, props.messageId, props.partId)
+ await deleteMessage(props.instanceId, props.sessionId, props.messageId)
} catch (error) {
- showAlertDialog(t("messagePart.actions.deleteFailedMessage"), {
- title: t("messagePart.actions.deleteFailedTitle"),
+ showAlertDialog(t("messageItem.actions.deleteMessageFailedMessage"), {
+ title: t("messageItem.actions.deleteMessageFailedTitle"),
detail: error instanceof Error ? error.message : String(error),
variant: "error",
})
} finally {
- setDeleting(false)
+ setDeletingMessage(false)
+ }
+ }
+
+ const handleDeleteUpTo = async (event: MouseEvent) => {
+ event.preventDefault()
+ event.stopPropagation()
+ if (!props.showDeleteMessage) return
+ if (!props.onDeleteMessagesUpTo) return
+ if (deletingUpTo()) return
+
+ setDeletingUpTo(true)
+ try {
+ await props.onDeleteMessagesUpTo(props.messageId)
+ } finally {
+ setDeletingUpTo(false)
}
}
return (
-
-
+
+
(headerEl = el)}>
-
+
+
+
+
diff --git a/packages/ui/src/components/message-item.tsx b/packages/ui/src/components/message-item.tsx
index 719d660d..98e754dd 100644
--- a/packages/ui/src/components/message-item.tsx
+++ b/packages/ui/src/components/message-item.tsx
@@ -1,14 +1,24 @@
-import { For, Show, createSignal } from "solid-js"
-import { Copy, ExternalLink, Split, Trash2, Undo } from "lucide-solid"
-import type { MessageInfo, ClientPart } from "../types/message"
+import { For, Show, createEffect, createSignal, onCleanup } from "solid-js"
+import { Portal } from "solid-js/web"
+import { Copy, ListStart, Split, Trash, Undo } from "lucide-solid"
+import type { MessageInfo, ClientPart, SDKAssistantMessageV2 } from "../types/message"
import { partHasRenderableText } from "../types/message"
import type { MessageRecord } from "../stores/message-v2/types"
import MessagePart from "./message-part"
import { copyToClipboard } from "../lib/clipboard"
import { useI18n } from "../lib/i18n"
import { showAlertDialog } from "../stores/alerts"
-import { deleteMessagePart } from "../stores/session-actions"
+import { deleteMessage } from "../stores/session-actions"
import { isTauriHost } from "../lib/runtime-env"
+import type { DeleteHoverState } from "../types/delete-hover"
+
+function DeleteUpToIcon() {
+ return (
+
+ )
+}
interface MessageItemProps {
record: MessageRecord
@@ -18,15 +28,112 @@ interface MessageItemProps {
isQueued?: boolean
parts: ClientPart[]
onRevert?: (messageId: string) => void
+ selectedMessageIds?: () => Set
+ onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
+ onDeleteMessagesUpTo?: (messageId: string) => void | Promise
onFork?: (messageId?: string) => void
showAgentMeta?: boolean
onContentRendered?: () => void
+ showDeleteMessage?: boolean
+ onDeleteHoverChange?: (state: DeleteHoverState) => void
}
export default function MessageItem(props: MessageItemProps) {
const { t } = useI18n()
const [copied, setCopied] = createSignal(false)
- const [deletingParts, setDeletingParts] = createSignal>(new Set())
+ const [deletingMessage, setDeletingMessage] = createSignal(false)
+ const [deletingUpTo, setDeletingUpTo] = createSignal(false)
+
+ type ImagePreviewState = {
+ url: string
+ name: string
+ anchor: HTMLElement
+ }
+
+ const [imagePreview, setImagePreview] = createSignal(null)
+
+ const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value))
+
+ const getImagePreviewPosition = () => {
+ const state = imagePreview()
+ if (!state) return null
+
+ const rect = state.anchor.getBoundingClientRect()
+
+ // Outer box: 320px image + 8px padding on each side.
+ const padding = 8
+ const maxImage = 320
+ const gap = 8
+ const chrome = padding * 2
+ const outerWidth = maxImage + chrome
+ const outerHeight = maxImage + chrome
+
+ const viewportW = window.innerWidth
+ const viewportH = window.innerHeight
+
+ const left = clamp(rect.left, 8, Math.max(8, viewportW - outerWidth - 8))
+
+ const fitsAbove = rect.top >= outerHeight + gap + 8
+ const preferredTop = fitsAbove ? rect.top - outerHeight - gap : rect.bottom + gap
+ const top = clamp(preferredTop, 8, Math.max(8, viewportH - outerHeight - 8))
+
+ return { left, top }
+ }
+
+ createEffect(() => {
+ const active = imagePreview()
+ if (!active) return
+
+ // If the user scrolls (message stream scroll container) or resizes, the anchor moves.
+ // Hide the popover to avoid showing it in the wrong place.
+ const hide = () => setImagePreview(null)
+ window.addEventListener("scroll", hide, true)
+ window.addEventListener("resize", hide)
+ onCleanup(() => {
+ window.removeEventListener("scroll", hide, true)
+ window.removeEventListener("resize", hide)
+ })
+ })
+
+ const isSelectedForDeletion = () => Boolean(props.selectedMessageIds?.().has(props.record.id))
+
+ let topRowEl: HTMLDivElement | undefined
+ let actionsEl: HTMLDivElement | undefined
+ let speakerPrimaryEl: HTMLDivElement | undefined
+ let metaMeasureEl: HTMLSpanElement | undefined
+ const [showMetaInline, setShowMetaInline] = createSignal(true)
+
+ const metaText = () => agentMeta()
+
+ const updateMetaLayout = () => {
+ const text = metaText()
+ if (!text) return
+ if (!topRowEl || !actionsEl || !speakerPrimaryEl || !metaMeasureEl) return
+
+ const rowWidth = topRowEl.getBoundingClientRect().width
+ const actionsWidth = actionsEl.getBoundingClientRect().width
+ const primaryWidth = speakerPrimaryEl.getBoundingClientRect().width
+ const metaWidth = metaMeasureEl.getBoundingClientRect().width
+
+ // Allow for the flex gap between left and actions.
+ const availableLeft = Math.max(0, rowWidth - actionsWidth - 12)
+ setShowMetaInline(primaryWidth + metaWidth + 8 <= availableLeft)
+ }
+
+ createEffect(() => {
+ const text = metaText()
+ if (!text || typeof ResizeObserver === "undefined") {
+ setShowMetaInline(true)
+ return
+ }
+
+ updateMetaLayout()
+ const observer = new ResizeObserver(() => updateMetaLayout())
+ if (topRowEl) observer.observe(topRowEl)
+ if (actionsEl) observer.observe(actionsEl)
+ if (speakerPrimaryEl) observer.observe(speakerPrimaryEl)
+ onCleanup(() => observer.disconnect())
+ })
const isUser = () => props.record.role === "user"
const createdTimestamp = () => props.messageInfo?.time?.created ?? props.record.createdAt
@@ -123,6 +230,11 @@ export default function MessageItem(props: MessageItemProps) {
}
}
+ const showImagePreview = (anchor: HTMLElement, url: string, name: string) => {
+ if (!url) return
+ setImagePreview({ anchor, url, name })
+ }
+
const errorMessage = () => {
const info = props.messageInfo
if (!info || info.role !== "assistant" || !info.error) return null
@@ -190,47 +302,30 @@ export default function MessageItem(props: MessageItemProps) {
setTimeout(() => setCopied(false), 2000)
}
- const deletableTextPartId = () => {
- const part = props.parts.find((candidate) => {
- if (!candidate || candidate.type !== "text") return false
- const id = (candidate as any).id
- if (typeof id !== "string" || id.length === 0) return false
- return !Boolean((candidate as any).synthetic)
- })
- return (part as any)?.id as string | undefined
- }
-
- const isDeletingPart = (partId?: string) => {
- if (!partId) return false
- return deletingParts().has(partId)
- }
-
- const setPartDeleting = (partId: string, value: boolean) => {
- setDeletingParts((prev) => {
- const next = new Set(prev)
- if (value) {
- next.add(partId)
- } else {
- next.delete(partId)
- }
- return next
- })
- }
-
- const handleDeletePart = async (partId?: string) => {
- if (!partId) return
- if (isDeletingPart(partId)) return
- setPartDeleting(partId, true)
+ const handleDeleteMessage = async () => {
+ if (deletingMessage()) return
+ setDeletingMessage(true)
try {
- await deleteMessagePart(props.instanceId, props.sessionId, props.record.id, partId)
+ await deleteMessage(props.instanceId, props.sessionId, props.record.id)
} catch (error) {
- showAlertDialog(t("messagePart.actions.deleteFailedMessage"), {
- title: t("messagePart.actions.deleteFailedTitle"),
+ showAlertDialog(t("messageItem.actions.deleteMessageFailedMessage"), {
+ title: t("messageItem.actions.deleteMessageFailedTitle"),
detail: error instanceof Error ? error.message : String(error),
variant: "error",
})
} finally {
- setPartDeleting(partId, false)
+ setDeletingMessage(false)
+ }
+ }
+
+ const handleDeleteUpTo = async () => {
+ if (!props.onDeleteMessagesUpTo) return
+ if (deletingUpTo()) return
+ setDeletingUpTo(true)
+ try {
+ await props.onDeleteMessagesUpTo(props.record.id)
+ } finally {
+ setDeletingUpTo(false)
}
}
@@ -258,8 +353,16 @@ export default function MessageItem(props: MessageItemProps) {
if (!info || info.role !== "assistant") return ""
const modelID = info.modelID || ""
const providerID = info.providerID || ""
- if (modelID && providerID) return `${providerID}/${modelID}`
- return modelID
+
+ const base = modelID && providerID ? `${providerID}/${modelID}` : modelID
+ if (!base) return ""
+
+ const variant = (info as SDKAssistantMessageV2).variant
+ if (typeof variant === "string" && variant.trim().length > 0) {
+ return `${base} (${variant.trim()})`
+ }
+
+ return base
}
const agentMeta = () => {
@@ -278,28 +381,68 @@ export default function MessageItem(props: MessageItemProps) {
return (
-
+
-
-
-
+
-
- {(meta) => (
-
- )}
+
+
@@ -378,16 +560,20 @@ export default function MessageItem(props: MessageItemProps) {
- {(part) => (
-
0}>
@@ -397,7 +583,16 @@ export default function MessageItem(props: MessageItemProps) {
const name = getAttachmentName(attachment)
const isImage = isImageAttachment(attachment)
return (
-
+
+ {(stateAccessor) => {
+ const state = stateAccessor()
+ const pos = () => getImagePreviewPosition()
+ return (
+
+
+ {(posAccessor) => {
+ const coords = posAccessor()
+ return (
+
+ )
+ }}
+
+
+ )
+ }}
+
+
+
{
+ if (!isImage) return
+ const el = e.currentTarget as HTMLElement
+ showImagePreview(el, attachment.url || "", name)
+ }}
+ onMouseLeave={() => setImagePreview(null)}
+ >
-
-
-
-
)
}}
@@ -450,6 +627,31 @@ export default function MessageItem(props: MessageItemProps) {
- 
-
-
{t("messageItem.status.sending")}
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index 7178eb93..038b3dfb 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -131,7 +131,12 @@ export default function MessagePart(props: MessagePartProps) {
-
+
{plainTextContent()}}>
InstanceMessageStore
+ deleteHover?: () => DeleteHoverState
+ onDeleteHoverChange?: (state: DeleteHoverState) => void
+ onDeleteMessagesUpTo?: (messageId: string) => void | Promise
+ selectedMessageIds?: () => Set
+ onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
}
const MessagePreview: Component = (props) => {
@@ -24,6 +30,11 @@ const MessagePreview: Component = (props) => {
showThinking={() => false}
thinkingDefaultExpanded={() => false}
showUsageMetrics={() => false}
+ deleteHover={props.deleteHover}
+ onDeleteHoverChange={props.onDeleteHoverChange}
+ onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+ selectedMessageIds={props.selectedMessageIds}
+ onToggleSelectedMessage={props.onToggleSelectedMessage}
/>
)
diff --git a/packages/ui/src/components/message-section.tsx b/packages/ui/src/components/message-section.tsx
index f418700b..5da2432f 100644
--- a/packages/ui/src/components/message-section.tsx
+++ b/packages/ui/src/components/message-section.tsx
@@ -1,20 +1,26 @@
-import { Show, createEffect, createMemo, createSignal, onCleanup, untrack } from "solid-js"
+import { Show, createEffect, createMemo, createSignal, onCleanup, on, untrack } from "solid-js"
+import { MoreHorizontal, Trash, X } from "lucide-solid"
import Kbd from "./kbd"
-import MessageBlockList, { getMessageAnchorId } from "./message-block-list"
+import MessageBlock from "./message-block"
+import { getMessageAnchorId, getMessageIdFromAnchorId } from "./message-anchors"
import MessageTimeline, { buildTimelineSegments, type TimelineSegment } from "./message-timeline"
+import VirtualFollowList, { type VirtualFollowListApi, type VirtualFollowListState } from "./virtual-follow-list"
import { useConfig } from "../stores/preferences"
import { getSessionInfo } from "../stores/sessions"
import { messageStoreBus } from "../stores/message-v2/bus"
-import { useScrollCache } from "../lib/hooks/use-scroll-cache"
import { useI18n } from "../lib/i18n"
+import { useScrollCache } from "../lib/hooks/use-scroll-cache"
import { copyToClipboard } from "../lib/clipboard"
import { showToastNotification } from "../lib/notifications"
+import { showAlertDialog } from "../stores/alerts"
+import { deleteMessage, deleteMessagePart } from "../stores/session-actions"
import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
+import type { DeleteHoverState } from "../types/delete-hover"
+import { buildRecordDisplayData } from "../stores/message-v2/record-display-cache"
+import { getPartCharCount } from "../lib/token-utils"
-const SCROLL_SCOPE = "session"
const SCROLL_SENTINEL_MARGIN_PX = 48
-const USER_SCROLL_INTENT_WINDOW_MS = 600
-const SCROLL_INTENT_KEYS = new Set(["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " ", "Spacebar"])
+const MESSAGE_SCROLL_CACHE_SCOPE = "message-stream"
const QUOTE_SELECTION_MAX_LENGTH = 2000
const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
@@ -23,6 +29,7 @@ export interface MessageSectionProps {
sessionId: string
loading?: boolean
onRevert?: (messageId: string) => void
+ onDeleteMessagesUpTo?: (messageId: string) => void | Promise
onFork?: (messageId?: string) => void
registerScrollToBottom?: (fn: () => void) => void
showSidebarToggle?: boolean
@@ -40,6 +47,12 @@ export default function MessageSection(props: MessageSectionProps) {
const store = createMemo(() => messageStoreBus.getOrCreate(props.instanceId))
const messageIds = createMemo(() => store().getSessionMessageIds(props.sessionId))
+ const scrollCache = useScrollCache({
+ instanceId: props.instanceId,
+ sessionId: props.sessionId,
+ scope: MESSAGE_SCROLL_CACHE_SCOPE,
+ })
+
const sessionRevision = createMemo(() => store().getSessionRevision(props.sessionId))
const usageSnapshot = createMemo(() => store().getSessionUsage(props.sessionId))
const sessionInfo = createMemo(() =>
@@ -74,11 +87,233 @@ export default function MessageSection(props: MessageSectionProps) {
})
const handleTimelineSegmentClick = (segment: TimelineSegment) => {
- if (typeof document === "undefined") return
- const anchor = document.getElementById(getMessageAnchorId(segment.messageId))
- anchor?.scrollIntoView({ block: "start", behavior: "smooth" })
+ const scrollToMessage = () => {
+ const api = listApi()
+ if (api) {
+ api.scrollToKey(segment.messageId, { behavior: "smooth", block: "start" })
+ return
+ }
+ if (typeof document === "undefined") return
+ const anchor = document.getElementById(getMessageAnchorId(segment.messageId))
+ anchor?.scrollIntoView({ block: "start", behavior: "smooth" })
+ }
+
+ if (selectionMode() === "tools" && segment.type !== "tool") {
+ setActiveSegmentId(segment.id)
+ scrollToMessage()
+ return
+ }
+
+ setLastSelectionAnchorId(segment.id)
+ setActiveSegmentId(segment.id)
+ scrollToMessage()
}
-
+
+ const [selectedTimelineIds, setSelectedTimelineIds] = createSignal>(new Set())
+ const [lastSelectionAnchorId, setLastSelectionAnchorId] = createSignal(null)
+ const [expandedMessageIds, setExpandedMessageIds] = createSignal>(new Set())
+ const [selectionMode, setSelectionMode] = createSignal<"all" | "tools">("all")
+ const [isDeleteMenuOpen, setIsDeleteMenuOpen] = createSignal(false)
+ let deleteMenuRef: HTMLDivElement | undefined
+ let deleteMenuButtonRef: HTMLButtonElement | undefined
+
+ // Deletion is only allowed for messages/tool parts that occur AFTER the most
+ // recent compaction. Compaction effectively resets the stored context; deleting
+ // earlier items would not reliably reflect what the model sees.
+ const messageIndexById = createMemo(() => {
+ const ids = messageIds()
+ const map = new Map()
+ for (let i = 0; i < ids.length; i++) {
+ map.set(ids[i], i)
+ }
+ return map
+ })
+
+ const lastCompactionIndex = createMemo(() => {
+ // Depend on a single session revision signal (not every message/part read)
+ // to keep reactive overhead small.
+ sessionRevision()
+ return untrack(() => store().getLastCompactionMessageIndex(props.sessionId))
+ })
+
+ const deletableStartIndex = createMemo(() => {
+ const idx = lastCompactionIndex()
+ return idx === -1 ? 0 : idx + 1
+ })
+
+ const deletableMessageIds = createMemo(() => {
+ const ids = messageIds()
+ const start = deletableStartIndex()
+ return new Set(ids.slice(start))
+ })
+
+ const isMessageDeletable = (messageId: string): boolean => {
+ const idx = messageIndexById().get(messageId)
+ if (idx === undefined) return false
+ return idx >= deletableStartIndex()
+ }
+
+ // Build the message group for a segment.
+ // Tool calls belong to the same assistant turn (between user messages).
+ // Only assistant badges trigger group selection; user/tool badges are standalone.
+ const getAdjacentGroup = (_clickedIndex: number, segments: TimelineSegment[]): TimelineSegment[] => {
+ const clicked = segments[_clickedIndex]
+ if (clicked.type === "assistant") {
+ let currentTurn = -1
+ const turnByMessageId = new Map()
+ for (const segment of segments) {
+ if (segment.type === "user") {
+ currentTurn += 1
+ continue
+ }
+ if (currentTurn === -1) currentTurn = 0
+ if (!turnByMessageId.has(segment.messageId)) {
+ turnByMessageId.set(segment.messageId, currentTurn)
+ }
+ }
+ const turnIndex = turnByMessageId.get(clicked.messageId)
+ if (turnIndex === undefined) {
+ return segments.filter((s) => s.messageId === clicked.messageId)
+ }
+ return segments.filter((s) => s.type !== "user" && turnByMessageId.get(s.messageId) === turnIndex)
+ }
+ // User, tool, and compaction segments are standalone.
+ return [clicked]
+ }
+
+ const handleToggleTimelineSelection = (id: string) => {
+ const segments = timelineSegments()
+ const segmentIndex = segments.findIndex((s) => s.id === id)
+ if (segmentIndex === -1) return
+ const segment = segments[segmentIndex]
+
+ if (!isMessageDeletable(segment.messageId)) {
+ return
+ }
+
+ setLastSelectionAnchorId(id)
+
+ if (selectionMode() === "tools" && segment.type !== "tool") {
+ return
+ }
+
+ const selected = selectedTimelineIds()
+ const isCurrentlySelected = selected.has(id)
+ const group = getAdjacentGroup(segmentIndex, segments)
+ const hasToolsInGroup = group.some((s) => s.type === "tool")
+ const isGroupCandidate = segment.type === "assistant" && hasToolsInGroup
+ const selectedInGroup = isGroupCandidate
+ ? group.reduce((count, s) => (selected.has(s.id) ? count + 1 : count), 0)
+ : 0
+ const isGroupEmpty = isGroupCandidate && selectedInGroup === 0
+
+ if (isGroupCandidate && !isCurrentlySelected && isGroupEmpty) {
+ // Parent click: select entire group only when none are selected yet.
+ // Tool visibility is handled by isSelectionActive() in isHidden() — no
+ // expand/collapse needed.
+ setSelectedTimelineIds((prev) => {
+ const next = new Set(prev)
+ for (const s of group) next.add(s.id)
+ return next
+ })
+ } else if (isCurrentlySelected) {
+ // Individual deselect (tool or parent). No group deselect.
+ const newSelected = new Set(selected)
+ newSelected.delete(id)
+ setSelectedTimelineIds(newSelected)
+ } else {
+ // Individual select (tool badge, parent with partial group, or standalone).
+ setSelectedTimelineIds((prev) => {
+ const next = new Set(prev)
+ next.add(id)
+ return next
+ })
+ }
+ }
+
+ const handleLongPressTimelineSelection = (segment: TimelineSegment) => {
+ const segments = timelineSegments()
+ const segmentIndex = segments.findIndex((s) => s.id === segment.id)
+ if (segmentIndex === -1) return
+
+ if (!isMessageDeletable(segment.messageId)) {
+ return
+ }
+
+ setLastSelectionAnchorId(segment.id)
+
+ if (selectionMode() === "tools" && segment.type !== "tool") {
+ return
+ }
+ const group = getAdjacentGroup(segmentIndex, segments)
+ const hasToolsInGroup = group.some((s) => s.type === "tool")
+ const isGroupCandidate = segment.type === "assistant" && hasToolsInGroup
+ if (!isGroupCandidate) {
+ handleToggleTimelineSelection(segment.id)
+ return
+ }
+ const selected = selectedTimelineIds()
+ const hasAnySelected = group.some((s) => selected.has(s.id))
+ if (!hasAnySelected) {
+ setSelectedTimelineIds((prev) => {
+ const next = new Set(prev)
+ for (const s of group) next.add(s.id)
+ return next
+ })
+ return
+ }
+ const newSelected = new Set(selected)
+ for (const s of group) newSelected.delete(s.id)
+ setSelectedTimelineIds(newSelected)
+ }
+
+ const handleSelectRangeTimeline = (id: string) => {
+ const anchorId = lastSelectionAnchorId()
+ if (!anchorId) {
+ handleToggleTimelineSelection(id)
+ return
+ }
+
+ const segments = timelineSegments()
+ const anchorIndex = segments.findIndex((s) => s.id === anchorId)
+ const targetIndex = segments.findIndex((s) => s.id === id)
+
+ if (anchorIndex === -1 || targetIndex === -1) {
+ handleToggleTimelineSelection(id)
+ return
+ }
+
+ const start = Math.min(anchorIndex, targetIndex)
+ const end = Math.max(anchorIndex, targetIndex)
+
+ const rangeSegments = selectionMode() === "tools"
+ ? segments.slice(start, end + 1).filter((s) => s.type === "tool" && isMessageDeletable(s.messageId))
+ : segments.slice(start, end + 1).filter((s) => isMessageDeletable(s.messageId))
+ // Range selection replaces current selection so it can grow or shrink.
+ setSelectedTimelineIds(new Set(rangeSegments.map((segment) => segment.id)))
+ }
+
+ const handleClearTimelineSelection = () => {
+ clearDeleteMode()
+ }
+
+ const applySelectionMode = (mode: "all" | "tools") => {
+ setSelectionMode(mode)
+ if (mode !== "tools") return
+ const segments = timelineSegments()
+ const toolIds = new Set(
+ segments
+ .filter((segment) => segment.type === "tool" && isMessageDeletable(segment.messageId))
+ .map((segment) => segment.id),
+ )
+ setSelectedTimelineIds((prev) => {
+ if (prev.size === 0) return prev
+ const next = new Set([...prev].filter((id) => toolIds.has(id)))
+ if (next.size === 0) setLastSelectionAnchorId(null)
+ return next
+ })
+ }
+
const lastAssistantIndex = createMemo(() => {
const ids = messageIds()
const resolvedStore = store()
@@ -144,208 +379,273 @@ export default function MessageSection(props: MessageSectionProps) {
setTimelineSegments((prev) => [...prev, ...newSegments])
}
}
- const [activeMessageId, setActiveMessageId] = createSignal(null)
-
- const changeToken = createMemo(() => String(sessionRevision()))
- const isActive = createMemo(() => props.isActive !== false)
+ const [activeSegmentId, setActiveSegmentId] = createSignal(null)
+ const [deleteHover, setDeleteHover] = createSignal({ kind: "none" })
- const scrollCache = useScrollCache({
- instanceId: () => props.instanceId,
- sessionId: () => props.sessionId,
- scope: SCROLL_SCOPE,
- })
-
- const [scrollElement, setScrollElement] = createSignal()
- const [topSentinel, setTopSentinel] = createSignal(null)
- const [bottomSentinelSignal, setBottomSentinelSignal] = createSignal(null)
- const bottomSentinel = () => bottomSentinelSignal()
- const setBottomSentinel = (element: HTMLDivElement | null) => {
- setBottomSentinelSignal(element)
- resolvePendingActiveScroll()
- }
- const [autoScroll, setAutoScroll] = createSignal(true)
- const [showScrollTopButton, setShowScrollTopButton] = createSignal(false)
- const [showScrollBottomButton, setShowScrollBottomButton] = createSignal(false)
- const [topSentinelVisible, setTopSentinelVisible] = createSignal(true)
- const [bottomSentinelVisible, setBottomSentinelVisible] = createSignal(true)
- const [quoteSelection, setQuoteSelection] = createSignal<{ text: string; top: number; left: number } | null>(null)
-
- let containerRef: HTMLDivElement | undefined
- let shellRef: HTMLDivElement | undefined
- let pendingScrollFrame: number | null = null
-
- let pendingAnchorScroll: number | null = null
-
- let pendingScrollPersist: number | null = null
- let userScrollIntentUntil = 0
- let detachScrollIntentListeners: (() => void) | undefined
- let hasRestoredScroll = false
- let suppressAutoScrollOnce = false
- let pendingActiveScroll = false
- let scrollToBottomFrame: number | null = null
- let scrollToBottomDelayedFrame: number | null = null
- let pendingInitialScroll = true
-
- function markUserScrollIntent() {
- const now = typeof performance !== "undefined" ? performance.now() : Date.now()
- userScrollIntentUntil = now + USER_SCROLL_INTENT_WINDOW_MS
- }
-
- function hasUserScrollIntent() {
- const now = typeof performance !== "undefined" ? performance.now() : Date.now()
- return now <= userScrollIntentUntil
- }
-
- function attachScrollIntentListeners(element: HTMLDivElement | undefined) {
- if (detachScrollIntentListeners) {
- detachScrollIntentListeners()
- detachScrollIntentListeners = undefined
- }
- if (!element) return
- const handlePointerIntent = () => markUserScrollIntent()
- const handleKeyIntent = (event: KeyboardEvent) => {
- if (SCROLL_INTENT_KEYS.has(event.key)) {
- markUserScrollIntent()
+ const [selectedForDeletion, setSelectedForDeletion] = createSignal>(new Set())
+ const selectedToolParts = createMemo(() => {
+ const selected = selectedTimelineIds()
+ if (selected.size === 0) return [] as { messageId: string; partId: string }[]
+ const segments = timelineSegments()
+ const segmentById = new Map()
+ for (const segment of segments) segmentById.set(segment.id, segment)
+ const toolParts: { messageId: string; partId: string }[] = []
+ const seen = new Set()
+ for (const segId of selected) {
+ const segment = segmentById.get(segId)
+ if (!segment || segment.type !== "tool") continue
+ for (const partId of segment.toolPartIds ?? []) {
+ if (!partId) continue
+ const key = `${segment.messageId}:${partId}`
+ if (seen.has(key)) continue
+ seen.add(key)
+ toolParts.push({ messageId: segment.messageId, partId })
}
}
- element.addEventListener("wheel", handlePointerIntent, { passive: true })
- element.addEventListener("pointerdown", handlePointerIntent)
- element.addEventListener("touchstart", handlePointerIntent, { passive: true })
- element.addEventListener("keydown", handleKeyIntent)
- detachScrollIntentListeners = () => {
- element.removeEventListener("wheel", handlePointerIntent)
- element.removeEventListener("pointerdown", handlePointerIntent)
- element.removeEventListener("touchstart", handlePointerIntent)
- element.removeEventListener("keydown", handleKeyIntent)
+ return toolParts
+ })
+ const deleteMessageIds = createMemo(() => selectedForDeletion())
+ const deleteToolParts = createMemo(() => {
+ const messageIds = deleteMessageIds()
+ const allowed = deletableMessageIds()
+ return selectedToolParts().filter((entry) => allowed.has(entry.messageId) && !messageIds.has(entry.messageId))
+ })
+
+ const deleteToolPartKeys = createMemo(() => {
+ const set = new Set()
+ for (const entry of deleteToolParts()) {
+ set.add(`${entry.messageId}:${entry.partId}`)
}
- }
+ return set
+ })
+ const isDeleteMode = createMemo(() => deleteMessageIds().size > 0 || deleteToolParts().length > 0)
+ const selectedDeleteCount = createMemo(() => deleteMessageIds().size + deleteToolParts().length)
- function setContainerRef(element: HTMLDivElement | null) {
- containerRef = element || undefined
- setScrollElement(containerRef)
- attachScrollIntentListeners(containerRef)
- if (!containerRef) {
- clearQuoteSelection()
- return
+ const selectedTokenTotal = createMemo(() => {
+ const selected = deleteMessageIds()
+ const toolParts = deleteToolParts()
+ if (selected.size === 0 && toolParts.length === 0) return 0
+ // Fresh-from-store chars: read parts directly via buildRecordDisplayData +
+ // getPartCharCount so the toolbar stays consistent with the xray overlay
+ // (which also reads live from the store). Falls back to segment totalChars
+ // when no record is found (e.g. compaction segments).
+ const s = store()
+ let total = 0
+ for (const messageId of selected) {
+ let chars = 0
+ const record = s.getMessage(messageId)
+ if (record) {
+ const displayData = buildRecordDisplayData(props.instanceId, record)
+ for (const part of displayData.orderedParts) {
+ chars += getPartCharCount(part)
+ }
+ } else {
+ // Fallback: sum from segments (O(n) pre-pass scoped to this branch)
+ for (const seg of timelineSegments()) {
+ if (seg.messageId === messageId) chars += seg.totalChars
+ }
+ }
+ total += Math.max(Math.round(chars / 4), 1)
}
- resolvePendingActiveScroll()
- }
-
- function setShellElement(element: HTMLDivElement | null) {
- shellRef = element || undefined
- if (!shellRef) {
- clearQuoteSelection()
+ if (toolParts.length > 0) {
+ const partFallbackChars = new Map()
+ for (const segment of timelineSegments()) {
+ if (segment.type !== "tool") continue
+ for (const partId of segment.toolPartIds ?? []) {
+ if (!partId || partFallbackChars.has(partId)) continue
+ partFallbackChars.set(partId, segment.totalChars)
+ }
+ }
+ for (const { messageId, partId } of toolParts) {
+ let chars = 0
+ const record = s.getMessage(messageId)
+ const partRecord = record?.parts?.[partId]
+ if (partRecord?.data) {
+ chars = getPartCharCount(partRecord.data)
+ } else {
+ chars = partFallbackChars.get(partId) ?? 0
+ }
+ total += Math.max(Math.round(chars / 4), 1)
+ }
}
- }
-
- function updateScrollIndicatorsFromVisibility() {
+ return total
+ })
- const hasItems = messageIds().length > 0
- const bottomVisible = bottomSentinelVisible()
- const topVisible = topSentinelVisible()
- setShowScrollBottomButton(hasItems && !bottomVisible)
- setShowScrollTopButton(hasItems && !topVisible)
+ const formatTokenCount = (tokens: number): string => {
+ if (tokens >= 1000000) return `${(tokens / 1000000).toFixed(1)}M`
+ if (tokens >= 1000) return `${(tokens / 1000).toFixed(1)}K`
+ return String(tokens)
}
- function scheduleScrollPersist() {
- if (pendingScrollPersist !== null) return
- pendingScrollPersist = requestAnimationFrame(() => {
- pendingScrollPersist = null
- if (!containerRef) return
- // scrollCache.persist(containerRef, { atBottomOffset: SCROLL_SENTINEL_MARGIN_PX })
+ const isMessageSelectedForDeletion = (messageId: string) => selectedForDeletion().has(messageId)
+
+ const setMessageSelectedForDeletion = (messageId: string, selected: boolean) => {
+ if (!messageId) return
+ if (!isMessageDeletable(messageId)) return
+ setSelectedForDeletion((prev) => {
+ const next = new Set(prev)
+ if (selected) {
+ next.add(messageId)
+ } else {
+ next.delete(messageId)
+ }
+ return next
})
}
-
- function scrollToBottom(immediate = false, options?: { suppressAutoAnchor?: boolean }) {
- if (!containerRef) return
- const sentinel = bottomSentinel()
- const behavior = immediate ? "auto" : "smooth"
- const suppressAutoAnchor = options?.suppressAutoAnchor ?? !immediate
- if (suppressAutoAnchor) {
- suppressAutoScrollOnce = true
- }
- sentinel?.scrollIntoView({ block: "end", inline: "nearest", behavior })
- setAutoScroll(true)
- scheduleScrollPersist()
+
+ const clearDeleteMode = () => {
+ setSelectedForDeletion(new Set())
+ setDeleteHover({ kind: "none" })
+ setSelectedTimelineIds(new Set())
+ setLastSelectionAnchorId(null)
+ setIsDeleteMenuOpen(false)
}
- function clearScrollToBottomFrames() {
- if (scrollToBottomFrame !== null) {
- cancelAnimationFrame(scrollToBottomFrame)
- scrollToBottomFrame = null
+ createEffect(() => {
+ const timelineIds = selectedTimelineIds()
+ if (timelineIds.size === 0) {
+ return
}
- if (scrollToBottomDelayedFrame !== null) {
- cancelAnimationFrame(scrollToBottomDelayedFrame)
- scrollToBottomDelayedFrame = null
+ const segments = timelineSegments()
+ const segmentById = new Map()
+ for (const segment of segments) segmentById.set(segment.id, segment)
+ const affectedMessageIds = new Set()
+ for (const segId of timelineIds) {
+ const segment = segmentById.get(segId)
+ if (segment && segment.type !== "tool" && isMessageDeletable(segment.messageId)) {
+ affectedMessageIds.add(segment.messageId)
+ }
}
+ setSelectedForDeletion(affectedMessageIds)
+ })
+
+ const selectAllForDeletion = () => {
+ const allMessageIds = [...deletableMessageIds()]
+ setSelectedForDeletion(new Set(allMessageIds))
+ // Also select all timeline segments — tool visibility is handled by
+ // isSelectionActive() in isHidden(), no expand/collapse needed.
+ const segments = timelineSegments()
+ setSelectedTimelineIds(new Set(segments.filter((s) => isMessageDeletable(s.messageId)).map((s) => s.id)))
}
- function requestScrollToBottom(immediate = true) {
- if (!isActive()) {
- pendingActiveScroll = true
- return
+ const deleteSelectedMessages = async () => {
+ const selected = deleteMessageIds()
+ const toolParts = deleteToolParts()
+ if (selected.size === 0 && toolParts.length === 0) return
+
+ const allowed = deletableMessageIds()
+
+ const idsInSessionOrder = messageIds()
+ const toDelete: string[] = []
+ for (let idx = idsInSessionOrder.length - 1; idx >= 0; idx -= 1) {
+ const id = idsInSessionOrder[idx]
+ if (allowed.has(id) && selected.has(id)) {
+ toDelete.push(id)
+ }
}
- if (!containerRef || !bottomSentinel()) {
- pendingActiveScroll = true
- return
- }
- pendingActiveScroll = false
- clearScrollToBottomFrames()
- scrollToBottomFrame = requestAnimationFrame(() => {
- scrollToBottomFrame = null
- scrollToBottomDelayedFrame = requestAnimationFrame(() => {
- scrollToBottomDelayedFrame = null
- scrollToBottom(immediate)
+
+ try {
+ for (const messageId of toDelete) {
+ await deleteMessage(props.instanceId, props.sessionId, messageId)
+ }
+ for (const { messageId, partId } of toolParts) {
+ if (!allowed.has(messageId)) continue
+ await deleteMessagePart(props.instanceId, props.sessionId, messageId, partId)
+ }
+ clearDeleteMode()
+ } catch (error) {
+ showAlertDialog(t("messageSection.bulkDelete.failedMessage"), {
+ title: t("messageSection.bulkDelete.failedTitle"),
+ detail: error instanceof Error ? error.message : String(error),
+ variant: "error",
})
- })
- }
-
- function resolvePendingActiveScroll() {
- if (!pendingActiveScroll) return
- if (!isActive()) return
- requestScrollToBottom(true)
+ }
}
- function scrollToTop(immediate = false) {
- if (!containerRef) return
- const behavior = immediate ? "auto" : "smooth"
- setAutoScroll(false)
- topSentinel()?.scrollIntoView({ block: "start", inline: "nearest", behavior })
- scheduleScrollPersist()
- }
+ const isActive = createMemo(() => props.isActive !== false)
+ const [listApi, setListApi] = createSignal(null)
+ const [listState, setListState] = createSignal(null)
+ const scrollButtonsCount = createMemo(() => listState()?.scrollButtonsCount() ?? 0)
+ const [streamElement, setStreamElement] = createSignal()
+ const [streamShellElement, setStreamShellElement] = createSignal()
- function scheduleAnchorScroll(immediate = false) {
- if (!autoScroll()) return
- if (!isActive()) {
- pendingActiveScroll = true
- return
- }
- const sentinel = bottomSentinel()
- if (!sentinel) {
- pendingActiveScroll = true
- return
- }
- if (pendingAnchorScroll !== null) {
- cancelAnimationFrame(pendingAnchorScroll)
- pendingAnchorScroll = null
- }
- pendingAnchorScroll = requestAnimationFrame(() => {
- pendingAnchorScroll = null
- sentinel.scrollIntoView({ block: "end", inline: "nearest", behavior: immediate ? "auto" : "smooth" })
+ const followToken = createMemo(() => `${sessionRevision()}|${preferenceSignature()}`)
+
+ const initialScrollSnapshot = createMemo(() => store().getScrollSnapshot(props.sessionId, MESSAGE_SCROLL_CACHE_SCOPE))
+ const initialAutoScroll = createMemo(() => initialScrollSnapshot()?.atBottom ?? true)
+
+ const [didRestoreScroll, setDidRestoreScroll] = createSignal(false)
+ createEffect(
+ on(
+ () => props.sessionId,
+ () => {
+ setDidRestoreScroll(false)
+ },
+ ),
+ )
+
+ // Persist scroll position when switching sessions. This effect's cleanup runs
+ // when `props.sessionId` changes, before the next session is rendered.
+ createEffect(() => {
+ const sessionId = props.sessionId
+ onCleanup(() => {
+ const element = streamElement()
+ if (!element) return
+ const scrollTop = element.scrollTop
+ const atBottom = element.scrollHeight - (element.scrollTop + element.clientHeight) <= 48
+ store().setScrollSnapshot(sessionId, MESSAGE_SCROLL_CACHE_SCOPE, { scrollTop, atBottom })
})
- }
+ })
+
+ const [quoteSelection, setQuoteSelection] = createSignal<{ text: string; top: number; left: number } | null>(null)
+
+ createEffect(() => {
+ const api = listApi()
+ if (!api) return
+ if (props.registerScrollToBottom) {
+ props.registerScrollToBottom(() => api.scrollToBottom({ immediate: true }))
+ }
+ })
+
+ // Restore scroll position when the stream element is available.
+ createEffect(() => {
+ const element = streamElement()
+ const api = listApi()
+ if (!element || !api) return
+ if (props.loading) return
+ if (messageIds().length === 0) return
+ if (didRestoreScroll()) return
+
+ scrollCache.restore(element, {
+ behavior: "auto",
+ fallback: () => {
+ api.setAutoScroll(true)
+ api.scrollToBottom({ immediate: true })
+ },
+ onApplied: (snapshot) => {
+ // Keep follow mode consistent with the restored state.
+ api.setAutoScroll(snapshot?.atBottom ?? true)
+ setDidRestoreScroll(true)
+ },
+ })
+ })
+
+ onCleanup(() => {
+ scrollCache.persist(streamElement())
+ })
function clearQuoteSelection() {
setQuoteSelection(null)
}
function isSelectionWithinStream(range: Range | null) {
- if (!range || !containerRef) return false
+ const container = streamElement()
+ if (!range || !container) return false
const node = range.commonAncestorContainer
if (!node) return false
- return containerRef.contains(node)
+ return container.contains(node)
}
function updateQuoteSelectionFromSelection() {
@@ -363,7 +663,7 @@ export default function MessageSection(props: MessageSectionProps) {
clearQuoteSelection()
return
}
- const shell = shellRef
+ const shell = streamShellElement()
if (!shell) {
clearQuoteSelection()
return
@@ -424,77 +724,10 @@ export default function MessageSection(props: MessageSectionProps) {
}
function handleContentRendered() {
- if (props.loading) {
- return
- }
- scheduleAnchorScroll()
+ if (props.loading) return
+ listApi()?.notifyContentRendered()
}
- function handleScroll() {
-
- if (!containerRef) return
- if (pendingScrollFrame !== null) {
- cancelAnimationFrame(pendingScrollFrame)
- }
- const isUserScroll = hasUserScrollIntent()
- pendingScrollFrame = requestAnimationFrame(() => {
- pendingScrollFrame = null
- if (!containerRef) return
- const atBottom = bottomSentinelVisible()
-
- if (isUserScroll) {
- if (atBottom) {
- if (!autoScroll()) setAutoScroll(true)
- } else if (autoScroll()) {
- setAutoScroll(false)
- }
- }
-
- clearQuoteSelection()
- scheduleScrollPersist()
- })
-
- }
-
-
- createEffect(() => {
- if (props.registerScrollToBottom) {
- props.registerScrollToBottom(() => requestScrollToBottom(true))
- }
- })
-
- let lastActiveState = false
- createEffect(() => {
- const active = isActive()
- if (active) {
- resolvePendingActiveScroll()
- if (!lastActiveState && autoScroll()) {
- requestScrollToBottom(true)
- }
- } else if (autoScroll()) {
- pendingActiveScroll = true
- }
- lastActiveState = active
- })
-
- createEffect(() => {
- const loading = Boolean(props.loading)
- if (loading) {
- pendingInitialScroll = true
- return
- }
- if (!pendingInitialScroll) {
- return
- }
- const container = scrollElement()
- const sentinel = bottomSentinel()
- if (!container || !sentinel || messageIds().length === 0) {
- return
- }
- pendingInitialScroll = false
- requestScrollToBottom(true)
- })
-
let previousTimelineIds: string[] = []
createEffect(() => {
@@ -502,6 +735,7 @@ export default function MessageSection(props: MessageSectionProps) {
const ids = messageIds()
if (loading) {
+ handleClearTimelineSelection()
previousTimelineIds = []
setTimelineSegments([])
seenTimelineMessageIds.clear()
@@ -635,6 +869,14 @@ export default function MessageSection(props: MessageSectionProps) {
next.forEach((segment) => seenTimelineSegmentKeys.add(makeTimelineKey(segment)))
return next
})
+
+ // Prune stale selection IDs: segment IDs are positional and change on rebuild.
+ setSelectedTimelineIds((prev) => {
+ if (prev.size === 0) return prev
+ const currentIds = new Set(timelineSegments().map((s) => s.id))
+ const pruned = new Set([...prev].filter((id) => currentIds.has(id)))
+ return pruned.size === prev.size ? prev : pruned
+ })
})
}
@@ -687,8 +929,9 @@ export default function MessageSection(props: MessageSectionProps) {
if (typeof document === "undefined") return
const handleSelectionChange = () => updateQuoteSelectionFromSelection()
const handlePointerDown = (event: PointerEvent) => {
- if (!shellRef) return
- if (!shellRef.contains(event.target as Node)) {
+ const shell = streamShellElement()
+ if (!shell) return
+ if (!shell.contains(event.target as Node)) {
clearQuoteSelection()
}
}
@@ -707,261 +950,309 @@ export default function MessageSection(props: MessageSectionProps) {
})
createEffect(() => {
- const target = containerRef
- const loading = props.loading
- if (!target || loading || hasRestoredScroll) return
-
-
- // scrollCache.restore(target, {
- // onApplied: (snapshot) => {
- // if (snapshot) {
- // setAutoScroll(snapshot.atBottom)
- // } else {
- // setAutoScroll(bottomSentinelVisible())
- // }
- // updateScrollIndicatorsFromVisibility()
- // },
- // })
-
- hasRestoredScroll = true
- })
-
- let previousToken: string | undefined
- createEffect(() => {
- const token = changeToken()
- const loading = props.loading
- if (loading || !token || token === previousToken) {
- return
- }
- previousToken = token
- if (suppressAutoScrollOnce) {
- suppressAutoScrollOnce = false
- return
- }
- if (autoScroll()) {
- scheduleAnchorScroll(true)
- }
- })
-
- createEffect(() => {
- preferenceSignature()
- if (props.loading || !autoScroll()) {
- return
- }
- if (suppressAutoScrollOnce) {
- suppressAutoScrollOnce = false
- return
- }
- scheduleAnchorScroll(true)
- })
-
- createEffect(() => {
- if (messageIds().length === 0) {
- setShowScrollTopButton(false)
- setShowScrollBottomButton(false)
- setAutoScroll(true)
- return
- }
- updateScrollIndicatorsFromVisibility()
- })
- createEffect(() => {
- const container = scrollElement()
- const topTarget = topSentinel()
- const bottomTarget = bottomSentinel()
- if (!container || !topTarget || !bottomTarget) return
- const observer = new IntersectionObserver(
- (entries) => {
- let visibilityChanged = false
- for (const entry of entries) {
- if (entry.target === topTarget) {
- setTopSentinelVisible(entry.isIntersecting)
- visibilityChanged = true
- } else if (entry.target === bottomTarget) {
- setBottomSentinelVisible(entry.isIntersecting)
- visibilityChanged = true
- }
- }
- if (visibilityChanged) {
- updateScrollIndicatorsFromVisibility()
- }
- },
- { root: container, threshold: 0, rootMargin: `${SCROLL_SENTINEL_MARGIN_PX}px 0px ${SCROLL_SENTINEL_MARGIN_PX}px 0px` },
- )
- observer.observe(topTarget)
- observer.observe(bottomTarget)
- onCleanup(() => observer.disconnect())
- })
-
- createEffect(() => {
- const container = scrollElement()
- const ids = messageIds()
- if (!container || ids.length === 0) return
if (typeof document === "undefined") return
-
- const observer = new IntersectionObserver(
- (entries) => {
- let best: IntersectionObserverEntry | null = null
- for (const entry of entries) {
- if (!entry.isIntersecting) continue
- if (!best || entry.boundingClientRect.top < best.boundingClientRect.top) {
- best = entry
- }
- }
- if (best) {
- const anchorId = (best.target as HTMLElement).id
- const messageId = anchorId.startsWith("message-anchor-") ? anchorId.slice("message-anchor-".length) : anchorId
- setActiveMessageId((current) => (current === messageId ? current : messageId))
- }
- },
- { root: container, rootMargin: "-10% 0px -80% 0px", threshold: 0 },
- )
-
- ids.forEach((messageId) => {
- const anchor = document.getElementById(getMessageAnchorId(messageId))
- if (anchor) {
- observer.observe(anchor)
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.key === "Escape" && (selectedTimelineIds().size > 0 || selectedForDeletion().size > 0)) {
+ clearDeleteMode()
}
- })
-
- onCleanup(() => observer.disconnect())
+ }
+ document.addEventListener("keydown", handleKeyDown)
+ onCleanup(() => document.removeEventListener("keydown", handleKeyDown))
+ })
+
+ createEffect(() => {
+ if (!isDeleteMenuOpen()) return
+ if (typeof document === "undefined") return
+ const handleClick = (event: MouseEvent) => {
+ const target = event.target as Node
+ if (deleteMenuRef?.contains(target)) return
+ if (deleteMenuButtonRef?.contains(target)) return
+ setIsDeleteMenuOpen(false)
+ }
+ document.addEventListener("mousedown", handleClick)
+ onCleanup(() => document.removeEventListener("mousedown", handleClick))
})
-
onCleanup(() => {
-
-
- if (pendingScrollFrame !== null) {
- cancelAnimationFrame(pendingScrollFrame)
- }
- if (pendingScrollPersist !== null) {
- cancelAnimationFrame(pendingScrollPersist)
- }
- if (pendingAnchorScroll !== null) {
- cancelAnimationFrame(pendingAnchorScroll)
- }
- clearScrollToBottomFrames()
clearPendingTimelinePartUpdateFrame()
- if (detachScrollIntentListeners) {
- detachScrollIntentListeners()
- }
- if (containerRef) {
- // scrollCache.persist(containerRef, { atBottomOffset: SCROLL_SENTINEL_MARGIN_PX })
- }
clearQuoteSelection()
})
return (
-
-
-
-
-
-
-
-
- >
+ expandedMessageIds?: Accessor>
+ // Optional: restrict histogram/xray overlay to only show for these message ids.
+ // Used to hide ribs for messages before the last compaction.
+ deletableMessageIds?: Accessor>
+ activeSegmentId?: string | null
instanceId: string
sessionId: string
showToolSegments?: boolean
+ deleteHover?: () => DeleteHoverState
+ onDeleteHoverChange?: (state: DeleteHoverState) => void
+ onDeleteMessagesUpTo?: (messageId: string) => void | Promise
+ selectedMessageIds?: () => Set
+ onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
}
const MAX_TOOLTIP_LENGTH = 220
+const LONG_PRESS_MS = 500
+const JITTER_THRESHOLD = 10
+const ABSOLUTE_TOKEN_CAP = 10000
type ToolCallPart = Extract
@@ -38,10 +60,8 @@ interface PendingSegment {
type: TimelineSegmentType
texts: string[]
reasoningTexts: string[]
- toolTitles: string[]
- toolTypeLabels: string[]
- toolIcons: string[]
- toolPartIds: string[]
+ partIds: string[]
+ totalChars: number
hasPrimaryText: boolean
}
@@ -171,18 +191,13 @@ export function buildTimelineSegments(
pending = null
return
}
- const isToolSegment = pending.type === "tool"
- const label = isToolSegment
- ? pending.toolTypeLabels[0] || segmentLabel("tool")
- : segmentLabel(pending.type)
- const shortLabel = isToolSegment ? pending.toolIcons[0] || getToolIcon("tool") : undefined
- const tooltip = isToolSegment
- ? formatToolTooltip(pending.toolTitles, t)
- : formatTextsTooltip(
- [...pending.texts, ...pending.reasoningTexts],
- pending.type === "user" ? t("messageTimeline.tooltip.userFallback") : t("messageTimeline.tooltip.assistantFallback"),
- )
-
+ const label = segmentLabel(pending.type)
+ const shortLabel = undefined
+ const tooltip = formatTextsTooltip(
+ [...pending.texts, ...pending.reasoningTexts],
+ pending.type === "user" ? t("messageTimeline.tooltip.userFallback") : t("messageTimeline.tooltip.assistantFallback"),
+ )
+
result.push({
id: `${record.id}:${segmentIndex}`,
messageId: record.id,
@@ -190,16 +205,24 @@ export function buildTimelineSegments(
label,
tooltip,
shortLabel,
- toolPartIds: isToolSegment ? pending.toolPartIds : undefined,
+ partIds: pending.partIds,
+ totalChars: pending.totalChars,
})
segmentIndex += 1
pending = null
}
-
+
const ensureSegment = (type: TimelineSegmentType): PendingSegment => {
if (!pending || pending.type !== type) {
flushPending()
- pending = { type, texts: [], reasoningTexts: [], toolTitles: [], toolTypeLabels: [], toolIcons: [], toolPartIds: [], hasPrimaryText: type !== "assistant" }
+ pending = {
+ type,
+ texts: [],
+ reasoningTexts: [],
+ partIds: [],
+ totalChars: 0,
+ hasPrimaryText: type !== "assistant",
+ }
}
return pending!
}
@@ -211,14 +234,21 @@ export function buildTimelineSegments(
if (!part || typeof part !== "object") continue
if (part.type === "tool") {
- const target = ensureSegment("tool")
+ flushPending()
const toolPart = part as ToolCallPart
- target.toolTitles.push(getToolTitle(toolPart, t))
- target.toolTypeLabels.push(getToolTypeLabel(toolPart, t))
- target.toolIcons.push(getToolIcon(typeof toolPart.tool === "string" ? toolPart.tool : "tool"))
- if (typeof toolPart.id === "string" && toolPart.id.length > 0) {
- target.toolPartIds.push(toolPart.id)
- }
+ const partId = typeof toolPart.id === "string" ? toolPart.id : ""
+ const title = getToolTitle(toolPart, t)
+ result.push({
+ id: `${record.id}:${segmentIndex}`,
+ messageId: record.id,
+ type: "tool",
+ label: getToolTypeLabel(toolPart, t) || segmentLabel("tool"),
+ tooltip: formatToolTooltip([title], t),
+ shortLabel: getToolIcon(typeof toolPart.tool === "string" ? toolPart.tool : "tool"),
+ toolPartIds: partId ? [partId] : undefined,
+ totalChars: getPartCharCount(part),
+ })
+ segmentIndex += 1
continue
}
@@ -228,13 +258,18 @@ export function buildTimelineSegments(
const target = ensureSegment(defaultContentType)
if (target) {
target.reasoningTexts.push(text)
+ if (typeof (part as any).id === "string" && (part as any).id.length > 0) {
+ target.partIds.push((part as any).id)
+ }
+ target.totalChars += getPartCharCount(part)
}
continue
}
-
+
if (part.type === "compaction") {
flushPending()
const isAuto = Boolean((part as any)?.auto)
+ const partId = typeof (part as any)?.id === "string" ? ((part as any).id as string) : ""
result.push({
id: `${record.id}:${segmentIndex}`,
messageId: record.id,
@@ -242,6 +277,8 @@ export function buildTimelineSegments(
label: segmentLabel("compaction"),
tooltip: isAuto ? t("messageTimeline.tooltip.compaction.auto") : t("messageTimeline.tooltip.compaction.manual"),
variant: isAuto ? "auto" : "manual",
+ partId,
+ totalChars: 0,
})
segmentIndex += 1
continue
@@ -250,19 +287,23 @@ export function buildTimelineSegments(
if (part.type === "step-start" || part.type === "step-finish") {
continue
}
-
+
const text = collectTextFromPart(part, t)
if (text.trim().length === 0) continue
const target = ensureSegment(defaultContentType)
if (target) {
target.texts.push(text)
target.hasPrimaryText = true
+ if (typeof (part as any).id === "string" && (part as any).id.length > 0) {
+ target.partIds.push((part as any).id)
+ }
+ target.totalChars += getPartCharCount(part)
}
}
flushPending()
-
+
return result
}
@@ -278,7 +319,14 @@ const MessageTimeline: Component = (props) => {
let hoverTimer: number | null = null
let closeTimer: number | null = null
const showTools = () => props.showToolSegments ?? true
-
+ const deleteHover = () => props.deleteHover?.() ?? { kind: "none" as const }
+
+ const isHistogramEligible = (segment: TimelineSegment): boolean => {
+ const allowed = props.deletableMessageIds?.()
+ if (!allowed) return true
+ return allowed.has(segment.messageId)
+ }
+
const registerButtonRef = (segmentId: string, element: HTMLButtonElement | null) => {
if (element) {
buttonRefs.set(segmentId, element)
@@ -286,7 +334,7 @@ const MessageTimeline: Component = (props) => {
buttonRefs.delete(segmentId)
}
}
-
+
const clearHoverTimer = () => {
if (hoverTimer !== null && typeof window !== "undefined") {
window.clearTimeout(hoverTimer)
@@ -312,8 +360,11 @@ const MessageTimeline: Component = (props) => {
setHoverAnchorRect(null)
}, 160)
}
-
+
const handleMouseEnter = (segment: TimelineSegment, event: MouseEvent) => {
+ // Suppress previews during long-press selection gestures.
+ if (longPressTimer !== null) return
+
if (typeof window === "undefined") return
clearHoverTimer()
clearCloseTimer()
@@ -328,7 +379,7 @@ const MessageTimeline: Component = (props) => {
const handleMouseLeave = () => {
scheduleClose()
}
-
+
createEffect(() => {
if (typeof window === "undefined") return
const anchor = hoverAnchorRect()
@@ -350,13 +401,235 @@ const MessageTimeline: Component = (props) => {
clearCloseTimer()
})
- createEffect(() => {
- const activeId = props.activeMessageId
+ // --- Selection & histogram rib state ---
+ const isSelectionActive = createMemo(() => (props.selectedIds?.().size ?? 0) > 0)
+ // Segments eligible for xray ribs. We intentionally exclude messages before
+ // the last compaction (when provided by the parent) to avoid misleading token
+ // weights for content that's no longer in context.
+ const xraySegments = createMemo(() => {
+ if (!isSelectionActive()) return [] as TimelineSegment[]
+ return props.segments.filter((segment) => isHistogramEligible(segment))
+ })
+
+ // Stable layout offsets per badge (relative to scroll content), recomputed only
+ // on activation, resize, or expansion — NOT on every scroll frame.
+ const [badgeOffsets, setBadgeOffsets] = createSignal>({})
+ const [windowWidth, setWindowWidth] = createSignal(typeof window !== "undefined" ? window.innerWidth : 1200)
+ let scrollContainerRef: HTMLDivElement | undefined
+ let xrayOverlayRef: HTMLDivElement | undefined
+
+ // Full layout recomputation: reads every badge's getBoundingClientRect once,
+ // then stores offsets relative to the scroll content so they survive scrolling.
+ const computeBadgeLayout = () => {
+ if (!isSelectionActive() || !scrollContainerRef) return
+ const containerRect = scrollContainerRef.getBoundingClientRect()
+ const scrollTop = scrollContainerRef.scrollTop
+ const offsets: Record = {}
+
+ for (const [id, element] of buttonRefs.entries()) {
+ if (!element) continue
+ const rect = element.getBoundingClientRect()
+ // Store position relative to scroll content (survives scrolling).
+ offsets[id] = {
+ layoutTop: rect.top - containerRect.top + scrollTop,
+ height: rect.height,
+ }
+ }
+ setBadgeOffsets(offsets)
+ if (xrayOverlayRef) {
+ xrayOverlayRef.style.setProperty("--xray-scroll-y", `${-scrollTop}px`)
+ }
+
+ if (typeof window !== "undefined") {
+ setWindowWidth(window.innerWidth)
+ }
+ }
+
+ const handleScroll = () => {
+ if (!isSelectionActive()) return
+ if (!scrollContainerRef || !xrayOverlayRef) return
+ xrayOverlayRef.style.setProperty("--xray-scroll-y", `${-scrollContainerRef.scrollTop}px`)
+ }
+
+ createEffect(() => {
+ if (isSelectionActive()) {
+ computeBadgeLayout()
+ if (typeof window !== "undefined") {
+ // Deferred pass: tool segments become visible when selection activates,
+ // but they may need a layout pass before getBoundingClientRect is accurate.
+ requestAnimationFrame(computeBadgeLayout)
+ window.addEventListener("resize", computeBadgeLayout)
+ onCleanup(() => {
+ window.removeEventListener("resize", computeBadgeLayout)
+ })
+ }
+ }
+ })
+
+ // Re-compute badge layout after expansion changes (tools become visible in DOM)
+ createEffect(() => {
+ props.expandedMessageIds?.()
+ if (isSelectionActive()) {
+ requestAnimationFrame(computeBadgeLayout)
+ }
+ })
+
+ const maxRibWidth = createMemo(() => Math.round(windowWidth() * 0.5))
+
+ // Compute fresh char counts from the store. segment.totalChars can be stale for
+ // tool parts whose output arrived after the timeline segment was first built.
+ const liveSegmentChars = createMemo(() => {
+ if (!isSelectionActive()) return {} as Record
+ const result: Record = {}
+ const resolvedStore = store()
+
+ // Compute live char counts by reading only the parts that the segment
+ // references (partIds/toolPartIds). This stays accurate for streamed tool
+ // outputs without scanning every part in the message.
+ for (const segment of xraySegments()) {
+ const record = resolvedStore.getMessage(segment.messageId)
+ if (!record) {
+ result[segment.id] = segment.totalChars
+ continue
+ }
+
+ const ids = [...(segment.partIds ?? []), ...(segment.toolPartIds ?? [])]
+ let chars = 0
+ for (const partId of ids) {
+ const part = record.parts?.[partId]?.data
+ if (!part) continue
+ chars += getPartCharCount(part)
+ }
+
+ result[segment.id] = chars > 0 ? chars : segment.totalChars
+ }
+
+ return result
+ })
+
+ // Pre-compute aggregate tokens per message: O(n) once, O(1) per lookup.
+ // Avoids the previous O(n²) pattern of iterating all segments inside each item.
+ const aggregateTokensByMessageId = createMemo(() => {
+ const chars = liveSegmentChars()
+ const result: Record = {}
+ for (const s of xraySegments()) {
+ result[s.messageId] = (result[s.messageId] ?? 0) + (chars[s.id] ?? s.totalChars)
+ }
+ for (const id of Object.keys(result)) {
+ result[id] = Math.max(Math.round(result[id] / 4), 1)
+ }
+ return result
+ })
+
+ const getSegmentTokens = (segment: TimelineSegment): number => {
+ const isExpanded = props.expandedMessageIds?.().has(segment.messageId) ?? false
+ // When tools are hidden (not expanded, not in selection mode), assistant/user
+ // bars show aggregate tokens for the whole message. When tools are visible
+ // (expanded or selection mode active), each segment shows its own tokens to
+ // avoid double-counting.
+ if (!isExpanded && !isSelectionActive() && (segment.type === "assistant" || segment.type === "user")) {
+ return aggregateTokensByMessageId()[segment.messageId] ?? 1
+ }
+ const chars = liveSegmentChars()[segment.id] ?? segment.totalChars
+ return Math.max(Math.round(chars / 4), 1)
+ }
+
+ const getMessageAggregateTokens = (messageId: string): number => {
+ return aggregateTokensByMessageId()[messageId] ?? 1
+ }
+
+ const formatTokenLabel = (tokens: number): string => {
+ if (tokens >= 1000000) return `${(tokens / 1000000).toFixed(1)}M`
+ if (tokens >= 1000) return `${(tokens / 1000).toFixed(1)}K`
+ return String(tokens)
+ }
+
+ const maxTokens = createMemo(() => {
+ let max = 0
+ for (const s of xraySegments()) {
+ const tokens = getSegmentTokens(s)
+ if (tokens > max) max = tokens
+ }
+ return Math.max(max, 1)
+ })
+
+ // --- Long-press for mobile selection ---
+ let longPressTimer: number | null = null
+ let wasLongPress = false
+ let pressStartPos = { x: 0, y: 0 }
+
+ const handlePointerDown = (segment: TimelineSegment, event: PointerEvent) => {
+ if (event.button !== 0) return
+ wasLongPress = false
+ pressStartPos = { x: event.clientX, y: event.clientY }
+
+ clearHoverTimer()
+ clearCloseTimer()
+
+ if (longPressTimer !== null && typeof window !== "undefined") {
+ window.clearTimeout(longPressTimer)
+ }
+
+ if (typeof window !== "undefined") {
+ longPressTimer = window.setTimeout(() => {
+ longPressTimer = null
+ wasLongPress = true
+
+ // Scroll anchoring: preserve visual position of the pressed badge.
+ const btn = buttonRefs.get(segment.id)
+ let anchorOffset: number | null = null
+ if (btn && scrollContainerRef) {
+ anchorOffset = btn.offsetTop - scrollContainerRef.scrollTop
+ }
+
+ if (props.onLongPressSelection) {
+ props.onLongPressSelection(segment)
+ } else {
+ props.onToggleSelection?.(segment.id)
+ }
+
+ if (anchorOffset !== null && btn && scrollContainerRef) {
+ const desired = btn.offsetTop - anchorOffset
+ if (Math.abs(scrollContainerRef.scrollTop - desired) > 1) {
+ scrollContainerRef.scrollTop = desired
+ }
+ }
+ }, LONG_PRESS_MS)
+ }
+ }
+
+ const handlePointerUp = () => {
+ if (longPressTimer !== null && typeof window !== "undefined") {
+ window.clearTimeout(longPressTimer)
+ longPressTimer = null
+ }
+ }
+
+ const handlePointerMove = (event: PointerEvent) => {
+ if (longPressTimer !== null) {
+ const dist = Math.sqrt(
+ Math.pow(event.clientX - pressStartPos.x, 2) +
+ Math.pow(event.clientY - pressStartPos.y, 2),
+ )
+ if (dist > JITTER_THRESHOLD) {
+ if (typeof window !== "undefined") {
+ window.clearTimeout(longPressTimer)
+ }
+ longPressTimer = null
+ }
+ }
+ }
+
+ const handleContextMenu = (event: MouseEvent) => {
+ if (wasLongPress) {
+ event.preventDefault()
+ }
+ }
+
+ createEffect(on(() => props.activeSegmentId, (activeId) => {
if (!activeId) return
- const targetSegment = props.segments.find((segment) => segment.messageId === activeId)
- if (!targetSegment) return
- const element = buttonRefs.get(targetSegment.id)
+ const element = buttonRefs.get(activeId)
if (!element) return
const timer = typeof window !== "undefined" ? window.setTimeout(() => {
element.scrollIntoView({ block: "nearest", behavior: "smooth" })
@@ -366,7 +639,7 @@ const MessageTimeline: Component = (props) => {
window.clearTimeout(timer)
}
})
- })
+ }))
createEffect(() => {
const element = tooltipElement()
@@ -383,92 +656,265 @@ const MessageTimeline: Component = (props) => {
})
const previewData = createMemo(() => {
-
const segment = hoveredSegment()
if (!segment) return null
const record = store().getMessage(segment.messageId)
if (!record) return null
return { messageId: segment.messageId }
})
-
+
+ // Pre-computed set of messageIds that have at least one tool segment.
+ // Used by groupRole() inside to avoid O(n) .some() per segment → O(1) .has().
+ const messagesWithTools = createMemo(() => {
+ const set = new Set()
+ for (const s of props.segments) {
+ if (s.type === "tool") set.add(s.messageId)
+ }
+ return set
+ })
+
+ // Pre-computed index map for session message ordering.
+ // Used by isDeleteHovered() to replace O(n) indexOf with O(1) Map.get().
+ const messageIdToSessionIndex = createMemo(() => {
+ const ids = store().getSessionMessageIds(props.sessionId)
+ const map = new Map()
+ for (let i = 0; i < ids.length; i++) map.set(ids[i], i)
+ return map
+ })
+
return (
-
- 
-
-
-
-
-
- {(selection) => (
-
-
)
}
diff --git a/packages/ui/src/components/message-timeline.tsx b/packages/ui/src/components/message-timeline.tsx
index c0e1d9d7..7df1eba0 100644
--- a/packages/ui/src/components/message-timeline.tsx
+++ b/packages/ui/src/components/message-timeline.tsx
@@ -1,12 +1,14 @@
-import { For, Show, createEffect, createMemo, createSignal, onCleanup, type Component } from "solid-js"
+import { For, Show, createEffect, createMemo, createSignal, onCleanup, on, untrack, type Component, type Accessor } from "solid-js"
import MessagePreview from "./message-preview"
import { messageStoreBus } from "../stores/message-v2/bus"
import type { ClientPart } from "../types/message"
import type { MessageRecord } from "../stores/message-v2/types"
import { buildRecordDisplayData } from "../stores/message-v2/record-display-cache"
+import { getPartCharCount } from "../lib/token-utils"
import { getToolIcon } from "./tool-call/utils"
import { User as UserIcon, Bot as BotIcon, FoldVertical, ShieldAlert } from "lucide-solid"
import { useI18n } from "../lib/i18n"
+import type { DeleteHoverState } from "../types/delete-hover"
export type TimelineSegmentType = "user" | "assistant" | "tool" | "compaction"
@@ -19,18 +21,38 @@ export interface TimelineSegment {
shortLabel?: string
variant?: "auto" | "manual"
toolPartIds?: string[]
+ partIds?: string[]
+ partId?: string
+ totalChars: number
}
interface MessageTimelineProps {
segments: TimelineSegment[]
onSegmentClick?: (segment: TimelineSegment) => void
- activeMessageId?: string | null
+ onToggleSelection?: (id: string) => void
+ onLongPressSelection?: (segment: TimelineSegment) => void
+ onSelectRange?: (id: string) => void
+ onClearSelection?: () => void
+ selectedIds?: Accessor{t("messageSection.empty.brandTitle")}
+
+
-
-
-
+
+
+
+
+ )}
+ renderItem={(messageId, index) => (
+ preferences().showThinkingBlocks}
thinkingDefaultExpanded={() => (preferences().thinkingBlocksExpansion ?? "expanded") === "expanded"}
showUsageMetrics={showUsagePreference}
- scrollContainer={scrollElement}
- loading={props.loading}
+ deleteHover={deleteHover}
+ onDeleteHoverChange={setDeleteHover}
+ selectedMessageIds={selectedForDeletion}
+ selectedToolPartKeys={deleteToolPartKeys}
+ onToggleSelectedMessage={setMessageSelectedForDeletion}
onRevert={props.onRevert}
+ onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
onFork={props.onFork}
onContentRendered={handleContentRendered}
- setBottomSentinel={setBottomSentinel}
- suspendMeasurements={() => !isActive()}
/>
-
-
-
-
-
+ messageId}
+ getAnchorId={getMessageAnchorId}
+ getKeyFromAnchorId={getMessageIdFromAnchorId}
+ overscanPx={800}
+ scrollSentinelMarginPx={SCROLL_SENTINEL_MARGIN_PX}
+ suspendMeasurements={() => !isActive()}
+ loading={() => Boolean(props.loading)}
+ isActive={isActive}
+ scrollToBottomOnActivate={() => false}
+ initialScrollToBottom={() => false}
+ initialAutoScroll={initialAutoScroll}
+ resetKey={() => props.sessionId}
+ followToken={followToken}
+ onScroll={() => {
+ clearQuoteSelection()
+ scrollCache.persist(streamElement())
+ }}
+ onMouseUp={() => handleStreamMouseUp()}
+ onClick={(e) => {
+ if (selectedTimelineIds().size === 0) return
+ const target = e.target as HTMLElement
+ if (target.closest("button, a, input, [role='button']")) return
+ handleClearTimelineSelection()
+ }}
+ onActiveKeyChange={(messageId) => {
+ if (!messageId) return
+ const firstSeg = timelineSegments().find((s) => s.messageId === messageId)
+ if (firstSeg) {
+ setActiveSegmentId((current) => (current === firstSeg.id ? current : firstSeg.id))
+ }
+ }}
+ onScrollElementChange={(element) => {
+ setStreamElement(element)
+ if (!element) clearQuoteSelection()
+ }}
+ onShellElementChange={(element) => {
+ setStreamShellElement(element)
+ if (!element) clearQuoteSelection()
+ }}
+ scrollToTopAriaLabel={() => t("messageSection.scroll.toFirstAriaLabel")}
+ scrollToBottomAriaLabel={() => t("messageSection.scroll.toLatestAriaLabel")}
+ registerApi={(api) => setListApi(api)}
+ registerState={(state) => setListState(state)}
+ renderBeforeItems={() => (
+ <>
+
+
-
-
-
+
-
+
-
+
+
+ {t("messageSection.empty.brandTitle")}
+{t("messageSection.empty.title")}
+{t("messageSection.empty.description")}
+-
+
- + {t("messageSection.empty.tips.commandPalette")} + + +
- {t("messageSection.empty.tips.askAboutCodebase")} +
-
+ {t("messageSection.empty.tips.attachFilesPrefix")}
@+
+
{t("messageSection.empty.title")}
-{t("messageSection.empty.description")}
--
-
- - {t("messageSection.empty.tips.commandPalette")} - - -
- {t("messageSection.empty.tips.askAboutCodebase")} -
-
- {t("messageSection.empty.tips.attachFilesPrefix")}
@-
-
-
-
- {t("messageSection.loading.messages")}
-
+
+
+ {t("messageSection.loading.messages")}
+