@agent-native/core 0.178.0 → 0.178.1-nightly-20260909221943

package/corpus/templates/clips/app/components/library/empty-state.tsx

@@ -6,7 +6,8 @@ import {
   IconArchive,
   IconTrash,
 } from "@tabler/icons-react";
-import { useNavigate } from "react-router";
+import type { ComponentType, ReactNode } from "react";
+import { Link, useNavigate } from "react-router";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -38,6 +39,40 @@ const ICONS: Record<EmptyKind, React.ComponentType<{ className?: string }>> = {
 };
 
 const CTA_KINDS = new Set<EmptyKind>(["library", "folder", "space"]);
+const BACK_TO_LIBRARY_KINDS = new Set<EmptyKind>([
+  "shared",
+  "archive",
+  "trash",
+]);
+
+interface AppEmptyStateProps {
+  icon: ComponentType<{ className?: string }>;
+  title: ReactNode;
+  description?: ReactNode;
+  content?: ReactNode;
+}
+
+export function AppEmptyState({
+  icon: Icon,
+  title,
+  description,
+  content,
+}: AppEmptyStateProps) {
+  return (
+    <Empty className="min-h-64 px-6 py-12 md:p-12">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <Icon />
+        </EmptyMedia>
+        <EmptyTitle>{title}</EmptyTitle>
+        {description ? (
+          <EmptyDescription>{description}</EmptyDescription>
+        ) : null}
+      </EmptyHeader>
+      {content ? <EmptyContent>{content}</EmptyContent> : null}
+    </Empty>
+  );
+}
 
 interface EmptyStateProps {
   kind: EmptyKind;
@@ -69,22 +104,22 @@ export function EmptyState({
     }
   };
 
+  const content = hasCta ? (
+    <Button onClick={handleCta} size="sm">
+      {t(`empty.${kind}.cta`)}
+    </Button>
+  ) : BACK_TO_LIBRARY_KINDS.has(kind) ? (
+    <Button asChild size="sm" variant="outline">
+      <Link to="/library">{t("recordingPage.backToLibrary")}</Link>
+    </Button>
+  ) : null;
+
   return (
-    <Empty className="min-h-full rounded-none py-20">
-      <EmptyHeader>
-        <EmptyMedia variant="icon">
-          <Icon />
-        </EmptyMedia>
-        <EmptyTitle>{t(`empty.${kind}.title`)}</EmptyTitle>
-        <EmptyDescription>{t(`empty.${kind}.body`)}</EmptyDescription>
-      </EmptyHeader>
-      {hasCta ? (
-        <EmptyContent>
-          <Button onClick={handleCta} size="sm">
-            {t(`empty.${kind}.cta`)}
-          </Button>
-        </EmptyContent>
-      ) : null}
-    </Empty>
+    <AppEmptyState
+      icon={Icon}
+      title={t(`empty.${kind}.title`)}
+      description={t(`empty.${kind}.body`)}
+      content={content}
+    />
   );
 }

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

@@ -0,0 +1,34 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { IconFolderOpen } from "@tabler/icons-react";
+import { Link } from "react-router";
+
+import { cn } from "@/lib/utils";
+
+interface FolderCardProps {
+  folder: {
+    id: string;
+    name: string;
+  };
+  href: string;
+}
+
+export function FolderCard({ folder, href }: FolderCardProps) {
+  const t = useT();
+
+  return (
+    <Link
+      to={href}
+      aria-label={`${folder.name} — ${t("navigation.folder")}`}
+      className={cn(
+        "group flex h-14 min-w-0 items-center gap-3 rounded-lg border border-border bg-card px-3.5 py-2.5 text-start",
+        "shadow-[0_1px_2px_rgba(15,23,42,0.04)] transition-colors hover:border-primary/40 hover:bg-accent/20",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      )}
+    >
+      <IconFolderOpen className="size-5 shrink-0 text-muted-foreground transition-transform group-hover:scale-105 motion-reduce:transition-none" />
+      <span className="min-w-0 truncate text-sm font-medium text-foreground">
+        {folder.name}
+      </span>
+    </Link>
+  );
+}

package/corpus/templates/clips/app/components/library/folder-tree.tsx

@@ -53,6 +53,7 @@ export interface FolderNode {
   parentId: string | null;
   spaceId: string | null;
   name: string;
+  recordingCount?: number;
   children?: FolderNode[];
 }
 
