sygnal 6.6.0 → 7.1.0

package/src/extra/lens.ts

@@ -5,11 +5,12 @@
  * is gone); set: the array with that element replaced (the state unchanged when it is gone).
  * Side-effect free.
  */
-export const byId = (field: string, id: any, idKey = 'id') => ({
+import {BINDING} from '../shared'
+export const byId = (field: string, id: any, idKey = 'id') => Object.defineProperty({
   get: (s: any) => (Array.isArray(s?.[field]) ? s[field].find((x: any) => x?.[idKey] === id) : undefined),
   set: (s: any, v: any) => {
     const a = s?.[field]
     if (!Array.isArray(a) || !a.some((x: any) => x?.[idKey] === id)) return s
     return {...s, [field]: a.map((x: any) => (x?.[idKey] === id ? v : x))}
   },
-})
+}, BINDING, {value: [field, id, idKey]})

package/src/extra/queryCache.ts

@@ -43,9 +43,10 @@ export function queryCache(o: any = {}): any {
   // the key of a cacheable request (else undefined); `res`: a resource's
   const key = (q: any, res?: any) => {
     if (typeof q == 'string') q = {url: q};
-    const {method, json, body, parse, query} = q;
-    const m = (method || (json !== undefined || body !== undefined ? 'POST' : 'GET')).toUpperCase();
-    const b = json !== undefined ? JSON.stringify(json) : body ?? '';
+    const {method, json, body, parse, query, multipart} = q;
+    const m = (method || (json !== undefined || body !== undefined || multipart !== undefined ? 'POST' : 'GET')).toUpperCase();
+    // PLAN-11 U-5: a multipart request is never cached (its body isn't a string)
+    const b = json !== undefined ? JSON.stringify(json) : multipart !== undefined ? multipart : body ?? '';
     if (q.cache === false || typeof b != 'string' || typeof parse == 'function' || parse == 'response' ||
       !(q.cache || q.staleTime != null || (res && IDEMPOTENT.test(m)))) return;
     return [m, withQuery(q.url ?? '', query, 1), b, parse].join(' ').trim();

package/src/extra/socketDriver.ts

@@ -2,6 +2,7 @@ import xs, {Stream} from 'xstream';
 import {senderOf, keepSender, allowed, makeReplies} from './replies';
 import {error as logError} from './diagnostics/legacy';
 import {backoff} from './backoff';
+import {FetchEventSource} from './fetchEventSource';
 
 /*
  * makeSocketDriver(options?) (PLAN-3 §1.3): WebSocket and server-sent events, declared per
@@ -11,7 +12,7 @@ import {backoff} from './backoff';
  * - Sink values:
  *   - `{ connections: { [name]: spec | falsy } }`: the sender's whole set of connections. Diffed
  *     per (sender, name): a new name opens, a removed or falsy one closes, a changed URL /
- *     protocols / withCredentials / share closes and reopens, anything else (action names,
+ *     protocols / withCredentials / headers / share closes and reopens, anything else (action names,
  *     reconnect) only rebinds.
  *   - `{ to: name, json? | text? | binary? }`: send on the sender's connection `name` (json is
  *     stringified). Queued while (re)connecting, bounded (`queueLimit`, oldest dropped). A send
@@ -36,6 +37,16 @@ import {backoff} from './backoff';
  * - A disposed sender's connections close (and their retries stop); app dispose closes all.
  * - No WebSocket / EventSource (SSR): nothing opens, nothing is reported.
  * - `WebSocket` / `EventSource` are read at connect time: options.WebSocket ?? globalThis.WebSocket.
+ * - PLAN-11 E-1: an `sse` connection with `headers` (data: a token in it comes from state, and a
+ *   changed header reconnects) is read with FetchEventSource (fetch, `options.fetch` if given),
+ *   since EventSource can't send headers. An `options.EventSource` (a polyfill, the test fake)
+ *   still wins and gets the headers in its init.
+ * - PLAN-13 S-1: SSE `meta: true`: message and `events` actions get `{ data, id, event }`. `resume:
+ *   true | 'param'`: the transport keeps the last event id, and a reconnect the driver makes (after
+ *   EventSource gave up) asks to resume from it: `?lastEventId=` (or `?param=`) on the URL, or
+ *   `Last-Event-ID` on the fetch path (`init.lastEventId`). `staleAfterMs` (SSE and WebSocket): no
+ *   event for that long (over fetch: no bytes, heartbeat comments count) closes the connection as a
+ *   drop (`close` gets `stale: true`), so the reconnect policy applies.
  */
 
 const SCOPE = '__sygnalScope';
@@ -91,19 +102,40 @@ export function makeSocketDriver(options: any = {}) {
     const out = (t: any, data: any, e: any) => {
       try { t.s.send(data); } catch (error) { deliver(e, 'error', {error}); }
     };
+    // S-1: an SSE event as a subscriber gets it (`meta`: with its id and type); the transport
+    // keeps the last id (resume) and counts it as life (staleAfterMs)
+    const got = (t: any, m: any, e: any) => e.sse && e.spec.meta ? {data: parse(m.data), id: m.lastEventId ?? '', event: m.type || 'message'} : parse(m.data);
+    const seen = (t: any, m: any) => { if (m.lastEventId) t.id = m.lastEventId; alive(t); };
     // SSE named events: one listener per name across the subscribers
     const listen = (t: any) => t.s && t.sse && each(t, e => Object.keys(e.spec.events || {}).forEach(name => {
       if (t.on.has(name)) return;
       t.on.add(name);
       const s = t.s;
-      s.addEventListener(name, (m: any) => t.s === s && each(t, x => {
-        const a = x.spec.events?.[name];
-        if (typeof a == 'string' && x.sender !== undefined) reply(x.sender, a, parse(m.data));
-      }));
+      s.addEventListener(name, (m: any) => {
+        if (t.s !== s) return;
+        seen(t, m);
+        each(t, x => {
+          const a = x.spec.events?.[name];
+          if (typeof a == 'string' && x.sender !== undefined) reply(x.sender, a, got(t, m, x));
+        });
+      });
     }));
+    // S-1: staleAfterMs (the smallest of the subscribers'): re-armed by every event; when it fires
+    // the connection is dropped (as if the server had gone) and the reconnect policy applies
+    const alive = (t: any) => {
+      clearTimeout(t.st);
+      const ms = Math.min(...[...t.subs].map(e => e.spec.staleAfterMs).filter(x => x > 0));
+      const s = t.s;
+      if (s && ms < 1 / 0) t.st = setTimeout(() => {
+        if (t.s !== s) return;
+        try { s.close(); } catch (_) {}
+        gone(t, t.sse ? {stale: true} : {code: 1006, reason: 'stale', stale: true});
+      }, ms);
+    };
 
     // the socket closed (or failed to open) without the driver closing it
     const gone = (t: any, info: any) => {
+      clearTimeout(t.st);
       t.s = null;
       t.open = false;
       let again: any;
@@ -118,11 +150,22 @@ export function makeSocketDriver(options: any = {}) {
 
     const connect = (t: any) => {
       t.timer = 0;
-      const C = t.sse ? options.EventSource ?? g.EventSource : options.WebSocket ?? g.WebSocket;
+      const hdr = t.sse && t.spec.headers && typeof t.spec.headers == 'object' ? t.spec.headers : undefined;
+      const C = t.sse ? options.EventSource ?? (hdr && typeof g.fetch == 'function' ? FetchEventSource : g.EventSource) : options.WebSocket ?? g.WebSocket;
       if (typeof C != 'function') return;
+      // S-1: resume from the last event id: Last-Event-ID on the fetch path (init.lastEventId, which
+      // a polyfill or the test fake gets too), else a URL parameter
+      // (a parameter the URL already has is replaced, not added again)
+      const r = t.sse && t.id && [...t.subs].map(e => e.spec.resume).find(x => x);
+      let url = t.url;
+      if (r && !hdr) {
+        const p = encodeURIComponent(r === true ? 'lastEventId' : r) + '=', v = p + encodeURIComponent(t.id);
+        const re = new RegExp('([?&])' + p.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '[^&#]*');
+        url = re.test(url) ? url.replace(re, '$1' + v) : url + (url.includes('?') ? '&' : '?') + v;
+      }
       let s: any;
       try {
-        s = t.sse ? new C(t.url, {withCredentials: !!t.spec.withCredentials}) : new C(t.url, t.spec.protocols);
+        s = t.sse ? new C(url, {withCredentials: !!t.spec.withCredentials, ...(hdr && {headers: hdr, fetch: options.fetch}), ...(r && {lastEventId: t.id})}) : new C(t.url, t.spec.protocols);
       } catch (error) {
         // a URL the constructor rejects never opens: no retry
         each(t, e => deliver(e, 'error', {error}));
@@ -135,12 +178,19 @@ export function makeSocketDriver(options: any = {}) {
       s.onopen = mine(() => {
         t.n = 0;
         t.open = true;
+        alive(t);
         each(t, e => { deliver(e, 'open', {reconnected: !!e.opened}); e.opened = true; });
         const q = t.queue;
         t.queue = [];
         q.forEach((x: any) => t.s === s && out(t, x.data, x.e));
       });
-      s.onmessage = mine((m: any) => { const d = parse(m.data); each(t, e => deliver(e, 'message', d)); });
+      s.onmessage = mine((m: any) => {
+        if (t.sse) seen(t, m); else alive(t);
+        const d = parse(m.data);
+        each(t, e => deliver(e, 'message', e.spec.meta && t.sse ? got(t, m, e) : d));
+      });
+      // S-1: FetchEventSource's bytes (heartbeat comments) count as life
+      s.onbeat = mine(() => alive(t));
       s.onerror = mine((error: any) => {
         each(t, e => deliver(e, 'error', {error}));
         if (t.sse) {
@@ -156,6 +206,7 @@ export function makeSocketDriver(options: any = {}) {
     // closes the driver makes: no `close` action, late events ignored, retry cancelled
     const end = (t: any) => {
       clearTimeout(t.timer);
+      clearTimeout(t.st);
       transports.delete(t.key);
       const s = t.s;
       t.s = null;
@@ -201,7 +252,7 @@ export function makeSocketDriver(options: any = {}) {
         const sse = typeof spec.sse == 'string';
         const url = resolve(sse ? spec.sse : spec.socket, sse);
         // the connection's identity: a change reconnects, anything else only rebinds
-        const key = (spec.share === false ? 'u' : '') + (sse ? 'e' + !!spec.withCredentials : 's' + JSON.stringify(spec.protocols)) + url;
+        const key = (spec.share === false ? 'u' : '') + (sse ? 'e' + !!spec.withCredentials + (spec.headers ? JSON.stringify(spec.headers) : '') : 's' + JSON.stringify(spec.protocols)) + url;
         if (old && old.key === key) {
           old.spec = spec;
           if (old.t) listen(old.t);

package/src/extra/ssr.ts

@@ -147,7 +147,7 @@ function withUses(def: any, state: any): any {
  * state reads from the cache ('success' with the cached data), else 'loading' ('idle' for a
  * falsy request), as the client's first paint does with the same (hydrated) cache
  */
-function withResources(def: any, state: any): any {
+function withResources(def: any, state: any, ctx?: any): any {
   state = withUses(def, state)
   const res = def && def.resources
   if (!res || !state || typeof state !== 'object' || Array.isArray(state)) return state
@@ -155,7 +155,7 @@ function withResources(def: any, state: any): any {
   for (const n of Object.keys(res)) {
     if (out[n] !== undefined) continue
     let q: any
-    try { q = typeof res[n] === 'function' ? res[n](state) : res[n] } catch (_) {}
+    try { q = typeof res[n] === 'function' ? res[n](state, ctx) : res[n] } catch (_) {}
     const E = q && ssrCache ? ssrCache.get(ssrCache.key(q, 1)) : undefined
     out[n] = E && E.at > 0 ? {status: 'success', data: E.v} : {status: q ? 'loading' : 'idle'}
   }
@@ -198,10 +198,26 @@ function viewFailed(def: any, err: any, name: string): any {
   return vnode
 }
 
-function collectHead(def: any, state: any): void {
+function collectHead(def: any, state: any, ctx?: any): void {
   const h = def && def.head
   if (!heads || !h) return
-  try { heads.push(typeof h === 'function' ? h(state) : h) } catch (_) {}
+  try { heads.push(typeof h === 'function' ? h(state, ctx) : h) } catch (_) {}
+}
+
+/**
+ * PLAN-13 F-1: the context a component sees (its parent's, plus its own entries computed on
+ * `state`). The statics get it as on the client; for `resources` it is computed on the state
+ * before the resources are filled in (a context entry can't read the component's own resource)
+ */
+function contextOf(def: any, state: any, parent: Record<string, any>): Record<string, any> {
+  const own = def.context || {}, out: Record<string, any> = {...parent}
+  for (const key of Object.keys(own)) {
+    const f = own[key]
+    if (typeof f === 'function' && state != null) {
+      try { out[key] = f(state) } catch (_) {}
+    }
+  }
+  return out
 }
 
 /**
@@ -245,20 +261,11 @@ function renderRoot(componentDef: any, options: RenderToStringOptions): string {
 
   const ownState = state !== undefined ? state : componentDef.initialState
   // 5-5: the view sees its resources; the hydration script keeps the state as it was given
-  const resolvedState = withResources(componentDef, ownState)
-  collectHead(componentDef, resolvedState)
+  const resolvedState = withResources(componentDef, ownState, contextOf(componentDef, ownState, context))
 
   // Build context: merge parent context with component's own context definitions
-  const componentContext = componentDef.context || {}
-  const mergedContext: Record<string, any> = {...context}
-  for (const key of Object.keys(componentContext)) {
-    const contextFn = componentContext[key]
-    if (typeof contextFn === 'function' && resolvedState != null) {
-      try {
-        mergedContext[key] = contextFn(resolvedState)
-      } catch (_) {}
-    }
-  }
+  const mergedContext = contextOf(componentDef, resolvedState, context)
+  collectHead(componentDef, resolvedState, mergedContext)
 
   // Call the view function
   let vnode: any
@@ -474,19 +481,10 @@ function renderSubComponent(vnode: any, context: Record<string, any>, parentStat
     // State passed directly
     childState = stateProp
   }
-  childState = withResources(componentDef, childState)
+  childState = withResources(componentDef, childState, contextOf(componentDef, childState, context))
 
   // Build child context
-  const childContext: Record<string, any> = {...context}
-  const componentContext = componentDef.context || {}
-  for (const key of Object.keys(componentContext)) {
-    const contextFn = componentContext[key]
-    if (typeof contextFn === 'function' && childState != null) {
-      try {
-        childContext[key] = contextFn(childState)
-      } catch (_) {}
-    }
-  }
+  const childContext = contextOf(componentDef, childState, context)
 
   // Extract slots from children
   const slots: Record<string, any[]> = {}
@@ -507,7 +505,7 @@ function renderSubComponent(vnode: any, context: Record<string, any>, parentStat
     slots.default.push(...defaultSlotChildren)
   }
 
-  collectHead(componentDef, childState)
+  collectHead(componentDef, childState, childContext)
 
   // Call the view function
   let result: any
@@ -713,20 +711,11 @@ function renderSwitchable(vnode: any, context: Record<string, any>, parentState:
  * Internal helper: render a component def to a VNode (not HTML string).
  */
 function renderToStringInternal(componentDef: any, state: any, context: Record<string, any>, uid: string): any {
-  const resolvedState = withResources(componentDef, state !== undefined ? state : componentDef.initialState)
-
-  const componentContext = componentDef.context || {}
-  const mergedContext: Record<string, any> = {...context}
-  for (const key of Object.keys(componentContext)) {
-    const contextFn = componentContext[key]
-    if (typeof contextFn === 'function' && resolvedState != null) {
-      try {
-        mergedContext[key] = contextFn(resolvedState)
-      } catch (_) {}
-    }
-  }
+  const own = state !== undefined ? state : componentDef.initialState
+  const resolvedState = withResources(componentDef, own, contextOf(componentDef, own, context))
+  const mergedContext = contextOf(componentDef, resolvedState, context)
 
-  collectHead(componentDef, resolvedState)
+  collectHead(componentDef, resolvedState, mergedContext)
   let vnode: any
   try {
     vnode = componentDef({

package/src/extra/testing.ts

@@ -5,6 +5,7 @@ import {enrichEventStream} from '../cycle/dom/enrichEventStream';
 import eventBusDriver from './eventDriver';
 import logDriver from './logDriver';
 import {ownedCopy} from './owned';
+import {isAbort} from '../shared';
 import {renderToInnerHtml} from './ssr';
 import {_getDiagnosticsConfig, configureDiagnostics, getDiagnosticsMode, isDiagnosticsEnabled, onDiagnostic, report} from './diagnostics/index';
 import xs from './xstreamCompat';
@@ -252,6 +253,13 @@ export interface RenderOptions {
    * Default: unchanged (off unless configureStrict(true) was called).
    */
   strict?: boolean;
+  /**
+   * 7.0 timing audit (SYG257, info) while the component is rendered; restored on dispose():
+   * each output sink that reads a top-level state field its action's STATE changed is reported
+   * (it gets the new value since 7.0; 6.x gave it the old one). Requires 'sygnal/diagnostics'.
+   * Default: unchanged (off unless configureTimingAudit(true) was called).
+   */
+  timingAudit?: boolean;
   /**
    * settle()'s quiet window in ms (default 20): settle() resolves once nothing in the tree has
    * rendered, reduced or changed state for this long. A model `next('X', data, ms)` with a
@@ -454,6 +462,11 @@ export interface RenderResult {
    * `status`/`body`), or an Error / message (a network failure: the fetch rejects with it).
    */
   fail: (sinkName: string, error: any, target?: FakeReplyTarget) => Promise<void>;
+  /**
+   * PLAN-11 U-2: one progress step `{ loaded, total?, phase? }` of a pending request sent with
+   * `progress` (chosen as in respond()); it stays pending until respond()/fail().
+   */
+  progress: (sinkName: string, step: {loaded: number; total?: number; phase?: 'upload' | 'download'}, target?: FakeReplyTarget) => Promise<void>;
   /**
    * PLAN-6 L-4: stream chunks into a pending request of the LLM fake (the sink named by `llmSink`,
    * default 'LLM': the real chat driver over an in-memory transport). Chunks: strings (text),
@@ -484,9 +497,10 @@ export interface RenderResult {
   open: (sinkName: string, target?: FakeConnectionTarget) => Promise<void>;
   /**
    * PLAN-3 2-C: the server sends `data` (objects as JSON text) on the open connection(s): `message`
-   * fires (the data JSON-parsed when it parses). `{ event, connection? }`: an SSE named event.
+   * fires (the data JSON-parsed when it parses). `{ event, connection? }`: an SSE named event;
+   * `{ id }` (PLAN-13 S-1): its SSE event id (`meta`, `resume`).
    */
-  push: (sinkName: string, data: any, target?: FakeConnectionTarget | {event?: string; connection?: FakeConnectionTarget}) => Promise<void>;
+  push: (sinkName: string, data: any, target?: FakeConnectionTarget | {event?: string; id?: string | number; connection?: FakeConnectionTarget}) => Promise<void>;
   /**
    * PLAN-3 2-C: the connection(s) close without the app closing them (a connecting one fails to
    * open: `error` first): `close` fires with `{ code, reason, willReconnect }` and the fake
@@ -550,9 +564,9 @@ export interface RenderResult {
    * render (await t.ready() first). 4-A1: after `await` of any wait, it shows the state the wait
    * resolved with (a later render is held back until the next macrotask).
    */
-  query: (selector: string) => Element | null;
+  query: <E extends Element = Element>(selector: string) => E | null;
   /** Every element matching a selector in the rendered tree (Portals included), as query() */
-  queryAll: (selector: string) => Element[];
+  queryAll: <E extends Element = Element>(selector: string) => E[];
   /**
    * PLAN-5 W-1: a widget's host by selector or control: `.props` (what the view passed it),
    * `.instance` (`dom: 'real'`: what mount returned) and `.dispatch(name, detail)` (the event
@@ -1197,6 +1211,13 @@ const validMs = (v: any) => typeof v == 'number' && Number.isFinite(v) && v >= 0
 // too, so its time is the clock's (Date may be left real by `toFake`), and its waits drive it.
 const fakeClock = (): any => (setTimeout as any).clock;
 const clockNow = (): number => { const c = fakeClock(); return c ? c.now : Date.now(); };
+/** PLAN-11 Q-3: ms until the next pending fake timer (0: none, or real timers) */
+const nextFakeTimer = (): number => {
+  const c = fakeClock();
+  let due = Infinity;
+  try { Object.values(c?.timers || {}).forEach((t: any) => { if (t && t.callAt > c.now && t.callAt < due) due = t.callAt; }); } catch (_) {}
+  return due < Infinity ? due - c.now : 0;
+};
 /**
  * Under fake timers, advance the clock timer by timer (nextAsync flushes promises around each
  * one) until `p` settles. Every pending wait has a timer (its timeout, a quiet-window tick), so
@@ -1254,17 +1275,27 @@ const sockKey = (sse: boolean, url: string, arg: any) => (sse ? 'e' + !!(arg &&
  * PLAN-3 2-C: the in-memory WebSocket / EventSource the fake's makeSocketDriver opens. The
  * harness drives it (t.open / t.push / t.drop); the driver's own close() is the app's close.
  */
+/** `url` without its query parameter `name` (PLAN-13 S-1: a resumed reconnect's id parameter) */
+const withoutParam = (url: string, name: string) =>
+  url.replace(new RegExp('([?&])' + name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '=[^&#]*&?'), '$1').replace(/[?&](#|$)/, '$1');
 const fakeSocketClass = (sse: boolean, made: (s: any) => void) => class {
   readyState = 0;
   sse = sse;
   byApp = false;
   k: string;
+  rn?: string;
   url: string;
   ls: Record<string, any[]> = {};
   onopen: any; onmessage: any; onerror: any; onclose: any;
   constructor(url: string, arg?: any) {
     this.url = String(url);
-    this.k = sockKey(sse, this.url, arg);
+    // PLAN-13 S-1: a resumed SSE reconnect's URL has the id parameter (added, or replacing the
+    // declared one): its key leaves that parameter out (`rn`: its name; made() compares the
+    // connections' URLs without it too)
+    const id = sse && arg?.lastEventId;
+    const m = id && new RegExp('[?&]([^?&=]+)=' + encodeURIComponent(id).replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '(?=&|#|$)').exec(this.url);
+    if (m) this.rn = m[1];
+    this.k = sockKey(sse, m ? withoutParam(this.url, m[1]) : this.url, arg);
     made(this);
   }
   send() {}
@@ -1369,6 +1400,7 @@ const headFake = () => {
 };
 let savedConfig: ReturnType<typeof _getDiagnosticsConfig>;
 let savedStrict: any;
+let savedAudit: any;
 
 /*
  * PLAN-4 GS-2, mock DOM: could the element a command targets have this method? The core runs any
@@ -1468,7 +1500,7 @@ export function renderComponent(
   componentDef: any,
   options: RenderOptions = {}
 ): RenderResult {
-  const {initialState, mockConfig = {}, drivers = {}, diagnostics, strict, dom = 'mock', autoConnect = true, socketSink = 'WS', resourceSink = 'HTTP', llmSink = 'LLM', http: httpOptions, context: ancestors} = options;
+  const {initialState, mockConfig = {}, drivers = {}, diagnostics, strict, timingAudit, dom = 'mock', autoConnect = true, socketSink = 'WS', resourceSink = 'HTTP', llmSink = 'LLM', http: httpOptions, context: ancestors} = options;
   const {intent, model = {}} = componentDef;
   // E4: real DOM mode
   const real = dom == 'real';
@@ -1511,6 +1543,7 @@ export function renderComponent(
   if (!active++) {
     savedConfig = _getDiagnosticsConfig();
     savedStrict = core.strict;
+    savedAudit = core.timingAudit;
     // G-051: forget the checks' report dedupe (once()), so a finding from an earlier test is
     // reported again. Only that set: resetChecks() would also drop inspect()'s records of
     // other live instances / apps.
@@ -1518,6 +1551,8 @@ export function renderComponent(
   }
   configureDiagnostics({mode: diagnostics || (prevMode == 'off' ? 'collect' : prevMode)});
   if (strict !== undefined) core.strict = strict;
+  // 7.0 timing audit (SYG257, 'sygnal/diagnostics'): same bridge flag as configureTimingAudit()
+  if (timingAudit !== undefined) core.timingAudit = timingAudit;
   // PLAN-4 GS-2: element commands run on the real DOM (jsdom gets the missing methods), and their
   // SYG640/SYG641 are reported without the dev entry too
   if (real && !domFakes) domFakes = fakeElementMethods(document.defaultView || globalThis);
@@ -1683,6 +1718,7 @@ export function renderComponent(
     if (!--active) {
       configureDiagnostics(savedConfig);
       core.strict = savedStrict;
+      core.timingAudit = savedAudit;
       domFakes?.();
       domFakes = undefined;
     }
@@ -1716,7 +1752,8 @@ export function renderComponent(
   // value: what t.requests lists (normalised); req: the request the driver got; res: the resource;
   // pf: a { prefetch } fetch (5-5: answered into the cache, no reply)
   // llm: the in-memory stream handle of an LLM fake request (PLAN-6 L-4)
-  type Pending = {value: any; req: any; category: any; res?: string; pf?: any; live: boolean; settle: (ok: boolean, v: any) => void; llm?: any};
+  // step: PLAN-11 U-2, the driver's progress callback of a request sent with `progress` (t.progress)
+  type Pending = {value: any; req: any; category: any; res?: string; pf?: any; live: boolean; settle: (ok: boolean, v: any) => void; llm?: any; step?: (phase: string, loaded: number, total: number) => void};
   type Fake = {select: any; errors: any; subs: Set<FakeSub>; at: (ns: any[]) => any; pending: Pending[]; in$: any; http: any; ws: Sock; llm?: any};
   const fakes = new Map<string, Fake>();
   // 5-3: the fake drivers' focus / online listeners (t.focus, t.online)
@@ -1749,14 +1786,22 @@ export function renderComponent(
         const lin$ = xs.create();
         llm = {in$: lin$, src: makeChatDriver({transport: tr, _frame: (f: () => void) => { frames.push(f); }})(lin$)};
       }
+      let memFetch: any;
       const http = makeFetchDriver({
         ...httpOptions,
+        // PLAN-11 U-2: a progress request is answered like any other (t.respond / t.fail); its
+        // pending entry keeps the driver's progress callback for t.progress
+        _progress: (url: string, init: any, step: any) => {
+          const r = memFetch(url, init);
+          pending[pending.length - 1].step = step;
+          return r;
+        },
         // 5-3: focus / online come from t.focus() / t.online() only
         _on: (f: any) => { signals.add(f); return () => signals.delete(f); },
         _tap: (req: any, res?: string, pf?: any) => { tapped = [req, res, pf]; },
         // D472: a batch / split request (a large decide()) is one fetch here, answered as one
         _whole: true,
-        fetch: (url: string, init: any) => new Promise((resolve, reject) => {
+        fetch: memFetch = (url: string, init: any) => new Promise((resolve, reject) => {
           const [req, res, pf] = tapped || [{url}];
           tapped = undefined;
           // G-171(1): a resource fetch is listed as { url, ...request, resource: name }; 5-5: a
@@ -1788,6 +1833,7 @@ export function renderComponent(
         return {
           select: (sel?: any) => xs.merge(hs.select(sel), own(false)(sel), sock.select(sel)),
           errors: (sel?: any) => xs.merge(hs.errors(sel), own(true)(sel)),
+          progress: (sel?: any) => hs.progress(sel),
           subs, at, pending, in$, http, ws, llm,
           // 5-3: the driver's matcher / inspection (the dev checks' SYG632, t.cache)
           __matches: http.__matches, __inspect: http.__inspect,
@@ -1817,7 +1863,7 @@ export function renderComponent(
     const w: Sock = {src: null, in$: xs.create(), conns: new Map(), sockets: [], sent: [], declaring: null};
     const made = (s: any) => {
       w.sockets.push(s);
-      const all = [...w.conns.values()].flatMap(m => [...m.values()]).filter(c => c.k == s.k);
+      const all = [...w.conns.values()].flatMap(m => [...m.values()]).filter(c => (s.rn ? sockKey(true, withoutParam(c.url, s.rn), c.spec) : c.k) == s.k);
       if (w.declaring) {
         // a declaration opened it: the first new connection with its key (and, shared, the
         // other new shared ones)
@@ -1918,7 +1964,7 @@ export function renderComponent(
   for (const k in uses) for (const a in uses[k]?.model || {}) names.push(k + '.' + a);
   // G-275: the caller's initialState is owned (the dev statics freeze leaves it alone). G-289: a
   // copy is marked, not the caller's object
-  const init = initialState !== undefined ? ownedCopy(initialState) : componentDef.initialState;
+  let init = initialState !== undefined ? ownedCopy(initialState) : componentDef.initialState;
   // G-028: with no intent, model or initialState nothing would ever emit state, so the view
   // never renders. Leave intent/model unset so the component falls back to the same no-op
   // model run() uses, and renders.
@@ -2179,6 +2225,17 @@ export function renderComponent(
       },
     };
   };
+  // PLAN-13 F-2: a root that declares `route` starts from the test URL's route: its initialState's
+  // router.current() ran at module load, before the test's URL existed. The route entry's STATE
+  // reducer is applied to the initial state (its other sinks, a guard's redirect, run once when the
+  // router answers the declaration), so the first render and the statics see the page the test
+  // starts on: no render of '/' and no request for it
+  const re = rt && typeof componentDef.route == 'string' && model[componentDef.route]
+  const seed = typeof re == 'function' ? re : re && typeof re == 'object' && typeof re.STATE == 'function' && re.STATE
+  if (seed && init !== undefined) {
+    const v = seed(init, rt!.r.current(), noop, {state: init, previousState: init})
+    if (v !== undefined && !isAbort(v)) init = v
+  }
   let sources: any, sinks: any;
   try {
     // the root runs with the test intent, model, initial state and name, and the drivers above.
@@ -2473,7 +2530,7 @@ export function renderComponent(
     if (tg === undefined) return {match: cat, desc: catDesc, o};
     if (typeof tg == 'string') {
       // an ok/error action name, key, category, resource name or URL
-      return {match: r => { const v = r.value || {}; return cat(r) && [v.ok, v.error, v.key, v.category, r.res, v.url].includes(tg); }, desc: ` matching '${tg}'${catDesc}`, o};
+      return {match: r => { const v = r.value || {}; return cat(r) && [v.ok, v.error, v.progress, v.key, v.category, r.res, v.url].includes(tg); }, desc: ` matching '${tg}'${catDesc}`, o};
     }
     if (typeof tg == 'function') {
       return {match: r => { try { return cat(r) && !!tg(r.value); } catch (_) { return false; } }, desc: ` matching the predicate${catDesc}`, o};
@@ -2706,6 +2763,23 @@ export function renderComponent(
         return {error: err, category, request: e?.req, status: status ?? x?.status, body};
       });
 
+  // PLAN-11 U-2: t.progress. One progress step of a pending request sent with `progress` (its
+  // reply action, or progress() for `progress: true`); the request stays pending. Targets as
+  // t.respond's; the phase defaults to 'upload' for a request with a body, else 'download'
+  const progress = (name: string, step: any, opts?: FakeReplyTarget) => {
+    throwFailure();
+    if (drivers[name]) throw new Error(`[Sygnal] t.progress('${name}'): ${name} has a real driver (passed in drivers), so there is nothing to script`);
+    if (!step || typeof step != 'object' || typeof step.loaded != 'number') throw new Error(`[Sygnal] t.progress('${name}', step): step is { loaded, total?, phase? } (got ${brief(step)})`);
+    const tg = targetOf(opts);
+    const what = `t.progress('${name}'${typeof opts == 'string' ? `, …, '${opts}'` : ''})`;
+    const now = isReady && !inputs.length ? pick(name, tg) : undefined;
+    if (now && !now.step) throw new Error(`[Sygnal] ${what}: the request ${brief(now.value)} has no progress: send it with progress: 'UPLOADING' (a reply action) or progress: true`);
+    return scripted(() => pick(name, tg), w => noPending(what, name, tg, w), (e: Pending) => {
+      if (!e.step) return new Error(`[Sygnal] ${what}: the request ${brief(e.value)} has no progress: send it with progress: 'UPLOADING' (a reply action) or progress: true`);
+      const r = e.req || {};
+      e.step(step.phase || (r.body !== undefined || r.json !== undefined || r.multipart !== undefined ? 'upload' : 'download'), step.loaded, step.total ?? 0);
+    }, sendDue);
+  };
   // PLAN-6 L-4: t.stream. Targets as t.respond's (an action name or key, a partial request, a
   // predicate, { request, nth }); `end: false` (the last argument, or in the target options)
   // leaves the stream open. Chunks become ChatEvents pushed into the in-memory stream; the fake's
@@ -2797,11 +2871,13 @@ export function renderComponent(
   };
   const open = (name: string, target?: FakeConnectionTarget) => sockCall('open', name, target, [0], sockOpen);
   const push = (name: string, data: any, target?: any) => {
-    const o = target && typeof target == 'object' && !Array.isArray(target) && Object.keys(target).length && Object.keys(target).every(k => k == 'event' || k == 'connection') ? target : {connection: target};
+    const o = target && typeof target == 'object' && !Array.isArray(target) && Object.keys(target).length && Object.keys(target).every(k => k == 'event' || k == 'connection' || k == 'id') ? target : {connection: target};
     const raw = typeof data == 'string' || (data && typeof data == 'object' && (data instanceof ArrayBuffer || ArrayBuffer.isView(data) || (typeof Blob != 'undefined' && data instanceof Blob))) ? data : JSON.stringify(data);
     const ev = o.event;
     return sockCall('push', name, o.connection, [1], s => {
-      const m = {type: ev || 'message', data: raw};
+      // PLAN-13 S-1: `id` sets the event id; as in EventSource, lastEventId keeps the last one
+      if (s.sse && o.id != null) s.lastId = String(o.id);
+      const m: any = {type: ev || 'message', data: raw, ...(s.sse && {lastEventId: s.lastId ?? ''})};
       if (!ev || ev == 'message') sockFire(s, 'message', m);
       if (s.sse) (s.ls[ev || 'message'] || []).forEach((f: any) => { try { f(m); } catch (e) { console.error(e); } });
     });
@@ -2904,11 +2980,11 @@ export function renderComponent(
   };
   // 6-B (G-185): on the mock DOM, MockElement snapshots of the latest rendered tree
   const mockAll = (s: string): any[] => findAll(vtree, parse(norm(s)), [], []).map(c => mockOf(c, htmlOf));
-  const queryAll = (s: string): Element[] => {
+  const queryAll = <E extends Element = Element>(s: string): E[] => {
     s = selOf(s);
     notYet(`t.queryAll('${s}')`);
     if (!real) return mockAll(s);
-    return roots().flatMap(r => Array.from(r.querySelectorAll(s)));
+    return roots().flatMap(r => Array.from(r.querySelectorAll<E>(s)));
   };
   const queryIn = (s: string): Element | null => {
     for (const r of roots()) {
@@ -2917,11 +2993,11 @@ export function renderComponent(
     }
     return null;
   };
-  const query = (s: string): Element | null => {
+  const query = <E extends Element = Element>(s: string): E | null => {
     s = selOf(s);
     notYet(`t.query('${s}')`);
     if (!real) return mockAll(s)[0] ?? null;
-    return queryIn(s);
+    return queryIn(s) as E | null;
   };
 
   // PLAN-5 W-1: a widget host (selector or control): the props it was rendered with (the mock
@@ -3134,7 +3210,12 @@ export function renderComponent(
         let msg = `${name} timed out after ${timeoutMs}ms.`;
         const [why, pending] = explainNext(start);
         msg += why;
-        if (pending) msg += ` Wait longer: t.${name}(pred, ms), or the renderComponent timeoutMs option (default for every wait).`;
+        if (inputs.length) msg += ` ${inputs.length} simulated input(s) still pending.`;
+        // PLAN-11 Q-3: on the fake clock a state a timer (TIMER driver, periodic, delay) brings
+        // later than the timeout can't arrive in time: name the next pending timer
+        const later = pending ? 0 : nextFakeTimer();
+        if (later) msg += ` A timer is still pending on the fake clock (it fires ${later}ms after this timeout): if the state comes from it, this wait ended first.`;
+        if (pending || later) msg += ` Wait longer: t.${name}(pred, ms), or the renderComponent timeoutMs option (default for every wait).`;
         // G-065: a state from before the call matched; next() only looks at new ones
         for (let i = from - 1; i >= 0; i--) {
           if (test(i)) {
@@ -3317,6 +3398,7 @@ export function renderComponent(
     requests,
     respond,
     fail,
+    progress,
     stream,
     connections,
     cache,

package/src/extra/timers.ts

@@ -13,7 +13,8 @@ import {makeReplies} from './replies';
  *   falsy one stops, a changed spec restarts (an equal one keeps running).
  * - `every`: drift-free; tick n is due at start + n * every (each delay is computed from the
  *   start, not chained). A late tick (a throttled background tab) coalesces the missed ones:
- *   n jumps. Data `{ n, t }`: the tick number from 1, `t` = Date.now().
+ *   n jumps. A delay is at most `every`, so a frozen Date.now() (a test clock that fixes the time
+ *   while timers run) ticks once per interval. Data `{ n, t }`: the tick number from 1, `t` = Date.now().
  * - `after`: fires once, data `{ t }`. It doesn't fire again while the same spec stays declared.
  * - `frame`: every animation frame (requestAnimationFrame; setTimeout 16 ms without it), data
  *   `{ t, dt }`: Date.now() and the ms since the previous frame (0 on the first).
@@ -47,7 +48,9 @@ const start = (s: any, send: (type: string, data: any) => void, e: any): (() =>
       last = ts;
     } else if (every) {
       n = Math.max(n + 1, Math.floor((t - t0) / every));
-      later(t0 + (n + 1) * every - t);
+      // never more than one interval: under a frozen Date.now() (Playwright's setFixedTime: Date is
+      // fixed, timers run) the drift-free delay grew by one interval per tick
+      later(Math.min(every, t0 + (n + 1) * every - t));
       send(s.action, {n, t});
     } else {
       e.d = 1;