@uzuhq/code-cli 0.3.14

package/dist/harness/admin-client.js

@@ -0,0 +1,215 @@
+/**
+ * parent frame の `window.__uzu_dev` を dev-server 側の管理 channel (`/dev/admin`) に
+ * 繋ぐ薄いクライアント。 SDK の `attachDevHooks({...})` と同じ shape の hook を
+ * expose する。
+ *
+ * message shape は server.ts の handleAdminConnection と同じ。
+ *   Client → Server: `{ type: 'call', id, method, args? }`
+ *                    `{ type: 'subscribe', id, kind: 'snapshot' | 'events' }`
+ *                    `{ type: 'unsubscribe', id }`
+ *   Server → Client: `{ type: 'result', id, value }` / `{ type: 'error', id, error }`
+ *                    `{ type: 'event', id, value }` / `{ type: 'missing', id }`
+ */
+export function attachAdminClient(adminUrl) {
+    const pending = new Map();
+    const subscribers = new Map();
+    let idCounter = 0;
+    let ws = null;
+    let ready = null;
+    let latestSnapshot = null;
+    const localSnapshotSubs = new Set();
+    const localEventSubs = new Set();
+    const connect = () => {
+        if (ready)
+            return ready;
+        ready = new Promise((resolve, reject) => {
+            const socket = new WebSocket(adminUrl);
+            ws = socket;
+            socket.addEventListener('open', () => {
+                // 常時 snapshot subscription を張っておき、 waitForSnapshot / subscribeSnapshot
+                // の同期パス (getSnapshot() = latestSnapshot) を暖める。
+                void call('snapshot_subscribe', 'subscribe', {
+                    kind: 'snapshot',
+                }).catch(() => {
+                    /* ignore — server が未対応でも subscribeSnapshot は動く */
+                });
+                subscribers.set('snapshot_subscribe', (value) => {
+                    latestSnapshot = value;
+                    localSnapshotSubs.forEach((cb) => {
+                        try {
+                            cb(value);
+                        }
+                        catch (err) {
+                            console.warn('[__uzu_dev] snapshot listener threw:', err);
+                        }
+                    });
+                });
+                void call('events_subscribe', 'subscribe', {
+                    kind: 'events',
+                }).catch(() => {
+                    /* ignore */
+                });
+                subscribers.set('events_subscribe', (value) => {
+                    localEventSubs.forEach((cb) => {
+                        try {
+                            cb(value);
+                        }
+                        catch (err) {
+                            console.warn('[__uzu_dev] events listener threw:', err);
+                        }
+                    });
+                });
+                resolve();
+            });
+            socket.addEventListener('message', (ev) => {
+                let msg;
+                try {
+                    msg = JSON.parse(ev.data);
+                }
+                catch {
+                    return;
+                }
+                const id = msg.id;
+                if (msg.type === 'result') {
+                    const p = pending.get(id);
+                    if (p) {
+                        p.resolve(msg.value);
+                        pending.delete(id);
+                    }
+                }
+                else if (msg.type === 'error') {
+                    const p = pending.get(id);
+                    if (p) {
+                        p.reject(new Error(msg.error));
+                        pending.delete(id);
+                    }
+                }
+                else if (msg.type === 'missing') {
+                    const p = pending.get(id);
+                    if (p) {
+                        p.resolve(undefined);
+                        pending.delete(id);
+                    }
+                }
+                else if (msg.type === 'event') {
+                    const sub = subscribers.get(id);
+                    if (sub)
+                        sub(msg.value);
+                }
+            });
+            socket.addEventListener('error', () => reject(new Error('admin channel error')));
+            socket.addEventListener('close', () => {
+                ws = null;
+                ready = null;
+                // 全 pending を reject
+                pending.forEach((p) => p.reject(new Error('admin channel closed')));
+                pending.clear();
+            });
+        });
+        return ready;
+    };
+    const nextId = (prefix) => {
+        idCounter++;
+        return `${prefix}-${idCounter}`;
+    };
+    const call = (id, type, body) => {
+        return new Promise((resolve, reject) => {
+            if (!ws) {
+                reject(new Error('admin channel not connected'));
+                return;
+            }
+            pending.set(id, { resolve, reject });
+            ws.send(JSON.stringify({ type, id, ...body }));
+        });
+    };
+    const callMethod = async (method, args = []) => {
+        await connect();
+        const id = nextId('call');
+        return call(id, 'call', { method, args });
+    };
+    const hooks = {
+        getSnapshot: () => latestSnapshot,
+        getRawState: () => latestSnapshot,
+        playerId: () => 'host',
+        subscribeSnapshot: (cb) => {
+            localSnapshotSubs.add(cb);
+            return () => {
+                localSnapshotSubs.delete(cb);
+            };
+        },
+        waitForSnapshot: (predicate, options) => {
+            const timeoutMs = options?.timeoutMs ?? 10_000;
+            return new Promise((resolve, reject) => {
+                if (latestSnapshot != null) {
+                    try {
+                        if (predicate(latestSnapshot)) {
+                            resolve(latestSnapshot);
+                            return;
+                        }
+                    }
+                    catch (err) {
+                        reject(err);
+                        return;
+                    }
+                }
+                const timer = setTimeout(() => {
+                    localSnapshotSubs.delete(listener);
+                    reject(new Error(`[__uzu_dev] waitForSnapshot timed out after ${timeoutMs}ms`));
+                }, timeoutMs);
+                const listener = (snap) => {
+                    try {
+                        if (predicate(snap)) {
+                            clearTimeout(timer);
+                            localSnapshotSubs.delete(listener);
+                            resolve(snap);
+                        }
+                    }
+                    catch (err) {
+                        clearTimeout(timer);
+                        localSnapshotSubs.delete(listener);
+                        reject(err);
+                    }
+                };
+                localSnapshotSubs.add(listener);
+            });
+        },
+        setRawState: async (state) => {
+            await callMethod('setRawState', [state]);
+        },
+        mergeRawState: async (patch) => {
+            await callMethod('mergeRawState', [patch]);
+        },
+        patchRawState: async (ops) => {
+            await callMethod('patchRawState', [ops]);
+        },
+        send: async (args) => {
+            await callMethod('sendAction', [args]);
+        },
+        subscribeEvents: (cb) => {
+            localEventSubs.add(cb);
+            return () => {
+                localEventSubs.delete(cb);
+            };
+        },
+        pauseTick: () => {
+            void callMethod('pauseTick');
+        },
+        resumeTick: () => {
+            void callMethod('resumeTick');
+        },
+        stepTick: (n) => {
+            void callMethod('stepTick', [n ?? 1]);
+        },
+        // getSeed / getCurrentTick / isTickPaused は admin channel 越しだと非同期取得になり、
+        // 同期シグネチャでは値が届く前に初期値を返す嘘 API になるため remote proxy では公開しない。
+        // 状態追跡は subscribeSnapshot / waitForSnapshot を使う。
+        reset: (opts) => {
+            void callMethod('reset', [opts]);
+        },
+    };
+    // 初回接続を kick する (非同期で完了)。
+    void connect().catch((err) => {
+        console.warn('[__uzu_dev] admin channel connect failed:', err);
+    });
+    return hooks;
+}

