diff --git a/packages/diff-view/src/parts/ClassNames/ClassNames.ts b/packages/diff-view/src/parts/ClassNames/ClassNames.ts
index 8ffa649..37aa06e 100644
--- a/packages/diff-view/src/parts/ClassNames/ClassNames.ts
+++ b/packages/diff-view/src/parts/ClassNames/ClassNames.ts
@@ -71,8 +71,11 @@ export const DiffEditorErrorMessage = 'DiffEditorErrorMessage'
 export const DiffEditorErrorStack = 'DiffEditorErrorStack'
 export const DiffEditorErrorStackLink = 'DiffEditorErrorStackLink'
 export const DiffEditorGutter = 'DiffEditorGutter'
+export const DiffEditorLineMissing = 'DiffEditorLineMissing'
 export const DiffEditorLineNumber = 'DiffEditorLineNumber'
+export const DiffEditorLineNumberDeletion = 'DiffEditorLineNumberDeletion'
 export const DiffEditorLineNumberEmpty = 'DiffEditorLineNumberEmpty'
+export const DiffEditorLineNumberInsertion = 'DiffEditorLineNumberInsertion'
 export const DiffEditorRows = 'DiffEditorRows'
 export const DiffEditorHorizontal = 'DiffEditorHorizontal'
 export const DiffEditorVertical = 'DiffEditorVertical'
diff --git a/packages/diff-view/src/parts/GetContentDomWithLineNumbers/GetGutterDom/GetGutterDom.ts b/packages/diff-view/src/parts/GetContentDomWithLineNumbers/GetGutterDom/GetGutterDom.ts
index 2c59f6e..5502d09 100644
--- a/packages/diff-view/src/parts/GetContentDomWithLineNumbers/GetGutterDom/GetGutterDom.ts
+++ b/packages/diff-view/src/parts/GetContentDomWithLineNumbers/GetGutterDom/GetGutterDom.ts
@@ -28,7 +28,7 @@ export const getGutterDom = (visibleLines: readonly VisibleLine[], itemHeight: n
       childCount++
       emptyLineCount = 0
     }
-    children.push(...getLineNumberDom(line.lineNumber))
+    children.push(...getLineNumberDom(line.lineNumber, line.type))
     childCount++
   }
 
diff --git a/packages/diff-view/src/parts/GetDiffEditorVirtualDom/GetDiffEditorVirtualDom.ts b/packages/diff-view/src/parts/GetDiffEditorVirtualDom/GetDiffEditorVirtualDom.ts
index 3e31bc6..3c079dc 100644
--- a/packages/diff-view/src/parts/GetDiffEditorVirtualDom/GetDiffEditorVirtualDom.ts
+++ b/packages/diff-view/src/parts/GetDiffEditorVirtualDom/GetDiffEditorVirtualDom.ts
@@ -5,6 +5,8 @@ import * as ClassNames from '../ClassNames/ClassNames.ts'
 import * as DomEventListenerFunctions from '../DomEventListenerFunctions/DomEventListenerFunctions.ts'
 import { getContentLeftDom } from '../GetContentLeftDom/GetContentLeftDom.ts'
 import { getContentRightDom } from '../GetContentRightDom/GetContentRightDom.ts'
+import { getImageLeftDom } from '../GetImageLeftDom/GetImageLeftDom.ts'
+import { getImageRightDom } from '../GetImageRightDom/GetImageRightDom.ts'
 import { getInlineDiffEditorVirtualDom } from '../GetInlineDiffEditorVirtualDom/GetInlineDiffEditorVirtualDom.ts'
 import { getSashDom } from '../GetSashDom/GetSashDom.ts'
 import { getScrollBarDom } from '../GetScrollBarDom/GetScrollBarDom.ts'
@@ -21,6 +23,8 @@ export const getDiffEditorVirtualDom = (state: DiffViewState): readonly VirtualD
     errorRightCodeFrame,
     errorRightMessage,
     errorRightStack,
+    imageSrcLeft,
+    imageSrcRight,
     inlineChanges,
     itemHeight,
     layout,
@@ -34,6 +38,8 @@ export const getDiffEditorVirtualDom = (state: DiffViewState): readonly VirtualD
     tokenizedLinesRight,
     totalLineCountLeft,
     totalLineCountRight,
+    uriLeft,
+    uriRight,
     visibleLinesLeft,
     visibleLinesRight,
   } = state
@@ -45,36 +51,42 @@ export const getDiffEditorVirtualDom = (state: DiffViewState): readonly VirtualD
   const showLineNumbers = lineNumbers && renderModeLeft === 'text' && renderModeRight === 'text'
   const diffEditorLayoutClass = layout === 'vertical' ? ClassNames.DiffEditorVertical : ClassNames.DiffEditorHorizontal
   const sashLayoutClass = layout === 'vertical' ? ClassNames.SashHorizontal : ClassNames.SashVertical
