@agent-canvas/cli 0.8.0 → 0.9.0

package/dist/index.js

@@ -1,13 +1,31 @@
 import { Command } from 'commander';
-import { writeFileSync } from 'node:fs';
-import { encode as toToon } from '@toon-format/toon';
 import { start } from './commands/start.js';
-import { connectToCanvas, generateId } from './lib/ws-client.js';
+import { load, defaultDeps as loadDeps } from './commands/load.js';
+import { addImage, defaultDeps as addImageDeps } from './commands/add-image.js';
+import { addShape, defaultDeps as addShapeDeps } from './commands/add-shape.js';
+import { addText, defaultDeps as addTextDeps } from './commands/add-text.js';
+import { addLine, defaultDeps as addLineDeps } from './commands/add-line.js';
+import { addArrow, defaultDeps as addArrowDeps } from './commands/add-arrow.js';
+import { addPolygon, defaultDeps as addPolygonDeps } from './commands/add-polygon.js';
+import { resizeElements, defaultDeps as resizeElementsDeps } from './commands/resize-elements.js';
+import { groupElements, defaultDeps as groupElementsDeps } from './commands/group-elements.js';
+import { ungroupElement, defaultDeps as ungroupElementDeps } from './commands/ungroup-element.js';
+import { deleteElements, defaultDeps as deleteElementsDeps } from './commands/delete-elements.js';
+import { rotateElements, defaultDeps as rotateElementsDeps } from './commands/rotate-elements.js';
+import { moveElements, defaultDeps as moveElementsDeps } from './commands/move-elements.js';
+import { read, defaultDeps as readDeps } from './commands/read.js';
+import { save, defaultDeps as saveDeps } from './commands/save.js';
+import { exportImage, defaultDeps as exportDeps } from './commands/export.js';
+import { clear, defaultDeps as clearDeps } from './commands/clear.js';
+import { list, defaultDeps as listDeps } from './commands/list.js';
+import { newCanvas, defaultDeps as newCanvasDeps } from './commands/new-canvas.js';
+import { useCanvas, defaultDeps as useCanvasDeps } from './commands/use-canvas.js';
+import { renameCanvas, defaultDeps as renameCanvasDeps } from './commands/rename-canvas.js';
 const program = new Command();
 program
     .name('agent-canvas')
     .description('CLI for Agent Canvas - Excalidraw interface for AI agents')
-    .version('0.8.0');
+    .version('0.9.0');
 program
     .command('start')
     .description('Start the canvas server and open in browser')
@@ -18,8 +36,7 @@ program
     .command('load [filepath]')
     .description('Load an .excalidraw file into the current canvas')
     .action(async (filepath) => {
-    const { loadFile } = await import('./commands/start.js');
-    await loadFile(filepath);
+    await load(filepath, loadDeps);
 });
 // ============================================================================
 // Add Shape
@@ -41,8 +58,7 @@ program
     .option('--label-font-size <number>', 'Label font size', parseFloat)
     .option('-n, --note <text>', 'Note for this element (stored in customData)')
     .action(async (options) => {
-    const client = await connectToCanvas();
-    const params = {
+    await addShape({
         type: options.type,
         x: options.x,
         y: options.y,
@@ -53,23 +69,10 @@ program
         strokeWidth: options.strokeWidth,
         strokeStyle: options.strokeStyle,
         fillStyle: options.fillStyle,
-        customData: options.note ? { note: options.note } : undefined,
-    };
-    if (options.label) {
-        params.label = { text: options.label, fontSize: options.labelFontSize };
-    }
-    const result = await client.send({ type: 'addShape', id: generateId(), params });
-    if (result.success) {
-        const dims = result.width !== undefined && result.height !== undefined
-            ? ` x=${result.x} y=${result.y} w=${result.width} h=${result.height}`
-            : '';
-        console.log(`Shape created (id: ${result.elementId}${dims})`);
-    }
-    else {
-        console.error(`Failed: ${result.error}`);
-        process.exit(1);
-    }
-    client.close();
+        label: options.label,
+        labelFontSize: options.labelFontSize,
+        note: options.note,
+    }, addShapeDeps);
 });
 // ============================================================================
 // Add Text
