bosun 0.36.2 → 0.36.4

package/ui/components/chat-view.js

@@ -47,7 +47,7 @@ const AUTO_ACTION_LABELS = {
 
 const SCROLL_BOTTOM_TOLERANCE_PX = 6;
 const SCROLL_BOTTOM_RATIO = 0.995;
-const CHAT_PAGE_SIZE = 20;
+const CHAT_PAGE_SIZE = 50;
 const SCROLL_TOP_TRIGGER_PX = 24;
 const SCROLL_TOP_REARM_PX = 80;
 
@@ -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);
@@ -439,14 +486,37 @@ const TraceEvent = memo(function TraceEvent({ msg }) {
 }, (prev, next) => prev.msg === next.msg);
 
 /* ─── ThinkingGroup — collapses consecutive trace events into one row ─── */
-const ThinkingGroup = memo(function ThinkingGroup({ msgs }) {
+const ThinkingGroup = memo(function ThinkingGroup({ msgs, isLatest = false, isAgentActive = false }) {
   const hasErrors = msgs.some((m) => m.type === "error" || m.type === "stream_error");
-  const [expanded, setExpanded] = useState(hasErrors);
+  // Track whether user has manually toggled this group
+  const userToggledRef = useRef(false);
+  const [expanded, setExpanded] = useState(() => hasErrors || (isLatest && isAgentActive));
 
+  // Auto-close when this group is no longer the latest active group
+  useEffect(() => {
+    if (userToggledRef.current) return;
+    if (isLatest && isAgentActive) {
+      setExpanded(true);
+    } else if (!isLatest) {
+      setExpanded(false);
+    }
+  }, [isLatest, isAgentActive]);
+
+  // Always expand on errors
   useEffect(() => {
     if (hasErrors) setExpanded(true);
   }, [msgs.length, hasErrors]);
 
+  // Reset user-toggle when group identity changes
+  useEffect(() => {
+    userToggledRef.current = false;
+  }, [msgs]);
+
+  const handleToggle = useCallback(() => {
+    userToggledRef.current = true;
+    setExpanded((p) => !p);
+  }, []);
+
   const toolCount = msgs.filter((m) => m.type === "tool_call").length;
   const stepCount = msgs.filter((m) => {
     const t = (m.type || "").toLowerCase();
@@ -459,20 +529,28 @@ const ThinkingGroup = memo(function ThinkingGroup({ msgs }) {
   const label = parts.join(", ") || `${msgs.length} step${msgs.length !== 1 ? "s" : ""}`;
 
   return html`
-    <div class="thinking-group ${expanded ? "expanded" : ""} ${hasErrors ? "has-errors" : ""}">
-      <button class="thinking-group-head" type="button" onClick=${() => setExpanded((p) => !p)}>
-        <span class="thinking-group-badge">${iconText(":cpu: Thinking")}</span>
+    <div class="thinking-group ${expanded ? "expanded" : ""} ${hasErrors ? "has-errors" : ""} ${isLatest && isAgentActive ? "thinking-group-active" : ""}">
+      <button class="thinking-group-head" type="button" onClick=${handleToggle}>
+        <span class="thinking-group-badge">
+          ${isLatest && isAgentActive
+            ? iconText(":cpu: Working…")
+            : iconText(":cpu: Thinking")}
+        </span>
         <span class="thinking-group-label">${label}</span>
         <span class="thinking-group-chevron">${expanded ? "▾" : "▸"}</span>
       </button>
-      ${expanded && html`
+      <div class="thinking-group-body-wrap ${expanded ? "expanded" : ""}">
         <div class="thinking-group-body">
           ${msgs.map((m, idx) => html`<${TraceEvent} key=${m.id || m.timestamp || idx} msg=${m} />`)}
         </div>
-      `}
+      </div>
     </div>
   `;
-}, (prev, next) => prev.msgs === next.msgs);
+}, (prev, next) =>
+  prev.msgs === next.msgs &&
+  prev.isLatest === next.isLatest &&
+  prev.isAgentActive === next.isAgentActive,
+);
 
 /* ─── Chat View component ─── */
 
@@ -495,6 +573,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);
@@ -684,6 +764,13 @@ export function ChatView({ sessionId, readOnly = false, embedded = false }) {
         i++;
       }
     }
+    // Mark the last thinking-group as "latest" for auto-expand/collapse
+    for (let j = items.length - 1; j >= 0; j--) {
+      if (items[j].kind === "thinking-group") {
+        items[j].isLatest = true;
+        break;
+      }
+    }
     return items;
   }, [visibleMessages]);
 
@@ -795,6 +882,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 +992,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 +1365,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.
@@ -1247,7 +1388,12 @@ export function ChatView({ sessionId, readOnly = false, embedded = false }) {
           </div>
         `}
         ${renderItems.map((item) => item.kind === "thinking-group"
-          ? html`<${ThinkingGroup} key=${item.key} msgs=${item.msgs} />`
+          ? html`<${ThinkingGroup}
+              key=${item.key}
+              msgs=${item.msgs}
+              isLatest=${!!item.isLatest}
+              isAgentActive=${statusState !== "idle" && statusState !== "paused"}
+            />`
           : html`<${ChatBubble}
               key=${item.key}
               msg=${item.msg}

package/ui/components/session-list.js

@@ -20,7 +20,7 @@ export const sessionsError = signal(null);
 /** Pagination metadata from the last loadSessionMessages call */
 export const sessionPagination = signal(null);
 
-const DEFAULT_SESSION_PAGE_SIZE = 20;
+const DEFAULT_SESSION_PAGE_SIZE = 50;
 const MAX_SESSION_PAGE_SIZE = 200;
 
 let _wsListenerReady = false;
@@ -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 ─── */
 
 /**