wenay-react2 1.0.47 → 1.0.49

package/lib/common/demo/peerConference.js

@@ -0,0 +1,372 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Shipped conference demonstration: a 3-way host-star room where media travels over
+ * BOTH technologies at once — the shared media relay (Peer.createMediaRelay, the grid)
+ * and a policy-routed WebRTC direct line (Replay.createRouteCoordinator, the focus tile).
+ * The QA board imports this exact component; consumers can import it from
+ * `wenay-react2/demo/peer-conference`.
+ *
+ * Load-bearing invariant: the focus link's relay hop and its WebRTC direct route both
+ * serve the SAME owner-sequenced routed line (replayListen per seat). Route hand-offs
+ * resume from `lastDelivered` and silently drop lower seq, so serving two different
+ * journals (e.g. a relay.watchOf line — per-watcher re-sequenced) would freeze frames
+ * after a switch. Never "simplify" the relay hop to watchOf.
+ *
+ * Frames are JSON (SVG data-URL snapshots): the replay channel wire is text and the
+ * webrtc connector declares binary:false. Real-camera binary frames through
+ * Media.attachVideoCanvas stay covered by QA cards 43-45.
+ */
+import { useEffect, useMemo, useRef, useState } from "react";
+import { listen as createListen, Peer, Replay } from "wenay-common2";
+import { usePeerCalls } from "../src/hooks/usePeerCall";
+import { useRouteState } from "../src/hooks/useRoute";
+import { createFakeRtcNet } from "./fakeRtcLoopback";
+const seatHue = (account) => {
+    let hash = 0;
+    for (const ch of account)
+        hash = (hash * 31 + ch.charCodeAt(0)) % 360;
+    return hash;
+};
+const defaultFrame = (account, n) => {
+    const hue = seatHue(account);
+    const cx = 16 + (n * 9) % 128;
+    const cy = 24 + (n * 5) % 44;
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="160" height="90">` +
+        `<rect width="160" height="90" fill="hsl(${hue},65%,42%)"/>` +
+        `<circle cx="${cx}" cy="${cy}" r="7" fill="#fff" opacity="0.9"/>` +
+        `<text x="8" y="82" font-size="12" font-family="monospace" fill="#fff">${account} #${n}</text></svg>`;
+    return { n, at: Date.now(), image: "data:image/svg+xml," + encodeURIComponent(svg) };
+};
+function makeChannelPair() {
+    let closed = false;
+    function side(other) {
+        let onMsg = null;
+        let onCls = null;
+        const me = {
+            send: (data) => { if (!closed)
+                setTimeout(function deliverHop() { if (!closed)
+                    other().deliver(data); }, 0); },
+            onMessage: (cb) => { onMsg = cb; },
+            onClose: (cb) => { onCls = cb; },
+            close: () => {
+                if (closed)
+                    return;
+                closed = true;
+                setTimeout(function closeHop() { me.fireClose(); other().fireClose(); }, 0);
+            },
+            deliver: (data) => onMsg?.(data),
+            fireClose: () => onCls?.(),
+        };
+        return me;
+    }
+    let a, b;
+    a = side(() => b);
+    b = side(() => a);
+    return [a, b];
+}
+/** Hand-built relay-route connector: a fresh serveReplayChannel hop over an in-proc text
+ *  channel per open(). Fresh-per-open matters: the coordinator closes the relay connector
+ *  on a successful promote and calls connect(ref, "relay") anew on every demote. */
+function makeRelayHopConnector(line) {
+    let state = "idle";
+    let stopServe = null;
+    let serverEnd = null;
+    return {
+        info: { label: "relay", kind: "relay", ordered: true, reliable: true },
+        open() {
+            state = "opening";
+            const [server, client] = makeChannelPair();
+            serverEnd = server;
+            stopServe = Replay.serveReplayChannel(Replay.exposeReplay(line), server);
+            state = "open";
+            return Replay.channelReplayRemote(client);
+        },
+        close() {
+            stopServe?.();
+            stopServe = null;
+            serverEnd?.close();
+            serverEnd = null;
+            state = "closed";
+        },
+        state: () => state,
+    };
+}
+/* ---------- the headless conference world ---------- */
+export function createConferenceWorld(options = {}) {
+    const accounts = options.accounts ?? ["conf-a", "conf-b", "conf-c"];
+    const hostAccount = accounts[0];
+    const room = options.room ?? "qa-conference";
+    const frameOf = options.frame ?? defaultFrame;
+    // client policy refs (the coordinator hooks read them live) + the server-side gate
+    const policy = { forceRelay: false, allowEndpoint: true };
+    const host = Peer.createPeerHost({
+        authorize: env => env.type === "offer" ? policy.allowEndpoint : true,
+    });
+    // exactly ONE connection per account: the signal hub delivers to the LAST registered
+    // port, and the call manager, webrtc connector and acceptor deliberately share it
+    const connections = new Map(accounts.map(account => [account, host.connection(account)]));
+    const managers = new Map(accounts.map(account => [account,
+        Peer.createCallManager({ port: Peer.callPortOf(connections.get(account).fragment), self: account })]));
+    // roster = host + every member whose host-star call is active; it is the single
+    // authority for BOTH media planes (relay ACL and direct accept/canDirect)
+    const roster = new Set([hostAccount]);
+    const [emitChanged, changed] = createListen();
+    const hostCalls = new Map();
+    function ring(member) {
+        const existing = hostCalls.get(member);
+        if (existing && existing.state() !== "ended")
+            return existing;
+        const handle = managers.get(hostAccount).call(member, { room });
+        hostCalls.set(member, handle);
+        handle.changed.on(function onStarCallState(state) {
+            if (state === "active")
+                roster.add(member);
+            emitChanged();
+        });
+        void handle.ended.then(function onStarCallEnd() {
+            roster.delete(member);
+            if (hostCalls.get(member) === handle)
+                hostCalls.delete(member);
+            emitChanged();
+        });
+        emitChanged();
+        return handle;
+    }
+    const relay = Peer.createMediaRelay({
+        lines: { cam: "video" },
+        videoHistory: 8,
+        canWatch: (watcher, owner) => watcher !== owner && roster.has(watcher) && roster.has(owner),
+    });
+    // one owner-sequenced routed line per seat: the seq authority BOTH routes serve
+    const routed = new Map(accounts.map(account => {
+        const [emit, line] = Replay.replayListen({ history: 8, current: "last" });
+        return [account, { emit, line }];
+    }));
+    const frameNumbers = new Map(accounts.map(account => [account, 0]));
+    const publishers = new Map(accounts.map(account => [account, relay.publishOf(account)]));
+    /** Seats stream only while in the room (the host always is): leaving freezes every
+     *  consumer of that seat on any route, joining resumes them. */
+    function tick(only) {
+        for (const account of accounts) {
+            if (only && account !== only)
+                continue;
+            if (!roster.has(account))
+                continue;
+            const n = (frameNumbers.get(account) ?? 0) + 1;
+            frameNumbers.set(account, n);
+            const frame = frameOf(account, n);
+            publishers.get(account)("cam", frame, frame.at);
+            routed.get(account).emit(frame, frame.at);
+        }
+    }
+    const fps = options.fps ?? 8;
+    const painter = fps > 0 ? setInterval(function paintConference() { tick(); }, Math.max(16, Math.round(1000 / fps))) : null;
+    // WebRTC runtime: injected factory or the browser's real RTCPeerConnection
+    const livePcs = new Set();
+    const baseRtc = options.rtc ?? (() => new globalThis.RTCPeerConnection());
+    const rtc = () => {
+        const pc = baseRtc();
+        livePcs.add(pc);
+        return pc;
+    };
+    // every seat serves ITS OWN routed line to direct viewers; membership gates accept
+    const acceptorStops = accounts.map(owner => Replay.acceptWebRtcDirect({
+        port: connections.get(owner).fragment.signal,
+        rtc,
+        self: owner,
+        serve: env => env.pair === "media:" + owner + ">" + env.from
+            ? Replay.exposeReplay(routed.get(owner).line)
+            : null,
+        accept: env => roster.has(env.from) && roster.has(owner),
+    }));
+    // focus coordinator for the first seat: directional signaling pair "media:OWNER>VIEWER"
+    // (the coordinator's own ref.key is symmetric — never reuse it for signaling)
+    const viewer = hostAccount;
+    const ownerOf = (ref) => ref.a === viewer ? ref.b : ref.a;
+    const coordinator = Replay.createRouteCoordinator({
+        policy: {
+            mustRelay: () => policy.forceRelay,
+            canDirect: ctx => roster.has(ownerOf(ctx)),
+        },
+        connect: (ref, kind) => {
+            const owner = ownerOf(ref);
+            if (kind === "relay")
+                return makeRelayHopConnector(routed.get(owner).line);
+            return Replay.createWebRtcConnector({
+                port: connections.get(viewer).fragment.signal,
+                rtc,
+                self: viewer,
+                peer: owner,
+                pair: "media:" + owner + ">" + viewer,
+                openTimeoutMs: 8000,
+            });
+        },
+    });
+    const focusLinks = new Map();
+    function focus(owner) {
+        let link = focusLinks.get(owner);
+        if (!link) {
+            link = coordinator.pair(viewer, owner);
+            focusLinks.set(owner, link);
+        }
+        return link;
+    }
+    /** Server-side revoke of the viewer's live direct session; the connector fails and
+     *  the coordinator auto-falls back to the relay hop without losing frames. */
+    function revokeDirect(owner) {
+        host.revoke("media:" + owner + ">" + viewer, [viewer], "server revoke");
+    }
+    /** Transport-death drill: the direct channel dies mid-flight (not a policy event). */
+    function killDirect() {
+        if (options.killTransport) {
+            options.killTransport();
+            return;
+        }
+        for (const pc of livePcs)
+            pc.close();
+        livePcs.clear();
+    }
+    let closed = false;
+    function close() {
+        if (closed)
+            return;
+        closed = true;
+        if (painter)
+            clearInterval(painter);
+        coordinator.close();
+        for (const stop of acceptorStops)
+            stop();
+        for (const handle of hostCalls.values())
+            if (handle.state() !== "ended")
+                handle.hangup();
+        for (const manager of managers.values())
+            manager.close();
+        relay.close();
+        for (const entry of routed.values())
+            entry.line.close();
+        for (const connection of connections.values())
+            connection.close();
+        host.close();
+    }
+    return {
+        accounts,
+        hostAccount,
+        viewer,
+        room,
+        managers,
+        relay,
+        coordinator,
+        focus,
+        ring,
+        hostCalls,
+        roster: () => [...roster].sort(),
+        inRoster: (account) => roster.has(account),
+        changed,
+        lineOf: (account) => routed.get(account).line,
+        frameNumber: (account) => frameNumbers.get(account) ?? 0,
+        tick,
+        setForceRelay(on) { policy.forceRelay = on; emitChanged(); },
+        setAllowEndpoint(on) { policy.allowEndpoint = on; emitChanged(); },
+        getPolicy: () => ({ ...policy }),
+        revokeDirect,
+        killDirect,
+        close,
+    };
+}
+/* ---------- React demo: 3 seats, relay grid, direct focus ---------- */
+const tileStyle = { width: 160, height: 90, background: "#111", borderRadius: 6, objectFit: "cover" };
+const panelStyle = { border: "1px solid #d0d7de", borderRadius: 8, padding: 8, display: "grid", gap: 6, alignContent: "start" };
+const SeatPanel = (p) => {
+    const manager = p.world.managers.get(p.account);
+    const calls = usePeerCalls(manager);
+    const isHost = p.account === p.world.hostAccount;
+    const members = p.world.accounts.filter(account => account !== p.world.hostAccount);
+    const incoming = calls.rings.find(call => call.direction === "in");
+    const live = calls.calls.filter(call => call.state() === "active");
+    return _jsxs("div", { style: panelStyle, children: [_jsxs("b", { children: [p.account, isHost ? " (host)" : "", " ", p.world.inRoster(p.account) ? "· in room" : ""] }), isHost && members.map(member => {
+                const handle = p.world.hostCalls.get(member);
+                const state = handle?.state();
+                return _jsxs("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [(!handle || state === "ended") && _jsxs("button", { onClick: () => p.world.ring(member), children: ["ring ", member] }), state === "ringing" && _jsxs("span", { children: ["ringing ", member, "\u2026"] }), state === "active" && _jsxs("button", { onClick: () => handle.hangup(), children: ["hang up ", member] })] }, member);
+            }), !isHost && incoming && _jsxs("div", { style: { display: "flex", gap: 6 }, children: [_jsx("button", { onClick: () => incoming.accept(), children: "accept" }), _jsx("button", { onClick: () => incoming.decline(), children: "decline" })] }), !isHost && live.map(call => _jsxs("button", { onClick: () => call.hangup(), children: ["hang up (", call.peer, ")"] }, call.id)), _jsxs("span", { style: { fontSize: 11, color: "#57606a" }, children: ["calls: ", calls.calls.map(call => `${call.peer}:${call.state()}`).join(" ") || "none"] })] });
+};
+const GridTile = (p) => {
+    const imgRef = useRef(null);
+    const counter = useRef({ n: 0, at: 0 });
+    const [snapshot, setSnapshot] = useState({ n: 0, ageMs: 0 });
+    useEffect(() => {
+        // watchOf hides owners the ACL denies (the property reads as undefined), so the
+        // tile attaches lazily and retries whenever room membership changes
+        let off = null;
+        const tryAttach = () => {
+            if (off)
+                return;
+            const watch = p.world.relay.watchOf(p.viewer);
+            const line = watch[p.owner];
+            if (!line)
+                return;
+            off = line.cam.on((frame) => {
+                counter.current = { n: frame.n, at: frame.at };
+                if (imgRef.current)
+                    imgRef.current.src = frame.image;
+            });
+        };
+        tryAttach();
+        const offChanged = p.world.changed.on(tryAttach);
+        const timer = window.setInterval(() => setSnapshot({
+            n: counter.current.n,
+            ageMs: counter.current.at ? Date.now() - counter.current.at : 0,
+        }), 500);
+        return () => { off?.(); offChanged(); window.clearInterval(timer); };
+    }, [p.world, p.viewer, p.owner]);
+    return _jsxs("figure", { style: { margin: 0, display: "grid", gap: 2, justifyItems: "start" }, children: [_jsx("img", { ref: imgRef, alt: `${p.viewer} watches ${p.owner}`, style: tileStyle }), _jsxs("figcaption", { style: { fontSize: 11, color: "#57606a" }, children: [p.viewer, " \u2190 ", p.owner, " \u00B7 #", snapshot.n, " \u00B7 ", Math.round(snapshot.ageMs / 100) / 10, "s"] })] });
+};
+const FocusPanel = (p) => {
+    const members = p.world.accounts.filter(account => account !== p.world.viewer);
+    const [owner, setOwner] = useState(members[0]);
+    const link = useMemo(() => p.world.focus(owner), [p.world, owner]);
+    const route = useRouteState(p.world.coordinator, link);
+    const imgRef = useRef(null);
+    const counter = useRef({ n: 0, seq: 0 });
+    const [snapshot, setSnapshot] = useState({ n: 0, seq: 0 });
+    const [lastOp, setLastOp] = useState("");
+    const [forceRelay, setForceRelay] = useState(false);
+    const [allowEndpoint, setAllowEndpoint] = useState(true);
+    useEffect(() => {
+        let off = null;
+        let seq = () => 0;
+        try {
+            const sub = link.subscribe(frame => {
+                counter.current = { n: frame.n, seq: seq() };
+                if (imgRef.current)
+                    imgRef.current.src = frame.image;
+            });
+            seq = sub.seq;
+            off = sub;
+        }
+        catch (error) {
+            setLastOp("subscribe failed: " + String(error));
+        }
+        const timer = window.setInterval(() => setSnapshot({ ...counter.current }), 500);
+        return () => { off?.(); window.clearInterval(timer); };
+    }, [link]);
+    const run = (label, op) => void op
+        .then(result => setLastOp(`${label}: ${result.ok ? "ok" : "denied"} → ${result.state}${result.reason ? ` (${String(result.reason)})` : ""}`))
+        .catch(error => setLastOp(`${label}: ${String(error)}`));
+    const chipColor = route.state === "direct" ? "#1a7f37" : route.state.startsWith("direct") ? "#9a6700" : route.state === "fallback" ? "#cf222e" : "#0969da";
+    return _jsxs("div", { style: { ...panelStyle, minWidth: 320 }, children: [_jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }, children: [_jsxs("b", { children: ["focus: ", p.world.viewer, " \u2190"] }), _jsx("select", { value: owner, onChange: event => setOwner(event.target.value), children: members.map(member => _jsx("option", { value: member, children: member }, member)) }), _jsx("span", { style: { padding: "2px 8px", borderRadius: 10, fontSize: 12, color: "#fff", background: chipColor }, children: route.state })] }), _jsx("img", { ref: imgRef, alt: `focus on ${owner}`, style: { ...tileStyle, width: 240, height: 135 } }), _jsxs("span", { style: { fontSize: 11, color: "#57606a" }, children: ["frame #", snapshot.n, " \u00B7 seq ", snapshot.seq, route.metrics?.relay ? ` · relay:${route.metrics.relay.state}` : "", route.metrics?.direct ? ` · direct:${route.metrics.direct.state}` : ""] }), _jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [_jsx("button", { onClick: () => run("promote", link.promoteDirect({ timeoutMs: 8000 })), children: "go direct" }), _jsx("button", { onClick: () => run("relay", link.reinterposeRelay("manual")), children: "back to relay" }), _jsx("button", { onClick: () => p.world.revokeDirect(owner), children: "server revoke" }), _jsx("button", { onClick: () => p.world.killDirect(), children: "kill direct transport" })] }), _jsxs("label", { style: { fontSize: 12 }, children: [_jsx("input", { type: "checkbox", checked: forceRelay, onChange: event => { setForceRelay(event.target.checked); p.world.setForceRelay(event.target.checked); } }), " policy: force relay"] }), _jsxs("label", { style: { fontSize: 12 }, children: [_jsx("input", { type: "checkbox", checked: !allowEndpoint, onChange: event => { setAllowEndpoint(!event.target.checked); p.world.setAllowEndpoint(!event.target.checked); } }), " server: refuse endpoint exposure"] }), lastOp && _jsx("span", { style: { fontSize: 12 }, children: lastOp }), route.log.length > 0 && _jsx("span", { style: { fontSize: 11, color: "#57606a" }, children: route.log.map(entry => `${entry.from}→${entry.to}${entry.reason ? ` (${String(entry.reason)})` : ""}`).join(" | ") })] });
+};
+export const ConferenceCallDemo = () => {
+    const hasRealRtc = typeof globalThis.RTCPeerConnection === "function";
+    const [simulateRtc, setSimulateRtc] = useState(!hasRealRtc);
+    const setup = useMemo(() => {
+        const net = simulateRtc ? createFakeRtcNet() : null;
+        const world = createConferenceWorld(net ? { rtc: net.pc, killTransport: net.killLiveChannels } : {});
+        return { net, world };
+    }, [simulateRtc]);
+    useEffect(() => () => setup.world.close(), [setup]);
+    const [, setVersion] = useState(0);
+    useEffect(() => setup.world.changed.on(() => setVersion(value => value + 1)), [setup]);
+    const world = setup.world;
+    const pairs = world.accounts.flatMap(viewer => world.accounts.filter(owner => owner !== viewer).map(owner => ({ viewer, owner })));
+    return _jsxs("div", { style: { display: "grid", gap: 10 }, children: [_jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }, children: [_jsxs("b", { children: ["room: ", world.roster().join(", ")] }), _jsxs("label", { style: { fontSize: 12 }, children: [_jsx("input", { type: "checkbox", checked: simulateRtc, onChange: event => setSimulateRtc(event.target.checked) }), " simulate RTC (loopback runtime", hasRealRtc ? "" : "; real RTCPeerConnection unavailable here", ")"] })] }), _jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, minmax(180px, 1fr))", gap: 8 }, children: world.accounts.map(account => _jsx(SeatPanel, { world: world, account: account }, account)) }), _jsxs("div", { style: { display: "flex", gap: 12, flexWrap: "wrap", alignItems: "start" }, children: [_jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, auto)", gap: 8 }, children: pairs.map(pair => _jsx(GridTile, { world: world, viewer: pair.viewer, owner: pair.owner }, pair.viewer + "<" + pair.owner)) }), _jsx(FocusPanel, { world: world })] })] });
+};

