{#
  This file is part of g0v/OpenTransLive.
  Copyright (c) 2025 Sean Gau <rrtw0627@gmail.com>
  Licensed under the GNU AGPL v3.0
  See LICENSE for details.
-#}
{% extends "base.html" %}
{% block title %}GT Live 廣田資訊 - Studio Control{% endblock %}
{% block head %}
<script src="https://cdn.socket.io/4.8.1/socket.io.min.js"
  integrity="sha384-mkQ3/7FUtcGyoppY6bz/PORYoGqOl7/aSUMn2ymDOJcapfS6PHqxhRTMh1RR0Q6+"
  crossorigin="anonymous"></script>
{% endblock %}

{% block content %}
<div id="studio-root" class="flex h-dvh flex-col bg-[#0b1018] font-sans text-[#edf3fa]">
  <!-- Top Bar -->
  <header id="studio-header" class="relative z-30 shrink-0 border-b border-[#2a3646] bg-[#111925] shadow-[0_10px_32px_rgba(4,9,16,0.22)]">

    <!-- Login status -->
    <div class="flex min-h-9 items-center justify-end gap-1.5 border-b border-[#2a3646] px-2.5 max-md:min-h-10">
      <div class="me-auto inline-flex min-w-0 items-center gap-1.5">
        <span class="inline-flex size-6 shrink-0 items-center justify-center rounded-md bg-[#326fbd] text-[#dceaff] shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]" aria-hidden="true">
          <iconify-icon icon="ph:waveform" width="16" height="16"></iconify-icon>
        </span>
        <span class="text-[0.82rem] font-bold tracking-[-0.015em] max-[420px]:hidden">GT Live</span>
        <span class="border-l border-[#3b4a5d] pl-2 text-[0.72rem] text-[#8d9aae] max-md:hidden">Studio</span>
      </div>
      {% if email %}
      <span class="max-w-[min(28vw,18rem)] truncate text-xs text-gray-400 max-md:hidden">{{ email }}</span>
      <a href="/user-dashboard" class="nav-link">My Sessions</a>
      <a href="{{ source_code_url }}" target="_blank" rel="noopener" class="nav-link inline-flex items-center gap-1">
        <iconify-icon icon="ph:github-logo" width="13" height="13"></iconify-icon><span class="max-[420px]:hidden">Source</span>
      </a>
      <a href="/logout" class="nav-link">Logout</a>
      {% else %}
      <a href="{{ source_code_url }}" target="_blank" rel="noopener" class="nav-link inline-flex items-center gap-1">
        <iconify-icon icon="ph:github-logo" width="13" height="13"></iconify-icon><span class="max-[420px]:hidden">Source</span>
      </a>
      <a href="/login" class="nav-link">Login</a>
      {% endif %}
    </div>
    <div id="header-toolbar-wrap" class="max-md:absolute max-md:inset-x-0 max-md:top-full max-md:z-50 max-md:grid max-md:grid-rows-[0fr] max-md:transition-[grid-template-rows] max-md:duration-200">
      <div id="header-toolbar" class="flex flex-wrap items-center gap-1.5 border-b border-[#2a3646] bg-[#182230] px-2 py-1.5 max-md:min-h-0 max-md:max-h-[min(68vh,34rem)] max-md:flex-wrap max-md:content-start max-md:overflow-hidden max-md:border-x max-md:border-[#2a3646] max-md:py-0 max-md:transition-[padding] max-md:duration-200">
        <div class="toolbar-group">
          <span class="toolbar-label">KEY</span>
          <div class="relative group">
            <input id="user-secret-key" type="text" value="{{ user_secret_key }}"
              class="copyable-input w-full max-w-40 bg-gray-800 border-none text-xs text-gray-400 px-3 py-1 rounded focus:ring-1 focus:ring-blue-500 outline-none cursor-pointer readonly font-mono"
              readonly title="{{ user_secret_key }}">
            <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
              <iconify-icon icon="ph:copy" class="text-gray-500" width="16" height="16"></iconify-icon>
            </div>
          </div>
        </div>
        <!-- Mic Toggle Button -->
        {% if is_realtime_enabled %}
        <div class="toolbar-group" id="mic-group">
          <button id="mic-toggle-btn" title="Toggle microphone" class="mic-btn mic-off inline-flex min-h-[30px] select-none items-center gap-1.5 rounded-lg border border-transparent px-1.5 py-[3px] text-[0.6rem] font-bold tracking-[0.08em] outline-none transition-colors active:translate-y-px disabled:cursor-not-allowed" aria-pressed="false">
            <iconify-icon class="mic-icon-on" icon="ph:microphone" width="20" height="20"></iconify-icon>
            <iconify-icon class="mic-icon-off" icon="ph:microphone-slash" width="20" height="20"></iconify-icon>
            <span id="mic-label">MIC OFF</span>
          </button>
          <div id="mic-level-container" class="flex items-center gap-1" style="display:none;">
            <div class="relative w-24 h-3 bg-gray-700 rounded overflow-hidden">
              <div id="mic-level-bar" class="absolute left-0 top-0 h-full bg-green-500 rounded transition-none"
                style="width:0%"></div>
            </div>
            <span id="mic-level-db" class="text-xs text-gray-500 w-10 text-right font-mono">--dB</span>
          </div>
          <select id="mic-device-selector"
            class="w-full max-w-48 bg-gray-800 border border-gray-700 text-xs text-gray-300 px-2 py-1 text-sm rounded focus:ring-1 focus:ring-blue-500 outline-none"
            style="display:none;">
            <option value="">Select Microphone</option>
          </select>
        </div>
        <!-- Transcription engine (only for realtime transcription) -->
        <div class="toolbar-group">
          <span class="toolbar-label">Engine</span>
          <select id="stt-provider-select"
            class="w-full max-w-40 bg-gray-800 border border-gray-700 text-xs text-gray-300 px-2 py-1 rounded focus:ring-1 focus:ring-blue-500 outline-none">
            <option value="">Server Default</option>
            <!-- Engine options are filled by loadSttProvider: only engines with an API key. -->
          </select>
        </div>
        <!-- Detect Language select (only for realtime transcription) -->
        <div class="toolbar-group">
          <span class="toolbar-label">Detect Lang</span>
          <select id="scribe-lang-select"
            class="w-full max-w-48 bg-gray-800 border border-gray-700 text-xs text-gray-300 px-2 py-1 rounded focus:ring-1 focus:ring-blue-500 outline-none">
            <option value="">Auto Detect</option>
          </select>
        </div>
        {% endif %}

        <!-- Keywords (opens modal) -->
        <div class="toolbar-group">
          <span class="toolbar-label">Keywords</span>
          <button id="kw-dropdown-btn" type="button" class="dropdown-btn min-w-20 max-w-40">
            <span id="kw-dropdown-label" class="truncate flex-1 text-xs">Loading...</span>
            <iconify-icon icon="ph:pencil-simple" width="14" height="14" class="flex-shrink-0"></iconify-icon>
          </button>
        </div>

        <!-- Dictionary: glossary + text mapping (opens modal) -->
        <div class="toolbar-group">
          <span class="toolbar-label">Dictionary</span>
          <button id="td-dropdown-btn" type="button" class="dropdown-btn min-w-20 max-w-40">
            <span id="td-dropdown-label" class="truncate flex-1 text-xs">Loading...</span>
            <iconify-icon icon="ph:pencil-simple" width="14" height="14" class="flex-shrink-0"></iconify-icon>
          </button>
        </div>

        <!-- Languages (opens modal) -->
        <div class="toolbar-group">
          <span class="toolbar-label">Languages</span>
          <button id="lang-dropdown-btn" type="button" class="dropdown-btn min-w-32 max-w-48">
            <span id="lang-dropdown-label" class="truncate flex-1 text-xs">Loading...</span>
            <iconify-icon icon="ph:pencil-simple" width="14" height="14" class="flex-shrink-0"></iconify-icon>
          </button>
        </div>
        <!-- Ephemeral viewer display control -->
        <div class="toolbar-group">
          <span class="toolbar-label">Viewers</span>
          <button id="info-btn" type="button"
            class="panel-add-btn inline-flex min-w-24 items-center justify-center gap-1.5"
            aria-label="Viewer URL parameters">
            <iconify-icon icon="ph:info" width="14" height="14"></iconify-icon>
            <span>Viewer URL</span>
          </button>
          <button id="viewer-clear-btn" type="button"
            class="panel-add-btn inline-flex min-w-28 items-center justify-center gap-1.5 disabled:cursor-wait disabled:opacity-60"
            title="Temporarily clear text on all connected viewers">
            <iconify-icon icon="ph:eraser" width="14" height="14"></iconify-icon>
            <span id="viewer-clear-label" aria-live="polite">Clear screens</span>
          </button>
        </div>
        <!-- Translate Tone -->
        <div class="toolbar-group">
          <span class="toolbar-label">Tone</span>
          <select id="tone-select"
            class="w-full max-w-36 bg-gray-800 border border-gray-700 text-xs text-gray-300 px-2 py-1 rounded focus:ring-1 focus:ring-blue-500 outline-none">
            <option value="fluent">Fluent</option>
            <option value="formal">Formal</option>
            <option value="casual">Casual</option>
            <option value="literal">Literal</option>
            <option value="custom">Custom...</option>
          </select>
          <input id="tone-custom-input" type="text" placeholder="e.g. academic" maxlength="64"
            class="hidden w-full max-w-36 bg-gray-800 border border-gray-700 text-xs text-gray-300 px-2 py-1 rounded focus:ring-1 focus:ring-blue-500 outline-none font-mono">
        </div>

        <!-- Co-owners (primary owner only - opens modal) -->
        {% if is_primary_owner %}
        <div class="toolbar-group">
          <span class="toolbar-label">Co-owners</span>
          <button id="co-dropdown-btn" type="button" class="dropdown-btn min-w-20 max-w-40">
            <span id="co-dropdown-label" class="truncate flex-1 text-xs">Loading...</span>
            <iconify-icon icon="ph:pencil-simple" width="14" height="14" class="flex-shrink-0"></iconify-icon>
          </button>
        </div>
        {% endif %}

      </div>
    </div>
    <div class="md:hidden flex items-stretch">
      <button id="header-toggle" type="button"
        class="header-bar flex-1 px-3 py-2 border-b border-gray-700 flex items-center gap-2 text-left"
        aria-label="Toggle controls" aria-expanded="false">
        <span class="text-xs font-semibold text-gray-300">Controls</span>
        <iconify-icon id="header-chevron" icon="ph:caret-down" width="16" height="16"
          class="ml-auto text-gray-500 transition-transform duration-200"></iconify-icon>
      </button>
    </div>
    <div class="flex min-h-7 items-center gap-2.5 bg-[#111925] px-2.5 text-[#c6d1df] max-md:min-h-9">
      <span class="flex items-center gap-2 text-xs">
        <span id="status-indicator" class="status-dot-sm bg-gray-400"></span>
        <span id="status-text">Connecting...</span>
      </span>
      <span class="flex items-center gap-1.5 border-l border-[#2a3646] pl-2.5 text-xs text-[#8d9aae]">
        <span class="max-sm:hidden">Settings</span>
        <span id="settings-status" class="max-w-[min(28vw,16rem)] min-w-12 truncate tabular-nums text-[#bdc9d7] max-sm:max-w-24" role="status" aria-live="polite">Saved</span>
      </span>
      <span id="viewer-count-display" class="ms-auto border-l border-[#2a3646] pl-3 text-xs tabular-nums text-[#8d9aae] max-md:pl-2"
        title="Current viewers connected to this session">Viewers: --</span>
      {% if is_realtime_enabled %}
      <span id="audio-usage-display" class="border-l border-[#2a3646] pl-3 text-xs tabular-nums text-[#8d9aae] max-md:pl-2"
        title="Audio sent to transcription service this session">Audio: --</span>
      <button id="mic-mobile-btn" title="Toggle microphone" class="mic-btn mic-off my-auto inline-flex min-h-[30px] select-none items-center gap-1.5 rounded-lg border border-transparent px-1.5 py-[3px] text-[0.6rem] font-bold tracking-[0.08em] outline-none transition-colors active:translate-y-px disabled:cursor-not-allowed md:hidden!"
        aria-pressed="false">
        <iconify-icon class="mic-icon-on" icon="ph:microphone" width="20" height="20"></iconify-icon>
        <iconify-icon class="mic-icon-off" icon="ph:microphone-slash" width="20" height="20"></iconify-icon>
      </button>
      {% endif %}
    </div>

  </header>

  <!-- Languages modal -->
  <div id="lang-dropdown-panel" class="modal-overlay hidden fixed flex inset-0 z-[100] items-center justify-center bg-[rgba(3,7,13,0.72)] p-4 backdrop-blur-sm" role="dialog" aria-modal="true"
    aria-labelledby="lang-modal-title">
    <div class="modal-panel flex max-h-[85vh] w-full max-w-[30rem] flex-col overflow-hidden rounded-xl border border-[#3b4a5d] bg-[#182230] shadow-[0_24px_72px_rgba(3,8,15,0.48)]">
      <div class="modal-header flex min-h-[52px] shrink-0 items-center gap-2 border-b border-[#2a3646] px-4 py-3">
        <h2 id="lang-modal-title" class="modal-title m-0 flex-1 text-base font-bold text-[#edf3fa]">Languages</h2>
        <button type="button" class="modal-close-btn inline-flex size-8 items-center justify-center rounded-lg text-[#8d9aae] transition-colors hover:bg-[#273548] hover:text-[#edf3fa]" data-modal-close aria-label="Close">
          <iconify-icon icon="ph:x" width="20" height="20"></iconify-icon>
        </button>
      </div>
      <div class="modal-body flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-4">
        <p class="text-[11px] leading-snug text-[#9eacbf]">
          Select target translation languages. Add a custom BCP-47 code (e.g. <span class="font-mono">ja-JP</span>) if
          it's not in the list.
        </p>
        <p id="lang-limit-hint" class="hidden rounded-lg border border-[#2a3646] bg-[#111a27] px-3 py-2 text-[11px] leading-snug text-[#aebed2]"
          role="status" aria-live="polite"></p>
        <div id="lang-checkbox-list" class="modal-list flex min-h-14 flex-1 basis-auto flex-col gap-1 overflow-y-auto pr-1 [scrollbar-color:#4d5d72_transparent] [scrollbar-width:thin] [&>div]:rounded-lg [&>label]:rounded-lg"></div>
        <div class="modal-add-row flex shrink-0 gap-1 border-t border-[#2a3646] pt-3">
          <input id="lang-custom-input" type="text" placeholder="Custom (e.g. ja-JP)"
            class="panel-input font-mono flex-1">
          <button id="lang-custom-add-btn" type="button" class="panel-add-btn">Add</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Keywords modal -->
  <div id="kw-dropdown-panel" class="modal-overlay hidden fixed flex inset-0 z-[100] items-center justify-center bg-[rgba(3,7,13,0.72)] p-4 backdrop-blur-sm" role="dialog" aria-modal="true"
    aria-labelledby="kw-modal-title">
    <div class="modal-panel flex max-h-[85vh] w-full max-w-[30rem] flex-col overflow-hidden rounded-xl border border-[#3b4a5d] bg-[#182230] shadow-[0_24px_72px_rgba(3,8,15,0.48)]">
      <div class="modal-header flex min-h-[52px] shrink-0 items-center gap-2 border-b border-[#2a3646] px-4 py-3">
        <h2 id="kw-modal-title" class="modal-title m-0 flex-1 text-base font-bold text-[#edf3fa]">Keywords</h2>
        <button type="button" class="modal-close-btn inline-flex size-8 items-center justify-center rounded-lg text-[#8d9aae] transition-colors hover:bg-[#273548] hover:text-[#edf3fa]" data-modal-close aria-label="Close">
          <iconify-icon icon="ph:x" width="20" height="20"></iconify-icon>
        </button>
      </div>
      <div class="modal-body flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-4">
        <p class="text-[11px] leading-snug text-[#9eacbf]">
          Keywords help correction recognize names, jargon, or phrases. Pin a keyword to keep it from being
          auto-removed and to bias the speech engine toward it (ElevenLabs uses up to 50 pins of ≤20 characters;
          takes effect on the engine's next connection). Use <iconify-icon icon="ph:translate" width="11" height="11" class="align-middle"></iconify-icon>
          to look a keyword's translations up on the web and add them to the glossary.
        </p>
        <div class="flex shrink-0 flex-col gap-2 rounded-lg border border-[#2a3646] bg-[#111a27] p-3">
          <label for="kw-generate-text" class="text-xs font-semibold text-[#d7e1ed]">Generate from reference text</label>
          <textarea id="kw-generate-text" rows="4" maxlength="20000"
            placeholder="Paste an agenda, script, article, or notes. Multiple lines are supported."
            class="panel-input min-h-24 w-full flex-none resize-y leading-relaxed"></textarea>
          <div class="flex items-center gap-2">
            <button id="kw-generate-btn" type="button"
              class="panel-add-btn inline-flex items-center gap-1.5 disabled:cursor-wait disabled:opacity-60">
              <iconify-icon id="kw-generate-icon" icon="ph:sparkle" width="14" height="14"></iconify-icon>
              Generate keywords
            </button>
            <span id="kw-generate-status" class="hidden min-w-0 flex-1 text-[11px] leading-snug text-[#aebed2]"
              role="status" aria-live="polite"></span>
          </div>
        </div>
        <div id="kw-lookup-status" class="hidden rounded-lg border border-[#34465c] bg-[#111a27] px-3 py-2 text-[11px] leading-snug text-[#aebed2]"
          role="status" aria-live="polite"></div>
        <div id="kw-list" class="modal-list flex min-h-14 flex-1 basis-auto flex-col gap-1 overflow-y-auto pr-1 [scrollbar-color:#4d5d72_transparent] [scrollbar-width:thin] [&>div]:rounded-lg [&>label]:rounded-lg"></div>
        <div class="modal-add-row flex shrink-0 gap-1 border-t border-[#2a3646] pt-3">
          <input id="kw-custom-input" type="text" placeholder="Add keyword" class="panel-input flex-1">
          <button id="kw-custom-add-btn" type="button" class="panel-add-btn">Add</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Text mapping modal -->
  <div id="td-dropdown-panel" class="modal-overlay hidden fixed flex inset-0 z-[100] items-center justify-center bg-[rgba(3,7,13,0.72)] p-4 backdrop-blur-sm" role="dialog" aria-modal="true"
    aria-labelledby="td-modal-title">
    <div class="modal-panel flex max-h-[85vh] w-full max-w-[30rem] flex-col overflow-hidden rounded-xl border border-[#3b4a5d] bg-[#182230] shadow-[0_24px_72px_rgba(3,8,15,0.48)]">
      <div class="modal-header flex min-h-[52px] shrink-0 items-center gap-2 border-b border-[#2a3646] px-4 py-3">
        <h2 id="td-modal-title" class="modal-title m-0 flex-1 text-base font-bold text-[#edf3fa]">Dictionary</h2>
        <button type="button" class="modal-close-btn inline-flex size-8 items-center justify-center rounded-lg text-[#8d9aae] transition-colors hover:bg-[#273548] hover:text-[#edf3fa]" data-modal-close aria-label="Close">
          <iconify-icon icon="ph:x" width="20" height="20"></iconify-icon>
        </button>
      </div>
      <div class="modal-body flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-4">
        <h3 class="text-xs font-semibold text-gray-200">Glossary</h3>
        <p class="text-[11px] leading-snug text-[#9eacbf]">
          Keeps names and jargon translating the same way every time. One entry holds one term written in several
          languages; the wanted spelling is swapped in before translating.
        </p>
        <div id="gl-list" class="modal-list flex min-h-14 flex-1 basis-auto flex-col gap-1 overflow-y-auto pr-1 [scrollbar-color:#4d5d72_transparent] [scrollbar-width:thin] [&>div]:rounded-lg [&>label]:rounded-lg"></div>
        <div class="modal-add-row flex shrink-0 gap-1 border-t border-[#2a3646] pt-3">
          <input id="gl-file-input" type="file" accept=".json,application/json" class="hidden">
          <button id="gl-import-btn" type="button" class="panel-add-btn flex-1">Import JSON</button>
          <button id="gl-export-btn" type="button" class="panel-add-btn">Export</button>
          <button id="gl-clear-btn" type="button" class="panel-add-btn">Clear all</button>
        </div>

        <h3 class="text-xs font-semibold text-gray-200 mt-2">Replace</h3>
        <p class="text-[11px] leading-snug text-[#9eacbf]">
          Replace specific phrases. Choose <span class="font-mono">Flow</span> to fix the source transcript, or a
          language to rewrite that translation's output.
        </p>
        <div id="td-list" class="modal-list flex min-h-14 flex-1 basis-auto flex-col gap-1 overflow-y-auto pr-1 [scrollbar-color:#4d5d72_transparent] [scrollbar-width:thin] [&>div]:rounded-lg [&>label]:rounded-lg"></div>
        <div class="modal-add-row flex shrink-0 gap-1 border-t border-[#2a3646] pt-3 flex-col items-stretch gap-1">
          <div class="flex gap-1">
            <input id="td-from-input" type="text" placeholder="From" class="panel-input flex-1">
            <input id="td-to-input" type="text" placeholder="To" class="panel-input flex-1">
          </div>
          <div class="flex gap-1">
            <select id="td-target-select" class="panel-input flex-1"></select>
            <button id="td-add-btn" type="button" class="panel-add-btn">Add</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  {% if is_primary_owner %}
  <!-- Co-owners modal -->
  <div id="co-dropdown-panel" class="modal-overlay hidden fixed flex inset-0 z-[100] items-center justify-center bg-[rgba(3,7,13,0.72)] p-4 backdrop-blur-sm" role="dialog" aria-modal="true"
    aria-labelledby="co-modal-title">
    <div class="modal-panel flex max-h-[85vh] w-full max-w-[30rem] flex-col overflow-hidden rounded-xl border border-[#3b4a5d] bg-[#182230] shadow-[0_24px_72px_rgba(3,8,15,0.48)]">
      <div class="modal-header flex min-h-[52px] shrink-0 items-center gap-2 border-b border-[#2a3646] px-4 py-3">
        <h2 id="co-modal-title" class="modal-title m-0 flex-1 text-base font-bold text-[#edf3fa]">Co-owners</h2>
        <button type="button" class="modal-close-btn inline-flex size-8 items-center justify-center rounded-lg text-[#8d9aae] transition-colors hover:bg-[#273548] hover:text-[#edf3fa]" data-modal-close aria-label="Close">
          <iconify-icon icon="ph:x" width="20" height="20"></iconify-icon>
        </button>
      </div>
      <div class="modal-body flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-4">
        <p class="text-[11px] leading-snug text-[#9eacbf]">
          Co-owners can join the panel and edit session settings. Only the primary owner can add or remove co-owners.
        </p>
        <div id="co-list" class="modal-list flex min-h-14 flex-1 basis-auto flex-col gap-1 overflow-y-auto pr-1 [scrollbar-color:#4d5d72_transparent] [scrollbar-width:thin] [&>div]:rounded-lg [&>label]:rounded-lg"></div>
        <div class="modal-add-row flex shrink-0 gap-1 border-t border-[#2a3646] pt-3">
          <input id="co-email-input" type="email" placeholder="co-owner@example.com" class="panel-input flex-1">
          <button id="co-add-btn" type="button" class="panel-add-btn">Add</button>
        </div>
      </div>
    </div>
  </div>
  {% endif %}

  <!-- Committed flow source editor -->
  <div id="flow-edit-modal" class="modal-overlay hidden fixed flex inset-0 z-[100] items-center justify-center bg-[rgba(3,7,13,0.72)] p-4 backdrop-blur-sm" role="dialog" aria-modal="true"
    aria-labelledby="flow-edit-title">
    <form id="flow-edit-form" class="modal-panel flex w-full max-w-[34rem] flex-col overflow-hidden rounded-xl border border-[#3b4a5d] bg-[#182230] shadow-[0_24px_72px_rgba(3,8,15,0.48)]">
      <div class="modal-header flex min-h-[52px] shrink-0 items-center gap-2 border-b border-[#2a3646] px-4 py-3">
        <h2 id="flow-edit-title" class="modal-title m-0 flex-1 text-base font-bold text-[#edf3fa]">Edit source</h2>
        <button id="flow-edit-close" type="button" class="modal-close-btn inline-flex size-8 items-center justify-center rounded-lg text-[#8d9aae] transition-colors hover:bg-[#273548] hover:text-[#edf3fa] disabled:cursor-wait disabled:opacity-50" aria-label="Close">
          <iconify-icon icon="ph:x" width="20" height="20"></iconify-icon>
        </button>
      </div>
      <div class="modal-body flex flex-col gap-3 p-4">
        <p class="text-[11px] leading-snug text-[#9eacbf]">
          Saving replaces the source and regenerates every configured translation.
        </p>
        <label for="flow-edit-text" class="text-xs font-semibold text-[#d7e1ed]">Source text</label>
        <textarea id="flow-edit-text" rows="6" maxlength="5000" required
          class="panel-input min-h-32 w-full resize-y leading-relaxed disabled:cursor-wait disabled:opacity-60"></textarea>
        <div class="flex items-start justify-between gap-3">
          <div id="flow-edit-status" class="min-h-4 flex-1 text-[11px] leading-snug text-[#aebed2]" role="status" aria-live="polite"></div>
          <span class="shrink-0 text-[11px] leading-snug text-[#7f8ea3]">Enter to save · Shift+Enter for newline</span>
        </div>
        <div class="flex justify-end gap-2 border-t border-[#2a3646] pt-3">
          <button id="flow-edit-cancel" type="button" class="panel-add-btn disabled:cursor-wait disabled:opacity-50">Cancel</button>
          <button id="flow-edit-submit" type="submit" class="panel-add-btn inline-flex min-w-36 items-center justify-center gap-1.5 disabled:cursor-wait disabled:opacity-60">
            <iconify-icon id="flow-edit-spinner" icon="ph:spinner-gap" width="15" height="15" class="hidden animate-spin"></iconify-icon>
            <span id="flow-edit-submit-label">Save &amp; retranslate</span>
          </button>
        </div>
      </div>
    </form>
  </div>
  <!-- Viewer URL parameters modal -->
  <div id="info-modal" class="modal-overlay hidden fixed inset-0 z-[100] flex items-center justify-center bg-[rgba(3,7,13,0.72)] p-4 backdrop-blur-sm" role="dialog" aria-modal="true"
    aria-labelledby="info-modal-title">
    <div class="modal-panel flex max-h-[85vh] w-full max-w-[34rem] flex-col overflow-hidden rounded-xl border border-[#3b4a5d] bg-[#182230] shadow-[0_24px_72px_rgba(3,8,15,0.48)]">
      <div class="modal-header flex min-h-[52px] shrink-0 items-center gap-2 border-b border-[#2a3646] px-4 py-3">
        <div class="min-w-0 flex-1">
          <h2 id="info-modal-title" class="modal-title m-0 text-base font-bold text-[#edf3fa]">Viewer URL parameters</h2>
          <p class="mt-0.5 text-[11px] leading-snug text-[#9eacbf]">Customize the public transcript URL and preview.</p>
        </div>
        <button type="button" class="modal-close-btn inline-flex size-8 shrink-0 items-center justify-center rounded-lg text-[#8d9aae] transition-colors hover:bg-[#273548] hover:text-[#edf3fa]" data-modal-close aria-label="Close">
          <iconify-icon icon="ph:x" width="20" height="20"></iconify-icon>
        </button>
      </div>
      <div class="modal-body min-h-0 flex-1 space-y-4 overflow-y-auto p-4">
        <section>
          <div class="mb-2 flex items-center justify-between gap-2">
            <code class="viewer-param-code rounded-md px-2 py-0.5 font-mono text-xs">font-size</code>
            <span class="text-xs text-[#9eacbf]">default: 1.25rem</span>
          </div>
          <p class="mb-2 text-sm text-[#9eacbf]">Controls the transcript text size. Accepts any CSS length value or a bare number treated as pixels.</p>
          <div class="flex flex-wrap gap-1.5">
            <button type="button" class="viewer-param-btn" data-viewer-param="font-size" data-value="1rem">1rem</button>
            <button type="button" class="viewer-param-btn" data-viewer-param="font-size" data-value="1.25rem" data-default>1.25rem</button>
            <button type="button" class="viewer-param-btn" data-viewer-param="font-size" data-value="1.5rem">1.5rem</button>
            <button type="button" class="viewer-param-btn" data-viewer-param="font-size" data-value="2rem">2rem</button>
            <button type="button" class="viewer-param-btn" data-viewer-param="font-size" data-value="3rem">3rem</button>
            <button type="button" class="viewer-param-btn" data-viewer-param="font-size" data-value="24px">24px</button>
          </div>
        </section>

        <div class="border-t border-[#2a3646]"></div>

        <section>
          <div class="mb-2 flex items-center justify-between gap-2">
            <code class="viewer-param-code rounded-md px-2 py-0.5 font-mono text-xs">theme</code>
            <span class="text-xs text-[#9eacbf]">default: light</span>
          </div>
          <p class="mb-2 text-sm text-[#9eacbf]">Sets the viewer color scheme.</p>
          <div class="flex flex-wrap gap-1.5">
            <button type="button" class="viewer-param-btn" data-viewer-param="theme" data-value="light" data-default>light</button>
            <button type="button" class="viewer-param-btn" data-viewer-param="theme" data-value="dark">dark</button>
            <button type="button" class="viewer-param-btn" data-viewer-param="theme" data-value="high-contrast">high-contrast</button>
          </div>
        </section>

        <div class="border-t border-[#2a3646]"></div>

        <section>
          <div class="mb-2 flex items-center justify-between gap-2">
            <code class="viewer-param-code rounded-md px-2 py-0.5 font-mono text-xs">show</code>
            <span class="text-xs text-[#9eacbf]">default: all</span>
          </div>
          <p class="mb-2 text-sm text-[#9eacbf]">Choose one of this session's target languages (including custom codes), the complete comma-separated language list, or all. Options follow the session's language settings. Omit the parameter to show every language, including languages added later.</p>
          <div id="viewer-show-options" class="flex flex-wrap gap-1.5">
            <button type="button" class="viewer-param-btn" data-viewer-param="show" data-value="" data-default>all</button>
          </div>
        </section>

        <div class="border-t border-[#2a3646]"></div>

        <section>
          <div class="mb-1.5 text-xs font-semibold text-[#9eacbf]">Viewer share link</div>
          <p class="mb-2 text-sm text-[#9eacbf]">Give this link to attendees. It carries the viewer key; regenerating it cuts off the old link immediately.</p>
          <div class="flex items-start gap-2">
            <code id="viewer-share-url" class="viewer-param-code min-w-0 flex-1 break-all rounded-lg px-2.5 py-2 font-mono text-xs"></code>
            <button id="copy-share-btn" type="button" class="inline-flex size-8 shrink-0 items-center justify-center rounded-lg text-[#aebed2] transition-colors hover:bg-[#273548] hover:text-[#edf3fa]" title="Copy share link" aria-label="Copy viewer share link">
              <iconify-icon icon="ph:copy" width="16" height="16"></iconify-icon>
            </button>
          </div>
          <div class="mt-2 flex items-center gap-2">
            <button id="rotate-viewer-key-btn" type="button" class="panel-add-btn disabled:cursor-wait disabled:opacity-60">Regenerate link</button>
            <span id="viewer-share-status" class="text-xs text-[#9eacbf]" role="status" aria-live="polite"></span>
          </div>
        </section>

        <div class="border-t border-[#2a3646]"></div>

        <section>
          <div class="mb-1.5 text-xs font-semibold text-[#9eacbf]">Viewer URL</div>
          <div class="flex items-start gap-2">
            <code id="current-url-display" class="viewer-param-code min-w-0 flex-1 break-all rounded-lg px-2.5 py-2 font-mono text-xs"></code>
            <button id="copy-url-btn" type="button" class="inline-flex size-8 shrink-0 items-center justify-center rounded-lg text-[#aebed2] transition-colors hover:bg-[#273548] hover:text-[#edf3fa]" title="Copy URL" aria-label="Copy viewer URL">
              <iconify-icon icon="ph:copy" width="16" height="16"></iconify-icon>
            </button>
          </div>
          <div id="copy-feedback" class="mt-1 hidden text-right text-xs text-[#9eacbf]" role="status" aria-live="polite">Copied!</div>
        </section>
      </div>
    </div>
  </div>

  <div class="flex-1 flex min-h-0">
    <div id="viewer-wrap" class="relative m-1 min-w-0 flex-1 overflow-hidden rounded-xl border border-[#2a3646] bg-[#101826] shadow-[0_18px_44px_rgba(3,8,15,0.24)] max-md:mx-1.5 max-md:mt-1.5 max-md:mb-0 max-md:rounded-[10px] max-md:pb-10">
      <iframe id="viewer-frame" src="/rt/{{ sid }}?theme=dark&show=all{% if viewer_key %}&k={{ viewer_key | urlencode }}{% endif %}{% if preview_meeting_mode %}&mode=meeting&columns=1{% endif %}" class="w-full h-full border-0" allow="autoplay; fullscreen"></iframe>
    </div>
    <!-- Flow panel (side column on desktop, bottom drawer on mobile) -->
    <div id="flow-panel" class="mr-1 my-1 flex w-72 shrink-0 flex-col overflow-hidden rounded-xl border border-[#2a3646] bg-[#111925] max-md:fixed max-md:inset-x-0 max-md:bottom-0 max-md:z-40 max-md:m-0 max-md:grid max-md:max-h-[60vh] max-md:w-auto max-md:grid-rows-[auto_0fr] max-md:rounded-t-[10px] max-md:rounded-b-none max-md:border-x-0 max-md:border-b-0 max-md:shadow-[0_-4px_12px_rgba(0,0,0,0.4)] max-md:transition-[grid-template-rows] max-md:duration-200 max-md:[&.flow-open]:grid-rows-[auto_1fr]">
      <button id="flow-toggle" type="button" aria-expanded="false"
        class="flow-header flex min-h-10 w-full cursor-pointer items-center gap-2 border-b border-[#2a3646] bg-[#182230] px-3 py-1.5 text-left transition-colors hover:bg-[#1d2938] md:cursor-default md:hover:bg-[#182230] max-md:min-h-[42px] max-md:py-2">
        <span class="text-xs font-semibold text-gray-300">Current Flow</span>
        <span id="flow-count" class="ml-auto text-xs tabular-nums text-[#8d9aae]" role="status" aria-live="polite">0 segments</span>
        <iconify-icon id="flow-chevron" icon="ph:caret-up" width="16" height="16"
          class="hidden text-gray-500 transition-transform duration-200 max-md:inline-flex max-md:[.flow-open_&]:rotate-180"></iconify-icon>
      </button>
      <div id="flow-content" class="flex-1 space-y-1 overflow-y-auto px-3 py-2 text-[0.78rem] leading-[1.55] max-md:min-h-0 max-md:overflow-hidden max-md:py-0 max-md:transition-[padding] max-md:duration-200 max-md:[.flow-open_&]:overflow-y-auto max-md:[.flow-open_&]:py-2"></div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<style>
  #studio-root :is(button, a, input, select):focus-visible {
    outline: 2px solid #6d9ee8;
    outline-offset: 2px;
  }

  .mic-btn .mic-icon-on,
  .mic-btn .mic-icon-off {
    display: none;
  }

  .mic-btn.mic-on .mic-icon-on,
  .mic-btn.mic-off .mic-icon-off,
  .mic-btn.mic-busy .mic-icon-off {
    display: inline-block;
  }

  /* OFF state */
  .mic-off {
    background: #202b3a;
    border-color: #3b4a5d;
    color: #b5c0ce;
  }

  .mic-off:hover {
    background: #293749;
    border-color: #52647a;
    color: #edf3fa;
  }

  /* ON / recording state */
  .mic-on {
    background: #8b2635;
    border-color: #e76476;
    color: #fff0f2;
    box-shadow: 0 0 0 0 rgba(231, 100, 118, 0.55);
    animation: mic-pulse 1.6s ease-in-out infinite;
  }

  .mic-on:hover {
    background: #991b1b;
  }

  #mic-level-db.peak-active {
    animation: peak-hold 3s ease-in forwards;
  }

  @keyframes peak-hold {

    0%,
    95% {
      color: #ef4444;
    }

    100% {
      color: inherit;
    }
  }

  @keyframes mic-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(231, 100, 118, 0.55);
    }

    50% {
      box-shadow: 0 0 0 7px rgba(231, 100, 118, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(231, 100, 118, 0);
    }
  }

  /* Stopping / busy state */
  .mic-busy {
    background: #1f2937;
    border-color: #4b5563;
    color: #6b7280;
    cursor: not-allowed;
    animation: none;
  }

  @media (prefers-reduced-motion: reduce) {
    #studio-root *,
    #studio-root *::before,
    #studio-root *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  .viewer-param-code {
    background: #111a27;
    color: #9fc4fa;
    border: 1px solid #2a3646;
  }

  .viewer-param-btn {
    border: 1px solid #3b4a5d;
    border-radius: 0.375rem;
    background: #202b3a;
    color: #bdc9d7;
    padding: 0.25rem 0.625rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1rem;
    transition: background-color 0.12s, border-color 0.12s, color 0.12s;
  }

  .viewer-param-btn:hover {
    background: #293749;
    border-color: #52647a;
    color: #edf3fa;
  }

  .viewer-param-btn.active-param {
    background: #17355c;
    border-color: #568bd2;
    color: #b9d8ff;
  }


  /* Toolbar variants (plain CSS: Tailwind browser 4.3.3 throws CssSyntaxError on the
     arbitrary variants md:[&_.toolbar-group]:... and max-md:[.header-open_&]:...) */
  @media (min-width: 768px) {
    #header-toolbar .toolbar-group {
      flex-shrink: 0;
      gap: 0.375rem;
      padding: 0.125rem;
    }
    #header-toolbar .toolbar-label {
      padding-left: 0.375rem;
      font-size: 0.65rem;
    }
  }
  @media (max-width: 767.98px) {
    #header-toolbar .toolbar-group {
      width: 100%;
      justify-content: space-between;
    }
    .header-open #header-toolbar-wrap {
      grid-template-rows: 1fr;
      box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    }
    .header-open #header-toolbar {
      overflow-y: auto;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
  }
  .header-open #header-chevron {
    rotate: 180deg;
  }
