docs: document affectedFiles and diff support in code review skill

- Add affectedFiles payload guide with status types and unified diff format
- Show how to generate diffs with git diff before submitting for review
- Add test-code-review.sh covering all file statuses and diff rendering

Author: zhmzm

skills/clawui-code/SKILL.md

@@ -5,10 +5,12 @@ description: Use this skill when you want to run a shell command that could be d
 
 # ClawUI Code Review
 
-Before running risky shell commands, get user approval via this skill.
+Before running risky shell commands, get user approval via this skill. You can also show the user exactly which files will change and what the diff looks like.
 
 ## Step 1: Submit the command for review
 
+### Basic (file list only)
+
 ```bash
 RESPONSE=$(curl -s -X POST http://host.docker.internal:3001/api/review \
   -H "Content-Type: application/json" \
@@ -25,7 +27,67 @@ RESPONSE=$(curl -s -X POST http://host.docker.internal:3001/api/review \
 echo "$RESPONSE"
 ```
 
-`files` is optional — list the files this command will affect, shown as a file tree in the UI.
+`files` is the legacy form — a plain list of affected paths shown as a file tree. Use `affectedFiles` (below) when you can provide diffs.
+
+### With diffs (recommended)
+
+Use `affectedFiles` instead of `files` to show the user exactly what will change. Each entry includes the file path, change type, and an optional unified diff.
+
+```bash
+RESPONSE=$(curl -s -X POST http://host.docker.internal:3001/api/review \
+  -H "Content-Type: application/json" \
+  -d '{
+    "type": "code_review",
+    "payload": {
+      "command": "git apply feature.patch",
+      "cwd": "/project",
+      "explanation": "Applies the feature patch: adds a retry helper and updates the API client to use it.",
+      "risk": "medium",
+      "affectedFiles": [
+        {
+          "path": "src/utils/retry.ts",
+          "status": "added",
+          "diff": "@@ -0,0 +1,12 @@\n+export async function retry<T>(fn: () => Promise<T>, times = 3): Promise<T> {\n+  let last: unknown\n+  for (let i = 0; i < times; i++) {\n+    try { return await fn() } catch (e) { last = e }\n+  }\n+  throw last\n+}"
+        },
+        {
+          "path": "src/api/client.ts",
+          "status": "modified",
+          "diff": "@@ -1,8 +1,9 @@\n import axios from 'axios'\n+import { retry } from '../utils/retry'\n \n export async function fetchUser(id: string) {\n-  return axios.get(`/users/${id}`)\n+  return retry(() => axios.get(`/users/${id}`))\n }"
+        },
+        {
+          "path": "src/api/legacyClient.ts",
+          "status": "deleted",
+          "diff": "@@ -1,5 +0,0 @@\n-// deprecated — use client.ts\n-import axios from 'axios'\n-export const get = (url: string) => axios.get(url)"
+        }
+      ]
+    }
+  }')
+echo "$RESPONSE"
+```
+
+#### `affectedFiles` entry fields
+
+| Field | Required | Description |
+|-------|----------|-------------|
+| `path` | yes | File path relative to `cwd` |
+| `status` | yes | `"added"` \| `"modified"` \| `"deleted"` \| `"renamed"` |
+| `diff` | no | Unified diff string (shown as GitHub-style diff in the UI) |
+| `oldPath` | no | Previous path, only for `"renamed"` files |
+
+#### How to generate the diff string
+
+```bash
+# For a patch you're about to apply:
+git diff --unified=3 HEAD -- src/api/client.ts
+
+# For staged changes:
+git diff --cached --unified=3
+
+# For a specific commit:
+git show abc123 --unified=3 -- src/utils/retry.ts
+```
+
+Escape the output as a JSON string (replace newlines with `\n`) before embedding in the payload.
 
 Save the `sessionId` from the response.
 

test-code-review.sh

