commit 94b32b215e2c2e2fd00232969b9624c8b1dd304c · dunkirk.sh/thistle

+7 -170

src/components/transcription.ts

···

       1
       1
        
       import { css, html, LitElement } from "lit";

     

       2
       2
        
       import { customElement, state } from "lit/decorators.js";

     

       3
       3
       -
       import { parseVTT } from "../lib/vtt-cleaner";

     

       3
       3
       +
       import "./vtt-viewer.ts";

     

       4
       4
        
       

     

       5
       5
        
       interface TranscriptionJob {

     

       6
       6
        
       	id: string;

     
···

       23
       23
        
       

     

       24
       24
        
       

     

       25
       25
        
       

     

       26
       26
       -
       function parseVTT(vttContent: string): VTTSegment[] {

     

       27
       27
       -
       	const segments: VTTSegment[] = [];

     

       28
       28
       -
       	const lines = vttContent.split("\n");

     

       29
       26
        
       

     

       30
       30
       -
       	let i = 0;

     

       31
       31
       -
       	// Skip WEBVTT header

     

       32
       32
       -
       	while (i < lines.length && lines[i]?.trim() !== "WEBVTT") {

     

       33
       33
       -
       		i++;

     

       34
       34
       -
       	}

     

       35
       35
       -
       	i++; // Skip WEBVTT

     

       36
       36
       -
       

     

       37
       37
       -
       	while (i < lines.length) {

     

       38
       38
       -
       		let index: string | undefined;

     

       39
       39
       -
       		// Check for cue ID (line before timestamp)

     

       40
       40
       -
       		if (lines[i]?.trim() && !lines[i]?.includes("-->")) {

     

       41
       41
       -
       			index = lines[i]?.trim();

     

       42
       42
       -
       			i++;

     

       43
       43
       -
       		}

     

       44
       44
       -
       

     

       45
       45
       -
       		if (i < lines.length && lines[i]?.includes("-->")) {

     

       46
       46
       -
       			const [startStr, endStr] = lines[i].split("-->").map((s) => s.trim());

     

       47
       47
       -
       			const start = parseVTTTimestamp(startStr || "");

     

       48
       48
       -
       			const end = parseVTTTimestamp(endStr || "");

     

       49
       49
       -
       

     

       50
       50
       -
       			// Collect text lines until empty line

     

       51
       51
       -
       			const textLines: string[] = [];

     

       52
       52
       -
       			i++;

     

       53
       53
       -
       			while (i < lines.length && lines[i]?.trim()) {

     

       54
       54
       -
       				textLines.push(lines[i] || "");

     

       55
       55
       -
       				i++;

     

       56
       56
       -
       			}

     

       57
       57
       -
       

     

       58
       58
       -
       			segments.push({

     

       59
       59
       -
       				start,

     

       60
       60
       -
       				end,

     

       61
       61
       -
       				text: textLines.join(" ").trim(),

     

       62
       62
       -
       				index,

     

       63
       63
       -
       			});

     

       64
       64
       -
       		} else {

     

       65
       65
       -
       			i++;

     

       66
       66
       -
       		}

     

       67
       67
       -
       	}

     

       68
       68
       -
       

     

       69
       69
       -
       	return segments;

     

       70
       70
       -
       }

     

       71
       71
       -
       

     

       72
       72
       -
       function parseVTTTimestamp(timestamp: string): number {

     

       73
       73
       -
       	const parts = timestamp.split(":");

     

       74
       74
       -
       	if (parts.length === 3) {

     

       75
       75
       -
       		const hours = Number.parseFloat(parts[0] || "0");

     

       76
       76
       -
       		const minutes = Number.parseFloat(parts[1] || "0");

     

       77
       77
       -
       		const seconds = Number.parseFloat(parts[2] || "0");

     

       78
       78
       -
       		return hours * 3600 + minutes * 60 + seconds;

     

       79
       79
       -
       	}

     

       80
       80
       -
       	return 0;

     

       81
       81
       -
       }

     

       82
       27
        
       

     

       83
       28
        
       class WordStreamer {

     

       84
       29
        
       	private queue: string[] = [];

     
···

       469
       414
        
       					// Load VTT for completed jobs

     

       470
       415
        
       					if (update.status === "completed") {

     

       471
       416
        
       						await this.loadVTTForJob(jobId);

     

       472
       472
       -
       						this.setupWordHighlighting(jobId);

     

       473
       417
        
       					}

     

       474
       418
        
       				}

     

       475
       419
        
       			}

     
···

       540
       484
        
       					// Fetch VTT for completed jobs

     

       541
       485
        
       					if (job.status === "completed") {

     

       542
       486
        
       						await this.loadVTTForJob(job.id);

     

       543
       543
       -
       						await this.updateComplete;

     

       544
       544
       -
       						this.setupWordHighlighting(job.id);

     

       545
       487
        
       					}

     

       546
       488
        
       				}

     

       547
       489
        
       				// Don't override serviceAvailable - it's set by checkHealth()

     
