@semiont/react-ui 0.5.18 → 0.5.20

package/src/components/resource/ResourceViewer.tsx

@@ -7,7 +7,7 @@ import { BrowseView, type ReferenceHover } from './BrowseView';
 import { PopupContainer } from '../annotation-popups/SharedPopupElements';
 import { JsonLdView } from '../annotation-popups/JsonLdView';
 import type { Annotation, AnnotationId, ResourceDescriptor as SemiontResource, components, EventMap, AnchorRect } from '@semiont/core';
-import { getExactText, getTargetSelector, isHighlight, isAssessment, isReference, isComment, isTag, getBodySource } from '@semiont/core';
+import { getExactText, getTargetSelector, getPrimaryMediaType, isHighlight, isAssessment, isReference, isComment, isTag, getBodySource } from '@semiont/core';
 import type { SemiontSession } from '@semiont/sdk';
 import { useSessionEventSubscriptions } from '../../hooks/useSessionEventSubscriptions';
 import { ANNOTATORS } from '../../lib/annotation-registry';
@@ -29,9 +29,6 @@ import type { AnnotationsCollection } from '../../types/annotation-props';
  *
  * Event flow:
  *   make-meaning → EventLog → SSE → EventBus → ResourceViewer → Cache invalidation
- *
- * Phase 2 complete: Event-based cache invalidation replaces manual refetch
- * Phase 3 complete: Fully event-driven - all user interactions use unified event bus
  */
 interface Props {
   resource: SemiontResource & { content: string };
@@ -81,13 +78,14 @@ interface Props {
 }
 
 /**
- * @emits mark:delete - User requested to delete annotation. Payload: { annotationId: string }
- * @emits panel:open - Request to open panel with annotation. Payload: { panel: string, scrollToAnnotationId?: string, motivation?: Motivation }
+ * Deletion calls `session.client.mark.delete(...)` directly (no bus emit);
+ * panel opening invokes the host's `onOpenPanel` callback — the host owns
+ * the panel and any `panel:open` emission.
  *
  * @subscribes mark:added - New annotation was added. Payload: { annotation: Annotation }
  * @subscribes mark:removed - Annotation was removed. Payload: { annotationId: string }
  * @subscribes mark:body-updated - Annotation was updated. Payload: { annotation: Annotation }
- * @subscribes browse:click - User clicked on annotation. Payload: { annotationId: string }
+ * @subscribes browse:click - User clicked on annotation. Payload: { annotationId: string, motivation, anchorRect? }
  */
 export function ResourceViewer({
   resource,
@@ -125,16 +123,8 @@ export function ResourceViewer({
   }
   const rUri = resource['@id'];
 
-  // Helper to get MIME type from resource
-  const getMimeType = (): string => {
-    const reps = resource.representations;
-    if (Array.isArray(reps) && reps.length > 0 && reps[0]) {
-      return reps[0].mediaType;
-    }
-    return 'text/plain';
-  };
-
-  const mimeType = getMimeType();
+  // Same primary-representation semantics as the page and the worker — one helper.
+  const mimeType = getPrimaryMediaType(resource) || 'text/plain';
 
   // Toolbar preferences (TOOLBAR-PREFS-AS-PROPS): controlled (prop supplied) or a
   // plain uncontrolled default. Preferences are state, not events — no localStorage
@@ -152,15 +142,8 @@ export function ResourceViewer({
 
   const semiont = session?.client;
 
-  const handleAnnotateAdded = useCallback(() => {
-    semiont?.browse.invalidateAnnotationList(rUri);
-  }, [semiont, rUri]);
-
-  const handleAnnotateRemoved = useCallback(() => {
-    semiont?.browse.invalidateAnnotationList(rUri);
-  }, [semiont, rUri]);
-
-  const handleAnnotateBodyUpdated = useCallback(() => {
+  // One invalidation for every annotation mutation event (added/removed/body-updated).
+  const handleAnnotationsChanged = useCallback(() => {
     semiont?.browse.invalidateAnnotationList(rUri);
   }, [semiont, rUri]);
 
@@ -196,20 +179,9 @@ export function ResourceViewer({
     position: { x: number; y: number };
   } | null>(null);
 
-  // Internal UI state for hover, focus, and scroll
+  // Internal UI state for hover
   // Use prop value when provided (controlled by parent), otherwise null
   const hoveredAnnotationId = hoveredAnnotationIdProp ?? null;
-  const [scrollToAnnotationId, setScrollToAnnotationId] = useState<string | null>(null);
-  const [_focusedAnnotationId, setFocusedAnnotationId] = useState<string | null>(null);
-
-  // Focus annotation helper
-  const focusAnnotation = useCallback((annotationId: string) => {
-    setFocusedAnnotationId(annotationId);
-    setScrollToAnnotationId(annotationId);
-
-    // Clear focus after 3 seconds
-    setTimeout(() => setFocusedAnnotationId(null), 3000);
-  }, []);
 
   // Calculate centered position for JSON-LD modal
   const getJsonLdModalPosition = () => {
@@ -235,16 +207,11 @@ export function ResourceViewer({
 
     // If annotation has a side panel, only open it when Detail mode is active
     // For delete/jsonld/follow modes, let those handlers below process it
-    if (metadata?.hasSidePanel) {
-      if (selectedClick === 'detail') {
-        // Focus annotation (sets internal focus and scroll state, plus calls parent callback for backward compat)
-        focusAnnotation(annotation.id);
-        return;
-      }
-      // Don't return early for delete/jsonld/follow modes - let them be handled below
-      if (selectedClick !== 'deleting' && selectedClick !== 'jsonld' && selectedClick !== 'follow') {
-        return;
-      }
+    // Side-panel annotations in detail mode are routed to the host's panel by
+    // handleAnnotationClickEvent before this is ever called; here only the
+    // toolbar click modes (delete / jsonld / follow) fall through.
+    if (metadata?.hasSidePanel && selectedClick !== 'deleting' && selectedClick !== 'jsonld' && selectedClick !== 'follow') {
+      return;
     }
 
     // Check if this is a highlight, assessment, comment, reference, or tag
@@ -280,7 +247,7 @@ export function ResourceViewer({
       setDeleteConfirmation({ annotation, position });
       return;
     }
-  }, [annotateMode, selectedClick, focusAnnotation, onOpenResource]);
+  }, [annotateMode, selectedClick, onOpenResource]);
 
   // Annotation click coordinator - handles panel opening and scrolling
   const handleAnnotationClickEvent = useCallback(({ annotationId, motivation, anchorRect }: {
@@ -317,13 +284,12 @@ export function ResourceViewer({
     onOpenPanel?.({ panel: 'annotations', scrollToAnnotationId: annotationId, motivation, ...(anchorRect ? { anchorRect } : {}) });
   }, [highlights, references, assessments, comments, tags, handleAnnotationClick, selectedClick, onOpenPanel]);
 
-  // Event subscriptions - Combined into single useEventSubscriptions call to prevent hook ordering issues
-  // IMPORTANT: All event subscriptions MUST be in a single call to maintain consistent hook order between renders
+  // Single subscription call per file (see scripts/compliance/audit-hooks-ordering.ts).
   useSessionEventSubscriptions(session, {
     // Annotation cache invalidation
-    'mark:added': handleAnnotateAdded,
-    'mark:removed': handleAnnotateRemoved,
-    'mark:body-updated': handleAnnotateBodyUpdated,
+    'mark:added': handleAnnotationsChanged,
+    'mark:removed': handleAnnotationsChanged,
+    'mark:body-updated': handleAnnotationsChanged,
 
     // Annotation clicks
     'browse:click': handleAnnotationClickEvent,
@@ -335,12 +301,14 @@ export function ResourceViewer({
     [highlights, references, assessments, comments, tags]
   );
 
+  // No scrollToAnnotationId: panel-entry scrolling is the host's loop (page →
+  // UnifiedAnnotationsPanel → onScrollCompleted); in-content scrolling stays a
+  // host-facing capability on AnnotateView/CodeMirrorRenderer, unfed here.
   const uiState = {
     selectedMotivation,
     selectedClick,
     selectedShape,
     hoveredAnnotationId,
-    scrollToAnnotationId
   };
 
   // Define getTargetResourceName callback OUTSIDE the conditional

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

@@ -245,7 +245,7 @@ export function AssessmentPanel({
 
       {/* Scrollable content area */}
       <div ref={containerRef} className="semiont-panel__content">
-        {/* Assist Section - only in Annotate mode and for text resources */}
+        {/* Assist Section - only in Annotate mode; shown for any media type (AI detection is media-agnostic — text is resolved via the media-type registry, incl. PDF text layers) */}
         {annotateMode && (
           <AssistSection
             session={session}

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

@@ -1,9 +1,10 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import type { SemiontSession } from '@semiont/sdk';
 import type { Motivation, components } from '@semiont/core';
+import { AssistShell } from './AssistShell';
 import './AssistSection.css';
 
 type JobProgress = components['schemas']['JobProgress'];
@@ -20,16 +21,11 @@ interface AssistSectionProps {
   progress?: JobProgress | null | undefined;
 }
 
-// Color schemes are now handled via CSS data attributes
-
 /**
- * Shared assist section for Highlight, Assessment, and Comment panels
- *
- * Provides:
- * - Optional instructions textarea
- * - Optional tone selector (for comments)
- * - Assist button with sparkle animation
- * - Progress display during annotation assist
+ * Assist fields for the text motivations (highlight, assessment, comment):
+ * instructions, tone (comment/assessment), density — composed into the shared
+ * AssistShell chrome. Reference and tag panels compose the same shell with
+ * their own fields (entity chips; schema + categories).
  *
  * @emits mark:assist-request - Start assist for annotation type. Payload: { motivation: Motivation, options: { instructions?: string, tone?: string, density?: number } }
  * @emits mark:progress-dismiss - Dismiss the annotation progress display
@@ -51,23 +47,10 @@ export function AssistSection({
   type ToneValue = 'scholarly' | 'explanatory' | 'conversational' | 'technical' | 'analytical' | 'critical' | 'balanced' | 'constructive' | '';
   const [tone, setTone] = useState<ToneValue>('');
   // Default density depends on annotation type
-  const defaultDensity = annotationType === 'comment' ? 5 : annotationType === 'assessment' ? 4 : annotationType === 'highlight' ? 5 : 5;
+  const defaultDensity = annotationType === 'assessment' ? 4 : 5;
   const [density, setDensity] = useState(defaultDensity);
   const [useDensity, setUseDensity] = useState(true); // Enabled by default
 
-  // Collapsible section state - load from localStorage, default expanded
-  const [isExpanded, setIsExpanded] = useState(() => {
-    if (typeof window === 'undefined') return true;
-    const stored = localStorage.getItem(`assist-section-expanded-${annotationType}`);
-    return stored ? stored === 'true' : true;
-  });
-
-  // Persist expanded state to localStorage
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    localStorage.setItem(`assist-section-expanded-${annotationType}`, String(isExpanded));
-  }, [isExpanded, annotationType]);
-
   const handleAssist = useCallback(() => {
     // Map annotation type to motivation
     const motivation: Motivation =
@@ -78,7 +61,7 @@ export function AssistSection({
     session?.client.mark.requestAssist(motivation, {
       instructions: instructions.trim() || undefined,
       tone: (annotationType === 'comment' || annotationType === 'assessment') && tone ? tone : undefined,
-      density: (annotationType === 'comment' || annotationType === 'assessment' || annotationType === 'highlight') && useDensity ? density : undefined,
+      density: 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,
@@ -97,169 +80,117 @@ export function AssistSection({
   }, [session]);
 
   return (
-    <div className="semiont-panel__section">
-      <button
-        onClick={() => setIsExpanded(!isExpanded)}
-        className="semiont-panel__section-title semiont-panel__section-title--collapsible"
-        aria-expanded={isExpanded}
-        type="button"
-      >
-        <span>
-          {t(annotationType === 'highlight' ? 'annotateHighlights' :
-             annotationType === 'assessment' ? 'annotateAssessments' :
-             'annotateComments')}
-        </span>
-        <span className="semiont-panel__section-chevron" data-expanded={isExpanded}>
-          ›
-        </span>
-      </button>
-      {isExpanded && (
-        <div
-          className="semiont-assist-widget"
-          data-assisting={isAssisting && progress ? 'true' : 'false'}
-          data-type={annotationType}
-        >
-        {/* Show form when NOT assisting and NO progress to display */}
-        {!progress && (
-          <>
+    <AssistShell
+      assistType={annotationType}
+      title={t(annotationType === 'highlight' ? 'annotateHighlights' :
+               annotationType === 'assessment' ? 'annotateAssessments' :
+               'annotateComments')}
+      isAssisting={isAssisting}
+      progress={progress}
+      progressProps={{
+        onDismiss: handleDismissProgress,
+        translations: { close: t('closeProgress') },
+      }}
+      form={
+        <>
+          <div className="semiont-form-field">
+            <label className="semiont-form-field__label">
+              {t('instructions')} {t('optional')}
+            </label>
+            <textarea
+              value={instructions}
+              onChange={(e) => setInstructions(e.target.value)}
+              className="semiont-textarea"
+              rows={3}
+              placeholder={t('instructionsPlaceholder')}
+              maxLength={500}
+            />
+            <div className="semiont-form-field__char-count">
+              {instructions.length}/500
+            </div>
+          </div>
+
+          {/* Tone selector - for comments and assessments */}
+          {(annotationType === 'comment' || annotationType === 'assessment') && (
             <div className="semiont-form-field">
               <label className="semiont-form-field__label">
-                {t('instructions')} {t('optional')}
+                {t('toneLabel')} {t('toneOptional')}
               </label>
-              <textarea
-                value={instructions}
-                onChange={(e) => setInstructions(e.target.value)}
-                className="semiont-textarea"
-                rows={3}
-                placeholder={t('instructionsPlaceholder')}
-                maxLength={500}
-              />
-              <div className="semiont-form-field__char-count">
-                {instructions.length}/500
-              </div>
-            </div>
-
-            {/* Tone selector - for comments and assessments */}
-            {(annotationType === 'comment' || annotationType === 'assessment') && (
-              <div className="semiont-form-field">
-                <label className="semiont-form-field__label">
-                  {t('toneLabel')} {t('toneOptional')}
-                </label>
-                <select
-                  value={tone}
-                  onChange={(e) => setTone(e.target.value as ToneValue)}
-                  className="semiont-select"
-                >
-                  <option value="">Default</option>
-                  {annotationType === 'comment' && (
-                    <>
-                      <option value="scholarly">{t('toneScholarly')}</option>
-                      <option value="explanatory">{t('toneExplanatory')}</option>
-                      <option value="conversational">{t('toneConversational')}</option>
-                      <option value="technical">{t('toneTechnical')}</option>
-                    </>
-                  )}
-                  {annotationType === 'assessment' && (
-                    <>
-                      <option value="analytical">{t('toneAnalytical')}</option>
-                      <option value="critical">{t('toneCritical')}</option>
-                      <option value="balanced">{t('toneBalanced')}</option>
-                      <option value="constructive">{t('toneConstructive')}</option>
-                    </>
-                  )}
-                </select>
-              </div>
-            )}
-
-            {/* Density selector - for comments, assessments, and highlights */}
-            {(annotationType === 'comment' || annotationType === 'assessment' || annotationType === 'highlight') && (
-              <div className="semiont-form-field">
-                {/* Header with toggle */}
-                <div className="semiont-form-field__header">
-                  <label className="semiont-form-field__label semiont-form-field__label--with-checkbox">
-                    <input
-                      type="checkbox"
-                      checked={useDensity}
-                      onChange={(e) => setUseDensity(e.target.checked)}
-                      className="semiont-checkbox"
-                      data-variant={annotationType}
-                    />
-                    <span>{t('densityLabel')}</span>
-                  </label>
-                  {useDensity && (
-                    <span className="semiont-form-field__info">{density} per 2000 words</span>
-                  )}
-                </div>
-
-                {/* Slider - only shown when enabled */}
-                {useDensity && (
+              <select
+                value={tone}
+                onChange={(e) => setTone(e.target.value as ToneValue)}
+                className="semiont-select"
+              >
+                <option value="">Default</option>
+                {annotationType === 'comment' && (
                   <>
-                    <input
-                      type="range"
-                      min={annotationType === 'comment' ? '2' : '1'}
-                      max={annotationType === 'comment' ? '12' : annotationType === 'assessment' ? '10' : '15'}
-                      value={density}
-                      onChange={(e) => setDensity(Number(e.target.value))}
-                      className="semiont-slider"
-                    />
-                    <div className="semiont-slider__labels">
-                      <span>{t('densitySparse')}</span>
-                      <span>{t('densityDense')}</span>
-                    </div>
+                    <option value="scholarly">{t('toneScholarly')}</option>
+                    <option value="explanatory">{t('toneExplanatory')}</option>
+                    <option value="conversational">{t('toneConversational')}</option>
+                    <option value="technical">{t('toneTechnical')}</option>
                   </>
                 )}
-              </div>
-            )}
-
-            <button
-              onClick={handleAssist}
-              className="semiont-button"
-              data-variant="assist"
-              data-type={annotationType}
-            >
-              <span className="semiont-button-icon">✨</span>
-              <span>{t('annotate')}</span>
-            </button>
-          </>
-        )}
-
-        {/* Annotation Progress - show whenever we have progress (during or after assist) */}
-        {progress && (
-          <div className="semiont-annotation-progress" data-type={annotationType}>
-            {/* Request Parameters */}
-            {progress.requestParams && progress.requestParams.length > 0 && (
-              <div className="semiont-annotation-progress__params" data-type={annotationType}>
-                <div className="semiont-annotation-progress__params-title">Request Parameters:</div>
-                {progress.requestParams.map((param, idx) => (
-                  <div key={idx} className="semiont-annotation-progress__param">
-                    <span className="semiont-annotation-progress__param-label">{param.label}:</span> {param.value}
-                  </div>
-                ))}
-              </div>
-            )}
-
-            <div className="semiont-annotation-progress__status">
-              <div className="semiont-annotation-progress__message">
-                <span className="semiont-annotation-progress__icon">✨</span>
-                <span>{progress.message}</span>
-              </div>
-              {/* Close button - shown after assist completes (when not actively assisting) */}
-              {!isAssisting && (
-                <button
-                  onClick={handleDismissProgress}
-                  className="semiont-annotation-progress__close"
-                  aria-label={t('closeProgress')}
-                  title={t('closeProgress')}
-                  type="button"
-                >
-                  ×
-                </button>
+                {annotationType === 'assessment' && (
+                  <>
+                    <option value="analytical">{t('toneAnalytical')}</option>
+                    <option value="critical">{t('toneCritical')}</option>
+                    <option value="balanced">{t('toneBalanced')}</option>
+                    <option value="constructive">{t('toneConstructive')}</option>
+                  </>
+                )}
+              </select>
+            </div>
+          )}
+
+          {/* Density selector — applies to every assist type */}
+          <div className="semiont-form-field">
+            {/* Header with toggle */}
+            <div className="semiont-form-field__header">
+              <label className="semiont-form-field__label semiont-form-field__label--with-checkbox">
+                <input
+                  type="checkbox"
+                  checked={useDensity}
+                  onChange={(e) => setUseDensity(e.target.checked)}
+                  className="semiont-checkbox"
+                  data-variant={annotationType}
+                />
+                <span>{t('densityLabel')}</span>
+              </label>
+              {useDensity && (
+                <span className="semiont-form-field__info">{density} per 2000 words</span>
               )}
             </div>
+
+            {/* Slider - only shown when enabled */}
+            {useDensity && (
+              <>
+                <input
+                  type="range"
+                  min={annotationType === 'comment' ? '2' : '1'}
+                  max={annotationType === 'comment' ? '12' : annotationType === 'assessment' ? '10' : '15'}
+                  value={density}
+                  onChange={(e) => setDensity(Number(e.target.value))}
+                  className="semiont-slider"
+                />
+                <div className="semiont-slider__labels">
+                  <span>{t('densitySparse')}</span>
+                  <span>{t('densityDense')}</span>
+                </div>
+              </>
+            )}
           </div>
-        )}
-        </div>
-      )}
-    </div>
+
+          <button
+            onClick={handleAssist}
+            className="semiont-button"
+            data-variant="assist"
+            data-type={annotationType}
+          >
+            <span className="semiont-button-icon">✨</span>
+            <span>{t('annotate')}</span>
+          </button>
+        </>
+      }
+    />
   );
 }

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

@@ -0,0 +1,77 @@
+'use client';
+
+import { useState, useEffect, type ReactNode } from 'react';
+import type { components } from '@semiont/core';
+import { AssistProgress, type AssistProgressProps } from '../../AssistProgress';
+
+type JobProgress = components['schemas']['JobProgress'];
+
+export interface AssistShellProps {
+  /** localStorage persist-key suffix and CSS `data-type` ('highlight' | 'comment' | 'assessment' | 'reference' | 'tag'). */
+  assistType: string;
+  /** Collapsible section title (already translated). */
+  title: string;
+  isAssisting: boolean;
+  progress: JobProgress | null | undefined;
+  /** The per-motivation form (fields + submit) — shown when no progress is displayed. */
+  form: ReactNode;
+  /**
+   * Pass-through config for the progress renderer (cancel/dismiss wiring,
+   * translations, percent bar). Dismiss policy lives HERE: the shell forwards
+   * `onDismiss` only once the assist is no longer running.
+   */
+  progressProps?: Omit<AssistProgressProps, 'progress' | 'dataType'>;
+}
+
+/**
+ * The one assist-section chrome (#7): collapsible header with persisted expand
+ * state, the assisting wrapper, and the form-vs-progress switch. Every
+ * motivation's panel composes this shell with its own fields — the fields
+ * differ per motivation by design (instructions/tone/density vs entity chips
+ * vs schema+categories), so the shell owns only what is genuinely shared.
+ */
+export function AssistShell({ assistType, title, isAssisting, progress, form, progressProps }: AssistShellProps) {
+  const [isExpanded, setIsExpanded] = useState(() => {
+    if (typeof window === 'undefined') return true;
+    const stored = localStorage.getItem(`assist-section-expanded-${assistType}`);
+    return stored ? stored === 'true' : true;
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    localStorage.setItem(`assist-section-expanded-${assistType}`, String(isExpanded));
+  }, [isExpanded, assistType]);
+
+  return (
+    <div className="semiont-panel__section">
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="semiont-panel__section-title semiont-panel__section-title--collapsible"
+        aria-expanded={isExpanded}
+        type="button"
+      >
+        <span>{title}</span>
+        <span className="semiont-panel__section-chevron" data-expanded={isExpanded}>
+          ›
+        </span>
+      </button>
+      {isExpanded && (
+        <div
+          className="semiont-assist-widget"
+          data-assisting={isAssisting && progress ? 'true' : 'false'}
+          data-type={assistType}
+        >
+          {!progress && form}
+          {progress && (
+            <AssistProgress
+              progress={progress}
+              dataType={assistType}
+              {...progressProps}
+              {...(isAssisting ? { onDismiss: undefined } : {})}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -255,7 +255,7 @@ export function CommentsPanel({
 
       {/* Scrollable content area */}
       <div ref={containerRef} className="semiont-panel__content">
-        {/* Assist Section - only in Annotate mode and for text resources */}
+        {/* Assist Section - only in Annotate mode; shown for any media type (AI detection is media-agnostic — text is resolved via the media-type registry, incl. PDF text layers) */}
         {annotateMode && (
           <AssistSection
             session={session}

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

@@ -153,7 +153,7 @@ export function HighlightPanel({
 
       {/* Scrollable content area */}
       <div ref={containerRef} className="semiont-panel__content">
-        {/* Assist Section - only in Annotate mode and for text resources */}
+        {/* Assist Section - only in Annotate mode; shown for any media type (AI detection is media-agnostic — text is resolved via the media-type registry, incl. PDF text layers) */}
         {annotateMode && (
           <AssistSection
             session={session}

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

@@ -78,7 +78,14 @@ export function ReferenceEntry({
         resourceId(source),
         reference.id,
         [{ op: 'remove', item: { type: 'SpecificResource', source: resolvedResourceUri, purpose: 'linking' } }],
-      ).catch(() => { /* error handled by events-stream */ });
+      ).catch((error: unknown) => {
+        // This component has no toast surface — report the client-local,
+        // resource-stamped bind error; useOutcomeToasts surfaces it.
+        semiont.bind.reportBodyError({
+          resourceId: source,
+          message: error instanceof Error ? error.message : String(error),
+        });
+      });
     }
   };