@agent-native/core 0.92.12 → 0.94.0

package/corpus/templates/clips/app/components/library/library-grid.tsx

@@ -25,14 +25,15 @@ import { EmptyState } from "./empty-state";
 import { FilterChips, type FilterChip } from "./filter-chips";
 import { PageHeader } from "./page-header";
 import { RecordingCard } from "./recording-card";
+import { SearchBar } from "./search-bar";
 import { SortMenu, type SortKey } from "./sort-menu";
 
 interface LibraryGridProps {
-  view: "library" | "space" | "archive" | "trash" | "all";
+  view: "library" | "shared" | "space" | "archive" | "trash" | "all";
   folderId?: string | null;
   spaceId?: string | null;
   /** What empty-state illustration to render. Defaults from `view`. */
-  emptyKind?: "library" | "folder" | "space" | "archive" | "trash";
+  emptyKind?: "library" | "shared" | "folder" | "space" | "archive" | "trash";
   title?: string;
   tagFilter?: string | null;
   onClearTag?: () => void;
@@ -122,6 +123,7 @@ export function LibraryGrid({
   const archiveRecording = useArchiveRecording();
   const restoreRecording = useRestoreRecording();
   const moveRecording = useMoveRecording();
+  const canManageRecordings = view !== "shared";
   const canMoveSelection = view === "library" || view === "space";
   const { data: scopedFolders } = useFolders(
     {
@@ -240,11 +242,13 @@ export function LibraryGrid({
       ? "archive"
       : view === "trash"
         ? "trash"
-        : view === "space"
-          ? "space"
-          : folderId
-            ? "folder"
-            : "library");
+        : view === "shared"
+          ? "shared"
+          : view === "space"
+            ? "space"
+            : folderId
+              ? "folder"
+              : "library");
 
   return (
     <div className="flex flex-1 flex-col min-h-0">
@@ -263,14 +267,18 @@ export function LibraryGrid({
 
       {/* Page header — rendered into the top app bar */}
       <PageHeader>
-        <div className="min-w-0 flex-1">
+        <div className="min-w-0 shrink-0">
           {title && (
             <h1 className="text-base font-semibold text-foreground truncate">
               {title}
             </h1>
           )}
         </div>
-        <div className="ml-auto flex shrink-0 items-center gap-2">
+        <SearchBar
+          side="bottom"
+          className="hidden min-w-52 max-w-xl flex-1 md:block"
+        />
+        <div className="ms-auto flex shrink-0 items-center gap-2">
           {extraActions}
           <SortMenu value={sort} onChange={setSort} />
         </div>
@@ -322,41 +330,60 @@ export function LibraryGrid({
                 <RecordingCard
                   key={r.id}
                   recording={r}
-                  selected={selected.has(r.id)}
-                  selectionMode={selectionMode}
-                  onToggleSelect={toggleSelect}
-                  onShare={(rec) => setSharingRec(rec)}
+                  selected={
+                    canManageRecordings ? selected.has(r.id) : undefined
+                  }
+                  selectionMode={canManageRecordings && selectionMode}
+                  onToggleSelect={
+                    canManageRecordings ? toggleSelect : undefined
+                  }
+                  onShare={
+                    canManageRecordings
+                      ? (rec) => setSharingRec(rec)
+                      : undefined
+                  }
                   moveTargets={moveTargets}
                   onMove={canMoveSelection ? moveSingle : undefined}
                   isMovePending={moveRecording.isPending}
-                  onTrash={(rec) => {
-                    trashRecording.mutate(
-                      { id: rec.id },
-                      {
-                        onSuccess: () =>
-                          toast.success(t("libraryGrid.movedToTrash")),
-                      },
-                    );
-                  }}
-                  onArchive={(rec) => {
-                    if (rec.archivedAt) {
-                      restoreRecording.mutate(
-                        { id: rec.id },
-                        {
-                          onSuccess: () =>
-                            toast.success(t("libraryGrid.restoredFromArchive")),
-                        },
-                      );
-                    } else {
-                      archiveRecording.mutate(
-                        { id: rec.id },
-                        {
-                          onSuccess: () =>
-                            toast.success(t("libraryGrid.archived")),
-                        },
-                      );
-                    }
-                  }}
+                  onTrash={
+                    canManageRecordings
+                      ? (rec) => {
+                          trashRecording.mutate(
+                            { id: rec.id },
+                            {
+                              onSuccess: () =>
+                                toast.success(t("libraryGrid.movedToTrash")),
+                            },
+                          );
+                        }
+                      : undefined
+                  }
+                  onArchive={
+                    canManageRecordings
+                      ? (rec) => {
+                          if (rec.archivedAt) {
+                            restoreRecording.mutate(
+                              { id: rec.id },
+                              {
+                                onSuccess: () =>
+                                  toast.success(
+                                    t("libraryGrid.restoredFromArchive"),
+                                  ),
+                              },
+                            );
+                          } else {
+                            archiveRecording.mutate(
+                              { id: rec.id },
+                              {
+                                onSuccess: () =>
+                                  toast.success(t("libraryGrid.archived")),
+                              },
+                            );
+                          }
+                        }
+                      : undefined
+                  }
+                  readOnly={!canManageRecordings}
                 />
               ))}
             </div>
@@ -364,7 +391,7 @@ export function LibraryGrid({
         </div>
 
         {/* Sticky bulk-action toolbar */}
-        {selected.size > 0 && (
+        {canManageRecordings && selected.size > 0 && (
           <div className="pointer-events-none sticky bottom-0 flex justify-center pb-4">
             <div className="pointer-events-auto">
               <BulkActionToolbar

package/corpus/templates/clips/app/components/library/library-layout.tsx

@@ -28,6 +28,7 @@ import {
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
   IconPlus,
+  IconShare,
   IconSettings,
 } from "@tabler/icons-react";
 import { ReactNode, useEffect, useMemo, useState } from "react";
@@ -132,6 +133,7 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
   // Clip count for the "Library" nav item — count-only, no row payload or
   // title polling across the app shell.
   const { data: libraryCount } = useRecordingsCount({ view: "library" });
+  const { data: sharedCount } = useRecordingsCount({ view: "shared" });
 
   const libFolderList: FolderNode[] = useMemo(
     () =>
@@ -158,6 +160,11 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
   const pageOwnsToolbar =
     location.pathname === "/extensions" ||
     location.pathname.startsWith("/extensions/");
+  const pageHasHeaderSearch =
+    location.pathname.startsWith("/library") ||
+    location.pathname === "/shared" ||
+    location.pathname === "/archive" ||
+    /^\/spaces\/[^/]+/.test(location.pathname);
 
   useEffect(() => {
     setSidebarOpen(false);
@@ -193,6 +200,13 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
       match: (p) => p.startsWith("/library"),
       count: libraryCount,
     },
+    {
+      to: "/shared",
+      label: t("navigation.sharedWithMe"),
+      icon: IconShare,
+      match: (p) => p === "/shared",
+      count: sharedCount,
+    },
     {
       to: "/spaces",
       label: t("navigation.spaces"),
@@ -505,7 +519,7 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
                   {t("navigation.desktopCta")}
                 </CaptureInstallInlineLink>
               )}
-              <SearchBar />
+              {(isMobile || !pageHasHeaderSearch) && <SearchBar />}
             </div>
 
             <div className="shrink-0 px-1 py-1">

package/corpus/templates/clips/app/components/library/recording-card.tsx

@@ -69,6 +69,7 @@ interface RecordingCardProps {
   isMovePending?: boolean;
   onArchive?: (rec: RecordingSummary) => void;
   onTrash?: (rec: RecordingSummary) => void;
+  readOnly?: boolean;
 }
 
 export function RecordingCard({
@@ -82,6 +83,7 @@ export function RecordingCard({
   isMovePending = false,
   onArchive,
   onTrash,
+  readOnly = false,
 }: RecordingCardProps) {
   const navigate = useNavigate();
   const t = useT();
@@ -118,6 +120,9 @@ export function RecordingCard({
       recording.failureReason ?? "",
     );
   const canMove = Boolean(onMove && moveTargets.length > 0);
+  const canSelect = Boolean(onToggleSelect) && !readOnly;
+  const showActions =
+    !readOnly && Boolean(onShare || onMove || onArchive || onTrash);
   const hasDefaultTitle = isDefaultTitle(recording.title);
   const displayTitle = hasDefaultTitle
     ? t("editableTitle.untitled")
@@ -221,7 +226,7 @@ export function RecordingCard({
         </div>
 
         {/* Selection checkbox */}
-        {(selectionMode || hovered || selected) && (
+        {canSelect && (selectionMode || hovered || selected) && (
           <div
             onClick={handleCheckbox}
             className="absolute top-2 start-2 flex h-5 w-5 items-center justify-center rounded bg-background/90 border border-border"
@@ -276,7 +281,7 @@ export function RecordingCard({
                       : failureReason}
                 </div>
               </div>
-              {!waitingForStorage && (
+              {!waitingForStorage && onTrash && (
                 <button
                   type="button"
                   onClick={handleRemoveFailed}
@@ -311,7 +316,7 @@ export function RecordingCard({
               />
               <span className="capitalize">{recording.visibility}</span>
               <span>•</span>
-              {recording.viewCount > 0 ? (
+              {recording.viewCount > 0 && !readOnly ? (
                 <ViewedByPopover
                   recordingId={recording.id}
                   className="underline-offset-2 hover:underline hover:text-foreground"
@@ -332,74 +337,82 @@ export function RecordingCard({
             </div>
           </div>
 
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
-              <button
-                className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
-                aria-label={t("clipsFinalRaw.recordingMenu")}
+          {showActions && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
+                <button
+                  className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+                  aria-label={t("clipsFinalRaw.recordingMenu")}
+                >
+                  <IconDots className="h-4 w-4" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="end"
+                onClick={(e) => e.stopPropagation()}
               >
-                <IconDots className="h-4 w-4" />
-              </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              align="end"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <DropdownMenuItem onSelect={() => onShare?.(recording)}>
-                <IconShare className="h-4 w-4 me-2" />{" "}
-                {t("recordingPage.share")}
-              </DropdownMenuItem>
-              {canMove ? (
-                <DropdownMenuSub>
-                  <DropdownMenuSubTrigger>
-                    <IconFolder className="h-4 w-4 me-2" />{" "}
-                    {t("clipsFinalRaw.moveToFolder")}
-                  </DropdownMenuSubTrigger>
-                  <DropdownMenuSubContent className="w-64">
-                    {moveTargets.map((target, index) => (
-                      <DropdownMenuItem
-                        key={target.id ?? `root-${index}`}
-                        disabled={target.disabled || isMovePending}
-                        onSelect={() => onMove?.(recording, target.id)}
-                      >
-                        <span
-                          className="truncate"
-                          style={{
-                            paddingInlineStart: (target.depth ?? 0) * 12,
-                          }}
+                {onShare && (
+                  <DropdownMenuItem onSelect={() => onShare(recording)}>
+                    <IconShare className="h-4 w-4 me-2" />{" "}
+                    {t("recordingPage.share")}
+                  </DropdownMenuItem>
+                )}
+                {canMove ? (
+                  <DropdownMenuSub>
+                    <DropdownMenuSubTrigger>
+                      <IconFolder className="h-4 w-4 me-2" />{" "}
+                      {t("clipsFinalRaw.moveToFolder")}
+                    </DropdownMenuSubTrigger>
+                    <DropdownMenuSubContent className="w-64">
+                      {moveTargets.map((target, index) => (
+                        <DropdownMenuItem
+                          key={target.id ?? `root-${index}`}
+                          disabled={target.disabled || isMovePending}
+                          onSelect={() => onMove?.(recording, target.id)}
                         >
-                          {target.name}
-                        </span>
-                        {target.disabled && (
-                          <span className="ms-auto text-xs text-muted-foreground">
-                            {t("clipsFinalRaw.current")}
+                          <span
+                            className="truncate"
+                            style={{
+                              paddingInlineStart: (target.depth ?? 0) * 12,
+                            }}
+                          >
+                            {target.name}
                           </span>
-                        )}
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuSubContent>
-                </DropdownMenuSub>
-              ) : null}
-              <DropdownMenuSeparator />
-              {recording.archivedAt ? (
-                <DropdownMenuItem onSelect={() => onArchive?.(recording)}>
-                  <IconCheck className="h-4 w-4 me-2" />{" "}
-                  {t("clipsFinalRaw.unarchive")}
-                </DropdownMenuItem>
-              ) : (
-                <DropdownMenuItem onSelect={() => onArchive?.(recording)}>
-                  <IconArchive className="h-4 w-4 me-2" />{" "}
-                  {t("navigation.archive")}
-                </DropdownMenuItem>
-              )}
-              <DropdownMenuItem
-                onSelect={() => onTrash?.(recording)}
-                className="text-destructive focus:text-destructive"
-              >
-                <IconTrash className="h-4 w-4 me-2" /> {t("folderTree.delete")}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+                          {target.disabled && (
+                            <span className="ms-auto text-xs text-muted-foreground">
+                              {t("clipsFinalRaw.current")}
+                            </span>
+                          )}
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuSubContent>
+                  </DropdownMenuSub>
+                ) : null}
+                {(onArchive || onTrash) && <DropdownMenuSeparator />}
+                {onArchive &&
+                  (recording.archivedAt ? (
+                    <DropdownMenuItem onSelect={() => onArchive(recording)}>
+                      <IconCheck className="h-4 w-4 me-2" />{" "}
+                      {t("clipsFinalRaw.unarchive")}
+                    </DropdownMenuItem>
+                  ) : (
+                    <DropdownMenuItem onSelect={() => onArchive(recording)}>
+                      <IconArchive className="h-4 w-4 me-2" />{" "}
+                      {t("navigation.archive")}
+                    </DropdownMenuItem>
+                  ))}
+                {onTrash && (
+                  <DropdownMenuItem
+                    onSelect={() => onTrash(recording)}
+                    className="text-destructive focus:text-destructive"
+                  >
+                    <IconTrash className="h-4 w-4 me-2" />{" "}
+                    {t("folderTree.delete")}
+                  </DropdownMenuItem>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
         </div>
 
         <div className="flex items-center gap-2">

package/corpus/templates/clips/app/components/library/search-bar.tsx

@@ -43,6 +43,7 @@ function highlight(
 
 interface SearchBarProps {
   className?: string;
+  side?: "top" | "right" | "bottom" | "left";
 }
 
 function matchLabel(hit: SearchHit, t: ReturnType<typeof useT>): string {
@@ -60,7 +61,7 @@ function matchLabel(hit: SearchHit, t: ReturnType<typeof useT>): string {
   }
 }
 
-export function SearchBar({ className }: SearchBarProps) {
+export function SearchBar({ className, side = "right" }: SearchBarProps) {
   const t = useT();
   const navigate = useNavigate();
   const [query, setQuery] = useState("");
@@ -154,9 +155,9 @@ export function SearchBar({ className }: SearchBarProps) {
 
         <PopoverContent
           align="start"
-          side="right"
+          side={side}
           sideOffset={8}
-          className="w-[420px] p-0 overflow-hidden"
+          className="w-[min(420px,calc(100vw-2rem))] p-0 overflow-hidden"
           onOpenAutoFocus={(e) => e.preventDefault()}
         >
           {isFetching && results.length === 0 && (