@1agh/maude 1.3.1 → 1.4.0

package/apps/studio/annotation-edit-base.ts

@@ -0,0 +1,36 @@
+// Which SVG an annotation edit names as its base (DDR-241 accepted revisions).
+//
+// The project merges an annotation proposal element by element against the
+// text it was derived from. The canvas used to send the CANONICAL
+// re-serialization of the strokes it held — fine while the stored text is
+// canonical too, and silently fatal when it is not: an element written by an
+// older serializer, a hand edit or any other writer then looks changed on BOTH
+// sides, the merge refuses it as a conflict, and the person's edit is reverted
+// without a word (plan T31, L09 arrowheads on a non-canonical arrow).
+//
+// An edit made on exactly the state this canvas last RECEIVED names the text
+// it received — the project then sees "nothing changed underneath", accepts
+// the edit whole, and the stored text becomes canonical as a side effect. Any
+// other state (edits stacked before the echo returns) is this canvas's own
+// canonical output, which is what the project holds after accepting it.
+
+import { type Stroke, strokesToSvg } from './annotations-model.ts';
+
+export interface ReceivedAnnotations {
+  /** The SVG text exactly as the project delivered it. */
+  raw: string;
+  /** The same state as this client serializes it. */
+  canon: string;
+}
+
+export function receivedAnnotations(raw: string, strokes: readonly Stroke[]): ReceivedAnnotations {
+  return { raw, canon: strokesToSvg(strokes) };
+}
+
+export function annotationEditBase(
+  before: readonly Stroke[],
+  received: ReceivedAnnotations | null
+): string {
+  const canon = strokesToSvg(before);
+  return received && received.canon === canon ? received.raw : canon;
+}

package/apps/studio/annotations-layer.tsx

@@ -1,3 +1,8 @@
+import {
+  annotationEditBase,
+  type ReceivedAnnotations,
+  receivedAnnotations,
+} from './annotation-edit-base.ts';
 import { createAnnotationEchoGuard, observeAnnotationSnapshots } from './annotations-sync.ts';
 /**
  * @file       annotations-layer.tsx — FigJam-style annotation overlay
@@ -1157,6 +1162,9 @@ export function AnnotationsLayer() {
   // peer undo/delete can legitimately return to any previously rendered SVG.
   const annotationEchoRef = useRef(createAnnotationEchoGuard());
   const annotationsChangedRef = useRef(false);
+  // The annotations as the project last delivered them — the base an edit on
+  // exactly that state names (annotation-edit-base.ts).
+  const receivedRef = useRef<ReceivedAnnotations | null>(null);
   useEffect(() => {
     const file = deriveFile();
     fileRef.current = file;
@@ -1169,6 +1177,7 @@ export function AnnotationsLayer() {
       .then((text) => {
         if (cancelled || annotationsChangedRef.current) return;
         const loaded = svgToStrokes(text);
+        receivedRef.current = receivedAnnotations(text, loaded);
         if (loaded.length) {
           setStrokesState(loaded);
         }
@@ -1186,8 +1195,9 @@ export function AnnotationsLayer() {
     if (!collab) return;
     return observeAnnotationSnapshots(collab.doc, (svg, writeId) => {
       annotationsChangedRef.current = true;
-      if (annotationEchoRef.current.isOwn(svg, writeId)) return;
       const incoming = svgToStrokes(svg);
+      receivedRef.current = receivedAnnotations(svg, incoming);
+      if (annotationEchoRef.current.isOwn(svg, writeId)) return;
       setStrokesState((prev) => reconcileForeignEcho(prev, incoming));
     });
   }, [collab]);
@@ -1243,7 +1253,7 @@ export function AnnotationsLayer() {
     const persistableBefore = before.some(isEphemeralHref)
       ? before.filter((s) => !isEphemeralHref(s))
       : before;
-    const base = strokesToSvg(persistableBefore);
+    const base = annotationEditBase(persistableBefore, receivedRef.current);
     // Phase 8 Task 5 — record the SVG we just authored locally so the
     // server-broadcast echo (PUT → onAnnotationsChanged → syncRoom* →
     // Y.Map.observe) doesn't trigger a redundant setStrokesState.
@@ -4984,6 +4994,7 @@ function AnnotationContextMenu({
     <button
       type="button"
       role="menuitem"
+      data-action={id}
       disabled={opts?.disabled}
       className={`dc-menu-item${opts?.destructive ? ' is-destructive' : ''}`}
       onClick={() => {

package/apps/studio/api.ts

@@ -3966,6 +3966,14 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
       );
       for (const artifact of canvasArtifacts({ rel: fromRel, paths })) {
         if (artifact.kind !== 'slug-keyed') continue; // primary/siblings already moved with the dir
+        if (artifact.carryOnMove === false) {
+          // The old slug's CRDT cache, stamped "moved away" — the same drop as
+          // moveCanvas; carried, the new document opens retired.
+          await rm(artifact.abs, { force: true }).catch((err) => {
+            console.warn(`[move] could not drop the stale doc cache: ${(err as Error).message}`);
+          });
+          continue;
+        }
         const dest = relocatedName(artifact, fromRel, toRel, paths);
         if (path.resolve(dest) === path.resolve(artifact.abs)) continue;
         try {

package/apps/studio/canvas-lib.tsx

@@ -3138,32 +3138,47 @@ const ASSET_REF_RE = /assets\/[0-9a-f]{8}\.[a-z0-9]+/i;
  *  baked, the element's `src`/`href` is a `data:` URL that no longer contains
  *  the original asset path, so the substring match alone would lose track of
  *  it on the very next edit. */
