From 16d245677092db61c86258204c3af6a8f64337d7 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Sun, 10 May 2026 13:33:10 +0200
Subject: [PATCH] feat: trim-VOD dialog i18n + Twitch API help link + log file
 shortcut

Three small UX wins.

1. Trim-VOD dialog: every inner label was hardcoded German in
   index.html (Start:, Ende:, Startzeit (HH:MM:SS):, Dauer:, Start
   Part-Nummer..., Leer lassen = Teil 1, Dateinamen-Format:, Zur
   Queue hinzufuegen). EN-mode users had a German dialog. Each
   element now has an id + setText wiring + DE/EN locale strings.

2. Settings -> Twitch API card now opens with a help line + link
   to dev.twitch.tv/console/apps. Uses window.api.openExternal so
   the link opens in the user's default browser instead of the
   Electron renderer (which has nodeIntegration off / no native
   navigation). Fixes the "no idea how to set this up" first-run
   friction.

3. Settings -> Live Debug Log gets an "Open log file" button next
   to Refresh. Uses a new ipcMain handle (open-debug-log-file ->
   shell.showItemInFolder on DEBUG_LOG_FILE) so users no longer
   have to navigate manually to ProgramData. As a small defensive
   bundle:
   - get-debug-log: lines parameter capped at [1, 5000] so a
     misbehaving renderer (or future feature) cannot ask main to
     slice millions of lines.
   - export-runtime-metrics: now uses writeFileAtomicSync (the
     fsync+rename helper from cycle 1) instead of plain
     writeFileSync so a power loss mid-export cannot leave a
     half-written metrics file at the user-chosen path.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.html            | 23 ++++++++++++++---------
 src/main.ts               | 16 ++++++++++++++--
 src/preload.ts            |  1 +
 src/renderer-globals.d.ts |  1 +
 src/renderer-locale-de.ts | 12 ++++++++++++
 src/renderer-locale-en.ts | 12 ++++++++++++
 src/renderer-settings.ts  |  8 ++++++++
 src/renderer-texts.ts     | 12 ++++++++++++
 src/renderer.ts           |  4 ++++
 9 files changed, 78 insertions(+), 11 deletions(-)

diff --git a/src/index.html b/src/index.html
index 1b16ef6..b3f398b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -53,12 +53,12 @@
 
             <!-- Start Zeit mit Slider -->
             <div style="margin-bottom: 15px;">
-                <label style="display: block; margin-bottom: 5px;">Start:</label>
+                <label id="clipDialogStartLabel" style="display: block; margin-bottom: 5px;">Start:</label>
                 <input type="range" id="clipStartSlider" min="0" max="100" value="0"
                     style="width: 100%; height: 6px; -webkit-appearance: none; background: #1a1a1a; border-radius: 3px; cursor: pointer;"
                     oninput="updateFromSlider('start')">
                 <div style="display: flex; align-items: center; gap: 10px; margin-top: 8px;">
-                    <label style="color: #888;">Startzeit (HH:MM:SS):</label>
+                    <label id="clipDialogStartTimeLabel" style="color: #888;">Startzeit (HH:MM:SS):</label>
                     <input type="text" id="clipStartTime" value="00:00:00"
                         style="width: 100px; background: #333; border: 1px solid #444; border-radius: 4px; padding: 6px 10px; color: white; font-family: monospace; text-align: center;"
                         onchange="updateFromInput('start')">
@@ -67,12 +67,12 @@
 
             <!-- End Zeit mit Slider -->
             <div style="margin-bottom: 15px;">
-                <label style="display: block; margin-bottom: 5px;">Ende:</label>
+                <label id="clipDialogEndLabel" style="display: block; margin-bottom: 5px;">Ende:</label>
                 <input type="range" id="clipEndSlider" min="0" max="100" value="60"
                     style="width: 100%; height: 6px; -webkit-appearance: none; background: #1a1a1a; border-radius: 3px; cursor: pointer;"
                     oninput="updateFromSlider('end')">
                 <div style="display: flex; align-items: center; gap: 10px; margin-top: 8px;">
