feat(ui): add diff toolbar toggles and word wrap

Replace split/unified and context controls with icon toggles, add a word-wrap toggle (default on), and move the toolbar into the tab header to free vertical space.
2026-02-17 13:47:07 +00:00
parent ddc58a2c3c
commit dea5079713
8 changed files with 112 additions and 44 deletions
--- a/packages/ui/src/components/file-viewer/monaco-diff-viewer.tsx
+++ b/packages/ui/src/components/file-viewer/monaco-diff-viewer.tsx
@@ -12,6 +12,7 @@ interface MonacoDiffViewerProps {
  after: string
  viewMode?: "split" | "unified"
  contextMode?: "expanded" | "collapsed"
+  wordWrap?: "on" | "off"
 }

 export function MonacoDiffViewer(props: MonacoDiffViewerProps) {
@@ -54,7 +55,7 @@ export function MonacoDiffViewer(props: MonacoDiffViewerProps) {
        scrollBeyondLastLine: false,
        renderWhitespace: "selection",
        fontSize: 13,
-        wordWrap: "off",
+        wordWrap: props.wordWrap === "on" ? "on" : "off",
        glyphMargin: false,
        folding: false,
        // Keep enough gutter space so unified diffs don't overlap `+`/`-` markers.
@@ -81,6 +82,7 @@ export function MonacoDiffViewer(props: MonacoDiffViewerProps) {
    if (!ready() || !monaco || !diffEditor) return
    const viewMode = props.viewMode === "unified" ? "unified" : "split"
    const contextMode = props.contextMode === "collapsed" ? "collapsed" : "expanded"
+    const wordWrap = props.wordWrap === "on" ? "on" : "off"

    diffEditor.updateOptions({
      renderSideBySide: viewMode === "split",
@@ -89,7 +91,20 @@ export function MonacoDiffViewer(props: MonacoDiffViewerProps) {
        contextMode === "collapsed"
          ? { enabled: true }
          : { enabled: false },
+      wordWrap,
    })
+
+    try {
+      diffEditor.getOriginalEditor?.()?.updateOptions?.({ wordWrap })
+    } catch {
+      // ignore
+    }
+
+    try {
+      diffEditor.getModifiedEditor?.()?.updateOptions?.({ wordWrap })
+    } catch {
+      // ignore
+    }
  })

  createEffect(() => {
--- a/packages/ui/src/components/instance/shell/right-panel/RightPanel.tsx
+++ b/packages/ui/src/components/instance/shell/right-panel/RightPanel.tsx
@@ -18,7 +18,7 @@ import type { Instance } from "../../../../types/instance"
 import type { BackgroundProcess } from "../../../../../../server/src/api-types"
 import type { Session } from "../../../../types/session"
 import type { DrawerViewState } from "../types"
-import type { DiffContextMode, DiffViewMode, RightPanelTab } from "./types"
+import type { DiffContextMode, DiffViewMode, DiffWordWrapMode, RightPanelTab } from "./types"

 import ChangesTab from "./tabs/ChangesTab"
 import FilesTab from "./tabs/FilesTab"
@@ -32,6 +32,7 @@ import { useGlobalPointerDrag } from "../useGlobalPointerDrag"
 import {
  RIGHT_PANEL_CHANGES_DIFF_CONTEXT_MODE_KEY,
  RIGHT_PANEL_CHANGES_DIFF_VIEW_MODE_KEY,
+  RIGHT_PANEL_CHANGES_DIFF_WORD_WRAP_KEY,
  RIGHT_PANEL_CHANGES_LIST_OPEN_NONPHONE_KEY,
  RIGHT_PANEL_CHANGES_LIST_OPEN_PHONE_KEY,
  RIGHT_PANEL_CHANGES_SPLIT_WIDTH_KEY,
@@ -102,6 +103,9 @@ const RightPanel: Component<RightPanelProps> = (props) => {
  const [diffContextMode, setDiffContextMode] = createSignal<DiffContextMode>(
    readStoredEnum(RIGHT_PANEL_CHANGES_DIFF_CONTEXT_MODE_KEY, ["expanded", "collapsed"] as const) ?? "collapsed",
  )
+  const [diffWordWrapMode, setDiffWordWrapMode] = createSignal<DiffWordWrapMode>(
+    readStoredEnum(RIGHT_PANEL_CHANGES_DIFF_WORD_WRAP_KEY, ["on", "off"] as const) ?? "on",
+  )

  const [changesSplitWidth, setChangesSplitWidth] = createSignal(320)
  const [filesSplitWidth, setFilesSplitWidth] = createSignal(320)
@@ -195,6 +199,11 @@ const RightPanel: Component<RightPanelProps> = (props) => {
    window.localStorage.setItem(RIGHT_PANEL_CHANGES_DIFF_CONTEXT_MODE_KEY, diffContextMode())
  })

+  createEffect(() => {
+    if (typeof window === "undefined") return
+    window.localStorage.setItem(RIGHT_PANEL_CHANGES_DIFF_WORD_WRAP_KEY, diffWordWrapMode())
+  })
+
  const clampSplitWidth = (value: number) => {
    const min = 200
    const maxByDrawer = Math.max(min, Math.floor(props.rightDrawerWidth() * 0.65))
@@ -738,8 +747,10 @@ const RightPanel: Component<RightPanelProps> = (props) => {
            onSelectFile={handleSelectChangesFile}
            diffViewMode={diffViewMode}
            diffContextMode={diffContextMode}
+            diffWordWrapMode={diffWordWrapMode}
            onViewModeChange={setDiffViewMode}
            onContextModeChange={setDiffContextMode}
+            onWordWrapModeChange={setDiffWordWrapMode}
            listOpen={changesListOpen}
            onToggleList={toggleChangesList}
            splitWidth={changesSplitWidth}
@@ -765,8 +776,10 @@ const RightPanel: Component<RightPanelProps> = (props) => {
            scopeKey={gitScopeKey}
            diffViewMode={diffViewMode}
            diffContextMode={diffContextMode}
+            diffWordWrapMode={diffWordWrapMode}
            onViewModeChange={setDiffViewMode}
            onContextModeChange={setDiffContextMode}
+            onWordWrapModeChange={setDiffWordWrapMode}
            onOpenFile={(path) => void openGitFile(path)}
            onRefresh={() => void refreshGitStatus()}
            listOpen={gitChangesListOpen}
--- a/packages/ui/src/components/instance/shell/right-panel/components/DiffToolbar.tsx
+++ b/packages/ui/src/components/instance/shell/right-panel/components/DiffToolbar.tsx
@@ -1,50 +1,61 @@
 import type { Component } from "solid-js"

-import type { DiffContextMode, DiffViewMode } from "../types"
+import { AlignJustify, FoldVertical, Split, UnfoldVertical, WrapText } from "lucide-solid"
+
+import type { DiffContextMode, DiffViewMode, DiffWordWrapMode } from "../types"

 interface DiffToolbarProps {
  viewMode: DiffViewMode
  contextMode: DiffContextMode
+  wordWrapMode: DiffWordWrapMode
  onViewModeChange: (mode: DiffViewMode) => void
  onContextModeChange: (mode: DiffContextMode) => void
+  onWordWrapModeChange: (mode: DiffWordWrapMode) => void
 }

 const DiffToolbar: Component<DiffToolbarProps> = (props) => {
+  const nextViewMode = (): DiffViewMode => (props.viewMode === "split" ? "unified" : "split")
+  const nextContextMode = (): DiffContextMode => (props.contextMode === "collapsed" ? "expanded" : "collapsed")
+  const nextWordWrapMode = (): DiffWordWrapMode => (props.wordWrapMode === "on" ? "off" : "on")
+
+  const viewModeTitle = () => (nextViewMode() === "split" ? "Switch to split view" : "Switch to unified view")
+  const contextModeTitle = () =>
+    nextContextMode() === "collapsed" ? "Hide unchanged regions" : "Show full file"
+  const wordWrapTitle = () => (nextWordWrapMode() === "on" ? "Enable word wrap" : "Disable word wrap")
+
  return (
    <div class="file-viewer-toolbar">
      <button
        type="button"
-        class={`file-viewer-toolbar-button${props.viewMode === "split" ? " active" : ""}`}
-        aria-pressed={props.viewMode === "split"}
-        onClick={() => props.onViewModeChange("split")}
+        class="file-viewer-toolbar-icon-button"
+        onClick={() => props.onViewModeChange(nextViewMode())}
+        aria-label={viewModeTitle()}
+        title={viewModeTitle()}
      >
-        Split
+        {nextViewMode() === "split" ? <Split class="h-4 w-4" aria-hidden="true" /> : <AlignJustify class="h-4 w-4" aria-hidden="true" />}
      </button>
      <button
        type="button"
-        class={`file-viewer-toolbar-button${props.viewMode === "unified" ? " active" : ""}`}
-        aria-pressed={props.viewMode === "unified"}
-        onClick={() => props.onViewModeChange("unified")}
+        class="file-viewer-toolbar-icon-button"
+        onClick={() => props.onContextModeChange(nextContextMode())}
+        aria-label={contextModeTitle()}
+        title={contextModeTitle()}
      >
-        Unified
+        {nextContextMode() === "collapsed" ? (
+          <FoldVertical class="h-4 w-4" aria-hidden="true" />
+        ) : (
+          <UnfoldVertical class="h-4 w-4" aria-hidden="true" />
+        )}
      </button>
+
      <button
        type="button"
-        class={`file-viewer-toolbar-button${props.contextMode === "collapsed" ? " active" : ""}`}
-        aria-pressed={props.contextMode === "collapsed"}
-        onClick={() => props.onContextModeChange("collapsed")}
-        title="Hide unchanged regions"
+        class={`file-viewer-toolbar-icon-button${props.wordWrapMode === "on" ? " active" : ""}`}
+        onClick={() => props.onWordWrapModeChange(nextWordWrapMode())}
+        aria-label={wordWrapTitle()}
+        title={wordWrapTitle()}
      >
-        Collapsed
-      </button>
-      <button
-        type="button"
-        class={`file-viewer-toolbar-button${props.contextMode === "expanded" ? " active" : ""}`}
-        aria-pressed={props.contextMode === "expanded"}
-        onClick={() => props.onContextModeChange("expanded")}
-        title="Show full file"
-      >
-        Expanded
+        <WrapText class="h-4 w-4" aria-hidden="true" />
      </button>
    </div>
  )
--- a/packages/ui/src/components/instance/shell/right-panel/tabs/ChangesTab.tsx
+++ b/packages/ui/src/components/instance/shell/right-panel/tabs/ChangesTab.tsx
@@ -4,7 +4,7 @@ import { MonacoDiffViewer } from "../../../../file-viewer/monaco-diff-viewer"

 import DiffToolbar from "../components/DiffToolbar"
 import SplitFilePanel from "../components/SplitFilePanel"
-import type { DiffContextMode, DiffViewMode } from "../types"
+import type { DiffContextMode, DiffViewMode, DiffWordWrapMode } from "../types"

 interface ChangesTabProps {
  t: (key: string, vars?: Record<string, any>) => string
@@ -18,8 +18,10 @@ interface ChangesTabProps {

  diffViewMode: Accessor<DiffViewMode>
  diffContextMode: Accessor<DiffContextMode>
+  diffWordWrapMode: Accessor<DiffWordWrapMode>
  onViewModeChange: (mode: DiffViewMode) => void
  onContextModeChange: (mode: DiffContextMode) => void
+  onWordWrapModeChange: (mode: DiffWordWrapMode) => void

  listOpen: Accessor<boolean>
  onToggleList: () => void
@@ -77,14 +79,6 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {

    const renderViewer = () => (
      <div class="file-viewer-panel flex-1">
-        <div class="file-viewer-header">
-          <DiffToolbar
-            viewMode={props.diffViewMode()}
-            contextMode={props.diffContextMode()}
-            onViewModeChange={props.onViewModeChange}
-            onContextModeChange={props.onContextModeChange}
-          />
-        </div>
        <div class="file-viewer-content file-viewer-content--monaco">
          <Show
            when={selectedFileData && hasSession && Array.isArray(diffs) && diffs.length > 0 ? selectedFileData : null}
@@ -102,6 +96,7 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
                after={String((file() as any).after || "")}
                viewMode={props.diffViewMode()}
                contextMode={props.diffContextMode()}
+                wordWrap={props.diffWordWrapMode()}
              />
            )}
          </Show>
@@ -182,6 +177,17 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
                <span class="files-tab-stat-value">-{totals.deletions}</span>
              </span>
            </div>
+
+            <div style={{ "margin-left": "auto" }}>
+              <DiffToolbar
+                viewMode={props.diffViewMode()}
+                contextMode={props.diffContextMode()}
+                wordWrapMode={props.diffWordWrapMode()}
+                onViewModeChange={props.onViewModeChange}
+                onContextModeChange={props.onContextModeChange}
+                onWordWrapModeChange={props.onWordWrapModeChange}
+              />
+            </div>
          </>
        }
        list={{ panel: renderListPanel, overlay: renderListOverlay }}
--- a/packages/ui/src/components/instance/shell/right-panel/tabs/GitChangesTab.tsx
+++ b/packages/ui/src/components/instance/shell/right-panel/tabs/GitChangesTab.tsx
@@ -7,7 +7,7 @@ import { MonacoDiffViewer } from "../../../../file-viewer/monaco-diff-viewer"

 import DiffToolbar from "../components/DiffToolbar"
 import SplitFilePanel from "../components/SplitFilePanel"
-import type { DiffContextMode, DiffViewMode } from "../types"
+import type { DiffContextMode, DiffViewMode, DiffWordWrapMode } from "../types"

 interface GitChangesTabProps {
  t: (key: string, vars?: Record<string, any>) => string
@@ -29,8 +29,10 @@ interface GitChangesTabProps {

  diffViewMode: Accessor<DiffViewMode>
  diffContextMode: Accessor<DiffContextMode>
+  diffWordWrapMode: Accessor<DiffWordWrapMode>
  onViewModeChange: (mode: DiffViewMode) => void
  onContextModeChange: (mode: DiffContextMode) => void
+  onWordWrapModeChange: (mode: DiffWordWrapMode) => void

  onOpenFile: (path: string) => void
  onRefresh: () => void
@@ -80,14 +82,6 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {

    const renderViewer = () => (
      <div class="file-viewer-panel flex-1">
-        <div class="file-viewer-header">
-          <DiffToolbar
-            viewMode={props.diffViewMode()}
-            contextMode={props.diffContextMode()}
-            onViewModeChange={props.onViewModeChange}
-            onContextModeChange={props.onContextModeChange}
-          />
-        </div>
        <div class="file-viewer-content file-viewer-content--monaco">
          <Show
            when={props.selectedLoading()}
@@ -122,6 +116,7 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
                        after={String((file() as any).after || "")}
                        viewMode={props.diffViewMode()}
                        contextMode={props.diffContextMode()}
+                        wordWrap={props.diffWordWrapMode()}
                      />
                    )}
                  </Show>
@@ -237,6 +232,15 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
            >
              <RefreshCw class={`h-4 w-4${props.statusLoading() ? " animate-spin" : ""}`} />
            </button>
+
+            <DiffToolbar
+              viewMode={props.diffViewMode()}
+              contextMode={props.diffContextMode()}
+              wordWrapMode={props.diffWordWrapMode()}
+              onViewModeChange={props.onViewModeChange}
+              onContextModeChange={props.onContextModeChange}
+              onWordWrapModeChange={props.onWordWrapModeChange}
+            />
          </>
        }
        list={{ panel: renderListPanel, overlay: renderListOverlay }}
--- a/packages/ui/src/components/instance/shell/right-panel/types.ts
+++ b/packages/ui/src/components/instance/shell/right-panel/types.ts
@@ -3,3 +3,5 @@ export type RightPanelTab = "changes" | "git-changes" | "files" | "status"
 export type DiffViewMode = "split" | "unified"

 export type DiffContextMode = "expanded" | "collapsed"
+
+export type DiffWordWrapMode = "on" | "off"
--- a/packages/ui/src/components/instance/shell/storage.ts
+++ b/packages/ui/src/components/instance/shell/storage.ts
@@ -23,6 +23,7 @@ export const RIGHT_PANEL_GIT_CHANGES_LIST_OPEN_NONPHONE_KEY = "opencode-session-
 export const RIGHT_PANEL_GIT_CHANGES_LIST_OPEN_PHONE_KEY = "opencode-session-right-panel-git-changes-list-open-phone-v1"
 export const RIGHT_PANEL_CHANGES_DIFF_VIEW_MODE_KEY = "opencode-session-right-panel-changes-diff-view-mode-v1"
 export const RIGHT_PANEL_CHANGES_DIFF_CONTEXT_MODE_KEY = "opencode-session-right-panel-changes-diff-context-mode-v1"
+export const RIGHT_PANEL_CHANGES_DIFF_WORD_WRAP_KEY = "opencode-session-right-panel-changes-diff-word-wrap-v1"

 export const clampWidth = (value: number) =>
  Math.min(MAX_SESSION_SIDEBAR_WIDTH, Math.max(MIN_SESSION_SIDEBAR_WIDTH, value))
--- a/packages/ui/src/styles/panels/right-panel.css
+++ b/packages/ui/src/styles/panels/right-panel.css
@@ -282,7 +282,7 @@
 }

 .file-viewer-toolbar {
-  @apply ml-auto flex items-center gap-1;
+  @apply flex items-center gap-1;
 }

 .file-viewer-toolbar-button {
@@ -291,6 +291,22 @@
  color: var(--text-secondary);
 }

+.file-viewer-toolbar-icon-button {
+  @apply inline-flex items-center justify-center shrink-0 w-7 h-7 border border-base transition-colors;
+  background-color: var(--surface-base);
+  color: var(--text-secondary);
+}
+
+.file-viewer-toolbar-icon-button:hover {
+  background-color: var(--surface-hover);
+  color: var(--text-primary);
+}
+
+.file-viewer-toolbar-icon-button.active {
+  color: var(--text-primary);
+  box-shadow: inset 0 0 0 1px var(--accent-primary);
+}
+
 .file-viewer-toolbar-button:hover {
  background-color: var(--surface-hover);
  color: var(--text-primary);