claude-ws 0.4.9-beta.7 → 0.4.9-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-ws",
-  "version": "0.4.9-beta.7",
+  "version": "0.4.9-beta.8",
   "private": false,
   "description": "AI-powered workspace for solo CEOs and indie builders — manage your entire business with AI agents, not just code. Kanban board, code editor, Git integration, claw agent hub, local-first SQLite.",
   "keywords": [
@@ -67,7 +67,9 @@
   },
   "pnpm": {
     "overrides": {
-      "axios": "0.30.3"
+      "axios": "0.30.3",
+      "picomatch@^2.3.1": "2.3.2",
+      "picomatch@^4.0.0": "4.0.4"
     },
     "onlyBuiltDependencies": [
       "@parcel/watcher",
@@ -95,7 +97,10 @@
     "db:fix": "tsx scripts/db-fix-columns.ts",
     "db:migrate:health": "tsx scripts/db-migrate-health.ts",
     "projects:migrate:defaults": "tsx scripts/migrate-existing-projects.ts",
-    "migrate:sessions": "tsx scripts/migrate-sdk-sessions.ts"
+    "migrate:sessions": "tsx scripts/migrate-sdk-sessions.ts",
+    "migrate-hook-env": "tsx scripts/migrate-hook-env.ts",
+    "migrate-all-projects": "tsx scripts/migrate-all-projects.ts",
+    "heal-hooks": "tsx scripts/heal-hook-env.ts"
   },
   "dependencies": {
     "@anthropic-ai/claude-agent-sdk": "^0.2.81",
@@ -164,7 +169,6 @@
     "diff": "^8.0.3",
     "dompurify": "^3.3.3",
     "dotenv": "^17.3.1",
-    "drizzle-kit": "^0.31.10",
     "drizzle-orm": "^0.45.1",
     "eslint": "^9.39.4",
     "eslint-config-next": "^16.2.1",
@@ -205,6 +209,8 @@
     "node-pty": "^1.1.0"
   },
   "devDependencies": {
-    "@types/js-yaml": "^4.0.9"
+    "@tailwindcss/oxide-linux-x64-musl": "4.2.2",
+    "@types/js-yaml": "^4.0.9",
+    "drizzle-kit": "^0.31.10"
   }
 }

package/packages/agentic-sdk/README.md

@@ -61,7 +61,7 @@ KEY="my-secret-key"
 # Create a project
 curl -X POST http://localhost:3100/api/projects \
   -H "x-api-key: $KEY" -H "Content-Type: application/json" \
-  -d '{"name": "my-app", "path": "/home/user/my-app"}'
+  -d '{"name": "my-app", "path": "/home/user/my-app", "useHookTemplate": true}'
 
 # Create a task
 curl -X POST http://localhost:3100/api/tasks \
@@ -135,6 +135,7 @@ curl -X POST http://localhost:3100/api/attempts \
   "taskId": "task_...",
   "prompt": "Build the auth module",
   "force_create": true,
+  "use_hook_template": true,
   "projectName": "my-project",
   "taskTitle": "Auth module",
   "projectRootPath": "/path/to/project",