-                    <label style="color: #888;">Endzeit (HH:MM:SS):</label>
+                    <label id="clipDialogEndTimeLabel" style="color: #888;">Endzeit (HH:MM:SS):</label>
                     <input type="text" id="clipEndTime" value="00:01:00"
                         style="width: 100px; background: #333; border: 1px solid #444; border-radius: 4px; padding: 6px 10px; color: white; font-family: monospace; text-align: center;"
                         onchange="updateFromInput('end')">
@@ -81,22 +81,22 @@
 
             <!-- Dauer Anzeige -->
             <div style="text-align: center; margin-bottom: 20px;">
-                <span style="color: #888;">Dauer: </span>
+                <span id="clipDialogDurationLabel" style="color: #888;">Dauer: </span>
                 <span id="clipDurationDisplay" style="color: #00c853;">00:01:00</span>
             </div>
 
             <!-- Teil Nummer -->
             <div style="margin-bottom: 15px;">
-                <label style="display: block; margin-bottom: 8px;">Start Part-Nummer (optional, fur Fortsetzung):</label>
+                <label id="clipDialogPartLabel" style="display: block; margin-bottom: 8px;">Start Part-Nummer (optional, fur Fortsetzung):</label>
                 <input type="text" id="clipStartPart" placeholder="z.B. 42"
                     style="width: 100px; background: #333; border: 1px solid #444; border-radius: 4px; padding: 8px 12px; color: white;"
                     oninput="updateFilenameExamples()">
-                <div style="color: #888; font-size: 12px; margin-top: 5px;">Leer lassen = Teil 1</div>
+                <div id="clipDialogPartHint" style="color: #888; font-size: 12px; margin-top: 5px;">Leer lassen = Teil 1</div>
             </div>
 
             <!-- Dateinamen Format -->
             <div style="margin-bottom: 20px;">
-                <label style="display: block; margin-bottom: 10px;">Dateinamen-Format:</label>
+                <label id="clipDialogFormatLabel" style="display: block; margin-bottom: 10px;">Dateinamen-Format:</label>
                 <label style="display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 8px;">
                     <input type="radio" name="filenameFormat" value="simple" checked onchange="updateFilenameExamples()"
                         style="width: 18px; height: 18px; accent-color: #9146FF;">
@@ -131,7 +131,7 @@
 
             <!-- Button -->
             <div style="text-align: center;">
-                <button class="btn-primary" style="background: #00c853; padding: 12px 30px; border: none; border-radius: 4px; color: white; font-weight: 600; cursor: pointer;" onclick="confirmClipDialog()">Zur Queue hinzufugen</button>
+                <button class="btn-primary" id="clipDialogConfirmBtn" style="background: #00c853; padding: 12px 30px; border: none; border-radius: 4px; color: white; font-weight: 600; cursor: pointer;" onclick="confirmClipDialog()">Zur Queue hinzufugen</button>
             </div>
         </div>
     </div>
@@ -429,6 +429,10 @@
 
                     <div class="settings-card">
                         <h3 id="apiTitle">Twitch API</h3>
+                        <p id="apiHelpText" style="color: var(--text-secondary); font-size:13px; margin-bottom:12px; line-height:1.5;">
+                            <span id="apiHelpIntro">Du brauchst eine Client-ID und ein Client-Secret von Twitch.</span>
+                            <a href="#" id="apiHelpLink" onclick="event.preventDefault(); openTwitchDevConsole()" style="color: var(--accent); text-decoration: underline; cursor: pointer;">dev.twitch.tv/console/apps</a>
+                        </p>
                         <div class="form-group">
                             <label id="clientIdLabel">Client ID</label>
                             <input type="text" id="clientId" placeholder="Twitch Client ID">
@@ -541,6 +545,7 @@
                         <h3 id="debugLogTitle">Live Debug-Log</h3>
                         <div class="form-row" style="margin-bottom: 10px; align-items: center;">
                             <button class="btn-secondary" id="btnRefreshLog" onclick="refreshDebugLog()">Aktualisieren</button>
