clay-server 3.4.0-beta.9 → 3.5.0-beta.1

package/lib/public/app.js

@@ -60,10 +60,12 @@ import { initRateLimit, handleRateLimitEvent as _rlHandleRateLimitEvent, updateR
 import { initCursors, handleRemoteCursorMove as _curHandleRemoteCursorMove, handleRemoteCursorLeave as _curHandleRemoteCursorLeave, handleRemoteSelection as _curHandleRemoteSelection, clearRemoteCursors as _curClearRemoteCursors, initCursorToggle } from './modules/app-cursors.js';
 import { initFavicon, updateFavicon as _favUpdateFavicon, setSendBtnMode as _favSetSendBtnMode, blinkIO as _favBlinkIO, blinkSessionDot as _favBlinkSessionDot, updateCrossProjectBlink as _favUpdateCrossProjectBlink, startUrgentBlink as _favStartUrgentBlink, stopUrgentBlink as _favStopUrgentBlink, setActivity as _favSetActivity, drawFaviconAnimFrame as _favDrawFaviconAnimFrame } from './modules/app-favicon.js';
 import { initHeader, closeSessionInfoPopover as _hdrCloseSessionInfoPopover, updateHistorySentinel as _hdrUpdateHistorySentinel, requestMoreHistory as _hdrRequestMoreHistory, prependOlderHistory as _hdrPrependOlderHistory } from './modules/app-header.js';
+import { initSessionActions } from './modules/session-actions.js';
 import { initMisc, flushPendingExtMessages, showImageModal as _miscShowImageModal, closeImageModal as _miscCloseImageModal, showPasteModal as _miscShowPasteModal, closePasteModal as _miscClosePasteModal, showConfirm as _miscShowConfirm, hideConfirm as _miscHideConfirm, showForceChangePinOverlay as _miscShowForceChangePinOverlay, sendExtensionCommand as _miscSendExtensionCommand, handleExtensionResult as _miscHandleExtensionResult } from './modules/app-misc.js';
 import { initSkillInstall, requireSkills as _siRequireSkills, requireClayMateInterview as _siRequireClayMateInterview, handleSkillInstallWs as _siHandleSkillInstallWs } from './modules/app-skills-install.js';
 import { initDebateUi, showDebateConcludeConfirm as _debShowDebateConcludeConfirm, exitDebateConcludeMode as _debExitDebateConcludeMode, handleDebateConcludeSend as _debHandleDebateConcludeSend, showDebateEndedMode as _debShowDebateEndedMode, exitDebateEndedMode as _debExitDebateEndedMode, showDebateUserFloor as _debShowDebateUserFloor, exitDebateFloorMode as _debExitDebateFloorMode, handleDebateFloorSend as _debHandleDebateFloorSend, renderDebateUserFloorDone as _debRenderDebateUserFloorDone, showDebateSticky as _debShowDebateSticky, showDebateBottomBar as _debShowDebateBottomBar, removeDebateBottomBar as _debRemoveDebateBottomBar, sendDebateStickyComment as _debSendDebateStickyComment, updateDebateRound as _debUpdateDebateRound } from './modules/app-debate-ui.js';
 import { initLoopUi, updateLoopInputVisibility as _loopUpdateLoopInputVisibility, updateLoopButton as _loopUpdateLoopButton, showLoopBanner as _loopShowLoopBanner, updateLoopBanner as _loopUpdateLoopBanner, updateRalphBars as _loopUpdateRalphBars, showRalphCraftingBar as _loopShowRalphCraftingBar, showRalphApprovalBar as _loopShowRalphApprovalBar, updateRalphApprovalStatus as _loopUpdateRalphApprovalStatus, openRalphPreviewModal as _loopOpenRalphPreviewModal, showExecModal as _loopShowExecModal, closeExecModal as _loopCloseExecModal, updateExecModalStatus as _loopUpdateExecModalStatus } from './modules/app-loop-ui.js';
+import { initBackgroundTasksUi } from './modules/background-tasks-ui.js';
 import { initLoopWizard, openRalphWizard as _loopOpenRalphWizard, closeRalphWizard as _loopCloseRalphWizard, getWizardSource as _loopGetWizardSource } from './modules/app-loop-wizard.js';
 import { initAppNotifications, handleNotificationsState as _notifHandleState, handleNotificationCreated as _notifHandleCreated, handleNotificationDismissed as _notifHandleDismissed, handleNotificationDismissedAll as _notifHandleDismissedAll } from './modules/app-notifications.js';
 import { initWhatsNew, handleWhatsNewState as _wnHandleState, handleWhatsNewSeenResult as _wnHandleSeenResult } from './modules/whats-new.js';
@@ -295,6 +297,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     slashCommands: [],
     processing: false,
     activeSessionId: null,
+    activeBackgroundTasks: [],
     sessionVendorBound: false,
     cliSessionId: null,
     isHeadlessMode: false,
@@ -339,6 +342,12 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     markdownSlideLevelExplicit: false,
     currentModel: "",
     currentModels: [],
+    modelListVendor: "",
+    modelListStatus: "idle",
+    modelListError: "",
+    modelRequestId: "",
+    modelSelectionPending: null,
+    modelSelectionError: "",
     // Project's last-used vendor; seeds the sidebar's "New session" button.
     lastVendor: "",
     // Static adapter metadata sent before any vendor is initialized.
@@ -633,6 +642,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
 
   // --- Header module (rename, info popover, history) ---
   initHeader();
+  initSessionActions();
 
   // --- Skill Install module ---
   initSkillInstall();
@@ -641,6 +651,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
   initDebateUi();
 
   initLoopUi();
+  initBackgroundTasksUi();
   initLoopWizard();
 
   // --- Notifications module ---

package/lib/public/copilot-avatar.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="GitHub Copilot CLI">
+  <rect width="64" height="64" rx="14" fill="#24292f"/>
+  <path d="M15 25c0-8 7-14 17-14s17 6 17 14v15c0 8-7 13-17 13s-17-5-17-13zm8 1v13c0 4 4 7 9 7s9-3 9-7V26c0-4-4-7-9-7s-9 3-9 7z" fill="#fff"/>
+  <circle cx="27" cy="30" r="3" fill="#24292f"/><circle cx="37" cy="30" r="3" fill="#24292f"/>
+</svg>

package/lib/public/css/filebrowser.css

@@ -960,7 +960,7 @@
     width: 50%;
     max-width: 720px;
     min-width: 360px;
-    border-left: 1px solid var(--border);
+    border-right: 1px solid var(--border);
     background: var(--bg);
     display: flex;
     flex-direction: column;
@@ -1011,6 +1011,11 @@
   min-height: 44px;
 }
 
