@codewithdan/zingit 0.16.0 → 0.17.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codewithdan/zingit",
-  "version": "0.16.0",
-  "description": "AI-powered UI annotation tool - point, annotate, and let AI fix it",
+  "version": "0.17.1",
+  "description": "AI-powered UI marker tool - point, mark, and let AI fix it",
   "type": "module",
   "engines": {
     "node": ">=22.0.0"
@@ -15,6 +15,7 @@
     "client/dist",
     "README.md",
     "AGENTS.md",
+    "CHANGELOG.md",
     "LICENSE"
   ],
   "main": "client/dist/zingit-client.js",
@@ -29,11 +30,11 @@
     "test": "cd client && npm run test",
     "test:watch": "cd client && npm run test:watch",
     "test:ui": "cd client && npm run test:ui",
-    "release": "npm version minor && npm run build && npm publish --access public"
+    "release": "standard-version && npm run build && npm publish --access public"
   },
   "keywords": [
     "ui",
-    "annotation",
+    "marker",
     "ai",
     "agent",
     "claude",
@@ -69,6 +70,7 @@
     "@types/ws": "^8.18.1",
     "concurrently": "^9.1.2",
     "gh-pages": "^6.3.0",
+    "standard-version": "^9.5.0",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3"
   }

package/server/dist/agents/base.d.ts

