Translation management

Translation Management — UX Specification

1. 1. Where Translation Management Fits in the Current IA
2. 2. Route Map (Additions)
3. 3. Sidebar Addition
4. 4. Page Specifications
5. 5. User Flows
6. 6. Real-Time Update Behaviors
7. 7. Confirmation Dialogs
8. 8. Responsive and Platform Behavior
9. 9. Accessibility
10. 10. Integration with Workflow Monitor & Status Bar
11. 11. New Page Checklist (per IA Section 11)

Translation Management — UX Specification

Feature: Translation Management (spec 032)

Document type: UX Specification — Wireframes, Flows, Interaction Patterns

Date: 2026-05-10

Reference spec: spec.md

Reference IA: Information Architecture & User Flows (prompt attachment)

Cross-reference: Workflow Monitor & Agent Orchestration UX Research — Translation pipelines are orchestrated workflows; this spec defines the domain-specific surfaces while the workflow monitor research defines the generic monitoring layer (status bar ticker, Workflow Detail View, agent handoff visualization).

Implementation status: Backend mostly complete; frontend UX is the primary open workstream.

1. Where Translation Management Fits in the Current IA

Translation management is not a single-page feature. It surfaces across four existing zones of the application and introduces one new dedicated context:

Why a new "Translation" context?

Segment-level review requires a side-by-side two-column layout that cannot fit into the Authoring right-panel. The review workflow is complex enough (accept/reject/edit per segment, confidence scores, retranslation triggers) that it needs its own dedicated workspace. Additionally, Translation Managers need a job-centric view to manage multiple translation jobs across objects — a perspective that doesn't exist in the object-centric Authoring page.

2. Route Map (Additions)

All new routes live under /ws/:workspaceId/ per convention:

/ws/:workspaceId/
├── dashboard → Dashboard (+ translation KPI widget)
├── authoring → Author View (+ translation entry points)
├── authoring → Author View (+ "Translate Recipe..." action on recipe items)
├── translation/ → Translation Context (NEW)
│ ├── (index) → Translation Job List
│ ├── jobs/:jobId/ → Translation Job Detail
│ │ └── review/:language → Segment-Level Review
│ ├── analytics → Full Translation Analytics
│ └── xliff/ → XLIFF Import surface
└── (Admin Portal) → Provider Configuration (Admin Portal → Configuration → Translation)

URL state conventions:

• ?status=InProgress — filter job list by status
• ?language=de — filter by target language
• ?confidence=low — filter segments by confidence band (low < 0.7, medium 0.7–0.9, high > 0.9)
• ?sort=confidence — sort review segments

3. Sidebar Addition

Translation gets its own sidebar icon, positioned between Authoring and the future Workflows entry. It is capability-gated: visible only if the user has either translate or reviewTranslation.

The Workflow Monitor research (Section 10.2) recommends a capability-gated Workflows sidebar icon for the generic workflow monitoring dashboard. Translation and Workflows are separate sidebar items — Translation is the domain-specific management surface; Workflows is the generic orchestration monitor. Both may appear for users with both capabilities.

┌──────┐
│ ◉ │ ← app logo / home
├──────┤
│ ⊞ │ Dashboard
│ ✎ │ Authoring
│ 🌐 │ Translation ← NEW [capability-gated: translate OR reviewTranslation]
│ ⚙ │ Workflows ← NEW (from workflow-monitor research) [capability-gated: workflowView OR workflowManage]
│ ✦ │ AI Tools [capability-gated: aiTransforms]
├──────┤
│ ⋯ │ (Recipes — hidden, future)
│ │
├──────┤
│ ✉ │ Feedback button
│ 👤 │ User avatar
└──────┘

Gating logic: If user lacks both translate and reviewTranslation, the Translation sidebar icon is hidden entirely. If the user has only reviewTranslation, they can access the Translation context in read-only/review-only mode.

Relationship to Workflows sidebar: A Translation Manager with both translate and workflowView capabilities sees both icons. The Translation icon leads to the domain-specific job list, segment review, and analytics. The Workflows icon leads to the generic pipeline monitor with timeline, flow graph, and intervention controls. The Workflow Detail View for a translation pipeline links back to the Translation context's segment review via "Open Segment Review →".

4. Page Specifications

4.1 Translation Job List (Translation Context Landing)

Route: /ws/:workspaceId/translation/

