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

package/src/web/components/AuthorRequestLog.tsx

@@ -0,0 +1,179 @@
+import type { AuthorNativeAnchor, AuthorRequestRecord } from '../lib/authorViewportTypes';
+
+const STATUS_LABELS: Record<AuthorRequestRecord['status'], string> = {
+  REQUESTED: 'Request queued',
+  CHANGING: 'Agent working',
+  CHANGED: 'Change ready',
+  COMPLETE: 'Request completed',
+  FAILED: 'Request failed',
+  CANCELLED: 'Request cancelled',
+};
+
+const STATUS_STYLES: Record<AuthorRequestRecord['status'], string> = {
+  REQUESTED: 'border-doom-yellow/35 bg-doom-yellow/5 text-doom-yellow',
+  CHANGING: 'border-doom-magenta/45 bg-doom-magenta/10 text-doom-yellow',
+  CHANGED: 'border-doom-cyan/40 bg-doom-cyan/5 text-doom-cyan',
+  COMPLETE: 'border-doom-green/40 bg-doom-green/5 text-doom-green',
+  FAILED: 'border-doom-red/45 bg-doom-red/10 text-doom-red',
+  CANCELLED: 'border-doom-border bg-doom-panel text-doom-dim',
+};
+
+function requestInstruction(requestText: string): string {
+  const referencedContext = requestText.search(/(?:^|\s+)Referenced context "/u);
+  return requestText
+    .slice(0, referencedContext < 0 ? undefined : referencedContext)
+    .replace(/^Please address the attached feedback\.\s*Request ID: \S+\s*/u, '')
+    .trim();
+}
+
+function documentName(path: string): string {
+  return path.replaceAll('\\', '/').split('/').at(-1) || path;
+}
+
+function anchorLabel(anchor: AuthorNativeAnchor): string {
+  switch (anchor.kind) {
+    case 'text-range':
+      return anchor.startLine === anchor.endLine
+        ? `Line ${anchor.startLine}`
+        : `Lines ${anchor.startLine}–${anchor.endLine}`;
+    case 'cell':
+      return [anchor.sheet, anchor.location].filter(Boolean).join(' · ');
+    case 'slide-element':
+      return `Slide ${anchor.slide} · ${anchor.location}`;
+    case 'image-rect':
+      return 'Image region';
+    case 'pdf-page-rect':
+      return `Page ${anchor.page}`;
+    case 'video-time-rect': {
+      const minutes = Math.floor(anchor.timeSeconds / 60);
+      const seconds = Math.floor(anchor.timeSeconds % 60)
+        .toString()
+        .padStart(2, '0');
+      return `Video ${minutes}:${seconds}`;
+    }
+  }
+}
+
+function progressLabel(request: AuthorRequestRecord): string {
+  const total = request.regions.length;
+  const pending = request.pendingRegions?.length;
+  if (request.status === 'CHANGING' && request.currentOperation === 'Agent is working on this request')
+    return 'Processing request';
+  if (request.status === 'CHANGING' && pending !== undefined) return `${total - pending} of ${total} regions applied`;
+  if (request.status === 'CHANGED') return 'Changes applied · awaiting save';
+  if (request.status === 'COMPLETE') return 'Agent finished processing this request';
+  if (request.status === 'FAILED') return 'Stopped with an error';
+  if (request.status === 'CANCELLED') return 'Stopped before completion';
+  return `${total} region${total === 1 ? '' : 's'} queued`;
+}
+
+function RequestRecord({ request, prominent = false }: { request: AuthorRequestRecord; prominent?: boolean }) {
+  const instruction = requestInstruction(request.requestText);
+  return (
+    <article data-testid={prominent ? 'author-active-request' : undefined} className="space-y-3">
+      <header className="border-b border-doom-border-soft pb-3">
+        <p className="text-2xs font-bold tracking-widest text-doom-faint">DOCUMENT CONTEXT</p>
+        <p className="mt-2 flex items-center gap-2 truncate text-base font-bold text-doom-hi">
+          <span aria-hidden className="text-doom-magenta">
+            ↗
+          </span>
+          {documentName(request.documentPath)}
+        </p>
+      </header>
+
+      <section aria-label="Request locations" className="rounded border border-doom-border bg-doom-panel p-3">
+        <ol className="space-y-3">
+          {request.regions.map((region, index) => (
+            <li key={region.id} className="space-y-2">
+              <p className="font-mono text-2xs font-bold uppercase tracking-wider text-doom-yellow">
+                WHERE · {request.regions.length > 1 ? `${index + 1} · ` : ''}
+                {documentName(request.documentPath)} / {anchorLabel(region.anchor)} · rev {request.revision}
+              </p>
+              {region.quote ? (
+                <blockquote className="line-clamp-3 text-sm italic leading-relaxed text-doom-text">
+                  “{region.quote}”
+                </blockquote>
+              ) : null}
+              <p className="text-xs leading-relaxed text-doom-dim">{region.comment}</p>
+            </li>
+          ))}
+        </ol>
+      </section>
+
+      <section
+        data-testid={prominent ? 'author-operation-card' : undefined}
+        className={`rounded border p-3 ${STATUS_STYLES[request.status]}`}
+      >
+        <p className="font-mono text-xs font-bold tracking-wider">
+          ●{' '}
+          {request.status === 'CHANGING'
+            ? 'WORKING'
+            : request.status === 'COMPLETE'
+              ? 'COMPLETED'
+              : request.status === 'FAILED'
+                ? 'ERROR'
+                : request.status}
+        </p>
+        <p className="mt-2 text-sm leading-relaxed text-doom-hi">
+          {request.currentOperation || STATUS_LABELS[request.status]}
+        </p>
+        {request.error ? <p className="mt-2 text-xs leading-relaxed text-doom-red">{request.error}</p> : null}
+        {request.before !== undefined || request.after !== undefined ? (
+          <details className="mt-2 border-t border-current/20 pt-2 text-xs text-doom-dim">
+            <summary className="cursor-pointer select-none">change preview</summary>
+            {request.before !== undefined ? (
+              <pre className="mt-2 max-h-28 overflow-auto whitespace-pre-wrap break-words font-mono">
+                before: {request.before}
+              </pre>
+            ) : null}
+            {request.after !== undefined ? (
+              <pre className="mt-2 max-h-28 overflow-auto whitespace-pre-wrap break-words font-mono">
+                after: {request.after}
+              </pre>
+            ) : null}
+          </details>
+        ) : null}
+      </section>
+
+      <section className="space-y-2">
+        <p className="text-2xs font-bold tracking-widest text-doom-faint">REQUEST · HOW TO CHANGE</p>
+        <div className="rounded border border-doom-border bg-doom-deep p-3">
+          <p className="whitespace-pre-wrap text-sm leading-relaxed text-doom-text">
+            {instruction || 'No additional instruction.'}
+          </p>
+        </div>
+      </section>
+
+      <footer className="font-mono text-2xs text-doom-dim">{progressLabel(request)}</footer>
+    </article>
+  );
+}
+
+export function AuthorRequestLog({ requests }: { requests: readonly AuthorRequestRecord[] }) {
+  const latest = requests.at(-1);
+  const earlier = requests.slice(0, -1).toReversed();
+  return (
+    <section data-testid="author-request-history" className="space-y-3">
+      <h3 className="text-2xs font-bold tracking-widest text-doom-faint">AUTHORING</h3>
+      {latest === undefined ? (
+        <p className="text-sm leading-relaxed text-doom-dim">No requests or changes yet.</p>
+      ) : (
+        <RequestRecord request={latest} prominent />
+      )}
+      {earlier.length > 0 ? (
+        <details className="border-t border-doom-border-soft pt-3" data-testid="author-earlier-requests">
+          <summary className="cursor-pointer select-none text-2xs font-bold tracking-wider text-doom-faint">
+            EARLIER REQUESTS ({earlier.length})
+          </summary>
+          <ol className="mt-3 space-y-5">
+            {earlier.map((request) => (
+              <li key={request.id}>
+                <RequestRecord request={request} />
+              </li>
+            ))}
+          </ol>
+        </details>
+      ) : null}
+    </section>
+  );
+}

package/src/web/components/AuthorStructuredView.tsx

@@ -0,0 +1,122 @@
+import { Button } from '@agimon-ai/doompi-web-components';
+import { useEffect } from 'react';
+
+import type { DocumentFragment } from '../../types/structuredDocuments';
+import { registerAuthorGridResolver } from '../lib/authorGrid';
+import type { AuthorDisplayedRegion } from '../lib/authorViewportTypes';
+import {
+  reviseAuthorFragment,
+  setAuthorRegionCandidate,
+  type AuthorWorkspaceDocument,
+} from '../stores/authorWorkspaceStore';
+
+export function AuthorStructuredView({
+  sessionId,
+  document,
+  displayedRegions,
+}: {
+  sessionId: string;
+  document: AuthorWorkspaceDocument;
+  displayedRegions: readonly AuthorDisplayedRegion[];
+}) {
+  useEffect(
+    () =>
+      registerAuthorGridResolver(sessionId, (cell, geometry) => {
+        const { originX = 0, originY = 0, width, height } = geometry.viewport;
+        const element = window.document.elementFromPoint(
+          originX + cell.center.x * width,
+          originY + cell.center.y * height,
+        );
+        const fragmentId = element?.closest<HTMLElement>('[data-author-fragment]')?.dataset.authorFragment;
+        const fragment = document.fragments?.find((candidate) => candidate.id === fragmentId);
+        if (fragment === undefined || fragment.readOnly === true) return undefined;
+        if (document.kind === 'csv' || document.kind === 'xlsx') {
+          return {
+            anchor: { kind: 'cell', fragmentId: fragment.id, location: fragment.location },
+            quote: fragment.text,
+          };
+        }
+        const slide = Number(fragment.location.match(/(?:slide\s*|slides\/slide)(\d+)/u)?.[1]);
+        if (!Number.isSafeInteger(slide)) return undefined;
+        return {
+          anchor: { kind: 'slide-element', fragmentId: fragment.id, location: fragment.location, slide },
+          quote: fragment.text,
+        };
+      }),
+    [document.fragments, document.kind, document.version, sessionId],
+  );
+  const displayedByFragment = new Map(
+    displayedRegions.flatMap(({ ordinal, region }) =>
+      region.anchor.kind === 'cell' || region.anchor.kind === 'slide-element'
+        ? [[region.anchor.fragmentId, ordinal] as const]
+        : [],
+    ),
+  );
+  const cells = document.kind === 'csv' || document.kind === 'xlsx';
+  const groups = new Map<string, DocumentFragment[]>();
+  for (const fragment of document.fragments ?? []) {
+    const key = cells
+      ? document.kind === 'csv'
+        ? fragment.location.split(',')[0]!
+        : fragment.location.replace(/![A-Z]+(\d+)$/, '!row $1')
+      : fragment.location;
+    const group = groups.get(key) ?? [];
+    group.push(fragment);
+    groups.set(key, group);
+  }
+  return (
+    <div data-testid="author-structured" className="min-h-0 flex-1 space-y-3 overflow-auto p-4">
+      {!cells ? <p className="text-xs text-doom-faint">Slide text view, not a layout-faithful rendering.</p> : null}
+      {[...groups].map(([location, fragments]) => (
+        <section key={location} className="space-y-1">
+          <h3 className="text-xs text-doom-faint">{location}</h3>
+          <div className={cells ? 'flex gap-1' : 'space-y-2'}>
+            {fragments.map((fragment) => (
+              <div
+                key={fragment.id}
+                data-author-fragment={fragment.id}
+                data-author-region={displayedByFragment.get(fragment.id)}
+                className={`${cells ? 'w-40 shrink-0' : ''} relative rounded ${displayedByFragment.has(fragment.id) ? 'ring-1 ring-doom-yellow' : ''}`}
+              >
+                {displayedByFragment.has(fragment.id) ? (
+                  <span className="absolute -left-1 -top-1 z-10 flex h-4 min-w-4 items-center justify-center rounded-full bg-doom-yellow px-1 text-2xs font-bold text-doom-deep">
+                    {displayedByFragment.get(fragment.id)}
+                  </span>
+                ) : null}
+                <Button
+                  size="xs"
+                  variant="ghost"
+                  onClick={(event) => {
+                    const bounds = event.currentTarget.getBoundingClientRect();
+                    const slide = Number(fragment.location.match(/(?:slide\s*|slides\/slide)(\d+)/)?.[1]);
+                    if (!cells && !Number.isSafeInteger(slide)) return;
+                    setAuthorRegionCandidate(sessionId, {
+                      documentPath: document.path,
+                      revision: document.version,
+                      sourceSha256: document.sourceSha256,
+                      quote: fragment.text,
+                      anchor: cells
+                        ? { kind: 'cell', fragmentId: fragment.id, location: fragment.location }
+                        : { kind: 'slide-element', fragmentId: fragment.id, location: fragment.location, slide },
+                      viewport: { width: bounds.width, height: bounds.height },
+                      createdAt: Date.now(),
+                    });
+                  }}
+                >
+                  mark {fragment.location}
+                </Button>
+                <textarea
+                  aria-label={fragment.location}
+                  value={fragment.text}
+                  readOnly={fragment.readOnly === true}
+                  className="w-full rounded border border-doom-border bg-doom-deep p-2 text-sm text-doom-text"
+                  onChange={(event) => reviseAuthorFragment(sessionId, document.path, fragment.id, event.target.value)}
+                />
+              </div>
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}

package/src/web/components/AuthorTextView.tsx

@@ -0,0 +1,98 @@
+import { CodeEditor, Markdown, type CodeEditorController } from '@agimon-ai/doompi-web-components';
+import { useEffect, useRef } from 'react';
+
+import { registerAuthorGridResolver } from '../lib/authorGrid';
+import type { AuthorDisplayedRegion } from '../lib/authorViewportTypes';
+import {
+  authorDocument,
+  reviseAuthorDocument,
+  setAuthorRegionCandidate,
+  type AuthorWorkspaceDocument,
+} from '../stores/authorWorkspaceStore';
+
+export function AuthorTextView({
+  sessionId,
+  document,
+  preview,
+  displayedRegions,
+}: {
+  sessionId: string;
+  document: AuthorWorkspaceDocument;
+  preview: boolean;
+  displayedRegions: readonly AuthorDisplayedRegion[];
+}) {
+  const host = useRef<HTMLDivElement>(null);
+  const editor = useRef<CodeEditorController>(null);
+  useEffect(
+    () =>
+      registerAuthorGridResolver(sessionId, (cell, geometry) => {
+        if (preview || editor.current === null) return undefined;
+        const { originX = 0, originY = 0, width, height } = geometry.viewport;
+        const range = editor.current.resolveViewportRegion({
+          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,
+        });
+        if (range === null || range.from === range.to) return undefined;
+        return {
+          anchor: {
+            kind: 'text-range',
+            startOffset: range.from,
+            endOffset: range.to,
+            startLine: range.startLine,
+            endLine: range.endLine,
+          },
+          quote: range.text,
+        };
+      }),
+    [preview, sessionId],
+  );
+  useEffect(() => {
+    editor.current?.setMarkedRanges(
+      displayedRegions.flatMap(({ ordinal, region }) =>
+        region.anchor.kind === 'text-range'
+          ? [{ from: region.anchor.startOffset, to: region.anchor.endOffset, label: String(ordinal) }]
+          : [],
+      ),
+    );
+  }, [displayedRegions]);
+  return (
+    <div ref={host} className="flex min-h-0 flex-1 flex-col">
+      {preview ? (
+        <div data-testid="author-markdown" className="min-h-0 flex-1 overflow-auto p-4 text-sm text-doom-text">
+          <Markdown text={document.content ?? ''} />
+        </div>
+      ) : (
+        <CodeEditor
+          value={document.content ?? ''}
+          path={document.path}
+          data-testid="author-editor"
+          controllerRef={editor}
+          className="min-h-0 flex-1"
+          onChange={(content) => reviseAuthorDocument(sessionId, document.path, content)}
+          onSelect={(range) => {
+            const current = authorDocument(sessionId, document.path);
+            const bounds = host.current?.getBoundingClientRect();
+            if (!current || !bounds || range.from === range.to) return;
+            setAuthorRegionCandidate(sessionId, {
+              documentPath: current.path,
+              revision: current.version,
+              sourceSha256: current.sourceSha256,
+              quote: range.text,
+              anchor: {
+                kind: 'text-range',
+                startOffset: range.from,
+                endOffset: range.to,
+                startLine: range.startLine,
+                endLine: range.endLine,
+              },
+              viewport: { width: bounds.width, height: bounds.height },
+              createdAt: Date.now(),
+            });
+          }}
+        />
+      )}
+    </div>
+  );
+}

package/src/web/components/AuthorToolPalette.tsx

@@ -0,0 +1,104 @@
+import { Button } from '@agimon-ai/doompi-web-components';
+import { useState } from 'react';
+
+import type { AuthorDocumentKind, AuthorToolMode } from '../lib/authorViewportTypes';
+import {
+  authorDocument,
+  authorSessionWorkspace,
+  reviseAuthorDocument,
+  setAuthorRegionCandidate,
+  setAuthorToolMode,
+} from '../stores/authorWorkspaceStore';
+
+export function AuthorToolPalette({
+  sessionId,
+  kind,
+  activeTool,
+}: {
+  sessionId: string;
+  kind: AuthorDocumentKind;
+  activeTool: AuthorToolMode;
+}) {
+  const [error, setError] = useState<string>();
+  const format = (style: 'Bold' | 'Heading' | 'Link' | 'List') => {
+    const session = authorSessionWorkspace(sessionId);
+    const selected = session.candidate;
+    const document = selected && authorDocument(sessionId, selected.documentPath);
+    if (
+      !selected ||
+      !document ||
+      selected.anchor.kind !== 'text-range' ||
+      selected.revision !== document.version ||
+      selected.sourceSha256 !== document.sourceSha256
+    ) {
+      setError('Select text in the document first.');
+      return;
+    }
+    const { startOffset, endOffset } = selected.anchor;
+    const content = document.content ?? '';
+    const text = content.slice(startOffset, endOffset);
+    const replacement =
+      style === 'Bold'
+        ? `**${text}**`
+        : style === 'Link'
+          ? `[${text}](https://)`
+          : text
+              .split('\n')
+              .map((line) => `${style === 'Heading' ? '## ' : '- '}${line}`)
+              .join('\n');
+    reviseAuthorDocument(
+      sessionId,
+      document.path,
+      content.slice(0, startOffset) + replacement + content.slice(endOffset),
+    );
+    setAuthorRegionCandidate(sessionId, undefined);
+    setError(undefined);
+  };
+  const tools = [
+    {
+      label: 'Region',
+      glyph: '⌗',
+      action: () => setAuthorToolMode(sessionId, activeTool === 'mark' ? 'select' : 'mark'),
+      active: activeTool === 'mark',
+    },
+    ...(kind === 'markdown'
+      ? [
+          { label: 'Bold', glyph: 'B', action: () => format('Bold') },
+          { label: 'Heading', glyph: 'H', action: () => format('Heading') },
+          { label: 'Link', glyph: '↗', action: () => format('Link') },
+          { label: 'List', glyph: '≡', action: () => format('List') },
+        ]
+      : []),
+    { label: 'Comment', glyph: '□', action: () => setAuthorToolMode(sessionId, 'mark') },
+  ];
+  return (
+    <section data-testid="author-tool-palette" className="space-y-2 border-b border-doom-border-soft pb-3">
+      <div className="flex justify-between text-sm text-doom-dim">
+        <h3 className="font-bold tracking-widest">TOOLS</h3>
+        <span>focused tab</span>
+      </div>
+      <div className="grid grid-cols-3 gap-1.5">
+        {tools.map((tool) => (
+          <Button
+            key={tool.label}
+            size="md"
+            variant="outline"
+            aria-label={tool.label === 'Region' ? 'mark region' : tool.label}
+            aria-pressed={tool.active}
+            onClick={tool.action}
+            className={`min-h-11 min-w-11 gap-1.5 rounded border text-base [@media(pointer:fine)]:min-h-8 sm:text-sm ${tool.active ? 'border-doom-red bg-doom-red/10 text-doom-red hover:bg-doom-red/15' : 'border-doom-border bg-doom-panel text-doom-dim'}`}
+          >
+            <span aria-hidden="true">{tool.glyph}</span>
+            {tool.label}
+          </Button>
+        ))}
+      </div>
+      <p className="text-base leading-normal text-doom-dim sm:text-sm">
+        {activeTool === 'mark'
+          ? 'Drag over the document to mark a region.'
+          : 'Choose Region to mark an area for a comment.'}
+      </p>
+      {error ? <output className="block text-base text-doom-red">{error}</output> : null}
+    </section>
+  );
+}

package/src/web/components/AuthorVideoControls.tsx

@@ -0,0 +1,111 @@
+import { Button, type MediaPlaybackState } from '@agimon-ai/doompi-web-components';
+import { useState } from 'react';
+
+export function videoTimeLabel(seconds: number): string {
+  const milliseconds = Math.max(0, Math.round((Number.isFinite(seconds) ? seconds : 0) * 1000));
+  return `${String(Math.floor(milliseconds / 60000)).padStart(2, '0')}:${String(Math.floor(milliseconds / 1000) % 60).padStart(2, '0')}.${String(milliseconds % 1000).padStart(3, '0')}`;
+}
+
+export function AuthorVideoControls({
+  playback,
+  ready,
+  locked,
+  marking,
+  onSeek,
+  onToggle,
+  onAnnotate,
+}: {
+  playback: MediaPlaybackState;
+  ready: boolean;
+  locked: boolean;
+  marking: boolean;
+  onSeek: (seconds: number) => void;
+  onToggle: () => void;
+  onAnnotate: () => void;
+}) {
+  const [seconds, setSeconds] = useState('');
+  const duration = playback.duration;
+  const invalid =
+    seconds.trim() === '' || !Number.isFinite(Number(seconds)) || Number(seconds) < 0 || Number(seconds) > duration;
+  const buttonClass = 'min-h-11 px-3 text-base [@media(pointer:fine)]:min-h-8 sm:text-sm';
+  return (
+    <section
+      aria-label="Video annotation controls"
+      className="mt-2 space-y-2 rounded border border-doom-border bg-doom-panel p-2.5 text-base text-doom-text sm:text-sm"
+    >
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <output aria-label="Playback position" className="font-mono text-base tabular-nums">
+          {videoTimeLabel(playback.currentTime)} / {videoTimeLabel(duration)}
+        </output>
+        <span className="text-doom-dim">
+          {locked
+            ? 'Annotation draft: add or discard it before seeking.'
+            : marking
+              ? 'Frame paused. Drag a region on the video.'
+              : 'Seek to a moment, then choose Annotate this frame.'}
+        </span>
+      </div>
+      <input
+        aria-label="Video timeline"
+        type="range"
+        min={0}
+        max={duration || 0}
+        step={0.001}
+        value={Math.min(playback.currentTime, duration)}
+        disabled={locked || duration <= 0}
+        onChange={(event) => onSeek(Number(event.target.value))}
+        className="h-11 w-full cursor-pointer accent-doom-blue [@media(pointer:fine)]:h-6"
+      />
+      <div className="flex flex-wrap items-center gap-2">
+        <Button className={buttonClass} disabled={locked || duration <= 0} onClick={onToggle}>
+          {playback.playing ? 'Pause' : 'Play'}
+        </Button>
+        <Button
+          className={buttonClass}
+          disabled={locked || duration <= 0}
+          onClick={() => onSeek(Math.max(0, playback.currentTime - 0.1))}
+          aria-label="Seek back 0.1 seconds"
+        >
+          −0.1s
+        </Button>
+        <Button
+          className={buttonClass}
+          disabled={locked || duration <= 0}
+          onClick={() => onSeek(Math.min(duration, playback.currentTime + 0.1))}
+          aria-label="Seek forward 0.1 seconds"
+        >
+          +0.1s
+        </Button>
+        <Button variant="primary" className={buttonClass} disabled={locked || !ready} onClick={onAnnotate}>
+          Annotate this frame
+        </Button>
+        <form
+          className="flex flex-wrap items-center gap-2 sm:ml-auto"
+          onSubmit={(event) => {
+            event.preventDefault();
+            if (!invalid && !locked) onSeek(Number(seconds));
+          }}
+        >
+          <label htmlFor="author-video-seconds" className="text-doom-dim">
+            Go to seconds
+          </label>
+          <input
+            id="author-video-seconds"
+            type="number"
+            min={0}
+            max={duration}
+            step={0.001}
+            value={seconds}
+            onChange={(event) => setSeconds(event.target.value)}
+            disabled={locked || duration <= 0}
+            placeholder="1.250"
+            className="h-11 w-24 rounded border border-doom-border bg-doom-deep px-2 text-lg [@media(pointer:fine)]:h-8 sm:text-sm"
+          />
+          <Button type="submit" className={buttonClass} disabled={locked || duration <= 0 || invalid}>
+            Go
+          </Button>
+        </form>
+      </div>
+    </section>
+  );
+}

package/src/web/components/DescribeAuthorToolsToolCard.tsx

@@ -0,0 +1,51 @@
+import type { ToolMessageRenderProps } from '@agimon-ai/doompi-core/web';
+import {
+  collapseLines,
+  MessageItem,
+  MessageItemBody,
+  MessageItemHeader,
+  MessageItemStatus,
+  MessageLines,
+  toolTone,
+} from '@agimon-ai/doompi-web-components';
+
+import {
+  describeAuthorToolsCallSummary,
+  describeAuthorToolsCollapsedLines,
+  describeAuthorToolsResultLines,
+} from '../lib/describeAuthorToolsToolRender';
+
+/**
+ * The describe_author_tools tool's timeline item: Describe the current Author viewport capabilities. The shell owns
+ * the frame, the outcome tone, the status badge, and the expand toggle; this
+ * card supplies the header summary and the body lines, and says whether it
+ * hides any so the toggle appears only when it reveals something.
+ */
+export function DescribeAuthorToolsToolCard({ toolName, args, result, running, isError }: ToolMessageRenderProps) {
+  const lines = describeAuthorToolsResultLines(result);
+  const collapsed = collapseLines(lines, describeAuthorToolsCollapsedLines, false);
+  return (
+    <MessageItem tone={toolTone({ running, isError })} expandable={collapsed.hidden > 0}>
+      {({ expanded }) => {
+        const view = expanded ? collapseLines(lines, describeAuthorToolsCollapsedLines, true) : collapsed;
+        return (
+          <>
+            <MessageItemHeader title={toolName}>
+              <span data-testid={`tool-call-${toolName}`} className="min-w-0 flex-1 truncate text-doom-text">
+                {describeAuthorToolsCallSummary(args)}
+              </span>
+            </MessageItemHeader>
+            {view.shown.length > 0 || running || isError ? (
+              <MessageItemBody data-testid={`tool-result-${toolName}`} className="flex flex-col gap-1">
+                {view.shown.length > 0 ? <MessageLines lines={view.shown} /> : null}
+                {view.hidden > 0 ? <MessageItemStatus expands>{view.hidden} more line(s)</MessageItemStatus> : null}
+                {running ? <MessageItemStatus tone="running">running</MessageItemStatus> : null}
+                {isError ? <MessageItemStatus tone="error">failed</MessageItemStatus> : null}
+              </MessageItemBody>
+            ) : null}
+          </>
+        );
+      }}
+    </MessageItem>
+  );
+}