@agent-native/core 0.114.0 → 0.114.2

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

@@ -6,7 +6,7 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import type { DocumentTreeNode } from "@shared/api";
+import type { Document, DocumentTreeNode } from "@shared/api";
 import {
   IconChevronRight,
   IconDatabase,
@@ -88,6 +88,178 @@ export function DocumentSidebarIcon({
   return <IconFileText size={14} className="text-muted-foreground" />;
 }
 
+export function FavoriteDocumentItem({
+  document,
+  active,
+  sidebarWidth,
+  onSelect,
+  onCreateChildPage,
+  onCreateChildDatabase,
+  onRemoveFavorite,
+  onDelete,
+}: {
+  document: Document;
+  active: boolean;
+  sidebarWidth?: number;
+  onSelect: () => void;
+  onCreateChildPage: () => void;
+  onCreateChildDatabase: () => void;
+  onRemoveFavorite: () => void;
+  onDelete: () => void;
+}) {
+  const t = useT();
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const canEdit = document.canEdit !== false;
+  const canManage =
+    document.canManage === true ||
+    document.accessRole === "owner" ||
+    document.accessRole === "admin";
+  const canCreateChild = canEdit && document.source?.mode !== "local-files";
+  const title = document.title || t("sidebar.untitled");
+
+  return (
+    <div
+      className={cn(
+        "group relative flex min-w-0 cursor-pointer items-center gap-1.5 rounded-md py-[5px] pe-2 text-sm",
+        active
+          ? "font-semibold text-foreground"
+          : "text-muted-foreground hover:bg-accent hover:text-foreground",
+      )}
+      style={{
+        paddingInlineStart: "26px",
+        width:
+          sidebarWidth === undefined
+            ? undefined
+            : `${Math.max(0, sidebarWidth)}px`,
+      }}
+      aria-label={title}
+    >
+      <button
+        type="button"
+        className="absolute inset-0 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        aria-label={`Open ${title}`}
+        onClick={onSelect}
+      />
+      <span className="pointer-events-none relative flex h-5 w-5 shrink-0 items-center justify-center text-center">
+        <DocumentSidebarIcon document={document} />
+      </span>
+      <span className="pointer-events-none relative min-w-0 flex-1 truncate pe-12">
+        {title}
+      </span>
+      <div
+        className={cn(
+          "pointer-events-none absolute right-1 top-1/2 z-10 flex -translate-y-1/2 items-center gap-0.5 rounded-md bg-accent px-0.5 opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100",
+          active && "text-accent-foreground",
+        )}
+        onPointerDown={(event) => event.stopPropagation()}
+        onClick={(event) => event.stopPropagation()}
+      >
+        {(canEdit || canManage) && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button
+                type="button"
+                className="flex h-6 w-6 items-center justify-center rounded hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                aria-label={`More actions for ${title}`}
+                onClick={(event) => event.stopPropagation()}
+              >
+                <IconDots size={14} />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-48">
+              {canEdit && (
+                <DropdownMenuItem
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    onRemoveFavorite();
+                  }}
+                >
+                  <IconStar size={14} className="me-2 fill-current" />
+                  {t("sidebar.removeFromFavorites")}
+                </DropdownMenuItem>
+              )}
+              {canEdit && canManage && <DropdownMenuSeparator />}
+              {canManage && (
+                <DropdownMenuItem
+                  className="text-destructive"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    setDeleteDialogOpen(true);
+                  }}
+                >
+                  <IconTrash size={14} className="me-2" />
+                  {t("database.delete")}
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+        {canCreateChild && (
+          <DropdownMenu>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <DropdownMenuTrigger asChild>
+                  <button
+                    type="button"
+                    className="flex h-7 w-7 items-center justify-center rounded hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    aria-label={t("sidebar.addChildTo", { title })}
+                    onClick={(event) => event.stopPropagation()}
+                  >
+                    <IconPlus size={14} />
+                  </button>
+                </DropdownMenuTrigger>
+              </TooltipTrigger>
+              <TooltipContent>{t("sidebar.addChild")}</TooltipContent>
+            </Tooltip>
+            <DropdownMenuContent align="start" className="w-44">
+              <DropdownMenuItem
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onCreateChildPage();
+                }}
+              >
+                <IconFileText className="me-2 size-4" />
+                {t("sidebar.page")}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onCreateChildDatabase();
+                }}
+              >
+                <IconDatabase className="me-2 size-4" />
+                {t("sidebar.database")}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("sidebar.deletePageQuestion")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("sidebar.deletePageDescription", { title })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("comments.cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={onDelete}
+            >
+              {t("database.delete")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
+
 export function DocumentTreeItem({
   node,
   depth,

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

@@ -150,6 +150,6 @@ export function getDocumentSidebarSections(
     localSourceDocuments,
     databaseDocuments,
     favorites,
-    showFavorites: favorites.length > 0,
+    showFavorites: !localFileMode || favorites.length > 0,
   };
 }

package/corpus/templates/content/app/components/sidebar/select-content-space.ts

@@ -1,31 +1,106 @@
 import type { ContentSpaceSummary } from "@/hooks/use-content-spaces";
 
-export function contentSpaceForActiveOrg(args: {
+export const SELECTED_CONTENT_SPACE_STORAGE_KEY = "content-selected-space";
+
+export type ContentSpaceAvailability = "loading" | "ready" | "error";
+
+export function contentSpaceAvailability(args: {
+  hasSelectedSpace: boolean;
+  contentSpacesLoading: boolean;
+  contentSpacesFetching: boolean;
+  contentSpacesError: boolean;
+  provisioningAttempted: boolean;
+  provisioningPending: boolean;
+  provisioningError: boolean;
+}): ContentSpaceAvailability {
+  if (args.hasSelectedSpace) return "ready";
+  if (args.contentSpacesError || args.provisioningError) {
+    return "error";
+  }
+  if (
+    args.contentSpacesLoading ||
+    args.contentSpacesFetching ||
+    !args.provisioningAttempted ||
+    args.provisioningPending
+  ) {
+    return "loading";
+  }
+  return "error";
+}
+
+export function contentSpaceForStoredSelection(args: {
   spaces: ContentSpaceSummary[];
   storedSpaceId: string | null;
-  activeOrgId: string | null | undefined;
 }) {
-  if (args.activeOrgId === undefined) return null;
   const stored = args.spaces.find((space) => space.id === args.storedSpaceId);
-  if (stored?.orgId === args.activeOrgId) return stored;
-  const matching = args.spaces.filter(
-    (space) => space.orgId === args.activeOrgId,
+  if (stored) return stored;
+  return (
+    args.spaces.find((space) => space.kind === "personal") ??
+    args.spaces[0] ??
+    null
+  );
+}
+
+export function contentSpaceForCatalogItem(args: {
+  databaseId: string;
+  catalogDatabaseId: string | undefined;
+  documentId: string;
+  spaces: ContentSpaceSummary[];
+}) {
+  if (args.databaseId !== args.catalogDatabaseId) {
+    return null;
+  }
+  return (
+    args.spaces.find((space) => space.catalogDocumentId === args.documentId) ??
+    null
   );
-  return args.activeOrgId === null
-    ? (matching.find((space) => space.kind === "personal") ??
-        matching[0] ??
-        null)
-    : (matching[0] ?? null);
+}
+
+export function toggleExpandedWorkspaceIds(
+  expandedIds: string[],
+  workspaceId: string,
+) {
+  return expandedIds.includes(workspaceId)
+    ? expandedIds.filter((id) => id !== workspaceId)
+    : [...expandedIds, workspaceId];
+}
+
+export function ensureWorkspaceExpanded(
+  expandedIds: string[],
+  workspaceId: string,
+) {
+  return expandedIds.includes(workspaceId)
+    ? expandedIds
+    : [...expandedIds, workspaceId];
+}
+
+export function contentSpaceIdForCreate(args: {
+  parentId?: string;
+  selectedSpace: ContentSpaceSummary | null;
+}) {
+  if (args.parentId) return undefined;
+  if (!args.selectedSpace) {
+    throw new Error("Files are still loading. Try creating the page again.");
+  }
+  return args.selectedSpace.id;
 }
 
 export async function selectContentSpace(args: {
   space: ContentSpaceSummary;
-  activeOrgId: string | null | undefined;
-  switchOrg: (orgId: string | null) => Promise<unknown>;
+  syncApplicationState: (space: ContentSpaceSummary) => Promise<unknown>;
   persistSelection: (spaceId: string) => void;
+  openFiles: (documentId: string) => void;
 }) {
-  if (args.activeOrgId !== args.space.orgId) {
-    await args.switchOrg(args.space.orgId);
-  }
+  await args.syncApplicationState(args.space);
   args.persistSelection(args.space.id);
+  args.openFiles(args.space.filesDocumentId);
+}
+
+export function createContentSpaceSelectionQueue() {
+  let pending = Promise.resolve();
+  return (selection: () => Promise<void>) => {
+    const next = pending.catch(() => undefined).then(selection);
+    pending = next;
+    return next;
+  };
 }

package/corpus/templates/content/app/entry.client.tsx

@@ -1,5 +1,8 @@
 import { appBasePath } from "@agent-native/core/client/api-path";
-import { installRouteChunkRecovery } from "@agent-native/core/client/route-chunk-recovery";
+import {
+  installRouteChunkRecovery,
+  stripBuildCompatibilityCacheBuster,
+} from "@agent-native/core/client/route-chunk-recovery";
 import { hydrateRoot } from "react-dom/client";
 import { HydratedRouter } from "react-router/dom";
 
@@ -20,3 +23,4 @@ if (context) {
 }
 
 hydrateRoot(document, <HydratedRouter />);
+stripBuildCompatibilityCacheBuster();

package/corpus/templates/content/app/hooks/use-content-database.ts

@@ -11,6 +11,7 @@ import type {
   CancelPreparedBuilderSourceUpdateResponse,
   ChangeContentDatabaseSourceRoleRequest,
   ContentDatabaseResponse,
+  ContentDatabaseItem,
   ContentDatabasePersonalViewResponse,
   ContentDatabaseSourceFieldMapping,
   CreateInlineDatabaseRequest,
@@ -59,6 +60,77 @@ export function contentDatabaseByIdQueryKey(databaseId: string) {
   return ["action", "get-content-database", { databaseId }] as const;
 }
 
+export function applyOptimisticItemToContentDatabase(
+  current: ContentDatabaseResponse | undefined,
+  item: ContentDatabaseItem,
+): ContentDatabaseResponse | undefined {
+  if (!current) return current;
+  if (
+    current.items.some(
+      (candidate) =>
+        candidate.id === item.id || candidate.document.id === item.document.id,
+    )
+  ) {
+    return current;
+  }
+
+  return {
+    ...current,
+    items: [...current.items, item],
+    pagination: current.pagination
+      ? {
+          ...current.pagination,
+          totalItems: current.pagination.totalItems + 1,
+          returnedItems: current.pagination.returnedItems + 1,
+        }
+      : current.pagination,
+  };
+}
+
+export function removeOptimisticItemFromContentDatabase(
+  current: ContentDatabaseResponse | undefined,
+  documentId: string,
+): ContentDatabaseResponse | undefined {
+  if (!current) return current;
+  const items = current.items.filter(
+    (candidate) => candidate.document.id !== documentId,
+  );
+  if (items.length === current.items.length) return current;
+
+  return {
+    ...current,
+    items,
+    pagination: current.pagination
+      ? {
+          ...current.pagination,
+          totalItems: Math.max(0, current.pagination.totalItems - 1),
+          returnedItems: Math.max(0, current.pagination.returnedItems - 1),
+        }
+      : current.pagination,
+  };
+}
+
+export function preserveScopedDatabasePlaceholder<T>(
+  previous: T | undefined,
+  previousQuery: Pick<Query, "queryKey"> | undefined,
+  scope: { documentId?: string; databaseId?: string },
+): T | undefined {
+  const previousParams = previousQuery?.queryKey[2];
+  if (!previousParams || typeof previousParams !== "object") return undefined;
+
+  const params = previousParams as {
+    documentId?: unknown;
+    databaseId?: unknown;
+  };
+  if (scope.documentId !== undefined) {
+    return params.documentId === scope.documentId ? previous : undefined;
+  }
+  if (scope.databaseId !== undefined) {
+    return params.databaseId === scope.databaseId ? previous : undefined;
+  }
+  return undefined;
+}
+
 function isContentDatabaseQueryForDocument(
   queryKey: readonly unknown[],
   documentId: string,
@@ -449,7 +521,10 @@ export function useContentDatabase(documentId: string | null, limit?: number) {
     {
       enabled: !!documentId,
       retry: false,
-      placeholderData: (previous) => previous,
+      placeholderData: (previous, previousQuery) =>
+        preserveScopedDatabasePlaceholder(previous, previousQuery, {
+          documentId: documentId ?? undefined,
+        }),
       initialData: () =>
         documentId
           ? readCachedContentDatabaseResponse(queryClient, documentId)
@@ -468,7 +543,10 @@ export function useContentDatabaseById(databaseId: string | null) {
     {
       enabled: !!databaseId,
       retry: false,
-      placeholderData: (previous) => previous,
+      placeholderData: (previous, previousQuery) =>
+        preserveScopedDatabasePlaceholder(previous, previousQuery, {
+          databaseId: databaseId ?? undefined,
+        }),
     },
   );
 }
@@ -719,7 +797,10 @@ export function useContentDatabasePersonalView(databaseId: string | null) {
     {
       enabled: !!databaseId,
       retry: false,
-      placeholderData: (previous) => previous,
+      placeholderData: (previous, previousQuery) =>
+        preserveScopedDatabasePlaceholder(previous, previousQuery, {
+          databaseId: databaseId ?? undefined,
+        }),
     },
   );
 }

package/corpus/templates/content/app/hooks/use-content-spaces.ts

@@ -9,6 +9,7 @@ export type ContentSpaceSummary = {
   name: string;
   kind: string;
   filesDatabaseId: string;
+  filesDocumentId: string;
   orgId: string | null;
   role: "owner" | "editor" | "viewer";
   catalogItemId: string;
@@ -17,6 +18,9 @@ export type ContentSpaceSummary = {
 
 export type ListContentSpacesResponse = {
   catalogDatabaseId: string;
+  catalogDocumentId: string;
+  favoritesDatabaseId: string | null;
+  favoritesDocumentId: string | null;
   spaces: ContentSpaceSummary[];
 };
 
@@ -33,10 +37,64 @@ export function useContentSpaces() {
 export function useEnsureContentSpaces() {
   const queryClient = useQueryClient();
   return useActionMutation("ensure-content-spaces", {
-    onSuccess: () => {
-      queryClient.invalidateQueries({
+    onSuccess: async () => {
+      await queryClient.refetchQueries({
         queryKey: ["action", "list-content-spaces"],
       });
     },
   });
 }
+
+export function useCreateContentSpace() {
+  const queryClient = useQueryClient();
+  return useActionMutation<
+    {
+      spaceId: string;
+      filesDatabaseId: string;
+      filesDocumentId: string;
+      catalogDatabaseId: string;
+      catalogItemId: string;
+      catalogDocumentId: string;
+      name: string;
+      kind: "user";
+    },
+    {
+      name: string;
+      requestId: string;
+      propertyValues?: Record<string, unknown>;
+    }
+  >("create-content-space", {
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.refetchQueries({
+          queryKey: ["action", "list-content-spaces"],
+        }),
+        queryClient.refetchQueries({
+          queryKey: ["action", "get-content-database"],
+        }),
+      ]);
+    },
+  });
+}
+
+export function useDeleteContentSpace() {
+  const queryClient = useQueryClient();
+  return useActionMutation<
+    { success: boolean; spaceId: string; deletedDocuments: number },
+    { spaceId: string }
+  >("delete-content-space", {
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.refetchQueries({
+          queryKey: ["action", "list-content-spaces"],
+        }),
+        queryClient.refetchQueries({
+          queryKey: ["action", "get-content-database"],
+        }),
+        queryClient.refetchQueries({
+          queryKey: ["action", "list-documents"],
+        }),
+      ]);
+    },
+  });
+}

package/corpus/templates/content/app/hooks/use-create-page.ts

@@ -4,7 +4,14 @@ import { useCallback } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
 
+import {
+  contentSpaceForStoredSelection,
+  contentSpaceIdForCreate,
+  SELECTED_CONTENT_SPACE_STORAGE_KEY,
+} from "@/components/sidebar/select-content-space";
+import { useContentSpaces } from "@/hooks/use-content-spaces";
 import { useCreateDocument } from "@/hooks/use-documents";
+import { useLocalStorage } from "@/hooks/use-local-storage";
 
 const LIST_DOCUMENTS_QUERY_KEY = [
   "action",
@@ -27,12 +34,33 @@ export function useCreatePage(opts?: {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const createDocument = useCreateDocument();
+  const contentSpacesQuery = useContentSpaces();
+  const [storedSpaceId] = useLocalStorage<string | null>(
+    SELECTED_CONTENT_SPACE_STORAGE_KEY,
+    null,
+  );
+  const selectedSpace = contentSpaceForStoredSelection({
+    spaces: contentSpacesQuery.data?.spaces ?? [],
+    storedSpaceId,
+  });
   const onAfterNavigate = opts?.onAfterNavigate;
   const shouldNavigate = opts?.navigate ?? true;
   const shouldAwaitPersist = opts?.awaitPersist ?? true;
 
   return useCallback(
     async (parentId?: string) => {
+      let spaceId: string | undefined;
+      try {
+        spaceId = contentSpaceIdForCreate({
+          parentId,
+          selectedSpace,
+        });
+      } catch (error) {
+        toast.error(
+          error instanceof Error ? error.message : "Files are still loading",
+        );
+        throw error;
+      }
       const id = nanoid();
       const now = new Date().toISOString();
       const tempDoc: Document = {
@@ -66,6 +94,7 @@ export function useCreatePage(opts?: {
           id,
           title: "",
           parentId: parentId ?? undefined,
+          spaceId,
         });
         // Replace optimistic doc with real server doc + clear any 404 error
         // state from the in-flight fetch that ran before create completed.
@@ -109,6 +138,7 @@ export function useCreatePage(opts?: {
       navigate,
       onAfterNavigate,
       queryClient,
+      selectedSpace,
       shouldAwaitPersist,
       shouldNavigate,
     ],