fix: integrate deepseek, resolve silent google api errors, fix google cloud keys

stitch_translation_app_ui_redesign/DESIGN.md

@@ -0,0 +1,168 @@
+---
+name: Modern Translation Design System
+colors:
+  surface: '#f8f9fa'
+  surface-dim: '#d9dadb'
+  surface-bright: '#f8f9fa'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#f3f4f5'
+  surface-container: '#edeeef'
+  surface-container-high: '#e7e8e9'
+  surface-container-highest: '#e1e3e4'
+  on-surface: '#191c1d'
+  on-surface-variant: '#434655'
+  inverse-surface: '#2e3132'
+  inverse-on-surface: '#f0f1f2'
+  outline: '#737686'
+  outline-variant: '#c3c6d7'
+  surface-tint: '#0053db'
+  primary: '#004ac6'
+  on-primary: '#ffffff'
+  primary-container: '#2563eb'
+  on-primary-container: '#eeefff'
+  inverse-primary: '#b4c5ff'
+  secondary: '#505f76'
+  on-secondary: '#ffffff'
+  secondary-container: '#d0e1fb'
+  on-secondary-container: '#54647a'
+  tertiary: '#4d556b'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#656d84'
+  on-tertiary-container: '#eef0ff'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#dbe1ff'
+  primary-fixed-dim: '#b4c5ff'
+  on-primary-fixed: '#00174b'
+  on-primary-fixed-variant: '#003ea8'
+  secondary-fixed: '#d3e4fe'
+  secondary-fixed-dim: '#b7c8e1'
+  on-secondary-fixed: '#0b1c30'
+  on-secondary-fixed-variant: '#38485d'
+  tertiary-fixed: '#dae2fd'
+  tertiary-fixed-dim: '#bec6e0'
+  on-tertiary-fixed: '#131b2e'
+  on-tertiary-fixed-variant: '#3f465c'
+  background: '#f8f9fa'
+  on-background: '#191c1d'
+  surface-variant: '#e1e3e4'
+typography:
+  h1:
+    fontFamily: Inter
+    fontSize: 24px
+    fontWeight: '600'
+    lineHeight: 32px
+    letterSpacing: -0.02em
+  h2:
+    fontFamily: Inter
+    fontSize: 20px
+    fontWeight: '600'
+    lineHeight: 28px
+    letterSpacing: -0.01em
+  h3:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: '600'
+    lineHeight: 24px
+  body-lg:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: 24px
+  body-md:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: '400'
+    lineHeight: 20px
+  body-sm:
+    fontFamily: Inter
+    fontSize: 13px
+    fontWeight: '400'
+    lineHeight: 18px
+  label-md:
+    fontFamily: Inter
+    fontSize: 12px
+    fontWeight: '500'
+    lineHeight: 16px
+    letterSpacing: 0.05em
+  code:
+    fontFamily: Monospace
+    fontSize: 13px
+    fontWeight: '400'
+    lineHeight: 20px
+rounded:
+  sm: 0.125rem
+  DEFAULT: 0.25rem
+  md: 0.375rem
+  lg: 0.5rem
+  xl: 0.75rem
+  full: 9999px
+spacing:
+  unit: 4px
+  xs: 4px
+  sm: 8px
+  md: 16px
+  lg: 24px
+  xl: 32px
+  sidebar-width: 240px
+  container-max: 1440px
+---
+
+## Brand & Style
+The design system is built for precision, efficiency, and clarity in professional localization workflows. It prioritizes a high density of information without sacrificing readability, catering to users who manage large volumes of linguistic data. 
+
+The visual style is **Corporate / Modern**, characterized by a systematic approach to layout and a focus on utility. The interface evokes a sense of reliability and technical sophistication through its disciplined use of whitespace, a constrained color palette, and clear structural hierarchies. It avoids decorative elements in favor of functional clarity, ensuring that the user's primary focus remains on the content and translation accuracy.
+
+## Colors
+The color strategy for this design system centers on a high-contrast primary blue to drive action and focus. The background uses a very light gray to reduce eye strain during long working sessions, while maintaining a clean, "paper-like" feel.
+
+- **Primary Blue (#2563EB):** Used for primary actions, active navigation states, and progress indicators.
+- **Surface Colors:** The main background is a near-white neutral, with secondary surfaces (like sidebars) using a slightly deeper gray to create structural separation.
+- **Semantic Colors:** Green, Amber, and Red are utilized strictly for translation status (Complete, In-Progress, or Error/Conflict) to provide immediate visual feedback.
+
+## Typography
+Inter is the foundation of this design system, chosen for its exceptional legibility at small sizes and its neutral, systematic character. 
+
+The scale is intentionally compact to allow for side-by-side translation views (source vs. target). **H1** and **H2** tags are reserved for page headers and major section titles. **Body-md** is the workhorse size for translation strings, while **Body-sm** is used for metadata and secondary descriptions. Labels utilize a slightly heavier weight and increased letter spacing to distinguish them from editable content.
+
+## Layout & Spacing
+The layout employs a **Fixed Sidebar** and a **Fluid Main Content** area. This ensures that navigation is always accessible while the translation workspace expands to utilize the user's screen real estate.
+
+Spacing follows a strict 4px grid. A standard 16px (md) gutter is used between content cards and sections to maintain a high information density without feeling cluttered. Internal component padding is kept tight (8px or 12px) to minimize unnecessary scrolling. In the main content area, cards should be organized in a grid or a vertical list depending on the view mode (Gallery vs. List).
+
+## Elevation & Depth
+Hierarchy is established through **low-contrast outlines** and **ambient shadows**. This design system avoids dramatic depth in favor of a flatter, more professional aesthetic.
+
+- **Level 0 (Base):** Background surface (#F9FAFB).
+- **Level 1 (Cards/Sidebar):** White surface with a 1px border (#E5E7EB).
+- **Level 2 (Dropdowns/Modals):** White surface with a subtle ambient shadow (0px 4px 6px -1px rgba(0, 0, 0, 0.1)) to indicate interactivity and temporary placement.
+
+Borders are the primary method of separation, while shadows are used sparingly to highlight active or floating elements.
+
+## Shapes
+The shape language is conservative and precise. A "Soft" roundedness level (4px/0.25rem) is applied to standard buttons, input fields, and small cards. Larger containers, like the main workspace cards, may use a 8px radius. 
+
+Status indicators and avatar badges use a full circular (pill) radius to distinguish them from structural UI elements. This subtle rounding maintains a modern feel while preserving the serious, tool-like nature of the interface.
+
+## Components
+
+### Sidebar Navigation
+The sidebar uses a slightly darker neutral background than the main content. Active states are indicated by a 2px vertical bar on the left edge using the primary blue, combined with a subtle light-blue background tint for the entire menu item. Icons should be line-based and 20px in size.
+
+### Cards & Workspace
+Main content cards feature a white background and a 1px border (#E5E7EB). To indicate selection or focus (e.g., the current segment being translated), the border color should shift to the primary blue.
+
+### Buttons
+- **Primary:** Solid #2563EB with white text. 
+- **Secondary:** White background with a 1px #E5E7EB border and dark text.
+- **Ghost:** No background or border, primary blue text; used for low-priority actions.
+
+### Status Indicators
+Translation progress is visualized through two methods:
+1.  **Status Dots:** 8px circular indicators using semantic colors (Success, Warning, Error).
+2.  **Compact Progress Bars:** 4px tall bars located at the bottom of project cards, using the primary blue for the fill and a light gray for the track.
+
+### Input Fields
+Inputs must accommodate multi-line text. They feature a 1px gray border that transitions to blue on focus. Use a monospaced font option for technical or code-based translation strings to ensure character clarity.

stitch_translation_app_ui_redesign/code.html

@@ -0,0 +1,391 @@
+<!DOCTYPE html>
+
+<html class="light" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>LinguistPro - Translation Workspace</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&amp;family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "on-secondary": "#ffffff",
+                        "on-primary-container": "#eeefff",
+                        "on-secondary-container": "#54647a",
+                        "surface-tint": "#0053db",
+                        "tertiary-container": "#656d84",
+                        "on-primary-fixed": "#00174b",
+                        "on-error-container": "#93000a",
+                        "secondary-fixed-dim": "#b7c8e1",
+                        "on-error": "#ffffff",
+                        "inverse-surface": "#2e3132",
+                        "primary-fixed": "#dbe1ff",
+                        "on-tertiary-container": "#eef0ff",
+                        "primary-container": "#2563eb",
+                        "on-tertiary": "#ffffff",
+                        "surface-bright": "#f8f9fa",
+                        "on-tertiary-fixed-variant": "#3f465c",
+                        "surface-container-lowest": "#ffffff",
+                        "on-secondary-fixed": "#0b1c30",
+                        "inverse-primary": "#b4c5ff",
+                        "surface-container-high": "#e7e8e9",
+                        "secondary-container": "#d0e1fb",
+                        "secondary-fixed": "#d3e4fe",
+                        "surface-dim": "#d9dadb",
+                        "error": "#ba1a1a",
+                        "outline-variant": "#c3c6d7",
+                        "on-secondary-fixed-variant": "#38485d",
+                        "surface-container-low": "#f3f4f5",
+                        "primary-fixed-dim": "#b4c5ff",
+                        "on-background": "#191c1d",
+                        "surface": "#f8f9fa",
+                        "on-surface-variant": "#434655",
+                        "on-primary-fixed-variant": "#003ea8",
+                        "secondary": "#505f76",
+                        "on-tertiary-fixed": "#131b2e",
+                        "background": "#f8f9fa",
+                        "outline": "#737686",
+                        "primary": "#004ac6",
+                        "on-primary": "#ffffff",
+                        "surface-variant": "#e1e3e4",
+                        "tertiary-fixed": "#dae2fd",
+                        "on-surface": "#191c1d",
+                        "surface-container-highest": "#e1e3e4",
+                        "inverse-on-surface": "#f0f1f2",
+                        "error-container": "#ffdad6",
+                        "tertiary-fixed-dim": "#bec6e0",
+                        "tertiary": "#4d556b",
+                        "surface-container": "#edeeef"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.125rem",
+                        "lg": "0.25rem",
+                        "xl": "0.5rem",
+                        "full": "0.75rem"
+                    },
+                    "spacing": {
+                        "xl": "32px",
+                        "unit": "4px",
+                        "sm": "8px",
+                        "lg": "24px",
+                        "xs": "4px",
+                        "sidebar-width": "240px",
+                        "md": "16px",
+                        "container-max": "1440px"
+                    },
+                    "fontFamily": {
+                        "h2": ["Inter"],
+                        "code": ["Monospace"],
+                        "h1": ["Inter"],
+                        "body-md": ["Inter"],
+                        "body-lg": ["Inter"],
+                        "body-sm": ["Inter"],
+                        "label-md": ["Inter"],
+                        "h3": ["Inter"]
+                    },
+                    "fontSize": {
+                        "h2": ["20px", { "lineHeight": "28px", "letterSpacing": "-0.01em", "fontWeight": "600" }],
+                        "code": ["13px", { "lineHeight": "20px", "fontWeight": "400" }],
+                        "h1": ["24px", { "lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "600" }],
+                        "body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
+                        "body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "400" }],
+                        "body-sm": ["13px", { "lineHeight": "18px", "fontWeight": "400" }],
+                        "label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500" }],
+                        "h3": ["16px", { "lineHeight": "24px", "fontWeight": "600" }]
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-background text-on-background font-body-md text-body-md min-h-screen flex">
+<!-- SideNavBar -->
+<nav class="h-screen w-64 border-r fixed left-0 top-0 border-r border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 font-sans text-sm font-medium tracking-tight flex flex-col h-full py-4 z-50">
+<div class="px-6 pb-6 border-b border-slate-200 dark:border-slate-800 mb-4">
+<h1 class="text-lg font-bold text-slate-900 dark:text-white truncate">LinguistPro</h1>
+<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Enterprise Tier</p>
+</div>
+<div class="px-4 mb-6">
+<button class="w-full py-2.5 px-4 bg-primary text-on-primary rounded-lg font-label-md text-label-md flex items-center justify-center gap-2 hover:opacity-90 transition-opacity shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)]">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">add</span>
+                New Translation
+            </button>
+</div>
+<ul class="flex-1 space-y-1">
+<li>
+<a class="flex items-center gap-3 px-4 py-2 border-l-2 border-blue-600 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors Active: opacity-90 transition-all" href="#">
+<span class="material-symbols-outlined">translate</span>
+                    Workspace
+                </a>
+</li>
+<li>
+<a class="flex items-center gap-3 px-4 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" href="#">
+<span class="material-symbols-outlined">folder_open</span>
+                    Projects
+                </a>
+</li>
+<li>
+<a class="flex items-center gap-3 px-4 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" href="#">
+<span class="material-symbols-outlined">book</span>
+                    Glossary
+                </a>
+</li>
+<li>
+<a class="flex items-center gap-3 px-4 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" href="#">
+<span class="material-symbols-outlined">group</span>
+                    Team
+                </a>
+</li>
+<li>
+<a class="flex items-center gap-3 px-4 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" href="#">
+<span class="material-symbols-outlined">settings</span>
+                    Settings
+                </a>
+</li>
+</ul>
+<div class="mt-auto border-t border-slate-200 dark:border-slate-800 pt-4">
+<ul class="space-y-1">
+<li>
+<a class="flex items-center gap-3 px-4 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" href="#">
+<span class="material-symbols-outlined">help</span>
+                        Help Center
+                    </a>
+</li>
+<li>
+<a class="flex items-center gap-3 px-4 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" href="#">
+<span class="material-symbols-outlined">account_circle</span>
+                        Account
+                    </a>
+</li>
+</ul>
+</div>
+</nav>
+<!-- Main Content Area -->
+<div class="flex-1 ml-[256px] flex flex-col h-screen overflow-hidden">
+<!-- TopNavBar -->
+<header class="docked full-width top-0 sticky z-40 border-b border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md font-sans text-sm font-semibold flex justify-between items-center h-16 px-8 ml-64">
+<div class="flex items-center gap-8">
+<span class="text-xl font-black text-slate-900 dark:text-white">Translation Workspace</span>
+<nav class="hidden md:flex gap-6 h-full items-center">
+<a class="text-slate-600 dark:text-slate-400 hover:text-blue-700 dark:hover:text-blue-300 h-full flex items-center border-b-2 border-transparent" href="#">Documents</a>
+<a class="text-slate-600 dark:text-slate-400 hover:text-blue-700 dark:hover:text-blue-300 h-full flex items-center border-b-2 border-transparent" href="#">API</a>
+<a class="text-slate-600 dark:text-slate-400 hover:text-blue-700 dark:hover:text-blue-300 h-full flex items-center border-b-2 border-transparent" href="#">History</a>
+</nav>
+</div>
+<div class="flex items-center gap-4">
+<div class="relative hidden sm:block">
+<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" style="font-size: 18px;">search</span>
+<input class="pl-9 pr-4 py-1.5 bg-slate-100 border-transparent rounded-lg text-sm focus:border-blue-500 focus:bg-white focus:ring-0 w-64 transition-colors" placeholder="Search workspace..." type="text"/>
+</div>
+<div class="flex items-center gap-2 border-l border-slate-200 pl-4 ml-2">
+<button class="p-2 text-slate-600 hover:bg-slate-100 rounded-full transition-colors relative">
+<span class="material-symbols-outlined">notifications</span>
+<span class="absolute top-1.5 right-1.5 w-2 h-2 bg-blue-600 rounded-full border border-white"></span>
+</button>
+<button class="p-2 text-slate-600 hover:bg-slate-100 rounded-full transition-colors">
+<span class="material-symbols-outlined">help_outline</span>
+</button>
+<button class="ml-2 w-8 h-8 rounded-full overflow-hidden border border-slate-200 hover:border-blue-500 transition-colors">
+<img alt="User Avatar" class="w-full h-full object-cover" data-alt="A professional headshot of a corporate user, modern office background, bright lighting, realistic photography style." src="https://lh3.googleusercontent.com/aida/ADBb0uiQHyvZajfMu-xFqjkxj8fN8QgZKiJepfygOrdLqjKXjIEZeI210SlhhvN_YN0O_sAL1PjPawFb8e4UtB1oFVM9t4gdWfJUBNjLopR47O_ZRPcXfSvKGAcajFreDjLHic-eH-tFw2SbJ-vgt-6IO97IzzyLe3CAWe_rn-CYEzhYrrxP36O1kqeeMZ8NjHQ2FkzCaNGfUmZjlCqQZiHSNodufbz0IJ30DmjolIoJaQtmSv88kvmdGWdlK2WeUq5SflwZsBDxvmNoQvg"/>
+</button>
+</div>
+</div>
+</header>
+<!-- Page Canvas -->
+<main class="flex-1 overflow-y-auto p-8 bg-surface-bright">
+<div class="max-w-[1200px] mx-auto space-y-6">
+<!-- Top Section: Grid for File & Settings -->
+<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+<!-- File Upload Card -->
+<div class="lg:col-span-2 bg-surface-container-lowest border border-surface-variant rounded-xl p-6 shadow-sm">
+<h2 class="font-h2 text-h2 text-on-surface mb-4">Source Document</h2>
+<div class="border-2 border-dashed border-outline-variant rounded-lg p-8 flex flex-col items-center justify-center text-center bg-surface hover:border-primary transition-colors cursor-pointer group">
+<div class="w-12 h-12 bg-primary-fixed rounded-full flex items-center justify-center text-primary mb-3 group-hover:scale-110 transition-transform">
+<span class="material-symbols-outlined" style="font-size: 24px;">upload_file</span>
+</div>
+<p class="font-body-lg text-body-lg text-on-surface font-medium mb-1">Drag and drop file here</p>
+<p class="font-body-sm text-body-sm text-on-surface-variant mb-4">Supports .txt, .docx, .json, .csv (Max 50MB)</p>
+<button class="px-4 py-2 bg-white border border-surface-variant rounded-lg font-label-md text-label-md text-on-surface hover:bg-surface-container-low transition-colors shadow-sm">
+                                Browse Files
+                            </button>
+</div>
+</div>
+<!-- Configuration Card -->
+<div class="bg-surface-container-lowest border border-surface-variant rounded-xl p-6 shadow-sm flex flex-col">
+<h2 class="font-h2 text-h2 text-on-surface mb-4">Configuration</h2>
+<div class="space-y-5 flex-1">
+<div>
+<label class="block font-label-md text-label-md text-on-surface-variant mb-1.5">Source Language</label>
+<div class="relative">
+<select class="w-full appearance-none bg-surface-container-lowest border border-surface-variant rounded-lg px-3 py-2 pr-8 font-body-md text-body-md text-on-surface focus:border-primary focus:ring-1 focus:ring-primary transition-colors">
+<option>English (US)</option>
+<option>French (FR)</option>
+<option>Spanish (ES)</option>
+</select>
+<span class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none" style="font-size: 18px;">expand_more</span>
+</div>
+</div>
+<div class="flex justify-center -my-2 relative z-10">
+<button class="w-8 h-8 bg-surface-container-lowest border border-surface-variant rounded-full flex items-center justify-center text-on-surface-variant hover:text-primary hover:border-primary transition-colors shadow-sm bg-white">
+<span class="material-symbols-outlined" style="font-size: 18px;">swap_vert</span>
+</button>
+</div>
+<div>
+<label class="block font-label-md text-label-md text-on-surface-variant mb-1.5">Target Language</label>
+<div class="relative">
+<select class="w-full appearance-none bg-surface-container-lowest border border-surface-variant rounded-lg px-3 py-2 pr-8 font-body-md text-body-md text-on-surface focus:border-primary focus:ring-1 focus:ring-primary transition-colors">
+<option>French (FR)</option>
+<option>German (DE)</option>
+<option>Japanese (JP)</option>
+</select>
+<span class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none" style="font-size: 18px;">expand_more</span>
+</div>
+</div>
+<div>
+<label class="block font-label-md text-label-md text-on-surface-variant mb-1.5">Translation Engine</label>
+<div class="relative">
+<select class="w-full appearance-none bg-surface-container-lowest border border-surface-variant rounded-lg px-3 py-2 pr-8 font-body-md text-body-md text-on-surface focus:border-primary focus:ring-1 focus:ring-primary transition-colors">
+<option>Neural Machine Translation (Pro)</option>
+<option>Standard MT</option>
+<option>Glossary Strictly</option>
+</select>
+<span class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none" style="font-size: 18px;">expand_more</span>
+</div>
+</div>
+</div>
+<button class="w-full mt-6 py-2.5 bg-primary text-on-primary rounded-lg font-label-md text-label-md flex items-center justify-center gap-2 hover:opacity-90 transition-opacity shadow-sm">
+<span class="material-symbols-outlined" style="font-size: 18px;">bolt</span>
+                            Start Translation
+                        </button>
+</div>
+</div>
+<!-- Recent Translations / Results Area -->
+<div class="bg-surface-container-lowest border border-surface-variant rounded-xl shadow-sm overflow-hidden flex flex-col">
+<div class="p-6 border-b border-surface-variant flex justify-between items-center bg-white">
+<h2 class="font-h2 text-h2 text-on-surface flex items-center gap-2">
+<span class="material-symbols-outlined text-primary">history</span>
+                            Recent Translations
+                        </h2>
+<div class="flex gap-2">
+<button class="p-1.5 text-on-surface-variant hover:bg-surface-container-low rounded transition-colors border border-transparent hover:border-surface-variant">
+<span class="material-symbols-outlined" style="font-size: 20px;">filter_list</span>
+</button>
+</div>
+</div>
+<div class="overflow-x-auto">
+<table class="w-full text-left border-collapse">
+<thead>
+<tr class="bg-surface font-label-md text-label-md text-on-surface-variant border-b border-surface-variant">
+<th class="px-6 py-3 font-medium">File Name</th>
+<th class="px-6 py-3 font-medium">Languages</th>
+<th class="px-6 py-3 font-medium">Status</th>
+<th class="px-6 py-3 font-medium">Date</th>
+<th class="px-6 py-3 font-medium text-right">Action</th>
+</tr>
+</thead>
+<tbody class="font-body-md text-body-md text-on-surface divide-y divide-surface-variant bg-white">
+<!-- Row 1 -->
+<tr class="hover:bg-surface-container-lowest transition-colors group">
+<td class="px-6 py-4">
+<div class="flex items-center gap-3">
+<span class="material-symbols-outlined text-tertiary-container">description</span>
+<span class="font-medium text-on-surface">marketing_copy_v2.docx</span>
+</div>
+</td>
+<td class="px-6 py-4">
+<div class="flex items-center gap-2 text-sm">
+<span class="px-2 py-0.5 bg-surface-container rounded text-on-surface-variant">EN</span>
+<span class="material-symbols-outlined text-outline" style="font-size: 16px;">arrow_right_alt</span>
+<span class="px-2 py-0.5 bg-primary-fixed rounded text-on-primary-fixed">FR</span>
+</div>
+</td>
+<td class="px-6 py-4">
+<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-[#ecfdf5] text-[#065f46]">
+<span class="w-1.5 h-1.5 rounded-full bg-[#10b981]"></span>
+                                            Completed
+                                        </span>
+</td>
+<td class="px-6 py-4 text-on-surface-variant text-sm">Today, 10:42 AM</td>
+<td class="px-6 py-4 text-right">
+<button class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-white border border-surface-variant rounded-md text-sm font-medium text-primary hover:bg-primary-fixed transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100">
+<span class="material-symbols-outlined" style="font-size: 16px;">download</span>
+                                            Download
+                                        </button>
+</td>
+</tr>
+<!-- Row 2 -->
+<tr class="hover:bg-surface-container-lowest transition-colors group">
+<td class="px-6 py-4">
+<div class="flex items-center gap-3">
+<span class="material-symbols-outlined text-tertiary-container">data_object</span>
+<span class="font-medium text-on-surface">ui_strings_core.json</span>
+</div>
+</td>
+<td class="px-6 py-4">
+<div class="flex items-center gap-2 text-sm">
+<span class="px-2 py-0.5 bg-surface-container rounded text-on-surface-variant">EN</span>
+<span class="material-symbols-outlined text-outline" style="font-size: 16px;">arrow_right_alt</span>
+<span class="px-2 py-0.5 bg-primary-fixed rounded text-on-primary-fixed">DE</span>
+</div>
+</td>
+<td class="px-6 py-4">
+<div class="flex items-center gap-2 w-32">
+<div class="h-1.5 w-full bg-surface-variant rounded-full overflow-hidden">
+<div class="h-full bg-primary w-2/3 rounded-full"></div>
+</div>
+<span class="text-xs text-on-surface-variant font-medium">65%</span>
+</div>
+</td>
+<td class="px-6 py-4 text-on-surface-variant text-sm">Today, 09:15 AM</td>
+<td class="px-6 py-4 text-right">
+<button class="inline-flex items-center p-1.5 text-on-surface-variant hover:text-primary transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100" title="Cancel">
+<span class="material-symbols-outlined" style="font-size: 20px;">close</span>
+</button>
+</td>
+</tr>
+<!-- Row 3 -->
+<tr class="hover:bg-surface-container-lowest transition-colors group">
+<td class="px-6 py-4">
+<div class="flex items-center gap-3">
+<span class="material-symbols-outlined text-tertiary-container">description</span>
+<span class="font-medium text-on-surface">legal_terms_2024.docx</span>
+</div>
+</td>
+<td class="px-6 py-4">
+<div class="flex items-center gap-2 text-sm">
+<span class="px-2 py-0.5 bg-surface-container rounded text-on-surface-variant">EN</span>
+<span class="material-symbols-outlined text-outline" style="font-size: 16px;">arrow_right_alt</span>
+<span class="px-2 py-0.5 bg-primary-fixed rounded text-on-primary-fixed">ES</span>
+</div>
+</td>
+<td class="px-6 py-4">
+<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-[#ecfdf5] text-[#065f46]">
+<span class="w-1.5 h-1.5 rounded-full bg-[#10b981]"></span>
+                                            Completed
+                                        </span>
+</td>
+<td class="px-6 py-4 text-on-surface-variant text-sm">Yesterday</td>
+<td class="px-6 py-4 text-right">
+<button class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-white border border-surface-variant rounded-md text-sm font-medium text-primary hover:bg-primary-fixed transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100">
+<span class="material-symbols-outlined" style="font-size: 16px;">download</span>
+                                            Download
+                                        </button>
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+<div class="p-4 border-t border-surface-variant bg-surface text-center">
+<button class="text-sm font-medium text-primary hover:text-on-primary-fixed transition-colors">
+                            View All History
+                        </button>
+</div>
+</div>
+</div>
+</main>
+</div>
+</body></html>