@filipc77/cowrite 0.4.28 → 0.6.0

package/README.md

@@ -1,34 +1,34 @@
 # Cowrite
 
-Live commenting plugin for coding agent sessions. Select text in a browser preview, leave comments, and your coding agent receives them in real time via MCP. Works with any MCP-compatible coding agent — optimized for Claude Code with auto-installed hooks and skills.
+Live commenting and inline editing plugin for coding agent sessions. Select text to comment, click to edit — your coding agent receives all changes in real time via MCP.
 
 **The problem:** When working with AI coding agents, there's no way to give inline, contextual feedback on specific parts of a file while the agent is working. You either interrupt with a chat message (losing spatial context) or wait until the agent is done.
 
-**The solution:** Cowrite opens a live preview of any text file where you can select text and leave comments. The comments propagate directly into the agent session via MCP tools — so the agent can act on your feedback immediately. Any agent that supports MCP can use Cowrite's tools (`get_pending_comments`, `resolve_comment`, etc.). Claude Code users get additional integration: auto-installed hooks that surface comments on every prompt, and `/review` + `/watch` skills.
+The solution: Cowrite opens a live preview of any text file where you can select text and leave comments. The comments propagate directly into the agent ssss — so the agent can act on your feedback immediately. Any agent that supports MCP can use Cowrite's tools (get_pending_comments, resolve_comment, etc.). Claude Code users get additional integration: auto-installed hooks that surface comments on every prompt, and /review + /watch skills. The preview also supports inline editing: click any block to edit it, insert new blocks with the + button, and undo with Cmd+Z — all changes are saved to disk instantly.
 
 ## How it works
 
 ```
 Browser (Preview UI)          Node.js Process              Claude Code
-┌─────────────────┐     ┌──────────────────────┐     ┌──────────────┐
-│ File preview     │     │  HTTP + WebSocket    │     │              │
-│ Text selection   │◄───►│  server (port 3377)  │     │  MCP tools:  │
-│ Comment creation │     │                      │     │              │
-│ Comment sidebar  │     │  ┌────────────────┐  │     │  get_pending │
-└─────────────────┘     │  │ CommentStore   │  │     │  resolve     │
-                         │  │ (shared memory)│  │     │  reply       │
-                         │  └───────┬────────┘  │     │  get_annotated│
-                         │          │           │     │  wait_for_comment│
-                         │  ┌───────▼────────┐  │     │              │
-                         │  │ MCP Server     │◄─╋────►│              │
-                         │  │ (stdio)        │  │     │              │
-                         │  └────────────────┘  │     └──────────────┘
+┌──────────────────┐     ┌──────────────────────┐     ┌────────────────────┐
+│ File preview     │     │  HTTP + WebSocket    │     │                    │
+│ Text selection   │◄───►│  server (port 3377)  │     │  MCP tools:        │
+│ Comment creation │     │                      │     │                    │
+│ Comment sidebar  │     │  ┌────────────────┐  │     │  get_pending       │ 
+└──────────────────┘     │  │ CommentStore   │  │     │  resolve           │
+                         │  │ (shared memory)│  │     │  reply             │
+                         │  └───────┬────────┘  │     │  get_annotated     │
+                         │          │           │     │   wait_for_comment │
+                         │  ┌───────▼────────┐  │     │                    │
+                         │  │ MCP Server     │◄─╋────►│                    │
+                         │  │ (stdio)        │  │     │                    │
+                         │  └────────────────┘  │     └────────────────────┘
                          │                      │
                          │  File Watcher        │
                          └──────────────────────┘
 ```
 
-A single Node.js process runs both the HTTP/WebSocket preview server and the MCP stdio server, sharing one in-memory comment store.
+A single Node.js process runs both the HTTP/WebSocket preview server and the MCP stdio server, sharing one in-memory comment store. Inline edits from the browser are applied to the file on disk via WebSocket, and the file watcher propagates changes back to all connected clients.
 
 ## Quick Start
 
@@ -67,9 +67,11 @@ cowrite open
 
 Pick a file and you'll see a live preview.
 
-### 4. Select text and comment
+### 4. Comment or edit
 
