/* global React, ReactDOM, Recharts */ const { useState, useEffect, useMemo, useRef, useCallback } = React; const Y = window.YagodaStore; // ---------- Toast system ---------- let _toastId = 0; const ToastCtx = React.createContext({ push: () => {} }); function ToastProvider({ children }) { const [items, setItems] = useState([]); const push = useCallback((title, msg, kind='info') => { const id = ++_toastId; setItems(prev => [...prev, { id, title, msg, kind }]); setTimeout(() => setItems(prev => prev.filter(t => t.id !== id)), 4200); }, []); return ( {children}
{items.map(t => (
{t.title}
{t.msg}
))}
); } const useToast = () => React.useContext(ToastCtx); // ---------- Icons (thin-line, serious) ---------- const Icon = ({ d, size=14 }) => ( {d} ); const I = { overview: }/>, runs: }/>, cal: }/>, bench: }/>, snap: }/>, alert: }/>, set: }/>, download: }/>, upload: }/>, reset: }/>, search: }/>, close: }/>, star: }/>, }; // ---------- Status chip ---------- function Chip({ kind, children }) { return {kind && }{children || kind}; } // ---------- JSON viewer with light syntax coloring ---------- function JsonView({ data, max=520 }) { const txt = useMemo(() => JSON.stringify(data, null, 2), [data]); const html = useMemo(() => { return txt .replace(/&/g,'&').replace(//g,'>') .replace(/("(?:\\.|[^"\\])*")(\s*:)/g, '$1$2') .replace(/:\s*("(?:\\.|[^"\\])*")/g, ': $1') .replace(/:\s*(-?\d+(?:\.\d+)?)/g, ': $1') .replace(/:\s*(true|false|null)/g, ': $1'); }, [txt]); return 
;
}

// ---------- Topbar ----------
function TopBar({ store, lastSync }) {
  const [now, setNow] = useState(new Date());
  useEffect(() => { const i = setInterval(()=>setNow(new Date()), 1000); return ()=>clearInterval(i); }, []);
  const lastRun = store?.runs?.[store.runs.length - 1];
  const unresCrit = (store?.alerts || []).filter(a => !a.resolved && a.severity === 'critical').length;
  const health = unresCrit > 0 ? 'critical' : (store?.alerts || []).some(a => !a.resolved) ? 'warning' : 'nominal';
  return (
    

      

        
StackMulti-workflow

        

        
Adapter modeSample Data

        

        
Data● Local

        

        {lastRun && <>
Last run{lastRun.run_id}
}
        

          Health
          
            {health==='critical'?`${unresCrit} critical`:health==='warning'?'alerts active':'Nominal'}
          
        

        

        
Last sync{new Date(lastSync).toLocaleTimeString([],{hour12:false})}

      

      

      
{now.toISOString().slice(11,19)} UTC

    

  );
}

// ---------- Sidebar ----------
function Sidebar({ page, setPage, alertCount, lastRun }) {
  const items = [
    { id:'overview',    label:'Overview',    icon:I.overview },
    { id:'runs',        label:'Runs',        icon:I.runs },
    { id:'calibration', label:'Calibration', icon:I.cal },
    { id:'benchmarks',  label:'Benchmarks',  icon:I.bench },
    { id:'snapshots',   label:'Snapshots',   icon:I.snap },
    { id:'alerts',      label:'Alerts',      icon:I.alert, badge: alertCount },
    { id:'settings',    label:'Settings',    icon:I.set },
  ];
  return (
    
  );
}

// ---------- Drift / Benchmark charts ----------
const { LineChart, Line, AreaChart, Area, XAxis, YAxis, Tooltip, ReferenceArea, ReferenceLine, ResponsiveContainer, CartesianGrid, BarChart, Bar, Cell } = Recharts;

function DriftChart({ runs, height=280 }) {
  const data = runs.map(r => ({ name: r.run_id.replace('QL-RUN-',''), full: r.run_id, deviation: r.deviation, fidelity: r.benchmark_current, state: r.drift_state }));
  return (
    
      
        
          
            
            
          
        
        
        
        
        p[0]?.payload?.full||v} formatter={(val, key, obj) => key==='deviation' ? [`${val}% · ${obj.payload.state}`,'deviation'] : [val, key]}/>
        
        
        
        
        
      
    
  );
}

function BenchmarkChart({ runs, height=240 }) {
  const data = runs.map(r => ({ name: r.run_id.replace('QL-RUN-',''), full: r.run_id, fidelity: r.benchmark_current, prev: r.benchmark_previous, delta: r.benchmark_delta }));
  return (
    
      
        
        
        
        p[0]?.payload?.full||v}/>
        
        
      
    
  );
}

function BenchmarkDeltaBars({ runs, height=200 }) {
  const data = runs.map(r => ({ name: r.run_id.replace('QL-RUN-',''), full: r.run_id, delta: r.benchmark_delta, status: r.benchmark_status }));
  return (
    
      
        
        
        
        p[0]?.payload?.full||v}/>
        
        
          {data.map((d, i) => )}
        
      
    
  );
}

window.YComps = { ToastProvider, useToast, Chip, JsonView, TopBar, Sidebar, DriftChart, BenchmarkChart, BenchmarkDeltaBars, I, Icon };