package/lib/common/demo/peerMedia.js

@@ -108,6 +108,9 @@ export const PeerCallVideoAudioDemo = () => {
     const audio = useMediaSource("audio", { mode: "pcm", bufferSize: 4096 });
     const canvasRef = useRef(null);
     const playerRef = useRef(null);
+    // the player exists only while the call is active; remember the enable intent so the
+    // documented order (enable -> call -> accept) produces sound without a second click
+    const audioWanted = useRef(false);
     const [drawn, setDrawn] = useState(0);
     const publishVideo = useMemo(() => { const send = relay.publishOf("qa-av-a"); return (frame, sentAt) => send("camera", frame, sentAt ?? Date.now()); }, [relay]);
     const publishAudio = useMemo(() => { const send = relay.publishOf("qa-av-a"); return (frame, sentAt) => send("microphone", frame, sentAt ?? Date.now()); }, [relay]);
@@ -120,9 +123,11 @@ export const PeerCallVideoAudioDemo = () => {
         const view = Media.attachVideoCanvas(watcher["qa-av-a"].camera, canvasRef.current);
         const player = Media.attachAudioPlayer(watcher["qa-av-a"].microphone, { maxBacklogSec: .35 });
         playerRef.current = player;
+        if (audioWanted.current)
+            player.enable();
         const timer = window.setInterval(() => setDrawn(view.stats().drawn), 500);
         return () => { window.clearInterval(timer); view.off(); player.off(); playerRef.current = null; };
     }, [active, relay]);
     const incoming = callee.rings.find(call => call.direction === "in");
