move buttons around

web/src/client/components/full-header.ts

@@ -49,7 +49,7 @@ export class FullHeader extends HeaderBase {
               ></notification-status>
               ${this.renderActionButtons(exitedSessions, runningSessions)}
               <button
-                class="btn-secondary font-mono text-sm px-5 py-2.5"
+                class="btn-secondary font-mono text-sm px-3 sm:px-5 py-2.5"
                 @click=${() => this.dispatchEvent(new CustomEvent('open-file-browser'))}
                 title="Browse Files (⌘O)"
               >
@@ -59,7 +59,7 @@ export class FullHeader extends HeaderBase {
                       d="M1.75 1h5.5c.966 0 1.75.784 1.75 1.75v1h4c.966 0 1.75.784 1.75 1.75v7.75A1.75 1.75 0 0113 15H3a1.75 1.75 0 01-1.75-1.75V2.75C1.25 1.784 1.784 1 1.75 1zM2.75 2.5v10.75c0 .138.112.25.25.25h10a.25.25 0 00.25-.25V5.5a.25.25 0 00-.25-.25H8.75v-2.5a.25.25 0 00-.25-.25h-5.5a.25.25 0 00-.25.25z"
                     />
                   </svg>
-                  Browse
+                  <span class="hidden sm:inline">Browse</span>
                 </span>
               </button>
               <button
@@ -138,6 +138,13 @@ export class FullHeader extends HeaderBase {
                 >
                   ${this.authMethod || 'authenticated'}
                 </div>
+                <button
+                  class="w-full text-left px-3 py-2 text-sm font-mono text-dark-text hover:bg-dark-bg-secondary"
+                  @click=${this.handleOpenSettings}
+                >
+                  Settings
+                </button>
+                <div class="border-t border-dark-border"></div>
                 <button
                   class="w-full text-left px-3 py-2 text-sm font-mono text-status-warning hover:bg-dark-bg-secondary hover:text-status-error"
                   @click=${this.handleLogout}

web/src/client/components/session-list.ts

@@ -385,45 +385,67 @@ export class SessionList extends LitElement {
 
   private renderExitedControls() {
     const exitedSessions = this.sessions.filter((session) => session.status === 'exited');
+    const runningSessions = this.sessions.filter((session) => session.status === 'running');
 
-    if (exitedSessions.length === 0) return '';
+    // If no exited sessions and no running sessions, don't show controls
+    if (exitedSessions.length === 0 && runningSessions.length === 0) return '';
 
     return html`
-      <div class="flex justify-center items-center gap-4 mt-8 pb-4">
+      <div class="flex justify-center items-center gap-2 sm:gap-4 mt-8 pb-4 px-4">
-        <button
+        ${
-          class="font-mono text-sm px-6 py-2 rounded-lg border transition-all duration-200 ${
+          exitedSessions.length > 0
-            this.hideExited
+            ? html`
-              ? 'border-dark-border bg-dark-bg-secondary text-dark-text-muted hover:bg-dark-bg-tertiary hover:text-dark-text'
+              <button
-              : 'border-dark-border bg-dark-bg-tertiary text-dark-text hover:bg-dark-bg-secondary'
+                class="font-mono text-xs sm:text-sm px-3 sm:px-6 py-2 rounded-lg border transition-all duration-200 ${
-          }"
-          @click=${() => this.dispatchEvent(new CustomEvent('hide-exited-change', { detail: !this.hideExited }))}
-        >
-          <div class="flex items-center gap-3">
-            <span>${this.hideExited ? 'Show' : 'Hide'} Exited (${exitedSessions.length})</span>
-            <div
-              class="w-8 h-4 rounded-full transition-colors duration-200 ${
-                this.hideExited ? 'bg-dark-surface' : 'bg-dark-bg'
-              }"
-            >
-              <div
-                class="w-3 h-3 rounded-full transition-transform duration-200 mt-0.5 ${
                   this.hideExited
-                    ? 'translate-x-0.5 bg-dark-text-muted'
+                    ? 'border-dark-border bg-dark-bg-secondary text-dark-text-muted hover:bg-dark-bg-tertiary hover:text-dark-text'
-                    : 'translate-x-4 bg-accent-green'
+                    : 'border-dark-border bg-dark-bg-tertiary text-dark-text hover:bg-dark-bg-secondary'
                 }"
-              ></div>
+                @click=${() => this.dispatchEvent(new CustomEvent('hide-exited-change', { detail: !this.hideExited }))}
-            </div>
+              >
-          </div>
+                <div class="flex items-center gap-2 sm:gap-3">
-        </button>
+                  <span class="hidden sm:inline">${this.hideExited ? 'Show' : 'Hide'} Exited (${exitedSessions.length})</span>
+                  <span class="sm:hidden">${this.hideExited ? 'Show' : 'Hide'} (${exitedSessions.length})</span>
+                  <div
+                    class="w-8 h-4 rounded-full transition-colors duration-200 ${
+                      this.hideExited ? 'bg-dark-surface' : 'bg-dark-bg'
+                    }"
+                  >
+                    <div
+                      class="w-3 h-3 rounded-full transition-transform duration-200 mt-0.5 ${
+                        this.hideExited
+                          ? 'translate-x-0.5 bg-dark-text-muted'
+                          : 'translate-x-4 bg-accent-green'
+                      }"
+                    ></div>
+                  </div>
+                </div>
+              </button>
+            `
+            : ''
+        }
+        ${
+          runningSessions.length > 0
+            ? html`
+              <button
+                class="font-mono text-xs sm:text-sm px-3 sm:px-6 py-2 rounded-lg border transition-all duration-200 border-status-error bg-dark-bg-secondary text-status-error hover:bg-dark-bg-tertiary hover:border-status-error"
+                @click=${() => this.dispatchEvent(new CustomEvent('kill-all-sessions'))}
+              >
+                Kill All (${runningSessions.length})
+              </button>
+            `
+            : ''
+        }
         ${
           !this.hideExited && exitedSessions.length > 0
             ? html`
               <button
-                class="font-mono text-sm px-6 py-2 rounded-lg border transition-all duration-200 border-dark-border bg-dark-bg-secondary text-status-warning hover:bg-dark-bg-tertiary hover:border-status-warning"
+                class="font-mono text-xs sm:text-sm px-3 sm:px-6 py-2 rounded-lg border transition-all duration-200 border-dark-border bg-dark-bg-secondary text-status-warning hover:bg-dark-bg-tertiary hover:border-status-warning"
                 @click=${this.handleCleanupExited}
                 ?disabled=${this.cleaningExited}
               >
-                ${this.cleaningExited ? 'Cleaning...' : `Clean Exited (${exitedSessions.length})`}
+                <span class="hidden sm:inline">${this.cleaningExited ? 'Cleaning...' : `Clean Exited (${exitedSessions.length})`}</span>
+                <span class="sm:hidden">${this.cleaningExited ? 'Cleaning...' : 'Clean'}</span>
               </button>
             `
             : ''