@@ -146,6 +147,7 @@ curl -X POST http://localhost:3100/api/attempts \
 ```
 
 - `force_create` — auto-creates project + task if they don't exist
+- `use_hook_template` — only applied when `force_create=true` creates a new project (default: `true`)
 - `request_method` — `queue` (default) or `sync` (waits for completion)
 - `output_format` / `output_schema` — structured output instructions
 

package/packages/agentic-sdk/src/services/attempt/attempt-creation-orchestrator.ts

@@ -11,6 +11,7 @@ export interface AttemptCreationInput {
   taskId: string;
   prompt: string;
   force_create?: boolean;
+  use_hook_template?: boolean;
   projectId?: string;
   projectName?: string;
   taskTitle?: string;
@@ -67,7 +68,7 @@ interface OrchestratorDeps {
   /** Callback to start the agent process (runtime singleton, lives outside SDK) */
   startAgent: (params: AgentStartParams) => void;
   defaultBasePath: string;
-  onProjectForceCreated?: (project: any) => Promise<void> | void;
+  onProjectForceCreated?: (project: any, input: AttemptCreationInput) => Promise<void> | void;
 }
 
 export function createAttemptOrchestrator(deps: OrchestratorDeps) {
@@ -98,7 +99,7 @@ export function createAttemptOrchestrator(deps: OrchestratorDeps) {
       const project = await projectService.getById(task.projectId);
       if (!project) throw new AttemptValidationError('Project not found', 404);
       if (projectCreatedByForceCreate && onProjectForceCreated) {
-        await onProjectForceCreated(project);
+        await onProjectForceCreated(project, input);
       }
 
       // Create attempt record

package/packages/agentic-sdk/src/services/command/slash-command-listing.ts

@@ -182,7 +182,12 @@ export function createCommandService() {
         }
       }
 
-      const all = [...BUILTIN_COMMANDS, ...userCommands, ...skills];
+      // Deduplicate: user commands and skills override built-ins with same name
+      const byName = new Map<string, CommandInfo>();
+      for (const cmd of [...BUILTIN_COMMANDS, ...userCommands, ...skills]) {
+        byName.set(cmd.name, cmd);
+      }
+      const all = Array.from(byName.values());
       all.sort((a, b) => a.name.localeCompare(b.name));
       return all;
     },

package/scripts/build-test-pm2.sh

@@ -14,7 +14,17 @@ if [[ -n "${HEALTH_URL:-}" ]]; then
 else
   PORT_VALUE="${PORT:-8556}"
   if [[ -f .env ]]; then
-    ENV_PORT="$(grep -E '^PORT=' .env | tail -n1 | cut -d'=' -f2- | tr -d '"' | tr -d "'" || true)"
+    ENV_PORT="$(
+      awk -F '=' '
+        /^[[:space:]]*(export[[:space:]]+)?PORT[[:space:]]*=/ {
+          sub(/^[[:space:]]*(export[[:space:]]+)?PORT[[:space:]]*=[[:space:]]*/, "", $0)
+          gsub(/^[[:space:]]+|[[:space:]]+$/, "", $0)
+          gsub(/^["'"'"']|["'"'"']$/, "", $0)
+          gsub(/\r/, "", $0)
+          print $0
+        }
+      ' .env | tail -n1
+    )"
     if [[ -n "$ENV_PORT" ]]; then
       PORT_VALUE="$ENV_PORT"
     fi
@@ -37,7 +47,7 @@ need_cmd pm2
 need_cmd curl
 
 echo "📦 Building project..."
-$BUILD_CMD
+bash -lc "$BUILD_CMD"
 
 echo "🚀 Starting/Restarting PM2 app: $APP_NAME"
 if pm2 describe "$APP_NAME" >/dev/null 2>&1; then

package/scripts/check-dependencies.sh

@@ -5,9 +5,10 @@ echo "🔍 Checking dependencies for production build..."
 echo ""
 
 # Find all imports from source files
-echo "Scanning imports in src/, server.ts, drizzle.config.ts..."
+echo "Scanning imports in src/, server.ts, next.config.ts..."
 IMPORTS=$(find src -name "*.ts" -o -name "*.tsx" | xargs grep -h "^import.*from ['\"]" | sed -E "s/.*from ['\"]([^'\"\/]+).*/\1/" | sort -u)
-ROOT_IMPORTS=$(grep -h "^import.*from ['\"]" drizzle.config.ts next.config.ts server.ts 2>/dev/null | sed -E "s/.*from ['\"]([^'\"\/]+).*/\1/" | sort -u)
+# Exclude dev-only config files (drizzle.config.ts) — they only run during development
+ROOT_IMPORTS=$(grep -h "^import.*from ['\"]" next.config.ts server.ts 2>/dev/null | sed -E "s/.*from ['\"]([^'\"\/]+).*/\1/" | sort -u)
 
 ALL_IMPORTS=$(echo -e "$IMPORTS\n$ROOT_IMPORTS" | sort -u | grep -v "^\." | grep -v "^@/" | grep -v "^node:")
 

package/scripts/migrate-all-projects.ts

@@ -0,0 +1,287 @@
+#!/usr/bin/env tsx
+/**
+ * Migrate all projects to the current hook template contract.
+ *
+ * What it does:
+ * 1. Sync `minio-pull-sync.ts`, `minio-push-sync.ts`, `.claude/settings.json`
+ * 2. Inject project id into hook scripts (via setupProjectDefaults)
+ * 3. Remove legacy hook env files (`hook.env`, `.env`, `hook.env.example`, `.env.example`)
+ *
+ * Usage:
+ *   pnpm migrate-all-projects           # Dry run
+ *   pnpm migrate-all-projects --force   # Execute migration
+ */
+
+import path from 'path';
+import fs from 'fs/promises';
+import fsSync from 'fs';
+import { db, schema } from '../src/lib/db';
+import { setupProjectDefaults } from '../src/lib/project-utils';
+
+interface ProjectTarget {
+  id: string;
+  name: string;
+  path: string;
+  source: 'db' | 'scan';
+}
+
+interface MigrationResult {
+  projectId: string;
+  projectName: string;
+  projectPath: string;
+  actions: string[];
+  status: 'success' | 'error' | 'skipped' | 'updated';
+  error?: string;
+}
+
+interface MigrationReport {
+  totalProjects: number;
+  processed: number;
+  updated: number;
+  skipped: number;
+  errors: number;
+  results: MigrationResult[];
+}
+
+function inferProjectIdFromDirName(dirName: string): string {
+  const firstDash = dirName.indexOf('-');
+  if (firstDash <= 0) return dirName;
+  return dirName.slice(0, firstDash);
+}
+
+async function getAllProjectTargets(workspaceRoot: string): Promise<ProjectTarget[]> {
+  const dataDir = process.env.DATA_DIR || path.join(workspaceRoot, 'data');
+  const projectsDir = path.join(dataDir, 'projects');
+  const targets = new Map<string, ProjectTarget>();
+
+  const dbProjects = db.select({
+    id: schema.projects.id,
+    name: schema.projects.name,
+    path: schema.projects.path,
+  }).from(schema.projects).all();
+
+  for (const project of dbProjects) {
+    const absPath = path.resolve(project.path);
+    targets.set(absPath, {
+      id: project.id,
+      name: project.name || project.id,
+      path: absPath,
+      source: 'db',
+    });
+  }
+
+  if (fsSync.existsSync(projectsDir)) {
+    const entries = fsSync.readdirSync(projectsDir, { withFileTypes: true });
+    for (const entry of entries) {
+      if (!entry.isDirectory()) continue;
+      const absPath = path.resolve(path.join(projectsDir, entry.name));
+      if (targets.has(absPath)) continue;
+
+      targets.set(absPath, {
+        id: inferProjectIdFromDirName(entry.name),
+        name: entry.name,
+        path: absPath,
+        source: 'scan',
+      });
+    }
+  }
+
+  return [...targets.values()];
+}
+
+async function fileContent(filePath: string): Promise<string> {
+  return fs.readFile(filePath, 'utf-8');
+}
+
+function expectedPullContent(template: string, projectId: string): string {
+  return template.replace(/__PROJECT_ID__/g, projectId);
+}
+
+function expectedPushContent(template: string, projectId: string): string {
+  return template.replace(/__PROJECT_ID__/g, projectId);
+}
+
+async function getProjectDiffs(projectPath: string, projectId: string, workspaceRoot: string): Promise<string[]> {
+  const diffs: string[] = [];
+  const hooksDir = path.join(projectPath, '.claude', 'hooks');
+  const claudeDir = path.join(projectPath, '.claude');
+  const templateDir = path.join(workspaceRoot, 'src', 'hooks', 'template');
+  const templateHooksDir = path.join(templateDir, 'hooks');
+
+  const pullTemplate = await fileContent(path.join(templateHooksDir, 'minio-pull-sync.ts'));
+  const pushTemplate = await fileContent(path.join(templateHooksDir, 'minio-push-sync.ts'));
+  const settingsTemplate = await fileContent(path.join(templateDir, 'settings.json'));
+
+  const expectedPull = expectedPullContent(pullTemplate, projectId);
+  const expectedPush = expectedPushContent(pushTemplate, projectId);
+
+  const pullPath = path.join(hooksDir, 'minio-pull-sync.ts');
+  const pushPath = path.join(hooksDir, 'minio-push-sync.ts');
+  const settingsPath = path.join(claudeDir, 'settings.json');
+
+  if (!fsSync.existsSync(pullPath) || fsSync.readFileSync(pullPath, 'utf-8') !== expectedPull) {
+    diffs.push('sync:minio-pull-sync.ts');
+  }
+  if (!fsSync.existsSync(pushPath) || fsSync.readFileSync(pushPath, 'utf-8') !== expectedPush) {
+    diffs.push('sync:minio-push-sync.ts');
+  }
+  if (!fsSync.existsSync(settingsPath) || fsSync.readFileSync(settingsPath, 'utf-8') !== settingsTemplate) {
+    diffs.push('sync:.claude/settings.json');
+  }
+  for (const legacyName of ['hook.env', '.env', 'hook.env.example', '.env.example']) {
+    if (fsSync.existsSync(path.join(hooksDir, legacyName))) {
+      diffs.push(`remove:${legacyName}`);
+    }
+  }
+
+  return diffs;
+}
+
+async function removeLegacyHookFiles(projectPath: string): Promise<string[]> {
+  const hooksDir = path.join(projectPath, '.claude', 'hooks');
+  const removed: string[] = [];
+  for (const fileName of ['hook.env', '.env', 'hook.env.example', '.env.example']) {
+    const filePath = path.join(hooksDir, fileName);
+    if (!fsSync.existsSync(filePath)) continue;
+    await fs.rm(filePath, { force: true });
+    removed.push(fileName);
+  }
+  return removed;
+}
+
+async function migrateProject(target: ProjectTarget, execute: boolean, workspaceRoot: string): Promise<MigrationResult> {
+  const result: MigrationResult = {
+    projectId: target.id,
+    projectName: target.name,
+    projectPath: target.path,
+    actions: [],
+    status: 'success',
+  };
+
+  try {
+    if (!fsSync.existsSync(target.path)) {
+      result.status = 'skipped';
+      result.actions.push('Path does not exist');
+      return result;
+    }
+
+    const diffs = await getProjectDiffs(target.path, target.id, workspaceRoot);
+    if (diffs.length === 0) {
+      result.status = 'skipped';
+      result.actions.push('No changes needed');
+      return result;
+    }
+
+    if (!execute) {
+      result.status = 'updated';
+      for (const diff of diffs) {
+        result.actions.push(`[DRY RUN] Would ${diff}`);
+      }
+      return result;
+    }
+
+    await setupProjectDefaults(target.path, target.id, workspaceRoot, { useHookTemplate: true });
+    result.actions.push('Synced hook templates + settings');
+
+    const removed = await removeLegacyHookFiles(target.path);
+    for (const fileName of removed) {
+      result.actions.push(`Removed legacy ${fileName}`);
+    }
+
+    result.status = 'updated';
+    return result;
+  } catch (error: any) {
+    result.status = 'error';
+    result.error = error?.message || String(error);
+    result.actions.push(`Failed: ${result.error}`);
+    return result;
+  }
+}
+
+function printReport(report: MigrationReport, execute: boolean): void {
+  console.log('\n' + '='.repeat(80));
+  console.log(`📊 MIGRATION REPORT ${execute ? '(EXECUTED)' : '(DRY RUN)'}`);
+  console.log('='.repeat(80));
+  console.log(`Total projects: ${report.totalProjects}`);
+  console.log(`Processed: ${report.processed}`);
+  console.log(`Updated: ${report.updated}`);
+  console.log(`Skipped: ${report.skipped}`);
+  console.log(`Errors: ${report.errors}`);
+  console.log('='.repeat(80) + '\n');
+
+  for (const result of report.results) {
+    const statusIcon = result.status === 'error'
+      ? '❌'
+      : result.status === 'updated'
+        ? '🔄'
+        : result.status === 'skipped'
+          ? '⏭️'
+          : '✅';
+
+    console.log(`${statusIcon} ${result.projectName} (${result.projectId})`);
+    console.log(`   Path: ${result.projectPath}`);
+    for (const action of result.actions) {
+      console.log(`   - ${action}`);
+    }
+    if (result.error) {
+      console.log(`   Error: ${result.error}`);
+    }
+    console.log('');
+  }
+}
+
+async function main() {
+  const args = process.argv.slice(2);
+  const execute = args.includes('--force');
+  const workspaceRoot = process.env.CLAUDE_WS_USER_CWD || process.cwd();
+
+  console.log('🚀 Starting project migration...');
+  console.log(`Mode: ${execute ? 'EXECUTE' : 'DRY RUN'}`);
+  console.log(`Workspace: ${workspaceRoot}\n`);
+
+  const targets = await getAllProjectTargets(workspaceRoot);
+  if (targets.length === 0) {
+    console.log('No projects found.');
+    return;
+  }
+
+  console.log(`Found ${targets.length} projects to process.\n`);
+
+  const report: MigrationReport = {
+    totalProjects: targets.length,
+    processed: 0,
+    updated: 0,
+    skipped: 0,
+    errors: 0,
+    results: [],
+  };
+
+  for (const target of targets) {
+    const result = await migrateProject(target, execute, workspaceRoot);
+    report.results.push(result);
+    report.processed += 1;
+
+    if (result.status === 'updated') report.updated += 1;
+    if (result.status === 'skipped') report.skipped += 1;
+    if (result.status === 'error') report.errors += 1;
+  }
+
+  printReport(report, execute);
+
+  if (!execute) {
+    console.log('🔎 Dry run completed. Re-run with --force to apply changes.');
+    return;
+  }
+
+  if (report.errors > 0) {
+    console.error(`\n⚠️ Migration completed with ${report.errors} error(s).`);
+    process.exit(1);
+  }
+
+  console.log('\n✅ Migration completed successfully.');
+}
+
+main().catch((error) => {
+  console.error('\n❌ Migration failed with fatal error:', error);
+  process.exit(1);
+});

package/scripts/migrate-existing-projects.ts

@@ -3,10 +3,9 @@
  * Migrate existing projects to current default Claude workspace structure.
  *
  * What it does per project:
- * - Ensures `.claude/hooks` and `.claude/commands` exist
- * - Syncs hook templates (`minio-pull-sync.ts`, `minio-push-sync.ts`)
- * - Ensures `.claude/hooks/.env.example`, `.claude/settings.json`, `.claude/CLAUDE.md`
- * - Creates `.claude/hooks/.env` when missing
+ * - Syncs hook templates (`minio-pull-sync.ts`, `minio-push-sync.ts`) with injected project id
+ * - Syncs `.claude/settings.json` and `.claude/CLAUDE.md` from template
+ * - Removes legacy hook env files (`hook.env`, `.env`, `hook.env.example`, `.env.example`)
  *
  * Usage:
  *   pnpm projects:migrate:defaults
@@ -25,12 +24,26 @@ type ProjectTarget = {
 };
 
 function inferProjectIdFromDirName(dirName: string): string {
-  // Folders may be: "<projectId>" or "<projectId>-<name>"
   const firstDash = dirName.indexOf('-');
   if (firstDash <= 0) return dirName;
   return dirName.slice(0, firstDash);
 }
 
+function removeLegacyHookEnvFiles(projectPath: string): number {
+  const hooksDir = path.join(projectPath, '.claude', 'hooks');
+  const legacyFiles = ['hook.env', '.env', 'hook.env.example', '.env.example'];
+  let removed = 0;
+
+  for (const fileName of legacyFiles) {
+    const filePath = path.join(hooksDir, fileName);
+    if (!fs.existsSync(filePath)) continue;
+    fs.rmSync(filePath, { force: true });
+    removed += 1;
+  }
+
+  return removed;
+}
+
 async function run(): Promise<void> {
   const workspaceRoot = process.env.CLAUDE_WS_USER_CWD || process.cwd();
   config({ path: path.join(workspaceRoot, '.env') });
@@ -40,7 +53,6 @@ async function run(): Promise<void> {
 
   const targets = new Map<string, ProjectTarget>();
 
-  // 1) Projects tracked in DB
   const dbProjects = db.select({
     id: schema.projects.id,
     path: schema.projects.path,
@@ -54,7 +66,6 @@ async function run(): Promise<void> {
     });
   }
 
-  // 2) Extra dirs under data/projects not present in DB
   if (fs.existsSync(projectsDir)) {
     const entries = fs.readdirSync(projectsDir, { withFileTypes: true });
     for (const entry of entries) {
@@ -79,6 +90,7 @@ async function run(): Promise<void> {
   let ok = 0;
   let skipped = 0;
   let failed = 0;
+  let legacyRemoved = 0;
 
   for (const target of targets.values()) {
     try {
@@ -88,7 +100,9 @@ async function run(): Promise<void> {
         continue;
       }
 
-      await setupProjectDefaults(target.projectPath, target.id, workspaceRoot);
+      await setupProjectDefaults(target.projectPath, target.id, workspaceRoot, { useHookTemplate: true });
+      legacyRemoved += removeLegacyHookEnvFiles(target.projectPath);
+
       console.log(`[projects:migrate:defaults] OK ${target.source} id=${target.id} path=${target.projectPath}`);
       ok++;
     } catch (error) {
@@ -97,7 +111,7 @@ async function run(): Promise<void> {
     }
   }
 
-  console.log(`[projects:migrate:defaults] Done. ok=${ok} skipped=${skipped} failed=${failed}`);
+  console.log(`[projects:migrate:defaults] Done. ok=${ok} skipped=${skipped} failed=${failed} legacyRemoved=${legacyRemoved}`);
   if (failed > 0) process.exit(1);
 }
 

package/server.ts

@@ -155,6 +155,10 @@ app.prepare().then(async () => {
     // Keep connections alive through Cloudflare Tunnel (100s idle timeout)
     pingInterval: 10000,
     pingTimeout: 10000,
+    // Compress WebSocket messages — terminal output is highly compressible text
+    perMessageDeflate: {
+      threshold: 256, // only compress messages larger than 256 bytes
+    },
   });
 
   // Restore autopilot state from DB (needs io for worker callbacks)
@@ -1040,8 +1044,25 @@ app.prepare().then(async () => {
   // Terminal Manager Event Handlers
   // ========================================
 
+  // Batch rapid PTY output bursts into single socket messages (~16ms window).
+  // Reduces message count significantly for high-throughput commands (ls, cat, etc.)
+  const terminalOutputBuffers = new Map<string, string>();
+  let terminalOutputFlushTimer: ReturnType<typeof setTimeout> | null = null;
+
+  function flushTerminalOutputBuffers() {
+    terminalOutputFlushTimer = null;
+    for (const [terminalId, buffered] of terminalOutputBuffers) {
+      io.to(`terminal:${terminalId}`).emit('terminal:output', { terminalId, data: buffered });
+    }
+    terminalOutputBuffers.clear();
+  }
+
   terminalManager.on('output', ({ terminalId, data }) => {
-    io.to(`terminal:${terminalId}`).emit('terminal:output', { terminalId, data });
+    const existing = terminalOutputBuffers.get(terminalId) || '';
+    terminalOutputBuffers.set(terminalId, existing + data);
+    if (!terminalOutputFlushTimer) {
+      terminalOutputFlushTimer = setTimeout(flushTerminalOutputBuffers, 16);
+    }
   });
 
   terminalManager.on('exit', ({ terminalId, exitCode, signal }) => {

package/src/app/api/attempts/route.ts

@@ -18,8 +18,9 @@ function getOrchestrator() {
     sessionManager,
     startAgent: (params) => agentManager.start(params),
     defaultBasePath: process.env.CLAUDE_WS_USER_CWD || /* turbopackIgnore: true */ process.cwd(),
-    onProjectForceCreated: async (project) => {
-      await setupProjectDefaults(project.path, project.id);
+    onProjectForceCreated: async (project, input) => {
+      const shouldUseHookTemplate = typeof input?.use_hook_template === 'boolean' ? input.use_hook_template : true;
+      await setupProjectDefaults(project.path, project.id, process.cwd(), { useHookTemplate: shouldUseHookTemplate });
     },
   });
 }

package/src/app/api/projects/route.ts

@@ -17,9 +17,14 @@ export async function GET() {
 // POST /api/projects - Create a new project
 export async function POST(request: NextRequest) {
   try {
-    const { id, name, path, projectId } = await request.json();
+    const { id, name, path, projectId, useHookTemplate, use_hook_template } = await request.json();
     const project = await projectService.createProject({ id: projectId || id, name, path });
-    await setupProjectDefaults(project.path, project.id);
+    const shouldUseHookTemplate = typeof useHookTemplate === 'boolean'
+      ? useHookTemplate
+      : typeof use_hook_template === 'boolean'
+        ? use_hook_template
+        : true;
+    await setupProjectDefaults(project.path, project.id, process.cwd(), { useHookTemplate: shouldUseHookTemplate });
     return NextResponse.json(project, { status: 201 });
   } catch (error: any) {
     if (error instanceof ProjectValidationError) {

package/src/components/claude/tool-use-block-write-diff-renderer.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { DiffView } from '@/components/claude/diff-view';
+
+interface WriteBlockProps {
+  input: any;
+  result?: string;
+  isError?: boolean;
+}
+
+/** Renders a Write tool invocation as a diff view (shows new file content) */
+export function WriteBlock({ input, result: _result, isError: _isError }: WriteBlockProps) {
+  if (!input?.content) {
+    return null;
+  }
+
+  return (
+    <DiffView
+      oldText=""
+      newText={input.content}
+      filePath={input.file_path}
+    />
+  );
+}

package/src/components/claude/tool-use-block.tsx

@@ -11,6 +11,7 @@ import { getToolIcon, getToolActiveVerb, getToolDisplay, getResultSummary } from
 import { BashBlock } from './tool-use-block-bash-command-renderer';
 import { TodoListBlock, type TodoItem } from './tool-use-block-todo-list-renderer';
 import { EditBlock } from './tool-use-block-edit-diff-renderer';
+import { WriteBlock } from './tool-use-block-write-diff-renderer';
 import { AgentSpawnedCard } from './agent-spawned-card';
 
 interface ToolUseBlockProps {
@@ -57,13 +58,15 @@ export const ToolUseBlock = memo(function ToolUseBlock({ name, id, input, result
   // Determine if we have special display modes
   const isBash = name === 'Bash';
   const isEdit = name === 'Edit';
+  const isWrite = name === 'Write';
   const isTodoWrite = name === 'TodoWrite';
   const isAskUserQuestion = name === 'AskUserQuestion';
   const hasEditDiff = isEdit && Boolean(inputObj?.old_string) && Boolean(inputObj?.new_string);
+  const hasWriteContent = isWrite && Boolean(inputObj?.content);
   const hasTodos = isTodoWrite && Array.isArray(inputObj?.todos) && (inputObj.todos as TodoItem[]).length > 0;
 
-  // For bash, edit with diff, and todo list, we show expanded content differently
-  const showSpecialView = isBash || hasEditDiff || hasTodos;
+  // For bash, edit with diff, write with content, and todo list, we show expanded content differently
+  const showSpecialView = isBash || hasEditDiff || hasWriteContent || hasTodos;
 
   // For other tools, check if we have expandable details
   const hasOtherDetails = !showSpecialView && Boolean(result || (inputObj && Object.keys(inputObj).length > 1));
@@ -166,6 +169,13 @@ export const ToolUseBlock = memo(function ToolUseBlock({ name, id, input, result
         </div>
       )}
 
+      {/* Special view for Write with diff */}
+      {hasWriteContent && (
+        <div className="mt-1.5 ml-5 w-full max-w-full overflow-hidden pr-5">
+          <WriteBlock input={inputObj} result={result} isError={isError} />
+        </div>
+      )}
+
       {/* Special view for TodoWrite */}
       {hasTodos && (
         <div className="mt-1.5 ml-5 w-full max-w-full overflow-hidden pr-5">