Termix-SSH
diff --git a/‎MIGRATION_AUDIT_REPORT.md‎
Lines changed: 181 additions & 0 deletions b/‎MIGRATION_AUDIT_REPORT.md‎
Lines changed: 181 additions & 0 deletions
diff --git a/‎TEXT_COLOR_ANALYSIS.md‎
Lines changed: 145 additions & 0 deletions b/‎TEXT_COLOR_ANALYSIS.md‎
Lines changed: 145 additions & 0 deletions
@@ -0,0 +1,181 @@
+# Comprehensive Migration Audit Report
+
+Based on deep examination by 5 specialized agents, here are all findings organized by severity:
+
+---
+
+## CRITICAL ISSUES (Must Fix)
+
+### 1. Hardcoded Dark Background Colors (14 instances)
+
+| File | Line | Value | Should Be |
+|------|------|-------|-----------|
+| `main.tsx` | 82 | `#09090b` | `var(--bg-base)` |
+| `Auth.tsx` | 871 | `#0e0e10` | `var(--bg-base)` |
+| `TopNavbar.tsx` | 356, 547 | `#18181b` | `var(--bg-base)` |
+| `LeftSidebar.tsx` | 595 | `#18181b` | `var(--bg-base)` |
+| `SSHAuthDialog.tsx` | 45 | `#18181b` (default param) | `var(--bg-base)` |
+| `AppView.tsx` | 299 | `#18181b` (fallback) | `var(--bg-base)` |
+| `SimpleLoader.tsx` | 50 | `#18181b` (fallback) | `var(--bg-base)` |
+| `TerminalPreview.tsx` | 34-35 | `#18181b`, `#f7f7f7` | Theme vars |
+| `index.css` | 12 | `#09090b` in `:root` | Light color! |
+
+### 2. Wrong Theme Hook Import
+
+| File | Line | Issue |
+|------|------|-------|
+| `sonner.tsx` | 1 | Uses `useTheme` from `next-themes` instead of `@/components/theme-provider` |
+
+### 3. Mobile Terminal Hardcoded Dark Theme
+
+| File | Line | Issue |
+|------|------|-------|
+| `mobile/apps/terminal/Terminal.tsx` | 273 | `theme: { background: "#09090b", foreground: "#f7f7f7" }` |
+
+### 4. Scrollbar CSS - Dark Only, No Light Mode
+
+| File | Lines | Issue |
+|------|-------|-------|
+| `index.css` | 244-287 | All scrollbar colors are dark (`#303032`, `#18181b`, `#434345`) with NO light mode alternatives |
+
+---
+
+## HIGH PRIORITY (Should Fix)
+
+### 5. Chart Widget Hardcoded Colors (Recharts)
+
+**CpuWidget.tsx:**
+| Line | Value | Purpose |
+|------|-------|---------|
+| 66 | `#374151` | Grid stroke |
+| 69-70, 75-76 | `#9ca3af` | Axis stroke/tick |
+| 80 | `#1f2937` | Tooltip background |
+| 81 | `#374151` | Tooltip border |
+| 83 | `#fff` | Tooltip text |
+| 90 | `#60a5fa` | Line stroke (blue) |
+
+**MemoryWidget.tsx:**
+| Line | Value | Purpose |
+|------|-------|---------|
+| 75-76 | `#34d399` | Gradient stops |
+| 79 | `#374151` | Grid stroke |
+| 82-83, 88-89 | `#9ca3af` | Axis stroke/tick |
+| 93 | `#1f2937` | Tooltip background |
+| 94 | `#374151` | Tooltip border |
+| 96 | `#fff` | Tooltip text |
+
+**DiskWidget.tsx:**
+| Line | Value | Purpose |
+|------|-------|---------|
+| 24, 60 | `#fb923c` | RadialBar fill (orange) |
+
+### 6. Dashboard Icon Colors Hardcoded White
+
+| File | Lines | Issue |
+|------|-------|-------|
+| `Dashboard.tsx` | 459, 488, 507, 531, 546, 563 | `color="#FFFFFF"` on icons |
+
+### 7. Mobile Keyboard Theme - Entire File Hardcoded
+
+**`kb-dark-theme.css`** (41 lines) - ALL hardcoded:
+- `rgb(24, 24, 27)` - background
+- `#bfbfbf` - text color
+- `rgb(122, 122, 122)` - border
+- `rgba(0, 0, 0, 0.5)` - button background
+- `rgba(83, 83, 83, 0.5)` - active states
+
+### 8. Terminal Scrollbar Colors (Desktop & Mobile)
+
+| File | Lines | Values |
+|------|-------|--------|
+| `desktop/apps/terminal/Terminal.tsx` | 485-493 | `rgba(180,180,180,0.7)`, `rgba(120,120,120,0.9)` |
+| `mobile/apps/terminal/Terminal.tsx` | 485-493 | Same values |
+
+---
+
+## MEDIUM PRIORITY (Consider Fixing)
+
+### 9. Tailwind `dark:` Variants in Components
+
+These use explicit `dark:` variants instead of semantic tokens:
+
+| File | Examples |
+|------|----------|
+| `input.tsx` | `dark:bg-input/30`, `dark:aria-invalid:ring-destructive/40` |
+| `button.tsx` | `dark:bg-input/30`, `dark:border-input`, `dark:hover:bg-input/50` |
+| `checkbox.tsx` | `dark:bg-input/30`, `dark:data-[state=checked]:bg-primary` |
+| `select.tsx` | `dark:bg-input/30`, `dark:hover:bg-input/50` |
+| `switch.tsx` | `dark:data-[state=unchecked]:bg-input/80` |
+| `tabs.tsx` | `dark:data-[state=active]:bg-input/30` |
+
+### 10. Hardcoded Light/Dark Pairs (Not Semantic)
+
+| File | Classes | Should Be |
+|------|---------|-----------|
+| `FileManagerGrid.tsx` | `bg-white dark:bg-gray-800` | `bg-canvas` |
+| `FileViewer.tsx` | `bg-gray-100 dark:bg-gray-900` | `bg-elevated` |
+| `CredentialViewer.tsx` | `bg-zinc-100 dark:bg-zinc-800` (multiple) | Semantic token |
+
+### 11. Black Overlays
+
+| File | Line | Value | Consider |
+|------|------|-------|----------|
+| `dialog.tsx` | 39 | `bg-black/50` | `bg-overlay` token |
+| `sheet.tsx` | 37 | `bg-black/50` | `bg-overlay` token |
+| `FileViewer.tsx` | 880 | `#000` (video bg) | May be intentional |
+
+### 12. Duplicated Theme Detection Logic
+
+| File | Lines | Issue |
+|------|-------|-------|
+| `Auth.tsx` | 826-827, 830, 1372-1373, 1376 | Same `isDark` calculation repeated 4 times |
+
+---
+
+## LOW PRIORITY / INFO
+
+### 13. Unused Semantic Variables
+
+Defined in `@theme inline` but never used:
+- `--color-button`, `--color-interact`, `--color-light`, `--color-subtle`
+- `--color-hover`, `--color-hover-alt`, `--color-pressed`
+- `--color-foreground-secondary`, `--color-foreground-subtle`
+- All `--color-dark-*` legacy variables
+
+### 14. Legitimate `dark:` Usage (No Change Needed)
+
+- `TunnelObject.tsx` - Properly uses `text-green-600 dark:text-green-400` pattern
+- `theme-provider.tsx` - Core theme logic, working correctly
+
+### 15. Terminal Themes Constants
+
+`terminal-themes.ts` has 441 color definitions - these are properly scoped theme presets and should NOT be changed.
+
+---
+
+## Summary Statistics
+
+| Category | Count |
+|----------|-------|
+| Hardcoded dark hex colors | 30+ |
+| Files needing migration | 18 |
+| Hardcoded rgba values | 12 |
+| Chart colors to fix | 15 |
+| CSS files needing work | 2 |
+| Unused semantic tokens | 12 |
+
+---
+
+## Discussion Points
+
+1. **Priority Order**: Should we fix critical issues first (backgrounds, scrollbars) or do a comprehensive pass?
+
+2. **Chart Colors**: Create CSS variables for chart theming, or accept hardcoded accent colors?
+
+3. **Mobile Keyboard**: Refactor `kb-dark-theme.css` to use CSS vars, or create separate light/dark files?
+
+4. **Shadcn Components**: The `dark:` variants in `components/ui/` - leave as-is (they work with the theme system) or migrate to semantic tokens?
+
+5. **Scrollbars**: Need both light and dark scrollbar styling in `index.css`
+
+6. **Unused Variables**: Remove the 12 unused semantic tokens, or implement them?
@@ -0,0 +1,145 @@
+# Text Color Analysis & Semantic Class Recommendations
+
+## Executive Summary
+- **Total text color instances**: 724
+- **Already semantic**: 301 (42%) ✅
+- **Hard-coded**: 423 (58%) ❌
+- **Critical for light mode**: 161 neutral text instances
+
+---
+
+## Category 1: NEUTRAL/BASE TEXT (161 instances) - MUST FIX
+
+### Current Hard-coded → Recommended Semantic
+
+| Current | Count | Usage Context | Recommended Semantic | Light Mode | Dark Mode |
+|---------|-------|---------------|---------------------|------------|-----------|
+| `text-white` | 80 | Headings, labels, primary content | `text-foreground` | Dark (#1c1c1e) | White (#fafafa) |
+| `text-gray-300` | 25 | Secondary content, menu items | `text-foreground-secondary` ⚠️ NEW | Medium-dark (#6b7280) | Light (#d1d5db) |
+| `text-gray-400` | 29 | Hints, descriptions, helper text | `text-muted-foreground` | Medium (#9ca3af) | Light-gray (#b3b3b6) |
+| `text-gray-500` | 18 | Metadata, timestamps, subtle info | `text-foreground-subtle` ⚠️ NEW | Gray (#6b7280) | Medium-gray (#9ca3af) |
+| `text-gray-600` | 4 | Very subtle text | `text-muted-foreground` | Dark-gray (#4b5563) | Light-gray (#b3b3b6) |
+| `text-gray-700` | 3 | Nearly invisible | `text-muted-foreground` | Very dark (#374151) | Light-gray (#b3b3b6) |
+| `text-gray-800` | 2 | Almost invisible | `text-foreground` | Nearly black (#1f2937) | White (#fafafa) |
+
+**⚠️ New Semantic Classes Needed:**
+1. `text-foreground-secondary` - For secondary but still prominent text (between primary and muted)
+2. `text-foreground-subtle` - For metadata and timestamps (lighter than muted)
+
+---
+
+## Category 2: STATUS/SEMANTIC COLORS (262 instances) - KEEP AS-IS
+
+### ✅ These can stay hard-coded (work in both themes)
+
+#### Success/Active (GREEN) - 33 instances
+- `text-green-400/500/600/700` - Active states, success messages, positive indicators
+
+#### Error/Destructive (RED) - 49 instances
+- `text-red-300/400/500/600/700` - Errors, warnings, destructive actions
+- **Note**: Consider using existing `text-destructive` where appropriate
+
+#### Info/Interactive (BLUE) - 53 instances
+- `text-blue-200/300/400/500/600/700/800` - Links, interactive elements, info states
+- **Note**: Consider using existing `text-primary` for primary actions
+
+#### Warning (YELLOW/ORANGE) - 38 instances
+- `text-yellow-100/300/400/500/700` - Warnings, alerts
+- `text-orange-400/500/600/700` - Warnings, alerts
+
+#### Other Accents (PURPLE/CYAN/PINK/INDIGO) - 17 instances
+- Various accent colors for tags, badges, categories
+
+**Recommendation**: Keep all status/accent colors as-is. They provide visual meaning that transcends theme.
+
+---
+
+## Category 3: EXISTING SEMANTIC USAGE (301 instances) - ALREADY GOOD ✅
+
+| Semantic Class | Count | Usage |
+|----------------|-------|-------|
+| `text-muted-foreground` | 201 | Helper text, descriptions |
+| `text-foreground` | 66 | Primary text |
+| `text-primary` | 16 | Primary brand color |
+| `text-destructive` | 16 | Destructive actions |
+| `text-card-foreground` | 2 | Card text |
+
+---
+
+## Recommended Action Plan
+
+### Step 1: Add New Semantic Variables to index.css
+
+```css
+:root {
+  /* Existing */
+  --foreground: oklch(0.141 0.005 285.823);           /* Dark text */
+  --muted-foreground: oklch(0.552 0.016 285.938);     /* Medium gray */
+
+  /* NEW - Add these */
+  --foreground-secondary: oklch(0.4 0.01 286);        /* Between foreground and muted */
+  --foreground-subtle: oklch(0.5 0.01 286);           /* Lighter than muted */
+}
+
+.dark {
+  /* Existing */
+  --foreground: oklch(0.985 0 0);                     /* White */
+  --muted-foreground: oklch(0.705 0.015 286.067);     /* Light gray */
+
+  /* NEW - Add these */
+  --foreground-secondary: oklch(0.85 0.005 286);      /* Light but not white */
+  --foreground-subtle: oklch(0.75 0.01 286);          /* Medium light */
+}
+
+@theme inline {
+  /* Existing */
+  --color-foreground: var(--foreground);
+  --color-muted-foreground: var(--muted-foreground);
+
+  /* NEW - Add these */
+  --color-foreground-secondary: var(--foreground-secondary);
+  --color-foreground-subtle: var(--foreground-subtle);
+}
+```
+
+### Step 2: Replace Hard-coded Text Classes
+
+**PRIORITY 1 - Critical (text-white): 80 instances**
+```bash
+text-white → text-foreground
+```
+*Without this, text will be invisible in light mode!*
+
+**PRIORITY 2 - Important (grays): 81 instances**
+```bash
+text-gray-300 → text-foreground-secondary (NEW class)
+text-gray-400 → text-muted-foreground (existing)
+text-gray-500 → text-foreground-subtle (NEW class)
+text-gray-600/700/800 → text-muted-foreground (existing)
+```
+
+**PRIORITY 3 - Optional Consolidation**
+- Consider replacing some `text-red-*` with `text-destructive`
+- Consider replacing some `text-blue-*` with `text-primary`
+
+---
+
+## Summary of New Classes Needed
+
+We need **2 new semantic text classes**:
+
+1. **`text-foreground-secondary`** (25 uses)
+   - Light mode: Medium-dark gray
+   - Dark mode: Light gray (not quite white)
+   - Use: Secondary but still prominent text (menu items, secondary labels)
+
+2. **`text-foreground-subtle`** (18 uses)
+   - Light mode: Gray
+   - Dark mode: Medium-light gray
+   - Use: Metadata, timestamps, very subtle information
+
+**Existing classes to use**:
+- `text-foreground` (80 uses) - Primary text
+- `text-muted-foreground` (60+ uses) - Helper/hint text
+
+**Keep as-is**: All 262 status/accent colors (red, green, blue, yellow, etc.)