Alfred
/
fm-rds-tx
1
0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 6 Wiki Activité
Go-based FM stereo transmitter with RDS, Windows-first and cross-platform
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
197 Révisions
1 Branche
37MB
Aborescence: 4fe9ca71bc
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de '4fe9ca71bc'
${ noResults }
fm-rds-tx/internal/control/ui.html

1259 lignes
120KB
Brut Annotations Historique 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="utf-8">

  5. <meta name="viewport" content="width=device-width, initial-scale=1">

  6. <title>fm-rds-tx</title>

  7. <style>

  8. @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

  9. :root {

  10.   --bg:#f7f8fb; --surface:#ffffff; --surface2:#f4f6f8; --surface3:#e8ecf1;

  11.   --border:#d7dcdf; --border-strong:#bcc5ce;

  12.   --text:#111724; --text-dim:#4c5a6a; --text-muted:#6b7683;

  13.   --accent:#1f4d9d; --accent-soft:rgba(31,77,157,.08);

  14.   --green:#0d944a; --amber:#b7791f; --red:#b03030;

  15.   --green-soft:rgba(13,148,74,.1); --amber-soft:rgba(183,121,31,.12); --red-soft:rgba(176,48,48,.1);

  16.   --mono:'JetBrains Mono',monospace; --display:'Inter',sans-serif;

  17.   --radius:8px; --shadow:0 8px 24px rgba(15,23,42,.08);

  18. }

  19. *{box-sizing:border-box;margin:0;padding:0}

  20. html{color-scheme:light}

  21. body{background:linear-gradient(180deg,#fbfcfe 0%,var(--bg) 100%);color:var(--text);font-family:var(--display);font-size:14px;line-height:1.5;min-height:100vh;overflow-x:hidden}

  22. button,input,select{font:inherit}button{user-select:none}

  23. .app{max-width:1200px;margin:0 auto;padding:24px}

  24. /* Header */

  25. .header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:4px 0 20px;border-bottom:1px solid var(--border);margin-bottom:20px}

  26. .header-main{display:flex;flex-direction:column;gap:8px}

  27. .header h1{font-size:28px;font-weight:800;letter-spacing:-.03em}

  28. .header-note{font-size:13px;color:var(--text-muted)}

  29. .header-sub{display:flex;flex-wrap:wrap;gap:8px}

  30. .badge{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:0 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface2);color:var(--text-dim);font-size:11px;text-transform:uppercase;letter-spacing:.08em}

  31. .badge strong{white-space:nowrap}

  32. .badge .tag{margin-left:2px}

  33. .badge strong{color:var(--text);font-weight:700}

  34. .header-status{display:flex;align-items:center;gap:10px;padding-top:6px}

  35. /* LED */

  36. .led{width:10px;height:10px;border-radius:50%;background:#333;transition:all .25s;flex-shrink:0}

  37. .led.on-green{background:var(--green);box-shadow:0 0 0 3px rgba(13,148,74,.16)}

  38. .led.on-red{background:var(--red);box-shadow:0 0 0 3px rgba(176,48,48,.14)}

  39. .led.on-amber{background:var(--amber);box-shadow:0 0 0 3px rgba(183,121,31,.14)}

  40. .led.on-blue{background:var(--accent);box-shadow:0 0 0 3px rgba(31,77,157,.14)}

  41. .status-text{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}

  42. /* Tabs */

  43. .tab-bar{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:0 0 20px;flex-wrap:wrap;position:sticky;top:0;background:rgba(247,248,251,.95);backdrop-filter:blur(8px);z-index:10}

  44. .tab-btn{border:none;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--text-dim);font-size:13px;font-weight:700;padding:12px 14px 11px;cursor:pointer;transition:color .16s,border-color .16s}

  45. .tab-btn.active{border-bottom-color:var(--accent);color:var(--accent)}

  46. .tab-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  47. .tab-panels{display:flex;flex-direction:column;gap:14px}

  48. .tab-panel{display:none}.tab-panel.active{display:block}

  49. .tab-columns{display:grid;gap:16px}

  50. .tab-columns.two{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr)}

  51. .tab-columns.one{grid-template-columns:1fr}

  52. .stack{display:flex;flex-direction:column;gap:12px}

  53. /* Cards */

  54. .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}

  55. .hero{padding:16px}

  56. /* TX Bar */

  57. .tx-bar{position:relative;z-index:1;display:grid;grid-template-columns:minmax(180px,250px) 1fr auto;gap:14px;align-items:center}

  58. .freq-display-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}

  59. .freq-display{font-size:40px;color:var(--text);letter-spacing:-.04em;line-height:1;font-weight:800}

  60. .freq-display .unit{font-family:var(--mono);font-size:14px;color:var(--text-dim);margin-left:5px}

  61. .freq-note{display:flex;gap:12px;margin-top:6px;font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}

  62. .freq-note-item{display:inline-flex;align-items:center;gap:4px}

  63. .freq-note.mismatch .freq-note-item{color:var(--amber)}

  64. .tx-actions{display:flex;flex-wrap:wrap;gap:10px}

  65. .tx-state-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:6px}

  66. .tx-state{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--text-dim)}

  67. .tx-state.running{color:var(--green)}.tx-state.working,.tx-state.starting,.tx-state.stopping{color:var(--amber)}

  68. .tx-state.faulted,.tx-state.error{color:var(--red)}

  69. .status-hint{font-size:10px;color:var(--text-muted);text-align:right}

  70. /* Quick grid */

  71. .quick-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:16px}

  72. .quick-item{padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface2)}

  73. .quick-item .label{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:6px}

  74. .quick-item .value{font-size:18px;font-weight:700}

  75. .quick-item .value.warn{color:var(--amber)}.quick-item .value.err{color:var(--accent)}.quick-item .value.good{color:var(--green)}

  76. /* Signal grid */

  77. .signal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}

  78. .signal-card{padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface2)}

  79. .signal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}

  80. .signal-title{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}

  81. .signal-value{font-size:11px;font-weight:700}

  82. /* Meters */

  83. .meter{width:100%;height:10px;border-radius:999px;background:#e7ebf0;border:1px solid var(--border);overflow:hidden}

  84. .meter-fill{height:100%;width:0%;transition:width .25s,background-color .25s;background:linear-gradient(90deg,var(--green),#3dbd75)}

  85. .meter-fill.warn{background:linear-gradient(90deg,var(--amber),#d9a14a)}.meter-fill.err{background:linear-gradient(90deg,var(--red),#d85c5c)}

  86. /* Sparklines */

  87. .spark{width:100%;height:34px;margin-top:10px;border-radius:6px;background:#f7f9fb;border:1px solid #e3e8ee}

  88. .spark path.line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

  89. .spark path.area{opacity:.14}

  90. .spark.good path.line{stroke:var(--green)}.spark.good path.area{fill:var(--green)}

  91. .spark.warn path.line{stroke:var(--amber)}.spark.warn path.area{fill:var(--amber)}

  92. .spark.err path.line{stroke:var(--accent)}.spark.err path.area{fill:var(--accent)}

  93. /* Panels */

  94. .panel{overflow:hidden}

  95. .panel-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--surface2);cursor:pointer;user-select:none}

  96. .panel-head:hover{background:#eef2f6}

  97. .panel-head h2{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.6px;color:var(--text-dim)}

  98. .panel-head .meta{margin-left:auto;margin-right:8px;font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;text-align:right}

  99. .panel-head .chevron{color:var(--text-dim);transition:transform .2s;font-size:10px}

  100. .panel-head.collapsed .chevron{transform:rotate(-90deg)}

  101. .panel-body{padding:14px}.panel-body.collapsed{display:none}

  102. /* Controls */

  103. .section-note{font-size:11px;color:var(--text-muted);margin-bottom:12px}

  104. .ctrl-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}

  105. .ctrl-row:last-child{border-bottom:none}

  106. .ctrl-label-wrap{min-width:140px;display:flex;flex-direction:column;gap:2px}

  107. .ctrl-label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px}

  108. .ctrl-sub{font-size:10px;color:var(--text-muted)}

  109. .ctrl-input{flex:1;display:flex;align-items:center;gap:10px}

  110. /* Tags */

  111. .tag{display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;flex-shrink:0}

  112. .tag-live{background:rgba(13,148,74,.12);color:var(--green)}

  113. .tag-saved{background:rgba(31,77,157,.12);color:var(--accent)}

  114. .tag-restart{background:rgba(183,121,31,.12);color:var(--amber)}

  115. .tag-reload{background:rgba(17,23,36,.08);color:var(--text-dim)}

  116. /* Buttons */

  117. .tx-btn,.ghost-btn,.apply-btn,.preset-btn,.danger-btn{min-height:40px;padding:0 18px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;transition:transform .16s,border-color .16s,background .16s}

  118. .tx-btn:hover:not(:disabled),.ghost-btn:hover:not(:disabled),.apply-btn:hover:not(:disabled),.preset-btn:hover:not(:disabled),.danger-btn:hover:not(:disabled){transform:translateY(-1px);border-color:var(--border-strong)}

  119. .tx-btn:disabled,.ghost-btn:disabled,.apply-btn:disabled,.preset-btn:disabled,.danger-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

  120. .tx-btn.start{background:var(--green);color:#fff;border-color:transparent}

  121. .tx-btn.start:hover:not(:disabled){background:#0b7f40}

  122. .tx-btn.stop{background:#fff;color:var(--red);border-color:rgba(176,48,48,.35)}

  123. .tx-btn.stop:hover:not(:disabled){background:var(--red-soft)}

  124. .ghost-btn{color:var(--text-dim)}

  125. .danger-btn{border-color:rgba(176,48,48,.35);color:var(--red);background:var(--red-soft)}

  126. .danger-btn:hover:not(:disabled){background:rgba(176,48,48,.16)}

  127. .apply-btn{background:var(--accent);border-color:transparent;color:#fff}

  128. .apply-btn.secondary{background:var(--surface2);color:var(--text-dim);border-color:var(--border)}

  129. .apply-btn:hover:not(:disabled){opacity:.88}

  130. /* Inputs */

  131. input[type="range"]{-webkit-appearance:none;appearance:none;flex:1;height:6px;background:linear-gradient(90deg,var(--border),var(--surface3));border-radius:999px;outline:none}

  132. input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--text);border:2px solid var(--bg);cursor:pointer;transition:background .15s,transform .15s}

  133. input[type="range"]::-webkit-slider-thumb:hover{background:var(--accent);transform:scale(1.06)}

  134. input[type="number"],input[type="text"],select{background:#fff;border:1px solid var(--border);border-radius:6px;color:var(--text);padding:8px 10px;outline:none;transition:border-color .15s,box-shadow .15s}

  135. input[type="number"]{width:92px;text-align:right}input[type="text"]{width:100%}

  136. select{min-width:120px}

  137. input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,77,157,.12)}

  138. input.input-dirty{border-color:var(--amber);box-shadow:0 0 0 3px rgba(183,121,31,.08)}

  139. input.input-error{border-color:var(--red);box-shadow:0 0 0 3px rgba(176,48,48,.14);background:rgba(176,48,48,.04)}

  140. .val-display{min-width:64px;text-align:right;font-size:12px;font-weight:700}

  141. .unit-label{font-size:11px;color:var(--text-dim);min-width:44px}

  142. .field-error{display:none;margin-top:8px;font-size:11px;color:var(--accent)}

  143. .field-error.show{display:block}

  144. /* Toggles */

  145. .toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--border)}

  146. .toggle-row:last-child{border-bottom:none}

  147. .toggle-copy{display:flex;flex-direction:column;gap:3px}

  148. .toggle-copy .title{font-size:12px;font-weight:700}

  149. .toggle-copy .sub{font-size:10px;color:var(--text-muted)}

  150. .toggle-ctl{display:flex;align-items:center;gap:10px}

  151. .toggle{position:relative;width:42px;height:24px;background:var(--border);border-radius:999px;cursor:pointer;transition:all .2s;flex-shrink:0}

  152. .toggle::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--text);border-radius:50%;transition:transform .2s}

  153. .toggle.on{background:var(--green)}.toggle.on::after{transform:translateX(18px)}

  154. .toggle.busy{opacity:.55;pointer-events:none}

  155. .toggle-state{min-width:36px;text-align:right;font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px}

  156. /* RDS */

  157. .rds-grid{display:grid;gap:12px}

  158. .rds-field{display:flex;flex-direction:column;gap:6px}

  159. .rds-input{width:100%;background:#fff;border:1px solid var(--border);border-radius:6px;color:var(--accent);font-family:var(--mono);font-size:15px;font-weight:700;padding:10px 12px;outline:none;letter-spacing:2px;text-transform:uppercase;transition:border-color .15s,box-shadow .15s}

  160. .rds-input.rt{color:var(--text);text-transform:none;letter-spacing:.5px;font-size:12px;font-weight:500}

  161. .rds-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,77,157,.12)}

  162. .rds-charcount{font-size:10px;color:var(--text-dim);text-align:right}

  163. .pi-display{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--accent);letter-spacing:4px;padding:8px 0}

  164. /* Presets */

  165. .preset-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}

  166. .preset-btn{min-height:34px;padding:0 12px;font-size:11px;letter-spacing:.08em;color:var(--text-dim)}

  167. .preset-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

  168. .preset-btn.rds{text-transform:none;font-weight:600}

  169. .actions-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

  170. /* Sidebar/KV */

  171. .sidebar-card{padding:14px}

  172. .sidebar-section+.sidebar-section{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}

  173. .sidebar-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:10px}

  174. .kv{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:start}

  175. .kv .k{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}

  176. .kv .v{font-size:12px;word-break:break-word}

  177. /* Health */

  178. .health-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}

  179. .health-line:last-child{border-bottom:none}

  180. .health-line .name{font-size:11px;color:var(--text-dim)}

  181. .health-line .val{font-size:11px;text-align:right}

  182. .health-line .val.good{color:var(--green)}.health-line .val.warn{color:var(--amber)}.health-line .val.err{color:var(--accent)}

  183. .health-trend{margin-top:10px}

  184. .health-trend-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:6px}

  185. /* History */

  186. .fault-history,.transition-history{margin-top:12px;padding:10px;border:1px solid var(--border);border-radius:6px;background:var(--surface2);font-size:11px;max-height:200px;overflow-y:auto;line-height:1.3}

  187. .fault-history-entry,.transition-history-entry{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid var(--border)}

  188. .fault-history-entry:last-child,.transition-history-entry:last-child{border-bottom:none}

  189. .fault-history-entry .fault-history-time,.transition-history-entry .transition-history-time{color:var(--text-dim)}

  190. .fault-history-entry.ok,.transition-history-entry.good{color:var(--green)}

  191. .fault-history-entry.warn,.transition-history-entry.warn{color:var(--amber)}

  192. .fault-history-entry.err,.transition-history-entry.err{color:var(--accent)}

  193. .fault-history-desc,.transition-history-desc{font-size:10px;flex:1;text-transform:uppercase;letter-spacing:.5px}

  194. .fault-history-empty,.transition-history-empty{padding:6px 0;color:var(--text-muted);font-size:11px}

  195. /* Audit */

  196. .audit-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--border)}

  197. .audit-row:last-child{border-bottom:none}

  198. .audit-name{font-size:11px;color:var(--text-dim)}

  199. .audit-val{font-size:11px;font-weight:700}

  200. /* Ingest */

  201. .ingest-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

  202. .ingest-grid .ctrl-row{align-items:flex-start;padding:0;border-bottom:none}

  203. .ingest-group{margin-top:12px;padding:10px;border:1px solid var(--border);border-radius:6px;background:var(--surface2)}

  204. .ingest-group-title{margin-bottom:8px;font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}

  205. /* Log */

  206. .log{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:10px;font-size:11px;color:var(--text-dim);max-height:220px;overflow-y:auto;white-space:pre-wrap;word-break:break-word}

  207. .log .entry{padding:3px 0}

  208. .log .entry.err{color:var(--accent)}.log .entry.ok{color:var(--green)}.log .entry.warn{color:var(--amber)}

  209. .empty-log{color:var(--text-muted)}

  210. /* Shortcuts */

  211. .shortcuts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}

  212. .shortcut-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--border)}

  213. .shortcut-line:last-child{border-bottom:none}

  214. .shortcut-line .name{font-size:11px;color:var(--text-dim)}

  215. .shortcut-line .keys{display:inline-flex;gap:6px}

  216. .kbd{min-width:28px;padding:3px 7px;border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;background:var(--surface2);font-size:10px;text-align:center}

  217. .section-note.reset-hint{font-size:11px;color:var(--text-dim);margin-top:10px;padding:10px 12px;border:1px dashed var(--border);border-radius:6px;background:#fbfcfe}

  218. /* Toast */

  219. .toast{position:fixed;right:16px;bottom:16px;max-width:min(420px,calc(100vw - 24px));padding:12px 15px;border-radius:var(--radius);font-size:12px;font-weight:700;z-index:2000;transform:translateY(60px);opacity:0;transition:all .25s;box-shadow:var(--shadow)}

  220. .toast.show{transform:translateY(0);opacity:1}

  221. .toast.ok{background:var(--green);color:var(--bg)}.toast.err{background:var(--accent);color:#fff}

  222. .toast.warn{background:var(--amber);color:#141414}.toast.info{background:var(--text-dim);color:#fff}

  223. /* Responsive */

  224. @media(max-width:980px){.tab-columns.two{grid-template-columns:1fr}.tx-bar{grid-template-columns:1fr}.tx-state-wrap{align-items:flex-start}.status-hint{text-align:left}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.signal-grid{grid-template-columns:1fr}}

  225. @media(max-width:640px){.app{padding:12px}.header{flex-direction:column;gap:10px}.header h1{font-size:22px}.badge{width:100%;justify-content:space-between}.badge strong{max-width:52%;overflow:hidden;text-overflow:ellipsis}.quick-grid{grid-template-columns:1fr 1fr;gap:8px}.ctrl-row{flex-direction:column;align-items:stretch}.ctrl-label-wrap{min-width:auto}.ctrl-input{flex-wrap:wrap}.ingest-grid{grid-template-columns:1fr}input[type="number"]{width:100%;text-align:left}.actions-row,.tx-actions{flex-direction:column}.tx-btn,.ghost-btn,.apply-btn,.preset-btn,.danger-btn{width:100%}.freq-display{font-size:31px}.shortcuts-grid{grid-template-columns:1fr}}

  226. </style>

  227. </head>

  228. <body>

  229. <div class="app">

  230. <div class="header">

  231.   <div class="header-main">

  232.     <h1>FM-RDS-TX Control Plane</h1>

  233.     <div class="header-note">Operate confidently: tune fast, inspect state instantly, diagnose only when needed.</div>

  234.     <div class="header-sub">

  235.       <div class="badge"><span>Backend</span><strong id="badge-backend">--</strong></div>

  236.       <div class="badge"><span>Mode</span><strong id="badge-mode">Control Plane</strong></div>

  237.       <div class="badge"><span>Live Config</span><strong id="badge-live">--</strong></div>

  238.     </div>

  239.   </div>

  240.   <div class="header-status">

  241.     <div class="led" id="led-conn"></div>

  242.     <div class="status-text" id="conn-label">connecting</div>

  243.   </div>

  244. </div>

  245. <div class="tab-bar">

  246.   <button class="tab-btn active" data-tab="overview" type="button">Overview</button>

  247.   <button class="tab-btn" data-tab="tx" type="button">TX Control</button>

  248.   <button class="tab-btn" data-tab="rds" type="button">RDS</button>

  249.   <button class="tab-btn" data-tab="ingest" type="button">Ingest</button>

  250.   <button class="tab-btn" data-tab="diagnostics" type="button">Diagnostics</button>

  251.   <button class="tab-btn" data-tab="activity" type="button">Activity</button>

  252. </div>

  253. <div class="tab-panels">

  254. <!-- OVERVIEW TAB -->

  255. <section class="tab-panel active" data-tab-panel="overview">

  256.   <div class="tab-columns two">

  257.     <div class="stack">

  258.       <div class="card hero" id="hero-card">

  259.         <div class="tx-bar">

  260.           <div>

  261.             <div class="freq-display-label">Carrier</div>

  262.             <div class="freq-display" id="freq-display">---.-<span class="unit">MHz</span></div>

  263.             <div class="freq-note" id="freq-note">

  264.               <span class="freq-note-item" id="freq-applied">Applied: --</span>

  265.               <span class="freq-note-item" id="freq-desired">Desired: --</span>

  266.             </div>

  267.           </div>

  268.           <div class="tx-actions">

  269.             <button class="tx-btn start" id="btn-start" type="button">TX ON</button>

  270.             <button class="tx-btn stop" id="btn-stop" type="button">TX OFF</button>

  271.             <button class="ghost-btn" id="btn-refresh" type="button">Refresh</button>

  272.           </div>

  273.           <div class="tx-state-wrap">

  274.             <div class="tx-state idle" id="tx-state">IDLE</div>

  275.             <div class="status-hint" id="tx-hint">Waiting for runtime telemetry</div>

  276.           </div>

  277.         </div>

  278.         <div class="quick-grid">

  279.           <div class="quick-item"><div class="label">Chunks</div><div class="value" id="t-chunks">--</div></div>

  280.           <div class="quick-item"><div class="label">Samples</div><div class="value" id="t-samples">--</div></div>

  281.           <div class="quick-item"><div class="label">Underruns</div><div class="value" id="t-underruns">--</div></div>

  282.           <div class="quick-item"><div class="label">Uptime</div><div class="value" id="t-uptime">--</div></div>

  283.           <div class="quick-item"><div class="label">Rate</div><div class="value" id="t-rate">--</div></div>

  284.         </div>

  285.         <div class="signal-grid">

  286.           <div class="signal-card"><div class="signal-head"><div class="signal-title">Audio Buffer</div><div class="signal-value" id="meter-audio-text">--</div></div><div class="meter"><div class="meter-fill" id="meter-audio-fill"></div></div><svg class="spark good" id="spark-audio" viewBox="0 0 160 34" preserveAspectRatio="none"></svg></div>

  287.           <div class="signal-card"><div class="signal-head"><div class="signal-title">Stream Health</div><div class="signal-value" id="meter-stream-text">--</div></div><div class="meter"><div class="meter-fill" id="meter-stream-fill"></div></div><svg class="spark warn" id="spark-underruns" viewBox="0 0 160 34" preserveAspectRatio="none"></svg></div>

  288.           <div class="signal-card"><div class="signal-head"><div class="signal-title">TX Activity</div><div class="signal-value" id="meter-tx-text">--</div></div><div class="meter"><div class="meter-fill" id="meter-tx-fill"></div></div><svg class="spark good" id="spark-tx" viewBox="0 0 160 34" preserveAspectRatio="none"></svg></div>

  289.         </div>

  290.       </div>

  291.     </div>

  292.     <div class="stack">

  293.       <div class="card sidebar-card">

  294.         <div class="sidebar-section">

  295.           <div class="sidebar-title">Runtime Snapshot</div>

  296.           <div class="kv">

  297.             <div class="k">Backend</div><div class="v" id="info-backend">--</div>

  298.             <div class="k">Frequency</div><div class="v" id="info-freq">--</div>

  299.             <div class="k">Pre-emphasis</div><div class="v" id="info-preemph">--</div>

  300.             <div class="k">RDS PI</div><div class="v" id="info-pi" style="font-family:var(--mono);font-weight:700">--</div>

  301.             <div class="k">RDS PTY</div><div class="v" id="info-pty">--</div>

  302.             <div class="k">State Age</div><div class="v" id="info-runtime-age">--</div>

  303.             <div class="k">Last Alert</div><div class="v" id="info-last-alert">--</div>

  304.           </div>

  305.         </div>

  306.         <div class="sidebar-section">

  307.           <div class="sidebar-title">Signal Chain</div>

  308.           <div class="kv">

  309.             <div class="k">Output Drive</div><div class="v" id="info-drive">--</div>

  310.             <div class="k">Limiter</div><div class="v" id="info-limiter">--</div>

  311.             <div class="k">Pilot Level</div><div class="v" id="info-pilot">--</div>

  312.             <div class="k">RDS Inj.</div><div class="v" id="info-rdsinj">--</div>

  313.             <div class="k">MPX Gain</div><div class="v" id="info-mpxgain">--</div>

  314.             <div class="k">BS.412</div><div class="v" id="info-bs412">--</div>

  315.             <div class="k">Comp. Clip</div><div class="v" id="info-compclip">--</div>

  316.           </div>

  317.         </div>

  318.       </div>

  319.     </div>

  320.   </div>

  321. </section>

  322. 

  323. <!-- TX CONTROL TAB -->

  324. <section class="tab-panel" data-tab-panel="tx">

  325.   <div class="tab-columns two">

  326.     <div class="stack">

  327.       <!-- Frequency -->

  328.       <div class="card panel" data-panel-key="frequency">

  329.         <div class="panel-head" data-panel><div class="led on-green" style="width:6px;height:6px"></div><h2>Frequency</h2><div class="meta" id="freq-meta">Live + Saved</div><span class="chevron">▼</span></div>

  330.         <div class="panel-body">

  331.           <div class="section-note">Tune without restarting — when TX is running, the change takes effect at the next chunk boundary (~50ms). The desired frequency is also written into config.</div>

  332.           <div class="preset-row" id="freq-presets">

  333.             <button class="preset-btn" type="button" data-freq-preset="87.6">87.6</button>

  334.             <button class="preset-btn" type="button" data-freq-preset="94.5">94.5</button>

  335.             <button class="preset-btn" type="button" data-freq-preset="99.5">99.5</button>

  336.             <button class="preset-btn" type="button" data-freq-preset="100.0">100.0</button>

  337.             <button class="preset-btn" type="button" data-freq-preset="107.9">107.9</button>

  338.           </div>

  339.           <div class="ctrl-row">

  340.             <div class="ctrl-label-wrap"><span class="ctrl-label">TX Freq</span><span class="ctrl-sub">65–110 MHz</span></div>

  341.             <div class="ctrl-input"><input type="range" min="65" max="110" step="0.1" id="freq-slider"><input type="number" min="65" max="110" step="0.1" id="freq-num"><span class="unit-label">MHz</span><span class="tag tag-live">live</span></div>

  342.           </div>

  343.           <div class="field-error" id="freq-error"></div>

  344.           <div class="actions-row"><button class="apply-btn" id="freq-apply" type="button">Apply + Save Frequency</button><button class="apply-btn secondary" id="freq-reset" type="button">Reset Draft</button></div>

  345.         </div>

  346.       </div>

  347.       <!-- Audio & Drive -->

  348.       <div class="card panel" data-panel-key="audio">

  349.         <div class="panel-head" data-panel><div class="led on-green" style="width:6px;height:6px"></div><h2>Audio &amp; Drive</h2><div class="meta" id="audio-meta">Mixed Apply Modes</div><span class="chevron">▼</span></div>

  350.         <div class="panel-body">

  351.           <div class="section-note">Output Drive and Limiter Ceiling apply live. Pre-emphasis and Input Gain are saved to config and require TX restart to affect the DSP path.</div>

  352.           <div class="ctrl-row">

  353.             <div class="ctrl-label-wrap"><span class="ctrl-label">Output Drive</span><span class="ctrl-sub">0 – 10</span></div>

  354.             <div class="ctrl-input"><input type="range" min="0" max="10" step="0.05" id="drive-slider"><span class="val-display" id="drive-val">--</span><span class="tag tag-live">live</span></div>

  355.           </div>

  356.           <div class="ctrl-row">

  357.             <div class="ctrl-label-wrap"><span class="ctrl-label">Limiter Ceiling</span><span class="ctrl-sub">0.5 – 2.0</span></div>

  358.             <div class="ctrl-input"><input type="range" min="0.5" max="2.0" step="0.05" id="lim-ceiling-slider"><span class="val-display" id="lim-ceiling-val">--</span><span class="tag tag-live">live</span></div>

  359.           </div>

  360.           <div class="ctrl-row">

  361.             <div class="ctrl-label-wrap"><span class="ctrl-label">Pre-emphasis</span><span class="ctrl-sub">Region standard</span></div>

  362.             <div class="ctrl-input"><select id="preemph-select"><option value="0">Off (0 µs)</option><option value="50">EU / CH (50 µs)</option><option value="75">US / JP (75 µs)</option></select><span class="tag tag-restart">restart</span></div>

  363.           </div>

  364.           <div class="ctrl-row">

  365.             <div class="ctrl-label-wrap"><span class="ctrl-label">Input Gain</span><span class="ctrl-sub">0 – 4</span></div>

  366.             <div class="ctrl-input"><input type="range" min="0" max="4" step="0.05" id="gain-slider"><span class="val-display" id="gain-val">--</span><span class="tag tag-restart">restart</span></div>

  367.           </div>

  368.           <div class="actions-row"><button class="apply-btn" id="audio-apply" type="button">Apply / Save Audio Settings</button><button class="apply-btn secondary" id="audio-reset" type="button">Reset Draft</button></div>

  369.           <div class="section-note reset-hint">Live fields update immediately. Restart-tagged fields become effective after TX restart.</div>

  370.         </div>

  371.       </div>

  372.       <!-- Test Tones -->

  373.       <div class="card panel" data-panel-key="tones">

  374.         <div class="panel-head" data-panel><h2>Test Tones</h2><div class="meta">Diagnostic</div><span class="chevron">▼</span></div>

  375.         <div class="panel-body">

  376.           <div class="section-note">Tone settings apply live to the running generator path and are also written into config. No TX restart is required for the new tone values to take effect. Set amplitude to 0 to disable.</div>

  377.           <div class="ctrl-row">

  378.             <div class="ctrl-label-wrap"><span class="ctrl-label">Left (Hz)</span></div>

  379.             <div class="ctrl-input"><input type="range" min="0" max="20000" step="10" id="tone-l-slider"><input type="number" min="0" max="20000" step="10" id="tone-l-num"><span class="unit-label">Hz</span><span class="tag tag-live">live</span></div>

  380.           </div>

  381.           <div class="ctrl-row">

  382.             <div class="ctrl-label-wrap"><span class="ctrl-label">Right (Hz)</span></div>

  383.             <div class="ctrl-input"><input type="range" min="0" max="20000" step="10" id="tone-r-slider"><input type="number" min="0" max="20000" step="10" id="tone-r-num"><span class="unit-label">Hz</span><span class="tag tag-live">live</span></div>

  384.           </div>

  385.           <div class="ctrl-row">

  386.             <div class="ctrl-label-wrap"><span class="ctrl-label">Amplitude</span><span class="ctrl-sub">0 – 1.0</span></div>

  387.             <div class="ctrl-input"><input type="range" min="0" max="1" step="0.01" id="tone-amp-slider"><span class="val-display" id="tone-amp-val">--</span><span class="tag tag-live">live</span></div>

  388.           </div>

  389.           <div class="actions-row"><button class="apply-btn" id="tones-apply" type="button">Save Tone Config</button><button class="apply-btn secondary" id="tones-off" type="button">Disable Tones</button></div>

  390.         </div>

  391.       </div>

  392.     </div>

  393.     <div class="stack">

  394.       <!-- Switches -->

  395.       <div class="card panel" data-panel-key="switches">

  396.         <div class="panel-head" data-panel><div class="led on-green" style="width:6px;height:6px"></div><h2>Switches</h2><div class="meta">Live</div><span class="chevron">▼</span></div>

  397.         <div class="panel-body">

  398.           <div class="toggle-row">

  399.             <div class="toggle-copy"><div class="title">Stereo</div><div class="sub">19 kHz pilot + 38 kHz DSB-SC</div></div>

  400.             <div class="toggle-ctl"><div class="toggle" id="tog-stereo" data-toggle="stereoEnabled" role="switch" aria-checked="false" tabindex="0"></div><div class="toggle-state" id="stereo-label">--</div></div>

  401.           </div>

  402.           <div class="toggle-row">

  403.             <div class="toggle-copy"><div class="title">Stereo Mode</div><div class="sub">Subcarrier modulation</div></div>

  404.             <div class="toggle-ctl"><select id="sel-stereo-mode" style="font-size:13px;padding:4px 8px;border-radius:6px;border:1px solid var(--border);background:var(--bg-card);color:var(--fg)"><option value="DSB">DSB-SC (Standard)</option><option value="SSB">SSB-SC LSB</option><option value="VSB">VSB (Vestigial)</option></select></div>

  405.           </div>

  406.           <div class="toggle-row">

  407.             <div class="toggle-copy"><div class="title">Limiter</div><div class="sub">Stereo limiter stage only; hard clips remain active</div></div>

  408.             <div class="toggle-ctl"><div class="toggle" id="tog-limiter" data-toggle="limiterEnabled" role="switch" aria-checked="false" tabindex="0"></div><div class="toggle-state" id="limiter-label">--</div></div>

  409.           </div>

  410.         </div>

  411.       </div>

  412.       <!-- MPX Compliance -->

  413.       <div class="card panel" data-panel-key="compliance">

  414.         <div class="panel-head" data-panel><h2>MPX Compliance</h2><div class="meta" id="compliance-meta">BS.412</div><span class="chevron">▼</span></div>

  415.         <div class="panel-body">

  416.           <div class="section-note">ITU-R BS.412 limits total MPX power. Mandatory for licensed FM in EU/CH. Changes require TX restart.</div>

  417.           <div class="toggle-row">

  418.             <div class="toggle-copy"><div class="title">BS.412 Limiter</div><div class="sub">60 s rolling power window &nbsp;<span class="tag tag-restart">restart</span></div></div>

  419.             <div class="toggle-ctl"><div class="toggle" id="tog-bs412" data-toggle-cfg="bs412Enabled" role="switch" aria-checked="false" tabindex="0"></div><div class="toggle-state" id="bs412-label">--</div></div>

  420.           </div>

  421.           <div class="ctrl-row">

  422.             <div class="ctrl-label-wrap"><span class="ctrl-label">Threshold</span><span class="ctrl-sub">dBr — 0 = standard</span></div>

  423.             <div class="ctrl-input"><input type="range" min="-6" max="6" step="0.5" id="bs412-threshold-slider"><span class="val-display" id="bs412-threshold-val">--</span><span class="unit-label">dBr</span><span class="tag tag-restart">restart</span></div>

  424.           </div>

  425.           <div class="ctrl-row">

  426.             <div class="ctrl-label-wrap"><span class="ctrl-label">MPX Gain</span><span class="ctrl-sub">Hardware calibration</span></div>

  427.             <div class="ctrl-input"><input type="range" min="0.1" max="5.0" step="0.05" id="mpxgain-slider"><span class="val-display" id="mpxgain-val">--</span><span class="tag tag-restart">restart</span></div>

  428.           </div>

  429.           <div class="actions-row"><button class="apply-btn" id="compliance-apply" type="button">Save Compliance Settings</button><button class="apply-btn secondary" id="compliance-reset" type="button">Reset Draft</button></div>

  430.           <div class="section-note reset-hint">Compliance changes are persisted to config and require TX restart before they affect the modulation chain.</div>

  431.         </div>

  432.       </div>

  433.       <!-- Composite Clipper -->

  434.       <div class="card panel" data-panel-key="compclip">

  435.         <div class="panel-head" data-panel><h2>Composite Clipper</h2><div class="meta" id="compclip-meta">SM.1268</div><span class="chevron">▼</span></div>

  436.         <div class="panel-body">

  437.           <div class="section-note">ITU-R SM.1268 iterative composite clipper. Enable/disable is live. Iterations, knee, and look-ahead require TX restart.</div>

  438.           <div class="toggle-row">

  439.             <div class="toggle-copy"><div class="title">Composite Clipper</div><div class="sub">Iterative clip-filter-clip + look-ahead &nbsp;<span class="tag tag-live">live</span></div></div>

  440.             <div class="toggle-ctl"><div class="toggle" id="tog-compclip" data-toggle="compositeClipperEnabled" role="switch" aria-checked="false" tabindex="0"></div><div class="toggle-state" id="compclip-label">--</div></div>

  441.           </div>

  442.           <div class="ctrl-row">

  443.             <div class="ctrl-label-wrap"><span class="ctrl-label">Iterations</span><span class="ctrl-sub">clip-filter passes (1-5)</span></div>

  444.             <div class="ctrl-input"><input type="range" min="1" max="5" step="1" id="compclip-iter-slider"><span class="val-display" id="compclip-iter-val">--</span><span class="tag tag-restart">restart</span></div>

  445.           </div>

  446.           <div class="ctrl-row">

  447.             <div class="ctrl-label-wrap"><span class="ctrl-label">Soft Knee</span><span class="ctrl-sub">0 = hard clip, 0.3 = gentle</span></div>

  448.             <div class="ctrl-input"><input type="range" min="0" max="0.5" step="0.01" id="compclip-knee-slider"><span class="val-display" id="compclip-knee-val">--</span><span class="tag tag-restart">restart</span></div>

  449.           </div>

  450.           <div class="ctrl-row">

  451.             <div class="ctrl-label-wrap"><span class="ctrl-label">Look-ahead</span><span class="ctrl-sub">0 = off, 1.0 ms = typical</span></div>

  452.             <div class="ctrl-input"><input type="range" min="0" max="3" step="0.1" id="compclip-la-slider"><span class="val-display" id="compclip-la-val">--</span><span class="unit-label">ms</span><span class="tag tag-restart">restart</span></div>

  453.           </div>

  454.           <div class="actions-row"><button class="apply-btn" id="compclip-apply" type="button">Save Clipper Settings</button><button class="apply-btn secondary" id="compclip-reset" type="button">Reset Draft</button></div>

  455.           <div class="section-note reset-hint">Structural clipper changes (iterations, knee, look-ahead) are persisted to config and require TX restart.</div>

  456.         </div>

  457.       </div>

  458.       <!-- Danger -->

  459.       <div class="card panel" data-panel-key="danger">

  460.         <div class="panel-head" data-panel><h2>Danger Zone</h2><div class="meta">emergency</div><span class="chevron">▼</span></div>

  461.         <div class="panel-body">

  462.           <div class="actions-row" style="margin-top:0"><button class="danger-btn" id="danger-stop" type="button">Emergency Stop TX</button><button class="danger-btn" id="danger-reset-fault" type="button">Reset Fault</button></div>

  463.           <div class="section-note reset-hint" id="reset-hint">Reset Fault moves the runtime back to DEGRADED while the queue settles.</div>

  464.         </div>

  465.       </div>

  466.       <!-- Shortcuts -->

  467.       <div class="card panel" data-panel-key="shortcuts">

  468.         <div class="panel-head" data-panel><h2>Shortcuts</h2><div class="meta">keyboard</div><span class="chevron">▼</span></div>

  469.         <div class="panel-body">

  470.           <div class="shortcuts-grid">

  471.             <div><div class="shortcut-line"><span class="name">Start TX</span><span class="keys"><span class="kbd">t</span></span></div><div class="shortcut-line"><span class="name">Stop TX</span><span class="keys"><span class="kbd">T</span></span></div><div class="shortcut-line"><span class="name">Refresh</span><span class="keys"><span class="kbd">r</span></span></div></div>

  472.             <div><div class="shortcut-line"><span class="name">Next Preset</span><span class="keys"><span class="kbd">]</span></span></div><div class="shortcut-line"><span class="name">Prev Preset</span><span class="keys"><span class="kbd">[</span></span></div><div class="shortcut-line"><span class="name">Apply Draft</span><span class="keys"><span class="kbd">Enter</span></span></div></div>

  473.           </div>

  474.         </div>

  475.       </div>

  476.     </div>

  477.   </div>

  478. </section>

  479. <!-- RDS TAB -->

  480. <section class="tab-panel" data-tab-panel="rds">

  481.   <div class="tab-columns two">

  482.     <div class="stack">

  483.       <!-- Station Identity -->

  484.       <div class="card panel" data-panel-key="rds-identity">

  485.         <div class="panel-head" data-panel><div class="led on-amber" style="width:6px;height:6px"></div><h2>Station Identity</h2><div class="meta" id="rds-identity-meta">Restart required</div><span class="chevron">▼</span></div>

  486.         <div class="panel-body">

  487.           <div class="section-note">RDS enable applies live. PI and PTY are saved to config and take effect after the next TX restart.</div>

  488.           <div class="ctrl-row">

  489.             <div class="ctrl-label-wrap"><span class="ctrl-label">Enable RDS</span><span class="ctrl-sub">57 kHz subcarrier</span></div>

  490.             <div class="ctrl-input"><div class="toggle" id="tog-rds" data-toggle="rdsEnabled" role="switch" aria-checked="false" tabindex="0"></div><div class="toggle-state" id="rds-label">--</div><span class="tag tag-live" style="margin-left:4px">live</span></div>

  491.           </div>

  492.           <div class="ctrl-row">

  493.             <div class="ctrl-label-wrap"><span class="ctrl-label">PI Code</span><span class="ctrl-sub">Programme Identifier (hex)</span></div>

  494.             <div class="ctrl-input" style="flex-direction:column;align-items:flex-start;gap:6px">

  495.               <div style="display:flex;align-items:center;gap:10px;width:100%">

  496.                 <input type="text" id="rds-pi" maxlength="4" placeholder="1234" spellcheck="false" style="width:90px;font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:3px;text-transform:uppercase">

  497.                 <div class="pi-display" id="pi-display">0x----</div>

  498.                 <span class="tag tag-restart">restart</span>

  499.               </div>

  500.               <div class="field-error" id="pi-error"></div>

  501.             </div>

  502.           </div>

  503.           <div class="ctrl-row">

  504.             <div class="ctrl-label-wrap"><span class="ctrl-label">Programme Type</span><span class="ctrl-sub">PTY 0–31</span></div>

  505.             <div class="ctrl-input">

  506.               <select id="rds-pty" style="min-width:200px">

  507.                 <option value="0">0 — None</option><option value="1">1 — News</option><option value="2">2 — Current Affairs</option><option value="3">3 — Information</option><option value="4">4 — Sport</option><option value="5">5 — Education</option><option value="6">6 — Drama</option><option value="7">7 — Culture</option><option value="8">8 — Science</option><option value="9">9 — Varied</option><option value="10">10 — Pop Music</option><option value="11">11 — Rock Music</option><option value="12">12 — Easy Listening</option><option value="13">13 — Light Classical</option><option value="14">14 — Serious Classical</option><option value="15">15 — Other Music</option><option value="16">16 — Weather</option><option value="17">17 — Finance</option><option value="18">18 — Children's</option><option value="19">19 — Social Affairs</option><option value="20">20 — Religion</option><option value="21">21 — Phone-In</option><option value="22">22 — Travel</option><option value="23">23 — Leisure</option><option value="24">24 — Jazz Music</option><option value="25">25 — Country Music</option><option value="26">26 — National Music</option><option value="27">27 — Oldies Music</option><option value="28">28 — Folk Music</option><option value="29">29 — Documentary</option><option value="30">30 — Alarm Test</option><option value="31">31 — Alarm</option>

  508.               </select>

  509.               <span class="tag tag-restart">restart</span>

  510.             </div>

  511.           </div>

  512.           <div class="actions-row"><button class="apply-btn" id="rds-identity-apply" type="button">Save Identity</button><button class="apply-btn secondary" id="rds-identity-reset" type="button">Reset Draft</button></div>

  513.           <div class="section-note reset-hint">Identity settings persist immediately in config, but PI / PTY changes appear on-air only after TX restart.</div>

  514.         </div>

  515.       </div>

  516.       <!-- On-Air Text -->

  517.       <div class="card panel" data-panel-key="rds-text">

  518.         <div class="panel-head" data-panel><div class="led on-green" style="width:6px;height:6px"></div><h2>On-Air Text</h2><div class="meta" id="rds-text-meta">Saved + Runtime</div><span class="chevron">▼</span></div>

  519.         <div class="panel-body">

  520.           <div class="section-note">PS and RadioText apply at the next RDS group boundary (~88ms). Edits stay local until you apply, then update the live encoder and config snapshot together. When StreamTitle relay is enabled, the active on-air RadioText can temporarily differ from the saved config value shown in the editor.</div>

  521.           <div class="preset-row">

  522.             <button class="preset-btn rds" type="button" data-rds-ps="FMRTX" data-rds-rt="fm-rds-tx live">Station ID</button>

  523.             <button class="preset-btn rds" type="button" data-rds-ps="ONAIR" data-rds-rt="Now broadcasting">On Air</button>

  524.             <button class="preset-btn rds" type="button" data-rds-ps="LIVE" data-rds-rt="Live set in progress">Live Set</button>

  525.             <button class="preset-btn rds" type="button" data-rds-ps="TEST" data-rds-rt="RDS test transmission">Test</button>

  526.           </div>

  527.           <div class="rds-grid">

  528.             <div class="rds-field">

  529.               <div style="display:flex;align-items:center;justify-content:space-between"><span class="ctrl-label">Program Service (PS)</span><span class="tag tag-live">live</span></div>

  530.               <input type="text" class="rds-input" id="rds-ps" maxlength="8" placeholder="STATION" spellcheck="false">

  531.               <div class="rds-charcount"><span id="ps-count">0</span>/8</div>

  532.               <div class="field-error" id="ps-error"></div>

  533.             </div>

  534.             <div class="rds-field">

  535.               <div style="display:flex;align-items:center;justify-content:space-between"><span class="ctrl-label">RadioText (RT)</span><span class="tag tag-live">live</span></div>

  536.               <input type="text" class="rds-input rt" id="rds-rt" maxlength="64" placeholder="Now playing..." spellcheck="false">

  537.               <div class="rds-charcount"><span id="rt-count">0</span>/64</div>

  538.               <div class="field-error" id="rt-error"></div>

  539.             </div>

  540.           </div>

  541.           <div class="actions-row"><button class="apply-btn" id="rds-apply" type="button">Apply + Save RDS Text</button><button class="apply-btn secondary" id="rds-reset" type="button">Reset Draft</button></div>

  542.           <div class="section-note">Saved config: <span id="rds-saved-rt">--</span><br>Active on-air text: <span id="rds-active-rt-inline">--</span></div>

  543.         </div>

  544.       </div>

  545.       <!-- RDS Features -->

  546.       <div class="card panel" data-panel-key="rds-features">

  547.         <div class="panel-head" data-panel><div class="led on-amber" style="width:6px;height:6px"></div><h2>RDS Features</h2><div class="meta">Restart required</div><span class="chevron">▼</span></div>

  548.         <div class="panel-body">

  549.           <div class="section-note">Traffic, clock, RT+ and other RDS features. TP/TA apply live and are also saved to config; the remaining fields in this panel are saved to config and take effect after TX restart.</div>

  550.           <div class="ctrl-row">

  551.             <div class="ctrl-label-wrap"><span class="ctrl-label">Traffic Program (TP)</span><span class="ctrl-sub">Station carries traffic info</span></div>

  552.             <div class="ctrl-input"><input type="checkbox" id="rds-tp"><span class="tag tag-live">live</span><span class="tag tag-saved">saved</span></div>

  553.           </div>

  554.           <div class="ctrl-row">

  555.             <div class="ctrl-label-wrap"><span class="ctrl-label">Traffic Announcement (TA)</span><span class="ctrl-sub">Currently on air</span></div>

  556.             <div class="ctrl-input"><input type="checkbox" id="rds-ta"><span class="tag tag-live">live</span><span class="tag tag-saved">saved</span></div>

  557.           </div>

  558.           <div class="ctrl-row">

  559.             <div class="ctrl-label-wrap"><span class="ctrl-label">Music / Speech</span><span class="ctrl-sub">MS flag for receivers</span></div>

  560.             <div class="ctrl-input"><select id="rds-ms"><option value="true">Music</option><option value="false">Speech</option></select><span class="tag tag-restart">restart</span></div>

  561.           </div>

  562.           <div class="ctrl-row">

  563.             <div class="ctrl-label-wrap"><span class="ctrl-label">Clock-Time (CT)</span><span class="ctrl-sub">Group 4A, UTC, 1×/min</span></div>

  564.             <div class="ctrl-input"><input type="checkbox" id="rds-ct"><span class="tag tag-restart">restart</span></div>

  565.           </div>

  566.           <div class="ctrl-row">

  567.             <div class="ctrl-label-wrap"><span class="ctrl-label">RT+ Auto-Parse</span><span class="ctrl-sub">Artist/Title from RadioText</span></div>

  568.             <div class="ctrl-input"><input type="checkbox" id="rds-rtplus"><span class="tag tag-restart">restart</span></div>

  569.           </div>

  570.           <div class="ctrl-row">

  571.             <div class="ctrl-label-wrap"><span class="ctrl-label">RT+ Separator</span><span class="ctrl-sub">Split char(s) in RT</span></div>

  572.             <div class="ctrl-input"><input type="text" id="rds-rtplus-sep" maxlength="5" value=" - " style="width:60px;font-family:var(--mono);text-align:center"><span class="tag tag-restart">restart</span></div>

  573.           </div>

  574.           <div class="ctrl-row">

  575.             <div class="ctrl-label-wrap"><span class="ctrl-label">PTYN</span><span class="ctrl-sub">Custom type name, 8 chars</span></div>

  576.             <div class="ctrl-input"><input type="text" id="rds-ptyn" maxlength="8" placeholder="" style="width:100px;font-family:var(--mono);text-transform:uppercase;letter-spacing:1px"><span class="tag tag-restart">restart</span></div>

  577.           </div>

  578.           <div class="ctrl-row">

  579.             <div class="ctrl-label-wrap"><span class="ctrl-label">Long PS (LPS)</span><span class="ctrl-sub">UTF-8 station name, 32 bytes</span></div>

  580.             <div class="ctrl-input"><input type="text" id="rds-lps" maxlength="32" placeholder="My Radio Station" style="width:200px;font-family:var(--mono);font-size:12px"><span class="tag tag-restart">restart</span></div>

  581.           </div>

  582.           <div class="ctrl-row">

  583.             <div class="ctrl-label-wrap"><span class="ctrl-label">Alt. Frequencies</span><span class="ctrl-sub">Comma-separated MHz</span></div>

  584.             <div class="ctrl-input"><input type="text" id="rds-af" placeholder="93.3, 95.7" style="width:180px;font-family:var(--mono);font-size:12px"><span class="tag tag-restart">restart</span></div>

  585.           </div>

  586.           <div class="ctrl-row">

  587.             <div class="ctrl-label-wrap"><span class="ctrl-label">eRT (Enhanced RT)</span><span class="ctrl-sub">UTF-8, 128 bytes, ODA</span></div>

  588.             <div class="ctrl-input"><input type="checkbox" id="rds-ert-on"><span class="tag tag-restart">restart</span></div>

  589.           </div>

  590.           <div class="ctrl-row">

  591.             <div class="ctrl-label-wrap"><span class="ctrl-label">eRT Text</span><span class="ctrl-sub">UTF-8 multilingual text</span></div>

  592.             <div class="ctrl-input"><input type="text" id="rds-ert" maxlength="128" placeholder="Ràdio en català..." style="width:280px;font-family:var(--mono);font-size:12px"><span class="tag tag-restart">restart</span></div>

  593.           </div>

  594.           <div class="actions-row"><button class="apply-btn" id="rds-features-apply" type="button">Save Features</button><button class="apply-btn secondary" id="rds-features-reset" type="button">Reset Draft</button></div>

  595.         </div>

  596.       </div>

  597.       <!-- RDS2 -->

  598.       <div class="card panel" data-panel-key="rds2">

  599.         <div class="panel-head" data-panel><div class="led on-amber" style="width:6px;height:6px"></div><h2>RDS2 (Streams 1-3)</h2><div class="meta">Restart required</div><span class="chevron">▼</span></div>

  600.         <div class="panel-body">

  601.           <div class="section-note">Three additional BPSK subcarriers at 66.5, 71.25, 76 kHz (IEC 62106-1:2018). Station logo via RFT file transfer. Requires RDS2-capable receivers.</div>

  602.           <div class="ctrl-row">

  603.             <div class="ctrl-label-wrap"><span class="ctrl-label">RDS2 Enable</span><span class="ctrl-sub">Activate streams 1-3</span></div>

  604.             <div class="ctrl-input"><input type="checkbox" id="rds2-on"><span class="tag tag-restart">restart</span></div>

  605.           </div>

  606.           <div class="ctrl-row">

  607.             <div class="ctrl-label-wrap"><span class="ctrl-label">Station Logo</span><span class="ctrl-sub">PNG/JPEG path on server</span></div>

  608.             <div class="ctrl-input"><input type="text" id="rds2-logo" placeholder="/path/to/logo.png" style="width:250px;font-family:var(--mono);font-size:12px"><span class="tag tag-restart">restart</span></div>

  609.           </div>

  610.           <div class="actions-row"><button class="apply-btn" id="rds2-apply" type="button">Save RDS2</button><button class="apply-btn secondary" id="rds2-reset" type="button">Reset Draft</button></div>

  611.         </div>

  612.       </div>

  613.     </div>

  614.     <div class="stack">

  615.       <!-- Injection Levels -->

  616.       <div class="card panel" data-panel-key="rds-levels">

  617.         <div class="panel-head" data-panel><div class="led on-green" style="width:6px;height:6px"></div><h2>Injection Levels</h2><div class="meta">Live + Saved</div><span class="chevron">▼</span></div>

  618.         <div class="panel-body">

  619.           <div class="section-note">Fixed percentages of ±75 kHz deviation. ITU standard: pilot 9%, RDS 4%. When TX is running, changes hot-apply; they are also written back into config.</div>

  620.           <div class="ctrl-row">

  621.             <div class="ctrl-label-wrap"><span class="ctrl-label">Pilot Level</span><span class="ctrl-sub">19 kHz, 0–20%</span></div>

  622.             <div class="ctrl-input"><input type="range" min="0" max="0.2" step="0.001" id="pilot-slider"><span class="val-display" id="pilot-val">--</span><span class="unit-label">%dev</span><span class="tag tag-live">live</span></div>

  623.           </div>

  624.           <div class="ctrl-row">

  625.             <div class="ctrl-label-wrap"><span class="ctrl-label">RDS Injection</span><span class="ctrl-sub">57 kHz, 0–15%</span></div>

  626.             <div class="ctrl-input"><input type="range" min="0" max="0.15" step="0.001" id="rdsinj-slider"><span class="val-display" id="rdsinj-val">--</span><span class="unit-label">%dev</span><span class="tag tag-live">live</span></div>

  627.           </div>

  628.           <div class="actions-row"><button class="apply-btn" id="rds-levels-apply" type="button">Apply + Save Levels</button><button class="apply-btn secondary" id="rds-levels-reset" type="button">Reset Draft</button></div>

  629.         </div>

  630.       </div>

  631.       <!-- RDS Status -->

  632.       <div class="card sidebar-card">

  633.         <div class="sidebar-section">

  634.           <div class="sidebar-title">RDS Runtime</div>

  635.           <div class="kv">

  636.             <div class="k">Enabled</div><div class="v" id="rds-stat-enabled">--</div>

  637.             <div class="k">PI Code</div><div class="v" id="rds-stat-pi" style="font-family:var(--mono);font-weight:700">--</div>

  638.             <div class="k">PTY</div><div class="v" id="rds-stat-pty">--</div>

  639.             <div class="k">PS</div><div class="v" id="rds-stat-ps" style="font-family:var(--mono);font-weight:700;letter-spacing:1px">--</div>

  640.             <div class="k">Active RadioText</div><div class="v" id="rds-stat-rt">--</div>

  641.             <div class="k">Saved RadioText</div><div class="v" id="rds-stat-rt-saved">--</div>

  642.             <div class="k">Pilot</div><div class="v" id="rds-stat-pilot">--</div>

  643.             <div class="k">RDS Inj.</div><div class="v" id="rds-stat-inj">--</div>

  644.           </div>

  645.         </div>

  646.       </div>

  647.     </div>

  648.   </div>

  649. </section>

  650. 

  651. <!-- INGEST TAB -->

  652. <section class="tab-panel" data-tab-panel="ingest">

  653.   <div class="tab-columns one"><div class="stack">

  654.     <div class="card sidebar-card">

  655.       <div class="sidebar-section">

  656.         <div class="sidebar-title">Active Ingest Summary</div>

  657.         <div class="section-note">Runtime snapshot. Deep metrics in Diagnostics.</div>

  658.         <div class="kv">

  659.           <div class="k">State</div><div class="v" id="ingest-summary-state">--</div>

  660.           <div class="k">Source</div><div class="v" id="ingest-summary-source">--</div>

  661.           <div class="k">Signal</div><div class="v" id="ingest-summary-signal">--</div>

  662.           <div class="k">Detail</div><div class="v" id="ingest-summary-detail">--</div>

  663.           <div class="k">Origin</div><div class="v" id="ingest-summary-origin">--</div>

  664.           <div class="k">Last Chunk</div><div class="v" id="ingest-summary-last">--</div>

  665.         </div>

  666.       </div>

  667.     </div>

  668.     <div class="card panel" data-panel-key="ingest">

  669.       <div class="panel-head" data-panel><div class="led on-blue" style="width:6px;height:6px"></div><h2>Ingest Config</h2><div class="meta" id="ingest-meta">Saved + Hard Reload</div><span class="chevron">▼</span></div>

  670.       <div class="panel-body">

  671.         <div class="section-note">Changes are saved to the config file and take effect only after a hard reload of the service.</div>

  672.         <div class="ingest-grid">

  673.           <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">Kind</span></div><div class="ctrl-input"><select id="ing-kind" data-ingest-path="kind"><option value="none">none</option><option value="icecast">icecast</option><option value="srt">srt</option><option value="aes67">aes67</option><option value="stdin">stdin</option><option value="http-raw">http-raw</option></select></div></div>

  674.           <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">Prebuffer</span><span class="ctrl-sub">ms</span></div><div class="ctrl-input"><input type="number" id="ing-prebuffer" data-ingest-path="prebufferMs"></div></div>

  675.           <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">Reconnect</span></div><div class="ctrl-input"><label><input type="checkbox" id="ing-reconnect-enabled" data-ingest-path="reconnect.enabled"> Enabled</label></div></div>

  676.           <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">Backoff Initial</span><span class="ctrl-sub">ms</span></div><div class="ctrl-input"><input type="number" id="ing-reconnect-initial" data-ingest-path="reconnect.initialBackoffMs"></div></div>

  677.           <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">Backoff Max</span><span class="ctrl-sub">ms</span></div><div class="ctrl-input"><input type="number" id="ing-reconnect-max" data-ingest-path="reconnect.maxBackoffMs"></div></div>

  678.         </div>

  679.         <div class="ingest-group" id="ing-group-icecast">

  680.           <div class="ingest-group-title">Icecast</div>

  681.           <div class="ingest-grid">

  682.             <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">URL</span></div><div class="ctrl-input"><input type="text" id="ing-icecast-url" data-ingest-path="icecast.url" spellcheck="false"></div></div>

  683.             <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">Decoder</span></div><div class="ctrl-input"><select id="ing-icecast-decoder" data-ingest-path="icecast.decoder"><option value="auto">auto</option><option value="native">native</option><option value="ffmpeg">ffmpeg</option></select></div></div>

  684.             <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">RT Relay</span></div><div class="ctrl-input"><label><input type="checkbox" id="ing-icecast-rt-enabled" data-ingest-path="icecast.radioText.enabled"> Enabled</label></div></div>

  685.             <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">RT Prefix</span></div><div class="ctrl-input"><input type="text" id="ing-icecast-rt-prefix" data-ingest-path="icecast.radioText.prefix"></div></div>

  686.             <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">RT MaxLen</span></div><div class="ctrl-input"><input type="number" id="ing-icecast-rt-maxlen" data-ingest-path="icecast.radioText.maxLen"></div></div>

  687.             <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">Only On Change</span></div><div class="ctrl-input"><label><input type="checkbox" id="ing-icecast-rt-only-change" data-ingest-path="icecast.radioText.onlyOnChange"> Enabled</label></div></div>

  688.           </div>

  689.         </div>

  690.         <div class="ingest-group" id="ing-group-srt">

  691.           <div class="ingest-group-title">SRT</div>

  692.           <div class="ingest-grid">

  693.             <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">URL</span></div><div class="ctrl-input"><input type="text" id="ing-srt-url" data-ingest-path="srt.url" spellcheck="false"></div></div>

  694.             <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">Mode</span></div><div class="ctrl-input"><select id="ing-srt-mode" data-ingest-path="srt.mode"><option value="listener">listener</option><option value="caller">caller</option><option value="rendezvous">rendezvous</option></select></div></div>

  695.             <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">Sample Rate</span></div><div class="ctrl-input"><input type="number" id="ing-srt-rate" data-ingest-path="srt.sampleRateHz"></div></div>

  696.             <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">Channels</span></div><div class="ctrl-input"><input type="number" id="ing-srt-channels" data-ingest-path="srt.channels"></div></div>

  697.           </div>

  698.         </div>

  699.         <div class="ingest-group" id="ing-group-aes67">

  700.           <div class="ingest-group-title">AES67</div>

  701.           <div class="ingest-grid">

  702.             <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">Multicast Group</span></div><div class="ctrl-input"><input type="text" id="ing-aes67-group" data-ingest-path="aes67.multicastGroup" spellcheck="false"></div></div>

  703.             <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">Port</span></div><div class="ctrl-input"><input type="number" id="ing-aes67-port" data-ingest-path="aes67.port"></div></div>

  704.             <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">SDP Path</span></div><div class="ctrl-input"><input type="text" id="ing-aes67-sdppath" data-ingest-path="aes67.sdpPath" spellcheck="false"></div></div>

  705.             <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">Sample Rate</span></div><div class="ctrl-input"><input type="number" id="ing-aes67-rate" data-ingest-path="aes67.sampleRateHz"></div></div>

  706.             <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">Channels</span></div><div class="ctrl-input"><input type="number" id="ing-aes67-channels" data-ingest-path="aes67.channels"></div></div>

  707.             <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">Encoding</span></div><div class="ctrl-input"><input type="text" id="ing-aes67-encoding" data-ingest-path="aes67.encoding"></div></div>

  708.             <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">Jitter Depth</span></div><div class="ctrl-input"><input type="number" id="ing-aes67-jitter" data-ingest-path="aes67.jitterDepthPackets"></div></div>

  709.             <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">Discovery</span></div><div class="ctrl-input"><label><input type="checkbox" id="ing-aes67-discovery-enabled" data-ingest-path="aes67.discovery.enabled"> Enabled</label></div></div>

  710.             <div class="ctrl-row"><div class="ctrl-label-wrap"><span class="ctrl-label">Stream Name</span></div><div class="ctrl-input"><input type="text" id="ing-aes67-discovery-name" data-ingest-path="aes67.discovery.streamName"></div></div>

  711.           </div>

  712.         </div>

  713.         <div class="field-error" id="ingest-error"></div>

  714.         <div class="actions-row"><button class="apply-btn" id="ingest-save-reload" type="button">Save + Hard Reload Service</button><button class="apply-btn secondary" id="ingest-reset" type="button">Reset Draft</button></div>

  715.         <div class="section-note reset-hint">Ingest changes are not hot-applied. Saving writes config and schedules a hard service reload.</div>

  716.       </div>

  717.     </div>

  718.   </div></div>

  719. </section>

  720. 

  721. <!-- DIAGNOSTICS TAB -->

  722. <section class="tab-panel" data-tab-panel="diagnostics">

  723.   <div class="tab-columns two">

  724.     <div class="stack">

  725.       <div class="card sidebar-card">

  726.         <div class="sidebar-section">

  727.           <div class="sidebar-title">Health</div>

  728.           <div class="health-line"><div class="name">HTTP</div><div class="val" id="health-http">--</div></div>

  729.           <div class="health-line"><div class="name">Runtime State</div><div class="val" id="health-runtime">--</div></div>

  730.           <div class="health-line"><div class="name">State Age</div><div class="val" id="health-state-age">--</div></div>

  731.           <div class="health-line"><div class="name">Runtime Signal</div><div class="val" id="health-indicator">--</div></div>

  732.           <div class="health-line"><div class="name">Runtime Alert</div><div class="val" id="health-alert">--</div></div>

  733.           <div class="health-line"><div class="name">Transitions D/M/F</div><div class="val" id="health-transitions">--</div></div>

  734.           <div class="health-line"><div class="name">Fault Count</div><div class="val" id="health-fault-count">--</div></div>

  735.           <div class="health-line"><div class="name">Last Fault</div><div class="val" id="health-last-fault">--</div></div>

  736.           <div class="health-line"><div class="name">Audio Buffer</div><div class="val" id="health-audio">--</div></div>

  737.           <div class="health-line"><div class="name">Buffer Duration</div><div class="val" id="health-buffer-duration">--</div></div>

  738.           <div class="health-line"><div class="name">High Watermark</div><div class="val" id="health-buffer-highwater">--</div></div>

  739.           <div class="health-line"><div class="name">Queue Fill</div><div class="val" id="health-queue-fill">--</div></div>

  740.           <div class="health-line"><div class="name">Underrun Streak</div><div class="val" id="health-underrun-streak">--</div></div>

  741.           <div class="health-line"><div class="name">Last Update</div><div class="val" id="health-last">--</div></div>

  742.           <div class="health-trend"><div class="health-trend-label">High Watermark Trend</div><svg class="spark warn" id="spark-high-watermark" viewBox="0 0 160 34" preserveAspectRatio="none"></svg></div>

  743.           <div class="health-trend"><div class="health-trend-label">Queue Fill Trend</div><svg class="spark good" id="spark-queue-fill" viewBox="0 0 160 34" preserveAspectRatio="none"></svg></div>

  744.         </div>

  745.       </div>

  746.       <div class="card sidebar-card">

  747.         <div class="sidebar-section">

  748.           <div class="sidebar-title">Control Audit</div>

  749.           <div class="section-note">4xx reject counts from the control API.</div>

  750.           <div class="audit-row"><span class="audit-name">Total rejects</span><span class="audit-val" id="audit-total">--</span></div>

  751.           <div class="audit-row"><span class="audit-name">405 Method Not Allowed</span><span class="audit-val" id="audit-methodNotAllowed">--</span></div>

  752.           <div class="audit-row"><span class="audit-name">415 Unsupported Media</span><span class="audit-val" id="audit-unsupportedMediaType">--</span></div>

  753.           <div class="audit-row"><span class="audit-name">413 Body Too Large</span><span class="audit-val" id="audit-bodyTooLarge">--</span></div>

  754.           <div class="audit-row"><span class="audit-name">400 Unexpected Body</span><span class="audit-val" id="audit-unexpectedBody">--</span></div>

  755.         </div>

  756.       </div>

  757.     </div>

  758.     <div class="stack">

  759.       <div class="card panel" data-panel-key="transition-history">

  760.         <div class="panel-head" data-panel><h2>Transition History</h2><div class="meta">state shifts</div><span class="chevron">▼</span></div>

  761.         <div class="panel-body"><div class="transition-history" id="transition-history"><div class="transition-history-empty">No state transitions recorded yet.</div></div></div>

  762.       </div>

  763.       <div class="card panel" data-panel-key="fault-history">

  764.         <div class="panel-head" data-panel><h2>Fault History</h2><div class="meta">recent faults</div><span class="chevron">▼</span></div>

  765.         <div class="panel-body"><div class="fault-history" id="fault-history"><div class="fault-history-empty">No faults recorded yet.</div></div></div>

  766.       </div>

  767.     </div>

  768.   </div>

  769. </section>

  770. 

  771. <!-- ACTIVITY TAB -->

  772. <section class="tab-panel" data-tab-panel="activity">

  773.   <div class="tab-columns one"><div class="stack">

  774.     <div class="card panel" data-panel-key="log">

  775.       <div class="panel-head" data-panel><h2>Activity Log</h2><div class="meta" id="log-meta">recent events</div><span class="chevron">▼</span></div>

  776.       <div class="panel-body">

  777.         <div class="actions-row" style="margin-top:0;margin-bottom:12px"><button class="ghost-btn" id="btn-clear-log" type="button">Clear Log</button></div>

  778.         <div class="log" id="log"><div class="empty-log">No activity recorded yet.</div></div>

  779.       </div>

  780.     </div>

  781.   </div></div>

  782. </section>

  783. </div><!-- /tab-panels -->

  784. </div><!-- /app -->

  785. <div class="toast" id="toast"></div>

  786. <script>

  787. 'use strict';

  788. const $=id=>document.getElementById(id);

  789. const RUNTIME_MS=1000,CONFIG_MS=8000,SPARK_LIMIT=40,TRANS_LIMIT=6;

  790. const FREQ_PRESETS=[87.6,94.5,99.5,100.0,107.9];

  791. const PTY_NAMES=['None','News','Current Affairs','Information','Sport','Education','Drama','Culture','Science','Varied','Pop Music','Rock Music','Easy Listening','Light Classical','Serious Classical','Other Music','Weather','Finance',"Children's",'Social Affairs','Religion','Phone-In','Travel','Leisure','Jazz Music','Country Music','National Music','Oldies Music','Folk Music','Documentary','Alarm Test','Alarm'];

  792. const mobileMq=window.matchMedia('(max-width:640px)');

  793. let toastTimer=null;

  794. 

  795. const S={

  796.   server:{config:null,runtime:null,configOk:false,runtimeOk:false,lastConfigAt:0,lastRuntimeAt:0},

  797.   lastRTState:'',draft:{},errors:{},dirty:new Set(),

  798.   pending:0,txBusy:false,faultBusy:false,toggleBusy:{},

  799.   cfgDraft:{},cfgDirty:{},cfgErrors:{},

  800.   ingestDraft:null,ingestDirty:false,ingestSaving:false,ingestError:'',

  801.   pollersStarted:false,mobilePanelsApplied:false,freqPresetIndex:0,

  802.   charts:{audio:[],underruns:[],tx:[],hw:[],qf:[]},

  803.   transitions:[],

  804. };

  805. 

  806. // ── Field definitions ──────────────────────────────────────────────────────

  807. const FIELDS={

  808.   frequencyMHz:{section:'freq',eq:(a,b)=>nearEq(a,b,1e-4)},

  809.   ps:{section:'rds',eq:(a,b)=>String(a??'')===String(b??'')},

  810.   radioText:{section:'rds',eq:(a,b)=>String(a??'')===String(b??'')},

  811. };

  812. // CFG_FIELDS: fields that go through /config PATCH but aren't in the main draft system

  813. const CFG={

  814.   outputDrive:   {sec:'audio',    live:true, path:'fm.outputDrive',      min:0,   max:10,   step:.05},

  815.   limiterCeiling:{sec:'audio',    live:true, path:'fm.limiterCeiling',   min:.5,  max:2,    step:.05},

  816.   preEmphasisTauUS:{sec:'audio',  live:false,path:'fm.preEmphasisTauUS'},

  817.   audioGain:     {sec:'audio',    live:false,path:'audio.gain',          min:0,   max:4,    step:.05},

  818.   pilotLevel:    {sec:'rds-lvl',  live:true, path:'fm.pilotLevel',       min:0,   max:.2,   step:.001},

  819.   rdsInjection:  {sec:'rds-lvl',  live:true, path:'fm.rdsInjection',     min:0,   max:.15,  step:.001},

  820.   pi:            {sec:'rds-id',   live:false,path:'rds.pi'},

  821.   pty:           {sec:'rds-id',   live:false,path:'rds.pty'},

  822.   rdsTP:         {sec:'rds-feat', live:false,path:'rds.tp'},

  823.   rdsTA:         {sec:'rds-feat', live:false,path:'rds.ta'},

  824.   rdsMS:         {sec:'rds-feat', live:false,path:'rds.ms'},

  825.   rdsCT:         {sec:'rds-feat', live:false,path:'rds.ctEnabled'},

  826.   rdsRTPlus:     {sec:'rds-feat', live:false,path:'rds.rtPlusEnabled'},

  827.   rdsRTPlusSep:  {sec:'rds-feat', live:false,path:'rds.rtPlusSeparator'},

  828.   rdsPTYN:       {sec:'rds-feat', live:false,path:'rds.ptyn'},

  829.   rdsLPS:        {sec:'rds-feat', live:false,path:'rds.lps'},

  830.   rdsERT:        {sec:'rds-feat', live:false,path:'rds.ert'},

  831.   rdsERTEnabled: {sec:'rds-feat', live:false,path:'rds.ertEnabled'},

  832.   rdsRDS2Enabled:{sec:'rds2',     live:false,path:'rds.rds2Enabled'},

  833.   rdsLogoPath:   {sec:'rds2',     live:false,path:'rds.stationLogoPath'},

  834.   rdsAF:         {sec:'rds-feat', live:false,path:'rds.af'},

  835.   bs412Enabled:  {sec:'compliance',live:false,path:'fm.bs412Enabled'},

  836.   bs412ThresholdDBr:{sec:'compliance',live:false,path:'fm.bs412ThresholdDBr',min:-6,max:6,step:.5},

  837.   mpxGain:       {sec:'compliance',live:false,path:'fm.mpxGain',         min:.1,  max:5,    step:.05},

  838.   toneLeftHz:    {sec:'tones',    live:true, path:'audio.toneLeftHz',    min:0,   max:20000,step:10},

  839.   toneRightHz:   {sec:'tones',    live:true, path:'audio.toneRightHz',   min:0,   max:20000,step:10},

  840.   toneAmplitude: {sec:'tones',    live:true, path:'audio.toneAmplitude', min:0,   max:1,    step:.01},

  841.   compositeClipperEnabled:    {sec:'compclip',live:true, path:'fm.compositeClipper.enabled'},

  842.   compositeClipperIterations: {sec:'compclip',live:false,path:'fm.compositeClipper.iterations',min:1,max:5,step:1},

  843.   compositeClipperSoftKnee:   {sec:'compclip',live:false,path:'fm.compositeClipper.softKnee',min:0,max:.5,step:.01},

  844.   compositeClipperLookaheadMs:{sec:'compclip',live:false,path:'fm.compositeClipper.lookaheadMs',min:0,max:3,step:.1},

  845. };

  846. const CFG_PATCH_KEY={outputDrive:'outputDrive',limiterCeiling:'limiterCeiling',preEmphasisTauUS:'preEmphasisTauUS',audioGain:'audioGain',pilotLevel:'pilotLevel',rdsInjection:'rdsInjection',pi:'pi',pty:'pty',rdsTP:'tp',rdsTA:'ta',rdsMS:'ms',rdsCT:'ctEnabled',rdsRTPlus:'rtPlusEnabled',rdsRTPlusSep:'rtPlusSeparator',rdsPTYN:'ptyn',rdsLPS:'lps',rdsERT:'ert',rdsERTEnabled:'ertEnabled',rdsRDS2Enabled:'rds2Enabled',rdsLogoPath:'stationLogoPath',rdsAF:'af',bs412Enabled:'bs412Enabled',bs412ThresholdDBr:'bs412ThresholdDBr',mpxGain:'mpxGain',toneLeftHz:'toneLeftHz',toneRightHz:'toneRightHz',toneAmplitude:'toneAmplitude',compositeClipperEnabled:'compositeClipperEnabled',compositeClipperIterations:'compositeClipperIterations',compositeClipperSoftKnee:'compositeClipperSoftKnee',compositeClipperLookaheadMs:'compositeClipperLookaheadMs'};

  847. 

  848. // ── Helpers ────────────────────────────────────────────────────────────────

  849. function nearEq(a,b,e=1e-9){if(a==null&&b==null)return true;if(a==null||b==null)return false;return Math.abs(Number(a)-Number(b))<=e;}

  850. function clone(o){return JSON.parse(JSON.stringify(o??{}));}

  851. function gp(o,path){const ps=String(path||'').split('.');let c=o;for(const p of ps){if(!p)continue;if(c==null||typeof c!=='object')return undefined;c=c[p];}return c;}

  852. function sp(o,path,v){const ps=String(path||'').split('.');let c=o;for(let i=0;i<ps.length;i++){const p=ps[i];if(!p)continue;if(i===ps.length-1){c[p]=v;return;}if(!c[p]||typeof c[p]!=='object')c[p]={};c=c[p];}}

  853. 

  854. function srvVal(key){const cfg=S.server.config||{};switch(key){case 'frequencyMHz':return cfg.fm?.frequencyMHz;case 'ps':return cfg.rds?.ps??'';case 'radioText':return cfg.rds?.radioText??'';case 'stereoEnabled':return cfg.fm?.stereoEnabled;case 'stereoMode':return cfg.fm?.stereoMode??'DSB';case 'rdsEnabled':return cfg.rds?.enabled;case 'limiterEnabled':return cfg.fm?.limiterEnabled;case 'compositeClipperEnabled':return cfg.fm?.compositeClipper?.enabled;}return undefined;}

  855. function cfgSrvVal(key){const cfg=S.server.config||{};const f=CFG[key];return f?gp(cfg,f.path):undefined;}

  856. function effVal(key){return S.dirty.has(key)?S.draft[key]:srvVal(key);}

  857. function cfgEff(key){return S.cfgDraft[key]!==undefined?S.cfgDraft[key]:cfgSrvVal(key);}

  858. 

  859. function cfgEq(key,a,b){if(key==='pi')return String(a??'').trim().toUpperCase()===String(b??'').trim().toUpperCase();if(key==='pty'||key==='bs412Enabled'||key==='compositeClipperEnabled'||key==='compositeClipperIterations')return a===b;return nearEq(a,b,1e-5);}

  860. function cfgSetDirty(key,val){

  861.   const f=CFG[key];if(!f)return;

  862.   S.cfgDraft[key]=val;

  863.   S.cfgDirty[f.sec]=Object.keys(CFG).filter(k=>CFG[k].sec===f.sec).some(k=>!cfgEq(k,S.cfgDraft[k]??cfgSrvVal(k),cfgSrvVal(k)));

  864.   render();

  865. }

  866. function cfgClear(sec){Object.keys(CFG).filter(k=>CFG[k].sec===sec).forEach(k=>delete S.cfgDraft[k]);S.cfgDirty[sec]=false;if(sec==='rds-id'&&S.cfgErrors)delete S.cfgErrors.pi;render();}

  867. function cfgPatch(sec){const p={};Object.keys(CFG).filter(k=>CFG[k].sec===sec).forEach(k=>{const v=S.cfgDraft[k];if(v!==undefined&&!cfgEq(k,v,cfgSrvVal(k)))p[CFG_PATCH_KEY[k]]=v;});return p;}

  868. function cfgHasRestart(sec){return Object.keys(CFG).filter(k=>CFG[k].sec===sec&&!CFG[k].live).some(k=>S.cfgDraft[k]!==undefined);}

  869. 

  870. function validate(key,val){switch(key){case 'frequencyMHz':{const n=Number(val);if(isNaN(n))return 'Enter a valid number.';if(n<65||n>110)return 'Must be 65–110 MHz.';return'';}case 'ps':return String(val??'').length>8?'Max 8 characters.':'';case 'radioText':return String(val??'').length>64?'Max 64 characters.':'';case 'pi':{const v=String(val??'').trim();return /^[0-9A-Fa-f]{4}$/.test(v)?'':'4 hex digits (e.g. 1234).';}default:return'';}}

  871. 

  872. function setDirty(key,val){S.draft[key]=val;S.errors[key]=validate(key,val);const sv=srvVal(key);const eq=!S.errors[key]&&FIELDS[key].eq(val,sv);if(eq){S.dirty.delete(key);delete S.draft[key];}else S.dirty.add(key);if(key==='frequencyMHz'&&typeof val==='number')syncFreqPresetIdx(val);render();}

  873. function clearDirty(keys){keys.forEach(k=>{S.dirty.delete(k);delete S.draft[k];S.errors[k]='';});render();}

  874. function secDirty(sec){for(const k of S.dirty){if(FIELDS[k]?.section===sec)return true;}return false;}

  875. function secErrors(sec){return Object.entries(FIELDS).some(([k,m])=>m.section===sec&&S.errors[k]);}

  876. function secPatch(sec){const p={};for(const k of S.dirty){if(FIELDS[k]?.section===sec&&!S.errors[k])p[k]=S.draft[k];}return p;}

  877. 

  878. // ── Ingest draft ───────────────────────────────────────────────────────────

  879. function ingFromSrv(){return S.server.config?.ingest||{};}

  880. function syncIngDraft(force=false){if(!S.server.config)return;if(!S.ingestDraft||force||!S.ingestDirty){S.ingestDraft=clone(ingFromSrv());S.ingestError='';}S.ingestDirty=JSON.stringify(S.ingestDraft)!==JSON.stringify(ingFromSrv());}

  881. function ingVal(path){return gp(S.ingestDraft||{},path);}

  882. function setIngField(path,val){if(!S.ingestDraft)S.ingestDraft=clone(ingFromSrv());sp(S.ingestDraft,path,val);S.ingestDirty=JSON.stringify(S.ingestDraft)!==JSON.stringify(ingFromSrv());S.ingestError='';render();}

  883. 

  884. // ── API ────────────────────────────────────────────────────────────────────

  885. async function api(path,opts){const r=await fetch(path,opts);const t=await r.text();if(!r.ok)throw new Error(t.trim()||`HTTP ${r.status}`);if(!t)return{};try{return JSON.parse(t);}catch{return{ok:true};}}

  886. function setConn(ok,label){const led=$('led-conn'),lbl=$('conn-label');led.className='led '+(ok?S.pending>0?'on-amber':'on-green':'on-red');lbl.textContent=ok?S.pending>0?'busy':label||'connected':label||'offline';}

  887. async function loadConfig({silent=false}={}){try{const cfg=await api('/config');S.server.config=cfg;S.server.configOk=true;S.server.lastConfigAt=Date.now();syncIngDraft();syncCfgFromServer();syncFreqPresetIdx(cfg.fm?.frequencyMHz);setConn(true);render();if(!silent)log('Config synchronized','info');return cfg;}catch(e){S.server.configOk=false;if(!S.server.runtimeOk)setConn(false);render();if(!silent)log('Config load failed: '+e.message,'err');throw e;}}

  888. async function loadRuntime({silent=true}={}){try{const rt=await api('/runtime');S.server.runtime=rt;S.server.runtimeOk=true;S.server.lastRuntimeAt=Date.now();const synced=syncTransitions(rt.engine);notifyTransition(rt.engine,!synced);pushHistory(rt);setConn(true);render();return rt;}catch(e){S.server.runtimeOk=false;if(!S.server.configOk)setConn(false);render();if(!silent)log('Runtime load failed: '+e.message,'err');throw e;}}

  889. function syncCfgFromServer(){Object.keys(CFG).forEach(k=>{if(S.cfgDraft[k]===undefined)S.cfgDraft[k]=cfgSrvVal(k);});Object.keys(S.cfgDirty).forEach(s=>{S.cfgDirty[s]=Object.keys(CFG).filter(k=>CFG[k].sec===s).some(k=>S.cfgDraft[k]!==undefined&&!cfgEq(k,S.cfgDraft[k],cfgSrvVal(k)));});}

  890. 

  891. // ── History ────────────────────────────────────────────────────────────────

  892. function pushChart(arr,v){arr.push(isFinite(v)?v:0);if(arr.length>SPARK_LIMIT)arr.splice(0,arr.length-SPARK_LIMIT);}

  893. function pushHistory(rt){const eng=rt.engine||{},drv=rt.driver||{},aud=rt.audioStream||{};pushChart(S.charts.audio,typeof aud.buffered==='number'?aud.buffered:0);pushChart(S.charts.hw,Number(aud.highWatermarkDurationSeconds)||0);pushChart(S.charts.qf,Number(eng.queue?.fillLevel??0));pushChart(S.charts.underruns,Number(eng.underruns??drv.underruns??0));pushChart(S.charts.tx,normState(eng.state)==='running'?1:S.txBusy?.55:.05);}

  894. function syncTransitions(eng){const es=Array.isArray(eng?.transitionHistory)?eng.transitionHistory:null;if(!es)return false;S.transitions=es.slice(Math.max(0,es.length-TRANS_LIMIT)).map(e=>({from:normState(e?.from),to:normState(e?.to),sev:String(e?.severity||'info').toLowerCase(),time:parseTs(e?.time)})).reverse();renderTransitions();return true;}

  895. function notifyTransition(eng,push=true){if(!eng)return;const next=normState(eng.state),prev=S.lastRTState;S.lastRTState=next;if(!prev||prev===next)return;const sev=stateSev(next);if(push){S.transitions.unshift({from:prev,to:next,sev,time:Date.now()});if(S.transitions.length>TRANS_LIMIT)S.transitions.pop();renderTransitions();}toast(`${prev.toUpperCase()} → ${next.toUpperCase()}`,sev==='err'?'err':sev==='warn'?'warn':'info');log(`Runtime ${prev.toUpperCase()} → ${next.toUpperCase()}`,sev==='err'?'err':sev==='warn'?'warn':'ok');}

  896. function renderTransitions(){const c=$('transition-history');if(!c)return;if(!S.transitions.length){c.innerHTML='<div class="transition-history-empty">No state transitions recorded yet.</div>';return;}c.innerHTML=S.transitions.map(e=>{const t=e.time?new Date(e.time):null,tl=t&&!isNaN(t)?t.toLocaleTimeString():'--';const cls=e.sev==='err'?'err':e.sev==='warn'?'warn':e.sev==='ok'?'good':'info';return`<div class="transition-history-entry ${cls}"><span class="transition-history-time">${tl}</span><span class="transition-history-desc">${e.from.toUpperCase()} → ${e.to.toUpperCase()}</span></div>`;}).join('');}

  897. function parseTs(v){if(!v)return Date.now();if(typeof v==='number')return v;const p=Date.parse(String(v));return isNaN(p)?Date.now():p;}

  898. function normState(s){return(typeof s==='string'?s.trim().toLowerCase():'')||'idle';}

  899. function stateSev(s){switch(normState(s)){case 'running':return'ok';case 'degraded':case 'muted':return'warn';case 'faulted':return'err';default:return'info';}}

  900. function stateClass(s){switch(normState(s)){case 'faulted':return'err';case 'muted':case 'degraded':case 'prebuffering':case 'arming':case 'stopping':case 'idle':return'warn';default:return'good';}}

  901. 

  902. // ── Formatters ─────────────────────────────────────────────────────────────

  903. function fmt(n){if(n==null)return'--';if(n>=1e9)return(n/1e9).toFixed(2)+'G';if(n>=1e6)return(n/1e6).toFixed(2)+'M';if(n>=1e3)return(n/1e3).toFixed(1)+'k';return String(n);}

  904. function fmtTime(s){if(!s||s<=0)return'--';const h=Math.floor(s/3600),m=Math.floor(s%3600/60),sec=Math.floor(s%60);if(h>0)return`${h}h ${m}m`;if(m>0)return`${m}m ${sec}s`;return`${sec}s`;}

  905. function fmtPct(v){return typeof v==='number'?(v*100).toFixed(0)+'%':'--';}

  906. function fmtFreq(v){return typeof v==='number'?v.toFixed(1)+' MHz':'--';}

  907. function fmtDur(v){if(!isFinite(v)||v<0)return'--';return v>=1?v.toFixed(2)+'s':(v*1000).toFixed(0)+'ms';}

  908. function fmtPilot(v){return typeof v==='number'?(v*100).toFixed(1)+'%':'--';}

  909. function fmtPI(v){if(!v||!String(v).trim())return'--';return'0x'+String(v).toUpperCase().padStart(4,'0');}

  910. function fmtPTY(v){const n=Number(v);return(n>=0&&n<=31)?`${n} — ${PTY_NAMES[n]}`:'--';}

  911. function ageStr(ts){if(!ts)return'--';const d=Math.max(0,Math.floor((Date.now()-ts)/1000));if(d<2)return'just now';if(d<60)return d+'s ago';const m=Math.floor(d/60);if(m<60)return m+'m ago';return Math.floor(m/60)+'h ago';}

  912. function ageFrom(v){if(!v)return'--';if(typeof v==='number')return ageStr(v);const ts=Date.parse(String(v));return isNaN(ts)?'--':ageStr(ts);}

  913. function joinParts(ps){return ps.filter(p=>String(p||'').trim()!=='').join(' · ');}

  914. 

  915. // ── DOM helpers ────────────────────────────────────────────────────────────

  916. function setText(id,text){const el=$(id);if(el){const s=text==null?'--':String(text);if(el.textContent!==s)el.textContent=s;}}

  917. function setHTML(id,h){const el=$(id);if(el&&el.innerHTML!==h)el.innerHTML=h;}

  918. function setCls(id,c){const el=$(id);if(el)el.className=c;}

  919. function setMeter(fid,tid,ratio,text,mode='good'){const f=$(fid);if(!f)return;f.style.width=Math.max(0,Math.min(100,Math.round((ratio??0)*100)))+'%';f.className='meter-fill'+(mode==='warn'?' warn':mode==='err'?' err':'');setText(tid,text);}

  920. function drawSpark(svgId,vals,mode='good',maxO=null){const svg=$(svgId);if(!svg)return;svg.setAttribute('class',`spark ${mode}`);const W=160,H=34,pts=vals.length?vals:[0,0],mx=maxO!=null?maxO:Math.max(...pts,1),step=pts.length<=1?W:W/(pts.length-1);const coords=pts.map((v,i)=>{const x=i*step,y=H-4-((v-0)/(mx||1))*(H-8);return[x,y];});const line=coords.map(([x,y],i)=>`${i===0?'M':'L'}${x.toFixed(2)},${y.toFixed(2)}`).join(' ');svg.innerHTML=`<path class="area" d="${line} L${W},${H} L0,${H} Z"></path><path class="line" d="${line}"></path>`;}

  921. 

  922. function syncSlider(sid,did,key,fmt2=v=>v==null?'--':Number(v).toFixed(2)){const sl=$(sid);if(!sl)return;const n=cfgEff(key);if(document.activeElement!==sl&&n!=null)sl.value=String(Number(n));setText(did,fmt2(n));}

  923. function syncToggle(tid,lid,key){const on=!!srvVal(key),busy=!!S.toggleBusy[key];const el=$(tid);if(!el)return;el.className='toggle'+(on?' on':'')+(busy?' busy':'');el.setAttribute('aria-checked',on?'true':'false');setText(lid,busy?'WAIT':(on?'ON':'OFF'));}

  924. function syncCfgToggle(tid,lid,key){const on=!!cfgEff(key);const el=$(tid);if(!el)return;el.className='toggle'+(on?' on':'');el.setAttribute('aria-checked',on?'true':'false');setText(lid,on?'ON':'OFF');}

  925. function syncDirtyInput(id,key,xform=v=>v){const el=$(id);if(!el)return;const dirty=S.dirty.has(key),val=dirty?xform(S.draft[key]):xform(srvVal(key)),s=val==null?'':String(val);if((!dirty||document.activeElement!==el)&&el.value!==s)el.value=s;el.classList.toggle('input-dirty',dirty&&!S.errors[key]);el.classList.toggle('input-error',!!S.errors[key]);}

  926. function syncIngInput(id,path,xform=v=>v){const el=$(id);if(!el)return;const v=xform(ingVal(path)),s=v==null?'':String(v);if(document.activeElement!==el&&el.value!==s)el.value=s;}

  927. function syncIngChk(id,path){const el=$(id);if(el)el.checked=!!ingVal(path);}

  928. 

  929. // ── Freq presets ───────────────────────────────────────────────────────────

  930. function syncFreqPresetIdx(v){if(typeof v!=='number')return;let ci=0,cd=Infinity;FREQ_PRESETS.forEach((f,i)=>{const d=Math.abs(f-v);if(d<cd){cd=d;ci=i;}});S.freqPresetIndex=ci;}

  931. function cyclePreset(dir){S.freqPresetIndex=(S.freqPresetIndex+dir+FREQ_PRESETS.length)%FREQ_PRESETS.length;setDirty('frequencyMHz',FREQ_PRESETS[S.freqPresetIndex]);toast(`Preset ${FREQ_PRESETS[S.freqPresetIndex].toFixed(1)} MHz`,'info');}

  932. function refreshFreqPresets(){const ef=effVal('frequencyMHz');document.querySelectorAll('[data-freq-preset]').forEach(b=>b.classList.toggle('active',typeof ef==='number'&&nearEq(Number(b.dataset.freqPreset),ef,.05)));}

  933. 

  934. // ── API actions ────────────────────────────────────────────────────────────

  935. function beginReq(){S.pending++;setConn(true,'busy');render();}

  936. function endReq(){S.pending=Math.max(0,S.pending-1);setConn(S.server.configOk||S.server.runtimeOk);render();}

  937. async function sendPatch(patch,{ok='Applied',clearKeys=[]}={}){beginReq();try{const res=await api('/config',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(patch)});clearDirty(clearKeys);render();toast(ok+(res.live?' · live':''),'ok');log('PATCH '+JSON.stringify(patch)+(res.live?' [live]':' [saved]'),'ok');await Promise.allSettled([loadConfig({silent:true}),loadRuntime({silent:true})]);return res;}catch(e){toast(e.message,'err');log('PATCH failed: '+e.message,'err');throw e;}finally{endReq();}}

  938. async function applySection(sec){if(secErrors(sec)){toast('Fix validation errors first','warn');return;}const patch=secPatch(sec),keys=Object.keys(patch);if(!keys.length){toast('No changes','info');return;}const msg=sec==='freq'?'Frequency updated':sec==='rds'?'RDS text updated':'Applied';await sendPatch(patch,{ok:msg,clearKeys:keys});}

  939. function resetSection(sec){clearDirty(Object.keys(FIELDS).filter(k=>FIELDS[k].section===sec));toast('Draft reset','info');}

  940. async function applyCfgSection(sec){if(sec==='rds-id'&&S.cfgErrors?.pi){toast('Fix validation errors first','warn');return;}const patch=cfgPatch(sec);if(!Object.keys(patch).length){toast('No changes','info');return;}const hasR=cfgHasRestart(sec);beginReq();try{const res=await api('/config',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(patch)});Object.keys(CFG).filter(k=>CFG[k].sec===sec).forEach(k=>delete S.cfgDraft[k]);S.cfgDirty[sec]=false;if(sec==='rds-id'&&S.cfgErrors)delete S.cfgErrors.pi;toast(hasR?'Saved (restart required)':'Applied live','ok');log('CFG '+sec+' '+JSON.stringify(patch)+(hasR?' [restart]':' [live]'),'ok');await Promise.allSettled([loadConfig({silent:true}),loadRuntime({silent:true})]);return res;}catch(e){toast(e.message,'err');log('CFG failed: '+e.message,'err');throw e;}finally{endReq();}}

  941. async function txAction(action){

  942.   if(S.txBusy)return;

  943.   S.txBusy=true;

  944.   if(action==='stop'&&S.server.runtime){

  945.     S.server.runtime.engine={...(S.server.runtime.engine||{}),state:'stopping'};

  946.   }

  947.   render();

  948.   beginReq();

  949.   try{

  950.     log('TX '+action+' requested','info');

  951.     await api(`/tx/${action}`,{method:'POST'});

  952.     toast(action==='start'?'TX started':'TX stop requested','ok');

  953.     log('TX '+action+' accepted','ok');

  954.     await Promise.allSettled([loadRuntime({silent:true}),loadConfig({silent:true})]);

  955.   }catch(e){

  956.     toast(e.message,'err');

  957.     log('TX '+action+' failed: '+e.message,'err');

  958.   }finally{

  959.     S.txBusy=false;

  960.     endReq();

  961.     render();

  962.   }

  963. }

  964. async function resetFault(){if(S.faultBusy)return;S.faultBusy=true;render();beginReq();try{await api('/runtime/fault/reset',{method:'POST'});toast('Fault reset','ok');log('Fault reset','ok');await loadRuntime({silent:true});}catch(e){toast(e.message,'err');log('Fault reset failed: '+e.message,'err');}finally{S.faultBusy=false;endReq();render();}}

  965. async function setToggle(key,val){if(S.toggleBusy[key])return;S.toggleBusy[key]=true;render();try{await sendPatch({[key]:val},{ok:key.replace(/Enabled$/,'')+' '+(val?'enabled':'disabled')});}finally{S.toggleBusy[key]=false;render();}}

  966. async function saveIngest(){if(S.ingestSaving)return;if(!S.ingestDirty){toast('No changes','info');return;}S.ingestSaving=true;S.ingestError='';beginReq();render();try{const res=await api('/config/ingest/save',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({ingest:S.ingestDraft})});S.ingestDirty=false;toast(res.reloadScheduled?'Saved, reloading…':'Saved','ok');log('Ingest saved'+(res.reloadScheduled?' [reload]':''),'ok');if(res.reloadScheduled)setTimeout(()=>location.reload(),1500);}catch(e){S.ingestError=e.message;toast(e.message,'err');log('Ingest save failed: '+e.message,'err');}finally{S.ingestSaving=false;endReq();render();}}

  967. 

  968. // ── Render ─────────────────────────────────────────────────────────────────

  969. function render(){try{_render();}catch(e){console.error('[render]',e);}}

  970. 

  971. function _render(){

  972.   const cfg=S.server.config||{},rt=S.server.runtime||{},eng=rt.engine||{},drv=rt.driver||{},aud=rt.audioStream||null;

  973. 

  974.   // ── Header

  975.   setText('badge-backend',cfg.backend?.kind||cfg.backend||'--');

  976.   setText('badge-mode',eng.state&&eng.state!=='idle'?'TX Active':'Control Plane');

  977.   setText('badge-live',S.server.runtimeOk?'Connected':'Waiting');

  978. 

  979.   // ── Overview: freq display

  980.   const applied=Number(eng.appliedFrequencyMHz),desired=Number(cfg.fm?.frequencyMHz);

  981.   const dispFreq=isFinite(applied)?applied:effVal('frequencyMHz')??desired;

  982.   setHTML('freq-display',`${typeof dispFreq==='number'?dispFreq.toFixed(1):'---.-'}<span class="unit">MHz</span>`);

  983.   setText('freq-applied',isFinite(applied)?`Applied ${applied.toFixed(1)} MHz`:'Applied --');

  984.   setText('freq-desired',isFinite(desired)?`Desired ${desired.toFixed(1)} MHz`:'Desired --');

  985.   $('freq-note')?.classList.toggle('mismatch',isFinite(applied)&&isFinite(desired)&&!nearEq(applied,desired,.001));

  986. 

  987.   // ── Overview: quick stats

  988.   setText('t-chunks',fmt(eng.chunksProduced));setText('t-samples',fmt(eng.totalSamples));

  989.   setText('t-uptime',fmtTime(eng.uptimeSeconds));

  990.   setText('t-rate',drv.effectiveSampleRateHz?(drv.effectiveSampleRateHz/1000).toFixed(0)+'k':'--');

  991.   const ur=eng.underruns??drv.underruns;const urEl=$('t-underruns');if(urEl){urEl.textContent=ur==null?'--':String(ur);urEl.className='value'+(ur>0?' err':ur===0?' good':'');}

  992. 

  993.   // ── Overview: TX state

  994.   const txSt=normState(eng.state);

  995.   $('tx-state').textContent=S.txBusy?'WORKING':txSt.toUpperCase();

  996.   $('tx-state').className='tx-state '+(S.txBusy?'working':txSt);

  997.   setText('tx-hint',eng.lastError?`Last error: ${eng.lastError}`:S.txBusy?'Command in progress':'Runtime polled every 1s');

  998.   const canStopStates=['running','arming','prebuffering','degraded','muted','faulted','stopping'];

  999.   const startDis=S.txBusy||txSt==='running';

  1000.   const stopDis=S.txBusy||!canStopStates.includes(txSt);

  1001.   $('btn-start').disabled=startDis;$('btn-stop').disabled=stopDis;$('btn-refresh').disabled=S.pending>0;

  1002. 

  1003.   // ── Overview: meters + sparklines

  1004.   if(aud&&typeof aud.buffered==='number'){const r=Math.max(0,Math.min(1,aud.buffered));setMeter('meter-audio-fill','meter-audio-text',r,fmtPct(r),r<.05?'err':r<.2?'warn':'good');}else setMeter('meter-audio-fill','meter-audio-text',0,'N/A','warn');

  1005.   const urN=Number(eng.underruns??drv.underruns??0);

  1006.   setMeter('meter-stream-fill','meter-stream-text',urN<=0?1:Math.max(0,1-Math.min(urN,10)/10),urN===0?'Clean':`${urN} underrun${urN===1?'':'s'}`,urN===0?'good':urN<3?'warn':'err');

  1007.   const txR=txSt==='running'?1:S.txBusy?.55:.08;

  1008.   setMeter('meter-tx-fill','meter-tx-text',txR,txSt==='running'?'Live':S.txBusy?'Working':'Idle',txSt==='running'?'good':S.txBusy?'warn':'err');

  1009.   drawSpark('spark-audio',S.charts.audio,'good',1);

  1010.   drawSpark('spark-underruns',S.charts.underruns,urN>0?'err':'warn');

  1011.   drawSpark('spark-tx',S.charts.tx,txSt==='running'?'good':'warn',1);

  1012. 

  1013.   // ── Overview: sidebar

  1014.   setText('info-backend',cfg.backend?.kind||cfg.backend||'--');setText('info-freq',fmtFreq(cfg.fm?.frequencyMHz));

  1015.   setText('info-preemph',cfg.fm?.preEmphasisTauUS?`${cfg.fm.preEmphasisTauUS} µs`:'Off');

  1016.   setText('info-pi',fmtPI(cfg.rds?.pi));setText('info-pty',fmtPTY(cfg.rds?.pty));

  1017.   setText('info-runtime-age',ageStr(S.server.lastRuntimeAt));setText('info-last-alert',eng.runtimeAlert||eng.lastError||'None');

  1018.   setText('info-drive',cfg.fm?.outputDrive!=null?Number(cfg.fm.outputDrive).toFixed(2):'--');

  1019.   setText('info-limiter',cfg.fm?.limiterEnabled?(cfg.fm?.limiterCeiling!=null?`Limiter ON · clips always active · ceil ${Number(cfg.fm.limiterCeiling).toFixed(2)}`:'Limiter ON · clips always active'):'Limiter OFF · hard clips still active');

  1020.   setText('info-pilot',fmtPilot(cfg.fm?.pilotLevel));setText('info-rdsinj',fmtPilot(cfg.fm?.rdsInjection));

  1021.   setText('info-mpxgain',cfg.fm?.mpxGain!=null?Number(cfg.fm.mpxGain).toFixed(2):'--');

  1022.   setText('info-bs412',cfg.fm?.bs412Enabled?`ON (${cfg.fm?.bs412ThresholdDBr??0} dBr)`:'OFF');

  1023.   const cc=cfg.fm?.compositeClipper;setText('info-compclip',cc?.enabled?`ON (${cc.iterations??3}× ${cc.lookaheadMs?'LA ':''}${cc.softKnee>0?'soft':'hard'})`:'OFF');

  1024. 

  1025.   // ── TX Control tab

  1026.   // Freq

  1027.   syncDirtyInput('freq-slider','frequencyMHz',v=>typeof v==='number'?v.toFixed(1):'100.0');

  1028.   syncDirtyInput('freq-num','frequencyMHz',v=>typeof v==='number'?v.toFixed(1):'100.0');

  1029.   $('freq-apply').disabled=!secDirty('freq')||secErrors('freq');$('freq-reset').disabled=!secDirty('freq');

  1030.   setText('freq-meta',secErrors('freq')?'Validation error':secDirty('freq')?'Draft pending':'Live + Saved');

  1031.   const fe=$('freq-error');if(fe){fe.textContent=S.errors.frequencyMHz||'';fe.classList.toggle('show',!!S.errors.frequencyMHz);}

  1032.   refreshFreqPresets();

  1033.   // Audio sliders

  1034.   syncSlider('drive-slider','drive-val','outputDrive',v=>v==null?'--':Number(v).toFixed(2));

  1035.   syncSlider('lim-ceiling-slider','lim-ceiling-val','limiterCeiling',v=>v==null?'--':Number(v).toFixed(2));

  1036.   syncSlider('gain-slider','gain-val','audioGain',v=>v==null?'--':Number(v).toFixed(2));

  1037.   const peEl=$('preemph-select');if(peEl&&document.activeElement!==peEl)peEl.value=String(cfgEff('preEmphasisTauUS')??50);

  1038.   setText('audio-meta',S.cfgDirty['audio']?'Draft pending':'Mixed Apply Modes');

  1039.   $('audio-apply').disabled=!S.cfgDirty['audio'];$('audio-reset').disabled=!S.cfgDirty['audio'];

  1040.   // Tones

  1041.   syncSlider('tone-amp-slider','tone-amp-val','toneAmplitude',v=>v==null?'--':Number(v).toFixed(2));

  1042.   const tl=$(('tone-l-slider')),tln=$('tone-l-num');if(tl&&document.activeElement!==tl)tl.value=String(cfgEff('toneLeftHz')??1000);if(tln&&document.activeElement!==tln)tln.value=String(cfgEff('toneLeftHz')??1000);

  1043.   const tr=$('tone-r-slider'),trn=$('tone-r-num');if(tr&&document.activeElement!==tr)tr.value=String(cfgEff('toneRightHz')??1000);if(trn&&document.activeElement!==trn)trn.value=String(cfgEff('toneRightHz')??1000);

  1044.   // Switches

  1045.   syncToggle('tog-stereo','stereo-label','stereoEnabled');syncToggle('tog-limiter','limiter-label','limiterEnabled');

  1046.   const selMode=document.getElementById('sel-stereo-mode');if(selMode){const m=srvVal('stereoMode');if(m)selMode.value=m;}

  1047.   // Compliance

  1048.   syncCfgToggle('tog-bs412','bs412-label','bs412Enabled');

  1049.   syncSlider('bs412-threshold-slider','bs412-threshold-val','bs412ThresholdDBr',v=>v==null?'--':Number(v).toFixed(1));

  1050.   syncSlider('mpxgain-slider','mpxgain-val','mpxGain',v=>v==null?'--':Number(v).toFixed(2));

  1051.   setText('compliance-meta',S.cfgDirty['compliance']?'Draft pending':'Saved + Restart Required');

  1052.   $('compliance-apply').disabled=!S.cfgDirty['compliance'];$('compliance-reset').disabled=!S.cfgDirty['compliance'];

  1053.   // Composite Clipper

  1054.   syncToggle('tog-compclip','compclip-label','compositeClipperEnabled');

  1055.   syncSlider('compclip-iter-slider','compclip-iter-val','compositeClipperIterations',v=>v==null?'--':String(Math.round(Number(v))));

  1056.   syncSlider('compclip-knee-slider','compclip-knee-val','compositeClipperSoftKnee',v=>v==null?'--':Number(v).toFixed(2));

  1057.   syncSlider('compclip-la-slider','compclip-la-val','compositeClipperLookaheadMs',v=>v==null?'--':Number(v).toFixed(1));

  1058.   setText('compclip-meta',S.cfgDirty['compclip']?'Draft pending':'SM.1268');

  1059.   $('compclip-apply').disabled=!S.cfgDirty['compclip'];$('compclip-reset').disabled=!S.cfgDirty['compclip'];

  1060.   // Danger

  1061.   $('danger-stop').disabled=S.txBusy;const rfl=$('danger-reset-fault');if(rfl){rfl.disabled=S.faultBusy||!S.server.runtimeOk;rfl.textContent=S.faultBusy?'Resetting...':'Reset Fault';}

  1062.   const rh=$('reset-hint');if(rh){const sn=normState(eng.state);rh.textContent=sn==='faulted'?'Faulted: reset moves runtime back to DEGRADED.':sn==='muted'||sn==='degraded'?'Reset Fault holds at DEGRADED until queue recovers.':'Manual fault reset drops to DEGRADED while queue recovers.';}

  1063. 

  1064.   // ── RDS tab

  1065.   syncToggle('tog-rds','rds-label','rdsEnabled');

  1066.   // PI

  1067.   const piEl=$('rds-pi');if(piEl&&document.activeElement!==piEl)piEl.value=String(cfgEff('pi')||cfg.rds?.pi||'');

  1068.   setText('pi-display',fmtPI(cfgEff('pi')||cfg.rds?.pi));

  1069.   const piErr=$('pi-error');if(piErr){const e=S.cfgErrors?.pi||'';piErr.textContent=e;piErr.classList.toggle('show',!!e);}

  1070.   // PTY

  1071.   const ptyEl=$('rds-pty');if(ptyEl&&document.activeElement!==ptyEl)ptyEl.value=String(cfgEff('pty')??cfg.rds?.pty??0);

  1072.   const idDirty=!!S.cfgDirty['rds-id'];setText('rds-identity-meta',S.cfgErrors?.pi?'Validation error':idDirty?'Draft pending':'Saved + Restart Required');

  1073.   $('rds-identity-apply').disabled=!idDirty||!!S.cfgErrors?.pi;$('rds-identity-reset').disabled=!idDirty;

  1074.   // Text

  1075.   syncDirtyInput('rds-ps','ps',v=>String(v??''));syncDirtyInput('rds-rt','radioText',v=>String(v??''));

  1076.   const psV=String(effVal('ps')??cfg.rds?.ps??''),rtV=String(effVal('radioText')??cfg.rds?.radioText??'');

  1077.   setText('ps-count',psV.length);setText('rt-count',rtV.length);

  1078.   const rdsD=secDirty('rds');setText('rds-text-meta',secErrors('rds')?'Validation error':rdsD?'Draft pending':'Saved + Runtime');

  1079.   $('rds-apply').disabled=!rdsD||secErrors('rds');$('rds-reset').disabled=!rdsD;

  1080.   const psErr=$('ps-error');if(psErr){psErr.textContent=S.errors.ps||'';psErr.classList.toggle('show',!!S.errors.ps);}

  1081.   const rtErr=$('rt-error');if(rtErr){rtErr.textContent=S.errors.radioText||'';rtErr.classList.toggle('show',!!S.errors.radioText);}

  1082.   // Levels

  1083.   syncSlider('pilot-slider','pilot-val','pilotLevel',v=>v==null?'--':(Number(v)*100).toFixed(1)+'%');

  1084.   syncSlider('rdsinj-slider','rdsinj-val','rdsInjection',v=>v==null?'--':(Number(v)*100).toFixed(1)+'%');

  1085.   const lvlDirty=!!S.cfgDirty['rds-lvl'];$('rds-levels-apply').disabled=!lvlDirty;$('rds-levels-reset').disabled=!lvlDirty;

  1086.   // RDS Features sync

  1087.   const rCfg=cfg.rds||{};

  1088.   const syncCB=(id,key)=>{const el=$(id);if(el){const v=cfgEff(key);el.checked=v!=null?!!v:!!gp(cfg,CFG[key]?.path);}};

  1089.   const tpEl=$('rds-tp');if(tpEl)tpEl.checked=!!rCfg.tp;

  1090.   const taEl=$('rds-ta');if(taEl)taEl.checked=!!rCfg.ta;

  1091.   syncCB('rds-ct','rdsCT');syncCB('rds-rtplus','rdsRTPlus');

  1092.   const msEl=$('rds-ms');if(msEl&&document.activeElement!==msEl){const mv=cfgEff('rdsMS');msEl.value=String(mv!=null?mv:(rCfg.ms!=null?rCfg.ms:true));}

  1093.   const sepEl=$('rds-rtplus-sep');if(sepEl&&document.activeElement!==sepEl){const sv=cfgEff('rdsRTPlusSep');sepEl.value=sv!=null?sv:(rCfg.rtPlusSeparator||' - ');}

  1094.   const ptynEl=$('rds-ptyn');if(ptynEl&&document.activeElement!==ptynEl){const pv=cfgEff('rdsPTYN');ptynEl.value=pv!=null?pv:(rCfg.ptyn||'');}

  1095.   const lpsEl=$('rds-lps');if(lpsEl&&document.activeElement!==lpsEl){const lv=cfgEff('rdsLPS');lpsEl.value=lv!=null?lv:(rCfg.lps||'');}

  1096.   const afEl=$('rds-af');if(afEl&&document.activeElement!==afEl){const av=cfgEff('rdsAF');afEl.value=(av!=null?av:(rCfg.af||[])).join(', ');}

  1097.   const ertOnEl=$('rds-ert-on');if(ertOnEl){const ev=cfgEff('rdsERTEnabled');ertOnEl.checked=ev!=null?!!ev:!!rCfg.ertEnabled;}

  1098.   const ertEl=$('rds-ert');if(ertEl&&document.activeElement!==ertEl){const etv=cfgEff('rdsERT');ertEl.value=etv!=null?etv:(rCfg.ert||'');}

  1099.   const featDirty=!!S.cfgDirty['rds-feat'];$('rds-features-apply').disabled=!featDirty;$('rds-features-reset').disabled=!featDirty;

  1100.   // RDS2

  1101.   const r2On=$('rds2-on');if(r2On){const r2v=cfgEff('rdsRDS2Enabled');r2On.checked=r2v!=null?!!r2v:!!rCfg.rds2Enabled;}

  1102.   const r2Logo=$('rds2-logo');if(r2Logo&&document.activeElement!==r2Logo){const lv=cfgEff('rdsLogoPath');r2Logo.value=lv!=null?lv:(rCfg.stationLogoPath||'');}

  1103.   const r2Dirty=!!S.cfgDirty['rds2'];if($('rds2-apply')){$('rds2-apply').disabled=!r2Dirty;$('rds2-reset').disabled=!r2Dirty;}

  1104.   // Status card

  1105.   const activePS=String(eng.activePS||cfg.rds?.ps||'').trim();

  1106.   const activeRT=String(eng.activeRadioText||cfg.rds?.radioText||'').trim();

  1107.   const savedRT=String(cfg.rds?.radioText||'').trim();

  1108.   setText('rds-stat-enabled',cfg.rds?.enabled?'ON':'OFF');setText('rds-stat-pi',fmtPI(cfg.rds?.pi));

  1109.   setText('rds-stat-pty',fmtPTY(cfg.rds?.pty));setText('rds-stat-ps',activePS||'--');setText('rds-stat-rt',activeRT||'--');setText('rds-stat-rt-saved',savedRT||'--');setText('rds-saved-rt',savedRT||'--');setText('rds-active-rt-inline',activeRT||'--');

  1110.   setText('rds-stat-pilot',fmtPilot(cfg.fm?.pilotLevel));setText('rds-stat-inj',fmtPilot(cfg.fm?.rdsInjection));

  1111. 

  1112.   // ── Ingest tab

  1113.   const ingest=rt.ingest||{},ia=ingest.active||{},iSrc=ingest.source||{},iRt=ingest.runtime||{},hasIR=!!rt.ingest;

  1114.   setText('ingest-summary-state',hasIR?joinParts([String(iRt.state||'').toUpperCase(),iSrc.state?`source ${String(iSrc.state).toUpperCase()}`:'',iRt.prebuffering?'PREBUFFERING':'',iRt.writeBlocked?'WRITE-BLOCKED':''])||'--':'--');

  1115.   setText('ingest-summary-source',joinParts([ia.kind||'none',ia.transport||'',ia.codec||'',isFinite(Number(ia.sampleRateHz))?`${Number(ia.sampleRateHz)} Hz`:'',isFinite(Number(ia.channels))?`${Number(ia.channels)} ch`:''])||'--');

  1116.   setText('ingest-summary-signal',hasIR?joinParts([iSrc.connected?'connected':'disconnected',isFinite(Number(iSrc.bufferedSeconds))?`${Number(iSrc.bufferedSeconds).toFixed(2)}s buffered`:'',isFinite(Number(iSrc.reconnects))?`${Number(iSrc.reconnects)} reconnects`:''])||'--':'--');

  1117.   setText('ingest-summary-detail',hasIR?(iSrc.streamTitle||ia.detail||iSrc.lastError||'--'):'--');

  1118.   const org=ia.origin||{};setText('ingest-summary-origin',hasIR?joinParts([org.kind||'',org.endpoint||'',org.streamName||''])||'--':'--');

  1119.   setText('ingest-summary-last',hasIR?ageFrom(iRt.lastChunkAt||iSrc.lastChunkAt):'--');

  1120.   syncIngInput('ing-kind','kind',v=>String(v??'none'));syncIngInput('ing-prebuffer','prebufferMs',v=>isFinite(Number(v))?Number(v):0);

  1121.   syncIngChk('ing-reconnect-enabled','reconnect.enabled');syncIngInput('ing-reconnect-initial','reconnect.initialBackoffMs',v=>isFinite(Number(v))?Number(v):0);syncIngInput('ing-reconnect-max','reconnect.maxBackoffMs',v=>isFinite(Number(v))?Number(v):0);

  1122.   syncIngInput('ing-icecast-url','icecast.url',v=>String(v??''));syncIngInput('ing-icecast-decoder','icecast.decoder',v=>String(v??'auto'));

  1123.   syncIngChk('ing-icecast-rt-enabled','icecast.radioText.enabled');syncIngInput('ing-icecast-rt-prefix','icecast.radioText.prefix',v=>String(v??''));syncIngInput('ing-icecast-rt-maxlen','icecast.radioText.maxLen',v=>isFinite(Number(v))?Number(v):64);syncIngChk('ing-icecast-rt-only-change','icecast.radioText.onlyOnChange');

  1124.   syncIngInput('ing-srt-url','srt.url',v=>String(v??''));syncIngInput('ing-srt-mode','srt.mode',v=>String(v??'listener'));syncIngInput('ing-srt-rate','srt.sampleRateHz',v=>isFinite(Number(v))?Number(v):48000);syncIngInput('ing-srt-channels','srt.channels',v=>isFinite(Number(v))?Number(v):2);

  1125.   syncIngInput('ing-aes67-group','aes67.multicastGroup',v=>String(v??''));syncIngInput('ing-aes67-port','aes67.port',v=>isFinite(Number(v))?Number(v):5004);syncIngInput('ing-aes67-sdppath','aes67.sdpPath',v=>String(v??''));syncIngInput('ing-aes67-rate','aes67.sampleRateHz',v=>isFinite(Number(v))?Number(v):48000);syncIngInput('ing-aes67-channels','aes67.channels',v=>isFinite(Number(v))?Number(v):2);syncIngInput('ing-aes67-encoding','aes67.encoding',v=>String(v??'L24'));syncIngInput('ing-aes67-jitter','aes67.jitterDepthPackets',v=>isFinite(Number(v))?Number(v):8);syncIngChk('ing-aes67-discovery-enabled','aes67.discovery.enabled');syncIngInput('ing-aes67-discovery-name','aes67.discovery.streamName',v=>String(v??''));

  1126.   const kind=String(ingVal('kind')||'none').toLowerCase();

  1127.   $('ing-group-icecast').style.display=kind==='icecast'?'':'none';$('ing-group-srt').style.display=kind==='srt'?'':'none';$('ing-group-aes67').style.display=kind==='aes67'?'':'none';

  1128.   setText('ingest-meta',S.ingestSaving?'Saving…':S.ingestDirty?'Draft pending':'Saved + Hard Reload');

  1129.   $('ingest-save-reload').disabled=!S.ingestDirty||S.ingestSaving||!S.server.configOk;$('ingest-save-reload').textContent=S.ingestSaving?'Saving...':'Save + Hard Reload';

  1130.   $('ingest-reset').disabled=!S.ingestDirty||S.ingestSaving;

  1131.   const iErr=$('ingest-error');if(iErr){iErr.textContent=S.ingestError||'';iErr.classList.toggle('show',!!S.ingestError);}

  1132. 

  1133.   // ── Diagnostics tab

  1134.   setText('health-http',S.server.configOk?'OK':'OFFLINE');setCls('health-http','val '+(S.server.configOk?'good':'err'));

  1135.   const rSt=S.server.runtimeOk?String(eng.state||'unknown'):'WAITING';setText('health-runtime',rSt.toUpperCase());setCls('health-runtime','val '+(S.server.runtimeOk?stateClass(eng.state):'warn'));

  1136.   const dur=Number(eng.runtimeStateDurationSeconds);setText('health-state-age',isFinite(dur)&&dur>0?fmtTime(dur):'--');

  1137.   const ri=eng.runtimeIndicator,riMap={normal:'Normal',degraded:'Degraded',queueCritical:'Queue critical'};setText('health-indicator',riMap[ri]||ri||'--');setCls('health-indicator','val'+(ri==='queueCritical'?' err':ri==='degraded'?' warn':ri==='normal'?' good':''));

  1138.   const alert=String(eng.runtimeAlert||'').trim();setText('health-alert',alert||'None');setCls('health-alert','val '+(alert?'warn':'good'));

  1139.   setText('health-transitions',eng.degradedTransitions!=null?`${eng.degradedTransitions??0} / ${eng.mutedTransitions??0} / ${eng.faultedTransitions??0}`:'--');

  1140.   const fc=eng.faultCount!=null?Number(eng.faultCount):null;setText('health-fault-count',fc!=null?String(fc):'--');setCls('health-fault-count','val'+(fc!=null?(fc>0?' warn':' good'):''));

  1141.   const lf=eng.lastFault;if(lf){setCls('health-last-fault','val '+(String(lf.severity||'').toLowerCase()==='faulted'?'err':'warn'));const t=lf.time?new Date(lf.time):null;setText('health-last-fault',`${String(lf.severity||'Fault').toUpperCase()} ${lf.reason||''}${lf.message?' - '+lf.message:''}${t&&!isNaN(t.getTime())?' @ '+t.toLocaleTimeString():''}`);}else{setCls('health-last-fault','val good');setText('health-last-fault','None');}

  1142.   if(aud&&typeof aud.buffered==='number'){const f=aud.buffered;setText('health-audio',fmtPct(f));setCls('health-audio','val '+(f<.05?'err':f<.2?'warn':'good'));}else{setText('health-audio','N/A');setCls('health-audio','val');}

  1143.   setText('health-buffer-duration',fmtDur(Number(aud?.bufferedDurationSeconds)));

  1144.   const hwD=Number(aud?.highWatermarkDurationSeconds),hwF=Number(aud?.highWatermark);setText('health-buffer-highwater',isFinite(hwD)?`${fmtDur(hwD)} (${isFinite(hwF)?hwF:'?'} fr)`:(isFinite(hwF)?`${hwF} fr`:'--'));

  1145.   const qf=Number(eng.queue?.fillLevel),qh=String(eng.queue?.health||'').toLowerCase();setText('health-queue-fill',isFinite(qf)?fmtPct(qf)+(qh?` · ${qh[0].toUpperCase()+qh.slice(1)}`:''):(qh||'--'));setCls('health-queue-fill','val '+(qh==='critical'?'err':qh==='low'?'warn':'good'));

  1146.   const uk=Number(drv?.underrunStreak),um=Number(drv?.maxUnderrunStreak);setText('health-underrun-streak',isFinite(uk)?`${uk}${isFinite(um)?' (max '+um+')':''}`:isFinite(um)?`Max ${um}`:'--');setCls('health-underrun-streak','val'+(isFinite(uk)||isFinite(um)?Math.max(isFinite(uk)?uk:0,isFinite(um)?um:0)>=6?' err':Math.max(isFinite(uk)?uk:0,isFinite(um)?um:0)>0?' warn':' good':''));

  1147.   setText('health-last',ageStr(Math.max(S.server.lastConfigAt||0,S.server.lastRuntimeAt||0)));

  1148.   const hwMode=hwF/(Number(aud?.capacity)||1)>=.95?'err':hwF/(Number(aud?.capacity)||1)>=.65?'warn':'good';

  1149.   drawSpark('spark-high-watermark',S.charts.hw,hwMode);drawSpark('spark-queue-fill',S.charts.qf,qh==='critical'?'err':qh==='low'?'warn':'good',1);

  1150.   // Audit

  1151.   const audit=rt.controlAudit||{};let total=0;

  1152.   ['methodNotAllowed','unsupportedMediaType','bodyTooLarge','unexpectedBody'].forEach(k=>{const v=audit[k]!=null?Number(audit[k]):null;total+=(v||0);const el=$('audit-'+k);if(el){el.textContent=v!=null?String(v):'--';el.className='audit-val'+(v!=null?(v>0?' warn':' good'):'');}});

  1153.   const at=$('audit-total');if(at){at.textContent=String(total);at.className='audit-val'+(total>0?' warn':' good');}

  1154.   // Fault history

  1155.   const fh=$('fault-history');if(fh){const hist=Array.isArray(eng.faultHistory)?eng.faultHistory:[];if(!hist.length){fh.innerHTML='<div class="fault-history-empty">No faults recorded yet.</div>';}else fh.innerHTML=hist.slice().reverse().map(e=>{const t=e?.time?new Date(e.time):null,tl=t&&!isNaN(t)?t.toLocaleTimeString():'--',sev=String(e?.severity||'warn').toLowerCase();return`<div class="fault-history-entry ${sev}"><span class="fault-history-time">${tl}</span><span class="fault-history-desc">${String(e?.severity||'').toUpperCase()} ${e?.reason||''}${e?.message?' · '+e.message:''}</span></div>`;}).join('');}

  1156. 

  1157.   applyMobilePanels();

  1158. }

  1159. 

  1160. function applyMobilePanels(){if(!mobileMq.matches||S.mobilePanelsApplied)return;S.mobilePanelsApplied=true;document.querySelectorAll('.panel[data-panel-key]').forEach(p=>{const k=p.dataset.panelKey,h=p.querySelector('.panel-head'),b=p.querySelector('.panel-body'),keep=['frequency','danger'].includes(k);h.classList.toggle('collapsed',!keep);b.classList.toggle('collapsed',!keep);});}

  1161. 

  1162. // ── Toast / Log ────────────────────────────────────────────────────────────

  1163. function toast(msg,type='info'){const t=$('toast');t.textContent=msg;t.className='toast '+type+' show';clearTimeout(toastTimer);toastTimer=setTimeout(()=>t.classList.remove('show'),2800);}

  1164. function log(msg,type=''){const el=$('log');const em=el.querySelector('.empty-log');if(em)em.remove();const row=document.createElement('div');row.className='entry '+type;row.textContent=`${new Date().toLocaleTimeString()}  ${msg}`;el.appendChild(row);while(el.children.length>300)el.removeChild(el.firstChild);el.scrollTop=el.scrollHeight;}

  1165. 

  1166. // ── Bindings ───────────────────────────────────────────────────────────────

  1167. function bindAll(){

  1168.   // Tabs

  1169.   const tbs=Array.from(document.querySelectorAll('.tab-btn[data-tab]')),tps=Array.from(document.querySelectorAll('.tab-panel[data-tab-panel]'));

  1170.   tbs.forEach(b=>b.addEventListener('click',()=>{tbs.forEach(x=>x.classList.toggle('active',x===b));tps.forEach(p=>p.classList.toggle('active',p.dataset.tabPanel===b.dataset.tab));}));

  1171.   // Panels

  1172.   document.querySelectorAll('[data-panel]').forEach(h=>h.addEventListener('click',()=>{h.classList.toggle('collapsed');h.nextElementSibling?.classList.toggle('collapsed');}));

  1173.   // Live toggles

  1174.   document.querySelectorAll('.toggle[data-toggle]').forEach(tog=>{const key=tog.dataset.toggle;const handler=()=>setToggle(key,!srvVal(key));tog.addEventListener('click',handler);tog.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();handler();}});});

  1175.   // Stereo mode select (live)

  1176.   $('sel-stereo-mode')?.addEventListener('change',e=>sendPatch({stereoMode:e.target.value},{ok:'Stereo mode: '+e.target.value}));

  1177.   // Config-only toggles (restart-required)

  1178.   document.querySelectorAll('.toggle[data-toggle-cfg]').forEach(tog=>{const key=tog.dataset.toggleCfg;const handler=()=>cfgSetDirty(key,!cfgEff(key));tog.addEventListener('click',handler);tog.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();handler();}});});

  1179.   // Freq

  1180.   $('freq-slider').addEventListener('input',e=>setDirty('frequencyMHz',Number(e.target.value)));

  1181.   $('freq-num').addEventListener('input',e=>{const v=Number(e.target.value);if(!isNaN(v))setDirty('frequencyMHz',v);});

  1182.   $('freq-apply').addEventListener('click',()=>applySection('freq'));$('freq-reset').addEventListener('click',()=>resetSection('freq'));

  1183.   // Freq presets

  1184.   document.querySelectorAll('[data-freq-preset]').forEach(b=>b.addEventListener('click',()=>{setDirty('frequencyMHz',Number(b.dataset.freqPreset));toast(`Freq preset ${Number(b.dataset.freqPreset).toFixed(1)} MHz`,'info');}));

  1185.   // Audio sliders

  1186.   function bindCfgSlider(sid,key,xf=v=>Number(v)){const el=$(sid);if(!el)return;const evt=(el.tagName||'').toLowerCase()==='select'?'change':'input';el.addEventListener(evt,e=>cfgSetDirty(key,xf(e.target.value)));}

  1187.   bindCfgSlider('drive-slider','outputDrive');bindCfgSlider('lim-ceiling-slider','limiterCeiling');

  1188.   bindCfgSlider('gain-slider','audioGain');$('preemph-select').addEventListener('change',e=>cfgSetDirty('preEmphasisTauUS',Number(e.target.value)));

  1189.   $('audio-apply').addEventListener('click',()=>applyCfgSection('audio'));$('audio-reset').addEventListener('click',()=>{cfgClear('audio');toast('Draft reset','info');});

  1190.   // Tones

  1191.   bindCfgSlider('tone-l-slider','toneLeftHz');$('tone-l-num').addEventListener('input',e=>cfgSetDirty('toneLeftHz',Number(e.target.value)));

  1192.   bindCfgSlider('tone-r-slider','toneRightHz');$('tone-r-num').addEventListener('input',e=>cfgSetDirty('toneRightHz',Number(e.target.value)));

  1193.   bindCfgSlider('tone-amp-slider','toneAmplitude');

  1194.   $('tones-apply').addEventListener('click',()=>applyCfgSection('tones'));$('tones-off').addEventListener('click',()=>{cfgSetDirty('toneAmplitude',0);toast('Tone disable queued for live apply + config save','info');applyCfgSection('tones');});

  1195.   // Compliance

  1196.   bindCfgSlider('bs412-threshold-slider','bs412ThresholdDBr');bindCfgSlider('mpxgain-slider','mpxGain');

  1197.   $('compliance-apply').addEventListener('click',()=>applyCfgSection('compliance'));$('compliance-reset').addEventListener('click',()=>{cfgClear('compliance');toast('Draft reset','info');});

  1198.   $('compclip-apply').addEventListener('click',()=>applyCfgSection('compclip'));$('compclip-reset').addEventListener('click',()=>{cfgClear('compclip');toast('Draft reset','info');});

  1199.   // TX

  1200.   $('btn-start').addEventListener('click',()=>txAction('start'));$('btn-stop').addEventListener('click',()=>txAction('stop'));

  1201.   $('danger-stop').addEventListener('click',()=>txAction('stop'));$('btn-refresh').addEventListener('click',manualRefresh);

  1202.   $('danger-reset-fault').addEventListener('click',()=>resetFault());

  1203.   // RDS

  1204.   $('rds-pi').addEventListener('input',e=>{const v=e.target.value.toUpperCase().replace(/[^0-9A-F]/g,'').slice(0,4);e.target.value=v;S.cfgErrors=S.cfgErrors||{};S.cfgErrors.pi=validate('pi',v);cfgSetDirty('pi',v);});

  1205.   $('rds-pty').addEventListener('change',e=>cfgSetDirty('pty',Number(e.target.value)));

  1206.   $('rds-identity-apply').addEventListener('click',()=>applyCfgSection('rds-id'));$('rds-identity-reset').addEventListener('click',()=>{cfgClear('rds-id');toast('Draft reset','info');});

  1207.   $('rds-ps').addEventListener('input',e=>setDirty('ps',e.target.value.toUpperCase().slice(0,8)));

  1208.   $('rds-rt').addEventListener('input',e=>setDirty('radioText',e.target.value.slice(0,64)));

  1209.   $('rds-apply').addEventListener('click',()=>applySection('rds'));$('rds-reset').addEventListener('click',()=>resetSection('rds'));

  1210.   document.querySelectorAll('[data-rds-ps]').forEach(b=>b.addEventListener('click',()=>{setDirty('ps',b.dataset.rdsPs||'');setDirty('radioText',b.dataset.rdsRt||'');toast('RDS preset loaded','info');}));

  1211.   bindCfgSlider('pilot-slider','pilotLevel');bindCfgSlider('rdsinj-slider','rdsInjection');

  1212.   $('rds-levels-apply').addEventListener('click',()=>applyCfgSection('rds-lvl'));$('rds-levels-reset').addEventListener('click',()=>{cfgClear('rds-lvl');toast('Draft reset','info');});

  1213.   // RDS Features

  1214.   $('rds-tp')?.addEventListener('change',e=>sendPatch({tp:e.target.checked},{ok:'TP '+(e.target.checked?'on':'off')}));

  1215.   $('rds-ta')?.addEventListener('change',e=>sendPatch({ta:e.target.checked},{ok:'TA '+(e.target.checked?'on':'off')}));

  1216.   $('rds-ms')?.addEventListener('change',e=>cfgSetDirty('rdsMS',e.target.value==='true'));

  1217.   $('rds-ct')?.addEventListener('change',e=>cfgSetDirty('rdsCT',e.target.checked));

  1218.   $('rds-rtplus')?.addEventListener('change',e=>cfgSetDirty('rdsRTPlus',e.target.checked));

  1219.   $('rds-rtplus-sep')?.addEventListener('input',e=>cfgSetDirty('rdsRTPlusSep',e.target.value));

  1220.   $('rds-ptyn')?.addEventListener('input',e=>cfgSetDirty('rdsPTYN',e.target.value.toUpperCase()));

  1221.   $('rds-lps')?.addEventListener('input',e=>cfgSetDirty('rdsLPS',e.target.value));

  1222.   $('rds-ert-on')?.addEventListener('change',e=>cfgSetDirty('rdsERTEnabled',e.target.checked));

  1223.   $('rds-ert')?.addEventListener('input',e=>cfgSetDirty('rdsERT',e.target.value));

  1224.   $('rds-af')?.addEventListener('input',e=>{const v=e.target.value.split(',').map(s=>parseFloat(s.trim())).filter(n=>!isNaN(n)&&n>=87.5&&n<=108.0);cfgSetDirty('rdsAF',v);});

  1225.   $('rds-features-apply')?.addEventListener('click',()=>applyCfgSection('rds-feat'));

  1226.   $('rds-features-reset')?.addEventListener('click',()=>{cfgClear('rds-feat');toast('Draft reset','info');});

  1227.   // RDS2

  1228.   $('rds2-on')?.addEventListener('change',e=>cfgSetDirty('rdsRDS2Enabled',e.target.checked));

  1229.   $('rds2-logo')?.addEventListener('input',e=>cfgSetDirty('rdsLogoPath',e.target.value));

  1230.   $('rds2-apply')?.addEventListener('click',()=>applyCfgSection('rds2'));

  1231.   $('rds2-reset')?.addEventListener('click',()=>{cfgClear('rds2');toast('Draft reset','info');});

  1232.   // Ingest

  1233.   document.querySelectorAll('[data-ingest-path]').forEach(el=>{const path=el.dataset.ingestPath,type=String(el.getAttribute('type')||'').toLowerCase(),isChk=type==='checkbox',isNum=type==='number';el.addEventListener(isChk?'change':'input',()=>{if(isChk){setIngField(path,!!el.checked);}else if(isNum){const n=Number(el.value);setIngField(path,isFinite(n)?Math.trunc(n):0);}else setIngField(path,String(el.value||''));});});

  1234.   $('ingest-save-reload').addEventListener('click',()=>saveIngest());

  1235.   $('ingest-reset').addEventListener('click',()=>{syncIngDraft(true);toast('Draft reset','info');log('Ingest draft reset','warn');render();});

  1236.   // Log

  1237.   $('btn-clear-log').addEventListener('click',()=>{$('log').innerHTML='<div class="empty-log">No activity recorded yet.</div>';toast('Activity log cleared','info');});

  1238.   // Keyboard

  1239.   window.addEventListener('keydown',e=>{const typing=(()=>{const t=e.target;if(!t)return false;const tag=(t.tagName||'').toLowerCase();return tag==='input'||tag==='textarea'||t.isContentEditable;})();if(typing){if(e.key==='Enter'){e.preventDefault();if(S.dirty.has('frequencyMHz'))applySection('freq');else if(secDirty('rds'))applySection('rds');}return;}if(e.key==='t'&&!e.shiftKey){e.preventDefault();txAction('start');}else if(e.key==='T'||(e.key==='t'&&e.shiftKey)){e.preventDefault();txAction('stop');}else if(e.key.toLowerCase()==='r'){e.preventDefault();manualRefresh();}else if(e.key==='['){e.preventDefault();cyclePreset(-1);}else if(e.key===']'){e.preventDefault();cyclePreset(1);}else if(e.key==='Enter'){e.preventDefault();if(S.dirty.has('frequencyMHz'))applySection('freq');else if(secDirty('rds'))applySection('rds');}});

  1240.   // Responsive

  1241.   const respHandler=()=>{if(!mobileMq.matches)S.mobilePanelsApplied=false;else applyMobilePanels();};if(mobileMq.addEventListener)mobileMq.addEventListener('change',respHandler);else mobileMq.addListener(respHandler);

  1242. }

  1243. 

  1244. async function manualRefresh(){beginReq();try{await Promise.allSettled([loadConfig({silent:true}),loadRuntime({silent:true})]);toast('UI data refreshed','info');log('Manual refresh','info');}finally{endReq();}}

  1245. function startPollers(){if(S.pollersStarted)return;S.pollersStarted=true;setInterval(()=>loadRuntime({silent:true}),RUNTIME_MS);setInterval(()=>loadConfig({silent:true}),CONFIG_MS);}

  1246. 

  1247. async function init(){

  1248.   bindAll();render();

  1249.   log('fm-rds-tx control UI booting','info');

  1250.   await Promise.allSettled([loadConfig({silent:false}),loadRuntime({silent:true})]);

  1251.   render();startPollers();

  1252.   log('Polling active: runtime 1s · config 8s','ok');

  1253.   log('Keyboard shortcuts ready','info');

  1254. }

  1255. init();

  1256. </script>

  1257. </body>

  1258. </html>