-    return _jsxs("div", { style: { display: "grid", gap: 8 }, children: [_jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }, children: [_jsx("button", { onClick: () => { playerRef.current?.enable(); void video.start(); void audio.start(); }, children: "enable camera + mic" }), !active && !incoming && _jsx("button", { onClick: () => caller.call("qa-av-b"), children: "call B" }), incoming && _jsx("button", { onClick: () => incoming.accept(), children: "B accept call" }), caller.active && _jsx("button", { onClick: () => caller.active?.hangup(), children: "hang up" }), _jsxs("b", { children: ["call: ", active ? "active — media attached" : incoming ? "ringing" : "idle", "; video frames: ", drawn] })] }), _jsx("canvas", { ref: canvasRef, width: 320, height: 180, style: { width: 320, height: 180, background: "#111", borderRadius: 8 } })] });
+    return _jsxs("div", { style: { display: "grid", gap: 8 }, children: [_jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }, children: [_jsx("button", { onClick: () => { audioWanted.current = true; playerRef.current?.enable(); void video.start(); void audio.start(); }, children: "enable camera + mic" }), !active && !incoming && _jsx("button", { onClick: () => caller.call("qa-av-b"), children: "call B" }), incoming && _jsx("button", { onClick: () => incoming.accept(), children: "B accept call" }), caller.active && _jsx("button", { onClick: () => caller.active?.hangup(), children: "hang up" }), _jsxs("b", { children: ["call: ", active ? "active — media attached" : incoming ? "ringing" : "idle", "; video frames: ", drawn] })] }), _jsx("canvas", { ref: canvasRef, width: 320, height: 180, style: { width: 320, height: 180, background: "#111", borderRadius: 8 } })] });
 };