+.file-viewer-tabs { display: flex; min-width: 0; flex: 1; overflow-x: auto; gap: 2px; }
+.file-viewer-tab { display: inline-flex; align-items: center; gap: 6px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; border-radius: 5px; padding: 4px 7px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px; cursor: pointer; }
+.file-viewer-tab.active { background: var(--sidebar-hover); color: var(--text); }
+.file-viewer-tab-close { font-size: 16px; line-height: 12px; color: var(--text-muted); }
+
 .file-viewer-path {
   flex: 1;
   font-family: "Roboto Mono", monospace;

package/lib/public/css/input.css

@@ -667,6 +667,50 @@
   position: relative;
 }
 
+.background-tasks-bar {
+  max-width: var(--content-width);
+  margin: 0 auto 8px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--input-bg);
+  overflow: hidden;
+}
+
+.background-tasks-toggle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 8px 10px;
+  border: 0;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+}
+
+.background-tasks-chip, .session-background-task-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: var(--accent);
+  color: var(--bg);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.background-tasks-list { padding: 0 10px 8px; }
+.background-task-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border-subtle); }
+.background-task-description { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.background-task-type { padding: 2px 6px; border-radius: 5px; background: var(--code-bg); color: var(--text-muted); font-size: 11px; }
+.background-task-stop { border: 1px solid var(--border); border-radius: 5px; padding: 3px 7px; background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: 12px; }
+.background-task-stop:hover { color: var(--text); border-color: var(--text-muted); }
+
 #input-row {
   display: flex;
   flex-direction: column;
@@ -790,6 +834,7 @@
   opacity: 0.35;
   cursor: default;
 }