@@ -86,29 +89,16 @@ program
     .option('--stroke-color <color>', 'Text color (hex)')
     .option('-n, --note <text>', 'Note for this element (stored in customData)')
     .action(async (options) => {
-    const client = await connectToCanvas();
-    const result = await client.send({
-        type: 'addText',
-        id: generateId(),
-        params: {
-            text: options.text,
-            x: options.ax,
-            y: options.ay,
-            fontSize: options.fontSize,
-            textAlign: options.textAlign,
-            anchor: options.anchor,
-            strokeColor: options.strokeColor,
-            customData: options.note ? { note: options.note } : undefined,
-        },
-    });
-    if (result.success) {
-        console.log(`Text created (id: ${result.elementId}, x: ${result.x}, y: ${result.y}, ${result.width}x${result.height})`);
-    }
-    else {
-        console.error(`Failed: ${result.error}`);
-        process.exit(1);
-    }
-    client.close();
+    await addText({
+        text: options.text,
+        x: options.ax,
+        y: options.ay,
+        fontSize: options.fontSize,
+        textAlign: options.textAlign,
+        anchor: options.anchor,
+        strokeColor: options.strokeColor,
+        note: options.note,
+    }, addTextDeps);
 });
 // ============================================================================
 // Add Line
@@ -125,29 +115,16 @@ program
     .option('--stroke-style <style>', 'Line style: solid, dashed, or dotted')
     .option('-n, --note <text>', 'Note for this element (stored in customData)')
     .action(async (options) => {
-    const client = await connectToCanvas();
-    const result = await client.send({
-        type: 'addLine',
-        id: generateId(),
-        params: {
-            x: options.x,
-            y: options.y,
-            endX: options.endX,
-            endY: options.endY,
-            strokeColor: options.strokeColor,
-            strokeWidth: options.strokeWidth,
-            strokeStyle: options.strokeStyle,
-            customData: options.note ? { note: options.note } : undefined,
-        },
-    });
-    if (result.success) {
-        console.log(`Line created (id: ${result.elementId})`);
-    }
-    else {
-        console.error(`Failed: ${result.error}`);
-        process.exit(1);
-    }
-    client.close();
+    await addLine({
+        x: options.x,
+        y: options.y,
+        endX: options.endX,
+        endY: options.endY,
+        strokeColor: options.strokeColor,
+        strokeWidth: options.strokeWidth,
+        strokeStyle: options.strokeStyle,
+        note: options.note,
+    }, addLineDeps);
 });
 // ============================================================================
 // Add Arrow
@@ -168,41 +145,20 @@ program
     .option('--via <points>', 'Intermediate points as "x1,y1;x2,y2;..." (absolute coordinates). For round: 1 control point. For elbow: multiple turn points.')
     .option('-n, --note <text>', 'Note for this element (stored in customData)')
     .action(async (options) => {
-    // Parse --via option into midpoints array
-    let midpoints;
-    if (options.via) {
-        midpoints = options.via.split(';').map((pt) => {
-            const [x, y] = pt.split(',').map(Number);
-            return { x, y };
-        });
-    }
-    const client = await connectToCanvas();
-    const result = await client.send({
-        type: 'addArrow',
-        id: generateId(),
-        params: {
-            x: options.x,
-            y: options.y,
-            endX: options.endX,
-            endY: options.endY,
-            strokeColor: options.strokeColor,
-            strokeWidth: options.strokeWidth,
-            strokeStyle: options.strokeStyle,
-            startArrowhead: options.startArrowhead,
-            endArrowhead: options.endArrowhead,
-            arrowType: options.arrowType,
-            midpoints,
-            customData: options.note ? { note: options.note } : undefined,
-        },
-    });
-    if (result.success) {
-        console.log(`Arrow created (id: ${result.elementId})`);
-    }
-    else {
-        console.error(`Failed: ${result.error}`);
-        process.exit(1);
-    }
-    client.close();
+    await addArrow({
+        x: options.x,
+        y: options.y,
+        endX: options.endX,
+        endY: options.endY,
+        strokeColor: options.strokeColor,
+        strokeWidth: options.strokeWidth,
+        strokeStyle: options.strokeStyle,
+        startArrowhead: options.startArrowhead,
+        endArrowhead: options.endArrowhead,
+        arrowType: options.arrowType,
+        via: options.via,
+        note: options.note,
+    }, addArrowDeps);
 });
 // ============================================================================
 // Add Polygon
