Alfred
/
fm-rds-tx
1
0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 6 Wiki Aktivität
Go-based FM stereo transmitter with RDS, Windows-first and cross-platform
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
97 Commits
1 Branch
37MB
Struktur: 24adbff8f2
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „24adbff8f2“
${ noResults }
fm-rds-tx/internal/control/ui.html

2239 Zeilen
68KB
Originalformat Blame Verlauf 

  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=JetBrains+Mono:wght@400;600;700&family=Archivo+Black&display=swap');

  9. 

  10. :root {

  11.   --bg: #0a0a0c;

  12.   --bg-2: #0f1015;

  13.   --surface: #111116;

  14.   --surface2: #18181e;

  15.   --surface3: #1f2028;

  16.   --border: #2a2a35;

  17.   --border-strong: #3a3a49;

  18.   --text: #d4d4dc;

  19.   --text-dim: #8b8b99;

  20.   --text-muted: #666674;

  21.   --accent: #ff3b30;

  22.   --accent-glow: #ff3b3044;

  23.   --green: #30d158;

  24.   --green-glow: #30d15844;

  25.   --amber: #ff9f0a;

  26.   --amber-glow: #ff9f0a44;

  27.   --blue: #0a84ff;

  28.   --blue-glow: #0a84ff33;

  29.   --mono: 'JetBrains Mono', monospace;

  30.   --display: 'Archivo Black', sans-serif;

  31.   --radius: 8px;

  32.   --shadow: 0 10px 30px rgba(0,0,0,.25);

  33. }

  34. 

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

  36. html { color-scheme: dark; }

  37. body {

  38.   background:

  39.     radial-gradient(circle at top right, rgba(10,132,255,.06), transparent 28%),

  40.     radial-gradient(circle at top left, rgba(255,59,48,.06), transparent 30%),

  41.     var(--bg);

  42.   color: var(--text);

  43.   font-family: var(--mono);

  44.   font-size: 13px;

  45.   line-height: 1.5;

  46.   min-height: 100vh;

  47.   overflow-x: hidden;

  48. }

  49. 

  50. body::before {

  51.   content: '';

  52.   position: fixed; inset: 0;

  53.   background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.015) 2px, rgba(255,255,255,0.015) 4px);

  54.   pointer-events: none;

  55.   z-index: 1000;

  56. }

  57. 

  58. button, input { font: inherit; }

  59. button { user-select: none; }

  60. 

  61. .app {

  62.   max-width: 1120px;

  63.   margin: 0 auto;

  64.   padding: 18px;

  65. }

  66. 

  67. .header {

  68.   display: flex;

  69.   align-items: flex-start;

  70.   justify-content: space-between;

  71.   gap: 18px;

  72.   padding: 8px 0 22px;

  73.   border-bottom: 1px solid var(--border);

  74.   margin-bottom: 18px;

  75. }

  76. .header-main {

  77.   display: flex;

  78.   flex-direction: column;

  79.   gap: 8px;

  80. }

  81. .header h1 {

  82.   font-family: var(--display);

  83.   font-size: 24px;

  84.   letter-spacing: 2px;

  85.   text-transform: uppercase;

  86.   color: var(--accent);

  87.   text-shadow: 0 0 20px var(--accent-glow), 0 0 40px var(--accent-glow);

  88. }

  89. .header-sub {

  90.   display: flex;

  91.   flex-wrap: wrap;

  92.   gap: 8px;

  93. }

  94. .badge {

  95.   display: inline-flex;

  96.   align-items: center;

  97.   gap: 8px;

  98.   min-height: 28px;

  99.   padding: 0 10px;

  100.   border: 1px solid var(--border);

  101.   border-radius: 999px;

  102.   background: rgba(255,255,255,0.02);

  103.   color: var(--text-dim);

  104.   font-size: 11px;

  105.   text-transform: uppercase;

  106.   letter-spacing: .8px;

  107. }

  108. .badge strong {

  109.   color: var(--text);

  110.   font-weight: 700;

  111. }

  112. .header-status {

  113.   display: flex;

  114.   align-items: center;

  115.   gap: 10px;

  116.   padding-top: 6px;

  117. }

  118. 

  119. .led {

  120.   width: 10px;

  121.   height: 10px;

  122.   border-radius: 50%;

  123.   background: #333;

  124.   box-shadow: none;

  125.   transition: all .25s ease;

  126.   flex-shrink: 0;

  127. }

  128. .led.on-green {

  129.   background: var(--green);

  130.   box-shadow: 0 0 8px var(--green), 0 0 20px var(--green-glow);

  131. }

  132. .led.on-red {

  133.   background: var(--accent);

  134.   box-shadow: 0 0 8px var(--accent), 0 0 20px var(--accent-glow);

  135. }

  136. .led.on-amber {

  137.   background: var(--amber);

  138.   box-shadow: 0 0 8px var(--amber), 0 0 20px var(--amber-glow);

  139. }

  140. .led.on-blue {

  141.   background: var(--blue);

  142.   box-shadow: 0 0 8px var(--blue), 0 0 20px var(--blue-glow);

  143. }

  144. 

  145. .status-text {

  146.   font-size: 10px;

  147.   color: var(--text-dim);

  148.   text-transform: uppercase;

  149.   letter-spacing: 1.2px;

  150. }

  151. 

  152. .layout {

  153.   display: grid;

  154.   grid-template-columns: minmax(0, 1.35fr) minmax(310px, .75fr);

  155.   gap: 14px;

  156.   align-items: start;

  157. }

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

  159. 

  160. .card {

  161.   background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));

  162.   border: 1px solid var(--border);

  163.   border-radius: var(--radius);

  164.   box-shadow: var(--shadow);

  165. }

  166. 

  167. .hero {

  168.   padding: 16px;

  169.   position: relative;

  170.   overflow: hidden;

  171. }

  172. .hero.tx-live::after {

  173.   content: '';

  174.   position: absolute;

  175.   inset: -40%;

  176.   background: radial-gradient(circle, rgba(48,209,88,.12), transparent 55%);

  177.   animation: pulseGlow 2.8s ease-in-out infinite;

  178.   pointer-events: none;

  179. }

  180. .hero.tx-busy::after {

  181.   content: '';

  182.   position: absolute;

  183.   inset: -50%;

  184.   background: conic-gradient(from 0deg, transparent, rgba(255,159,10,.12), transparent 45%);

  185.   animation: spinWash 2s linear infinite;

  186.   pointer-events: none;

  187. }

  188. @keyframes pulseGlow {

  189.   0%, 100% { transform: scale(.95); opacity: .45; }

  190.   50% { transform: scale(1.05); opacity: .8; }

  191. }

  192. @keyframes spinWash {

  193.   from { transform: rotate(0deg); }

  194.   to { transform: rotate(360deg); }

  195. }

  196. @keyframes blinkSoft {

  197.   0%, 100% { opacity: 1; }

  198.   50% { opacity: .55; }

  199. }

  200. 

  201. .tx-bar {

  202.   position: relative;

  203.   z-index: 1;

  204.   display: grid;

  205.   grid-template-columns: minmax(180px, 250px) 1fr auto;

  206.   gap: 14px;

  207.   align-items: center;

  208. }

  209. 

  210. .freq-display-wrap {

  211.   display: flex;

  212.   flex-direction: column;

  213.   gap: 6px;

  214. }

  215. .freq-display-label {

  216.   font-size: 10px;

  217.   text-transform: uppercase;

  218.   letter-spacing: 1.4px;

  219.   color: var(--text-dim);

  220. }

  221. .freq-display {

  222.   font-family: var(--display);

  223.   font-size: 38px;

  224.   color: var(--green);

  225.   text-shadow: 0 0 15px var(--green-glow);

  226.   letter-spacing: 1px;

  227.   line-height: 1;

  228. }

  229. .freq-display .unit {

  230.   font-family: var(--mono);

  231.   font-size: 14px;

  232.   color: var(--text-dim);

  233.   margin-left: 5px;

  234. }

  235. 

  236. .tx-actions {

  237.   display: flex;

  238.   flex-wrap: wrap;

  239.   gap: 10px;

  240. }

  241. 

  242. .tx-btn, .ghost-btn, .apply-btn, .preset-btn, .danger-btn {

  243.   min-height: 40px;

  244.   padding: 0 18px;

  245.   border-radius: var(--radius);

  246.   border: 1px solid var(--border);

  247.   background: var(--surface2);

  248.   color: var(--text);

  249.   cursor: pointer;

  250.   font-size: 12px;

  251.   font-weight: 700;

  252.   text-transform: uppercase;

  253.   letter-spacing: 1px;

  254.   transition: all .16s ease;

  255. }

  256. .tx-btn:hover, .ghost-btn:hover, .apply-btn:hover, .preset-btn:hover, .danger-btn:hover {

  257.   transform: translateY(-1px);

  258.   border-color: var(--border-strong);

  259. }

  260. .tx-btn:disabled, .ghost-btn:disabled, .apply-btn:disabled, .preset-btn:disabled, .danger-btn:disabled {

  261.   opacity: .45;

  262.   cursor: not-allowed;

  263.   transform: none;

  264. }

  265. .tx-btn.start { border-color: var(--green); color: var(--green); }

  266. .tx-btn.start:hover:not(:disabled) { background: rgba(48,209,88,.1); }

  267. .tx-btn.stop { border-color: var(--accent); color: var(--accent); }

  268. .tx-btn.stop:hover:not(:disabled) { background: rgba(255,59,48,.1); }

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

  270. .danger-btn {

  271.   border-color: rgba(255,59,48,.45);

  272.   color: var(--accent);

  273.   background: rgba(255,59,48,.04);

  274. }

  275. .danger-btn:hover:not(:disabled) {

  276.   background: rgba(255,59,48,.12);

  277. }

  278. 

  279. .tx-state-wrap {

  280.   display: flex;

  281.   flex-direction: column;

  282.   align-items: flex-end;

  283.   gap: 6px;

  284. }

  285. .tx-state {

  286.   font-size: 11px;

  287.   text-transform: uppercase;

  288.   letter-spacing: 2px;

  289.   color: var(--text-dim);

  290. }

  291. .tx-state.running { color: var(--green); animation: blinkSoft 2s ease-in-out infinite; }

  292. .tx-state.idle, .tx-state.stopped { color: var(--text-dim); }

  293. .tx-state.starting, .tx-state.stopping, .tx-state.working { color: var(--amber); animation: blinkSoft 1.1s ease-in-out infinite; }

  294. .tx-state.error { color: var(--accent); }

  295. .status-hint {

  296.   font-size: 10px;

  297.   color: var(--text-muted);

  298.   text-align: right;

  299. }

  300. 

  301. .quick-grid {

  302.   position: relative;

  303.   z-index: 1;

  304.   display: grid;

  305.   grid-template-columns: repeat(5, minmax(0, 1fr));

  306.   gap: 10px;

  307.   margin-top: 16px;

  308. }

  309. .quick-item {

  310.   padding: 12px;

  311.   border: 1px solid var(--border);

  312.   border-radius: var(--radius);

  313.   background: var(--bg-2);

  314. }

  315. .quick-item .label {

  316.   font-size: 9px;

  317.   text-transform: uppercase;

  318.   letter-spacing: 1.4px;

  319.   color: var(--text-dim);

  320.   margin-bottom: 6px;

  321. }

  322. .quick-item .value {

  323.   font-size: 18px;

  324.   font-weight: 700;

  325.   color: var(--text);

  326. }

  327. .quick-item .value.warn { color: var(--amber); }

  328. .quick-item .value.err { color: var(--accent); }

  329. .quick-item .value.good { color: var(--green); }

  330. 

  331. .signal-grid {

  332.   position: relative;

  333.   z-index: 1;

  334.   display: grid;

  335.   grid-template-columns: repeat(3, minmax(0, 1fr));

  336.   gap: 10px;

  337.   margin-top: 12px;

  338. }

  339. .signal-card {

  340.   padding: 12px;

  341.   border: 1px solid var(--border);

  342.   border-radius: var(--radius);

  343.   background: var(--bg-2);

  344. }

  345. .signal-head {

  346.   display: flex;

  347.   align-items: center;

  348.   justify-content: space-between;

  349.   gap: 10px;

  350.   margin-bottom: 8px;

  351. }

  352. .signal-title {

  353.   font-size: 10px;

  354.   color: var(--text-dim);

  355.   text-transform: uppercase;

  356.   letter-spacing: 1.2px;

  357. }

  358. .signal-value {

  359.   font-size: 11px;

  360.   color: var(--text);

  361.   font-weight: 700;

  362. }

  363. .meter {

  364.   width: 100%;

  365.   height: 10px;

  366.   border-radius: 999px;

  367.   background: #171821;

  368.   border: 1px solid var(--border);

  369.   overflow: hidden;

  370. }

  371. .meter-fill {

  372.   height: 100%;

  373.   width: 0%;

  374.   transition: width .25s ease, background-color .25s ease;

  375.   background: linear-gradient(90deg, var(--green), #5cff90);

  376. }

  377. .meter-fill.warn {

  378.   background: linear-gradient(90deg, var(--amber), #ffc45b);

  379. }

  380. .meter-fill.err {

  381.   background: linear-gradient(90deg, var(--accent), #ff6b63);

  382. }

  383. .spark {

  384.   width: 100%;

  385.   height: 34px;

  386.   margin-top: 10px;

  387.   border-radius: 6px;

  388.   background: rgba(255,255,255,0.01);

  389.   border: 1px solid rgba(255,255,255,0.03);

  390. }

  391. .spark path.line {

  392.   fill: none;

  393.   stroke-width: 2;

  394.   stroke-linecap: round;

  395.   stroke-linejoin: round;

  396. }

  397. .spark path.area {

  398.   opacity: .14;

  399. }

  400. .spark.good path.line { stroke: var(--green); }

  401. .spark.good path.area { fill: var(--green); }

  402. .spark.warn path.line { stroke: var(--amber); }

  403. .spark.warn path.area { fill: var(--amber); }

  404. .spark.err path.line { stroke: var(--accent); }

  405. .spark.err path.area { fill: var(--accent); }

  406. 

  407. .panel {

  408.   overflow: hidden;

  409. }

  410. .panel-head {

  411.   display: flex;

  412.   align-items: center;

  413.   gap: 8px;

  414.   padding: 12px 14px;

  415.   border-bottom: 1px solid var(--border);

  416.   background: var(--surface2);

  417.   cursor: pointer;

  418.   user-select: none;

  419. }

  420. .panel-head h2 {

  421.   font-size: 11px;

  422.   font-weight: 700;

  423.   text-transform: uppercase;

  424.   letter-spacing: 1.6px;

  425.   color: var(--text-dim);

  426. }

  427. .panel-head .meta {

  428.   margin-left: auto;

  429.   margin-right: 8px;

  430.   font-size: 10px;

  431.   color: var(--text-muted);

  432.   text-transform: uppercase;

  433.   letter-spacing: 1px;

  434. }

  435. .panel-head .chevron {

  436.   color: var(--text-dim);

  437.   transition: transform .2s ease;

  438.   font-size: 10px;

  439. }

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

  441. .panel-body { padding: 14px; }

  442. .panel-body.collapsed { display: none; }

  443. 

  444. .section-note {

  445.   font-size: 11px;

  446.   color: var(--text-muted);

  447.   margin-bottom: 12px;

  448. }

  449. .shortcuts-grid {

  450.   display: grid;

  451.   grid-template-columns: repeat(2, minmax(0, 1fr));

  452.   gap: 8px 12px;

  453. }

  454. .shortcut-line {

  455.   display: flex;

  456.   align-items: center;

  457.   justify-content: space-between;

  458.   gap: 12px;

  459.   padding: 7px 0;

  460.   border-bottom: 1px solid #1a1a22;

  461. }

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

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

  464. .shortcut-line .keys {

  465.   display: inline-flex;

  466.   gap: 6px;

  467.   flex-wrap: wrap;

  468. }

  469. .kbd {

  470.   min-width: 28px;

  471.   padding: 3px 7px;

  472.   border: 1px solid var(--border);

  473.   border-bottom-width: 2px;

  474.   border-radius: 6px;

  475.   background: var(--bg-2);

  476.   font-size: 10px;

  477.   color: var(--text);

  478.   text-align: center;

  479. }

  480. 

  481. .preset-row {

  482.   display: flex;

  483.   flex-wrap: wrap;

  484.   gap: 8px;

  485.   margin-bottom: 12px;

  486. }

  487. .preset-btn {

  488.   min-height: 34px;

  489.   padding: 0 12px;

  490.   font-size: 11px;

  491.   letter-spacing: .8px;

  492.   color: var(--text-dim);

  493. }

  494. .preset-btn.active {

  495.   border-color: var(--blue);

  496.   color: var(--blue);

  497.   background: rgba(10,132,255,.08);

  498. }

  499. .preset-btn.rds {

  500.   text-transform: none;

  501.   font-weight: 600;

  502. }

  503. 

  504. .ctrl-row {

  505.   display: flex;

  506.   align-items: center;

  507.   gap: 12px;

  508.   padding: 10px 0;

  509.   border-bottom: 1px solid #1a1a22;

  510. }

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

  512. .ctrl-label-wrap {

  513.   min-width: 130px;

  514.   display: flex;

  515.   flex-direction: column;

  516.   gap: 2px;

  517. }

  518. .ctrl-label {

  519.   font-size: 11px;

  520.   color: var(--text-dim);

  521.   text-transform: uppercase;

  522.   letter-spacing: .8px;

  523. }

  524. .ctrl-sub {

  525.   font-size: 10px;

  526.   color: var(--text-muted);

  527. }

  528. .ctrl-input {

  529.   flex: 1;

  530.   display: flex;

  531.   align-items: center;

  532.   gap: 10px;

  533. }

  534. 

  535. input[type="range"] {

  536.   -webkit-appearance: none;

  537.   appearance: none;

  538.   flex: 1;

  539.   height: 6px;

  540.   background: linear-gradient(90deg, var(--border), var(--surface3));

  541.   border-radius: 999px;

  542.   outline: none;

  543. }

  544. input[type="range"]::-webkit-slider-thumb {

  545.   -webkit-appearance: none;

  546.   width: 16px;

  547.   height: 16px;

  548.   border-radius: 50%;

  549.   background: var(--text);

  550.   border: 2px solid var(--bg);

  551.   cursor: pointer;

  552.   transition: background .15s ease, transform .15s ease;

  553. }

  554. input[type="range"]::-webkit-slider-thumb:hover {

  555.   background: var(--accent);

  556.   transform: scale(1.06);

  557. }

  558. input[type="number"], input[type="text"] {

  559.   background: var(--bg);

  560.   border: 1px solid var(--border);

  561.   border-radius: 6px;

  562.   color: var(--text);

  563.   padding: 8px 10px;

  564.   outline: none;

  565.   transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;

  566. }

  567. input[type="number"] {

  568.   width: 92px;

  569.   text-align: right;

  570. }

  571. input[type="text"] { width: 100%; }

  572. input:focus {

  573.   border-color: var(--accent);

  574.   box-shadow: 0 0 0 3px rgba(255,59,48,.12);

  575. }

  576. input.input-dirty {

  577.   border-color: var(--amber);

  578.   box-shadow: 0 0 0 3px rgba(255,159,10,.08);

  579. }

  580. input.input-error {

  581.   border-color: var(--accent);

  582.   box-shadow: 0 0 0 3px rgba(255,59,48,.14);

  583.   background: rgba(255,59,48,.04);

  584. }

  585. .val-display {

  586.   min-width: 64px;

  587.   text-align: right;

  588.   font-size: 12px;

  589.   font-weight: 700;

  590.   color: var(--text);

  591. }

  592. .unit-label {

  593.   font-size: 11px;

  594.   color: var(--text-dim);

  595.   min-width: 44px;

  596. }

  597. .field-error {

  598.   display: none;

  599.   margin-top: 8px;

  600.   font-size: 11px;

  601.   color: var(--accent);

  602. }

  603. .field-error.show { display: block; }

  604. 

  605. .toggle-row {

  606.   display: flex;

  607.   align-items: center;

  608.   justify-content: space-between;

  609.   gap: 14px;

  610.   padding: 12px 0;

  611.   border-bottom: 1px solid #1a1a22;

  612. }

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

  614. .toggle-copy {

  615.   display: flex;

  616.   flex-direction: column;

  617.   gap: 3px;

  618. }

  619. .toggle-copy .title {

  620.   font-size: 12px;

  621.   color: var(--text);

  622.   font-weight: 700;

  623. }

  624. .toggle-copy .sub {

  625.   font-size: 10px;

  626.   color: var(--text-muted);

  627. }

  628. .toggle-ctl {

  629.   display: flex;

  630.   align-items: center;

  631.   gap: 10px;

  632. }

  633. .toggle {

  634.   position: relative;

  635.   width: 42px;

  636.   height: 24px;

  637.   background: var(--border);

  638.   border-radius: 999px;

  639.   cursor: pointer;

  640.   transition: all .2s ease;

  641.   flex-shrink: 0;

  642. }

  643. .toggle::after {

  644.   content: '';

  645.   position: absolute;

  646.   top: 3px;

  647.   left: 3px;

  648.   width: 18px;

  649.   height: 18px;

  650.   background: var(--text);

  651.   border-radius: 50%;

  652.   transition: transform .2s ease;

  653. }

  654. .toggle.on { background: var(--green); }

  655. .toggle.on::after { transform: translateX(18px); }

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

  657. .toggle-state {

  658.   min-width: 52px;

  659.   text-align: right;

  660.   font-size: 11px;

  661.   color: var(--text-dim);

  662.   text-transform: uppercase;

  663.   letter-spacing: 1px;

  664. }

  665. 

  666. .rds-grid {

  667.   display: grid;

  668.   gap: 12px;

  669. }

  670. .rds-field {

  671.   display: flex;

  672.   flex-direction: column;

  673.   gap: 6px;

  674. }

  675. .rds-input {

  676.   width: 100%;

  677.   background: var(--bg);

  678.   border: 1px solid var(--border);

  679.   border-radius: 6px;

  680.   color: var(--green);

  681.   font-family: var(--mono);

  682.   font-size: 15px;

  683.   font-weight: 700;

  684.   padding: 10px 12px;

  685.   outline: none;

  686.   letter-spacing: 2px;

  687.   text-transform: uppercase;

  688. }

  689. .rds-input.rt {

  690.   color: var(--text);

  691.   text-transform: none;

  692.   letter-spacing: .5px;

  693.   font-size: 12px;

  694.   font-weight: 500;

  695. }

  696. .rds-charcount {

  697.   font-size: 10px;

  698.   color: var(--text-dim);

  699.   text-align: right;

  700. }

  701. 

  702. .actions-row {

  703.   display: flex;

  704.   gap: 10px;

  705.   flex-wrap: wrap;

  706.   margin-top: 14px;

  707. }

  708. .apply-btn {

  709.   background: var(--accent);

  710.   border-color: transparent;

  711.   color: #fff;

  712. }

  713. .apply-btn.secondary {

  714.   background: var(--surface2);

  715.   color: var(--text-dim);

  716.   border-color: var(--border);

  717. }

  718. .apply-btn.ok { background: var(--green); color: var(--bg); }

  719. 

  720. .sidebar-card {

  721.   padding: 14px;

  722. }

  723. .sidebar-section + .sidebar-section {

  724.   margin-top: 14px;

  725.   padding-top: 14px;

  726.   border-top: 1px solid var(--border);

  727. }

  728. .sidebar-title {

  729.   font-size: 11px;

  730.   text-transform: uppercase;

  731.   letter-spacing: 1.4px;

  732.   color: var(--text-dim);

  733.   margin-bottom: 10px;

  734. }

  735. .kv {

  736.   display: grid;

  737.   grid-template-columns: auto 1fr;

  738.   gap: 8px 12px;

  739.   align-items: start;

  740. }

  741. .kv .k {

  742.   font-size: 10px;

  743.   color: var(--text-muted);

  744.   text-transform: uppercase;

  745.   letter-spacing: 1px;

  746. }

  747. .kv .v {

  748.   font-size: 12px;

  749.   color: var(--text);

  750.   word-break: break-word;

  751. }

  752. .health-line {

  753.   display: flex;

  754.   align-items: center;

  755.   justify-content: space-between;

  756.   gap: 10px;

  757.   padding: 8px 0;

  758.   border-bottom: 1px solid #1a1a22;

  759. }

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

  761. .health-line .name {

  762.   font-size: 11px;

  763.   color: var(--text-dim);

  764. }

  765. .health-line .val {

  766.   font-size: 11px;

  767.   color: var(--text);

  768.   text-align: right;

  769. }

  770. .health-line .val.good { color: var(--green); }

  771. .health-line .val.warn { color: var(--amber); }

  772. .health-line .val.err { color: var(--accent); }

  773. 

  774. .fault-history {

  775.   margin-top: 12px;

  776.   padding: 10px;

  777.   border: 1px solid var(--border);

  778.   border-radius: 6px;

  779.   background: var(--surface1);

  780.   font-size: 11px;

  781.   max-height: 180px;

  782.   overflow-y: auto;

  783.   line-height: 1.3;

  784. }

  785. .fault-history-entry {

  786.   display: flex;

  787.   justify-content: space-between;

  788.   gap: 10px;

  789.   padding: 4px 0;

  790.   border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  791. }

  792. .fault-history-entry:last-child {

  793.   border-bottom: none;

  794. }

  795. .fault-history-entry .fault-history-time {

  796.   color: var(--text-dim);

  797. }

  798. .fault-history-entry.ok { color: var(--green); }

  799. .fault-history-entry.warn { color: var(--amber); }

  800. .fault-history-entry.err { color: var(--accent); }

  801. .fault-history-desc {

  802.   font-size: 10px;

  803.   flex: 1;

  804.   text-transform: uppercase;

  805.   letter-spacing: 0.5px;

  806. }

  807. .fault-history-empty {

  808.   padding: 6px 0;

  809.   color: var(--text-muted);

  810.   font-size: 11px;

  811. }

  812. .section-note.reset-hint {

  813.   font-size: 11px;

  814.   color: var(--text-dim);

  815.   margin-top: 10px;

  816. }

  817. 

  818. .log {

  819.   background: var(--bg);

  820.   border: 1px solid var(--border);

  821.   border-radius: 6px;

  822.   padding: 10px;

  823.   font-size: 10px;

  824.   color: var(--text-dim);

  825.   max-height: 220px;

  826.   overflow-y: auto;

  827.   white-space: pre-wrap;

  828.   word-break: break-word;

  829. }

  830. .log .entry { padding: 3px 0; }

  831. .log .entry.err { color: var(--accent); }

  832. .log .entry.ok { color: var(--green); }

  833. .log .entry.warn { color: var(--amber); }

  834. .log .entry.info { color: var(--blue); }

  835. .empty-log {

  836.   color: var(--text-muted);

  837. }

  838. 

  839. .toast {

  840.   position: fixed;

  841.   right: 16px;

  842.   bottom: 16px;

  843.   max-width: min(420px, calc(100vw - 24px));

  844.   padding: 12px 15px;

  845.   border-radius: var(--radius);

  846.   font-size: 12px;

  847.   font-weight: 700;

  848.   z-index: 2000;

  849.   transform: translateY(60px);

  850.   opacity: 0;

  851.   transition: all .25s ease;

  852.   box-shadow: var(--shadow);

  853. }

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

  855. .toast.ok { background: var(--green); color: var(--bg); }

  856. .toast.err { background: var(--accent); color: #fff; }

  857. .toast.info { background: var(--blue); color: #fff; }

  858. .toast.warn { background: var(--amber); color: #141414; }

  859. 

  860. @media (max-width: 980px) {

  861.   .layout { grid-template-columns: 1fr; }

  862.   .tx-bar {

  863.     grid-template-columns: 1fr;

  864.     align-items: stretch;

  865.   }

  866.   .tx-state-wrap {

  867.     align-items: flex-start;

  868.   }

  869.   .status-hint { text-align: left; }

  870.   .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  871.   .signal-grid { grid-template-columns: 1fr; }

  872. }

  873. 

  874. @media (max-width: 640px) {

  875.   .app { padding: 12px; }

  876.   .header { flex-direction: column; align-items: stretch; gap: 10px; }

  877.   .header h1 { font-size: 22px; }

  878.   .header-sub { gap: 6px; }

  879.   .badge { width: 100%; justify-content: space-between; }

  880.   .quick-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

  881.   .quick-item { padding: 10px; }

  882.   .quick-item .value { font-size: 16px; }

  883.   .ctrl-row { flex-direction: column; align-items: stretch; }

  884.   .ctrl-label-wrap { min-width: auto; }

  885.   .ctrl-input { flex-wrap: wrap; }

  886.   input[type="number"] { width: 100%; text-align: left; }

  887.   .actions-row, .tx-actions { flex-direction: column; }

  888.   .tx-btn, .ghost-btn, .apply-btn, .preset-btn, .danger-btn { width: 100%; }

  889.   .panel-head { padding: 11px 12px; }

  890.   .panel-body, .sidebar-card { padding: 12px; }

  891.   .freq-display { font-size: 31px; }

  892.   .preset-row { flex-direction: column; }

  893.   .shortcuts-grid { grid-template-columns: 1fr; }

  894. }

  895. </style>

  896. </head>

  897. <body>

  898. <div class="app">

  899.   <div class="header">

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

  901.       <h1>FM-RDS-TX</h1>

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

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

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

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

  906.       </div>

  907.     </div>

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

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

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

  911.     </div>

  912.   </div>

  913. 

  914.   <div class="layout">

  915.     <div class="stack">

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

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

  918.           <div class="freq-display-wrap">

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

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

  921.           </div>

  922. 

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

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

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

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

  927.           </div>

  928. 

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

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

  931.             <div class="status-hint" id="tx-hint">Awaiting runtime data</div>

  932.           </div>

  933.         </div>

  934. 

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

  936.           <div class="quick-item">

  937.             <div class="label">Chunks</div>

  938.             <div class="value" id="t-chunks">--</div>

  939.           </div>

  940.           <div class="quick-item">

  941.             <div class="label">Samples</div>

  942.             <div class="value" id="t-samples">--</div>

  943.           </div>

  944.           <div class="quick-item">

  945.             <div class="label">Underruns</div>

  946.             <div class="value" id="t-underruns">--</div>

  947.           </div>

  948.           <div class="quick-item">

  949.             <div class="label">Uptime</div>

  950.             <div class="value" id="t-uptime">--</div>

  951.           </div>

  952.           <div class="quick-item">

  953.             <div class="label">Rate</div>

  954.             <div class="value" id="t-rate">--</div>

  955.           </div>

  956.         </div>

  957. 

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

  959.           <div class="signal-card">

  960.             <div class="signal-head">

  961.               <div class="signal-title">Audio Buffer</div>

  962.               <div class="signal-value" id="meter-audio-text">--</div>

  963.             </div>

  964.             <div class="meter"><div class="meter-fill" id="meter-audio-fill"></div></div>

  965.             <svg class="spark good" id="spark-audio" viewBox="0 0 160 34" preserveAspectRatio="none"></svg>

  966.           </div>

  967.           <div class="signal-card">

  968.             <div class="signal-head">

  969.               <div class="signal-title">Stream Health</div>

  970.               <div class="signal-value" id="meter-stream-text">--</div>

  971.             </div>

  972.             <div class="meter"><div class="meter-fill" id="meter-stream-fill"></div></div>

  973.             <svg class="spark warn" id="spark-underruns" viewBox="0 0 160 34" preserveAspectRatio="none"></svg>

  974.           </div>

  975.           <div class="signal-card">

  976.             <div class="signal-head">

  977.               <div class="signal-title">TX Activity</div>

  978.               <div class="signal-value" id="meter-tx-text">--</div>

  979.             </div>

  980.             <div class="meter"><div class="meter-fill" id="meter-tx-fill"></div></div>

  981.             <svg class="spark good" id="spark-tx" viewBox="0 0 160 34" preserveAspectRatio="none"></svg>

  982.           </div>

  983.         </div>

  984.       </div>

  985. 

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

  987.         <div class="panel-head" data-panel>

  988.           <div class="led on-green" style="width:6px;height:6px"></div>

  989.           <h2>Frequency</h2>

  990.           <div class="meta" id="freq-meta">Live-tunable</div>

  991.           <span class="chevron">▼</span>

  992.         </div>

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

  994.           <div class="section-note">Tune the RF carrier without restarting the control plane. Draft values stay local until you apply them.</div>

  995. 

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

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

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

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

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

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

  1002.           </div>

  1003. 

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

  1005.             <div class="ctrl-label-wrap">

  1006.               <span class="ctrl-label">TX Freq</span>

  1007.               <span class="ctrl-sub">Valid range 65–110 MHz</span>

  1008.             </div>

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

  1010.               <input type="range" min="65" max="110" step="0.1" id="freq-slider">

  1011.               <input type="number" min="65" max="110" step="0.1" id="freq-num">

  1012.               <span class="unit-label">MHz</span>

  1013.             </div>

  1014.           </div>

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

  1016.           <div class="actions-row">

  1017.             <button class="apply-btn" id="freq-apply" type="button">Apply Frequency</button>

  1018.             <button class="apply-btn secondary" id="freq-reset" type="button">Reset</button>

  1019.           </div>

  1020.         </div>

  1021.       </div>

  1022. 

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

  1024.         <div class="panel-head" data-panel>

  1025.           <div class="led on-green" style="width:6px;height:6px"></div>

  1026.           <h2>Switches</h2>

  1027.           <div class="meta">Live</div>

  1028.           <span class="chevron">▼</span>

  1029.         </div>

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

  1031.           <div class="section-note">These switches apply immediately and show a busy state while the request is in flight.</div>

  1032. 

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

  1034.             <div class="toggle-copy">

  1035.               <div class="title">Stereo</div>

  1036.               <div class="sub">19 kHz pilot + 38 kHz DSB-SC</div>

  1037.             </div>

  1038.             <div class="toggle-ctl">

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

  1040.               <div class="toggle-state" id="stereo-label">--</div>

  1041.             </div>

  1042.           </div>

  1043. 

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

  1045.             <div class="toggle-copy">

  1046.               <div class="title">RDS</div>

  1047.               <div class="sub">57 kHz subcarrier encoder</div>

  1048.             </div>

  1049.             <div class="toggle-ctl">

  1050.               <div class="toggle" id="tog-rds" data-toggle="rdsEnabled" role="switch" aria-checked="false" tabindex="0"></div>

  1051.               <div class="toggle-state" id="rds-label">--</div>

  1052.             </div>

  1053.           </div>

  1054. 

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

  1056.             <div class="toggle-copy">

  1057.               <div class="title">Limiter</div>

  1058.               <div class="sub">MPX peak protection</div>

  1059.             </div>

  1060.             <div class="toggle-ctl">

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

  1062.               <div class="toggle-state" id="limiter-label">--</div>

  1063.             </div>

  1064.           </div>

  1065.         </div>

  1066.       </div>

  1067. 

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

  1069.         <div class="panel-head" data-panel>

  1070.           <div class="led on-amber" style="width:6px;height:6px"></div>

  1071.           <h2>RDS Text</h2>

  1072.           <div class="meta" id="rds-meta">PS + RT</div>

  1073.           <span class="chevron">▼</span>

  1074.         </div>

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

  1076.           <div class="section-note">Edit Program Service and RadioText without losing in-progress typing when the page refreshes itself.</div>

  1077. 

  1078.           <div class="preset-row" id="rds-presets">

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

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

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

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

  1083.           </div>

  1084. 

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

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

  1087.               <span class="ctrl-label">Program Service (PS)</span>

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

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

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

  1091.             </div>

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

  1093.               <span class="ctrl-label">RadioText (RT)</span>

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

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

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

  1097.             </div>

  1098.           </div>

  1099.           <div class="actions-row">

  1100.             <button class="apply-btn" id="rds-apply" type="button">Apply RDS Text</button>

  1101.             <button class="apply-btn secondary" id="rds-reset" type="button">Reset</button>

  1102.           </div>

  1103.         </div>

  1104.       </div>

  1105.     </div>

  1106. 

  1107.     <div class="stack">

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

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

  1110.           <div class="sidebar-title">System Snapshot</div>

  1111.           <div class="kv">

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

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

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

  1115.             <div class="k">FM Mod</div><div class="v" id="info-fmmod">--</div>

  1116.             <div class="k">Live Config</div><div class="v" id="info-live">--</div>

  1117.           </div>

  1118.         </div>

  1119. 

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

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

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

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

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

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

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

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

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

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

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

  1131.         </div>

  1132.       </div>

  1133. 

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

  1135.         <div class="panel-head" data-panel>

  1136.           <h2>Shortcuts</h2>

  1137.           <div class="meta">keyboard</div>

  1138.           <span class="chevron">▼</span>

  1139.         </div>

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

  1141.           <div class="section-note">Fast control, as long as you're not typing in an input field.</div>

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

  1143.             <div>

  1144.               <div class="shortcut-line"><span class="name">Start TX</span><span class="keys"><span class="kbd">t</span></span></div>

  1145.               <div class="shortcut-line"><span class="name">Stop TX</span><span class="keys"><span class="kbd">Shift</span><span class="kbd">t</span></span></div>

  1146.               <div class="shortcut-line"><span class="name">Refresh</span><span class="keys"><span class="kbd">r</span></span></div>

  1147.             </div>

  1148.             <div>

  1149.               <div class="shortcut-line"><span class="name">Next Freq Preset</span><span class="keys"><span class="kbd">]</span></span></div>

  1150.               <div class="shortcut-line"><span class="name">Prev Freq Preset</span><span class="keys"><span class="kbd">[</span></span></div>

  1151.               <div class="shortcut-line"><span class="name">Apply Draft</span><span class="keys"><span class="kbd">Enter</span></span></div>

  1152.             </div>

  1153.           </div>

  1154.         </div>

  1155.       </div>

  1156. 

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

  1158.         <div class="panel-head" data-panel>

  1159.           <h2>Danger Zone</h2>

  1160.           <div class="meta">tx control</div>

  1161.           <span class="chevron">▼</span>

  1162.         </div>

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

  1164.           <div class="section-note">Fast emergency controls. Nothing hidden here — just clearer separation from normal controls.</div>

  1165.           <div class="actions-row" style="margin-top:0">

  1166.             <button class="danger-btn" id="danger-stop" type="button">Emergency Stop TX</button>

  1167.             <button class="danger-btn" id="danger-refresh" type="button">Hard Refresh Runtime</button>

  1168.             <button class="danger-btn secondary" id="danger-reset-fault" type="button">Reset Fault</button>

  1169. 

  1170.           </div>

  1171.           <div class="section-note reset-hint" id="reset-hint">

  1172.             Reset Fault moves the runtime back to DEGRADED while the queue settles before running again.

  1173.           </div>

  1174.         </div>

  1175.       </div>

  1176. 

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

  1178.         <div class="panel-head" data-panel>

  1179.           <h2>Fault History</h2>

  1180.           <div class="meta">recent faults</div>

  1181.           <span class="chevron">▼</span>

  1182.         </div>

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

  1184.           <div class="section-note">Recent fault events for quick ops situational awareness.</div>

  1185.           <div class="fault-history" id="fault-history">

  1186.             <div class="fault-history-empty">No faults yet.</div>

  1187.           </div>

  1188.         </div>

  1189.       </div>

  1190. 

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

  1192.         <div class="panel-head" data-panel>

  1193.           <h2>Activity Log</h2>

  1194.           <div class="meta" id="log-meta">recent events</div>

  1195.           <span class="chevron">▼</span>

  1196.         </div>

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

  1198.           <div class="actions-row" style="margin-top:0;margin-bottom:12px">

  1199.             <button class="ghost-btn" id="btn-clear-log" type="button">Clear Log</button>

  1200.           </div>

  1201.           <div class="log" id="log"><div class="empty-log">No events yet.</div></div>

  1202.         </div>

  1203.       </div>

  1204.     </div>

  1205.   </div>

  1206. </div>

  1207. 

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

  1209. 

  1210. <script>

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

  1212. 

  1213. const runtimePollMs = 1000;

  1214. const configPollMs = 8000;

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

  1216. const freqPresetValues = [87.6, 94.5, 99.5, 100.0, 107.9];

  1217. const sparkHistoryLimit = 40;

  1218. 

  1219. const state = {

  1220.   server: {

  1221.     config: null,

  1222.     runtime: null,

  1223.     lastConfigAt: 0,

  1224.     lastRuntimeAt: 0,

  1225.     configOk: false,

  1226.     runtimeOk: false,

  1227.   },

  1228.   lastRuntimeState: '',

  1229.   draft: {

  1230.     frequencyMHz: undefined,

  1231.     ps: undefined,

  1232.     radioText: undefined,

  1233.   },

  1234.   errors: {

  1235.     frequencyMHz: '',

  1236.     ps: '',

  1237.     radioText: '',

  1238.   },

  1239.   dirty: new Set(),

  1240.   pendingRequests: 0,

  1241.   txBusy: false,

  1242.   faultResetBusy: false,

  1243.   toggleBusy: {},

  1244.   pollersStarted: false,

  1245.   mobilePanelsApplied: false,

  1246.   charts: {

  1247.     audio: [],

  1248.     underruns: [],

  1249.     tx: [],

  1250.   },

  1251.   freqPresetIndex: 0,

  1252. };

  1253. 

  1254. const fields = {

  1255.   frequencyMHz: { section: 'freq', equal: (a,b) => nearlyEqual(a,b,0.0001) },

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

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

  1258. };

  1259. 

  1260. function nearlyEqual(a, b, eps = 1e-9) {

  1261.   if (a == null && b == null) return true;

  1262.   if (a == null || b == null) return false;

  1263.   return Math.abs(Number(a) - Number(b)) <= eps;

  1264. }

  1265. 

  1266. function nowTs() { return Date.now(); }

  1267. 

  1268. function serverValue(key) {

  1269.   const cfg = state.server.config;

  1270.   if (!cfg) return undefined;

  1271.   switch (key) {

  1272.     case 'frequencyMHz': return cfg.fm?.frequencyMHz;

  1273.     case 'ps': return cfg.rds?.ps ?? '';

  1274.     case 'radioText': return cfg.rds?.radioText ?? '';

  1275.     case 'stereoEnabled': return cfg.fm?.stereoEnabled;

  1276.     case 'rdsEnabled': return cfg.rds?.enabled;

  1277.     case 'limiterEnabled': return cfg.fm?.limiterEnabled;

  1278.     default: return undefined;

  1279.   }

  1280. }

  1281. 

  1282. function effectiveValue(key) {

  1283.   return state.dirty.has(key) ? state.draft[key] : serverValue(key);

  1284. }

  1285. 

  1286. function validateField(key, value) {

  1287.   switch (key) {

  1288.     case 'frequencyMHz': {

  1289.       if (value == null || Number.isNaN(Number(value))) return 'Enter a valid number.';

  1290.       const num = Number(value);

  1291.       if (num < 65 || num > 110) return 'Frequency must stay between 65 and 110 MHz.';

  1292.       return '';

  1293.     }

  1294.     case 'ps': {

  1295.       const text = String(value ?? '');

  1296.       if (text.length > 8) return 'PS is limited to 8 characters.';

  1297.       return '';

  1298.     }

  1299.     case 'radioText': {

  1300.       const text = String(value ?? '');

  1301.       if (text.length > 64) return 'RadioText is limited to 64 characters.';

  1302.       return '';

  1303.     }

  1304.     default:

  1305.       return '';

  1306.   }

  1307. }

  1308. 

  1309. function sectionHasErrors(section) {

  1310.   return Object.entries(fields).some(([key, meta]) => meta.section === section && state.errors[key]);

  1311. }

  1312. 

  1313. function setDirty(key, value) {

  1314.   state.draft[key] = value;

  1315.   state.errors[key] = validateField(key, value);

  1316.   const current = serverValue(key);

  1317.   const equal = !state.errors[key] && fields[key].equal(value, current);

  1318.   if (equal) {

  1319.     state.dirty.delete(key);

  1320.     state.draft[key] = undefined;

  1321.   } else {

  1322.     state.dirty.add(key);

  1323.   }

  1324.   if (key === 'frequencyMHz' && typeof value === 'number') syncFreqPresetIndex(value);

  1325.   render();

  1326. }

  1327. 

  1328. function clearDirty(keys) {

  1329.   for (const key of keys) {

  1330.     state.dirty.delete(key);

  1331.     state.draft[key] = undefined;

  1332.     state.errors[key] = '';

  1333.   }

  1334.   render();

  1335. }

  1336. 

  1337. function isDirtySection(section) {

  1338.   for (const key of state.dirty) {

  1339.     if (fields[key]?.section === section) return true;

  1340.   }

  1341.   return false;

  1342. }

  1343. 

  1344. function getSectionPatch(section) {

  1345.   const patch = {};

  1346.   for (const key of state.dirty) {

  1347.     if (fields[key]?.section === section && !state.errors[key]) patch[key] = state.draft[key];

  1348.   }

  1349.   return patch;

  1350. }

  1351. 

  1352. async function api(path, opts) {

  1353.   const response = await fetch(path, opts);

  1354.   const text = await response.text();

  1355.   if (!response.ok) {

  1356.     throw new Error(text.trim() || `HTTP ${response.status}`);

  1357.   }

  1358.   if (!text) return {};

  1359.   try {

  1360.     return JSON.parse(text);

  1361.   } catch {

  1362.     return { ok: true, raw: text };

  1363.   }

  1364. }

  1365. 

  1366. function setConnection(ok, mode) {

  1367.   const led = $('led-conn');

  1368.   const label = $('conn-label');

  1369.   if (ok) {

  1370.     led.className = 'led on-green';

  1371.     label.textContent = mode || 'connected';

  1372.   } else {

  1373.     led.className = 'led on-red';

  1374.     label.textContent = mode || 'offline';

  1375.   }

  1376. }

  1377. 

  1378. async function loadConfig({ silent = false } = {}) {

  1379.   try {

  1380.     const cfg = await api('/config');

  1381.     state.server.config = cfg;

  1382.     state.server.configOk = true;

  1383.     state.server.lastConfigAt = nowTs();

  1384.     syncFreqPresetIndex(cfg.fm?.frequencyMHz);

  1385.     setConnection(true, state.pendingRequests > 0 ? 'busy' : 'connected');

  1386.     render();

  1387.     if (!silent) log('Config synced from server', 'info');

  1388.     return cfg;

  1389.   } catch (error) {

  1390.     state.server.configOk = false;

  1391.     if (!state.server.runtimeOk) setConnection(false, 'offline');

  1392.     render();

  1393.     if (!silent) log('Config load failed: ' + error.message, 'err');

  1394.     throw error;

  1395.   }

  1396. }

  1397. 

  1398. async function loadRuntime({ silent = true } = {}) {

  1399.   try {

  1400.     const runtime = await api('/runtime');

  1401.     state.server.runtime = runtime;

  1402.     state.server.runtimeOk = true;

  1403.     state.server.lastRuntimeAt = nowTs();

  1404.     notifyRuntimeTransition(runtime.engine);

  1405.     pushHistory(runtime);

  1406.     setConnection(true, state.pendingRequests > 0 ? 'busy' : 'connected');

  1407.     render();

  1408.     return runtime;

  1409.   } catch (error) {

  1410.     state.server.runtimeOk = false;

  1411.     if (!state.server.configOk) setConnection(false, 'offline');

  1412.     render();

  1413.     if (!silent) log('Runtime load failed: ' + error.message, 'err');

  1414.     throw error;

  1415.   }

  1416. }

  1417. 

  1418. function pushHistory(runtime) {

  1419.   const engine = runtime.engine || {};

  1420.   const driver = runtime.driver || {};

  1421.   const audio = runtime.audioStream || {};

  1422.   pushChart(state.charts.audio, typeof audio.buffered === 'number' ? audio.buffered : 0);

  1423.   pushChart(state.charts.underruns, Number(engine.underruns ?? driver.underruns ?? 0));

  1424.   const txState = String(engine.state || 'idle').toLowerCase();

  1425.   pushChart(state.charts.tx, txState === 'running' ? 1 : state.txBusy ? 0.55 : 0.05);

  1426. }

  1427. 

  1428. function pushChart(arr, value) {

  1429.   arr.push(Number.isFinite(value) ? value : 0);

  1430.   if (arr.length > sparkHistoryLimit) arr.splice(0, arr.length - sparkHistoryLimit);

  1431. }

  1432. 

  1433. function setConnectionBusy() {

  1434.   setConnection(true, 'busy');

  1435. }

  1436. 

  1437. function beginRequest() {

  1438.   state.pendingRequests += 1;

  1439.   setConnectionBusy();

  1440.   render();

  1441. }

  1442. 

  1443. function endRequest() {

  1444.   state.pendingRequests = Math.max(0, state.pendingRequests - 1);

  1445.   if (state.server.configOk || state.server.runtimeOk) {

  1446.     setConnection(true, state.pendingRequests > 0 ? 'busy' : 'connected');

  1447.   }

  1448.   render();

  1449. }

  1450. 

  1451. async function sendPatch(patch, { successMessage = 'Applied', clearKeys = [] } = {}) {

  1452.   beginRequest();

  1453.   try {

  1454.     const result = await api('/config', {

  1455.       method: 'POST',

  1456.       headers: { 'Content-Type': 'application/json' },

  1457.       body: JSON.stringify(patch),

  1458.     });

  1459.     if (state.server.config) mergeLocalConfigPatch(patch);

  1460.     clearDirty(clearKeys);

  1461.     render();

  1462.     toast(successMessage + (result.live ? ' · live' : ''), 'ok');

  1463.     log('PATCH ' + JSON.stringify(patch) + (result.live ? ' [live]' : ' [saved]'), 'ok');

  1464.     await Promise.allSettled([

  1465.       loadConfig({ silent: true }),

  1466.       loadRuntime({ silent: true }),

  1467.     ]);

  1468.     return result;

  1469.   } catch (error) {

  1470.     toast(error.message, 'err');

  1471.     log('PATCH failed: ' + error.message, 'err');

  1472.     throw error;

  1473.   } finally {

  1474.     endRequest();

  1475.   }

  1476. }

  1477. 

  1478. function mergeLocalConfigPatch(patch) {

  1479.   const cfg = state.server.config || {};

  1480.   cfg.fm ||= {};

  1481.   cfg.rds ||= {};

  1482.   for (const [key, value] of Object.entries(patch)) {

  1483.     switch (key) {

  1484.       case 'frequencyMHz': cfg.fm.frequencyMHz = value; break;

  1485.       case 'stereoEnabled': cfg.fm.stereoEnabled = value; break;

  1486.       case 'limiterEnabled': cfg.fm.limiterEnabled = value; break;

  1487.       case 'rdsEnabled': cfg.rds.enabled = value; break;

  1488.       case 'ps': cfg.rds.ps = value; break;

  1489.       case 'radioText': cfg.rds.radioText = value; break;

  1490.     }

  1491.   }

  1492. }

  1493. 

  1494. async function applySection(section) {

  1495.   if (sectionHasErrors(section)) {

  1496.     toast('Fix the highlighted fields first', 'warn');

  1497.     log(section.toUpperCase() + ' apply blocked by validation errors', 'warn');

  1498.     render();

  1499.     return;

  1500.   }

  1501.   const patch = getSectionPatch(section);

  1502.   const keys = Object.keys(patch);

  1503.   if (!keys.length) {

  1504.     toast('No changes to apply', 'info');

  1505.     return;

  1506.   }

  1507.   let message = 'Applied';

  1508.   if (section === 'freq') message = 'Frequency updated';

  1509.   if (section === 'rds') message = 'RDS text updated';

  1510.   await sendPatch(patch, { successMessage: message, clearKeys: keys });

  1511. }

  1512. 

  1513. function resetSection(section) {

  1514.   const keys = Object.keys(fields).filter((key) => fields[key].section === section);

  1515.   clearDirty(keys);

  1516.   log(section.toUpperCase() + ' draft reset', 'warn');

  1517.   toast('Draft reset', 'info');

  1518. }

  1519. 

  1520. async function setToggle(key, nextValue) {

  1521.   if (state.toggleBusy[key]) return;

  1522.   state.toggleBusy[key] = true;

  1523.   render();

  1524.   try {

  1525.     await sendPatch({ [key]: nextValue }, {

  1526.       successMessage: key.replace(/Enabled$/, '') + ' ' + (nextValue ? 'enabled' : 'disabled'),

  1527.       clearKeys: [],

  1528.     });

  1529.   } finally {

  1530.     state.toggleBusy[key] = false;

  1531.     render();

  1532.   }

  1533. }

  1534. 

  1535. async function txAction(action) {

  1536.   if (state.txBusy) return;

  1537.   state.txBusy = true;

  1538.   render();

  1539.   beginRequest();

  1540.   try {

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

  1542.     toast(action === 'start' ? 'TX started' : 'TX stopped', 'ok');

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

  1544.     await Promise.allSettled([

  1545.       loadRuntime({ silent: true }),

  1546.       loadConfig({ silent: true }),

  1547.     ]);

  1548.   } catch (error) {

  1549.     toast(error.message, 'err');

  1550.     log('TX ' + action + ' failed: ' + error.message, 'err');

  1551.   } finally {

  1552.     state.txBusy = false;

  1553.     endRequest();

  1554.     render();

  1555.   }

  1556. }

  1557. 

  1558. async function resetFaultAction() {

  1559.   if (state.faultResetBusy) return;

  1560.   state.faultResetBusy = true;

  1561.   render();

  1562.   beginRequest();

  1563.   try {

  1564.     await api('/runtime/fault/reset', { method: 'POST' });

  1565.     toast('Fault reset', 'ok');

  1566.     log('Fault reset request accepted', 'ok');

  1567.     await loadRuntime({ silent: true });

  1568.   } catch (error) {

  1569.     toast(error.message, 'err');

  1570.     log('Fault reset failed: ' + error.message, 'err');

  1571.   } finally {

  1572.     state.faultResetBusy = false;

  1573.     endRequest();

  1574.     render();

  1575.   }

  1576. }

  1577. 

  1578. function fmt(n) {

  1579.   if (n == null) return '--';

  1580.   if (n >= 1e9) return (n / 1e9).toFixed(2) + 'G';

  1581.   if (n >= 1e6) return (n / 1e6).toFixed(2) + 'M';

  1582.   if (n >= 1e3) return (n / 1e3).toFixed(1) + 'k';

  1583.   return String(n);

  1584. }

  1585. 

  1586. function fmtTime(seconds) {

  1587.   if (!seconds || seconds <= 0) return '--';

  1588.   const h = Math.floor(seconds / 3600);

  1589.   const m = Math.floor((seconds % 3600) / 60);

  1590.   const s = Math.floor(seconds % 60);

  1591.   if (h > 0) return `${h}h ${m}m`;

  1592.   if (m > 0) return `${m}m ${s}s`;

  1593.   return `${s}s`;

  1594. }

  1595. 

  1596. function fmtBool(v) {

  1597.   return v == null ? '--' : (v ? 'ON' : 'OFF');

  1598. }

  1599. 

  1600. function fmtFreq(v) {

  1601.   return typeof v === 'number' ? v.toFixed(1) + ' MHz' : '--';

  1602. }

  1603. 

  1604. function fmtPercent(v) {

  1605.   if (typeof v !== 'number') return '--';

  1606.   return (v * 100).toFixed(0) + '%';

  1607. }

  1608. 

  1609. function ageString(ts) {

  1610.   if (!ts) return '--';

  1611.   const diff = Math.max(0, Math.floor((nowTs() - ts) / 1000));

  1612.   if (diff < 2) return 'just now';

  1613.   if (diff < 60) return diff + 's ago';

  1614.   const m = Math.floor(diff / 60);

  1615.   if (m < 60) return m + 'm ago';

  1616.   const h = Math.floor(m / 60);

  1617.   return h + 'h ago';

  1618. }

  1619. 

  1620. function updateText(id, text) {

  1621.   const el = $(id);

  1622.   if (el && el.textContent !== String(text)) el.textContent = text;

  1623. }

  1624. 

  1625. function updateHTML(id, html) {

  1626.   const el = $(id);

  1627.   if (el && el.innerHTML !== html) el.innerHTML = html;

  1628. }

  1629. 

  1630. function syncDirtyInput(id, key, transform = (v) => v) {

  1631.   const el = $(id);

  1632.   if (!el) return;

  1633.   const dirty = state.dirty.has(key);

  1634.   const desired = dirty ? transform(state.draft[key]) : transform(serverValue(key));

  1635.   const asString = desired == null ? '' : String(desired);

  1636.   const isFocused = document.activeElement === el;

  1637.   if (!isFocused || !dirty) {

  1638.     if (el.value !== asString) el.value = asString;

  1639.   }

  1640.   el.classList.toggle('input-dirty', dirty && !state.errors[key]);

  1641.   el.classList.toggle('input-error', !!state.errors[key]);

  1642. }

  1643. 

  1644. function renderFieldErrors() {

  1645.   renderFieldError('freq-error', state.errors.frequencyMHz);

  1646.   renderFieldError('ps-error', state.errors.ps);

  1647.   renderFieldError('rt-error', state.errors.radioText);

  1648. }

  1649. 

  1650. function renderFieldError(id, message) {

  1651.   const el = $(id);

  1652.   el.textContent = message || '';

  1653.   el.classList.toggle('show', !!message);

  1654. }

  1655. 

  1656. function setMeter(fillId, textId, ratio, text, mode = 'good') {

  1657.   const fill = $(fillId);

  1658.   const pct = Math.max(0, Math.min(100, Math.round((ratio ?? 0) * 100)));

  1659.   fill.style.width = pct + '%';

  1660.   fill.className = 'meter-fill' + (mode === 'warn' ? ' warn' : mode === 'err' ? ' err' : '');

  1661.   updateText(textId, text);

  1662. }

  1663. 

  1664. function applyMobilePanelDefaults() {

  1665.   if (!mobileMq.matches || state.mobilePanelsApplied) return;

  1666.   state.mobilePanelsApplied = true;

  1667.   document.querySelectorAll('.panel[data-panel-key]').forEach((panel) => {

  1668.     const key = panel.dataset.panelKey;

  1669.     const head = panel.querySelector('.panel-head');

  1670.     const body = panel.querySelector('.panel-body');

  1671.     const keepOpen = key === 'frequency' || key === 'danger';

  1672.     head.classList.toggle('collapsed', !keepOpen);

  1673.     body.classList.toggle('collapsed', !keepOpen);

  1674.   });

  1675. }

  1676. 

  1677. function syncFreqPresetIndex(value) {

  1678.   if (typeof value !== 'number') return;

  1679.   let closestIndex = 0;

  1680.   let closestDistance = Infinity;

  1681.   freqPresetValues.forEach((freq, idx) => {

  1682.     const dist = Math.abs(freq - value);

  1683.     if (dist < closestDistance) {

  1684.       closestDistance = dist;

  1685.       closestIndex = idx;

  1686.     }

  1687.   });

  1688.   state.freqPresetIndex = closestIndex;

  1689. }

  1690. 

  1691. function cycleFreqPreset(direction) {

  1692.   state.freqPresetIndex = (state.freqPresetIndex + direction + freqPresetValues.length) % freqPresetValues.length;

  1693.   const next = freqPresetValues[state.freqPresetIndex];

  1694.   setDirty('frequencyMHz', next);

  1695.   toast(`Preset ${next.toFixed(1)} MHz loaded`, 'info');

  1696. }

  1697. 

  1698. function refreshPresetButtons() {

  1699.   const effectiveFreq = effectiveValue('frequencyMHz');

  1700.   document.querySelectorAll('[data-freq-preset]').forEach((btn) => {

  1701.     const value = Number(btn.dataset.freqPreset);

  1702.     btn.classList.toggle('active', typeof effectiveFreq === 'number' && nearlyEqual(value, effectiveFreq, 0.05));

  1703.   });

  1704. }

  1705. 

  1706. function updateHeroState(engineState) {

  1707.   const hero = $('hero-card');

  1708.   hero.classList.remove('tx-live', 'tx-busy');

  1709.   if (state.txBusy || ['starting', 'stopping'].includes(engineState)) {

  1710.     hero.classList.add('tx-busy');

  1711.   } else if (engineState === 'running') {

  1712.     hero.classList.add('tx-live');

  1713.   }

  1714. }

  1715. 

  1716. function drawSparkline(svgId, values, mode = 'good', maxOverride = null) {

  1717.   const svg = $(svgId);

  1718.   if (!svg) return;

  1719.   svg.className = `spark ${mode}`;

  1720.   const width = 160;

  1721.   const height = 34;

  1722.   const points = values.length ? values : [0, 0];

  1723.   const max = maxOverride != null ? maxOverride : Math.max(...points, 1);

  1724.   const min = 0;

  1725.   const step = points.length <= 1 ? width : width / (points.length - 1);

  1726.   const coords = points.map((value, i) => {

  1727.     const x = i * step;

  1728.     const norm = max === min ? 0 : (value - min) / (max - min || 1);

  1729.     const y = height - 4 - norm * (height - 8);

  1730.     return [x, y];

  1731.   });

  1732.   const line = coords.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(2)},${y.toFixed(2)}`).join(' ');

  1733.   const area = `${line} L ${width},${height} L 0,${height} Z`;

  1734.   svg.innerHTML = `<path class="area" d="${area}"></path><path class="line" d="${line}"></path>`;

  1735. }

  1736. 

  1737. function render() {

  1738.   const cfg = state.server.config || {};

  1739.   const runtime = state.server.runtime || {};

  1740.   const engine = runtime.engine || {};

  1741.   const driver = runtime.driver || {};

  1742.   const audioStream = runtime.audioStream || null;

  1743. 

  1744.   const freq = effectiveValue('frequencyMHz') ?? cfg.fm?.frequencyMHz;

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

  1746. 

  1747.   updateText('badge-backend', cfg.backend?.kind || cfg.backend || '--');

  1748.   updateText('badge-mode', engine.state && engine.state !== 'idle' ? 'TX Active' : 'Control Plane');

  1749.   updateText('badge-live', state.server.runtimeOk ? 'Connected' : 'Waiting');

  1750. 

  1751.   updateText('t-chunks', fmt(engine.chunksProduced));

  1752.   updateText('t-samples', fmt(engine.totalSamples));

  1753.   updateText('t-uptime', fmtTime(engine.uptimeSeconds));

  1754.   updateText('t-rate', driver.effectiveSampleRateHz ? (driver.effectiveSampleRateHz / 1000).toFixed(0) + 'k' : '--');

  1755.   const underruns = engine.underruns ?? driver.underruns;

  1756.   const underrunEl = $('t-underruns');

  1757.   underrunEl.textContent = underruns == null ? '--' : String(underruns);

  1758.   underrunEl.className = 'value' + (underruns > 0 ? ' err' : underruns === 0 ? ' good' : '');

  1759. 

  1760.   const txStateValue = String(engine.state || 'idle').toLowerCase();

  1761.   const txState = state.txBusy ? 'WORKING…' : txStateValue.toUpperCase();

  1762.   const txClass = state.txBusy ? 'working' : txStateValue;

  1763.   $('tx-state').textContent = txState;

  1764.   $('tx-state').className = 'tx-state ' + txClass;

  1765.   updateText('tx-hint', engine.lastError ? `Last error: ${engine.lastError}` : (state.txBusy ? 'Command in progress' : 'Runtime polled every 1s'));

  1766.   updateHeroState(txStateValue);

  1767. 

  1768.   const startDisabled = state.txBusy || txStateValue === 'running';

  1769.   const stopDisabled = state.txBusy || ['idle', 'stopped', ''].includes(txStateValue);

  1770.   $('btn-start').disabled = startDisabled;

  1771.   $('btn-stop').disabled = stopDisabled;

  1772.   $('btn-refresh').disabled = state.pendingRequests > 0;

  1773.   $('danger-stop').disabled = stopDisabled;

  1774.   $('danger-refresh').disabled = state.pendingRequests > 0;

  1775.   const resetFaultBtn = $('danger-reset-fault');

  1776.   if (resetFaultBtn) {

  1777.     const resetDisabled = state.faultResetBusy || !state.server.runtimeOk;

  1778.     resetFaultBtn.disabled = resetDisabled;

  1779.     resetFaultBtn.textContent = state.faultResetBusy ? 'Resetting…' : 'Reset Fault';

  1780.   }

  1781. 

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

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

  1784.   syncDirtyInput('rds-ps', 'ps', (v) => String(v ?? ''));

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

  1786. 

  1787.   const psValue = String(effectiveValue('ps') ?? cfg.rds?.ps ?? '');

  1788.   const rtValue = String(effectiveValue('radioText') ?? cfg.rds?.radioText ?? '');

  1789.   updateText('ps-count', psValue.length);

  1790.   updateText('rt-count', rtValue.length);

  1791.   renderFieldErrors();

  1792.   refreshPresetButtons();

  1793. 

  1794.   renderToggle('stereoEnabled', 'tog-stereo', 'stereo-label');

  1795.   renderToggle('rdsEnabled', 'tog-rds', 'rds-label');

  1796.   renderToggle('limiterEnabled', 'tog-limiter', 'limiter-label');

  1797. 

  1798.   const freqDirty = isDirtySection('freq');

  1799.   $('freq-apply').disabled = !freqDirty || sectionHasErrors('freq');

  1800.   $('freq-reset').disabled = !freqDirty;

  1801.   const rdsDirty = isDirtySection('rds');

  1802.   $('rds-apply').disabled = !rdsDirty || sectionHasErrors('rds');

  1803.   $('rds-reset').disabled = !rdsDirty;

  1804. 

  1805.   updateText('freq-meta', sectionHasErrors('freq') ? 'Validation error' : (freqDirty ? 'Unsaved changes' : 'Live-tunable'));

  1806.   updateText('rds-meta', sectionHasErrors('rds') ? 'Validation error' : (rdsDirty ? `${Object.keys(getSectionPatch('rds')).length} unsaved` : 'PS + RT'));

  1807. 

  1808.   updateText('info-backend', cfg.backend?.kind || cfg.backend || '--');

  1809.   updateText('info-freq', fmtFreq(cfg.fm?.frequencyMHz));

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

  1811.   updateText('info-fmmod', fmtBool(cfg.fm?.fmModulationEnabled));

  1812.   updateText('info-live', engine.state ? `${String(engine.state).toUpperCase()} / ${state.server.runtimeOk ? 'runtime ok' : 'runtime pending'}` : (state.server.configOk ? 'config only' : '--'));

  1813. 

  1814.   updateHealth(engine, audioStream);

  1815.   updateFaultHistory(engine);

  1816.   updateResetHint(engine);

  1817.   updateMeters(engine, driver, audioStream);

  1818.   drawSparkline('spark-audio', state.charts.audio, 'good', 1);

  1819.   drawSparkline('spark-underruns', state.charts.underruns, underruns > 0 ? 'err' : 'warn');

  1820.   drawSparkline('spark-tx', state.charts.tx, txStateValue === 'running' ? 'good' : 'warn', 1);

  1821.   applyMobilePanelDefaults();

  1822. }

  1823. 

  1824. function renderToggle(key, toggleId, labelId) {

  1825.   const on = !!serverValue(key);

  1826.   const busy = !!state.toggleBusy[key];

  1827.   const el = $(toggleId);

  1828.   el.className = 'toggle' + (on ? ' on' : '') + (busy ? ' busy' : '');

  1829.   el.setAttribute('aria-checked', on ? 'true' : 'false');

  1830.   updateText(labelId, busy ? '...' : (on ? 'ON' : 'OFF'));

  1831. }

  1832. 

  1833. function runtimeStateClass(engineState) {

  1834.   const normalized = String(engineState || '').toLowerCase();

  1835.   if (!normalized) {

  1836.     return 'warn';

  1837.   }

  1838.   switch (normalized) {

  1839.     case 'faulted':

  1840.       return 'err';

  1841.     case 'muted':

  1842.     case 'degraded':

  1843.     case 'prebuffering':

  1844.     case 'arming':

  1845.     case 'stopping':

  1846.     case 'idle':

  1847.     case 'unknown':

  1848.       return 'warn';

  1849.     default:

  1850.       return 'good';

  1851.   }

  1852. }

  1853. 

  1854. 

  1855. 

  1856. function normalizeRuntimeState(stateName) {

  1857.   const normalized = (typeof stateName === 'string' ? stateName.trim().toLowerCase() : '');

  1858.   return normalized || 'idle';

  1859. }

  1860. 

  1861. function runtimeStateSeverity(stateName) {

  1862.   const normalized = normalizeRuntimeState(stateName);

  1863.   switch (normalized) {

  1864.     case 'running':

  1865.       return 'ok';

  1866.     case 'degraded':

  1867.     case 'muted':

  1868.       return 'warn';

  1869.     case 'faulted':

  1870.       return 'err';

  1871.     default:

  1872.       return 'info';

  1873.   }

  1874. }

  1875. 

  1876. function notifyRuntimeTransition(engine) {

  1877.   if (!engine) return;

  1878.   const next = normalizeRuntimeState(engine.state);

  1879.   const prev = state.lastRuntimeState;

  1880.   state.lastRuntimeState = next;

  1881.   if (!prev || prev === next) return;

  1882.   const message = `Runtime ${prev.toUpperCase()} → ${next.toUpperCase()}`;

  1883.   const severity = runtimeStateSeverity(next);

  1884.   const logLevel = severity === 'err' ? 'err' : (severity === 'warn' ? 'warn' : 'info');

  1885.   toast(message, severity);

  1886.   log(message, logLevel);

  1887. }

  1888. 

  1889. function updateHealth(engine, audioStream) {

  1890.   engine = engine || {};

  1891.   updateText('health-http', state.server.configOk ? 'OK' : 'OFFLINE');

  1892.   $('health-http').className = 'val ' + (state.server.configOk ? 'good' : 'err');

  1893. 

  1894.   let runtimeLabel = 'WAITING';

  1895.   let runtimeClass = 'warn';

  1896.   if (state.server.runtimeOk) {

  1897.     const engineStateName = String(engine.state || 'unknown');

  1898.     runtimeLabel = engineStateName.toUpperCase();

  1899.     runtimeClass = runtimeStateClass(engineStateName);

  1900.   }

  1901.   updateText('health-runtime', runtimeLabel);

  1902.   $('health-runtime').className = 'val ' + runtimeClass;

  1903. 

  1904.   const runtimeIndicator = engine.runtimeIndicator;

  1905.   const indicatorLabels = {

  1906.     normal: 'Normal',

  1907.     degraded: 'Degraded',

  1908.     queueCritical: 'Queue critical',

  1909.   };

  1910.   const indicatorText = indicatorLabels[runtimeIndicator] || (runtimeIndicator ? runtimeIndicator : '--');

  1911.   let indicatorSeverity = '';

  1912.   if (runtimeIndicator === 'queueCritical') indicatorSeverity = 'err';

  1913.   else if (runtimeIndicator === 'degraded') indicatorSeverity = 'warn';

  1914.   else if (runtimeIndicator === 'normal') indicatorSeverity = 'good';

  1915.   const indicatorEl = $('health-indicator');

  1916.   if (indicatorEl) {

  1917.     indicatorEl.className = 'val' + (indicatorSeverity ? ' ' + indicatorSeverity : '');

  1918.   }

  1919.   updateText('health-indicator', indicatorText);

  1920. 

  1921.   const runtimeAlertRaw = (engine.runtimeAlert || '').trim();

  1922.   const hasAlert = !!runtimeAlertRaw;

  1923.   const alertEl = $('health-alert');

  1924.   if (alertEl) {

  1925.     alertEl.className = 'val ' + (hasAlert ? 'warn' : 'good');

  1926.   }

  1927.   updateText('health-alert', hasAlert ? runtimeAlertRaw : 'None');

  1928. 

  1929.   let audioLabel = 'N/A';

  1930.   let audioClass = 'val';

  1931.   if (audioStream) {

  1932.     const fill = typeof audioStream.buffered === 'number' ? audioStream.buffered : null;

  1933.     audioLabel = fill == null ? 'Unknown' : fmtPercent(fill);

  1934.     if (fill == null) audioClass = 'val';

  1935.     else if (fill < 0.05) audioClass = 'val err';

  1936.     else if (fill < 0.2) audioClass = 'val warn';

  1937.     else audioClass = 'val good';

  1938.   }

  1939.   updateText('health-audio', audioLabel);

  1940.   $('health-audio').className = audioClass;

  1941. 

  1942.   const last = Math.max(state.server.lastConfigAt || 0, state.server.lastRuntimeAt || 0);

  1943.   updateText('health-last', ageString(last));

  1944. 

  1945.   const transitionsAvailable = engine.degradedTransitions != null || engine.mutedTransitions != null || engine.faultedTransitions != null;

  1946.   const transitionsText = transitionsAvailable ? `${Number(engine.degradedTransitions ?? 0)} / ${Number(engine.mutedTransitions ?? 0)} / ${Number(engine.faultedTransitions ?? 0)}` : '--';

  1947.   updateText('health-transitions', transitionsText);

  1948. 

  1949.   const faultCountValue = engine.faultCount != null ? Number(engine.faultCount) : 0;

  1950.   const hasFaultCount = engine.faultCount != null;

  1951.   updateText('health-fault-count', hasFaultCount ? String(faultCountValue) : '--');

  1952.   const faultCountEl = $('health-fault-count');

  1953.   if (faultCountEl) {

  1954.     faultCountEl.className = 'val' + (hasFaultCount ? (faultCountValue > 0 ? ' warn' : ' good') : '');

  1955.   }

  1956. 

  1957.   const lastFaultEl = $('health-last-fault');

  1958.   const lastFault = engine.lastFault;

  1959.   if (lastFaultEl) {

  1960.     if (lastFault) {

  1961.       const severity = String(lastFault.severity || '').toLowerCase();

  1962.       const severityClass = severity === 'faulted' ? 'err' : 'warn';

  1963.       const severityLabel = (lastFault.severity || 'Fault').toUpperCase();

  1964.       const reasonLabel = lastFault.reason ? ` ${lastFault.reason}` : '';

  1965.       const messageLabel = lastFault.message ? ` - ${lastFault.message}` : '';

  1966.       let whenLabel = '';

  1967.       if (lastFault.time) {

  1968.         const parsed = new Date(lastFault.time);

  1969.         if (!Number.isNaN(parsed.getTime())) {

  1970.           whenLabel = ` @ ${parsed.toLocaleTimeString()}`;

  1971.         }

  1972.       }

  1973.       const title = `${severityLabel}${reasonLabel}`;

  1974.       updateText('health-last-fault', `${title}${messageLabel}${whenLabel}`);

  1975.       lastFaultEl.className = 'val ' + severityClass;

  1976.     } else {

  1977.       lastFaultEl.className = 'val good';

  1978.       updateText('health-last-fault', 'None');

  1979.     }

  1980.   }

  1981. }

  1982. 

  1983. 

  1984. function updateFaultHistory(engine) {

  1985.   const container = $('fault-history');

  1986.   if (!container) return;

  1987.   const history = Array.isArray(engine?.faultHistory) ? engine.faultHistory : [];

  1988.   if (!history.length) {

  1989.     container.innerHTML = '<div class="fault-history-empty">No faults recorded yet.</div>';

  1990.     return;

  1991.   }

  1992.   const rows = history.slice().reverse().map((entry) => {

  1993.     const when = entry?.time ? new Date(entry.time) : null;

  1994.     const timeLabel = when && !Number.isNaN(when.getTime()) ? when.toLocaleTimeString() : '--:--';

  1995.     const severity = String(entry?.severity || 'warn').toLowerCase();

  1996.     const severityLabel = String(entry?.severity || 'Fault').toUpperCase();

  1997.     const reasonLabel = entry?.reason ? ` ${entry.reason}` : '';

  1998.     const messageLabel = entry?.message ? ` · ${entry.message}` : '';

  1999.     return `<div class="fault-history-entry ${severity}"><span class="fault-history-time">${timeLabel}</span><span class="fault-history-desc">${severityLabel}${reasonLabel}${messageLabel}</span></div>`;

  2000.   });

  2001.   container.innerHTML = rows.join('');

  2002. }

  2003. 

  2004. function updateResetHint(engine) {

  2005.   const hint = $('reset-hint');

  2006.   if (!hint) return;

  2007.   const stateName = String(engine?.state || '').toLowerCase();

  2008.   let text = 'Manual fault reset drops runtime to DEGRADED while the queue recovers.';

  2009.   if (stateName === 'faulted') {

  2010.     text = 'Faulted: reset moves runtime back to DEGRADED until the queue settles.';

  2011.   } else if (stateName === 'muted' || stateName === 'degraded') {

  2012.     text = 'Reset Fault keeps the runtime in DEGRADED so the queue can recover before running again.';

  2013.   }

  2014.   hint.textContent = text;

  2015. }

  2016. 

  2017. function updateMeters(engine, driver, audioStream) {

  2018.   if (audioStream && typeof audioStream.buffered === 'number') {

  2019.     const ratio = Math.max(0, Math.min(1, audioStream.buffered));

  2020.     const mode = ratio < 0.05 ? 'err' : ratio < 0.2 ? 'warn' : 'good';

  2021.     setMeter('meter-audio-fill', 'meter-audio-text', ratio, fmtPercent(ratio), mode);

  2022.   } else {

  2023.     setMeter('meter-audio-fill', 'meter-audio-text', 0, 'N/A', 'warn');

  2024.   }

  2025. 

  2026.   const underruns = Number(engine.underruns ?? driver.underruns ?? 0);

  2027.   const healthRatio = underruns <= 0 ? 1 : Math.max(0, 1 - Math.min(underruns, 10) / 10);

  2028.   const healthMode = underruns === 0 ? 'good' : underruns < 3 ? 'warn' : 'err';

  2029.   setMeter('meter-stream-fill', 'meter-stream-text', healthRatio, underruns === 0 ? 'Clean' : `${underruns} underrun${underruns === 1 ? '' : 's'}`, healthMode);

  2030. 

  2031.   const txState = String(engine.state || 'idle').toLowerCase();

  2032.   const activeRatio = txState === 'running' ? 1 : state.txBusy ? 0.55 : 0.08;

  2033.   const activeMode = txState === 'running' ? 'good' : state.txBusy ? 'warn' : 'err';

  2034.   const activeText = txState === 'running' ? 'Live' : state.txBusy ? 'Working' : 'Idle';

  2035.   setMeter('meter-tx-fill', 'meter-tx-text', activeRatio, activeText, activeMode);

  2036. }

  2037. 

  2038. function toast(msg, type = 'info') {

  2039.   const t = $('toast');

  2040.   t.textContent = msg;

  2041.   t.className = 'toast ' + type + ' show';

  2042.   clearTimeout(t._timer);

  2043.   t._timer = setTimeout(() => t.classList.remove('show'), 2600);

  2044. }

  2045. 

  2046. function log(message, type = '') {

  2047.   const logEl = $('log');

  2048.   const empty = logEl.querySelector('.empty-log');

  2049.   if (empty) empty.remove();

  2050.   const row = document.createElement('div');

  2051.   row.className = 'entry ' + type;

  2052.   row.textContent = `${new Date().toLocaleTimeString()}  ${message}`;

  2053.   logEl.appendChild(row);

  2054.   while (logEl.children.length > 250) logEl.removeChild(logEl.firstChild);

  2055.   logEl.scrollTop = logEl.scrollHeight;

  2056. }

  2057. 

  2058. function bindPanels() {

  2059.   document.querySelectorAll('[data-panel]').forEach((head) => {

  2060.     head.addEventListener('click', () => {

  2061.       head.classList.toggle('collapsed');

  2062.       head.nextElementSibling.classList.toggle('collapsed');

  2063.     });

  2064.   });

  2065. }

  2066. 

  2067. function bindInputs() {

  2068.   $('freq-slider').addEventListener('input', (e) => {

  2069.     const value = Number(e.target.value);

  2070.     setDirty('frequencyMHz', value);

  2071.   });

  2072.   $('freq-num').addEventListener('input', (e) => {

  2073.     const value = Number(e.target.value);

  2074.     if (!Number.isNaN(value)) setDirty('frequencyMHz', value);

  2075.     else {

  2076.       state.errors.frequencyMHz = 'Enter a valid number.';

  2077.       render();

  2078.     }

  2079.   });

  2080. 

  2081.   $('rds-ps').addEventListener('input', (e) => setDirty('ps', e.target.value.toUpperCase().slice(0, 8)));

  2082.   $('rds-rt').addEventListener('input', (e) => setDirty('radioText', e.target.value.slice(0, 64)));

  2083. 

  2084.   $('freq-apply').addEventListener('click', () => applySection('freq'));

  2085.   $('rds-apply').addEventListener('click', () => applySection('rds'));

  2086.   $('freq-reset').addEventListener('click', () => resetSection('freq'));

  2087.   $('rds-reset').addEventListener('click', () => resetSection('rds'));

  2088. 

  2089.   $('btn-start').addEventListener('click', () => txAction('start'));

  2090.   $('btn-stop').addEventListener('click', () => txAction('stop'));

  2091.   $('danger-stop').addEventListener('click', () => txAction('stop'));

  2092.   $('btn-refresh').addEventListener('click', manualRefresh);

  2093.   $('danger-refresh').addEventListener('click', manualRefresh);

  2094.   $('danger-reset-fault').addEventListener('click', () => resetFaultAction());

  2095. 

  2096.   document.querySelectorAll('.toggle[data-toggle]').forEach((toggle) => {

  2097.     const key = toggle.dataset.toggle;

  2098.     const handler = () => setToggle(key, !serverValue(key));

  2099.     toggle.addEventListener('click', handler);

  2100.     toggle.addEventListener('keydown', (e) => {

  2101.       if (e.key === 'Enter' || e.key === ' ') {

  2102.         e.preventDefault();

  2103.         handler();

  2104.       }

  2105.     });

  2106.   });

  2107. 

  2108.   document.querySelectorAll('[data-freq-preset]').forEach((btn) => {

  2109.     btn.addEventListener('click', () => {

  2110.       const value = Number(btn.dataset.freqPreset);

  2111.       setDirty('frequencyMHz', value);

  2112.       toast(`Frequency preset ${value.toFixed(1)} MHz loaded`, 'info');

  2113.     });

  2114.   });

  2115. 

  2116.   document.querySelectorAll('[data-rds-ps]').forEach((btn) => {

  2117.     btn.addEventListener('click', () => {

  2118.       setDirty('ps', btn.dataset.rdsPs || '');

  2119.       setDirty('radioText', btn.dataset.rdsRt || '');

  2120.       toast('RDS preset loaded', 'info');

  2121.     });

  2122.   });

  2123. 

  2124.   $('btn-clear-log').addEventListener('click', () => {

  2125.     $('log').innerHTML = '<div class="empty-log">No events yet.</div>';

  2126.     toast('Log cleared', 'info');

  2127.   });

  2128. }

  2129. 

  2130. async function manualRefresh() {

  2131.   beginRequest();

  2132.   try {

  2133.     await Promise.allSettled([

  2134.       loadConfig({ silent: true }),

  2135.       loadRuntime({ silent: true }),

  2136.     ]);

  2137.     toast('Refreshed', 'info');

  2138.     log('Manual refresh completed', 'info');

  2139.   } finally {

  2140.     endRequest();

  2141.   }

  2142. }

  2143. 

  2144. function startPollers() {

  2145.   if (state.pollersStarted) return;

  2146.   state.pollersStarted = true;

  2147.   setInterval(() => { loadRuntime({ silent: true }); }, runtimePollMs);

  2148.   setInterval(() => { loadConfig({ silent: true }); }, configPollMs);

  2149. }

  2150. 

  2151. function bindResponsiveBehavior() {

  2152.   const listener = () => {

  2153.     if (!mobileMq.matches) {

  2154.       state.mobilePanelsApplied = false;

  2155.       return;

  2156.     }

  2157.     applyMobilePanelDefaults();

  2158.   };

  2159.   if (mobileMq.addEventListener) mobileMq.addEventListener('change', listener);

  2160.   else mobileMq.addListener(listener);

  2161. }

  2162. 

  2163. function isTypingContext(target) {

  2164.   if (!target) return false;

  2165.   const tag = (target.tagName || '').toLowerCase();

  2166.   return tag === 'input' || tag === 'textarea' || target.isContentEditable;

  2167. }

  2168. 

  2169. function bindKeyboardShortcuts() {

  2170.   window.addEventListener('keydown', (e) => {

  2171.     if (isTypingContext(e.target)) {

  2172.       if (e.key !== 'Enter') return;

  2173.       if (state.dirty.has('frequencyMHz')) {

  2174.         e.preventDefault();

  2175.         applySection('freq');

  2176.       } else if (isDirtySection('rds')) {

  2177.         e.preventDefault();

  2178.         applySection('rds');

  2179.       }

  2180.       return;

  2181.     }

  2182. 

  2183.     if (e.key === 't' && !e.shiftKey) {

  2184.       e.preventDefault();

  2185.       txAction('start');

  2186.       return;

  2187.     }

  2188.     if ((e.key === 'T') || (e.key === 't' && e.shiftKey)) {

  2189.       e.preventDefault();

  2190.       txAction('stop');

  2191.       return;

  2192.     }

  2193.     if (e.key.toLowerCase() === 'r') {

  2194.       e.preventDefault();

  2195.       manualRefresh();

  2196.       return;

  2197.     }

  2198.     if (e.key === '[') {

  2199.       e.preventDefault();

  2200.       cycleFreqPreset(-1);

  2201.       return;

  2202.     }

  2203.     if (e.key === ']') {

  2204.       e.preventDefault();

  2205.       cycleFreqPreset(1);

  2206.       return;

  2207.     }

  2208.     if (e.key === 'Enter') {

  2209.       e.preventDefault();

  2210.       if (state.dirty.has('frequencyMHz')) applySection('freq');

  2211.       else if (isDirtySection('rds')) applySection('rds');

  2212.     }

  2213.   });

  2214. }

  2215. 

  2216. async function init() {

  2217.   bindPanels();

  2218.   bindInputs();

  2219.   bindResponsiveBehavior();

  2220.   bindKeyboardShortcuts();

  2221.   render();

  2222.   log('fm-rds-tx control UI booting', 'info');

  2223. 

  2224.   await Promise.allSettled([

  2225.     loadConfig({ silent: false }),

  2226.     loadRuntime({ silent: true }),

  2227.   ]);

  2228. 

  2229.   render();

  2230.   startPollers();

  2231.   log('Polling active: runtime 1s, config 8s', 'ok');

  2232.   log('Keyboard shortcuts armed', 'info');

  2233. }

  2234. 

  2235. init();

  2236. </script>

  2237. </body>

  2238. </html>