@adcops/autocore-react 3.3.45 → 3.3.48

package/dist/components/LogPanel.css

@@ -0,0 +1,191 @@
+/* LogPanel Styles */
+
+.log-panel {
+    display: flex;
+    flex-direction: column;
+    height: 250px;
+    min-height: 150px;
+    max-height: 400px;
+    background-color: var(--surface-0, #0d0d0d);
+    border-top: 1px solid var(--surface-200, #333);
+}
+
+.log-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    background-color: var(--surface-50, #1a1a1a);
+    border-bottom: 1px solid var(--surface-200, #333);
+    font-size: 0.85rem;
+}
+
+.log-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 600;
+    color: #ccc;
+}
+
+.log-status {
+    font-weight: normal;
+    font-size: 0.75rem;
+    color: #888;
+}
+
+.log-controls {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.log-control-label {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    color: #888;
+    font-size: 0.8rem;
+}
+
+.log-control-label input[type="checkbox"] {
+    margin: 0;
+}
+
+.log-level-select {
+    padding: 0.2rem 0.4rem;
+    background-color: #2a2a2a;
+    border: 1px solid #444;
+    color: #ddd;
+    font-size: 0.8rem;
+    border-radius: 2px;
+    cursor: pointer;
+}
+
+.log-level-select:focus {
+    outline: none;
+    border-color: var(--primary-color, #6a9fb5);
+}
+
+.log-clear-btn {
+    padding: 0.2rem 0.5rem;
+    font-size: 0.75rem;
+    background-color: transparent;
+    color: #666;
+    border: 1px solid #444;
+    border-radius: 2px;
+    cursor: pointer;
+}
+
+.log-clear-btn:hover {
+    background-color: #333;
+    color: #aaa;
+}
+
+.log-entries {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.25rem 0.5rem;
+    font-family: 'Consolas', 'Monaco', monospace;
+    font-size: 0.8rem;
+    line-height: 1.4;
+}
+
+.log-empty {
+    color: #555;
+    padding: 1rem;
+    text-align: center;
+    font-style: italic;
+}
+
+.log-entry {
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.15rem 0;
+    white-space: nowrap;
+}
+
+.log-entry:hover {
+    background-color: rgba(255, 255, 255, 0.03);
+}
+
+.log-time {
+    color: #666;
+    flex-shrink: 0;
+}
+
+.log-level {
+    flex-shrink: 0;
+    font-weight: 600;
+    min-width: 45px;
+}
+
+.log-source {
+    color: #6a9fb5;
+    flex-shrink: 0;
+}
+
+.log-message {
+    color: #ccc;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+/* Level-specific colors */
+.log-error {
+    color: #f44336;
+}
+
+.log-error .log-message {
+    color: #ff6b6b;
+}
+
+.log-warn {
+    color: #ff9800;
+}
+
+.log-warn .log-message {
+    color: #ffb74d;
+}
+
+.log-info {
+    color: #4caf50;
+}
+
+.log-info .log-message {
+    color: #ccc;
+}
+
+.log-debug {
+    color: #9e9e9e;
+}
+
+.log-debug .log-message {
+    color: #999;
+}
+
+.log-trace {
+    color: #666;
+}
+
+.log-trace .log-message {
+    color: #777;
+}
+
+/* Scrollbar styling */
+.log-entries::-webkit-scrollbar {
+    width: 8px;
+}
+
+.log-entries::-webkit-scrollbar-track {
+    background: #1a1a1a;
+}
+
+.log-entries::-webkit-scrollbar-thumb {
+    background: #444;
+    border-radius: 4px;
+}
+
+.log-entries::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}

package/dist/components/LogPanel.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './LogPanel.css';
+export declare const LogPanel: React.FC;
+export default LogPanel;
+//# sourceMappingURL=LogPanel.d.ts.map

package/dist/components/LogPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogPanel.d.ts","sourceRoot":"","sources":["../../src/components/LogPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAEpF,OAAO,gBAAgB,CAAC;AA+CxB,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EA4J5B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/LogPanel.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React,{useState,useEffect,useContext,useRef,useCallback}from"react";import{EventEmitterContext}from"../core/EventEmitterContext";import"./LogPanel.css";const LOG_LEVELS=["TRACE","DEBUG","INFO","WARN","ERROR"],MAX_LOGS=500,FLUSH_INTERVAL_MS=100,levelValue=e=>{const t=LOG_LEVELS.indexOf(e.toUpperCase());return t>=0?t:2},formatTime=e=>{const t=new Date(e);return`${t.getHours().toString().padStart(2,"0")}:${t.getMinutes().toString().padStart(2,"0")}:${t.getSeconds().toString().padStart(2,"0")}.${t.getMilliseconds().toString().padStart(3,"0")}`},getLevelClass=e=>{switch(e.toUpperCase()){case"ERROR":return"log-error";case"WARN":return"log-warn";case"INFO":default:return"log-info";case"DEBUG":return"log-debug";case"TRACE":return"log-trace"}};export const LogPanel=()=>{const{subscribe:e,unsubscribe:t,serverSubscribe:s,read:l,isConnected:r}=useContext(EventEmitterContext),[a,c]=useState([]),[n,o]=useState("INFO"),[i,u]=useState(!0),[g,d]=useState(!1),m=useRef(null),h=useRef([]),p=useRef(async()=>{});p.current=useCallback(async()=>{try{await s("log.stream","log.stream");const e=await l("log.get_buffer",{level:"TRACE"});e?.success&&Array.isArray(e.data)&&c(e.data.slice(-500)),d(!0)}catch(e){}},[s,l]),useEffect(()=>{r()&&p.current();const s=e("HUB/connected",()=>{p.current()});return()=>t(s)},[r,e,t]),useEffect(()=>{let s=!1;const l=e("log.stream",e=>{h.current.push(e),s||(s=!0,d(!0))}),r=window.setInterval(()=>{if(0===h.current.length)return;const e=h.current;h.current=[],c(t=>t.length+e.length>500?t.concat(e).slice(-500):t.concat(e))},100);return()=>{t(l),window.clearInterval(r),h.current=[]}},[e,t]),useEffect(()=>{i&&m.current&&(m.current.scrollTop=m.current.scrollHeight)},[a,i]);const x=a.filter(e=>levelValue(e.level)>=levelValue(n));return _jsxs("div",{className:"log-panel",children:[_jsxs("div",{className:"log-header",children:[_jsxs("div",{className:"log-title",children:[_jsx("span",{children:"Logs"}),!g&&_jsx("span",{className:"log-status",children:"(connecting...)"})]}),_jsxs("div",{className:"log-controls",children:[_jsxs("label",{className:"log-control-label",children:["Level:",_jsx("select",{value:n,onChange:e=>o(e.target.value),className:"log-level-select",children:LOG_LEVELS.map(e=>_jsx("option",{value:e,children:e},e))})]}),_jsxs("label",{className:"log-control-label",children:[_jsx("input",{type:"checkbox",checked:i,onChange:e=>u(e.target.checked)}),"Auto-scroll"]}),_jsx("button",{className:"log-clear-btn",onClick:async()=>{h.current=[],c([]);try{await l("log.clear")}catch(e){}},children:"Clear"})]})]}),_jsx("div",{className:"log-entries",ref:m,onScroll:()=>{if(m.current){const{scrollTop:e,scrollHeight:t,clientHeight:s}=m.current;u(t-e-s<50)}},children:0===x.length?_jsx("div",{className:"log-empty",children:"No log entries. Waiting for control program logs..."}):x.map((e,t)=>_jsxs("div",{className:`log-entry ${getLevelClass(e.level)}`,children:[_jsx("span",{className:"log-time",children:formatTime(e.timestamp_ms)}),_jsx("span",{className:`log-level ${getLevelClass(e.level)}`,children:e.level.padEnd(5)}),_jsxs("span",{className:"log-source",children:["[",e.source,"]"]}),_jsx("span",{className:"log-message",children:e.message})]},`${e.timestamp_ms}-${t}`))})]})};export default LogPanel;

package/dist/components/ResultHistoryTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResultHistoryTable.d.ts","sourceRoot":"","sources":["../../src/components/ResultHistoryTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAO/D,MAAM,WAAW,uBAAuB;IACpC,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAiDhE,CAAC"}
+{"version":3,"file":"ResultHistoryTable.d.ts","sourceRoot":"","sources":["../../src/components/ResultHistoryTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAO/D,MAAM,WAAW,uBAAuB;IACpC,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;CACxB;AAqDD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAkGhE,CAAC"}

package/dist/components/ResultHistoryTable.js

@@ -1 +1 @@
-import{jsxs as _jsxs,jsx as _jsx}from"react/jsx-runtime";import React,{useState,useEffect,useContext}from"react";import{DataTable}from"primereact/datatable";import{Column}from"primereact/column";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext";import{MessageType}from"../hub/CommandMessage";export const ResultHistoryTable=({projectId:e,definitionId:t})=>{const[s,r]=useState([]),[i,o]=useState(!1),{invoke:n}=useContext(EventEmitterContext),a=async()=>{o(!0);try{const s=await n("results.list_tests",MessageType.Request,{project_id:e,definition_id:t});s.success&&s.data&&s.data.tests&&r(s.data.tests)}catch(e){}o(!1)};useEffect(()=>{a()},[e,t]);return _jsxs("div",{children:[_jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"1rem"},children:[_jsxs("h3",{children:["Test History: ",t]}),_jsx(Button,{icon:"pi pi-refresh",label:"Refresh",onClick:a,disabled:i})]}),_jsxs(DataTable,{value:s,loading:i,paginator:!0,rows:10,emptyMessage:"No tests found.",children:[_jsx(Column,{field:"run_id",header:"Run ID",sortable:!0}),_jsx(Column,{field:"start_time",header:"Date/Time",body:e=>{return(t=e.start_time)?new Date(t).toLocaleString():"";var t},sortable:!0}),_jsx(Column,{header:"Config / Results",body:e=>_jsxs("div",{style:{fontSize:"0.85em",color:"var(--text-secondary-color)"},children:[_jsxs("div",{children:[_jsx("strong",{children:"Config:"})," ",JSON.stringify(e.config)]}),_jsxs("div",{children:[_jsx("strong",{children:"Results:"})," ",JSON.stringify(e.results)]})]})})]})]})};
+import{jsxs as _jsxs,jsx as _jsx}from"react/jsx-runtime";import React,{useState,useEffect,useContext}from"react";import{DataTable}from"primereact/datatable";import{Column}from"primereact/column";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext";import{MessageType}from"../hub/CommandMessage";const rawBlobToCsv=e=>{if(!e||"object"!=typeof e)return"";const t=Object.entries(e).filter(([,e])=>Array.isArray(e));if(0===t.length)return"";t.sort(([e],[t])=>"t"===e?-1:"t"===t?1:0);const s=t.map(([e])=>e),r=t.reduce((e,[,t])=>Math.min(e,t.length),1/0),o=e=>{if(null==e)return"";const t=String(e);return/[",\n\r]/.test(t)?`"${t.replace(/"/g,'""')}"`:t},n=[s.join(",")];for(let e=0;e<r;e++)n.push(t.map(([,t])=>o(t[e])).join(","));return n.join("\n")},downloadCsv=(e,t)=>{const s=new Blob([t],{type:"text/csv;charset=utf-8;"}),r=URL.createObjectURL(s),o=document.createElement("a");o.href=r,o.download=e,document.body.appendChild(o),o.click(),o.remove(),URL.revokeObjectURL(r)};export const ResultHistoryTable=({projectId:e,definitionId:t})=>{const[s,r]=useState([]),[o,n]=useState(!1),[a,i]=useState(null),{invoke:l}=useContext(EventEmitterContext),c=async()=>{n(!0);try{const s=await l("results.list_tests",MessageType.Request,{project_id:e,definition_id:t});s.success&&s.data&&s.data.tests&&r(s.data.tests)}catch(e){}n(!1)};useEffect(()=>{c()},[e,t]);return _jsxs("div",{children:[_jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"1rem"},children:[_jsxs("h3",{children:["Test History: ",t]}),_jsx(Button,{icon:"pi pi-refresh",label:"Refresh",onClick:c,disabled:o})]}),_jsxs(DataTable,{value:s,loading:o,paginator:!0,rows:10,emptyMessage:"No tests found.",children:[_jsx(Column,{field:"run_id",header:"Run ID",sortable:!0}),_jsx(Column,{field:"start_time",header:"Date/Time",body:e=>{return(t=e.start_time)?new Date(t).toLocaleString():"";var t},sortable:!0}),_jsx(Column,{header:"Config / Results",body:e=>_jsxs("div",{style:{fontSize:"0.85em",color:"var(--text-secondary-color)"},children:[_jsxs("div",{children:[_jsx("strong",{children:"Config:"})," ",JSON.stringify(e.config)]}),_jsxs("div",{children:[_jsx("strong",{children:"Results:"})," ",JSON.stringify(e.results)]})]})}),_jsx(Column,{header:"Raw Data",style:{width:"8rem"},body:s=>_jsx(Button,{icon:a===s.run_id?"pi pi-spin pi-spinner":"pi pi-download",label:"CSV",size:"small",outlined:!0,disabled:null!==a,onClick:()=>(async s=>{const r=s?.run_id;if(r){i(r);try{const s=await l("results.read_raw",MessageType.Request,{project_id:e,definition_id:t,run_id:r,name:"trace"});if(!s?.success||!s.data)return void alert(`No raw trace available for ${r}${s?.error_message?`: ${s.error_message}`:""}`);const o=rawBlobToCsv(s.data);if(!o)return void alert(`Raw trace for ${r} is empty or has no array columns.`);downloadCsv(`${e}_${t}_${r}.csv`,o)}catch(e){alert(`Download failed: ${e instanceof Error?e.message:String(e)}`)}finally{i(null)}}})(s),tooltip:"Download raw_data/trace.json as CSV",tooltipOptions:{position:"left"}})})]})]})};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adcops/autocore-react",
-    "version": "3.3.45",
+    "version": "3.3.48",
     "description": "A React component library for industrial user interfaces.",
     "private": false,
     "type": "module",

