@semiont/react-ui 0.5.1 → 0.5.3

package/src/components/modals/SessionExpiredModal.tsx

@@ -5,11 +5,11 @@ import { useSemiont } from '../../session/SemiontProvider';
 import { useObservable } from '../../hooks/useObservable';
 
 /**
- * Modal that surfaces when the active KB's session expires (a 401 from
- * either the session's own JWT validation or from any React Query call
- * via the QueryCache.onError handler).
+ * Modal that surfaces when the active KB's session expires (a 401
+ * surfaced by the session's own JWT validation or by the host's
+ * error-routing path).
  *
- * Reads `sessionExpiredAt$` from the active `FrontendSessionSignals`.
+ * Reads `sessionExpiredAt$` from the active `SessionSignals`.
  * When the user dismisses the modal, the signals instance clears the
  * flag. Modal state lives on signals (not the session itself) so
  * headless sessions (workers/CLIs) don't carry dead observables.

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

@@ -45,6 +45,8 @@ interface AssessmentPanelProps {
   isAssisting?: boolean;
   progress?: JobProgress | null;
   locale?: string;
+  /** BCP-47 tag of the resource being analyzed — forwarded to the assist call. */
+  sourceLanguage?: string;
   annotateMode?: boolean;
   scrollToAnnotationId?: string | null;
   onScrollCompleted?: () => void;
