wenay-react2 1.0.49 → 1.0.51

package/lib/common/src/grid/agGrid4/core.js

@@ -60,7 +60,12 @@ export function createGridBuffer(deps) {
             if (seen.has(id))
                 continue;
             seen.add(id);
-            const merged = buf[id];
+            // AG Grid replaces a transaction row. Overlay streams may send a
+            // Partial<T>, so preserve static fields from the rowData-owned row.
+            const node = mode == 'overlay' ? api.getRowNode?.(id) : undefined;
+            const merged = node?.data
+                ? Object.assign({}, node.data, buf[id])
+                : buf[id];
             if (gridHas(id))
                 toUpdate.push(merged);
             else
@@ -104,7 +109,7 @@ export function createGridBuffer(deps) {
                     return;
                 const id = getId(node.data);
                 if (buf[id])
-                    update.push(buf[id]);
+                    update.push(Object.assign({}, node.data, buf[id]));
             });
             if (update.length)
                 api.applyTransaction({ update });

package/lib/common/src/hooks/useReplay.js

@@ -49,10 +49,18 @@ export function useReplaySubscribe(remote, cb, options = {}) {
     useEffect(() => {
         if (!remote || !enabled)
             return;
+        if (!remote.line || typeof remote.line.on != 'function') {
+            const error = new Error('Replay remote is missing its line surface');
+            setReady(false);
+            setError(error);
+            hooksRef.current.onError?.(error);
+            return;
+        }
         if (lastRemoteRef.current !== undefined && lastRemoteRef.current !== remote)
             seqRef.current = undefined; // a different line — old seq is meaningless
         lastRemoteRef.current = remote;
         let alive = true;
+        let failed = false;
         setReady(false);
         setError(null);
         // stale is NOT reset here: it re-syncs from common2 after the first delivery (a stale
@@ -68,8 +76,11 @@ export function useReplaySubscribe(remote, cb, options = {}) {
                 hooksRef.current.onSeq?.(seq);
             },
             onError: e => {
-                if (alive)
+                failed = true;
+                if (alive) {
                     setError(e);
+                    setReady(false);
+                }
                 hooksRef.current.onError?.(e);
             },
             ...(staleMs !== undefined ? {
@@ -83,7 +94,7 @@ export function useReplaySubscribe(remote, cb, options = {}) {
         });
         subRef.current = off;
         off.ready.then(() => {
-            if (!alive)
+            if (!alive || failed)
                 return;
             setReady(true);
             if (staleMs !== undefined)

package/lib/common/src/logs/logs.d.ts

@@ -55,7 +55,7 @@ export declare function useLogsPageTable(state?: LogsViewState): {
     getApi: () => GridReadyEvent<any, any> | null;
     fit: () => void;
     applyImportanceFilter: (min?: number) => void;
-    appendRow: (row: LogRow) => void;
+    syncRows: () => void;
     onGridReady: (a: GridReadyEvent<LogRow>) => void;
     columnDefs: ({
         field: string;
@@ -96,6 +96,9 @@ export declare function useLogsPageTable(state?: LogsViewState): {
         rowHeight: number;
         autoSizePadding: number;
         rowData: any[];
+        getRowId: (p: {
+            data: LogRow;
+        }) => string;
         columnDefs: ({
             field: string;
             sort: "desc";

package/lib/common/src/logs/logs.js

@@ -80,10 +80,10 @@ function InputSettingLogs({ settings }) {
 export function useLogsPageTable(state) {
     const setting = state?.settings ?? memoryGetOrCreate("settingLogs", settingLogs);
     const full = state?.full ?? datumConst;
-    const mini = state?.mini ?? datumMiniConst;
     const apiGrid = useRef(null);
     // mount-time snapshot: the live grid is fed by transactions, not re-renders
     const [rowData] = useState(() => [...full.map.values()].flat());
+    const shownRows = useRef(new Map(rowData.map(row => [row.num, row])));
     const getApi = useCallback(() => apiGrid.current, []);
     const fit = useCallback(() => { apiGrid.current?.api.sizeColumnsToFit(); }, []);
     const applyImportanceFilter = useCallback((min) => {
@@ -103,26 +103,33 @@ export function useLogsPageTable(state) {
             api.destroyFilter("var");
         }
     }, []);
-    const appendRow = useCallback((row) => {
-        apiGrid.current?.api.applyTransactionAsync({ add: [row] });
-    }, []);
+    const syncRows = useCallback(() => {
+        const api = apiGrid.current?.api;
+        if (!api)
+            return;
+        const next = new Map([...full.map.values()].flat().map(row => [row.num, row]));
+        const add = [...next].filter(([num]) => !shownRows.current.has(num)).map(([, row]) => row);
+        const remove = [...shownRows.current].filter(([num]) => !next.has(num)).map(([, row]) => row);
+        shownRows.current = next;
+        if (add.length || remove.length)
+            api.applyTransactionAsync({ add, remove });
+    }, [full]);
     // settings change -> single filter method (no re-render: updateBy with a callback)
     updateBy(setting, () => {
         applyImportanceFilter(setting.params.minVarLogs);
     });
-    // new mini-feed entry -> async append, copy like before (row identity per event)
-    updateBy(mini, () => {
-        const data = mini.last[0];
-        if (data)
-            appendRow({ ...data });
+    // The full state owns retention, so reconcile additions and evictions together.
+    updateBy(full, () => {
+        syncRows();
     });
     const onGridReady = useCallback((a) => {
         apiGrid.current = a;
+        syncRows();
         fit();
         // fresh grid has no filter - only apply when the setting asks for one
         if (setting.params.minVarLogs)
             applyImportanceFilter(setting.params.minVarLogs);
-    }, [applyImportanceFilter, fit, setting]);
+    }, [applyImportanceFilter, fit, setting, syncRows]);
     const columnDefs = useMemo(() => [
         {
             field: "time",
@@ -169,6 +176,7 @@ export function useLogsPageTable(state) {
         rowHeight: 26,
         autoSizePadding: 1,
         rowData,
+        getRowId: (p) => String(p.data.num),
         columnDefs,
         onCellMouseDown: (e) => {
             if (e.event instanceof MouseEvent && e.event.button == 2) {
@@ -180,7 +188,7 @@ export function useLogsPageTable(state) {
             }
         },
     }), [columnDefs, onGridReady, rowData]);
-    return { getApi, fit, applyImportanceFilter, appendRow, onGridReady, columnDefs, gridProps };
+    return { getApi, fit, applyImportanceFilter, syncRows, onGridReady, columnDefs, gridProps };
 }
 export function PageLogs({ update, state }) {
     const table = useLogsPageTable(state);

package/lib/common/testUseReact/replayVideo.d.ts

@@ -10,5 +10,10 @@ export declare const videoResolutions: readonly [{
 }];
 export declare const ReplayRouteDemo: () => import("react/jsx-runtime").JSX.Element;
 export declare const ReplayVideoDemo: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Real browser transport regression card. The server endpoint is the Vite-only
+ * `qaReplay` RPC facade; this component receives only its stable common2 remote.
+ */
+export declare const ReplayRpcReconnectDemo: () => import("react/jsx-runtime").JSX.Element;
 export declare const ReplayStoreDemo: () => import("react/jsx-runtime").JSX.Element;
 export declare const ReplayStoreEachDemo: () => import("react/jsx-runtime").JSX.Element;

package/lib/common/testUseReact/replayVideo.js

@@ -8,7 +8,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * these cards exercise the React lifecycle side.
  */
 import React, { StrictMode, useEffect, useMemo, useRef, useState } from "react";
-import { Observe, Replay } from "wenay-common2";
+import { createRpcClientHub, Observe, Replay } from "wenay-common2";
+import { io } from "socket.io-client";
 import { useReplaySubscribe, useReplayRouteSubscribe, useReplayFrame, useReplayHistory, useStoreReplayMirror, useStoreReplayEach, useStoreNode, useStoreKeys } from "../src/hooks";
 const FPS = 10;
 export const videoResolutions = [{ w: 160, h: 90 }, { w: 320, h: 180 }, { w: 640, h: 360 }];
@@ -233,6 +234,102 @@ export const ReplayVideoDemo = () => {
                                 ? _jsx(LiveClient, { remote: demo.remoteDirect, since: lastSeqA.current, onSeq: seq => { lastSeqA.current = seq; } })
                                 : _jsxs("div", { style: { ...canvasStyle, height: 180, display: "flex", alignItems: "center", justifyContent: "center", color: "#8b949e" }, children: ["unmounted \u00B7 kept seq ", lastSeqA.current ?? "-"] })] }), _jsxs("div", { children: [_jsx("div", { style: { fontSize: 13, fontWeight: 700, marginBottom: 4 }, children: "B: slow wire + conflateReplay gate" }), _jsx(LiveClient, { remote: demo.wire.remote }), _jsxs("div", { style: statLine, children: ["wire buffer ", demo.wire.buffered(), " \u00B7 conflating ", String(wireStats.conflating), _jsx("br", {}), "dropped ", wireStats.dropped, " \u00B7 coalesced ", wireStats.coalesced, " \u00B7 recoveries ", wireStats.flushes, " (keyframes ", wireStats.keyframes, ")"] })] }), _jsxs("div", { children: [_jsx("div", { style: { fontSize: 13, fontWeight: 700, marginBottom: 4 }, children: "C: time travel (archive + openHistory)" }), _jsx("canvas", { ref: ttCanvasRef, style: canvasStyle }), _jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", marginTop: 4 }, children: [_jsx("button", { onClick: () => tt.live ? tt.pause() : tt.play(), children: tt.live ? "⏸ pause" : "▶ live" }), _jsx("input", { type: "range", style: { width: 200 }, min: Math.max(0, tt.head - 550), max: Math.max(0, tt.head), value: tt.seq < 0 ? 0 : tt.seq, onChange: e => tt.seek({ seq: Number(e.target.value) }) }), _jsxs("span", { style: { fontSize: 12, fontFamily: "monospace" }, children: [tt.seq, "/", tt.head, " ", tt.live ? "live" : "paused"] })] })] }), _jsxs("div", { children: [_jsxs("div", { style: { fontSize: 13, fontWeight: 700, marginBottom: 4 }, children: ["D: freshness (staleMs=", STALE_MS, ", StrictMode)", " ", _jsx("button", { onClick: () => setGenD(v => v + 1), children: "new client (keyframe)" })] }), _jsx(StrictMode, { children: _jsx(StaleClient, { remote: demo.remoteDirect, staleMs: STALE_MS }, genD) }), _jsx("div", { style: { fontSize: 12, color: "#57606a", maxWidth: 320, marginTop: 4 }, children: "counters refresh only on fresh\u2194stale flips: a flat \"renders\" while frames grow is the no-per-event-render proof" })] }), _jsxs("div", { children: [_jsx("div", { style: { fontSize: 13, fontWeight: 700, marginBottom: 4 }, children: "E: pull at own pace (useReplayFrame)" }), _jsx(PullClient, { remote: demo.remoteDirect })] })] })] });
 };
+const RpcReplayConsumer = React.memo(function RpcReplayConsumer(p) {
+    p.metrics.current.renders++;
+    const sub = useReplaySubscribe(p.remote, value => {
+        // This is intentionally an append-only QA probe. It reports duplicates; it never
+        // suppresses them, so a green card is evidence from the real transport instead of
+        // a React-side dedupe mask.
+        p.metrics.current.values.push(value);
+        p.metrics.current.latestCallbackRevision = p.callbackRevision;
+    }, {
+        since: 0,
+        policy: "queue",
+        onSeq: () => { },
+        onError: error => { p.metrics.current.errors.push(String(error)); },
+        onStale: () => { },
+        hint: { callbackRevision: p.callbackRevision },
+    });
+    p.metrics.current.seq = sub.seq;
+    p.metrics.current.ready = sub.ready;
+    return null;
+});
+/**
+ * Real browser transport regression card. The server endpoint is the Vite-only
+ * `qaReplay` RPC facade; this component receives only its stable common2 remote.
+ */
+export const ReplayRpcReconnectDemo = () => {
+    const hub = useMemo(() => createRpcClientHub(() => io({ path: "/__qa/replay-rpc", transports: ["websocket"], reconnection: false }), rpc => ({ qaReplay: rpc("qaReplay") })), []);
+    const metrics = useRef({ values: [], errors: [], renders: 0, latestCallbackRevision: -1, seq: () => -1, ready: false });
+    const firstRemote = useRef(null);
+    const [remote, setRemote] = useState(null);
+    const [mounted, setMounted] = useState(true);
+    const [callbackRevision, setCallbackRevision] = useState(0);
+    const [connected, setConnected] = useState(false);
+    const [snapshot, setSnapshot] = useState({ produced: 0, head: -1, listeners: 0, producing: false, received: 0, missing: 0, duplicates: 0, ordered: true, renders: 0, seq: -1, ready: false, errors: 0 });
+    const refresh = async () => {
+        const api = hub.facade.qaReplay?.func;
+        let server = { produced: 0, head: -1, listeners: 0, producing: false };
+        try {
+            if (api)
+                server = await api.stats();
+        }
+        catch { /* offline: retain local transport evidence */ }
+        const values = metrics.current.values;
+        const seen = new Set(values);
+        const missing = Array.from({ length: server.produced }, (_, i) => i + 1).filter(value => !seen.has(value)).length;
+        const duplicates = values.length - seen.size;
+        setSnapshot({
+            ...server,
+            received: values.length,
+            missing,
+            duplicates,
+            ordered: values.every((value, index) => index == 0 || values[index - 1] < value),
+            renders: metrics.current.renders,
+            seq: metrics.current.seq(),
+            ready: metrics.current.ready,
+            errors: metrics.current.errors.length,
+        });
+    };
+    useEffect(() => {
+        let alive = true;
+        const offConnect = hub.connectListen(() => { if (alive) {
+            setConnected(true);
+            void refresh();
+        } });
+        const offDisconnect = hub.disconnectListen(() => { if (alive) {
+            setConnected(false);
+            void refresh();
+        } });
+        void hub.setToken(null).then(clients => {
+            if (!alive)
+                return;
+            const next = clients.qaReplay.func.events;
+            firstRemote.current ??= next;
+            setRemote(next);
+            setConnected(true);
+            void refresh();
+        }).catch(error => { metrics.current.errors.push(String(error)); void refresh(); });
+        return () => {
+            alive = false;
+            offConnect();
+            offDisconnect();
+            hub.socket?.disconnect?.();
+        };
+        // The hub is intentionally one logical transport for the life of this card.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hub]);
+    const api = hub.facade.qaReplay?.func;
+    const run = (work) => {
+        if (!work)
+            return;
+        void work().then(() => refresh()).catch(error => { metrics.current.errors.push(String(error)); void refresh(); });
+    };
+    const green = snapshot.produced > 0 && snapshot.missing == 0 && snapshot.duplicates == 0 && snapshot.ordered && snapshot.seq >= snapshot.head && snapshot.listeners == 1 && snapshot.errors == 0;
+    const statusStyle = { padding: "3px 8px", borderRadius: 5, color: "#fff", background: green ? "#2da44e" : "#cf222e", fontWeight: 700, fontSize: 12 };
+    return _jsxs("div", { style: { display: "grid", gap: 8 }, children: [_jsx("div", { style: { fontSize: 13, color: "#57606a", maxWidth: 760 }, children: "Keep this tab visible: background-tab throttling delays browser work and is not transport lag. Start the producer, wait for delivery, disconnect while it keeps running, rerender, then reconnect the same socket. No restart, key change, remount, or remote replacement is used for recovery." }), _jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap", alignItems: "center" }, children: [_jsx("button", { onClick: () => run(api ? () => api.start() : undefined), children: "start producer (20/s)" }), _jsx("button", { onClick: () => run(api ? () => api.stop() : undefined), children: "stop producer" }), _jsx("button", { onClick: () => { hub.socket?.disconnect?.(); void refresh(); }, children: "disconnect transport" }), _jsx("button", { onClick: () => { hub.socket?.connect?.(); }, children: "reconnect transport" }), _jsx("button", { onClick: () => { for (let i = 1; i <= 8; i++)
+                            window.setTimeout(() => setCallbackRevision(value => value + 1), i * 20); }, children: "parent rerender burst" }), _jsx("button", { onClick: () => run(api ? () => api.burst(5_000) : undefined), children: "burst 5,000" }), _jsx("button", { onClick: () => void refresh(), children: "refresh metrics" }), _jsx("button", { onClick: () => { setMounted(value => !value); window.setTimeout(() => void refresh(), 0); }, children: mounted ? "unmount consumer" : "mount consumer" }), _jsx("span", { style: statusStyle, children: green ? "PASS: exact replay" : "waiting / mismatch" })] }), remote && mounted && _jsx(StrictMode, { children: _jsx(RpcReplayConsumer, { remote: remote, metrics: metrics, callbackRevision: callbackRevision }) }), _jsxs("div", { style: { ...statLine, whiteSpace: "normal" }, children: ["transport ", connected ? "connected" : "disconnected", " \u00B7 stable remote ", String(remote != null && remote === firstRemote.current), " \u00B7 producer ", snapshot.producing ? "running" : "stopped", _jsx("br", {}), "produced ", snapshot.produced, " \u00B7 received ", snapshot.received, " \u00B7 seq ", snapshot.seq, "/", snapshot.head, " \u00B7 missing ", snapshot.missing, " \u00B7 duplicates ", snapshot.duplicates, " \u00B7 ordered ", String(snapshot.ordered), _jsx("br", {}), "consumer renders ", snapshot.renders, " \u00B7 latest callback revision ", metrics.current.latestCallbackRevision, "/", callbackRevision, " \u00B7 server listeners ", snapshot.listeners, " \u00B7 ready ", String(snapshot.ready), " \u00B7 errors ", snapshot.errors] }), _jsx("div", { style: { fontSize: 12, color: "#57606a" }, children: "The 5,000-event burst is lossless (`policy: queue`): use refresh after it drains. The consumer records deliveries in a ref, so delivery itself does not trigger React renders; only lifecycle/UI controls do. Unmount then refresh to confirm server listeners reaches 0." })] });
+};
 function createStoreReplayDemo() {
     let stalled = false;
     const store = Observe.createStore({ ticks: 0, price: 100, note: "start", bag: { a: 1 } });

package/lib/style/menuRight.css

@@ -43,25 +43,25 @@
   width: max-content;
 }
 
-.menu-item {
-  min-height: 30px;
-  padding: 10px;
-  position: relative;
-  cursor: pointer;
-  color: var(--menu-item-color, #fff);
-  border-bottom: var(--menu-border, 1px solid rgba(255, 255, 255, 0.41));
-  transition: background 0.3s, color 0.3s;
-}
-
-.menu-item:hover,
-.menu-item.force-hover {
-  background: var(--menu-item-hover-bg-color, #fff);
-  color: var(--menu-item-hover-color, #101010);
-}
-
-.menu-item:active {
-  background: var(--menu-item-pressed-bg-color, #f2c94c);
-  color: var(--menu-item-pressed-color, #101010);
+.menu-item {
+  min-height: 30px;
+  padding: 10px;
+  position: relative;
+  cursor: pointer;
+  color: var(--menu-item-color, #fff);
+  border-bottom: var(--menu-border, 1px solid rgba(255, 255, 255, 0.41));
+  transition: background 0.3s, color 0.3s;
+}
+
+.menu-item:hover,
+.menu-item.force-hover {
+  background: var(--menu-item-hover-bg-color, #fff);
+  color: var(--menu-item-hover-color, #101010);
+}
+
+.menu-item:active {
+  background: var(--menu-item-pressed-bg-color, #f2c94c);
+  color: var(--menu-item-pressed-color, #101010);
 }
 
 .submenu {

package/lib/style/style.css

@@ -1058,29 +1058,29 @@ body {
   color: var(--cols-card-accent-color, #0969da);
   white-space: nowrap;
 }
-.wenayCardListFields {
-  display: block;
-}
-.wenayCardListItem_compact .wenayCardListFields {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 4px 8px;
-}
-.wenayCardListItem_compact .wenayCardListField {
-  min-width: 0;
-  padding: 2px 6px;
-  border-radius: 5px;
-  background: var(--cols-card-field-bg, #f6f8fa);
-  line-height: 1.45;
-}
-.wenayCardListItem_compact .wenayCardListLabel {
-  min-width: 0;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: .03em;
-}
-@media (max-width: 320px) {
-  .wenayCardListItem_compact .wenayCardListFields { grid-template-columns: 1fr; }
+.wenayCardListFields {
+  display: block;
+}
+.wenayCardListItem_compact .wenayCardListFields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 4px 8px;
+}
+.wenayCardListItem_compact .wenayCardListField {
+  min-width: 0;
+  padding: 2px 6px;
+  border-radius: 5px;
+  background: var(--cols-card-field-bg, #f6f8fa);
+  line-height: 1.45;
+}
+.wenayCardListItem_compact .wenayCardListLabel {
+  min-width: 0;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: .03em;
+}
+@media (max-width: 320px) {
+  .wenayCardListItem_compact .wenayCardListFields { grid-template-columns: 1fr; }
 }
 .wenayCardListField {
   display: flex;