feat(ui): revamp line patch dialog and add merge progress notice

Revamp the line patch dialog to improve usability and clarity.
Improve accessibility and German/English localization for UI text.
Add toolbar, hunk navigation, per-line checkbox selection and footer.
Extract merge-in-progress UI into a reusable merge progress notice.

- Replace selection UI with checkboxes, range selection, and counts
- Add hunk navigation, active-hunk tracking, and scroll synchronization
- Extract merge-in-progress UI into a reusable notice component

src/lib/components/ResolveDialog.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import { untrack } from "svelte";
-  import { AlertCircle, Check, ExternalLink, GitMerge, LoaderCircle, X } from "@lucide/svelte";
+  import { onMount, untrack } from "svelte";
+  import { AlertCircle, Check, ChevronDown, ChevronLeft, ChevronRight, ExternalLink, FileText, GitMerge, LoaderCircle, Pencil, X } from "@lucide/svelte";
   import type { ConflictChoice, ConflictFile, ConflictPart, GitFileStatus, PreparedResolution } from "../types";
 
-  type ConflictRegion = Extract<ConflictPart, { kind: "conflict" }>;
   type ResolveSplitRow =
     | { type: "marker"; conflictIndex: number }
     | {
@@ -53,9 +52,33 @@
   let resolveContent = $state("");
   let manualMode = $state(false);
   let binarySide = $state<"ours" | "theirs" | null>(null);
-  let resolveBeforePane = $state<HTMLDivElement | null>(null);
-  let resolveAfterPane = $state<HTMLDivElement | null>(null);
-  let isSyncingResolveScroll = false;
+  let dialogElement: HTMLDivElement;
+  onMount(() => {
+    const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    dialogElement.focus();
+    return () => previousFocus?.focus();
+  });
+  function trapFocus(event: KeyboardEvent) {
+    if (event.key !== "Tab") return;
+    const focusable = Array.from(dialogElement.querySelectorAll<HTMLElement>('button:not(:disabled), textarea:not(:disabled), [tabindex="0"]')).filter(element => element.getClientRects().length > 0);
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (!first) { event.preventDefault(); return; }
+    if (event.shiftKey && (document.activeElement === first || document.activeElement === dialogElement)) { event.preventDefault(); last.focus(); }
+    else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }
+  }
+  let comparison = $state<HTMLDivElement | null>(null);
+  let activeConflict = $state(0);
+  let bothMenu = $state<number | null>(null);
+  const t = (de: string, en: string) => isGerman ? de : en;
+  let previewLines = $derived(manualMode ? resolveContent.split("\n") : conflictParts.flatMap(part =>
+    part.kind === "text" ? part.lines : conflictChoices[part.index] == null
+      ? [`[${t("Konflikt", "Conflict")} ${part.index + 1} ${t("noch offen", "unresolved")}]`]
+      : buildResolution([part], conflictChoices).split("\n")));
+  function navigateConflict(direction: number) {
+    activeConflict = Math.max(0, Math.min(conflictRegionCount - 1, activeConflict + direction));
+    comparison?.querySelector(`[data-conflict="${activeConflict}"]`)?.scrollIntoView({ block: "nearest" });
+  }
 
   $effect(() => {
     const c = conflict;
@@ -63,6 +86,8 @@
     const parts = conflictParts;
 
     untrack(() => {
+      activeConflict = 0;
+      bothMenu = null;
       if (!c) {
         conflictChoices = [];
         resolveContent = "";
@@ -95,7 +120,6 @@
   });
 
   let conflictRegionCount = $derived(conflictParts.filter((p) => p.kind === "conflict").length);
-  let conflictRegions = $derived(conflictOnlyParts(conflictParts));
   let resolveSplitRows = $derived(buildResolveSplitRows(conflictParts));
   let unresolvedCount = $derived(manualMode ? 0 : conflictChoices.filter((c) => c == null).length);
   let resolvedContent = $derived(manualMode ? resolveContent : buildResolution(conflictParts, conflictChoices));
@@ -147,10 +171,6 @@
     return out.join("\n");
   }
 
-  function conflictOnlyParts(parts: ConflictPart[]): ConflictRegion[] {
-    return parts.filter((part): part is ConflictRegion => part.kind === "conflict");
-  }
-
   function buildResolveSplitRows(parts: ConflictPart[]): ResolveSplitRow[] {
     const rows: ResolveSplitRow[] = [];
     let leftNum = 0;
@@ -174,7 +194,6 @@
         continue;
       }
 
-      rows.push({ type: "marker", conflictIndex: part.index });
       const count = Math.max(part.oursLines.length, part.theirsLines.length);
       for (let i = 0; i < count; i++) {
         const hasOurs = i < part.oursLines.length;
@@ -192,36 +211,22 @@
           rightKind: hasTheirs ? "theirs" : "empty",
         });
       }
+      rows.push({ type: "marker", conflictIndex: part.index });
     }
 
     return rows;
   }
 
