@flamingo-stack/openframe-frontend-core 0.0.750 → 0.0.752

package/dist/{scripts-HO53VYGX.cjs → scripts-JJ2BVYQ5.cjs}

@@ -13,23 +13,23 @@ var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunk6KEJQR6Lcjs = require('./chunk-6KEJQR6L.cjs');
-require('./chunk-C6LPOYDM.cjs');
+var _chunkVD3XBUQRcjs = require('./chunk-VD3XBUQR.cjs');
+require('./chunk-AG4HR6Z6.cjs');
 require('./chunk-NTGIQP7O.cjs');
 
 
-var _chunkALPRQ3ZXcjs = require('./chunk-ALPRQ3ZX.cjs');
+var _chunk3GG3QAPTcjs = require('./chunk-3GG3QAPT.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
-require('./chunk-4FWURR3W.cjs');
+require('./chunk-VUWPLQBY.cjs');
 require('./chunk-LU7TD6QS.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
-require('./chunk-3TELPOVH.cjs');
+require('./chunk-7OEVVMAU.cjs');
 require('./chunk-YUMFVQIN.cjs');
-require('./chunk-WZX26ODJ.cjs');
-require('./chunk-V3UJ6NDR.cjs');
+require('./chunk-OXCGQV6B.cjs');
+require('./chunk-EM4OEWCM.cjs');
 require('./chunk-LVO7FALW.cjs');
 require('./chunk-3RFQPQ7Z.cjs');
 require('./chunk-YRULLK7N.cjs');
@@ -1832,8 +1832,8 @@ require('./chunk-7DNL734S.cjs');
 require('./chunk-WWUSFOJ7.cjs');
 require('./chunk-SKI6NKOE.cjs');
 require('./chunk-EWPR7662.cjs');
-require('./chunk-XJ3J4UIS.cjs');
-require('./chunk-OFO75R2O.cjs');
+require('./chunk-4PEG4JTM.cjs');
+require('./chunk-35RU25PJ.cjs');
 require('./chunk-QYLIHZKZ.cjs');
 require('./chunk-63N4FN5V.cjs');
 require('./chunk-L2IQESTQ.cjs');
@@ -1859,15 +1859,15 @@ require('./chunk-K6VWTUCH.cjs');
 require('./chunk-MGF3FUKD.cjs');
 require('./chunk-Z74QE57T.cjs');
 require('./chunk-XZJCBIYR.cjs');
-require('./chunk-UGCRLRCT.cjs');
+require('./chunk-NO5UJLLQ.cjs');
 require('./chunk-2QMBXGMQ.cjs');
 require('./chunk-V45KLJQP.cjs');
-require('./chunk-G7SBHMRR.cjs');
+require('./chunk-KHKPLOU4.cjs');
 require('./chunk-L4UI63K6.cjs');
 require('./chunk-OF336YWG.cjs');
 require('./chunk-3LU4UFPS.cjs');
 require('./chunk-RB6BSE3O.cjs');
-require('./chunk-2YXOD2KL.cjs');
+require('./chunk-H3RYUTND.cjs');
 require('./chunk-3ATAYP36.cjs');
 
 // src/components/product-demo/screens/scripts.tsx
@@ -1997,8 +1997,8 @@ function buildScriptsFixture(cast) {
 var _jsxruntime = require('react/jsx-runtime');
 var WIDE_HIDDEN_COLUMNS = ["result", "open"];
 var COMPACT_COLUMNS = [
-  { ..._chunk6KEJQR6Lcjs.EXECUTION_COLUMNS.machineId, width: "flex-1 min-w-0", hideAt: void 0 },
-  _chunk6KEJQR6Lcjs.EXECUTION_COLUMNS.status
+  { ..._chunkVD3XBUQRcjs.EXECUTION_COLUMNS.machineId, width: "flex-1 min-w-0", hideAt: void 0 },
+  _chunkVD3XBUQRcjs.EXECUTION_COLUMNS.status
 ];
 var COMPACT_ROWS = 4;
 var TOKEN_CLASS = {
@@ -2048,16 +2048,16 @@ function ScriptCodePicture({ script }) {
       children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-xxs)] border-b border-ods-border p-[var(--spacing-system-m)]", children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 items-center justify-between gap-[var(--spacing-system-m)]", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkALPRQ3ZXcjs.TruncateText, { variant: "h4", children: script.name }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3GG3QAPTcjs.TruncateText, { variant: "h4", children: script.name }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex shrink-0 items-center gap-[var(--spacing-system-xxs)] text-ods-text-primary text-h6", children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTPKKRHUMcjs.TimerIcon, { className: "size-4 text-ods-text-secondary" }),
               `${schedule.repeat} ${schedule.time} \xB7 ${schedule.deviceCount} devices`
             ] })
           ] }),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 items-center justify-between gap-[var(--spacing-system-m)]", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkALPRQ3ZXcjs.TruncateText, { variant: "h6", tone: "secondary", children: `Written by ${provenance.author} \xB7 approved by ${provenance.approver}` }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3GG3QAPTcjs.TruncateText, { variant: "h6", tone: "secondary", children: `Written by ${provenance.author} \xB7 approved by ${provenance.approver}` }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunk6KEJQR6Lcjs.ScriptShellBadge,
