@semiont/react-ui 0.5.8 → 0.5.10

package/src/components/__tests__/AnnotateReferencesProgressWidget.test.tsx

@@ -7,76 +7,56 @@ import type { components } from '@semiont/core';
 
 type JobProgress = components['schemas']['JobProgress'];
 
+// The widget no longer reads translations internally — the caller supplies the
+// copy + cancel job type. These are the annotation-flow values for these tests.
+const tr = {
+  title: 'Annotating',
+  cancel: 'Cancel',
+  inProgress: 'In progress',
+  complete: 'Complete',
+  failed: 'Failed',
+  found: (count: number) => `Found ${count}`,
+  current: (entityType: string) => `Current ${entityType}`,
+};
+
+function renderWidget(progress: JobProgress | null, opts?: { returnEventBus?: boolean }) {
+  return renderWithProviders(
+    <AnnotateReferencesProgressWidget progress={progress} cancelJobType="annotation" translations={tr} />,
+    opts,
+  );
+}
+
 describe('AnnotateReferencesProgressWidget', () => {
   it('returns null when progress is null', () => {
-    const { container } = renderWithProviders(
-      <AnnotateReferencesProgressWidget progress={null} />
-    );
-
+    const { container } = renderWidget(null);
     expect(container.firstChild).toBeNull();
   });
 
   it('renders progress with stage message', () => {
-    const progress: JobProgress = {
-      stage: 'in-progress',
-      percentage: 50,
-      message: 'Processing entities...',
-    };
-
-    renderWithProviders(
-      <AnnotateReferencesProgressWidget progress={progress} />
-    );
-
+    const progress: JobProgress = { stage: 'in-progress', percentage: 50, message: 'Processing entities...' };
+    renderWidget(progress);
     expect(screen.getByText('Processing entities...')).toBeInTheDocument();
   });
 
   it('shows cancel button when not complete', () => {
-    const progress: JobProgress = {
-      stage: 'in-progress',
-      percentage: 30,
-      message: 'Working...',
-    };
-
-    renderWithProviders(
-      <AnnotateReferencesProgressWidget progress={progress} />
-    );
-
-    const cancelButton = screen.getByTitle('ReferencesPanel.cancelAnnotation');
-    expect(cancelButton).toBeInTheDocument();
+    const progress: JobProgress = { stage: 'in-progress', percentage: 30, message: 'Working...' };
+    renderWidget(progress);
+    expect(screen.getByTitle('Cancel')).toBeInTheDocument();
   });
 
   it('hides cancel button when complete', () => {
-    const progress: JobProgress = {
-      stage: 'complete',
-      percentage: 100,
-      message: '',
-    };
-
-    renderWithProviders(
-      <AnnotateReferencesProgressWidget progress={progress} />
-    );
-
-    expect(screen.queryByTitle('ReferencesPanel.cancelAnnotation')).not.toBeInTheDocument();
+    const progress: JobProgress = { stage: 'complete', percentage: 100, message: '' };
+    renderWidget(progress);
+    expect(screen.queryByTitle('Cancel')).not.toBeInTheDocument();
   });
 
   it('emits job:cancel-requested on cancel click', () => {
     const handler = vi.fn();
-    const progress: JobProgress = {
-      stage: 'in-progress',
-      percentage: 40,
-      message: 'Working...',
-    };
-
-    const { eventBus } = renderWithProviders(
-      <AnnotateReferencesProgressWidget progress={progress} />,
-      { returnEventBus: true }
-    );
+    const progress: JobProgress = { stage: 'in-progress', percentage: 40, message: 'Working...' };
+    const { eventBus } = renderWidget(progress, { returnEventBus: true });
 
     const subscription = eventBus!.get('job:cancel-requested').subscribe(handler);
-
-    const cancelButton = screen.getByTitle('ReferencesPanel.cancelAnnotation');
-    fireEvent.click(cancelButton);
-
+    fireEvent.click(screen.getByTitle('Cancel'));
     expect(handler).toHaveBeenCalledWith({ jobType: 'annotation' });
 
     subscription.unsubscribe();
@@ -92,60 +72,30 @@ describe('AnnotateReferencesProgressWidget', () => {
         { entityType: 'Organization', foundCount: 3 },
       ],
     };
-
-    renderWithProviders(
-      <AnnotateReferencesProgressWidget progress={progress} />
-    );
-
+    renderWidget(progress);
     expect(screen.getByText('Person:')).toBeInTheDocument();
     expect(screen.getByText('Organization:')).toBeInTheDocument();
-    // Translation mock returns "ReferencesPanel.found" for each entity type
-    const foundLabels = screen.getAllByText('ReferencesPanel.found');
-    expect(foundLabels).toHaveLength(2);
+    expect(screen.getByText('Found 5')).toBeInTheDocument();
+    expect(screen.getByText('Found 3')).toBeInTheDocument();
   });
 
   it('shows complete icon for complete stage', () => {
-    const progress: JobProgress = {
-      stage: 'complete',
-      percentage: 100,
-      message: '',
-    };
-
-    const { container } = renderWithProviders(
-      <AnnotateReferencesProgressWidget progress={progress} />
-    );
-
+    const progress: JobProgress = { stage: 'complete', percentage: 100, message: '' };
+    const { container } = renderWidget(progress);
     expect(container.querySelector('[data-status="complete"]')).toBeInTheDocument();
-    expect(screen.getByText('ReferencesPanel.complete')).toBeInTheDocument();
+    expect(screen.getByText('Complete')).toBeInTheDocument();
   });
 
   it('shows error message for error stage', () => {
-    const progress: JobProgress = {
-      stage: 'error',
-      percentage: 0,
-      message: 'Something went wrong',
-    };
-
-    const { container } = renderWithProviders(
-      <AnnotateReferencesProgressWidget progress={progress} />
-    );
-
+    const progress: JobProgress = { stage: 'error', percentage: 0, message: 'Something went wrong' };
+    const { container } = renderWidget(progress);
     expect(container.querySelector('[data-status="error"]')).toBeInTheDocument();
     expect(screen.getByText('Something went wrong')).toBeInTheDocument();
   });
 
   it('shows current entity type processing details', () => {
-    const progress: JobProgress = {
-      stage: 'in-progress',
-      percentage: 50,
-      message: '',
-      currentEntityType: 'Location',
-    };
-
-    renderWithProviders(
-      <AnnotateReferencesProgressWidget progress={progress} />
-    );
-
+    const progress: JobProgress = { stage: 'in-progress', percentage: 50, message: '', currentEntityType: 'Location' };
+    renderWidget(progress);
     expect(screen.getByText(/Processing: Location/)).toBeInTheDocument();
   });
 });

