From 014d10c77188166b8a043bb57f0eb2e5e2b3afd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Flor=C3=AAncio?= <carlosmflorencio@gmail.com>
Date: Fri, 6 Feb 2026 23:53:58 +0000
Subject: [PATCH] feat: added message actions (#203)

---
 .../components/task/chat/message-renderer.tsx |  14 +-
 .../task/chat/messages/agent-status.tsx       |  50 +---
 .../task/chat/messages/chat-message.tsx       | 275 +++++++++++-------
 .../task/chat/messages/code-block.tsx         |  16 +-
 .../task/chat/messages/expandable-row.tsx     |   8 +-
 .../task/chat/messages/inline-code.tsx        |  24 +-
 .../task/chat/messages/message-actions.tsx    | 124 ++++++++
 .../task/chat/messages/tool-edit-message.tsx  |   4 +-
 .../task/chat/messages/turn-group-message.tsx |   6 +
 .../task/chat/virtualized-message-list.tsx    |  17 ++
 apps/web/hooks/use-copy-to-clipboard.ts       |  17 ++
 apps/web/hooks/use-message-navigation.ts      |  35 +++
 12 files changed, 409 insertions(+), 181 deletions(-)
 create mode 100644 apps/web/components/task/chat/messages/message-actions.tsx
 create mode 100644 apps/web/hooks/use-copy-to-clipboard.ts
 create mode 100644 apps/web/hooks/use-message-navigation.ts

diff --git a/apps/web/components/task/chat/message-renderer.tsx b/apps/web/components/task/chat/message-renderer.tsx
index 1598133159..6dd16d55c1 100644
--- a/apps/web/components/task/chat/message-renderer.tsx
+++ b/apps/web/components/task/chat/message-renderer.tsx
@@ -25,6 +25,8 @@ type AdapterContext = {
   worktreePath?: string;
   sessionId?: string;
   onOpenFile?: (path: string) => void;
+  allMessages?: Message[];
+  onScrollToMessage?: (messageId: string) => void;
 };
 
 type MessageAdapter = {
@@ -125,6 +127,8 @@ const adapters: MessageAdapter[] = [
             label="Task"
             className="bg-amber-500/10 text-foreground border-amber-500/30"
             showRichBlocks
+            allMessages={ctx.allMessages}
+            onScrollToMessage={ctx.onScrollToMessage}
           />
         );
       }
@@ -134,6 +138,8 @@ const adapters: MessageAdapter[] = [
             comment={comment}
             label="You"
             className="bg-primary/10 text-foreground border-primary/30"
+            allMessages={ctx.allMessages}
+            onScrollToMessage={ctx.onScrollToMessage}
           />
         );
       }
@@ -143,6 +149,8 @@ const adapters: MessageAdapter[] = [
           label="Agent"
           className="bg-muted/40 text-foreground border-border/60"
           showRichBlocks={comment.type === 'message' || comment.type === 'content' || !comment.type}
+          allMessages={ctx.allMessages}
+          onScrollToMessage={ctx.onScrollToMessage}
         />
       );
     },