@@ -0,0 +1,81 @@
+#!/bin/bash
+# Test AgentClick code review — mind-map file tree + diff viewer
+
+AGENTCLICK_URL="http://localhost:3001"
+
+echo "Creating code review session..."
+
+SESSION_PAYLOAD='{
+  "type": "code_review",
+  "sessionKey": "main-session",
+  "payload": {
+    "command": "git apply feature/retry-client.patch",
+    "cwd": "/project/src",
+    "explanation": "Introduces a generic retry helper and updates the API client to use it. Removes the deprecated legacy client module.",
+    "risk": "medium",
+    "affectedFiles": [
+      {
+        "path": "src/utils/retry.ts",
+        "status": "added",
+        "diff": "@@ -0,0 +1,14 @@\n+/**\n+ * Retries an async function up to `times` attempts.\n+ */\n+export async function retry<T>(\n+  fn: () => Promise<T>,\n+  times = 3,\n+  delayMs = 200,\n+): Promise<T> {\n+  let last: unknown\n+  for (let i = 0; i < times; i++) {\n+    try { return await fn() } catch (e) { last = e }\n+    if (i < times - 1) await new Promise(r => setTimeout(r, delayMs))\n+  }\n+  throw last\n+}"
+      },
+      {
+        "path": "src/api/client.ts",
+        "status": "modified",
+        "diff": "@@ -1,10 +1,11 @@\n import axios from 'axios'\n+import { retry } from '../utils/retry'\n \n-export async function fetchUser(id: string) {\n-  return axios.get(`/users/${id}`)\n+export async function fetchUser(id: string) {\n+  return retry(() => axios.get(`/users/${id}`))\n }\n \n-export async function updateUser(id: string, data: object) {\n-  return axios.put(`/users/${id}`, data)\n+export async function updateUser(id: string, data: object) {\n+  return retry(() => axios.put(`/users/${id}`, data))\n }"
+      },
+      {
+        "path": "src/api/legacyClient.ts",
+        "status": "deleted",
+        "diff": "@@ -1,7 +0,0 @@\n-// Deprecated — use client.ts\n-import axios from 'axios'\n-\n-export const get = (url: string) => axios.get(url)\n-export const post = (url: string, body: object) => axios.post(url, body)\n-export const del = (url: string) => axios.delete(url)"
+      },
+      {
+        "path": "src/api/index.ts",
+        "status": "renamed",
+        "oldPath": "src/api/exports.ts",
+        "diff": "@@ -1,3 +1,3 @@\n-export * from '\''./legacyClient'\''\n+export * from '\''./client'\''\n export * from '\''./types'\''"
+      },
+      {
+        "path": "src/config/constants.ts",
+        "status": "modified"
+      },
+      {
+        "path": "tests/api/client.test.ts",
+        "status": "added"
+      }
+    ]
+  }
+}'
+
+RESPONSE=$(curl -s -X POST "$AGENTCLICK_URL/api/review" \
+  -H "Content-Type: application/json" \
+  -d "$SESSION_PAYLOAD")
+
+SESSION_ID=$(echo "$RESPONSE" | grep -o '"sessionId":"[^"]*"' | cut -d'"' -f4)
+URL=$(echo "$RESPONSE" | grep -o '"url":"[^"]*"' | cut -d'"' -f4)
+
+if [ -z "$SESSION_ID" ]; then
+  echo "❌ Failed to create session. Is AgentClick running?"
+  echo "   Start it with: npm run dev"
+  echo "   Response: $RESPONSE"
+  exit 1
+fi
+
+echo ""
+echo "✅ Code review session created!"
+echo "   Session ID: $SESSION_ID"
+echo "   Review URL: $URL"
+echo ""
+echo "What to check in the UI:"
+echo "  • Mind-map file tree — pills connected by spine + arms"
+echo "  • src/ directory auto-expanded (all files are on-path)"
+echo "  • Diffs shown below the tree for 4 files"
+echo "  • Added file (retry.ts)  → green pill"
+echo "  • Modified files         → blue pill"
+echo "  • Deleted file           → red pill"
+echo "  • Renamed file           → amber pill with '← exports.ts'"
+echo "  • Two entries without diffs (constants.ts, client.test.ts) show in tree only"
+echo ""
+
+# Open browser (macOS)
+open "$URL" 2>/dev/null || echo "Open in browser: $URL"