-function findPhotoEl(asset: string): Element | null {
+function photoRefOf(el: Element): string {
+  return el.getAttribute('src') || el.getAttribute('href') || el.getAttribute('xlink:href') || '';
+}
+
+/**
+ * Is the element's `data-photo-asset` tag still true? The tag is this bridge's
+ * memory of a node it baked — while baked, the node shows a `data:` URL; left
+ * alone, it shows the asset. Once the canvas points the node at something
+ * else (Replace… on the image), the memory is stale: the node is no longer
+ * this photo, and acting on the tag would put the old picture back over the
+ * new one on the machine that made the replace (plan T31/L12).
+ */
+function photoTagCurrent(el: Element, tagged: string): boolean {
+  const ref = photoRefOf(el);
+  return ref.startsWith('data:') || ref.includes(tagged);
+}
+
+export function findPhotoEl(asset: string): Element | null {
   if (typeof document === 'undefined') return null;
   // Scoped to img/image (not a bare `[data-photo-asset]` attribute selector) —
   // the canvas iframe is untrusted content (DDR-054); an authored canvas could
   // otherwise stamp the tag on an arbitrary element to redirect a bake.
   for (const n of document.querySelectorAll('img[data-photo-asset], image[data-photo-asset]')) {
-    if (n.getAttribute('data-photo-asset') === asset) return n;
+    if (n.getAttribute('data-photo-asset') !== asset) continue;
+    if (photoTagCurrent(n, asset)) return n;
+    n.removeAttribute('data-photo-asset');
   }
   for (const n of document.querySelectorAll('img, image')) {
-    const src =
-      n.getAttribute('src') || n.getAttribute('href') || n.getAttribute('xlink:href') || '';
-    if (src.includes(asset)) return n;
+    if (photoRefOf(n).includes(asset)) return n;
   }
   return null;
 }
 
-function extractAssetRef(el: Element): string | null {
+export function extractAssetRef(el: Element): string | null {
   // Only trust `data-photo-asset` when it actually has the `assets/<sha8>.<ext>`
   // shape — the tag is attacker-controllable (untrusted canvas content,
   // DDR-054), and an unshaped value would otherwise ride unbounded into
   // `_active.json`/the WS broadcast via inspect.ts's `enrich()`.
   const tagged = el.getAttribute('data-photo-asset');
-  if (tagged && ASSET_REF_RE.test(tagged)) return tagged;
-  const ref =
-    el.getAttribute('src') || el.getAttribute('href') || el.getAttribute('xlink:href') || '';
-  return ref.match(ASSET_REF_RE)?.[0] ?? null;
+  if (tagged && ASSET_REF_RE.test(tagged) && photoTagCurrent(el, tagged)) return tagged;
+  return photoRefOf(el).match(ASSET_REF_RE)?.[0] ?? null;
 }
 
 function setPhotoElSrc(el: Element, url: string): void {

package/apps/studio/client/app.jsx

@@ -3245,6 +3245,7 @@ function Sidebar({
               <button
                 type="button"
                 className={'st-tree-sec-hd' + (isRootOver ? ' is-drop-target' : '')}
+                data-testid={`tree-section-${g.label.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
                 onClick={() => onToggleSection(g.label, defaultOpen)}
                 aria-expanded={sectionOpen}
                 aria-dropeffect={canDropOnRoot ? 'move' : undefined}
@@ -7080,6 +7081,7 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
           <button
             type="button"
             className="st-cp-sechd"
+            data-testid={`inspector-section-${name.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
             aria-expanded={!!open[name]}
             onClick={() => setOpen((o) => ({ ...o, [name]: !o[name] }))}
           >

package/apps/studio/client/panels/TimelinePanel.jsx

@@ -137,6 +137,24 @@ function fmtTime(frame, fps) {
   return `${whole}.${String(cs).padStart(2, '0')}s`;
 }
 
+/**
+ * Drag state its own release handler reads synchronously. The releases used
+ * to commit from INSIDE a state updater (`setX((d) => { commit(d); … })`), and
+ * React is free to run an updater more than once — StrictMode does it on
+ * purpose, and a render replayed against a concurrent update may too — so one
+ * drag could write its clip twice. Updaters passed to `set` run once, here,
+ * against the live value; the release commits outside any updater.
+ */
+function useLiveState(initial) {
+  const [state, setState] = useState(initial);
+  const live = useRef(initial);
+  const set = useCallback((next) => {
+    live.current = typeof next === 'function' ? next(live.current) : next;
+    setState(live.current);
+  }, []);
+  return [state, set, live];
+}
+
 // The frame axis starts AFTER the fixed label gutter.
 const LABEL_GUTTER = 96;
 // Padding the .tl-scroll container puts around the tracks (see 3-shell-maude.css).
@@ -353,10 +371,10 @@ export default function TimelinePanel({
 
   // -------------------------------------------------------------------------
   // Drag machines (retime / move) — px-per-frame based.
-  const [retimeDrag, setRetimeDrag] = useState(null);
-  const [moveDrag, setMoveDrag] = useState(null);
+  const [retimeDrag, setRetimeDrag, retimeLive] = useLiveState(null);
+  const [moveDrag, setMoveDrag, moveLive] = useLiveState(null);
   // Task 6 — magnetic storyline reorder drag: { index, slot, targetSlot, dx, pxf }.
-  const [reorderDrag, setReorderDrag] = useState(null);
+  const [reorderDrag, setReorderDrag, reorderLive] = useLiveState(null);
   // Debate verdict (feedback): a momentary accent rule at the frame a drag just
   // snapped to — magnetism is otherwise invisible. { frame } | null.
   const [snapFlash, setSnapFlash] = useState(null);
@@ -374,7 +392,7 @@ export default function TimelinePanel({
   const [commentMode, setCommentMode] = useState(false);
   // Dogfood (2026-07-30) — vertical layer reorder: dragging an overlay row's
   // lane chip up/down re-stacks the standalone clips (z-order = doc order).
-  const [layerDrag, setLayerDrag] = useState(null);
+  const [layerDrag, setLayerDrag, layerLive] = useLiveState(null);
   // Right-click clip context menu: { index, x, y }.
   const [ctxMenu, setCtxMenu] = useState(null);
   // Task 23 — the open comment-thread popover: { id, x, y } | null.
@@ -384,7 +402,7 @@ export default function TimelinePanel({
   // a seam chip click.
   const [inspector, setInspector] = useState(null);
   // Task 11 — left-edge in-point trim drag: { index, ref, startX, pxf, delta }.
-  const [trimInDrag, setTrimInDrag] = useState(null);
+  const [trimInDrag, setTrimInDrag, trimInLive] = useLiveState(null);
   // True after a body-drag actually moved — suppresses the click-to-select.
   const movedRef = useRef(false);
   // Drag the top edge to resize the panel — pointer-capture + window listeners
@@ -508,10 +526,9 @@ export default function TimelinePanel({
       setRetimeDrag((d) => (d ? { ...d, curDur, atClamp } : d));
     };
     const up = () => {
-      setRetimeDrag((d) => {
-        if (d && d.curDur !== d.startDur) onRetime?.(d.ref ?? d.index, { durationInFrames: d.curDur });
-        return null;
-      });
+      const d = retimeLive.current;
+      setRetimeDrag(null);
+      if (d && d.curDur !== d.startDur) onRetime?.(d.ref ?? d.index, { durationInFrames: d.curDur });
     };
     window.addEventListener('pointermove', move);
     window.addEventListener('pointerup', up, { once: true });
@@ -537,25 +554,23 @@ export default function TimelinePanel({
       setMoveDrag((d) => (d ? { ...d, curFrom, overStory } : d));
     };
     const up = (e) => {
-      setMoveDrag((d) => {
-        if (d) {
-          // Dropping the clip ON the storyline lane moves it between layers
-          // (the layers model); otherwise commit the horizontal from-move.
-          const story = document.querySelector('.tl-storyline-track')?.getBoundingClientRect();
-          if (
-            story &&
-            onClipVerb &&
-            e.clientY >= story.top &&
-            e.clientY <= story.bottom &&
-            movedRef.current
-          ) {
-            onClipVerb(d.ref ?? { index: d.index }, 'to-storyline', {});
-          } else if (d.curFrom !== d.startFrom) {
-            onRetime?.(d.ref ?? d.index, { from: d.curFrom });
-          }
-        }
-        return null;
-      });
+      const d = moveLive.current;
+      setMoveDrag(null);
+      if (!d) return;
+      // Dropping the clip ON the storyline lane moves it between layers
+      // (the layers model); otherwise commit the horizontal from-move.
+      const story = document.querySelector('.tl-storyline-track')?.getBoundingClientRect();
+      if (
+        story &&
+        onClipVerb &&
+        e.clientY >= story.top &&
+        e.clientY <= story.bottom &&
+        movedRef.current
+      ) {
+        onClipVerb(d.ref ?? { index: d.index }, 'to-storyline', {});
+      } else if (d.curFrom !== d.startFrom) {
+        onRetime?.(d.ref ?? d.index, { from: d.curFrom });
+      }
     };
     window.addEventListener('pointermove', move);
     window.addEventListener('pointerup', up, { once: true });
@@ -576,10 +591,9 @@ export default function TimelinePanel({
       setTrimInDrag((d) => (d ? { ...d, delta } : d));
     };
     const up = () => {
-      setTrimInDrag((d) => {
-        if (d && d.delta) onClipVerb?.(d.ref, 'trim-in', { deltaFrames: d.delta });
-        return null;
-      });
+      const d = trimInLive.current;
+      setTrimInDrag(null);
+      if (d && d.delta) onClipVerb?.(d.ref, 'trim-in', { deltaFrames: d.delta });
     };
     window.addEventListener('pointermove', move);
     window.addEventListener('pointerup', up, { once: true });
@@ -646,33 +660,33 @@ export default function TimelinePanel({
       setReorderDrag((d) => (d ? { ...d, dx, targetSlot: target } : d));
     };
     const up = (e) => {
-      setReorderDrag((d) => {
-        if (d && movedRef.current && onClipVerb) {
-          const story = document.querySelector('.tl-storyline-track')?.getBoundingClientRect();
-          if (story && e.clientY < story.top - 6) {
-            const beat = sequences[d.index];
-            if (beat) {
-              onClipVerb(refFor(beat, d.index), 'to-overlay', {});
-              return null;
-            }
+      const d = reorderLive.current;
+      setReorderDrag(null);
+      if (!d) return;
+      if (movedRef.current && onClipVerb) {
+        const track = document.querySelector('.tl-storyline-track')?.getBoundingClientRect();
+        if (track && e.clientY < track.top - 6) {
+          const beat = sequences[d.index];
+          if (beat) {
+            onClipVerb(refFor(beat, d.index), 'to-overlay', {});
+            return;
           }
         }
-        if (d && d.targetSlot !== d.slot) {
-          const moved = story[d.slot];
-          // targetSlot counts positions among the OTHER beats — map to a ref
-          // beat + before/after in the original order.
-          const others = story.filter((_, k) => k !== d.slot);
-          if (moved && others.length) {
-            if (d.targetSlot <= 0) {
-              onReorderMove?.(refFor(moved.s, moved.i), refFor(others[0].s, others[0].i), 'before');
-            } else {
-              const ref = others[Math.min(d.targetSlot, others.length) - 1];
-              onReorderMove?.(refFor(moved.s, moved.i), refFor(ref.s, ref.i), 'after');
-            }
+      }
+      if (d.targetSlot !== d.slot) {
+        const moved = story[d.slot];
+        // targetSlot counts positions among the OTHER beats — map to a ref
+        // beat + before/after in the original order.
+        const others = story.filter((_, k) => k !== d.slot);
+        if (moved && others.length) {
+          if (d.targetSlot <= 0) {
+            onReorderMove?.(refFor(moved.s, moved.i), refFor(others[0].s, others[0].i), 'before');
+          } else {
+            const ref = others[Math.min(d.targetSlot, others.length) - 1];
+            onReorderMove?.(refFor(moved.s, moved.i), refFor(ref.s, ref.i), 'after');
           }
         }
-        return null;
-      });
+      }
     };
     window.addEventListener('pointermove', move);
     window.addEventListener('pointerup', up, { once: true });
@@ -701,13 +715,12 @@ export default function TimelinePanel({
       setLayerDrag((d) => (d ? { ...d, curTarget: target } : d));
     };
     const up = () => {
-      setLayerDrag((d) => {
-        if (d && d.curTarget !== d.docIdx) {
-          const seq = sequences[d.index];
-          if (seq) onClipVerb?.(refFor(seq, d.index), 'layer-order', { toIndex: d.curTarget });
-        }
-        return null;
-      });
+      const d = layerLive.current;
+      setLayerDrag(null);
+      if (d && d.curTarget !== d.docIdx) {
+        const seq = sequences[d.index];
+        if (seq) onClipVerb?.(refFor(seq, d.index), 'layer-order', { toIndex: d.curTarget });
+      }
     };
     window.addEventListener('pointermove', move);
     window.addEventListener('pointerup', up, { once: true });

package/apps/studio/client/photo-knobs.jsx

@@ -317,7 +317,7 @@ export function PhotoKnobs({ asset, initialEdit, ColorPicker, onEdit, onRemoveBa
 
       <Section
         title="Duotone"
-        right={<Toggle checked={duo.enabled} onChange={(v) => setSection('duotone', { enabled: v }, true)} label="on" />}
+        right={<Toggle checked={duo.enabled} onChange={(v) => setSection('duotone', { enabled: v }, true)} label="on" ariaLabel="Duotone on" />}
         onReset={() => clearSection('duotone')}
       >
         {duo.enabled && (
@@ -337,7 +337,7 @@ export function PhotoKnobs({ asset, initialEdit, ColorPicker, onEdit, onRemoveBa
 
       <Section
         title="Grain"
-        right={<Toggle checked={grain.enabled} onChange={(v) => setSection('grain', { enabled: v }, true)} label="on" />}
+        right={<Toggle checked={grain.enabled} onChange={(v) => setSection('grain', { enabled: v }, true)} label="on" ariaLabel="Grain on" />}
         onReset={() => clearSection('grain')}
       >
         {grain.enabled && (
@@ -358,7 +358,7 @@ export function PhotoKnobs({ asset, initialEdit, ColorPicker, onEdit, onRemoveBa
 
       <Section
         title="Pattern"
-        right={<Toggle checked={pat.enabled} onChange={(v) => setSection('pattern', { enabled: v }, true)} label="on" />}
+        right={<Toggle checked={pat.enabled} onChange={(v) => setSection('pattern', { enabled: v }, true)} label="on" ariaLabel="Pattern on" />}
         onReset={() => clearSection('pattern')}
       >
         {pat.enabled && (

package/apps/studio/comments-overlay.tsx

@@ -338,6 +338,11 @@ export function CommentsOverlay(): React.ReactNode {
   // safe because they carry identical content; the Y.Array path just
   // reaches us first (no 800 ms debounce delay).
   const collab = useCollab();
+  // Who is looking — the same identity a new comment is signed with (the
+  // project's git user on a desktop, the vouched member in a cloud cell).
+  // Asked directly: this overlay also runs in the comment-mount bundle, where
+  // the collab context is another module's and reads as null.
+  const me = useViewerName();
   useEffect(() => {
     if (!collab) return;
     const arr = collab.doc.getArray<OverlayComment>('comments');
@@ -566,6 +571,11 @@ export function CommentsOverlay(): React.ReactNode {
             onPatch={(patch) => handlePatch(focused.id, patch)}
             onDelete={() => handleDelete(focused.id)}
             onReply={(body) => handleReply(focused.id, body)}
+            mine={
+              !isReadOnlyCanvas() &&
+              !!(me ?? collab?.myName) &&
+              (focused.author ?? '').trim() === (me ?? collab?.myName ?? '').trim()
+            }
           />
         );
       })()}
@@ -1048,13 +1058,33 @@ function CommentComposer({
 // directly to `/_api/comments/<id>/reply` because that endpoint exists only on
 // Bun runtime and lives in `http.ts`.
 
-function CommentThread({
+let viewerName: Promise<string | null> | null = null;
+/** The viewer's display identity, asked once per document. */
+function useViewerName(): string | null {
+  const [name, setName] = useState<string | null>(null);
+  useEffect(() => {
+    if (typeof fetch === 'undefined') return;
+    viewerName ??= fetch('/_api/git-user')
+      .then((r) => (r.ok ? r.json() : null))
+      .then((j) => (typeof j?.name === 'string' && j.name.trim() ? j.name.trim() : null))
+      .catch(() => null);
+    let alive = true;
+    void viewerName.then((n) => alive && setName(n));
+    return () => {
+      alive = false;
+    };
+  }, []);
+  return name;
+}
+
+export function CommentThread({
   comment,
   sequence,
   onClose,
   onPatch,
   onDelete,
   onReply,
+  mine = false,
 }: {
   comment: OverlayComment;
   sequence: number;
@@ -1062,12 +1092,23 @@ function CommentThread({
   onPatch: (patch: Record<string, unknown>) => void;
   onDelete: () => void;
   onReply: (body: string) => Promise<boolean>;
+  /** The person looking wrote this comment — they may edit its text. */
+  mine?: boolean;
 }) {
   const dialogRef = useRef<HTMLDivElement | null>(null);
   const replyRef = useRef<HTMLTextAreaElement | null>(null);
   const rafRef = useRef<number | null>(null);
   const [reply, setReply] = useState('');
   const [sending, setSending] = useState(false);
+  // Editing your own comment: the text in place, saved as a patch (the same
+  // channel resolve/reopen use). null = not editing.
+  const [draft, setDraft] = useState<string | null>(null);
+  const saveDraft = useCallback(() => {
+    const v = (draft ?? '').trim();
+    if (!v) return;
+    if (v !== comment.text) onPatch({ text: v });
+    setDraft(null);
+  }, [draft, comment.text, onPatch]);
 
   // Live anchor — popover tracks the pin via rAF so it stays glued to its
   // target through pan / zoom (FigJam parity). Writing to the dialog style
@@ -1176,7 +1217,40 @@ function CommentThread({
         {selectorChip ? <code className="cm-thread__selector">{selectorChip}</code> : null}
       </div>
 
-      <div className="cm-thread__body">{renderBodyWithMentions(comment.text)}</div>
+      {draft === null ? (
+        <div className="cm-thread__body">{renderBodyWithMentions(comment.text)}</div>
+      ) : (
+        <div className="cm-thread__reply-form">
+          <MentionAwareTextarea
+            className="cm-thread__reply-textarea"
+            value={draft}
+            placeholder="Edit your comment… ⌘↵ to save"
+            onChange={setDraft}
+            onKeyDown={(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+              if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+                e.preventDefault();
+                saveDraft();
+              }
+            }}
+            rows={3}
+            ariaLabel="Edit comment"
+          />
+          <div className="cm-thread__reply-actions">
+            <button type="button" className="cm-btn" onClick={() => setDraft(null)}>
+              Cancel
+            </button>
+            <button
+              type="button"
+              className="cm-btn cm-btn--primary"
+              data-testid="comment-edit-save"
+              disabled={!draft.trim()}
+              onClick={saveDraft}
+            >
+              Save
+            </button>
+          </div>
+        </div>
+      )}
 
       {(comment.thread ?? []).map((r) => (
         <div className="cm-thread__reply" key={r.id}>
@@ -1218,6 +1292,16 @@ function CommentThread({
           </div>
 
           <div className="cm-thread__actions">
+            {mine && draft === null ? (
+              <button
+                type="button"
+                className="cm-btn"
+                data-testid="comment-edit"
+                onClick={() => setDraft(comment.text)}
+              >
+                Edit
+              </button>
+            ) : null}
             {comment.status === 'resolved' ? (
               <button type="button" className="cm-btn" onClick={() => onPatch({ status: 'open' })}>
                 ↺ Reopen