@agent-native/core 0.135.1 → 0.135.3

package/corpus/templates/clips/app/components/player/playback-comment-overlay.tsx

@@ -1,4 +1,9 @@
-export const PLAYBACK_COMMENT_VISIBLE_MS = 4_000;
+import { useAvatarUrl } from "@agent-native/core/client/hooks";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+export const PLAYBACK_COMMENT_VISIBLE_MS = 1_000;
 
 export function getPlaybackCommentVisibleMs(playbackRate = 1): number {
   const safePlaybackRate =
@@ -50,50 +55,62 @@ export function PlaybackCommentOverlay({
   comments,
   currentMs,
   playbackRate = 1,
+  onClick,
 }: {
   comments: PlaybackComment[] | undefined;
   currentMs: number;
   playbackRate?: number;
+  onClick?: () => void;
 }) {
   const activeComments = getActivePlaybackComments(
     comments,
     currentMs,
     playbackRate,
   );
+  const avatarUrl = useAvatarUrl(activeComments[0]?.authorEmail);
   if (activeComments.length === 0) return null;
 
+  const [comment, ...rest] = activeComments;
+  const author = displayAuthor(comment);
+  const Card = (onClick ? "button" : "div") as "button" | "div";
+
   return (
     <div
       data-player-ui
       className="pointer-events-none absolute inset-x-3 bottom-[5.25rem] z-20 flex justify-center sm:inset-x-6"
       aria-live="polite"
     >
-      <div className="flex w-full max-w-xl flex-col items-center gap-2">
-        {activeComments.map((comment) => {
-          const author = displayAuthor(comment);
-          return (
-            <div
-              key={comment.id}
-              className="animate-in fade-in slide-in-from-bottom-2 flex max-w-full items-start gap-2.5 rounded-xl bg-black/85 px-3 py-2.5 text-white shadow-2xl ring-1 ring-white/15 backdrop-blur-md duration-200"
-            >
-              <span
-                aria-hidden="true"
-                className="flex size-7 shrink-0 items-center justify-center rounded-full bg-white/15 text-[10px] font-semibold text-white"
-              >
-                {initials(author)}
-              </span>
-              <div className="min-w-0">
-                <p className="truncate text-xs font-semibold text-white/80">
-                  {author}
-                </p>
-                <p className="line-clamp-3 break-words text-sm leading-5 text-white">
-                  {comment.content}
-                </p>
-              </div>
-            </div>
-          );
-        })}
-      </div>
+      <Card
+        key={comment.id}
+        type={onClick ? "button" : undefined}
+        onClick={onClick}
+        className={cn(
+          "animate-in fade-in slide-in-from-bottom-2 flex w-full max-w-xl flex-col gap-1.5 rounded-xl bg-black/85 px-3 py-2.5 text-left text-white shadow-2xl ring-1 ring-white/15 backdrop-blur-md duration-200",
+          onClick && "pointer-events-auto cursor-pointer hover:bg-black/95",
+        )}
+      >
+        <div className="flex max-w-full items-start gap-2.5">
+          <Avatar aria-hidden="true" className="size-7 shrink-0">
+            {avatarUrl ? <AvatarImage src={avatarUrl} alt={author} /> : null}
+            <AvatarFallback className="bg-white/15 text-[10px] font-semibold text-white">
+              {initials(author)}
+            </AvatarFallback>
+          </Avatar>
+          <div className="min-w-0">
+            <p className="truncate text-xs font-semibold text-white/80">
+              {author}
+            </p>
+            <p className="line-clamp-3 break-words text-sm leading-5 text-white">
+              {comment.content}
+            </p>
+          </div>
+        </div>
+        {rest.length > 0 && (
+          <p className="pl-[2.375rem] text-xs text-white/60">
+            +{rest.length} other comment{rest.length > 1 ? "s" : ""}
+          </p>
+        )}
+      </Card>
     </div>
   );
 }

package/corpus/templates/clips/app/components/player/scrubber.tsx

@@ -1,3 +1,4 @@
+import { IconMessage2Filled } from "@tabler/icons-react";
 import { useMemo, useRef, useState } from "react";
 
 import { cn } from "@/lib/utils";
@@ -225,10 +226,17 @@ export function Scrubber(props: ScrubberProps) {
               e.stopPropagation();
               onSeek(ms);
             }}
