@semiont/react-ui 0.5.26 → 0.5.28

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/UnifiedAnnotationsPanel.tsx

@@ -6,7 +6,7 @@ import type { components, Selector } from '@semiont/core';
 type JobProgress = components['schemas']['JobProgress'];
 import type { RouteBuilder, LinkComponentProps } from '../../../contexts/RoutingContext';
 import type { SemiontSession } from '@semiont/sdk';
-import { annotatorKeyForMotivation, type Annotator } from '../../../lib/annotation-registry';
+import { annotatorKeyForMotivation, type Annotator, type AnnotatorKey } from '../../../lib/annotation-registry';
 import { StatisticsPanel } from './StatisticsPanel';
 import { HighlightPanel } from './HighlightPanel';
 import { ReferencesPanel } from './ReferencesPanel';
@@ -17,7 +17,9 @@ import './UnifiedAnnotationsPanel.css';
 
 import type { Annotation } from '@semiont/core';
 type Motivation = components['schemas']['Motivation'];
-type TabKey = 'statistics' | 'reference' | 'highlight' | 'assessment' | 'comment' | 'tag';
+// Derived from the annotator registry (the single motivation↔annotator
+// source) — a hand-written union here could drift from it.
+type TabKey = 'statistics' | AnnotatorKey;
 
 // Unified pending annotation type
 interface PendingAnnotation {
@@ -76,6 +78,8 @@ interface UnifiedAnnotationsPanelProps {
   entityTypesError?: Error | null;
   referencedByError?: Error | null;
   onRetryReferencedBy?: () => void;
+  /** Annotations currently sparkling (recently created or resolved) — RESOLUTION-SPARKLE D6. */
+  sparkleAnnotationIds?: Set<string>;
 
   // Resource context — threaded to every per-motivation panel, which stamps it
   // as `source` on mark:submit (multi-viewer routing).
@@ -328,6 +332,7 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
                 referencedByLoading={props.referencedByLoading}
                 referencedByError={props.referencedByError}
                 onRetryReferencedBy={props.onRetryReferencedBy}
+                sparkleAnnotationIds={props.sparkleAnnotationIds}
                 Link={props.Link}
                 routes={props.routes}
               />

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();
     });
   });
 });

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

@@ -11,12 +11,17 @@ import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { AssistShell } from '../AssistShell';
 
-const progress = { stage: 'analyzing', percentage: 50, message: 'working' };
+const progress = { percentage: 50 };
 
 /** AssistProgress requires a full translation set; the shell just passes it through. */
