@semiont/react-ui 0.5.19 → 0.5.21

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

@@ -5,7 +5,7 @@ import { useTranslations } from '../../../contexts/TranslationContext';
 import type { SemiontSession } from '@semiont/sdk';
 import { useSessionEventSubscriptions } from '../../../hooks/useSessionEventSubscriptions';
 import type { RouteBuilder, LinkComponentProps } from '../../../contexts/RoutingContext';
-import { AnnotateReferencesProgressWidget } from '../../AnnotateReferencesProgressWidget';
+import { AssistShell } from './AssistShell';
 import { ReferenceEntry } from './ReferenceEntry';
 import type { components, Selector } from '@semiont/core';
 import { getTextPositionSelector, getTargetSelector } from '@semiont/core';
@@ -109,19 +109,6 @@ export function ReferencesPanel({
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
-  // Collapsible detection section state - load from localStorage, default expanded
-  const [isAssistExpanded, setIsDetectExpanded] = useState(() => {
-    if (typeof window === 'undefined') return true;
-    const stored = localStorage.getItem('assist-section-expanded-reference');
-    return stored ? stored === 'true' : true;
-  });
-
-  // Persist detection section expanded state to localStorage
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    localStorage.setItem('assist-section-expanded-reference', String(isAssistExpanded));
-  }, [isAssistExpanded]);
-
   // Direct ref management - replace useAnnotationPanel hook
   const entryRefs = useRef<Map<string, HTMLDivElement>>(new Map());
 
