@actuate-media/cms-admin 0.12.0 → 0.12.1

package/dist/lib/slash-command.d.ts

@@ -0,0 +1,39 @@
+import { type CoauthorAction } from './coauthor-client.js';
+/**
+ * Cmd+K slash-command parsing for the AI co-author.
+ *
+ * Recognized syntax (case-insensitive, leading whitespace tolerated):
+ *
+ *     /ai <action> [text...]
+ *
+ * `<action>` is one of `COAUTHOR_ACTIONS`. `text` is the payload handed to
+ * `/ai/coauthor`; it may be empty while the user is still typing.
+ *
+ * The parser is pure so we can unit-test every edge case (case folding,
+ * trailing whitespace, partial input, unknown actions) without spinning up
+ * `cmdk` or the rest of the palette.
+ */
+export interface AiSlashCommand {
+    action: CoauthorAction;
+    text: string;
+}
+/**
+ * Returns the matched `{ action, text }` when `input` is a complete
+ * slash command (`/ai rewrite ...`), or `null` otherwise. `text` may be
+ * empty when the user has typed `/ai rewrite` with no payload yet.
+ */
+export declare function parseAiSlashCommand(input: string): AiSlashCommand | null;
+/**
+ * Returns true when `input` looks like the start of an AI slash command
+ * — even when the action isn't typed yet (`/`, `/a`, `/ai`, `/ai re`).
+ * The palette uses this to switch into "AI mode" (hide nav results,
+ * show the four action suggestions).
+ */
+export declare function isAiSlashCommandInput(input: string): boolean;
+/**
+ * Ordered list of actions to show in AI mode. When the user has typed a
+ * valid command, that command's action is hoisted to the top so it gets
+ * the default keyboard focus (and Enter runs it).
+ */
+export declare function orderedAiActions(input: string): CoauthorAction[];
+//# sourceMappingURL=slash-command.d.ts.map

package/dist/lib/slash-command.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slash-command.d.ts","sourceRoot":"","sources":["../../src/lib/slash-command.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE9F;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,cAAc,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;CACb;AAID;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,GAAG,IAAI,CAYxE;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAM5D;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,EAAE,CAIhE"}

package/dist/lib/slash-command.js

@@ -0,0 +1,50 @@
+import { COAUTHOR_ACTIONS, isCoauthorAction } from './coauthor-client.js';
+const SLASH_HEAD = /^\s*\/\s*ai(?:\s+|$)/i;
+/**
+ * Returns the matched `{ action, text }` when `input` is a complete
+ * slash command (`/ai rewrite ...`), or `null` otherwise. `text` may be
+ * empty when the user has typed `/ai rewrite` with no payload yet.
+ */
+export function parseAiSlashCommand(input) {
+    if (typeof input !== 'string')
+        return null;
+    if (!SLASH_HEAD.test(input))
+        return null;
+    const after = input.replace(SLASH_HEAD, '');
+    if (after.length === 0)
+        return null;
+    const firstWhitespace = after.search(/\s/);
+    const head = (firstWhitespace === -1 ? after : after.slice(0, firstWhitespace)).toLowerCase();
+    if (!isCoauthorAction(head))
+        return null;
+    const tail = firstWhitespace === -1 ? '' : after.slice(firstWhitespace + 1);
+    return { action: head, text: tail.trim() };
+}
+/**
+ * Returns true when `input` looks like the start of an AI slash command
+ * — even when the action isn't typed yet (`/`, `/a`, `/ai`, `/ai re`).
+ * The palette uses this to switch into "AI mode" (hide nav results,
+ * show the four action suggestions).
+ */
+export function isAiSlashCommandInput(input) {
+    if (typeof input !== 'string')
+        return false;
+    const trimmed = input.trim();
+    if (trimmed.length === 0)
+        return false;
+    if (trimmed === '/')
+        return true;
+    return /^\/\s*a(i\b|i?[a-z]*|)?(\s.*)?$/i.test(trimmed);
+}
+/**
+ * Ordered list of actions to show in AI mode. When the user has typed a
+ * valid command, that command's action is hoisted to the top so it gets
+ * the default keyboard focus (and Enter runs it).
+ */
+export function orderedAiActions(input) {
+    const parsed = parseAiSlashCommand(input);
+    if (!parsed)
+        return [...COAUTHOR_ACTIONS];
+    return [parsed.action, ...COAUTHOR_ACTIONS.filter((a) => a !== parsed.action)];
+}
+//# sourceMappingURL=slash-command.js.map

