@agent-native/core 0.164.12 → 0.164.17

package/corpus/templates/content/actions/sync-local-folder-source.ts

@@ -19,7 +19,13 @@ import { ensureDocumentsFilesMembership } from "./_content-files.js";
 import { resolveContentSpaceAccess } from "./_content-space-access.js";
 import { provisionContentSpaces } from "./_content-spaces.js";
 import { lockDatabaseMemberships } from "./_database-membership-lock.js";
-import { LOCAL_FOLDER_SOURCE_TYPE } from "./_local-folder-source.js";
+import {
+  LOCAL_FOLDER_SOURCE_TYPE,
+  localFolderObservedRevision,
+  localFolderSourceFileIdentity,
+  localFolderSourceIdentityFromMetadata,
+  normalizeLocalFolderSourceIdentity,
+} from "./_local-folder-source.js";
 
 const MAX_SOURCE_FILES = 500;
 const MAX_SOURCE_FILE_BYTES = 2 * 1024 * 1024;
@@ -75,13 +81,28 @@ function sourceValues(args: {
   title: string;
   hash: string;
   metadataHash: string;
+  workingCopyId: string;
+  bridgeFileIdentity?: string;
 }) {
+  const observedRevision = localFolderObservedRevision({
+    contentHash: args.hash,
+    metadataHash: args.metadataHash,
+  });
   return JSON.stringify({
     relativePath: args.path,
     extension: args.path.toLowerCase().endsWith(".mdx") ? ".mdx" : ".md",
     title: args.title,
     contentHash: args.hash,
     metadataHash: args.metadataHash,
+    observedRevision,
+    sourceFileIdentity: localFolderSourceFileIdentity({
+      workingCopyId: args.workingCopyId,
+      relativePath: args.path,
+      observedRevision,
+    }),
+    ...(args.bridgeFileIdentity
+      ? { bridgeFileIdentity: args.bridgeFileIdentity }
+      : {}),
   });
 }
 
@@ -142,9 +163,19 @@ export default defineAction({
       .refine((value) => Object.keys(value).length <= MAX_SOURCE_FILES, {
         message: `Sync is limited to ${MAX_SOURCE_FILES} files.`,
       }),
+    fileIdentities: z.record(z.string(), z.string().min(1).max(256)).optional(),
+    observedRevisions: z
+      .record(z.string(), z.string().regex(/^[a-f0-9]{64}$/i))
+      .optional(),
     dryRun: z.boolean().optional().default(false),
   }),