@@ -64,6 +66,7 @@ export function AssessmentPanel({
   isAssisting = false,
   progress,
   locale,
+  sourceLanguage,
   annotateMode = true,
   scrollToAnnotationId,
   onScrollCompleted,
@@ -243,6 +246,7 @@ export function AssessmentPanel({
             annotationType="assessment"
             isAssisting={isAssisting}
             locale={locale}
+            sourceLanguage={sourceLanguage}
             progress={progress}
           />
         )}

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

@@ -12,7 +12,10 @@ type JobProgress = components['schemas']['JobProgress'];
 interface AssistSectionProps {
   annotationType: 'highlight' | 'assessment' | 'comment';
   isAssisting: boolean;
+  /** User UI locale — written into the annotation body's `language` field for comment/assessment. */
   locale?: string;
+  /** BCP-47 tag of the resource being analyzed. Forwarded to the prompt so the LLM analyzes non-English source correctly. */
+  sourceLanguage?: string;
   progress?: JobProgress | null | undefined;
 }
 
@@ -34,6 +37,7 @@ export function AssistSection({
   annotationType,
   isAssisting,
   locale,
+  sourceLanguage,
   progress,
 }: AssistSectionProps) {
 
@@ -74,13 +78,18 @@ export function AssistSection({
       instructions: instructions.trim() || undefined,
       tone: (annotationType === 'comment' || annotationType === 'assessment') && tone ? tone : undefined,
       density: (annotationType === 'comment' || annotationType === 'assessment' || annotationType === 'highlight') && useDensity ? density : undefined,
+      // Body locale only applies where the LLM writes natural-language text:
+      // comment/assessment have a body, highlight does not.
       language: (annotationType === 'comment' || annotationType === 'assessment') ? locale : undefined,
+      // Source locale applies to all three — affects analysis quality on
+      // non-English source, regardless of whether a body is produced.
+      sourceLanguage,
     });
 
     setInstructions('');
     setTone('');
     // Don't reset density/useDensity - persist across assists
-  }, [annotationType, instructions, tone, useDensity, density, locale, session]);
+  }, [annotationType, instructions, tone, useDensity, density, locale, sourceLanguage, session]);
 
   const handleDismissProgress = useCallback(() => {
     session?.client.mark.dismissProgress();

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

@@ -7,7 +7,7 @@ import './CollaborationPanel.css';
 interface Props {
   /**
    * Connection state from `client.actor.state$`. See
-   * `packages/api-client/src/view-models/domain/actor-vm.ts`.
+   * `packages/api-client/src/state/domain/actor-state-unit.ts`.
    *
    * UI mapping:
    *   `open` | `reconnecting` | `initial` | `connecting`

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

@@ -46,6 +46,8 @@ interface CommentsPanelProps {
   isAssisting?: boolean;
   progress?: JobProgress | null;
   locale?: string;
+  /** BCP-47 tag of the resource being analyzed — forwarded to the assist call. */
+  sourceLanguage?: string;
   scrollToAnnotationId?: string | null;
   onScrollCompleted?: () => void;
   hoveredAnnotationId?: string | null;
@@ -65,6 +67,7 @@ export function CommentsPanel({
   isAssisting = false,
   progress,
   locale,
+  sourceLanguage,
   scrollToAnnotationId,
   onScrollCompleted,
   hoveredAnnotationId,
@@ -253,6 +256,7 @@ export function CommentsPanel({
             annotationType="comment"
             isAssisting={isAssisting}
             locale={locale}
+            sourceLanguage={sourceLanguage}
             progress={progress}
           />
         )}

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

@@ -31,6 +31,8 @@ interface HighlightPanelProps {
   scrollToAnnotationId?: string | null;
   onScrollCompleted?: () => void;
   hoveredAnnotationId?: string | null;
+  /** BCP-47 tag of the resource being analyzed — forwarded to the assist call so the LLM analyzes non-English source correctly. */
+  sourceLanguage?: string;
 }
 
 /**
@@ -48,6 +50,7 @@ export function HighlightPanel({
   scrollToAnnotationId,
   onScrollCompleted,
   hoveredAnnotationId,
+  sourceLanguage,
 }: HighlightPanelProps) {
 
   const t = useTranslations('HighlightPanel');
@@ -151,6 +154,7 @@ export function HighlightPanel({
             annotationType="highlight"
             isAssisting={isAssisting}
             progress={progress}
+            sourceLanguage={sourceLanguage}
           />
         )}
 

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

@@ -60,6 +60,11 @@ interface Props {
   scrollToAnnotationId?: string | null;
   onScrollCompleted?: () => void;
   hoveredAnnotationId?: string | null;
+
+  /** User UI locale — stamped on the unresolved-reference body's `language` field. */
+  locale?: string;
+  /** BCP-47 tag of the resource being analyzed — fed into the prompt for source-aware analysis. */
+  sourceLanguage?: string;
 }
 
 /**
@@ -85,6 +90,8 @@ export function ReferencesPanel({
   scrollToAnnotationId,
   onScrollCompleted,
   hoveredAnnotationId,
+  locale,
+  sourceLanguage,
 }: Props) {
   const t = useTranslations('ReferencesPanel');
   const session = useObservable(useSemiont().activeSession$);
@@ -206,6 +213,10 @@ export function ReferencesPanel({
     session?.client.mark.requestAssist('linking', {
       entityTypes: selectedEntityTypes,
       includeDescriptiveReferences,
+      // Body locale stamps the unresolved-reference body's `language`;
+      // sourceLanguage tunes the prompt for non-English source content.
+      language: locale,
+      sourceLanguage,
     });
   };
 

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

@@ -1,10 +1,10 @@
 'use client';
 
+import { useMemo } from 'react';
 import type { Ref } from 'react';
 import type { Annotation } from '@semiont/core';
 import { getAnnotationExactText } from '@semiont/core';
 import { getTagCategory, getTagSchemaId } from '@semiont/ontology';
-import { getTagSchema } from '../../../lib/tag-schemas';
 import { useSemiont } from '../../../session/SemiontProvider';
 import { useObservable } from '../../../hooks/useObservable';
 import { useHoverEmitter } from '../../../hooks/useHoverEmitter';
@@ -28,7 +28,18 @@ export function TagEntry({
   const selectedText = getAnnotationExactText(tag);
   const category = getTagCategory(tag);
   const schemaId = getTagSchemaId(tag);
-  const schema = schemaId ? getTagSchema(schemaId) : null;
+
+  // Resolve the schema's display name from the per-KB tag-schema registry.
+  // The registry is runtime-populated (frame.addTagSchema); during the
+  // initial fetch the observable yields `undefined`, which we treat as
+  // "no schema name available yet" — render the category badge alone
+  // until the registry resolves.
+  const tagSchemas$ = useMemo(
+    () => session?.client.browse.tagSchemas() ?? null,
+    [session],
+  );
+  const schemas = useObservable(tagSchemas$);
+  const schema = schemaId && schemas ? schemas.find((s) => s.id === schemaId) ?? null : null;
 
   return (
     <div

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

@@ -9,7 +9,6 @@ import type { components, Selector } from '@semiont/core';
 import { getTextPositionSelector, getTargetSelector } from '@semiont/core';
 import { TagEntry } from './TagEntry';
 import { PanelHeader } from './PanelHeader';
-import { getAllTagSchemas } from '../../../lib/tag-schemas';
 import './TaggingPanel.css';
 
 import type { Annotation } from '@semiont/core';
@@ -48,6 +47,10 @@ interface TaggingPanelProps {
   scrollToAnnotationId?: string | null;
   onScrollCompleted?: () => void;
   hoveredAnnotationId?: string | null;
+  /** User UI locale — stamped on the tagging body's `language` field. */
+  locale?: string;
+  /** BCP-47 tag of the resource being analyzed — fed into the prompt for source-aware analysis. */
+  sourceLanguage?: string;
 }
 
 /**
@@ -67,11 +70,39 @@ export function TaggingPanel({
   scrollToAnnotationId,
   onScrollCompleted,
   hoveredAnnotationId,
+  locale,
+  sourceLanguage,
 }: TaggingPanelProps) {
   const t = useTranslations('TaggingPanel');
   const session = useObservable(useSemiont().activeSession$);
-  const [selectedSchemaId, setSelectedSchemaId] = useState<string>('legal-irac');
+
+  // Subscribe to the per-KB tag-schema registry. Schemas are runtime-
+  // registered by the KB at session start (see frame.addTagSchema).
+  // During the initial load the observable yields `undefined` — render an
+  // empty schemas list and let the picker render no options until the
+  // first emission lands.
+  const tagSchemas$ = useMemo(
+    () => session?.client.browse.tagSchemas() ?? null,
+    [session],
+  );
+  const schemasObserved = useObservable(tagSchemas$);
+  const schemas = schemasObserved ?? [];
+  // True only AFTER the registry has resolved AND it's empty — distinct
+  // from the initial-loading state (`schemasObserved === undefined`),
+  // which renders nothing rather than an empty-state message.
+  const noSchemasRegistered = schemasObserved !== undefined && schemasObserved.length === 0;
+
+  const [selectedSchemaId, setSelectedSchemaId] = useState<string>('');
   const [selectedCategories, setSelectedCategories] = useState<Set<string>>(new Set());
+
+  // Default the schema selection to the first registered schema once
+  // the registry resolves. We don't reset on schemas changing to avoid
+  // clobbering an explicit user choice.
+  useEffect(() => {
+    if (!selectedSchemaId && schemas.length > 0) {
+      setSelectedSchemaId(schemas[0]!.id);
+    }
+  }, [schemas, selectedSchemaId]);
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -159,7 +190,6 @@ export function TaggingPanel({
     // Pulse effect is handled by isHovered prop on TagEntry
   }, [hoveredAnnotationId]);
 
-  const schemas = getAllTagSchemas();
   const selectedSchema = schemas.find(s => s.id === selectedSchemaId);
 
   const handleSchemaChange = (schemaId: string) => {
@@ -192,6 +222,10 @@ export function TaggingPanel({
       session?.client.mark.requestAssist('tagging', {
         schemaId: selectedSchemaId,
         categories: Array.from(selectedCategories),
+        // Body locale stamps the tagging body's `language`; sourceLanguage
+        // tunes the prompt for non-English source content.
+        language: locale,
+        sourceLanguage,
       });
       setSelectedCategories(new Set()); // Reset after annotation
     }
@@ -238,23 +272,32 @@ export function TaggingPanel({
               </p>
             </div>
 
+            {/* Empty-state — registry has resolved with no schemas. */}
+            {noSchemasRegistered && (
+              <p className="semiont-form__help" data-type="tag-no-schemas">
+                {t('noSchemas')}
+              </p>
+            )}
+
             {/* Schema and Category Selection for Manual Tag */}
-            <div className="semiont-form-field">
-              <label className="semiont-form-field__label">
-                {t('selectSchema')}
-              </label>
-              <select
-                value={selectedSchemaId}
-                onChange={(e) => handleSchemaChange(e.target.value)}
-                className="semiont-select"
-              >
-                {schemas.map(schema => (
-                  <option key={schema.id} value={schema.id}>
-                    {t(`schema${schema.id === 'legal-irac' ? 'Legal' : schema.id === 'scientific-imrad' ? 'Scientific' : 'Argument'}`)}
-                  </option>
-                ))}
-              </select>
-            </div>
+            {!noSchemasRegistered && (
+              <div className="semiont-form-field">
+                <label className="semiont-form-field__label">
+                  {t('selectSchema')}
+                </label>
+                <select
+                  value={selectedSchemaId}
+                  onChange={(e) => handleSchemaChange(e.target.value)}
+                  className="semiont-select"
+                >
+                  {schemas.map(schema => (
+                    <option key={schema.id} value={schema.id}>
+                      {schema.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
 
             {selectedSchema && (
               <div className="semiont-form-field">
@@ -324,28 +367,37 @@ export function TaggingPanel({
               <div className="semiont-assist-widget" data-assisting={isAssisting && progress ? 'true' : 'false'} data-type="tag">
               {!isAssisting && !progress && (
                 <>
+                  {/* Empty-state — registry has resolved with no schemas. */}
+                  {noSchemasRegistered && (
+                    <p className="semiont-form__help" data-type="tag-no-schemas">
+                      {t('noSchemas')}
+                    </p>
+                  )}
+
                   {/* Schema Selector */}
-                  <div className="semiont-form-field">
-                    <label className="semiont-form-field__label">
-                      {t('selectSchema')}
-                    </label>
-                    <select
-                      value={selectedSchemaId}
-                      onChange={(e) => handleSchemaChange(e.target.value)}
-                      className="semiont-select"
-                    >
-                      {schemas.map(schema => (
-                        <option key={schema.id} value={schema.id}>
-                          {t(`schema${schema.id === 'legal-irac' ? 'Legal' : schema.id === 'scientific-imrad' ? 'Scientific' : 'Argument'}`)}
-                        </option>
-                      ))}
-                    </select>
-                    {selectedSchema && (
-                      <p className="semiont-form__help">
-                        {selectedSchema.description}
-                      </p>
-                    )}
-                  </div>
+                  {!noSchemasRegistered && (
+                    <div className="semiont-form-field">
+                      <label className="semiont-form-field__label">
+                        {t('selectSchema')}
+                      </label>
+                      <select
+                        value={selectedSchemaId}
+                        onChange={(e) => handleSchemaChange(e.target.value)}
+                        className="semiont-select"
+                      >
+                        {schemas.map(schema => (
+                          <option key={schema.id} value={schema.id}>
+                            {schema.name}
+                          </option>
+                        ))}
+                      </select>
+                      {selectedSchema && (
+                        <p className="semiont-form__help">
+                          {selectedSchema.description}
+                        </p>
+                      )}
+                    </div>
+                  )}
 
                   {/* Category Selector */}
                   {selectedSchema && (
@@ -388,7 +440,7 @@ export function TaggingPanel({
                               style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}
                             >
                               <span style={{ fontWeight: 500 }}>
-                                {t(`category${category.name.replace(/\s+/g, '')}`)}
+                                {category.name}
                               </span>
                               <span style={{ fontSize: 'var(--semiont-text-xs)', color: 'var(--semiont-text-secondary)' }}>
                                 {category.description}

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

@@ -71,9 +71,16 @@ interface UnifiedAnnotationsPanelProps {
   // Hover coordination (for bidirectional hover highlighting)
   hoveredAnnotationId?: string | null;
 
-  // Locale for AI-generated text language
+  // Locale for AI-generated text language (annotation body locale)
   locale?: string;
 
+  /**
+   * BCP-47 tag of the resource being analyzed (source-resource locale).
+   * Independent from `locale` — a German user can analyze a French source
+   * and get German bodies back. Fed into detection prompts.
+   */
+  sourceLanguage?: string;
+
   // Routing
   Link: React.ComponentType<LinkComponentProps>;
   routes: RouteBuilder;
@@ -243,6 +250,7 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
             progress,
             annotateMode: props.annotateMode,
             locale: props.locale,
+            sourceLanguage: props.sourceLanguage,
             scrollToAnnotationId: props.scrollToAnnotationId,
             onScrollCompleted: props.onScrollCompleted,
             hoveredAnnotationId: props.hoveredAnnotationId
@@ -268,6 +276,8 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
                 scrollToAnnotationId={commonProps.scrollToAnnotationId}
                 onScrollCompleted={commonProps.onScrollCompleted}
                 hoveredAnnotationId={commonProps.hoveredAnnotationId}
+                locale={commonProps.locale}
+                sourceLanguage={commonProps.sourceLanguage}
                 allEntityTypes={props.allEntityTypes || []}
                 generatingReferenceId={props.generatingReferenceId}
                 referencedBy={props.referencedBy}

package/src/components/resource/panels/__tests__/ReferencesPanel.observable-flow.test.tsx

@@ -1,5 +1,5 @@
 /**
- * Triangulation test for the VM → useObservable → prop → chip render chain.
+ * Triangulation test for the state unit → useObservable → prop → chip render chain.
  *
  * Written after an e2e failure (test 05) where `ReferencesPanel` rendered
  * "No entity types available" even though the client provably received a
@@ -90,7 +90,7 @@ const renderWithBus = (ui: React.ReactElement) => {
   return render(<SemiontWrapper>{ui}</SemiontWrapper>);
 };
 
-describe('Layer 5-6 — VM observable → useObservable → ReferencesPanel chips', () => {
+describe('Layer 5-6 — state-unit observable → useObservable → ReferencesPanel chips', () => {
   it('an observable seeded with [9 strings] renders 9 pending-reference chips', async () => {
     const source$ = new BehaviorSubject<string[]>(NINE_TYPES);
     renderWithBus(<ObservableHarness source$={source$} />);

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

@@ -1,10 +1,12 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { renderWithProviders } from '../../../../test-utils';
+import { of } from 'rxjs';
+import { CacheObservable } from '@semiont/sdk';
+import { renderWithProviders, createTestSemiontWrapper } from '../../../../test-utils';
 import userEvent from '@testing-library/user-event';
-import type { components } from '@semiont/core';
+import type { components, TagSchema } from '@semiont/core';
 
 import type { Annotation } from '@semiont/core';
 
@@ -23,21 +25,15 @@ vi.mock('@semiont/ontology', () => ({
   getTagSchemaId: vi.fn(),
 }));
 
-// Mock tag-schemas
-vi.mock('../../../../lib/tag-schemas', () => ({
-  getTagSchema: vi.fn(),
-}));
-
 import { getAnnotationExactText } from '@semiont/core';
 import { getTagCategory, getTagSchemaId } from '@semiont/ontology';
-import { getTagSchema } from '../../../../lib/tag-schemas';
 import type { MockedFunction } from 'vitest';
 import { TagEntry } from '../TagEntry';
 
 const mockGetAnnotationExactText = getAnnotationExactText as MockedFunction<typeof getAnnotationExactText>;
 const mockGetTagCategory = getTagCategory as MockedFunction<typeof getTagCategory>;
 const mockGetTagSchemaId = getTagSchemaId as MockedFunction<typeof getTagSchemaId>;
-const mockGetTagSchema = getTagSchema as MockedFunction<typeof getTagSchema>;
+
 
 const createMockTag = (overrides?: Partial<Annotation>): Annotation => ({
   '@context': 'http://www.w3.org/ns/anno.jsonld',
@@ -76,7 +72,6 @@ describe('TagEntry', () => {
     mockGetAnnotationExactText.mockReturnValue('Tagged text content');
     mockGetTagCategory.mockReturnValue('Entity');
     mockGetTagSchemaId.mockReturnValue(null);
-    mockGetTagSchema.mockReturnValue(null);
   });
 
   describe('Rendering', () => {
@@ -115,24 +110,36 @@ describe('TagEntry', () => {
 
     it('should render schema name when available', () => {
       mockGetTagSchemaId.mockReturnValue('schema-ner-v1');
-      mockGetTagSchema.mockReturnValue({
+      const NER_SCHEMA: TagSchema = {
         id: 'schema-ner-v1',
         name: 'Named Entity Recognition',
+        description: 'NER',
         domain: 'nlp',
-        version: '1.0',
-        categories: [],
-      });
-
-      renderWithProviders(<TagEntry {...defaultProps} />);
+        tags: [],
+      };
+
+      // Stub the cache to resolve immediately with the test schema —
+      // exercises the rendering path without round-tripping through the
+      // transport's HTTP plumbing.
+      const { SemiontWrapper, client } = createTestSemiontWrapper();
+      vi.spyOn(client.browse, 'tagSchemas').mockReturnValue(
+        CacheObservable.from(of([NER_SCHEMA]))
+      );
+      render(<TagEntry {...defaultProps} />, { wrapper: SemiontWrapper });
 
       expect(screen.getByText('Named Entity Recognition')).toBeInTheDocument();
     });
 
     it('should not render schema name when schema is not found', () => {
       mockGetTagSchemaId.mockReturnValue('unknown-schema');
-      mockGetTagSchema.mockReturnValue(null);
 
-      const { container } = renderWithProviders(<TagEntry {...defaultProps} />);
+      // Stub the cache to resolve to an empty list — the schema lookup
+      // misses, the schema-name `<span>` is not rendered.
+      const { SemiontWrapper, client } = createTestSemiontWrapper();
+      vi.spyOn(client.browse, 'tagSchemas').mockReturnValue(
+        CacheObservable.from(of([]))
+      );
+      const { container } = render(<TagEntry {...defaultProps} />, { wrapper: SemiontWrapper });
 
       expect(container.querySelector('.semiont-annotation-entry__meta')).not.toBeInTheDocument();
     });