+              _chunkVD3XBUQRcjs.ScriptShellBadge,
               {
                 value: script.shellType,
                 className: "shrink-0 text-ods-text-secondary text-h6",
@@ -2081,7 +2081,7 @@ function ScriptsScreen({ compact = false }) {
     return (
       // Four runs of the card's row height fill the frame; the padding is what is left round them.
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full overflow-hidden bg-ods-bg p-[var(--spacing-system-xsf)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk6KEJQR6Lcjs.ScriptExecutionsTable,
+        _chunkVD3XBUQRcjs.ScriptExecutionsTable,
         {
           rows: fixture.executions.slice(0, COMPACT_ROWS),
           columns: COMPACT_COLUMNS,
@@ -2091,13 +2091,13 @@ function ScriptsScreen({ compact = false }) {
       ) })
     );
   }
-  const renderOutput = (row) => row.id === fixture.openExecutionId ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6KEJQR6Lcjs.ScriptExecutionResult, { result: row.result, empty: "\u2014" }) : null;
+  const renderOutput = (row) => row.id === fixture.openExecutionId ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVD3XBUQRcjs.ScriptExecutionResult, { result: row.result, empty: "\u2014" }) : null;
   return (
     // The frame's tighter padding and no header row: the output opened under a run needs the height.
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full gap-[var(--spacing-system-m)] overflow-hidden bg-ods-bg p-[var(--spacing-system-m)]", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-[39%] shrink-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScriptCodePicture, { script: fixture.script }) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk6KEJQR6Lcjs.ScriptExecutionsTable,
+        _chunkVD3XBUQRcjs.ScriptExecutionsTable,
         {
           rows: fixture.executions,
           hideColumns: WIDE_HIDDEN_COLUMNS,

package/dist/{software-update-4VTK7LWQ.cjs → software-update-BN23RATE.cjs}

@@ -15,23 +15,23 @@ var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunk6KEJQR6Lcjs = require('./chunk-6KEJQR6L.cjs');
-require('./chunk-C6LPOYDM.cjs');
+var _chunkVD3XBUQRcjs = require('./chunk-VD3XBUQR.cjs');
+require('./chunk-AG4HR6Z6.cjs');
 require('./chunk-NTGIQP7O.cjs');
 
 
-var _chunkALPRQ3ZXcjs = require('./chunk-ALPRQ3ZX.cjs');
+var _chunk3GG3QAPTcjs = require('./chunk-3GG3QAPT.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
-require('./chunk-4FWURR3W.cjs');
+require('./chunk-VUWPLQBY.cjs');
 require('./chunk-LU7TD6QS.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
-require('./chunk-3TELPOVH.cjs');
+require('./chunk-7OEVVMAU.cjs');
 require('./chunk-YUMFVQIN.cjs');
-require('./chunk-WZX26ODJ.cjs');
-require('./chunk-V3UJ6NDR.cjs');
+require('./chunk-OXCGQV6B.cjs');
+require('./chunk-EM4OEWCM.cjs');
 require('./chunk-LVO7FALW.cjs');
 require('./chunk-3RFQPQ7Z.cjs');
 require('./chunk-YRULLK7N.cjs');
@@ -1832,8 +1832,8 @@ require('./chunk-7DNL734S.cjs');
 require('./chunk-WWUSFOJ7.cjs');
 require('./chunk-SKI6NKOE.cjs');
 require('./chunk-EWPR7662.cjs');
-require('./chunk-XJ3J4UIS.cjs');
-require('./chunk-OFO75R2O.cjs');
+require('./chunk-4PEG4JTM.cjs');
+require('./chunk-35RU25PJ.cjs');
 require('./chunk-QYLIHZKZ.cjs');
 require('./chunk-63N4FN5V.cjs');
 require('./chunk-L2IQESTQ.cjs');
@@ -1859,15 +1859,15 @@ require('./chunk-K6VWTUCH.cjs');
 require('./chunk-MGF3FUKD.cjs');
 require('./chunk-Z74QE57T.cjs');
 require('./chunk-XZJCBIYR.cjs');
-require('./chunk-UGCRLRCT.cjs');
+require('./chunk-NO5UJLLQ.cjs');
 require('./chunk-2QMBXGMQ.cjs');
 require('./chunk-V45KLJQP.cjs');
-require('./chunk-G7SBHMRR.cjs');
+require('./chunk-KHKPLOU4.cjs');
 require('./chunk-L4UI63K6.cjs');
 require('./chunk-OF336YWG.cjs');
 require('./chunk-3LU4UFPS.cjs');
 require('./chunk-RB6BSE3O.cjs');
-require('./chunk-2YXOD2KL.cjs');
+require('./chunk-H3RYUTND.cjs');
 require('./chunk-3ATAYP36.cjs');
 
 // src/components/product-demo/screens/software-update.tsx
@@ -1922,14 +1922,14 @@ var noop = () => {
 var HIDDEN_WHEN_COMPACT = ["organization"];
 function StaticPackageField({ value }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkALPRQ3ZXcjs.Autocomplete,
+    _chunk3GG3QAPTcjs.Autocomplete,
     {
-      label: _chunk6KEJQR6Lcjs.PACKAGE_SEARCH_LABEL,
+      label: _chunkVD3XBUQRcjs.PACKAGE_SEARCH_LABEL,
       labelVariant: "large",
       options: value ? [{ value: value.id, label: value.name, description: _nullishCoalesce(value.description, () => ( void 0)) }] : [],
       value: _nullishCoalesce(_optionalChain([value, 'optionalAccess', _ => _.id]), () => ( null)),
       onChange: noop,
-      placeholder: _chunk6KEJQR6Lcjs.PACKAGE_SEARCH_PLACEHOLDER
+      placeholder: _chunkVD3XBUQRcjs.PACKAGE_SEARCH_PLACEHOLDER
     }
   );
 }
@@ -1943,7 +1943,7 @@ function SoftwareUpdateScreen({ compact = false }) {
     [fixture.devices, fixture.selectedIds]
   );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg pt-[var(--spacing-system-l)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk6KEJQR6Lcjs.SoftwareActionForm,
+    _chunkVD3XBUQRcjs.SoftwareActionForm,
     {
       action: fixture.action,
       showHeader: false,
@@ -1955,7 +1955,7 @@ function SoftwareUpdateScreen({ compact = false }) {
       initialValues: fixture.initialValues,
       renderPackageSearch,
       renderDevicePicker: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk6KEJQR6Lcjs.DeviceSelector,
+        _chunkVD3XBUQRcjs.DeviceSelector,
         {
           devices: selected,
           loading: false,

package/dist/{tickets-board-BNW4AYFL.cjs → tickets-board-EP6L3BSV.cjs}

@@ -10,7 +10,7 @@ var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunkC6LPOYDMcjs = require('./chunk-C6LPOYDM.cjs');
+var _chunkAG4HR6Z6cjs = require('./chunk-AG4HR6Z6.cjs');
 require('./chunk-LU7TD6QS.cjs');
 require('./chunk-LVO7FALW.cjs');
 require('./chunk-P6F6PHVK.cjs');
@@ -1825,7 +1825,7 @@ require('./chunk-2QMBXGMQ.cjs');
 require('./chunk-V45KLJQP.cjs');
 require('./chunk-3LU4UFPS.cjs');
 require('./chunk-RB6BSE3O.cjs');
-require('./chunk-2YXOD2KL.cjs');
+require('./chunk-H3RYUTND.cjs');
 require('./chunk-3ATAYP36.cjs');
 
 // src/components/product-demo/screens/tickets-board.tsx
@@ -1840,7 +1840,7 @@ function buildTicketsBoardFixture(cast) {
   const dana = assignee(cast.person("dana"));
   const alex = assignee(cast.person("alex"));
   return [
-    _chunkC6LPOYDMcjs.columnFromTicketStatus.call(void 0, "ACTIVE", [
+    _chunkAG4HR6Z6cjs.columnFromTicketStatus.call(void 0, "ACTIVE", [
       ticket("tk-1051", "Printer offline at the front desk", "ACTIVE", {
         ticketNumber: "1051",
         agent: "fae",
@@ -1858,7 +1858,7 @@ function buildTicketsBoardFixture(cast) {
         tags: ["onboarding"]
       })
     ]),
-    _chunkC6LPOYDMcjs.columnFromTicketStatus.call(void 0, "TECH_REQUIRED", [
+    _chunkAG4HR6Z6cjs.columnFromTicketStatus.call(void 0, "TECH_REQUIRED", [
       ticket("tk-1049", "Acrobat Pro for Maya", "TECH_REQUIRED", {
         ticketNumber: "1049",
         agent: "fae",
@@ -1882,7 +1882,7 @@ function buildTicketsBoardFixture(cast) {
         escalatedByUser: true
       })
     ]),
-    _chunkC6LPOYDMcjs.columnFromTicketStatus.call(void 0, "ON_HOLD", [
+    _chunkAG4HR6Z6cjs.columnFromTicketStatus.call(void 0, "ON_HOLD", [
       ticket("tk-1046", "Replace the conference room display", "ON_HOLD", {
         ticketNumber: "1046",
         organizationName: _chunkDKOLQPE7cjs.DEMO_ORGANIZATIONS.acme.name,
@@ -1891,7 +1891,7 @@ function buildTicketsBoardFixture(cast) {
         activity: { kind: "waiting-external" }
       })
     ]),
-    _chunkC6LPOYDMcjs.columnFromTicketStatus.call(void 0, 
+    _chunkAG4HR6Z6cjs.columnFromTicketStatus.call(void 0, 
       "RESOLVED",
       [
         ticket("tk-1048", "Slow laptop", "RESOLVED", {
@@ -1927,7 +1927,7 @@ function TicketsBoardScreen({ compact = false }) {
   const cast = _chunkSTEJZPIOcjs.useProductDemoCast.call(void 0, );
   const board = _react.useMemo.call(void 0, () => buildTicketsBoardFixture(cast), [cast]);
   const columns = compact ? board.filter((column) => column.id !== "ON_HOLD") : board;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg p-[var(--spacing-system-m)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkC6LPOYDMcjs.Board, { columns, onChange: noop, initialCollapsed: compact ? void 0 : FOLDED }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg p-[var(--spacing-system-m)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAG4HR6Z6cjs.Board, { columns, onChange: noop, initialCollapsed: compact ? void 0 : FOLDED }) });
 }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.750",
+  "version": "0.0.752",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [

package/src/components/chat/hooks/use-jetstream-dialog-subscription.ts

@@ -49,14 +49,16 @@ const RECOVERY_REPORT_FLOOR_MS = 5_000;
  * - Subject: `chat.{dialogId}.{topic}`
  * - When `optStartSeq` is a number, the consumer resumes at `optStartSeq + 1`
  *   (`DeliverPolicy.ByStartSequence`). When null/undefined, it live-tails
- *   (`DeliverPolicy.New`).
+ *   (`DeliverPolicy.New`) from whenever the server creates the consumer.
  * - On reconnect, the consumer is recreated starting from the highest stream
  *   sequence we've already observed + 1, so no chunk is replayed or skipped.
- * - Consumer is ephemeral with `AckPolicy.None` and the client's default
- *   inactivity threshold (overridable via `inactiveThresholdMs`).
+ * - Consumer is ephemeral with `AckPolicy.None` and nats.ws's default
+ *   inactivity threshold (`inactiveThresholdMs` only reaches a live-tail
+ *   consumer — see the option).
  * - `reconnectionCount` also counts consumer recreations and post-absence
- *   resyncs, not just NATS reconnects — see the counter's docs. Callers refetch
- *   persisted history whenever it moves.
+ *   resyncs, not just NATS reconnects — see the counter's docs.
+ * - `caughtUpCount` is when callers refetch persisted history after a gap —
+ *   not `reconnectionCount` (see its docs).
  */
 export function useJetStreamDialogSubscription({
   enabled,
@@ -84,6 +86,11 @@ export function useJetStreamDialogSubscription({
   // churn — and churn that can feed itself, since each new consumer can report
   // its own recoveries. Callers see the two summed (see the return).
   const [recoveryCount, setRecoveryCount] = useState(0);
+  const [caughtUpCount, setCaughtUpCount] = useState(0);
+  // The dialog this hook last opened a tail for, and the reconnection count it
+  // opened it at: a consumer created for the same dialog at a higher count is
+  // one coming back after a gap, which owes the caller a history refetch.
+  const tailOpenedAtRef = useRef<{ dialogId: string; count: number } | null>(null);
   // The highest sequence seen, TAGGED with the dialog it belongs to. The tag is
   // what makes the per-dialog reset implicit — a sequence from another
   // conversation simply stops matching — so the dialog-change effect below no
@@ -381,11 +388,28 @@ export function useJetStreamDialogSubscription({
     const initialOptStart = optStartSeqRef.current;
     const startSeq = resumeSeq != null ? resumeSeq + 1 : initialOptStart != null ? initialOptStart + 1 : undefined;
 
+    // A first consumer reports nothing: the caller has just loaded the history
+    // it resumes after. A reconnect or resync recreates it at a higher count,
+    // and from then on the caller's history may predate a gap.
+    const opened = tailOpenedAtRef.current;
+    let owesCatchUp = opened !== null && opened.dialogId === dialogId && reconnectionCount > opened.count;
+    if (!owesCatchUp) tailOpenedAtRef.current = { dialogId, count: reconnectionCount };
+
     let cancelled = false;
+    // Settles an owed catch-up once the replay is in, or once there can be none
+    // (a failed resume, below) — never as the tail comes back: a refetch that
+    // lands first merges without the turns the replay is still delivering, and
+    // they then render twice.
+    const settleCatchUp = () => {
+      if (cancelled || !owesCatchUp) return;
+      owesCatchUp = false;
+      setCaughtUpCount(c => c + 1);
+    };
 
     void (async () => {
+      let handle: JetStreamSubscriptionHandle;
       try {
-        const handle = await client.subscribeJetStreamOrdered(
+        handle = await client.subscribeJetStreamOrdered(
           msg => {
             if (cancelled) return;
             const streamSeq = msg.info.streamSequence;
@@ -424,27 +448,39 @@ export function useJetStreamDialogSubscription({
               const now = Date.now();
               if (now - lastRecoveryReportRef.current < RECOVERY_REPORT_FLOOR_MS) return;
               lastRecoveryReportRef.current = now;
+              owesCatchUp = true;
               setRecoveryCount(c => c + 1);
             },
+            onCaughtUp: settleCatchUp,
           },
         );
+      } catch {
+        if (cancelled) return;
+        setIsSubscribed(false);
+        // With no consumer the refetch cannot wait for a replay. The next resume
+        // still owes one (`tailOpenedAtRef` did not move), and its own catch-up
+        // refetch clears what its replay re-renders meanwhile.
+        settleCatchUp();
+        return;
+      }
 
-        if (cancelled) {
-          try {
-            handle.unsubscribe();
-          } catch {
-            // ignore
-          }
-          return;
+      if (cancelled) {
+        try {
+          handle.unsubscribe();
+        } catch {
+          // ignore
         }
+        return;
+      }
 
-        subscriptionRef.current = handle;
-        setIsSubscribed(true);
+      subscriptionRef.current = handle;
+      setIsSubscribed(true);
+      // A host callback, outside the subscribe's catch: a throw there must not
+      // read as a failed subscribe and settle the catch-up before the replay.
+      try {
         onSubscribedRef.current?.();
-      } catch {
-        if (!cancelled) {
-          setIsSubscribed(false);
-        }
+      } catch (e) {
+        console.warn('[JetStream] onSubscribed threw:', e);
       }
     })();
 
@@ -464,14 +500,14 @@ export function useJetStreamDialogSubscription({
   }, [enabled, dialogId, isConnected, streamName, topic, reconnectionCount]);
 
   // One counter for every way the tail comes back — reconnect, consumer
-  // recreation, post-absence resync — because callers do the same thing for all
-  // of them: refetch persisted history, since the gap may predate what the
-  // stream still holds. The last two are the quiet ones; no connection event
-  // fires for either.
+  // recreation, post-absence resync. The last two are the quiet ones; no
+  // connection event fires for either. `caughtUpCount` counts the same events,
+  // each once its replay is in or once it could not be resumed (see its docs).
   return {
     isConnected,
     isSubscribed,
     reconnectionCount: reconnectionCount + recoveryCount,
+    caughtUpCount,
     currentStreamSeq,
   };
 }

package/src/components/chat/types/api.types.ts

@@ -103,8 +103,9 @@ export interface UseJetStreamDialogSubscriptionOptions {
   /** Single topic to subscribe to. */
   topic: NatsMessageType;
   /**
-   * Resume from this JetStream sequence + 1. When null/undefined, the consumer starts with
-   * DeliverPolicy.New (live tail only).
+   * Resume from this JetStream sequence + 1 (0 replays everything the stream retains for the
+   * dialog). When null/undefined, the consumer starts with DeliverPolicy.New: live tail only,
+   * from whenever the server creates the consumer — after `onSubscribed` has fired.
    */
   optStartSeq?: number | null;
   onEvent?: (payload: unknown, messageType: NatsMessageType) => void;
@@ -127,8 +128,10 @@ export interface UseJetStreamDialogSubscriptionOptions {
     maxDelayMs?: number;
     multiplier?: number;
   };
-  /** Consumer inactivity threshold in ms before NATS auto-cleans it. Defaults to the
-   *  client's, and applies only to the first consumer — recreations use nats.ws's. */
+  /** Consumer inactivity threshold in ms before NATS auto-cleans it, passed to the client
+   *  (see `JetStreamOrderedSubscribeOptions.inactiveThresholdMs`). It takes effect only
+   *  while the hook live-tails (`optStartSeq` null, nothing seen yet): every other consumer
+   *  it opens starts from a sequence ≥ 1, which nats.ws gives its own default. */
   inactiveThresholdMs?: number;
   /**
    * A counter the host bumps when it knows, from outside the page, that the tail
@@ -140,7 +143,8 @@ export interface UseJetStreamDialogSubscriptionOptions {
    * either kind of knowledge bumps this instead of hoping the page noticed.
    *
    * Treated exactly like a reconnect: the consumer is rebuilt from the highest
-   * sequence already seen, and `reconnectionCount` moves so callers refetch
+   * sequence already seen, `reconnectionCount` moves, and `caughtUpCount` moves
+   * once the rebuilt consumer has replayed what it missed, so callers refetch
    * persisted history. Any increase counts; the value itself means nothing, and
    * an increase arriving alongside a `visibilitychange` costs one rebuild, not
    * two.
@@ -156,11 +160,26 @@ export interface UseJetStreamDialogSubscriptionReturn {
    * JetStream ordered-consumer recreation, the page returning to view after
    * being hidden long enough to have missed something, or a host reporting the
    * same via `resyncSignal`. All of them mean the same thing to the caller —
-   * the tail may have skipped messages, so persisted history has to be
-   * refetched. One absence counts once even when two sources report it.
-   * Starts at 0.
+   * the tail may have skipped messages. One absence counts once even when two
+   * sources report it. Starts at 0.
+   *
+   * Not the moment to refetch persisted history: the replay is still arriving
+   * when this moves. See `caughtUpCount`.
    */
   reconnectionCount: number;
+  /**
+   * Incremented once a tail that came back — any of the events
+   * `reconnectionCount` counts, recoveries past its report floor — has
+   * delivered everything the stream still held for the dialog. Refetch
+   * persisted history on this: the gap may predate what the stream retains,
+   * and only a refetch that lands after the replay merges against the turns it
+   * re-delivered. One that lands first merges without them, and they then
+   * render a second time. Also moves when such a tail could not be resumed at
+   * all, so history is not left at its pre-gap snapshot: the next resume then
+   * replays the gap over that refetch, and its own increment's refetch clears
+   * the copies. Never moves for the first consumer of a dialog. Starts at 0.
+   */
+  caughtUpCount: number;
   /** Highest JetStream stream sequence observed so far (null before first delivery). */
   currentStreamSeq: number | null;
 }

package/src/components/chat/types/network.types.ts

@@ -36,7 +36,8 @@ export interface ChunkData {
   sequenceId?: number;
   /** JetStream stream sequence, populated from JsMsg.info.streamSequence when delivered via JetStream. */
   streamSeq?: number;
-  /** Authoritative dialog streaming state at the time this chunk was emitted; consumers should mirror it into their dialog cache. */
+  /** @deprecated Not set by the ai-agent: its chunks carry no stream state, which exists only
+   *  as the GraphQL `Dialog.streamState` field (resolved from the dialog lock). Read that instead. */
   streamState?: 'IDLE' | 'STREAMING';
   type: string;
   text?: string;

package/src/components/loading/loading-region.tsx

@@ -40,16 +40,11 @@ export function LoadingRegion({
   children,
   ...props
 }: LoadingRegionProps) {
-  if (!announce) {
-    return (
-      <Tag className={className} {...props}>
-        {children}
-      </Tag>
-    );
-  }
+  // One tree for both states: `children` keeps its slot whether or not the status is drawn, so an
+  // `announce` that flips at runtime does not remount the content (and drop its state and focus).
   return (
-    <Tag aria-busy="true" className={className} {...props}>
-      {status && (
+    <Tag aria-busy={announce ? 'true' : undefined} className={className} {...props}>
+      {announce && status && (
         <span role="status" aria-live="polite" className="sr-only">
           {label}
         </span>

package/src/components/loading/unified-skeleton.tsx

@@ -19,6 +19,8 @@ interface UnifiedSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * The element drawn. `span` keeps the placeholder valid phrasing content where
    * a `div` may not stand (inside a `p`, a heading, a label or an inline card).
+   * A span bar whose classes set no base display gets one of its own, capped to
+   * its line and centred on it; a caller that sets one gets none of the three.
    */
   as?: 'div' | 'span';
 }
@@ -68,6 +70,15 @@ export function UnifiedSkeleton({
   // An `aspect-*` utility sizes the box itself; a default height would win
   // over it (explicit height beats aspect-ratio) and collapse the box to 16px.
   const sizedByAspect = /(?:^|\s)aspect-/.test(className ?? '');
+  // A span that already names its base display keeps it, with its own cap and alignment: the frozen
+  // TitleBlock's bars and the chip and breadcrumb skeletons are `inline-block` on the baseline, tuned to
+  // their text. Only an unprefixed display counts: `md:hidden` leaves the base span inline, and a bar
+  // without the default would draw at 0×0 below that breakpoint. The list is the displays bars use;
+  // any other falls back to the default, and twMerge still lets the caller's display win.
+  const setsDisplay =
+    /(?:^|\s)(?:inline-block|inline-flex|inline-grid|inline|block|flex|grid|contents|hidden)(?=\s|$)/.test(
+      className ?? '',
+    );
 
   const style: React.CSSProperties = {
     width: width,
@@ -77,6 +88,8 @@ export function UnifiedSkeleton({
   return (
     <Tag
       className={cn(
+        // An inline span ignores width and height: without a display of its own the bar draws at 0×0.
+        Tag === 'span' && !setsDisplay && 'inline-block max-w-full align-middle',
         animate ? SKELETON_SURFACE_CLASS : 'bg-ods-skeleton',
         variantClasses[variant],
         !height && !style.height && !sizedByAspect && defaultHeights[variant],