agentgui 1.0.532 → 1.0.534

package/database.js

@@ -1434,6 +1434,62 @@ export const queries = {
     };
   },
 
+  getMessagesBefore(conversationId, beforeId, limit = 50) {
+    const countStmt = prep('SELECT COUNT(*) as count FROM messages WHERE conversationId = ?');
+    const total = countStmt.get(conversationId).count;
+
+    const stmt = prep(`
+      SELECT * FROM messages
+      WHERE conversationId = ? AND id < (SELECT id FROM messages WHERE id = ?)
+      ORDER BY created_at DESC LIMIT ?
+    `);
+    const messages = stmt.all(conversationId, beforeId, limit).reverse();
+
+    return {
+      messages: messages.map(msg => {
+        if (typeof msg.content === 'string') {
+          try {
+            msg.content = JSON.parse(msg.content);
+          } catch (_) {}
+        }
+        return msg;
+      }),
+      total,
+      limit,
+      hasMore: total > (limit + 1)
+    };
+  },
+
+  getChunksBefore(conversationId, beforeTimestamp, limit = 500) {
+    const countStmt = prep('SELECT COUNT(*) as count FROM chunks WHERE conversationId = ?');
+    const total = countStmt.get(conversationId).count;
+
+    const stmt = prep(`
+      SELECT id, sessionId, conversationId, sequence, type, data, created_at
+      FROM chunks
+      WHERE conversationId = ? AND created_at < ?
+      ORDER BY created_at DESC LIMIT ?
+    `);
+    const rows = stmt.all(conversationId, beforeTimestamp, limit);
+    rows.reverse();
+
+    return {
+      chunks: rows.map(row => {
+        try {
+          return {
+            ...row,
+            data: typeof row.data === 'string' ? JSON.parse(row.data) : row.data
+          };
+        } catch (e) {
+          return row;
+        }
+      }),
+      total,
+      limit,
+      hasMore: total > (limit + 1)
+    };
+  },
+
   getChunksSince(sessionId, timestamp) {
     const stmt = prep(
       `SELECT id, sessionId, conversationId, sequence, type, data, created_at

package/lib/pm2-manager.js

@@ -0,0 +1,170 @@
+import pm2 from 'pm2';
+
+const ACTIVE_STATES = new Set(['online', 'launching', 'stopping', 'waiting restart']);
+
+class PM2Manager {
+  constructor() {
+    this.connected = false;
+    this.monitoring = false;
+    this.monitorInterval = null;
+    this.broadcastFn = null;
+    this.logStreams = new Map();
+  }
+
+  async connect() {
+    if (this.connected) return true;
+    return new Promise((resolve, reject) => {
+      pm2.connect(false, (err) => {
+        if (err) { this.connected = false; reject(err); }
+        else { this.connected = true; resolve(true); }
+      });
+    });
+  }
+
+  async ensureConnected() {
+    if (this.connected) return true;
+    await this.connect();
+    return true;
+  }
+
+  async listProcesses() {
+    try {
+      await this.ensureConnected();
+      return new Promise((resolve) => {
+        pm2.list((err, list) => {
+          if (err) { this.connected = false; resolve([]); return; }
+          if (!Array.isArray(list)) { resolve([]); return; }
+          resolve(list.map(proc => ({
+            name: proc.name,
+            pm_id: proc.pm_id,
+            status: proc.status,
+            pid: proc.pid,
+            cpu: proc.monit ? (proc.monit.cpu || 0) : 0,
+            memory: proc.monit ? (typeof proc.monit.memory === 'number' ? proc.monit.memory : 0) : 0,
+            uptime: proc.pm2_env ? proc.pm2_env.pm_uptime : null,
+            restarts: proc.pm2_env ? (proc.pm2_env.restart_time || 0) : 0,
+            watching: proc.pm2_env ? (proc.pm2_env.watch || false) : false,
+            isActive: ACTIVE_STATES.has(proc.status)
+          })));
+        });
+      });
+    } catch (_) {
+      this.connected = false;
+      return [];
+    }
+  }
+
+  async startMonitoring(broadcastFn) {
+    if (this.monitoring) return;
+    this.monitoring = true;
+    this.broadcastFn = broadcastFn;
+    const tick = async () => {
+      if (!this.monitoring) return;
+      try {
+        const processes = await this.listProcesses();
+        const hasActive = processes.some(p => p.isActive);
+        broadcastFn({ type: 'pm2_monit_update', processes, hasActive, available: true, timestamp: Date.now() });
+      } catch (_) {}
+    };
+    this.monitorInterval = setInterval(tick, 2000);
+    await tick();
+  }
+
+  stopMonitoring() {
+    this.monitoring = false;
+    if (this.monitorInterval) { clearInterval(this.monitorInterval); this.monitorInterval = null; }
+    this.broadcastFn = null;
+  }
+
+  async startProcess(name) {
+    try {
+      await this.ensureConnected();
+      return new Promise((resolve) => {
+        pm2.start(name, (err) => resolve(err ? { success: false, error: err.message } : { success: true }));
+      });
+    } catch (err) { return { success: false, error: err.message }; }
+  }
+
+  async stopProcess(name) {
+    try {
+      await this.ensureConnected();
+      return new Promise((resolve) => {
+        pm2.stop(name, (err) => resolve(err ? { success: false, error: err.message } : { success: true }));
+      });
+    } catch (err) { return { success: false, error: err.message }; }
+  }
+
+  async restartProcess(name) {
+    try {
+      await this.ensureConnected();
+      return new Promise((resolve) => {
+        pm2.restart(name, (err) => resolve(err ? { success: false, error: err.message } : { success: true }));
+      });
+    } catch (err) { return { success: false, error: err.message }; }
+  }
+
+  async deleteProcess(name) {
+    try {
+      await this.ensureConnected();
+      return new Promise((resolve) => {
+        pm2.delete(name, (err) => resolve(err ? { success: false, error: err.message } : { success: true }));
+      });
+    } catch (err) { return { success: false, error: err.message }; }
+  }
+
+  async getLogs(name, options = {}) {
+    try {
+      await this.ensureConnected();
+      const existing = this.logStreams.get(name);
+      if (existing) { try { existing.destroy(); } catch (_) {} this.logStreams.delete(name); }
+      return new Promise((resolve) => {
+        const lines = [];
+        let settled = false;
+        const finish = (result) => { if (!settled) { settled = true; resolve(result); } };
+        const timer = setTimeout(() => finish({ success: true, logs: lines.join('\n') }), 4000);
+        try {
+          const stream = pm2.logs(name, { raw: true, lines: options.lines || 100, follow: false });
+          this.logStreams.set(name, stream);
+          stream.on('data', (c) => lines.push(c.toString()));
+          stream.on('end', () => { clearTimeout(timer); this.logStreams.delete(name); finish({ success: true, logs: lines.join('\n') }); });
+          stream.on('error', (e) => { clearTimeout(timer); this.logStreams.delete(name); finish({ success: false, error: e.message }); });
+        } catch (err) { clearTimeout(timer); finish({ success: false, error: err.message }); }
+      });
+    } catch (err) { return { success: false, error: err.message }; }
+  }
+
+  async flushLogs(name) {
+    try {
+      await this.ensureConnected();
+      return new Promise((resolve) => {
+        pm2.flush(name, (err) => resolve(err ? { success: false, error: err.message } : { success: true }));
+      });
+    } catch (err) { return { success: false, error: err.message }; }
+  }
+
+  async ping() {
+    try {
+      await this.ensureConnected();
+      return { success: true, status: 'connected' };
+    } catch (err) { return { success: false, error: err.message }; }
+  }
+
+  async heal() {
+    this.connected = false;
+    try {
+      await this.connect();
+      return { success: true };
+    } catch (err) { return { success: false, error: err.message }; }
+  }
+
+  disconnect() {
+    this.stopMonitoring();
+    for (const [, s] of this.logStreams) { try { s.destroy(); } catch (_) {} }
+    this.logStreams.clear();
+    this.connected = false;
+    try { pm2.disconnect(); } catch (_) {}
+  }
+}
+
+export const pm2Manager = new PM2Manager();
+export default pm2Manager;

package/lib/tool-manager.js

@@ -5,10 +5,10 @@ import path from 'path';
 
 const isWindows = os.platform() === 'win32';
 const TOOLS = [
-  { id: 'gm-cc', name: 'gm-cc', pkg: '@anthropic-ai/claude-code', pluginId: 'gm-cc' },
-  { id: 'gm-oc', name: 'gm-oc', pkg: 'opencode-ai', pluginId: 'gm-oc' },
-  { id: 'gm-gc', name: 'gm-gc', pkg: '@google/gemini-cli', pluginId: 'gm' },
-  { id: 'gm-kilo', name: 'gm-kilo', pkg: '@kilocode/cli', pluginId: 'gm-kilo' },
+  { id: 'gm-cc', name: 'gm-cc', pkg: 'gm-cc', pluginId: 'gm-cc' },
+  { id: 'gm-oc', name: 'gm-oc', pkg: 'gm-oc', pluginId: 'gm-oc' },
+  { id: 'gm-gc', name: 'gm-gc', pkg: 'gm-gc', pluginId: 'gm' },
+  { id: 'gm-kilo', name: 'gm-kilo', pkg: 'gm-kilo', pluginId: 'gm-kilo' },
 ];
 
 const statusCache = new Map();

package/lib/ws-handlers-conv.js

@@ -73,6 +73,14 @@ export function register(router, deps) {
     return { ok: true, chunks: since > 0 ? allChunks.filter(c => c.created_at > since) : allChunks };
   });
 
+  router.handle('conv.chunks.earlier', (p) => {
+    if (!queries.getConversation(p.id)) notFound('Conversation not found');
+    const beforeTimestamp = parseInt(p.before || Date.now());
+    const limit = Math.min(p.limit || 500, 5000);
+    const result = queries.getChunksBefore(p.id, beforeTimestamp, limit);
+    return { ok: true, chunks: result.chunks, total: result.total, hasMore: result.hasMore, limit: result.limit };
+  });
+
   router.handle('conv.cancel', (p) => {
     const entry = activeExecutions.get(p.id);
     if (!entry) notFound('No active execution to cancel');
@@ -104,6 +112,14 @@ export function register(router, deps) {
     return queries.getPaginatedMessages(p.id, Math.min(p.limit || 50, 100), Math.max(p.offset || 0, 0));
   });
 
+  router.handle('msg.ls.earlier', (p) => {
+    if (!p.id) fail(400, 'Missing conversation id');
+    if (!p.before) fail(400, 'Missing before messageId parameter');
+    const limit = Math.min(p.limit || 50, 100);
+    const result = queries.getMessagesBefore(p.id, p.before, limit);
+    return { ok: true, messages: result.messages, total: result.total, hasMore: result.hasMore, limit: result.limit };
+  });
+
   function startExecution(convId, message, agentId, model, content, subAgent) {
     const session = queries.createSession(convId);
     queries.createEvent('session.created', { messageId: message.id, sessionId: session.id }, convId, session.id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.532",
+  "version": "1.0.534",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",
@@ -35,6 +35,7 @@
     "node-pty": "^1.0.0",
     "onnxruntime-node": "1.21.0",
     "opencode-ai": "^1.2.15",
+    "pm2": "^5.4.3",
     "puppeteer-core": "^24.37.5",
     "webtalk": "^1.0.31",
     "ws": "^8.14.2"

package/server.js

@@ -25,6 +25,7 @@ import { register as registerUtilHandlers } from './lib/ws-handlers-util.js';
 import { startAll as startACPTools, stopAll as stopACPTools, getStatus as getACPStatus, getPort as getACPPort, queryModels as queryACPModels, touch as touchACP } from './lib/acp-manager.js';
 import { installGMAgentConfigs } from './lib/gm-agent-configs.js';
 import * as toolManager from './lib/tool-manager.js';
+import { pm2Manager } from './lib/pm2-manager.js';
 
 
 process.on('uncaughtException', (err, origin) => {
@@ -4045,6 +4046,7 @@ const hotReloadClients = [];
 const syncClients = new Set();
 const subscriptionIndex = new Map();
 const sseStreamHandlers = new Map();
+const pm2Subscribers = new Set();
 
 wss.on('connection', (ws, req) => {
   // req.url in WebSocket is just the path (e.g., '/gm/sync'), not a full URL
@@ -4072,16 +4074,19 @@ wss.on('connection', (ws, req) => {
     });
 
     ws.on('pong', () => { ws.isAlive = true; });
-    ws.on('close', () => {
-      if (ws.terminalProc) { try { ws.terminalProc.kill(); } catch(e) {} ws.terminalProc = null; }
-      syncClients.delete(ws);
-      wsOptimizer.removeClient(ws);
-      for (const sub of ws.subscriptions) {
-        const idx = subscriptionIndex.get(sub);
-        if (idx) { idx.delete(ws); if (idx.size === 0) subscriptionIndex.delete(sub); }
-      }
-      console.log(`[WebSocket] Client ${ws.clientId} disconnected`);
-    });
+     ws.on('close', () => {
+       if (ws.terminalProc) { try { ws.terminalProc.kill(); } catch(e) {} ws.terminalProc = null; }
+       syncClients.delete(ws);
+       wsOptimizer.removeClient(ws);
+       for (const sub of ws.subscriptions) {
+         const idx = subscriptionIndex.get(sub);
+         if (idx) { idx.delete(ws); if (idx.size === 0) subscriptionIndex.delete(sub); }
+       }
+       if (ws.pm2Subscribed) {
+         pm2Subscribers.delete(ws);
+       }
+       console.log(`[WebSocket] Client ${ws.clientId} disconnected`);
+     });
   }
 });
 
@@ -4094,7 +4099,11 @@ const BROADCAST_TYPES = new Set([
   'streaming_start', 'streaming_progress', 'streaming_complete', 'streaming_error',
   'tool_install_started', 'tool_install_progress', 'tool_install_complete', 'tool_install_failed',
   'tool_update_progress', 'tool_update_complete', 'tool_update_failed',
-  'tools_update_started', 'tools_update_complete', 'tools_refresh_complete'
+  'tools_update_started', 'tools_update_complete', 'tools_refresh_complete',
+  'pm2_monit_update', 'pm2_monitoring_started', 'pm2_monitoring_stopped',
+  'pm2_list_response', 'pm2_start_response', 'pm2_stop_response',
+  'pm2_restart_response', 'pm2_delete_response', 'pm2_logs_response',
+  'pm2_flush_logs_response', 'pm2_ping_response', 'pm2_unavailable'
 ]);
 
 const wsOptimizer = new WSOptimizer();
@@ -4288,12 +4297,65 @@ wsRouter.onLegacy((data, ws) => {
         }
       } catch (e) {}
     }
-  } else if (data.type === 'terminal_stop') {
-    if (ws.terminalProc) {
-      try { ws.terminalProc.kill(); } catch(e) {}
-      ws.terminalProc = null;
+   } else if (data.type === 'terminal_stop') {
+     if (ws.terminalProc) {
+       try { ws.terminalProc.kill(); } catch(e) {}
+       ws.terminalProc = null;
+     }
+    } else if (data.type === 'pm2_list') {
+      if (!pm2Manager.connected) {
+        if (ws.readyState === 1) ws.send(JSON.stringify({ type: 'pm2_unavailable', reason: 'PM2 not connected', timestamp: Date.now() }));
+      } else {
+        pm2Manager.listProcesses().then(processes => {
+          if (ws.readyState === 1) {
+            const hasActive = processes.some(p => ['online','launching','stopping','waiting restart'].includes(p.status));
+            ws.send(JSON.stringify({ type: 'pm2_list_response', processes, hasActive }));
+          }
+        }).catch(() => {
+          if (ws.readyState === 1) ws.send(JSON.stringify({ type: 'pm2_unavailable', reason: 'list failed', timestamp: Date.now() }));
+        });
+      }
+    } else if (data.type === 'pm2_start_monitoring') {
+      pm2Subscribers.add(ws);
+      ws.pm2Subscribed = true;
+      if (!pm2Manager.connected) {
+        if (ws.readyState === 1) ws.send(JSON.stringify({ type: 'pm2_unavailable', reason: 'PM2 not connected', timestamp: Date.now() }));
+      } else {
+        ws.send(JSON.stringify({ type: 'pm2_monitoring_started' }));
+      }
+    } else if (data.type === 'pm2_stop_monitoring') {
+      pm2Subscribers.delete(ws);
+      ws.pm2Subscribed = false;
+      ws.send(JSON.stringify({ type: 'pm2_monitoring_stopped' }));
+    } else if (data.type === 'pm2_start') {
+      pm2Manager.startProcess(data.name).then(result => {
+        ws.send(JSON.stringify({ type: 'pm2_start_response', name: data.name, ...result }));
+      });
+    } else if (data.type === 'pm2_stop') {
+      pm2Manager.stopProcess(data.name).then(result => {
+        ws.send(JSON.stringify({ type: 'pm2_stop_response', name: data.name, ...result }));
+      });
+    } else if (data.type === 'pm2_restart') {
+      pm2Manager.restartProcess(data.name).then(result => {
+        ws.send(JSON.stringify({ type: 'pm2_restart_response', name: data.name, ...result }));
+      });
+    } else if (data.type === 'pm2_delete') {
+      pm2Manager.deleteProcess(data.name).then(result => {
+        ws.send(JSON.stringify({ type: 'pm2_delete_response', name: data.name, ...result }));
+      });
+    } else if (data.type === 'pm2_logs') {
+      pm2Manager.getLogs(data.name, { lines: data.lines || 100 }).then(result => {
+        ws.send(JSON.stringify({ type: 'pm2_logs_response', name: data.name, ...result }));
+      });
+    } else if (data.type === 'pm2_flush_logs') {
+      pm2Manager.flushLogs(data.name).then(result => {
+        ws.send(JSON.stringify({ type: 'pm2_flush_logs_response', name: data.name, ...result }));
+      });
+    } else if (data.type === 'pm2_ping') {
+      pm2Manager.ping().then(result => {
+        ws.send(JSON.stringify({ type: 'pm2_ping_response', ...result }));
+      });
     }
-  }
 
   } catch (err) { console.error('[WS-LEGACY] Handler error (contained):', err.message); }
 });
@@ -4327,10 +4389,19 @@ if (watch) {
 
 process.on('SIGTERM', () => {
   console.log('[SIGNAL] SIGTERM received - graceful shutdown');
-  stopACPTools().then(() => {
-    wss.close(() => server.close(() => process.exit(0)));
+  try { pm2Manager.disconnect(); } catch (_) {}
+  Promise.resolve().then(() => {
+    stopACPTools().then(() => {
+      wss.close(() => server.close(() => process.exit(0)));
+    }).catch(() => {
+      wss.close(() => server.close(() => process.exit(0)));
+    });
   }).catch(() => {
-    wss.close(() => server.close(() => process.exit(0)));
+    stopACPTools().then(() => {
+      wss.close(() => server.close(() => process.exit(0)));
+    }).catch(() => {
+      wss.close(() => server.close(() => process.exit(0)));
+    });
   });
 });
 
@@ -4602,15 +4673,44 @@ function onServerReady() {
     }
   });
 
-  getSpeech().then(s => s.preloadTTS()).catch(e => debugLog('[TTS] Preload failed: ' + e.message));
+   getSpeech().then(s => s.preloadTTS()).catch(e => debugLog('[TTS] Preload failed: ' + e.message));
 
-  performAutoImport();
+   performAutoImport();
 
-  setInterval(performAutoImport, 30000);
+   setInterval(performAutoImport, 30000);
 
-  setInterval(performAgentHealthCheck, 30000);
+   setInterval(performAgentHealthCheck, 30000);
 
-}
+    // Initialize PM2 monitoring - only when PM2 daemon is available
+    const broadcastPM2 = (update) => {
+      const msg = JSON.stringify(update);
+      for (const client of pm2Subscribers) {
+        if (client.readyState === 1) { try { client.send(msg); } catch (_) {} }
+      }
+    };
+
+    const startPM2Monitoring = async () => {
+      try {
+        await pm2Manager.connect();
+        await pm2Manager.startMonitoring(broadcastPM2);
+        console.log('[PM2] Monitoring started');
+      } catch (err) {
+        console.log('[PM2] Not available:', err.message);
+        broadcastPM2({ type: 'pm2_unavailable', reason: err.message, timestamp: Date.now() });
+      }
+    };
+
+    setTimeout(startPM2Monitoring, 2000);
+
+    setInterval(async () => {
+      if (!pm2Manager.connected && !pm2Manager.monitoring) {
+        try {
+          const healed = await pm2Manager.heal();
+          if (healed.success) await pm2Manager.startMonitoring(broadcastPM2);
+        } catch (_) {}
+      }
+    }, 30000);
+  }
 
 const importMtimeCache = new Map();
 

package/static/index.html

@@ -1202,6 +1202,175 @@
     .sidebar-list { contain: strict; content-visibility: auto; }
     .message { contain: layout style; content-visibility: auto; contain-intrinsic-size: auto 80px; }
 
+    /* PM2 Monitor Panel */
+    .pm2-monitor-panel {
+      border-top: 1px solid var(--color-border);
+      background: var(--color-bg-secondary);
+      display: flex;
+      flex-direction: column;
+      max-height: 35vh;
+    }
+    .pm2-monitor-header {
+      padding: 0.5rem 0.75rem;
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--color-text-secondary);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: var(--color-bg-primary);
+      border-bottom: 1px solid var(--color-border);
+      flex-shrink: 0;
+    }
+    .pm2-monitor-actions { display: flex; gap: 0.25rem; }
+    .pm2-action-btn {
+      background: none;
+      border: none;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      padding: 0.125rem 0.375rem;
+      font-size: 0.875rem;
+      line-height: 1;
+      border-radius: 0.25rem;
+    }
+    .pm2-action-btn:hover { background: var(--color-bg-secondary); color: var(--color-text-primary); }
+    .pm2-process-list { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0.25rem 0; }
+    .pm2-process-item {
+      padding: 0.375rem 0.75rem;
+      margin: 0.125rem 0.5rem;
+      border-radius: 0.375rem;
+      background: var(--color-bg-primary);
+      border-left: 3px solid var(--color-border);
+      font-size: 0.75rem;
+      transition: background-color 0.15s;
+    }
+    .pm2-process-item:hover { background: var(--color-bg-secondary); }
+    .pm2-process-item.online { border-left-color: var(--color-success); }
+    .pm2-process-item.launching { border-left-color: var(--color-primary); }
+    .pm2-process-item.stopping { border-left-color: var(--color-warning); }
+    .pm2-process-item.stopped { border-left-color: var(--color-text-muted, #888); opacity: 0.7; }
+    .pm2-process-item.errored { border-left-color: var(--color-error); }
+    .pm2-process-item.waiting\ restart { border-left-color: var(--color-warning); }
+    .pm2-status-dot {
+      display: inline-block;
+      width: 6px; height: 6px;
+      border-radius: 50%;
+      background: var(--color-text-secondary);
+      vertical-align: middle;
+      margin-left: 4px;
+    }
+    .pm2-status-online .pm2-status-dot,
+    .pm2-process-item.online .pm2-status-dot { background: var(--color-success); }
+    .pm2-status-launching .pm2-status-dot,
+    .pm2-process-item.launching .pm2-status-dot { background: var(--color-primary); }
+    .pm2-status-stopping .pm2-status-dot,
+    .pm2-status-errored .pm2-status-dot,
+    .pm2-process-item.errored .pm2-status-dot { background: var(--color-error); }
+    .pm2-process-name {
+      font-weight: 600;
+      margin-bottom: 0.125rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .pm2-process-meta {
+      display: flex;
+      gap: 0.5rem;
+      font-size: 0.7rem;
+      color: var(--color-text-secondary);
+      flex-wrap: wrap;
+    }
+    .pm2-process-meta span {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.125rem;
+    }
+    .pm2-process-actions {
+      margin-top: 0.25rem;
+      display: flex;
+      gap: 0.25rem;
+    }
+    .pm2-btn {
+      padding: 0.125rem 0.375rem;
+      font-size: 0.7rem;
+      border-radius: 0.25rem;
+      border: 1px solid var(--color-border);
+      background: var(--color-bg-primary);
+      color: var(--color-text-primary);
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+    .pm2-btn:hover {
+      background: var(--color-primary);
+      color: white;
+      border-color: var(--color-primary);
+    }
+    .pm2-btn.danger:hover {
+      background: var(--color-error);
+      border-color: var(--color-error);
+    }
+    .pm2-loading, .pm2-empty, .pm2-error {
+      padding: 0.75rem;
+      text-align: center;
+      color: var(--color-text-secondary);
+      font-size: 0.8rem;
+    }
+    @keyframes slideIn {
+      from { transform: translateX(100%); opacity: 0; }
+      to { transform: translateX(0); opacity: 1; }
+    }
+    @keyframes fadeOut {
+      from { opacity: 1; }
+      to { opacity: 0; }
+    }
+    .pm2-logs-modal {
+      position: fixed;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: rgba(0,0,0,0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+      padding: 1rem;
+    }
+    .pm2-logs-content {
+      background: var(--color-bg-primary);
+      border-radius: 0.5rem;
+      width: 100%;
+      max-width: 800px;
+      max-height: 80vh;
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+    }
+    .pm2-logs-header {
+      padding: 0.75rem 1rem;
+      border-bottom: 1px solid var(--color-border);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-weight: 600;
+    }
+    .pm2-logs-body {
+      flex: 1;
+      overflow-y: auto;
+      padding: 0.75rem 1rem;
+      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
+      font-size: 0.75rem;
+      white-space: pre-wrap;
+      background: var(--color-bg-code);
+      color: #e6edf3;
+    }
+    .pm2-logs-footer {
+      padding: 0.5rem 1rem;
+      border-top: 1px solid var(--color-border);
+      display: flex;
+      justify-content: flex-end;
+      gap: 0.5rem;
+    }
+
     /* ===== RESPONSIVE: TABLET ===== */
     @media (min-width: 769px) and (max-width: 1024px) {
       :root { --sidebar-width: 260px; }
@@ -2883,10 +3052,20 @@
         <button class="clone-go-btn" id="cloneGoBtn" title="Clone">Go</button>
         <button class="clone-cancel-btn" id="cloneCancelBtn" title="Cancel">&times;</button>
       </div>
-      <ul class="sidebar-list" data-conversation-list>
-        <li class="sidebar-empty" data-conversation-empty>No conversations yet</li>
-      </ul>
-    </aside>
+       <ul class="sidebar-list" data-conversation-list>
+         <li class="sidebar-empty" data-conversation-empty>No conversations yet</li>
+       </ul>
+       <!-- PM2 Monitor Panel: hidden until active processes detected -->
+       <div class="pm2-monitor-panel" id="pm2MonitorPanel" style="display:none">
+         <div class="pm2-monitor-header">
+           <span>PM2 Processes</span>
+           <div class="pm2-monitor-actions">
+             <button class="pm2-action-btn" id="pm2RefreshBtn" title="Refresh">↻</button>
+           </div>
+         </div>
+         <div class="pm2-process-list" id="pm2ProcessList"></div>
+       </div>
+     </aside>
 
     <!-- ===== MAIN PANEL ===== -->
     <main id="app" class="main-panel">
@@ -3075,15 +3254,16 @@
   <script defer src="/gm/js/syntax-highlighter.js"></script>
   <script defer src="/gm/js/dialogs.js"></script>
   <script defer src="/gm/js/ui-components.js"></script>
-  <script defer src="/gm/js/conversations.js"></script>
-  <script defer src="/gm/js/terminal.js"></script>
-  <script defer src="/gm/js/script-runner.js"></script>
-  <script defer src="/gm/js/tools-manager.js"></script>
-  <script defer src="/gm/js/stt-handler.js"></script>
-  <script defer src="/gm/js/voice.js"></script>
-  <script defer src="/gm/js/client.js"></script>
-  <script defer src="/gm/js/features.js"></script>
-  <script defer src="/gm/js/agent-auth.js"></script>
+   <script defer src="/gm/js/conversations.js"></script>
+   <script defer src="/gm/js/terminal.js"></script>
+   <script defer src="/gm/js/script-runner.js"></script>
+   <script defer src="/gm/js/tools-manager.js"></script>
+   <script defer src="/gm/js/stt-handler.js"></script>
+   <script defer src="/gm/js/voice.js"></script>
+   <script defer src="/gm/js/pm2-monitor.js"></script>
+   <script defer src="/gm/js/client.js"></script>
+   <script defer src="/gm/js/features.js"></script>
+   <script defer src="/gm/js/agent-auth.js"></script>
 
   <script>
     const savedTheme = localStorage.getItem('theme') || 'light';

package/static/js/client.js

@@ -2362,6 +2362,7 @@ class AgentGUIClient {
 
       this.cacheCurrentConversation();
       this.stopChunkPolling();
+      this.removeScrollUpDetection();
       if (this.renderer.resetScrollState) this.renderer.resetScrollState();
       this._userScrolledUp = false;
       this._removeNewContentPill();
@@ -2614,6 +2615,7 @@ class AgentGUIClient {
         }
 
         this.restoreScrollPosition(conversationId);
+        this.setupScrollUpDetection(conversationId);
       }
     } catch (error) {
       if (error.name === 'AbortError') return;
@@ -2622,6 +2624,117 @@ class AgentGUIClient {
     }
   }
 
+  removeScrollUpDetection() {
+    const scrollContainer = document.getElementById(this.config.scrollContainerId);
+    if (scrollContainer && this._scrollUpHandler) {
+      scrollContainer.removeEventListener('scroll', this._scrollUpHandler);
+      this._scrollUpHandler = null;
+    }
+  }
+
+  setupScrollUpDetection(conversationId) {
+    const scrollContainer = document.getElementById(this.config.scrollContainerId);
+    if (!scrollContainer) return;
+
+    if (!this._scrollDetectionState) this._scrollDetectionState = {};
+
+    const detectionState = {
+      isLoading: false,
+      oldestTimestamp: Date.now(),
+      oldestMessageId: null,
+      conversation: conversationId
+    };
+
+    const handleScroll = async () => {
+      const scrollTop = scrollContainer.scrollTop;
+      const scrollHeight = scrollContainer.scrollHeight;
+      const clientHeight = scrollContainer.clientHeight;
+      const THRESHOLD = 300;
+
+      if (scrollTop < THRESHOLD && !detectionState.isLoading && scrollHeight > clientHeight) {
+        detectionState.isLoading = true;
+
+        try {
+          const messagesEl = document.querySelector('.conversation-messages');
+          if (!messagesEl) {
+            detectionState.isLoading = false;
+            return;
+          }
+
+          const firstMessageEl = messagesEl.querySelector('.message[data-msg-id]');
+          if (!firstMessageEl) {
+            const firstChunkEl = messagesEl.querySelector('[data-chunk-created]');
+            if (firstChunkEl) {
+              detectionState.oldestTimestamp = parseInt(firstChunkEl.getAttribute('data-chunk-created')) || 0;
+            }
+          } else {
+            detectionState.oldestMessageId = firstMessageEl.getAttribute('data-msg-id');
+          }
+
+          let result;
+          if (detectionState.oldestMessageId) {
+            result = await window.wsClient.rpc('msg.ls.earlier', {
+              id: conversationId,
+              before: detectionState.oldestMessageId,
+              limit: 50
+            });
+          } else if (detectionState.oldestTimestamp > 0) {
+            result = await window.wsClient.rpc('conv.chunks.earlier', {
+              id: conversationId,
+              before: detectionState.oldestTimestamp,
+              limit: 500
+            });
+          }
+
+          if (result && ((result.messages && result.messages.length > 0) || (result.chunks && result.chunks.length > 0))) {
+            const scrollHeightBefore = scrollContainer.scrollHeight;
+            const scrollTopBefore = scrollContainer.scrollTop;
+            const newContent = document.createDocumentFragment();
+
+            if (result.messages && result.messages.length > 0) {
+              result.messages.forEach(msg => {
+                const div = document.createElement('div');
+                div.className = `message message-${msg.role}`;
+                div.setAttribute('data-msg-id', msg.id);
+                div.innerHTML = `<div class="message-role">${msg.role.charAt(0).toUpperCase() + msg.role.slice(1)}</div>${this.renderMessageContent(msg.content)}<div class="message-timestamp">${new Date(msg.created_at).toLocaleString()}</div>`;
+                newContent.appendChild(div);
+              });
+            }
+
+            if (result.chunks && result.chunks.length > 0) {
+              result.chunks.forEach(chunk => {
+                const blockEl = this.renderer.renderBlock(chunk.data, chunk.type, false);
+                if (blockEl) {
+                  const wrapper = document.createElement('div');
+                  wrapper.setAttribute('data-chunk-created', chunk.created_at);
+                  wrapper.appendChild(blockEl);
+                  newContent.appendChild(wrapper);
+                }
+              });
+            }
+
+            if (messagesEl.firstChild) {
+              messagesEl.insertBefore(newContent, messagesEl.firstChild);
+            } else {
+              messagesEl.appendChild(newContent);
+            }
+
+            const scrollHeightAfter = scrollContainer.scrollHeight;
+            scrollContainer.scrollTop = scrollTopBefore + (scrollHeightAfter - scrollHeightBefore);
+          }
+        } catch (error) {
+          console.error('Failed to load earlier messages:', error);
+        } finally {
+          detectionState.isLoading = false;
+        }
+      }
+    };
+
+    scrollContainer.removeEventListener('scroll', this._scrollUpHandler);
+    this._scrollUpHandler = handleScroll;
+    scrollContainer.addEventListener('scroll', this._scrollUpHandler, { passive: true });
+  }
+
   renderMessagesFragment(messages) {
     const frag = document.createDocumentFragment();
     if (messages.length === 0) {

package/static/js/pm2-monitor.js

@@ -0,0 +1,151 @@
+(function() {
+  const ACTIVE_STATES = new Set(['online', 'launching', 'stopping', 'waiting restart']);
+
+  window.pm2Monitor = { processes: [], logsModalOpen: null, initialized: false };
+
+  const panel = document.getElementById('pm2MonitorPanel');
+  const list = document.getElementById('pm2ProcessList');
+  const refreshBtn = document.getElementById('pm2RefreshBtn');
+
+  function send(msg) {
+    if (window.wsManager && window.wsManager.isConnected) window.wsManager.sendMessage(msg);
+  }
+
+  function setPanelVisible(visible) {
+    if (!panel) return;
+    panel.style.display = visible ? 'flex' : 'none';
+  }
+
+  function renderProcessList(processes) {
+    if (!list) return;
+    const active = processes.filter(p => ACTIVE_STATES.has(p.status));
+    const inactive = processes.filter(p => !ACTIVE_STATES.has(p.status));
+    const ordered = [...active, ...inactive];
+    list.innerHTML = ordered.map(proc => {
+      const isActive = ACTIVE_STATES.has(proc.status);
+      const uptimeSec = proc.uptime ? Math.floor((Date.now() - proc.uptime) / 1000) : null;
+      return `<div class="pm2-process-item ${proc.status}" data-pm2-name="${escAttr(proc.name)}">
+        <div class="pm2-process-name">${escHtml(proc.name)} <span class="pm2-status-dot pm2-status-${proc.status}"></span></div>
+        <div class="pm2-process-meta">
+          <span>${proc.status}</span>
+          <span>${(proc.cpu || 0).toFixed(1)}% CPU</span>
+          <span>${fmtBytes(proc.memory)}</span>
+          ${uptimeSec !== null ? `<span>${fmtUptime(uptimeSec)}</span>` : ''}
+          <span>#${proc.pid || '-'}</span>
+          ${proc.restarts > 0 ? `<span>${proc.restarts}x restarts</span>` : ''}
+        </div>
+        <div class="pm2-process-actions">
+          ${!isActive ? `<button class="pm2-btn" onclick="window.pm2Monitor.startProcess('${escAttr(proc.name)}')">Start</button>` : ''}
+          ${proc.status === 'online' ? `<button class="pm2-btn danger" onclick="window.pm2Monitor.stopProcess('${escAttr(proc.name)}')">Stop</button>` : ''}
+          <button class="pm2-btn" onclick="window.pm2Monitor.restartProcess('${escAttr(proc.name)}')">Restart</button>
+          <button class="pm2-btn" onclick="window.pm2Monitor.showLogs('${escAttr(proc.name)}')">Logs</button>
+          <button class="pm2-btn danger" onclick="window.pm2Monitor.deleteProcess('${escAttr(proc.name)}')">Delete</button>
+        </div>
+      </div>`;
+    }).join('');
+  }
+
+  function handleMessage(msg) {
+    if (msg.type === 'pm2_monit_update') {
+      const procs = msg.processes || [];
+      window.pm2Monitor.processes = procs;
+      const hasActive = msg.hasActive || procs.some(p => ACTIVE_STATES.has(p.status));
+      setPanelVisible(hasActive);
+      if (hasActive) renderProcessList(procs);
+    } else if (msg.type === 'pm2_list_response') {
+      const procs = msg.processes || [];
+      window.pm2Monitor.processes = procs;
+      const hasActive = procs.some(p => ACTIVE_STATES.has(p.status));
+      setPanelVisible(hasActive);
+      if (hasActive) renderProcessList(procs);
+    } else if (msg.type === 'pm2_unavailable') {
+      setPanelVisible(false);
+    } else if (msg.type === 'pm2_start_response' || msg.type === 'pm2_stop_response' ||
+               msg.type === 'pm2_restart_response' || msg.type === 'pm2_delete_response') {
+      const action = msg.type.replace('pm2_', '').replace('_response', '');
+      if (msg.success) {
+        toast(`PM2 ${action} ${msg.name} succeeded`, 'success');
+        setTimeout(() => send({ type: 'pm2_list' }), 500);
+      } else {
+        toast(`PM2 ${action} ${msg.name} failed: ${msg.error}`, 'error');
+      }
+    } else if (msg.type === 'pm2_logs_response') {
+      if (msg.success) showLogsModal(msg.name, msg.logs);
+      else toast(`Logs error: ${msg.error}`, 'error');
+    } else if (msg.type === 'pm2_flush_logs_response') {
+      toast(msg.success ? 'Logs flushed' : `Flush failed: ${msg.error}`, msg.success ? 'success' : 'error');
+    }
+  }
+
+  function init() {
+    if (window.pm2Monitor.initialized) return;
+    window.pm2Monitor.initialized = true;
+    setPanelVisible(false);
+    if (refreshBtn) refreshBtn.addEventListener('click', () => send({ type: 'pm2_list' }));
+    document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && window.pm2Monitor.logsModalOpen) window.pm2Monitor.closeLogsModal(); });
+    if (window.wsManager) {
+      window.wsManager.on('message', handleMessage);
+      window.wsManager.on('connected', () => {
+        send({ type: 'pm2_start_monitoring' });
+        send({ type: 'pm2_list' });
+      });
+      if (window.wsManager.isConnected) {
+        send({ type: 'pm2_start_monitoring' });
+        send({ type: 'pm2_list' });
+      }
+    }
+  }
+
+  function showLogsModal(name, logs) {
+    if (window.pm2Monitor.logsModalOpen) window.pm2Monitor.closeLogsModal();
+    const modal = document.createElement('div');
+    modal.className = 'pm2-logs-modal';
+    modal.innerHTML = `<div class="pm2-logs-content">
+      <div class="pm2-logs-header"><span>Logs: ${escHtml(name)}</span><button class="pm2-btn" onclick="window.pm2Monitor.closeLogsModal()">Close</button></div>
+      <div class="pm2-logs-body">${escHtml(logs || 'No logs available')}</div>
+      <div class="pm2-logs-footer">
+        <button class="pm2-btn" onclick="window.pm2Monitor.flushLogs('${escAttr(name)}')">Flush</button>
+        <button class="pm2-btn" onclick="window.pm2Monitor.closeLogsModal()">Close</button>
+      </div></div>`;
+    document.body.appendChild(modal);
+    window.pm2Monitor.logsModalOpen = name;
+    modal.addEventListener('click', (e) => { if (e.target === modal) window.pm2Monitor.closeLogsModal(); });
+  }
+
+  function toast(msg, type) {
+    const t = document.createElement('div');
+    t.className = 'pm2-toast';
+    t.textContent = msg;
+    const bg = type === 'error' ? 'var(--color-error)' : type === 'success' ? 'var(--color-success)' : 'var(--color-primary)';
+    t.style.cssText = `position:fixed;top:1rem;right:1rem;padding:0.5rem 1rem;border-radius:0.375rem;font-size:0.8rem;color:white;z-index:10000;background:${bg}`;
+    document.body.appendChild(t);
+    setTimeout(() => { t.style.opacity = '0'; t.style.transition = 'opacity 0.3s'; setTimeout(() => t.remove(), 300); }, 3000);
+  }
+
+  function escHtml(s) { if (!s) return ''; const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
+  function escAttr(s) { return (s || '').replace(/"/g, '&quot;').replace(/'/g, '&#039;'); }
+  function fmtBytes(b) {
+    if (!b || typeof b !== 'number') return '0 B';
+    const u = ['B','KB','MB','GB'], i = Math.min(Math.floor(Math.log(b) / Math.log(1024)), 3);
+    return (b / Math.pow(1024, i)).toFixed(1) + ' ' + u[i];
+  }
+  function fmtUptime(s) {
+    if (!s || s < 0) return '0s';
+    const d = Math.floor(s / 86400), h = Math.floor((s % 86400) / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60;
+    if (d > 0) return `${d}d ${h}h`;
+    if (h > 0) return `${h}h ${m}m`;
+    if (m > 0) return `${m}m ${sec}s`;
+    return `${sec}s`;
+  }
+
+  window.pm2Monitor.closeLogsModal = () => { const m = document.querySelector('.pm2-logs-modal'); if (m) m.remove(); window.pm2Monitor.logsModalOpen = null; };
+  window.pm2Monitor.startProcess = (name) => send({ type: 'pm2_start', name });
+  window.pm2Monitor.stopProcess = (name) => send({ type: 'pm2_stop', name });
+  window.pm2Monitor.restartProcess = (name) => send({ type: 'pm2_restart', name });
+  window.pm2Monitor.deleteProcess = (name) => { if (confirm(`Delete PM2 process "${name}"?`)) send({ type: 'pm2_delete', name }); };
+  window.pm2Monitor.showLogs = (name) => send({ type: 'pm2_logs', name, lines: 200 });
+  window.pm2Monitor.flushLogs = (name) => send({ type: 'pm2_flush_logs', name });
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => setTimeout(init, 150));
+  else setTimeout(init, 150);
+})();