@codewithdan/zingit 0.17.5 → 0.17.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codewithdan/zingit",
-  "version": "0.17.5",
+  "version": "0.17.7",
   "description": "AI-powered UI marker tool - point, mark, and let AI fix it",
   "type": "module",
   "engines": {
@@ -60,7 +60,7 @@
   "homepage": "https://github.com/danwahlin/zingit#readme",
   "dependencies": {
     "@anthropic-ai/claude-agent-sdk": "^0.2.17",
-    "@codewithdan/agent-sdk-core": "^0.2.0",
+    "@codewithdan/agent-sdk-core": "^0.3.1",
     "@github/copilot-sdk": "^0.1.16",
     "@openai/codex-sdk": ">=0.80.0",
     "diff": "^8.0.3",

package/server/dist/handlers/messageHandlers.js

@@ -271,7 +271,7 @@ export async function handleMessage(ws, state, msg, deps) {
             prompt = `[Context: User is currently on page: ${msg.pageUrl}]\n\n${msg.content}`;
         }
         // Add timeout to detect if SDK hangs
-        const timeoutMs = 120000; // 2 minutes
+        const timeoutMs = 120000; // 2 minutes — client timeout (zing-ui.ts) must exceed this
         const sendPromise = state.session.send({ prompt });
         const timeoutPromise = new Promise((_, reject) => setTimeout(() => reject(new Error('Agent response timeout')), timeoutMs));
         await Promise.race([sendPromise, timeoutPromise]);

package/server/dist/index.js

@@ -1,7 +1,7 @@
 // server/src/index.ts
 import { WebSocketServer } from 'ws';
 import { CoreProviderAdapter } from './agents/core-adapter.js';
-import { CopilotProvider, ClaudeProvider, CodexProvider, } from '@codewithdan/agent-sdk-core';
+import { CopilotProvider, ClaudeProvider, CodexProvider, OpenCodeProvider, } from '@codewithdan/agent-sdk-core';
 import { spawn } from 'node:child_process';
 import { userInfo } from 'node:os';
 import { detectAgents } from './utils/agent-detection.js';
@@ -57,6 +57,7 @@ function createAgentFactory() {
         copilot: () => new CoreProviderAdapter(new CopilotProvider()),
         claude: () => new CoreProviderAdapter(new ClaudeProvider(claudeOpts)),
         codex: () => new CoreProviderAdapter(new CodexProvider()),
+        opencode: () => new CoreProviderAdapter(new OpenCodeProvider()),
     };
 }
 const agentFactories = createAgentFactory();

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

@@ -12,6 +12,10 @@ export interface Checkpoint {
     filesModified: number;
     linesChanged: number;
 }
+/**
+ * Canonical definition of MarkerSummary.
+ * Keep in sync with: client/src/types/index.ts (MarkerSummary)
+ */
 export interface MarkerSummary {
     id: string;
     identifier: string;
@@ -29,6 +33,10 @@ export interface ChangeHistory {
     checkpoints: Checkpoint[];
     currentCheckpointId: string | null;
 }
+/**
+ * Canonical definition of CheckpointInfo.
+ * Keep in sync with: client/src/types/index.ts (CheckpointInfo)
+ */
 export interface CheckpointInfo {
     id: string;
     timestamp: string;

package/server/dist/types.d.ts

@@ -29,6 +29,10 @@ export interface AgentSession {
     destroy(): Promise<void>;
     getSessionId?(): string | null;
 }
+/**
+ * Canonical definition of a Marker.
+ * Keep in sync with: client/src/types/index.ts (Marker)
+ */
 export interface Marker {
     id: string;
     selector: string;
@@ -43,6 +47,10 @@ export interface Marker {
     parentHtml?: string;
     screenshot?: string;
 }
+/**
+ * Canonical definition of BatchData.
+ * Keep in sync with: client/src/types/index.ts (BatchData)
+ */
 export interface BatchData {
     pageUrl: string;
     pageTitle: string;

package/server/dist/utils/agent-detection.js

@@ -35,10 +35,11 @@ function checkCodexAuth() {
  */
 export async function detectAgents() {
     // Run all CLI checks in parallel for better performance
-    const [claudeCheck, copilotCheck, codexCheck] = await Promise.all([
+    const [claudeCheck, copilotCheck, codexCheck, opencodeCheck] = await Promise.all([
         checkCLI('claude'),
         checkCLI('copilot'),
-        checkCLI('codex')
+        checkCLI('codex'),
+        checkCLI('opencode')
     ]);
     const agents = [];
     // Claude Code
@@ -80,6 +81,15 @@ export async function detectAgents() {
             installCommand: 'npm install -g @openai/codex'
         });
     }
+    // OpenCode
+    agents.push({
+        name: 'opencode',
+        displayName: 'OpenCode',
+        available: opencodeCheck.installed,
+        version: opencodeCheck.version,
+        reason: opencodeCheck.installed ? undefined : 'OpenCode CLI not found',
+        installCommand: 'npm install -g opencode-ai'
+    });
     return agents;
 }
 /**

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

@@ -1,17 +0,0 @@
-import { BaseAgent } from './base.js';
-import type { AgentSession } from '../types.js';
-export declare class ClaudeCodeAgent extends BaseAgent {
-    name: string;
-    model: string;
-    start(): Promise<void>;
-    stop(): Promise<void>;
-    /**
-     * Build content blocks for multimodal message with images and text
-     */
-    private buildContentBlocks;
-    /**
-     * Create a generator that yields the initial user message with optional images
-     */
-    private createMessageGenerator;
-    createSession(wsRef: import('../types.js').WebSocketRef, projectDir: string, resumeSessionId?: string): Promise<AgentSession>;
-}

package/server/dist/agents/claude.js

@@ -1,175 +0,0 @@
-// server/src/agents/claude.ts
-// Agent that uses Claude Agent SDK
-import { query } from '@anthropic-ai/claude-agent-sdk';
-import { BaseAgent } from './base.js';
-export class ClaudeCodeAgent extends BaseAgent {
-    name = 'claude';
-    model = 'claude-sonnet-4-20250514';
-    async start() {
-        console.log(`✓ Claude Agent SDK initialized (model: ${this.model})`);
-    }
-    async stop() {
-        // SDK handles cleanup automatically
-    }
-    /**
-     * Build content blocks for multimodal message with images and text
-     */
-    buildContentBlocks(prompt, images) {
-        const content = [];
-        // Add images first so Claude sees them before the text instructions
-        if (images && images.length > 0) {
-            for (const img of images) {
-                // Add label as text before each image for context
-                if (img.label) {
-                    content.push({ type: 'text', text: `[${img.label}]` });
-                }
-                content.push({
-                    type: 'image',
-                    source: {
-                        type: 'base64',
-                        media_type: img.mediaType,
-                        data: img.base64
-                    }
-                });
-            }
-        }
-        // Add the main text prompt
-        content.push({ type: 'text', text: prompt });
-        return content;
-    }
-    /**
-     * Create a generator that yields the initial user message with optional images
-     */
-    async *createMessageGenerator(prompt, images) {
-        const content = this.buildContentBlocks(prompt, images);
-        yield {
-            type: 'user',
-            message: {
-                role: 'user',
-                content
-            },
-            parent_tool_use_id: null,
-            session_id: '' // SDK will assign the actual session ID
-        };
-    }
-    async createSession(wsRef, projectDir, resumeSessionId) {
-        const send = (data) => {
-            const ws = wsRef.current;
-            if (ws && ws.readyState === ws.OPEN) {
-                ws.send(JSON.stringify(data));
-            }
-        };
-        // Track session ID for conversation continuity (stable V1 resume feature)
-        // Start with provided sessionId if resuming previous conversation
-        let sessionId = resumeSessionId;
-        // Track sent content to avoid duplicates (in case SDK sends same message multiple times)
-        const sentContent = new Set();
-        return {
-            send: async (msg) => {
-                try {
-                    // Use generator function to pass multimodal content (text + images)
-                    const messageGenerator = this.createMessageGenerator(msg.prompt, msg.images);
-                    const response = query({
-                        prompt: messageGenerator,
-                        options: {
-                            model: this.model,
-                            cwd: projectDir,
-                            permissionMode: 'acceptEdits', // Auto-approve file edits (no interactive terminal)
-                            // Resume previous session if we have a session ID (enables follow-up conversations)
-                            ...(sessionId && { resume: sessionId }),
-                            systemPrompt: `You are a direct, efficient UI modification assistant.
-
-CRITICAL EFFICIENCY RULES:
-1. Use the provided selector and HTML context to quickly locate the target element
-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 markers are or describing the codebase unnecessarily
-
-WHEN TO BE BRIEF (90% of cases):
-- Text changes: Find, change, confirm (1-2 sentences)
-- Style changes: Find, modify CSS, confirm
-- Simple DOM changes: Make the change, state what you did
-
-WHEN TO BE THOROUGH (10% of cases):
-- Ambiguous selectors (multiple matches)
-- Complex architectural changes
-- Need to understand component interactions
-
-Response format:
-- **Action taken:** Brief statement of what changed
-- **File:** Path to modified file
-- **Summary:** 1-2 sentence confirmation
-
-Use screenshots to verify you're targeting the right element, but don't over-explain their purpose.`
-                        }
-                    });
-                    // Process streaming response
-                    for await (const message of response) {
-                        switch (message.type) {
-                            case 'system':
-                                // Capture session ID from init message for follow-up conversations
-                                if ('subtype' in message && message.subtype === 'init') {
-                                    sessionId = message.session_id;
-                                    console.log('[Claude Agent] Session initialized:', sessionId);
-                                }
-                                break;
-                            case 'assistant':
-                                // Extract text content from assistant messages (content is nested in message.content)
-                                if ('message' in message && message.message && 'content' in message.message) {
-                                    const content = message.message.content;
-                                    if (Array.isArray(content)) {
-                                        for (const block of content) {
-                                            if (block.type === 'text' && block.text) {
-                                                // Deduplicate content (SDK may replay conversation history)
-                                                const contentHash = `${block.text.substring(0, 100)}_${block.text.length}`;
-                                                if (!sentContent.has(contentHash)) {
-                                                    sentContent.add(contentHash);
-                                                    send({ type: 'delta', content: block.text });
-                                                }
-                                            }
-                                        }
-                                    }
-                                }
-                                break;
-                            case 'stream_event':
-                                // Handle streaming events for real-time updates
-                                if (message.event?.type === 'content_block_delta') {
-                                    const delta = message.event.delta;
-                                    if (delta && 'text' in delta) {
-                                        console.log('[Claude Agent] Content block delta, text length:', delta.text.length);
-                                        send({ type: 'delta', content: delta.text });
-                                    }
-                                }
-                                else if (message.event?.type === 'content_block_stop') {
-                                    console.log('[Claude Agent] Content block stopped');
-                                }
-                                else if (message.event?.type === 'message_stop') {
-                                    console.log('[Claude Agent] Message stopped');
-                                }
-                                break;
-                            case 'tool_progress':
-                                // Tool is being executed
-                                console.log('[Claude Agent] Tool executing:', message.tool_name);
-                                send({ type: 'tool_start', tool: message.tool_name });
-                                break;
-                            case 'result':
-                                // Query completed
-                                console.log('[Claude Agent] Query completed, sending idle');
-                                send({ type: 'idle' });
-                                break;
-                        }
-                    }
-                    console.log('[Claude Agent] Response stream ended');
-                }
-                catch (err) {
-                    send({ type: 'error', message: err.message });
-                }
-            },
-            destroy: async () => {
-                // SDK handles session cleanup automatically
-            },
-            getSessionId: () => sessionId || null
-        };
-    }
-}

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

@@ -1,11 +0,0 @@
-import { BaseAgent } from './base.js';
-import type { AgentSession } from '../types.js';
-export declare class CodexAgent extends BaseAgent {
-    name: string;
-    model: string;
-    private codex;
-    constructor();
-    start(): Promise<void>;
-    stop(): Promise<void>;
-    createSession(wsRef: import('../types.js').WebSocketRef, projectDir: string, resumeSessionId?: string): Promise<AgentSession>;
-}

package/server/dist/agents/codex.js

@@ -1,202 +0,0 @@
-// server/src/agents/codex.ts
-// Agent that uses OpenAI Codex SDK
-import { Codex } from '@openai/codex-sdk';
-import { BaseAgent } from './base.js';
-import { promises as fs } from 'fs';
-import * as path from 'path';
-import * as os from 'os';
-import { randomUUID } from 'crypto';
-export class CodexAgent extends BaseAgent {
-    name = 'codex';
-    model;
-    codex = null;
-    constructor() {
-        super();
-        this.model = process.env.CODEX_MODEL || 'gpt-5.2-codex';
-    }
-    async start() {
-        // Initialize the Codex client
-        // Uses cached credentials from ~/.codex/auth.json (login via `codex` CLI)
-        this.codex = new Codex();
-        console.log(`✓ Codex SDK initialized (model: ${this.model})`);
-    }
-    async stop() {
-        // Codex SDK doesn't require explicit cleanup
-        this.codex = null;
-    }
-    async createSession(wsRef, projectDir, resumeSessionId) {
-        if (!this.codex) {
-            throw new Error('Codex client not initialized');
-        }
-        const send = (data) => {
-            const ws = wsRef.current;
-            if (ws && ws.readyState === ws.OPEN) {
-                ws.send(JSON.stringify(data));
-            }
-        };
-        // Thread options for both new and resumed threads
-        const threadOptions = {
-            workingDirectory: projectDir,
-        };
-        // Resume existing thread if we have a thread ID, otherwise start new thread
-        const thread = resumeSessionId
-            ? this.codex.resumeThread(resumeSessionId, threadOptions)
-            : this.codex.startThread(threadOptions);
-        let abortController = null;
-        // Track temp files for cleanup on session destroy (prevents race condition)
-        const sessionTempFiles = [];
-        return {
-            send: async (msg) => {
-                try {
-                    abortController = new AbortController();
-                    const input = [];
-                    // If images are provided, save them as temp files and add to structured input
-                    if (msg.images && msg.images.length > 0) {
-                        const tempDir = os.tmpdir();
-                        for (let i = 0; i < msg.images.length; i++) {
-                            const img = msg.images[i];
-                            // Use UUID to avoid filename collisions
-                            const ext = img.mediaType.split('/')[1] || 'png';
-                            const tempPath = path.join(tempDir, `zingit-screenshot-${randomUUID()}.${ext}`);
-                            // Decode base64 to buffer with error handling
-                            let buffer;
-                            try {
-                                buffer = Buffer.from(img.base64, 'base64');
-                            }
-                            catch (decodeErr) {
-                                console.warn(`ZingIt: Failed to decode base64 for image ${i + 1}:`, decodeErr);
-                                continue; // Skip this image
-                            }
-                            // Save with restrictive permissions (owner read/write only)
-                            await fs.writeFile(tempPath, buffer, { mode: 0o600 });
-                            sessionTempFiles.push(tempPath);
-                            // Add label text before image
-                            if (img.label) {
-                                input.push({ type: 'text', text: `[${img.label}]` });
-                            }
-                            // Add image as local_image input
-                            input.push({ type: 'local_image', path: tempPath });
-                        }
-                    }
-                    // Add system instructions and main prompt
-                    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
-- Identify the exact appearance that needs to be changed
-- Verify you're targeting the correct element based on its visual representation
-
-IMPORTANT: Format all responses using markdown:
-- Use **bold** for emphasis on important points
-- Use numbered lists for sequential steps (1. 2. 3.)
-- Use bullet points for non-sequential items
-- Use code blocks with \`\`\`language syntax for code examples
-- Use inline \`code\` for file paths, selectors, and technical terms
-
-`;
-                    input.push({ type: 'text', text: systemInstructions + msg.prompt });
-                    // Use runStreamed with structured input for real-time progress
-                    const { events } = await thread.runStreamed(input);
-                    for await (const event of events) {
-                        // Check if aborted
-                        if (abortController?.signal.aborted) {
-                            break;
-                        }
-                        switch (event.type) {
-                            case 'item.started':
-                                // Tool/action started
-                                if (event.item?.type) {
-                                    const toolName = getToolDisplayName(event.item);
-                                    send({ type: 'tool_start', tool: toolName });
-                                }
-                                break;
-                            case 'item.completed':
-                                // Item completed - extract content based on type
-                                if (event.item) {
-                                    switch (event.item.type) {
-                                        case 'agent_message':
-                                            // Agent's text response
-                                            send({ type: 'delta', content: event.item.text + '\n' });
-                                            break;
-                                        case 'reasoning':
-                                            // Optional: show reasoning
-                                            send({ type: 'delta', content: `\n*[Reasoning]* ${event.item.text}\n` });
-                                            break;
-                                        case 'command_execution':
-                                            // Command was executed
-                                            send({ type: 'delta', content: `\n$ ${event.item.command}\n${event.item.aggregated_output}\n` });
-                                            break;
-                                        case 'file_change':
-                                            // Files were changed
-                                            const files = event.item.changes.map(c => `${c.kind}: ${c.path}`).join(', ');
-                                            send({ type: 'delta', content: `\n*[Files changed]* ${files}\n` });
-                                            break;
-                                    }
-                                    send({ type: 'tool_end', tool: event.item.type });
-                                }
-                                break;
-                            case 'turn.completed':
-                                // Turn finished
-                                console.log('[Codex Agent] Turn completed, sending idle');
-                                send({ type: 'idle' });
-                                break;
-                            case 'turn.failed':
-                                // Turn failed with error
-                                send({ type: 'error', message: event.error?.message || 'Codex turn failed' });
-                                break;
-                            case 'error':
-                                send({ type: 'error', message: event.message || 'Unknown Codex error' });
-                                break;
-                        }
-                    }
-                    console.log('[Codex Agent] Event stream ended');
-                }
-                catch (err) {
-                    send({ type: 'error', message: err.message });
-                }
-                // Note: Temp files cleaned up on session destroy to avoid race condition
-            },
-            destroy: async () => {
-                try {
-                    // Abort any ongoing operation
-                    if (abortController) {
-                        abortController.abort();
-                        abortController = null;
-                    }
-                    // Thread cleanup happens automatically
-                }
-                finally {
-                    // Clean up all temp files even if abort fails
-                    for (const tempPath of sessionTempFiles) {
-                        try {
-                            await fs.unlink(tempPath);
-                        }
-                        catch (cleanupErr) {
-                            // Ignore errors (file may already be deleted)
-                            console.warn(`ZingIt: Failed to clean up temp file ${tempPath}:`, cleanupErr.message);
-                        }
-                    }
-                    sessionTempFiles.length = 0; // Clear the array
-                }
-            },
-            getSessionId: () => thread.id
-        };
-    }
-}
-// Helper to get a readable tool name
-function getToolDisplayName(item) {
-    switch (item.type) {
-        case 'command_execution':
-            return `Running: ${item.command?.split(' ')[0] || 'command'}`;
-        case 'mcp_tool_call':
-            return `Tool: ${item.tool || 'mcp'}`;
-        case 'file_change':
-            return 'Editing files';
-        case 'web_search':
-            return 'Searching web';
-        case 'reasoning':
-            return 'Thinking...';
-        default:
-            return item.type;
-    }
-}

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

@@ -1,11 +0,0 @@
-import { BaseAgent } from './base.js';
-import type { AgentSession } from '../types.js';
-export declare class CopilotAgent extends BaseAgent {
-    name: string;
-    model: string;
-    private client;
-    constructor();
-    start(): Promise<void>;
-    stop(): Promise<void>;
-    createSession(wsRef: import('../types.js').WebSocketRef, projectDir: string, resumeSessionId?: string): Promise<AgentSession>;
-}