···

       563
       505
        
       			const response = await fetch(`/api/transcriptions/${jobId}?format=vtt`);

     

       564
       506
        
       			if (response.ok) {

     

       565
       507
        
       				const vttContent = await response.text();

     

       566
       566
       -
       				const segments = parseVTT(vttContent);

     

       567
       508
        
       

     

       568
       568
       -
       				// Update job with VTT content and segments

     

       509
       509
       +
       				// Update job with VTT content

     

       569
       510
        
       				const job = this.jobs.find((j) => j.id === jobId);

     

       570
       511
        
       				if (job) {

     

       571
       512
        
       					job.vttContent = vttContent;

     

       572
       572
       -
       					job.vttSegments = segments;

     

       573
       513
        
       					job.audioUrl = `/api/transcriptions/${jobId}/audio`;

     

       574
       514
        
       					this.jobs = [...this.jobs];

     

       575
       515
        
       				}

     
···

       579
       519
        
       		}

     

       580
       520
        
       	}

     

       581
       521
        
       

     

       582
       582
       -
       	private setupWordHighlighting(jobId: string) {

     

       583
       583
       -
       		const job = this.jobs.find((j) => j.id === jobId);

     

       584
       584
       -
       		if (!job?.audioUrl || !job.vttSegments) return;

     

       585
       585
       -
       

     

       586
       586
       -
       		// Wait for next frame to ensure DOM is updated

     

       587
       587
       -
       		requestAnimationFrame(() => {

     

       588
       588
       -
       			const audioElement = this.shadowRoot?.querySelector(

     

       589
       589
       -
       				`#audio-${jobId}`,

     

       590
       590
       -
       			) as HTMLAudioElement;

     

       591
       591
       -
       			const transcriptDiv = this.shadowRoot?.querySelector(

     

       592
       592
       -
       				`#transcript-${jobId}`,

     

       593
       593
       -
       			) as HTMLDivElement;

     

       594
       594
       -
       

     

       595
       595
       -
       			if (!audioElement || !transcriptDiv) {

     

       596
       596
       -
       				console.warn("Could not find audio or transcript elements");

     

       597
       597
       -
       				return;

     

       598
       598
       -
       			}

     

       599
       599
       -
       

     

       600
       600
       -
       			// Track current segment

     

       601
       601
       -
       			let currentSegmentElement: HTMLElement | null = null;

     

       602
       602
       -
       

     

       603
       603
       -
       			// Update highlighting on timeupdate

     

       604
       604
       -
       			audioElement.addEventListener("timeupdate", () => {

     

       605
       605
       -
       				const currentTime = audioElement.currentTime;

     

       606
       606
       -
       				const segmentElements = transcriptDiv.querySelectorAll("[data-start]");

     

       607
       607
       -
       

     

       608
       608
       -
       				for (const el of segmentElements) {

     

       609
       609
       -
       					const start = Number.parseFloat(

     

       610
       610
       -
       						(el as HTMLElement).dataset.start || "0",

     

       611
       611
       -
       					);

     

       612
       612
       -
       					const end = Number.parseFloat((el as HTMLElement).dataset.end || "0");

     

       613
       613
       -
       

     

       614
       614
       -
       					if (currentTime >= start && currentTime <= end) {

     

       615
       615
       -
       						if (currentSegmentElement !== el) {

     

       616
       616
       -
       							currentSegmentElement?.classList.remove("current-segment");

     

       617
       617
       -
       							(el as HTMLElement).classList.add("current-segment");

     

       618
       618
       -
       							currentSegmentElement = el as HTMLElement;

     

       619
       619
       -
       

     

       620
       620
       -
       							// Auto-scroll to current segment

     

       621
       621
       -
       							el.scrollIntoView({

     

       622
       622
       -
       								behavior: "smooth",

     

       623
       623
       -
       								block: "center",

     

       624
       624
       -
       							});

     

       625
       625
       -
       						}

     

       626
       626
       -
       						break;

     

       627
       627
       -
       					}

     

       628
       628
       -
       				}

     

       629
       629
       -
       			});

     

       630
       630
       -
       

     

       631
       631
       -
       			// Handle segment clicks

     

       632
       632
       -
       			transcriptDiv.addEventListener("click", (e) => {

     

       633
       633
       -
       				const target = e.target as HTMLElement;

     

       634
       634
       -
       				if (target.dataset.start) {

     

       635
       635
       -
       					const start = Number.parseFloat(target.dataset.start);

     

       636
       636
       -
       					audioElement.currentTime = start;

     

       637
       637
       -
       					audioElement.play();

     

       638
       638
       -
       				}

     

       639
       639
       -
       			});

     

       640
       640
       -
       		});

     

       641
       641
       -
       	}

     

       522
       522
       +
       	

     

       642
       523
        
       

     

       643
       524
        
       	private handleDragOver(e: DragEvent) {

     

       644
       525
        
       		e.preventDefault();

     
···

       741
       622
        
       			return displayed;

     

       742
       623
        
       		}

     

       743
       624
        
       

     

       744
       744
       -
       		const segments = parseVTT(job.vttContent);

     

       745
       745
       -
       		// Group segments by paragraph (extract paragraph number from ID like "Paragraph 1-1" -> "1")

     

       746
       746
       -
       		const paragraphGroups = new Map<string, typeof segments>();

     

       747
       747
       -
       		for (const segment of segments) {

     

       748
       748
       -
       		const id = (segment.index || '').trim();

     

       749
       749
       -
       		const match = id.match(/^Paragraph\s+(\d+)-/);

     

       750
       750
       -
       		const paraNum = match ? match[1] : '0';

     

       751
       751
       -
       		if (!paragraphGroups.has(paraNum)) {

     

       752
       752
       -
       		paragraphGroups.set(paraNum, []);

     

       753
       753
       -
       		}

     

       754
       754
       -
       		paragraphGroups.get(paraNum)!.push(segment);

     

       755
       755
       -
       		}

     

       756
       756
       -
       

     

       757
       757
       -
       		// Render each paragraph group

     

       758
       758
       -
       		const paragraphs = Array.from(paragraphGroups.entries()).map(([paraNum, groupSegments]) => {

     

       759
       759
       -
       		// Concatenate all text in the group

     

       760
       760
       -
       		const fullText = groupSegments.map(s => s.text || '').join(' ');

     

       761
       761
       -
       		// Split into sentences

     

       762
       762
       -
       		const sentences = fullText.split(/(?<=[\.\!\?])\s+/g).filter(Boolean);

     

       763
       763
       -
       		// Calculate word counts for timing

     

       764
       764
       -
       		const wordCounts = sentences.map((s) => s.split(/\s+/).filter(Boolean).length);

     

       765
       765
       -
       		 const totalWords = Math.max(1, wordCounts.reduce((a, b) => a + b, 0));

     

       766
       766
       -
       

     

       767
       767
       -
       			// Overall paragraph timing

     

       768
       768
       -
       			const paraStart = Math.min(...groupSegments.map(s => s.start ?? 0));

     

       769
       769
       -
       			const paraEnd = Math.max(...groupSegments.map(s => s.end ?? paraStart));

     

       770
       770
       -
       

     

       771
       771
       -
       			let acc = 0;

     

       772
       772
       -
       			const paraDuration = paraEnd - paraStart;

     

       773
       773
       -
       

     

       774
       774
       -
       			return html`<div class="paragraph">

     

       775
       775
       -
       			${sentences.map((sent, si) => {

     

       776
       776
       -
       			const startOffset = (acc / totalWords) * paraDuration;

     

       777
       777
       -
       			acc += wordCounts[si];

     

       778
       778
       -
       			const sentenceDuration = (wordCounts[si] / totalWords) * paraDuration;

     

       779
       779
       -
       			const endOffset = si < sentences.length - 1 ? startOffset + sentenceDuration - 0.001 : paraEnd - paraStart;

     

       780
       780
       -
       			const spanStart = paraStart + startOffset;

     

       781
       781
       -
       			const spanEnd = paraStart + endOffset;

     

       782
       782
       -
       			 return html`<span class="segment" data-start="${spanStart}" data-end="${spanEnd}">${sent}</span>${si < sentences.length - 1 ? ' ' : ''}`;

     

       783
       783
       -
       			 })}

     

       784
       784
       -
       			</div>`;

     

       785
       785
       -
       		});

     

       786
       786
       -
       

     

       787
       787
       -
       		return html`${paragraphs}`;

     

       625
       625
       +
       		// Delegate VTT rendering and highlighting to the vtt-viewer component

     

       626
       626
       +
       		return html`<vtt-viewer .vttContent=${job.vttContent ?? ""} .audioId=${`audio-${job.id}`}></vtt-viewer>`;

     

       788
       627
        
       	}

     

       789
       628
        
       

     

       790
       629
        
       

     
