@multiplatform.one/backoffice 6.7.0 → 7.1.0

package/src/form/FormSidebarPanel.tsx

@@ -47,7 +47,12 @@ import {
   parseLikedBy,
   useFrappeConfig,
 } from "@multiplatform.one/frappe-ui";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  ensureFocusVisibleRing,
+  getGroupPosition,
+  stackEdgeRadius,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import {
   ClockIcon,
   HeartIcon,
@@ -125,6 +130,58 @@ interface SidebarAccordionSection {
   content: ReactNode;
 }
 
+/**
+ * Accordion.Trigger chrome for one rail section. LC-72: hover/press/ring
+ * inherit stacked-group corners (Assigned To first, Liked By last; an OPEN
+ * trigger squares its bottom even at last). Accordion.Item stays a direct
+ * Accordion child so the root can count positions — a custom Item wrapper
+ * is opaque and would collapse every row to "only".
+ */
+export function SidebarAccordionTrigger({
+  section,
+  index,
+  count,
+  open,
+}: {
+  section: SidebarAccordionSection;
+  index: number;
+  count: number;
+  open: boolean;
+}) {
+  const { knobProps } = useResolvedKnobs();
+  const position = getGroupPosition(index, count);
+  const corners = stackEdgeRadius(knobProps.borderRadius.borderRadius, {
+    start: position === "first" || position === "only",
+    end: (position === "last" || position === "only") && !open,
+  });
+  return (
+    <Accordion.Trigger
+      icon={section.icon}
+      testID={`form-sidebar-section-${section.key}`}
+      minHeight={36}
+      paddingVertical="$2"
+      paddingHorizontal="$2"
+      overflow="hidden"
+      outlineWidth={0}
+      {...corners}
+      {...{ "data-group-position": position }}
+      hoverStyle={{ backgroundColor: "$color3", ...corners }}
+      pressStyle={{ backgroundColor: "$color5", ...corners }}
+      focusStyle={{ outlineWidth: 0 }}
+      focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
+    >
+      <XStack flex={1} alignItems="center" gap="$2">
+        <Text fontSize="$3" fontWeight="600" color="$color12" numberOfLines={1}>
+          {section.title}
+        </Text>
+        <Chip size="$2" variant="subtle" color="gray">
+          {String(section.count)}
+        </Chip>
+      </XStack>
+    </Accordion.Trigger>
+  );
+}
+
 export function FormSidebarPanel({
   doctype,
   name,
@@ -506,19 +563,17 @@ export function FormSidebarPanel({
           value={openSections}
           onValueChange={setOpenSections}
         >
-          {sections.map((section) => (
-            <Accordion.Item key={section.key} value={section.key}>
-              <Accordion.Trigger icon={section.icon} testID={`form-sidebar-section-${section.key}`}>
-                <XStack flex={1} alignItems="center" gap="$2">
-                  <Text fontSize="$3" fontWeight="600" color="$color12" numberOfLines={1}>
-                    {section.title}
-                  </Text>
-                  <Chip size="$2" variant="subtle" color="gray">
-                    {String(section.count)}
-                  </Chip>
-                </XStack>
-              </Accordion.Trigger>
-              <Accordion.Content>{section.content}</Accordion.Content>
+          {sections.map((section, index) => (
+            <Accordion.Item key={section.key} value={section.key} borderBottomWidth={0}>
+              <SidebarAccordionTrigger
+                section={section}
+                index={index}
+                count={sections.length}
+                open={openSections.includes(section.key)}
+              />
+              <Accordion.Content paddingTop={0} paddingHorizontal="$2" paddingBottom="$2">
+                {section.content}
+              </Accordion.Content>
             </Accordion.Item>
           ))}
         </Accordion>

package/src/form/FormTimeline.optimistic.spec.tsx

@@ -0,0 +1,187 @@
+/**
+ * The comment reproducer of the ONE optimistic pattern (owner items 1+4):
+ * adding a comment must render IMMEDIATELY from the local docinfo overlay
+ * (apply-locally), visibly pending ("Sending…", Axiom 6 HONEST STATE),
+ * reconcile to the server identity on ack (no duplicate row), and roll
+ * back with a visible error on failure. The pre-fix behavior was
+ * post → wait for ack → refetch docinfo → first reveal ~1.7s after the
+ * press (measured against the live bench).
+ *
+ * The add_comment RPC and the docinfo load are stubbed at the fetch layer
+ * with a gate on the POST, so the specs can assert what renders DURING the
+ * server round-trip.
+ */
+
+import React from "react";
+import { FrappeProvider } from "@multiplatform.one/frappe-ui";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { invalidateDocinfo } from "../shared/useDocinfo";
+import { FormTimeline } from "./FormTimeline";
+
+const BASE_URL = "https://formtimeline-optimistic.spec.test";
+const USER = "clay@example.com";
+
+beforeAll(async () => {
+  if (!i18next.isInitialized) {
+    await i18next.use(initReactI18next).init({
+      lng: "en",
+      interpolation: { escapeValue: false },
+      resources: { en: { translation: {} } },
+    });
+  }
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+interface StubOptions {
+  docname: string;
+  /**
+   * Gate the add_comment POST. Resolve with `{ status, payload }` — a 4xx
+   * status models a server rejection (no fetch-level rejection, so the
+   * HTTP client's transient-error retry never kicks in).
+   */
+  onAddComment: () => Promise<{ status: number; payload: Record<string, unknown> }>;
+}
+
+/**
+ * Fetch stub covering exactly what this screen calls: get_docinfo (GET),
+ * the CSRF bootstrap, and the add_comment POST (delegated to the gate).
+ */
+function stubFetch({ docname, onAddComment }: StubOptions) {
+  const jsonResponse = (payload: unknown, status = 200) =>
+    new Response(JSON.stringify(payload), {
+      status,
+      headers: { "Content-Type": "application/json" },
+    });
+
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (input: RequestInfo | URL, _init?: RequestInit) => {
+      const url = String(input instanceof Request ? input.url : input);
+      if (url.includes("get_csrf_token")) {
+        return jsonResponse({ message: "test-csrf-token" });
+      }
+      if (url.includes("frappe.desk.form.load.get_docinfo")) {
+        return jsonResponse({
+          docinfo: {
+            doctype: "ToDo",
+            name: docname,
+            user_info: { [USER]: { fullname: "Clay Risser", name: USER } },
+            comments: [
+              {
+                name: "SEED-COMMENT-1",
+                comment_type: "Comment",
+                content: "<div>seed comment</div>",
+                owner: USER,
+                creation: "2026-08-10 09:00:00",
+              },
+            ],
+            versions: [],
+            communications: [],
+            automated_messages: [],
+            assignment_logs: [],
+            attachment_logs: [],
+            like_logs: [],
+            info_logs: [],
+          },
+        });
+      }
+      if (url.includes("frappe.desk.form.utils.add_comment")) {
+        const { status, payload } = await onAddComment();
+        return jsonResponse(payload, status);
+      }
+      throw new Error(`Unexpected fetch in FormTimeline optimistic spec: ${url}`);
+    }),
+  );
+}
+
+function renderTimeline(docname: string) {
+  return renderWithProviders(
+    <FrappeProvider baseURL={BASE_URL}>
+      <FormTimeline doctype="ToDo" name={docname} currentUser={USER} />
+    </FrappeProvider>,
+  );
+}
+
+async function submitComment(text: string) {
+  const composer = await screen.findByPlaceholderText("Add a comment…");
+  fireEvent.change(composer, { target: { value: text } });
+  const submit = await screen.findByText("Comment");
+  fireEvent.click(submit);
+}
+
+describe("FormTimeline optimistic comment (apply-locally-then-reconcile)", () => {
+  it("renders the comment immediately as pending, then reconciles to the server identity on ack", async () => {
+    const docname = `OPT-ACK-${Date.now()}`;
+    invalidateDocinfo("ToDo", docname);
+    let releaseAck: (payload: Record<string, unknown>) => void = () => {};
+    const ackGate = new Promise<{ status: number; payload: Record<string, unknown> }>((resolve) => {
+      releaseAck = (payload) => resolve({ status: 200, payload });
+    });
+    stubFetch({ docname, onAddComment: () => ackGate });
+
+    renderTimeline(docname);
+    await screen.findByText("seed comment");
+    await submitComment("optimistic hello");
+
+    // DURING the round-trip: the comment is already on screen, visibly
+    // pending — realtime/refetch is NOT the first reveal.
+    await screen.findByText("optimistic hello");
+    expect(screen.getByText("Sending…")).toBeTruthy();
+
+    // Ack lands with the authoritative Comment doc (server name).
+    releaseAck({
+      message: {
+        name: "SRV-COMMENT-9",
+        doctype: "Comment",
+        comment_type: "Comment",
+        content: "<div>optimistic hello</div>",
+        owner: USER,
+        comment_email: USER,
+        comment_by: "Clay Risser",
+        creation: "2026-08-13 12:00:00",
+      },
+    });
+
+    // Reconcile: pending marker gone, EXACTLY ONE row remains (temp-id
+    // overlay converged into the server record — no duplicates).
+    await waitFor(() => expect(screen.queryByText("Sending…")).toBeNull());
+    expect(screen.getAllByText("optimistic hello")).toHaveLength(1);
+    expect(screen.getByText("seed comment")).toBeTruthy();
+  });
+
+  it("rolls back the pending comment and shows a visible error when the RPC fails", async () => {
+    const docname = `OPT-FAIL-${Date.now()}`;
+    invalidateDocinfo("ToDo", docname);
+    let rejectAck: () => void = () => {};
+    const ackGate = new Promise<{ status: number; payload: Record<string, unknown> }>((resolve) => {
+      rejectAck = () => resolve({ status: 417, payload: { message: "server exploded" } });
+    });
+    stubFetch({ docname, onAddComment: () => ackGate });
+
+    renderTimeline(docname);
+    await screen.findByText("seed comment");
+    await submitComment("doomed comment");
+
+    // Applied locally first.
+    await screen.findByText("doomed comment");
+    expect(screen.getByText("Sending…")).toBeTruthy();
+
+    rejectAck();
+
+    // Rollback: the pending row is gone; a visible error remains (the
+    // server's own message, surfaced through the inline error slot); the
+    // rest of the feed is untouched.
+    await waitFor(() => expect(screen.queryByText("doomed comment")).toBeNull());
+    expect(screen.queryByText("Sending…")).toBeNull();
+    await screen.findByText("server exploded");
+    expect(screen.getByText("seed comment")).toBeTruthy();
+  });
+});

package/src/form/FormTimeline.tsx

@@ -7,11 +7,20 @@
 // supplies the composer + feed shell; every entry renders through a
 // renderEntry override for desk parity (own-comment edit/delete, version
 // "changed value of…" gray rows, communication blocks, one-line logs).
-// Mutations go through the probed desk RPCs:
+//
+// Comments are OPTIMISTIC: they render from a live Comment collection (the
+// sync engine's in-memory store) and write through engine mutations that
+// keep the probed desk RPCs as transport (see frappe-ui's
+// useFrappeCommentActions for the parity ruling):
 //   frappe.desk.form.utils.add_comment    { reference_doctype,
 //     reference_name, content, comment_email, comment_by } (all required)
 //   frappe.desk.form.utils.update_comment { name, content }
 //   frappe.client.delete                  { doctype: "Comment", name }
+// A new comment paints immediately under a local: identity, remaps to the
+// server name on ack, and rolls back with a SyncErrorNotice on rejection.
+// Non-comment feed kinds (versions, communications, logs) still come from
+// docinfo. Without a FrappeProvider config (plain docInfo-prop stories)
+// the legacy blocking RPC path is kept.
 import {
   Avatar,
   Button,
@@ -22,11 +31,23 @@ import {
   Timeline,
   XStack,
   YStack,
+  notify,
   type TabsItem,
   type TimelineEntry,
 } from "@multiplatform.one/components";
 import { TextArea } from "@multiplatform.one/forms";
-import { useFrappeConfig } from "@multiplatform.one/frappe-ui";
+import {
+  runOptimisticRpc,
+  useFrappeCollection,
+  useFrappePendingMutations,
+  useLiveQuery,
+} from "@multiplatform.one/frappe";
+import {
+  SyncErrorNotice,
+  useFrappeCommentActions,
+  useFrappeConfig,
+  type FrappeComment,
+} from "@multiplatform.one/frappe-ui";
 import { formatAbsoluteDateTime, useResolvedKnobs } from "@multiplatform.one/theme";
 import {
   EnvelopeSimpleIcon,
@@ -41,7 +62,15 @@ import {
 import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
-import { invalidateDocinfo, useDocinfo } from "../shared/useDocinfo";
+import {
+  addDocinfoOverlay,
+  invalidateDocinfo,
+  patchDocinfoBase,
+  removeDocinfoOverlay,
+  useDocinfo,
+  type DocInfo,
+  type DocInfoComment,
+} from "../shared/useDocinfo";
 import { useFrappeApp } from "../shared/useFrappeApp";
 import {
   buildTimelineFeed,
@@ -140,10 +169,87 @@ export function FormTimeline({
     setActionError(readable ? truncateText(readable, 200) : fallback);
   }, []);
 
+  // ── live comment collection (optimistic read path) ───────────────────────
+
+  // Forward the full connection config (see frappe-ui Timeline: the shared
+  // SyncModule is keyed by baseURL and the first consumer's options win).
+  const connectionConfig = useMemo(
+    () =>
+      config
+        ? {
+            baseURL: config.baseURL,
+            socketPort: config.socketPort,
+            siteName: config.siteName,
+            socketBaseURL: config.socketBaseURL,
+            auth: config.auth,
+            syncOptions: config.syncOptions,
+            socketOptions: config.socketOptions,
+            fixtures: config.fixtures,
+          }
+        : undefined,
+    [config],
+  );
+
+  const commentFilters = useMemo<Array<[string, string, unknown]>>(
+    () => [
+      ["reference_doctype", "=", doctype],
+      ["reference_name", "=", name],
+    ],
+    [doctype, name],
+  );
+
+  const commentCollection = useFrappeCollection<FrappeComment>(connectionConfig, "Comment", {
+    filters: commentFilters,
+    fields: [
+      "name",
+      "comment_type",
+      "content",
+      "comment_by",
+      "comment_email",
+      "reference_doctype",
+      "reference_name",
+      "creation",
+      "modified",
+      "owner",
+    ],
+  });
+
+  const { data: liveCommentsData } = useLiveQuery(
+    (q) => (commentCollection ? q.from({ _list: commentCollection }) : null),
+    [commentCollection],
+  );
+
+  const commentActions = useFrappeCommentActions(connectionConfig, doctype, name);
+  // Rejected engine writes surface here (rollback already ran) — rendered
+  // as SyncErrorNotice rows with retry/dismiss.
+  const commentLedger = useFrappePendingMutations(connectionConfig, "Comment");
+
+  // Comments render from the live collection once it is ready (stale
+  // docinfo comments otherwise — never blank while the first sync runs).
+  // Other feed kinds (versions, communications, logs) still come from
+  // docinfo: the Comment doctype also stores those log rows under other
+  // comment_types, so only comment_type === "Comment" rows are replaced.
+  const effectiveDocinfo = useMemo<TimelineDocinfoLike | undefined>(() => {
+    if (!docinfo || !commentCollection) return docinfo;
+    if ((commentCollection as { status?: string }).status !== "ready") return docinfo;
+    const rows = ((liveCommentsData as FrappeComment[] | undefined) ?? [])
+      .filter((row) => (row.comment_type ?? "Comment") === "Comment")
+      .map((row) => ({
+        name: row.name,
+        creation: row.creation,
+        content: row.content,
+        owner: row.owner,
+        comment_type: row.comment_type ?? "Comment",
+        comment_email: row.comment_email,
+        comment_by: row.comment_by,
+      }));
+    return { ...docinfo, comments: rows };
+  }, [docinfo, commentCollection, liveCommentsData]);
+
   const baseURL = connection?.baseURL ?? config?.baseURL;
   const entries = useMemo(
-    () => buildTimelineFeed(docinfo, { userInfo: docinfo?.user_info, baseURL }),
-    [docinfo, baseURL],
+    () => buildTimelineFeed(effectiveDocinfo, { userInfo: docinfo?.user_info, baseURL }),
+    [effectiveDocinfo, docinfo, baseURL],
   );
   const filtered = useMemo(() => filterTimelineFeed(entries, filter), [entries, filter]);
   const visible = useMemo(() => filtered.slice(0, visibleCount), [filtered, visibleCount]);
@@ -159,41 +265,124 @@ export function FormTimeline({
   // Composed/fixture mode keeps the composer visible; without an app the
   // handlers no-op (stories demo the UI, mutations need a bench).
   const canComment = Boolean(sessionUser && (app || composed));
+  // Engine mode: writes go through sync-engine mutations (optimistic paint,
+  // rollback + ledger on rejection). Falls back to the legacy blocking RPCs
+  // only when there is no FrappeProvider config (docInfo-prop stories).
+  const engineMode = Boolean(connectionConfig && commentCollection);
 
   const handleAddComment = useCallback(
     (content: string) => {
       const text = content.trim();
-      if (!app || !sessionUser || !text) return;
+      if (!sessionUser || !text || !(engineMode || app)) return;
       const rawFullname = docinfo?.user_info?.[sessionUser]?.fullname;
       const fullname = typeof rawFullname === "string" && rawFullname ? rawFullname : sessionUser;
       setActionError(undefined);
-      app
-        .call()
-        .post("frappe.desk.form.utils.add_comment", {
-          reference_doctype: doctype,
-          reference_name: name,
-          content: textToCommentHtml(text),
-          comment_email: sessionUser,
-          comment_by: fullname,
-        })
-        .then(() => refresh())
-        .catch((err: unknown) => {
-          reportActionError(err, t("timeline.addFailed", "Could not add comment"));
-        });
+      if (engineMode) {
+        // Optimistic: the row is already painted from the store; the ack
+        // (or rollback + SyncErrorNotice) happens in the background. The
+        // docinfo refresh keeps sibling panels honest without gating paint.
+        commentActions
+          .addComment({ content: textToCommentHtml(text), email: sessionUser, fullname })
+          .then(() => refresh())
+          .catch(() => {});
+        return;
+      }
+      if (!app) return;
+      const html = textToCommentHtml(text);
+      // Fallback (no live collection): the ONE pattern docinfo arm —
+      // local overlay apply → pending render → reconcile the ack into
+      // the base → rollback + visible error on failure.
+      const creation = new Date().toISOString().slice(0, 19).replace("T", " ");
+      let overlayId: string | undefined;
+      runOptimisticRpc<{ payload?: { message?: DocInfoComment } }>({
+        apply: (ctx) => {
+          overlayId = addDocinfoOverlay(doctype, name, (info: DocInfo) => ({
+            ...info,
+            comments: [
+              ...(info.comments ?? []),
+              {
+                name: ctx.tempId,
+                comment_type: "Comment",
+                content: html,
+                owner: sessionUser,
+                comment_email: sessionUser,
+                comment_by: fullname,
+                creation,
+                __optimistic: true,
+              },
+            ],
+          }));
+          return () => {
+            if (overlayId) removeDocinfoOverlay(overlayId);
+          };
+        },
+        send: () =>
+          app.call().post<{ message?: DocInfoComment }>("frappe.desk.form.utils.add_comment", {
+            reference_doctype: doctype,
+            reference_name: name,
+            content: html,
+            comment_email: sessionUser,
+            comment_by: fullname,
+          }),
+        reconcile: (ack) => {
+          const acked = ack?.payload?.message;
+          if (acked && typeof acked.name === "string" && acked.name) {
+            patchDocinfoBase(doctype, name, (info: DocInfo) => ({
+              ...info,
+              comments: [
+                ...(info.comments ?? []).filter((comment) => comment.name !== acked.name),
+                acked,
+              ],
+            }));
+          } else {
+            refresh();
+          }
+          if (overlayId) removeDocinfoOverlay(overlayId);
+        },
+        onError: (err) => {
+          const body = t("timeline.addFailed", "Could not add comment");
+          reportActionError(err, body);
+          notify({ severity: "error", scope: "page", body });
+        },
+      }).catch(() => {
+        // Rollback + error surfaces already ran in onError.
+      });
     },
-    [app, sessionUser, docinfo, doctype, name, refresh, reportActionError, t],
+    [
+      app,
+      engineMode,
+      commentActions,
+      sessionUser,
+      docinfo,
+      doctype,
+      name,
+      refresh,
+      reportActionError,
+      t,
+    ],
   );
 
   const handleSaveEdit = useCallback(() => {
     if (!editing) return;
     const text = editing.text.trim();
-    if (!app || !text) {
+    if (!text || !(engineMode || app)) {
       setEditing(null);
       return;
     }
     const target = editing.docname;
-    setBusyDocname(target);
     setActionError(undefined);
+    if (engineMode) {
+      // Optimistic: close the editor immediately — the store already shows
+      // the new content; rejection rolls back and lands in the ledger.
+      setEditing(null);
+      commentActions
+        .updateComment(target, textToCommentHtml(text))
+        .then(() => refresh())
+        .catch(() => {});
+      return;
+    }
+    if (!app) return;
+    setBusyDocname(target);
     app
       .call()
       .post("frappe.desk.form.utils.update_comment", {
@@ -208,16 +397,26 @@ export function FormTimeline({
         reportActionError(err, t("timeline.updateFailed", "Could not update comment"));
       })
       .finally(() => setBusyDocname(null));
-  }, [app, editing, refresh, reportActionError, t]);
+  }, [app, engineMode, commentActions, editing, refresh, reportActionError, t]);
 
   const handleDeleteComment = useCallback(
     (docname: string) => {
-      if (!app) {
+      if (!(engineMode || app)) {
         setConfirmingDelete(null);
         return;
       }
-      setBusyDocname(docname);
       setActionError(undefined);
+      if (engineMode) {
+        // Optimistic: the row is evicted from the store immediately.
+        setConfirmingDelete(null);
+        commentActions
+          .deleteComment(docname)
+          .then(() => refresh())
+          .catch(() => {});
+        return;
+      }
+      if (!app) return;
+      setBusyDocname(docname);
       app
         .call()
         .post("frappe.client.delete", { doctype: "Comment", name: docname })
@@ -230,7 +429,7 @@ export function FormTimeline({
           setConfirmingDelete(null);
         });
     },
-    [app, refresh, reportActionError, t],
+    [app, engineMode, commentActions, refresh, reportActionError, t],
   );
 
   // ── entry renderers (desk parity) ────────────────────────────────────────
@@ -253,14 +452,25 @@ export function FormTimeline({
 
   const renderCommentRow = (entry: TimelineFeedEntry) => {
     const displayName = displayNameOf(entry);
-    const own = Boolean(sessionUser && entry.ownerId === sessionUser);
+    // Pending rows (optimistic, awaiting ack) render visible but distinct
+    // (Axiom 6 HONEST STATE): dimmed, "Sending…" in the timestamp slot, and
+    // edit/delete withheld until the identity is the server's. Two marks:
+    // `__optimistic` overlay rows (`entry.pending`) and engine `local:` ids.
+    const pending = entry.pending === true || entry.docname.startsWith("local:");
+    const own = Boolean(sessionUser && entry.ownerId === sessionUser) && !pending;
     const isEditing = editing?.docname === entry.docname;
     const isConfirming = confirmingDelete === entry.docname;
     const isBusy = busyDocname === entry.docname;
     return (
       <XStack
         role="article"
-        aria-label={`${displayName}, ${formatRelativeTime(entry.timestamp)}`}
+        aria-label={
+          pending
+            ? `${displayName}, ${t("timeline.sending", "Sending…")}`
+            : `${displayName}, ${formatRelativeTime(entry.timestamp)}`
+        }
+        aria-busy={pending || undefined}
+        opacity={pending ? 0.6 : 1}
         gap="$3"
         alignItems="flex-start"
       >
@@ -543,6 +753,14 @@ export function FormTimeline({
           {actionError}
         </Text>
       ) : null}
+      {commentLedger.failed.map((entry) => (
+        <SyncErrorNotice
+          key={entry.id}
+          message={entry.error ?? t("timeline.writeFailed", "Could not save comment")}
+          onRetry={() => void commentLedger.retry()}
+          onDismiss={() => commentLedger.dismiss(entry.id)}
+        />
+      ))}
       <Timeline
         entries={visible}
         enableAddComment={canComment}