</style>
<script>
  const sid = "{{ sid }}"
  const sessionId = "{{ sid }}"
  let user_secret_key = "{{ user_secret_key }}"
  const isPrimaryOwner = {{ is_primary_owner | tojson }}

  function updateUserSecretKey(secretKey) {
    if (!secretKey) return
    user_secret_key = secretKey
    // The server checks the key this socket joined with against the room's current one
    // (it changes when a co-owner is removed), so join again with the new key.
    if (typeof socket !== 'undefined' && socket.connected) {
      socket.emit('join_session', { session_id: sessionId, secret_key: secretKey })
    }
    const input = document.getElementById('user-secret-key')
    if (input) {
      input.value = secretKey
      input.title = secretKey
    }
  }

  // ── Mic toggle ───────────────────────────────────────────────────────────

  const micLabel = document.getElementById('mic-label')
  const micBtn = document.getElementById('mic-toggle-btn')
  const micMobileBtn = document.getElementById('mic-mobile-btn')
  let recording = false

  function setMicState(state) {
    if (!micBtn) return
    // state: 'off' | 'on' | 'busy'
    micBtn.classList.remove('mic-on', 'mic-off', 'mic-busy')
    micBtn.classList.add('mic-' + state)
    micBtn.setAttribute('aria-pressed', state === 'on' ? 'true' : 'false')
    micBtn.disabled = (state === 'busy')

    if (micMobileBtn) {
      micMobileBtn.classList.remove('mic-on', 'mic-off', 'mic-busy')
      micMobileBtn.classList.add('mic-' + state)
      micMobileBtn.disabled = (state === 'busy')
      micMobileBtn.setAttribute('aria-pressed', state === 'on' ? 'true' : 'false')
    }

    if (state === 'on') {
      if (micLabel) micLabel.textContent = 'MIC ON'
      micBtn.title = 'Stop microphone'
    } else if (state === 'busy') {
      if (micLabel) micLabel.textContent = 'STOPPING…'
      micBtn.title = 'Please wait…'
    } else {
      if (micLabel) micLabel.textContent = 'MIC OFF'
      micBtn.title = 'Start microphone'
    }

    // Let the status indicator re-evaluate: a transcription-stopped alarm is only
    // meaningful while the mic is on. Defined in realtime.js, which loads after this.
    if (typeof onMicStateChange === 'function') onMicStateChange(state)
  }

  // The only two writers of `recording`. It lives here with setMicState(), while
  // startSession()/stopSession()/socket live in realtime.js, so every caller used to
  // hand-assemble the sequence from both files - and each one that forgot a step left
  // the state machine skewed: realtime.js's error handler dropped `recording`, so the
  // next click took the mic_off branch on an already-dead session and the operator had
  // to press twice to get back on air.

  async function startRecording() {
    setMicState('busy')
    if (!await startSession()) {
      // Denied mic permission or a dead socket. Claiming MIC ON here is the same skew
      // in the other direction: button on, nothing streaming.
      await stopRecording()
      return false
    }
    socket.emit('mic_on', { session_id: sessionId, secret_key: user_secret_key })
    recording = true
    setMicState('on')
    return true
  }

  async function stopRecording() {
    setMicState('busy')
    // The server drops its Scribe manager on mic_off; skipping it leaves one spinning
    // until the idle watchdog notices.
    if (typeof socket !== 'undefined' && socket.connected) {
      socket.emit('mic_off', { session_id: sessionId })
    }
    await stopSession()
    recording = false
    setMicState('off')
  }

  // Send heartbeat every 10 seconds to maintain admin lock.
  // The response also carries audio-usage stats so we avoid a separate poll.
  //
  // This is the lock's only lifecycle signal - the panel deliberately does not release
  // it on unload. beforeunload cannot tell a refresh from a true navigation-away (the
  // performance navigation entry describes how THIS document was *loaded*, not where it
  // is going), and the release beacon that tried raced the reload's own GET /panel: when
  // the GET won, the fresh page had already been rendered with the secret_key the beacon
  // then nulled, so it came back "Unauthorized - microphone stopped" until a second
  // refresh minted a new key. Nothing waits on a prompt release - an abandoned lock is
  // reclaimed by the 30 s timeout on the next /panel load, and /panel hands the live key
  // to any owner/co-owner that loads it while the lock is still held.
  let heartbeatInterval = null
  if (user_secret_key) {
    heartbeatInterval = setInterval(async function () {
      try {
        const res = await fetch(`/heartbeat/${sid}`, {
          method: 'POST',
          credentials: 'same-origin'
        })
        if (res.ok) {
          const data = await res.json()
          if (typeof updateViewerCountDisplay === 'function') updateViewerCountDisplay(data.viewer_count)
          if (typeof updateAudioUsageDisplay === 'function') updateAudioUsageDisplay(data)
        }
      } catch (error) {
        console.error('Heartbeat failed:', error)
      }
    }, 10000)
  }

  // Poll for new server-side keywords every 5 seconds
  let keywordSyncInterval = setInterval(syncKeywords, 5000)

  // No beforeunload handler: with the release beacon gone it would only clear the
  // timers above, which the document tear-down does anyway - and registering one costs
  // bfcache eligibility, so a back-navigation would pay a full panel reload.

  // ── Scribe detect language select ────────────────────────────────────────
  // The two engines name the same language differently, so the option list follows
  // whichever one the session is using. Switching engine clears the saved code
  // server-side, so nothing carries a tag the new engine would reject.
  // ElevenLabs Scribe v2: ISO 639-1 (2-char) or ISO 639-3 (3-char).
  const ELEVENLABS_LANGUAGES = [
    { code: 'zho', label: 'Mandarin Chinese' },
    { code: 'yue', label: 'Cantonese' },
    { code: 'eng', label: 'English' },
    { code: 'jpn', label: 'Japanese' },
    { code: 'kor', label: 'Korean' },
    { code: 'spa', label: 'Spanish' },
    { code: 'fra', label: 'French' },
    { code: 'deu', label: 'German' },
    { code: 'por', label: 'Portuguese' },
    { code: 'ara', label: 'Arabic' },
    { code: 'tha', label: 'Thai' },
    { code: 'vie', label: 'Vietnamese' },
    { code: 'ind', label: 'Indonesian' },
    { code: 'rus', label: 'Russian' },
    { code: 'ita', label: 'Italian' },
    { code: 'tur', label: 'Turkish' },
    { code: 'pol', label: 'Polish' },
    { code: 'nld', label: 'Dutch' },
    { code: 'hin', label: 'Hindi' },
    { code: 'ben', label: 'Bengali' },
    { code: 'ukr', label: 'Ukrainian' },
    { code: 'swe', label: 'Swedish' },
    { code: 'nor', label: 'Norwegian' },
    { code: 'dan', label: 'Danish' },
    { code: 'fin', label: 'Finnish' },
    { code: 'ces', label: 'Czech' },
    { code: 'ron', label: 'Romanian' },
    { code: 'msa', label: 'Malay' },
    { code: 'fil', label: 'Filipino' },
    { code: 'ell', label: 'Greek' },
    { code: 'heb', label: 'Hebrew' },
    { code: 'fas', label: 'Persian' },
    { code: 'tam', label: 'Tamil' },
    { code: 'tel', label: 'Telugu' },
    { code: 'kan', label: 'Kannada' },
    { code: 'mal', label: 'Malayalam' },
    { code: 'guj', label: 'Gujarati' },
    { code: 'mar', label: 'Marathi' },
    { code: 'urd', label: 'Urdu' },
    { code: 'srp', label: 'Serbian' },
    { code: 'hrv', label: 'Croatian' },
    { code: 'bul', label: 'Bulgarian' },
    { code: 'slk', label: 'Slovak' },
    { code: 'hun', label: 'Hungarian' },
    { code: 'cat', label: 'Catalan' },
  ]

  // Gemini Live Transcribe: BCP-47 tags, region included. Tamil and Urdu are absent
  // from Gemini's supported list, so they have no entry here. cmn-Hant-TW is missing
  // from Google's published table too but the API accepts it, and it is what a
  // Taiwanese session wants — if it ever starts being rejected, cmn-Hans-CN is the
  // documented fallback and should_force_traditional covers both.
  const GEMINI_LANGUAGES = [
    { code: 'cmn-Hant-TW', label: 'Mandarin Chinese (Taiwan)' },
    { code: 'cmn-Hans-CN', label: 'Mandarin Chinese (China)' },
    { code: 'yue-Hant-HK', label: 'Cantonese' },
    { code: 'en-US', label: 'English (US)' },
    { code: 'en-GB', label: 'English (UK)' },
    { code: 'ja-JP', label: 'Japanese' },
    { code: 'ko-KR', label: 'Korean' },
    { code: 'es-419', label: 'Spanish (Latin America)' },
    { code: 'es-US', label: 'Spanish (US)' },
    { code: 'fr-FR', label: 'French' },
    { code: 'de-DE', label: 'German' },
    { code: 'pt-BR', label: 'Portuguese (Brazil)' },
    { code: 'pt-PT', label: 'Portuguese (Portugal)' },
    { code: 'ar-EG', label: 'Arabic' },
    { code: 'th-TH', label: 'Thai' },
    { code: 'vi-VN', label: 'Vietnamese' },
    { code: 'id-ID', label: 'Indonesian' },
    { code: 'ru-RU', label: 'Russian' },
    { code: 'it-IT', label: 'Italian' },
    { code: 'tr-TR', label: 'Turkish' },
    { code: 'pl-PL', label: 'Polish' },
    { code: 'nl-NL', label: 'Dutch' },
    { code: 'hi-IN', label: 'Hindi' },
    { code: 'bn-IN', label: 'Bengali' },
    { code: 'uk-UA', label: 'Ukrainian' },
    { code: 'sv-SE', label: 'Swedish' },
    { code: 'nb-NO', label: 'Norwegian' },
    { code: 'da-DK', label: 'Danish' },
    { code: 'fi-FI', label: 'Finnish' },
    { code: 'cs-CZ', label: 'Czech' },
    { code: 'ro-RO', label: 'Romanian' },
    { code: 'ms-MY', label: 'Malay' },
    { code: 'fil-PH', label: 'Filipino' },
    { code: 'el-GR', label: 'Greek' },
    { code: 'he-IL', label: 'Hebrew' },
    { code: 'fa-IR', label: 'Persian' },
    { code: 'te-IN', label: 'Telugu' },
    { code: 'kn-IN', label: 'Kannada' },
    { code: 'ml-IN', label: 'Malayalam' },
    { code: 'gu-IN', label: 'Gujarati' },
    { code: 'mr-IN', label: 'Marathi' },
    { code: 'sr-RS', label: 'Serbian' },
    { code: 'hr-HR', label: 'Croatian' },
    { code: 'bg-BG', label: 'Bulgarian' },
    { code: 'sk-SK', label: 'Slovak' },
    { code: 'hu-HU', label: 'Hungarian' },
    { code: 'ca-ES', label: 'Catalan' },
  ]

  const SCRIBE_LANGUAGES = { elevenlabs: ELEVENLABS_LANGUAGES, gemini: GEMINI_LANGUAGES }

  // Which engine the Detect Lang options currently describe. Set by loadSttProvider
  // before the language value is applied, so the option for a saved code always exists
  // by the time the select is assigned.
  let activeSttProvider = ''

  function renderScribeLanguageOptions(provider) {
    const sel = document.getElementById('scribe-lang-select')
    if (!sel || provider === activeSttProvider) return
    activeSttProvider = provider
    sel.replaceChildren(new Option('Auto Detect', ''))
    for (const { code, label } of SCRIBE_LANGUAGES[provider] || []) {
      sel.appendChild(new Option(label + ' (' + code + ')', code))
    }
  }

  const STT_PROVIDER_LABELS = { elevenlabs: 'ElevenLabs Scribe', gemini: 'Gemini Transcribe' }

  // Only engines whose API key the server holds are selectable. A session still set
  // to an engine without a key shows it as a disabled entry rather than pretending it
  // uses something else.
  function renderSttProviderOptions(sel, available, provider) {
    sel.replaceChildren(new Option('Server Default', ''))
    for (const p of available) sel.appendChild(new Option(STT_PROVIDER_LABELS[p] || p, p))
    if (provider && !available.includes(provider)) {
      const opt = new Option((STT_PROVIDER_LABELS[provider] || provider) + ' (no API key)', provider)
      opt.disabled = true
      sel.appendChild(opt)
    }
    sel.value = provider
  }

  async function loadSttProvider() {
    try {
      const res = await fetch(`/api/session/${sid}/stt-provider`, { credentials: 'same-origin' })
      if (!res.ok) return
      const data = await res.json()
      const sel = document.getElementById('stt-provider-select')
      const provider = data.provider || data.default
      if (sel) renderSttProviderOptions(sel, data.available || [], provider)
      renderScribeLanguageOptions(provider)
    } catch (e) {
      console.error('Failed to load STT provider:', e)
    }
  }

  async function loadScribeLanguage() {
    try {
      const res = await fetch(`/api/session/${sid}/scribe-language`, { credentials: 'same-origin' })
      if (res.ok) {
        const data = await res.json()
        const sel = document.getElementById('scribe-lang-select')
        if (sel) sel.value = data.language || ''
      }
    } catch (e) {
      console.error('Failed to load scribe language:', e)
    }
  }

  async function saveSessionField(endpoint, body, statusId) {
    const statusEl = document.getElementById(statusId)
    if (statusEl) statusEl.textContent = 'Saving'
    try {
      const res = await fetch(`/api/session/${sid}/${endpoint}`, {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body)
      })
      if (!statusEl) return
      // Surface the endpoint's own message (size caps etc.) when it sends one.
      const err = res.ok ? null : await res.json().catch(() => ({}))
      statusEl.textContent = res.ok ? 'Saved' : (err.detail || 'Error')
    } catch (e) {
      if (statusEl) statusEl.textContent = 'Error'
      console.error(`Failed to save ${endpoint}:`, e)
    }
  }

  function saveScribeLanguage(language) {
    return saveSessionField('scribe-language', { language }, 'settings-status')
  }

  // Always paired: the engine decides which Detect Lang options exist, so the language
  // has to be re-applied after the options are rebuilt.
  function loadEngineAndLanguage() {
    return loadSttProvider().then(loadScribeLanguage)
  }

  async function saveSttProvider(provider) {
    await saveSessionField('stt-provider', { provider }, 'settings-status')
    // The server drops the forced detect language on an engine change, so re-read both
    // rather than leaving the select showing a code the new engine never had.
    await loadEngineAndLanguage()
  }

  function saveTranslateTone(tone) {
    return saveSessionField('translate-tone', { tone }, 'settings-status')
  }

  const PRESET_TONES = ['formal', 'fluent', 'casual', 'literal']

  async function loadTranslateTone() {
    try {
      const res = await fetch(`/api/session/${sid}/translate-tone`, { credentials: 'same-origin' })
      if (res.ok) {
        const data = await res.json()
        const tone = data.tone || 'fluent'
        const sel = document.getElementById('tone-select')
        const customInput = document.getElementById('tone-custom-input')
        if (!sel) return
        if (PRESET_TONES.includes(tone)) {
          sel.value = tone
          customInput.classList.add('hidden')
        } else {
          sel.value = 'custom'
          customInput.value = tone
          customInput.classList.remove('hidden')
        }
      }
    } catch (e) {
      console.error('Failed to load translate tone:', e)
    }
  }

  // ── Language multi-select dropdown ───────────────────────────────────────
  const PRESET_LANGUAGES = [
    { code: 'en-US', label: 'English (US)' },
    { code: 'zh-Hant-TW', label: 'Chinese Traditional (Taiwan)' },
    { code: 'zh-Hans-CN', label: 'Chinese Simplified (China)' },
    { code: 'ja-JP', label: 'Japanese' },
    { code: 'ko-KR', label: 'Korean' },
    { code: 'pt-BR', label: 'Portuguese (Brazil)' },
    { code: 'es-ES', label: 'Spanish' },
    { code: 'fr-FR', label: 'French' },
    { code: 'de-DE', label: 'German' },
    { code: 'ar-SA', label: 'Arabic' },
    { code: 'th-TH', label: 'Thai' },
    { code: 'vi-VN', label: 'Vietnamese' },
    { code: 'id-ID', label: 'Indonesian' },
  ]

  let selectedLanguages = []
  // Owner's per-session language cap set by an admin (0 = unlimited). The
  // server enforces it too; the panel mirrors it so the user sees why a box
  // is greyed out instead of a failed save.
  let maxLanguages = 0

  function atLanguageLimit() {
    return maxLanguages > 0 && selectedLanguages.length >= maxLanguages
  }

  function updateDropdownLabel() {
    const label = document.getElementById('lang-dropdown-label')
    label.textContent = selectedLanguages.length ? selectedLanguages.join(', ') : 'None'
    const btn = document.getElementById('lang-dropdown-btn')
    btn.title = maxLanguages ? `${selectedLanguages.length}/${maxLanguages} languages (limit set by admin)` : ''
  }

  function renderLanguageLimitHint() {
    const hint = document.getElementById('lang-limit-hint')
    const addInput = document.getElementById('lang-custom-input')
    const addBtn = document.getElementById('lang-custom-add-btn')
    const full = atLanguageLimit()
    hint.classList.toggle('hidden', !maxLanguages)
    hint.classList.toggle('text-amber-300', full)
    hint.classList.toggle('text-[#aebed2]', !full)
    hint.textContent = maxLanguages
      ? `This account can translate into up to ${maxLanguages} language${maxLanguages === 1 ? '' : 's'} per session ` +
        `(${selectedLanguages.length}/${maxLanguages} selected).` +
        (full ? ' Uncheck one to pick another.' : '')
      : ''
    addInput.disabled = full
    addBtn.disabled = full
    addInput.placeholder = full ? 'Language limit reached' : 'Custom (e.g. ja-JP)'
  }

  function renderCheckboxList() {
    const list = document.getElementById('lang-checkbox-list')
    // Collect all codes: presets + any selected custom ones not in presets
    const presetCodes = PRESET_LANGUAGES.map(l => l.code)
    const customCodes = selectedLanguages.filter(c => !presetCodes.includes(c))
    const allEntries = [
      ...PRESET_LANGUAGES,
      ...customCodes.map(c => ({ code: c, label: c }))
    ]

    list.innerHTML = ''
    allEntries.forEach(({ code, label }) => {
      const checked = selectedLanguages.includes(code)
      const row = document.createElement('label')
      row.className = 'flex items-center gap-2 px-2 py-1 rounded select-none text-sm text-gray-300'
      row.innerHTML = `
        <input type="checkbox" value="${code}" ${checked ? 'checked' : ''}
          class="accent-blue-500 w-4 h-4 flex-shrink-0">
        <span class="truncate"><span class="font-mono text-xs text-gray-400">${code}</span> <span class="text-gray-400">${label !== code ? '- ' + label : ''}</span></span>
      `
      row.querySelector('input').addEventListener('change', function () {
        if (this.checked) {
          if (atLanguageLimit()) {
            this.checked = false
            return
          }
          if (!selectedLanguages.includes(code)) selectedLanguages.push(code)
        } else {
          selectedLanguages = selectedLanguages.filter(c => c !== code)
        }
        updateDropdownLabel()
        applyLanguageLimit()
        onLanguagesChanged()
        debouncedSaveLanguages()
      })
      list.appendChild(row)
    })
    applyLanguageLimit()
  }

  // Grey out unchecked rows once the limit is reached; updated in place so
  // toggling a box doesn't rebuild the list (and reset its scroll).
  function applyLanguageLimit() {
    const full = atLanguageLimit()
    const title = full ? `Limit of ${maxLanguages} language${maxLanguages === 1 ? '' : 's'} reached` : ''
    document.querySelectorAll('#lang-checkbox-list label').forEach(row => {
      const input = row.querySelector('input')
      const locked = full && !input.checked
      input.disabled = locked
      row.title = locked ? title : ''
      row.classList.toggle('cursor-not-allowed', locked)
      row.classList.toggle('opacity-50', locked)
      row.classList.toggle('cursor-pointer', !locked)
      row.classList.toggle('hover:bg-gray-700', !locked)
    })
    renderLanguageLimitHint()
  }

  function renderLanguages() {
    updateDropdownLabel()
    renderCheckboxList()
    onLanguagesChanged()
  }

  async function fetchLanguages() {
    const res = await fetch(`/api/session/${sid}/languages`, { credentials: 'same-origin' })
    if (!res.ok) return null
    const data = await res.json()
    maxLanguages = data.max_languages || 0
    return data
  }

  async function loadLanguages() {
    try {
      const data = await fetchLanguages()
      if (data) {
        selectedLanguages = data.languages
        renderLanguages()
      }
    } catch (e) {
      console.error('Failed to load languages:', e)
    }
  }

  // An admin changed the owner's limit. Unlike a regular languages sync this
  // must land even while the modal is open or an edit is pending: the server
  // already serves the capped list, so a stale panel would only produce
  // rejected saves. A pending local edit is capped the same way the server
  // caps the stored list (first N kept) rather than discarded.
  async function loadLanguageLimit() {
    try {
      const data = await fetchLanguages()
      if (!data) return
      if (langSaveInFlight || langSaveTimer) {
        if (maxLanguages && selectedLanguages.length > maxLanguages) {
          selectedLanguages = selectedLanguages.slice(0, maxLanguages)
        }
      } else {
        selectedLanguages = data.languages
      }
      renderLanguages()
    } catch (e) {
      console.error('Failed to load language limit:', e)
    }
  }

  // Auto-save pattern: debounce collapses rapid toggles into one POST; the
  // in-flight + dirty-flag pair guarantees the final client state lands on
  // the server in order, even if a save outlasts the debounce window.
  const SAVE_DEBOUNCE_MS = 1000
  let langSaveTimer = null
  let langSaveInFlight = false
  let langSaveDirty = false

  function debouncedSaveLanguages() {
    document.getElementById('settings-status').textContent = 'Saving...'
    clearTimeout(langSaveTimer)
    langSaveTimer = setTimeout(saveLanguages, SAVE_DEBOUNCE_MS)
  }

  async function saveLanguages() {
    // Clear the debounce handle so SETTINGS_KINDS sees no pending edit once
    // this save settles (it is also called directly, bypassing the timer).
    clearTimeout(langSaveTimer)
    langSaveTimer = null
    if (langSaveInFlight) {
      langSaveDirty = true
      return
    }
    const statusEl = document.getElementById('settings-status')
    if (!selectedLanguages.length) {
      statusEl.textContent = 'Saving'
      langSaveDirty = false
      return
    }
    langSaveInFlight = true
    langSaveDirty = false
    statusEl.textContent = 'Saving'
    const snapshot = selectedLanguages.slice()
    try {
      const res = await fetch(`/api/session/${sid}/languages`, {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ languages: snapshot })
      })
      if (res.ok) {
        statusEl.textContent = 'Saved'
      } else {
        const err = await res.json().catch(() => ({}))
        statusEl.textContent = err.detail || 'Error'
        // Rejected (e.g. over the account's language limit after an admin
        // lowered it): re-read the server's list and limit so the panel
        // doesn't keep showing a selection that was never saved — unless the
        // user edited again meanwhile; that newer save will go out instead.
        if (res.status === 400 && !langSaveTimer && !langSaveDirty) await loadLanguages()
      }
    } catch (e) {
      statusEl.textContent = 'Error'
      console.error('Failed to save languages:', e)
    } finally {
      langSaveInFlight = false
      if (langSaveDirty) saveLanguages()
    }
  }

  // ── Keywords panel ────────────────────────────────────────────────────────
  let currentKeywords = []
  let lockedKeywords = new Set()  // keywords that survive auto-rerank/removal
  let keywordSavePending = false  // true while debouncing or saving; blocks sync
  let keywordSaveTimer = null     // debounce timer for saveKeywords
  let keywordGenerating = false

  function updateKeywordLabel() {
    const label = document.getElementById('kw-dropdown-label')
    const total = currentKeywords.length
    const locked = lockedKeywords.size
    if (!total) {
      label.textContent = 'None'
    } else if (locked) {
      label.textContent = total + ' keyword' + (total === 1 ? '' : 's') + ' (' + locked + ' pinned)'
    } else {
      label.textContent = total + ' keyword' + (total === 1 ? '' : 's')
    }
  }

  function escapeHtml(str) {
    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
  }

  function renderKeywordList() {
    const list = document.getElementById('kw-list')
    list.innerHTML = ''
    if (!currentKeywords.length) {
      const empty = document.createElement('div')
      empty.className = 'text-xs text-gray-500 px-2 py-1'
      empty.textContent = 'No keywords set.'
      list.appendChild(empty)
      return
    }
    const knownSpellings = new Set(glossary.flatMap(e => Object.values(e)))
    currentKeywords.forEach(function (kw) {
      const isLocked = lockedKeywords.has(kw)
      const row = document.createElement('div')
      row.className = 'flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-700 text-sm text-gray-300 group'
      const busy = glossaryGenerating === kw
      const look = glossaryButtonLook(kw, knownSpellings)
      row.innerHTML = `
        <span class="flex-1 font-mono text-xs truncate ${isLocked ? 'text-yellow-300' : 'text-gray-300'}">${escapeHtml(kw)}</span>
        <button class="kw-glossary-btn inline-flex flex-shrink-0 items-center transition-colors ${look.cls}" title="${look.title}" ${glossaryGenerating || !selectedLanguages.length ? 'disabled' : ''}>
          <iconify-icon icon="${busy ? 'ph:spinner-gap' : 'ph:translate'}" width="14" height="14" class="${busy ? 'animate-spin' : ''}"></iconify-icon>
        </button>
        <button class="kw-lock-btn flex-shrink-0 transition-colors ${isLocked ? 'text-yellow-400 hover:text-yellow-200' : 'text-gray-600 hover:text-yellow-400'}" title="${isLocked ? 'Unpin keyword' : 'Pin keyword (preserve from auto-removal)'}" data-kw="${escapeHtml(kw)}">
          <iconify-icon icon="${isLocked ? 'ph:push-pin-fill' : 'ph:push-pin'}" width="14" height="14"></iconify-icon>
        </button>
        <button class="kw-remove-btn text-gray-600 hover:text-red-400 transition-colors flex-shrink-0" title="Remove keyword" data-kw="${escapeHtml(kw)}">
          <iconify-icon icon="ph:x" width="14" height="14"></iconify-icon>
        </button>
      `
      row.querySelector('.kw-glossary-btn').addEventListener('click', function () {
        generateGlossaryEntry(kw)
      })
      row.querySelector('.kw-lock-btn').addEventListener('click', function () {
        if (lockedKeywords.has(kw)) {
          lockedKeywords.delete(kw)
        } else {
          lockedKeywords.add(kw)
        }
        updateKeywordLabel()
        renderKeywordList()
        debouncedSaveKeywords()
      })
      row.querySelector('.kw-remove-btn').addEventListener('click', function () {
        currentKeywords = currentKeywords.filter(function (k) { return k !== kw })
        lockedKeywords.delete(kw)
        updateKeywordLabel()
        renderKeywordList()
        debouncedSaveKeywords()
      })
      list.appendChild(row)
    })
  }

  // Keyword being looked up right now. Held outside the DOM because
  // syncKeywords repaints the whole list every 5s, which would wipe a spinner.
  let glossaryGenerating = ''

  function showGlossaryStatus(message) {
    const status = document.getElementById('kw-lookup-status')
    status.classList.remove('hidden')
    status.textContent = message
  }

  // Look of a keyword row's "look this term up" button. `known` is the set of
  // every spelling in the glossary, built once per repaint by the caller rather
  // than rescanned per row.
  function glossaryButtonLook(kw, known) {
    if (glossaryGenerating === kw) return { cls: 'text-blue-400', title: 'Looking the term up…' }
    if (glossaryGenerating) return { cls: 'text-gray-700', title: 'Wait for the current lookup to finish' }
    if (!selectedLanguages.length) return { cls: 'text-gray-700', title: 'Set target languages first' }
    if (known.has(kw)) return { cls: 'text-blue-400 hover:text-blue-200', title: 'Already in the glossary - look it up again' }
    return { cls: 'text-gray-600 hover:text-blue-400', title: 'Look this term up and add it to the glossary' }
  }

  // Ask the server to find this term's spelling in each target language, then
  // merge it in the same way an imported file would be.
  async function generateGlossaryEntry(kw) {
    if (glossaryGenerating || !selectedLanguages.length) return
    const statusEl = document.getElementById('settings-status')
    if (glossary.length >= GLOSSARY_MAX) {
      const message = `Glossary is full (max ${GLOSSARY_MAX} terms)`
      statusEl.textContent = message
      showGlossaryStatus(message)
      return
    }
    glossaryGenerating = kw
    showGlossaryStatus(`Searching the web for \u201c${kw}\u201d\u2026 You can close this window while it runs.`)
    renderKeywordList()
    statusEl.textContent = `Searching for "${kw}"`
    let resultMessage = ''
    try {
      const res = await fetch(`/api/session/${sid}/glossary/generate`, {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ term: kw })
      })
      const data = await res.json()
      if (!res.ok) {
        resultMessage = data.detail || 'Glossary lookup failed'
        statusEl.textContent = resultMessage
        return
      }
      const count = Object.keys(data.entry).length
      glossary = mergeGlossary(glossary, [data.entry])
      updateDictLabel()
      renderGlossaryList()
      // After the save, so its own 'Saved' doesn't overwrite the summary.
      await saveGlossary()
      resultMessage = `Added "${kw}" in ${count} language${count === 1 ? '' : 's'}`
      statusEl.textContent = resultMessage
    } catch (e) {
      resultMessage = 'Glossary lookup failed. Check the connection and try again.'
      statusEl.textContent = resultMessage
      console.error('Failed to generate glossary entry:', e)
    } finally {
      glossaryGenerating = ''
      showGlossaryStatus(resultMessage)
      renderKeywordList()
    }
  }

  async function loadKeywords() {
    try {
      const res = await fetch(`/api/session/${sid}/keywords`, { credentials: 'same-origin' })
      if (res.ok) {
        const data = await res.json()
        currentKeywords = data.keywords
        lockedKeywords = new Set(data.locked_keywords || [])
        updateKeywordLabel()
        renderKeywordList()
      }
    } catch (e) {
      console.error('Failed to load keywords:', e)
    }
  }

  // Merge server keywords into the local list without overwriting user edits.
  // New keywords added server-side (by auto-extraction) are appended locally.
  // Keywords removed server-side (e.g. evicted due to low score) are dropped
  // locally unless they are pinned.
  // Skipped while a save is in flight to avoid a race where the server still
  // holds a pre-deletion snapshot and re-adds a keyword the user just removed.
  async function syncKeywords() {
    if (keywordSavePending || keywordGenerating) return
    try {
      const res = await fetch(`/api/session/${sid}/keywords`, { credentials: 'same-origin' })
      if (!res.ok) return
      const data = await res.json()
      const serverKeywords = data.keywords
      const serverSet = new Set(serverKeywords)
      const currentSet = new Set(currentKeywords)
      let changed = false
      // Add new server-side keywords
      for (const kw of serverKeywords) {
        if (!currentSet.has(kw)) {
          currentKeywords.push(kw)
          changed = true
        }
      }
      // Remove keywords that the server dropped and are not pinned
      const filtered = currentKeywords.filter(kw => serverSet.has(kw) || lockedKeywords.has(kw))
      if (filtered.length !== currentKeywords.length) changed = true
      currentKeywords = filtered
      if (changed) {
        updateKeywordLabel()
        renderKeywordList()
      }
    } catch (e) {
      // Silently ignore sync errors to avoid spamming console during normal operation
    }
  }

  function debouncedSaveKeywords() {
    const statusEl = document.getElementById('settings-status')
    statusEl.textContent = 'Saving...'
    keywordSavePending = true
    clearTimeout(keywordSaveTimer)
    keywordSaveTimer = setTimeout(saveKeywords, SAVE_DEBOUNCE_MS)
  }

  async function saveKeywords() {
    const statusEl = document.getElementById('settings-status')
    statusEl.textContent = 'Saving'
    keywordSavePending = true
    let saved = false
    try {
      const res = await fetch(`/api/session/${sid}/keywords`, {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ keywords: currentKeywords, locked_keywords: Array.from(lockedKeywords) })
      })
      if (res.ok) {
        saved = true
        statusEl.textContent = 'Saved'
      } else {
        const err = await res.json()
        statusEl.textContent = err.detail || 'Error'
      }
    } catch (e) {
      statusEl.textContent = 'Error'
      console.error('Failed to save keywords:', e)
    } finally {
      keywordSavePending = false
      keywordSaveQueued = false
    }
    return saved
  }

  async function generateKeywordsFromText() {
    if (keywordGenerating) return

    const input = document.getElementById('kw-generate-text')
    const button = document.getElementById('kw-generate-btn')
    const icon = document.getElementById('kw-generate-icon')
    const status = document.getElementById('kw-generate-status')
    const statusEl = document.getElementById('settings-status')
    const text = input.value.trim()
    if (!text) {
      status.classList.remove('hidden')
      status.textContent = 'Paste some reference text first.'
      input.focus()
      return
    }

    keywordGenerating = true
    input.disabled = true
    button.disabled = true
    icon.setAttribute('icon', 'ph:spinner-gap')
    icon.classList.add('animate-spin')
    status.classList.remove('hidden')
    status.textContent = 'Finding names, jargon, and key phrases…'
    statusEl.textContent = 'Generating keywords'

    try {
      const res = await fetch(`/api/session/${sid}/keywords/generate`, {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text })
      })
      const data = await res.json()
      if (!res.ok) {
        status.textContent = data.detail || 'Keyword generation failed'
        statusEl.textContent = data.detail || 'Error'
        return
      }

      const generated = Array.isArray(data.keywords) ? data.keywords : []
      if (!generated.length) {
        status.textContent = 'No keywords found in this text.'
        statusEl.textContent = 'No keywords found'
        return
      }
      let added = 0
      let pinned = 0
      for (const kw of generated) {
        if (!currentKeywords.includes(kw)) {
          currentKeywords.push(kw)
          added++
        }
        if (!lockedKeywords.has(kw)) {
          lockedKeywords.add(kw)
          pinned++
        }
      }

      updateKeywordLabel()
      renderKeywordList()
      if (added || pinned) {
        const saved = await saveKeywords()
        if (!saved) {
          status.textContent = 'Keywords were generated but could not be saved.'
          return
        }
      }

      input.value = ''
      if (added) {
        status.textContent = `Added and pinned ${added} keyword${added === 1 ? '' : 's'}.`
        statusEl.textContent = 'Keywords added'
      } else if (pinned) {
        status.textContent = `Pinned ${pinned} existing keyword${pinned === 1 ? '' : 's'}.`
        statusEl.textContent = 'Keywords pinned'
      } else {
        status.textContent = 'These keywords are already in the list.'
        statusEl.textContent = 'No new keywords'
      }
    } catch (e) {
      status.textContent = 'Keyword generation failed. Check the connection and try again.'
      statusEl.textContent = 'Error'
      console.error('Failed to generate keywords:', e)
    } finally {
      keywordGenerating = false
      input.disabled = false
      button.disabled = false
      icon.setAttribute('icon', 'ph:sparkle')
      icon.classList.remove('animate-spin')
    }
  }

  // ── Glossary panel ───────────────────────────────────────────────────────
  // [{ "en-US": "example", "zh-Hant-TW": "範例", ... }] - one term per entry,
  // spelled out per language. The server swaps the other spellings for the
  // target language's one before translating.
  let glossary = []
  let glossarySaveTimer = null
  const GLOSSARY_MAX = 200
  // Index of the row being edited in place (-1 = none). Only one at a time; the
  // edit row itself holds the pending values, in its inputs.
  let glossaryEditIndex = -1

  function updateDictLabel() {
    const label = document.getElementById('td-dropdown-label')
    const terms = glossary.length
    const rules = textDictionary.length
    if (!terms && !rules) {
      label.textContent = 'None'
      return
    }
    const parts = []
    if (terms) parts.push(terms + ' term' + (terms === 1 ? '' : 's'))
    if (rules) parts.push(rules + ' rule' + (rules === 1 ? '' : 's'))
    label.textContent = parts.join(', ')
  }

  function renderGlossaryList() {
    const list = document.getElementById('gl-list')
    list.innerHTML = ''
    document.getElementById('gl-export-btn').textContent = glossary.length ? 'Export' : 'Export example'
    // Which terms are in the glossary decides how the keyword rows' lookup
    // buttons look, so the two lists always repaint together.
    renderKeywordList()
    if (!glossary.length) {
      const empty = document.createElement('div')
      empty.className = 'text-xs text-gray-500 px-2 py-1'
      empty.textContent = 'No glossary terms yet.'
      list.appendChild(empty)
      return
    }
    // A code that isn't a target language of this session can never be swapped
    // in, so it is dimmed; an entry with no target language at all is inert and
    // says so, instead of silently doing nothing (usually a code typo, e.g.
    // zh-TW where the session uses zh-Hant-TW).
    const targets = new Set(selectedLanguages)
    glossary.forEach(function (entry, idx) {
      if (idx === glossaryEditIndex) {
        list.appendChild(buildGlossaryEditRow(idx))
        return
      }
      const row = document.createElement('div')
      row.className = 'flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-700 text-sm text-gray-300'
      const inactive = !Object.keys(entry).some(lang => targets.has(lang))
      const chips = Object.entries(entry).map(function ([lang, term]) {
        const on = targets.has(lang)
        return `
        <span class="flex items-center gap-1 flex-shrink-0" ${on ? '' : 'title="Not a target language of this session"'}>
          <span class="text-[10px] px-1 py-0.5 rounded bg-gray-700 ${on ? 'text-gray-400' : 'text-gray-600'}">${escapeHtml(lang)}</span>
          <span class="font-mono text-xs ${on ? 'text-blue-300' : 'text-gray-600'}">${escapeHtml(term)}</span>
        </span>`
      }).join('')
      const warning = inactive ? `
        <span class="text-[10px] px-1 py-0.5 rounded bg-amber-900 text-amber-300 flex-shrink-0"
          title="None of these language codes is a target language, so this term is never used">unused</span>` : ''
      row.innerHTML = `
        <div class="flex-1 flex flex-wrap gap-x-2 gap-y-1 min-w-0">${chips}</div>
        ${warning}
        <button class="gl-edit-btn text-gray-600 hover:text-blue-400 transition-colors flex-shrink-0" title="Edit term">
          <iconify-icon icon="ph:pencil-simple" width="14" height="14"></iconify-icon>
        </button>
        <button class="gl-remove-btn text-gray-600 hover:text-red-400 transition-colors flex-shrink-0" title="Remove term">
          <iconify-icon icon="ph:x" width="14" height="14"></iconify-icon>
        </button>
      `
      row.querySelector('.gl-edit-btn').addEventListener('click', function () {
        glossaryEditIndex = idx
        renderGlossaryList()
      })
      row.querySelector('.gl-remove-btn').addEventListener('click', function () {
        glossary.splice(idx, 1)
        updateDictLabel()
        renderGlossaryList()
        debouncedSaveGlossary()
      })
      list.appendChild(row)
    })
  }

  // The in-place editor for one term: a spelling input per language, a row to
  // add another language, and save/cancel. AI lookups and imports both land
  // guesses in the glossary, so a wrong rendering has to be fixable without
  // deleting the term and re-importing a hand-written file.
  function buildGlossaryEditRow(idx) {
    const row = document.createElement('div')
    row.className = 'flex flex-col gap-1 px-2 py-2 rounded bg-gray-800 border border-gray-600'
    const listId = `gl-lang-options-${idx}`
    row.innerHTML = `
      <div class="gl-edit-fields flex flex-col gap-1"></div>
      <div class="flex items-center gap-1">
        <input class="gl-new-lang panel-input flex-none w-24 font-mono" placeholder="Code" list="${listId}">
        <datalist id="${listId}">${selectedLanguages.map(c => `<option value="${escapeHtml(c)}"></option>`).join('')}</datalist>
        <input class="gl-new-term panel-input font-mono" placeholder="Spelling">
        <button class="gl-lang-add-btn panel-add-btn">Add</button>
      </div>
      <div class="flex justify-end gap-1">
        <button class="gl-cancel-btn panel-add-btn">Cancel</button>
        <button class="gl-save-btn panel-add-btn">Save</button>
      </div>
    `
    // The fields are the edit state - no separate draft object to keep in step
    // with what the user has typed. Adding and removing a language touches only
    // this container, so the rest of the list (and the focused input) stays put.
    const fields = row.querySelector('.gl-edit-fields')

    function addField(lang, term) {
      const field = document.createElement('div')
      field.className = 'flex items-center gap-1'
      field.innerHTML = `
        <span class="text-[10px] px-1 py-0.5 rounded bg-gray-700 text-gray-400 w-24 flex-shrink-0 truncate" title="${escapeHtml(langLabel(lang))}">${escapeHtml(lang)}</span>
        <input class="gl-edit-input panel-input font-mono" data-lang="${escapeHtml(lang)}" value="${escapeHtml(term)}">
        <button class="gl-lang-remove-btn text-gray-600 hover:text-red-400 transition-colors flex-shrink-0" title="Remove this language">
          <iconify-icon icon="ph:x" width="14" height="14"></iconify-icon>
        </button>
      `
      field.querySelector('.gl-lang-remove-btn').addEventListener('click', () => field.remove())
      fields.appendChild(field)
    }

    Object.entries(glossary[idx]).forEach(([lang, term]) => addField(lang, term))

    row.querySelector('.gl-lang-add-btn').addEventListener('click', function () {
      const langInput = row.querySelector('.gl-new-lang')
      const termInput = row.querySelector('.gl-new-term')
      const lang = langInput.value.trim()
      const term = termInput.value.trim()
      if (!lang || !term) return
      addField(lang, term)
      langInput.value = ''
      termInput.value = ''
      langInput.focus()
    })
    row.querySelector('.gl-cancel-btn').addEventListener('click', function () {
      glossaryEditIndex = -1
      renderGlossaryList()
    })
    row.querySelector('.gl-save-btn').addEventListener('click', function () {
      const edited = {}
      row.querySelectorAll('.gl-edit-input').forEach(function (input) {
        const term = input.value.trim()
        if (term) edited[input.dataset.lang] = term
      })
      // The server drops a one-spelling entry outright, so say so here rather
      // than let the term vanish on the next reload.
      if (Object.keys(edited).length < 2) {
        document.getElementById('settings-status').textContent = 'A term needs at least two spellings'
        return
      }
      glossary[idx] = edited
      glossaryEditIndex = -1
      updateDictLabel()
      renderGlossaryList()
      debouncedSaveGlossary()
    })
    return row
  }

  async function loadGlossary() {
    try {
      const res = await fetch(`/api/session/${sid}/glossary`, { credentials: 'same-origin' })
      if (res.ok) {
        const data = await res.json()
        glossary = Array.isArray(data.glossary) ? data.glossary : []
        // Row indices don't survive a reload, so an open editor can't either.
        // Syncing is suppressed while any modal is open, so this only fires
        // between edits, not under the user's fingers.
        glossaryEditIndex = -1
        updateDictLabel()
        renderGlossaryList()
      }
    } catch (e) {
      console.error('Failed to load glossary:', e)
    }
  }

  function debouncedSaveGlossary() {
    document.getElementById('settings-status').textContent = 'Saving'
    clearTimeout(glossarySaveTimer)
    glossarySaveTimer = setTimeout(saveGlossary, 600)
  }

  function saveGlossary() {
    return saveSessionField('glossary', { glossary }, 'settings-status')
  }

  // Parse an imported file into entries, or throw with a user-facing message.
  function parseGlossaryFile(raw) {
    let data
    try {
      data = JSON.parse(raw)
    } catch (e) {
      throw new Error('Invalid JSON')
    }
    if (!Array.isArray(data)) throw new Error('Expected a JSON array')
    const entries = []
    for (const item of data) {
      if (!item || typeof item !== 'object' || Array.isArray(item)) continue
      const entry = {}
      for (const [lang, term] of Object.entries(item)) {
        if (typeof term === 'string' && term.trim()) entry[lang] = term.trim()
      }
      // One spelling alone has nothing to replace; the server drops these too.
      if (Object.keys(entry).length >= 2) entries.push(entry)
    }
    if (!entries.length) throw new Error('No usable terms')
    return entries
  }

  // A starter file for an empty glossary, keyed by this session's own target
  // languages (plus en-US, the usual spoken one) so the codes are already the
  // ones that will match - a hand-written zh-TW instead of zh-Hant-TW is the
  // easiest way to end up with a term that never fires.
  function exampleGlossary() {
    const codes = [...new Set(['en-US', ...selectedLanguages])]
    return ['Lin Wei-ting', 'GT Live'].map(term => Object.fromEntries(
      codes.map(code => [code, code === 'en-US' ? term : `${term} in ${code}`])
    ))
  }

  function exportGlossary() {
    const filled = glossary.length > 0
    const blob = new Blob([JSON.stringify(filled ? glossary : exampleGlossary(), null, 2)],
      { type: 'application/json' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = filled ? `glossary-${sid}.json` : 'glossary-example.json'
    a.click()
    URL.revokeObjectURL(url)
  }

  // Merge imported entries into the current list. An imported entry replaces an
  // existing one outright when they share a spelling for the same language, so
  // re-importing a corrected file updates in place instead of duplicating.
  function mergeGlossary(existing, incoming) {
    const merged = existing.slice()
    for (const entry of incoming) {
      const idx = merged.findIndex(e => Object.entries(entry).some(([lang, term]) => e[lang] === term))
      if (idx >= 0) merged[idx] = entry
      else merged.push(entry)
    }
    return merged
  }

  // ── Text mapping panel ───────────────────────────────────────────────────
  let textDictionary = []  // [{ from, to, target }] - target is 'flow' or a language code
  let textDictSaveTimer = null
  // Re-run the flow dictionary over on-screen flow lines. Assigned by the flow
  // panel IIFE; called whenever textDictionary changes so a rule added to fix a
  // mistake retro-fixes the committed lines already shown, not just future ones.
  let reapplyFlowDict = function () {}

  // Resolve a language code to a human label using the language presets.
  function langLabel(code) {
    const preset = PRESET_LANGUAGES.find(l => l.code === code)
    return preset ? preset.label : code
  }

  function targetLabel(target) {
    return (!target || target === 'flow') ? 'Flow' : langLabel(target)
  }

  // Dictionary targets and viewer URL options share the session's language set.
  // Call this wherever selectedLanguages changes.
  function onLanguagesChanged() {
    renderTargetOptions()
    renderGlossaryList()
    renderViewerShowOptions()
  }

  // Populate the add-row target <select> with Flow + the session's languages.
  function renderTargetOptions() {
    const sel = document.getElementById('td-target-select')
    if (!sel) return
    const prev = sel.value
    const opts = ['<option value="flow">Flow (source)</option>']
      .concat(selectedLanguages.map(c => `<option value="${escapeHtml(c)}">${escapeHtml(langLabel(c))}</option>`))
    sel.innerHTML = opts.join('')
    if (prev && Array.from(sel.options).some(o => o.value === prev)) sel.value = prev
  }

  function renderTextDictList() {
    renderTargetOptions()
    const list = document.getElementById('td-list')
    list.innerHTML = ''
    if (!textDictionary.length) {
      const empty = document.createElement('div')
      empty.className = 'text-xs text-gray-500 px-2 py-1'
      empty.textContent = 'No text mappings set.'
      list.appendChild(empty)
      return
    }
    textDictionary.forEach(function (rule, idx) {
      const row = document.createElement('div')
      row.className = 'grid grid-cols-[1fr_auto_1fr_auto] items-center gap-1 px-2 py-1 rounded hover:bg-gray-700 text-sm text-gray-300'
      row.innerHTML = `
        <div class="flex gap-1 items-center">
          <span class="badge-target text-[10px] px-1 py-0.5 rounded bg-gray-700 text-gray-300 flex-shrink-0">${escapeHtml(targetLabel(rule.target))}</span>
          <span class="flex-1 font-mono text-xs truncate text-gray-300">${escapeHtml(rule.from)}</span>
        </div>
        <iconify-icon icon="ph:arrow-right" width="14" height="14" class="text-gray-500 flex-shrink-0"></iconify-icon>
        <span class="flex-1 font-mono text-xs truncate text-blue-300">${escapeHtml(rule.to)}</span>
        <button class="td-remove-btn text-gray-600 hover:text-red-400 transition-colors flex-shrink-0" title="Remove mapping">
          <iconify-icon icon="ph:x" width="14" height="14"></iconify-icon>
        </button>
      `
      row.querySelector('.td-remove-btn').addEventListener('click', function () {
        textDictionary.splice(idx, 1)
        updateDictLabel()
        renderTextDictList()
        reapplyFlowDict()
        debouncedSaveTextDict()
      })
      list.appendChild(row)
    })
  }

  async function loadTextDictionary() {
    try {
      const res = await fetch(`/api/session/${sid}/text-dictionary`, { credentials: 'same-origin' })
      if (res.ok) {
        const data = await res.json()
        textDictionary = Array.isArray(data.text_dictionary) ? data.text_dictionary : []
        updateDictLabel()
        renderTextDictList()
        reapplyFlowDict()
      }
    } catch (e) {
      console.error('Failed to load text dictionary:', e)
    }
  }

  function debouncedSaveTextDict() {
    document.getElementById('settings-status').textContent = 'Saving'
    clearTimeout(textDictSaveTimer)
    textDictSaveTimer = setTimeout(saveTextDictionary, 600)
  }

  function saveTextDictionary() {
    return saveSessionField('text-dictionary', { text_dictionary: textDictionary }, 'settings-status')
  }

  // ── Co-owners panel (primary owner only) ────────────────────────────────
  let coOwners = []

  function updateCoOwnersLabel() {
    const label = document.getElementById('co-dropdown-label')
    if (!label) return
    const total = coOwners.length
    label.textContent = !total ? 'None' : total + (total === 1 ? ' email' : ' emails')
  }

  function renderCoOwnersList() {
    const list = document.getElementById('co-list')
    if (!list) return
    list.innerHTML = ''
    if (!coOwners.length) {
      const empty = document.createElement('div')
      empty.className = 'text-xs text-gray-500 px-2 py-1'
      empty.textContent = 'No co-owners yet.'
      list.appendChild(empty)
      return
    }
    coOwners.forEach(function (e) {
      const row = document.createElement('div')
      row.className = 'flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-700 text-sm text-gray-300'
      row.innerHTML = `
        <span class="flex-1 font-mono text-xs truncate text-gray-300">${escapeHtml(e)}</span>
        <button class="co-remove-btn text-gray-600 hover:text-red-400 transition-colors flex-shrink-0" title="Remove co-owner" data-email="${escapeHtml(e)}">
          <iconify-icon icon="ph:x" width="14" height="14"></iconify-icon>
        </button>
      `
      row.querySelector('.co-remove-btn').addEventListener('click', function () {
        removeCoOwner(e)
      })
      list.appendChild(row)
    })
  }

  async function coOwnerMutation(label, fetchOpts) {
    const statusEl = document.getElementById('settings-status')
    if (statusEl) statusEl.textContent = 'Saving'
    try {
      const res = await fetch(fetchOpts.url, fetchOpts.init)
      if (res.ok) {
        const data = await res.json()
        coOwners = data.co_owners || []
        if (data.secret_key) updateUserSecretKey(data.secret_key)
        updateCoOwnersLabel()
        renderCoOwnersList()
        updateSettingsSyncForCoOwnerCount()
        if (statusEl) statusEl.textContent = 'Saved'
      } else {
        const err = await res.json().catch(() => ({}))
        if (statusEl) statusEl.textContent = err.detail || 'Error'
      }
    } catch (e) {
      if (statusEl) statusEl.textContent = 'Error'
      console.error(`Failed to ${label}:`, e)
    }
  }

  async function loadCoOwners() {
    if (!isPrimaryOwner) return
    try {
      const res = await fetch(`/api/session/${sid}/co-owners`, { credentials: 'same-origin' })
      if (!res.ok) return
      const data = await res.json()
      coOwners = data.co_owners || []
      updateCoOwnersLabel()
      renderCoOwnersList()
      updateSettingsSyncForCoOwnerCount()
    } catch (e) {
      console.error('Failed to load co-owners:', e)
    }
  }

  function addCoOwner(email) {
    return coOwnerMutation('add co-owner', {
      url: `/api/session/${sid}/co-owners`,
      init: {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      },
    })
  }

  function removeCoOwner(email) {
    return coOwnerMutation('remove co-owner', {
      url: `/api/session/${sid}/co-owners/${encodeURIComponent(email)}`,
      init: { method: 'DELETE', credentials: 'same-origin' },
    })
  }

  // ── Settings sync ────────────────────────────────────────────────────────
  // Two paths keep co-owners' panels in sync:
  //   • push (socket event)  → applySettingsUpdate(kind)   (~instant)
  //   • pull (5s polling)    → syncSettings()              (backstop)
  // `isInteracting()` blocks a reload while the user is mid-edit so their
  // pending input isn't clobbered. `polled: false` means the kind relies
  // on a dedicated sync path (keywords: syncKeywords reconciler; co-owners:
  // primary-only, refreshed by the socket event).
  function isAnySettingsDropdownOpen() {
    const ids = ['lang-dropdown-panel', 'kw-dropdown-panel', 'td-dropdown-panel', 'co-dropdown-panel']
    return ids.some(id => {
      const el = document.getElementById(id)
      return el && !el.classList.contains('hidden')
    })
  }

  const focused = id => {
    const el = document.getElementById(id)
    return !!el && document.activeElement === el
  }

  const SETTINGS_KINDS = {
    'languages':       { load: loadLanguages,      isInteracting: () => langSaveInFlight || !!langSaveTimer, polled: true },
    'keywords':        { load: loadKeywords,       isInteracting: () => keywordSavePending || keywordGenerating,     polled: false },
    'text-dictionary': { load: loadTextDictionary, isInteracting: () => !!textDictSaveTimer,                 polled: true },
    'glossary':        { load: loadGlossary,       isInteracting: () => !!glossarySaveTimer,                 polled: true },
    'stt-provider':    { load: loadEngineAndLanguage,
                                                   isInteracting: () => focused('stt-provider-select'),      polled: true },
    'scribe-language': { load: loadScribeLanguage, isInteracting: () => focused('scribe-lang-select'),       polled: true },
    'translate-tone':  { load: loadTranslateTone,  isInteracting: () => focused('tone-custom-input'),        polled: true },
    'co-owners':       { load: loadCoOwners,       isInteracting: () => false,                               polled: false },
    // Admin-set limit (never edited here): applied even with a modal open or an
    // edit pending. The poll backstop is 'languages', whose GET carries the limit.
    'language-limit':  { load: loadLanguageLimit,  isInteracting: () => false,                               polled: false, alwaysApply: true },
  }

  function applySettingsUpdate(kind) {
    const entry = SETTINGS_KINDS[kind]
    if (!entry) return
    if (!entry.alwaysApply && (isAnySettingsDropdownOpen() || entry.isInteracting())) return
    runWithSyncStatus(entry.load())
  }

  // Flash "Syncing" on the status label while a reload is in flight, then
  // settle to "Saved". Defers to in-progress save states ("Saving"/"Error")
  // so a local save isn't clobbered by a concurrent sync.
  async function runWithSyncStatus(loadPromise) {
    const statusEl = document.getElementById('settings-status')
    if (statusEl && !/^(Saving|Error)/.test(statusEl.textContent)) {
      statusEl.textContent = 'Syncing'
    }
    try {
      await loadPromise
    } finally {
      if (statusEl && statusEl.textContent === 'Syncing') {
        statusEl.textContent = 'Saved'
      }
    }
  }

  async function syncSettings() {
    if (isAnySettingsDropdownOpen()) return
    const tasks = []
    for (const entry of Object.values(SETTINGS_KINDS)) {
      if (!entry.polled || entry.isInteracting()) continue
      tasks.push(entry.load())
    }
    if (tasks.length) await runWithSyncStatus(Promise.allSettled(tasks))
  }

  let settingsSyncInterval = null

  function startSettingsSync() {
    if (settingsSyncInterval) return
    settingsSyncInterval = setInterval(syncSettings, 5000)
  }

  function stopSettingsSync() {
    if (!settingsSyncInterval) return
    clearInterval(settingsSyncInterval)
    settingsSyncInterval = null
  }

  function updateSettingsSyncForCoOwnerCount() {
    if (!isPrimaryOwner) return
    if (coOwners.length > 0) startSettingsSync()
    else stopSettingsSync()
  }

  // Co-owners always poll (the primary is their source of truth); the
  // primary's timer is started lazily once loadCoOwners() finds co-owners.
  if (!isPrimaryOwner) startSettingsSync()

  function renderViewerShowOptions() {
    const container = document.getElementById('viewer-show-options')
    const values = ['', ...selectedLanguages]
    if (selectedLanguages.length > 1) values.push(selectedLanguages.join(','))
    container.replaceChildren(...values.map(value => {
      const btn = document.createElement('button')
      btn.type = 'button'
      btn.className = 'viewer-param-btn'
      btn.dataset.viewerParam = 'show'
      btn.dataset.value = value
      btn.textContent = value || 'all'
      if (!value) btn.setAttribute('data-default', '')
      return btn
    }))
    refreshViewerUrlControls()
  }

  function getViewerUrl() {
    const frame = document.getElementById('viewer-frame')
    try {
      const liveUrl = frame.contentWindow?.location.href
      if (liveUrl && liveUrl !== 'about:blank') return new URL(liveUrl)
    } catch {
      // Fall back to the configured source if the preview is not same-origin.
    }
    return new URL(frame.src)
  }

  function refreshViewerUrlControls(url = getViewerUrl()) {
    document.getElementById('current-url-display').textContent = url.href
    document.querySelectorAll('[data-viewer-param]').forEach(btn => {
      const value = url.searchParams.get(btn.dataset.viewerParam)
      const active = value === btn.dataset.value ||
        (btn.hasAttribute('data-default') && (value === null ||
          (btn.dataset.viewerParam === 'show' && value === 'all')))
      btn.classList.toggle('active-param', active)
      btn.setAttribute('aria-pressed', active ? 'true' : 'false')
    })
  }

  function applyViewerUrlParam(btn) {
    const url = getViewerUrl()
    const param = btn.dataset.viewerParam
    const value = btn.dataset.value
    if ((param === 'theme' && value === 'light') || (param === 'show' && value === '')) {
      url.searchParams.delete(param)
    } else {
      url.searchParams.set(param, value)
    }
    document.getElementById('viewer-frame').src = url.href
    refreshViewerUrlControls(url)
  }

  async function copyText(text, fallbackElement = null) {
    try {
      await navigator.clipboard.writeText(text)
      return
    } catch {
      // Clipboard API requires a secure context; use a selected element as fallback.
    }
    const element = fallbackElement || document.createElement('textarea')
    if (!fallbackElement) {
      element.value = text
      element.style.position = 'fixed'
      element.style.opacity = '0'
      document.body.appendChild(element)
    }
    element.select()
    document.execCommand('copy')
    if (!fallbackElement) element.remove()
  }

  let viewerSharePath = {{ viewer_share_path | tojson }}
  let viewerKey = {{ viewer_key | tojson }}

  // The key is only ever written with textContent, never parsed as markup.
  function renderViewerShareUrl() {
    const viewerShareUrlEl = document.getElementById('viewer-share-url')
    viewerShareUrlEl.textContent = new URL(viewerSharePath, window.location.origin).href
  }

  async function copyViewerShareUrl() {
    await copyText(document.getElementById('viewer-share-url').textContent)
    const status = document.getElementById('viewer-share-status')
    status.textContent = 'Copied!'
    setTimeout(() => { status.textContent = '' }, 1800)
  }

  async function rotateViewerKey() {
    if (!confirm('Regenerate the viewer link? The old link stops working immediately and viewers using it are disconnected.')) return
    const btn = document.getElementById('rotate-viewer-key-btn')
    const status = document.getElementById('viewer-share-status')
    btn.disabled = true
    status.textContent = 'Regenerating...'
    try {
      const res = await fetch(`/api/session/${sid}/viewer-key/rotate`, {
        method: 'POST',
        credentials: 'same-origin'
      })
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        throw new Error(data.detail || `Request failed (${res.status})`)
      }
      const data = await res.json()
      viewerSharePath = data.share_path
      viewerKey = data.viewer_key
      renderViewerShareUrl()
      // Keep the preview on the new key so it does not drop to a 404.
      const frameUrl = getViewerUrl()
      frameUrl.searchParams.set('k', viewerKey)
      document.getElementById('viewer-frame').src = frameUrl.href
      status.textContent = 'New link ready'
    } catch (error) {
      status.textContent = 'Failed'
      console.error('Failed to regenerate viewer link:', error.message)
    } finally {
      btn.disabled = false
    }
  }

  async function copyViewerUrl() {
    await copyText(getViewerUrl().href)
    const feedback = document.getElementById('copy-feedback')
    feedback.classList.remove('hidden')
    setTimeout(() => feedback.classList.add('hidden'), 1800)
  }

  async function clearViewerScreens() {
    const btn = document.getElementById('viewer-clear-btn')
    const label = document.getElementById('viewer-clear-label')
    btn.disabled = true
    label.textContent = 'Clearing...'
    try {
      const res = await fetch(`/api/session/${sid}/viewers/clear`, {
        method: 'POST',
        credentials: 'same-origin'
      })
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        throw new Error(data.detail || `Request failed (${res.status})`)
      }
      label.textContent = 'Cleared'
    } catch (error) {
      label.textContent = 'Failed'
      console.error('Failed to clear viewer screens:', error)
    } finally {
      setTimeout(() => {
        label.textContent = 'Clear screens'
        btn.disabled = false
      }, 1500)
    }
  }

  // Wire a popup modal to a trigger button. Open via button click, then run the
  // optional onOpen callback; close via backdrop, close button, or Escape below.
  function setupModal(modal, btn, onOpen) {
    if (!modal || !btn) return
    btn.addEventListener('click', function (e) {
      e.stopPropagation()
      const willOpen = modal.classList.contains('hidden')
      modal.classList.toggle('hidden')
      if (willOpen) {
        if (onOpen) onOpen()
        const firstInput = modal.querySelector('input:not([type="hidden"])')
        if (firstInput) setTimeout(() => firstInput.focus(), 0)
      }
    })
    // mousedown, not click: a click's target is the common ancestor of press and
    // release, so a drag that starts on the panel and ends outside it reports the
    // overlay and would close the modal mid-edit.
    modal.addEventListener('mousedown', function (e) {
      if (e.target === modal) modal.classList.add('hidden')
    })
    const closeBtn = modal.querySelector('[data-modal-close]')
    if (closeBtn) closeBtn.addEventListener('click', () => modal.classList.add('hidden'))
  }

  document.addEventListener('keydown', function (e) {
    if (e.key !== 'Escape') return
    document.querySelectorAll('.modal-overlay:not(.hidden)').forEach(function (modal) {
      if (modal.dataset.modalPending !== 'true') modal.classList.add('hidden')
    })
  })

  document.addEventListener('DOMContentLoaded', function () {
    const infoModal = document.getElementById('info-modal')
    const infoBtn = document.getElementById('info-btn')
    setupModal(infoModal, infoBtn, refreshViewerUrlControls)
    infoModal.addEventListener('click', event => {
      const btn = event.target.closest('[data-viewer-param]')
      if (btn) applyViewerUrlParam(btn)
    })
    document.getElementById('copy-url-btn').addEventListener('click', copyViewerUrl)
    document.getElementById('viewer-clear-btn').addEventListener('click', clearViewerScreens)
    renderViewerShareUrl()
    document.getElementById('copy-share-btn').addEventListener('click', copyViewerShareUrl)
    document.getElementById('rotate-viewer-key-btn').addEventListener('click', rotateViewerKey)

    // Wire up the engine and detect language selects. The language options depend on
    // the engine, so loadSttProvider populates them and only then is the saved code
    // applied — hence the sequencing here rather than two independent loads.
    const sttProviderSelect = document.getElementById('stt-provider-select')
    if (sttProviderSelect) {
      sttProviderSelect.addEventListener('change', function () {
        saveSttProvider(this.value)
      })
    }
    const scribeLangSelect = document.getElementById('scribe-lang-select')
    if (scribeLangSelect) {
      scribeLangSelect.addEventListener('change', function () {
        saveScribeLanguage(this.value)
      })
      loadEngineAndLanguage()
    }

    loadTranslateTone()
    loadLanguages()
    loadKeywords()
    loadTextDictionary()
    loadGlossary()
    loadCoOwners()

    // Co-owners modal (primary owner only - element is absent for co-owners)
    const coDropdownBtn = document.getElementById('co-dropdown-btn')
    const coDropdownPanel = document.getElementById('co-dropdown-panel')
    if (coDropdownBtn && coDropdownPanel) {
      setupModal(coDropdownPanel, coDropdownBtn)
      const coAddBtn = document.getElementById('co-add-btn')
      const coEmailInput = document.getElementById('co-email-input')
      coAddBtn.addEventListener('click', function () {
        const value = (coEmailInput.value || '').trim()
        if (!value) return
        addCoOwner(value)
        coEmailInput.value = ''
      })
      coEmailInput.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') coAddBtn.click()
      })
    }

    const toneSelect = document.getElementById('tone-select')
    const toneCustomInput = document.getElementById('tone-custom-input')
    const toneStatusEl = document.getElementById('settings-status')
    let toneDebounce = null
    toneSelect.addEventListener('change', function () {
      if (this.value === 'custom') {
        toneCustomInput.classList.remove('hidden')
        toneCustomInput.focus()
      } else {
        toneCustomInput.classList.add('hidden')
        saveTranslateTone(this.value)
      }
    })
    toneCustomInput.addEventListener('input', function () {
      clearTimeout(toneDebounce)
      if (toneStatusEl) toneStatusEl.textContent = 'Saving'
      toneDebounce = setTimeout(() => saveTranslateTone(this.value.trim()), 800)
    })
    toneCustomInput.addEventListener('keydown', function (e) {
      if (e.key === 'Enter') {
        clearTimeout(toneDebounce)
        saveTranslateTone(this.value.trim())
      }
    })

    // Keywords + Dictionary modals
    setupModal(document.getElementById('kw-dropdown-panel'), document.getElementById('kw-dropdown-btn'))
    setupModal(document.getElementById('td-dropdown-panel'), document.getElementById('td-dropdown-btn'))

    // Import a glossary JSON file
    const glFileInput = document.getElementById('gl-file-input')
    document.getElementById('gl-import-btn').addEventListener('click', () => glFileInput.click())
    glFileInput.addEventListener('change', function () {
      const file = this.files && this.files[0]
      // Clear the input up front so re-picking the same file fires 'change' again.
      this.value = ''
      if (!file) return
      const statusEl = document.getElementById('settings-status')
      const reader = new FileReader()
      reader.onerror = function () { statusEl.textContent = 'Read failed' }
      reader.onload = function () {
        let entries
        try {
          entries = parseGlossaryFile(String(reader.result))
        } catch (e) {
          statusEl.textContent = e.message
          return
        }
        const merged = mergeGlossary(glossary, entries)
        if (merged.length > GLOSSARY_MAX) {
          statusEl.textContent = `Too many terms (max ${GLOSSARY_MAX})`
          return
        }
        glossary = merged
        updateDictLabel()
        renderGlossaryList()
        saveGlossary()
      }
      reader.readAsText(file)
    })

    document.getElementById('gl-export-btn').addEventListener('click', exportGlossary)

    document.getElementById('gl-clear-btn').addEventListener('click', function () {
      if (!glossary.length) return
      if (!confirm('Remove all glossary terms?')) return
      glossary = []
      updateDictLabel()
      renderGlossaryList()
      saveGlossary()
    })

    // Add custom text mapping
    document.getElementById('td-add-btn').addEventListener('click', function () {
      const fromInput = document.getElementById('td-from-input')
      const toInput = document.getElementById('td-to-input')
      const from = fromInput.value.trim()
      const to = toInput.value
      const target = document.getElementById('td-target-select').value || 'flow'
      if (!from) return
      // Same (from, target) replaces in place; otherwise append a new rule.
      const existing = textDictionary.find(r => r.from === from && (r.target || 'flow') === target)
      if (existing) existing.to = to
      else textDictionary.push({ from, to, target })
      updateDictLabel()
      renderTextDictList()
      reapplyFlowDict()
      saveTextDictionary()
      fromInput.value = ''
      toInput.value = ''
      fromInput.focus()
    })
    const tdSubmitOnEnter = function (e) {
      if (e.key === 'Enter') document.getElementById('td-add-btn').click()
    }
    document.getElementById('td-from-input').addEventListener('keydown', tdSubmitOnEnter)
    document.getElementById('td-to-input').addEventListener('keydown', tdSubmitOnEnter)

    // Add custom keyword
    document.getElementById('kw-custom-add-btn').addEventListener('click', function () {
      const input = document.getElementById('kw-custom-input')
      const kws = input.value.split(',').map(s => s.trim()).filter(Boolean)
      if (!kws.length) return
      for (const kw of kws) {
        if (!currentKeywords.includes(kw)) {
          currentKeywords.push(kw)
        }
        lockedKeywords.add(kw)
      }
      updateKeywordLabel()
      renderKeywordList()
      saveKeywords()
      input.value = ''
    })
    document.getElementById('kw-custom-input').addEventListener('keydown', function (e) {
      if (e.key === 'Enter') document.getElementById('kw-custom-add-btn').click()
    })
    document.getElementById('kw-generate-btn').addEventListener('click', generateKeywordsFromText)

    // Languages modal
    setupModal(document.getElementById('lang-dropdown-panel'), document.getElementById('lang-dropdown-btn'))

    // Add custom language
    document.getElementById('lang-custom-add-btn').addEventListener('click', function () {
      const input = document.getElementById('lang-custom-input')
      const code = input.value.trim()
      if (!code) return
      if (!selectedLanguages.includes(code)) {
        if (atLanguageLimit()) {
          document.getElementById('settings-status').textContent = `Limit: ${maxLanguages} language${maxLanguages === 1 ? '' : 's'}`
          return
        }
        selectedLanguages.push(code)
        updateDropdownLabel()
        renderCheckboxList()
        onLanguagesChanged()
        saveLanguages()
      }
      input.value = ''
    })
    document.getElementById('lang-custom-input').addEventListener('keydown', function (e) {
      if (e.key === 'Enter') document.getElementById('lang-custom-add-btn').click()
    })

    // ── Copyable inputs ──────────────────────────────────────────────────────
    const inputs = Array.from(document.getElementsByClassName('copyable-input'))
    inputs.forEach(element => {
      element.addEventListener("click", async function () {
        await copyText(element.value, element)
        const origBg = element.style.backgroundColor
        element.style.backgroundColor = 'rgb(34, 197, 94)'
        setTimeout(() => { element.style.backgroundColor = origBg }, 200)
      })
    })
    // Flow drawer toggle is an actual control only on mobile. Disable it on
    // desktop so the pointer and keyboard behavior match the static heading.
    const flowPanel = document.getElementById('flow-panel')
    const flowToggle = document.getElementById('flow-toggle')
    if (flowPanel && flowToggle) {
      const flowDrawerQuery = window.matchMedia('(max-width: 767px)')
      const syncFlowToggle = function () {
        const isMobile = flowDrawerQuery.matches
        flowToggle.disabled = !isMobile
        if (!isMobile) flowPanel.classList.remove('flow-open')
        flowToggle.setAttribute('aria-expanded', isMobile && flowPanel.classList.contains('flow-open') ? 'true' : 'false')
      }
      flowToggle.addEventListener('click', function () {
        const isOpen = flowPanel.classList.toggle('flow-open')
        flowToggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false')
      })
      flowDrawerQuery.addEventListener('change', syncFlowToggle)
      syncFlowToggle()
    }

    // Mobile header toolbar toggle (no-op on desktop since the toolbar is
    // always visible there).
    const headerEl = document.querySelector('header')
    const headerToggle = document.getElementById('header-toggle')
    if (headerEl && headerToggle) {
      headerToggle.addEventListener('click', function () {
        const isOpen = headerEl.classList.toggle('header-open')
        headerToggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false')
      })
    }

    if (micBtn) {
      micBtn.addEventListener('click', async () => {
        if (recording) {
          await stopRecording()
        } else {
          await startRecording()
        }
      })
    }

    if (micMobileBtn) {
      micMobileBtn.addEventListener('click', async () => {
        micBtn.click()
      })
    }
  })
