@semiont/react-ui 0.4.3 → 0.4.5

package/src/components/modals/ReferenceWizardModal.tsx

@@ -46,15 +46,9 @@ export interface ReferenceWizardModalProps {
     configureGenerationTitle: string;
     configureSearchTitle: string;
     searchResultsTitle: string;
-    annotationLabel: string;
-    sourceResourceLabel: string;
-    motivationLabel: string;
     sourceContextLabel: string;
-    entityTypesLabel: string;
-    graphContextLabel: string;
     connectionsLabel: string;
     citedByLabel: string;
-    siblingTypesLabel: string;
     userHintLabel: string;
     userHintPlaceholder: string;
     loadingContext: string;
@@ -64,6 +58,7 @@ export interface ReferenceWizardModalProps {
     searching: string;
     generate: string;
     compose: string;
+    resolutionStrategyLabel: string;
     back: string;
     link: string;
     score: string;
@@ -119,10 +114,11 @@ export function ReferenceWizardModal({
   useEffect(() => {
     if (!isOpen) return;
 
-    const subscription = eventBus.get('bind:search-results').subscribe((event) => {
-      if (annotationId && event.referenceId === annotationId) {
+    const subscription = eventBus.get('match:search-results').subscribe((event) => {
+      const e = event as { referenceId: string; results: ScoredResult[] };
+      if (annotationId && e.referenceId === annotationId) {
         setIsSearching(false);
-        setWizardStep({ step: 'search-results', results: event.results as ScoredResult[] });
+        setWizardStep({ step: 'search-results', results: e.results });
       }
     });
 
@@ -152,7 +148,7 @@ export function ReferenceWizardModal({
     if (!annotationId || !context) return;
     setIsSearching(true);
     const contextWithHint = userHint ? { ...context, userHint } : context;
-    eventBus.get('bind:search-requested').next({
+    eventBus.get('match:search-requested').next({
       referenceId: annotationId,
       context: contextWithHint,
       limit: config.limit,
@@ -208,7 +204,7 @@ export function ReferenceWizardModal({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <DialogPanel className={`semiont-search-modal__panel semiont-search-modal__panel--with-border${wizardStep.step === 'search-results' ? ' semiont-search-modal__panel--wide' : ''}`}>
+              <DialogPanel className={`semiont-search-modal__panel semiont-search-modal__panel--with-border${wizardStep.step === 'search-results' ? ' semiont-search-modal__panel--wide' : ''}${wizardStep.step === 'gather' ? ' semiont-search-modal__panel--gather' : ''}`}>
                 <div className="semiont-search-modal__header">
                   <DialogTitle className="semiont-search-modal__title">
                     {stepTitle}
@@ -229,29 +225,22 @@ export function ReferenceWizardModal({
                     contextError={contextError}
                     userHint={userHint}
                     onUserHintChange={setUserHint}
-                    onCancel={onClose}
                     onBind={handleBind}
                     onGenerate={handleGenerate}
                     onCompose={handleCompose}
                     translations={{
                       title: t.gatherTitle,
-                      annotationLabel: t.annotationLabel,
-                      sourceResourceLabel: t.sourceResourceLabel,
-                      motivationLabel: t.motivationLabel,
                       sourceContextLabel: t.sourceContextLabel,
-                      entityTypesLabel: t.entityTypesLabel,
-                      graphContextLabel: t.graphContextLabel,
                       connectionsLabel: t.connectionsLabel,
                       citedByLabel: t.citedByLabel,
-                      siblingTypesLabel: t.siblingTypesLabel,
                       userHintLabel: t.userHintLabel,
                       userHintPlaceholder: t.userHintPlaceholder,
                       loadingContext: t.loadingContext,
                       failedContext: t.failedContext,
-                      cancel: t.cancel,
                       search: t.search,
                       generate: t.generate,
                       compose: t.compose,
+                      resolutionStrategyLabel: t.resolutionStrategyLabel,
                     }}
                   />
                 )}
@@ -314,15 +303,9 @@ export function ReferenceWizardModal({
                       back: t.back,
                       cancel: t.cancel,
                       score: t.score,
-                      annotationLabel: t.annotationLabel,
-                      sourceResourceLabel: t.sourceResourceLabel,
-                      motivationLabel: t.motivationLabel,
                       sourceContextLabel: t.sourceContextLabel,
-                      entityTypesLabel: t.entityTypesLabel,
-                      graphContextLabel: t.graphContextLabel,
                       connectionsLabel: t.connectionsLabel,
                       citedByLabel: t.citedByLabel,
-                      siblingTypesLabel: t.siblingTypesLabel,
                       userHintLabel: t.userHintLabel,
                       userHintPlaceholder: t.userHintPlaceholder,
                     }}

package/src/components/modals/SearchModal.css

@@ -467,6 +467,247 @@
   max-width: 1100px;
 }
 
+/* Gather-context step: wider modal */
+.semiont-search-modal__panel--gather {
+  max-width: min(90vw, 820px);
+  max-height: min(90vh, 680px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Outer flex column: source strip + two-column body */
+.semiont-gather__outer {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  gap: 0.75rem;
+  overflow: hidden;
+}
+
+/* Loading state */
+.semiont-gather__loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  flex: 1;
+  padding: 2rem 0;
+}
+
+.semiont-gather__loading-text {
+  font-size: 1.125rem;
+  color: var(--semiont-text-secondary);
+  font-weight: 500;
+}
+
+[data-theme="dark"] .semiont-gather__loading-text {
+  color: var(--semiont-text-secondary);
+}
+
+.semiont-gather__loading-dot {
+  display: inline-block;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+  background-color: var(--semiont-color-primary-500);
+  animation: semiont-gather-pulse 1.2s ease-in-out infinite;
+}
+
+[data-theme="dark"] .semiont-gather__loading-dot {
+  background-color: var(--semiont-color-primary-400);
+}
+
+.semiont-gather__loading-dot:nth-child(1) { animation-delay: 0s; }
+.semiont-gather__loading-dot:nth-child(2) { animation-delay: 0.2s; }
+.semiont-gather__loading-dot:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes semiont-gather-pulse {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
+  40%           { transform: scale(1);   opacity: 1; }
+}
+
+/* Full-width source context strip */
+.semiont-gather__source-strip {
+  flex-shrink: 0;
+  padding-top: 0.25rem;
+}
+
+/* Two-column body below the strip */
+.semiont-gather__body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.semiont-gather__left {
+  flex: 0 0 55%;
+  overflow-y: auto;
+  padding-right: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  border-right: 1px solid var(--semiont-border-primary);
+}
+
+[data-theme="dark"] .semiont-gather__left {
+  border-right-color: var(--semiont-border-primary);
+}
+
+.semiont-gather__right {
+  flex: 0 0 45%;
+  padding-left: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  overflow-y: auto;
+}
+
+.semiont-gather__right .semiont-form__field {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.semiont-gather__hint-textarea {
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+}
+
+.semiont-gather__hint-textarea:focus-visible {
+  outline: 2px solid var(--semiont-color-primary-500);
+  outline-offset: 0;
+}
+
+.semiont-gather__footer {
+  flex-shrink: 0;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--semiont-border-primary);
+}
+
+.semiont-gather__footer-label {
+  font-size: var(--semiont-text-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--semiont-text-tertiary);
+  margin-bottom: 0.5rem;
+}
+
+[data-theme="dark"] .semiont-gather__footer-label {
+  color: var(--semiont-text-tertiary);
+}
+
+.semiont-gather__actions {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 0.5rem;
+}
+
+/* Source context collapsible */
+.semiont-gather__source-box {
+  padding: 0.75rem;
+  background-color: var(--semiont-bg-secondary);
+  border-radius: var(--semiont-radius-md);
+  border: 1px solid var(--semiont-border-primary);
+  position: relative;
+}
+
+[data-theme="dark"] .semiont-gather__source-box {
+  background-color: var(--semiont-bg-secondary);
+}
+
+.semiont-gather__source-box::after {
+  content: '';
+  position: absolute;
+  bottom: 2rem; /* above the expand button */
+  left: 0;
+  right: 0;
+  height: 2rem;
+  background: linear-gradient(to bottom, transparent, var(--semiont-bg-secondary));
+  pointer-events: none;
+  border-radius: 0 0 var(--semiont-radius-md) var(--semiont-radius-md);
+  transition: opacity 0.15s ease;
+}
+
+.semiont-gather__source-box--expanded::after {
+  opacity: 0;
+}
+
+.semiont-gather__source-context {
+  max-height: 8rem;
+  overflow: hidden;
+  transition: max-height 0.2s ease;
+}
+
+.semiont-gather__source-box--expanded .semiont-gather__source-context {
+  max-height: 16rem;
+}
+
+.semiont-gather__expand-btn {
+  font-size: var(--semiont-text-xs);
+  color: var(--semiont-text-tertiary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.125rem 0;
+  margin-top: 0.25rem;
+  text-decoration: none;
+  outline: none;
+}
+
+.semiont-gather__expand-btn:hover {
+  color: var(--semiont-color-primary-600);
+}
+
+[data-theme="dark"] .semiont-gather__expand-btn {
+  color: var(--semiont-text-tertiary);
+}
+
+[data-theme="dark"] .semiont-gather__expand-btn:hover {
+  color: var(--semiont-color-primary-400);
+}
+
+/* Narrow screens: stack vertically */
+@media (max-width: 640px) {
+  .semiont-search-modal__panel--gather {
+    max-width: 100%;
+    max-height: 100dvh;
+  }
+
+  .semiont-gather__outer {
+    overflow-y: auto;
+  }
+
+  .semiont-gather__body {
+    flex-direction: column;
+    overflow: visible;
+  }
+
+  .semiont-gather__left {
+    flex: none;
+    border-right: none;
+    border-bottom: 1px solid var(--semiont-border-primary);
+    padding-right: 0;
+    padding-bottom: 0.75rem;
+  }
+
+  .semiont-gather__right {
+    flex: none;
+    padding-left: 0;
+    padding-top: 0.75rem;
+  }
+
+  .semiont-gather__actions {
+    flex-flow: row wrap;
+  }
+}
+
 /* Two-pane layout for search results + context */
 .semiont-search-results__two-pane {
   display: flex;

package/src/components/resource/AnnotateView.tsx

@@ -37,7 +37,7 @@ interface Props {
   onUIStateChange?: (state: Partial<AnnotationUIState>) => void;
   editable?: boolean;
   enableWidgets?: boolean;
-  getTargetDocumentName?: (documentId: string) => string | undefined;
+  getTargetResourceName?: (resourceId: string) => string | undefined;
   generatingReferenceId?: string | null;
   showLineNumbers?: boolean;
   hoverDelayMs?: number;
@@ -61,7 +61,7 @@ export function AnnotateView({
   uiState,
   onUIStateChange,
   enableWidgets = false,
-  getTargetDocumentName,
+  getTargetResourceName,
   generatingReferenceId,
   showLineNumbers = false,
   hoverDelayMs = 150,
@@ -220,7 +220,7 @@ export function AnnotateView({
             hoverDelayMs={hoverDelayMs}
             enableWidgets={enableWidgets}
             eventBus={eventBus}
-            {...(getTargetDocumentName && { getTargetDocumentName })}
+            {...(getTargetResourceName && { getTargetResourceName })}
             {...(generatingReferenceId !== undefined && { generatingReferenceId })}
           />
 

package/src/components/resource/ResourceViewer.tsx

@@ -374,10 +374,10 @@ export function ResourceViewer({
     scrollToAnnotationId
   };
 
-  // Define getTargetDocumentName callback OUTSIDE the conditional
+  // Define getTargetResourceName callback OUTSIDE the conditional
   // IMPORTANT: This must be defined before the return statement to avoid hook ordering violations
-  const getTargetDocumentName = useCallback((documentId: string) => {
-    const referencedResource = references.find((a: Annotation) => getBodySource(a.body) === documentId);
+  const getTargetResourceName = useCallback((resourceId: string) => {
+    const referencedResource = references.find((a: Annotation) => getBodySource(a.body) === resourceId);
     return referencedResource ? getExactText(getTargetSelector(referencedResource.target)) : undefined;
   }, [references]);
 
@@ -397,7 +397,7 @@ export function ResourceViewer({
             if ('selectedShape' in updates) setSelectedShape(updates.selectedShape!);
           }}
           enableWidgets={true}
-          getTargetDocumentName={getTargetDocumentName}
+          getTargetResourceName={getTargetResourceName}
           {...(generatingReferenceId !== undefined && { generatingReferenceId })}
           showLineNumbers={showLineNumbers}
           hoverDelayMs={hoverDelayMs}

package/src/components/resource/__tests__/annotation-interactions.test.tsx

@@ -40,7 +40,7 @@ describe('Annotation Interaction Transitions', () => {
       // When: User clicks on the reference text
       // Then: Should navigate to the referenced document
       //   - In both Browse mode and Annotate mode
-      //   - Router should push to /know/resource/{documentId}
+      //   - Router should push to /know/resource/{resourceId}
       expect(true).toBe(true); // Placeholder - implement actual test
     });
 

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

@@ -46,6 +46,7 @@ interface AssessmentPanelProps {
     percentage?: number;
     message?: string;
   } | null;
+  locale?: string;
   annotateMode?: boolean;
   scrollToAnnotationId?: string | null;
   onScrollCompleted?: () => void;
@@ -64,6 +65,7 @@ export function AssessmentPanel({
   pendingAnnotation,
   isAssisting = false,
   progress,
+  locale,
   annotateMode = true,
   scrollToAnnotationId,
   onScrollCompleted,
@@ -236,6 +238,7 @@ export function AssessmentPanel({
           <AssistSection
             annotationType="assessment"
             isAssisting={isAssisting}
+            locale={locale}
             progress={progress}
           />
         )}

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

@@ -9,6 +9,7 @@ import './AssistSection.css';
 interface AssistSectionProps {
   annotationType: 'highlight' | 'assessment' | 'comment';
   isAssisting: boolean;
+  locale?: string;
   progress?: {
     status: string;
     percentage?: number;
@@ -34,6 +35,7 @@ interface AssistSectionProps {
 export function AssistSection({
   annotationType,
   isAssisting,
+  locale,
   progress,
 }: AssistSectionProps) {
 
@@ -77,13 +79,14 @@ 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,
+        language: (annotationType === 'comment' || annotationType === 'assessment') ? locale : undefined,
       },
     });
 
     setInstructions('');
     setTone('');
     // Don't reset density/useDensity - persist across assists
-  }, [annotationType, instructions, tone, useDensity, density]); // eventBus is stable singleton - never in deps
+  }, [annotationType, instructions, tone, useDensity, density, locale]); // eventBus is stable singleton - never in deps
 
   const handleDismissProgress = useCallback(() => {
     eventBus.get('mark:progress-dismiss').next(undefined);

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

@@ -47,6 +47,7 @@ interface CommentsPanelProps {
     percentage?: number;
     message?: string;
   } | null;
+  locale?: string;
   scrollToAnnotationId?: string | null;
   onScrollCompleted?: () => void;
   hoveredAnnotationId?: string | null;
@@ -65,6 +66,7 @@ export function CommentsPanel({
   annotateMode = true,
   isAssisting = false,
   progress,
+  locale,
   scrollToAnnotationId,
   onScrollCompleted,
   hoveredAnnotationId,
@@ -252,6 +254,7 @@ export function CommentsPanel({
           <AssistSection
             annotationType="comment"
             isAssisting={isAssisting}
+            locale={locale}
             progress={progress}
           />
         )}

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

@@ -3,14 +3,23 @@
 import { useTranslations } from '../../../contexts/TranslationContext';
 import { useEventBus } from '../../../contexts/EventBusContext';
 import { formatLocaleDisplay } from '@semiont/api-client';
+import type { components } from '@semiont/core';
 import './ResourceInfoPanel.css';
 
+type Agent = components['schemas']['Agent'];
+
 interface Props {
   documentEntityTypes: string[];
   documentLocale?: string | undefined;
   primaryMediaType?: string | undefined;
   primaryByteSize?: number | undefined;
   isArchived?: boolean;
+  dateCreated?: string | undefined;
+  dateModified?: string | undefined;
+  creationMethod?: string | undefined;
+  wasAttributedTo?: Agent | Agent[] | undefined;
+  wasDerivedFrom?: string | string[] | undefined;
+  generator?: Agent | Agent[] | undefined;
 }
 
 /**
@@ -26,6 +35,12 @@ export function ResourceInfoPanel({
   primaryMediaType,
   primaryByteSize,
   isArchived = false,
+  dateCreated,
+  dateModified,
+  creationMethod,
+  wasAttributedTo,
+  wasDerivedFrom,
+  generator,
 }: Props) {
   const t = useTranslations('ResourceInfoPanel');
   const eventBus = useEventBus();
@@ -76,6 +91,73 @@ export function ResourceInfoPanel({
         </div>
       )}
 
+      {/* Provenance Section */}
+      {(dateCreated || dateModified || creationMethod || wasAttributedTo || wasDerivedFrom || generator) && (
+        <div className="semiont-resource-info-panel__section">
+          <h3 className="semiont-resource-info-panel__heading">{t('provenance')}</h3>
+          <div className="semiont-resource-info-panel__field-group">
+            {dateCreated && (
+              <div>
+                <span className="semiont-resource-info-panel__label">{t('createdAt')}</span>
+                <span className="semiont-resource-info-panel__value">
+                  {new Date(dateCreated).toLocaleString()}
+                </span>
+              </div>
+            )}
+            {dateModified && (
+              <div>
+                <span className="semiont-resource-info-panel__label">{t('modifiedAt')}</span>
+                <span className="semiont-resource-info-panel__value">
+                  {new Date(dateModified).toLocaleString()}
+                </span>
+              </div>
+            )}
+            {creationMethod && (
+              <div>
+                <span className="semiont-resource-info-panel__label">{t('creationMethod')}</span>
+                <span className="semiont-resource-info-panel__value">{creationMethod}</span>
+              </div>
+            )}
+            {wasAttributedTo && (
+              <div>
+                <span className="semiont-resource-info-panel__label">{t('attributedTo')}</span>
+                <span className="semiont-resource-info-panel__value">
+                  {(Array.isArray(wasAttributedTo) ? wasAttributedTo : [wasAttributedTo])
+                    .map(a => a.name)
+                    .join(', ')}
+                </span>
+              </div>
+            )}
+            {wasDerivedFrom && (
+              <div>
+                <span className="semiont-resource-info-panel__label">{t('derivedFrom')}</span>
+                <span className="semiont-resource-info-panel__value">
+                  {(Array.isArray(wasDerivedFrom) ? wasDerivedFrom : [wasDerivedFrom]).map((id, i) => (
+                    <button
+                      key={id}
+                      className="semiont-resource-info-panel__link"
+                      onClick={() => eventBus.get('browse:reference-navigate').next({ resourceId: id })}
+                    >
+                      {i > 0 && ', '}{id}
+                    </button>
+                  ))}
+                </span>
+              </div>
+            )}
+            {generator && (
+              <div>
+                <span className="semiont-resource-info-panel__label">{t('generatedBy')}</span>
+                <span className="semiont-resource-info-panel__value">
+                  {(Array.isArray(generator) ? generator : [generator])
+                    .map(a => a.name)
+                    .join(', ')}
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
       {/* Entity Type Tags Section */}
       {documentEntityTypes.length > 0 && (
         <div className="semiont-resource-info-panel__section">

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

@@ -70,6 +70,9 @@ interface UnifiedAnnotationsPanelProps {
   // Hover coordination (for bidirectional hover highlighting)
   hoveredAnnotationId?: string | null;
 
+  // Locale for AI-generated text language
+  locale?: string;
+
   // Routing
   Link: React.ComponentType<LinkComponentProps>;
   routes: RouteBuilder;
@@ -238,6 +241,7 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
             isAssisting,
             progress,
             annotateMode: props.annotateMode,
+            locale: props.locale,
             scrollToAnnotationId: props.scrollToAnnotationId,
             onScrollCompleted: props.onScrollCompleted,
             hoveredAnnotationId: props.hoveredAnnotationId