From c39e2feda8da0b1e2677ea3fd4e981efcfecb009 Mon Sep 17 00:00:00 2001
From: JJ Lee <jeonghun.jj.lee@gmail.com>
Date: Tue, 11 Aug 2026 03:18:25 +0200
Subject: [PATCH 01/16] feat(app): add Preview tab and Panel Menu to side panel
 (#162)

- Add SESSION_PREVIEW_TAB constant and tab registration in layout-tabs.ts
- Add previewOpen signal and preview tab filtering in helpers.ts
- Create SessionPreviewTab component: file list with A/M badges, rendered
  markdown preview via existing Markdown component, raw editor with
  debounced auto-save and Cmd+S support
- Create PanelMenu dropdown component replacing the + button in both v1
  and v2 side panel layouts
- Wire Preview tab trigger and content in both layout paths
- Tab only shows when .md files have been AI-modified in the session
- Export new components from session/index.ts

Remaining work:
- Add /file/write server endpoint for raw editor saves
- Remove SESSION_OPEN_FILE_TAB and related dead code paths
- Test end-to-end in the running app
---
 packages/app/src/components/session/index.ts  |   2 +
 .../app/src/components/session/panel-menu.tsx |  73 +++++
 .../session/session-preview-tab.tsx           | 273 ++++++++++++++++++
 packages/app/src/context/layout-tabs.ts       |   3 +-
 packages/app/src/pages/session/helpers.ts     |  12 +-
 .../src/pages/session/session-side-panel.tsx  | 161 ++++++++---
 6 files changed, 480 insertions(+), 44 deletions(-)
 create mode 100644 packages/app/src/components/session/panel-menu.tsx
 create mode 100644 packages/app/src/components/session/session-preview-tab.tsx

diff --git a/packages/app/src/components/session/index.ts b/packages/app/src/components/session/index.ts
index c4fdb2ff3..92b194974 100644
--- a/packages/app/src/components/session/index.ts
+++ b/packages/app/src/components/session/index.ts
@@ -1,5 +1,7 @@
 export { SessionHeader } from "./session-header"
 export { SessionContextTab } from "./session-context-tab"
+export { SessionPreviewTab } from "./session-preview-tab"
+export { PanelMenu } from "./panel-menu"
 export { SortableTab, FileVisual } from "./session-sortable-tab"
 export { SortableTabV2 } from "./session-sortable-tab-v2"
 export { SortableTerminalTab } from "./session-sortable-terminal-tab"
diff --git a/packages/app/src/components/session/panel-menu.tsx b/packages/app/src/components/session/panel-menu.tsx
new file mode 100644
index 000000000..ba8b903e3
--- /dev/null
+++ b/packages/app/src/components/session/panel-menu.tsx
@@ -0,0 +1,73 @@
+import { For, Show } from "solid-js"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+
+export interface PanelMenuItem {
+  id: string
+  label: string
+  icon: string
+  available: () => boolean
+  active?: () => boolean
+}
+
+// ─── Component ──────────────────────────────────────────────────────────────
+
+export function PanelMenu(props: {
+  items: PanelMenuItem[]
+  onSelect: (id: string) => void
+  openFileKeybind?: () => string[][]
+  v2?: boolean
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger class="flex items-center justify-center">
+        <Show
+          when={props.v2}
+          fallback={
+            <IconButton
+              icon="plus-small"
+              variant="ghost"
+              iconSize="large"
+              class="!rounded-md"
+              aria-label="Open panel"
+            />
+          }
+        >
+          <IconButtonV2
+            icon={<Icon name="plus-small" />}
+            variant="ghost-muted"
+            size="large"
+            aria-label="Open panel"
+          />
+        </Show>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          class="z-50 min-w-[160px] overflow-hidden rounded-lg border border-border-base bg-background-base p-1 shadow-md animate-in fade-in-0 zoom-in-95"
+        >
+          <For each={props.items.filter((item) => item.available())}>
+            {(item) => (
+              <DropdownMenu.Item
+                class="flex items-center gap-2 px-2.5 py-1.5 rounded-md text-12-regular text-text-base cursor-pointer outline-none hover:bg-background-stronger focus:bg-background-stronger transition-colors"
+                classList={{
+                  "opacity-60": item.active?.() ?? false,
+                }}
+                onSelect={() => props.onSelect(item.id)}
+              >
+                <Icon name={item.icon as any} size="small" class="text-text-weak" />
+                <span>{item.label}</span>
+                <Show when={item.active?.()}>
+                  <Icon name="check-small" size="small" class="ml-auto text-text-weak" />
+                </Show>
+              </DropdownMenu.Item>
+            )}
+          </For>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu>
+  )
+}
diff --git a/packages/app/src/components/session/session-preview-tab.tsx b/packages/app/src/components/session/session-preview-tab.tsx
new file mode 100644
index 000000000..c25350c74
--- /dev/null
+++ b/packages/app/src/components/session/session-preview-tab.tsx
@@ -0,0 +1,273 @@
+import { createEffect, createMemo, createSignal, For, on, onCleanup, Show } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Markdown } from "@opencode-ai/session-ui/markdown"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { useSDK } from "@/context/sdk"
+import { useServerSDK } from "@/context/server-sdk"
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+
+export interface PreviewFileEntry {
+  path: string
+  relativePath: string
+  basename: string
+  extension: ".md"
+  changeType: "added" | "modified"
+}
+
+interface PreviewFileState {
+  mode: "preview" | "raw"
+  scrollPosition?: number
+  unsavedContent?: string
+}
+
+// ─── Main Component ─────────────────────────────────────────────────────────
+
+export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; status?: string }> }) {
+  const sdk = useSDK()
+  const serverSDK = useServerSDK()
+  const [selectedFile, setSelectedFile] = createSignal<string | undefined>(undefined)
+  const [fileStates, setFileStates] = createStore<Record<string, PreviewFileState>>({})
+  const [fileContent, setFileContent] = createSignal<string>("")
+  const [loading, setLoading] = createSignal(false)
+
+  // Filter diffs to only .md files
+  const markdownFiles = createMemo((): PreviewFileEntry[] => {
+    return props
+      .diffs()
+      .filter((d) => d.file.endsWith(".md"))
+      .map((d) => {
+        const parts = d.file.split("/")
+        const basename = parts[parts.length - 1]
+        // relativePath: strip leading ~/ prefix
+        const relativePath = d.file.startsWith("~/") ? d.file.slice(2) : d.file
+        return {
+          path: d.file,
+          relativePath,
+          basename,
+          extension: ".md" as const,
+          changeType: (d.status === "added" ? "added" : "modified") as "added" | "modified",
+        }
+      })
+  })
+
+  // Load file content when a file is selected
+  createEffect(
+    on(selectedFile, (path) => {
+      if (!path) return
+      setLoading(true)
+
+      // Resolve the actual filesystem path from the display path
+      const fsPath = path.startsWith("~/")
+        ? path.replace("~", process.env.HOME ?? "")
+        : path
+
+      sdk()
+        .client.file.read({ path: fsPath })
+        .then((result) => {
+          const content = result.data
+          if (content && content.type === "text") {
+            setFileContent(content.content)
+          }
+        })
+        .catch(() => {
+          setFileContent("")
+        })
+        .finally(() => {
+          setLoading(false)
+        })
+    }),
+  )
+
+  const currentMode = createMemo(() => {
+    const path = selectedFile()
+    if (!path) return "preview"
+    return fileStates[path]?.mode ?? "preview"
+  })
+
+  const toggleMode = () => {
+    const path = selectedFile()
+    if (!path) return
+    const current = fileStates[path]?.mode ?? "preview"
+    const next = current === "preview" ? "raw" : "preview"
+    setFileStates(path, { ...fileStates[path], mode: next })
+  }
+
+  const goBack = () => {
+    setSelectedFile(undefined)
+  }
+
+  // ─── Raw Editor Save ────────────────────────────────────────────────────
+
+  let saveTimer: ReturnType<typeof setTimeout> | undefined
+
+  const saveFile = (path: string, content: string) => {
+    const fsPath = path.startsWith("~/")
+      ? path.replace("~", process.env.HOME ?? "")
+      : path
+
+    const baseUrl = serverSDK().url
+    if (!baseUrl) return
+
+    // POST to the file write endpoint
+    fetch(new URL("/file/write", baseUrl), {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ path: fsPath, content }),
+    }).catch(() => {
+      // Silently fail — save is best-effort in the preview
+    })
+  }
+
+  const debouncedSave = (path: string, content: string) => {
+    if (saveTimer) clearTimeout(saveTimer)
+    saveTimer = setTimeout(() => saveFile(path, content), 1000)
+  }
+
+  const immediateSave = () => {
+    const path = selectedFile()
+    if (!path) return
+    const content = fileStates[path]?.unsavedContent
+    if (content !== undefined) {
+      if (saveTimer) clearTimeout(saveTimer)
+      saveFile(path, content)
+      setFileStates(path, { ...fileStates[path], unsavedContent: undefined })
+    }
+  }
+
+  const handleRawEdit = (content: string) => {
+    const path = selectedFile()
+    if (!path) return
+    setFileStates(path, { ...fileStates[path], unsavedContent: content })
+    setFileContent(content)
+    debouncedSave(path, content)
+  }
+
+  onCleanup(() => {
+    if (saveTimer) clearTimeout(saveTimer)
+  })
+
+  // ─── Render ─────────────────────────────────────────────────────────────
+
+  return (
+    <div class="h-full flex flex-col overflow-hidden">
+      <Show
+        when={selectedFile()}
+        fallback={<PreviewFileList files={markdownFiles()} onSelect={setSelectedFile} />}
+      >
+        {(path) => (
+          <div class="h-full flex flex-col overflow-hidden">
+            {/* Header with back button and mode toggle */}
+            <div class="shrink-0 flex items-center gap-2 px-3 py-2 border-b border-border-weaker-base">
+              <IconButton
+                icon="arrow-left"
+                variant="ghost"
+                class="h-6 w-6"
+                onClick={goBack}
+                aria-label="Back to file list"
+              />
+              <div class="flex-1 min-w-0 text-12-regular text-text-base truncate">
+                {markdownFiles().find((f) => f.path === path())?.basename ?? path()}
+              </div>
+              <button
+                class="shrink-0 flex items-center gap-1 px-2 py-1 rounded text-11-regular text-text-weak hover:text-text-base hover:bg-background-stronger transition-colors"
+                onClick={toggleMode}
+              >
+                <Icon name={currentMode() === "preview" ? "edit" : "eye"} size="small" />
+                <span>{currentMode() === "preview" ? "Raw" : "Preview"}</span>
+              </button>
+            </div>
+
+            {/* Content area */}
+            <div class="flex-1 min-h-0 overflow-auto">
+              <Show when={!loading()} fallback={<div class="p-4 text-12-regular text-text-weak">Loading...</div>}>
+                <Show
+                  when={currentMode() === "preview"}
+                  fallback={
+                    <RawEditor
+                      content={fileContent()}
+                      onEdit={handleRawEdit}
+                      onSave={immediateSave}
+                    />
+                  }
+                >
+                  <div class="p-4">
+                    <Markdown text={fileContent()} class="text-12-regular" />
+                  </div>
+                </Show>
+              </Show>
+            </div>
+          </div>
+        )}
+      </Show>
+    </div>
+  )
+}
+
+// ─── File List ──────────────────────────────────────────────────────────────
+
+function PreviewFileList(props: { files: PreviewFileEntry[]; onSelect: (path: string) => void }) {
+  return (
+    <div class="h-full overflow-auto">
+      <Show
+        when={props.files.length > 0}
+        fallback={
+          <div class="h-full flex items-center justify-center text-12-regular text-text-weak p-4">
+            No markdown files modified in this session
+          </div>
+        }
+      >
+        <div class="py-1">
+          <For each={props.files}>
+            {(file) => (
+              <button
+                class="w-full flex items-center gap-2 px-3 py-1.5 text-left hover:bg-background-stronger transition-colors"
+                onClick={() => props.onSelect(file.path)}
+              >
+                <span
+                  class="shrink-0 w-4 h-4 flex items-center justify-center rounded text-10-medium"
+                  classList={{
+                    "bg-green-500/15 text-green-500": file.changeType === "added",
+                    "bg-yellow-500/15 text-yellow-500": file.changeType === "modified",
+                  }}
+                >
+                  {file.changeType === "added" ? "A" : "M"}
+                </span>
+                <div class="flex-1 min-w-0">
+                  <div class="text-12-regular text-text-base truncate">{file.basename}</div>
+                  <div class="text-11-regular text-text-weak truncate">{file.relativePath}</div>
+                </div>
+              </button>
+            )}
+          </For>
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+// ─── Raw Editor ─────────────────────────────────────────────────────────────
+
+function RawEditor(props: { content: string; onEdit: (content: string) => void; onSave: () => void }) {
+  let textareaRef: HTMLTextAreaElement | undefined
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+      e.preventDefault()
+      props.onSave()
+    }
+  }
+
+  return (
+    <textarea
+      ref={(el) => (textareaRef = el)}
+      class="w-full h-full p-4 resize-none bg-transparent text-12-regular text-text-base font-mono outline-none border-none"
+      style={{ "tab-size": "2" }}
+      value={props.content}
+      onInput={(e) => props.onEdit(e.currentTarget.value)}
+      onKeyDown={handleKeyDown}
+      spellcheck={false}
+    />
+  )
+}
diff --git a/packages/app/src/context/layout-tabs.ts b/packages/app/src/context/layout-tabs.ts
index ea4c675ff..3e9f0f739 100644
--- a/packages/app/src/context/layout-tabs.ts
+++ b/packages/app/src/context/layout-tabs.ts
@@ -1,4 +1,5 @@
 export const SESSION_OPEN_FILE_TAB = "open-file"
