diff --git a/README.md b/README.md index c8013508..873a74cf 100644 --- a/README.md +++ b/README.md @@ -85,6 +85,7 @@ The Quick Start button will: | `Ctrl+K` | Kill all sessions | | `Ctrl+L` | Clear terminal | | `Ctrl+1/2/3` | Switch tabs (Run/Cases/Settings) | +| `Ctrl++/-` | Increase/decrease font size | | `Escape` | Close modals | ### CLI Usage diff --git a/src/web/public/app.js b/src/web/public/app.js index ece7adc9..0444ae07 100644 --- a/src/web/public/app.js +++ b/src/web/public/app.js @@ -39,6 +39,7 @@ class ClaudemanApp { init() { this.initTerminal(); + this.loadFontSize(); this.connectSSE(); this.loadState(); this.loadCases(); @@ -98,6 +99,7 @@ class ClaudemanApp { this.terminal.writeln('╠═══════════════════════════════════════════════════════════════╣'); this.terminal.writeln('║ \x1b[0;90mCtrl+Enter\x1b[1;36m Quick Start \x1b[0;90mCtrl+K\x1b[1;36m Kill All Sessions ║'); this.terminal.writeln('║ \x1b[0;90mCtrl+L\x1b[1;36m Clear Terminal \x1b[0;90mCtrl+1/2/3\x1b[1;36m Switch Tabs ║'); + this.terminal.writeln('║ \x1b[0;90mCtrl++/-\x1b[1;36m Font Size \x1b[0;90mEscape\x1b[1;36m Close Modals ║'); this.terminal.writeln('╚═══════════════════════════════════════════════════════════════╝\x1b[0m'); this.terminal.writeln(''); @@ -189,6 +191,16 @@ class ClaudemanApp { e.preventDefault(); this.switchTab('settings'); } + + // Ctrl/Cmd + +/- for font size + if ((e.ctrlKey || e.metaKey) && (e.key === '=' || e.key === '+')) { + e.preventDefault(); + this.increaseFontSize(); + } + if ((e.ctrlKey || e.metaKey) && e.key === '-') { + e.preventDefault(); + this.decreaseFontSize(); + } }); } @@ -959,6 +971,39 @@ class ClaudemanApp { this.terminal.writeln('\x1b[90mTerminal cleared\x1b[0m'); } + // Font size controls + increaseFontSize() { + const current = this.terminal.options.fontSize || 14; + const newSize = Math.min(current + 2, 24); + this.setFontSize(newSize); + } + + decreaseFontSize() { + const current = this.terminal.options.fontSize || 14; + const newSize = Math.max(current - 2, 10); + this.setFontSize(newSize); + } + + setFontSize(size) { + this.terminal.options.fontSize = size; + document.getElementById('fontSizeDisplay').textContent = `${size}px`; + this.fitAddon.fit(); + + // Save preference + localStorage.setItem('claudeman-font-size', size); + } + + loadFontSize() { + const saved = localStorage.getItem('claudeman-font-size'); + if (saved) { + const size = parseInt(saved, 10); + if (size >= 10 && size <= 24) { + this.terminal.options.fontSize = size; + document.getElementById('fontSizeDisplay').textContent = `${size}px`; + } + } + } + // Timer showTimer() { document.getElementById('timerBanner').style.display = 'block'; @@ -1010,6 +1055,8 @@ class ClaudemanApp { startTimerUpdates() { setInterval(() => this.updateTimer(), 1000); + // Also update session durations every 30 seconds + setInterval(() => this.renderSessions(), 30000); } formatTime(ms) { @@ -1078,8 +1125,15 @@ class ClaudemanApp { (terminalSize / bufferStats.maxTerminalBuffer * 100) : 0; const memoryClass = memoryPercent > 80 ? 'high' : memoryPercent > 50 ? 'medium' : 'low'; + // Session duration + const duration = this.formatDuration(Date.now() - s.createdAt); + const resourceHtml = `