@@ -196,8 +196,9 @@ test("keeps a file diff anchored while it expands and collapses", async ({ page
       timelineDetail: { ...timelinePresets[2].value, edit: { placement: "separate", details: "collapsed" } },
     },
     messages: [
-      userMessage([userText("Preceding context ".repeat(120))]),
+      userMessage(),
       assistantMessage([
+        textPart("prt_file_projection_preceding", "Preceding context ".repeat(240)),
         toolPart(
           id,
           "patch",
@@ -754,3 +755,168 @@ test("groups consecutive sent prompts under the last one's meta line, with each
   await expect(first.locator('[data-slot="user-message-run-actions"]')).toHaveCSS("opacity", "1")
   await expect(first.getByRole("button", { name: "Copy message" })).toHaveCount(1)
 })
+
+test("leaves a long prompt unfolded while Fold long messages is off", async ({ page }) => {
+  const text = Array.from({ length: 20 }, (_, index) => `Long line ${index + 1}`).join("\n")
+
+  await setupTimeline(page, {
+    messages: [
+      userMessage([userText(text, { id: "prt_msg_0001_nofold_text" })], {
+        id: "msg_0001_nofold",
+        created: 1700000000000,
+      }),
+    ],
+    viewport: { width: 1200, height: 700 },
+  })
+
+  const row = page.locator('[data-timeline-row="UserMessage"][data-message-id="msg_0001_nofold"]')
+  await expect(row).toContainText("Long line 20")
+  await expect(row.locator('[data-slot="user-message-fold"]')).toHaveCount(0)
+  await expect(row.getByRole("button", { name: "Read more" })).toHaveCount(0)
+})
+
+test("folds a prompt past 12 lines to its first 8 and keeps it open after scrolling out of view", async ({ page }) => {
+  const lines = (name: string, count: number) =>
+    Array.from({ length: count }, (_, index) => `${name} line ${index + 1}`).join("\n")
+
+  const prompt = (id: string, text: string, created: number) =>
+    userMessage([userText(text, { id: `prt_${id}_text` })], { id, created })
+
+  const reply = (id: string, parentID: string, created: number) =>
+    assistantMessage(
+      [{ id: `prt_${id}_text`, type: "text", text: `Reply ${id}. ${"Later work fills the timeline. ".repeat(12)}` }],
+      { id, parentID, created },
+    )
+
+  await setupTimeline(page, {
+    messages: [
+      prompt("msg_0001_fold_edge", lines("Edge", 12), 1700000000000),
+      reply("msg_0002_fold_edge", "msg_0001_fold_edge", 1700000001000),
+      prompt("msg_0003_fold_long", lines("Long", 13), 1700000002000),
+      reply("msg_0004_fold_long", "msg_0003_fold_long", 1700000003000),
+      ...Array.from({ length: 16 }, (_, index) => {
+        const created = 1700000010000 + index * 2_000
+        const id = `msg_${String(100 + index * 2).padStart(4, "0")}_fold_later`
+
+        return [prompt(id, `Later prompt ${index}`, created), reply(`${id}_reply`, id, created + 1_000)]
+      }).flat(),
+    ],
+    settings: { foldUserMessages: true },
+    viewport: { width: 1200, height: 700 },
+  })
+
+  const scroller = page.locator(".scroll-view__viewport", { has: page.locator("[data-timeline-row]") })
+
+  const row = (id: string) =>
+    page.locator(`[data-timeline-virtual-content] [data-timeline-row="UserMessage"][data-message-id="${id}"]`)
+
+  const edge = row("msg_0001_fold_edge")
+  const long = row("msg_0003_fold_long")
+  const bubble = long.locator('[data-slot="user-message-text"]')
+  const fold = long.locator('[data-slot="user-message-fold"]')
+  const lastLater = row("msg_0130_fold_later")
+  await expect(lastLater).toBeVisible()
+
+  // A wheel, not a scroll write, so the timeline stops following its end.
+  await scroller.hover()
+  await page.mouse.wheel(0, -100_000)
+  await expect(long).toBeVisible()
+
+  // 12 lines show in full; 13 fold to 8, and all 13 stay in the text for copy and select-all.
+  await expect(edge.locator('[data-slot="user-message-fold"]')).toContainText("Edge line 12")
+  await expect(edge.getByRole("button", { name: "Read more" })).toHaveCount(0)
+  const toggle = long.getByRole("button", { name: /^(Read more|Show less)$/ })
+  await expect(toggle).toHaveAccessibleName("Read more")
+  await expect(toggle).toHaveAttribute("aria-expanded", "false")
+  const lineHeight = await fold.evaluate((element) => parseFloat(getComputedStyle(element).lineHeight))
+  await expect.poll(async () => Math.round((await fold.boundingBox())!.height / lineHeight)).toBe(8)
+  expect(
+    await fold.evaluate((element) => {
+      const selection = getSelection()!
+      selection.selectAllChildren(element)
+      const text = selection.toString()
+      selection.removeAllRanges()
+
+      return text
+    }),
+  ).toContain("Long line 13")
+
+  // A cached tab's timeline is detached while hidden; the message stays folded rather than measuring 0 lines.
+  expect(
+    await bubble.evaluate(async (element) => {
+      const parent = element.parentElement!
+      const next = element.nextSibling
+      element.remove()
+      await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)))
+      const folded = element.querySelector('[data-slot="user-message-fold"]')!.hasAttribute("data-folded")
+      parent.insertBefore(element, next)
+
+      return folded
+    }),
+  ).toBe(true)
+  await expect(toggle).toHaveAttribute("aria-expanded", "false")
+
+  // Opening grows the bubble downward, and the virtual row takes its new height.
+  await bubble.evaluate((element) => element.scrollIntoView({ block: "center" }))
+  const top = (await bubble.boundingBox())!.y
+  await toggle.click()
+  await expect(toggle).toHaveAttribute("aria-expanded", "true")
+  await expect(toggle).toHaveAccessibleName("Show less")
+  await expect.poll(async () => Math.round((await fold.boundingBox())!.height / lineHeight)).toBe(13)
+  expect(Math.abs((await bubble.boundingBox())!.y - top)).toBeLessThanOrEqual(1)
+  await expect
+    .poll(() =>
+      long.evaluate((element) => {
+        const allocated = element.closest<HTMLElement>("[data-timeline-key]")!.getBoundingClientRect().height
+        const content = element.closest<HTMLElement>("[data-index]")!.getBoundingClientRect().height
+
+        return Math.abs(allocated - content)
+      }),
+    )
+    .toBeLessThanOrEqual(1)
+
+  // The row unmounts at the end of the timeline and comes back open.
+  await page.mouse.wheel(0, 100_000)
+  await expect(lastLater).toBeVisible()
+  await expect(long).toHaveCount(0)
+  await page.mouse.wheel(0, -100_000)
+  await expect(long.getByRole("button", { name: "Show less" })).toHaveAttribute("aria-expanded", "true")
+  await expect.poll(async () => Math.round((await fold.boundingBox())!.height / lineHeight)).toBe(13)
+
+  // Closing a message whose top is on screen shrinks it in place, without scrolling the timeline.
+  await scroller.evaluate(
+    (element, target) => {
+      element.scrollTop += target!.y - element.getBoundingClientRect().top - 100
+    },
+    await bubble.boundingBox(),
+  )
+
+  const closing = {
+    top: (await bubble.boundingBox())!.y,
+    scroll: await scroller.evaluate((element) => element.scrollTop),
+  }
+
+  expect(closing.scroll).toBeGreaterThan(150)
+  await toggle.click()
+  await expect(toggle).toHaveAttribute("aria-expanded", "false")
+  expect(Math.abs((await bubble.boundingBox())!.y - closing.top)).toBeLessThanOrEqual(1)
+  expect(await scroller.evaluate((element) => element.scrollTop)).toBe(closing.scroll)
+
+  // Find skips the Read more button, and a match hidden in the fold opens the message.
+  const highlights = () =>
+    page.evaluate(() =>
+      ["timeline-search-hit", "timeline-search-hit-active"].reduce(
+        (count, name) => count + (CSS.highlights.get(name)?.size ?? 0),
+        0,
+      ),
+    )
+
+  await page.keyboard.press("ControlOrMeta+f")
+  const search = page.locator('[data-component="timeline-search-bar"] input')
+  await expect(search).toBeFocused()
+  await search.fill("more")
+  await expect.poll(highlights).toBe(0)
+  await search.fill("Long line 13")
+  await expect(toggle).toHaveAttribute("aria-expanded", "true")
+  await expect.poll(highlights).toBe(1)
+})
@@ -773,6 +773,8 @@ export const dict = {
   "settings.experimental.row.newIcons.description": "Preview the updated icon set",
   "settings.experimental.row.newModelPicker.title": "New model picker",
   "settings.experimental.row.newModelPicker.description": "Preview the redesigned model picker",
+  "settings.experimental.row.foldUserMessages.title": "Fold long messages",
+  "settings.experimental.row.foldUserMessages.description": "Fold your messages past 12 lines behind a Read more button",
   "settings.plugins.reload": "Reload",
   "settings.plugins.status.loading": "Loading",
   "settings.plugins.status.failed": "Failed",
 
@@ -14,6 +14,7 @@ import { TextShimmer } from "@opencode/ui/text-shimmer"
 import type { BackgroundTask, MountedSession, SessionScreen } from "@opencode/plugin/gui"
 import { PluginSlot } from "@/runtime/plugin/render"
 import { useLanguage } from "@/runtime/i18n/language"
+import { useSettings } from "@/settings/model"
 import { useServer } from "@/runtime/server/current"
 import { useWorkspaceLocation } from "@/workspaces/location"
 import { Timeline } from "@opencode/session-ui/timeline/projection"
@@ -327,7 +328,10 @@ function MessageTimelineView(
     setTitle({ draft: "", editing: false, menuOpen: false, pendingRename: false })
   })
 
+  const settings = useSettings()
+
   const rowRenderer = createSessionTimelineRowRenderer({
+    foldUserMessages: settings.general.foldUserMessages,
     sessionID: () => sessionID()!,
     status: sessionStatus,
     projection,
 
@@ -20,8 +20,13 @@ const HIGHLIGHT_ACTIVE = "timeline-search-hit-active"
 
 const TEXT_SELECTORS = '[data-slot="text-part-body"], [data-slot="user-message-text"]'
 
+const FOLD_TOGGLE = '[data-slot="user-message-fold-toggle"]'
+
+// Matches the fold's mask in session-ui's message-part.css.
+const FOLD_FADE = 40
+
 function supportsHighlights() {
-  return typeof CSS !== "undefined" && typeof CSS.highlights === "object" && CSS.highlights !== null
+  return !!globalThis.CSS?.highlights
 }
 
 function clearHighlights() {
@@ -46,7 +51,14 @@ function collectRanges(
     const partID = part?.getAttribute("data-timeline-part-id")
     const isActivePart = activePartID !== undefined && partID === activePartID
     let occurrenceInPart = 0
-    const walker = document.createTreeWalker(body, NodeFilter.SHOW_TEXT)
+
+    // A folded user message's Read more button sits inside its text.
+    const walker = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, {
+      acceptNode: (node) =>
+        node.parentElement?.closest(FOLD_TOGGLE) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT,
+    })
+
+    // SAFETY: SHOW_TEXT restricts this walker to Text nodes.
     let node = walker.nextNode() as Text | null
 
     while (node) {
@@ -67,6 +79,7 @@ function collectRanges(
         at = lowerValue.indexOf(lower, from)
       }
 
+      // SAFETY: SHOW_TEXT restricts this walker to Text nodes.
       node = walker.nextNode() as Text | null
     }
   }
@@ -266,6 +279,24 @@ export function createTimelineSearchController(input: {
       }
 
       const rect = active[0].getBoundingClientRect()
+
+      const fold = active[0].startContainer.parentElement?.closest<HTMLElement>(
+        '[data-slot="user-message-fold"][data-folded]',
+      )
+
+      // A match in or past a folded message's fading last lines opens the message, then scrolls to it.
+      const toggle =
+        fold && rect.bottom > fold.getBoundingClientRect().bottom - FOLD_FADE
+          ? root.querySelector<HTMLElement>(`${FOLD_TOGGLE}[aria-controls="${CSS.escape(fold.id)}"]`)
+          : null
+
+      if (toggle) {
+        toggle.click()
+        requestAnimationFrame(seek)
+
+        return
+      }
+
       const rootRect = root.getBoundingClientRect()
       const sticky = root.querySelector("[data-session-title]")
       const inset = sticky instanceof HTMLElement ? sticky.offsetHeight : 0
 
@@ -1046,7 +1046,11 @@ export function createTimelineVirtualizer(input: Input) {
     disclosure: {
       patchGroupKeys,
       value: (key: string) => toolOpen[key],
-      set: (key: string, open: boolean) => setToolOpen(key, open),
+      set: (key: string, open: boolean) => {
+        // Following the end would scroll an opened user message's top away; it stays where it was pressed.
+        if (open && key.startsWith("user-expanded:")) input.onUnpin()
+        setToolOpen(key, open)
+      },
     },
     revealPart,
     View,
 
@@ -50,6 +50,17 @@ export const SettingsExperimental: Component = () => {
                 />
               </div>
             </SettingsRow>
+            <SettingsRow
+              title={language.t("settings.experimental.row.foldUserMessages.title")}
+              description={language.t("settings.experimental.row.foldUserMessages.description")}
+            >
+              <div data-action="settings-fold-user-messages">
+                <Switch
+                  checked={settings.general.foldUserMessages()}
+                  onChange={(checked) => settings.general.setFoldUserMessages(checked)}
+                />
+              </div>
+            </SettingsRow>
           </SettingsList>
         </div>
       </div>
 
@@ -97,6 +97,7 @@ describe("settings schema", () => {
         timelineWidth: "comfortable",
         newIcons: false,
         newModelPicker: false,
+        foldUserMessages: false,
         mobileTitlebarPosition: "top",
         followUpBehavior: "steer",
       },
 
@@ -131,6 +131,8 @@ const generalSchema = Persistence.struct({
   newIcons: Schema.Boolean,
   // The "New model picker" design experiment, off until it ships.
   newModelPicker: Schema.Boolean,
+  // The "Fold long messages" experiment, off until it ships.
+  foldUserMessages: Schema.Boolean,
   mobileTitlebarPosition: Schema.Literals(["top", "bottom"]),
   // Owned by the review plugin, which copies it out once; kept so settings rewrites cannot drop it first.
   mobileDiffWrap: Persistence.optional(Schema.Boolean),
@@ -300,6 +302,7 @@ export const defaultSettings: Settings = {
     timelineWidth: "comfortable",
     newIcons: false,
     newModelPicker: false,
+    foldUserMessages: false,
     mobileTitlebarPosition: "top",
     followUpBehavior: "steer",
   },
@@ -412,6 +415,10 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
         setNewModelPicker(value: boolean) {
           setStore("general", "newModelPicker", value)
         },
+        foldUserMessages: withFallback(() => store.general?.foldUserMessages, defaultSettings.general.foldUserMessages),
+        setFoldUserMessages(value: boolean) {
+          setStore("general", "foldUserMessages", value)
+        },
         mobileTitlebarPosition: withFallback(
           () => store.general?.mobileTitlebarPosition,
           defaultSettings.general.mobileTitlebarPosition,
 
@@ -111,6 +111,13 @@ export const clientSettings: Entry<SettingsRootTab>[] = [
     description: "settings.experimental.row.newModelPicker.description",
     keywords: "model picker selector switcher redesign",
   },
+  {
+    tab: "experimental",
+    label: "settings.experimental.row.foldUserMessages.title",
+    target: "settings-fold-user-messages",
+    description: "settings.experimental.row.foldUserMessages.description",
+    keywords: "fold collapse long messages prompts read more",
+  },
   {
     tab: "appearance",
     label: "settings.general.row.colorScheme.title",