@agent-native/core 0.85.6 → 0.86.0

package/corpus/core/src/client/AssistantChat.tsx

@@ -633,10 +633,40 @@ function toolCallPartHasResult(part: unknown): boolean {
   return candidate.type === "tool-call" && "result" in candidate;
 }
 
-function collectRenderedToolCallStates(
-  messages: readonly unknown[],
-): Map<string, { hasResult: boolean }> {
-  const states = new Map<string, { hasResult: boolean }>();
+/**
+ * Identity fingerprint for a tool-call part that survives across readers: two
+ * readers of the same run assign unrelated synthetic toolCallIds until both
+ * have seen the server id, but the tool name + serialized args are identical
+ * for the same logical call (argsText is `JSON.stringify(input)` on both
+ * sides). Activity placeholders (no args yet) return null — an empty-args
+ * fingerprint would over-match unrelated calls of the same tool.
+ */
+function toolCallFingerprintFromContentPart(part: unknown): string | null {
+  if (!part || typeof part !== "object") return null;
+  const candidate = part as {
+    type?: unknown;
+    toolName?: unknown;
+    argsText?: unknown;
+    activity?: unknown;
+  };
+  if (candidate.type !== "tool-call") return null;
+  if (candidate.activity === true) return null;
+  const name =
+    typeof candidate.toolName === "string" && candidate.toolName
+      ? candidate.toolName
+      : null;
+  const argsText =
+    typeof candidate.argsText === "string" ? candidate.argsText : "";
+  if (!name || !argsText) return null;
+  return `${name}${argsText}`;
+}
+
+function collectRenderedToolCallStates(messages: readonly unknown[]): {
+  byId: Map<string, { hasResult: boolean }>;
+  completedFingerprints: Set<string>;
+} {
+  const byId = new Map<string, { hasResult: boolean }>();
+  const completedFingerprints = new Set<string>();
   for (const message of messages) {
     const msg = (message as { message?: unknown })?.message ?? message;
     const content = (msg as { content?: unknown })?.content;
@@ -644,13 +674,18 @@ function collectRenderedToolCallStates(
     for (const part of content) {
       const id = toolCallIdFromContentPart(part);
       if (!id) continue;
-      const existing = states.get(id);
-      states.set(id, {
-        hasResult: Boolean(existing?.hasResult || toolCallPartHasResult(part)),
+      const hasResult = toolCallPartHasResult(part);
+      const existing = byId.get(id);
+      byId.set(id, {
+        hasResult: Boolean(existing?.hasResult || hasResult),
       });
+      if (hasResult) {
+        const fingerprint = toolCallFingerprintFromContentPart(part);
+        if (fingerprint) completedFingerprints.add(fingerprint);
+      }
     }
   }
-  return states;
+  return { byId, completedFingerprints };
 }
 
 export function dedupeReconnectContentAgainstMessages(
@@ -658,17 +693,35 @@ export function dedupeReconnectContentAgainstMessages(
   messages: readonly unknown[],
 ): ContentPart[] {
   if (content.length === 0 || messages.length === 0) return content;
-  const renderedToolCallStates = collectRenderedToolCallStates(messages);
-  if (renderedToolCallStates.size === 0) return content;
+  const { byId, completedFingerprints } =
+    collectRenderedToolCallStates(messages);
+  if (byId.size === 0) return content;
 
   let changed = false;
   const filtered = content.filter((part) => {
     const id = toolCallIdFromContentPart(part);
-    const existing = id ? renderedToolCallStates.get(id) : undefined;
-    if (!id || !existing) return true;
-    if (toolCallPartHasResult(part) && !existing.hasResult) return true;
-    changed = true;
-    return false;
+    if (!id) return true;
+    const existing = byId.get(id);
+    if (existing) {
+      if (toolCallPartHasResult(part) && !existing.hasResult) return true;
+      changed = true;
+      return false;
+    }
+    // Fingerprint fallback for the id-convergence window: a reconnect part
+    // that is still PENDING while the rendered messages already show the same
+    // call (same tool + same serialized args) completed is a replay artifact —
+    // dropping it removes the "one spinning, one done" duplicate pair. Only
+    // pending parts are dropped by fingerprint: completed-vs-completed keeps
+    // the strict id match so a legitimately repeated identical call is never
+    // hidden.
+    if (!toolCallPartHasResult(part)) {
+      const fingerprint = toolCallFingerprintFromContentPart(part);
+      if (fingerprint && completedFingerprints.has(fingerprint)) {
+        changed = true;
+        return false;
+      }
+    }
+    return true;
   });
   return changed ? filtered : content;
 }
@@ -1232,6 +1285,14 @@ const AssistantChatInner = forwardRef<
   const threadRuntime = useThreadRuntime();
   const composerRuntime = useComposerRuntime();
   const isRuntimeRunning = thread.isRunning;
+  // Latest-value ref so long-lived async closures (the reconnect reader, its
+  // watchdog) can check the CURRENT adapter-runtime state instead of the value
+  // captured when they were created. Load-bearing for single-reader ownership:
+  // the adapter's own stream and AssistantChat's reconnect reader must never
+  // both be attached to the same run (dual accumulators render duplicate tool
+  // cards and parallel duplicate streaming text).
+  const isRuntimeRunningRef = useRef(isRuntimeRunning);
+  isRuntimeRunningRef.current = isRuntimeRunning;
   const messages = thread.messages;
   const { suggestions: resolvedSuggestions } = useAgentDynamicSuggestionsResult(
     {
@@ -1544,6 +1605,11 @@ const AssistantChatInner = forwardRef<
   // True during the 250ms continuation window and startup of the next chunk
   // (adapter's auto-continue delay before POSTing the next chunk).
   const [isAutoResuming, setIsAutoResuming] = useState(false);
+  // Latest-value ref for the same single-reader checks as isRuntimeRunningRef:
+  // during an adapter auto-continuation the runtime can flick false between
+  // chunks while the adapter is still driving the turn.
+  const isAutoResumingRef = useRef(isAutoResuming);
+  isAutoResumingRef.current = isAutoResuming;
   const autoResumeTimerRef = useRef<number | null>(null);
   const [optimisticRunning, setOptimisticRunning] = useState(false);
   const [runningActivityLabel, setRunningActivityLabel] = useState<
@@ -1889,6 +1955,16 @@ const AssistantChatInner = forwardRef<
       const runId = String(runInfo.runId);
       if (wasRecentlyStoppedRun(runId)) return false;
       if (reconnectRunIdRef.current === runId) return true;
+      // SINGLE-READER OWNERSHIP: never start a second reader while the
+      // adapter's own stream is live (or mid auto-continuation) for this
+      // thread. Two concurrent readers of the same run render two independent
+      // accumulators — duplicate tool cards (one spinning, one static) and the
+      // same assistant text streaming twice in parallel. The adapter owns the
+      // run whenever its runtime is active; this reconnect reader exists only
+      // for runs with NO live adapter stream (page reload, tab restore).
+      if (isRuntimeRunningRef.current || isAutoResumingRef.current) {
+        return false;
+      }
 
       reconnectRunIdRef.current = runId;
       const afterSeq = resolveReconnectAfterSeq(threadId, runId);
@@ -1928,6 +2004,16 @@ const AssistantChatInner = forwardRef<
             return;
           }
           const info = (await res.json()) as ActiveRunLookup;
+          // SINGLE-READER OWNERSHIP: if the adapter runtime came alive while
+          // this reader was attached (user sent a message, adapter adopted the
+          // thread's run), this reader is now the duplicate — kill it. The
+          // false→true runtime-transition effect also unwinds the UI state;
+          // this covers the reader itself.
+          if (isRuntimeRunningRef.current) {
+            abortCtrl.abort();
+            clearInterval(watchdog);
+            return;
+          }
           if (isReplayableTerminalRun(info)) {
             return;
           }
@@ -2240,7 +2326,10 @@ const AssistantChatInner = forwardRef<
             }),
           );
         }
-        if (!loaded) {
+        // Skip the final refresh when the adapter runtime is live — importing
+        // thread_data mid-stream would clobber the adapter's in-flight message
+        // (the takeover path already discarded this reader's content).
+        if (!loaded && !isRuntimeRunningRef.current) {
           const repo = await refreshThreadFromServer();
           if (afterSeq > 0 || repoHasAssistantMessage(repo)) {
             setReconnectContent([]);
@@ -2259,6 +2348,12 @@ const AssistantChatInner = forwardRef<
   const reconnectActiveRunForThread =
     useCallback(async (): Promise<boolean> => {
       if (!threadId) return false;
+      // Single-reader ownership (see startReconnectToRun, which re-checks
+      // after the async probe): skip the probe entirely while the adapter's
+      // own stream is driving this thread.
+      if (isRuntimeRunningRef.current || isAutoResumingRef.current) {
+        return false;
+      }
       try {
         const storedActiveRun = getActiveRun();
         const runRes = await fetch(
@@ -2955,7 +3050,21 @@ const AssistantChatInner = forwardRef<
     const wasRunning = prevIsRuntimeRunningRef.current;
     prevIsRuntimeRunningRef.current = isRuntimeRunning;
     if (isRuntimeRunning && !wasRunning) {
-      if (reconnectFrozen) {
+      // SINGLE-READER OWNERSHIP: the adapter runtime just took over (a new run
+      // started or an adopted run resumed). Any live reconnect reader is now a
+      // duplicate accumulator — abort it and DISCARD its content; the adapter's
+      // stream renders the canonical message. Null the run ref first so the
+      // reader's own cleanup paths (which all check reconnectRunIdRef) no-op.
+      if (reconnectRunIdRef.current !== null) {
+        reconnectRunIdRef.current = null;
+        reconnectAbortRef.current?.abort();
+        reconnectAbortRef.current = null;
+        setIsReconnecting(false);
+        setReconnectContent([]);
+        setReconnectFrozen(false);
+        reconnectCanMaterializeRef.current = false;
+        reconnectTailOnlyRef.current = false;
+      } else if (reconnectFrozen) {
         setReconnectFrozen(false);
         setReconnectContent([]);
         reconnectCanMaterializeRef.current = false;

package/corpus/core/src/client/agent-chat-adapter.ts

@@ -146,11 +146,12 @@ const STARTUP_RESPONSE_TIMEOUT_MS = 45_000;
 const BACKGROUND_FOLLOW_POLL_INTERVAL_MS = 1_000;
 // How long the follow loop tolerates seeing NO active run for this turn before
 // treating the turn as ended. The server pre-inserts the successor row before
-// the old chunk completes, so a healthy chain never shows an idle gap; 45s
-// also comfortably covers the server's 25s unclaimed-handoff grace + sweep
-// cadence so a reaped handoff resurfaces as a terminal errored run (which the
-// follow loop replays) before this window expires.
-const BACKGROUND_FOLLOW_IDLE_TIMEOUT_MS = 45_000;
+// the old chunk completes, so a healthy chain never shows an idle gap; allow a
+// wider window here because the server's unclaimed-handoff recovery can span
+// the 25s grace plus sweep/DB latency. This stays below the background
+// reconnect stuck threshold, but gives the server-owned recovery brain time to
+// surface the successor or terminal errored run before the client reports idle.
+const BACKGROUND_FOLLOW_IDLE_TIMEOUT_MS = 150_000;
 
 /**
  * User-facing copy for the server's background terminal reasons

package/corpus/core/src/client/app-providers.tsx

@@ -65,8 +65,8 @@ export interface AppProvidersProps {
 
   /**
    * Default theme passed to next-themes `ThemeProvider`.
-   * Defaults to `"system"`.  Dark-first templates (videos, slides, macros,
-   * analytics) pass `"dark"`.
+   * Defaults to `"system"`.  Dark-first templates (slides, macros, analytics)
+   * pass `"dark"`.
    */
   defaultTheme?: string;
 

package/corpus/core/src/client/collab/index.ts

@@ -48,4 +48,35 @@ export {
 export {
   RemoteSelectionRings,
   type RemoteSelectionRingsProps,
+  type SelectionDescriptor,
 } from "../components/RemoteSelectionRings.js";
+export {
+  RecentEditHighlights,
+  type RecentEditHighlightsProps,
+} from "../components/RecentEditHighlights.js";
+export {
+  appendRecentEdit,
+  collectRecentEdits,
+  publishRecentEdit,
+  useRecentEdits,
+  RECENT_EDITS_MAX,
+  RECENT_EDIT_TTL_MS,
+  type RecentEdit,
+  type RecentEditDescriptor,
+  type AttributedRecentEdit,
+  type UseRecentEditsOptions,
+} from "../../collab/recent-edits.js";
+export {
+  useCollabUndo,
+  useLocalOpUndo,
+  createLocalOpUndoController,
+  type UseCollabUndoOptions,
+  type UseCollabUndoResult,
+  type CollabUndoScope,
+  type UseLocalOpUndoOptions,
+  type UseLocalOpUndoResult,
+  type LocalOpUndoEntry,
+  type LocalOpUndoController,
+  type CreateLocalOpUndoOptions,
+  type UndoKeyboardOptions,
+} from "../../collab/undo.js";

package/corpus/core/src/client/components/LiveCursorOverlay.tsx

@@ -109,6 +109,9 @@ const CursorLabel = memo(function CursorLabel({
           position: "absolute",
           left: 31,
           top: 31,
+          display: "flex",
+          alignItems: "center",
+          gap: 5,
           backgroundColor: color,
           color: "#fff",
           fontSize: 12,
@@ -118,11 +121,23 @@ const CursorLabel = memo(function CursorLabel({
           borderRadius: 2,
           whiteSpace: "nowrap",
           boxShadow: "0 5px 12px rgba(15, 23, 42, 0.16)",
-          maxWidth: 120,
+          maxWidth: 150,
           overflow: "hidden",
           textOverflow: "ellipsis",
         }}
       >
+        {(other.user as { avatarUrl?: string }).avatarUrl ? (
+          <img
+            src={(other.user as { avatarUrl?: string }).avatarUrl}
+            alt=""
+            style={{
+              width: 14,
+              height: 14,
+              borderRadius: "50%",
+              flexShrink: 0,
+            }}
+          />
+        ) : null}
         {label}
       </div>
     </div>

package/corpus/core/src/client/components/PresenceBar.tsx

@@ -120,7 +120,20 @@ function UserAvatar({
             if (e.key === "Enter" || e.key === " ") onClick?.();
           }}
         >
-          {initial}
+          {user.avatarUrl ? (
+            <img
+              src={user.avatarUrl}
+              alt=""
+              style={{
+                width: "100%",
+                height: "100%",
+                borderRadius: "50%",
+                objectFit: "cover",
+              }}
+            />
+          ) : (
+            initial
+          )}
         </div>
       </TooltipTrigger>
       <TooltipContent side="bottom">

package/corpus/core/src/client/components/RecentEditHighlights.tsx

@@ -0,0 +1,219 @@
+/**
+ * RecentEditHighlights — lingering, fading highlights over regions another
+ * participant (human or agent) just edited, with their name/avatar flag.
+ *
+ * The Google-Docs/Figma feel: when a collaborator or the AI edits something,
+ * the changed region glows in their color and the flag identifies them; the
+ * highlight fades out over the last portion of its lifetime instead of
+ * vanishing.
+ *
+ * Feed it `useRecentEdits(others)` (which reads participants' `recentEdits`
+ * awareness rings) and a `resolveRect` that maps an edit descriptor to a
+ * viewport DOMRect for your surface:
+ *
+ *   const others = usePresence(awareness, ydoc?.clientID).others;
+ *   const edits = useRecentEdits(others);
+ *   <RecentEditHighlights
+ *     edits={edits}
+ *     resolveRect={(edit) =>
+ *       edit.descriptor.kind === "selector"
+ *         ? container.querySelector(edit.descriptor.selector)?.getBoundingClientRect() ?? null
+ *         : null
+ *     }
+ *     containerRef={containerRef}
+ *   />
+ */
+
+import { memo, useEffect, useLayoutEffect, useRef, useState } from "react";
+
+import type { AttributedRecentEdit } from "../../collab/recent-edits.js";
+import { RECENT_EDIT_TTL_MS } from "../../collab/recent-edits.js";
+
+export interface RecentEditHighlightsProps {
+  /** Attributed recent edits (from `useRecentEdits`). */
+  edits: AttributedRecentEdit[];
+  /**
+   * Resolver: maps an edit to a viewport-relative DOMRect, or null when the
+   * region can't be located (the edit is skipped).
+   */
+  resolveRect: (edit: AttributedRecentEdit) => DOMRect | null;
+  /** Container the highlights are positioned within (position: relative). */
+  containerRef: React.RefObject<HTMLElement | null>;
+  /** Highlight lifetime; should match useRecentEdits ttlMs. Default 6000. */
+  ttlMs?: number;
+  /** Additional CSS class for the overlay div. */
+  className?: string;
+}
+
+interface Highlight {
+  key: string;
+  color: string;
+  label: string;
+  avatarUrl?: string;
+  isAgent: boolean;
+  opacity: number;
+  rect: { top: number; left: number; width: number; height: number };
+}
+
+const HighlightItem = memo(function HighlightItem({ h }: { h: Highlight }) {
+  return (
+    <div
+      aria-label={`${h.label} edited this`}
+      style={{
+        position: "absolute",
+        top: h.rect.top,
+        left: h.rect.left,
+        width: h.rect.width,
+        height: h.rect.height,
+        borderRadius: 4,
+        pointerEvents: "none",
+        zIndex: 9997,
+        opacity: h.opacity,
+        transition: "opacity 400ms ease-out",
+        outline: `2px solid ${h.color}`,
+        outlineOffset: 2,
+        backgroundColor: `${h.color}1A`,
+        boxShadow: `0 0 0 1px ${h.color}33, 0 0 12px ${h.color}40`,
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          top: -22,
+          left: 0,
+          display: "flex",
+          alignItems: "center",
+          gap: 4,
+          backgroundColor: h.color,
+          color: "#fff",
+          fontSize: 10,
+          fontWeight: 600,
+          padding: "2px 6px",
+          borderRadius: 3,
+          whiteSpace: "nowrap",
+          maxWidth: 180,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+        }}
+      >
+        {h.avatarUrl ? (
+          <img
+            src={h.avatarUrl}
+            alt=""
+            style={{
+              width: 12,
+              height: 12,
+              borderRadius: "50%",
+              flexShrink: 0,
+            }}
+          />
+        ) : null}
+        {h.label}
+      </div>
+    </div>
+  );
+});
+
+export function RecentEditHighlights({
+  edits,
+  resolveRect,
+  containerRef,
+  ttlMs = RECENT_EDIT_TTL_MS,
+  className,
+}: RecentEditHighlightsProps) {
+  const [highlights, setHighlights] = useState<Highlight[]>([]);
+  const editsRef = useRef(edits);
+  editsRef.current = edits;
+  const resolveRef = useRef(resolveRect);
+  resolveRef.current = resolveRect;
+
+  const recompute = () => {
+    const container = containerRef.current;
+    if (!container) {
+      setHighlights([]);
+      return;
+    }
+    const containerRect = container.getBoundingClientRect();
+    const now = Date.now();
+    const next: Highlight[] = [];
+
+    for (const edit of editsRef.current) {
+      const domRect = resolveRef.current(edit);
+      if (!domRect) continue;
+
+      const top = domRect.top - containerRect.top;
+      const left = domRect.left - containerRect.left;
+      if (
+        left + domRect.width < 0 ||
+        top + domRect.height < 0 ||
+        left > containerRect.width ||
+        top > containerRect.height
+      ) {
+        continue;
+      }
+
+      // Fade over the final 40% of the lifetime.
+      const age = now - edit.at;
+      const fadeStart = ttlMs * 0.6;
+      const opacity =
+        age <= fadeStart
+          ? 1
+          : Math.max(0, 1 - (age - fadeStart) / (ttlMs - fadeStart));
+
+      next.push({
+        key: `${edit.clientId}:${edit.at}`,
+        color: edit.user.color || "#94a3b8",
+        label: edit.isAgent
+          ? edit.label
+            ? `AI — ${edit.label}`
+            : "AI edited"
+          : edit.label
+            ? `${edit.user.name} — ${edit.label}`
+            : edit.user.name,
+        avatarUrl: (edit.user as { avatarUrl?: string }).avatarUrl,
+        isAgent: edit.isAgent,
+        opacity,
+        rect: { top, left, width: domRect.width, height: domRect.height },
+      });
+    }
+
+    setHighlights(next);
+  };
+
+  useLayoutEffect(() => {
+    recompute();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [edits, ttlMs]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const observer = new ResizeObserver(() => recompute());
+    observer.observe(container);
+    container.addEventListener("scroll", recompute, { passive: true });
+    window.addEventListener("scroll", recompute, { passive: true });
+    return () => {
+      observer.disconnect();
+      container.removeEventListener("scroll", recompute);
+      window.removeEventListener("scroll", recompute);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [containerRef]);
+
+  return (
+    <div
+      aria-hidden
+      style={{
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        overflow: "hidden",
+      }}
+      className={className}
+    >
+      {highlights.map((h) => (
+        <HighlightItem key={h.key} h={h} />
+      ))}
+    </div>
+  );
+}

package/corpus/core/src/client/components/RemoteSelectionRings.tsx

@@ -22,6 +22,13 @@ import { useState, useEffect, useRef, useLayoutEffect, memo } from "react";
 
 import type { OtherPresence } from "../../collab/presence.js";
 
+/**
+ * Selection descriptors may be a plain string (treated as the resolver
+ * input) or an object carrying a resolver input plus a human label
+ * ("Editing hero section").
+ */
+export type SelectionDescriptor = string | { selector: string; label?: string };
+
 export interface RemoteSelectionRingsProps {
   /** Remote participants. */
   others: OtherPresence[];
@@ -48,6 +55,7 @@ interface Ring {
   clientId: number;
   color: string;
   label: string;
+  avatarUrl?: string;
   isAgent: boolean;
   rect: { top: number; left: number; width: number; height: number };
 }
@@ -76,6 +84,9 @@ const RingItem = memo(function RingItem({ ring }: { ring: Ring }) {
           position: "absolute",
           top: -20,
           left: 0,
+          display: "flex",
+          alignItems: "center",
+          gap: 4,
           backgroundColor: ring.color,
           color: "#fff",
           fontSize: 10,
@@ -83,12 +94,24 @@ const RingItem = memo(function RingItem({ ring }: { ring: Ring }) {
           padding: "1px 5px",
           borderRadius: 3,
           whiteSpace: "nowrap",
-          maxWidth: 120,
+          maxWidth: 160,
           overflow: "hidden",
           textOverflow: "ellipsis",
         }}
       >
-        {ring.isAgent ? `AI — ${ring.label}` : ring.label}
+        {ring.avatarUrl ? (
+          <img
+            src={ring.avatarUrl}
+            alt=""
+            style={{
+              width: 12,
+              height: 12,
+              borderRadius: "50%",
+              flexShrink: 0,
+            }}
+          />
+        ) : null}
+        {ring.label}
       </div>
     </div>
   );
@@ -115,10 +138,17 @@ export function RemoteSelectionRings({
     const next: Ring[] = [];
 
     for (const other of others) {
-      const descriptor = other.presence[selectionKey] as string | undefined;
-      if (!descriptor || typeof descriptor !== "string") continue;
+      const raw = other.presence[selectionKey] as
+        | SelectionDescriptor
+        | null
+        | undefined;
+      const selector =
+        typeof raw === "string" ? raw : raw ? raw.selector : undefined;
+      if (!selector || typeof selector !== "string") continue;
+      const selectionLabel =
+        raw && typeof raw === "object" ? raw.label : undefined;
 
-      const domRect = resolveRect(descriptor);
+      const domRect = resolveRect(selector);
       if (!domRect) continue;
 
       // Convert viewport-relative rect to container-relative.
@@ -133,10 +163,14 @@ export function RemoteSelectionRings({
         continue; // Out of container bounds — skip.
       }
 
+      const baseName = other.isAgent
+        ? "AI"
+        : other.user.name || other.user.email;
       next.push({
         clientId: other.clientId,
         color: other.user.color || "#94a3b8",
-        label: other.isAgent ? "AI" : other.user.name || other.user.email,
+        label: selectionLabel ? `${baseName} — ${selectionLabel}` : baseName,
+        avatarUrl: (other.user as { avatarUrl?: string }).avatarUrl,
         isAgent: other.isAgent,
         rect: { top, left, width: domRect.width, height: domRect.height },
       });