@@ -80,6 +81,8 @@ interface FolderTreeProps {
   /** Build the URL for a folder — allows library or space-scoped trees. */
   buildPath: (folderId: string) => string;
   activeFolderId?: string | null;
+  /** Use the single-indent spacing expected by a sidebar submenu. */
+  compact?: boolean;
 }
 
 export function FolderTree({
@@ -88,6 +91,7 @@ export function FolderTree({
   spaceId = null,
   buildPath,
   activeFolderId,
+  compact = false,
 }: FolderTreeProps) {
   const t = useT();
   const tree = useMemo(() => buildTree(folders), [folders]);
@@ -111,6 +115,7 @@ export function FolderTree({
           activeFolderId={activeFolderId}
           organizationId={organizationId}
           spaceId={spaceId}
+          compact={compact}
         />
       ))}
     </ul>
@@ -124,6 +129,7 @@ interface FolderItemProps {
   activeFolderId?: string | null;
   organizationId?: string;
   spaceId?: string | null;
+  compact: boolean;
 }
 
 function FolderItem({
@@ -133,6 +139,7 @@ function FolderItem({
   activeFolderId,
   organizationId,
   spaceId,
+  compact,
 }: FolderItemProps) {
   const t = useT();
   const [open, setOpen] = useState(true);
@@ -159,85 +166,122 @@ function FolderItem({
                 "group flex items-center gap-1 rounded px-1.5 py-1 text-xs",
                 isActive
                   ? "bg-primary/10 text-primary"
-                  : "text-foreground hover:bg-accent/60",
+                  : "text-primary hover:bg-accent/60",
               )}
-              style={{ paddingInlineStart: 6 + depth * 12 }}
+              style={{
+                paddingInlineStart: compact ? 8 + depth * 12 : 6 + depth * 12,
+              }}
             >
-              <CollapsibleTrigger asChild disabled={!hasChildren}>
-                <button
-                  type="button"
-                  className={cn(
-                    "rounded p-0.5 text-muted-foreground",
-                    !hasChildren && "invisible",
-                  )}
-                  onClick={(e) => e.stopPropagation()}
-                  aria-label={`${t(open ? "settings.collapse" : "settings.expand")}: ${node.name}`}
-                >
-                  <IconChevronRight
+              {!compact && (
+                <CollapsibleTrigger asChild disabled={!hasChildren}>
+                  <button
+                    type="button"
                     className={cn(
-                      "h-3 w-3 transition-transform motion-reduce:transition-none rtl:-scale-x-100",
-                      open && "rotate-90",
+                      "rounded p-0.5 text-primary",
+                      !hasChildren && "invisible",
                     )}
-                  />
-                </button>
-              </CollapsibleTrigger>
+                    onClick={(e) => e.stopPropagation()}
+                    aria-label={`${t(open ? "settings.collapse" : "settings.expand")}: ${node.name}`}
+                  >
+                    <IconChevronRight
+                      className={cn(
+                        "h-3 w-3 transition-transform motion-reduce:transition-none rtl:-scale-x-100",
+                        open && "rotate-90",
+                      )}
+                    />
+                  </button>
+                </CollapsibleTrigger>
+              )}
               <NavLink
                 to={buildPath(node.id)}
-                className="flex min-w-0 flex-1 items-center gap-1.5"
-              >
-                {open && hasChildren ? (
-                  <IconFolderOpen className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                ) : (
-                  <IconFolder className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                className={cn(
+                  "flex min-w-0 flex-1 items-center",
+                  compact ? "gap-0" : "gap-1.5",
                 )}
+              >
+                {!compact &&
+                  (open && hasChildren ? (
+                    <IconFolderOpen className="h-3.5 w-3.5 shrink-0 text-primary" />
+                  ) : (
+                    <IconFolder className="h-3.5 w-3.5 shrink-0 text-primary" />
+                  ))}
                 <span className="truncate" title={node.name}>
                   {node.name}
                 </span>
               </NavLink>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
+              {compact && hasChildren && (
+                <CollapsibleTrigger asChild>
                   <button
                     type="button"
-                    aria-label={`${node.name}: ${t("root.commandActions")}`}
-                    title={`${node.name}: ${t("root.commandActions")}`}
-                    className="rounded p-0.5 text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100"
+                    className="rounded p-0.5 text-primary hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    onClick={(e) => e.stopPropagation()}
+                    aria-label={`${t(open ? "settings.collapse" : "settings.expand")}: ${node.name}`}
                   >
-                    <IconDots className="h-3.5 w-3.5" />
+                    <IconChevronRight
+                      className={cn(
+                        "h-3 w-3 transition-transform motion-reduce:transition-none rtl:-scale-x-100",
+                        open && "rotate-90",
+                      )}
+                    />
                   </button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="start" side="right">
-                  <DropdownMenuItem
-                    onSelect={() => {
-                      setTimeout(() => {
-                        setRenameValue(node.name);
-                        setRenameOpen(true);
-                      }, 0);
-                    }}
-                  >
-                    <IconEdit className="h-3.5 w-3.5 me-2" />{" "}
-                    {t("folderTree.rename")}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    onSelect={() => {
-                      setTimeout(() => {
-                        setNewValue("");
-                        setNewOpen(true);
-                      }, 0);
-                    }}
-                  >
-                    <IconFolderPlus className="h-3.5 w-3.5 me-2" />{" "}
-                    {t("folderTree.newSubfolder")}
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem
-                    onSelect={() => setTimeout(() => setConfirmDelete(true), 0)}
-                    className="text-destructive"
-                  >
-                    <IconTrash className="h-3.5 w-3.5 me-2" />{" "}
-                    {t("folderTree.delete")}
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
+                </CollapsibleTrigger>
+              )}
+              <div className="relative size-5 shrink-0">
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      type="button"
+                      aria-label={`${node.name}: ${t("root.commandActions")}`}
+                      title={`${node.name}: ${t("root.commandActions")}`}
+                      className="peer absolute inset-0 flex items-center justify-center rounded text-primary opacity-0 transition-opacity hover:bg-accent hover:text-primary focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100"
+                    >
+                      <IconDots className="h-3.5 w-3.5" />
+                    </button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start" side="right">
+                    <DropdownMenuItem
+                      onSelect={() => {
+                        setTimeout(() => {
+                          setRenameValue(node.name);
+                          setRenameOpen(true);
+                        }, 0);
+                      }}
+                    >
+                      <IconEdit className="h-3.5 w-3.5 me-2" />{" "}
+                      {t("folderTree.rename")}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onSelect={() => {
+                        setTimeout(() => {
+                          setNewValue("");
+                          setNewOpen(true);
+                        }, 0);
+                      }}
+                    >
+                      <IconFolderPlus className="h-3.5 w-3.5 me-2" />{" "}
+                      {t("folderTree.newSubfolder")}
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem
+                      onSelect={() =>
+                        setTimeout(() => setConfirmDelete(true), 0)
+                      }
+                      className="text-destructive"
+                    >
+                      <IconTrash className="h-3.5 w-3.5 me-2" />{" "}
+                      {t("folderTree.delete")}
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+                {(node.recordingCount ?? 0) > 0 && (
+                  <span className="pointer-events-none absolute inset-0 flex items-center justify-end tabular-nums text-[11px] text-primary/80 transition-opacity group-hover:opacity-0 group-focus-within:opacity-0 peer-data-[state=open]:opacity-0">
+                    {node.recordingCount}
+                    <span className="sr-only">
+                      {t("navigation.recordings")}
+                    </span>
+                  </span>
+                )}
+              </div>
             </div>
           </ContextMenuTrigger>
           <ContextMenuContent>
@@ -292,6 +336,7 @@ function FolderItem({
                   activeFolderId={activeFolderId}
                   organizationId={organizationId}
                   spaceId={spaceId}
+                  compact={compact}
                 />
               ))}
             </ul>

package/corpus/templates/clips/app/components/library/library-action-hrefs.ts

@@ -0,0 +1,27 @@
+export interface LibraryActionScope {
+  folderId?: string | null;
+  spaceId?: string | null;
+}
+
+function scopedPath(pathname: string, params: URLSearchParams) {
+  const query = params.toString();
+  return query ? `${pathname}?${query}` : pathname;
+}
+
+export function buildLibraryActionHrefs({
+  folderId,
+  spaceId,
+}: LibraryActionScope) {
+  const scope = new URLSearchParams();
+  if (spaceId) scope.set("spaceId", spaceId);
+  if (folderId) scope.set("folderId", folderId);
+
+  const uploadParams = new URLSearchParams(scope);
+  uploadParams.set("autoUpload", "1");
+
+  return {
+    recordHref: scopedPath("/record", scope),
+    uploadHref: scopedPath("/record", uploadParams),
+    importLoomHref: scopedPath("/import", scope),
+  };
+}