@scenetest/dashboard 0.11.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Michael Snook
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,64 @@
+# @scenetest/dashboard
+
+The scenetest dashboard as a mountable widget. The same Preact UI renders the
+live run in dev (inside the Vite plugin's `/__scenetest` page) and in
+scenetest-cloud (a Worker-served page) — the host supplies a DOM element and a
+transport adapter, nothing else.
+
+```ts
+import { mountDashboard, createDevTransport } from '@scenetest/dashboard'
+
+const handle = mountDashboard(document.getElementById('root'), {
+  transport: createDevTransport(),
+})
+// later: handle.unmount()
+```
+
+The widget renders into a **shadow root** with its own styles and fonts, so it
+drops into any host without leaking styles in either direction and without the
+host using Preact.
+
+## Transport adapter
+
+The only thing that differs between dev and cloud. The widget calls the
+adapter to fetch a snapshot and subscribe to live events, and pushes user
+actions back as protocol commands:
+
+```ts
+interface Transport {
+  fetchState(): Promise<RunEvent[]>
+  subscribe(onEvent: (e: RunEvent) => void, onStatus?: (s: ConnectionStatus) => void): () => void
+  sendCommand(command: Command): Promise<void>
+}
+```
+
+Events and commands are the `@scenetest/protocol` vocabulary. `createDevTransport()`
+speaks to the Vite middleware (fetch + SSE); a cloud adapter speaks to the
+worker (fetch + WebSocket). History may arrive through either `fetchState`
+(snapshot) or the initial `subscribe` burst — the store folds both the same
+way, so a transport picks whichever its backend makes natural (SSE replays the
+buffer through `subscribe`, so the dev adapter's `fetchState` returns empty).
+
+## Theming
+
+The widget's only theming surface is a small set of CSS custom properties,
+passed as `theme` and applied to the shadow host:
+
+```ts
+mountDashboard(el, {
+  transport,
+  theme: { bg: '#0b0d12', accent: '#7c93ff', font: 'IBM Plex Mono, monospace', fontSize: '12px' },
+})
+```
+
+These map to `--st-bg`, `--st-accent`, `--st-font`, `--st-font-size`. Nothing
+else is reachable; they are versioned with the widget, like the wire protocol.
+
+## Store
+
+`mountDashboard` is the entry point, but the event-folding logic is exported
+separately and is DOM-free — useful for tests, SSR, or computing a rollup:
+
+- `foldEvents(events)` / `applyEvent(state, event)` — reduce protocol events into `DashboardState`
+- `initialState()`, `completedSceneCount(state)`, `withConnection(state, status)`
+- `sceneSummary(scene)` — the plain-text "copy failures" summary

package/dist/app.d.ts

@@ -0,0 +1,12 @@
+import type { Scene, Transport } from './types.js';
+/**
+ * The dashboard root. Owns the folded state, drives it from the transport,
+ * and turns header controls into protocol commands. The same component
+ * renders in dev and cloud — only the injected `transport` differs.
+ */
+export declare function Dashboard({ transport }: {
+    transport: Transport;
+}): import("preact").VNode<import("preact").Attributes> | import("preact").VNode<import("preact").Attributes>[];
+/** Build the plain-text "copy failures" summary, matching the original dashboard. */
+export declare function sceneSummary(scene: Scene): string;
+//# sourceMappingURL=app.d.ts.map

package/dist/app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../src/app.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAoC,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAYpF;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,SAAS,CAAA;CAAE,+GAoChE;AAiJD,qFAAqF;AACrF,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CA0BjD"}

package/dist/app.js

@@ -0,0 +1,221 @@
+import { h } from 'preact';
+import { useEffect, useReducer, useState } from 'preact/hooks';
+import htm from 'htm';
+import { applyEvent, completedSceneCount, initialState, withConnection } from './store.js';
+const html = htm.bind(h);
+function reducer(state, action) {
+    return action.kind === 'event'
+        ? applyEvent(state, action.event)
+        : withConnection(state, action.status);
+}
+/**
+ * The dashboard root. Owns the folded state, drives it from the transport,
+ * and turns header controls into protocol commands. The same component
+ * renders in dev and cloud — only the injected `transport` differs.
+ */
+export function Dashboard({ transport }) {
+    const [state, dispatch] = useReducer(reducer, undefined, initialState);
+    useEffect(() => {
+        let alive = true;
+        transport.fetchState().then((events) => {
+            if (!alive)
+                return;
+            for (const event of events)
+                dispatch({ kind: 'event', event });
+        });
+        const unsubscribe = transport.subscribe((event) => dispatch({ kind: 'event', event }), (status) => dispatch({ kind: 'status', status }));
+        return () => {
+            alive = false;
+            unsubscribe();
+        };
+    }, [transport]);
+    const send = (command) => {
+        void transport.sendCommand(command);
+    };
+    return html `
+    <div class="root">
+      ${Header({ state, send })}
+      <main>
+        ${state.scenes.length === 0
+        ? html `<div class="waiting">
+              <h2>Waiting for scene run…</h2>
+              <p>Run <code>scenetest</code> to see the live timeline here.</p>
+            </div>`
+        : state.scenes.map((scene, i) => SceneCard({ scene, index: i, send }))}
+      </main>
+    </div>
+  `;
+}
+function Header({ state, send }) {
+    const [team, setTeam] = useState('');
+    const [, force] = useState(0);
+    const running = state.running;
+    // Tick the elapsed clock while a run is in progress.
+    useEffect(() => {
+        if (!running)
+            return;
+        const id = setInterval(() => force((n) => n + 1), 200);
+        return () => clearInterval(id);
+    }, [running]);
+    const completed = completedSceneCount(state);
+    const elapsed = state.endDurationMs != null
+        ? `${state.endDurationMs}ms`
+        : state.runStartTime
+            ? `${Date.now() - state.runStartTime}ms`
+            : '—';
+    const pct = state.sceneCount > 0 ? Math.round((completed / state.sceneCount) * 100) : 0;
+    const progressClass = state.failCount > 0
+        ? 'progress has-failures'
+        : completed === state.sceneCount && state.sceneCount > 0
+            ? 'progress done'
+            : 'progress';
+    const replay = () => send({ type: 'run:replay', ...(team ? { team } : {}) });
+    return html `
+    <header class=${running ? 'running' : ''}>
+      <h1><span class="logo">S</span> Scenetest Dashboard</h1>
+      <button class="replay-all-btn" disabled=${running} onClick=${replay}>▶ Replay All</button>
+      <label class="team-select-wrap">
+        Team:
+        <select
+          value=${team}
+          onChange=${(e) => setTeam(e.target.value)}
+        >
+          <option value="">all teams</option>
+          ${state.teams.map((t) => html `<option value=${t}>${t}</option>`)}
+        </select>
+      </label>
+      <button onClick=${() => send({ type: 'run:pause' })}>❚❚ Pause</button>
+      <button class="stop-btn" onClick=${() => send({ type: 'run:stop' })}>■ Stop</button>
+      <div class="spacer"></div>
+      <div class="stats">
+        <div class="stat"><span class="label">Scenes:</span><span class="value">${completed}/${state.sceneCount}</span></div>
+        <div class="stat pass"><span class="label">Pass:</span><span class="value">${state.passCount}</span></div>
+        <div class="stat fail"><span class="label">Fail:</span><span class="value">${state.failCount}</span></div>
+        <div class="stat"><span class="label">Time:</span><span class="value">${elapsed}</span></div>
+        <div
+          class=${'conn ' + state.connection}
+          title=${'SSE ' + state.connection}
+        ></div>
+      </div>
+      ${state.sceneCount > 0
+        ? html `<div class=${progressClass}><div class="progress-fill" style=${`width:${pct}%`}></div></div>`
+        : null}
+    </header>
+  `;
+}
+function SceneCard({ scene, index, send, }) {
+    const [copied, setCopied] = useState(false);
+    const statusMark = scene.status === 'completed' ? '✓' : scene.status === 'running' ? '◷' : '✗';
+    const copy = () => {
+        copyToClipboard(sceneSummary(scene));
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1200);
+    };
+    return html `
+    <div class=${'scene ' + (scene.status === 'failed' || scene.status === 'timeout' ? 'failed' : '')}>
+      <div class="scene-head">
+        <span class=${'scene-status ' + scene.status}>${statusMark}</span>
+        <span class="scene-name">${scene.name}</span>
+        ${scene.file ? html `<span class="scene-file">${scene.file}</span>` : null}
+        ${scene.team?.name ? html `<span class="scene-team">${scene.team.name}</span>` : null}
+        ${scene.duration != null ? html `<span class="scene-dur">${scene.duration}ms</span>` : null}
+        <button
+          class=${'copy-btn' + (copied ? ' copied' : '')}
+          title="Copy scene summary"
+          onClick=${copy}
+        >
+          ${copied ? '✓ Copied' : '⧉ Copy'}
+        </button>
+        ${scene.file
+        ? html `<button
+              class="copy-btn"
+              onClick=${() => send({ type: 'run:replay', file: scene.file })}
+            >▶ Replay</button>`
+        : null}
+      </div>
+      <div class="lanes">
+        ${scene.lanes.map((lane) => html `
+            <div class="lane">
+              <span class="lane-actor">${lane.actor}</span>
+              <div class="lane-items">
+                ${lane.items.map((item) => html `
+                    <span class=${'pill ' + item.status} title=${item.error ?? ''}>
+                      ${item.action}${item.target
+        ? html `<span class="tgt"> ${item.target}</span>`
+        : null}
+                    </span>
+                  `)}
+              </div>
+            </div>
+          `)}
+      </div>
+      ${scene.assertions.length > 0
+        ? html `<div class="assertions">
+            ${scene.assertions.map((a) => html `
+                <div class=${'assert ' + (a.result ? 'ok' : 'bad')}>
+                  <span class="mark">${a.result ? '✓' : '✗'}</span>
+                  ${a.actor ? html `<span class="who">[${a.actor}]</span>` : null}
+                  <span>${a.description}</span>
+                </div>
+              `)}
+          </div>`
+        : null}
+      ${scene.error ? html `<div class="scene-error">${scene.error}</div>` : null}
+    </div>
+  `;
+}
+/** Build the plain-text "copy failures" summary, matching the original dashboard. */
+export function sceneSummary(scene) {
+    const lines = [`Scene: ${scene.name}`];
+    if (scene.file)
+        lines.push(`File: ${scene.file}`);
+    if (scene.status)
+        lines.push(`Status: ${scene.status}`);
+    if (scene.duration != null)
+        lines.push(`Duration: ${scene.duration}ms`);
+    const errs = [];
+    for (const lane of scene.lanes) {
+        for (const item of lane.items) {
+            if (item.error) {
+                errs.push(`  ✗ ${item.action}${item.target ? `(${item.target})` : ''} — ${item.error}`);
+            }
+        }
+    }
+    if (scene.error && !errs.some((l) => l.includes(scene.error))) {
+        errs.push(`  ✗ ${scene.error}`);
+    }
+    if (errs.length > 0) {
+        lines.push('', 'Errors:', ...errs);
+    }
+    const failed = scene.assertions.filter((a) => !a.result);
+    if (failed.length > 0) {
+        lines.push('', 'Failed assertions:', ...failed.map((a) => `  ✗ [${a.actor ?? ''}] ${a.description}`));
+    }
+    return lines.join('\n');
+}
+function copyToClipboard(text) {
+    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+        navigator.clipboard.writeText(text).catch(() => fallbackCopy(text));
+    }
+    else {
+        fallbackCopy(text);
+    }
+}
+function fallbackCopy(text) {
+    if (typeof document === 'undefined')
+        return;
+    const ta = document.createElement('textarea');
+    ta.value = text;
+    ta.style.position = 'fixed';
+    ta.style.opacity = '0';
+    document.body.appendChild(ta);
+    ta.select();
+    try {
+        document.execCommand('copy');
+    }
+    catch {
+        /* ignore */
+    }
+    document.body.removeChild(ta);
+}
+//# sourceMappingURL=app.js.map

