size.start()}>
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 }
+}
diff --git a/packages/session-ui/src/components/input-nav.css b/packages/session-ui/src/components/input-nav.css
new file mode 100644
index 000000000000..fe632b10005a
--- /dev/null
+++ b/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);
+}
diff --git a/packages/session-ui/src/components/input-nav.stories.tsx b/packages/session-ui/src/components/input-nav.stories.tsx
new file mode 100644
index 000000000000..373a47620895
--- /dev/null
+++ b/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 = {
+ "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) => (
+ (null)
+
+ return (
+ InputNav Component Test
+
+
+
+
+
+ ),
+ ],
+}
+
+export const WithoutCurrent = {
+ args: {
+ messages: mockMessages,
+ getParts: (messageID: string) => mockParts[messageID] ?? [],
+ current: undefined,
+ onMessageSelect: (msg: UserMessage) => console.log("Selected:", msg.id),
+ },
+ decorators: Basic.decorators,
+}
diff --git a/packages/session-ui/src/components/input-nav.test.ts b/packages/session-ui/src/components/input-nav.test.ts
new file mode 100644
index 000000000000..7b574b8ad8a7
--- /dev/null
+++ b/packages/session-ui/src/components/input-nav.test.ts
@@ -0,0 +1,105 @@
+import { describe, expect, test } from "bun:test"
+import { computeBarWidth, extractPreviewContent } from "./input-nav-utils"
+import type { Part } from "@opencode-ai/sdk/v2"
+
+describe("computeBarWidth", () => {
+ test("returns min width for empty text", () => {
+ expect(computeBarWidth("")).toBe(4)
+ })
+
+ test("returns min width for very short text", () => {
+ expect(computeBarWidth("hi")).toBe(4)
+ })
+
+ test("scales width proportionally to text length", () => {
+ const short = computeBarWidth("hello world")
+ const long = computeBarWidth("a".repeat(500))
+ expect(long).toBeGreaterThan(short)
+ })
+
+ test("caps at max width for very long text", () => {
+ const result = computeBarWidth("a".repeat(10000))
+ expect(result).toBe(24)
+ })
+
+ test("returns integer widths", () => {
+ expect(Number.isInteger(computeBarWidth("test"))).toBe(true)
+ expect(Number.isInteger(computeBarWidth("a".repeat(300)))).toBe(true)
+ })
+})
+
+describe("extractPreviewContent", () => {
+ const makeTextPart = (text: string): Part => ({
+ id: "p1",
+ sessionID: "s1",
+ messageID: "m1",
+ type: "text",
+ text,
+ }) as Part
+
+ const makeFilePart = (mime: string, filename?: string, url = "http://example.com/file"): Part => ({
+ id: "p2",
+ sessionID: "s1",
+ messageID: "m1",
+ type: "file",
+ mime,
+ filename,
+ url,
+ }) as Part
+
+ test("extracts text from TextPart", () => {
+ const parts = [makeTextPart("Hello world")]
+ const result = extractPreviewContent(parts)
+ expect(result.text).toBe("Hello world")
+ expect(result.images).toHaveLength(0)
+ expect(result.files).toHaveLength(0)
+ })
+
+ test("truncates long text to 200 characters", () => {
+ const longText = "a".repeat(300)
+ const parts = [makeTextPart(longText)]
+ const result = extractPreviewContent(parts)
+ expect(result.text?.length).toBe(203) // 200 + "..."
+ expect(result.text?.endsWith("...")).toBe(true)
+ })
+
+ test("skips synthetic text parts", () => {
+ const synthetic = { ...makeTextPart("synthetic"), synthetic: true } as Part
+ const real = makeTextPart("real content")
+ const parts = [synthetic, real]
+ const result = extractPreviewContent(parts)
+ expect(result.text).toBe("real content")
+ })
+
+ test("extracts image files", () => {
+ const parts = [makeFilePart("image/png", "screenshot.png")]
+ const result = extractPreviewContent(parts)
+ expect(result.images).toHaveLength(1)
+ expect(result.images[0].filename).toBe("screenshot.png")
+ })
+
+ test("extracts non-image files", () => {
+ const parts = [makeFilePart("application/pdf", "document.pdf")]
+ const result = extractPreviewContent(parts)
+ expect(result.files).toHaveLength(1)
+ expect(result.files[0].filename).toBe("document.pdf")
+ })
+
+ test("separates images from other files", () => {
+ const parts = [
+ makeFilePart("image/png", "photo.png"),
+ makeFilePart("text/plain", "readme.txt"),
+ makeFilePart("image/jpeg", "diagram.jpg"),
+ ]
+ const result = extractPreviewContent(parts)
+ expect(result.images).toHaveLength(2)
+ expect(result.files).toHaveLength(1)
+ })
+
+ test("returns empty content for empty parts", () => {
+ const result = extractPreviewContent([])
+ expect(result.text).toBeUndefined()
+ expect(result.images).toHaveLength(0)
+ expect(result.files).toHaveLength(0)
+ })
+})
diff --git a/packages/session-ui/src/components/input-nav.tsx b/packages/session-ui/src/components/input-nav.tsx
new file mode 100644
index 000000000000..02fa1902fa5c
--- /dev/null
+++ b/packages/session-ui/src/components/input-nav.tsx
@@ -0,0 +1,109 @@
+import { HoverCard } from "@kobalte/core/hover-card"
+import { ComponentProps, For, Show, createSignal, splitProps } from "solid-js"
+import type { Part, UserMessage } from "@opencode-ai/sdk/v2"
+import { computeBarWidth, extractPreviewContent, type PreviewContent } from "./input-nav-utils"
+import "./input-nav.css"
+
+export function InputNav(
+ props: ComponentProps<"div"> & {
+ messages: UserMessage[]
+ getParts: (messageID: string) => Part[]
+ current?: UserMessage
+ onMessageSelect: (message: UserMessage) => void
+ },
+) {
+ const [local, others] = splitProps(props, ["messages", "getParts", "current", "onMessageSelect", "class"])
+ const [hoveredIndex, setHoveredIndex] = createSignal
+
+ Session content area
+Hover the bars on the right to see previews
+
+
+ {(message, index) => {
+ const isActive = () => message.id === local.current?.id
+ const barWidth = () => {
+ const parts = local.getParts(message.id)
+ const textPart = parts.find(
+ (p): p is Part & { type: "text"; text: string } =>
+ p.type === "text" && !(p as { synthetic?: boolean }).synthetic,
+ )
+ return computeBarWidth(textPart?.text ?? "")
+ }
+
+ const handleClick = () => local.onMessageSelect(message)
+
+ const handleKeyPress = (event: KeyboardEvent) => {
+ if (event.key !== "Enter" && event.key !== " ") return
+ event.preventDefault()
+ local.onMessageSelect(message)
+ }
+
+ const preview = () => extractPreviewContent(local.getParts(message.id))
+
+ return (
+ setHoveredIndex(open ? index() : null)}
+ openDelay={200}
+ closeDelay={100}
+ placement="left"
+ gutter={8}
+ overflowPadding={24}
+ fitViewport
+ >
+
+
+
+
+
+
+
+
+ )
+ }}
+
+
+ )
+}
+
+function PreviewPanel(props: { preview: PreviewContent }) {
+ return (
+
+
+
+ 0}>
+
+ 0}>
+
+
+
+
+ )
+}
diff --git a/test-page.html b/test-page.html
new file mode 100644
index 000000000000..cc92ed4679a9
--- /dev/null
+++ b/test-page.html
@@ -0,0 +1,212 @@
+
+
+
+
+ {props.preview.text}
+
+
+ {(img) => (
+ 
+ )}
+
+
+
+
+ {(file) => (
+
+
+
+ 📄
+ {file.filename ?? file.mime}
+
+ )}
+ No preview available
+ InputNav Component - Session Panel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Great! Now please add a submit button that is disabled until all fields are valid. Also add a loading state while the form is being submitted. When the form is submitted successfully, show a success message and reset the form.
+
+ 
+
+
+
+
+ 📄 SignupForm.tsx
+