bosun 0.36.2 → 0.36.3

package/ui/styles/sessions.css

@@ -103,8 +103,14 @@
     left: 0;
     bottom: calc(var(--nav-height) + var(--safe-bottom));
     width: min(88vw, 360px);
-    transform: translateX(-100%);
-    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
+    transform: translateX(calc(-100% - 24px));
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition:
+      transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
+      opacity 0.2s ease,
+      visibility 0s linear 0.28s;
     will-change: transform;
     z-index: 160;
     box-shadow: 12px 0 40px rgba(0, 0, 0, 0.35);
@@ -113,6 +119,10 @@
 
   .session-split.drawer-open .session-pane {
     transform: translateX(0);
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transition-delay: 0s, 0s, 0s;
   }
 
   .session-split>.session-detail {
@@ -869,14 +879,56 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: var(--space-lg);
-  gap: var(--space-sm);
-  border: 1px dashed var(--border);
-  border-radius: var(--radius-md);
-  background: rgba(8, 12, 20, 0.35);
+  width: min(720px, 100%);
+  margin: 0 auto;
+  padding: clamp(18px, 2.8vw, 30px) clamp(18px, 3.2vw, 34px);
+  gap: 10px;
+  border: 1px dashed rgba(148, 163, 184, 0.32);
+  border-radius: 14px;
+  background: linear-gradient(180deg, rgba(17, 23, 34, 0.55), rgba(8, 12, 20, 0.35));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
   text-align: center;
 }
 