Purpose: Central command for all translation activity. Lists all translation jobs, provides filters, and lets Translation Managers initiate new jobs.

Capability gate: translate OR reviewTranslation

┌─────────────────────────────────────────────────────────────────────┐
│ [Page header: "Translation" + search bar + "+ New Translation" btn]│
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Filter bar │ │
│ │ [Status ▾] [Language ▾] [Provider ▾] [Date range ▾] [Clear] │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Summary cards (sticky) │ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────────┐ │ │
│ │ │ Active │ │ Review │ │ Completed│ │ TM Reuse % │ │ │
│ │ │ 12 │ │ 5 │ │ 48 │ │ 72% │ │ │
│ │ └──────────┘ └──────────┘ └──────────┘ └──────────────┘ │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Job table │ │
│ │ ┌────────────────────────────────────────────────────────┐ │ │
│ │ │ Object │ Languages │ Status │ Provider │ Date│ │ │
│ │ ├────────────────────────────────────────────────────────┤ │ │
│ │ │ Replace Oil │ 🇩🇪 🇫🇷 │ ● Review │ OpenAI │ May 8│ │
│ │ │ Filter.dita │ │ │ │ │ │ │
│ │ │ ─ v1/sv2 │ │ │ │ │ │ │
│ │ ├────────────────────────────────────────────────────────┤ │ │
│ │ │ Safety Warning │ 🇪🇸 │ ● Active │ Azure │ May 7│ │
│ │ │ Hydraulic.dita │ │ │ Trans. │ │ │ │
│ │ │ ─ v2/sv1 │ │ │ │ │ │ │
│ │ ├────────────────────────────────────────────────────────┤ │ │
│ │ │ Installation │ 🇩🇪 🇫🇷 🇯🇵 │ ●Complete │ OpenAI │ May 5│ │
│ │ │ Guide.dita │ │ │ │ │ │ │
│ │ └────────────────────────────────────────────────────────┘ │ │
│ │ [Pagination: ← 1 2 3 ... 8 →] │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘

Interactions:

• Click job row → navigate to Job Detail (/translation/jobs/:jobId/)
• "+ New Translation" button → opens Translation Job Creation sheet (same side panel used from Authoring, but here the user first selects an object via search)
• Filter dropdowns use standard Radix Select with multi-value support
• Status badges use consistent colors: ● gray = Pending, ● blue = InProgress, ● amber = Review, ● green = Completed, ● red = Cancelled/Failed

5-State model:

4.2 Translation Job Detail

Route: /ws/:workspaceId/translation/jobs/:jobId/

Purpose: Single-job overview with per-language breakdown and actions.

┌─────────────────────────────────────────────────────────────────────┐
│ [Breadcrumb: Translation > Job: "Replace Oil Filter → de, fr"] │
│ [Action bar: Cancel Job (destructive) | Export XLIFF ▾ ] │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Job metadata │ │
│ │ Object: Replace Oil Filter.dita (v1 / sv2) │ │
│ │ Submitted by: Jane Smith • May 8, 2026 14:32 │ │
│ │ Provider: Azure OpenAI GPT-4 (High quality) │ │
│ │ Work Package: WP-032-0041 │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Segment statistics │ │
│ │ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐│ │
│ │ │ Total: 42 │ │ TM Exact │ │ TM Fuzzy │ │ New segs ││ │
│ │ │ segments │ │ 28 (67%) │ │ 4 (10%) │ │ 10 (24%) ││ │
│ │ └────────────┘ └────────────┘ └────────────┘ └────────────┘│ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Language breakdown │ │
│ │ ┌──────────────────────────────────────────────────────────┐│ │
│ │ │ Language │ Status │ Progress │ Actions ││ │
│ │ ├──────────────────────────────────────────────────────────┤│ │
│ │ │ 🇩🇪 de │ ● Review │ ████████░░ 18/21│ [Review] [Cancel]│
│ │ │ 🇫🇷 fr │ ● InProgress│ ████░░░░░░ 8/21 │ [—] [Cancel] ││ │
│ │ └──────────────────────────────────────────────────────────┘│ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Component dependencies (if applicable) │ │
│ │ ├─ warning-hydraulic-pressure.dita ● Complete (de, fr) │ │
│ │ ├─ parts-list-oil-filter.dita ● InProgress (de) │ │
│ │ └─ safety-notice-general.dita ● TM Exact (de, fr) │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘

Interactions:

