labgate 0.5.33 → 0.5.35

package/dist/lib/ui.html

@@ -1462,6 +1462,31 @@
       font-family: 'GeistMono', monospace;
     }
 
+    .ui-update-row-actions {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .ui-update-row-actions .settings-info-value {
+      flex: 1 1 220px;
+      min-width: 0;
+      margin: 0;
+    }
+
+    .ui-update-status.warning {
+      color: #92400e;
+    }
+
+    .ui-update-status.error {
+      color: #b91c1c;
+    }
+
+    .ui-update-status.success {
+      color: #166534;
+    }
+
     /* ── Terminal compact footer ──────────────────── */
     .terminal-compact-footer {
       display: flex;
@@ -4745,26 +4770,153 @@
       flex-direction: column;
       align-items: flex-start;
     }
-    .sidebar-section-body .slurm-summary {
-      gap: 6px;
+    /* ── Compact SLURM sidebar ── */
+    .slurm-compact-toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      margin-bottom: 8px;
     }
-    .sidebar-section-body .slurm-stat {
-      padding: 8px 12px;
-      min-width: 60px;
+    .slurm-scope-toggle {
+      display: inline-flex;
+      border: 1px solid var(--border-color);
+      border-radius: 6px;
+      background: var(--bg-secondary);
+      padding: 2px;
+      gap: 1px;
     }
-    .sidebar-section-body .slurm-stat-value {
-      font-size: 20px;
+    .slurm-scope-btn {
+      border: none;
+      border-radius: 4px;
+      background: transparent;
+      color: var(--text-muted);
+      font-family: 'GeistMono', monospace;
+      font-size: 0.625rem;
+      font-weight: 600;
+      padding: 3px 8px;
+      cursor: pointer;
+      transition: background 0.15s, color 0.15s;
+    }
+    .slurm-scope-btn:hover { color: var(--text-primary); }
+    .slurm-scope-btn.active {
+      background: var(--card-bg);
+      color: var(--text-primary);
+      box-shadow: 0 1px 2px rgba(0,0,0,0.06);
+    }
+    .slurm-compact-stats {
+      display: flex;
+      gap: 8px;
     }
-    .sidebar-section-body .slurm-filters {
+    .slurm-mini-stat {
+      font-family: 'GeistMono', monospace;
+      font-size: 0.625rem;
+      color: var(--text-muted);
+    }
+    .slurm-mini-stat span { font-weight: 600; }
+    .slurm-mini-pending span { color: #f59e0b; }
+    .slurm-mini-running span { color: #16a34a; }
+    .slurm-compact-filters {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 8px;
+    }
+    .slurm-compact-filters select,
+    .slurm-compact-filters input {
+      flex: 1;
+      padding: 4px 8px;
+      border: 1px solid var(--border-color);
+      border-radius: 6px;
+      background: var(--bg-secondary);
+      font-family: 'GeistMono', monospace;
+      font-size: 0.6875rem;
+      color: var(--text-primary);
+    }
+    .slurm-compact-filters select { flex: 0 0 auto; min-width: 90px; }
+
+    /* ── SLURM job cards ── */
+    .slurm-job-grid {
+      display: flex;
       flex-direction: column;
+      gap: 2px;
+    }
+    .slurm-job-card {
+      padding: 7px 8px;
+      border-radius: 6px;
+      background: transparent;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+    .slurm-job-card:hover { background: var(--bg-secondary); }
+    .slurm-job-card-row {
+      display: flex;
+      align-items: center;
       gap: 6px;
     }
-    .sidebar-section-body .slurm-filters input[type="text"] {
-      max-width: unset;
+    .slurm-job-id {
+      font-family: 'GeistMono', monospace;
+      font-size: 0.8125rem;
+      font-weight: 600;
+      color: var(--text-primary);
+      white-space: nowrap;
     }
-    .sidebar-section-body .card {
-      overflow-x: auto;
+    .slurm-job-name {
+      font-size: 0.75rem;
+      color: var(--text-secondary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
+      min-width: 0;
     }
+    .slurm-job-state {
+      display: inline-block;
+      padding: 1px 6px;
+      border-radius: 3px;
+      font-family: 'GeistMono', monospace;
+      font-size: 0.5625rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.03em;
+      white-space: nowrap;
+    }
+    .slurm-job-state-PENDING { background: rgba(245,158,11,0.12); color: #b45309; }
+    .slurm-job-state-RUNNING { background: rgba(22,163,74,0.12); color: #15803d; }
+    .slurm-job-state-COMPLETED { background: rgba(96,165,250,0.12); color: #2563eb; }
+    .slurm-job-state-FAILED { background: rgba(220,38,38,0.12); color: #dc2626; }
+    .slurm-job-state-CANCELLED { background: rgba(156,163,175,0.12); color: #6b7280; }
+    .slurm-job-state-TIMEOUT { background: rgba(168,85,247,0.12); color: #7c3aed; }
+    .slurm-job-meta {
+      font-family: 'GeistMono', monospace;
+      font-size: 0.625rem;
+      color: var(--text-muted);
+      margin-top: 2px;
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+    .slurm-job-actions {
+      display: flex;
+      gap: 4px;
+      margin-left: auto;
+    }
+    .slurm-job-action-btn {
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      font-family: 'GeistMono', monospace;
+      font-size: 0.5625rem;
+      color: var(--text-muted);
+      padding: 1px 4px;
+      border-radius: 3px;
+      transition: background 0.15s, color 0.15s;
+    }
+    .slurm-job-action-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }
+    .slurm-job-action-btn.danger { color: #dc2626; }
+    .slurm-job-action-btn.danger:hover { background: rgba(220,38,38,0.08); }
+
+    .sidebar-section-body .slurm-summary { display: none; }
+    .sidebar-section-body .card { overflow-x: auto; }
     /* ── Enterprise: locked fields ─────────────── */
     .field-locked label::before { content: '\1F512 '; font-size: 0.75em; }
     .field-locked input, .field-locked select, .field-locked textarea {
@@ -5221,9 +5373,6 @@
       background: var(--card-bg);
       border-color: var(--border-color);
     }
-    .terminal-chat-msg.assistant {
-      margin-right: auto;
-    }
     .terminal-chat-msg.error {
       border-color: #fecaca;
       background: #fef2f2;
@@ -5273,131 +5422,157 @@
       font-size: inherit;
       color: inherit;
     }
-    .terminal-chat-msg.pending .terminal-chat-msg-header::after {
-      content: '';
-      display: inline-block;
-      width: 6px;
-      height: 6px;
-      margin-left: 6px;
-      border-radius: 50%;
-      background: var(--accent);
-      animation: chatPulse 1.4s ease-in-out infinite;
-      vertical-align: middle;
-    }
     @keyframes chatPulse {
       0%, 100% { opacity: 0.25; transform: scale(0.85); }
       50% { opacity: 1; transform: scale(1); }
     }
 
-    /* ── Tool use cards (inline in chat transcript) ── */
-    .terminal-chat-tool {
-      display: flex;
-      align-items: center;
-      gap: 7px;
-      max-width: min(600px, 90%);
+    /* ── Claude Turn Container ── */
+    .claude-turn {
+      max-width: min(820px, 100%);
       margin-right: auto;
-      padding: 4px 10px;
-      border-radius: 6px;
-      background: transparent;
-      font-family: 'GeistMono', monospace;
-      font-size: 0.6875rem;
-      color: var(--text-secondary);
-      transition: opacity 0.2s;
-      border-left: 2px solid var(--border-color);
+      border-radius: 10px;
+      border: 1px solid var(--border-color);
+      background: var(--card-bg);
+      overflow: hidden;
       flex-shrink: 0;
     }
-    .terminal-chat-tool + .terminal-chat-tool {
-      margin-top: -6px;
-    }
-    .terminal-chat-tool .tool-icon {
-      flex-shrink: 0;
-      font-size: 0.625rem;
-      width: 14px;
-      text-align: center;
+    .claude-turn.error {
+      border-color: #fecaca;
+      background: #fef2f2;
     }
-    .terminal-chat-tool .tool-name {
+    .claude-turn-header {
+      padding: 5px 10px;
       font-family: 'GeistPixelSquare', monospace;
       font-size: 0.5625rem;
+      letter-spacing: 0.05em;
       font-weight: 600;
       text-transform: uppercase;
-      letter-spacing: 0.04em;
-      color: var(--text-secondary);
-      white-space: nowrap;
-    }
-    .terminal-chat-tool .tool-detail {
       color: var(--text-muted);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .terminal-chat-tool.pending {
-      border-left-color: var(--accent);
     }
-    .terminal-chat-tool.pending .tool-icon {
+    .claude-turn.pending .claude-turn-header::after {
+      content: '';
       display: inline-block;
       width: 6px;
       height: 6px;
+      margin-left: 6px;
       border-radius: 50%;
       background: var(--accent);
       animation: chatPulse 1.4s ease-in-out infinite;
-      font-size: 0;
-      line-height: 0;
+      vertical-align: middle;
     }
-    .terminal-chat-tool.done {
-      border-left-color: #16a34a;
+    .claude-turn-body {
+      padding: 0 12px 10px;
     }
-    .terminal-chat-tool.done .tool-icon {
-      color: #16a34a;
+
+    /* ── Text segments inside a turn ── */
+    .claude-turn-text {
+      font-family: 'GeistMono', monospace;
+      font-size: 0.8rem;
+      line-height: 1.55;
+      color: var(--text-primary);
+      white-space: pre-wrap;
+      word-break: break-word;
     }
-    .terminal-chat-tool.error {
-      border-left-color: #dc2626;
+    .claude-turn-text + .claude-turn-text,
+    .claude-turn-tools + .claude-turn-text {
+      margin-top: 8px;
     }
-    .terminal-chat-tool.error .tool-icon {
-      color: #dc2626;
+    .claude-turn-text code {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border-color);
+      border-radius: 4px;
+      padding: 1px 4px;
+      font-size: 0.75rem;
+    }
+    .claude-turn-text pre {
+      background: #1e1e2e;
+      color: #cdd6f4;
+      border-radius: 6px;
+      padding: 10px 12px;
+      margin: 6px 0;
+      overflow-x: auto;
+      font-size: 0.75rem;
+      line-height: 1.5;
+    }
+    .claude-turn-text pre code {
+      background: none;
+      border: none;
+      padding: 0;
+      font-size: inherit;
+      color: inherit;
     }
 
-    /* ── Collapsible tool groups ── */
-    .terminal-chat-tool-group {
+    /* ── Tool chips (inline in turn) ── */
+    .claude-turn-tools {
       display: flex;
-      flex-direction: column;
-      gap: 0;
-      flex-shrink: 0;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin: 8px 0;
+      align-items: center;
+    }
+    .tool-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 8px;
+      border-radius: 4px;
+      background: var(--bg-secondary);
+      font-family: 'GeistMono', monospace;
+      font-size: 0.6875rem;
+      color: var(--text-secondary);
+      cursor: default;
+      white-space: nowrap;
+      border: 1px solid transparent;
+      transition: background 0.15s, border-color 0.15s;
     }
-    .terminal-chat-tool-group .terminal-chat-tool + .terminal-chat-tool {
-      margin-top: -6px;
+    .tool-chip:hover {
+      background: var(--accent-light);
+      border-color: var(--border-color);
     }
-    .terminal-chat-tool-group .tool-group-collapsed {
-      display: none;
+    .tool-chip-icon {
+      font-size: 0.625rem;
+      flex-shrink: 0;
+      width: 12px;
+      text-align: center;
     }
-    .terminal-chat-tool-group.expanded .tool-group-collapsed {
-      display: flex;
+    .tool-chip.done .tool-chip-icon { color: #16a34a; }
+    .tool-chip.error .tool-chip-icon { color: #dc2626; }
+    .tool-chip.pending .tool-chip-icon {
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--accent);
+      animation: chatPulse 1.4s ease-in-out infinite;
+      font-size: 0;
+      line-height: 0;
     }
-    .tool-group-toggle {
-      display: flex;
+    .tool-chip-label { font-weight: 500; }
+
+    /* Collapsed chips */
+    .tool-chip.tool-chip-collapsed { display: none; }
+    .claude-turn-tools.expanded .tool-chip.tool-chip-collapsed { display: inline-flex; }
+
+    /* Toggle button for collapsed chips */
+    .tool-chips-toggle {
+      display: inline-flex;
       align-items: center;
-      gap: 6px;
-      padding: 2px 10px;
-      margin-bottom: 2px;
-      border: none;
+      padding: 2px 8px;
+      border: 1px solid var(--border-color);
+      border-radius: 4px;
       background: transparent;
       cursor: pointer;
       font-family: 'GeistMono', monospace;
       font-size: 0.625rem;
       color: var(--text-muted);
-      border-left: 2px solid var(--border-color);
-      transition: color 0.15s;
+      transition: color 0.15s, background 0.15s;
     }
-    .tool-group-toggle:hover {
+    .tool-chips-toggle:hover {
       color: var(--text-secondary);
+      background: var(--accent-light);
     }
-    .tool-group-toggle .toggle-caret {
-      display: inline-block;
-      transition: transform 0.15s;
-      font-size: 0.5rem;
-    }
-    .terminal-chat-tool-group.expanded .tool-group-toggle .toggle-caret {
-      transform: rotate(90deg);
-    }
+    .claude-turn-tools.expanded .tool-chips-toggle { display: none; }
 
     /* ── Rich content widgets (inline in chat transcript) ── */
     .terminal-chat-widget {
@@ -5956,10 +6131,6 @@
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
       <span>Settings</span>
     </button>
-    <button class="left-sidebar-footer-item" id="explorerModeToggleBtn" onclick="toggleExplorerDevMode()" title="Toggle Solution Explorer mode">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v12"/><path d="M18 9v12"/><path d="M6 7c0 2.5 3 2.5 6 5s6 2.5 6 5"/><circle cx="6" cy="3" r="2"/><circle cx="18" cy="9" r="2"/><circle cx="18" cy="21" r="2"/></svg>
-      <span id="explorerModeToggleLabel">Explorer: Off</span>
-    </button>
     <!-- Hidden buttons to preserve JS getElementById references -->
     <button id="notifyToggleBtn" onclick="toggleNotify()" aria-label="Toggle desktop notifications" aria-pressed="false" style="display:none"></button>
     <button id="sidebarToggleBtn" onclick="toggleSidebar()" style="display:none"></button>
@@ -6048,7 +6219,6 @@
       <div class="terminal-input-toolbar">
         <div class="terminal-input-mode-toggle">
           <button class="terminal-input-mode-btn" id="terminalInputModeChatBtn" type="button" onclick="setTerminalInputMode('chat', { focus: true })">Chat</button>
-          <button class="terminal-input-mode-btn active" id="terminalInputModeRawBtn" type="button" onclick="setTerminalInputMode('raw', { focus: true })">Raw</button>
         </div>
       </div>
       <textarea id="terminalChatInput" class="terminal-input-chat" placeholder="Type command or prompt. Enter sends, Shift+Enter inserts newline." onkeydown="handleTerminalChatInputKeydown(event)" spellcheck="false"></textarea>
@@ -6114,14 +6284,17 @@
           </div>
         </div>
         <div id="jobsSlurmContent" style="display:none">
-          <div class="slurm-summary" id="slurmSummary">
-            <div class="slurm-stat slurm-stat-pending"><span class="slurm-stat-value" id="slurmPending">0</span><span class="slurm-stat-label">Pending</span></div>
-            <div class="slurm-stat slurm-stat-running"><span class="slurm-stat-value" id="slurmRunning">0</span><span class="slurm-stat-label">Running</span></div>
-            <div class="slurm-stat slurm-stat-completed"><span class="slurm-stat-value" id="slurmCompleted">0</span><span class="slurm-stat-label">Completed</span></div>
-            <div class="slurm-stat slurm-stat-failed"><span class="slurm-stat-value" id="slurmFailed">0</span><span class="slurm-stat-label">Failed</span></div>
-            <div class="slurm-stat slurm-stat-other"><span class="slurm-stat-value" id="slurmOther">0</span><span class="slurm-stat-label">Other</span></div>
+          <div class="slurm-compact-toolbar">
+            <div class="slurm-scope-toggle">
+              <button class="slurm-scope-btn active" id="slurmScopeMine" type="button" onclick="setSlurmScope('mine')">My session</button>
+              <button class="slurm-scope-btn" id="slurmScopeAll" type="button" onclick="setSlurmScope('all')">All jobs</button>
+            </div>
+            <div class="slurm-compact-stats">
+              <span class="slurm-mini-stat slurm-mini-pending" title="Pending"><span id="slurmPending">0</span> pending</span>
+              <span class="slurm-mini-stat slurm-mini-running" title="Running"><span id="slurmRunning">0</span> running</span>
+            </div>
           </div>
-          <div class="slurm-filters">
+          <div class="slurm-compact-filters">
             <select id="slurmStateFilter" onchange="loadSlurmJobs()">
               <option value="">All states</option>
               <option value="PENDING">Pending</option>
@@ -6132,11 +6305,12 @@
               <option value="TIMEOUT">Timeout</option>
             </select>
             <input type="text" id="slurmSearch" placeholder="Search..." oninput="debounceSlurmSearch()">
-            <button class="refresh-btn" onclick="loadSlurmJobs()">Refresh</button>
-          </div>
-          <div class="card">
-            <div id="slurmJobsContent"><div class="empty-state">Loading SLURM jobs...</div></div>
           </div>
+          <div id="slurmJobsContent"><div class="empty-state" style="padding:12px">Loading...</div></div>
+          <!-- hidden stats for backward compat -->
+          <span id="slurmCompleted" style="display:none">0</span>
+          <span id="slurmFailed" style="display:none">0</span>
+          <span id="slurmOther" style="display:none">0</span>
         </div>
       </div>
     </div>
@@ -6360,6 +6534,18 @@
         <h3>Session Info</h3>
         <p class="card-description">Reference metadata for this LabGate UI session.</p>
         <div class="settings-info-list">
+          <div class="settings-info-row">
+            <span class="settings-info-label">LabGate Version</span>
+            <code class="settings-info-value" id="labgateVersionValue">Loading...</code>
+          </div>
+          <div class="settings-info-row">
+            <span class="settings-info-label">UI Update</span>
+            <div class="ui-update-row-actions">
+              <code class="settings-info-value ui-update-status" id="uiUpdateStatusValue">Checking...</code>
+              <button type="button" class="agent-update-btn" id="uiUpdateCheckBtn" onclick="checkUiVersion(true)">Search for Update</button>
+              <button type="button" class="agent-update-btn" id="uiUpdateApplyBtn" style="display:none" onclick="startUiUpdate()">Update</button>
+            </div>
+          </div>
           <div class="settings-info-row">
             <span class="settings-info-label">Config JSON Path</span>
             <code class="settings-info-value" id="configPathValue">Loading...</code>
@@ -6375,6 +6561,13 @@
             <span>Enable headless chat mode</span>
           </label>
         </div>
+        <div class="field" style="margin-top: 12px">
+          <label class="toggle-row" style="display:flex;align-items:center;gap:10px;cursor:pointer">
+            <input type="checkbox" id="headlessAllowedPermissions" onchange="collectConfig();markDirty();">
+            <span>Run Claude headless with allowed permissions</span>
+          </label>
+          <p class="card-description" style="margin-top:6px">Adds <code>--dangerously-skip-permissions</code> to Claude headless runs so tools can execute without interactive approval prompts.</p>
+        </div>
       </div>
     </div>
 
@@ -6713,6 +6906,8 @@ var LABGATE_WRITE_TOKEN = '__LABGATE_WRITE_TOKEN__';
 var mcpAutoRefreshTimer = null;
 var mcpAutoRegisterInFlight = false;
 var MCP_AUTO_REFRESH_MS = 12000;
+var uiUpdateInProgress = false;
+var uiUpdateStatusPollTimer = null;
 var resultsCache = [];
 var resultEditorId = null;
 var resultsHasPendingRefresh = false;
@@ -7012,8 +7207,13 @@ function getWebTerminalSessionRuntime(session) {
 function toggleHeadlessEnabled(enabled) {
   webTerm.headlessEnabled = !!enabled;
   try { localStorage.setItem('labgate_headless_enabled', enabled ? '1' : '0'); } catch(e) {}
-  if (!enabled && webTerm.inputMode === 'chat') {
+  if (enabled) {
+    setTerminalInputMode('chat', { focus: false });
+    return;
+  }
+  if (webTerm.inputMode === 'chat') {
     setTerminalInputMode('raw', { focus: false });
+    return;
   }
   updateTerminalInputModeUi();
   updateTerminalInputAvailability();
@@ -7095,6 +7295,19 @@ function updateHeadlessTranscriptMessage(sessionId, messageId, patch) {
   renderTerminalChatTranscript();
 }
 
+function shortenToolName(raw) {
+  var name = String(raw || 'tool');
+  // Strip MCP prefix: "mcp__server-name__tool_name" or "MCP__SERVER__TOOL"
+  name = name.replace(/^mcp__[^_]+(?:[-][^_]+)*__/i, '');
+  // Strip remaining double-underscore prefixed segments
+  name = name.replace(/^[A-Za-z0-9_-]+__/, '');
+  // Replace underscores with spaces
+  name = name.replace(/_/g, ' ');
+  // Title case
+  name = name.replace(/\b\w/g, function(c) { return c.toUpperCase(); });
+  return name.trim() || 'Tool';
+}
+
 function renderTerminalChatTranscript() {
   var el = document.getElementById('terminalChatTranscript');
   if (!el) return;
@@ -7125,87 +7338,143 @@ function renderTerminalChatTranscript() {
     el.innerHTML = '<div class="terminal-chat-empty"><strong style="color:var(--accent)">Beta</strong> &mdash; Claude headless chat is ready. This feature is experimental and under active development. Your prompts and responses will appear here.</div>';
     return;
   }
-  // Group consecutive tool entries for collapsible rendering
-  var groups = [];
-  var currentToolGroup = [];
+  // Build turn-based grouping: merge consecutive assistant/tool/widget entries
+  // into a single "Claude turn" between user messages
+  var turns = [];
+  var currentTurn = null;
+  var currentToolBatch = [];
+
+  function _flushToolBatch() {
+    if (currentToolBatch.length > 0) {
+      if (!currentTurn) currentTurn = { type: 'claude-turn', segments: [] };
+      currentTurn.segments.push({ kind: 'tools', items: currentToolBatch.slice() });
+      currentToolBatch = [];
+    }
+  }
+  function _flushTurn() {
+    _flushToolBatch();
+    if (currentTurn && currentTurn.segments.length > 0) {
+      turns.push(currentTurn);
+    }
+    currentTurn = null;
+  }
+
   for (var ti = 0; ti < transcript.length; ti++) {
     var entry = transcript[ti];
     var role = String(entry.role || 'assistant');
-    if (role === 'tool') {
-      currentToolGroup.push(entry);
+    if (role === 'user') {
+      _flushTurn();
+      turns.push({ type: 'user', entry: entry });
+    } else if (role === 'tool') {
+      if (!currentTurn) currentTurn = { type: 'claude-turn', segments: [] };
+      currentToolBatch.push(entry);
+    } else if (role === 'widget') {
+      _flushToolBatch();
+      if (!currentTurn) currentTurn = { type: 'claude-turn', segments: [] };
+      currentTurn.segments.push({ kind: 'widget', entry: entry });
     } else {
-      if (currentToolGroup.length) {
-        groups.push({ type: 'tools', items: currentToolGroup });
-        currentToolGroup = [];
+      // assistant or system
+      _flushToolBatch();
+      if (!currentTurn) currentTurn = { type: 'claude-turn', segments: [] };
+      currentTurn.segments.push({ kind: 'text', entry: entry });
+    }
+  }
+  _flushTurn();
+
+  var html = turns.map(function(turn, turnIdx) {
+    // User message — unchanged
+    if (turn.type === 'user') {
+      var ue = turn.entry;
+      var uClasses = ['terminal-chat-msg', 'user'];
+      if (ue.pending) uClasses.push('pending');
+      if (ue.error) uClasses.push('error');
+      return '<div class="' + uClasses.join(' ') + '">'
+        + '<div class="terminal-chat-msg-header">You</div>'
+        + '<div class="terminal-chat-msg-body">' + renderChatMarkdown(String(ue.text || '')) + '</div>'
+        + '</div>';
+    }
+
+    // Claude turn — merge all segments into one card
+    var segments = turn.segments;
+    var hasVisibleContent = false;
+    var turnPending = false;
+    var turnError = false;
+    for (var si = 0; si < segments.length; si++) {
+      var seg = segments[si];
+      if (seg.kind === 'tools' && seg.items.length > 0) hasVisibleContent = true;
+      if (seg.kind === 'widget') hasVisibleContent = true;
+      if (seg.kind === 'text') {
+        if (String(seg.entry.text || '').trim()) hasVisibleContent = true;
+        if (seg.entry.pending) turnPending = true;
+        if (seg.entry.error) turnError = true;
       }
-      groups.push({ type: 'entry', entry: entry });
-    }
-  }
-  if (currentToolGroup.length) {
-    groups.push({ type: 'tools', items: currentToolGroup });
-  }
-
-  var html = groups.map(function(group, gi) {
-    if (group.type === 'tools') {
-      var items = group.items;
-      var VISIBLE_COUNT = 2;
-      var needsCollapse = items.length > VISIBLE_COUNT + 1;
-      var renderToolDiv = function(e) {
-        var toolClasses = ['terminal-chat-tool'];
-        if (e.toolDone) toolClasses.push('done');
-        else if (e.toolError) toolClasses.push('error');
-        else toolClasses.push('pending');
-        var icon = e.toolDone ? '\u2713' : e.toolError ? '\u2717' : '\u26a1';
-        return '<div class="' + toolClasses.join(' ') + '">'
-          + '<span class="tool-icon">' + icon + '</span>'
-          + '<span class="tool-name">' + escapeHtml(String(e.toolName || 'tool')) + '</span>'
-          + (e.toolDetail ? '<span class="tool-detail">' + escapeHtml(String(e.toolDetail)) + '</span>' : '')
-          + '</div>';
-      };
-      if (!needsCollapse) {
-        return items.map(renderToolDiv).join('');
+    }
+    // Skip empty pending turns (no text, no tools, no widgets yet)
+    if (!hasVisibleContent && turnPending) return '';
+
+    var turnClasses = ['claude-turn'];
+    if (turnPending) turnClasses.push('pending');
+    if (turnError) turnClasses.push('error');
+
+    var out = '<div class="' + turnClasses.join(' ') + '">';
+    out += '<div class="claude-turn-header">Claude</div>';
+    out += '<div class="claude-turn-body">';
+
+    for (var si2 = 0; si2 < segments.length; si2++) {
+      var seg2 = segments[si2];
+
+      if (seg2.kind === 'text') {
+        var text = String(seg2.entry.text || '').trim();
+        if (!text) continue;
+        out += '<div class="claude-turn-text">' + renderChatMarkdown(text) + '</div>';
       }
-      var hiddenCount = items.length - VISIBLE_COUNT;
-      var groupId = 'tool-group-' + gi;
-      var out = '<div class="terminal-chat-tool-group" id="' + groupId + '">';
-      out += '<button type="button" class="tool-group-toggle" onclick="var g=document.getElementById(\'' + groupId + '\');g.classList.toggle(\'expanded\');this.querySelector(\'.toggle-label\').textContent=g.classList.contains(\'expanded\')?\'\u25BE Hide '+hiddenCount+' tool calls\':\'\u25B8 '+hiddenCount+' more tool calls\';this.querySelector(\'.toggle-caret\').textContent=g.classList.contains(\'expanded\')?\'\u25BE\':\'\u25B8\'">'
-        + '<span class="toggle-caret">\u25B8</span>'
-        + '<span class="toggle-label">' + hiddenCount + ' more tool calls</span>'
-        + '</button>';
-      for (var hi = 0; hi < items.length - VISIBLE_COUNT; hi++) {
-        out += renderToolDiv(items[hi]).replace('class="terminal-chat-tool', 'class="terminal-chat-tool tool-group-collapsed');
+
+      else if (seg2.kind === 'widget') {
+        var wEntry = seg2.entry;
+        var widgetId = 'widget-' + wEntry.id;
+        out += '<div class="terminal-chat-widget" id="' + widgetId + '" style="margin:8px 0">';
+        if (wEntry.widgetTitle) {
+          out += '<div class="widget-title">' + escapeHtml(String(wEntry.widgetTitle)) + '</div>';
+        }
+        out += '<div class="widget-body" data-widget-type="' + escapeHtml(String(wEntry.widget || 'markdown')) + '" data-entry-id="' + escapeHtml(wEntry.id) + '">';
+        out += '<div class="widget-placeholder">Loading widget...</div>';
+        out += '</div></div>';
       }
-      for (var vi = items.length - VISIBLE_COUNT; vi < items.length; vi++) {
-        out += renderToolDiv(items[vi]);
+
+      else if (seg2.kind === 'tools') {
+        var items = seg2.items;
+        var VISIBLE = 1;
+        var needsCollapse = items.length > VISIBLE + 1;
+        var toolGroupId = 'tchips-' + turnIdx + '-' + si2;
+
+        out += '<div class="claude-turn-tools" id="' + toolGroupId + '">';
+        // Toggle button first (before collapsed chips)
+        if (needsCollapse) {
+          var hiddenN = items.length - VISIBLE;
+          out += '<button type="button" class="tool-chips-toggle" onclick="var g=document.getElementById(\'' + toolGroupId + '\');g.classList.toggle(\'expanded\')">+' + hiddenN + ' more</button>';
+        }
+        for (var tci = 0; tci < items.length; tci++) {
+          var te = items[tci];
+          var chipClass = 'tool-chip';
+          if (te.toolDone) chipClass += ' done';
+          else if (te.toolError) chipClass += ' error';
+          else chipClass += ' pending';
+          // Hide earlier chips, keep last VISIBLE always visible
+          if (needsCollapse && tci < items.length - VISIBLE) chipClass += ' tool-chip-collapsed';
+          var chipIcon = te.toolDone ? '\u2713' : te.toolError ? '\u2717' : '';
+          var shortName = shortenToolName(te.toolName);
+          var fullTitle = escapeHtml(String(te.toolName || '')) + (te.toolDetail ? ' \u2014 ' + escapeHtml(String(te.toolDetail)) : '');
+          out += '<div class="' + chipClass + '" title="' + fullTitle + '">'
+            + '<span class="tool-chip-icon">' + chipIcon + '</span>'
+            + '<span class="tool-chip-label">' + escapeHtml(shortName) + '</span>'
+            + '</div>';
+        }
+        out += '</div>';
       }
-      out += '</div>';
-      return out;
     }
 
-    var entry = group.entry;
-    var role = String(entry.role || 'assistant');
-
-    // Render widget entries as rich content cards
-    if (role === 'widget') {
-      var widgetId = 'widget-' + entry.id;
-      var widgetHtml = '<div class="terminal-chat-widget" id="' + widgetId + '">';
-      if (entry.widgetTitle) {
-        widgetHtml += '<div class="widget-title">' + escapeHtml(String(entry.widgetTitle)) + '</div>';
-      }
-      widgetHtml += '<div class="widget-body" data-widget-type="' + escapeHtml(String(entry.widget || 'markdown')) + '" data-entry-id="' + escapeHtml(entry.id) + '">';
-      widgetHtml += '<div class="widget-placeholder">Loading widget...</div>';
-      widgetHtml += '</div></div>';
-      return widgetHtml;
-    }
-
-    var classes = ['terminal-chat-msg', role];
-    if (entry.pending) classes.push('pending');
-    if (entry.error) classes.push('error');
-    var label = role === 'user' ? 'You' : role === 'system' ? 'System' : 'Claude';
-    return '<div class="' + classes.join(' ') + '">'
-      + '<div class="terminal-chat-msg-header">' + escapeHtml(label) + '</div>'
-      + '<div class="terminal-chat-msg-body">' + renderChatMarkdown(String(entry.text || '')) + '</div>'
-      + '</div>';
+    out += '</div></div>';
+    return out;
   }).join('');
   el.innerHTML = html;
   // Hydrate widget bodies
@@ -8291,6 +8560,10 @@ function updateTerminalInputModeUi() {
   var attachedSession = getAttachedWebTerminalSession();
   var isRaw = webTerm.inputMode === 'raw';
   var headlessCapable = isHeadlessClaudeChatSupported();
+  if (headlessCapable && isRaw) {
+    webTerm.inputMode = 'chat';
+    isRaw = false;
+  }
   if (attachedSession && !headlessCapable && !isRaw) {
     webTerm.inputMode = 'raw';
     isRaw = true;
@@ -8304,6 +8577,7 @@ function updateTerminalInputModeUi() {
   }
   // Hide the Chat/Raw toggle entirely when headless is not enabled
   if (modeToggle) modeToggle.style.display = webTerm.headlessEnabled ? '' : 'none';
+  if (rawBtn) rawBtn.style.display = webTerm.headlessEnabled ? 'none' : '';
   if (chatBtn) chatBtn.classList.toggle('active', !isRaw && headlessCapable);
   if (rawBtn) rawBtn.classList.toggle('active', isRaw);
   if (hint) {
@@ -8376,7 +8650,11 @@ function updateTerminalInputAvailability() {
 function setTerminalInputMode(mode, opts) {
   var options = opts || {};
   var requested = mode === 'raw' ? 'raw' : 'chat';
-  if (requested === 'chat' && getAttachedWebTerminalSession() && !isHeadlessClaudeChatSupported()) {
+  var attachedSession = getAttachedWebTerminalSession();
+  var headlessCapable = isHeadlessClaudeChatSupported();
+  if (headlessCapable) {
+    requested = 'chat';
+  } else if (requested === 'chat' && attachedSession && !headlessCapable) {
     requested = 'raw';
   }
   webTerm.inputMode = requested;
@@ -9815,10 +10093,7 @@ function toggleExplorerDevMode() {
   showToast('Explorer mode enabled.', 'success');
 }
 
-var explorerPref = readExplorerDevModePref();
-if (EXPLORER_DEV_UI_QUERY_DISABLE) EXPLORER_DEV_UI_ENABLED = false;
-else if (EXPLORER_DEV_UI_QUERY_ENABLE) EXPLORER_DEV_UI_ENABLED = true;
-else EXPLORER_DEV_UI_ENABLED = explorerPref === true;
+EXPLORER_DEV_UI_ENABLED = false;
 
 // Restore sidebar state from localStorage
 try {
@@ -11456,6 +11731,14 @@ function populateUI() {
   if (!config.slurm) config.slurm = {};
   if (typeof config.slurm.enabled !== 'boolean') config.slurm.enabled = true;
   document.getElementById('slurmEnabled').checked = !!config.slurm.enabled;
+  if (!config.headless) config.headless = {};
+  if (typeof config.headless.claude_run_with_allowed_permissions !== 'boolean') {
+    config.headless.claude_run_with_allowed_permissions = true;
+  }
+  var headlessAllowedPermissions = document.getElementById('headlessAllowedPermissions');
+  if (headlessAllowedPermissions) {
+    headlessAllowedPermissions.checked = !!config.headless.claude_run_with_allowed_permissions;
+  }
 
   renderList('domainsList', config.network ? config.network.allowed_domains : [], removeDomain);
   renderList('blockedList', config.filesystem ? config.filesystem.blocked_patterns : [], removeBlocked);
@@ -11478,6 +11761,11 @@ function collectConfig() {
   config.audit.log_dir = document.getElementById('logDir').value;
   if (!config.slurm) config.slurm = {};
   config.slurm.enabled = document.getElementById('slurmEnabled').checked;
+  if (!config.headless) config.headless = {};
+  var headlessAllowedPermissions = document.getElementById('headlessAllowedPermissions');
+  config.headless.claude_run_with_allowed_permissions = headlessAllowedPermissions
+    ? !!headlessAllowedPermissions.checked
+    : true;
   updateSlurmUIState({ skipLoadJobs: true });
 }
 
@@ -12538,6 +12826,203 @@ function loadConfigPath() {
   });
 }
 
+function formatUiVersion(version) {
+  var cleaned = String(version || '').trim();
+  if (!cleaned) return '';
+  return cleaned.charAt(0).toLowerCase() === 'v' ? cleaned : ('v' + cleaned);
+}
+
+function setUiUpdateStatus(message, tone) {
+  var el = document.getElementById('uiUpdateStatusValue');
+  if (!el) return;
+  el.textContent = message || '';
+  el.className = 'settings-info-value ui-update-status' + (tone ? (' ' + tone) : '');
+}
+
+function setUiUpdateButtonsState(opts) {
+  var options = opts || {};
+  var showApply = !!options.showApply;
+  var checkBtn = document.getElementById('uiUpdateCheckBtn');
+  var applyBtn = document.getElementById('uiUpdateApplyBtn');
+  if (checkBtn) checkBtn.disabled = !!options.disableCheck;
+  if (applyBtn) {
+    applyBtn.style.display = showApply ? '' : 'none';
+    applyBtn.disabled = !!options.disableApply;
+  }
+}
+
+function renderUiVersionState(data, opts) {
+  var options = opts || {};
+  var runningVersion = typeof data.runningVersion === 'string' ? data.runningVersion : '';
+  var latestVersion = typeof data.latestVersion === 'string' ? data.latestVersion : '';
+  var checkError = typeof data.checkError === 'string' ? data.checkError : '';
+  var updateAvailable = !!data.updateAvailable;
+  var latestCheckedAt = typeof data.latestCheckedAt === 'string' ? data.latestCheckedAt : '';
+
+  var versionEl = document.getElementById('labgateVersionValue');
+  if (versionEl) {
+    versionEl.textContent = runningVersion ? formatUiVersion(runningVersion) : 'Unknown';
+  }
+
+  setUiUpdateButtonsState({
+    showApply: updateAvailable && !!latestVersion,
+    disableCheck: uiUpdateInProgress,
+    disableApply: uiUpdateInProgress
+  });
+
+  if (updateAvailable && latestVersion) {
+    var updateCommand = typeof data.updateCommand === 'string' ? data.updateCommand : 'npm install -g labgate@latest';
+    setUiUpdateStatus(formatUiVersion(latestVersion) + ' is available. Click "Update". If it fails, run "' + updateCommand + '".', 'warning');
+    return;
+  }
+
+  if (checkError) {
+    setUiUpdateButtonsState({
+      showApply: false,
+      disableCheck: uiUpdateInProgress,
+      disableApply: uiUpdateInProgress
+    });
+    setUiUpdateStatus('Update check unavailable: ' + checkError, 'error');
+    return;
+  }
+
+  if (latestVersion) {
+    var checkedSuffix = latestCheckedAt ? (' Last checked: ' + new Date(latestCheckedAt).toLocaleTimeString() + '.') : '';
+    setUiUpdateStatus('Up to date (' + formatUiVersion(latestVersion) + ').' + checkedSuffix, 'success');
+    return;
+  }
+
+  if (options.force) {
+    setUiUpdateStatus('Update check finished with no version data.', 'warning');
+  } else {
+    setUiUpdateStatus('Click "Search for Update" to check npm for newer versions.', '');
+  }
+}
+
+function checkUiVersion(force) {
+  var shouldForce = !!force;
+  if (uiUpdateInProgress) return Promise.resolve();
+  var checkBtn = document.getElementById('uiUpdateCheckBtn');
+  var originalLabel = checkBtn ? checkBtn.textContent : '';
+  if (checkBtn) {
+    checkBtn.disabled = true;
+    checkBtn.textContent = 'Checking...';
+  }
+  var endpoint = '/api/ui/version' + (shouldForce ? '?refresh=1' : '');
+  return fetch(endpoint).then(parseApiResponse).then(function(resp) {
+    var data = resp.data || {};
+    if (!resp.ok || !data.ok) {
+      throw new Error(data.error || ('HTTP ' + resp.status));
+    }
+    renderUiVersionState(data, { force: shouldForce });
+  }).catch(function(err) {
+    var msg = err && err.message ? err.message : String(err || 'unknown error');
+    setUiUpdateStatus('Could not check for updates: ' + msg, 'error');
+    if (shouldForce) showToast('Update check failed: ' + msg, 'error');
+  }).finally(function() {
+    if (checkBtn) {
+      checkBtn.disabled = false;
+      checkBtn.textContent = originalLabel || 'Search for Update';
+    }
+    if (!uiUpdateInProgress) {
+      var applyBtn = document.getElementById('uiUpdateApplyBtn');
+      if (applyBtn) applyBtn.disabled = false;
+    }
+  });
+}
+
+function stopUiUpdateStatusPolling() {
+  if (!uiUpdateStatusPollTimer) return;
+  clearTimeout(uiUpdateStatusPollTimer);
+  uiUpdateStatusPollTimer = null;
+}
+
+function pollUiUpdateStatus() {
+  return fetch('/api/ui/update/status').then(parseApiResponse).then(function(resp) {
+    var data = resp.data || {};
+    if (!resp.ok || !data.ok) {
+      throw new Error(data.error || ('HTTP ' + resp.status));
+    }
+
+    var status = String(data.status || 'idle');
+    var latestVersion = typeof data.latestVersion === 'string' ? data.latestVersion : '';
+    var error = typeof data.error === 'string' ? data.error : '';
+
+    if (status === 'running') {
+      uiUpdateInProgress = true;
+      setUiUpdateButtonsState({ showApply: true, disableCheck: true, disableApply: true });
+      setUiUpdateStatus('Updating LabGate... write actions are temporarily locked.', 'warning');
+      stopUiUpdateStatusPolling();
+      uiUpdateStatusPollTimer = setTimeout(function() {
+        pollUiUpdateStatus();
+      }, 1500);
+      return;
+    }
+
+    uiUpdateInProgress = false;
+    stopUiUpdateStatusPolling();
+    if (status === 'success') {
+      var next = latestVersion ? formatUiVersion(latestVersion) : 'the latest version';
+      setUiUpdateStatus('Update complete (' + next + '). Restart `labgate ui`, then reload this page.', 'success');
+      showToast('Update complete. Restart `labgate ui`.', 'success');
+      setUiUpdateButtonsState({ showApply: false, disableCheck: false, disableApply: false });
+      return;
+    }
+    if (status === 'error') {
+      setUiUpdateStatus('Update failed: ' + (error || 'unknown error'), 'error');
+      showToast('Update failed: ' + (error || 'unknown error'), 'error');
+      setUiUpdateButtonsState({ showApply: true, disableCheck: false, disableApply: false });
+      return;
+    }
+
+    setUiUpdateButtonsState({ showApply: false, disableCheck: false, disableApply: false });
+  }).catch(function(err) {
+    uiUpdateInProgress = false;
+    stopUiUpdateStatusPolling();
+    var msg = err && err.message ? err.message : String(err || 'unknown error');
+    setUiUpdateStatus('Could not read update status: ' + msg, 'error');
+    setUiUpdateButtonsState({ showApply: true, disableCheck: false, disableApply: false });
+  });
+}
+
+function startUiUpdate() {
+  if (uiUpdateInProgress) return;
+  showConfirm({
+    title: 'Update LabGate',
+    message: 'LabGate will only update when no active sessions are running. Continue?',
+    okLabel: 'Update',
+    destructive: false
+  }).then(function(ok) {
+    if (!ok) return;
+    uiUpdateInProgress = true;
+    setUiUpdateButtonsState({ showApply: true, disableCheck: true, disableApply: true });
+    setUiUpdateStatus('Starting update...', 'warning');
+    fetch('/api/ui/update', {
+      method: 'POST',
+      headers: apiWriteHeaders(),
+      body: '{}'
+    }).then(parseApiResponse).then(function(resp) {
+      var data = resp.data || {};
+      if (!resp.ok || !data.ok) {
+        var detail = data.error || ('HTTP ' + resp.status);
+        if (data.code === 'in_use' && data.activeUsage) {
+          var usage = data.activeUsage;
+          detail = 'Stop active sessions first (' + (usage.containerSessions || 0) + ' sessions, '
+            + (usage.webTerminalSessions || 0) + ' web terminals).';
+        }
+        throw new Error(detail);
+      }
+      pollUiUpdateStatus();
+    }).catch(function(err) {
+      uiUpdateInProgress = false;
+      var msg = err && err.message ? err.message : String(err || 'unknown error');
+      setUiUpdateStatus('Update blocked: ' + msg, 'error');
+      setUiUpdateButtonsState({ showApply: true, disableCheck: false, disableApply: false });
+      showToast('Update blocked: ' + msg, 'error');
+    });
+  });
+}
+
 // ── Network mode switcher ────────────────────
 function updateNetSwitcher() {
   var mode = normalizeUiNetworkMode(config.network ? config.network.mode : 'host');
@@ -15065,6 +15550,7 @@ var slurmSystemAvailable = false;
 var slurmSidebarVisible = false;
 var slurmMissingCommands = [];
 var slurmSearchTimeout = null;
+var slurmScope = 'mine'; // 'mine' or 'all'
 var currentSlurmOutputJobId = null;
 var currentSlurmOutputStream = 'stdout';
 var slurmOutputFollowTimer = null;
@@ -15149,6 +15635,15 @@ function updateSlurmUIState(opts) {
   if (!(opts && opts.skipLoadJobs)) loadSlurmJobs();
 }
 
+function setSlurmScope(scope) {
+  slurmScope = scope === 'all' ? 'all' : 'mine';
+  var mineBtn = document.getElementById('slurmScopeMine');
+  var allBtn = document.getElementById('slurmScopeAll');
+  if (mineBtn) mineBtn.classList.toggle('active', slurmScope === 'mine');
+  if (allBtn) allBtn.classList.toggle('active', slurmScope === 'all');
+  loadSlurmJobs();
+}
+
 function loadSlurmJobs() {
   if (!slurmEnabled || !slurmSidebarVisible) return;
   var el = document.getElementById('slurmJobsContent');
@@ -15157,58 +15652,69 @@ function loadSlurmJobs() {
   var url = '/api/slurm/jobs?limit=100';
   if (state) url += '&state=' + encodeURIComponent(state);
   if (search) url += '&search=' + encodeURIComponent(search);
+  // Session-aware filtering
+  if (slurmScope === 'mine') {
+    var sid = getAttachedWebTerminalId();
+    if (!sid) {
+      el.innerHTML = '<div class="empty-state" style="padding:12px">Attach to a terminal session to view jobs for this session.</div>';
+      return;
+    }
+    url += '&session_id=' + encodeURIComponent(sid);
+  }
 
   fetch(url).then(function(r) { return r.json(); }).then(function(data) {
     if (!data.ok) {
-      el.innerHTML = '<div class="empty-state">Error loading SLURM jobs: ' + escapeHtml(data.error || 'unknown error') + '</div>';
+      el.innerHTML = '<div class="empty-state" style="padding:12px">Error: ' + escapeHtml(data.error || 'unknown') + '</div>';
       return;
     }
     if (!data.jobs || data.jobs.length === 0) {
-      el.innerHTML = '<div class="empty-state">No SLURM jobs found</div>';
+      var msg = slurmScope === 'mine' ? 'No jobs from this session' : 'No SLURM jobs found';
+      el.innerHTML = '<div class="empty-state" style="padding:12px">' + msg + '</div>';
       return;
     }
-    renderSlurmJobTable(data.jobs, el);
+    renderSlurmJobCards(data.jobs, el);
   }).catch(function(err) {
-    el.innerHTML = '<div class="empty-state">Error loading SLURM jobs: ' + escapeHtml(err.message) + '</div>';
+    el.innerHTML = '<div class="empty-state" style="padding:12px">Error: ' + escapeHtml(err.message) + '</div>';
   });
 }
 
 var _slurmJobsCache = [];
 
-function renderSlurmJobTable(jobs, el) {
+function renderSlurmJobCards(jobs, el) {
   _slurmJobsCache = jobs;
-  var html = '<table class="slurm-table"><thead><tr>';
-  html += '<th>Job ID</th><th>Name</th><th>State</th><th>Runtime</th>';
-  html += '<th>Partition</th><th>Nodes</th><th>Output</th><th>Notes</th><th>Actions</th>';
-  html += '</tr></thead><tbody>';
-
+  var currentSessionId = getAttachedWebTerminalId();
+  var html = '<div class="slurm-job-grid">';
   for (var i = 0; i < jobs.length; i++) {
     var j = jobs[i];
     var runtime = computeRuntime(j);
-    var stateClass = 'slurm-state slurm-state-' + (j.state || 'UNKNOWN');
-
-    html += '<tr>';
-    html += '<td style="font-family:var(--font-mono)">' + escapeHtml(j.job_id) + '</td>';
-    html += '<td>' + escapeHtml(j.name || '-') + '</td>';
-    html += '<td>';
-    if (j.state === 'RUNNING') html += '<span class="slurm-running-dot"></span>';
-    html += '<span class="' + stateClass + '">' + escapeHtml(j.state || 'UNKNOWN') + '</span>';
-    html += '</td>';
-    html += '<td style="font-family:var(--font-mono)">' + escapeHtml(runtime) + '</td>';
-    html += '<td>' + escapeHtml(j.partition || '-') + '</td>';
-    html += '<td>' + escapeHtml(j.nodes || '-') + '</td>';
-    html += '<td>' + renderOutputCell(j) + '</td>';
-    html += '<td class="slurm-notes-cell"><span class="slurm-notes-display" onclick="editSlurmNotes(\'' + escapeHtml(j.job_id) + '\')">';
-    html += j.notes ? escapeHtml(j.notes) : '<span style="color:var(--muted);font-style:italic">+ note</span>';
-    html += '</span></td>';
-    html += '<td>';
+    var stateClass = 'slurm-job-state slurm-job-state-' + (j.state || 'UNKNOWN');
+    var isMySession = currentSessionId && j.session_id === currentSessionId;
+
+    html += '<div class="slurm-job-card">';
+    html += '<div class="slurm-job-card-row">';
+    html += '<span class="slurm-job-id">' + escapeHtml(j.job_id) + '</span>';
+    html += '<span class="' + stateClass + '">' + escapeHtml(j.state || '?') + '</span>';
+    if (j.name) html += '<span class="slurm-job-name">' + escapeHtml(j.name) + '</span>';
+    html += '</div>';
+    html += '<div class="slurm-job-meta">';
+    html += '<span>' + escapeHtml(runtime) + '</span>';
+    if (j.partition) html += '<span>' + escapeHtml(j.partition) + '</span>';
+    if (j.stdout_path) {
+      html += '<button class="slurm-job-action-btn" onclick="event.stopPropagation();openSlurmOutput(\'' + escapeHtml(j.job_id) + '\',\'stdout\')" title="View stdout">out</button>';
+    }
+    if (j.stderr_path) {
+      html += '<button class="slurm-job-action-btn" onclick="event.stopPropagation();openSlurmOutput(\'' + escapeHtml(j.job_id) + '\',\'stderr\')" title="View stderr">err</button>';
+    }
+    html += '<div class="slurm-job-actions">';
+    html += '<button class="slurm-job-action-btn" onclick="event.stopPropagation();editSlurmNotes(\'' + escapeHtml(j.job_id) + '\')" title="Notes">' + (j.notes ? '\u270E' : '+note') + '</button>';
     if (j.state === 'PENDING' || j.state === 'RUNNING') {
-      html += '<button class="slurm-cancel-btn" onclick="cancelSlurmJob(\'' + escapeHtml(j.job_id) + '\')">Cancel</button>';
+      html += '<button class="slurm-job-action-btn danger" onclick="event.stopPropagation();cancelSlurmJob(\'' + escapeHtml(j.job_id) + '\')" title="Cancel job">\u2717</button>';
     }
-    html += '</td>';
-    html += '</tr>';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
   }
-  html += '</tbody></table>';
+  html += '</div>';
   el.innerHTML = html;
 }
 
@@ -15530,7 +16036,8 @@ function applyFieldLocks(data) {
     'audit.enabled': 'auditEnabled',
     'audit.log_dir': 'logDir',
     'session_timeout_hours': 'timeout',
-    'slurm.enabled': 'slurmEnabled'
+    'slurm.enabled': 'slurmEnabled',
+    'headless.claude_run_with_allowed_permissions': 'headlessAllowedPermissions'
   };
   locked.forEach(function(fieldPath) {
     var elId = fieldMap[fieldPath];
@@ -15764,6 +16271,7 @@ function loadAdminLicense() {
 // ── Init ─────────────────────────────────────
 loadConfig();
 loadConfigPath();
+checkUiVersion(false);
 setViewMode('terminal_attached', '');
 loadSessions();
 updateNotifyButton();