-Select any text in the preview. A **Comment** button appears — click it to open the comment form. Your text selection stays intact, so you can still copy-paste normally.
+**Commenting:** Select any text in the preview. A **Comment** button appears — click it to open the comment form. Your text selection stays intact, so you can still copy-paste normally.
+
+**Editing:** Click any block in the preview to edit it inline (contentEditable for text, textarea for code blocks and tables). Press the **+** button between blocks to insert a new block from a searchable menu. Press **Cmd+Enter** to save your edit, **Escape** to cancel, or **Cmd+Z** to undo (up to 50 levels).
 
 ### 5. The agent picks up your comments
 
@@ -168,6 +170,9 @@ Blocks until a new comment is posted in the live preview, then returns it. If pe
 - **Agent replies** — The agent can reply to comments, and replies appear in the browser sidebar in real time.
 - **Auto-port selection** — If port 3377 is in use (e.g. running cowrite in multiple repos), it automatically tries the next port (3378, 3379, etc.).
 - **Auto-installed hooks** — `cowrite serve` automatically installs Claude Code `UserPromptSubmit` and `Stop` hooks that surface pending comments to the agent. Merges with existing settings.
+- **Inline editing** — click any block to edit directly (contentEditable for text, textarea for code/tables)
+- **Block insertion** — + button between blocks, searchable menu
+- **Undo** — Cmd+Z or header button, up to 50 levels, persisted across file switches
 
 ## Skills
 