• Click [Review] on a language row → navigate to Segment Review (/translation/jobs/:jobId/review/de)
• [Cancel] per language → triggers single-language cancel confirmation dialog
• "Cancel Job" in action bar → triggers full-job cancel confirmation dialog
• "Export XLIFF" dropdown → "Export de" / "Export fr" / "Export All" → browser download (web) or native save dialog (Electron)
• Progress bars animate live via SignalR (TranslationSegmentCompleted)

4.3 Segment-Level Review (Core Review Experience)

Route: /ws/:workspaceId/translation/jobs/:jobId/review/:language

Purpose: The primary review workspace. Side-by-side source vs. translation with per-segment actions.

Capability gate: reviewTranslation for edit actions; read-only otherwise

This is the most complex screen in the feature. It uses a two-column layout that maximizes the horizontal space available.

┌─────────────────────────────────────────────────────────────────────┐
│ [Breadcrumb: Translation > Job > Review: German (de)] │
│ [Action bar: Approve All Remaining | Filter ▾ | Sort ▾ ] │
├─────────────────────────────────────────────────────────────────────┤
│ [Progress bar: 18 / 21 segments reviewed ████████████░░░ 86%] │
│ [Legend: ✓ Accepted (16) ✏ Edited (2) ✗ Rejected (1) ○ Pending (2)]│
├────────────────────────────┬────────────────────────────────────────┤
│ SOURCE (en) │ TRANSLATION (de) │
│ ──────────────────────── │ ──────────────────────────────────── │
│ │ │
│ ┌────────────────────┐ │ ┌────────────────────────────────┐ │
│ │ #1 │ │ │ #1 ✓ 0.95 │ │
│ │ Replace the oil │ │ │ Ersetzen Sie den Ölfilter │ │
│ │ filter according │ │ │ gemäß den Anweisungen │ │
│ │ to the manual. │ │ │ im Handbuch. │ │
│ │ │ │ │ [Accepted ✓] │ │
│ └────────────────────┘ │ └────────────────────────────────┘ │
│ │ │
│ ┌────────────────────┐ │ ┌────────────────────────────────┐ │
│ │ #2 │ │ │ #2 ○ 0.62 │ │
│ │ Always wear │ │ │ Tragen Sie immer │ │
│ │ protective │ │ │ Schutzausrüstung wenn │ │
│ │ equipment when │ │ │ Sie am Hydrauliksystem │ │
│ │ servicing the │ │ │ arbeiten. │ │
│ │ hydraulic system. │ │ │ │ │
│ │ │ │ │ ┌──────┐ ┌──────┐ ┌──────┐ │ │
│ │ │ │ │ │Accept│ │Reject│ │ Edit │ │ │
│ │ │ │ │ └──────┘ └──────┘ └──────┘ │ │
│ │ │ │ │ │ │
│ │ │ │ │ TM suggestion (fuzzy 87%): │ │
│ │ │ │ │ "Tragen Sie stets Schutz- │ │
│ │ │ │ │ ausrüstung bei Arbeiten │ │
│ │ │ │ │ am Hydrauliksystem." │ │
│ │ │ │ │ [Use this suggestion] │ │
│ └────────────────────┘ │ └────────────────────────────────┘ │
│ │ │
│ ┌────────────────────┐ │ ┌────────────────────────────────┐ │
│ │ #3 │ │ │ #3 ✗ 0.58 │ │
│ │ Ensure the engine │ │ │ Stellen Sie sicher, dass der │ │
│ │ control unit is │ │ │ Controller ausgeschaltet │ │
│ │ powered off. │ │ │ ist. │ │
│ │ │ │ │ [REJECTED] │ │
│ │ │ │ │ Feedback: "Use 'Steuergerät' │ │
│ │ │ │ │ not 'Controller'" │ │
│ │ │ │ │ ┌────────────┐ │ │
│ │ │ │ │ │Re-translate │ │ │
│ │ │ │ │ └────────────┘ │ │
│ └────────────────────┘ │ └────────────────────────────────┘ │
│ │ │
├────────────────────────────┴────────────────────────────────────────┤
│ [Keyboard shortcuts: ↑/↓ navigate segments, A accept, R reject, │
│ E edit, Enter confirm, Esc cancel edit] │
└─────────────────────────────────────────────────────────────────────┘

#### Segment Card Anatomy (Translation Side)

