@actuate-media/cms-admin 0.12.0 → 0.13.0

package/src/__tests__/lib/notifications-client.test.ts

@@ -0,0 +1,339 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const cmsApiMock = vi.fn()
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (...args: unknown[]) => cmsApiMock(...args),
+  // SSE uses EventSource, which doesn't go through cmsApi. The
+  // helper resolves the URL via getApiBase() — return the production
+  // default so tests don't need to know the prefix.
+  getApiBase: () => '/api/cms',
+}))
+
+const {
+  listNotifications,
+  markAllNotificationsRead,
+  markNotificationRead,
+  notificationSummary,
+  subscribeNotificationStream,
+  unreadCount,
+} = await import('../../lib/notifications-client.js')
+import type {
+  EventSourceLike,
+  Notification,
+  NotificationStreamOptions,
+} from '../../lib/notifications-client.js'
+
+function row(overrides: Partial<Notification> = {}): Notification {
+  return {
+    id: 'n-1',
+    userId: 'user-1',
+    kind: 'comment_reply',
+    documentId: 'doc-1',
+    commentId: 'c-1',
+    payload: {
+      kind: 'comment_reply',
+      actorId: 'someone',
+      actorName: 'Someone',
+      excerpt: 'hi',
+    },
+    readAt: null,
+    createdAt: '2026-01-01T00:00:00.000Z',
+    ...overrides,
+  }
+}
+
+beforeEach(() => {
+  cmsApiMock.mockReset()
+})
+
+describe('listNotifications', () => {
+  it('GETs /notifications without query when no options', async () => {
+    cmsApiMock.mockResolvedValueOnce({ data: [row()], status: 200 })
+    const out = await listNotifications()
+    expect(out.ok).toBe(true)
+    expect(cmsApiMock).toHaveBeenCalledWith('/notifications', { method: 'GET' })
+  })
+
+  it('appends ?includeRead and ?pageSize when set', async () => {
+    cmsApiMock.mockResolvedValueOnce({ data: [], status: 200 })
+    await listNotifications({ includeRead: true, pageSize: 25 })
+    expect(cmsApiMock).toHaveBeenCalledWith('/notifications?includeRead=true&pageSize=25', {
+      method: 'GET',
+    })
+  })
+
+  it('returns the data array unchanged', async () => {
+    const rows = [row({ id: 'a' }), row({ id: 'b' })]
+    cmsApiMock.mockResolvedValueOnce({ data: rows, status: 200 })
+    const out = await listNotifications()
+    expect(out.ok).toBe(true)
+    if (!out.ok) return
+    expect(out.result.map((n) => n.id)).toEqual(['a', 'b'])
+  })
+
+  it('propagates errors as { ok: false }', async () => {
+    cmsApiMock.mockResolvedValueOnce({ error: 'nope', status: 500 })
+    const out = await listNotifications()
+    expect(out.ok).toBe(false)
+    if (out.ok) return
+    expect(out.error).toBe('nope')
+    expect(out.status).toBe(500)
+  })
+})
+
+describe('unreadCount', () => {
+  it('returns the count from the envelope', async () => {
+    cmsApiMock.mockResolvedValueOnce({ data: { count: 7 }, status: 200 })
+    const out = await unreadCount()
+    expect(out.ok).toBe(true)
+    if (!out.ok) return
+    expect(out.result).toBe(7)
+  })
+
+  it('propagates failure when the server returns no data', async () => {
+    cmsApiMock.mockResolvedValueOnce({ status: 503 })
+    const out = await unreadCount()
+    expect(out.ok).toBe(false)
+  })
+})
+
+describe('markNotificationRead', () => {
+  it('POSTs to the id-specific endpoint', async () => {
+    cmsApiMock.mockResolvedValueOnce({ data: row({ readAt: 'now' }), status: 200 })
+    const out = await markNotificationRead('n-1')
+    expect(out.ok).toBe(true)
+    expect(cmsApiMock).toHaveBeenCalledWith('/notifications/n-1/read', {
+      method: 'POST',
+      body: '{}',
+    })
+  })
+
+  it('URL-encodes weird ids', async () => {
+    cmsApiMock.mockResolvedValueOnce({ data: row(), status: 200 })
+    await markNotificationRead('n/1?')
+    expect(cmsApiMock).toHaveBeenCalledWith(
+      `/notifications/${encodeURIComponent('n/1?')}/read`,
+      expect.anything(),
+    )
+  })
+
+  it('rejects an empty id without hitting the wire', async () => {
+    const out = await markNotificationRead('')
+    expect(out.ok).toBe(false)
+    expect(cmsApiMock).not.toHaveBeenCalled()
+  })
+})
+
+describe('markAllNotificationsRead', () => {
+  it('POSTs /notifications/read-all and returns the count', async () => {
+    cmsApiMock.mockResolvedValueOnce({ data: { count: 4 }, status: 200 })
+    const out = await markAllNotificationsRead()
+    expect(out.ok).toBe(true)
+    if (!out.ok) return
+    expect(out.result).toBe(4)
+    expect(cmsApiMock).toHaveBeenCalledWith('/notifications/read-all', {
+      method: 'POST',
+      body: '{}',
+    })
+  })
+
+  it('propagates a server error', async () => {
+    cmsApiMock.mockResolvedValueOnce({ error: 'CSRF', status: 403 })
+    const out = await markAllNotificationsRead()
+    expect(out.ok).toBe(false)
+  })
+})
+
+describe('notificationSummary', () => {
+  it('formats comment_reply with the actor + excerpt', () => {
+    expect(
+      notificationSummary(
+        row({
+          payload: {
+            kind: 'comment_reply',
+            actorId: 'a',
+            actorName: 'Alice',
+            excerpt: 'good point',
+          },
+        }),
+      ),
+    ).toBe('Alice replied: "good point"')
+  })
+
+  it('formats comment_resolved with rootExcerpt', () => {
+    expect(
+      notificationSummary(
+        row({
+          kind: 'comment_resolved',
+          payload: {
+            kind: 'comment_resolved',
+            actorId: 'a',
+            actorName: 'Bob',
+            rootExcerpt: 'fix this',
+          },
+        }),
+      ),
+    ).toBe('Bob resolved your thread: "fix this"')
+  })
+
+  it('formats comment_mention with excerpt', () => {
+    expect(
+      notificationSummary(
+        row({
+          kind: 'comment_mention',
+          payload: {
+            kind: 'comment_mention',
+            actorId: 'a',
+            actorName: 'Carol',
+            excerpt: 'cc @you',
+          },
+        }),
+      ),
+    ).toBe('Carol mentioned you: "cc @you"')
+  })
+
+  it('falls back to "Someone" when actorName is null', () => {
+    expect(
+      notificationSummary(
+        row({
+          payload: { kind: 'comment_reply', actorId: null, actorName: null, excerpt: 'x' },
+        }),
+      ),
+    ).toMatch(/^Someone replied/)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// SSE push channel — subscribeNotificationStream
+// ---------------------------------------------------------------------------
+
+/**
+ * In-memory `EventSource` double. Tests drive the wire by invoking
+ * `emit(event, payload)`; the subscriber dispatches the right
+ * listener. We deliberately keep the shape minimal — `EventSource`
+ * has dozens of properties our admin doesn't touch.
+ */
+function makeFakeSource() {
+  const listeners = new Map<string, Set<(e: MessageEvent | Event) => void>>()
+  let closed = false
+  const source: EventSourceLike = {
+    addEventListener: (type, listener) => {
+      if (closed) return
+      let set = listeners.get(type)
+      if (!set) {
+        set = new Set()
+        listeners.set(type, set)
+      }
+      set.add(listener)
+    },
+    removeEventListener: (type, listener) => {
+      listeners.get(type)?.delete(listener)
+    },
+    close: () => {
+      closed = true
+      listeners.clear()
+    },
+  }
+  return {
+    source,
+    listenerCount: (type: string) => listeners.get(type)?.size ?? 0,
+    isClosed: () => closed,
+    emit(type: string, payload: unknown) {
+      const set = listeners.get(type)
+      if (!set) return
+      const event =
+        typeof payload === 'string'
+          ? ({ data: payload } as MessageEvent)
+          : payload === undefined
+            ? (new Event(type) as Event)
+            : ({ data: JSON.stringify(payload) } as MessageEvent)
+      for (const l of [...set]) l(event)
+    },
+  }
+}
+
+function startStream(
+  fake: ReturnType<typeof makeFakeSource>,
+  overrides: Partial<NotificationStreamOptions> = {},
+) {
+  return subscribeNotificationStream({
+    onNotification: () => undefined,
+    factory: () => fake.source,
+    ...overrides,
+  })
+}
+
+describe('subscribeNotificationStream', () => {
+  it('dispatches `notification` frames as Notification objects', () => {
+    const fake = makeFakeSource()
+    const seen: Notification[] = []
+    startStream(fake, { onNotification: (n) => seen.push(n) })
+    fake.emit('notification', row({ id: 'sse-1' }))
+    expect(seen.map((n) => n.id)).toEqual(['sse-1'])
+  })
+
+  it('dispatches `ready` frames once via onReady', () => {
+    const fake = makeFakeSource()
+    const readys: Array<{ userId: string }> = []
+    startStream(fake, { onReady: (p) => readys.push(p) })
+    fake.emit('ready', { userId: 'user-1' })
+    expect(readys).toEqual([{ userId: 'user-1' }])
+  })
+
+  it('ignores malformed payloads (defence against wire drift)', () => {
+    const fake = makeFakeSource()
+    const seen: Notification[] = []
+    startStream(fake, { onNotification: (n) => seen.push(n) })
+    // Missing id + payload — must not throw, must not deliver.
+    fake.emit('notification', { userId: 'user-1', createdAt: 'now' })
+    fake.emit('notification', 'not json')
+    expect(seen).toEqual([])
+  })
+
+  it('removes its listeners and closes the underlying source on close()', () => {
+    const fake = makeFakeSource()
+    const handle = startStream(fake)
+    expect(fake.listenerCount('notification')).toBe(1)
+    expect(fake.listenerCount('ready')).toBe(1)
+    expect(fake.listenerCount('error')).toBe(1)
+    handle.close()
+    expect(fake.isClosed()).toBe(true)
+    // Second close() is a no-op — guards against double-unmount loops.
+    handle.close()
+    expect(fake.isClosed()).toBe(true)
+  })
+
+  it('returns a no-op handle when no EventSource is available', () => {
+    // No factory + no global EventSource (vitest jsdom env doesn't
+    // ship one). The subscriber must NOT throw — admin code must
+    // remain mountable in SSR / Node environments.
+    const handle = subscribeNotificationStream({
+      onNotification: () => undefined,
+      factory: () => null,
+    })
+    expect(() => handle.close()).not.toThrow()
+  })
+
+  it('forwards error events to onError without crashing the page', () => {
+    const fake = makeFakeSource()
+    const errors: Event[] = []
+    startStream(fake, { onError: (e) => errors.push(e) })
+    fake.emit('error', undefined)
+    expect(errors).toHaveLength(1)
+  })
+
+  it('builds the stream URL from getApiBase() so consumers with a custom prefix connect to the right host', () => {
+    // Custom factory inspects the URL it's handed. Verifies the
+    // subscriber composes /<base>/notifications/stream rather than
+    // hardcoding the production prefix.
+    const seen: string[] = []
+    subscribeNotificationStream({
+      onNotification: () => undefined,
+      factory: (url) => {
+        seen.push(url)
+        return null
+      },
+    })
+    expect(seen).toEqual(['/api/cms/notifications/stream'])
+  })
+})

package/src/__tests__/lib/slash-command.test.ts

@@ -0,0 +1,146 @@
+import { describe, it, expect } from 'vitest'
+import {
+  parseAiSlashCommand,
+  isAiSlashCommandInput,
+  orderedAiActions,
+} from '../../lib/slash-command.js'
+
+describe('parseAiSlashCommand', () => {
+  it('parses /ai rewrite <text>', () => {
+    expect(parseAiSlashCommand('/ai rewrite hello world')).toEqual({
+      action: 'rewrite',
+      text: 'hello world',
+    })
+  })
+
+  it('parses every canonical action', () => {
+    expect(parseAiSlashCommand('/ai expand foo')).toEqual({ action: 'expand', text: 'foo' })
+    expect(parseAiSlashCommand('/ai compress bar')).toEqual({ action: 'compress', text: 'bar' })
+    expect(parseAiSlashCommand('/ai proofread baz')).toEqual({ action: 'proofread', text: 'baz' })
+  })
+
+  it('is case-insensitive on both prefix and action', () => {
+    expect(parseAiSlashCommand('/AI Rewrite ALL CAPS')).toEqual({
+      action: 'rewrite',
+      text: 'ALL CAPS',
+    })
+    expect(parseAiSlashCommand('/Ai PROOFREAD x')).toEqual({ action: 'proofread', text: 'x' })
+  })
+
+  it('tolerates leading whitespace', () => {
+    expect(parseAiSlashCommand('   /ai rewrite x')).toEqual({ action: 'rewrite', text: 'x' })
+  })
+
+  it('returns empty text when nothing follows the action', () => {
+    expect(parseAiSlashCommand('/ai rewrite')).toEqual({ action: 'rewrite', text: '' })
+    expect(parseAiSlashCommand('/ai rewrite   ')).toEqual({ action: 'rewrite', text: '' })
+  })
+
+  it('trims surrounding whitespace from the payload', () => {
+    expect(parseAiSlashCommand('/ai rewrite   hello   ')).toEqual({
+      action: 'rewrite',
+      text: 'hello',
+    })
+  })
+
+  it('preserves interior whitespace in the payload', () => {
+    expect(parseAiSlashCommand('/ai rewrite hello   world')).toEqual({
+      action: 'rewrite',
+      text: 'hello   world',
+    })
+  })
+
+  it('returns null for unknown actions', () => {
+    expect(parseAiSlashCommand('/ai summarize foo')).toBeNull()
+    expect(parseAiSlashCommand('/ai delete foo')).toBeNull()
+  })
+
+  it('returns null for non-AI slash commands', () => {
+    expect(parseAiSlashCommand('/help')).toBeNull()
+    expect(parseAiSlashCommand('/admin x')).toBeNull()
+  })
+
+  it('returns null for plain input without a slash', () => {
+    expect(parseAiSlashCommand('ai rewrite hello')).toBeNull()
+    expect(parseAiSlashCommand('hello world')).toBeNull()
+    expect(parseAiSlashCommand('')).toBeNull()
+  })
+
+  it('returns null when /ai is the entire input', () => {
+    expect(parseAiSlashCommand('/ai')).toBeNull()
+    expect(parseAiSlashCommand('/ai   ')).toBeNull()
+  })
+
+  it('returns null for non-string inputs', () => {
+    // @ts-expect-error — runtime guard
+    expect(parseAiSlashCommand(null)).toBeNull()
+    // @ts-expect-error — runtime guard
+    expect(parseAiSlashCommand(undefined)).toBeNull()
+    // @ts-expect-error — runtime guard
+    expect(parseAiSlashCommand(42)).toBeNull()
+  })
+})
+
+describe('isAiSlashCommandInput', () => {
+  it('returns true while the user is mid-typing the prefix', () => {
+    expect(isAiSlashCommandInput('/')).toBe(true)
+    expect(isAiSlashCommandInput('/a')).toBe(true)
+    expect(isAiSlashCommandInput('/ai')).toBe(true)
+    expect(isAiSlashCommandInput('/ai ')).toBe(true)
+    expect(isAiSlashCommandInput('/ai re')).toBe(true)
+    expect(isAiSlashCommandInput('/ai rewrite something')).toBe(true)
+  })
+
+  it('returns true when the user typed AI with capitals', () => {
+    expect(isAiSlashCommandInput('/AI')).toBe(true)
+    expect(isAiSlashCommandInput('/Ai rew')).toBe(true)
+  })
+
+  it('returns false for ordinary text', () => {
+    expect(isAiSlashCommandInput('')).toBe(false)
+    expect(isAiSlashCommandInput('hello')).toBe(false)
+    expect(isAiSlashCommandInput('ai rewrite')).toBe(false)
+  })
+
+  it('returns false for non-AI slash inputs', () => {
+    expect(isAiSlashCommandInput('/help')).toBe(false)
+    expect(isAiSlashCommandInput('/bots')).toBe(false)
+  })
+})
+
+describe('orderedAiActions', () => {
+  it('returns the canonical order when nothing is parsed', () => {
+    expect(orderedAiActions('')).toEqual(['rewrite', 'expand', 'compress', 'proofread'])
+    expect(orderedAiActions('/ai')).toEqual(['rewrite', 'expand', 'compress', 'proofread'])
+  })
+
+  it('hoists the matched action to the front', () => {
+    expect(orderedAiActions('/ai compress foo')).toEqual([
+      'compress',
+      'rewrite',
+      'expand',
+      'proofread',
+    ])
+    expect(orderedAiActions('/ai proofread bar')).toEqual([
+      'proofread',
+      'rewrite',
+      'expand',
+      'compress',
+    ])
+  })
+
+  it('returns canonical order for an unknown action', () => {
+    expect(orderedAiActions('/ai summarize foo')).toEqual([
+      'rewrite',
+      'expand',
+      'compress',
+      'proofread',
+    ])
+  })
+
+  it('contains every canonical action exactly once', () => {
+    const result = orderedAiActions('/ai rewrite x')
+    expect(result.length).toBe(4)
+    expect(new Set(result).size).toBe(4)
+  })
+})

package/src/components/AICoauthorBubbleMenu.tsx

@@ -0,0 +1,187 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+import { BubbleMenu, type Editor } from '@tiptap/react'
+import { Loader2, Maximize2, Minimize2, Sparkles, SpellCheck, Wand2 } from 'lucide-react'
+import { toast } from 'sonner'
+import {
+  COAUTHOR_ACTIONS,
+  coauthorActionLabel,
+  coauthorText,
+  type CoauthorAction,
+  type ProofreadChange,
+} from '../lib/coauthor-client.js'
+import { CoauthorResultPopover } from './CoauthorResultPopover.js'
+
+export interface AICoauthorBubbleMenuProps {
+  editor: Editor | null
+}
+
+const ACTION_ICONS: Record<CoauthorAction, typeof Sparkles> = {
+  rewrite: Wand2,
+  expand: Maximize2,
+  compress: Minimize2,
+  proofread: SpellCheck,
+}
+
+interface ResultState {
+  open: boolean
+  loading: boolean
+  action: CoauthorAction
+  before: string
+  after: string
+  error?: string
+  changes?: ProofreadChange[]
+  from: number
+  to: number
+}
+
+const INITIAL: ResultState = {
+  open: false,
+  loading: false,
+  action: 'rewrite',
+  before: '',
+  after: '',
+  from: 0,
+  to: 0,
+}
+
+/**
+ * Floating menu that appears above the current text selection inside the
+ * TipTap editor. Renders four AI co-author actions
+ * (rewrite / expand / compress / proofread) and hands the selected text to
+ * `/ai/coauthor`. When the server returns, opens the shared
+ * `CoauthorResultPopover` with a before/after diff and Apply / Copy /
+ * Discard actions.
+ *
+ * The popover, not the bubble itself, holds the result — by design — so
+ * the user can scroll the editor, see the source of truth, and explicitly
+ * choose what to do with the AI output.
+ */
+export function AICoauthorBubbleMenu({ editor }: AICoauthorBubbleMenuProps) {
+  const [state, setState] = useState<ResultState>(INITIAL)
+  const [pendingAction, setPendingAction] = useState<CoauthorAction | null>(null)
+
+  const runAction = useCallback(
+    async (action: CoauthorAction) => {
+      if (!editor) return
+      const { from, to, empty } = editor.state.selection
+      if (empty) return
+      const before = editor.state.doc.textBetween(from, to, '\n', '\n')
+      if (!before.trim()) {
+        toast.error('Select text to use the AI co-author.')
+        return
+      }
+
+      setPendingAction(action)
+      setState({
+        open: true,
+        loading: true,
+        action,
+        before,
+        after: '',
+        from,
+        to,
+      })
+
+      const outcome = await coauthorText(action, before)
+      if (!outcome.ok) {
+        setState((prev) => ({ ...prev, loading: false, error: outcome.error }))
+        toast.error(outcome.error)
+        setPendingAction(null)
+        return
+      }
+
+      setState((prev) => ({
+        ...prev,
+        loading: false,
+        after: outcome.result.text,
+        changes: outcome.result.changes,
+        error: undefined,
+      }))
+      setPendingAction(null)
+    },
+    [editor],
+  )
+
+  const handleApply = useCallback(() => {
+    if (!editor) return
+    editor.chain().focus().insertContentAt({ from: state.from, to: state.to }, state.after).run()
+    toast.success(`${coauthorActionLabel(state.action)} applied.`)
+    setState(INITIAL)
+  }, [editor, state.action, state.from, state.to, state.after])
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(state.after)
+      toast.success('Copied to clipboard.')
+    } catch {
+      toast.error('Clipboard unavailable — copy the text manually.')
+    }
+  }, [state.after])
+
+  const handleDiscard = useCallback(() => {
+    setState(INITIAL)
+    setPendingAction(null)
+  }, [])
+
+  if (!editor) return null
+
+  return (
+    <>
+      <BubbleMenu
+        editor={editor}
+        shouldShow={({ editor: ed, from, to }) => {
+          if (state.open) return false
+          if (from === to) return false
+          if (!ed.isEditable) return false
+          return true
+        }}
+        tippyOptions={{ duration: 100, placement: 'top' }}
+        className="flex items-center gap-0.5 rounded-md border border-gray-200 bg-white p-1 shadow-md"
+      >
+        <span className="flex items-center gap-1 px-1.5 text-xs font-medium text-gray-500">
+          <Sparkles className="h-3 w-3" aria-hidden />
+          AI
+        </span>
+        <span className="mx-0.5 h-4 w-px bg-gray-200" />
+        {COAUTHOR_ACTIONS.map((id) => {
+          const Icon = ACTION_ICONS[id]
+          const isPending = pendingAction === id
+          const anyPending = pendingAction !== null
+          return (
+            <button
+              key={id}
+              type="button"
+              onClick={() => runAction(id)}
+              disabled={anyPending}
+              className="flex items-center gap-1 rounded px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
+              title={`AI ${coauthorActionLabel(id)}`}
+            >
+              {isPending ? (
+                <Loader2 className="h-3 w-3 animate-spin" aria-hidden />
+              ) : (
+                <Icon className="h-3 w-3" aria-hidden />
+              )}
+              {coauthorActionLabel(id)}
+            </button>
+          )
+        })}
+      </BubbleMenu>
+
+      <CoauthorResultPopover
+        open={state.open}
+        loading={state.loading}
+        action={state.action}
+        before={state.before}
+        after={state.after}
+        error={state.error}
+        changes={state.changes}
+        applyLabel="Replace selection"
+        onApply={handleApply}
+        onCopy={handleCopy}
+        onDiscard={handleDiscard}
+      />
+    </>
+  )
+}