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 < 9 ? '' + (_tabIdx + 1) + '' : ''}
@@ -1888,6 +1901,7 @@ class CodemanApp {
⚙
×
`);
+ _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;