bosun 0.30.0 → 0.31.0

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.0",
   "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/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/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/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() {
@@ -660,7 +660,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 +4339,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 +5468,21 @@ 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/embedded mode)
+  if (process.env.BOSUN_DESKTOP !== "1" && !options.skipAutoOpen) {
+    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) {