@agent-native/core 0.87.0 → 0.90.1

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

@@ -1,219 +1,4 @@
-/**
- * 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>
-  );
-}
+export {
+  RecentEditHighlights,
+  type RecentEditHighlightsProps,
+} from "@agent-native/toolkit/collab-ui";

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

@@ -1,220 +1,5 @@
-/**
- * RemoteSelectionRings — renders colored outline rings + name tags over
- * elements selected by remote participants.
- *
- * Each participant's presence payload may contain a `selection` key with an
- * opaque descriptor (e.g. a CSS selector). The `resolveRect` callback maps
- * a descriptor to a DOMRect (or null when the element isn't found). Rings
- * are rendered as absolutely-positioned outlines anchored to the container.
- *
- * Usage:
- *   <div style={{ position: "relative" }}>
- *     {content}
- *     <RemoteSelectionRings
- *       others={others}
- *       resolveRect={(selector) => document.querySelector(selector)?.getBoundingClientRect() ?? null}
- *       containerRef={containerRef}
- *     />
- *   </div>
- */
-
-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[];
-  /**
-   * Key inside presence payload that carries the selection descriptor.
-   * Default: "selection"
-   */
-  selectionKey?: string;
-  /**
-   * Resolver: maps a selection descriptor to a DOMRect relative to the
-   * viewport. Return null when the element is not found.
-   */
-  resolveRect: (descriptor: string) => DOMRect | null;
-  /**
-   * Container element ref. Rings are positioned relative to this element's
-   * bounding box.
-   */
-  containerRef: React.RefObject<HTMLElement | null>;
-  /** Additional CSS class for the overlay div. */
-  className?: string;
-}
-
-interface Ring {
-  clientId: number;
-  color: string;
-  label: string;
-  avatarUrl?: string;
-  isAgent: boolean;
-  rect: { top: number; left: number; width: number; height: number };
-}
-
-const RingItem = memo(function RingItem({ ring }: { ring: Ring }) {
-  return (
-    <div
-      aria-label={`${ring.label} selection`}
-      style={{
-        position: "absolute",
-        top: ring.rect.top,
-        left: ring.rect.left,
-        width: ring.rect.width,
-        height: ring.rect.height,
-        outline: `2px solid ${ring.color}`,
-        outlineOffset: 2,
-        borderRadius: 3,
-        pointerEvents: "none",
-        boxShadow: `0 0 0 1px ${ring.color}40`,
-        zIndex: 9998,
-      }}
-    >
-      {/* Name tag in top-left corner of the ring */}
-      <div
-        style={{
-          position: "absolute",
-          top: -20,
-          left: 0,
-          display: "flex",
-          alignItems: "center",
-          gap: 4,
-          backgroundColor: ring.color,
-          color: "#fff",
-          fontSize: 10,
-          fontWeight: 600,
-          padding: "1px 5px",
-          borderRadius: 3,
-          whiteSpace: "nowrap",
-          maxWidth: 160,
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-        }}
-      >
-        {ring.avatarUrl ? (
-          <img
-            src={ring.avatarUrl}
-            alt=""
-            style={{
-              width: 12,
-              height: 12,
-              borderRadius: "50%",
-              flexShrink: 0,
-            }}
-          />
-        ) : null}
-        {ring.label}
-      </div>
-    </div>
-  );
-});
-
-export function RemoteSelectionRings({
-  others,
-  selectionKey = "selection",
-  resolveRect,
-  containerRef,
-  className,
-}: RemoteSelectionRingsProps) {
-  const overlayRef = useRef<HTMLDivElement>(null);
-  const [rings, setRings] = useState<Ring[]>([]);
-
-  // Recompute rings whenever others change or on animation frame.
-  const recompute = () => {
-    const container = containerRef.current;
-    if (!container) {
-      setRings([]);
-      return;
-    }
-    const containerRect = container.getBoundingClientRect();
-    const next: Ring[] = [];
-
-    for (const other of others) {
-      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(selector);
-      if (!domRect) continue;
-
-      // Convert viewport-relative rect to container-relative.
-      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; // 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: selectionLabel ? `${baseName} — ${selectionLabel}` : baseName,
-        avatarUrl: (other.user as { avatarUrl?: string }).avatarUrl,
-        isAgent: other.isAgent,
-        rect: { top, left, width: domRect.width, height: domRect.height },
-      });
-    }
-
-    setRings(next);
-  };
-
-  // Recompute on scroll/resize of the container to keep rings in sync.
-  useLayoutEffect(() => {
-    recompute();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [others, selectionKey]);
-
-  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
-      ref={overlayRef}
-      aria-hidden
-      style={{
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none",
-        overflow: "hidden",
-      }}
-      className={className}
-    >
-      {rings.map((ring) => (
-        <RingItem key={ring.clientId} ring={ring} />
-      ))}
-    </div>
-  );
-}
+export {
+  RemoteSelectionRings,
+  type RemoteSelectionRingsProps,
+  type SelectionDescriptor,
+} from "@agent-native/toolkit/collab-ui";