+.vendor-toggle-btn.disabled:not(.active) { display: none; }
 .vendor-toggle-icon {
   width: 16px;
   height: 16px;
@@ -799,6 +844,17 @@
 .vendor-toggle-label {
   pointer-events: none;
 }
+.vendor-toggle-btn.experimental::after,
+.vendor-experimental-badge {
+  content: "🧪";
+  font-size: 10px;
+  line-height: 1;
+  font-weight: 400;
+  filter: saturate(0.85);
+}
+.vendor-experimental-badge {
+  margin-left: auto;
+}
 @media (min-width: 901px) {
   .vendor-toggle-btn:not(.active) .vendor-toggle-label { display: none; }
   .vendor-toggle-btn:not(.active) { padding: 0 8px; }

package/lib/public/css/mates.css

@@ -682,6 +682,12 @@
 .mate-vendor-label {
   pointer-events: none;
 }
+.mate-vendor-btn.experimental::after {
+  content: "🧪";
+  font-size: 9px;
+  line-height: 1;
+  font-weight: 400;
+}
 .mate-vendor-btn:not(.active) .mate-vendor-label { display: none; }
 
 /* Collapse button inside mate header: white to match header style */

package/lib/public/css/menus.css

@@ -43,62 +43,6 @@
 #header-rename-btn:hover { color: var(--text-secondary); background: rgba(var(--overlay-rgb),0.04); border-color: var(--border); }
 #header-rename-btn .lucide { width: 13px; height: 13px; }
 
-#header-add-worker-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 7px;
-  width: auto;
-  height: 28px;
-  border: 1px solid color-mix(in srgb, var(--accent2) 28%, var(--border));
-  background: var(--accent2-8);
-  color: var(--accent2);
-  cursor: pointer;
-  border-radius: 8px;
-  flex-shrink: 0;
-  padding: 0 9px 0 7px;
-  margin-left: 0;
-  font-family: inherit;
-  font-size: 11px;
-  font-weight: 700;
-  line-height: 1;
-  white-space: nowrap;
-  transition: color 0.15s, background 0.15s, border-color 0.15s;
-}
-#header-add-worker-btn:hover {
-  color: var(--accent2-hover);
-  background: var(--accent2-15);
-  border-color: color-mix(in srgb, var(--accent2) 48%, var(--border));
-}
-.header-worker-icon {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-.header-worker-icon > .lucide { width: 15px; height: 15px; }
-.header-worker-add-badge {
-  position: absolute;
-  right: -4px;
-  bottom: -3px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 9px;
-  height: 9px;
-  border-radius: 50%;
-  background: var(--accent2);
-  color: var(--bg);
-  box-shadow: 0 0 0 2px var(--bg);
-}
-.header-worker-add-badge .lucide { width: 7px; height: 7px; stroke-width: 3; }
-.header-worker-label { letter-spacing: 0.01em; }
-#header-add-worker-btn.hidden { display: none; }
-body.dm-mode #header-add-worker-btn { display: none; }
-
 /* "Close terminal" button for a live TUI session. Matches the session-control
    chrome; reds out on hover since it stops the running agent while preserving
    the resumable session. */
@@ -702,6 +646,41 @@ body.dm-mode #header-add-worker-btn { display: none; }
   color: var(--text-dimmer);
   font-style: italic;
 }
+.config-model-state {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 280px;
+  padding: 10px 14px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  white-space: normal;
+}
+.config-model-state > div { flex: 1; min-width: 0; }
+.config-model-state-title { color: var(--text); font-weight: 600; }
+.config-model-state-detail { margin-top: 2px; color: var(--text-muted); line-height: 1.35; }
+.config-model-spinner {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: config-model-spin 0.8s linear infinite;
+}
+@keyframes config-model-spin { to { transform: rotate(360deg); } }
+.config-model-retry {
+  flex: 0 0 auto;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  padding: 4px 8px;
+  background: var(--surface-raised);
+  color: var(--text-secondary);
+  font: inherit;
+  cursor: pointer;
+}
+.config-model-retry:hover { color: var(--text); border-color: var(--text-muted); }
+.config-radio-item.pending { color: var(--accent); opacity: 0.75; }
 
 /* Segmented control for effort */
 .config-segmented {

package/lib/public/css/pane.css

@@ -23,6 +23,12 @@ body.pane-mode #sticky-notes-container {
   display: none !important;
 }
 
+body.pane-mode #file-viewer { display: none !important; }
+
+body.pane-mode #connect-overlay { background: var(--bg); }
+body.pane-mode #connect-overlay #ascii-logo-canvas { display: none; }
+body.pane-mode #connect-overlay-msg { color: var(--text-dimmer); }
+
 body.pane-mode .notif-banner-container {
   display: none !important;
 }
