workgraph 0.0.5 → 0.0.7

package/README.md

@@ -1,6 +1,10 @@
-# workgraph
-
-Workspace dependency analyzer and parallel build orchestrator for npm/yarn/pnpm monorepos.
+<div align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="assets/logo-dark.png">
+    <source media="(prefers-color-scheme: light)" srcset="assets/logo.png">
+    <img src="assets/logo.png" alt="workgraph Logo" width="500">
+  </picture>
+</div>
 
 ## Features
 
@@ -12,16 +16,17 @@ Workspace dependency analyzer and parallel build orchestrator for npm/yarn/pnpm
 - **Dev Server Management** - Start and manage multiple dev servers with prefixed output
 - **Concurrent Execution** - Executes builds with configurable concurrency limits
 - **Source Generation** - Automatically run code generators for missing/generated sources
+- **Terminal UI** - Split-screen interface with tasks panel, build logs, and task output
+
+## Usage
 
-## Installation
+Run directly with npx:
 
 ```bash
-npm install -g workgraph
-# or
-npm install -D workgraph
+npx workgraph <command>
 ```
 
-## CLI Usage
+## CLI Commands
 
 ### Analyze Dependencies
 
@@ -160,17 +165,35 @@ workgraph watch --dry-run
 workgraph watch --filter 'libs/*' api web
 ```
 
-Output:
+### Terminal UI
+
+Watch mode displays a 3-panel terminal interface:
+
+```
+┌─ Tasks ─────┬─ Workgraph ──────────────┬─ Task Output ──────────────┐
+│ ● api 12345 │ [14:32:01] Watching...   │ [api] Server started       │
+│ ● web 12346 │ [14:32:05] Building auth │ [web] Compiled successfully│
+│ ○ build:auth│ [14:32:06] auth: done    │                            │
+└─────────────┴──────────────────────────┴────────────────────────────┘
 ```
-Starting dev server: @myorg/api
-Starting dev server: @myorg/web
 
-Watching 7 projects for changes...
-Building only projects matching: libs/* (4 projects)
-Press Ctrl+C to stop
+**Panels:**
+- **Tasks** - Running processes with status icons and PIDs
+- **Workgraph** - Build logs with timestamps
+- **Task Output** - Dev server and build output
 
-[api] [Nest] Starting Nest application...
-[web] ➜ Local: http://localhost:3000
+**Task Status Icons:**
+- `●` green - Running
+- `○` gray - Stopped
+- `✖` red - Error
+
+**Navigation:**
+- `Tab` - Switch focus between panels
+- `Ctrl+C` - Stop all processes and exit
+
+To disable the UI and use plain console output:
+```bash
+workgraph watch --no-ui
 ```
 
 ## CLI Options
@@ -179,10 +202,12 @@ Press Ctrl+C to stop
 |--------|-------------|---------|
 | `-r, --root <path>` | Workspace root directory | `process.cwd()` |
 | `-c, --changed <projects...>` | Changed projects (names or paths) | `[]` |
-| `--concurrency <number>` | Max parallel builds | CPU count - 1 |
+| `--concurrency <number>` | Max parallel builds | `4` |
 | `--debounce <ms>` | Debounce time for watch mode | `200` |
 | `--dry-run` | Show plan without executing | `false` |
 | `--filter <pattern>` | Only build projects matching pattern (e.g., `libs/*`) | - |
+| `--no-ui` | Disable split-screen terminal UI (watch mode) | `false` |
+| `--verbose` | Show detailed watcher output | `false` |
 
 ## Source Generation
 
@@ -196,15 +221,41 @@ Add `workgraph.sources` to your root `package.json`:
 {
   "workgraph": {
     "sources": {
-      "apps/web-angular/src/generated": "npx exposify-codegen api -o ./apps/web-angular/src/generated"
+      "apps/web-angular/src/generated": {
+        "command": "npx exposify-codegen api --output ./apps/web-angular/src/generated --target angular",
+        "deps": ["api"]
+      },
+      "apps/web-preact/src/generated": {
+        "command": "npx exposify-codegen api --output ./apps/web-preact/src/generated --target preact",
+        "deps": ["api"]
+      }
     }
   }
 }
 ```
 
+You can also use the shorthand string format for simple generators:
+
+```json
+{
+  "workgraph": {
+    "sources": {
+      "libs/types/src/generated": "npx generate-types"
+    }
+  }
+}
+```
+
+### Configuration Options
+
+| Field | Description |
+|-------|-------------|
+| `command` | The shell command to run for generation |
+| `deps` | Array of project names/paths that trigger this generator when changed |
+
 ### How It Works
 
-1. When `build` or `watch` runs, workgraph checks if any affected project uses a configured source path
+1. When `build` or `watch` runs, workgraph checks if any affected project matches a generator's `deps`
 2. If so, the source generation command runs **before** the build
 3. This ensures generated code is up-to-date before compilation
 

package/dist/cli.js

@@ -44,14 +44,15 @@ const planner_1 = require("./planner");
 const watcher_1 = require("./watcher");
 const executor_1 = require("./executor");
 const source_scanner_1 = require("./source-scanner");
+const ui_1 = require("./ui");
 function normalizeSourceConfig(config) {
     if (typeof config === 'string') {
-        return { command: config };
+        return { command: config, deps: [] };
     }
     return config;
 }
 function shouldRunGenerator(sourcePath, sourceConfig, affectedProjects, projects, root) {
-    if (sourceConfig.deps && sourceConfig.deps.length > 0) {
+    if (sourceConfig.deps.length > 0) {
         for (const dep of sourceConfig.deps) {
             if (affectedProjects.has(dep)) {
                 return true;
@@ -78,18 +79,25 @@ function shouldRunGenerator(sourcePath, sourceConfig, affectedProjects, projects
     }
     return false;
 }
-async function runSourceGenerators(root, affectedProjects, projects, dryRun = false) {
+async function runSourceGeneratorsWithUI(root, affectedProjects, projects, dryRun = false, callbacks = {
+    log: (msg) => console.log(`[${(0, watcher_1.formatTimestamp)()}] ${msg}`),
+    taskLog: console.log,
+    addTask: () => { },
+    updateTask: () => { },
+}) {
+    const { log, taskLog, addTask, updateTask } = callbacks;
     const config = (0, source_scanner_1.loadWorkgraphConfig)(root);
-    const sources = config.sources || {};
+    const sources = config.sources;
     const generated = [];
     for (const [sourcePath, rawConfig] of Object.entries(sources)) {
         const sourceConfig = normalizeSourceConfig(rawConfig);
         if (!shouldRunGenerator(sourcePath, sourceConfig, affectedProjects, projects, root)) {
             continue;
         }
-        console.log(`[${(0, watcher_1.formatTimestamp)()}] Generating: ${sourcePath}`);
+        const taskId = `gen-${sourcePath}`;
+        log(`Generating: ${sourcePath}`);
+        taskLog(`\x1b[33m$ ${sourceConfig.command}\x1b[0m`);
         if (dryRun) {
-            console.log(`[${(0, watcher_1.formatTimestamp)()}]   [dry-run] Would run: ${sourceConfig.command}`);
             generated.push(sourcePath);
             continue;
         }
@@ -100,28 +108,46 @@ async function runSourceGenerators(root, affectedProjects, projects, dryRun = fa
                     shell: true,
                     stdio: 'pipe',
                 });
+                if (proc.pid) {
+                    addTask({ id: taskId, name: `gen:${sourcePath}`, pid: proc.pid, status: 'running' });
+                }
                 let output = '';
-                proc.stdout?.on('data', (data) => (output += data));
-                proc.stderr?.on('data', (data) => (output += data));
+                proc.stdout?.on('data', (data) => {
+                    const text = data.toString();
+                    output += text;
+                    text.split('\n').forEach((line) => {
+                        if (line.trim())
+                            taskLog(line);
+                    });
+                });
+                proc.stderr?.on('data', (data) => {
+                    const text = data.toString();
+                    output += text;
+                    text.split('\n').forEach((line) => {
+                        if (line.trim())
+                            taskLog(line);
+                    });
+                });
                 proc.on('close', (code) => {
+                    updateTask(taskId, code === 0 ? 'stopped' : 'error');
                     resolve({ success: code === 0, output });
                 });
                 proc.on('error', (err) => {
+                    updateTask(taskId, 'error');
                     resolve({ success: false, output: err.message });
                 });
             });
             if (result.success) {
-                console.log(`[${(0, watcher_1.formatTimestamp)()}]   Generated successfully`);
+                log('Generated successfully');
                 generated.push(sourcePath);
             }
             else {
-                console.error(`[${(0, watcher_1.formatTimestamp)()}]   Generation FAILED`);
-                console.error(result.output);
+                log('Generation FAILED');
                 return { success: false, generated };
             }
         }
         catch (error) {
-            console.error(`[${(0, watcher_1.formatTimestamp)()}]   Generation FAILED: ${error.message}`);
+            log(`Generation FAILED: ${error.message}`);
             return { success: false, generated };
         }
     }
@@ -179,6 +205,8 @@ program
             const config = (0, source_scanner_1.loadWorkgraphConfig)(root);
             for (const sourcePath of result.configuredSources) {
                 const sourceConfig = config.sources[sourcePath];
+                if (!sourceConfig)
+                    continue;
                 const command = typeof sourceConfig === 'string' ? sourceConfig : sourceConfig.command;
                 console.log(`  ${sourcePath}`);
                 console.log(`    -> ${command}`);
@@ -242,7 +270,11 @@ program
     .option('-c, --changed <projects...>', 'Changed projects (names or paths)', [])
     .option('--concurrency <number>', 'Max parallel builds', String(4))
     .option('--dry-run', 'Show what would be built without executing')
-    .action(async (options) => {
+    .action(async (rawOptions) => {
+    const options = {
+        ...rawOptions,
+        dryRun: rawOptions.dryRun === true,
+    };
     try {
         const root = path.resolve(options.root);
         const projects = await (0, workspace_1.loadWorkspaceProjects)(root);
@@ -267,7 +299,7 @@ program
             console.log('Nothing to build');
             return;
         }
-        const sourceResult = await runSourceGenerators(root, affected, projects, options.dryRun);
+        const sourceResult = await runSourceGeneratorsWithUI(root, affected, projects, options.dryRun);
         if (!sourceResult.success) {
             console.error('Source generation failed, aborting build');
             process.exit(1);
@@ -282,11 +314,11 @@ program
                 const mode = info.isParallel ? 'parallel' : 'sequential';
                 console.log(`[${(0, watcher_1.formatTimestamp)()}] Building: ${info.project} (wave ${info.wave}/${info.totalWaves} ${mode}, step ${info.step}/${info.totalSteps})`);
             },
-            onComplete: (result) => {
-                const status = result.success ? 'done' : 'FAILED';
-                console.log(`[${(0, watcher_1.formatTimestamp)()}] ${result.project}: ${status} (${result.duration}ms)`);
-                if (!result.success && result.error) {
-                    console.error(result.error);
+            onComplete: (buildResult) => {
+                const status = buildResult.success ? 'done' : 'FAILED';
+                console.log(`[${(0, watcher_1.formatTimestamp)()}] ${buildResult.project}: ${status} (${buildResult.duration}ms)`);
+                if (!buildResult.success && buildResult.error) {
+                    console.error(buildResult.error);
                 }
             },
         });
@@ -314,7 +346,14 @@ program
     .option('--dry-run', 'Show what would be built without executing')
     .option('--filter <pattern>', 'Only build projects matching pattern (e.g., "libs/*")')
     .option('--verbose', 'Show detailed watcher and build output')
-    .action(async (apps, options) => {
+    .option('--no-ui', 'Disable split-screen UI')
+    .action(async (apps, rawOptions) => {
+    const options = {
+        ...rawOptions,
+        dryRun: rawOptions.dryRun === true,
+        filter: rawOptions.filter !== undefined ? rawOptions.filter : '',
+        verbose: rawOptions.verbose === true,
+    };
     try {
         const root = path.resolve(options.root);
         const projects = await (0, workspace_1.loadWorkspaceProjects)(root);
@@ -324,7 +363,52 @@ program
             console.error('Cannot watch: cycles detected in dependency graph');
             process.exit(1);
         }
+        const ui = options.ui !== false ? (0, ui_1.createUI)() : null;
+        const log = ui ? ui.log : (msg) => console.log(`[${(0, watcher_1.formatTimestamp)()}] ${msg}`);
+        const logRaw = ui ? (msg) => ui.leftPane.log(msg) : (msg) => console.log(msg);
+        const taskLog = ui ? ui.taskLog : (msg) => console.log(msg);
+        const setStatus = ui ? ui.setStatus : () => { };
+        const addTask = ui ? ui.addTask : () => { };
+        const updateTask = ui ? ui.updateTask : () => { };
+        const updateTaskPort = ui ? ui.updateTaskPort : () => { };
         const devProcesses = [];
+        const cleanup = () => {
+            if (ui) {
+                ui.destroy();
+            }
+            const dim = '\x1b[2m';
+            const green = '\x1b[32m';
+            const red = '\x1b[31m';
+            const reset = '\x1b[0m';
+            process.stdout.write('\x1b[2J\x1b[H');
+            const output = [''];
+            if (devProcesses.length > 0) {
+                output.push(`${dim}Stopping ${devProcesses.length} dev server(s)${reset}`);
+                for (const { proc, name } of devProcesses) {
+                    if (proc.pid) {
+                        const shortName = name.includes('/') ? name.split('/').pop() : name;
+                        try {
+                            process.kill(-proc.pid, 'SIGKILL');
+                            output.push(`  ${green}✓${reset} ${shortName}`);
+                        }
+                        catch {
+                            try {
+                                process.kill(proc.pid, 'SIGKILL');
+                                output.push(`  ${green}✓${reset} ${shortName}`);
+                            }
+                            catch {
+                                output.push(`  ${red}✗${reset} ${shortName} ${dim}(already stopped)${reset}`);
+                            }
+                        }
+                    }
+                }
+            }
+            output.push('');
+            process.stdout.write(output.join('\n'));
+            process.exit(0);
+        };
+        process.on('SIGINT', cleanup);
+        process.on('SIGTERM', cleanup);
         if (apps.length > 0) {
             const resolvedApps = (0, affected_1.resolveProjectNames)(apps, graph);
             if (resolvedApps.size === 0) {
@@ -333,17 +417,17 @@ program
             }
             const depsToBuilt = new Set();
             for (const appName of resolvedApps) {
-                const appDeps = graph.deps.get(appName) || new Set();
+                const appDeps = graph.deps.get(appName) ?? new Set();
                 for (const dep of appDeps) {
                     depsToBuilt.add(dep);
-                    const transitiveDeps = graph.deps.get(dep) || new Set();
+                    const transitiveDeps = graph.deps.get(dep) ?? new Set();
                     for (const td of transitiveDeps) {
                         depsToBuilt.add(td);
                     }
                 }
             }
             if (depsToBuilt.size > 0) {
-                console.log(`Building ${depsToBuilt.size} dependencies first...\n`);
+                log(`Building ${depsToBuilt.size} dependencies first...`);
                 const plan = (0, planner_1.createBuildPlan)(depsToBuilt, graph.deps);
                 if (plan.waves.length > 0) {
                     const result = await (0, executor_1.executePlan)(plan.waves, projects, root, {
@@ -351,74 +435,90 @@ program
                         dryRun: options.dryRun,
                         onStart: (info) => {
                             const mode = info.isParallel ? 'parallel' : 'sequential';
-                            console.log(`[${(0, watcher_1.formatTimestamp)()}] Building: ${info.project} (wave ${info.wave}/${info.totalWaves} ${mode}, step ${info.step}/${info.totalSteps})`);
+                            log(`Building: ${info.project} (wave ${info.wave}/${info.totalWaves} ${mode}, step ${info.step}/${info.totalSteps})`);
+                            const shortName = info.project.includes('/') ? info.project.split('/').pop() : info.project;
+                            addTask({ id: `build-${info.project}`, name: `build:${shortName}`, pid: 0, status: 'running' });
                         },
                         onComplete: (buildResult) => {
                             const status = buildResult.success ? 'done' : 'FAILED';
-                            console.log(`[${(0, watcher_1.formatTimestamp)()}] ${buildResult.project}: ${status} (${buildResult.duration}ms)`);
+                            log(`${buildResult.project}: ${status} (${buildResult.duration}ms)`);
+                            updateTask(`build-${buildResult.project}`, buildResult.success ? 'stopped' : 'error');
                             if (!buildResult.success && buildResult.error) {
-                                console.error(buildResult.error);
+                                taskLog(buildResult.error);
                             }
                         },
+                        onOutput: taskLog,
                     });
                     if (result.success) {
-                        console.log(`[${(0, watcher_1.formatTimestamp)()}] Dependencies built successfully\n`);
+                        log('Dependencies built successfully');
                     }
                     else {
-                        console.error(`[${(0, watcher_1.formatTimestamp)()}] Dependency build had errors, continuing anyway...\n`);
+                        log('Dependency build had errors, continuing anyway...');
                     }
                 }
             }
             const affected = new Set([...resolvedApps, ...depsToBuilt]);
-            const sourceResult = await runSourceGenerators(root, affected, projects, options.dryRun);
+            const sourceResult = await runSourceGeneratorsWithUI(root, affected, projects, options.dryRun, { log, taskLog, addTask, updateTask });
             if (!sourceResult.success) {
-                console.error('Source generation failed, continuing anyway...');
+                log('Source generation failed, continuing anyway...');
             }
             for (const appName of resolvedApps) {
                 const project = projects.get(appName);
                 if (!project)
                     continue;
-                const hasDevScript = project.packageJson.scripts?.dev;
+                const hasDevScript = project.packageJson.scripts['dev'];
                 if (!hasDevScript) {
-                    console.warn(`Warning: ${appName} has no dev script, skipping`);
+                    log(`Warning: ${appName} has no dev script, skipping`);
                     continue;
                 }
-                console.log(`Starting dev server: ${appName}`);
+                const devCmd = `npm run dev -w ${appName}`;
+                log(`Starting dev server: ${appName}`);
+                taskLog(`\x1b[33m$ ${devCmd}\x1b[0m`);
                 const proc = (0, child_process_1.spawn)('npm', ['run', 'dev', '-w', appName], {
                     cwd: root,
                     stdio: ['ignore', 'pipe', 'pipe'],
-                    shell: true,
+                    detached: true,
                 });
                 const shortName = appName.includes('/') ? appName.split('/').pop() : appName;
                 const prefix = `[${shortName}]`;
-                const stripClearCodes = (text) => text.replace(/\x1b\[[0-9]*J|\x1b\[[0-9]*H|\x1bc/g, '');
+                const taskId = `dev-${appName}`;
+                if (!proc.pid) {
+                    throw new Error(`Failed to start dev server for ${appName}: no pid`);
+                }
+                addTask({ id: taskId, name: shortName ?? appName, pid: proc.pid, status: 'running' });
+                const ESC = '\x1b';
+                const clearRegex = new RegExp(`${ESC}\\[\\d*J|${ESC}\\[\\d*H|${ESC}c`, 'g');
+                const stripClearCodes = (text) => text.replace(clearRegex, '');
                 proc.stdout?.on('data', (data) => {
                     const lines = stripClearCodes(data.toString()).trim().split('\n');
                     for (const line of lines) {
-                        if (line)
-                            console.log(`${prefix} ${line}`);
+                        if (line) {
+                            taskLog(`${prefix} ${line}`);
+                            const port = (0, ui_1.detectPort)(line);
+                            if (port > 0) {
+                                updateTaskPort(taskId, port);
+                            }
+                        }
                     }
                 });
                 proc.stderr?.on('data', (data) => {
                     const lines = stripClearCodes(data.toString()).trim().split('\n');
                     for (const line of lines) {
-                        if (line)
-                            console.error(`${prefix} ${line}`);
+                        if (line) {
+                            taskLog(`${prefix} ${line}`);
+                            const port = (0, ui_1.detectPort)(line);
+                            if (port > 0) {
+                                updateTaskPort(taskId, port);
+                            }
+                        }
                     }
                 });
                 proc.on('close', (code) => {
-                    console.log(`${prefix} exited with code ${code}`);
+                    log(`${prefix} exited with code ${code}`);
+                    updateTask(taskId, code === 0 ? 'stopped' : 'error');
                 });
-                devProcesses.push(proc);
+                devProcesses.push({ proc, name: appName, command: devCmd });
             }
-            const cleanup = () => {
-                for (const proc of devProcesses) {
-                    proc.kill();
-                }
-                process.exit(0);
-            };
-            process.on('SIGINT', cleanup);
-            process.on('SIGTERM', cleanup);
             console.log();
         }
         const filterPattern = options.filter;
@@ -437,14 +537,15 @@ program
         const filteredCount = filterPattern
             ? [...projects.keys()].filter(matchesFilter).length
             : projects.size;
-        console.log(`Watching ${projects.size} projects for changes...`);
+        log(`Watching ${projects.size} projects for changes...`);
         if (filterPattern) {
-            console.log(`Building only projects matching: ${filterPattern} (${filteredCount} projects)`);
+            log(`Building only projects matching: ${filterPattern} (${filteredCount} projects)`);
         }
-        console.log('Press Ctrl+C to stop\n');
+        log('Press Ctrl+C to stop');
         let isBuilding = false;
         let pendingChanges = null;
-        const handleChanges = async (changedProjects) => {
+        let buildCount = 0;
+        const handleChanges = async (changedProjects, changedFiles) => {
             if (isBuilding) {
                 pendingChanges = pendingChanges || new Set();
                 for (const p of changedProjects) {
@@ -453,42 +554,90 @@ program
                 return;
             }
             isBuilding = true;
-            console.log(`[${(0, watcher_1.formatTimestamp)()}] Changes detected: ${[...changedProjects].join(', ')}`);
+            log('Changes detected:');
+            if (changedFiles) {
+                for (const [project, files] of changedFiles) {
+                    for (const file of files) {
+                        const relativePath = file.replace(root + '/', '');
+                        logRaw(`  ${relativePath} (${project})`);
+                    }
+                }
+            }
+            else {
+                logRaw(`  ${[...changedProjects].join(', ')} (pending)`);
+            }
             const affected = (0, affected_1.getAffectedProjects)(changedProjects, graph.rdeps);
             const filteredAffected = new Set([...affected].filter(matchesFilter));
             if (filteredAffected.size === 0) {
-                console.log(`[${(0, watcher_1.formatTimestamp)()}] No matching projects to build\n`);
+                log('No matching projects to build');
                 isBuilding = false;
                 return;
             }
+            buildCount++;
+            setStatus(`build #${buildCount}`);
+            logRaw('');
             const plan = (0, planner_1.createBuildPlan)(filteredAffected, graph.deps);
-            const sourceResult = await runSourceGenerators(root, affected, projects, options.dryRun);
+            const totalSteps = plan.waves.reduce((sum, w) => sum + w.length, 0);
+            logRaw('Affected dependencies:');
+            for (const proj of [...filteredAffected].sort((a, b) => a.localeCompare(b))) {
+                const deps = graph.deps.get(proj) ?? new Set();
+                const affectedDeps = [...deps].filter(d => filteredAffected.has(d));
+                if (affectedDeps.length > 0) {
+                    logRaw(`  ${proj} -> ${affectedDeps.join(', ')}`);
+                }
+                else {
+                    logRaw(`  ${proj} (no affected dependencies)`);
+                }
+            }
+            logRaw('Compilation plan:');
+            let stepCounter = 0;
+            for (let i = 0; i < plan.waves.length; i++) {
+                const wave = plan.waves[i];
+                const mode = wave.length > 1 ? 'parallel' : 'sequential';
+                for (const proj of wave) {
+                    stepCounter++;
+                    logRaw(`  [${stepCounter}/${totalSteps}] ${proj} (wave ${i + 1}/${plan.waves.length}, ${mode})`);
+                }
+            }
+            logRaw('');
+            const sourceResult = await runSourceGeneratorsWithUI(root, affected, projects, options.dryRun, { log, taskLog, addTask, updateTask });
             if (!sourceResult.success) {
-                console.error(`[${(0, watcher_1.formatTimestamp)()}] Source generation failed\n`);
+                log('Source generation failed');
+                setStatus(`build #${buildCount} FAILED`);
                 isBuilding = false;
                 return;
             }
-            console.log(`[${(0, watcher_1.formatTimestamp)()}] Building: ${[...filteredAffected].join(', ')}`);
+            log(`Building: ${[...filteredAffected].join(', ')}`);
             if (plan.waves.length > 0) {
                 const result = await (0, executor_1.executePlan)(plan.waves, projects, root, {
                     concurrency: parseInt(options.concurrency, 10),
                     dryRun: options.dryRun,
                     onStart: (info) => {
                         const mode = info.isParallel ? 'parallel' : 'sequential';
-                        console.log(`[${(0, watcher_1.formatTimestamp)()}] Building: ${info.project} (wave ${info.wave}/${info.totalWaves} ${mode}, step ${info.step}/${info.totalSteps})`);
+                        log(`Building: ${info.project} (wave ${info.wave}/${info.totalWaves} ${mode}, step ${info.step}/${info.totalSteps})`);
+                        const shortName = info.project.includes('/') ? info.project.split('/').pop() : info.project;
+                        addTask({ id: `build-${info.project}`, name: `build:${shortName}`, pid: 0, status: 'running' });
                     },
+                    onOutput: taskLog,
                     onComplete: (buildResult) => {
                         const status = buildResult.success ? 'done' : 'FAILED';
-                        console.log(`[${(0, watcher_1.formatTimestamp)()}] ${buildResult.project}: ${status} (${buildResult.duration}ms)`);
+                        log(`${buildResult.project}: ${status} (${buildResult.duration}ms)`);
+                        updateTask(`build-${buildResult.project}`, buildResult.success ? 'stopped' : 'error');
                     },
                 });
                 if (result.success) {
-                    console.log(`[${(0, watcher_1.formatTimestamp)()}] Build complete\n`);
+                    setStatus(`build #${buildCount} done`);
+                    log('Build complete');
                 }
                 else {
-                    console.error(`[${(0, watcher_1.formatTimestamp)()}] Build failed\n`);
+                    setStatus(`build #${buildCount} FAILED`);
+                    log('Build failed');
                 }
             }
+            else {
+                setStatus(`build #${buildCount} done`);
+                log('Build complete');
+            }
             isBuilding = false;
             if (pendingChanges && pendingChanges.size > 0) {
                 const next = pendingChanges;
@@ -497,18 +646,19 @@ program
             }
         };
         const config = (0, source_scanner_1.loadWorkgraphConfig)(root);
-        const sourcePaths = Object.keys(config.sources || {}).map(p => `**/${p}/**`);
+        const sourcePaths = Object.keys(config.sources).map(p => `**/${p}/**`);
         if (sourcePaths.length > 0) {
-            console.log('Ignoring generated source paths (to prevent rebuild loops):');
+            log('Ignoring generated source paths (to prevent rebuild loops):');
             for (const p of sourcePaths) {
-                console.log(`  ${p}`);
+                logRaw(`  ${p}`);
             }
-            console.log();
         }
         (0, watcher_1.createWatcher)({
             root,
             debounceMs: parseInt(options.debounce, 10),
-            onChange: handleChanges,
+            onChange: (changedProjects, changedFiles) => {
+                void handleChanges(changedProjects, changedFiles);
+            },
             ignorePatterns: sourcePaths,
             verbose: options.verbose,
         }, projects);