feat: add mobile case picker to toolbar

- Add Case button to mobile toolbar (between Run Claude and Run Shell)
- Add bottom sheet modal for case selection on mobile
- Show current case name on button (truncated)
- Allow creating new cases from mobile picker
- Sync selection with desktop dropdown

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.1472 (must match `package.json` for npm publish)
+**Version**: 0.1473 (must match `package.json` for npm publish)
 
 ## Project Overview
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudeman",
-  "version": "0.1472",
+  "version": "0.1473",
   "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

@@ -6717,19 +6717,23 @@ class ClaudemanApp {
       if (selectCaseName) {
         select.value = selectCaseName;
         this.updateDirDisplayForCase(selectCaseName);
+        this.updateMobileCaseLabel(selectCaseName);
       } else if (lastUsedCase && cases.some(c => c.name === lastUsedCase)) {
         // Use lastUsedCase if available and exists
         select.value = lastUsedCase;
         this.updateDirDisplayForCase(lastUsedCase);
+        this.updateMobileCaseLabel(lastUsedCase);
       } else if (cases.length > 0) {
         // Fallback to testcase or first case
         const firstCase = cases.find(c => c.name === 'testcase') || cases[0];
         select.value = firstCase.name;
         this.updateDirDisplayForCase(firstCase.name);
+        this.updateMobileCaseLabel(firstCase.name);
       } else {
         // No cases exist yet - show the default case name as directory
         select.value = 'testcase';
         document.getElementById('dirDisplay').textContent = '~/claudeman-cases/testcase';
+        this.updateMobileCaseLabel('testcase');
       }
 
       // Only add event listener once (on first load)
@@ -6737,6 +6741,7 @@ class ClaudemanApp {
         select.addEventListener('change', () => {
           this.updateDirDisplayForCase(select.value);
           this.saveLastUsedCase(select.value);
+          this.updateMobileCaseLabel(select.value);
         });
         select.dataset.listenerAdded = 'true';
       }
@@ -13380,6 +13385,90 @@ class ClaudemanApp {
     }
   }
 