+                            <button class="btn-secondary" id="btnOpenDebugLogFile" onclick="openDebugLogFile()">Log-Datei oeffnen</button>
                             <label style="display:flex; align-items:center; gap:6px; font-size:13px; color: var(--text-secondary);">
                                 <input type="checkbox" id="debugAutoRefresh" onchange="toggleDebugAutoRefresh(this.checked)">
                                 <span id="autoRefreshText">Auto-Refresh</span>
diff --git a/src/main.ts b/src/main.ts
index 32016e7..c633aa4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4146,7 +4146,16 @@ ipcMain.handle('run-preflight', async (_, autoFix: boolean = false) => {
 });
 
 ipcMain.handle('get-debug-log', async (_, lines: number = 200) => {
-    return readDebugLog(lines);
+    // Cap so a misbehaving renderer (or future feature) cannot ask the
+    // main process to slice millions of lines from a multi-MB log.
+    const safeLines = Number.isFinite(lines) ? Math.max(1, Math.min(5000, Math.floor(lines))) : 200;
+    return readDebugLog(safeLines);
+});
+
+ipcMain.handle('open-debug-log-file', (): boolean => {
+    if (!fs.existsSync(DEBUG_LOG_FILE)) return false;
+    shell.showItemInFolder(DEBUG_LOG_FILE);
+    return true;
 });
 
 ipcMain.handle('is-downloading', () => isDownloading);
