feat(session-ui): add floating input navigation rail

packages/app/src/components/settings-general.tsx

@@ -450,6 +450,18 @@ export const SettingsGeneral: Component = () => {
             />
           </div>
         </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.showInputNav.title")}
+          description={language.t("settings.general.row.showInputNav.description")}
+        >
+          <div data-action="settings-show-input-nav">
+            <Switch
+              checked={settings.general.showInputNav()}
+              onChange={(checked) => settings.general.setShowInputNav(checked)}
+            />
+          </div>
+        </SettingsRow>
       </SettingsList>
     </div>
   )

packages/app/src/components/settings-v2/general.tsx

@@ -438,6 +438,18 @@ export const SettingsGeneralV2: Component<{
             />
           </div>
         </SettingsRowV2>
+
+        <SettingsRowV2
+          title={language.t("settings.general.row.showInputNav.title")}
+          description={language.t("settings.general.row.showInputNav.description")}
+        >
+          <div data-action="settings-show-input-nav">
+            <Switch
+              checked={settings.general.showInputNav()}
+              onChange={(checked) => settings.general.setShowInputNav(checked)}
+            />
+          </div>
+        </SettingsRowV2>
       </SettingsListV2>
     </div>
   )

packages/app/src/context/settings.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, test } from "bun:test"
 import {
+  defaultSettings,
   hasExistingWebState,
   isAppUpgrade,
   layoutTransitionState,
@@ -77,3 +78,9 @@ describe("layout transition", () => {
     expect(shouldEnableNewLayout("dev", "1.17.20")).toBe(false)
   })
 })
+
+describe("showInputNav", () => {
+  test("defaults to false", () => {
+    expect(defaultSettings.general.showInputNav).toBe(false)
+  })
+})

packages/app/src/context/settings.tsx

