@semiont/react-ui 0.5.8 → 0.5.10

package/src/components/modals/ResourceGenerateModal.tsx

@@ -0,0 +1,258 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
+import { useResourceGather } from '../../hooks/useResourceGather';
+import { useSemiont } from '../../session/SemiontProvider';
+import { useObservable } from '../../hooks/useObservable';
+import { ConfigureGatherStep, type ResourceGatherConfig } from './ConfigureGatherStep';
+import { GatherContextStep } from './GatherContextStep';
+import { ConfigureGenerationStep, type GenerationConfig } from './ConfigureGenerationStep';
+
+export interface ResourceGenerateModalTranslations {
+  // Step titles + nav
+  gatherTitle: string;
+  reviewTitle: string;
+  configureTitle: string;
+  next: string;
+  back: string;
+  cancel: string;
+  // ConfigureGatherStep
+  gatherIntro: string;
+  includeContent: string;
+  includeSummary: string;
+  gatherDepth: string;
+  gatherMaxResources: string;
+  gatherButton: string;
+  excludeLabel: string;
+  // GatherContextStep display
+  loadingContext: string;
+  failedContext: string;
+  sourceContextLabel: string;
+  connectionsLabel: string;
+  citedByLabel: string;
+  // ConfigureGenerationStep
+  resourceTitle: string;
+  resourceTitlePlaceholder: string;
+  additionalInstructions: string;
+  additionalInstructionsPlaceholder: string;
+  language: string;
+  languageHelp: string;
+  creativity: string;
+  creativityFocused: string;
+  creativityCreative: string;
+  maxLength: string;
+  maxLengthHelp: string;
+  generate: string;
+}
+
+export interface ResourceGenerateModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  resourceId: string;
+  defaultTitle: string;
+  locale: string;
+  gatherDefaults?: Partial<ResourceGatherConfig>;
+  /**
+   * Emit the chosen generation config. The parent runs the job
+   * (`client.yield.fromResource(resourceId, …).run(…)`) — mirrors how the
+   * annotation wizard delegates `yield.fromAnnotation` to its parent.
+   */
+  onGenerateSubmit: (resourceId: string, config: GenerationConfig) => void;
+  translations: ResourceGenerateModalTranslations;
+}
+
+type Step = 'configure-gather' | 'review' | 'configure-generation';
+
+/**
+ * Resource-generate flow (GENERATE-FROM-BUTTON): configure gather options →
+ * `gather.resource` → review the gathered `GatheredContext` → configure
+ * generation → emit. Reuses the kind-aware `GatherContextStep` for the review.
+ */
+export function ResourceGenerateModal({
+  isOpen,
+  onClose,
+  resourceId,
+  defaultTitle,
+  locale,
+  gatherDefaults,
+  onGenerateSubmit,
+  translations: t,
+}: ResourceGenerateModalProps) {
+  const [step, setStep] = useState<Step>('configure-gather');
+  const { context, loading, error, gather, reset } = useResourceGather();
+  const client = useObservable(useSemiont().activeSession$)?.client;
+  const entityTypeOptions = useObservable(client?.browse.entityTypes()) ?? [];
+  const [excludeEntityTypes, setExcludeEntityTypes] = useState<string[]>([]);
+
+  // Reset to the first step whenever the modal (re)opens.
+  useEffect(() => {
+    if (isOpen) {
+      setStep('configure-gather');
+      setExcludeEntityTypes([]);
+      reset();
+    }
+  }, [isOpen, reset]);
+
+  const handleGather = useCallback((config: ResourceGatherConfig) => {
+    setStep('review');
+    void gather(resourceId, {
+      ...config,
+      ...(excludeEntityTypes.length ? { excludeEntityTypes } : {}),
+    });
+  }, [gather, resourceId, excludeEntityTypes]);
+
+  const handleGenerate = useCallback((config: GenerationConfig) => {
+    onGenerateSubmit(resourceId, config);
+    onClose();
+  }, [onGenerateSubmit, resourceId, onClose]);
+
+  const stepTitle = step === 'configure-gather' ? t.gatherTitle : step === 'review' ? t.reviewTitle : t.configureTitle;
+
+  return (
+    <Transition appear show={isOpen}>
+      <Dialog as="div" className="semiont-search-modal" onClose={onClose}>
+        <TransitionChild
+          enter="ease-out duration-200"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-150"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="semiont-search-modal__backdrop" />
+        </TransitionChild>
+
+        <div className="semiont-search-modal__wrapper">
+          <div className="semiont-search-modal__centering semiont-search-modal__centering--center">
+            <TransitionChild
+              enter="ease-out duration-200"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-150"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <DialogPanel className="semiont-search-modal__panel semiont-search-modal__panel--with-border semiont-search-modal__panel--gather">
+                <div className="semiont-search-modal__header">
+                  <DialogTitle className="semiont-search-modal__title">{stepTitle}</DialogTitle>
+                  <button onClick={onClose} className="semiont-search-modal__close-button" aria-label="Close">
+                    ✕
+                  </button>
+                </div>
+
+                {step === 'configure-gather' && (
+                  <ConfigureGatherStep
+                    defaults={gatherDefaults}
+                    onGather={handleGather}
+                    onCancel={onClose}
+                    translations={{
+                      intro: t.gatherIntro,
+                      includeContent: t.includeContent,
+                      includeSummary: t.includeSummary,
+                      depth: t.gatherDepth,
+                      maxResources: t.gatherMaxResources,
+                      cancel: t.cancel,
+                      gather: t.gatherButton,
+                    }}
+                  >
+                    {entityTypeOptions.length > 0 && (
+                      <div className="semiont-form__field semiont-form__entity-types">
+                        <label className="semiont-form__label">{t.excludeLabel}</label>
+                        <div className="semiont-form__entity-type-buttons">
+                          {entityTypeOptions.map((et) => {
+                            const isSelected = excludeEntityTypes.includes(et);
+                            return (
+                              <button
+                                key={et}
+                                type="button"
+                                className="semiont-form__entity-type-button"
+                                data-selected={isSelected}
+                                aria-pressed={isSelected}
+                                onClick={() => setExcludeEntityTypes(prev => prev.includes(et) ? prev.filter(x => x !== et) : [...prev, et])}
+                              >
+                                {et}
+                              </button>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    )}
+                  </ConfigureGatherStep>
+                )}
+
+                {step === 'review' && (
+                  <>
+                    <GatherContextStep
+                      context={context}
+                      contextLoading={loading}
+                      contextError={error}
+                      translations={{
+                        title: '',
+                        loadingContext: t.loadingContext,
+                        failedContext: t.failedContext,
+                        search: '',
+                        generate: '',
+                        compose: '',
+                        resolutionStrategyLabel: '',
+                        sourceContextLabel: t.sourceContextLabel,
+                        connectionsLabel: t.connectionsLabel,
+                        citedByLabel: t.citedByLabel,
+                        userHintLabel: '',
+                        userHintPlaceholder: '',
+                      }}
+                    />
+                    <div className="semiont-modal__actions" style={{ paddingTop: '0.5rem' }}>
+                      <button
+                        type="button"
+                        onClick={() => setStep('configure-gather')}
+                        className="semiont-button--secondary semiont-button--flex"
+                      >
+                        ◀ {t.back}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => setStep('configure-generation')}
+                        disabled={!context}
+                        className="semiont-button--primary semiont-button--flex"
+                      >
+                        {t.next} ▶
+                      </button>
+                    </div>
+                  </>
+                )}
+
+                {step === 'configure-generation' && context && (
+                  <ConfigureGenerationStep
+                    defaultTitle={defaultTitle}
+                    locale={locale}
+                    context={context}
+                    onBack={() => setStep('review')}
+                    onCancel={onClose}
+                    onGenerate={handleGenerate}
+                    translations={{
+                      resourceTitle: t.resourceTitle,
+                      resourceTitlePlaceholder: t.resourceTitlePlaceholder,
+                      additionalInstructions: t.additionalInstructions,
+                      additionalInstructionsPlaceholder: t.additionalInstructionsPlaceholder,
+                      language: t.language,
+                      languageHelp: t.languageHelp,
+                      creativity: t.creativity,
+                      creativityFocused: t.creativityFocused,
+                      creativityCreative: t.creativityCreative,
+                      maxLength: t.maxLength,
+                      maxLengthHelp: t.maxLengthHelp,
+                      cancel: t.cancel,
+                      back: t.back,
+                      generate: t.generate,
+                    }}
+                  />
+                )}
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  );
+}

package/src/components/modals/__tests__/ConfigureGatherStep.test.tsx

@@ -0,0 +1,82 @@
+/**
+ * GENERATE-FROM-BUTTON P2/P4 — the gather-options form.
+ *
+ * Pure presentational form (no providers): it owns the gather config in local
+ * state and emits a `ResourceGatherConfig` on submit. The `children` slot hosts
+ * the Phase-4 exclusion multi-select.
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ConfigureGatherStep } from '../ConfigureGatherStep';
+
+const t = {
+  intro: 'Choose what to include.',
+  includeContent: 'Include content',
+  includeSummary: 'Include summary',
+  depth: 'Depth',
+  maxResources: 'Max resources',
+  cancel: 'Cancel',
+  gather: 'Gather',
+};
+
+describe('ConfigureGatherStep', () => {
+  it('renders the intro and the default option values', () => {
+    render(<ConfigureGatherStep onGather={vi.fn()} onCancel={vi.fn()} translations={t} />);
+    expect(screen.getByText('Choose what to include.')).toBeInTheDocument();
+    expect(screen.getByLabelText('Include content')).toBeChecked();
+    expect(screen.getByLabelText('Include summary')).toBeChecked();
+    expect(screen.getByLabelText('Depth')).toHaveValue(2);
+    expect(screen.getByLabelText('Max resources')).toHaveValue(10);
+  });
+
+  it('emits the default config on submit', () => {
+    const onGather = vi.fn();
+    render(<ConfigureGatherStep onGather={onGather} onCancel={vi.fn()} translations={t} />);
+    fireEvent.click(screen.getByRole('button', { name: /Gather/ }));
+    expect(onGather).toHaveBeenCalledWith({ includeContent: true, includeSummary: true, depth: 2, maxResources: 10 });
+  });
+
+  it('reflects edits in the emitted config', () => {
+    const onGather = vi.fn();
+    render(<ConfigureGatherStep onGather={onGather} onCancel={vi.fn()} translations={t} />);
+    fireEvent.click(screen.getByLabelText('Include content')); // uncheck
+    fireEvent.click(screen.getByLabelText('Include summary')); // uncheck
+    fireEvent.change(screen.getByLabelText('Depth'), { target: { value: '4' } });
+    fireEvent.change(screen.getByLabelText('Max resources'), { target: { value: '25' } });
+    fireEvent.click(screen.getByRole('button', { name: /Gather/ }));
+    expect(onGather).toHaveBeenCalledWith({ includeContent: false, includeSummary: false, depth: 4, maxResources: 25 });
+  });
+
+  it('honors the defaults prop', () => {
+    const onGather = vi.fn();
+    render(
+      <ConfigureGatherStep
+        defaults={{ includeSummary: false, depth: 1, maxResources: 5 }}
+        onGather={onGather}
+        onCancel={vi.fn()}
+        translations={t}
+      />,
+    );
+    expect(screen.getByLabelText('Include summary')).not.toBeChecked();
+    expect(screen.getByLabelText('Depth')).toHaveValue(1);
+    fireEvent.click(screen.getByRole('button', { name: /Gather/ }));
+    expect(onGather).toHaveBeenCalledWith({ includeContent: true, includeSummary: false, depth: 1, maxResources: 5 });
+  });
+
+  it('calls onCancel from the cancel button', () => {
+    const onCancel = vi.fn();
+    render(<ConfigureGatherStep onGather={vi.fn()} onCancel={onCancel} translations={t} />);
+    fireEvent.click(screen.getByRole('button', { name: /Cancel/ }));
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders the children slot (exclusion picker)', () => {
+    render(
+      <ConfigureGatherStep onGather={vi.fn()} onCancel={vi.fn()} translations={t}>
+        <div>EXCLUDE-SLOT</div>
+      </ConfigureGatherStep>,
+    );
+    expect(screen.getByText('EXCLUDE-SLOT')).toBeInTheDocument();
+  });
+});

package/src/components/modals/__tests__/GatherContextStep.resource.test.tsx

@@ -0,0 +1,107 @@
+/**
+ * GENERATE-FROM-BUTTON P1 — the GatheredContext display renders a resource focus.
+ *
+ * ContextSummary's graph views are focus-agnostic; GatherContextStep gains a
+ * resource-focus strip and hides the annotation-only controls (hint + the
+ * Bind/Generate/Compose footer) for a resource focus.
+ */
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import type { GatheredContext } from '@semiont/core';
+import { GatherContextStep } from '../GatherContextStep';
+import { ContextSummary } from '../ContextSummary';
+
+const t = {
+  title: 'Gather',
+  loadingContext: 'Loading…',
+  failedContext: 'Failed',
+  search: 'Search',
+  generate: 'Generate',
+  compose: 'Compose',
+  resolutionStrategyLabel: 'Strategy',
+  sourceContextLabel: 'Source',
+  connectionsLabel: 'Connections',
+  citedByLabel: 'Cited by',
+  userHintLabel: 'Hint',
+  userHintPlaceholder: 'hint…',
+};
+
+function resourceContext(): GatheredContext {
+  return {
+    focus: {
+      kind: 'resource',
+      resource: { id: 'res-1', name: 'My Resource' },
+      summary: 'A short summary',
+      suggestedReferences: ['Suggested Topic'],
+      content: { main: 'main content' },
+    },
+    graph: {
+      nodes: [
+        { id: 'res-1', type: 'resource', label: 'My Resource' },
+        { id: 'res-2', type: 'resource', label: 'Related Resource', entityTypes: ['Topic'] },
+      ],
+      edges: [{ source: 'res-1', target: 'res-2', type: 'peer' }],
+    },
+    metadata: { entityTypes: ['Topic'] },
+  } as unknown as GatheredContext;
+}
+
+describe('GatheredContext display — resource focus', () => {
+  beforeEach(() => {
+    // jsdom doesn't implement scrollIntoView — GatherContextStep's annotation
+    // strip calls it on mount. (Same stub the panel tests use.)
+    Element.prototype.scrollIntoView = vi.fn();
+  });
+
+  it('ContextSummary renders graph views (connections) for a resource focus', () => {
+    const { container } = render(<ContextSummary context={resourceContext()} translations={t} />);
+    expect(container.textContent).toContain('Related Resource'); // peer connection from deriveViews
+  });
+
+  it('GatherContextStep shows the resource strip and hides the annotation-only footer', () => {
+    const { container } = render(
+      <GatherContextStep
+        context={resourceContext()}
+        contextLoading={false}
+        contextError={null}
+        translations={t}
+      />,
+    );
+    expect(container.textContent).toContain('My Resource');     // focal resource name
+    expect(container.textContent).toContain('A short summary'); // resource summary
+    expect(container.textContent).toContain('Suggested Topic'); // suggestedReferences chip
+    expect(container.textContent).toContain('Related Resource'); // graph view via ContextSummary
+    // annotation-only controls are gated out for a resource focus
+    expect(container.textContent).not.toContain('Strategy');
+    expect(container.querySelector('.semiont-gather__footer')).toBeNull();
+    expect(container.querySelector('.semiont-gather__hint-textarea')).toBeNull();
+  });
+
+  it('GatherContextStep still shows the footer for an annotation focus', () => {
+    const annotationContext = {
+      focus: {
+        kind: 'annotation',
+        annotation: { id: 'anno-1', motivation: 'linking' },
+        sourceResource: { id: 'res-1', name: 'Host' },
+        selected: { before: 'a ', text: 'term', after: ' b' },
+      },
+      graph: { nodes: [], edges: [] },
+      metadata: {},
+    } as unknown as GatheredContext;
+    const { container } = render(
+      <GatherContextStep
+        context={annotationContext}
+        contextLoading={false}
+        contextError={null}
+        userHint=""
+        onUserHintChange={() => {}}
+        onBind={() => {}}
+        onGenerate={() => {}}
+        onCompose={() => {}}
+        translations={t}
+      />,
+    );
+    expect(container.querySelector('.semiont-gather__footer')).not.toBeNull();
+    expect(container.textContent).toContain('Strategy');
+  });
+});

package/src/components/modals/__tests__/ResourceGenerateModal.test.tsx

@@ -0,0 +1,197 @@
+/**
+ * GENERATE-FROM-BUTTON P2/P4 — the resource-generate flow modal.
+ *
+ * Drives the step machine: configure-gather → review → configure-generation.
+ * `useResourceGather` is mocked so we control the gathered context and assert
+ * how the step wires `gather()` (incl. the Phase-4 exclusion threading) and
+ * `onGenerateSubmit`. `useSemiont` is mocked to feed the entity-type options.
+ */
+import { describe, it, expect, vi, beforeEach, type Mock } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { BehaviorSubject, of } from 'rxjs';
+import type { GatheredContext } from '@semiont/core';
+import type { GenerationConfig } from '../ConfigureGenerationStep';
+
+const RESOURCE_CONTEXT = {
+  focus: { kind: 'resource', resource: { id: 'res-1', name: 'My Resource' }, summary: 'A short summary' },
+  graph: { nodes: [{ id: 'res-1', type: 'resource', label: 'My Resource' }], edges: [] },
+  metadata: {},
+} as unknown as GatheredContext;
+
+// Mutable hook state + spies, shared with the hoisted vi.mock factory.
+const h = vi.hoisted(() => ({
+  gather: vi.fn(),
+  reset: vi.fn(),
+  state: { context: null as unknown, loading: false, error: null as Error | null },
+}));
+
+vi.mock('../../../hooks/useResourceGather', () => ({
+  useResourceGather: () => ({
+    context: h.state.context,
+    loading: h.state.loading,
+    error: h.state.error,
+    gather: h.gather,
+    reset: h.reset,
+  }),
+}));
+
+// Stable observable instance — the modal calls `entityTypes()` inline in
+// render, so a fresh observable each call would re-subscribe every render and
+// loop. The real SDK returns a cached observable; mirror that here.
+const entityTypes$ = of<string[]>(['Person', 'Topic']);
+const mockClient = { browse: { entityTypes: () => entityTypes$ } };
+const activeSession$ = new BehaviorSubject<unknown>({ client: mockClient });
+vi.mock('../../../session/SemiontProvider', async () => {
+  const actual = await vi.importActual<typeof import('../../../session/SemiontProvider')>('../../../session/SemiontProvider');
+  return { ...actual, useSemiont: () => ({ activeSession$ }) };
+});
+
+import { ResourceGenerateModal } from '../ResourceGenerateModal';
+
+const T = {
+  gatherTitle: 'Configure Gather',
+  reviewTitle: 'Review Context',
+  configureTitle: 'Configure Generation',
+  next: 'Next',
+  back: 'Back',
+  cancel: 'Cancel',
+  gatherIntro: 'Choose what to include.',
+  includeContent: 'Include content',
+  includeSummary: 'Include summary',
+  gatherDepth: 'Depth',
+  gatherMaxResources: 'Max resources',
+  gatherButton: 'Gather',
+  excludeLabel: 'Exclude from recall',
+  loadingContext: 'Gathering…',
+  failedContext: 'Failed',
+  sourceContextLabel: 'Resource',
+  connectionsLabel: 'Connections',
+  citedByLabel: 'Cited by',
+  resourceTitle: 'New resource title',
+  resourceTitlePlaceholder: 'Title…',
+  additionalInstructions: 'Additional Instructions',
+  additionalInstructionsPlaceholder: 'Optional…',
+  language: 'Language',
+  languageHelp: 'Language help',
+  creativity: 'Creativity',
+  creativityFocused: 'Focused',
+  creativityCreative: 'Creative',
+  maxLength: 'Max Length',
+  maxLengthHelp: 'Max help',
+  generate: 'Generate',
+};
+
+let onClose: Mock<() => void>;
+let onGenerateSubmit: Mock<(resourceId: string, config: GenerationConfig) => void>;
+
+function renderModal(props: Partial<React.ComponentProps<typeof ResourceGenerateModal>> = {}) {
+  return render(
+    <ResourceGenerateModal
+      isOpen
+      onClose={onClose}
+      resourceId="res-1"
+      defaultTitle="Default Title"
+      locale="en"
+      onGenerateSubmit={onGenerateSubmit}
+      translations={T}
+      {...props}
+    />,
+  );
+}
+
+describe('ResourceGenerateModal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    onClose = vi.fn<() => void>();
+    onGenerateSubmit = vi.fn<(resourceId: string, config: GenerationConfig) => void>();
+    h.state = { context: null, loading: false, error: null };
+    activeSession$.next({ client: mockClient });
+    // jsdom doesn't implement scrollIntoView; GatherContextStep may call it.
+    Element.prototype.scrollIntoView = vi.fn();
+  });
+
+  it('renders nothing when closed', () => {
+    renderModal({ isOpen: false });
+    expect(screen.queryByText('Configure Gather')).not.toBeInTheDocument();
+  });
+
+  it('opens on the configure-gather step with the exclusion options', () => {
+    renderModal();
+    expect(screen.getByText('Configure Gather')).toBeInTheDocument(); // step title
+    expect(screen.getByText('Choose what to include.')).toBeInTheDocument();
+    expect(screen.getByLabelText('Include content')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Person' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Topic' })).toBeInTheDocument();
+  });
+
+  it('submitting the gather step calls gather() and advances to review (exclusion omitted when none picked)', () => {
+    renderModal();
+    fireEvent.click(screen.getByRole('button', { name: /Gather/ }));
+    expect(h.gather).toHaveBeenCalledWith('res-1', { includeContent: true, includeSummary: true, depth: 2, maxResources: 10 });
+    expect(screen.getByText('Review Context')).toBeInTheDocument(); // step title flipped
+    expect(screen.getByRole('button', { name: /Next/ })).toBeDisabled(); // no context yet
+  });
+
+  it('threads picked entity types into the gather call', () => {
+    renderModal();
+    fireEvent.click(screen.getByRole('button', { name: 'Person' })); // select to exclude
+    fireEvent.click(screen.getByRole('button', { name: /Gather/ }));
+    expect(h.gather).toHaveBeenCalledWith('res-1', {
+      includeContent: true,
+      includeSummary: true,
+      depth: 2,
+      maxResources: 10,
+      excludeEntityTypes: ['Person'],
+    });
+  });
+
+  it('walks gather → review → configure-generation → emits onGenerateSubmit then closes', () => {
+    h.state.context = RESOURCE_CONTEXT; // gather already resolved
+    renderModal();
+
+    fireEvent.click(screen.getByRole('button', { name: /Gather/ })); // → review
+    const next = screen.getByRole('button', { name: /Next/ });
+    expect(next).toBeEnabled();
+    fireEvent.click(next); // → configure-generation
+
+    fireEvent.change(screen.getByLabelText('New resource title'), { target: { value: 'Generated Doc' } });
+    fireEvent.change(screen.getByLabelText('Save location'), { target: { value: 'generated/out.md' } });
+    fireEvent.click(screen.getByRole('button', { name: /Generate/ }));
+
+    expect(onGenerateSubmit).toHaveBeenCalledTimes(1);
+    expect(onGenerateSubmit).toHaveBeenCalledWith(
+      'res-1',
+      expect.objectContaining({
+        title: 'Generated Doc',
+        storagePath: 'file://generated/out.md',
+        context: RESOURCE_CONTEXT,
+      }),
+    );
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('Back from configure-generation returns to review', () => {
+    h.state.context = RESOURCE_CONTEXT;
+    renderModal();
+    fireEvent.click(screen.getByRole('button', { name: /Gather/ })); // → review
+    fireEvent.click(screen.getByRole('button', { name: /Next/ }));   // → configure-generation
+    expect(screen.getByText('Configure Generation')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: /Back/ }));   // → review
+    expect(screen.getByText('Review Context')).toBeInTheDocument();
+  });
+
+  it('Back from review returns to the configure-gather step', () => {
+    renderModal();
+    fireEvent.click(screen.getByRole('button', { name: /Gather/ })); // → review
+    expect(screen.getByText('Review Context')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: /Back/ })); // → configure-gather
+    expect(screen.getByText('Configure Gather')).toBeInTheDocument();
+  });
+
+  it('the header close button calls onClose', () => {
+    renderModal();
+    fireEvent.click(screen.getByLabelText('Close'));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/resource/panels/ReferencesPanel.tsx

@@ -455,6 +455,16 @@ export function ReferencesPanel({
             <AnnotateReferencesProgressWidget
               progress={progress}
               annotationType="reference"
+              cancelJobType="annotation"
+              translations={{
+                title: t('annotationProgressTitle'),
+                cancel: t('cancelAnnotation'),
+                inProgress: t('annotating'),
+                complete: t('complete'),
+                failed: t('failed'),
+                found: (count) => t('found', { count }),
+                current: (entityType) => t('current', { entityType }),
+              }}
             />
           )}
               </>