package/dist/app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../src/app.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAA;AAC1B,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC9D,OAAO,GAAG,MAAM,KAAK,CAAA;AAErB,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAG1F,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;AAIxB,SAAS,OAAO,CAAC,KAAqB,EAAE,MAAc;IACpD,OAAO,MAAM,CAAC,IAAI,KAAK,OAAO;QAC5B,CAAC,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC;QACjC,CAAC,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,CAAA;AAC1C,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,SAAS,EAA4B;IAC/D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,OAAO,EAAE,SAAS,EAAE,YAAY,CAAC,CAAA;IAEtE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,GAAG,IAAI,CAAA;QAChB,SAAS,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;YACrC,IAAI,CAAC,KAAK;gBAAE,OAAM;YAClB,KAAK,MAAM,KAAK,IAAI,MAAM;gBAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAA;QAChE,CAAC,CAAC,CAAA;QACF,MAAM,WAAW,GAAG,SAAS,CAAC,SAAS,CACrC,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAC7C,CAAC,MAAM,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CACjD,CAAA;QACD,OAAO,GAAG,EAAE;YACV,KAAK,GAAG,KAAK,CAAA;YACb,WAAW,EAAE,CAAA;QACf,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,MAAM,IAAI,GAAG,CAAC,OAAgB,EAAE,EAAE;QAChC,KAAK,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;IACrC,CAAC,CAAA;IAED,OAAO,IAAI,CAAA;;QAEL,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;;UAErB,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC;QACzB,CAAC,CAAC,IAAI,CAAA;;;mBAGG;QACT,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;;;GAG7E,CAAA;AACH,CAAC;AAED,SAAS,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAyD;IACpF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IACpC,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC7B,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAA;IAE7B,qDAAqD;IACrD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,OAAM;QACpB,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;QACtD,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,CAAA;IAChC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,MAAM,SAAS,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAA;IAC5C,MAAM,OAAO,GACX,KAAK,CAAC,aAAa,IAAI,IAAI;QACzB,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,IAAI;QAC5B,CAAC,CAAC,KAAK,CAAC,YAAY;YAClB,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC,YAAY,IAAI;YACxC,CAAC,CAAC,GAAG,CAAA;IAEX,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IACvF,MAAM,aAAa,GACjB,KAAK,CAAC,SAAS,GAAG,CAAC;QACjB,CAAC,CAAC,uBAAuB;QACzB,CAAC,CAAC,SAAS,KAAK,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,UAAU,GAAG,CAAC;YACtD,CAAC,CAAC,eAAe;YACjB,CAAC,CAAC,UAAU,CAAA;IAElB,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;IAE5E,OAAO,IAAI,CAAA;oBACO,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;gDAEI,OAAO,YAAY,MAAM;;;;kBAIvD,IAAI;qBACD,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAE,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC;;;YAGrE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC;;;wBAGlD,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;yCAChB,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;;;kFAGS,SAAS,IAAI,KAAK,CAAC,UAAU;qFAC1B,KAAK,CAAC,SAAS;qFACf,KAAK,CAAC,SAAS;gFACpB,OAAO;;kBAErE,OAAO,GAAG,KAAK,CAAC,UAAU;kBAC1B,MAAM,GAAG,KAAK,CAAC,UAAU;;;QAGnC,KAAK,CAAC,UAAU,GAAG,CAAC;QACpB,CAAC,CAAC,IAAI,CAAA,cAAc,aAAa,qCAAqC,SAAS,GAAG,GAAG,eAAe;QACpG,CAAC,CAAC,IAAI;;GAEX,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAC,EACjB,KAAK,EACL,KAAK,EACL,IAAI,GAKL;IACC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,UAAU,GACd,KAAK,CAAC,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAA;IAE7E,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,eAAe,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;QACpC,SAAS,CAAC,IAAI,CAAC,CAAA;QACf,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAA;IAC1C,CAAC,CAAA;IAED,OAAO,IAAI,CAAA;iBACI,QAAQ,GAAG,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;;sBAE/E,eAAe,GAAG,KAAK,CAAC,MAAM,IAAI,UAAU;mCAC/B,KAAK,CAAC,IAAI;UACnC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,4BAA4B,KAAK,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI;UACvE,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,4BAA4B,KAAK,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI;UAClF,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,2BAA2B,KAAK,CAAC,QAAQ,WAAW,CAAC,CAAC,CAAC,IAAI;;kBAEhF,UAAU,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;;oBAEpC,IAAI;;YAEZ,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ;;UAEhC,KAAK,CAAC,IAAI;QACV,CAAC,CAAC,IAAI,CAAA;;wBAEQ,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;+BAC7C;QACrB,CAAC,CAAC,IAAI;;;UAGN,KAAK,CAAC,KAAK,CAAC,GAAG,CACf,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;yCAEiB,IAAI,CAAC,KAAK;;kBAEjC,IAAI,CAAC,KAAK,CAAC,GAAG,CACd,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;kCACE,OAAO,GAAG,IAAI,CAAC,MAAM,UAAU,IAAI,CAAC,KAAK,IAAI,EAAE;wBACzD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM;QACzB,CAAC,CAAC,IAAI,CAAA,sBAAsB,IAAI,CAAC,MAAM,SAAS;QAChD,CAAC,CAAC,IAAI;;mBAEX,CACF;;;WAGN,CACF;;QAED,KAAK,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC;QAC3B,CAAC,CAAC,IAAI,CAAA;cACA,KAAK,CAAC,UAAU,CAAC,GAAG,CACpB,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;6BACI,SAAS,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;uCAC3B,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;oBACvC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI;0BACtD,CAAC,CAAC,WAAW;;eAExB,CACF;iBACI;QACT,CAAC,CAAC,IAAI;QACN,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,4BAA4B,KAAK,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI;;GAE7E,CAAA;AACH,CAAC;AAED,qFAAqF;AACrF,MAAM,UAAU,YAAY,CAAC,KAAY;IACvC,MAAM,KAAK,GAAa,CAAC,UAAU,KAAK,CAAC,IAAI,EAAE,CAAC,CAAA;IAChD,IAAI,KAAK,CAAC,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,KAAK,CAAC,IAAI,EAAE,CAAC,CAAA;IACjD,IAAI,KAAK,CAAC,MAAM;QAAE,KAAK,CAAC,IAAI,CAAC,WAAW,KAAK,CAAC,MAAM,EAAE,CAAC,CAAA;IACvD,IAAI,KAAK,CAAC,QAAQ,IAAI,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,aAAa,KAAK,CAAC,QAAQ,IAAI,CAAC,CAAA;IAEvE,MAAM,IAAI,GAAa,EAAE,CAAA;IACzB,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;QAC/B,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAC9B,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;YACzF,CAAC;QACH,CAAC;IACH,CAAC;IACD,IAAI,KAAK,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAe,CAAC,CAAC,EAAE,CAAC;QACxE,IAAI,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,KAAK,EAAE,CAAC,CAAA;IACjC,CAAC;IACD,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACpB,KAAK,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,CAAA;IACpC,CAAC;IAED,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;IACxD,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACtB,KAAK,CAAC,IAAI,CAAC,EAAE,EAAE,oBAAoB,EAAE,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,KAAK,IAAI,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAA;IACvG,CAAC;IACD,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACzB,CAAC;AAED,SAAS,eAAe,CAAC,IAAY;IACnC,IAAI,OAAO,SAAS,KAAK,WAAW,IAAI,SAAS,CAAC,SAAS,EAAE,SAAS,EAAE,CAAC;QACvE,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAA;IACrE,CAAC;SAAM,CAAC;QACN,YAAY,CAAC,IAAI,CAAC,CAAA;IACpB,CAAC;AACH,CAAC;AAED,SAAS,YAAY,CAAC,IAAY;IAChC,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAM;IAC3C,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;IAC7C,EAAE,CAAC,KAAK,GAAG,IAAI,CAAA;IACf,EAAE,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAA;IAC3B,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAA;IACtB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAA;IAC7B,EAAE,CAAC,MAAM,EAAE,CAAA;IACX,IAAI,CAAC;QACH,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,CAAC;IAAC,MAAM,CAAC;QACP,YAAY;IACd,CAAC;IACD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAA;AAC/B,CAAC"}

