design: reorganize header buttons and move clear to bottom

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

@@ -43,12 +43,17 @@ export class FullHeader extends HeaderBase {
 
           <div class="flex flex-col sm:flex-row gap-3 sm:items-center">
             <div class="flex gap-2 items-center">
+              <notification-status
+                @open-settings=${() =>
+                  this.dispatchEvent(new CustomEvent('open-notification-settings'))}
+              ></notification-status>
+              ${this.renderActionButtons(exitedSessions, runningSessions)}
               <button
-                class="btn-secondary font-mono text-xs px-4 py-2"
+                class="btn-secondary font-mono text-sm px-5 py-2.5"
                 @click=${() => this.dispatchEvent(new CustomEvent('open-file-browser'))}
                 title="Browse Files (⌘O)"
               >
-                <span class="flex items-center gap-1">
+                <span class="flex items-center gap-2">
                   <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                     <path
                       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"
@@ -57,12 +62,8 @@ export class FullHeader extends HeaderBase {
                   Browse
                 </span>
               </button>
-              <notification-status
-                @open-settings=${() =>
-                  this.dispatchEvent(new CustomEvent('open-notification-settings'))}
-              ></notification-status>
               <button
-                class="btn-primary font-mono text-sm px-6 py-2 vt-create-button"
+                class="btn-primary font-mono text-sm px-5 py-2.5 vt-create-button"
                 @click=${this.handleCreateSession}
               >
                 Create Session
@@ -70,65 +71,19 @@ export class FullHeader extends HeaderBase {
               ${this.renderUserMenu()}
             </div>
 
-            <div class="flex flex-col sm:flex-row gap-2 sm:items-center">
-              ${this.renderExitedToggleButton(exitedSessions)}
-              ${this.renderActionButtons(exitedSessions, runningSessions)}
-            </div>
           </div>
         </div>
       </div>
     `;
   }
 
-  private renderExitedToggleButton(exitedSessions: Session[]) {
+  private renderActionButtons(_exitedSessions: Session[], runningSessions: Session[]) {
-    if (exitedSessions.length === 0) return '';
-
     return html`
-      <button
-        class="relative font-mono text-xs px-4 py-2 rounded-lg border transition-all duration-200 ${
-          this.hideExited
-            ? 'border-dark-border bg-dark-bg-tertiary text-dark-text hover:border-accent-green-darker'
-            : 'border-accent-green bg-accent-green text-dark-bg hover:bg-accent-green-darker'
-        }"
-        @click=${this.handleHideExitedToggle}
-      >
-        <div class="flex items-center gap-3">
-          <span>Show Exited (${exitedSessions.length})</span>
-          <div
-            class="w-8 h-4 rounded-full transition-colors duration-200 ${
-              this.hideExited ? 'bg-dark-border' : '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-dark-bg'
-              }"
-            ></div>
-          </div>
-        </div>
-      </button>
-    `;
-  }
-
-  private renderActionButtons(exitedSessions: Session[], runningSessions: Session[]) {
-    return html`
-      ${
-        !this.hideExited && exitedSessions.length > 0
-          ? html`
-            <button
-              class="btn-ghost font-mono text-xs px-4 py-2 text-status-warning"
-              @click=${this.handleCleanExited}
-            >
-              Clean Exited (${exitedSessions.length})
-            </button>
-          `
-          : ''
-      }
       ${
         runningSessions.length > 0 && !this.killingAll
           ? html`
             <button
-              class="btn-ghost font-mono text-xs px-4 py-2 text-status-error"
+              class="btn-secondary font-mono text-sm px-5 py-2.5 text-status-error border-status-error hover:bg-status-error hover:text-dark-bg"
               @click=${this.handleKillAll}
             >
               Kill All (${runningSessions.length})
@@ -139,11 +94,11 @@ export class FullHeader extends HeaderBase {
       ${
         this.killingAll
           ? html`
-            <div class="flex items-center gap-2 px-4 py-2">
+            <div class="flex items-center gap-2 px-5 py-2.5">
               <div
                 class="w-4 h-4 border-2 border-status-error border-t-transparent rounded-full animate-spin"
               ></div>
-              <span class="text-status-error font-mono text-xs">Killing...</span>
+              <span class="text-status-error font-mono text-sm">Killing...</span>
             </div>
           `
           : ''
@@ -157,7 +112,7 @@ export class FullHeader extends HeaderBase {
     return html`
       <div class="user-menu-container relative">
         <button
-          class="btn-ghost font-mono text-xs text-dark-text flex items-center gap-1"
+          class="btn-secondary font-mono text-sm px-5 py-2.5 text-dark-text border-dark-border hover:bg-dark-bg-tertiary hover:border-accent-green flex items-center gap-2"
           @click=${this.toggleUserMenu}
           title="User menu"
         >
@@ -176,15 +131,15 @@ export class FullHeader extends HeaderBase {
           this.showUserMenu
             ? html`
               <div
-                class="absolute right-0 top-full mt-1 bg-dark-surface border border-dark-border rounded shadow-lg py-1 z-50 min-w-32"
+                class="absolute right-0 top-full mt-1 bg-dark-surface border border-dark-border rounded-lg shadow-lg py-1 z-50 min-w-36"
               >
                 <div
-                  class="px-3 py-2 text-xs text-dark-text-muted border-b border-dark-border"
+                  class="px-3 py-2 text-sm text-dark-text-muted border-b border-dark-border"
                 >
                   ${this.authMethod || 'authenticated'}
                 </div>
                 <button
-                  class="w-full text-left px-3 py-2 text-xs font-mono text-status-warning hover:bg-dark-bg-secondary hover:text-status-error"
+                  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}
                 >
                   Logout

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

@@ -377,6 +377,57 @@ export class SessionList extends LitElement {
           @error=${(e: CustomEvent) =>
             this.dispatchEvent(new CustomEvent('error', { detail: e.detail }))}
         ></session-create-form>
+
+        ${this.renderExitedControls()}
+      </div>
+    `;
+  }
+
+  private renderExitedControls() {
+    const exitedSessions = this.sessions.filter((session) => session.status === 'exited');
+
+    if (exitedSessions.length === 0) return '';
+
+    return html`
+      <div class="flex justify-center items-center gap-4 mt-8 pb-4">
+        <button
+          class="font-mono text-sm px-6 py-2 rounded-lg border transition-all duration-200 ${
+            this.hideExited
+              ? 'border-dark-border bg-dark-bg-secondary text-dark-text-muted hover:bg-dark-bg-tertiary hover:text-dark-text'
+              : 'border-dark-border bg-dark-bg-tertiary text-dark-text hover:bg-dark-bg-secondary'
+          }"
+          @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'
+                    : 'translate-x-4 bg-accent-green'
+                }"
+              ></div>
+            </div>
+          </div>
+        </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"
+                @click=${this.handleCleanupExited}
+                ?disabled=${this.cleaningExited}
+              >
+                ${this.cleaningExited ? 'Cleaning...' : `Clean Exited (${exitedSessions.length})`}
+              </button>
+            `
+            : ''
+        }
       </div>
     `;
   }