bosun 0.36.2 → 0.36.4

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`

package/ui/tabs/settings.js

@@ -59,6 +59,17 @@ import {
 
 /* ─── Scoped Styles ─── */
 const SETTINGS_STYLES = `
+/* Category navigation */
+.settings-category-mobile {
+  display: none;
+  margin-bottom: 10px;
+}
+.settings-category-mobile-label {
+  display: block;
+  font-size: 12px;
+  color: var(--text-tertiary, #8a8a8a);
+  margin: 0 0 6px 2px;
+}
 /* Category pill tabs — horizontal scrollable row */
 .settings-category-tabs {
   display: flex;
@@ -111,9 +122,9 @@ const SETTINGS_STYLES = `
   flex-wrap: wrap;
   row-gap: 8px;
   padding: 10px 16px;
-  min-width: 240px;
+  min-width: min(240px, calc(100vw - 24px));
   max-width: 480px;
-  width: auto;
+  width: min(480px, calc(100vw - 24px));
   background: var(--glass-bg, rgba(30,30,46,0.95));
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
@@ -340,6 +351,10 @@ const SETTINGS_STYLES = `
   color: var(--accent, #5a7cff);
 }
 .settings-banner-text { flex: 1; }
+.settings-banner code {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
 /* Diff display for confirm dialog */
 .settings-diff {
   max-height: 300px;
@@ -388,6 +403,18 @@ const SETTINGS_STYLES = `
   width: 100%;
   box-sizing: border-box;
   padding-bottom: 80px;
+  overflow-x: clip;
+}
+
+.setting-row .segmented-control {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  margin-bottom: 0;
+}
+.setting-row .segmented-btn {
+  flex: 1 1 96px;
+  min-width: 0;
 }
 
 body.settings-save-open .main-content {
@@ -455,6 +482,78 @@ body.settings-save-open .main-content {
   color: var(--text-tertiary, #666);
   text-align: center;
 }
+
+@media (max-width: 900px) {
+  .settings-category-mobile {
+    display: block;
+  }
+  .settings-category-tabs {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+    overflow-x: visible;
+    padding: 4px 0 8px;
+  }
+  .settings-category-tab {
+    width: 100%;
+    border-radius: 12px;
+    min-height: 42px;
+    padding: 10px 12px;
+    justify-content: flex-start;
+    white-space: normal;
+    line-height: 1.25;
+  }
+}
+
+@media (max-width: 700px) {
+  .settings-save-bar {
+    left: 12px;
+    right: 12px;
+    width: auto;
+    max-width: none;
+    transform: none;
+    padding: 10px 12px;
+  }
+  @keyframes slideUp {
+    from { transform: translateY(20px); opacity: 0; }
+    to   { transform: translateY(0);    opacity: 1; }
+  }
+  .settings-save-bar .save-bar-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+  .setting-input-wrap {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+  }
+  .setting-input-wrap input[type="text"],
+  .setting-input-wrap input[type="number"],
+  .setting-input-wrap input[type="password"],
+  .setting-input-wrap textarea,
+  .setting-input-wrap select {
+    width: 100%;
+    flex: 1 1 auto;
+  }
+  .setting-unit {
+    align-self: flex-end;
+  }
+  .setting-help-tooltip {
+    left: 0;
+    transform: none;
+    min-width: 0;
+    max-width: min(92vw, 360px);
+  }
+}
+
+@media (max-width: 640px) {
+  .settings-category-tabs {
+    display: none;
+  }
+  .setting-row .segmented-btn {
+    flex: 1 1 calc(50% - 4px);
+  }
+}
 `;
 
 /* ─── Inject styles once ─── */
@@ -1172,6 +1271,21 @@ function ServerConfigMode() {
       const activeCat = CATEGORIES.find((c) => c.id === activeCategory);
 
       return html`
+        <div class="settings-category-mobile">
+          <label class="settings-category-mobile-label">Category</label>
+          <div class="setting-input-wrap">
+            <select
+              value=${activeCategory}
+              onChange=${(e) => {
+                setActiveCategory(e.target.value);
+                haptic("light");
+              }}
+            >
+              ${CATEGORIES.map((cat) => html`<option key=${cat.id} value=${cat.id}>${cat.label}</option>`)}
+            </select>
+          </div>
+        </div>
+
         <!-- Category tabs -->
         <div class="settings-category-tabs">
           ${CATEGORIES.map(