@agent-native/core-corpus 0.210.2 → 0.211.0

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

@@ -20,26 +20,73 @@ import { trimDiffContext, wordDiff } from "./comment-ai-diff";
 import { CommentRow } from "./CommentRow";
 import { suggestionLineExcerpt } from "./thread-suggestions";
 
-/**
- * An AI suggestion shown in place of its receipt reply inside the comment
- * thread that asked for it. Deciding it changes only the suggestion; the
- * thread stays open until someone resolves it.
- */
-export function ThreadSuggestionBody({
+type ThreadSuggestionProps = {
+  /** One suggestion, or every edit of the proposal it belongs to, in Page order. */
+  suggestions: ResourceSuggestion[];
+  canDecide: boolean;
+  /** A decision, or an AI revision in this thread, is still in flight. */
+  busy: (suggestion: ResourceSuggestion) => boolean;
+  conflict: (suggestion: ResourceSuggestion) => boolean;
+  onDecide: (
+    suggestion: ResourceSuggestion,
+    decision: SuggestionDecision,
+  ) => void;
+  /** Decides every edit of the proposal still pending. */
+  onDecideRemaining?: (decision: SuggestionDecision) => void;
+};
+
+function useStatusLabel() {
+  const t = useT();
+  return (status: ResourceSuggestion["status"]) =>
+    status === "accepted"
+      ? { icon: IconCircleCheck, label: t("comments.accepted") }
+      : status === "rejected"
+        ? { icon: IconCircleX, label: t("comments.rejected") }
+        : status === "superseded"
+          ? { icon: IconArrowBackUp, label: t("comments.suggestionReplaced") }
+          : status === "withdrawn"
+            ? {
+                icon: IconArrowBackUp,
+                label: t("comments.suggestionWithdrawn"),
+              }
+            : null;
+}
+
+function SuggestionStatus({
+  status,
+}: {
+  status: ReturnType<ReturnType<typeof useStatusLabel>>;
+}) {
+  if (!status) return null;
+  return (
+    <span
+      role="status"
+      className="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground"
+    >
+      <status.icon size={14} aria-hidden />
+      {status.label}
+    </span>
+  );
+}
+
+/** One edit's word diff, with its own Accept and Reject or outcome. */
+function ThreadSuggestionEdit({
   suggestion,
   canDecide,
   busy,
   conflict,
   onDecide,
+  showStatus,
 }: {
   suggestion: ResourceSuggestion;
   canDecide: boolean;
-  /** A decision, or an AI revision in this thread, is still in flight. */
   busy: boolean;
   conflict: boolean;
   onDecide: (decision: SuggestionDecision) => void;
+  showStatus: boolean;
 }) {
   const t = useT();
+  const statusLabel = useStatusLabel();
   const excerpt = useMemo(
     () => suggestionLineExcerpt(suggestion.operations),
     [suggestion.operations],
@@ -50,28 +97,12 @@ export function ThreadSuggestionBody({
     [excerpt],
   );
   const pending = suggestion.status === "pending";
-  const status =
-    suggestion.status === "accepted"
-      ? { icon: IconCircleCheck, label: t("comments.accepted") }
-      : suggestion.status === "rejected"
-        ? { icon: IconCircleX, label: t("comments.rejected") }
-        : suggestion.status === "superseded"
-          ? { icon: IconArrowBackUp, label: t("comments.suggestionReplaced") }
-          : suggestion.status === "withdrawn"
-            ? {
-                icon: IconArrowBackUp,
-                label: t("comments.suggestionWithdrawn"),
-              }
-            : null;
   return (
     <div
-      className="mt-0.5 grid gap-2"
+      className="grid grid-cols-1 gap-2"
       data-thread-suggestion={suggestion.id}
       data-thread-suggestion-status={suggestion.status}
     >
-      <p className={cn(!pending && "text-muted-foreground")}>
-        {suggestion.summary}
-      </p>
       {segments.length ? (
         <p
           aria-label={t("comments.suggestedChange")}
@@ -108,7 +139,7 @@ export function ThreadSuggestionBody({
         </p>
       ) : null}
       {pending && canDecide ? (
-        <div className="flex items-center gap-1.5">
+        <div className="flex flex-wrap items-center gap-1.5">
           <Button
             type="button"
             size="sm"
@@ -137,27 +168,103 @@ export function ThreadSuggestionBody({
             {t("editor.rejectSuggestion")}
           </Button>
         </div>
-      ) : status ? (
-        <span
-          role="status"
-          className="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground"
-        >
-          <status.icon size={14} aria-hidden />
-          {status.label}
-        </span>
+      ) : showStatus ? (
+        <SuggestionStatus status={statusLabel(suggestion.status)} />
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * An AI suggestion shown in place of its receipt reply inside the comment
+ * thread that asked for it. Separate changes arrive as one proposal, so the
+ * summary is said once above every edit. Deciding changes only the
+ * suggestions; the thread stays open until someone resolves it.
+ */
+export function ThreadSuggestionBody({
+  suggestions,
+  canDecide,
+  busy,
+  conflict,
+  onDecide,
+  onDecideRemaining,
+}: ThreadSuggestionProps) {
+  const t = useT();
+  const statusLabel = useStatusLabel();
+  const [first] = suggestions;
+  if (!first) return null;
+  const pending = suggestions.filter(
+    (suggestion) => suggestion.status === "pending",
+  );
+  // Edits that all ended the same way say so once, under the last of them.
+  const sharedStatus =
+    suggestions.length > 1 &&
+    suggestions.every((suggestion) => suggestion.status === first.status)
+      ? first.status
+      : null;
+  return (
+    <div
+      className="mt-0.5 grid grid-cols-1 gap-2"
+      data-thread-suggestion-group={first.proposalId ?? first.id}
+    >
+      <p className={cn(!pending.length && "text-muted-foreground")}>
+        {first.proposalSummary || first.summary}
+      </p>
+      {suggestions.map((suggestion) => (
+        <ThreadSuggestionEdit
+          key={suggestion.id}
+          suggestion={suggestion}
+          canDecide={canDecide}
+          busy={busy(suggestion)}
+          conflict={conflict(suggestion)}
+          onDecide={(decision) => onDecide(suggestion, decision)}
+          showStatus={!sharedStatus}
+        />
+      ))}
+      {sharedStatus ? (
+        <SuggestionStatus status={statusLabel(sharedStatus)} />
+      ) : null}
+      {canDecide && onDecideRemaining && pending.length > 1 ? (
+        <div className="flex flex-wrap items-center gap-1.5">
+          <Button
+            type="button"
+            size="sm"
+            variant="ghost"
+            disabled={pending.some(busy) || pending.some(conflict)}
+            onClick={(event) => {
+              event.stopPropagation();
+              onDecideRemaining("accepted");
+            }}
+            data-suggestion-proposal-decision="accepted"
+          >
+            {t("comments.acceptRemaining")}
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            variant="ghost"
+            className="text-muted-foreground"
+            disabled={pending.some(busy)}
+            onClick={(event) => {
+              event.stopPropagation();
+              onDecideRemaining("rejected");
+            }}
+            data-suggestion-proposal-decision="rejected"
+          >
+            {t("comments.rejectRemaining")}
+          </Button>
+        </div>
       ) : null}
     </div>
   );
 }
 
 /** A thread suggestion whose receipt reply is not in the thread. */
-export function ThreadSuggestionRow(
-  props: Parameters<typeof ThreadSuggestionBody>[0],
-) {
+export function ThreadSuggestionRow(props: ThreadSuggestionProps) {
+  const [first] = props.suggestions;
+  if (!first) return null;
   const model =
-    typeof props.suggestion.metadata?.model === "string"
-      ? props.suggestion.metadata.model
-      : null;
+    typeof first.metadata?.model === "string" ? first.metadata.model : null;
   return (
     <CommentRow
       avatar={<AgentAvatar model={model} />}
@@ -167,7 +274,7 @@ export function ThreadSuggestionRow(
         model,
         run: {
           effort: null,
-          ranAt: props.suggestion.createdAt,
+          ranAt: first.createdAt,
           threadId: null,
           canOpen: false,
         },

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

@@ -67,6 +67,7 @@ import {
   TextSelection,
   type Transaction,
 } from "@tiptap/pm/state";
+import { CellSelection, cellAround } from "@tiptap/pm/tables";
 import { Decoration, DecorationSet, type EditorView } from "@tiptap/pm/view";
 import {
   useEditor,
@@ -738,6 +739,25 @@ const NotionMarkdownShortcuts = Extension.create({
 });
 
 const CustomTable = BaseTable.extend({
+  addKeyboardShortcuts() {
+    return {
+      ...this.parent?.(),
+      // Escape leaves the editor (`contentEditorEscape`), and Tab can't leave a
+      // table, so from a cell's text the first Escape only selects the cell.
+      Escape: ({ editor }) => {
+        const { selection } = editor.state;
+        if (selection instanceof CellSelection) return false;
+        const $cell = cellAround(selection.$from);
+        if (!$cell) return false;
+        editor.view.dispatch(
+          editor.state.tr.setSelection(
+            CellSelection.create(editor.state.doc, $cell.pos),
+          ),
+        );
+        return true;
+      },
+    };
+  },
   addAttributes() {
     return {
       ...this.parent?.(),
@@ -835,6 +855,14 @@ const NotionTableHeader = TableHeader.extend({
   addAttributes() {
     return { ...this.parent?.(), ...tableAlignmentAttribute };
   },
+  // Header cells render as <td>, so copying or pasting a table reads them back
+  // from their class. The higher priority puts this rule before tableCell's.
+  parseHTML() {
+    return [
+      { tag: "td.content-table-header-cell", priority: 60 },
+      ...(this.parent?.() ?? []),
+    ];
+  },
   renderHTML({ HTMLAttributes }) {
     return [
       "td",
@@ -907,7 +935,39 @@ function normalizeTableHeaderCells(
     return rowChanged ? row.copy(Fragment.fromArray(normalizedCells)) : row;
   });
 
-  return changed ? table.copy(Fragment.fromArray(normalizedRows)) : table;
+  // Saved tables keep their headers only in these attributes, so update them
+  // whenever they no longer produce the header cells, e.g. after a header
+  // toggle or after deleting the header row.
+  const isHeaderAt = (
+    headerRow: boolean,
+    headerColumn: boolean,
+    rowIndex: number,
+    columnIndex: number,
+  ) => (headerRow && rowIndex === 0) || (headerColumn && columnIndex === 0);
+  const savedHeaderRow = table.attrs.headerRow === true;
+  const savedHeaderColumn = table.attrs.headerColumn === true;
+  const attrsMatchCells = rows.every((row, rowIndex) =>
+    getNodeChildren(row).every(
+      (_cell, columnIndex) =>
+        isHeaderAt(savedHeaderRow, savedHeaderColumn, rowIndex, columnIndex) ===
+        isHeaderAt(hasHeaderRow, hasHeaderColumn, rowIndex, columnIndex),
+    ),
+  );
+
+  if (!changed && attrsMatchCells) return table;
+
+  const content = changed ? Fragment.fromArray(normalizedRows) : table.content;
+  return attrsMatchCells
+    ? table.copy(content)
+    : table.type.create(
+        {
+          ...table.attrs,
+          headerRow: hasHeaderRow,
+          headerColumn: hasHeaderColumn,
+        },
+        content,
+        table.marks,
+      );
 }
 
 const normalizeTableHeadersPluginKey = new PluginKey("normalizeTableHeaders");
@@ -929,11 +989,20 @@ function buildNormalizeTableHeadersTransaction(state: CoreEditor["state"]) {
       tableHeaderType,
     );
     if (normalizedTable !== node) {
-      transaction = transaction.replaceWith(
-        pos,
-        pos + node.nodeSize,
-        normalizedTable,
-      );
+      // When only the header attributes change, keep the cells, and the
+      // selection inside them, in place.
+      transaction =
+        normalizedTable.content === node.content
+          ? transaction.setNodeMarkup(
+              transaction.mapping.map(pos),
+              undefined,
+              normalizedTable.attrs,
+            )
+          : transaction.replaceWith(
+              transaction.mapping.map(pos),
+              transaction.mapping.map(pos + node.nodeSize),
+              normalizedTable,
+            );
       changed = true;
     }
 
@@ -3351,7 +3420,9 @@ export function VisualEditor({
       }),
       Extension.create({
         name: "contentEditorEscape",
-        priority: 0,
+        // Last, so editor Escape handlers such as the table's run first. Not 0:
+        // TipTap reads a priority of 0 as unset, which puts this first instead.
+        priority: 1,
         addProseMirrorPlugins() {
           return [
             new Plugin({
@@ -3397,6 +3468,12 @@ export function VisualEditor({
 
   const guardsRef = useRef<UseCollabReconcileResult | null>(null);
   const draftEmissionGenerationRef = useRef(0);
+  const pendingDraftEmissionsRef = useRef<Array<() => void>>([]);
+  const drainPendingDraftEmissions = useCallback(() => {
+    const pending = pendingDraftEmissionsRef.current;
+    pendingDraftEmissionsRef.current = [];
+    for (const emit of pending) emit();
+  }, []);
   const lastUserEditIntentAtRef = useRef(0);
   const hasUserEditIntentRef = useRef(false);
   const markUserEditIntent = useCallback(() => {
@@ -3439,10 +3516,11 @@ export function VisualEditor({
         if (options?.immediate) return "failed" as const;
         if (!guards.registerEmitted(normalized)) return "unchanged" as const;
         const generation = draftEmissionGenerationRef.current;
-        setTimeout(() => {
+        pendingDraftEmissionsRef.current.push(() => {
           if (generation === draftEmissionGenerationRef.current)
             onChangeRef.current(normalized);
-        }, 0);
+        });
+        setTimeout(drainPendingDraftEmissions, 0);
         return "scheduled" as const;
       } catch (err: any) {
         toast.error(
@@ -3452,7 +3530,24 @@ export function VisualEditor({
         return "failed" as const;
       }
     },
-    [content, localFileMode, scheduleLiveBodyParity, t],
+    [
+      content,
+      drainPendingDraftEmissions,
+      localFileMode,
+      scheduleLiveBodyParity,
+      t,
+    ],
+  );
+  // A remote snapshot is the whole live document, so it already holds local
+  // typing whose deferred report has not run. Reporting that typing first keeps
+  // it a local edit; otherwise the snapshot absorbs it and an older save's
+  // acknowledgment can clear the only journaled copy.
+  const reportRemoteSnapshot = useCallback(
+    (markdown: string) => {
+      drainPendingDraftEmissions();
+      onRemoteSnapshotChange?.(markdown);
+    },
+    [drainPendingDraftEmissions, onRemoteSnapshotChange],
   );
   onMediaSourceCommittedRef.current = async (editorToPersist, transaction) => {
     if (suggestingRef.current) return;
@@ -4189,7 +4284,9 @@ export function VisualEditor({
       : collabContentRevision,
     requestCollabSync,
     onBaseAwareReconcile,
-    onRemoteSnapshotChange,
+    onRemoteSnapshotChange: onRemoteSnapshotChange
+      ? reportRemoteSnapshot
+      : undefined,
     isEditorClean,
     requestInitialSeed:
       ydoc && editable && documentId ? requestInitialSeed : undefined,

package/corpus/templates/content/app/components/editor/database/ContentTable.tsx

@@ -42,7 +42,8 @@ function subscribeToNoHover(onChange: () => void) {
   return () => media.removeEventListener("change", onChange);
 }
 
-function deviceCannotHover() {
+/** Whether no pointer on this device can hover, as on a phone. */
+export function deviceCannotHover() {
   return (
     typeof window !== "undefined" &&
     typeof window.matchMedia === "function" &&