feat(ui): mirror delete hover overlay in timeline

Make dev:info/dev:debug/dev:trace work on Windows by setting CLI_LOG_LEVEL via cross-env.

.github/workflows/build-and-upload.yml

@@ -61,7 +61,21 @@ jobs:
 
       - name: Set workspace versions
         if: ${{ inputs.set_versions && inputs.version != '' }}
-        run: npm version ${VERSION} --workspaces --include-workspace-root --no-git-tag-version --allow-same-version
+        shell: bash
+        env:
+          NPM_CONFIG_FETCH_RETRIES: 5
+          NPM_CONFIG_FETCH_RETRY_MINTIMEOUT: 20000
+          NPM_CONFIG_FETCH_RETRY_MAXTIMEOUT: 120000
+        run: |
+          set -euo pipefail
+          for attempt in 1 2 3; do
+            if npm version "${VERSION}" --workspaces --include-workspace-root --no-git-tag-version --allow-same-version; then
+              exit 0
+            fi
+            echo "npm version failed (attempt $attempt/3); retrying..." >&2
+            sleep $((attempt * 10))
+          done
+          exit 1
 
       - name: Install dependencies
         run: npm ci --workspaces --include=optional
@@ -72,6 +86,37 @@ jobs:
       - name: Build macOS binaries (Electron)
         run: npm run build:mac --workspace @neuralnomads/codenomad-electron-app
 
+      - name: Ad-hoc sign Electron macOS app bundles (seal resources)
+        shell: bash
+        run: |
+          set -euo pipefail
+
+          release_root="packages/electron-app/release"
+          apps=()
+          while IFS= read -r -d '' app; do
+            apps+=("$app")
+          done < <(find "$release_root" -type d -name 'CodeNomad.app' -print0)
+
+          if [ "${#apps[@]}" -eq 0 ]; then
+            echo "No CodeNomad.app found under $release_root" >&2
+            exit 1
+          fi
+
+          # GitHub macOS runners typically have no signing identity. Without any signature,
+          # the shipped .app can fail Gatekeeper with:
+          #   code has no resources but signature indicates they must be present
+          # Ad-hoc signing seals bundle resources and makes the signature internally consistent.
+          if security find-identity -p codesigning -v | grep -q "0 valid identities found"; then
+            echo "No valid macOS codesigning identity found; applying ad-hoc signature"
+            for app in "${apps[@]}"; do
+              echo "codesign (adhoc): $app"
+              codesign --force --deep --sign - "$app"
+              codesign --verify --deep --strict --verbose=2 "$app"
+            done
+          else
+            echo "macOS codesigning identity present; skipping ad-hoc signing"
+          fi
+
       - name: Repackage Electron macOS zips (ditto)
         shell: bash
         run: |
@@ -84,9 +129,12 @@ jobs:
           fi
 
           release_root="packages/electron-app/release"