package/lib/common/src/hooks/index.d.ts

@@ -8,3 +8,4 @@ export * from './useReorderBoard';
 export * from './useMedia';
 export * from './usePeer';
 export * from './usePeerCall';
+export * from './useRoute';

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

@@ -8,3 +8,4 @@ export * from './useReorderBoard';
 export * from './useMedia';
 export * from './usePeer';
 export * from './usePeerCall';
+export * from './useRoute';

package/lib/common/src/hooks/useRoute.d.ts

@@ -0,0 +1,28 @@
+import { Replay } from "wenay-common2";
+export type RouteLogEntry = {
+    at: number;
+    from: Replay.tRouteState;
+    to: Replay.tRouteState;
+    reason?: unknown;
+};
+/** React binding for one route-coordinator link: live route state, the last denial or
+ * failure reason, connector metrics on a 500ms snapshot, and a short hand-off log.
+ * Route ownership stays in common2 — the hook only mirrors coordinator events; callers
+ * own coordinator/link lifecycle (close), exactly like usePeerCalls over CallManager. */
+export declare function useRouteState<Z extends any[]>(coordinator: Pick<Replay.RouteCoordinator<Z>, "onRoute"> | null, link: Pick<Replay.RouteLink<Z>, "ref" | "state" | "reason" | "metrics"> | null): {
+    state: Replay.tRouteState;
+    reason: unknown;
+    metrics: {
+        relay: {
+            rtt?: number;
+            pending?: number;
+            state: Replay.tConnectorState;
+        } | null;
+        direct: {
+            rtt?: number;
+            pending?: number;
+            state: Replay.tConnectorState;
+        } | null;
+    } | null;
+    log: RouteLogEntry[];
+};

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