-  run: async ({ sourceId, files, dryRun }) => {
+  run: async ({
+    sourceId,
+    files,
+    fileIdentities = {},
+    observedRevisions,
+    dryRun,
+  }) => {
     const userEmail = getRequestUserEmail();
     if (!userEmail) throw new Error("no authenticated user");
     const builderPaths = Object.keys(files).filter(isBuilderMdxSourcePath);
@@ -154,6 +185,15 @@ export default defineAction({
       );
     }
     const entries = normalizedEntries(files);
+    if (observedRevisions) {
+      for (const [filePath, content] of entries) {
+        if (observedRevisions[filePath] !== contentHash(content)) {
+          throw new Error(
+            `Local file revision changed while reading "${filePath}"`,
+          );
+        }
+      }
+    }
     const db = getDb();
     const [target] = await db
       .select({
@@ -263,6 +303,12 @@ export default defineAction({
 
     const metadata = parseJson(target.source.metadataJson);
     const policy = truthPolicy(metadata.truthPolicy);
+    const localIdentity =
+      localFolderSourceIdentityFromMetadata(metadata.localIdentity) ??
+      normalizeLocalFolderSourceIdentity({
+        connectionId: target.source.sourceTable,
+        label: target.source.sourceName,
+      });
     const now = new Date().toISOString();
     const created: Array<{ id: string; path: string; title: string }> = [];
     const updated: Array<{ id: string; path: string; title: string }> = [];
@@ -271,16 +317,42 @@ export default defineAction({
     const conflicts: Array<{ id: string; path: string; title: string }> = [];
     const outbound: Array<{ id: string; path: string; title: string }> = [];
 
-    const buildPlans = (snapshot: Awaited<ReturnType<typeof loadSnapshot>>) =>
-      valid.map((file, index) => {
-        const pathRow = snapshot.rowByPath.get(file.path);
+    const buildPlans = (snapshot: Awaited<ReturnType<typeof loadSnapshot>>) => {
+      const rowByBridgeIdentity = new Map<
+        string,
+        (typeof snapshot.storedRows)[number]
+      >();
+      for (const row of snapshot.storedRows) {
+        const values = parseJson(row.sourceValuesJson);
+        if (typeof values.bridgeFileIdentity === "string") {
+          rowByBridgeIdentity.set(values.bridgeFileIdentity, row);
+        }
+      }
+
+      return valid.map((file, index) => {
+        const directPathRow = snapshot.rowByPath.get(file.path);
+        const incomingBridgeFileIdentity = fileIdentities[file.path];
+        const identityRow = incomingBridgeFileIdentity
+          ? rowByBridgeIdentity.get(incomingBridgeFileIdentity)
+          : undefined;
+        const incomingHash = contentHash(file.content);
+        const pathRow = directPathRow ?? identityRow;
+        const explicitId =
+          file.id && localIdentity.workingCopy.kind === "temporary"
+            ? opaqueId("content_local_file", `${sourceId}:${file.id}`)
+            : file.id;
         const id =
-          file.id ??
+          explicitId ??
           pathRow?.documentId ??
           opaqueId("content_local_file", `${sourceId}:${file.path}`);
         const existing = snapshot.documentById.get(id);
         const previousRow = snapshot.rowByDocumentId.get(id) ?? pathRow;
         const previousValues = parseJson(previousRow?.sourceValuesJson);
+        const bridgeFileIdentity =
+          incomingBridgeFileIdentity ??
+          (typeof previousValues.bridgeFileIdentity === "string"
+            ? previousValues.bridgeFileIdentity
+            : undefined);
         const previousHash =
           typeof previousValues.contentHash === "string"
             ? previousValues.contentHash
@@ -289,7 +361,6 @@ export default defineAction({
           typeof previousValues.metadataHash === "string"
             ? previousValues.metadataHash
             : null;
-        const incomingHash = contentHash(file.content);
         const incomingMetadataHash = metadataHash(file);
         const localHash = existing ? contentHash(existing.content) : null;
         const localMetadataHash = existing ? metadataHash(existing) : null;
@@ -332,8 +403,10 @@ export default defineAction({
           conflict,
           keepContent,
           applyIncoming,
+          bridgeFileIdentity,
         };
       });
+    };
 
     let plans = buildPlans(initialSnapshot);
     const initialDocumentIds = new Set(plans.map((plan) => plan.id));
@@ -348,7 +421,7 @@ export default defineAction({
       unchanged.length = 0;
       conflicts.length = 0;
       outbound.length = 0;
-      for (const row of missingRows) {
+      for (const row of policy === "source_primary" ? [] : missingRows) {
         const values = parseJson(row.sourceValuesJson);
         const path = String(values.relativePath ?? row.sourceDisplayKey ?? "");
         const document = snapshot.documentById.get(row.documentId);
@@ -375,7 +448,8 @@ export default defineAction({
         } else if (
           plan.applyIncoming ||
           plan.existing.title !== plan.file.title ||
-          plan.existing.sourcePath !== plan.file.path
+          plan.existing.sourcePath !== plan.file.path ||
+          plan.existing.sourceRootPath !== target.source.sourceTable
         ) {
           updated.push({
             id: plan.id,
@@ -518,7 +592,7 @@ export default defineAction({
               sourceMode: "local-files",
               sourceKind: "file",
               sourcePath: plan.file.path,
-              sourceRootPath: target.source.sourceName,
+              sourceRootPath: target.source.sourceTable,
               sourceUpdatedAt: now,
               visibility: target.database.orgId ? "org" : "private",
               createdAt: now,
@@ -526,7 +600,8 @@ export default defineAction({
             });
           } else if (
             plan.applyIncoming ||
-            plan.existing.sourcePath !== plan.file.path
+            plan.existing.sourcePath !== plan.file.path ||
+            plan.existing.sourceRootPath !== target.source.sourceTable
           ) {
             await tx
               .insert(schema.documentVersions)
@@ -557,7 +632,7 @@ export default defineAction({
                 sourceMode: "local-files",
                 sourceKind: "file",
                 sourcePath: plan.file.path,
-                sourceRootPath: target.source.sourceName,
+                sourceRootPath: target.source.sourceTable,
                 sourceUpdatedAt: now,
                 updatedAt: now,
               })
@@ -647,6 +722,8 @@ export default defineAction({
               title: plan.file.title,
               hash: plan.incomingHash,
               metadataHash: plan.incomingMetadataHash,
+              workingCopyId: localIdentity.workingCopy.id,
+              bridgeFileIdentity: plan.bridgeFileIdentity,
             }),
             provenance: "trusted local-folder bridge",
             syncState: "linked",
@@ -670,6 +747,47 @@ export default defineAction({
             .where(eq(schema.contentDatabaseSourceRows.id, rowId));
         }
         for (const row of missingRows) {
+          if (policy === "source_primary") {
+            await tx
+              .delete(schema.contentDatabaseSourceRows)
+              .where(eq(schema.contentDatabaseSourceRows.id, row.id));
+            const [remainingSourceRow] = await tx
+              .select({ id: schema.contentDatabaseSourceRows.id })
+              .from(schema.contentDatabaseSourceRows)
+              .where(
+                eq(
+                  schema.contentDatabaseSourceRows.databaseItemId,
+                  row.databaseItemId,
+                ),
+              )
+              .limit(1);
+            if (!remainingSourceRow) {
+              await tx
+                .delete(schema.contentDatabaseItems)
+                .where(eq(schema.contentDatabaseItems.id, row.databaseItemId));
+              await tx
+                .update(schema.documents)
+                .set({
+                  sourceMode: null,
+                  sourceKind: null,
+                  sourcePath: null,
+                  sourceRootPath: null,
+                  sourceUpdatedAt: now,
+                  updatedAt: now,
+                })
+                .where(
+                  and(
+                    eq(schema.documents.id, row.documentId),
+                    eq(schema.documents.spaceId, targetSpaceId),
+                    eq(
+                      schema.documents.sourceRootPath,
+                      target.source.sourceTable,
+                    ),
+                  ),
+                );
+            }
+            continue;
+          }
           const values = parseJson(row.sourceValuesJson);
           const path = String(
             values.relativePath ?? row.sourceDisplayKey ?? row.sourceRowId,

package/corpus/templates/content/app/components/LocalFolderLiveSync.tsx

@@ -0,0 +1,77 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect } from "react";
+
+import { getDesktopContentFiles } from "../lib/desktop-content-files";
+import { syncLiveLocalFolder } from "../lib/local-folder-live-sync";
+import { connectTemporaryLocalFolder } from "../lib/local-folder-live-sync";
+
+const RECONCILE_DELAY_MS = 120;
+
+export function LocalFolderLiveSync() {
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    const desktop = getDesktopContentFiles();
+    if (!desktop?.onChange || !desktop.subscribeChanges) return;
+    const timers = new Map<string, ReturnType<typeof setTimeout>>();
+    let active = true;
+
+    const reconcile = (folderId: string) => {
+      const current = timers.get(folderId);
+      if (current) clearTimeout(current);
+      timers.set(
+        folderId,
+        setTimeout(() => {
+          timers.delete(folderId);
+          void desktop
+            .getFolder({ folderId })
+            .then(async (folderResult) => {
+              if (!folderResult.ok) return { synced: false as const };
+              await connectTemporaryLocalFolder(folderResult.folder);
+              return syncLiveLocalFolder(folderId);
+            })
+            .then((outcome) => {
+              if (!active || !outcome.synced) return;
+              queryClient.invalidateQueries({
+                queryKey: ["action", "list-documents"],
+              });
+              queryClient.invalidateQueries({
+                queryKey: ["action", "get-document"],
+              });
+              queryClient.invalidateQueries({
+                queryKey: ["action", "get-content-database"],
+              });
+            })
+            .catch(() => {
+              // A later watcher event or ordinary launch reconciliation retries.
+            });
+        }, RECONCILE_DELAY_MS),
+      );
+    };
+
+    const removeListener = desktop.onChange((event) =>
+      reconcile(event.folderId),
+    );
+    const reconcileAll = () =>
+      void desktop.getFolder().then((result) => {
+        if (!active || !result.ok) return;
+        for (const folder of result.folders ?? [result.folder]) {
+          if (!folder.id) continue;
+          void desktop.subscribeChanges?.({ folderId: folder.id });
+          reconcile(folder.id);
+        }
+      });
+    reconcileAll();
+    const boundedReconciliation = window.setInterval(reconcileAll, 5_000);
+
+    return () => {
+      active = false;
+      window.clearInterval(boundedReconciliation);
+      removeListener();
+      for (const timer of timers.values()) clearTimeout(timer);
+      timers.clear();
+    };
+  }, [queryClient]);
+
+  return null;
+}

package/corpus/templates/content/app/components/editor/BubbleToolbar.tsx

@@ -60,6 +60,109 @@ type SelectionFillRange = {
 };
 
 type TextStyle = "paragraph" | 1 | 2 | 3 | 4 | 5 | 6;
+type ColorAttribute = "color" | "bgColor";
+type ColorName =
+  | "gray"
+  | "brown"
+  | "orange"
+  | "yellow"
+  | "green"
+  | "blue"
+  | "purple"
+  | "pink"
+  | "red";
+
+const COLOR_NAMES: ColorName[] = [
+  "gray",
+  "brown",
+  "orange",
+  "yellow",
+  "green",
+  "blue",
+  "purple",
+  "pink",
+  "red",
+];
+
+export function getSelectionNotionSpanAttribute(
+  editor: Editor,
+  attribute: ColorAttribute,
+): string | null | "mixed" {
+  const { from, to } = editor.state.selection;
+  const markType = editor.state.schema.marks.notionSpan;
+  if (!markType) return null;
+
+  let observed: string | null = null;
+  let hasObserved = false;
+  let mixed = false;
+
+  editor.state.doc.nodesBetween(from, to, (node, _position, parent) => {
+    if (!node.isText || !parent?.type.allowsMarkType(markType)) return;
+    const mark = node.marks.find((candidate) => candidate.type === markType);
+    const value = (mark?.attrs[attribute] as string | null | undefined) ?? null;
+    if (!hasObserved) {
+      observed = value;
+      hasObserved = true;
+    } else if (observed !== value) {
+      mixed = true;
+    }
+  });
+
+  return mixed ? "mixed" : observed;
+}
+
+export function selectionHasColorableText(
+  state: EditorState,
+  from: number,
+  to: number,
+) {
+  const markType = state.schema.marks.notionSpan;
+  if (!markType) return false;
+
+  let hasText = false;
+  state.doc.nodesBetween(from, to, (node, _position, parent) => {
+    if (node.isText && parent?.type.allowsMarkType(markType)) hasText = true;
+    return !hasText;
+  });
+  return hasText;
+}
+
+export function setSelectionNotionSpanAttribute(
+  editor: Editor,
+  attribute: ColorAttribute,
+  value: string | null,
+) {
+  const { state } = editor;
+  const { from, to } = state.selection;
+  const markType = state.schema.marks.notionSpan;
+  if (!markType || from === to) return false;
+
+  const transaction = state.tr;
+  state.doc.nodesBetween(from, to, (node, position, parent) => {
+    if (!node.isText || !parent?.type.allowsMarkType(markType)) return;
+    const start = Math.max(from, position);
+    const end = Math.min(to, position + node.nodeSize);
+    if (start >= end) return;
+
+    const existing = node.marks.find((mark) => mark.type === markType);
+    const attrs = { ...existing?.attrs, [attribute]: value };
+    transaction.removeMark(start, end, markType);
+    if (
+      attrs.color ||
+      attrs.bgColor ||
+      attrs.underline ||
+      attrs.href ||
+      (attrs.attrsJson && attrs.attrsJson !== "{}")
+    ) {
+      transaction.addMark(start, end, markType.create(attrs));
+    }
+  });
+
+  if (!transaction.docChanged) return false;
+  editor.view.dispatch(transaction);
+  editor.commands.focus();
+  return true;
+}
 
 function activeTextStyle(editor: Editor): TextStyle {
   for (const level of [1, 2, 3, 4, 5, 6] as const) {
@@ -119,8 +222,16 @@ export function BubbleToolbar({ editor, onComment }: BubbleToolbarProps) {
   const [showLinkInput, setShowLinkInput] = useState(false);
   const [linkUrl, setLinkUrl] = useState("");
   const [textStyleOpen, setTextStyleOpen] = useState(false);
+  const [colorOpen, setColorOpen] = useState(false);
+  const [colorRevision, setColorRevision] = useState(0);
+  const [recentColor, setRecentColor] = useState<{
+    attribute: ColorAttribute;
+    value: string;
+  } | null>(null);
   const textStyleSelection = useRef<{ from: number; to: number } | null>(null);
+  const colorSelection = useRef<{ from: number; to: number } | null>(null);
   const textStyleApplied = useRef(false);
+  const colorApplied = useRef(false);
   const restoreEditorFocusOnClose = useRef(false);
   const [textStyle, setTextStyle] = useState<TextStyle>(() =>
     activeTextStyle(editor),
@@ -129,8 +240,12 @@ export function BubbleToolbar({ editor, onComment }: BubbleToolbarProps) {
   useEffect(() => {
     const syncTextStyle = () => {
       setTextStyle(activeTextStyle(editor));
+      setColorRevision((revision) => revision + 1);
       const { from, to } = editor.state.selection;
-      if (from !== to) textStyleSelection.current = { from, to };
+      if (from !== to) {
+        textStyleSelection.current = { from, to };
+        colorSelection.current = { from, to };
+      }
     };
     editor.on("selectionUpdate", syncTextStyle);
     editor.on("transaction", syncTextStyle);
@@ -199,6 +314,82 @@ export function BubbleToolbar({ editor, onComment }: BubbleToolbarProps) {
     setTextStyleOpen(false);
   };
 
+  const applyColor = (attribute: ColorAttribute, value: string | null) => {
+    if (colorSelection.current) {
+      editor.commands.setTextSelection(colorSelection.current);
+    }
+    if (!setSelectionNotionSpanAttribute(editor, attribute, value)) return;
+    if (value) setRecentColor({ attribute, value });
+    colorApplied.current = true;
+    setColorOpen(false);
+  };
+
+  const activeTextColor = getSelectionNotionSpanAttribute(editor, "color");
+  const activeBackgroundColor = getSelectionNotionSpanAttribute(
+    editor,
+    "bgColor",
+  );
+  void colorRevision;
+
+  const renderColorChoice = (
+    attribute: ColorAttribute,
+    value: string | null,
+  ) => {
+    const sectionLabel = t(
+      attribute === "color" ? "editor.textColor" : "editor.backgroundColor",
+    );
+    const colorName = value?.replace(/_bg$/, "") as ColorName | undefined;
+    const choiceLabel = colorName
+      ? t(`editor.color.${colorName}`)
+      : t("editor.defaultColor");
+    const activeValue =
+      attribute === "color" ? activeTextColor : activeBackgroundColor;
+    const isActive = activeValue !== "mixed" && activeValue === value;
+
+    return (
+      <button
+        key={`${attribute}-${value ?? "default"}`}
+        type="button"
+        role="menuitemradio"
+        aria-checked={isActive}
+        aria-label={`${sectionLabel}: ${choiceLabel}`}
+        onPointerDown={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          applyColor(attribute, value);
+        }}
+        onClick={(event) => {
+          if (event.detail === 0) applyColor(attribute, value);
+        }}
+        className={cn(
+          "relative flex size-8 items-center justify-center rounded-md border border-border bg-background text-sm font-semibold hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          isActive && "ring-2 ring-foreground",
+        )}
+      >
+        {attribute === "color" ? (
+          <span className={colorName ? `notion-block-color--${colorName}` : ""}>
+            A
+          </span>
+        ) : (
+          <span
+            className={cn(
+              "size-5 rounded border border-border",
+              colorName && `notion-block-bg--${colorName}`,
+            )}
+          />
+        )}
+        {isActive ? (
+          <IconCheck
+            aria-hidden="true"
+            className="absolute -end-1 -top-1 rounded-full bg-foreground p-0.5 text-background"
+            size={12}
+            strokeWidth={3}
+          />
+        ) : null}
+      </button>
+    );
+  };
+
   const openLinkInput = useCallback(() => {
     setLinkUrl(editor.getAttributes("link").href || "");
     setShowLinkInput(true);
@@ -318,6 +509,15 @@ export function BubbleToolbar({ editor, onComment }: BubbleToolbarProps) {
   };
 
   const items = [
+    { type: "text-style" as const },
+    ...(selectionHasColorableText(
+      editor.state,
+      editor.state.selection.from,
+      editor.state.selection.to,
+    )
+      ? [{ type: "color" as const }]
+      : []),
+    { type: "divider" as const },
     {
       icon: IconBold,
       title: t("editor.bold"),
@@ -343,8 +543,6 @@ export function BubbleToolbar({ editor, onComment }: BubbleToolbarProps) {
       isActive: () => editor.isActive("code"),
     },
     { type: "divider" as const },
-    { type: "text-style" as const },
-    { type: "divider" as const },
     {
       icon: IconLink,
       title: t("editor.link"),
@@ -529,6 +727,103 @@ export function BubbleToolbar({ editor, onComment }: BubbleToolbarProps) {
                 </Popover>
               );
             }
+            if ("type" in item && item.type === "color") {
+              return (
+                <Popover
+                  key="color"
+                  open={colorOpen}
+                  onOpenChange={(open) => {
+                    if (open) {
+                      colorApplied.current = false;
+                      restoreEditorFocusOnClose.current = false;
+                      const { from, to } = editor.state.selection;
+                      if (from !== to) colorSelection.current = { from, to };
+                    }
+                    setColorOpen(open);
+                  }}
+                >
+                  <PopoverTrigger asChild>
+                    <button
+                      type="button"
+                      aria-label={t("editor.color.label")}
+                      className={cn(
+                        "flex size-8 items-center justify-center rounded text-sm font-semibold text-popover-foreground/85 hover:bg-accent hover:text-accent-foreground",
+                        colorOpen && "bg-accent text-accent-foreground",
+                      )}
+                    >
+                      A
+                    </button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    portalled={false}
+                    align="start"
+                    sideOffset={24}
+                    className="w-52 p-2"
+                    onEscapeKeyDown={() => {
+                      restoreEditorFocusOnClose.current = true;
+                      window.setTimeout(() => editor.commands.focus(), 0);
+                    }}
+                    onCloseAutoFocus={(event) => {
+                      if (
+                        colorApplied.current ||
+                        restoreEditorFocusOnClose.current
+                      ) {
+                        event.preventDefault();
+                      }
+                      if (restoreEditorFocusOnClose.current) {
+                        editor.commands.focus();
+                      }
+                      colorApplied.current = false;
+                      restoreEditorFocusOnClose.current = false;
+                    }}
+                  >
+                    {recentColor ? (
+                      <div className="mb-2">
+                        <div className="mb-1 text-xs font-medium text-muted-foreground">
+                          {t("editor.color.recentlyUsed")}
+                        </div>
+                        <div role="menu">
+                          {renderColorChoice(
+                            recentColor.attribute,
+                            recentColor.value,
+                          )}
+                        </div>
+                      </div>
+                    ) : null}
+                    <div className="mb-2">
+                      <div className="mb-1 text-xs font-medium text-muted-foreground">
+                        {t("editor.textColor")}
+                      </div>
+                      <div
+                        role="menu"
+                        aria-label={t("editor.textColor")}
+                        className="grid grid-cols-5 gap-1"
+                      >
+                        {renderColorChoice("color", null)}
+                        {COLOR_NAMES.map((name) =>
+                          renderColorChoice("color", name),
+                        )}
+                      </div>
+                    </div>
+                    <div>
+                      <div className="mb-1 text-xs font-medium text-muted-foreground">
+                        {t("editor.backgroundColor")}
+                      </div>
+                      <div
+                        role="menu"
+                        aria-label={t("editor.backgroundColor")}
+                        className="grid grid-cols-5 gap-1"
+                      >
+                        {renderColorChoice("bgColor", null)}
+                        {COLOR_NAMES.map((name) =>
+                          renderColorChoice("bgColor", `${name}_bg`),
+                        )}
+                      </div>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              );
+            }
             const {
               icon: Icon,
               title,