diff --git a/package.json b/package.json index a367a2f..25bdeb9 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "private": true, "main": "src/chats-mobile.js", "scripts": { - "start": "node -e \"require('./src/chats-mobile.js').startChatsMobile()\"", + "start": "node src/start.js", "quality:gate": "bash scripts/quality-gate-local.sh", "monitor:runtime": "bash scripts/monitor-runtime.sh", "test": "vitest run", diff --git a/src/analytics-web/chats_mobile.html b/src/analytics-web/chats_mobile.html index 703262d..f4ab5e1 100644 --- a/src/analytics-web/chats_mobile.html +++ b/src/analytics-web/chats_mobile.html @@ -12,7 +12,42 @@ } :root { - /* Dark theme - slate and teal */ + /* Claude Code - light / white + orange theme (default) */ + --bg-primary: #ffffff; + --bg-secondary: #f9f7f5; + --bg-tertiary: #f0ebe4; + --text-primary: #1a1a1a; + --text-secondary: #6b6560; + --text-accent: #d97757; + --text-success: #2d8a4e; + --text-warning: #c17d2e; + --text-error: #c0392b; + --border-primary: #ddd8cf; + --border-secondary: #ccc5ba; + --shadow: rgba(0, 0, 0, 0.08); + + /* Accent colors */ + --accent-primary: #d97757; + --accent-primary-hover: #c4633e; + --accent-dark: #1a1a1a; + --accent-gray: #f0ece6; + --accent-rgb: 217, 119, 87; + + /* Today highlight */ + --today-color: var(--text-accent); + --today-bg-rgb: 217, 119, 87; + + /* Progress bar */ + --progress-start: #e08050; + --progress-end: #d97757; + + /* Message bubble colors */ + --message-received: #d97757; + --message-sent: #c4633e; + } + + [data-theme="dark"] { + /* Original dark / slate + teal theme */ --bg-primary: #0f1419; --bg-secondary: #1a1f26; --bg-tertiary: #242c36; @@ -31,10 +66,19 @@ --accent-primary-hover: #5eead4; --accent-dark: #0f1419; --accent-gray: #242c36; + --accent-rgb: 45, 212, 191; + + /* Today highlight */ + --today-color: #3b82f6; + --today-bg-rgb: 59, 130, 246; + + /* Progress bar */ + --progress-start: #10b981; + --progress-end: #059669; /* Message bubble colors */ - --message-received: #0d9488; /* Teal for received messages */ - --message-sent: #059669; /* Emerald green for sent messages */ + --message-received: #0d9488; + --message-sent: #059669; } body { @@ -65,7 +109,7 @@ /* Chat sidebar header */ .chat-header { - background: var(--bg-secondary); + background: #ffffff; padding: 16px 20px; border-bottom: 1px solid var(--border-primary); display: flex; @@ -114,8 +158,8 @@ } .header-btn { - background: rgba(45, 212, 191, 0.08); - border: 1px solid rgba(45, 212, 191, 0.2); + background: rgba(var(--accent-rgb), 0.08); + border: 1px solid rgba(var(--accent-rgb), 0.2); color: var(--accent-primary); font-size: 0.8rem; font-weight: 500; @@ -128,18 +172,18 @@ } .header-btn:hover { - background: rgba(45, 212, 191, 0.15); - border-color: rgba(45, 212, 191, 0.35); + background: rgba(var(--accent-rgb), 0.15); + border-color: rgba(var(--accent-rgb), 0.35); color: var(--accent-primary-hover); } .header-btn:active { - background: rgba(45, 212, 191, 0.2); + background: rgba(var(--accent-rgb), 0.2); } .back-btn { - background: rgba(45, 212, 191, 0.1) !important; - border: 1px solid rgba(45, 212, 191, 0.25) !important; + background: rgba(var(--accent-rgb), 0.1) !important; + border: 1px solid rgba(var(--accent-rgb), 0.25) !important; color: var(--accent-primary) !important; font-size: 1.1rem !important; font-weight: 600 !important; @@ -150,8 +194,8 @@ } .back-btn:hover { - background: rgba(45, 212, 191, 0.18) !important; - border-color: rgba(45, 212, 191, 0.35) !important; + background: rgba(var(--accent-rgb), 0.18) !important; + border-color: rgba(var(--accent-rgb), 0.35) !important; } /* Search bar */ @@ -297,7 +341,7 @@ .search-filter-input:focus { border-color: var(--accent-primary); background: var(--bg-primary); - box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1); + box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1); } .search-filter-input::placeholder { @@ -346,13 +390,13 @@ .search-btn-primary { background: var(--accent-primary); - color: #0f1419; + color: #ffffff; } .search-btn-primary:hover { background: var(--accent-primary-hover); transform: translateY(-1px); - box-shadow: 0 6px 16px rgba(45, 212, 191, 0.3); + box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.3); } .search-btn-secondary { @@ -390,7 +434,7 @@ } .advanced-search-toggle:hover { - background: rgba(45, 212, 191, 0.15); + background: rgba(var(--accent-rgb), 0.15); color: var(--accent-primary-hover); border-color: var(--accent-primary); } @@ -412,7 +456,7 @@ } .settings-toggle:hover { - background: rgba(45, 212, 191, 0.1); + background: rgba(var(--accent-rgb), 0.1); border-color: var(--accent-primary); color: var(--accent-primary); } @@ -450,7 +494,7 @@ .search-result-item.subagent { padding-left: 36px; position: relative; - background: #0a0d10; + background: var(--bg-tertiary); } .search-result-item.subagent::before { @@ -496,7 +540,7 @@ .conversation-item.subagent { padding-left: 36px; position: relative; - background: #0a0d10; + background: var(--bg-tertiary); } .conversation-item.subagent::before { @@ -942,12 +986,12 @@ } .action-btn.download-btn:hover { - background: rgba(59, 130, 246, 0.15); - color: rgba(59, 130, 246, 1); + background: rgba(var(--accent-rgb), 0.15); + color: rgba(var(--accent-rgb), 1); } .action-btn.download-btn:hover svg { - stroke: rgba(59, 130, 246, 1); + stroke: rgba(var(--accent-rgb), 1); } .action-btn.search-btn:hover { @@ -1130,19 +1174,19 @@ } .project-sessions { - color: var(--text-secondary); + color: var(--text-accent); font-weight: 500; } /* Today's activity highlight */ .project-header.today-activity { - background: linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0%, transparent 100%); - border-left: 3px solid #3b82f6; + background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.08) 0%, transparent 100%); + border-left: 3px solid var(--today-color); padding-left: 17px; /* Compensate for border */ } .project-header.today-activity .project-date { - color: #3b82f6; + color: var(--today-color); font-weight: 500; } @@ -1155,8 +1199,8 @@ font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em; - color: #3b82f6; - background: rgba(59, 130, 246, 0.12); + color: var(--today-color); + background: rgba(var(--accent-rgb), 0.12); padding: 2px 6px; border-radius: 4px; } @@ -1222,7 +1266,7 @@ /* Active states - Blue/Cyan (Recent activity, ready) */ .state-active { background: rgba(23, 162, 184, 0.15); - color: #17a2b8; + color: var(--text-accent); border: 1px solid rgba(23, 162, 184, 0.3); } @@ -1263,7 +1307,7 @@ /* Special states */ .state-recent { background: rgba(0, 123, 255, 0.15); - color: #007bff; + color: var(--text-accent); border: 1px solid rgba(0, 123, 255, 0.3); } @@ -1286,9 +1330,9 @@ } .message-count { - background: rgba(45, 212, 191, 0.15); + background: rgba(var(--accent-rgb), 0.15); color: var(--accent-primary); - border: 1px solid rgba(45, 212, 191, 0.25); + border: 1px solid rgba(var(--accent-rgb), 0.25); border-radius: 10px; font-size: 0.7rem; font-weight: 600; @@ -1430,14 +1474,14 @@ font-size: 0.9rem; margin-top: 8px; padding: 4px 0; - border-top: 1px solid rgba(45, 212, 191, 0.25); + border-top: 1px solid rgba(var(--accent-rgb), 0.25); text-align: center; transition: all 0.2s ease; } .message-expand-link:hover { color: var(--accent-primary-hover); - background: rgba(45, 212, 191, 0.1); + background: rgba(var(--accent-rgb), 0.1); } .message-collapse-link { @@ -1480,7 +1524,7 @@ } .tool-summary:hover { - background: rgba(45, 212, 191, 0.1); + background: rgba(var(--accent-rgb), 0.1); padding: 2px 4px; border-radius: 4px; } @@ -1610,16 +1654,16 @@ font-size: 0.8rem; margin-top: 8px; padding: 6px 12px; - border-top: 1px solid rgba(45, 212, 191, 0.25); + border-top: 1px solid rgba(var(--accent-rgb), 0.25); text-align: center; transition: all 0.2s ease; - background: rgba(45, 212, 191, 0.05); + background: rgba(var(--accent-rgb), 0.05); border-radius: 0 0 4px 4px; } .tool-result-expand-link:hover { color: var(--accent-primary-hover); - background: rgba(45, 212, 191, 0.1); + background: rgba(var(--accent-rgb), 0.1); } .tool-result-collapse-link { @@ -1909,7 +1953,7 @@ .status-dot.working { background: var(--accent-primary); - box-shadow: 0 0 6px rgba(45, 212, 191, 0.3); + box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.3); animation: pulse 2s infinite; } @@ -2049,8 +2093,8 @@ } .modal-btn { - background: rgba(45, 212, 191, 0.1); - border: 1px solid rgba(45, 212, 191, 0.15); + background: rgba(var(--accent-rgb), 0.1); + border: 1px solid rgba(var(--accent-rgb), 0.15); color: var(--accent-primary); font-size: 0.85rem; font-weight: 600; @@ -2063,15 +2107,15 @@ } .modal-btn:hover { - background: rgba(45, 212, 191, 0.12); - border-color: rgba(45, 212, 191, 0.25); + background: rgba(var(--accent-rgb), 0.12); + border-color: rgba(var(--accent-rgb), 0.25); transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(45, 212, 191, 0.15); + box-shadow: 0 2px 4px rgba(var(--accent-rgb), 0.15); } .modal-btn:active { transform: translateY(0); - box-shadow: 0 1px 2px rgba(45, 212, 191, 0.15); + box-shadow: 0 1px 2px rgba(var(--accent-rgb), 0.15); } .modal-btn.primary { @@ -2120,7 +2164,7 @@