fix(ui): render image attachment preview in portal

packages/opencode-config/package.json

@@ -4,6 +4,6 @@
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@opencode-ai/plugin": "1.2.10"
+    "@opencode-ai/plugin": "1.2.14"
   }
 }

packages/ui/src/components/message-block-list.tsx

@@ -22,10 +22,13 @@ interface MessageBlockListProps {
   scrollContainer: Accessor<HTMLDivElement | undefined>
   loading?: boolean
   onRevert?: (messageId: string) => void
+  onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
   onFork?: (messageId?: string) => void
   onContentRendered?: () => void
   deleteHover?: Accessor<DeleteHoverState>
   onDeleteHoverChange?: (state: DeleteHoverState) => void
+  selectedMessageIds?: Accessor<Set<string>>
+  onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
   setBottomSentinel: (element: HTMLDivElement | null) => void
   suspendMeasurements?: () => boolean
 }
@@ -56,7 +59,10 @@ export default function MessageBlockList(props: MessageBlockListProps) {
               showUsageMetrics={props.showUsageMetrics}
               deleteHover={props.deleteHover}
               onDeleteHoverChange={props.onDeleteHoverChange}
+              selectedMessageIds={props.selectedMessageIds}
+              onToggleSelectedMessage={props.onToggleSelectedMessage}
               onRevert={props.onRevert}
+              onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
               onFork={props.onFork}
               onContentRendered={props.onContentRendered}
             />

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, MessageSquareX, 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,11 +12,18 @@ 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 (
+    <span class="relative inline-block w-3.5 h-3.5" aria-hidden="true">
+      <ListStart class="absolute inset-0 w-3.5 h-3.5" aria-hidden="true" />
+    </span>
+  )
+}
+
 const TOOL_ICON = "🔧"
 const USER_BORDER_COLOR = "var(--message-user-border)"
 const ASSISTANT_BORDER_COLOR = "var(--message-assistant-border)"
