@young1lin/dsh-ui-gitworkbench 0.1.15 → 0.1.16

package/lib/worktree.js

@@ -141,6 +141,89 @@ export function isRefName(ref) {
 export function worktreeDir(repoRoot, name) {
     return `${repoRoot.replace(/\/+$/, '')}/.agents/worktrees/${name}`;
 }
+/**
+ * Deepest ancestor chain walked before the lookup gives up. Real delegation
+ * nests two or three levels; the cap exists so a corrupt lineage (a cycle the
+ * guard below somehow missed, a pathologically deep chain) costs a bounded
+ * number of lookups instead of walking forever.
+ */
+const LINEAGE_HOP_CAP = 8;
+/**
+ * Resolve the binding a session effectively works under: its own, else the
+ * nearest ancestor's.
+ *
+ * A subagent session never gets a binding of its own — `worktree_enter` is
+ * called by the session that wants the worktree — but it works wherever its
+ * parent conversation works: the standing prompt, the chip, and `worktree_exit`'s
+ * diagnostics all answer "which worktree is THIS session in" through here. The
+ * walk is re-resolved on every read, so a session exiting its worktree changes
+ * only its own binding: descendants lend the next bound ancestor up the chain
+ * on their next read (possibly none — the common case — possibly a grandparent's,
+ * which is still the conversation tree they work in) and nothing dangles.
+ *
+ * Own wins over inherited on purpose: a session that enters a worktree of its
+ * own is deliberately somewhere else than its parent.
+ * @param sessionId - the session whose effective binding is wanted.
+ * @param parentOf - session id → parent session id, as `agent/session-start`
+ * delivered it (subagent headers name their parent).
+ * @param bindingOf - binding lookup (the bindings file, or the prompt mirror).
+ * @returns the effective binding, or undefined when neither the session nor any
+ * ancestor (within the hop cap) is bound.
+ */
+export function resolveEffectiveBinding(sessionId, parentOf, bindingOf) {
+    const own = bindingOf(sessionId);
+    if (own !== undefined)
+        return { binding: own, inherited: false };
+    const seen = new Set([sessionId]);
+    let ancestor = parentOf.get(sessionId);
+    for (let hops = 0; ancestor !== undefined && hops < LINEAGE_HOP_CAP; hops += 1) {
+        if (seen.has(ancestor))
+            return undefined;
+        seen.add(ancestor);
+        const binding = bindingOf(ancestor);
+        if (binding !== undefined)
+            return { binding, inherited: true };
+        ancestor = parentOf.get(ancestor);
+    }
+    return undefined;
+}
+/**
+ * The session's parent edge, read off a dsh session header: the id of the
+ * session this one was delegated by, or undefined for a top-level session (or
+ * a malformed empty value). Both `parentOf` feeds — the `agent/session-start`
+ * listener and the prompt-time self-heal — go through here, so their input
+ * guards cannot drift apart.
+ */
+export function lineageEdgeOf(header) {
+    const parent = header?.parentSession;
+    return typeof parent === 'string' && parent.length > 0 ? parent : undefined;
+}
+/**
+ * The standing notice for a session's effective binding — the text the
+ * `worktree:binding` prompt context returns. Both variants carry the same two
+ * operational rules; what differs is who holds the binding, and the inherited
+ * variant must NOT offer `worktree_exit` (the caller cannot unbind a parent's
+ * binding — the exit would fail, and the model should not be told to try).
+ * @param name - worktree name (also the directory under `.agents/worktrees/`).
+ * @param branch - branch checked out there, when known.
+ * @param inherited - whether an ancestor, not this session, holds the binding.
+ */
+export function bindingNotice(name, branch, inherited) {
+    const rel = `.agents/worktrees/${name}`;
+    const branchNote = branch === undefined ? '' : ` (branch ${branch})`;
+    const opening = inherited
+        ? `This session works in git worktree "${name}"${branchNote}, entered by its parent session.`
+        : `This session is bound to git worktree "${name}"${branchNote}.`;
+    const closing = inherited
+        ? 'A path without that prefix acts on the MAIN worktree, not the worktree this conversation works in. '
+            + '(The binding belongs to the parent session; worktree_exit here would not unbind it.)'
+        : 'A path without that prefix acts on the MAIN worktree, not the bound one. Call worktree_exit to unbind.';
+    return `${opening}\n`
+        + 'The session working directory is still the repository root, so the binding is a convention you must apply yourself:\n'
+        + `- shell commands: pass workdir "${rel}"\n`
+        + `- file tools: prefix every path with ${rel}/\n`
+        + closing;
+}
 export function parseWorktreeList(porcelain) {
     const out = [];
     let path = '';

package/lib/write-checked.js

@@ -31,7 +31,7 @@
  */
 import { randomBytes } from 'node:crypto';
 import { renameWithRetry } from './atomic-json.js';
-import { resolveInside } from './fs-remove.js';
+import { resolveInside } from './path-lock.js';
 import { decodesAsUtf8, isSafePathArg } from './git-ops.js';
 /**
  * Run one checked write end to end. Never throws: every failure, including an

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@young1lin/dsh-ui-gitworkbench",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "Out-of-tree dsh web UI plugin: a session-header git workbench chip opening a drawer with the file tree, per-file diff, history, compare, staging, commit, and sync (fetch/pull/push).",
   "type": "module",
   "main": "lib/index.js",

package/src/client/ChromeGlyph.tsx

@@ -16,6 +16,11 @@ const CHROME_GLYPH = {
   // and at 14px the only thing telling them apart is the arrow count.
   refresh: 'M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z',
   close: 'M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z',
+  // Drawn here rather than borrowed: Bootstrap has no wrap glyph, and the
+  // three text rules with a return arrow are what every editor spells this
+  // with. Same 16 viewBox and single fill as the rest, so the row still reads
+  // as one set.
+  wrap: 'M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5zM1 7.5a.5.5 0 0 1 .5-.5h11a2.5 2.5 0 0 1 0 5h-2.293l1.147 1.146a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2a.5.5 0 0 1 .708.708L10.207 11H12.5a1.5 1.5 0 0 0 0-3h-11a.5.5 0 0 1-.5-.5zM1 12.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z',
 } as const
 
 export function ChromeGlyph({ of }: { of: keyof typeof CHROME_GLYPH }): ReactNode {

package/src/client/CodeEditor.tsx

@@ -66,6 +66,9 @@ const paintFacet = Facet.define<PaintFn | null, PaintFn | null>({
   combine: values => values.length > 0 ? values[0]! : null,
 })
 const paintCompartment = new Compartment()
+/** Soft wrap, in and out without rebuilding the view — the caret, the undo
+ *  stack and the selection all survive the toggle. */
+const wrapCompartment = new Compartment()
 
 /**
  * How long after the last keystroke the editor recomputes what it paints.
@@ -422,7 +425,7 @@ const paneTheme = EditorView.theme({
   ...SEARCH_PANEL_THEME,
 })
 
-export function CodeEditor({ value, original, onChange, paint, indent, ariaLabel, onSave, blame, notCommitted, readOnly, onBlameClick }: {
+export function CodeEditor({ value, original, onChange, paint, indent, ariaLabel, onSave, blame, notCommitted, readOnly, onBlameClick, wrap }: {
   /** The pane's buffer. The view is written to only when this really differs. */
   value: string
   /** The other side's whole text — the index side, for the unstaged layer this
@@ -450,6 +453,11 @@ export function CodeEditor({ value, original, onChange, paint, indent, ariaLabel
   readOnly?: boolean
   /** A click in the blame gutter, with the 1-based line number. */
   onBlameClick?: (line: number) => void
+  /** Soft wrap. CodeMirror owns variable line heights natively — its height
+   *  oracle measures wrapped lines and its own viewport walk stays correct —
+   *  so this is the whole change here, unlike the diff panes, whose windowing
+   *  assumes a fixed row height. */
+  wrap?: boolean
 }): ReactNode {
   /**
    * Editable, and SAID to be editable, from one boolean.
@@ -486,6 +494,7 @@ export function CodeEditor({ value, original, onChange, paint, indent, ariaLabel
       searchCount,
       highlightActiveLine(),
       paintCompartment.of(paintFacet.of(paint)),
+      wrapCompartment.of(wrap === true ? EditorView.lineWrapping : []),
       painter,
       blameField,
       blameCompartment.of([]),
@@ -565,5 +574,14 @@ export function CodeEditor({ value, original, onChange, paint, indent, ariaLabel
     current.dispatch({ effects: paintCompartment.reconfigure(paintFacet.of(paint)) })
   }, [paint])
 
+  // Wrap in or out. Through the compartment rather than a rebuild: the reader
+  // toggles this to look at the line they are already on, and a rebuilt view
+  // would drop the caret and the undo stack to show it to them.
+  useEffect(() => {
+    const current = view.current
+    if (current === null) return
+    current.dispatch({ effects: wrapCompartment.reconfigure(wrap === true ? EditorView.lineWrapping : []) })
+  }, [wrap])
+
   return <div ref={host} className={css.cmHost} data-editable={editable ? '' : undefined} />
 }

package/src/client/DiffViews.tsx

@@ -15,10 +15,13 @@ import {
   type EditState, type WriteResult,
 } from './side-edit.ts'
 import { PaneDivider } from './PaneDivider.tsx'
+import { SideRails } from './SideRails.tsx'
 import { CodeEditor, type PaintFn } from './CodeEditor.tsx'
 import { detectIndent } from './indent.ts'
 import { grammarLoadCount, highlightForRowsWindow, highlightRange, highlightWindow, shikiLangOf, shikiThemeOf, subscribeGrammarLoaded, type HighlightRun } from './highlight.ts'
 import { useRowWindow } from './use-row-window.ts'
+import { rowMark, useVariableRowWindow } from './use-variable-row-window.ts'
+import { RowSpacer, SideCells } from './diff-cells.tsx'
 import type { BlockAsk, BlockMode, FileSides, GitOpResult, SideLayer, Translate } from './git-workbench-types.ts'
 import css from './GitWorkbenchPanel.module.css'
 
@@ -63,11 +66,15 @@ function NavGlyph({ of }: { of: keyof typeof NAV_GLYPH }): ReactNode {
  * a block child of a scroller is only ever as wide as the scrollport. A header
  * outside the scrolled box has neither problem.
  */
-export function DiffView({ segment, path, palette, t }: {
+export function DiffView({ segment, path, palette, t, wrap }: {
   segment: string
   path: string
   palette: string
   t: Translate
+  /** Soft wrap. Changes the pane's height model, not just its white-space:
+   *  the window below is exact arithmetic while every row is one line tall,
+   *  and measured once they are not. */
+  wrap: boolean
 }): ReactNode {
   const lang = shikiLangOf(path)
   const shikiTheme = shikiThemeOf(palette)
@@ -75,10 +82,15 @@ export function DiffView({ segment, path, palette, t }: {
   const rowsWithWords = useMemo(() => attachWordRanges(parseRows(segment)), [segment])
   const sides = useMemo(() => gutterSides(rowsWithWords), [rowsWithWords])
   const scrollRef = useRef<HTMLDivElement>(null)
+  const preRef = useRef<HTMLPreElement>(null)
   // Windowed for the same reason the side-by-side pane is: a unified diff of a
   // long file put every row in the DOM and re-lexed every one of them, so
-  // opening one froze the pane in exactly the same way.
-  const win = useRowWindow(scrollRef, rowsWithWords.length, path)
+  // opening one froze the pane in exactly the same way. Two models, one live
+  // at a time: exact `i * 20px` while nothing wraps, measured once it does.
+  const fixed = useRowWindow(scrollRef, rowsWithWords.length, path, !wrap)
+  const texts = useMemo(() => rowsWithWords.map(row => row.text), [rowsWithWords])
+  const flow = useVariableRowWindow({ scrollRef, rowsRef: preRef, texts, mountKey: path, scope: 'u', enabled: wrap })
+  const win = wrap ? flow.win : fixed
   const syntax = useMemo(
     () => highlightForRowsWindow(rowsWithWords, lang, shikiTheme, win.start, win.end),
     [rowsWithWords, lang, shikiTheme, win.start, win.end, grammarGen],
@@ -89,9 +101,16 @@ export function DiffView({ segment, path, palette, t }: {
   // the block being walked to.
   const blocksForNav = useRef<readonly number[]>(blocks)
   blocksForNav.current = blocks
+  // Same reason the blocks are held in a ref: the walk is built once, and by
+  // the time it runs the pane may have been wrapped, unwrapped or re-measured.
+  const placeRow = useRef<((index: number) => number) | undefined>(undefined)
+  placeRow.current = wrap ? flow.rowTop : undefined
   const { goToChange } = useChangeNav(
     scrollRef,
-    useCallback(() => blockTopsFromRows(blocksForNav.current, DIFF_ROW_H, DIFF_GRID_PAD_TOP), []),
+    useCallback(
+      () => blockTopsFromRows(blocksForNav.current, DIFF_ROW_H, DIFF_GRID_PAD_TOP, placeRow.current),
+      [],
+    ),
   )
   // Read by the key listener below, which is attached once. `goToChange` only
   // ever touches refs, but pinning it here says so rather than relying on it.
@@ -137,12 +156,12 @@ export function DiffView({ segment, path, palette, t }: {
         </div>
       ) : null}
       <div ref={scrollRef} className={css.diffScroll} tabIndex={-1}>
-    <pre className={css.diffPre}>
+    <pre ref={preRef} className={wrap ? `${css.diffPre} ${css.diffPreWrap}` : css.diffPre}>
       {win.padTop > 0 ? <div className={css.diffSpacer} style={{ height: `${win.padTop}px` }} aria-hidden="true" /> : null}
       {rowsWithWords.slice(win.start, win.end).map((row, k) => {
         const i = win.start + k
         return (
-        <div key={i} className={`${css.line} ${rowClass(row.kind)}`} data-block={blocks[i]! >= 0 ? blocks[i] : undefined}>
+        <div key={i} className={`${css.line} ${rowClass(row.kind)}`} data-block={blocks[i]! >= 0 ? blocks[i] : undefined} {...rowMark('u', i)}>
           {sides.old ? <span className={css.lnOld}>{row.kind === 'add' || row.kind === 'hunk' ? '' : row.oldL}</span> : null}
           {sides.new ? <span className={css.lnNew}>{row.kind === 'del' || row.kind === 'hunk' ? '' : row.newL}</span> : null}
           <span className={`${css.gutter} ${row.kind === 'add' ? css.signAdd : row.kind === 'del' ? css.signDel : ''}`}>
@@ -222,10 +241,14 @@ function renderCode(row: RowWithRanges, tokens: readonly HighlightRun[]): ReactN
  * (history and compare keep it unconditionally), with a notice — a silently
  * different view reads as a broken one, not a guarded one.
  */
-export function SideBySideView({ t, path, palette, statsPath, fetchSides, writeChecked, scopeKey, gen, fallbackSegment, fallbackLoading, onBlockAction, onSaved, onDirtyChange }: {
+export function SideBySideView({ t, path, palette, wrap, statsPath, fetchSides, writeChecked, scopeKey, gen, fallbackSegment, fallbackLoading, onBlockAction, onSaved, onDirtyChange }: {
   t: Translate
   path: string
   palette: string
+  /** Soft wrap. Passed through to the editor and the unified fallback; the two
+   *  aligned columns are the case it costs the most, since a row's height is
+   *  whichever side wrapped further. */
+  wrap: boolean
   statsPath: string | undefined
   fetchSides: (worktreePath: string | undefined, path: string, layer: SideLayer, signal: AbortSignal) => Promise<FileSides | null>
   /** Save the editor buffer; the host refuses a stale sha and nothing is written. */
@@ -390,7 +413,31 @@ export function SideBySideView({ t, path, palette, statsPath, fetchSides, writeC
   // line by line. Declared here because both the render and the highlighting
   // below are bounded by it.
   const rowWindowKey = `${scopeKey}\x1f${path}\x1f${layer}\x1f${sides?.diffSha ?? ''}`
-  const win = useRowWindow(scrollRef, rows.length, rowWindowKey)
+  const alignedGridRef = useRef<HTMLDivElement>(null)
+  const denseGridRef = useRef<HTMLDivElement>(null)
+  // The two columns themselves, for the rails that scroll them — see
+  // SideRails.tsx: each column's own scrollbar is drawn at the bottom of the
+  // FILE, which is not a place a scrollbar can be used from.
+  const leftColRef = useRef<HTMLDivElement>(null)
+  const rightColRef = useRef<HTMLDivElement>(null)
+  const fixedWin = useRowWindow(scrollRef, rows.length, rowWindowKey, !wrap)
+  // The taller of a row's two sides is what the row is worth, so the estimate
+  // is fed the longer of the two texts.
+  const rowTexts = useMemo(
+    () => rows.map(row => {
+      const left = row.left?.text ?? ''
+      const right = row.right?.text ?? ''
+      return left.length >= right.length ? left : right
+    }),
+    [rows],
+  )
+  // Both columns, because a row is as tall as its taller side; the width is
+  // read from one column, because that is what a line wraps inside.
+  const flow = useVariableRowWindow({
+    scrollRef, rowsRef: colsRef, widthRef: alignedGridRef,
+    texts: rowTexts, mountKey: rowWindowKey, scope: 'a', enabled: wrap,
+  })
+  const win = wrap ? flow.win : fixedWin
   //
   // Two passes with two lifetimes. The whole-file pass runs once per file and
   // is what knows about block comments and template literals; the per-line
@@ -469,7 +516,17 @@ export function SideBySideView({ t, path, palette, statsPath, fetchSides, writeC
   // two columns render two different row lists while the editor is armed: the
   // right side is a buffer, and the left side is then the index side DENSE,
   // one row per index line rather than one per aligned row.
-  const leftWin = useRowWindow(scrollRef, leftRows.length, rowWindowKey)
+  const fixedLeftWin = useRowWindow(scrollRef, leftRows.length, rowWindowKey, !wrap)
+  const leftTexts = useMemo(() => leftRows.map(entry => entry.row.left?.text ?? ''), [leftRows])
+  // Its own height model: the dense column's rows are the INDEX side's lines,
+  // a different list from the aligned rows, so it cannot share theirs. Nothing
+  // has to line up with it — the other column is a CodeMirror buffer that wraps
+  // on its own — but its spacers still have to add up to what it renders.
+  const leftFlow = useVariableRowWindow({
+    scrollRef, rowsRef: denseGridRef,
+    texts: leftTexts, mountKey: rowWindowKey, scope: 'd', enabled: wrap,
+  })
+  const leftWin = wrap ? leftFlow.win : fixedLeftWin
 
   // Arming drops the caret straight into the buffer: the click that armed the
   // editor said "I want to type here", and a second click to focus is a tax.
@@ -666,7 +723,7 @@ export function SideBySideView({ t, path, palette, statsPath, fetchSides, writeC
 
   /** The pane the drawer had before this view existed, notice included. */
   const unifiedFallback = (): ReactNode => fallbackSegment.length > 0
-    ? <DiffView segment={fallbackSegment} path={path} palette={palette} t={t} />
+    ? <DiffView segment={fallbackSegment} path={path} palette={palette} t={t} wrap={wrap} />
     : <div className={css.empty}>{fallbackLoading ? t('loadingDiff') : t('noTextDiff')}</div>
 
   if (failed) return unifiedFallback()
@@ -868,6 +925,7 @@ export function SideBySideView({ t, path, palette, statsPath, fetchSides, writeC
       {bodyState.kind === 'empty' ? (
         <div className={css.empty}>{t('noTextDiff')}</div>
       ) : (
+      <>
       <div
         ref={colsRef}
         className={css.sideCols}
@@ -875,8 +933,11 @@ export function SideBySideView({ t, path, palette, statsPath, fetchSides, writeC
         onMouseDown={onBodySelect}
         onMouseLeave={() => { setHotBlock(null) }}
       >
-        <div className={css.sideCol} style={{ flexBasis: `${split * 100}%`, paddingTop: blockBarClearance }}>
-          <div className={css.sideColGrid}>
+        <div ref={leftColRef} className={wrap ? `${css.sideCol} ${css.sideColWrap}` : css.sideCol} style={{ flexBasis: `${split * 100}%`, paddingTop: blockBarClearance }}>
+          <div
+            ref={bodyState.kind === 'editor' ? denseGridRef : alignedGridRef}
+            className={wrap ? `${css.sideColGrid} ${css.sideColGridWrap}` : css.sideColGrid}
+          >
             {bodyState.kind === 'editor' ? (
               /* While armed the left column renders the index side DENSE —
                  one row per index line, no diff holes — because the right
@@ -888,16 +949,18 @@ export function SideBySideView({ t, path, palette, statsPath, fetchSides, writeC
                 const k = leftWin.start + kk
                 const { row, i } = entry
                 const hot = hotBlock !== null && row.block === hotBlock
-                const current = row.block >= 0 && row.block === currentBlock
-                const hotClass = blockHotClass(rows, i, 'left', current)
                 return (
-                  <Fragment key={`l${i}`}>
-                    <span className={`${sideNumClass(row, 'left')}${hotClass}`}>{row.left!.line}</span>
-                    <span className={`${css.sideCode} ${sideCodeClass(row, 'left')}${hotClass}`} data-block={row.left !== null && row.block >= 0 ? row.block : undefined}>
-                      {renderSideCode(row.left, leftSyntax?.[i])}
-                      {hot && k === hotFirstLeft ? blockBar(row.block) : null}
-                    </span>
-                  </Fragment>
+                  <SideCells
+                    key={`l${i}`}
+                    row={row} side="left" index={i} rows={rows}
+                    current={row.block >= 0 && row.block === currentBlock}
+                    tokens={leftSyntax?.[i]}
+                    // Marked by its DENSE index: this column's rows are the
+                    // index side's lines, not the aligned ones. Nothing to
+                    // impose a height for — the buffer beside it wraps itself.
+                    mark={wrap ? rowMark('d', k) : undefined}
+                    bar={hot && k === hotFirstLeft ? blockBar(row.block) : null}
+                  />
                 )
               })}
               <RowSpacer height={leftWin.padBottom} />
@@ -908,20 +971,19 @@ export function SideBySideView({ t, path, palette, statsPath, fetchSides, writeC
               {rows.slice(win.start, win.end).map((row, k) => {
                 const i = win.start + k
                 const hot = hotBlock !== null && row.block === hotBlock
-                const current = row.block >= 0 && row.block === currentBlock
-                const hotClass = blockHotClass(rows, i, 'left', current)
-                // The block's action bar rides in this column only for a row
-                // with no right-hand side — a pure deletion, where the right
-                // column has no cell to hang it on.
-                const bar = hot && i === hotFirst && row.right === null ? blockBar(row.block) : null
                 return (
-                  <Fragment key={i}>
-                    <span className={`${sideNumClass(row, 'left')}${hotClass}`}>{row.left === null ? '' : row.left.line}</span>
-                    <span className={`${css.sideCode} ${sideCodeClass(row, 'left')}${hotClass}`} data-block={row.left !== null && row.block >= 0 ? row.block : undefined}>
-                      {renderSideCode(row.left, leftSyntax?.[i])}
-                      {bar}
-                    </span>
-                  </Fragment>
+                  <SideCells
+                    key={i}
+                    row={row} side="left" index={i} rows={rows}
+                    current={row.block >= 0 && row.block === currentBlock}
+                    tokens={leftSyntax?.[i]}
+                    mark={wrap ? rowMark('a', i) : undefined}
+                    minHeight={wrap ? flow.rowHeight(i) : undefined}
+                    // The block's action bar rides in this column only for a
+                    // row with no right-hand side — a pure deletion, where the
+                    // right column has no cell to hang it on.
+                    bar={hot && i === hotFirst && row.right === null ? blockBar(row.block) : null}
+                  />
                 )
               })}
               <RowSpacer height={win.padBottom} />
@@ -930,7 +992,11 @@ export function SideBySideView({ t, path, palette, statsPath, fetchSides, writeC
           </div>
         </div>
         <PaneDivider label={t('resizeSides')} onDrag={onSplitDrag} />
-        <div className={`${css.sideCol} ${css.sideColRight}`} style={{ paddingTop: blockBarClearance }}>
+        <div
+          ref={rightColRef}
+          className={wrap ? `${css.sideCol} ${css.sideColRight} ${css.sideColWrap}` : `${css.sideCol} ${css.sideColRight}`}
+          style={{ paddingTop: blockBarClearance }}
+        >
           {bodyState.kind === 'editor' ? (
             <CodeEditor
               value={edit.buffer}
@@ -940,28 +1006,26 @@ export function SideBySideView({ t, path, palette, statsPath, fetchSides, writeC
               indent={indentOfBuffer}
               ariaLabel={path}
               onSave={() => { if (dirty && !saving) void runSave(edit.baseSha) }}
+              wrap={wrap}
             />
           ) : (
-            <div className={css.sideColGrid}>
+            <div className={wrap ? `${css.sideColGrid} ${css.sideColGridWrap}` : css.sideColGrid}>
               <RowSpacer height={win.padTop} />
               {rows.slice(win.start, win.end).map((row, k) => {
                 const i = win.start + k
                 const hot = hotBlock !== null && row.block === hotBlock
-                const current = row.block >= 0 && row.block === currentBlock
-                const hotClass = blockHotClass(rows, i, 'right', current)
-                const bar = hot && i === hotFirst && row.right !== null ? blockBar(row.block) : null
                 return (
-                  <Fragment key={i}>
-                    <span className={`${sideNumClass(row, 'right')}${hotClass}`}>{row.right === null ? '' : row.right.line}</span>
-                    <span
-                      className={`${css.sideCode} ${sideCodeClass(row, 'right')}${hotClass}${layer === 'unstaged' && armable ? ` ${css.sideArmable}` : ''}`}
-                      data-block={row.right !== null && row.block >= 0 ? row.block : undefined}
-                      onClick={layer === 'unstaged' && armable ? armFromCell : undefined}
-                    >
-                      {renderSideCode(row.right, rightSyntax?.[i])}
-                      {bar}
-                    </span>
-                  </Fragment>
+                  <SideCells
+                    key={i}
+                    row={row} side="right" index={i} rows={rows}
+                    current={row.block >= 0 && row.block === currentBlock}
+                    tokens={rightSyntax?.[i]}
+                    mark={wrap ? rowMark('a', i) : undefined}
+                    minHeight={wrap ? flow.rowHeight(i) : undefined}
+                    bar={hot && i === hotFirst && row.right !== null ? blockBar(row.block) : null}
+                    armable={layer === 'unstaged' && armable}
+                    onArm={layer === 'unstaged' && armable ? armFromCell : undefined}
+                  />
                 )
               })}
               <RowSpacer height={win.padBottom} />
@@ -969,6 +1033,8 @@ export function SideBySideView({ t, path, palette, statsPath, fetchSides, writeC
           )}
         </div>
       </div>
+      <SideRails leftRef={leftColRef} rightRef={rightColRef} split={split} />
+      </>
       )}
       </div>
       {pendingLayer !== null ? (
@@ -1026,74 +1092,3 @@ export function LeaveEditsConfirm({ t, path, onCancel, onConfirm }: {
     </div>
   )
 }
-
-/** Classes that paint only a block's OUTER perimeter. Internal rows carry the
- * vertical edges but no top/bottom line, avoiding the blue ladder a large
- * addition block used to draw. Absent side-cells return no class at all. */
-function blockHotClass(rows: readonly SideRow[], index: number, side: 'left' | 'right', hot: boolean): string {
-  if (!hot) return ''
-  const edge = blockEdge(rows, index, side)
-  if (edge === null) return ''
-  const first = edge === 'first' || edge === 'single' ? ` ${css.sideBlockHotFirst}` : ''
-  const last = edge === 'last' || edge === 'single' ? ` ${css.sideBlockHotLast}` : ''
-  return ` ${css.sideBlockHot}${first}${last}`
-}
-
-/** Line-number cell class: a PRESENT cell of a changed row carries its side's
- *  tint into the gutter; an absent one stays blank, the way a split diff shows
- *  a one-sided change with an empty opposite pane rather than a tinted void. */
-function sideNumClass(row: SideRow, side: 'left' | 'right'): string {
-  const cell = side === 'left' ? row.left : row.right
-  if (cell === null || row.kind === 'same') return css.sideNum
-  return `${css.sideNum} ${side === 'left' ? css.sideNumDel : css.sideNumAdd}`
-}
-
-/** Code cell class: deletions tint left, additions right, context stays quiet. */
-function sideCodeClass(row: SideRow, side: 'left' | 'right'): string {
-  const cell = side === 'left' ? row.left : row.right
-  if (cell === null || row.kind === 'same') return css.sideCodeSame
-  return `${side === 'left' ? css.sideCodeDel : css.sideCodeAdd} ${css.sideCellBlock}`
-}
-
-/** One text with every carriage return drawn as the CR glyph. No CR means
- * the text comes back untouched — the common line, on both sides, costs one
- * `includes`. The glyph spans are aria-hidden and unselectable, so copying a
- * line copies code, not markers. */
-function renderWithCrMarks(text: string): ReactNode {
-  const parts = splitOnCr(text)
-  if (parts.length === 1) return text
-  const out: ReactNode[] = [parts[0]!]
-  for (let i = 1; i < parts.length; i += 1) {
-    out.push(<span key={`cr${i}`} className={css.crMark} aria-hidden="true">{CR_GLYPH}</span>)
-    out.push(parts[i]!)
-  }
-  return out
-}
-
-/** One cell's Shiki runs, or its plain text when no tokens exist; either way
- * each carriage return in the cell is drawn, so a line whose only change is
- * its ending shows the difference instead of two identical-looking cells. */
-function renderSideCode(cell: SideCell | null, tokens: readonly HighlightRun[] | undefined): ReactNode {
-  if (cell === null) return ''
-  if (tokens === undefined || tokens.length === 0) return renderWithCrMarks(cell.text)
-  if (tokens.length === 1 && tokens[0]!.color === undefined && !tokens[0]!.italic) return renderWithCrMarks(cell.text)
-  return tokens.map((tok, i) => (
-    <span
-      key={i}
-      style={tok.color === undefined && !tok.italic ? undefined : { color: tok.color, fontStyle: tok.italic ? 'italic' : undefined }}
-    >{renderWithCrMarks(tok.text)}</span>
-  ))
-}
-
-
-
-/**
- * The spacer standing in for the rows above or below the window.
- *
- * It spans every column of the grid, so a blame gutter does not change it.
- * @param height - px of rows it stands in for; nothing is rendered for 0.
- */
-function RowSpacer({ height }: { height: number }): ReactNode {
-  if (height <= 0) return null
-  return <span className={css.sideSpacer} style={{ height: `${height}px` }} aria-hidden="true" />
-}