-            className="absolute -top-1 -translate-x-1/2 h-3.5 w-3.5 rounded-full bg-yellow-400 border-2 border-black/50 hover:scale-125 transition-transform"
+            className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-md ring-2 ring-background transition-transform hover:scale-125"
             style={{ left: (ms / Math.max(1, durationMs)) * 100 + "%" }}
             aria-label={`${list.length} comment${list.length > 1 ? "s" : ""}`}
-          />
+          >
+            <IconMessage2Filled className="h-2.5 w-2.5" />
+            {list.length > 1 && (
+              <span className="absolute -top-1.5 -right-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[8px] font-bold leading-none text-primary-foreground ring-2 ring-background">
+                {list.length}
+              </span>
+            )}
+          </button>
         ))}
 
         {/* Reaction dots */}

package/corpus/templates/clips/app/components/player/video-player.tsx

@@ -218,6 +218,8 @@ export interface VideoPlayerProps {
    * lifecycle instead of polling an imperative-handle getter.
    */
   onVideoElementChange?: (video: HTMLVideoElement | null) => void;
+  /** Called when the viewer clicks the timestamped-comment overlay. */
+  onCommentClick?: () => void;
 }
 
 export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
@@ -255,6 +257,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
       recordingId,
       role,
       onVideoElementChange,
+      onCommentClick,
     } = props;
 
     const resolvedVideoSrc = useMemo(
@@ -1651,6 +1654,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
             comments={comments}
             currentMs={currentMs}
             playbackRate={speed}
+            onClick={onCommentClick}
           />
         ) : null}
 

package/corpus/templates/clips/app/routes/r.$recordingId.tsx