@@ -158,6 +166,8 @@ type MessageRendererProps = {
   worktreePath?: string;
   sessionId?: string;
   onOpenFile?: (path: string) => void;
+  allMessages?: Message[];
+  onScrollToMessage?: (messageId: string) => void;
 };
 
 export const MessageRenderer = memo(function MessageRenderer({
@@ -169,8 +179,10 @@ export const MessageRenderer = memo(function MessageRenderer({
   worktreePath,
   sessionId,
   onOpenFile,
+  allMessages,
+  onScrollToMessage,
 }: MessageRendererProps) {
-  const ctx = { isTaskDescription, taskId, permissionsByToolCallId, childrenByParentToolCallId, worktreePath, sessionId, onOpenFile };
+  const ctx = { isTaskDescription, taskId, permissionsByToolCallId, childrenByParentToolCallId, worktreePath, sessionId, onOpenFile, allMessages, onScrollToMessage };
   const adapter = adapters.find((entry) => entry.matches(comment, ctx)) ?? adapters[adapters.length - 1];
   return adapter.render(comment, ctx);
 });
diff --git a/apps/web/components/task/chat/messages/agent-status.tsx b/apps/web/components/task/chat/messages/agent-status.tsx
index 35828dcea1..77eb2f20fd 100644
--- a/apps/web/components/task/chat/messages/agent-status.tsx
+++ b/apps/web/components/task/chat/messages/agent-status.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { useCallback, useMemo, useState, useEffect } from 'react';
-import { IconAlertCircle, IconAlertTriangle, IconCopy, IconCheck } from '@tabler/icons-react';
+import { useMemo, useState, useEffect } from 'react';
+import { IconAlertCircle, IconAlertTriangle } from '@tabler/icons-react';
 import type { Message, TaskSessionState } from '@/lib/types/http';
 import { useSessionTurn } from '@/hooks/domains/session/use-session-turn';
 import { useAppStore } from '@/components/state-provider';
@@ -109,33 +109,6 @@ function useRunningTimer(isRunning: boolean, turnStartedAt: string | null) {
   return { elapsedSeconds: displaySeconds, formatted };
 }
 
-function CopyButton({ content }: { content: string }) {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(content);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy:', err);
-    }
-  }, [content]);
-
-  return (
-    <button
-      onClick={handleCopy}
-      className="inline-flex items-center justify-center h-5 w-5 rounded hover:bg-muted/50 text-muted-foreground/60 hover:text-muted-foreground transition-colors"
-      title="Copy last response"
-    >
-      {copied ? (
-        <IconCheck className="h-3.5 w-3.5 text-emerald-500" />
-      ) : (
-        <IconCopy className="h-3.5 w-3.5" />
-      )}
-    </button>
-  );
-}
 
 export function AgentStatus({ sessionState, sessionId, messages = [] }: AgentStatusProps) {
   const { lastTurnDuration, isActive: isTurnActive } = useSessionTurn(sessionId);
@@ -156,16 +129,6 @@ export function AgentStatus({ sessionState, sessionId, messages = [] }: AgentSta
   const isError = config?.icon === 'error';
   const isWarning = config?.icon === 'warning';
 
-  // Get last agent message content for copy button
-  const lastAgentContent = useMemo(() => {
-    for (let i = messages.length - 1; i >= 0; i--) {
-      if (messages[i].author_type === 'agent' && messages[i].content) {
-        return messages[i].content;
-      }
-    }
-    return null;
-  }, [messages]);
-
   // Calculate duration from messages as fallback
   const fallbackDuration = useMemo(() => {
     if (lastTurnDuration) return null; // Don't need fallback
@@ -219,14 +182,13 @@ export function AgentStatus({ sessionState, sessionId, messages = [] }: AgentSta
     );
   }
 
-  // Completed/idle state - show duration and copy button if available
-  const showCompletedState = !isTurnActive && (displayDuration || lastAgentContent);
+  // Completed/idle state - show duration if available
+  const showCompletedState = !isTurnActive && displayDuration;
   if (showCompletedState) {
     return (
       <div className="flex items-center gap-2 py-2">
-        <span className="inline-flex items-center gap-2 text-xs text-muted-foreground">
-          {displayDuration && <span className="tabular-nums">{displayDuration}</span>}
-          {lastAgentContent && <CopyButton content={lastAgentContent} />}
+        <span className="inline-flex items-center gap-2 text-xs text-muted-foreground tabular-nums">
+          {displayDuration}
         </span>
       </div>
     );
diff --git a/apps/web/components/task/chat/messages/chat-message.tsx b/apps/web/components/task/chat/messages/chat-message.tsx
index 5b69b2a9fc..3ae02f84be 100644
--- a/apps/web/components/task/chat/messages/chat-message.tsx
+++ b/apps/web/components/task/chat/messages/chat-message.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { memo, isValidElement, type ReactNode } from 'react';
+import { memo, isValidElement, useState, type ReactNode } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
@@ -9,6 +9,8 @@ import type { Message } from '@/lib/types/http';
 import { RichBlocks } from '@/components/task/chat/messages/rich-blocks';
 import { InlineCode } from '@/components/task/chat/messages/inline-code';
 import { CodeBlock } from '@/components/task/chat/messages/code-block';
+import { MessageActions } from '@/components/task/chat/messages/message-actions';
+import { useMessageNavigation } from '@/hooks/use-message-navigation';
 
 /**
  * Recursively extracts text content from React children.
@@ -43,6 +45,8 @@ type ChatMessageProps = {
   label: string;
   className: string;
   showRichBlocks?: boolean;
+  allMessages?: Message[];
+  onScrollToMessage?: (messageId: string) => void;
 };
 
 // Regex to match @file references (file paths after @)
@@ -87,10 +91,30 @@ function renderContentWithFileRefs(content: string): React.ReactNode[] {
   return parts.length > 0 ? parts : [content];
 }
 
-export const ChatMessage = memo(function ChatMessage({ comment, label, className, showRichBlocks }: ChatMessageProps) {
+export const ChatMessage = memo(function ChatMessage({ comment, label, className, showRichBlocks, allMessages, onScrollToMessage }: ChatMessageProps) {
+  const [showRaw, setShowRaw] = useState(false);
   const isUser = comment.author_type === 'user';
   const isTaskDescription = label === 'Task';
 
+  // Navigation logic for user messages
+  const userNavigation = useMessageNavigation(
+    allMessages || [],
+    comment.id,
+    'user'
+  );
+
+  const handleNavigatePrev = () => {
+    if (userNavigation.previous && onScrollToMessage) {
+      onScrollToMessage(userNavigation.previous.id);
+    }
+  };
+
+  const handleNavigateNext = () => {
+    if (userNavigation.next && onScrollToMessage) {
+      onScrollToMessage(userNavigation.next.id);
+    }
+  };
+
   // Keep the old card-based layout for task descriptions (amber banner)
   if (isTaskDescription) {
     return (
@@ -121,7 +145,7 @@ export const ChatMessage = memo(function ChatMessage({ comment, label, className
 
     return (
       <div className="flex justify-end w-full overflow-hidden">
-        <div className="max-w-[85%] sm:max-w-[75%] md:max-w-2xl overflow-hidden">
+        <div className="max-w-[85%] sm:max-w-[75%] md:max-w-2xl overflow-hidden group">
           <div className="rounded-2xl bg-primary/30 px-4 py-2.5 text-xs overflow-hidden">
             {/* Display image attachments */}
             {hasAttachments && (
@@ -145,13 +169,32 @@ export const ChatMessage = memo(function ChatMessage({ comment, label, className
             )}
             {/* Display text content */}
             {hasContent ? (
-              <p className="whitespace-pre-wrap break-words overflow-wrap-anywhere">
-                {renderContentWithFileRefs(comment.content)}
-              </p>
+              showRaw ? (
+                <pre className="whitespace-pre-wrap font-mono text-xs">
+                  {comment.content}
+                </pre>
+              ) : (
+                <p className="whitespace-pre-wrap break-words overflow-wrap-anywhere">
+                  {renderContentWithFileRefs(comment.content)}
+                </p>
+              )
             ) : !hasAttachments ? (
               <p className="whitespace-pre-wrap break-words overflow-wrap-anywhere">(empty)</p>
             ) : null}
           </div>
+          <MessageActions
+            message={comment}
+            showCopy={true}
+            showTimestamp={true}
+            showRawToggle={true}
+            showNavigation={!!allMessages && allMessages.length > 0}
+            isRawView={showRaw}
+            onToggleRaw={() => setShowRaw(!showRaw)}
+            onNavigatePrev={handleNavigatePrev}
+            onNavigateNext={handleNavigateNext}
+            hasPrev={userNavigation.hasPrevious}
+            hasNext={userNavigation.hasNext}
+          />
         </div>
       </div>
     );
@@ -159,110 +202,130 @@ export const ChatMessage = memo(function ChatMessage({ comment, label, className
 
   // Agent message: icon on left, no card background
   return (
-    <div className="flex items-start gap-2 sm:gap-3 w-full">
+    <div className="flex items-start gap-2 sm:gap-3 w-full group">
 
       {/* Content */}
       <div className="flex-1 min-w-0 text-xs">
-        <div className="prose prose-sm dark:prose-invert max-w-none prose-p:my-4 prose-p:leading-relaxed prose-ul:my-4 prose-ul:list-disc prose-ul:pl-6 prose-ol:my-4 prose-ol:list-decimal prose-ol:pl-6 prose-li:my-1.5 prose-pre:my-5 prose-strong:text-foreground prose-strong:font-bold prose-headings:text-foreground prose-headings:font-bold">
-          <ReactMarkdown
-            remarkPlugins={[remarkGfm, remarkBreaks]}
-            components={{
-              code: ({ className, children }) => {
-                const content = getTextContent(children).replace(/\n$/, '');
-                const hasLanguage = className?.startsWith('language-');
-                const hasNewlines = content.includes('\n');
-
-                // Code block if it has a language specifier OR has multiple lines
-                if (hasLanguage || hasNewlines) {
-                  return <CodeBlock className={className}>{content}</CodeBlock>;
-                }
-
-                // Inline code (single backticks, single line)
-                return <InlineCode>{content}</InlineCode>;
-              },
-              ol: ({ children }) => (
-                <ol className="list-decimal pl-6 mb-2">
-                  {children}
-                </ol>
-              ),
-              ul: ({ children }) => (
-                <ul className="list-disc pl-6 mb-2">
-                  {children}
-                </ul>
-              ),
-              li: ({ children }) => (
-                <li className="my-0.5">
-                  {children}
-                </li>
-              ),
-              p: ({ children }) => (
-                <p className="leading-relaxed mb-1.5">
-                  {children}
-                </p>
-              ),
-              h1: ({ children }) => (
-                <p className="my-3 font-bold text-[13px]">
-                  {children}
-                </p>
-              ),
-              h2: ({ children }) => (
-                <p className="my-2 font-bold text-[13px]">
-                  {children}
-                </p>
-              ),
-              h3: ({ children }) => (
-                <p className="my-2 font-bold">
-                  {children}
-                </p>
-              ),
-              h4: ({ children }) => (
-                <p className="my-2 font-bold">
-                  {children}
-                </p>
-              ),
-              h5: ({ children }) => (
-                <p className="my-2 font-bold">
-                  {children}
-                </p>
-              ),
-              table: ({ children }) => (
-                <div className="my-3 overflow-x-auto">
-                  <table className="border-collapse border border-border rounded-lg overflow-hidden">
-                    {children}
-                  </table>
-                </div>
-              ),
-              thead: ({ children }) => (
-                <thead className="bg-muted/50">
-                  {children}
-                </thead>
-              ),
-              tbody: ({ children }) => (
-                <tbody className="divide-y divide-border">
-                  {children}
-                </tbody>
-              ),
-              tr: ({ children }) => (
-                <tr className="border-b border-border last:border-b-0 hover:bg-muted/50">
-                  {children}
-                </tr>
-              ),
-              th: ({ children }) => (
-                <th className="px-3 py-2 text-left text-xs font-semibold text-foreground border-r border-border last:border-r-0">
-                  {children}
-                </th>
-              ),
-              td: ({ children }) => (
-                <td className="px-3 py-2 text-xs text-muted-foreground border-r border-border last:border-r-0">
-                  {children}
-                </td>
-              ),
-            }}
-          >
+        {showRaw ? (
+          <pre className="whitespace-pre-wrap font-mono text-xs bg-muted/20 p-3 rounded-md">
             {comment.content || '(empty)'}
-          </ReactMarkdown>
-          {showRichBlocks ? <RichBlocks comment={comment} /> : null}
-        </div>
+          </pre>
+        ) : (
+          <div className="prose prose-sm dark:prose-invert max-w-none prose-p:my-4 prose-p:leading-relaxed prose-ul:my-4 prose-ul:list-disc prose-ul:pl-6 prose-ol:my-4 prose-ol:list-decimal prose-ol:pl-6 prose-li:my-1.5 prose-pre:my-5 prose-strong:text-foreground prose-strong:font-bold prose-headings:text-foreground prose-headings:font-bold">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm, remarkBreaks]}
+              components={{
+                code: ({ className, children }) => {
+                  const content = getTextContent(children).replace(/\n$/, '');
+                  const hasLanguage = className?.startsWith('language-');
+                  const hasNewlines = content.includes('\n');
+
+                  // Code block if it has a language specifier OR has multiple lines
+                  if (hasLanguage || hasNewlines) {
+                    return <CodeBlock className={className}>{content}</CodeBlock>;
+                  }
+
+                  // Inline code (single backticks, single line)
+                  return <InlineCode>{content}</InlineCode>;
+                },
+                ol: ({ children }) => (
+                  <ol className="list-decimal pl-6 mb-2">
+                    {children}
+                  </ol>
+                ),
+                ul: ({ children }) => (
+                  <ul className="list-disc pl-6 mb-2">
+                    {children}
+                  </ul>
+                ),
+                li: ({ children }) => (
+                  <li className="my-0.5">
+                    {children}
+                  </li>
+                ),
+                p: ({ children }) => (
+                  <p className="leading-relaxed mb-1.5">
+                    {children}
+                  </p>
+                ),
+                h1: ({ children }) => (
+                  <p className="my-3 font-bold text-sm">
+                    {children}
+                  </p>
+                ),
+                h2: ({ children }) => (
+                  <p className="my-2 font-bold text-sm">
+                    {children}
+                  </p>
+                ),
+                h3: ({ children }) => (
+                  <p className="my-2 font-bold text-sm">
+                    {children}
+                  </p>
+                ),
+                h4: ({ children }) => (
+                  <p className="my-2 font-bold">
+                    {children}
+                  </p>
+                ),
+                h5: ({ children }) => (
+                  <p className="my-2 font-bold">
+                    {children}
+                  </p>
+                ),
+                hr: ({ children }) => (
+                  <hr className="my-5">
+                    {children}
+                  </hr>
+                ),
+                table: ({ children }) => (
+                  <div className="my-3 overflow-x-auto">
+                    <table className="border-collapse border border-border rounded-lg overflow-hidden">
+                      {children}
+                    </table>
+                  </div>
+                ),
+                thead: ({ children }) => (
+                  <thead className="bg-muted/50">
+                    {children}
+                  </thead>
+                ),
+                tbody: ({ children }) => (
+                  <tbody className="divide-y divide-border">
+                    {children}
+                  </tbody>
+                ),
+                tr: ({ children }) => (
+                  <tr className="border-b border-border last:border-b-0 hover:bg-muted/50">
+                    {children}
+                  </tr>
+                ),
+                th: ({ children }) => (
+                  <th className="px-3 py-2 text-left text-xs font-semibold text-foreground border-r border-border last:border-r-0">
+                    {children}
+                  </th>
+                ),
+                td: ({ children }) => (
+                  <td className="px-3 py-2 text-xs text-muted-foreground border-r border-border last:border-r-0">
+                    {children}
+                  </td>
+                ),
+              }}
+            >
+              {comment.content || '(empty)'}
+            </ReactMarkdown>
+            {showRichBlocks ? <RichBlocks comment={comment} /> : null}
+          </div>
+        )}
+        <MessageActions
+          message={comment}
+          showCopy={true}
+          showTimestamp={true}
+          showRawToggle={true}
+          showNavigation={false}
+          isRawView={showRaw}
+          onToggleRaw={() => setShowRaw(!showRaw)}
+        />
       </div>
     </div>
   );
diff --git a/apps/web/components/task/chat/messages/code-block.tsx b/apps/web/components/task/chat/messages/code-block.tsx
index ec14775a15..0e97022304 100644
--- a/apps/web/components/task/chat/messages/code-block.tsx
+++ b/apps/web/components/task/chat/messages/code-block.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useState } from 'react';
 import { useTheme } from 'next-themes';
 import CodeMirror from '@uiw/react-codemirror';
 import { vscodeDark, vscodeLight } from '@uiw/codemirror-theme-vscode';
@@ -8,6 +7,7 @@ import { EditorView } from '@codemirror/view';
 import { IconCheck, IconCopy } from '@tabler/icons-react';
 import { cn } from '@/lib/utils';
 import { getCodeMirrorExtension } from '@/lib/languages';
+import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
 
 type CodeBlockProps = {
   children: React.ReactNode;
@@ -21,7 +21,7 @@ const getLanguageExtension = (language?: string) => {
 };
 
 export function CodeBlock({ children, className }: CodeBlockProps) {
-  const [copied, setCopied] = useState(false);
+  const { copied, copy } = useCopyToClipboard();
   const { theme, systemTheme } = useTheme();
   const effectiveTheme = theme === 'system' ? systemTheme : theme;
 
@@ -36,17 +36,11 @@ export function CodeBlock({ children, className }: CodeBlockProps) {
   });
 
   const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(code);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy:', err);
-    }
+    await copy(code);
   };
 
   return (
-    <div className="relative group my-4 w-fit max-w-full min-w-[50%]">
+    <div className="relative group/code-block my-4 w-fit max-w-full min-w-[50%]">
       {/* Copy button */}
       <button
         onClick={handleCopy}
@@ -55,7 +49,7 @@ export function CodeBlock({ children, className }: CodeBlockProps) {
           'p-1.5 rounded-md',
           'bg-white/10 hover:bg-white/20',
           'transition-all duration-200',
-          'opacity-0 group-hover:opacity-100',
+          'opacity-0 group-hover/code-block:opacity-100',
           'cursor-pointer',
         )}
         title="Copy code"
diff --git a/apps/web/components/task/chat/messages/expandable-row.tsx b/apps/web/components/task/chat/messages/expandable-row.tsx
index 5dc5c18877..bc3fea1a31 100644
--- a/apps/web/components/task/chat/messages/expandable-row.tsx
+++ b/apps/web/components/task/chat/messages/expandable-row.tsx
@@ -32,7 +32,7 @@ export const ExpandableRow = memo(function ExpandableRow({
   }, [hasExpandableContent, onToggle]);
 
   return (
-    <div className="w-full group">
+    <div className="w-full group/expandable">
       {/* Clickable header row */}
       <div
         className={cn(
@@ -46,16 +46,16 @@ export const ExpandableRow = memo(function ExpandableRow({
           <div
             className={cn(
               'absolute inset-0 transition-opacity',
-              hasExpandableContent && 'group-hover:opacity-0'
+              hasExpandableContent && 'group-hover/expandable:opacity-0'
             )}
           >
             {icon}
           </div>
           {hasExpandableContent &&
             (isExpanded ? (
-              <IconChevronDown className="h-4 w-4 text-muted-foreground absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity" />
+              <IconChevronDown className="h-4 w-4 text-muted-foreground absolute inset-0 opacity-0 group-hover/expandable:opacity-100 transition-opacity" />
             ) : (
-              <IconChevronRight className="h-4 w-4 text-muted-foreground absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity" />
+              <IconChevronRight className="h-4 w-4 text-muted-foreground absolute inset-0 opacity-0 group-hover/expandable:opacity-100 transition-opacity" />
             ))}
         </div>
 
diff --git a/apps/web/components/task/chat/messages/inline-code.tsx b/apps/web/components/task/chat/messages/inline-code.tsx
index 40cf5e581b..08b585bd13 100644
--- a/apps/web/components/task/chat/messages/inline-code.tsx
+++ b/apps/web/components/task/chat/messages/inline-code.tsx
@@ -2,33 +2,31 @@
 
 import { useState } from 'react';
 import { cn } from '@/lib/utils';
+import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
 
 type InlineCodeProps = {
   children: React.ReactNode;
 };
 
 export function InlineCode({ children }: InlineCodeProps) {
+  const { copy } = useCopyToClipboard();
   const [showTooltip, setShowTooltip] = useState(false);
   const [tooltipText, setTooltipText] = useState('Copy to clipboard');
 
   const handleClick = async () => {
     const text = String(children);
-    try {
-      await navigator.clipboard.writeText(text);
-      setTooltipText('Copied!');
-      setShowTooltip(true);
+    await copy(text);
+    setTooltipText('Copied!');
+    setShowTooltip(true);
 
-      setTimeout(() => {
-        setShowTooltip(false);
-        setTimeout(() => setTooltipText('Copy to clipboard'), 200);
-      }, 1500);
-    } catch (err) {
-      console.error('Failed to copy:', err);
-    }
+    setTimeout(() => {
+      setShowTooltip(false);
+      setTimeout(() => setTooltipText('Copy to clipboard'), 200);
+    }, 1500);
   };
 
   return (
-    <span className="relative inline-block group">
+    <span className="relative inline-block group/inline-code">
       <code
         onClick={handleClick}
         className={cn(
@@ -45,7 +43,7 @@ export function InlineCode({ children }: InlineCodeProps) {
           'absolute bottom-full left-1/2 -translate-x-1/2 mb-1',
           'px-2 py-1 text-xs text-white bg-gray-900 rounded whitespace-nowrap',
           'pointer-events-none transition-opacity duration-200',
-          'opacity-0 group-hover:opacity-100',
+          'opacity-0 group-hover/inline-code:opacity-100',
           showTooltip && 'opacity-100'
         )}
       >
diff --git a/apps/web/components/task/chat/messages/message-actions.tsx b/apps/web/components/task/chat/messages/message-actions.tsx
new file mode 100644
index 0000000000..5b4c83af09
--- /dev/null
+++ b/apps/web/components/task/chat/messages/message-actions.tsx
@@ -0,0 +1,124 @@
+'use client';
+
+import { IconCheck, IconCopy, IconCode, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
+import { cn } from '@/lib/utils';
+import { formatRelativeTime } from '@/lib/utils';
+import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
+import type { Message } from '@/lib/types/http';
+
+type MessageActionsProps = {
+  message: Message;
+  showCopy?: boolean;
+  showTimestamp?: boolean;
+  showRawToggle?: boolean;
+  showNavigation?: boolean;
+  isRawView?: boolean;
+  onToggleRaw?: () => void;
+  onNavigatePrev?: () => void;
+  onNavigateNext?: () => void;
+  hasPrev?: boolean;
+  hasNext?: boolean;
+};
+
+export function MessageActions({
+  message,
+  showCopy = true,
+  showTimestamp = true,
+  showRawToggle = true,
+  showNavigation = false,
+  isRawView = false,
+  onToggleRaw,
+  onNavigatePrev,
+  onNavigateNext,
+  hasPrev = false,
+  hasNext = false,
+}: MessageActionsProps) {
+  const { copied, copy } = useCopyToClipboard();
+
+  const handleCopy = async () => {
+    await copy(message.content);
+  };
+
+  return (
+    <div className="flex items-center gap-2 mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
+      {/* Copy button */}
+      {showCopy && (
+        <button
+          onClick={handleCopy}
+          className={cn(
+            'h-5 w-5 p-1',
+            'hover:bg-muted rounded',
+            'transition-colors duration-200',
+            copied && 'text-green-400',
+          )}
+          title="Copy message"
+          aria-label="Copy message to clipboard"
+        >
+          {copied ? (
+            <IconCheck className="h-full w-full" />
+          ) : (
+            <IconCopy className="h-full w-full" />
+          )}
+        </button>
+      )}
+
+      {/* Raw text toggle */}
+      {showRawToggle && onToggleRaw && (
+        <button
+          onClick={onToggleRaw}
+          className={cn(
+            'h-5 w-5 p-1',
+            'hover:bg-muted rounded',
+            'transition-colors duration-200',
+            isRawView && 'bg-muted text-foreground',
+          )}
+          title={isRawView ? 'Show formatted' : 'Show raw text'}
+          aria-label={isRawView ? 'Show formatted message' : 'Show raw text'}
+        >
+          <IconCode className="h-full w-full" />
+        </button>
+      )}
+
+      {/* Navigation buttons */}
+      {showNavigation && (
+        <>
+          <button
+            onClick={onNavigatePrev}
+            disabled={!hasPrev}
+            className={cn(
+              'h-5 w-5 p-1',
+              'hover:bg-muted rounded',
+              'transition-colors duration-200',
+              'disabled:opacity-30 disabled:cursor-not-allowed',
+            )}
+            title="Previous message"
+            aria-label="Go to previous message"
+          >
+            <IconChevronLeft className="h-full w-full" />
+          </button>
+          <button
+            onClick={onNavigateNext}
+            disabled={!hasNext}
+            className={cn(
+              'h-5 w-5 p-1',
+              'hover:bg-muted rounded',
+              'transition-colors duration-200',
+              'disabled:opacity-30 disabled:cursor-not-allowed',
+            )}
+            title="Next message"
+            aria-label="Go to next message"
+          >
+            <IconChevronRight className="h-full w-full" />
+          </button>
+        </>
+      )}
+
+      {/* Timestamp */}
+      {showTimestamp && (
+        <span className="text-[10px] text-muted-foreground/60 font-mono">
+          {formatRelativeTime(message.created_at)}
+        </span>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/components/task/chat/messages/tool-edit-message.tsx b/apps/web/components/task/chat/messages/tool-edit-message.tsx
index 52ed5ce24a..d7cf977f16 100644
--- a/apps/web/components/task/chat/messages/tool-edit-message.tsx
+++ b/apps/web/components/task/chat/messages/tool-edit-message.tsx
@@ -121,7 +121,7 @@ export const ToolEditMessage = memo(function ToolEditMessage({ comment, worktree
                 e.stopPropagation();
                 onOpenFile(filePath);
               }}
-              className="opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-foreground shrink-0 cursor-pointer"
+              className="opacity-0 group-hover/expandable:opacity-100 transition-opacity text-muted-foreground hover:text-foreground shrink-0 cursor-pointer"
               title="Open file"
             >
               <IconExternalLink className="h-3.5 w-3.5" />
@@ -131,7 +131,7 @@ export const ToolEditMessage = memo(function ToolEditMessage({ comment, worktree
             <button
               type="button"
               onClick={handleCopyPath}
-              className="opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-foreground shrink-0 cursor-pointer"
+              className="opacity-0 group-hover/expandable:opacity-100 transition-opacity text-muted-foreground hover:text-foreground shrink-0 cursor-pointer"
               title={copied ? 'Copied!' : 'Copy path'}
             >
               {copied ? (
diff --git a/apps/web/components/task/chat/messages/turn-group-message.tsx b/apps/web/components/task/chat/messages/turn-group-message.tsx
index a46b9349cc..959200d440 100644
--- a/apps/web/components/task/chat/messages/turn-group-message.tsx
+++ b/apps/web/components/task/chat/messages/turn-group-message.tsx
@@ -21,6 +21,8 @@ type TurnGroupMessageProps = {
   isLastGroup?: boolean;
   /** Whether the turn is still active (agent is running) */
   isTurnActive?: boolean;
+  allMessages?: Message[];
+  onScrollToMessage?: (messageId: string) => void;
 };
 
 function countMessageTypes(messages: Message[]): { toolCalls: number; subagents: number } {
@@ -124,6 +126,8 @@ export const TurnGroupMessage = memo(function TurnGroupMessage({
   onOpenFile,
   isLastGroup = false,
   isTurnActive = false,
+  allMessages,
+  onScrollToMessage,
 }: TurnGroupMessageProps) {
   // Check if any tool in the group is still running
   const isGroupRunning = hasRunningTool(group.messages);
@@ -187,6 +191,8 @@ export const TurnGroupMessage = memo(function TurnGroupMessage({
               worktreePath={worktreePath}
               sessionId={sessionId ?? undefined}
               onOpenFile={onOpenFile}
+              allMessages={allMessages}
+              onScrollToMessage={onScrollToMessage}
             />
           ))}
         </div>
diff --git a/apps/web/components/task/chat/virtualized-message-list.tsx b/apps/web/components/task/chat/virtualized-message-list.tsx
index 35eea7e97e..ae91603959 100644
--- a/apps/web/components/task/chat/virtualized-message-list.tsx
+++ b/apps/web/components/task/chat/virtualized-message-list.tsx
@@ -55,6 +55,19 @@ export const VirtualizedMessageList = memo(function VirtualizedMessageList({
     overscan: 6,
   });
 
+  // Scroll to a specific message by ID
+  const handleScrollToMessage = useCallback((messageId: string) => {
+    const index = items.findIndex(item => {
+      if (item.type === 'turn_group') {
+        return item.messages.some(msg => msg.id === messageId);
+      }
+      return item.message?.id === messageId;
+    });
+    if (index >= 0) {
+      virtualizer.scrollToIndex(index, { align: 'center' });
+    }
+  }, [items, virtualizer]);
+
   // Use ref to track loading state to avoid recreating the scroll handler
   const loadingRef = useRef({ hasMore, isLoadingMore });
   loadingRef.current = { hasMore, isLoadingMore };
@@ -182,6 +195,8 @@ export const VirtualizedMessageList = memo(function VirtualizedMessageList({
                       onOpenFile={onOpenFile}
                       isLastGroup={item.id === lastTurnGroupId}
                       isTurnActive={isRunning}
+                      allMessages={messages}
+                      onScrollToMessage={handleScrollToMessage}
                     />
                   ) : (
                     <MessageRenderer
@@ -193,6 +208,8 @@ export const VirtualizedMessageList = memo(function VirtualizedMessageList({
                       worktreePath={worktreePath}
                       sessionId={sessionId ?? undefined}
                       onOpenFile={onOpenFile}
+                      allMessages={messages}
+                      onScrollToMessage={handleScrollToMessage}
                     />
                   )}
                 </div>
diff --git a/apps/web/hooks/use-copy-to-clipboard.ts b/apps/web/hooks/use-copy-to-clipboard.ts
new file mode 100644
index 0000000000..417ea3fa23
--- /dev/null
+++ b/apps/web/hooks/use-copy-to-clipboard.ts
@@ -0,0 +1,17 @@
+import { useState, useCallback } from 'react';
+
+export function useCopyToClipboard() {
+  const [copied, setCopied] = useState(false);
+
+  const copy = useCallback(async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  }, []);
+
+  return { copied, copy };
+}
diff --git a/apps/web/hooks/use-message-navigation.ts b/apps/web/hooks/use-message-navigation.ts
new file mode 100644
index 0000000000..1b763654e3
--- /dev/null
+++ b/apps/web/hooks/use-message-navigation.ts
@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import type { Message } from '@/lib/types/http';
+
+export function useMessageNavigation(
+  messages: Message[],
+  currentMessageId: string,
+  filterType: 'user' | 'agent'
+) {
+  const currentIndex = useMemo(() => {
+    return messages.findIndex(msg => msg.id === currentMessageId);
+  }, [messages, currentMessageId]);
+
+  const filteredIndices = useMemo(() => {
+    return messages
+      .map((msg, idx) => (msg.author_type === filterType ? idx : -1))
+      .filter(idx => idx !== -1);
+  }, [messages, filterType]);
+
+  const previous = useMemo(() => {
+    const validPrev = filteredIndices.filter(idx => idx < currentIndex);
+    return validPrev.length > 0 ? messages[validPrev[validPrev.length - 1]] : null;
+  }, [filteredIndices, currentIndex, messages]);
+
+  const next = useMemo(() => {
+    const validNext = filteredIndices.filter(idx => idx > currentIndex);
+    return validNext.length > 0 ? messages[validNext[0]] : null;
+  }, [filteredIndices, currentIndex, messages]);
+
+  return {
+    hasPrevious: previous !== null,
+    hasNext: next !== null,
+    previous,
+    next,
+  };
+}