@@ -196,10 +203,13 @@ interface MessageContentItemProps {
   messageIndex: number
   lastAssistantIndex: () => number
   onRevert?: (messageId: string) => void
+  onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
   onFork?: (messageId?: string) => void
   onContentRendered?: () => void
   showDeleteMessage?: boolean
   onDeleteHoverChange?: (state: DeleteHoverState) => void
+  selectedMessageIds?: () => Set<string>
+  onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
 }
 
 function isSupportedPartType(part: unknown): boolean {
@@ -288,7 +298,10 @@ function MessageContentItem(props: MessageContentItemProps) {
           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}
         />
@@ -306,13 +319,17 @@ interface ToolCallItemProps {
   onContentRendered?: () => void
   showDeleteMessage?: boolean
   onDeleteHoverChange?: (state: DeleteHoverState) => void
+  onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
+  selectedMessageIds?: () => Set<string>
+  onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
 }
 
 function ToolCallItem(props: ToolCallItemProps) {
   const { t } = useI18n()
-  const [deleting, setDeleting] = createSignal(false)
   const [deletingMessage, setDeletingMessage] = createSignal(false)
-  const [hoverDeletePart, setHoverDeletePart] = createSignal(false)
+  const [deletingUpTo, setDeletingUpTo] = createSignal(false)
+
+  const isSelectedForDeletion = () => Boolean(props.selectedMessageIds?.().has(props.messageId))
 
   const record = createMemo(() => props.store().getMessage(props.messageId))
   const messageInfo = createMemo(() => props.store().getMessageInfo(props.messageId))
@@ -329,14 +346,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 ""
@@ -360,26 +369,6 @@ function ToolCallItem(props: ToolCallItemProps) {
     navigateToTaskSession(location)
   }
 
-  const handleDeleteToolPart = async (event: MouseEvent) => {
-    event.preventDefault()
-    event.stopPropagation()
-
-    if (deleteDisabled()) return
-
-    setDeleting(true)
-    try {
-      await deleteMessagePart(props.instanceId, props.sessionId, props.messageId, props.partId)
-    } catch (error) {
-      showAlertDialog(t("messageBlock.tool.deletePart.failed.message"), {
-        title: t("messageBlock.tool.deletePart.failed.title"),
-        detail: error instanceof Error ? error.message : String(error),
-        variant: "error",
-      })
-    } finally {
-      setDeleting(false)
-    }
-  }
-
   const handleDeleteMessage = async (event: MouseEvent) => {
     event.preventDefault()
     event.stopPropagation()
@@ -401,18 +390,51 @@ function ToolCallItem(props: ToolCallItemProps) {
     }
   }
 
+  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 (
     <Show when={toolPart()}>
       {(resolvedToolPart) => (
-        <div class="delete-hover-scope" data-delete-part-hover={hoverDeletePart() ? "true" : undefined}>
+        <div class="delete-hover-scope">
           <div class="tool-call-header-label">
             <div class="tool-call-header-meta">
+              <Show when={props.showDeleteMessage}>
+                <input
+                  class="message-select-checkbox"
+                  type="checkbox"
+                  checked={isSelectedForDeletion()}
+                  onClick={(event) => {
+                    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")}
+                />
+              </Show>
+
               <span class="tool-call-icon">{TOOL_ICON}</span>
               <span>{t("messageBlock.tool.header")}</span>
               <span class="tool-name">{toolName() || t("messageBlock.tool.unknown")}</span>
             </div>
 
-              <div class="flex items-center gap-2">
+            <div class="flex items-center gap-0">
               <Show when={taskSessionId()}>
                 <button
                   class="tool-call-header-button"
@@ -426,41 +448,35 @@ function ToolCallItem(props: ToolCallItemProps) {
                 </button>
               </Show>
 
+              <Show when={props.showDeleteMessage}>
                 <button
                   class="tool-call-header-button"
                   type="button"
-                  disabled={deleteDisabled()}
-                  onClick={handleDeleteToolPart}
-                  onMouseEnter={() => {
-                    setHoverDeletePart(true)
-                    props.onDeleteHoverChange?.({ kind: "part", messageId: props.messageId, partId: props.partId, partType: "tool" })
-                  }}
-                  onMouseLeave={() => {
-                    setHoverDeletePart(false)
-                    props.onDeleteHoverChange?.({ kind: "none" })
-                  }}
-                  title={deleting() ? t("messageBlock.tool.deletePart.deleting") : t("messageBlock.tool.deletePart.label")}
-                  aria-label={deleting() ? t("messageBlock.tool.deletePart.deleting") : t("messageBlock.tool.deletePart.label")}
+                  disabled={!props.onDeleteMessagesUpTo || deletingUpTo()}
+                  onClick={handleDeleteUpTo}
+                  onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "deleteUpTo", messageId: props.messageId })}
+                  onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
+                  title={t("messageItem.actions.deleteMessagesUpTo")}
+                  aria-label={t("messageItem.actions.deleteMessagesUpTo")}
                 >
-                  <Trash2 class="w-3.5 h-3.5" aria-hidden="true" />
+                  <DeleteUpToIcon />
                 </button>
 
-                <Show when={props.showDeleteMessage}>
-                  <button
-                    class="tool-call-header-button"
-                    type="button"
-                    disabled={deletingMessage()}
-                    onClick={handleDeleteMessage}
-                    onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "message", messageId: props.messageId })}
-                    onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
-                    title={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
-                    aria-label={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
-                  >
-                    <MessageSquareX class="w-3.5 h-3.5" aria-hidden="true" />
-                  </button>
-                </Show>
-              </div>
+                <button
+                  class="tool-call-header-button"
+                  type="button"
+                  disabled={deletingMessage()}
+                  onClick={handleDeleteMessage}
+                  onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "message", messageId: props.messageId })}
+                  onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
+                  title={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
+                  aria-label={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
+                >
+                  <Trash class="w-3.5 h-3.5" aria-hidden="true" />
+                </button>
+              </Show>
             </div>
+          </div>
 
           <ToolCall
             toolCall={resolvedToolPart()}
@@ -526,7 +542,10 @@ interface MessageBlockProps {
   showUsageMetrics: () => boolean
   deleteHover?: () => DeleteHoverState
   onDeleteHoverChange?: (state: DeleteHoverState) => void
+  selectedMessageIds?: () => Set<string>
+  onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
   onRevert?: (messageId: string) => void
+  onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
   onFork?: (messageId?: string) => void
   onContentRendered?: () => void
 }
@@ -539,7 +558,26 @@ export default function MessageBlock(props: MessageBlockProps) {
 
   const isDeleteMessageHovered = () => {
     const hover = props.deleteHover?.() ?? ({ kind: "none" } as DeleteHoverState)
-    return hover.kind === "message" && hover.messageId === props.messageId
+
+    const selected = props.selectedMessageIds?.() ?? new Set<string>()
+    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<MessageDisplayBlock | null>(() => {
@@ -749,6 +787,9 @@ export default function MessageBlock(props: MessageBlockProps) {
                     showDeleteMessage={index() === 0}
                     onDeleteHoverChange={props.onDeleteHoverChange}
                     onRevert={props.onRevert}
+                    onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+                    selectedMessageIds={props.selectedMessageIds}
+                    onToggleSelectedMessage={props.onToggleSelectedMessage}
                     onFork={props.onFork}
                     onContentRendered={props.onContentRendered}
                   />
@@ -766,6 +807,9 @@ export default function MessageBlock(props: MessageBlockProps) {
                           partId={toolItem.partId}
                           showDeleteMessage={index() === 0}
                           onDeleteHoverChange={props.onDeleteHoverChange}
+                          onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+                          selectedMessageIds={props.selectedMessageIds}
+                          onToggleSelectedMessage={props.onToggleSelectedMessage}
                           onContentRendered={props.onContentRendered}
                         />
                       </div>
@@ -783,6 +827,9 @@ export default function MessageBlock(props: MessageBlockProps) {
                     sessionId={props.sessionId}
                     messageId={props.messageId}
                     onDeleteHoverChange={props.onDeleteHoverChange}
+                    onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+                    selectedMessageIds={props.selectedMessageIds}
+                    onToggleSelectedMessage={props.onToggleSelectedMessage}
                   />
                 </Match>
                 <Match when={item.type === "step-finish"}>
@@ -797,6 +844,9 @@ export default function MessageBlock(props: MessageBlockProps) {
                     sessionId={props.sessionId}
                     messageId={props.messageId}
                     onDeleteHoverChange={props.onDeleteHoverChange}
+                    onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+                    selectedMessageIds={props.selectedMessageIds}
+                    onToggleSelectedMessage={props.onToggleSelectedMessage}
                   />
                 </Match>
                 <Match when={item.type === "compaction"}>
@@ -807,9 +857,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}
                   />
                 </Match>
                 <Match when={item.type === "reasoning"}>
@@ -819,11 +871,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}
                   />
                 </Match>
               </Switch>
@@ -847,6 +901,9 @@ interface StepCardProps {
   sessionId?: string
   messageId?: string
   onDeleteHoverChange?: (state: DeleteHoverState) => void
+  onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
+  selectedMessageIds?: () => Set<string>
+  onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
 }
 
 interface CompactionCardProps {
@@ -856,16 +913,18 @@ interface CompactionCardProps {
   instanceId: string
   sessionId: string
   messageId: string
-  partId: string
   showDeleteMessage?: boolean
   onDeleteHoverChange?: (state: DeleteHoverState) => void
+  onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
+  selectedMessageIds?: () => Set<string>
+  onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
 }
 
 function CompactionCard(props: CompactionCardProps) {
   const { t } = useI18n()
-  const [deleting, setDeleting] = createSignal(false)
   const [deletingMessage, setDeletingMessage] = createSignal(false)
-  const [hoverDeletePart, setHoverDeletePart] = 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)
@@ -873,26 +932,6 @@ 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 handleDelete = async (event: MouseEvent) => {
-    event.preventDefault()
-    event.stopPropagation()
-    if (!canDelete()) return
-    setDeleting(true)
-    try {
-      await deleteMessagePart(props.instanceId, props.sessionId, props.messageId, props.partId)
-    } catch (error) {
-      showAlertDialog(t("messagePart.actions.deleteFailedMessage"), {
-        title: t("messagePart.actions.deleteFailedTitle"),
-        detail: error instanceof Error ? error.message : String(error),
-        variant: "error",
-      })
-    } finally {
-      setDeleting(false)
-    }
-  }
-
   const canDeleteMessage = () => Boolean(props.showDeleteMessage) && !deletingMessage()
 
   const handleDeleteMessage = async (event: MouseEvent) => {
@@ -914,16 +953,43 @@ function CompactionCard(props: CompactionCardProps) {
     }
   }
 
+  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 (
     <div
       class={`delete-hover-scope ${containerClass()} relative`}
-      data-delete-part-hover={hoverDeletePart() ? "true" : undefined}
       style={{ "border-left": `4px solid ${borderColor()}` }}
       role="status"
       aria-label={t("messageBlock.compaction.ariaLabel")}
     >
       <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
         <Show when={props.showDeleteMessage}>
+          <button
+            type="button"
+            class="tool-call-header-button"
+            disabled={!props.onDeleteMessagesUpTo || deletingUpTo()}
+            onClick={handleDeleteUpTo}
+            onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "deleteUpTo", messageId: props.messageId })}
+            onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
+            title={t("messageItem.actions.deleteMessagesUpTo")}
+            aria-label={t("messageItem.actions.deleteMessagesUpTo")}
+          >
+            <DeleteUpToIcon />
+          </button>
+
           <button
             type="button"
             class="tool-call-header-button"
@@ -934,31 +1000,30 @@ function CompactionCard(props: CompactionCardProps) {
             title={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
             aria-label={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
           >
-            <MessageSquareX class="w-3.5 h-3.5" aria-hidden="true" />
+            <Trash class="w-3.5 h-3.5" aria-hidden="true" />
           </button>
         </Show>
-
-        <button
-          type="button"
-          class="tool-call-header-button"
-          disabled={!canDelete()}
-          onClick={handleDelete}
-          onMouseEnter={() => {
-            setHoverDeletePart(true)
-            props.onDeleteHoverChange?.({ kind: "part", messageId: props.messageId, partId: props.partId, partType: "compaction" })
-          }}
-          onMouseLeave={() => {
-            setHoverDeletePart(false)
-            props.onDeleteHoverChange?.({ kind: "none" })
-          }}
-          title={t("messagePart.actions.deleteTitle")}
-          aria-label={t("messagePart.actions.deleteTitle")}
-        >
-          {deleting() ? t("messagePart.actions.deleting") : t("messagePart.actions.delete")}
-        </button>
       </div>
 
       <div class="message-compaction-row">
+        <Show when={props.showDeleteMessage}>
+          <input
+            class="message-select-checkbox"
+            type="checkbox"
+            checked={isSelectedForDeletion()}
+            onClick={(event) => {
+              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")}
+          />
+        </Show>
+
         <FoldVertical class="message-compaction-icon w-4 h-4" aria-hidden="true" />
         <span class="message-compaction-label">{label()}</span>
       </div>
@@ -969,6 +1034,8 @@ 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)
@@ -1034,6 +1101,21 @@ function StepCard(props: StepCardProps) {
     }
   }
 
+  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<ReturnType<typeof usageStats>>) => {
     const entries = [
@@ -1065,19 +1147,52 @@ function StepCard(props: StepCardProps) {
     }
     return (
       <div class={`message-step-card message-step-finish message-step-finish-flush relative`} style={finishStyle()}>
+        <Show when={props.showDeleteMessage && props.messageId}>
+          <input
+            class="message-select-checkbox absolute left-2 top-1/2 -translate-y-1/2"
+            type="checkbox"
+            checked={isSelectedForDeletion()}
+            onClick={(event) => {
+              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")}
+          />
+        </Show>
+
         <Show when={props.showDeleteMessage}>
-          <button
-            type="button"
-            class="message-action-button absolute right-2 top-1/2 -translate-y-1/2"
-            disabled={!canDeleteMessage()}
-            onClick={handleDeleteMessage}
-            onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "message", messageId: props.messageId! })}
-            onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
-            title={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
-            aria-label={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
-          >
-            <MessageSquareX class="w-3.5 h-3.5" aria-hidden="true" />
-          </button>
+          <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
+            <button
+              type="button"
+              class="message-action-button"
+              disabled={!props.onDeleteMessagesUpTo || deletingUpTo()}
+              onClick={handleDeleteUpTo}
+              onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "deleteUpTo", messageId: props.messageId! })}
+              onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
+              title={t("messageItem.actions.deleteMessagesUpTo")}
+              aria-label={t("messageItem.actions.deleteMessagesUpTo")}
+            >
+              <DeleteUpToIcon />
+            </button>
+
+            <button
+              type="button"
+              class="message-action-button"
+              disabled={!canDeleteMessage()}
+              onClick={handleDeleteMessage}
+              onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "message", messageId: props.messageId! })}
+              onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
+              title={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
+              aria-label={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
+            >
+              <Trash class="w-3.5 h-3.5" aria-hidden="true" />
+            </button>
+          </div>
         </Show>
 
         {renderUsageChips(usage)}
@@ -1086,10 +1201,28 @@ function StepCard(props: StepCardProps) {
   }
 
   return (
-    <div class={`message-step-card message-step-start`}>
+    <div class={`message-step-card message-step-start relative`}>
       <div class="message-step-heading">
         <div class="message-step-title">
           <div class="message-step-title-left">
+            <Show when={props.showDeleteMessage && props.messageId}>
+              <input
+                class="message-select-checkbox"
+                type="checkbox"
+                checked={isSelectedForDeletion()}
+                onClick={(event) => {
+                  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")}
+              />
+            </Show>
+
             <Show when={props.showAgentMeta && (agentIdentifier() || modelIdentifier())}>
               <span class="message-step-meta-inline">
                 <Show when={agentIdentifier()}>{(value) => <span>{t("messageBlock.step.agentLabel", { agent: value() })}</span>}</Show>
@@ -1116,19 +1249,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<void>
+  selectedMessageIds?: () => Set<string>
+  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 [hoverDeletePart, setHoverDeletePart] = 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))
@@ -1155,6 +1296,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 ""
@@ -1195,27 +1365,6 @@ 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 handleDelete = async (event: MouseEvent) => {
-    event.preventDefault()
-    event.stopPropagation()
-    if (!canDelete()) return
-    setDeleting(true)
-    try {
-      await deleteMessagePart(props.instanceId, props.sessionId, props.messageId, props.partId)
-    } catch (error) {
-      showAlertDialog(t("messagePart.actions.deleteFailedMessage"), {
-        title: t("messagePart.actions.deleteFailedTitle"),
-        detail: error instanceof Error ? error.message : String(error),
-        variant: "error",
-      })
-    } finally {
-      setDeleting(false)
-    }
-  }
-
   const canDeleteMessage = () => Boolean(props.showDeleteMessage) && !deletingMessage()
 
   const handleDeleteMessage = async (event: MouseEvent) => {
@@ -1237,9 +1386,24 @@ function ReasoningCard(props: ReasoningCardProps) {
     }
   }
 
+  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 (
-    <div class="delete-hover-scope message-reasoning-card" data-delete-part-hover={hoverDeletePart() ? "true" : undefined}>
-      <div class="message-reasoning-header">
+    <div class="delete-hover-scope message-reasoning-card">
+      <div class="message-reasoning-header" ref={(el) => (headerEl = el)}>
         <button
           type="button"
           class="message-reasoning-toggle"
@@ -1247,9 +1411,30 @@ function ReasoningCard(props: ReasoningCardProps) {
           aria-expanded={expanded()}
           aria-label={expanded() ? t("messageBlock.reasoning.collapseAriaLabel") : t("messageBlock.reasoning.expandAriaLabel")}
         >
-          <span class="message-reasoning-label flex flex-wrap items-center gap-2">
-            <span>{t("messageBlock.reasoning.thinkingLabel")}</span>
-            <Show when={props.showAgentMeta && (agentIdentifier() || modelIdentifier())}>
+          <span class="message-reasoning-label">
+            <span class="message-reasoning-label-primary" ref={(el) => (primaryEl = el)}>
+              <Show when={props.showDeleteMessage}>
+                <input
+                  class="message-select-checkbox"
+                  type="checkbox"
+                  checked={isSelectedForDeletion()}
+                  onClick={(event) => {
+                    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")}
+                />
+              </Show>
+
+              <span>{t("messageBlock.reasoning.thinkingLabel")}</span>
+            </span>
+
+            <Show when={hasMeta() && showMetaInline()}>
               <span class="message-step-meta-inline">
                 <Show when={agentIdentifier()}>
                   {(value) => (
@@ -1263,10 +1448,28 @@ function ReasoningCard(props: ReasoningCardProps) {
                 </Show>
               </span>
             </Show>
+
+            <Show when={hasMeta()}>
+              <span
+                ref={(el) => (metaMeasureEl = el)}
+                class="message-step-meta-inline message-step-meta-inline--measure"
+              >
+                <Show when={agentIdentifier()}>
+                  {(value) => (
+                    <span class="font-medium text-[var(--message-assistant-border)]">{t("messageBlock.step.agentLabel", { agent: value() })}</span>
+                  )}
+                </Show>
+                <Show when={modelIdentifier()}>
+                  {(value) => (
+                    <span class="font-medium text-[var(--message-assistant-border)]">{t("messageBlock.step.modelLabel", { model: value() })}</span>
+                  )}
+                </Show>
+              </span>
+            </Show>
           </span>
         </button>
 
-        <div class="message-reasoning-actions">
+        <div class="message-reasoning-actions" ref={(el) => (actionsEl = el)}>
           <button
             type="button"
             class="message-action-button"
@@ -1283,28 +1486,20 @@ function ReasoningCard(props: ReasoningCardProps) {
             </Show>
           </button>
 
-          <Show when={hasDeleteTarget()}>
+          <Show when={props.showDeleteMessage}>
             <button
               type="button"
               class="message-action-button"
-              onClick={handleDelete}
-              disabled={!canDelete()}
-              onMouseEnter={() => {
-                setHoverDeletePart(true)
-                props.onDeleteHoverChange?.({ kind: "part", messageId: props.messageId, partId: props.partId, partType: "reasoning" })
-              }}
-              onMouseLeave={() => {
-                setHoverDeletePart(false)
-                props.onDeleteHoverChange?.({ kind: "none" })
-              }}
-              aria-label={t("messagePart.actions.deleteTitle")}
-              title={t("messagePart.actions.deleteTitle")}
+              onClick={handleDeleteUpTo}
+              disabled={!props.onDeleteMessagesUpTo || deletingUpTo()}
+              onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "deleteUpTo", messageId: props.messageId })}
+              onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
+              aria-label={t("messageItem.actions.deleteMessagesUpTo")}
+              title={t("messageItem.actions.deleteMessagesUpTo")}
             >
-              <Trash2 class="w-3.5 h-3.5" aria-hidden="true" />
+              <DeleteUpToIcon />
             </button>
-          </Show>
 
-          <Show when={props.showDeleteMessage}>
             <button
               type="button"
               class="message-action-button"
@@ -1315,7 +1510,7 @@ function ReasoningCard(props: ReasoningCardProps) {
               aria-label={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
               title={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
             >
-              <MessageSquareX class="w-3.5 h-3.5" aria-hidden="true" />
+              <Trash class="w-3.5 h-3.5" aria-hidden="true" />
             </button>
           </Show>
 
@@ -1323,6 +1518,23 @@ function ReasoningCard(props: ReasoningCardProps) {
         </div>
       </div>
 
+      <Show when={hasMeta() && !showMetaInline()}>
+        <div class="message-reasoning-meta-row">
+          <span class="message-step-meta-inline">
+            <Show when={agentIdentifier()}>
+              {(value) => (
+                <span class="font-medium text-[var(--message-assistant-border)]">{t("messageBlock.step.agentLabel", { agent: value() })}</span>
+              )}
+            </Show>
+            <Show when={modelIdentifier()}>
+              {(value) => (
+                <span class="font-medium text-[var(--message-assistant-border)]">{t("messageBlock.step.modelLabel", { model: value() })}</span>
+              )}
+            </Show>
+          </span>
+        </div>
+      </Show>
+
       <Show when={expanded()}>
         <div class="message-reasoning-expanded">
           <div class="message-reasoning-body">

packages/ui/src/components/message-item.tsx

@@ -1,5 +1,6 @@
-import { For, Show, createSignal } from "solid-js"
-import { Copy, MessageSquareX, Split, Trash2, Undo } from "lucide-solid"
+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"
@@ -7,10 +8,18 @@ import MessagePart from "./message-part"
 import { copyToClipboard } from "../lib/clipboard"
 import { useI18n } from "../lib/i18n"
 import { showAlertDialog } from "../stores/alerts"
-import { deleteMessage, 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 (
+    <span class="relative inline-block w-3.5 h-3.5" aria-hidden="true">
+      <ListStart class="absolute inset-0 w-3.5 h-3.5" aria-hidden="true" />
+    </span>
+  )
+}
+
 interface MessageItemProps {
   record: MessageRecord
   messageInfo?: MessageInfo
@@ -19,6 +28,9 @@ interface MessageItemProps {
   isQueued?: boolean
   parts: ClientPart[]
   onRevert?: (messageId: string) => void
+  selectedMessageIds?: () => Set<string>
+  onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
+  onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
   onFork?: (messageId?: string) => void
   showAgentMeta?: boolean
   onContentRendered?: () => void
@@ -29,9 +41,99 @@ interface MessageItemProps {
 export default function MessageItem(props: MessageItemProps) {
   const { t } = useI18n()
   const [copied, setCopied] = createSignal(false)
-  const [deletingParts, setDeletingParts] = createSignal<Set<string>>(new Set())
   const [deletingMessage, setDeletingMessage] = createSignal(false)
-  const [hoveredDeletePartId, setHoveredDeletePartId] = createSignal<string | null>(null)
+  const [deletingUpTo, setDeletingUpTo] = createSignal(false)
+
+  type ImagePreviewState = {
+    url: string
+    name: string
+    anchor: HTMLElement
+  }
+
+  const [imagePreview, setImagePreview] = createSignal<ImagePreviewState | null>(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
@@ -128,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
@@ -195,50 +302,6 @@ 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)
-    try {
-      await deleteMessagePart(props.instanceId, props.sessionId, props.record.id, partId)
-    } catch (error) {
-      showAlertDialog(t("messagePart.actions.deleteFailedMessage"), {
-        title: t("messagePart.actions.deleteFailedTitle"),
-        detail: error instanceof Error ? error.message : String(error),
-        variant: "error",
-      })
-    } finally {
-      setPartDeleting(partId, false)
-    }
-  }
-
   const handleDeleteMessage = async () => {
     if (deletingMessage()) return
     setDeletingMessage(true)
@@ -255,6 +318,17 @@ export default function MessageItem(props: MessageItemProps) {
     }
   }
 
+  const handleDeleteUpTo = async () => {
+    if (!props.onDeleteMessagesUpTo) return
+    if (deletingUpTo()) return
+    setDeletingUpTo(true)
+    try {
+      await props.onDeleteMessagesUpTo(props.record.id)
+    } finally {
+      setDeletingUpTo(false)
+    }
+  }
+
   if (!isUser() && !hasContent() && !isGenerating()) {
     return null
   }
@@ -309,14 +383,47 @@ export default function MessageItem(props: MessageItemProps) {
   return (
     <div class={containerClass()}>
       <header class={`message-item-header ${isUser() ? "pb-0.5" : "pb-0"}`}>
-        <div class="message-item-header-row message-item-header-row--top">
-          <div class="message-speaker">
-            <span class="message-speaker-label" data-role={isUser() ? "user" : "assistant"}>
-              {speakerLabel()}
-            </span>
+        <div class="message-item-header-row message-item-header-row--top" ref={(el) => (topRowEl = el)}>
+          <div class="message-header-left">
+            <div class="message-speaker-primary" ref={(el) => (speakerPrimaryEl = el)}>
+              <Show when={props.showDeleteMessage}>
+                <input
+                  class="message-select-checkbox"
+                  type="checkbox"
+                  checked={isSelectedForDeletion()}
+                  onClick={(event) => {
+                    event.stopPropagation()
+                  }}
+                  onChange={(event) => {
+                    event.stopPropagation()
+                    const next = Boolean((event.currentTarget as HTMLInputElement).checked)
+                    props.onToggleSelectedMessage?.(props.record.id, next)
+                  }}
+                  aria-label={t("messageItem.selection.checkboxAriaLabel")}
+                  title={t("messageItem.selection.checkboxAriaLabel")}
+                />
+              </Show>
+
+              <span class="message-speaker-label" data-role={isUser() ? "user" : "assistant"}>
+                {speakerLabel()}
+              </span>
+            </div>
+
+            <Show when={metaText() && showMetaInline()}>
+              <span class="message-agent-meta-inline">{metaText()}</span>
+            </Show>
+
+            <Show when={metaText()}>
+              <span
+                ref={(el) => (metaMeasureEl = el)}
+                class="message-agent-meta-inline message-agent-meta-inline--measure"
+              >
+                {metaText()}
+              </span>
+            </Show>
           </div>
 
-          <div class="message-item-actions">
+          <div class="message-item-actions" ref={(el) => (actionsEl = el)}>
             <Show when={isUser()}>
               <div class="message-action-group">
                 <button
@@ -351,6 +458,18 @@ export default function MessageItem(props: MessageItemProps) {
                 </Show>
 
                 <Show when={props.showDeleteMessage}>
+                  <button
+                    class="message-action-button"
+                    onClick={() => void handleDeleteUpTo()}
+                    disabled={!props.onDeleteMessagesUpTo || deletingUpTo()}
+                    onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "deleteUpTo", messageId: props.record.id })}
+                    onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
+                    title={t("messageItem.actions.deleteMessagesUpTo")}
+                    aria-label={t("messageItem.actions.deleteMessagesUpTo")}
+                  >
+                    <DeleteUpToIcon />
+                  </button>
+
                   <button
                     class="message-action-button"
                     onClick={handleDeleteMessage}
@@ -360,7 +479,7 @@ export default function MessageItem(props: MessageItemProps) {
                     title={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
                     aria-label={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
                   >
-                    <MessageSquareX class="w-3.5 h-3.5" aria-hidden="true" />
+                    <Trash class="w-3.5 h-3.5" aria-hidden="true" />
                   </button>
                 </Show>
               </div>
@@ -376,29 +495,19 @@ export default function MessageItem(props: MessageItemProps) {
                   <Copy class="w-3.5 h-3.5" aria-hidden="true" />
                 </button>
 
-                <Show when={deletableTextPartId()}>
-                  {(partId) => (
-                    <button
-                      class="message-action-button"
-                      onClick={() => void handleDeletePart(partId())}
-                      disabled={isDeletingPart(partId())}
-                      onMouseEnter={() => {
-                        setHoveredDeletePartId(partId())
-                        props.onDeleteHoverChange?.({ kind: "part", messageId: props.record.id, partId: partId(), partType: "text" })
-                      }}
-                      onMouseLeave={() => {
-                        setHoveredDeletePartId(null)
-                        props.onDeleteHoverChange?.({ kind: "none" })
-                      }}
-                      title={isDeletingPart(partId()) ? t("messagePart.actions.deleting") : t("messagePart.actions.delete")}
-                      aria-label={isDeletingPart(partId()) ? t("messagePart.actions.deleting") : t("messagePart.actions.delete")}
-                    >
-                      <Trash2 class="w-3.5 h-3.5" aria-hidden="true" />
-                    </button>
-                  )}
-                </Show>
-
                 <Show when={props.showDeleteMessage}>
+                  <button
+                    class="message-action-button"
+                    onClick={() => void handleDeleteUpTo()}
+                    disabled={!props.onDeleteMessagesUpTo || deletingUpTo()}
+                    onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "deleteUpTo", messageId: props.record.id })}
+                    onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
+                    title={t("messageItem.actions.deleteMessagesUpTo")}
+                    aria-label={t("messageItem.actions.deleteMessagesUpTo")}
+                  >
+                    <DeleteUpToIcon />
+                  </button>
+
                   <button
                     class="message-action-button"
                     onClick={handleDeleteMessage}
@@ -408,7 +517,7 @@ export default function MessageItem(props: MessageItemProps) {
                     title={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
                     aria-label={deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage")}
                   >
-                    <MessageSquareX class="w-3.5 h-3.5" aria-hidden="true" />
+                    <Trash class="w-3.5 h-3.5" aria-hidden="true" />
                   </button>
                 </Show>
               </div>
@@ -417,12 +526,10 @@ export default function MessageItem(props: MessageItemProps) {
           </div>
         </div>
 
-        <Show when={agentMeta()}>
-          {(meta) => (
-            <div class="message-item-header-row message-item-header-row--bottom">
-              <span class="message-agent-meta">{meta()}</span>
-            </div>
-          )}
+        <Show when={metaText() && !showMetaInline()}>
+          <div class="message-item-header-row message-item-header-row--meta">
+            <span class="message-agent-meta-block">{metaText()}</span>
+          </div>
         </Show>
 
       </header>
@@ -446,15 +553,8 @@ export default function MessageItem(props: MessageItemProps) {
 
         <For each={messageParts()}>
           {(part) => {
-            const partId = typeof (part as any)?.id === "string" ? ((part as any).id as string) : ""
-            const isHoveredDeleteTarget = () => Boolean(partId) && hoveredDeletePartId() === partId
-
             return (
-              <div
-                class="delete-hover-scope message-part-shell"
-                data-part-id={partId}
-                data-delete-part-hover={isHoveredDeleteTarget() ? "true" : undefined}
-              >
+              <div class="message-part-shell">
                 <MessagePart
                   part={part}
                   messageType={props.record.role}
@@ -474,12 +574,16 @@ export default function MessageItem(props: MessageItemProps) {
               {(attachment) => {
                 const name = getAttachmentName(attachment)
                 const isImage = isImageAttachment(attachment)
-                const isHoveredDeleteTarget = () => hoveredDeletePartId() === attachment.id
                 return (
                   <div
-                    class={`delete-hover-scope attachment-chip ${isImage ? "attachment-chip-image" : ""}`}
-                    data-delete-part-hover={isHoveredDeleteTarget() ? "true" : undefined}
+                    class={`attachment-chip ${isImage ? "attachment-chip-image" : ""}`}
                     title={name}
+                    onMouseEnter={(e) => {
+                      if (!isImage) return
+                      const el = e.currentTarget as HTMLElement
+                      showImagePreview(el, attachment.url || "", name)
+                    }}
+                    onMouseLeave={() => setImagePreview(null)}
                   >
                     <Show when={isImage} fallback={
                       <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -508,34 +612,6 @@ export default function MessageItem(props: MessageItemProps) {
                         </svg>
                       </button>
                     </Show>
-
-                    <button
-                      type="button"
-                      onClick={() => void handleDeletePart(attachment.id)}
-                      class="attachment-remove"
-                      disabled={isDeletingPart(attachment.id)}
-                      onMouseEnter={() => {
-                        if (attachment.id) {
-                          setHoveredDeletePartId(attachment.id)
-                          props.onDeleteHoverChange?.({ kind: "part", messageId: props.record.id, partId: attachment.id, partType: "file" })
-                        }
-                      }}
-                      onMouseLeave={() => {
-                        setHoveredDeletePartId(null)
-                        props.onDeleteHoverChange?.({ kind: "none" })
-                      }}
-                      aria-label={t("messagePart.actions.deleteTitle")}
-                      title={t("messagePart.actions.deleteTitle")}
-                    >
-                      <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                      </svg>
-                    </button>
-                    <Show when={isImage}>
-                      <div class="attachment-chip-preview">
-                        <img src={attachment.url} alt={name} />
-                      </div>
-                    </Show>
                   </div>
                 )
               }}
@@ -543,6 +619,31 @@ export default function MessageItem(props: MessageItemProps) {
           </div>
         </Show>
 
+        <Show when={imagePreview()}>
+          {(stateAccessor) => {
+            const state = stateAccessor()
+            const pos = () => getImagePreviewPosition()
+            return (
+              <Portal>
+                <Show when={pos()}>
+                  {(posAccessor) => {
+                    const coords = posAccessor()
+                    return (
+                      <div
+                        class="attachment-image-popover"
+                        style={{ left: `${coords.left}px`, top: `${coords.top}px` }}
+                        aria-hidden="true"
+                      >
+                        <img src={state.url} alt={state.name} />
+                      </div>
+                    )
+                  }}
+                </Show>
+              </Portal>
+            )
+          }}
+        </Show>
+
         <Show when={props.record.status === "sending"}>
           <div class="message-sending">
             <span class="generating-spinner">●</span> {t("messageItem.status.sending")}

packages/ui/src/components/message-preview.tsx

@@ -1,12 +1,18 @@
 import type { Component } from "solid-js"
 import MessageBlock from "./message-block"
 import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
+import type { DeleteHoverState } from "../types/delete-hover"
 
 interface MessagePreviewProps {
   instanceId: string
   sessionId: string
   messageId: string
   store: () => InstanceMessageStore
+  deleteHover?: () => DeleteHoverState
+  onDeleteHoverChange?: (state: DeleteHoverState) => void
+  onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
+  selectedMessageIds?: () => Set<string>
+  onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
 }
 
 const MessagePreview: Component<MessagePreviewProps> = (props) => {
@@ -24,6 +30,11 @@ const MessagePreview: Component<MessagePreviewProps> = (props) => {
         showThinking={() => false}
         thinkingDefaultExpanded={() => false}
         showUsageMetrics={() => false}
+        deleteHover={props.deleteHover}
+        onDeleteHoverChange={props.onDeleteHoverChange}
+        onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+        selectedMessageIds={props.selectedMessageIds}
+        onToggleSelectedMessage={props.onToggleSelectedMessage}
       />
     </div>
   )

packages/ui/src/components/message-section.tsx

@@ -1,4 +1,5 @@
 import { Show, createEffect, createMemo, createSignal, onCleanup, untrack } from "solid-js"
+import { CheckSquare, Trash, X } from "lucide-solid"
 import Kbd from "./kbd"
 import MessageBlockList, { getMessageAnchorId } from "./message-block-list"
 import MessageTimeline, { buildTimelineSegments, type TimelineSegment } from "./message-timeline"
@@ -9,6 +10,8 @@ import { useScrollCache } from "../lib/hooks/use-scroll-cache"
 import { useI18n } from "../lib/i18n"
 import { copyToClipboard } from "../lib/clipboard"
 import { showToastNotification } from "../lib/notifications"
+import { showAlertDialog } from "../stores/alerts"
+import { deleteMessage } from "../stores/session-actions"
 import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
 import type { DeleteHoverState } from "../types/delete-hover"
 
@@ -24,6 +27,7 @@ export interface MessageSectionProps {
   sessionId: string
   loading?: boolean
   onRevert?: (messageId: string) => void
+  onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
   onFork?: (messageId?: string) => void
   registerScrollToBottom?: (fn: () => void) => void
   showSidebarToggle?: boolean
@@ -148,6 +152,61 @@ export default function MessageSection(props: MessageSectionProps) {
   const [activeMessageId, setActiveMessageId] = createSignal<string | null>(null)
 
   const [deleteHover, setDeleteHover] = createSignal<DeleteHoverState>({ kind: "none" })
+
+  const [selectedForDeletion, setSelectedForDeletion] = createSignal<Set<string>>(new Set<string>())
+  const isDeleteMode = createMemo(() => selectedForDeletion().size > 0)
+  const selectedDeleteCount = createMemo(() => selectedForDeletion().size)
+
+  const isMessageSelectedForDeletion = (messageId: string) => selectedForDeletion().has(messageId)
+
+  const setMessageSelectedForDeletion = (messageId: string, selected: boolean) => {
+    if (!messageId) return
+    setSelectedForDeletion((prev) => {
+      const next = new Set(prev)
+      if (selected) {
+        next.add(messageId)
+      } else {
+        next.delete(messageId)
+      }
+      return next
+    })
+  }
+
+  const clearDeleteMode = () => {
+    setSelectedForDeletion(new Set<string>())
+    setDeleteHover({ kind: "none" })
+  }
+
+  const selectAllForDeletion = () => {
+    setSelectedForDeletion(new Set<string>(messageIds()))
+  }
+
+  const deleteSelectedMessages = async () => {
+    const selected = selectedForDeletion()
+    if (selected.size === 0) return
+
+    const idsInSessionOrder = messageIds()
+    const toDelete: string[] = []
+    for (let idx = idsInSessionOrder.length - 1; idx >= 0; idx -= 1) {
+      const id = idsInSessionOrder[idx]
+      if (selected.has(id)) {
+        toDelete.push(id)
+      }
+    }
+
+    try {
+      for (const messageId of toDelete) {
+        await deleteMessage(props.instanceId, props.sessionId, messageId)
+      }
+      clearDeleteMode()
+    } catch (error) {
+      showAlertDialog(t("messageSection.bulkDelete.failedMessage"), {
+        title: t("messageSection.bulkDelete.failedTitle"),
+        detail: error instanceof Error ? error.message : String(error),
+        variant: "error",
+      })
+    }
+  }
  
   const changeToken = createMemo(() => String(sessionRevision()))
   const isActive = createMemo(() => props.isActive !== false)
@@ -170,6 +229,7 @@ export default function MessageSection(props: MessageSectionProps) {
   const [autoScroll, setAutoScroll] = createSignal(true)
   const [showScrollTopButton, setShowScrollTopButton] = createSignal(false)
   const [showScrollBottomButton, setShowScrollBottomButton] = createSignal(false)
+  const scrollButtonsCount = createMemo(() => (showScrollTopButton() ? 1 : 0) + (showScrollBottomButton() ? 1 : 0))
   const [topSentinelVisible, setTopSentinelVisible] = createSignal(true)
   const [bottomSentinelVisible, setBottomSentinelVisible] = createSignal(true)
   const [quoteSelection, setQuoteSelection] = createSignal<{ text: string; top: number; left: number } | null>(null)
@@ -854,7 +914,10 @@ export default function MessageSection(props: MessageSectionProps) {
 
   return (
     <div class="message-stream-container">
-      <div class={`message-layout${hasTimelineSegments() ? " message-layout--with-timeline" : ""}`}>
+      <div
+        class={`message-layout${hasTimelineSegments() ? " message-layout--with-timeline" : ""}`}
+        data-scroll-buttons={scrollButtonsCount()}
+      >
         <div class="message-stream-shell" ref={setShellElement}>
           <div class="message-stream" ref={setContainerRef} onScroll={handleScroll} onMouseUp={handleStreamMouseUp}>
             <div ref={setTopSentinel} aria-hidden="true" style={{ height: "1px" }} />
@@ -900,10 +963,13 @@ export default function MessageSection(props: MessageSectionProps) {
               scrollContainer={scrollElement}
               loading={props.loading}
               onRevert={props.onRevert}
+              onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
               onFork={props.onFork}
               onContentRendered={handleContentRendered}
               deleteHover={deleteHover}
               onDeleteHoverChange={setDeleteHover}
+              selectedMessageIds={selectedForDeletion}
+              onToggleSelectedMessage={setMessageSelectedForDeletion}
               setBottomSentinel={setBottomSentinel}
               suspendMeasurements={() => !isActive()}
             />
@@ -963,9 +1029,55 @@ export default function MessageSection(props: MessageSectionProps) {
               sessionId={props.sessionId}
               showToolSegments={showTimelineToolsPreference()}
               deleteHover={deleteHover}
+              onDeleteHoverChange={setDeleteHover}
+              onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+              selectedMessageIds={selectedForDeletion}
+              onToggleSelectedMessage={setMessageSelectedForDeletion}
             />
           </div>
         </Show>
+
+        <Show when={isDeleteMode()}>
+          <div
+            class="message-delete-mode-toolbar"
+            role="toolbar"
+            aria-label={t("messageSection.bulkDelete.toolbarAriaLabel", { count: selectedDeleteCount() })}
+          >
+            <span class="message-delete-mode-count" aria-hidden="true">
+              {selectedDeleteCount()}
+            </span>
+
+            <button
+              type="button"
+              class="message-delete-mode-button"
+              onClick={() => void deleteSelectedMessages()}
+              title={t("messageSection.bulkDelete.deleteSelectedTitle")}
+              aria-label={t("messageSection.bulkDelete.deleteSelectedTitle")}
+            >
+              <Trash class="w-4 h-4" aria-hidden="true" />
+            </button>
+
+            <button
+              type="button"
+              class="message-delete-mode-button"
+              onClick={selectAllForDeletion}
+              title={t("messageSection.bulkDelete.selectAllTitle")}
+              aria-label={t("messageSection.bulkDelete.selectAllTitle")}
+            >
+              <CheckSquare class="w-4 h-4" aria-hidden="true" />
+            </button>
+
+            <button
+              type="button"
+              class="message-delete-mode-button"
+              onClick={clearDeleteMode}
+              title={t("messageSection.bulkDelete.cancelTitle")}
+              aria-label={t("messageSection.bulkDelete.cancelTitle")}
+            >
+              <X class="w-4 h-4" aria-hidden="true" />
+            </button>
+          </div>
+        </Show>
       </div>
 
     </div>

packages/ui/src/components/message-timeline.tsx

@@ -32,6 +32,10 @@ interface MessageTimelineProps {
   sessionId: string
   showToolSegments?: boolean
   deleteHover?: () => DeleteHoverState
+  onDeleteHoverChange?: (state: DeleteHoverState) => void
+  onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
+  selectedMessageIds?: () => Set<string>
+  onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
 }
 
 const MAX_TOOLTIP_LENGTH = 220
@@ -42,10 +46,6 @@ interface PendingSegment {
   type: TimelineSegmentType
   texts: string[]
   reasoningTexts: string[]
-  toolTitles: string[]
-  toolTypeLabels: string[]
-  toolIcons: string[]
-  toolPartIds: string[]
   partIds: string[]
   hasPrimaryText: boolean
 }
@@ -176,17 +176,12 @@ 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}`,
@@ -195,8 +190,7 @@ export function buildTimelineSegments(
       label,
       tooltip,
       shortLabel,
-      toolPartIds: isToolSegment ? pending.toolPartIds : undefined,
-      partIds: !isToolSegment ? pending.partIds : undefined,
+      partIds: pending.partIds,
     })
     segmentIndex += 1
     pending = null
@@ -209,10 +203,6 @@ export function buildTimelineSegments(
         type,
         texts: [],
         reasoningTexts: [],
-        toolTitles: [],
-        toolTypeLabels: [],
-        toolIcons: [],
-        toolPartIds: [],
         partIds: [],
         hasPrimaryText: type !== "assistant",
       }
@@ -227,14 +217,20 @@ 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,
+      })
+      segmentIndex += 1
       continue
     }
 
@@ -421,6 +417,28 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
           onCleanup(() => buttonRefs.delete(segment.id))
           const isActive = () => props.activeMessageId === segment.messageId
 
+          const isDeleteHovered = () => {
+            const hover = deleteHover() as DeleteHoverState
+            const selected = props.selectedMessageIds?.() ?? new Set<string>()
+            if (selected.has(segment.messageId)) {
+              return true
+            }
+            if (hover.kind === "message") {
+              return hover.messageId === segment.messageId
+            }
+
+            if (hover.kind === "deleteUpTo") {
+              const ids = store().getSessionMessageIds(props.sessionId)
+              const targetIndex = ids.indexOf(hover.messageId)
+              if (targetIndex === -1) return false
+              const segmentIndex = ids.indexOf(segment.messageId)
+              if (segmentIndex === -1) return false
+              return segmentIndex >= targetIndex
+            }
+
+            return false
+          }
+
           const hasActivePermission = () => {
             if (segment.type !== "tool") return false
             const partIds = segment.toolPartIds ?? []
@@ -432,7 +450,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
             return false
           }
 
-          const isHidden = () => segment.type === "tool" && !(showTools() || isActive() || hasActivePermission())
+          const isHidden = () => segment.type === "tool" && !(showTools() || isActive() || hasActivePermission() || isDeleteHovered())
 
            const shortLabelContent = () => {
              if (segment.type === "tool") {
@@ -451,29 +469,13 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
            }
 
           return (
-              <button
+             <button
                 ref={(el) => registerButtonRef(segment.id, el)}
                 type="button"
                 data-variant={segment.variant}
                 class={`message-timeline-segment message-timeline-${segment.type} ${hasActivePermission() ? "message-timeline-segment-permission" : ""} ${segment.type === "compaction" ? `message-timeline-compaction-${segment.variant ?? "manual"}` : ""} ${isActive() ? "message-timeline-segment-active" : ""} ${isHidden() ? "message-timeline-segment-hidden" : ""}`}
 
-                data-delete-hover={(() => {
-                  const hover = deleteHover() as DeleteHoverState
-                  if (hover.kind === "message") {
-                    return hover.messageId === segment.messageId ? "true" : undefined
-                  }
-                  if (hover.kind === "part") {
-                    if (hover.messageId !== segment.messageId) return undefined
-                    if (segment.type === "tool") {
-                      return segment.toolPartIds?.includes(hover.partId) ? "true" : undefined
-                    }
-                    if (segment.type === "compaction") {
-                      return segment.partId === hover.partId ? "true" : undefined
-                    }
-                    return segment.partIds?.includes(hover.partId) ? "true" : undefined
-                  }
-                  return undefined
-                })()}
+                data-delete-hover={isDeleteHovered() ? "true" : undefined}
 
                aria-current={isActive() ? "true" : undefined}
                aria-hidden={isHidden() ? "true" : undefined}
@@ -503,6 +505,10 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
                 instanceId={props.instanceId}
                 sessionId={props.sessionId}
                 store={store}
+                deleteHover={props.deleteHover}
+                onDeleteHoverChange={props.onDeleteHoverChange}
+                onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+                selectedMessageIds={props.selectedMessageIds}
               />
             </div>
           )

packages/ui/src/components/session/session-view.tsx

@@ -10,6 +10,7 @@ import { getAttachments, removeAttachment } from "../../stores/attachments"
 import { instances } from "../../stores/instances"
 import { loadMessages, sendMessage, forkSession, renameSession, isSessionMessagesLoading, setActiveParentSession, setActiveSession, runShellCommand, abortSession } from "../../stores/sessions"
 import { isSessionBusy as getSessionBusyStatus } from "../../stores/session-status"
+import { deleteMessage } from "../../stores/session-actions"
 import { showAlertDialog } from "../../stores/alerts"
 import { getLogger } from "../../lib/logger"
 import { requestData } from "../../lib/opencode-api"
@@ -225,6 +226,35 @@ export const SessionView: Component<SessionViewProps> = (props) => {
     }
   }
 
+  async function handleDeleteMessagesUpTo(messageId: string) {
+    const ids = messageStore().getSessionMessageIds(props.sessionId)
+    const index = ids.indexOf(messageId)
+    if (index === -1) return
+
+    const restoredText = getUserMessageText(messageId)
+    const toDelete = ids.slice(index)
+
+    try {
+      for (let idx = toDelete.length - 1; idx >= 0; idx -= 1) {
+        await deleteMessage(props.instanceId, props.sessionId, toDelete[idx])
+      }
+    } catch (error) {
+      log.error("Failed to delete messages up to", error)
+      showAlertDialog(t("sessionView.alerts.deleteUpToFailed.message"), {
+        title: t("sessionView.alerts.deleteUpToFailed.title"),
+        variant: "error",
+      })
+    } finally {
+      if (restoredText) {
+        if (promptInputApi) {
+          promptInputApi.setPromptText(restoredText, { focus: true })
+        } else {
+          pendingPromptText = restoredText
+        }
+      }
+    }
+  }
+
   async function handleFork(messageId?: string) {
     if (!messageId) {
       log.warn("Fork requires a user message id")
@@ -283,10 +313,11 @@ export const SessionView: Component<SessionViewProps> = (props) => {
             <MessageSection
                instanceId={props.instanceId}
                sessionId={activeSession.id}
-               loading={messagesLoading()}
-               onRevert={handleRevert}
-               onFork={handleFork}
-               isActive={props.isActive}
+                loading={messagesLoading()}
+                onRevert={handleRevert}
+                onDeleteMessagesUpTo={handleDeleteMessagesUpTo}
+                onFork={handleFork}
+                isActive={props.isActive}
                 registerScrollToBottom={(fn) => {
                   scrollToBottomHandle = fn
                   if (props.isActive) {

packages/ui/src/components/tool-call/renderers/task.tsx

@@ -178,28 +178,116 @@ export const taskRenderer: ToolRenderer = {
       void loadMessages(instanceId, id)
     })
 
-    const childToolKeys = createMemo(() => {
-      const id = childSessionId()
-      if (!id) return [] as string[]
-      if (!childSessionLoaded()) return [] as string[]
+    const [childToolKeys, setChildToolKeys] = createSignal<string[]>([])
 
-      // React to session changes, but do the scan untracked to avoid
-      // subscribing to every message/part node in the store.
+    let indexedSessionId = ""
+    let indexedMessageCount = 0
+    let indexedMessageTail = ""
+    const indexedPartCounts = new Map<string, number>()
+
+    function resetChildToolIndex(nextSessionId: string) {
+      indexedSessionId = nextSessionId
+      indexedMessageCount = 0
+      indexedMessageTail = ""
+      indexedPartCounts.clear()
+      setChildToolKeys([])
+    }
+
+    function scanMessageToolParts(messageId: string, startIndex: number) {
+      const record = store.getMessage(messageId)
+      if (!record) return [] as string[]
+
+      const partIds = record.partIds
+      const keys: string[] = []
+      for (let idx = startIndex; idx < partIds.length; idx += 1) {
+        const partId = partIds[idx]
+        const entry = record.parts?.[partId]
+        const data = entry?.data
+        if (!data || (data as any).type !== "tool") continue
+        keys.push(`${messageId}::${partId}`)
+      }
+      indexedPartCounts.set(messageId, partIds.length)
+      return keys
+    }
+
+    function fullRescanChildTools(sessionId: string, messageIds: string[]) {
+      indexedSessionId = sessionId
+      indexedMessageCount = messageIds.length
+      indexedMessageTail = messageIds[messageIds.length - 1] ?? ""
+      indexedPartCounts.clear()
+
+      const nextKeys: string[] = []
+      for (const messageId of messageIds) {
+        nextKeys.push(...scanMessageToolParts(messageId, 0))
+      }
+      setChildToolKeys(nextKeys)
+    }
+
+    createEffect(() => {
+      const id = childSessionId()
+      const loaded = childSessionLoaded()
+
+      if (!id || !loaded) {
+        if (indexedSessionId) {
+          resetChildToolIndex("")
+        }
+        return
+      }
+
+      // We use the session revision as the reactive change point, but avoid
+      // rescanning the entire session on every update.
       store.getSessionRevision(id)
-      return untrack(() => {
+
+      untrack(() => {
         const messageIds = store.getSessionMessageIds(id)
-        const keys: string[] = []
-        for (const messageId of messageIds) {
-          const record = store.getMessage(messageId)
-          if (!record) continue
-          for (const partId of record.partIds) {
-            const entry = record.parts?.[partId]
-            const data = entry?.data
-            if (!data || (data as any).type !== "tool") continue
-            keys.push(`${messageId}::${partId}`)
+
+        if (!indexedSessionId || indexedSessionId !== id) {
+          fullRescanChildTools(id, messageIds)
+          return
+        }
+
+        // Detect structural changes (reorder/shrink) and fall back to a full rescan.
+        if (messageIds.length < indexedMessageCount) {
+          fullRescanChildTools(id, messageIds)
+          return
+        }
+        if (indexedMessageCount > 0) {
+          const expectedTailIndex = indexedMessageCount - 1
+          if (expectedTailIndex >= 0 && messageIds[expectedTailIndex] !== indexedMessageTail) {
+            fullRescanChildTools(id, messageIds)
+            return
           }
         }
-        return keys
+
+        const appendedKeys: string[] = []
+
+        // Scan any new messages appended since last index.
+        for (let idx = indexedMessageCount; idx < messageIds.length; idx += 1) {
+          const messageId = messageIds[idx]
+          appendedKeys.push(...scanMessageToolParts(messageId, 0))
+        }
+
+        // Scan a small window of recent messages for newly appended parts.
+        // Deltas typically affect the most recent tool call, so this avoids
+        // iterating every message on every revision.
+        const existingCount = Math.min(indexedMessageCount, messageIds.length)
+        const windowStart = Math.max(0, existingCount - 3)
+        for (let idx = windowStart; idx < existingCount; idx += 1) {
+          const messageId = messageIds[idx]
+          const previousPartCount = indexedPartCounts.get(messageId) ?? 0
+          const record = store.getMessage(messageId)
+          const nextPartCount = record?.partIds.length ?? 0
+          if (nextPartCount > previousPartCount) {
+            appendedKeys.push(...scanMessageToolParts(messageId, previousPartCount))
+          }
+        }
+
+        indexedMessageCount = messageIds.length
+        indexedMessageTail = messageIds[messageIds.length - 1] ?? ""
+
+        if (appendedKeys.length > 0) {
+          setChildToolKeys((prev) => [...prev, ...appendedKeys])
+        }
       })
     })
     const promptContent = createMemo(() => {
@@ -354,7 +442,7 @@ export const taskRenderer: ToolRenderer = {
                     scrollHelpers ? (event) => scrollHelpers.handleScroll(event as Event & { currentTarget: HTMLDivElement }) : undefined
                   }
                 >
-                  <div class="tool-call-task-summary">
+                    <div class="tool-call-task-summary">
                     <For each={childToolKeys()}>
                       {(key) => (
                         <Show when={renderToolCall}>

packages/ui/src/lib/i18n/messages/en/messaging.ts

@@ -71,16 +71,26 @@ export const messagingMessages = {
   "messageItem.speaker.you": "You",
   "messageItem.speaker.assistant": "Assistant",
   "messageItem.actions.revert": "Revert",
-  "messageItem.actions.revertTitle": "Undo changes up to here",
+  "messageItem.actions.revertTitle": "Undo changes up to here (deletes messages)",
   "messageItem.actions.fork": "Fork",
   "messageItem.actions.forkTitle": "Fork from this message",
   "messageItem.actions.copy": "Copy",
   "messageItem.actions.copyTitle": "Copy message",
   "messageItem.actions.copied": "Copied!",
-  "messageItem.actions.deleteMessage": "Delete message",
+  "messageItem.actions.deleteMessage": "Delete message (doesn't undo changes)",
+  "messageItem.actions.deleteMessagesUpTo": "Delete messages up to here (doesn't undo changes)",
   "messageItem.actions.deletingMessage": "Deleting...",
   "messageItem.actions.deleteMessageFailedTitle": "Delete failed",
   "messageItem.actions.deleteMessageFailedMessage": "Failed to delete message",
+
+  "messageItem.selection.checkboxAriaLabel": "Select message for deletion",
+
+  "messageSection.bulkDelete.toolbarAriaLabel": "Selected messages ({count})",
+  "messageSection.bulkDelete.deleteSelectedTitle": "Delete selected messages",
+  "messageSection.bulkDelete.selectAllTitle": "Select all messages",
+  "messageSection.bulkDelete.cancelTitle": "Cancel selection",
+  "messageSection.bulkDelete.failedTitle": "Delete failed",
+  "messageSection.bulkDelete.failedMessage": "Failed to delete selected messages",
   "messageItem.status.queued": "QUEUED",
   "messageItem.status.generating": "Generating...",
   "messageItem.status.sending": "Sending...",

packages/ui/src/lib/i18n/messages/en/session.ts

@@ -67,6 +67,8 @@ export const sessionMessages = {
   "sessionView.alerts.abortFailed.title": "Stop failed",
   "sessionView.alerts.revertFailed.message": "Failed to revert to message",
   "sessionView.alerts.revertFailed.title": "Revert failed",
+  "sessionView.alerts.deleteUpToFailed.message": "Failed to delete messages",
+  "sessionView.alerts.deleteUpToFailed.title": "Delete failed",
   "sessionView.alerts.forkFailed.message": "Failed to fork session",
   "sessionView.alerts.forkFailed.title": "Fork failed",
   "sessionView.attachments.expandPastedTextAriaLabel": "Expand pasted text",

packages/ui/src/lib/i18n/messages/es/messaging.ts

@@ -71,16 +71,26 @@ export const messagingMessages = {
   "messageItem.speaker.you": "Tú",
   "messageItem.speaker.assistant": "Asistente",
   "messageItem.actions.revert": "Revertir",
-  "messageItem.actions.revertTitle": "Deshacer cambios hasta aqui",
+  "messageItem.actions.revertTitle": "Deshacer cambios hasta aqui (elimina mensajes)",
   "messageItem.actions.fork": "Fork",
   "messageItem.actions.forkTitle": "Fork desde este mensaje",
   "messageItem.actions.copy": "Copiar",
   "messageItem.actions.copyTitle": "Copiar mensaje",
   "messageItem.actions.copied": "¡Copiado!",
-  "messageItem.actions.deleteMessage": "Eliminar mensaje",
+  "messageItem.actions.deleteMessage": "Eliminar mensaje (no deshace cambios)",
+  "messageItem.actions.deleteMessagesUpTo": "Eliminar mensajes hasta aqui (no deshace cambios)",
   "messageItem.actions.deletingMessage": "Eliminando...",
   "messageItem.actions.deleteMessageFailedTitle": "Error al eliminar",
   "messageItem.actions.deleteMessageFailedMessage": "No se pudo eliminar el mensaje",
+
+  "messageItem.selection.checkboxAriaLabel": "Seleccionar mensaje para eliminar",
+
+  "messageSection.bulkDelete.toolbarAriaLabel": "Mensajes seleccionados ({count})",
+  "messageSection.bulkDelete.deleteSelectedTitle": "Eliminar mensajes seleccionados",
+  "messageSection.bulkDelete.selectAllTitle": "Seleccionar todos los mensajes",
+  "messageSection.bulkDelete.cancelTitle": "Cancelar selección",
+  "messageSection.bulkDelete.failedTitle": "Error al eliminar",
+  "messageSection.bulkDelete.failedMessage": "No se pudieron eliminar los mensajes seleccionados",
   "messageItem.status.queued": "EN COLA",
   "messageItem.status.generating": "Generando...",
   "messageItem.status.sending": "Enviando...",

packages/ui/src/lib/i18n/messages/es/session.ts

@@ -67,6 +67,8 @@ export const sessionMessages = {
   "sessionView.alerts.abortFailed.title": "No se pudo detener",
   "sessionView.alerts.revertFailed.message": "No se pudo revertir al mensaje",
   "sessionView.alerts.revertFailed.title": "No se pudo revertir",
+  "sessionView.alerts.deleteUpToFailed.message": "No se pudieron eliminar los mensajes",
+  "sessionView.alerts.deleteUpToFailed.title": "Error al eliminar",
   "sessionView.alerts.forkFailed.message": "No se pudo hacer fork de la sesión",
   "sessionView.alerts.forkFailed.title": "No se pudo hacer fork",
   "sessionView.attachments.expandPastedTextAriaLabel": "Expandir texto pegado",

packages/ui/src/lib/i18n/messages/fr/messaging.ts

@@ -71,16 +71,26 @@ export const messagingMessages = {
   "messageItem.speaker.you": "Vous",
   "messageItem.speaker.assistant": "Assistant",
   "messageItem.actions.revert": "Revenir",
-  "messageItem.actions.revertTitle": "Annuler les changements jusqu'ici",
+  "messageItem.actions.revertTitle": "Annuler les changements jusqu'ici (supprime les messages)",
   "messageItem.actions.fork": "Fork",
   "messageItem.actions.forkTitle": "Fork depuis ce message",
   "messageItem.actions.copy": "Copier",
   "messageItem.actions.copyTitle": "Copier le message",
   "messageItem.actions.copied": "Copié !",
-  "messageItem.actions.deleteMessage": "Supprimer le message",
+  "messageItem.actions.deleteMessage": "Supprimer le message (sans annuler les changements)",
+  "messageItem.actions.deleteMessagesUpTo": "Supprimer les messages jusqu'ici (sans annuler les changements)",
   "messageItem.actions.deletingMessage": "Suppression...",
   "messageItem.actions.deleteMessageFailedTitle": "Échec de suppression",
   "messageItem.actions.deleteMessageFailedMessage": "Impossible de supprimer le message",
+
+  "messageItem.selection.checkboxAriaLabel": "Sélectionner le message pour suppression",
+
+  "messageSection.bulkDelete.toolbarAriaLabel": "Messages sélectionnés ({count})",
+  "messageSection.bulkDelete.deleteSelectedTitle": "Supprimer les messages sélectionnés",
+  "messageSection.bulkDelete.selectAllTitle": "Tout sélectionner",
+  "messageSection.bulkDelete.cancelTitle": "Annuler la sélection",
+  "messageSection.bulkDelete.failedTitle": "Échec de suppression",
+  "messageSection.bulkDelete.failedMessage": "Impossible de supprimer les messages sélectionnés",
   "messageItem.status.queued": "EN FILE",
   "messageItem.status.generating": "Génération...",
   "messageItem.status.sending": "Envoi...",

packages/ui/src/lib/i18n/messages/fr/session.ts

@@ -67,6 +67,8 @@ export const sessionMessages = {
   "sessionView.alerts.abortFailed.title": "Échec de l'arrêt",
   "sessionView.alerts.revertFailed.message": "Impossible de revenir au message",
   "sessionView.alerts.revertFailed.title": "Échec du retour",
+  "sessionView.alerts.deleteUpToFailed.message": "Impossible de supprimer les messages",
+  "sessionView.alerts.deleteUpToFailed.title": "Échec de suppression",
   "sessionView.alerts.forkFailed.message": "Impossible de forker la session",
   "sessionView.alerts.forkFailed.title": "Échec du fork",
   "sessionView.attachments.expandPastedTextAriaLabel": "Développer le texte collé",

packages/ui/src/lib/i18n/messages/ja/messaging.ts

@@ -71,16 +71,26 @@ export const messagingMessages = {
   "messageItem.speaker.you": "あなた",
   "messageItem.speaker.assistant": "アシスタント",
   "messageItem.actions.revert": "戻す",
-  "messageItem.actions.revertTitle": "ここまでの変更を元に戻す",
+  "messageItem.actions.revertTitle": "ここまでの変更を元に戻す（メッセージを削除）",
   "messageItem.actions.fork": "フォーク",
   "messageItem.actions.forkTitle": "このメッセージからフォーク",
   "messageItem.actions.copy": "コピー",
   "messageItem.actions.copyTitle": "メッセージをコピー",
   "messageItem.actions.copied": "コピーしました!",
-  "messageItem.actions.deleteMessage": "メッセージを削除",
+  "messageItem.actions.deleteMessage": "メッセージを削除（変更は元に戻さない）",
+  "messageItem.actions.deleteMessagesUpTo": "ここまでのメッセージを削除（変更は元に戻さない）",
   "messageItem.actions.deletingMessage": "削除中...",
   "messageItem.actions.deleteMessageFailedTitle": "削除に失敗しました",
   "messageItem.actions.deleteMessageFailedMessage": "メッセージの削除に失敗しました",
+
+  "messageItem.selection.checkboxAriaLabel": "削除するメッセージを選択",
+
+  "messageSection.bulkDelete.toolbarAriaLabel": "選択したメッセージ（{count}）",
+  "messageSection.bulkDelete.deleteSelectedTitle": "選択したメッセージを削除",
+  "messageSection.bulkDelete.selectAllTitle": "すべて選択",
+  "messageSection.bulkDelete.cancelTitle": "選択をキャンセル",
+  "messageSection.bulkDelete.failedTitle": "削除に失敗しました",
+  "messageSection.bulkDelete.failedMessage": "選択したメッセージの削除に失敗しました",
   "messageItem.status.queued": "待機中",
   "messageItem.status.generating": "生成中...",
   "messageItem.status.sending": "送信中...",

packages/ui/src/lib/i18n/messages/ja/session.ts

@@ -67,6 +67,8 @@ export const sessionMessages = {
   "sessionView.alerts.abortFailed.title": "停止に失敗",
   "sessionView.alerts.revertFailed.message": "メッセージへ戻せませんでした",
   "sessionView.alerts.revertFailed.title": "復元に失敗",
+  "sessionView.alerts.deleteUpToFailed.message": "メッセージの削除に失敗しました",
+  "sessionView.alerts.deleteUpToFailed.title": "削除に失敗しました",
   "sessionView.alerts.forkFailed.message": "セッションのフォークに失敗しました",
   "sessionView.alerts.forkFailed.title": "フォークに失敗",
   "sessionView.attachments.expandPastedTextAriaLabel": "貼り付けたテキストを展開",

packages/ui/src/lib/i18n/messages/ru/messaging.ts

@@ -71,16 +71,26 @@ export const messagingMessages = {
   "messageItem.speaker.you": "Вы",
   "messageItem.speaker.assistant": "Ассистент",
   "messageItem.actions.revert": "Откатить",
-  "messageItem.actions.revertTitle": "Отменить изменения до этого места",
+  "messageItem.actions.revertTitle": "Отменить изменения до этого места (удалит сообщения)",
   "messageItem.actions.fork": "Форк",
   "messageItem.actions.forkTitle": "Форкнуть от этого сообщения",
   "messageItem.actions.copy": "Копировать",
   "messageItem.actions.copyTitle": "Копировать сообщение",
   "messageItem.actions.copied": "Скопировано!",
-  "messageItem.actions.deleteMessage": "Удалить сообщение",
+  "messageItem.actions.deleteMessage": "Удалить сообщение (без отката изменений)",
+  "messageItem.actions.deleteMessagesUpTo": "Удалить сообщения до этого места (без отката изменений)",
   "messageItem.actions.deletingMessage": "Удаление...",
   "messageItem.actions.deleteMessageFailedTitle": "Ошибка удаления",
   "messageItem.actions.deleteMessageFailedMessage": "Не удалось удалить сообщение",
+
+  "messageItem.selection.checkboxAriaLabel": "Выбрать сообщение для удаления",
+
+  "messageSection.bulkDelete.toolbarAriaLabel": "Выбранные сообщения ({count})",
+  "messageSection.bulkDelete.deleteSelectedTitle": "Удалить выбранные сообщения",
+  "messageSection.bulkDelete.selectAllTitle": "Выбрать все сообщения",
+  "messageSection.bulkDelete.cancelTitle": "Отменить выбор",
+  "messageSection.bulkDelete.failedTitle": "Ошибка удаления",
+  "messageSection.bulkDelete.failedMessage": "Не удалось удалить выбранные сообщения",
   "messageItem.status.queued": "В ОЧЕРЕДИ",
   "messageItem.status.generating": "Генерация…",
   "messageItem.status.sending": "Отправка…",

packages/ui/src/lib/i18n/messages/ru/session.ts

@@ -67,6 +67,8 @@ export const sessionMessages = {
   "sessionView.alerts.abortFailed.title": "Не удалось остановить",
   "sessionView.alerts.revertFailed.message": "Не удалось откатиться к сообщению",
   "sessionView.alerts.revertFailed.title": "Не удалось откатиться",
+  "sessionView.alerts.deleteUpToFailed.message": "Не удалось удалить сообщения",
+  "sessionView.alerts.deleteUpToFailed.title": "Ошибка удаления",
   "sessionView.alerts.forkFailed.message": "Не удалось форкнуть сессию",
   "sessionView.alerts.forkFailed.title": "Не удалось форкнуть",
   "sessionView.attachments.expandPastedTextAriaLabel": "Развернуть вставленный текст",

packages/ui/src/lib/i18n/messages/zh-Hans/messaging.ts

@@ -71,16 +71,26 @@ export const messagingMessages = {
   "messageItem.speaker.you": "你",
   "messageItem.speaker.assistant": "助手",
   "messageItem.actions.revert": "回退",
-  "messageItem.actions.revertTitle": "撤销到此处的更改",
+  "messageItem.actions.revertTitle": "撤销到此处的更改（会删除消息）",
   "messageItem.actions.fork": "分叉",
   "messageItem.actions.forkTitle": "从这条消息分叉",
   "messageItem.actions.copy": "复制",
   "messageItem.actions.copyTitle": "复制消息",
   "messageItem.actions.copied": "已复制！",
-  "messageItem.actions.deleteMessage": "删除消息",
+  "messageItem.actions.deleteMessage": "删除消息（不会撤销更改）",
+  "messageItem.actions.deleteMessagesUpTo": "删除到此处的消息（不会撤销更改）",
   "messageItem.actions.deletingMessage": "正在删除...",
   "messageItem.actions.deleteMessageFailedTitle": "删除失败",
   "messageItem.actions.deleteMessageFailedMessage": "无法删除消息",
+
+  "messageItem.selection.checkboxAriaLabel": "选择要删除的消息",
+
+  "messageSection.bulkDelete.toolbarAriaLabel": "已选择的消息（{count}）",
+  "messageSection.bulkDelete.deleteSelectedTitle": "删除已选择的消息",
+  "messageSection.bulkDelete.selectAllTitle": "全选消息",
+  "messageSection.bulkDelete.cancelTitle": "取消选择",
+  "messageSection.bulkDelete.failedTitle": "删除失败",
+  "messageSection.bulkDelete.failedMessage": "无法删除已选择的消息",
   "messageItem.status.queued": "排队中",
   "messageItem.status.generating": "正在生成...",
   "messageItem.status.sending": "正在发送...",

packages/ui/src/lib/i18n/messages/zh-Hans/session.ts

@@ -67,6 +67,8 @@ export const sessionMessages = {
   "sessionView.alerts.abortFailed.title": "停止失败",
   "sessionView.alerts.revertFailed.message": "回退到消息失败",
   "sessionView.alerts.revertFailed.title": "回退失败",
+  "sessionView.alerts.deleteUpToFailed.message": "无法删除消息",
+  "sessionView.alerts.deleteUpToFailed.title": "删除失败",
   "sessionView.alerts.forkFailed.message": "分叉会话失败",
   "sessionView.alerts.forkFailed.title": "分叉失败",
   "sessionView.attachments.expandPastedTextAriaLabel": "展开粘贴的文本",

packages/ui/src/stores/message-v2/bridge.ts

@@ -117,6 +117,7 @@ export function applyPartDeltaV2(
     partId: input.partId,
     field: input.field,
     delta: input.delta,
+    bumpSessionRevision: false,
   })
 }
 

packages/ui/src/stores/message-v2/instance-store.ts

@@ -189,7 +189,14 @@ export interface InstanceMessageStore {
   hydrateMessages: (sessionId: string, inputs: MessageUpsertInput[], infos?: Iterable<MessageInfo>) => void
   upsertMessage: (input: MessageUpsertInput) => void
   applyPartUpdate: (input: PartUpdateInput) => void
-  applyPartDelta: (input: { messageId: string; partId: string; field: string; delta: string; bumpRevision?: boolean }) => void
+  applyPartDelta: (input: {
+    messageId: string
+    partId: string
+    field: string
+    delta: string
+    bumpRevision?: boolean
+    bumpSessionRevision: boolean
+  }) => void
   removeMessage: (messageId: string) => void
   removeMessagePart: (messageId: string, partId: string) => void
   bufferPendingPart: (entry: PendingPartEntry) => void
@@ -598,7 +605,14 @@ export function createInstanceMessageStore(instanceId: string, hooks?: MessageSt
     bumpSessionRevision(message.sessionId)
   }
 
-  function applyPartDelta(input: { messageId: string; partId: string; field: string; delta: string; bumpRevision?: boolean }) {
+  function applyPartDelta(input: {
+    messageId: string
+    partId: string
+    field: string
+    delta: string
+    bumpRevision?: boolean
+    bumpSessionRevision?: boolean
+  }) {
     if (!input?.messageId || !input.partId || !input.field || typeof input.delta !== "string") {
       return
     }
@@ -632,7 +646,7 @@ export function createInstanceMessageStore(instanceId: string, hooks?: MessageSt
       }),
     )
 
-    if (applied) {
+    if (applied && (input.bumpSessionRevision ?? true)) {
       bumpSessionRevision(message.sessionId)
     }
   }
@@ -1165,4 +1179,3 @@ export function createInstanceMessageStore(instanceId: string, hooks?: MessageSt
       clearInstance,
     }
   }
-

packages/ui/src/styles/messaging.css

@@ -2,6 +2,7 @@
 @import "./messaging/prompt-input.css";
 @import "./messaging/message-section.css";
 @import "./messaging/message-block-list.css";
+@import "./messaging/message-selection.css";
 @import "./messaging/delete-overlays.css";
 @import "./messaging/message-timeline.css";
 @import "./messaging/tool-call.css";

packages/ui/src/styles/messaging/delete-overlays.css

@@ -9,7 +9,6 @@
   position: absolute;
   inset: -2px;
   background: var(--status-error-bg);
-  box-shadow: inset 0 0 0 1px var(--status-error-fg);
   border-radius: 0;
   pointer-events: none;
   /* Overlay must sit above the message cards (they have opaque backgrounds). */
@@ -29,7 +28,6 @@
   position: absolute;
   inset: -2px;
   background: var(--status-error-bg);
-  box-shadow: inset 0 0 0 1px var(--status-error-fg);
   border-radius: 0;
   pointer-events: none;
   /* Overlay must sit above the part card background. */

packages/ui/src/styles/messaging/message-base.css

@@ -8,7 +8,8 @@
 }
 
 .message-item-header {
-  @apply flex flex-col gap-0.5;
+  @apply flex flex-col;
+  gap: 0.25rem;
 }
 
 .message-item-header-row {
@@ -19,12 +20,58 @@
   @apply flex justify-between items-start gap-2.5;
 }
 
+.message-item-header-row--meta {
+  @apply w-full;
+}
+
+.message-header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
 .message-item-header-row--bottom {
   @apply flex items-start;
 }
 
 .message-speaker {
-  @apply flex flex-col gap-0.5 text-xs;
+  /* Allow agent meta to wrap to a second row with comfortable spacing. */
+  @apply flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.message-speaker-primary {
+  @apply inline-flex items-center;
+  white-space: nowrap;
+  flex: 0 0 auto;
+}
+
+.message-agent-meta-inline {
+  @apply text-[11px] font-medium;
+  color: var(--message-assistant-border);
+  white-space: nowrap;
+  flex: 0 0 auto;
+  line-height: 1.1;
+}
+
+.message-agent-meta-inline--measure {
+  position: fixed;
+  left: -9999px;
+  top: -9999px;
+  visibility: hidden;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.message-agent-meta-block {
+  @apply text-[11px] font-medium;
+  color: var(--message-assistant-border);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  line-height: 1.15;
 }
 
 .message-speaker-label {
@@ -46,19 +93,19 @@
 
 .message-item-actions {
   @apply flex items-center gap-2;
+  flex: 0 0 auto;
 }
 
 .message-action-group {
-  @apply flex items-center gap-2;
+  @apply flex items-center gap-0;
 }
 
 .message-action-button {
-  @apply bg-transparent border border-[var(--border-base)] text-[var(--text-muted)] cursor-pointer px-3 py-0.5 rounded text-xs font-semibold leading-none transition-all duration-200 flex items-center justify-center h-6;
+  @apply bg-transparent border-0 text-[var(--text-muted)] cursor-pointer px-2 py-0.5 rounded text-xs font-semibold leading-none transition-all duration-200 flex items-center justify-center h-6;
 }
 
 .message-action-button:hover {
   background-color: var(--surface-hover);
-  border-color: var(--accent-primary);
   color: var(--accent-primary);
 }
 
@@ -156,6 +203,27 @@
   border-top: 1px solid var(--border-base);
 }
 
+/* Image attachment preview popover.
+   Rendered via a Portal to avoid being clipped by the message stream scroller. */
+.attachment-image-popover {
+  position: fixed;
+  padding: 8px;
+  background-color: var(--surface-base);
+  border: 1px solid var(--border-base);
+  border-radius: 10px;
+  box-shadow: var(--popover-shadow);
+  z-index: 1000;
+  pointer-events: none;
+}
+
+.attachment-image-popover img {
+  display: block;
+  max-width: 320px;
+  max-height: 320px;
+  border-radius: 8px;
+  object-fit: contain;
+}
+
 .message-error {
   @apply text-xs mt-1;
   color: var(--status-error);
@@ -296,6 +364,12 @@
   color: var(--message-assistant-border);
 }
 
+/* Keep reasoning meta as a single unit so it drops to the next line when needed. */
+.message-reasoning-label .message-step-meta-inline {
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
 
 .message-step-reason {
   @apply text-[11px] font-medium;
@@ -320,7 +394,7 @@
 
 .message-reasoning-header {
   display: flex;
-  align-items: stretch;
+  align-items: flex-start;
   justify-content: space-between;
   gap: 0.5rem;
   transition: background-color 0.2s ease, box-shadow 0.2s ease;
@@ -365,11 +439,36 @@
 }
 
 .message-reasoning-label {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0.5rem;
   font-size: 0.75rem;
   font-weight: var(--font-weight-medium);
   color: var(--message-assistant-border);
 }
 
+.message-reasoning-label-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  white-space: nowrap;
+  flex: 0 0 auto;
+}
+
+.message-step-meta-inline--measure {
+  position: fixed;
+  left: -9999px;
+  top: -9999px;
+  visibility: hidden;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.message-reasoning-meta-row {
+  padding: 0 0.6rem 0.15rem 0.6rem;
+}
+
 .message-reasoning-meta {
   display: inline-flex;
   align-items: center;

packages/ui/src/styles/messaging/message-selection.css

@@ -0,0 +1,84 @@
+/* Message multi-select delete mode UI. */
+
+.message-select-checkbox {
+  width: 14px;
+  height: 14px;
+  margin-right: 0.5rem;
+  cursor: pointer;
+  accent-color: var(--status-error);
+  flex: 0 0 auto;
+}
+
+.message-delete-mode-toolbar {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px;
+  background: color-mix(in oklab, var(--surface-secondary) 92%, var(--status-error-bg));
+  border: 1px solid var(--border-base);
+  border-radius: 12px;
+  z-index: 50;
+  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
+}
+
+/* Avoid covering the scroll-to-top/bottom floating buttons. */
+.message-layout[data-scroll-buttons="1"] .message-delete-mode-toolbar {
+  bottom: 4.25rem;
+}
+
+.message-layout[data-scroll-buttons="2"] .message-delete-mode-toolbar {
+  bottom: 7.5rem;
+}
+
+/* When timeline is visible, pin the toolbar to the stream edge. */
+.message-layout--with-timeline .message-delete-mode-toolbar {
+  right: calc(64px + 12px);
+}
+
+@media (max-width: 720px) {
+  .message-layout--with-timeline .message-delete-mode-toolbar {
+    right: calc(40px + 12px);
+  }
+}
+
+.message-delete-mode-count {
+  min-width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-primary);
+  background: var(--surface-secondary);
+  border: 1px solid var(--border-base);
+}
+
+.message-delete-mode-button {
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid var(--border-base);
+  border-radius: 10px;
+  color: var(--text-muted);
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+
+.message-delete-mode-button:hover {
+  background-color: var(--surface-hover);
+  border-color: var(--status-error);
+  color: var(--status-error);
+}
+
+.message-delete-mode-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent-primary) 45%, transparent);
+}

packages/ui/src/styles/messaging/message-timeline.css

@@ -104,7 +104,6 @@
   position: absolute;
   inset: 0;
   background: var(--status-error-bg);
-  box-shadow: inset 0 0 0 1px var(--status-error-fg);
   border-radius: 0;
   pointer-events: none;
   z-index: 2;

packages/ui/src/styles/messaging/tool-call.css

@@ -21,9 +21,9 @@
 
 .tool-call-header-button {
   background-color: transparent;
-  border: 1px solid var(--tool-call-border-color, var(--border-base));
   color: var(--text-secondary);
-  padding: 0.15rem 0.75rem;
+  border: 0;
+  padding: 0.1rem 0.35rem;
   border-radius: 0.375rem;
   font-size: 0.75rem;
   font-weight: var(--font-weight-semibold);
@@ -37,7 +37,6 @@
 
 .tool-call-header-button:hover:not(:disabled) {
   background-color: var(--surface-hover);
-  border-color: var(--accent-primary);
   color: var(--accent-primary);
 }
 

packages/ui/src/types/delete-hover.ts

@@ -1,4 +1,4 @@
 export type DeleteHoverState =
   | { kind: "none" }
   | { kind: "message"; messageId: string }
-  | { kind: "part"; messageId: string; partId: string; partType?: string }
+  | { kind: "deleteUpTo"; messageId: string }