bosun 0.36.2 → 0.36.3

package/ui/components/chat-view.js

@@ -354,7 +354,17 @@ function AttachmentList({ attachments }) {
 }
 
 /* ─── Memoized ChatBubble — only re-renders if msg identity changes ─── */
-const ChatBubble = memo(function ChatBubble({ msg, isFinalModelResponse = false }) {
+const ChatBubble = memo(function ChatBubble({
+  msg,
+  isFinalModelResponse = false,
+  canEdit = false,
+  isEditing = false,
+  editingText = "",
+  onEditStart = null,
+  onEditInput = null,
+  onEditSave = null,
+  onEditCancel = null,
+}) {
   const isTool = msg.type === "tool_call" || msg.type === "tool_result";
   const isError = msg.type === "error" || msg.type === "stream_error";
   const contentText = messageText(msg);
@@ -389,16 +399,53 @@ const ChatBubble = memo(function ChatBubble({ msg, isFinalModelResponse = false
               ? html`<div class="chat-bubble-label chat-bubble-label-final">MODEL RESPONSE</div>`
               : null}
             <div class="chat-bubble-content">
-              <${MessageContent} text=${contentText} />
-              <${AttachmentList} attachments=${msg.attachments} />
+              ${isEditing
+                ? html`
+                    <div class="chat-edit-block">
+                      <textarea
+                        class="chat-edit-textarea"
+                        value=${editingText}
+                        onInput=${(e) => onEditInput?.(e.target.value)}
+                        rows="3"
+                      />
+                      <div class="chat-edit-actions">
+                        <button class="btn btn-ghost btn-xs" onClick=${onEditCancel}>Cancel</button>
+                        <button
+                          class="btn btn-primary btn-xs"
+                          disabled=${!String(editingText || "").trim()}
+                          onClick=${onEditSave}
+                        >
+                          Save
+                        </button>
+                      </div>
+                    </div>
+                  `
+                : html`
+                    <${MessageContent} text=${contentText} />
+                    <${AttachmentList} attachments=${msg.attachments} />
+                  `}
             </div>
             <div class="chat-bubble-time">
               ${msg.timestamp ? formatRelative(msg.timestamp) : ""}
+              ${msg.edited ? " · edited" : ""}
+              ${role === "user" && canEdit && !isEditing
+                ? html`
+                    <button class="chat-edit-btn" onClick=${() => onEditStart?.(msg)}>
+                      Edit
+                    </button>
+                  `
+                : null}
             </div>
           `}
     </div>
   `;
-}, (prev, next) => prev.msg === next.msg && prev.isFinalModelResponse === next.isFinalModelResponse);
+}, (prev, next) =>
+  prev.msg === next.msg &&
+  prev.isFinalModelResponse === next.isFinalModelResponse &&
+  prev.canEdit === next.canEdit &&
+  prev.isEditing === next.isEditing &&
+  prev.editingText === next.editingText,
+);
 
 const TraceEvent = memo(function TraceEvent({ msg }) {
   const info = describeTraceMessage(msg);
@@ -495,6 +542,8 @@ export function ChatView({ sessionId, readOnly = false, embedded = false }) {
     result: false,
     error: false,
   });
+  const [editingMsgRef, setEditingMsgRef] = useState(null);
+  const [editingText, setEditingText] = useState("");
   const messagesRef = useRef(null);
   const inputRef = useRef(null);
   const fileInputRef = useRef(null);
@@ -795,6 +844,8 @@ export function ChatView({ sessionId, readOnly = false, embedded = false }) {
   useEffect(() => {
     setPendingAttachments([]);
     setUploadingAttachments(false);
+    setEditingMsgRef(null);
+    setEditingText("");
   }, [sessionId]);
 
   /* Track scroll position to decide auto-scroll + unread */
@@ -903,6 +954,58 @@ export function ChatView({ sessionId, readOnly = false, embedded = false }) {
     setPendingAttachments((prev) => prev.filter((_, i) => i !== index));
   }, []);
 
+  const handleStartEdit = useCallback((msg) => {
+    setEditingMsgRef(msg || null);
+    setEditingText(messageText(msg));
+  }, []);
+
+  const handleCancelEdit = useCallback(() => {
+    setEditingMsgRef(null);
+    setEditingText("");
+  }, []);
+
+  const handleSaveEdit = useCallback(async () => {
+    if (!sessionId || !editingMsgRef) return;
+    const next = String(editingText || "").trim();
+    if (!next) return;
+
+    const previousContent = messageText(editingMsgRef);
+    if (next === previousContent) {
+      setEditingMsgRef(null);
+      setEditingText("");
+      return;
+    }
+
+    const editedAt = new Date().toISOString();
+    sessionMessages.value = (sessionMessages.value || []).map((msg) =>
+      msg === editingMsgRef
+        ? { ...msg, content: next, edited: true, editedAt }
+        : msg,
+    );
+
+    setEditingMsgRef(null);
+    setEditingText("");
+
+    try {
+      await apiFetch(`/api/sessions/${safeSessionId}/message/edit`, {
+        method: "POST",
+        body: JSON.stringify({
+          messageId: editingMsgRef?.id,
+          timestamp: editingMsgRef?.timestamp,
+          previousContent,
+          content: next,
+        }),
+      });
+      const res = await loadSessionMessages(sessionId);
+      setLoadError(res?.ok ? null : res?.error || "unavailable");
+      showToast("Message updated", "success");
+    } catch {
+      const res = await loadSessionMessages(sessionId);
+      setLoadError(res?.ok ? null : res?.error || "unavailable");
+      showToast("Failed to update message", "error");
+    }
+  }, [sessionId, editingMsgRef, editingText]);
+
   const handleSend = useCallback(async () => {
     const text = input.trim();
     if ((!text && pendingAttachments.length === 0) || sending || readOnly || uploadingAttachments) return;
@@ -1224,7 +1327,7 @@ export function ChatView({ sessionId, readOnly = false, embedded = false }) {
           <div class="chat-loading">Loading messages…</div>
         `}
         ${!loading && messages.length === 0 && html`
-          <div class="chat-empty-state-inline">
+          <div class="chat-empty-state-inline chat-empty-state-inline--no-box">
             <div class="session-empty-icon">${resolveIcon(":server:")}</div>
             <div class="session-empty-text">
               No messages yet.

package/ui/components/session-list.js

@@ -549,7 +549,7 @@ function SwipeableSessionItem({
                 onClick=${handleResume}
                 title="Unarchive"
               >
-                <span class="session-action-icon">:workflow:</span>
+                <span class="session-action-icon">${resolveIcon(":workflow:")}</span>
                 <span class="session-action-label">Restore</span>
               </button>
             `

package/ui/components/shared.js

@@ -16,7 +16,11 @@ import htm from "htm";
 const html = htm.bind(h);
 
 import { ICONS } from "../modules/icons.js";
-import { toasts, showToast, shouldShowToast } from "../modules/state.js";
+import {
+  toasts,
+  showToast,
+  shouldShowToast,
+} from "../modules/state.js";
 import {
   haptic,
   showBackButton,
@@ -127,18 +131,65 @@ export function SkeletonCard({ height = "80px", className = "" }) {
 
 /**
  * Bottom-sheet modal with drag handle, title, swipe-to-dismiss, and TG BackButton integration.
- * @param {{title?: string, open?: boolean, onClose: () => void, children?: any, contentClassName?: string}} props
+ * @param {{
+ * title?: string,
+ * open?: boolean,
+ * onClose: () => void,
+ * children?: any,
+ * contentClassName?: string,
+ * footer?: any,
+ * unsavedChanges?: number,
+ * onSaveBeforeClose?: (() => Promise<boolean|{closed?: boolean}|void>)|null,
+ * onDiscardBeforeClose?: (() => Promise<boolean|{closed?: boolean}|void>)|null,
+ * activeOperationLabel?: string,
+ * closeGuard?: boolean
+ * }} props
  */
-export function Modal({ title, open = true, onClose, children, contentClassName = "", footer }) {
+export function Modal({
+  title,
+  open = true,
+  onClose,
+  children,
+  contentClassName = "",
+  footer,
+  unsavedChanges = 0,
+  onSaveBeforeClose = null,
+  onDiscardBeforeClose = null,
+  activeOperationLabel = "",
+  closeGuard = true,
+}) {
   const [visible, setVisible] = useState(false);
   const contentRef = useRef(null);
   const dragState = useRef({ startY: 0, startRect: 0, dragging: false });
   const [dragY, setDragY] = useState(0);
+  const [closePromptOpen, setClosePromptOpen] = useState(false);
+  const [closePromptSaving, setClosePromptSaving] = useState(false);
+  const scopedUnsavedCount = Number.isFinite(Number(unsavedChanges))
+    ? Math.max(0, Number(unsavedChanges))
+    : 0;
+  const hasScopedUnsaved = scopedUnsavedCount > 0;
+  const hasUnsaved = hasScopedUnsaved;
+  const operationLabel = String(activeOperationLabel || "").trim();
+
+  const requestClose = useCallback(() => {
+    if (!onClose) return;
+    if (!closeGuard || (!hasUnsaved && !operationLabel)) {
+      onClose();
+      return;
+    }
+    setClosePromptOpen(true);
+  }, [closeGuard, hasUnsaved, onClose, operationLabel]);
 
   useEffect(() => {
     requestAnimationFrame(() => setVisible(open));
   }, [open]);
 
+  useEffect(() => {
+    if (open) return;
+    setClosePromptOpen(false);
+    setClosePromptSaving(false);
+  }, [open]);
+
   useEffect(() => {
     if (!open) return;
     document.body.classList.add("modal-open");
@@ -148,23 +199,33 @@ export function Modal({ title, open = true, onClose, children, contentClassName
   // Escape key to close (desktop support)
   useEffect(() => {
     if (!open) return;
-    const handler = (e) => { if (e.key === 'Escape' && onClose) onClose(); };
+    const handler = (e) => {
+      if (e.key !== "Escape") return;
+      if (closePromptOpen) {
+        setClosePromptOpen(false);
+        return;
+      }
+      requestClose();
+    };
     document.addEventListener('keydown', handler);
     return () => document.removeEventListener('keydown', handler);
-  }, [open, onClose]);
+  }, [closePromptOpen, open, requestClose]);
 
   // BackButton integration
   useEffect(() => {
     const handler = () => {
-      onClose();
-      hideBackButton();
+      if (closePromptOpen) {
+        setClosePromptOpen(false);
+        return;
+      }
+      requestClose();
     };
     showBackButton(handler);
 
     return () => {
       hideBackButton();
     };
-  }, [onClose]);
+  }, [closePromptOpen, requestClose]);
 
   // Prevent body scroll while dragging
   useEffect(() => {
@@ -234,10 +295,10 @@ export function Modal({ title, open = true, onClose, children, contentClassName
     if (el) el.style.transition = "";
     if (dragY > 150) {
       haptic("light");
-      onClose();
+      requestClose();
     }
     setDragY(0);
-  }, [dragY, onClose]);
+  }, [dragY, requestClose]);
 
   const handlePointerDown = useCallback((e) => {
     if (e.pointerType === "touch") return;
@@ -282,10 +343,10 @@ export function Modal({ title, open = true, onClose, children, contentClassName
     }
     if (dragY > 150) {
       haptic("light");
-      onClose();
+      requestClose();
     }
     setDragY(0);
-  }, [dragY, onClose]);
+  }, [dragY, requestClose]);
 
   const handlePointerCancel = useCallback((e) => {
     if (!dragState.current.dragging) return;
@@ -310,6 +371,71 @@ export function Modal({ title, open = true, onClose, children, contentClassName
 
   if (!open) return null;
 
+  const guardTitle = hasUnsaved
+    ? "You have unsaved changes"
+    : "Action in progress";
+  const guardUnsavedLine = hasUnsaved
+    ? hasScopedUnsaved
+      ? `You have unsaved changes (${scopedUnsavedCount}).`
+      : "You have unsaved changes."
+    : "";
+  const guardActivityLine = operationLabel
+    ? `Active operation: ${operationLabel}.`
+    : "";
+  const guardHintLine = operationLabel
+    ? "Closing now may ignore pending updates."
+    : "Choose whether to save before closing.";
+
+  const handleDiscardAndClose = async () => {
+    if (closePromptSaving) return;
+    try {
+      if (typeof onDiscardBeforeClose === "function") {
+        const result = await onDiscardBeforeClose();
+        if (result === false) return;
+        if (result && typeof result === "object" && result.closed) {
+          setClosePromptOpen(false);
+          return;
+        }
+      }
+      setClosePromptOpen(false);
+      onClose?.();
+    } catch (err) {
+      showToast(
+        err?.message || "Could not discard changes before closing.",
+        "error",
+      );
+    }
+  };
+
+  const handleSaveAndClose = async () => {
+    if (closePromptSaving) return;
+    if (typeof onSaveBeforeClose !== "function") {
+      showToast(
+        "Save before close is not available for this form.",
+        "warning",
+      );
+      return;
+    }
+    setClosePromptSaving(true);
+    try {
+      const result = await onSaveBeforeClose();
+      if (result === false) return;
+      if (result && typeof result === "object" && result.closed) {
+        setClosePromptOpen(false);
+        return;
+      }
+      setClosePromptOpen(false);
+      onClose?.();
+    } catch (err) {
+      showToast(
+        err?.message || "Save failed. Resolve errors before closing.",
+        "error",
+      );
+    } finally {
+      setClosePromptSaving(false);
+    }
+  };
+
   const dragStyle = dragY > 0
     ? `transform: translateY(${dragY}px); opacity: ${Math.max(0.2, 1 - dragY / 400)}`
     : "";
@@ -318,7 +444,7 @@ export function Modal({ title, open = true, onClose, children, contentClassName
     <div
       class="modal-overlay ${visible ? "modal-overlay-visible" : ""}"
       onClick=${(e) => {
-        if (e.target === e.currentTarget) onClose();
+        if (e.target === e.currentTarget) requestClose();
       }}
     >
       <div
@@ -338,7 +464,7 @@ export function Modal({ title, open = true, onClose, children, contentClassName
         <div class="modal-header">
           <div class="modal-handle"></div>
           ${title ? html`<div class="modal-title">${title}</div>` : null}
-          <button class="modal-close-btn" onClick=${onClose} aria-label="Close">
+          <button class="modal-close-btn" onClick=${requestClose} aria-label="Close">
             ${ICONS.close}
           </button>
         </div>
@@ -349,7 +475,54 @@ export function Modal({ title, open = true, onClose, children, contentClassName
       </div>
     </div>
   `;
-  return createPortal(content, document.body);
+  const guard = closePromptOpen
+    ? html`
+        <div
+          class="modal-overlay modal-overlay-visible"
+          onClick=${() => {
+            if (closePromptSaving) return;
+            setClosePromptOpen(false);
+          }}
+        >
+          <div class="confirm-dialog" onClick=${(e) => e.stopPropagation()}>
+            <div class="confirm-dialog-title">${guardTitle}</div>
+            <div class="confirm-dialog-message">
+              ${guardUnsavedLine ? html`<div>${guardUnsavedLine}</div>` : null}
+              ${guardActivityLine ? html`<div>${guardActivityLine}</div>` : null}
+              <div>${guardHintLine}</div>
+            </div>
+            <div class="confirm-dialog-actions">
+              <button
+                class="btn btn-secondary"
+                onClick=${() => setClosePromptOpen(false)}
+                disabled=${closePromptSaving}
+              >
+                Cancel
+              </button>
+              <button
+                class="btn btn-secondary"
+                onClick=${handleDiscardAndClose}
+                disabled=${closePromptSaving}
+              >
+                ${hasUnsaved ? "Discard & Close" : "Close Anyway"}
+              </button>
+              ${hasUnsaved
+                ? html`
+                    <button
+                      class="btn btn-primary"
+                      onClick=${handleSaveAndClose}
+                      disabled=${closePromptSaving || typeof onSaveBeforeClose !== "function"}
+                    >
+                      ${closePromptSaving ? "Saving…" : "Save & Close"}
+                    </button>
+                  `
+                : null}
+            </div>
+          </div>
+        </div>
+      `
+    : null;
+  return createPortal(html`${content}${guard}`, document.body);
 }
 
 /* ═══════════════════════════════════════════════

package/ui/modules/icons.js

@@ -626,6 +626,19 @@ export const ICONS = {
     <line x1="8" y1="23" x2="16" y2="23" />
   </svg>`,
 
+  headphones: html`<svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M4 14v-2a8 8 0 0 1 16 0v2" />
+    <path d="M4 14a3 3 0 0 0 3 3h1v-6H7a3 3 0 0 0-3 3z" />
+    <path d="M20 14a3 3 0 0 1-3 3h-1v-6h1a3 3 0 0 1 3 3z" />
+  </svg>`,
+
   palette: html`<svg
     viewBox="0 0 24 24"
     fill="none"

package/ui/modules/utils.js

@@ -210,6 +210,50 @@ export function classNames(...args) {
   return classes.join(" ");
 }
 
+/**
+ * Build a stable serialized representation for change detection.
+ * Object keys are sorted to avoid order-related false positives.
+ * @param {*} value
+ * @returns {string}
+ */
+export function stableSerialize(value) {
+  if (value === undefined) return "undefined";
+  if (value === null) return "null";
+  if (typeof value === "number" && !Number.isFinite(value)) {
+    return `"${String(value)}"`;
+  }
+  if (Array.isArray(value)) {
+    return `[${value.map((item) => stableSerialize(item)).join(",")}]`;
+  }
+  if (typeof value === "object") {
+    const keys = Object.keys(value).sort();
+    return `{${keys
+      .map((key) => `${JSON.stringify(key)}:${stableSerialize(value[key])}`)
+      .join(",")}}`;
+  }
+  return JSON.stringify(value);
+}
+
+/**
+ * Count changed top-level fields between two plain objects.
+ * Values are compared using stable serialization.
+ * @param {Record<string, any>} initial
+ * @param {Record<string, any>} current
+ * @returns {number}
+ */
+export function countChangedFields(initial = {}, current = {}) {
+  const base = initial && typeof initial === "object" ? initial : {};
+  const next = current && typeof current === "object" ? current : {};
+  const keys = new Set([...Object.keys(base), ...Object.keys(next)]);
+  let changed = 0;
+  for (const key of keys) {
+    if (stableSerialize(base[key]) !== stableSerialize(next[key])) {
+      changed += 1;
+    }
+  }
+  return changed;
+}
+
 /* ─── Data Export Utilities ─── */
 
 /**

package/ui/modules/voice.js

@@ -38,8 +38,8 @@ function injectVoiceStyles() {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 34px;
+  height: 34px;
   border-radius: 50%;
   border: 1px solid rgba(255,255,255,0.10);
   background: var(--tg-theme-secondary-bg-color, #1e1e2e);
@@ -49,10 +49,16 @@ function injectVoiceStyles() {
   transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
   -webkit-tap-highlight-color: transparent;
   padding: 0;
-  font-size: 15px;
+  box-sizing: border-box;
+  font-size: 0;
   line-height: 1;
   user-select: none;
 }
+.mic-btn svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
 .mic-btn:hover:not(:disabled) {
   background: rgba(255,255,255,0.06);
   color: var(--tg-theme-text-color, #fff);
@@ -74,9 +80,12 @@ function injectVoiceStyles() {
   50%       { box-shadow: 0 0 0 6px rgba(239,68,68,0.06); }
 }
 .mic-btn-sm {
-  width: 26px;
-  height: 26px;
-  font-size: 13px;
+  width: 24px;
+  height: 24px;
+}
+.mic-btn-sm svg {
+  width: 12px;
+  height: 12px;
 }
 .mic-btn-inline {
   position: absolute;

package/ui/styles/components.css

@@ -1,5 +1,70 @@
 /* ─── Component Styles — iOS-style Clean Design ─── */
 
+/* ─── Telemetry Tab ─── */
+.telemetry-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.telemetry-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  align-items: stretch;
+}
+
+.telemetry-grid > .card {
+  margin-bottom: 0;
+  min-height: 240px;
+  display: flex;
+  flex-direction: column;
+}
+
+.telemetry-grid > .card .empty-state {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.telemetry-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.telemetry-list li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.telemetry-list li:last-child {
+  border-bottom: 0;
+}
+
+.telemetry-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.telemetry-count {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+@media (max-width: 960px) {
+  .telemetry-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 /* ─── Cards ─── */
 .card {
   background: var(--bg-card);
@@ -3262,9 +3327,9 @@ select.input {
 
 /* ─── Control Unit (sticky) ─── */
 .control-unit-card {
-  position: sticky;
-  top: 0;
-  z-index: 18;
+  position: relative;
+  top: auto;
+  z-index: auto;
   background: var(--bg-card);
 }
 
@@ -3496,6 +3561,31 @@ select.input {
   color: #fff;
 }
 
+/* ─── Shared Save/Discard Bar ─── */
+.ve-save-discard-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--bg-card);
+}
+
+.ve-save-discard-message {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.ve-save-discard-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
 /* ─── Toggle disabled ─── */
 .toggle-wrap.disabled {
   opacity: 0.4;
@@ -3690,6 +3780,12 @@ select.input {
   display: flex;
   flex-direction: column;
   gap: 16px;
+  min-height: 0;
+}
+
+.control-main .card,
+.control-side .card {
+  overflow: visible;
 }
 
 .control-hero {