package/dist/dev-transport.d.ts

@@ -0,0 +1,22 @@
+import type { Transport } from './types.js';
+export interface DevTransportOptions {
+    /**
+     * Base path the Vite middleware is mounted at. Defaults to `/__scenetest`.
+     * The transport talks to `<base>/events` (SSE) and the command endpoints
+     * under `<base>`.
+     */
+    base?: string;
+}
+/**
+ * Transport adapter for dev mode: the Vite middleware, same-origin.
+ *
+ * - Live events arrive over the SSE stream at `<base>/events`, which also
+ *   replays the buffered events for the current run on connect — so history
+ *   comes through `subscribe`, and `fetchState` returns empty.
+ * - Commands map onto the middleware's existing endpoints:
+ *   `run:replay` → POST `<base>/replay` (`{ file?, team? }`),
+ *   `run:stop` → POST `<base>/stop`,
+ *   `run:pause`/`run:resume` → POST `<base>/pause` (a toggle the server owns).
+ */
+export declare function createDevTransport(options?: DevTransportOptions): Transport;
+//# sourceMappingURL=dev-transport.d.ts.map

package/dist/dev-transport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-transport.d.ts","sourceRoot":"","sources":["../src/dev-transport.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAoB,SAAS,EAAE,MAAM,YAAY,CAAA;AAE7D,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,GAAE,mBAAwB,GAAG,SAAS,CA0D/E"}

package/dist/dev-transport.js

@@ -0,0 +1,69 @@
+import { isEventShaped } from '@scenetest/protocol';
+/**
+ * Transport adapter for dev mode: the Vite middleware, same-origin.
+ *
+ * - Live events arrive over the SSE stream at `<base>/events`, which also
+ *   replays the buffered events for the current run on connect — so history
+ *   comes through `subscribe`, and `fetchState` returns empty.
+ * - Commands map onto the middleware's existing endpoints:
+ *   `run:replay` → POST `<base>/replay` (`{ file?, team? }`),
+ *   `run:stop` → POST `<base>/stop`,
+ *   `run:pause`/`run:resume` → POST `<base>/pause` (a toggle the server owns).
+ */
+export function createDevTransport(options = {}) {
+    const base = (options.base ?? '/__scenetest').replace(/\/+$/, '');
+    return {
+        // SSE replays the run buffer on connect, so there is no separate snapshot.
+        async fetchState() {
+            return [];
+        },
+        subscribe(onEvent, onStatus) {
+            const source = new EventSource(`${base}/events`);
+            const status = (s) => onStatus?.(s);
+            status('connecting');
+            source.onopen = () => status('connected');
+            source.onerror = () => status('disconnected');
+            source.onmessage = (e) => {
+                let parsed;
+                try {
+                    parsed = JSON.parse(e.data);
+                }
+                catch {
+                    return;
+                }
+                // Envelope check only — render event types newer than this widget
+                // the producer might send, rather than dropping them.
+                if (isEventShaped(parsed))
+                    onEvent(parsed);
+            };
+            return () => source.close();
+        },
+        async sendCommand(command) {
+            const post = (path, body) => fetch(`${base}${path}`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: body === undefined ? undefined : JSON.stringify(body),
+            });
+            switch (command.type) {
+                case 'run:replay': {
+                    const body = {};
+                    if (command.file)
+                        body.file = command.file;
+                    if (command.team)
+                        body.team = command.team;
+                    await post('/replay', body);
+                    return;
+                }
+                case 'run:stop':
+                    await post('/stop');
+                    return;
+                // The dev server exposes pause as a single toggle; both map to it.
+                case 'run:pause':
+                case 'run:resume':
+                    await post('/pause');
+                    return;
+            }
+        },
+    };
+}
+//# sourceMappingURL=dev-transport.js.map