+export const SESSION_PREVIEW_TAB = "preview"
 
 export type SessionTabs = {
   active?: string
@@ -49,7 +50,7 @@ export function openSessionTab(current: SessionTabState, tab: string): SessionTa
     }
   }
 
-  if (tab === "context") {
+  if (tab === "context" || tab === SESSION_PREVIEW_TAB) {
     return {
       tabs: { all: [tab, ...current.tabs.all.filter((item) => item !== tab)], active: tab },
       preview,
diff --git a/packages/app/src/pages/session/helpers.ts b/packages/app/src/pages/session/helpers.ts
index 992b7d4b4..73cb4c9a2 100644
--- a/packages/app/src/pages/session/helpers.ts
+++ b/packages/app/src/pages/session/helpers.ts
@@ -2,9 +2,9 @@ import { batch, createMemo, onCleanup, onMount, type Accessor } from "solid-js"
 import { createStore } from "solid-js/store"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { same } from "@/utils/same"
-import { SESSION_OPEN_FILE_TAB } from "@/context/layout-tabs"
+import { SESSION_OPEN_FILE_TAB, SESSION_PREVIEW_TAB } from "@/context/layout-tabs"
 
-export { SESSION_OPEN_FILE_TAB } from "@/context/layout-tabs"
+export { SESSION_OPEN_FILE_TAB, SESSION_PREVIEW_TAB } from "@/context/layout-tabs"
 
 const emptyTabs: string[] = []
 
@@ -36,6 +36,9 @@ export const createSessionTabs = (input: TabsInput) => {
   const vaultOpen = input.vaultOpen ?? (() => false)
   const fileBrowser = input.fileBrowser ?? (() => false)
   const contextOpen = createMemo(() => input.tabs().active() === "context" || input.tabs().all().includes("context"))
+  const previewOpen = createMemo(
+    () => input.tabs().active() === SESSION_PREVIEW_TAB || input.tabs().all().includes(SESSION_PREVIEW_TAB),
+  )
   const openFileOpen = createMemo(
     () =>
       fileBrowser() &&
@@ -48,7 +51,7 @@ export const createSessionTabs = (input: TabsInput) => {
         .tabs()
         .all()
         .flatMap((tab) => {
-          if (tab === "context" || tab === "review" || tab === "vault") return []
+          if (tab === "context" || tab === "review" || tab === "vault" || tab === SESSION_PREVIEW_TAB) return []
           if (tab === SESSION_OPEN_FILE_TAB && !fileBrowser()) return []
           const value = input.pathFromTab(tab) ? input.normalizeTab(tab) : tab
           if (seen.has(value)) return []
@@ -65,6 +68,7 @@ export const createSessionTabs = (input: TabsInput) => {
   const activeTab = createMemo(() => {
     const active = input.tabs().active()
     if (active === "context") return active
+    if (active === SESSION_PREVIEW_TAB && previewOpen()) return active
     if (active === "vault" && vaultOpen()) return active
     if (active === SESSION_OPEN_FILE_TAB && openFileOpen()) return active
     if (active === "review" && review()) return active
@@ -73,6 +77,7 @@ export const createSessionTabs = (input: TabsInput) => {
     const first = openedTabs()[0]
     if (first) return first
     if (vaultOpen()) return "vault"
+    if (previewOpen()) return SESSION_PREVIEW_TAB
     if (contextOpen()) return "context"
     if (review() && hasReview()) return "review"
     return "empty"
@@ -92,6 +97,7 @@ export const createSessionTabs = (input: TabsInput) => {
 
   return {
     contextOpen,
+    previewOpen,
     openFileOpen,
     panelTabs,
     openedTabs,
diff --git a/packages/app/src/pages/session/session-side-panel.tsx b/packages/app/src/pages/session/session-side-panel.tsx
index 71119f10b..11e484b4a 100644
--- a/packages/app/src/pages/session/session-side-panel.tsx
+++ b/packages/app/src/pages/session/session-side-panel.tsx
@@ -35,7 +35,8 @@ import { SessionContextUsage } from "@/components/session-context-usage"
 const reviewTabID = "session-side-panel-review-tab"
 const reviewTabPanelID = "session-side-panel-review-tabpanel"
 const fileBrowserTabPanelID = "session-side-panel-file-browser-tabpanel"
-import { SessionContextTab, SortableTab, SortableTabV2, FileVisual } from "@/components/session"
+import { SessionContextTab, SortableTab, SortableTabV2, FileVisual, SessionPreviewTab, PanelMenu } from "@/components/session"
+import type { PanelMenuItem } from "@/components/session/panel-menu"
 import { OpenInAppV2 } from "@/components/session/open-in-app-v2"
 import { useCommand } from "@/context/command"
 import { useFile, type SelectedLineRange } from "@/context/file"
@@ -47,6 +48,7 @@ import { createFileTabListSync } from "@/pages/session/file-tab-scroll"
 import { FileTabContent } from "@/pages/session/file-tabs"
 import {
   SESSION_OPEN_FILE_TAB,
+  SESSION_PREVIEW_TAB,
   createOpenSessionFileTab,
   createSessionTabs,
   getTabReorderIndex,
@@ -191,6 +193,7 @@ export function SessionSidePanel(props: {
     fileBrowser: () => !!props.fileBrowserState,
   })
   const contextOpen = tabState.contextOpen
+  const previewOpen = tabState.previewOpen
   const openFileOpen = tabState.openFileOpen
   const panelTabs = tabState.panelTabs
   const openedTabs = tabState.openedTabs
@@ -247,8 +250,37 @@ export function SessionSidePanel(props: {
   })
   const fileBrowserVisible = createMemo(() => {
     const active = activeTab()
-    return active !== "review" && active !== "context" && active !== "empty"
+    return active !== "review" && active !== "context" && active !== "empty" && active !== SESSION_PREVIEW_TAB
   })
+
+  // Markdown files for the Preview tab (only shown when at least one .md file exists)
+  const markdownDiffs = createMemo(() => diffs().filter((d) => d.file.endsWith(".md")))
+  const hasMarkdownFiles = createMemo(() => markdownDiffs().length > 0)
+
+  // Panel menu items
+  const panelMenuItems = createMemo((): PanelMenuItem[] => [
+    {
+      id: "context",
+      label: "Context",
+      icon: "brain",
+      available: () => true,
+      active: contextOpen,
+    },
+    {
+      id: SESSION_PREVIEW_TAB,
+      label: "Preview",
+      icon: "eye",
+      available: hasMarkdownFiles,
+      active: previewOpen,
+    },
+  ])
+
+  const handlePanelMenuSelect = (id: string) => {
+    tabs().open(id)
+    tabs().setActive(id)
+    openReviewPanel()
+  }
+
   const openFileKeybind = createMemo(() => command.keybindParts("file.open"))
   const closeTabKeybind = createMemo(() => command.keybindParts("tab.close"))
   const [store, setStore] = createStore({
@@ -419,6 +451,34 @@ export function SessionSidePanel(props: {
                                   </div>
                                 </Tabs.Trigger>
                               </div>
+                              <div style={{ display: previewOpen() && hasMarkdownFiles() ? undefined : "none" }}>
+                                <Tabs.Trigger
+                                  value={SESSION_PREVIEW_TAB}
+                                  closeButton={
+                                    <TooltipKeybind
+                                      title={language.t("common.closeTab")}
+                                      keybind={command.keybind("tab.close")}
+                                      placement="bottom"
+                                      gutter={10}
+                                    >
+                                      <IconButton
+                                        icon="close-small"
+                                        variant="ghost"
+                                        class="h-5 w-5"
+                                        onClick={() => tabs().close(SESSION_PREVIEW_TAB)}
+                                        aria-label={language.t("common.closeTab")}
+                                      />
+                                    </TooltipKeybind>
+                                  }
+                                  hideCloseButton
+                                  onMiddleClick={() => tabs().close(SESSION_PREVIEW_TAB)}
+                                >
+                                  <div class="flex items-center gap-2">
+                                    <Icon name="eye" size="small" />
+                                    <div>Preview</div>
+                                  </div>
+                                </Tabs.Trigger>
+                              </div>
                               <SortableProvider ids={openedTabs()}>
                                 <For each={panelTabs()}>
                                   {(tab) => (
@@ -470,24 +530,10 @@ export function SessionSidePanel(props: {
                                   "bg-background-stronger": !settings.general.newLayoutDesigns(),
                                 }}
                               >
-                                <TooltipKeybind
-                                  title={language.t("command.file.open")}
-                                  keybind={command.keybind("file.open")}
-                                  class="flex items-center"
-                                >
-                                  <IconButton
-                                    icon="plus-small"
-                                    variant="ghost"
-                                    iconSize="large"
-                                    class="!rounded-md"
-                                    onClick={() => {
-                                      void import("@/components/dialog-select-file").then((x) => {
-                                        dialog.show(() => <x.DialogSelectFile mode="files" onOpenFile={showAllFiles} />)
-                                      })
-                                    }}
-                                    aria-label={language.t("command.file.open")}
-                                  />
-                                </TooltipKeybind>
+                                <PanelMenu
+                                  items={panelMenuItems()}
+                                  onSelect={handlePanelMenuSelect}
+                                />
                               </div>
                             </Tabs.List>
                           </div>
@@ -526,6 +572,14 @@ export function SessionSidePanel(props: {
                             </Tabs.Content>
                           </Show>
 
+                          <Show when={activeTab() === SESSION_PREVIEW_TAB}>
+                            <Tabs.Content value={SESSION_PREVIEW_TAB} class="flex flex-col h-full overflow-hidden contain-strict">
+                              <div class="relative flex-1 min-h-0 overflow-hidden">
+                                <SessionPreviewTab diffs={diffs} />
+                              </div>
+                            </Tabs.Content>
+                          </Show>
+
                           <Show when={activeFileTab()} keyed>
                             {(tab) => <FileTabContent tab={tab} />}
                           </Show>
@@ -633,6 +687,40 @@ export function SessionSidePanel(props: {
                                 </div>
                               </Tabs.Trigger>
                             </div>
+                            <div style={{ display: previewOpen() && hasMarkdownFiles() ? undefined : "none" }}>
+                              <Tabs.Trigger
+                                value={SESSION_PREVIEW_TAB}
+                                closeButton={
+                                  <TooltipV2
+                                    value={
+                                      <>
+                                        {language.t("common.closeTab")}
+                                        <Show when={closeTabKeybind().length > 0}>
+                                          <KeybindV2 keys={closeTabKeybind()} variant="neutral" />
+                                        </Show>
+                                      </>
+                                    }
+                                    placement="bottom"
+                                    gutter={10}
+                                  >
+                                    <IconButton
+                                      icon="close-small"
+                                      variant="ghost"
+                                      class="h-5 w-5"
+                                      onClick={() => tabs().close(SESSION_PREVIEW_TAB)}
+                                      aria-label={language.t("common.closeTab")}
+                                    />
+                                  </TooltipV2>
+                                }
+                                hideCloseButton
+                                onMiddleClick={() => tabs().close(SESSION_PREVIEW_TAB)}
+                              >
+                                <div class="flex items-center gap-2">
+                                  <Icon name="eye" size="small" />
+                                  <div>Preview</div>
+                                </div>
+                              </Tabs.Trigger>
+                            </div>
                             <For each={panelTabs()}>
                               {(tab) => (
                                 <Show
@@ -689,26 +777,11 @@ export function SessionSidePanel(props: {
                                 "bg-background-stronger": !settings.general.newLayoutDesigns(),
                               }}
                             >
-                              <TooltipV2
-                                value={
-                                  <>
-                                    {language.t("command.file.open")}
-                                    <Show when={openFileKeybind().length > 0}>
-                                      <KeybindV2 keys={openFileKeybind()} variant="neutral" />
-                                    </Show>
-                                  </>
-                                }
-                                placement="bottom"
-                                class="flex items-center"
-                              >
-                                <IconButtonV2
-                                  icon={<Icon name="plus-small" />}
-                                  variant="ghost-muted"
-                                  size="large"
-                                  onClick={() => openFileBrowser()}
-                                  aria-label={language.t("command.file.open")}
-                                />
-                              </TooltipV2>
+                              <PanelMenu
+                                items={panelMenuItems()}
+                                onSelect={handlePanelMenuSelect}
+                                v2
+                              />
                             </div>
                           </Tabs.List>
                           <div
@@ -754,6 +827,14 @@ export function SessionSidePanel(props: {
                           </Tabs.Content>
                         </Show>
 
+                        <Show when={activeTab() === SESSION_PREVIEW_TAB}>
+                          <Tabs.Content value={SESSION_PREVIEW_TAB} class="flex flex-col h-full overflow-hidden contain-strict">
+                            <div class="relative flex-1 min-h-0 overflow-hidden">
+                              <SessionPreviewTab diffs={diffs} />
+                            </div>
+                          </Tabs.Content>
+                        </Show>
+
                         <Show when={fileBrowserMounted()}>
                           <div
                             id={fileBrowserTabPanelID}

From 4a23c672a33640512bd8ac327d2859f746c4c8e9 Mon Sep 17 00:00:00 2001
From: JJ Lee <jeonghun.jj.lee@gmail.com>
Date: Tue, 11 Aug 2026 03:32:37 +0200
Subject: [PATCH 02/16] feat: add /file/write endpoint, remove
 SESSION_OPEN_FILE_TAB inline browser

Server:
- Add POST /file/write endpoint to the file API group with path
  containment check and writeWithDirs for safe file writes from the
  Preview tab's raw editor

Client (session-side-panel):
- Remove the SESSION_OPEN_FILE_TAB inline file browser trigger from both
  v1 and v2 tab lists (the spec removes the inline file opener)
- Remove openFileBrowser() function (replaced by PanelMenu)
- Remove the lazy DialogSelectFile import from the old + button
- Remove unused useDialog import and openFileKeybind memo
- Simplify the For-each-panelTabs render (no more Show branch for
  open-file tab)
- SessionFileBrowserTab still renders file content for open file tabs
  (only the 'open-file' tab trigger is removed, not file viewing)
---
 .../src/pages/session/session-side-panel.tsx  | 113 +++---------------
 .../routes/instance/httpapi/groups/file.ts    |  17 +++
 .../routes/instance/httpapi/handlers/file.ts  |   9 ++
 3 files changed, 42 insertions(+), 97 deletions(-)

diff --git a/packages/app/src/pages/session/session-side-panel.tsx b/packages/app/src/pages/session/session-side-panel.tsx
index 11e484b4a..aa6635aef 100644
--- a/packages/app/src/pages/session/session-side-panel.tsx
+++ b/packages/app/src/pages/session/session-side-panel.tsx
@@ -26,7 +26,6 @@ import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import type { SnapshotFileDiff, VcsFileDiff } from "@opencode-ai/sdk/v2"
 import type { FileDiffInfo } from "@opencode-ai/client/promise"
 import { ConstrainDragYAxis, getDraggableId } from "@/utils/solid-dnd"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
 
 import FileTree from "@/components/file-tree"
 import { normalizeFileTreeV2Path } from "@/components/file-tree-v2-model"
@@ -47,7 +46,6 @@ import { useSettings } from "@/context/settings"
 import { createFileTabListSync } from "@/pages/session/file-tab-scroll"
 import { FileTabContent } from "@/pages/session/file-tabs"
 import {
-  SESSION_OPEN_FILE_TAB,
   SESSION_PREVIEW_TAB,
   createOpenSessionFileTab,
   createSessionTabs,
@@ -90,7 +88,6 @@ export function SessionSidePanel(props: {
   const file = useFile()
   const language = useLanguage()
   const command = useCommand()
-  const dialog = useDialog()
   const sdk = useSDK()
   const { sessionKey, tabs, view, params } = useSessionLayout()
   const projectDirectory = createMemo(() => sdk().directory)
@@ -223,10 +220,6 @@ export function SessionSidePanel(props: {
     openReviewPanel()
     queueMicrotask(() => tabs().setActive(next))
   }
-  const openFileBrowser = () => {
-    previewTab(SESSION_OPEN_FILE_TAB)
-    queueMicrotask(() => fileFilter?.focus())
-  }
   const activateTab = (value: string) => {
     const next = normalizeTab(value)
     const path = file.pathFromTab(next)
@@ -237,7 +230,6 @@ export function SessionSidePanel(props: {
   const browserTab = createMemo(() => {
     if (!props.fileBrowserState) return undefined
     const active = activeTab()
-    if (active === SESSION_OPEN_FILE_TAB) return SESSION_OPEN_FILE_TAB
     if (active && file.pathFromTab(active)) return active
     return activeFileTab()
   })
@@ -281,7 +273,6 @@ export function SessionSidePanel(props: {
     openReviewPanel()
   }
 
-  const openFileKeybind = createMemo(() => command.keybindParts("file.open"))
   const closeTabKeybind = createMemo(() => command.keybindParts("tab.close"))
   const [store, setStore] = createStore({
     activeDraggable: undefined as string | undefined,
@@ -482,44 +473,12 @@ export function SessionSidePanel(props: {
                               <SortableProvider ids={openedTabs()}>
                                 <For each={panelTabs()}>
                                   {(tab) => (
-                                    <Show
-                                      when={tab === SESSION_OPEN_FILE_TAB}
-                                      fallback={
-                                        <SortableTab
-                                          tab={tab}
-                                          temporary={temporaryTab() === tab}
-                                          onTabClose={tabs().close}
-                                          onTabDoubleClick={temporaryTab() === tab ? openTab : undefined}
-                                        />
-                                      }
-                                    >
-                                      <Tabs.Trigger
-                                        value={SESSION_OPEN_FILE_TAB}
-                                        closeButton={
-                                          <TooltipKeybind
-                                            title={language.t("common.closeTab")}
-                                            keybind={command.keybind("tab.close")}
-                                            placement="bottom"
-                                            gutter={10}
-                                          >
-                                            <IconButton
-                                              icon="close-small"
-                                              variant="ghost"
-                                              class="h-5 w-5"
-                                              onClick={() => tabs().close(SESSION_OPEN_FILE_TAB)}
-                                              aria-label={language.t("common.closeTab")}
-                                            />
-                                          </TooltipKeybind>
-                                        }
-                                        hideCloseButton
-                                        onMiddleClick={() => tabs().close(SESSION_OPEN_FILE_TAB)}
-                                      >
-                                        <div class="flex items-center gap-1.5 italic">
-                                          <Icon name="open-file" size="small" />
-                                          <span>{language.t("command.file.open")}</span>
-                                        </div>
-                                      </Tabs.Trigger>
-                                    </Show>
+                                    <SortableTab
+                                      tab={tab}
+                                      temporary={temporaryTab() === tab}
+                                      onTabClose={tabs().close}
+                                      onTabDoubleClick={temporaryTab() === tab ? openTab : undefined}
+                                    />
                                   )}
                                 </For>
                               </SortableProvider>
@@ -638,7 +597,7 @@ export function SessionSidePanel(props: {
                             <Show when={props.reviewSidebarToggle}>
                               {(toggle) => (
                                 <div class="session-review-v2-sidebar-toggle-slot h-full shrink-0 sticky left-0 z-10 flex items-center justify-center bg-v2-background-bg-base">
-                                  {toggle()(activeTab() === SESSION_OPEN_FILE_TAB)}
+                                  {toggle()(false)}
                                 </div>
                               )}
                             </Show>
@@ -723,51 +682,13 @@ export function SessionSidePanel(props: {
                             </div>
                             <For each={panelTabs()}>
                               {(tab) => (
-                                <Show
-                                  when={tab === SESSION_OPEN_FILE_TAB}
-                                  fallback={
-                                    <SortableTabV2
-                                      tab={tab}
-                                      index={() => tabs().all().indexOf(tab)}
-                                      temporary={temporaryTab() === tab}
-                                      onTabClose={tabs().close}
-                                      onTabDoubleClick={temporaryTab() === tab ? openTab : undefined}
-                                    />
-                                  }
-                                >
-                                  <Tabs.Trigger
-                                    value={SESSION_OPEN_FILE_TAB}
-                                    closeButton={
-                                      <TooltipV2
-                                        value={
-                                          <>
-                                            {language.t("common.closeTab")}
-                                            <Show when={closeTabKeybind().length > 0}>
-                                              <KeybindV2 keys={closeTabKeybind()} variant="neutral" />
-                                            </Show>
-                                          </>
-                                        }
-                                        placement="bottom"
-                                        gutter={10}
-                                      >
-                                        <IconButton
-                                          icon="close-small"
-                                          variant="ghost"
-                                          class="h-5 w-5"
-                                          onClick={() => tabs().close(SESSION_OPEN_FILE_TAB)}
-                                          aria-label={language.t("common.closeTab")}
-                                        />
-                                      </TooltipV2>
-                                    }
-                                    hideCloseButton
-                                    onMiddleClick={() => tabs().close(SESSION_OPEN_FILE_TAB)}
-                                  >
-                                    <div class="flex items-center gap-1.5 italic">
-                                      <Icon name="open-file" size="small" />
-                                      <span>{language.t("command.file.open")}</span>
-                                    </div>
-                                  </Tabs.Trigger>
-                                </Show>
+                                <SortableTabV2
+                                  tab={tab}
+                                  index={() => tabs().all().indexOf(tab)}
+                                  temporary={temporaryTab() === tab}
+                                  onTabClose={tabs().close}
+                                  onTabDoubleClick={temporaryTab() === tab ? openTab : undefined}
+                                />
                               )}
                             </For>
                             <div
@@ -845,10 +766,8 @@ export function SessionSidePanel(props: {
                             inert={!fileBrowserVisible() || undefined}
                           >
                             <SessionFileBrowserTab
-                              tab={browserTab() ?? activeFileTab() ?? SESSION_OPEN_FILE_TAB}
-                              placeholder={
-                                (browserTab() ?? activeFileTab() ?? SESSION_OPEN_FILE_TAB) === SESSION_OPEN_FILE_TAB
-                              }
+                              tab={browserTab() ?? activeFileTab() ?? ""}
+                              placeholder={!browserTab() && !activeFileTab()}
                               active={file.pathFromTab(browserTab() ?? activeFileTab() ?? "")}
                               kinds={kinds()}
                               state={props.fileBrowserState!}
diff --git a/packages/opencode/src/server/routes/instance/httpapi/groups/file.ts b/packages/opencode/src/server/routes/instance/httpapi/groups/file.ts
index 389bf9192..8eeb5dfdf 100644
--- a/packages/opencode/src/server/routes/instance/httpapi/groups/file.ts
+++ b/packages/opencode/src/server/routes/instance/httpapi/groups/file.ts
@@ -92,6 +92,11 @@ export const LegacyStatus = Schema.Struct({
   status: Schema.Literals(["added", "deleted", "modified"]),
 }).annotate({ identifier: "File" })
 
+export const FileWriteBody = Schema.Struct({
+  path: Schema.String,
+  content: Schema.String,
+})
+
 export const FilePaths = {
   findText: "/find",
   findFile: "/find/file",
@@ -99,6 +104,7 @@ export const FilePaths = {
   list: "/file",
   content: "/file/content",
   status: "/file/status",
+  write: "/file/write",
 } as const
 
 export const FileApi = HttpApi.make("file")
@@ -165,6 +171,17 @@ export const FileApi = HttpApi.make("file")
             description: "Get the git status of all files in the project.",
           }),
         ),
+        HttpApiEndpoint.post("write", FilePaths.write, {
+          query: WorkspaceRoutingQuery,
+          payload: FileWriteBody,
+          success: described(Schema.Struct({ ok: Schema.Boolean }), "Write result"),
+        }).annotateMerge(
+          OpenApi.annotations({
+            identifier: "file.write",
+            summary: "Write file",
+            description: "Write content to a file on disk. Used by the Preview tab's raw editor.",
+          }),
+        ),
       )
       .annotateMerge(
         OpenApi.annotations({
diff --git a/packages/opencode/src/server/routes/instance/httpapi/handlers/file.ts b/packages/opencode/src/server/routes/instance/httpapi/handlers/file.ts
index 6a826022a..ab38b41e1 100644
--- a/packages/opencode/src/server/routes/instance/httpapi/handlers/file.ts
+++ b/packages/opencode/src/server/routes/instance/httpapi/handlers/file.ts
@@ -128,6 +128,14 @@ export const fileHandlers = HttpApiBuilder.group(InstanceHttpApi, "file", (handl
       return []
     })
 
+    const write = Effect.fn("FileHttpApi.write")(function* (ctx: { payload: { path: string; content: string } }) {
+      const directory = (yield* InstanceState.context).directory
+      const file = path.resolve(directory, ctx.payload.path)
+      if (!FSUtil.contains(directory, file)) return yield* Effect.die(new Error("Path escapes the location"))
+      yield* FSUtil.Service.use((fs) => fs.writeWithDirs(file, ctx.payload.content)).pipe(Effect.orDie)
+      return { ok: true as const }
+    })
+
     return handlers
       .handle("findText", findText)
       .handle("findFile", findFile)
@@ -135,5 +143,6 @@ export const fileHandlers = HttpApiBuilder.group(InstanceHttpApi, "file", (handl
       .handle("list", list)
       .handle("content", content)
       .handle("status", status)
+      .handle("write", write)
   }),
 ).pipe(Layer.provide(locationServiceMapLayer))

From 1e5a4bdcd328c11dc75869bba35f808e5d3412de Mon Sep 17 00:00:00 2001
From: JJ Lee <jeonghun.jj.lee@gmail.com>
Date: Tue, 11 Aug 2026 08:52:15 +0200
Subject: [PATCH 03/16] fix: always show Preview in panel menu, fix nested
 button issue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Make Preview menu item always visible (available: () => true) so
  users can discover it even when no .md files are modified yet
- Remove nested button in PanelMenu trigger — the DropdownMenu.Trigger
  already renders as a button, so just put the Icon directly inside it
- Show the Preview tab trigger whenever previewOpen() is true (not
  gated on hasMarkdownFiles) — the tab's internal file list handles
  the empty state message
- Simplify PanelMenu: remove unused IconButton/IconButtonV2 imports,
  use Kobalte's gutter/placement props for positioning
---
 .../app/src/components/session/panel-menu.tsx | 32 ++++---------------
 .../src/pages/session/session-side-panel.tsx  |  6 ++--
 2 files changed, 10 insertions(+), 28 deletions(-)

diff --git a/packages/app/src/components/session/panel-menu.tsx b/packages/app/src/components/session/panel-menu.tsx
index ba8b903e3..f597b5415 100644
--- a/packages/app/src/components/session/panel-menu.tsx
+++ b/packages/app/src/components/session/panel-menu.tsx
@@ -1,7 +1,5 @@
 import { For, Show } from "solid-js"
 import { Icon } from "@opencode-ai/ui/icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 
 // ─── Types ──────────────────────────────────────────────────────────────────
@@ -19,35 +17,19 @@ export interface PanelMenuItem {
 export function PanelMenu(props: {
   items: PanelMenuItem[]
   onSelect: (id: string) => void
-  openFileKeybind?: () => string[][]
   v2?: boolean
 }) {
   return (
-    <DropdownMenu>
-      <DropdownMenu.Trigger class="flex items-center justify-center">
-        <Show
-          when={props.v2}
-          fallback={
-            <IconButton
-              icon="plus-small"
-              variant="ghost"
-              iconSize="large"
-              class="!rounded-md"
-              aria-label="Open panel"
-            />
-          }
-        >
-          <IconButtonV2
-            icon={<Icon name="plus-small" />}
-            variant="ghost-muted"
-            size="large"
-            aria-label="Open panel"
-          />
-        </Show>
+    <DropdownMenu gutter={4} placement="bottom-end">
+      <DropdownMenu.Trigger
+        class="flex items-center justify-center w-7 h-7 rounded-md text-text-weak hover:text-text-base hover:bg-background-stronger transition-colors cursor-pointer"
+        aria-label="Open panel"
+      >
+        <Icon name="plus-small" />
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
         <DropdownMenu.Content
-          class="z-50 min-w-[160px] overflow-hidden rounded-lg border border-border-base bg-background-base p-1 shadow-md animate-in fade-in-0 zoom-in-95"
+          class="z-50 min-w-[160px] overflow-hidden rounded-lg border border-border-base bg-background-base p-1 shadow-md"
         >
           <For each={props.items.filter((item) => item.available())}>
             {(item) => (
diff --git a/packages/app/src/pages/session/session-side-panel.tsx b/packages/app/src/pages/session/session-side-panel.tsx
index aa6635aef..48d11df67 100644
--- a/packages/app/src/pages/session/session-side-panel.tsx
+++ b/packages/app/src/pages/session/session-side-panel.tsx
@@ -262,7 +262,7 @@ export function SessionSidePanel(props: {
       id: SESSION_PREVIEW_TAB,
       label: "Preview",
       icon: "eye",
-      available: hasMarkdownFiles,
+      available: () => true,
       active: previewOpen,
     },
   ])
@@ -442,7 +442,7 @@ export function SessionSidePanel(props: {
                                   </div>
                                 </Tabs.Trigger>
                               </div>
-                              <div style={{ display: previewOpen() && hasMarkdownFiles() ? undefined : "none" }}>
+                              <div style={{ display: previewOpen() ? undefined : "none" }}>
                                 <Tabs.Trigger
                                   value={SESSION_PREVIEW_TAB}
                                   closeButton={
@@ -646,7 +646,7 @@ export function SessionSidePanel(props: {
                                 </div>
                               </Tabs.Trigger>
                             </div>
-                            <div style={{ display: previewOpen() && hasMarkdownFiles() ? undefined : "none" }}>
+                            <div style={{ display: previewOpen() ? undefined : "none" }}>
                               <Tabs.Trigger
                                 value={SESSION_PREVIEW_TAB}
                                 closeButton={

From 5a03a914d509300ccc824013b9b0a955e149e0d3 Mon Sep 17 00:00:00 2001
From: JJ Lee <jeonghun.jj.lee@gmail.com>
Date: Tue, 11 Aug 2026 08:57:42 +0200
Subject: [PATCH 04/16] fix: render math/tables in Preview, make toggle a
 segmented control

- Add preprocessMarkdown() that converts ```math fenced blocks to
  $$...$$ display math blocks (the Markdown component's KaTeX
  extension only matches $$ delimiters, not GitHub-flavored ```math)
- Replace the subtle single-button toggle with a visible segmented
  control: both Preview and Raw buttons shown side-by-side, the active
  mode gets a highlighted background so the current state is obvious
- Remove unused toggleMode function
---
 .../session/session-preview-tab.tsx           | 55 +++++++++++++------
 1 file changed, 39 insertions(+), 16 deletions(-)

diff --git a/packages/app/src/components/session/session-preview-tab.tsx b/packages/app/src/components/session/session-preview-tab.tsx
index c25350c74..94c1a4198 100644
--- a/packages/app/src/components/session/session-preview-tab.tsx
+++ b/packages/app/src/components/session/session-preview-tab.tsx
@@ -24,6 +24,14 @@ interface PreviewFileState {
 
 // ─── Main Component ─────────────────────────────────────────────────────────
 
+/**
+ * Convert ```math fenced code blocks (GitHub-flavored) to $$...$$ display math
+ * blocks that the Markdown component's KaTeX extension understands.
+ */
+function preprocessMarkdown(text: string): string {
+  return text.replace(/```math\n([\s\S]*?)```/g, (_match, body: string) => `$$\n${body.trim()}\n$$`)
+}
+
 export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; status?: string }> }) {
   const sdk = useSDK()
   const serverSDK = useServerSDK()
@@ -86,14 +94,6 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
     return fileStates[path]?.mode ?? "preview"
   })
 
-  const toggleMode = () => {
-    const path = selectedFile()
-    if (!path) return
-    const current = fileStates[path]?.mode ?? "preview"
-    const next = current === "preview" ? "raw" : "preview"
-    setFileStates(path, { ...fileStates[path], mode: next })
-  }
-
   const goBack = () => {
     setSelectedFile(undefined)
   }
@@ -170,13 +170,36 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
               <div class="flex-1 min-w-0 text-12-regular text-text-base truncate">
                 {markdownFiles().find((f) => f.path === path())?.basename ?? path()}
               </div>
-              <button
-                class="shrink-0 flex items-center gap-1 px-2 py-1 rounded text-11-regular text-text-weak hover:text-text-base hover:bg-background-stronger transition-colors"
-                onClick={toggleMode}
-              >
-                <Icon name={currentMode() === "preview" ? "edit" : "eye"} size="small" />
-                <span>{currentMode() === "preview" ? "Raw" : "Preview"}</span>
-              </button>
+              <div class="shrink-0 flex items-center rounded-md border border-border-base overflow-hidden">
+                <button
+                  class="flex items-center gap-1 px-2.5 py-1 text-11-medium transition-colors"
+                  classList={{
+                    "bg-background-stronger text-text-base": currentMode() === "preview",
+                    "text-text-weak hover:text-text-base hover:bg-background-stronger/50": currentMode() !== "preview",
+                  }}
+                  onClick={() => {
+                    const path = selectedFile()
+                    if (path) setFileStates(path, { ...fileStates[path], mode: "preview" })
+                  }}
+                >
+                  <Icon name="eye" size="small" />
+                  <span>Preview</span>
+                </button>
+                <button
+                  class="flex items-center gap-1 px-2.5 py-1 text-11-medium border-l border-border-base transition-colors"
+                  classList={{
+                    "bg-background-stronger text-text-base": currentMode() === "raw",
+                    "text-text-weak hover:text-text-base hover:bg-background-stronger/50": currentMode() !== "raw",
+                  }}
+                  onClick={() => {
+                    const path = selectedFile()
+                    if (path) setFileStates(path, { ...fileStates[path], mode: "raw" })
+                  }}
+                >
+                  <Icon name="edit" size="small" />
+                  <span>Raw</span>
+                </button>
+              </div>
             </div>
 
             {/* Content area */}
@@ -193,7 +216,7 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
                   }
                 >
                   <div class="p-4">
-                    <Markdown text={fileContent()} class="text-12-regular" />
+                    <Markdown text={preprocessMarkdown(fileContent())} class="text-12-regular" />
                   </div>
                 </Show>
               </Show>

From f43d0de76f04bf16565f7cf2b6026cb300beffb8 Mon Sep 17 00:00:00 2001
From: JJ Lee <jeonghun.jj.lee@gmail.com>
Date: Tue, 11 Aug 2026 09:01:27 +0200
Subject: [PATCH 05/16] feat: add right-click context menu to copy
 filename/path in Preview tab

Right-clicking a file in the Preview tab's file list now shows a
context menu with 'Copy full path' and 'Copy filename' options,
matching the Files Changed panel's behavior. Uses the same MenuV2
context menu pattern from session-review-file-preview-v2.
---
 .../session/session-preview-tab.tsx           | 48 ++++++++++++-------
 1 file changed, 31 insertions(+), 17 deletions(-)

diff --git a/packages/app/src/components/session/session-preview-tab.tsx b/packages/app/src/components/session/session-preview-tab.tsx
index 94c1a4198..dca64d3c8 100644
--- a/packages/app/src/components/session/session-preview-tab.tsx
+++ b/packages/app/src/components/session/session-preview-tab.tsx
@@ -3,6 +3,7 @@ import { createStore } from "solid-js/store"
 import { Markdown } from "@opencode-ai/session-ui/markdown"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
+import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
 import { useSDK } from "@/context/sdk"
 import { useServerSDK } from "@/context/server-sdk"
 
@@ -231,6 +232,10 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
 // ─── File List ──────────────────────────────────────────────────────────────
 
 function PreviewFileList(props: { files: PreviewFileEntry[]; onSelect: (path: string) => void }) {
+  const copyToClipboard = (text: string) => {
+    void navigator.clipboard.writeText(text)
+  }
+
   return (
     <div class="h-full overflow-auto">
       <Show
@@ -244,24 +249,33 @@ function PreviewFileList(props: { files: PreviewFileEntry[]; onSelect: (path: st
         <div class="py-1">
           <For each={props.files}>
             {(file) => (
-              <button
-                class="w-full flex items-center gap-2 px-3 py-1.5 text-left hover:bg-background-stronger transition-colors"
-                onClick={() => props.onSelect(file.path)}
-              >
-                <span
-                  class="shrink-0 w-4 h-4 flex items-center justify-center rounded text-10-medium"
-                  classList={{
-                    "bg-green-500/15 text-green-500": file.changeType === "added",
-                    "bg-yellow-500/15 text-yellow-500": file.changeType === "modified",
-                  }}
+              <MenuV2.Context>
+                <MenuV2.Context.Trigger
+                  as="button"
+                  class="w-full flex items-center gap-2 px-3 py-1.5 text-left hover:bg-background-stronger transition-colors"
+                  onClick={() => props.onSelect(file.path)}
                 >
-                  {file.changeType === "added" ? "A" : "M"}
-                </span>
-                <div class="flex-1 min-w-0">
-                  <div class="text-12-regular text-text-base truncate">{file.basename}</div>
-                  <div class="text-11-regular text-text-weak truncate">{file.relativePath}</div>
-                </div>
-              </button>
+                  <span
+                    class="shrink-0 w-4 h-4 flex items-center justify-center rounded text-10-medium"
+                    classList={{
+                      "bg-green-500/15 text-green-500": file.changeType === "added",
+                      "bg-yellow-500/15 text-yellow-500": file.changeType === "modified",
+                    }}
+                  >
+                    {file.changeType === "added" ? "A" : "M"}
+                  </span>
+                  <div class="flex-1 min-w-0">
+                    <div class="text-12-regular text-text-base truncate">{file.basename}</div>
+                    <div class="text-11-regular text-text-weak truncate">{file.relativePath}</div>
+                  </div>
+                </MenuV2.Context.Trigger>
+                <MenuV2.Context.Portal>
+                  <MenuV2.Context.Content>
+                    <MenuV2.Item onSelect={() => copyToClipboard(file.path)}>Copy full path</MenuV2.Item>
+                    <MenuV2.Item onSelect={() => copyToClipboard(file.basename)}>Copy filename</MenuV2.Item>
+                  </MenuV2.Context.Content>
+                </MenuV2.Context.Portal>
+              </MenuV2.Context>
             )}
           </For>
         </div>

From 165c25f76edbd61c1fe34242c90f4dcf8828788d Mon Sep 17 00:00:00 2001
From: JJ Lee <jeonghun.jj.lee@gmail.com>
Date: Tue, 11 Aug 2026 09:12:11 +0200
Subject: [PATCH 06/16] fix: math overflow, save status indicator, icon-only
 segmented toggle

- Math wrapping: display math (.katex-display) gets overflow-x:auto so
  wide equations scroll horizontally instead of overflowing the panel
- Save status: shows 'Saving...' during the write, then 'Saved' for 2s
  after success (both debounced auto-save and Cmd+S)
- Mode toggle: replaced text buttons with an icon-only SegmentedControlV2
  (same component as the unified/split toggle in Files Changed), with
  TooltipV2 on hover showing 'Preview' or 'Raw' respectively
- Slightly smaller KaTeX font size (0.9em) to fit better in narrow panels
---
 .../session/session-preview-tab.tsx           | 76 ++++++++++---------
 1 file changed, 42 insertions(+), 34 deletions(-)

diff --git a/packages/app/src/components/session/session-preview-tab.tsx b/packages/app/src/components/session/session-preview-tab.tsx
index dca64d3c8..2f3a84a09 100644
--- a/packages/app/src/components/session/session-preview-tab.tsx
+++ b/packages/app/src/components/session/session-preview-tab.tsx
@@ -4,6 +4,8 @@ import { Markdown } from "@opencode-ai/session-ui/markdown"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { SegmentedControlV2, SegmentedControlItemV2 } from "@opencode-ai/ui/v2/segmented-control-v2"
 import { useSDK } from "@/context/sdk"
 import { useServerSDK } from "@/context/server-sdk"
 
@@ -102,6 +104,8 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
   // ─── Raw Editor Save ────────────────────────────────────────────────────
 
   let saveTimer: ReturnType<typeof setTimeout> | undefined
+  const [saveStatus, setSaveStatus] = createSignal<"idle" | "saving" | "saved">("idle")
+  let savedTimer: ReturnType<typeof setTimeout> | undefined
 
   const saveFile = (path: string, content: string) => {
     const fsPath = path.startsWith("~/")
@@ -111,14 +115,22 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
     const baseUrl = serverSDK().url
     if (!baseUrl) return
 
+    setSaveStatus("saving")
+
     // POST to the file write endpoint
     fetch(new URL("/file/write", baseUrl), {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ path: fsPath, content }),
-    }).catch(() => {
-      // Silently fail — save is best-effort in the preview
     })
+      .then(() => {
+        setSaveStatus("saved")
+        if (savedTimer) clearTimeout(savedTimer)
+        savedTimer = setTimeout(() => setSaveStatus("idle"), 2000)
+      })
+      .catch(() => {
+        setSaveStatus("idle")
+      })
   }
 
   const debouncedSave = (path: string, content: string) => {
@@ -147,6 +159,7 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
 
   onCleanup(() => {
     if (saveTimer) clearTimeout(saveTimer)
+    if (savedTimer) clearTimeout(savedTimer)
   })
 
   // ─── Render ─────────────────────────────────────────────────────────────
@@ -159,7 +172,7 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
       >
         {(path) => (
           <div class="h-full flex flex-col overflow-hidden">
-            {/* Header with back button and mode toggle */}
+            {/* Header with back button, save status, and mode toggle */}
             <div class="shrink-0 flex items-center gap-2 px-3 py-2 border-b border-border-weaker-base">
               <IconButton
                 icon="arrow-left"
@@ -171,36 +184,31 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
               <div class="flex-1 min-w-0 text-12-regular text-text-base truncate">
                 {markdownFiles().find((f) => f.path === path())?.basename ?? path()}
               </div>
-              <div class="shrink-0 flex items-center rounded-md border border-border-base overflow-hidden">
-                <button
-                  class="flex items-center gap-1 px-2.5 py-1 text-11-medium transition-colors"
-                  classList={{
-                    "bg-background-stronger text-text-base": currentMode() === "preview",
-                    "text-text-weak hover:text-text-base hover:bg-background-stronger/50": currentMode() !== "preview",
-                  }}
-                  onClick={() => {
-                    const path = selectedFile()
-                    if (path) setFileStates(path, { ...fileStates[path], mode: "preview" })
-                  }}
-                >
-                  <Icon name="eye" size="small" />
-                  <span>Preview</span>
-                </button>
-                <button
-                  class="flex items-center gap-1 px-2.5 py-1 text-11-medium border-l border-border-base transition-colors"
-                  classList={{
-                    "bg-background-stronger text-text-base": currentMode() === "raw",
-                    "text-text-weak hover:text-text-base hover:bg-background-stronger/50": currentMode() !== "raw",
-                  }}
-                  onClick={() => {
-                    const path = selectedFile()
-                    if (path) setFileStates(path, { ...fileStates[path], mode: "raw" })
-                  }}
-                >
-                  <Icon name="edit" size="small" />
-                  <span>Raw</span>
-                </button>
-              </div>
+              <Show when={saveStatus() !== "idle"}>
+                <span class="text-11-regular text-text-weak animate-in fade-in">
+                  {saveStatus() === "saving" ? "Saving..." : "Saved"}
+                </span>
+              </Show>
+              <SegmentedControlV2
+                value={currentMode()}
+                onChange={(value) => {
+                  if (value !== "preview" && value !== "raw") return
+                  const p = selectedFile()
+                  if (p) setFileStates(p, { ...fileStates[p], mode: value })
+                }}
+                aria-label="View mode"
+              >
+                <TooltipV2 openDelay={400} value="Preview">
+                  <SegmentedControlItemV2 value="preview" aria-label="Preview">
+                    <Icon name="eye" size="small" />
+                  </SegmentedControlItemV2>
+                </TooltipV2>
+                <TooltipV2 openDelay={400} value="Raw">
+                  <SegmentedControlItemV2 value="raw" aria-label="Raw">
+                    <Icon name="edit" size="small" />
+                  </SegmentedControlItemV2>
+                </TooltipV2>
+              </SegmentedControlV2>
             </div>
 
             {/* Content area */}
@@ -216,7 +224,7 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
                     />
                   }
                 >
-                  <div class="p-4">
+                  <div class="p-4 [&_.katex-display]:overflow-x-auto [&_.katex-display]:overflow-y-hidden [&_.katex-display]:max-w-full [&_.katex]:text-[0.9em]">
                     <Markdown text={preprocessMarkdown(fileContent())} class="text-12-regular" />
                   </div>
                 </Show>

From 916ca397df1cd959a669d462d018db8398a00f4f Mon Sep 17 00:00:00 2001
From: JJ Lee <jeonghun.jj.lee@gmail.com>
Date: Tue, 11 Aug 2026 09:18:46 +0200
Subject: [PATCH 07/16] fix: segmented control width, panel menu tab overlap,
 save indicator

- SegmentedControlV2: override default 232px width with !w-auto and
  !flex-none !px-2 on items so it's compact icon-only size
- PanelMenu trigger: smaller (w-6 h-6), matching the icon button sizing
  that was there before; add px-2 to the v2 sticky wrapper for proper
  spacing within the tab bar
- Save status: inline in the header row next to the filename (shows
  'Saving...' / 'Saved' text when active)
---
 packages/app/src/components/session/panel-menu.tsx       | 4 ++--
 .../app/src/components/session/session-preview-tab.tsx   | 9 +++++----
 packages/app/src/pages/session/session-side-panel.tsx    | 2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/app/src/components/session/panel-menu.tsx b/packages/app/src/components/session/panel-menu.tsx
index f597b5415..143823e9a 100644
--- a/packages/app/src/components/session/panel-menu.tsx
+++ b/packages/app/src/components/session/panel-menu.tsx
@@ -22,10 +22,10 @@ export function PanelMenu(props: {
   return (
     <DropdownMenu gutter={4} placement="bottom-end">
       <DropdownMenu.Trigger
-        class="flex items-center justify-center w-7 h-7 rounded-md text-text-weak hover:text-text-base hover:bg-background-stronger transition-colors cursor-pointer"
+        class="flex items-center justify-center w-6 h-6 rounded-[5px] text-icon-weak hover:text-icon-base hover:bg-surface-base-hover transition-colors cursor-pointer"
         aria-label="Open panel"
       >
-        <Icon name="plus-small" />
+        <Icon name="plus-small" size="small" />
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
         <DropdownMenu.Content
diff --git a/packages/app/src/components/session/session-preview-tab.tsx b/packages/app/src/components/session/session-preview-tab.tsx
index 2f3a84a09..0db208093 100644
--- a/packages/app/src/components/session/session-preview-tab.tsx
+++ b/packages/app/src/components/session/session-preview-tab.tsx
@@ -172,7 +172,7 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
       >
         {(path) => (
           <div class="h-full flex flex-col overflow-hidden">
-            {/* Header with back button, save status, and mode toggle */}
+            {/* Header with back button, mode toggle */}
             <div class="shrink-0 flex items-center gap-2 px-3 py-2 border-b border-border-weaker-base">
               <IconButton
                 icon="arrow-left"
@@ -185,7 +185,7 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
                 {markdownFiles().find((f) => f.path === path())?.basename ?? path()}
               </div>
               <Show when={saveStatus() !== "idle"}>
-                <span class="text-11-regular text-text-weak animate-in fade-in">
+                <span class="text-11-regular text-text-weak">
                   {saveStatus() === "saving" ? "Saving..." : "Saved"}
                 </span>
               </Show>
@@ -196,15 +196,16 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
                   const p = selectedFile()
                   if (p) setFileStates(p, { ...fileStates[p], mode: value })
                 }}
+                class="!w-auto"
                 aria-label="View mode"
               >
                 <TooltipV2 openDelay={400} value="Preview">
-                  <SegmentedControlItemV2 value="preview" aria-label="Preview">
+                  <SegmentedControlItemV2 value="preview" aria-label="Preview" class="!flex-none !px-2">
                     <Icon name="eye" size="small" />
                   </SegmentedControlItemV2>
                 </TooltipV2>
                 <TooltipV2 openDelay={400} value="Raw">
-                  <SegmentedControlItemV2 value="raw" aria-label="Raw">
+                  <SegmentedControlItemV2 value="raw" aria-label="Raw" class="!flex-none !px-2">
                     <Icon name="edit" size="small" />
                   </SegmentedControlItemV2>
                 </TooltipV2>
diff --git a/packages/app/src/pages/session/session-side-panel.tsx b/packages/app/src/pages/session/session-side-panel.tsx
index 48d11df67..846a7d824 100644
--- a/packages/app/src/pages/session/session-side-panel.tsx
+++ b/packages/app/src/pages/session/session-side-panel.tsx
@@ -692,7 +692,7 @@ export function SessionSidePanel(props: {
                               )}
                             </For>
                             <div
-                              class="h-full shrink-0 sticky right-0 z-10 flex items-center justify-center"
+                              class="h-full shrink-0 sticky right-0 z-10 flex items-center justify-center px-2"
                               classList={{
                                 "bg-v2-background-bg-base": settings.general.newLayoutDesigns(),
                                 "bg-background-stronger": !settings.general.newLayoutDesigns(),

From 01407d56284e334bfc275fae3a20ac2f877d07a9 Mon Sep 17 00:00:00 2001
From: JJ Lee <jeonghun.jj.lee@gmail.com>
Date: Tue, 11 Aug 2026 09:27:41 +0200
Subject: [PATCH 08/16] fix: push + button right with pl-3, add zoom control,
 green save indicator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Panel menu wrapper: pl-3 pr-3 on both v1/v2 layouts to give clear
  separation between the last tab and the + button
- Zoom control: +/- buttons with a percentage textbox, rendered to the
  left of the preview/raw toggle (range 50%–200%, step 10%)
- Save indicator: green text for 'Saved', muted for 'Saving...'
- Reverted PanelMenu to simpler trigger (plain button with Icon)
---
 .../app/src/components/session/panel-menu.tsx |  4 +-
 .../session/session-preview-tab.tsx           | 47 ++++++++++++++++++-
 .../src/pages/session/session-side-panel.tsx  |  4 +-
 3 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/components/session/panel-menu.tsx b/packages/app/src/components/session/panel-menu.tsx
index 143823e9a..f597b5415 100644
--- a/packages/app/src/components/session/panel-menu.tsx
+++ b/packages/app/src/components/session/panel-menu.tsx
@@ -22,10 +22,10 @@ export function PanelMenu(props: {
   return (
     <DropdownMenu gutter={4} placement="bottom-end">
       <DropdownMenu.Trigger
-        class="flex items-center justify-center w-6 h-6 rounded-[5px] text-icon-weak hover:text-icon-base hover:bg-surface-base-hover transition-colors cursor-pointer"
+        class="flex items-center justify-center w-7 h-7 rounded-md text-text-weak hover:text-text-base hover:bg-background-stronger transition-colors cursor-pointer"
         aria-label="Open panel"
       >
-        <Icon name="plus-small" size="small" />
+        <Icon name="plus-small" />
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
         <DropdownMenu.Content
diff --git a/packages/app/src/components/session/session-preview-tab.tsx b/packages/app/src/components/session/session-preview-tab.tsx
index 0db208093..9406a7827 100644
--- a/packages/app/src/components/session/session-preview-tab.tsx
+++ b/packages/app/src/components/session/session-preview-tab.tsx
@@ -42,6 +42,10 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
   const [fileStates, setFileStates] = createStore<Record<string, PreviewFileState>>({})
   const [fileContent, setFileContent] = createSignal<string>("")
   const [loading, setLoading] = createSignal(false)
+  const [zoom, setZoom] = createSignal(100)
+
+  const zoomIn = () => setZoom((z) => Math.min(z + 10, 200))
+  const zoomOut = () => setZoom((z) => Math.max(z - 10, 50))
 
   // Filter diffs to only .md files
   const markdownFiles = createMemo((): PreviewFileEntry[] => {
@@ -185,10 +189,51 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
                 {markdownFiles().find((f) => f.path === path())?.basename ?? path()}
               </div>
               <Show when={saveStatus() !== "idle"}>
-                <span class="text-11-regular text-text-weak">
+                <span
+                  class="text-11-medium"
+                  classList={{
+                    "text-green-500": saveStatus() === "saved",
+                    "text-text-weak": saveStatus() === "saving",
+                  }}
+                >
                   {saveStatus() === "saving" ? "Saving..." : "Saved"}
                 </span>
               </Show>
+              {/* Zoom control */}
+              <div class="shrink-0 flex items-center h-6 rounded-md border border-border-base overflow-hidden">
+                <button
+                  class="flex items-center justify-center w-5 h-full text-text-weak hover:text-text-base hover:bg-background-stronger transition-colors"
+                  onClick={zoomOut}
+                  aria-label="Zoom out"
+                >
+                  <span class="text-11-medium leading-none">−</span>
+                </button>
+                <input
+                  type="text"
+                  class="w-8 h-full text-center text-11-regular text-text-base bg-transparent border-x border-border-base outline-none"
+                  value={`${zoom()}%`}
+                  onInput={(e) => {
+                    const val = parseInt(e.currentTarget.value)
+                    if (!isNaN(val) && val >= 50 && val <= 200) setZoom(val)
+                  }}
+                  onBlur={(e) => {
+                    e.currentTarget.value = `${zoom()}%`
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      e.currentTarget.blur()
+                    }
+                  }}
+                />
+                <button
+                  class="flex items-center justify-center w-5 h-full text-text-weak hover:text-text-base hover:bg-background-stronger transition-colors"
+                  onClick={zoomIn}
+                  aria-label="Zoom in"
+                >
+                  <span class="text-11-medium leading-none">+</span>
+                </button>
+              </div>
+              {/* Mode toggle */}
               <SegmentedControlV2
                 value={currentMode()}
                 onChange={(value) => {
diff --git a/packages/app/src/pages/session/session-side-panel.tsx b/packages/app/src/pages/session/session-side-panel.tsx
index 846a7d824..d2461b7d6 100644
--- a/packages/app/src/pages/session/session-side-panel.tsx
+++ b/packages/app/src/pages/session/session-side-panel.tsx
@@ -483,7 +483,7 @@ export function SessionSidePanel(props: {
                                 </For>
                               </SortableProvider>
                               <div
-                                class="h-full shrink-0 sticky right-0 z-10 flex items-center justify-center pr-3"
+                                class="h-full shrink-0 sticky right-0 z-10 flex items-center justify-center pl-3 pr-3"
                                 classList={{
                                   "bg-v2-background-bg-base": settings.general.newLayoutDesigns(),
                                   "bg-background-stronger": !settings.general.newLayoutDesigns(),
@@ -692,7 +692,7 @@ export function SessionSidePanel(props: {
                               )}
                             </For>
                             <div
-                              class="h-full shrink-0 sticky right-0 z-10 flex items-center justify-center px-2"
+                              class="h-full shrink-0 sticky right-0 z-10 flex items-center justify-center pl-3 pr-3"
                               classList={{
                                 "bg-v2-background-bg-base": settings.general.newLayoutDesigns(),
                                 "bg-background-stronger": !settings.general.newLayoutDesigns(),

From dd062f97e25de049efc60c5ff591aca43da746b4 Mon Sep 17 00:00:00 2001
From: JJ Lee <jeonghun.jj.lee@gmail.com>
Date: Tue, 11 Aug 2026 09:28:50 +0200
Subject: [PATCH 09/16] fix: wire zoom to content scaling (preview + raw
 editor)

---
 .../src/components/session/session-preview-tab.tsx   | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/components/session/session-preview-tab.tsx b/packages/app/src/components/session/session-preview-tab.tsx
index 9406a7827..8455b9630 100644
--- a/packages/app/src/components/session/session-preview-tab.tsx
+++ b/packages/app/src/components/session/session-preview-tab.tsx
@@ -267,10 +267,14 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
                       content={fileContent()}
                       onEdit={handleRawEdit}
                       onSave={immediateSave}
+                      zoom={zoom()}
                     />
                   }
                 >
-                  <div class="p-4 [&_.katex-display]:overflow-x-auto [&_.katex-display]:overflow-y-hidden [&_.katex-display]:max-w-full [&_.katex]:text-[0.9em]">
+                  <div
+                    class="p-4 origin-top-left [&_.katex-display]:overflow-x-auto [&_.katex-display]:overflow-y-hidden [&_.katex-display]:max-w-full [&_.katex]:text-[0.9em]"
+                    style={{ transform: `scale(${zoom() / 100})`, width: `${10000 / zoom()}%` }}
+                  >
                     <Markdown text={preprocessMarkdown(fileContent())} class="text-12-regular" />
                   </div>
                 </Show>
@@ -340,7 +344,7 @@ function PreviewFileList(props: { files: PreviewFileEntry[]; onSelect: (path: st
 
 // ─── Raw Editor ─────────────────────────────────────────────────────────────
 
-function RawEditor(props: { content: string; onEdit: (content: string) => void; onSave: () => void }) {
+function RawEditor(props: { content: string; onEdit: (content: string) => void; onSave: () => void; zoom: number }) {
   let textareaRef: HTMLTextAreaElement | undefined
 
   const handleKeyDown = (e: KeyboardEvent) => {
@@ -353,8 +357,8 @@ function RawEditor(props: { content: string; onEdit: (content: string) => void;
   return (
     <textarea
       ref={(el) => (textareaRef = el)}
-      class="w-full h-full p-4 resize-none bg-transparent text-12-regular text-text-base font-mono outline-none border-none"
-      style={{ "tab-size": "2" }}
+      class="w-full h-full p-4 resize-none bg-transparent text-text-base font-mono outline-none border-none"
+      style={{ "tab-size": "2", "font-size": `${props.zoom * 0.12}px` }}
       value={props.content}
       onInput={(e) => props.onEdit(e.currentTarget.value)}
       onKeyDown={handleKeyDown}

From 31c4c326c8f0818e0b98a5c1a82c2766d432254d Mon Sep 17 00:00:00 2001
From: JJ Lee <jeonghun.jj.lee@gmail.com>
Date: Tue, 11 Aug 2026 09:30:07 +0200
Subject: [PATCH 10/16] fix: zoom layout [100% | - +], match session font size
 (text-12)

---
 .../session/session-preview-tab.tsx           | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/app/src/components/session/session-preview-tab.tsx b/packages/app/src/components/session/session-preview-tab.tsx
index 8455b9630..e1bfb44d9 100644
--- a/packages/app/src/components/session/session-preview-tab.tsx
+++ b/packages/app/src/components/session/session-preview-tab.tsx
@@ -199,18 +199,11 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
                   {saveStatus() === "saving" ? "Saving..." : "Saved"}
                 </span>
               </Show>
-              {/* Zoom control */}
+              {/* Zoom control: [100% | - +] */}
               <div class="shrink-0 flex items-center h-6 rounded-md border border-border-base overflow-hidden">
-                <button
-                  class="flex items-center justify-center w-5 h-full text-text-weak hover:text-text-base hover:bg-background-stronger transition-colors"
-                  onClick={zoomOut}
-                  aria-label="Zoom out"
-                >
-                  <span class="text-11-medium leading-none">−</span>
-                </button>
                 <input
                   type="text"
-                  class="w-8 h-full text-center text-11-regular text-text-base bg-transparent border-x border-border-base outline-none"
+                  class="w-9 h-full text-center text-12-regular text-text-base bg-transparent outline-none"
                   value={`${zoom()}%`}
                   onInput={(e) => {
                     const val = parseInt(e.currentTarget.value)
@@ -225,13 +218,22 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
                     }
                   }}
                 />
-                <button
-                  class="flex items-center justify-center w-5 h-full text-text-weak hover:text-text-base hover:bg-background-stronger transition-colors"
-                  onClick={zoomIn}
-                  aria-label="Zoom in"
-                >
-                  <span class="text-11-medium leading-none">+</span>
-                </button>
+                <div class="flex items-center border-l border-border-base">
+                  <button
+                    class="flex items-center justify-center w-5 h-full text-text-weak hover:text-text-base hover:bg-background-stronger transition-colors"
+                    onClick={zoomOut}
+                    aria-label="Zoom out"
+                  >
+                    <span class="text-12-medium leading-none">−</span>
+                  </button>
+                  <button
+                    class="flex items-center justify-center w-5 h-full text-text-weak hover:text-text-base hover:bg-background-stronger transition-colors"
+                    onClick={zoomIn}
+                    aria-label="Zoom in"
+                  >
+                    <span class="text-12-medium leading-none">+</span>
+                  </button>
+                </div>
               </div>
               {/* Mode toggle */}
               <SegmentedControlV2

From 8ad7e1ec575ddf09813c57a1e5d8c4ac919f6178 Mon Sep 17 00:00:00 2001
From: JJ Lee <jeonghun.jj.lee@gmail.com>
Date: Tue, 11 Aug 2026 09:31:36 +0200
Subject: [PATCH 11/16] fix: copy full path resolves ~, reorder filename above
 full path

---
 .../app/src/components/session/session-preview-tab.tsx     | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/components/session/session-preview-tab.tsx b/packages/app/src/components/session/session-preview-tab.tsx
index e1bfb44d9..682faf84d 100644
--- a/packages/app/src/components/session/session-preview-tab.tsx
+++ b/packages/app/src/components/session/session-preview-tab.tsx
@@ -331,8 +331,13 @@ function PreviewFileList(props: { files: PreviewFileEntry[]; onSelect: (path: st
                 </MenuV2.Context.Trigger>
                 <MenuV2.Context.Portal>
                   <MenuV2.Context.Content>
-                    <MenuV2.Item onSelect={() => copyToClipboard(file.path)}>Copy full path</MenuV2.Item>
                     <MenuV2.Item onSelect={() => copyToClipboard(file.basename)}>Copy filename</MenuV2.Item>
+                    <MenuV2.Item onSelect={() => {
+                      const fullPath = file.path.startsWith("~/")
+                        ? file.path.replace("~", process.env.HOME ?? "")
+                        : file.path
+                      copyToClipboard(fullPath)
+                    }}>Copy full path</MenuV2.Item>
                   </MenuV2.Context.Content>
                 </MenuV2.Context.Portal>
               </MenuV2.Context>

From 6487db1fe1dfd0be9651bc1852a63bbc3915782f Mon Sep 17 00:00:00 2001
From: JJ Lee <jeonghun.jj.lee@gmail.com>
Date: Tue, 11 Aug 2026 09:35:06 +0200
Subject: [PATCH 12/16] fix: clipboard copy via bridge, zoom % wider, -/+
 tighter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use writeClipboardViaBridge (works in Amicode webview) with
  navigator.clipboard.writeText as fallback — fixes copy not working
- Zoom percentage input: w-9 → w-11 for more room
- Plus button: -ml-0.5 to sit closer to the minus button
---
 .../app/src/components/session/session-preview-tab.tsx   | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/session/session-preview-tab.tsx b/packages/app/src/components/session/session-preview-tab.tsx
index 682faf84d..f54c6f666 100644
--- a/packages/app/src/components/session/session-preview-tab.tsx
+++ b/packages/app/src/components/session/session-preview-tab.tsx
@@ -6,6 +6,7 @@ import { IconButton } from "@opencode-ai/ui/icon-button"
 import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
 import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import { SegmentedControlV2, SegmentedControlItemV2 } from "@opencode-ai/ui/v2/segmented-control-v2"
+import { writeClipboardViaBridge } from "@/components/prompt-input/clipboard-bridge"
 import { useSDK } from "@/context/sdk"
 import { useServerSDK } from "@/context/server-sdk"
 
@@ -203,7 +204,7 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
               <div class="shrink-0 flex items-center h-6 rounded-md border border-border-base overflow-hidden">
                 <input
                   type="text"
-                  class="w-9 h-full text-center text-12-regular text-text-base bg-transparent outline-none"
+                  class="w-11 h-full text-center text-12-regular text-text-base bg-transparent outline-none"
                   value={`${zoom()}%`}
                   onInput={(e) => {
                     const val = parseInt(e.currentTarget.value)
@@ -227,7 +228,7 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
                     <span class="text-12-medium leading-none">−</span>
                   </button>
                   <button
-                    class="flex items-center justify-center w-5 h-full text-text-weak hover:text-text-base hover:bg-background-stronger transition-colors"
+                    class="flex items-center justify-center w-5 h-full text-text-weak hover:text-text-base hover:bg-background-stronger transition-colors -ml-0.5"
                     onClick={zoomIn}
                     aria-label="Zoom in"
                   >
@@ -293,7 +294,9 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
 
 function PreviewFileList(props: { files: PreviewFileEntry[]; onSelect: (path: string) => void }) {
   const copyToClipboard = (text: string) => {
-    void navigator.clipboard.writeText(text)
+    if (!writeClipboardViaBridge(text)) {
+      void navigator.clipboard.writeText(text)
+    }
   }
 
   return (

From a3be6dc4518de4e27cb49624332215c059f3b61f Mon Sep 17 00:00:00 2001
From: JJ Lee <jeonghun.jj.lee@gmail.com>
Date: Tue, 11 Aug 2026 09:36:21 +0200
Subject: [PATCH 13/16] fix: preserve native undo/redo/select-all in raw editor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The textarea was using value={props.content} which made it a controlled
component — every keystroke re-set the value from the signal, destroying
the browser's native undo stack. Now the initial content is set via the
ref callback and the textarea manages its own state natively. Cmd+A,
Cmd+Z, Cmd+Shift+Z, Cmd+C/V all work as expected.
---
 .../app/src/components/session/session-preview-tab.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/components/session/session-preview-tab.tsx b/packages/app/src/components/session/session-preview-tab.tsx
index f54c6f666..549e4593e 100644
--- a/packages/app/src/components/session/session-preview-tab.tsx
+++ b/packages/app/src/components/session/session-preview-tab.tsx
@@ -358,6 +358,8 @@ function RawEditor(props: { content: string; onEdit: (content: string) => void;
   let textareaRef: HTMLTextAreaElement | undefined
 
   const handleKeyDown = (e: KeyboardEvent) => {
+    // Let Cmd+S through to our save handler; everything else (Cmd+A, Cmd+Z,
+    // Cmd+Shift+Z, Cmd+C, Cmd+V, etc.) is handled natively by the textarea.
     if ((e.metaKey || e.ctrlKey) && e.key === "s") {
       e.preventDefault()
       props.onSave()
@@ -366,10 +368,14 @@ function RawEditor(props: { content: string; onEdit: (content: string) => void;
 
   return (
     <textarea
-      ref={(el) => (textareaRef = el)}
+      ref={(el) => {
+        textareaRef = el
+        // Set initial content without making it "controlled" — this preserves
+        // the browser's native undo/redo stack and selection behavior.
+        el.value = props.content
+      }}
       class="w-full h-full p-4 resize-none bg-transparent text-text-base font-mono outline-none border-none"
       style={{ "tab-size": "2", "font-size": `${props.zoom * 0.12}px` }}
-      value={props.content}
       onInput={(e) => props.onEdit(e.currentTarget.value)}
       onKeyDown={handleKeyDown}
       spellcheck={false}

From 3c37b3642ab0b977a205a00179eccaf5d636a26b Mon Sep 17 00:00:00 2001
From: JJ Lee <jeonghun.jj.lee@gmail.com>
Date: Tue, 11 Aug 2026 09:41:31 +0200
Subject: [PATCH 14/16] fix: move + button outside Tabs.List, stop propagation
 for Cmd+A/Z, match zoom height
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Panel menu: moved OUTSIDE Tabs.List as a sibling in the header flex
  row (both v1 and v2 layouts). This prevents any Kobalte tab-list
  CSS interaction with the dropdown trigger — the tabs render normally
  and the + button sits cleanly after them.
- Raw editor: stopPropagation on all Cmd/Ctrl keydown events so the
  app's global command handler doesn't steal Cmd+A, Cmd+Z, Cmd+Shift+Z
- Zoom control: h-6 → h-7 (28px) to match SegmentedControlV2 height
---
 .../session/session-preview-tab.tsx           | 14 ++++---
 .../src/pages/session/session-side-panel.tsx  | 38 +++++++------------
 2 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/packages/app/src/components/session/session-preview-tab.tsx b/packages/app/src/components/session/session-preview-tab.tsx
index 549e4593e..fd7fab76b 100644
--- a/packages/app/src/components/session/session-preview-tab.tsx
+++ b/packages/app/src/components/session/session-preview-tab.tsx
@@ -201,7 +201,7 @@ export function SessionPreviewTab(props: { diffs: () => Array<{ file: string; st
                 </span>
               </Show>
               {/* Zoom control: [100% | - +] */}
-              <div class="shrink-0 flex items-center h-6 rounded-md border border-border-base overflow-hidden">
+              <div class="shrink-0 flex items-center h-7 rounded-md border border-border-base overflow-hidden">
                 <input
                   type="text"
                   class="w-11 h-full text-center text-12-regular text-text-base bg-transparent outline-none"
@@ -358,11 +358,17 @@ function RawEditor(props: { content: string; onEdit: (content: string) => void;
   let textareaRef: HTMLTextAreaElement | undefined
 
   const handleKeyDown = (e: KeyboardEvent) => {
-    // Let Cmd+S through to our save handler; everything else (Cmd+A, Cmd+Z,
-    // Cmd+Shift+Z, Cmd+C, Cmd+V, etc.) is handled natively by the textarea.
+    // Cmd+S: save
     if ((e.metaKey || e.ctrlKey) && e.key === "s") {
       e.preventDefault()
+      e.stopPropagation()
       props.onSave()
+      return
+    }
+    // Stop propagation on all Cmd/Ctrl shortcuts so the app's global
+    // command handler doesn't steal them (Cmd+A, Cmd+Z, Cmd+Shift+Z, etc.)
+    if (e.metaKey || e.ctrlKey) {
+      e.stopPropagation()
     }
   }
 
@@ -370,8 +376,6 @@ function RawEditor(props: { content: string; onEdit: (content: string) => void;
     <textarea
       ref={(el) => {
         textareaRef = el
-        // Set initial content without making it "controlled" — this preserves
-        // the browser's native undo/redo stack and selection behavior.
         el.value = props.content
       }}
       class="w-full h-full p-4 resize-none bg-transparent text-text-base font-mono outline-none border-none"
diff --git a/packages/app/src/pages/session/session-side-panel.tsx b/packages/app/src/pages/session/session-side-panel.tsx
index d2461b7d6..b105f69c4 100644
--- a/packages/app/src/pages/session/session-side-panel.tsx
+++ b/packages/app/src/pages/session/session-side-panel.tsx
@@ -482,19 +482,13 @@ export function SessionSidePanel(props: {
                                   )}
                                 </For>
                               </SortableProvider>
-                              <div
-                                class="h-full shrink-0 sticky right-0 z-10 flex items-center justify-center pl-3 pr-3"
-                                classList={{
-                                  "bg-v2-background-bg-base": settings.general.newLayoutDesigns(),
-                                  "bg-background-stronger": !settings.general.newLayoutDesigns(),
-                                }}
-                              >
-                                <PanelMenu
-                                  items={panelMenuItems()}
-                                  onSelect={handlePanelMenuSelect}
-                                />
-                              </div>
                             </Tabs.List>
+                            <div class="shrink-0 flex items-center justify-center pl-1 pr-3">
+                              <PanelMenu
+                                items={panelMenuItems()}
+                                onSelect={handlePanelMenuSelect}
+                              />
+                            </div>
                           </div>
 
                           <Show when={reviewTab() && props.canReview() && activeTab() === "review"}>
@@ -691,20 +685,14 @@ export function SessionSidePanel(props: {
                                 />
                               )}
                             </For>
-                            <div
-                              class="h-full shrink-0 sticky right-0 z-10 flex items-center justify-center pl-3 pr-3"
-                              classList={{
-                                "bg-v2-background-bg-base": settings.general.newLayoutDesigns(),
-                                "bg-background-stronger": !settings.general.newLayoutDesigns(),
-                              }}
-                            >
-                              <PanelMenu
-                                items={panelMenuItems()}
-                                onSelect={handlePanelMenuSelect}
-                                v2
-                              />
-                            </div>
                           </Tabs.List>
+                          <div class="shrink-0 flex items-center justify-center pl-1 pr-2">
+                            <PanelMenu
+                              items={panelMenuItems()}
+                              onSelect={handlePanelMenuSelect}
+                              v2
+                            />
+                          </div>
                           <div
                             class="session-review-v2-open-in-app-slot shrink-0 flex items-center pr-3"
                             onPointerDown={(event) => event.stopPropagation()}

From 7718be8689fabb62ecb33081eab28d9a62e3b5d3 Mon Sep 17 00:00:00 2001
From: JJ Lee <jeonghun.jj.lee@gmail.com>
Date: Tue, 11 Aug 2026 09:44:32 +0200
Subject: [PATCH 15/16] fix: native keydown listener for Cmd+A, push + button
 further right

- Raw editor: use el.addEventListener('keydown', ...) directly on the
  DOM element instead of SolidJS's onKeyDown. SolidJS uses event
  delegation (handlers on document root), so stopPropagation from a
  delegated handler doesn't prevent other delegated handlers. A native
  listener fires in the capture/bubble phase on the element itself,
  before delegation, so stopPropagation actually works.
- Panel menu wrapper: pl-3 pr-4 on both layouts for more breathing room
  between the last tab and the + button
---
 .../session/session-preview-tab.tsx           | 30 +++++++++----------
 .../src/pages/session/session-side-panel.tsx  |  4 +--
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/packages/app/src/components/session/session-preview-tab.tsx b/packages/app/src/components/session/session-preview-tab.tsx
index fd7fab76b..a3cd21d8d 100644
--- a/packages/app/src/components/session/session-preview-tab.tsx
+++ b/packages/app/src/components/session/session-preview-tab.tsx
@@ -357,31 +357,29 @@ function PreviewFileList(props: { files: PreviewFileEntry[]; onSelect: (path: st
 function RawEditor(props: { content: string; onEdit: (content: string) => void; onSave: () => void; zoom: number }) {
   let textareaRef: HTMLTextAreaElement | undefined
 
-  const handleKeyDown = (e: KeyboardEvent) => {
-    // Cmd+S: save
-    if ((e.metaKey || e.ctrlKey) && e.key === "s") {
-      e.preventDefault()
-      e.stopPropagation()
-      props.onSave()
-      return
-    }
-    // Stop propagation on all Cmd/Ctrl shortcuts so the app's global
-    // command handler doesn't steal them (Cmd+A, Cmd+Z, Cmd+Shift+Z, etc.)
-    if (e.metaKey || e.ctrlKey) {
-      e.stopPropagation()
-    }
-  }
-
   return (
     <textarea
       ref={(el) => {
         textareaRef = el
         el.value = props.content
+        // Use a native (non-delegated) keydown listener so stopPropagation
+        // actually prevents the app's global command system from stealing
+        // Cmd+A, Cmd+Z, Cmd+Shift+Z, etc.
+        el.addEventListener("keydown", (e) => {
+          if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+            e.preventDefault()
+            e.stopPropagation()
+            props.onSave()
+            return
+          }
+          if (e.metaKey || e.ctrlKey) {
+            e.stopPropagation()
+          }
+        })
       }}
       class="w-full h-full p-4 resize-none bg-transparent text-text-base font-mono outline-none border-none"
       style={{ "tab-size": "2", "font-size": `${props.zoom * 0.12}px` }}
       onInput={(e) => props.onEdit(e.currentTarget.value)}
-      onKeyDown={handleKeyDown}
       spellcheck={false}
     />
   )
diff --git a/packages/app/src/pages/session/session-side-panel.tsx b/packages/app/src/pages/session/session-side-panel.tsx
index b105f69c4..e5c54c2b6 100644
--- a/packages/app/src/pages/session/session-side-panel.tsx
+++ b/packages/app/src/pages/session/session-side-panel.tsx
@@ -483,7 +483,7 @@ export function SessionSidePanel(props: {
                                 </For>
                               </SortableProvider>
                             </Tabs.List>
-                            <div class="shrink-0 flex items-center justify-center pl-1 pr-3">
+                            <div class="shrink-0 flex items-center justify-center pl-3 pr-4">
                               <PanelMenu
                                 items={panelMenuItems()}
                                 onSelect={handlePanelMenuSelect}
@@ -686,7 +686,7 @@ export function SessionSidePanel(props: {
                               )}
                             </For>
                           </Tabs.List>
-                          <div class="shrink-0 flex items-center justify-center pl-1 pr-2">
+                          <div class="shrink-0 flex items-center justify-center pl-3 pr-4">
                             <PanelMenu
                               items={panelMenuItems()}
                               onSelect={handlePanelMenuSelect}

From 1f2b46efd1c14e50c1fce41a96bfd9a5624a4060 Mon Sep 17 00:00:00 2001
From: JJ Lee <jeonghun.jj.lee@gmail.com>
Date: Tue, 11 Aug 2026 09:49:50 +0200
Subject: [PATCH 16/16] fix: reduce right padding on + button, add selection
 styling to textarea
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Panel menu wrapper: pl-2 pr-1 (was pl-3 pr-4) — the pr-4 was pushing
  the button AWAY from the right edge; reducing pr moves it closer to
  the panel's right edge
- Raw editor textarea: add selection:bg-blue-500/30 so Cmd+A selection
  is visually distinguishable (the transparent bg + outline-none may
  have made native selection invisible)
---
 packages/app/src/components/session/session-preview-tab.tsx | 2 +-
 packages/app/src/pages/session/session-side-panel.tsx       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/session/session-preview-tab.tsx b/packages/app/src/components/session/session-preview-tab.tsx
index a3cd21d8d..5e987f867 100644
--- a/packages/app/src/components/session/session-preview-tab.tsx
+++ b/packages/app/src/components/session/session-preview-tab.tsx
@@ -377,7 +377,7 @@ function RawEditor(props: { content: string; onEdit: (content: string) => void;
           }
         })
       }}
-      class="w-full h-full p-4 resize-none bg-transparent text-text-base font-mono outline-none border-none"
+      class="w-full h-full p-4 resize-none bg-transparent text-text-base font-mono outline-none border-none selection:bg-blue-500/30"
       style={{ "tab-size": "2", "font-size": `${props.zoom * 0.12}px` }}
       onInput={(e) => props.onEdit(e.currentTarget.value)}
       spellcheck={false}
diff --git a/packages/app/src/pages/session/session-side-panel.tsx b/packages/app/src/pages/session/session-side-panel.tsx
index e5c54c2b6..7e69f7635 100644
--- a/packages/app/src/pages/session/session-side-panel.tsx
+++ b/packages/app/src/pages/session/session-side-panel.tsx
@@ -483,7 +483,7 @@ export function SessionSidePanel(props: {
                                 </For>
                               </SortableProvider>
                             </Tabs.List>
-                            <div class="shrink-0 flex items-center justify-center pl-3 pr-4">
+                            <div class="shrink-0 flex items-center justify-center pl-2 pr-1">
                               <PanelMenu
                                 items={panelMenuItems()}
                                 onSelect={handlePanelMenuSelect}
@@ -686,7 +686,7 @@ export function SessionSidePanel(props: {
                               )}
                             </For>
                           </Tabs.List>
-                          <div class="shrink-0 flex items-center justify-center pl-3 pr-4">
+                          <div class="shrink-0 flex items-center justify-center pl-2 pr-1">
                             <PanelMenu
                               items={panelMenuItems()}
                               onSelect={handlePanelMenuSelect}