@agent-native/core 0.137.5 → 0.137.7

package/corpus/README.md

@@ -31,4 +31,4 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 
 ## Generated Counts
 
-- template files: 7578
+- template files: 7581

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

@@ -32,9 +32,11 @@ import {
   IconShare,
   IconSettings,
   IconSearch,
+  IconDots,
+  IconEdit,
 } from "@tabler/icons-react";
 import { ReactNode, useEffect, useMemo, useState } from "react";
-import { NavLink, useLocation, useParams } from "react-router";
+import { NavLink, useLocation, useNavigate, useParams } from "react-router";
 import { toast } from "sonner";
 
 import {
@@ -52,6 +54,12 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import {
   Tooltip,
   TooltipContent,
@@ -73,6 +81,7 @@ import { CreateSpaceDialog } from "./create-space-dialog";
 import { FolderTree, type FolderNode } from "./folder-tree";
 import { PageHeaderSlotProvider } from "./page-header";
 import { SearchBar } from "./search-bar";
+import { SpaceDialogs } from "./space-dialogs";
 
 interface LibraryLayoutProps {
   children: ReactNode;
@@ -98,6 +107,7 @@ function ClipsAgentToggleButton() {
 
 export function LibraryLayout({ children }: LibraryLayoutProps) {
   const location = useLocation();
+  const navigate = useNavigate();
   const t = useT();
   // Bind chat to the currently-open recording (`/r/:id`). Library, spaces,
   // meetings, dictate, and settings stay unscoped — those are list-y views
@@ -123,9 +133,12 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
   const currentOrganizationId =
     organizations?.currentId ?? organizations?.organizations?.[0]?.id;
 
-  const { data: spaces } = useSpaces(currentOrganizationId, {
-    enabled: hasActiveOrg && Boolean(currentOrganizationId),
-  });
+  const { data: spaces, refetch: refetchSpaces } = useSpaces(
+    currentOrganizationId,
+    {
+      enabled: hasActiveOrg && Boolean(currentOrganizationId),
+    },
+  );
   const { data: libFolders } = useFolders(
     {
       organizationId: currentOrganizationId,
@@ -240,6 +253,10 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
   const [newFolderOpen, setNewFolderOpen] = useState(false);
   const [newFolderName, setNewFolderName] = useState("");
   const [newSpaceOpen, setNewSpaceOpen] = useState(false);
+  const [deleteSpaceId, setDeleteSpaceId] = useState<string | null>(null);
+  const [deleteSpaceName, setDeleteSpaceName] = useState("");
+  const [renameSpaceId, setRenameSpaceId] = useState<string | null>(null);
+  const [renameSpaceValue, setRenameSpaceValue] = useState("");
   const createFolder = useCreateFolder();
 
   const navItems: {
@@ -540,26 +557,70 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
                       const active = spaceId === s.id;
                       return (
                         <li key={s.id}>
-                          <NavLink
-                            to={`/spaces/${s.id}`}
+                          <div
                             className={cn(
-                              "flex items-center gap-2 rounded px-2 py-1 text-xs",
+                              "group flex items-center gap-2 rounded px-2 py-1 text-xs",
                               active
                                 ? "bg-primary/10 text-primary"
                                 : "text-foreground hover:bg-accent/60",
                             )}
                           >
-                            <div
-                              className="flex h-4 w-4 items-center justify-center rounded text-[10px]"
-                              style={{
-                                background: s.color ?? "hsl(var(--primary))",
-                                color: "white",
-                              }}
+                            <NavLink
+                              to={`/spaces/${s.id}`}
+                              className="flex min-w-0 flex-1 items-center gap-2"
                             >
-                              {s.iconEmoji ?? s.name.slice(0, 1).toUpperCase()}
-                            </div>
-                            <span className="truncate">{s.name}</span>
-                          </NavLink>
+                              <div
+                                className="flex h-4 w-4 items-center justify-center rounded text-[10px] shrink-0"
+                                style={{
+                                  background: s.color ?? "hsl(var(--primary))",
+                                  color: "white",
+                                }}
+                              >
+                                {s.iconEmoji ??
+                                  s.name.slice(0, 1).toUpperCase()}
+                              </div>
+                              <span className="truncate">{s.name}</span>
+                            </NavLink>
+                            {canManageOrg && (
+                              <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                  <button
+                                    type="button"
+                                    aria-label={`${s.name}: ${t("root.commandActions")}`}
+                                    title={`${s.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"
+                                  >
+                                    <IconDots className="h-3.5 w-3.5" />
+                                  </button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="start" side="right">
+                                  <DropdownMenuItem
+                                    onSelect={() => {
+                                      setTimeout(() => {
+                                        setRenameSpaceValue(s.name);
+                                        setRenameSpaceId(s.id);
+                                      }, 0);
+                                    }}
+                                  >
+                                    <IconEdit className="h-3.5 w-3.5 me-2" />
+                                    {t("spaceDialog.renameSpace")}
+                                  </DropdownMenuItem>
+                                  <DropdownMenuItem
+                                    onSelect={() => {
+                                      setTimeout(() => {
+                                        setDeleteSpaceId(s.id);
+                                        setDeleteSpaceName(s.name);
+                                      }, 0);
+                                    }}
+                                    className="text-destructive"
+                                  >
+                                    <IconTrash className="h-3.5 w-3.5 me-2" />
+                                    {t("spaceDialog.deleteSpace")}
+                                  </DropdownMenuItem>
+                                </DropdownMenuContent>
+                              </DropdownMenu>
+                            )}
+                          </div>
                         </li>
                       );
                     })}
@@ -781,6 +842,23 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
         onOpenChange={setNewSpaceOpen}
         organizationId={currentOrganizationId}
       />
+
+      <SpaceDialogs
+        renameSpaceId={renameSpaceId}
+        renameSpaceName=""
+        setRenameSpaceId={setRenameSpaceId}
+        renameValue={renameSpaceValue}
+        setRenameValue={setRenameSpaceValue}
+        deleteSpaceId={deleteSpaceId}
+        deleteSpaceName={deleteSpaceName}
+        setDeleteSpaceId={setDeleteSpaceId}
+        onMutationSuccess={(deletedSpaceId) => {
+          if (deletedSpaceId && spaceId === deletedSpaceId) {
+            navigate("/spaces");
+          }
+          refetchSpaces?.();
+        }}
+      />
     </div>
   );
 }

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

@@ -1,8 +1,24 @@
-import { IconUsersGroup, IconVideo } from "@tabler/icons-react";
+import { useT } from "@agent-native/core/client/i18n";
+import { useOrgRole } from "@agent-native/core/client/org";
+import {
+  IconUsersGroup,
+  IconVideo,
+  IconTrash,
+  IconEdit,
+} from "@tabler/icons-react";
+import { useState } from "react";
 import { Link } from "react-router";
 
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
 import { cn } from "@/lib/utils";
 
+import { SpaceDialogs } from "./space-dialogs";
+
 export interface SpaceCardData {
   id: string;
   name: string;
@@ -16,80 +32,134 @@ export interface SpaceCardData {
 interface SpaceCardProps {
   space: SpaceCardData;
   className?: string;
+  onMutationSuccess?: () => void;
 }
 
-export function SpaceCard({ space, className }: SpaceCardProps) {
+export function SpaceCard({
+  space,
+  className,
+  onMutationSuccess,
+}: SpaceCardProps) {
+  const t = useT();
+  const { canManageOrg } = useOrgRole();
   const color = space.color || "hsl(var(--primary))";
   const members = space.memberEmails ?? [];
   const initial = (space.name.trim().slice(0, 1) || "S").toUpperCase();
+  const [renameSpaceId, setRenameSpaceId] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState("");
+  const [deleteSpaceId, setDeleteSpaceId] = useState<string | null>(null);
 
   return (
-    <Link
-      to={`/spaces/${space.id}`}
-      className={cn(
-        "group flex flex-col overflow-hidden rounded-lg border border-border bg-card text-start",
-        "hover:border-primary/40",
-        "shadow-[0_1px_2px_rgba(15,23,42,0.04)] hover:shadow-md",
-        className,
-      )}
-    >
-      <div
-        className="relative flex h-24 items-center justify-center"
-        style={{
-          background: `linear-gradient(135deg, ${color} 0%, ${color}dd 100%)`,
-        }}
-      >
-        {space.iconEmoji ? (
-          <span className="text-3xl">{space.iconEmoji}</span>
-        ) : (
-          <span className="text-3xl font-semibold text-white">{initial}</span>
-        )}
-      </div>
-      <div className="flex flex-1 flex-col p-3">
-        <h3 className="text-sm font-semibold text-foreground truncate">
-          {space.name}
-        </h3>
-        <div className="mt-2 flex items-center justify-between text-[11px] text-muted-foreground">
-          <div className="flex items-center gap-1">
-            <IconUsersGroup className="h-3.5 w-3.5" />
-            <span>
-              {space.memberCount ?? members.length} member
-              {(space.memberCount ?? members.length) === 1 ? "" : "s"}
-            </span>
-          </div>
-          <div className="flex items-center gap-1">
-            <IconVideo className="h-3.5 w-3.5" />
-            <span>
-              {space.recordingCount ?? 0} recording
-              {(space.recordingCount ?? 0) === 1 ? "" : "s"}
-            </span>
-          </div>
-        </div>
-
-        {members.length > 0 && (
-          <div className="mt-2 flex -space-x-1">
-            {members.slice(0, 5).map((email) => {
-              const initials = (email.split("@")[0] || "?")
-                .slice(0, 2)
-                .toUpperCase();
-              return (
-                <div
-                  key={email}
-                  title={email}
-                  className="flex h-5 w-5 items-center justify-center rounded-full border border-background bg-primary/15 text-[9px] font-medium text-primary"
-                >
-                  {initials}
+    <>
+      <ContextMenu>
+        <ContextMenuTrigger asChild>
+          <Link
+            to={`/spaces/${space.id}`}
+            className={cn(
+              "group flex flex-col overflow-hidden rounded-lg border border-border bg-card text-start",
+              "hover:border-primary/40",
+              "shadow-[0_1px_2px_rgba(15,23,42,0.04)] hover:shadow-md",
+              className,
+            )}
+          >
+            <div
+              className="relative flex h-24 items-center justify-center"
+              style={{
+                background: `linear-gradient(135deg, ${color} 0%, ${color}dd 100%)`,
+              }}
+            >
+              {space.iconEmoji ? (
+                <span className="text-3xl">{space.iconEmoji}</span>
+              ) : (
+                <span className="text-3xl font-semibold text-white">
+                  {initial}
+                </span>
+              )}
+            </div>
+            <div className="flex flex-1 flex-col p-3">
+              <h3 className="text-sm font-semibold text-foreground truncate">
+                {space.name}
+              </h3>
+              <div className="mt-2 flex items-center justify-between text-[11px] text-muted-foreground">
+                <div className="flex items-center gap-1">
+                  <IconUsersGroup className="h-3.5 w-3.5" />
+                  <span>
+                    {space.memberCount ?? members.length} member
+                    {(space.memberCount ?? members.length) === 1 ? "" : "s"}
+                  </span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <IconVideo className="h-3.5 w-3.5" />
+                  <span>
+                    {space.recordingCount ?? 0} recording
+                    {(space.recordingCount ?? 0) === 1 ? "" : "s"}
+                  </span>
                 </div>
-              );
-            })}
-            {members.length > 5 && (
-              <div className="flex h-5 w-5 items-center justify-center rounded-full border border-background bg-muted text-[9px] text-muted-foreground">
-                +{members.length - 5}
               </div>
-            )}
-          </div>
+
+              {members.length > 0 && (
+                <div className="mt-2 flex -space-x-1">
+                  {members.slice(0, 5).map((email) => {
+                    const initials = (email.split("@")[0] || "?")
+                      .slice(0, 2)
+                      .toUpperCase();
+                    return (
+                      <div
+                        key={email}
+                        title={email}
+                        className="flex h-5 w-5 items-center justify-center rounded-full border border-background bg-primary/15 text-[9px] font-medium text-primary"
+                      >
+                        {initials}
+                      </div>
+                    );
+                  })}
+                  {members.length > 5 && (
+                    <div className="flex h-5 w-5 items-center justify-center rounded-full border border-background bg-muted text-[9px] text-muted-foreground">
+                      +{members.length - 5}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </Link>
+        </ContextMenuTrigger>
+        {canManageOrg && (
+          <ContextMenuContent>
+            <ContextMenuItem
+              onSelect={() => {
+                setTimeout(() => {
+                  setRenameValue(space.name);
+                  setRenameSpaceId(space.id);
+                }, 0);
+              }}
+            >
+              <IconEdit className="h-4 w-4 mr-2" />
+              {t("spaceDialog.renameSpace")}
+            </ContextMenuItem>
+            <ContextMenuItem
+              onSelect={() => {
+                setTimeout(() => setDeleteSpaceId(space.id), 0);
+              }}
+              className="text-destructive focus:text-destructive"
+            >
+              <IconTrash className="h-4 w-4 mr-2" />
+              {t("spaceDialog.deleteSpace")}
+            </ContextMenuItem>
+          </ContextMenuContent>
         )}
-      </div>
-    </Link>
+      </ContextMenu>
+
+      <SpaceDialogs
+        renameSpaceId={renameSpaceId}
+        renameSpaceName={space.name}
+        setRenameSpaceId={setRenameSpaceId}
+        renameValue={renameValue}
+        setRenameValue={setRenameValue}
+        deleteSpaceId={deleteSpaceId}
+        deleteSpaceName={space.name}
+        setDeleteSpaceId={setDeleteSpaceId}
+        onMutationSuccess={onMutationSuccess}
+      />
+    </>
   );
 }

package/corpus/templates/clips/app/components/library/space-dialogs.tsx

@@ -0,0 +1,144 @@
+import { useActionMutation } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { useState } from "react";
+import { toast } from "sonner";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+interface SpaceDialogsProps {
+  renameSpaceId: string | null;
+  renameSpaceName: string;
+  setRenameSpaceId: (id: string | null) => void;
+  renameValue: string;
+  setRenameValue: (value: string) => void;
+  deleteSpaceId: string | null;
+  deleteSpaceName: string;
+  setDeleteSpaceId: (id: string | null) => void;
+  onMutationSuccess?: (deletedSpaceId?: string) => void;
+}
+
+export function SpaceDialogs({
+  renameSpaceId,
+  renameSpaceName,
+  setRenameSpaceId,
+  renameValue,
+  setRenameValue,
+  deleteSpaceId,
+  deleteSpaceName,
+  setDeleteSpaceId,
+  onMutationSuccess,
+}: SpaceDialogsProps) {
+  const t = useT();
+  const renameSpace = useActionMutation("rename-space");
+  const deleteSpace = useActionMutation("delete-space");
+
+  const handleRename = async () => {
+    if (!renameSpaceId) return;
+    try {
+      await renameSpace.mutateAsync({
+        id: renameSpaceId,
+        name: renameValue.trim(),
+      });
+      toast.success(t("spaceDialog.renamed"));
+      setRenameSpaceId(null);
+      setRenameValue("");
+      onMutationSuccess?.();
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : t("spaceDialog.renameFailed"),
+      );
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deleteSpaceId) return;
+    try {
+      await deleteSpace.mutateAsync({ id: deleteSpaceId });
+      toast.success(t("spaceDialog.deleted", { name: deleteSpaceName }));
+      setDeleteSpaceId(null);
+      onMutationSuccess?.(deleteSpaceId);
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : t("spaceDialog.deleteFailed"),
+      );
+    }
+  };
+
+  return (
+    <>
+      {/* Rename space dialog */}
+      <AlertDialog
+        open={renameSpaceId !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            setRenameSpaceId(null);
+            setRenameValue("");
+          }
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogTitle>{t("spaceDialog.renameSpace")}</AlertDialogTitle>
+          <input
+            autoFocus
+            value={renameValue}
+            onChange={(e) => setRenameValue(e.target.value)}
+            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30"
+          />
+          <div className="flex justify-end gap-2">
+            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={(event) => {
+                event.preventDefault();
+                void handleRename();
+              }}
+              disabled={renameSpace.isPending || !renameValue.trim()}
+            >
+              {renameSpace.isPending
+                ? t("spaceDialog.renaming")
+                : t("spaceDialog.renameSpace")}
+            </AlertDialogAction>
+          </div>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Delete space dialog */}
+      <AlertDialog
+        open={deleteSpaceId !== null}
+        onOpenChange={(open) => {
+          if (!open) setDeleteSpaceId(null);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogTitle>
+            {t("spaceDialog.deleteTitle", { name: deleteSpaceName })}
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            {t("spaceDialog.deleteDescription")}
+          </AlertDialogDescription>
+          <div className="flex justify-end gap-2">
+            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={(event) => {
+                event.preventDefault();
+                void handleDelete();
+              }}
+              disabled={deleteSpace.isPending}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {deleteSpace.isPending
+                ? t("spaceDialog.deleting")
+                : t("spaceDialog.deleteSpace")}
+            </AlertDialogAction>
+          </div>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

package/corpus/templates/clips/app/hooks/use-library.ts

@@ -240,11 +240,11 @@ export function useSpaces(
   organizationId?: string,
   options: { enabled?: boolean } = {},
 ) {
-  const { data, isLoading } = useOrganizationState(organizationId, {
+  const { data, isLoading, refetch } = useOrganizationState(organizationId, {
     enabled: options.enabled ?? Boolean(organizationId),
   });
   const spaces = Array.isArray(data?.spaces) ? (data.spaces as any[]) : [];
-  return { data: { spaces }, isLoading };
+  return { data: { spaces }, isLoading, refetch };
 }
 
 export function useOrganizations(options: { enabled?: boolean } = {}) {

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

@@ -1101,6 +1101,19 @@ All notable user-facing changes to Clips are documented here. Open it any time f
     spaceCreated: "Space created",
     createFailed: "Could not create space",
   },
+  spaceDialog: {
+    deleteSpace: "Delete space",
+    renameSpace: "Rename space",
+    deleteTitle: 'Delete "{{name}}"?',
+    deleteDescription:
+      "This will delete the space and remove it from all recordings. This action cannot be undone.",
+    renamed: "Space renamed",
+    deleted: 'Deleted "{{name}}"',
+    renameFailed: "Failed to rename space",
+    deleteFailed: "Failed to delete space",
+    renaming: "Renaming...",
+    deleting: "Deleting...",
+  },
   signInPrompt: {
     title: "Sign in to {{intent}}",
     description:

package/corpus/templates/clips/app/routes/_app.spaces._index.tsx

@@ -34,7 +34,7 @@ export default function SpacesIndexRoute() {
   const { data: organizations } = useOrganizations();
   const currentOrganizationId =
     organizations?.currentId ?? organizations?.organizations?.[0]?.id;
-  const { data, isLoading } = useSpaces(currentOrganizationId);
+  const { data, isLoading, refetch } = useSpaces(currentOrganizationId);
 
   const spaces: SpaceCardData[] = (data?.spaces ?? []).map((s: any) => ({
     id: s.id,
@@ -80,7 +80,11 @@ export default function SpacesIndexRoute() {
         ) : (
           <div className="grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(240px,1fr))]">
             {spaces.map((s) => (
-              <SpaceCard key={s.id} space={s} />
+              <SpaceCard
+                key={s.id}
+                space={s}
+                onMutationSuccess={() => refetch?.()}
+              />
             ))}
           </div>
         )}