@semiont/react-ui 0.5.24 → 0.5.25

package/src/components/resource/__tests__/download-link.test.tsx

@@ -0,0 +1,129 @@
+/**
+ * The "Download File" affordance on the unsupported-media fallback, in BOTH
+ * resource views.
+ *
+ * `GET /api/resources/:id` is the browser-facing alias of the pipe, and it
+ * exists only as an auth affordance for `<img>`, PDF.js and download links: a
+ * plain `<a download href>` sends neither an Authorization header nor a cookie,
+ * so the alias takes bearer + `?token=` only. Both views shipped a bare
+ * `/api/resources/${id}` — tokenless, so a 401, AND relative, so under
+ * bring-your-own-session embedding it resolves against the HOST app's origin
+ * rather than the backend's.
+ *
+ * Started RED (both hrefs were `/api/resources/res-1`).
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import type { SemiontSession } from '@semiont/sdk';
+import type { AnnotationUIState } from '../../../types/annotation-props';
+import { AnnotateView } from '../AnnotateView';
+import { BrowseView } from '../BrowseView';
+
+vi.mock('../../annotation/AnnotateToolbar', () => ({ AnnotateToolbar: () => null }));
+vi.mock('../../CodeMirrorRenderer', () => ({ CodeMirrorRenderer: () => null }));
+vi.mock('../../image-annotation/SvgDrawingCanvas', () => ({ SvgDrawingCanvas: () => null }));
+vi.mock('react-markdown', () => ({ default: ({ children }: { children: string }) => <div>{children}</div> }));
+vi.mock('remark-gfm', () => ({ default: () => ({}) }));
+
+const BACKEND = 'http://backend.test:4000';
+const UNSUPPORTED = 'application/octet-stream';
+
+const emptyAnnotations = { highlights: [], references: [], assessments: [], comments: [], tags: [] };
+const uiState: AnnotationUIState = {
+  selectedMotivation: null,
+  selectedClick: 'detail',
+  selectedShape: 'rectangle',
+  hoveredAnnotationId: null,
+  scrollToAnnotationId: null,
+};
+
+/** A session whose client mints `token` — the batteries-included case. */
+function sessionMinting(token: string): SemiontSession {
+  return fakeSession({ auth: { mediaToken: vi.fn(async () => ({ token })) } });
+}
+
+/** A session whose token request never settles — the in-flight case. */
+function sessionPending(): SemiontSession {
+  return fakeSession({ auth: { mediaToken: vi.fn(() => new Promise<never>(() => {})) } });
+}
+
+/**
+ * A transport-only client: `SemiontClient.auth` is `AuthNamespace | undefined`,
+ * and a host wiring a bare transport (no `IBackendOperations`) has no `auth`.
+ */
+function sessionWithoutAuth(): SemiontSession {
+  return fakeSession({});
+}
+
+function fakeSession(clientExtras: Record<string, unknown>): SemiontSession {
+  return {
+    client: {
+      baseUrl: BACKEND,
+      mark: { request: vi.fn() },
+      browse: { click: vi.fn() },
+      beckon: { hover: vi.fn() },
+      ...clientExtras,
+    },
+    subscribe: () => () => {},
+  } as unknown as SemiontSession;
+}
+
+const annotateProps = (session: SemiontSession) => ({
+  content: '',
+  mimeType: UNSUPPORTED,
+  resourceUri: 'res-1',
+  annotations: emptyAnnotations,
+  uiState,
+  annotateMode: false,
+  session,
+});
+
+const browseProps = (session: SemiontSession) => ({
+  content: '',
+  mimeType: UNSUPPORTED,
+  resourceUri: 'res-1',
+  annotations: emptyAnnotations,
+  annotateMode: false,
+  session,
+});
+
+const VIEWS = [
+  { name: 'AnnotateView', render: (s: SemiontSession) => render(<AnnotateView {...annotateProps(s)} />) },
+  { name: 'BrowseView', render: (s: SemiontSession) => render(<BrowseView {...browseProps(s)} />) },
+] as const;
+
+describe.each(VIEWS)('$name — unsupported-media download link', ({ render: renderView }) => {
+  it('points at the backend origin and carries the media token', async () => {
+    renderView(sessionMinting('tok-abc'));
+
+    const link = await screen.findByRole('link', { name: 'Download File' });
+    expect(link).toHaveAttribute('href', `${BACKEND}/api/resources/res-1?token=tok-abc`);
+    expect(link).toHaveAttribute('download');
+  });
+
+  it('renders no href while the token is still in flight', async () => {
+    renderView(sessionPending());
+
+    // The affordance stays on screen — it is just not yet actionable. What it
+    // must NOT do is offer a URL already known to fail.
+    expect(await screen.findByText('Download File')).toBeInTheDocument();
+    expect(screen.queryByRole('link', { name: 'Download File' })).not.toBeInTheDocument();
+  });
+
+  it('renders no href when the client has no auth namespace', async () => {
+    renderView(sessionWithoutAuth());
+
+    expect(await screen.findByText('Download File')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.queryByRole('link', { name: 'Download File' })).not.toBeInTheDocument();
+    });
+  });
+
+  it('never builds a host-relative URL', async () => {
+    renderView(sessionMinting('tok-abc'));
+
+    const link = await screen.findByRole('link', { name: 'Download File' });
+    expect(link.getAttribute('href')).not.toMatch(/^\//);
+  });
+});

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

