agent-office 0.4.5 → 0.4.7

package/dist/commands/communicator.js

@@ -43,6 +43,22 @@ async function fetchMessages(agentUrl, password, humanName, coworker) {
 async function markRead(agentUrl, password, id) {
     await apiFetch(agentUrl, password, `/messages/${id}/read`, { method: "POST" });
 }
+async function fetchCronRequests(agentUrl, password, status) {
+    const params = status ? `?status=${encodeURIComponent(status)}` : "";
+    return apiFetch(agentUrl, password, `/cron-requests${params}`);
+}
+async function approveCronRequest(agentUrl, password, id, notes) {
+    await apiFetch(agentUrl, password, `/cron-requests/${id}/approve`, {
+        method: "POST",
+        body: JSON.stringify({ notes })
+    });
+}
+async function rejectCronRequest(agentUrl, password, id, notes) {
+    await apiFetch(agentUrl, password, `/cron-requests/${id}/reject`, {
+        method: "POST",
+        body: JSON.stringify({ notes })
+    });
+}
 // ── HTML helpers ──────────────────────────────────────────────────────────────
 function escapeHtml(str) {
     return str
@@ -58,6 +74,15 @@ function formatTime(iso) {
         hour: "2-digit", minute: "2-digit",
     });
 }
+function formatFullTime(iso) {
+    return new Date(iso).toLocaleString(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+    });
+}
 function renderMessage(msg, humanName, spacingClass) {
     const isMine = msg.from_name === humanName;
     const bubbleClass = isMine ? "bubble bubble-mine" : "bubble bubble-theirs";
@@ -227,6 +252,16 @@ function renderPage(coworker, coworkers, msgs, humanName) {
     .refresh-indicator.active { background: var(--green); }
 
     /* ── Reset button ── */
+    .header-link {
+      color: var(--text-dim);
+      text-decoration: none;
+      font-size: 18px;
+      margin-right: 8px;
+      transition: color 0.15s;
+      flex-shrink: 0;
+    }
+    .header-link:hover { color: var(--accent); }
+
     .reset-btn {
       background: none;
       border: 1px solid var(--border);
@@ -475,6 +510,7 @@ function renderPage(coworker, coworkers, msgs, humanName) {
            hx-trigger="load, every 5s"
            hx-swap="innerHTML"></div>
     </div>
+    <a href="/cron-requests" class="header-link" title="Manage cron job requests">⚙️</a>
     <button class="reset-btn"
             hx-post="/reset?coworker=${encodeURIComponent(selected)}"
             hx-target="#reset-status"
@@ -647,6 +683,501 @@ function renderPage(coworker, coworkers, msgs, humanName) {
 </body>
 </html>`;
 }
+function renderCronRequestsPage(requests) {
+    const pendingCount = requests.filter(r => r.status === 'pending').length;
+    const approvedCount = requests.filter(r => r.status === 'approved').length;
+    const rejectedCount = requests.filter(r => r.status === 'rejected').length;
+    const requestsHtml = requests.length === 0
+        ? `<div class="empty-state">No cron requests found.</div>`
+        : requests.map(r => {
+            const statusColor = r.status === 'pending' ? 'var(--accent)' :
+                r.status === 'approved' ? 'var(--green)' : 'var(--red)';
+            const actionButtons = r.status === 'pending'
+                ? `<div class="request-actions">
+              <button class="action-btn approve-btn"
+                      hx-post="/approve-request?id=${r.id}"
+                      hx-confirm="Approve this cron job request?"
+                      hx-target="#action-status"
+                      hx-swap="innerHTML"
+                      title="Approve request">✓</button>
+              <button class="action-btn reject-btn"
+                      hx-post="/reject-request?id=${r.id}"
+                      hx-confirm="Reject this cron job request?"
+                      hx-target="#action-status"
+                      hx-swap="innerHTML"
+                      title="Reject request">✗</button>
+            </div>`
+                : '';
+            return `<div class="request-card" style="border-left: 4px solid ${statusColor}">
+          <div class="request-header">
+            <div class="request-title">
+              <strong>${escapeHtml(r.name)}</strong>
+              <span class="request-status" style="color: ${statusColor}">${r.status.toUpperCase()}</span>
+            </div>
+            <div class="request-meta">
+              <span class="request-coworker">👤 ${escapeHtml(r.session_name)}</span>
+              <span class="request-time">🕒 ${formatFullTime(r.requested_at)}</span>
+            </div>
+          </div>
+          <div class="request-details">
+            <div class="request-schedule">
+              <strong>Schedule:</strong> <code>${escapeHtml(r.schedule)}</code>
+              ${r.timezone ? `<span class="timezone">(TZ: ${escapeHtml(r.timezone)})</span>` : ''}
+            </div>
+            <div class="request-message">
+              <strong>Message:</strong>
+              <div class="message-content markdown-body" data-markdown>${escapeHtml(r.message)}</div>
+            </div>
+            ${r.reviewed_at && r.reviewed_by ? `
+            <div class="request-review">
+              <strong>Reviewed by ${escapeHtml(r.reviewed_by)} on ${formatFullTime(r.reviewed_at)}</strong>
+              ${r.reviewer_notes ? `<div class="review-notes">${escapeHtml(r.reviewer_notes)}</div>` : ''}
+            </div>
+            ` : ''}
+          </div>
+          ${actionButtons}
+        </div>`;
+        }).join('\n');
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <title>Cron Requests — 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; }
+
+    :root {
+      --bg: #0f1117;
+      --surface: #1a1d27;
+      --surface2: #22263a;
+      --border: #2e3248;
+      --accent: #6c8eff;
+      --accent-dim: #3d52a0;
+      --text: #e2e8f0;
+      --text-dim: #8892a4;
+      --green: #6bffb8;
+      --red: #ff6b6b;
+      --radius: 12px;
+      --radius-sm: 6px;
+      --header-h: 56px;
+      font-size: 16px;
+    }
+
+    html, body {
+      height: 100%;
+      background: var(--bg);
+      color: var(--text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+      overflow: hidden;
+    }
+
+    .app {
+      display: flex;
+      flex-direction: column;
+      height: 100dvh;
+    }
+
+    /* Header */
+    .header {
+      flex-shrink: 0;
+      height: var(--header-h);
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+      gap: 12px;
+    }
+
+    .header-title {
+      font-weight: 600;
+      font-size: 18px;
+      color: var(--accent);
+    }
+
+    .header-stats {
+      margin-left: auto;
+      display: flex;
+      gap: 16px;
+      font-size: 14px;
+    }
+
+    .stat-item {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .stat-count {
+      font-weight: 600;
+    }
+
+    .back-link {
+      color: var(--text-dim);
+      text-decoration: none;
+      font-size: 16px;
+      transition: color 0.15s;
+    }
+    .back-link:hover { color: var(--accent); }
+
+    /* Content */
+    .content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    .filter-tabs {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 16px;
+    }
+
+    .filter-tab {
+      padding: 8px 16px;
+      background: var(--surface2);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-sm);
+      color: var(--text-dim);
+      text-decoration: none;
+      font-size: 14px;
+      transition: all 0.15s;
+    }
+
+    .filter-tab:hover {
+      border-color: var(--accent-dim);
+      color: var(--accent);
+    }
+
+    .filter-tab.active {
+      background: var(--accent);
+      color: #fff;
+      border-color: var(--accent);
+    }
+
+    .empty-state {
+      text-align: center;
+      color: var(--text-dim);
+      font-size: 16px;
+      padding: 48px;
+    }
+
+    /* Request Cards */
+    .request-card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 16px;
+      margin-bottom: 12px;
+    }
+
+    .request-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 12px;
+    }
+
+    .request-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 16px;
+    }
+
+    .request-status {
+      font-size: 12px;
+      font-weight: 600;
+      padding: 2px 8px;
+      border-radius: var(--radius-sm);
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    .request-meta {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 2px;
+      font-size: 12px;
+      color: var(--text-dim);
+    }
+
+    .request-details {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      font-size: 14px;
+    }
+
+    .request-schedule {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+
+    .request-schedule code {
+      background: var(--surface2);
+      padding: 2px 6px;
+      border-radius: var(--radius-sm);
+      font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+      font-size: 13px;
+    }
+
+    .timezone {
+      color: var(--text-dim);
+      font-size: 12px;
+    }
+
+    .request-message {
+      margin-top: 4px;
+    }
+
+    .message-content {
+      background: var(--surface2);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-sm);
+      padding: 8px 12px;
+      margin-top: 4px;
+      font-size: 13px;
+      line-height: 1.4;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .request-review {
+      margin-top: 8px;
+      padding-top: 8px;
+      border-top: 1px solid var(--border);
+      font-size: 13px;
+      color: var(--text-dim);
+    }
+
+    .review-notes {
+      margin-top: 4px;
+      background: rgba(255, 255, 255, 0.05);
+      padding: 6px 10px;
+      border-radius: var(--radius-sm);
+      border-left: 3px solid var(--accent);
+    }
+
+    .request-actions {
+      display: flex;
+      gap: 8px;
+      margin-top: 12px;
+      padding-top: 12px;
+      border-top: 1px solid var(--border);
+    }
+
+    .action-btn {
+      padding: 6px 12px;
+      border: 1px solid var(--border);
+      border-radius: var(--radius-sm);
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 600;
+      transition: all 0.15s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 32px;
+    }
+
+    .approve-btn {
+      background: rgba(107, 255, 184, 0.1);
+      border-color: var(--green);
+      color: var(--green);
+    }
+
+    .approve-btn:hover {
+      background: var(--green);
+      color: #fff;
+    }
+
+    .reject-btn {
+      background: rgba(255, 107, 107, 0.1);
+      border-color: var(--red);
+      color: var(--red);
+    }
+
+    .reject-btn:hover {
+      background: var(--red);
+      color: #fff;
+    }
+
+    .action-btn.htmx-request {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+
+    /* Status messages */
+    #action-status {
+      position: fixed;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 12px 20px;
+      font-size: 14px;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.3s;
+      z-index: 1000;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    }
+
+    #action-status.visible {
+      opacity: 1;
+    }
+
+    #action-status.success {
+      border-color: var(--green);
+      color: var(--green);
+    }
+
+    #action-status.error {
+      border-color: var(--red);
+      color: var(--red);
+    }
+
+    /* Markdown styling */
+    .markdown-body {
+      background: transparent;
+      color: inherit;
+    }
+
+    .markdown-body p { margin: 0 0 8px 0; }
+    .markdown-body p:last-child { margin-bottom: 0; }
+    .markdown-body pre {
+      background: rgba(0,0,0,0.3);
+      border-radius: 6px;
+      padding: 8px 12px;
+      overflow-x: auto;
+      margin: 8px 0;
+    }
+    .markdown-body code {
+      background: rgba(0,0,0,0.2);
+      padding: 2px 5px;
+      border-radius: 3px;
+      font-size: 12px;
+    }
+    .markdown-body pre code {
+      background: transparent;
+      padding: 0;
+    }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <div class="header">
+      <a href="/" class="back-link" title="Back to chat">←</a>
+      <div class="header-title">Cron Requests</div>
+      <div class="header-stats">
+        <div class="stat-item">
+          <span>⏳</span>
+          <span class="stat-count">${pendingCount}</span>
+          <span>pending</span>
+        </div>
+        <div class="stat-item">
+          <span>✅</span>
+          <span class="stat-count">${approvedCount}</span>
+          <span>approved</span>
+        </div>
+        <div class="stat-item">
+          <span>❌</span>
+          <span class="stat-count">${rejectedCount}</span>
+          <span>rejected</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="content">
+      <div class="filter-tabs">
+        <a href="/cron-requests" class="filter-tab">All</a>
+        <a href="/cron-requests?status=pending" class="filter-tab">Pending</a>
+        <a href="/cron-requests?status=approved" class="filter-tab">Approved</a>
+        <a href="/cron-requests?status=rejected" class="filter-tab">Rejected</a>
+      </div>
+
+      ${requestsHtml}
+    </div>
+
+    <div id="action-status"></div>
+  </div>
+
+  <script>
+    // Set active filter tab based on URL
+    function setActiveTab() {
+      const urlParams = new URLSearchParams(window.location.search)
+      const status = urlParams.get('status') || 'all'
+      document.querySelectorAll('.filter-tab').forEach(tab => {
+        const href = tab.getAttribute('href')
+        const tabStatus = href === '/cron-requests' ? 'all' : href.split('=')[1]
+        if (tabStatus === status) {
+          tab.classList.add('active')
+        } else {
+          tab.classList.remove('active')
+        }
+      })
+    }
+
+    // Render markdown in request messages
+    function renderMarkdown() {
+      if (typeof marked === 'undefined') return
+      document.querySelectorAll('.message-content').forEach(el => {
+        if (!el.hasAttribute('data-rendered')) {
+          el.innerHTML = marked.parse(el.textContent || '')
+          el.setAttribute('data-rendered', 'true')
+        }
+      })
+    }
+
+    // Show status messages
+    function showStatus(message, type = 'success') {
+      const el = document.getElementById('action-status')
+      if (!el) return
+      el.textContent = message
+      el.className = type
+      el.classList.add('visible')
+      clearTimeout(el._hideTimer)
+      el._hideTimer = setTimeout(() => el.classList.remove('visible'), 4000)
+    }
+
+    // Initial setup
+    setActiveTab()
+    renderMarkdown()
+
+    // HTMX event handlers
+    document.addEventListener('htmx:afterRequest', (e) => {
+      const xhr = e.detail.xhr
+      if (xhr.status >= 200 && xhr.status < 300) {
+        // Success - refresh the page
+        setTimeout(() => window.location.reload(), 1000)
+        showStatus('Action completed successfully')
+      } else {
+        // Error
+        try {
+          const response = JSON.parse(xhr.responseText)
+          showStatus('Error: ' + (response.error || 'Unknown error'), 'error')
+        } catch {
+          showStatus('Error: Request failed', 'error')
+        }
+      }
+    })
+  </script>
+</body>
+</html>`;
+}
 // ── Express app ───────────────────────────────────────────────────────────────
 export async function appCoworkerChatWeb(options) {
     const { url: agentUrl, password, host, port: portStr } = options;
@@ -712,6 +1243,57 @@ export async function appCoworkerChatWeb(options) {
             res.send(renderDropdown(coworker ?? null, [{ name: humanName, status: null, isHuman: true, unreadMessages: 0 }]));
         }
     });
+    // ── GET /cron-requests — cron requests page ──────────────────────────────
+    app.get("/cron-requests", async (req, res) => {
+        try {
+            const status = req.query.status;
+            const requests = await fetchCronRequests(agentUrl, password, status);
+            res.setHeader("Content-Type", "text/html; charset=utf-8");
+            res.send(renderCronRequestsPage(requests));
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : String(err);
+            res.status(502).send(`<pre>Error connecting to agent-office: ${escapeHtml(msg)}</pre>`);
+        }
+    });
+    // ── POST /approve-request — approve a cron request ─────────────────────────
+    app.post("/approve-request", async (req, res) => {
+        const id = req.query.id;
+        if (!id) {
+            res.setHeader("Content-Type", "text/html; charset=utf-8");
+            res.send(`<span style="color:var(--red)">Error: Request ID required</span>`);
+            return;
+        }
+        try {
+            await approveCronRequest(agentUrl, password, parseInt(id, 10));
+            res.setHeader("Content-Type", "text/html; charset=utf-8");
+            res.send(`<span style="color:var(--green)">✓ Request approved successfully</span>`);
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : String(err);
+            res.setHeader("Content-Type", "text/html; charset=utf-8");
+            res.send(`<span style="color:var(--red)">✗ Approval failed: ${escapeHtml(msg)}</span>`);
+        }
+    });
+    // ── POST /reject-request — reject a cron request ───────────────────────────
+    app.post("/reject-request", async (req, res) => {
+        const id = req.query.id;
+        if (!id) {
+            res.setHeader("Content-Type", "text/html; charset=utf-8");
+            res.send(`<span style="color:var(--red)">Error: Request ID required</span>`);
+            return;
+        }
+        try {
+            await rejectCronRequest(agentUrl, password, parseInt(id, 10));
+            res.setHeader("Content-Type", "text/html; charset=utf-8");
+            res.send(`<span style="color:var(--green)">✓ Request rejected successfully</span>`);
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : String(err);
+            res.setHeader("Content-Type", "text/html; charset=utf-8");
+            res.send(`<span style="color:var(--red)">✗ Rejection failed: ${escapeHtml(msg)}</span>`);
+        }
+    });
     // ── GET / — full page ────────────────────────────────────────────────────
     app.get("/", async (req, res) => {
         try {

package/dist/commands/serve.d.ts

@@ -5,6 +5,9 @@ interface ServeOptions {
     port: string;
     password?: string;
     opencodeUrl: string;
+    piVendor?: string;
+    piModel?: string;
+    piApiKey?: string;
 }
 export declare function serve(options: ServeOptions): Promise<void>;
 export {};

package/dist/commands/serve.js

@@ -1,6 +1,7 @@
 import { createPostgresqlStorage, createSqliteStorage } from "../db/index.js";
 import { runMigrations } from "../db/migrate.js";
 import { OpenCodeCodingServer } from "../lib/opencode-coding-server.js";
+import { PiCodingServer } from "../lib/pi-coding-server.js";
 import { createApp } from "../server/index.js";
 import { CronScheduler } from "../server/cron.js";
 export async function serve(options) {
@@ -39,9 +40,35 @@ export async function serve(options) {
         await storage.close();
         process.exit(1);
     }
-    // Init agentic coding server (OpenCode implementation)
-    const agenticCodingServer = new OpenCodeCodingServer(options.opencodeUrl);
-    console.log(`Connecting to OpenCode server at ${options.opencodeUrl}...`);
+    // Init agentic coding server
+    let agenticCodingServer;
+    const piVendor = options.piVendor;
+    const piModel = options.piModel;
+    const piApiKey = options.piApiKey;
+    const hasAllPiOptions = piVendor && piModel && piApiKey;
+    const hasSomePiOptions = piVendor || piModel || piApiKey;
+    if (hasAllPiOptions) {
+        // Use PI Coding Server
+        agenticCodingServer = new PiCodingServer(piVendor, piModel, piApiKey);
+        console.log(`Using PI coding server with ${piVendor} ${piModel}...`);
+    }
+    else if (hasSomePiOptions) {
+        // Partial PI options - error
+        console.error("Error: All PI coding options must be provided together: --pi-vendor, --pi-model, --pi-api-key");
+        console.error("  Or set environment variables: PI_VENDOR, PI_MODEL, PI_API_KEY");
+        await storage.close();
+        process.exit(1);
+    }
+    else {
+        // Use OpenCode Coding Server (default)
+        agenticCodingServer = new OpenCodeCodingServer(options.opencodeUrl);
+        if (options.opencodeUrl === "http://127.0.0.1:4096") {
+            console.log(`Connecting to default OpenCode server at ${options.opencodeUrl}...`);
+        }
+        else {
+            console.log(`Connecting to OpenCode server at ${options.opencodeUrl}...`);
+        }
+    }
     const serverUrl = `http://${options.host}:${port}`;
     // Create cron scheduler
     const cronScheduler = new CronScheduler();