@semiont/react-ui 0.5.26 → 0.5.27

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

@@ -87,7 +87,7 @@ export function CommentEntry({
       data-type="comment"
       data-focused={isFocused ? 'true' : 'false'}
       onClick={() => {
-        session?.client.browse.click(comment.id, comment.motivation);
+        session?.client.browse.click(comment.id);
       }}
       {...hoverProps}
     >

package/src/components/resource/panels/CommentsPanel.css

@@ -31,10 +31,6 @@
   margin-bottom: var(--semiont-panel-header-margin-bottom);
 }
 
-[data-theme="dark"] .semiont-comments-panel__title {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-comments-panel__list {
   flex: 1;
   overflow-y: auto;
@@ -68,29 +64,17 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-comments-panel__comment-author {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-comments-panel__comment-time {
   font-size: var(--semiont-text-xs);
   color: var(--semiont-text-tertiary);
 }
 
-[data-theme="dark"] .semiont-comments-panel__comment-time {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-comments-panel__comment-text {
   font-size: var(--semiont-text-sm);
   color: var(--semiont-text-primary);
   line-height: 1.5;
 }
 
-[data-theme="dark"] .semiont-comments-panel__comment-text {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-comments-panel__input-area {
   padding: var(--semiont-panel-padding);
   border-top: 1px solid var(--semiont-color-gray-200);

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

@@ -51,7 +51,7 @@ export function HighlightEntry({
       data-type="highlight"
       data-focused={isFocused ? 'true' : 'false'}
       onClick={() => {
-        session?.client.browse.click(highlight.id, highlight.motivation);
+        session?.client.browse.click(highlight.id);
       }}
       {...hoverProps}
     >

package/src/components/resource/panels/HighlightPanel.css

@@ -30,10 +30,6 @@
   letter-spacing: 0.05em;
 }
 
-[data-theme="dark"] .semiont-highlight-panel__label {
-  color: var(--semiont-text-secondary);
-}
-
 .semiont-highlight-panel__colors {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
@@ -58,6 +54,3 @@
   transform: scale(1.1);
 }
 
-[data-theme="dark"] .semiont-highlight-panel__color--selected {
-  border-color: var(--semiont-text-primary);
-}

package/src/components/resource/panels/JsonLdPanel.css

@@ -24,10 +24,6 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-jsonld-panel__title {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-jsonld-panel__editor {
   flex: 1;
   overflow: hidden;

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

@@ -117,7 +117,7 @@ export function ReferenceEntry({
       data-type="reference"
       data-focused={isFocused ? 'true' : 'false'}
       onClick={() => {
-        session?.client.browse.click(reference.id, reference.motivation);
+        session?.client.browse.click(reference.id);
       }}
       {...hoverProps}
     >

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

@@ -37,30 +37,18 @@
   margin-bottom: var(--semiont-panel-header-margin-bottom);
 }
 
-[data-theme="dark"] .semiont-references-panel__title {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-references-panel__path {
   font-size: var(--semiont-text-sm);
   color: var(--semiont-text-tertiary);
   margin-top: var(--semiont-panel-padding-xs);
 }
 
-[data-theme="dark"] .semiont-references-panel__path {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-references-panel__count {
   font-size: var(--semiont-text-sm);
   color: var(--semiont-text-tertiary);
   margin-top: var(--semiont-panel-padding-xs);
 }
 
-[data-theme="dark"] .semiont-references-panel__count {
-  color: var(--semiont-text-tertiary);
-}
-
 /* Reference Icon Group — status icon + hover-reveal unlink */
 .semiont-reference-icon-group {
   position: relative;

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

@@ -1,12 +1,13 @@
 'use client';
 
 import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { assistProgressTranslations } from '../../../lib/assist-progress-copy';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import type { SemiontSession } from '@semiont/sdk';
 import { useSessionEventSubscriptions } from '../../../hooks/useSessionEventSubscriptions';
 import type { RouteBuilder, LinkComponentProps } from '../../../contexts/RoutingContext';
 import { AssistShell } from './AssistShell';
-import { EntityFoundLog } from '../../EntityFoundLog';
+import { ItemFoundLog } from '../../ItemFoundLog';
 import { ReferenceEntry } from './ReferenceEntry';
 import type { components, Selector } from '@semiont/core';
 import { getTextPositionSelector, getTargetSelector } from '@semiont/core';
@@ -126,7 +127,7 @@ export function ReferencesPanel({
   // lives in one namespace so the same words aren't re-translated per panel.
   const ta = useTranslations('AssistProgress');
   const [selectedEntityTypes, setSelectedEntityTypes] = useState<string[]>([]);
-  const [lastAnnotationLog, setLastDetectionLog] = useState<Array<{ entityType: string; foundCount: number }> | null>(null);
+  const [lastAnnotationLog, setLastDetectionLog] = useState<Array<{ value: string; foundCount: number }> | null>(null);
   const [pendingEntityTypes, setPendingEntityTypes] = useState<string[]>([]);
   const [includeDescriptiveReferences, setIncludeDescriptiveReferences] = useState(false);
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | null>(null);
@@ -243,8 +244,8 @@ export function ReferencesPanel({
 
   // Save detection log when detection completes
   // Only depends on isAssisting boolean to avoid infinite loops from array reference changes
-  // Trade-off: If completedEntityTypes changes while isAssisting stays false, we won't update
-  // This is acceptable because in practice, completedEntityTypes only changes when annotation finishes
+  // Trade-off: If completedItems changes while isAssisting stays false, we won't update
+  // This is acceptable because in practice, completedItems only changes when annotation finishes
   useEffect(() => {
     // When annotation starts, reset the flag
     if (isAssisting) {
@@ -253,12 +254,12 @@ export function ReferencesPanel({
     }
 
     // When annotation is complete and we haven't saved yet, save the log
-    if (!hasSavedLogRef.current && progress?.completedEntityTypes) {
+    if (!hasSavedLogRef.current && progress?.completedItems) {
       hasSavedLogRef.current = true;
-      setLastDetectionLog(progress.completedEntityTypes);
+      setLastDetectionLog(progress.completedItems);
       setSelectedEntityTypes([]);
     }
-  }, [isAssisting, progress?.completedEntityTypes]); // Both dependencies needed to annotation completion
+  }, [isAssisting, progress?.completedItems]); // Both dependencies needed to annotation completion
 
   const togglePendingEntityType = (type: string) => {
     setPendingEntityTypes(prev =>
@@ -371,24 +372,15 @@ export function ReferencesPanel({
             progressProps={{
               onCancel: () => session?.client.job.cancelRequest('annotation'),
               onDismiss: () => session?.client.mark.dismissProgress(),
-              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 }),
-                paramsTitle: ta('paramsTitle'),
-                processing: (label) => ta('processing', { label }),
-                close: ta('close'),
-              },
+              translations: assistProgressTranslations(ta, {
+                found: (count: number) => t('found', { count }),
+              }),
             }}
             form={
               <>
                 {/* Completed annotation log - shown after completion */}
                 {lastAnnotationLog && (
-                  <EntityFoundLog
+                  <ItemFoundLog
                     entries={lastAnnotationLog}
                     formatFound={(count) => t('found', { count })}
                   />

package/src/components/resource/panels/ResourceInfoPanel.css

@@ -21,10 +21,6 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-resource-info-panel__title {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-resource-info-panel__section {
   margin-bottom: var(--semiont-panel-gap);
 }
@@ -40,28 +36,16 @@
   margin-bottom: var(--semiont-panel-gap-sm);
 }
 
-[data-theme="dark"] .semiont-resource-info-panel__heading {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-resource-info-panel__value {
   font-size: var(--semiont-text-sm);
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-resource-info-panel__value {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-resource-info-panel__value--empty {
   color: var(--semiont-text-tertiary);
   font-style: italic;
 }
 
-[data-theme="dark"] .semiont-resource-info-panel__value--empty {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-resource-info-panel__metric {
   display: flex;
   align-items: center;
@@ -78,20 +62,12 @@
   font-size: var(--semiont-text-sm);
 }
 
-[data-theme="dark"] .semiont-resource-info-panel__metric-label {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-resource-info-panel__metric-value {
   color: var(--semiont-text-primary);
   font-size: var(--semiont-text-sm);
   font-weight: var(--semiont-font-medium);
 }
 
-[data-theme="dark"] .semiont-resource-info-panel__metric-value {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-resource-info-panel__tags {
   display: flex;
   flex-wrap: wrap;
@@ -142,10 +118,6 @@
   margin-right: var(--semiont-panel-gap-sm);
 }
 
-[data-theme="dark"] .semiont-resource-info-panel__label {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-resource-info-panel__tag-list {
   display: flex;
   flex-wrap: wrap;
@@ -169,10 +141,6 @@
   line-height: 1.5;
 }
 
-[data-theme="dark"] .semiont-resource-info-panel__description {
-  color: var(--semiont-text-tertiary);
-}
-
 /* Resource Info Panel Buttons */
 .semiont-resource-button {
   width: 100%;

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

@@ -155,7 +155,7 @@ export function ResourceInfoPanel({
                     <button
                       key={id}
                       className="semiont-resource-info-panel__link"
-                      onClick={() => session?.client.browse.navigateReference(makeResourceId(id))}
+                      onClick={() => session?.client.browse.openResource(makeResourceId(id))}
                     >
                       {i > 0 && ', '}{id}
                     </button>

package/src/components/resource/panels/StatisticsPanel.css

@@ -57,10 +57,6 @@
   color: var(--semiont-text-secondary);
 }
 
-[data-theme="dark"] .semiont-statistics-panel__label {
-  color: var(--semiont-text-secondary);
-}
-
 .semiont-statistics-panel__value {
   font-size: var(--semiont-text-lg);
   font-weight: var(--semiont-font-semibold);
@@ -68,10 +64,6 @@
   margin-left: auto;
 }
 
-[data-theme="dark"] .semiont-statistics-panel__value {
-  color: var(--semiont-text-primary);
-}
-
 /* Sub-items (indented) */
 .semiont-statistics-panel__subitems {
   width: 100%;
@@ -93,20 +85,12 @@
   color: var(--semiont-text-tertiary);
 }
 
-[data-theme="dark"] .semiont-statistics-panel__sublabel {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-statistics-panel__subvalue {
   font-size: var(--semiont-text-sm);
   font-weight: var(--semiont-font-medium);
   color: var(--semiont-text-secondary);
 }
 
-[data-theme="dark"] .semiont-statistics-panel__subvalue {
-  color: var(--semiont-text-secondary);
-}
-
 /* Entity Types */
 .semiont-statistics-panel__entity-types {
   display: flex;
@@ -140,8 +124,4 @@
   flex: 1;
 }
 
-[data-theme="dark"] .semiont-statistics-panel__entity-name {
-  color: var(--semiont-text-primary);
-}
-
 /* Tags use .semiont-tag from core/tags.css */

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

@@ -52,7 +52,7 @@ export function TagEntry({
     <div
       ref={ref}
       onClick={() => {
-        session?.client.browse.click(tag.id, tag.motivation);
+        session?.client.browse.click(tag.id);
       }}
       {...hoverProps}
       className={`semiont-annotation-entry${isHovered ? ' semiont-annotation-pulse' : ''}`}

package/src/components/resource/panels/TaggingPanel.css

@@ -30,10 +30,6 @@
   letter-spacing: 0.05em;
 }
 
-[data-theme="dark"] .semiont-tagging-panel__label {
-  color: var(--semiont-text-secondary);
-}
-
 .semiont-tagging-panel__input {
   padding: var(--semiont-panel-padding-sm);
   background: var(--semiont-bg-secondary);

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { assistProgressTranslations } from '../../../lib/assist-progress-copy';
 import { isReady } from '@semiont/sdk';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import { useObservable } from '../../../hooks/useObservable';
@@ -364,17 +365,8 @@ export function TaggingPanel({
             isAssisting={isAssisting}
             progress={progress}
             progressProps={{
-              showPercentBar: true,
               onDismiss: handleDismissProgress,
-              translations: {
-                cancel: t('cancel'),
-                inProgress: t('annotating'),
-                complete: t('complete'),
-                failed: t('failed'),
-                paramsTitle: ta('paramsTitle'),
-                processing: (label) => ta('processing', { label }),
-                close: ta('close'),
-              },
+              translations: assistProgressTranslations(ta),
             }}
             form={
               <>

package/src/components/resource/panels/UnifiedAnnotationsPanel.css

@@ -18,10 +18,6 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-unified-panel__title {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-unified-panel__tabs {
   display: flex;
   gap: 0;

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

@@ -185,7 +185,6 @@ describe('AssessmentEntry', () => {
 
       expect(clickHandler).toHaveBeenCalledWith({
         annotationId: 'assessment-1',
-        motivation: 'assessing',
       });
 
       subscription.unsubscribe();

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

@@ -21,7 +21,7 @@ import type { SemiontSession } from '@semiont/sdk';
 import { AssistSection } from '../AssistSection';
 
 // Mock translations
-const mockT = vi.fn((key: string) => {
+const mockT = vi.fn((key: string, params?: Record<string, unknown>) => {
   const translations: Record<string, string> = {
     annotateHighlights: 'Annotate Highlights',
     annotateAssessments: 'Annotate Assessments',
@@ -45,7 +45,29 @@ const mockT = vi.fn((key: string) => {
     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', () => ({
@@ -71,41 +93,37 @@ describe('AssistSection', () => {
   });
 
   describe('Progress Display', () => {
-    it('should render progress message when progress prop provided', () => {
+    it('should render the translated status line when progress prop provided', () => {
       renderWithProviders(
         <AssistSection
           session={session}
           annotationType="highlight"
           isAssisting={true}
           progress={{
-            stage: 'analyzing',
             percentage: 30,
-            message: 'Analyzing text for highlights...',
           }}
         />
       );
 
-      expect(screen.getByText('Analyzing text for highlights...')).toBeInTheDocument();
+      expect(screen.getByText('Annotating...')).toBeInTheDocument();
     });
 
-    it('should render progress message with sparkle icon', () => {
+    it('should render the status line with sparkle icon', () => {
       renderWithProviders(
         <AssistSection
           session={session}
           annotationType="highlight"
           isAssisting={true}
           progress={{
-            stage: 'analyzing',
             percentage: 0,
-            message: 'Processing...',
           }}
         />
       );
 
-      // Check for icon and message
-      const progressDiv = screen.getByText('Processing...').closest('.semiont-annotation-progress__message');
+      // Check for icon and status text
+      const progressDiv = screen.getByText('Annotating...').closest('.semiont-assist-progress__status');
       expect(progressDiv).toBeInTheDocument();
-      expect(progressDiv?.querySelector('.semiont-annotation-progress__icon')).toBeInTheDocument();
+      expect(progressDiv?.querySelector('.semiont-assist-progress__icon')).toBeInTheDocument();
     });
 
     it('should render request parameters when provided', () => {
@@ -115,22 +133,25 @@ describe('AssistSection', () => {
           annotationType="highlight"
           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' },
             ],
           }}
         />
       );
 
-      expect(screen.getByText('paramsTitle')).toBeInTheDocument();
+      expect(screen.getByTestId('semiont-assist-params')).toBeInTheDocument();
       expect(screen.getByText('Find important points')).toBeInTheDocument();
-      expect(screen.getByText(/Instructions:/)).toBeInTheDocument();
       expect(screen.getByText('5')).toBeInTheDocument();
-      expect(screen.getByText(/Density:/)).toBeInTheDocument();
+      // The wire carries a CODE; the label the user reads is LOOKED UP. Under
+      // the test translator that lookup echoes the key, so seeing the key is
+      // the assertion that the label went through translation — and that the
+      // raw wire code ('instructions') never reaches the screen.
+      expect(screen.getByText(/paramInstructions:/)).toBeInTheDocument();
+      expect(screen.getByText(/paramDensity:/)).toBeInTheDocument();
+      expect(screen.queryByText(/^instructions:/)).toBeNull();
     });
 
     it('should hide form when progress is present', () => {
@@ -140,9 +161,7 @@ describe('AssistSection', () => {
           annotationType="highlight"
           isAssisting={true}
           progress={{
-            stage: 'analyzing',
             percentage: 0,
-            message: 'Analyzing...',
           }}
         />
       );
@@ -189,15 +208,14 @@ describe('AssistSection', () => {
           annotationType="highlight"
           isAssisting={false}
           progress={{
-            stage: 'complete',
+            message: { code: 'complete-created', count: 3, kind: 'highlight' },
             percentage: 100,
-            message: 'Complete! Created 14 highlights',
           }}
         />
       );
 
-      // Progress should still be visible
-      expect(screen.getByText('Complete! Created 14 highlights')).toBeInTheDocument();
+      // Progress should still be visible, with the translated terminal copy
+      expect(screen.getByText('Created 3 highlights')).toBeInTheDocument();
       // Form should NOT be visible
       expect(screen.queryByPlaceholderText('Enter custom instructions...')).not.toBeInTheDocument();
     });
@@ -455,42 +473,24 @@ describe('AssistSection', () => {
   });
 
   describe('Edge Cases', () => {
-    it('should handle empty progress message', () => {
+    it('should handle progress without a message', () => {
       renderWithProviders(
         <AssistSection
           session={session}
           annotationType="highlight"
           isAssisting={true}
           progress={{
-            stage: 'analyzing',
             percentage: 0,
-            message: '',
           }}
         />
       );
 
-      // Should render progress section even with empty message
-      const progressDiv = document.querySelector('.semiont-annotation-progress');
+      // Renders the progress section with the translated status line — the
+      // wire carries a code (or nothing), never a sentence to fall back on.
+      const progressDiv = document.querySelector('.semiont-assist-progress');
       expect(progressDiv).toBeInTheDocument();
     });
 
-    it('should handle progress without percentage', () => {
-      renderWithProviders(
-        <AssistSection
-          session={session}
-          annotationType="highlight"
-          isAssisting={true}
-          progress={{
-            stage: 'analyzing',
-            percentage: 0,
-            message: 'Processing...',
-          }}
-        />
-      );
-
-      expect(screen.getByText('Processing...')).toBeInTheDocument();
-    });
-
     it('should handle progress with empty requestParams array', () => {
       renderWithProviders(
         <AssistSection
@@ -498,15 +498,13 @@ describe('AssistSection', () => {
           annotationType="highlight"
           isAssisting={true}
           progress={{
-            stage: 'analyzing',
             percentage: 0,
-            message: 'Processing...',
             requestParams: [],
           }}
         />
       );
 
-      expect(screen.queryByText('paramsTitle')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('semiont-assist-params')).not.toBeInTheDocument();
     });
   });
 });