┌──────────────────────────────────────────┐
│ #N [status] score│ ← Segment number + confidence badge
│ ─────────────────────────────────────── │
│ Translated text content │ ← The translation (editable on Edit)
│ │
│ ┌───────────────────────────────────┐ │
│ │ Match info: TM Exact | Fuzzy 87% │ │ ← Source of match (if applicable)
│ │ | Provider | Human Edited │ │
│ └───────────────────────────────────┘ │
│ │
│ [Accept] [Reject] [Edit] │ ← Actions (hidden if already resolved)
│ │
│ ┌── TM Suggestions (collapsed) ──────┐ │ ← Expandable if fuzzy matches exist
│ │ "Previous translation..." [Use] │ │
│ └────────────────────────────────────┘ │
└──────────────────────────────────────────┘

#### Confidence Score Visual Encoding

#### Interaction Details

• Accept: Optimistic update. Segment card collapses to single-line accepted state. Progress bar increments. If this is the last pending segment, the TranslationStatus transitions to Completed and a persistent toast appears.

• Reject: Opens inline feedback textarea (10–500 chars required). On submit: segment marked as rejected, "Re-translate" button appears. Optimistic update on the badge.

• Edit: Translation text becomes an editable textarea. "Save" / "Cancel" buttons appear. On save: segment marked accepted with confidence 1.0 and HumanEdited match type. Stored in TM. Unsaved changes trigger a discard warning on navigation.

• Re-translate: Sends rejected segment back to provider with reviewer feedback as context. Segment shows a subtle loading spinner while re-translating. On completion, new translation replaces old, awaiting fresh review.

• Use TM suggestion: Replaces the current translation text with the fuzzy match. Segment enters edit mode so the reviewer can fine-tune before accepting.

• Approve All Remaining: Batch-accepts all pending segments. Confirmation dialog: "Accept [N] remaining segments? Segments with low confidence (< 0.70) are included." / "Accept All" / "Cancel".

#### Filter / Sort Controls

• Filter by: Status (Pending, Accepted, Rejected, All), Confidence band (High/Medium/Low), Match type (TM Exact, TM Fuzzy, Provider, Human)
• Sort by: Segment order (default), Confidence ascending (review low-confidence first), Status (pending first)

#### Keyboard Navigation

#### AI Agent QA Handoff Entry Point

When a translation pipeline includes a QA Validation step (executed by an AI QA Validator agent before human review), the reviewer can enter the segment review with pre-filtered views. The Workflow Detail View's Decision Context Card offers three entry points into this review page:

When entering via "Review Flagged Only", the review page shows a banner:

┌──────────────────────────────────────────────────────────────────────┐
│ ℹ Showing 4 segments flagged by QA Validator. 351 passed segments │
│ are hidden. [Show All Segments] [Approve All Passed ✓] │
└──────────────────────────────────────────────────────────────────────┘

This aligns with the workflow monitor's "Approve All Passed" productivity shortcut — the reviewer focuses only on flagged segments, dramatically reducing review time for large documents.

#### Read-Only Mode

Users lacking reviewTranslation: Accept/Reject/Edit buttons hidden, TM suggestions hidden, segment text is non-editable. Progress and confidence scores remain visible for monitoring.

4.4 Translation Job Creation (Side Panel / Sheet)

This sheet is shared across all entry points (Authoring object menu, Language Variant selector, Translation context "+ New Translation").

Component: Radix Sheet, slides from right edge, 480px wide.

