feat(subtitle-sidebar): add sidebar config surface (#28)

2026-03-23 00:11:28 -07:00 · 2026-03-21 23:37:42 -07:00
parent eddf6f0456
commit 3a01cffc6b
66 changed files with 5241 additions and 426 deletions
--- a/src/config/definitions.ts
+++ b/src/config/definitions.ts
@@ -36,7 +36,7 @@ const {
 } = CORE_DEFAULT_CONFIG;
 const { ankiConnect, jimaku, anilist, yomitan, jellyfin, discordPresence, ai, youtubeSubgen } =
  INTEGRATIONS_DEFAULT_CONFIG;
-const { subtitleStyle } = SUBTITLE_DEFAULT_CONFIG;
+const { subtitleStyle, subtitleSidebar } = SUBTITLE_DEFAULT_CONFIG;
 const { immersionTracking } = IMMERSION_DEFAULT_CONFIG;
 const { stats } = STATS_DEFAULT_CONFIG;

@@ -54,6 +54,7 @@ export const DEFAULT_CONFIG: ResolvedConfig = {
  subsync,
  startupWarmups,
  subtitleStyle,
+  subtitleSidebar,
  auto_start_overlay,
  jimaku,
  anilist,
--- a/src/config/definitions/defaults-subtitle.ts
+++ b/src/config/definitions/defaults-subtitle.ts
@@ -1,6 +1,6 @@
 import { ResolvedConfig } from '../../types';

-export const SUBTITLE_DEFAULT_CONFIG: Pick<ResolvedConfig, 'subtitleStyle'> = {
+export const SUBTITLE_DEFAULT_CONFIG: Pick<ResolvedConfig, 'subtitleStyle' | 'subtitleSidebar'> = {
  subtitleStyle: {
    enableJlpt: false,
    preserveLineBreaks: false,
@@ -57,4 +57,22 @@ export const SUBTITLE_DEFAULT_CONFIG: Pick<ResolvedConfig, 'subtitleStyle'> = {
      fontStyle: 'normal',
    },
  },
+  subtitleSidebar: {
+    enabled: false,
+    autoOpen: false,
+    layout: 'overlay',
+    toggleKey: 'Backslash',
+    pauseVideoOnHover: false,
+    autoScroll: true,
+    maxWidth: 420,
+    opacity: 0.95,
+    backgroundColor: 'rgba(73, 77, 100, 0.9)',
+    textColor: '#cad3f5',
+    fontFamily: '"M PLUS 1", "Noto Sans CJK JP", sans-serif',
+    fontSize: 16,
+    timestampColor: '#a5adcb',
+    activeLineColor: '#f5bde6',
+    activeLineBackgroundColor: 'rgba(138, 173, 244, 0.22)',
+    hoverLineBackgroundColor: 'rgba(54, 58, 79, 0.84)',
+  },
 };
--- a/src/config/definitions/options-subtitle.ts
+++ b/src/config/definitions/options-subtitle.ts
@@ -110,5 +110,102 @@ export function buildSubtitleConfigOptionRegistry(
      description:
        'Five colors used for rank bands when mode is `banded` (from most common to least within topX).',
    },
+    {
+      path: 'subtitleSidebar.enabled',
+      kind: 'boolean',
+      defaultValue: defaultConfig.subtitleSidebar.enabled,
+      description: 'Enable the subtitle sidebar feature for parsed subtitle sources.',
+    },
+    {
+      path: 'subtitleSidebar.autoOpen',
+      kind: 'boolean',
+      defaultValue: defaultConfig.subtitleSidebar.autoOpen,
+      description: 'Automatically open the subtitle sidebar once during overlay startup.',
+    },
+    {
+      path: 'subtitleSidebar.layout',
+      kind: 'enum',
+      enumValues: ['overlay', 'embedded'],
+      defaultValue: defaultConfig.subtitleSidebar.layout,
+      description: 'Render the subtitle sidebar as a floating overlay or reserve space inside mpv.',
+    },
+    {
+      path: 'subtitleSidebar.toggleKey',
+      kind: 'string',
+      defaultValue: defaultConfig.subtitleSidebar.toggleKey,
+      description: 'KeyboardEvent.code used to toggle the subtitle sidebar open and closed.',
+    },
+    {
+      path: 'subtitleSidebar.pauseVideoOnHover',
+      kind: 'boolean',
+      defaultValue: defaultConfig.subtitleSidebar.pauseVideoOnHover,
+      description: 'Pause mpv while hovering the subtitle sidebar, then resume on leave.',
+    },
+    {
+      path: 'subtitleSidebar.autoScroll',
+      kind: 'boolean',
+      defaultValue: defaultConfig.subtitleSidebar.autoScroll,
+      description: 'Auto-scroll the active subtitle cue into view while playback advances.',
+    },
+    {
+      path: 'subtitleSidebar.maxWidth',
+      kind: 'number',
+      defaultValue: defaultConfig.subtitleSidebar.maxWidth,
+      description: 'Maximum sidebar width in CSS pixels.',
+    },
+    {
+      path: 'subtitleSidebar.opacity',
+      kind: 'number',
+      defaultValue: defaultConfig.subtitleSidebar.opacity,
+      description: 'Base opacity applied to the sidebar shell.',
+    },
+    {
+      path: 'subtitleSidebar.backgroundColor',
+      kind: 'string',
+      defaultValue: defaultConfig.subtitleSidebar.backgroundColor,
+      description: 'Background color for the subtitle sidebar shell.',
+    },
+    {
+      path: 'subtitleSidebar.textColor',
+      kind: 'string',
+      defaultValue: defaultConfig.subtitleSidebar.textColor,
+      description: 'Default cue text color in the subtitle sidebar.',
+    },
+    {
+      path: 'subtitleSidebar.fontFamily',
+      kind: 'string',
+      defaultValue: defaultConfig.subtitleSidebar.fontFamily,
+      description: 'Font family used for subtitle sidebar cue text.',
+    },
+    {
+      path: 'subtitleSidebar.fontSize',
+      kind: 'number',
+      defaultValue: defaultConfig.subtitleSidebar.fontSize,
+      description: 'Base font size for subtitle sidebar cue text in CSS pixels.',
+    },
+    {
+      path: 'subtitleSidebar.timestampColor',
+      kind: 'string',
+      defaultValue: defaultConfig.subtitleSidebar.timestampColor,
+      description: 'Timestamp color in the subtitle sidebar.',
+    },
+    {
+      path: 'subtitleSidebar.activeLineColor',
+      kind: 'string',
+      defaultValue: defaultConfig.subtitleSidebar.activeLineColor,
+      description: 'Text color for the active subtitle cue.',
+    },
+    {
+      path: 'subtitleSidebar.activeLineBackgroundColor',
+      kind: 'string',
+      defaultValue: defaultConfig.subtitleSidebar.activeLineBackgroundColor,
+      description: 'Background color for the active subtitle cue.',
+    },
+    {
+      path: 'subtitleSidebar.hoverLineBackgroundColor',
+      kind: 'string',
+      defaultValue: defaultConfig.subtitleSidebar.hoverLineBackgroundColor,
+      description: 'Background color for hovered subtitle cues.',
+    },
  ];
 }
--- a/src/config/definitions/template-sections.ts
+++ b/src/config/definitions/template-sections.ts
@@ -98,6 +98,12 @@ const SUBTITLE_TEMPLATE_SECTIONS: ConfigTemplateSection[] = [
    notes: ['Hot-reload: subtitle style changes apply live without restarting SubMiner.'],
    key: 'subtitleStyle',
  },
+  {
+    title: 'Subtitle Sidebar',
+    description: ['Parsed-subtitle sidebar cue list styling, behavior, and toggle key.'],
+    notes: ['Hot-reload: subtitle sidebar changes apply live without restarting SubMiner.'],
+    key: 'subtitleSidebar',
+  },
 ];

 const INTEGRATION_TEMPLATE_SECTIONS: ConfigTemplateSection[] = [
--- a/src/config/resolve/shared.ts
+++ b/src/config/resolve/shared.ts
@@ -15,6 +15,22 @@ export function asBoolean(value: unknown): boolean | undefined {
 }

 const hexColorPattern = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+const cssColorKeywords = new Set([
+  'transparent',
+  'currentcolor',
+  'inherit',
+  'initial',
+  'unset',
+  'revert',
+  'revert-layer',
+]);
+const cssColorFunctionPattern = /^(?:rgba?|hsla?)\(\s*[^()]+?\s*\)$/i;
+
+function supportsCssColor(text: string): boolean {
+  const css = (globalThis as { CSS?: { supports?: (property: string, value: string) => boolean } })
+    .CSS;
+  return css?.supports?.('color', text) ?? false;
+}

 export function asColor(value: unknown): string | undefined {
  if (typeof value !== 'string') return undefined;
@@ -22,6 +38,30 @@ export function asColor(value: unknown): string | undefined {
  return hexColorPattern.test(text) ? text : undefined;
 }

+export function asCssColor(value: unknown): string | undefined {
+  if (typeof value !== 'string') return undefined;
+
+  const text = value.trim();
+  if (text.length === 0) {
+    return undefined;
+  }
+
+  if (supportsCssColor(text)) {
+    return text;
+  }
+
+  const normalized = text.toLowerCase();
+  if (
+    hexColorPattern.test(text) ||
+    cssColorKeywords.has(normalized) ||
+    cssColorFunctionPattern.test(text)
+  ) {
+    return text;
+  }
+
+  return undefined;
+}
+
 export function asFrequencyBandedColors(
  value: unknown,
 ): [string, string, string, string, string] | undefined {
--- a/src/config/resolve/subtitle-domains.ts
+++ b/src/config/resolve/subtitle-domains.ts
@@ -3,6 +3,7 @@ import { ResolveContext } from './context';
 import {
  asBoolean,
  asColor,
+  asCssColor,
  asFrequencyBandedColors,
  asNumber,
  asString,
@@ -418,4 +419,180 @@ export function applySubtitleDomainConfig(context: ResolveContext): void {
      );
    }
  }
+
+  if (isObject(src.subtitleSidebar)) {
+    const fallback = { ...resolved.subtitleSidebar };
+    resolved.subtitleSidebar = {
+      ...resolved.subtitleSidebar,
+      ...(src.subtitleSidebar as ResolvedConfig['subtitleSidebar']),
+    };
+
+    const enabled = asBoolean((src.subtitleSidebar as { enabled?: unknown }).enabled);
+    if (enabled !== undefined) {
+      resolved.subtitleSidebar.enabled = enabled;
+    } else if ((src.subtitleSidebar as { enabled?: unknown }).enabled !== undefined) {
+      resolved.subtitleSidebar.enabled = fallback.enabled;
+      warn(
+        'subtitleSidebar.enabled',
+        (src.subtitleSidebar as { enabled?: unknown }).enabled,
+        resolved.subtitleSidebar.enabled,
+        'Expected boolean.',
+      );
+    }
+
+    const autoOpen = asBoolean((src.subtitleSidebar as { autoOpen?: unknown }).autoOpen);
+    if (autoOpen !== undefined) {
+      resolved.subtitleSidebar.autoOpen = autoOpen;
+    } else if ((src.subtitleSidebar as { autoOpen?: unknown }).autoOpen !== undefined) {
+      resolved.subtitleSidebar.autoOpen = fallback.autoOpen;
+      warn(
+        'subtitleSidebar.autoOpen',
+        (src.subtitleSidebar as { autoOpen?: unknown }).autoOpen,
+        resolved.subtitleSidebar.autoOpen,
+        'Expected boolean.',
+      );
+    }
+
+    const layout = asString((src.subtitleSidebar as { layout?: unknown }).layout);
+    if (layout === 'overlay' || layout === 'embedded') {
+      resolved.subtitleSidebar.layout = layout;
+    } else if ((src.subtitleSidebar as { layout?: unknown }).layout !== undefined) {
+      resolved.subtitleSidebar.layout = fallback.layout;
+      warn(
+        'subtitleSidebar.layout',
+        (src.subtitleSidebar as { layout?: unknown }).layout,
+        resolved.subtitleSidebar.layout,
+        'Expected "overlay" or "embedded".',
+      );
+    }
+
+    const pauseVideoOnHover = asBoolean(
+      (src.subtitleSidebar as { pauseVideoOnHover?: unknown }).pauseVideoOnHover,
+    );
+    if (pauseVideoOnHover !== undefined) {
+      resolved.subtitleSidebar.pauseVideoOnHover = pauseVideoOnHover;
+    } else if ((src.subtitleSidebar as { pauseVideoOnHover?: unknown }).pauseVideoOnHover !== undefined) {
+      resolved.subtitleSidebar.pauseVideoOnHover = fallback.pauseVideoOnHover;
+      warn(
+        'subtitleSidebar.pauseVideoOnHover',
+        (src.subtitleSidebar as { pauseVideoOnHover?: unknown }).pauseVideoOnHover,
+        resolved.subtitleSidebar.pauseVideoOnHover,
+        'Expected boolean.',
+      );
+    }
+
+    const autoScroll = asBoolean((src.subtitleSidebar as { autoScroll?: unknown }).autoScroll);
+    if (autoScroll !== undefined) {
+      resolved.subtitleSidebar.autoScroll = autoScroll;
+    } else if ((src.subtitleSidebar as { autoScroll?: unknown }).autoScroll !== undefined) {
+      resolved.subtitleSidebar.autoScroll = fallback.autoScroll;
+      warn(
+        'subtitleSidebar.autoScroll',
+        (src.subtitleSidebar as { autoScroll?: unknown }).autoScroll,
+        resolved.subtitleSidebar.autoScroll,
+        'Expected boolean.',
+      );
+    }
+
+    const toggleKey = asString((src.subtitleSidebar as { toggleKey?: unknown }).toggleKey);
+    if (toggleKey !== undefined) {
+      resolved.subtitleSidebar.toggleKey = toggleKey;
+    } else if ((src.subtitleSidebar as { toggleKey?: unknown }).toggleKey !== undefined) {
+      resolved.subtitleSidebar.toggleKey = fallback.toggleKey;
+      warn(
+        'subtitleSidebar.toggleKey',
+        (src.subtitleSidebar as { toggleKey?: unknown }).toggleKey,
+        resolved.subtitleSidebar.toggleKey,
+        'Expected string.',
+      );
+    }
+
+    const maxWidth = asNumber((src.subtitleSidebar as { maxWidth?: unknown }).maxWidth);
+    if (maxWidth !== undefined && maxWidth > 0) {
+      resolved.subtitleSidebar.maxWidth = Math.floor(maxWidth);
+    } else if ((src.subtitleSidebar as { maxWidth?: unknown }).maxWidth !== undefined) {
+      resolved.subtitleSidebar.maxWidth = fallback.maxWidth;
+      warn(
+        'subtitleSidebar.maxWidth',
+        (src.subtitleSidebar as { maxWidth?: unknown }).maxWidth,
+        resolved.subtitleSidebar.maxWidth,
+        'Expected positive number.',
+      );
+    }
+
+    const opacity = asNumber((src.subtitleSidebar as { opacity?: unknown }).opacity);
+    if (opacity !== undefined && opacity >= 0 && opacity <= 1) {
+      resolved.subtitleSidebar.opacity = opacity;
+    } else if ((src.subtitleSidebar as { opacity?: unknown }).opacity !== undefined) {
+      resolved.subtitleSidebar.opacity = fallback.opacity;
+      warn(
+        'subtitleSidebar.opacity',
+        (src.subtitleSidebar as { opacity?: unknown }).opacity,
+        resolved.subtitleSidebar.opacity,
+        'Expected number between 0 and 1.',
+      );
+    }
+
+    const hexColorFields = ['textColor', 'timestampColor', 'activeLineColor'] as const;
+    for (const field of hexColorFields) {
+      const value = asColor((src.subtitleSidebar as Record<string, unknown>)[field]);
+      if (value !== undefined) {
+        resolved.subtitleSidebar[field] = value;
+      } else if ((src.subtitleSidebar as Record<string, unknown>)[field] !== undefined) {
+        resolved.subtitleSidebar[field] = fallback[field];
+        warn(
+          `subtitleSidebar.${field}`,
+          (src.subtitleSidebar as Record<string, unknown>)[field],
+          resolved.subtitleSidebar[field],
+          'Expected hex color.',
+        );
+      }
+    }
+
+    const cssColorFields = [
+      'backgroundColor',
+      'activeLineBackgroundColor',
+      'hoverLineBackgroundColor',
+    ] as const;
+    for (const field of cssColorFields) {
+      const value = asCssColor((src.subtitleSidebar as Record<string, unknown>)[field]);
+      if (value !== undefined) {
+        resolved.subtitleSidebar[field] = value;
+      } else if ((src.subtitleSidebar as Record<string, unknown>)[field] !== undefined) {
+        resolved.subtitleSidebar[field] = fallback[field];
+        warn(
+          `subtitleSidebar.${field}`,
+          (src.subtitleSidebar as Record<string, unknown>)[field],
+          resolved.subtitleSidebar[field],
+          'Expected valid CSS color.',
+        );
+      }
+    }
+
+    const fontFamily = asString((src.subtitleSidebar as { fontFamily?: unknown }).fontFamily);
+    if (fontFamily !== undefined && fontFamily.trim().length > 0) {
+      resolved.subtitleSidebar.fontFamily = fontFamily.trim();
+    } else if ((src.subtitleSidebar as { fontFamily?: unknown }).fontFamily !== undefined) {
+      resolved.subtitleSidebar.fontFamily = fallback.fontFamily;
+      warn(
+        'subtitleSidebar.fontFamily',
+        (src.subtitleSidebar as { fontFamily?: unknown }).fontFamily,
+        resolved.subtitleSidebar.fontFamily,
+        'Expected non-empty string.',
+      );
+    }
+
+    const fontSize = asNumber((src.subtitleSidebar as { fontSize?: unknown }).fontSize);
+    if (fontSize !== undefined && fontSize > 0) {
+      resolved.subtitleSidebar.fontSize = fontSize;
+    } else if ((src.subtitleSidebar as { fontSize?: unknown }).fontSize !== undefined) {
+      resolved.subtitleSidebar.fontSize = fallback.fontSize;
+      warn(
+        'subtitleSidebar.fontSize',
+        (src.subtitleSidebar as { fontSize?: unknown }).fontSize,
+        resolved.subtitleSidebar.fontSize,
+        'Expected positive number.',
+      );
+    }
+  }
 }
--- a/src/config/resolve/subtitle-sidebar.test.ts
+++ b/src/config/resolve/subtitle-sidebar.test.ts
@@ -0,0 +1,93 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { createResolveContext } from './context';
+import { applySubtitleDomainConfig } from './subtitle-domains';
+
+test('subtitleSidebar resolves valid values and preserves dedicated defaults', () => {
+  const { context } = createResolveContext({
+    subtitleSidebar: {
+      enabled: true,
+      autoOpen: true,
+      layout: 'embedded',
+      toggleKey: 'KeyB',
+      pauseVideoOnHover: true,
+      autoScroll: false,
+      maxWidth: 540,
+      opacity: 0.72,
+      backgroundColor: 'rgba(36, 39, 58, 0.72)',
+      textColor: '#cad3f5',
+      fontFamily: '"Iosevka Aile", sans-serif',
+      fontSize: 17,
+      timestampColor: '#a5adcb',
+      activeLineColor: '#f5bde6',
+      activeLineBackgroundColor: 'rgba(138, 173, 244, 0.22)',
+      hoverLineBackgroundColor: 'rgba(54, 58, 79, 0.84)',
+    },
+  });
+
+  applySubtitleDomainConfig(context);
+
+  assert.equal(context.resolved.subtitleSidebar.enabled, true);
+  assert.equal(context.resolved.subtitleSidebar.autoOpen, true);
+  assert.equal(context.resolved.subtitleSidebar.layout, 'embedded');
+  assert.equal(context.resolved.subtitleSidebar.toggleKey, 'KeyB');
+  assert.equal(context.resolved.subtitleSidebar.pauseVideoOnHover, true);
+  assert.equal(context.resolved.subtitleSidebar.autoScroll, false);
+  assert.equal(context.resolved.subtitleSidebar.maxWidth, 540);
+  assert.equal(context.resolved.subtitleSidebar.opacity, 0.72);
+  assert.equal(context.resolved.subtitleSidebar.fontFamily, '"Iosevka Aile", sans-serif');
+  assert.equal(context.resolved.subtitleSidebar.fontSize, 17);
+});
+
+test('subtitleSidebar accepts zero opacity', () => {
+  const { context, warnings } = createResolveContext({
+    subtitleSidebar: {
+      opacity: 0,
+    },
+  });
+
+  applySubtitleDomainConfig(context);
+
+  assert.equal(context.resolved.subtitleSidebar.opacity, 0);
+  assert.equal(warnings.some((warning) => warning.path === 'subtitleSidebar.opacity'), false);
+});
+
+test('subtitleSidebar falls back and warns on invalid values', () => {
+  const { context, warnings } = createResolveContext({
+    subtitleSidebar: {
+      enabled: 'yes' as never,
+      autoOpen: 'yes' as never,
+      layout: 'floating' as never,
+      maxWidth: -1,
+      opacity: 5,
+      fontSize: 0,
+      textColor: 'blue',
+      backgroundColor: 'not-a-color',
+    },
+  });
+
+  applySubtitleDomainConfig(context);
+
+  assert.equal(context.resolved.subtitleSidebar.enabled, false);
+  assert.equal(context.resolved.subtitleSidebar.autoOpen, false);
+  assert.equal(context.resolved.subtitleSidebar.layout, 'overlay');
+  assert.equal(context.resolved.subtitleSidebar.maxWidth, 420);
+  assert.equal(context.resolved.subtitleSidebar.opacity, 0.95);
+  assert.equal(context.resolved.subtitleSidebar.fontSize, 16);
+  assert.equal(context.resolved.subtitleSidebar.textColor, '#cad3f5');
+  assert.equal(context.resolved.subtitleSidebar.backgroundColor, 'rgba(73, 77, 100, 0.9)');
+  assert.ok(warnings.some((warning) => warning.path === 'subtitleSidebar.enabled'));
+  assert.ok(warnings.some((warning) => warning.path === 'subtitleSidebar.autoOpen'));
+  assert.ok(warnings.some((warning) => warning.path === 'subtitleSidebar.layout'));
+  assert.ok(warnings.some((warning) => warning.path === 'subtitleSidebar.maxWidth'));
+  assert.ok(warnings.some((warning) => warning.path === 'subtitleSidebar.opacity'));
+  assert.ok(warnings.some((warning) => warning.path === 'subtitleSidebar.fontSize'));
+  assert.ok(warnings.some((warning) => warning.path === 'subtitleSidebar.textColor'));
+  assert.ok(
+    warnings.some(
+      (warning) =>
+        warning.path === 'subtitleSidebar.backgroundColor' &&
+        warning.message === 'Expected valid CSS color.',
+    ),
+  );
+});
--- a/src/core/services/config-hot-reload.ts
+++ b/src/core/services/config-hot-reload.ts
@@ -42,6 +42,9 @@ function classifyDiff(prev: ResolvedConfig, next: ResolvedConfig): ConfigHotRelo
  if (!isEqual(prev.shortcuts, next.shortcuts)) {
    hotReloadFields.push('shortcuts');
  }
+  if (!isEqual(prev.subtitleSidebar, next.subtitleSidebar)) {
+    hotReloadFields.push('subtitleSidebar');
+  }
  if (prev.secondarySub.defaultMode !== next.secondarySub.defaultMode) {
    hotReloadFields.push('secondarySub.defaultMode');
  }
@@ -55,7 +58,7 @@ function classifyDiff(prev: ResolvedConfig, next: ResolvedConfig): ConfigHotRelo
  ]);

  for (const key of keys) {
-    if (key === 'subtitleStyle' || key === 'keybindings' || key === 'shortcuts') {
+    if (key === 'subtitleStyle' || key === 'keybindings' || key === 'shortcuts' || key === 'subtitleSidebar') {
      continue;
    }

--- a/src/core/services/ipc.test.ts
+++ b/src/core/services/ipc.test.ts
@@ -3,6 +3,7 @@ import assert from 'node:assert/strict';

 import { createIpcDepsRuntime, registerIpcHandlers, type IpcServiceDeps } from './ipc';
 import { IPC_CHANNELS } from '../../shared/ipc/contracts';
+import type { SubtitleSidebarSnapshot } from '../../types';

 interface FakeIpcRegistrar {
  on: Map<string, (event: unknown, ...args: unknown[]) => void>;
@@ -77,6 +78,31 @@ function createControllerConfigFixture() {
  };
 }

+function createSubtitleSidebarSnapshotFixture(): SubtitleSidebarSnapshot {
+  return {
+    cues: [],
+    currentSubtitle: { text: '', startTime: null, endTime: null },
+    config: {
+      enabled: false,
+      autoOpen: false,
+      layout: 'overlay',
+      toggleKey: 'Backslash',
+      pauseVideoOnHover: false,
+      autoScroll: true,
+      maxWidth: 420,
+      opacity: 0.92,
+      backgroundColor: 'rgba(54, 58, 79, 0.88)',
+      textColor: '#cad3f5',
+      fontFamily: '"M PLUS 1", "Noto Sans CJK JP", sans-serif',
+      fontSize: 16,
+      timestampColor: '#a5adcb',
+      activeLineColor: '#f5bde6',
+      activeLineBackgroundColor: 'rgba(138, 173, 244, 0.22)',
+      hoverLineBackgroundColor: 'rgba(54, 58, 79, 0.84)',
+    },
+  };
+}
+
 function createRegisterIpcDeps(overrides: Partial<IpcServiceDeps> = {}): IpcServiceDeps {
  return {
    onOverlayModalClosed: () => {},
@@ -88,6 +114,7 @@ function createRegisterIpcDeps(overrides: Partial<IpcServiceDeps> = {}): IpcServ
    tokenizeCurrentSubtitle: async () => null,
    getCurrentSubtitleRaw: () => '',
    getCurrentSubtitleAss: () => '',
+    getSubtitleSidebarSnapshot: async () => createSubtitleSidebarSnapshotFixture(),
    getPlaybackPaused: () => false,
    getSubtitlePosition: () => null,
    getSubtitleStyle: () => null,
@@ -173,6 +200,7 @@ test('createIpcDepsRuntime wires AniList handlers', async () => {
    tokenizeCurrentSubtitle: async () => null,
    getCurrentSubtitleRaw: () => '',
    getCurrentSubtitleAss: () => '',
+    getSubtitleSidebarSnapshot: async () => createSubtitleSidebarSnapshotFixture(),
    getPlaybackPaused: () => true,
    getSubtitlePosition: () => null,
    getSubtitleStyle: () => null,
@@ -269,6 +297,7 @@ test('registerIpcHandlers rejects malformed runtime-option payloads', async () =
        cycles.push({ id, direction });
        return { ok: true };
      },
+      getSubtitleSidebarSnapshot: async () => createSubtitleSidebarSnapshotFixture(),
      reportOverlayContentBounds: () => {},
      getAnilistStatus: () => ({}),
      clearAnilistToken: () => {},
@@ -320,6 +349,24 @@ test('registerIpcHandlers rejects malformed runtime-option payloads', async () =
  );
 });

+test('registerIpcHandlers exposes subtitle sidebar snapshot request', async () => {
+  const { registrar, handlers } = createFakeIpcRegistrar();
+  const snapshot = createSubtitleSidebarSnapshotFixture();
+  snapshot.cues = [{ startTime: 1, endTime: 2, text: 'line-1' }];
+  snapshot.config.enabled = true;
+
+  registerIpcHandlers(
+    createRegisterIpcDeps({
+      getSubtitleSidebarSnapshot: async () => snapshot,
+    }),
+    registrar,
+  );
+
+  const handler = handlers.handle.get(IPC_CHANNELS.request.getSubtitleSidebarSnapshot);
+  assert.ok(handler);
+  assert.deepEqual(await handler!({}), snapshot);
+});
+
 test('registerIpcHandlers forwards yomitan lookup tracking commands to immersion tracker', () => {
  const { registrar, handlers } = createFakeIpcRegistrar();
  const calls: string[] = [];
@@ -530,6 +577,7 @@ test('registerIpcHandlers ignores malformed fire-and-forget payloads', () => {
      tokenizeCurrentSubtitle: async () => null,
      getCurrentSubtitleRaw: () => '',
      getCurrentSubtitleAss: () => '',
+      getSubtitleSidebarSnapshot: async () => createSubtitleSidebarSnapshotFixture(),
      getPlaybackPaused: () => false,
      getSubtitlePosition: () => null,
      getSubtitleStyle: () => null,
@@ -596,6 +644,7 @@ test('registerIpcHandlers awaits saveControllerPreference through request-respon
      tokenizeCurrentSubtitle: async () => null,
      getCurrentSubtitleRaw: () => '',
      getCurrentSubtitleAss: () => '',
+      getSubtitleSidebarSnapshot: async () => createSubtitleSidebarSnapshotFixture(),
      getPlaybackPaused: () => false,
      getSubtitlePosition: () => null,
      getSubtitleStyle: () => null,
@@ -667,6 +716,7 @@ test('registerIpcHandlers rejects malformed controller preference payloads', asy
      tokenizeCurrentSubtitle: async () => null,
      getCurrentSubtitleRaw: () => '',
      getCurrentSubtitleAss: () => '',
+      getSubtitleSidebarSnapshot: async () => createSubtitleSidebarSnapshotFixture(),
      getPlaybackPaused: () => false,
      getSubtitlePosition: () => null,
      getSubtitleStyle: () => null,
--- a/src/core/services/ipc.ts
+++ b/src/core/services/ipc.ts
@@ -6,6 +6,7 @@ import type {
  ResolvedControllerConfig,
  RuntimeOptionId,
  RuntimeOptionValue,
+  SubtitleSidebarSnapshot,
  SubtitlePosition,
  SubsyncManualRunRequest,
  SubsyncResult,
@@ -37,6 +38,7 @@ export interface IpcServiceDeps {
  tokenizeCurrentSubtitle: () => Promise<unknown>;
  getCurrentSubtitleRaw: () => string;
  getCurrentSubtitleAss: () => string;
+  getSubtitleSidebarSnapshot?: () => Promise<SubtitleSidebarSnapshot>;
  getPlaybackPaused: () => boolean | null;
  getSubtitlePosition: () => unknown;
  getSubtitleStyle: () => unknown;
@@ -143,6 +145,7 @@ export interface IpcDepsRuntimeOptions {
  tokenizeCurrentSubtitle: () => Promise<unknown>;
  getCurrentSubtitleRaw: () => string;
  getCurrentSubtitleAss: () => string;
+  getSubtitleSidebarSnapshot?: () => Promise<SubtitleSidebarSnapshot>;
  getPlaybackPaused: () => boolean | null;
  getSubtitlePosition: () => unknown;
  getSubtitleStyle: () => unknown;
@@ -190,6 +193,7 @@ export function createIpcDepsRuntime(options: IpcDepsRuntimeOptions): IpcService
    tokenizeCurrentSubtitle: options.tokenizeCurrentSubtitle,
    getCurrentSubtitleRaw: options.getCurrentSubtitleRaw,
    getCurrentSubtitleAss: options.getCurrentSubtitleAss,
+    getSubtitleSidebarSnapshot: options.getSubtitleSidebarSnapshot,
    getPlaybackPaused: options.getPlaybackPaused,
    getSubtitlePosition: options.getSubtitlePosition,
    getSubtitleStyle: options.getSubtitleStyle,
@@ -321,6 +325,13 @@ export function registerIpcHandlers(deps: IpcServiceDeps, ipc: IpcMainRegistrar
    return deps.getCurrentSubtitleAss();
  });

+  ipc.handle(IPC_CHANNELS.request.getSubtitleSidebarSnapshot, async () => {
+    if (!deps.getSubtitleSidebarSnapshot) {
+      throw new Error('Subtitle sidebar snapshot is unavailable.');
+    }
+    return await deps.getSubtitleSidebarSnapshot();
+  });
+
  ipc.handle(IPC_CHANNELS.request.getPlaybackPaused, () => {
    return deps.getPlaybackPaused();
  });
--- a/src/core/services/subtitle-cue-parser.test.ts
+++ b/src/core/services/subtitle-cue-parser.test.ts
@@ -1,7 +1,7 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
 import { parseSrtCues, parseAssCues, parseSubtitleCues } from './subtitle-cue-parser';
-import type { SubtitleCue } from './subtitle-cue-parser';
+import type { SubtitleCue } from '../../types';

 test('parseSrtCues parses basic SRT content', () => {
  const content = [
--- a/src/core/services/subtitle-cue-parser.ts
+++ b/src/core/services/subtitle-cue-parser.ts
@@ -183,7 +183,13 @@ export function parseSubtitleCues(content: string, filename: string): SubtitleCu
      cues = parseAssCues(content);
      break;
    default:
-      return [];
+      cues = [];
+  }
+
+  if (cues.length === 0) {
+    const assCues = parseAssCues(content);
+    const srtCues = parseSrtCues(content);
+    cues = assCues.length >= srtCues.length ? assCues : srtCues;
  }

  cues.sort((a, b) => a.startTime - b.startTime);
--- a/src/core/services/subtitle-prefetch.test.ts
+++ b/src/core/services/subtitle-prefetch.test.ts
@@ -1,8 +1,8 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
 import { computePriorityWindow, createSubtitlePrefetchService } from './subtitle-prefetch';
-import type { SubtitleCue } from './subtitle-cue-parser';
 import type { SubtitleData } from '../../types';
+import type { SubtitleCue } from '../../types';

 function makeCues(count: number, startOffset = 0): SubtitleCue[] {
  return Array.from({ length: count }, (_, i) => ({
--- a/src/core/services/subtitle-prefetch.ts
+++ b/src/core/services/subtitle-prefetch.ts
@@ -1,5 +1,5 @@
-import type { SubtitleCue } from './subtitle-cue-parser';
 import type { SubtitleData } from '../../types';
+import type { SubtitleCue } from '../../types';

 export interface SubtitlePrefetchServiceDeps {
  cues: SubtitleCue[];
--- a/src/main.ts
+++ b/src/main.ts
@@ -438,10 +438,11 @@ import { parseSubtitleCues } from './core/services/subtitle-cue-parser';
 import { createSubtitlePrefetchService } from './core/services/subtitle-prefetch';
 import type { SubtitlePrefetchService } from './core/services/subtitle-prefetch';
 import {
-  getActiveExternalSubtitleSource,
+  buildSubtitleSidebarSourceKey,
  resolveSubtitleSourcePath,
 } from './main/runtime/subtitle-prefetch-source';
 import { createSubtitlePrefetchInitController } from './main/runtime/subtitle-prefetch-init';
+import { codecToExtension } from './subsync/utils';

 if (process.platform === 'linux') {
  app.commandLine.appendSwitch('enable-features', 'GlobalShortcutsPortal');
@@ -1142,15 +1143,23 @@ function maybeSignalPluginAutoplayReady(

 let appTray: Tray | null = null;
 let tokenizeSubtitleDeferred: ((text: string) => Promise<SubtitleData>) | null = null;
+function withCurrentSubtitleTiming(payload: SubtitleData): SubtitleData {
+  return {
+    ...payload,
+    startTime: appState.mpvClient?.currentSubStart ?? null,
+    endTime: appState.mpvClient?.currentSubEnd ?? null,
+  };
+}
 function emitSubtitlePayload(payload: SubtitleData): void {
-  appState.currentSubtitleData = payload;
-  broadcastToOverlayWindows('subtitle:set', payload);
-  subtitleWsService.broadcast(payload, {
+  const timedPayload = withCurrentSubtitleTiming(payload);
+  appState.currentSubtitleData = timedPayload;
+  broadcastToOverlayWindows('subtitle:set', timedPayload);
+  subtitleWsService.broadcast(timedPayload, {
    enabled: getResolvedConfig().subtitleStyle.frequencyDictionary.enabled,
    topX: getResolvedConfig().subtitleStyle.frequencyDictionary.topX,
    mode: getResolvedConfig().subtitleStyle.frequencyDictionary.mode,
  });
-  annotationSubtitleWsService.broadcast(payload, {
+  annotationSubtitleWsService.broadcast(timedPayload, {
    enabled: getResolvedConfig().subtitleStyle.frequencyDictionary.enabled,
    topX: getResolvedConfig().subtitleStyle.frequencyDictionary.topX,
    mode: getResolvedConfig().subtitleStyle.frequencyDictionary.mode,
@@ -1200,6 +1209,10 @@ const subtitlePrefetchInitController = createSubtitlePrefetchInitController({
  isCacheFull: () => subtitleProcessingController.isCacheFull(),
  logInfo: (message) => logger.info(message),
  logWarn: (message) => logger.warn(message),
+  onParsedSubtitleCuesChanged: (cues, sourceKey) => {
+    appState.activeParsedSubtitleCues = cues ?? [];
+    appState.activeParsedSubtitleSource = sourceKey;
+  },
 });

 async function refreshSubtitlePrefetchFromActiveTrack(): Promise<void> {
@@ -1209,19 +1222,40 @@ async function refreshSubtitlePrefetchFromActiveTrack(): Promise<void> {
  }

  try {
-    const [trackListRaw, sidRaw] = await Promise.all([
+    const [currentExternalFilenameRaw, currentTrackRaw, trackListRaw, sidRaw, videoPathRaw] =
+      await Promise.all([
+        client.requestProperty('current-tracks/sub/external-filename').catch(() => null),
+      client.requestProperty('current-tracks/sub').catch(() => null),
      client.requestProperty('track-list'),
      client.requestProperty('sid'),
-    ]);
-    const externalFilename = getActiveExternalSubtitleSource(trackListRaw, sidRaw);
-    if (!externalFilename) {
+      client.requestProperty('path'),
+      ]);
+    const videoPath = typeof videoPathRaw === 'string' ? videoPathRaw : '';
+    if (!videoPath) {
      subtitlePrefetchInitController.cancelPendingInit();
      return;
    }
-    await subtitlePrefetchInitController.initSubtitlePrefetch(
-      externalFilename,
-      lastObservedTimePos,
+
+    const resolvedSource = await resolveActiveSubtitleSidebarSource(
+      currentExternalFilenameRaw,
+      currentTrackRaw,
+      trackListRaw,
+      sidRaw,
+      videoPath,
    );
+    if (!resolvedSource) {
+      subtitlePrefetchInitController.cancelPendingInit();
+      return;
+    }
+    try {
+      await subtitlePrefetchInitController.initSubtitlePrefetch(
+        resolvedSource.path,
+        lastObservedTimePos,
+        resolvedSource.sourceKey,
+      );
+    } finally {
+      await resolvedSource.cleanup?.();
+    }
  } catch {
    // Track list query failed; skip subtitle prefetch refresh.
  }
@@ -2965,6 +2999,8 @@ const { appReadyRuntimeRunner } = composeAppReadyRuntime({
            ? {
                text: appState.currentSubText,
                tokens: null,
+                startTime: appState.mpvClient?.currentSubStart ?? null,
+                endTime: appState.mpvClient?.currentSubEnd ?? null,
              }
            : null),
        () => ({
@@ -2983,6 +3019,8 @@ const { appReadyRuntimeRunner } = composeAppReadyRuntime({
            ? {
                text: appState.currentSubText,
                tokens: null,
+                startTime: appState.mpvClient?.currentSubStart ?? null,
+                endTime: appState.mpvClient?.currentSubEnd ?? null,
              }
            : null),
        () => ({
@@ -3257,6 +3295,9 @@ const {
    restoreMpvSubVisibility: () => {
      restoreOverlayMpvSubtitles();
    },
+    resetSubtitleSidebarEmbeddedLayout: () => {
+      resetSubtitleSidebarEmbeddedLayoutRuntime();
+    },
    getCurrentAnilistMediaKey: () => getCurrentAnilistMediaKey(),
    resetAnilistMediaTracking: (mediaKey) => {
      resetAnilistMediaTracking(mediaKey);
@@ -3475,6 +3516,11 @@ function createMpvClientRuntimeService(): MpvIpcClient {
  return createMpvClientRuntimeServiceHandler() as MpvIpcClient;
 }

+function resetSubtitleSidebarEmbeddedLayoutRuntime(): void {
+  sendMpvCommandRuntime(appState.mpvClient, ['set_property', 'video-margin-ratio-right', 0]);
+  sendMpvCommandRuntime(appState.mpvClient, ['set_property', 'video-pan-x', 0]);
+}
+
 function updateMpvSubtitleRenderMetrics(patch: Partial<MpvSubtitleRenderMetrics>): void {
  updateMpvSubtitleRenderMetricsHandler(patch);
 }
@@ -3919,6 +3965,176 @@ async function loadSubtitleSourceText(source: string): Promise<string> {
  return fs.promises.readFile(filePath, 'utf8');
 }

+type MpvSubtitleTrackLike = {
+  type?: unknown;
+  id?: unknown;
+  selected?: unknown;
+  external?: unknown;
+  codec?: unknown;
+  'ff-index'?: unknown;
+  'external-filename'?: unknown;
+};
+
+function parseTrackId(value: unknown): number | null {
+  if (typeof value === 'number' && Number.isInteger(value)) {
+    return value;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value.trim());
+    return Number.isInteger(parsed) ? parsed : null;
+  }
+  return null;
+}
+
+function getActiveSubtitleTrack(
+  currentTrackRaw: unknown,
+  trackListRaw: unknown,
+  sidRaw: unknown,
+): MpvSubtitleTrackLike | null {
+  if (currentTrackRaw && typeof currentTrackRaw === 'object') {
+    const track = currentTrackRaw as MpvSubtitleTrackLike;
+    if (track.type === undefined || track.type === 'sub') {
+      return track;
+    }
+  }
+
+  const sid = parseTrackId(sidRaw);
+  if (!Array.isArray(trackListRaw)) {
+    return null;
+  }
+
+  const bySid =
+    sid === null
+      ? null
+      : ((trackListRaw.find((entry: unknown) => {
+          if (!entry || typeof entry !== 'object') {
+            return false;
+          }
+          const track = entry as MpvSubtitleTrackLike;
+          return track.type === 'sub' && parseTrackId(track.id) === sid;
+        }) as MpvSubtitleTrackLike | undefined) ?? null);
+  if (bySid) {
+    return bySid;
+  }
+
+  return (
+    (trackListRaw.find((entry: unknown) => {
+      if (!entry || typeof entry !== 'object') {
+        return false;
+      }
+      const track = entry as MpvSubtitleTrackLike;
+      return track.type === 'sub' && track.selected === true;
+    }) as MpvSubtitleTrackLike | undefined) ?? null
+  );
+}
+
+function buildFfmpegSubtitleExtractionArgs(
+  videoPath: string,
+  ffIndex: number,
+  outputPath: string,
+): string[] {
+  return [
+    '-hide_banner',
+    '-nostdin',
+    '-y',
+    '-loglevel',
+    'error',
+    '-an',
+    '-vn',
+    '-i',
+    videoPath,
+    '-map',
+    `0:${ffIndex}`,
+    '-f',
+    path.extname(outputPath).slice(1),
+    outputPath,
+  ];
+}
+
+async function extractInternalSubtitleTrackToTempFile(
+  ffmpegPath: string,
+  videoPath: string,
+  track: MpvSubtitleTrackLike,
+): Promise<{ path: string; cleanup: () => Promise<void> } | null> {
+  const ffIndex = parseTrackId(track['ff-index']);
+  const codec = typeof track.codec === 'string' ? track.codec : null;
+  const extension = codecToExtension(codec ?? undefined);
+  if (ffIndex === null || extension === null) {
+    return null;
+  }
+
+  const tempDir = await fs.promises.mkdtemp(path.join(os.tmpdir(), 'subminer-sidebar-'));
+  const outputPath = path.join(tempDir, `track_${ffIndex}.${extension}`);
+
+  try {
+    await new Promise<void>((resolve, reject) => {
+      const child = spawn(
+        ffmpegPath,
+        buildFfmpegSubtitleExtractionArgs(videoPath, ffIndex, outputPath),
+      );
+      let stderr = '';
+      child.stderr.on('data', (chunk: Buffer) => {
+        stderr += chunk.toString();
+      });
+      child.on('error', (error) => {
+        reject(error);
+      });
+      child.on('close', (code) => {
+        if (code === 0) {
+          resolve();
+          return;
+        }
+        reject(new Error(stderr.trim() || `ffmpeg exited with code ${code ?? 'unknown'}`));
+      });
+    });
+  } catch (error) {
+    await fs.promises.rm(tempDir, { recursive: true, force: true }).catch(() => undefined);
+    throw error;
+  }
+
+  return {
+    path: outputPath,
+    cleanup: async () => {
+      await fs.promises.rm(tempDir, { recursive: true, force: true });
+    },
+  };
+}
+
+async function resolveActiveSubtitleSidebarSource(
+  currentExternalFilenameRaw: unknown,
+  currentTrackRaw: unknown,
+  trackListRaw: unknown,
+  sidRaw: unknown,
+  videoPath: string,
+): Promise<{ path: string; sourceKey: string; cleanup?: () => Promise<void> } | null> {
+  const currentExternalFilename =
+    typeof currentExternalFilenameRaw === 'string' ? currentExternalFilenameRaw.trim() : '';
+  if (currentExternalFilename) {
+    return { path: currentExternalFilename, sourceKey: currentExternalFilename };
+  }
+
+  const track = getActiveSubtitleTrack(currentTrackRaw, trackListRaw, sidRaw);
+  if (!track) {
+    return null;
+  }
+
+  const externalFilename =
+    typeof track['external-filename'] === 'string' ? track['external-filename'].trim() : '';
+  if (externalFilename) {
+    return { path: externalFilename, sourceKey: externalFilename };
+  }
+
+  const ffmpegPath = getResolvedConfig().subsync.ffmpeg_path.trim() || 'ffmpeg';
+  const extracted = await extractInternalSubtitleTrackToTempFile(ffmpegPath, videoPath, track);
+  if (!extracted) {
+    return null;
+  }
+  return {
+    ...extracted,
+    sourceKey: buildSubtitleSidebarSourceKey(videoPath, track, extracted.path),
+  };
+}
+
 const shiftSubtitleDelayToAdjacentCueHandler = createShiftSubtitleDelayToAdjacentCueHandler({
  getMpvClient: () => appState.mpvClient,
  loadSubtitleSourceText,
@@ -3976,9 +4192,99 @@ const { registerIpcRuntimeHandlers } = composeIpcRuntimeHandlers({
      openYomitanSettings: () => openYomitanSettings(),
      quitApp: () => requestAppQuit(),
      toggleVisibleOverlay: () => toggleVisibleOverlay(),
-      tokenizeCurrentSubtitle: () => tokenizeSubtitle(appState.currentSubText),
+      tokenizeCurrentSubtitle: async () => withCurrentSubtitleTiming(await tokenizeSubtitle(appState.currentSubText)),
      getCurrentSubtitleRaw: () => appState.currentSubText,
      getCurrentSubtitleAss: () => appState.currentSubAssText,
+      getSubtitleSidebarSnapshot: async () => {
+        const currentSubtitle = {
+          text: appState.currentSubText,
+          startTime: appState.mpvClient?.currentSubStart ?? null,
+          endTime: appState.mpvClient?.currentSubEnd ?? null,
+        };
+        const currentTimeSec = appState.mpvClient?.currentTimePos ?? null;
+        const config = getResolvedConfig().subtitleSidebar;
+        const client = appState.mpvClient;
+        if (!client?.connected) {
+          return {
+            cues: appState.activeParsedSubtitleCues,
+            currentTimeSec,
+            currentSubtitle,
+            config,
+          };
+        }
+
+        try {
+          const [
+            currentExternalFilenameRaw,
+            currentTrackRaw,
+            trackListRaw,
+            sidRaw,
+            videoPathRaw,
+          ] = await Promise.all([
+            client.requestProperty('current-tracks/sub/external-filename').catch(() => null),
+            client.requestProperty('current-tracks/sub').catch(() => null),
+            client.requestProperty('track-list'),
+            client.requestProperty('sid'),
+            client.requestProperty('path'),
+          ]);
+          const videoPath = typeof videoPathRaw === 'string' ? videoPathRaw : '';
+          if (!videoPath) {
+            return {
+              cues: appState.activeParsedSubtitleCues,
+              currentTimeSec,
+              currentSubtitle,
+              config,
+            };
+          }
+
+          const resolvedSource = await resolveActiveSubtitleSidebarSource(
+            currentExternalFilenameRaw,
+            currentTrackRaw,
+            trackListRaw,
+            sidRaw,
+            videoPath,
+          );
+          if (!resolvedSource) {
+            return {
+              cues: appState.activeParsedSubtitleCues,
+              currentTimeSec,
+              currentSubtitle,
+              config,
+            };
+          }
+
+          if (appState.activeParsedSubtitleSource === resolvedSource.sourceKey) {
+            return {
+              cues: appState.activeParsedSubtitleCues,
+              currentTimeSec,
+              currentSubtitle,
+              config,
+            };
+          }
+
+          try {
+            const content = await loadSubtitleSourceText(resolvedSource.path);
+            const cues = parseSubtitleCues(content, resolvedSource.path);
+            appState.activeParsedSubtitleCues = cues;
+            appState.activeParsedSubtitleSource = resolvedSource.sourceKey;
+            return {
+              cues,
+              currentTimeSec,
+              currentSubtitle,
+              config,
+            };
+          } finally {
+            await resolvedSource.cleanup?.();
+          }
+        } catch {
+          return {
+            cues: appState.activeParsedSubtitleCues,
+            currentTimeSec,
+            currentSubtitle,
+            config,
+          };
+        }
+      },
      getPlaybackPaused: () => appState.playbackPaused,
      getSubtitlePosition: () => loadSubtitlePosition(),
      getSubtitleStyle: () => {
--- a/src/main/dependencies.ts
+++ b/src/main/dependencies.ts
@@ -63,6 +63,7 @@ export interface MainIpcRuntimeServiceDepsParams {
  tokenizeCurrentSubtitle: IpcDepsRuntimeOptions['tokenizeCurrentSubtitle'];
  getCurrentSubtitleRaw: IpcDepsRuntimeOptions['getCurrentSubtitleRaw'];
  getCurrentSubtitleAss: IpcDepsRuntimeOptions['getCurrentSubtitleAss'];
+  getSubtitleSidebarSnapshot?: IpcDepsRuntimeOptions['getSubtitleSidebarSnapshot'];
  getPlaybackPaused: IpcDepsRuntimeOptions['getPlaybackPaused'];
  focusMainWindow?: IpcDepsRuntimeOptions['focusMainWindow'];
  getSubtitlePosition: IpcDepsRuntimeOptions['getSubtitlePosition'];
@@ -212,6 +213,7 @@ export function createMainIpcRuntimeServiceDeps(
    tokenizeCurrentSubtitle: params.tokenizeCurrentSubtitle,
    getCurrentSubtitleRaw: params.getCurrentSubtitleRaw,
    getCurrentSubtitleAss: params.getCurrentSubtitleAss,
+    getSubtitleSidebarSnapshot: params.getSubtitleSidebarSnapshot,
    getPlaybackPaused: params.getPlaybackPaused,
    getSubtitlePosition: params.getSubtitlePosition,
    getSubtitleStyle: params.getSubtitleStyle,
--- a/src/main/runtime/config-hot-reload-handlers.ts
+++ b/src/main/runtime/config-hot-reload-handlers.ts
@@ -36,6 +36,7 @@ export function buildConfigHotReloadPayload(config: ResolvedConfig): ConfigHotRe
  return {
    keybindings: resolveKeybindings(config, DEFAULT_KEYBINDINGS),
    subtitleStyle: resolveSubtitleStyleForRenderer(config),
+    subtitleSidebar: config.subtitleSidebar,
    secondarySubMode: config.secondarySub.defaultMode,
  };
 }
--- a/src/main/runtime/mpv-main-event-actions.test.ts
+++ b/src/main/runtime/mpv-main-event-actions.test.ts
@@ -82,6 +82,7 @@ test('media path change handler reports stop for empty path and probes media key
    updateCurrentMediaPath: (path) => calls.push(`path:${path}`),
    reportJellyfinRemoteStopped: () => calls.push('stopped'),
    restoreMpvSubVisibility: () => calls.push('restore-mpv-sub'),
+    resetSubtitleSidebarEmbeddedLayout: () => calls.push('reset-sidebar-layout'),
    getCurrentAnilistMediaKey: () => 'show:1',
    resetAnilistMediaTracking: (mediaKey) => calls.push(`reset:${String(mediaKey)}`),
    maybeProbeAnilistDuration: (mediaKey) => calls.push(`probe:${mediaKey}`),
@@ -97,6 +98,7 @@ test('media path change handler reports stop for empty path and probes media key
  assert.deepEqual(calls, [
    'flush-playback',
    'path:',
+    'reset-sidebar-layout',
    'stopped',
    'restore-mpv-sub',
    'reset:show:1',
@@ -113,6 +115,7 @@ test('media path change handler signals autoplay-ready fast path for warm non-em
    updateCurrentMediaPath: (path) => calls.push(`path:${path}`),
    reportJellyfinRemoteStopped: () => calls.push('stopped'),
    restoreMpvSubVisibility: () => calls.push('restore-mpv-sub'),
+    resetSubtitleSidebarEmbeddedLayout: () => calls.push('reset-sidebar-layout'),
    getCurrentAnilistMediaKey: () => null,
    resetAnilistMediaTracking: (mediaKey) => calls.push(`reset:${String(mediaKey)}`),
    maybeProbeAnilistDuration: (mediaKey) => calls.push(`probe:${mediaKey}`),
@@ -128,35 +131,7 @@ test('media path change handler signals autoplay-ready fast path for warm non-em

  assert.deepEqual(calls, [
    'path:/tmp/video.mkv',
-    'reset:null',
-    'sync',
-    'dict-sync',
-    'autoplay:/tmp/video.mkv',
-    'presence',
-  ]);
-});
-
-test('media path change handler ignores playback flush for non-empty path', () => {
-  const calls: string[] = [];
-  const handler = createHandleMpvMediaPathChangeHandler({
-    updateCurrentMediaPath: (path) => calls.push(`path:${path}`),
-    reportJellyfinRemoteStopped: () => calls.push('stopped'),
-    restoreMpvSubVisibility: () => calls.push('restore-mpv-sub'),
-    getCurrentAnilistMediaKey: () => null,
-    resetAnilistMediaTracking: (mediaKey) => calls.push(`reset:${String(mediaKey)}`),
-    maybeProbeAnilistDuration: (mediaKey) => calls.push(`probe:${mediaKey}`),
-    ensureAnilistMediaGuess: (mediaKey) => calls.push(`guess:${mediaKey}`),
-    syncImmersionMediaState: () => calls.push('sync'),
-    flushPlaybackPositionOnMediaPathClear: () => calls.push('flush-playback'),
-    scheduleCharacterDictionarySync: () => calls.push('dict-sync'),
-    signalAutoplayReadyIfWarm: (path) => calls.push(`autoplay:${path}`),
-    refreshDiscordPresence: () => calls.push('presence'),
-  });
-
-  handler({ path: '/tmp/video.mkv' });
-  assert.ok(!calls.includes('flush-playback'));
-  assert.deepEqual(calls, [
-    'path:/tmp/video.mkv',
+    'reset-sidebar-layout',
    'reset:null',
    'sync',
    'dict-sync',
--- a/src/main/runtime/mpv-main-event-actions.ts
+++ b/src/main/runtime/mpv-main-event-actions.ts
@@ -46,6 +46,7 @@ export function createHandleMpvMediaPathChangeHandler(deps: {
  updateCurrentMediaPath: (path: string) => void;
  reportJellyfinRemoteStopped: () => void;
  restoreMpvSubVisibility: () => void;
+  resetSubtitleSidebarEmbeddedLayout: () => void;
  getCurrentAnilistMediaKey: () => string | null;
  resetAnilistMediaTracking: (mediaKey: string | null) => void;
  maybeProbeAnilistDuration: (mediaKey: string) => void;
@@ -62,6 +63,7 @@ export function createHandleMpvMediaPathChangeHandler(deps: {
      deps.flushPlaybackPositionOnMediaPathClear?.(normalizedPath);
    }
    deps.updateCurrentMediaPath(normalizedPath);
+    deps.resetSubtitleSidebarEmbeddedLayout();
    if (!normalizedPath) {
      deps.reportJellyfinRemoteStopped();
      deps.restoreMpvSubVisibility();
--- a/src/main/runtime/mpv-main-event-bindings.test.ts
+++ b/src/main/runtime/mpv-main-event-bindings.test.ts
@@ -9,6 +9,7 @@ test('main mpv event binder wires callbacks through to runtime deps', () => {
  const bind = createBindMpvMainEventHandlersHandler({
    reportJellyfinRemoteStopped: () => calls.push('remote-stopped'),
    syncOverlayMpvSubtitleSuppression: () => calls.push('sync-overlay-mpv-sub'),
+    resetSubtitleSidebarEmbeddedLayout: () => calls.push('reset-sidebar-layout'),
    hasInitialJellyfinPlayArg: () => false,
    isOverlayRuntimeInitialized: () => false,
    isQuitOnDisconnectArmed: () => false,
@@ -67,6 +68,7 @@ test('main mpv event binder wires callbacks through to runtime deps', () => {
    },
  });

+  handlers.get('connection-change')?.({ connected: true });
  handlers.get('subtitle-change')?.({ text: 'line' });
  handlers.get('subtitle-track-change')?.({ sid: 3 });
  handlers.get('subtitle-track-list-change')?.({ trackList: [] });
@@ -76,6 +78,7 @@ test('main mpv event binder wires callbacks through to runtime deps', () => {
  handlers.get('pause-change')?.({ paused: true });

  assert.ok(calls.includes('set-sub:line'));
+  assert.ok(calls.includes('reset-sidebar-layout'));
  assert.ok(calls.includes('broadcast-sub:line'));
  assert.ok(calls.includes('subtitle-change:line'));
  assert.ok(calls.includes('subtitle-track-change'));
--- a/src/main/runtime/mpv-main-event-bindings.ts
+++ b/src/main/runtime/mpv-main-event-bindings.ts
@@ -21,6 +21,7 @@ type MpvEventClient = Parameters<ReturnType<typeof createBindMpvClientEventHandl
 export function createBindMpvMainEventHandlersHandler(deps: {
  reportJellyfinRemoteStopped: () => void;
  syncOverlayMpvSubtitleSuppression: () => void;
+  resetSubtitleSidebarEmbeddedLayout: () => void;
  scheduleCharacterDictionarySync?: () => void;
  hasInitialJellyfinPlayArg: () => boolean;
  isOverlayRuntimeInitialized: () => boolean;
@@ -83,6 +84,12 @@ export function createBindMpvMainEventHandlersHandler(deps: {
      isMpvConnected: () => deps.isMpvConnected(),
      quitApp: () => deps.quitApp(),
    });
+    const handleMpvConnectionChangeWithSidebarReset = ({ connected }: { connected: boolean }): void => {
+      if (connected) {
+        deps.resetSubtitleSidebarEmbeddedLayout();
+      }
+      handleMpvConnectionChange({ connected });
+    };
    const handleMpvSubtitleTiming = createHandleMpvSubtitleTimingHandler({
      recordImmersionSubtitleLine: (text, start, end) =>
        deps.recordImmersionSubtitleLine(text, start, end),
@@ -110,6 +117,7 @@ export function createBindMpvMainEventHandlersHandler(deps: {
      updateCurrentMediaPath: (path) => deps.updateCurrentMediaPath(path),
      reportJellyfinRemoteStopped: () => deps.reportJellyfinRemoteStopped(),
      restoreMpvSubVisibility: () => deps.restoreMpvSubVisibility(),
+      resetSubtitleSidebarEmbeddedLayout: () => deps.resetSubtitleSidebarEmbeddedLayout(),
      getCurrentAnilistMediaKey: () => deps.getCurrentAnilistMediaKey(),
      resetAnilistMediaTracking: (mediaKey) => deps.resetAnilistMediaTracking(mediaKey),
      maybeProbeAnilistDuration: (mediaKey) => deps.maybeProbeAnilistDuration(mediaKey),
@@ -150,7 +158,7 @@ export function createBindMpvMainEventHandlersHandler(deps: {
    });

    createBindMpvClientEventHandlers({
-      onConnectionChange: handleMpvConnectionChange,
+      onConnectionChange: handleMpvConnectionChangeWithSidebarReset,
      onSubtitleChange: handleMpvSubtitleChange,
      onSubtitleAssChange: handleMpvSubtitleAssChange,
      onSecondarySubtitleChange: handleMpvSecondarySubtitleChange,
--- a/src/main/runtime/mpv-main-event-main-deps.test.ts
+++ b/src/main/runtime/mpv-main-event-main-deps.test.ts
@@ -47,6 +47,7 @@ test('mpv main event main deps map app state updates and delegate callbacks', as
    ensureImmersionTrackerInitialized: () => calls.push('ensure-immersion'),
    updateCurrentMediaPath: (path) => calls.push(`path:${path}`),
    restoreMpvSubVisibility: () => calls.push('restore-mpv-sub'),
+    resetSubtitleSidebarEmbeddedLayout: () => calls.push('reset-sidebar-layout'),
    getCurrentAnilistMediaKey: () => 'media-key',
    resetAnilistMediaTracking: (mediaKey) => calls.push(`reset:${mediaKey}`),
    maybeProbeAnilistDuration: (mediaKey) => calls.push(`probe:${mediaKey}`),
@@ -82,6 +83,7 @@ test('mpv main event main deps map app state updates and delegate callbacks', as
  deps.broadcastSecondarySubtitle('sec');
  deps.updateCurrentMediaPath('/tmp/video');
  deps.restoreMpvSubVisibility();
+  deps.resetSubtitleSidebarEmbeddedLayout();
  assert.equal(deps.getCurrentAnilistMediaKey(), 'media-key');
  deps.resetAnilistMediaTracking('media-key');
  deps.maybeProbeAnilistDuration('media-key');
@@ -112,6 +114,5 @@ test('mpv main event main deps map app state updates and delegate callbacks', as
  assert.ok(calls.includes('metrics'));
  assert.ok(calls.includes('presence-refresh'));
  assert.ok(calls.includes('restore-mpv-sub'));
-  assert.ok(calls.includes('immersion-time:12.25'));
-  assert.ok(calls.includes('immersion-time:18.75'));
+  assert.ok(calls.includes('reset-sidebar-layout'));
 });
--- a/src/main/runtime/mpv-main-event-main-deps.ts
+++ b/src/main/runtime/mpv-main-event-main-deps.ts
@@ -50,6 +50,7 @@ export function createBuildBindMpvMainEventHandlersMainDepsHandler(deps: {
  onSubtitleTrackListChange?: (trackList: unknown[] | null) => void;
  updateCurrentMediaPath: (path: string) => void;
  restoreMpvSubVisibility: () => void;
+  resetSubtitleSidebarEmbeddedLayout?: () => void;
  getCurrentAnilistMediaKey: () => string | null;
  resetAnilistMediaTracking: (mediaKey: string | null) => void;
  maybeProbeAnilistDuration: (mediaKey: string) => void;
@@ -146,6 +147,7 @@ export function createBuildBindMpvMainEventHandlersMainDepsHandler(deps: {
      deps.broadcastToOverlayWindows('secondary-subtitle:set', text),
    updateCurrentMediaPath: (path: string) => deps.updateCurrentMediaPath(path),
    restoreMpvSubVisibility: () => deps.restoreMpvSubVisibility(),
+    resetSubtitleSidebarEmbeddedLayout: () => deps.resetSubtitleSidebarEmbeddedLayout?.(),
    getCurrentAnilistMediaKey: () => deps.getCurrentAnilistMediaKey(),
    resetAnilistMediaTracking: (mediaKey: string | null) =>
      deps.resetAnilistMediaTracking(mediaKey),
--- a/src/main/runtime/subtitle-prefetch-init.test.ts
+++ b/src/main/runtime/subtitle-prefetch-init.test.ts
@@ -1,7 +1,7 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
-import type { SubtitleCue } from '../../core/services/subtitle-cue-parser';
 import type { SubtitlePrefetchService } from '../../core/services/subtitle-prefetch';
+import type { SubtitleCue } from '../../types';
 import { createSubtitlePrefetchInitController } from './subtitle-prefetch-init';

 function createDeferred<T>(): {
@@ -112,3 +112,125 @@ test('cancelPendingInit prevents an in-flight load from attaching a stale servic
  assert.equal(currentService, null);
  assert.deepEqual(started, []);
 });
+
+test('subtitle prefetch init publishes parsed cues and clears them on cancel', async () => {
+  const deferred = createDeferred<string>();
+  let currentService: SubtitlePrefetchService | null = null;
+  const cueUpdates: Array<SubtitleCue[] | null> = [];
+
+  const controller = createSubtitlePrefetchInitController({
+    getCurrentService: () => currentService,
+    setCurrentService: (service) => {
+      currentService = service;
+    },
+    loadSubtitleSourceText: async () => await deferred.promise,
+    parseSubtitleCues: () => [
+      { startTime: 1, endTime: 2, text: 'first' },
+      { startTime: 3, endTime: 4, text: 'second' },
+    ],
+    createSubtitlePrefetchService: () => ({
+      start: () => {},
+      stop: () => {},
+      onSeek: () => {},
+      pause: () => {},
+      resume: () => {},
+    }),
+    tokenizeSubtitle: async () => null,
+    preCacheTokenization: () => {},
+    isCacheFull: () => false,
+    logInfo: () => {},
+    logWarn: () => {},
+    onParsedSubtitleCuesChanged: (cues) => {
+      cueUpdates.push(cues);
+    },
+  });
+
+  const initPromise = controller.initSubtitlePrefetch('episode.ass', 12);
+  deferred.resolve('content');
+  await initPromise;
+
+  controller.cancelPendingInit();
+
+  assert.deepEqual(cueUpdates, [
+    [
+      { startTime: 1, endTime: 2, text: 'first' },
+      { startTime: 3, endTime: 4, text: 'second' },
+    ],
+    null,
+  ]);
+});
+
+test('subtitle prefetch init publishes the provided stable source key instead of the load path', async () => {
+  const deferred = createDeferred<string>();
+  let currentService: SubtitlePrefetchService | null = null;
+  const sourceUpdates: Array<string | null> = [];
+
+  const controller = createSubtitlePrefetchInitController({
+    getCurrentService: () => currentService,
+    setCurrentService: (service) => {
+      currentService = service;
+    },
+    loadSubtitleSourceText: async () => await deferred.promise,
+    parseSubtitleCues: () => [{ startTime: 1, endTime: 2, text: 'first' }],
+    createSubtitlePrefetchService: () => ({
+      start: () => {},
+      stop: () => {},
+      onSeek: () => {},
+      pause: () => {},
+      resume: () => {},
+    }),
+    tokenizeSubtitle: async () => null,
+    preCacheTokenization: () => {},
+    isCacheFull: () => false,
+    logInfo: () => {},
+    logWarn: () => {},
+    onParsedSubtitleCuesChanged: (_cues, source) => {
+      sourceUpdates.push(source);
+    },
+  });
+
+  const initPromise = controller.initSubtitlePrefetch(
+    '/tmp/subminer-sidebar-123/track_7.ass',
+    12,
+    'internal:/media/episode01.mkv:track:3:ff:7',
+  );
+  deferred.resolve('content');
+  await initPromise;
+
+  assert.deepEqual(sourceUpdates, ['internal:/media/episode01.mkv:track:3:ff:7']);
+});
+
+test('subtitle prefetch init clears parsed cues when initialization fails', async () => {
+  const cueUpdates: Array<SubtitleCue[] | null> = [];
+  let currentService: SubtitlePrefetchService | null = null;
+
+  const controller = createSubtitlePrefetchInitController({
+    getCurrentService: () => currentService,
+    setCurrentService: (service) => {
+      currentService = service;
+    },
+    loadSubtitleSourceText: async () => {
+      throw new Error('boom');
+    },
+    parseSubtitleCues: () => [{ startTime: 1, endTime: 2, text: 'first' }],
+    createSubtitlePrefetchService: () => ({
+      start: () => {},
+      stop: () => {},
+      onSeek: () => {},
+      pause: () => {},
+      resume: () => {},
+    }),
+    tokenizeSubtitle: async () => null,
+    preCacheTokenization: () => {},
+    isCacheFull: () => false,
+    logInfo: () => {},
+    logWarn: () => {},
+    onParsedSubtitleCuesChanged: (cues) => {
+      cueUpdates.push(cues);
+    },
+  });
+
+  await controller.initSubtitlePrefetch('episode.ass', 12);
+
+  assert.deepEqual(cueUpdates, [null]);
+});
--- a/src/main/runtime/subtitle-prefetch-init.ts
+++ b/src/main/runtime/subtitle-prefetch-init.ts
@@ -1,9 +1,9 @@
-import type { SubtitleCue } from '../../core/services/subtitle-cue-parser';
 import type {
  SubtitlePrefetchService,
  SubtitlePrefetchServiceDeps,
 } from '../../core/services/subtitle-prefetch';
 import type { SubtitleData } from '../../types';
+import type { SubtitleCue } from '../../types';

 export interface SubtitlePrefetchInitControllerDeps {
  getCurrentService: () => SubtitlePrefetchService | null;
@@ -16,11 +16,16 @@ export interface SubtitlePrefetchInitControllerDeps {
  isCacheFull: () => boolean;
  logInfo: (message: string) => void;
  logWarn: (message: string) => void;
+  onParsedSubtitleCuesChanged?: (cues: SubtitleCue[] | null, sourceKey: string | null) => void;
 }

 export interface SubtitlePrefetchInitController {
  cancelPendingInit: () => void;
-  initSubtitlePrefetch: (externalFilename: string, currentTimePos: number) => Promise<void>;
+  initSubtitlePrefetch: (
+    sourcePath: string,
+    currentTimePos: number,
+    sourceKey?: string,
+  ) => Promise<void>;
 }

 export function createSubtitlePrefetchInitController(
@@ -32,24 +37,29 @@ export function createSubtitlePrefetchInitController(
    initRevision += 1;
    deps.getCurrentService()?.stop();
    deps.setCurrentService(null);
+    deps.onParsedSubtitleCuesChanged?.(null, null);
  };

  const initSubtitlePrefetch = async (
-    externalFilename: string,
+    sourcePath: string,
    currentTimePos: number,
+    sourceKey = sourcePath,
  ): Promise<void> => {
    const revision = ++initRevision;
    deps.getCurrentService()?.stop();
    deps.setCurrentService(null);

    try {
-      const content = await deps.loadSubtitleSourceText(externalFilename);
+      const content = await deps.loadSubtitleSourceText(sourcePath);
      if (revision !== initRevision) {
        return;
      }

-      const cues = deps.parseSubtitleCues(content, externalFilename);
+      const cues = deps.parseSubtitleCues(content, sourcePath);
      if (revision !== initRevision || cues.length === 0) {
+        if (revision === initRevision) {
+          deps.onParsedSubtitleCuesChanged?.(null, null);
+        }
        return;
      }

@@ -65,12 +75,14 @@ export function createSubtitlePrefetchInitController(
      }

      deps.setCurrentService(nextService);
+      deps.onParsedSubtitleCuesChanged?.(cues, sourceKey);
      nextService.start(currentTimePos);
      deps.logInfo(
-        `[subtitle-prefetch] started prefetching ${cues.length} cues from ${externalFilename}`,
+        `[subtitle-prefetch] started prefetching ${cues.length} cues from ${sourcePath}`,
      );
    } catch (error) {
      if (revision === initRevision) {
+        deps.onParsedSubtitleCuesChanged?.(null, null);
        deps.logWarn(`[subtitle-prefetch] failed to initialize: ${(error as Error).message}`);
      }
    }
--- a/src/main/runtime/subtitle-prefetch-source.test.ts
+++ b/src/main/runtime/subtitle-prefetch-source.test.ts
@@ -1,6 +1,7 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
 import {
+  buildSubtitleSidebarSourceKey,
  getActiveExternalSubtitleSource,
  resolveSubtitleSourcePath,
 } from './subtitle-prefetch-source';
@@ -17,6 +18,15 @@ test('getActiveExternalSubtitleSource returns the active external subtitle path'
  assert.equal(source, 'https://host/subs.ass');
 });

+test('getActiveExternalSubtitleSource normalizes integer-like string track ids', () => {
+  const source = getActiveExternalSubtitleSource(
+    [{ type: 'sub', id: '2', external: true, 'external-filename': ' /tmp/subs.ass ' }],
+    '2',
+  );
+
+  assert.equal(source, '/tmp/subs.ass');
+});
+
 test('getActiveExternalSubtitleSource returns null when the selected track is not external', () => {
  const source = getActiveExternalSubtitleSource(
    [{ type: 'sub', id: 2, external: false, 'external-filename': '/tmp/subs.ass' }],
@@ -48,3 +58,38 @@ test('resolveSubtitleSourcePath returns the original source for malformed file U

  assert.equal(resolveSubtitleSourcePath(source), source);
 });
+
+test('buildSubtitleSidebarSourceKey uses a stable identifier for internal subtitle tracks', () => {
+  const firstKey = buildSubtitleSidebarSourceKey('/media/episode01.mkv', {
+    id: 3,
+    'ff-index': 7,
+    title: 'English',
+    lang: 'eng',
+    codec: 'ass',
+  });
+  const secondKey = buildSubtitleSidebarSourceKey('/media/episode01.mkv', {
+    id: 3,
+    'ff-index': 7,
+    title: 'English',
+    lang: 'eng',
+    codec: 'ass',
+  });
+
+  assert.equal(firstKey, secondKey);
+  assert.equal(firstKey, 'internal:/media/episode01.mkv:track:3:ff:7');
+});
+
+test('buildSubtitleSidebarSourceKey normalizes integer-like string track metadata', () => {
+  const key = buildSubtitleSidebarSourceKey('/media/episode01.mkv', {
+    id: '3',
+    'ff-index': '7',
+  });
+
+  assert.equal(key, 'internal:/media/episode01.mkv:track:3:ff:7');
+});
+
+test('buildSubtitleSidebarSourceKey falls back to source path when no track metadata is available', () => {
+  const key = buildSubtitleSidebarSourceKey('/media/episode01.mkv', null, '/tmp/subtitle.ass');
+
+  assert.equal(key, '/tmp/subtitle.ass');
+});
--- a/src/main/runtime/subtitle-prefetch-source.ts
+++ b/src/main/runtime/subtitle-prefetch-source.ts
@@ -1,5 +1,16 @@
 import { fileURLToPath } from 'node:url';

+function parseTrackId(value: unknown): number | null {
+  if (typeof value === 'number' && Number.isInteger(value)) {
+    return value;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value.trim());
+    return Number.isInteger(parsed) ? parsed : null;
+  }
+  return null;
+}
+
 export function getActiveExternalSubtitleSource(
  trackListRaw: unknown,
  sidRaw: unknown,
@@ -8,9 +19,8 @@ export function getActiveExternalSubtitleSource(
    return null;
  }

-  const sid =
-    typeof sidRaw === 'number' ? sidRaw : typeof sidRaw === 'string' ? Number(sidRaw) : null;
-  if (sid == null || !Number.isFinite(sid)) {
+  const sid = parseTrackId(sidRaw);
+  if (sid === null) {
    return null;
  }

@@ -19,7 +29,7 @@ export function getActiveExternalSubtitleSource(
      return false;
    }
    const track = entry as Record<string, unknown>;
-    return track.type === 'sub' && track.id === sid && track.external === true;
+    return track.type === 'sub' && parseTrackId(track.id) === sid && track.external === true;
  }) as Record<string, unknown> | undefined;

  const externalFilename =
@@ -40,3 +50,21 @@ export function resolveSubtitleSourcePath(source: string): string {
    return source;
  }
 }
+
+export function buildSubtitleSidebarSourceKey(
+  videoPath: string,
+  track: unknown,
+  fallbackSourcePath?: string,
+): string {
+  const normalizedVideoPath = videoPath.trim();
+  if (track && typeof track === 'object' && normalizedVideoPath) {
+    const subtitleTrack = track as Record<string, unknown>;
+    const trackId = parseTrackId(subtitleTrack.id);
+    const ffIndex = parseTrackId(subtitleTrack['ff-index']);
+    if (trackId !== null || ffIndex !== null) {
+      return `internal:${normalizedVideoPath}:track:${trackId ?? 'unknown'}:ff:${ffIndex ?? 'unknown'}`;
+    }
+  }
+
+  return fallbackSourcePath ?? normalizedVideoPath;
+}
--- a/src/main/state.ts
+++ b/src/main/state.ts
@@ -9,6 +9,7 @@ import type {
  KikuFieldGroupingChoice,
  JlptLevel,
  FrequencyDictionaryLookup,
+  SubtitleCue,
 } from '../types';
 import type { CliArgs } from '../cli/args';
 import type { SubtitleTimingTracker } from '../subtitle-timing-tracker';
@@ -158,6 +159,8 @@ export interface AppState {
  currentSubText: string;
  currentSubAssText: string;
  currentSubtitleData: SubtitleData | null;
+  activeParsedSubtitleCues: SubtitleCue[];
+  activeParsedSubtitleSource: string | null;
  windowTracker: BaseWindowTracker | null;
  subtitlePosition: SubtitlePosition | null;
  currentMediaPath: string | null;
@@ -238,6 +241,8 @@ export function createAppState(values: AppStateInitialValues): AppState {
    currentSubText: '',
    currentSubAssText: '',
    currentSubtitleData: null,
+    activeParsedSubtitleCues: [],
+    activeParsedSubtitleSource: null,
    windowTracker: null,
    subtitlePosition: null,
    currentMediaPath: null,
--- a/src/preload.ts
+++ b/src/preload.ts
@@ -169,6 +169,8 @@ const electronAPI: ElectronAPI = {
    ipcRenderer.invoke(IPC_CHANNELS.request.getCurrentSubtitleRaw),
  getCurrentSubtitleAss: (): Promise<string> =>
    ipcRenderer.invoke(IPC_CHANNELS.request.getCurrentSubtitleAss),
+  getSubtitleSidebarSnapshot: () =>
+    ipcRenderer.invoke(IPC_CHANNELS.request.getSubtitleSidebarSnapshot),
  getPlaybackPaused: (): Promise<boolean | null> =>
    ipcRenderer.invoke(IPC_CHANNELS.request.getPlaybackPaused),
  onSubtitleAss: (callback: (assText: string) => void) => {
--- a/src/release-workflow.test.ts
+++ b/src/release-workflow.test.ts
@@ -10,6 +10,9 @@ const makefile = readFileSync(makefilePath, 'utf8');
 const packageJsonPath = resolve(__dirname, '../package.json');
 const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8')) as {
  scripts: Record<string, string>;
+  build?: {
+    files?: string[];
+  };
 };

 test('publish release leaves prerelease unset so gh creates a normal release', () => {
@@ -65,6 +68,18 @@ test('release package scripts disable implicit electron-builder publishing', ()
  assert.match(packageJson.scripts['build:win:unsigned'] ?? '', /build-win-unsigned\.mjs/);
 });

+test('release packaging keeps default file inclusion and excludes large source-only trees explicitly', () => {
+  const files = packageJson.build?.files ?? [];
+  assert.ok(files.includes('**/*'));
+  assert.ok(files.includes('!src{,/**/*}'));
+  assert.ok(files.includes('!launcher{,/**/*}'));
+  assert.ok(files.includes('!stats/src{,/**/*}'));
+  assert.ok(files.includes('!.tmp{,/**/*}'));
+  assert.ok(files.includes('!release-*{,/**/*}'));
+  assert.ok(files.includes('!vendor/subminer-yomitan{,/**/*}'));
+  assert.ok(files.includes('!vendor/texthooker-ui/src{,/**/*}'));
+});
+
 test('config example generation runs directly from source without unrelated bundle prerequisites', () => {
  assert.equal(
    packageJson.scripts['generate:config-example'],
--- a/src/renderer/handlers/keyboard.ts
+++ b/src/renderer/handlers/keyboard.ts
@@ -27,6 +27,7 @@ export function createKeyboardHandlers(
    getPlaybackPaused: () => Promise<boolean | null>;
    openControllerSelectModal: () => void;
    openControllerDebugModal: () => void;
+    toggleSubtitleSidebarModal?: () => void;
  },
 ) {
  // Timeout for the modal chord capture window (e.g. Y followed by H/K).
@@ -181,6 +182,26 @@ export function createKeyboardHandlers(
    return !e.ctrlKey && !e.metaKey && e.altKey && !e.repeat && e.code === 'KeyC';
  }

+  function isSubtitleSidebarToggle(e: KeyboardEvent): boolean {
+    const toggleKey = ctx.state.subtitleSidebarToggleKey;
+    if (!toggleKey) return false;
+    const isBackslashConfigured = toggleKey === 'Backslash' || toggleKey === '\\';
+    const isBackslashLikeCode = ['Backslash', 'IntlBackslash', 'IntlYen'].includes(e.code);
+    const keyMatches =
+      toggleKey === e.code ||
+      (isBackslashConfigured && isBackslashLikeCode) ||
+      (isBackslashConfigured && e.key === '\\') ||
+      (toggleKey.length === 1 && e.key === toggleKey);
+
+    return (
+      keyMatches &&
+      !e.ctrlKey &&
+      !e.altKey &&
+      !e.metaKey &&
+      !e.repeat
+    );
+  }
+
  function isStatsOverlayToggle(e: KeyboardEvent): boolean {
    return (
      e.code === ctx.state.statsToggleKey &&
@@ -838,6 +859,12 @@ export function createKeyboardHandlers(
        return;
      }

+      if (isSubtitleSidebarToggle(e)) {
+        e.preventDefault();
+        options.toggleSubtitleSidebarModal?.();
+        return;
+      }
+
      if (
        (ctx.state.yomitanPopupVisible || isYomitanPopupVisible(document)) &&
        !isControllerModalShortcut(e)
--- a/src/renderer/handlers/mouse.test.ts
+++ b/src/renderer/handlers/mouse.test.ts
@@ -1,6 +1,7 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';

+import type { SubtitleSidebarConfig } from '../../types';
 import { createMouseHandlers } from './mouse.js';
 import { YOMITAN_POPUP_HIDDEN_EVENT, YOMITAN_POPUP_SHOWN_EVENT } from '../yomitan-popup.js';

@@ -39,6 +40,7 @@ function createMouseTestContext() {
  const overlayClassList = createClassList();
  const subtitleRootClassList = createClassList();
  const subtitleContainerClassList = createClassList();
+  const secondarySubContainerClassList = createClassList();

  const ctx = {
    dom: {
@@ -54,6 +56,7 @@ function createMouseTestContext() {
        addEventListener: () => {},
      },
      secondarySubContainer: {
+        classList: secondarySubContainerClassList,
        addEventListener: () => {},
      },
    },
@@ -63,6 +66,9 @@ function createMouseTestContext() {
    },
    state: {
      isOverSubtitle: false,
+      isOverSubtitleSidebar: false,
+      subtitleSidebarModalOpen: false,
+      subtitleSidebarConfig: null as SubtitleSidebarConfig | null,
      isDragging: false,
      dragStartY: 0,
      startYPercent: 0,
@@ -72,7 +78,7 @@ function createMouseTestContext() {
  return ctx;
 }

-test('auto-pause on subtitle hover pauses on enter and resumes on leave when enabled', async () => {
+test('secondary hover pauses on enter, reveals secondary subtitle, and resumes on leave when enabled', async () => {
  const ctx = createMouseTestContext();
  const mpvCommands: Array<(string | number)[]> = [];

@@ -92,8 +98,10 @@ test('auto-pause on subtitle hover pauses on enter and resumes on leave when ena
    },
  });

-  await handlers.handleMouseEnter();
-  await handlers.handleMouseLeave();
+  await handlers.handleSecondaryMouseEnter();
+  assert.equal(ctx.dom.secondarySubContainer.classList.contains('secondary-sub-hover-active'), true);
+  await handlers.handleSecondaryMouseLeave();
+  assert.equal(ctx.dom.secondarySubContainer.classList.contains('secondary-sub-hover-active'), false);

  assert.deepEqual(mpvCommands, [
    ['set_property', 'pause', 'yes'],
@@ -101,6 +109,68 @@ test('auto-pause on subtitle hover pauses on enter and resumes on leave when ena
  ]);
 });

+test('moving between primary and secondary subtitle containers keeps the hover pause active', async () => {
+  const ctx = createMouseTestContext();
+  const mpvCommands: Array<(string | number)[]> = [];
+
+  const handlers = createMouseHandlers(ctx as never, {
+    modalStateReader: {
+      isAnySettingsModalOpen: () => false,
+      isAnyModalOpen: () => false,
+    },
+    applyYPercent: () => {},
+    getCurrentYPercent: () => 10,
+    persistSubtitlePositionPatch: () => {},
+    getSubtitleHoverAutoPauseEnabled: () => true,
+    getYomitanPopupAutoPauseEnabled: () => false,
+    getPlaybackPaused: async () => false,
+    sendMpvCommand: (command) => {
+      mpvCommands.push(command);
+    },
+  });
+
+  await handlers.handleSecondaryMouseEnter();
+  await handlers.handleSecondaryMouseLeave({
+    relatedTarget: ctx.dom.subtitleContainer,
+  } as unknown as MouseEvent);
+  await handlers.handlePrimaryMouseEnter({
+    relatedTarget: ctx.dom.secondarySubContainer,
+  } as unknown as MouseEvent);
+
+  assert.equal(ctx.state.isOverSubtitle, true);
+  assert.deepEqual(mpvCommands, [['set_property', 'pause', 'yes']]);
+});
+
+test('secondary leave toward primary subtitle container clears the secondary hover class', async () => {
+  const ctx = createMouseTestContext();
+  const mpvCommands: Array<(string | number)[]> = [];
+
+  const handlers = createMouseHandlers(ctx as never, {
+    modalStateReader: {
+      isAnySettingsModalOpen: () => false,
+      isAnyModalOpen: () => false,
+    },
+    applyYPercent: () => {},
+    getCurrentYPercent: () => 10,
+    persistSubtitlePositionPatch: () => {},
+    getSubtitleHoverAutoPauseEnabled: () => true,
+    getYomitanPopupAutoPauseEnabled: () => false,
+    getPlaybackPaused: async () => false,
+    sendMpvCommand: (command) => {
+      mpvCommands.push(command);
+    },
+  });
+
+  await handlers.handleSecondaryMouseEnter();
+  await handlers.handleSecondaryMouseLeave({
+    relatedTarget: ctx.dom.subtitleContainer,
+  } as unknown as MouseEvent);
+
+  assert.equal(ctx.state.isOverSubtitle, false);
+  assert.equal(ctx.dom.secondarySubContainer.classList.contains('secondary-sub-hover-active'), false);
+  assert.deepEqual(mpvCommands, [['set_property', 'pause', 'yes']]);
+});
+
 test('auto-pause on subtitle hover skips when playback is already paused', async () => {
  const ctx = createMouseTestContext();
  const mpvCommands: Array<(string | number)[]> = [];
@@ -127,6 +197,36 @@ test('auto-pause on subtitle hover skips when playback is already paused', async
  assert.deepEqual(mpvCommands, []);
 });

+test('primary hover pauses on enter without revealing secondary subtitle', async () => {
+  const ctx = createMouseTestContext();
+  const mpvCommands: Array<(string | number)[]> = [];
+
+  const handlers = createMouseHandlers(ctx as never, {
+    modalStateReader: {
+      isAnySettingsModalOpen: () => false,
+      isAnyModalOpen: () => false,
+    },
+    applyYPercent: () => {},
+    getCurrentYPercent: () => 10,
+    persistSubtitlePositionPatch: () => {},
+    getSubtitleHoverAutoPauseEnabled: () => true,
+    getYomitanPopupAutoPauseEnabled: () => false,
+    getPlaybackPaused: async () => false,
+    sendMpvCommand: (command) => {
+      mpvCommands.push(command);
+    },
+  });
+
+  await handlers.handlePrimaryMouseEnter();
+  assert.equal(ctx.dom.secondarySubContainer.classList.contains('secondary-sub-hover-active'), false);
+  await handlers.handlePrimaryMouseLeave();
+
+  assert.deepEqual(mpvCommands, [
+    ['set_property', 'pause', 'yes'],
+    ['set_property', 'pause', 'no'],
+  ]);
+});
+
 test('auto-pause on subtitle hover is skipped when disabled in config', async () => {
  const ctx = createMouseTestContext();
  const mpvCommands: Array<(string | number)[]> = [];
@@ -153,6 +253,67 @@ test('auto-pause on subtitle hover is skipped when disabled in config', async ()
  assert.deepEqual(mpvCommands, []);
 });

+test('subtitle leave restores passthrough while embedded sidebar is open but not hovered', async () => {
+  const ctx = createMouseTestContext();
+  const ignoreMouseCalls: Array<[boolean, { forward?: boolean } | undefined]> = [];
+  const previousWindow = (globalThis as { window?: unknown }).window;
+
+  ctx.platform.shouldToggleMouseIgnore = true;
+  ctx.state.isOverSubtitle = true;
+  ctx.state.subtitleSidebarModalOpen = true;
+  ctx.state.subtitleSidebarConfig = {
+    enabled: true,
+    autoOpen: false,
+    layout: 'embedded',
+    toggleKey: 'Backslash',
+    pauseVideoOnHover: false,
+    autoScroll: true,
+    maxWidth: 360,
+    opacity: 0.92,
+    backgroundColor: 'rgba(54, 58, 79, 0.88)',
+    textColor: '#cad3f5',
+    fontFamily: '"Iosevka Aile", sans-serif',
+    fontSize: 17,
+    timestampColor: '#a5adcb',
+    activeLineColor: '#f5bde6',
+    activeLineBackgroundColor: 'rgba(138, 173, 244, 0.22)',
+    hoverLineBackgroundColor: 'rgba(54, 58, 79, 0.84)',
+  };
+
+  Object.defineProperty(globalThis, 'window', {
+    configurable: true,
+    value: {
+      electronAPI: {
+        setIgnoreMouseEvents: (ignore: boolean, options?: { forward?: boolean }) => {
+          ignoreMouseCalls.push([ignore, options]);
+        },
+      },
+    },
+  });
+
+  try {
+    const handlers = createMouseHandlers(ctx as never, {
+      modalStateReader: {
+        isAnySettingsModalOpen: () => false,
+        isAnyModalOpen: () => true,
+      },
+      applyYPercent: () => {},
+      getCurrentYPercent: () => 10,
+      persistSubtitlePositionPatch: () => {},
+      getSubtitleHoverAutoPauseEnabled: () => false,
+      getYomitanPopupAutoPauseEnabled: () => false,
+      getPlaybackPaused: async () => false,
+      sendMpvCommand: () => {},
+    });
+
+    await handlers.handlePrimaryMouseLeave();
+
+    assert.deepEqual(ignoreMouseCalls.at(-1), [true, { forward: true }]);
+  } finally {
+    Object.defineProperty(globalThis, 'window', { configurable: true, value: previousWindow });
+  }
+});
+
 test('pending hover pause check is ignored when mouse leaves before pause state resolves', async () => {
  const ctx = createMouseTestContext();
  const mpvCommands: Array<(string | number)[]> = [];
--- a/src/renderer/handlers/mouse.ts
+++ b/src/renderer/handlers/mouse.ts
@@ -1,4 +1,5 @@
 import type { ModalStateReader, RendererContext } from '../context';
+import { syncOverlayMouseIgnoreState } from '../overlay-mouse-ignore.js';
 import {
  YOMITAN_POPUP_HIDDEN_EVENT,
  YOMITAN_POPUP_SHOWN_EVENT,
@@ -25,6 +26,19 @@ export function createMouseHandlers(
  let pausedBySubtitleHover = false;
  let pausedByYomitanPopup = false;

+  function isWithinOtherSubtitleContainer(
+    relatedTarget: EventTarget | null,
+    otherContainer: HTMLElement,
+  ): boolean {
+    if (relatedTarget === otherContainer) {
+      return true;
+    }
+    if (typeof Node !== 'undefined' && relatedTarget instanceof Node) {
+      return otherContainer.contains(relatedTarget);
+    }
+    return false;
+  }
+
  function maybeResumeHoverPause(): void {
    if (!pausedBySubtitleHover) return;
    if (pausedByYomitanPopup) return;
@@ -80,10 +94,7 @@ export function createMouseHandlers(
  function enablePopupInteraction(): void {
    yomitanPopupVisible = true;
    ctx.state.yomitanPopupVisible = true;
-    ctx.dom.overlay.classList.add('interactive');
-    if (ctx.platform.shouldToggleMouseIgnore) {
-      window.electronAPI.setIgnoreMouseEvents(false);
-    }
+    syncOverlayMouseIgnoreState(ctx);
    if (ctx.platform.isMacOSPlatform) {
      window.focus();
    }
@@ -101,20 +112,18 @@ export function createMouseHandlers(
    popupPauseRequestId += 1;
    maybeResumeYomitanPopupPause();
    maybeResumeHoverPause();
-    if (!ctx.state.isOverSubtitle && !options.modalStateReader.isAnyModalOpen()) {
-      ctx.dom.overlay.classList.remove('interactive');
-      if (ctx.platform.shouldToggleMouseIgnore) {
-        window.electronAPI.setIgnoreMouseEvents(true, { forward: true });
-      }
-    }
+    syncOverlayMouseIgnoreState(ctx);
  }

-  async function handleMouseEnter(): Promise<void> {
+  async function handleMouseEnter(
+    _event?: MouseEvent,
+    showSecondaryHover = false,
+  ): Promise<void> {
    ctx.state.isOverSubtitle = true;
-    ctx.dom.overlay.classList.add('interactive');
-    if (ctx.platform.shouldToggleMouseIgnore) {
-      window.electronAPI.setIgnoreMouseEvents(false);
+    if (showSecondaryHover) {
+      ctx.dom.secondarySubContainer.classList.add('secondary-sub-hover-active');
    }
+    syncOverlayMouseIgnoreState(ctx);

    if (yomitanPopupVisible && options.getYomitanPopupAutoPauseEnabled()) {
      return;
@@ -124,6 +133,10 @@ export function createMouseHandlers(
      return;
    }

+    if (pausedBySubtitleHover) {
+      return;
+    }
+
    const requestId = ++hoverPauseRequestId;
    let paused: boolean | null = null;
    try {
@@ -141,8 +154,26 @@ export function createMouseHandlers(
    pausedBySubtitleHover = true;
  }

-  async function handleMouseLeave(): Promise<void> {
+  async function handleMouseLeave(
+    _event?: MouseEvent,
+    hideSecondaryHover = false,
+  ): Promise<void> {
+    const relatedTarget = _event?.relatedTarget ?? null;
+    const otherContainer = hideSecondaryHover
+      ? ctx.dom.subtitleContainer
+      : ctx.dom.secondarySubContainer;
+    if (relatedTarget && isWithinOtherSubtitleContainer(relatedTarget, otherContainer)) {
+      ctx.state.isOverSubtitle = false;
+      if (hideSecondaryHover) {
+        ctx.dom.secondarySubContainer.classList.remove('secondary-sub-hover-active');
+      }
+      return;
+    }
+
    ctx.state.isOverSubtitle = false;
+    if (hideSecondaryHover) {
+      ctx.dom.secondarySubContainer.classList.remove('secondary-sub-hover-active');
+    }
    hoverPauseRequestId += 1;
    maybeResumeHoverPause();
    if (yomitanPopupVisible) return;
@@ -246,6 +277,10 @@ export function createMouseHandlers(
  }

  return {
+    handlePrimaryMouseEnter: (event?: MouseEvent) => handleMouseEnter(event, false),
+    handlePrimaryMouseLeave: (event?: MouseEvent) => handleMouseLeave(event, false),
+    handleSecondaryMouseEnter: (event?: MouseEvent) => handleMouseEnter(event, true),
+    handleSecondaryMouseLeave: (event?: MouseEvent) => handleMouseLeave(event, true),
    handleMouseEnter,
    handleMouseLeave,
    setupDragging,
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -256,6 +256,18 @@
          </div>
        </div>
      </div>
+      <div id="subtitleSidebarModal" class="modal hidden subtitle-sidebar-modal" aria-hidden="true">
+        <div id="subtitleSidebarContent" class="modal-content subtitle-sidebar-content">
+          <div class="modal-header">
+            <div class="modal-title">Subtitle Sidebar</div>
+            <button id="subtitleSidebarClose" class="modal-close" type="button">Close</button>
+          </div>
+          <div class="modal-body subtitle-sidebar-body">
+            <div id="subtitleSidebarStatus" class="runtime-options-status"></div>
+            <ul id="subtitleSidebarList" class="subtitle-sidebar-list"></ul>
+          </div>
+        </div>
+      </div>
      <div id="sessionHelpModal" class="modal hidden" aria-hidden="true">
        <div class="modal-content session-help-content">
          <div class="modal-header">
--- a/src/renderer/modals/subtitle-sidebar.test.ts
+++ b/src/renderer/modals/subtitle-sidebar.test.ts
--- a/src/renderer/modals/subtitle-sidebar.ts
+++ b/src/renderer/modals/subtitle-sidebar.ts
@@ -0,0 +1,599 @@
+import type {
+  SubtitleCue,
+  SubtitleData,
+  SubtitleSidebarSnapshot,
+} from '../../types';
+import type { ModalStateReader, RendererContext } from '../context';
+import { syncOverlayMouseIgnoreState } from '../overlay-mouse-ignore.js';
+
+const MANUAL_SCROLL_HOLD_MS = 1500;
+const ACTIVE_CUE_LOOKAHEAD_SEC = 0.18;
+const CLICK_SEEK_OFFSET_SEC = 0.08;
+const SNAPSHOT_POLL_INTERVAL_MS = 80;
+const EMBEDDED_SIDEBAR_MIN_WIDTH_PX = 240;
+const EMBEDDED_SIDEBAR_MAX_RATIO = 0.45;
+function subtitleCueListsEqual(a: SubtitleCue[], b: SubtitleCue[]): boolean {
+  if (a.length !== b.length) {
+    return false;
+  }
+
+  for (let i = 0; i < a.length; i += 1) {
+    const left = a[i]!;
+    const right = b[i]!;
+    if (
+      left.startTime !== right.startTime ||
+      left.endTime !== right.endTime ||
+      left.text !== right.text
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function normalizeCueText(text: string): string {
+  return text.replace(/\r\n/g, '\n').trim();
+}
+
+function formatCueTimestamp(seconds: number): string {
+  const totalSeconds = Math.max(0, Math.floor(seconds));
+  const hours = Math.floor(totalSeconds / 3600);
+  const mins = Math.floor((totalSeconds % 3600) / 60);
+  const secs = totalSeconds % 60;
+  if (hours > 0) {
+    return [
+      String(hours).padStart(2, '0'),
+      String(mins).padStart(2, '0'),
+      String(secs).padStart(2, '0'),
+    ].join(':');
+  }
+  return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+}
+
+export function findActiveSubtitleCueIndex(
+  cues: SubtitleCue[],
+  current: { text: string; startTime?: number | null } | null,
+  currentTimeSec: number | null = null,
+  preferredCueIndex: number = -1,
+): number {
+  if (cues.length === 0) {
+    return -1;
+  }
+
+  if (typeof currentTimeSec === 'number' && Number.isFinite(currentTimeSec)) {
+    const activeOrUpcomingCue = cues.findIndex(
+      (cue) =>
+        cue.endTime > currentTimeSec &&
+        cue.startTime <= currentTimeSec + ACTIVE_CUE_LOOKAHEAD_SEC,
+    );
+    if (activeOrUpcomingCue >= 0) {
+      return activeOrUpcomingCue;
+    }
+
+    const nextCue = cues.findIndex((cue) => cue.endTime > currentTimeSec);
+    if (nextCue >= 0) {
+      return nextCue;
+    }
+  }
+
+  if (!current) {
+    return -1;
+  }
+
+  if (typeof current.startTime === 'number' && Number.isFinite(current.startTime)) {
+    const timingMatch = cues.findIndex(
+      (cue) => current.startTime! >= cue.startTime && current.startTime! < cue.endTime,
+    );
+    if (timingMatch >= 0) {
+      return timingMatch;
+    }
+  }
+
+  const normalizedText = normalizeCueText(current.text);
+  if (!normalizedText) {
+    return -1;
+  }
+
+  const matchingIndices: number[] = [];
+  for (const [index, cue] of cues.entries()) {
+    if (normalizeCueText(cue.text) === normalizedText) {
+      matchingIndices.push(index);
+    }
+  }
+
+  if (matchingIndices.length === 0) {
+    return -1;
+  }
+
+  const hasTiming =
+    typeof current.startTime === 'number' && Number.isFinite(current.startTime);
+
+  if (preferredCueIndex >= 0) {
+    if (!hasTiming && currentTimeSec === null) {
+      const forwardMatches = matchingIndices.filter((index) => index >= preferredCueIndex);
+      if (forwardMatches.length > 0) {
+        return forwardMatches[0]!;
+      }
+      if (matchingIndices.includes(preferredCueIndex)) {
+        return preferredCueIndex;
+      }
+      return matchingIndices[matchingIndices.length - 1] ?? -1;
+    }
+
+    let nearestIndex = matchingIndices[0]!;
+    let nearestDistance = Math.abs(nearestIndex - preferredCueIndex);
+    for (const matchIndex of matchingIndices) {
+      const distance = Math.abs(matchIndex - preferredCueIndex);
+      if (distance < nearestDistance) {
+        nearestIndex = matchIndex;
+        nearestDistance = distance;
+      }
+    }
+    return nearestIndex;
+  }
+
+  return matchingIndices[0]!;
+}
+
+export function createSubtitleSidebarModal(
+  ctx: RendererContext,
+  options: {
+    modalStateReader: Pick<ModalStateReader, 'isAnyModalOpen'>;
+  },
+) {
+  let snapshotPollInterval: ReturnType<typeof setTimeout> | null = null;
+  let lastAppliedVideoMarginRatio: number | null = null;
+  let subtitleSidebarHoverRequestId = 0;
+  let disposeDomEvents: (() => void) | null = null;
+
+  function restoreEmbeddedSidebarPassthrough(): void {
+    syncOverlayMouseIgnoreState(ctx);
+  }
+
+  function setStatus(message: string): void {
+    ctx.dom.subtitleSidebarStatus.textContent = message;
+  }
+
+  function getReservedSidebarWidthPx(): number {
+    const config = ctx.state.subtitleSidebarConfig;
+    if (!config || config.layout !== 'embedded' || !ctx.state.subtitleSidebarModalOpen) {
+      return 0;
+    }
+
+    const measuredWidth = ctx.dom.subtitleSidebarContent.getBoundingClientRect().width;
+    if (Number.isFinite(measuredWidth) && measuredWidth > 0) {
+      return measuredWidth;
+    }
+
+    return Math.max(EMBEDDED_SIDEBAR_MIN_WIDTH_PX, config.maxWidth);
+  }
+
+  function syncEmbeddedSidebarLayout(): void {
+    const config = ctx.state.subtitleSidebarConfig;
+    const wantsEmbedded = Boolean(
+      config && config.layout === 'embedded' && ctx.state.subtitleSidebarModalOpen,
+    );
+
+    if (wantsEmbedded) {
+      ctx.dom.subtitleSidebarContent.classList.add('subtitle-sidebar-content-embedded');
+      ctx.dom.subtitleSidebarModal.classList.add('subtitle-sidebar-modal-embedded');
+      document.body.classList.add('subtitle-sidebar-embedded-open');
+    } else {
+      ctx.dom.subtitleSidebarContent.classList.remove('subtitle-sidebar-content-embedded');
+      ctx.dom.subtitleSidebarModal.classList.remove('subtitle-sidebar-modal-embedded');
+      document.body.classList.remove('subtitle-sidebar-embedded-open');
+    }
+    const reservedWidthPx = wantsEmbedded ? getReservedSidebarWidthPx() : 0;
+    const embedded = wantsEmbedded && reservedWidthPx > 0;
+    document.documentElement.style.setProperty(
+      '--subtitle-sidebar-reserved-width',
+      `${Math.max(0, Math.round(reservedWidthPx))}px`,
+    );
+
+    const viewportWidth = window.innerWidth;
+    const ratio =
+      embedded && Number.isFinite(viewportWidth) && viewportWidth > 0
+        ? Math.min(EMBEDDED_SIDEBAR_MAX_RATIO, reservedWidthPx / viewportWidth)
+        : 0;
+
+    if (
+      lastAppliedVideoMarginRatio !== null &&
+      Math.abs(ratio - lastAppliedVideoMarginRatio) < 0.0001
+    ) {
+      return;
+    }
+
+    lastAppliedVideoMarginRatio = ratio;
+    window.electronAPI.sendMpvCommand([
+      'set_property',
+      'video-margin-ratio-right',
+      Number(ratio.toFixed(4)),
+    ]);
+    window.electronAPI.sendMpvCommand([
+      'set_property',
+      'osd-align-x',
+      'left',
+    ]);
+    window.electronAPI.sendMpvCommand([
+      'set_property',
+      'osd-align-y',
+      'top',
+    ]);
+    window.electronAPI.sendMpvCommand([
+      'set_property',
+      'user-data/osc/margins',
+      JSON.stringify({
+        l: 0,
+        r: Number(ratio.toFixed(4)),
+        t: 0,
+        b: 0,
+      }),
+    ]);
+    if (ratio === 0) {
+      window.electronAPI.sendMpvCommand(['set_property', 'video-pan-x', 0]);
+    }
+  }
+
+  function applyConfig(snapshot: SubtitleSidebarSnapshot): void {
+    ctx.state.subtitleSidebarConfig = snapshot.config;
+    ctx.state.subtitleSidebarToggleKey = snapshot.config.toggleKey;
+    ctx.state.subtitleSidebarPauseVideoOnHover = snapshot.config.pauseVideoOnHover;
+    ctx.state.subtitleSidebarAutoScroll = snapshot.config.autoScroll;
+    const style = ctx.dom.subtitleSidebarModal.style;
+    style.setProperty('--subtitle-sidebar-max-width', `${snapshot.config.maxWidth}px`);
+    style.setProperty('--subtitle-sidebar-opacity', String(snapshot.config.opacity));
+    style.setProperty('--subtitle-sidebar-background-color', snapshot.config.backgroundColor);
+    style.setProperty('--subtitle-sidebar-text-color', snapshot.config.textColor);
+    style.setProperty('--subtitle-sidebar-font-family', snapshot.config.fontFamily);
+    style.setProperty('--subtitle-sidebar-font-size', `${snapshot.config.fontSize}px`);
+    style.setProperty('--subtitle-sidebar-timestamp-color', snapshot.config.timestampColor);
+    style.setProperty('--subtitle-sidebar-active-line-color', snapshot.config.activeLineColor);
+    style.setProperty(
+      '--subtitle-sidebar-active-background-color',
+      snapshot.config.activeLineBackgroundColor,
+    );
+    style.setProperty(
+      '--subtitle-sidebar-hover-background-color',
+      snapshot.config.hoverLineBackgroundColor,
+    );
+  }
+
+  function seekToCue(cue: SubtitleCue): void {
+    const targetTime = Math.min(cue.endTime - 0.01, cue.startTime + CLICK_SEEK_OFFSET_SEC);
+    window.electronAPI.sendMpvCommand([
+      'seek',
+      Math.max(cue.startTime, targetTime),
+      'absolute+exact',
+    ]);
+  }
+
+  function getCueRowLabel(cue: SubtitleCue): string {
+    return `Jump to subtitle at ${formatCueTimestamp(cue.startTime)}`;
+  }
+
+  function resumeSubtitleSidebarHoverPause(): void {
+    subtitleSidebarHoverRequestId += 1;
+    if (!ctx.state.subtitleSidebarPausedByHover) {
+      restoreEmbeddedSidebarPassthrough();
+      return;
+    }
+
+    ctx.state.subtitleSidebarPausedByHover = false;
+    window.electronAPI.sendMpvCommand(['set_property', 'pause', 'no']);
+    restoreEmbeddedSidebarPassthrough();
+  }
+
+  function maybeAutoScrollActiveCue(
+    previousActiveCueIndex: number,
+    behavior: ScrollBehavior = 'smooth',
+    force = false,
+  ): void {
+    if (
+      !ctx.state.subtitleSidebarAutoScroll ||
+      ctx.state.subtitleSidebarActiveCueIndex < 0 ||
+      (!force && ctx.state.subtitleSidebarActiveCueIndex === previousActiveCueIndex) ||
+      Date.now() < ctx.state.subtitleSidebarManualScrollUntilMs
+    ) {
+      return;
+    }
+
+    const list = ctx.dom.subtitleSidebarList;
+    const active = list.children[ctx.state.subtitleSidebarActiveCueIndex] as HTMLElement | undefined;
+    if (!active) {
+      return;
+    }
+
+    const targetScrollTop =
+      active.offsetTop - (list.clientHeight - active.clientHeight) / 2;
+    const nextScrollTop = Math.max(0, targetScrollTop);
+    if (previousActiveCueIndex < 0) {
+      list.scrollTop = nextScrollTop;
+      return;
+    }
+
+    list.scrollTo({
+      top: nextScrollTop,
+      behavior,
+    });
+  }
+
+  function renderCueList(): void {
+    ctx.dom.subtitleSidebarList.innerHTML = '';
+    for (const [index, cue] of ctx.state.subtitleSidebarCues.entries()) {
+      const row = document.createElement('li');
+      row.className = 'subtitle-sidebar-item';
+      row.classList.toggle('active', index === ctx.state.subtitleSidebarActiveCueIndex);
+      row.dataset.index = String(index);
+      row.tabIndex = 0;
+      row.setAttribute('role', 'button');
+      row.setAttribute('aria-label', getCueRowLabel(cue));
+      row.addEventListener('keydown', (event: KeyboardEvent) => {
+        if (event.key !== 'Enter' && event.key !== ' ') {
+          return;
+        }
+        event.preventDefault();
+        seekToCue(cue);
+      });
+
+      const timestamp = document.createElement('div');
+      timestamp.className = 'subtitle-sidebar-timestamp';
+      timestamp.textContent = formatCueTimestamp(cue.startTime);
+
+      const text = document.createElement('div');
+      text.className = 'subtitle-sidebar-text';
+      text.textContent = cue.text;
+
+      row.appendChild(timestamp);
+      row.appendChild(text);
+
+      ctx.dom.subtitleSidebarList.appendChild(row);
+    }
+  }
+
+  function syncActiveCueClasses(previousActiveCueIndex: number): void {
+    if (previousActiveCueIndex >= 0) {
+      const previous = ctx.dom.subtitleSidebarList.children[previousActiveCueIndex] as
+        | HTMLElement
+        | undefined;
+      previous?.classList.remove('active');
+    }
+
+    if (ctx.state.subtitleSidebarActiveCueIndex >= 0) {
+      const current = ctx.dom.subtitleSidebarList.children[ctx.state.subtitleSidebarActiveCueIndex] as
+        | HTMLElement
+        | undefined;
+      current?.classList.add('active');
+    }
+  }
+
+  function updateActiveCue(
+    current: { text: string; startTime?: number | null } | null,
+    currentTimeSec: number | null = null,
+  ): void {
+    const previousActiveCueIndex = ctx.state.subtitleSidebarActiveCueIndex;
+    ctx.state.subtitleSidebarActiveCueIndex = findActiveSubtitleCueIndex(
+      ctx.state.subtitleSidebarCues,
+      current,
+      currentTimeSec,
+      previousActiveCueIndex,
+    );
+    if (ctx.state.subtitleSidebarModalOpen) {
+      syncActiveCueClasses(previousActiveCueIndex);
+      maybeAutoScrollActiveCue(previousActiveCueIndex);
+    }
+  }
+
+  async function refreshSnapshot(): Promise<SubtitleSidebarSnapshot> {
+    const snapshot = await window.electronAPI.getSubtitleSidebarSnapshot();
+    applyConfig(snapshot);
+    if (!snapshot.config.enabled) {
+      resumeSubtitleSidebarHoverPause();
+      ctx.state.subtitleSidebarCues = [];
+      ctx.state.subtitleSidebarModalOpen = false;
+      ctx.dom.subtitleSidebarModal.classList.add('hidden');
+      ctx.dom.subtitleSidebarModal.setAttribute('aria-hidden', 'true');
+      stopSnapshotPolling();
+      updateActiveCue(null, snapshot.currentTimeSec ?? null);
+      setStatus('Subtitle sidebar disabled in config.');
+      syncEmbeddedSidebarLayout();
+      if (!ctx.state.isOverSubtitle && !options.modalStateReader.isAnyModalOpen()) {
+        ctx.dom.overlay.classList.remove('interactive');
+      }
+      restoreEmbeddedSidebarPassthrough();
+      return snapshot;
+    }
+
+    const cuesChanged = !subtitleCueListsEqual(ctx.state.subtitleSidebarCues, snapshot.cues);
+    if (cuesChanged) {
+      ctx.state.subtitleSidebarCues = snapshot.cues;
+      if (ctx.state.subtitleSidebarModalOpen) {
+        renderCueList();
+      }
+    }
+    updateActiveCue(snapshot.currentSubtitle, snapshot.currentTimeSec ?? null);
+    syncEmbeddedSidebarLayout();
+    return snapshot;
+  }
+
+  function startSnapshotPolling(): void {
+    stopSnapshotPolling();
+
+    const pollOnce = async (): Promise<void> => {
+      try {
+        await refreshSnapshot();
+      } catch {
+        // Keep polling; a transient IPC failure should not stop updates.
+      }
+
+      if (!ctx.state.subtitleSidebarModalOpen) {
+        snapshotPollInterval = null;
+        return;
+      }
+
+      snapshotPollInterval = setTimeout(pollOnce, SNAPSHOT_POLL_INTERVAL_MS);
+    };
+
+    snapshotPollInterval = setTimeout(pollOnce, SNAPSHOT_POLL_INTERVAL_MS);
+  }
+
+  function stopSnapshotPolling(): void {
+    if (!snapshotPollInterval) {
+      return;
+    }
+    clearTimeout(snapshotPollInterval);
+    snapshotPollInterval = null;
+  }
+
+  async function openSubtitleSidebarModal(): Promise<void> {
+    const snapshot = await refreshSnapshot();
+    if (!snapshot.config.enabled) {
+      setStatus('Subtitle sidebar disabled in config.');
+      return;
+    }
+
+    ctx.dom.subtitleSidebarList.innerHTML = '';
+    if (snapshot.cues.length === 0) {
+      setStatus('No parsed subtitle cues available.');
+    } else {
+      setStatus(`${snapshot.cues.length} parsed subtitle lines`);
+    }
+
+    ctx.state.subtitleSidebarModalOpen = true;
+    ctx.state.isOverSubtitleSidebar = false;
+    ctx.dom.subtitleSidebarModal.classList.remove('hidden');
+    ctx.dom.subtitleSidebarModal.setAttribute('aria-hidden', 'false');
+    renderCueList();
+    syncActiveCueClasses(-1);
+    maybeAutoScrollActiveCue(-1, 'auto', true);
+    startSnapshotPolling();
+    syncEmbeddedSidebarLayout();
+    restoreEmbeddedSidebarPassthrough();
+  }
+
+  async function autoOpenSubtitleSidebarOnStartup(): Promise<void> {
+    const snapshot = await refreshSnapshot();
+    if (!snapshot.config.enabled || !snapshot.config.autoOpen || ctx.state.subtitleSidebarModalOpen) {
+      return;
+    }
+    await openSubtitleSidebarModal();
+  }
+
+  function closeSubtitleSidebarModal(): void {
+    if (!ctx.state.subtitleSidebarModalOpen) {
+      return;
+    }
+    resumeSubtitleSidebarHoverPause();
+    ctx.state.isOverSubtitleSidebar = false;
+    ctx.state.subtitleSidebarModalOpen = false;
+    ctx.dom.subtitleSidebarModal.classList.add('hidden');
+    ctx.dom.subtitleSidebarModal.setAttribute('aria-hidden', 'true');
+    stopSnapshotPolling();
+    syncEmbeddedSidebarLayout();
+    if (!ctx.state.isOverSubtitle && !options.modalStateReader.isAnyModalOpen()) {
+      ctx.dom.overlay.classList.remove('interactive');
+    }
+    restoreEmbeddedSidebarPassthrough();
+  }
+
+  async function toggleSubtitleSidebarModal(): Promise<void> {
+    if (ctx.state.subtitleSidebarModalOpen) {
+      closeSubtitleSidebarModal();
+      return;
+    }
+    await openSubtitleSidebarModal();
+  }
+
+  function handleSubtitleUpdated(data: SubtitleData): void {
+    if (ctx.state.subtitleSidebarModalOpen) {
+      return;
+    }
+
+    updateActiveCue(
+      { text: data.text, startTime: data.startTime },
+      data.startTime ?? null,
+    );
+  }
+
+  function wireDomEvents(): void {
+    if (disposeDomEvents) {
+      return;
+    }
+
+    ctx.dom.subtitleSidebarClose.addEventListener('click', () => {
+      closeSubtitleSidebarModal();
+    });
+    ctx.dom.subtitleSidebarList.addEventListener('click', (event) => {
+      const target = event.target;
+      if (!(target instanceof Element)) {
+        return;
+      }
+      const row = target.closest<HTMLElement>('.subtitle-sidebar-item');
+      if (!row) {
+        return;
+      }
+      const index = Number.parseInt(row.dataset.index ?? '', 10);
+      if (!Number.isInteger(index) || index < 0 || index >= ctx.state.subtitleSidebarCues.length) {
+        return;
+      }
+      const cue = ctx.state.subtitleSidebarCues[index];
+      if (!cue) {
+        return;
+      }
+      seekToCue(cue);
+    });
+    ctx.dom.subtitleSidebarList.addEventListener('wheel', () => {
+      ctx.state.subtitleSidebarManualScrollUntilMs = Date.now() + MANUAL_SCROLL_HOLD_MS;
+    });
+    ctx.dom.subtitleSidebarModal.addEventListener('mouseenter', async () => {
+      ctx.state.isOverSubtitleSidebar = true;
+      restoreEmbeddedSidebarPassthrough();
+      if (!ctx.state.subtitleSidebarPauseVideoOnHover || ctx.state.subtitleSidebarPausedByHover) {
+        return;
+      }
+      const requestId = ++subtitleSidebarHoverRequestId;
+      let paused: boolean | null | undefined;
+      try {
+        paused = await window.electronAPI.getPlaybackPaused();
+      } catch {
+        paused = undefined;
+      }
+      if (requestId !== subtitleSidebarHoverRequestId) {
+        return;
+      }
+      if (paused === false) {
+        window.electronAPI.sendMpvCommand(['set_property', 'pause', 'yes']);
+        ctx.state.subtitleSidebarPausedByHover = true;
+      }
+    });
+    ctx.dom.subtitleSidebarModal.addEventListener('mouseleave', () => {
+      ctx.state.isOverSubtitleSidebar = false;
+      resumeSubtitleSidebarHoverPause();
+    });
+    const resizeHandler = () => {
+      if (!ctx.state.subtitleSidebarModalOpen) {
+        return;
+      }
+      syncEmbeddedSidebarLayout();
+    };
+    window.addEventListener('resize', resizeHandler);
+    disposeDomEvents = () => {
+      window.removeEventListener('resize', resizeHandler);
+      disposeDomEvents = null;
+    };
+  }
+
+  return {
+    autoOpenSubtitleSidebarOnStartup,
+    openSubtitleSidebarModal,
+    closeSubtitleSidebarModal,
+    toggleSubtitleSidebarModal,
+    refreshSubtitleSidebarSnapshot: refreshSnapshot,
+    wireDomEvents,
+    disposeDomEvents: () => {
+      disposeDomEvents?.();
+    },
+    handleSubtitleUpdated,
+    seekToCue,
+  };
+}
--- a/src/renderer/overlay-mouse-ignore.ts
+++ b/src/renderer/overlay-mouse-ignore.ts
@@ -0,0 +1,42 @@
+import type { RendererContext } from './context';
+import type { RendererState } from './state';
+
+function isBlockingOverlayModalOpen(state: RendererState): boolean {
+  const embeddedSidebarOpen =
+    state.subtitleSidebarModalOpen && state.subtitleSidebarConfig?.layout === 'embedded';
+
+  return Boolean(
+    state.controllerSelectModalOpen ||
+      state.controllerDebugModalOpen ||
+      state.jimakuModalOpen ||
+      state.kikuModalOpen ||
+      state.runtimeOptionsModalOpen ||
+      state.subsyncModalOpen ||
+      state.sessionHelpModalOpen ||
+      (state.subtitleSidebarModalOpen && !embeddedSidebarOpen),
+  );
+}
+
+export function syncOverlayMouseIgnoreState(ctx: RendererContext): void {
+  const shouldStayInteractive =
+    ctx.state.isOverSubtitle ||
+    ctx.state.isOverSubtitleSidebar ||
+    ctx.state.yomitanPopupVisible ||
+    isBlockingOverlayModalOpen(ctx.state);
+
+  if (shouldStayInteractive) {
+    ctx.dom.overlay.classList.add('interactive');
+  } else {
+    ctx.dom.overlay.classList.remove('interactive');
+  }
+  if (!ctx.platform?.shouldToggleMouseIgnore) {
+    return;
+  }
+
+  if (shouldStayInteractive) {
+    window.electronAPI.setIgnoreMouseEvents(false);
+    return;
+  }
+
+  window.electronAPI.setIgnoreMouseEvents(true, { forward: true });
+}
--- a/src/renderer/renderer.ts
+++ b/src/renderer/renderer.ts
@@ -34,10 +34,12 @@ import { createControllerSelectModal } from './modals/controller-select.js';
 import { createJimakuModal } from './modals/jimaku.js';
 import { createKikuModal } from './modals/kiku.js';
 import { createSessionHelpModal } from './modals/session-help.js';
+import { createSubtitleSidebarModal } from './modals/subtitle-sidebar.js';
 import { createRuntimeOptionsModal } from './modals/runtime-options.js';
 import { createSubsyncModal } from './modals/subsync.js';
 import { createPositioningController } from './positioning.js';
 import { createOverlayContentMeasurementReporter } from './overlay-content-measurement.js';
+import { syncOverlayMouseIgnoreState } from './overlay-mouse-ignore.js';
 import { createRendererState } from './state.js';
 import { createSubtitleRenderer } from './subtitle-render.js';
 import { isYomitanPopupVisible, registerYomitanLookupListener } from './yomitan-popup.js';
@@ -78,7 +80,8 @@ function isAnyModalOpen(): boolean {
    ctx.state.kikuModalOpen ||
    ctx.state.runtimeOptionsModalOpen ||
    ctx.state.subsyncModalOpen ||
-    ctx.state.sessionHelpModalOpen
+    ctx.state.sessionHelpModalOpen ||
+    ctx.state.subtitleSidebarModalOpen
  );
 }

@@ -114,6 +117,9 @@ const sessionHelpModal = createSessionHelpModal(ctx, {
  modalStateReader: { isAnyModalOpen },
  syncSettingsModalSubtitleSuppression,
 });
+const subtitleSidebarModal = createSubtitleSidebarModal(ctx, {
+  modalStateReader: { isAnyModalOpen },
+});
 const kikuModal = createKikuModal(ctx, {
  modalStateReader: { isAnyModalOpen },
  syncSettingsModalSubtitleSuppression,
@@ -143,6 +149,9 @@ const keyboardHandlers = createKeyboardHandlers(ctx, {
    controllerDebugModal.openControllerDebugModal();
    window.electronAPI.notifyOverlayModalOpened('controller-debug');
  },
+  toggleSubtitleSidebarModal: () => {
+    void subtitleSidebarModal.toggleSubtitleSidebarModal();
+  },
 });
 const mouseHandlers = createMouseHandlers(ctx, {
  modalStateReader: { isAnySettingsModalOpen, isAnyModalOpen },
@@ -183,6 +192,7 @@ function getSubtitleTextForPreview(data: SubtitleData | string): string {
 function getActiveModal(): string | null {
  if (ctx.state.controllerSelectModalOpen) return 'controller-select';
  if (ctx.state.controllerDebugModalOpen) return 'controller-debug';
+  if (ctx.state.subtitleSidebarModalOpen) return 'subtitle-sidebar';
  if (ctx.state.jimakuModalOpen) return 'jimaku';
  if (ctx.state.kikuModalOpen) return 'kiku';
  if (ctx.state.runtimeOptionsModalOpen) return 'runtime-options';
@@ -198,6 +208,9 @@ function dismissActiveUiAfterError(): void {
  if (ctx.state.controllerDebugModalOpen) {
    controllerDebugModal.closeControllerDebugModal();
  }
+  if (ctx.state.subtitleSidebarModalOpen) {
+    subtitleSidebarModal.closeSubtitleSidebarModal();
+  }
  if (ctx.state.jimakuModalOpen) {
    jimakuModal.closeJimakuModal();
  }
@@ -468,6 +481,7 @@ async function init(): Promise<void> {
      lastSubtitlePreview = truncateForErrorLog(getSubtitleTextForPreview(data));
      keyboardHandlers.handleSubtitleContentUpdated();
      subtitleRenderer.renderSubtitle(data);
+      subtitleSidebarModal.handleSubtitleUpdated(data);
      measurementReporter.schedule();
    });
  });
@@ -508,10 +522,10 @@ async function init(): Promise<void> {
  subtitleRenderer.renderSecondarySub(await window.electronAPI.getCurrentSecondarySub());
  measurementReporter.schedule();

-  ctx.dom.subtitleContainer.addEventListener('mouseenter', mouseHandlers.handleMouseEnter);
-  ctx.dom.subtitleContainer.addEventListener('mouseleave', mouseHandlers.handleMouseLeave);
-  ctx.dom.secondarySubContainer.addEventListener('mouseenter', mouseHandlers.handleMouseEnter);
-  ctx.dom.secondarySubContainer.addEventListener('mouseleave', mouseHandlers.handleMouseLeave);
+  ctx.dom.subtitleContainer.addEventListener('mouseenter', mouseHandlers.handlePrimaryMouseEnter);
+  ctx.dom.subtitleContainer.addEventListener('mouseleave', mouseHandlers.handlePrimaryMouseLeave);
+  ctx.dom.secondarySubContainer.addEventListener('mouseenter', mouseHandlers.handleSecondaryMouseEnter);
+  ctx.dom.secondarySubContainer.addEventListener('mouseleave', mouseHandlers.handleSecondaryMouseLeave);

  mouseHandlers.setupResizeHandler();
  mouseHandlers.setupSelectionObserver();
@@ -528,6 +542,10 @@ async function init(): Promise<void> {
  controllerSelectModal.wireDomEvents();
  controllerDebugModal.wireDomEvents();
  sessionHelpModal.wireDomEvents();
+  subtitleSidebarModal.wireDomEvents();
+  window.addEventListener('beforeunload', () => {
+    subtitleSidebarModal.disposeDomEvents();
+  });

  window.electronAPI.onRuntimeOptionsChanged((options: RuntimeOptionState[]) => {
    runGuarded('runtime-options:changed', () => {
@@ -539,6 +557,11 @@ async function init(): Promise<void> {
      keyboardHandlers.updateKeybindings(payload.keybindings);
      subtitleRenderer.applySubtitleStyle(payload.subtitleStyle);
      subtitleRenderer.updateSecondarySubMode(payload.secondarySubMode);
+      ctx.state.subtitleSidebarConfig = payload.subtitleSidebar;
+      ctx.state.subtitleSidebarToggleKey = payload.subtitleSidebar.toggleKey;
+      ctx.state.subtitleSidebarPauseVideoOnHover = payload.subtitleSidebar.pauseVideoOnHover;
+      ctx.state.subtitleSidebarAutoScroll = payload.subtitleSidebar.autoScroll;
+      void subtitleSidebarModal.refreshSubtitleSidebarSnapshot();
      measurementReporter.schedule();
    });
  });
@@ -555,6 +578,8 @@ async function init(): Promise<void> {

  const initialSubtitleStyle = await window.electronAPI.getSubtitleStyle();
  subtitleRenderer.applySubtitleStyle(initialSubtitleStyle);
+  await subtitleSidebarModal.refreshSubtitleSidebarSnapshot();
+  await subtitleSidebarModal.autoOpenSubtitleSidebarOnStartup();

  positioning.applyStoredSubtitlePosition(
    await window.electronAPI.getSubtitlePosition(),
@@ -563,7 +588,7 @@ async function init(): Promise<void> {
  measurementReporter.schedule();

  if (ctx.platform.shouldToggleMouseIgnore) {
-    window.electronAPI.setIgnoreMouseEvents(true, { forward: true });
+    syncOverlayMouseIgnoreState(ctx);
  }

  measurementReporter.emitNow();
--- a/src/renderer/state.ts
+++ b/src/renderer/state.ts
@@ -10,6 +10,8 @@ import type {
  RuntimeOptionState,
  RuntimeOptionValue,
  SubtitlePosition,
+  SubtitleSidebarConfig,
+  SubtitleCue,
  SubsyncSourceTrack,
 } from '../types';

@@ -23,6 +25,7 @@ export type ChordAction =

 export type RendererState = {
  isOverSubtitle: boolean;
+  isOverSubtitleSidebar: boolean;
  isDragging: boolean;
  dragStartY: number;
  startYPercent: number;
@@ -58,6 +61,7 @@ export type RendererState = {

  controllerSelectModalOpen: boolean;
  controllerDebugModalOpen: boolean;
+  subtitleSidebarModalOpen: boolean;
  controllerDeviceSelectedIndex: number;
  controllerConfig: ResolvedControllerConfig | null;
  connectedGamepads: ControllerDeviceInfo[];
@@ -67,6 +71,14 @@ export type RendererState = {

  sessionHelpModalOpen: boolean;
  sessionHelpSelectedIndex: number;
+  subtitleSidebarCues: SubtitleCue[];
+  subtitleSidebarActiveCueIndex: number;
+  subtitleSidebarToggleKey: string;
+  subtitleSidebarPauseVideoOnHover: boolean;
+  subtitleSidebarAutoScroll: boolean;
+  subtitleSidebarConfig: Required<SubtitleSidebarConfig> | null;
+  subtitleSidebarManualScrollUntilMs: number;
+  subtitleSidebarPausedByHover: boolean;

  knownWordColor: string;
  nPlusOneColor: string;
@@ -104,6 +116,7 @@ export type RendererState = {
 export function createRendererState(): RendererState {
  return {
    isOverSubtitle: false,
+    isOverSubtitleSidebar: false,
    isDragging: false,
    dragStartY: 0,
    startYPercent: 0,
@@ -139,6 +152,7 @@ export function createRendererState(): RendererState {

    controllerSelectModalOpen: false,
    controllerDebugModalOpen: false,
+    subtitleSidebarModalOpen: false,
    controllerDeviceSelectedIndex: 0,
    controllerConfig: null,
    connectedGamepads: [],
@@ -148,6 +162,14 @@ export function createRendererState(): RendererState {

    sessionHelpModalOpen: false,
    sessionHelpSelectedIndex: 0,
+    subtitleSidebarCues: [],
+    subtitleSidebarActiveCueIndex: -1,
+    subtitleSidebarToggleKey: 'Backslash',
+    subtitleSidebarPauseVideoOnHover: false,
+    subtitleSidebarAutoScroll: true,
+    subtitleSidebarConfig: null,
+    subtitleSidebarManualScrollUntilMs: 0,
+    subtitleSidebarPausedByHover: false,

    knownWordColor: '#a6da95',
    nPlusOneColor: '#c6a0f6',
--- a/src/renderer/style.css
+++ b/src/renderer/style.css
@@ -40,6 +40,10 @@ body {
    'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Arial Unicode MS', Arial, sans-serif;
 }

+:root {
+  --subtitle-sidebar-reserved-width: 0px;
+}
+
 #overlay {
  position: relative;
  width: 100%;
@@ -294,13 +298,19 @@ body {
  }
 }

+body.subtitle-sidebar-embedded-open #subtitleContainer {
+  max-width: min(80%, calc(100vw - var(--subtitle-sidebar-reserved-width) - 24px));
+  transform: translateX(calc(var(--subtitle-sidebar-reserved-width) * -0.5));
+}
+
 #subtitleContainer {
-  max-width: 80%;
+  max-width: min(80%, calc(100vw - var(--subtitle-sidebar-reserved-width) - 24px));
  margin-bottom: 60px;
  padding: 12px 20px;
  background: rgb(30, 32, 48, 0.88);
  border-radius: 8px;
  pointer-events: auto;
+  transform: translateX(0);
 }

 #subtitleRoot {
@@ -705,20 +715,26 @@ body.platform-macos.layer-visible #subtitleRoot {
  background: transparent;
 }

+body.subtitle-sidebar-embedded-open #secondarySubContainer {
+  max-width: min(80%, calc(100vw - var(--subtitle-sidebar-reserved-width) - 24px));
+  transform: translateX(calc(-50% - (var(--subtitle-sidebar-reserved-width) * 0.5)));
+}
+
 #secondarySubContainer {
  --secondary-sub-background-color: transparent;
  --secondary-sub-backdrop-filter: none;
+
  position: absolute;
  top: 40px;
  left: 50%;
-  transform: translateX(-50%);
-  max-width: 80%;
+  max-width: min(80%, calc(100vw - var(--subtitle-sidebar-reserved-width) - 24px));
  padding: 10px 18px;
  background: var(--secondary-sub-background-color, transparent);
  backdrop-filter: var(--secondary-sub-backdrop-filter, none);
  -webkit-backdrop-filter: var(--secondary-sub-backdrop-filter, none);
  border-radius: 8px;
  pointer-events: auto;
+  transform: translateX(-50%);
 }

 body.layer-modal #subtitleContainer,
@@ -763,6 +779,14 @@ body.settings-modal-open #secondarySubContainer {
  display: none !important;
 }

+body.subtitle-sidebar-embedded-open #secondarySubContainer.secondary-sub-hover {
+  left: 0;
+  right: var(--subtitle-sidebar-reserved-width);
+  max-width: none;
+  padding-right: 0;
+  transform: none;
+}
+
 #secondarySubContainer.secondary-sub-hover {
  opacity: 0;
  transition: opacity 0.2s ease;
@@ -789,11 +813,13 @@ body.settings-modal-open #secondarySubContainer {
  padding: 10px 18px;
 }

-#secondarySubContainer.secondary-sub-hover:hover {
+#secondarySubContainer.secondary-sub-hover:hover,
+#secondarySubContainer.secondary-sub-hover.secondary-sub-hover-active {
  opacity: 1;
 }

-#secondarySubContainer.secondary-sub-hover:hover #secondarySubRoot {
+#secondarySubContainer.secondary-sub-hover:hover #secondarySubRoot,
+#secondarySubContainer.secondary-sub-hover.secondary-sub-hover-active #secondarySubRoot {
  background: var(--secondary-sub-background-color, transparent);
  backdrop-filter: var(--secondary-sub-backdrop-filter, none);
  -webkit-backdrop-filter: var(--secondary-sub-backdrop-filter, none);
@@ -1362,6 +1388,206 @@ iframe[id^='yomitan-popup'] {
  white-space: pre-wrap;
 }

+.subtitle-sidebar-modal {
+  inset: 0;
+  justify-content: flex-end;
+  align-items: flex-start;
+  padding: 14px;
+  background: transparent;
+  pointer-events: none;
+}
+
+body.subtitle-sidebar-embedded-open .subtitle-sidebar-modal {
+  padding: 0;
+  align-items: stretch;
+}
+
+.subtitle-sidebar-content {
+  width: min(var(--subtitle-sidebar-max-width, 420px), 92vw);
+  max-height: calc(100vh - 28px);
+  height: auto;
+  margin-left: auto;
+  font-family:
+    var(
+      --subtitle-sidebar-font-family,
+      'M PLUS 1',
+      'Noto Sans CJK JP',
+      'Hiragino Sans',
+      sans-serif
+    );
+  font-size: var(--subtitle-sidebar-font-size, 16px);
+  background: var(--subtitle-sidebar-background-color, rgba(73, 77, 100, 0.9));
+  color: var(--subtitle-sidebar-text-color, #cad3f5);
+  border: 1px solid rgba(110, 115, 141, 0.18);
+  border-radius: 10px;
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    0 2px 8px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(183, 189, 248, 0.06);
+  backdrop-filter: blur(20px) saturate(1.4);
+  -webkit-backdrop-filter: blur(20px) saturate(1.4);
+  opacity: var(--subtitle-sidebar-opacity, 0.95);
+  pointer-events: auto;
+}
+
+.subtitle-sidebar-content .modal-header {
+  padding: 10px 14px 8px;
+  border-bottom: 1px solid rgba(110, 115, 141, 0.14);
+  gap: 8px;
+}
+
+.subtitle-sidebar-content .modal-title {
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: #b8c0e0;
+  text-transform: uppercase;
+}
+
+.subtitle-sidebar-content .modal-close {
+  font-size: 11px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  background: rgba(73, 77, 100, 0.5);
+  border: 1px solid rgba(110, 115, 141, 0.2);
+  color: #a5adcb;
+  transition: all 140ms ease;
+}
+
+.subtitle-sidebar-content .modal-close:hover {
+  background: rgba(91, 96, 120, 0.6);
+  color: #cad3f5;
+  border-color: rgba(110, 115, 141, 0.35);
+}
+
+body.subtitle-sidebar-embedded-open #subtitleSidebarContent {
+  width: min(var(--subtitle-sidebar-max-width, 420px), 44vw);
+  max-height: 100vh;
+  height: 100vh;
+  border-radius: 0;
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  box-shadow:
+    -12px 0 32px rgba(0, 0, 0, 0.3),
+    -1px 0 0 rgba(110, 115, 141, 0.12);
+}
+
+.subtitle-sidebar-body {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding: 0;
+}
+
+.subtitle-sidebar-content .runtime-options-status {
+  font-size: 11px;
+  padding: 4px 14px;
+  color: #6e738d;
+  letter-spacing: 0.02em;
+}
+
+.subtitle-sidebar-list {
+  position: relative;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  min-height: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.subtitle-sidebar-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.subtitle-sidebar-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.subtitle-sidebar-list::-webkit-scrollbar-thumb {
+  background: rgba(110, 115, 141, 0.25);
+  border-radius: 3px;
+}
+
+.subtitle-sidebar-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(110, 115, 141, 0.4);
+}
+
+.subtitle-sidebar-item {
+  display: grid;
+  grid-template-columns: 52px 1fr;
+  gap: 10px;
+  padding: 9px 14px;
+  border-bottom: 1px solid rgba(110, 115, 141, 0.08);
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease;
+  position: relative;
+}
+
+.subtitle-sidebar-item:last-child {
+  border-bottom: none;
+}
+
+.subtitle-sidebar-item:hover {
+  background: var(--subtitle-sidebar-hover-background-color, rgba(54, 58, 79, 0.65));
+}
+
+.subtitle-sidebar-item:focus-visible {
+  outline: 2px solid var(--subtitle-sidebar-active-line-color, #f5bde6);
+  outline-offset: -2px;
+  background: var(--subtitle-sidebar-hover-background-color, rgba(54, 58, 79, 0.65));
+}
+
+.subtitle-sidebar-item.active {
+  background: var(--subtitle-sidebar-active-background-color, rgba(138, 173, 244, 0.12));
+}
+
+.subtitle-sidebar-item.active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 4px;
+  bottom: 4px;
+  width: 3px;
+  border-radius: 0 3px 3px 0;
+  background: var(--subtitle-sidebar-active-line-color, #f5bde6);
+  opacity: 0.85;
+}
+
+.subtitle-sidebar-timestamp {
+  font-size: calc(var(--subtitle-sidebar-font-size, 16px) * 0.72);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.03em;
+  color: var(--subtitle-sidebar-timestamp-color, #6e738d);
+  padding-top: 2px;
+}
+
+.subtitle-sidebar-item:hover .subtitle-sidebar-timestamp {
+  color: var(--subtitle-sidebar-timestamp-color, #a5adcb);
+}
+
+.subtitle-sidebar-item.active .subtitle-sidebar-timestamp {
+  color: var(--subtitle-sidebar-active-line-color, #f5bde6);
+  opacity: 0.75;
+}
+
+.subtitle-sidebar-item.active .subtitle-sidebar-text {
+  color: var(--subtitle-sidebar-active-line-color, #f5bde6);
+}
+
+.subtitle-sidebar-text {
+  white-space: pre-wrap;
+  line-height: 1.5;
+  font-size: 1em;
+  color: var(--subtitle-sidebar-text-color, #cad3f5);
+}
+
 .session-help-content {
  width: min(760px, 92%);
  max-height: 84%;
--- a/src/renderer/subtitle-render.test.ts
+++ b/src/renderer/subtitle-render.test.ts
@@ -977,6 +977,30 @@ test('JLPT CSS rules use underline-only styling in renderer stylesheet', () => {
  );
  assert.match(secondaryHoverBaseBlock, /background:\s*transparent;/);

+  const secondaryEmbeddedHoverBlock = extractClassBlock(
+    cssText,
+    'body.subtitle-sidebar-embedded-open #secondarySubContainer.secondary-sub-hover',
+  );
+  assert.match(
+    secondaryEmbeddedHoverBlock,
+    /right:\s*var\(--subtitle-sidebar-reserved-width\);/,
+  );
+  assert.match(
+    secondaryEmbeddedHoverBlock,
+    /max-width:\s*none;/,
+  );
+  assert.match(
+    secondaryEmbeddedHoverBlock,
+    /transform:\s*none;/,
+  );
+  assert.doesNotMatch(
+    secondaryEmbeddedHoverBlock,
+    /transform:\s*translateX\(calc\(var\(--subtitle-sidebar-reserved-width\)\s*\*\s*-0\.5\)\);/,
+  );
+
+  const subtitleSidebarListBlock = extractClassBlock(cssText, '.subtitle-sidebar-list');
+  assert.doesNotMatch(subtitleSidebarListBlock, /scroll-behavior:\s*smooth;/);
+
  const secondaryHoverVisibleBlock = extractClassBlock(
    cssText,
    '#secondarySubContainer.secondary-sub-hover:hover #secondarySubRoot',
@@ -990,6 +1014,25 @@ test('JLPT CSS rules use underline-only styling in renderer stylesheet', () => {
    /backdrop-filter:\s*var\(--secondary-sub-backdrop-filter,\s*none\);/,
  );

+  const secondaryHoverActiveBlock = extractClassBlock(
+    cssText,
+    '#secondarySubContainer.secondary-sub-hover.secondary-sub-hover-active',
+  );
+  assert.match(secondaryHoverActiveBlock, /opacity:\s*1;/);
+
+  const secondaryHoverActiveRootBlock = extractClassBlock(
+    cssText,
+    '#secondarySubContainer.secondary-sub-hover.secondary-sub-hover-active #secondarySubRoot',
+  );
+  assert.match(
+    secondaryHoverActiveRootBlock,
+    /background:\s*var\(--secondary-sub-background-color,\s*transparent\);/,
+  );
+  assert.match(
+    secondaryHoverActiveRootBlock,
+    /backdrop-filter:\s*var\(--secondary-sub-backdrop-filter,\s*none\);/,
+  );
+
  assert.doesNotMatch(
    cssText,
    /body\.layer-visible\s+#secondarySubContainer\s*\{[^}]*display:\s*none/i,
--- a/src/renderer/utils/dom.ts
+++ b/src/renderer/utils/dom.ts
@@ -74,6 +74,11 @@ export type RendererDom = {
  controllerDebugAxes: HTMLPreElement;
  controllerDebugButtons: HTMLPreElement;
  controllerDebugButtonIndices: HTMLPreElement;
+  subtitleSidebarModal: HTMLDivElement;
+  subtitleSidebarContent: HTMLDivElement;
+  subtitleSidebarClose: HTMLButtonElement;
+  subtitleSidebarStatus: HTMLDivElement;
+  subtitleSidebarList: HTMLUListElement;

  sessionHelpModal: HTMLDivElement;
  sessionHelpClose: HTMLButtonElement;
@@ -171,6 +176,11 @@ export function resolveRendererDom(): RendererDom {
    controllerDebugButtonIndices: getRequiredElement<HTMLPreElement>(
      'controllerDebugButtonIndices',
    ),
+    subtitleSidebarModal: getRequiredElement<HTMLDivElement>('subtitleSidebarModal'),
+    subtitleSidebarContent: getRequiredElement<HTMLDivElement>('subtitleSidebarContent'),
+    subtitleSidebarClose: getRequiredElement<HTMLButtonElement>('subtitleSidebarClose'),
+    subtitleSidebarStatus: getRequiredElement<HTMLDivElement>('subtitleSidebarStatus'),
+    subtitleSidebarList: getRequiredElement<HTMLUListElement>('subtitleSidebarList'),

    sessionHelpModal: getRequiredElement<HTMLDivElement>('sessionHelpModal'),
    sessionHelpClose: getRequiredElement<HTMLButtonElement>('sessionHelpClose'),
--- a/src/shared/ipc/contracts.ts
+++ b/src/shared/ipc/contracts.ts
@@ -7,6 +7,7 @@ export const OVERLAY_HOSTED_MODALS = [
  'kiku',
  'controller-select',
  'controller-debug',
+  'subtitle-sidebar',
 ] as const;
 export type OverlayHostedModal = (typeof OVERLAY_HOSTED_MODALS)[number];

@@ -38,6 +39,7 @@ export const IPC_CHANNELS = {
    getCurrentSubtitle: 'get-current-subtitle',
    getCurrentSubtitleRaw: 'get-current-subtitle-raw',
    getCurrentSubtitleAss: 'get-current-subtitle-ass',
+    getSubtitleSidebarSnapshot: 'get-subtitle-sidebar-snapshot',
    getPlaybackPaused: 'get-playback-paused',
    getSubtitlePosition: 'get-subtitle-position',
    getSubtitleStyle: 'get-subtitle-style',
--- a/src/types.ts
+++ b/src/types.ts
@@ -16,6 +16,8 @@
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

+import type { SubtitleCue } from './core/services/subtitle-cue-parser';
+
 export enum PartOfSpeech {
  noun = 'noun',
  verb = 'verb',
@@ -364,6 +366,29 @@ export interface ResolvedTokenPos2ExclusionConfig {

 export type FrequencyDictionaryMode = 'single' | 'banded';

+export type { SubtitleCue } from './core/services/subtitle-cue-parser';
+
+export type SubtitleSidebarLayout = 'overlay' | 'embedded';
+
+export interface SubtitleSidebarConfig {
+  enabled?: boolean;
+  autoOpen?: boolean;
+  layout?: SubtitleSidebarLayout;
+  toggleKey?: string;
+  pauseVideoOnHover?: boolean;
+  autoScroll?: boolean;
+  maxWidth?: number;
+  opacity?: number;
+  backgroundColor?: string;
+  textColor?: string;
+  fontFamily?: string;
+  fontSize?: number;
+  timestampColor?: string;
+  activeLineColor?: string;
+  activeLineBackgroundColor?: string;
+  hoverLineBackgroundColor?: string;
+}
+
 export interface ShortcutsConfig {
  toggleVisibleOverlayGlobal?: string | null;
  copySubtitle?: string | null;
@@ -675,6 +700,7 @@ export interface Config {
  subsync?: SubsyncConfig;
  startupWarmups?: StartupWarmupsConfig;
  subtitleStyle?: SubtitleStyleConfig;
+  subtitleSidebar?: SubtitleSidebarConfig;
  auto_start_overlay?: boolean;
  jimaku?: JimakuConfig;
  anilist?: AnilistConfig;
@@ -807,6 +833,7 @@ export interface ResolvedConfig {
      bandedColors: [string, string, string, string, string];
    };
  };
+  subtitleSidebar: Required<SubtitleSidebarConfig>;
  auto_start_overlay: boolean;
  jimaku: JimakuConfig & {
    apiBaseUrl: string;
@@ -939,6 +966,19 @@ export interface ClipboardAppendResult {
 export interface SubtitleData {
  text: string;
  tokens: MergedToken[] | null;
+  startTime?: number | null;
+  endTime?: number | null;
+}
+
+export interface SubtitleSidebarSnapshot {
+  cues: SubtitleCue[];
+  currentTimeSec?: number | null;
+  currentSubtitle: {
+    text: string;
+    startTime: number | null;
+    endTime: number | null;
+  };
+  config: Required<SubtitleSidebarConfig>;
 }

 export interface MpvSubtitleRenderMetrics {
@@ -1057,6 +1097,7 @@ export type JimakuDownloadResult =
 export interface ConfigHotReloadPayload {
  keybindings: Keybinding[];
  subtitleStyle: SubtitleStyleConfig | null;
+  subtitleSidebar: Required<SubtitleSidebarConfig>;
  secondarySubMode: SecondarySubMode;
 }

@@ -1075,6 +1116,7 @@ export interface ElectronAPI {
  getCurrentSubtitle: () => Promise<SubtitleData>;
  getCurrentSubtitleRaw: () => Promise<string>;
  getCurrentSubtitleAss: () => Promise<string>;
+  getSubtitleSidebarSnapshot: () => Promise<SubtitleSidebarSnapshot>;
  getPlaybackPaused: () => Promise<boolean | null>;
  onSubtitleAss: (callback: (assText: string) => void) => void;
  setIgnoreMouseEvents: (ignore: boolean, options?: { forward?: boolean }) => void;
@@ -1134,7 +1176,8 @@ export interface ElectronAPI {
      | 'jimaku'
      | 'kiku'
      | 'controller-select'
-      | 'controller-debug',
+      | 'controller-debug'
+      | 'subtitle-sidebar',
  ) => void;
  notifyOverlayModalOpened: (
    modal:
@@ -1143,7 +1186,8 @@ export interface ElectronAPI {
      | 'jimaku'
      | 'kiku'
      | 'controller-select'
-      | 'controller-debug',
+      | 'controller-debug'
+      | 'subtitle-sidebar',
  ) => void;
  reportOverlayContentBounds: (measurement: OverlayContentMeasurement) => void;
  onConfigHotReload: (callback: (payload: ConfigHotReloadPayload) => void) => void;