@@ -218,36 +174,37 @@ program
     .option('--fill-style <style>', 'Fill style: hachure, cross-hatch, solid, or zigzag')
     .option('-n, --note <text>', 'Note for this element (stored in customData)')
     .action(async (options) => {
-    let points;
-    try {
-        points = JSON.parse(options.points);
-    }
-    catch {
-        console.error('Invalid points JSON');
-        process.exit(1);
-    }
-    const client = await connectToCanvas();
-    const result = await client.send({
-        type: 'addPolygon',
-        id: generateId(),
-        params: {
-            points,
-            strokeColor: options.strokeColor,
-            backgroundColor: options.backgroundColor,
-            strokeWidth: options.strokeWidth,
-            strokeStyle: options.strokeStyle,
-            fillStyle: options.fillStyle,
-            customData: options.note ? { note: options.note } : undefined,
-        },
-    });
-    if (result.success) {
-        console.log(`Polygon created (id: ${result.elementId})`);
-    }
-    else {
-        console.error(`Failed: ${result.error}`);
-        process.exit(1);
-    }
-    client.close();
+    await addPolygon({
+        points: options.points,
+        strokeColor: options.strokeColor,
+        backgroundColor: options.backgroundColor,
+        strokeWidth: options.strokeWidth,
+        strokeStyle: options.strokeStyle,
+        fillStyle: options.fillStyle,
+        note: options.note,
+    }, addPolygonDeps);
+});
+// ============================================================================
+// Add Image
+// ============================================================================
+program
+    .command('add-image')
+    .description('Add an image to the canvas')
+    .requiredOption('-f, --file <path>', 'Path to image file (PNG, JPEG, GIF, SVG, WebP)')
+    .requiredOption('-x, --x <number>', 'X coordinate', parseFloat)
+    .requiredOption('-y, --y <number>', 'Y coordinate', parseFloat)
+    .option('-w, --width <number>', 'Width (default: original image width)', parseFloat)
+    .option('-h, --height <number>', 'Height (default: original image height)', parseFloat)
+    .option('-n, --note <text>', 'Note for this element (stored in customData)')
+    .action(async (options) => {
+    await addImage({
+        file: options.file,
+        x: options.x,
+        y: options.y,
+        width: options.width,
+        height: options.height,
+        note: options.note,
+    }, addImageDeps);
 });
 // ============================================================================
 // Delete Elements
@@ -257,21 +214,7 @@ program
     .description('Delete elements from the canvas')
     .requiredOption('-i, --element-ids <ids>', 'Comma-separated element IDs to delete')
     .action(async (options) => {
-    const elementIds = options.elementIds.split(',').map((s) => s.trim());
-    const client = await connectToCanvas();
-    const result = await client.send({
-        type: 'deleteElements',
-        id: generateId(),
-        params: { elementIds },
-    });
-    if (result.success) {
-        console.log(`Deleted ${result.deletedCount} element(s)`);
-    }
-    else {
-        console.error(`Failed: ${result.error}`);
-        process.exit(1);
-    }
-    client.close();
+    await deleteElements({ elementIds: options.elementIds }, deleteElementsDeps);
 });
 // ============================================================================
 // Rotate Elements
@@ -282,21 +225,7 @@ program
     .requiredOption('-i, --element-ids <ids>', 'Comma-separated element IDs to rotate')
     .requiredOption('-a, --angle <degrees>', 'Rotation angle in degrees', parseFloat)
     .action(async (options) => {
-    const elementIds = options.elementIds.split(',').map((s) => s.trim());
-    const client = await connectToCanvas();
-    const result = await client.send({
-        type: 'rotateElements',
-        id: generateId(),
-        params: { elementIds, angle: options.angle },
-    });
-    if (result.success) {
-        console.log(`Rotated ${result.rotatedCount} element(s)`);
-    }
-    else {
-        console.error(`Failed: ${result.error}`);
-        process.exit(1);
-    }
-    client.close();
+    await rotateElements({ elementIds: options.elementIds, angle: options.angle }, rotateElementsDeps);
 });
 // ============================================================================
 // Group Elements
