From 140bf6fdd65e0282d005b1a994bfadc8033782ce Mon Sep 17 00:00:00 2001 From: arkon Date: Sat, 31 Jan 2026 05:48:55 +0100 Subject: [PATCH] fix: bottom toolbar layout - show case selector, gray Run Claude button - Rearranged bottom toolbar: Run Claude + Run Shell left, + case selector center - Made Run Claude button gray instead of blue gradient - Fixed mobile CSS that was hiding toolbar-center with display:none - Reduced toolbar height 20%, increased header height - Tighter session tab styling (smaller padding, font, border-radius) - Added version display to header next to logo Co-Authored-By: Claude Opus 4.5 --- CLAUDE.md | 2 +- package.json | 2 +- src/web/public/app.js | 7 ++- src/web/public/index.html | 39 +++++--------- src/web/public/styles.css | 110 +++++++++++++++++++++----------------- 5 files changed, 83 insertions(+), 77 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index af88a080..b67d9f96 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -16,7 +16,7 @@ When user says "COM": 1. Increment version in BOTH `package.json` AND `CLAUDE.md` 2. Run: `git add -A && git commit -m "chore: bump version to X.XXXX" && git push && npm run build && systemctl --user restart claudeman-web` -**Version**: 0.1445 (must match `package.json`) +**Version**: 0.1446 (must match `package.json`) ## Project Overview diff --git a/package.json b/package.json index 0d69ff50..af5d2956 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "claudeman", - "version": "0.1445", + "version": "0.1446", "description": "The missing control plane for Claude Code - run 20 autonomous agents with real-time monitoring and session persistence", "type": "module", "main": "dist/index.js", diff --git a/src/web/public/app.js b/src/web/public/app.js index ef101dfb..26a0a247 100644 --- a/src/web/public/app.js +++ b/src/web/public/app.js @@ -2503,13 +2503,18 @@ class ClaudemanApp { } handleInit(data) { - // Update version display + // Update version displays (header and toolbar) if (data.version) { const versionEl = this.$('versionDisplay'); + const headerVersionEl = this.$('headerVersion'); if (versionEl) { versionEl.textContent = `v${data.version}`; versionEl.title = `Claudeman v${data.version}`; } + if (headerVersionEl) { + headerVersionEl.textContent = `v${data.version}`; + headerVersionEl.title = `Claudeman v${data.version}`; + } } this.sessions.clear(); diff --git a/src/web/public/index.html b/src/web/public/index.html index 90f0f940..ed36f9e0 100644 --- a/src/web/public/index.html +++ b/src/web/public/index.html @@ -20,6 +20,7 @@
+ v0.0.0
@@ -263,47 +264,33 @@ diff --git a/src/web/public/styles.css b/src/web/public/styles.css index c0f48b23..eea9c6b8 100644 --- a/src/web/public/styles.css +++ b/src/web/public/styles.css @@ -15,8 +15,8 @@ --green: #22c55e; --yellow: #eab308; --red: #ef4444; - --header-height: 36px; - --toolbar-height: 40px; + --header-height: 40px; + --toolbar-height: 32px; /* Session color palette */ --session-red: #ef4444; @@ -200,13 +200,13 @@ body { .session-tab { display: flex; align-items: center; - gap: 0.35rem; - padding: 0.35rem 0.5rem; + gap: 0.25rem; + padding: 0.2rem 0.35rem; background: transparent; border: 1px solid transparent; - border-radius: 4px; + border-radius: 3px; color: var(--text-dim); - font-size: 0.75rem; + font-size: 0.7rem; cursor: pointer; white-space: nowrap; transition: all 0.15s; @@ -1785,22 +1785,30 @@ body { } .toolbar-center { - position: absolute; - left: 50%; - transform: translateX(-50%); + display: flex; + align-items: center; + gap: 0.5rem; } .version-display { font-family: 'SF Mono', Monaco, monospace; - font-size: 0.7rem; + font-size: 0.6rem; color: var(--text-muted); - padding: 0.2rem 0.5rem; + padding: 0.15rem 0.35rem; background: rgba(255, 255, 255, 0.05); - border-radius: 3px; + border-radius: 2px; cursor: default; user-select: none; } +/* Header version display */ +.header-version { + font-family: 'SF Mono', Monaco, monospace; + font-size: 0.6rem; + color: var(--text-muted); + margin-left: 0.5rem; +} + .toolbar-group { display: flex; align-items: center; @@ -1817,13 +1825,13 @@ body { .btn-toolbar { display: flex; align-items: center; - gap: 0.35rem; - padding: 0.4rem 0.75rem; + gap: 0.25rem; + padding: 0.25rem 0.5rem; background: var(--bg-input); border: 1px solid var(--border); - border-radius: 4px; + border-radius: 3px; color: var(--text-dim); - font-size: 0.75rem; + font-size: 0.7rem; cursor: pointer; transition: all 0.15s; white-space: nowrap; @@ -1850,20 +1858,19 @@ body { background: var(--accent-hover); } -/* Claude Button - Special styling (matches welcome-btn-primary) */ +/* Claude Button - Subtle gray styling */ .btn-toolbar.btn-claude { - background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%); - border-color: #3b82f6; - color: #e0e7ff; + background: var(--bg-input); + border-color: var(--border-light); + color: var(--text); font-weight: 500; - padding: 0.4rem 0.85rem; - gap: 0.4rem; + padding: 0.3rem 0.6rem; + gap: 0.3rem; } .btn-toolbar.btn-claude:hover { - background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); - border-color: #3b82f6; - box-shadow: 0 0 12px rgba(59, 130, 246, 0.4); + background: var(--bg-hover); + border-color: var(--accent); color: #fff; } @@ -1942,21 +1949,29 @@ body { align-items: center; } +/* Toolbar case group - center layout */ +.toolbar-case-group { + display: flex; + align-items: center; + gap: 0; +} + .toolbar-select { - padding: 0.4rem 1.5rem 0.4rem 0.5rem; + padding: 0.2rem 1.2rem 0.2rem 0.4rem; background: var(--bg-input); border: 1px solid var(--border); - border-radius: 4px 0 0 4px; + border-radius: 0 3px 3px 0; color: var(--text-dim); - font-size: 0.75rem; + font-size: 0.7rem; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; - background-position: right 0.4rem center; + background-position: right 0.3rem center; width: fit-content; min-width: unset; max-width: unset; + height: 22px; } .toolbar-select:hover { @@ -1972,14 +1987,14 @@ body { display: flex; align-items: center; justify-content: center; - width: 28px; - height: 28px; + width: 22px; + height: 22px; background: var(--bg-input); border: 1px solid var(--border); - border-left: none; - border-radius: 0 4px 4px 0; + border-right: none; + border-radius: 3px 0 0 3px; color: var(--green); - font-size: 1.1rem; + font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.15s; @@ -8101,9 +8116,10 @@ kbd { border-top: 1px solid rgba(255, 255, 255, 0.1); } - /* Hide secondary toolbar groups */ + /* Show case selector in center */ .toolbar-center { - display: none !important; + display: flex !important; + align-items: center; } .toolbar-right { @@ -8115,11 +8131,9 @@ kbd { display: none !important; } - /* Toolbar layout: case selector left, Run Claude center, Shell right */ + /* Toolbar layout */ .toolbar-left { - flex: 1; - justify-content: space-between; - width: 100%; + flex: 0 0 auto; align-items: center; gap: 0.3rem; } @@ -8160,20 +8174,20 @@ kbd { color: #fff; } - /* Primary action button - Run Claude - centered prominent */ + /* Primary action button - Run Claude */ .btn-toolbar.btn-claude { flex: 0 0 auto; - padding: 0 1rem !important; - background: #2563eb; - border: none; - color: #fff; - font-weight: 600; - order: 2; /* Center position */ + padding: 0 0.75rem !important; + background: var(--bg-input); + border: 1px solid var(--border-light); + color: var(--text); + font-weight: 500; } .btn-toolbar.btn-claude:hover, .btn-toolbar.btn-claude:active { - background: #3b82f6; + background: var(--bg-hover); + border-color: var(--accent); } .btn-toolbar.btn-claude svg {