Improve messages layouts on narrow screens (#438)

## Summary
- Tighten thinking block action spacing so it matches adjacent action
groups.
- Collapse secondary message, thinking, and tool-call actions into a
Kobalte overflow menu only at the session-center narrow width stop.
- Keep single-action cases inline, preserve primary/status controls,
mirror delete hover overlays from menu items, and square the overflow
menu styling.

## Validation
- npm run typecheck --workspace @codenomad/ui

Author: shantur

packages/ui/src/components/action-overflow-menu.tsx

@@ -0,0 +1,85 @@
+import { DropdownMenu } from "@kobalte/core/dropdown-menu"
+import { For, Show, createSignal, onCleanup, type JSXElement } from "solid-js"
+import { MoreHorizontal } from "lucide-solid"
+
+export interface ActionOverflowMenuItem {
+  key: string
+  label: string
+  icon?: JSXElement
+  disabled?: boolean
+  destructive?: boolean
+  onSelect: () => void | Promise<void>
+  onMouseEnter?: () => void
+  onMouseLeave?: () => void
+}
+
+interface ActionOverflowMenuProps {
+  items: ActionOverflowMenuItem[]
+  label: string
+  triggerClass?: string
+  minItems?: number
+}
+
+export default function ActionOverflowMenu(props: ActionOverflowMenuProps) {
+  const [hoveredItem, setHoveredItem] = createSignal<ActionOverflowMenuItem | null>(null)
+  const enabledItems = () => props.items.filter((item) => !item.disabled)
+  const hasItems = () => props.items.length >= (props.minItems ?? 1)
+  const clearHoveredItem = () => {
+    const item = hoveredItem()
+    if (!item) return
+    item.onMouseLeave?.()
+    setHoveredItem(null)
+  }
+
+  onCleanup(clearHoveredItem)
+
+  return (
+    <Show when={hasItems()}>
+      <DropdownMenu placement="bottom-end" gutter={4} onOpenChange={(open) => { if (!open) clearHoveredItem() }}>
+        <DropdownMenu.Trigger
+          class={`action-overflow-trigger ${props.triggerClass ?? ""}`.trim()}
+          aria-label={props.label}
+          title={props.label}
+          disabled={enabledItems().length === 0}
+        >
+          <MoreHorizontal class="w-3.5 h-3.5" aria-hidden="true" />
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content class="action-overflow-content">
+            <For each={props.items}>
+              {(item) => (
+                <DropdownMenu.Item
+                  class="action-overflow-item"
+                  data-destructive={item.destructive ? "true" : undefined}
+                  disabled={item.disabled}
+                  onPointerEnter={() => {
+                    if (item.disabled) return
+                    const previous = hoveredItem()
+                    if (previous !== item) previous?.onMouseLeave?.()
+                    setHoveredItem(item)
+                    item.onMouseEnter?.()
+                  }}
+                  onPointerLeave={() => {
+                    if (item.disabled) return
+                    if (hoveredItem() === item) setHoveredItem(null)
+                    item.onMouseLeave?.()
+                  }}
+                  onSelect={() => {
+                    clearHoveredItem()
+                    void item.onSelect()
+                  }}
+                >
+                  <Show when={item.icon} fallback={<span class="action-overflow-item-icon" aria-hidden="true" />}>
+                    {(icon) => <span class="action-overflow-item-icon" aria-hidden="true">{icon()}</span>}
+                  </Show>
+                  <span class="action-overflow-item-label">{item.label}</span>
+                </DropdownMenu.Item>
+              )}
+            </For>
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu>
+    </Show>
+  )
+}

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

@@ -1,5 +1,5 @@
 import { For, Index, Match, Show, Suspense, Switch, createEffect, createMemo, createSignal, lazy, onCleanup, untrack, type Accessor } from "solid-js"
-import { ChevronsDownUp, ChevronsUpDown, ExternalLink, FoldVertical, ListStart, Trash } from "lucide-solid"
+import { ChevronsDownUp, ChevronsUpDown, ExternalLink, FoldVertical, ListStart, Trash, Volume2 } from "lucide-solid"
 import MessageItem from "./message-item"
 import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
 import type { ClientPart, MessageInfo } from "../types/message"
@@ -18,6 +18,7 @@ import { useSpeech } from "../lib/hooks/use-speech"
 import SpeechActionButton from "./speech-action-button"
 import { createFollowScroll } from "../lib/follow-scroll"
 import type { SessionSearchMatch } from "../lib/session-search"
+import ActionOverflowMenu, { type ActionOverflowMenuItem } from "./action-overflow-menu"
 
 function DeleteUpToIcon() {
   return (
@@ -486,6 +487,12 @@ function ToolCallItem(props: ToolCallItemProps) {
     navigateToTaskSession(location)
   }
 
+  const goToTaskSession = () => {
+    const location = taskLocation()
+    if (!location) return
+    navigateToTaskSession(location)
+  }
+
   const handleDeleteMessage = async (event: MouseEvent) => {
     event.preventDefault()
     event.stopPropagation()
@@ -507,9 +514,7 @@ function ToolCallItem(props: ToolCallItemProps) {
     }
   }
 
-  const handleDeleteUpTo = async (event: MouseEvent) => {
-    event.preventDefault()
-    event.stopPropagation()
+  const deleteUpTo = async () => {
     if (!props.showDeleteMessage) return
     if (!props.onDeleteMessagesUpTo) return
     if (deletingUpTo()) return
@@ -522,11 +527,72 @@ function ToolCallItem(props: ToolCallItemProps) {
     }
   }
 
+  const handleDeleteUpTo = async (event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    await deleteUpTo()
+  }
+
+  const actionMenuItems = (): ActionOverflowMenuItem[] => {
+    const items: ActionOverflowMenuItem[] = []
+
+    if (taskSessionId()) {
+      items.push({
+        key: "go-to-session",
+        label: t("messageBlock.tool.goToSession.label"),
+        icon: <ExternalLink class="w-3.5 h-3.5" aria-hidden="true" />,
+        disabled: !taskLocation(),
+        onSelect: goToTaskSession,
+      })
+    }
+
+    if (props.showDeleteMessage) {
+      items.push(
+        {
+          key: "delete-up-to",
+          label: t("messageItem.actions.deleteMessagesUpTo"),
+          icon: <DeleteUpToIcon />,
+          disabled: !props.onDeleteMessagesUpTo || deletingUpTo(),
+          destructive: true,
+          onMouseEnter: () => props.onDeleteHoverChange?.({ kind: "deleteUpTo", messageId: props.messageId }),
+          onMouseLeave: () => props.onDeleteHoverChange?.({ kind: "none" }),
+          onSelect: deleteUpTo,
+        },
+        {
+          key: "delete-message",
+          label: deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage"),
+          icon: <Trash class="w-3.5 h-3.5" aria-hidden="true" />,
+          disabled: deletingMessage(),
+          destructive: true,
+          onMouseEnter: () => props.onDeleteHoverChange?.({ kind: "message", messageId: props.messageId }),
+          onMouseLeave: () => props.onDeleteHoverChange?.({ kind: "none" }),
+          onSelect: async () => {
+            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 items
+  }
+
   return (
     <Show when={toolPart()}>
       {(resolvedToolPart) => (
         <div class="delete-hover-scope" data-delete-part-hover={isDeleteOverlayActive() ? "true" : undefined}>
-          <div class="tool-call-header-label">
+          <div class="tool-call-header-label" data-action-overflow={actionMenuItems().length > 1 ? "true" : undefined}>
             <div class="tool-call-header-meta">
               <Show when={props.showDeleteMessage}>
                 <input
@@ -551,7 +617,7 @@ function ToolCallItem(props: ToolCallItemProps) {
               <span class="tool-name">{toolName() || t("messageBlock.tool.unknown")}</span>
             </div>
 
-            <div class="flex items-center gap-0">
+            <div class="tool-call-header-actions flex items-center gap-0">
               <Show when={taskSessionId()}>
                 <button
                   class="tool-call-header-button"
@@ -593,6 +659,12 @@ function ToolCallItem(props: ToolCallItemProps) {
                 </button>
               </Show>
             </div>
+            <ActionOverflowMenu
+              items={actionMenuItems()}
+              label={t("messageItem.actions.more")}
+              triggerClass="tool-call-header-button"
+              minItems={2}
+            />
           </div>
 
           <Suspense fallback={<ToolCallFallback />}>
@@ -1582,6 +1654,73 @@ function ReasoningCard(props: ReasoningCardProps) {
 
   const canDeleteMessage = () => Boolean(props.showDeleteMessage) && !deletingMessage()
 
+  const deleteUpTo = async () => {
+    if (!props.showDeleteMessage) return
+    if (!props.onDeleteMessagesUpTo) return
+    if (deletingUpTo()) return
+
+    setDeletingUpTo(true)
+    try {
+      await props.onDeleteMessagesUpTo(props.messageId)
+    } finally {
+      setDeletingUpTo(false)
+    }
+  }
+
+  const actionMenuItems = (): ActionOverflowMenuItem[] => {
+    const items: ActionOverflowMenuItem[] = []
+
+    if (canSpeakReasoning()) {
+      items.push({
+        key: "speak",
+        label: speech.buttonTitle(),
+        icon: <Volume2 class="w-3.5 h-3.5" aria-hidden="true" />,
+        onSelect: () => void speech.toggle(),
+      })
+    }
+
+    if (props.showDeleteMessage) {
+      items.push(
+        {
+          key: "delete-up-to",
+          label: t("messageItem.actions.deleteMessagesUpTo"),
+          icon: <DeleteUpToIcon />,
+          disabled: !props.onDeleteMessagesUpTo || deletingUpTo(),
+          destructive: true,
+          onMouseEnter: () => props.onDeleteHoverChange?.({ kind: "deleteUpTo", messageId: props.messageId }),
+          onMouseLeave: () => props.onDeleteHoverChange?.({ kind: "none" }),
+          onSelect: deleteUpTo,
+        },
+        {
+          key: "delete-message",
+          label: deletingMessage() ? t("messageItem.actions.deletingMessage") : t("messageItem.actions.deleteMessage"),
+          icon: <Trash class="w-3.5 h-3.5" aria-hidden="true" />,
+          disabled: !canDeleteMessage(),
+          destructive: true,
+          onMouseEnter: () => props.onDeleteHoverChange?.({ kind: "message", messageId: props.messageId }),
+          onMouseLeave: () => props.onDeleteHoverChange?.({ kind: "none" }),
+          onSelect: async () => {
+            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 items
+  }
+
   const handleDeleteMessage = async (event: MouseEvent) => {
     event.preventDefault()
     event.stopPropagation()
@@ -1604,16 +1743,7 @@ 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)
-    }
+    await deleteUpTo()
   }
 
   return (
@@ -1654,7 +1784,7 @@ function ReasoningCard(props: ReasoningCardProps) {
           </span>
         </button>
 
-        <div class="message-reasoning-actions">
+        <div class="message-reasoning-actions" data-action-overflow={actionMenuItems().length > 1 ? "true" : undefined}>
           <Show when={canSpeakReasoning()}>
             <SpeechActionButton
               class="message-action-button"
@@ -1671,7 +1801,7 @@ function ReasoningCard(props: ReasoningCardProps) {
 
           <button
             type="button"
-            class="message-action-button"
+            class="message-action-button message-reasoning-primary-action"
             onClick={(event) => {
               event.preventDefault()
               event.stopPropagation()
@@ -1713,6 +1843,13 @@ function ReasoningCard(props: ReasoningCardProps) {
             </button>
           </Show>
 
+          <ActionOverflowMenu
+            items={actionMenuItems()}
+            label={t("messageItem.actions.more")}
+            triggerClass="message-action-button"
+            minItems={2}
+          />
+
           <span class="message-reasoning-time">{timestamp()}</span>
         </div>
       </div>