@clawchatsai/connector 0.0.29 → 0.0.31

package/dist/index.js

@@ -488,15 +488,33 @@ async function handleRpcMessage(dc, msg, ctx) {
     };
     try {
         const response = await dispatchRpc(rpcReq, app.handleRequest);
+        // For binary content types (images, audio, etc.), wrap as _binary envelope
+        // so the browser transport can reconstruct a proper Blob with correct MIME type
+        const contentType = response.headers['content-type'] || '';
+        const isBinaryResponse = /^(image|audio|video|application\/octet-stream|application\/pdf)/.test(contentType);
+        let responseBody;
+        if (isBinaryResponse && response.rawBody) {
+            // Encode raw bytes as base64 in a _binary envelope.
+            // The transport layer on the browser side already handles this format,
+            // reconstructing a proper Blob with the correct MIME type.
+            responseBody = {
+                _binary: true,
+                contentType,
+                data: response.rawBody.toString('base64'),
+            };
+        }
+        else {
+            responseBody = response.body;
+        }
         const responseMsg = {
             type: 'rpc-res',
             id: response.id,
             status: response.status,
-            body: response.body,
+            body: responseBody,
         };
         const responseStr = JSON.stringify(responseMsg);
         if (responseStr.length > MAX_DC_MESSAGE_SIZE) {
-            sendChunked(dc, response.id, response.status, response.body);
+            sendChunked(dc, response.id, response.status, JSON.stringify(responseBody));
         }
         else {
             dc.send(responseStr);

package/dist/shim.d.ts

@@ -20,6 +20,7 @@ export interface RpcResponse {
     status: number;
     headers: Record<string, string>;
     body: string;
+    rawBody?: Buffer;
 }
 type HandleRequestFn = (req: FakeReq, res: FakeRes) => void | Promise<void>;
 /**

package/dist/shim.js

@@ -150,5 +150,6 @@ export async function dispatchRpc(rpc, handleRequest) {
         status: result.status,
         headers: result.headers,
         body: tryJsonParse(result.body),
+        rawBody: result.body, // Preserve raw buffer for binary encoding
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clawchatsai/connector",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "type": "module",
   "description": "ClawChats OpenClaw plugin — P2P tunnel + local API bridge",
   "main": "dist/index.js",

package/server.js

@@ -368,13 +368,6 @@ function migrate(db) {
   `);
   db.exec('CREATE INDEX IF NOT EXISTS idx_unread_thread ON unread_messages(thread_id)');
 
-  // Migration: add type column for segment model (text/tool/thinking)
-  try {
-    db.exec("ALTER TABLE messages ADD COLUMN type TEXT DEFAULT 'text'");
-  } catch (e) {
-    // Column already exists — ignore
-  }
-
   // FTS5 table — CREATE VIRTUAL TABLE doesn't support IF NOT EXISTS in all versions,
   // so check if it exists first
   const hasFts = db.prepare(
@@ -2044,16 +2037,17 @@ async function handleRequest(req, res) {
     const isIcon = urlPath.startsWith('/icons/');
     const isLib = urlPath.startsWith('/lib/');
     const isFrontend = urlPath.startsWith('/frontend/');
+    const isEmoji = urlPath.startsWith('/emoji/');
     const isConfig = urlPath === '/config.js';
     const staticPath = fileName ? path.join(__dirname, fileName)
-      : (isIcon || isLib || isFrontend || isConfig) ? path.join(__dirname, urlPath.slice(1))
+      : (isIcon || isLib || isFrontend || isEmoji || isConfig) ? path.join(__dirname, urlPath.slice(1))
       : null;
     if (staticPath && fs.existsSync(staticPath) && fs.statSync(staticPath).isFile()) {
       const ext = path.extname(staticPath).toLowerCase();
       const mimeMap = {
         '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css',
         '.json': 'application/json', '.ico': 'image/x-icon',
-        '.png': 'image/png', '.svg': 'image/svg+xml',
+        '.png': 'image/png', '.svg': 'image/svg+xml', '.gif': 'image/gif', '.webp': 'image/webp',
       };
       const ct = mimeMap[ext] || 'application/octet-stream';
       const stat = fs.statSync(staticPath);
@@ -2072,6 +2066,133 @@ async function handleRequest(req, res) {
     return handleServeUpload(req, res, p);
   }
 
+  // Custom emoji listing (no auth — public like static assets)
+  if (method === 'GET' && urlPath === '/api/emoji') {
+    const emojiDir = path.join(__dirname, 'emoji');
+    if (!fs.existsSync(emojiDir)) {
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      return res.end('[]');
+    }
+    try {
+      const packs = fs.readdirSync(emojiDir).filter(d =>
+        fs.statSync(path.join(emojiDir, d)).isDirectory()
+      );
+      const result = [];
+      for (const pack of packs) {
+        const packDir = path.join(emojiDir, pack);
+        const files = fs.readdirSync(packDir).filter(f =>
+          /\.(png|gif|webp|jpg|jpeg)$/i.test(f)
+        );
+        for (const file of files) {
+          const name = file.replace(/\.[^.]+$/, '');
+          result.push({ name, pack, path: `/emoji/${pack}/${file}` });
+        }
+      }
+      res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'public, max-age=300' });
+      return res.end(JSON.stringify(result));
+    } catch (e) {
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      return res.end(JSON.stringify({ error: e.message }));
+    }
+  }
+
+  // Search slackmojis.com (scrapes HTML search since JSON API has no search)
+  if (method === 'GET' && urlPath === '/api/emoji/search') {
+    const q = query.q || '';
+    if (!q) {
+      res.writeHead(400, { 'Content-Type': 'application/json' });
+      return res.end(JSON.stringify({ error: 'Missing ?q= parameter' }));
+    }
+    try {
+      const https = await import('https');
+      const fetchUrl = `https://slackmojis.com/emojis/search?query=${encodeURIComponent(q)}`;
+      const html = await new Promise((resolve, reject) => {
+        https.default.get(fetchUrl, (resp) => {
+          let body = '';
+          resp.on('data', chunk => body += chunk);
+          resp.on('end', () => resolve(body));
+        }).on('error', reject);
+      });
+      // Parse emoji entries from HTML:
+      // <li class='emoji name' title='name'>
+      // <a ... data-emoji-id="123" data-emoji-id-name="123-name" href="/emojis/123-name/download">
+      // <img ... src="https://emojis.slackmojis.com/emojis/images/.../name.png?..." />
+      const results = [];
+      const regex = /data-emoji-id-name="([^"]+)"[^>]*href="([^"]+)"[\s\S]*?<img[^>]*src="([^"]+)"/g;
+      let match;
+      while ((match = regex.exec(html)) !== null && results.length < 50) {
+        const idName = match[1]; // e.g. "57350-sextant"
+        const downloadPath = match[2];
+        const imageUrl = match[3];
+        const name = idName.replace(/^\d+-/, '');
+        results.push({
+          name,
+          image_url: imageUrl,
+          download_url: `https://slackmojis.com${downloadPath}`,
+        });
+      }
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      return res.end(JSON.stringify(results));
+    } catch (e) {
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      return res.end(JSON.stringify({ error: e.message }));
+    }
+  }
+
+  // Download emoji from URL and save to emoji/ directory
+  if (method === 'POST' && urlPath === '/api/emoji/add') {
+    if (!checkAuth(req, res)) return;
+    try {
+      const { url, name, pack } = await parseBody(req);
+      if (!url || !name) {
+        res.writeHead(400, { 'Content-Type': 'application/json' });
+        return res.end(JSON.stringify({ error: 'Missing url or name' }));
+      }
+      const targetPack = pack || 'custom';
+      const emojiDir = path.join(__dirname, 'emoji', targetPack);
+      if (!fs.existsSync(emojiDir)) fs.mkdirSync(emojiDir, { recursive: true });
+
+      // Follow redirects and download
+      const https = await import('https');
+      const http = await import('http');
+      const download = (downloadUrl, redirects = 0) => new Promise((resolve, reject) => {
+        if (redirects > 5) return reject(new Error('Too many redirects'));
+        const mod = downloadUrl.startsWith('https') ? https.default : http.default;
+        mod.get(downloadUrl, (resp) => {
+          if (resp.statusCode >= 300 && resp.statusCode < 400 && resp.headers.location) {
+            return resolve(download(resp.headers.location, redirects + 1));
+          }
+          if (resp.statusCode !== 200) return reject(new Error(`HTTP ${resp.statusCode}`));
+          const chunks = [];
+          resp.on('data', chunk => chunks.push(chunk));
+          resp.on('end', () => resolve({ buffer: Buffer.concat(chunks), contentType: resp.headers['content-type'] || '' }));
+        }).on('error', reject);
+      });
+
+      const { buffer, contentType } = await download(url);
+      // Determine extension from content-type or URL
+      let ext = 'png';
+      if (contentType.includes('gif')) ext = 'gif';
+      else if (contentType.includes('webp')) ext = 'webp';
+      else if (contentType.includes('jpeg') || contentType.includes('jpg')) ext = 'jpg';
+      else {
+        const urlExt = url.split('?')[0].split('.').pop().toLowerCase();
+        if (['png', 'gif', 'webp', 'jpg', 'jpeg'].includes(urlExt)) ext = urlExt;
+      }
+
+      const safeName = name.replace(/[^a-zA-Z0-9_-]/g, '_');
+      const filePath = path.join(emojiDir, `${safeName}.${ext}`);
+      fs.writeFileSync(filePath, buffer);
+
+      const result = { name: safeName, pack: targetPack, path: `/emoji/${targetPack}/${safeName}.${ext}` };
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      return res.end(JSON.stringify(result));
+    } catch (e) {
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      return res.end(JSON.stringify({ error: e.message }));
+    }
+  }
+
   // Auth check for all other routes
   if (!checkAuth(req, res)) return;
 
@@ -2233,14 +2354,24 @@ class GatewayClient {
     this.maxReconnectDelay = 30000;
     this.browserClients = new Map(); // Map<WebSocket, { activeWorkspace, activeThreadId }>
     this.streamState = new Map(); // Map<sessionKey, { state, buffer, threadId }>
-    this.runState = new Map(); // Map<runId, { sessionKey, seqCounter, currentTextSegmentId, startTime }>
+    this.activityLogs = new Map(); // Map<runId, { sessionKey, steps, startTime }>
 
-    // Clean up stale run states every 5 minutes (runs that never completed)
+    // Clean up stale activity logs every 5 minutes (runs that never completed)
     setInterval(() => {
-      const cutoff = Date.now() - 10 * 60 * 1000; // 10 minutes
-      for (const [runId, run] of this.runState) {
-        if (run.startTime < cutoff) {
-          this.runState.delete(runId);
+      const cutoff = Date.now() - 10 * 60 * 1000;
+      for (const [runId, log] of this.activityLogs) {
+        if (log.startTime < cutoff) {
+          if (log._messageId) {
+            const db = getDb(log._parsed?.workspace);
+            if (db) {
+              db.prepare(`
+                UPDATE messages SET content = '[Response interrupted]',
+                metadata = json_remove(metadata, '$.pending')
+                WHERE id = ? AND content = ''
+              `).run(log._messageId);
+            }
+          }
+          this.activityLogs.delete(runId);
         }
       }
     }, 5 * 60 * 1000);
@@ -2354,10 +2485,9 @@ class GatewayClient {
       this.streamState.delete(sessionKey);
     }
 
-    // Save assistant messages on final (use segment seq position if available)
+    // Save assistant messages on final
     if (state === 'final') {
-      const run = this.findRunBySessionKey(sessionKey);
-      this.saveAssistantMessage(sessionKey, message, seq, run?.finalSeq);
+      this.saveAssistantMessage(sessionKey, message, seq);
     }
 
     // Save error markers
@@ -2366,11 +2496,10 @@ class GatewayClient {
     }
   }
 
-  saveAssistantMessage(sessionKey, message, seq, segmentSeq) {
+  saveAssistantMessage(sessionKey, message, seq) {
     const parsed = parseSessionKey(sessionKey);
-    if (!parsed) return; // Non-ClawChats session key, silently ignore
+    if (!parsed) return;
 
-    // Guard: verify workspace still exists
     const ws = getWorkspaces();
     if (!ws.workspaces[parsed.workspace]) {
       console.log(`Ignoring response for deleted workspace: ${parsed.workspace}`);
@@ -2379,52 +2508,66 @@ class GatewayClient {
 
     const db = getDb(parsed.workspace);
 
-    // Guard: verify thread still exists
     const thread = db.prepare('SELECT id FROM threads WHERE id = ?').get(parsed.threadId);
     if (!thread) {
       console.log(`Ignoring response for deleted thread: ${parsed.threadId}`);
       return;
     }
 
-    // Extract content
     const content = extractContent(message);
-
-    // Guard: skip empty content
     if (!content || !content.trim()) {
       console.log(`Skipping empty assistant response for thread ${parsed.threadId}`);
       return;
     }
 
-    // Deterministic message ID from seq (deduplicates tool-call loops)
     const now = Date.now();
-    const messageId = seq != null ? `gw-${parsed.threadId}-${seq}` : `gw-${parsed.threadId}-${now}`;
 
-    // Use segment seq for correct ordering after tool segments
-    const msgSeq = segmentSeq != null ? segmentSeq : (seq != null ? seq : null);
+    // Check for pending activity message
+    const pendingMsg = db.prepare(`
+      SELECT id, metadata FROM messages
+      WHERE thread_id = ? AND role = 'assistant'
+      AND json_extract(metadata, '$.pending') = 1
+      ORDER BY timestamp DESC LIMIT 1
+    `).get(parsed.threadId);
+
+    let messageId;
+
+    if (pendingMsg) {
+      // Merge final content into existing activity row
+      const metadata = pendingMsg.metadata ? JSON.parse(pendingMsg.metadata) : {};
+      delete metadata.pending;
+
+      // Clean up: remove last assistant narration (it's the final reply text)
+      if (metadata.activityLog) {
+        const lastAssistantIdx = metadata.activityLog.findLastIndex(s => s.type === 'assistant');
+        if (lastAssistantIdx >= 0) metadata.activityLog.splice(lastAssistantIdx, 1);
+        metadata.activitySummary = this.generateActivitySummary(metadata.activityLog);
+      }
 
-    // Upsert message: INSERT OR REPLACE (same seq → same messageId → update content)
-    try {
+      db.prepare('UPDATE messages SET content = ?, metadata = ?, timestamp = ? WHERE id = ?')
+        .run(content, JSON.stringify(metadata), now, pendingMsg.id);
+
+      messageId = pendingMsg.id;
+    } else {
+      // No pending activity — normal INSERT (simple responses, no tools)
+      messageId = seq != null ? `gw-${parsed.threadId}-${seq}` : `gw-${parsed.threadId}-${now}`;
       db.prepare(`
-        INSERT INTO messages (id, thread_id, role, type, content, status, seq, timestamp, created_at)
-        VALUES (?, ?, 'assistant', 'text', ?, 'sent', ?, ?, ?)
-        ON CONFLICT(id) DO UPDATE SET content = excluded.content, seq = excluded.seq, timestamp = excluded.timestamp
-      `).run(messageId, parsed.threadId, content, msgSeq, now, now);
+        INSERT INTO messages (id, thread_id, role, content, status, timestamp, created_at)
+        VALUES (?, ?, 'assistant', ?, 'sent', ?, ?)
+        ON CONFLICT(id) DO UPDATE SET content = excluded.content, timestamp = excluded.timestamp
+      `).run(messageId, parsed.threadId, content, now, now);
+    }
 
-      // Update thread updated_at
+    // Thread timestamp + unreads + broadcast (same for both paths)
+    try {
       db.prepare('UPDATE threads SET updated_at = ? WHERE id = ?').run(now, parsed.threadId);
-
-      // Always mark as unread server-side. The browser client is responsible
-      // for sending read receipts (active-thread) to clear unreads — same
-      // pattern as Slack/Discord. Server doesn't track viewport state.
       db.prepare('INSERT OR IGNORE INTO unread_messages (thread_id, message_id, created_at) VALUES (?, ?, ?)').run(parsed.threadId, messageId, now);
       syncThreadUnreadCount(db, parsed.threadId);
 
-      // Get thread title and unread info for notification
       const threadInfo = db.prepare('SELECT title FROM threads WHERE id = ?').get(parsed.threadId);
       const unreadCount = db.prepare('SELECT COUNT(*) as c FROM unread_messages WHERE thread_id = ?').get(parsed.threadId).c;
       const preview = content.length > 120 ? content.substring(0, 120) + '...' : content;
 
-      // Broadcast message-saved for active thread reload
       this.broadcastToBrowsers(JSON.stringify({
         type: 'clawchats',
         event: 'message-saved',
@@ -2437,7 +2580,6 @@ class GatewayClient {
         unreadCount
       }));
 
-      // Always broadcast unread-update — browser sends read receipts to clear
       const workspaceUnreadTotal = db.prepare('SELECT COALESCE(SUM(unread_count), 0) as total FROM threads').get().total;
       this.broadcastToBrowsers(JSON.stringify({
         type: 'clawchats',
@@ -2453,7 +2595,7 @@ class GatewayClient {
         timestamp: now
       }));
 
-      console.log(`Saved assistant message to ${parsed.workspace}/${parsed.threadId} (seq: ${seq})`);
+      console.log(`Saved assistant message to ${parsed.workspace}/${parsed.threadId} (${pendingMsg ? 'merged into pending' : 'seq: ' + seq})`);
     } catch (e) {
       console.error(`Failed to save assistant message:`, e.message);
     }
@@ -2490,242 +2632,183 @@ class GatewayClient {
     const { runId, stream, data, sessionKey } = payload;
     if (!runId) return;
 
-    // Initialize run state if needed
-    if (!this.runState.has(runId)) {
-      this.runState.set(runId, { sessionKey, seqCounter: 0, startTime: Date.now() });
+    // Initialize log if needed
+    if (!this.activityLogs.has(runId)) {
+      this.activityLogs.set(runId, { sessionKey, steps: [], startTime: Date.now() });
     }
-    const run = this.runState.get(runId);
-
-    const parsed = parseSessionKey(sessionKey);
-    if (!parsed) return;
-
-    // Verify workspace/thread still exist
-    const ws = getWorkspaces();
-    if (!ws.workspaces[parsed.workspace]) return;
-    const db = getDb(parsed.workspace);
-    const thread = db.prepare('SELECT id FROM threads WHERE id = ?').get(parsed.threadId);
-    if (!thread) return;
+    const log = this.activityLogs.get(runId);
 
     if (stream === 'assistant') {
+      // Capture intermediate text turns (narration between tool calls)
       const text = data?.text || '';
-      if (!text) return;
-
-      if (!run.currentTextSegmentId) {
-        // Start a new text segment — broadcast only, saved when sealed or discarded on lifecycle.end
-        run.seqCounter++;
-        run.currentTextSegmentId = `seg-${parsed.threadId}-${runId}-${run.seqCounter}`;
-        run.currentTextContent = text;
-        run.currentTextSeq = run.seqCounter;
-        run.currentTextTimestamp = Date.now();
-      } else {
-        // Accumulate text for this segment
-        run.currentTextContent = text;
-      }
-
-      // Broadcast segment update for live display (throttled ~150ms)
-      const now = Date.now();
-      if (!run.lastTextBroadcast || now - run.lastTextBroadcast >= 150) {
-        run.lastTextBroadcast = now;
-        this.broadcastSegmentUpdate(parsed, runId, {
-          id: run.currentTextSegmentId,
-          type: 'text',
-          seq: run.currentTextSeq,
-          content: run.currentTextContent
-        });
+      if (text) {
+        let currentSegment = log._currentAssistantSegment;
+        if (!currentSegment || currentSegment._sealed) {
+          currentSegment = {
+            type: 'assistant',
+            timestamp: Date.now(),
+            text: text,
+            _sealed: false
+          };
+          log._currentAssistantSegment = currentSegment;
+          log.steps.push(currentSegment);
+        } else {
+          currentSegment.text = text;
+        }
       }
+      // Don't broadcast on every assistant delta — too noisy
       return;
     }
 
     if (stream === 'thinking') {
       const thinkingText = data?.text || '';
-
-      if (!run.thinkingSegmentId) {
-        run.seqCounter++;
-        const segId = `seg-${parsed.threadId}-${runId}-${run.seqCounter}`;
-        run.thinkingSegmentId = segId;
-        run.thinkingSeq = run.seqCounter;
-        const now = Date.now();
-        try {
-          db.prepare(`
-            INSERT INTO messages (id, thread_id, role, type, content, status, seq, timestamp, created_at)
-            VALUES (?, ?, 'assistant', 'thinking', ?, 'sent', ?, ?, ?)
-          `).run(segId, parsed.threadId, thinkingText, run.seqCounter, now, now);
-        } catch (e) {
-          console.error('Failed to save thinking segment:', e.message);
-        }
+      let thinkingStep = log.steps.find(s => s.type === 'thinking');
+      if (thinkingStep) {
+        thinkingStep.text = thinkingText;
       } else {
-        try {
-          db.prepare('UPDATE messages SET content = ? WHERE id = ?').run(thinkingText, run.thinkingSegmentId);
-        } catch (e) {
-          console.error('Failed to update thinking segment:', e.message);
-        }
-      }
-
-      // Broadcast (throttled ~300ms)
-      const now = Date.now();
-      if (!run.lastThinkingBroadcast || now - run.lastThinkingBroadcast >= 300) {
-        run.lastThinkingBroadcast = now;
-        this.broadcastSegmentUpdate(parsed, runId, {
-          id: run.thinkingSegmentId,
+        log.steps.push({
           type: 'thinking',
-          seq: run.thinkingSeq,
-          content: thinkingText
+          timestamp: Date.now(),
+          text: thinkingText
         });
       }
-      return;
+      // Always write to DB; throttle broadcasts to every 300ms
+      this._writeActivityToDb(runId, log);
+      const now = Date.now();
+      if (!log._lastThinkingBroadcast || now - log._lastThinkingBroadcast >= 300) {
+        log._lastThinkingBroadcast = now;
+        this._broadcastActivityUpdate(runId, log);
+      }
     }
 
     if (stream === 'tool') {
-      // Seal and save any current text segment (intermediate narration before this tool call)
-      if (run.currentTextSegmentId && run.currentTextContent?.trim()) {
-        const segId = run.currentTextSegmentId;
-        const content = run.currentTextContent;
-        const seq = run.currentTextSeq;
-        const ts = run.currentTextTimestamp || Date.now();
-        try {
-          db.prepare(`
-            INSERT OR REPLACE INTO messages (id, thread_id, role, type, content, status, seq, timestamp, created_at)
-            VALUES (?, ?, 'assistant', 'text', ?, 'sent', ?, ?, ?)
-          `).run(segId, parsed.threadId, content, seq, ts, ts);
-        } catch (e) {
-          console.error('Failed to save sealed text segment:', e.message);
-        }
+      // Seal any current assistant text segment (narration before this tool call)
+      if (log._currentAssistantSegment && !log._currentAssistantSegment._sealed) {
+        log._currentAssistantSegment._sealed = true;
       }
-      run.currentTextSegmentId = null;
-      run.currentTextContent = null;
-      run.currentTextSeq = null;
-
-      if (!run.toolSegmentMap) run.toolSegmentMap = new Map();
-      if (!run.toolSeqMap) run.toolSeqMap = new Map();
-      if (!run.toolStartTimes) run.toolStartTimes = new Map();
-
-      const toolCallId = data?.toolCallId;
-      const phase = data?.phase || 'start';
-
-      if (phase === 'result') {
-        const existingId = run.toolSegmentMap.get(toolCallId);
-        if (existingId) {
-          const durationMs = run.toolStartTimes.get(toolCallId) ? Date.now() - run.toolStartTimes.get(toolCallId) : null;
-          const metadata = {
-            name: data?.name || 'unknown',
-            status: 'done',
-            meta: data?.meta || '',
-            isError: data?.isError || false,
-            durationMs
-          };
-          try {
-            db.prepare('UPDATE messages SET metadata = ? WHERE id = ?').run(JSON.stringify(metadata), existingId);
-          } catch (e) {
-            console.error('Failed to update tool segment result:', e.message);
-          }
-          this.broadcastSegmentUpdate(parsed, runId, {
-            id: existingId,
-            type: 'tool',
-            seq: run.toolSeqMap.get(toolCallId),
-            metadata
-          });
+
+      const step = {
+        type: 'tool',
+        timestamp: Date.now(),
+        name: data?.name || 'unknown',
+        phase: data?.phase || 'start',
+        toolCallId: data?.toolCallId,
+        meta: data?.meta,
+        isError: data?.isError || false
+      };
+
+      // On result phase, update the existing start step or add new
+      if (data?.phase === 'result') {
+        const existing = log.steps.findLast(s => s.toolCallId === data.toolCallId && (s.phase === 'start' || s.phase === 'running'));
+        if (existing) {
+          existing.phase = 'done';
+          existing.resultMeta = data?.meta;
+          existing.isError = data?.isError || false;
+          existing.durationMs = Date.now() - existing.timestamp;
+        } else {
+          step.phase = 'done';
+          log.steps.push(step);
         }
-      } else if (phase === 'update') {
-        const existingId = run.toolSegmentMap.get(toolCallId);
-        if (existingId) {
-          const metadata = {
-            name: data?.name || 'unknown',
-            status: 'running',
-            meta: data?.meta || ''
-          };
-          try {
-            db.prepare('UPDATE messages SET metadata = ? WHERE id = ?').run(JSON.stringify(metadata), existingId);
-          } catch (e) {
-            console.error('Failed to update tool segment:', e.message);
-          }
-          this.broadcastSegmentUpdate(parsed, runId, {
-            id: existingId,
-            type: 'tool',
-            seq: run.toolSeqMap.get(toolCallId),
-            metadata
-          });
+      } else if (data?.phase === 'update') {
+        const existing = log.steps.findLast(s => s.toolCallId === data.toolCallId);
+        if (existing) {
+          if (data?.meta) existing.resultMeta = data.meta;
+          if (data?.isError) existing.isError = true;
+          existing.phase = 'running';
         }
       } else {
-        // phase === 'start': insert new tool segment
-        run.seqCounter++;
-        const segId = `seg-${parsed.threadId}-${runId}-${run.seqCounter}`;
-        const now = Date.now();
-        const metadata = {
-          name: data?.name || 'unknown',
-          status: 'running',
-          meta: data?.meta || ''
-        };
-        try {
-          db.prepare(`
-            INSERT INTO messages (id, thread_id, role, type, content, status, metadata, seq, timestamp, created_at)
-            VALUES (?, ?, 'assistant', 'tool', '', 'sent', ?, ?, ?, ?)
-          `).run(segId, parsed.threadId, JSON.stringify(metadata), run.seqCounter, now, now);
-        } catch (e) {
-          console.error('Failed to save tool segment:', e.message);
-        }
-        run.toolSegmentMap.set(toolCallId, segId);
-        run.toolSeqMap.set(toolCallId, run.seqCounter);
-        run.toolStartTimes.set(toolCallId, now);
-        this.broadcastSegmentUpdate(parsed, runId, {
-          id: segId,
-          type: 'tool',
-          seq: run.seqCounter,
-          metadata
-        });
+        log.steps.push(step);
       }
-      return;
+
+      this._writeActivityToDb(runId, log);
+      this._broadcastActivityUpdate(runId, log);
     }
 
     if (stream === 'lifecycle') {
       if (data?.phase === 'end' || data?.phase === 'error') {
-        // Broadcast final text content one last time for live display
-        // Do NOT save to DB — handleChatEvent.final saves the authoritative final text
-        if (run.currentTextSegmentId) {
-          this.broadcastSegmentUpdate(parsed, runId, {
-            id: run.currentTextSegmentId,
-            type: 'text',
-            seq: run.currentTextSeq,
-            content: run.currentTextContent || ''
-          });
-          // Store seq for handleChatEvent.final to position final message correctly
-          run.finalSeq = run.currentTextSeq;
-          run.currentTextSegmentId = null;
-          run.currentTextContent = null;
-        } else {
-          // No active text segment — final seq is next position
-          run.finalSeq = run.seqCounter + 1;
+        // Seal any remaining assistant segment
+        if (log._currentAssistantSegment && !log._currentAssistantSegment._sealed) {
+          log._currentAssistantSegment._sealed = true;
+        }
+        // Remove the final assistant segment — that's the actual response, not narration
+        const lastAssistantIdx = log.steps.findLastIndex(s => s.type === 'assistant');
+        if (lastAssistantIdx >= 0) {
+          log.steps.splice(lastAssistantIdx, 1);
         }
 
-        // Broadcast segments-complete
-        this.broadcastToBrowsers(JSON.stringify({
-          type: 'clawchats',
-          event: 'segments-complete',
-          workspace: parsed.workspace,
-          threadId: parsed.threadId,
-          runId
-        }));
-
-        // Keep run state briefly for handleChatEvent.final to read finalSeq
-        setTimeout(() => this.runState.delete(runId), 30000);
+        // Write final state to DB, then clean up
+        this._writeActivityToDb(runId, log);
+        this.activityLogs.delete(runId);
+        return;
       }
     }
   }
 
-  findRunBySessionKey(sessionKey) {
-    for (const [, run] of this.runState.entries()) {
-      if (run.sessionKey === sessionKey) return run;
+  _writeActivityToDb(runId, log) {
+    if (!log._parsed) {
+      log._parsed = parseSessionKey(log.sessionKey);
+    }
+    const parsed = log._parsed;
+    if (!parsed) return;
+
+    const db = getDb(parsed.workspace);
+    if (!db) return;
+
+    const cleanSteps = log.steps.map(s => { const c = {...s}; delete c._sealed; return c; });
+    const summary = this.generateActivitySummary(log.steps);
+    const now = Date.now();
+
+    if (!log._messageId) {
+      // First write — INSERT the assistant message row
+      const thread = db.prepare('SELECT id FROM threads WHERE id = ?').get(parsed.threadId);
+      if (!thread) return;
+
+      const messageId = `gw-activity-${runId}`;
+      const metadata = { activityLog: cleanSteps, activitySummary: summary, pending: true };
+
+      db.prepare(`
+        INSERT INTO messages (id, thread_id, role, content, status, metadata, timestamp, created_at)
+        VALUES (?, ?, 'assistant', '', 'sent', ?, ?, ?)
+      `).run(messageId, parsed.threadId, JSON.stringify(metadata), now, now);
+
+      log._messageId = messageId;
+
+      // First event — broadcast message-saved so browser creates the message element
+      this.broadcastToBrowsers(JSON.stringify({
+        type: 'clawchats',
+        event: 'message-saved',
+        threadId: parsed.threadId,
+        workspace: parsed.workspace,
+        messageId,
+        timestamp: now
+      }));
+    } else {
+      // Subsequent writes — UPDATE metadata on existing row
+      const existing = db.prepare('SELECT metadata FROM messages WHERE id = ?').get(log._messageId);
+      const metadata = existing?.metadata ? JSON.parse(existing.metadata) : {};
+      metadata.activityLog = cleanSteps;
+      metadata.activitySummary = summary;
+      metadata.pending = true;
+
+      db.prepare('UPDATE messages SET metadata = ? WHERE id = ?')
+        .run(JSON.stringify(metadata), log._messageId);
     }
-    return null;
   }
 
-  broadcastSegmentUpdate(parsed, runId, segment) {
+  _broadcastActivityUpdate(runId, log) {
+    const parsed = log._parsed;
+    if (!parsed || !log._messageId) return;
+
+    const cleanSteps = log.steps.map(s => { const c = {...s}; delete c._sealed; return c; });
+
     this.broadcastToBrowsers(JSON.stringify({
       type: 'clawchats',
-      event: 'segment-update',
+      event: 'activity-updated',
       workspace: parsed.workspace,
       threadId: parsed.threadId,
-      runId,
-      segment
+      messageId: log._messageId,
+      activityLog: cleanSteps,
+      activitySummary: this.generateActivitySummary(log.steps)
     }));
   }
 
@@ -3292,10 +3375,14 @@ export function createApp(config = {}) {
       return sendError(res, 400, 'Required: id, role, content, timestamp');
     }
     const metadata = body.metadata ? JSON.stringify(body.metadata) : null;
-    const existing = db.prepare('SELECT id, status FROM messages WHERE id = ?').get(body.id);
+    const existing = db.prepare('SELECT id, status, metadata FROM messages WHERE id = ?').get(body.id);
     if (existing) {
-      if (body.status && body.status !== existing.status) {
-        db.prepare('UPDATE messages SET status = ?, content = ?, metadata = ? WHERE id = ?').run(body.status, body.content, metadata, body.id);
+      const newStatus = body.status || existing.status;
+      const statusChanged = body.status && body.status !== existing.status;
+      if (statusChanged || metadata) {
+        // Only overwrite metadata if new metadata is provided; otherwise preserve existing
+        const finalMetadata = metadata || existing.metadata || null;
+        db.prepare('UPDATE messages SET status = ?, content = ?, metadata = ? WHERE id = ?').run(newStatus, body.content, finalMetadata, body.id);
       }
     } else {
       db.prepare('INSERT INTO messages (id, thread_id, role, content, status, metadata, seq, timestamp, created_at) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)').run(body.id, params.id, body.role, body.content, body.status || 'sent', metadata, body.seq || null, body.timestamp, Date.now());
@@ -3548,11 +3635,23 @@ export function createApp(config = {}) {
       this.browserClients = new Map();
       this._externalBroadcastTargets = [];
       this.streamState = new Map();
-      this.runState = new Map(); // Map<runId, { sessionKey, seqCounter, currentTextSegmentId, startTime }>
+      this.activityLogs = new Map();
       setInterval(() => {
         const cutoff = Date.now() - 10 * 60 * 1000;
-        for (const [runId, run] of this.runState) {
-          if (run.startTime < cutoff) this.runState.delete(runId);
+        for (const [runId, log] of this.activityLogs) {
+          if (log.startTime < cutoff) {
+            if (log._messageId) {
+              const db = _getDb(log._parsed?.workspace);
+              if (db) {
+                db.prepare(`
+                  UPDATE messages SET content = '[Response interrupted]',
+                  metadata = json_remove(metadata, '$.pending')
+                  WHERE id = ? AND content = ''
+                `).run(log._messageId);
+              }
+            }
+            this.activityLogs.delete(runId);
+          }
         }
       }, 5 * 60 * 1000);
     }
@@ -3601,11 +3700,11 @@ export function createApp(config = {}) {
         return;
       }
       if (state === 'final' || state === 'aborted' || state === 'error') this.streamState.delete(sessionKey);
-      if (state === 'final') { const run = this.findRunBySessionKey(sessionKey); this.saveAssistantMessage(sessionKey, message, seq, run?.finalSeq); }
+      if (state === 'final') this.saveAssistantMessage(sessionKey, message, seq);
       if (state === 'error') this.saveErrorMarker(sessionKey, message);
     }
 
-    saveAssistantMessage(sessionKey, message, seq, segmentSeq) {
+    saveAssistantMessage(sessionKey, message, seq) {
       const parsed = parseSessionKey(sessionKey);
       if (!parsed) return;
       const ws = _getWorkspaces();
@@ -3616,12 +3715,37 @@ export function createApp(config = {}) {
       const content = extractContent(message);
       if (!content || !content.trim()) { console.log(`Skipping empty assistant response for thread ${parsed.threadId}`); return; }
       const now = Date.now();
-      const messageId = seq != null ? `gw-${parsed.threadId}-${seq}` : `gw-${parsed.threadId}-${now}`;
-      const msgSeq = segmentSeq != null ? segmentSeq : (seq != null ? seq : null);
+
+      // Check for pending activity message
+      const pendingMsg = db.prepare(`
+        SELECT id, metadata FROM messages
+        WHERE thread_id = ? AND role = 'assistant'
+        AND json_extract(metadata, '$.pending') = 1
+        ORDER BY timestamp DESC LIMIT 1
+      `).get(parsed.threadId);
+
+      let messageId;
+
+      if (pendingMsg) {
+        // Merge final content into existing activity row
+        const metadata = pendingMsg.metadata ? JSON.parse(pendingMsg.metadata) : {};
+        delete metadata.pending;
+        if (metadata.activityLog) {
+          const lastAssistantIdx = metadata.activityLog.findLastIndex(s => s.type === 'assistant');
+          if (lastAssistantIdx >= 0) metadata.activityLog.splice(lastAssistantIdx, 1);
+          metadata.activitySummary = this.generateActivitySummary(metadata.activityLog);
+        }
+        db.prepare('UPDATE messages SET content = ?, metadata = ?, timestamp = ? WHERE id = ?')
+          .run(content, JSON.stringify(metadata), now, pendingMsg.id);
+        messageId = pendingMsg.id;
+      } else {
+        // No pending activity — normal INSERT (simple responses, no tools)
+        messageId = seq != null ? `gw-${parsed.threadId}-${seq}` : `gw-${parsed.threadId}-${now}`;
+        db.prepare(`INSERT INTO messages (id, thread_id, role, content, status, timestamp, created_at) VALUES (?, ?, 'assistant', ?, 'sent', ?, ?) ON CONFLICT(id) DO UPDATE SET content = excluded.content, timestamp = excluded.timestamp`).run(messageId, parsed.threadId, content, now, now);
+      }
+
       try {
-        db.prepare('INSERT INTO messages (id, thread_id, role, type, content, status, seq, timestamp, created_at) VALUES (?, ?, \'assistant\', \'text\', ?, \'sent\', ?, ?, ?) ON CONFLICT(id) DO UPDATE SET content = excluded.content, seq = excluded.seq, timestamp = excluded.timestamp').run(messageId, parsed.threadId, content, msgSeq, now, now);
         db.prepare('UPDATE threads SET updated_at = ? WHERE id = ?').run(now, parsed.threadId);
-        // Always mark as unread — browser sends read receipts to clear
         db.prepare('INSERT OR IGNORE INTO unread_messages (thread_id, message_id, created_at) VALUES (?, ?, ?)').run(parsed.threadId, messageId, now);
         syncThreadUnreadCount(db, parsed.threadId);
         const threadInfo = db.prepare('SELECT title FROM threads WHERE id = ?').get(parsed.threadId);
@@ -3630,7 +3754,7 @@ export function createApp(config = {}) {
         this.broadcastToBrowsers(JSON.stringify({ type: 'clawchats', event: 'message-saved', threadId: parsed.threadId, workspace: parsed.workspace, messageId, timestamp: now, title: threadInfo?.title || 'Chat', preview, unreadCount }));
         const workspaceUnreadTotal = db.prepare('SELECT COALESCE(SUM(unread_count), 0) as total FROM threads').get().total;
         this.broadcastToBrowsers(JSON.stringify({ type: 'clawchats', event: 'unread-update', workspace: parsed.workspace, threadId: parsed.threadId, messageId, action: 'new', unreadCount, workspaceUnreadTotal, title: threadInfo?.title || 'Chat', preview, timestamp: now }));
-        console.log(`Saved assistant message to ${parsed.workspace}/${parsed.threadId} (seq: ${seq})`);
+        console.log(`Saved assistant message to ${parsed.workspace}/${parsed.threadId} (${pendingMsg ? 'merged into pending' : 'seq: ' + seq})`);
       } catch (e) { console.error(`Failed to save assistant message:`, e.message); }
     }
 
@@ -3655,114 +3779,121 @@ export function createApp(config = {}) {
     handleAgentEvent(payload) {
       const { runId, stream, data, sessionKey } = payload;
       if (!runId) return;
-      if (!this.runState.has(runId)) this.runState.set(runId, { sessionKey, seqCounter: 0, startTime: Date.now() });
-      const run = this.runState.get(runId);
-      const parsed = parseSessionKey(sessionKey);
-      if (!parsed) return;
-      const wsData = _getWorkspaces();
-      if (!wsData.workspaces[parsed.workspace]) return;
-      const db = _getDb(parsed.workspace);
-      const thread = db.prepare('SELECT id FROM threads WHERE id = ?').get(parsed.threadId);
-      if (!thread) return;
-
+      if (!this.activityLogs.has(runId)) this.activityLogs.set(runId, { sessionKey, steps: [], startTime: Date.now() });
+      const log = this.activityLogs.get(runId);
       if (stream === 'assistant') {
         const text = data?.text || '';
-        if (!text) return;
-        if (!run.currentTextSegmentId) {
-          run.seqCounter++;
-          run.currentTextSegmentId = `seg-${parsed.threadId}-${runId}-${run.seqCounter}`;
-          run.currentTextContent = text;
-          run.currentTextSeq = run.seqCounter;
-          run.currentTextTimestamp = Date.now();
-        } else { run.currentTextContent = text; }
-        const now = Date.now();
-        if (!run.lastTextBroadcast || now - run.lastTextBroadcast >= 150) {
-          run.lastTextBroadcast = now;
-          this.broadcastSegmentUpdate(parsed, runId, { id: run.currentTextSegmentId, type: 'text', seq: run.currentTextSeq, content: run.currentTextContent });
+        if (text) {
+          let currentSegment = log._currentAssistantSegment;
+          if (!currentSegment || currentSegment._sealed) {
+            currentSegment = { type: 'assistant', timestamp: Date.now(), text, _sealed: false };
+            log._currentAssistantSegment = currentSegment;
+            log.steps.push(currentSegment);
+          } else { currentSegment.text = text; }
         }
         return;
       }
-
       if (stream === 'thinking') {
         const thinkingText = data?.text || '';
-        if (!run.thinkingSegmentId) {
-          run.seqCounter++;
-          const segId = `seg-${parsed.threadId}-${runId}-${run.seqCounter}`;
-          run.thinkingSegmentId = segId;
-          run.thinkingSeq = run.seqCounter;
-          const now = Date.now();
-          try { db.prepare('INSERT INTO messages (id, thread_id, role, type, content, status, seq, timestamp, created_at) VALUES (?, ?, \'assistant\', \'thinking\', ?, \'sent\', ?, ?, ?)').run(segId, parsed.threadId, thinkingText, run.seqCounter, now, now); } catch (e) { console.error('Failed to save thinking segment:', e.message); }
-        } else {
-          try { db.prepare('UPDATE messages SET content = ? WHERE id = ?').run(thinkingText, run.thinkingSegmentId); } catch (e) { console.error('Failed to update thinking segment:', e.message); }
-        }
+        let thinkingStep = log.steps.find(s => s.type === 'thinking');
+        if (thinkingStep) { thinkingStep.text = thinkingText; }
+        else { log.steps.push({ type: 'thinking', timestamp: Date.now(), text: thinkingText }); }
+        this._writeActivityToDb(runId, log);
         const now = Date.now();
-        if (!run.lastThinkingBroadcast || now - run.lastThinkingBroadcast >= 300) {
-          run.lastThinkingBroadcast = now;
-          this.broadcastSegmentUpdate(parsed, runId, { id: run.thinkingSegmentId, type: 'thinking', seq: run.thinkingSeq, content: thinkingText });
+        if (!log._lastThinkingBroadcast || now - log._lastThinkingBroadcast >= 300) {
+          log._lastThinkingBroadcast = now;
+          this._broadcastActivityUpdate(runId, log);
         }
-        return;
       }
-
       if (stream === 'tool') {
-        if (run.currentTextSegmentId && run.currentTextContent?.trim()) {
-          const { currentTextSegmentId: segId, currentTextContent: content, currentTextSeq: seq, currentTextTimestamp: ts = Date.now() } = run;
-          try { db.prepare('INSERT OR REPLACE INTO messages (id, thread_id, role, type, content, status, seq, timestamp, created_at) VALUES (?, ?, \'assistant\', \'text\', ?, \'sent\', ?, ?, ?)').run(segId, parsed.threadId, content, seq, ts, ts); } catch (e) { console.error('Failed to save sealed text segment:', e.message); }
-        }
-        run.currentTextSegmentId = null; run.currentTextContent = null; run.currentTextSeq = null;
-        if (!run.toolSegmentMap) run.toolSegmentMap = new Map();
-        if (!run.toolSeqMap) run.toolSeqMap = new Map();
-        if (!run.toolStartTimes) run.toolStartTimes = new Map();
-        const toolCallId = data?.toolCallId;
-        const phase = data?.phase || 'start';
-        if (phase === 'result') {
-          const existingId = run.toolSegmentMap.get(toolCallId);
-          if (existingId) {
-            const durationMs = run.toolStartTimes.get(toolCallId) ? Date.now() - run.toolStartTimes.get(toolCallId) : null;
-            const metadata = { name: data?.name || 'unknown', status: 'done', meta: data?.meta || '', isError: data?.isError || false, durationMs };
-            try { db.prepare('UPDATE messages SET metadata = ? WHERE id = ?').run(JSON.stringify(metadata), existingId); } catch (e) { console.error('Failed to update tool segment result:', e.message); }
-            this.broadcastSegmentUpdate(parsed, runId, { id: existingId, type: 'tool', seq: run.toolSeqMap.get(toolCallId), metadata });
-          }
-        } else if (phase === 'update') {
-          const existingId = run.toolSegmentMap.get(toolCallId);
-          if (existingId) {
-            const metadata = { name: data?.name || 'unknown', status: 'running', meta: data?.meta || '' };
-            try { db.prepare('UPDATE messages SET metadata = ? WHERE id = ?').run(JSON.stringify(metadata), existingId); } catch (e) { console.error('Failed to update tool segment:', e.message); }
-            this.broadcastSegmentUpdate(parsed, runId, { id: existingId, type: 'tool', seq: run.toolSeqMap.get(toolCallId), metadata });
-          }
-        } else {
-          run.seqCounter++;
-          const segId = `seg-${parsed.threadId}-${runId}-${run.seqCounter}`;
-          const now = Date.now();
-          const metadata = { name: data?.name || 'unknown', status: 'running', meta: data?.meta || '' };
-          try { db.prepare('INSERT INTO messages (id, thread_id, role, type, content, status, metadata, seq, timestamp, created_at) VALUES (?, ?, \'assistant\', \'tool\', \'\', \'sent\', ?, ?, ?, ?)').run(segId, parsed.threadId, JSON.stringify(metadata), run.seqCounter, now, now); } catch (e) { console.error('Failed to save tool segment:', e.message); }
-          run.toolSegmentMap.set(toolCallId, segId); run.toolSeqMap.set(toolCallId, run.seqCounter); run.toolStartTimes.set(toolCallId, now);
-          this.broadcastSegmentUpdate(parsed, runId, { id: segId, type: 'tool', seq: run.seqCounter, metadata });
-        }
-        return;
+        if (log._currentAssistantSegment && !log._currentAssistantSegment._sealed) { log._currentAssistantSegment._sealed = true; }
+        const step = { type: 'tool', timestamp: Date.now(), name: data?.name || 'unknown', phase: data?.phase || 'start', toolCallId: data?.toolCallId, meta: data?.meta, isError: data?.isError || false };
+        if (data?.phase === 'result') {
+          const existing = log.steps.findLast(s => s.toolCallId === data.toolCallId && (s.phase === 'start' || s.phase === 'running'));
+          if (existing) { existing.phase = 'done'; existing.resultMeta = data?.meta; existing.isError = data?.isError || false; existing.durationMs = Date.now() - existing.timestamp; }
+          else { step.phase = 'done'; log.steps.push(step); }
+        } else if (data?.phase === 'update') {
+          const existing = log.steps.findLast(s => s.toolCallId === data.toolCallId);
+          if (existing) { if (data?.meta) existing.resultMeta = data.meta; if (data?.isError) existing.isError = true; existing.phase = 'running'; }
+        } else { log.steps.push(step); }
+        this._writeActivityToDb(runId, log);
+        this._broadcastActivityUpdate(runId, log);
       }
-
       if (stream === 'lifecycle') {
         if (data?.phase === 'end' || data?.phase === 'error') {
-          if (run.currentTextSegmentId) {
-            this.broadcastSegmentUpdate(parsed, runId, { id: run.currentTextSegmentId, type: 'text', seq: run.currentTextSeq, content: run.currentTextContent || '' });
-            run.finalSeq = run.currentTextSeq;
-            run.currentTextSegmentId = null; run.currentTextContent = null;
-          } else { run.finalSeq = run.seqCounter + 1; }
-          this.broadcastToBrowsers(JSON.stringify({ type: 'clawchats', event: 'segments-complete', workspace: parsed.workspace, threadId: parsed.threadId, runId }));
-          setTimeout(() => this.runState.delete(runId), 30000);
+          if (log._currentAssistantSegment && !log._currentAssistantSegment._sealed) log._currentAssistantSegment._sealed = true;
+          const lastAssistantIdx = log.steps.findLastIndex(s => s.type === 'assistant');
+          if (lastAssistantIdx >= 0) log.steps.splice(lastAssistantIdx, 1);
+          this._writeActivityToDb(runId, log);
+          this.activityLogs.delete(runId);
+          return;
         }
       }
     }
 
-    findRunBySessionKey(sessionKey) {
-      for (const [, run] of this.runState.entries()) {
-        if (run.sessionKey === sessionKey) return run;
+    _writeActivityToDb(runId, log) {
+      if (!log._parsed) {
+        log._parsed = parseSessionKey(log.sessionKey);
+      }
+      const parsed = log._parsed;
+      if (!parsed) return;
+
+      const db = _getDb(parsed.workspace);
+      if (!db) return;
+
+      const cleanSteps = log.steps.map(s => { const c = {...s}; delete c._sealed; return c; });
+      const summary = this.generateActivitySummary(log.steps);
+      const now = Date.now();
+
+      if (!log._messageId) {
+        const thread = db.prepare('SELECT id FROM threads WHERE id = ?').get(parsed.threadId);
+        if (!thread) return;
+
+        const messageId = `gw-activity-${runId}`;
+        const metadata = { activityLog: cleanSteps, activitySummary: summary, pending: true };
+
+        db.prepare(`
+          INSERT INTO messages (id, thread_id, role, content, status, metadata, timestamp, created_at)
+          VALUES (?, ?, 'assistant', '', 'sent', ?, ?, ?)
+        `).run(messageId, parsed.threadId, JSON.stringify(metadata), now, now);
+
+        log._messageId = messageId;
+
+        this.broadcastToBrowsers(JSON.stringify({
+          type: 'clawchats',
+          event: 'message-saved',
+          threadId: parsed.threadId,
+          workspace: parsed.workspace,
+          messageId,
+          timestamp: now
+        }));
+      } else {
+        const existing = db.prepare('SELECT metadata FROM messages WHERE id = ?').get(log._messageId);
+        const metadata = existing?.metadata ? JSON.parse(existing.metadata) : {};
+        metadata.activityLog = cleanSteps;
+        metadata.activitySummary = summary;
+        metadata.pending = true;
+
+        db.prepare('UPDATE messages SET metadata = ? WHERE id = ?')
+          .run(JSON.stringify(metadata), log._messageId);
       }
-      return null;
     }
 
-    broadcastSegmentUpdate(parsed, runId, segment) {
-      this.broadcastToBrowsers(JSON.stringify({ type: 'clawchats', event: 'segment-update', workspace: parsed.workspace, threadId: parsed.threadId, runId, segment }));
+    _broadcastActivityUpdate(runId, log) {
+      const parsed = log._parsed;
+      if (!parsed || !log._messageId) return;
+
+      const cleanSteps = log.steps.map(s => { const c = {...s}; delete c._sealed; return c; });
+
+      this.broadcastToBrowsers(JSON.stringify({
+        type: 'clawchats',
+        event: 'activity-updated',
+        workspace: parsed.workspace,
+        threadId: parsed.threadId,
+        messageId: log._messageId,
+        activityLog: cleanSteps,
+        activitySummary: this.generateActivitySummary(log.steps)
+      }));
     }
 
     generateActivitySummary(steps) {
@@ -3870,11 +4001,12 @@ export function createApp(config = {}) {
       const isIcon = urlPath.startsWith('/icons/');
       const isLib = urlPath.startsWith('/lib/');
       const isFrontend = urlPath.startsWith('/frontend/');
+      const isEmoji = urlPath.startsWith('/emoji/');
       const isConfig = urlPath === '/config.js';
-      const staticPath = fileName ? path.join(__dirname, fileName) : (isIcon || isLib || isFrontend || isConfig) ? path.join(__dirname, urlPath.slice(1)) : null;
+      const staticPath = fileName ? path.join(__dirname, fileName) : (isIcon || isLib || isFrontend || isEmoji || isConfig) ? path.join(__dirname, urlPath.slice(1)) : null;
       if (staticPath && fs.existsSync(staticPath) && fs.statSync(staticPath).isFile()) {
         const ext = path.extname(staticPath).toLowerCase();
-        const mimeMap = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.json': 'application/json', '.ico': 'image/x-icon', '.png': 'image/png', '.svg': 'image/svg+xml' };
+        const mimeMap = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.json': 'application/json', '.ico': 'image/x-icon', '.png': 'image/png', '.svg': 'image/svg+xml', '.gif': 'image/gif', '.webp': 'image/webp' };
         const ct = mimeMap[ext] || 'application/octet-stream';
         const stat = fs.statSync(staticPath);
         res.writeHead(200, { 'Content-Type': ct, 'Content-Length': stat.size, 'Cache-Control': ext === '.html' ? 'no-cache' : 'public, max-age=3600' });
@@ -3885,8 +4017,79 @@ export function createApp(config = {}) {
     let p;
     if ((p = matchRoute(method, urlPath, 'GET /api/uploads/:threadId/:fileId'))) return _handleServeUpload(req, res, p);
 
+    // Custom emoji listing (no auth)
+    if (method === 'GET' && urlPath === '/api/emoji') {
+      const emojiDir = path.join(__dirname, 'emoji');
+      if (!fs.existsSync(emojiDir)) { res.writeHead(200, { 'Content-Type': 'application/json' }); return res.end('[]'); }
+      try {
+        const packs = fs.readdirSync(emojiDir).filter(d => fs.statSync(path.join(emojiDir, d)).isDirectory());
+        const result = [];
+        for (const pack of packs) {
+          const files = fs.readdirSync(path.join(emojiDir, pack)).filter(f => /\.(png|gif|webp|jpg|jpeg)$/i.test(f));
+          for (const file of files) result.push({ name: file.replace(/\.[^.]+$/, ''), pack, path: `/emoji/${pack}/${file}` });
+        }
+        res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'public, max-age=300' });
+        return res.end(JSON.stringify(result));
+      } catch (e) { res.writeHead(500, { 'Content-Type': 'application/json' }); return res.end(JSON.stringify({ error: e.message })); }
+    }
+
+    // Search slackmojis.com (no auth, proxied)
+    if (method === 'GET' && urlPath === '/api/emoji/search') {
+      const q = query.q || '';
+      if (!q) { res.writeHead(400, { 'Content-Type': 'application/json' }); return res.end(JSON.stringify({ error: 'Missing ?q=' })); }
+      try {
+        const https = await import('https');
+        const html = await new Promise((resolve, reject) => {
+          https.default.get(`https://slackmojis.com/emojis/search?query=${encodeURIComponent(q)}`, (resp) => {
+            let body = ''; resp.on('data', c => body += c); resp.on('end', () => resolve(body));
+          }).on('error', reject);
+        });
+        const results = [];
+        const regex = /data-emoji-id-name="([^"]+)"[^>]*href="([^"]+)"[\s\S]*?<img[^>]*src="([^"]+)"/g;
+        let match;
+        while ((match = regex.exec(html)) !== null && results.length < 50) {
+          const name = match[1].replace(/^\d+-/, '');
+          results.push({ name, image_url: match[3], download_url: `https://slackmojis.com${match[2]}` });
+        }
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        return res.end(JSON.stringify(results));
+      } catch (e) { res.writeHead(500, { 'Content-Type': 'application/json' }); return res.end(JSON.stringify({ error: e.message })); }
+    }
+
     if (!_checkAuth(req, res)) return;
 
+    // Download emoji from URL (auth required)
+    if (method === 'POST' && urlPath === '/api/emoji/add') {
+      try {
+        const { url, name, pack } = await parseBody(req);
+        if (!url || !name) { res.writeHead(400, { 'Content-Type': 'application/json' }); return res.end(JSON.stringify({ error: 'Missing url or name' })); }
+        const targetPack = pack || 'custom';
+        const emojiDir = path.join(__dirname, 'emoji', targetPack);
+        if (!fs.existsSync(emojiDir)) fs.mkdirSync(emojiDir, { recursive: true });
+        const https = await import('https');
+        const http = await import('http');
+        const download = (dlUrl, redirects = 0) => new Promise((resolve, reject) => {
+          if (redirects > 5) return reject(new Error('Too many redirects'));
+          const mod = dlUrl.startsWith('https') ? https.default : http.default;
+          mod.get(dlUrl, (resp) => {
+            if (resp.statusCode >= 300 && resp.statusCode < 400 && resp.headers.location) return resolve(download(resp.headers.location, redirects + 1));
+            if (resp.statusCode !== 200) return reject(new Error(`HTTP ${resp.statusCode}`));
+            const chunks = []; resp.on('data', c => chunks.push(c)); resp.on('end', () => resolve({ buffer: Buffer.concat(chunks), contentType: resp.headers['content-type'] || '' }));
+          }).on('error', reject);
+        });
+        const { buffer, contentType } = await download(url);
+        let ext = 'png';
+        if (contentType.includes('gif')) ext = 'gif';
+        else if (contentType.includes('webp')) ext = 'webp';
+        else if (contentType.includes('jpeg') || contentType.includes('jpg')) ext = 'jpg';
+        else { const u = url.split('?')[0].split('.').pop().toLowerCase(); if (['png','gif','webp','jpg','jpeg'].includes(u)) ext = u; }
+        const safeName = name.replace(/[^a-zA-Z0-9_-]/g, '_');
+        fs.writeFileSync(path.join(emojiDir, `${safeName}.${ext}`), buffer);
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        return res.end(JSON.stringify({ name: safeName, pack: targetPack, path: `/emoji/${targetPack}/${safeName}.${ext}` }));
+      } catch (e) { res.writeHead(500, { 'Content-Type': 'application/json' }); return res.end(JSON.stringify({ error: e.message })); }
+    }
+
     try {
       if (method === 'GET' && urlPath === '/api/file') return handleServeFile(req, res, query);
       if (method === 'GET' && urlPath === '/api/workspace') return handleWorkspaceList(req, res, query);