┌─────────────────────────────────────┐
│ ← Create Translation Job │
│ ────────────────────────────────── │
│ │
│ Object │
│ ┌─────────────────────────────────┐│
│ │ Replace Oil Filter.dita ││ ← Pre-filled from context, or
│ │ v1 / sv2 • Status: Approved ││ searchable object picker
│ └─────────────────────────────────┘│
│ │
│ Source Language │
│ ┌─────────────────────────────────┐│
│ │ 🇬🇧 English (en) — source ││ ← Read-only, from object
│ └─────────────────────────────────┘│
│ │
│ Target Languages * │
│ ┌─────────────────────────────────┐│
│ │ 🔍 Search languages... ││
│ │ ─────────────────────────────── ││
│ │ ☑ 🇩🇪 German (de) ││
│ │ ☑ 🇫🇷 French (fr) ││
│ │ ☐ 🇪🇸 Spanish (es) ││
│ │ ☐ 🇯🇵 Japanese (ja) ││
│ │ ☐ 🇸🇪 Swedish (sv) ││
│ │ 🚫 🇵🇹 Portuguese (pt-BR) ││ ← Disabled: "Translation in
│ │ Translation in progress ││ progress" tooltip
│ └─────────────────────────────────┘│
│ │
│ Translation Provider * │
│ ┌─────────────────────────────────┐│
│ │ Azure OpenAI GPT-4 ▾ ││
│ │ Quality: High • Confidence: 0.75││
│ └─────────────────────────────────┘│
│ │
│ Include Referenced Components │
│ ┌─────────────────────────────────┐│
│ │ [●] On ││
│ │ 3 components will be included: ││
│ │ • warning-hydraulic.dita ││
│ │ • parts-list-filter.dita ││
│ │ • safety-notice.dita ││
│ └─────────────────────────────────┘│
│ │
│ Deadline (optional) │
│ ┌─────────────────────────────────┐│
│ │ 📅 Select date... ││
│ └─────────────────────────────────┘│
│ │
│ Notes (optional) │
│ ┌─────────────────────────────────┐│
│ │ ││
│ │ ││
│ └─────────────────────────────────┘│
│ 0 / 500 characters │
│ │
│ ┌─────────────────────────────────┐│
│ │ Submit Translation Job ││ ← Primary button
│ └─────────────────────────────────┘│
│ │
└─────────────────────────────────────┘

#### Field Specifications

Context-dependent behavior:

• Opened from Authoring object menu: Object pre-filled, not editable
• Opened from Language Variant selector: Object pre-filled, single language pre-selected
• Opened from Translation context: Object field is a searchable picker (Approved subversions only)

Submission: Not optimistic. Loading spinner on button. On success: toast + close sheet + navigate to job detail. On error: inline error at bottom.

4.5 Translation Status Matrix (Authoring Right Panel Addition)

A new panel added to the Authoring workbench Zone C, below the existing Versions panel.

┌────────────────────────────────────────┐
│ Translation Status │
│ Current subversion: v1/sv2 │
│ Last updated: 2 min ago 🔄 │
│ ──────────────────────────────────────│
│ │
│ │ Language │ Status │ Actions │ │
│ ├─────────────┼──────────────┼─────────│ │
│ │ 🇬🇧 en (src) │ ── N/A ── │ │ │
│ │ 🇩🇪 de │ ● Review │ [Open] │ │
│ │ 🇫🇷 fr │ ● Active │ │ │
│ │ 🇪🇸 es │ ○ Not Started│[Translate]│ │
│ │ 🇯🇵 ja │ ● Outdated │[Re-translate]│ │
│ └─────────────┴──────────────┴─────────┘ │
│ │
│ [Translate...] (opens job creation) │
│ │
└────────────────────────────────────────┘

Interactions:

• [Open] → navigates to /translation/jobs/:jobId/review/:language
• [Translate] on NotStarted → opens job creation sheet with language pre-selected
• [Re-translate] on Outdated → opens job creation sheet with language pre-selected
• Source row (en) is always shown grayed out with "N/A"
• Panel refreshes via SignalR TranslationStatusChanged events
• &#128260; icon triggers manual refresh

5-State model:

4.6 Object List Translation Indicators (Authoring Modification)

Each object row in the Object List gains a compact language bar beneath the object title when the object has non-source language variants.

┌────────────────────────────────────────────────────────────┐
│ ☐ Replace Oil Filter.dita DITA Approved May 8 │
│ 🇩🇪● 🇫🇷● 🇪🇸○ │ ← language bar
├────────────────────────────────────────────────────────────┤
│ ☐ Safety Warning.dita DITA Released May 5 │
│ 🇩🇪● 🇯🇵● │
├────────────────────────────────────────────────────────────┤
│ ☐ Installation Guide.dita DITA Draft May 3 │
│ (no translations) │ ← no bar shown
└────────────────────────────────────────────────────────────┘

Color coding for language dots:

The language bar is not shown if the object has zero non-source language variants. Hover over a flag dot shows tooltip: "German (de): InProgress".

4.7 Object Action Menu Addition (Authoring Modification)

The existing context menu (right-click / "..." on objects) gains a "Translate..." item:

┌───────────────────────┐
│ Open │
│ Edit │
│ ─────────────────── │
│ Check Out │
│ Check In │
│ ─────────────────── │
│ 🌐 Translate... │ ← NEW (hidden if user lacks `translate`)
│ ─────────────────── │
│ Move to... │
│ Rename │
│ Delete │
└───────────────────────┘

