@semiont/react-ui 0.5.26 → 0.5.28

package/src/components/resource/panels/__tests__/HighlightPanel.annotationProgress.test.tsx

@@ -22,7 +22,7 @@ import type { Annotation, AnnotationId } from '@semiont/core';
 
 // Mock translations - simulates useTranslations('HighlightPanel')
 // The mock receives keys like 'title', 'noHighlights', etc. and returns translated strings
-const mockT = vi.fn((key: string) => {
+const mockT = vi.fn((key: string, params?: Record<string, unknown>) => {
   const translations: Record<string, string> = {
     title: 'Highlights',
     noHighlights: 'No highlights yet',
@@ -34,8 +34,31 @@ const mockT = vi.fn((key: string) => {
     densitySparse: 'Sparse',
     densityDense: 'Dense',
     annotate: 'Annotate',
+    annotating: 'Annotating...',
   };
-  return translations[key] || key;
+  // P3: the coded status line. Interpolates `{{var}}` like production —
+  // a mock that ignored params would let copy that cannot interpolate in the
+  // app still pass here.
+  Object.assign(translations, {
+    codeLoading: 'Loading…',
+    codeAnalyzing: 'Marking…',
+    codeDetectingEntities: 'Marking…',
+    codeCompleteCreated: 'Created {{count}} {{kind}}',
+    kindHighlight: 'highlights',
+    subject: '{{kind}}: {{label}}',
+    subjectWithPosition: '{{kind}}: {{label}} ({{done}} of {{total}})',
+    subjectKindEntityType: 'Entity type',
+    subjectKindCategory: 'Category',
+    // CLEAN-PROGRESS D3: the widget's own strings now come from the
+    // AssistProgress namespace, not from each panel's.
+    cancel: 'Cancel',
+    inProgress: 'Annotating...',
+  });
+  let out = translations[key] || key;
+  for (const [k, v] of Object.entries((params ?? {}) as Record<string, unknown>)) {
+    out = out.replace(`{{${k}}}`, String(v));
+  }
+  return out;
 });
 
 vi.mock('../../../../contexts/TranslationContext', () => ({
@@ -85,16 +108,14 @@ describe('HighlightPanel + AssistSection Integration', () => {
           pendingAnnotation={null}
           isAssisting={true}
           progress={{
-            stage: 'analyzing',
             percentage: 30,
-            message: 'Analyzing text for highlights...',
           }}
           annotateMode={true}
         />
       );
 
       // Verify AssistSection received and rendered the progress
-      expect(screen.getByText('Analyzing text for highlights...')).toBeInTheDocument();
+      expect(screen.getByText('Annotating...')).toBeInTheDocument();
     });
 
     it('should pass null progress to AssistSection', () => {
@@ -136,16 +157,15 @@ describe('HighlightPanel + AssistSection Integration', () => {
           pendingAnnotation={null}
           isAssisting={false}
           progress={{
-            stage: 'complete',
+            message: { code: 'complete-created', count: 3, kind: 'highlight' },
             percentage: 100,
-            message: 'Complete! Created 14 highlights',
           }}
           annotateMode={true}
         />
       );
 
       // Progress should still be visible
-      expect(screen.getByText('Complete! Created 14 highlights')).toBeInTheDocument();
+      expect(screen.getByText('Created 3 highlights')).toBeInTheDocument();
       // Form should NOT be visible
       expect(screen.queryByPlaceholderText('Enter custom instructions...')).not.toBeInTheDocument();
     });
@@ -157,19 +177,17 @@ describe('HighlightPanel + AssistSection Integration', () => {
           pendingAnnotation={null}
           isAssisting={true}
           progress={{
-            stage: 'analyzing',
             percentage: 0,
-            message: 'Analyzing...',
             requestParams: [
-              { label: 'Instructions', value: 'Find important points' },
-              { label: 'Density', value: '5' },
+              { label: 'instructions', value: 'Find important points' },
+              { label: 'density', value: '5' },
             ],
           }}
           annotateMode={true}
         />
       );
 
-      expect(screen.getByText('paramsTitle')).toBeInTheDocument();
+      expect(screen.getByTestId('semiont-assist-params')).toBeInTheDocument();
       expect(screen.getByText('Find important points')).toBeInTheDocument();
       expect(screen.getByText('5')).toBeInTheDocument();
     });
@@ -211,15 +229,13 @@ describe('HighlightPanel + AssistSection Integration', () => {
           pendingAnnotation={null}
           isAssisting={true}
           progress={{
-            stage: 'analyzing',
             percentage: 0,
-            message: 'Analyzing...',
           }}
           annotateMode={true}
         />
       );
 
-      expect(screen.getByText('Analyzing...')).toBeInTheDocument();
+      expect(screen.getByText('Annotating...')).toBeInTheDocument();
 
       // Switch to browse mode
       rerender(
@@ -228,16 +244,14 @@ describe('HighlightPanel + AssistSection Integration', () => {
           pendingAnnotation={null}
           isAssisting={true}
           progress={{
-            stage: 'analyzing',
             percentage: 0,
-            message: 'Analyzing...',
           }}
           annotateMode={false}
         />
       );
 
       // Progress should be hidden
-      expect(screen.queryByText('Analyzing...')).not.toBeInTheDocument();
+      expect(screen.queryByText('Annotating...')).not.toBeInTheDocument();
     });
   });
 
@@ -264,16 +278,15 @@ describe('HighlightPanel + AssistSection Integration', () => {
           pendingAnnotation={null}
           isAssisting={false}
           progress={{
-            stage: 'complete',
+            message: { code: 'complete-created', count: 3, kind: 'highlight' },
             percentage: 100,
-            message: 'Done!',
           }}
           annotateMode={true}
         />
       );
 
       // Progress should be visible
-      expect(screen.getByText('Done!')).toBeInTheDocument();
+      expect(screen.getByText('Created 3 highlights')).toBeInTheDocument();
       // Form should be hidden
       expect(screen.queryByPlaceholderText('Enter custom instructions...')).not.toBeInTheDocument();
     });
@@ -285,15 +298,15 @@ describe('HighlightPanel + AssistSection Integration', () => {
           pendingAnnotation={null}
           isAssisting={true}
           progress={{
-            stage: 'started',
             percentage: 0,
-            message: 'Starting...',
           }}
           annotateMode={true}
         />
       );
 
-      expect(screen.getByText('Starting...')).toBeInTheDocument();
+      // Stage is the observable across non-terminal updates now that the
+      // status text is a single translated string (the wire carries codes).
+      expect(document.querySelector('.semiont-assist-progress')).toHaveAttribute('data-ended', 'false');
 
       // Update to analyzing
       rerender(
@@ -302,16 +315,14 @@ describe('HighlightPanel + AssistSection Integration', () => {
           pendingAnnotation={null}
           isAssisting={true}
           progress={{
-            stage: 'analyzing',
             percentage: 50,
-            message: 'Analyzing...',
           }}
           annotateMode={true}
         />
       );
 
-      expect(screen.queryByText('Starting...')).not.toBeInTheDocument();
-      expect(screen.getByText('Analyzing...')).toBeInTheDocument();
+      expect(document.querySelector('.semiont-assist-progress')).toHaveAttribute('data-ended', 'false');
+      expect(screen.getByText('Annotating...')).toBeInTheDocument();
 
       // Update to complete
       rerender(
@@ -320,16 +331,15 @@ describe('HighlightPanel + AssistSection Integration', () => {
           pendingAnnotation={null}
           isAssisting={false}
           progress={{
-            stage: 'complete',
+            message: { code: 'complete-created', count: 3, kind: 'highlight' },
             percentage: 100,
-            message: 'Complete!',
           }}
           annotateMode={true}
         />
       );
 
-      expect(screen.queryByText('Analyzing...')).not.toBeInTheDocument();
-      expect(screen.getByText('Complete!')).toBeInTheDocument();
+      expect(screen.queryByText('Annotating...')).not.toBeInTheDocument();
+      expect(screen.getByText('Created 3 highlights')).toBeInTheDocument();
     });
   });
 
@@ -341,16 +351,14 @@ describe('HighlightPanel + AssistSection Integration', () => {
           pendingAnnotation={null}
           isAssisting={true}
           progress={{
-            stage: 'analyzing',
             percentage: 0,
-            message: 'Analyzing...',
           }}
           annotateMode={true}
         />
       );
 
       // Both progress and highlights should be visible
-      expect(screen.getByText('Analyzing...')).toBeInTheDocument();
+      expect(screen.getByText('Annotating...')).toBeInTheDocument();
       expect(screen.getByText('Highlights')).toBeInTheDocument();
     });
 

package/src/components/resource/panels/__tests__/ReferenceEntry.test.tsx

@@ -94,6 +94,24 @@ describe('ReferenceEntry', () => {
     mockGetEntityTypes.mockReturnValue([]);
   });
 
+  // RESOLUTION-SPARKLE D6: a just-resolved reference announces itself on the
+  // panel entry's icon with the same `.annotation-sparkle` glow the document
+  // span uses. The host decides WHEN (membership in the sparkle set); the
+  // entry only renders the boolean.
+  describe('Resolution sparkle', () => {
+    it('carries the sparkle animation on the icon when sparkle is set', () => {
+      const { container } = renderEntry({ sparkle: true });
+
+      expect(container.querySelector('.semiont-reference-icon')).toHaveClass('annotation-sparkle');
+    });
+
+    it('does not sparkle by default', () => {
+      const { container } = renderEntry();
+
+      expect(container.querySelector('.semiont-reference-icon')).not.toHaveClass('annotation-sparkle');
+    });
+  });
+
   describe('Rendering', () => {
     it('should render the selected text in quotes', () => {
       renderEntry();
@@ -172,6 +190,29 @@ describe('ReferenceEntry', () => {
 
       expect(screen.getByText(/My Linked Document/)).toBeInTheDocument();
     });
+
+    it('a resource-level derivation headlines Derived, never the generic type label', () => {
+      // The provenance edge minted by resource-focus generation: no selector
+      // (nothing to quote), resolved body naming the derived resource. The
+      // generic "Annotation" label said nothing — the qualifier says what
+      // the entry IS; the link line below says what it points at. Inference
+      // is from shape (the wire vocabulary deliberately has no 'deriving'
+      // purpose); the unresolved case keeps the plain type label.
+      mockGetAnnotationExactText.mockReturnValue('');
+      mockIsBodyResolved.mockReturnValue(true);
+      mockGetBodySource.mockReturnValue('gen-doc');
+
+      const provenanceRef = {
+        ...createMockReference({ target: { source: 'resource-1' } }),
+        _resolvedDocumentName: 'generated from Cedar County, Iowa',
+      };
+
+      renderEntry({ reference: provenanceRef as Annotation });
+
+      expect(screen.getByText('ReferencesPanel.derived')).toBeInTheDocument();
+      expect(screen.queryByText('Annotation')).not.toBeInTheDocument();
+      expect(screen.getByText(/generated from Cedar County, Iowa/)).toBeInTheDocument();
+    });
   });
 
   describe('Entity types', () => {
@@ -236,7 +277,6 @@ describe('ReferenceEntry', () => {
 
       expect(clickHandler).toHaveBeenCalledWith({
         annotationId: 'ref-1',
-        motivation: 'linking',
       });
 
       subscription.unsubscribe();

package/src/components/resource/panels/__tests__/ReferencesPanel.headless.test.tsx

@@ -82,7 +82,7 @@ describe('ReferencesPanel — headless (session prop, no providers)', () => {
     expect(entryText).toBeInTheDocument();
 
     fireEvent.click(entryText);
-    expect(client.browse.click).toHaveBeenCalledWith('ref-1', 'linking');
+    expect(client.browse.click).toHaveBeenCalledWith('ref-1');
   });
 
   describe('incoming references — terminal load failure', () => {

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

@@ -4,7 +4,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { ReferencesPanel } from '../ReferencesPanel';
-import type { EventBus } from '@semiont/core';
+import type { Annotation, AnnotationId, EventBus } from '@semiont/core';
 import type { SemiontSession } from '@semiont/sdk';
 import { createTestSemiontWrapper } from '../../../../test-utils';
 
@@ -66,6 +66,12 @@ vi.mock('../../../../contexts/TranslationContext', () => ({
       includeDescriptiveReferences: 'Include descriptive references',
       descriptiveReferencesTooltip: 'Also find phrases like \'the CEO\', \'the tech giant\', \'the physicist\' (in addition to names)',
       cancel: 'Cancel',
+      annotating: 'Annotating...',
+      // CLEAN-PROGRESS D3: the widget's own strings come from the
+      // AssistProgress namespace now, not from this panel's.
+      inProgress: 'Annotating...',
+      complete: 'Annotation complete!',
+      failed: 'Annotation failed',
     };
     let result = translations[key] || key;
     // Replace {count} with actual count value if provided
@@ -112,6 +118,38 @@ describe('ReferencesPanel Component', () => {
     vi.restoreAllMocks();
   });
 
+  // RESOLUTION-SPARKLE D6: the panel threads the host's sparkle set down to
+  // the entries — exactly the ids in the set glow, nothing else.
+  describe('Resolution sparkle threading', () => {
+    const linkingReference = (id: string): Annotation => ({
+      '@context': 'http://www.w3.org/ns/anno.jsonld',
+      id: id as AnnotationId,
+      type: 'Annotation',
+      motivation: 'linking',
+      created: '2026-08-21T12:00:00Z',
+      modified: '2026-08-21T12:00:00Z',
+      target: {
+        source: 'res-1',
+        selector: { type: 'TextQuoteSelector', exact: `text of ${id}` },
+      },
+      body: { type: 'SpecificResource', source: 'linked-doc', purpose: 'linking' },
+    });
+
+    it('sparkles exactly the entries named by sparkleAnnotationIds', () => {
+      const { container } = renderWithEventBus(
+        <ReferencesPanel
+          {...panelProps()}
+          annotations={[linkingReference('ann-dark'), linkingReference('ann-lit')]}
+          sparkleAnnotationIds={new Set(['ann-lit'])}
+        />,
+      );
+
+      const sparkling = container.querySelectorAll('.semiont-reference-icon.annotation-sparkle');
+      expect(sparkling).toHaveLength(1);
+      expect(sparkling[0]!.closest('.semiont-annotation-entry')).toHaveTextContent('text of ann-lit');
+    });
+  });
+
   describe('Rendering', () => {
     it('should render panel with title', () => {
       renderWithEventBus(<ReferencesPanel {...panelProps()} />);
@@ -325,7 +363,7 @@ describe('ReferencesPanel Component', () => {
         <ReferencesPanel
           {...panelProps()}
           isAssisting={true}
-          progress={{ stage: 'analyzing', percentage: 0, message: 'Detecting references...', completedEntityTypes: [] }}
+          progress={{ percentage: 0, completedItems: [] }}
         />
       );
 
@@ -335,10 +373,8 @@ describe('ReferencesPanel Component', () => {
           {...panelProps()}
           isAssisting={false}
           progress={{
-            stage: 'complete',
             percentage: 100,
-            message: 'Annotation complete',
-            completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
+            completedItems: [{ value: 'Person', foundCount: 5 }],
           }}
         />
       );
@@ -378,21 +414,19 @@ describe('ReferencesPanel Component', () => {
         <ReferencesPanel
           {...panelProps()}
           isAssisting={true}
-          progress={{ stage: 'analyzing', percentage: 0, message: 'Detecting references...', completedEntityTypes: [] }}
+          progress={{ percentage: 0, completedItems: [] }}
         />
       );
 
-      expect(screen.getByText('Detecting references...')).toBeInTheDocument();
+      expect(screen.getByText('Annotating...')).toBeInTheDocument();
     });
 
     it('should pass progress data to widget', () => {
       const progress = {
-        stage: 'complete',
         percentage: 100,
-        message: 'Annotation complete',
-        completedEntityTypes: [
-          { entityType: 'Person', foundCount: 5 },
-          { entityType: 'Organization', foundCount: 3 },
+        completedItems: [
+          { value: 'Person', foundCount: 5 },
+          { value: 'Organization', foundCount: 3 },
         ],
       };
 
@@ -419,10 +453,8 @@ describe('ReferencesPanel Component', () => {
           {...panelProps()}
           isAssisting={false}
           progress={{
-            stage: 'complete',
             percentage: 100,
-            message: 'Annotation complete',
-            completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
+            completedItems: [{ value: 'Person', foundCount: 5 }],
           }}
         />
       );
@@ -440,7 +472,7 @@ describe('ReferencesPanel Component', () => {
         <ReferencesPanel
           {...panelProps()}
           isAssisting={true}
-          progress={{ stage: 'analyzing', percentage: 0, message: 'Detecting references...', completedEntityTypes: [] }}
+          progress={{ percentage: 0, completedItems: [] }}
         />
       );
 
@@ -453,13 +485,12 @@ describe('ReferencesPanel Component', () => {
         <ReferencesPanel
           {...panelProps()}
           isAssisting={true}
-          progress={{ stage: 'analyzing', percentage: 0, message: 'Detecting references...', completedEntityTypes: [] }}
+          progress={{ percentage: 0, completedItems: [] }}
         />
       );
 
-      // Real AssistProgress titles the cancel button with t('cancelAnnotation')
-      // (the mock translator echoes unknown keys).
-      const cancelButton = screen.getByTitle('cancelAnnotation');
+      // The control's label comes from the AssistProgress namespace's `cancel`.
+      const cancelButton = screen.getByTitle('Cancel');
       expect(cancelButton).toBeInTheDocument();
     });
   });
@@ -471,12 +502,10 @@ describe('ReferencesPanel Component', () => {
           {...panelProps()}
           isAssisting={false}
           progress={{
-            stage: 'complete',
             percentage: 100,
-            message: 'Annotation complete',
-            completedEntityTypes: [
-              { entityType: 'Person', foundCount: 5 },
-              { entityType: 'Organization', foundCount: 3 },
+            completedItems: [
+              { value: 'Person', foundCount: 5 },
+              { value: 'Organization', foundCount: 3 },
             ],
           }}
         />
@@ -501,10 +530,8 @@ describe('ReferencesPanel Component', () => {
           {...panelProps()}
           isAssisting={false}
           progress={{
-            stage: 'complete',
             percentage: 100,
-            message: 'Annotation complete',
-            completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
+            completedItems: [{ value: 'Person', foundCount: 5 }],
           }}
         />
       );
@@ -521,10 +548,8 @@ describe('ReferencesPanel Component', () => {
           {...panelProps()}
           isAssisting={false}
           progress={{
-            stage: 'complete',
             percentage: 100,
-            message: 'Annotation complete',
-            completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
+            completedItems: [{ value: 'Person', foundCount: 5 }],
           }}
         />
       );
@@ -541,10 +566,8 @@ describe('ReferencesPanel Component', () => {
           {...panelProps()}
           isAssisting={false}
           progress={{
-            stage: 'complete',
             percentage: 100,
-            message: 'Annotation complete',
-            completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
+            completedItems: [{ value: 'Person', foundCount: 5 }],
           }}
         />
       );
@@ -564,10 +587,8 @@ describe('ReferencesPanel Component', () => {
           {...panelProps()}
           isAssisting={false}
           progress={{
-            stage: 'complete',
             percentage: 100,
-            message: 'Annotation complete',
-            completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
+            completedItems: [{ value: 'Person', foundCount: 5 }],
           }}
         />
       );
@@ -587,10 +608,8 @@ describe('ReferencesPanel Component', () => {
           {...panelProps()}
           isAssisting={false}
           progress={{
-            stage: 'complete',
             percentage: 100,
-            message: 'Annotation complete',
-            completedEntityTypes: [],
+            completedItems: [],
           }}
         />
       );
@@ -615,12 +634,12 @@ describe('ReferencesPanel Component', () => {
         <ReferencesPanel
           {...panelProps()}
           isAssisting={true}
-          progress={{ stage: 'analyzing', percentage: 0, message: 'Detecting references...', completedEntityTypes: [] }}
+          progress={{ percentage: 0, completedItems: [] }}
         />
       );
 
       // Detecting state
-      expect(screen.getByText('Detecting references...')).toBeInTheDocument();
+      expect(screen.getByText('Annotating...')).toBeInTheDocument();
       expect(screen.queryByText('Select entity types')).not.toBeInTheDocument();
     });
 
@@ -629,12 +648,12 @@ describe('ReferencesPanel Component', () => {
         <ReferencesPanel
           {...panelProps()}
           isAssisting={true}
-          progress={{ stage: 'analyzing', percentage: 0, message: 'Detecting references...', completedEntityTypes: [] }}
+          progress={{ percentage: 0, completedItems: [] }}
         />
       );
 
       // Detecting
-      expect(screen.getByText('Detecting references...')).toBeInTheDocument();
+      expect(screen.getByText('Annotating...')).toBeInTheDocument();
 
       // Complete - first trigger useEffect to copy to lastDetectionLog
       rerender(
@@ -642,10 +661,8 @@ describe('ReferencesPanel Component', () => {
           {...panelProps()}
           isAssisting={false}
           progress={{
-            stage: 'complete',
             percentage: 100,
-            message: 'Annotation complete',
-            completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
+            completedItems: [{ value: 'Person', foundCount: 5 }],
           }}
         />
       );
@@ -655,7 +672,7 @@ describe('ReferencesPanel Component', () => {
         <ReferencesPanel {...panelProps()} isAssisting={false} progress={null} />
       );
 
-      expect(screen.queryByText('Annotation complete')).not.toBeInTheDocument();
+      expect(screen.queryByText('Annotation complete!')).not.toBeInTheDocument();
       // Both log and selection UI should be visible
       expect(screen.getByText('Person:')).toBeInTheDocument();
       expect(screen.getByText('Select entity types')).toBeInTheDocument();
@@ -667,10 +684,8 @@ describe('ReferencesPanel Component', () => {
           {...panelProps()}
           isAssisting={false}
           progress={{
-            stage: 'complete',
             percentage: 100,
-            message: 'Annotation complete',
-            completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
+            completedItems: [{ value: 'Person', foundCount: 5 }],
           }}
         />
       );
@@ -761,10 +776,8 @@ describe('ReferencesPanel Component', () => {
           {...panelProps()}
           isAssisting={false}
           progress={{
-            stage: 'complete',
             percentage: 100,
-            message: 'Annotation complete',
-            completedEntityTypes: [{ entityType: 'Person', foundCount: 0 }],
+            completedItems: [{ value: 'Person', foundCount: 0 }],
           }}
         />
       );