@@ -11,8 +11,8 @@ export declare abstract class BaseAgent implements Agent {
      */
     protected formatPromptWithImageMetadata(prompt: string, images?: ImageContent[]): string;
     /**
-     * Extract images from batch data annotations
-     * Returns an array of ImageContent objects for annotations that have screenshots
+     * Extract images from batch data markers
+     * Returns an array of ImageContent objects for markers that have screenshots
      */
     extractImages(data: BatchData): ImageContent[];
     formatPrompt(data: BatchData, projectDir: string): string;

package/server/dist/agents/base.js

@@ -18,12 +18,12 @@ export class BaseAgent {
         return `${header}---\n\n${prompt}`;
     }
     /**
-     * Extract images from batch data annotations
-     * Returns an array of ImageContent objects for annotations that have screenshots
+     * Extract images from batch data markers
+     * Returns an array of ImageContent objects for markers that have screenshots
      */
     extractImages(data) {
         const images = [];
-        data.annotations.forEach((ann, i) => {
+        data.markers.forEach((ann, i) => {
             if (ann.screenshot) {
                 let base64Data = ann.screenshot;
                 let mediaType = 'image/png'; // Default
@@ -48,13 +48,13 @@ export class BaseAgent {
                 // 3. Check padding is correct
                 const base64Regex = /^[A-Za-z0-9+/]*={0,2}$/;
                 if (!base64Data || !base64Regex.test(base64Data) || base64Data.length % 4 !== 0) {
-                    console.warn(`ZingIt: Invalid base64 data in annotation ${i + 1}, skipping screenshot`);
-                    return; // Skip this annotation's screenshot
+                    console.warn(`ZingIt: Invalid base64 data in marker ${i + 1}, skipping screenshot`);
+                    return; // Skip this marker's screenshot
                 }
                 // Check image size limit (base64 is ~33% larger than binary)
                 const estimatedBinarySize = Math.ceil(base64Data.length * 0.75);
                 if (estimatedBinarySize > MAX_IMAGE_SIZE_BYTES) {
-                    console.warn(`ZingIt: Image in annotation ${i + 1} exceeds ${MAX_IMAGE_SIZE_BYTES / 1024 / 1024}MB limit, skipping`);
+                    console.warn(`ZingIt: Image in marker ${i + 1} exceeds ${MAX_IMAGE_SIZE_BYTES / 1024 / 1024}MB limit, skipping`);
                     return; // Skip oversized image
                 }
                 // Validate that base64 can be decoded (catches corrupted data)
@@ -62,13 +62,13 @@ export class BaseAgent {
                     Buffer.from(base64Data, 'base64');
                 }
                 catch (err) {
-                    console.warn(`ZingIt: Failed to decode base64 in annotation ${i + 1}, skipping screenshot:`, err);
-                    return; // Skip this annotation's screenshot
+                    console.warn(`ZingIt: Failed to decode base64 in marker ${i + 1}, skipping screenshot:`, err);
+                    return; // Skip this marker's screenshot
                 }
                 images.push({
                     base64: base64Data,
                     mediaType,
-                    label: `Screenshot of Annotation ${i + 1}: ${ann.identifier}`
+                    label: `Screenshot of Marker ${i + 1}: ${ann.identifier}`
                 });
             }
         });
@@ -81,10 +81,10 @@ Page: ${data.pageTitle}
 URL: ${data.pageUrl}
 
 `;
-        data.annotations.forEach((ann, i) => {
+        data.markers.forEach((ann, i) => {
             prompt += `---
 
-## Annotation ${i + 1}: ${ann.identifier}
+## Marker ${i + 1}: ${ann.identifier}
 
 **Requested Change:** ${ann.notes}
 
@@ -108,8 +108,8 @@ ${ann.parentContext ? `**Parent Path:** \`${ann.parentContext}\`` : ''}
 
 `;
         });
-        // Check if any annotations have screenshots
-        const hasScreenshots = data.annotations.some(ann => ann.screenshot);
+        // Check if any markers have screenshots
+        const hasScreenshots = data.markers.some(ann => ann.screenshot);
         prompt += `
 CRITICAL INSTRUCTIONS:
 1. CAREFULLY identify the CORRECT element to modify:

package/server/dist/agents/claude.js

@@ -84,7 +84,7 @@ CRITICAL EFFICIENCY RULES:
 2. Make the requested change immediately - don't explore or explain unless there's ambiguity
 3. For simple changes (text, styles, attributes), be concise - just do it and confirm
 4. Only search/explore if the selector doesn't match or you need to understand complex context
-5. Avoid explaining what annotations are or describing the codebase unnecessarily
+5. Avoid explaining what markers are or describing the codebase unnecessarily
 
 WHEN TO BE BRIEF (90% of cases):
 - Text changes: Find, change, confirm (1-2 sentences)

package/server/dist/agents/codex.js

@@ -79,7 +79,7 @@ export class CodexAgent extends BaseAgent {
                         }
                     }
                     // Add system instructions and main prompt
-                    const systemInstructions = `You are a UI debugging assistant. When given annotations about UI elements, search for the corresponding code using the selectors and HTML context provided, then make the requested changes.
+                    const systemInstructions = `You are a UI debugging assistant. When given markers about UI elements, search for the corresponding code using the selectors and HTML context provided, then make the requested changes.
 
 When screenshots are provided, use them to:
 - Better understand the visual context and styling of the elements

package/server/dist/agents/copilot.js

@@ -49,7 +49,7 @@ export class CopilotAgent extends BaseAgent {
 <context>
 You are a UI debugging assistant working in the project directory: ${projectDir}
 
-When given annotations about UI elements:
+When given markers about UI elements:
 1. Search for the corresponding code using the selectors and HTML context provided
 2. Make the requested changes in the project at ${projectDir}
 3. Be thorough in finding the right files and making precise edits

package/server/dist/handlers/messageHandlers.js

@@ -116,7 +116,7 @@ export async function handleBatch(ws, state, msg, deps) {
         try {
             console.log('[Batch] Creating checkpoint...');
             const checkpoint = await state.gitManager.createCheckpoint({
-                annotations: batchData.annotations,
+                markers: batchData.markers,
                 pageUrl: batchData.pageUrl,
                 pageTitle: batchData.pageTitle,
                 agentName: state.agentName,
@@ -128,7 +128,7 @@ export async function handleBatch(ws, state, msg, deps) {
                 checkpoint: {
                     id: checkpoint.id,
                     timestamp: checkpoint.timestamp,
-                    annotations: checkpoint.annotations,
+                    markers: checkpoint.markers,
                     filesModified: 0,
                     linesChanged: 0,
                     agentName: checkpoint.agentName,
@@ -169,12 +169,12 @@ export async function handleBatch(ws, state, msg, deps) {
     else {
         console.log('[Batch] Reusing existing session');
     }
-    // Log user's annotations before formatting
-    console.log('[Batch] Annotation count:', batchData.annotations?.length || 0);
-    if (batchData.annotations && batchData.annotations.length > 0) {
-        batchData.annotations.forEach((ann, idx) => {
-            const notePreview = ann.notes?.substring(0, 200) || '(no notes)';
-            console.log(`[Batch] Annotation ${idx + 1}: ${notePreview}`);
+    // Log user's markers before formatting
+    console.log('[Batch] Marker count:', batchData.markers?.length || 0);
+    if (batchData.markers && batchData.markers.length > 0) {
+        batchData.markers.forEach((m, idx) => {
+            const notePreview = m.notes?.substring(0, 200) || '(no notes)';
+            console.log(`[Batch] Marker ${idx + 1}: ${notePreview}`);
         });
     }
     if (batchData.pageUrl) {
@@ -229,7 +229,7 @@ export async function handleMessage(ws, state, msg, deps) {
         return;
     }
     console.log('[Message] ===== Request started =====');
-    // Create session if it doesn't exist (allows direct messaging without annotations)
+    // Create session if it doesn't exist (allows direct messaging without markers)
     if (!state.session) {
         if (!state.agent) {
             console.warn('[ZingIt] No agent selected for message');

package/server/dist/services/git-manager.d.ts

@@ -1,10 +1,10 @@
-import type { Annotation } from '../types.js';
+import type { Marker } from '../types.js';
 export interface Checkpoint {
     id: string;
     timestamp: string;
     commitHash: string;
     branchName: string;
-    annotations: AnnotationSummary[];
+    markers: MarkerSummary[];
     pageUrl: string;
     pageTitle: string;
     agentName: string;
@@ -12,7 +12,7 @@ export interface Checkpoint {
     filesModified: number;
     linesChanged: number;
 }
-export interface AnnotationSummary {
+export interface MarkerSummary {
     id: string;
     identifier: string;
     notes: string;
@@ -32,7 +32,7 @@ export interface ChangeHistory {
 export interface CheckpointInfo {
     id: string;
     timestamp: string;
-    annotations: AnnotationSummary[];
+    markers: MarkerSummary[];
     filesModified: number;
     linesChanged: number;
     agentName: string;
@@ -62,7 +62,7 @@ export declare class GitManager {
      * Create a checkpoint before AI modifications
      */
     createCheckpoint(metadata: {
-        annotations: Annotation[];
+        markers: Marker[];
         pageUrl: string;
         pageTitle: string;
         agentName: string;

package/server/dist/services/git-manager.js

@@ -114,10 +114,10 @@ export class GitManager {
             timestamp: new Date().toISOString(),
             commitHash: commitHash.trim(),
             branchName: status.branch,
-            annotations: metadata.annotations.map((a) => ({
-                id: a.id,
-                identifier: a.identifier,
-                notes: a.notes,
+            markers: metadata.markers.map((m) => ({
+                id: m.id,
+                identifier: m.identifier,
+                notes: m.notes,
             })),
             pageUrl: metadata.pageUrl,
             pageTitle: metadata.pageTitle,
@@ -145,7 +145,7 @@ export class GitManager {
         // Get list of changed files since checkpoint
         let diffStat = '';
         try {
-            const result = await execAsync(`git diff --name-status ${checkpoint.commitHash}`, {
+            const result = await execFileAsync('git', ['diff', '--name-status', checkpoint.commitHash], {
                 cwd: this.projectDir,
             });
             diffStat = result.stdout;
@@ -166,7 +166,7 @@ export class GitManager {
             let linesAdded = 0;
             let linesRemoved = 0;
             try {
-                const { stdout: numstat } = await execAsync(`git diff --numstat ${checkpoint.commitHash} -- "${filePath}"`, { cwd: this.projectDir });
+                const { stdout: numstat } = await execFileAsync('git', ['diff', '--numstat', checkpoint.commitHash, '--', filePath], { cwd: this.projectDir });
                 const parts = numstat.trim().split('\t');
                 linesAdded = parseInt(parts[0]) || 0;
                 linesRemoved = parseInt(parts[1]) || 0;
@@ -188,7 +188,7 @@ export class GitManager {
         if (fileChanges.length > 0) {
             try {
                 await execFileAsync('git', ['add', '-A'], { cwd: this.projectDir });
-                const identifiers = checkpoint.annotations.map((a) => sanitizeForGit(a.identifier)).join(', ');
+                const identifiers = checkpoint.markers.map((a) => sanitizeForGit(a.identifier)).join(', ');
                 const commitMsg = `[ZingIt] ${identifiers}`;
                 // Use execFile with array args to avoid shell injection
                 await execFileAsync('git', ['commit', '-m', commitMsg], { cwd: this.projectDir });
@@ -222,7 +222,7 @@ export class GitManager {
             throw new GitManagerError('Checkpoint is not in applied state', 'INVALID_CHECKPOINT_STATE');
         }
         // Reset to the checkpoint's original commit
-        await execAsync(`git reset --hard ${checkpoint.commitHash}`, { cwd: this.projectDir });
+        await execFileAsync('git', ['reset', '--hard', checkpoint.commitHash], { cwd: this.projectDir });
         // Get files that were reverted
         const filesReverted = [];
         // We could compute this but for now just return empty - the checkpoint has the info
@@ -245,7 +245,7 @@ export class GitManager {
             throw new GitManagerError(`Checkpoint not found: ${checkpointId}`, 'CHECKPOINT_NOT_FOUND');
         }
         // Reset to that commit
-        await execAsync(`git reset --hard ${checkpoint.commitHash}`, { cwd: this.projectDir });
+        await execFileAsync('git', ['reset', '--hard', checkpoint.commitHash], { cwd: this.projectDir });
         // Mark all checkpoints after this one as reverted
         const checkpointIndex = history.checkpoints.findIndex((c) => c.id === checkpointId);
         for (let i = checkpointIndex + 1; i < history.checkpoints.length; i++) {
@@ -266,7 +266,7 @@ export class GitManager {
         return history.checkpoints.map((cp, index) => ({
             id: cp.id,
             timestamp: cp.timestamp,
-            annotations: cp.annotations,
+            markers: cp.markers,
             filesModified: cp.filesModified,
             linesChanged: cp.linesChanged,
             agentName: cp.agentName,

package/server/dist/services/index.d.ts

@@ -1,2 +1,2 @@
 export { GitManager, GitManagerError } from './git-manager.js';
-export type { Checkpoint, CheckpointInfo, ChangeHistory, FileChange, AnnotationSummary } from './git-manager.js';
+export type { Checkpoint, CheckpointInfo, ChangeHistory, FileChange, MarkerSummary } from './git-manager.js';

package/server/dist/types.d.ts

@@ -29,7 +29,7 @@ export interface AgentSession {
     destroy(): Promise<void>;
     getSessionId?(): string | null;
 }
-export interface Annotation {
+export interface Marker {
     id: string;
     selector: string;
     identifier: string;
@@ -46,7 +46,7 @@ export interface Annotation {
 export interface BatchData {
     pageUrl: string;
     pageTitle: string;
-    annotations: Annotation[];
+    markers: Marker[];
     projectDir?: string;
 }
 export type WSIncomingType = 'batch' | 'message' | 'reset' | 'stop' | 'get_agents' | 'select_agent' | 'get_history' | 'undo' | 'revert_to' | 'clear_history';

package/server/dist/validation/payload.d.ts

@@ -1,5 +1,5 @@
 import type { BatchData } from '../types.js';
-export declare const MAX_ANNOTATIONS = 50;
+export declare const MAX_MARKERS = 50;
 export declare const MAX_HTML_LENGTH = 50000;
 export declare const MAX_NOTES_LENGTH = 5000;
 export declare const MAX_SELECTOR_LENGTH = 1000;

package/server/dist/validation/payload.js

@@ -2,33 +2,33 @@
 // ============================================
 // Payload Validation
 // ============================================
-export const MAX_ANNOTATIONS = 50;
+export const MAX_MARKERS = 50;
 export const MAX_HTML_LENGTH = 50000;
 export const MAX_NOTES_LENGTH = 5000;
 export const MAX_SELECTOR_LENGTH = 1000;
 export const MAX_SCREENSHOT_SIZE = 5000000; // ~5MB base64 (matches Claude API limit)
 const VALID_STATUSES = ['pending', 'processing', 'completed'];
-function validateAnnotation(annotation, index) {
-    if (!annotation.id || typeof annotation.id !== 'string') {
-        return { valid: false, error: `Annotation ${index}: missing or invalid id` };
+function validateMarker(marker, index) {
+    if (!marker.id || typeof marker.id !== 'string') {
+        return { valid: false, error: `Marker ${index}: missing or invalid id` };
     }
-    if (!annotation.identifier || typeof annotation.identifier !== 'string') {
-        return { valid: false, error: `Annotation ${index}: missing or invalid identifier` };
+    if (!marker.identifier || typeof marker.identifier !== 'string') {
+        return { valid: false, error: `Marker ${index}: missing or invalid identifier` };
     }
-    if (annotation.status && !VALID_STATUSES.includes(annotation.status)) {
-        return { valid: false, error: `Annotation ${index}: invalid status '${annotation.status}'` };
+    if (marker.status && !VALID_STATUSES.includes(marker.status)) {
+        return { valid: false, error: `Marker ${index}: invalid status '${marker.status}'` };
     }
-    if (annotation.selector && annotation.selector.length > MAX_SELECTOR_LENGTH) {
-        return { valid: false, error: `Annotation ${index}: selector too long (max ${MAX_SELECTOR_LENGTH})` };
+    if (marker.selector && marker.selector.length > MAX_SELECTOR_LENGTH) {
+        return { valid: false, error: `Marker ${index}: selector too long (max ${MAX_SELECTOR_LENGTH})` };
     }
-    if (annotation.html && annotation.html.length > MAX_HTML_LENGTH) {
-        return { valid: false, error: `Annotation ${index}: html too long (max ${MAX_HTML_LENGTH})` };
+    if (marker.html && marker.html.length > MAX_HTML_LENGTH) {
+        return { valid: false, error: `Marker ${index}: html too long (max ${MAX_HTML_LENGTH})` };
     }
-    if (annotation.notes && annotation.notes.length > MAX_NOTES_LENGTH) {
-        return { valid: false, error: `Annotation ${index}: notes too long (max ${MAX_NOTES_LENGTH})` };
+    if (marker.notes && marker.notes.length > MAX_NOTES_LENGTH) {
+        return { valid: false, error: `Marker ${index}: notes too long (max ${MAX_NOTES_LENGTH})` };
     }
-    if (annotation.screenshot && annotation.screenshot.length > MAX_SCREENSHOT_SIZE) {
-        return { valid: false, error: `Annotation ${index}: screenshot too large (max ${MAX_SCREENSHOT_SIZE / 1000}KB)` };
+    if (marker.screenshot && marker.screenshot.length > MAX_SCREENSHOT_SIZE) {
+        return { valid: false, error: `Marker ${index}: screenshot too large (max ${MAX_SCREENSHOT_SIZE / 1000}KB)` };
     }
     return { valid: true };
 }
@@ -36,18 +36,18 @@ export function validateBatchData(data) {
     if (!data) {
         return { valid: false, error: 'Missing batch data' };
     }
-    if (!data.annotations || !Array.isArray(data.annotations)) {
-        return { valid: false, error: 'Missing or invalid annotations array' };
+    if (!data.markers || !Array.isArray(data.markers)) {
+        return { valid: false, error: 'Missing or invalid markers array' };
     }
-    if (data.annotations.length === 0) {
-        return { valid: false, error: 'No annotations provided' };
+    if (data.markers.length === 0) {
+        return { valid: false, error: 'No markers provided' };
     }
-    if (data.annotations.length > MAX_ANNOTATIONS) {
-        return { valid: false, error: `Too many annotations (max ${MAX_ANNOTATIONS})` };
+    if (data.markers.length > MAX_MARKERS) {
+        return { valid: false, error: `Too many markers (max ${MAX_MARKERS})` };
     }
-    // Validate each annotation
-    for (let i = 0; i < data.annotations.length; i++) {
-        const result = validateAnnotation(data.annotations[i], i);
+    // Validate each marker
+    for (let i = 0; i < data.markers.length; i++) {
+        const result = validateMarker(data.markers[i], i);
         if (!result.valid) {
             return { valid: false, error: result.error };
         }