package/dist/lib/slash-command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slash-command.js","sourceRoot":"","sources":["../../src/lib/slash-command.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAuB,MAAM,sBAAsB,CAAA;AAsB9F,MAAM,UAAU,GAAG,uBAAuB,CAAA;AAE1C;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAAa;IAC/C,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAA;IAC1C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IACxC,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;IAC3C,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAEnC,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IAC1C,MAAM,IAAI,GAAG,CAAC,eAAe,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,WAAW,EAAE,CAAA;IAC7F,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;QAAE,OAAO,IAAI,CAAA;IAExC,MAAM,IAAI,GAAG,eAAe,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,eAAe,GAAG,CAAC,CAAC,CAAA;IAC3E,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAA;AAC5C,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB,CAAC,KAAa;IACjD,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAA;IAC3C,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,EAAE,CAAA;IAC5B,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,KAAK,CAAA;IACtC,IAAI,OAAO,KAAK,GAAG;QAAE,OAAO,IAAI,CAAA;IAChC,OAAO,kCAAkC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;AACzD,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAa;IAC5C,MAAM,MAAM,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAA;IACzC,IAAI,CAAC,MAAM;QAAE,OAAO,CAAC,GAAG,gBAAgB,CAAC,CAAA;IACzC,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,MAAM,CAAC,MAAM,CAAC,CAAC,CAAA;AAChF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actuate-media/cms-admin",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/actuate-media/actuatecms.git",
@@ -38,7 +38,10 @@
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
+    "@tiptap/core": "^2.11.0",
     "@tiptap/extension-code-block-lowlight": "^2.11.0",
+    "@tiptap/extension-collaboration": "^2.11.0",
+    "@tiptap/extension-collaboration-cursor": "^2.11.0",
     "@tiptap/extension-horizontal-rule": "^2.11.0",
     "@tiptap/extension-image": "^2.11.0",
     "@tiptap/extension-link": "^2.11.0",
@@ -59,7 +62,11 @@
     "react-dom": "^19.2.0",
     "recharts": "^3.8.1",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.5.0"