package/dist/harness/client-entry.js

@@ -0,0 +1,90 @@
+/**
+ * harness client bundle entry。
+ *
+ * `/_uzu_meta.json` を fetch → iframe grid mount + HUD 表示 + admin channel client を
+ * `window.__uzu_dev` に expose する。 esbuild で IIFE bundle 済み文字列として
+ * dev-server が `/_uzu_harness.js` から serve する。
+ */
+import { mountIframeGrid, mountSinglePlayer } from './mount.js';
+import { attachAdminClient } from './admin-client.js';
+/**
+ * meta の URL は CLI 視点 (localhost) で書かれている。 スマホ実機など
+ * localhost 以外の host で harness を開いたときは、 アクセスに使った
+ * hostname へ読み替える (port はそのまま)。 harness server 自体は
+ * 同一 origin なので location.host を使う。
+ */
+function rewriteHostForViewer(meta) {
+    const isLocal = location.hostname === 'localhost' || location.hostname === '127.0.0.1';
+    if (isLocal) {
+        // PC (localhost) は従来どおり scenario dev server (vite) へ直接アクセスする
+        return { ...meta, serverBaseUrl: `ws://${location.host}` };
+    }
+    // 実機 (LAN IP / mDNS 名) からは harness server の scenario proxy を経由する。
+    // vite には harness から localhost 宛で届くため、 scenario 側の vite 設定
+    // (--host / allowedHosts) を一切要求しない。
+    return {
+        ...meta,
+        scenarioUrl: `${location.protocol}//${location.host}/`,
+        serverBaseUrl: `ws://${location.host}`,
+    };
+}
+async function main() {
+    const res = await fetch('/_uzu_meta.json');
+    if (!res.ok) {
+        console.error('[uzu-harness] failed to fetch meta:', res.status);
+        return;
+    }
+    const rawMeta = (await res.json());
+    const meta = rewriteHostForViewer(rawMeta);
+    // `?player=N` (0-based) 付きは 1 プレイヤー全画面 mount (スマホ実機用)。
+    // admin channel は grid (親frame) だけが張るので、 単体表示では dev メニューを出さない。
+    const playerParam = new URLSearchParams(location.search).get('player');
+    const playerIndex = playerParam == null ? null : Number(playerParam);
+    const seatCount = meta.seats.length;
+    if (playerIndex != null && Number.isInteger(playerIndex)) {
+        if (playerIndex < 0 || playerIndex >= seatCount) {
+            document.body.textContent = `player は 0〜${seatCount - 1} で指定してください`;
+            return;
+        }
+        mountSinglePlayer({
+            target: document.body,
+            playerCount: meta.playerCount,
+            orientation: meta.orientation,
+            devMinIframeShortEdge: meta.devMinIframeShortEdge,
+            scenarioUrl: meta.scenarioUrl,
+            serverBaseUrl: meta.serverBaseUrl,
+            revisionId: meta.revisionId,
+            roomKey: meta.roomKey,
+            seats: meta.seats,
+        }, playerIndex);
+        return;
+    }
+    // admin channel client を接続。 window.__uzu_dev として parent frame に expose する。
+    const adminUrl = `${meta.serverBaseUrl}/dev/admin`;
+    const hooks = attachAdminClient(adminUrl);
+    window.__uzu_dev = hooks;
+    const stateGetter = () => {
+        const snap = hooks.getSnapshot();
+        if (snap == null)
+            return null;
+        return { state: snap, serverTime: 0, myId: 'host' };
+    };
+    const resetGame = hooks.reset ? () => hooks.reset?.({ seed: 'random' }) : undefined;
+    mountIframeGrid({
+        target: document.body,
+        playerCount: meta.playerCount,
+        orientation: meta.orientation,
+        devMinIframeShortEdge: meta.devMinIframeShortEdge,
+        scenarioUrl: meta.scenarioUrl,
+        serverBaseUrl: meta.serverBaseUrl,
+        revisionId: meta.revisionId,
+        roomKey: meta.roomKey,
+        seats: meta.seats,
+        // 実機リンク用 host は rewrite 前の meta から取る (localhost 視点の LAN/mDNS 一覧)。
+        lanHosts: rawMeta.lanHosts,
+        // 各 cell の UZU ボタンに配線する dev メニュー。
+        stateGetter,
+        resetGame,
+    });
+}
+void main();