@@ -190,6 +195,14 @@ Cowrite ships with two built-in Claude Code skills (auto-installed to `.claude/s
 6. The agent makes the change, calls `reply_to_comment` (visible in the browser), then `resolve_comment`
 7. The browser receives the update via WebSocket and shows the reply and resolved state
 
+## How Edits Flow
+
+1. You click a block in the browser preview to enter edit mode
+2. After editing, press Cmd+Enter to save — the browser sends an `edit_apply` message via WebSocket
+3. The server writes the updated content to the file on disk
+4. The file watcher detects the change and broadcasts the new content to all connected clients
+5. Comments re-anchor to their selected text in the updated file
+
 ## Development
 
 ```bash

package/dist/bin/cowrite.js

@@ -108,6 +108,26 @@ var CommentStore = class extends EventEmitter {
 `));
     return comment;
   }
+  reopen(commentId) {
+    const comment = this.comments.get(commentId);
+    if (!comment || comment.status !== "resolved") return null;
+    comment.status = "pending";
+    comment.resolvedAt = null;
+    this.emit("change", comment);
+    this.emit("comment_reopened", comment);
+    this.persist().catch((err) => process.stderr.write(`Persist error: ${err}
+`));
+    return comment;
+  }
+  delete(commentId) {
+    const existed = this.comments.delete(commentId);
+    if (existed) {
+      this.emit("change", null);
+      this.persist().catch((err) => process.stderr.write(`Persist error: ${err}
+`));
+    }
+    return existed;
+  }
   addReply(commentId, from, text) {
     const comment = this.comments.get(commentId);
     if (!comment) return null;
@@ -118,6 +138,13 @@ var CommentStore = class extends EventEmitter {
       createdAt: (/* @__PURE__ */ new Date()).toISOString()
     };
     comment.replies.push(reply);
+    if (from === "agent" && comment.status === "pending") {
+      comment.status = "answered";
+    }
+    if (from === "user" && comment.status === "answered") {
+      comment.status = "pending";
+      this.emit("comment_reopened", comment);
+    }
     this.emit("change", comment);
     this.persist().catch((err) => process.stderr.write(`Persist error: ${err}
 `));
@@ -144,6 +171,7 @@ var CommentStore = class extends EventEmitter {
     const fileComments = this.getForFile(file);
     if (fileComments.length === 0) return;
     for (const comment of fileComments) {
+      if (!comment.selectedText) continue;
       const searchStart = Math.max(0, comment.offset - 200);
       const searchEnd = Math.min(newContent.length, comment.offset + comment.length + 200);
       const searchRegion = newContent.slice(searchStart, searchEnd);
@@ -170,7 +198,8 @@ import { z } from "zod";
 
 // src/utils.ts
 import { exec } from "child_process";
-import { marked } from "marked";
+import { marked, Renderer } from "marked";
+import hljs from "highlight.js";
 function openBrowser(url) {
   const cmd = process.platform === "darwin" ? `open "${url}"` : process.platform === "win32" ? `cmd /c start "" "${url}"` : `xdg-open "${url}"`;
   return new Promise((resolve6) => {
@@ -189,19 +218,77 @@ function renderToHtml(content, filePath) {
   return renderPlainTextWithOffsets(content);
 }
 function renderMarkdownWithOffsets(content) {
-  const html = marked.parse(content, { async: false });
-  return `<div class="markdown-body" data-source-length="${content.length}">${html}</div>`;
+  const tokens = marked.lexer(content);
+  const blocks = [];
+  let blockOffset = 0;
+  for (const token of tokens) {
+    if (token.type !== "space") {
+      blocks.push({ sourceStart: blockOffset, sourceEnd: blockOffset + token.raw.length });
+    }
+    blockOffset += token.raw.length;
+  }
+  const renderer = new Renderer();
+  const defaultCodeRenderer = renderer.code.bind(renderer);
+  renderer.code = function(token) {
+    if (token.lang === "mermaid") {
+      return `<div class="mermaid-container"><pre class="mermaid">${token.text}</pre></div>`;
+    }
+    try {
+      let highlighted;
+      let lang;
+      if (token.lang && hljs.getLanguage(token.lang)) {
+        const result = hljs.highlight(token.text, { language: token.lang });
+        highlighted = result.value;
+        lang = token.lang;
+      } else {
+        const result = hljs.highlightAuto(token.text);
+        highlighted = result.value;
+        lang = result.language || "plaintext";
+      }
+      return `<div class="code-block-wrapper" data-lang="${lang}"><div class="code-block-header"><span class="code-block-lang">${lang}</span><button class="code-copy-btn" type="button">Copy</button></div><pre><code class="hljs language-${lang}">${highlighted}</code></pre></div>`;
+    } catch {
+      return defaultCodeRenderer(token);
+    }
+  };
+  const html = marked.parse(content, { async: false, renderer });
+  const blocksAttr = JSON.stringify(blocks).replace(/"/g, "&quot;");
+  return `<div class="markdown-body" data-source-length="${content.length}" data-blocks="${blocksAttr}">${html}</div>`;
 }
 function renderPlainTextWithOffsets(content) {
   const lines = content.split("\n");
   let offset = 0;
-  const htmlLines = [];
-  for (const line of lines) {
-    const escaped = escapeHtml(line);
-    htmlLines.push(`<span class="line" data-offset="${offset}" data-length="${line.length}">${escaped}</span>`);
+  const blocks = [];
+  const htmlParts = [];
+  let currentLines = [];
+  let blockStart = 0;
+  let blockIndex = 0;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const lineOffset = offset;
     offset += line.length + 1;
+    if (line.trim() === "") {
+      if (currentLines.length > 0) {
+        blocks.push({ sourceStart: blockStart, sourceEnd: lineOffset });
+        htmlParts.push(`<div class="text-block" data-block-index="${blockIndex}">${currentLines.join("\n")}</div>`);
+        blockIndex++;
+        currentLines = [];
+      }
+      htmlParts.push("");
+      blockStart = offset;
+    } else {
+      if (currentLines.length === 0) {
+        blockStart = lineOffset;
+      }
+      const escaped = escapeHtml(line);
+      currentLines.push(`<span class="line" data-offset="${lineOffset}" data-length="${line.length}">${escaped}</span>`);
+    }
+  }
+  if (currentLines.length > 0) {
+    blocks.push({ sourceStart: blockStart, sourceEnd: Math.min(offset, content.length) });
+    htmlParts.push(`<div class="text-block" data-block-index="${blockIndex}">${currentLines.join("\n")}</div>`);
   }
-  return `<pre class="plain-text" data-source-length="${content.length}">${htmlLines.join("\n")}</pre>`;
+  const blocksAttr = JSON.stringify(blocks).replace(/"/g, "&quot;");
+  return `<pre class="plain-text" data-source-length="${content.length}" data-blocks="${blocksAttr}">${htmlParts.join("\n")}</pre>`;
 }
 function escapeHtml(text) {
   return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
@@ -210,6 +297,11 @@ function annotateFileWithComments(content, comments) {
   const sorted = [...comments].sort((a, b) => b.offset - a.offset);
   let result = content;
   for (const c of sorted) {
+    if (!c.selectedText) {
+      result = `[FILE COMMENT #${c.id.slice(0, 8)}: "${c.comment}"]
+` + result;
+      continue;
+    }
     const marker = `[COMMENT #${c.id.slice(0, 8)}: "${c.comment}"]`;
     const end = c.offset + c.length;
     result = result.slice(0, end) + " " + marker + result.slice(end);
@@ -230,7 +322,7 @@ function createMcpServer(store, projectDir, getPreviewPort) {
     "Get comments from the live preview (0 pending). Call this first to catch comments posted before you started listening.",
     {
       file: z.string().optional().describe("Filter by file path"),
-      status: z.enum(["pending", "resolved", "all"]).optional().describe("Filter by status (default: pending)")
+      status: z.enum(["pending", "answered", "resolved", "all"]).optional().describe("Filter by status (default: pending)")
     },
     async ({ file, status }) => {
       const filter = {};
@@ -247,28 +339,9 @@ function createMcpServer(store, projectDir, getPreviewPort) {
       };
     }
   );
-  server.tool(
-    "resolve_comment",
-    "Mark a comment as resolved/addressed.",
-    {
-      commentId: z.string().describe("The comment ID to resolve")
-    },
-    async ({ commentId }) => {
-      const comment = store.resolve(commentId);
-      if (!comment) {
-        return {
-          content: [{ type: "text", text: `Comment ${commentId} not found.` }],
-          isError: true
-        };
-      }
-      return {
-        content: [{ type: "text", text: `Comment ${commentId} resolved.` }]
-      };
-    }
-  );
   server.tool(
     "reply_to_comment",
-    "Reply to a comment from the agent.",
+    "Reply to a comment from the agent. Your reply automatically marks the comment as 'answered'. The user reviews it and can resolve or reply back.",
     {
       commentId: z.string().describe("The comment ID to reply to"),
       reply: z.string().describe("The reply text")
@@ -355,9 +428,11 @@ function createMcpServer(store, projectDir, getPreviewPort) {
         const cleanup = () => {
           clearTimeout(timer);
           store.off("new_comment", onComment);
+          store.off("comment_reopened", onComment);
           signal?.removeEventListener("abort", onAbort);
         };
         store.on("new_comment", onComment);
+        store.on("comment_reopened", onComment);
         signal?.addEventListener("abort", onAbort, { once: true });
         if (signal?.aborted) {
           onAbort();
@@ -407,7 +482,7 @@ function createMcpServer(store, projectDir, getPreviewPort) {
     }).catch(() => {
     });
   });
-  store.on("new_comment", (comment) => {
+  function notifyCommentNeedsAttention(comment, prefix) {
     if (!server.isConnected()) return;
     const count = store.getAll({ status: "pending" }).length;
     const file = relative(projectDir, comment.file);
@@ -419,15 +494,22 @@ function createMcpServer(store, projectDir, getPreviewPort) {
       server.sendToolListChanged();
     } catch {
     }
+    const logMsg = comment.selectedText ? `${prefix} on ${file}: "${comment.comment}" (selected: "${selectedPreview}"). Call get_pending_comments to see it.` : `${prefix} on ${file}: "${comment.comment}". Call get_pending_comments to see it.`;
     server.sendLoggingMessage({
       level: "warning",
-      data: `NEW COMMENT on ${file}: "${comment.comment}" (selected: "${selectedPreview}"). Call get_pending_comments to see it.`
+      data: logMsg
     }).catch(() => {
     });
     server.server.notification({
       method: "notifications/resources/list_changed"
     }).catch(() => {
     });
+  }
+  store.on("new_comment", (comment) => {
+    notifyCommentNeedsAttention(comment, "NEW COMMENT");
+  });
+  store.on("comment_reopened", (comment) => {
+    notifyCommentNeedsAttention(comment, "COMMENT REOPENED");
   });
   store.on("change", () => {
     const count = store.getAll({ status: "pending" }).length;
@@ -440,7 +522,7 @@ function createMcpServer(store, projectDir, getPreviewPort) {
   });
   server.prompt(
     "cowrite-workflow",
-    "How to process live preview comments in a wait-handle-resolve loop",
+    "How to process live preview comments in a wait-handle-reply loop",
     () => ({
       messages: [
         {
@@ -450,17 +532,21 @@ function createMcpServer(store, projectDir, getPreviewPort) {
             text: [
               "You are monitoring a live code preview where users leave comments on selected text.",
               "",
+              "Comment lifecycle: pending \u2192 answered (auto on your reply) \u2192 resolved (user only).",
+              "If the user disagrees with your answer, they reply back and it returns to pending.",
+              "",
               "Follow this loop:",
               "1. Call `get_pending_comments` to check for any comments already posted.",
-              "2. Process each pending comment: read the file, make the requested change or reply, then call `resolve_comment`.",
-              "3. Call `wait_for_comment` to block until the next comment arrives.",
+              "2. Process each pending comment: read the file, make the requested change, then call `reply_to_comment` to explain what you did.",
+              "   Your reply automatically marks the comment as 'answered'. The user will review and resolve it.",
+              "3. Call `wait_for_comment` to block until the next comment (or reopened comment) arrives.",
               "4. When a comment arrives, process it the same way (step 2).",
               "5. Go back to step 3 and keep listening.",
               "",
               "Tips:",
               "- Use `get_file_with_annotations` to see comments in context within the file.",
               "- Use `reply_to_comment` to acknowledge or ask clarifying questions.",
-              "- Always `resolve_comment` after addressing feedback."
+              "- Do NOT resolve comments \u2014 the user does that after reviewing your work."
             ].join("\n")
           }
         }
@@ -472,7 +558,7 @@ function createMcpServer(store, projectDir, getPreviewPort) {
 
 // src/preview-server.ts
 import { createServer } from "http";
-import { readFile as readFile4, readdir } from "fs/promises";
+import { readFile as readFile4, readdir, writeFile as writeFile2 } from "fs/promises";
 import { existsSync } from "fs";
 import { join as join2, resolve as resolve4 } from "path";
 import { WebSocketServer } from "ws";
@@ -660,10 +746,10 @@ function createPreviewServer(store, projectDir, port, initialFile) {
       const absPath = resolve4(resolvedProjectDir, initialFile);
       await switchClientFile(ws, absPath);
     }
-    ws.on("message", (data) => {
+    ws.on("message", async (data) => {
       try {
         const msg = JSON.parse(data.toString());
-        handleClientMessage(ws, msg);
+        await handleClientMessage(ws, msg);
       } catch (err) {
         send(ws, { type: "error", message: `Invalid message: ${err}` });
       }
@@ -690,11 +776,11 @@ function createPreviewServer(store, projectDir, port, initialFile) {
       send(ws, { type: "error", message: `Cannot open file: ${err}` });
     }
   }
-  function handleClientMessage(ws, msg) {
+  async function handleClientMessage(ws, msg) {
     switch (msg.type) {
       case "switch_file": {
         const absPath = resolve4(resolvedProjectDir, msg.file);
-        switchClientFile(ws, absPath);
+        await switchClientFile(ws, absPath);
         break;
       }
       case "comment_add": {
@@ -715,6 +801,26 @@ function createPreviewServer(store, projectDir, port, initialFile) {
       case "comment_resolve":
         store.resolve(msg.commentId);
         break;
+      case "comment_reopen":
+        store.reopen(msg.commentId);
+        break;
+      case "comment_delete":
+        store.delete(msg.commentId);
+        break;
+      case "edit_apply": {
+        const file = clientFiles.get(ws);
+        if (!file) break;
+        const watcher = watchers.get(file);
+        if (!watcher) break;
+        const content = watcher.getContent();
+        if (msg.offset < 0 || msg.offset + msg.length > content.length) {
+          send(ws, { type: "error", message: "Edit offset/length out of bounds" });
+          break;
+        }
+        const newContent = content.slice(0, msg.offset) + msg.newText + content.slice(msg.offset + msg.length);
+        await writeFile2(file, newContent, "utf-8");
+        break;
+      }
     }
   }
   store.on("change", (comment) => {
@@ -779,6 +885,9 @@ function createPreviewServer(store, projectDir, port, initialFile) {
 }
 
 // bin/cowrite.ts
+import updateNotifier from "update-notifier";
+import "module";
+var version = true ? "0.6.0" : createRequire(import.meta.url)("../package.json").version;
 var USAGE = `
 cowrite \u2014 Live commenting plugin for coding agent sessions
 
@@ -834,7 +943,7 @@ COMMENTS_FILE="\${CLAUDE_PROJECT_DIR:-.}/.cowrite-comments.json"
 if [ ! -f "$COMMENTS_FILE" ] || [ ! -s "$COMMENTS_FILE" ]; then exit 0; fi
 PENDING=$(jq '[.[] | select(.status == "pending")] | length' "$COMMENTS_FILE" 2>/dev/null || echo 0)
 if [ "$PENDING" -eq 0 ]; then exit 0; fi
-jq -r '[.[] | select(.status == "pending")] | "COWRITE: \\(length) pending comment(s) from the live preview. For EACH comment: (1) make the requested change, (2) call reply_to_comment to explain what you did \u2014 the user reads replies in the browser, and (3) call resolve_comment.\\n" + ([.[] | "- [\\(.id)] File: \\(.file | split("/") | last) | Text: \\"\\(.selectedText)\\" | Comment: \\(.comment)"] | join("\\n"))' "$COMMENTS_FILE" 2>/dev/null
+jq -r '[.[] | select(.status == "pending")] | "COWRITE: \\(length) pending comment(s) from the live preview. For EACH comment: (1) make the requested change, (2) call reply_to_comment to explain what you did. Your reply automatically marks it as answered. The user will review and resolve it.\\n" + ([.[] | "- [\\(.id)] File: \\(.file | split("/") | last) | Text: \\"\\(.selectedText)\\" | Comment: \\(.comment)"] | join("\\n"))' "$COMMENTS_FILE" 2>/dev/null
 `;
 var HOOK_ENTRY = {
   matcher: "",
@@ -860,8 +969,7 @@ Check for any pending comments left in the Cowrite live preview and address them
    a. Read the comment text and the selected text it refers to.
    b. Use \`get_file_with_annotations\` to see the comment in context.
    c. Make the requested change or reply explaining why you can't.
-   d. Call \`reply_to_comment\` to acknowledge the feedback.
-   e. Call \`resolve_comment\` to mark it as addressed.
+   d. Call \`reply_to_comment\` to acknowledge the feedback. Your reply automatically marks it as "answered". The user will review and resolve it.
 3. Summarize what was done.
 `;
 var SKILL_WATCH = `---
@@ -878,12 +986,12 @@ Start a background agent that watches for cowrite comments and handles them as t
 
 1. First, handle any existing pending comments:
    a. Call \`get_pending_comments\` to check for unresolved comments.
-   b. For each pending comment, use \`get_file_with_annotations\` to see context, make the change, call \`reply_to_comment\`, and call \`resolve_comment\`.
+   b. For each pending comment, use \`get_file_with_annotations\` to see context, make the change, and call \`reply_to_comment\`. Your reply automatically marks it as "answered".
 
 2. Then, launch a **background** watcher using the Task tool:
    - Use \`subagent_type: "general-purpose"\` and \`run_in_background: true\`
    - The background agent should call \`wait_for_comment\` in a loop
-   - When a comment arrives, it handles it (read file, make change, reply, resolve)
+   - When a comment arrives, it handles it (read file, make change, reply)
    - On timeout, it re-calls \`wait_for_comment\` immediately
    - The loop continues until the user says stop
 
@@ -944,6 +1052,7 @@ async function main() {
     process.exit(positionals.length === 0 && !values.help ? 1 : 0);
   }
   const command = positionals[0];
+  updateNotifier({ pkg: { name: "@filipc77/cowrite", version } }).notify({ isGlobal: true });
   const projectDir = process.cwd();
   const port = parseInt(values.port, 10);
   installClaudeIntegration(projectDir);