@@ -126,49 +126,6 @@
    Detection Log (Completed Results)
    ============================================ */
 
-.semiont-assist-widget__log {
-  background-color: var(--semiont-bg-primary);
-  border-radius: 0.5rem;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-[data-theme="dark"] .semiont-assist-widget__log {
-  background-color: var(--semiont-color-gray-800);
-}
-
-.semiont-assist-widget__log-items {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.semiont-assist-widget__log-item {
-  font-size: 0.75rem;
-  color: var(--semiont-color-gray-600);
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-[data-theme="dark"] .semiont-assist-widget__log-item {
-  color: var(--semiont-color-gray-400);
-}
-
-.semiont-assist-widget__log-check {
-  color: var(--semiont-color-green-600);
-}
-
-[data-theme="dark"] .semiont-assist-widget__log-check {
-  color: var(--semiont-color-green-400);
-}
-
-.semiont-assist-widget__log-type {
-  font-weight: 500;
-}
 
 /* ============================================
    Detection Progress Display

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

@@ -43,6 +43,7 @@ export function AssistSection({
                      annotationType === 'assessment' ? 'AssessmentPanel' :
                      'CommentsPanel';
   const t = useTranslations(panelName);
+  const ta = useTranslations('AssistProgress');
   const [instructions, setInstructions] = useState('');
   type ToneValue = 'scholarly' | 'explanatory' | 'conversational' | 'technical' | 'analytical' | 'critical' | 'balanced' | 'constructive' | '';
   const [tone, setTone] = useState<ToneValue>('');
@@ -89,7 +90,15 @@ export function AssistSection({
       progress={progress}
       progressProps={{
         onDismiss: handleDismissProgress,
-        translations: { close: t('closeProgress') },
+        translations: {
+          cancel: t('cancel'),
+          inProgress: t('annotating'),
+          complete: t('complete'),
+          failed: t('failed'),
+          paramsTitle: ta('paramsTitle'),
+          processing: (label) => ta('processing', { label }),
+          close: ta('close'),
+        },
       }}
       form={
         <>
@@ -157,7 +166,7 @@ export function AssistSection({
                 <span>{t('densityLabel')}</span>
               </label>
               {useDensity && (
-                <span className="semiont-form-field__info">{density} per 2000 words</span>
+                <span className="semiont-form-field__info">{t('densityPerWords', { density })}</span>
               )}
             </div>
 

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

@@ -19,8 +19,12 @@ export interface AssistShellProps {
    * 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.
+   *
+   * Required because `translations` is: the shell renders the progress display
+   * itself, so a caller that omitted this would render untranslated chrome —
+   * the failure Lane A exists to make impossible.
    */
-  progressProps?: Omit<AssistProgressProps, 'progress' | 'dataType'>;
+  progressProps: Omit<AssistProgressProps, 'progress' | 'dataType'>;
 }
 
 /**

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

@@ -6,6 +6,7 @@ import type { SemiontSession } from '@semiont/sdk';
 import { useSessionEventSubscriptions } from '../../../hooks/useSessionEventSubscriptions';
 import type { RouteBuilder, LinkComponentProps } from '../../../contexts/RoutingContext';
 import { AssistShell } from './AssistShell';
+import { EntityFoundLog } from '../../EntityFoundLog';
 import { ReferenceEntry } from './ReferenceEntry';
 import type { components, Selector } from '@semiont/core';
 import { getTextPositionSelector, getTargetSelector } from '@semiont/core';
@@ -121,6 +122,9 @@ export function ReferencesPanel({
   sourceLanguage,
 }: Props) {
   const t = useTranslations('ReferencesPanel');
+  // Chrome shared by every assist surface (heading, current-work line, dismiss)
+  // lives in one namespace so the same words aren't re-translated per panel.
+  const ta = useTranslations('AssistProgress');
   const [selectedEntityTypes, setSelectedEntityTypes] = useState<string[]>([]);
   const [lastAnnotationLog, setLastDetectionLog] = useState<Array<{ entityType: string; foundCount: number }> | null>(null);
   const [pendingEntityTypes, setPendingEntityTypes] = useState<string[]>([]);
@@ -375,24 +379,19 @@ export function ReferencesPanel({
                 failed: t('failed'),
                 found: (count) => t('found', { count }),
                 current: (entityType) => t('current', { entityType }),
-                close: t('closeProgress'),
+                paramsTitle: ta('paramsTitle'),
+                processing: (label) => ta('processing', { label }),
+                close: ta('close'),
               },
             }}
             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>
+                {lastAnnotationLog && (
+                  <EntityFoundLog
+                    entries={lastAnnotationLog}
+                    formatFound={(count) => t('found', { count })}
+                  />
                 )}
 
                 {/* Entity Types Selection */}

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

@@ -82,6 +82,14 @@ export function TaggingPanel({
   sourceLanguage,
 }: TaggingPanelProps) {
   const t = useTranslations('TaggingPanel');
+  const ta = useTranslations('AssistProgress');
+
+  // Dismiss parity: tag was the one assist surface with no way to clear a
+  // finished progress display, because it had no `closeProgress` key to
+  // label the control. Same wiring as every other surface.
+  const handleDismissProgress = useCallback(() => {
+    session?.client.mark.dismissProgress();
+  }, [session]);
 
   // Subscribe to the per-KB tag-schema registry. Schemas are runtime-
   // registered by the KB at session start (see frame.addTagSchema).
@@ -355,7 +363,19 @@ export function TaggingPanel({
             title={t('annotateTags')}
             isAssisting={isAssisting}
             progress={progress}
-            progressProps={{ showPercentBar: true }}
+            progressProps={{
+              showPercentBar: true,
+              onDismiss: handleDismissProgress,
+              translations: {
+                cancel: t('cancel'),
+                inProgress: t('annotating'),
+                complete: t('complete'),
+                failed: t('failed'),
+                paramsTitle: ta('paramsTitle'),
+                processing: (label) => ta('processing', { label }),
+                close: ta('close'),
+              },
+            }}
             form={
               <>
                   {/* Empty-state — registry has resolved with no schemas. */}

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

@@ -126,7 +126,7 @@ describe('AssistSection', () => {
         />
       );
 
-      expect(screen.getByText('Request Parameters:')).toBeInTheDocument();
+      expect(screen.getByText('paramsTitle')).toBeInTheDocument();
       expect(screen.getByText('Find important points')).toBeInTheDocument();
       expect(screen.getByText(/Instructions:/)).toBeInTheDocument();
       expect(screen.getByText('5')).toBeInTheDocument();
@@ -506,7 +506,7 @@ describe('AssistSection', () => {
         />
       );
 
-      expect(screen.queryByText('Request Parameters:')).not.toBeInTheDocument();
+      expect(screen.queryByText('paramsTitle')).not.toBeInTheDocument();
     });
   });
 });

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

@@ -13,6 +13,11 @@ import { AssistShell } from '../AssistShell';
 
 const progress = { stage: 'analyzing', percentage: 50, message: 'working' };
 
+/** AssistProgress requires a full translation set; the shell just passes it through. */
+const TR = { cancel: 'tr.cancel', inProgress: 'tr.inProgress', complete: 'tr.complete',
+  failed: 'tr.failed', close: 'tr.close', paramsTitle: 'tr.paramsTitle',
+  processing: (l: string) => `tr.processing(${l})` };
+
 describe('AssistShell', () => {
   beforeEach(() => {
     localStorage.clear();
@@ -21,12 +26,12 @@ describe('AssistShell', () => {
   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>} />,
+        form={<button type="button">the form</button>} progressProps={{ translations: TR }} />,
     );
     expect(screen.getByText('the form')).toBeInTheDocument();
     rerender(
       <AssistShell assistType="tag" title="Annotate Tags" isAssisting={true} progress={progress}
-        form={<button type="button">the form</button>} />,
+        form={<button type="button">the form</button>} progressProps={{ translations: TR }} />,
     );
     expect(screen.queryByText('the form')).not.toBeInTheDocument();
     expect(screen.getByText('working')).toBeInTheDocument();
@@ -37,7 +42,7 @@ describe('AssistShell', () => {
     const props = {
       assistType: 'highlight', title: 'Annotate Highlights', progress,
       form: <span>form</span>,
-      progressProps: { onDismiss, translations: { close: 'Close' } },
+      progressProps: { onDismiss, translations: { ...TR, close: 'Close' } },
     };
     const { rerender } = render(<AssistShell {...props} isAssisting={true} />);
     expect(screen.queryByLabelText('Close')).not.toBeInTheDocument();
@@ -50,7 +55,7 @@ describe('AssistShell', () => {
   it('persists the expand state per assist type', async () => {
     render(
       <AssistShell assistType="reference" title="Annotate References" isAssisting={false} progress={null}
-        form={<span>form</span>} />,
+        form={<span>form</span>} progressProps={{ translations: TR }} />,
     );
     await userEvent.click(screen.getByRole('button', { name: /Annotate References/ }));
     expect(screen.queryByText('form')).not.toBeInTheDocument();

package/src/components/resource/panels/__tests__/HighlightPanel.annotationProgress.test.tsx

@@ -169,7 +169,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
         />
       );
 
-      expect(screen.getByText('Request Parameters:')).toBeInTheDocument();
+      expect(screen.getByText('paramsTitle')).toBeInTheDocument();
       expect(screen.getByText('Find important points')).toBeInTheDocument();
       expect(screen.getByText('5')).toBeInTheDocument();
     });

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

@@ -409,6 +409,32 @@ describe('ReferencesPanel Component', () => {
       expect(screen.getByText('Organization:')).toBeInTheDocument();
     });
 
+    it('renders the entity log with the SAME markup the progress display uses', () => {
+      // ASSIST-SURFACE-WARTS Lane B: this form-side log and AssistProgress's
+      // completed-entity log are the same concept. They had two class families
+      // (semiont-assist-widget__log* here, semiont-annotation-log* there) one
+      // panel apart — one concept, one markup.
+      const { container, rerender } = renderWithEventBus(
+        <ReferencesPanel
+          {...panelProps()}
+          isAssisting={false}
+          progress={{
+            stage: 'complete',
+            percentage: 100,
+            message: 'Annotation complete',
+            completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
+          }}
+        />
+      );
+      rerender(
+        <ReferencesPanel {...panelProps()} isAssisting={false} progress={null} />
+      );
+
+      expect(container.querySelector('.semiont-annotation-log')).toBeInTheDocument();
+      expect(container.querySelector('.semiont-annotation-log-item')).toBeInTheDocument();
+      expect(container.querySelector('.semiont-assist-widget__log')).not.toBeInTheDocument();
+    });
+
     it('should hide entity type selection during detection', () => {
       renderWithEventBus(
         <ReferencesPanel

package/src/features/resource-viewer/__tests__/ResourceViewerPage.test.tsx

@@ -41,7 +41,7 @@ vi.mock('../../../hooks/useResourceContent', () => ({
 // SemiontClient (wired to a dummy baseUrl). The real client surface lets
 // createResourceViewerPageStateUnit run against the full namespace API without us
 // hand-stubbing every method it touches.
-const { stubBrowser } = vi.hoisted(() => {
+const { stubBrowser, stubClient } = vi.hoisted(() => {
   const { BehaviorSubject } = require('rxjs');
   const { SemiontClient, HttpTransport, HttpContentTransport } = require('@semiont/sdk');
   const { baseUrl } = require('@semiont/core');
@@ -63,7 +63,7 @@ const { stubBrowser } = vi.hoisted(() => {
     on: vi.fn(() => () => {}),
     stream: vi.fn(() => ({ subscribe: () => ({ unsubscribe: () => {} }) })),
   };
-  return { stubBrowser };
+  return { stubBrowser, stubClient: client };
 });
 
 vi.mock('../../../session/SemiontProvider', async () => {
@@ -76,6 +76,8 @@ vi.mock('../../../session/SemiontProvider', async () => {
   };
 });
 
+const capturedHistory = vi.hoisted(() => ({ props: null as any }));
+
 vi.mock('@semiont/react-ui', async () => {
   const actual = await vi.importActual('@semiont/react-ui');
   return {
@@ -84,7 +86,10 @@ vi.mock('@semiont/react-ui', async () => {
     Toolbar: () => <div data-testid="toolbar">Toolbar</div>,
     ToolbarPanels: ({ children }: any) => <div data-testid="toolbar-panels">{children}</div>,
     UnifiedAnnotationsPanel: () => <div data-testid="annotations-panel">Annotations</div>,
-    AnnotationHistory: () => <div data-testid="history-panel">History</div>,
+    AnnotationHistory: (props: any) => {
+      capturedHistory.props = props;
+      return <div data-testid="history-panel">History</div>;
+    },
     ResourceInfoPanel: () => <div data-testid="info-panel">Info</div>,
     CollaborationPanel: () => <div data-testid="collaboration-panel">Collaboration</div>,
     JsonLdPanel: () => <div data-testid="jsonld-panel">JSON-LD</div>,
@@ -228,6 +233,30 @@ describe('ResourceViewerPage', () => {
       localStorage.clear();
     });
 
+    it('clicking a history event focuses that annotation in the content', () => {
+      // ASSIST-SURFACE-WARTS Lane D. `handleEventClick` used to be a no-op with
+      // a stale comment, while HistoryEvent still rendered a focusable button
+      // labelled "View annotation" — a promise to screen-reader users that
+      // nothing kept. `beckon:focus` is the existing "scroll to and highlight"
+      // contract (BrowseView already subscribes); this makes the page a producer.
+      localStorage.setItem('activeToolbarPanel', 'history');
+      capturedHistory.props = null;
+      const props = createMockProps();
+      renderWithProviders(<ResourceViewerPage {...props} />);
+
+      expect(capturedHistory.props).not.toBeNull();
+
+      const focused: Array<string | null> = [];
+      const sub = stubClient.bus.get('beckon:focus').subscribe(({ annotationId }: any) => focused.push(annotationId));
+
+      expect(capturedHistory.props?.onEventClick).toBeTypeOf('function');
+      capturedHistory.props!.onEventClick('ann-42');
+      expect(focused).toEqual(['ann-42']);
+
+      sub.unsubscribe();
+      localStorage.clear();
+    });
+
     it('shows history panel when activePanel is history', () => {
       localStorage.setItem('activeToolbarPanel', 'history');
       const props = createMockProps();

package/src/features/resource-viewer/components/ResourceViewerPage.tsx

@@ -24,6 +24,7 @@ import type { BrowseMediaRenderers, AnnotateMediaRenderers } from '@semiont/reac
 import { useObservable } from '@semiont/react-ui';
 import { useResourceContent } from '../../../hooks/useResourceContent';
 import { useMediaToken } from '../../../hooks/useMediaToken';
+import { mediaUrl } from '../../../lib/media-url';
 import { useToast } from '../../../components/Toast';
 import { useOutcomeToasts } from '../../../hooks/useOutcomeToasts';
 import { useTheme } from '../../../contexts/ThemeContext';
@@ -139,6 +140,7 @@ export function ResourceViewerPage({
   // Translations
   const tw = useTranslations('ReferenceWizard');
   const tg = useTranslations('ResourceGenerate');
+  const ta = useTranslations('AssistProgress');
 
   const browser = useSemiont();
   const session = useObservable(browser.activeSession$);
@@ -185,9 +187,7 @@ export function ResourceViewerPage({
 
   // Binary path: fetch short-lived media token, construct URL
   const { token: mediaToken, loading: mediaTokenLoading } = useMediaToken(semiont ?? null, rUri);
-  const binaryContent = (isBinary && mediaToken && semiont)
-    ? `${semiont.baseUrl}/api/resources/${rUri}?token=${mediaToken}`
-    : '';
+  const binaryContent = (isBinary ? mediaUrl(semiont, rUri, mediaToken) : undefined) ?? '';
 
   const content = isBinary ? binaryContent : textContent;
   const contentLoading = isBinary ? mediaTokenLoading : textLoading;
@@ -444,9 +444,17 @@ export function ResourceViewerPage({
     }
   }, [session]);
 
-  const handleEventClick = useCallback((_annotationId: string | null) => {
-    // ResourceViewer now manages scroll state internally
-  }, []);
+  // Clicking a history row reveals that annotation in the content. HistoryEvent
+  // renders these rows as buttons labelled "View annotation", so this used to be
+  // a focusable, screen-reader-announced control wired to a no-op.
+  // `beckon:focus` is the existing "scroll to and highlight" contract rather
+  // than a new prop chain — BrowseView already subscribed to it, AnnotateView
+  // now does too. See .plans/ASSIST-SURFACE-WARTS.md Lane D.
+  const handleEventClick = useCallback((id: string | null) => {
+    if (id) {
+      stateUnit?.beckon.focus(annotationId(id));
+    }
+  }, [stateUnit]);
 
   // Document rendering
   return (
@@ -475,6 +483,9 @@ export function ResourceViewerPage({
                 inProgress: tg('progressInProgress'),
                 complete: tg('progressComplete'),
                 failed: tg('progressFailed'),
+                paramsTitle: ta('paramsTitle'),
+                processing: (label) => ta('processing', { label }),
+                close: ta('close'),
               }}
             />
           )}

package/translations/ar.json

@@ -1,4 +1,9 @@
 {
+  "AssistProgress": {
+    "close": "إغلاق",
+    "paramsTitle": "معاملات الطلب:",
+    "processing": "الحالي: {{label}}"
+  },
   "Toolbar": {
     "annotations": "التعليقات التوضيحية",
     "history": "السجل",
@@ -105,7 +110,9 @@
     "densityDense": "كثيف",
     "fragmentSelected": "تم تحديد جزء",
     "imageRegionSelected": "تم تحديد منطقة من الصورة",
-    "closeProgress": "إغلاق"
+    "complete": "اكتمل التوضيح!",
+    "failed": "فشل التوضيح",
+    "densityPerWords": "{{density}} لكل 2000 كلمة"
   },
   "HighlightPanel": {
     "title": "التمييزات",
@@ -120,7 +127,9 @@
     "densityLabel": "الكثافة",
     "densitySparse": "متفرق",
     "densityDense": "كثيف",
-    "closeProgress": "إغلاق"
+    "complete": "اكتمل التوضيح!",
+    "failed": "فشل التوضيح",
+    "densityPerWords": "{{density}} لكل 2000 كلمة"
   },
   "AssessmentPanel": {
     "title": "التقييمات",
@@ -145,7 +154,9 @@
     "densityDense": "كثيف",
     "fragmentSelected": "تم تحديد جزء",
     "imageRegionSelected": "تم تحديد منطقة من الصورة",
-    "closeProgress": "إغلاق"
+    "complete": "اكتمل التوضيح!",
+    "failed": "فشل التوضيح",
+    "densityPerWords": "{{density}} لكل 2000 كلمة"
   },
   "TaggingPanel": {
     "title": "العلامات",
@@ -164,7 +175,9 @@
     "selectCategory": "اختيار الفئة",
     "chooseCategory": "اختر فئة...",
     "fragmentSelected": "تم تحديد جزء",
-    "imageRegionSelected": "تم تحديد منطقة من الصورة"
+    "imageRegionSelected": "تم تحديد منطقة من الصورة",
+    "complete": "اكتمل التوضيح!",
+    "failed": "فشل التوضيح"
   },
   "UnifiedAnnotationsPanel": {
     "title": "التعليقات التوضيحية",
@@ -220,7 +233,6 @@
     "complete": "اكتمل التوضيح!",
     "failed": "فشل التوضيح",
     "current": "الحالي: {{entityType}}",
-    "closeProgress": "إغلاق",
     "loading": "جارٍ التحميل...",
     "loadingEllipsis": "جارٍ التحميل...",
     "untitledResource": "مورد بدون عنوان",