@semiont/react-ui 0.2.34-build.91 → 0.2.34-build.93

package/src/components/resource/panels/__tests__/{DetectSection.test.tsx → AssistSection.test.tsx}

@@ -1,10 +1,10 @@
 /**
- * Layer 1 Unit Test: DetectSection Component
+ * Layer 1 Unit Test: AssistSection Component
  *
- * Tests the DetectSection component in isolation with mocked dependencies.
+ * Tests the AssistSection component in isolation with mocked dependencies.
  *
  * This test verifies:
- * - Detection progress rendering when detectionProgress prop is provided
+ * - Detection progress rendering when progress prop is provided
  * - Progress message display
  * - Request parameters display
  * - Form visibility toggling based on progress state
@@ -16,16 +16,16 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import { renderWithProviders } from '../../../../test-utils';
 import userEvent from '@testing-library/user-event';
-import { DetectSection } from '../DetectSection';
+import { AssistSection } from '../AssistSection';
 import { resetEventBusForTesting } from '../../../../contexts/EventBusContext';
 import type { EventBus } from "@semiont/core"
 
 // Mock translations
 const mockT = vi.fn((key: string) => {
   const translations: Record<string, string> = {
-    detectHighlights: 'Detect Highlights',
-    detectAssessments: 'Detect Assessments',
-    detectComments: 'Detect Comments',
+    annotateHighlights: 'Annotate Highlights',
+    annotateAssessments: 'Annotate Assessments',
+    annotateComments: 'Annotate Comments',
     instructions: 'Instructions',
     optional: '(optional)',
     instructionsPlaceholder: 'Enter custom instructions...',
@@ -42,7 +42,8 @@ const mockT = vi.fn((key: string) => {
     densityLabel: 'Density',
     densitySparse: 'Sparse',
     densityDense: 'Dense',
-    detect: 'Detect',
+    annotate: 'Annotate',
+    annotating: 'Annotating...',
   };
   return translations[key] || key;
 });
@@ -52,7 +53,7 @@ vi.mock('../../../../contexts/TranslationContext', () => ({
   TranslationProvider: ({ children }: { children: React.ReactNode }) => children,
 }));
 
-describe('DetectSection', () => {
+describe('AssistSection', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     resetEventBusForTesting();
@@ -63,12 +64,12 @@ describe('DetectSection', () => {
   });
 
   describe('Progress Display', () => {
-    it('should render progress message when detectionProgress prop provided', () => {
+    it('should render progress message when progress prop provided', () => {
       renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="highlight"
-          isDetecting={true}
-          detectionProgress={{
+          isAssisting={true}
+          progress={{
             status: 'analyzing',
             percentage: 30,
             message: 'Analyzing text for highlights...',
@@ -81,10 +82,10 @@ describe('DetectSection', () => {
 
     it('should render progress message with sparkle icon', () => {
       renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="highlight"
-          isDetecting={true}
-          detectionProgress={{
+          isAssisting={true}
+          progress={{
             status: 'analyzing',
             message: 'Processing...',
           }}
@@ -92,17 +93,17 @@ describe('DetectSection', () => {
       );
 
       // Check for icon and message
-      const progressDiv = screen.getByText('Processing...').closest('.semiont-detection-progress__message');
+      const progressDiv = screen.getByText('Processing...').closest('.semiont-annotation-progress__message');
       expect(progressDiv).toBeInTheDocument();
-      expect(progressDiv?.querySelector('.semiont-detection-progress__icon')).toBeInTheDocument();
+      expect(progressDiv?.querySelector('.semiont-annotation-progress__icon')).toBeInTheDocument();
     });
 
     it('should render request parameters when provided', () => {
       renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="highlight"
-          isDetecting={true}
-          detectionProgress={{
+          isAssisting={true}
+          progress={{
             status: 'analyzing',
             message: 'Analyzing...',
             requestParams: [
@@ -120,12 +121,12 @@ describe('DetectSection', () => {
       expect(screen.getByText(/Density:/)).toBeInTheDocument();
     });
 
-    it('should hide form when detectionProgress is present', () => {
+    it('should hide form when progress is present', () => {
       renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="highlight"
-          isDetecting={true}
-          detectionProgress={{
+          isAssisting={true}
+          progress={{
             status: 'analyzing',
             message: 'Analyzing...',
           }}
@@ -134,43 +135,43 @@ describe('DetectSection', () => {
 
       // Form should not be visible
       expect(screen.queryByPlaceholderText('Enter custom instructions...')).not.toBeInTheDocument();
-      expect(screen.queryByRole('button', { name: /✨ Detect/ })).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: /✨ Annotate/ })).not.toBeInTheDocument();
     });
 
-    it('should show form when detectionProgress is null', () => {
+    it('should show form when progress is null', () => {
       renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="highlight"
-          isDetecting={false}
-          detectionProgress={null}
+          isAssisting={false}
+          progress={null}
         />
       );
 
       // Form should be visible
       expect(screen.getByPlaceholderText('Enter custom instructions...')).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: /✨ Detect/ })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /✨ Annotate/ })).toBeInTheDocument();
     });
 
-    it('should show form when detectionProgress is undefined', () => {
+    it('should show form when progress is undefined', () => {
       renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="highlight"
-          isDetecting={false}
-          detectionProgress={undefined}
+          isAssisting={false}
+          progress={undefined}
         />
       );
 
       // Form should be visible
       expect(screen.getByPlaceholderText('Enter custom instructions...')).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: /✨ Detect/ })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /✨ Annotate/ })).toBeInTheDocument();
     });
 
-    it('should keep progress visible after detection completes (isDetecting=false but progress exists)', () => {
+    it('should keep progress visible after detection completes (isAssisting=false but progress exists)', () => {
       renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="highlight"
-          isDetecting={false}
-          detectionProgress={{
+          isAssisting={false}
+          progress={{
             status: 'complete',
             percentage: 100,
             message: 'Complete! Created 14 highlights',
@@ -188,46 +189,46 @@ describe('DetectSection', () => {
   describe('Annotation Type Variations', () => {
     it('should render for highlight type', () => {
       renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="highlight"
-          isDetecting={false}
-          detectionProgress={null}
+          isAssisting={false}
+          progress={null}
         />
       );
 
-      expect(screen.getByText('Detect Highlights')).toBeInTheDocument();
+      expect(screen.getByText('Annotate Highlights')).toBeInTheDocument();
     });
 
     it('should render for assessment type', () => {
       renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="assessment"
-          isDetecting={false}
-          detectionProgress={null}
+          isAssisting={false}
+          progress={null}
         />
       );
 
-      expect(screen.getByText('Detect Assessments')).toBeInTheDocument();
+      expect(screen.getByText('Annotate Assessments')).toBeInTheDocument();
     });
 
     it('should render for comment type', () => {
       renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="comment"
-          isDetecting={false}
-          detectionProgress={null}
+          isAssisting={false}
+          progress={null}
         />
       );
 
-      expect(screen.getByText('Detect Comments')).toBeInTheDocument();
+      expect(screen.getByText('Annotate Comments')).toBeInTheDocument();
     });
 
     it('should show tone selector for comments', () => {
       renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="comment"
-          isDetecting={false}
-          detectionProgress={null}
+          isAssisting={false}
+          progress={null}
         />
       );
 
@@ -237,10 +238,10 @@ describe('DetectSection', () => {
 
     it('should show tone selector for assessments', () => {
       renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="assessment"
-          isDetecting={false}
-          detectionProgress={null}
+          isAssisting={false}
+          progress={null}
         />
       );
 
@@ -250,10 +251,10 @@ describe('DetectSection', () => {
 
     it('should not show tone selector for highlights', () => {
       renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="highlight"
-          isDetecting={false}
-          detectionProgress={null}
+          isAssisting={false}
+          progress={null}
         />
       );
 
@@ -263,23 +264,23 @@ describe('DetectSection', () => {
   });
 
   describe('Event Emission', () => {
-    it('should emit detection:start event when detect button clicked', async () => {
+    it('should emit annotate:detect-request event when detect button clicked', async () => {
       const user = userEvent.setup();
       const detectionHandler = vi.fn();
 
       const { eventBus } = renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="highlight"
-          isDetecting={false}
-          detectionProgress={null}
+          isAssisting={false}
+          progress={null}
         />,
         { returnEventBus: true }
       );
 
-      const subscription = eventBus!.get('detection:start').subscribe(detectionHandler);
+      const subscription = eventBus!.get('annotate:assist-request').subscribe(detectionHandler);
 
-      const detectButton = screen.getByRole('button', { name: /✨ Detect/ });
-      await user.click(detectButton);
+      const annotateButton = screen.getByRole('button', { name: /✨ Annotate/ });
+      await user.click(annotateButton);
 
       expect(detectionHandler).toHaveBeenCalledWith({
         motivation: 'highlighting',
@@ -294,18 +295,18 @@ describe('DetectSection', () => {
       const detectionHandler = vi.fn();
 
       const { eventBus } = renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="assessment"
-          isDetecting={false}
-          detectionProgress={null}
+          isAssisting={false}
+          progress={null}
         />,
         { returnEventBus: true }
       );
 
-      const subscription = eventBus!.get('detection:start').subscribe(detectionHandler);
+      const subscription = eventBus!.get('annotate:assist-request').subscribe(detectionHandler);
 
-      const detectButton = screen.getByRole('button', { name: /✨ Detect/ });
-      await user.click(detectButton);
+      const annotateButton = screen.getByRole('button', { name: /✨ Annotate/ });
+      await user.click(annotateButton);
 
       expect(detectionHandler).toHaveBeenCalledWith({
         motivation: 'assessing',
@@ -320,18 +321,18 @@ describe('DetectSection', () => {
       const detectionHandler = vi.fn();
 
       const { eventBus } = renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="comment"
-          isDetecting={false}
-          detectionProgress={null}
+          isAssisting={false}
+          progress={null}
         />,
         { returnEventBus: true }
       );
 
-      const subscription = eventBus!.get('detection:start').subscribe(detectionHandler);
+      const subscription = eventBus!.get('annotate:assist-request').subscribe(detectionHandler);
 
-      const detectButton = screen.getByRole('button', { name: /✨ Detect/ });
-      await user.click(detectButton);
+      const annotateButton = screen.getByRole('button', { name: /✨ Annotate/ });
+      await user.click(annotateButton);
 
       expect(detectionHandler).toHaveBeenCalledWith({
         motivation: 'commenting',
@@ -346,21 +347,21 @@ describe('DetectSection', () => {
       const detectionHandler = vi.fn();
 
       const { eventBus } = renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="highlight"
-          isDetecting={false}
-          detectionProgress={null}
+          isAssisting={false}
+          progress={null}
         />,
         { returnEventBus: true }
       );
 
-      const subscription = eventBus!.get('detection:start').subscribe(detectionHandler);
+      const subscription = eventBus!.get('annotate:assist-request').subscribe(detectionHandler);
 
       const textarea = screen.getByPlaceholderText('Enter custom instructions...');
       await user.type(textarea, 'Find key concepts');
 
-      const detectButton = screen.getByRole('button', { name: /✨ Detect/ });
-      await user.click(detectButton);
+      const annotateButton = screen.getByRole('button', { name: /✨ Annotate/ });
+      await user.click(annotateButton);
 
       expect(detectionHandler).toHaveBeenCalledWith({
         motivation: 'highlighting',
@@ -377,14 +378,14 @@ describe('DetectSection', () => {
   describe('Collapsible Behavior', () => {
     it('should be expanded by default', () => {
       renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="highlight"
-          isDetecting={false}
-          detectionProgress={null}
+          isAssisting={false}
+          progress={null}
         />
       );
 
-      const collapseButton = screen.getByRole('button', { name: /Detect Highlights/ });
+      const collapseButton = screen.getByRole('button', { name: /Annotate Highlights/ });
       expect(collapseButton).toHaveAttribute('aria-expanded', 'true');
       expect(screen.getByPlaceholderText('Enter custom instructions...')).toBeInTheDocument();
     });
@@ -393,14 +394,14 @@ describe('DetectSection', () => {
       const user = userEvent.setup();
 
       renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="highlight"
-          isDetecting={false}
-          detectionProgress={null}
+          isAssisting={false}
+          progress={null}
         />
       );
 
-      const collapseButton = screen.getByRole('button', { name: /Detect Highlights/ });
+      const collapseButton = screen.getByRole('button', { name: /Annotate Highlights/ });
       await user.click(collapseButton);
 
       expect(collapseButton).toHaveAttribute('aria-expanded', 'false');
@@ -411,14 +412,14 @@ describe('DetectSection', () => {
       const user = userEvent.setup();
 
       renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="highlight"
-          isDetecting={false}
-          detectionProgress={null}
+          isAssisting={false}
+          progress={null}
         />
       );
 
-      const collapseButton = screen.getByRole('button', { name: /Detect Highlights/ });
+      const collapseButton = screen.getByRole('button', { name: /Annotate Highlights/ });
       await user.click(collapseButton); // Collapse
       await user.click(collapseButton); // Expand
 
@@ -430,10 +431,10 @@ describe('DetectSection', () => {
   describe('Edge Cases', () => {
     it('should handle empty progress message', () => {
       renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="highlight"
-          isDetecting={true}
-          detectionProgress={{
+          isAssisting={true}
+          progress={{
             status: 'analyzing',
             message: '',
           }}
@@ -441,16 +442,16 @@ describe('DetectSection', () => {
       );
 
       // Should render progress section even with empty message
-      const progressDiv = document.querySelector('.semiont-detection-progress');
+      const progressDiv = document.querySelector('.semiont-annotation-progress');
       expect(progressDiv).toBeInTheDocument();
     });
 
     it('should handle progress without percentage', () => {
       renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="highlight"
-          isDetecting={true}
-          detectionProgress={{
+          isAssisting={true}
+          progress={{
             status: 'analyzing',
             message: 'Processing...',
             // no percentage
@@ -463,10 +464,10 @@ describe('DetectSection', () => {
 
     it('should handle progress with empty requestParams array', () => {
       renderWithProviders(
-        <DetectSection
+        <AssistSection
           annotationType="highlight"
-          isDetecting={true}
-          detectionProgress={{
+          isAssisting={true}
+          progress={{
             status: 'analyzing',
             message: 'Processing...',
             requestParams: [],

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

@@ -241,7 +241,7 @@ describe('CommentEntry Component', () => {
   });
 
   describe('Click Interactions', () => {
-    it('should emit annotation:click event when comment is clicked', async () => {
+    it('should emit attend:click event when comment is clicked', async () => {
       const clickHandler = vi.fn();
 
       const { container, eventBus } = renderWithProviders(
@@ -250,7 +250,7 @@ describe('CommentEntry Component', () => {
       );
 
       // Subscribe to actual event on real event bus
-      const subscription = eventBus!.get('annotation:click').subscribe(clickHandler);
+      const subscription = eventBus!.get('attend:click').subscribe(clickHandler);
 
       const commentDiv = container.firstChild as HTMLElement;
       await userEvent.click(commentDiv);
@@ -273,7 +273,7 @@ describe('CommentEntry Component', () => {
   });
 
   describe('Hover Interactions', () => {
-    it('should emit annotation:hover event with annotation id after dwell delay', () => {
+    it('should emit attend:hover event with annotation id after dwell delay', () => {
       vi.useFakeTimers();
       const hoverHandler = vi.fn();
 
@@ -283,7 +283,7 @@ describe('CommentEntry Component', () => {
       );
 
       // Subscribe to actual event
-      const subscription = eventBus!.get('annotation:hover').subscribe(hoverHandler);
+      const subscription = eventBus!.get('attend:hover').subscribe(hoverHandler);
 
       const commentDiv = container.firstChild as HTMLElement;
       fireEvent.mouseEnter(commentDiv);
@@ -301,7 +301,7 @@ describe('CommentEntry Component', () => {
       vi.useRealTimers();
     });
 
-    it('should NOT emit annotation:hover when mouse leaves before dwell delay', () => {
+    it('should NOT emit attend:hover when mouse leaves before dwell delay', () => {
       vi.useFakeTimers();
       const hoverHandler = vi.fn();
 
@@ -311,7 +311,7 @@ describe('CommentEntry Component', () => {
       );
 
       // Subscribe to actual event
-      const subscription = eventBus!.get('annotation:hover').subscribe(hoverHandler);
+      const subscription = eventBus!.get('attend:hover').subscribe(hoverHandler);
 
       const commentDiv = container.firstChild as HTMLElement;
       fireEvent.mouseEnter(commentDiv);
@@ -327,7 +327,7 @@ describe('CommentEntry Component', () => {
       vi.useRealTimers();
     });
 
-    it('should emit annotation:hover null after dwell then leave', () => {
+    it('should emit attend:hover null after dwell then leave', () => {
       vi.useFakeTimers();
       const hoverHandler = vi.fn();
 
@@ -336,7 +336,7 @@ describe('CommentEntry Component', () => {
         { returnEventBus: true }
       );
 
-      const subscription = eventBus!.get('annotation:hover').subscribe(hoverHandler);
+      const subscription = eventBus!.get('attend:hover').subscribe(hoverHandler);
 
       const commentDiv = container.firstChild as HTMLElement;
       fireEvent.mouseEnter(commentDiv);

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

@@ -29,7 +29,7 @@ function createEventTracker() {
         events.push({ event: eventName, payload });
       };
 
-      const panelEvents = ['annotation:create'] as const;
+      const panelEvents = ['annotate:create'] as const;
 
       panelEvents.forEach(eventName => {
         const handler = trackEvent(eventName);
@@ -396,7 +396,7 @@ describe('CommentsPanel Component', () => {
       expect(textarea).toHaveFocus();
     });
 
-    it('should emit annotation:create event when save is clicked', async () => {
+    it('should emit annotate:createevent when save is clicked', async () => {
       const tracker = createEventTracker();
       const pendingAnnotation = createPendingAnnotation('Selected text');
 
@@ -416,7 +416,7 @@ describe('CommentsPanel Component', () => {
 
       await waitFor(() => {
         expect(tracker.events.some(e =>
-          e.event === 'annotation:create' &&
+          e.event === 'annotate:create' &&
           e.payload?.motivation === 'commenting' &&
           e.payload?.body?.[0]?.value === 'My new comment'
         )).toBe(true);