agent-office 0.0.13 → 0.0.14

package/dist/commands/communicator.js

@@ -59,11 +59,12 @@ function renderMessage(msg, humanName, spacingClass) {
     const isMine = msg.from_name === humanName;
     const bubbleClass = isMine ? "bubble bubble-mine" : "bubble bubble-theirs";
     const wrapClass = `msg-wrap ${isMine ? "msg-wrap-mine" : "msg-wrap-theirs"} ${spacingClass}`;
-    const bodyHtml = escapeHtml(msg.body).replace(/\n/g, "<br>");
+    // Base64 encode to preserve newlines and special chars reliably
+    const bodyEncoded = Buffer.from(msg.body).toString('base64');
     const unreadDot = !isMine && !msg.read ? `<span class="unread-dot"></span>` : "";
     return `<div class="${wrapClass}" data-id="${msg.id}">
   <div class="${bubbleClass}">
-    <div class="bubble-body">${bodyHtml}</div>
+    <div class="bubble-body markdown-body" data-markdown-b64="${bodyEncoded}"></div>
     <div class="bubble-time">${unreadDot}${formatTime(msg.created_at)}</div>
   </div>
 </div>`;
@@ -91,6 +92,9 @@ function renderPage(coworker, msgs, humanName) {
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <title>${escapeHtml(coworker)} — agent-office</title>
   <script src="https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.5.1/github-markdown-light.min.css" media="(prefers-color-scheme: light)">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.5.1/github-markdown-dark.min.css" media="(prefers-color-scheme: dark)">
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
@@ -264,6 +268,66 @@ function renderPage(coworker, msgs, humanName) {
     }
 
     .bubble-body { font-size: 14.5px; }
+    .bubble-body.markdown-body {
+      background: transparent;
+      color: inherit;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+    .bubble-body.markdown-body p { margin: 0 0 8px 0; }
+    .bubble-body.markdown-body p:last-child { margin-bottom: 0; }
+    .bubble-body.markdown-body pre {
+      background: rgba(0,0,0,0.3);
+      border-radius: 6px;
+      padding: 8px 12px;
+      overflow-x: auto;
+      margin: 8px 0;
+    }
+    .bubble-body.markdown-body code {
+      background: rgba(0,0,0,0.2);
+      padding: 2px 5px;
+      border-radius: 3px;
+      font-size: 13px;
+      font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+    }
+    .bubble-body.markdown-body pre code {
+      background: transparent;
+      padding: 0;
+    }
+    .bubble-body.markdown-body ul, .bubble-body.markdown-body ol {
+      margin: 8px 0;
+      padding-left: 20px;
+    }
+    .bubble-body.markdown-body li { margin: 4px 0; }
+    .bubble-body.markdown-body blockquote {
+      border-left: 3px solid var(--accent);
+      margin: 8px 0;
+      padding-left: 12px;
+      color: var(--text-dim);
+    }
+    .bubble-body.markdown-body h1, .bubble-body.markdown-body h2,
+    .bubble-body.markdown-body h3, .bubble-body.markdown-body h4 {
+      margin: 12px 0 8px 0;
+      font-size: 15px;
+      font-weight: 600;
+    }
+    .bubble-body.markdown-body table {
+      border-collapse: collapse;
+      margin: 8px 0;
+      font-size: 13px;
+    }
+    .bubble-body.markdown-body th, .bubble-body.markdown-body td {
+      border: 1px solid var(--border);
+      padding: 6px 10px;
+    }
+    .bubble-body.markdown-body th {
+      background: var(--surface2);
+    }
+    .bubble-body.markdown-body strong,
+    .bubble-body.markdown-body b {
+      color: #ffffff;
+      font-weight: 600;
+    }
     .bubble-time {
       font-size: 10px;
       color: var(--text-dim);
@@ -498,6 +562,28 @@ function renderPage(coworker, msgs, humanName) {
     clearTimeout(el._hideTimer)
     el._hideTimer = setTimeout(() => el.classList.remove('visible'), 3000)
   }
+
+  // Render markdown in chat bubbles
+  function renderMarkdown() {
+    if (typeof marked === 'undefined') return
+    document.querySelectorAll('.markdown-body[data-markdown-b64]').forEach(el => {
+      const b64 = el.getAttribute('data-markdown-b64')
+      if (b64 && !el.hasAttribute('data-rendered')) {
+        // Decode base64 to get original text with preserved newlines
+        const text = atob(b64)
+        el.innerHTML = marked.parse(text)
+        el.setAttribute('data-rendered', 'true')
+      }
+    })
+  }
+
+  // Initial render
+  renderMarkdown()
+
+  // Re-render after HTMX swaps new content
+  document.addEventListener('htmx:afterSwap', () => {
+    renderMarkdown()
+  })
 </script>
 </body>
 </html>`;
@@ -609,10 +695,19 @@ export async function communicatorWeb(coworker, options) {
     app.get("/ping", (_req, res) => {
         res.status(204).end();
     });
-    app.listen(port, host, () => {
+    const server = app.listen(port, host, () => {
         console.log(`Communicator running at http://${host}:${port}`);
         console.log(`Press Ctrl+C to stop.`);
     });
+    server.on('error', (err) => {
+        if (err.code === 'EADDRINUSE') {
+            console.error(`Error: Port ${port} is already in use. Is another instance running?`);
+        }
+        else {
+            console.error(`Error: ${err.message}`);
+        }
+        process.exit(1);
+    });
     // Keep process alive
     await new Promise(() => { });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-office",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "An office for your AI agents",
   "type": "module",
   "license": "MIT",