-  const leftDom = getContentLeftDom({
-    allowedLinkSchemes,
-    contentLeft,
-    errorCodeFrame: errorLeftCodeFrame,
-    errorMessage: errorLeftMessage,
-    errorStack: errorLeftStack,
-    inlineChanges,
-    itemHeight,
-    lineNumbers: showLineNumbers,
-    maxLineY,
-    minLineY,
-    tokenizedLines: tokenizedLinesLeft,
-    totalLineCount: totalLineCountLeft,
-    visibleLines: visibleLinesLeft,
-  })
-  const rightDom = getContentRightDom({
-    allowedLinkSchemes,
-    contentRight,
-    errorCodeFrame: errorRightCodeFrame,
-    errorMessage: errorRightMessage,
-    errorStack: errorRightStack,
-    inlineChanges,
-    itemHeight,
-    lineNumbers: showLineNumbers,
-    maxLineY,
-    minLineY,
-    tokenizedLines: tokenizedLinesRight,
-    totalLineCount: totalLineCountRight,
-    visibleLines: visibleLinesRight,
-  })
+  const leftDom =
+    renderModeLeft === 'image' && !errorLeftMessage
+      ? getImageLeftDom(uriLeft, imageSrcLeft)
+      : getContentLeftDom({
+          allowedLinkSchemes,
+          contentLeft,
+          errorCodeFrame: errorLeftCodeFrame,
+          errorMessage: errorLeftMessage,
+          errorStack: errorLeftStack,
+          inlineChanges,
+          itemHeight,
+          lineNumbers: showLineNumbers,
+          maxLineY,
+          minLineY,
+          tokenizedLines: tokenizedLinesLeft,
+          totalLineCount: totalLineCountLeft,
+          visibleLines: visibleLinesLeft,
+        })
+  const rightDom =
+    renderModeRight === 'image' && !errorRightMessage
+      ? getImageRightDom(uriRight, imageSrcRight)
+      : getContentRightDom({
+          allowedLinkSchemes,
+          contentRight,
+          errorCodeFrame: errorRightCodeFrame,
+          errorMessage: errorRightMessage,
+          errorStack: errorRightStack,
+          inlineChanges,
+          itemHeight,
+          lineNumbers: showLineNumbers,
+          maxLineY,
+          minLineY,
+          tokenizedLines: tokenizedLinesRight,
+          totalLineCount: totalLineCountRight,
+          visibleLines: visibleLinesRight,
+        })
   const scrollBarDom = scrollBarActive ? getScrollBarDom() : []
   const dom: readonly VirtualDomNode[] = [
     {
diff --git a/packages/diff-view/src/parts/GetInlineDiffLineNumberDom/GetInlineDiffLineNumberDom.ts b/packages/diff-view/src/parts/GetInlineDiffLineNumberDom/GetInlineDiffLineNumberDom.ts
index 13d5eb8..592dc5f 100644
--- a/packages/diff-view/src/parts/GetInlineDiffLineNumberDom/GetInlineDiffLineNumberDom.ts
+++ b/packages/diff-view/src/parts/GetInlineDiffLineNumberDom/GetInlineDiffLineNumberDom.ts
@@ -1,14 +1,14 @@
 import type { VirtualDomNode } from '@lvce-editor/virtual-dom-worker'
 import { text, VirtualDomElements } from '@lvce-editor/virtual-dom-worker'
 import type { InlineDiffRow } from '../GetInlineDiffRows/GetInlineDiffRows.ts'
-import * as ClassNames from '../ClassNames/ClassNames.ts'
 import { getInlineDiffLineNumberText } from '../GetInlineDiffLineNumberText/GetInlineDiffLineNumberText.ts'
+import { getLineNumberClassName } from '../GetLineNumberClassName/GetLineNumberClassName.ts'
 
 export const getInlineDiffLineNumberDom = (row: InlineDiffRow): readonly VirtualDomNode[] => {
   return [
     {
       childCount: 1,
-      className: ClassNames.DiffEditorLineNumber,
+      className: getLineNumberClassName(row.type),
       type: VirtualDomElements.Div,
     },
     text(getInlineDiffLineNumberText(row)),
diff --git a/packages/diff-view/src/parts/GetInlineDiffLineNumberText/GetInlineDiffLineNumberText.ts b/packages/diff-view/src/parts/GetInlineDiffLineNumberText/GetInlineDiffLineNumberText.ts
index f497b0d..0e7751b 100644
--- a/packages/diff-view/src/parts/GetInlineDiffLineNumberText/GetInlineDiffLineNumberText.ts
+++ b/packages/diff-view/src/parts/GetInlineDiffLineNumberText/GetInlineDiffLineNumberText.ts
@@ -1,7 +1,7 @@
 import type { InlineDiffRow } from '../GetInlineDiffRows/GetInlineDiffRows.ts'
 
 export const getInlineDiffLineNumberText = (row: InlineDiffRow): string => {
-  const left = row.lineNumberLeft === null ? '-' : String(row.lineNumberLeft)
-  const right = row.lineNumberRight === null ? '-' : String(row.lineNumberRight)
+  const left = row.lineNumberLeft === null ? '' : String(row.lineNumberLeft)
+  const right = row.lineNumberRight === null ? '' : String(row.lineNumberRight)
   return `${left} ${right}`
 }
diff --git a/packages/diff-view/src/parts/GetLineNumberClassName/GetLineNumberClassName.ts b/packages/diff-view/src/parts/GetLineNumberClassName/GetLineNumberClassName.ts
new file mode 100644
index 0000000..ae6e230
--- /dev/null
+++ b/packages/diff-view/src/parts/GetLineNumberClassName/GetLineNumberClassName.ts
@@ -0,0 +1,15 @@
+import * as ClassNames from '../ClassNames/ClassNames.ts'
+import { InlineDiffRowType, type InlineDiffRow } from '../GetInlineDiffRows/GetInlineDiffRows.ts'
+import { VisibleLineType, type VisibleLine } from '../VisibleLine/VisibleLine.ts'
+
+type LineNumberType = VisibleLine['type'] | InlineDiffRow['type']
+
+export const getLineNumberClassName = (type: LineNumberType = VisibleLineType.Normal): string => {
+  if (type === VisibleLineType.Removed || type === InlineDiffRowType.Deletion) {
+    return `${ClassNames.DiffEditorLineNumber} ${ClassNames.DiffEditorLineNumberDeletion}`
+  }
+  if (type === VisibleLineType.Added || type === InlineDiffRowType.Insertion) {
+    return `${ClassNames.DiffEditorLineNumber} ${ClassNames.DiffEditorLineNumberInsertion}`
+  }
+  return ClassNames.DiffEditorLineNumber
+}
diff --git a/packages/diff-view/src/parts/GetLineNumberDom/GetLineNumberDom.ts b/packages/diff-view/src/parts/GetLineNumberDom/GetLineNumberDom.ts
index dcefcb9..4e43ba8 100644
--- a/packages/diff-view/src/parts/GetLineNumberDom/GetLineNumberDom.ts
+++ b/packages/diff-view/src/parts/GetLineNumberDom/GetLineNumberDom.ts
@@ -1,13 +1,15 @@
 import type { VirtualDomNode } from '@lvce-editor/virtual-dom-worker'
 import { text, VirtualDomElements } from '@lvce-editor/virtual-dom-worker'
-import * as ClassNames from '../ClassNames/ClassNames.ts'
+import { getLineNumberClassName } from '../GetLineNumberClassName/GetLineNumberClassName.ts'
+import { VisibleLineType, type VisibleLine } from '../VisibleLine/VisibleLine.ts'
 
-const parentNode = {
-  childCount: 1,
-  className: ClassNames.DiffEditorLineNumber,
-  type: VirtualDomElements.Div,
-}
-
-export const getLineNumberDom = (lineNumber: number): readonly VirtualDomNode[] => {
-  return [parentNode, text(lineNumber === -1 ? '' : String(lineNumber))]
+export const getLineNumberDom = (lineNumber: number, type: VisibleLine['type'] = VisibleLineType.Normal): readonly VirtualDomNode[] => {
+  return [
+    {
+      childCount: 1,
+      className: getLineNumberClassName(type),
+      type: VirtualDomElements.Div,
+    },
+    text(lineNumber === -1 ? '' : String(lineNumber)),
+  ]
 }
diff --git a/packages/diff-view/src/parts/GetVisibleLinesDom/GetLineDom/GetLineDom.ts b/packages/diff-view/src/parts/GetVisibleLinesDom/GetLineDom/GetLineDom.ts
index 08d6b30..774acef 100644
--- a/packages/diff-view/src/parts/GetVisibleLinesDom/GetLineDom/GetLineDom.ts
+++ b/packages/diff-view/src/parts/GetVisibleLinesDom/GetLineDom/GetLineDom.ts
@@ -1,16 +1,18 @@
 import type { VirtualDomNode } from '@lvce-editor/virtual-dom-worker'
 import { text, VirtualDomElements } from '@lvce-editor/virtual-dom-worker'
 import type { VisibleLine } from '../../VisibleLine/VisibleLine.ts'
+import * as ClassNames from '../../ClassNames/ClassNames.ts'
 import { getRowClassName } from '../GetRowClassName/GetRowClassName.ts'
 import { getTokenDom } from '../GetTokenDom/GetTokenDom.ts'
 
 export const getLineDom = (line: VisibleLine): readonly VirtualDomNode[] => {
   const children = line.tokens.length === 0 ? [text('')] : line.tokens.flatMap(getTokenDom)
   const childCount = line.tokens.length === 0 ? 1 : line.tokens.length
+  const className = line.lineNumber === -1 ? `${ClassNames.EditorRow} ${ClassNames.DiffEditorLineMissing}` : getRowClassName(line.type)
   return [
     {
       childCount,
-      className: getRowClassName(line.type),
+      className,
       type: VirtualDomElements.Div,
     },
     ...children,
diff --git a/packages/diff-view/src/parts/RenderCss/RenderCss.ts b/packages/diff-view/src/parts/RenderCss/RenderCss.ts
index ad27eb7..2c4c0c4 100644
--- a/packages/diff-view/src/parts/RenderCss/RenderCss.ts
+++ b/packages/diff-view/src/parts/RenderCss/RenderCss.ts
@@ -14,6 +14,18 @@ export const renderCss = (oldState: DiffViewState, newState: DiffViewState): any
   const inlineGutterExtraWidth = 9 + gutterPaddingWidth
   const css = `
 :root {
+  --DiffBackground: #0b0d10;
+  --DiffForeground: rgba(255, 255, 255, 0.88);
+  --DiffGutterBackground: #0f1218;
+  --DiffGutterForeground: rgba(255, 255, 255, 0.58);
+  --DiffSeparatorColor: rgba(255, 255, 255, 0.12);
+  --DiffMissingLineBackground: rgba(255, 255, 255, 0.035);
+  --DiffDeletionBackground: rgba(248, 81, 73, 0.2);
+  --DiffDeletionForeground: #ffb3ad;
+  --DiffDeletionAccent: #ff5f6d;
+  --DiffInsertionBackground: rgba(46, 160, 67, 0.22);
+  --DiffInsertionForeground: #b7f7c0;
+  --DiffInsertionAccent: #3fb950;
   --ItemHeight: ${itemHeight}px;
   --LeftWidth: ${leftWidth}px;
   --RightWidth: ${rightWidth}px;
@@ -27,6 +39,8 @@ export const renderCss = (oldState: DiffViewState, newState: DiffViewState): any
 
 
 .DiffEditor {
+  background: var(--DiffBackground);
+  color: var(--DiffForeground);
   display: flex;
   position: relative;
   width: 100%;
@@ -68,14 +82,16 @@ export const renderCss = (oldState: DiffViewState, newState: DiffViewState): any
 }
 
 .DiffEditorGutter {
+  background: var(--DiffGutterBackground);
+  border-right: 1px solid var(--DiffSeparatorColor);
   box-sizing: border-box;
-  color: rgba(255, 255, 255, 0.55);
+  color: var(--DiffGutterForeground);
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
   font-family: monospace;
+  font-variant-numeric: tabular-nums;
   overflow: hidden;
-  padding: 0 8px 0 12px;
   text-align: right;
   user-select: none;
   width: calc(${gutterWidth} + ${gutterPaddingWidth}px);
@@ -86,18 +102,39 @@ export const renderCss = (oldState: DiffViewState, newState: DiffViewState): any
 }
 
 .DiffEditorLineNumber {
+  border-left: 2px solid transparent;
   box-sizing: border-box;
   height: var(--ItemHeight);
   line-height: var(--ItemHeight);
+  padding: 0 10px 0 6px;
   white-space: pre;
 }
 
+.DiffEditor .DiffEditorLineNumber {
+  color: var(--DiffGutterForeground);
+}
+
+.DiffEditor .DiffEditorLineNumberDeletion {
+  background: var(--DiffDeletionBackground);
+  border-left-color: var(--DiffDeletionAccent);
+  color: var(--DiffDeletionAccent);
+}
+
+.DiffEditor .DiffEditorLineNumberInsertion {
+  background: var(--DiffInsertionBackground);
+  border-left-color: var(--DiffInsertionAccent);
+  color: var(--DiffInsertionAccent);
+}
+
 .DiffEditorLineNumberEmpty {
+  background-color: var(--DiffMissingLineBackground);
+  background-image: repeating-linear-gradient(135deg, transparent 0, transparent 5px, rgba(255, 255, 255, 0.06) 5px, rgba(255, 255, 255, 0.06) 6px);
   box-sizing: border-box;
   flex-shrink: 0;
 }
 
 .DiffEditorRows {
+  background: var(--DiffBackground);
   contain: strict;
   cursor: text;
   flex: 1;
@@ -110,17 +147,26 @@ export const renderCss = (oldState: DiffViewState, newState: DiffViewState): any
   box-sizing: border-box;
   height: var(--ItemHeight);
   line-height: var(--ItemHeight);
+  padding: 0 12px;
   white-space: pre;
 }
 
 .DiffEditor .Deletion {
-  background: rgba(255, 0, 0, 0.16);
-  color: #ffb3b3;
+  background: var(--DiffDeletionBackground);
+  box-shadow: inset 3px 0 var(--DiffDeletionAccent);
+  color: var(--DiffDeletionForeground);
 }
 
 .DiffEditor .Insertion {
-  background: rgba(0, 128, 0, 0.18);
-  color: #b7f7c0;
+  background: var(--DiffInsertionBackground);
+  box-shadow: inset 3px 0 var(--DiffInsertionAccent);
+  color: var(--DiffInsertionForeground);
+}
+
+.DiffEditorLineMissing {
+  background-color: var(--DiffMissingLineBackground);
+  background-image: repeating-linear-gradient(135deg, transparent 0, transparent 5px, rgba(255, 255, 255, 0.06) 5px, rgba(255, 255, 255, 0.06) 6px);
+  box-shadow: none;
 }
 
 .ImageContent {
diff --git a/packages/diff-view/test/GetContentLeftDom.test.ts b/packages/diff-view/test/GetContentLeftDom.test.ts
index 821dbd2..04ca3f7 100644
--- a/packages/diff-view/test/GetContentLeftDom.test.ts
+++ b/packages/diff-view/test/GetContentLeftDom.test.ts
@@ -188,7 +188,7 @@ test('getContentLeftDom renders paired deletion and insertion on the same row',
     text('1'),
     {
       childCount: 1,
-      className: ClassNames.DiffEditorLineNumber,
+      className: `${ClassNames.DiffEditorLineNumber} ${ClassNames.DiffEditorLineNumberDeletion}`,
       type: VirtualDomElements.Div,
     },
     text('2'),
diff --git a/packages/diff-view/test/GetContentRightDom.test.ts b/packages/diff-view/test/GetContentRightDom.test.ts
index 087bd86..0f91f54 100644
--- a/packages/diff-view/test/GetContentRightDom.test.ts
+++ b/packages/diff-view/test/GetContentRightDom.test.ts
@@ -127,7 +127,7 @@ test('getContentRightDom renders paired deletion and insertion on the same row',
     text('1'),
     {
       childCount: 1,
-      className: ClassNames.DiffEditorLineNumber,
+      className: `${ClassNames.DiffEditorLineNumber} ${ClassNames.DiffEditorLineNumberInsertion}`,
       type: VirtualDomElements.Div,
     },
     text('2'),
diff --git a/packages/diff-view/test/GetDiffEditorVirtualDom.test.ts b/packages/diff-view/test/GetDiffEditorVirtualDom.test.ts
index 3348647..40b2d32 100644
--- a/packages/diff-view/test/GetDiffEditorVirtualDom.test.ts
+++ b/packages/diff-view/test/GetDiffEditorVirtualDom.test.ts
@@ -184,7 +184,7 @@ test('getDiffEditorVirtualDom omits line number gutters when disabled in state',
   ])
 })
 
-test.skip('getDiffEditorVirtualDom renders image panes when render mode is image', (): void => {
+test('getDiffEditorVirtualDom renders image panes when render mode is image', (): void => {
   const result = getDiffEditorVirtualDom({
     ...createDefaultState(),
     contentLeft: 'ignored-left-content',
@@ -446,16 +446,16 @@ test('getDiffEditorVirtualDom renders inline mode as a single combined diff pane
     text('1 1'),
     {
       childCount: 1,
-      className: ClassNames.DiffEditorLineNumber,
+      className: `${ClassNames.DiffEditorLineNumber} ${ClassNames.DiffEditorLineNumberDeletion}`,
       type: VirtualDomElements.Div,
     },
-    text('2 -'),
+    text('2 '),
     {
       childCount: 1,
-      className: ClassNames.DiffEditorLineNumber,
+      className: `${ClassNames.DiffEditorLineNumber} ${ClassNames.DiffEditorLineNumberInsertion}`,
       type: VirtualDomElements.Div,
     },
-    text('- 2'),
+    text(' 2'),
     {
       childCount: 1,
       className: ClassNames.DiffEditorLineNumber,
diff --git a/packages/diff-view/test/GetGutterDom.test.ts b/packages/diff-view/test/GetGutterDom.test.ts
index de95703..c479150 100644
--- a/packages/diff-view/test/GetGutterDom.test.ts
+++ b/packages/diff-view/test/GetGutterDom.test.ts
@@ -100,3 +100,41 @@ test('getGutterDom collapses consecutive empty line numbers into a single placeh
     text('5'),
   ])
 })
+
+test('getGutterDom styles changed line numbers', (): void => {
+  const result = getGutterDom(
+    [
+      {
+        lineNumber: 2,
+        tokens: [],
+        type: VisibleLineType.Removed,
+      },
+      {
+        lineNumber: 3,
+        tokens: [],
+        type: VisibleLineType.Added,
+      },
+    ],
+    20,
+  )
+
+  expect(result).toEqual([
+    {
+      childCount: 2,
+      className: ClassNames.DiffEditorGutter,
+      type: VirtualDomElements.Div,
+    },
+    {
+      childCount: 1,
+      className: `${ClassNames.DiffEditorLineNumber} ${ClassNames.DiffEditorLineNumberDeletion}`,
+      type: VirtualDomElements.Div,
+    },
+    text('2'),
+    {
+      childCount: 1,
+      className: `${ClassNames.DiffEditorLineNumber} ${ClassNames.DiffEditorLineNumberInsertion}`,
+      type: VirtualDomElements.Div,
+    },
+    text('3'),
+  ])
+})
diff --git a/packages/diff-view/test/GetInlineDiffLineNumberText.test.ts b/packages/diff-view/test/GetInlineDiffLineNumberText.test.ts
new file mode 100644
index 0000000..e5b1548
--- /dev/null
+++ b/packages/diff-view/test/GetInlineDiffLineNumberText.test.ts
@@ -0,0 +1,23 @@
+import { expect, test } from '@jest/globals'
+import { getInlineDiffLineNumberText } from '../src/parts/GetInlineDiffLineNumberText/GetInlineDiffLineNumberText.ts'
+import { InlineDiffRowType } from '../src/parts/GetInlineDiffRows/GetInlineDiffRows.ts'
+
+test('getInlineDiffLineNumberText leaves absent line numbers blank', (): void => {
+  expect(
+    getInlineDiffLineNumberText({
+      lineNumberLeft: 4,
+      lineNumberRight: null,
+      text: 'removed',
+      type: InlineDiffRowType.Deletion,
+    }),
+  ).toBe('4 ')
+
+  expect(
+    getInlineDiffLineNumberText({
+      lineNumberLeft: null,
+      lineNumberRight: 5,
+      text: 'inserted',
+      type: InlineDiffRowType.Insertion,
+    }),
+  ).toBe(' 5')
+})
diff --git a/packages/diff-view/test/GetLineNumberClassName.test.ts b/packages/diff-view/test/GetLineNumberClassName.test.ts
new file mode 100644
index 0000000..451f5cc
--- /dev/null
+++ b/packages/diff-view/test/GetLineNumberClassName.test.ts
@@ -0,0 +1,25 @@
+import { expect, test } from '@jest/globals'
+import * as ClassNames from '../src/parts/ClassNames/ClassNames.ts'
+import { InlineDiffRowType } from '../src/parts/GetInlineDiffRows/GetInlineDiffRows.ts'
+import { getLineNumberClassName } from '../src/parts/GetLineNumberClassName/GetLineNumberClassName.ts'
+import { VisibleLineType } from '../src/parts/VisibleLine/VisibleLine.ts'
+
+test('getLineNumberClassName returns the default line number class', (): void => {
+  expect(getLineNumberClassName()).toBe(ClassNames.DiffEditorLineNumber)
+  expect(getLineNumberClassName(VisibleLineType.Normal)).toBe(ClassNames.DiffEditorLineNumber)
+  expect(getLineNumberClassName(InlineDiffRowType.Context)).toBe(ClassNames.DiffEditorLineNumber)
+})
+
+test('getLineNumberClassName returns the deletion line number class', (): void => {
+  const expected = `${ClassNames.DiffEditorLineNumber} ${ClassNames.DiffEditorLineNumberDeletion}`
+
+  expect(getLineNumberClassName(VisibleLineType.Removed)).toBe(expected)
+  expect(getLineNumberClassName(InlineDiffRowType.Deletion)).toBe(expected)
+})
+
+test('getLineNumberClassName returns the insertion line number class', (): void => {
+  const expected = `${ClassNames.DiffEditorLineNumber} ${ClassNames.DiffEditorLineNumberInsertion}`
+
+  expect(getLineNumberClassName(VisibleLineType.Added)).toBe(expected)
+  expect(getLineNumberClassName(InlineDiffRowType.Insertion)).toBe(expected)
+})
diff --git a/packages/diff-view/test/GetLineNumberDom.test.ts b/packages/diff-view/test/GetLineNumberDom.test.ts
index d883569..24e2541 100644
--- a/packages/diff-view/test/GetLineNumberDom.test.ts
+++ b/packages/diff-view/test/GetLineNumberDom.test.ts
@@ -2,6 +2,7 @@ import { expect, test } from '@jest/globals'
 import { text, VirtualDomElements } from '@lvce-editor/virtual-dom-worker'
 import * as ClassNames from '../src/parts/ClassNames/ClassNames.ts'
 import { getLineNumberDom } from '../src/parts/GetLineNumberDom/GetLineNumberDom.ts'
+import { VisibleLineType } from '../src/parts/VisibleLine/VisibleLine.ts'
 
 test('getLineNumberDom renders a single line number', (): void => {
   const result = getLineNumberDom(7)
@@ -28,3 +29,23 @@ test('getLineNumberDom renders an empty gutter cell for missing line numbers', (
     text(''),
   ])
 })
+
+test('getLineNumberDom renders deletion and insertion line number states', (): void => {
+  expect(getLineNumberDom(8, VisibleLineType.Removed)).toEqual([
+    {
+      childCount: 1,
+      className: `${ClassNames.DiffEditorLineNumber} ${ClassNames.DiffEditorLineNumberDeletion}`,
+      type: VirtualDomElements.Div,
+    },
+    text('8'),
+  ])
+
+  expect(getLineNumberDom(9, VisibleLineType.Added)).toEqual([
+    {
+      childCount: 1,
+      className: `${ClassNames.DiffEditorLineNumber} ${ClassNames.DiffEditorLineNumberInsertion}`,
+      type: VirtualDomElements.Div,
+    },
+    text('9'),
+  ])
+})
diff --git a/packages/diff-view/test/GetVisibleLinesDom/GetLineDom.test.ts b/packages/diff-view/test/GetVisibleLinesDom/GetLineDom.test.ts
index be1cf16..2f51c71 100644
--- a/packages/diff-view/test/GetVisibleLinesDom/GetLineDom.test.ts
+++ b/packages/diff-view/test/GetVisibleLinesDom/GetLineDom.test.ts
@@ -47,3 +47,16 @@ test('getLineDom renders token spans inside a row', (): void => {
     text(' answer = 1'),
   ])
 })
+
+test('getLineDom renders missing side lines with a placeholder class', (): void => {
+  const result = getLineDom({ lineNumber: -1, tokens: [], type: VisibleLineType.Normal })
+
+  expect(result).toEqual([
+    {
+      childCount: 1,
+      className: `${ClassNames.EditorRow} ${ClassNames.DiffEditorLineMissing}`,
+      type: VirtualDomElements.Div,
+    },
+    text(''),
+  ])
+})
diff --git a/packages/diff-view/test/Initialize.test.ts b/packages/diff-view/test/Initialize.test.ts
index b366a4d..a40f643 100644
--- a/packages/diff-view/test/Initialize.test.ts
+++ b/packages/diff-view/test/Initialize.test.ts
@@ -2,10 +2,18 @@ import { expect, test } from '@jest/globals'
 import { ExtensionHost, RendererWorker, TextMeasurementWorker } from '@lvce-editor/rpc-registry'
 import { initialize } from '../src/parts/Initialize/Initialize.ts'
 
-test.skip('initialize should set ExtensionHost and TextMeasurementWorker RPCs', async (): Promise<void> => {
+test('initialize should set ExtensionHost and TextMeasurementWorker RPCs', async (): Promise<void> => {
   const commandMap = {
+    'RendererWorker.sendMessagePortToDiffWorker': async (): Promise<void> => {},
+    'RendererWorker.sendMessagePortToErrorWorker': async (): Promise<void> => {},
+    'RendererWorker.sendMessagePortToExtensionHostWorker': async (): Promise<void> => {},
+    'RendererWorker.sendMessagePortToExtensionManagementWorker': async (): Promise<void> => {},
+    'RendererWorker.sendMessagePortToFileSystemWorker': async (): Promise<void> => {},
+    'RendererWorker.sendMessagePortToSyntaxHighlightingWorker': async (): Promise<void> => {},
+    'RendererWorker.sendMessagePortToTextMeasurementWorker': async (): Promise<void> => {},
     'SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionHostWorker': async (): Promise<void> => {},
     'SendMessagePortToExtensionHostWorker.sendMessagePortToTextMeasurementWorker': async (): Promise<void> => {},
+    'SendMessagePortToTextMeasurementWorker.sendMessagePortToTextMeasurementWorker': async (): Promise<void> => {},
   }
   RendererWorker.registerMockRpc(commandMap)
 
@@ -13,4 +21,5 @@ test.skip('initialize should set ExtensionHost and TextMeasurementWorker RPCs',
 
   expect(typeof ExtensionHost.invoke).toBe('function')
   expect(typeof TextMeasurementWorker.invoke).toBe('function')
+  await Promise.all([ExtensionHost.dispose(), TextMeasurementWorker.dispose()])
 })
diff --git a/packages/diff-view/test/LoadFileContents.test.ts b/packages/diff-view/test/LoadFileContents.test.ts
index e82e78f..e25b7f2 100644
--- a/packages/diff-view/test/LoadFileContents.test.ts
+++ b/packages/diff-view/test/LoadFileContents.test.ts
@@ -2,7 +2,7 @@ import { expect, test } from '@jest/globals'
 import { ExtensionHost, FileSystemWorker } from '@lvce-editor/rpc-registry'
 import { loadFileContents } from '../src/parts/LoadFileContents/LoadFileContents.ts'
 
-test.skip('loadFileContents loads both files in order', async (): Promise<void> => {
+test('loadFileContents loads both files in order', async (): Promise<void> => {
   const extensionHostInvocations: unknown[][] = []
   const fileSystemWorkerInvocations: unknown[][] = []
   const extensionHostRpc = {
@@ -31,7 +31,7 @@ test.skip('loadFileContents loads both files in order', async (): Promise<void>
         throw new Error(`unexpected method: ${method}`)
       }
       const [uri] = params
-      if (uri === '/tmp/after.txt') {
+      if (uri === 'file:///tmp/after.txt') {
         return 'after-content'
       }
       throw new Error(`unexpected params: ${String(uri)}`)
@@ -44,7 +44,7 @@ test.skip('loadFileContents loads both files in order', async (): Promise<void>
   const result = await loadFileContents('data://before-content', '/tmp/after.txt')
 
   expect(extensionHostInvocations).toEqual([])
-  expect(fileSystemWorkerInvocations).toEqual([['FileSystem.readFile', '/tmp/after.txt']])
+  expect(fileSystemWorkerInvocations).toEqual([['FileSystem.readFile', 'file:///tmp/after.txt']])
   expect(result).toEqual({
     contentLeft: 'before-content',
     contentRight: 'after-content',
@@ -57,7 +57,7 @@ test.skip('loadFileContents loads both files in order', async (): Promise<void>
   })
 })
 
-test.skip('loadFileContents captures per-side read errors', async (): Promise<void> => {
+test('loadFileContents captures per-side read errors', async (): Promise<void> => {
   const error = new Error('file not found')
   error.stack = 'Error: file not found\n    at read missing file'
   const extensionHostRpc = {
@@ -74,7 +74,7 @@ test.skip('loadFileContents captures per-side read errors', async (): Promise<vo
         throw new Error(`unexpected method: ${method}`)
       }
       const [uri] = params
-      if (uri === '/tmp/after.txt') {
+      if (uri === 'file:///tmp/after.txt') {
         throw error
       }
       throw new Error(`unexpected params: ${String(uri)}`)
diff --git a/packages/diff-view/test/RenderCss.test.ts b/packages/diff-view/test/RenderCss.test.ts
index c46bb5c..7f0e714 100644
--- a/packages/diff-view/test/RenderCss.test.ts
+++ b/packages/diff-view/test/RenderCss.test.ts
@@ -18,7 +18,7 @@ test('renderCss uses cached scroll bar background image from state', (): void =>
   expect(result[2]).toContain('--ScrollBarBackgroundImage: linear-gradient(to bottom, transparent 10%, red 10%, red 20%, transparent 20%);')
 })
 
-test.skip('renderCss renders left and right widths as css variables', (): void => {
+test('renderCss renders left and right widths as css variables', (): void => {
   const oldState = createDefaultState()
   const newState = {
     ...oldState,
@@ -48,8 +48,6 @@ test.skip('renderCss renders left and right widths as css variables', (): void =
   expect(result[1]).toBe(1)
   expect(result[2]).toContain('--LeftWidth: 120px;')
   expect(result[2]).toContain('--RightWidth: 176px;')
-  expect(result[2]).toContain('--TopSpacerHeight: 20px;')
-  expect(result[2]).toContain('--BottomSpacerHeight: 80px;')
   expect(result[2]).toContain('--ScrollBarHeight: 40px;')
   expect(result[2]).toContain('.DiffEditorHorizontal {')
   expect(result[2]).toContain('.DiffEditorVertical {')
@@ -63,15 +61,11 @@ test.skip('renderCss renders left and right widths as css variables', (): void =
   expect(result[2]).toContain('.DiffEditorErrorStackLink {')
   expect(result[2]).toContain('border-left: 3px solid rgba(248, 81, 73, 0.6);')
   expect(result[2]).toContain('overflow: auto;')
-  expect(result[2]).toContain('.DiffEditorSpacerTop {')
   expect(result[2]).toContain('.DiffScrollBarThumb {')
-  expect(result[2]).toContain('--ScrollBarBackgroundImage: linear-gradient(to bottom, transparent 0%,')
   expect(result[2]).toContain('background-image: var(--ScrollBarBackgroundImage);')
-  expect(result[2]).toContain('rgba(248, 81, 73, 0.72) 0%')
-  expect(result[2]).toContain('rgba(46, 160, 67, 0.72)')
 })
 
-test.skip('renderCss renders stacked pane heights for vertical layout', (): void => {
+test('renderCss renders stacked pane heights for vertical layout', (): void => {
   const oldState = createDefaultState()
   const newState = {
     ...oldState,
@@ -93,14 +87,13 @@ test.skip('renderCss renders stacked pane heights for vertical layout', (): void
 
   expect(result[0]).toBe(ViewletCommand.SetCss)
   expect(result[1]).toBe(1)
-  expect(result[2]).toContain('--DiffEditorHeight: 100px;')
   expect(result[2]).toContain('.DiffEditorVertical {')
   expect(result[2]).toContain('height: var(--LeftWidth);')
   expect(result[2]).toContain('height: var(--RightWidth);')
   expect(result[2]).toContain('.SashHorizontal {')
 })
 
-test.skip('renderCss includes inline diff styling hooks', (): void => {
+test('renderCss includes inline diff styling hooks', (): void => {
   const oldState = createDefaultState()
   const newState = {
     ...oldState,