release: 4.6.155 aria-live on clipStatus + viewer-modal status fields

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
a11y: aria-live=polite on clipStatus + chatViewer/eventsViewer status
2026-05-11 12:17:04 +02:00 · 2026-05-11 12:16:49 +02:00 · 2026-05-11 12:11:27 +02:00 · 2026-05-11 12:11:13 +02:00 · 2026-05-11 12:06:58 +02:00 · 2026-05-11 12:06:40 +02:00
12 changed files with 131 additions and 58 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "twitch-vod-manager",
-  "version": "4.6.134",
+  "version": "4.6.155",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "twitch-vod-manager",
-      "version": "4.6.134",
+      "version": "4.6.155",
      "license": "MIT",
      "dependencies": {
        "axios": "^1.6.0",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "twitch-vod-manager",
-  "version": "4.6.134",
+  "version": "4.6.155",
  "description": "Twitch VOD Manager - Download Twitch VODs easily",
  "main": "dist/main.js",
  "author": "xRangerDE",
--- a/src/index.html
+++ b/src/index.html
@ -10,7 +10,7 @@
 <body class="theme-twitch">
    <div class="update-banner" id="updateBanner">
        <span id="updateText">Neue Version verfügbar!</span>
-        <div id="updateProgress" class="update-banner-progress-wrap" style="display: none;">
+        <div id="updateProgress" class="update-banner-progress-wrap is-hidden">
            <div class="update-banner-progress-track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-label="Update download" id="updateProgressGauge">
                <div id="updateProgressBar" class="update-banner-progress-bar"></div>
            </div>
@ -24,9 +24,9 @@
            <div class="update-modal-eyebrow" id="updateModalEyebrow">Updates</div>
            <h2 id="updateModalTitle">Update verfugbar</h2>
            <p class="update-modal-message" id="updateModalMessage">Version 0.0.0 ist verfugbar. Jetzt herunterladen?</p>
-            <div class="update-modal-meta" id="updateModalMeta" style="display:none;"></div>
+            <div class="update-modal-meta is-hidden" id="updateModalMeta"></div>
-            <div class="update-changelog-card" id="updateChangelogCard" style="display:none;">
+            <div class="update-changelog-card is-hidden" id="updateChangelogCard">
                <div class="update-changelog-header">
                    <span class="update-changelog-label" id="updateChangelogLabel">Changelog</span>
                    <button type="button" class="update-changelog-toggle" id="updateChangelogToggle" onclick="toggleUpdateChangelog()">Changelog anzeigen</button>
@ -118,7 +118,7 @@
        <div class="modal viewer-modal viewer-modal-events">
            <button type="button" class="modal-close modal-close-localizable" aria-label="Close" onclick="closeEventsViewer()">x</button>
            <h2 id="eventsViewerTitle" class="viewer-modal-title"></h2>
-            <div id="eventsViewerStatus" class="viewer-modal-status"></div>
+            <div id="eventsViewerStatus" class="viewer-modal-status" role="status" aria-live="polite"></div>
            <div id="eventsViewerList" class="viewer-modal-list"></div>
        </div>
    </div>
@ -130,7 +130,7 @@
            <h2 id="chatViewerTitle" class="viewer-modal-title"></h2>
            <div class="viewer-modal-filter-row">
                <input type="text" id="chatViewerFilter" class="viewer-modal-filter-input" placeholder="Filter..." oninput="onChatViewerFilterChange()">
-                <span id="chatViewerStatus" class="viewer-modal-status viewer-modal-status-inline"></span>
+                <span id="chatViewerStatus" class="viewer-modal-status viewer-modal-status-inline" role="status" aria-live="polite"></span>
            </div>
            <div id="chatViewerList" class="viewer-modal-list viewer-modal-list-chat"></div>
        </div>
@ -221,9 +221,9 @@
                    <span id="streamerSectionTitleText">Streamer</span>
                    <span id="streamerSectionCounter" class="streamer-section-counter"></span>
                </span>
-                <button id="btnStreamerBulkRemove" class="btn-close" type="button" onclick="bulkRemoveStreamers()" title="Bulk remove" style="display:none;">x</button>
+                <button id="btnStreamerBulkRemove" class="btn-close is-hidden" type="button" onclick="bulkRemoveStreamers()" title="Bulk remove">x</button>
            </div>
-            <input type="text" id="streamerListFilter" class="filter-input compact" placeholder="Filter..." oninput="onStreamerListFilterChange()" style="display:none;">
+            <input type="text" id="streamerListFilter" class="filter-input compact is-hidden" placeholder="Filter..." oninput="onStreamerListFilterChange()">
            <div class="streamers" id="streamerList"></div>
            <div class="queue-section">
@ -260,7 +260,7 @@
            <div class="content">
                <!-- VODs Tab -->
                <div class="tab-content active" id="vodsTab">
-                    <div id="streamerProfileHeader" class="streamer-profile-header" style="display:none;"></div>
+                    <div id="streamerProfileHeader" class="streamer-profile-header is-hidden"></div>
                    <div class="vod-filter-row">
                        <input type="text" id="vodFilterInput" class="filter-input" placeholder="Filter VODs..." oninput="onVodFilterInput()">
                        <button type="button" id="vodFilterClearBtn" class="btn-close is-hidden" onclick="clearVodFilter()" title="Clear filter">x</button>
@ -301,7 +301,7 @@
                        <h2 id="clipsHeading">Twitch Clip-Download</h2>
                        <input type="text" id="clipUrl" placeholder="https://clips.twitch.tv/... oder https://www.twitch.tv/.../clip/...">
                        <button type="button" class="btn-primary" onclick="downloadClip()" id="btnClip">Clip herunterladen</button>
-                        <div class="clip-status" id="clipStatus"></div>
+                        <div class="clip-status" id="clipStatus" role="status" aria-live="polite"></div>
                    </div>
                    <div class="settings-card centered">
@ -422,7 +422,7 @@
                        <div class="form-row section-header">
                            <h3 id="statsTitle">Archiv-Statistik</h3>
                            <div class="section-header-actions">
-                                <span id="statsLastScannedLabel" class="form-sublabel"></span>
+                                <span id="statsLastScannedLabel" class="form-sublabel" role="status" aria-live="polite"></span>
                                <button type="button" class="btn-secondary" id="btnStatsRefresh" onclick="refreshArchiveStats()">Aktualisieren</button>
                            </div>
                        </div>
@ -455,14 +455,14 @@
                    <div class="settings-card">
                        <h3 id="archiveTitle">Archiv durchsuchen</h3>
                        <p id="archiveIntro" class="card-intro">Suche nach Dateinamen, Streamern oder Datum-Strings. Treffer zeigen Recordings (Live + VOD); zugehoerige Chat- und Events-Dateien werden als Companion-Buttons angeboten.</p>
-                        <div class="form-row" style="gap:8px; margin-bottom: 8px; flex-wrap: wrap; align-items:center;">
+                        <div class="form-row search-bar">
                            <input type="text" id="archiveSearchQuery" class="filter-input flex-1-1-240" placeholder="Suche...">
                            <select id="archiveSearchType" class="select-compact">
                                <option value="all">Alle Typen</option>
                                <option value="live">Live-Aufnahmen</option>
                                <option value="vod">VOD-Downloads</option>
                            </select>
-                            <select id="archiveSearchStreamer" class="select-compact" style="min-width: 160px;">
+                            <select id="archiveSearchStreamer" class="select-compact size-md">
                                <option value="">Alle Streamer</option>
                            </select>
                            <select id="archiveSearchSort" class="select-compact">
@ -474,7 +474,7 @@
                            </select>
                            <button type="button" class="btn-secondary" id="btnArchiveSearch" onclick="performArchiveSearch()">Suchen</button>
                        </div>
-                        <div id="archiveSearchSummary" class="form-sublabel"></div>
+                        <div id="archiveSearchSummary" class="form-sublabel" role="status" aria-live="polite"></div>
                    </div>
                    <div class="settings-card">
                        <div id="archiveSearchResults"></div>
@ -635,7 +635,7 @@
                        </div>
                        <div class="form-group">
                            <div class="form-row" style="align-items:center; margin-bottom: 4px;">
-                                <label id="filenameTemplatesTitle" style="margin: 0;">Dateinamen-Templates</label>
+                                <label id="filenameTemplatesTitle">Dateinamen-Templates</label>
                                <button class="btn-secondary" id="settingsTemplateGuideBtn" type="button" onclick="openTemplateGuide('vod')">Template Guide</button>
                            </div>
                            <div class="form-row" style="gap: 8px; margin: 8px 0 6px;">
@ -695,7 +695,7 @@
                            <button type="button" class="btn-secondary" id="btnRefreshStorage" onclick="refreshStorageStats()">Aktualisieren</button>
                        </div>
                        <p id="storageCardIntro" class="card-intro">Disk-Verbrauch pro Streamer im aktuellen Download-Ordner. Live-Aufnahmen werden separat ausgewiesen.</p>
-                        <div id="storageSummary" class="form-sublabel" style="margin-bottom:8px;"></div>
+                        <div id="storageSummary" class="form-sublabel" style="margin-bottom:8px;" role="status" aria-live="polite"></div>
                        <div id="storageList"></div>
                        <hr>
@ -729,7 +729,7 @@
                            <button type="button" class="btn-secondary" id="btnCleanupDryRun" onclick="runCleanupDryRun()">Vorschau</button>
                            <button type="button" class="btn-secondary" id="btnCleanupRunNow" onclick="runCleanupNow()">Jetzt ausfuehren</button>
                        </div>
-                        <div id="cleanupReport" class="form-note"></div>
+                        <div id="cleanupReport" class="form-note" role="status" aria-live="polite"></div>
                    </div>
                    <div class="settings-card">
--- a/src/renderer-locale-de.ts
+++ b/src/renderer-locale-de.ts
@ -100,11 +100,10 @@ const UI_TEXT_DE = {
        autoVodScanNow: 'Jetzt scannen',
        autoRecordScanNow: 'Live-Status pruefen',
        statsTitle: 'Archiv-Statistik',
-        statsIntro: 'Aggregiert ueber den Download-Ordner. Live-Aufnahmen liegen unter {streamer}/live/, VOD-Downloads direkt unter {streamer}/. Lade-Zeit skaliert mit der Anzahl Dateien.',
+        statsIntro: 'Aggregiert ueber den Download-Ordner. Live-Aufnahmen liegen unter <code>{streamer}/live/</code>, VOD-Downloads direkt unter <code>{streamer}/</code>. Lade-Zeit skaliert mit der Anzahl Dateien.',
        statsRefresh: 'Aktualisieren',
        statsScanning: 'Scanne...',
        statsScannedAt: 'Letzter Scan',
        statsScannedAtNever: 'Noch nicht gescannt',
        statsSummaryTitle: 'Uebersicht',
        statsTopStreamersTitle: 'Top Streamer (nach Groesse)',
        statsActivityTitle: 'Aktivitaet (letzte 30 Tage)',
@ -140,6 +139,7 @@ const UI_TEXT_DE = {
        archiveNoMatches: 'Keine Treffer.',
        archiveNoRoot: 'Download-Ordner nicht gefunden. Setze zuerst einen Download-Pfad in den Einstellungen.',
        archiveSearchPlaceholder: 'Suche...',
        archiveSearchAria: 'Archiv durchsuchen',
        archiveOpen: 'Oeffnen',
        archiveShowInFolder: 'Ordner',
        archiveViewChat: 'Chat',
@ -178,11 +178,11 @@ const UI_TEXT_DE = {
        downloadPathNotWritable: 'Download-Ordner ist nicht beschreibbar. Waehle einen anderen Ordner oder pruefe die Schreibrechte.',
        streamerSectionTitle: 'Streamer',
        streamerListFilterPlaceholder: 'Filtern...',
        streamerListFilterAria: 'Streamer-Liste filtern',
        streamerAddAriaLabel: 'Streamer hinzufuegen',
        streamerBulkRemoveTitle: 'Alle entfernen (oder gefilterte)',
        streamerBulkRemoveAll: 'Alle {count} Streamer aus der Liste entfernen?',
        streamerBulkRemoveFiltered: 'Die {count} passenden Streamer aus der Liste entfernen?',
        cutterDropHint: 'Video-Datei hierher ziehen zum Laden.',
        metadataCacheMinutesLabel: 'Metadata-Cache (Minuten)',
        filenameTemplatesTitle: 'Dateinamen-Templates',
        vodTemplateLabel: 'VOD-Template',
@ -334,6 +334,7 @@ const UI_TEXT_DE = {
        openTwitch: 'Auf Twitch oeffnen',
        openTwitchTooltip: 'Diesen Kanal auf twitch.tv oeffnen',
        liveCardTooltip: 'Klick um sofort eine Live-Aufnahme zu starten',
        liveThumbAlt: 'Live-Vorschau',
        recordNow: 'Jetzt aufnehmen',
        refresh: 'Aktualisieren',
        agoMinutes: 'vor {n} Min',
@ -379,6 +380,7 @@ const UI_TEXT_DE = {
        addQueue: '+ Warteschlange',
        trimButton: 'VOD zuschneiden',
        filterPlaceholder: 'Nach Titel filtern... (Strg+F)',
        filterAria: 'VOD-Titel filtern',
        filterClearTitle: 'Filter loeschen (Esc)',
        filterNoMatchTitle: 'Keine Treffer',
        filterNoMatchText: 'Keine VODs entsprechen dem aktuellen Filter.',
@ -445,6 +447,7 @@ const UI_TEXT_DE = {
        videoInfoFailed: 'Konnte Video-Informationen nicht lesen. FFprobe installiert?',
        previewLoading: 'Lade Vorschau...',
        previewUnavailable: 'Vorschau nicht verfugbar',
        previewAlt: 'Vorschau',
        cutting: 'Schneidet...',
        cut: 'Schneiden',
        cutSuccess: 'Video erfolgreich geschnitten!',
--- a/src/renderer-locale-en.ts
+++ b/src/renderer-locale-en.ts
@ -101,11 +101,10 @@ const UI_TEXT_EN = {
        autoVodScanNow: 'Scan now',
        autoRecordScanNow: 'Check live status',
        statsTitle: 'Archive statistics',
-        statsIntro: 'Aggregated across the download folder. Live recordings live under {streamer}/live/, VOD downloads under {streamer}/. Scan time scales with file count.',
+        statsIntro: 'Aggregated across the download folder. Live recordings live under <code>{streamer}/live/</code>, VOD downloads under <code>{streamer}/</code>. Scan time scales with file count.',
        statsRefresh: 'Refresh',
        statsScanning: 'Scanning...',
        statsScannedAt: 'Last scan',
        statsScannedAtNever: 'Not yet scanned',
        statsSummaryTitle: 'Overview',
        statsTopStreamersTitle: 'Top streamers (by size)',
        statsActivityTitle: 'Activity (last 30 days)',
@ -141,6 +140,7 @@ const UI_TEXT_EN = {
        archiveNoMatches: 'No matches.',
        archiveNoRoot: 'Download folder not found. Set a download path in Settings first.',
        archiveSearchPlaceholder: 'Search...',
        archiveSearchAria: 'Search archive',
        archiveOpen: 'Open',
        archiveShowInFolder: 'Folder',
        archiveViewChat: 'Chat',
@ -178,11 +178,11 @@ const UI_TEXT_EN = {
        downloadPathNotWritable: 'Download folder is not writable. Pick another folder or grant write permission.',
        streamerSectionTitle: 'Streamer',
        streamerListFilterPlaceholder: 'Filter...',
        streamerListFilterAria: 'Filter streamer list',
        streamerAddAriaLabel: 'Add streamer',
        streamerBulkRemoveTitle: 'Remove all (or filtered)',
        streamerBulkRemoveAll: 'Remove all {count} streamers from the list?',
        streamerBulkRemoveFiltered: 'Remove the {count} matching streamer(s) from the list?',
        cutterDropHint: 'Drop a video file here to load it.',
        metadataCacheMinutesLabel: 'Metadata Cache (Minutes)',
        filenameTemplatesTitle: 'Filename Templates',
        vodTemplateLabel: 'VOD Template',
@ -334,6 +334,7 @@ const UI_TEXT_EN = {
        openTwitch: 'Open on Twitch',
        openTwitchTooltip: 'Open this channel on twitch.tv',
        liveCardTooltip: 'Click to start a live recording right now',
        liveThumbAlt: 'Live preview',
        recordNow: 'Record now',
        refresh: 'Refresh',
        agoMinutes: '{n} min ago',
@ -379,6 +380,7 @@ const UI_TEXT_EN = {
        addQueue: '+ Queue',
        trimButton: 'Trim VOD',
        filterPlaceholder: 'Filter by title... (Ctrl+F)',
        filterAria: 'Filter VOD titles',
        filterClearTitle: 'Clear filter (Esc)',
        filterNoMatchTitle: 'No matches',
        filterNoMatchText: 'No VODs match the current filter.',
@ -445,6 +447,7 @@ const UI_TEXT_EN = {
        videoInfoFailed: 'Could not read video info. Is FFprobe installed?',
        previewLoading: 'Loading preview...',
        previewUnavailable: 'Preview unavailable',
        previewAlt: 'Preview',
        cutting: 'Cutting...',
        cut: 'Cut',
        cutSuccess: 'Video cut successfully!',
--- a/src/renderer-profile.ts
+++ b/src/renderer-profile.ts
@ -30,16 +30,15 @@ function formatLastStreamAgo(iso: string | null): string {
 function hideStreamerProfileHeader(): void {
    const el = document.getElementById('streamerProfileHeader');
    if (!el) return;
-    el.style.display = 'none';
+    el.classList.add('is-hidden');
    applyHtml(el, '');
 }
 function renderStreamerProfileSkeleton(login: string): void {
    const el = document.getElementById('streamerProfileHeader');
    if (!el) return;
-    el.classList.remove('is-live');
+    el.classList.remove('is-live', 'is-hidden');
    el.classList.add('streamer-profile-skeleton');
    el.style.display = 'flex';
    applyHtml(el, `
        <div class="streamer-profile-skel-block avatar"></div>
        <div class="streamer-profile-body">
@ -60,9 +59,8 @@ function renderStreamerProfileSkeleton(login: string): void {
 function renderStreamerProfileCard(p: StreamerProfile): void {
    const el = document.getElementById('streamerProfileHeader');
    if (!el) return;
-    el.classList.remove('streamer-profile-skeleton');
+    el.classList.remove('streamer-profile-skeleton', 'is-hidden');
    if (p.isLive) el.classList.add('is-live'); else el.classList.remove('is-live');
    el.style.display = 'block';
    const safeLogin = p.login.replace(/'/g, "\\'");
    const safeUrl = p.twitchUrl.replace(/'/g, "\\'");
@ -108,7 +106,7 @@ function renderStreamerProfileCard(p: StreamerProfile): void {
        ? `
            <div class="streamer-profile-live-card" role="button" tabindex="0" aria-label="${escapeHtml(UI_TEXT.profile.liveCardTooltip)}" onclick="triggerLiveRecordingFromProfile('${safeLogin}')" onkeydown="if((event.key==='Enter'||event.key===' ')&&event.target===event.currentTarget){event.preventDefault();triggerLiveRecordingFromProfile('${safeLogin}');}" title="${escapeHtml(UI_TEXT.profile.liveCardTooltip)}">
                ${p.currentStreamPreviewUrl
-                    ? `<img class="streamer-profile-live-thumb" src="${escapeHtml(p.currentStreamPreviewUrl)}" alt="Live preview" onerror="onProfileLivePreviewError(this)">`
+                    ? `<img class="streamer-profile-live-thumb" src="${escapeHtml(p.currentStreamPreviewUrl)}" alt="${escapeHtml(UI_TEXT.profile.liveThumbAlt)}" onerror="onProfileLivePreviewError(this)">`
                    : `<div class="streamer-profile-live-thumb-fallback"></div>`}
                <div class="streamer-profile-live-body">
                    <div class="streamer-profile-live-badge-row">
--- a/src/renderer-settings.ts
+++ b/src/renderer-settings.ts
@ -88,6 +88,11 @@ function applyTemplatePreset(preset: string): void {
    byId<HTMLInputElement>('partsFilenameTemplate').value = selected.parts;
    byId<HTMLInputElement>('defaultClipFilenameTemplate').value = selected.clip;
    validateFilenameTemplates();
    // Programmatic .value = ... does not trigger the 'input' event the
    // template inputs listen on for debounced save, so the preset click
    // would otherwise look applied but never persist until the user
    // types into one of the inputs. Schedule the save explicitly.
    scheduleSettingsAutoSave();
 }
 async function refreshRuntimeMetrics(showLoading = true): Promise<void> {
--- a/src/renderer-streamers.ts
+++ b/src/renderer-streamers.ts
@ -421,7 +421,7 @@ function renderStreamers(): void {
    const filterInput = document.getElementById('streamerListFilter') as HTMLInputElement | null;
    const sectionTitle = document.getElementById('streamerSectionTitle');
    const showFilter = all.length >= STREAMER_FILTER_THRESHOLD;
-    if (filterInput) filterInput.style.display = showFilter ? '' : 'none';
+    if (filterInput) filterInput.classList.toggle('is-hidden', !showFilter);
    // Compact title margin when filter is shown — avoids double gap.
    if (sectionTitle) sectionTitle.classList.toggle('compact', showFilter);
@ -436,7 +436,7 @@ function renderStreamers(): void {
        const counter = document.getElementById('streamerSectionCounter');
        if (counter) counter.textContent = '';
        const bulkBtn = document.getElementById('btnStreamerBulkRemove') as HTMLButtonElement | null;
-        if (bulkBtn) bulkBtn.style.display = 'none';
+        if (bulkBtn) bulkBtn.classList.add('is-hidden');
        return;
    }
@ -596,7 +596,7 @@ function renderStreamers(): void {
    // Reveal bulk-remove button only above the filter threshold.
    const bulkBtn = document.getElementById('btnStreamerBulkRemove') as HTMLButtonElement | null;
-    if (bulkBtn) bulkBtn.style.display = all.length >= STREAMER_FILTER_THRESHOLD ? '' : 'none';
+    if (bulkBtn) bulkBtn.classList.toggle('is-hidden', all.length < STREAMER_FILTER_THRESHOLD);
    initStreamerDragDrop();
 }
--- a/src/renderer-texts.ts
+++ b/src/renderer-texts.ts
@ -67,6 +67,7 @@ function applyLanguageToStaticUI(): void {
    setText('btnArchiveSearch', UI_TEXT.static.archiveSearchBtn);
    const archiveQueryInput = document.getElementById('archiveSearchQuery') as HTMLInputElement | null;
    if (archiveQueryInput) archiveQueryInput.placeholder = UI_TEXT.static.archiveSearchPlaceholder;
    setAriaLabel('archiveSearchQuery', UI_TEXT.static.archiveSearchAria);
    const archiveTypeSelect = document.getElementById('archiveSearchType') as HTMLSelectElement | null;
    if (archiveTypeSelect) {
        const opts = archiveTypeSelect.options;
@ -85,6 +86,8 @@ function applyLanguageToStaticUI(): void {
    }
    setText('navSettingsText', UI_TEXT.static.navSettings);
    setText('statsTitle', UI_TEXT.static.statsTitle);
    const statsIntroEl = document.getElementById('statsIntro');
    if (statsIntroEl) applyHtml(statsIntroEl, UI_TEXT.static.statsIntro);
    setText('statsSummaryTitle', UI_TEXT.static.statsSummaryTitle);
    setText('statsTopStreamersTitle', UI_TEXT.static.statsTopStreamersTitle);
    setText('statsActivityTitle', UI_TEXT.static.statsActivityTitle);
@ -183,6 +186,7 @@ function applyLanguageToStaticUI(): void {
    setText('streamlinkQualityAudio', UI_TEXT.static.streamlinkQualityAudio);
    setText('streamerSectionTitleText', UI_TEXT.static.streamerSectionTitle);
    setPlaceholder('streamerListFilter', UI_TEXT.static.streamerListFilterPlaceholder);
    setAriaLabel('streamerListFilter', UI_TEXT.static.streamerListFilterAria);
    setTitle('btnStreamerBulkRemove', UI_TEXT.static.streamerBulkRemoveTitle);
    setAriaLabel('btnStreamerBulkRemove', UI_TEXT.static.streamerBulkRemoveTitle);
    setAriaLabel('btnAddStreamer', UI_TEXT.static.streamerAddAriaLabel);
@ -291,7 +295,9 @@ function applyLanguageToStaticUI(): void {
    setText('updateChangelogToggle', UI_TEXT.updates.showChangelog);
    setText('updateChangelogEmpty', UI_TEXT.updates.noChangelog);
    setPlaceholder('newStreamer', UI_TEXT.static.streamerPlaceholder);
    setAriaLabel('newStreamer', UI_TEXT.static.streamerAddAriaLabel);
    setPlaceholder('vodFilterInput', UI_TEXT.vods.filterPlaceholder);
    setAriaLabel('vodFilterInput', UI_TEXT.vods.filterAria);
    setTitle('vodFilterClearBtn', UI_TEXT.vods.filterClearTitle);
    setAriaLabel('vodFilterClearBtn', UI_TEXT.vods.filterClearTitle);
    setPlaceholder('chatViewerFilter', UI_TEXT.queue.chatViewerFilterPlaceholder);
--- a/src/renderer-updates.ts
+++ b/src/renderer-updates.ts
@ -88,11 +88,11 @@ function setCheckButtonCheckingState(enabled: boolean): void {
 }
 function showUpdateBanner(): void {
-    byId('updateBanner').style.display = 'flex';
+    byId('updateBanner').classList.add('show');
 }
 function hideUpdateBanner(): void {
-    byId('updateBanner').style.display = 'none';
+    byId('updateBanner').classList.remove('show');
 }
 function setUpdateBannerAvailableUi(info: UpdateInfo): void {
@ -103,7 +103,7 @@ function setUpdateBannerAvailableUi(info: UpdateInfo): void {
    updateBannerState = 'available';
    showUpdateBanner();
-    byId('updateProgress').style.display = 'none';
+    byId('updateProgress').classList.add('is-hidden');
    const bar = byId('updateProgressBar');
    bar.classList.remove('downloading');
@ -123,7 +123,7 @@ function setDownloadPendingUi(): void {
    const button = byId<HTMLButtonElement>('updateButton');
    button.textContent = UI_TEXT.updates.downloading;
    button.disabled = true;
-    byId('updateProgress').style.display = 'block';
+    byId('updateProgress').classList.remove('is-hidden');
    const bar = byId('updateProgressBar');
    bar.classList.add('downloading');
@ -149,7 +149,7 @@ function setDownloadReadyUi(info?: UpdateInfo): void {
    bar.style.width = '100%';
    byId('updateProgressGauge').setAttribute('aria-valuenow', '100');
-    byId('updateProgress').style.display = 'block';
+    byId('updateProgress').classList.remove('is-hidden');
    byId('updateText').textContent = `Version ${activeInfo.version} ${UI_TEXT.updates.ready}`;
    const button = byId<HTMLButtonElement>('updateButton');
    button.textContent = UI_TEXT.updates.installNow;
@ -187,13 +187,13 @@ function renderUpdateChangelog(notes?: string): void {
    empty.hidden = true;
    if (!normalized) {
-        card.style.display = 'none';
+        card.classList.add('is-hidden');
        panel.hidden = true;
        updateChangelogExpanded = false;
        return;
    }
-    card.style.display = 'block';
+    card.classList.remove('is-hidden');
    const fragment = document.createDocumentFragment();
    let currentList: HTMLUListElement | null = null;
@ -273,7 +273,7 @@ function renderUpdateChangelog(notes?: string): void {
 function refreshUpdateChangelogToggleText(): void {
    const toggle = byId<HTMLButtonElement>('updateChangelogToggle');
    const card = byId<HTMLElement>('updateChangelogCard');
-    if (card.style.display === 'none') {
+    if (card.classList.contains('is-hidden')) {
        return;
    }
@ -299,14 +299,14 @@ function refreshUpdateModalTexts(): void {
    // already on disk and ready to install, hide the button.
    const skipBtn = byId<HTMLButtonElement>('updateModalSkipBtn');
    skipBtn.textContent = UI_TEXT.updates.modalSkipVersion;
-    skipBtn.style.display = isReady ? 'none' : '';
+    skipBtn.classList.toggle('is-hidden', isReady);
    byId('updateChangelogLabel').textContent = UI_TEXT.updates.changelogLabel;
    byId('updateChangelogEmpty').textContent = UI_TEXT.updates.noChangelog;
    const metaText = getUpdateModalMetaText(info);
    const meta = byId('updateModalMeta');
    meta.textContent = metaText;
-    meta.style.display = metaText ? 'block' : 'none';
+    meta.classList.toggle('is-hidden', !metaText);
    renderUpdateChangelog(info.releaseNotes);
    refreshUpdateChangelogToggleText();
@ -349,7 +349,7 @@ function confirmUpdateModal(): void {
 function toggleUpdateChangelog(): void {
    const card = byId<HTMLElement>('updateChangelogCard');
-    if (card.style.display === 'none') {
+    if (card.classList.contains('is-hidden')) {
        return;
    }
@ -374,7 +374,7 @@ function refreshUpdateUiTexts(): void {
    } else if (updateBannerState === 'downloading') {
        button.textContent = UI_TEXT.updates.downloading;
        button.disabled = true;
-        progress.style.display = 'block';
+        progress.classList.remove('is-hidden');
        if (latestDownloadProgress) {
            bar.classList.remove('downloading');
            bar.style.width = `${latestDownloadProgress.percent}%`;
@ -388,7 +388,7 @@ function refreshUpdateUiTexts(): void {
        setDownloadReadyUi(latestUpdateInfo);
    } else {
        hideUpdateBanner();
-        progress.style.display = 'none';
+        progress.classList.add('is-hidden');
        bar.classList.remove('downloading');
        bar.style.width = '0%';
        byId('updateText').textContent = UI_TEXT.updates.bannerDefault;
@ -458,7 +458,7 @@ async function checkUpdate(): Promise<void> {
        setCheckButtonCheckingState(false);
        window.setTimeout(() => {
-            if (!manualUpdateOutcomeHandled && !updateReady && byId('updateBanner').style.display !== 'flex') {
+            if (!manualUpdateOutcomeHandled && !updateReady && !byId('updateBanner').classList.contains('show')) {
                shouldOpenUpdateModalOnAvailable = false;
                notifyUpdate(UI_TEXT.updates.latest, 'info');
            }
@ -580,7 +580,7 @@ window.api.onUpdateDownloadProgress((progress: UpdateDownloadProgress) => {
    byId('updateProgressGauge').setAttribute('aria-valuenow', String(Math.round(progress.percent)));
    showUpdateBanner();
-    byId('updateProgress').style.display = 'block';
+    byId('updateProgress').classList.remove('is-hidden');
    const mb = (progress.transferred / 1024 / 1024).toFixed(1);
    const totalMb = (progress.total / 1024 / 1024).toFixed(1);
--- a/src/renderer.ts
+++ b/src/renderer.ts
@ -1557,15 +1557,15 @@ async function updatePreview(time: number): Promise<void> {
    }
    const preview = byId('cutterPreview');
-    preview.innerHTML = `<div class="placeholder"><p>${UI_TEXT.cutter.previewLoading}</p></div>`;
+    applyHtml(preview, `<div class="placeholder"><p>${escapeHtml(UI_TEXT.cutter.previewLoading)}</p></div>`);
    const frame = await window.api.extractFrame(cutterFile, time);
    if (frame) {
-        preview.innerHTML = `<img src="${frame}" alt="Preview">`;
+        applyHtml(preview, `<img src="${escapeHtml(frame)}" alt="${escapeHtml(UI_TEXT.cutter.previewAlt)}">`);
        return;
    }
-    preview.innerHTML = `<div class="placeholder"><p>${UI_TEXT.cutter.previewUnavailable}</p></div>`;
+    applyHtml(preview, `<div class="placeholder"><p>${escapeHtml(UI_TEXT.cutter.previewUnavailable)}</p></div>`);
 }
 async function startCutting(): Promise<void> {
--- a/src/styles.css
+++ b/src/styles.css
@ -471,6 +471,10 @@ body {
    color: var(--text);
    font-size: 13px;
 }
 /* No .filter-input:hover here — it's redundant with the global
   input[type="text"]:hover rule added in 4.6.142 (same effect: soft
   purple border on hover). The class is always applied to <input
   type="text"> elements, so the global rule already covers them. */
 .filter-input.compact {
    width: calc(100% - 16px);
@ -711,6 +715,21 @@ select:focus {
    box-shadow: 0 0 0 3px rgba(145, 70, 255, 0.18);
 }
 /* Soft mouseover affordance — every text/search/number/etc. input + textarea
   + select picks up a half-tone accent border on hover, matching the
   .select-compact + .filter-input hover pattern. :not(:focus) keeps the
   focus ring (above) from competing, :not(:disabled) leaves disabled
   inputs inert. */
 input[type="text"]:hover:not(:focus):not(:disabled),
 input[type="search"]:hover:not(:focus):not(:disabled),
 input[type="number"]:hover:not(:focus):not(:disabled),
 input[type="password"]:hover:not(:focus):not(:disabled),
 input[type="email"]:hover:not(:focus):not(:disabled),
 textarea:hover:not(:focus):not(:disabled),
 select:hover:not(:focus):not(:disabled) {
    border-color: rgba(145, 70, 255, 0.45);
 }
 /* ============================================
   CUSTOM CHECKBOX — modern Twitch-purple
   ============================================
@ -847,6 +866,19 @@ select option {
    padding: 7px 10px;
    color: var(--text);
    font-size: 13px;
    transition: border-color 0.15s, background 0.15s;
 }
 .select-compact:hover:not(:disabled) {
    background: rgba(145, 70, 255, 0.08);
    border-color: rgba(145, 70, 255, 0.45);
 }
 /* Wider variant — used for the Archive-search streamer-name select
   where short streamer names would collapse the dropdown to an
   unhelpful 80-100px otherwise. Matches the .form-stack.size-md width. */
 .select-compact.size-md {
    min-width: 160px;
 }
 /* Queue Section */
@ -1199,6 +1231,15 @@ select option {
    transition: all 0.2s;
 }
 .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
 }
 .btn:disabled:hover {
    background: inherit;
 }
 .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.65);
@ -1858,6 +1899,16 @@ select option {
    margin-bottom: 10px;
 }
 /* Search/filter tool-row variant — wraps on narrow widths so the
   select / input cluster collapses gracefully. Used by the Archive
   search row (input + 3 selects + button). */
 .form-row.search-bar {
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    align-items: center;
 }
 .log-panel {
    background: #11151c;
    border: 1px solid rgba(255,255,255,0.12);
@ -1919,6 +1970,11 @@ select option {
    box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.55);
 }
 .btn-secondary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
 }
 /* ============================================
   COMPACT / UTILITY BUTTONS
   ============================================
@ -3731,11 +3787,6 @@ input[type="number"]::-webkit-outer-spin-button {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 167, 38, 0.25);
 }
 .app-toast.error {
    border-left-color: var(--error);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 70, 70, 0.25);
 }
 /* ============================================
   STREAMER SECTION COUNTER
   ============================================
@ -4257,7 +4308,14 @@ input[type="number"]::-webkit-outer-spin-button {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(145, 70, 255, 0.55);
 }
-/* Skeleton loading state */
+/* Skeleton loading state — switches the profile-header from its
   regular block layout to a flex row so the avatar + body sit
   side-by-side. The element itself was previously flipped via inline
   .style.display='flex' in renderStreamerProfileSkeleton(). */
 .streamer-profile-skeleton {
    display: flex;
 }
 .streamer-profile-skeleton .streamer-profile-skel-block {
    background: linear-gradient(90deg, var(--bg-elevated) 0%, rgba(255,255,255,0.06) 50%, var(--bg-elevated) 100%);
    background-size: 200% 100%;