-          shopt -s nullglob globstar
+          # macOS GitHub runners ship /bin/bash 3.2 which doesn't support `shopt -s globstar`.
-
+          # Use find to locate built app bundles instead of ** globs.
-          apps=("$release_root"/**/CodeNomad.app)
+          apps=()
+          while IFS= read -r -d '' app; do
+            apps+=("$app")
+          done < <(find "$release_root" -type d -name 'CodeNomad.app' -print0)
           if [ "${#apps[@]}" -eq 0 ]; then
             echo "No CodeNomad.app found under $release_root" >&2
             exit 1

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "codenomad-workspace",
-  "version": "0.11.4",
+  "version": "0.11.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "codenomad-workspace",
-      "version": "0.11.4",
+      "version": "0.11.5",
       "license": "MIT",
       "dependencies": {
         "7zip-bin": "^5.2.0",
@@ -11985,7 +11985,7 @@
     },
     "packages/electron-app": {
       "name": "@neuralnomads/codenomad-electron-app",
-      "version": "0.11.4",
+      "version": "0.11.5",
       "license": "MIT",
       "dependencies": {
         "@codenomad/ui": "file:../ui",
@@ -12021,7 +12021,7 @@
     },
     "packages/server": {
       "name": "@neuralnomads/codenomad",
-      "version": "0.11.4",
+      "version": "0.11.5",
       "license": "MIT",
       "dependencies": {
         "@fastify/cors": "^8.5.0",
@@ -12062,7 +12062,7 @@
     },
     "packages/tauri-app": {
       "name": "@codenomad/tauri-app",
-      "version": "0.11.4",
+      "version": "0.11.5",
       "license": "MIT",
       "devDependencies": {
         "@tauri-apps/cli": "^2.9.4"
@@ -12070,7 +12070,7 @@
     },
     "packages/ui": {
       "name": "@codenomad/ui",
-      "version": "0.11.4",
+      "version": "0.11.5",
       "license": "MIT",
       "dependencies": {
         "@git-diff-view/solid": "^0.0.8",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codenomad-workspace",
-  "version": "0.11.4",
+  "version": "0.11.5",
   "private": true,
   "description": "CodeNomad monorepo workspace",
   "license": "MIT",

packages/electron-app/electron/main/process-manager.ts

@@ -431,7 +431,9 @@ export class CliProcessManager extends EventEmitter {
 
     if (options.dev) {
       const devServer = process.env.VITE_DEV_SERVER_URL || process.env.ELECTRON_RENDERER_URL || "http://localhost:3000"
-      args.push("--ui-dev-server", devServer, "--log-level", "debug")
+      const rawLogLevel = (process.env.CLI_LOG_LEVEL ?? "info").trim()
+      const logLevel = rawLogLevel.length > 0 ? rawLogLevel.toLowerCase() : "info"
+      args.push("--ui-dev-server", devServer, "--log-level", logLevel)
     }
 
     return args

packages/electron-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuralnomads/codenomad-electron-app",
-  "version": "0.11.4",
+  "version": "0.11.5",
   "description": "CodeNomad - AI coding assistant",
   "license": "MIT",
   "author": {
@@ -15,7 +15,10 @@
   },
   "homepage": "https://github.com/NeuralNomadsAI/CodeNomad",
   "scripts": {
-    "dev": "electron-vite dev",
+    "dev": "npm run dev:info",
+    "dev:info": "cross-env CLI_LOG_LEVEL=info electron-vite dev",
+    "dev:debug": "cross-env CLI_LOG_LEVEL=debug electron-vite dev",
+    "dev:trace": "cross-env CLI_LOG_LEVEL=trace electron-vite dev",
     "dev:electron": "NODE_ENV=development ELECTRON_ENABLE_LOGGING=1 NODE_OPTIONS=\"--import tsx\" electron electron/main/main.ts",
     "build": "electron-vite build",
     "typecheck": "tsc --noEmit -p tsconfig.json",
@@ -42,6 +45,7 @@
   "devDependencies": {
     "7zip-bin": "^5.2.0",
     "app-builder-bin": "^4.2.0",
+    "cross-env": "^7.0.3",
     "electron": "39.0.0",
     "electron-builder": "^24.0.0",
     "electron-vite": "4.0.1",

packages/server/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@neuralnomads/codenomad",
-  "version": "0.11.4",
+  "version": "0.11.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@neuralnomads/codenomad",
-      "version": "0.11.4",
+      "version": "0.11.5",
       "dependencies": {
         "@fastify/cors": "^8.5.0",
         "@fastify/reply-from": "^9.8.0",

packages/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuralnomads/codenomad",
-  "version": "0.11.4",
+  "version": "0.11.5",
   "description": "CodeNomad Server",
   "license": "MIT",
   "author": {

packages/tauri-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codenomad/tauri-app",
-  "version": "0.11.4",
+  "version": "0.11.5",
   "private": true,
   "license": "MIT",
   "scripts": {

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codenomad/ui",
-  "version": "0.11.4",
+  "version": "0.11.5",
   "private": true,
   "license": "MIT",
   "type": "module",

packages/ui/src/components/instance/instance-shell2.tsx

@@ -115,6 +115,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
   const desktopQuery = useMediaQuery("(min-width: 1280px)")
 
   const tabletQuery = useMediaQuery("(min-width: 768px)")
+  const compactHeaderQuery = useMediaQuery("(max-width: 1024px)")
 
   const layoutMode = createMemo<LayoutMode>(() => {
     if (desktopQuery()) return "desktop"
@@ -123,6 +124,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
   })
 
   const isPhoneLayout = createMemo(() => layoutMode() === "phone")
+  const compactHeaderLayout = createMemo(() => isPhoneLayout() || compactHeaderQuery())
   const mobileFullscreen = createMemo(() => props.mobileFullscreenMode && isPhoneLayout())
   const compactPromptLayout = createMemo(() => layoutMode() !== "desktop")
   const leftPinningSupported = createMemo(() => layoutMode() !== "phone")
@@ -596,7 +598,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
           <AppBar position="sticky" color="default" elevation={0} class="border-b border-base">
             <Toolbar variant="dense" class="session-toolbar flex flex-wrap items-center gap-2 py-0 min-h-[40px]">
               <Show
-                when={!isPhoneLayout()}
+                when={!compactHeaderLayout()}
                 fallback={
                   <div class="flex flex-col w-full gap-1.5">
                     <div class="flex flex-wrap items-center justify-between gap-2 w-full">
@@ -634,8 +636,8 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                       </button>
                       <span class="connection-status-shortcut-hint kbd-hint">
                         <Kbd shortcut="cmd+shift+p" />
-                      </span>
+                     </span>
-                    </div>
+                     </div>
 
                     <div class="flex-1 flex items-center justify-center min-w-0">
                       <span
@@ -646,7 +648,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                       </span>
                     </div>
 
-                    <Show when={!props.mobileFullscreenMode}>
+                    <Show when={isPhoneLayout() && !props.mobileFullscreenMode}>
                       <IconButton
                         color="inherit"
                         onClick={props.onEnterMobileFullscreen}
@@ -670,16 +672,18 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                         {rightAppBarButtonIcon()}
                       </IconButton>
                     </Show>
-                  </div>
+                    </div>
 
                     <div class="flex flex-wrap items-center justify-center gap-2 pb-1">
-                      <ContextMeter
+                      <Show when={!showingInfoView()}>
-                        usedTokens={tokenStats().used}
+                        <ContextMeter
-                        availableTokens={tokenStats().avail}
+                          usedTokens={tokenStats().used}
-                        formatTokens={formatTokenTotal}
+                          availableTokens={tokenStats().avail}
-                        usedLabel={t("instanceShell.metrics.usedLabel")}
+                          formatTokens={formatTokenTotal}
-                        availableLabel={t("instanceShell.metrics.availableLabel")}
+                          usedLabel={t("instanceShell.metrics.usedLabel")}
-                      />
+                          availableLabel={t("instanceShell.metrics.availableLabel")}
+                        />
+                      </Show>
                     </div>
                 </div>
               }

packages/ui/src/components/instance/shell/right-panel/RightPanel.tsx

@@ -7,7 +7,7 @@ import {
   type Accessor,
   type Component,
 } from "solid-js"
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import type { FileContent, FileNode, File as GitFileStatus } from "@opencode-ai/sdk/v2/client"
 import IconButton from "@suid/material/IconButton"
 import MenuOpenIcon from "@suid/icons-material/MenuOpen"

packages/ui/src/components/instance/shell/right-panel/tabs/StatusTab.tsx

@@ -1,5 +1,5 @@
 import { For, Show, type Accessor, type Component } from "solid-js"
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import { Accordion } from "@kobalte/core"
 import { Tooltip } from "@kobalte/core/tooltip"
 

packages/ui/src/components/instance/shell/useInstanceSessionContext.ts

@@ -1,5 +1,5 @@
 import { batch, createMemo, type Accessor } from "solid-js"
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import type { Session } from "../../../types/session"
 import {
   activeParentSessionId,

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

@@ -2,6 +2,7 @@ import { Index, type Accessor } from "solid-js"
 import VirtualItem from "./virtual-item"
 import MessageBlock from "./message-block"
 import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
+import type { DeleteHoverState } from "../types/delete-hover"
 
 export function getMessageAnchorId(messageId: string) {
   return `message-anchor-${messageId}`
@@ -23,6 +24,8 @@ interface MessageBlockListProps {
   onRevert?: (messageId: string) => void
   onFork?: (messageId?: string) => void
   onContentRendered?: () => void
+  deleteHover?: Accessor<DeleteHoverState>
+  onDeleteHoverChange?: (state: DeleteHoverState) => void
   setBottomSentinel: (element: HTMLDivElement | null) => void
   suspendMeasurements?: () => boolean
 }
@@ -51,6 +54,8 @@ export default function MessageBlockList(props: MessageBlockListProps) {
               showThinking={props.showThinking}
               thinkingDefaultExpanded={props.thinkingDefaultExpanded}
               showUsageMetrics={props.showUsageMetrics}
+              deleteHover={props.deleteHover}
+              onDeleteHoverChange={props.onDeleteHoverChange}
               onRevert={props.onRevert}
               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, Trash2 } from "lucide-solid"
+import { ChevronsDownUp, ChevronsUpDown, ExternalLink, FoldVertical, MessageSquareX, Trash2 } from "lucide-solid"
 import MessageItem from "./message-item"
 import ToolCall from "./tool-call"
 import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
@@ -13,7 +13,9 @@ import { sessions, setActiveParentSession, setActiveSession } from "../stores/se
 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"
 
 const TOOL_ICON = "🔧"
 const USER_BORDER_COLOR = "var(--message-user-border)"
@@ -23,10 +25,10 @@ const TOOL_BORDER_COLOR = "var(--message-tool-border)"
 type ToolCallPart = Extract<ClientPart, { type: "tool" }>
 
 
-type ToolState = import("@opencode-ai/sdk").ToolState
+type ToolState = import("@opencode-ai/sdk/v2").ToolState
-type ToolStateRunning = import("@opencode-ai/sdk").ToolStateRunning
+type ToolStateRunning = import("@opencode-ai/sdk/v2").ToolStateRunning
-type ToolStateCompleted = import("@opencode-ai/sdk").ToolStateCompleted
+type ToolStateCompleted = import("@opencode-ai/sdk/v2").ToolStateCompleted
-type ToolStateError = import("@opencode-ai/sdk").ToolStateError
+type ToolStateError = import("@opencode-ai/sdk/v2").ToolStateError
 
 function isToolStateRunning(state: ToolState | undefined): state is ToolStateRunning {
   return Boolean(state && state.status === "running")
@@ -196,6 +198,8 @@ interface MessageContentItemProps {
   onRevert?: (messageId: string) => void
   onFork?: (messageId?: string) => void
   onContentRendered?: () => void
+  showDeleteMessage?: boolean
+  onDeleteHoverChange?: (state: DeleteHoverState) => void
 }
 
 function isSupportedPartType(part: unknown): boolean {
@@ -282,6 +286,8 @@ function MessageContentItem(props: MessageContentItemProps) {
           sessionId={props.sessionId}
           isQueued={isQueued()}
           showAgentMeta={showAgentMeta()}
+          showDeleteMessage={props.showDeleteMessage}
+          onDeleteHoverChange={props.onDeleteHoverChange}
           onRevert={props.onRevert}
           onFork={props.onFork}
           onContentRendered={props.onContentRendered}
@@ -298,11 +304,15 @@ interface ToolCallItemProps {
   messageId: string
   partId: string
   onContentRendered?: () => void
+  showDeleteMessage?: boolean
+  onDeleteHoverChange?: (state: DeleteHoverState) => void
 }
 
 function ToolCallItem(props: ToolCallItemProps) {
   const { t } = useI18n()
   const [deleting, setDeleting] = createSignal(false)
+  const [deletingMessage, setDeletingMessage] = createSignal(false)
+  const [hoverDeletePart, setHoverDeletePart] = createSignal(false)
 
   const record = createMemo(() => props.store().getMessage(props.messageId))
   const messageInfo = createMemo(() => props.store().getMessageInfo(props.messageId))
@@ -370,10 +380,31 @@ function ToolCallItem(props: ToolCallItemProps) {
     }
   }
 
+  const handleDeleteMessage = async (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+
+    if (!props.showDeleteMessage) return
+    if (deletingMessage()) return
+
+    setDeletingMessage(true)
+    try {
+      await deleteMessage(props.instanceId, props.sessionId, props.messageId)
+    } catch (error) {
+      showAlertDialog(t("messageItem.actions.deleteMessageFailedMessage"), {
+        title: t("messageItem.actions.deleteMessageFailedTitle"),
+        detail: error instanceof Error ? error.message : String(error),
+        variant: "error",
+      })
+    } finally {
+      setDeletingMessage(false)
+    }
+  }
+
   return (
     <Show when={toolPart()}>
       {(resolvedToolPart) => (
-        <>
+        <div class="delete-hover-scope" data-delete-part-hover={hoverDeletePart() ? "true" : undefined}>
           <div class="tool-call-header-label">
             <div class="tool-call-header-meta">
               <span class="tool-call-icon">{TOOL_ICON}</span>
@@ -381,7 +412,7 @@ function ToolCallItem(props: ToolCallItemProps) {
               <span class="tool-name">{toolName() || t("messageBlock.tool.unknown")}</span>
             </div>
 
-            <div class="flex items-center gap-2">
+              <div class="flex items-center gap-2">
               <Show when={taskSessionId()}>
                 <button
                   class="tool-call-header-button"
@@ -395,18 +426,41 @@ function ToolCallItem(props: ToolCallItemProps) {
                 </button>
               </Show>
 
-              <button
+                <button
-                class="tool-call-header-button"
+                  class="tool-call-header-button"
-                type="button"
+                  type="button"
-                disabled={deleteDisabled()}
+                  disabled={deleteDisabled()}
-                onClick={handleDeleteToolPart}
+                  onClick={handleDeleteToolPart}
-                title={deleting() ? t("messageBlock.tool.deletePart.deleting") : t("messageBlock.tool.deletePart.label")}
+                  onMouseEnter={() => {
-                aria-label={deleting() ? t("messageBlock.tool.deletePart.deleting") : t("messageBlock.tool.deletePart.label")}
+                    setHoverDeletePart(true)
-              >
+                    props.onDeleteHoverChange?.({ kind: "part", messageId: props.messageId, partId: props.partId, partType: "tool" })
-                <Trash2 class="w-3.5 h-3.5" aria-hidden="true" />
+                  }}
-              </button>
+                  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")}
+                >
+                  <Trash2 class="w-3.5 h-3.5" aria-hidden="true" />
+                </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>
             </div>
-          </div>
 
           <ToolCall
             toolCall={resolvedToolPart()}
@@ -418,7 +472,7 @@ function ToolCallItem(props: ToolCallItemProps) {
             sessionId={props.sessionId}
             onContentRendered={props.onContentRendered}
           />
-        </>
+        </div>
       )}
     </Show>
   )
@@ -470,6 +524,8 @@ interface MessageBlockProps {
   showThinking: () => boolean
   thinkingDefaultExpanded: () => boolean
   showUsageMetrics: () => boolean
+  deleteHover?: () => DeleteHoverState
+  onDeleteHoverChange?: (state: DeleteHoverState) => void
   onRevert?: (messageId: string) => void
   onFork?: (messageId?: string) => void
   onContentRendered?: () => void
@@ -481,6 +537,11 @@ export default function MessageBlock(props: MessageBlockProps) {
   const messageInfo = createMemo(() => props.store().getMessageInfo(props.messageId))
   const sessionCache = getSessionRenderCache(props.instanceId, props.sessionId)
 
+  const isDeleteMessageHovered = () => {
+    const hover = props.deleteHover?.() ?? ({ kind: "none" } as DeleteHoverState)
+    return hover.kind === "message" && hover.messageId === props.messageId
+  }
+
   const block = createMemo<MessageDisplayBlock | null>(() => {
     const current = record()
     if (!current) return null
@@ -668,9 +729,13 @@ export default function MessageBlock(props: MessageBlockProps) {
   return (
     <Show when={block()}>
       {(resolvedBlock) => (
-        <div class="message-stream-block" data-message-id={resolvedBlock().record.id}>
+        <div
+          class="message-stream-block"
+          data-message-id={resolvedBlock().record.id}
+          data-delete-message-hover={isDeleteMessageHovered() ? "true" : undefined}
+        >
           <For each={resolvedBlock().items}>
-            {(item) => (
+            {(item, index) => (
               <Switch>
                 <Match when={item.type === "content"}>
                   <MessageContentItem
@@ -681,6 +746,8 @@ export default function MessageBlock(props: MessageBlockProps) {
                     startPartId={(item as ContentDisplayItem).startPartId}
                     messageIndex={props.messageIndex}
                     lastAssistantIndex={props.lastAssistantIndex}
+                    showDeleteMessage={index() === 0}
+                    onDeleteHoverChange={props.onDeleteHoverChange}
                     onRevert={props.onRevert}
                     onFork={props.onFork}
                     onContentRendered={props.onContentRendered}
@@ -697,6 +764,8 @@ export default function MessageBlock(props: MessageBlockProps) {
                           store={props.store}
                           messageId={toolItem.messageId}
                           partId={toolItem.partId}
+                          showDeleteMessage={index() === 0}
+                          onDeleteHoverChange={props.onDeleteHoverChange}
                           onContentRendered={props.onContentRendered}
                         />
                       </div>
@@ -709,6 +778,11 @@ export default function MessageBlock(props: MessageBlockProps) {
                     part={(item as StepDisplayItem).part}
                     messageInfo={(item as StepDisplayItem).messageInfo}
                     showAgentMeta
+                    showDeleteMessage={index() === 0}
+                    instanceId={props.instanceId}
+                    sessionId={props.sessionId}
+                    messageId={props.messageId}
+                    onDeleteHoverChange={props.onDeleteHoverChange}
                   />
                 </Match>
                 <Match when={item.type === "step-finish"}>
@@ -718,6 +792,11 @@ export default function MessageBlock(props: MessageBlockProps) {
                     messageInfo={(item as StepDisplayItem).messageInfo}
                     showUsage={props.showUsageMetrics()}
                     borderColor={(item as StepDisplayItem).accentColor}
+                    showDeleteMessage={index() === 0}
+                    instanceId={props.instanceId}
+                    sessionId={props.sessionId}
+                    messageId={props.messageId}
+                    onDeleteHoverChange={props.onDeleteHoverChange}
                   />
                 </Match>
                 <Match when={item.type === "compaction"}>
@@ -729,6 +808,8 @@ export default function MessageBlock(props: MessageBlockProps) {
                     sessionId={props.sessionId}
                     messageId={(item as CompactionDisplayItem).messageId}
                     partId={(item as CompactionDisplayItem).partId}
+                    showDeleteMessage={index() === 0}
+                    onDeleteHoverChange={props.onDeleteHoverChange}
                   />
                 </Match>
                 <Match when={item.type === "reasoning"}>
@@ -741,6 +822,8 @@ export default function MessageBlock(props: MessageBlockProps) {
                     partId={(item as ReasoningDisplayItem).partId}
                     showAgentMeta={(item as ReasoningDisplayItem).showAgentMeta}
                     defaultExpanded={(item as ReasoningDisplayItem).defaultExpanded}
+                    showDeleteMessage={index() === 0}
+                    onDeleteHoverChange={props.onDeleteHoverChange}
                   />
                 </Match>
               </Switch>
@@ -759,6 +842,11 @@ interface StepCardProps {
   showAgentMeta?: boolean
   showUsage?: boolean
   borderColor?: string
+  showDeleteMessage?: boolean
+  instanceId?: string
+  sessionId?: string
+  messageId?: string
+  onDeleteHoverChange?: (state: DeleteHoverState) => void
 }
 
 interface CompactionCardProps {
@@ -769,11 +857,15 @@ interface CompactionCardProps {
   sessionId: string
   messageId: string
   partId: string
+  showDeleteMessage?: boolean
+  onDeleteHoverChange?: (state: DeleteHoverState) => void
 }
 
 function CompactionCard(props: CompactionCardProps) {
   const { t } = useI18n()
   const [deleting, setDeleting] = createSignal(false)
+  const [deletingMessage, setDeletingMessage] = createSignal(false)
+  const [hoverDeletePart, setHoverDeletePart] = createSignal(false)
   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)
@@ -801,22 +893,70 @@ function CompactionCard(props: CompactionCardProps) {
     }
   }
 
+  const canDeleteMessage = () => Boolean(props.showDeleteMessage) && !deletingMessage()
+
+  const handleDeleteMessage = async (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    if (!props.showDeleteMessage) return
+    if (!canDeleteMessage()) return
+    setDeletingMessage(true)
+    try {
+      await deleteMessage(props.instanceId, props.sessionId, props.messageId)
+    } catch (error) {
+      showAlertDialog(t("messageItem.actions.deleteMessageFailedMessage"), {
+        title: t("messageItem.actions.deleteMessageFailedTitle"),
+        detail: error instanceof Error ? error.message : String(error),
+        variant: "error",
+      })
+    } finally {
+      setDeletingMessage(false)
+    }
+  }
+
   return (
     <div
-      class={`${containerClass()} relative`}
+      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")}
     >
-      <button
+      <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
-        type="button"
+        <Show when={props.showDeleteMessage}>
-        class="tool-call-header-button absolute right-2 top-1/2 -translate-y-1/2"
+          <button
-        disabled={!canDelete()}
+            type="button"
-        onClick={handleDelete}
+            class="tool-call-header-button"
-        title={t("messagePart.actions.deleteTitle")}
+            disabled={!canDeleteMessage()}
-      >
+            onClick={handleDeleteMessage}
-        {deleting() ? t("messagePart.actions.deleting") : t("messagePart.actions.delete")}
+            onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "message", messageId: props.messageId })}
-      </button>
+            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>
+
+        <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">
         <FoldVertical class="message-compaction-icon w-4 h-4" aria-hidden="true" />
@@ -828,6 +968,7 @@ function CompactionCard(props: CompactionCardProps) {
 
 function StepCard(props: StepCardProps) {
   const { t } = useI18n()
+  const [deletingMessage, setDeletingMessage] = createSignal(false)
   const timestamp = () => {
     const value = props.messageInfo?.time?.created ?? (props.part as any)?.time?.start ?? Date.now()
     const date = new Date(value)
@@ -872,6 +1013,27 @@ function StepCard(props: StepCardProps) {
 
   const finishStyle = () => (props.borderColor ? { "border-left-color": props.borderColor } : undefined)
 
+  const canDeleteMessage = () =>
+    Boolean(props.showDeleteMessage && props.instanceId && props.sessionId && props.messageId) && !deletingMessage()
+
+  const handleDeleteMessage = async (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    if (!canDeleteMessage()) return
+    setDeletingMessage(true)
+    try {
+      await deleteMessage(props.instanceId!, props.sessionId!, props.messageId!)
+    } catch (error) {
+      showAlertDialog(t("messageItem.actions.deleteMessageFailedMessage"), {
+        title: t("messageItem.actions.deleteMessageFailedTitle"),
+        detail: error instanceof Error ? error.message : String(error),
+        variant: "error",
+      })
+    } finally {
+      setDeletingMessage(false)
+    }
+  }
+
 
   const renderUsageChips = (usage: NonNullable<ReturnType<typeof usageStats>>) => {
     const entries = [
@@ -902,7 +1064,22 @@ function StepCard(props: StepCardProps) {
       return null
     }
     return (
-      <div class={`message-step-card message-step-finish message-step-finish-flush`} style={finishStyle()}>
+      <div class={`message-step-card message-step-finish message-step-finish-flush relative`} style={finishStyle()}>
+        <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>
+        </Show>
+
         {renderUsageChips(usage)}
       </div>
     )
@@ -942,12 +1119,16 @@ interface ReasoningCardProps {
   partId: string
   showAgentMeta?: boolean
   defaultExpanded?: boolean
+  showDeleteMessage?: boolean
+  onDeleteHoverChange?: (state: DeleteHoverState) => 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)
 
   createEffect(() => {
     setExpanded(Boolean(props.defaultExpanded))
@@ -1035,8 +1216,29 @@ function ReasoningCard(props: ReasoningCardProps) {
     }
   }
 
+  const canDeleteMessage = () => Boolean(props.showDeleteMessage) && !deletingMessage()
+
+  const handleDeleteMessage = async (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    if (!props.showDeleteMessage) return
+    if (!canDeleteMessage()) return
+    setDeletingMessage(true)
+    try {
+      await deleteMessage(props.instanceId, props.sessionId, props.messageId)
+    } catch (error) {
+      showAlertDialog(t("messageItem.actions.deleteMessageFailedMessage"), {
+        title: t("messageItem.actions.deleteMessageFailedTitle"),
+        detail: error instanceof Error ? error.message : String(error),
+        variant: "error",
+      })
+    } finally {
+      setDeletingMessage(false)
+    }
+  }
+
   return (
-    <div class="message-reasoning-card">
+    <div class="delete-hover-scope message-reasoning-card" data-delete-part-hover={hoverDeletePart() ? "true" : undefined}>
       <div class="message-reasoning-header">
         <button
           type="button"
@@ -1087,6 +1289,14 @@ function ReasoningCard(props: ReasoningCardProps) {
               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")}
             >
@@ -1094,6 +1304,21 @@ function ReasoningCard(props: ReasoningCardProps) {
             </button>
           </Show>
 
+          <Show when={props.showDeleteMessage}>
+            <button
+              type="button"
+              class="message-action-button"
+              onClick={handleDeleteMessage}
+              disabled={!canDeleteMessage()}
+              onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "message", messageId: props.messageId })}
+              onMouseLeave={() => props.onDeleteHoverChange?.({ kind: "none" })}
+              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" />
+            </button>
+          </Show>
+
           <span class="message-reasoning-time">{timestamp()}</span>
         </div>
       </div>

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

@@ -1,14 +1,15 @@
 import { For, Show, createSignal } from "solid-js"
-import { Copy, ExternalLink, Split, Trash2, Undo } from "lucide-solid"
+import { Copy, MessageSquareX, Split, Trash2, Undo } from "lucide-solid"
-import type { MessageInfo, ClientPart } from "../types/message"
+import type { MessageInfo, ClientPart, SDKAssistantMessageV2 } from "../types/message"
 import { partHasRenderableText } from "../types/message"
 import type { MessageRecord } from "../stores/message-v2/types"
 import MessagePart from "./message-part"
 import { copyToClipboard } from "../lib/clipboard"
 import { useI18n } from "../lib/i18n"
 import { showAlertDialog } from "../stores/alerts"
-import { deleteMessagePart } from "../stores/session-actions"
+import { deleteMessage, deleteMessagePart } from "../stores/session-actions"
 import { isTauriHost } from "../lib/runtime-env"
+import type { DeleteHoverState } from "../types/delete-hover"
 
 interface MessageItemProps {
   record: MessageRecord
@@ -21,12 +22,16 @@ interface MessageItemProps {
   onFork?: (messageId?: string) => void
   showAgentMeta?: boolean
   onContentRendered?: () => void
+  showDeleteMessage?: boolean
+  onDeleteHoverChange?: (state: DeleteHoverState) => void
 }
 
 export default function MessageItem(props: MessageItemProps) {
   const { t } = useI18n()
   const [copied, setCopied] = createSignal(false)
   const [deletingParts, setDeletingParts] = createSignal<Set<string>>(new Set())
+  const [deletingMessage, setDeletingMessage] = createSignal(false)
+  const [hoveredDeletePartId, setHoveredDeletePartId] = createSignal<string | null>(null)
 
   const isUser = () => props.record.role === "user"
   const createdTimestamp = () => props.messageInfo?.time?.created ?? props.record.createdAt
@@ -234,6 +239,22 @@ export default function MessageItem(props: MessageItemProps) {
     }
   }
 
+  const handleDeleteMessage = async () => {
+    if (deletingMessage()) return
+    setDeletingMessage(true)
+    try {
+      await deleteMessage(props.instanceId, props.sessionId, props.record.id)
+    } catch (error) {
+      showAlertDialog(t("messageItem.actions.deleteMessageFailedMessage"), {
+        title: t("messageItem.actions.deleteMessageFailedTitle"),
+        detail: error instanceof Error ? error.message : String(error),
+        variant: "error",
+      })
+    } finally {
+      setDeletingMessage(false)
+    }
+  }
+
   if (!isUser() && !hasContent() && !isGenerating()) {
     return null
   }
@@ -258,8 +279,16 @@ export default function MessageItem(props: MessageItemProps) {
     if (!info || info.role !== "assistant") return ""
     const modelID = info.modelID || ""
     const providerID = info.providerID || ""
-    if (modelID && providerID) return `${providerID}/${modelID}`
+
-    return modelID
+    const base = modelID && providerID ? `${providerID}/${modelID}` : modelID
+    if (!base) return ""
+
+    const variant = (info as SDKAssistantMessageV2).variant
+    if (typeof variant === "string" && variant.trim().length > 0) {
+      return `${base} (${variant.trim()})`
+    }
+
+    return base
   }
 
   const agentMeta = () => {
@@ -290,16 +319,15 @@ export default function MessageItem(props: MessageItemProps) {
           <div class="message-item-actions">
             <Show when={isUser()}>
               <div class="message-action-group">
-                <Show when={props.onRevert}>
+                <button
-                  <button
+                  class="message-action-button"
-                    class="message-action-button"
+                  onClick={handleCopy}
-                    onClick={handleRevert}
+                  title={copyLabel()}
-                    title={t("messageItem.actions.revert")}
+                  aria-label={copyLabel()}
-                    aria-label={t("messageItem.actions.revert")}
+                >
-                  >
+                  <Copy class="w-3.5 h-3.5" aria-hidden="true" />
-                    <Undo class="w-3.5 h-3.5" aria-hidden="true" />
+                </button>
-                  </button>
+
-                </Show>
                 <Show when={props.onFork}>
                   <button
                     class="message-action-button"
@@ -310,14 +338,31 @@ export default function MessageItem(props: MessageItemProps) {
                     <Split class="w-3.5 h-3.5" aria-hidden="true" />
                   </button>
                 </Show>
-                <button
+
-                  class="message-action-button"
+                <Show when={props.onRevert}>
-                  onClick={handleCopy}
+                  <button
-                  title={copyLabel()}
+                    class="message-action-button"
-                  aria-label={copyLabel()}
+                    onClick={handleRevert}
-                >
+                    title={t("messageItem.actions.revertTitle")}
-                  <Copy class="w-3.5 h-3.5" aria-hidden="true" />
+                    aria-label={t("messageItem.actions.revertTitle")}
-                </button>
+                  >
+                    <Undo class="w-3.5 h-3.5" aria-hidden="true" />
+                  </button>
+                </Show>
+
+                <Show when={props.showDeleteMessage}>
+                  <button
+                    class="message-action-button"
+                    onClick={handleDeleteMessage}
+                    disabled={deletingMessage()}
+                    onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "message", messageId: props.record.id })}
+                    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>
             </Show>
             <Show when={!isUser()}>
@@ -337,6 +382,14 @@ export default function MessageItem(props: MessageItemProps) {
                       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")}
                     >
@@ -344,6 +397,20 @@ export default function MessageItem(props: MessageItemProps) {
                     </button>
                   )}
                 </Show>
+
+                <Show when={props.showDeleteMessage}>
+                  <button
+                    class="message-action-button"
+                    onClick={handleDeleteMessage}
+                    disabled={deletingMessage()}
+                    onMouseEnter={() => props.onDeleteHoverChange?.({ kind: "message", messageId: props.record.id })}
+                    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>
             </Show>
             <time class="message-timestamp" dateTime={timestampIso()}>{timestamp()}</time>
@@ -378,16 +445,27 @@ export default function MessageItem(props: MessageItemProps) {
         </Show>
 
         <For each={messageParts()}>
-          {(part) => (
+          {(part) => {
-            <MessagePart
+            const partId = typeof (part as any)?.id === "string" ? ((part as any).id as string) : ""
-              part={part}
+            const isHoveredDeleteTarget = () => Boolean(partId) && hoveredDeletePartId() === partId
-              messageType={props.record.role}
+
-              instanceId={props.instanceId}
+            return (
-              sessionId={props.sessionId}
+              <div
-              primaryUserTextPartId={primaryUserTextPartId()}
+                class="delete-hover-scope message-part-shell"
-              onRendered={props.onContentRendered}
+                data-part-id={partId}
-            />
+                data-delete-part-hover={isHoveredDeleteTarget() ? "true" : undefined}
-          )}
+              >
+                <MessagePart
+                  part={part}
+                  messageType={props.record.role}
+                  instanceId={props.instanceId}
+                  sessionId={props.sessionId}
+                  primaryUserTextPartId={primaryUserTextPartId()}
+                  onRendered={props.onContentRendered}
+                />
+              </div>
+            )
+          }}
         </For>
 
         <Show when={fileAttachments().length > 0}>
@@ -396,8 +474,13 @@ export default function MessageItem(props: MessageItemProps) {
               {(attachment) => {
                 const name = getAttachmentName(attachment)
                 const isImage = isImageAttachment(attachment)
+                const isHoveredDeleteTarget = () => hoveredDeletePartId() === attachment.id
                 return (
-                  <div class={`attachment-chip ${isImage ? "attachment-chip-image" : ""}`} title={name}>
+                  <div
+                    class={`delete-hover-scope attachment-chip ${isImage ? "attachment-chip-image" : ""}`}
+                    data-delete-part-hover={isHoveredDeleteTarget() ? "true" : undefined}
+                    title={name}
+                  >
                     <Show when={isImage} fallback={
                       <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path
@@ -431,6 +514,16 @@ export default function MessageItem(props: MessageItemProps) {
                       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")}
                     >

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

@@ -10,6 +10,7 @@ import { useI18n } from "../lib/i18n"
 import { copyToClipboard } from "../lib/clipboard"
 import { showToastNotification } from "../lib/notifications"
 import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
+import type { DeleteHoverState } from "../types/delete-hover"
 
 const SCROLL_SCOPE = "session"
 const SCROLL_SENTINEL_MARGIN_PX = 48
@@ -145,6 +146,8 @@ export default function MessageSection(props: MessageSectionProps) {
     }
   }
   const [activeMessageId, setActiveMessageId] = createSignal<string | null>(null)
+
+  const [deleteHover, setDeleteHover] = createSignal<DeleteHoverState>({ kind: "none" })
  
   const changeToken = createMemo(() => String(sessionRevision()))
   const isActive = createMemo(() => props.isActive !== false)
@@ -899,6 +902,8 @@ export default function MessageSection(props: MessageSectionProps) {
               onRevert={props.onRevert}
               onFork={props.onFork}
               onContentRendered={handleContentRendered}
+              deleteHover={deleteHover}
+              onDeleteHoverChange={setDeleteHover}
               setBottomSentinel={setBottomSentinel}
               suspendMeasurements={() => !isActive()}
             />
@@ -957,6 +962,7 @@ export default function MessageSection(props: MessageSectionProps) {
               instanceId={props.instanceId}
               sessionId={props.sessionId}
               showToolSegments={showTimelineToolsPreference()}
+              deleteHover={deleteHover}
             />
           </div>
         </Show>

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

@@ -1,4 +1,4 @@
-import { For, Show, createEffect, createMemo, createSignal, onCleanup, type Component } from "solid-js"
+import { For, Show, createEffect, createMemo, createSignal, onCleanup, on, untrack, type Component } from "solid-js"
 import MessagePreview from "./message-preview"
 import { messageStoreBus } from "../stores/message-v2/bus"
 import type { ClientPart } from "../types/message"
@@ -7,6 +7,7 @@ import { buildRecordDisplayData } from "../stores/message-v2/record-display-cach
 import { getToolIcon } from "./tool-call/utils"
 import { User as UserIcon, Bot as BotIcon, FoldVertical, ShieldAlert } from "lucide-solid"
 import { useI18n } from "../lib/i18n"
+import type { DeleteHoverState } from "../types/delete-hover"
 
 export type TimelineSegmentType = "user" | "assistant" | "tool" | "compaction"
 
@@ -19,6 +20,8 @@ export interface TimelineSegment {
   shortLabel?: string
   variant?: "auto" | "manual"
   toolPartIds?: string[]
+  partIds?: string[]
+  partId?: string
 }
 
 interface MessageTimelineProps {
@@ -28,6 +31,7 @@ interface MessageTimelineProps {
   instanceId: string
   sessionId: string
   showToolSegments?: boolean
+  deleteHover?: () => DeleteHoverState
 }
 
 const MAX_TOOLTIP_LENGTH = 220
@@ -42,6 +46,7 @@ interface PendingSegment {
   toolTypeLabels: string[]
   toolIcons: string[]
   toolPartIds: string[]
+  partIds: string[]
   hasPrimaryText: boolean
 }
 
@@ -191,6 +196,7 @@ export function buildTimelineSegments(
       tooltip,
       shortLabel,
       toolPartIds: isToolSegment ? pending.toolPartIds : undefined,
+      partIds: !isToolSegment ? pending.partIds : undefined,
     })
     segmentIndex += 1
     pending = null
@@ -199,7 +205,17 @@ export function buildTimelineSegments(
   const ensureSegment = (type: TimelineSegmentType): PendingSegment => {
     if (!pending || pending.type !== type) {
       flushPending()
-      pending = { type, texts: [], reasoningTexts: [], toolTitles: [], toolTypeLabels: [], toolIcons: [], toolPartIds: [], hasPrimaryText: type !== "assistant" }
+      pending = {
+        type,
+        texts: [],
+        reasoningTexts: [],
+        toolTitles: [],
+        toolTypeLabels: [],
+        toolIcons: [],
+        toolPartIds: [],
+        partIds: [],
+        hasPrimaryText: type !== "assistant",
+      }
     }
     return pending!
   }
@@ -228,6 +244,9 @@ export function buildTimelineSegments(
       const target = ensureSegment(defaultContentType)
       if (target) {
         target.reasoningTexts.push(text)
+        if (typeof (part as any).id === "string" && (part as any).id.length > 0) {
+          target.partIds.push((part as any).id)
+        }
       }
       continue
     }
@@ -235,6 +254,7 @@ export function buildTimelineSegments(
     if (part.type === "compaction") {
       flushPending()
       const isAuto = Boolean((part as any)?.auto)
+      const partId = typeof (part as any)?.id === "string" ? ((part as any).id as string) : ""
       result.push({
         id: `${record.id}:${segmentIndex}`,
         messageId: record.id,
@@ -242,6 +262,7 @@ export function buildTimelineSegments(
         label: segmentLabel("compaction"),
         tooltip: isAuto ? t("messageTimeline.tooltip.compaction.auto") : t("messageTimeline.tooltip.compaction.manual"),
         variant: isAuto ? "auto" : "manual",
+        partId,
       })
       segmentIndex += 1
       continue
@@ -257,6 +278,9 @@ export function buildTimelineSegments(
     if (target) {
       target.texts.push(text)
       target.hasPrimaryText = true
+      if (typeof (part as any).id === "string" && (part as any).id.length > 0) {
+        target.partIds.push((part as any).id)
+      }
     }
   }
 
@@ -278,6 +302,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
   let hoverTimer: number | null = null
   let closeTimer: number | null = null
   const showTools = () => props.showToolSegments ?? true
+  const deleteHover = () => props.deleteHover?.() ?? { kind: "none" as const }
  
   const registerButtonRef = (segmentId: string, element: HTMLButtonElement | null) => {
     if (element) {
@@ -350,11 +375,9 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
     clearCloseTimer()
   })
 
-  createEffect(() => {
+  createEffect(on(() => props.activeMessageId, (activeId) => {
-    const activeId = props.activeMessageId
-
     if (!activeId) return
-    const targetSegment = props.segments.find((segment) => segment.messageId === activeId)
+    const targetSegment = untrack(() => props.segments).find((segment) => segment.messageId === activeId)
     if (!targetSegment) return
     const element = buttonRefs.get(targetSegment.id)
     if (!element) return
@@ -366,7 +389,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
         window.clearTimeout(timer)
       }
     })
-  })
+  }))
 
   createEffect(() => {
     const element = tooltipElement()
@@ -428,16 +451,34 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
            }
 
           return (
-             <button
+              <button
-               ref={(el) => registerButtonRef(segment.id, el)}
+                ref={(el) => registerButtonRef(segment.id, el)}
-               type="button"
+                type="button"
-               data-variant={segment.variant}
+                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" : ""}`}
+                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" : ""}`}
 
-              aria-current={isActive() ? "true" : undefined}
+                data-delete-hover={(() => {
-              aria-hidden={isHidden() ? "true" : undefined}
+                  const hover = deleteHover() as DeleteHoverState
-              onClick={() => props.onSegmentClick?.(segment)}
+                  if (hover.kind === "message") {
-              onMouseEnter={(event) => handleMouseEnter(segment, event)}
+                    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
+                })()}
+
+               aria-current={isActive() ? "true" : undefined}
+               aria-hidden={isHidden() ? "true" : undefined}
+               onClick={() => props.onSegmentClick?.(segment)}
+               onMouseEnter={(event) => handleMouseEnter(segment, event)}
               onMouseLeave={handleMouseLeave}
             >
               <span class="message-timeline-label message-timeline-label-full">{segment.label}</span>

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

@@ -44,7 +44,7 @@ import { getLogger } from "../lib/logger"
 
 const log = getLogger("session")
 
-type ToolState = import("@opencode-ai/sdk").ToolState
+type ToolState = import("@opencode-ai/sdk/v2").ToolState
 
 const TOOL_CALL_CACHE_SCOPE = "tool-call"
 const TOOL_SCROLL_SENTINEL_MARGIN_PX = 48

packages/ui/src/components/tool-call/diagnostics.ts

@@ -1,4 +1,4 @@
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import { getRelativePath, isToolStateCompleted, isToolStateError, isToolStateRunning } from "./utils"
 import { tGlobal } from "../../lib/i18n"
 

packages/ui/src/components/tool-call/markdown-render.tsx

@@ -1,5 +1,5 @@
 import type { Accessor, JSXElement } from "solid-js"
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import type { TextPart } from "../../types/message"
 import { Markdown } from "../markdown"
 import type { MarkdownRenderOptions, ToolScrollHelpers } from "./types"

packages/ui/src/components/tool-call/question-block.tsx

@@ -1,5 +1,5 @@
 import { createMemo, Show, For, createEffect, type Accessor } from "solid-js"
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import type { QuestionRequest } from "@opencode-ai/sdk/v2"
 import { useI18n } from "../../lib/i18n"
 

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

@@ -1,5 +1,5 @@
 import { For, Show, createEffect, createMemo, createSignal, untrack } from "solid-js"
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import type { ToolRenderer } from "../types"
 import { ensureMarkdownContent, getDefaultToolAction, getToolIcon, getToolName, readToolStatePayload } from "../utils"
 import { resolveTitleForTool } from "../tool-title"

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

@@ -1,5 +1,5 @@
 import { For, Show } from "solid-js"
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import type { ToolRenderer } from "../types"
 import { readToolStatePayload } from "../utils"
 import { useI18n, tGlobal } from "../../../lib/i18n"

packages/ui/src/components/tool-call/tool-title.ts

@@ -1,4 +1,4 @@
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import type { ToolRendererContext, ToolRenderer, ToolCallPart } from "./types"
 import { getDefaultToolAction, getToolName, isToolStateCompleted, isToolStateRunning } from "./utils"
 import { enMessages } from "../../lib/i18n/messages/en"

packages/ui/src/components/tool-call/types.ts

@@ -1,5 +1,5 @@
 import type { Accessor, JSXElement } from "solid-js"
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import type { ClientPart } from "../../types/message"
 
 export type ToolCallPart = Extract<ClientPart, { type: "tool" }>

packages/ui/src/components/tool-call/utils.ts

@@ -1,15 +1,15 @@
 import { isRenderableDiffText } from "../../lib/diff-utils"
 import { getLanguageFromPath } from "../../lib/markdown"
-import type { ToolState } from "@opencode-ai/sdk"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import type { DiffPayload } from "./types"
 import { getLogger } from "../../lib/logger"
 import { tGlobal } from "../../lib/i18n"
 const log = getLogger("session")
 
 
-export type ToolStateRunning = import("@opencode-ai/sdk").ToolStateRunning
+export type ToolStateRunning = import("@opencode-ai/sdk/v2").ToolStateRunning
-export type ToolStateCompleted = import("@opencode-ai/sdk").ToolStateCompleted
+export type ToolStateCompleted = import("@opencode-ai/sdk/v2").ToolStateCompleted
-export type ToolStateError = import("@opencode-ai/sdk").ToolStateError
+export type ToolStateError = import("@opencode-ai/sdk/v2").ToolStateError
 
 export const diffCapableTools = new Set(["edit", "patch"])
 

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

@@ -41,7 +41,7 @@ export const messagingMessages = {
   "messageBlock.tool.goToSession.label": "Go to Session",
   "messageBlock.tool.goToSession.title": "Go to session",
   "messageBlock.tool.goToSession.unavailableTitle": "Session not available yet",
-  "messageBlock.tool.deletePart.label": "Delete",
+  "messageBlock.tool.deletePart.label": "Delete Part",
   "messageBlock.tool.deletePart.deleting": "Deleting...",
   "messageBlock.tool.deletePart.title": "Delete this tool call output",
   "messageBlock.tool.deletePart.failed.title": "Delete failed",
@@ -71,17 +71,21 @@ export const messagingMessages = {
   "messageItem.speaker.you": "You",
   "messageItem.speaker.assistant": "Assistant",
   "messageItem.actions.revert": "Revert",
-  "messageItem.actions.revertTitle": "Revert to this message",
+  "messageItem.actions.revertTitle": "Undo changes up to here",
   "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.deletingMessage": "Deleting...",
+  "messageItem.actions.deleteMessageFailedTitle": "Delete failed",
+  "messageItem.actions.deleteMessageFailedMessage": "Failed to delete message",
   "messageItem.status.queued": "QUEUED",
   "messageItem.status.generating": "Generating...",
   "messageItem.status.sending": "Sending...",
   "messageItem.status.failedToSend": "Message failed to send",
-  "messagePart.actions.delete": "Delete",
+  "messagePart.actions.delete": "Delete Part",
   "messagePart.actions.deleting": "Deleting...",
   "messagePart.actions.deleteTitle": "Delete this item",
   "messagePart.actions.deleteFailedTitle": "Delete failed",

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

@@ -41,7 +41,7 @@ export const messagingMessages = {
   "messageBlock.tool.goToSession.label": "Ir a sesión",
   "messageBlock.tool.goToSession.title": "Ir a la sesión",
   "messageBlock.tool.goToSession.unavailableTitle": "La sesión aún no está disponible",
-  "messageBlock.tool.deletePart.label": "Eliminar",
+  "messageBlock.tool.deletePart.label": "Eliminar parte",
   "messageBlock.tool.deletePart.deleting": "Eliminando...",
   "messageBlock.tool.deletePart.title": "Eliminar esta salida de herramienta",
   "messageBlock.tool.deletePart.failed.title": "Error al eliminar",
@@ -71,17 +71,21 @@ export const messagingMessages = {
   "messageItem.speaker.you": "Tú",
   "messageItem.speaker.assistant": "Asistente",
   "messageItem.actions.revert": "Revertir",
-  "messageItem.actions.revertTitle": "Revertir a este mensaje",
+  "messageItem.actions.revertTitle": "Deshacer cambios hasta aqui",
   "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.deletingMessage": "Eliminando...",
+  "messageItem.actions.deleteMessageFailedTitle": "Error al eliminar",
+  "messageItem.actions.deleteMessageFailedMessage": "No se pudo eliminar el mensaje",
   "messageItem.status.queued": "EN COLA",
   "messageItem.status.generating": "Generando...",
   "messageItem.status.sending": "Enviando...",
   "messageItem.status.failedToSend": "No se pudo enviar el mensaje",
-  "messagePart.actions.delete": "Eliminar",
+  "messagePart.actions.delete": "Eliminar parte",
   "messagePart.actions.deleting": "Eliminando...",
   "messagePart.actions.deleteTitle": "Eliminar este elemento",
   "messagePart.actions.deleteFailedTitle": "Error al eliminar",

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

@@ -41,7 +41,7 @@ export const messagingMessages = {
   "messageBlock.tool.goToSession.label": "Aller à la session",
   "messageBlock.tool.goToSession.title": "Aller à la session",
   "messageBlock.tool.goToSession.unavailableTitle": "Session pas encore disponible",
-  "messageBlock.tool.deletePart.label": "Supprimer",
+  "messageBlock.tool.deletePart.label": "Supprimer la partie",
   "messageBlock.tool.deletePart.deleting": "Suppression...",
   "messageBlock.tool.deletePart.title": "Supprimer cette sortie d'outil",
   "messageBlock.tool.deletePart.failed.title": "Échec de suppression",
@@ -71,17 +71,21 @@ export const messagingMessages = {
   "messageItem.speaker.you": "Vous",
   "messageItem.speaker.assistant": "Assistant",
   "messageItem.actions.revert": "Revenir",
-  "messageItem.actions.revertTitle": "Revenir à ce message",
+  "messageItem.actions.revertTitle": "Annuler les changements jusqu'ici",
   "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.deletingMessage": "Suppression...",
+  "messageItem.actions.deleteMessageFailedTitle": "Échec de suppression",
+  "messageItem.actions.deleteMessageFailedMessage": "Impossible de supprimer le message",
   "messageItem.status.queued": "EN FILE",
   "messageItem.status.generating": "Génération...",
   "messageItem.status.sending": "Envoi...",
   "messageItem.status.failedToSend": "Échec de l'envoi du message",
-  "messagePart.actions.delete": "Supprimer",
+  "messagePart.actions.delete": "Supprimer la partie",
   "messagePart.actions.deleting": "Suppression...",
   "messagePart.actions.deleteTitle": "Supprimer cet élément",
   "messagePart.actions.deleteFailedTitle": "Échec de suppression",

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

@@ -41,7 +41,7 @@ export const messagingMessages = {
   "messageBlock.tool.goToSession.label": "セッションへ移動",
   "messageBlock.tool.goToSession.title": "セッションへ移動",
   "messageBlock.tool.goToSession.unavailableTitle": "セッションはまだ利用できません",
-  "messageBlock.tool.deletePart.label": "削除",
+  "messageBlock.tool.deletePart.label": "パートを削除",
   "messageBlock.tool.deletePart.deleting": "削除中...",
   "messageBlock.tool.deletePart.title": "このツール出力を削除",
   "messageBlock.tool.deletePart.failed.title": "削除に失敗しました",
@@ -71,17 +71,21 @@ 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.deletingMessage": "削除中...",
+  "messageItem.actions.deleteMessageFailedTitle": "削除に失敗しました",
+  "messageItem.actions.deleteMessageFailedMessage": "メッセージの削除に失敗しました",
   "messageItem.status.queued": "待機中",
   "messageItem.status.generating": "生成中...",
   "messageItem.status.sending": "送信中...",
   "messageItem.status.failedToSend": "メッセージの送信に失敗しました",
-  "messagePart.actions.delete": "削除",
+  "messagePart.actions.delete": "パートを削除",
   "messagePart.actions.deleting": "削除中...",
   "messagePart.actions.deleteTitle": "この項目を削除",
   "messagePart.actions.deleteFailedTitle": "削除に失敗しました",

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

@@ -41,7 +41,7 @@ export const messagingMessages = {
   "messageBlock.tool.goToSession.label": "Перейти к сессии",
   "messageBlock.tool.goToSession.title": "Перейти к сессии",
   "messageBlock.tool.goToSession.unavailableTitle": "Сессия пока недоступна",
-  "messageBlock.tool.deletePart.label": "Удалить",
+  "messageBlock.tool.deletePart.label": "Удалить часть",
   "messageBlock.tool.deletePart.deleting": "Удаление...",
   "messageBlock.tool.deletePart.title": "Удалить этот вывод инструмента",
   "messageBlock.tool.deletePart.failed.title": "Ошибка удаления",
@@ -71,17 +71,21 @@ 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.deletingMessage": "Удаление...",
+  "messageItem.actions.deleteMessageFailedTitle": "Ошибка удаления",
+  "messageItem.actions.deleteMessageFailedMessage": "Не удалось удалить сообщение",
   "messageItem.status.queued": "В ОЧЕРЕДИ",
   "messageItem.status.generating": "Генерация…",
   "messageItem.status.sending": "Отправка…",
   "messageItem.status.failedToSend": "Не удалось отправить сообщение",
-  "messagePart.actions.delete": "Удалить",
+  "messagePart.actions.delete": "Удалить часть",
   "messagePart.actions.deleting": "Удаление...",
   "messagePart.actions.deleteTitle": "Удалить этот элемент",
   "messagePart.actions.deleteFailedTitle": "Ошибка удаления",

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

@@ -41,7 +41,7 @@ export const messagingMessages = {
   "messageBlock.tool.goToSession.label": "前往会话",
   "messageBlock.tool.goToSession.title": "前往会话",
   "messageBlock.tool.goToSession.unavailableTitle": "会话尚不可用",
-  "messageBlock.tool.deletePart.label": "删除",
+  "messageBlock.tool.deletePart.label": "删除部分",
   "messageBlock.tool.deletePart.deleting": "正在删除...",
   "messageBlock.tool.deletePart.title": "删除此工具输出",
   "messageBlock.tool.deletePart.failed.title": "删除失败",
@@ -71,17 +71,21 @@ 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.deletingMessage": "正在删除...",
+  "messageItem.actions.deleteMessageFailedTitle": "删除失败",
+  "messageItem.actions.deleteMessageFailedMessage": "无法删除消息",
   "messageItem.status.queued": "排队中",
   "messageItem.status.generating": "正在生成...",
   "messageItem.status.sending": "正在发送...",
   "messageItem.status.failedToSend": "消息发送失败",
-  "messagePart.actions.delete": "删除",
+  "messagePart.actions.delete": "删除部分",
   "messagePart.actions.deleting": "正在删除...",
   "messagePart.actions.deleteTitle": "删除此项",
   "messagePart.actions.deleteFailedTitle": "删除失败",

packages/ui/src/lib/markdown.ts

@@ -127,17 +127,23 @@ async function ensureLanguages(content: string) {
   if (highlightSuppressed) {
     return
   }
-  // Parse code fences to extract language tokens
-  // Updated regex to capture optional language tokens and handle trailing annotations
-  const codeBlockRegex = /```[ \t]*([A-Za-z0-9_.+#-]+)?[^`]*?```/g
-  const foundLanguages = new Set<string>()
-  let match
 
-  while ((match = codeBlockRegex.exec(content)) !== null) {
+  // Extract code-fence language tokens via `marked` so we correctly handle code blocks
-    const langToken = match[1]
+  // that contain backticks (e.g. JS template literals). Regex-based fence scans tend
-    if (langToken && langToken.trim()) {
+  // to miss these and prevent languages from loading.
-      foundLanguages.add(langToken.trim())
+  const foundLanguages = new Set<string>()
-    }
+  try {
+    const tokens = marked.lexer(content) as any
+    marked.walkTokens(tokens, (token: any) => {
+      if (token?.type !== "code") return
+      const langToken = typeof token.lang === "string" ? token.lang : ""
+      if (langToken.trim()) {
+        foundLanguages.add(langToken.trim())
+      }
+    })
+  } catch {
+    // If tokenization fails for any reason, skip language preloading.
+    return
   }
 
   // Queue language loading tasks

packages/ui/src/stores/session-actions.ts

@@ -7,7 +7,7 @@ import { providers, sessions, withSession } from "./session-state"
 import { getDefaultModel, isModelValid } from "./session-models"
 import { updateSessionInfo } from "./message-v2/session-info"
 import { messageStoreBus } from "./message-v2/bus"
-import { removeMessagePartV2 } from "./message-v2/bridge"
+import { removeMessagePartV2, removeMessageV2 } from "./message-v2/bridge"
 import { getLogger } from "../lib/logger"
 import { requestData } from "../lib/opencode-api"
 
@@ -439,8 +439,33 @@ async function deleteMessagePart(instanceId: string, sessionId: string, messageI
   updateSessionInfo(instanceId, sessionId)
 }
 
+async function deleteMessage(instanceId: string, sessionId: string, messageId: string): Promise<void> {
+  if (!instanceId || !sessionId || !messageId) return
+  const instance = instances().get(instanceId)
+  if (!instance || !instance.client) {
+    throw new Error("Instance not ready")
+  }
+
+  const worktreeSlug = getWorktreeSlugForSession(instanceId, sessionId)
+  const client = getOrCreateWorktreeClient(instanceId, worktreeSlug)
+
+  // The SDK generator does not currently expose a typed method for deleting a message,
+  // but the API is available at DELETE /session/:sessionID/message/:messageID.
+  await requestData(
+    (client as any).client.delete({
+      url: `/session/${encodeURIComponent(sessionId)}/message/${encodeURIComponent(messageId)}`,
+    }),
+    "session.message.delete",
+  )
+
+  // Optimistic removal; SSE will also broadcast a message-removed event.
+  removeMessageV2(instanceId, messageId)
+  updateSessionInfo(instanceId, sessionId)
+}
+
 export {
   abortSession,
+  deleteMessage,
   deleteMessagePart,
   executeCustomCommand,
   renameSession,

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/delete-overlays.css";
 @import "./messaging/message-timeline.css";
 @import "./messaging/tool-call.css";
 @import "./messaging/log-view.css";
@@ -110,4 +111,3 @@
 .reasoning-label {
   font-weight: var(--font-weight-medium);
 }
-

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

@@ -0,0 +1,37 @@
+/* Hover overlays for destructive actions (delete part / delete message). */
+
+.message-stream-block[data-delete-message-hover="true"] {
+  position: relative;
+}
+
+.message-stream-block[data-delete-message-hover="true"]::before {
+  content: "";
+  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). */
+  z-index: 10;
+}
+
+.message-part-shell {
+  display: block;
+}
+
+.delete-hover-scope[data-delete-part-hover="true"] {
+  position: relative;
+}
+
+.delete-hover-scope[data-delete-part-hover="true"]::before {
+  content: "";
+  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. */
+  z-index: 10;
+}

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

@@ -87,6 +87,7 @@
   border-radius: 0;
   border: 1px solid var(--border-base);
   background-color: var(--surface-secondary);
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -98,6 +99,36 @@
   transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
+.message-timeline-segment[data-delete-hover="true"]::before {
+  content: "";
+  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;
+}
+
+/* Ensure delete hover is visible even on the active segment styling. */
+.message-timeline-segment[data-delete-hover="true"],
+.message-timeline-segment[data-delete-hover="true"]:hover,
+.message-timeline-segment[data-delete-hover="true"]:focus-visible,
+.message-timeline-segment-active[data-delete-hover="true"],
+.message-timeline-segment-active[data-delete-hover="true"]:hover,
+.message-timeline-segment-active[data-delete-hover="true"]:focus-visible {
+  /* Let the ::before overlay provide the highlight (matches stream behavior). */
+  background-color: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  transform: none !important;
+}
+
+.message-timeline-label {
+  position: relative;
+  z-index: 3;
+}
+
 .message-timeline-segment.message-timeline-segment-hidden {
   display: none !important;
 }

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

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

packages/ui/src/types/message.ts

@@ -1,4 +1,4 @@
-// SDK types
+// SDK v2 types
 import type {
   EventMessageUpdated as MessageUpdateEvent,
   EventMessageRemoved as MessageRemovedEvent,
@@ -6,7 +6,8 @@ import type {
   EventMessagePartRemoved as MessagePartRemovedEvent,
   Part as SDKPart,
   Message as SDKMessage,
-} from "@opencode-ai/sdk"
+  AssistantMessage as SDKAssistantMessageV2,
+} from "@opencode-ai/sdk/v2"
 
 import type { PermissionRequestLike } from "./permission"
 
@@ -17,7 +18,8 @@ export type {
   MessagePartUpdatedEvent,
   MessagePartRemovedEvent,
   SDKPart,
-  SDKMessage
+  SDKMessage,
+  SDKAssistantMessageV2,
 }
 
 // Server streaming event: append-only delta updates.