···

       835
       674
        
       						}

     

       836
       675
        
       

     

       837
       676
        
                   ${

     

       838
       838
       -
       							job.status === "completed" && job.audioUrl && job.vttSegments

     

       677
       677
       +
       							job.status === "completed" && job.audioUrl && job.vttContent

     

       839
       678
        
       								? html`

     

       840
       679
        
                     <div class="audio-player">

     

       841
       680
        
                       <audio id="audio-${job.id}" preload="metadata" controls src="${job.audioUrl}"></audio>

     

       842
       681
        
                     </div>

     

       843
       843
       -
                     <div class="job-transcript" id="transcript-${job.id}">

     

       844
       844
       -
                       ${this.renderTranscript(job)}

     

       845
       845
       -
                     </div>

     

       682
       682
       +
                     ${this.renderTranscript(job)}

     

       846
       683
        
                   `

     

       847
       684
        
       								: this.displayedTranscripts.has(job.id) && this.displayedTranscripts.get(job.id)

     

       848
       685
        
       									? html`

+268

src/components/vtt-viewer.ts

···

       1
       1
       +
       import { LitElement, html, css } from "lit";

     

       2
       2
       +
       import { customElement, property } from "lit/decorators.js";

     

       3
       3
       +
       

     

       4
       4
       +
       interface VTTSegment {

     

       5
       5
       +
       	start: number;

     

       6
       6
       +
       	end: number;

     

       7
       7
       +
       	text: string;

     

       8
       8
       +
       	index?: string;

     

       9
       9
       +
       }

     

       10
       10
       +
       

     

       11
       11
       +
       function parseVTT(vttContent: string): VTTSegment[] {

     

       12
       12
       +
       	const segments: VTTSegment[] = [];

     

       13
       13
       +
       	const lines = vttContent.split("\n");

     

       14
       14
       +
       

     

       15
       15
       +
       	let i = 0;

     

       16
       16
       +
       	// Skip WEBVTT header if present

     

       17
       17
       +
       	while (i < lines.length && (lines[i] || "").trim() !== "WEBVTT") {

     

       18
       18
       +
       		i++;

     

       19
       19
       +
       	}

     

       20
       20
       +
       	if (i < lines.length) i++; // advance past header if found

     

       21
       21
       +
       

     

       22
       22
       +
       	while (i < lines.length) {

     

       23
       23
       +
       		let index: string | undefined;

     

       24
       24
       +
       		let line = lines[i] || "";

     

       25
       25
       +
       

     

       26
       26
       +
       		// Check for cue ID (line before timestamp)

     

       27
       27
       +
       		if (line.trim() && !line.includes("-->")) {

     

       28
       28
       +
       			index = line.trim();

     

       29
       29
       +
       			i++;

     

       30
       30
       +
       			line = lines[i] || "";

     

       31
       31
       +
       		}

     

       32
       32
       +
       

     

       33
       33
       +
       		if (line.includes("-->")) {

     

       34
       34
       +
       			const parts = line.split("-->").map((s) => s.trim());

     

       35
       35
       +
       			const start = parseVTTTimestamp(parts[0] ?? "");

     

       36
       36
       +
       			const end = parseVTTTimestamp(parts[1] ?? "");

     

       37
       37
       +
       

     

       38
       38
       +
       			// Collect text lines until empty line

     

       39
       39
       +
       			const textLines: string[] = [];

     

       40
       40
       +
       			i++;

     

       41
       41
       +
       			while (i < lines.length && (lines[i] || "").trim()) {

     

       42
       42
       +
       				textLines.push(lines[i] || "");

     

       43
       43
       +
       				i++;

     

       44
       44
       +
       			}

     

       45
       45
       +
       

     

       46
       46
       +
       			segments.push({

     

       47
       47
       +
       				start,

     

       48
       48
       +
       				end,

     

       49
       49
       +
       				text: textLines.join(" ").trim(),

     

       50
       50
       +
       				index,

     

       51
       51
       +
       			});

     

       52
       52
       +
       		} else {

     

       53
       53
       +
       			i++;

     

       54
       54
       +
       		}

     

       55
       55
       +
       	}

     

       56
       56
       +
       

     

       57
       57
       +
       	return segments;

     

       58
       58
       +
       }

     

       59
       59
       +
       

     

       60
       60
       +
       function parseVTTTimestamp(timestamp?: string): number {

     

       61
       61
       +
       	const parts = (timestamp || "").split(":");

     

       62
       62
       +
       	if (parts.length === 3) {

     

       63
       63
       +
       		const hours = Number.parseFloat(parts[0] || "0");

     

       64
       64
       +
       		const minutes = Number.parseFloat(parts[1] || "0");

     

       65
       65
       +
       		const seconds = Number.parseFloat(parts[2] || "0");

     

       66
       66
       +
       		return hours * 3600 + minutes * 60 + seconds;

     

       67
       67
       +
       	}

     

       68
       68
       +
       	return 0;

     

       69
       69
       +
       }

     

       70
       70
       +
       

     

       71
       71
       +
       @customElement("vtt-viewer")

     

       72
       72
       +
       export class VTTViewer extends LitElement {

     

       73
       73
       +
       	@property({ type: String }) vttContent = "";

     

       74
       74
       +
       	@property({ type: String }) audioId = "";

     

       75
       75
       +
       

     

       76
       76
       +
       	static override styles = css`

     

       77
       77
       +
       	.transcript {

     

       78
       78
       +
       		background: color-mix(in srgb, var(--primary) 5%, transparent);

     

       79
       79
       +
       		border-radius: 6px;

     

       80
       80
       +
       		padding: 1rem;

     

       81
       81
       +
       		font-family: monospace;

     

       82
       82
       +
       		font-size: 0.875rem;

     

       83
       83
       +
       		color: var(--text);

     

       84
       84
       +
       		line-height: 1.6;

     

       85
       85
       +
       		word-wrap: break-word;

     

       86
       86
       +
       	}

     

       87
       87
       +
       

     

       88
       88
       +
       	.segment {

     

       89
       89
       +
       		cursor: pointer;

     

       90
       90
       +
       		transition: background 0.1s;

     

       91
       91
       +
       		display: inline;

     

       92
       92
       +
       	}

     

       93
       93
       +
       

     

       94
       94
       +
       	.segment:hover {

     

       95
       95
       +
       		background: color-mix(in srgb, var(--primary) 15%, transparent);

     

       96
       96
       +
       		border-radius: 2px;

     

       97
       97
       +
       	}

     

       98
       98
       +
       

     

       99
       99
       +
       	.current-segment {

     

       100
       100
       +
       		background: color-mix(in srgb, var(--accent) 30%, transparent);

     

       101
       101
       +
       		border-radius: 2px;

     

       102
       102
       +
       	}

     

       103
       103
       +
       

     

       104
       104
       +
       	.paragraph {

     

       105
       105
       +
       		display: block;

     

       106
       106
       +
       		margin: 0 0 1rem 0;

     

       107
       107
       +
       		line-height: 1.6;

     

       108
       108
       +
       	}

     

       109
       109
       +
       	`;

     

       110
       110
       +
       

     

       111
       111
       +
       	private audioElement: HTMLAudioElement | null = null;

     

       112
       112
       +
       	private boundTimeUpdate: ((this: HTMLAudioElement, ev: Event) => any) | null = null;

     

       113
       113
       +
       	private boundTranscriptClick: ((e: Event) => any) | null = null;

     

       114
       114
       +
       

     

       115
       115
       +
       	private _viewerId = `vtt-${Math.random().toString(36).slice(2,9)}`;

     

       116
       116
       +
       

     

       117
       117
       +
       	private findAudioElementById(id: string): HTMLAudioElement | null {

     

       118
       118
       +
       		let root: any = this.getRootNode();

     

       119
       119
       +
       		let depth = 0;

     

       120
       120
       +
       		while (root && depth < 10) {

     

       121
       121
       +
       			if (root instanceof ShadowRoot) {

     

       122
       122
       +
       				const el = root.querySelector(`#${id}`) as HTMLAudioElement | null;

     

       123
       123
       +
       				if (el) return el;

     

       124
       124
       +
       				root = (root as ShadowRoot).host?.getRootNode?.();

     

       125
       125
       +
       			} else if (root instanceof Document) {

     

       126
       126
       +
       				const byId = root.getElementById(id) as HTMLAudioElement | null;

     

       127
       127
       +
       				if (byId) return byId;

     

       128
       128
       +
       				break;

     

       129
       129
       +
       			} else {

     

       130
       130
       +
       				break;

     

       131
       131
       +
       			}

     

       132
       132
       +
       			depth++;

     

       133
       133
       +
       		}

     

       134
       134
       +
       		return null;

     

       135
       135
       +
       	}

     

       136
       136
       +
       

     

       137
       137
       +
       	private setupHighlighting() {

     

       138
       138
       +
       		// Detach previous listeners if any

     

       139
       139
       +
       		this.detachHighlighting();

     

       140
       140
       +
       

     

       141
       141
       +
       		const audioElement = this.findAudioElementById(this.audioId);

     

       142
       142
       +
       		const transcriptDiv = this.shadowRoot?.querySelector('.transcript') as HTMLDivElement | null;

     

       143
       143
       +
       		if (!audioElement || !transcriptDiv) return;

     

       144
       144
       +
       

     

       145
       145
       +
       		// Clear any lingering highlights from prior instances

     

       146
       146
       +
       		transcriptDiv.querySelectorAll('.current-segment').forEach((el) => (el as HTMLElement).classList.remove('current-segment'));

     

       147
       147
       +
       

     

       148
       148
       +
       		this.audioElement = audioElement;

     

       149
       149
       +
       		let currentSegmentElement: HTMLElement | null = null;

     

       150
       150
       +
       

     

       151
       151
       +
       		this.boundTimeUpdate = () => {

     

       152
       152
       +
       			const currentTime = this.audioElement?.currentTime ?? 0;

     

       153
       153
       +
       			const segmentElements = transcriptDiv.querySelectorAll('[data-start]');

     

       154
       154
       +
       			let found = false;

     

       155
       155
       +
       

     

       156
       156
       +
       			for (const el of Array.from(segmentElements)) {

     

       157
       157
       +
       				const start = Number.parseFloat((el as HTMLElement).dataset.start || '0');

     

       158
       158
       +
       				const end = Number.parseFloat((el as HTMLElement).dataset.end || '0');

     

       159
       159
       +
       

     

       160
       160
       +
       				if (currentTime >= start && currentTime <= end) {

     

       161
       161
       +
       					found = true;

     

       162
       162
       +
       					if (currentSegmentElement !== el) {

     

       163
       163
       +
       						currentSegmentElement?.classList.remove('current-segment');

     

       164
       164
       +
       						(el as HTMLElement).classList.add('current-segment');

     

       165
       165
       +
       						currentSegmentElement = el as HTMLElement;

     

       166
       166
       +
       						(el as HTMLElement).scrollIntoView({ behavior: 'smooth', block: 'center' });

     

       167
       167
       +
       					}

     

       168
       168
       +
       					break;

     

       169
       169
       +
       				}

     

       170
       170
       +
       			}

     

       171
       171
       +
       

     

       172
       172
       +
       			// If no segment matched, clear any existing highlight

     

       173
       173
       +
       			if (!found && currentSegmentElement) {

     

       174
       174
       +
       				currentSegmentElement.classList.remove('current-segment');

     

       175
       175
       +
       				currentSegmentElement = null;

     

       176
       176
       +
       			}

     

       177
       177
       +
       		};

     

       178
       178
       +
       

     

       179
       179
       +
       		audioElement.addEventListener('timeupdate', this.boundTimeUpdate as EventListener);

     

       180
       180
       +
       

     

       181
       181
       +
       		this.boundTranscriptClick = (e: Event) => {

     

       182
       182
       +
       			const target = e.target as HTMLElement;

     

       183
       183
       +
       			if (target.dataset.start) {

     

       184
       184
       +
       				this.audioElement!.currentTime = Number.parseFloat(target.dataset.start);

     

       185
       185
       +
       				this.audioElement!.play();

     

       186
       186
       +
       			}

     

       187
       187
       +
       		};

     

       188
       188
       +
       

     

       189
       189
       +
       		transcriptDiv.addEventListener('click', this.boundTranscriptClick);

     

       190
       190
       +
       	}

     

       191
       191
       +
       

     

       192
       192
       +
       	private detachHighlighting() {

     

       193
       193
       +
       		try {

     

       194
       194
       +
       			const transcriptDiv = this.shadowRoot?.querySelector('.transcript') as HTMLDivElement | null;

     

       195
       195
       +
       			if (this.audioElement) {

     

       196
       196
       +
       				// Pause playback to avoid audio continuing after the viewer is removed

     

       197
       197
       +
       				try {

     

       198
       198
       +
       					this.audioElement.pause();

     

       199
       199
       +
       				} catch (e) {

     

       200
       200
       +
       					// ignore

     

       201
       201
       +
       				}

     

       202
       202
       +
       				if (this.boundTimeUpdate) {

     

       203
       203
       +
       					this.audioElement.removeEventListener('timeupdate', this.boundTimeUpdate);

     

       204
       204
       +
       				}

     

       205
       205
       +
       			}

     

       206
       206
       +
       			if (transcriptDiv && this.boundTranscriptClick) {

     

       207
       207
       +
       				transcriptDiv.removeEventListener('click', this.boundTranscriptClick);

     

       208
       208
       +
       			}

     

       209
       209
       +
       		} finally {

     

       210
       210
       +
       			this.audioElement = null;

     

       211
       211
       +
       			this.boundTimeUpdate = null;

     

       212
       212
       +
       			this.boundTranscriptClick = null;

     

       213
       213
       +
       		}

     

       214
       214
       +
       	}

     

       215
       215
       +
       

     

       216
       216
       +
       	override disconnectedCallback() {

     

       217
       217
       +
       		this.detachHighlighting();

     

       218
       218
       +
       		super.disconnectedCallback && super.disconnectedCallback();

     

       219
       219
       +
       	}

     

       220
       220
       +
       

     

       221
       221
       +
       	override updated(changed: Map<string, any>) {

     

       222
       222
       +
       		super.updated(changed);

     

       223
       223
       +
       		if (changed.has('vttContent') || changed.has('audioId')) {

     

       224
       224
       +
       			this.setupHighlighting();

     

       225
       225
       +
       		}

     

       226
       226
       +
       	}

     

       227
       227
       +
       

     

       228
       228
       +
       	private renderFromVTT() {

     

       229
       229
       +
       		if (!this.vttContent) return html``;

     

       230
       230
       +
       		const segments = parseVTT(this.vttContent);

     

       231
       231
       +
       		const paragraphGroups = new Map<string, VTTSegment[]>();

     

       232
       232
       +
       

     

       233
       233
       +
       		for (const segment of segments) {

     

       234
       234
       +
       			const id = (segment.index || "").trim();

     

       235
       235
       +
       			const match = id.match(/^Paragraph\s+(\d+)-/);

     

       236
       236
       +
       			const paraNum = match ? match[1] : '0';

     

       237
       237
       +
       			if (!paragraphGroups.has(paraNum)) paragraphGroups.set(paraNum, []);

     

       238
       238
       +
       			paragraphGroups.get(paraNum)!.push(segment);

     

       239
       239
       +
       		}

     

       240
       240
       +
       

     

       241
       241
       +
       		const paragraphs = Array.from(paragraphGroups.entries()).map(([_, groupSegments]) => {

     

       242
       242
       +
       			const fullText = groupSegments.map(s => s.text || '').join(' ');

     

       243
       243
       +
       			const sentences = fullText.split(/(?<=[\.\!\?])\s+/g).filter(Boolean);

     

       244
       244
       +
       			const wordCounts = sentences.map((s) => s.split(/\s+/).filter(Boolean).length);

     

       245
       245
       +
       			const totalWords = Math.max(1, wordCounts.reduce((a, b) => a + b, 0));

     

       246
       246
       +
       			const paraStart = Math.min(...groupSegments.map(s => s.start ?? 0));

     

       247
       247
       +
       			const paraEnd = Math.max(...groupSegments.map(s => s.end ?? paraStart));

     

       248
       248
       +
       			let acc = 0;

     

       249
       249
       +
       			const paraDuration = paraEnd - paraStart;

     

       250
       250
       +
       

     

       251
       251
       +
       			return html`<div class="paragraph">${sentences.map((sent, si) => {

     

       252
       252
       +
       				const startOffset = (acc / totalWords) * paraDuration;

     

       253
       253
       +
       				acc += wordCounts[si];

     

       254
       254
       +
       				const sentenceDuration = (wordCounts[si] / totalWords) * paraDuration;

     

       255
       255
       +
       				const endOffset = si < sentences.length - 1 ? startOffset + sentenceDuration - 0.001 : paraEnd - paraStart;

     

       256
       256
       +
       				const spanStart = paraStart + startOffset;

     

       257
       257
       +
       				const spanEnd = paraStart + endOffset;

     

       258
       258
       +
       				return html`<span class="segment" data-start="${spanStart}" data-end="${spanEnd}">${sent}</span>${si < sentences.length - 1 ? ' ' : ''}`;

     

       259
       259
       +
       			})}</div>`;

     

       260
       260
       +
       		});

     

       261
       261
       +
       

     

       262
       262
       +
       		return html`${paragraphs}`;

     

       263
       263
       +
       	}

     

       264
       264
       +
       

     

       265
       265
       +
       	override render() {

     

       266
       266
       +
       		return html`<div class="transcript">${this.renderFromVTT()}</div>`;

     

       267
       267
       +
       	}

     

       268
       268
       +
       }

