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 <noreply@anthropic.com>

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
 

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",

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();

src/web/public/index.html

@@ -20,6 +20,7 @@
     <header class="header">
       <div class="header-brand">
         <span class="logo" onclick="app.goHome()" title="Go to main page">Claudeman</span>
+        <span class="header-version" id="headerVersion" title="Claudeman version">v0.0.0</span>
       </div>
 
       <!-- Session Tabs -->
@@ -263,47 +264,33 @@
     <!-- Bottom Toolbar -->
     <footer class="toolbar">
       <div class="toolbar-left">
-        <!-- Run Claude -->
+        <!-- Run Claude & Shell -->
         <div class="toolbar-group">
           <button class="btn-toolbar btn-claude" onclick="app.runClaude()" title="Run Claude (Ctrl+Enter)">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="5 3 19 12 5 21 5 3"/></svg>
             Run Claude
           </button>
-          <div class="tab-count-group" title="Instance count">
-            <button class="tab-count-btn" onclick="app.decrementTabCount()">−</button>
-            <input type="number" id="tabCount" class="tab-count-input" value="1" min="1" max="20" readonly>
-            <button class="tab-count-btn" onclick="app.incrementTabCount()">+</button>
-          </div>
           <button class="btn-toolbar btn-shell" onclick="app.runShell()" title="Run Shell">
             Run Shell
           </button>
-          <div class="tab-count-group" title="Instance count">
-            <button class="tab-count-btn" onclick="app.decrementShellCount()">−</button>
-            <input type="number" id="shellCount" class="tab-count-input" value="1" min="1" max="20" readonly>
-            <button class="tab-count-btn" onclick="app.incrementShellCount()">+</button>
-          </div>
-          <div class="case-select-group">
-            <select id="quickStartCase" class="toolbar-select" title="Select case">
-              <option value="testcase">testcase</option>
-            </select>
-            <button class="btn-case-add" onclick="app.showCreateCaseModal()" title="Create new case">+</button>
-          </div>
-        </div>
-
-        <!-- Directory (hidden) -->
-        <div class="toolbar-group" style="display: none;">
-          <button class="btn-toolbar" onclick="app.toggleDirInput()" title="Set working directory">
-            <span id="dirDisplay">No directory</span>
-          </button>
-          <input type="text" id="dirInput" class="toolbar-input hidden" placeholder="Working directory..." onblur="app.hideDirInput()">
         </div>
       </div>
 
       <div class="toolbar-center">
-        <span class="version-display" id="versionDisplay" title="Claudeman version">v0.0.0</span>
+        <!-- Add Case + Case Select -->
+        <div class="toolbar-group toolbar-case-group">
+          <button class="btn-case-add" onclick="app.showCreateCaseModal()" title="Create new case">+</button>
+          <select id="quickStartCase" class="toolbar-select" title="Select case">
+            <option value="testcase">testcase</option>
+          </select>
+        </div>
       </div>
 
       <div class="toolbar-right">
+        <span class="version-display" id="versionDisplay" title="Claudeman version">v0.0.0</span>
+        <!-- Hidden instance counts (preserved for functionality) -->
+        <input type="hidden" id="tabCount" value="1">
+        <input type="hidden" id="shellCount" value="1">
       </div>
     </footer>
 

src/web/public/styles.css

@@ -15,8 +15,8 @@
   --green: #22c55e;
   --yellow: #eab308;
   --red: #ef4444;
-  --header-height: 36px;
+  --header-height: 40px;
-  --toolbar-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;
+  gap: 0.25rem;
-  padding: 0.35rem 0.5rem;
+  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;
+  display: flex;
-  left: 50%;
+  align-items: center;
-  transform: translateX(-50%);
+  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;
+  gap: 0.25rem;
-  padding: 0.4rem 0.75rem;
+  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%);
+  background: var(--bg-input);
-  border-color: #3b82f6;
+  border-color: var(--border-light);
-  color: #e0e7ff;
+  color: var(--text);
   font-weight: 500;
-  padding: 0.4rem 0.85rem;
+  padding: 0.3rem 0.6rem;
-  gap: 0.4rem;
+  gap: 0.3rem;
 }
 
 .btn-toolbar.btn-claude:hover {
-  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
+  background: var(--bg-hover);
-  border-color: #3b82f6;
+  border-color: var(--accent);
-  box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
   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;
+  width: 22px;
-  height: 28px;
+  height: 22px;
   background: var(--bg-input);
   border: 1px solid var(--border);
-  border-left: none;
+  border-right: none;
-  border-radius: 0 4px 4px 0;
+  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;
+    flex: 0 0 auto;
-    justify-content: space-between;
-    width: 100%;
     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;
+    padding: 0 0.75rem !important;
-    background: #2563eb;
+    background: var(--bg-input);
-    border: none;
+    border: 1px solid var(--border-light);
-    color: #fff;
+    color: var(--text);
-    font-weight: 600;
+    font-weight: 500;
-    order: 2; /* Center position */
   }
 
   .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 {