package/dist/harness/dev-button.js

@@ -0,0 +1,249 @@
+/**
+ * UZU ボタンのタップメニュー (Emulator / State Inspector / Reset / 実機で開く) と、
+ * 共有の State Inspector overlay。
+ *
+ * 本番アプリ (Flutter GamePlayScreen) は各プレイヤー画面の左上に UZU ボタン +
+ * ActionBar を描画する。 harness も同じ仕様に合わせ、 UZU ボタンは各 iframe cell
+ * (mount.ts) 側に置き、 そのボタンへ本メニューを attach する。
+ * harness client bundle 内で browser 実行される (Node import 依存なし)。
+ */
+// State Inspector はどの cell の UZU メニューから開いても同じ 1 枚を使う (room は共有)。
+let inspectorEl = null;
+let inspectorTimer = null;
+function isInspectorOpen() {
+    return inspectorEl != null;
+}
+/**
+ * UZU ボタン (button 要素) にタップメニューを配線する。 メニューはボタン直下に出る。
+ */
+export function attachUzuMenu(button, opts = {}) {
+    const { stateGetter, playerCount, resetGame, onOpenMobile } = opts;
+    let popup = null;
+    const closePopup = () => {
+        popup?.remove();
+        popup = null;
+    };
+    button.addEventListener('click', (ev) => {
+        ev.stopPropagation();
+        if (popup) {
+            closePopup();
+            return;
+        }
+        const el = document.createElement('div');
+        popup = el;
+        el.style.cssText = [
+            'position:fixed',
+            'z-index:100001',
+            'background:#2d3436',
+            'border-radius:8px',
+            'padding:12px',
+            'box-shadow:0 4px 16px rgba(0,0,0,0.4)',
+            'font-family:system-ui,sans-serif',
+            'min-width:200px',
+            'display:flex',
+            'flex-direction:column',
+            'gap:8px',
+        ].join(';');
+        const addSeparator = () => {
+            if (!el.children.length)
+                return;
+            const sep = document.createElement('div');
+            sep.style.cssText = 'border-top:1px solid #44475a;';
+            el.appendChild(sep);
+        };
+        const addAction = (label, bg, hoverBg, onClick) => {
+            const b = document.createElement('button');
+            b.textContent = label;
+            b.style.cssText = [
+                'display:block',
+                'width:100%',
+                'padding:8px 24px',
+                'border:none',
+                'border-radius:4px',
+                `background:${bg}`,
+                'color:#fff',
+                'font-size:13px',
+                'cursor:pointer',
+                'font-family:system-ui,sans-serif',
+            ].join(';');
+            b.onmouseenter = () => {
+                b.style.background = hoverBg;
+                b.style.color = '#2d3436';
+            };
+            b.onmouseleave = () => {
+                b.style.background = bg;
+                b.style.color = '#fff';
+            };
+            b.onclick = (e) => {
+                e.stopPropagation();
+                onClick();
+            };
+            el.appendChild(b);
+            return b;
+        };
+        if (onOpenMobile) {
+            addAction('📱 スマホで開く', '#0984e3', '#74b9ff', () => {
+                onOpenMobile();
+                closePopup();
+            });
+        }
+        addSeparator();
+        addAction('Emulator', '#e17055', '#fab1a0', () => {
+            const currentUrl = new URL(window.location.href);
+            const endpoint = currentUrl.origin + currentUrl.pathname;
+            const emulatorUrl = new URL('https://play-screen-v3-emulator.web.app/');
+            emulatorUrl.searchParams.set('endpoint', endpoint);
+            if (playerCount) {
+                emulatorUrl.searchParams.set('player_count', String(playerCount));
+            }
+            window.open(emulatorUrl.toString(), '_blank');
+        });
+        if (stateGetter) {
+            addSeparator();
+            const stateBtn = addAction(isInspectorOpen() ? 'Hide State' : 'State', '#00b894', '#55efc4', () => {
+                if (isInspectorOpen()) {
+                    closeInspector();
+                    stateBtn.textContent = 'State';
+                }
+                else {
+                    openInspector(stateGetter);
+                    stateBtn.textContent = 'Hide State';
+                }
+            });
+        }
+        if (resetGame) {
+            addSeparator();
+            addAction('Reset State', '#d63031', '#ff7675', () => {
+                resetGame();
+                closePopup();
+            });
+        }
+        document.body.appendChild(el);
+        const rect = button.getBoundingClientRect();
+        el.style.top = `${Math.round(rect.bottom + 6)}px`;
+        el.style.left = `${Math.round(rect.left)}px`;
+        const close = (e) => {
+            if (popup && !popup.contains(e.target) && !button.contains(e.target)) {
+                closePopup();
+                document.removeEventListener('click', close);
+            }
+        };
+        setTimeout(() => document.addEventListener('click', close), 0);
+    });
+}
+function openInspector(getter) {
+    if (inspectorEl)
+        return;
+    inspectorEl = document.createElement('div');
+    inspectorEl.style.cssText = [
+        'position:fixed',
+        'bottom:8px',
+        'right:8px',
+        'z-index:99998',
+        'width:360px',
+        'max-height:80vh',
+        'overflow:auto',
+        'background:#1e272e',
+        'border:1px solid #44475a',
+        'border-radius:8px',
+        'padding:0',
+        'box-shadow:0 4px 16px rgba(0,0,0,0.5)',
+        'font-family:monospace',
+        'font-size:11px',
+        'color:#dfe6e9',
+        'resize:both',
+        'min-width:200px',
+        'min-height:120px',
+    ].join(';');
+    const header = document.createElement('div');
+    header.style.cssText = [
+        'display:flex',
+        'justify-content:space-between',
+        'align-items:center',
+        'padding:6px 10px',
+        'background:#2d3436',
+        'border-bottom:1px solid #44475a',
+        'border-radius:8px 8px 0 0',
+        'position:sticky',
+        'top:0',
+        'cursor:grab',
+        'user-select:none',
+    ].join(';');
+    const headerTitle = document.createElement('span');
+    headerTitle.textContent = 'State Inspector';
+    headerTitle.style.cssText = 'color:#00b894;font-weight:bold;font-size:12px;';
+    const closeBtn = document.createElement('button');
+    closeBtn.textContent = '×';
+    closeBtn.style.cssText =
+        'background:none;border:none;color:#dfe6e9;font-size:18px;cursor:pointer;padding:0 4px;';
+    closeBtn.onclick = () => closeInspector();
+    header.appendChild(headerTitle);
+    header.appendChild(closeBtn);
+    inspectorEl.appendChild(header);
+    let dragOffsetX = 0;
+    let dragOffsetY = 0;
+    let overlay = null;
+    header.addEventListener('mousedown', (e) => {
+        if (e.target === closeBtn)
+            return;
+        const rect = inspectorEl.getBoundingClientRect();
+        dragOffsetX = e.clientX - rect.left;
+        dragOffsetY = e.clientY - rect.top;
+        header.style.cursor = 'grabbing';
+        e.preventDefault();
+        overlay = document.createElement('div');
+        overlay.style.cssText =
+            'position:fixed;top:0;left:0;width:100%;height:100%;z-index:99997;cursor:grabbing;';
+        document.body.appendChild(overlay);
+        const onMouseMove = (ev) => {
+            if (!inspectorEl)
+                return;
+            inspectorEl.style.left = ev.clientX - dragOffsetX + 'px';
+            inspectorEl.style.top = ev.clientY - dragOffsetY + 'px';
+            inspectorEl.style.right = 'auto';
+            inspectorEl.style.bottom = 'auto';
+        };
+        const onMouseUp = () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+            header.style.cursor = 'grab';
+            overlay?.remove();
+            overlay = null;
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    });
+    const pre = document.createElement('pre');
+    pre.style.cssText = 'margin:0;padding:10px;white-space:pre-wrap;word-break:break-all;';
+    inspectorEl.appendChild(pre);
+    document.body.appendChild(inspectorEl);
+    const update = () => {
+        const snap = getter();
+        if (!snap) {
+            pre.textContent = '(no state)';
+            return;
+        }
+        pre.innerHTML = syntaxHighlight(snap.state);
+    };
+    update();
+    inspectorTimer = setInterval(update, 200);
+}
+function closeInspector() {
+    if (inspectorTimer) {
+        clearInterval(inspectorTimer);
+        inspectorTimer = null;
+    }
+    if (inspectorEl) {
+        inspectorEl.remove();
+        inspectorEl = null;
+    }
+}
+function syntaxHighlight(obj) {
+    const json = JSON.stringify(obj, null, 2);
+    return json
+        .replace(/("(?:\\.|[^"\\])*")\s*:/g, '<span style="color:#81ecec">$1</span>:')
+        .replace(/:\s*("(?:\\.|[^"\\])*")/g, ': <span style="color:#ffeaa7">$1</span>')
+        .replace(/:\s*(\d+\.?\d*)/g, ': <span style="color:#fd79a8">$1</span>')
+        .replace(/:\s*(true|false)/g, ': <span style="color:#a29bfe">$1</span>')
+        .replace(/:\s*(null)/g, ': <span style="color:#636e72">$1</span>');
+}