</script>
<script src="/static/js/realtime.js?v={{ timestamp }}"></script>
<script>
    // Flow panel - shows corrected transcriptions in real-time
    ; (function () {
      const MAX_FLOW_ITEMS = 150
      const flowContent = document.getElementById('flow-content')
      const flowCountEl = document.getElementById('flow-count')
      const flowEditModal = document.getElementById('flow-edit-modal')
      const flowEditForm = document.getElementById('flow-edit-form')
      const flowEditText = document.getElementById('flow-edit-text')
      const flowEditStatus = document.getElementById('flow-edit-status')
      const flowEditSubmit = document.getElementById('flow-edit-submit')
      const flowEditSubmitLabel = document.getElementById('flow-edit-submit-label')
      const flowEditSpinner = document.getElementById('flow-edit-spinner')
      const flowEditCancel = document.getElementById('flow-edit-cancel')
      const flowEditClose = document.getElementById('flow-edit-close')
      const committedRows = new Map()
      let latestCommittedStartTime = -Infinity
      let partialEl = null
      // Children of partialEl, kept as refs so an update writes textContent only.
      // Rebuilding the row with innerHTML on every partial (several times a
      // second) re-created the spinner element and fired the Tailwind browser
      // build's MutationObserver each time - a new class candidate there costs a
      // full in-browser stylesheet recompile, which is what froze the panel.
      let partialTextEl = null
      let partialLatencyEl = null
      let segmentCount = 0
      // end_time of the partial currently on screen, so a translated partial that
      // lands after newer flow-only ones can't drag the line back to older text.
      let partialEndTime = 0
      let editingStartTime = null
      let editPending = false
      let awaitingJoinSnapshot = true
      const liveSegmentsSinceConnect = new Set()

      function updateCount() {
        if (!flowCountEl) return
        flowCountEl.textContent = editPending
          ? 'Retranslating…'
          : segmentCount + (segmentCount === 1 ? ' segment' : ' segments')
      }

      function scrollToBottom() {
        flowContent.scrollTop = flowContent.scrollHeight
      }

      // Latency from the server-stamped end_time to now, corrected for client clock skew.
      function segmentLatency(segment) {
        return ((Date.now() + (window.serverClockOffsetMs || 0)) / 1000) - segment.end_time
      }

      // Apply the flow-target text dictionary to source text at render time.
      // Mirrors the server's apply_text_dictionary (longest `from` first) so the
      // panel shows the same result the server would produce, and re-runs after a
      // rule changes. Lines keep their original source in data-src, so re-applying
      // always starts from the raw text - no compounding on repeated runs.
      function applyFlowDict(text) {
        if (!text) return text
        const rules = textDictionary
          .filter(r => (r.target || 'flow') === 'flow' && r.from)
          .sort((a, b) => b.from.length - a.from.length)
        for (const r of rules) text = text.split(r.from).join(r.to)
        return text
      }

      // Re-render every on-screen flow line (committed + partial) from its stored
      // source through the current dictionary. Exposed to the outer scope.
      reapplyFlowDict = function () {
        flowContent.querySelectorAll('[data-src]').forEach(function (el) {
          const span = el.querySelector('.flex-1')
          if (span) span.textContent = applyFlowDict(el.dataset.src)
        })
      }

      function segmentKey(startTime) {
        const numeric = Number(startTime)
        return Number.isFinite(numeric) ? String(numeric) : String(startTime)
      }

      function replaceCommitted(segment) {
        if (!segment) return false
        const row = committedRows.get(segmentKey(segment.start_time))
        const src = segment.result?.corrected || segment.text || ''
        if (!row || !src) return false
        row.dataset.src = src
        const textEl = row.querySelector('.flex-1')
        if (textEl) textEl.textContent = applyFlowDict(src)
        return true
      }

      // `fresh` marks a segment that arrived as its own live event. A segment
      // backfilled when the panel joins may be minutes old, so rendering latency
      // for that snapshot would produce a meaningless number.
      function appendCommitted(segment, fresh) {
        const src = segment.result?.corrected || segment.text || ''
        if (!src) return
        // A join snapshot can arrive after a newer live partial. Keep that partial
        // and insert the older committed row immediately before it.
        const partialStartsAfter = partialEl && !fresh
          && Number(partialEl.dataset.startTime) > Number(segment.start_time)
        if (partialEl && !partialStartsAfter) {
          partialEl.remove(); partialEl = null; partialTextEl = null; partialLatencyEl = null
          partialEndTime = 0
        }
        const row = document.createElement('button')
        row.type = 'button'
        row.className = 'flow-item group flex w-full items-start justify-between rounded-md px-[0.45rem] py-[0.32rem] text-left text-[#cbd6e4] transition-colors hover:bg-[#1d2938] hover:text-[#edf3fa] focus-visible:bg-[#1d2938] active:bg-[#273548]'
        row.dataset.startTime = String(segment.start_time)
        row.dataset.src = src

        const latencyHtml = fresh
          ? `<span class="text-[10px] text-gray-600 ml-2 tabular-nums">${segmentLatency(segment).toFixed(2)}s</span>`
          : ''
        row.innerHTML = `<span class="flex-1">${escapeHtml(applyFlowDict(src))}</span>${latencyHtml}`

        if (partialStartsAfter) flowContent.insertBefore(row, partialEl)
        else flowContent.appendChild(row)
        committedRows.set(segmentKey(segment.start_time), row)
        segmentCount++
        // Remove oldest items to keep DOM size bounded. The partial is always the
        // last row, so anything evicted here is a committed row the Map still holds.
        while (flowContent.children.length > MAX_FLOW_ITEMS) {
          const oldest = flowContent.firstElementChild
          if (oldest?.dataset.startTime) committedRows.delete(segmentKey(oldest.dataset.startTime))
          oldest?.remove()
        }
        updateCount()
        scrollToBottom()
      }

      function updatePartial(segment) {
        if (!segment) {
          if (partialEl) { partialEl.remove(); partialEl = null; partialTextEl = null; partialLatencyEl = null }
          partialEndTime = 0
          return
        }
        // A translated partial is emitted after its LLM round trip, so it can land
        // behind flow-only partials that already carry newer source text. Keeping
        // the newest end_time stops the line from rewinding - and stops the latency
        // readout from flipping between the stale and the fresh one.
        if (segment.end_time < partialEndTime) return
        // Partials always render raw `text`: flow-only ones have no `corrected`, so
        // mixing the two would swap the wording back and forth mid-segment. The
        // corrected wording lands once, on commit.
        const src = segment.text || ''
        if (!src) {
          if (partialEl) { partialEl.remove(); partialEl = null; partialTextEl = null; partialLatencyEl = null }
          partialEndTime = 0
          return
        }
        partialEndTime = segment.end_time
        if (!partialEl) {
          partialEl = document.createElement('p')
          partialEl.className = 'flow-item-partial flex items-start justify-between rounded-md px-[0.4rem] py-[0.2rem] italic text-[#78869a]'
          partialEl.innerHTML = `<span class="flex-1"></span><iconify-icon icon="ph:spinner-gap" class="animate-spin text-gray-600 mt-0.5 ml-1" width="10"></iconify-icon><span class="text-[10px] text-gray-700 ml-1 tabular-nums"></span>`
          partialTextEl = partialEl.querySelector('.flex-1')
          partialLatencyEl = partialEl.lastElementChild
          flowContent.appendChild(partialEl)
        }
        partialEl.dataset.src = src
        partialEl.dataset.startTime = segment.start_time
        const latency = segmentLatency(segment)
        partialTextEl.textContent = applyFlowDict(src)
        partialLatencyEl.textContent = latency.toFixed(2) + 's'
        scrollToBottom()
      }

      function renderCommitted(segment, fresh) {
        if (!segment) return
        const key = segmentKey(segment.start_time)
        if (committedRows.has(key)) return
        const startTime = Number(segment.start_time)
        if (!fresh && Number.isFinite(startTime) && startTime < latestCommittedStartTime) return
        if (Number.isFinite(startTime)) {
          latestCommittedStartTime = Math.max(latestCommittedStartTime, startTime)
        }
        appendCommitted(segment, fresh)
      }

      function setEditPending(pending) {
        editPending = pending
        flowEditModal.dataset.modalPending = pending ? 'true' : 'false'
        flowEditForm.setAttribute('aria-busy', pending ? 'true' : 'false')
        for (const control of [flowEditText, flowEditSubmit, flowEditCancel, flowEditClose]) {
          control.disabled = pending
        }
        flowEditSpinner.classList.toggle('hidden', !pending)
        flowEditSubmitLabel.textContent = pending ? 'Retranslating…' : 'Save & retranslate'
        if (pending) flowEditStatus.textContent = 'Retranslating…'
        updateCount()
      }

      function openFlowEditor(row) {
        if (editPending) return
        editingStartTime = Number(row.dataset.startTime)
        if (!Number.isFinite(editingStartTime)) return
        flowEditText.value = row.dataset.src || ''
        flowEditStatus.textContent = ''
        flowEditModal.classList.remove('hidden')
        setTimeout(() => {
          flowEditText.focus()
          flowEditText.select()
        }, 0)
      }

      function closeFlowEditor() {
        if (editPending) return
        flowEditModal.classList.add('hidden')
        flowEditStatus.textContent = ''
        editingStartTime = null
      }

      flowContent.addEventListener('click', function (event) {
        const row = event.target.closest('button.flow-item')
        if (row && flowContent.contains(row)) openFlowEditor(row)
      })
      flowEditCancel.addEventListener('click', closeFlowEditor)
      flowEditClose.addEventListener('click', closeFlowEditor)
      flowEditModal.addEventListener('mousedown', function (event) {
        if (event.target === flowEditModal && !editPending) closeFlowEditor()
      })
      // Enter submits; Shift/Ctrl/Cmd+Enter inserts a newline. Skip IME composition
      // (keyCode 229 covers Safari) so confirming a CJK candidate never submits.
      flowEditText.addEventListener('keydown', function (event) {
        if (event.key !== 'Enter' || event.isComposing || event.keyCode === 229 || event.altKey) return
        if (event.shiftKey) return
        event.preventDefault()
        if (event.ctrlKey || event.metaKey) {
          if (flowEditText.value.length - (flowEditText.selectionEnd - flowEditText.selectionStart) >= flowEditText.maxLength) return
          flowEditText.setRangeText('\n', flowEditText.selectionStart, flowEditText.selectionEnd, 'end')
          return
        }
        flowEditForm.requestSubmit()
      })

      flowEditForm.addEventListener('submit', async function (event) {
        event.preventDefault()
        if (editPending || editingStartTime === null) return
        const submittedStartTime = editingStartTime
        const corrected = flowEditText.value.trim()
        if (!corrected) {
          flowEditStatus.textContent = 'Source text is required.'
          flowEditText.focus()
          return
        }

        setEditPending(true)
        flowEditModal.classList.add('hidden')
        committedRows.get(segmentKey(submittedStartTime))?.focus()
        try {
          const response = await fetch(`/api/session/${encodeURIComponent(sessionId)}/segments/retranslate`, {
            method: 'POST',
            credentials: 'same-origin',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              start_time: submittedStartTime,
              corrected: corrected,
            }),
          })
          const payload = await response.json().catch(() => ({}))
          if (!response.ok) {
            throw new Error(payload.detail || `Retranslation failed (${response.status})`)
          }
          if (!payload.segment) throw new Error('Retranslation returned no segment.')
          replaceCommitted(payload.segment)
          setEditPending(false)
          closeFlowEditor()
        } catch (error) {
          setEditPending(false)
          flowEditStatus.textContent = error.message || 'Retranslation failed.'
          flowEditModal.classList.remove('hidden')
          flowEditText.focus()
        }
      })

      socket.on('connect', function () {
        awaitingJoinSnapshot = true
        liveSegmentsSinceConnect.clear()
      })

      socket.on('transcription_update', function (data) {
        if (data.partial) {
          updatePartial(data)
        } else {
          if (awaitingJoinSnapshot) liveSegmentsSinceConnect.add(segmentKey(data.start_time))
          updatePartial(null)
          renderCommitted(data, true)
        }
      })

      socket.on('segment_updated', function (data) {
        if (!data || data.session_id !== sessionId || !data.segment) return
        if (awaitingJoinSnapshot) {
          liveSegmentsSinceConnect.add(segmentKey(data.segment.start_time))
        }
        replaceCommitted(data.segment)
      })

      // Reconcile every visible row after a reconnect. Live events can arrive while
      // the server is loading this snapshot, so never overwrite those newer values.
      socket.on('joined_session', function (data) {
        if (!data.authorized) return
        const segments = Array.isArray(data.committed_segments) ? data.committed_segments : []
        for (const segment of segments) {
          if (liveSegmentsSinceConnect.has(segmentKey(segment.start_time))) continue
          if (!replaceCommitted(segment)) renderCommitted(segment, false)
        }
        awaitingJoinSnapshot = false
        liveSegmentsSinceConnect.clear()
        // A limit change pushed while disconnected is missed, and the primary
        // owner's panel doesn't poll; re-read it so the hint/locks converge.
        applySettingsUpdate('language-limit')
      })

      socket.on('session_settings_updated', function (data) {
        if (!data || data.session_id !== sessionId) return
        applySettingsUpdate(data.kind)
      })
    })()
</script>
{% if is_realtime_enabled %}
<script>
  // Audio-usage display is updated from the heartbeat response (no separate poll needed).
  function updateAudioUsageDisplay(data) {
    const usageDisplay = document.getElementById('audio-usage-display')
    if (!usageDisplay) return
    if (!data.audio_bytes) {
      usageDisplay.textContent = 'Audio: --'
      return
    }
    const secs = data.audio_duration_secs
    const m = Math.floor(secs / 60)
    const s = Math.floor(secs % 60)
    const duration = m + ':' + String(s).padStart(2, '0')
    const bytes = data.audio_bytes
    const size = bytes < 1024 ? bytes + ' B'
      : bytes < 1024 * 1024 ? (bytes / 1024).toFixed(1) + ' KB'
        : (bytes / (1024 * 1024)).toFixed(2) + ' MB'
    usageDisplay.textContent = 'Audio: ' + duration + ' / ' + size
  }
</script>
{% endif %}
{% endblock %}

{# Source link is already part of this page's own layout. #}
{% block source_offer %}{% endblock %}