diff --git a/src/web/public/app.js b/src/web/public/app.js index 8dd00d49..72ae366e 100644 --- a/src/web/public/app.js +++ b/src/web/public/app.js @@ -1757,6 +1757,17 @@ class CodemanApp { else if (wantIdle && !hasIdle) { tab.classList.add('tab-alert-idle'); tab.classList.remove('tab-alert-action'); } else if (!alertType && (hasAction || hasIdle)) { tab.classList.remove('tab-alert-action', 'tab-alert-idle'); } + // Inject tab-number badge if missing (added after initial render) + if (!tab.querySelector('.tab-number')) { + const idx = this.sessionOrder.indexOf(id); + if (idx >= 0 && idx < 9) { + const numSpan = document.createElement('span'); + numSpan.className = 'tab-number'; + numSpan.textContent = String(idx + 1); + tab.insertBefore(numSpan, tab.firstChild); + } + } + // Update status indicator const statusEl = tab.querySelector('.tab-status'); if (statusEl && !statusEl.classList.contains(status)) { @@ -1849,6 +1860,7 @@ class CodemanApp { // Reorder to put active tab first tabOrder = [this.activeSessionId, ...this.sessionOrder.filter(id => id !== this.activeSessionId)]; } + let _tabIdx = 0; for (const id of tabOrder) { const session = this.sessions.get(id); if (!session) continue; // Skip if session was removed @@ -1875,6 +1887,7 @@ class CodemanApp { const endedAttr = session._ended ? ' data-ended="1"' : ''; parts.push(``); + _tabIdx++; } container.innerHTML = parts.join(''); diff --git a/src/web/public/styles.css b/src/web/public/styles.css index 0827d8f6..8914eb14 100644 --- a/src/web/public/styles.css +++ b/src/web/public/styles.css @@ -258,15 +258,16 @@ body { } .session-tab.active { - background: rgba(255, 255, 255, 0.04); - border-color: var(--glass-border); - color: var(--text); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); + background: rgba(34, 197, 94, 0.15) !important; + border: 2px solid #00FF66 !important; + color: #fff !important; + box-shadow: none !important; + outline: none !important; } /* Tab switch feedback: bright green glow on the newly-active tab */ .session-tab.tab-glow { - animation: tab-glow 0.35s ease-out forwards; + animation: tab-glow 0.35s ease-out; } @keyframes tab-glow { @@ -304,13 +305,36 @@ body { .session-tab[data-color="pink"] { border-left: 3px solid var(--session-pink); } /* Active tabs with color get subtle background tint */ -.session-tab.active[data-color="red"] { background: rgba(239, 68, 68, 0.1); } -.session-tab.active[data-color="orange"] { background: rgba(249, 115, 22, 0.1); } -.session-tab.active[data-color="yellow"] { background: rgba(234, 179, 8, 0.1); } -.session-tab.active[data-color="green"] { background: rgba(34, 197, 94, 0.1); } -.session-tab.active[data-color="blue"] { background: rgba(59, 130, 246, 0.1); } -.session-tab.active[data-color="purple"] { background: rgba(168, 85, 247, 0.1); } -.session-tab.active[data-color="pink"] { background: rgba(236, 72, 153, 0.1); } +.session-tab.active[data-color="red"] { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.5); box-shadow: 0 0 10px rgba(239, 68, 68, 0.3); } +.session-tab.active[data-color="orange"] { background: rgba(249, 115, 22, 0.15); border-color: rgba(249, 115, 22, 0.5); box-shadow: 0 0 10px rgba(249, 115, 22, 0.3); } +.session-tab.active[data-color="yellow"] { background: rgba(234, 179, 8, 0.15); border-color: rgba(234, 179, 8, 0.5); box-shadow: 0 0 10px rgba(234, 179, 8, 0.3); } +.session-tab.active[data-color="green"] { background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.5); box-shadow: 0 0 10px rgba(34, 197, 94, 0.3); } +.session-tab.active[data-color="blue"] { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.5); box-shadow: 0 0 10px rgba(59, 130, 246, 0.3); } +.session-tab.active[data-color="purple"] { background: rgba(168, 85, 247, 0.15); border-color: rgba(168, 85, 247, 0.5); box-shadow: 0 0 10px rgba(168, 85, 247, 0.3); } +.session-tab.active[data-color="pink"] { background: rgba(236, 72, 153, 0.15); border-color: rgba(236, 72, 153, 0.5); box-shadow: 0 0 10px rgba(236, 72, 153, 0.3); } + +/* Tab number indicator (Alt+N shortcut hint) */ +.session-tab .tab-number { + display: inline-flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + border-radius: 3px; + background: rgba(255, 255, 255, 0.15); + border: 1px solid rgba(255, 255, 255, 0.35); + color: rgba(255, 255, 255, 0.75); + font-size: 0.6rem; + font-weight: 700; + flex-shrink: 0; + font-family: monospace; +} + +.session-tab.active .tab-number { + background: rgba(0, 255, 102, 0.2) !important; + border-color: rgba(0, 255, 102, 0.5) !important; + color: #00FF66 !important; +} .session-tab .tab-info { display: flex;