From 32a165f5f997a468077d31f0e1c6df73253fff52 Mon Sep 17 00:00:00 2001
From: Randy Lutcavich <randy@randroid.dev>
Date: Sun, 12 Apr 2026 20:30:27 -0500
Subject: [PATCH] feat: add copy/paste transcript editing with LCS diff
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add bulk transcript editing: copy the transcript, edit it externally,
and paste it back to apply all deletions at once.

Workflow:
1. Click "Copy" in the transcript toolbar to copy all non-deleted words
2. Edit the text in any external editor (delete unwanted words)
3. Click "Paste edits" to open a diff preview dialog
4. Review the preview (word count, cut count, warnings) and click "Apply"

The diff algorithm uses Longest Common Subsequence (LCS) to detect only
deletions — modified words are ignored. Uses Uint32Array for the DP
table to support transcripts beyond 65k words. The diff computation is
debounced to 300ms to avoid running on every keystroke.

Also extracts buildDeletedSet() utility to eliminate duplicate set-
building loops across components.
---
 .../src/components/PasteTranscriptDialog.tsx  | 132 ++++++++++++++++++
 frontend/src/components/TranscriptEditor.tsx  |  49 +++++--
 frontend/src/store/editorStore.ts             |  53 ++++++-
 frontend/src/utils/buildDeletedSet.ts         |   9 ++
 frontend/src/utils/diffTranscript.ts          |  99 +++++++++++++
 5 files changed, 330 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/components/PasteTranscriptDialog.tsx
 create mode 100644 frontend/src/utils/buildDeletedSet.ts
 create mode 100644 frontend/src/utils/diffTranscript.ts

diff --git a/frontend/src/components/PasteTranscriptDialog.tsx b/frontend/src/components/PasteTranscriptDialog.tsx
new file mode 100644
index 0000000..6619836
--- /dev/null
+++ b/frontend/src/components/PasteTranscriptDialog.tsx
@@ -0,0 +1,132 @@
+import { useState, useEffect, useRef } from 'react';
+import { X } from 'lucide-react';
+import { useEditorStore } from '../store/editorStore';
+import { diffTranscript, groupContiguousIndices } from '../utils/diffTranscript';
+import { buildDeletedSet } from '../utils/buildDeletedSet';
+
+interface Props {
+  onClose: () => void;
+}
+
+interface Preview {
+  deletedCount: number;
+  rangeCount: number;
+  totalActive: number;
+}
+
+export default function PasteTranscriptDialog({ onClose }: Props) {
+  const words = useEditorStore((s) => s.words);
+  const deletedRanges = useEditorStore((s) => s.deletedRanges);
+  const applyPastedTranscript = useEditorStore((s) => s.applyPastedTranscript);
+
+  const [pastedText, setPastedText] = useState('');
+  const [preview, setPreview] = useState<Preview | null>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+
+    if (pastedText.trim() === '') {
+      setPreview(null);
+      return;
+    }
+
+    debounceRef.current = setTimeout(() => {
+      const alreadyDeletedSet = buildDeletedSet(deletedRanges);
+      const totalActive = words.length - alreadyDeletedSet.size;
+      const deletedIndices = diffTranscript(words, pastedText, alreadyDeletedSet);
+      const rangeCount = groupContiguousIndices(deletedIndices).length;
+      setPreview({ deletedCount: deletedIndices.length, rangeCount, totalActive });
+    }, 300);
+
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [pastedText, words, deletedRanges]);
+
+  const handleApply = () => {
+    applyPastedTranscript(pastedText);
+    onClose();
+  };
+
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) onClose();
+  };
+
+  const allDeleted = preview !== null && preview.deletedCount === preview.totalActive;
+  const noChanges = preview !== null && preview.deletedCount === 0;
+  const percent = preview !== null && preview.totalActive > 0
+    ? Math.round((preview.deletedCount / preview.totalActive) * 100)
+    : 0;
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
+      onClick={handleBackdropClick}
+    >
+      <div className="bg-editor-surface border border-editor-border rounded-lg w-full max-w-lg shadow-xl flex flex-col gap-4 p-6">
+        <div className="flex items-center justify-between">
+          <h2 className="text-sm font-semibold text-editor-text">Paste Edited Transcript</h2>
+          <button
+            onClick={onClose}
+            className="text-editor-text-muted hover:text-editor-text transition-colors"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        <p className="text-xs text-editor-text-muted">
+          Paste your edited transcript below. Deleted words will be cut automatically.
+          Modified words are ignored — only deletions are detected.
+        </p>
+
+        <textarea
+          className="w-full h-48 bg-editor-bg border border-editor-border rounded p-3 text-sm text-editor-text placeholder:text-editor-text-muted resize-none focus:outline-none focus:border-editor-accent font-mono"
+          placeholder="Paste your edited transcript here..."
+          value={pastedText}
+          onChange={(e) => setPastedText(e.target.value)}
+          autoFocus
+        />
+
+        {preview && (
+          <div
+            className={`text-xs rounded p-3 border ${
+              allDeleted
+                ? 'bg-editor-danger/10 border-editor-danger/30 text-editor-danger'
+                : 'bg-editor-bg border-editor-border text-editor-text-muted'
+            }`}
+          >
+            {allDeleted ? (
+              <span>Warning: this would delete all remaining words in the transcript.</span>
+            ) : noChanges ? (
+              <span>No changes detected — the pasted text matches the current transcript.</span>
+            ) : (
+              <span>
+                <span className="text-editor-text font-medium">{preview.deletedCount}</span> words
+                will be cut ({percent}% of transcript) &middot;{' '}
+                <span className="text-editor-text font-medium">{preview.rangeCount}</span> cut
+                {preview.rangeCount !== 1 ? 's' : ''} will be created
+              </span>
+            )}
+          </div>
+        )}
+
+        <div className="flex items-center justify-end gap-2">
+          <button
+            onClick={onClose}
+            className="px-3 py-1.5 text-xs text-editor-text-muted hover:text-editor-text border border-editor-border rounded hover:bg-editor-bg transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleApply}
+            disabled={!preview || noChanges || allDeleted}
+            className="px-3 py-1.5 text-xs bg-editor-accent text-white rounded hover:bg-editor-accent/80 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            Apply Cuts
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/TranscriptEditor.tsx b/frontend/src/components/TranscriptEditor.tsx
index 48fa313..6870c7b 100644
--- a/frontend/src/components/TranscriptEditor.tsx
+++ b/frontend/src/components/TranscriptEditor.tsx
@@ -1,7 +1,9 @@
 import { useCallback, useRef, useEffect, useMemo, useState } from 'react';
 import { useEditorStore } from '../store/editorStore';
 import { Virtuoso } from 'react-virtuoso';
