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.