@@ -0,0 +1,30 @@
+import { useEffect, useMemo, useState } from "react";
+/** React binding for one route-coordinator link: live route state, the last denial or
+ * failure reason, connector metrics on a 500ms snapshot, and a short hand-off log.
+ * Route ownership stays in common2 — the hook only mirrors coordinator events; callers
+ * own coordinator/link lifecycle (close), exactly like usePeerCalls over CallManager. */
+export function useRouteState(coordinator, link) {
+    const [state, setState] = useState(() => link?.state() ?? "closed");
+    const [reason, setReason] = useState(() => link?.reason());
+    const [metrics, setMetrics] = useState(() => link?.metrics() ?? null);
+    const [log, setLog] = useState([]);
+    useEffect(() => {
+        if (!coordinator || !link)
+            return;
+        setState(link.state());
+        setReason(link.reason());
+        setMetrics(link.metrics());
+        setLog([]);
+        const off = coordinator.onRoute(event => {
+            if (event.key !== link.ref.key)
+                return;
+            setState(event.to);
+            setReason(event.reason);
+            setMetrics(link.metrics());
+            setLog(current => [...current.slice(-3), { at: Date.now(), from: event.from, to: event.to, reason: event.reason }]);
+        });
+        const timer = setInterval(() => setMetrics(link.metrics()), 500);
+        return () => { off(); clearInterval(timer); };
+    }, [coordinator, link]);
+    return useMemo(() => ({ state, reason, metrics, log }), [state, reason, metrics, log]);
+}

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

@@ -1,7 +1,7 @@
 import { Params } from "wenay-common2";
 export const getSettingLogs = () => ({
-    minVarLogs: { name: "min. importance for notifications", range: { min: 0, max: 25, step: 1 }, value: 0 },
-    minVarMessage: { name: "min. importance for log table", range: { min: 0, max: 25, step: 1 }, value: 0 },
+    minVarLogs: { name: "min. importance for log table", range: { min: 0, max: 25, step: 1 }, value: 0 },
+    minVarMessage: { name: "min. importance for notifications", range: { min: 0, max: 25, step: 1 }, value: 0 },
     timeShow: { name: "screen display time", range: { min: 1, max: 20, step: 1 }, value: 2 },
     show: { name: "show", value: true }
 });