@@ -100,7 +106,8 @@ body.pane-mode #input-area {
 }
 
 .split-pane-title {
-  flex: 1;
+  flex: 0 1 auto;
+  max-width: 46%;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -202,15 +209,18 @@ button.split-pair-role:hover { filter: brightness(1.25); }
   max-width: var(--content-width);
   margin: 0 auto;
   padding: 4px 10px;
-  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
-  border-bottom: 0;
   border-radius: 8px 8px 0 0;
   background: color-mix(in srgb, var(--accent) 8%, var(--bg));
   color: var(--text-secondary);
   font-size: 11px;
   line-height: 1.4;
+  transition: box-shadow 0.2s;
 }
 .pane-delegation-notice.visible { display: flex; }
+.pane-delegation-notice.visible:has(+ #input-wrapper #input-row:focus-within) {
+  box-shadow: 0 0 0 1px var(--border);
+  clip-path: inset(-1px -1px 0 -1px);
+}
 .pane-delegation-notice.visible + #input-wrapper #input-row {
   border-radius: 0 0 8px 8px;
 }
@@ -283,12 +293,17 @@ button.split-pair-role:hover { filter: brightness(1.25); }
   color: var(--text-dimmer);
   cursor: pointer;
   flex-shrink: 0;
+  margin-left: auto;
 }
 
 .split-pane-context.has-data {
   display: inline-flex;
 }
 
