bosun 0.30.0 → 0.31.2

package/desktop/launch.mjs

@@ -42,6 +42,7 @@ function ensureElectronInstalled() {
   const result = spawnSync("npm", ["install"], {
     cwd: desktopDir,
     stdio: "inherit",
+    shell: process.platform === "win32",
     env: process.env,
   });
   return result.status === 0 && existsSync(electronBin);
@@ -60,6 +61,7 @@ function launch() {
 
   const child = spawn(electronBin, args, {
     stdio: "inherit",
+    shell: process.platform === "win32",
     env: {
       ...process.env,
       BOSUN_DESKTOP: "1",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bosun",
-  "version": "0.30.0",
+  "version": "0.31.2",
   "description": "AI-powered orchestrator supervisor — manages AI agent executors with failover, auto-restarts on failure, analyzes crashes with Codex SDK, creates PRs via Vibe-Kanban API, and sends Telegram notifications. Supports N executors with weighted distribution, multi-repo projects, and auto-setup.",
   "type": "module",
   "license": "Apache 2.0",

package/setup-web-server.mjs

@@ -28,21 +28,43 @@ const MAX_PORT_ATTEMPTS = 20;
 
 const MODELS = {
   copilot: [
-    { value: "claude-sonnet-4", label: "Claude Sonnet 4 (recommended)", recommended: true },
-    { value: "claude-opus-4", label: "Claude Opus 4" },
-    { value: "gpt-4.1", label: "GPT-4.1" },
-    { value: "o3", label: "o3" },
-    { value: "gemini-2.5-pro", label: "Gemini 2.5 Pro" },
+    { value: "claude-opus-4.6", label: "claude-opus-4.6", recommended: true },
+    { value: "claude-sonnet-4.6", label: "claude-sonnet-4.6" },
+    { value: "claude-opus-4.5", label: "claude-opus-4.5" },
+    { value: "claude-sonnet-4.5", label: "claude-sonnet-4.5" },
+    { value: "claude-sonnet-4", label: "claude-sonnet-4" },
+    { value: "claude-haiku-4.5", label: "claude-haiku-4.5" },
+    { value: "gpt-5.2-codex", label: "gpt-5.2-codex" },
+    { value: "gpt-5.3-codex", label: "gpt-5.3-codex" },
+    { value: "gpt-5.1-codex", label: "gpt-5.1-codex" },
+    { value: "gpt-5.1-codex-mini", label: "gpt-5.1-codex-mini" },
+    { value: "gpt-5.1-codex-max", label: "gpt-5.1-codex-max" },
+    { value: "gpt-5.2", label: "gpt-5.2" },
+    { value: "gpt-5.1", label: "gpt-5.1" },
+    { value: "gpt-5-mini", label: "gpt-5-mini" },
+    { value: "gemini-3.1-pro", label: "gemini-3.1-pro" },
+    { value: "gemini-3-pro", label: "gemini-3-pro" },
+    { value: "gemini-3-flash", label: "gemini-3-flash" },
+    { value: "gemini-2.5-pro", label: "gemini-2.5-pro" },
+    { value: "grok-code-fast-1", label: "grok-code-fast-1" },
   ],
   codex: [
-    { value: "o3", label: "o3 (recommended)", recommended: true },
-    { value: "o4-mini", label: "o4-mini" },
-    { value: "gpt-4.1", label: "gpt-4.1" },
-    { value: "codex-mini-latest", label: "codex-mini-latest" },
+    { value: "gpt-5.3-codex", label: "gpt-5.3-codex", recommended: true },
+    { value: "gpt-5.2-codex", label: "gpt-5.2-codex" },
+    { value: "gpt-5.1-codex", label: "gpt-5.1-codex" },
+    { value: "gpt-5.1-codex-mini", label: "gpt-5.1-codex-mini" },
+    { value: "gpt-5.1-codex-max", label: "gpt-5.1-codex-max" },
+    { value: "gpt-5.2", label: "gpt-5.2" },
+    { value: "gpt-5.1", label: "gpt-5.1" },
+    { value: "gpt-5-mini", label: "gpt-5-mini" },
   ],
   claude: [
-    { value: "claude-sonnet-4-20250514", label: "Claude Sonnet 4 (recommended)", recommended: true },
-    { value: "claude-opus-4-20250514", label: "Claude Opus 4" },
+    { value: "claude-opus-4.6", label: "claude-opus-4.6", recommended: true },
+    { value: "claude-sonnet-4.6", label: "claude-sonnet-4.6" },
+    { value: "claude-opus-4.5", label: "claude-opus-4.5" },
+    { value: "claude-sonnet-4.5", label: "claude-sonnet-4.5" },
+    { value: "claude-sonnet-4", label: "claude-sonnet-4" },
+    { value: "claude-haiku-4.5", label: "claude-haiku-4.5" },
   ],
 };
 

package/ui/components/agent-selector.js

@@ -361,6 +361,36 @@ const AGENT_SELECTOR_STYLES = `
     padding: 8px 12px;
   }
 }
+
+/* ── Native Agent Select ── */
+.agent-picker-native {
+  appearance: none;
+  -webkit-appearance: none;
+  background: var(--tg-theme-secondary-bg-color, #1e1e2e);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 8px;
+  color: var(--tg-theme-text-color, #fff);
+  font-size: 12px;
+  font-weight: 500;
+  padding: 5px 28px 5px 28px;
+  cursor: pointer;
+  min-width: 120px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23999' d='M1 3l4 4 4-4'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  transition: border-color 0.2s ease;
+}
+.agent-picker-native:hover {
+  border-color: rgba(255,255,255,0.15);
+}
+.agent-picker-native:focus {
+  outline: none;
+  border-color: var(--tg-theme-button-color, #3b82f6);
+}
+.agent-picker-native option {
+  background: #1a1a2e;
+  color: #fff;
+}
 `;
 
 let _agentStylesInjected = false;
@@ -480,106 +510,41 @@ export function AgentModeSelector() {
  * ═══════════════════════════════════════════════ */
 
 export function AgentPicker() {
-  const [open, setOpen] = useState(false);
-  const wrapRef = useRef(null);
   const agents = availableAgents.value;
-  const current = activeAgentInfo.value;
+  const current = activeAgent.value;
   const loading = agentSelectorLoading.value;
 
-  // Close on outside click
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      if (wrapRef.current && !wrapRef.current.contains(e.target)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("pointerdown", handler, true);
-    return () => document.removeEventListener("pointerdown", handler, true);
-  }, [open]);
-
-  // Close on Escape
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e) => { if (e.key === "Escape") setOpen(false); };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [open]);
-
-  const handleToggle = useCallback(() => {
-    haptic("light");
-    setOpen((v) => !v);
-  }, []);
-
-  const handleSelect = useCallback((agentId) => {
-    if (agentId === activeAgent.value) {
-      setOpen(false);
-      return;
-    }
+  const handleChange = useCallback((e) => {
+    const agentId = e.target.value;
+    if (agentId === activeAgent.value) return;
     haptic("medium");
     switchAgent(agentId);
-    setOpen(false);
   }, []);
 
-  const currentIcon = current ? (AGENT_ICONS[current.id] || "🔌") : "🔌";
-  const currentName = current ? current.name : (loading ? "Loading…" : "Select Agent");
+  const currentIcon = AGENT_ICONS[current] || "⚡";
 
   return html`
-    <div class="agent-picker-wrap" ref=${wrapRef}>
-      <button
-        class="agent-picker-btn ${open ? "open" : ""}"
-        onClick=${handleToggle}
-        aria-haspopup="listbox"
-        aria-expanded=${open}
+    <div class="agent-picker-wrap">
+      <span class="picker-icon" style="position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:13px;pointer-events:none;z-index:1">${currentIcon}</span>
+      <select
+        class="agent-picker-native"
+        value=${current}
+        onChange=${handleChange}
+        disabled=${loading}
         title="Select AI agent"
       >
-        <span class="picker-icon">${currentIcon}</span>
-        <span>${currentName}</span>
-        <span class="agent-picker-chevron">▾</span>
-      </button>
-
-      ${open && html`
-        <div class="agent-picker-backdrop" onClick=${() => setOpen(false)} />
-        <div class="agent-picker-dropdown" role="listbox" aria-label="Available agents">
-          ${agents.length === 0 && html`
-            <div style="padding: 12px; text-align: center; color: var(--tg-theme-hint-color, #888); font-size: 12px;">
-              ${loading ? "Loading agents…" : "No agents available"}
-            </div>
-          `}
-          ${agents.map((agent) => {
-            const isActive = agent.id === activeAgent.value;
-            const icon = AGENT_ICONS[agent.id] || "🔌";
-            const statusClass = agent.busy ? "busy" : agent.available ? "available" : "offline";
-            const providerColor = PROVIDER_COLORS[agent.provider] || "#6b7280";
-
-            return html`
-              <button
-                key=${agent.id}
-                class="agent-picker-item ${isActive ? "active" : ""}"
-                role="option"
-                aria-selected=${isActive}
-                onClick=${() => handleSelect(agent.id)}
-              >
-                <div class="agent-picker-item-icon">${icon}</div>
-                <div class="agent-picker-item-info">
-                  <div class="agent-picker-item-name">${agent.name}</div>
-                  <div class="agent-picker-item-provider">
-                    <span
-                      class="agent-provider-badge"
-                      style="background: ${providerColor}"
-                    >${agent.provider}</span>
-                  </div>
-                </div>
-                <div class="agent-picker-item-end">
-                  <span class="agent-picker-status-dot ${statusClass}"
-                        title=${statusClass} />
-                  ${isActive && html`<span class="agent-picker-check">✓</span>`}
-                </div>
-              </button>
-            `;
-          })}
-        </div>
-      `}
+        ${agents.length === 0 && html`
+          <option disabled>${loading ? "Loading…" : "No agents"}</option>
+        `}
+        ${agents.map((agent) => {
+          const statusLabel = agent.busy ? " (busy)" : !agent.available ? " (offline)" : "";
+          return html`
+            <option key=${agent.id} value=${agent.id}>
+              ${agent.name} · ${agent.provider}${statusLabel}
+            </option>
+          `;
+        })}
+      </select>
     </div>
   `;
 }

package/ui/components/chat-view.js

@@ -268,6 +268,7 @@ export function ChatView({ sessionId, readOnly = false, embedded = false }) {
   const [autoScroll, setAutoScroll] = useState(true);
   const [unreadCount, setUnreadCount] = useState(0);
   const [visibleCount, setVisibleCount] = useState(200);
+  const [showStreamMeta, setShowStreamMeta] = useState(false);
   const [filters, setFilters] = useState({
     tool: false,
     result: false,
@@ -704,15 +705,12 @@ export function ChatView({ sessionId, readOnly = false, embedded = false }) {
             >
               ${paused ? "Resume" : "Pause"}
             </button>
-            <button class="btn btn-ghost btn-xs" onClick=${handleCopyStream} title="Copy stream">
-              Copy
-            </button>
-            <button class="btn btn-ghost btn-xs" onClick=${handleExportStream} title="Export stream">
-              Export
+            <button class="btn btn-ghost btn-xs" onClick=${() => setShowStreamMeta((prev) => !prev)} title="Toggle filters">
+              ${showStreamMeta ? "Hide filters" : "Filters"}
             </button>
           </div>
         </div>
-        <div class="chat-stream-meta">
+        <div class="chat-stream-meta ${showStreamMeta ? 'expanded' : ''}">
           <div class="chat-stream-filters">
             <button
               class="chat-filter-chip ${activeFilters.length === 0 ? "active" : ""}"

package/ui/components/shared.js

@@ -4,6 +4,7 @@
  * ────────────────────────────────────────────────────────────── */
 
 import { h } from "preact";
+import { createPortal } from "preact/compat";
 import {
   useState,
   useEffect,
@@ -319,7 +320,7 @@ export function Modal({ title, open = true, onClose, children, contentClassName
     ? `transform: translateY(${dragY}px); opacity: ${Math.max(0.2, 1 - dragY / 400)}`
     : "";
 
-  return html`
+  const content = html`
     <div
       class="modal-overlay ${visible ? "modal-overlay-visible" : ""}"
       onClick=${(e) => {
@@ -354,6 +355,7 @@ export function Modal({ title, open = true, onClose, children, contentClassName
       </div>
     </div>
   `;
+  return createPortal(content, document.body);
 }
 
 /* ═══════════════════════════════════════════════

package/ui/setup.html

@@ -410,6 +410,7 @@ function SelectWithCustom({ options, value, onChange, placeholder }) {
   const handleSelect = (e) => {
     if (e.target.value === "__custom__") {
       setIsCustom(true);
+      setCustomValue(value || "");
       setTimeout(() => inputRef.current?.focus(), 50);
     } else {
       setIsCustom(false);
@@ -418,9 +419,12 @@ function SelectWithCustom({ options, value, onChange, placeholder }) {
     }
   };
 
-  const handleCustomChange = (e) => {
-    setCustomValue(e.target.value);
-    onChange(e.target.value);
+  const commitCustom = () => {
+    if (customValue.trim()) onChange(customValue.trim());
+  };
+
+  const handleCustomKeyDown = (e) => {
+    if (e.key === "Enter") { commitCustom(); e.target.blur(); }
   };
 
   return html`
@@ -435,8 +439,10 @@ function SelectWithCustom({ options, value, onChange, placeholder }) {
           ref=${inputRef}
           type="text"
           value=${customValue}
-          oninput=${handleCustomChange}
-          placeholder="Enter custom value..."
+          oninput=${(e) => setCustomValue(e.target.value)}
+          onblur=${commitCustom}
+          onkeydown=${handleCustomKeyDown}
+          placeholder="Enter model slug..."
         />
         <button class="btn btn-sm" onclick=${() => { setIsCustom(false); onChange(options[0]?.value || ""); }}>
           Cancel
@@ -469,8 +475,8 @@ function App() {
   const [repoSlug, setRepoSlug] = useState("");
   const [repoRoot, setRepoRoot] = useState("");
   const [executors, setExecutors] = useState([
-    { name: "primary", executor: "COPILOT", model: "claude-sonnet-4", weight: 70, role: "primary" },
-    { name: "backup", executor: "CODEX", model: "o3", weight: 30, role: "backup" },
+    { name: "primary", executor: "COPILOT", model: "claude-opus-4.6", weight: 70, role: "primary" },
+    { name: "backup", executor: "CODEX", model: "gpt-5.2-codex", weight: 30, role: "backup" },
   ]);
   const [repos, setRepos] = useState([""]);
   const [kanbanBackend, setKanbanBackend] = useState("internal");

package/ui/styles/components.css

@@ -845,7 +845,7 @@ select.input {
   background: var(--backdrop);
   backdrop-filter: var(--backdrop-blur);
   -webkit-backdrop-filter: var(--backdrop-blur);
-  z-index: 9500;
+  z-index: 10000;
   display: flex;
   align-items: flex-end;
   justify-content: center;
@@ -882,6 +882,21 @@ select.input {
   max-width: 860px;
 }
 
+/* ── Desktop: Center modal as dialog ── */
+@media (min-width: 769px) {
+  .modal-overlay {
+    align-items: center;
+    padding: 24px;
+    z-index: 10000;
+  }
+  .modal-content {
+    border-radius: var(--radius-xl);
+    border-bottom: 1px solid var(--border);
+    max-height: 85vh;
+    animation: springUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+}
+
 .modal-form-grid {
   display: flex;
   flex-direction: column;

package/ui/styles/sessions.css

@@ -66,19 +66,7 @@
   }
 }
 
-@media (min-width: 1200px) {
-  .app-shell[data-has-rail="true"] .session-split {
-    grid-template-columns: 1fr;
-  }
-
-  .app-shell[data-has-rail="true"] .session-pane {
-    display: none;
-  }
-
-  .app-shell[data-has-rail="true"] .chat-shell-header .session-drawer-btn {
-    display: none;
-  }
-}
+/* Rail no longer hides the session pane on desktop — sessions always visible */
 
 @media (max-width: 768px) {
   .session-split {
@@ -173,7 +161,7 @@
   width: 100%;
   max-width: 980px;
   margin: 0 auto;
-  padding: 12px 12px;
+  padding: 8px 16px;
 }
 
 .session-drawer-btn {
@@ -567,10 +555,10 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  padding: 12px 12px 6px;
+  gap: 8px;
+  padding: 6px 16px;
   border-bottom: 1px solid var(--border);
-  background: var(--bg-secondary);
+  background: var(--bg-primary);
 }
 
 .chat-stream-status {
@@ -581,11 +569,11 @@
 }
 
 .chat-stream-dot {
-  width: 10px;
-  height: 10px;
+  width: 8px;
+  height: 8px;
   border-radius: 999px;
   background: var(--text-hint);
-  box-shadow: 0 0 0 4px rgba(218, 119, 86, 0.1);
+  box-shadow: 0 0 0 3px rgba(218, 119, 86, 0.1);
 }
 
 .chat-stream-dot.thinking,
@@ -641,12 +629,16 @@
 }
 
 .chat-stream-meta {
-  display: flex;
+  display: none;
   flex-direction: column;
-  gap: 8px;
-  padding: 6px 12px 10px;
+  gap: 6px;
+  padding: 4px 16px 6px;
   border-bottom: 1px solid var(--border);
-  background: var(--bg-secondary);
+  background: var(--bg-primary);
+}
+
+.chat-stream-meta.expanded {
+  display: flex;
 }
 
 .chat-stream-filters {
@@ -784,11 +776,14 @@
   scroll-padding-bottom: 80px;
   scrollbar-width: thin;
   scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
-  padding: 20px 16px 48px;
+  padding: 24px 24px 48px;
   display: flex;
   flex-direction: column;
-  gap: var(--space-sm);
+  gap: 6px;
   align-items: stretch;
+  max-width: 860px;
+  margin: 0 auto;
+  width: 100%;
 }
 
 .chat-messages::-webkit-scrollbar {
@@ -862,16 +857,16 @@
 /* ─── Bubbles ─── */
 .chat-bubble {
   width: 100%;
-  max-width: min(760px, 100%);
-  padding: 10px 14px;
-  border-radius: var(--radius-md);
-  font-size: 13px;
-  line-height: 1.5;
+  max-width: 100%;
+  padding: 12px 16px;
+  border-radius: 18px;
+  font-size: 14px;
+  line-height: 1.6;
   word-wrap: break-word;
-  border: 1px solid transparent;
+  border: none;
   background: var(--bg-card);
   align-self: flex-start;
-  box-shadow: var(--shadow-sm);
+  box-shadow: none;
   /* CSS containment — tells the browser each bubble is layout-independent,
      reducing style recalc and layout thrashing on long message lists */
   content-visibility: auto;
@@ -882,17 +877,20 @@
 .chat-bubble.user {
   align-self: flex-end;
   width: auto;
-  max-width: min(560px, 100%);
-  background: rgba(218, 119, 86, 0.16);
-  border-color: rgba(218, 119, 86, 0.35);
+  max-width: min(75%, 560px);
+  background: rgba(218, 119, 86, 0.14);
+  border: none;
   color: var(--text-primary);
+  border-radius: 18px 18px 4px 18px;
 }
 
 .chat-bubble.assistant {
   align-self: flex-start;
-  background: var(--bg-card);
+  background: rgba(255, 255, 255, 0.03);
   color: var(--text-primary);
-  border-color: var(--border);
+  border: none;
+  border-radius: 18px 18px 18px 4px;
+  padding: 12px 4px;
 }
 
 .chat-bubble.system {
@@ -901,21 +899,25 @@
   background: transparent;
   padding: 6px 12px;
   box-shadow: none;
+  border: none;
 }
 
 .chat-bubble.tool {
   align-self: center;
-  background: rgba(218, 119, 86, 0.08);
-  border: 1px solid rgba(218, 119, 86, 0.28);
+  background: rgba(218, 119, 86, 0.06);
+  border: 1px solid rgba(218, 119, 86, 0.15);
   color: var(--text-primary);
   font-family: var(--font-mono);
+  border-radius: 12px;
+  font-size: 12px;
 }
 
 .chat-bubble.error {
   align-self: center;
-  background: rgba(229, 83, 75, 0.12);
-  border: 1px solid rgba(229, 83, 75, 0.4);
+  background: rgba(229, 83, 75, 0.08);
+  border: 1px solid rgba(229, 83, 75, 0.25);
   color: var(--text-primary);
+  border-radius: 12px;
 }
 
 .chat-system-text {
@@ -926,6 +928,7 @@
 }
 
 .chat-bubble-label {
+  display: none;
   font-size: 10px;
   font-weight: 600;
   text-transform: uppercase;
@@ -934,14 +937,19 @@
   margin-bottom: 4px;
 }
 
+.chat-bubble.tool .chat-bubble-label,
+.chat-bubble.error .chat-bubble-label {
+  display: block;
+}
+
 .chat-bubble-content {
   white-space: pre-wrap;
 }
 
 .chat-bubble-time {
   font-size: 10px;
-  opacity: 0.6;
-  margin-top: 4px;
+  opacity: 0.4;
+  margin-top: 6px;
 }
 
 /* Subtle entrance for bubbles — only the last few get the animation
@@ -1908,3 +1916,30 @@ ul.md-list li::before {
     max-width: min(840px, 100%);
   }
 }
+
+/* ── Focus mode exit FAB ── */
+.focus-exit-fab {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  z-index: 10001;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  background: #ef4444;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+.focus-exit-fab:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
+}

package/ui/tabs/agents.js

@@ -1280,9 +1280,6 @@ export function AgentsTab() {
         </div>
       `}
 
-      <div class="fleet-span">
-        <${SessionsPanel} />
-      </div>
     </div>
 
     ${selectedAgent && html`

package/ui/tabs/chat.js

@@ -691,9 +691,11 @@ export function ChatTab() {
           html`
             <div class="chat-shell-header">
               <div class="chat-shell-inner">
-                <button class="session-drawer-btn" onClick=${handleBack}>
-                  ☰ Sessions
-                </button>
+                ${isMobile && html`
+                  <button class="session-drawer-btn" onClick=${handleBack}>
+                    ☰ Sessions
+                  </button>
+                `}
                 <div class="chat-shell-title">
                   <div class="chat-shell-name">${sessionTitle}</div>
                   <div class="chat-shell-meta">${sessionMeta || "Session"}</div>
@@ -784,6 +786,13 @@ export function ChatTab() {
           </div>
         </div>
       </div>
+      ${focusMode && html`
+        <button 
+          class="focus-exit-fab"
+          onClick=${() => setFocusMode(false)}
+          title="Exit focus mode"
+        >✕</button>
+      `}
       ${isMobile &&
       html`
         <div

package/ui/tabs/settings.js

@@ -90,26 +90,44 @@ const SETTINGS_STYLES = `
 /* Floating save bar */
 .settings-save-bar {
   position: fixed;
-  bottom: calc(var(--nav-height) + var(--safe-bottom) + 10px);
-  left: 0; right: 0;
-  z-index: 1000;
+  bottom: calc(var(--nav-height, 60px) + var(--safe-bottom, 0px) + 12px);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 999;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   flex-wrap: wrap;
   row-gap: 8px;
-  padding: 12px 16px;
-  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
+  padding: 10px 16px;
+  min-width: 240px;
+  max-width: 480px;
+  width: auto;
   background: var(--glass-bg, rgba(30,30,46,0.95));
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
-  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
+  border: 1px solid var(--border, rgba(255,255,255,0.08));
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+  transition: all 0.2s ease;
   animation: slideUp 0.25s ease;
 }
+.settings-save-bar--dirty {
+  border-color: var(--accent, #5b6eae);
+  box-shadow: 0 4px 20px rgba(91, 110, 174, 0.25);
+}
+.settings-save-bar--clean .save-bar-info {
+  color: var(--text-hint, #666);
+  font-size: 12px;
+}
+.setting-modified-dot--clean {
+  background: var(--text-hint, #666) !important;
+  opacity: 0.4;
+}
 @keyframes slideUp {
-  from { transform: translateY(100%); opacity: 0; }
-  to   { transform: translateY(0);    opacity: 1; }
+  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
+  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
 }
 .settings-save-bar .save-bar-info {
   display: flex;
@@ -129,7 +147,7 @@ const SETTINGS_STYLES = `
 }
 @media (min-width: 1200px) {
   .settings-save-bar {
-    bottom: 0;
+    bottom: 16px;
   }
 }
 /* Individual setting row */
@@ -359,6 +377,7 @@ const SETTINGS_STYLES = `
   margin-right: auto;
   width: 100%;
   box-sizing: border-box;
+  padding-bottom: 80px;
 }
 
 body.settings-save-open .main-content {
@@ -1069,15 +1088,14 @@ function ServerConfigMode() {
       <//>
     `}
 
-    <!-- Floating save bar -->
-    ${changeCount > 0 &&
-    html`
-      <div class="settings-save-bar">
-        <div class="save-bar-info">
-          <span class="setting-modified-dot"></span>
-          <span>${changeCount} unsaved change${changeCount !== 1 ? "s" : ""}</span>
-        </div>
-        <div class="save-bar-actions">
+    <!-- Floating save bar - always visible -->
+    <div class=${`settings-save-bar ${changeCount > 0 ? 'settings-save-bar--dirty' : 'settings-save-bar--clean'}`}>
+      <div class="save-bar-info">
+        <span class=${`setting-modified-dot ${changeCount === 0 ? 'setting-modified-dot--clean' : ''}`}></span>
+        <span>${changeCount > 0 ? `${changeCount} unsaved change${changeCount !== 1 ? "s" : ""}` : "All changes saved"}</span>
+      </div>
+      <div class="save-bar-actions">
+        ${changeCount > 0 && html`
           <button class="btn btn-ghost btn-sm" onClick=${handleDiscard}>
             Discard
           </button>
@@ -1088,9 +1106,9 @@ function ServerConfigMode() {
           >
             ${saving ? html`<${Spinner} size=${14} /> Saving…` : "Save Changes"}
           </button>
-        </div>
+        `}
       </div>
-    `}
+    </div>
 
     <!-- Confirm dialog with diff -->
     ${confirmOpen &&
@@ -1176,33 +1194,38 @@ function AppPreferencesMode() {
   /* Load prefs from CloudStorage on mount */
   useEffect(() => {
     (async () => {
-      const [fs, ct, nu, ne, nc, dm, dmp, ds, dr] = await Promise.all([
-        cloudGet("fontSize"),
-        cloudGet("colorTheme"),
-        cloudGet("notifyUpdates"),
-        cloudGet("notifyErrors"),
-        cloudGet("notifyComplete"),
-        cloudGet("debugMode"),
-        cloudGet("defaultMaxParallel"),
-        cloudGet("defaultSdk"),
-        cloudGet("defaultRegion"),
-      ]);
-      if (fs) {
-        setFontSize(fs);
-        applyFontSize(fs);
-      }
-      if (ct) {
-        setColorTheme(ct);
-        applyColorTheme(ct);
+      try {
+        const [fs, ct, nu, ne, nc, dm, dmp, ds, dr] = await Promise.all([
+          cloudGet("fontSize"),
+          cloudGet("colorTheme"),
+          cloudGet("notifyUpdates"),
+          cloudGet("notifyErrors"),
+          cloudGet("notifyComplete"),
+          cloudGet("debugMode"),
+          cloudGet("defaultMaxParallel"),
+          cloudGet("defaultSdk"),
+          cloudGet("defaultRegion"),
+        ]);
+        if (fs) {
+          setFontSize(fs);
+          applyFontSize(fs);
+        }
+        if (ct) {
+          setColorTheme(ct);
+          applyColorTheme(ct);
+        }
+        if (nu != null) setNotifyUpdates(nu);
+        if (ne != null) setNotifyErrors(ne);
+        if (nc != null) setNotifyComplete(nc);
+        if (dm != null) setDebugMode(dm);
+        if (dmp != null) setDefaultMaxParallel(dmp);
+        if (ds) setDefaultSdk(ds);
+        if (dr) setDefaultRegion(dr);
+      } catch (err) {
+        console.warn('[AppPrefs] Failed to load preferences:', err);
+      } finally {
+        setLoaded(true);
       }
-      if (nu != null) setNotifyUpdates(nu);
-      if (ne != null) setNotifyErrors(ne);
-      if (nc != null) setNotifyComplete(nc);
-      if (dm != null) setDebugMode(dm);
-      if (dmp != null) setDefaultMaxParallel(dmp);
-      if (ds) setDefaultSdk(ds);
-      if (dr) setDefaultRegion(dr);
-      setLoaded(true);
     })();
   }, []);
 
@@ -1211,6 +1234,7 @@ function AppPreferencesMode() {
     const next = !getter;
     setter(next);
     cloudSet(key, next);
+    console.log('[AppPrefs] Saved:', key, next);
     haptic();
     showToast("Preference saved", "success");
   }, []);
@@ -1218,6 +1242,7 @@ function AppPreferencesMode() {
   const handleFontSize = (v) => {
     setFontSize(v);
     cloudSet("fontSize", v);
+    console.log('[AppPrefs] Saved: fontSize', v);
     haptic();
     applyFontSize(v);
     showToast("Font size saved", "success");
@@ -1226,6 +1251,7 @@ function AppPreferencesMode() {
   const handleColorTheme = (v) => {
     setColorTheme(v);
     cloudSet("colorTheme", v);
+    console.log('[AppPrefs] Saved: colorTheme', v);
     haptic();
     applyColorTheme(v);
     showToast("Theme saved", "success");
@@ -1235,6 +1261,7 @@ function AppPreferencesMode() {
     const val = Math.max(1, Math.min(20, Number(v)));
     setDefaultMaxParallel(val);
     cloudSet("defaultMaxParallel", val);
+    console.log('[AppPrefs] Saved: defaultMaxParallel', val);
     haptic();
     showToast("Preference saved", "success");
   };
@@ -1242,6 +1269,7 @@ function AppPreferencesMode() {
   const handleDefaultSdk = (v) => {
     setDefaultSdk(v);
     cloudSet("defaultSdk", v);
+    console.log('[AppPrefs] Saved: defaultSdk', v);
     haptic();
     showToast("Preference saved", "success");
   };
@@ -1249,6 +1277,7 @@ function AppPreferencesMode() {
   const handleDefaultRegion = (v) => {
     setDefaultRegion(v);
     cloudSet("defaultRegion", v);
+    console.log('[AppPrefs] Saved: defaultRegion', v);
     haptic();
     showToast("Preference saved", "success");
   };
@@ -1312,7 +1341,7 @@ function AppPreferencesMode() {
       : "";
 
   return html`
-    ${!loaded && html`<${Card} title="Loading Settings…"><${SkeletonCard} /><//>`}
+
 
     <!-- ─── Account ─── -->
     <${Collapsible} title="👤 Account" defaultOpen=${true}>

package/ui/tabs/tasks.js

@@ -214,6 +214,27 @@ export function StartTaskModal({
   }, [task?.id, task?.meta?.codex?.isIgnored, task?.meta?.labels]);
 
   const canModel = sdk && sdk !== "auto";
+
+  const EXECUTOR_MODELS = {
+    codex: [
+      "gpt-5.3-codex", "gpt-5.2-codex", "gpt-5.1-codex",
+      "gpt-5.1-codex-mini", "gpt-5.1-codex-max",
+      "gpt-5.2", "gpt-5.1", "gpt-5-mini",
+    ],
+    copilot: [
+      "claude-opus-4.6", "claude-sonnet-4.6", "claude-opus-4.5", "claude-sonnet-4.5",
+      "claude-sonnet-4", "claude-haiku-4.5",
+      "gpt-5.2-codex", "gpt-5.3-codex", "gpt-5.1-codex", "gpt-5.1-codex-mini",
+      "gpt-5.2", "gpt-5.1", "gpt-5-mini",
+      "gemini-3.1-pro", "gemini-3-pro", "gemini-3-flash", "gemini-2.5-pro",
+      "grok-code-fast-1",
+    ],
+    claude: [
+      "claude-opus-4.6", "claude-sonnet-4.6", "claude-opus-4.5",
+      "claude-sonnet-4.5", "claude-sonnet-4", "claude-haiku-4.5",
+    ],
+  };
+
   const resolvedTaskId = (task?.id || taskIdInput || "").trim();
 
   const handleStart = async () => {
@@ -272,13 +293,10 @@ export function StartTaskModal({
         </div>
         <div class="modal-form-field">
           <div class="card-subtitle">Model Override (optional)</div>
-          <input
-            class="input"
-            placeholder=${canModel ? "e.g. gpt-5.3-codex" : "Select SDK to enable"}
-            value=${model}
-            disabled=${!canModel}
-            onInput=${(e) => setModel(e.target.value)}
-          />
+          <select class="input" value=${model} disabled=${!canModel} onChange=${(e) => setModel(e.target.value)}>
+            <option value="">Auto (default)</option>
+            ${canModel && (EXECUTOR_MODELS[sdk] || []).map(m => html`<option value=${m}>${m}</option>`)}
+          </select>
         </div>
         <div class="modal-form-field modal-form-span">
           <button

package/ui-server.mjs

@@ -110,7 +110,7 @@ let _configValidator = null;
 function resolveConfigPath() {
   return process.env.BOSUN_CONFIG_PATH
     ? resolve(process.env.BOSUN_CONFIG_PATH)
-    : resolve(__dirname, "bosun.config.json");
+    : resolve(resolveUiConfigDir(), "bosun.config.json");
 }
 
 function getConfigSchema() {
@@ -546,6 +546,8 @@ let uiServer = null;
 let uiServerUrl = null;
 let uiServerTls = false;
 let wsServer = null;
+/** Auto-open browser: only once per process, never during tests */
+let _browserOpened = false;
 const wsClients = new Set();
 let sessionListenerAttached = false;
 /** @type {ReturnType<typeof setInterval>|null} */
@@ -660,7 +662,7 @@ const SETTINGS_KNOWN_SET = new Set(SETTINGS_KNOWN_KEYS);
 let _settingsLastUpdateTime = 0;
 
 function updateEnvFile(changes) {
-  const envPath = resolve(__dirname, '.env');
+  const envPath = resolve(resolveUiConfigDir(), '.env');
   let content = '';
   try { content = readFileSync(envPath, 'utf8'); } catch { content = ''; }
 
@@ -4339,7 +4341,7 @@ async function handleApi(req, res, url) {
           data[key] = val || "";
         }
       }
-      const envPath = resolve(__dirname, ".env");
+      const envPath = resolve(resolveUiConfigDir(), ".env");
       const configPath = resolveConfigPath();
       const configExists = existsSync(configPath);
       const configSchema = getConfigSchema();
@@ -5468,6 +5470,32 @@ export async function startTelegramUiServer(options = {}) {
   console.log(`[telegram-ui] LAN access: ${protocol}://${lanIp}:${actualPort}`);
   console.log(`[telegram-ui] Browser access: ${protocol}://${lanIp}:${actualPort}/?token=${sessionToken}`);
 
+  // Auto-open browser:
+  //  - skip in desktop/Electron mode (BOSUN_DESKTOP=1)
+  //  - skip when caller passes skipAutoOpen
+  //  - skip during Vitest / Jest test runs (avoids opening 20+ tabs during `npm test`)
+  //  - only open ONCE per process (singleton guard — prevents loops on server restart)
+  const isTestRun = process.env.VITEST || process.env.NODE_ENV === "test" || process.env.JEST_WORKER_ID;
+  if (
+    process.env.BOSUN_DESKTOP !== "1" &&
+    !options.skipAutoOpen &&
+    !_browserOpened &&
+    !isTestRun
+  ) {
+    _browserOpened = true;
+    const openUrl = `${protocol}://${lanIp}:${actualPort}/?token=${sessionToken}`;
+    try {
+      const { exec } = await import("node:child_process");
+      if (process.platform === "win32") {
+        exec(`start "" "${openUrl}"`);
+      } else if (process.platform === "darwin") {
+        exec(`open "${openUrl}"`);
+      } else {
+        exec(`xdg-open "${openUrl}"`);
+      }
+    } catch { /* ignore auto-open failure */ }
+  }
+
   // Check firewall rules for the UI port
   firewallState = await checkFirewall(actualPort);
   if (firewallState) {