@@ -33,6 +33,7 @@ export interface Settings {
     shellToolPartsExpanded: boolean
     editToolPartsExpanded: boolean
     showCustomAgents: boolean
+    showInputNav: boolean
     mobileTitlebarPosition: "top" | "bottom"
     newLayoutDesigns?: boolean
     layoutTransitionEligible?: boolean
@@ -174,7 +175,7 @@ export function terminalFontFamily(font: string | undefined) {
   return stack(font, terminalBase)
 }
 
-const defaultSettings: Settings = {
+export const defaultSettings: Settings = {
   general: {
     autoSave: true,
     releaseNotes: true,
@@ -188,6 +189,7 @@ const defaultSettings: Settings = {
     shellToolPartsExpanded: false,
     editToolPartsExpanded: false,
     showCustomAgents: false,
+    showInputNav: false,
     mobileTitlebarPosition: "top",
   },
   appearance: {
@@ -406,6 +408,10 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
         setShowCustomAgents(value: boolean) {
           setStore("general", "showCustomAgents", value)
         },
+        showInputNav: withFallback(() => store.general?.showInputNav, defaultSettings.general.showInputNav),
+        setShowInputNav(value: boolean) {
+          setStore("general", "showInputNav", value)
+        },
         mobileTitlebarPosition: withFallback(
           () => store.general?.mobileTitlebarPosition,
           defaultSettings.general.mobileTitlebarPosition,

packages/app/src/i18n/en.ts

@@ -895,6 +895,9 @@ export const dict = {
   "settings.general.row.showCustomAgents.title": "Show agent",
   "settings.general.row.showCustomAgents.description":
     "Switch between agents in the composer. When hidden, defaults to Build agent.",
+  "settings.general.row.showInputNav.title": "Input navigation",
+  "settings.general.row.showInputNav.description":
+    "Show a floating navigation rail for user messages on the right side of the session panel",
   "settings.general.row.reasoningSummaries.title": "Show reasoning summaries",
   "settings.general.row.reasoningSummaries.description": "Display model reasoning summaries in the timeline",
   "settings.general.row.shellToolPartsExpanded.title": "Expand shell tool parts",

packages/app/src/pages/session.tsx

@@ -86,6 +86,7 @@ import { sessionPanelLayout } from "@/pages/session/session-panel-layout"
 import { SessionReviewEmptyChangesV2 } from "@opencode-ai/session-ui/v2/session-review-empty-changes-v2"
 import { SessionReviewEmptyNoGitV2 } from "@opencode-ai/session-ui/v2/session-review-empty-no-git-v2"
 import { SessionReviewV2SidebarToggle } from "@opencode-ai/session-ui/v2/session-review-v2"
+import { InputNav } from "@opencode-ai/session-ui/input-nav"
 import { ReviewPanelV2 } from "@/pages/session/v2/review-panel-v2"
 import { createReviewPanelV2State } from "@/pages/session/v2/review-panel-v2-state"
 import { reviewDiffDirectory, reviewDiffNeedsLoad, reviewRootDirectory } from "@/pages/session/v2/review-diff-kinds"
@@ -2278,6 +2279,15 @@ export default function Page() {
             </SessionPanelFrame>
           )}
 
+          <Show when={isDesktop() && settings.general.showInputNav() && !!params.id}>
+            <InputNav
+              messages={visibleUserMessages()}
+              getParts={(messageID) => sync().data.part[messageID] ?? []}
+              current={visibleUserMessages().at(-1)}
+              onMessageSelect={(message) => scrollToMessage(message)}
+            />
+          </Show>
+
           <Show when={desktopSessionResizeOpen()}>
             <div onPointerDown={() => size.start()}>
               <ResizeHandle

packages/session-ui/src/components/input-nav-utils.ts

@@ -0,0 +1,47 @@
+import type { Part } from "@opencode-ai/sdk/v2"
+
+const BAR_MIN_WIDTH = 4
+const BAR_MAX_WIDTH = 24
+const TEXT_SCALE_FACTOR = 0.05
+const PREVIEW_TEXT_MAX_LENGTH = 200
+
+export function computeBarWidth(text: string): number {
+  if (!text) return BAR_MIN_WIDTH
+  const scaled = Math.ceil(text.length * TEXT_SCALE_FACTOR)
+  return Math.min(Math.max(scaled, BAR_MIN_WIDTH), BAR_MAX_WIDTH)
+}
+
+export interface PreviewContent {
+  text?: string
+  images: { filename?: string; url: string }[]
+  files: { filename?: string; url: string; mime: string }[]
+}
+
+export function extractPreviewContent(parts: Part[]): PreviewContent {
+  const textPart = parts.find(
+    (p): p is Part & { type: "text"; text: string } => p.type === "text" && !(p as { synthetic?: boolean }).synthetic,
+  )
+  const fileParts = parts.filter((p): p is Part & { type: "file"; mime: string; url: string } => p.type === "file")
+
+  const images = fileParts
+    .filter((p) => p.mime.startsWith("image/"))
+    .map((p) => ({ filename: (p as { filename?: string }).filename, url: p.url }))
+
+  const files = fileParts
+    .filter((p) => !p.mime.startsWith("image/"))
+    .map((p) => ({
+      filename: (p as { filename?: string }).filename,
+      url: p.url,
+      mime: p.mime,
+    }))
+
+  let text: string | undefined
+  if (textPart) {
+    text =
+      textPart.text.length > PREVIEW_TEXT_MAX_LENGTH
+        ? textPart.text.slice(0, PREVIEW_TEXT_MAX_LENGTH) + "..."
+        : textPart.text
+  }
+
+  return { text, images, files }
+}

packages/session-ui/src/components/input-nav.css

@@ -0,0 +1,108 @@
+[data-component="input-nav"] {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 4px;
+  z-index: 5;
+  user-select: none;
+}
+
+[data-slot="input-nav-item"] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  height: 3px;
+  cursor: pointer;
+}
+
+[data-slot="input-nav-bar"] {
+  height: 100%;
+  border-radius: 2px;
+  background-color: var(--border-base);
+  transition:
+    background-color 0.2s,
+    width 0.2s;
+}
+
+[data-slot="input-nav-bar"]:hover {
+  background-color: var(--text-base);
+}
+
+[data-slot="input-nav-bar"][data-active] {
+  background-color: var(--color-brand-500);
+}
+
+[data-slot="input-nav-preview-content"] {
+  z-index: 1000;
+  max-width: 300px;
+  max-height: min(400px, calc(100vh - 6rem));
+  overflow-y: auto;
+  padding: 8px 12px;
+  border-radius: var(--radius-md);
+  background: var(--surface-raised-stronger-non-alpha);
+  box-shadow:
+    0 0 0 1px var(--border-weak-base, rgba(17, 0, 0, 0.12)),
+    0 1px 2px -1px rgba(19, 16, 16, 0.04),
+    0 1px 2px 0 rgba(19, 16, 16, 0.06),
+    0 1px 3px 0 rgba(19, 16, 16, 0.08);
+}
+
+[data-slot="input-nav-preview"] {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+[data-slot="input-nav-preview-text"] {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-base);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+[data-slot="input-nav-preview-images"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+[data-slot="input-nav-preview-image"] {
+  max-width: 100%;
+  max-height: 150px;
+  border-radius: var(--radius-sm);
+  object-fit: contain;
+}
+
+[data-slot="input-nav-preview-files"] {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+[data-slot="input-nav-preview-file"] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--text-base);
+}
+
+[data-slot="input-nav-preview-file-icon"] {
+  flex-shrink: 0;
+}
+
+[data-slot="input-nav-preview-file-name"] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-slot="input-nav-preview-empty"] {
+  font-size: 13px;
+  color: var(--text-tertiary);
+}

packages/session-ui/src/components/input-nav.stories.tsx

@@ -0,0 +1,91 @@
+// @ts-nocheck
+import { InputNav } from "./input-nav"
+import type { UserMessage, Part } from "@opencode-ai/sdk/v2"
+
+const mockMessages: UserMessage[] = [
+  {
+    id: "msg-1",
+    sessionID: "session-1",
+    role: "user",
+    time: { created: Date.now() },
+    agent: "build",
+    model: { providerID: "openai", modelID: "gpt-4" },
+  },
+  {
+    id: "msg-2",
+    sessionID: "session-1",
+    role: "user",
+    time: { created: Date.now() },
+    agent: "build",
+    model: { providerID: "openai", modelID: "gpt-4" },
+  },
+  {
+    id: "msg-3",
+    sessionID: "session-1",
+    role: "user",
+    time: { created: Date.now() },
+    agent: "build",
+    model: { providerID: "openai", modelID: "gpt-4" },
+  },
+]
+
+const mockParts: Record<string, Part[]> = {
+  "msg-1": [
+    { id: "p1", sessionID: "session-1", messageID: "msg-1", type: "text", text: "Short" } as Part,
+  ],
+  "msg-2": [
+    {
+      id: "p2",
+      sessionID: "session-1",
+      messageID: "msg-2",
+      type: "text",
+      text: "This is a medium length message that contains more content than the first one but less than the third message in this conversation.",
+    } as Part,
+  ],
+  "msg-3": [
+    {
+      id: "p3",
+      sessionID: "session-1",
+      messageID: "msg-3",
+      type: "text",
+      text: "This is a very long message with lots of detailed information about the task at hand. It contains multiple paragraphs and extensive context that the AI needs to understand in order to provide a helpful response. The width of the navigation bar should be proportional to this content length, making it visibly wider than the shorter messages above.",
+    } as Part,
+    { id: "p4", sessionID: "session-1", messageID: "msg-3", type: "file", mime: "image/png", filename: "screenshot.png", url: "https://via.placeholder.com/150" } as Part,
+    { id: "p5", sessionID: "session-1", messageID: "msg-3", type: "file", mime: "application/pdf", filename: "document.pdf", url: "#" } as Part,
+  ],
+}
+
+export default {
+  title: "UI/InputNav",
+  component: InputNav,
+}
+
+export const Basic = {
+  args: {
+    messages: mockMessages,
+    getParts: (messageID: string) => mockParts[messageID] ?? [],
+    current: mockMessages[1],
+    onMessageSelect: (msg: UserMessage) => console.log("Selected:", msg.id),
+  },
+  decorators: [
+    (Story: any) => (
+      <div style={{ position: "relative", width: "400px", height: "300px", border: "1px solid #ccc", overflow: "hidden" }}>
+        <div style={{ padding: "16px", color: "#666" }}>
+          <p>Session content area</p>
+          <p>Hover the bars on the right to see previews</p>
+        </div>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const WithoutCurrent = {
+  args: {
+    messages: mockMessages,
+    getParts: (messageID: string) => mockParts[messageID] ?? [],
+    current: undefined,
+    onMessageSelect: (msg: UserMessage) => console.log("Selected:", msg.id),
+  },
+  decorators: Basic.decorators,
+}