@semiont/react-ui 0.4.2 → 0.4.4

package/src/components/modals/GatherContextStep.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useState, useEffect, useRef } from 'react';
 import type { GatheredContext } from '@semiont/core';
 import { ContextSummary } from './ContextSummary';
 import type { ContextSummaryTranslations } from './ContextSummary';
@@ -10,7 +11,6 @@ export interface GatherContextStepProps {
   contextError: Error | null;
   userHint: string;
   onUserHintChange: (value: string) => void;
-  onCancel: () => void;
   onBind: () => void;
   onGenerate: () => void;
   onCompose: () => void;
@@ -18,10 +18,10 @@ export interface GatherContextStepProps {
     title: string;
     loadingContext: string;
     failedContext: string;
-    cancel: string;
     search: string;
     generate: string;
     compose: string;
+    resolutionStrategyLabel: string;
   } & ContextSummaryTranslations;
 }
 
@@ -31,19 +31,34 @@ export function GatherContextStep({
   contextError,
   userHint,
   onUserHintChange,
-  onCancel,
   onBind,
   onGenerate,
   onCompose,
   translations: t,
 }: GatherContextStepProps) {
+  const [sourceExpanded, setSourceExpanded] = useState(false);
   const contextReady = !contextLoading && !contextError && !!context;
+  const sourceContext = context?.sourceContext;
+  const highlightRef = useRef<HTMLSpanElement>(null);
+
+  // Scroll the highlighted term into view when context loads
+  useEffect(() => {
+    if (highlightRef.current) {
+      highlightRef.current.scrollIntoView({ block: 'center', behavior: 'instant' });
+    }
+  }, [context]);
 
   return (
-    <>
+    <div className="semiont-gather__outer">
+      {/* Loading / error states */}
       {contextLoading && (
-        <div className="semiont-modal__empty-state" style={{ textAlign: 'center', padding: '1rem 0' }}>
-          {t.loadingContext}
+        <div className="semiont-gather__loading">
+          <div style={{ display: 'flex', gap: '0.5rem' }}>
+            <span className="semiont-gather__loading-dot" />
+            <span className="semiont-gather__loading-dot" />
+            <span className="semiont-gather__loading-dot" />
+          </div>
+          <span className="semiont-gather__loading-text">{t.loadingContext}</span>
         </div>
       )}
       {!!contextError && (
@@ -52,42 +67,109 @@ export function GatherContextStep({
         </div>
       )}
 
-      {context && <ContextSummary context={context} userHint={userHint} onUserHintChange={onUserHintChange} translations={t} />}
+      {context && (
+        <>
+          {/* Full-width source context strip */}
+          {sourceContext && (
+            <div className="semiont-gather__source-strip">
+              <label className="semiont-form__label" style={{ marginBottom: '0.375rem' }}>
+                {t.sourceContextLabel}{context.sourceResource?.name ? ` "${context.sourceResource.name}"` : ''}
+              </label>
+              <div className={`semiont-gather__source-box${sourceExpanded ? ' semiont-gather__source-box--expanded' : ''}`}>
+                <div className="semiont-gather__source-context">
+                  <div style={{ fontSize: 'var(--semiont-text-sm)', fontFamily: 'monospace', whiteSpace: 'pre-wrap', color: 'var(--semiont-text-secondary)' }}>
+                    {sourceContext.before && <span>{sourceContext.before}</span>}
+                    <span
+                      ref={highlightRef}
+                      style={{
+                        backgroundColor: 'var(--semiont-color-primary-100)',
+                        padding: '0 0.25rem',
+                        fontWeight: 600,
+                        color: 'var(--semiont-color-primary-900)',
+                      }}
+                    >
+                      {sourceContext.selected}
+                    </span>
+                    {(context.metadata?.entityTypes ?? []).map(et => (
+                      <span key={et} className="semiont-chip" style={{ fontSize: 'var(--semiont-text-xs)', padding: '0.125rem 0.375rem', fontWeight: 400, verticalAlign: 'middle', marginLeft: '0.25rem' }}>
+                        {et}
+                      </span>
+                    ))}
+                    {context.annotation?.motivation && (
+                      <span className="semiont-chip" style={{ fontSize: 'var(--semiont-text-xs)', padding: '0.125rem 0.375rem', fontWeight: 400, verticalAlign: 'middle', marginLeft: '0.25rem' }}>
+                        {context.annotation.motivation}
+                      </span>
+                    )}
+                    {sourceContext.after && <span>{sourceContext.after}</span>}
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  className="semiont-gather__expand-btn"
+                  onClick={() => setSourceExpanded(v => !v)}
+                >
+                  {sourceExpanded ? '▲ less' : '▼ more'}
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Two-column body */}
+          <div className="semiont-gather__body">
+            {/* Left: annotation metadata */}
+            <div className="semiont-gather__left">
+              <ContextSummary context={context} translations={t} />
+            </div>
 
-      {/* Action Buttons */}
-      <div className="semiont-modal__actions" style={{ paddingTop: '0.5rem' }}>
-        <button
-          type="button"
-          onClick={onCancel}
-          className="semiont-button--secondary semiont-button--flex"
-        >
-          ✕ {t.cancel}
-        </button>
-        <button
-          type="button"
-          onClick={onBind}
-          disabled={!contextReady}
-          className="semiont-button--primary semiont-button--flex"
-        >
-          🔍 {t.search}…
-        </button>
-        <button
-          type="button"
-          onClick={onGenerate}
-          disabled={!contextReady}
-          className="semiont-button--primary semiont-button--flex"
-        >
-          ✨ {t.generate}…
-        </button>
-        <button
-          type="button"
-          onClick={onCompose}
-          disabled={!contextReady}
-          className="semiont-button--secondary semiont-button--flex"
-        >
-          ✍️ {t.compose}
-        </button>
-      </div>
-    </>
+            {/* Right: hint textarea */}
+            <div className="semiont-gather__right">
+              <div className="semiont-form__field">
+                <label className="semiont-form__label">
+                  {t.userHintLabel}
+                </label>
+                <textarea
+                  value={userHint}
+                  onChange={(e) => onUserHintChange(e.target.value)}
+                  placeholder={t.userHintPlaceholder}
+                  className="semiont-search-modal__search-input semiont-gather__hint-textarea"
+                  style={{ resize: 'vertical', fontFamily: 'inherit' }}
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Full-width footer: resolution strategy */}
+          <div className="semiont-gather__footer">
+            <div className="semiont-gather__footer-label">{t.resolutionStrategyLabel}</div>
+            <div className="semiont-gather__actions">
+              <button
+                type="button"
+                onClick={onBind}
+                disabled={!contextReady}
+                className="semiont-button--primary semiont-button--flex"
+              >
+                🔍 {t.search}…
+              </button>
+              <button
+                type="button"
+                onClick={onGenerate}
+                disabled={!contextReady}
+                className="semiont-button--primary semiont-button--flex"
+              >
+                ✨ {t.generate}…
+              </button>
+              <button
+                type="button"
+                onClick={onCompose}
+                disabled={!contextReady}
+                className="semiont-button--secondary semiont-button--flex"
+              >
+                ✍️ {t.compose}
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
   );
 }

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

@@ -196,8 +196,8 @@ export const BrowseView = memo(function BrowseView({
     scrollToAnnotation(annotationId);
   }, [scrollToAnnotation]);
 
-  const handleAnnotationFocus = useCallback(({ annotationId }: { annotationId: string | null }) => {
-    scrollToAnnotation(annotationId, true);
+  const handleAnnotationFocus = useCallback(({ annotationId }: { annotationId?: string | null }) => {
+    scrollToAnnotation(annotationId ?? null, true);
   }, [scrollToAnnotation]);
 
   useEventSubscriptions({

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