@agent-native/core 0.85.6 → 0.86.0

package/corpus/templates/slides/app/hooks/use-deck-presence.ts

@@ -1,70 +1,112 @@
 import {
   useCollaborativeDoc,
+  usePresence,
+  useRecentEdits,
+  type AttributedRecentEdit,
   type CollabUser,
 } from "@agent-native/core/client";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo } from "react";
+import type { Awareness } from "y-protocols/awareness";
 
 const TAB_ID = `slides-${Date.now()}-${Math.random().toString(36).slice(2)}`;
 
+/** How long the agent counts as "active" after its last recorded edit. */
+const AGENT_ACTIVE_MS = 6000;
+
+export interface DeckPresenceResult {
+  /** Map<slideId, CollabUser[]> for sidebar / same-slide avatars. Includes the
+   *  agent (styled) on whichever slide it is editing. */
+  slidePresence: Map<string, CollabUser[]>;
+  /** True while the agent has a durable presence entry on the deck. */
+  agentPresent: boolean;
+  /** True briefly after the agent records an edit (drives the pulsing chip). */
+  agentActive: boolean;
+  /** The slide the agent is currently editing, if any. */
+  agentSlideId: string | null;
+  /** Non-expired recent edits from remote participants (incl. the agent), for
+   *  lingering highlights. */
+  recentEdits: AttributedRecentEdit[];
+  /** Deck presence-doc awareness (for resolving highlight rects). */
+  awareness: Awareness | null;
+  /** Local Yjs client id (to exclude self). */
+  localClientId: number | null;
+}
+
 /**
- * Tracks deck-level presence: which slide each user is currently viewing.
- * Uses a presence-only Yjs doc (deck-{deckId}) with no TipTap content.
- * Returns a Map<slideId, CollabUser[]> for rendering avatars in the sidebar.
+ * Tracks deck-level presence: which slide each participant (human OR the agent)
+ * is currently on. Uses a presence-only Yjs doc (`deck-{deckId}`) with no TipTap
+ * content — the SAME doc id the slide-editing actions write agent presence to
+ * via `agentTouchDocument`. So once the agent edits a slide, it shows up here as
+ * a participant on that slide, with a lingering "AI edited" highlight.
  */
 export function useDeckPresence(options: {
   deckId: string | null;
   activeSlideId: string | null;
   user?: CollabUser;
-}) {
+}): DeckPresenceResult {
   const { deckId, activeSlideId, user } = options;
-  const selfEmail = user?.email;
-  const normalizedSelfEmail = selfEmail?.trim().toLowerCase();
+  const normalizedSelfEmail = user?.email?.trim().toLowerCase();
 
-  const { awareness } = useCollaborativeDoc({
+  const { ydoc, awareness, agentPresent } = useCollaborativeDoc({
     docId: deckId ? `deck-${deckId}` : null,
     user,
     requestSource: TAB_ID,
     pollInterval: 3000,
   });
 
-  // Publish which slide this user is currently viewing
+  const localClientId = (ydoc?.clientID ?? null) as number | null;
+  const { others, setPresence } = usePresence(awareness, localClientId);
+
+  // Publish which slide this user is currently viewing so peers (and the agent)
+  // can see it.
   useEffect(() => {
     if (!awareness || !activeSlideId) return;
-    awareness.setLocalStateField("slide", activeSlideId);
-    return () => {
-      awareness.setLocalStateField("slide", null);
-    };
-  }, [awareness, activeSlideId]);
-
-  // Build Map<slideId, CollabUser[]> from all remote awareness states
-  const [slidePresence, setSlidePresence] = useState<Map<string, CollabUser[]>>(
-    new Map(),
-  );
+    setPresence({ slide: activeSlideId });
+    return () => setPresence({ slide: null });
+  }, [awareness, activeSlideId, setPresence]);
 
-  useEffect(() => {
-    if (!awareness) return;
+  const recentEdits = useRecentEdits(others);
 
-    const update = () => {
-      const map = new Map<string, CollabUser[]>();
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const selfId = (awareness as any).doc?.clientID;
-      awareness.getStates().forEach((state, clientId) => {
-        if (clientId === selfId) return;
-        const u = state.user as CollabUser | undefined;
-        const slide = state.slide as string | undefined;
-        const email = u?.email?.trim().toLowerCase();
-        if (u && slide && email !== normalizedSelfEmail) {
-          if (!map.has(slide)) map.set(slide, []);
-          map.get(slide)!.push(u);
-        }
-      });
-      setSlidePresence(map);
-    };
+  // Build Map<slideId, CollabUser[]> from all remote participants, humans and
+  // agent alike. The agent's presence carries a `slide` field (from the action's
+  // `metadata.slide`), so it lands on the exact slide it edited.
+  const slidePresence = useMemo(() => {
+    const map = new Map<string, CollabUser[]>();
+    for (const other of others) {
+      const slide = other.presence["slide"];
+      if (typeof slide !== "string" || !slide) continue;
+      // Skip our own reflection by email (another tab of the same human still
+      // shows — matches the prior email-comparison behavior).
+      const email = other.user.email?.trim().toLowerCase();
+      if (!other.isAgent && email && email === normalizedSelfEmail) continue;
+      if (!map.has(slide)) map.set(slide, []);
+      map.get(slide)!.push(other.user);
+    }
+    return map;
+  }, [others, normalizedSelfEmail]);
 
-    awareness.on("change", update);
-    update();
-    return () => awareness.off("change", update);
-  }, [awareness, normalizedSelfEmail]);
+  // The agent's current slide + freshness (for the pulsing "AI" chip).
+  const agentEntry = useMemo(() => others.find((o) => o.isAgent), [others]);
+  const agentSlideId =
+    typeof agentEntry?.presence["slide"] === "string"
+      ? (agentEntry.presence["slide"] as string)
+      : null;
+  const agentActive = useMemo(() => {
+    const lastEditAt = agentEntry?.presence["lastEditAt"];
+    if (typeof lastEditAt === "number") {
+      return Date.now() - lastEditAt < AGENT_ACTIVE_MS;
+    }
+    // Fall back to any fresh recent edit attributed to the agent.
+    return recentEdits.some((e) => e.isAgent);
+  }, [agentEntry, recentEdits]);
 
-  return { slidePresence };
+  return {
+    slidePresence,
+    agentPresent,
+    agentActive,
+    agentSlideId,
+    recentEdits,
+    awareness: awareness ?? null,
+    localClientId,
+  };
 }

