@ogulcancelik/pi-sketch 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Can Celik
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,57 @@
+# pi-sketch
+
+Quick sketch pad for [pi](https://github.com/badlogic/pi-mono) - draw in browser, send to Claude.
+
+![demo](https://raw.githubusercontent.com/ogulcancelik/pi-sketch/main/assets/demo.gif)
+
+## Install
+
+```bash
+pi install npm:@ogulcancelik/pi-sketch
+```
+
+Or try without installing:
+
+```bash
+pi -e npm:@ogulcancelik/pi-sketch
+```
+
+## Usage
+
+```
+/sketch
+```
+
+Opens a canvas in your browser. Draw your sketch, press Enter to send.
+
+## Features
+
+- **Quick sketches** - draw arrows, boxes, diagrams
+- **Clipboard paste** - `Ctrl+V` to paste screenshots, annotate on top
+- **Colors** - black, red, green, blue, white (eraser)
+- **Brush sizes** - 1, 2, 3 keys
+- **Undo** - Z key
+- **Cancel from pi** - Escape key in terminal
+
+## Workflow
+
+1. `/paint` - opens browser canvas (URL shown as fallback)
+2. Draw your sketch
+3. `Ctrl+V` to paste and annotate screenshots
+4. Press Enter in browser to save
+5. `Sketch: /path` appears in your editor - add context and send
+
+## Keyboard Shortcuts (in browser)
+
+| Key | Action |
+|-----|--------|
+| `Enter` | Send sketch |
+| `Escape` | Cancel |
+| `C` | Clear canvas |
+| `Z` | Undo |
+| `1-3` | Brush size |
+| `Ctrl+V` | Paste image |
+
+## License
+
+MIT

package/extensions/index.ts

@@ -0,0 +1,208 @@
+/**
+ * Sketch extension - quick sketch pad that opens in browser
+ * /sketch → opens browser canvas → draw → Enter sends to Claude
+ */
+
+import type { ExtensionAPI } from "@mariozechner/pi-coding-agent";
+import { createServer, type Server } from "node:http";
+import { exec } from "node:child_process";
+import { readFileSync, writeFileSync, mkdirSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { tmpdir } from "node:os";
+import { fileURLToPath } from "node:url";
+
+// Load HTML from file
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const SKETCH_HTML = readFileSync(join(__dirname, "sketch.html"), "utf-8");
+
+function openBrowser(url: string): void {
+	const platform = process.platform;
+	let cmd: string;
+
+	if (platform === "darwin") {
+		cmd = `open "${url}"`;
+	} else if (platform === "win32") {
+		cmd = `start "" "${url}"`;
+	} else {
+		cmd = `xdg-open "${url}" 2>/dev/null || sensible-browser "${url}" 2>/dev/null || x-www-browser "${url}" 2>/dev/null`;
+	}
+
+	exec(cmd);
+}
+
+interface PaintServer {
+	url: string;
+	waitForResult: () => Promise<string | null>;
+	close: () => void;
+}
+
+function launchPaintServer(): PaintServer {
+	let resolved = false;
+	let resolvePromise: (value: string | null) => void;
+
+	const resultPromise = new Promise<string | null>((resolve) => {
+		resolvePromise = resolve;
+	});
+
+	const server: Server = createServer((req, res) => {
+		// CORS headers for local dev
+		res.setHeader("Access-Control-Allow-Origin", "*");
+		res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
+		res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+
+		if (req.method === "OPTIONS") {
+			res.writeHead(204);
+			res.end();
+			return;
+		}
+
+		if (req.method === "GET" && (req.url === "/" || req.url === "/sketch")) {
+			res.writeHead(200, { "Content-Type": "text/html" });
+			res.end(SKETCH_HTML);
+			return;
+		}
+
+		if (req.method === "POST" && req.url === "/submit") {
+			let body = "";
+			req.on("data", (chunk) => (body += chunk));
+			req.on("end", () => {
+				res.writeHead(200, { "Content-Type": "text/plain" });
+				res.end("OK");
+
+				if (!resolved) {
+					resolved = true;
+					server.close();
+					resolvePromise(body); // base64 PNG data
+				}
+			});
+			return;
+		}
+
+		if (req.method === "POST" && req.url === "/cancel") {
+			res.writeHead(200, { "Content-Type": "text/plain" });
+			res.end("OK");
+
+			if (!resolved) {
+				resolved = true;
+				server.close();
+				resolvePromise(null);
+			}
+			return;
+		}
+
+		// 404 for anything else
+		res.writeHead(404);
+		res.end("Not found");
+	});
+
+	// Handle server errors
+	server.on("error", (err) => {
+		console.error("Paint server error:", err);
+		if (!resolved) {
+			resolved = true;
+			resolvePromise(null);
+		}
+	});
+
+	// Get URL synchronously after listen
+	let url = "";
+	server.listen(0, "127.0.0.1", () => {
+		const addr = server.address();
+		if (addr && typeof addr === "object") {
+			url = `http://127.0.0.1:${addr.port}/sketch`;
+		}
+	});
+
+	// Timeout after 10 minutes
+	const timeout = setTimeout(() => {
+		if (!resolved) {
+			resolved = true;
+			server.close();
+			resolvePromise(null);
+		}
+	}, 10 * 60 * 1000);
+
+	return {
+		get url() {
+			return url;
+		},
+		waitForResult: () => resultPromise,
+		close: () => {
+			clearTimeout(timeout);
+			if (!resolved) {
+				resolved = true;
+				server.close();
+				resolvePromise(null);
+			}
+		},
+	};
+}
+
+export default function (pi: ExtensionAPI) {
+	pi.registerCommand("sketch", {
+		description: "Open a sketch pad in browser to draw something for Claude",
+
+		handler: async (_args, ctx) => {
+			if (!ctx.hasUI) {
+				ctx.ui.notify("Sketch requires interactive mode", "error");
+				return;
+			}
+
+			const paintServer = launchPaintServer();
+
+			// Wait a tick for the server to get its port
+			await new Promise((resolve) => setTimeout(resolve, 50));
+
+			// Auto-open browser
+			openBrowser(paintServer.url);
+
+			// Use custom UI to show status and handle Escape to cancel
+			const imageBase64 = await ctx.ui.custom<string | null>((tui, theme, _kb, done) => {
+				// Race between browser result and user pressing Escape
+				paintServer.waitForResult().then(done);
+
+				// Simple component that shows status and handles Escape
+				return {
+					render(width: number): string[] {
+						const line1 = theme.fg("success", "Sketch opened in browser");
+						const line2 = theme.fg("muted", paintServer.url);
+						const line3 = theme.fg("dim", "Press Escape to cancel");
+						return [line1, line2, "", line3];
+					},
+					handleInput(data: string) {
+						// Check for Escape
+						if (data === "\x1b" || data === "\x1b\x1b") {
+							paintServer.close();
+							done(null);
+						}
+					},
+				};
+			});
+
+			try {
+				if (imageBase64) {
+					// Save to temp file (same flow as @ image attachments)
+					const sketchDir = join(tmpdir(), "pi-sketches");
+					mkdirSync(sketchDir, { recursive: true });
+
+					const timestamp = Date.now();
+					const sketchPath = join(sketchDir, `sketch-${timestamp}.png`);
+
+					// Decode base64 and write to file
+					const buffer = Buffer.from(imageBase64, "base64");
+					writeFileSync(sketchPath, buffer);
+
+					// Append to editor instead of auto-sending - user can add more text
+					const currentText = ctx.ui.getEditorText?.() || "";
+					const prefix = currentText ? currentText + "\n" : "";
+					ctx.ui.setEditorText(`${prefix}Sketch: ${sketchPath}`);
+				} else {
+					ctx.ui.notify("Sketch cancelled", "info");
+				}
+			} catch (error) {
+				paintServer.close();
+				ctx.ui.notify(`Sketch error: ${error instanceof Error ? error.message : String(error)}`, "error");
+			}
+		},
+	});
+}

package/extensions/sketch.html

@@ -0,0 +1,411 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>pi sketch</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      background: #1a1a1a;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 16px;
+      padding: 20px;
+    }
+    .toolbar {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      color: #888;
+      font-size: 14px;
+    }
+    .toolbar button {
+      background: #333;
+      color: #fff;
+      border: none;
+      padding: 8px 16px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+    .toolbar button:hover { background: #444; }
+    .toolbar button.primary { background: #2563eb; }
+    .toolbar button.primary:hover { background: #1d4ed8; }
+    .brush-sizes {
+      display: flex;
+      gap: 6px;
+    }
+    .brush-size {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: #333;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      border: 2px solid transparent;
+    }
+    .brush-size:hover { background: #444; }
+    .brush-size.active { border-color: #2563eb; }
+    .brush-size .dot {
+      background: #fff;
+      border-radius: 50%;
+    }
+    .colors {
+      display: flex;
+      gap: 4px;
+    }
+    .color-btn {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      cursor: pointer;
+      border: 2px solid transparent;
+    }
+    .color-btn:hover { opacity: 0.8; }
+    .color-btn.active { border-color: #fff; }
+    .canvas-container {
+      position: relative;
+      display: inline-block;
+    }
+    canvas {
+      background: #fff;
+      border-radius: 8px;
+      cursor: crosshair;
+      box-shadow: 0 4px 24px rgba(0,0,0,0.3);
+    }
+    .resize-handle {
+      position: absolute;
+      bottom: 4px;
+      right: 4px;
+      width: 16px;
+      height: 16px;
+      cursor: nwse-resize;
+      background: linear-gradient(135deg, transparent 50%, #666 50%);
+      border-radius: 0 0 6px 0;
+      opacity: 0.7;
+    }
+    .resize-handle:hover {
+      opacity: 1;
+    }
+    .hint {
+      color: #666;
+      font-size: 13px;
+    }
+    kbd {
+      background: #333;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-family: inherit;
+    }
+  </style>
+</head>
+<body>
+  <div class="toolbar">
+    <div class="colors">
+      <div class="color-btn active" data-color="#000000" style="background: #000;" title="Black"></div>
+      <div class="color-btn" data-color="#ef4444" style="background: #ef4444;" title="Red"></div>
+      <div class="color-btn" data-color="#22c55e" style="background: #22c55e;" title="Green"></div>
+      <div class="color-btn" data-color="#3b82f6" style="background: #3b82f6;" title="Blue"></div>
+      <div class="color-btn" data-color="#ffffff" style="background: #fff;" title="White (eraser)"></div>
+    </div>
+    <div class="brush-sizes">
+      <div class="brush-size" data-size="2" title="Small">
+        <div class="dot" style="width: 4px; height: 4px;"></div>
+      </div>
+      <div class="brush-size active" data-size="4" title="Medium">
+        <div class="dot" style="width: 8px; height: 8px;"></div>
+      </div>
+      <div class="brush-size" data-size="8" title="Large">
+        <div class="dot" style="width: 14px; height: 14px;"></div>
+      </div>
+    </div>
+    <button onclick="clearCanvas()">Clear</button>
+    <button onclick="undo()">Undo</button>
+    <button class="primary" onclick="send()">Send</button>
+    <button onclick="cancel()">Cancel</button>
+  </div>
+  
+  <div class="canvas-container">
+    <canvas id="canvas" width="1000" height="600"></canvas>
+    <div class="resize-handle" id="resizeHandle"></div>
+  </div>
+  
+  <div class="hint">
+    <kbd>Ctrl+V</kbd> paste image · <kbd>Enter</kbd> send · <kbd>Esc</kbd> cancel · <kbd>C</kbd> clear · <kbd>Z</kbd> undo · <kbd>1-3</kbd> brush size
+  </div>
+
+  <script>
+    const canvas = document.getElementById('canvas');
+    const ctx = canvas.getContext('2d');
+    
+    let drawing = false;
+    let brushSize = 4;
+    let brushColor = '#000000';
+    let history = [];
+    let lastX, lastY;
+    
+    // Save initial blank state
+    saveState();
+    
+    function saveState() {
+      history.push(canvas.toDataURL());
+      if (history.length > 50) history.shift(); // Limit history
+    }
+    
+    function undo() {
+      if (history.length > 1) {
+        history.pop(); // Remove current state
+        const img = new Image();
+        img.onload = () => {
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+          ctx.drawImage(img, 0, 0);
+        };
+        img.src = history[history.length - 1];
+      }
+    }
+    
+    const DEFAULT_WIDTH = 1000;
+    const DEFAULT_HEIGHT = 600;
+    
+    function clearCanvas() {
+      canvas.width = DEFAULT_WIDTH;
+      canvas.height = DEFAULT_HEIGHT;
+      ctx.fillStyle = '#fff';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      saveState();
+    }
+    
+    function getPos(e) {
+      const rect = canvas.getBoundingClientRect();
+      const scaleX = canvas.width / rect.width;
+      const scaleY = canvas.height / rect.height;
+      return {
+        x: (e.clientX - rect.left) * scaleX,
+        y: (e.clientY - rect.top) * scaleY
+      };
+    }
+    
+    canvas.addEventListener('mousedown', (e) => {
+      drawing = true;
+      const pos = getPos(e);
+      lastX = pos.x;
+      lastY = pos.y;
+      
+      // Draw a dot for single clicks
+      ctx.beginPath();
+      ctx.arc(pos.x, pos.y, brushSize / 2, 0, Math.PI * 2);
+      ctx.fillStyle = brushColor;
+      ctx.fill();
+    });
+    
+    canvas.addEventListener('mousemove', (e) => {
+      if (!drawing) return;
+      const pos = getPos(e);
+      
+      ctx.beginPath();
+      ctx.moveTo(lastX, lastY);
+      ctx.lineTo(pos.x, pos.y);
+      ctx.strokeStyle = brushColor;
+      ctx.lineWidth = brushSize;
+      ctx.lineCap = 'round';
+      ctx.lineJoin = 'round';
+      ctx.stroke();
+      
+      lastX = pos.x;
+      lastY = pos.y;
+    });
+    
+    canvas.addEventListener('mouseup', () => {
+      if (drawing) {
+        drawing = false;
+        saveState();
+      }
+    });
+    
+    canvas.addEventListener('mouseleave', () => {
+      if (drawing) {
+        drawing = false;
+        saveState();
+      }
+    });
+    
+    // Brush size selection
+    document.querySelectorAll('.brush-size').forEach(el => {
+      el.addEventListener('click', () => {
+        document.querySelectorAll('.brush-size').forEach(b => b.classList.remove('active'));
+        el.classList.add('active');
+        brushSize = parseInt(el.dataset.size);
+      });
+    });
+    
+    // Color selection
+    document.querySelectorAll('.color-btn').forEach(el => {
+      el.addEventListener('click', () => {
+        document.querySelectorAll('.color-btn').forEach(b => b.classList.remove('active'));
+        el.classList.add('active');
+        brushColor = el.dataset.color;
+      });
+    });
+    
+    // Keyboard shortcuts
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        send();
+      } else if (e.key === 'Escape') {
+        cancel();
+      } else if (e.key.toLowerCase() === 'c' && !e.ctrlKey && !e.metaKey) {
+        clearCanvas();
+      } else if (e.key.toLowerCase() === 'z' && !e.ctrlKey && !e.metaKey) {
+        undo();
+      } else if (e.key === '1') {
+        document.querySelector('[data-size="2"]').click();
+      } else if (e.key === '2') {
+        document.querySelector('[data-size="4"]').click();
+      } else if (e.key === '3') {
+        document.querySelector('[data-size="8"]').click();
+      }
+    });
+    
+    // Clipboard paste - paste image and draw on top
+    document.addEventListener('paste', async (e) => {
+      const items = e.clipboardData?.items;
+      if (!items) return;
+      
+      for (const item of items) {
+        if (item.type.startsWith('image/')) {
+          e.preventDefault();
+          const blob = item.getAsFile();
+          if (!blob) continue;
+          
+          const img = new Image();
+          img.onload = () => {
+            // Max canvas bounds - keep it reasonable so toolbar stays visible
+            const maxWidth = 1000;
+            const maxHeight = 600;
+            
+            let newWidth = img.width;
+            let newHeight = img.height;
+            
+            // Scale down preserving aspect ratio
+            const widthRatio = maxWidth / newWidth;
+            const heightRatio = maxHeight / newHeight;
+            const scale = Math.min(widthRatio, heightRatio, 1); // Don't upscale
+            
+            newWidth = Math.round(newWidth * scale);
+            newHeight = Math.round(newHeight * scale);
+            
+            // Resize canvas
+            canvas.width = newWidth;
+            canvas.height = newHeight;
+            
+            // Draw pasted image
+            ctx.fillStyle = '#fff';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+            
+            saveState();
+            URL.revokeObjectURL(img.src);
+          };
+          img.src = URL.createObjectURL(blob);
+          break;
+        }
+      }
+    });
+    
+    // Track if we've already sent a result
+    let submitted = false;
+    
+    async function send() {
+      if (submitted) return;
+      submitted = true;
+      
+      // Get PNG data (strip the data:image/png;base64, prefix)
+      const dataUrl = canvas.toDataURL('image/png');
+      const base64 = dataUrl.split(',')[1];
+      
+      await fetch('/submit', {
+        method: 'POST',
+        headers: { 'Content-Type': 'text/plain' },
+        body: base64
+      });
+      
+      window.close();
+    }
+    
+    async function cancel() {
+      if (submitted) return;
+      submitted = true;
+      
+      await fetch('/cancel', { method: 'POST' });
+      window.close();
+    }
+    
+    // Resize handle functionality
+    const resizeHandle = document.getElementById('resizeHandle');
+    let resizing = false;
+    let resizeStartX, resizeStartY, startWidth, startHeight;
+    
+    resizeHandle.addEventListener('mousedown', (e) => {
+      e.preventDefault();
+      resizing = true;
+      resizeStartX = e.clientX;
+      resizeStartY = e.clientY;
+      startWidth = canvas.width;
+      startHeight = canvas.height;
+      
+      // Save current canvas content
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      
+      const onMouseMove = (e) => {
+        if (!resizing) return;
+        
+        const dx = e.clientX - resizeStartX;
+        const dy = e.clientY - resizeStartY;
+        
+        const newWidth = Math.max(200, startWidth + dx);
+        const newHeight = Math.max(150, startHeight + dy);
+        
+        // Resize canvas
+        canvas.width = newWidth;
+        canvas.height = newHeight;
+        
+        // Fill with white first
+        ctx.fillStyle = '#fff';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        
+        // Restore previous content
+        ctx.putImageData(imageData, 0, 0);
+      };
+      
+      const onMouseUp = () => {
+        if (resizing) {
+          resizing = false;
+          saveState();
+        }
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+      };
+      
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onMouseUp);
+    });
+
+    // Initialize with white background
+    clearCanvas();
+    history = []; // Reset history after initial clear
+    saveState();
+    
+    // Send cancel if tab is closed without explicit action
+    window.addEventListener('beforeunload', () => {
+      navigator.sendBeacon('/cancel');
+    });
+  </script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@ogulcancelik/pi-sketch",
+  "version": "0.1.0",
+  "description": "Quick sketch pad for pi - draw in browser, send to models",
+  "keywords": [
+    "pi-package",
+    "paint",
+    "sketch",
+    "drawing",
+    "visual"
+  ],
+  "author": "Can Celik",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ogulcancelik/pi-sketch.git"
+  },
+  "homepage": "https://github.com/ogulcancelik/pi-sketch",
+  "bugs": {
+    "url": "https://github.com/ogulcancelik/pi-sketch/issues"
+  },
+  "files": [
+    "extensions",
+    "assets",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "@mariozechner/pi-coding-agent": "*"
+  },
+  "pi": {
+    "extensions": [
+      "./extensions"
+    ]
+  }
+}