-const TR = { cancel: 'tr.cancel', inProgress: 'tr.inProgress', complete: 'tr.complete',
-  failed: 'tr.failed', close: 'tr.close', paramsTitle: 'tr.paramsTitle',
-  processing: (l: string) => `tr.processing(${l})` };
+const TR = {
+  cancel: 'tr.cancel',
+  close: 'tr.close',
+  inProgress: 'tr.inProgress',
+  message: () => 'tr.code',
+  subject: (c: { kind: string; value: string }) => `tr.subject(${c.kind}:${c.value})`,
+  paramLabel: (c: string) => `tr.param(${c})`,
+};
 
 describe('AssistShell', () => {
   beforeEach(() => {
@@ -34,13 +39,13 @@ describe('AssistShell', () => {
         form={<button type="button">the form</button>} progressProps={{ translations: TR }} />,
     );
     expect(screen.queryByText('the form')).not.toBeInTheDocument();
-    expect(screen.getByText('working')).toBeInTheDocument();
+    expect(screen.getByText('tr.inProgress')).toBeInTheDocument();
   });
 
   it('withholds dismiss while assisting, offers it once terminal', async () => {
     const onDismiss = vi.fn();
     const props = {
-      assistType: 'highlight', title: 'Annotate Highlights', progress,
+      assistType: 'highlight' as const, title: 'Annotate Highlights', progress,
       form: <span>form</span>,
       progressProps: { onDismiss, translations: { ...TR, close: 'Close' } },
     };

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

@@ -23,12 +23,18 @@ vi.mock('../../../../contexts/TranslationContext', () => ({
       reconnecting: 'Reconnecting...',
       sharing: 'Sharing',
       collaborationComingSoon: 'Multi-user collaboration coming soon',
+      collaborators: 'Collaborators',
+      ceilings: '{{contextTokens}} in / {{maxOutputTokens}} out',
+      sharedWindow: '{{contextTokens}} window',
     };
     let result = translations[key] || key;
     // Replace {count} with actual count value if provided
     if (params?.count !== undefined) {
       result = result.replace('{count}', String(params.count));
     }
+    for (const [k, v] of Object.entries(params ?? {})) {
+      result = result.replace(`{{${k}}}`, String(v));
+    }
     return result;
   }),
 }));
@@ -52,6 +58,89 @@ describe('CollaborationPanel Component', () => {
     vi.useRealTimers();
   });
 
+  // INFERENCE-LIMITS-EXPOSURE P3a. The panel was props-only; it now optionally
+  // renders the collaborator roster with each software agent's discovered
+  // ceilings. Absence is meaningful and must degrade quietly (D3) — the field
+  // is absent whenever discovery could not answer *right now*.
+  describe('Collaborators roster', () => {
+    const softwareEntry = (over: Record<string, unknown> = {}) => ({
+      agent: {
+        '@type': 'Software' as const,
+        '@id': 'did:web:localhost:agents:anthropic:claude-sonnet-5',
+        name: 'Claude Sonnet 5',
+        provider: 'anthropic',
+        model: 'claude-sonnet-5',
+      },
+      servesJobTypes: ['generation'],
+      limits: { contextTokens: 200_000, maxOutputTokens: 64_000 },
+      ...over,
+    });
+
+    it('renders one row per software agent with provider, model and ceilings', () => {
+      render(<CollaborationPanel {...defaultProps} collaborators={[softwareEntry() as any]} />);
+
+      expect(screen.getByText('Collaborators')).toBeInTheDocument();
+      const row = screen.getByTestId('semiont-collaborator-row');
+      expect(row.textContent).toContain('anthropic');
+      expect(row.textContent).toContain('claude-sonnet-5');
+      expect(row.textContent).toContain('generation');
+      // Distinct in/out ceilings render as a pair.
+      expect(row.textContent).toContain('200K in / 64K out');
+    });
+
+    it('renders a single window figure when the provider shares one (Ollama shape)', () => {
+      // `maxOutputTokens === contextTokens` is the shared-window sentinel the
+      // schema documents; rendering "128K in / 128K out" would be noise.
+      const shared = softwareEntry({
+        agent: {
+          '@type': 'Software' as const,
+          name: 'Gemma',
+          provider: 'ollama',
+          model: 'gemma2:27b',
+        },
+        limits: { contextTokens: 128_000, maxOutputTokens: 128_000 },
+      });
+      render(<CollaborationPanel {...defaultProps} collaborators={[shared as any]} />);
+
+      const row = screen.getByTestId('semiont-collaborator-row');
+      expect(row.textContent).toContain('128K window');
+      expect(row.textContent).not.toContain('in /');
+    });
+
+    it('renders the row without ceilings when limits are absent (D3)', () => {
+      const noLimits = softwareEntry();
+      delete (noLimits as Record<string, unknown>).limits;
+      render(<CollaborationPanel {...defaultProps} collaborators={[noLimits as any]} />);
+
+      const row = screen.getByTestId('semiont-collaborator-row');
+      expect(row.textContent).toContain('claude-sonnet-5');
+      expect(row.textContent).not.toContain('in /');
+      expect(row.textContent).not.toContain('window');
+    });
+
+    it('renders exactly as today when the prop is absent (hosts that never wire it)', () => {
+      render(<CollaborationPanel {...defaultProps} />);
+
+      expect(screen.queryByText('Collaborators')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('semiont-collaborator-row')).not.toBeInTheDocument();
+      // The pre-existing sections are untouched.
+      expect(screen.getByText('Connection Status')).toBeInTheDocument();
+    });
+
+    it('lists only software agents — Persons are not inference collaborators', () => {
+      const person = { agent: { '@type': 'Person' as const, name: 'Ada' } };
+      render(
+        <CollaborationPanel
+          {...defaultProps}
+          collaborators={[softwareEntry() as any, person as any]}
+        />,
+      );
+
+      expect(screen.getAllByTestId('semiont-collaborator-row')).toHaveLength(1);
+      expect(screen.queryByText('Ada')).not.toBeInTheDocument();
+    });
+  });
+
   describe('Rendering', () => {
     it('should render connection status section', () => {
       render(<CollaborationPanel {...defaultProps} />);

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

@@ -264,8 +264,7 @@ describe('CommentEntry Component', () => {
       await userEvent.click(commentDiv);
 
       expect(clickHandler).toHaveBeenCalledWith({
-        annotationId: 'comment-1',
-        motivation: 'commenting'
+        annotationId: 'comment-1'
       });
 
       // Clean up

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

@@ -147,7 +147,6 @@ describe('HighlightEntry', () => {
 
       expect(clickHandler).toHaveBeenCalledWith({
         annotationId: 'highlight-1',
-        motivation: 'highlighting',
       });
 
       subscription.unsubscribe();