package/corpus/templates/slides/app/i18n/ar-SA.ts

@@ -332,6 +332,52 @@ const messages = {
     clickToAddComment: "انقر لإضافة تعليق",
     selectSlideToAdd: "حدد شريحة لإضافة تعليق",
   },
+  styleInspector: {
+    title: "Style",
+    close: "إغلاق مفتش الأنماط",
+    deckStyle: "نمط العرض",
+    designSystemTweaks: "تعديلات نظام التصميم",
+    closeTweaks: "إغلاق التعديلات",
+    controls: "Controls",
+    noDeckStyleControls: "لا توجد عناصر تحكم لنمط العرض بعد.",
+    type: "Type",
+    color: "Color",
+    size: "Size",
+    line: "Line",
+    regular: "Reg",
+    medium: "Med",
+    semi: "Semi",
+    bold: "Bold",
+    left: "Left",
+    center: "Center",
+    right: "Right",
+    justify: "Justify",
+    fill: "Fill",
+    tint: "Tint",
+    transparent: "Transparent",
+    alpha: "Alpha",
+    stroke: "Stroke",
+    radius: "Rad",
+    strokeColor: "لون الحد",
+    spacing: "Spacing",
+    x: "X",
+    y: "Y",
+    primary: "Primary",
+    secondary: "Secondary",
+    accent: "Accent",
+    surface: "Surface",
+    background: "Background",
+    text: "Text",
+    muted: "Muted",
+    white: "White",
+    black: "Black",
+    slate: "Slate",
+    blue: "Blue",
+    cyan: "Cyan",
+    emerald: "Emerald",
+    amber: "Amber",
+    rose: "Rose",
+  },
   animations: {
     appear: "Aparecer",
     fade: "Fundido",

package/corpus/templates/slides/app/i18n/de-DE.ts

@@ -335,6 +335,52 @@ const messages = {
     clickToAddComment: "Klicken, um einen Kommentar hinzuzufügen",
     selectSlideToAdd: "Wähle eine Folie aus, um einen hinzuzufügen",
   },
+  styleInspector: {
+    title: "Style",
+    close: "Stilinspektor schließen",
+    deckStyle: "Deck-Stil",
+    designSystemTweaks: "Designsystem-Anpassungen",
+    closeTweaks: "Anpassungen schließen",
+    controls: "Controls",
+    noDeckStyleControls: "Noch keine Deck-Stil-Steuerelemente.",
+    type: "Type",
+    color: "Color",
+    size: "Size",
+    line: "Line",
+    regular: "Reg",
+    medium: "Med",
+    semi: "Semi",
+    bold: "Bold",
+    left: "Left",
+    center: "Center",
+    right: "Right",
+    justify: "Justify",
+    fill: "Fill",
+    tint: "Tint",
+    transparent: "Transparent",
+    alpha: "Alpha",
+    stroke: "Stroke",
+    radius: "Rad",
+    strokeColor: "Konturfarbe",
+    spacing: "Spacing",
+    x: "X",
+    y: "Y",
+    primary: "Primary",
+    secondary: "Secondary",
+    accent: "Accent",
+    surface: "Surface",
+    background: "Background",
+    text: "Text",
+    muted: "Muted",
+    white: "White",
+    black: "Black",
+    slate: "Slate",
+    blue: "Blue",
+    cyan: "Cyan",
+    emerald: "Emerald",
+    amber: "Amber",
+    rose: "Rose",
+  },
   animations: {
     appear: "Aparecer",
     fade: "Fundido",

package/corpus/templates/slides/app/i18n/en-US.ts

@@ -330,6 +330,52 @@ const messages = {
     clickToAddComment: "Click to add a comment",
     selectSlideToAdd: "Select a slide to add one",
   },
+  styleInspector: {
+    title: "Style",
+    close: "Close style inspector",
+    deckStyle: "Deck style",
+    designSystemTweaks: "Design system tweaks",
+    closeTweaks: "Close tweaks",
+    controls: "Controls",
+    noDeckStyleControls: "No deck style controls yet.",
+    type: "Type",
+    color: "Color",
+    size: "Size",
+    line: "Line",
+    regular: "Reg",
+    medium: "Med",
+    semi: "Semi",
+    bold: "Bold",
+    left: "Left",
+    center: "Center",
+    right: "Right",
+    justify: "Justify",
+    fill: "Fill",
+    tint: "Tint",
+    transparent: "Transparent",
+    alpha: "Alpha",
+    stroke: "Stroke",
+    radius: "Rad",
+    strokeColor: "Stroke color",
+    spacing: "Spacing",
+    x: "X",
+    y: "Y",
+    primary: "Primary",
+    secondary: "Secondary",
+    accent: "Accent",
+    surface: "Surface",
+    background: "Background",
+    text: "Text",
+    muted: "Muted",
+    white: "White",
+    black: "Black",
+    slate: "Slate",
+    blue: "Blue",
+    cyan: "Cyan",
+    emerald: "Emerald",
+    amber: "Amber",
+    rose: "Rose",
+  },
   animations: {
     appear: "Appear",
     fade: "Fade",

package/corpus/templates/slides/app/i18n/es-ES.ts

@@ -337,6 +337,52 @@ const messages = {
     clickToAddComment: "Haz clic para añadir un comentario",
     selectSlideToAdd: "Selecciona una diapositiva para añadir uno",
   },
+  styleInspector: {
+    title: "Style",
+    close: "Cerrar inspector de estilo",
+    deckStyle: "Estilo de la presentación",
+    designSystemTweaks: "Ajustes del sistema de diseño",
+    closeTweaks: "Cerrar ajustes",
+    controls: "Controls",
+    noDeckStyleControls: "Aún no hay controles de estilo de la presentación.",
+    type: "Type",
+    color: "Color",
+    size: "Size",
+    line: "Line",
+    regular: "Reg",
+    medium: "Med",
+    semi: "Semi",
+    bold: "Bold",
+    left: "Left",
+    center: "Center",
+    right: "Right",
+    justify: "Justify",
+    fill: "Fill",
+    tint: "Tint",
+    transparent: "Transparent",
+    alpha: "Alpha",
+    stroke: "Stroke",
+    radius: "Rad",
+    strokeColor: "Color del trazo",
+    spacing: "Spacing",
+    x: "X",
+    y: "Y",
+    primary: "Primary",
+    secondary: "Secondary",
+    accent: "Accent",
+    surface: "Surface",
+    background: "Background",
+    text: "Text",
+    muted: "Muted",
+    white: "White",
+    black: "Black",
+    slate: "Slate",
+    blue: "Blue",
+    cyan: "Cyan",
+    emerald: "Emerald",
+    amber: "Amber",
+    rose: "Rose",
+  },
   animations: {
     appear: "Aparecer",
     fade: "Fundido",

package/corpus/templates/slides/app/i18n/fr-FR.ts

@@ -341,6 +341,52 @@ const messages = {
     clickToAddComment: "Cliquez pour ajouter un commentaire",
     selectSlideToAdd: "Sélectionnez une diapositive pour en ajouter un",
   },
+  styleInspector: {
+    title: "Style",
+    close: "Fermer l’inspecteur de style",
+    deckStyle: "Style du deck",
+    designSystemTweaks: "Réglages du système de design",
+    closeTweaks: "Fermer les réglages",
+    controls: "Controls",
+    noDeckStyleControls: "Aucun contrôle de style du deck pour l’instant.",
+    type: "Type",
+    color: "Color",
+    size: "Size",
+    line: "Line",
+    regular: "Reg",
+    medium: "Med",
+    semi: "Semi",
+    bold: "Bold",
+    left: "Left",
+    center: "Center",
+    right: "Right",
+    justify: "Justify",
+    fill: "Fill",
+    tint: "Tint",
+    transparent: "Transparent",
+    alpha: "Alpha",
+    stroke: "Stroke",
+    radius: "Rad",
+    strokeColor: "Couleur du contour",
+    spacing: "Spacing",
+    x: "X",
+    y: "Y",
+    primary: "Primary",
+    secondary: "Secondary",
+    accent: "Accent",
+    surface: "Surface",
+    background: "Background",
+    text: "Text",
+    muted: "Muted",
+    white: "White",
+    black: "Black",
+    slate: "Slate",
+    blue: "Blue",
+    cyan: "Cyan",
+    emerald: "Emerald",
+    amber: "Amber",
+    rose: "Rose",
+  },
   animations: {
     appear: "Aparecer",
     fade: "Fundido",

package/corpus/templates/slides/app/i18n/hi-IN.ts

@@ -328,6 +328,52 @@ const messages = {
     clickToAddComment: "टिप्पणी जोड़ने के लिए क्लिक करें",
     selectSlideToAdd: "एक टिप्पणी जोड़ने के लिए स्लाइड चुनें",
   },
+  styleInspector: {
+    title: "Style",
+    close: "स्टाइल इंस्पेक्टर बंद करें",
+    deckStyle: "डेक शैली",
+    designSystemTweaks: "डिज़ाइन सिस्टम ट्वीक",
+    closeTweaks: "ट्वीक बंद करें",
+    controls: "Controls",
+    noDeckStyleControls: "अभी कोई डेक शैली नियंत्रण नहीं है.",
+    type: "Type",
+    color: "Color",
+    size: "Size",
+    line: "Line",
+    regular: "Reg",
+    medium: "Med",
+    semi: "Semi",
+    bold: "Bold",
+    left: "Left",
+    center: "Center",
+    right: "Right",
+    justify: "Justify",
+    fill: "Fill",
+    tint: "Tint",
+    transparent: "Transparent",
+    alpha: "Alpha",
+    stroke: "Stroke",
+    radius: "Rad",
+    strokeColor: "स्ट्रोक रंग",
+    spacing: "Spacing",
+    x: "X",
+    y: "Y",
+    primary: "Primary",
+    secondary: "Secondary",
+    accent: "Accent",
+    surface: "Surface",
+    background: "Background",
+    text: "Text",
+    muted: "Muted",
+    white: "White",
+    black: "Black",
+    slate: "Slate",
+    blue: "Blue",
+    cyan: "Cyan",
+    emerald: "Emerald",
+    amber: "Amber",
+    rose: "Rose",
+  },
   animations: {
     appear: "दिखाएं",
     fade: "फेड",

package/corpus/templates/slides/app/i18n/ja-JP.ts

@@ -332,6 +332,52 @@ const messages = {
     clickToAddComment: "クリックしてコメントを追加",
     selectSlideToAdd: "追加するにはスライドを選択してください",
   },
+  styleInspector: {
+    title: "Style",
+    close: "スタイルインスペクターを閉じる",
+    deckStyle: "デッキスタイル",
+    designSystemTweaks: "デザインシステム調整",
+    closeTweaks: "調整を閉じる",
+    controls: "Controls",
+    noDeckStyleControls: "デッキスタイルのコントロールはまだありません。",
+    type: "Type",
+    color: "Color",
+    size: "Size",
+    line: "Line",
+    regular: "Reg",
+    medium: "Med",
+    semi: "Semi",
+    bold: "Bold",
+    left: "Left",
+    center: "Center",
+    right: "Right",
+    justify: "Justify",
+    fill: "Fill",
+    tint: "Tint",
+    transparent: "Transparent",
+    alpha: "Alpha",
+    stroke: "Stroke",
+    radius: "Rad",
+    strokeColor: "線の色",
+    spacing: "Spacing",
+    x: "X",
+    y: "Y",
+    primary: "Primary",
+    secondary: "Secondary",
+    accent: "Accent",
+    surface: "Surface",
+    background: "Background",
+    text: "Text",
+    muted: "Muted",
+    white: "White",
+    black: "Black",
+    slate: "Slate",
+    blue: "Blue",
+    cyan: "Cyan",
+    emerald: "Emerald",
+    amber: "Amber",
+    rose: "Rose",
+  },
   animations: {
     appear: "出现",
     fade: "淡入",

package/corpus/templates/slides/app/i18n/ko-KR.ts

@@ -330,6 +330,52 @@ const messages = {
     clickToAddComment: "클릭하여 댓글 추가",
     selectSlideToAdd: "추가하려면 슬라이드를 선택하세요",
   },
+  styleInspector: {
+    title: "Style",
+    close: "스타일 검사기 닫기",
+    deckStyle: "덱 스타일",
+    designSystemTweaks: "디자인 시스템 조정",
+    closeTweaks: "조정 닫기",
+    controls: "Controls",
+    noDeckStyleControls: "아직 덱 스타일 컨트롤이 없습니다.",
+    type: "Type",
+    color: "Color",
+    size: "Size",
+    line: "Line",
+    regular: "Reg",
+    medium: "Med",
+    semi: "Semi",
+    bold: "Bold",
+    left: "Left",
+    center: "Center",
+    right: "Right",
+    justify: "Justify",
+    fill: "Fill",
+    tint: "Tint",
+    transparent: "Transparent",
+    alpha: "Alpha",
+    stroke: "Stroke",
+    radius: "Rad",
+    strokeColor: "선 색상",
+    spacing: "Spacing",
+    x: "X",
+    y: "Y",
+    primary: "Primary",
+    secondary: "Secondary",
+    accent: "Accent",
+    surface: "Surface",
+    background: "Background",
+    text: "Text",
+    muted: "Muted",
+    white: "White",
+    black: "Black",
+    slate: "Slate",
+    blue: "Blue",
+    cyan: "Cyan",
+    emerald: "Emerald",
+    amber: "Amber",
+    rose: "Rose",
+  },
   animations: {
     appear: "出现",
     fade: "淡入",

package/corpus/templates/slides/app/i18n/pt-BR.ts

@@ -332,6 +332,52 @@ const messages = {
     clickToAddComment: "Clique para adicionar um comentário",
     selectSlideToAdd: "Selecione um slide para adicionar um",
   },
+  styleInspector: {
+    title: "Style",
+    close: "Fechar inspetor de estilo",
+    deckStyle: "Estilo do deck",
+    designSystemTweaks: "Ajustes do sistema de design",
+    closeTweaks: "Fechar ajustes",
+    controls: "Controls",
+    noDeckStyleControls: "Ainda não há controles de estilo do deck.",
+    type: "Type",
+    color: "Color",
+    size: "Size",
+    line: "Line",
+    regular: "Reg",
+    medium: "Med",
+    semi: "Semi",
+    bold: "Bold",
+    left: "Left",
+    center: "Center",
+    right: "Right",
+    justify: "Justify",
+    fill: "Fill",
+    tint: "Tint",
+    transparent: "Transparent",
+    alpha: "Alpha",
+    stroke: "Stroke",
+    radius: "Rad",
+    strokeColor: "Cor do traço",
+    spacing: "Spacing",
+    x: "X",
+    y: "Y",
+    primary: "Primary",
+    secondary: "Secondary",
+    accent: "Accent",
+    surface: "Surface",
+    background: "Background",
+    text: "Text",
+    muted: "Muted",
+    white: "White",
+    black: "Black",
+    slate: "Slate",
+    blue: "Blue",
+    cyan: "Cyan",
+    emerald: "Emerald",
+    amber: "Amber",
+    rose: "Rose",
+  },
   animations: {
     appear: "Aparecer",
     fade: "Fundido",