@flamingo-stack/openframe-frontend-core 0.0.749 → 0.0.751

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/features/auth/login-form.tsx

@@ -12,6 +12,25 @@ import { LegalLinks } from './legal-links';
 import type { AuthSsoProvider } from './sso-providers';
 import { SsoProviderButtons } from './sso-providers';
 
+/**
+ * How a block that appears in answer to the email eases in: the prototype's fade from 4px above, short
+ * enough to read as the same card changing rather than a new one arriving.
+ */
+const ENTER_ANIMATION = 'animate-in fade-in-0 slide-in-from-top-1 duration-200 ease-out motion-reduce:animate-none';
+
+/** The sign-in methods of the organization an email resolved to. */
+export interface LoginFormTenantMethods {
+  /** Names the block ("Sign-in methods for <name>") and tags the organization's own providers. */
+  name?: string;
+  /** Its built-in OpenFrame login, offered first. */
+  openframe: boolean;
+  /**
+   * Identity providers it configured with its own credentials, tagged with `name` so they cannot be
+   * mistaken for the generic button of the same provider.
+   */
+  providers: Exclude<AuthSsoProvider, 'openframe'>[];
+}
+
 export interface LoginFormProps {
   /** Controlled email value */
   email: string;
@@ -24,37 +43,39 @@ export interface LoginFormProps {
   };
   /** Informational status under the email field (e.g. live tenant discovery). `errors.email` wins. */
   emailStatus?: { message: string; variant: 'error' | 'warning' | 'success' | 'muted' };
+  /** A message too long for the field's one-line status, shown in a notice row under the field. */
+  notice?: string;
   /**
-   * SSO providers, rendered ABOVE the email field with a divider between the two. Always visible;
-   * gate clickability with `ssoDisabled` / `ssoEnabledProviders`.
+   * The generic providers, under the email field behind `dividerLabel`. They need nothing typed: the
+   * server resolves the organization from the identity the provider asserts. With `tenantMethods`
+   * they follow the organization's own methods; pass `[]` to offer only those.
    */
   ssoProviders: AuthSsoProvider[];
   onSsoClick?: (provider: AuthSsoProvider) => void;
-  /** Disables every provider button (e.g. until the email passes discovery). */
+  /** Disables every provider button (e.g. while the typed email is being looked up). */
   ssoDisabled?: boolean;
-  /** When set, only these providers are clickable; the rest stay disabled. */
+  /** When set, only these generic providers are clickable; the rest stay disabled. */
   ssoEnabledProviders?: AuthSsoProvider[];
   /** Verb prefix for provider buttons, e.g. "Continue with". */
   ssoActionLabel?: string;
-  /** Label on the divider between the provider buttons and the email field. */
+  /** Label on the divider above the generic providers. */
   dividerLabel?: string;
   /**
-   * The discovered tenant's own SSO options, rendered UNDER the email field — unlike `ssoProviders`
-   * above, these depend on knowing the tenant, so they cannot be offered before an address is
-   * typed. Shares `onSsoClick`.
-   *
-   * Three states, and the empty array is not the same as nothing: `undefined` means discovery has
-   * not resolved a tenant yet and the slot stays empty, while `[]` means it resolved and the tenant
-   * has none — which is an answer worth showing rather than silence.
+   * The organization the typed email resolved to. Its methods render above the generic block, under
+   * a heading that names it, so the switch from "any account" to "this organization's sign-in" is
+   * visible rather than a silent change of what the same buttons do.
    */
-  customSsoProviders?: AuthSsoProvider[];
-  /** Shown in place of the custom SSO buttons when the resolved tenant has none configured. */
-  noCustomSsoLabel?: string;
+  tenantMethods?: LoginFormTenantMethods;
   /** Primary submit under the email field. Omit the handler to hide the button. */
   onSubmitClick?: () => void;
   submitLabel?: string;
   /** Disables just the primary submit (fields stay editable). */
   submitDisabled?: boolean;
+  /**
+   * Enter in the email field when there is no submit button, e.g. to look the address up now
+   * instead of after a typing pause. With `onSubmitClick` set, Enter drives that instead.
+   */
+  onEmailEnter?: () => void;
   /** Overrides the default heading. */
   title?: string;
   /** Overrides the default sub-heading. */
@@ -70,11 +91,10 @@ export interface LoginFormProps {
 }
 
 /**
- * Login form (Login tab). Presentational + controlled — the consumer owns
- * state, validation and discovery. Single-screen design: the provider buttons come first and need
- * nothing typed, then the email field below them. Whether the providers are gated is the
- * consumer's call via `ssoDisabled`; the identity-first flows leave them open, because the server
- * resolves the tenant from the identity the provider asserts.
+ * Login form (Login tab). Presentational + controlled — the consumer owns state, validation and
+ * discovery. Email first, sign-in methods under it: everything that changes once the email is known
+ * sits below the field, and the block changes as a whole. Before that the generic providers are
+ * there and need nothing typed; whether they are gated is the consumer's call via `ssoDisabled`.
  */
 export function LoginForm({
   email,
@@ -84,17 +104,18 @@ export function LoginForm({
   disabled = false,
   errors,
   emailStatus,
+  notice,
   ssoProviders,
   onSsoClick,
   ssoDisabled = false,
   ssoEnabledProviders,
   ssoActionLabel = 'Continue with',
-  dividerLabel = 'or continue with OpenFrame SSO',
-  customSsoProviders,
-  noCustomSsoLabel = 'No additional SSO configurations for this domain',
+  dividerLabel = 'or continue with',
+  tenantMethods,
   onSubmitClick,
   submitLabel = 'Continue',
   submitDisabled = false,
+  onEmailEnter,
   title = 'Login to OpenFrame',
   subtitle = 'Enter your email to access your organization.',
   termsUrl,
@@ -102,15 +123,20 @@ export function LoginForm({
   className,
 }: LoginFormProps) {
   const fieldDisabled = disabled || loading;
+  const providersDisabled = fieldDisabled || ssoDisabled;
 
   // Validation messages are deferred while the user is typing (shown on blur or after a pause).
   const emailErr = useDeferredError(errors?.email, email);
 
-  // Enter drives the same action as the visible button, under the same gate. A form with no
-  // submit (the Login tab, where the providers are the only way on) simply does nothing.
+  // Enter drives the same action as the visible button, under the same gate. A held key's repeats
+  // are not new presses: each would re-run an action that can fail fast (a lookup while offline).
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key !== 'Enter' || fieldDisabled || submitDisabled) return;
-    onSubmitClick?.();
+    if (event.key !== 'Enter' || event.repeat || fieldDisabled) return;
+    if (onSubmitClick) {
+      if (!submitDisabled) onSubmitClick();
+      return;
+    }
+    onEmailEnter?.();
   };
 
   return (
@@ -126,21 +152,6 @@ export function LoginForm({
         <p className="text-ods-text-secondary text-h4">{subtitle}</p>
       </div>
 
-      {/* Providers come FIRST. They need nothing typed, and putting the email above them taught
-          people to fill it in before tapping one — the behaviour that made a provider button look
-          broken while it waited on a field it never needed. */}
-      {ssoProviders.length > 0 && (
-        <SsoProviderButtons
-          providers={ssoProviders}
-          onSsoClick={onSsoClick}
-          actionLabel={ssoActionLabel}
-          disabled={disabled || loading || ssoDisabled}
-          enabledProviders={ssoEnabledProviders}
-        />
-      )}
-
-      {ssoProviders.length > 0 && <LabeledDivider label={dividerLabel} />}
-
       {/* Email */}
       <Input
         type="email"
@@ -155,28 +166,21 @@ export function LoginForm({
         onKeyDown={handleKeyDown}
       />
 
-      {customSsoProviders &&
-        (customSsoProviders.length > 0 ? (
-          <SsoProviderButtons
-            providers={customSsoProviders}
-            onSsoClick={onSsoClick}
-            actionLabel={ssoActionLabel}
-            disabled={disabled || loading}
-          />
-        ) : (
-          // Same footprint as the button it stands in for, so nothing shifts when a tenant does
-          // have options. Tokens are the design's: soft-grey surface, grey text and icon, the
-          // bold-body step, a 24px icon, and 12/16 for the inset and the gap.
-          <div
-            role="status"
-            // A minimum, not a fixed height: a consumer's `noCustomSsoLabel` can run to several lines
-            // at phone width, and a fixed row clipped it.
-            className="flex min-h-11 w-full items-center gap-[var(--spacing-system-m)] rounded-md bg-ods-bg-surface px-[var(--spacing-system-s)] py-[var(--spacing-system-s)] text-ods-text-secondary text-h3 md:min-h-12"
-          >
-            <AlertTriangleIcon className="h-6 w-6 shrink-0" />
-            {noCustomSsoLabel}
-          </div>
-        ))}
+      {notice && (
+        // Tokens are the design's: soft-grey surface, grey text and icon, the bold-body step, a 24px
+        // icon, and 12/16 for the inset and the gap.
+        <div
+          role="status"
+          // A minimum, not a fixed height: the notice can run to several lines at phone width.
+          className={cn(
+            'flex min-h-11 w-full items-center gap-[var(--spacing-system-m)] rounded-md bg-ods-bg-surface px-[var(--spacing-system-s)] py-[var(--spacing-system-s)] text-ods-text-secondary text-h3 md:min-h-12',
+            ENTER_ANIMATION,
+          )}
+        >
+          <AlertTriangleIcon className="h-6 w-6 shrink-0" />
+          {notice}
+        </div>
+      )}
 
       {onSubmitClick && (
         // Full width on a phone, half the row and right-aligned from `md` up, matching the design.
@@ -197,6 +201,59 @@ export function LoginForm({
         </div>
       )}
 
+      {(tenantMethods || ssoProviders.length > 0) && (
+        // One block, so an organization's methods replace the generic set as a whole: the key mounts
+        // it anew when they arrive, and every row of it eases in, not only the rows that are new.
+        // Going back to the generic set swaps without a transition, as the prototype does.
+        <div
+          key={tenantMethods ? `tenant:${tenantMethods.name ?? ''}` : 'generic'}
+          role="group"
+          aria-label="Sign-in methods"
+          className={cn('flex flex-col gap-[var(--spacing-system-l)]', tenantMethods && ENTER_ANIMATION)}
+        >
+          {tenantMethods && (
+            <>
+              <LabeledDivider label={`Sign-in methods for ${tenantMethods.name || 'your organization'}`} />
+              {tenantMethods.openframe && (
+                // Not configured with anyone's credentials, so it carries no tag.
+                <SsoProviderButtons
+                  providers={['openframe']}
+                  onSsoClick={onSsoClick}
+                  actionLabel={ssoActionLabel}
+                  disabled={providersDisabled}
+                />
+              )}
+              {tenantMethods.providers.length > 0 && (
+                <SsoProviderButtons
+                  providers={tenantMethods.providers}
+                  onSsoClick={onSsoClick}
+                  actionLabel={ssoActionLabel}
+                  disabled={providersDisabled}
+                  tag={tenantMethods.name}
+                />
+              )}
+            </>
+          )}
+
+          {ssoProviders.length > 0 && (
+            <>
+              {/* Under an organization heading with nothing above it, a second divider would only
+                separate the heading from its own buttons. */}
+              {(!tenantMethods || tenantMethods.openframe || tenantMethods.providers.length > 0) && (
+                <LabeledDivider label={dividerLabel} />
+              )}
+              <SsoProviderButtons
+                providers={ssoProviders}
+                onSsoClick={onSsoClick}
+                actionLabel={ssoActionLabel}
+                disabled={providersDisabled}
+                enabledProviders={ssoEnabledProviders}
+              />
+            </>
+          )}
+        </div>
+      )}
+
       {termsUrl && privacyPolicyUrl && <LegalLinks termsUrl={termsUrl} privacyPolicyUrl={privacyPolicyUrl} />}
     </div>
   );

package/src/components/features/auth/sso-providers.tsx

@@ -2,6 +2,7 @@
 
 import { requireIcon, type IconComponent } from '../../chat/utils/icon-loading';
 import { Button } from '../../ui/button';
+import { StatusBadge } from '../../ui/status-badge';
 
 /** SSO providers offered on the auth forms. */
 export type AuthSsoProvider = 'openframe' | 'google' | 'microsoft' | 'apple';
@@ -34,6 +35,12 @@ export interface SsoProviderButtonsProps {
    * `disabled` still wins over this list.
    */
   enabledProviders?: AuthSsoProvider[];
+  /**
+   * A stamp on every button naming who configured these providers — e.g. the organization whose
+   * own Google Workspace a "Continue with Google" button signs in through, which is not the same
+   * button as the generic one.
+   */
+  tag?: string;
 }
 
 /** Stacked full-width SSO provider buttons shared by the auth forms. */
@@ -43,6 +50,7 @@ export function SsoProviderButtons({
   actionLabel = 'Continue with',
   disabled = false,
   enabledProviders,
+  tag,
 }: SsoProviderButtonsProps) {
   return (
     <div className="flex flex-col gap-[var(--spacing-system-l)]">
@@ -62,6 +70,19 @@ export function SsoProviderButtons({
             onClick={() => onSsoClick?.(provider)}
           >
             {`${actionLabel} ${meta.name}`}
+            {tag && (
+              // A child, not `rightIcon`: the Button lays its children out through a `contents` span,
+              // so the badge is a flex item of the button itself and can give up width (`min-w-0`)
+              // where a long organization name would otherwise push the label out of a phone-width
+              // button. `block` over its inline-flex, because an ellipsis only renders on a block box.
+              <StatusBadge
+                text={tag}
+                variant="button"
+                singleLine
+                title={tag}
+                className="block min-w-0 max-w-32 truncate"
+              />
+            )}
           </Button>
         );
       })}