-  function syncResolveScroll(source: "before" | "after") {
-    if (isSyncingResolveScroll) return;
-    const sourcePane = source === "before" ? resolveBeforePane : resolveAfterPane;
-    const targetPane = source === "before" ? resolveAfterPane : resolveBeforePane;
-    if (!sourcePane || !targetPane) return;
-
-    isSyncingResolveScroll = true;
-    targetPane.scrollTop = sourcePane.scrollTop;
-    targetPane.scrollLeft = sourcePane.scrollLeft;
-    requestAnimationFrame(() => {
-      isSyncingResolveScroll = false;
-    });
-  }
-
-  function legacyConflictParts(): any[] {
-    return [];
-  }
-
   function setConflictChoice(index: number, choice: ConflictChoice) {
+    activeConflict = index;
+    bothMenu = null;
     const next = [...conflictChoices];
     next[index] = choice;
     conflictChoices = next;
   }
 
   function setAllConflicts(choice: ConflictChoice) {
+    bothMenu = null;
     conflictChoices = conflictParts.filter((p) => p.kind === "conflict").map(() => choice);
   }
 
@@ -258,266 +263,121 @@
   }
 </script>
 
-<div
-  class="dialog-backdrop"
-  role="presentation"
->
-  <div
-    class="dialog"
-    style="grid-template-rows: auto minmax(0,1fr) auto;"
-    role="dialog"
-    aria-modal="true"
-    aria-label="Resolve conflicts"
-    tabindex="-1"
-  >
-    <header class="dialog-header">
-      <div>
-        <span class="eyebrow">Resolve</span>
-        <h2 class="dialog-title">Conflicts</h2>
+<svelte:window onkeydown={(event) => { if (event.key === "Escape") { if (bothMenu !== null) bothMenu = null; else if (!isBusy) onClose(); } }} onclick={() => { bothMenu = null; }} />
+
+{#snippet bothChoices(index: number)}
+  <div class="both-control">
+    <button type="button" aria-haspopup="menu" aria-expanded={bothMenu === index} disabled={isBusy} onclick={(event) => { event.stopPropagation(); bothMenu = bothMenu === index ? null : index; }}>
+      {index === -1 ? t("Beide", "Both") : t("Beide übernehmen", "Accept both")}<ChevronDown size={14} />
+    </button>
+    {#if bothMenu === index}
+      <div class="both-menu" role="menu">
+        <button type="button" role="menuitem" onclick={() => index === -1 ? setAllConflicts("both-ot") : setConflictChoice(index, "both-ot")}>{t("Aktuell, dann eingehend", "Current, then incoming")}</button>
+        <button type="button" role="menuitem" onclick={() => index === -1 ? setAllConflicts("both-to") : setConflictChoice(index, "both-to")}>{t("Eingehend, dann aktuell", "Incoming, then current")}</button>
       </div>
-      <div class="dialog-header-actions">
-        {#if conflictTarget}
-          <div class="tool-surface-choice" aria-label={isGerman ? "Konflikt bearbeiten mit" : "Edit conflict with"}>
-            <span>{isGerman ? "Bearbeiten mit" : "Edit with"}</span>
-            <button class="active" type="button" aria-pressed="true" title={isGerman ? "In Gitty bearbeiten" : "Edit in Gitty"}>
-              <GitMerge size={13} aria-hidden="true" />Gitty
-            </button>
-            <button type="button" onclick={() => onExternalMerge(conflictTarget)} disabled={isBusy} title={isGerman ? `In ${mergeName} öffnen` : `Open in ${mergeName}`}>
-              <ExternalLink size={13} aria-hidden="true" /><span>{mergeName}</span>
-            </button>
-          </div>
-        {/if}
-        <button class="dialog-close" type="button" onclick={onClose} title={isGerman ? "Schließen" : "Close"} aria-label={isGerman ? "Konflikte schließen" : "Close conflicts"}>
-          <X size={18} aria-hidden="true" />
-        </button>
+    {/if}
+  </div>
+{/snippet}
+
+<div class="dialog-backdrop app-chrome-backdrop conflict-backdrop">
+  <div class="conflict-workbench" bind:this={dialogElement} onkeydown={trapFocus} role="dialog" aria-modal="true" aria-label={t("Konflikte lösen", "Resolve conflicts")} tabindex="-1">
+    <header class="workbench-header">
+      <h2><GitMerge size={24} />{t("Konflikte lösen", "Resolve conflicts")}</h2>
+      <div class="header-actions">
+        {#if conflictTarget}<button type="button" onclick={() => onExternalMerge(conflictTarget)} disabled={isBusy} title={mergeName}><ExternalLink size={18} />{t("Externes Merge-Tool", "External merge tool")}</button>{/if}
+        <button class="close-button" type="button" onclick={onClose} disabled={isBusy} aria-label={t("Schließen", "Close")}><X size={22} /></button>
       </div>
     </header>
-
     {#if conflictedFiles.length === 0}
-      <div class="blank-state">All conflicts resolved. Continue the current operation when ready.</div>
+      <div class="empty-message">{t("Alle Konflikte gelöst. Du kannst den aktuellen Vorgang fortsetzen.", "All conflicts resolved. You can continue the current operation.")}</div>
     {:else}
-      <div class="dialog-body">
-        <aside class="dialog-files" aria-label="Conflicted files">
-          {#each conflictedFiles as file (file.path)}
-            <button
-              class="dialog-file-row"
-              class:active={conflictTarget === file.path}
-              class:prepared={preparedResolutions[file.path] != null}
-              type="button"
-              onclick={() => onSelectFile(file.path)}
-              disabled={isBusy}
-              title={file.path}
-            >
-              <span class={`status-badge ${preparedResolutions[file.path] ? "added" : "conflicted"}`}>
-                {preparedResolutions[file.path] ? "ready" : "conflicted"}
-              </span>
-              <strong>{file.path}</strong>
-              {#if preparedResolutions[file.path]}
-                <Check size={15} aria-hidden="true" />
-              {/if}
-            </button>
-          {/each}
-        </aside>
-
-        <div class="resolve-editor" aria-label="Conflict editor">
-          {#if !conflict}
-            <div class="blank-state">Select a file to resolve.</div>
-          {:else if conflict.binary}
-            <div class="resolve-binary">
-              <div class="resolve-binary-note">
-                <AlertCircle size={16} aria-hidden="true" />
-                <span>Binary file — pick which version to keep, then mark it resolved.</span>
-              </div>
-              <div class="resolve-binary-options">
-                <button
-                  class="resolve-binary-card ours"
-                  class:active={binarySide === "ours"}
-                  type="button"
-                  onclick={() => { binarySide = "ours"; }}
-                  disabled={isBusy || conflict.ours_size == null}
-                >
-                  <span class="resolve-side-label">Current (ours)</span>
-                  <strong>{formatBytes(conflict.ours_size)}</strong>
-                  <span class="resolve-binary-hint">{conflict.ours_size == null ? "Deleted on this side" : "Keep this version"}</span>
-                </button>
-                <button
-                  class="resolve-binary-card theirs"
-                  class:active={binarySide === "theirs"}
-                  type="button"
-                  onclick={() => { binarySide = "theirs"; }}
-                  disabled={isBusy || conflict.theirs_size == null}
-                >
-                  <span class="resolve-side-label">Incoming (theirs)</span>
-                  <strong>{formatBytes(conflict.theirs_size)}</strong>
-                  <span class="resolve-binary-hint">{conflict.theirs_size == null ? "Deleted on this side" : "Keep this version"}</span>
-                </button>
-              </div>
-            </div>
-
-            <div class="resolve-actions">
-              <span class="resolve-path" title={conflictTarget}>{conflictTarget}</span>
-              {#if currentPrepared}
-                <span class="prepared-tag"><Check size={14} aria-hidden="true" /> Prepared</span>
-              {/if}
-              <button type="button" onclick={handleMarkResolved} disabled={!canMarkResolved}>
-                <Check size={16} aria-hidden="true" />
-                {currentPrepared ? "Update decision" : "Mark as resolved"}
+      <div class="workbench-body">
+        <aside class="file-sidebar" aria-label={t("Dateien mit Konflikten", "Conflicted files")}>
+          <div class="files-heading">{t("Dateien", "Files")} · {conflictedFiles.length}</div>
+          <div class="file-list">
+            {#each conflictedFiles as file (file.path)}
+              {@const prepared = preparedResolutions[file.path] != null}
+              <button class="file-item" class:selected={conflictTarget === file.path} type="button" onclick={() => onSelectFile(file.path)} disabled={isBusy} title={file.path}>
+                <FileText size={19} /><span class="file-copy"><strong>{file.path}</strong><small class:ready={prepared}>{prepared ? t("Vorbereitet", "Prepared") : conflictTarget === file.path ? t("In Bearbeitung", "In progress") : t("Offen", "Open")}</small></span>
+                {#if prepared}<Check class="ready" size={20} />{:else}<span class="open-dot"></span>{/if}
               </button>
+            {/each}
+          </div>
+          <div class="file-progress">{preparedCount} {t("von", "of")} {conflictedFiles.length} {t("vorbereitet", "prepared")}</div>
+        </aside>
+        <main class="conflict-main">
+          <header class="file-header">
+            <h3 title={conflictTarget}>{conflictTarget || t("Datei auswählen", "Select a file")}</h3>
+            {#if conflictRegionCount > 0 && !manualMode}
+              <nav aria-label={t("Konfliktnavigation", "Conflict navigation")}><span>{t("Konflikt", "Conflict")} {activeConflict + 1} {t("von", "of")} {conflictRegionCount}</span><button type="button" aria-label={t("Vorheriger Konflikt", "Previous conflict")} disabled={activeConflict === 0} onclick={() => navigateConflict(-1)}><ChevronLeft size={20} /></button><button type="button" aria-label={t("Nächster Konflikt", "Next conflict")} disabled={activeConflict >= conflictRegionCount - 1} onclick={() => navigateConflict(1)}><ChevronRight size={20} /></button></nav>
+            {/if}
+          </header>
+          {#if !conflict}
+            <div class="empty-message">{t("Wähle eine Datei aus, um ihren Konflikt zu lösen.", "Select a file to resolve its conflict.")}</div>
+          {:else if conflict.binary}
+            <div class="binary-content"><p><AlertCircle size={18} />{t("Binärdatei – wähle die Version, die erhalten bleiben soll.", "Binary file — choose the version to keep.")}</p>
+              <div class="binary-options">{#each ["ours", "theirs"] as side}
+                {@const size = side === "ours" ? conflict.ours_size : conflict.theirs_size}
+                <button type="button" class:chosen={binarySide === side} disabled={isBusy || size == null} onclick={() => { binarySide = side as "ours" | "theirs"; }}><strong>{side === "ours" ? t("Aktuell (ours)", "Current (ours)") : t("Eingehend (theirs)", "Incoming (theirs)")}</strong><span>{size == null ? t("Auf dieser Seite gelöscht", "Deleted on this side") : formatBytes(size)}</span>{#if binarySide === side}<Check size={20} />{/if}</button>
+              {/each}</div>
             </div>
           {:else}
-            <div class="resolve-toolbar">
-              {#if manualMode}
-                <button type="button" onclick={() => { manualMode = false; }} disabled={isBusy}>Back to guided</button>
-              {:else}
-                <span class="resolve-toolbar-label">Apply to all:</span>
-                <button type="button" onclick={() => setAllConflicts("ours")} disabled={isBusy}>Current</button>
-                <button type="button" onclick={() => setAllConflicts("theirs")} disabled={isBusy}>Incoming</button>
-                <button type="button" onclick={() => setAllConflicts("both-ot")} disabled={isBusy}>Both</button>
-                <button type="button" onclick={enableManualEdit} disabled={isBusy}>Edit manually</button>
-              {/if}
-              <span class="resolve-status">
-                {#if unresolvedCount > 0}
-                  <AlertCircle size={14} aria-hidden="true" />
-                  {unresolvedCount} of {conflictRegionCount} unresolved
-                {:else if resolveHasMarkers}
-                  <AlertCircle size={14} aria-hidden="true" />
-                  Conflict markers still present
-                {:else}
-                  <Check size={14} aria-hidden="true" />
-                  {conflictRegionCount} {conflictRegionCount === 1 ? "conflict" : "conflicts"} resolved
-                {/if}
-              </span>
+            <div class="comparison-toolbar">
+              {#if manualMode}<button type="button" onclick={() => { manualMode = false; }} disabled={isBusy}>{t("Zurück zur Auswahl", "Back to guided")}</button>
+              {:else}<span>{t("Für alle Konflikte", "For all conflicts")}</span><div class="bulk-actions"><button type="button" onclick={() => setAllConflicts("ours")} disabled={isBusy}>{t("Aktuell", "Current")}</button><button type="button" onclick={() => setAllConflicts("theirs")} disabled={isBusy}>{t("Eingehend", "Incoming")}</button>{@render bothChoices(-1)}</div><button class="manual-button" type="button" onclick={enableManualEdit} disabled={isBusy}><Pencil size={16} />{t("Manuell bearbeiten", "Edit manually")}</button>{/if}
             </div>
-
             {#if manualMode}
-              <textarea
-                class="resolve-textarea"
-                bind:value={resolveContent}
-                spellcheck="false"
-                disabled={isBusy}
-              ></textarea>
+              <textarea class="manual-editor" aria-label={t("Konflikt manuell bearbeiten", "Edit conflict manually")} bind:value={resolveContent} spellcheck="false" disabled={isBusy}></textarea>
             {:else}
-              <div class="resolve-structured">
-                {#if conflictRegions.length > 0}
-                  <div class="resolve-conflict-controls" aria-label="Conflict decisions">
-                    {#each conflictRegions as part (part.index)}
-                      <div class="resolve-conflict-bar" class:unresolved={conflictChoices[part.index] == null}>
-                        <span class="resolve-conflict-label">Conflict {part.index + 1}</span>
-                        <div class="resolve-choice-buttons">
-                          <button type="button" class:active={conflictChoices[part.index] === "ours"} onclick={() => setConflictChoice(part.index, "ours")} disabled={isBusy}>Current</button>
-                          <button type="button" class:active={conflictChoices[part.index] === "theirs"} onclick={() => setConflictChoice(part.index, "theirs")} disabled={isBusy}>Incoming</button>
-                          <button type="button" class:active={conflictChoices[part.index] === "both-ot"} onclick={() => setConflictChoice(part.index, "both-ot")} disabled={isBusy} title="Both - current first">Both C+I</button>
-                          <button type="button" class:active={conflictChoices[part.index] === "both-to"} onclick={() => setConflictChoice(part.index, "both-to")} disabled={isBusy} title="Both - incoming first">Both I+C</button>
-                        </div>
+              <div class="comparison-scroll" bind:this={comparison}>
+                <div class="comparison-grid">
+                  <div class="side-heading ours-heading">{t("Aktuell (ours)", "Current (ours)")}</div><div class="side-heading theirs-heading">{t("Eingehend (theirs)", "Incoming (theirs)")}</div>
+                  {#each resolveSplitRows as row, i (i)}
+                    {#if row.type === "marker"}
+                      {@const choice = conflictChoices[row.conflictIndex]}
+                      <div class="conflict-decision" data-conflict={row.conflictIndex}>
+                        <strong>{t("Konflikt", "Conflict")} {row.conflictIndex + 1}{#if choice == null}<span class="pending"> · {t("Offen", "Open")}</span>{/if}</strong>
+                        <button class="accept-ours" class:chosen={choice === "ours"} aria-pressed={choice === "ours"} type="button" disabled={isBusy} onclick={() => setConflictChoice(row.conflictIndex, "ours")}>{t("Aktuell übernehmen", "Accept current")}</button>
+                        <button class="accept-theirs" class:chosen={choice === "theirs"} aria-pressed={choice === "theirs"} type="button" disabled={isBusy} onclick={() => setConflictChoice(row.conflictIndex, "theirs")}>{t("Eingehend übernehmen", "Accept incoming")}</button>
+                        {@render bothChoices(row.conflictIndex)}
+                        {#if choice}<small class="decision-label">{choice === "ours" ? t("Aktuell gewählt", "Current selected") : choice === "theirs" ? t("Eingehend gewählt", "Incoming selected") : choice === "both-ot" ? t("Aktuell → Eingehend", "Current → Incoming") : t("Eingehend → Aktuell", "Incoming → Current")}</small>{/if}
                       </div>
-                    {/each}
-                  </div>
-                {/if}
-
-                <div class="resolve-split" role="table" aria-label="Full conflict comparison">
-                  <div
-                    class="resolve-pane"
-                    bind:this={resolveBeforePane}
-                    aria-label="Current file content"
-                    onscroll={() => syncResolveScroll("before")}
-                  >
-                    <div class="resolve-pane-grid">
-                      {#each resolveSplitRows as row, i (`left-${i}`)}
-                        {#if row.type === "marker"}
-                          <div class="resolve-split-marker" class:unresolved={conflictChoices[row.conflictIndex] == null}>Conflict {row.conflictIndex + 1}</div>
-                        {:else}
-                          <div class="resolve-num" class:ours={row.leftKind === "ours"} class:empty={row.leftKind === "empty"}>{row.leftNum ?? ""}</div>
-                          <div
-                            class="resolve-cell"
-                            class:ours={row.leftKind === "ours"}
-                            class:empty={row.leftKind === "empty"}
-                            class:dimmed={row.conflictIndex != null && !oursActive(conflictChoices[row.conflictIndex])}
-                          >{displayLine(row.leftText ?? "") || " "}</div>
-                        {/if}
-                      {/each}
-                    </div>
-                  </div>
-                  <div
-                    class="resolve-pane"
-                    bind:this={resolveAfterPane}
-                    aria-label="Incoming file content"
-                    onscroll={() => syncResolveScroll("after")}
-                  >
-                    <div class="resolve-pane-grid">
-                      {#each resolveSplitRows as row, i (`right-${i}`)}
-                        {#if row.type === "marker"}
-                          <div class="resolve-split-marker" class:unresolved={conflictChoices[row.conflictIndex] == null}>Conflict {row.conflictIndex + 1}</div>
-                        {:else}
-                          <div class="resolve-num" class:theirs={row.rightKind === "theirs"} class:empty={row.rightKind === "empty"}>{row.rightNum ?? ""}</div>
-                          <div
-                            class="resolve-cell"
-                            class:theirs={row.rightKind === "theirs"}
-                            class:empty={row.rightKind === "empty"}
-                            class:dimmed={row.conflictIndex != null && !theirsActive(conflictChoices[row.conflictIndex])}
-                          >{displayLine(row.rightText ?? "") || " "}</div>
-                        {/if}
-                      {/each}
-                    </div>
-                  </div>
-                </div>
-
-                {#if false}
-                {#each legacyConflictParts() as part, partIndex (partIndex)}
-                  {#if part.kind === "text"}
-                    {#if part.lines.length > 0}
-                      <pre class="resolve-context">{#each part.lines as line}<span class="resolve-line context">{displayLine(line) || " "}</span>{/each}</pre>
+                    {:else}
+                      <div class="code-line" class:ours-line={row.leftKind === "ours"} class:dimmed={row.conflictIndex != null && conflictChoices[row.conflictIndex] != null && !oursActive(conflictChoices[row.conflictIndex])}><span>{row.leftNum ?? ""}</span><code>{displayLine(row.leftText ?? "") || " "}</code></div>
+                      <div class="code-line incoming-line" class:theirs-line={row.rightKind === "theirs"} class:dimmed={row.conflictIndex != null && conflictChoices[row.conflictIndex] != null && !theirsActive(conflictChoices[row.conflictIndex])}><span>{row.rightNum ?? ""}</span><code>{displayLine(row.rightText ?? "") || " "}</code></div>
                     {/if}
-                  {:else}
-                    <div class="resolve-conflict" class:unresolved={conflictChoices[part.index] == null}>
-                      <div class="resolve-conflict-bar">
-                        <span class="resolve-conflict-label">Conflict {part.index + 1}</span>
-                        <div class="resolve-choice-buttons">
-                          <button type="button" class:active={conflictChoices[part.index] === "ours"} onclick={() => setConflictChoice(part.index, "ours")} disabled={isBusy}>Current</button>
-                          <button type="button" class:active={conflictChoices[part.index] === "theirs"} onclick={() => setConflictChoice(part.index, "theirs")} disabled={isBusy}>Incoming</button>
-                          <button type="button" class:active={conflictChoices[part.index] === "both-ot"} onclick={() => setConflictChoice(part.index, "both-ot")} disabled={isBusy} title="Both — current first">Both C+I</button>
-                          <button type="button" class:active={conflictChoices[part.index] === "both-to"} onclick={() => setConflictChoice(part.index, "both-to")} disabled={isBusy} title="Both — incoming first">Both I+C</button>
-                        </div>
-                      </div>
-                      <div class="resolve-side ours" class:dimmed={!oursActive(conflictChoices[part.index])}>
-                        <span class="resolve-side-label">Current (ours)</span>
-                        <pre class="resolve-lines">{#each part.oursLines as line}<span class="resolve-line ours">{displayLine(line) || " "}</span>{/each}</pre>
-                      </div>
-                      <div class="resolve-side theirs" class:dimmed={!theirsActive(conflictChoices[part.index])}>
-                        <span class="resolve-side-label">Incoming (theirs)</span>
-                        <pre class="resolve-lines">{#each part.theirsLines as line}<span class="resolve-line theirs">{displayLine(line) || " "}</span>{/each}</pre>
-                      </div>
-                    </div>
-                  {/if}
-                {/each}
-                {/if}
+                  {/each}
+                </div>
               </div>
             {/if}
-
-            <div class="resolve-actions">
-              <span class="resolve-path" title={conflictTarget}>{conflictTarget}</span>
-              {#if currentPrepared}
-                <span class="prepared-tag"><Check size={14} aria-hidden="true" /> Prepared</span>
-              {/if}
-              <button type="button" onclick={handleMarkResolved} disabled={!canMarkResolved}>
-                <Check size={16} aria-hidden="true" />
-                {currentPrepared ? "Update decision" : "Mark as resolved"}
-              </button>
-            </div>
+            <section class="result-preview" aria-label={t("Ergebnisvorschau", "Result preview")}>
+              <header><strong>{t("Ergebnisvorschau", "Result preview")}</strong><span class:pending={resolveHasMarkers} class:ready={!resolveHasMarkers} aria-live="polite">{manualMode && resolveHasMarkers ? t("Konfliktmarker vorhanden", "Conflict markers remain") : unresolvedCount > 0 ? `${unresolvedCount} ${t(unresolvedCount === 1 ? "Konflikt offen" : "Konflikte offen", unresolvedCount === 1 ? "conflict open" : "conflicts open")}` : t("Alle Konflikte gelöst", "All conflicts resolved")}</span></header>
+              <div class="preview-code">{#each previewLines as line, i}<div class="code-line"><span>{i + 1}</span><code class:pending={line.startsWith(`[${t("Konflikt", "Conflict")} `)}>{displayLine(line) || " "}</code></div>{/each}</div>
+            </section>
           {/if}
-        </div>
+          {#if conflict}<div class="file-actions"><span>{!canMarkResolved ? t("Alle Konflikte dieser Datei lösen, dann vorbereiten.", "Resolve all conflicts in this file, then prepare it.") : currentPrepared ? t("Diese Datei ist vorbereitet.", "This file is prepared.") : t("Ergebnis prüfen und Datei vorbereiten.", "Review the result and prepare the file.")}</span><button type="button" disabled={!canMarkResolved} onclick={handleMarkResolved}>{currentPrepared ? t("Vorbereitung aktualisieren", "Update preparation") : t("Datei vorbereiten", "Prepare file")}</button></div>{/if}
+        </main>
       </div>
-
-      <footer class="dialog-footer">
-        <span class="dialog-footer-info">{preparedCount} of {conflictedFiles.length} prepared</span>
-        <button class="btn-primary" type="button" onclick={onApply} disabled={isBusy || preparedCount === 0}>
-          {#if operation.startsWith("Resolving")}
-            <LoaderCircle class="spin" size={16} aria-hidden="true" />
-          {:else}
-            <Check size={16} aria-hidden="true" />
-          {/if}
-          Apply {preparedCount} resolved
-        </button>
-      </footer>
+      <footer class="workbench-footer"><span>{t("Änderungen werden erst beim Anwenden gespeichert.", "Changes are saved only when applied.")}</span><button class="apply-button" type="button" onclick={onApply} disabled={isBusy || preparedCount === 0}>{#if isBusy}<LoaderCircle class="spin" size={16} />{/if}{preparedCount} {t(preparedCount === 1 ? "vorbereitete Lösung anwenden" : "vorbereitete Lösungen anwenden", preparedCount === 1 ? "prepared resolution to apply" : "prepared resolutions to apply")}</button></footer>
     {/if}
   </div>
 </div>
+
+<style>
+  .conflict-workbench{--ours:var(--color-accent);--theirs:#b78ae6;display:flex;flex-direction:column;width:min(1700px,100%);height:min(960px,100%);min-width:0;overflow:hidden;border:1px solid var(--color-border-input);border-radius:6px;background:var(--app-dialog-bg);color:var(--color-ink);box-shadow:var(--app-dialog-shadow);font-size:13px}
+  .conflict-workbench button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:30px;padding:5px 10px;border:1px solid var(--color-border-input);border-radius:3px;background:transparent;color:var(--color-ink);font-size:13px;font-weight:400;white-space:nowrap}
+  .conflict-workbench button:hover:not(:disabled){background:var(--color-surface-hover);border-color:var(--color-ink-faint)}.conflict-workbench button:disabled{opacity:.45;cursor:default}.conflict-workbench button:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}
+  .workbench-header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:10px 16px;border-bottom:1px solid var(--color-border);background:var(--app-dialog-chrome)}h2{display:flex;align-items:center;gap:10px;margin:0;font-size:15px;font-weight:600}.header-actions{display:flex;gap:12px;align-items:center}.header-actions .close-button{border:0;padding:6px}
+  .workbench-body{display:flex;flex:1;min-height:0}.file-sidebar{display:flex;flex-direction:column;flex:0 0 220px;min-width:0;border-right:1px solid var(--color-border);padding:0 10px}.files-heading{padding:14px 10px 12px;font-size:13px;color:var(--color-ink-muted)}.file-list{flex:1;overflow:auto}.file-sidebar .file-item{display:flex;width:100%;gap:12px;padding:10px 10px;border:1px solid transparent;align-items:flex-start;justify-content:flex-start;text-align:left;white-space:normal}.file-sidebar .file-item.selected{background:var(--color-surface);border-left-color:var(--color-accent)}.file-copy{display:grid;gap:5px;flex:1;min-width:0}.file-copy strong{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.file-copy small{font-size:13px;color:#eda33d}.file-item :global(svg){flex-shrink:0}.open-dot{height:11px;width:11px;background:#eda33d;border-radius:50%;margin-top:5px;flex-shrink:0}.ready,.file-copy small.ready,.file-item :global(svg.ready){color:#68c878}.file-progress{border-top:1px solid var(--color-border);padding:12px 10px;color:var(--color-ink-muted)}
+  .conflict-main{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}.file-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 10px;padding:10px 6px;border-bottom:1px solid var(--color-border);min-height:48px}.file-header h3{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}.file-header nav{display:flex;align-items:center;gap:12px;white-space:nowrap}.file-header nav span{margin-right:8px}.file-header nav button{padding:7px 9px}
+  .comparison-toolbar{display:flex;gap:10px;align-items:center;padding:8px 12px;flex-wrap:wrap}.comparison-toolbar>span{color:var(--color-ink-muted)}.bulk-actions{display:flex}.bulk-actions>button+button{border-left:0}.comparison-toolbar .manual-button{margin-left:auto;border:0;color:var(--ours);padding-right:0}
+  .comparison-scroll{flex:1.25;min-height:150px;overflow:auto;margin:0 10px;border:1px solid var(--color-border)}.comparison-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start;min-width:760px}.side-heading{position:sticky;top:0;z-index:2;background:var(--app-dialog-bg);padding:7px 10px;border-top:2px solid var(--ours);font-size:13px}.theirs-heading{border-color:var(--theirs);border-left:1px solid var(--color-border)}
+  .code-line{display:flex;min-width:0;line-height:20px;min-height:20px;font-family:var(--font-mono);font-size:13px}.code-line>span{flex:0 0 44px;text-align:right;padding-right:14px;color:var(--color-ink-faint);user-select:none}.code-line code{font:inherit;white-space:pre;overflow-x:auto;min-width:0;flex:1;padding-right:12px}.incoming-line{border-left:1px solid var(--color-border)}.ours-line{background:color-mix(in srgb,var(--ours) 13%,transparent)}.theirs-line{background:color-mix(in srgb,var(--theirs) 13%,transparent)}.dimmed code{opacity:.45}
+  .conflict-decision{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:7px 10px;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);background:color-mix(in srgb,var(--color-surface) 45%,var(--app-dialog-bg));scroll-margin-top:36px}.conflict-decision strong{font-weight:500;margin-right:12px}.pending{color:#eda33d}.conflict-decision .accept-ours{color:var(--ours);border-color:color-mix(in srgb,var(--ours) 65%,var(--color-border))}.conflict-decision .accept-theirs{color:var(--theirs);border-color:color-mix(in srgb,var(--theirs) 65%,var(--color-border))}.conflict-decision .chosen{background:color-mix(in srgb,var(--ours) 10%,transparent)}.conflict-decision .accept-theirs.chosen{background:color-mix(in srgb,var(--theirs) 10%,transparent)}.decision-label{color:var(--ours);font-size:12px}.both-control{position:relative}.both-menu{position:absolute;right:0;top:100%;z-index:5;min-width:220px;padding:4px;background:var(--app-dialog-chrome);border:1px solid var(--color-border-input);box-shadow:var(--app-panel-shadow)}.both-menu button{width:100%;border:0;text-align:left;justify-content:flex-start}
+  .result-preview{display:flex;flex:1;min-height:120px;flex-direction:column;margin:10px 10px 0;border:1px solid var(--color-border)}.result-preview header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 10px;border-bottom:1px solid var(--color-border)}.result-preview strong{font-weight:500;font-size:13px}.preview-code{overflow:auto;flex:1;padding:6px 0}.preview-code code{overflow:visible}.file-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:48px;padding:8px 12px;border-top:1px solid var(--color-border)}.file-actions>span{color:var(--color-ink-muted)}.file-actions button{background:var(--color-surface)}.workbench-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 16px;border-top:1px solid var(--color-border);min-height:52px}.workbench-footer>span{color:var(--color-ink-muted)}.workbench-footer .apply-button{background:var(--color-primary);border-color:var(--color-primary);color:white;padding:6px 12px;font-weight:500}.workbench-footer .apply-button:hover:not(:disabled){background:var(--color-primary-dark)}
+  .empty-message{flex:1;padding:32px;color:var(--color-ink-muted)}.manual-editor{flex:1.25;min-height:150px;resize:none;margin:0 10px;padding:14px;font:13px/20px var(--font-mono);background:var(--app-input-bg);color:var(--color-ink);border:1px solid var(--color-border-input)}.binary-content{flex:1;padding:24px}.binary-content p{display:flex;gap:10px;align-items:center;color:var(--color-ink-muted)}.binary-options{display:flex;gap:16px;margin-top:24px}.binary-options button{flex:1;flex-direction:column;gap:12px;padding:24px;white-space:normal}.binary-options button.chosen{border-color:var(--ours);background:color-mix(in srgb,var(--ours) 10%,transparent)}
+  .conflict-backdrop{display:flex;align-items:center;justify-content:center}
+  .conflict-workbench{outline:none}.open-dot{border-radius:50%!important}
+  @media(max-width:1100px){.file-sidebar{flex-basis:210px}.conflict-workbench{font-size:13px}.conflict-workbench button{font-size:12px;padding:7px 10px}.file-copy strong{font-size:13px}.comparison-toolbar{gap:10px;padding:10px}.decision-label{display:none}.file-header{padding:12px 4px}.file-header nav{gap:4px}.code-line{font-size:12px}}
+  @media(max-width:700px){.conflict-backdrop{padding:8px}.conflict-workbench{width:100%;height:100%}.workbench-header{padding:10px;gap:8px}h2{font-size:13px;gap:8px}.header-actions{gap:6px}.header-actions button{font-size:11px}.workbench-body{flex-direction:column}.file-sidebar{flex:0 0 auto;border-right:0;border-bottom:1px solid var(--color-border)}.files-heading{font-size:13px;padding:8px}.file-list{display:flex;max-height:80px}.file-sidebar .file-item{flex:0 0 180px;min-width:180px;width:180px;padding:8px}.file-copy small{white-space:nowrap;font-size:12px}.file-progress{display:none}.file-header{min-height:48px;padding:6px}.file-header h3{font-size:13px}.file-header nav span{font-size:11px}.comparison-toolbar{padding:6px;gap:6px}.comparison-scroll{min-height:100px}.result-preview{min-height:100px}.file-actions{min-height:48px;padding:6px;gap:8px}.file-actions>span,.workbench-footer>span{font-size:11px}.workbench-footer{min-height:60px;padding:8px;gap:8px}.workbench-footer .apply-button{white-space:normal;padding:8px;font-size:13px}.result-preview header{padding:6px}.result-preview strong{font-size:13px}}
+</style>