@semiont/react-ui 0.5.27 → 0.5.28

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

@@ -12,25 +12,60 @@ 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…',
+  graphPaneTitle: 'In the graph',
+  graphEmpty: 'No links yet — resolving this reference creates the first.',
+  resourceLinkLabel: 'Resource link',
+  corpusPaneTitle: 'In the corpus',
+  corpusEmpty: 'Nothing similar in the corpus.',
+  excludedReceipt: '{{types}} excluded from this recall',
+  machineRead: 'OCR',
+  score: 'Score',
+};
+
+/** Post-P3 wire shape: resourceName required, entityTypes/machineRead optional. */
+const MATCHES = [
+  { text: 'a middling passage', resourceId: 'r-mid', resourceName: 'Middling Doc', score: 0.55 },
+  { text: 'the best passage', resourceId: 'r-best', resourceName: 'Best Doc', score: 0.91,
+    entityTypes: ['Battle'], machineRead: true },
+  { text: 'a weak passage', resourceId: 'r-weak', resourceName: 'Weak Doc', score: 0.12 },
+];
+
+function withSemantic(ctx: GatheredContext, over: Record<string, unknown> = {}): GatheredContext {
+  return {
+    ...(ctx as object),
+    semanticContext: { similar: MATCHES, excludedEntityTypes: ['Question'], ...over },
+    inferredRelationshipSummary: 'Cedar County sits inside the Black Hawk Purchase.',
+  } as unknown as GatheredContext;
+}
+
+/** The annotation-wizard controls travel as ONE optional group (GFR D2). */
+const annotate = {
+  userHint: '',
+  onUserHintChange: () => {},
+  onBind: () => {},
+  onGenerate: () => {},
+  onCompose: () => {},
+  translations: {
+    search: 'Search',
+    generate: 'Generate',
+    compose: 'Compose',
+    resolutionStrategyLabel: 'Strategy',
+    userHintLabel: 'Hint',
+    userHintEffect: 'steers Search and Generate',
+    userHintPlaceholder: 'hint…',
+  },
 };
 
 function resourceContext(): GatheredContext {
   return {
     focus: {
       kind: 'resource',
-      resource: { id: 'res-1', name: 'My Resource' },
+      resource: { '@id': 'res-1', name: 'My Resource' },
       summary: 'A short summary',
       suggestedReferences: ['Suggested Topic'],
       content: { main: 'main content' },
@@ -58,6 +93,17 @@ describe('GatheredContext display — resource focus', () => {
     expect(container.textContent).toContain('Related Resource'); // peer connection from deriveViews
   });
 
+  it('loading without a pending preview stays the plain dots — the resource-gather path', () => {
+    // The composite Generate modal has its controls visible above the loading
+    // zone; only the annotation wizard passes `pending` (its known facts).
+    const { queryByText, getByText } = render(
+      <GatherContextStep context={null} contextLoading contextError={null} translations={t} />,
+    );
+    expect(getByText(t.loadingContext)).toBeInTheDocument();
+    expect(queryByText(t.graphPaneTitle)).toBeNull();
+    expect(queryByText(t.corpusPaneTitle)).toBeNull();
+  });
+
   it('GatherContextStep shows the resource strip and hides the annotation-only footer', () => {
     const { container } = render(
       <GatherContextStep
@@ -69,7 +115,7 @@ describe('GatheredContext display — resource focus', () => {
     );
     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('Suggested Topic'); // suggestedReferences entry
     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');
@@ -78,30 +124,422 @@ describe('GatheredContext display — resource focus', () => {
   });
 
   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}
+        context={annotationContext()}
         contextLoading={false}
         contextError={null}
-        userHint=""
-        onUserHintChange={() => {}}
-        onBind={() => {}}
-        onGenerate={() => {}}
-        onCompose={() => {}}
+        annotate={annotate}
         translations={t}
       />,
     );
     expect(container.querySelector('.semiont-gather__footer')).not.toBeNull();
     expect(container.textContent).toContain('Strategy');
   });
+
+  it('the quotation is contiguous prose — nothing interleaved, no monospace (GEP P1a, D6/D7)', () => {
+    // The live bug: chips injected between `text` and `after` rendered
+    // "Black Hawk [Person] [linking]'s band." — metadata interrupting the
+    // quotation it describes, mid-possessive.
+    const { container } = render(
+      <GatherContextStep
+        context={annotationContextWithTypes()}
+        contextLoading={false}
+        contextError={null}
+        annotate={annotate}
+        translations={t}
+      />,
+    );
+    const quote = container.querySelector('.semiont-gather__source-context');
+    expect(quote).not.toBeNull();
+    expect(quote!.textContent).toBe('a term b'); // before + text + after, verbatim
+    // D7: quoted document prose, not code.
+    expect(quote!.querySelector('[style*="monospace"]')).toBeNull();
+  });
+
+  it('metadata sits on the label row; the span WEARS its motivation (GEP P1b, D6)', () => {
+    const { container } = render(
+      <GatherContextStep
+        context={annotationContextWithTypes()}
+        contextLoading={false}
+        contextError={null}
+        annotate={annotate}
+        translations={t}
+      />,
+    );
+    const strip = container.querySelector('.semiont-gather__source-strip')!;
+
+    // Entity chips are tokens — they live on the label row, outside the quotation.
+    const chips = Array.from(strip.querySelectorAll('.semiont-chip'));
+    const topicChip = chips.find((c) => c.textContent === 'Topic');
+    expect(topicChip).toBeDefined();
+    expect(topicChip!.closest('.semiont-gather__source-context')).toBeNull();
+
+    // Motivation is WORN, never labeled: no chip says 'linking' —
+    expect(chips.filter((c) => c.textContent === 'linking')).toEqual([]);
+    // — the selected span carries the viewer's own class for the motivation
+    // (the registry's applied name; the motivation stylesheets declare it as a
+    // synonym of `semiont-motivation-reference`), with the hand-rolled inline
+    // highlight gone.
+    const span = strip.querySelector('.annotation-reference') as HTMLElement | null;
+    expect(span).not.toBeNull();
+    expect(span!.textContent).toBe('term');
+    expect(span!.style.backgroundColor).toBe('');
+
+    // Exactly ONE motivation-classed element: the context can place only the
+    // focal annotation, and the strip must not show more (D6 boundary).
+    const motivated = strip.querySelectorAll(
+      '.annotation-reference, .annotation-highlight, .annotation-comment, .annotation-assessment, .annotation-tag',
+    );
+    expect(motivated).toHaveLength(1);
+  });
+
+  it('suggestedReferences render as a prose list, never chips (GFR A3)', () => {
+    // The live values are full research prompts — sentences. The chip vocabulary
+    // stays for tokens (entity types, categories, counts); a pill that wraps
+    // across three lines is not a pill (GENERATE-FROM-RESOURCE D3).
+    const { container } = render(
+      <GatherContextStep
+        context={resourceContext()}
+        contextLoading={false}
+        contextError={null}
+        translations={t}
+      />,
+    );
+    const item = Array.from(container.querySelectorAll('li'))
+      .find((el) => el.textContent === 'Suggested Topic');
+    expect(item).toBeDefined();
+    expect(item!.className).not.toContain('semiont-chip');
+    // The entity-type tokens beside the summary stay chips.
+    const chipTexts = Array.from(container.querySelectorAll('.semiont-chip')).map((el) => el.textContent);
+    expect(chipTexts).toContain('Topic');
+    expect(chipTexts).not.toContain('Suggested Topic');
+  });
+
+  // ── GEP P2 — the evidence panes ─────────────────────────────────────────────
+
+  it('the graph pane shows its title and the inferred summary as prose header (P2)', () => {
+    const { container } = render(
+      <GatherContextStep
+        context={withSemantic(resourceContext())}
+        contextLoading={false} contextError={null} translations={t}
+      />,
+    );
+    const pane = container.querySelector('.semiont-gather-pane--graph');
+    expect(pane).not.toBeNull();
+    expect(pane!.textContent).toContain('In the graph');
+    expect(pane!.textContent).toContain('Cedar County sits inside the Black Hawk Purchase.');
+  });
+
+  it('the corpus pane ranks match cards by descending score, named and marked (P2, D4)', () => {
+    const { container } = render(
+      <GatherContextStep
+        context={withSemantic(resourceContext())}
+        contextLoading={false} contextError={null} translations={t}
+      />,
+    );
+    const cards = Array.from(container.querySelectorAll('.semiont-corpus__card'));
+    expect(cards).toHaveLength(3);
+    // Descending by score, whatever order the wire delivered.
+    expect(cards.map((c) => c.querySelector('.semiont-corpus__source')!.textContent))
+      .toEqual(['Best Doc', 'Middling Doc', 'Weak Doc']);
+    // The card names its source (D9's required field), shows the snippet, and
+    // formats the 0–1 cosine to two places (logged deviation — the search step's
+    // raw render is a different scale).
+    expect(cards[0]!.textContent).toContain('the best passage');
+    expect(cards[0]!.textContent).toContain('0.91');
+    // Match-level entityTypes are tokens — chips on the card.
+    expect(cards[0]!.querySelector('.semiont-chip')!.textContent).toBe('Battle');
+    // machineRead is a trust marker that appears ONLY when the flag travels.
+    expect(cards[0]!.textContent).toContain('OCR');
+    expect(cards[1]!.textContent).not.toContain('OCR');
+  });
+
+  it('the exclusion receipt renders when present, and only then (P2, D4)', () => {
+    const { container, rerender } = render(
+      <GatherContextStep
+        context={withSemantic(resourceContext())}
+        contextLoading={false} contextError={null} translations={t}
+      />,
+    );
+    expect(container.querySelector('.semiont-corpus__receipt')!.textContent)
+      .toContain('Question excluded from this recall');
+
+    rerender(
+      <GatherContextStep
+        context={withSemantic(resourceContext(), { excludedEntityTypes: [] })}
+        contextLoading={false} contextError={null} translations={t}
+      />,
+    );
+    expect(container.querySelector('.semiont-corpus__receipt')).toBeNull();
+  });
+
+  it('emptiness is evidence: each pane renders its empty-state copy (P2, D1)', () => {
+    // resourceContext() has no semanticContext and a graph whose views resolve
+    // to a connection — so build a truly empty context for both panes.
+    const empty = {
+      ...(resourceContext() as object),
+      graph: { nodes: [], edges: [] },
+    } as unknown as GatheredContext;
+    const { container } = render(
+      <GatherContextStep context={empty} contextLoading={false} contextError={null} translations={t} />,
+    );
+    expect(container.querySelector('.semiont-gather-pane--graph')!.textContent)
+      .toContain('No links yet');
+    expect(container.querySelector('.semiont-gather-pane--corpus')!.textContent)
+      .toContain('Nothing similar in the corpus.');
+  });
+
+  it('the hint sits OUTSIDE the pane grid, full width above the footer (P2, D5)', () => {
+    const { container } = render(
+      <GatherContextStep
+        context={annotationContext()}
+        contextLoading={false} contextError={null}
+        annotate={annotate} translations={t}
+      />,
+    );
+    const textarea = container.querySelector('.semiont-gather__hint-textarea');
+    expect(textarea).not.toBeNull();
+    expect(textarea!.closest('.semiont-gather__body')).toBeNull(); // out of the grid
+    expect(container.querySelector('.semiont-gather__hint-row')).not.toBeNull();
+  });
+
+  // ── GEP P4 — the graph pane's body is an actual graph ───────────────────────
+  // Post-P3 topology: a citation is its linking ANNOTATION (annotation-of → the
+  // citing resource, cites → the focal one); siblings are annotations ON the
+  // focal resource. The viz draws the derived neighborhood: focal + peers +
+  // citers + siblings; the citation's intermediary annotation collapses into
+  // its edge.
+
+  function vizContext(): GatheredContext {
+    return {
+      ...(resourceContext() as object),
+      graph: {
+        nodes: [
+          { id: 'res-1', type: 'resource', label: 'My Resource' },
+          { id: 'res-2', type: 'resource', label: 'Peer Doc', entityTypes: ['Topic'] },
+          { id: 'res-3', type: 'resource', label: 'Citing Doc' },
+          { id: 'ann-c', type: 'annotation', label: 'linking',
+            annotation: { id: 'ann-c', motivation: 'linking' } },
+          { id: 'ann-s', type: 'annotation', label: 'commenting', entityTypes: ['Person'],
+            annotation: { id: 'ann-s', motivation: 'commenting',
+              target: { source: 'res-1', selector: [
+                { type: 'TextPositionSelector', start: 5, end: 22 },
+                { type: 'TextQuoteSelector', exact: 'the disputed span' },
+              ] },
+              body: [
+                { type: 'TextualBody', value: 'Person', purpose: 'tagging' },
+                { type: 'TextualBody', value: 'a sibling note' },
+              ] } },
+        ],
+        edges: [
+          { source: 'res-1', target: 'res-2', type: 'related', bidirectional: true },
+          { source: 'ann-c', target: 'res-3', type: 'annotation-of' },
+          { source: 'ann-c', target: 'res-1', type: 'cites' },
+          { source: 'ann-s', target: 'res-1', type: 'annotation-of' },
+        ],
+      },
+    } as unknown as GatheredContext;
+  }
+
+  function renderViz() {
+    return render(
+      <GatherContextStep
+        context={vizContext()} contextLoading={false} contextError={null} translations={t}
+      />,
+    );
+  }
+
+  it('draws the neighborhood as SVG — the interim lists are gone (P4, D3)', () => {
+    const { container } = renderViz();
+    const pane = container.querySelector('.semiont-gather-pane--graph')!;
+    expect(pane.querySelector('svg')).not.toBeNull();
+    // focal + peer + citer + sibling; the citing annotation collapses into its edge
+    expect(pane.querySelectorAll('.semiont-graph__node')).toHaveLength(4);
+    expect(pane.querySelectorAll('.semiont-graph__edge')).toHaveLength(3);
+    expect(pane.querySelector('ul')).toBeNull(); // replaced, not joined
+  });
+
+  it('the focal node is visually distinct, and there is exactly one (P4)', () => {
+    const { container } = renderViz();
+    const focal = container.querySelectorAll('.semiont-graph__node--focal');
+    expect(focal).toHaveLength(1);
+    expect(focal[0]!.textContent).toContain('My Resource');
+  });
+
+  it('siblings are labeled by their quoted text — motivation and note stay in hover (P4, D11)', () => {
+    // A node that just says "linking" is uninterpretable; the annotation's
+    // identity is the text it wraps (TextQuoteSelector.exact, on the embedded
+    // W3C annotation). Motivation is conveyed by the node's styling and hover.
+    const { container } = renderViz();
+    const sibling = container.querySelector('[data-node-id="ann-s"]');
+    expect(sibling).not.toBeNull();
+    expect(sibling!.querySelector('text')!.textContent).toBe('the disputed span');
+    const title = sibling!.querySelector('title');
+    expect(title).not.toBeNull();
+    expect(title!.textContent).toContain('commenting');
+    expect(title!.textContent).toContain('a sibling note');
+    // The tagging-purpose body is the entity-type tag — hover lists the type
+    // ONCE (from entityTypes), not again as a body value.
+    expect(title!.textContent!.match(/Person/g)).toHaveLength(1);
+    // Peer hover carries its entity types.
+    expect(container.querySelector('[data-node-id="res-2"] title')!.textContent).toContain('Topic');
+  });
+
+  /** A resource-level provenance annotation: target has no selector (nothing
+   *  to quote); the body's SpecificResource names what it links to. */
+  function provenanceContext(bodySource: string): GatheredContext {
+    return {
+      ...(resourceContext() as object),
+      graph: {
+        nodes: [
+          { id: 'res-1', type: 'resource', label: 'My Resource' },
+          { id: 'res-9', type: 'resource', label: 'Generated Doc' },
+          { id: 'ann-p', type: 'annotation', label: 'linking',
+            annotation: { id: 'ann-p', motivation: 'linking',
+              target: { source: 'res-1' },
+              body: [{ type: 'SpecificResource', source: bodySource, purpose: 'linking' }] } },
+        ],
+        edges: [{ source: 'ann-p', target: 'res-1', type: 'annotation-of' }],
+      },
+    } as unknown as GatheredContext;
+  }
+
+  it('a resource-level linking annotation is labeled by what it links to, not its motivation', () => {
+    const { container } = render(<ContextSummary context={provenanceContext('res-9')} translations={t} />);
+    const node = container.querySelector('[data-node-id="ann-p"]')!;
+    expect(node.querySelector('text')!.textContent).toBe('→ Generated Doc');
+    // Hover carries the full linked name; the motivation stays hover-only.
+    expect(node.querySelector('title')!.textContent).toContain('Generated Doc');
+    expect(node.querySelector('title')!.textContent).toContain('linking');
+  });
+
+  it('an unresolvable link target falls back to the translated label — never raw vocabulary', () => {
+    const { container } = render(<ContextSummary context={provenanceContext('res-404')} translations={t} />);
+    const node = container.querySelector('[data-node-id="ann-p"]')!;
+    expect(node.querySelector('text')!.textContent).toBe('Resource link');
+  });
+
+  it('layout is deterministic — same context, same positions (P4, D3)', () => {
+    const positions = () => {
+      const { container, unmount } = renderViz();
+      const snap = Array.from(container.querySelectorAll('.semiont-graph__node rect'))
+        .map((r) => `${r.closest('[data-node-id]')!.getAttribute('data-node-id')}@${r.getAttribute('x')},${r.getAttribute('y')}`)
+        .join('|');
+      unmount();
+      return snap;
+    };
+    const first = positions();
+    expect(first.length).toBeGreaterThan(0);
+    expect(positions()).toBe(first);
+  });
+
+  // ── Graph geometry — compaction + wrap, everything draws (no-clipping) ─────
+  // The layout adapts to what's populated: absent citer/peer layers free their
+  // columns for the sibling band to wrap into, and the viewBox shrinks to the
+  // columns actually used. Nothing is ever capped or hidden — overflow rides
+  // the wizard pane's scroll.
+
+  /** Focal resource + N sibling annotations, no citers, no peers. */
+  function middleOnlyContext(siblingCount: number): GatheredContext {
+    return {
+      ...(resourceContext() as object),
+      graph: {
+        nodes: [
+          { id: 'res-1', type: 'resource', label: 'My Resource' },
+          ...Array.from({ length: siblingCount }, (_, i) => ({
+            id: `ann-${i}`, type: 'annotation', label: 'commenting',
+            annotation: { id: `ann-${i}`, motivation: 'commenting',
+              target: { source: 'res-1', selector: [
+                { type: 'TextQuoteSelector', exact: `span ${i}` },
+              ] },
+              body: [] },
+          })),
+        ],
+        edges: Array.from({ length: siblingCount }, (_, i) => ({
+          source: `ann-${i}`, target: 'res-1', type: 'annotation-of',
+        })),
+      },
+    } as unknown as GatheredContext;
+  }
+
+  describe('graph geometry adapts to the populated layers', () => {
+    it('a lone sibling collapses to one natural-size column — no dead thirds', () => {
+      const { container } = render(<ContextSummary context={middleOnlyContext(1)} translations={t} />);
+      const svg = container.querySelector('svg')!;
+      // One 180-wide column + margins; two rows (focal above, sibling below).
+      expect(svg.getAttribute('viewBox')).toBe('0 0 196 120');
+      // Natural-size cap: 1 viewBox unit never exceeds 1px, so a narrow graph
+      // renders small instead of stretching to fill the pane.
+      expect((svg as SVGElement).style.maxWidth).toBe('196px');
+    });
+
+    it('siblings wrap into the freed columns instead of chaining (5 → 3-across grid)', () => {
+      const { container } = render(<ContextSummary context={middleOnlyContext(5)} translations={t} />);
+      const svg = container.querySelector('svg')!;
+      // Three columns, three rows (focal + two sibling rows) — not six rows.
+      expect(svg.getAttribute('viewBox')).toBe('0 0 628 172');
+      const rects = Array.from(container.querySelectorAll('.semiont-graph__node--annotation rect'));
+      expect(new Set(rects.map((r) => r.getAttribute('x')))).toEqual(new Set(['8', '224', '440']));
+      expect(Math.max(...rects.map((r) => Number(r.getAttribute('y'))))).toBe(112); // row 2
+    });
+
+    it('wrap compacts, never clips — every sibling and edge still draws', () => {
+      const { container } = render(<ContextSummary context={middleOnlyContext(11)} translations={t} />);
+      expect(container.querySelectorAll('.semiont-graph__node--annotation')).toHaveLength(11);
+      expect(container.querySelectorAll('.semiont-graph__edge--annotation-of')).toHaveLength(11);
+    });
+
+    it('a fully populated graph keeps the three-layer full-width shape', () => {
+      // vizContext has citers AND peers — no freed columns, the middle band
+      // stays a single column and the chain is the correct rendering.
+      const { container } = renderViz();
+      const svg = container.querySelector('svg')!;
+      expect(svg.getAttribute('viewBox')!.startsWith('0 0 628 ')).toBe(true);
+    });
+
+    it('the floating cited-line caption is gone — the drawn citer nodes ARE the count', () => {
+      const { container } = renderViz();
+      const pane = container.querySelector('.semiont-gather-pane--graph')!;
+      expect(container.querySelector('[data-node-id="res-3"]')).not.toBeNull(); // citer drawn
+      expect(pane.querySelector('.semiont-graph__cited-line')).toBeNull();
+      expect(pane.textContent).not.toContain('Cited by (1)');
+    });
+  });
+
+  it('an annotation focus WITHOUT the annotate group renders display-only (GFR A2)', () => {
+    // The resolution controls belong to the caller that can serve them. A
+    // display-only caller must never get a hint textarea wired to nothing —
+    // which is what the old always-on gate produced for an annotation focus.
+    const { container } = render(
+      <GatherContextStep
+        context={annotationContext()}
+        contextLoading={false}
+        contextError={null}
+        translations={t}
+      />,
+    );
+    expect(container.querySelector('.semiont-gather__footer')).toBeNull();
+    expect(container.querySelector('.semiont-gather__hint-textarea')).toBeNull();
+  });
 });
+
+function annotationContext(): GatheredContext {
+  return {
+    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;
+}
+
+/** Same annotation focus, with anchor entity types — the GEP P1 chip fixtures. */
+function annotationContextWithTypes(): GatheredContext {
+  const ctx = annotationContext() as GatheredContext & { metadata: { entityTypes?: string[] } };
+  ctx.metadata = { entityTypes: ['Topic'] };
+  return ctx;
+}