+.chat-empty-state-inline.chat-empty-state-inline--no-box {
+  width: auto;
+  max-width: 100%;
+  border: none !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  padding: clamp(18px, 2.8vw, 30px) var(--space-lg);
+  margin-top: auto;
+  margin-bottom: auto;
+  transform: translateY(-18px);
+}
+
+.chat-empty-state-inline .session-empty-icon {
+  font-size: 24px;
+  opacity: 0.72;
+  color: var(--text-hint);
+}
+
+.chat-empty-state-inline .session-empty-text {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.35;
+}
+
+.chat-empty-state-inline .session-empty-subtext {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.45;
+}
+
+@media (max-width: 768px) {
+  .chat-empty-state-inline--no-box {
+    transform: translateY(-10px);
+  }
+}
+
 .chat-loading {
   text-align: center;
   color: var(--text-hint);
@@ -1977,15 +2029,15 @@ ul.md-list li::before {
 
 .chat-input-wrapper {
   display: flex;
-  align-items: flex-end;
-  gap: 8px;
+  align-items: center;
+  gap: 10px;
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 24px;
   padding: 8px 8px 8px 16px;
   transition: border-color 0.15s, box-shadow 0.15s;
   max-width: min(760px, 100%);
-  margin: 0 auto;
+  margin: 8px auto 0;
 }
 
 .chat-input-wrapper:focus-within {
@@ -1995,6 +2047,7 @@ ul.md-list li::before {
 
 .chat-textarea {
   flex: 1;
+  align-self: center;
   background: transparent;
   border: none;
   outline: none;
@@ -2005,10 +2058,25 @@ ul.md-list li::before {
   resize: none;
   min-height: 24px;
   max-height: 120px;
-  padding: 4px 0;
+  padding: 0;
   scrollbar-width: thin;
 }
 
+.chat-input-wrapper .mic-btn,
+.chat-input-wrapper .chat-send-btn {
+  align-self: center;
+}
+
+.chat-input-wrapper .mic-btn {
+  width: 34px;
+  height: 34px;
+  margin-right: 2px;
+}
+
+.chat-input-wrapper .chat-send-btn {
+  margin-left: 2px;
+}
+
 .chat-textarea::placeholder {
   color: var(--text-muted, var(--text-hint));
 }
@@ -2044,7 +2112,7 @@ ul.md-list li::before {
 .chat-input-hint {
   display: flex;
   justify-content: space-between;
-  padding: 4px 4px 0;
+  padding: 6px 8px 0;
   font-size: 11px;
   color: var(--text-hint);
   max-width: min(760px, 100%);
@@ -2506,6 +2574,10 @@ ul.md-list li::before {
 }
 
 /* ─── Blend chat input seamlessly with bottom navbar ─── */
+.app-shell[data-tab="chat"] .main-content {
+  background: var(--glass-bg);
+}
+
 .app-shell[data-tab="chat"] .chat-input-area {
   border-top: none;
   background: var(--glass-bg);

package/ui/tabs/chat.js

@@ -523,7 +523,11 @@ export function ChatTab() {
           // Forward to agent SDK
           const resp = await apiFetch("/api/agents/sdk-command", {
             method: "POST",
-            body: JSON.stringify({ command: cmdBase, args: cmdArgs }),
+            body: JSON.stringify({
+              command: cmdBase,
+              args: cmdArgs,
+              sessionId: sessionId || undefined,
+            }),
           });
           const resultText = resp?.result || resp?.data || `:check: SDK command executed: ${cmdBase}`;
           if (sessionId) {

package/ui/tabs/control.js

@@ -865,29 +865,11 @@ export function ControlTab() {
 
         <${Card} className="routing-card">
           <${Collapsible} title="Routing" defaultOpen=${!isCompact}>
-            <div class="meta-text mb-sm">Quick runtime overrides for executor routing and region. Persistent defaults live in Settings.</div>
+            <div class="meta-text mb-sm">Runtime region override only. SDK and kanban backend changes now live in Settings to avoid accidental disruptive switches.</div>
             <div class="card-subtitle">SDK</div>
-            <${SegmentedControl}
-              options=${[
-                { value: "codex", label: "Codex" },
-                { value: "copilot", label: "Copilot" },
-                { value: "claude", label: "Claude" },
-                { value: "auto", label: "Auto" },
-              ]}
-              value=${config?.sdk || "auto"}
-              onChange=${(v) => updateConfig("sdk", v)}
-            />
-            <div class="card-subtitle mt-sm">Kanban</div>
-            <${SegmentedControl}
-              options=${[
-                { value: "internal", label: "Internal" },
-                { value: "vk", label: "VK" },
-                { value: "github", label: "GitHub" },
-                { value: "jira", label: "Jira" },
-              ]}
-              value=${config?.kanbanBackend || "internal"}
-              onChange=${(v) => updateConfig("kanban", v)}
-            />
+            <div class="meta-text mb-sm">Current: ${String(config?.sdk || "auto").toUpperCase()}</div>
+            <div class="card-subtitle">Kanban</div>
+            <div class="meta-text mb-sm">Current: ${config?.kanbanBackend || "internal"}</div>
             ${regions.length > 1 && html`
               <div class="card-subtitle mt-sm">Region</div>
               <${SegmentedControl}
@@ -896,6 +878,18 @@ export function ControlTab() {
                 onChange=${(v) => updateConfig("region", v)}
               />
             `}
+            ${regions.length <= 1 && html`
+              <div class="card-subtitle mt-sm">Region</div>
+              <div class="meta-text mb-sm">Current: ${regions[0] || "auto"}</div>
+            `}
+            <button
+              class="btn btn-ghost btn-sm mt-sm"
+              onClick=${() => {
+                import("../modules/router.js").then(({ navigateTo }) => navigateTo("settings"));
+              }}
+            >
+              Open Settings
+            </button>
           <//>
         <//>
 

package/ui/tabs/dashboard.js

@@ -7,6 +7,7 @@ import {
   useEffect,
   useCallback,
   useRef,
+  useMemo,
 } from "preact/hooks";
 import htm from "htm";
 
@@ -27,10 +28,17 @@ import {
   scheduleRefresh,
   getTrend,
   getDashboardHistory,
+  setPendingChange,
+  clearPendingChange,
 } from "../modules/state.js";
 import { navigateTo } from "../modules/router.js";
 import { ICONS } from "../modules/icons.js";
-import { cloneValue, formatRelative, truncate } from "../modules/utils.js";
+import {
+  cloneValue,
+  formatRelative,
+  truncate,
+  countChangedFields,
+} from "../modules/utils.js";
 import { iconText, resolveIcon } from "../modules/icon-utils.js";
 import {
   Card,
@@ -38,6 +46,7 @@ import {
   SkeletonCard,
   Modal,
   EmptyState,
+  SaveDiscardBar,
 } from "../components/shared.js";
 import { DonutChart, ProgressBar, MiniSparkline } from "../components/charts.js";
 import {
@@ -139,11 +148,44 @@ export function CreateTaskModal({ onClose }) {
   const [description, setDescription] = useState("");
   const [priority, setPriority] = useState("medium");
   const [submitting, setSubmitting] = useState(false);
+  const initialSnapshotRef = useRef({
+    title: "",
+    description: "",
+    priority: "medium",
+  });
+  const pendingKey = "modal:create-task-dashboard";
+
+  const currentSnapshot = useMemo(
+    () => ({
+      title: title || "",
+      description: description || "",
+      priority: priority || "medium",
+    }),
+    [description, priority, title],
+  );
+  const changeCount = useMemo(
+    () => countChangedFields(initialSnapshotRef.current, currentSnapshot),
+    [currentSnapshot],
+  );
+  const hasUnsaved = changeCount > 0;
+
+  useEffect(() => {
+    setPendingChange(pendingKey, hasUnsaved);
+    return () => clearPendingChange(pendingKey);
+  }, [hasUnsaved]);
 
-  const handleSubmit = useCallback(async () => {
+  const resetToInitial = useCallback(() => {
+    const base = initialSnapshotRef.current || {};
+    setTitle(base.title || "");
+    setDescription(base.description || "");
+    setPriority(base.priority || "medium");
+    showToast("Changes discarded", "info");
+  }, []);
+
+  const handleSubmit = useCallback(async ({ closeAfterSave = true } = {}) => {
     if (!title.trim()) {
       showToast("Title is required", "error");
-      return;
+      return false;
     }
     setSubmitting(true);
     haptic("medium");
@@ -157,12 +199,22 @@ export function CreateTaskModal({ onClose }) {
         }),
       });
       showToast("Task created", "success");
-      onClose();
+      initialSnapshotRef.current = {
+        title: title.trim(),
+        description: description.trim(),
+        priority,
+      };
+      if (closeAfterSave) {
+        onClose?.();
+      }
       await refreshTab("dashboard");
+      return closeAfterSave ? { closed: true } : true;
     } catch {
       /* toast shown by apiFetch */
+      return false;
+    } finally {
+      setSubmitting(false);
     }
-    setSubmitting(false);
   }, [title, description, priority, onClose]);
 
   /* Telegram MainButton integration */
@@ -171,7 +223,9 @@ export function CreateTaskModal({ onClose }) {
     if (tg?.MainButton) {
       tg.MainButton.setText("Create Task");
       tg.MainButton.show();
-      const handler = () => handleSubmit();
+      const handler = () => {
+        void handleSubmit({ closeAfterSave: true });
+      };
       tg.MainButton.onClick(handler);
       return () => {
         tg.MainButton.hide();
@@ -181,7 +235,17 @@ export function CreateTaskModal({ onClose }) {
   }, [handleSubmit]);
 
   return html`
-    <${Modal} title="Create Task" onClose=${onClose}>
+    <${Modal}
+      title="Create Task"
+      onClose=${onClose}
+      unsavedChanges=${changeCount}
+      onSaveBeforeClose=${() => handleSubmit({ closeAfterSave: true })}
+      onDiscardBeforeClose=${() => {
+        resetToInitial();
+        return true;
+      }}
+      activeOperationLabel=${submitting ? "Task creation is in progress" : ""}
+    >
       <div class="flex-col gap-md">
         <input
           class="input"
@@ -212,11 +276,24 @@ export function CreateTaskModal({ onClose }) {
         />
         <button
           class="btn btn-primary"
-          onClick=${handleSubmit}
+          onClick=${() => {
+            void handleSubmit({ closeAfterSave: true });
+          }}
           disabled=${submitting}
         >
           ${submitting ? "Creating…" : "Create Task"}
         </button>
+        <${SaveDiscardBar}
+          dirty=${hasUnsaved}
+          message=${`You have unsaved changes (${changeCount})`}
+          saveLabel="Create Task"
+          discardLabel="Discard"
+          onSave=${() => {
+            void handleSubmit({ closeAfterSave: false });
+          }}
+          onDiscard=${resetToInitial}
+          saving=${submitting}
+        />
       </div>
     <//>
   `;

package/ui/tabs/library.js

@@ -11,11 +11,25 @@ const html = htm.bind(h);
 
 import { haptic } from "../modules/telegram.js";
 import { apiFetch } from "../modules/api.js";
-import { showToast, refreshTab } from "../modules/state.js";
+import {
+  showToast,
+  refreshTab,
+  setPendingChange,
+  clearPendingChange,
+} from "../modules/state.js";
 import { ICONS } from "../modules/icons.js";
 import { iconText, resolveIcon } from "../modules/icon-utils.js";
-import { formatRelative } from "../modules/utils.js";
-import { Card, Badge, EmptyState, Modal, ConfirmDialog, Spinner, ListItem } from "../components/shared.js";
+import { formatRelative, countChangedFields } from "../modules/utils.js";
+import {
+  Card,
+  Badge,
+  EmptyState,
+  Modal,
+  ConfirmDialog,
+  Spinner,
+  ListItem,
+  SaveDiscardBar,
+} from "../components/shared.js";
 import { SearchInput, SegmentedControl, Toggle } from "../components/forms.js";
 
 /* ═══════════════════════════════════════════════════════════════
@@ -41,14 +55,17 @@ const LIBRARY_STYLES = `
 
 .library-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
 .library-card { background: var(--bg-card, #1a1a2e); border: 1px solid var(--border, #333);
-  border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.15s; position: relative; }
+  border-radius: 12px; padding: 16px; padding-right: 96px; cursor: pointer; transition: all 0.15s; position: relative; }
 .library-card:hover { border-color: var(--accent, #58a6ff); transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
 
 .library-card-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
 .library-card-icon { font-size: 1.4em; flex-shrink: 0; width: 32px; text-align: center; }
 .library-card-icon svg { width: 20px; height: 20px; vertical-align: middle; }
-.library-card-title { font-weight: 600; font-size: 0.95em; color: var(--text-primary, #eee); }
+.library-card-header > div { min-width: 0; flex: 1; }
+.library-card-title { font-weight: 600; font-size: 0.95em; color: var(--text-primary, #eee);
+  overflow-wrap: anywhere; word-break: break-word;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 .library-card-desc { font-size: 0.82em; color: var(--text-secondary, #aaa); margin-bottom: 8px;
   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 .library-card-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
@@ -123,7 +140,7 @@ const LIBRARY_STYLES = `
   .library-toolbar { gap: 6px; }
   .library-toolbar .search-wrap { flex: 1 1 100%; min-width: 0; }
   .library-grid { grid-template-columns: 1fr; }
-  .library-card { padding: 12px; }
+  .library-card { padding: 12px; padding-right: 84px; }
   .library-card-scope { margin-left: 0; }
   .library-actions { flex-wrap: wrap; justify-content: stretch; }
   .library-actions button { flex: 1 1 140px; padding: 10px 12px; }
@@ -307,7 +324,7 @@ function LibraryCard({ entry, onSelect }) {
 
 function EntryEditor({ entry, onClose, onSaved, onDeleted }) {
   const isNew = !entry?.id;
-  const [form, setForm] = useState({
+  const initialFormSnapshot = {
     id: entry?.id || "",
     type: entry?.type || "prompt",
     name: entry?.name || "",
@@ -315,10 +332,31 @@ function EntryEditor({ entry, onClose, onSaved, onDeleted }) {
     tags: (entry?.tags || []).join(", "),
     scope: entry?.scope || "global",
     content: "",
-  });
+  };
+  const [form, setForm] = useState(initialFormSnapshot);
+  const [baseline, setBaseline] = useState(initialFormSnapshot);
   const [loading, setLoading] = useState(false);
   const [loadingContent, setLoadingContent] = useState(!isNew && !!entry?.id);
   const [confirmDelete, setConfirmDelete] = useState(false);
+  const pendingKey = useMemo(
+    () => `modal:library-entry:${entry?.id || "new"}`,
+    [entry?.id],
+  );
+
+  useEffect(() => {
+    const next = {
+      id: entry?.id || "",
+      type: entry?.type || "prompt",
+      name: entry?.name || "",
+      description: entry?.description || "",
+      tags: (entry?.tags || []).join(", "),
+      scope: entry?.scope || "global",
+      content: "",
+    };
+    setForm(next);
+    setBaseline(next);
+    setLoadingContent(!isNew && !!entry?.id);
+  }, [entry?.id]);
 
   // Load content for existing entries
   useEffect(() => {
@@ -330,7 +368,11 @@ function EntryEditor({ entry, onClose, onSaved, onDeleted }) {
         if (cancelled) return;
         let contentStr = detail?.content ?? "";
         if (typeof contentStr === "object") contentStr = JSON.stringify(contentStr, null, 2);
-        setForm((f) => ({ ...f, content: contentStr }));
+        setForm((f) => {
+          const next = { ...f, content: contentStr };
+          setBaseline(next);
+          return next;
+        });
       } catch { /* ignore */ }
       setLoadingContent(false);
     })();
@@ -338,9 +380,27 @@ function EntryEditor({ entry, onClose, onSaved, onDeleted }) {
   }, [entry?.id]);
 
   const updateField = (key) => (e) => setForm((f) => ({ ...f, [key]: e.target.value }));
+  const changeCount = useMemo(
+    () => countChangedFields(baseline, form),
+    [baseline, form],
+  );
+  const hasUnsaved = changeCount > 0;
 
-  const handleSave = useCallback(async () => {
-    if (!form.name.trim()) { showToast("Name is required", "error"); return; }
+  useEffect(() => {
+    setPendingChange(pendingKey, hasUnsaved);
+    return () => clearPendingChange(pendingKey);
+  }, [hasUnsaved, pendingKey]);
+
+  const resetToBaseline = useCallback(() => {
+    setForm(baseline);
+    showToast("Changes discarded", "info");
+  }, [baseline]);
+
+  const handleSave = useCallback(async ({ closeAfterSave = true } = {}) => {
+    if (!form.name.trim()) {
+      showToast("Name is required", "error");
+      return false;
+    }
     setLoading(true);
     try {
       const tags = form.tags.split(/[,\s]+/).map((t) => t.trim().toLowerCase()).filter(Boolean);
@@ -359,14 +419,23 @@ function EntryEditor({ entry, onClose, onSaved, onDeleted }) {
       });
       if (res?.ok) {
         showToast(`${TYPE_LABELS[form.type] || "Entry"} saved`, "success");
-        onSaved?.();
+        const nextBaseline = { ...form };
+        setBaseline(nextBaseline);
+        if (closeAfterSave) {
+          onSaved?.();
+          return { closed: true };
+        }
+        return true;
       } else {
         showToast(res?.error || "Save failed", "error");
+        return false;
       }
     } catch (err) {
       showToast(err.message, "error");
+      return false;
+    } finally {
+      setLoading(false);
     }
-    setLoading(false);
   }, [form, onSaved]);
 
   const handleDelete = useCallback(async () => {
@@ -402,7 +471,17 @@ function EntryEditor({ entry, onClose, onSaved, onDeleted }) {
       : "# Skill Title\n\n## Purpose\nDescribe what this skill teaches agents.\n\n## Instructions\n...";
 
   return html`
-    <${Modal} title=${isNew ? "New Resource" : `Edit: ${entry.name}`} onClose=${onClose}>
+    <${Modal}
+      title=${isNew ? "New Resource" : `Edit: ${entry.name}`}
+      onClose=${onClose}
+      unsavedChanges=${changeCount}
+      onSaveBeforeClose=${() => handleSave({ closeAfterSave: true })}
+      onDiscardBeforeClose=${() => {
+        resetToBaseline();
+        return true;
+      }}
+      activeOperationLabel=${loading ? "Save/Delete request is still running" : ""}
+    >
       <div class="library-editor">
         ${isNew && html`
           <label>
@@ -459,10 +538,27 @@ function EntryEditor({ entry, onClose, onSaved, onDeleted }) {
           `}
           <div style="flex:1" />
           <button class="btn-ghost" onClick=${onClose}>Cancel</button>
-          <button class="btn-primary" onClick=${handleSave} disabled=${loading}>
+          <button
+            class="btn-primary"
+            onClick=${() => {
+              void handleSave({ closeAfterSave: true });
+            }}
+            disabled=${loading}
+          >
             ${loading ? html`<${Spinner} size=${14} />` : (isNew ? "Create" : "Save")}
           </button>
         </div>
+        <${SaveDiscardBar}
+          dirty=${hasUnsaved}
+          message=${`You have unsaved changes (${changeCount})`}
+          saveLabel=${isNew ? "Create" : "Save Changes"}
+          discardLabel="Discard"
+          onSave=${() => {
+            void handleSave({ closeAfterSave: false });
+          }}
+          onDiscard=${resetToBaseline}
+          saving=${loading}
+        />
       </div>
       ${confirmDelete && html`
         <${ConfirmDialog}
@@ -664,7 +760,7 @@ export function LibraryTab() {
           ${iconText(":refresh: Rebuild")}
         </button>
         <button class="library-type-pill active" onClick=${() => setEditing({})}>
-          ＋ New
+          ${iconText("➕ New")}
         </button>
       </div>
 
@@ -704,7 +800,7 @@ export function LibraryTab() {
             : "Create your first prompt, agent profile, or skill."}
           action=${searchQuery.value
             ? { label: "Clear search", onClick: () => { searchQuery.value = ""; loadEntries(); } }
-            : { label: "＋ New Resource", onClick: () => setEditing({}) }} />
+            : { label: "➕ New Resource", onClick: () => setEditing({}) }} />
       `}
 
       ${!loading && displayed.length > 0 && html`