@agimon-ai/doompi-author 0.0.1-alpha.2 → 0.0.1-alpha.21

package/src/web/components/AuthorMediaView.tsx

@@ -1,356 +0,0 @@
-import {
-  MediaPreview,
-  type MediaPlaybackState,
-  type MediaPreviewController,
-  type PdfPreviewController,
-} from '@agimon-ai/doompi-web-components';
-import { useEffect, useRef, useState, type PointerEvent } from 'react';
-import { AuthorVideoControls } from './AuthorVideoControls.tsx';
-import { loadAuthorMedia } from '../api/authorMedia.ts';
-import { registerAuthorGridResolver } from '../lib/authorGrid.ts';
-import { normalizedAuthorRectangle } from '../lib/authorRegions.ts';
-import type { AuthorDisplayedRegion, AuthorNativeAnchor, AuthorToolMode } from '../lib/authorViewportTypes.ts';
-import {
-  authorSessionWorkspace,
-  setAuthorRegionCandidate,
-  setAuthorToolMode,
-  type AuthorSessionWorkspace,
-  type AuthorWorkspaceDocument,
-} from '../stores/authorWorkspaceStore.ts';
-
-/** 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-[9px] 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-sm text-doom-red">{error}</output> : null}
-    </div>
-  );
-}

package/src/web/components/AuthorPanel.tsx

@@ -1,105 +0,0 @@
-import { Button } from '@agimon-ai/doompi-web-components';
-import type { WebPluginSlotProps } from '@agimon-ai/doompi-web-contracts';
-import { useStore } from '@tanstack/react-store';
-import { useState } from 'react';
-import {
-  authorCaptureContext,
-  createAuthorCapturePacket,
-  multiRegionCaptureProvider,
-} from '../stores/authorCapture.ts';
-import { authorGrid } from '../lib/authorGrid.ts';
-import { autonomousVoiceGridVisible } from './AuthorGridOverlay.tsx';
-import { authorWorkspace } from '../stores/authorWorkspaceStore.ts';
-import { AuthorToolPalette } from './AuthorToolPalette.tsx';
-import { AuthorRegionDrafts } from './AuthorRegionDrafts.tsx';
-import { AuthorRequestLog } from './AuthorRequestLog.tsx';
-
-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-sm font-semibold text-doom-text">Annotations</h2>
-          <p className="text-sm leading-normal text-doom-dim sm:text-xs">
-            Select a region, add a comment, then submit here. Requests queue while the agent is working.
-          </p>
-          {focused.kind === 'video' ? (
-            <p className="text-sm text-doom-dim sm:text-xs">
-              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-sm 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-sm [@media(pointer:fine)]:min-h-8 sm:text-xs"
-                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-sm text-doom-dim sm:text-xs">
-                  Add or discard the current selection before submitting.
-                </p>
-              ) : null}
-            </div>
-          ) : null}
-          {submitCapture === undefined ? (
-            <output className="text-xs text-doom-red">Submission unavailable. Reload to update the app.</output>
-          ) : null}
-          {captureStatus ? <output className="block text-xs text-doom-dim">{captureStatus}</output> : null}
-        </>
-      ) : null}
-      <AuthorRequestLog requests={workspace?.requests ?? []} />
-    </section>
-  );
-}

package/src/web/components/AuthorRegionDrafts.tsx

@@ -1,102 +0,0 @@
-import { Button } from '@agimon-ai/doompi-web-components';
-import { useState } from 'react';
-import type { AuthorSessionWorkspace } from '../stores/authorWorkspaceStore.ts';
-import {
-  commitAuthorRegion,
-  removeAuthorRegion,
-  seekAuthorVideo,
-  setAuthorRegionCandidate,
-} from '../stores/authorWorkspaceStore.ts';
-
-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-sm font-semibold text-doom-text">Current selection</h3>
-          <p className="text-sm text-doom-dim sm:text-xs">Add a comment to keep this selection as an unsent draft.</p>
-          {workspace.candidate.anchor.kind === 'video-time-rect' ? (
-            <p className="text-sm text-doom-dim sm:text-xs">
-              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-base leading-normal text-doom-text focus:border-doom-red focus:outline-none sm:text-xs"
-          />
-          <Button
-            className="min-h-11 min-w-11 text-sm [@media(pointer:fine)]:min-h-8 sm:text-xs"
-            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-sm [@media(pointer:fine)]:min-h-8 sm:text-xs"
-            onClick={() => {
-              setAuthorRegionCandidate(sessionId, undefined);
-              setComment('');
-              setError(undefined);
-            }}
-          >
-            Discard selection
-          </Button>
-        </>
-      ) : null}
-      {error ? <output className="block text-sm text-doom-red">{error}</output> : null}
-      {workspace.regions.length > 0 ? (
-        <h3 className="text-sm 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-sm leading-normal text-doom-text sm:text-xs"
-          >
-            <span>
-              ({index + 1}) {region.comment}
-            </span>
-            {region.anchor.kind === 'video-time-rect' ? (
-              <Button
-                variant="outline"
-                className="min-h-11 min-w-11 text-sm [@media(pointer:fine)]:min-h-8 sm:text-xs"
-                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-sm [@media(pointer:fine)]:min-h-8 sm:text-xs"
-              variant="ghost"
-              aria-label={`Remove region ${index + 1}`}
-              onClick={() => removeAuthorRegion(sessionId, region.id)}
-            >
-              remove
-            </Button>
-          </li>
-        ))}
-      </ol>
-    </section>
-  );
-}