@@ -307,20 +236,7 @@ program
     .requiredOption('-i, --element-ids <ids>', 'Comma-separated element IDs')
     .action(async (options) => {
     const elementIds = options.elementIds.split(',').map((s) => s.trim());
-    const client = await connectToCanvas();
-    const result = await client.send({
-        type: 'groupElements',
-        id: generateId(),
-        params: { elementIds },
-    });
-    if (result.success) {
-        console.log(`Group created (id: ${result.groupId})`);
-    }
-    else {
-        console.error(`Failed: ${result.error}`);
-        process.exit(1);
-    }
-    client.close();
+    await groupElements({ elementIds }, groupElementsDeps);
 });
 // ============================================================================
 // Ungroup Element
@@ -330,20 +246,7 @@ program
     .description('Remove an element from its group')
     .requiredOption('-i, --element-id <id>', 'Element ID to ungroup')
     .action(async (options) => {
-    const client = await connectToCanvas();
-    const result = await client.send({
-        type: 'ungroupElement',
-        id: generateId(),
-        params: { elementId: options.elementId },
-    });
-    if (result.success) {
-        console.log('Element ungrouped');
-    }
-    else {
-        console.error(`Failed: ${result.error}`);
-        process.exit(1);
-    }
-    client.close();
+    await ungroupElement({ elementId: options.elementId }, ungroupElementDeps);
 });
 // ============================================================================
 // Move Elements
@@ -355,28 +258,18 @@ program
     .requiredOption('--delta-x <number>', 'Horizontal offset (positive = right)', parseFloat)
     .requiredOption('--delta-y <number>', 'Vertical offset (positive = down)', parseFloat)
     .action(async (options) => {
-    const elementIds = options.elementIds.split(',').map((s) => s.trim());
-    const client = await connectToCanvas();
-    const result = await client.send({
-        type: 'moveElements',
-        id: generateId(),
-        params: { elementIds, deltaX: options.deltaX, deltaY: options.deltaY },
-    });
-    if (result.success) {
-        console.log(`Moved ${result.movedCount} element(s)`);
-    }
-    else {
-        console.error(`Failed: ${result.error}`);
-        process.exit(1);
-    }
-    client.close();
+    await moveElements({
+        elementIds: options.elementIds,
+        deltaX: options.deltaX,
+        deltaY: options.deltaY,
+    }, moveElementsDeps);
 });
 // ============================================================================
 // Resize Elements
 // ============================================================================
 program
     .command('resize-elements')
-    .description('Resize shape elements by expanding/contracting edges')
+    .description('Resize elements (shapes and images) by expanding/contracting edges')
     .requiredOption('-i, --element-ids <ids>', 'Comma-separated element IDs')
     .option('--top <number>', 'Expand top edge (positive = upward, negative = contract)', parseFloat)
     .option('--bottom <number>', 'Expand bottom edge (positive = downward, negative = contract)', parseFloat)
@@ -384,28 +277,13 @@ program
     .option('--right <number>', 'Expand right edge (positive = rightward, negative = contract)', parseFloat)
     .action(async (options) => {
     const elementIds = options.elementIds.split(',').map((s) => s.trim());
-    const top = options.top ?? 0;
-    const bottom = options.bottom ?? 0;
-    const left = options.left ?? 0;
-    const right = options.right ?? 0;
-    if (top === 0 && bottom === 0 && left === 0 && right === 0) {
-        console.error('At least one of --top, --bottom, --left, --right must be specified');
-        process.exit(1);
-    }
-    const client = await connectToCanvas();
-    const result = await client.send({
-        type: 'resizeElements',
-        id: generateId(),
-        params: { elementIds, top, bottom, left, right },
-    });
-    if (result.success) {
-        console.log(`Resized ${result.resizedCount} element(s)`);
-    }
-    else {
-        console.error(`Failed: ${result.error}`);
-        process.exit(1);
-    }
-    client.close();
+    await resizeElements({
+        elementIds,
+        top: options.top,
+        bottom: options.bottom,
+        left: options.left,
+        right: options.right,
+    }, resizeElementsDeps);
 });
 // ============================================================================
 // Read Scene