@@ -4169,7 +4178,10 @@ ipcMain.handle('export-runtime-metrics', async () => {
         }
 
         const snapshot = getRuntimeMetricsSnapshot();
-        fs.writeFileSync(dialogResult.filePath, JSON.stringify(snapshot, null, 2), 'utf-8');
+        // Atomic write: same fsync+rename pattern used for config/queue
+        // (cycle 1) so a power loss mid-export can't leave a half-written
+        // metrics file at the user's chosen path.
+        writeFileAtomicSync(dialogResult.filePath, JSON.stringify(snapshot, null, 2));
         return { success: true, filePath: dialogResult.filePath };
     } catch (e) {
         appendDebugLog('runtime-metrics-export-failed', String(e));
diff --git a/src/preload.ts b/src/preload.ts
index e4706ba..a6cdc2c 100644
--- a/src/preload.ts
+++ b/src/preload.ts
@@ -85,6 +85,7 @@ contextBridge.exposeInMainWorld('api', {
     openFolder: (path: string) => ipcRenderer.invoke('open-folder', path),
     openFile: (path: string) => ipcRenderer.invoke('open-file', path),
     showInFolder: (path: string) => ipcRenderer.invoke('show-in-folder', path),
+    openDebugLogFile: () => ipcRenderer.invoke('open-debug-log-file'),
 
     // Video Cutter
     getVideoInfo: (filePath: string): Promise<VideoInfo | null> => ipcRenderer.invoke('get-video-info', filePath),
diff --git a/src/renderer-globals.d.ts b/src/renderer-globals.d.ts
index 65ea9b7..6c6357b 100644
--- a/src/renderer-globals.d.ts
+++ b/src/renderer-globals.d.ts
@@ -200,6 +200,7 @@ interface ApiBridge {
     openFolder(path: string): Promise<void>;
     openFile(path: string): Promise<boolean>;
     showInFolder(path: string): Promise<boolean>;
+    openDebugLogFile(): Promise<boolean>;
     getVideoInfo(filePath: string): Promise<VideoInfo | null>;
     extractFrame(filePath: string, timeSeconds: number): Promise<string | null>;
     cutVideo(inputFile: string, startTime: number, endTime: number): Promise<{ success: boolean; outputFile: string | null }>;
diff --git a/src/renderer-locale-de.ts b/src/renderer-locale-de.ts
index c107838..086c9f0 100644
--- a/src/renderer-locale-de.ts
+++ b/src/renderer-locale-de.ts
@@ -51,6 +51,9 @@ const UI_TEXT_DE = {
         smartSchedulerLabel: 'Smart Queue Scheduler aktivieren',
         smartSchedulerHint: 'Bevorzugt kuerzere VODs und aeltere Queue-Eintraege zuerst, damit der Durchsatz gleichmaessig bleibt. Deaktivieren = strikte Einfuegereihenfolge.',
         streamerInvalid: 'Twitch-Username ungueltig (4-25 Zeichen, Buchstaben/Zahlen/Unterstrich).',
+        apiHelpIntro: 'Du brauchst eine Client-ID und ein Client-Secret von Twitch.',
+        apiHelpLinkText: 'dev.twitch.tv/console/apps',
+        openDebugLogFile: 'Log-Datei oeffnen',
         duplicatePreventionLabel: 'Duplikate in Queue verhindern',
         persistQueueLabel: 'Queue zwischen App-Starts speichern',
         metadataCacheMinutesLabel: 'Metadata-Cache (Minuten)',
@@ -190,6 +193,15 @@ const UI_TEXT_DE = {
     },
     clips: {
         dialogTitle: 'VOD zuschneiden',
+        dialogStart: 'Start:',
+        dialogStartTime: 'Startzeit (HH:MM:SS):',
+        dialogEnd: 'Ende:',
+        dialogEndTime: 'Endzeit (HH:MM:SS):',
+        dialogDuration: 'Dauer: ',
+        dialogPartLabel: 'Start Part-Nummer (optional, fur Fortsetzung):',
+        dialogPartHint: 'Leer lassen = Teil 1',
+        dialogFormatLabel: 'Dateinamen-Format:',
+        dialogConfirm: 'Zur Queue hinzufuegen',
         invalidDuration: 'Ungultig!',
         endBeforeStart: 'Endzeit muss grosser als Startzeit sein!',
         outOfRange: 'Zeit ausserhalb des VOD-Bereichs!',
diff --git a/src/renderer-locale-en.ts b/src/renderer-locale-en.ts
index 083d570..3ceaf00 100644
--- a/src/renderer-locale-en.ts
+++ b/src/renderer-locale-en.ts
@@ -51,6 +51,9 @@ const UI_TEXT_EN = {
         smartSchedulerLabel: 'Enable smart queue scheduler',
         smartSchedulerHint: 'Prefers shorter VODs and older queue entries first so the queue throughput stays steady. Disable to drain in strict insertion order.',
         streamerInvalid: 'Invalid Twitch username (4-25 chars, letters/digits/underscore).',
+        apiHelpIntro: 'You need a Client ID and Client Secret from Twitch.',
+        apiHelpLinkText: 'dev.twitch.tv/console/apps',
+        openDebugLogFile: 'Open log file',
         duplicatePreventionLabel: 'Prevent duplicate queue entries',
         persistQueueLabel: 'Keep queue between app restarts',
         metadataCacheMinutesLabel: 'Metadata Cache (Minutes)',
@@ -190,6 +193,15 @@ const UI_TEXT_EN = {
     },
     clips: {
         dialogTitle: 'Trim VOD',
+        dialogStart: 'Start:',
+        dialogStartTime: 'Start time (HH:MM:SS):',
+        dialogEnd: 'End:',
+        dialogEndTime: 'End time (HH:MM:SS):',
+        dialogDuration: 'Duration: ',
+        dialogPartLabel: 'Start part number (optional, for continuation):',
+        dialogPartHint: 'Leave empty = part 1',
+        dialogFormatLabel: 'Filename format:',
+        dialogConfirm: 'Add to queue',
         invalidDuration: 'Invalid!',
         endBeforeStart: 'End time must be greater than start time!',
         outOfRange: 'Time is outside VOD range!',
diff --git a/src/renderer-settings.ts b/src/renderer-settings.ts
index 7a992d5..78360d3 100644
--- a/src/renderer-settings.ts
+++ b/src/renderer-settings.ts
@@ -265,6 +265,14 @@ async function runPreflight(autoFix = false): Promise<void> {
     }
 }
 
+async function openDebugLogFile(): Promise<void> {
+    const ok = await window.api.openDebugLogFile();
+    if (!ok) {
+        const toast = (window as unknown as { showAppToast?: (msg: string, kind?: 'info' | 'warn') => void }).showAppToast;
+        if (toast) toast('Debug log file not yet present.', 'warn');
+    }
+}
+
 async function refreshDebugLog(): Promise<void> {
     const text = await window.api.getDebugLog(250);
     const panel = byId('debugLogOutput');
diff --git a/src/renderer-texts.ts b/src/renderer-texts.ts
index 3853b64..8b141d9 100644
--- a/src/renderer-texts.ts
+++ b/src/renderer-texts.ts
@@ -61,6 +61,15 @@ function applyLanguageToStaticUI(): void {
     setText('clipsInfoText', UI_TEXT.static.clipsInfoText);
     setText('clipTemplateHelp', UI_TEXT.clips.templateHelp);
     setPlaceholder('clipFilenameTemplate', UI_TEXT.clips.templatePlaceholder);
+    setText('clipDialogStartLabel', UI_TEXT.clips.dialogStart);
+    setText('clipDialogStartTimeLabel', UI_TEXT.clips.dialogStartTime);
+    setText('clipDialogEndLabel', UI_TEXT.clips.dialogEnd);
+    setText('clipDialogEndTimeLabel', UI_TEXT.clips.dialogEndTime);
+    setText('clipDialogDurationLabel', UI_TEXT.clips.dialogDuration);
+    setText('clipDialogPartLabel', UI_TEXT.clips.dialogPartLabel);
+    setText('clipDialogPartHint', UI_TEXT.clips.dialogPartHint);
+    setText('clipDialogFormatLabel', UI_TEXT.clips.dialogFormatLabel);
+    setText('clipDialogConfirmBtn', UI_TEXT.clips.dialogConfirm);
     setText('cutterSelectTitle', UI_TEXT.static.cutterSelectTitle);
     setText('cutterBrowseBtn', UI_TEXT.static.cutterBrowse);
     setText('mergeTitle', UI_TEXT.static.mergeTitle);
@@ -73,6 +82,8 @@ function applyLanguageToStaticUI(): void {
     setText('languageDeText', UI_TEXT.static.languageDe);
     setText('languageEnText', UI_TEXT.static.languageEn);
     setText('apiTitle', UI_TEXT.static.apiTitle);
+    setText('apiHelpIntro', UI_TEXT.static.apiHelpIntro);
+    setText('apiHelpLink', UI_TEXT.static.apiHelpLinkText);
     setText('clientIdLabel', UI_TEXT.static.clientIdLabel);
     setText('clientSecretLabel', UI_TEXT.static.clientSecretLabel);
     setText('saveSettingsBtn', UI_TEXT.static.saveSettings);
@@ -129,6 +140,7 @@ function applyLanguageToStaticUI(): void {
     setText('preflightResult', UI_TEXT.static.preflightEmpty);
     setText('debugLogTitle', UI_TEXT.static.debugLogTitle);
     setText('btnRefreshLog', UI_TEXT.static.refreshLog);
+    setText('btnOpenDebugLogFile', UI_TEXT.static.openDebugLogFile);
     setText('autoRefreshText', UI_TEXT.static.autoRefresh);
     setText('runtimeMetricsTitle', UI_TEXT.static.runtimeMetricsTitle);
     setText('btnRefreshMetrics', UI_TEXT.static.runtimeMetricsRefresh);
diff --git a/src/renderer.ts b/src/renderer.ts
index d428b7e..8810bd2 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -208,6 +208,10 @@ async function init(): Promise<void> {
     scheduleQueueSync(QUEUE_SYNC_DEFAULT_MS);
 }
 
+function openTwitchDevConsole(): void {
+    void window.api.openExternal('https://dev.twitch.tv/console/apps');
+}
+
 function closeTopmostOpenModal(): boolean {
     // Try each known modal in priority order: clip dialog, template guide, update modal
     const clipModal = document.getElementById('clipModal');