@opengeni/react 3.7.0-canary.0 → 3.7.0-canary.1

package/src/components/session-commands-panel.tsx

@@ -0,0 +1,113 @@
+import { ChevronRightIcon, Loader2Icon, SquareIcon } from "lucide-react";
+import { useState } from "react";
+import type { UseSessionBackgroundCommandsResult } from "../hooks/use-session-background-commands";
+import { formatClockTime } from "../lib/format";
+
+/** The current session's live commands. Settled commands belong to the timeline. */
+export function SessionCommandsPanel({
+  commands: state,
+  readOnly = false,
+}: {
+  commands: UseSessionBackgroundCommandsResult;
+  readOnly?: boolean;
+}) {
+  const [pending, setPending] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const active = state.commands.filter(
+    (command) => command.state === "running" || command.state === "stopping",
+  );
+  const stop = async (id: string) => {
+    setPending(id);
+    setError(null);
+    try {
+      await state.cancel(id);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Stop was not confirmed. Try again.");
+    } finally {
+      setPending(null);
+    }
+  };
+  return (
+    <div className="space-y-2 text-og-xs" data-og-session-commands="">
+      {state.loading && active.length === 0 ? (
+        <p role="status" className="text-og-fg-muted">
+          Loading commands…
+        </p>
+      ) : null}
+      {state.error ? (
+        <div role="alert" className="flex items-center justify-between gap-2 text-og-danger">
+          <span>Commands unavailable.</span>
+          <button
+            type="button"
+            className="underline outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/40"
+            onClick={() => void state.refresh()}
+          >
+            Retry
+          </button>
+        </div>
+      ) : null}
+      {!state.loading && !state.error && active.length === 0 ? (
+        <p role="status" className="text-og-fg-muted">
+          No background commands running.
+        </p>
+      ) : null}
+      {active.length > 0 ? (
+        <ul className="max-h-64 overflow-y-auto overscroll-contain divide-y divide-og-border/40">
+          {active.map((command) => (
+            <li key={command.id} className="flex items-start gap-3 py-2 first:pt-0 last:pb-0">
+              <div className="min-w-0 flex-1">
+                <details className="group/command">
+                  <summary
+                    className="flex cursor-pointer list-none items-center gap-1.5 rounded-og-sm font-mono text-og-fg outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/40"
+                    title="Expand command"
+                  >
+                    <ChevronRightIcon className="size-3 shrink-0 text-og-fg-subtle transition-transform group-open/command:rotate-90" />
+                    <span className="truncate">
+                      {command.commandPreview || "Background command"}
+                    </span>
+                  </summary>
+                  <div className="mt-2 space-y-1">
+                    <p className="whitespace-pre-wrap break-all font-mono text-og-fg-muted">
+                      {command.commandPreview || "Background command"}
+                    </p>
+                    <time
+                      className="block text-og-fg-subtle"
+                      dateTime={command.startedAt}
+                      title={new Date(command.startedAt).toLocaleString()}
+                    >
+                      Started {formatClockTime(command.startedAt)}
+                    </time>
+                  </div>
+                </details>
+                <p className="mt-1 text-og-fg-subtle">
+                  {command.state === "stopping" ? "Stopping…" : "Running"}
+                </p>
+              </div>
+              {!readOnly ? (
+                <button
+                  type="button"
+                  aria-label={`Stop ${command.commandPreview || "background command"}`}
+                  disabled={pending !== null || command.state === "stopping"}
+                  onClick={() => void stop(command.id)}
+                  className="inline-flex min-h-7 shrink-0 items-center gap-1 rounded-og-sm px-2 text-og-fg-muted outline-hidden hover:bg-og-surface-3/70 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:opacity-50 pointer-coarse:min-h-11"
+                >
+                  {pending === command.id || command.state === "stopping" ? (
+                    <Loader2Icon className="size-3 animate-og-spin motion-reduce:animate-none" />
+                  ) : (
+                    <SquareIcon className="size-3" />
+                  )}
+                  Stop
+                </button>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      {error ? (
+        <p role="alert" className="text-og-danger">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/src/components/session-conversation.tsx

@@ -0,0 +1,141 @@
+import { useRef, type CSSProperties } from "react";
+import { useOpenGeni, type ClientOverride } from "../session-context";
+import { useWorkspaceModelCatalog } from "../hooks/use-available-models";
+import { ModelPolicyPicker } from "./model-policy-picker";
+import { useSessionEvents } from "../hooks/use-session-events";
+import { useSession } from "../hooks/use-session";
+import { useTurnQueue } from "../hooks/use-turn-queue";
+import { useComposer } from "../hooks/use-composer";
+import { useHumanInputRequests } from "../hooks/use-human-input";
+import { ChatComposer, type ChatComposerProps } from "./chat-composer";
+import { QueueSurface } from "./queue-surface";
+import { HumanInputSurface } from "./human-input-surface";
+import { MessageTimeline } from "./message-timeline";
+import { conversationTimeline } from "../conversation-timeline";
+import { cn } from "../lib/cn";
+
+export type SessionConversationProps = ClientOverride & {
+  sessionId: string;
+  className?: string;
+  /** Defaults to filling the host. The host owns available height. */
+  height?: CSSProperties["height"];
+  /** Presentation/custom controls only; queue and delivery wiring stay owned here. */
+  composerProps?: Omit<ChatComposerProps, "composer" | "effectiveControl" | "queuedAheadCount">;
+};
+
+/** Complete existing-session conversation. Uses the provider's normal SDK client
+ * (including Site clients), one shared event feed, and authoritative queue state. */
+export function SessionConversation(props: SessionConversationProps) {
+  return <Conversation key={`${props.workspaceId ?? ""}:${props.sessionId}`} {...props} />;
+}
+
+function Conversation({
+  sessionId,
+  client,
+  workspaceId,
+  className,
+  height = "100%",
+  composerProps,
+}: SessionConversationProps) {
+  const scope = { client, workspaceId };
+  const context = useOpenGeni(scope);
+  const catalog = useWorkspaceModelCatalog({
+    client: context.client,
+    workspaceId: context.workspaceId,
+  });
+  const feed = useSessionEvents(sessionId, scope);
+  const options = { ...scope, events: feed.events };
+  const detail = useSession(sessionId, options);
+  const queue = useTurnQueue(sessionId, options);
+  const human = useHumanInputRequests(sessionId, options);
+  const status = feed.sessionStatus ?? detail.session?.status;
+  const terminal = status === "cancelled";
+  const composer = useComposer(sessionId, {
+    ...options,
+    effectiveControl: queue.effectiveControl ?? detail.session?.effectiveControl,
+    sendDestination: () => (queue.queue.length > 0 || status === "running" ? "queue" : "chat"),
+  });
+  const region = useRef<HTMLDivElement>(null);
+  const error = detail.error ?? feed.error ?? human.error;
+  return (
+    <div
+      className={cn("og-root flex min-h-0 min-w-0 flex-col gap-2 overflow-hidden", className)}
+      ref={region}
+      style={{ height }}
+      data-og-conversation=""
+    >
+      {error && <p role="alert">{error.message}</p>}
+      <MessageTimeline
+        className="min-h-0 flex-1"
+        items={conversationTimeline(feed.timeline, queue, composer)}
+        status={status}
+        hasOlder={feed.hasOlder}
+        loadingOlder={feed.loadingOlder}
+        onLoadOlder={feed.loadOlder}
+        hasNewer={feed.hasNewer}
+        loadingNewer={feed.loadingNewer}
+        onLoadNewer={() => {
+          void feed.loadNewer();
+        }}
+        onJumpToStart={async () => {
+          await feed.loadOldest();
+        }}
+        loadingOldest={feed.loadingOldest}
+        onJumpToLatest={feed.jumpToLatest}
+        onAnnotate={composer.addAnnotation}
+      />
+      <div className="min-h-0 max-h-[40%] shrink-0 overflow-y-auto" data-og-conversation-inputs="">
+        <HumanInputSurface
+          requests={human.requests}
+          onSubmit={async (id, response) => {
+            await human.respond(id, response);
+          }}
+          respondingRequestId={human.respondingRequestId}
+          error={human.mutationError?.message}
+          autoFocus={false}
+        />
+        {terminal ? (
+          <QueueSurface queue={queue} readOnly />
+        ) : (
+          <QueueSurface
+            queue={queue}
+            composer={composer}
+            onRequestComposerFocus={() =>
+              region.current?.querySelector<HTMLTextAreaElement>("textarea")?.focus()
+            }
+          />
+        )}
+      </div>
+      <div className="shrink-0" data-og-conversation-composer="">
+        <ChatComposer
+          {...composerProps}
+          composer={composer}
+          disabled={terminal || composerProps?.disabled}
+          controlsStart={
+            composerProps?.controlsStart ??
+            (composer.policy && (
+              <ModelPolicyPicker
+                rows={catalog.rows}
+                model={composer.policy.model}
+                effort={composer.policy.reasoningEffort}
+                latencyMode={composer.policy.latencyMode}
+                loading={catalog.loading}
+                error={catalog.error?.message}
+                disabled={terminal}
+                sessionKey={sessionId}
+                onModelChange={(model) => composer.setModel?.(model)}
+                onEffortChange={(effort) => composer.setReasoningEffort?.(effort)}
+                onLatencyModeChange={(mode) => composer.setLatencyMode?.(mode)}
+              />
+            ))
+          }
+          responsiveBasis={composerProps?.responsiveBasis ?? "container"}
+          effectiveControl={
+            composer.effectiveControl ?? queue.effectiveControl ?? detail.session?.effectiveControl
+          }
+          queuedAheadCount={queue.queue.length}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/timeline-anchor.tsx

@@ -0,0 +1,91 @@
+import { Component, type ReactNode } from "react";
+
+type Anchor = { element: HTMLElement; key: string | null; text: string | null; top: number };
+export type TimelineAnchor = Anchor[];
+
+/** Read the old DOM immediately before React changes it, not when a fetch starts. */
+export class TimelineBeforeLayout extends Component<{
+  capture: () => void;
+  children: ReactNode;
+}> {
+  getSnapshotBeforeUpdate() {
+    this.props.capture();
+    return null;
+  }
+  componentDidUpdate() {}
+  render() {
+    return this.props.children;
+  }
+}
+
+export function captureTimelineAnchor(scroller: HTMLElement): TimelineAnchor | null {
+  const viewport = scroller.getBoundingClientRect();
+  if (viewport.height <= 0) return null;
+  const groups = Array.from(scroller.querySelectorAll<HTMLElement>("[data-og-group-key]")).filter(
+    (group) => group.getBoundingClientRect().height > 0,
+  );
+  const anchors: TimelineAnchor = [];
+  // A disclosure is the reader's explicit point of interaction. In particular,
+  // anchoring a paragraph below an expanding disclosure would move its button.
+  const focused = scroller.ownerDocument.activeElement;
+  if (
+    focused instanceof HTMLElement &&
+    scroller.contains(focused) &&
+    focused.matches("button[aria-expanded]")
+  ) {
+    const box = focused.getBoundingClientRect();
+    if (box.bottom > viewport.top && box.top < viewport.bottom) {
+      anchors.push({ element: focused, key: null, text: null, top: box.top });
+    }
+  }
+  // A paragraph survives even when earlier deltas reconstruct its containing message.
+  for (const group of groups) {
+    const rect = group.getBoundingClientRect();
+    if (rect.bottom <= viewport.top || rect.top >= viewport.bottom) continue;
+    for (const element of group.querySelectorAll<HTMLElement>("p, li, pre, h1, h2, h3, h4")) {
+      const box = element.getBoundingClientRect();
+      const text = element.textContent;
+      if (box.bottom > viewport.top && box.top < viewport.bottom && text && text.length >= 12) {
+        anchors.push({ element, key: null, text, top: box.top });
+      }
+    }
+  }
+  // Prefer a retained visible row, then a following row. A following row also
+  // anchors the unchanged suffix of a partially loaded message above it.
+  const rows = groups.map((element) => ({
+    element,
+    key: element.getAttribute("data-og-group-key"),
+    text: null,
+    top: element.getBoundingClientRect().top,
+  }));
+  anchors.push(...rows.filter((row) => row.top >= viewport.top));
+  anchors.push(...rows.filter((row) => row.top < viewport.top).reverse());
+  return anchors;
+}
+
+/** Return only the correction native browser anchoring has not already made. */
+export function timelineAnchorCorrection(
+  scroller: HTMLElement,
+  anchors: TimelineAnchor,
+): number | null {
+  let blocks: HTMLElement[] | undefined;
+  const groups = Array.from(scroller.querySelectorAll<HTMLElement>("[data-og-group-key]"));
+  for (const anchor of anchors) {
+    let element: HTMLElement | undefined;
+    if (
+      scroller.contains(anchor.element) &&
+      (!anchor.text || anchor.element.textContent === anchor.text)
+    ) {
+      element = anchor.element;
+    } else if (anchor.key) {
+      element = groups.find((group) => group.getAttribute("data-og-group-key") === anchor.key);
+    } else if (anchor.text) {
+      blocks ??= Array.from(scroller.querySelectorAll<HTMLElement>("p, li, pre, h1, h2, h3, h4"));
+      const matches = blocks.filter((block) => block.textContent === anchor.text);
+      // Repeated boilerplate is not sufficient evidence of retained content.
+      if (matches.length === 1) element = matches[0];
+    }
+    if (element) return element.getBoundingClientRect().top - anchor.top;
+  }
+  return null;
+}

package/src/conversation-timeline.ts

@@ -0,0 +1,83 @@
+import type { ComposerState } from "./hooks/use-composer";
+import type { UseTurnQueueResult } from "./hooks/use-turn-queue";
+import type { TimelineItem, UserMessageItem } from "./timeline/types";
+
+/** Keep pending prompts in the queue, not duplicated in the conversation. */
+export function conversationTimeline(
+  items: TimelineItem[],
+  queue: Pick<UseTurnQueueResult, "queue" | "snapshot" | "acceptedSteers">,
+  composer: Pick<
+    ComposerState,
+    "optimisticMessages" | "retryOptimisticMessage" | "removeOptimisticMessage"
+  >,
+): TimelineItem[] {
+  const queued = new Set(
+    queue.queue
+      .filter((turn) => turn.metadata.delivery !== "steer")
+      .map((turn) => turn.triggerEventId),
+  );
+  const pending = composer.optimisticMessages ?? [];
+  const pendingQueue = new Set(
+    pending
+      .filter(
+        (message) =>
+          message.destination === "queue" &&
+          !(
+            message.turnId &&
+            message.appliedQueueVersion != null &&
+            queue.snapshot &&
+            queue.snapshot.version >= message.appliedQueueVersion &&
+            !queue.queue.some((turn) => turn.id === message.turnId)
+          ),
+      )
+      .map((message) => `user-message:${message.clientEventId}`),
+  );
+  const visible = items.filter(
+    (item) =>
+      item.kind !== "user-message" ||
+      (!queued.has(item.id) && !pendingQueue.has(item.reconciliationKey ?? "")),
+  );
+  const keys = new Set(
+    visible.flatMap((item) => (item.kind === "user-message" ? [item.reconciliationKey] : [])),
+  );
+  const optimistic: UserMessageItem[] = pending
+    .filter(
+      (message) =>
+        !keys.has(`user-message:${message.clientEventId}`) &&
+        !queue.queue.some((turn) => turn.id === message.turnId),
+    )
+    .map((message) => ({
+      kind: "user-message",
+      id: `optimistic:${message.clientEventId}`,
+      reconciliationKey: `user-message:${message.clientEventId}`,
+      text: message.text,
+      annotations: message.annotations.map((annotation, ordinal) => ({ ...annotation, ordinal })),
+      resources: message.resources,
+      tools: [],
+      occurredAt: message.occurredAt,
+      delivery: {
+        state: message.state,
+        ...(message.error ? { error: message.error } : {}),
+        ...(message.state === "failed"
+          ? {
+              onRetry: () => composer.retryOptimisticMessage?.(message.clientEventId),
+              onRemove: () => composer.removeOptimisticMessage?.(message.clientEventId),
+            }
+          : {}),
+      },
+    }));
+  const ids = new Set(visible.map((item) => item.id));
+  const steers: UserMessageItem[] = (queue.acceptedSteers ?? [])
+    .filter((steer) => !ids.has(steer.triggerEventId))
+    .map((steer) => ({
+      kind: "user-message",
+      id: steer.triggerEventId,
+      text: steer.text,
+      annotations: steer.annotations,
+      resources: steer.resources,
+      tools: steer.tools,
+      occurredAt: steer.occurredAt,
+      delivery: { state: steer.state },
+    }));
+  return [...visible, ...optimistic, ...steers];
+}

package/src/hooks/use-session-background-commands.ts

@@ -1,5 +1,5 @@
 import type { SessionBackgroundCommand } from "@opengeni/sdk";
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef } from "react";
 
 import { useOpenGeni, type ClientOverride } from "../provider";
 import { usePolledValue } from "./internal";
@@ -23,28 +23,39 @@ export function useSessionBackgroundCommands(
 ): UseSessionBackgroundCommandsResult {
   const { client, workspaceId } = useOpenGeni(options);
   const enabled = (options.enabled ?? true) && Boolean(sessionId);
-  const load = useCallback(async () => {
-    if (!sessionId) return { commands: [] };
-    if (!client.listSessionBackgroundCommands) {
-      throw new Error("The configured OpenGeni client does not support background commands");
-    }
-    return await client.listSessionBackgroundCommands(workspaceId, sessionId);
-  }, [client, workspaceId, sessionId]);
+  const load = useCallback(
+    async (signal?: AbortSignal) => {
+      if (!sessionId) return { commands: [] };
+      if (!client.listSessionBackgroundCommands) {
+        throw new Error("The configured OpenGeni client does not support background commands");
+      }
+      return await client.listSessionBackgroundCommands(workspaceId, sessionId, { signal });
+    },
+    [client, workspaceId, sessionId],
+  );
   const state = usePolledValue(load, {
     enabled,
     pollIntervalMs: options.pollIntervalMs,
   });
   const refresh = state.refresh;
+  const generation = useRef(0);
+  useEffect(() => {
+    generation.current += 1;
+    return () => {
+      generation.current += 1;
+    };
+  }, [client, workspaceId, sessionId, enabled]);
   const cancel = useCallback(
     async (commandId: string): Promise<void> => {
       if (!sessionId) return;
       if (!client.cancelSessionBackgroundCommand) {
         throw new Error("The configured OpenGeni client does not support background commands");
       }
+      const ticket = generation.current;
       await client.cancelSessionBackgroundCommand(workspaceId, sessionId, commandId);
-      await refresh();
+      if (enabled && ticket === generation.current) await refresh();
     },
-    [client, workspaceId, sessionId, refresh],
+    [client, workspaceId, sessionId, refresh, enabled],
   );
   return {
     commands: state.data?.commands ?? [],

package/src/hooks/use-session-events.ts

@@ -77,7 +77,7 @@ export type UseSessionEventsResult = {
 // Keep every browser history read inside one database batch, including the
 // server's one-row continuation lookahead. A large total session must never
 // turn one lazy page into dozens of sequential database round trips.
-const SESSION_HISTORY_PAGE_SIZE = 255;
+const SESSION_HISTORY_PAGE_SIZE = 1000;
 const INITIAL_FETCH_CAP = 1;
 const OLDER_GROUP_TARGET = 32;
 const OLDER_FETCH_CAP = 2;
@@ -193,6 +193,7 @@ export function useSessionEvents(
   const streamAbortRef = useRef<AbortController | null>(null);
   const streamKeyRef = useRef<string | null>(null);
   const generationRef = useRef(0);
+  const navigationGenerationRef = useRef(0);
   const eventWindowRef = useRef<BrowserSessionEventWindow>(EMPTY_EVENT_WINDOW);
   const sessionStatusRef = useRef<{
     sequence: number;
@@ -205,6 +206,21 @@ export function useSessionEvents(
   // new stream identity cannot expose the previous session's event log.
   const [stateStreamKey, setStateStreamKey] = useState(streamKey);
 
+  // Reopening SSE after a prepend must not cancel the next history page.
+  // Navigation belongs to the session/client lifetime, not the transport.
+  useEffect(() => {
+    navigationGenerationRef.current += 1;
+    loadingOlderRef.current = false;
+    loadingNewerRef.current = false;
+    loadingOldestRef.current = false;
+    setLoadingOlder(false);
+    setLoadingNewer(false);
+    setLoadingOldest(false);
+    return () => {
+      navigationGenerationRef.current += 1;
+    };
+  }, [client, workspaceId, sessionId, after, enabled, fullReplay]);
+
   useEffect(() => {
     // Reset the accumulated log only when the stream identity changes —
     // pausing via `enabled: false` keeps the timeline visible.
@@ -243,10 +259,6 @@ export function useSessionEvents(
     // only the newest dependency generation can mutate refs or React state.
     const generation = generationRef.current + 1;
     generationRef.current = generation;
-    if (loadingOlderRef.current) {
-      loadingOlderRef.current = false;
-      setLoadingOlder(false);
-    }
     if (!sessionId || !streamEnabled) {
       // A page that stayed hidden beyond the live-activity grace deliberately
       // closed its SSE connection. Replaying from the old cursor on return can
@@ -415,6 +427,16 @@ export function useSessionEvents(
           }
           const status = observeSessionStatus(window.events, sessionStatusRef);
           const retained = boundBrowserSessionEventWindow(window.events);
+          // A replacement tail retires requests against the discarded window.
+          // Ordinary SSE reconnects preserve navigation, but splicing an old
+          // page into this new tail could leave an inaccessible history gap.
+          navigationGenerationRef.current += 1;
+          loadingOlderRef.current = false;
+          loadingNewerRef.current = false;
+          loadingOldestRef.current = false;
+          setLoadingOlder(false);
+          setLoadingNewer(false);
+          setLoadingOldest(false);
           eventWindowRef.current = retained;
           oldestSequenceRef.current = retained.events[0]?.sequence ?? window.oldestSequence;
           newestSequenceRef.current =
@@ -543,7 +565,7 @@ export function useSessionEvents(
           setHasOlder(false);
           return false;
         }
-        const generation = generationRef.current;
+        const generation = navigationGenerationRef.current;
         loadingOlderRef.current = true;
         setLoadingOlder(true);
         let published = false;
@@ -554,7 +576,7 @@ export function useSessionEvents(
             targetGroups: OLDER_GROUP_TARGET,
             maxFetches: OLDER_FETCH_CAP,
           });
-          if (generationRef.current !== generation) {
+          if (navigationGenerationRef.current !== generation) {
             return false;
           }
           if (window.events.length === 0) {
@@ -635,7 +657,7 @@ export function useSessionEvents(
           published = true;
           return olderStillAvailable;
         } finally {
-          if (!published) {
+          if (!published && navigationGenerationRef.current === generation) {
             loadingOlderRef.current = false;
             setLoadingOlder(false);
           }
@@ -648,7 +670,7 @@ export function useSessionEvents(
     if (!sessionId || navigationBusy() || !hasOlderRef.current) {
       return false;
     }
-    const generation = generationRef.current;
+    const generation = navigationGenerationRef.current;
     loadingOldestRef.current = true;
     setLoadingOldest(true);
     let published = false;
@@ -659,7 +681,7 @@ export function useSessionEvents(
         targetGroups: OLDEST_GROUP_TARGET,
         maxFetches: OLDEST_FETCH_CAP,
       });
-      if (generationRef.current !== generation) {
+      if (navigationGenerationRef.current !== generation) {
         return false;
       }
       if (window.events.length === 0) {
@@ -700,7 +722,7 @@ export function useSessionEvents(
       published = true;
       return newer;
     } finally {
-      if (!published) {
+      if (!published && navigationGenerationRef.current === generation) {
         loadingOldestRef.current = false;
         setLoadingOldest(false);
       }
@@ -717,7 +739,7 @@ export function useSessionEvents(
       setHasNewer(false);
       return false;
     }
-    const generation = generationRef.current;
+    const generation = navigationGenerationRef.current;
     loadingNewerRef.current = true;
     setLoadingNewer(true);
     let published = false;
@@ -728,7 +750,7 @@ export function useSessionEvents(
         targetGroups: NEWER_GROUP_TARGET,
         maxFetches: NEWER_FETCH_CAP,
       });
-      if (generationRef.current !== generation) {
+      if (navigationGenerationRef.current !== generation) {
         return false;
       }
       if (window.events.length === 0) {
@@ -800,7 +822,7 @@ export function useSessionEvents(
       published = true;
       return newer;
     } finally {
-      if (!published) {
+      if (!published && navigationGenerationRef.current === generation) {
         loadingNewerRef.current = false;
         setLoadingNewer(false);
       }

package/src/hooks/use-session.ts

@@ -38,6 +38,10 @@ export function isTitleEvent(event: Pick<SessionEvent, "type">): boolean {
   return event.type === "session.title_set";
 }
 
+function isSessionDetailEvent(event: Pick<SessionEvent, "type">): boolean {
+  return isTitleEvent(event) || event.type.startsWith("session.command.");
+}
+
 /** Fetch one session (with optional polling), live-patching its title on `session.title_set`. */
 export function useSession(
   sessionId: string | null | undefined,
@@ -99,10 +103,27 @@ export function useSession(
     [base, override],
   );
 
+  const sharedEvents = options.events;
+
   // Live-patch the title on auto (agent) + cross-client (user/agent) renames so
   // the UI reflects the new title without polling or a full re-fetch.
   const onTitleEvent = useCallback(
     (event: SessionEvent) => {
+      // Reconciliation emits only the last matching member of a shared batch.
+      // A later title must not hide an earlier command activity change.
+      if (
+        sharedEvents?.some(
+          (item) =>
+            item.sessionId === sessionId &&
+            item.type.startsWith("session.command.") &&
+            item.sequence > (base?.lastSequence ?? -1),
+        )
+      ) {
+        void refresh();
+      } else if (event.type.startsWith("session.command.")) {
+        if (!base || event.sequence > base.lastSequence) void refresh();
+        return;
+      }
       // The fetched session row is the authoritative title projection through
       // lastSequence. Shared feeds may replay that historical tail after the
       // fetch; applying it would undo a row-only migration quarantine. Only an
@@ -122,9 +143,9 @@ export function useSession(
         return { ...next, title, titleSource: source };
       });
     },
-    [base],
+    [base, refresh, sharedEvents, sessionId],
   );
-  useSessionEventTrigger(client, workspaceId, sessionId, isTitleEvent, onTitleEvent, {
+  useSessionEventTrigger(client, workspaceId, sessionId, isSessionDetailEvent, onTitleEvent, {
     enabled,
     ...(options.events !== undefined ? { events: options.events } : {}),
   });