-import { Trash2, RotateCcw } from 'lucide-react';
+import { Trash2, RotateCcw, Copy, ClipboardPaste } from 'lucide-react';
+import PasteTranscriptDialog from './PasteTranscriptDialog';
+import { buildDeletedSet } from '../utils/buildDeletedSet';
 
 export default function TranscriptEditor() {
   const words = useEditorStore((s) => s.words);
@@ -19,17 +21,19 @@ export default function TranscriptEditor() {
   const wasDragging = useRef(false);
   const virtuosoRef = useRef<any>(null);
 
-  const deletedSet = useMemo(() => {
-    const s = new Set<number>();
-    for (const range of deletedRanges) {
-      for (const idx of range.wordIndices) s.add(idx);
-    }
-    return s;
-  }, [deletedRanges]);
+  const deletedSet = useMemo(() => buildDeletedSet(deletedRanges), [deletedRanges]);
 
   const selectedSet = useMemo(() => new Set(selectedWordIndices), [selectedWordIndices]);
 
   const [activeWordIndex, setActiveWordIndex] = useState(-1);
+  const [copied, setCopied] = useState(false);
+  const [showPasteDialog, setShowPasteDialog] = useState(false);
+
+  useEffect(() => {
+    if (!copied) return;
+    const timer = setTimeout(() => setCopied(false), 2000);
+    return () => clearTimeout(timer);
+  }, [copied]);
 
   useEffect(() => {
     if (words.length === 0) return;
@@ -168,12 +172,38 @@ export default function TranscriptEditor() {
     [segments, deletedSet, selectedSet, activeWordIndex, hoveredWordIndex, handleWordMouseDown, handleWordMouseEnter, setHoveredWordIndex, getRangeForWord, restoreRange],
   );
 
+  const handleCopy = useCallback(async () => {
+    const text = useEditorStore.getState().getTranscriptText();
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+  }, []);
+
   return (
     <div className="flex-1 flex flex-col min-h-0">
       <div className="flex items-center gap-2 px-4 py-2 border-b border-editor-border shrink-0">
         <span className="text-xs text-editor-text-muted flex-1">
           {words.length} words &middot; {deletedRanges.length} cuts
         </span>
+        {words.length > 0 && (
+          <>
+            <button
+              onClick={handleCopy}
+              title="Copy transcript"
+              className="flex items-center gap-1 px-2 py-1 text-xs text-editor-text-muted hover:text-editor-text border border-editor-border rounded hover:bg-editor-bg transition-colors"
+            >
+              <Copy className="w-3 h-3" />
+              {copied ? 'Copied!' : 'Copy'}
+            </button>
+            <button
+              onClick={() => setShowPasteDialog(true)}
+              title="Paste edited transcript"
+              className="flex items-center gap-1 px-2 py-1 text-xs text-editor-text-muted hover:text-editor-text border border-editor-border rounded hover:bg-editor-bg transition-colors"
+            >
+              <ClipboardPaste className="w-3 h-3" />
+              Paste edits
+            </button>
+          </>
+        )}
         {selectedWordIndices.length > 0 && (
           <button
             onClick={deleteSelectedWords}
@@ -199,6 +229,9 @@ export default function TranscriptEditor() {
           style={{ height: '100%' }}
         />
       </div>
+      {showPasteDialog && (
+        <PasteTranscriptDialog onClose={() => setShowPasteDialog(false)} />
+      )}
     </div>
   );
 }
diff --git a/frontend/src/store/editorStore.ts b/frontend/src/store/editorStore.ts
index ec9448d..eea4249 100644
--- a/frontend/src/store/editorStore.ts
+++ b/frontend/src/store/editorStore.ts
@@ -1,6 +1,8 @@
 import { create } from 'zustand';
 import { temporal } from 'zundo';
 import type { Word, Segment, DeletedRange, TranscriptionResult } from '../types/project';
+import { diffTranscript, groupContiguousIndices } from '../utils/diffTranscript';
+import { buildDeletedSet } from '../utils/buildDeletedSet';
 
 interface EditorState {
   videoPath: string | null;
@@ -41,6 +43,8 @@ interface EditorActions {
   setExporting: (active: boolean, progress?: number) => void;
   getKeepSegments: () => Array<{ start: number; end: number }>;
   getWordAtTime: (time: number) => number;
+  getTranscriptText: () => string;
+  applyPastedTranscript: (pastedText: string) => { deletedCount: number; rangeCount: number };
   loadProject: (projectData: any) => void;
   reset: () => void;
 }
@@ -163,10 +167,7 @@ export const useEditorStore = create<EditorState & EditorActions>()(
         const { words, deletedRanges, duration } = get();
         if (words.length === 0) return [{ start: 0, end: duration }];
 
-        const deletedSet = new Set<number>();
-        for (const range of deletedRanges) {
-          for (const idx of range.wordIndices) deletedSet.add(idx);
-        }
+        const deletedSet = buildDeletedSet(deletedRanges);
 
         const segments: Array<{ start: number; end: number }> = [];
         let segStart: number | null = null;
@@ -202,6 +203,50 @@ export const useEditorStore = create<EditorState & EditorActions>()(
         return lo < words.length ? lo : words.length - 1;
       },
 
+      getTranscriptText: () => {
+        const { segments, deletedRanges } = get();
+        const deletedSet = buildDeletedSet(deletedRanges);
+
+        const lines: string[] = [];
+        for (const segment of segments) {
+          const wordParts: string[] = [];
+          segment.words.forEach((word, localIdx) => {
+            const globalIdx = (segment.globalStartIndex ?? 0) + localIdx;
+            if (!deletedSet.has(globalIdx)) {
+              wordParts.push(word.word.trim());
+            }
+          });
+          if (wordParts.length === 0) continue;
+          const line = segment.speaker
+            ? `${segment.speaker}: ${wordParts.join(' ')}`
+            : wordParts.join(' ');
+          lines.push(line);
+        }
+        return lines.join('\n');
+      },
+
+      applyPastedTranscript: (pastedText) => {
+        const { words, deletedRanges } = get();
+
+        const deletedIndices = diffTranscript(words, pastedText, buildDeletedSet(deletedRanges));
+
+        if (deletedIndices.length === 0) {
+          return { deletedCount: 0, rangeCount: 0 };
+        }
+
+        const groups = groupContiguousIndices(deletedIndices);
+        const newRanges: DeletedRange[] = groups.map((group) => ({
+          id: `dr_${nextRangeId++}`,
+          start: words[group[0]].start,
+          end: words[group[group.length - 1]].end,
+          wordIndices: group,
+        }));
+
+        set({ deletedRanges: [...deletedRanges, ...newRanges] });
+
+        return { deletedCount: deletedIndices.length, rangeCount: newRanges.length };
+      },
+
       loadProject: (data) => {
         const backend = get().backendUrl;
         const url = `${backend}/file?path=${encodeURIComponent(data.videoPath)}`;
diff --git a/frontend/src/utils/buildDeletedSet.ts b/frontend/src/utils/buildDeletedSet.ts
new file mode 100644
index 0000000..a89c940
--- /dev/null
+++ b/frontend/src/utils/buildDeletedSet.ts
@@ -0,0 +1,9 @@
+import type { DeletedRange } from '../types/project';
+
+export function buildDeletedSet(deletedRanges: DeletedRange[]): Set<number> {
+  const set = new Set<number>();
+  for (const range of deletedRanges) {
+    for (const idx of range.wordIndices) set.add(idx);
+  }
+  return set;
+}
diff --git a/frontend/src/utils/diffTranscript.ts b/frontend/src/utils/diffTranscript.ts
new file mode 100644
index 0000000..c91c18a
--- /dev/null
+++ b/frontend/src/utils/diffTranscript.ts
@@ -0,0 +1,99 @@
+import type { Word } from '../types/project';
+
+function normalizeWord(w: string): string {
+  return w.trim().toLowerCase().replace(/[^\w']/g, '');
+}
+
+/**
+ * Groups a sorted array of integers into contiguous runs.
+ * e.g. [1,2,3,7,8,10] → [[1,2,3],[7,8],[10]]
+ * Input must be sorted ascending; unsorted input produces incorrect groups.
+ */
+export function groupContiguousIndices(indices: number[]): number[][] {
+  if (indices.length === 0) return [];
+  const groups: number[][] = [];
+  let groupStart = 0;
+  for (let i = 1; i <= indices.length; i++) {
+    if (i === indices.length || indices[i] !== indices[i - 1] + 1) {
+      groups.push(indices.slice(groupStart, i));
+      groupStart = i;
+    }
+  }
+  return groups;
+}
+
+/**
+ * Diffs an original word list against pasted text using LCS to find deleted words.
+ * Only detects deletions — modified words are treated as delete+insert and are ignored.
+ *
+ * @param originalWords - Full word array from the transcript
+ * @param pastedText - User-edited text pasted back in
+ * @param alreadyDeletedIndices - Global indices already deleted (excluded from diff)
+ * @returns Sorted array of global word indices that should be newly deleted
+ */
+export function diffTranscript(
+  originalWords: Word[],
+  pastedText: string,
+  alreadyDeletedIndices: Set<number>,
+): number[] {
+  const activeWords: Array<{ globalIndex: number; normalized: string }> = [];
+  for (let i = 0; i < originalWords.length; i++) {
+    if (!alreadyDeletedIndices.has(i)) {
+      const norm = normalizeWord(originalWords[i].word);
+      if (norm.length > 0) {
+        activeWords.push({ globalIndex: i, normalized: norm });
+      }
+    }
+  }
+
+  const pastedTokens = pastedText
+    .split(/\s+/)
+    .map(normalizeWord)
+    .filter((w) => w.length > 0);
+
+  if (pastedTokens.length === 0) {
+    return activeWords.map((w) => w.globalIndex);
+  }
+
+  const n = activeWords.length;
+  const m = pastedTokens.length;
+
+  // Uint32Array supports transcripts up to ~4B words; Uint16 would overflow at 65k.
+  const dp = new Uint32Array((n + 1) * (m + 1));
+
+  for (let i = 1; i <= n; i++) {
+    for (let j = 1; j <= m; j++) {
+      if (activeWords[i - 1].normalized === pastedTokens[j - 1]) {
+        dp[i * (m + 1) + j] = dp[(i - 1) * (m + 1) + (j - 1)] + 1;
+      } else {
+        const up = dp[(i - 1) * (m + 1) + j];
+        const left = dp[i * (m + 1) + (j - 1)];
+        dp[i * (m + 1) + j] = up >= left ? up : left;
+      }
+    }
+  }
+
+  const inLCS = new Set<number>();
+  let i = n;
+  let j = m;
+  while (i > 0 && j > 0) {
+    if (activeWords[i - 1].normalized === pastedTokens[j - 1]) {
+      inLCS.add(i - 1);
+      i--;
+      j--;
+    } else if (dp[(i - 1) * (m + 1) + j] >= dp[i * (m + 1) + (j - 1)]) {
+      i--;
+    } else {
+      j--;
+    }
+  }
+
+  const deletedIndices: number[] = [];
+  for (let k = 0; k < activeWords.length; k++) {
+    if (!inLCS.has(k)) {
+      deletedIndices.push(activeWords[k].globalIndex);
+    }
+  }
+
+  return deletedIndices;
+}