@agimon-ai/doompi-author 0.0.1-alpha.10

package/src/web/components/AuthorGridOverlay.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useRef } from 'react';
+
+import {
+  AUTHOR_GRID_COLUMNS,
+  AUTHOR_GRID_SIZE,
+  clearAuthorGridGeometry,
+  updateAuthorGridGeometry,
+} from '../lib/authorGrid';
+import type { AuthorWorkspaceDocument } from '../stores/authorWorkspaceStore';
+
+export function autonomousVoiceGridVisible(statuses: Readonly<Record<string, string>>): boolean {
+  return statuses['doom-voice']?.trimStart().startsWith('voice auto:') === true;
+}
+
+export function AuthorGridOverlay({
+  sessionId,
+  document,
+  visible,
+}: {
+  sessionId: string;
+  document: AuthorWorkspaceDocument;
+  visible: boolean;
+}) {
+  const host = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const element = host.current?.parentElement;
+    if (!visible || element === null || element === undefined) {
+      clearAuthorGridGeometry(sessionId);
+      return;
+    }
+    const publish = () => {
+      const bounds = element.getBoundingClientRect();
+      updateAuthorGridGeometry(sessionId, {
+        documentPath: document.path,
+        revision: document.version,
+        sourceSha256: document.sourceSha256,
+        viewport: {
+          width: bounds.width,
+          height: bounds.height,
+          originX: bounds.left,
+          originY: bounds.top,
+          scrollX: element.scrollLeft,
+          scrollY: element.scrollTop,
+          zoom: window.devicePixelRatio,
+        },
+      });
+    };
+    publish();
+    const observer = new ResizeObserver(publish);
+    observer.observe(element);
+    element.addEventListener('scroll', publish, { passive: true, capture: true });
+    window.addEventListener('focus', publish);
+    return () => {
+      observer.disconnect();
+      element.removeEventListener('scroll', publish, true);
+      window.removeEventListener('focus', publish);
+      clearAuthorGridGeometry(sessionId);
+    };
+  }, [document.path, document.sourceSha256, document.version, sessionId, visible]);
+  if (!visible) return null;
+  return (
+    <div
+      ref={host}
+      data-testid="author-grid"
+      aria-hidden="true"
+      className="pointer-events-none absolute inset-0 z-20 grid grid-cols-8 grid-rows-8"
+    >
+      {Array.from({ length: AUTHOR_GRID_SIZE * AUTHOR_GRID_SIZE }, (_, index) => {
+        const column = index % AUTHOR_GRID_SIZE;
+        const row = Math.floor(index / AUTHOR_GRID_SIZE);
+        return (
+          <div key={index} className="relative border border-doom-red/25">
+            <span className="absolute left-1 top-0.5 rounded bg-doom-deep/80 px-1 text-2xs font-bold text-doom-red">
+              {AUTHOR_GRID_COLUMNS[column]}
+              {row + 1}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/web/components/AuthorMediaPreview.tsx

@@ -0,0 +1,42 @@
+import { MediaPreview } from '@agimon-ai/doompi-web-components';
+import { useEffect, useState } from 'react';
+
+import { authorSessionFileUrl } from '../api/authorFiles';
+import { loadAuthorMedia } from '../api/authorMedia';
+
+/** Viewing an attachment does not require enabling authoring or its editing tools. */
+export function AuthorMediaPreview({ sessionId, path }: { sessionId: string; path: string }) {
+  const source = authorSessionFileUrl(sessionId, path);
+  const [loaded, setLoaded] = useState<{ source: string; url?: string; error?: string }>();
+  useEffect(() => {
+    const controller = new AbortController();
+    let dispose: (() => void) | undefined;
+    void loadAuthorMedia(source, controller.signal)
+      .then((asset) => {
+        if (controller.signal.aborted) {
+          asset.dispose();
+          return;
+        }
+        dispose = () => asset.dispose();
+        setLoaded({ source, url: asset.url });
+      })
+      .catch((error: unknown) => {
+        if (!controller.signal.aborted)
+          setLoaded({ source, error: error instanceof Error ? error.message : String(error) });
+      });
+    return () => {
+      controller.abort();
+      dispose?.();
+    };
+  }, [source]);
+  const current = loaded?.source === source ? loaded : undefined;
+  return (
+    <div className="min-h-0 flex-1 overflow-auto p-4">
+      {current?.url === undefined ? (
+        <p role={current?.error ? 'alert' : 'status'}>{current?.error ?? 'Loading media...'}</p>
+      ) : (
+        <MediaPreview src={current.url} path={path} data-testid="author-media-preview" />
+      )}
+    </div>
+  );
+}

package/src/web/components/AuthorMediaView.tsx

@@ -0,0 +1,357 @@
+import {
+  MediaPreview,
+  type MediaPlaybackState,
+  type MediaPreviewController,
+  type PdfPreviewController,
+} from '@agimon-ai/doompi-web-components';
+import { useEffect, useRef, useState, type PointerEvent } from 'react';
+
+import { loadAuthorMedia } from '../api/authorMedia';
+import { registerAuthorGridResolver } from '../lib/authorGrid';
+import { normalizedAuthorRectangle } from '../lib/authorRegions';
+import type { AuthorDisplayedRegion, AuthorNativeAnchor, AuthorToolMode } from '../lib/authorViewportTypes';
+import {
+  authorSessionWorkspace,
+  setAuthorRegionCandidate,
+  setAuthorToolMode,
+  type AuthorSessionWorkspace,
+  type AuthorWorkspaceDocument,
+} from '../stores/authorWorkspaceStore';
+import { AuthorVideoControls } from './AuthorVideoControls';
+
+/** Marks source media. Native playback and page controls remain usable in select mode. */
+export function AuthorMediaView({
+  sessionId,
+  document: source,
+  activeTool,
+  displayedRegions,
+  pendingCandidate = false,
+  seekRequest,
+}: {
+  sessionId: string;
+  document: AuthorWorkspaceDocument;
+  activeTool: AuthorToolMode;
+  displayedRegions: readonly AuthorDisplayedRegion[];
+  pendingCandidate?: boolean;
+  seekRequest?: AuthorSessionWorkspace['videoSeekRequest'];
+}) {
+  const host = useRef<HTMLDivElement>(null);
+  const image = useRef<HTMLImageElement>(null);
+  const video = useRef<MediaPreviewController>(null);
+  const pdf = useRef<PdfPreviewController>(null);
+  const start = useRef<
+    { x: number; y: number; element: HTMLImageElement | HTMLVideoElement | HTMLCanvasElement } | undefined
+  >(undefined);
+  const [playback, setPlayback] = useState<MediaPlaybackState>({ playing: false, currentTime: 0, duration: 0 });
+  const [frameReady, setFrameReady] = useState(false);
+  const [selection, setSelection] = useState<{
+    path: string;
+    rect: NonNullable<ReturnType<typeof normalizedAuthorRectangle>>;
+  }>();
+  const [error, setError] = useState<string>();
+  const [media, setMedia] = useState<{ source: string; url: string }>();
+  const mediaUrl = media?.source === source.mediaUrl ? media?.url : undefined;
+  useEffect(() => {
+    if (source.mediaUrl === undefined) return;
+    const input = source.mediaUrl;
+    const controller = new AbortController();
+    let dispose: (() => void) | undefined;
+    setError(undefined);
+    void loadAuthorMedia(input, controller.signal)
+      .then((asset) => {
+        if (controller.signal.aborted) {
+          asset.dispose();
+          return;
+        }
+        dispose = () => asset.dispose();
+        setMedia({ source: input, url: asset.url });
+      })
+      .catch((cause: unknown) => {
+        if (!controller.signal.aborted) setError(cause instanceof Error ? cause.message : String(cause));
+      });
+    return () => {
+      controller.abort();
+      dispose?.();
+    };
+  }, [source.mediaUrl]);
+  const seek = (seconds: number) => {
+    if (authorSessionWorkspace(sessionId).candidate || !Number.isFinite(seconds)) return;
+    const player = video.current;
+    if (!player) return;
+    player.pause();
+    setAuthorToolMode(sessionId, 'select');
+    setSelection(undefined);
+    if (player.getState().currentTime === seconds) return;
+    setFrameReady(false);
+    player.seek(seconds);
+  };
+  useEffect(() => {
+    if (
+      seekRequest?.path === source.path &&
+      seekRequest.generation === authorSessionWorkspace(sessionId).focusedDocument?.generation
+    ) {
+      seek(seekRequest.timeSeconds);
+    }
+  }, [seekRequest]);
+  useEffect(() => {
+    if (!pendingCandidate && start.current === undefined) setSelection(undefined);
+  }, [pendingCandidate]);
+  useEffect(
+    () =>
+      registerAuthorGridResolver(sessionId, (cell, geometry) => {
+        const target = image.current;
+        if (source.kind !== 'image' || target === null || target.naturalWidth === 0 || target.naturalHeight === 0)
+          return undefined;
+        const { originX = 0, originY = 0, width, height } = geometry.viewport;
+        const cellBounds = {
+          left: originX + cell.rect.x * width,
+          top: originY + cell.rect.y * height,
+          right: originX + (cell.rect.x + cell.rect.width) * width,
+          bottom: originY + (cell.rect.y + cell.rect.height) * height,
+        };
+        const bounds = target.getBoundingClientRect();
+        const left = Math.max(bounds.left, cellBounds.left);
+        const top = Math.max(bounds.top, cellBounds.top);
+        const right = Math.min(bounds.right, cellBounds.right);
+        const bottom = Math.min(bounds.bottom, cellBounds.bottom);
+        if (right <= left || bottom <= top || bounds.width <= 0 || bounds.height <= 0) return undefined;
+        return {
+          anchor: {
+            kind: 'image-rect',
+            rect: {
+              x: (left - bounds.left) / bounds.width,
+              y: (top - bounds.top) / bounds.height,
+              width: (right - left) / bounds.width,
+              height: (bottom - top) / bounds.height,
+            },
+            naturalWidth: target.naturalWidth,
+            naturalHeight: target.naturalHeight,
+          },
+        };
+      }),
+    [sessionId, source.kind, source.path, source.version],
+  );
+  const mark = async (event: PointerEvent<HTMLDivElement>) => {
+    const drag = start.current;
+    start.current = undefined;
+    if (!drag) return;
+    const bounds = drag.element.getBoundingClientRect();
+    const rect = normalizedAuthorRectangle(bounds, {
+      left: drag.x,
+      top: drag.y,
+      right: event.clientX,
+      bottom: event.clientY,
+    });
+    if (!rect) return;
+    setSelection({ path: source.path, rect });
+    const focused = authorSessionWorkspace(sessionId).focusedDocument;
+    if (!focused || focused.path !== source.path) return;
+    let anchor: AuthorNativeAnchor;
+    let blob: Blob | null = null;
+    let thumbnailUrl: string | undefined;
+    try {
+      if (drag.element instanceof HTMLImageElement) {
+        const image = drag.element;
+        if (!image.naturalWidth || !image.naturalHeight) throw new Error('Image is not ready.');
+        anchor = { kind: 'image-rect', rect, naturalWidth: image.naturalWidth, naturalHeight: image.naturalHeight };
+        const canvas = document.createElement('canvas');
+        const scale = Math.min(1, 1600 / Math.max(image.naturalWidth, image.naturalHeight));
+        canvas.width = Math.max(1, Math.round(image.naturalWidth * scale));
+        canvas.height = Math.max(1, Math.round(image.naturalHeight * scale));
+        const context = canvas.getContext('2d');
+        if (!context) throw new Error('Canvas is unavailable.');
+        context.drawImage(image, 0, 0, canvas.width, canvas.height);
+        blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, 'image/png'));
+      } else if (source.kind === 'pdf') {
+        const page = pdf.current?.getState();
+        if (!page?.sourceWidth) throw new Error('PDF page is not ready.');
+        anchor = { kind: 'pdf-page-rect', page: page.page, rect };
+        blob = await pdf.current!.capturePage();
+      } else {
+        const frame = await video.current?.captureFrame();
+        if (!frame) throw new Error('Video frame is not ready.');
+        anchor = {
+          kind: 'video-time-rect',
+          rect,
+          timeSeconds: frame.timeSeconds,
+          intrinsicWidth: frame.width,
+          intrinsicHeight: frame.height,
+        };
+        blob = frame.blob;
+      }
+      if (!blob) throw new Error('Unable to capture selected media.');
+      if (authorSessionWorkspace(sessionId).focusedDocument?.generation !== focused.generation) return;
+      thumbnailUrl = URL.createObjectURL(blob);
+      setAuthorRegionCandidate(sessionId, {
+        documentPath: source.path,
+        revision: source.version,
+        sourceSha256: source.sourceSha256,
+        anchor,
+        viewport: { width: bounds.width, height: bounds.height },
+        thumbnailUrl,
+        createdAt: Date.now(),
+      });
+      setError(undefined);
+    } catch (reason) {
+      if (thumbnailUrl) URL.revokeObjectURL(thumbnailUrl);
+      setError(reason instanceof Error ? reason.message : String(reason));
+    }
+  };
+  const selected = selection?.path === source.path ? selection.rect : undefined;
+  const selectionOverlay =
+    selected === undefined ? null : (
+      <div
+        data-testid="author-media-selection"
+        className="pointer-events-none absolute border-2 border-doom-red bg-doom-red/10"
+        style={{
+          left: `${selected.x * 100}%`,
+          top: `${selected.y * 100}%`,
+          width: `${selected.width * 100}%`,
+          height: `${selected.height * 100}%`,
+        }}
+      />
+    );
+  return (
+    <div
+      ref={host}
+      className="min-h-0 flex-1 overflow-auto p-4"
+      style={{
+        touchAction: activeTool === 'select' ? 'auto' : 'none',
+        cursor: activeTool === 'select' ? undefined : 'crosshair',
+      }}
+      onPointerMove={(event) => {
+        const drag = start.current;
+        if (drag === undefined) return;
+        const rect = normalizedAuthorRectangle(drag.element.getBoundingClientRect(), {
+          left: drag.x,
+          top: drag.y,
+          right: event.clientX,
+          bottom: event.clientY,
+        });
+        setSelection(rect === null ? undefined : { path: source.path, rect });
+      }}
+      onPointerDownCapture={(event) => {
+        if (activeTool === 'select' || event.button !== 0 || pendingCandidate) return;
+        const element = event.target;
+        if (
+          !(
+            element instanceof HTMLImageElement ||
+            element instanceof HTMLVideoElement ||
+            element instanceof HTMLCanvasElement
+          )
+        )
+          return;
+        event.preventDefault();
+        setSelection(undefined);
+        if (element instanceof HTMLVideoElement) {
+          if (video.current?.isFrameReady?.() === false) {
+            setError('Wait for the selected frame to finish loading.');
+            return;
+          }
+          video.current?.pause();
+        }
+        start.current = { x: event.clientX, y: event.clientY, element };
+        event.currentTarget.setPointerCapture(event.pointerId);
+      }}
+      onPointerUp={(event) => void mark(event)}
+      onPointerCancel={() => {
+        start.current = undefined;
+        setSelection(undefined);
+      }}
+    >
+      {mediaUrl === undefined ? (
+        <p className="text-doom-dim">{error === undefined ? 'Loading media...' : 'Media unavailable.'}</p>
+      ) : source.kind === 'image' ? (
+        <div className="relative inline-block max-w-full">
+          <img ref={image} src={mediaUrl} alt={source.path} draggable={false} className="block max-w-full" />
+          {selectionOverlay}
+          {displayedRegions.flatMap(({ ordinal, region }) => {
+            if (region.anchor.kind !== 'image-rect') return [];
+            const { rect } = region.anchor;
+            return [
+              <div
+                key={region.id}
+                data-author-region={ordinal}
+                className="pointer-events-none absolute border border-doom-yellow bg-doom-yellow/10"
+                style={{
+                  left: `${String(rect.x * 100)}%`,
+                  top: `${String(rect.y * 100)}%`,
+                  width: `${String(rect.width * 100)}%`,
+                  height: `${String(rect.height * 100)}%`,
+                }}
+              >
+                <span className="absolute -left-2 -top-2 flex h-4 min-w-4 items-center justify-center rounded-full bg-doom-yellow px-1 text-2xs font-bold text-doom-deep">
+                  {ordinal}
+                </span>
+              </div>,
+            ];
+          })}
+        </div>
+      ) : (
+        <div className="relative w-fit max-w-full">
+          <MediaPreview
+            src={mediaUrl}
+            path={source.path}
+            kind={source.kind === 'pdf' ? 'pdf' : source.kind === 'video' ? 'video' : 'download'}
+            controllerRef={video}
+            pdfControllerRef={pdf}
+            data-testid="author-media"
+            videoControls={false}
+            onPlaybackStateChange={(state) => {
+              setPlayback(state);
+              setFrameReady(video.current?.isFrameReady() ?? false);
+              if (state.playing) setSelection(undefined);
+            }}
+          />
+          {source.kind === 'video' ? selectionOverlay : null}
+          {source.kind === 'video'
+            ? displayedRegions.map(({ ordinal, region }) => {
+                if (
+                  region.anchor.kind !== 'video-time-rect' ||
+                  playback.playing ||
+                  Math.abs(region.anchor.timeSeconds - playback.currentTime) > 0.1
+                )
+                  return null;
+                const { rect } = region.anchor;
+                return (
+                  <div
+                    key={region.id}
+                    data-author-region={ordinal}
+                    className="pointer-events-none absolute border border-doom-yellow bg-doom-yellow/10"
+                    style={{
+                      left: `${rect.x * 100}%`,
+                      top: `${rect.y * 100}%`,
+                      width: `${rect.width * 100}%`,
+                      height: `${rect.height * 100}%`,
+                    }}
+                  >
+                    <span className="bg-doom-yellow text-doom-deep">{ordinal}</span>
+                  </div>
+                );
+              })
+            : null}
+        </div>
+      )}
+      {source.kind === 'video' ? (
+        <AuthorVideoControls
+          playback={playback}
+          ready={frameReady}
+          locked={pendingCandidate}
+          marking={activeTool === 'mark'}
+          onSeek={seek}
+          onToggle={() => {
+            setAuthorToolMode(sessionId, 'select');
+            setSelection(undefined);
+            if (playback.playing) video.current?.pause();
+            else void video.current?.play().catch((reason: unknown) => setError(String(reason)));
+          }}
+          onAnnotate={() => {
+            video.current?.pause();
+            setAuthorToolMode(sessionId, 'mark');
+          }}
+        />
+      ) : null}
+      {error ? <output className="text-base text-doom-red">{error}</output> : null}
+    </div>
+  );
+}

package/src/web/components/AuthorPanel.tsx

@@ -0,0 +1,102 @@
+import type { WebPluginSlotProps } from '@agimon-ai/doompi-core/web';
+import { Button } from '@agimon-ai/doompi-web-components';
+import { useStore } from '@tanstack/react-store';
+import { useState } from 'react';
+
+import { authorGrid } from '../lib/authorGrid';
+import { authorCaptureContext, createAuthorCapturePacket, multiRegionCaptureProvider } from '../stores/authorCapture';
+import { authorWorkspace } from '../stores/authorWorkspaceStore';
+import { autonomousVoiceGridVisible } from './AuthorGridOverlay';
+import { AuthorRegionDrafts } from './AuthorRegionDrafts';
+import { AuthorRequestLog } from './AuthorRequestLog';
+import { AuthorToolPalette } from './AuthorToolPalette';
+
+export function AuthorPanel({ sessionId, activeMinorModes, submitCapture, statuses }: WebPluginSlotProps) {
+  const [captureStatus, setCaptureStatus] = useState<string>();
+  const [capturing, setCapturing] = useState(false);
+  const documents = useStore(authorWorkspace.store, (state) => {
+    if (sessionId === null) return [];
+    const prefix = `${sessionId}\n`;
+    return Object.entries(state.documents)
+      .filter(([key]) => key.startsWith(prefix))
+      .map(([, document]) => document);
+  });
+  const workspace = useStore(authorWorkspace.store, (state) =>
+    sessionId === null ? undefined : state.sessions[sessionId],
+  );
+  const grid = useStore(authorGrid.store, (state) => (sessionId === null ? undefined : state.sessions[sessionId]));
+  const focused = documents.find((document) => document.path === workspace?.focusedDocument?.path);
+  if (!activeMinorModes?.includes('author') || focused === undefined) return null;
+  return (
+    <section data-testid="author-panel" className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto p-3">
+      {sessionId !== null && workspace !== undefined && focused !== undefined ? (
+        <>
+          <h2 className="text-base font-semibold text-doom-text">Annotations</h2>
+          <p className="text-base leading-normal text-doom-dim sm:text-sm">
+            Select a region, add a comment, then submit here. Requests queue while the agent is working.
+          </p>
+          {focused.kind === 'video' ? (
+            <p className="text-base text-doom-dim sm:text-sm">
+              Annotations reference video frames. They do not save changes to the source video.
+            </p>
+          ) : null}
+          <AuthorToolPalette sessionId={sessionId} kind={focused.kind} activeTool={workspace.activeTool} />
+          {autonomousVoiceGridVisible(statuses) && grid !== undefined ? (
+            <div
+              data-testid="author-grid-snapshot"
+              className="rounded border border-doom-red/40 bg-doom-red/5 p-2 text-base text-doom-dim"
+            >
+              <strong className="text-doom-red">VOICE GRID A1–H8</strong>
+              <p className="mt-1 truncate">token {grid.geometryToken}</p>
+            </div>
+          ) : null}
+          <AuthorRegionDrafts key={focused.path} sessionId={sessionId} workspace={workspace} />
+          {workspace.regions.length > 0 ? (
+            <div className="space-y-1.5 border-b border-doom-border-soft pb-3">
+              <Button
+                className="min-h-11 min-w-11 w-full text-base [@media(pointer:fine)]:min-h-8 sm:text-sm"
+                variant="outline"
+                data-testid="author-attach-capture"
+                disabled={capturing || workspace.candidate !== undefined || submitCapture === undefined}
+                onClick={async () => {
+                  if (capturing || workspace.candidate || submitCapture === undefined) return;
+                  setCapturing(true);
+                  setCaptureStatus('Submitting annotations…');
+                  try {
+                    const packet = createAuthorCapturePacket(
+                      crypto.randomUUID(),
+                      Date.now(),
+                      focused,
+                      workspace.regions,
+                    );
+                    const image = await multiRegionCaptureProvider(workspace.regions).capture();
+                    await submitCapture({ ...image, context: authorCaptureContext(packet) });
+                    setCaptureStatus('Request submitted. You can keep annotating here.');
+                  } catch (reason) {
+                    setCaptureStatus(reason instanceof Error ? reason.message : String(reason));
+                  } finally {
+                    setCapturing(false);
+                  }
+                }}
+              >
+                {capturing
+                  ? 'Submitting…'
+                  : `Submit ${workspace.regions.length} annotation${workspace.regions.length === 1 ? '' : 's'}`}
+              </Button>
+              {workspace.candidate ? (
+                <p className="text-base text-doom-dim sm:text-sm">
+                  Add or discard the current selection before submitting.
+                </p>
+              ) : null}
+            </div>
+          ) : null}
+          {submitCapture === undefined ? (
+            <output className="text-sm text-doom-red">Submission unavailable. Reload to update the app.</output>
+          ) : null}
+          {captureStatus ? <output className="block text-sm text-doom-dim">{captureStatus}</output> : null}
+        </>
+      ) : null}
+      <AuthorRequestLog requests={workspace?.requests ?? []} />
+    </section>
+  );
+}

package/src/web/components/AuthorRegionDrafts.tsx

@@ -0,0 +1,103 @@
+import { Button } from '@agimon-ai/doompi-web-components';
+import { useState } from 'react';
+
+import type { AuthorSessionWorkspace } from '../stores/authorWorkspaceStore';
+import {
+  commitAuthorRegion,
+  removeAuthorRegion,
+  seekAuthorVideo,
+  setAuthorRegionCandidate,
+} from '../stores/authorWorkspaceStore';
+
+export function AuthorRegionDrafts({ sessionId, workspace }: { sessionId: string; workspace: AuthorSessionWorkspace }) {
+  const [comment, setComment] = useState('');
+  const [error, setError] = useState<string>();
+  const add = () => {
+    try {
+      commitAuthorRegion(sessionId, comment);
+      setComment('');
+      setError(undefined);
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : String(reason));
+    }
+  };
+  if (!workspace.candidate && workspace.regions.length === 0) return null;
+  return (
+    <section className="space-y-2" data-testid="author-region-drafts">
+      {workspace.candidate ? (
+        <>
+          <h3 className="text-base font-semibold text-doom-text">Current selection</h3>
+          <p className="text-base text-doom-dim sm:text-sm">Add a comment to keep this selection as an unsent draft.</p>
+          {workspace.candidate.anchor.kind === 'video-time-rect' ? (
+            <p className="text-base text-doom-dim sm:text-sm">
+              Frame at {workspace.candidate.anchor.timeSeconds.toFixed(3)}s
+            </p>
+          ) : null}
+          <textarea
+            aria-label="Region comment"
+            value={comment}
+            onChange={(event) => setComment(event.target.value)}
+            placeholder="What should change here?"
+            rows={3}
+            className="min-h-11 w-full resize-y rounded border border-doom-border bg-doom-deep p-2 text-lg leading-normal text-doom-text focus:border-doom-red focus:outline-none sm:text-sm"
+          />
+          <Button
+            className="min-h-11 min-w-11 text-base [@media(pointer:fine)]:min-h-8 sm:text-sm"
+            variant="outline"
+            onClick={add}
+            disabled={!workspace.candidate || !comment.trim() || workspace.regions.length >= 16}
+          >
+            add region
+          </Button>
+          <Button
+            variant="ghost"
+            className="min-h-11 min-w-11 text-base [@media(pointer:fine)]:min-h-8 sm:text-sm"
+            onClick={() => {
+              setAuthorRegionCandidate(sessionId, undefined);
+              setComment('');
+              setError(undefined);
+            }}
+          >
+            Discard selection
+          </Button>
+        </>
+      ) : null}
+      {error ? <output className="block text-base text-doom-red">{error}</output> : null}
+      {workspace.regions.length > 0 ? (
+        <h3 className="text-base font-semibold text-doom-text">Unsent drafts ({workspace.regions.length})</h3>
+      ) : null}
+      <ol className="space-y-2">
+        {workspace.regions.map((region, index) => (
+          <li
+            key={region.id}
+            className="rounded border border-doom-border bg-doom-panel p-2 text-base leading-normal text-doom-text sm:text-sm"
+          >
+            <span>
+              ({index + 1}) {region.comment}
+            </span>
+            {region.anchor.kind === 'video-time-rect' ? (
+              <Button
+                variant="outline"
+                className="min-h-11 min-w-11 text-base [@media(pointer:fine)]:min-h-8 sm:text-sm"
+                disabled={workspace.candidate !== undefined}
+                onClick={() => {
+                  if (region.anchor.kind === 'video-time-rect') seekAuthorVideo(sessionId, region.anchor.timeSeconds);
+                }}
+              >
+                Go to {region.anchor.timeSeconds.toFixed(3)}s
+              </Button>
+            ) : null}
+            <Button
+              className="min-h-11 min-w-11 text-base [@media(pointer:fine)]:min-h-8 sm:text-sm"
+              variant="ghost"
+              aria-label={`Remove region ${index + 1}`}
+              onClick={() => removeAuthorRegion(sessionId, region.id)}
+            >
+              remove
+            </Button>
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+}