package/corpus/core/src/client/composer/TiptapComposer.tsx

@@ -281,6 +281,21 @@ export function insertComposerHardBreakAndScrollIntoView(
   return true;
 }
 
+export function getComposerPopoverPosition(
+  view: Pick<EditorView, "coordsAtPos">,
+  pos: number,
+): { top: number; left: number } | null {
+  try {
+    const coords = view.coordsAtPos(pos);
+    if (!Number.isFinite(coords.top) || !Number.isFinite(coords.left)) {
+      return null;
+    }
+    return { top: coords.top, left: coords.left };
+  } catch {
+    return null;
+  }
+}
+
 export function displayableComposerModeMessage(options: {
   messagePrefix: string;
   trimmedText: string;
@@ -455,9 +470,9 @@ Use the create-extension action with Alpine.js HTML content. The extension runs
 
 After creating the extension, navigate the user to it with the path returned by create-extension; extension URLs may include a friendly "/extensions/<id>/<slug>" suffix.
 
-Make the extension functional and visually polished. Extensions can use extensionFetch() for external API calls, appAction()/appFetch() for app operations, extensionData for per-extension persistence, and dbQuery()/dbExec() only for existing app tables.
+Make the extension functional and visually polished. Extensions can use extensionFetch() for external API calls, appAction()/appFetch() for app operations and app data writes, extensionData for per-extension persistence, and dbQuery() only for read-only inspection of existing app tables.
 
-Prefer appAction()/appFetch() for app data. Some actions return JSON strings for CLI compatibility, so parse string results before counting rows or reading arrays. Do not guess raw SQL table names or columns for app data; use dbQuery()/dbExec() only when the table is known to exist in the current schema.`,
+Prefer appAction()/appFetch() for app data. Some actions return JSON strings for CLI compatibility, so parse string results before counting rows or reading arrays. Do not guess raw SQL table names or columns for app data; use dbQuery() only when the table is known to exist in the current schema.`,
   },
 };
 