• Hidden if user lacks translate capability
• Disabled (grayed) with tooltip "Subversion must be Approved before translation" if current subversion is Draft or In Review
• On click → opens Translation Job Creation sheet with this object pre-filled

4.8 Language Variant Selector Addition (Authoring Modification)

The existing Language Variant selector dropdown in the right panel gains translation status badges and an "Add Translation" action at the bottom.

┌──────────────────────────────────────┐
│ Language Variant │
│ ┌──────────────────────────────────┐│
│ │ 🇬🇧 English (en) — source ▾ ││
│ └──────────────────────────────────┘│
│ ┌──────────────────────────────────┐│
│ │ ✓ 🇬🇧 English (en) — source ││ ← active selection
│ │ 🇩🇪 German (de) ● Review ││ ← status badge
│ │ 🇫🇷 French (fr) ● Active ││
│ │ ──────────────────────────────── ││
│ │ + Add Translation ││ ← NEW action
│ └──────────────────────────────────┘│
└──────────────────────────────────────┘

• "+ Add Translation" is hidden if user lacks translate capability
• On click → opens Translation Job Creation sheet in single-language mode (language picker defaults to unstarted languages only)

4.9 Dashboard Translation Analytics Widget

A new KPI widget added to the Dashboard grid using the existing card/widget pattern.

┌──────────────────────────────────────────────────────────┐
│ Translation Overview [View All →]│
│ ─────────────────────────────────────────────────────── │
│ │
│ ┌────────────┐ ┌────────────┐ ┌────────────┐ │
│ │ 12,480 │ │ 72% │ │ 0.84 │ │
│ │ Segments │ │ TM Reuse │ │ Avg. Conf. │ │
│ │ translated │ │ Rate │ │ Score │ │
│ └────────────┘ └────────────┘ └────────────┘ │
│ │
│ Active jobs: 5 • Pending review: 3 │
│ │
└──────────────────────────────────────────────────────────┘

"View All →" navigates to /ws/:workspaceId/translation/analytics

5-State model:

4.10 XLIFF Import Dialog

Trigger: "Import XLIFF" button on Job Detail page.

Component: Radix Dialog (modal).

┌────────────────────────────────────────────┐
│ Import XLIFF Translation │
│ ──────────────────────────────────────── │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ ┌───────────────────────┐ │ │
│ │ │ 📄 Drop XLIFF here │ │ │ ← Drag-and-drop zone
│ │ │ or click to browse │ │ │
│ │ └───────────────────────┘ │ │
│ │ .xlf, .xliff • Max 50 MB │ │
│ └─────────────────────────────────────┘ │
│ │
│ ── After file selected + validated ── │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ ✓ Valid XLIFF 2.1 │ │
│ │ Target language: German (de) │ │
│ │ Segments matched: 28 / 30 │ │
│ │ ⚠ 2 segments could not be matched │ │
│ └─────────────────────────────────────┘ │
│ │
│ ┌──────────────┐ ┌──────────────────┐ │
│ │ Cancel │ │ Import Matched │ │
│ └──────────────┘ └──────────────────┘ │
│ │
└────────────────────────────────────────────┘

If all segments match, the button reads "Import" instead of "Import Matched". If validation fails entirely, show error + "Select Different File" button.

5-State model:

4.11 Full Translation Analytics (Translation Context)

Route: /ws/:workspaceId/translation/analytics

Purpose: Detailed analytics for Translation Managers and content strategists.