@@ -416,173 +294,7 @@ program
     .option('--json', 'Output raw Excalidraw scene JSON')
     .option('--with-style', 'Include style info (stroke, bg) in TOON output')
     .action(async (options) => {
-    const client = await connectToCanvas();
-    if (options.json) {
-        // Return raw Excalidraw scene data
-        const result = await client.send({
-            type: 'saveScene',
-            id: generateId(),
-        });
-        if (result.success && result.data) {
-            console.log(JSON.stringify(result.data, null, 2));
-        }
-        else {
-            console.error(`Failed: ${result.error}`);
-            process.exit(1);
-        }
-        client.close();
-        return;
-    }
-    const result = await client.send({
-        type: 'readScene',
-        id: generateId(),
-    });
-    if (result.success && result.elements) {
-        const withStyle = options.withStyle;
-        // Separate elements into shapes, lines, labels (bound text), texts (standalone text), and groups
-        const shapes = [];
-        const lines = [];
-        const labels = [];
-        const texts = [];
-        const groupsMap = new Map(); // groupId -> elementIds
-        for (const el of result.elements) {
-            const angle = el.angle ? Math.round(el.angle * 180 / Math.PI) : 0; // Convert radians to degrees
-            // Collect group memberships
-            if (el.groupIds?.length) {
-                for (const groupId of el.groupIds) {
-                    if (!groupsMap.has(groupId)) {
-                        groupsMap.set(groupId, []);
-                    }
-                    groupsMap.get(groupId).push(el.id);
-                }
-            }
-            if (el.type === 'text') {
-                if (el.containerId) {
-                    // Bound text (label)
-                    labels.push({
-                        id: el.id,
-                        containerId: el.containerId,
-                        content: el.text ?? '',
-                        x: Math.round(el.x),
-                        y: Math.round(el.y),
-                        w: el.width !== undefined ? Math.round(el.width) : null,
-                        h: el.height !== undefined ? Math.round(el.height) : null,
-                    });
-                }
-                else {
-                    // Standalone text
-                    const text = {
-                        id: el.id,
-                        content: el.text ?? '',
-                        x: Math.round(el.x),
-                        y: Math.round(el.y),
-                        w: el.width !== undefined ? Math.round(el.width) : null,
-                        h: el.height !== undefined ? Math.round(el.height) : null,
-                        angle,
-                        note: el.customData?.note ?? null,
-                    };
-                    if (withStyle) {
-                        text.stroke = el.strokeColor ?? null;
-                    }
-                    texts.push(text);
-                }
-            }
-            else if (el.type === 'line' || el.type === 'arrow') {
-                const pts = el.points ?? [];
-                // Check if it's a closed polygon (first and last point within 8px threshold)
-                const isPolygon = el.type === 'line' && pts.length >= 3 && (() => {
-                    const first = pts[0];
-                    const last = pts[pts.length - 1];
-                    const distance = Math.sqrt((last[0] - first[0]) ** 2 + (last[1] - first[1]) ** 2);
-                    return distance <= 8;
-                })();
-                if (isPolygon) {
-                    // Polygon - treat as shape
-                    // Calculate bounding box from points
-                    const xs = pts.map(p => p[0]);
-                    const ys = pts.map(p => p[1]);
-                    const minX = Math.min(...xs);
-                    const maxX = Math.max(...xs);
-                    const minY = Math.min(...ys);
-                    const maxY = Math.max(...ys);
-                    const shape = {
-                        id: el.id,
-                        type: 'polygon',
-                        x: Math.round(el.x + minX),
-                        y: Math.round(el.y + minY),
-                        w: Math.round(maxX - minX),
-                        h: Math.round(maxY - minY),
-                        angle,
-                        labelId: null,
-                        note: el.customData?.note ?? null,
-                    };
-                    if (withStyle) {
-                        shape.stroke = el.strokeColor ?? null;
-                        shape.bg = el.backgroundColor ?? null;
-                    }
-                    shapes.push(shape);
-                }
-                else {
-                    // Line/Arrow element
-                    const lastPt = pts.length > 0 ? pts[pts.length - 1] : [0, 0];
-                    const line = {
-                        id: el.id,
-                        type: el.type,
-                        x: Math.round(el.x),
-                        y: Math.round(el.y),
-                        endX: Math.round(el.x + lastPt[0]),
-                        endY: Math.round(el.y + lastPt[1]),
-                        // Show intermediate points (via) in the same format as --via input
-                        via: pts.length > 2
-                            ? pts.slice(1, -1).map(pt => `${Math.round(el.x + pt[0])},${Math.round(el.y + pt[1])}`).join(';')
-                            : null,
-                        angle,
-                        note: el.customData?.note ?? null,
-                    };
-                    if (withStyle) {
-                        line.stroke = el.strokeColor ?? null;
-                    }
-                    lines.push(line);
-                }
-            }
-            else {
-                // Shape element (rectangle, ellipse, diamond, etc.)
-                const boundText = el.boundElements?.find(b => b.type === 'text');
-                const shape = {
-                    id: el.id,
-                    type: el.type,
-                    x: Math.round(el.x),
-                    y: Math.round(el.y),
-                    w: el.width !== undefined ? Math.round(el.width) : null,
-                    h: el.height !== undefined ? Math.round(el.height) : null,
-                    angle,
-                    labelId: boundText?.id ?? null,
-                    note: el.customData?.note ?? null,
-                };
-                if (withStyle) {
-                    shape.stroke = el.strokeColor ?? null;
-                    shape.bg = el.backgroundColor ?? null;
-                }
-                shapes.push(shape);
-            }
-        }
-        // Build groups array
-        const groups = Array.from(groupsMap.entries()).map(([id, elementIds]) => ({
-            id,
-            elementIds: elementIds.join(','),
-        }));
-        console.log(toToon({ shapes, lines, labels, texts, groups }));
-        // Output selected elements
-        const selectedIds = result.selectedElementIds ?? [];
-        if (selectedIds.length > 0) {
-            console.log(`\nSelected: ${selectedIds.join(', ')}`);
-        }
-    }
-    else {
-        console.error(`Failed: ${result.error}`);
-        process.exit(1);
-    }
-    client.close();
+    await read({ json: options.json, withStyle: options.withStyle }, readDeps);
 });
 // ============================================================================
 // Export Image