+.split-pane-context:not(.has-data) + .split-pane-close {
+  margin-left: auto;
+}
+
 .split-pane-context:hover {
   background: var(--bg-alt);
   color: var(--text);

package/lib/public/css/session-actions.css

@@ -0,0 +1,98 @@
+#header-session-actions-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-dimmer);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: color 0.15s, background 0.15s, border-color 0.15s;
+}
+
+#header-session-actions-btn:hover,
+#header-session-actions-btn[aria-expanded="true"] {
+  color: var(--text);
+  background: rgba(var(--overlay-rgb), 0.05);
+  border-color: var(--border);
+}
+
+#header-session-actions-btn.hidden { display: none; }
+#header-session-actions-btn .lucide { width: 16px; height: 16px; }
+
+.session-actions-menu {
+  position: fixed;
+  z-index: 10020;
+  width: 286px;
+  padding: 6px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--bg) 96%, transparent);
+  box-shadow: 0 14px 38px rgba(var(--shadow-rgb), 0.32), 0 2px 8px rgba(var(--shadow-rgb), 0.2);
+  backdrop-filter: blur(18px);
+}
+
+.session-actions-row {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.session-actions-row {
+  display: grid;
+  grid-template-columns: 30px minmax(0, 1fr) 16px;
+  align-items: center;
+  gap: 8px;
+  min-height: 54px;
+  padding: 7px 8px;
+  border-radius: 8px;
+}
+
+.session-actions-row:hover { background: var(--bg-alt); }
+.session-actions-row:disabled { cursor: default; opacity: 0.42; }
+.session-actions-row:disabled:hover { background: transparent; }
+
+.session-actions-row-icon {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  background: rgba(var(--overlay-rgb), 0.035);
+  color: var(--accent2);
+}
+
+.session-actions-row-icon .lucide { width: 15px; height: 15px; }
+.session-actions-row-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
+.session-actions-row-copy strong { font-size: 12px; font-weight: 750; }
+.session-actions-row-copy > span { color: var(--text-dimmer); font-size: 10px; line-height: 1.25; }
+.session-actions-row-chevron { color: var(--text-dimmer); }
+.session-actions-row-chevron .lucide { width: 13px; height: 13px; }
+
+.handoff-modal { width: min(420px, calc(100vw - 32px)); }
+.handoff-modal-desc { margin: -10px 0 14px; color: var(--text-dimmer); font-size: 12px; line-height: 1.45; }
+.handoff-modal-source {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+  padding: 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 9px;
+  background: var(--bg-alt);
+}
+.handoff-modal-source > img { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; }
+.handoff-modal-source > span { display: grid; min-width: 0; gap: 1px; }
+.handoff-modal-source strong { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
+.handoff-modal-source span span { color: var(--text-dimmer); font-size: 10px; }
+.handoff-modal-field + .handoff-modal-field { margin-top: 10px; }
+.handoff-modal-field .wt-modal-label { margin-top: 0; }

package/lib/public/grok-avatar.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Grok Build">
+  <rect width="64" height="64" rx="14" fill="#111"/>
+  <path d="M45 17A21 21 0 1 0 49 42H35v-9h22v4A25 25 0 1 1 51 13z" fill="#fff"/>
+</svg>

package/lib/public/index.html

@@ -30,7 +30,7 @@
 (function(){try{var k="clay-theme-vars",v=localStorage.getItem(k),r=document.documentElement;if(v){var o=JSON.parse(v),p;for(p in o)r.style.setProperty(p,o[p]);var vt=localStorage.getItem(k.replace("-vars","-variant"));if(vt==="light"){r.classList.add("light-theme");r.classList.remove("dark-theme")}else{r.classList.add("dark-theme");r.classList.remove("light-theme")}var m=document.querySelector('meta[name="theme-color"]');if(m&&o["--bg"])m.setAttribute("content",o["--bg"])}else{var sl=window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches;if(sl){r.classList.add("light-theme");r.classList.remove("dark-theme")}}}catch(e){}})();
 </script>
 <script>if(window.navigator.standalone||window.matchMedia("(display-mode:standalone)").matches){document.documentElement.classList.add("pwa-standalone")}</script>
-<link rel="stylesheet" href="style.css?v=20260824f">
+<link rel="stylesheet" href="style.css?v=20260826a">
 <style>
 @media(max-width:768px){
   /* User messages: vertical stack, avatar on top, right-aligned */
@@ -388,12 +388,8 @@
         <div id="ralph-sticky" class="hidden"></div>
         <div id="debate-sticky" class="hidden"></div>
         <div class="status">
-          <button id="header-add-worker-btn" type="button" aria-label="Add AI Worker" title="Add an AI Worker — this session becomes the Driver of a pair">
-            <span class="header-worker-icon" aria-hidden="true">
-              <i data-lucide="bot"></i>
-              <span class="header-worker-add-badge"><i data-lucide="plus"></i></span>
-            </span>
-            <span class="header-worker-label">Add Worker</span>
+          <button id="header-session-actions-btn" type="button" aria-label="Session actions" title="Session actions" aria-haspopup="menu" aria-expanded="false">
+            <i data-lucide="ellipsis"></i>
           </button>
           <button type="button" id="header-tui-font-btn" class="header-tui-font-btn hidden" title="Terminal font" aria-label="Terminal font">
             <i data-lucide="type"></i>
@@ -407,7 +403,7 @@
       <div id="app">
         <div id="connect-overlay">
       <canvas id="ascii-logo-canvas"></canvas>
-      <p id="connect-overlay-msg">Reconnecting to server…</p>
+      <p id="connect-overlay-msg">Connecting…</p>
     </div>
     <div id="sticky-notes-container" class="hidden"></div>
     <div id="debate-info-float" class="hidden"></div>
@@ -542,6 +538,26 @@
                   <img src="/opencode-avatar.svg" class="vendor-toggle-icon" alt="OpenCode">
                   <span class="vendor-toggle-label">OpenCode</span>
                 </button>
+                <button id="vendor-btn-kimi" class="vendor-toggle-btn" data-vendor="kimi">
+                  <img src="/kimi-avatar.svg" class="vendor-toggle-icon" alt="Kimi">
+                  <span class="vendor-toggle-label">Kimi Code</span>
+                </button>
+                <button id="vendor-btn-grok" class="vendor-toggle-btn" data-vendor="grok">
+                  <img src="/grok-avatar.svg" class="vendor-toggle-icon" alt="Grok">
+                  <span class="vendor-toggle-label">Grok Build</span>
+                </button>
+                <button id="vendor-btn-copilot" class="vendor-toggle-btn" data-vendor="copilot">
+                  <img src="/copilot-avatar.svg" class="vendor-toggle-icon" alt="GitHub Copilot">
+                  <span class="vendor-toggle-label">GitHub Copilot CLI</span>
+                </button>
+                <button id="vendor-btn-qwen" class="vendor-toggle-btn" data-vendor="qwen">
+                  <img src="/qwen-avatar.svg" class="vendor-toggle-icon" alt="Qwen">
+                  <span class="vendor-toggle-label">Qwen Code</span>
+                </button>
+                <button id="vendor-btn-junie" class="vendor-toggle-btn" data-vendor="junie">
+                  <img src="/junie-avatar.svg" class="vendor-toggle-icon" alt="Junie">
+                  <span class="vendor-toggle-label">Junie CLI</span>
+                </button>
                 <button id="vendor-btn-kiro" class="vendor-toggle-btn" data-vendor="kiro">
                   <img src="/kiro-avatar.svg" class="vendor-toggle-icon" alt="Kiro">
                   <span class="vendor-toggle-label">Kiro CLI</span>
@@ -664,6 +680,7 @@
 
   <div id="file-viewer" class="hidden">
     <div class="file-viewer-header">
+      <div class="file-viewer-tabs" id="file-viewer-tabs" role="tablist"></div>
       <span class="file-viewer-path" id="file-viewer-path"></span>
       <span class="file-viewer-live-status hidden" id="file-viewer-live-status" aria-live="polite">
         <span class="file-viewer-live-dot"></span>
@@ -2344,7 +2361,7 @@
 <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0/lib/addon-fit.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links@0/lib/addon-web-links.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-webgl@0/lib/addon-webgl.min.js"></script>
-<script type="module" src="app.js?v=20260824g"></script>
+<script type="module" src="app.js?v=20260826a"></script>
 <div id="pwa-install-modal" class="pwa-modal hidden">
   <div class="pwa-modal-backdrop"></div>
   <div class="pwa-modal-card">

package/lib/public/junie-avatar.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Junie">
+  <defs>
+    <linearGradient id="junie-gradient" x1="8" y1="8" x2="56" y2="56" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#8B5CF6"/>
+      <stop offset="1" stop-color="#F97316"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="15" fill="url(#junie-gradient)"/>
+  <path d="M39 15v26c0 7.7-5.4 12-13.2 12-5.3 0-9.4-2.2-12-6.4l7.1-5c1.3 2 2.7 3 4.6 3 2.5 0 4-1.4 4-4.4V15H39Z" fill="#fff"/>
+  <circle cx="47.5" cy="17.5" r="4.5" fill="#fff" fill-opacity=".9"/>
+</svg>

package/lib/public/kimi-avatar.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Kimi Code">
+  <rect width="64" height="64" rx="14" fill="#1769ff"/>
+  <path d="M18 14h9v15l13-15h11L36 31l16 19H40L27 34v16h-9z" fill="#fff"/>
+</svg>

package/lib/public/modules/agent-config-selects.js

@@ -0,0 +1,69 @@
+import { VENDOR_NAMES, VENDOR_ORDER, isExperimentalVendor } from './app-rendering.js';
+import { effortLevelsFor, effortDisplayName } from './app-panels.js';
+
+function optionValue(entry) {
+  if (typeof entry === "string") return entry;
+  return entry && (entry.value || entry.id) || "";
+}
+
+function optionLabel(entry) {
+  if (typeof entry === "string") return entry;
+  return entry && (entry.displayName || entry.name || entry.value || entry.id) || "";
+}
+
+export function buildAgentVendorSelect(installed, preferred) {
+  var select = document.createElement("select");
+  select.className = "wt-modal-input";
+  for (var i = 0; i < VENDOR_ORDER.length; i++) {
+    var vendor = VENDOR_ORDER[i];
+    if (installed.indexOf(vendor) === -1) continue;
+    var option = document.createElement("option");
+    option.value = vendor;
+    option.textContent = (isExperimentalVendor(vendor) ? "🧪 " : "") + (VENDOR_NAMES[vendor] || vendor);
+    if (isExperimentalVendor(vendor)) option.title = "Experimental integration; not yet validated through direct use testing";
+    select.appendChild(option);
+  }
+  if (preferred && installed.indexOf(preferred) !== -1) select.value = preferred;
+  return select;
+}
+
+export function fillAgentModels(select, vendor, options, preferred) {
+  var models = (options.modelsByVendor && options.modelsByVendor[vendor]) || [];
+  select.innerHTML = "";
+  var automatic = document.createElement("option");
+  automatic.value = "";
+  automatic.textContent = "Automatic";
+  select.appendChild(automatic);
+  for (var i = 0; i < models.length; i++) {
+    var option = document.createElement("option");
+    option.value = optionValue(models[i]);
+    option.textContent = optionLabel(models[i]);
+    select.appendChild(option);
+  }
+  select.value = preferred || "";
+  if (select.selectedIndex === -1) select.value = "";
+}
+
+export function buildAgentEffortSelect() {
+  var select = document.createElement("select");
+  select.className = "wt-modal-input";
+  return select;
+}
+
+export function fillAgentEffort(select, vendor, options, modelValue, preferred) {
+  var previous = preferred === undefined ? select.value : preferred;
+  var models = (options.modelsByVendor && options.modelsByVendor[vendor]) || [];
+  var levels = effortLevelsFor(vendor, models, modelValue);
+  select.innerHTML = "";
+  var automatic = document.createElement("option");
+  automatic.value = "";
+  automatic.textContent = "Default";
+  select.appendChild(automatic);
+  for (var i = 0; i < levels.length; i++) {
+    var option = document.createElement("option");
+    option.value = levels[i];
+    option.textContent = effortDisplayName(levels[i]);
+    select.appendChild(option);
+  }
+  select.value = levels.indexOf(previous) !== -1 ? previous : "";
+}

package/lib/public/modules/app-connection.js

@@ -17,6 +17,7 @@ var reconnectTimer = null;
 var reconnectDelay = 1000;
 var connectTimeoutId = null;
 var connectOverlay = null;
+var hasConnectedOnce = false;
 
 export function initConnection() {
   connectOverlay = document.getElementById("connect-overlay");
@@ -39,6 +40,7 @@ export function initConnection() {
     if (state.connected !== prev.connected) {
       var sendBtn = getSendBtn();
       if (state.connected) {
+        hasConnectedOnce = true;
         if (sendBtn) sendBtn.disabled = false;
         if (connectOverlay) connectOverlay.classList.add("hidden");
         var updPill = document.getElementById("update-pill-wrap");
@@ -46,6 +48,10 @@ export function initConnection() {
         stopLogoAnimation();
       } else {
         if (sendBtn) sendBtn.disabled = true;
+        if (hasConnectedOnce && connectOverlay) {
+          var overlayMessage = document.getElementById("connect-overlay-msg");
+          if (overlayMessage) overlayMessage.textContent = "Reconnecting to server…";
+        }
         if (connectOverlay) connectOverlay.classList.remove("hidden");
         startLogoAnimation();
       }

package/lib/public/modules/app-header.js

@@ -12,7 +12,6 @@ import { saveToolState, resetToolState, restoreToolState } from './tools.js';
 import { getSessionUsage, setSessionUsage, getContextData, setContextData, updateContextPanel, updateUsagePanel } from './app-panels.js';
 import { onHistoryPrepended as onSessionSearchHistoryPrepended } from './session-search.js';
 import { getCachedSessions } from './sidebar-sessions.js';
-import { openPairDialog } from './split-pair-ui.js';
 import { showConfirm } from './app-misc.js';
 
 // --- Module-owned state ---
@@ -23,27 +22,6 @@ export function initHeader() {
   var headerRenameBtn = document.getElementById("header-rename-btn");
   var headerTitleEl = document.getElementById("header-title");
   var headerInfoBtn = document.getElementById("header-info-btn");
-  var headerAddWorkerBtn = document.getElementById("header-add-worker-btn");
-
-  // --- Add Worker: the current session becomes the Driver of a new pair ---
-  if (headerAddWorkerBtn) {
-    headerAddWorkerBtn.addEventListener("click", function () {
-      var sessionId = store.get('activeSessionId');
-      if (!sessionId || store.get('splitPanes') || store.get('dmMode')) return;
-      openPairDialog({
-        sessionId: sessionId,
-        title: headerTitleEl ? headerTitleEl.textContent : "",
-        vendor: store.get('currentVendor') || "claude",
-      });
-    });
-    // A split shows the GROUP in the title bar; adding a worker there makes
-    // no sense (the group already has two members), so hide the button.
-    store.subscribe(function (state, prev) {
-      if (state.splitPanes !== prev.splitPanes) {
-        headerAddWorkerBtn.classList.toggle("hidden", !!state.splitPanes);
-      }
-    });
-  }
   var headerFullAccessBtn = document.getElementById("header-full-access-btn");
 
   function updateFullAccessButton() {