package/src/components/modals/ConfigureGatherStep.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import React, { useState } from 'react';
+
+export interface ResourceGatherConfig {
+  depth: number;
+  maxResources: number;
+  includeContent: boolean;
+  includeSummary: boolean;
+}
+
+export interface ConfigureGatherStepProps {
+  defaults?: Partial<ResourceGatherConfig>;
+  onGather: (config: ResourceGatherConfig) => void;
+  onCancel: () => void;
+  translations: {
+    intro: string;
+    includeContent: string;
+    includeSummary: string;
+    depth: string;
+    maxResources: string;
+    cancel: string;
+    gather: string;
+  };
+  /** Slot for the exclusion multi-select (GENERATE-FROM-BUTTON Phase 4). */
+  children?: React.ReactNode;
+}
+
+/**
+ * First step of the resource-generate flow: pick the gather options before
+ * `gather.resource` runs. The `children` slot hosts the entity-type exclusion
+ * multi-select (Phase 4).
+ */
+export function ConfigureGatherStep({ defaults, onGather, onCancel, translations: t, children }: ConfigureGatherStepProps) {
+  const [includeContent, setIncludeContent] = useState(defaults?.includeContent ?? true);
+  const [includeSummary, setIncludeSummary] = useState(defaults?.includeSummary ?? true);
+  const [depth, setDepth] = useState(defaults?.depth ?? 2);
+  const [maxResources, setMaxResources] = useState(defaults?.maxResources ?? 10);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onGather({ includeContent, includeSummary, depth, maxResources });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="semiont-form semiont-form--scrollable">
+      <p className="semiont-form__helper-text">{t.intro}</p>
+
+      <div className="semiont-form__checkbox-field">
+        <label className="semiont-form__checkbox-label">
+          <input type="checkbox" checked={includeContent} onChange={(e) => setIncludeContent(e.target.checked)} />
+          {t.includeContent}
+        </label>
+      </div>
+      <div className="semiont-form__checkbox-field">
+        <label className="semiont-form__checkbox-label">
+          <input type="checkbox" checked={includeSummary} onChange={(e) => setIncludeSummary(e.target.checked)} />
+          {t.includeSummary}
+        </label>
+      </div>
+
+      <div className="semiont-form__inline-row">
+        <div className="semiont-form__field semiont-form__field--inline semiont-form__field--narrow">
+          <label htmlFor="gather-depth" className="semiont-form__label">{t.depth}</label>
+          <input
+            id="gather-depth"
+            type="number"
+            min="1"
+            max="5"
+            value={depth}
+            onChange={(e) => setDepth(parseInt(e.target.value))}
+            className="semiont-input"
+          />
+        </div>
+        <div className="semiont-form__field semiont-form__field--inline semiont-form__field--narrow">
+          <label htmlFor="gather-max" className="semiont-form__label">{t.maxResources}</label>
+          <input
+            id="gather-max"
+            type="number"
+            min="1"
+            max="50"
+            value={maxResources}
+            onChange={(e) => setMaxResources(parseInt(e.target.value))}
+            className="semiont-input"
+          />
+        </div>
+      </div>
+
+      {/* Exclusion multi-select slot (Phase 4) */}
+      {children}
+
+      <div className="semiont-modal__actions" style={{ paddingTop: '0.5rem' }}>
+        <button type="button" onClick={onCancel} className="semiont-button--secondary semiont-button--flex">
+          ✕ {t.cancel}
+        </button>
+        <button type="submit" className="semiont-button--primary semiont-button--flex">
+          ✨ {t.gather}
+        </button>
+      </div>
+    </form>
+  );
+}