@@ -596,36 +308,13 @@ program
     .option('--embed-scene', 'Embed scene data in PNG')
     .option('--scale <scale>', 'Export scale (1, 2, or 3)', '1')
     .action(async (options) => {
-    const scale = parseInt(options.scale, 10);
-    if (![1, 2, 3].includes(scale)) {
-        console.error('Scale must be 1, 2, or 3');
-        process.exit(1);
-    }
-    const client = await connectToCanvas();
-    const result = await client.send({
-        type: 'exportImage',
-        id: generateId(),
-        params: {
-            background: options.background,
-            dark: options.dark ?? false,
-            embedScene: options.embedScene ?? false,
-            scale: scale,
-        },
-    });
-    if (result.success && result.dataUrl) {
-        // Extract base64 data from data URL
-        const base64Data = result.dataUrl.replace(/^data:image\/png;base64,/, '');
-        const buffer = Buffer.from(base64Data, 'base64');
-        // Generate output path if not specified
-        const outputPath = options.output || `canvas-${Date.now()}.png`;
-        writeFileSync(outputPath, buffer);
-        console.log(`Exported to ${outputPath}`);
-    }
-    else {
-        console.error(`Failed: ${result.error}`);
-        process.exit(1);
-    }
-    client.close();
+    await exportImage({
+        output: options.output,
+        background: options.background,
+        dark: options.dark,
+        embedScene: options.embedScene,
+        scale: parseInt(options.scale, 10),
+    }, exportDeps);
 });
 // ============================================================================
 // Save Scene