package/dist/dev-transport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-transport.js","sourceRoot":"","sources":["../src/dev-transport.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAanD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,kBAAkB,CAAC,UAA+B,EAAE;IAClE,MAAM,IAAI,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,cAAc,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;IAEjE,OAAO;QACL,2EAA2E;QAC3E,KAAK,CAAC,UAAU;YACd,OAAO,EAAE,CAAA;QACX,CAAC;QAED,SAAS,CAAC,OAAO,EAAE,QAAQ;YACzB,MAAM,MAAM,GAAG,IAAI,WAAW,CAAC,GAAG,IAAI,SAAS,CAAC,CAAA;YAChD,MAAM,MAAM,GAAG,CAAC,CAAmB,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAA;YACrD,MAAM,CAAC,YAAY,CAAC,CAAA;YAEpB,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,CAAA;YACzC,MAAM,CAAC,OAAO,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,CAAA;YAC7C,MAAM,CAAC,SAAS,GAAG,CAAC,CAAe,EAAE,EAAE;gBACrC,IAAI,MAAe,CAAA;gBACnB,IAAI,CAAC;oBACH,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA;gBAC7B,CAAC;gBAAC,MAAM,CAAC;oBACP,OAAM;gBACR,CAAC;gBACD,kEAAkE;gBAClE,sDAAsD;gBACtD,IAAI,aAAa,CAAC,MAAM,CAAC;oBAAE,OAAO,CAAC,MAAkB,CAAC,CAAA;YACxD,CAAC,CAAA;YAED,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;QAC7B,CAAC;QAED,KAAK,CAAC,WAAW,CAAC,OAAgB;YAChC,MAAM,IAAI,GAAG,CAAC,IAAY,EAAE,IAAc,EAAE,EAAE,CAC5C,KAAK,CAAC,GAAG,IAAI,GAAG,IAAI,EAAE,EAAE;gBACtB,MAAM,EAAE,MAAM;gBACd,OAAO,EAAE,EAAE,cAAc,EAAE,kBAAkB,EAAE;gBAC/C,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;aAC5D,CAAC,CAAA;YAEJ,QAAQ,OAAO,CAAC,IAAI,EAAE,CAAC;gBACrB,KAAK,YAAY,CAAC,CAAC,CAAC;oBAClB,MAAM,IAAI,GAAqC,EAAE,CAAA;oBACjD,IAAI,OAAO,CAAC,IAAI;wBAAE,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAA;oBAC1C,IAAI,OAAO,CAAC,IAAI;wBAAE,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAA;oBAC1C,MAAM,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAA;oBAC3B,OAAM;gBACR,CAAC;gBACD,KAAK,UAAU;oBACb,MAAM,IAAI,CAAC,OAAO,CAAC,CAAA;oBACnB,OAAM;gBACR,mEAAmE;gBACnE,KAAK,WAAW,CAAC;gBACjB,KAAK,YAAY;oBACf,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAA;oBACpB,OAAM;YACV,CAAC;QACH,CAAC;KACF,CAAA;AACH,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { mountDashboard } from './mount.js';
+export { createDevTransport, type DevTransportOptions } from './dev-transport.js';
+export { applyEvent, foldEvents, initialState, withConnection, completedSceneCount, } from './store.js';
+export { sceneSummary } from './app.js';
+export type { Transport, ConnectionStatus, DashboardState, DashboardTheme, DashboardHandle, MountOptions, Scene, Lane, ActionItem, AssertionRow, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,EAAE,kBAAkB,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,EACL,UAAU,EACV,UAAU,EACV,YAAY,EACZ,cAAc,EACd,mBAAmB,GACpB,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,YAAY,EACV,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,eAAe,EACf,YAAY,EACZ,KAAK,EACL,IAAI,EACJ,UAAU,EACV,YAAY,GACb,MAAM,YAAY,CAAA"}

package/dist/index.js

@@ -0,0 +1,5 @@
+export { mountDashboard } from './mount.js';
+export { createDevTransport } from './dev-transport.js';
+export { applyEvent, foldEvents, initialState, withConnection, completedSceneCount, } from './store.js';
+export { sceneSummary } from './app.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,EAAE,kBAAkB,EAA4B,MAAM,oBAAoB,CAAA;AACjF,OAAO,EACL,UAAU,EACV,UAAU,EACV,YAAY,EACZ,cAAc,EACd,mBAAmB,GACpB,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA"}

package/dist/mount.d.ts

@@ -0,0 +1,14 @@
+import type { DashboardHandle, MountOptions } from './types.js';
+/**
+ * Mount the dashboard widget into `element`. The widget renders into a shadow
+ * root with its own styles and fonts, so it can drop into any host — the
+ * `/__scenetest` page, a worker-served page, a docs island — without leaking
+ * styles in either direction and without the host needing to use Preact.
+ *
+ * The host supplies only a transport adapter (the dev/cloud seam) and an
+ * optional theme; everything else is internal. Returns a handle whose
+ * `unmount()` tears down Preact, the transport subscription, and the shadow
+ * content.
+ */
+export declare function mountDashboard(element: HTMLElement, options: MountOptions): DashboardHandle;
+//# sourceMappingURL=mount.d.ts.map

package/dist/mount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mount.d.ts","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAkB,YAAY,EAAE,MAAM,YAAY,CAAA;AAE/E;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,GAAG,eAAe,CAqB3F"}

package/dist/mount.js

@@ -0,0 +1,50 @@
+import { h, render } from 'preact';
+import { Dashboard } from './app.js';
+import { STYLES } from './styles.js';
+/**
+ * Mount the dashboard widget into `element`. The widget renders into a shadow
+ * root with its own styles and fonts, so it can drop into any host — the
+ * `/__scenetest` page, a worker-served page, a docs island — without leaking
+ * styles in either direction and without the host needing to use Preact.
+ *
+ * The host supplies only a transport adapter (the dev/cloud seam) and an
+ * optional theme; everything else is internal. Returns a handle whose
+ * `unmount()` tears down Preact, the transport subscription, and the shadow
+ * content.
+ */
+export function mountDashboard(element, options) {
+    const root = element.shadowRoot ?? element.attachShadow({ mode: 'open' });
+    root.innerHTML = '';
+    const style = document.createElement('style');
+    style.textContent = STYLES;
+    root.appendChild(style);
+    if (options.theme)
+        applyTheme(root, options.theme);
+    const container = document.createElement('div');
+    root.appendChild(container);
+    render(h(Dashboard, { transport: options.transport }), container);
+    return {
+        unmount() {
+            render(null, container);
+            root.innerHTML = '';
+        },
+    };
+}
+/**
+ * Apply the small `--st-*` theming surface to the shadow host. A
+ * `:host { ... }` block can't be set imperatively, so the custom properties
+ * are written onto the host element's inline style, where `:host` rules in the
+ * stylesheet pick them up as overrides.
+ */
+function applyTheme(root, theme) {
+    const host = root.host;
+    if (theme.bg)
+        host.style.setProperty('--st-bg', theme.bg);
+    if (theme.accent)
+        host.style.setProperty('--st-accent', theme.accent);
+    if (theme.font)
+        host.style.setProperty('--st-font', theme.font);
+    if (theme.fontSize)
+        host.style.setProperty('--st-font-size', theme.fontSize);
+}
+//# sourceMappingURL=mount.js.map

package/dist/mount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mount.js","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAGpC;;;;;;;;;;GAUG;AACH,MAAM,UAAU,cAAc,CAAC,OAAoB,EAAE,OAAqB;IACxE,MAAM,IAAI,GAAG,OAAO,CAAC,UAAU,IAAI,OAAO,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAA;IACzE,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;IAEnB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;IAC7C,KAAK,CAAC,WAAW,GAAG,MAAM,CAAA;IAC1B,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;IAEvB,IAAI,OAAO,CAAC,KAAK;QAAE,UAAU,CAAC,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IAElD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAC/C,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAA;IAE3B,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,CAAA;IAEjE,OAAO;QACL,OAAO;YACL,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;YACvB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;QACrB,CAAC;KACF,CAAA;AACH,CAAC;AAED;;;;;GAKG;AACH,SAAS,UAAU,CAAC,IAAgB,EAAE,KAAqB;IACzD,MAAM,IAAI,GAAG,IAAI,CAAC,IAAmB,CAAA;IACrC,IAAI,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,CAAA;IACzD,IAAI,KAAK,CAAC,MAAM;QAAE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IACrE,IAAI,KAAK,CAAC,IAAI;QAAE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;IAC/D,IAAI,KAAK,CAAC,QAAQ;QAAE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAA;AAC9E,CAAC"}

package/dist/store.d.ts

@@ -0,0 +1,19 @@
+import type { RunEvent } from '@scenetest/protocol';
+import type { ConnectionStatus, DashboardState } from './types.js';
+/** The empty state, before any events. */
+export declare function initialState(): DashboardState;
+/**
+ * Fold one protocol event into the state, returning a new state object (and
+ * new objects for the scenes/scene that changed) so Preact re-renders. This
+ * is the same reduction the original inline dashboard did imperatively, made
+ * pure. Unknown event types are ignored — a newer producer can add events
+ * without breaking an older widget.
+ */
+export declare function applyEvent(state: DashboardState, event: RunEvent): DashboardState;
+/** Fold a snapshot of events into a fresh state, in order. */
+export declare function foldEvents(events: RunEvent[]): DashboardState;
+/** Return a new state with the connection liveness updated. */
+export declare function withConnection(state: DashboardState, connection: ConnectionStatus): DashboardState;
+/** Number of scenes that have finished (not currently running). */
+export declare function completedSceneCount(state: DashboardState): number;
+//# sourceMappingURL=store.d.ts.map

package/dist/store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../src/store.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAe,MAAM,YAAY,CAAA;AAE/E,0CAA0C;AAC1C,wBAAgB,YAAY,IAAI,cAAc,CAa7C;AAqBD;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,QAAQ,GAAG,cAAc,CA2GjF;AAYD,8DAA8D;AAC9D,wBAAgB,UAAU,CAAC,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,CAE7D;AAED,+DAA+D;AAC/D,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,gBAAgB,GAAG,cAAc,CAElG;AAED,mEAAmE;AACnE,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,GAAG,MAAM,CAEjE"}

package/dist/store.js

@@ -0,0 +1,164 @@
+/** The empty state, before any events. */
+export function initialState() {
+    return {
+        scenes: [],
+        currentSceneIndex: null,
+        runStartTime: null,
+        passCount: 0,
+        failCount: 0,
+        sceneCount: 0,
+        teams: [],
+        running: false,
+        endDurationMs: null,
+        connection: 'connecting',
+    };
+}
+function cloneScene(scene) {
+    return {
+        ...scene,
+        actors: scene.actors.slice(),
+        lanes: scene.lanes.map((lane) => ({ actor: lane.actor, items: lane.items.slice() })),
+        assertions: scene.assertions.slice(),
+    };
+}
+function laneFor(scene, actor) {
+    let lane = scene.lanes.find((l) => l.actor === actor);
+    if (!lane) {
+        lane = { actor, items: [] };
+        scene.lanes.push(lane);
+        if (!scene.actors.includes(actor))
+            scene.actors.push(actor);
+    }
+    return lane;
+}
+/**
+ * Fold one protocol event into the state, returning a new state object (and
+ * new objects for the scenes/scene that changed) so Preact re-renders. This
+ * is the same reduction the original inline dashboard did imperatively, made
+ * pure. Unknown event types are ignored — a newer producer can add events
+ * without breaking an older widget.
+ */
+export function applyEvent(state, event) {
+    switch (event.type) {
+        case 'run:start':
+            return {
+                ...initialState(),
+                connection: state.connection,
+                runStartTime: event.timestamp,
+                sceneCount: event.sceneCount,
+                running: true,
+            };
+        case 'scene:start': {
+            const scene = {
+                name: event.name,
+                file: event.file,
+                actors: (event.actors ?? []).slice(),
+                lanes: (event.actors ?? []).map((actor) => ({ actor, items: [] })),
+                assertions: [],
+                startTime: event.timestamp,
+                endTime: null,
+                status: 'running',
+                team: event.team ?? {},
+                teamIndex: event.teamIndex ?? 0,
+            };
+            const scenes = state.scenes.concat(scene);
+            const teamName = scene.team?.name;
+            const teams = teamName && !state.teams.includes(teamName) ? state.teams.concat(teamName) : state.teams;
+            return { ...state, scenes, currentSceneIndex: scenes.length - 1, teams };
+        }
+        case 'action:start': {
+            return updateCurrentScene(state, (scene) => {
+                const lane = laneFor(scene, event.actor);
+                lane.items.push({
+                    action: event.action,
+                    target: event.target,
+                    startTime: event.timestamp,
+                    endTime: null,
+                    duration: null,
+                    error: null,
+                    status: 'running',
+                });
+            });
+        }
+        case 'action:end': {
+            return updateCurrentScene(state, (scene) => {
+                const lane = scene.lanes.find((l) => l.actor === event.actor);
+                if (!lane)
+                    return;
+                for (let i = lane.items.length - 1; i >= 0; i--) {
+                    const item = lane.items[i];
+                    if (item.status === 'running' && item.action === event.action) {
+                        item.endTime = event.timestamp;
+                        item.duration = event.duration;
+                        item.error = event.error ?? null;
+                        item.status = event.error ? 'error' : event.duration > 500 ? 'slow' : 'success';
+                        break;
+                    }
+                }
+            });
+        }
+        case 'assertion': {
+            return updateCurrentScene(state, (scene) => {
+                scene.assertions.push({
+                    actor: event.actor,
+                    description: event.description,
+                    result: event.result,
+                    timestamp: event.timestamp,
+                });
+            });
+        }
+        case 'scene:end': {
+            if (state.currentSceneIndex == null)
+                return state;
+            const next = updateCurrentScene(state, (scene) => {
+                scene.endTime = event.timestamp;
+                scene.status = event.status;
+                scene.duration = event.duration;
+                scene.error = event.error;
+            });
+            const passed = event.status === 'completed';
+            return {
+                ...next,
+                currentSceneIndex: null,
+                passCount: next.passCount + (passed ? 1 : 0),
+                failCount: next.failCount + (passed ? 0 : 1),
+            };
+        }
+        case 'run:progress':
+            return { ...state, progress: { pct: event.pct, failing: event.failing, flaky: event.flaky } };
+        case 'run:end':
+            return {
+                ...state,
+                running: false,
+                sceneCount: event.summary?.scenes ?? state.sceneCount,
+                passCount: event.summary?.completed ?? state.passCount,
+                failCount: event.summary?.failed ?? state.failCount,
+                endDurationMs: event.duration,
+            };
+        default:
+            return state;
+    }
+}
+function updateCurrentScene(state, mutate) {
+    const idx = state.currentSceneIndex;
+    if (idx == null || idx < 0 || idx >= state.scenes.length)
+        return state;
+    const scene = cloneScene(state.scenes[idx]);
+    mutate(scene);
+    const scenes = state.scenes.slice();
+    scenes[idx] = scene;
+    return { ...state, scenes };
+}
+/** Fold a snapshot of events into a fresh state, in order. */
+export function foldEvents(events) {
+    return events.reduce(applyEvent, initialState());
+}
+/** Return a new state with the connection liveness updated. */
+export function withConnection(state, connection) {
+    return { ...state, connection };
+}
+/** Number of scenes that have finished (not currently running). */
+export function completedSceneCount(state) {
+    return state.scenes.filter((s) => s.status !== 'running').length;
+}
+//# sourceMappingURL=store.js.map

package/dist/store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.js","sourceRoot":"","sources":["../src/store.ts"],"names":[],"mappings":"AAGA,0CAA0C;AAC1C,MAAM,UAAU,YAAY;IAC1B,OAAO;QACL,MAAM,EAAE,EAAE;QACV,iBAAiB,EAAE,IAAI;QACvB,YAAY,EAAE,IAAI;QAClB,SAAS,EAAE,CAAC;QACZ,SAAS,EAAE,CAAC;QACZ,UAAU,EAAE,CAAC;QACb,KAAK,EAAE,EAAE;QACT,OAAO,EAAE,KAAK;QACd,aAAa,EAAE,IAAI;QACnB,UAAU,EAAE,YAAY;KACzB,CAAA;AACH,CAAC;AAED,SAAS,UAAU,CAAC,KAAY;IAC9B,OAAO;QACL,GAAG,KAAK;QACR,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE;QAC5B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACpF,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK,EAAE;KACrC,CAAA;AACH,CAAC;AAED,SAAS,OAAO,CAAC,KAAY,EAAE,KAAa;IAC1C,IAAI,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAA;IACrD,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,IAAI,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAAA;QAC3B,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACtB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;YAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC7D,CAAC;IACD,OAAO,IAAI,CAAA;AACb,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,UAAU,CAAC,KAAqB,EAAE,KAAe;IAC/D,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;QACnB,KAAK,WAAW;YACd,OAAO;gBACL,GAAG,YAAY,EAAE;gBACjB,UAAU,EAAE,KAAK,CAAC,UAAU;gBAC5B,YAAY,EAAE,KAAK,CAAC,SAAS;gBAC7B,UAAU,EAAE,KAAK,CAAC,UAAU;gBAC5B,OAAO,EAAE,IAAI;aACd,CAAA;QAEH,KAAK,aAAa,CAAC,CAAC,CAAC;YACnB,MAAM,KAAK,GAAU;gBACnB,IAAI,EAAE,KAAK,CAAC,IAAI;gBAChB,IAAI,EAAE,KAAK,CAAC,IAAI;gBAChB,MAAM,EAAE,CAAC,KAAK,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,KAAK,EAAE;gBACpC,KAAK,EAAE,CAAC,KAAK,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;gBAClE,UAAU,EAAE,EAAE;gBACd,SAAS,EAAE,KAAK,CAAC,SAAS;gBAC1B,OAAO,EAAE,IAAI;gBACb,MAAM,EAAE,SAAS;gBACjB,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,EAAE;gBACtB,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,CAAC;aAChC,CAAA;YACD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;YACzC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,EAAE,IAAI,CAAA;YACjC,MAAM,KAAK,GACT,QAAQ,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAA;YAC1F,OAAO,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,CAAA;QAC1E,CAAC;QAED,KAAK,cAAc,CAAC,CAAC,CAAC;YACpB,OAAO,kBAAkB,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE;gBACzC,MAAM,IAAI,GAAG,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;gBACxC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;oBACd,MAAM,EAAE,KAAK,CAAC,MAAM;oBACpB,MAAM,EAAE,KAAK,CAAC,MAAM;oBACpB,SAAS,EAAE,KAAK,CAAC,SAAS;oBAC1B,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,IAAI;oBACX,MAAM,EAAE,SAAS;iBAClB,CAAC,CAAA;YACJ,CAAC,CAAC,CAAA;QACJ,CAAC;QAED,KAAK,YAAY,CAAC,CAAC,CAAC;YAClB,OAAO,kBAAkB,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE;gBACzC,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,CAAA;gBAC7D,IAAI,CAAC,IAAI;oBAAE,OAAM;gBACjB,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;oBAChD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;oBAC1B,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,CAAC,MAAM,EAAE,CAAC;wBAC9D,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,SAAS,CAAA;wBAC9B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAA;wBAC9B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,IAAI,CAAA;wBAChC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAA;wBAC/E,MAAK;oBACP,CAAC;gBACH,CAAC;YACH,CAAC,CAAC,CAAA;QACJ,CAAC;QAED,KAAK,WAAW,CAAC,CAAC,CAAC;YACjB,OAAO,kBAAkB,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE;gBACzC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;oBACpB,KAAK,EAAE,KAAK,CAAC,KAAK;oBAClB,WAAW,EAAE,KAAK,CAAC,WAAW;oBAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;oBACpB,SAAS,EAAE,KAAK,CAAC,SAAS;iBAC3B,CAAC,CAAA;YACJ,CAAC,CAAC,CAAA;QACJ,CAAC;QAED,KAAK,WAAW,CAAC,CAAC,CAAC;YACjB,IAAI,KAAK,CAAC,iBAAiB,IAAI,IAAI;gBAAE,OAAO,KAAK,CAAA;YACjD,MAAM,IAAI,GAAG,kBAAkB,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE;gBAC/C,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,SAAS,CAAA;gBAC/B,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAA;gBAC3B,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAA;gBAC/B,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAA;YAC3B,CAAC,CAAC,CAAA;YACF,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,KAAK,WAAW,CAAA;YAC3C,OAAO;gBACL,GAAG,IAAI;gBACP,iBAAiB,EAAE,IAAI;gBACvB,SAAS,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC5C,SAAS,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;aAC7C,CAAA;QACH,CAAC;QAED,KAAK,cAAc;YACjB,OAAO,EAAE,GAAG,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,CAAA;QAE/F,KAAK,SAAS;YACZ,OAAO;gBACL,GAAG,KAAK;gBACR,OAAO,EAAE,KAAK;gBACd,UAAU,EAAE,KAAK,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,CAAC,UAAU;gBACrD,SAAS,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,IAAI,KAAK,CAAC,SAAS;gBACtD,SAAS,EAAE,KAAK,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,CAAC,SAAS;gBACnD,aAAa,EAAE,KAAK,CAAC,QAAQ;aAC9B,CAAA;QAEH;YACE,OAAO,KAAK,CAAA;IAChB,CAAC;AACH,CAAC;AAED,SAAS,kBAAkB,CAAC,KAAqB,EAAE,MAA8B;IAC/E,MAAM,GAAG,GAAG,KAAK,CAAC,iBAAiB,CAAA;IACnC,IAAI,GAAG,IAAI,IAAI,IAAI,GAAG,GAAG,CAAC,IAAI,GAAG,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM;QAAE,OAAO,KAAK,CAAA;IACtE,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAA;IAC3C,MAAM,CAAC,KAAK,CAAC,CAAA;IACb,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;IACnC,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;IACnB,OAAO,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,CAAA;AAC7B,CAAC;AAED,8DAA8D;AAC9D,MAAM,UAAU,UAAU,CAAC,MAAkB;IAC3C,OAAO,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE,YAAY,EAAE,CAAC,CAAA;AAClD,CAAC;AAED,+DAA+D;AAC/D,MAAM,UAAU,cAAc,CAAC,KAAqB,EAAE,UAA4B;IAChF,OAAO,EAAE,GAAG,KAAK,EAAE,UAAU,EAAE,CAAA;AACjC,CAAC;AAED,mEAAmE;AACnE,MAAM,UAAU,mBAAmB,CAAC,KAAqB;IACvD,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,MAAM,CAAA;AAClE,CAAC"}

package/dist/styles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The widget's stylesheet, injected into its shadow root. The only theming
+ * surface is the small set of `--st-*` custom properties on `:host`; every
+ * internal color derives from them or from a fixed terminal palette. A host
+ * may set `--st-bg`, `--st-accent`, `--st-font`, `--st-font-size` (and nothing
+ * else) to retheme the pane. These are versioned with the widget, like the
+ * wire protocol.
+ */
+export declare const STYLES = "\n:host {\n  /* \u2500\u2500 Theming surface (host may override these four) \u2500\u2500 */\n  --st-bg: #0f1117;\n  --st-accent: #3b82f6;\n  --st-font: 'SF Mono', 'Cascadia Code', 'Fira Code', ui-monospace, monospace;\n  --st-font-size: 13px;\n\n  /* \u2500\u2500 Internal palette (derived; not a public surface) \u2500\u2500 */\n  --bg: var(--st-bg);\n  --bg2: #1a1d27;\n  --bg3: #252833;\n  --border: #2e3140;\n  --text: #e1e4ed;\n  --text2: #8b8fa3;\n  --green: #22c55e;\n  --red: #ef4444;\n  --amber: #f59e0b;\n  --blue: var(--st-accent);\n\n  display: block;\n  font-family: var(--st-font);\n  font-size: var(--st-font-size);\n  color: var(--text);\n  background: var(--bg);\n}\n\n* { margin: 0; padding: 0; box-sizing: border-box; }\n\n.root { min-height: 100%; background: var(--bg); }\n\nheader {\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--border);\n  background: var(--bg2);\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  flex-wrap: wrap;\n}\nheader.running .logo { animation: pulse 1.2s ease-in-out infinite; }\n\nh1 { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }\n.logo {\n  display: inline-flex; align-items: center; justify-content: center;\n  width: 22px; height: 22px; border-radius: 5px;\n  background: var(--blue); color: #fff; font-weight: 700;\n}\n\nbutton {\n  font-family: inherit; font-size: 12px; cursor: pointer;\n  border: 1px solid var(--border); background: var(--bg3); color: var(--text);\n  padding: 5px 10px; border-radius: 5px; display: inline-flex; align-items: center; gap: 6px;\n}\nbutton:hover:not(:disabled) { border-color: var(--blue); }\nbutton:disabled { opacity: 0.5; cursor: default; }\n.replay-all-btn { color: var(--green); }\n.stop-btn { color: var(--red); }\n\n.team-select-wrap { font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 6px; }\nselect {\n  font-family: inherit; font-size: 12px; background: var(--bg3); color: var(--text);\n  border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px;\n}\n\n.spacer { flex: 1; }\n\n.stats { display: flex; align-items: center; gap: 14px; font-size: 12px; }\n.stat { display: flex; align-items: center; gap: 5px; }\n.stat .label { color: var(--text2); }\n.stat .value { font-weight: 600; }\n.stat.pass .value { color: var(--green); }\n.stat.fail .value { color: var(--red); }\n\n.conn { width: 9px; height: 9px; border-radius: 50%; background: var(--text2); }\n.conn.connected { background: var(--green); }\n.conn.disconnected { background: var(--red); }\n\n.progress { flex-basis: 100%; height: 3px; background: var(--bg3); border-radius: 2px; overflow: hidden; }\n.progress-fill { height: 100%; width: 0; background: var(--blue); transition: width 0.2s ease; }\n.progress.done .progress-fill { background: var(--green); }\n.progress.has-failures .progress-fill { background: var(--red); }\n\nmain { padding: 16px 20px; }\n.waiting { text-align: center; color: var(--text2); padding: 60px 20px; }\n.waiting h2 { font-size: 16px; font-weight: 500; margin-bottom: 8px; color: var(--text); }\n.waiting code { background: var(--bg3); padding: 2px 6px; border-radius: 4px; }\n\n.scene {\n  border: 1px solid var(--border); border-radius: 8px; background: var(--bg2);\n  margin-bottom: 14px; overflow: hidden;\n}\n.scene.failed { border-color: var(--red); }\n.scene-head {\n  display: flex; align-items: center; gap: 10px; padding: 10px 14px;\n  border-bottom: 1px solid var(--border); background: var(--bg3);\n}\n.scene-status { font-weight: 700; }\n.scene-status.completed { color: var(--green); }\n.scene-status.failed, .scene-status.timeout { color: var(--red); }\n.scene-status.running { color: var(--amber); }\n.scene-name { font-weight: 600; }\n.scene-file { color: var(--text2); font-size: 11px; }\n.scene-team {\n  font-size: 11px; color: var(--blue); border: 1px solid var(--border);\n  padding: 1px 6px; border-radius: 10px;\n}\n.scene-dur { color: var(--text2); font-size: 11px; margin-left: auto; }\n.copy-btn { padding: 3px 7px; font-size: 11px; }\n.copy-btn.copied { color: var(--green); border-color: var(--green); }\n\n.lanes { padding: 8px 14px; display: flex; flex-direction: column; gap: 6px; }\n.lane { display: flex; align-items: flex-start; gap: 8px; }\n.lane-actor { color: var(--text2); min-width: 90px; font-size: 11px; padding-top: 3px; }\n.lane-items { display: flex; flex-wrap: wrap; gap: 4px; }\n.pill {\n  font-size: 11px; padding: 2px 7px; border-radius: 4px;\n  border: 1px solid var(--border); background: var(--bg3); color: var(--text);\n}\n.pill.running { border-color: var(--amber); color: var(--amber); }\n.pill.success { border-color: var(--green); }\n.pill.slow { border-color: var(--amber); }\n.pill.error { border-color: var(--red); color: var(--red); }\n.pill .tgt { color: var(--text2); }\n\n.assertions { padding: 0 14px 10px; display: flex; flex-direction: column; gap: 3px; }\n.assert { font-size: 12px; display: flex; gap: 6px; align-items: baseline; }\n.assert .mark { font-weight: 700; }\n.assert.ok .mark { color: var(--green); }\n.assert.bad .mark { color: var(--red); }\n.assert .who { color: var(--text2); }\n\n.scene-error {\n  margin: 0 14px 12px; padding: 8px 10px; border-radius: 6px;\n  background: rgba(239, 68, 68, 0.1); border: 1px solid var(--red);\n  color: var(--red); font-size: 12px; white-space: pre-wrap; cursor: pointer;\n}\n\n@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }\n";
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,o4KA8IlB,CAAA"}

package/dist/styles.js

@@ -0,0 +1,152 @@
+/**
+ * The widget's stylesheet, injected into its shadow root. The only theming
+ * surface is the small set of `--st-*` custom properties on `:host`; every
+ * internal color derives from them or from a fixed terminal palette. A host
+ * may set `--st-bg`, `--st-accent`, `--st-font`, `--st-font-size` (and nothing
+ * else) to retheme the pane. These are versioned with the widget, like the
+ * wire protocol.
+ */
+export const STYLES = `
+:host {
+  /* ── Theming surface (host may override these four) ── */
+  --st-bg: #0f1117;
+  --st-accent: #3b82f6;
+  --st-font: 'SF Mono', 'Cascadia Code', 'Fira Code', ui-monospace, monospace;
+  --st-font-size: 13px;
+
+  /* ── Internal palette (derived; not a public surface) ── */
+  --bg: var(--st-bg);
+  --bg2: #1a1d27;
+  --bg3: #252833;
+  --border: #2e3140;
+  --text: #e1e4ed;
+  --text2: #8b8fa3;
+  --green: #22c55e;
+  --red: #ef4444;
+  --amber: #f59e0b;
+  --blue: var(--st-accent);
+
+  display: block;
+  font-family: var(--st-font);
+  font-size: var(--st-font-size);
+  color: var(--text);
+  background: var(--bg);
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+.root { min-height: 100%; background: var(--bg); }
+
+header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg2);
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+header.running .logo { animation: pulse 1.2s ease-in-out infinite; }
+
+h1 { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
+.logo {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 22px; height: 22px; border-radius: 5px;
+  background: var(--blue); color: #fff; font-weight: 700;
+}
+
+button {
+  font-family: inherit; font-size: 12px; cursor: pointer;
+  border: 1px solid var(--border); background: var(--bg3); color: var(--text);
+  padding: 5px 10px; border-radius: 5px; display: inline-flex; align-items: center; gap: 6px;
+}
+button:hover:not(:disabled) { border-color: var(--blue); }
+button:disabled { opacity: 0.5; cursor: default; }
+.replay-all-btn { color: var(--green); }
+.stop-btn { color: var(--red); }
+
+.team-select-wrap { font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 6px; }
+select {
+  font-family: inherit; font-size: 12px; background: var(--bg3); color: var(--text);
+  border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px;
+}
+
+.spacer { flex: 1; }
+
+.stats { display: flex; align-items: center; gap: 14px; font-size: 12px; }
+.stat { display: flex; align-items: center; gap: 5px; }
+.stat .label { color: var(--text2); }
+.stat .value { font-weight: 600; }
+.stat.pass .value { color: var(--green); }
+.stat.fail .value { color: var(--red); }
+
+.conn { width: 9px; height: 9px; border-radius: 50%; background: var(--text2); }
+.conn.connected { background: var(--green); }
+.conn.disconnected { background: var(--red); }
+
+.progress { flex-basis: 100%; height: 3px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
+.progress-fill { height: 100%; width: 0; background: var(--blue); transition: width 0.2s ease; }
+.progress.done .progress-fill { background: var(--green); }
+.progress.has-failures .progress-fill { background: var(--red); }
+
+main { padding: 16px 20px; }
+.waiting { text-align: center; color: var(--text2); padding: 60px 20px; }
+.waiting h2 { font-size: 16px; font-weight: 500; margin-bottom: 8px; color: var(--text); }
+.waiting code { background: var(--bg3); padding: 2px 6px; border-radius: 4px; }
+
+.scene {
+  border: 1px solid var(--border); border-radius: 8px; background: var(--bg2);
+  margin-bottom: 14px; overflow: hidden;
+}
+.scene.failed { border-color: var(--red); }
+.scene-head {
+  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
+  border-bottom: 1px solid var(--border); background: var(--bg3);
+}
+.scene-status { font-weight: 700; }
+.scene-status.completed { color: var(--green); }
+.scene-status.failed, .scene-status.timeout { color: var(--red); }
+.scene-status.running { color: var(--amber); }
+.scene-name { font-weight: 600; }
+.scene-file { color: var(--text2); font-size: 11px; }
+.scene-team {
+  font-size: 11px; color: var(--blue); border: 1px solid var(--border);
+  padding: 1px 6px; border-radius: 10px;
+}
+.scene-dur { color: var(--text2); font-size: 11px; margin-left: auto; }
+.copy-btn { padding: 3px 7px; font-size: 11px; }
+.copy-btn.copied { color: var(--green); border-color: var(--green); }
+
+.lanes { padding: 8px 14px; display: flex; flex-direction: column; gap: 6px; }
+.lane { display: flex; align-items: flex-start; gap: 8px; }
+.lane-actor { color: var(--text2); min-width: 90px; font-size: 11px; padding-top: 3px; }
+.lane-items { display: flex; flex-wrap: wrap; gap: 4px; }
+.pill {
+  font-size: 11px; padding: 2px 7px; border-radius: 4px;
+  border: 1px solid var(--border); background: var(--bg3); color: var(--text);
+}
+.pill.running { border-color: var(--amber); color: var(--amber); }
+.pill.success { border-color: var(--green); }
+.pill.slow { border-color: var(--amber); }
+.pill.error { border-color: var(--red); color: var(--red); }
+.pill .tgt { color: var(--text2); }
+
+.assertions { padding: 0 14px 10px; display: flex; flex-direction: column; gap: 3px; }
+.assert { font-size: 12px; display: flex; gap: 6px; align-items: baseline; }
+.assert .mark { font-weight: 700; }
+.assert.ok .mark { color: var(--green); }
+.assert.bad .mark { color: var(--red); }
+.assert .who { color: var(--text2); }
+
+.scene-error {
+  margin: 0 14px 12px; padding: 8px 10px; border-radius: 6px;
+  background: rgba(239, 68, 68, 0.1); border: 1px solid var(--red);
+  color: var(--red); font-size: 12px; white-space: pre-wrap; cursor: pointer;
+}
+
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8IrB,CAAA"}

package/dist/types.d.ts

@@ -0,0 +1,112 @@
+import type { Command, RunEvent, TeamMeta } from '@scenetest/protocol';
+/**
+ * Liveness of the transport's event subscription, surfaced in the header's
+ * connection indicator. Transports report this through `subscribe`'s second
+ * argument; transports that can't tell may stay `'connected'`.
+ */
+export type ConnectionStatus = 'connecting' | 'connected' | 'disconnected';
+/**
+ * The injection point where dev and cloud differ. The widget calls the
+ * adapter to fetch a state snapshot and subscribe to live events, and pushes
+ * user actions back as protocol commands. The adapter speaks to whatever
+ * backend is present — the Vite middleware (fetch + SSE) in dev, the worker
+ * API (fetch + WebSocket) in cloud — so the dashboard behaves the same in
+ * both by construction.
+ */
+export interface Transport {
+    /**
+     * A snapshot of the run so far, as an ordered list of protocol events the
+     * widget folds into its initial state. Transports that deliver history
+     * through the initial `subscribe` burst instead (e.g. SSE replay) may
+     * return an empty array — the store folds both the same way.
+     */
+    fetchState(): Promise<RunEvent[]>;
+    /**
+     * Subscribe to live events. `onEvent` receives every event after the
+     * snapshot; `onStatus`, if given, receives connection-liveness changes.
+     * Returns an unsubscribe function that tears down the underlying stream.
+     */
+    subscribe(onEvent: (event: RunEvent) => void, onStatus?: (status: ConnectionStatus) => void): () => void;
+    /** Send a command toward the runner (replay, stop, pause, resume). */
+    sendCommand(command: Command): Promise<void>;
+}
+/** A single DSL action on one actor's lane. */
+export interface ActionItem {
+    action: string;
+    target?: string;
+    startTime: number;
+    endTime: number | null;
+    duration: number | null;
+    error: string | null;
+    status: 'running' | 'success' | 'slow' | 'error';
+}
+/** One actor's ordered actions within a scene. */
+export interface Lane {
+    actor: string;
+    items: ActionItem[];
+}
+/** An inline assertion result observed during a scene. */
+export interface AssertionRow {
+    actor?: string;
+    description: string;
+    result: boolean;
+    timestamp: number;
+}
+/** A scene folded from its lifecycle events. */
+export interface Scene {
+    name: string;
+    file: string;
+    actors: string[];
+    lanes: Lane[];
+    assertions: AssertionRow[];
+    startTime: number;
+    endTime: number | null;
+    status: 'running' | 'completed' | 'failed' | 'timeout' | string;
+    duration?: number;
+    error?: string;
+    team: TeamMeta;
+    teamIndex: number;
+}
+/** Everything the widget renders, folded from the protocol event stream. */
+export interface DashboardState {
+    scenes: Scene[];
+    currentSceneIndex: number | null;
+    runStartTime: number | null;
+    passCount: number;
+    failCount: number;
+    sceneCount: number;
+    /** Distinct team names seen in `scene:start`, for the replay filter. */
+    teams: string[];
+    running: boolean;
+    /** Final run duration once `run:end` arrives, else null. */
+    endDurationMs: number | null;
+    /** Latest `run:progress` rollup, when the producer emits one. */
+    progress?: {
+        pct: number;
+        failing: number;
+        flaky: number;
+    };
+    connection: ConnectionStatus;
+}
+/** Theming surface — the only knobs a host may set. Versioned with the widget. */
+export interface DashboardTheme {
+    /** Background of the terminal pane. */
+    bg?: string;
+    /** Accent / primary action color. */
+    accent?: string;
+    /** Font family for the pane. */
+    font?: string;
+    /** Base font size (e.g. `'13px'`). */
+    fontSize?: string;
+}
+export interface MountOptions {
+    transport: Transport;
+    /** Optional theme overrides applied as `--st-*` custom properties. */
+    theme?: DashboardTheme;
+}
+/** Handle returned by `mountDashboard`. */
+export interface DashboardHandle {
+    /** Tear down the widget, its subscription, and its shadow root contents. */
+    unmount(): void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@scenetest/dashboard",
+  "version": "0.11.0",
+  "description": "Mountable Preact dashboard widget for scenetest — renders a live run into a shadow root, fed by a pluggable transport adapter",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scenetest/scenetest-js",
+    "directory": "packages/dashboard"
+  },
+  "keywords": [
+    "testing",
+    "e2e",
+    "playwright",
+    "dashboard",
+    "preact",
+    "widget"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "htm": "^3.1.1",
+    "preact": "^10.22.0",
+    "@scenetest/protocol": "0.11.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.3.3",
+    "vite": "^6.4.2",
+    "vitest": "^4.1.4"
+  },
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}