+    "tailwind-merge": "^3.5.0",
+    "y-indexeddb": "^9.0.12",
+    "y-protocols": "^1.0.6",
+    "y-websocket": "^2.0.4",
+    "yjs": "^13.6.0"
   },
   "peerDependencies": {
     "@actuate-media/cms-core": ">=0.1.0",
@@ -72,13 +79,15 @@
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.0.0",
+    "@testing-library/react": "^16.1.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "concurrently": "^9.2.1",
+    "happy-dom": "^20.9.0",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.7.0",
     "vitest": "^3.0.0",
-    "@actuate-media/cms-core": "0.21.0",
+    "@actuate-media/cms-core": "0.22.0",
     "@actuate-media/component-blocks": "0.2.0"
   },
   "scripts": {

package/src/__tests__/components/comment-mark.test.ts

@@ -0,0 +1,99 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest'
+import { Editor } from '@tiptap/core'
+import StarterKit from '@tiptap/starter-kit'
+
+import { CommentMark } from '../../components/CommentMark.js'
+
+function newEditor(initialHtml = '<p>hello world</p>') {
+  return new Editor({
+    extensions: [StarterKit.configure({ history: false }), CommentMark],
+    content: initialHtml,
+  })
+}
+
+describe('CommentMark', () => {
+  it('registers under the name "comment"', () => {
+    const ed = newEditor()
+    expect(ed.extensionManager.extensions.some((e) => e.name === 'comment')).toBe(true)
+    ed.destroy()
+  })
+
+  it('setComment applies the mark across the current selection', () => {
+    const ed = newEditor('<p>hello world</p>')
+    ed.commands.setTextSelection({ from: 1, to: 6 }) // "hello"
+    const ok = ed.chain().setComment({ commentId: 'c-1' }).run()
+    expect(ok).toBe(true)
+    expect(ed.isActive('comment', { commentId: 'c-1' })).toBe(true)
+    // The rendered HTML should now contain the data attribute.
+    const html = ed.getHTML()
+    expect(html).toContain('data-comment-id="c-1"')
+    expect(html).toContain('hello')
+    ed.destroy()
+  })
+
+  it('setComment rejects a missing commentId', () => {
+    const ed = newEditor()
+    ed.commands.setTextSelection({ from: 1, to: 6 })
+    const ok = ed.chain().setComment({ commentId: '' }).run()
+    expect(ok).toBe(false)
+    expect(ed.getHTML()).not.toContain('data-comment-id')
+    ed.destroy()
+  })
+
+  it('updateComment swaps the commentId across the mark range', () => {
+    const ed = newEditor('<p>hello world</p>')
+    ed.commands.setTextSelection({ from: 1, to: 6 })
+    ed.chain().setComment({ commentId: 'c-1' }).run()
+    // Re-select the same range so updateAttributes can find the mark to
+    // mutate. TipTap's updateAttributes applies to the marks that fall
+    // within the selection — a collapsed cursor at the boundary would
+    // not match this mark.
+    ed.commands.setTextSelection({ from: 1, to: 6 })
+    const ok = ed.chain().updateComment({ commentId: 'c-2' }).run()
+    expect(ok).toBe(true)
+    expect(ed.getHTML()).toContain('data-comment-id="c-2"')
+    ed.destroy()
+  })
+
+  it('unsetComment removes the mark from the selection', () => {
+    const ed = newEditor('<p>hello world</p>')
+    ed.commands.setTextSelection({ from: 1, to: 6 })
+    ed.chain().setComment({ commentId: 'c-1' }).run()
+    expect(ed.getHTML()).toContain('data-comment-id')
+    ed.commands.setTextSelection({ from: 1, to: 6 })
+    ed.chain().unsetComment().run()
+    expect(ed.getHTML()).not.toContain('data-comment-id')
+    ed.destroy()
+  })
+
+  it('parses an existing comment span on load', () => {
+    const ed = newEditor('<p><span data-comment-id="c-7">hello</span> world</p>')
+    expect(ed.getHTML()).toContain('data-comment-id="c-7"')
+    ed.destroy()
+  })
+
+  it('applies the default CSS class on every rendered span', () => {
+    const ed = newEditor('<p>hello world</p>')
+    ed.commands.setTextSelection({ from: 1, to: 6 })
+    ed.chain().setComment({ commentId: 'c-9' }).run()
+    expect(ed.getHTML()).toMatch(/class="actuate-comment"/)
+    ed.destroy()
+  })
+
+  it('supports overlapping comments (non-spanning behaviour)', () => {
+    // Set a comment over chars 1..6 ("hello").
+    const ed = newEditor('<p>hello world</p>')
+    ed.commands.setTextSelection({ from: 1, to: 6 })
+    ed.chain().setComment({ commentId: 'c-a' }).run()
+    // Now apply a second comment over chars 4..8 ("o wo"). TipTap will
+    // split the marks — that's the standard mark-overlap behaviour.
+    ed.commands.setTextSelection({ from: 4, to: 8 })
+    ed.chain().setComment({ commentId: 'c-b' }).run()
+
+    const html = ed.getHTML()
+    expect(html).toContain('data-comment-id="c-a"')
+    expect(html).toContain('data-comment-id="c-b"')
+    ed.destroy()
+  })
+})

package/src/__tests__/components/comment-side-panel.test.tsx

@@ -0,0 +1,343 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, beforeEach, vi } from 'vitest'
+import React from 'react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+import { CommentSidePanel, type CommentsApi } from '../../components/CommentSidePanel.js'
+import type { Comment, CommentOutcome } from '../../lib/comments-client.js'
+
+function ok<T>(value: T): CommentOutcome<T> {
+  return { ok: true, result: value }
+}
+
+function err(error = 'boom', status = 500): CommentOutcome<never> {
+  return { ok: false, error, status }
+}
+
+function comment(overrides: Partial<Comment> = {}): Comment {
+  return {
+    id: 'c-1',
+    documentId: 'doc-1',
+    parentId: null,
+    userId: 'user-1',
+    body: 'Hello there',
+    anchor: null,
+    resolvedAt: null,
+    resolvedById: null,
+    deletedAt: null,
+    createdAt: '2026-01-01T00:00:00.000Z',
+    updatedAt: '2026-01-01T00:00:00.000Z',
+    isResolved: false,
+    ...overrides,
+  }
+}
+
+/**
+ * Build a fresh in-memory CommentsApi stub for each test. We expose
+ * the `list` payload as `state.rows` so tests can poke server state
+ * directly and verify the panel re-fetches after every mutation.
+ */
+function createFakeApi() {
+  const rows: Comment[] = []
+  const calls: { name: string; args: unknown[] }[] = []
+
+  const stub: CommentsApi = {
+    list: vi.fn(async (_documentId: string, opts?: { includeResolved?: boolean }) => {
+      calls.push({ name: 'list', args: [opts] })
+      const visible = rows.filter(
+        (c) => (opts?.includeResolved ? true : !c.isResolved) && c.deletedAt === null,
+      )
+      return ok(visible)
+    }),
+    create: vi.fn(async (input) => {
+      calls.push({ name: 'create', args: [input] })
+      const created = comment({
+        id: `c-${rows.length + 1}`,
+        body: input.body,
+        anchor: input.anchor ?? null,
+        parentId: input.parentId ?? null,
+        userId: 'current',
+      })
+      rows.push(created)
+      return ok(created)
+    }),
+    update: vi.fn(async (id, body) => {
+      calls.push({ name: 'update', args: [id, body] })
+      const row = rows.find((r) => r.id === id)
+      if (!row) return err('not found', 404)
+      row.body = body
+      return ok(row)
+    }),
+    resolve: vi.fn(async (id) => {
+      calls.push({ name: 'resolve', args: [id] })
+      const row = rows.find((r) => r.id === id)
+      if (!row) return err('not found', 404)
+      row.isResolved = true
+      row.resolvedAt = '2026-01-02T00:00:00.000Z'
+      return ok(row)
+    }),
+    reopen: vi.fn(async (id) => {
+      calls.push({ name: 'reopen', args: [id] })
+      const row = rows.find((r) => r.id === id)
+      if (!row) return err('not found', 404)
+      row.isResolved = false
+      row.resolvedAt = null
+      return ok(row)
+    }),
+    remove: vi.fn(async (id) => {
+      calls.push({ name: 'remove', args: [id] })
+      const row = rows.find((r) => r.id === id)
+      if (!row) return err('not found', 404)
+      row.deletedAt = '2026-01-02T00:00:00.000Z'
+      return ok(row)
+    }),
+  }
+
+  return { api: stub, rows, calls }
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+describe('CommentSidePanel — loading & list', () => {
+  it('renders an empty state once the list call resolves', async () => {
+    const { api } = createFakeApi()
+    render(<CommentSidePanel documentId="doc-1" currentUserId="current" api={api} />)
+    expect(screen.getByText('Loading…')).toBeTruthy()
+    await waitFor(() => expect(screen.getByText('No comments yet.')).toBeTruthy())
+    expect(api.list).toHaveBeenCalledWith('doc-1', { includeResolved: false })
+  })
+
+  it('groups roots + replies into a single card', async () => {
+    const { api, rows } = createFakeApi()
+    rows.push(comment({ id: 'root', body: 'root' }))
+    rows.push(
+      comment({
+        id: 'reply',
+        parentId: 'root',
+        body: 'reply',
+        createdAt: '2026-01-01T00:00:01.000Z',
+      }),
+    )
+    render(<CommentSidePanel documentId="doc-1" currentUserId="user-1" api={api} />)
+    await waitFor(() => expect(screen.getByTestId('comment-thread-root')).toBeTruthy())
+    expect(screen.getByTestId('comment-body-root').textContent).toBe('root')
+    expect(screen.getByTestId('comment-body-reply').textContent).toBe('reply')
+  })
+
+  it('hides resolved threads until the toggle is flipped', async () => {
+    const { api, rows } = createFakeApi()
+    rows.push(comment({ id: 'open', body: 'open' }))
+    rows.push(
+      comment({
+        id: 'closed',
+        body: 'closed',
+        isResolved: true,
+        resolvedAt: '2026-01-02T00:00:00.000Z',
+      }),
+    )
+    render(<CommentSidePanel documentId="doc-1" currentUserId="user-1" api={api} />)
+    await waitFor(() => expect(screen.getByTestId('comment-thread-open')).toBeTruthy())
+    expect(screen.queryByTestId('comment-thread-closed')).toBeNull()
+
+    fireEvent.click(screen.getByTestId('include-resolved-toggle'))
+    await waitFor(() => expect(screen.getByTestId('comment-thread-closed')).toBeTruthy())
+    // Most-recent list call should have flipped `includeResolved`.
+    expect(api.list).toHaveBeenLastCalledWith('doc-1', { includeResolved: true })
+  })
+
+  it('surfaces a server failure through onError', async () => {
+    const { api } = createFakeApi()
+    ;(api.list as ReturnType<typeof vi.fn>).mockResolvedValueOnce(err('CSRF', 403))
+    const onError = vi.fn()
+    render(
+      <CommentSidePanel documentId="doc-1" currentUserId="user-1" api={api} onError={onError} />,
+    )
+    await waitFor(() => expect(onError).toHaveBeenCalledWith('CSRF'))
+  })
+})
+
+describe('CommentSidePanel — compose', () => {
+  it('disables the submit button while the draft is empty', async () => {
+    const { api } = createFakeApi()
+    render(<CommentSidePanel documentId="doc-1" currentUserId="user-1" api={api} />)
+    await waitFor(() => expect(screen.getByText('No comments yet.')).toBeTruthy())
+    const btn = screen.getByTestId('comment-submit') as HTMLButtonElement
+    expect(btn.disabled).toBe(true)
+    fireEvent.change(screen.getByTestId('comment-composer'), {
+      target: { value: 'hello' },
+    })
+    expect((screen.getByTestId('comment-submit') as HTMLButtonElement).disabled).toBe(false)
+  })
+
+  it('posts a new comment, clears the draft, and refreshes', async () => {
+    const { api, calls } = createFakeApi()
+    render(<CommentSidePanel documentId="doc-1" currentUserId="user-1" api={api} />)
+    await waitFor(() => expect(screen.getByText('No comments yet.')).toBeTruthy())
+
+    fireEvent.change(screen.getByTestId('comment-composer'), {
+      target: { value: '  fresh thought  ' },
+    })
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('comment-submit'))
+    })
+
+    expect(calls.some((c) => c.name === 'create')).toBe(true)
+    const createCall = calls.find((c) => c.name === 'create')!
+    expect((createCall.args[0] as { body: string }).body).toBe('fresh thought')
+    expect((screen.getByTestId('comment-composer') as HTMLTextAreaElement).value).toBe('')
+    expect(calls.filter((c) => c.name === 'list').length).toBeGreaterThanOrEqual(2)
+  })
+
+  it('forwards onComposeAnchor result into the create call', async () => {
+    const { api, calls } = createFakeApi()
+    const onComposeAnchor = vi.fn().mockReturnValue({ from: 'AQ==', to: 'Ag==' })
+    render(
+      <CommentSidePanel
+        documentId="doc-1"
+        currentUserId="user-1"
+        api={api}
+        onComposeAnchor={onComposeAnchor}
+      />,
+    )
+    await waitFor(() => expect(screen.getByText('No comments yet.')).toBeTruthy())
+    fireEvent.change(screen.getByTestId('comment-composer'), {
+      target: { value: 'anchored' },
+    })
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('comment-submit'))
+    })
+
+    expect(onComposeAnchor).toHaveBeenCalledTimes(1)
+    const createCall = calls.find((c) => c.name === 'create')!
+    expect((createCall.args[0] as { anchor: unknown }).anchor).toEqual({
+      from: 'AQ==',
+      to: 'Ag==',
+    })
+  })
+})
+
+describe('CommentSidePanel — reply, edit, resolve, delete', () => {
+  async function setupWith(rowsInit: Comment[]) {
+    const fake = createFakeApi()
+    for (const row of rowsInit) fake.rows.push(row)
+    const renderResult = render(
+      <CommentSidePanel documentId="doc-1" currentUserId="user-1" isAdmin={false} api={fake.api} />,
+    )
+    await waitFor(() =>
+      expect(screen.getByTestId(`comment-thread-${rowsInit[0]!.id}`)).toBeTruthy(),
+    )
+    return { ...fake, ...renderResult }
+  }
+
+  it('replies through the thread input + clears it on submit', async () => {
+    const { api, calls } = await setupWith([
+      comment({ id: 'root', userId: 'user-1', body: 'root' }),
+    ])
+    fireEvent.change(screen.getByTestId('reply-input-root'), {
+      target: { value: 'hi back' },
+    })
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('reply-submit-root'))
+    })
+
+    const replyCall = calls.find(
+      (c) => c.name === 'create' && (c.args[0] as { parentId?: string | null }).parentId === 'root',
+    )
+    expect(replyCall).toBeDefined()
+    expect((screen.getByTestId('reply-input-root') as HTMLInputElement).value).toBe('')
+    expect(api.list).toHaveBeenCalled()
+  })
+
+  it('shows edit + delete only on comments the user owns (non-admin)', async () => {
+    await setupWith([
+      comment({ id: 'mine', userId: 'user-1', body: 'mine' }),
+      comment({
+        id: 'theirs',
+        userId: 'someone-else',
+        body: 'theirs',
+        createdAt: '2026-01-01T00:00:01.000Z',
+      }),
+    ])
+    expect(screen.queryByTestId('edit-mine')).toBeTruthy()
+    expect(screen.queryByTestId('delete-mine')).toBeTruthy()
+    expect(screen.queryByTestId('edit-theirs')).toBeNull()
+    expect(screen.queryByTestId('delete-theirs')).toBeNull()
+  })
+
+  it('admins see edit + delete on every comment', async () => {
+    const fake = createFakeApi()
+    fake.rows.push(comment({ id: 'theirs', userId: 'someone-else' }))
+    render(<CommentSidePanel documentId="doc-1" currentUserId="user-1" isAdmin api={fake.api} />)
+    await waitFor(() => expect(screen.getByTestId('comment-thread-theirs')).toBeTruthy())
+    expect(screen.getByTestId('edit-theirs')).toBeTruthy()
+    expect(screen.getByTestId('delete-theirs')).toBeTruthy()
+  })
+
+  it('edits a comment body in place', async () => {
+    const { api } = await setupWith([comment({ id: 'c1', userId: 'user-1', body: 'before' })])
+    fireEvent.click(screen.getByTestId('edit-c1'))
+    fireEvent.change(screen.getByTestId('edit-textarea-c1'), {
+      target: { value: 'after' },
+    })
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('edit-save-c1'))
+    })
+    expect(api.update).toHaveBeenCalledWith('c1', 'after')
+    await waitFor(() => expect(screen.getByTestId('comment-body-c1').textContent).toBe('after'))
+  })
+
+  it('cancels an edit without writing', async () => {
+    const { api } = await setupWith([comment({ id: 'c1', userId: 'user-1', body: 'before' })])
+    fireEvent.click(screen.getByTestId('edit-c1'))
+    fireEvent.change(screen.getByTestId('edit-textarea-c1'), {
+      target: { value: 'never saved' },
+    })
+    fireEvent.click(screen.getByTestId('edit-cancel-c1'))
+    expect(api.update).not.toHaveBeenCalled()
+    expect(screen.getByTestId('comment-body-c1').textContent).toBe('before')
+  })
+
+  it('resolves an open thread and reopens a closed one', async () => {
+    const { api, rows } = await setupWith([comment({ id: 'open', userId: 'user-1', body: 'open' })])
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('resolve-open'))
+    })
+    expect(api.resolve).toHaveBeenCalledWith('open')
+    // Flip the toggle so resolved comments stay in the list, then reopen.
+    fireEvent.click(screen.getByTestId('include-resolved-toggle'))
+    await waitFor(() => expect(screen.getByTestId('resolve-open')).toBeTruthy())
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('resolve-open'))
+    })
+    expect(api.reopen).toHaveBeenCalledWith('open')
+    expect(rows[0]!.isResolved).toBe(false)
+  })
+
+  it('deletes a comment and refreshes', async () => {
+    const { api } = await setupWith([comment({ id: 'c1', userId: 'user-1' })])
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('delete-c1'))
+    })
+    expect(api.remove).toHaveBeenCalledWith('c1')
+    await waitFor(() => expect(screen.queryByTestId('comment-thread-c1')).toBeNull())
+  })
+
+  it('notifies onActiveCommentChange when a thread is clicked', async () => {
+    const fake = createFakeApi()
+    fake.rows.push(comment({ id: 'c1', userId: 'user-1' }))
+    const onActive = vi.fn()
+    render(
+      <CommentSidePanel
+        documentId="doc-1"
+        currentUserId="user-1"
+        api={fake.api}
+        onActiveCommentChange={onActive}
+      />,
+    )
+    await waitFor(() => expect(screen.getByTestId('comment-thread-c1')).toBeTruthy())
+    fireEvent.click(screen.getByTestId('comment-thread-c1'))
+    expect(onActive).toHaveBeenCalledWith('c1')
+  })
+})