@jetcrab/pi-desk 1.1.5 → 1.1.8-dev

package/src/client/l3_modules/project-files/l3-project-document-view.tsx

@@ -6,13 +6,21 @@ import {
   CopyIcon,
   FileCode2Icon,
   FoldVerticalIcon,
+  GitCompareArrowsIcon,
   ListOrderedIcon,
   LoaderCircleIcon,
   RefreshCwIcon,
   SearchIcon,
   WrapTextIcon
 } from 'lucide-react'
-import { useEffect, useImperativeHandle, useRef, useSyncExternalStore, type Ref } from 'react'
+import {
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type Ref
+} from 'react'
 import { useTranslation } from 'react-i18next'
 import { copyL4BrowserText } from '@client/l4_foundation/lib/l4-browser-clipboard'
 import {
@@ -25,6 +33,8 @@ import { L4ImageViewer } from '@client/l4_foundation/ui/l4-image-viewer'
 import { useL4AppToast } from '@client/l4_foundation/ui/l4-app-toast'
 import { Button } from '@client/l4_foundation/ui/shadcn/button'
 import type { L3ProjectFileRuntime } from './l3-project-file-runtime'
+import type { L3ProjectGitBrowser } from './l3-project-git-runtime'
+import { useL3ProjectDocumentGit } from './l3-project-document-git'
 import { L3CodeSurfaceToolbarButton } from './l3-code-surface-toolbar-button'
 import { buildL3FilePreviewHtml } from './l3-file-preview-html'
 
@@ -38,13 +48,17 @@ export interface L3ProjectDocumentHandle {
 export function L3ProjectDocumentView({
   ref: handleRef,
   runtime,
+  gitRuntime,
   compact,
+  visible = true,
   onEscape,
   onSwitchPane
 }: {
   ref?: Ref<L3ProjectDocumentHandle>
   runtime: L3ProjectFileRuntime
+  gitRuntime: L3ProjectGitBrowser
   compact: boolean
+  visible?: boolean
   onEscape: () => void
   onSwitchPane?: () => void
 }): React.JSX.Element {
@@ -55,6 +69,7 @@ export function L3ProjectDocumentView({
   const document = !activeDiff && activePath ? runtime.state.documents.get(activePath) : null
   const isHtml = Boolean(activePath && /\.html?$/i.test(activePath))
   const showSource = document?.status === 'text' && (!isHtml || document.viewMode === 'source')
+  const hostRef = useRef<HTMLDivElement>(null)
   const previewRef = useRef<L4CodePreviewHandle>(null)
   const diffRef = useRef<L4CodeDiffHandle>(null)
   const iframeRef = useRef<HTMLIFrameElement>(null)
@@ -83,6 +98,42 @@ export function L3ProjectDocumentView({
     if (activePath && previewRef.current)
       runtime.saveEditorState(activePath, previewRef.current.getViewState())
   }
+  const { refresh, unavailable } = useL3ProjectDocumentGit(
+    runtime,
+    gitRuntime,
+    hostRef,
+    savePosition,
+    visible
+  )
+  const comparison = document?.status === 'text' ? document.comparison : undefined
+  const [computed, setComputed] = useState<{
+    original: string
+    modified: string
+    count: number | null
+  } | null>(null)
+  const count =
+    comparison?.status === 'ready' &&
+    document?.status === 'text' &&
+    computed?.original === comparison.original.content &&
+    computed.modified === document.content
+      ? computed.count
+      : undefined
+  const openDiff = (line?: number): void => {
+    if (!activePath) return
+    savePosition()
+    runtime.openFileDiff(activePath, line)
+  }
+  const gitStatus =
+    unavailable || comparison?.status === 'error'
+      ? t('gitMarkersFailed')
+      : comparison?.status === 'unavailable' || (comparison?.status === 'ready' && count === null)
+        ? t('gitMarkersUnavailable')
+        : comparison?.status === 'loading' ||
+            (comparison?.status === 'ready' && count === undefined)
+          ? t('gitMarkersLoading')
+          : comparison?.status === 'ready'
+            ? t('gitChangesCount', { count })
+            : null
   const copyText = (): void => {
     if (document?.status !== 'text') return
     const selection = previewRef.current?.getSelectionText() ?? ''
@@ -93,6 +144,7 @@ export function L3ProjectDocumentView({
   }
   return (
     <div
+      ref={hostRef}
       className="flex size-full min-h-0 min-w-0 flex-col outline-none"
       tabIndex={-1}
       onFocus={(event) => {
@@ -181,6 +233,41 @@ export function L3ProjectDocumentView({
                   ))}
                 </div>
               ) : null}
+              {showSource && gitStatus ? (
+                <span
+                  data-testid="file-git-status"
+                  role="status"
+                  className="mr-auto min-w-0 truncate text-xs text-muted-foreground"
+                  title={comparison?.status === 'error' ? comparison.error : gitStatus}
+                >
+                  {compact && comparison?.status === 'ready' && typeof count === 'number'
+                    ? t('gitChangesCompact', { count })
+                    : gitStatus}
+                </span>
+              ) : null}
+              {showSource && comparison?.status === 'ready' ? (
+                <>
+                  {typeof count === 'number' && count > 0 ? (
+                    <>
+                      <L3CodeSurfaceToolbarButton
+                        label={t('previousChange')}
+                        onClick={() => previewRef.current?.previousChange()}
+                      >
+                        <ArrowUpIcon className="size-4" />
+                      </L3CodeSurfaceToolbarButton>
+                      <L3CodeSurfaceToolbarButton
+                        label={t('nextChange')}
+                        onClick={() => previewRef.current?.nextChange()}
+                      >
+                        <ArrowDownIcon className="size-4" />
+                      </L3CodeSurfaceToolbarButton>
+                    </>
+                  ) : null}
+                  <L3CodeSurfaceToolbarButton label={t('viewDiff')} onClick={() => openDiff()}>
+                    <GitCompareArrowsIcon className="size-4" />
+                  </L3CodeSurfaceToolbarButton>
+                </>
+              ) : null}
               {showSource && activePath ? (
                 <>
                   <L3CodeSurfaceToolbarButton
@@ -210,10 +297,7 @@ export function L3ProjectDocumentView({
                 </>
               ) : null}
               {activePath ? (
-                <L3CodeSurfaceToolbarButton
-                  label={t('reloadCurrentFile')}
-                  onClick={() => runtime.reloadFile(activePath)}
-                >
+                <L3CodeSurfaceToolbarButton label={t('reloadCurrentFile')} onClick={refresh}>
                   <RefreshCwIcon className="size-4" />
                 </L3CodeSurfaceToolbarButton>
               ) : null}
@@ -231,6 +315,7 @@ export function L3ProjectDocumentView({
               modified={activeDiff.modified}
               viewMode={compact ? 'inline' : diffViewMode}
               savedState={activeDiff.editorState}
+              initialLine={activeDiff.initialLine}
               onSaveState={(position) => runtime.saveDiffState(activeDiff, position)}
               onEscape={escape}
             />
@@ -302,6 +387,18 @@ export function L3ProjectDocumentView({
             path={activePath}
             content={document.content}
             size={document.size}
+            originalContent={
+              comparison?.status === 'ready' ? comparison.original.content : undefined
+            }
+            onChanges={(count) => {
+              if (comparison?.status === 'ready')
+                setComputed({
+                  original: comparison.original.content,
+                  modified: document.content,
+                  count
+                })
+            }}
+            onOpenDiff={openDiff}
             savedState={document.editorState}
             onSaveState={(path, state) => runtime.saveEditorState(path, state)}
             onEscape={escape}

package/src/client/l3_modules/project-files/l3-project-file-browser.tsx

@@ -39,6 +39,7 @@ import {
 import type { L3ProjectGitBrowser } from './l3-project-git-runtime'
 import {
   getL3GitChangeBadge,
+  getL3GitChangeClass,
   getL3GitHeadLabel,
   getL3GitRepositoryName,
   joinL3GitProjectPath,
@@ -118,12 +119,7 @@ function fileIcon(path: string): React.JSX.Element {
 
 function changedFileNameClass(change: L3GitProjectChange | null): string | undefined {
   if (!change) return undefined
-  const badge = getL3GitChangeBadge(change.change)
-  if (badge === 'D') return 'text-muted-foreground'
-  if (badge === '?') return 'text-red-600 dark:text-red-400'
-  if (badge === 'A') return 'text-emerald-600 dark:text-emerald-400'
-  if (badge === '!') return 'text-violet-600 dark:text-violet-400'
-  return 'text-blue-600 dark:text-blue-400'
+  return getL3GitChangeClass(change.change)
 }
 
 function DirectoryFeedback({

package/src/client/l3_modules/project-files/l3-project-file-runtime.ts

@@ -22,6 +22,16 @@ export type L3DirectoryState =
   | { status: 'idle' | 'loading' }
   | { status: 'ready'; entries: L4ProjectFileEntry[]; truncated: boolean }
   | { status: 'error'; error: string }
+export type L3FileComparison =
+  | { status: 'loading' }
+  | {
+      status: 'ready'
+      repositoryRoot: string
+      path: string
+      original: { path: string; content: string }
+    }
+  | { status: 'unavailable' }
+  | { status: 'error'; error: string }
 export type L3FileDocument =
   | { status: 'unloaded' }
   | { status: 'loading' }
@@ -31,6 +41,7 @@ export type L3FileDocument =
       size: number
       editorState: L4CodePreviewState | null
       viewMode: 'source' | 'preview'
+      comparison?: L3FileComparison
     }
   | { status: 'image'; mimeType: L4ProjectFileImageMimeType; size: number; objectUrl: string }
   | { status: 'error'; error: string }
@@ -47,6 +58,7 @@ interface DiffOptions {
   comparison?: L4GitHistoricalDiff
   editorState?: L4CodeDiffState | null
   label?: string
+  initialLine?: number
 }
 export type L3FileDiff = DiffOptions &
   (
@@ -492,6 +504,71 @@ export class L3ProjectFileRuntime {
     }
     this.publish()
   }
+  async compareFile(
+    path: string,
+    target: { repositoryRoot: string; path: string } | null,
+    signal: AbortSignal
+  ): Promise<void> {
+    const document = this.state.documents.get(path)
+    if (this.disposed || signal.aborted || document?.status !== 'text') return
+    if (!target) {
+      if (document.comparison) {
+        delete document.comparison
+        this.publish()
+      }
+      return
+    }
+    const loading: L3FileComparison = { status: 'loading' }
+    document.comparison = loading
+    this.publish()
+    const current = (): boolean =>
+      !this.disposed &&
+      !signal.aborted &&
+      this.state.documents.get(path) === document &&
+      document.comparison === loading
+    try {
+      const result = await this.reader.diff(target.repositoryRoot, target.path, signal)
+      if (!current()) return
+      if (result.kind === 'text') {
+        // 比较结果的工作区正文与基线一起替换，不能把新行号画在缓存正文上。
+        document.content = result.modified.content
+        document.size = new TextEncoder().encode(result.modified.content).length
+        document.comparison = {
+          status: 'ready',
+          repositoryRoot: target.repositoryRoot,
+          path: target.path,
+          original: result.original
+        }
+      } else {
+        document.comparison = { status: 'unavailable' }
+      }
+    } catch (cause) {
+      if (!current()) return
+      console.warn('[Pi Desk][ProjectFile] 读取行变更失败', {
+        cwd: this.cwd,
+        path,
+        error: message(cause)
+      })
+      document.comparison = { status: 'error', error: message(cause) }
+    }
+    this.publish()
+  }
+  openFileDiff(path: string, initialLine?: number): void {
+    const document = this.state.documents.get(path)
+    if (this.disposed || document?.status !== 'text' || document.comparison?.status !== 'ready')
+      return
+    const comparison = document.comparison
+    this.clearDiff()
+    this.state.activeDiff = {
+      status: 'text',
+      repositoryRoot: comparison.repositoryRoot,
+      path: comparison.path,
+      original: comparison.original,
+      modified: { path: comparison.path, content: document.content },
+      initialLine
+    }
+    this.publish()
+  }
   openDiff(
     repositoryRoot: string,
     path: string,
@@ -616,7 +693,12 @@ export class L3ProjectFileRuntime {
   private invalidateDocument(path: string): void {
     this.documentRequests.get(path)?.abort()
     this.documentRequests.delete(path)
-    this.releaseDocument(this.state.documents.get(path))
+    const document = this.state.documents.get(path)
+    if (document?.status === 'text') {
+      if (document.editorState) this.restoredEditorStates.set(path, document.editorState)
+      this.restoredFileViewModes.set(path, document.viewMode)
+    }
+    this.releaseDocument(document)
     this.state.documents.set(path, { status: 'unloaded' })
   }
   private releaseDocument(document: L3FileDocument | undefined): void {

package/src/client/l3_modules/project-files/l3-project-file-tabs.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { ChevronDownIcon, ChevronUpIcon, FileCode2Icon, XIcon } from 'lucide-react'
-import { useLayoutEffect, useRef, useState } from 'react'
+import { useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@client/l4_foundation/lib/l4-utils'
 import { Button } from '@client/l4_foundation/ui/shadcn/button'
@@ -13,8 +13,12 @@ import {
 } from '@client/l4_foundation/ui/shadcn/context-menu'
 import type { L3FileTabCloseScope } from './l3-project-file-runtime'
 import { L3FileContextMenuContent } from './l3-file-context-menu-content'
+import type { L3ProjectGitBrowser } from './l3-project-git-runtime'
+import { findL3GitFile, getL3GitChangeBadge, getL3GitChangeClass } from './l3-project-git-model'
 
 interface L3ProjectFileTabsProps {
+  cwd: string
+  gitRuntime: L3ProjectGitBrowser
   paths: readonly string[]
   activePath: string | null
   diffPath: string | null
@@ -39,6 +43,8 @@ function fileLabel(path: string, paths: readonly string[]): string {
 }
 
 export function L3ProjectFileTabs({
+  cwd,
+  gitRuntime,
   paths,
   activePath,
   diffPath,
@@ -47,6 +53,8 @@ export function L3ProjectFileTabs({
   onClose
 }: L3ProjectFileTabsProps): React.JSX.Element | null {
   const { t } = useTranslation('projectFiles')
+  useSyncExternalStore(gitRuntime.subscribe, gitRuntime.getRevision, gitRuntime.getRevision)
+  const snapshot = gitRuntime.getWorkspace(cwd)?.snapshot
   const rowsRef = useRef<HTMLDivElement>(null)
   const suppressTouchClickRef = useRef(false)
   const [expanded, setExpanded] = useState(false)
@@ -98,6 +106,10 @@ export function L3ProjectFileTabs({
           {tabs.map((tab, index) => {
             const clipped = !expanded && clippedIndexes.includes(index)
             const selected = tab.path === active
+            const change =
+              tab.path && snapshot?.status === 'ready'
+                ? findL3GitFile(cwd, tab.path, snapshot.repositories)?.change
+                : undefined
             const closeLabel =
               tab.path === null
                 ? t('closeDiff', { name: tab.title.split('/').at(-1) })
@@ -186,7 +198,17 @@ export function L3ProjectFileTabs({
                     }}
                   >
                     <FileCode2Icon className="size-3.5 shrink-0" />
-                    <span className="truncate">{tab.label}</span>
+                    <span className={cn('truncate', change && getL3GitChangeClass(change))}>
+                      {tab.label}
+                    </span>
+                    {change ? (
+                      <span
+                        className={cn('shrink-0 text-xs', getL3GitChangeClass(change))}
+                        aria-label={t('gitStatus', { status: getL3GitChangeBadge(change) })}
+                      >
+                        {getL3GitChangeBadge(change)}
+                      </span>
+                    ) : null}
                   </button>
                   <Button
                     variant="ghost"

package/src/client/l3_modules/project-files/l3-project-git-model.ts

@@ -131,6 +131,38 @@ export function getL3GitChangeBadge(change: L4GitFileChange): string {
   return '?'
 }
 
+export function getL3GitChangeClass(change: L4GitFileChange): string {
+  const badge = getL3GitChangeBadge(change)
+  if (badge === 'D') return 'text-muted-foreground'
+  if (badge === '?') return 'text-red-600 dark:text-red-400'
+  if (badge === 'A') return 'text-emerald-600 dark:text-emerald-400'
+  if (badge === '!') return 'text-violet-600 dark:text-violet-400'
+  return 'text-blue-600 dark:text-blue-400'
+}
+
+export function findL3GitFile(
+  cwd: string,
+  path: string,
+  repositories: readonly L4GitRepository[]
+): { repository: L4GitRepository; path: string; change: L4GitFileChange | undefined } | null {
+  if (/^(?:[a-z]:|\/|\\\\)/i.test(path)) return null
+  const windows = /^[a-z]:[\\/]/i.test(cwd) || cwd.startsWith('\\\\')
+  const key = (value: string): string => (windows ? value.toLowerCase() : value)
+  const repository = [...repositories]
+    .sort((left, right) => right.root.length - left.root.length)
+    .find((item) => !item.root || key(path).startsWith(`${key(item.root)}/`))
+  if (!repository) return null
+  const relative = repository.root ? path.slice(repository.root.length + 1) : path
+  return {
+    repository,
+    path: relative,
+    change:
+      repository.state === 'ready'
+        ? repository.changes.find((item) => key(item.path) === key(relative))
+        : undefined
+  }
+}
+
 export function listL3GitProjectChanges(
   repositories: readonly L4GitRepository[]
 ): L3GitProjectChange[] {

package/src/client/l4_foundation/ui/code/l4-code-diff.tsx

@@ -44,10 +44,11 @@ interface L4CodeDiffProps {
   onEscape?: () => void
   savedState?: L4CodeDiffState | null
   onSaveState?: (state: L4CodeDiffState | null) => void
+  initialLine?: number
 }
 
 function L4CodeDiffComponent(
-  { original, modified, viewMode, onEscape, savedState, onSaveState }: L4CodeDiffProps,
+  { original, modified, viewMode, onEscape, savedState, onSaveState, initialLine }: L4CodeDiffProps,
   ref: ForwardedRef<L4CodeDiffHandle>
 ): React.JSX.Element {
   const { t } = useTranslation('common')
@@ -58,12 +59,14 @@ function L4CodeDiffComponent(
   const escapeRef = useRef(onEscape)
   const savedStateRef = useRef(savedState)
   const saveStateRef = useRef(onSaveState)
+  const initialLineRef = useRef(initialLine)
 
   useEffect(() => {
     escapeRef.current = onEscape
     savedStateRef.current = savedState
     saveStateRef.current = onSaveState
-  }, [onEscape, onSaveState, savedState])
+    initialLineRef.current = initialLine
+  }, [initialLine, onEscape, onSaveState, savedState])
   const [loadState, setLoadState] = useState<'loading' | 'ready' | 'error'>('loading')
   const [changeCount, setChangeCount] = useState<number | null>(null)
 
@@ -130,6 +133,7 @@ function L4CodeDiffComponent(
           useInlineViewWhenSpaceIsLimited: false,
           enableSplitViewResizing: true,
           diffAlgorithm: 'advanced',
+          ignoreTrimWhitespace: false,
           maxComputationTime: 5_000,
           hideUnchangedRegions: initialSettings.collapseUnchanged
             ? {
@@ -156,13 +160,29 @@ function L4CodeDiffComponent(
           contextmenu: true,
           ariaLabel: t('gitDiffReadOnly')
         })
-        diffEditor.setModel({ original: originalModel, modified: modifiedModel })
+        const requestedLine = initialLineRef.current
+        let initialPositionApplied = false
         scrollListeners.push(
           diffEditor.onDidUpdateDiff(() => {
-            if (active) setChangeCount(diffEditor?.getLineChanges()?.length ?? null)
+            if (!active || !diffEditor) return
+            const changes = diffEditor.getLineChanges()
+            setChangeCount(changes?.length ?? null)
+            if (!initialPositionApplied && changes !== null && requestedLine !== undefined) {
+              initialPositionApplied = true
+              const lineNumber = Math.max(
+                1,
+                Math.min(requestedLine, modifiedModel?.getLineCount() ?? 1)
+              )
+              const modifiedEditor = diffEditor.getModifiedEditor()
+              modifiedEditor.setPosition({ lineNumber, column: 1 })
+              modifiedEditor.revealLineInCenter(lineNumber)
+            }
           })
         )
-        if (savedStateRef.current) diffEditor.restoreViewState(savedStateRef.current)
+        diffEditor.setModel({ original: originalModel, modified: modifiedModel })
+        if (requestedLine === undefined && savedStateRef.current) {
+          diffEditor.restoreViewState(savedStateRef.current)
+        }
         const save = (): void => saveStateRef.current?.(diffEditor?.saveViewState() ?? null)
         scrollListeners.push(
           diffEditor.getOriginalEditor().onDidScrollChange(save),

package/src/client/l4_foundation/ui/code/l4-code-line-changes.ts

@@ -0,0 +1,49 @@
+import { DefaultLinesDiffComputer } from 'monaco-editor/editor/common/diff/defaultLinesDiffComputer/defaultLinesDiffComputer'
+
+export interface L4LineChange {
+  kind: 'added' | 'modified' | 'deleted'
+  originalStartLineNumber: number
+  originalEndLineNumberExclusive: number
+  modifiedStartLineNumber: number
+  modifiedEndLineNumberExclusive: number
+}
+
+/** 行号从 1 开始，结束行不包含在范围内；纯删除的 modified 范围为空。 */
+export function computeL4LineChanges(original: string, modified: string): L4LineChange[] | null {
+  if (original.length + modified.length > 2 * 1024 * 1024) return null
+  const originalLines = original.split(/\r\n|\r|\n/)
+  const modifiedLines = modified.split(/\r\n|\r|\n/)
+  if (originalLines.length + modifiedLines.length > 50_000) return null
+
+  try {
+    const startedAt = Date.now()
+    const result = new DefaultLinesDiffComputer().computeDiff(originalLines, modifiedLines, {
+      ignoreTrimWhitespace: false,
+      maxComputationTimeMs: 500,
+      computeMoves: false
+    })
+    if (result.hitTimeout || Date.now() - startedAt > 500) return null
+    return result.changes.map(({ original: before, modified: after }) => {
+      // Monaco 的空模型占一行，但空文件不应被归类为替换了这一行。
+      const originalEnd = original === '' ? 1 : before.endLineNumberExclusive
+      const modifiedEnd = modified === '' ? 1 : after.endLineNumberExclusive
+      return {
+        kind:
+          before.startLineNumber === originalEnd
+            ? 'added'
+            : after.startLineNumber === modifiedEnd
+              ? 'deleted'
+              : 'modified',
+        originalStartLineNumber: before.startLineNumber,
+        originalEndLineNumberExclusive: originalEnd,
+        modifiedStartLineNumber: after.startLineNumber,
+        modifiedEndLineNumberExclusive: modifiedEnd
+      }
+    })
+  } catch (error: unknown) {
+    console.warn('[Pi Desk][CodePreview] 行差异计算失败', {
+      errorName: error instanceof Error ? error.name : 'UnknownError'
+    })
+    return null
+  }
+}

package/src/client/l4_foundation/ui/code/l4-code-line-changes.worker.ts

@@ -0,0 +1,10 @@
+import { computeL4LineChanges, type L4LineChange } from './l4-code-line-changes'
+
+const scope = self as unknown as {
+  onmessage: ((event: MessageEvent<{ original: string; modified: string }>) => void) | null
+  postMessage: (changes: L4LineChange[] | null) => void
+}
+
+scope.onmessage = (event): void => {
+  scope.postMessage(computeL4LineChanges(event.data.original, event.data.modified))
+}

package/src/client/l4_foundation/ui/code/l4-code-line-markers.module.css

@@ -0,0 +1,60 @@
+.host {
+  --git-added: #16803c;
+  --git-modified: #216bcc;
+  --git-deleted: #d12c38;
+}
+
+:global(.dark) .host {
+  --git-added: #59c77b;
+  --git-modified: #6aabff;
+  --git-deleted: #ff757f;
+}
+
+.added,
+.modified,
+.deletedBefore,
+.deletedAfter {
+  /* 实际移动命中区，保持点击相对元素左缘小于 4px，避免触发 Monaco 折叠。 */
+  margin-left: 8px;
+  width: 4px !important;
+  z-index: 1;
+  cursor: pointer;
+}
+
+.added::before,
+.modified::before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 3px;
+  content: '';
+}
+
+.added::before {
+  background: var(--git-added);
+}
+
+.modified::before {
+  background: var(--git-modified);
+}
+
+.deletedBefore::before,
+.deletedAfter::before {
+  position: absolute;
+  left: 0;
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 4px solid var(--git-deleted);
+  content: '';
+}
+
+.deletedBefore::before {
+  top: -3px;
+}
+
+.deletedAfter::before {
+  bottom: -3px;
+}