┌─────────────────────────────────────────────────────────────────────┐
│ [Page header: "Translation Analytics"] │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────┐ ┌─────────────────────────────┐│
│ │ TM Reuse Rate Trend │ │ Provider Comparison ││
│ │ ┌─────────────────────────┐ │ │ ┌───────────────────────┐ ││
│ │ │ 📈 │ │ │ │ Provider │ Qual │ Acc% │ ││
│ │ │ ╱ ╲ ╱──── │ │ │ │ OpenAI │ High │ 86% │ ││
│ │ │ ╱ ╲ ╱ │ │ │ │ Azure Tr.│ Std │ 78% │ ││
│ │ │ ╱ ╲ │ │ │ └───────────────────────┘ ││
│ │ │Feb Mar Apr May │ │ │ ││
│ │ └─────────────────────────┘ │ └─────────────────────────────┘│
│ └───────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Language Coverage Heatmap │ │
│ │ ┌────────────────────────────────────────────────────────┐ │ │
│ │ │ Language │ Objects │ Translated │ Outdated │ Coverage │ │ │
│ │ │ de │ 120 │ 98 │ 5 │ ████ 82% │ │ │
│ │ │ fr │ 120 │ 45 │ 2 │ ██ 38% │ │ │
│ │ │ es │ 120 │ 12 │ 0 │ █ 10% │ │ │
│ │ └────────────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Job History (server-paginated, 25/page) │ │
│ │ [Status ▾] [Language ▾] [Date range ▾] │ │
│ │ ┌────────────────────────────────────────────────────────┐ │ │
│ │ │ Job │ Object │ Lang │ TM% │ Conf │ Date │ │ │
│ │ │ JOB-041 │ Oil Filter │ de │ 67% │ 0.84 │ May 8 │ │ │
│ │ │ JOB-040 │ Safety Wrn │ es │ 45% │ 0.72 │ May 7 │ │ │
│ │ └────────────────────────────────────────────────────────┘ │ │
│ │ [← 1 2 3 →] │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘

5-State model:

5. User Flows

Flow A: Author Submits Translation from Authoring

Author is on /authoring, object selected
 → right-clicks object in Object List (or clicks "...")
 → clicks "Translate..."
 → Translation Job Creation sheet slides in from right
 → object pre-filled, languages + provider form shown
 → selects German (de) + French (fr)
 → selects Azure OpenAI provider
 → clicks "Submit Translation Job"
 → loading spinner on button
 → API creates job + Work Package
 → toast: "Translation job created for 2 language(s)"
 → sheet closes
 → Object List language bar updates (🇩🇪● 🇫🇷● — blue dots)
 → Translation Status Matrix panel updates

Flow B: Translation Manager Initiates Job from Translation Context

Translation Manager navigates to /translation (via sidebar)
 → sees job list (or empty state)
 → clicks "+ New Translation"
 → Translation Job Creation sheet slides in
 → Object field is a search picker (not pre-filled)
 → types "Oil Filter" → autocomplete shows matching approved objects
 → selects "Replace Oil Filter.dita (v1/sv2)"
 → languages + provider form populates
 → selects languages, submits
 → navigates to job detail page

Flow C: Reviewer Reviews AI Translation

Reviewer receives toast: "Translation to German completed — ready for review"
 → clicks toast link
 → navigates to /translation/jobs/:jobId/review/de
 → sees side-by-side source/translation segments
 → reviews segment #1 (confidence 0.95) → clicks Accept
 → segment collapses to accepted state (optimistic)
 → progress bar: 1/21
 → reviews segment #2 (confidence 0.62) → clicks Reject
 → feedback textarea appears → types "Wrong term"
 → clicks Submit Feedback
 → segment marked rejected, "Re-translate" button appears
 → clicks "Re-translate" on segment #2
 → segment shows loading spinner
 → SignalR: new translation arrives
 → segment updates, awaiting re-review
 → reviews segment #3 → clicks Edit
 → text becomes editable textarea
 → edits translation → clicks Save
 → saved with confidence 1.0, HumanEdited, stored in TM
 → continues until all 21 segments resolved
 → last segment accepted
 → TranslationStatus → Completed
 → Revision created (TriggerSource.Translation)
 → persistent toast: "Translation complete — German status updated"

Flow D: XLIFF Vendor Workflow

Translation Manager on job detail page
 → clicks "Export XLIFF" → "Export de"
 → browser downloads .xlf file (web) or native save dialog (Electron)
 → file sent to vendor (external workflow)
 → vendor returns completed .xlf file
 → Translation Manager returns to job detail page
 → clicks "Import XLIFF"
 → XLIFF Import dialog opens
 → drags .xlf file into drop zone
 → validation: "28/30 segments matched"
 → clicks "Import Matched"
 → segments populate review grid
 → same review workflow as Flow C

Flow E: Cancel Translation

Per the Workflow Monitor research (Section 13.4), cancellation can also be triggered from the Workflow Detail View or the status bar flyout for users with translate capability.