@@ -351,120 +338,17 @@ export function ReferencesPanel({
 
       {/* 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 && (
-          <div className="semiont-panel__section">
-            <button
-              onClick={() => setIsDetectExpanded(!isAssistExpanded)}
-              className="semiont-panel__section-title semiont-panel__section-title--collapsible"
-              aria-expanded={isAssistExpanded}
-              type="button"
-            >
-              <span>{t('annotateReferences')}</span>
-              <span className="semiont-panel__section-chevron" data-expanded={isAssistExpanded}>
-                ›
-              </span>
-            </button>
-            {isAssistExpanded && (
-              <>
-                {/* Show annotation UI when not actively assisting */}
-                {!isAssisting && (
-                <div className="semiont-assist-widget" data-type="reference">
-            <>
-              {/* Completed annotation log - shown after completion */}
-              {lastAnnotationLog && lastAnnotationLog.length > 0 && (
-                <div className="semiont-assist-widget__log">
-                  <div className="semiont-assist-widget__log-items">
-                    {lastAnnotationLog.map((item, index) => (
-                      <div key={index} className="semiont-assist-widget__log-item">
-                        <span className="semiont-assist-widget__log-check">✓</span>
-                        <span className="semiont-assist-widget__log-type">{item.entityType}:</span>
-                        <span>{t('found', { count: item.foundCount })}</span>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              {/* Entity Types Selection */}
-              <div className="semiont-assist-widget__entity-types">
-                <p className="semiont-assist-widget__label">
-                  {t('selectEntityTypes')}
-                </p>
-                <div className="semiont-assist-widget__chips">
-                  {allEntityTypes.length > 0 ? (
-                    allEntityTypes.map((type: string) => (
-                      <button
-                        key={type}
-                        onClick={() => {
-                          setSelectedEntityTypes(prev =>
-                            prev.includes(type)
-                              ? prev.filter(t => t !== type)
-                              : [...prev, type]
-                          );
-                        }}
-                        aria-pressed={selectedEntityTypes.includes(type)}
-                        aria-label={`${selectedEntityTypes.includes(type) ? t('deselect') : t('select')} ${type}`}
-                        className="semiont-chip semiont-chip--selectable"
-                        data-selected={selectedEntityTypes.includes(type)}
-                      >
-                        {type}
-                      </button>
-                    ))
-                  ) : (
-                    <p className="semiont-assist-widget__no-types">
-                      {t('noEntityTypes')}
-                    </p>
-                  )}
-                </div>
-              </div>
-
-              {/* Selected Count */}
-              {selectedEntityTypes.length > 0 && (
-                <p className="semiont-assist-widget__count">
-                  {t('typesSelected', { count: selectedEntityTypes.length })}
-                </p>
-              )}
-
-              {/* Include Descriptive References Checkbox */}
-              <div className="semiont-assist-widget__checkbox-group">
-                <label className="semiont-assist-widget__checkbox-label">
-                  <input
-                    type="checkbox"
-                    checked={includeDescriptiveReferences}
-                    onChange={(e) => setIncludeDescriptiveReferences(e.target.checked)}
-                    className="semiont-assist-widget__checkbox"
-                  />
-                  <span>{t('includeDescriptiveReferences')}</span>
-                </label>
-                <p className="semiont-assist-widget__checkbox-hint">
-                  {t('descriptiveReferencesTooltip')}
-                </p>
-              </div>
-
-              {/* Start Assist Button */}
-              <button
-                onClick={handleAssist}
-                disabled={selectedEntityTypes.length === 0}
-                title={t('annotate')}
-                className="semiont-button"
-                data-variant="assist"
-                data-type="reference"
-              >
-                <span className="semiont-button-icon">✨</span>
-                <span>{t('annotate')}</span>
-              </button>
-            </>
-            </div>
-          )}
-
-          {/* Annotation Progress - shown when active */}
-          {isAssisting && progress && (
-            <AnnotateReferencesProgressWidget
-              progress={progress}
-              annotationType="reference"
-              cancelJobType="annotation"
-              translations={{
+          <AssistShell
+            assistType="reference"
+            title={t('annotateReferences')}
+            isAssisting={isAssisting}
+            progress={progress}
+            progressProps={{
+              onCancel: () => session?.client.job.cancelRequest('annotation'),
+              onDismiss: () => session?.client.mark.dismissProgress(),
+              translations: {
                 title: t('annotationProgressTitle'),
                 cancel: t('cancelAnnotation'),
                 inProgress: t('annotating'),
@@ -472,12 +356,97 @@ export function ReferencesPanel({
                 failed: t('failed'),
                 found: (count) => t('found', { count }),
                 current: (entityType) => t('current', { entityType }),
-              }}
-            />
-          )}
+                close: t('closeProgress'),
+              },
+            }}
+            form={
+              <>
+                {/* Completed annotation log - shown after completion */}
+                {lastAnnotationLog && lastAnnotationLog.length > 0 && (
+                  <div className="semiont-assist-widget__log">
+                    <div className="semiont-assist-widget__log-items">
+                      {lastAnnotationLog.map((item, index) => (
+                        <div key={index} className="semiont-assist-widget__log-item">
+                          <span className="semiont-assist-widget__log-check">✓</span>
+                          <span className="semiont-assist-widget__log-type">{item.entityType}:</span>
+                          <span>{t('found', { count: item.foundCount })}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Entity Types Selection */}
+                <div className="semiont-assist-widget__entity-types">
+                  <p className="semiont-assist-widget__label">
+                    {t('selectEntityTypes')}
+                  </p>
+                  <div className="semiont-assist-widget__chips">
+                    {allEntityTypes.length > 0 ? (
+                      allEntityTypes.map((type: string) => (
+                        <button
+                          key={type}
+                          onClick={() => {
+                            setSelectedEntityTypes(prev =>
+                              prev.includes(type)
+                                ? prev.filter(t => t !== type)
+                                : [...prev, type]
+                            );
+                          }}
+                          aria-pressed={selectedEntityTypes.includes(type)}
+                          aria-label={`${selectedEntityTypes.includes(type) ? t('deselect') : t('select')} ${type}`}
+                          className="semiont-chip semiont-chip--selectable"
+                          data-selected={selectedEntityTypes.includes(type)}
+                        >
+                          {type}
+                        </button>
+                      ))
+                    ) : (
+                      <p className="semiont-assist-widget__no-types">
+                        {t('noEntityTypes')}
+                      </p>
+                    )}
+                  </div>
+                </div>
+
+                {/* Selected Count */}
+                {selectedEntityTypes.length > 0 && (
+                  <p className="semiont-assist-widget__count">
+                    {t('typesSelected', { count: selectedEntityTypes.length })}
+                  </p>
+                )}
+
+                {/* Include Descriptive References Checkbox */}
+                <div className="semiont-assist-widget__checkbox-group">
+                  <label className="semiont-assist-widget__checkbox-label">
+                    <input
+                      type="checkbox"
+                      checked={includeDescriptiveReferences}
+                      onChange={(e) => setIncludeDescriptiveReferences(e.target.checked)}
+                      className="semiont-assist-widget__checkbox"
+                    />
+                    <span>{t('includeDescriptiveReferences')}</span>
+                  </label>
+                  <p className="semiont-assist-widget__checkbox-hint">
+                    {t('descriptiveReferencesTooltip')}
+                  </p>
+                </div>
+
+                {/* Start Assist Button */}
+                <button
+                  onClick={handleAssist}
+                  disabled={selectedEntityTypes.length === 0}
+                  title={t('annotate')}
+                  className="semiont-button"
+                  data-variant="assist"
+                  data-type="reference"
+                >
+                  <span className="semiont-button-icon">✨</span>
+                  <span>{t('annotate')}</span>
+                </button>
               </>
-            )}
-          </div>
+            }
+          />
         )}
 
         {/* References List Section */}

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

@@ -4,6 +4,7 @@ import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import { useObservable } from '../../../hooks/useObservable';
 import type { SemiontSession } from '@semiont/sdk';
+import { AssistShell } from './AssistShell';
 import { useSessionEventSubscriptions } from '../../../hooks/useSessionEventSubscriptions';
 import type { components, Selector } from '@semiont/core';
 import { getTextPositionSelector, getTargetSelector } from '@semiont/core';
@@ -111,19 +112,6 @@ export function TaggingPanel({
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
-  // Collapsible detection section state - load from localStorage, default expanded
-  const [isAssistExpanded, setIsDetectExpanded] = useState(() => {
-    if (typeof window === 'undefined') return true;
-    const stored = localStorage.getItem('assist-section-expanded-tag');
-    return stored ? stored === 'true' : true;
-  });
-
-  // Persist detection section expanded state to localStorage
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    localStorage.setItem('assist-section-expanded-tag', String(isAssistExpanded));
-  }, [isAssistExpanded]);
-
   // Subscribe to click events - update focused state
   // Event handler for annotation clicks (extracted to avoid inline arrow function)
   const handleAnnotationClick = useCallback(({ annotationId }: { annotationId: string }) => {
@@ -357,22 +345,14 @@ export function TaggingPanel({
 
         {/* Assist Section - only in Annotate mode */}
         {annotateMode && (
-          <div className="semiont-panel__section">
-            <button
-              onClick={() => setIsDetectExpanded(!isAssistExpanded)}
-              className="semiont-panel__section-title semiont-panel__section-title--collapsible"
-              aria-expanded={isAssistExpanded}
-              type="button"
-            >
-              <span>{t('annotateTags')}</span>
-              <span className="semiont-panel__section-chevron" data-expanded={isAssistExpanded}>
-                ›
-              </span>
-            </button>
-            {isAssistExpanded && (
-              <div className="semiont-assist-widget" data-assisting={isAssisting && progress ? 'true' : 'false'} data-type="tag">
-              {!isAssisting && !progress && (
-                <>
+          <AssistShell
+            assistType="tag"
+            title={t('annotateTags')}
+            isAssisting={isAssisting}
+            progress={progress}
+            progressProps={{ showPercentBar: true }}
+            form={
+              <>
                   {/* Empty-state — registry has resolved with no schemas. */}
                   {noSchemasRegistered && (
                     <p className="semiont-form__help" data-type="tag-no-schemas">
@@ -461,64 +441,21 @@ export function TaggingPanel({
                       </p>
                     </div>
                   )}
-                </>
-              )}
-
-              {/* Assist Button - Always visible */}
-              <button
-                onClick={handleAssist}
-                disabled={selectedCategories.size === 0 || isAssisting}
-                className="semiont-button"
-                data-variant="assist"
-                data-type="tag"
-              >
-                <span className="semiont-button-icon">✨</span>
-                <span>{t('annotate')}</span>
-              </button>
-
-              {/* Annotation Progress */}
-              {isAssisting && progress && (
-                <div className="semiont-annotation-progress" data-type="tag">
-                  {/* Request Parameters */}
-                  {progress.requestParams && progress.requestParams.length > 0 && (
-                    <div className="semiont-annotation-progress__params" data-type="tag">
-                      <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>
-                  )}
+                {/* Assist Button */}
+                <button
+                  onClick={handleAssist}
+                  disabled={selectedCategories.size === 0 || isAssisting}
+                  className="semiont-button"
+                  data-variant="assist"
+                  data-type="tag"
+                >
+                  <span className="semiont-button-icon">✨</span>
+                  <span>{t('annotate')}</span>
+                </button>
 
-                  <div className="semiont-annotation-progress__status">
-                    <div className="semiont-annotation-progress__message">
-                      <span className="semiont-annotation-progress__icon">✨</span>
-                      <span>{progress.message}</span>
-                    </div>
-                    {progress.currentCategory && (
-                      <div className="semiont-annotation-progress__details">
-                        Processing: {progress.currentCategory}
-                        {progress.processedCategories !== undefined && progress.totalCategories !== undefined && (
-                          <> ({progress.processedCategories}/{progress.totalCategories})</>
-                        )}
-                      </div>
-                    )}
-                  </div>
-                  {progress.percentage !== undefined && (
-                    <div className="semiont-progress-bar">
-                      <div
-                        className="semiont-progress-bar__fill"
-                        data-type="tag"
-                        style={{ width: `${progress.percentage}%` }}
-                      />
-                    </div>
-                  )}
-                </div>
-              )}
-              </div>
-            )}
-          </div>
+              </>
+            }
+          />
         )}
 
         {/* Tags list */}

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

@@ -6,7 +6,7 @@ import type { components, Selector } from '@semiont/core';
 type JobProgress = components['schemas']['JobProgress'];
 import type { RouteBuilder, LinkComponentProps } from '../../../contexts/RoutingContext';
 import type { SemiontSession } from '@semiont/sdk';
-import type { Annotator } from '../../../lib/annotation-registry';
+import { annotatorKeyForMotivation, type Annotator } from '../../../lib/annotation-registry';
 import { StatisticsPanel } from './StatisticsPanel';
 import { HighlightPanel } from './HighlightPanel';
 import { ReferencesPanel } from './ReferencesPanel';
@@ -154,21 +154,13 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
     }
   }, [props.initialTabGeneration]); // Only watch generation counter, not the tab itself
 
-  // Auto-switch to the appropriate tab when creating a new annotation
+  // Auto-switch to the appropriate tab when creating a new annotation. Tab
+  // keys are the annotator keys — derived from the registry, the single
+  // motivation↔annotator source, so this can't drift from ANNOTATORS.
   useEffect(() => {
     if (props.pendingAnnotation) {
-      // Map motivation to tab (only for motivations with corresponding tabs)
-      const motivationToTab: Partial<Record<Motivation, TabKey>> = {
-        'linking': 'reference',
-        'commenting': 'comment',
-        'tagging': 'tag',
-        'assessing': 'assessment',
-        'highlighting': 'highlight'
-      };
-      const tab = motivationToTab[props.pendingAnnotation.motivation];
-      if (tab) {
-        setActiveTab(tab);
-      }
+      const tab = annotatorKeyForMotivation(props.pendingAnnotation.motivation);
+      if (tab) setActiveTab(tab);
     }
   }, [props.pendingAnnotation]);
 

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

@@ -0,0 +1,59 @@
+/**
+ * AssistShell (#7) — the shared assist chrome. Pins the net behavior that
+ * holds across the isAssisting-prop relocation: the form/progress switch and
+ * the dismiss policy (dismiss is offered only once the assist is no longer
+ * running — the SHELL owns that policy; AssistProgress just renders whatever
+ * callback it is handed).
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { AssistShell } from '../AssistShell';
+
+const progress = { stage: 'analyzing', percentage: 50, message: 'working' };
+
+describe('AssistShell', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('renders the form when there is no progress, the progress when there is', () => {
+    const { rerender } = render(
+      <AssistShell assistType="tag" title="Annotate Tags" isAssisting={false} progress={null}
+        form={<button type="button">the form</button>} />,
+    );
+    expect(screen.getByText('the form')).toBeInTheDocument();
+    rerender(
+      <AssistShell assistType="tag" title="Annotate Tags" isAssisting={true} progress={progress}
+        form={<button type="button">the form</button>} />,
+    );
+    expect(screen.queryByText('the form')).not.toBeInTheDocument();
+    expect(screen.getByText('working')).toBeInTheDocument();
+  });
+
+  it('withholds dismiss while assisting, offers it once terminal', async () => {
+    const onDismiss = vi.fn();
+    const props = {
+      assistType: 'highlight', title: 'Annotate Highlights', progress,
+      form: <span>form</span>,
+      progressProps: { onDismiss, translations: { close: 'Close' } },
+    };
+    const { rerender } = render(<AssistShell {...props} isAssisting={true} />);
+    expect(screen.queryByLabelText('Close')).not.toBeInTheDocument();
+
+    rerender(<AssistShell {...props} isAssisting={false} />);
+    await userEvent.click(screen.getByLabelText('Close'));
+    expect(onDismiss).toHaveBeenCalledOnce();
+  });
+
+  it('persists the expand state per assist type', async () => {
+    render(
+      <AssistShell assistType="reference" title="Annotate References" isAssisting={false} progress={null}
+        form={<span>form</span>} />,
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Annotate References/ }));
+    expect(screen.queryByText('form')).not.toBeInTheDocument();
+    expect(localStorage.getItem('assist-section-expanded-reference')).toBe('false');
+  });
+});

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

@@ -306,6 +306,26 @@ describe('ReferenceEntry', () => {
 
       bindSpy.mockRestore();
     });
+
+    it('emits bind:body-error (resource-stamped, client-local) when unlink fails', async () => {
+      // This component has no toast surface — its catch emits the client-local
+      // bind error and useOutcomeToasts surfaces it. The raw
+      // bind:body-update-failed wire reply is busRequest plumbing, not UI.
+      mockIsBodyResolved.mockReturnValue(true);
+      mockGetBodySource.mockReturnValue('linked-doc');
+
+      const bindSpy = vi.spyOn(BindNamespace.prototype, 'body').mockRejectedValue(new Error('link is load-bearing'));
+      const errors: unknown[] = [];
+      eventBus.get('bind:body-error').subscribe(e => errors.push(e));
+
+      const { container } = renderEntry({ annotateMode: true });
+      await userEvent.click(container.querySelector('.semiont-reference-unlink')!);
+
+      await vi.waitFor(() => expect(errors).toHaveLength(1));
+      expect(errors[0]).toEqual({ resourceId: 'resource-1', message: 'link is load-bearing' });
+
+      bindSpy.mockRestore();
+    });
   });
 
   describe('Status icon — stub reference', () => {

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

@@ -51,7 +51,6 @@ vi.mock('../../../../contexts/TranslationContext', () => ({
 
 vi.mock('../AssistSection', () => ({
   AssistSection: () => null,
-  AnnotateReferencesProgressWidget: () => null,
 }));
 
 const NINE_TYPES = [

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

@@ -77,16 +77,6 @@ vi.mock('../../../../contexts/TranslationContext', () => ({
   TranslationProvider: ({ children }: { children: React.ReactNode }) => children,
 }));
 
-// Mock AnnotateReferencesProgressWidget - simplified to avoid module import issues
-vi.mock('@/components/AnnotateReferencesProgressWidget', () => ({
-  AnnotateReferencesProgressWidget: ({ progress }: any) => (
-    <div data-testid="annotation-progress-widget">
-      <div data-testid="progress-data">{JSON.stringify(progress)}</div>
-      <button title="Cancel Annotation">Cancel</button>
-    </div>
-  ),
-}));
-
 describe('ReferencesPanel Component', () => {
   // Mock Link component
   const MockLink = ({ href, children, ...props }: any) => (
@@ -392,7 +382,7 @@ describe('ReferencesPanel Component', () => {
         />
       );
 
-      expect(screen.getByTestId('annotation-progress-widget')).toBeInTheDocument();
+      expect(screen.getByText('Detecting references...')).toBeInTheDocument();
     });
 
     it('should pass progress data to widget', () => {
@@ -414,9 +404,9 @@ describe('ReferencesPanel Component', () => {
         />
       );
 
-      const progressData = screen.getByTestId('progress-data');
-      expect(progressData.textContent).toContain('Person');
-      expect(progressData.textContent).toContain('Organization');
+      // Real AssistProgress renders the completed entity-type log.
+      expect(screen.getByText('Person:')).toBeInTheDocument();
+      expect(screen.getByText('Organization:')).toBeInTheDocument();
     });
 
     it('should hide entity type selection during detection', () => {
@@ -441,7 +431,9 @@ describe('ReferencesPanel Component', () => {
         />
       );
 
-      const cancelButton = screen.getByTitle('Cancel Annotation');
+      // Real AssistProgress titles the cancel button with t('cancelAnnotation')
+      // (the mock translator echoes unknown keys).
+      const cancelButton = screen.getByTitle('cancelAnnotation');
       expect(cancelButton).toBeInTheDocument();
     });
   });
@@ -577,9 +569,11 @@ describe('ReferencesPanel Component', () => {
         />
       );
 
-      // Should not show any log items (but selection UI should still be visible)
+      // Should not show any log items. Terminal progress (dismissable) is
+      // shown instead of the form — the AssistShell normalization (#7); the
+      // form returns once progress clears.
       expect(screen.queryByText('✓')).not.toBeInTheDocument();
-      expect(screen.getByText('Select entity types')).toBeInTheDocument();
+      expect(screen.queryByText('Select entity types')).not.toBeInTheDocument();
     });
   });
 
@@ -600,7 +594,7 @@ describe('ReferencesPanel Component', () => {
       );
 
       // Detecting state
-      expect(screen.getByTestId('annotation-progress-widget')).toBeInTheDocument();
+      expect(screen.getByText('Detecting references...')).toBeInTheDocument();
       expect(screen.queryByText('Select entity types')).not.toBeInTheDocument();
     });
 
@@ -614,7 +608,7 @@ describe('ReferencesPanel Component', () => {
       );
 
       // Detecting
-      expect(screen.getByTestId('annotation-progress-widget')).toBeInTheDocument();
+      expect(screen.getByText('Detecting references...')).toBeInTheDocument();
 
       // Complete - first trigger useEffect to copy to lastDetectionLog
       rerender(
@@ -635,7 +629,7 @@ describe('ReferencesPanel Component', () => {
         <ReferencesPanel {...panelProps()} isAssisting={false} progress={null} />
       );
 
-      expect(screen.queryByTestId('annotation-progress-widget')).not.toBeInTheDocument();
+      expect(screen.queryByText('Annotation complete')).not.toBeInTheDocument();
       // Both log and selection UI should be visible
       expect(screen.getByText('Person:')).toBeInTheDocument();
       expect(screen.getByText('Select entity types')).toBeInTheDocument();

package/src/components/toolbar/Toolbar.css

@@ -230,6 +230,18 @@
   border-bottom: none;
 }
 
+/* Icon-only collapsed triggers — but the label stays in the accessibility
+   tree rather than `display: none`. Its sibling is a bare emoji span with no
+   accessible name, so hiding the label outright would leave the trigger
+   unnamed for screen readers. Same technique as .semiont-sr-only. */
 .semiont-annotate-toolbar--compact .semiont-dropdown-label {
-  display: none; /* icon-only collapsed triggers; expanded menus keep labels */
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
 }