@@ -635,21 +324,7 @@ program
     .description('Save canvas to an .excalidraw file')
     .argument('<filepath>', 'Output file path (.excalidraw)')
     .action(async (filepath) => {
-    const client = await connectToCanvas();
-    const result = await client.send({
-        type: 'saveScene',
-        id: generateId(),
-    });
-    if (result.success && result.data) {
-        const outputPath = filepath.endsWith('.excalidraw') ? filepath : `${filepath}.excalidraw`;
-        writeFileSync(outputPath, JSON.stringify(result.data, null, 2));
-        console.log(`Saved to ${outputPath}`);
-    }
-    else {
-        console.error(`Failed: ${result.error}`);
-        process.exit(1);
-    }
-    client.close();
+    await save(filepath, saveDeps);
 });
 // ============================================================================
 // Clear Canvas
@@ -658,19 +333,7 @@ program
     .command('clear')
     .description('Clear all elements from the canvas')
     .action(async () => {
-    const client = await connectToCanvas();
-    const result = await client.send({
-        type: 'clearCanvas',
-        id: generateId(),
-    });
-    if (result.success) {
-        console.log('Canvas cleared');
-    }
-    else {
-        console.error(`Failed: ${result.error}`);
-        process.exit(1);
-    }
-    client.close();
+    await clear(clearDeps);
 });
 // ============================================================================
 // List Canvases
@@ -679,24 +342,7 @@ program
     .command('list')
     .description('List all canvases')
     .action(async () => {
-    const client = await connectToCanvas();
-    const result = await client.send({
-        type: 'listCanvases',
-        id: generateId(),
-    });
-    if (result.success && result.canvases) {
-        console.log('Canvases:');
-        for (const canvas of result.canvases) {
-            const marker = canvas.id === result.activeCanvasId ? ' *' : '  ';
-            const date = new Date(canvas.updatedAt).toLocaleString();
-            console.log(`${marker} ${canvas.name} (updated: ${date})`);
-        }
-    }
-    else {
-        console.error(`Failed: ${result.error}`);
-        process.exit(1);
-    }
-    client.close();
+    await list(listDeps);
 });
 // ============================================================================
 // Create Canvas
@@ -707,21 +353,7 @@ program
     .requiredOption('-n, --name <name>', 'Name for the new canvas')
     .option('--use', 'Switch to the new canvas after creation')
     .action(async (options) => {
-    const client = await connectToCanvas();
-    const result = await client.send({
-        type: 'createCanvas',
-        id: generateId(),
-        params: { name: options.name, switchTo: options.use ?? false },
-    });
-    if (result.success && result.canvas) {
-        const switched = options.use ? ' and switched to it' : '';
-        console.log(`Canvas "${result.canvas.name}" created${switched}`);
-    }
-    else {
-        console.error(`Failed: ${result.error}`);
-        process.exit(1);
-    }
-    client.close();
+    await newCanvas({ name: options.name, use: options.use }, newCanvasDeps);
 });
 // ============================================================================
 // Switch Canvas
@@ -731,20 +363,7 @@ program
     .description('Switch to a canvas by name')
     .argument('<name>', 'Canvas name to switch to')
     .action(async (name) => {
-    const client = await connectToCanvas();
-    const result = await client.send({
-        type: 'switchCanvas',
-        id: generateId(),
-        params: { name },
-    });
-    if (result.success && result.canvas) {
-        console.log(`Switched to canvas "${result.canvas.name}"`);
-    }
-    else {
-        console.error(`Failed: ${result.error}`);
-        process.exit(1);
-    }
-    client.close();
+    await useCanvas({ name }, useCanvasDeps);
 });
 // ============================================================================
 // Rename Canvas
@@ -754,19 +373,6 @@ program
     .description('Rename the current canvas')
     .argument('<name>', 'New name for the canvas')
     .action(async (name) => {
-    const client = await connectToCanvas();
-    const result = await client.send({
-        type: 'renameCanvas',
-        id: generateId(),
-        params: { newName: name },
-    });
-    if (result.success && result.canvas) {
-        console.log(`Canvas renamed to "${result.canvas.name}"`);
-    }
-    else {
-        console.error(`Failed: ${result.error}`);
-        process.exit(1);
-    }
-    client.close();
+    await renameCanvas({ newName: name }, renameCanvasDeps);
 });
 program.parse();