package/src/components/modals/ContextSummary.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { GatheredContext } from '@semiont/core';
+import { deriveViews, type GatheredContext } from '@semiont/core';
 
 export interface ContextSummaryTranslations {
   sourceContextLabel: string;
@@ -16,14 +16,23 @@ export interface ContextSummaryProps {
 }
 
 export function ContextSummary({ context, translations: t }: ContextSummaryProps) {
-  const graphContext = context.graphContext;
-  const connections = graphContext?.connections ?? [];
-  const citedBy = graphContext?.citedBy ?? [];
-  const citedByCount = graphContext?.citedByCount ?? 0;
+  // Graph views are focus-agnostic — only the focal resource id (and an optional
+  // focal annotation id) differ by kind.
+  const mainResourceId = context.focus.kind === 'annotation'
+    ? String(context.focus.sourceResource.id)
+    : String(context.focus.resource.id);
+  const focalAnnotationId = context.focus.kind === 'annotation'
+    ? context.focus.annotation.id
+    : undefined;
+  const { connections, citedBy, citedByCount } = deriveViews(
+    context.graph,
+    mainResourceId,
+    focalAnnotationId,
+  );
 
   return (
     <>
-      {graphContext && (connections.length > 0 || citedByCount > 0) && (
+      {(connections.length > 0 || citedByCount > 0) && (
         <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
 
           {connections.length > 0 && (

package/src/components/modals/GatherContextStep.tsx

@@ -9,11 +9,12 @@ export interface GatherContextStepProps {
   context: GatheredContext | null;
   contextLoading: boolean;
   contextError: Error | null;
-  userHint: string;
-  onUserHintChange: (value: string) => void;
-  onBind: () => void;
-  onGenerate: () => void;
-  onCompose: () => void;
+  /** Annotation-wizard controls. Omit for a display-only (e.g. resource-focus) render. */
+  userHint?: string;
+  onUserHintChange?: (value: string) => void;
+  onBind?: () => void;
+  onGenerate?: () => void;
+  onCompose?: () => void;
   translations: {
     title: string;
     loadingContext: string;
@@ -29,7 +30,7 @@ export function GatherContextStep({
   context,
   contextLoading,
   contextError,
-  userHint,
+  userHint = '',
   onUserHintChange,
   onBind,
   onGenerate,
@@ -38,7 +39,8 @@ export function GatherContextStep({
 }: GatherContextStepProps) {
   const [sourceExpanded, setSourceExpanded] = useState(false);
   const contextReady = !contextLoading && !contextError && !!context;
-  const sourceContext = context?.sourceContext;
+  const focus = context?.focus.kind === 'annotation' ? context.focus : null;
+  const resourceFocus = context?.focus.kind === 'resource' ? context.focus : null;
   const highlightRef = useRef<HTMLSpanElement>(null);
 
   // Scroll the highlighted term into view when context loads
@@ -69,16 +71,16 @@ export function GatherContextStep({
 
       {context && (
         <>
-          {/* Full-width source context strip */}
-          {sourceContext && (
+          {/* Full-width source context strip — annotation focus */}
+          {focus?.selected && (
             <div className="semiont-gather__source-strip">
               <label className="semiont-form__label" style={{ marginBottom: '0.375rem' }}>
-                {t.sourceContextLabel}{context.sourceResource?.name ? ` "${context.sourceResource.name}"` : ''}
+                {t.sourceContextLabel}{focus.sourceResource.name ? ` "${focus.sourceResource.name}"` : ''}
               </label>
               <div className={`semiont-gather__source-box${sourceExpanded ? ' semiont-gather__source-box--expanded' : ''}`}>
                 <div className="semiont-gather__source-context">
                   <div style={{ fontSize: 'var(--semiont-text-sm)', fontFamily: 'monospace', whiteSpace: 'pre-wrap', color: 'var(--semiont-text-secondary)' }}>
-                    {sourceContext.before && <span>{sourceContext.before}</span>}
+                    {focus.selected.before && <span>{focus.selected.before}</span>}
                     <span
                       ref={highlightRef}
                       style={{
@@ -88,19 +90,19 @@ export function GatherContextStep({
                         color: 'var(--semiont-color-primary-900)',
                       }}
                     >
-                      {sourceContext.selected}
+                      {focus.selected.text}
                     </span>
                     {(context.metadata?.entityTypes ?? []).map(et => (
                       <span key={et} className="semiont-chip" style={{ fontSize: 'var(--semiont-text-xs)', padding: '0.125rem 0.375rem', fontWeight: 400, verticalAlign: 'middle', marginLeft: '0.25rem' }}>
                         {et}
                       </span>
                     ))}
-                    {context.annotation?.motivation && (
+                    {focus.annotation.motivation && (
                       <span className="semiont-chip" style={{ fontSize: 'var(--semiont-text-xs)', padding: '0.125rem 0.375rem', fontWeight: 400, verticalAlign: 'middle', marginLeft: '0.25rem' }}>
-                        {context.annotation.motivation}
+                        {focus.annotation.motivation}
                       </span>
                     )}
-                    {sourceContext.after && <span>{sourceContext.after}</span>}
+                    {focus.selected.after && <span>{focus.selected.after}</span>}
                   </div>
                 </div>
                 <button
@@ -114,60 +116,103 @@ export function GatherContextStep({
             </div>
           )}
 
+          {/* Full-width source context strip — resource focus */}
+          {resourceFocus && (
+            <div className="semiont-gather__source-strip">
+              <label className="semiont-form__label" style={{ marginBottom: '0.375rem' }}>
+                {t.sourceContextLabel}{resourceFocus.resource.name ? ` "${resourceFocus.resource.name}"` : ''}
+              </label>
+              {(resourceFocus.summary || resourceFocus.content?.main) && (
+                <div className={`semiont-gather__source-box${sourceExpanded ? ' semiont-gather__source-box--expanded' : ''}`}>
+                  <div className="semiont-gather__source-context">
+                    <div style={{ fontSize: 'var(--semiont-text-sm)', whiteSpace: 'pre-wrap', color: 'var(--semiont-text-secondary)' }}>
+                      {resourceFocus.summary ?? resourceFocus.content?.main}
+                      {(context.metadata?.entityTypes ?? []).map(et => (
+                        <span key={et} className="semiont-chip" style={{ fontSize: 'var(--semiont-text-xs)', padding: '0.125rem 0.375rem', fontWeight: 400, verticalAlign: 'middle', marginLeft: '0.25rem' }}>
+                          {et}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    className="semiont-gather__expand-btn"
+                    onClick={() => setSourceExpanded(v => !v)}
+                  >
+                    {sourceExpanded ? '▲ less' : '▼ more'}
+                  </button>
+                </div>
+              )}
+              {resourceFocus.suggestedReferences && resourceFocus.suggestedReferences.length > 0 && (
+                <div style={{ marginTop: '0.5rem' }}>
+                  {resourceFocus.suggestedReferences.map(ref => (
+                    <span key={ref} className="semiont-chip" style={{ fontSize: 'var(--semiont-text-xs)', padding: '0.125rem 0.375rem', marginRight: '0.25rem' }}>
+                      {ref}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
           {/* Two-column body */}
           <div className="semiont-gather__body">
-            {/* Left: annotation metadata */}
+            {/* Left: context summary (graph views) */}
             <div className="semiont-gather__left">
               <ContextSummary context={context} translations={t} />
             </div>
 
-            {/* Right: hint textarea */}
-            <div className="semiont-gather__right">
-              <div className="semiont-form__field">
-                <label className="semiont-form__label">
-                  {t.userHintLabel}
-                </label>
-                <textarea
-                  value={userHint}
-                  onChange={(e) => onUserHintChange(e.target.value)}
-                  placeholder={t.userHintPlaceholder}
-                  className="semiont-search-modal__search-input semiont-gather__hint-textarea"
-                  style={{ resize: 'vertical', fontFamily: 'inherit' }}
-                />
+            {/* Right: hint textarea (annotation focus only) */}
+            {focus && (
+              <div className="semiont-gather__right">
+                <div className="semiont-form__field">
+                  <label className="semiont-form__label">
+                    {t.userHintLabel}
+                  </label>
+                  <textarea
+                    value={userHint}
+                    onChange={(e) => onUserHintChange?.(e.target.value)}
+                    placeholder={t.userHintPlaceholder}
+                    className="semiont-search-modal__search-input semiont-gather__hint-textarea"
+                    style={{ resize: 'vertical', fontFamily: 'inherit' }}
+                  />
+                </div>
               </div>
-            </div>
+            )}
           </div>
 
-          {/* Full-width footer: resolution strategy */}
-          <div className="semiont-gather__footer">
-            <div className="semiont-gather__footer-label">{t.resolutionStrategyLabel}</div>
-            <div className="semiont-gather__actions">
-              <button
-                type="button"
-                onClick={onBind}
-                disabled={!contextReady}
-                className="semiont-button--primary semiont-button--flex"
-              >
-                🔍 {t.search}…
-              </button>
-              <button
-                type="button"
-                onClick={onGenerate}
-                disabled={!contextReady}
-                className="semiont-button--primary semiont-button--flex"
-              >
-                ✨ {t.generate}…
-              </button>
-              <button
-                type="button"
-                onClick={onCompose}
-                disabled={!contextReady}
-                className="semiont-button--secondary semiont-button--flex"
-              >
-                ✍️ {t.compose}
-              </button>
+          {/* Full-width footer: resolution strategy (annotation focus only) */}
+          {focus && (
+            <div className="semiont-gather__footer">
+              <div className="semiont-gather__footer-label">{t.resolutionStrategyLabel}</div>
+              <div className="semiont-gather__actions">
+                <button
+                  type="button"
+                  onClick={onBind}
+                  disabled={!contextReady}
+                  className="semiont-button--primary semiont-button--flex"
+                >
+                  🔍 {t.search}…
+                </button>
+                <button
+                  type="button"
+                  onClick={onGenerate}
+                  disabled={!contextReady}
+                  className="semiont-button--primary semiont-button--flex"
+                >
+                  ✨ {t.generate}…
+                </button>
+                <button
+                  type="button"
+                  onClick={onCompose}
+                  disabled={!contextReady}
+                  className="semiont-button--secondary semiont-button--flex"
+                >
+                  ✍️ {t.compose}
+                </button>
+              </div>
             </div>
-          </div>
+          )}
         </>
       )}
     </div>