Alfred
/
sdr-wideband-suite
1
0
Форк 0
Код Проблеми 0 Запити на злиття 0 Релізи 0 Вікі Активність
Wideband autonomous SDR analysis engine forked from sdr-visual-suite
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
370 Коміти
1 Гілка
10MB
Гілка: master
Гілки Теги
${ item.name }
Створити гілку ${ searchTerm }
з 'master'
${ noResults }
sdr-wideband-suite/web/index.html

499 рядки
30KB
Неформатований Постійне посилання Звинувачення Історія 

  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>Spectre UI</title>

  7.   <link rel="preconnect" href="https://fonts.googleapis.com" />

  8.   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

  9.   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />

  10.   <link rel="stylesheet" href="style.css" />

  11. </head>

  12. <body>

  13.   <div class="shell">

  14. 

  15.     <!-- ═══════════ TOPBAR ═══════════ -->

  16.     <header class="topbar">

  17.       <div class="brand">

  18.         <svg class="brand-mark" width="28" height="28" viewBox="0 0 28 28">

  19.           <circle cx="14" cy="14" r="11" fill="none" stroke="url(#bgrad)" stroke-width="2.2"/>

  20.           <path d="M8 14 Q10.5 6, 14 14 Q17.5 22, 20 14" stroke="url(#bgrad)" stroke-width="1.8" fill="none"/>

  21.           <defs><linearGradient id="bgrad" x1="0" y1="0" x2="28" y2="28"><stop offset="0%" stop-color="#00ffc8"/><stop offset="100%" stop-color="#0090ff"/></linearGradient></defs>

  22.         </svg>

  23.         <div class="brand-text">

  24.           <div class="brand-kicker">SDR Ops Console</div>

  25.           <div class="brand-title">Spectre<span class="brand-thin">UI</span></div>

  26.         </div>

  27.       </div>

  28. 

  29.       <div class="topbar-center"></div>

  30. 

  31.       <div class="topbar-right">

  32.         <div class="ws-badge" id="wsBadge">Connecting</div>

  33.         <div class="top-meta" id="metaLine">Waiting for signal frames…</div>

  34.         <button class="shortcut-btn" id="shortcutToggle" type="button" title="Keyboard shortcuts">

  35.           <svg width="14" height="14" viewBox="0 0 14 14"><rect x="1" y="4" width="12" height="8" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M4 7h1M6.5 7h1M9 7h1M3.5 9.5h7" stroke="currentColor" stroke-width="0.8" stroke-linecap="round"/></svg>

  36.         </button>

  37.       </div>

  38.     </header>

  39. 

  40.     <!-- ═══════════ MAIN LAYOUT ═══════════ -->

  41.     <main class="layout">

  42. 

  43.       <!-- ──── STAGE (left) ──── -->

  44.       <section class="stage panel">

  45.         <div class="stage-head">

  46.           <div>

  47.             <div class="panel-title">RF Panorama</div>

  48.             <div class="panel-sub" id="heroSubtitle">Live spectrum, waterfall and signal overlays</div>

  49.           </div>

  50.           <div class="stage-actions">

  51.             <button class="act-btn" id="followBtn" type="button">Follow</button>

  52.             <button class="act-btn" id="fitBtn" type="button">Fit</button>

  53.             <button class="act-btn" id="resetMaxBtn" type="button">Reset Max</button>

  54.             <label class="pill-toggle pill-toggle--compact"><input id="debugOverlayToggle" type="checkbox" checked /><span class="pt"><span class="pk"></span></span><span class="pl">CFAR/Debug</span></label>

  55.           </div>

  56.         </div>

  57. 

  58.         <!-- Hero Metrics -->

  59.         <div class="hero-metrics" id="heroMetrics">

  60.           <div class="metric"><span class="metric-lbl">Center</span><span class="metric-val" id="metricCenter">-</span></div>

  61.           <div class="metric"><span class="metric-lbl">Span</span><span class="metric-val" id="metricSpan">-</span></div>

  62.           <div class="metric"><span class="metric-lbl">Res</span><span class="metric-val" id="metricRes">-</span></div>

  63.           <div class="metric"><span class="metric-lbl">Signals</span><span class="metric-val metric-val--accent" id="metricSignals">0</span></div>

  64.           <div class="metric"><span class="metric-lbl">GPU</span><span class="metric-val" id="metricGpu">-</span></div>

  65.           <div class="metric"><span class="metric-lbl">Source</span><span class="metric-val" id="metricSource">-</span></div>

  66.         </div>

  67. 

  68.         <!-- Band Navigator -->

  69.         <div class="nav-strip">

  70.           <span class="nav-label">Band navigator</span>

  71.           <canvas id="navCanvas"></canvas>

  72.         </div>

  73. 

  74.         <!-- Spectrum + Waterfall Stack -->

  75.         <div class="viz-stack">

  76.           <div class="viz-card">

  77.             <div class="viz-head">

  78.               <span class="viz-label">Spectrum</span>

  79.               <span class="viz-hint" id="spectrumMeta">Wheel = zoom · Drag = pan · Double-click = reset</span>

  80.               <span class="viz-legend" id="cfarLegend">

  81.                 <span class="legend-swatch"></span>

  82.                 Adaptive CFAR threshold

  83.               </span>

  84.             </div>

  85.             <canvas id="spectrum"></canvas>

  86.             <div class="signal-popover" id="signalPopover" aria-hidden="true"></div>

  87.           </div>

  88.           <div class="viz-card">

  89.             <div class="viz-head"><span class="viz-label">Waterfall</span><span class="viz-hint" id="waterfallMeta">Newest row at top</span></div>

  90.             <canvas id="waterfall"></canvas>

  91.           </div>

  92.         </div>

  93.       </section>

  94. 

  95.       <!-- ──── OPERATOR RAIL (right) ──── -->

  96.       <aside class="rail panel">

  97.         <div class="rail-head">

  98.           <div>

  99.             <div class="panel-title">Operator Rail</div>

  100.             <div class="panel-sub" id="configStatus">Loading config…</div>

  101.           </div>

  102.         </div>

  103. 

  104.         <div class="rail-tabs" role="tablist" aria-label="Control tabs">

  105.           <button class="rail-tab active" data-tab="radio" type="button">Radio</button>

  106.           <button class="rail-tab" data-tab="detect" type="button">Detect</button>

  107.           <button class="rail-tab" data-tab="record" type="button">Record</button>

  108.           <button class="rail-tab" data-tab="refine" type="button">Refine</button>

  109.           <button class="rail-tab" data-tab="policy" type="button">Policy</button>

  110.           <button class="rail-tab" data-tab="signals" type="button">Signals</button>

  111.           <button class="rail-tab" data-tab="events" type="button">Events</button>

  112.           <button class="rail-tab" data-tab="health" type="button">Health</button>

  113.           <button class="rail-tab" data-tab="recordings" type="button">Recordings</button>

  114.         </div>

  115. 

  116.         <div class="rail-body">

  117. 

  118.           <!-- ── Radio Tab ── -->

  119.           <section class="tab-panel active" data-panel="radio">

  120.             <div class="form-group">

  121.               <div class="grp-title">Tuning</div>

  122.               <label class="field"><span>Center (MHz)</span><input id="centerInput" type="number" step="0.001" min="0" /></label>

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

  124.                 <button class="preset-btn" data-center="7.1" type="button"><b>40m</b><small>7.1</small></button>

  125.                 <button class="preset-btn" data-center="14.1" type="button"><b>20m</b><small>14.1</small></button>

  126.                 <button class="preset-btn" data-center="18.1" type="button"><b>17m</b><small>18.1</small></button>

  127.                 <button class="preset-btn" data-center="145.5" type="button"><b>2m</b><small>145.5</small></button>

  128.               </div>

  129.               <label class="field"><span>Span (MHz)</span><input id="spanInput" type="number" step="0.05" min="0.01" /></label>

  130.               <div class="field-pair">

  131.                 <label class="field"><span>Sample Rate</span>

  132.                   <select id="sampleRateSelect">

  133.                     <option value="0.5">0.5 MHz</option><option value="1.0">1.0 MHz</option>

  134.                     <option value="1.536">1.536 MHz</option><option value="2.048">2.048 MHz</option>

  135.                     <option value="2.5">2.5 MHz</option><option value="3.072">3.072 MHz</option>

  136.                     <option value="4.096">4.096 MHz</option>

  137.                   </select>

  138.                 </label>

  139.                 <label class="field"><span>Tuner BW</span>

  140.                   <select id="bwSelect">

  141.                     <option value="200">200 kHz</option><option value="300">300 kHz</option>

  142.                     <option value="600">600 kHz</option><option value="1536">1536 kHz</option>

  143.                     <option value="5000">5 MHz</option><option value="6000">6 MHz</option>

  144.                     <option value="7000">7 MHz</option><option value="8000">8 MHz</option>

  145.                   </select>

  146.                 </label>

  147.               </div>

  148.             </div>

  149. 

  150.             <div class="form-group">

  151.               <div class="grp-title">DSP & Display</div>

  152.               <label class="field"><span>FFT Size</span>

  153.                 <select id="fftSelect">

  154.                   <option value="512">512</option><option value="1024">1024</option>

  155.                   <option value="2048">2048</option><option value="4096">4096</option>

  156.                   <option value="8192">8192</option><option value="16384">16384</option>

  157.                   <option value="32768">32768</option>

  158.                   <option value="65536">65536</option>

  159.                 </select>

  160.               </label>

  161.               <div class="slider-field">

  162.                 <span>Gain</span>

  163.                 <div class="slider-row"><input id="gainRange" type="range" min="0" max="60" step="1" /><input id="gainInput" type="number" min="0" max="60" step="1" class="slider-num" /><em>dB</em></div>

  164.               </div>

  165.               <label class="field"><span>Averaging</span>

  166.                 <select id="avgSelect">

  167.                   <option value="0">Off</option><option value="0.4">Fast</option>

  168.                   <option value="0.2">Medium</option>

  169.                   <option value="0.1">Slow</option>

  170.                 </select>

  171.               </label>

  172.               <div class="toggle-grid">

  173.                 <label class="pill-toggle"><input id="agcToggle" type="checkbox" /><span class="pt"><span class="pk"></span></span><span class="pl">AGC</span></label>

  174.                 <label class="pill-toggle"><input id="dcToggle" type="checkbox" /><span class="pt"><span class="pk"></span></span><span class="pl">DC Block</span></label>

  175.                 <label class="pill-toggle"><input id="iqToggle" type="checkbox" /><span class="pt"><span class="pk"></span></span><span class="pl">IQ Bal</span></label>

  176.                 <label class="pill-toggle"><input id="maxHoldToggle" type="checkbox" /><span class="pt"><span class="pk"></span></span><span class="pl">Max Hold</span></label>

  177.                 <label class="pill-toggle"><input id="gpuToggle" type="checkbox" /><span class="pt"><span class="pk"></span></span><span class="pl">GPU FFT</span></label>

  178.               </div>

  179.             </div>

  180. 

  181. 

  182.           </section>

  183. 

  184.           <!-- ── Detect Tab ── -->

  185.           <section class="tab-panel" data-panel="detect">

  186.             <div class="config-grid">

  187.             <div class="form-group">

  188.               <div class="grp-title">Classifier</div>

  189.               <div class="form-hint">Signal classification behavior and switching thresholds.</div>

  190.               <label class="field"><span>Classifier</span>

  191.                 <select id="classifierModeSelect">

  192.                   <option value="rule">Rule-Based</option>

  193.                   <option value="math">Mathematical</option>

  194.                   <option value="combined">Combined</option>

  195.                 </select>

  196.               </label>

  197.             </div>

  198. 

  199.             <div class="form-group">

  200.               <div class="grp-title">Detector</div>

  201.               <div class="form-hint">Thresholding, CFAR, and temporal stability for live carrier detection.</div>

  202.               <div class="slider-field">

  203.                 <span>Threshold</span>

  204.                 <div class="slider-row"><input id="thresholdRange" type="range" min="-120" max="0" step="1" class="range--warn" /><input id="thresholdInput" type="number" min="-120" max="0" step="1" class="slider-num" /><em>dB</em></div>

  205.               </div>

  206.               <label class="field"><span>CFAR Guard (Hz)</span><input id="cfarGuardHzInput" type="number" step="100" min="0" /></label>

  207.               <label class="field"><span>CFAR Train (Hz)</span><input id="cfarTrainHzInput" type="number" step="500" min="100" /></label>

  208.               <label class="field"><span>CFAR Rank</span><input id="cfarRankInput" type="number" step="1" min="1" /></label>

  209.               <label class="field"><span>CFAR Scale (dB)</span><input id="cfarScaleInput" type="number" step="0.5" min="0" /></label>

  210.               <label class="field"><span>Min Duration (ms)</span><input id="minDurationInput" type="number" step="50" min="50" /></label>

  211.               <label class="field"><span>Hold (ms)</span><input id="holdInput" type="number" step="50" min="50" /></label>

  212.               <label class="field"><span>EMA Alpha</span><input id="emaAlphaInput" type="number" step="0.05" min="0" max="1" /></label>

  213.               <label class="field"><span>Hysteresis (dB)</span><input id="hysteresisInput" type="number" step="1" min="0" /></label>

  214.               <label class="field"><span>Min Stable Frames</span><input id="stableFramesInput" type="number" step="1" min="1" /></label>

  215.               <label class="field"><span>Gap Tolerance (ms)</span><input id="gapToleranceInput" type="number" step="50" min="0" /></label>

  216.               <label class="field"><span>Edge Margin (dB)</span><input id="edgeMarginInput" type="number" step="0.5" min="0" /></label>

  217.               <label class="field"><span>Merge Gap (Hz)</span><input id="mergeGapInput" type="number" step="500" min="0" /></label>

  218.               <label class="field"><span>Class History</span><input id="classHistoryInput" type="number" step="1" min="1" max="30" /></label>

  219.               <label class="field"><span>Class Switch Ratio</span><input id="classSwitchInput" type="number" step="0.05" min="0.1" max="1.0" /></label>

  220.               <label class="field"><span>CFAR Mode</span>

  221.                 <select id="cfarModeSelect">

  222.                   <option value="OFF">Off</option>

  223.                   <option value="CA">CA (Cell-Averaging)</option>

  224.                   <option value="OS">OS (Ordered-Statistic)</option>

  225.                   <option value="GOSCA">GOSCA (Greatest-Of)</option>

  226.                   <option value="CASO">CASO (Smallest-Of)</option>

  227.                 </select>

  228.               </label>

  229.               <div class="toggle-grid">

  230.                 <label class="pill-toggle"><input id="cfarWrapToggle" type="checkbox" checked /><span class="pt"><span class="pk"></span></span><span class="pl">Wrap-Around</span></label>

  231.               </div>

  232.             </div>

  233.             </div>

  234.           </section>

  235. 

  236.           <!-- ── Record Tab ── -->

  237.           <section class="tab-panel" data-panel="record">

  238.             <div class="config-grid">

  239.             <div class="form-group">

  240.               <div class="grp-title">Recorder</div>

  241.               <div class="form-hint">Recording enablement, media types, decoding, and retention limits.</div>

  242.               <div class="toggle-grid">

  243.                 <label class="pill-toggle"><input id="recEnableToggle" type="checkbox" /><span class="pt"><span class="pk"></span></span><span class="pl">Enabled</span></label>

  244.                 <label class="pill-toggle"><input id="recIQToggle" type="checkbox" /><span class="pt"><span class="pk"></span></span><span class="pl">Record IQ</span></label>

  245.                 <label class="pill-toggle"><input id="recAudioToggle" type="checkbox" /><span class="pt"><span class="pk"></span></span><span class="pl">Record Audio</span></label>

  246.                 <label class="pill-toggle"><input id="recDemodToggle" type="checkbox" /><span class="pt"><span class="pk"></span></span><span class="pl">Auto Demod</span></label>

  247.                 <label class="pill-toggle"><input id="recDecodeToggle" type="checkbox" /><span class="pt"><span class="pk"></span></span><span class="pl">Auto Decode</span></label>

  248.               </div>

  249.               <label class="field"><span>Min SNR (dB)</span><input id="recMinSNR" type="number" step="1" min="0" /></label>

  250.               <label class="field"><span>Max Disk (MB)</span><input id="recMaxDisk" type="number" step="256" min="0" /></label>

  251.               <label class="field"><span>Class Filter (CSV)</span><input id="recClassFilter" type="text" placeholder="e.g. NFM,USB" /></label>

  252.             </div>

  253.             </div>

  254.           </section>

  255. 

  256.           <!-- ── Refine Tab ── -->

  257.           <section class="tab-panel" data-panel="refine">

  258.             <div class="config-grid">

  259.             <div class="form-group">

  260.               <div class="grp-title">Resources</div>

  261.               <div class="form-hint">Concurrency and job-budget controls for refinement, recording, and decode.</div>

  262.               <div class="field-pair">

  263.                 <label class="field"><span>Max Refinement</span><input id="resMaxRefine" type="number" step="1" min="0" /></label>

  264.                 <label class="field"><span>Max Record</span><input id="resMaxRecord" type="number" step="1" min="0" /></label>

  265.                 <label class="field"><span>Max Decode</span><input id="resMaxDecode" type="number" step="1" min="0" /></label>

  266.                 <label class="field"><span>Decision Hold (ms)</span><input id="resDecisionHold" type="number" step="250" min="0" /></label>

  267.               </div>

  268.               <div class="panel-sub">Budgets applied to refinement selection, recording, and decode decisions.</div>

  269.             </div>

  270. 

  271.             <div class="form-group">

  272.               <div class="grp-title">Refinement Windows</div>

  273.               <div class="form-hint">Window sizing for refinement passes when candidate bandwidth is known or inferred.</div>

  274.               <label class="field"><span>Auto Span</span>

  275.                 <select id="refineAutoSpan" class="ctrl-select">

  276.                   <option value="true">Auto</option>

  277.                   <option value="false">Manual</option>

  278.                 </select>

  279.               </label>

  280.               <div class="field-pair">

  281.                 <label class="field"><span>Min Span (Hz)</span><input id="refineMinSpan" type="number" step="500" min="0" /></label>

  282.                 <label class="field"><span>Max Span (Hz)</span><input id="refineMaxSpan" type="number" step="500" min="0" /></label>

  283.               </div>

  284.               <div class="panel-sub">Auto span uses modulation hints when candidate BW is missing. Min/Max clamp the final window.</div>

  285.             </div>

  286.             </div>

  287.           </section>

  288. 

  289.           <!-- ── Policy Tab ── -->

  290.           <section class="tab-panel" data-panel="policy">

  291.             <div class="form-group">

  292.               <div class="grp-title">Pipeline Policy</div>

  293.               <div class="ops-list" id="policySummaryList"><div class="ops-line ops-line--muted">Loading policy…</div></div>

  294.             </div>

  295.             <div class="form-group">

  296.               <div class="grp-title">Recommendations</div>

  297.               <div class="ops-list" id="policyRecommendationList"><div class="ops-line ops-line--muted">Loading recommendations…</div></div>

  298.             </div>

  299.           </section>

  300. 

  301.           <!-- ── Signals Tab ── -->

  302.           <section class="tab-panel" data-panel="signals">

  303.             <div class="list-head"><span class="grp-title">Detected carriers</span><span class="count-pill" id="signalCountBadge">0 live</span></div>

  304.             <div class="signal-list" id="signalList"><div class="empty-state">No live signals yet.</div></div>

  305.             <div class="panel-sub" id="signalSummaryLine">Visible: 0 · Strongest: - · Selected: -</div>

  306.             <div class="panel-sub" id="signalDecisionSummary">Decision: -</div>

  307.             <div class="panel-sub" id="signalQueueSummary">Queue: -</div>

  308.             <div class="field-pair">

  309.               <label class="field"><span>Listen sec</span><input id="listenSeconds" type="number" min="1" max="10" step="1" value="2" /></label>

  310.               <label class="field"><span>Listen mode</span>

  311.                 <select id="listenMode" class="ctrl-select">

  312.                   <option value="">Auto</option>

  313.                   <option value="AM">AM</option>

  314.                   <option value="NFM">NFM</option>

  315.                   <option value="WFM">WFM</option>

  316.                   <option value="WFM_STEREO">WFM_STEREO</option>

  317.                   <option value="USB">USB</option>

  318.                   <option value="LSB">LSB</option>

  319.                   <option value="CW">CW</option>

  320.                 </select>

  321.               </label>

  322.             </div>

  323.             <button class="act-btn" id="liveListenBtn" type="button">Live Listen</button>

  324.             <div class="listen-meta" id="listenMeta">

  325.               <div class="listen-meta__head">

  326.                 <div class="listen-meta__title">Listen session</div>

  327.                 <div class="listen-meta__badge" id="listenMetaStatus">Idle</div>

  328.               </div>

  329.               <div class="listen-meta__primary">

  330.                 <span class="listen-meta__mode" id="listenMetaPlayback">-</span>

  331.                 <span class="listen-meta__stereo" id="listenMetaStereo">-</span>

  332.               </div>

  333.               <div class="listen-meta__secondary">

  334.                 <span id="listenMetaDemod">Demod -</span>

  335.                 <span id="listenMetaAudio">Audio -</span>

  336.               </div>

  337.             </div>

  338.           </section>

  339. 

  340.           <!-- ── Events Tab ── -->

  341.           <section class="tab-panel" data-panel="events">

  342.             <div class="list-head"><span class="grp-title">Recent events</span><span class="count-pill" id="eventCountBadge">0 stored</span></div>

  343.             <div class="event-list" id="eventList"><div class="empty-state">No events yet.</div></div>

  344.           </section>

  345. 

  346.           <!-- ── Health Tab ── -->

  347.           <section class="tab-panel" data-panel="health">

  348.             <div class="health-grid">

  349.               <div class="health-card"><span class="health-lbl">Buffer</span><span class="health-val" id="healthBuffer">-</span></div>

  350.               <div class="health-card"><span class="health-lbl">Dropped</span><span class="health-val" id="healthDropped">-</span></div>

  351.               <div class="health-card"><span class="health-lbl">Resets</span><span class="health-val" id="healthResets">-</span></div>

  352.               <div class="health-card"><span class="health-lbl">Age</span><span class="health-val" id="healthAge">-</span></div>

  353.               <div class="health-card"><span class="health-lbl">Refine plan</span><span class="health-val" id="healthRefinePlan">-</span></div>

  354.               <div class="health-card"><span class="health-lbl">Refine windows</span><span class="health-val" id="healthRefineWindows">-</span></div>

  355.               <div class="health-card health-card--wide"><span class="health-lbl">GPU status</span><span class="health-val" id="healthGpu">-</span></div>

  356.               <div class="health-card health-card--wide"><span class="health-lbl">Render rate</span><span class="health-val" id="healthFps">-</span></div>

  357.             </div>

  358.             <div class="health-status-card">

  359.               <div class="health-lbl">Operator Status</div>

  360.               <div class="status-grid">

  361.                 <div class="status-row"><span class="status-key">WS</span><span class="status-val" id="healthWs">-</span></div>

  362.                 <div class="status-row"><span class="status-key">API</span><span class="status-val" id="healthApi">-</span></div>

  363.                 <div class="status-row"><span class="status-key">Config</span><span class="status-val" id="healthConfig">-</span></div>

  364.                 <div class="status-row"><span class="status-key">Source</span><span class="status-val" id="healthSource">-</span></div>

  365.                 <div class="status-row"><span class="status-key">Refinement</span><span class="status-val" id="healthRefine">-</span></div>

  366.                 <div class="status-row"><span class="status-key">Telemetry</span><span class="status-val" id="healthTelemetry">-</span></div>

  367.               </div>

  368.             </div>

  369.             <div class="health-status-card">

  370.               <div class="health-lbl">Refinement Snapshot</div>

  371.               <div class="ops-list" id="refineDetails"><div class="ops-line ops-line--muted">Loading refinement snapshot...</div></div>

  372.             </div>

  373.             <div class="health-status-card">

  374.               <div class="health-lbl">Telemetry Recent Events</div>

  375.               <div class="ops-list" id="telemetryEventList"><div class="ops-line ops-line--muted">Loading telemetry events...</div></div>

  376.             </div>

  377.           </section>

  378. 

  379.           <section class="tab-panel" data-panel="recordings">

  380.             <div class="list-head"><span class="grp-title">Recordings</span><span class="count-pill" id="recordingCountBadge">0</span></div>

  381.             <div class="event-list" id="recordingList"><div class="empty-state">No recordings yet.</div></div>

  382.           </section>

  383.         </div>

  384.       </aside>

  385. 

  386.       <!-- ──── TIMELINE (bottom) ──── -->

  387.       <section class="tl-panel panel">

  388.         <div class="tl-head">

  389.           <div>

  390.             <div class="panel-title">Activity Timeline</div>

  391.             <div class="panel-sub" id="timelineRange">Waiting for events…</div>

  392.           </div>

  393.           <div class="tl-actions">

  394.             <button class="act-btn" id="timelineFollowBtn" type="button">Follow</button>

  395.             <button class="act-btn" id="timelineFreezeBtn" type="button">Freeze</button>

  396.           </div>

  397.         </div>

  398.         <div class="tl-stack">

  399.           <div class="viz-card viz-card--compact">

  400.             <div class="viz-head"><span class="viz-label">Occupancy strip</span><span class="viz-hint">Band activity density</span></div>

  401.             <canvas id="occupancy"></canvas>

  402.           </div>

  403.           <div class="viz-card">

  404.             <div class="viz-head"><span class="viz-label">Event blocks</span><span class="viz-hint">Click block → inspector</span></div>

  405.             <canvas id="timeline"></canvas>

  406.           </div>

  407.         </div>

  408.       </section>

  409.     </main>

  410. 

  411.     <!-- ═══════════ INSPECTOR DRAWER ═══════════ -->

  412.     <aside class="inspector" id="eventDrawer" aria-hidden="true">

  413.       <div class="insp-head">

  414.         <div>

  415.           <div class="panel-title">Signal Inspector</div>

  416.           <div class="panel-sub" id="detailSubtitle">No event selected</div>

  417.         </div>

  418.         <div class="insp-actions">

  419.           <button class="act-btn" id="jumpToEventBtn" type="button">Go to freq</button>

  420.           <select id="decodeMode" class="ctrl-select">

  421.             <option value="FT8">FT8</option>

  422.             <option value="WSPR">WSPR</option>

  423.             <option value="DMR">DMR</option>

  424.             <option value="D-STAR">D-STAR</option>

  425.             <option value="FSK">FSK</option>

  426.             <option value="PSK">PSK</option>

  427.           </select>

  428.           <button class="act-btn" id="exportEventBtn" type="button">Export</button>

  429.           <button class="act-btn" id="liveListenEventBtn" type="button">Listen</button>

  430.           <button class="act-btn" id="decodeEventBtn" type="button">Decode</button>

  431.           <button class="act-btn act-btn--danger" id="drawerClose" type="button">Close</button>

  432.         </div>

  433.       </div>

  434.       <div class="insp-body">

  435.         <div class="detail-grid">

  436.           <div class="detail-item"><span class="detail-label">Center</span><span id="detailCenter">-</span></div>

  437.           <div class="detail-item"><span class="detail-label">Bandwidth</span><span id="detailBw">-</span></div>

  438.           <div class="detail-item"><span class="detail-label">Start</span><span id="detailStart">-</span></div>

  439.           <div class="detail-item"><span class="detail-label">End</span><span id="detailEnd">-</span></div>

  440.           <div class="detail-item"><span class="detail-label">SNR</span><span id="detailSnr">-</span></div>

  441.           <div class="detail-item"><span class="detail-label">Duration</span><span id="detailDur">-</span></div>

  442.           <div class="detail-item"><span class="detail-label">Class</span><span id="detailClass">-</span></div>

  443.         </div>

  444.         <div class="viz-card insp-viz">

  445.           <div class="viz-head"><span class="viz-label">Local spectrum slice</span><span class="viz-hint">Around selected event</span></div>

  446.           <canvas id="detailSpectrogram"></canvas>

  447.         </div>

  448.         <div class="insp-note">Ready for: IQ snippets, clip playback, bookmarks, annotations.</div>

  449.         <div class="insp-note" id="recordingMeta">Recording: -</div>

  450.         <div class="insp-note" id="decodeResult">Decode: -</div>

  451.         <div class="insp-note" id="classifierScores">Classifier scores: -</div>

  452.         <div class="score-bars" id="classifierScoreBars"></div>

  453.         <div class="insp-note">

  454.           <a id="recordingMetaLink" href="#" target="_blank">meta.json</a> ·

  455.           <a id="recordingIQLink" href="#" target="_blank">IQ</a> ·

  456.           <a id="recordingAudioLink" href="#" target="_blank">Audio</a>

  457.         </div>

  458.       </div>

  459.     </aside>

  460. 

  461.     <!-- ═══════════ KEYBOARD OVERLAY ═══════════ -->

  462.     <div class="kb-overlay" id="kbOverlay">

  463.       <div class="kb-card">

  464.         <div class="kb-title">Keyboard Shortcuts</div>

  465.         <div class="kb-grid">

  466.           <kbd>Space</kbd><span>Follow live</span>

  467.           <kbd>F</kbd><span>Fit view</span>

  468.           <kbd>M</kbd><span>Toggle max hold</span>

  469.           <kbd>G</kbd><span>Toggle GPU FFT</span>

  470.           <kbd>[ ]</kbd><span>Zoom in/out</span>

  471.           <kbd>← →</kbd><span>Pan left/right</span>

  472.           <kbd>?</kbd><span>This overlay</span>

  473.         </div>

  474.         <button class="act-btn kb-close" id="kbClose" type="button">Close</button>

  475.       </div>

  476.     </div>

  477. 

  478.   </div>

  479.   <script src="api-client.js"></script>

  480.   <script src="operator-panel.js"></script>

  481.   <script src="app.js"></script>

  482.   <script>

  483.     // Keyboard overlay toggle (new feature)

  484.     const kbOverlay = document.getElementById('kbOverlay');

  485.     const kbClose = document.getElementById('kbClose');

  486.     const kbToggle = document.getElementById('shortcutToggle');

  487.     function toggleKb() { kbOverlay.classList.toggle('open'); }

  488.     kbToggle.addEventListener('click', toggleKb);

  489.     kbClose.addEventListener('click', toggleKb);

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

  491.       if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;

  492.       if (e.key === '?') { e.preventDefault(); toggleKb(); }

  493.       if (e.key === 'Escape' && kbOverlay.classList.contains('open')) toggleKb();

  494.     });

  495.   </script>

  496. </body>

  497. </html>