Alfred
/
fm-rds-tx
1
0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 6 위키 활동
Go-based FM stereo transmitter with RDS, Windows-first and cross-platform
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
147 커밋
1 브렌치
37MB
트리: 6a23b6c313
브랜치 태그
${ item.name }
${ searchTerm } 브랜치 생성
from '6a23b6c313'
${ noResults }
fm-rds-tx/internal/control/ui.html

3241 lines
109KB
Raw Blame 히스토리 

  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. 

  10. :root {

  11.   --bg: #f7f8fb;

  12.   --bg-2: #eef0f3;

  13.   --surface: #ffffff;

  14.   --surface2: #f4f6f8;

  15.   --surface3: #e8ecf1;

  16.   --border: #d7dcdf;

  17.   --border-strong: #bcc5ce;

  18.   --text: #111724;

  19.   --text-dim: #4c5a6a;

  20.   --text-muted: #6b7683;

  21.   --accent: #1f4d9d;

  22.   --accent-soft: rgba(31, 77, 157, 0.08);

  23.   --green: #0d944a;

  24.   --green-soft: rgba(13, 148, 74, 0.1);

  25.   --amber: #b7791f;

  26.   --amber-soft: rgba(183, 121, 31, 0.12);

  27.   --red: #b03030;

  28.   --red-soft: rgba(176, 48, 48, 0.1);

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

  30.   --display: 'Inter', sans-serif;

  31.   --radius: 8px;

  32.   --shadow: 0 8px 24px rgba(15,23,42,0.08);

  33. }

  34. 

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

  36. html { color-scheme: light; }

  37. body {

  38.   background: linear-gradient(180deg, #fbfcfe 0%, var(--bg) 100%);

  39.   color: var(--text);

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

  41.   font-size: 14px;

  42.   line-height: 1.5;

  43.   min-height: 100vh;

  44.   overflow-x: hidden;

  45. }

  46. 

  47. button, input { font: inherit; }

  48. button { user-select: none; }

  49. 

  50. .app {

  51.   max-width: 1200px;

  52.   margin: 0 auto;

  53.   padding: 24px;

  54. }

  55. 

  56. .header {

  57.   display: flex;

  58.   align-items: flex-start;

  59.   justify-content: space-between;

  60.   gap: 18px;

  61.   padding: 4px 0 20px;

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

  63.   margin-bottom: 20px;

  64. }

  65. .header-main {

  66.   display: flex;

  67.   flex-direction: column;

  68.   gap: 8px;

  69. }

  70. .header h1 {

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

  72.   font-size: 28px;

  73.   font-weight: 800;

  74.   letter-spacing: -0.03em;

  75.   text-transform: none;

  76.   color: var(--text);

  77. }

  78. .header-note {

  79.   font-size: 13px;

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

  81. }

  82. .header-sub {

  83.   display: flex;

  84.   flex-wrap: wrap;

  85.   gap: 8px;

  86. }

  87. .badge {

  88.   display: inline-flex;

  89.   align-items: center;

  90.   gap: 8px;

  91.   min-height: 28px;

  92.   padding: 0 10px;

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

  94.   border-radius: 999px;

  95.   background: var(--surface2);

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

  97.   font-size: 11px;

  98.   text-transform: uppercase;

  99.   letter-spacing: .08em;

  100. }

  101. .badge strong {

  102.   color: var(--text);

  103.   font-weight: 700;

  104. }

  105. .header-status {

  106.   display: flex;

  107.   align-items: center;

  108.   gap: 10px;

  109.   padding-top: 6px;

  110. }

  111. 

  112. .led {

  113.   width: 10px;

  114.   height: 10px;

  115.   border-radius: 50%;

  116.   background: #333;

  117.   box-shadow: none;

  118.   transition: all .25s ease;

  119.   flex-shrink: 0;

  120. }

  121. .led.on-green {

  122.   background: var(--green);

  123.   box-shadow: 0 0 0 3px rgba(13,148,74,0.16);

  124. }

  125. .led.on-red {

  126.   background: var(--red);

  127.   box-shadow: 0 0 0 3px rgba(176,48,48,0.14);

  128. }

  129. .led.on-amber {

  130.   background: var(--amber);

  131.   box-shadow: 0 0 0 3px rgba(183,121,31,0.14);

  132. }

  133. .led.on-blue {

  134.   background: var(--accent);

  135.   box-shadow: 0 0 0 3px rgba(31,77,157,0.14);

  136. }

  137. 

  138. .status-text {

  139.   font-size: 10px;

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

  141.   text-transform: uppercase;

  142.   letter-spacing: .08em;

  143. }

  144. 

  145. .tab-bar {

  146.   display: flex;

  147.   gap: 6px;

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

  149.   padding-bottom: 0;

  150.   margin: 0 0 20px;

  151.   flex-wrap: wrap;

  152.   position: sticky;

  153.   top: 0;

  154.   background: rgba(247,248,251,.92);

  155.   backdrop-filter: blur(8px);

  156.   z-index: 10;

  157. }

  158. .tab-btn {

  159.   border: none;

  160.   border-bottom: 3px solid transparent;

  161.   border-radius: 0;

  162.   background: transparent;

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

  164.   font-size: 13px;

  165.   font-weight: 700;

  166.   padding: 12px 16px 11px;

  167.   cursor: pointer;

  168.   transition: color .16s ease, border-color .16s ease, background-color .16s ease;

  169. }

  170. .tab-btn.active {

  171.   border-bottom-color: var(--accent);

  172.   background: transparent;

  173.   color: var(--accent);

  174. }

  175. .tab-btn:focus-visible {

  176.   outline: 2px solid var(--accent);

  177.   outline-offset: 2px;

  178. }

  179. .tab-panels {

  180.   display: flex;

  181.   flex-direction: column;

  182.   gap: 14px;

  183. }

  184. .tab-panel {

  185.   display: none;

  186. }

  187. .tab-panel.active {

  188.   display: block;

  189. }

  190. .tab-columns {

  191.   display: grid;

  192.   gap: 16px;

  193. }

  194. .tab-columns.two {

  195.   grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);

  196. }

  197. .tab-columns.one {

  198.   grid-template-columns: 1fr;

  199. }

  200. 

  201. 

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

  203. 

  204. .card {

  205.   background: var(--surface);

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

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

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

  209. }

  210. 

  211. .hero {

  212.   padding: 16px;

  213. }

  214. 

  215. .tx-bar {

  216.   position: relative;

  217.   z-index: 1;

  218.   display: grid;

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

  220.   gap: 14px;

  221.   align-items: center;

  222. }

  223. 

  224. .freq-display-wrap {

  225.   display: flex;

  226.   flex-direction: column;

  227.   gap: 6px;

  228. }

  229. .freq-display-label {

  230.   font-size: 10px;

  231.   text-transform: uppercase;

  232.   letter-spacing: .08em;

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

  234. }

  235. .freq-display {

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

  237.   font-size: 40px;

  238.   color: var(--text);

  239.   letter-spacing: -0.04em;

  240.   line-height: 1;

  241.   font-weight: 800;

  242. }

  243. .freq-display .unit {

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

  245.   font-size: 14px;

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

  247.   margin-left: 5px;

  248. }

  249. 

  250. .freq-note {

  251.   display: flex;

  252.   gap: 12px;

  253.   margin-top: 6px;

  254.   font-size: 11px;

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

  256.   text-transform: uppercase;

  257.   letter-spacing: .08em;

  258. }

  259. .freq-note-item {

  260.   display: inline-flex;

  261.   align-items: center;

  262.   gap: 4px;

  263. }

  264. .freq-note.mismatch .freq-note-item {

  265.   color: var(--amber);

  266. }

  267. 

  268. .tx-actions {

  269.   display: flex;

  270.   flex-wrap: wrap;

  271.   gap: 10px;

  272. }

  273. 

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

  275.   min-height: 40px;

  276.   padding: 0 18px;

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

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

  279.   background: var(--surface2);

  280.   color: var(--text);

  281.   cursor: pointer;

  282.   font-size: 12px;

  283.   font-weight: 700;

  284.   text-transform: uppercase;

  285.   letter-spacing: .08em;

  286.   transition: all .16s ease;

  287. }

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

  289.   transform: translateY(-1px);

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

  291. }

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

  293.   opacity: .45;

  294.   cursor: not-allowed;

  295.   transform: none;

  296. }

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

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

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

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

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

  302. .danger-btn {

  303.   border-color: rgba(176,48,48,.35);

  304.   color: var(--red);

  305.   background: var(--red-soft);

  306. }

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

  308.   background: rgba(176,48,48,.16);

  309. }

  310. 

  311. .tx-state-wrap {

  312.   display: flex;

  313.   flex-direction: column;

  314.   align-items: flex-end;

  315.   gap: 6px;

  316. }

  317. .tx-state {

  318.   font-size: 11px;

  319.   text-transform: uppercase;

  320.   letter-spacing: 2px;

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

  322. }

  323. .tx-state.running { color: var(--green); }

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

  325. .tx-state.starting, .tx-state.stopping, .tx-state.working { color: var(--amber); }

  326. .tx-state.error { color: var(--red); }

  327. .status-hint {

  328.   font-size: 10px;

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

  330.   text-align: right;

  331. }

  332. 

  333. .quick-grid {

  334.   position: relative;

  335.   z-index: 1;

  336.   display: grid;

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

  338.   gap: 10px;

  339.   margin-top: 16px;

  340. }

  341. .quick-item {

  342.   padding: 12px;

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

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

  345.   background: var(--surface2);

  346. }

  347. .quick-item .label {

  348.   font-size: 9px;

  349.   text-transform: uppercase;

  350.   letter-spacing: .08em;

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

  352.   margin-bottom: 6px;

  353. }

  354. .quick-item .value {

  355.   font-size: 18px;

  356.   font-weight: 700;

  357.   color: var(--text);

  358. }

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

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

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

  362. 

  363. .signal-grid {

  364.   position: relative;

  365.   z-index: 1;

  366.   display: grid;

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

  368.   gap: 10px;

  369.   margin-top: 12px;

  370. }

  371. .signal-card {

  372.   padding: 12px;

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

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

  375.   background: var(--surface2);

  376. }

  377. .signal-head {

  378.   display: flex;

  379.   align-items: center;

  380.   justify-content: space-between;

  381.   gap: 10px;

  382.   margin-bottom: 8px;

  383. }

  384. .signal-title {

  385.   font-size: 10px;

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

  387.   text-transform: uppercase;

  388.   letter-spacing: .08em;

  389. }

  390. .signal-value {

  391.   font-size: 11px;

  392.   color: var(--text);

  393.   font-weight: 700;

  394. }

  395. .meter {

  396.   width: 100%;

  397.   height: 10px;

  398.   border-radius: 999px;

  399.   background: #e7ebf0;

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

  401.   overflow: hidden;

  402. }

  403. .meter-fill {

  404.   height: 100%;

  405.   width: 0%;

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

  407.   background: linear-gradient(90deg, var(--green), #3dbd75);

  408. }

  409. .meter-fill.warn {

  410.   background: linear-gradient(90deg, var(--amber), #d9a14a);

  411. }

  412. .meter-fill.err {

  413.   background: linear-gradient(90deg, var(--red), #d85c5c);

  414. }

  415. .spark {

  416.   width: 100%;

  417.   height: 34px;

  418.   margin-top: 10px;

  419.   border-radius: 6px;

  420.   background: #f7f9fb;

  421.   border: 1px solid #e3e8ee;

  422. }

  423. .spark path.line {

  424.   fill: none;

  425.   stroke-width: 2;

  426.   stroke-linecap: round;

  427.   stroke-linejoin: round;

  428. }

  429. .spark path.area {

  430.   opacity: .14;

  431. }

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

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

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

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

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

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

  438. 

  439. .panel {

  440.   overflow: hidden;

  441. }

  442. .panel-head {

  443.   display: flex;

  444.   align-items: center;

  445.   gap: 8px;

  446.   padding: 12px 14px;

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

  448.   background: var(--surface2);

  449.   cursor: pointer;

  450.   user-select: none;

  451. }

  452. .panel-head h2 {

  453.   font-size: 11px;

  454.   font-weight: 700;

  455.   text-transform: uppercase;

  456.   letter-spacing: 1.6px;

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

  458. }

  459. .panel-head .meta {

  460.   margin-left: auto;

  461.   margin-right: 8px;

  462.   font-size: 10px;

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

  464.   text-transform: uppercase;

  465.   letter-spacing: 1px;

  466. }

  467. .panel-head .chevron {

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

  469.   transition: transform .2s ease;

  470.   font-size: 10px;

  471. }

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

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

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

  475. 

  476. .section-note {

  477.   font-size: 11px;

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

  479.   margin-bottom: 12px;

  480. }

  481. .shortcuts-grid {

  482.   display: grid;

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

  484.   gap: 8px 12px;

  485. }

  486. .shortcut-line {

  487.   display: flex;

  488.   align-items: center;

  489.   justify-content: space-between;

  490.   gap: 12px;

  491.   padding: 7px 0;

  492.   border-bottom: 1px solid #e6eaef;

  493. }

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

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

  496. .shortcut-line .keys {

  497.   display: inline-flex;

  498.   gap: 6px;

  499.   flex-wrap: wrap;

  500. }

  501. .kbd {

  502.   min-width: 28px;

  503.   padding: 3px 7px;

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

  505.   border-bottom-width: 2px;

  506.   border-radius: 6px;

  507.   background: var(--surface2);

  508.   font-size: 10px;

  509.   color: var(--text);

  510.   text-align: center;

  511. }

  512. 

  513. .preset-row {

  514.   display: flex;

  515.   flex-wrap: wrap;

  516.   gap: 8px;

  517.   margin-bottom: 12px;

  518. }

  519. .preset-btn {

  520.   min-height: 34px;

  521.   padding: 0 12px;

  522.   font-size: 11px;

  523.   letter-spacing: .08em;

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

  525. }

  526. .preset-btn.active {

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

  528.   color: var(--accent);

  529.   background: var(--accent-soft);

  530. }

  531. .preset-btn.rds {

  532.   text-transform: none;

  533.   font-weight: 600;

  534. }

  535. 

  536. .ctrl-row {

  537.   display: flex;

  538.   align-items: center;

  539.   gap: 12px;

  540.   padding: 10px 0;

  541.   border-bottom: 1px solid #e6eaef;

  542. }

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

  544. .ctrl-label-wrap {

  545.   min-width: 130px;

  546.   display: flex;

  547.   flex-direction: column;

  548.   gap: 2px;

  549. }

  550. .ctrl-label {

  551.   font-size: 11px;

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

  553.   text-transform: uppercase;

  554.   letter-spacing: .8px;

  555. }

  556. .ctrl-sub {

  557.   font-size: 10px;

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

  559. }

  560. .ctrl-input {

  561.   flex: 1;

  562.   display: flex;

  563.   align-items: center;

  564.   gap: 10px;

  565. }

  566. 

  567. input[type="range"] {

  568.   -webkit-appearance: none;

  569.   appearance: none;

  570.   flex: 1;

  571.   height: 6px;

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

  573.   border-radius: 999px;

  574.   outline: none;

  575. }

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

  577.   -webkit-appearance: none;

  578.   width: 16px;

  579.   height: 16px;

  580.   border-radius: 50%;

  581.   background: var(--text);

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

  583.   cursor: pointer;

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

  585. }

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

  587.   background: var(--accent);

  588.   transform: scale(1.06);

  589. }

  590. input[type="number"], input[type="text"], select {

  591.   background: #fff;

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

  593.   border-radius: 6px;

  594.   color: var(--text);

  595.   padding: 8px 10px;

  596.   outline: none;

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

  598. }

  599. input[type="number"] {

  600.   width: 92px;

  601.   text-align: right;

  602. }

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

  604. select {

  605.   min-width: 140px;

  606.   width: 100%;

  607. }

  608. input:focus {

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

  610.   box-shadow: 0 0 0 3px rgba(31,77,157,.12);

  611. }

  612. input.input-dirty {

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

  614.   box-shadow: 0 0 0 3px rgba(183,121,31,.08);

  615. }

  616. input.input-error {

  617.   border-color: var(--red);

  618.   box-shadow: 0 0 0 3px rgba(176,48,48,.14);

  619.   background: rgba(176,48,48,.04);

  620. }

  621. .val-display {

  622.   min-width: 64px;

  623.   text-align: right;

  624.   font-size: 12px;

  625.   font-weight: 700;

  626.   color: var(--text);

  627. }

  628. .unit-label {

  629.   font-size: 11px;

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

  631.   min-width: 44px;

  632. }

  633. .field-error {

  634.   display: none;

  635.   margin-top: 8px;

  636.   font-size: 11px;

  637.   color: var(--accent);

  638. }

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

  640. 

  641. .toggle-row {

  642.   display: flex;

  643.   align-items: center;

  644.   justify-content: space-between;

  645.   gap: 14px;

  646.   padding: 12px 0;

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

  648. }

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

  650. .toggle-copy {

  651.   display: flex;

  652.   flex-direction: column;

  653.   gap: 3px;

  654. }

  655. .toggle-copy .title {

  656.   font-size: 12px;

  657.   color: var(--text);

  658.   font-weight: 700;

  659. }

  660. .toggle-copy .sub {

  661.   font-size: 10px;

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

  663. }

  664. .toggle-ctl {

  665.   display: flex;

  666.   align-items: center;

  667.   gap: 10px;

  668. }

  669. .toggle {

  670.   position: relative;

  671.   width: 42px;

  672.   height: 24px;

  673.   background: var(--border);

  674.   border-radius: 999px;

  675.   cursor: pointer;

  676.   transition: all .2s ease;

  677.   flex-shrink: 0;

  678. }

  679. .toggle::after {

  680.   content: '';

  681.   position: absolute;

  682.   top: 3px;

  683.   left: 3px;

  684.   width: 18px;

  685.   height: 18px;

  686.   background: var(--text);

  687.   border-radius: 50%;

  688.   transition: transform .2s ease;

  689. }

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

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

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

  693. .toggle-state {

  694.   min-width: 52px;

  695.   text-align: right;

  696.   font-size: 11px;

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

  698.   text-transform: uppercase;

  699.   letter-spacing: 1px;

  700. }

  701. 

  702. .rds-grid {

  703.   display: grid;

  704.   gap: 12px;

  705. }

  706. .rds-field {

  707.   display: flex;

  708.   flex-direction: column;

  709.   gap: 6px;

  710. }

  711. .rds-input {

  712.   width: 100%;

  713.   background: #fff;

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

  715.   border-radius: 6px;

  716.   color: var(--accent);

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

  718.   font-size: 15px;

  719.   font-weight: 700;

  720.   padding: 10px 12px;

  721.   outline: none;

  722.   letter-spacing: 2px;

  723.   text-transform: uppercase;

  724. }

  725. .rds-input.rt {

  726.   color: var(--text);

  727.   text-transform: none;

  728.   letter-spacing: .5px;

  729.   font-size: 12px;

  730.   font-weight: 500;

  731. }

  732. .rds-charcount {

  733.   font-size: 10px;

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

  735.   text-align: right;

  736. }

  737. 

  738. .actions-row {

  739.   display: flex;

  740.   gap: 10px;

  741.   flex-wrap: wrap;

  742.   margin-top: 14px;

  743. }

  744. 

  745. .ingest-grid {

  746.   display: grid;

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

  748.   gap: 10px;

  749. }

  750. 

  751. .ingest-grid .ctrl-row {

  752.   align-items: flex-start;

  753.   padding: 0;

  754.   border-bottom: none;

  755. }

  756. 

  757. .ingest-grid .ctrl-label-wrap {

  758.   min-width: 0;

  759.   gap: 4px;

  760. }

  761. 

  762. .ingest-group {

  763.   margin-top: 12px;

  764.   padding: 10px;

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

  766.   border-radius: 6px;

  767.   background: var(--surface2);

  768. }

  769. 

  770. .ingest-group-title {

  771.   margin-bottom: 8px;

  772.   font-size: 10px;

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

  774.   text-transform: uppercase;

  775.   letter-spacing: .08em;

  776. }

  777. .ingest-summary-card .sidebar-section {

  778.   margin: 0;

  779.   padding: 0;

  780.   border: none;

  781. }

  782. .ingest-summary-kv .v {

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

  784.   font-size: 11px;

  785. }

  786. .apply-btn {

  787.   background: var(--accent);

  788.   border-color: transparent;

  789.   color: #fff;

  790. }

  791. .apply-btn.secondary {

  792.   background: var(--surface2);

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

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

  795. }

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

  797. 

  798. .sidebar-card {

  799.   padding: 14px;

  800. }

  801. .sidebar-section + .sidebar-section {

  802.   margin-top: 14px;

  803.   padding-top: 14px;

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

  805. }

  806. .sidebar-title {

  807.   font-size: 11px;

  808.   text-transform: uppercase;

  809.   letter-spacing: .08em;

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

  811.   margin-bottom: 10px;

  812. }

  813. .kv {

  814.   display: grid;

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

  816.   gap: 8px 12px;

  817.   align-items: start;

  818. }

  819. .kv .k {

  820.   font-size: 10px;

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

  822.   text-transform: uppercase;

  823.   letter-spacing: .08em;

  824. }

  825. .kv .v {

  826.   font-size: 12px;

  827.   color: var(--text);

  828.   word-break: break-word;

  829. }

  830. .health-line {

  831.   display: flex;

  832.   align-items: center;

  833.   justify-content: space-between;

  834.   gap: 10px;

  835.   padding: 8px 0;

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

  837. }

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

  839. .health-line .name {

  840.   font-size: 11px;

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

  842. }

  843. .health-line .val {

  844.   font-size: 11px;

  845.   color: var(--text);

  846.   text-align: right;

  847. }

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

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

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

  851. .health-trend {

  852.   margin-top: 10px;

  853. }

  854. .health-trend-label {

  855.   font-size: 10px;

  856.   text-transform: uppercase;

  857.   letter-spacing: .08em;

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

  859.   margin-bottom: 6px;

  860. }

  861. 

  862. .fault-history {

  863.   margin-top: 12px;

  864.   padding: 10px;

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

  866.   border-radius: 6px;

  867.   background: #fbfcfd;

  868.   font-size: 11px;

  869.   max-height: 180px;

  870.   overflow-y: auto;

  871.   line-height: 1.3;

  872. }

  873. .fault-history-entry {

  874.   display: flex;

  875.   justify-content: space-between;

  876.   gap: 10px;

  877.   padding: 4px 0;

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

  879. }

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

  881.   border-bottom: none;

  882. }

  883. .fault-history-entry .fault-history-time {

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

  885. }

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

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

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

  889. .fault-history-desc {

  890.   font-size: 10px;

  891.   flex: 1;

  892.   text-transform: uppercase;

  893.   letter-spacing: 0.5px;

  894. }

  895. .fault-history-empty {

  896.   padding: 6px 0;

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

  898.   font-size: 11px;

  899. }

  900. .transition-history {

  901.   margin-top: 12px;

  902.   padding: 10px;

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

  904.   border-radius: 6px;

  905.   background: var(--surface);

  906.   font-size: 11px;

  907.   max-height: 180px;

  908.   overflow-y: auto;

  909.   line-height: 1.3;

  910. }

  911. .transition-history-entry {

  912.   display: flex;

  913.   justify-content: space-between;

  914.   gap: 10px;

  915.   padding: 4px 0;

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

  917. }

  918. .transition-history-entry:last-child {

  919.   border-bottom: none;

  920. }

  921. .transition-history-entry .transition-history-time {

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

  923. }

  924. .transition-history-entry.good { color: var(--green); }

  925. .transition-history-entry.warn { color: var(--amber); }

  926. .transition-history-entry.err { color: var(--accent); }

  927. .transition-history-entry.info { color: var(--text); }

  928. .transition-history-desc {

  929.   font-size: 10px;

  930.   flex: 1;

  931.   text-transform: uppercase;

  932.   letter-spacing: 0.5px;

  933. }

  934. .transition-history-empty {

  935.   padding: 6px 0;

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

  937.   font-size: 11px;

  938. }

  939. .section-note.reset-hint {

  940.   font-size: 11px;

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

  942.   margin-top: 10px;

  943. }

  944. 

  945. .log {

  946.   background: #fbfcfd;

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

  948.   border-radius: 6px;

  949.   padding: 10px;

  950.   font-size: 11px;

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

  952.   max-height: 220px;

  953.   overflow-y: auto;

  954.   white-space: pre-wrap;

  955.   word-break: break-word;

  956. }

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

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

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

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

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

  962. .empty-log {

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

  964. }

  965. 

  966. .toast {

  967.   position: fixed;

  968.   right: 16px;

  969.   bottom: 16px;

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

  971.   padding: 12px 15px;

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

  973.   font-size: 12px;

  974.   font-weight: 700;

  975.   z-index: 2000;

  976.   transform: translateY(60px);

  977.   opacity: 0;

  978.   transition: all .25s ease;

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

  980. }

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

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

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

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

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

  986. 

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

  988.   .tab-columns.two {

  989.     grid-template-columns: 1fr;

  990.   }

  991.   .tab-bar {

  992.     margin: 0 -12px 18px;

  993.   }

  994.   .tx-bar {

  995.     grid-template-columns: 1fr;

  996.     align-items: stretch;

  997.   }

  998.   .tx-state-wrap {

  999.     align-items: flex-start;

  1000.   }

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

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

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

  1004. }

  1005. 

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

  1007.   .tab-columns.two {

  1008.     grid-template-columns: 1fr;

  1009.   }

  1010.   .tab-bar {

  1011.     margin: 0 -12px 14px;

  1012.   }

  1013.   .app { padding: 12px; }

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

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

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

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

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

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

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

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

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

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

  1024.   .ingest-grid { grid-template-columns: 1fr; }

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

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

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

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

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

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

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

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

  1033. }

  1034. </style>

  1035. </head>

  1036. <body>

  1037. <div class="app">

  1038.   <div class="header">

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

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

  1041.       <div class="header-note">Overview first, controls second, diagnostics when needed.</div>

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

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

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

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

  1046.       </div>

  1047.     </div>

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

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

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

  1051.     </div>

  1052.   </div>

  1053. 

  1054. 

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

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

  1057.     <button class="tab-btn" data-tab="control" type="button">Transmission Control</button>

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

  1059.     <button class="tab-btn" data-tab="diagnostics" type="button">Diagnostics &amp; Health</button>

  1060.     <button class="tab-btn" data-tab="activity" type="button">Activity &amp; Logs</button>

  1061.   </div>

  1062. 

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

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

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

  1066.         <div class="stack">

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

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

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

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

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

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

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

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

  1075.             </div>

  1076.           </div>

  1077. 

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

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

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

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

  1082.           </div>

  1083. 

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

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

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

  1087.           </div>

  1088.         </div>

  1089. 

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

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

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

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

  1094.           </div>

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

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

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

  1098.           </div>

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

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

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

  1102.           </div>

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

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

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

  1106.           </div>

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

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

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

  1110.           </div>

  1111.         </div>

  1112. 

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

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

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

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

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

  1118.             </div>

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

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

  1121.           </div>

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

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

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

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

  1126.             </div>

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

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

  1129.           </div>

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

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

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

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

  1134.             </div>

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

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

  1137.           </div>

  1138.         </div>

  1139.       </div>

  1140. 

  1141. 

  1142.         </div>

  1143.         <div class="stack">

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

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

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

  1147.           <div class="kv">

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

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

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

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

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

  1153.           </div>

  1154.         </div>

  1155. 

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

  1157.           <div class="sidebar-title">Signal Notes</div>

  1158.           <div class="section-note">Overview stays compact: primary state here, deep diagnostics in the dedicated tab.</div>

  1159.           <div class="kv">

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

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

  1162.           </div>

  1163.         </div>

  1164. 

  1165.           </div>

  1166.         </div>

  1167.       </div>

  1168.     </section>

  1169. 

  1170.     <section class="tab-panel" data-tab-panel="control">

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

  1172.         <div class="stack">

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

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

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

  1176.           <h2>Frequency</h2>

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

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

  1179.         </div>

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

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

  1182. 

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

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

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

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

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

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

  1189.           </div>

  1190. 

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

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

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

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

  1195.             </div>

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

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

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

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

  1200.             </div>

  1201.           </div>

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

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

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

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

  1206.           </div>

  1207.         </div>

  1208.       </div>

  1209. 

  1210. 

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

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

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

  1214.           <h2>Switches</h2>

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

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

  1217.         </div>

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

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

  1220. 

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

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

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

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

  1225.             </div>

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

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

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

  1229.             </div>

  1230.           </div>

  1231. 

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

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

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

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

  1236.             </div>

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

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

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

  1240.             </div>

  1241.           </div>

  1242. 

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

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

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

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

  1247.             </div>

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

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

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

  1251.             </div>

  1252.           </div>

  1253.         </div>

  1254.       </div>

  1255. 

  1256. 

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

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

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

  1260.           <h2>RDS Text</h2>

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

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

  1263.         </div>

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

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

  1266. 

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

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

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

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

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

  1272.           </div>

  1273. 

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

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

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

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

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

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

  1280.             </div>

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

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

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

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

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

  1286.             </div>

  1287.           </div>

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

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

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

  1291.           </div>

  1292.         </div>

  1293.       </div>

  1294. 

  1295.         </div>

  1296.         <div class="stack">

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

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

  1299.           <h2>Shortcuts</h2>

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

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

  1302.         </div>

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

  1304.           <div class="section-note">Fast control reference. Shortcuts stay out of the main operator path.</div>

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

  1306.             <div>

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

  1308.               <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>

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

  1310.             </div>

  1311.             <div>

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

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

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

  1315.             </div>

  1316.           </div>

  1317.         </div>

  1318.       </div>

  1319. 

  1320. 

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

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

  1323.           <h2>Danger Zone</h2>

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

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

  1326.         </div>

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

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

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

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

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

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

  1333. 

  1334.           </div>

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

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

  1337.           </div>

  1338.         </div>

  1339.       </div>

  1340. 

  1341. 

  1342.         </div>

  1343.       </div>

  1344.     </section>

  1345. 

  1346. 

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

  1348.       <div class="tab-columns one">

  1349.         <div class="stack">

  1350.           <div class="card sidebar-card ingest-summary-card">

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

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

  1353.               <div class="section-note">Runtime snapshot of active ingest state and source. Deep runtime metrics stay in Diagnostics.</div>

  1354.               <div class="kv ingest-summary-kv">

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

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

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

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

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

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

  1361.               </div>

  1362.             </div>

  1363.           </div>

  1364. 

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

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

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

  1368.           <h2>Ingest Config</h2>

  1369.           <div class="meta" id="ingest-meta">Saved config</div>

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

  1371.         </div>

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

  1373.           <div class="section-note">Edit ingest source settings, save to config file, then force a hard reload so the runtime restarts with the new ingest path.</div>

  1374. 

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

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

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

  1378.                 <span class="ctrl-label">Ingest Kind</span>

  1379.               </div>

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

  1381.                 <select id="ing-kind" data-ingest-path="kind">

  1382.                   <option value="none">none</option>

  1383.                   <option value="icecast">icecast</option>

  1384.                   <option value="srt">srt</option>

  1385.                   <option value="aes67">aes67</option>

  1386.                   <option value="stdin">stdin</option>

  1387.                   <option value="http-raw">http-raw</option>

  1388.                 </select>

  1389.               </div>

  1390.             </div>

  1391. 

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

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

  1394.                 <span class="ctrl-label">Prebuffer</span>

  1395.                 <span class="ctrl-sub">ms</span>

  1396.               </div>

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

  1398.                 <input type="number" id="ing-prebuffer" data-ingest-path="prebufferMs">

  1399.               </div>

  1400.             </div>

  1401. 

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

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

  1404.                 <span class="ctrl-label">Stall Timeout</span>

  1405.                 <span class="ctrl-sub">ms</span>

  1406.               </div>

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

  1408.                 <input type="number" id="ing-stall-timeout" data-ingest-path="stallTimeoutMs">

  1409.               </div>

  1410.             </div>

  1411. 

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

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

  1414.                 <span class="ctrl-label">Reconnect</span>

  1415.               </div>

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

  1417.                 <label><input type="checkbox" id="ing-reconnect-enabled" data-ingest-path="reconnect.enabled"> Enabled</label>

  1418.               </div>

  1419.             </div>

  1420. 

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

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

  1423.                 <span class="ctrl-label">Backoff Initial</span>

  1424.                 <span class="ctrl-sub">ms</span>

  1425.               </div>

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

  1427.                 <input type="number" id="ing-reconnect-initial" data-ingest-path="reconnect.initialBackoffMs">

  1428.               </div>

  1429.             </div>

  1430. 

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

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

  1433.                 <span class="ctrl-label">Backoff Max</span>

  1434.                 <span class="ctrl-sub">ms</span>

  1435.               </div>

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

  1437.                 <input type="number" id="ing-reconnect-max" data-ingest-path="reconnect.maxBackoffMs">

  1438.               </div>

  1439.             </div>

  1440.           </div>

  1441. 

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

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

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

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

  1446.                 <div class="ctrl-label-wrap"><span class="ctrl-label">URL</span></div>

  1447.                 <div class="ctrl-input"><input type="text" id="ing-icecast-url" data-ingest-path="icecast.url" spellcheck="false"></div>

  1448.               </div>

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

  1450.                 <div class="ctrl-label-wrap"><span class="ctrl-label">Decoder</span></div>

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

  1452.                   <select id="ing-icecast-decoder" data-ingest-path="icecast.decoder">

  1453.                     <option value="auto">auto</option>

  1454.                     <option value="native">native</option>

  1455.                     <option value="ffmpeg">ffmpeg</option>

  1456.                     <option value="fallback">fallback</option>

  1457.                   </select>

  1458.                 </div>

  1459.               </div>

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

  1461.                 <div class="ctrl-label-wrap"><span class="ctrl-label">RadioText Relay</span></div>

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

  1463.                   <label><input type="checkbox" id="ing-icecast-rt-enabled" data-ingest-path="icecast.radioText.enabled"> Enabled</label>

  1464.                 </div>

  1465.               </div>

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

  1467.                 <div class="ctrl-label-wrap"><span class="ctrl-label">RT Prefix</span></div>

  1468.                 <div class="ctrl-input"><input type="text" id="ing-icecast-rt-prefix" data-ingest-path="icecast.radioText.prefix"></div>

  1469.               </div>

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

  1471.                 <div class="ctrl-label-wrap"><span class="ctrl-label">RT MaxLen</span></div>

  1472.                 <div class="ctrl-input"><input type="number" id="ing-icecast-rt-maxlen" data-ingest-path="icecast.radioText.maxLen"></div>

  1473.               </div>

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

  1475.                 <div class="ctrl-label-wrap"><span class="ctrl-label">RT Only On Change</span></div>

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

  1477.                   <label><input type="checkbox" id="ing-icecast-rt-only-change" data-ingest-path="icecast.radioText.onlyOnChange"> Enabled</label>

  1478.                 </div>

  1479.               </div>

  1480.             </div>

  1481.           </div>

  1482. 

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

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

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

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

  1487.                 <div class="ctrl-label-wrap"><span class="ctrl-label">URL</span></div>

  1488.                 <div class="ctrl-input"><input type="text" id="ing-srt-url" data-ingest-path="srt.url" spellcheck="false"></div>

  1489.               </div>

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

  1491.                 <div class="ctrl-label-wrap"><span class="ctrl-label">Mode</span></div>

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

  1493.                   <select id="ing-srt-mode" data-ingest-path="srt.mode">

  1494.                     <option value="listener">listener</option>

  1495.                     <option value="caller">caller</option>

  1496.                     <option value="rendezvous">rendezvous</option>

  1497.                   </select>

  1498.                 </div>

  1499.               </div>

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

  1501.                 <div class="ctrl-label-wrap"><span class="ctrl-label">Sample Rate</span></div>

  1502.                 <div class="ctrl-input"><input type="number" id="ing-srt-rate" data-ingest-path="srt.sampleRateHz"></div>

  1503.               </div>

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

  1505.                 <div class="ctrl-label-wrap"><span class="ctrl-label">Channels</span></div>

  1506.                 <div class="ctrl-input"><input type="number" id="ing-srt-channels" data-ingest-path="srt.channels"></div>

  1507.               </div>

  1508.             </div>

  1509.           </div>

  1510. 

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

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

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

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

  1515.                 <div class="ctrl-label-wrap"><span class="ctrl-label">SDP Path</span></div>

  1516.                 <div class="ctrl-input"><input type="text" id="ing-aes67-sdppath" data-ingest-path="aes67.sdpPath" spellcheck="false"></div>

  1517.               </div>

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

  1519.                 <div class="ctrl-label-wrap"><span class="ctrl-label">SDP Inline</span></div>

  1520.                 <div class="ctrl-input"><input type="text" id="ing-aes67-sdp" data-ingest-path="aes67.sdp" spellcheck="false"></div>

  1521.               </div>

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

  1523.                 <div class="ctrl-label-wrap"><span class="ctrl-label">Multicast Group</span></div>

  1524.                 <div class="ctrl-input"><input type="text" id="ing-aes67-group" data-ingest-path="aes67.multicastGroup" spellcheck="false"></div>

  1525.               </div>

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

  1527.                 <div class="ctrl-label-wrap"><span class="ctrl-label">Port</span></div>

  1528.                 <div class="ctrl-input"><input type="number" id="ing-aes67-port" data-ingest-path="aes67.port"></div>

  1529.               </div>

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

  1531.                 <div class="ctrl-label-wrap"><span class="ctrl-label">Payload Type</span></div>

  1532.                 <div class="ctrl-input"><input type="number" id="ing-aes67-pt" data-ingest-path="aes67.payloadType"></div>

  1533.               </div>

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

  1535.                 <div class="ctrl-label-wrap"><span class="ctrl-label">Sample Rate</span></div>

  1536.                 <div class="ctrl-input"><input type="number" id="ing-aes67-rate" data-ingest-path="aes67.sampleRateHz"></div>

  1537.               </div>

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

  1539.                 <div class="ctrl-label-wrap"><span class="ctrl-label">Channels</span></div>

  1540.                 <div class="ctrl-input"><input type="number" id="ing-aes67-channels" data-ingest-path="aes67.channels"></div>

  1541.               </div>

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

  1543.                 <div class="ctrl-label-wrap"><span class="ctrl-label">Encoding</span></div>

  1544.                 <div class="ctrl-input"><input type="text" id="ing-aes67-encoding" data-ingest-path="aes67.encoding"></div>

  1545.               </div>

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

  1547.                 <div class="ctrl-label-wrap"><span class="ctrl-label">Packet Time</span></div>

  1548.                 <div class="ctrl-input"><input type="number" id="ing-aes67-ptime" data-ingest-path="aes67.packetTimeMs"></div>

  1549.               </div>

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

  1551.                 <div class="ctrl-label-wrap"><span class="ctrl-label">Jitter Depth</span></div>

  1552.                 <div class="ctrl-input"><input type="number" id="ing-aes67-jitter" data-ingest-path="aes67.jitterDepthPackets"></div>

  1553.               </div>

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

  1555.                 <div class="ctrl-label-wrap"><span class="ctrl-label">Read Buffer</span></div>

  1556.                 <div class="ctrl-input"><input type="number" id="ing-aes67-readbuf" data-ingest-path="aes67.readBufferBytes"></div>

  1557.               </div>

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

  1559.                 <div class="ctrl-label-wrap"><span class="ctrl-label">Discovery</span></div>

  1560.                 <div class="ctrl-input"><label><input type="checkbox" id="ing-aes67-discovery-enabled" data-ingest-path="aes67.discovery.enabled"> Enabled</label></div>

  1561.               </div>

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

  1563.                 <div class="ctrl-label-wrap"><span class="ctrl-label">Discovery Name</span></div>

  1564.                 <div class="ctrl-input"><input type="text" id="ing-aes67-discovery-name" data-ingest-path="aes67.discovery.streamName"></div>

  1565.               </div>

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

  1567.                 <div class="ctrl-label-wrap"><span class="ctrl-label">Discovery Timeout</span></div>

  1568.                 <div class="ctrl-input"><input type="number" id="ing-aes67-discovery-timeout" data-ingest-path="aes67.discovery.timeoutMs"></div>

  1569.               </div>

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

  1571.                 <div class="ctrl-label-wrap"><span class="ctrl-label">SAP Group</span></div>

  1572.                 <div class="ctrl-input"><input type="text" id="ing-aes67-discovery-group" data-ingest-path="aes67.discovery.sapGroup"></div>

  1573.               </div>

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

  1575.                 <div class="ctrl-label-wrap"><span class="ctrl-label">SAP Port</span></div>

  1576.                 <div class="ctrl-input"><input type="number" id="ing-aes67-discovery-port" data-ingest-path="aes67.discovery.sapPort"></div>

  1577.               </div>

  1578.             </div>

  1579.           </div>

  1580. 

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

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

  1583.             <button class="apply-btn" id="ingest-save-reload" type="button">Save + Hard Reload</button>

  1584.             <button class="apply-btn secondary" id="ingest-reset" type="button">Reset Draft</button>

  1585.           </div>

  1586.         </div>

  1587.       </div>

  1588. 

  1589. 

  1590.         </div>

  1591.       </div>

  1592.     </section>

  1593. 

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

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

  1596.         <div class="stack">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1614.           <div class="health-trend">

  1615.             <div class="health-trend-label">High Watermark Trend</div>

  1616.             <svg class="spark warn" id="spark-high-watermark" viewBox="0 0 160 34" preserveAspectRatio="none"></svg>

  1617.           </div>

  1618.           <div class="health-trend">

  1619.             <div class="health-trend-label">Queue Fill Trend</div>

  1620.             <svg class="spark good" id="spark-queue-fill" viewBox="0 0 160 34" preserveAspectRatio="none"></svg>

  1621.           </div>

  1622.         </div>

  1623.           </div>

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

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

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

  1627.           <div class="section-note">Counts of 4xx rejects recorded by the control plane APIs.</div>

  1628.           <div class="kv">

  1629.             <div class="k">Rejects total</div><div class="v" id="audit-total">--</div>

  1630.             <div class="k">405 Method Not Allowed</div><div class="v" id="audit-methodNotAllowed">--</div>

  1631.             <div class="k">415 Unsupported Media Type</div><div class="v" id="audit-unsupportedMediaType">--</div>

  1632.             <div class="k">413 Request Too Large</div><div class="v" id="audit-bodyTooLarge">--</div>

  1633.             <div class="k">400 Unexpected Body</div><div class="v" id="audit-unexpectedBody">--</div>

  1634.           </div>

  1635.         </div>

  1636. 

  1637. 

  1638.           </div>

  1639.         </div>

  1640.         <div class="stack">

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

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

  1643.           <h2>Transition History</h2>

  1644.           <div class="meta">recent state shifts</div>

  1645.           <span class="chevron"></span>

  1646.         </div>

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

  1648.           <div class="section-note">Keeps runtime escalations visible without scrolling the activity log.</div>

  1649.           <div class="transition-history" id="transition-history">

  1650.             <div class="transition-history-empty">No transitions yet.</div>

  1651.           </div>

  1652.         </div>

  1653.       </div>

  1654. 

  1655. 

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

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

  1658.           <h2>Fault History</h2>

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

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

  1661.         </div>

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

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

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

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

  1666.           </div>

  1667.         </div>

  1668.       </div>

  1669. 

  1670. 

  1671.         </div>

  1672.       </div>

  1673.     </section>

  1674. 

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

  1676.       <div class="tab-columns one">

  1677.         <div class="stack">

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

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

  1680.           <h2>Activity Log</h2>

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

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

  1683.         </div>

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

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

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

  1687.           </div>

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

  1689.         </div>

  1690.       </div>

  1691.         </div>

  1692.       </div>

  1693.     </section>

  1694.   </div>

  1695. </div>

  1696. 

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

  1698. 

  1699. <script>

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

  1701. 

  1702. const runtimePollMs = 1000;

  1703. const configPollMs = 8000;

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

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

  1706. const sparkHistoryLimit = 40;

  1707. const transitionHistoryLimit = 6;

  1708. 

  1709. const state = {

  1710.   server: {

  1711.     config: null,

  1712.     runtime: null,

  1713.     lastConfigAt: 0,

  1714.     lastRuntimeAt: 0,

  1715.     configOk: false,

  1716.     runtimeOk: false,

  1717.   },

  1718.   lastRuntimeState: '',

  1719.   draft: {

  1720.     frequencyMHz: undefined,

  1721.     ps: undefined,

  1722.     radioText: undefined,

  1723.   },

  1724.   errors: {

  1725.     frequencyMHz: '',

  1726.     ps: '',

  1727.     radioText: '',

  1728.   },

  1729.   dirty: new Set(),

  1730.   pendingRequests: 0,

  1731.   txBusy: false,

  1732.   faultResetBusy: false,

  1733.   toggleBusy: {},

  1734.   pollersStarted: false,

  1735.   mobilePanelsApplied: false,

  1736.   ingestDraft: null,

  1737.   ingestDirty: false,

  1738.   ingestSaving: false,

  1739.   ingestError: '',

  1740.   charts: {

  1741.     audio: [],

  1742.     underruns: [],

  1743.     tx: [],

  1744.     highWatermark: [],

  1745.     queueFill: [],

  1746.   },

  1747.   runtimeTransitions: [],

  1748.   freqPresetIndex: 0,

  1749. };

  1750. 

  1751. const fields = {

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

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

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

  1755. };

  1756. 

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

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

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

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

  1761. }

  1762. 

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

  1764. 

  1765. function deepClone(obj) {

  1766.   return JSON.parse(JSON.stringify(obj ?? {}));

  1767. }

  1768. 

  1769. function getPathValue(obj, path) {

  1770.   if (!obj) return undefined;

  1771.   const parts = String(path || '').split('.');

  1772.   let cur = obj;

  1773.   for (const part of parts) {

  1774.     if (!part) continue;

  1775.     if (cur == null || typeof cur !== 'object') return undefined;

  1776.     cur = cur[part];

  1777.   }

  1778.   return cur;

  1779. }

  1780. 

  1781. function setPathValue(obj, path, value) {

  1782.   const parts = String(path || '').split('.');

  1783.   let cur = obj;

  1784.   for (let i = 0; i < parts.length; i += 1) {

  1785.     const part = parts[i];

  1786.     if (!part) continue;

  1787.     if (i === parts.length - 1) {

  1788.       cur[part] = value;

  1789.       return;

  1790.     }

  1791.     if (!cur[part] || typeof cur[part] !== 'object') cur[part] = {};

  1792.     cur = cur[part];

  1793.   }

  1794. }

  1795. 

  1796. function ingestFromServer() {

  1797.   return state.server.config?.ingest || {};

  1798. }

  1799. 

  1800. function updateIngestDirtyFromServer() {

  1801.   const serverRaw = ingestFromServer();

  1802.   const draftRaw = state.ingestDraft || {};

  1803.   state.ingestDirty = JSON.stringify(draftRaw) !== JSON.stringify(serverRaw);

  1804. }

  1805. 

  1806. function syncIngestDraftFromConfig(force = false) {

  1807.   if (!state.server.config) return;

  1808.   if (!state.ingestDraft || force || !state.ingestDirty) {

  1809.     state.ingestDraft = deepClone(ingestFromServer());

  1810.     state.ingestError = '';

  1811.   }

  1812.   updateIngestDirtyFromServer();

  1813. }

  1814. 

  1815. function ingestFieldValue(path) {

  1816.   return getPathValue(state.ingestDraft || {}, path);

  1817. }

  1818. 

  1819. function setIngestField(path, value) {

  1820.   if (!state.ingestDraft) state.ingestDraft = deepClone(ingestFromServer());

  1821.   setPathValue(state.ingestDraft, path, value);

  1822.   updateIngestDirtyFromServer();

  1823.   state.ingestError = '';

  1824.   render();

  1825. }

  1826. 

  1827. function serverValue(key) {

  1828.   const cfg = state.server.config;

  1829.   if (!cfg) return undefined;

  1830.   switch (key) {

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

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

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

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

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

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

  1837.     default: return undefined;

  1838.   }

  1839. }

  1840. 

  1841. function effectiveValue(key) {

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

  1843. }

  1844. 

  1845. function validateField(key, value) {

  1846.   switch (key) {

  1847.     case 'frequencyMHz': {

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

  1849.       const num = Number(value);

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

  1851.       return '';

  1852.     }

  1853.     case 'ps': {

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

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

  1856.       return '';

  1857.     }

  1858.     case 'radioText': {

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

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

  1861.       return '';

  1862.     }

  1863.     default:

  1864.       return '';

  1865.   }

  1866. }

  1867. 

  1868. function sectionHasErrors(section) {

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

  1870. }

  1871. 

  1872. function setDirty(key, value) {

  1873.   state.draft[key] = value;

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

  1875.   const current = serverValue(key);

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

  1877.   if (equal) {

  1878.     state.dirty.delete(key);

  1879.     state.draft[key] = undefined;

  1880.   } else {

  1881.     state.dirty.add(key);

  1882.   }

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

  1884.   render();

  1885. }

  1886. 

  1887. function clearDirty(keys) {

  1888.   for (const key of keys) {

  1889.     state.dirty.delete(key);

  1890.     state.draft[key] = undefined;

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

  1892.   }

  1893.   render();

  1894. }

  1895. 

  1896. function isDirtySection(section) {

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

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

  1899.   }

  1900.   return false;

  1901. }

  1902. 

  1903. function getSectionPatch(section) {

  1904.   const patch = {};

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

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

  1907.   }

  1908.   return patch;

  1909. }

  1910. 

  1911. async function api(path, opts) {

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

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

  1914.   if (!response.ok) {

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

  1916.   }

  1917.   if (!text) return {};

  1918.   try {

  1919.     return JSON.parse(text);

  1920.   } catch {

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

  1922.   }

  1923. }

  1924. 

  1925. function setConnection(ok, mode) {

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

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

  1928.   if (ok) {

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

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

  1931.   } else {

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

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

  1934.   }

  1935. }

  1936. 

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

  1938.   try {

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

  1940.     state.server.config = cfg;

  1941.     state.server.configOk = true;

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

  1943.     syncIngestDraftFromConfig();

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

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

  1946.     render();

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

  1948.     return cfg;

  1949.   } catch (error) {

  1950.     state.server.configOk = false;

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

  1952.     render();

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

  1954.     throw error;

  1955.   }

  1956. }

  1957. 

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

  1959.   try {

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

  1961.     state.server.runtime = runtime;

  1962.     state.server.runtimeOk = true;

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

  1964.     const syncedTransitions = syncTransitionHistoryFromEngine(runtime.engine);

  1965.     notifyRuntimeTransition(runtime.engine, !syncedTransitions);

  1966.     pushHistory(runtime);

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

  1968.     render();

  1969.     return runtime;

  1970.   } catch (error) {

  1971.     state.server.runtimeOk = false;

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

  1973.     render();

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

  1975.     throw error;

  1976.   }

  1977. }

  1978. 

  1979. function pushHistory(runtime) {

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

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

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

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

  1984.   const highWatermarkDurationSeconds = Number(audio.highWatermarkDurationSeconds);

  1985.   const normalizedHighWatermark = Number.isFinite(highWatermarkDurationSeconds) ? highWatermarkDurationSeconds : 0;

  1986.   pushChart(state.charts.highWatermark, normalizedHighWatermark);

  1987.   const queueFill = Number(engine.queue?.fillLevel ?? 0);

  1988.   pushChart(state.charts.queueFill, Number.isFinite(queueFill) ? queueFill : 0);

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

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

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

  1992. }

  1993. 

  1994. function pushTransitionHistory(from, to, severity) {

  1995.   if (!from || !to) return;

  1996.   const entry = {

  1997.     from: normalizeRuntimeState(from),

  1998.     to: normalizeRuntimeState(to),

  1999.     severity: severity || 'info',

  2000.     time: nowTs(),

  2001.   };

  2002.   state.runtimeTransitions.unshift(entry);

  2003.   if (state.runtimeTransitions.length > transitionHistoryLimit) {

  2004.     state.runtimeTransitions.splice(transitionHistoryLimit);

  2005.   }

  2006.   updateTransitionHistory();

  2007. }

  2008. 

  2009. function transitionEntryTime(value) {

  2010.   if (value == null) return nowTs();

  2011.   if (typeof value === 'number') return value;

  2012.   const parsed = Date.parse(String(value));

  2013.   return Number.isNaN(parsed) ? nowTs() : parsed;

  2014. }

  2015. 

  2016. function syncTransitionHistoryFromEngine(engine) {

  2017.   const entries = Array.isArray(engine?.transitionHistory) ? engine.transitionHistory : null;

  2018.   if (!entries) return false;

  2019.   const sliceStart = Math.max(0, entries.length - transitionHistoryLimit);

  2020.   const trimmed = entries.slice(sliceStart);

  2021.   const normalized = trimmed.map((entry) => ({

  2022.     from: normalizeRuntimeState(entry?.from),

  2023.     to: normalizeRuntimeState(entry?.to),

  2024.     severity: String(entry?.severity || 'info').toLowerCase(),

  2025.     time: transitionEntryTime(entry?.time),

  2026.   }));

  2027.   normalized.reverse();

  2028.   state.runtimeTransitions = normalized;

  2029.   updateTransitionHistory();

  2030.   return true;

  2031. }

  2032. 

  2033. function transitionSeverityClass(severity) {

  2034.   switch (String(severity || '').toLowerCase()) {

  2035.     case 'err':

  2036.       return 'err';

  2037.     case 'warn':

  2038.       return 'warn';

  2039.     case 'ok':

  2040.     case 'good':

  2041.       return 'good';

  2042.     default:

  2043.       return 'info';

  2044.   }

  2045. }

  2046. 

  2047. function updateTransitionHistory() {

  2048.   const container = $('transition-history');

  2049.   if (!container) return;

  2050.   if (!state.runtimeTransitions.length) {

  2051.     container.innerHTML = '<div class="transition-history-empty">No transitions yet.</div>';

  2052.     return;

  2053.   }

  2054.   const rows = state.runtimeTransitions.map((entry) => {

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

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

  2057.     const desc = `${entry.from.toUpperCase()} → ${entry.to.toUpperCase()}`;

  2058.     const severityClass = transitionSeverityClass(entry.severity);

  2059.     return `<div class="transition-history-entry ${severityClass}"><span class="transition-history-time">${timeLabel}</span><span class="transition-history-desc">${desc}</span></div>`;

  2060.   });

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

  2062. }

  2063. 

  2064. function pushChart(arr, value) {

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

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

  2067. }

  2068. 

  2069. function setConnectionBusy() {

  2070.   setConnection(true, 'busy');

  2071. }

  2072. 

  2073. function beginRequest() {

  2074.   state.pendingRequests += 1;

  2075.   setConnectionBusy();

  2076.   render();

  2077. }

  2078. 

  2079. function endRequest() {

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

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

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

  2083.   }

  2084.   render();

  2085. }

  2086. 

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

  2088.   beginRequest();

  2089.   try {

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

  2091.       method: 'POST',

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

  2093.       body: JSON.stringify(patch),

  2094.     });

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

  2096.     clearDirty(clearKeys);

  2097.     render();

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

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

  2100.     await Promise.allSettled([

  2101.       loadConfig({ silent: true }),

  2102.       loadRuntime({ silent: true }),

  2103.     ]);

  2104.     return result;

  2105.   } catch (error) {

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

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

  2108.     throw error;

  2109.   } finally {

  2110.     endRequest();

  2111.   }

  2112. }

  2113. 

  2114. function mergeLocalConfigPatch(patch) {

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

  2116.   cfg.fm ||= {};

  2117.   cfg.rds ||= {};

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

  2119.     switch (key) {

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

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

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

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

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

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

  2126.     }

  2127.   }

  2128. }

  2129. 

  2130. async function applySection(section) {

  2131.   if (sectionHasErrors(section)) {

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

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

  2134.     render();

  2135.     return;

  2136.   }

  2137.   const patch = getSectionPatch(section);

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

  2139.   if (!keys.length) {

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

  2141.     return;

  2142.   }

  2143.   let message = 'Applied';

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

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

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

  2147. }

  2148. 

  2149. function resetSection(section) {

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

  2151.   clearDirty(keys);

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

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

  2154. }

  2155. 

  2156. async function saveIngestConfig() {

  2157.   if (state.ingestSaving) return;

  2158.   if (!state.ingestDirty) {

  2159.     toast('No ingest changes to save', 'info');

  2160.     return;

  2161.   }

  2162.   if (!state.ingestDraft) {

  2163.     toast('Ingest draft not ready yet', 'warn');

  2164.     return;

  2165.   }

  2166.   state.ingestSaving = true;

  2167.   state.ingestError = '';

  2168.   beginRequest();

  2169.   render();

  2170.   try {

  2171.     const result = await api('/config/ingest/save', {

  2172.       method: 'POST',

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

  2174.       body: JSON.stringify({ ingest: state.ingestDraft }),

  2175.     });

  2176.     state.ingestDirty = false;

  2177.     toast(result.reloadScheduled ? 'Ingest saved, hard reload scheduled' : 'Ingest saved', 'ok');

  2178.     log('INGEST save accepted' + (result.reloadScheduled ? ' [hard-reload]' : ''), 'ok');

  2179.     if (result.reloadScheduled) {

  2180.       setTimeout(() => {

  2181.         window.location.reload();

  2182.       }, 1500);

  2183.     }

  2184.   } catch (error) {

  2185.     state.ingestError = error.message;

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

  2187.     log('INGEST save failed: ' + error.message, 'err');

  2188.   } finally {

  2189.     state.ingestSaving = false;

  2190.     endRequest();

  2191.     render();

  2192.   }

  2193. }

  2194. 

  2195. function resetIngestDraft() {

  2196.   syncIngestDraftFromConfig(true);

  2197.   toast('Ingest draft reset', 'info');

  2198.   log('INGEST draft reset', 'warn');

  2199.   render();

  2200. }

  2201. 

  2202. async function setToggle(key, nextValue) {

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

  2204.   state.toggleBusy[key] = true;

  2205.   render();

  2206.   try {

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

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

  2209.       clearKeys: [],

  2210.     });

  2211.   } finally {

  2212.     state.toggleBusy[key] = false;

  2213.     render();

  2214.   }

  2215. }

  2216. 

  2217. async function txAction(action) {

  2218.   if (state.txBusy) return;

  2219.   state.txBusy = true;

  2220.   render();

  2221.   beginRequest();

  2222.   try {

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

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

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

  2226.     await Promise.allSettled([

  2227.       loadRuntime({ silent: true }),

  2228.       loadConfig({ silent: true }),

  2229.     ]);

  2230.   } catch (error) {

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

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

  2233.   } finally {

  2234.     state.txBusy = false;

  2235.     endRequest();

  2236.     render();

  2237.   }

  2238. }

  2239. 

  2240. async function resetFaultAction() {

  2241.   if (state.faultResetBusy) return;

  2242.   state.faultResetBusy = true;

  2243.   render();

  2244.   beginRequest();

  2245.   try {

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

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

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

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

  2250.   } catch (error) {

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

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

  2253.   } finally {

  2254.     state.faultResetBusy = false;

  2255.     endRequest();

  2256.     render();

  2257.   }

  2258. }

  2259. 

  2260. function fmt(n) {

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

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

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

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

  2265.   return String(n);

  2266. }

  2267. 

  2268. function fmtTime(seconds) {

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

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

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

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

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

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

  2275.   return `${s}s`;

  2276. }

  2277. 

  2278. function fmtDurationSeconds(value) {

  2279.   if (!Number.isFinite(value) || value < 0) return '--';

  2280.   if (value >= 1) return `${value.toFixed(2)} s`;

  2281.   return `${(value * 1000).toFixed(0)} ms`;

  2282. }

  2283. 

  2284. function fmtBool(v) {

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

  2286. }

  2287. 

  2288. function fmtFreq(v) {

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

  2290. }

  2291. 

  2292. function fmtPercent(v) {

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

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

  2295. }

  2296. 

  2297. function ageString(ts) {

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

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

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

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

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

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

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

  2305.   return h + 'h ago';

  2306. }

  2307. 

  2308. function ageFromTimestamp(value) {

  2309.   if (!value) return '--';

  2310.   if (typeof value === 'number') return ageString(value);

  2311.   const ts = Date.parse(String(value));

  2312.   if (Number.isNaN(ts)) return '--';

  2313.   return ageString(ts);

  2314. }

  2315. 

  2316. function joinSummaryParts(parts) {

  2317.   return parts.filter((part) => String(part || '').trim() !== '').join(' · ');

  2318. }

  2319. 

  2320. function updateText(id, text) {

  2321.   const el = $(id);

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

  2323. }

  2324. 

  2325. function updateHTML(id, html) {

  2326.   const el = $(id);

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

  2328. }

  2329. 

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

  2331.   const el = $(id);

  2332.   if (!el) return;

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

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

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

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

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

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

  2339.   }

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

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

  2342. }

  2343. 

  2344. function syncIngestInput(id, path, transform = (v) => v) {

  2345.   const el = $(id);

  2346.   if (!el) return;

  2347.   const value = transform(ingestFieldValue(path));

  2348.   const asString = value == null ? '' : String(value);

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

  2350.   if (!isFocused && el.value !== asString) el.value = asString;

  2351. }

  2352. 

  2353. function syncIngestCheckbox(id, path) {

  2354.   const el = $(id);

  2355.   if (!el) return;

  2356.   el.checked = !!ingestFieldValue(path);

  2357. }

  2358. 

  2359. function renderFieldErrors() {

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

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

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

  2363. }

  2364. 

  2365. function renderFieldError(id, message) {

  2366.   const el = $(id);

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

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

  2369. }

  2370. 

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

  2372.   const fill = $(fillId);

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

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

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

  2376.   updateText(textId, text);

  2377. }

  2378. 

  2379. function applyMobilePanelDefaults() {

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

  2381.   state.mobilePanelsApplied = true;

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

  2383.     const key = panel.dataset.panelKey;

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

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

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

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

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

  2389.   });

  2390. }

  2391. 

  2392. function syncFreqPresetIndex(value) {

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

  2394.   let closestIndex = 0;

  2395.   let closestDistance = Infinity;

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

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

  2398.     if (dist < closestDistance) {

  2399.       closestDistance = dist;

  2400.       closestIndex = idx;

  2401.     }

  2402.   });

  2403.   state.freqPresetIndex = closestIndex;

  2404. }

  2405. 

  2406. function cycleFreqPreset(direction) {

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

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

  2409.   setDirty('frequencyMHz', next);

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

  2411. }

  2412. 

  2413. function refreshPresetButtons() {

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

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

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

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

  2418.   });

  2419. }

  2420. 

  2421. function updateHeroState(engineState) {

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

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

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

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

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

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

  2428.   }

  2429. }

  2430. 

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

  2432.   const svg = $(svgId);

  2433.   if (!svg) return;

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

  2435.   const width = 160;

  2436.   const height = 34;

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

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

  2439.   const min = 0;

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

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

  2442.     const x = i * step;

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

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

  2445.     return [x, y];

  2446.   });

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

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

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

  2450. }

  2451. 

  2452. function render() {

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

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

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

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

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

  2458.   const hasIngestRuntime = !!runtime.ingest;

  2459.   const ingest = runtime.ingest || {};

  2460.   const ingestActive = ingest.active || {};

  2461.   const ingestSource = ingest.source || {};

  2462.   const ingestRuntime = ingest.runtime || {};

  2463. 

  2464.   const appliedRaw = engine.appliedFrequencyMHz;

  2465.   const appliedFreq = Number.isFinite(Number(appliedRaw)) ? Number(appliedRaw) : null;

  2466.   const desiredRaw = cfg.fm?.frequencyMHz;

  2467.   const desiredFreq = Number.isFinite(Number(desiredRaw)) ? Number(desiredRaw) : null;

  2468.   const displayFreq = appliedFreq ?? effectiveValue('frequencyMHz') ?? desiredFreq;

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

  2470.   const appliedLabel = appliedFreq != null ? `Applied ${appliedFreq.toFixed(1)} MHz` : 'Applied --';

  2471.   const desiredLabel = desiredFreq != null ? `Desired ${desiredFreq.toFixed(1)} MHz` : 'Desired --';

  2472.   updateText('freq-applied', appliedLabel);

  2473.   updateText('freq-desired', desiredLabel);

  2474.   const noteEl = $('freq-note');

  2475.   if (noteEl) {

  2476.     const mismatch = appliedFreq != null && desiredFreq != null && !nearlyEqual(appliedFreq, desiredFreq, 0.001);

  2477.     noteEl.classList.toggle('mismatch', mismatch);

  2478.   }

  2479. 

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

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

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

  2483. 

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

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

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

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

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

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

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

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

  2492. 

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

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

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

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

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

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

  2499.   updateHeroState(txStateValue);

  2500. 

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

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

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

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

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

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

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

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

  2509.   if (resetFaultBtn) {

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

  2511.     resetFaultBtn.disabled = resetDisabled;

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

  2513.   }

  2514. 

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

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

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

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

  2519.   syncIngestInput('ing-kind', 'kind', (v) => String(v ?? 'none'));

  2520.   syncIngestInput('ing-prebuffer', 'prebufferMs', (v) => Number.isFinite(Number(v)) ? Number(v) : 0);

  2521.   syncIngestInput('ing-stall-timeout', 'stallTimeoutMs', (v) => Number.isFinite(Number(v)) ? Number(v) : 0);

  2522.   syncIngestCheckbox('ing-reconnect-enabled', 'reconnect.enabled');

  2523.   syncIngestInput('ing-reconnect-initial', 'reconnect.initialBackoffMs', (v) => Number.isFinite(Number(v)) ? Number(v) : 0);

  2524.   syncIngestInput('ing-reconnect-max', 'reconnect.maxBackoffMs', (v) => Number.isFinite(Number(v)) ? Number(v) : 0);

  2525. 

  2526.   syncIngestInput('ing-icecast-url', 'icecast.url', (v) => String(v ?? ''));

  2527.   syncIngestInput('ing-icecast-decoder', 'icecast.decoder', (v) => String(v ?? 'auto'));

  2528.   syncIngestCheckbox('ing-icecast-rt-enabled', 'icecast.radioText.enabled');

  2529.   syncIngestInput('ing-icecast-rt-prefix', 'icecast.radioText.prefix', (v) => String(v ?? ''));

  2530.   syncIngestInput('ing-icecast-rt-maxlen', 'icecast.radioText.maxLen', (v) => Number.isFinite(Number(v)) ? Number(v) : 64);

  2531.   syncIngestCheckbox('ing-icecast-rt-only-change', 'icecast.radioText.onlyOnChange');

  2532. 

  2533.   syncIngestInput('ing-srt-url', 'srt.url', (v) => String(v ?? ''));

  2534.   syncIngestInput('ing-srt-mode', 'srt.mode', (v) => String(v ?? 'listener'));

  2535.   syncIngestInput('ing-srt-rate', 'srt.sampleRateHz', (v) => Number.isFinite(Number(v)) ? Number(v) : 48000);

  2536.   syncIngestInput('ing-srt-channels', 'srt.channels', (v) => Number.isFinite(Number(v)) ? Number(v) : 2);

  2537. 

  2538.   syncIngestInput('ing-aes67-sdppath', 'aes67.sdpPath', (v) => String(v ?? ''));

  2539.   syncIngestInput('ing-aes67-sdp', 'aes67.sdp', (v) => String(v ?? ''));

  2540.   syncIngestInput('ing-aes67-group', 'aes67.multicastGroup', (v) => String(v ?? ''));

  2541.   syncIngestInput('ing-aes67-port', 'aes67.port', (v) => Number.isFinite(Number(v)) ? Number(v) : 5004);

  2542.   syncIngestInput('ing-aes67-pt', 'aes67.payloadType', (v) => Number.isFinite(Number(v)) ? Number(v) : 97);

  2543.   syncIngestInput('ing-aes67-rate', 'aes67.sampleRateHz', (v) => Number.isFinite(Number(v)) ? Number(v) : 48000);

  2544.   syncIngestInput('ing-aes67-channels', 'aes67.channels', (v) => Number.isFinite(Number(v)) ? Number(v) : 2);

  2545.   syncIngestInput('ing-aes67-encoding', 'aes67.encoding', (v) => String(v ?? 'L24'));

  2546.   syncIngestInput('ing-aes67-ptime', 'aes67.packetTimeMs', (v) => Number.isFinite(Number(v)) ? Number(v) : 1);

  2547.   syncIngestInput('ing-aes67-jitter', 'aes67.jitterDepthPackets', (v) => Number.isFinite(Number(v)) ? Number(v) : 8);

  2548.   syncIngestInput('ing-aes67-readbuf', 'aes67.readBufferBytes', (v) => Number.isFinite(Number(v)) ? Number(v) : 1048576);

  2549.   syncIngestCheckbox('ing-aes67-discovery-enabled', 'aes67.discovery.enabled');

  2550.   syncIngestInput('ing-aes67-discovery-name', 'aes67.discovery.streamName', (v) => String(v ?? ''));

  2551.   syncIngestInput('ing-aes67-discovery-timeout', 'aes67.discovery.timeoutMs', (v) => Number.isFinite(Number(v)) ? Number(v) : 3000);

  2552.   syncIngestInput('ing-aes67-discovery-group', 'aes67.discovery.sapGroup', (v) => String(v ?? ''));

  2553.   syncIngestInput('ing-aes67-discovery-port', 'aes67.discovery.sapPort', (v) => Number.isFinite(Number(v)) ? Number(v) : 0);

  2554. 

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

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

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

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

  2559.   renderFieldErrors();

  2560.   refreshPresetButtons();

  2561. 

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

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

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

  2565. 

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

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

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

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

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

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

  2572.   const ingestKind = String(ingestFieldValue('kind') || 'none').toLowerCase();

  2573.   $('ing-group-icecast').style.display = ingestKind === 'icecast' ? '' : 'none';

  2574.   $('ing-group-srt').style.display = ingestKind === 'srt' ? '' : 'none';

  2575.   $('ing-group-aes67').style.display = ingestKind === 'aes67' ? '' : 'none';

  2576.   $('ingest-save-reload').disabled = !state.ingestDirty || state.ingestSaving || !state.server.configOk;

  2577.   $('ingest-save-reload').textContent = state.ingestSaving ? 'Saving...' : 'Save + Hard Reload';

  2578.   $('ingest-reset').disabled = !state.ingestDirty || state.ingestSaving;

  2579.   const ingestErr = $('ingest-error');

  2580.   ingestErr.textContent = state.ingestError || '';

  2581.   ingestErr.classList.toggle('show', !!state.ingestError);

  2582. 

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

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

  2585.   updateText('ingest-meta', state.ingestSaving ? 'Saving' : (state.ingestDirty ? 'Unsaved changes' : 'Saved config'));

  2586. 

  2587.   const configuredKind = String(cfg.ingest?.kind || ingestFieldValue('kind') || 'none').toLowerCase();

  2588.   const activeKind = String(ingestActive.kind || configuredKind || 'none').toLowerCase();

  2589.   const runtimeStateLabel = String(ingestRuntime.state || '').toLowerCase();

  2590.   const sourceStateLabel = String(ingestSource.state || '').toLowerCase();

  2591.   const stateSummary = hasIngestRuntime ? (joinSummaryParts([

  2592.     runtimeStateLabel ? runtimeStateLabel.toUpperCase() : '',

  2593.     sourceStateLabel ? `source ${sourceStateLabel.toUpperCase()}` : '',

  2594.     ingestRuntime.prebuffering ? 'PREBUFFERING' : '',

  2595.     ingestRuntime.writeBlocked ? 'WRITE-BLOCKED' : '',

  2596.   ]) || '--') : '--';

  2597.   const sourceSummary = joinSummaryParts([

  2598.     activeKind || 'none',

  2599.     ingestActive.transport || '',

  2600.     ingestActive.codec || '',

  2601.     Number.isFinite(Number(ingestActive.sampleRateHz)) ? `${Number(ingestActive.sampleRateHz)} Hz` : '',

  2602.     Number.isFinite(Number(ingestActive.channels)) ? `${Number(ingestActive.channels)} ch` : '',

  2603.   ]) || '--';

  2604.   const signalSummary = hasIngestRuntime ? (joinSummaryParts([

  2605.     ingestSource.connected ? 'connected' : 'disconnected',

  2606.     Number.isFinite(Number(ingestSource.bufferedSeconds)) ? `${Number(ingestSource.bufferedSeconds).toFixed(2)}s buffered` : '',

  2607.     Number.isFinite(Number(ingestSource.reconnects)) ? `${Number(ingestSource.reconnects)} reconnects` : '',

  2608.   ]) || '--') : '--';

  2609.   const detailSummary = hasIngestRuntime ? (ingestSource.streamTitle || ingestActive.detail || ingestSource.lastError || '--') : '--';

  2610.   const origin = ingestActive.origin || {};

  2611.   const originSummary = hasIngestRuntime ? (joinSummaryParts([

  2612.     origin.kind || '',

  2613.     origin.endpoint || '',

  2614.     origin.streamName || '',

  2615.     origin.mode || '',

  2616.     origin.sdpPath || '',

  2617.   ]) || '--') : '--';

  2618.   const lastChunkSummary = hasIngestRuntime ? ageFromTimestamp(ingestRuntime.lastChunkAt || ingestSource.lastChunkAt) : '--';

  2619.   updateText('ingest-summary-state', stateSummary);

  2620.   updateText('ingest-summary-source', sourceSummary);

  2621.   updateText('ingest-summary-signal', signalSummary);

  2622.   updateText('ingest-summary-detail', detailSummary);

  2623.   updateText('ingest-summary-origin', originSummary);

  2624.   updateText('ingest-summary-last', lastChunkSummary);

  2625. 

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

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

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

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

  2630.   updateText('info-runtime-age', ageString(state.server.lastRuntimeAt));

  2631.   updateText('info-last-alert', engine.runtimeAlert ? engine.runtimeAlert : (engine.lastError ? engine.lastError : 'None'));

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

  2633. 

  2634.   updateHealth(engine, driver, audioStream);

  2635.   updateControlAudit(runtime.controlAudit);

  2636.   updateFaultHistory(engine);

  2637.   updateTransitionHistory();

  2638.   updateResetHint(engine);

  2639.   updateMeters(engine, driver, audioStream);

  2640.   const highWatermarkDurationSecondsRaw = audioStream?.highWatermarkDurationSeconds;

  2641.   const highWatermarkDurationSeconds = Number(highWatermarkDurationSecondsRaw);

  2642.   const highWatermarkFramesRaw = audioStream?.highWatermark;

  2643.   const highWatermarkFrames = Number.isFinite(Number(highWatermarkFramesRaw)) ? Number(highWatermarkFramesRaw) : 0;

  2644.   const capacityRaw = audioStream?.capacity;

  2645.   const capacity = Number.isFinite(Number(capacityRaw)) ? Number(capacityRaw) : 0;

  2646.   const bufferedDurationSecondsRaw = audioStream?.bufferedDurationSeconds;

  2647.   const bufferedDurationSeconds = Number(bufferedDurationSecondsRaw);

  2648.   const hasBufferedDuration = Number.isFinite(bufferedDurationSeconds);

  2649.   const hasHighWatermarkDuration = Number.isFinite(highWatermarkDurationSeconds);

  2650.   const highWatermarkRatio = capacity > 0 ? Math.min(1, highWatermarkFrames / capacity) : 0;

  2651.   let highWatermarkMode = 'good';

  2652.   if (highWatermarkRatio >= 0.95) highWatermarkMode = 'err';

  2653.   else if (highWatermarkRatio >= 0.65) highWatermarkMode = 'warn';

  2654.   const sparkHighWatermarkMax = Math.max(

  2655.     1,

  2656.     hasHighWatermarkDuration ? highWatermarkDurationSeconds : 0,

  2657.     hasBufferedDuration ? bufferedDurationSeconds : 0

  2658.   );

  2659.   const queueHealthRaw = String(engine.queue?.health || '').toLowerCase();

  2660.   let queueSparkMode = 'good';

  2661.   if (queueHealthRaw === 'critical') queueSparkMode = 'err';

  2662.   else if (queueHealthRaw === 'low') queueSparkMode = 'warn';

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

  2664.   drawSparkline('spark-high-watermark', state.charts.highWatermark, highWatermarkMode, sparkHighWatermarkMax);

  2665.   drawSparkline('spark-queue-fill', state.charts.queueFill, queueSparkMode, 1);

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

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

  2668.   applyMobilePanelDefaults();

  2669. }

  2670. 

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

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

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

  2674.   const el = $(toggleId);

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

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

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

  2678. }

  2679. 

  2680. function runtimeStateClass(engineState) {

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

  2682.   if (!normalized) {

  2683.     return 'warn';

  2684.   }

  2685.   switch (normalized) {

  2686.     case 'faulted':

  2687.       return 'err';

  2688.     case 'muted':

  2689.     case 'degraded':

  2690.     case 'prebuffering':

  2691.     case 'arming':

  2692.     case 'stopping':

  2693.     case 'idle':

  2694.     case 'unknown':

  2695.       return 'warn';

  2696.     default:

  2697.       return 'good';

  2698.   }

  2699. }

  2700. 

  2701. 

  2702. 

  2703. function normalizeRuntimeState(stateName) {

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

  2705.   return normalized || 'idle';

  2706. }

  2707. 

  2708. function runtimeStateSeverity(stateName) {

  2709.   const normalized = normalizeRuntimeState(stateName);

  2710.   switch (normalized) {

  2711.     case 'running':

  2712.       return 'ok';

  2713.     case 'degraded':

  2714.     case 'muted':

  2715.       return 'warn';

  2716.     case 'faulted':

  2717.       return 'err';

  2718.     default:

  2719.       return 'info';

  2720.   }

  2721. }

  2722. 

  2723. function notifyRuntimeTransition(engine, pushHistory = true) {

  2724.   if (!engine) return;

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

  2726.   const prev = state.lastRuntimeState;

  2727.   state.lastRuntimeState = next;

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

  2729.   const severity = runtimeStateSeverity(next);

  2730.   if (pushHistory) {

  2731.     pushTransitionHistory(prev, next, severity);

  2732.   }

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

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

  2735.   toast(message, severity);

  2736.   log(message, logLevel);

  2737. }

  2738. 

  2739. 

  2740. function updateHealth(engine, driver, audioStream) {

  2741.   engine = engine || {};

  2742.   driver = driver || {};

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

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

  2745. 

  2746.   let runtimeLabel = 'WAITING';

  2747.   let runtimeClass = 'warn';

  2748.   if (state.server.runtimeOk) {

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

  2750.     runtimeLabel = engineStateName.toUpperCase();

  2751.     runtimeClass = runtimeStateClass(engineStateName);

  2752.   }

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

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

  2755. 

  2756.   const durationSeconds = Number(engine.runtimeStateDurationSeconds);

  2757.   const durationLabel = Number.isFinite(durationSeconds) && durationSeconds > 0 ? fmtTime(durationSeconds) : '--';

  2758.   updateText('health-state-age', durationLabel);

  2759.   const stateAgeEl = $('health-state-age');

  2760.   if (stateAgeEl) {

  2761.     stateAgeEl.className = 'val ' + runtimeClass;

  2762.   }

  2763. 

  2764.   const runtimeIndicator = engine.runtimeIndicator;

  2765.   const indicatorLabels = {

  2766.     normal: 'Normal',

  2767.     degraded: 'Degraded',

  2768.     queueCritical: 'Queue critical',

  2769.   };

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

  2771.   let indicatorSeverity = '';

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

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

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

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

  2776.   if (indicatorEl) {

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

  2778.   }

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

  2780. 

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

  2782.   const hasAlert = !!runtimeAlertRaw;

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

  2784.   if (alertEl) {

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

  2786.   }

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

  2788. 

  2789.   let audioLabel = 'N/A';

  2790.   let audioClass = 'val';

  2791.   if (audioStream) {

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

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

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

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

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

  2797.     else audioClass = 'val good';

  2798.   }

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

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

  2801. 

  2802.   const bufferedDurationSeconds = Number(audioStream?.bufferedDurationSeconds);

  2803.   updateText('health-buffer-duration', fmtDurationSeconds(bufferedDurationSeconds));

  2804. 

  2805.   const highWatermarkRaw = audioStream?.highWatermark;

  2806.   const highWatermarkFrames = Number.isFinite(Number(highWatermarkRaw)) ? Number(highWatermarkRaw) : null;

  2807.   const highWatermarkDurationRaw = audioStream?.highWatermarkDurationSeconds;

  2808.   const highWatermarkDuration = Number.isFinite(Number(highWatermarkDurationRaw)) ? Number(highWatermarkDurationRaw) : null;

  2809.   let highWatermarkLabel = '--';

  2810.   if (highWatermarkDuration !== null) {

  2811.     highWatermarkLabel = fmtDurationSeconds(highWatermarkDuration);

  2812.     if (highWatermarkFrames !== null) {

  2813.       highWatermarkLabel += ` (${highWatermarkFrames} frames)`;

  2814.     }

  2815.   } else if (highWatermarkFrames !== null) {

  2816.     highWatermarkLabel = `${highWatermarkFrames} frames`;

  2817.   }

  2818.   updateText('health-buffer-highwater', highWatermarkLabel);

  2819. 

  2820.   const queueFill = Number(engine.queue?.fillLevel);

  2821.   const queueHealthRaw = String(engine.queue?.health || '').toLowerCase();

  2822.   const queueHealthLabel = queueHealthRaw ? queueHealthRaw[0].toUpperCase() + queueHealthRaw.slice(1) : '';

  2823.   let queueFillLabel = '--';

  2824.   if (Number.isFinite(queueFill)) {

  2825.     queueFillLabel = fmtPercent(queueFill);

  2826.     if (queueHealthLabel) queueFillLabel += ` · ${queueHealthLabel}`;

  2827.   } else if (queueHealthLabel) {

  2828.     queueFillLabel = queueHealthLabel;

  2829.   }

  2830.   updateText('health-queue-fill', queueFillLabel);

  2831.   const queueFillEl = $('health-queue-fill');

  2832.   if (queueFillEl) {

  2833.     let queueFillClass = 'good';

  2834.     if (queueHealthRaw === 'critical') queueFillClass = 'err';

  2835.     else if (queueHealthRaw === 'low') queueFillClass = 'warn';

  2836.     queueFillEl.className = 'val ' + queueFillClass;

  2837.   }

  2838. 

  2839.   const streakEl = $('health-underrun-streak');

  2840.   if (streakEl) {

  2841.     const streakRaw = driver?.underrunStreak;

  2842.     const streakMaxRaw = driver?.maxUnderrunStreak;

  2843.     const streakCurrent = Number.isFinite(Number(streakRaw)) ? Number(streakRaw) : null;

  2844.     const streakMax = Number.isFinite(Number(streakMaxRaw)) ? Number(streakMaxRaw) : null;

  2845.     let streakLabel = '--';

  2846.     if (streakCurrent != null) {

  2847.       streakLabel = String(streakCurrent);

  2848.       if (streakMax != null) {

  2849.         streakLabel += ` (max ${streakMax})`;

  2850.       }

  2851.     } else if (streakMax != null) {

  2852.       streakLabel = `Max ${streakMax}`;

  2853.     }

  2854.     let streakSeverity = '';

  2855.     if (streakCurrent != null || streakMax != null) {

  2856.       const highestStreak = Math.max(

  2857.         streakCurrent != null ? streakCurrent : 0,

  2858.         streakMax != null ? streakMax : 0

  2859.       );

  2860.       if (highestStreak >= 6) streakSeverity = ' err';

  2861.       else if (highestStreak > 0) streakSeverity = ' warn';

  2862.       else streakSeverity = ' good';

  2863.     }

  2864.     streakEl.textContent = streakLabel;

  2865.     streakEl.className = 'val' + streakSeverity;

  2866.   }

  2867. 

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

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

  2870. 

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

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

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

  2874. 

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

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

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

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

  2879.   if (faultCountEl) {

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

  2881.   }

  2882. 

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

  2884.   const lastFault = engine.lastFault;

  2885.   if (lastFaultEl) {

  2886.     if (lastFault) {

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

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

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

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

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

  2892.       let whenLabel = '';

  2893.       if (lastFault.time) {

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

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

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

  2897.         }

  2898.       }

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

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

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

  2902.     } else {

  2903.       lastFaultEl.className = 'val good';

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

  2905.     }

  2906.   }

  2907. }

  2908. 

  2909. 

  2910. 

  2911. function updateControlAudit(audit) {

  2912.   const entries = [

  2913.     { key: 'methodNotAllowed', id: 'audit-methodNotAllowed' },

  2914.     { key: 'unsupportedMediaType', id: 'audit-unsupportedMediaType' },

  2915.     { key: 'bodyTooLarge', id: 'audit-bodyTooLarge' },

  2916.     { key: 'unexpectedBody', id: 'audit-unexpectedBody' },

  2917.   ];

  2918.   let total = 0;

  2919.   let hasData = false;

  2920.   entries.forEach(({ key, id }) => {

  2921.     const raw = audit && typeof audit[key] !== 'undefined' ? Number(audit[key]) : NaN;

  2922.     const value = Number.isFinite(raw) ? raw : null;

  2923.     if (value != null) {

  2924.       hasData = true;

  2925.       total += value;

  2926.     }

  2927.     setAuditValue(id, value);

  2928.   });

  2929.   setAuditValue('audit-total', hasData ? total : null);

  2930. }

  2931. 

  2932. function setAuditValue(id, count) {

  2933.   const el = $(id);

  2934.   if (!el) return;

  2935.   if (count == null) {

  2936.     el.textContent = '--';

  2937.     el.className = 'val';

  2938.     return;

  2939.   }

  2940.   el.textContent = String(count);

  2941.   el.className = 'val ' + (count > 0 ? 'warn' : 'good');

  2942. }

  2943. 

  2944. function updateFaultHistory(engine) {

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

  2946.   if (!container) return;

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

  2948.   if (!history.length) {

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

  2950.     return;

  2951.   }

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

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

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

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

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

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

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

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

  2960.   });

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

  2962. }

  2963. 

  2964. function updateResetHint(engine) {

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

  2966.   if (!hint) return;

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

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

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

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

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

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

  2973.   }

  2974.   const durationSeconds = Number(engine?.runtimeStateDurationSeconds);

  2975.   const durationLabel = Number.isFinite(durationSeconds) && durationSeconds > 0 ? fmtTime(durationSeconds) : null;

  2976.   const ageHint = durationLabel ? ` State age ${durationLabel}.` : '';

  2977.   hint.textContent = text + ageHint;

  2978. }

  2979. 

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

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

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

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

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

  2985.   } else {

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

  2987.   }

  2988. 

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

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

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

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

  2993. 

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

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

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

  2997.   const activeText = txState === 'running' ? 'Live' : state.txBusy ? 'Working' : 'Idle';

  2998.   setMeter('meter-tx-fill', 'meter-tx-text', activeRatio, activeText, activeMode);

  2999. }

  3000. 

  3001. function toast(msg, type = 'info') {

  3002.   const t = $('toast');

  3003.   t.textContent = msg;

  3004.   t.className = 'toast ' + type + ' show';

  3005.   clearTimeout(t._timer);

  3006.   t._timer = setTimeout(() => t.classList.remove('show'), 2600);

  3007. }

  3008. 

  3009. function log(message, type = '') {

  3010.   const logEl = $('log');

  3011.   const empty = logEl.querySelector('.empty-log');

  3012.   if (empty) empty.remove();

  3013.   const row = document.createElement('div');

  3014.   row.className = 'entry ' + type;

  3015.   row.textContent = `${new Date().toLocaleTimeString()}  ${message}`;

  3016.   logEl.appendChild(row);

  3017.   while (logEl.children.length > 250) logEl.removeChild(logEl.firstChild);

  3018.   logEl.scrollTop = logEl.scrollHeight;

  3019. }

  3020. 

  3021. function bindTabs() {

  3022.   const buttons = Array.from(document.querySelectorAll('.tab-btn[data-tab]'));

  3023.   const panels = Array.from(document.querySelectorAll('.tab-panel[data-tab-panel]'));

  3024.   const activate = (tab) => {

  3025.     buttons.forEach((btn) => btn.classList.toggle('active', btn.dataset.tab === tab));

  3026.     panels.forEach((panel) => panel.classList.toggle('active', panel.dataset.tabPanel === tab));

  3027.   };

  3028.   buttons.forEach((btn) => btn.addEventListener('click', () => activate(btn.dataset.tab)));

  3029. }

  3030. 

  3031. function bindPanels() {

  3032.   document.querySelectorAll('[data-panel]').forEach((head) => {

  3033.     head.addEventListener('click', () => {

  3034.       head.classList.toggle('collapsed');

  3035.       head.nextElementSibling.classList.toggle('collapsed');

  3036.     });

  3037.   });

  3038. }

  3039. 

  3040. function bindInputs() {

  3041.   $('freq-slider').addEventListener('input', (e) => {

  3042.     const value = Number(e.target.value);

  3043.     setDirty('frequencyMHz', value);

  3044.   });

  3045.   $('freq-num').addEventListener('input', (e) => {

  3046.     const value = Number(e.target.value);

  3047.     if (!Number.isNaN(value)) setDirty('frequencyMHz', value);

  3048.     else {

  3049.       state.errors.frequencyMHz = 'Enter a valid number.';

  3050.       render();

  3051.     }

  3052.   });

  3053. 

  3054.   $('rds-ps').addEventListener('input', (e) => setDirty('ps', e.target.value.toUpperCase().slice(0, 8)));

  3055.   $('rds-rt').addEventListener('input', (e) => setDirty('radioText', e.target.value.slice(0, 64)));

  3056. 

  3057.   $('freq-apply').addEventListener('click', () => applySection('freq'));

  3058.   $('rds-apply').addEventListener('click', () => applySection('rds'));

  3059.   $('freq-reset').addEventListener('click', () => resetSection('freq'));

  3060.   $('rds-reset').addEventListener('click', () => resetSection('rds'));

  3061.   $('ingest-save-reload').addEventListener('click', () => saveIngestConfig());

  3062.   $('ingest-reset').addEventListener('click', () => resetIngestDraft());

  3063. 

  3064.   document.querySelectorAll('[data-ingest-path]').forEach((el) => {

  3065.     const path = el.dataset.ingestPath;

  3066.     const tag = (el.tagName || '').toLowerCase();

  3067.     const type = String(el.getAttribute('type') || '').toLowerCase();

  3068.     const isCheckbox = type === 'checkbox';

  3069.     const isNumber = type === 'number';

  3070.     const evt = isCheckbox ? 'change' : 'input';

  3071.     el.addEventListener(evt, () => {

  3072.       if (isCheckbox) {

  3073.         setIngestField(path, !!el.checked);

  3074.         return;

  3075.       }

  3076.       if (isNumber) {

  3077.         const n = Number(el.value);

  3078.         setIngestField(path, Number.isFinite(n) ? Math.trunc(n) : 0);

  3079.         return;

  3080.       }

  3081.       if (tag === 'select') {

  3082.         setIngestField(path, String(el.value || ''));

  3083.         return;

  3084.       }

  3085.       setIngestField(path, String(el.value || ''));

  3086.     });

  3087.   });

  3088. 

  3089.   $('btn-start').addEventListener('click', () => txAction('start'));

  3090.   $('btn-stop').addEventListener('click', () => txAction('stop'));

  3091.   $('danger-stop').addEventListener('click', () => txAction('stop'));

  3092.   $('btn-refresh').addEventListener('click', manualRefresh);

  3093.   $('danger-refresh').addEventListener('click', manualRefresh);

  3094.   $('danger-reset-fault').addEventListener('click', () => resetFaultAction());

  3095. 

  3096.   document.querySelectorAll('.toggle[data-toggle]').forEach((toggle) => {

  3097.     const key = toggle.dataset.toggle;

  3098.     const handler = () => setToggle(key, !serverValue(key));

  3099.     toggle.addEventListener('click', handler);

  3100.     toggle.addEventListener('keydown', (e) => {

  3101.       if (e.key === 'Enter' || e.key === ' ') {

  3102.         e.preventDefault();

  3103.         handler();

  3104.       }

  3105.     });

  3106.   });

  3107. 

  3108.   document.querySelectorAll('[data-freq-preset]').forEach((btn) => {

  3109.     btn.addEventListener('click', () => {

  3110.       const value = Number(btn.dataset.freqPreset);

  3111.       setDirty('frequencyMHz', value);

  3112.       toast(`Frequency preset ${value.toFixed(1)} MHz loaded`, 'info');

  3113.     });

  3114.   });

  3115. 

  3116.   document.querySelectorAll('[data-rds-ps]').forEach((btn) => {

  3117.     btn.addEventListener('click', () => {

  3118.       setDirty('ps', btn.dataset.rdsPs || '');

  3119.       setDirty('radioText', btn.dataset.rdsRt || '');

  3120.       toast('RDS preset loaded', 'info');

  3121.     });

  3122.   });

  3123. 

  3124.   $('btn-clear-log').addEventListener('click', () => {

  3125.     $('log').innerHTML = '<div class="empty-log">No events yet.</div>';

  3126.     toast('Log cleared', 'info');

  3127.   });

  3128. }

  3129. 

  3130. async function manualRefresh() {

  3131.   beginRequest();

  3132.   try {

  3133.     await Promise.allSettled([

  3134.       loadConfig({ silent: true }),

  3135.       loadRuntime({ silent: true }),

  3136.     ]);

  3137.     toast('Refreshed', 'info');

  3138.     log('Manual refresh completed', 'info');

  3139.   } finally {

  3140.     endRequest();

  3141.   }

  3142. }

  3143. 

  3144. function startPollers() {

  3145.   if (state.pollersStarted) return;

  3146.   state.pollersStarted = true;

  3147.   setInterval(() => { loadRuntime({ silent: true }); }, runtimePollMs);

  3148.   setInterval(() => { loadConfig({ silent: true }); }, configPollMs);

  3149. }

  3150. 

  3151. function bindResponsiveBehavior() {

  3152.   const listener = () => {

  3153.     if (!mobileMq.matches) {

  3154.       state.mobilePanelsApplied = false;

  3155.       return;

  3156.     }

  3157.     applyMobilePanelDefaults();

  3158.   };

  3159.   if (mobileMq.addEventListener) mobileMq.addEventListener('change', listener);

  3160.   else mobileMq.addListener(listener);

  3161. }

  3162. 

  3163. function isTypingContext(target) {

  3164.   if (!target) return false;

  3165.   const tag = (target.tagName || '').toLowerCase();

  3166.   return tag === 'input' || tag === 'textarea' || target.isContentEditable;

  3167. }

  3168. 

  3169. function bindKeyboardShortcuts() {

  3170.   window.addEventListener('keydown', (e) => {

  3171.     if (isTypingContext(e.target)) {

  3172.       if (e.key !== 'Enter') return;

  3173.       if (state.dirty.has('frequencyMHz')) {

  3174.         e.preventDefault();

  3175.         applySection('freq');

  3176.       } else if (isDirtySection('rds')) {

  3177.         e.preventDefault();

  3178.         applySection('rds');

  3179.       }

  3180.       return;

  3181.     }

  3182. 

  3183.     if (e.key === 't' && !e.shiftKey) {

  3184.       e.preventDefault();

  3185.       txAction('start');

  3186.       return;

  3187.     }

  3188.     if ((e.key === 'T') || (e.key === 't' && e.shiftKey)) {

  3189.       e.preventDefault();

  3190.       txAction('stop');

  3191.       return;

  3192.     }

  3193.     if (e.key.toLowerCase() === 'r') {

  3194.       e.preventDefault();

  3195.       manualRefresh();

  3196.       return;

  3197.     }

  3198.     if (e.key === '[') {

  3199.       e.preventDefault();

  3200.       cycleFreqPreset(-1);

  3201.       return;

  3202.     }

  3203.     if (e.key === ']') {

  3204.       e.preventDefault();

  3205.       cycleFreqPreset(1);

  3206.       return;

  3207.     }

  3208.     if (e.key === 'Enter') {

  3209.       e.preventDefault();

  3210.       if (state.dirty.has('frequencyMHz')) applySection('freq');

  3211.       else if (isDirtySection('rds')) applySection('rds');

  3212.     }

  3213.   });

  3214. }

  3215. 

  3216. async function init() {

  3217.   bindTabs();

  3218.   bindPanels();

  3219.   bindInputs();

  3220.   bindResponsiveBehavior();

  3221.   bindKeyboardShortcuts();

  3222.   render();

  3223.   log('fm-rds-tx control UI booting', 'info');

  3224. 

  3225.   await Promise.allSettled([

  3226.     loadConfig({ silent: false }),

  3227.     loadRuntime({ silent: true }),

  3228.   ]);

  3229. 

  3230.   render();

  3231.   startPollers();

  3232.   log('Polling active: runtime 1s, config 8s', 'ok');

  3233.   log('Keyboard shortcuts armed', 'info');

  3234. }

  3235. 

  3236. init();

  3237. </script>

  3238. </body>

  3239. </html>