@@ -1265,6 +1280,10 @@ export function TiptapComposer({
   const [popover, setPopover] = useState<PopoverState>(null);
   const popoverRef = useRef<MentionPopoverRef>(null);
   const composerRuntime = useComposerRuntime();
+  const lastComposerRuntimeSyncRef = useRef<{
+    text: string;
+    runConfigSignature: string;
+  } | null>(null);
   const submitInFlightRef = useRef(false);
   const [editorHasText, setEditorHasText] = useState(false);
   const [slotReferences, setSlotReferences] = useState<
@@ -1377,6 +1396,9 @@ export function TiptapComposer({
       clearTimeout(draftTimerRef.current);
     };
   }, []);
+  useEffect(() => {
+    lastComposerRuntimeSyncRef.current = null;
+  }, [composerRuntime]);
   // Tiptap reads extension config once at init; ref keeps runtime prop
   // changes visible to Placeholder's function form.
   const placeholderRef = useRef(placeholder);
@@ -1612,11 +1634,12 @@ export function TiptapComposer({
             from,
           );
           if (from === 1 || textBefore === "" || /\s/.test(textBefore)) {
-            const coords = view.coordsAtPos(from);
+            const position = getComposerPopoverPosition(view, from);
+            if (!position) return false;
             setTimeout(() => {
               const state: PopoverState = {
                 type: "@",
-                position: { top: coords.top, left: coords.left },
+                position,
                 startPos: view.state.selection.from,
                 query: "",
               };
@@ -1635,11 +1658,12 @@ export function TiptapComposer({
             from,
           );
           if (from === 1 || textBefore === "" || /\s/.test(textBefore)) {
-            const coords = view.coordsAtPos(from);
+            const position = getComposerPopoverPosition(view, from);
+            if (!position) return false;
             setTimeout(() => {
               const state: PopoverState = {
                 type: "/",
-                position: { top: coords.top, left: coords.left },
+                position,
                 startPos: view.state.selection.from,
                 query: "",
               };
@@ -2045,26 +2069,65 @@ export function TiptapComposer({
     return { text, references };
   }, [editor, slotReferences]);
 
+  const syncComposerRuntimeState = useCallback(
+    (text: string, references: Reference[]) => {
+      const requestMode =
+        execMode === "plan" ? "plan" : execMode === "build" ? "act" : undefined;
+      const custom: {
+        references?: Reference[];
+        requestMode?: "act" | "plan";
+      } = {};
+      if (references.length > 0) {
+        custom.references = references;
+      }
+      if (requestMode) {
+        custom.requestMode = requestMode;
+      }
+      const runConfig = Object.keys(custom).length > 0 ? { custom } : {};
+      const runConfigSignature = JSON.stringify(runConfig);
+      const last = lastComposerRuntimeSyncRef.current;
+      if (
+        last?.text === text &&
+        last.runConfigSignature === runConfigSignature
+      ) {
+        return;
+      }
+      composerRuntime.setText(text);
+      composerRuntime.setRunConfig(runConfig);
+      lastComposerRuntimeSyncRef.current = { text, runConfigSignature };
+    },
+    [composerRuntime, execMode],
+  );
+
+  const resetComposerRuntimeState = useCallback(() => {
+    const runConfigSignature = "{}";
+    const last = lastComposerRuntimeSyncRef.current;
+    if (last?.text === "" && last.runConfigSignature === runConfigSignature) {
+      return;
+    }
+    composerRuntime.setText("");
+    composerRuntime.setRunConfig({});
+    lastComposerRuntimeSyncRef.current = { text: "", runConfigSignature };
+  }, [composerRuntime]);
+
   const syncComposerState = useCallback(() => {
     const { text, references } = extractComposerPayload();
-    const requestMode =
-      execMode === "plan" ? "plan" : execMode === "build" ? "act" : undefined;
-    const custom: {
-      references?: Reference[];
-      requestMode?: "act" | "plan";
-    } = {};
-    if (references.length > 0) {
-      custom.references = references;
-    }
-    if (requestMode) {
-      custom.requestMode = requestMode;
-    }
-    composerRuntime.setText(text);
-    composerRuntime.setRunConfig(
-      Object.keys(custom).length > 0 ? { custom } : {},
-    );
+    syncComposerRuntimeState(text, references);
     return { text, references };
-  }, [composerRuntime, execMode, extractComposerPayload]);
+  }, [extractComposerPayload, syncComposerRuntimeState]);
+
+  const clearEditorAfterSubmit = useCallback(() => {
+    const ed = editor;
+    if (!ed) return;
+    ed.commands.clearContent();
+    setEditorHasText(false);
+    setSlotReferences([]);
+    resetComposerRuntimeState();
+    try {
+      localStorage.removeItem(draftKey);
+    } catch {}
+    closePopover();
+  }, [closePopover, draftKey, editor, resetComposerRuntimeState]);
 
   const submitComposer = useCallback(
     async (intent: ComposerSubmitIntent = "immediate") => {
@@ -2098,11 +2161,7 @@ export function TiptapComposer({
         const cmdName = normalizeSlashCommandName(trimmed);
         const matched = allSlashCommands.find((c) => c.name === cmdName);
         if (matched) {
-          ed.commands.clearContent();
-          try {
-            localStorage.removeItem(draftKey);
-          } catch {}
-          closePopover();
+          clearEditorAfterSubmit();
           onSlashCommandRef.current?.(matched.name);
           return;
         }
@@ -2120,13 +2179,7 @@ export function TiptapComposer({
         tryDelegateBuildRequestToBuilder(trimmed)
       ) {
         cancelActiveVoice();
-        ed.commands.clearContent();
-        setEditorHasText(false);
-        setSlotReferences([]);
-        try {
-          localStorage.removeItem(draftKey);
-        } catch {}
-        closePopover();
+        clearEditorAfterSubmit();
         return;
       }
 
@@ -2191,6 +2244,9 @@ export function TiptapComposer({
           closePopover();
           return;
         }
+        cancelActiveVoice();
+        clearEditorAfterSubmit();
+        return;
       } else {
         composerRuntime.send();
       }
@@ -2205,6 +2261,7 @@ export function TiptapComposer({
     },
     [
       closePopover,
+      clearEditorAfterSubmit,
       composerMode,
       composerRuntime,
       draftKey,
@@ -2332,8 +2389,6 @@ export function TiptapComposer({
     if (!editor || !popover) return;
 
     const updateHandler = () => {
-      syncComposerState();
-
       const pop = popoverStateRef.current;
       if (!pop) return;
       const { from } = editor.state.selection;
@@ -2361,6 +2416,7 @@ export function TiptapComposer({
         }
       }
 
+      if (pop.query === text) return;
       const updated = { ...pop, query: text };
       popoverStateRef.current = updated;
       setPopover(updated);
@@ -2372,7 +2428,7 @@ export function TiptapComposer({
       editor.off("update", updateHandler);
       editor.off("selectionUpdate", updateHandler);
     };
-  }, [editor, popover, closePopover, syncComposerState]);
+  }, [editor, popover, closePopover]);
 
   useEffect(() => {
     if (!editor) return;