+  // ============================================================================
+  // Mobile Case Picker
+  // ============================================================================
+
+  showMobileCasePicker() {
+    const modal = document.getElementById('mobileCasePickerModal');
+    const listContainer = document.getElementById('mobileCaseList');
+    const select = document.getElementById('quickStartCase');
+    const currentCase = select.value;
+
+    // Build case list HTML
+    let html = '';
+    const cases = this.cases || [];
+
+    // Add testcase if not in list
+    const hasTestcase = cases.some(c => c.name === 'testcase');
+    const allCases = hasTestcase ? cases : [{ name: 'testcase' }, ...cases];
+
+    for (const c of allCases) {
+      const isSelected = c.name === currentCase;
+      html += `
+        <button class="mobile-case-item ${isSelected ? 'selected' : ''}"
+                onclick="app.selectMobileCase('${this.escapeHtml(c.name)}')">
+          <span class="mobile-case-item-icon">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
+            </svg>
+          </span>
+          <span class="mobile-case-item-name">${this.escapeHtml(c.name)}</span>
+          <span class="mobile-case-item-check">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+              <polyline points="20 6 9 17 4 12"/>
+            </svg>
+          </span>
+        </button>
+      `;
+    }
+
+    listContainer.innerHTML = html;
+    modal.classList.add('active');
+  }
+
+  closeMobileCasePicker() {
+    document.getElementById('mobileCasePickerModal').classList.remove('active');
+  }
+
+  selectMobileCase(caseName) {
+    // Update the desktop select (source of truth)
+    const select = document.getElementById('quickStartCase');
+    select.value = caseName;
+
+    // Update mobile button label
+    this.updateMobileCaseLabel(caseName);
+
+    // Update directory display
+    this.updateDirDisplayForCase(caseName);
+
+    // Save as last used
+    this.saveLastUsedCase(caseName);
+
+    // Close the picker
+    this.closeMobileCasePicker();
+
+    this.showToast(`Selected: ${caseName}`, 'success');
+  }
+
+  updateMobileCaseLabel(caseName) {
+    const label = document.getElementById('mobileCaseName');
+    if (label) {
+      // Truncate for mobile display
+      const maxLen = 6;
+      label.textContent = caseName.length > maxLen
+        ? caseName.substring(0, maxLen) + '…'
+        : caseName;
+    }
+  }
+
+  showCreateCaseFromMobile() {
+    // Close mobile picker first
+    this.closeMobileCasePicker();
+    // Open the create case modal
+    this.showCreateCaseModal();
+  }
+
   renderScreenSessions() {
     // Debounce renders at 100ms to prevent excessive DOM updates
     if (this.renderScreenSessionsTimeout) {

src/web/public/index.html

@@ -286,6 +286,11 @@
             </select>
             <button class="btn-case-add" onclick="app.showCreateCaseModal()" title="Create new case">+</button>
           </div>
+          <!-- Mobile-only case button -->
+          <button class="btn-toolbar btn-case-mobile" onclick="app.showMobileCasePicker()" title="Select case">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+            <span id="mobileCaseName">Case</span>
+          </button>
         </div>
 
         <!-- Directory (hidden) -->
@@ -1092,6 +1097,28 @@
       </div>
     </div>
 
+    <!-- Mobile Case Picker (Bottom Sheet) -->
+    <div class="modal mobile-case-picker" id="mobileCasePickerModal">
+      <div class="modal-backdrop" onclick="app.closeMobileCasePicker()"></div>
+      <div class="mobile-case-picker-sheet">
+        <div class="mobile-case-picker-header">
+          <h3>Select Case</h3>
+          <button class="modal-close" onclick="app.closeMobileCasePicker()" aria-label="Close case picker">&times;</button>
+        </div>
+        <div class="mobile-case-picker-body">
+          <div class="mobile-case-list" id="mobileCaseList">
+            <!-- Cases populated by JS -->
+          </div>
+        </div>
+        <div class="mobile-case-picker-footer">
+          <button class="btn-toolbar btn-case-create-mobile" onclick="app.showCreateCaseFromMobile()">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+            Create New Case
+          </button>
+        </div>
+      </div>
+    </div>
+
     <!-- Ralph Loop Wizard Modal -->
     <div class="modal" id="ralphWizardModal">
       <div class="modal-backdrop"></div>

src/web/public/styles.css

@@ -1854,6 +1854,31 @@ body {
   color: #a8d8a8;
 }
 
+/* Mobile case button - hidden on desktop, shown on mobile */
+.btn-toolbar.btn-case-mobile {
+  display: none;
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #9ca3af;
+  gap: 4px;
+}
+
+.btn-toolbar.btn-case-mobile:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+
+.btn-toolbar.btn-case-mobile svg {
+  flex-shrink: 0;
+}
+
+.btn-toolbar.btn-case-mobile #mobileCaseName {
+  max-width: 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* Button icon styling */
 .btn-toolbar .btn-icon {
   display: inline-flex;
@@ -2627,6 +2652,148 @@ body {
   max-width: 520px;
 }
 
+/* Mobile Case Picker - Base Styles */
+.mobile-case-picker-sheet {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #1a1a1a;
+  border-radius: 16px 16px 0 0;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  z-index: 1001;
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
+}
+
+.mobile-case-picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.mobile-case-picker-header h3 {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #fff;
+}
+
+.mobile-case-picker-body {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 8px 0;
+  max-height: 50vh;
+}
+
+.mobile-case-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.mobile-case-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 20px;
+  background: transparent;
+  border: none;
+  color: #e5e5e5;
+  font-size: 0.95rem;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.1s;
+  width: 100%;
+}
+
+.mobile-case-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.mobile-case-item:active {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.mobile-case-item.selected {
+  background: rgba(34, 197, 94, 0.15);
+  color: #22c55e;
+}
+
+.mobile-case-item-icon {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+  flex-shrink: 0;
+}
+
+.mobile-case-item.selected .mobile-case-item-icon {
+  color: #22c55e;
+}
+
+.mobile-case-item-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mobile-case-item-check {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #22c55e;
+  opacity: 0;
+  flex-shrink: 0;
+}
+
+.mobile-case-item.selected .mobile-case-item-check {
+  opacity: 1;
+}
+
+.mobile-case-picker-footer {
+  padding: 12px 20px 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.btn-case-create-mobile {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: var(--bg-input);
+  border: 1px solid var(--border-light);
+  border-radius: 8px;
+  color: var(--text);
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn-case-create-mobile:hover {
+  background: var(--bg-hover);
+}
+
+.btn-case-create-mobile:active {
+  background: var(--bg-hover);
+}
+
+.btn-case-create-mobile svg {
+  width: 16px;
+  height: 16px;
+}
+
 /* Fix Plan Modal */
 .fix-plan-modal {
   max-width: 600px;
@@ -8039,12 +8206,12 @@ kbd {
   /* Smaller tabs for mobile */
   .session-tab {
     flex-shrink: 0;
-    min-height: 22px;
+    min-height: 32px;
-    max-height: 22px;
+    max-height: 32px;
-    padding: 0.1rem 0.4rem;
+    padding: 0.35rem 0.5rem;
-    font-size: 0.65rem;
+    font-size: 0.7rem;
-    gap: 0.2rem;
+    gap: 0.25rem;
-    border-radius: 3px;
+    border-radius: 4px;
   }
 
   /* Smaller status indicator on mobile */
@@ -8216,25 +8383,39 @@ kbd {
     display: none !important;
   }
 
-  /* Simplified toolbar layout - just Run Claude and Run Shell */
+  /* Simplified toolbar layout - Run Claude, Shell, and Case */
   .toolbar-left .toolbar-group:first-child {
     width: 100%;
     justify-content: center;
-    gap: 12px;
+    gap: 8px;
   }
 
   .btn-toolbar.btn-claude {
     flex: 0 0 auto;
     min-width: fit-content;
     white-space: nowrap;
-    padding: 0 12px !important;
+    padding: 0 10px !important;
   }
 
   .btn-toolbar.btn-shell {
     flex: 0 0 auto;
     min-width: fit-content;
     white-space: nowrap;
-    padding: 0 12px !important;
+    padding: 0 10px !important;
+  }
+
+  /* Mobile case button - visible on mobile */
+  .btn-toolbar.btn-case-mobile {
+    display: inline-flex !important;
+    flex: 0 0 auto;
+    min-width: fit-content;
+    white-space: nowrap;
+    padding: 0 8px !important;
+    order: 2; /* Between Run Claude and Run Shell */
+  }
+
+  .btn-toolbar.btn-case-mobile #mobileCaseName {
+    max-width: 50px;
   }
 
   /* Keyboard Accessory Bar - quick actions above keyboard */
@@ -8558,6 +8739,36 @@ kbd {
     max-height: 40vh;
     overflow-y: auto;
   }
+
+  /* Mobile Case Picker - Mobile-specific overrides */
+  .mobile-case-picker .modal-backdrop {
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  .mobile-case-picker-sheet {
+    max-height: 60vh;
+    padding-bottom: var(--safe-area-bottom);
+    animation: slideUp 0.2s ease-out;
+  }
+
+  @keyframes slideUp {
+    from {
+      transform: translateY(100%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  .mobile-case-picker-header .modal-close {
+    width: 32px;
+    height: 32px;
+    font-size: 1.5rem;
+  }
+
+  .mobile-case-picker-footer {
+    padding-bottom: calc(12px + var(--safe-area-bottom));
+  }
 }