+114 -48

src/index.ts

···

       43
       43
        
       	type TranscriptionUpdate,

     

       44
       44
        
       	WhisperServiceManager,

     

       45
       45
        
       } from "./lib/transcription";

     

       46
       46
       -
       import { getTranscript, getTranscriptVTT } from "./lib/transcript-storage";

     

       46
       46
       +
       import { getTranscriptVTT } from "./lib/transcript-storage";

     

       47
       47
        
       import indexHTML from "./pages/index.html";

     

       48
       48
        
       import adminHTML from "./pages/admin.html";

     

       49
       49
        
       import settingsHTML from "./pages/settings.html";

     
···

       83
       83
        
       }

     

       84
       84
        
       

     

       85
       85
        
       // Periodic sync every 5 minutes as backup (SSE handles real-time updates)

     

       86
       86
       -
       setInterval(async () => {

     

       87
       87
       -
       	try {

     

       88
       88
       -
       		await whisperService.syncWithWhisper();

     

       89
       89
       -
       	} catch (error) {

     

       90
       90
       -
       		console.warn(

     

       91
       91
       -
       			"[Sync] Failed to sync with Murmur:",

     

       92
       92
       -
       			error instanceof Error ? error.message : "Unknown error",

     

       93
       93
       -
       		);

     

       94
       94
       -
       	}

     

       95
       95
       -
       }, 5 * 60 * 1000);

     

       86
       86
       +
       setInterval(

     

       87
       87
       +
       	async () => {

     

       88
       88
       +
       		try {

     

       89
       89
       +
       			await whisperService.syncWithWhisper();

     

       90
       90
       +
       		} catch (error) {

     

       91
       91
       +
       			console.warn(

     

       92
       92
       +
       				"[Sync] Failed to sync with Murmur:",

     

       93
       93
       +
       				error instanceof Error ? error.message : "Unknown error",

     

       94
       94
       +
       			);

     

       95
       95
       +
       		}

     

       96
       96
       +
       	},

     

       97
       97
       +
       	5 * 60 * 1000,

     

       98
       98
       +
       );

     

       96
       99
        
       

     

       97
       100
        
       // Clean up stale files daily

     

       98
       101
        
       setInterval(() => whisperService.cleanupStaleFiles(), 24 * 60 * 60 * 1000);

     