@@ -261,15 +261,26 @@ export default function RecordingPage() {
   // The compact layout stacks the panel below the video, so switching tabs
   // alone leaves the user looking at the player. Desktop always renders the
   // side aside, so nothing to scroll there.
-  const openInsightsPanel = useCallback(() => {
-    setPanel("insights");
-    if (!isCompactLayout) return;
-    requestAnimationFrame(() => {
-      document
-        .getElementById("clip-activity-panel")
-        ?.scrollIntoView({ block: "start" });
-    });
-  }, [isCompactLayout]);
+  const openSidePanel = useCallback(
+    (next: SidePanel) => {
+      setPanel(next);
+      if (!isCompactLayout) return;
+      requestAnimationFrame(() => {
+        document
+          .getElementById("clip-activity-panel")
+          ?.scrollIntoView({ block: "start" });
+      });
+    },
+    [isCompactLayout],
+  );
+  const openInsightsPanel = useCallback(
+    () => openSidePanel("insights"),
+    [openSidePanel],
+  );
+  const openCommentsPanel = useCallback(
+    () => openSidePanel("comments"),
+    [openSidePanel],
+  );
   const transcriptKickedRef = useRef<string | null>(null);
   // When the recording lands in the processing state but never flips to
   // 'ready', stop spinning forever and surface an error banner so the user
@@ -1608,6 +1619,7 @@ export default function RecordingPage() {
                   cta={firstCta}
                   onCtaClick={() => tracking.reportCtaClick()}
                   onTimeUpdate={(ms) => setCurrentMs(ms)}
+                  onCommentClick={openCommentsPanel}
                   className="h-full w-full rounded-none sm:rounded-xl"
                 />
                 {commentOpen ? (
@@ -1667,12 +1679,7 @@ export default function RecordingPage() {
                       className="shrink-0"
                       onOpen={() => {
                         if (isCompactLayout) {
-                          setPanel("comments");
-                          requestAnimationFrame(() => {
-                            document
-                              .getElementById("clip-activity-panel")
-                              ?.scrollIntoView({ block: "start" });
-                          });
+                          openCommentsPanel();
                           return;
                         }
                         setCommentAtMs(resolvePlaybackMs());

package/corpus/templates/clips/app/routes/share.$shareId.tsx

@@ -997,6 +997,7 @@ export default function ShareRoute() {
               cta={firstCta}
               onCtaClick={() => tracking.reportCtaClick()}
               onTimeUpdate={(ms) => setCurrentMs(ms)}
+              onCommentClick={() => setPanel("comments")}
               className="h-full w-full rounded-none sm:rounded-xl"
             />
           </div>

package/corpus/templates/content/app/components/editor/database/sidebar.tsx

@@ -21,6 +21,7 @@ import {
 import { useEffect, useState, type MouseEvent, type ReactNode } from "react";
 import { Link } from "react-router";
 
+import { documentSidebarActionAvailability } from "@/components/sidebar/document-sidebar-actions";
 import { Button } from "@/components/ui/button";
 import {
   Collapsible,
@@ -717,14 +718,12 @@ function DatabaseSidebarRow({
   };
 }) {
   const t = useT();
-  const canEdit = item.document.canEdit !== false;
-  const canManage =
-    item.document.canManage === true ||
-    item.document.accessRole === "owner" ||
-    item.document.accessRole === "admin";
+  const { canEdit, canManage, canFavorite, hasMenuActions } =
+    documentSidebarActionAvailability(item.document, {
+      favoriteAvailable: Boolean(onToggleFavorite),
+      manageAvailable: Boolean(onDeleteItem),
+    });
   const canCreateChild = canEdit && Boolean(onCreateChildPage);
-  const hasMenuActions =
-    Boolean(onToggleFavorite) || (canManage && Boolean(onDeleteItem));
   function handleClick(event: MouseEvent<HTMLAnchorElement>) {
     if (
       event.defaultPrevented ||
@@ -828,7 +827,7 @@ function DatabaseSidebarRow({
                   </button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="start" className="w-48">
-                  {onToggleFavorite ? (
+                  {canFavorite && onToggleFavorite ? (
                     <DropdownMenuItem onSelect={() => onToggleFavorite(item)}>
                       <IconStar
                         className={cn(
@@ -841,7 +840,10 @@ function DatabaseSidebarRow({
                         : t("sidebar.pinToSidebar")}
                     </DropdownMenuItem>
                   ) : null}
-                  {onToggleFavorite && canManage && onDeleteItem ? (
+                  {canFavorite &&
+                  onToggleFavorite &&
+                  canManage &&
+                  onDeleteItem ? (
                     <DropdownMenuSeparator />
                   ) : null}
                   {canManage && onDeleteItem ? (
@@ -857,7 +859,7 @@ function DatabaseSidebarRow({
               </DropdownMenu>
             )}
 
-            {canCreateChild && (
+            {canCreateChild ? (
               <DropdownMenu>
                 <Tooltip>
                   <TooltipTrigger asChild>
@@ -866,6 +868,7 @@ function DatabaseSidebarRow({
                         type="button"
                         className="flex size-6 items-center justify-center rounded text-foreground hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                         aria-label={t("sidebar.addChildTo", { title })}
+                        data-sidebar-add-child
                       >
                         <IconPlus size={14} />
                       </button>
@@ -888,6 +891,16 @@ function DatabaseSidebarRow({
                   ) : null}
                 </DropdownMenuContent>
               </DropdownMenu>
+            ) : (
+              <button
+                type="button"
+                className="flex size-6 cursor-not-allowed items-center justify-center rounded text-muted-foreground/50"
+                aria-label={t("sidebar.addChildTo", { title })}
+                data-sidebar-add-child
+                disabled
+              >
+                <IconPlus size={14} />
+              </button>
             )}
           </div>
         )}

package/corpus/templates/content/app/components/sidebar/DocumentTreeItem.tsx

@@ -33,6 +33,8 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
+import { documentSidebarActionAvailability } from "./document-sidebar-actions";
+
 interface DocumentTreeItemProps {
   node: DocumentTreeNode;
   depth: number;
@@ -97,12 +99,8 @@ export function DocumentTreeItem({
   const isActive = node.id === activeId;
   const isLocalFileNode = node.source?.mode === "local-files";
   const isLocalFolder = isLocalFileNode && node.source?.kind === "folder";
-  const canEdit = node.canEdit !== false;
-  const canManage =
-    node.canManage === true ||
-    node.accessRole === "owner" ||
-    node.accessRole === "admin";
-  const hasMenuActions = canEdit || canManage;
+  const { canEdit, canManage, canFavorite, hasMenuActions } =
+    documentSidebarActionAvailability(node, { favoriteAvailable: true });
   const canCreateChild = canEdit && !isLocalFileNode;
   const [contextSheetOpen, setContextSheetOpen] = useState(false);
   const indent = depth * 12 + 12;
@@ -224,7 +222,7 @@ export function DocumentTreeItem({
                 </button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="start" className="w-48">
-                {canEdit && (
+                {canFavorite && (
                   <DropdownMenuItem
                     onClick={(e) => {
                       e.stopPropagation();
@@ -240,7 +238,7 @@ export function DocumentTreeItem({
                       : t("sidebar.pinToSidebar")}
                   </DropdownMenuItem>
                 )}
-                {canEdit && canManage && <DropdownMenuSeparator />}
+                {canFavorite && canManage && <DropdownMenuSeparator />}
                 {canEdit && !isLocalFileNode && (
                   <DropdownMenuItem
                     onSelect={(event) => {
@@ -269,7 +267,7 @@ export function DocumentTreeItem({
             </DropdownMenu>
           )}
 
-          {canCreateChild && (
+          {canCreateChild ? (
             <DropdownMenu>
               <Tooltip>
                 <TooltipTrigger asChild>
@@ -280,6 +278,7 @@ export function DocumentTreeItem({
                       aria-label={t("sidebar.addChildTo", {
                         title: node.title || t("sidebar.untitled"),
                       })}
+                      data-sidebar-add-child
                       onClick={(e) => e.stopPropagation()}
                     >
                       <IconPlus size={14} />
@@ -309,6 +308,18 @@ export function DocumentTreeItem({
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
+          ) : (
+            <button
+              type="button"
+              className="flex h-7 w-7 cursor-not-allowed items-center justify-center rounded text-muted-foreground/50"
+              aria-label={t("sidebar.addChildTo", {
+                title: node.title || t("sidebar.untitled"),
+              })}
+              data-sidebar-add-child
+              disabled
+            >
+              <IconPlus size={14} />
+            </button>
           )}
         </div>
       </div>

package/corpus/templates/content/app/components/sidebar/document-sidebar-actions.ts

@@ -0,0 +1,31 @@
+import type { Document } from "@shared/api";
+
+type SidebarDocumentAccess = Pick<
+  Document,
+  "accessRole" | "canEdit" | "canManage"
+>;
+
+export function documentSidebarActionAvailability(
+  document: SidebarDocumentAccess,
+  {
+    favoriteAvailable,
+    manageAvailable = true,
+  }: {
+    favoriteAvailable: boolean;
+    manageAvailable?: boolean;
+  },
+) {
+  const canEdit = document.canEdit !== false;
+  const canManage =
+    document.canManage === true ||
+    document.accessRole === "owner" ||
+    document.accessRole === "admin";
+  const canFavorite = favoriteAvailable;
+
+  return {
+    canEdit,
+    canManage,
+    canFavorite,
+    hasMenuActions: canFavorite || (canManage && manageAvailable),
+  };
+}

package/corpus/templates/content/changelog/2026-07-26-viewers-can-favorite-shared-pages.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-26
+---
+
+View-only collaborators can pin or unpin shared pages while the unavailable add-child control stays aligned and visibly disabled.

package/dist/collab/routes.d.ts

@@ -26,8 +26,8 @@ export declare const getCollabState: import("h3").EventHandlerWithFetch<import("
  * Body: { update: string (base64), requestSource?: string }
  */
 export declare const postCollabUpdate: import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<{
-    error: string;
     ok?: undefined;
+    error: string;
 } | {
     error?: undefined;
     ok: boolean;

package/dist/collab/struct-routes.d.ts

@@ -13,8 +13,8 @@
  * Body: { json: any, fieldName?: string, type?: "map"|"array", requestSource?: string }
  */
 export declare const postCollabJson: import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<{
-    ok?: undefined;
     error: string;
+    ok?: undefined;
 } | {
     error?: undefined;
     ok: boolean;

package/dist/notifications/routes.d.ts

@@ -13,12 +13,12 @@
 export declare function createNotificationsHandler(): import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<"" | import("./types.js").Notification[] | {
     count: number;
     updated?: undefined;
-    error?: undefined;
     ok?: undefined;
+    error?: undefined;
 } | {
     updated: number;
-    error?: undefined;
     ok?: undefined;
+    error?: undefined;
     count?: undefined;
 } | {
     updated?: undefined;

package/dist/progress/routes.d.ts

@@ -15,7 +15,7 @@ export declare function createProgressHandler(): import("h3").EventHandlerWithFe
     error: string;
     ok?: undefined;
 } | {
-    error?: undefined;
     ok: boolean;
+    error?: undefined;
 }>>;
 //# sourceMappingURL=routes.d.ts.map

package/dist/resources/handlers.d.ts

@@ -48,8 +48,8 @@ export declare function handleUpdateResource(event: any): Promise<import("./stor
 }>;
 /** DELETE /_agent-native/resources/:id — delete a resource */
 export declare function handleDeleteResource(event: any): Promise<{
-    ok?: undefined;
     error: string;
+    ok?: undefined;
 } | {
     error?: undefined;
     ok: boolean;

package/dist/secrets/routes.d.ts

@@ -34,37 +34,37 @@ export declare function createListSecretsHandler(): import("h3").EventHandlerWit
 /** POST /_agent-native/secrets/:key — write a secret. */
 export declare function createWriteSecretHandler(): import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<{
     error: string;
-    ok?: undefined;
     status?: undefined;
+    ok?: undefined;
 } | {
-    error?: undefined;
     ok: boolean;
     status: string;
+    error?: undefined;
 } | {
-    ok?: undefined;
     error: string;
     removed?: undefined;
+    ok?: undefined;
 } | {
-    error?: undefined;
     ok: boolean;
     removed: boolean;
+    error?: undefined;
 }>>;
 /**
  * POST /_agent-native/secrets/:key/test — re-run the validator against the
  * current stored value without changing anything. Useful for the "Test" button.
  */
 export declare function createTestSecretHandler(): import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<{
-    ok?: undefined;
     error: string;
     note?: undefined;
+    ok?: undefined;
 } | {
-    error?: undefined;
     ok: boolean;
     note?: undefined;
-} | {
     error?: undefined;
+} | {
     ok: boolean;
     note: string;
+    error?: undefined;
 } | {
     note?: undefined;
     ok: boolean;
@@ -95,12 +95,12 @@ export interface AdHocSecretPayload {
 export declare function createAdHocSecretHandler(): import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<AdHocSecretPayload[] | {
     error: string;
 } | {
-    error?: undefined;
     ok: boolean;
     key: string;
-} | {
     error?: undefined;
+} | {
     ok: boolean;
     removed: boolean;
+    error?: undefined;
 }>>;
 //# sourceMappingURL=routes.d.ts.map

package/dist/server/agent-engine-api-key-route.d.ts

@@ -27,11 +27,11 @@ export declare function resolveAgentEngineApiKeyWriteTarget(event: H3Event, scop
 export declare function createAgentEngineApiKeyHandler(): import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<{
     error: any;
 } | {
+    error?: undefined;
     ok: boolean;
     key: string;
     baseUrlKey?: string;
     scope: AgentEngineApiKeyScope;
-    error?: undefined;
 }>>;
 export {};
 //# sourceMappingURL=agent-engine-api-key-route.d.ts.map

package/dist/server/realtime-token.d.ts

@@ -26,9 +26,9 @@ export declare function createRealtimeTokenHandler(): import("h3").EventHandlerW
     expiresAt?: undefined;
     ttlSeconds?: undefined;
 } | {
+    error?: undefined;
     token: string;
     expiresAt: string;
     ttlSeconds: number;
-    error?: undefined;
 }>>;
 //# sourceMappingURL=realtime-token.d.ts.map