package/src/components/LogPanel.css

@@ -0,0 +1,191 @@
+/* LogPanel Styles */
+
+.log-panel {
+    display: flex;
+    flex-direction: column;
+    height: 250px;
+    min-height: 150px;
+    max-height: 400px;
+    background-color: var(--surface-0, #0d0d0d);
+    border-top: 1px solid var(--surface-200, #333);
+}
+
+.log-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    background-color: var(--surface-50, #1a1a1a);
+    border-bottom: 1px solid var(--surface-200, #333);
+    font-size: 0.85rem;
+}
+
+.log-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 600;
+    color: #ccc;
+}
+
+.log-status {
+    font-weight: normal;
+    font-size: 0.75rem;
+    color: #888;
+}
+
+.log-controls {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.log-control-label {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    color: #888;
+    font-size: 0.8rem;
+}
+
+.log-control-label input[type="checkbox"] {
+    margin: 0;
+}
+
+.log-level-select {
+    padding: 0.2rem 0.4rem;
+    background-color: #2a2a2a;
+    border: 1px solid #444;
+    color: #ddd;
+    font-size: 0.8rem;
+    border-radius: 2px;
+    cursor: pointer;
+}
+
+.log-level-select:focus {
+    outline: none;
+    border-color: var(--primary-color, #6a9fb5);
+}
+
+.log-clear-btn {
+    padding: 0.2rem 0.5rem;
+    font-size: 0.75rem;
+    background-color: transparent;
+    color: #666;
+    border: 1px solid #444;
+    border-radius: 2px;
+    cursor: pointer;
+}
+
+.log-clear-btn:hover {
+    background-color: #333;
+    color: #aaa;
+}
+
+.log-entries {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.25rem 0.5rem;
+    font-family: 'Consolas', 'Monaco', monospace;
+    font-size: 0.8rem;
+    line-height: 1.4;
+}
+
+.log-empty {
+    color: #555;
+    padding: 1rem;
+    text-align: center;
+    font-style: italic;
+}
+
+.log-entry {
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.15rem 0;
+    white-space: nowrap;
+}
+
+.log-entry:hover {
+    background-color: rgba(255, 255, 255, 0.03);
+}
+
+.log-time {
+    color: #666;
+    flex-shrink: 0;
+}
+
+.log-level {
+    flex-shrink: 0;
+    font-weight: 600;
+    min-width: 45px;
+}
+
+.log-source {
+    color: #6a9fb5;
+    flex-shrink: 0;
+}
+
+.log-message {
+    color: #ccc;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+/* Level-specific colors */
+.log-error {
+    color: #f44336;
+}
+
+.log-error .log-message {
+    color: #ff6b6b;
+}
+
+.log-warn {
+    color: #ff9800;
+}
+
+.log-warn .log-message {
+    color: #ffb74d;
+}
+
+.log-info {
+    color: #4caf50;
+}
+
+.log-info .log-message {
+    color: #ccc;
+}
+
+.log-debug {
+    color: #9e9e9e;
+}
+
+.log-debug .log-message {
+    color: #999;
+}
+
+.log-trace {
+    color: #666;
+}
+
+.log-trace .log-message {
+    color: #777;
+}
+
+/* Scrollbar styling */
+.log-entries::-webkit-scrollbar {
+    width: 8px;
+}
+
+.log-entries::-webkit-scrollbar-track {
+    background: #1a1a1a;
+}
+
+.log-entries::-webkit-scrollbar-thumb {
+    background: #444;
+    border-radius: 4px;
+}
+
+.log-entries::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}

package/src/components/LogPanel.tsx

@@ -0,0 +1,208 @@
+import React, { useState, useEffect, useContext, useRef, useCallback } from 'react';
+import { EventEmitterContext } from '../core/EventEmitterContext';
+import './LogPanel.css';
+
+interface LogEntry {
+    timestamp_ms: number;
+    level: string;
+    source: string;
+    target: string;
+    message: string;
+}
+
+const LOG_LEVELS = ['TRACE', 'DEBUG', 'INFO', 'WARN', 'ERROR'];
+
+// Cap on the in-memory ring buffer. Beyond this, the oldest entries drop.
+// 500 keeps React's list small enough to reconcile without jank in Firefox
+// (Chrome tolerates much more, but we'd rather not tune per-browser).
+const MAX_LOGS = 500;
+
+// Max cadence at which we push buffered entries into React state. At high log
+// rates this turns N setState/sec into ~10 setState/sec — the difference
+// between "Firefox stops responding" and "scrolls smoothly."
+const FLUSH_INTERVAL_MS = 100;
+
+const levelValue = (level: string): number => {
+    const idx = LOG_LEVELS.indexOf(level.toUpperCase());
+    return idx >= 0 ? idx : 2; // Default to INFO
+};
+
+const formatTime = (timestampMs: number): string => {
+    const date = new Date(timestampMs);
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    const seconds = date.getSeconds().toString().padStart(2, '0');
+    const ms = date.getMilliseconds().toString().padStart(3, '0');
+    return `${hours}:${minutes}:${seconds}.${ms}`;
+};
+
+const getLevelClass = (level: string): string => {
+    switch (level.toUpperCase()) {
+        case 'ERROR': return 'log-error';
+        case 'WARN': return 'log-warn';
+        case 'INFO': return 'log-info';
+        case 'DEBUG': return 'log-debug';
+        case 'TRACE': return 'log-trace';
+        default: return 'log-info';
+    }
+};
+
+export const LogPanel: React.FC = () => {
+    const { subscribe, unsubscribe, serverSubscribe, read, isConnected } = useContext(EventEmitterContext);
+    const [logs, setLogs] = useState<LogEntry[]>([]);
+    const [levelFilter, setLevelFilter] = useState<string>('INFO');
+    const [autoScroll, setAutoScroll] = useState(true);
+    const [isSubscribed, setIsSubscribed] = useState(false);
+    const logContainerRef = useRef<HTMLDivElement>(null);
+
+    // Staging buffer for incoming entries. We do *not* call setState per entry.
+    const pendingRef = useRef<LogEntry[]>([]);
+
+    // Single init path: attempt serverSubscribe + fetch buffered logs.
+    // Called on mount, and again whenever HUB/connected fires in case the
+    // hub wasn't ready the first time.
+    const initRef = useRef<() => Promise<void>>(async () => {});
+    initRef.current = useCallback(async () => {
+        try {
+            await serverSubscribe('log.stream', 'log.stream');
+            const resp = await read('log.get_buffer', { level: 'TRACE' });
+            if (resp?.success && Array.isArray(resp.data)) {
+                setLogs(resp.data.slice(-MAX_LOGS));
+            }
+            setIsSubscribed(true);
+        } catch (err) {
+            console.warn('LogPanel: init deferred until hub reconnects:', err);
+        }
+    }, [serverSubscribe, read]);
+
+    useEffect(() => {
+        if (isConnected()) {
+            initRef.current();
+        }
+        // Retry once the hub comes up (covers the mount-before-connect race
+        // that left "Connecting..." stuck on even after logs started flowing).
+        const id = subscribe('HUB/connected', () => {
+            initRef.current();
+        });
+        return () => unsubscribe(id);
+    }, [isConnected, subscribe, unsubscribe]);
+
+    // Receive log entries into a ref; flush to state on an interval.
+    // Also flips `isSubscribed` on first entry received, so the header shows
+    // the real state even if serverSubscribe didn't resolve cleanly (e.g.,
+    // the server was already broadcasting to us from a prior subscription).
+    useEffect(() => {
+        let sawEntry = false;
+
+        const subId = subscribe('log.stream', (entry: LogEntry) => {
+            pendingRef.current.push(entry);
+            if (!sawEntry) {
+                sawEntry = true;
+                setIsSubscribed(true);
+            }
+        });
+
+        const flushTimer = window.setInterval(() => {
+            if (pendingRef.current.length === 0) return;
+            const batch = pendingRef.current;
+            pendingRef.current = [];
+            setLogs(prev => {
+                const merged = prev.length + batch.length > MAX_LOGS
+                    ? prev.concat(batch).slice(-MAX_LOGS)
+                    : prev.concat(batch);
+                return merged;
+            });
+        }, FLUSH_INTERVAL_MS);
+
+        return () => {
+            unsubscribe(subId);
+            window.clearInterval(flushTimer);
+            pendingRef.current = [];
+        };
+    }, [subscribe, unsubscribe]);
+
+    // Auto-scroll to bottom when new logs arrive.
+    useEffect(() => {
+        if (autoScroll && logContainerRef.current) {
+            logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
+        }
+    }, [logs, autoScroll]);
+
+    // Handle scroll to detect if user has scrolled up.
+    const handleScroll = () => {
+        if (logContainerRef.current) {
+            const { scrollTop, scrollHeight, clientHeight } = logContainerRef.current;
+            const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
+            setAutoScroll(isAtBottom);
+        }
+    };
+
+    // Clear logs locally and on server.
+    const handleClear = async () => {
+        pendingRef.current = [];
+        setLogs([]);
+        try {
+            await read('log.clear');
+        } catch (err) {
+            console.warn('Failed to clear server log buffer:', err);
+        }
+    };
+
+    const filteredLogs = logs.filter(log => levelValue(log.level) >= levelValue(levelFilter));
+
+    return (
+        <div className="log-panel">
+            <div className="log-header">
+                <div className="log-title">
+                    <span>Logs</span>
+                    {!isSubscribed && <span className="log-status">(connecting...)</span>}
+                </div>
+                <div className="log-controls">
+                    <label className="log-control-label">
+                        Level:
+                        <select
+                            value={levelFilter}
+                            onChange={(e) => setLevelFilter(e.target.value)}
+                            className="log-level-select"
+                        >
+                            {LOG_LEVELS.map(level => (
+                                <option key={level} value={level}>{level}</option>
+                            ))}
+                        </select>
+                    </label>
+                    <label className="log-control-label">
+                        <input
+                            type="checkbox"
+                            checked={autoScroll}
+                            onChange={(e) => setAutoScroll(e.target.checked)}
+                        />
+                        Auto-scroll
+                    </label>
+                    <button className="log-clear-btn" onClick={handleClear}>Clear</button>
+                </div>
+            </div>
+            <div
+                className="log-entries"
+                ref={logContainerRef}
+                onScroll={handleScroll}
+            >
+                {filteredLogs.length === 0 ? (
+                    <div className="log-empty">
+                        No log entries. Waiting for control program logs...
+                    </div>
+                ) : (
+                    filteredLogs.map((log, idx) => (
+                        <div key={`${log.timestamp_ms}-${idx}`} className={`log-entry ${getLevelClass(log.level)}`}>
+                            <span className="log-time">{formatTime(log.timestamp_ms)}</span>
+                            <span className={`log-level ${getLevelClass(log.level)}`}>{log.level.padEnd(5)}</span>
+                            <span className="log-source">[{log.source}]</span>
+                            <span className="log-message">{log.message}</span>
+                        </div>
+                    ))
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default LogPanel;

package/src/components/ResultHistoryTable.tsx

@@ -10,9 +10,61 @@ export interface ResultHistoryTableProps {
     definitionId: string;
 }
 
+/**
+ * Convert a results `raw_data` blob (`{ colA: [...], colB: [...], ... }`) into
+ * a CSV string. Keys with scalar (non-array) values are skipped; array lengths
+ * are truncated to the shortest column so the grid is rectangular.
+ *
+ * Column order: `t` first if present (it's the canonical x-axis in every
+ * current test schema), then the remaining keys in their JSON order. Each
+ * cell is quoted only when it contains a comma, quote, or newline — matching
+ * RFC 4180.
+ */
+const rawBlobToCsv = (blob: any): string => {
+    if (!blob || typeof blob !== 'object') return '';
+
+    const entries: Array<[string, any[]]> = Object.entries(blob)
+        .filter(([, v]) => Array.isArray(v)) as Array<[string, any[]]>;
+    if (entries.length === 0) return '';
+
+    entries.sort(([a], [b]) => (a === 't' ? -1 : b === 't' ? 1 : 0));
+
+    const columns = entries.map(([k]) => k);
+    const nRows   = entries.reduce((min, [, arr]) => Math.min(min, arr.length), Infinity);
+
+    const escape = (v: any): string => {
+        if (v === null || v === undefined) return '';
+        const s = String(v);
+        return /[",\n\r]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+    };
+
+    const lines: string[] = [columns.join(',')];
+    for (let i = 0; i < nRows; i++) {
+        lines.push(entries.map(([, arr]) => escape(arr[i])).join(','));
+    }
+    return lines.join('\n');
+};
+
+/**
+ * Browser download shim: turn a string into a transient blob URL, click it,
+ * and clean up. Works without any extra libraries.
+ */
+const downloadCsv = (filename: string, csv: string) => {
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+    const url  = URL.createObjectURL(blob);
+    const a    = document.createElement('a');
+    a.href     = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+};
+
 export const ResultHistoryTable: React.FC<ResultHistoryTableProps> = ({ projectId, definitionId }) => {
     const [tests, setTests] = useState<any[]>([]);
     const [loading, setLoading] = useState(false);
+    const [downloadingRunId, setDownloadingRunId] = useState<string | null>(null);
     const { invoke } = useContext(EventEmitterContext);
 
     const loadTests = async () => {
@@ -40,13 +92,45 @@ export const ResultHistoryTable: React.FC<ResultHistoryTableProps> = ({ projectI
         return new Date(dateStr).toLocaleString();
     };
 
+    const handleDownload = async (rowData: any) => {
+        const runId = rowData?.run_id;
+        if (!runId) return;
+        setDownloadingRunId(runId);
+        try {
+            const resp: any = await invoke('results.read_raw' as any, MessageType.Request, {
+                project_id:    projectId,
+                definition_id: definitionId,
+                run_id:        runId,
+                name:          'trace',
+            } as any);
+
+            if (!resp?.success || !resp.data) {
+                console.warn('results.read_raw returned no data for', runId, resp?.error_message);
+                alert(`No raw trace available for ${runId}${resp?.error_message ? `: ${resp.error_message}` : ''}`);
+                return;
+            }
+
+            const csv = rawBlobToCsv(resp.data);
+            if (!csv) {
+                alert(`Raw trace for ${runId} is empty or has no array columns.`);
+                return;
+            }
+            downloadCsv(`${projectId}_${definitionId}_${runId}.csv`, csv);
+        } catch (err) {
+            console.error('Failed to download raw trace', err);
+            alert(`Download failed: ${err instanceof Error ? err.message : String(err)}`);
+        } finally {
+            setDownloadingRunId(null);
+        }
+    };
+
     return (
         <div>
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
                 <h3>Test History: {definitionId}</h3>
                 <Button icon="pi pi-refresh" label="Refresh" onClick={loadTests} disabled={loading} />
             </div>
-            
+
             <DataTable value={tests} loading={loading} paginator rows={10} emptyMessage="No tests found.">
                 <Column field="run_id" header="Run ID" sortable />
                 <Column field="start_time" header="Date/Time" body={(rowData) => formatDate(rowData.start_time)} sortable />
@@ -56,6 +140,22 @@ export const ResultHistoryTable: React.FC<ResultHistoryTableProps> = ({ projectI
                         <div><strong>Results:</strong> {JSON.stringify(rowData.results)}</div>
                     </div>
                 )} />
+                <Column
+                    header="Raw Data"
+                    style={{ width: '8rem' }}
+                    body={(rowData) => (
+                        <Button
+                            icon={downloadingRunId === rowData.run_id ? 'pi pi-spin pi-spinner' : 'pi pi-download'}
+                            label="CSV"
+                            size="small"
+                            outlined
+                            disabled={downloadingRunId !== null}
+                            onClick={() => handleDownload(rowData)}
+                            tooltip={`Download raw_data/trace.json as CSV`}
+                            tooltipOptions={{ position: 'left' }}
+                        />
+                    )}
+                />
             </DataTable>
         </div>
     );