···

       652
       655
        
       									progress: number;

     

       653
       656
        
       								},

     

       654
       657
        
       								[string]

     

       655
       655
       -
       							>(

     

       656
       656
       -
       								"SELECT status, progress FROM transcriptions WHERE id = ?",

     

       657
       657
       -
       							)

     

       658
       658
       +
       							>("SELECT status, progress FROM transcriptions WHERE id = ?")

     

       658
       659
        
       							.get(transcriptionId);

     

       659
       660
        
       						if (current) {

     

       660
       660
       -
       							// Load transcript from file if completed

     

       661
       661
       -
       							let transcript: string | undefined;

     

       662
       662
       -
       							if (current.status === "completed") {

     

       663
       663
       -
       								transcript = (await getTranscript(transcriptionId)) || undefined;

     

       664
       664
       -
       							}

     

       665
       661
        
       							sendEvent({

     

       666
       662
        
       								status: current.status as TranscriptionUpdate["status"],

     

       667
       663
        
       								progress: current.progress,

     

       668
       668
       -
       								transcript,

     

       669
       664
        
       							});

     

       670
       665
        
       						}

     

       671
       666
        
       						// If already complete, close immediately

     
···

       737
       732
        
       					const user = requireAuth(req);

     

       738
       733
        
       					const transcriptionId = req.params.id;

     

       739
       734
        
       

     

       740
       740
       -
       					// Verify ownership

     

       735
       735
       +
       					// Verify ownership or admin

     

       741
       736
        
       					const transcription = db

     

       742
       737
        
       						.query<

     

       743
       738
        
       							{

     

       744
       739
        
       								id: string;

     

       745
       740
        
       								user_id: number;

     

       741
       741
       +
       								filename: string;

     

       742
       742
       +
       								original_filename: string;

     

       746
       743
        
       								status: string;

     

       747
       747
       -
       								original_filename: string;

     

       744
       744
       +
       								progress: number;

     

       745
       745
       +
       								created_at: number;

     

       748
       746
        
       							},

     

       749
       747
        
       							[string]

     

       750
       748
        
       						>(

     

       751
       751
       -
       							"SELECT id, user_id, status, original_filename FROM transcriptions WHERE id = ?",

     

       749
       749
       +
       							"SELECT id, user_id, filename, original_filename, status, progress, created_at FROM transcriptions WHERE id = ?",

     

       752
       750
        
       						)

     

       753
       751
        
       						.get(transcriptionId);

     

       754
       752
        
       

     

       755
       755
       -
       					if (!transcription || transcription.user_id !== user.id) {

     

       753
       753
       +
       					if (!transcription) {

     

       754
       754
       +
       						return Response.json(

     

       755
       755
       +
       							{ error: "Transcription not found" },

     

       756
       756
       +
       							{ status: 404 },

     

       757
       757
       +
       						);

     

       758
       758
       +
       					}

     

       759
       759
       +
       

     

       760
       760
       +
       					// Allow access if user owns it or is admin

     

       761
       761
       +
       					if (transcription.user_id !== user.id && user.role !== "admin") {

     

       756
       762
        
       						return Response.json(

     

       757
       763
        
       							{ error: "Transcription not found" },

     

       758
       764
        
       							{ status: 404 },

     
···

       789
       795
        
       						});

     

       790
       796
        
       					}

     

       791
       797
        
       

     

       792
       792
       -
       					// Default: return plain text transcript from file

     

       793
       793
       -
       					const transcript = await getTranscript(transcriptionId);

     

       794
       794
       -
       					if (!transcript) {

     

       795
       795
       -
       						return Response.json(

     

       796
       796
       -
       							{ error: "Transcript not available" },

     

       797
       797
       -
       							{ status: 404 },

     

       798
       798
       -
       						);

     

       798
       798
       +
       					// return info on transcript

     

       799
       799
       +
       					const transcript = {

     

       800
       800
       +
            					id: transcription.id,

     

       801
       801
       +
            					filename: transcription.original_filename,

     

       802
       802
       +
            					status: transcription.status,

     

       803
       803
       +
            					progress: transcription.progress,

     

       804
       804
       +
            					created_at: transcription.created_at,

     

       799
       805
        
       					}

     

       800
       800
       -
       

     

       801
       801
       -
       					return new Response(transcript, {

     

       806
       806
       +
       					return new Response(JSON.stringify(transcript), {

     

       802
       807
        
       						headers: {

     

       803
       803
       -
       							"Content-Type": "text/plain",

     

       808
       808
       +
       							"Content-Type": "application/json",

     

       804
       809
        
       						},

     

       805
       810
        
       					});

     

       806
       811
        
       				} catch (error) {

     
···

       814
       819
        
       					const user = requireAuth(req);

     

       815
       820
        
       					const transcriptionId = req.params.id;

     

       816
       821
        
       

     

       817
       817
       -
       					// Verify ownership and get filename

     

       822
       822
       +
       					// Verify ownership or admin

     

       818
       823
        
       					const transcription = db

     

       819
       824
        
       						.query<

     

       820
       825
        
       							{

     
···

       824
       829
        
       								status: string;

     

       825
       830
        
       							},

     

       826
       831
        
       							[string]

     

       827
       827
       -
       						>("SELECT id, user_id, filename, status FROM transcriptions WHERE id = ?")

     

       832
       832
       +
       						>(

     

       833
       833
       +
       							"SELECT id, user_id, filename, status FROM transcriptions WHERE id = ?",

     

       834
       834
       +
       						)

     

       828
       835
        
       						.get(transcriptionId);

     

       829
       836
        
       

     

       830
       830
       -
       					if (!transcription || transcription.user_id !== user.id) {

     

       837
       837
       +
       					if (!transcription) {

     

       838
       838
       +
       						return Response.json(

     

       839
       839
       +
       							{ error: "Transcription not found" },

     

       840
       840
       +
       							{ status: 404 },

     

       841
       841
       +
       						);

     

       842
       842
       +
       					}

     

       843
       843
       +
       

     

       844
       844
       +
       					// Allow access if user owns it or is admin

     

       845
       845
       +
       					if (transcription.user_id !== user.id && user.role !== "admin") {

     

       831
       846
        
       						return Response.json(

     

       832
       847
        
       							{ error: "Transcription not found" },

     

       833
       848
        
       							{ status: 404 },

     
···

       846
       861
        
       					const file = Bun.file(filePath);

     

       847
       862
        
       

     

       848
       863
        
       					if (!(await file.exists())) {

     

       849
       849
       -
       						return Response.json({ error: "Audio file not found" }, { status: 404 });

     

       864
       864
       +
       						return Response.json(

     

       865
       865
       +
       							{ error: "Audio file not found" },

     

       866
       866
       +
       							{ status: 404 },

     

       867
       867
       +
       						);

     

       850
       868
        
       					}

     

       851
       869
        
       

     

       852
       870
        
       					const fileSize = file.size;

     
···

       909
       927
        
       					// Load transcripts from files for completed jobs

     

       910
       928
        
       					const jobs = await Promise.all(

     

       911
       929
        
       						transcriptions.map(async (t) => {

     

       912
       912
       -
       							let transcript: string | null = null;

     

       913
       913
       -
       							if (t.status === "completed") {

     

       914
       914
       -
       								transcript = await getTranscript(t.id);

     

       915
       915
       -
       							}

     

       916
       930
        
       							return {

     

       917
       931
        
       								id: t.id,

     

       918
       932
        
       								filename: t.original_filename,

     

       919
       933
        
       								status: t.status,

     

       920
       934
        
       								progress: t.progress,

     

       921
       921
       -
       								transcript,

     

       922
       935
        
       								created_at: t.created_at,

     

       923
       936
        
       							};

     

       924
       937
        
       						}),

     
···

       1101
       1114
        
       					const sessions = getSessionsForUser(userId);

     

       1102
       1115
        
       

     

       1103
       1116
        
       					// Get transcription count

     

       1104
       1104
       -
       					const transcriptionCount = db

     

       1105
       1105
       -
       						.query<{ count: number }, [number]>(

     

       1106
       1106
       -
       							"SELECT COUNT(*) as count FROM transcriptions WHERE user_id = ?",

     

       1107
       1107
       -
       						)

     

       1108
       1108
       -
       						.get(userId)?.count ?? 0;

     

       1117
       1117
       +
       					const transcriptionCount =

     

       1118
       1118
       +
       						db

     

       1119
       1119
       +
       							.query<{ count: number }, [number]>(

     

       1120
       1120
       +
       								"SELECT COUNT(*) as count FROM transcriptions WHERE user_id = ?",

     

       1121
       1121
       +
       							)

     

       1122
       1122
       +
       							.get(userId)?.count ?? 0;

     

       1109
       1123
        
       

     

       1110
       1124
        
       					return Response.json({

     

       1111
       1125
        
       						id: user.id,

     
···

       1295
       1309
        
       					}

     

       1296
       1310
        
       

     

       1297
       1311
        
       					return Response.json({ success: true });

     

       1312
       1312
       +
       				} catch (error) {

     

       1313
       1313
       +
       					return handleError(error);

     

       1314
       1314
       +
       				}

     

       1315
       1315
       +
       			},

     

       1316
       1316
       +
       		},

     

       1317
       1317
       +
       		"/api/admin/transcriptions/:id/details": {

     

       1318
       1318
       +
       			GET: async (req) => {

     

       1319
       1319
       +
       				try {

     

       1320
       1320
       +
       					requireAdmin(req);

     

       1321
       1321
       +
       					const transcriptionId = req.params.id;

     

       1322
       1322
       +
       

     

       1323
       1323
       +
       					const transcription = db

     

       1324
       1324
       +
       						.query<

     

       1325
       1325
       +
       							{

     

       1326
       1326
       +
       								id: string;

     

       1327
       1327
       +
       								original_filename: string;

     

       1328
       1328
       +
       								status: string;

     

       1329
       1329
       +
       								created_at: number;

     

       1330
       1330
       +
       								updated_at: number;

     

       1331
       1331
       +
       								error_message: string | null;

     

       1332
       1332
       +
       								user_id: number;

     

       1333
       1333
       +
       							},

     

       1334
       1334
       +
       							[string]

     

       1335
       1335
       +
       						>(

     

       1336
       1336
       +
       							"SELECT id, original_filename, status, created_at, updated_at, error_message, user_id FROM transcriptions WHERE id = ?",

     

       1337
       1337
       +
       						)

     

       1338
       1338
       +
       						.get(transcriptionId);

     

       1339
       1339
       +
       

     

       1340
       1340
       +
       					if (!transcription) {

     

       1341
       1341
       +
       						return Response.json(

     

       1342
       1342
       +
       							{ error: "Transcription not found" },

     

       1343
       1343
       +
       							{ status: 404 },

     

       1344
       1344
       +
       						);

     

       1345
       1345
       +
       					}

     

       1346
       1346
       +
       

     

       1347
       1347
       +
       					const user = db

     

       1348
       1348
       +
       						.query<{ email: string; name: string | null }, [number]>(

     

       1349
       1349
       +
       							"SELECT email, name FROM users WHERE id = ?",

     

       1350
       1350
       +
       						)

     

       1351
       1351
       +
       						.get(transcription.user_id);

     

       1352
       1352
       +
       

     

       1353
       1353
       +
       					return Response.json({

     

       1354
       1354
       +
       						id: transcription.id,

     

       1355
       1355
       +
       						original_filename: transcription.original_filename,

     

       1356
       1356
       +
       						status: transcription.status,

     

       1357
       1357
       +
       						created_at: transcription.created_at,

     

       1358
       1358
       +
       						completed_at: transcription.updated_at,

     

       1359
       1359
       +
       						error_message: transcription.error_message,

     

       1360
       1360
       +
       						user_id: transcription.user_id,

     

       1361
       1361
       +
       						user_email: user?.email || "Unknown",

     

       1362
       1362
       +
       						user_name: user?.name || null,

     

       1363
       1363
       +
       					});

     

       1298
       1364
        
       				} catch (error) {

     

       1299
       1365
        
       					return handleError(error);

     

       1300
       1366
        
       				}

-4

src/lib/transcript-storage.test.ts

···

       1
       1
        
       import { expect, test } from "bun:test";

     

       2
       2
        
       import {

     

       3
       3
       -
       	deleteTranscript,

     

       4
       4
       -
       	getTranscript,

     

       5
       3
        
       	getTranscriptVTT,

     

       6
       6
       -
       	hasTranscript,

     

       7
       7
       -
       	saveTranscript,

     

       8
       4
        
       	saveTranscriptVTT,

     

       9
       5
        
       } from "./transcript-storage";

     

       10
       6

-50

src/lib/transcript-storage.ts

···

       1
       1
        
       // File-based transcript storage to avoid SQLite size limits

     

       2
       2
        
       

     

       3
       3
       -
       import { unlinkSync } from "node:fs";

     

       4
       3
        
       import { basename } from "node:path";

     

       5
       4
        
       

     

       6
       5
        
       const TRANSCRIPTS_DIR = "./transcripts";

     
···

       23
       22
        
       		throw new Error("Invalid transcription ID: path traversal detected");

     

       24
       23
        
       	}

     

       25
       24
        
       	return safeName;

     

       26
       26
       -
       }

     

       27
       27
       -
       

     

       28
       28
       -
       /**

     

       29
       29
       -
        * Write transcript to file system

     

       30
       30
       -
        */

     

       31
       31
       -
       export async function saveTranscript(

     

       32
       32
       -
       	transcriptionId: string,

     

       33
       33
       -
       	transcript: string,

     

       34
       34
       -
       ): Promise<void> {

     

       35
       35
       -
       	const safeId = validateTranscriptionId(transcriptionId);

     

       36
       36
       -
       	const filePath = `${TRANSCRIPTS_DIR}/${safeId}.txt`;

     

       37
       37
       -
       	await Bun.write(filePath, transcript);

     

       38
       38
       -
       }

     

       39
       39
       -
       

     

       40
       40
       -
       /**

     

       41
       41
       -
        * Read transcript from file system

     

       42
       42
       -
        */

     

       43
       43
       -
       export async function getTranscript(

     

       44
       44
       -
       	transcriptionId: string,

     

       45
       45
       -
       ): Promise<string | null> {

     

       46
       46
       -
       	const safeId = validateTranscriptionId(transcriptionId);

     

       47
       47
       -
       	const filePath = `${TRANSCRIPTS_DIR}/${safeId}.txt`;

     

       48
       48
       -
       	try {

     

       49
       49
       -
       		return await Bun.file(filePath).text();

     

       50
       50
       -
       	} catch {

     

       51
       51
       -
       		return null;

     

       52
       52
       -
       	}

     

       53
       53
       -
       }

     

       54
       54
       -
       

     

       55
       55
       -
       /**

     

       56
       56
       -
        * Delete transcript file

     

       57
       57
       -
        */

     

       58
       58
       -
       export async function deleteTranscript(transcriptionId: string): Promise<void> {

     

       59
       59
       -
       	const safeId = validateTranscriptionId(transcriptionId);

     

       60
       60
       -
       	const filePath = `${TRANSCRIPTS_DIR}/${safeId}.txt`;

     

       61
       61
       -
       	try {

     

       62
       62
       -
       		unlinkSync(filePath);

     

       63
       63
       -
       	} catch {

     

       64
       64
       -
       		// File doesn't exist or already deleted

     

       65
       65
       -
       	}

     

       66
       66
       -
       }

     

       67
       67
       -
       

     

       68
       68
       -
       /**

     

       69
       69
       -
        * Check if transcript exists

     

       70
       70
       -
        */

     

       71
       71
       -
       export async function hasTranscript(transcriptionId: string): Promise<boolean> {

     

       72
       72
       -
       	const safeId = validateTranscriptionId(transcriptionId);

     

       73
       73
       -
       	const filePath = `${TRANSCRIPTS_DIR}/${safeId}.txt`;

     

       74
       74
       -
       	return await Bun.file(filePath).exists();

     

       75
       25
        
       }

     

       76
       26
        
       

     

       77
       27
        
       /**

+113 -13

src/pages/admin.html

···

       274
       274
        
             cursor: not-allowed;

     

       275
       275
        
           }

     

       276
       276
        
       

     

       277
       277
       -
           tbody tr {

     

       277
       277
       +
           .users-table tbody tr {

     

       278
       278
        
             cursor: pointer;

     

       279
       279
        
           }

     

       280
       280
        
       

     

       281
       281
       -
           tbody tr:hover {

     

       281
       281
       +
           .users-table tbody tr:hover {

     

       282
       282
       +
             background: rgba(0, 0, 0, 0.04);

     

       283
       283
       +
           }

     

       284
       284
       +
       

     

       285
       285
       +
           .transcriptions-table tbody tr {

     

       286
       286
       +
             cursor: pointer;

     

       287
       287
       +
           }

     

       288
       288
       +
       

     

       289
       289
       +
           .transcriptions-table tbody tr:hover {

     

       282
       290
        
             background: rgba(0, 0, 0, 0.04);

     

       283
       291
        
           }

     

       284
       292
        
       

     
···

       370
       378
        
             <div id="transcriptions-tab" class="tab-content active">

     

       371
       379
        
               <div class="section">

     

       372
       380
        
                 <h2 class="section-title">All Transcriptions</h2>

     

       373
       373
       -
                 <div id="transcriptions-table"></div>

     

       381
       381
       +
                 <input type="text" id="transcript-search" class="search" placeholder="Search by filename or user..." />

     

       382
       382
       +
                 <div id="transcriptions-table" class="transcriptions-table"></div>

     

       374
       383
        
               </div>

     

       375
       384
        
             </div>

     

       376
       385
        
       

     
···

       378
       387
        
               <div class="section">

     

       379
       388
        
                 <h2 class="section-title">All Users</h2>

     

       380
       389
        
                 <input type="text" id="user-search" class="search" placeholder="Search by name or email..." />

     

       381
       381
       -
                 <div id="users-table"></div>

     

       390
       390
       +
                 <div id="users-table" class="users-table"></div>

     

       382
       391
        
               </div>

     

       383
       392
        
             </div>

     

       384
       393
        
           </div>

     

       385
       394
        
         </main>

     

       386
       395
        
       

     

       387
       396
        
         <user-modal id="user-modal"></user-modal>

     

       397
       397
       +
         <transcript-modal id="transcript-modal"></transcript-modal>

     

       388
       398
        
       

     

       389
       399
        
         <script type="module" src="../components/auth.ts"></script>

     

       390
       400
        
         <script type="module" src="../components/user-modal.ts"></script>

     

       401
       401
       +
         <script type="module" src="../components/transcript-view-modal.ts"></script>

     

       391
       402
        
         <script type="module">

     

       392
       403
        
           const errorMessage = document.getElementById('error-message');

     

       393
       404
        
           const loading = document.getElementById('loading');

     
···

       395
       406
        
           const transcriptionsTable = document.getElementById('transcriptions-table');

     

       396
       407
        
           const usersTable = document.getElementById('users-table');

     

       397
       408
        
           const userModal = document.getElementById('user-modal');

     

       409
       409
       +
           const transcriptModal = document.getElementById('transcript-modal');

     

       398
       410
        
       

     

       399
       411
        
           let currentUserEmail = null;

     

       400
       412
        
           let allUsers = [];

     

       413
       413
       +
           let allTranscriptions = [];

     

       401
       414
        
           let userSortKey = 'created_at';

     

       402
       415
        
           let userSortDirection = 'desc';

     

       403
       416
        
           let userSearchTerm = '';

     

       417
       417
       +
           let transcriptSortKey = 'created_at';

     

       418
       418
       +
           let transcriptSortDirection = 'desc';

     

       419
       419
       +
           let transcriptSearchTerm = '';

     

       404
       420
        
       

     

       405
       421
        
           // Get current user info

     

       406
       422
        
           async function getCurrentUser() {

     
···

       437
       453
        
             userModal.userId = null;

     

       438
       454
        
           }

     

       439
       455
        
       

     

       456
       456
       +
           function openTranscriptModal(transcriptId) {

     

       457
       457
       +
             transcriptModal.setAttribute('open', '');

     

       458
       458
       +
             transcriptModal.transcriptId = transcriptId;

     

       459
       459
       +
           }

     

       460
       460
       +
       

     

       461
       461
       +
           function closeTranscriptModal() {

     

       462
       462
       +
             transcriptModal.removeAttribute('open');

     

       463
       463
       +
             transcriptModal.transcriptId = null;

     

       464
       464
       +
           }

     

       465
       465
       +
       

     

       440
       466
        
           // Listen for modal close and user update events

     

       441
       467
        
           userModal.addEventListener('close', closeUserModal);

     

       442
       468
        
           userModal.addEventListener('user-updated', () => loadData());

     
···

       446
       472
        
             }

     

       447
       473
        
           });

     

       448
       474
        
       

     

       475
       475
       +
           // Listen for transcript modal events

     

       476
       476
       +
           transcriptModal.addEventListener('close', closeTranscriptModal);

     

       477
       477
       +
           transcriptModal.addEventListener('transcript-deleted', () => loadData());

     

       478
       478
       +
           transcriptModal.addEventListener('click', (e) => {

     

       479
       479
       +
             if (e.target === transcriptModal) {

     

       480
       480
       +
               closeTranscriptModal();

     

       481
       481
       +
             }

     

       482
       482
       +
           });

     

       483
       483
       +
       

     

       449
       484
        
       

     

       450
       485
        
           function renderTranscriptions(transcriptions) {

     

       451
       451
       -
             if (transcriptions.length === 0) {

     

       452
       452
       -
               transcriptionsTable.innerHTML = '<div class="empty-state">No transcriptions yet</div>';

     

       486
       486
       +
             allTranscriptions = transcriptions;

     

       487
       487
       +
       

     

       488
       488
       +
             // Filter transcriptions based on search term

     

       489
       489
       +
             let filteredTranscriptions = transcriptions.filter(t => {

     

       490
       490
       +
               if (!transcriptSearchTerm) return true;

     

       491
       491
       +
               const term = transcriptSearchTerm.toLowerCase();

     

       492
       492
       +
               const filename = (t.original_filename || '').toLowerCase();

     

       493
       493
       +
               const userName = (t.user_name || '').toLowerCase();

     

       494
       494
       +
               const userEmail = (t.user_email || '').toLowerCase();

     

       495
       495
       +
               return filename.includes(term) || userName.includes(term) || userEmail.includes(term);

     

       496
       496
       +
             });

     

       497
       497
       +
       

     

       498
       498
       +
             // Sort transcriptions

     

       499
       499
       +
             filteredTranscriptions.sort((a, b) => {

     

       500
       500
       +
               let aVal = a[transcriptSortKey];

     

       501
       501
       +
               let bVal = b[transcriptSortKey];

     

       502
       502
       +
       

     

       503
       503
       +
               // Handle null values

     

       504
       504
       +
               if (aVal === null || aVal === undefined) aVal = '';

     

       505
       505
       +
               if (bVal === null || bVal === undefined) bVal = '';

     

       506
       506
       +
       

     

       507
       507
       +
               let comparison = 0;

     

       508
       508
       +
               if (typeof aVal === 'string' && typeof bVal === 'string') {

     

       509
       509
       +
                 comparison = aVal.localeCompare(bVal);

     

       510
       510
       +
               } else if (typeof aVal === 'number' && typeof bVal === 'number') {

     

       511
       511
       +
                 comparison = aVal - bVal;

     

       512
       512
       +
               } else {

     

       513
       513
       +
                 comparison = String(aVal).localeCompare(String(bVal));

     

       514
       514
       +
               }

     

       515
       515
       +
       

     

       516
       516
       +
               return transcriptSortDirection === 'asc' ? comparison : -comparison;

     

       517
       517
       +
             });

     

       518
       518
       +
       

     

       519
       519
       +
             if (filteredTranscriptions.length === 0) {

     

       520
       520
       +
               transcriptionsTable.innerHTML = '<div class="empty-state">No transcriptions found</div>';

     

       453
       521
        
               return;

     

       454
       522
        
             }

     

       455
       523
        
       

     
···

       460
       528
        
             table.innerHTML = `

     

       461
       529
        
               <thead>

     

       462
       530
        
                 <tr>

     

       463
       463
       -
                   <th>File Name</th>

     

       531
       531
       +
                   <th class="sortable ${transcriptSortKey === 'original_filename' ? transcriptSortDirection : ''}" data-sort="original_filename">File Name</th>

     

       464
       532
        
                   <th>User</th>

     

       465
       465
       -
                   <th>Status</th>

     

       466
       466
       -
                   <th>Created At</th>

     

       467
       467
       -
                   <th>Error</th>

     

       533
       533
       +
                   <th class="sortable ${transcriptSortKey === 'status' ? transcriptSortDirection : ''}" data-sort="status">Status</th>

     

       534
       534
       +
                   <th class="sortable ${transcriptSortKey === 'created_at' ? transcriptSortDirection : ''}" data-sort="created_at">Created At</th>

     

       468
       535
        
                   <th>Actions</th>

     

       469
       536
        
                 </tr>

     

       470
       537
        
               </thead>

     

       471
       538
        
               <tbody>

     

       472
       472
       -
                 ${transcriptions.map(t => `

     

       473
       473
       -
                   <tr>

     

       539
       539
       +
                 ${filteredTranscriptions.map(t => `

     

       540
       540
       +
                   <tr data-id="${t.id}">

     

       474
       541
        
                     <td>${t.original_filename}</td>

     

       475
       542
        
                     <td>

     

       476
       543
        
                       <div class="user-info">

     
···

       484
       551
        
                     </td>

     

       485
       552
        
                     <td><span class="status-badge status-${t.status}">${t.status}</span></td>

     

       486
       553
        
                     <td class="timestamp">${formatTimestamp(t.created_at)}</td>

     

       487
       487
       -
                     <td>${t.error_message || '-'}</td>

     

       488
       554
        
                     <td>

     

       489
       555
        
                       <button class="delete-btn" data-id="${t.id}">Delete</button>

     

       490
       556
        
                     </td>

     
···

       495
       561
        
             transcriptionsTable.innerHTML = '';

     

       496
       562
        
             transcriptionsTable.appendChild(table);

     

       497
       563
        
       

     

       564
       564
       +
             // Add sort event listeners

     

       565
       565
       +
             table.querySelectorAll('th.sortable').forEach(th => {

     

       566
       566
       +
               th.addEventListener('click', () => {

     

       567
       567
       +
                 const sortKey = th.dataset.sort;

     

       568
       568
       +
                 if (transcriptSortKey === sortKey) {

     

       569
       569
       +
                   transcriptSortDirection = transcriptSortDirection === 'asc' ? 'desc' : 'asc';

     

       570
       570
       +
                 } else {

     

       571
       571
       +
                   transcriptSortKey = sortKey;

     

       572
       572
       +
                   transcriptSortDirection = 'asc';

     

       573
       573
       +
                 }

     

       574
       574
       +
                 renderTranscriptions(allTranscriptions);

     

       575
       575
       +
               });

     

       576
       576
       +
             });

     

       577
       577
       +
       

     

       498
       578
        
             // Add delete event listeners

     

       499
       579
        
             table.querySelectorAll('.delete-btn').forEach(btn => {

     

       500
       580
        
               btn.addEventListener('click', async (e) => {

     

       581
       581
       +
                 e.stopPropagation(); // Prevent row click

     

       501
       582
        
                 const button = e.target;

     

       502
       583
        
                 const id = button.dataset.id;

     

       503
       584
        
       

     
···

       524
       605
        
                   button.disabled = false;

     

       525
       606
        
                   button.textContent = 'Delete';

     

       526
       607
        
                 }

     

       608
       608
       +
               });

     

       609
       609
       +
             });

     

       610
       610
       +
       

     

       611
       611
       +
             // Add click event to table rows to open modal

     

       612
       612
       +
             table.querySelectorAll('tbody tr').forEach(row => {

     

       613
       613
       +
               row.addEventListener('click', (e) => {

     

       614
       614
       +
                 // Don't open modal if clicking on delete button

     

       615
       615
       +
                 if (e.target.closest('.delete-btn')) {

     

       616
       616
       +
                   return;

     

       617
       617
       +
                 }

     

       618
       618
       +
                 

     

       619
       619
       +
                 const transcriptId = row.dataset.id;

     

       620
       620
       +
                 openTranscriptModal(transcriptId);

     

       527
       621
        
               });

     

       528
       622
        
             });

     

       529
       623
        
           }

     
···

       785
       879
        
           document.getElementById('user-search').addEventListener('input', (e) => {

     

       786
       880
        
             userSearchTerm = e.target.value.trim();

     

       787
       881
        
             renderUsers(allUsers);

     

       882
       882
       +
           });

     

       883
       883
       +
       

     

       884
       884
       +
           // Transcript search

     

       885
       885
       +
           document.getElementById('transcript-search').addEventListener('input', (e) => {

     

       886
       886
       +
             transcriptSearchTerm = e.target.value.trim();

     

       887
       887
       +
             renderTranscriptions(allTranscriptions);

     

       788
       888
        
           });

     

       789
       889
        
       

     

       790
       890
        
           // Initialize