@hienlh/ppm 0.23.12 → 0.23.14

package/src/web/components/chat/message-input.tsx

@@ -23,6 +23,8 @@ import { fetchSlashItems, getCachedSlashItems, subscribeSlashItems, SLASH_ITEMS_
 import { replaceSlashQuery, slashQueryBefore, stripSlashQuery } from "@/lib/slash-trigger";
 import type { FileNode } from "../../../types/project";
 import { useFileStore } from "@/stores/file-store";
+import { ReplyCard } from "./reply-card";
+import type { ReplyReference } from "../../../shared/chat-reply";
 import { PromptCacheChip } from "./prompt-cache-chip";
 import type { PromptCacheState } from "../../../shared/prompt-cache-idle";
 
@@ -75,10 +77,16 @@ export interface ChatAttachment {
 export type MessagePriority = 'now' | 'next' | 'later';
 
 interface MessageInputProps {
+  pendingContexts?: Array<{ text: string; label?: string }>;
+  onContextsConsumed?: () => void;
   draftReady?: boolean;
+  replyTo?: ReplyReference | null;
+  onCancelReply?: () => void;
+  /** Explicit reply selection/cancel also saves the current DOM text and attachments. */
+  replyChangeSignal?: number;
   /** Tab id of the owning chat tab — addresses "Send to Chat" at this tab only. */
   tabId?: string;
-  onSend: (content: string, attachments: ChatAttachment[], priority?: MessagePriority) => void;
+  onSend: (content: string, attachments: ChatAttachment[], priority?: MessagePriority) => boolean | void;
   isStreaming?: boolean;
   onCancel?: () => void;
   disabled?: boolean;
@@ -103,6 +111,7 @@ interface MessageInputProps {
   onDisambiguate?: (matches: FileNode[]) => void;
   /** Pre-fill input value (e.g. from command palette "Ask AI") */
   initialValue?: string;
+  initialAttachments?: Array<{ name: string; path: string }>;
   /** Bumping this counter clears the textarea (e.g. parent cancels an edit). */
   clearSignal?: number;
   /**
@@ -111,7 +120,7 @@ interface MessageInputProps {
    * reacts to a *changed* value, and the text of a failed send is often exactly the
    * draft the composer was already prefilled with.
    */
-  restore?: { text: string; nonce: number } | null;
+  restore?: { text: string; nonce: number; replace?: boolean } | null;
   /** Called on content change for draft auto-save */
   onContentChange?: (content: string, attachments?: Array<{ name: string; path: string }>) => void;
   /** Returns this session's user messages, oldest first — powers ArrowUp/Down recall */
@@ -147,6 +156,11 @@ interface MessageInputProps {
 
 export const MessageInput = memo(function MessageInput({
   tabId,
+  pendingContexts,
+  onContextsConsumed,
+  replyTo,
+  onCancelReply,
+  replyChangeSignal,
   draftReady = true,
   onSend,
   isStreaming,
@@ -163,6 +177,7 @@ export const MessageInput = memo(function MessageInput({
   externalPaths,
   onExternalPathsConsumed,
   initialValue,
+  initialAttachments,
   clearSignal,
   restore,
   onContentChange,
@@ -243,6 +258,8 @@ export const MessageInput = memo(function MessageInput({
       const { agent, text } = toComposerDraft(step.text);
       setAgentTag(agent);
       writeTextareas(text);
+      if (replyTo) onCancelReply?.();
+      onContentChange?.(text, attachments.filter((a) => a.status === "ready" && a.serverPath).map((a) => ({ name: a.name, path: a.serverPath! })));
       const ta = getVisibleTextarea();
       if (!ta) return true;
       ta.focus();
@@ -253,7 +270,7 @@ export const MessageInput = memo(function MessageInput({
       }
       return true;
     },
-    [getUserHistory, writeTextareas, getVisibleTextarea],
+    [getUserHistory, writeTextareas, getVisibleTextarea, replyTo, onCancelReply, onContentChange, attachments],
   );
 
   // Voice input. Two engines behind the same button: the browser's own
@@ -322,7 +339,7 @@ export const MessageInput = memo(function MessageInput({
       if (targetTabId ? targetTabId !== tabId : !ownsGlobalShortcut(getVisibleTextarea())) return;
       // Sent as-is only into an idle, empty composer: anything the user has typed or
       // attached is theirs, and the text joins it as a chip for them to send instead.
-      const send = !!autoSend && !!targetTabId && !disabled && !isStreaming && !valueRef.current.trim() && attachments.length === 0;
+      const send = !!autoSend && !!targetTabId && !disabled && !isStreaming && !replyTo && !valueRef.current.trim() && attachments.length === 0;
       window.dispatchEvent(new CustomEvent<SendToChatAck>(SEND_TO_CHAT_ACK_EVENT, { detail: { sent: send } }));
       if (send) {
         onSend(text, []);
@@ -341,7 +358,33 @@ export const MessageInput = memo(function MessageInput({
     };
     window.addEventListener(SEND_TO_CHAT_EVENT, handler);
     return () => window.removeEventListener(SEND_TO_CHAT_EVENT, handler);
-  }, [getVisibleTextarea, tabId, disabled, isStreaming, attachments.length, onSend]);
+  }, [getVisibleTextarea, tabId, disabled, isStreaming, attachments.length, onSend, replyTo]);
+
+  const consumedContextsRef = useRef<MessageInputProps["pendingContexts"]>(undefined);
+  useEffect(() => {
+    if (!pendingContexts?.length || consumedContextsRef.current === pendingContexts) return;
+    consumedContextsRef.current = pendingContexts;
+    setAttachments((previous) => [...previous, ...pendingContexts.map(({ text, label }) => ({
+      id: randomId(), name: label ?? "Selected code", file: new File([], "selected-code.txt"),
+      isImage: false, textContent: text, status: "ready" as const,
+    }))]);
+    onContextsConsumed?.();
+    getVisibleTextarea()?.focus();
+  }, [pendingContexts, onContextsConsumed, getVisibleTextarea]);
+
+  const draftAttachmentsApplied = useRef(false);
+  useEffect(() => {
+    if (!draftReady || draftAttachmentsApplied.current || initialAttachments === undefined) return;
+    draftAttachmentsApplied.current = true;
+    if (!initialAttachments?.length) return;
+    const restored: ChatAttachment[] = initialAttachments.map((attachment) => ({
+      id: randomId(), name: attachment.name, file: new File([], attachment.name),
+      serverPath: attachment.path, isImage: isImageFile(new File([], attachment.name)), status: "ready",
+    }));
+    // Joined, never skipped: code added to a chat that had not mounted yet arrives before its
+    // draft does, and a draft skipped here is saved back without its attachments.
+    setAttachments((previous) => [...restored, ...previous]);
+  }, [draftReady, initialAttachments]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Apply initialValue when it changes (e.g. "Ask AI" from command palette).
   // A restored draft can land after the input is already on screen, so never
@@ -379,7 +422,13 @@ export const MessageInput = memo(function MessageInput({
 
   // Parent-driven clear (e.g. cancelling an edit) — skip initial mount (0).
   useEffect(() => {
-    if (clearSignal) writeTextareas("");
+    if (clearSignal) {
+      writeTextareas("");
+      draftAttachmentsApplied.current = false;
+      for (const attachment of attachments) if (attachment.previewUrl) URL.revokeObjectURL(attachment.previewUrl);
+      setAttachments([]);
+      setAgentTag(null);
+    }
   }, [clearSignal]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // An unsent message coming back. The send can fail up to ~45 s after Enter, by which
@@ -389,7 +438,7 @@ export const MessageInput = memo(function MessageInput({
   useEffect(() => {
     if (!restore?.nonce || !restore.text) return;
     const current = valueRef.current;
-    const next = current.trim() ? `${current}\n\n${restore.text}` : restore.text;
+    const next = !restore.replace && current.trim() ? `${current}\n\n${restore.text}` : restore.text;
     writeTextareas(next);
     onContentChange?.(next, attachments.filter((a) => a.status === "ready" && a.serverPath).map((a) => ({ name: a.name, path: a.serverPath! })));
     const timer = setTimeout(() => {
@@ -399,6 +448,12 @@ export const MessageInput = memo(function MessageInput({
     return () => clearTimeout(timer);
   }, [restore?.nonce]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  useEffect(() => {
+    if (!replyChangeSignal) return;
+    onContentChange?.(valueRef.current, attachments.filter((a) => a.status === "ready" && a.serverPath).map((a) => ({ name: a.name, path: a.serverPath! })));
+    getVisibleTextarea()?.focus();
+  }, [replyChangeSignal]); // eslint-disable-line react-hooks/exhaustive-deps
+
   // Auto-focus on mount when requested
   useEffect(() => {
     if (!autoFocus) return;
@@ -727,7 +782,7 @@ export const MessageInput = memo(function MessageInput({
       if (useWhisper) whisperVoice.cancel();
       else voice.stop();
     }
-    onSend(content, readyAttachments, isStreaming ? priority : undefined);
+    if (onSend(content, readyAttachments, isStreaming ? priority : undefined) === false) return;
     writeTextareas("");
     // Revoke preview URLs
     for (const att of attachments) {
@@ -946,6 +1001,9 @@ export const MessageInput = memo(function MessageInput({
           getVisibleTextarea()?.focus();
         }}
       >
+        {replyTo && <div className="px-2 md:px-4 pt-2">
+          <ReplyCard reply={replyTo} preview onCancel={onCancelReply} />
+        </div>}
         {/* Selected agent chip — composed into a delegation prompt on send */}
         {agentTag && (
           <div className="px-2 md:px-4 pt-2">
@@ -1066,9 +1124,11 @@ export const MessageInput = memo(function MessageInput({
         {/* Desktop: chips row (permission + model) then a single input row
             (paperclip | textarea | mic | send) — design PPMWorkspace composer. */}
         <div className="hidden md:block">
-          <div className="flex flex-wrap items-center gap-1.5 px-2.5 pt-2.5">
+          {/* Wraps on a wide chat; on a narrow one (`@max-[420px]/chat`) stays one line, the
+              permission chip down to its icon and the model chip giving way first. */}
+          <div className="flex flex-wrap items-center gap-1.5 px-2.5 pt-2.5 @max-[420px]/chat:flex-nowrap">
             {/* Mode indicator chip */}
-            {!configurationPending && <div className="relative">
+            {!configurationPending && <div className="relative shrink-0">
               <ModeChip
                 mode={permissionMode ?? "bypassPermissions"}
                 onClick={() => setModeSelectorOpen((v) => !v)}
@@ -1179,11 +1239,12 @@ function ModeChip({ mode, onClick }: { mode: string; onClick: () => void }) {
     <button
       type="button"
       onClick={(e) => { e.stopPropagation(); onClick(); }}
-      className="inline-flex items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] text-text-2 bg-panel-2 border border-border-soft hover:text-text-primary hover:border-border transition-colors"
+      className="inline-flex items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] text-text-2 bg-panel-2 border border-border-soft hover:text-text-primary hover:border-border transition-colors @max-[420px]/chat:px-[7px]"
       aria-label={`Permission mode: ${label}`}
+      title={`Permission mode: ${label}`}
     >
       <Icon className="size-3" />
-      <span className="max-w-[100px] truncate">{label}</span>
+      <span className="max-w-[100px] truncate @max-[420px]/chat:hidden">{label}</span>
     </button>
   );
 }
@@ -1209,12 +1270,12 @@ function PriorityToggle({ value, onChange }: { value: MessagePriority; onChange:
     <button
       type="button"
       onClick={(e) => { e.stopPropagation(); cycle(); }}
-      className="inline-flex items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] text-text-2 bg-panel-2 border border-border-soft hover:text-text-primary hover:border-border transition-colors"
+      className="inline-flex shrink-0 items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] text-text-2 bg-panel-2 border border-border-soft hover:text-text-primary hover:border-border transition-colors @max-[420px]/chat:px-[7px]"
       aria-label={`Message priority: ${current.label}`}
       title={`Priority: ${current.label} (click to cycle)`}
     >
       <Icon className="size-3" />
-      <span>{current.label}</span>
+      <span className="@max-[420px]/chat:hidden">{current.label}</span>
     </button>
   );
 }

package/src/web/components/chat/message-list.tsx

@@ -1,3 +1,5 @@
+import type { ReplyReference } from "../../../shared/chat-reply";
+import { createReplyReference, resolveReplyMessage } from "./message-reply-reference";
 import { useEffect, useRef, useState, useMemo, useCallback, useLayoutEffect, memo } from "react";
 import { userMessageOrdinals } from "@/lib/message-ordinals";
 import { useStickToBottom } from "use-stick-to-bottom";
@@ -5,7 +7,10 @@ import type { ChatMessage } from "../../../types/chat";
 import type { SessionPhase } from "../../../types/api";
 import type { BashPartialEntry } from "../../hooks/use-chat";
 import { ToolCard } from "./tool-cards";
-import { jumpToEdit } from "./jump-to-edit";
+import { jumpToEdit, resolveAnchor } from "./jump-to-edit";
+import { sessionTurns, type SessionTurn } from "@/lib/session-turns";
+import { useSessionTurnsStore } from "@/stores/session-turns-store";
+import { useChatJumpStore } from "@/stores/chat-jump-store";
 import {
   aggregateTurnFileChanges,
   collectTurnMessages,
@@ -40,6 +45,7 @@ import type { Question } from "./question-card";
 import { GALLERY_ROOT_ATTR } from "@/lib/image-gallery";
 
 interface MessageListProps {
+  onReply?: (reply: ReplyReference) => void;
   messages: ChatMessage[];
   messagesLoading?: boolean;
   /** Keep the current (stale) transcript on screen while loading instead of the
@@ -84,8 +90,22 @@ interface MessageListProps {
   onExpandCompact?: (compactMessageId: string, jsonlPath: string) => Promise<number>;
   /** Whether a given compact message has already been expanded. */
   isCompactExpanded?: (compactMessageId: string) => boolean;
+  /** The server holds older messages of this segment that are not loaded yet. */
+  hasOlderHistory?: boolean;
+  /** Prepend the next older page. Comes before any pre-compact expansion: the
+   *  compact summary that expansion hangs off is the oldest message of the segment. */
+  onLoadOlderHistory?: () => Promise<void>;
+  /** Visible user messages before `messages[0]`, so edit-version ordinals of a
+   *  partial window match the ones the full list would give. */
+  userOrdinalOffset?: number;
+  /** The fork/edit anchor of `messages[0]` while older history is not loaded: the id of
+   *  the message before it, which this list cannot see. */
+  historyPredecessorId?: string | null;
 }
 
+/** How long a "Show in chat" request waits for its place to be drawn: the tab opening, its history loading. */
+const CHAT_JUMP_GIVE_UP_MS = 8_000;
+
 /**
  * Placeholder for a compaction segment being fetched.
  *
@@ -144,8 +164,13 @@ export function MessageList({
   bashPartialOutput,
   onExpandCompact,
   isCompactExpanded,
+  hasOlderHistory = false,
+  onLoadOlderHistory,
+  userOrdinalOffset = 0,
+  historyPredecessorId = null,
   onDismissMessage,
   onClearErrors,
+  onReply,
 }: MessageListProps) {
   // Non-virtualized transcript: every message lives in the real DOM. Content that
   // grows BELOW the viewport (streaming) no longer shifts the user's scroll — that's
@@ -216,6 +241,34 @@ export function MessageList({
   }, [scrollEl]);
   useEffect(() => () => flashCleanupRef.current?.(), []);
 
+  // The Review tab names the turn that wrote each block from what this chat shows.
+  const turns = useMemo(() => sessionTurns(messages), [messages]);
+  useEffect(() => {
+    if (sessionId) useSessionTurnsStore.getState().publish(sessionId, turns, true);
+  }, [sessionId, turns]);
+  // The turn each change pill closes, for its "Revert turn". The same object while the turn
+  // stays as it was, so a bubble is not drawn again on every streamed token.
+  const turnCache = useRef(new Map<string, SessionTurn>());
+  const rollupTurns = useMemo(() => {
+    const byId = new Map(turns.map((t) => [t.messageId, t]));
+    const out = new Map<number, SessionTurn>();
+    for (const i of turnChanges.keys()) {
+      let turn: SessionTurn | undefined;
+      for (let j = i; j >= 0 && !turn; j--) if (filtered[j]!.role === "user") turn = byId.get(filtered[j]!.id);
+      if (!turn) continue;
+      const prev = turnCache.current.get(turn.messageId);
+      if (prev && prev.n === turn.n && prev.at === turn.at && prev.prompt === turn.prompt
+        && prev.calls.length === turn.calls.length && prev.calls[prev.calls.length - 1] === turn.calls[turn.calls.length - 1]) turn = prev;
+      else turnCache.current.set(turn.messageId, turn);
+      out.set(i, turn);
+    }
+    return out;
+  }, [turns, turnChanges, filtered]);
+  useEffect(() => {
+    if (!sessionId) return;
+    return () => useSessionTurnsStore.getState().release(sessionId);
+  }, [sessionId]);
+
   // Preserve the viewport when older messages are prepended (compact expand): capture
   // distance-from-bottom before the prepend, restore scrollTop after so the content
   // being read doesn't jump. Only fires for prepends — streaming appends leave the
@@ -277,6 +330,58 @@ export function MessageList({
     return () => ro.disconnect();
   }, [scrollEl, stopScroll]);
 
+  const handleReply = useCallback((message: ChatMessage) => {
+    if (!sessionId || !providerId) return;
+    const reply = createReplyReference(message, sessionId, providerId);
+    if (reply) onReply?.(reply);
+  }, [sessionId, providerId, onReply]);
+  const replyAvailable = useCallback((reply: ReplyReference) => !!resolveReplyMessage(filtered, reply, sessionId, providerId), [filtered, sessionId, providerId]);
+  const replyFlashCleanup = useRef<(() => void) | null>(null);
+  useEffect(() => () => replyFlashCleanup.current?.(), []);
+  /** Scroll to the message at `index` of `filtered` and flash it; false when it is not drawn. */
+  const showMessageAt = useCallback((index: number) => {
+    const target = scrollEl?.querySelector<HTMLElement>(`[data-msg-index="${index}"]`);
+    if (!scrollEl || !target) return false;
+    stopScroll();
+    replyFlashCleanup.current?.();
+    scrollEl.scrollTo({ top: scrollEl.scrollTop + target.getBoundingClientRect().top - scrollEl.getBoundingClientRect().top - 24, behavior: "smooth" });
+    target.classList.add("bg-primary/10", "ring-1", "ring-primary/40");
+    const clear = () => target.classList.remove("bg-primary/10", "ring-1", "ring-primary/40");
+    const timer = setTimeout(clear, 1400);
+    replyFlashCleanup.current = () => { clearTimeout(timer); clear(); };
+    return true;
+  }, [scrollEl, stopScroll]);
+  const handleJumpToReply = useCallback((reply: ReplyReference) => {
+    const message = resolveReplyMessage(filtered, reply, sessionId, providerId);
+    if (message) showMessageAt(filtered.indexOf(message));
+  }, [filtered, sessionId, providerId, showMessageAt]);
+
+  // "Show in chat" from the Review tab: the call's card, or the prompt that asked for it when
+  // the card is not drawn (a sub-agent's call). Waits for the tab to be shown and its history to
+  // load, since the request is made just before the tab opens.
+  const jumpRequest = useChatJumpStore((s) => (sessionId && s.request?.sessionId === sessionId ? s.request : null));
+  useEffect(() => {
+    if (!jumpRequest || !scrollEl) return;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const attempt = () => {
+      const call = jumpRequest.toolUseId && `${jumpRequest.toolUseId}-0`;
+      const index = jumpRequest.messageId ? filtered.findIndex((m) => m.id === jumpRequest.messageId) : -1;
+      // A hidden tab has no layout to scroll in.
+      if (scrollEl.clientHeight > 0) {
+        if (call && resolveAnchor(scrollEl, call)) {
+          stopScroll();
+          handleJumpToEdit(call);
+          return useChatJumpStore.getState().done(jumpRequest);
+        }
+        if (index >= 0 && showMessageAt(index)) return useChatJumpStore.getState().done(jumpRequest);
+      }
+      if (Date.now() - jumpRequest.at > CHAT_JUMP_GIVE_UP_MS) return useChatJumpStore.getState().done(jumpRequest);
+      timer = setTimeout(attempt, 150);
+    };
+    attempt();
+    return () => clearTimeout(timer);
+  }, [jumpRequest, scrollEl, filtered, stopScroll, handleJumpToEdit, showMessageAt]);
+
   // Stable fork handler — avoids new closure per message (preserves MessageBubble memo)
   const handleFork = useCallback((msgContent: string, msgId: string | undefined) => {
     onFork?.(msgContent, msgId);
@@ -325,7 +430,8 @@ export function MessageList({
   }, [filtered, onExpandCompact, isCompactExpanded]);
 
   const topUnexpandedCompact = findTopUnexpandedCompact();
-  const hasMore = !!topUnexpandedCompact;
+  const canLoadOlderPage = hasOlderHistory && !!onLoadOlderHistory;
+  const hasMore = canLoadOlderPage || !!topUnexpandedCompact;
 
   // Held as two strings rather than as the object. `findTopUnexpandedCompact`
   // runs on every render and answers with a fresh literal, so depending on that
@@ -337,8 +443,16 @@ export function MessageList({
   const topCompactPath = topUnexpandedCompact?.jsonlPath ?? null;
 
   // Fetch pre-compact history from the server (prepends older messages).
+  // Older pages of this segment first; only once they are all in does the top of the
+  // list reach the compact summary whose pre-compact history can be expanded.
   const loadMore = useCallback(async () => {
-    if (!topCompactId || !topCompactPath || !onExpandCompact || autoLoadingCompact) return;
+    if (autoLoadingCompact) return;
+    const load = canLoadOlderPage
+      ? onLoadOlderHistory!
+      : topCompactId && topCompactPath && onExpandCompact
+        ? () => onExpandCompact(topCompactId, topCompactPath)
+        : null;
+    if (!load) return;
     // Capture distance-from-bottom so the post-prepend layout effect can hold the
     // reading position steady while older messages are inserted above.
     const el = scrollEl;
@@ -346,13 +460,13 @@ export function MessageList({
     setAutoLoadingCompact(true);
     setCompactLoadError(null);
     try {
-      await onExpandCompact(topCompactId, topCompactPath);
+      await load();
     } catch (e) {
       setCompactLoadError(e instanceof Error ? e.message : "Could not load previous conversation");
     } finally {
       setAutoLoadingCompact(false);
     }
-  }, [topCompactId, topCompactPath, onExpandCompact, autoLoadingCompact, scrollEl]);
+  }, [canLoadOlderPage, onLoadOlderHistory, topCompactId, topCompactPath, onExpandCompact, autoLoadingCompact, scrollEl]);
 
   // Lazy-load older history when a sentinel at the top of the transcript comes
   // into range. This replaces a scroll listener that re-ran its check on every
@@ -433,7 +547,8 @@ export function MessageList({
           {filtered.map((msg, globalIdx) => {
             const prevMsg = globalIdx > 0 ? filtered[globalIdx - 1] : undefined;
             // User-message ordinal (1-based) — stable version-group anchor across forks.
-            const versionOrdinal = userOrdinals[globalIdx] ?? 0;
+            const localOrdinal = userOrdinals[globalIdx] ?? 0;
+            const versionOrdinal = localOrdinal ? localOrdinal + userOrdinalOffset : 0;
             // Resolved here rather than deeper down so the ordinal→group lookup
             // happens once per message instead of being threaded through bubbles.
             const versionGroup = versionOrdinal ? versionMap?.[versionOrdinal] : undefined;
@@ -446,11 +561,15 @@ export function MessageList({
             // Copy gathers the whole turn: walk back over consecutive assistant
             // messages and join their visible text (tool-only segments contribute nothing).
             let turnCopyText: string | undefined;
+            let turnReplyMessage: ChatMessage | undefined;
             if (isLastAssistantInTurn) {
               const parts: string[] = [];
               for (let j = globalIdx; j >= 0 && filtered[j]!.role === "assistant"; j--) {
                 const t = assistantMessageText(filtered[j]!);
-                if (t) parts.unshift(t);
+                if (t) {
+                  parts.unshift(t);
+                  turnReplyMessage ??= filtered[j]!;
+                }
               }
               turnCopyText = parts.join("\n\n");
             }
@@ -467,17 +586,25 @@ export function MessageList({
                 <RenderErrorBoundary fallbackContent={msg.content}>
                   <MessageBubble
                     message={msg}
+                    onReply={onReply && sessionId && providerId
+                      ? msg.role === "assistant"
+                        ? turnReplyMessage ? () => handleReply(turnReplyMessage!) : undefined
+                        : handleReply
+                      : undefined}
+                    onJumpToReply={handleJumpToReply}
+                    replyAvailable={replyAvailable}
                     isStreaming={isStreaming && msg.id.startsWith("streaming-")}
                     isLastAssistantInTurn={isLastAssistantInTurn}
                     turnCopyText={turnCopyText}
                     turnChanges={isLastAssistantInTurn ? turnChanges.get(globalIdx) : undefined}
+                    turn={isLastAssistantInTurn ? rollupTurns.get(globalIdx) : undefined}
                     onJumpToEdit={handleJumpToEdit}
                     projectName={projectName}
                     onFork={msg.role === "user" && onFork ? handleFork : undefined}
                     onEdit={msg.role === "user" && onEdit ? handleEdit : undefined}
                     isEditing={isEditing}
                     onDismiss={msg.role === "system" && onDismissMessage ? handleDismiss : undefined}
-                    prevMsgId={prevMsg?.sdkUuid ?? prevMsg?.id}
+                    prevMsgId={prevMsg ? prevMsg.sdkUuid ?? prevMsg.id : historyPredecessorId ?? undefined}
                     sessionId={sessionId}
                     providerId={providerId}
                     versionGroup={versionGroup}
@@ -519,10 +646,15 @@ function assistantMessageText(msg: ChatMessage): string {
     : msg.content;
 }
 
-const MessageBubble = memo(function MessageBubble({ message, isStreaming, isLastAssistantInTurn, turnCopyText, turnChanges, onJumpToEdit, projectName, onFork, onEdit, isEditing, onDismiss, prevMsgId, sessionId, providerId, versionGroup, onNavigateVersion, versionNavDisabled, bashPartialOutput }: {
+const MessageBubble = memo(function MessageBubble({ message, isStreaming, isLastAssistantInTurn, turnCopyText, turnChanges, turn, onJumpToEdit, projectName, onFork, onEdit, isEditing, onDismiss, prevMsgId, sessionId, providerId, versionGroup, onNavigateVersion, versionNavDisabled, bashPartialOutput, onReply, onJumpToReply, replyAvailable }: {
+  onReply?: (message: ChatMessage) => void;
+  onJumpToReply?: (reply: ReplyReference) => void;
+  replyAvailable?: (reply: ReplyReference) => boolean;
   message: ChatMessage; isStreaming: boolean; isLastAssistantInTurn?: boolean; turnCopyText?: string; projectName?: string;
   /** Files this turn changed — drives the action-bar change pill. */
   turnChanges?: TurnFileChange[];
+  /** The turn this message closes: what the change tray's "Revert turn" puts back. */
+  turn?: SessionTurn;
   onJumpToEdit?: (editRef: string) => void;
   onFork?: (content: string, messageId: string | undefined) => void;
   onEdit?: (content: string, messageId: string | undefined, ownMsgId?: string) => void;
@@ -545,6 +677,9 @@ const MessageBubble = memo(function MessageBubble({ message, isStreaming, isLast
         messageId={message.id}
         timestamp={message.timestamp}
         projectName={projectName}
+        onReply={onReply && createReplyReference(message, sessionId ?? "", providerId ?? "") ? () => onReply(message) : undefined}
+        onJumpToReply={onJumpToReply}
+        replyAvailable={replyAvailable}
         onFork={handleFork}
         onEdit={handleEdit}
         isEditing={isEditing}
@@ -594,9 +729,11 @@ const MessageBubble = memo(function MessageBubble({ message, isStreaming, isLast
       {/* Action bar: only on the last assistant message of the turn, after streaming ends */}
       {!isStreaming && isLastAssistantInTurn && (
         <TurnChangeRollup
+          onReply={onReply ? () => onReply(message) : undefined}
           timestamp={message.timestamp}
           content={turnCopyText ?? assistantMessageText(message)}
           changes={turnChanges}
+          turn={turn}
           onJumpToEdit={onJumpToEdit}
         />
       )}

package/src/web/components/chat/message-reply-reference.ts

@@ -0,0 +1,43 @@
+import type { ChatMessage } from "../../../types/chat";
+import { MAX_REPLY_QUOTE_LENGTH, type ReplyReference } from "../../../shared/chat-reply";
+import { parseUserMessage } from "./user-message-parse";
+
+/** Only text visible in the transcript: never thinking, tools or injected context. */
+export function replyMessageText(message: ChatMessage): string {
+  if (message.role === "assistant") {
+    return (message.events?.length
+      ? message.events.filter((event) => event.type === "text").map((event) => event.content).join("")
+      : message.content).trim();
+  }
+  if (message.role !== "user") return "";
+  const parsed = parseUserMessage(message.content);
+  if (parsed.tags.some((tag) => ["task-notification", "environment_details", "local-command-caveat"].includes(tag.name))) return "";
+  const parts = [parsed.command?.name, parsed.text].filter(Boolean);
+  if (parsed.files.length) parts.push(`Attached files: ${parsed.files.map((path) => path.split(/[\\/]/).pop()).join(", ")}`);
+  return parts.join("\n").trim();
+}
+
+export function createReplyReference(message: ChatMessage, sessionId: string, providerId: string): ReplyReference | null {
+  const text = replyMessageText(message);
+  if (!text || message.role === "system" || message.id.startsWith("streaming-")) return null;
+  const chars = Array.from(text);
+  return { version: 1, sessionId, providerId, messageId: message.id, ...(message.sdkUuid ? { sdkUuid: message.sdkUuid } : {}),
+    role: message.role, timestamp: message.timestamp, quote: chars.slice(0, MAX_REPLY_QUOTE_LENGTH).join(""),
+    truncated: chars.length > MAX_REPLY_QUOTE_LENGTH };
+}
+
+/** A native id still needs its snapshot to match (Codex history ids can be ordinals). */
+export function resolveReplyMessage(messages: ChatMessage[], reply: ReplyReference, sessionId?: string, providerId?: string): ChatMessage | null {
+  if (reply.sessionId !== sessionId || reply.providerId !== providerId) return null;
+  const matchesQuote = (message: ChatMessage) => {
+    if (message.role !== reply.role) return false;
+    const text = replyMessageText(message);
+    return reply.truncated ? Array.from(text).slice(0, MAX_REPLY_QUOTE_LENGTH).join("") === reply.quote : text === reply.quote;
+  };
+  const native = messages.filter((message) => (
+    (reply.sdkUuid && message.sdkUuid === reply.sdkUuid) || (message.id === reply.messageId && message.timestamp === reply.timestamp)) && matchesQuote(message));
+  if (native.length === 1) return native[0]!;
+  if (native.length > 1) return null;
+  const fallback = messages.filter((message) => message.timestamp === reply.timestamp && matchesQuote(message));
+  return fallback.length === 1 ? fallback[0]! : null;
+}

package/src/web/components/chat/message-user-bubble.tsx

@@ -6,6 +6,8 @@
  * which are *not* things the user typed and must not read as if they were, and
  * absolute file paths worth turning into something clickable.
  */
+import { decodeReply, type ReplyReference } from "../../../shared/chat-reply";
+import { ReplyCard } from "./reply-card";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   Bot, CheckCircle2, ChevronDown, ChevronRight, ChevronUp, ExternalLink, FileText,
@@ -26,13 +28,16 @@ import { AuthImageThumbnail, isImagePath } from "./message-media";
 const SYSTEM_TAG_NAMES = new Set(["task-notification", "environment_details", "local-command-caveat"]);
 
 /** User message bubble — full width, collapsible, with system tag badges */
-export function UserBubble({ content, messageId, timestamp, projectName, onFork, onEdit, isEditing, sessionId, providerId, versionGroup, onNavigateVersion, versionNavDisabled }: {
+export function UserBubble({ content, messageId, timestamp, projectName, onFork, onEdit, onReply, onJumpToReply, replyAvailable, isEditing, sessionId, providerId, versionGroup, onNavigateVersion, versionNavDisabled }: {
   content: string;
   messageId?: string;
   timestamp: string;
   projectName?: string;
   onFork?: () => void;
   onEdit?: () => void;
+  onReply?: () => void;
+  onJumpToReply?: (reply: ReplyReference) => void;
+  replyAvailable?: (reply: ReplyReference) => boolean;
   isEditing?: boolean;
   sessionId?: string;
   providerId?: string;
@@ -40,7 +45,7 @@ export function UserBubble({ content, messageId, timestamp, projectName, onFork,
   onNavigateVersion?: (sessionId: string) => void;
   versionNavDisabled?: boolean;
 }) {
-  const { files, text, tags, command, terminalBlocks, idePath, agent } = useMemo(
+  const { files, text, tags, command, terminalBlocks, idePath, agent, replyTo } = useMemo(
     () => parseUserMessage(content),
     [content],
   );
@@ -75,6 +80,7 @@ export function UserBubble({ content, messageId, timestamp, projectName, onFork,
         : "max-w-[80%] bg-accent-wash border-accent-wash-border text-text",
       isEditing && "ring-2 ring-primary/60 border-primary/40",
     )}>
+      {replyTo && <ReplyCard reply={replyTo} onJump={replyAvailable?.(replyTo) ? () => onJumpToReply?.(replyTo) : undefined} unavailable={!replyAvailable?.(replyTo)} />}
       {/* System tags as badges */}
       {tags.length > 0 && <SystemTagBadges tags={tags} />}
 
@@ -169,7 +175,8 @@ export function UserBubble({ content, messageId, timestamp, projectName, onFork,
     </div>
       {/* Action bar below the bubble — timestamp, copy, edit/fork (real user messages only) */}
       {!isSystemContext && (
-        <MessageActionBar timestamp={timestamp} content={content}>
+        <MessageActionBar timestamp={timestamp} content={decodeReply(content).content}>
+          {onReply && <ActionButton icon={<RotateCcw className="size-3.5" />} label="Reply" title="Reply to this message" onClick={onReply} touchTarget />}
           {onEdit && (
             <ActionButton
               icon={<Pencil className="size-3.5" />}

package/src/web/components/chat/model-thinking-selector.tsx

@@ -3,6 +3,7 @@ import { Check, Sparkles, Brain } from "@/lib/icons";
 import { api, projectUrl } from "@/lib/api-client";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { modelDisplayName } from "@/lib/model-display-name";
 import { EFFORT_OPTIONS, chipLabel } from "./model-thinking-selector-helpers";
 
 interface ModelOption {
@@ -107,7 +108,7 @@ export function ModelThinkingSelector({
   }, [open, isMobile]);
 
   const current = models.find((m) => m.value === model);
-  const modelDisplay = current ? shortLabel(current.label) : model ? shortLabel(model) : "Model";
+  const modelDisplay = current ? shortLabel(current.label) : model ? modelDisplayName(model) : "Model";
   const effortValue = effort ?? DEFAULT_EFFORT;
   const showModelList = models.length > 0 || Boolean(modelStatus);
   const chipText = chipLabel(modelDisplay, effortValue);
@@ -163,7 +164,8 @@ export function ModelThinkingSelector({
   );
 
   return (
-    <div className="relative">
+    // `min-w-0` + `max-w-full`: in a narrow composer this is the chip that gives way.
+    <div className="relative min-w-0">
       <button
         type="button"
         disabled={disabled}
@@ -171,12 +173,12 @@ export function ModelThinkingSelector({
           e.stopPropagation();
           if (!disabled) setOpen((v) => !v);
         }}
-        className="inline-flex items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] text-primary bg-accent-wash border border-accent-wash-border hover:brightness-110 transition-[filter] disabled:opacity-50 disabled:cursor-default"
+        className="inline-flex max-w-full items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] text-primary bg-accent-wash border border-accent-wash-border hover:brightness-110 transition-[filter] disabled:opacity-50 disabled:cursor-default"
         aria-label={`Model ${modelDisplay}, effort ${effortValue}${thinking ? ", thinking on" : ""}`}
         title={disabled ? "Can't change while running" : chipText}
       >
         <Sparkles className="h-3.5 w-3.5 shrink-0" />
-        <span className="max-w-[140px] truncate">{chipText}</span>
+        <span className="min-w-0 max-w-[140px] truncate">{chipText}</span>
         {thinking && <Brain className="h-3 w-3 shrink-0" />}
       </button>
 

package/src/web/components/chat/prompt-cache-chip.tsx

@@ -55,7 +55,7 @@ export function PromptCacheChip({ promptCache }: { promptCache: PromptCacheState
         <span
           // Same shape as `ModeChip` and `PriorityToggle` beside it; only the colour carries
           // the state, and only once the cache is gone — a countdown still running is not news.
-          className={`inline-flex items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] border transition-colors ${
+          className={`inline-flex shrink-0 items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] border transition-colors ${
             cold
               ? "text-error border-error/40 bg-error/10"
               : "text-text-2 bg-panel-2 border-border-soft"