agent-office 0.0.10 → 0.0.12

package/dist/commands/communicator.js

@@ -429,14 +429,22 @@ function renderPage(coworker, msgs, humanName) {
   const input = document.getElementById('msg-input')
 
   let lastSeenId = parseInt(document.querySelector('#messages-inner')?.dataset?.lastId ?? '0', 10)
+  let userScrolledUp = false
 
   function scrollToBottom() {
-    if (outer) outer.scrollTop = outer.scrollHeight
+    if (!outer) return
+    requestAnimationFrame(() => {
+      outer.scrollTop = outer.scrollHeight
+      // After snapping, clear the flag so future messages auto-scroll again
+      userScrolledUp = false
+    })
   }
 
-  function isNearBottom() {
-    return outer.scrollHeight - outer.scrollTop - outer.clientHeight < 80
-  }
+  // Detect when the user manually scrolls up
+  outer.addEventListener('scroll', () => {
+    const distFromBottom = outer.scrollHeight - outer.scrollTop - outer.clientHeight
+    userScrolledUp = distFromBottom > 80
+  })
 
   // Auto-grow textarea
   input.addEventListener('input', function() {
@@ -453,7 +461,7 @@ function renderPage(coworker, msgs, humanName) {
     }
   }
 
-  // After send: clear input, re-enable button, trigger refresh
+  // After send: clear input, re-enable button, force scroll and refresh
   function handleSent(event) {
     const form = event.target
     const btn = form.querySelector('.send-btn')
@@ -462,20 +470,20 @@ function renderPage(coworker, msgs, humanName) {
       input.value = ''
       input.style.height = 'auto'
       input.focus()
-      // Force scroll on the next swap since we just sent a message
+      userScrolledUp = false
       lastSeenId = -1
       htmx.trigger(document.getElementById('messages'), 'load')
     }
   }
 
-  // Only scroll to bottom when new messages actually arrive
+  // Scroll to bottom whenever new messages arrive, unless user has scrolled up
   document.addEventListener('htmx:afterSwap', (e) => {
     if (e.detail.target.id !== 'messages') return
     const inner = document.getElementById('messages-inner')
     const newLastId = parseInt(inner?.dataset?.lastId ?? '0', 10)
     if (newLastId > lastSeenId) {
       lastSeenId = newLastId
-      if (isNearBottom()) scrollToBottom()
+      if (!userScrolledUp) scrollToBottom()
     }
   })
 

package/dist/manage/components/CronList.js

@@ -39,7 +39,7 @@ export function CronList({ serverUrl, password, onBack, contentHeight, sessionNa
             onBack();
             return;
         }
-        if (key.escape && (mode === "confirm-delete" || mode === "confirm-enable" || mode === "confirm-disable" || mode === "history")) {
+        if (key.escape && (mode === "confirm-delete" || mode === "confirm-enable" || mode === "confirm-disable" || mode === "history" || mode === "view-message")) {
             setMode("list");
             return;
         }
@@ -81,6 +81,9 @@ export function CronList({ serverUrl, password, onBack, contentHeight, sessionNa
                     setActionError(null);
                     loadHistory(selected.id);
                 }
+                if (input === "v") {
+                    setMode("view-message");
+                }
             }
         }
         if (mode === "confirm-delete" || mode === "confirm-enable" || mode === "confirm-disable") {
@@ -290,6 +293,14 @@ export function CronList({ serverUrl, password, onBack, contentHeight, sessionNa
         }
         return null;
     };
+    const renderViewMessage = () => {
+        if (mode !== "view-message")
+            return null;
+        const selected = filteredCrons[cursor];
+        if (!selected)
+            return null;
+        return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Box, { gap: 2, children: [_jsx(Text, { bold: true, children: "Message Preview" }), _jsx(Text, { dimColor: true, children: selected.name })] }), _jsx(Box, { borderStyle: "round", borderColor: "cyan", paddingX: 1, paddingY: 0, flexDirection: "column", children: _jsx(Text, { wrap: "wrap", children: selected.message }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Esc back" }) })] }));
+    };
     const renderHistory = () => {
         if (mode !== "history")
             return null;
@@ -301,10 +312,10 @@ export function CronList({ serverUrl, password, onBack, contentHeight, sessionNa
     const actionPanel = renderActionPanel();
     const panelHeight = actionPanel ? 5 : 0;
     const tableHeight = contentHeight - panelHeight - 5;
-    return (_jsxs(Box, { flexDirection: "column", gap: 0, children: [renderCreateSelectSession(), renderCreateFields(), renderHistory(), (mode === "list" || mode === "confirm-delete" || mode === "confirm-enable" || mode === "confirm-disable" || mode === "deleting" || mode === "toggling") && (_jsxs(_Fragment, { children: [_jsxs(Box, { gap: 2, marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Cron Jobs" }), selectedSession ? (_jsxs(Text, { color: "cyan", dimColor: true, children: ["[", filteredCrons.length, " jobs for ", selectedSession, "]"] })) : (_jsxs(Text, { dimColor: true, children: ["[", filteredCrons.length, " total]"] })), loading && _jsx(Spinner, {})] }), actionPanel, filteredCrons.length === 0 ? (_jsx(Box, { height: tableHeight, alignItems: "center", justifyContent: "center", children: _jsx(Text, { dimColor: true, children: selectedSession
+    return (_jsxs(Box, { flexDirection: "column", gap: 0, children: [renderCreateSelectSession(), renderCreateFields(), renderViewMessage(), renderHistory(), (mode === "list" || mode === "confirm-delete" || mode === "confirm-enable" || mode === "confirm-disable" || mode === "deleting" || mode === "toggling" || mode === "view-message") && (_jsxs(_Fragment, { children: [_jsxs(Box, { gap: 2, marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Cron Jobs" }), selectedSession ? (_jsxs(Text, { color: "cyan", dimColor: true, children: ["[", filteredCrons.length, " jobs for ", selectedSession, "]"] })) : (_jsxs(Text, { dimColor: true, children: ["[", filteredCrons.length, " total]"] })), loading && _jsx(Spinner, {})] }), actionPanel, filteredCrons.length === 0 ? (_jsx(Box, { height: tableHeight, alignItems: "center", justifyContent: "center", children: _jsx(Text, { dimColor: true, children: selectedSession
                                 ? `No cron jobs for ${selectedSession}. Press c to create one.`
                                 : "No cron jobs yet. Press c to create one." }) })) : (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { gap: 2, marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "  NAME".padEnd(20) }), _jsx(Text, { bold: true, color: "cyan", children: "COWORKER".padEnd(15) }), _jsx(Text, { bold: true, color: "cyan", children: "SCHEDULE".padEnd(20) }), _jsx(Text, { bold: true, color: "cyan", children: "NEXT RUN".padEnd(NEXT_RUN_PADDING) }), _jsx(Text, { bold: true, color: "cyan", children: "STATUS" })] }), filteredCrons.map((job, idx) => {
                                 const selected = idx === cursor;
                                 return (_jsxs(Box, { gap: 2, children: [_jsxs(Box, { width: 20, children: [_jsx(Text, { color: selected ? "cyan" : undefined, children: selected ? "▶ " : "  " }), _jsx(Text, { color: selected ? "cyan" : "green", bold: selected, children: job.name })] }), _jsx(Box, { width: 15, children: _jsx(Text, { color: selected ? "magenta" : undefined, dimColor: !selected, children: job.session_name.padEnd(15) }) }), _jsx(Box, { width: 20, children: _jsx(Text, { dimColor: !selected, children: job.schedule.padEnd(20) }) }), _jsx(Box, { width: NEXT_RUN_PADDING, children: _jsx(Text, { color: job.enabled ? (selected ? "cyan" : "green") : "gray", dimColor: !selected, children: job.enabled ? formatNextRun(job.next_run).padEnd(NEXT_RUN_PADDING) : "DISABLED".padEnd(NEXT_RUN_PADDING) }) }), _jsx(Text, { color: job.enabled ? "green" : "gray", dimColor: !selected, children: job.enabled ? "enabled" : "disabled" })] }, job.id));
-                            })] })), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["c create \u00B7 d delete \u00B7 e enable/disable \u00B7 h history \u00B7 f", " ", selectedSession ? "show all" : "filter by coworker", " \u00B7 Esc back"] }) })] }))] }));
+                            })] })), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["c create \u00B7 d delete \u00B7 e enable/disable \u00B7 h history \u00B7 v view message \u00B7 f", " ", selectedSession ? "show all" : "filter by coworker", " \u00B7 Esc back"] }) })] }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-office",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "Manage OpenCode sessions with named aliases",
   "type": "module",
   "license": "MIT",