Translation Manager on job detail page (or Workflow Detail View, or status bar flyout)
 → clicks "Cancel Job" in action bar
 → confirmation dialog:
 "This will revert all 2 language variant(s) to Not Started.
 Completed segments will be discarded. This cannot be undone."
 ☐ Keep completed segments (12 already reviewed)
 ☑ Revert all — return LanguageVariants to NotStarted
 Reason: [_________________________________]
 → clicks "Cancel Translation" (destructive red)
 → loading state on button
 → API terminates DTFx orchestration, reverts LanguageVariants
 → toast: "Translation job cancelled"
 → job status updates to Cancelled
 → Object List language dots revert to gray
 → Workflow status bar ticker updates (running count -1)
 → navigates back to job list

The "Keep completed segments" option (from the workflow monitor research) allows retaining already-reviewed segments when cancelling partially-complete jobs — avoiding waste when only some languages need cancellation.

Flow F: Single-Language Translation from Language Variant Selector

Author on /authoring, object selected
 → opens Language Variant selector dropdown
 → sees existing languages with status badges
 → clicks "+ Add Translation"
 → Translation Job Creation sheet opens
 → object pre-filled
 → language picker shows only unstarted languages
 → selects Swedish (sv)
 → selects provider
 → submits
 → single-language job created
 → Language Variant selector refreshes with new 🇸🇪 entry (● blue)

Flow G: Recipe Bulk Translation (P3)

Translation Manager on /authoring page, Recipes view
 → right-clicks recipe "Product X Manual" (or clicks "...")
 → clicks "Translate Recipe..."
 → Recipe Translation sheet slides in
 → shows: 40 objects + 15 components = 55 unique objects
 → 10 objects already have up-to-date German translations
 → effective scope: 45 objects × selected languages
 → selects German (de) + French (fr)
 → submits
 → bulk Work Package created
 → navigates to Work Package with live translation progress
 → live: "German: 32/45 objects completed" via SignalR

6. Real-Time Update Behaviors

7. Confirmation Dialogs

8. Responsive and Platform Behavior

Responsive Behavior

Electron vs. Web Differences

9. Accessibility

• Segment review supports full keyboard navigation (see Section 4.3 keyboard table)
• Confidence score badges use both color AND text label — never color alone
• Language status dots carry aria-label attributes (e.g., "German: In Progress")
• All interactive elements in the review grid are focusable and screen-reader announced
• Side-by-side review columns use role="region" with labeled headings ("Source", "Translation")
• Toast notifications use aria-live="polite" for info, aria-live="assertive" for errors
• Confirmation dialogs use role="alertdialog" (Radix AlertDialog)
• Status bar workflow ticker: count changes announced via aria-live="polite" ("1 workflow now waiting for your action") — consistent with workflow monitor accessibility

10. Integration with Workflow Monitor & Status Bar

Translation pipelines are orchestrated workflows. The Workflow Monitor &amp; Agent Orchestration UX Research defines a three-layer monitoring model that translation jobs participate in:

Layer model

Layer 1 — STATUS BAR (always visible, every page)
┌───────────────────────────────────────────────────────────────┐
│ ⟳ 3 running ⏳ 1 waiting for you ✕ 1 failed │
└───────────────────────────────────────────────────────────────┘
 Translation jobs count toward these totals alongside all other
 workflow types. "Waiting for you" includes translation segments
 pending review.

Layer 2 — STATUS BAR FLYOUT (quick overview + inline actions)
 Translation items show domain-specific detail:
 ┌──────────────────────────────────────────────────────────────┐
 │ ⟳ Translation DE — 72% [→] │
 │ WP: "Q2 Manual Update" (40 objects) │
 │ Step 4/7: QA Validate — 280/355 segments checked │
 │ TM reuse: 71.5% │ Segments: 892 matched, 355 new │
 │ Actor: QA Validator → Next: Human Review (J. Smith) │
 └──────────────────────────────────────────────────────────────┘
 Key difference from generic workflows: translation flyout items
 show segment-level progress (280/355) alongside step progress (4/7).

Layer 3 — WORKFLOW DETAIL VIEW (full depth)
 Accessed from flyout "Open Details →" or from /ws/:wsId/workflows.
 For translation workflows, the Workflow Detail View gains:
 - A "Segments" tab (read-only summary, links to full segment review)
 - Translation-specific metrics in the timeline (TM reuse, cost estimates)
 - A Decision Context Card for the Human Review step with QA agent report
 - Multi-language matrix for recipe-level bulk translations

Surface ownership

Navigation bridges

Shared visual language

Both this spec and the workflow monitor use the same status color scheme to avoid confusion:

11. New Page Checklist (per IA Section 11)