@codewithdan/zingit 0.17.4 → 0.17.6

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>;
-}

package/server/dist/agents/copilot.js

@@ -1,182 +0,0 @@
-// server/src/agents/copilot.ts
-// Agent that uses GitHub Copilot SDK
-import { CopilotClient } from '@github/copilot-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 CopilotAgent extends BaseAgent {
-    name = 'copilot';
-    model;
-    client = null;
-    constructor() {
-        super();
-        this.model = process.env.COPILOT_MODEL || 'claude-sonnet-4-20250514';
-    }
-    async start() {
-        // Initialize the Copilot client
-        this.client = new CopilotClient({
-            logLevel: 'info',
-            autoRestart: true,
-        });
-        await this.client.start();
-        console.log(`✓ Copilot SDK initialized (model: ${this.model})`);
-    }
-    async stop() {
-        if (this.client) {
-            await this.client.stop();
-            this.client = null;
-        }
-    }
-    async createSession(wsRef, projectDir, resumeSessionId) {
-        if (!this.client) {
-            throw new Error('Copilot client not initialized');
-        }
-        const send = (data) => {
-            const ws = wsRef.current;
-            if (ws && ws.readyState === ws.OPEN) {
-                ws.send(JSON.stringify(data));
-            }
-        };
-        // System message and permission config for both new and resumed sessions
-        const sessionConfig = {
-            model: this.model,
-            streaming: true,
-            systemMessage: {
-                mode: 'append',
-                content: `
-<context>
-You are a UI debugging assistant working in the project directory: ${projectDir}
-
-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
-
-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
-</context>
-`
-            },
-            onPermissionRequest: async (request) => {
-                // Auto-approve read/write operations for file edits
-                if (request.kind === 'read' || request.kind === 'write') {
-                    return { kind: 'approved' };
-                }
-                return { kind: 'approved' };
-            },
-        };
-        // Resume existing session if we have a sessionId, otherwise create new session
-        const session = resumeSessionId
-            ? await this.client.resumeSession(resumeSessionId, sessionConfig)
-            : await this.client.createSession(sessionConfig);
-        // Track temp files for cleanup on session destroy (prevents race condition)
-        const sessionTempFiles = [];
-        // Subscribe to streaming events and capture unsubscribe function
-        const unsubscribe = session.on((event) => {
-            switch (event.type) {
-                case 'assistant.message_delta':
-                    // Streaming chunk
-                    send({ type: 'delta', content: event.data.deltaContent });
-                    break;
-                case 'assistant.message':
-                    // Final message (we already sent deltas, so just log)
-                    console.log('[Copilot Agent] Assistant message complete');
-                    break;
-                case 'tool.execution_start':
-                    console.log('[Copilot Agent] Tool executing:', event.data.toolName);
-                    send({ type: 'tool_start', tool: event.data.toolName });
-                    break;
-                case 'tool.execution_complete':
-                    console.log('[Copilot Agent] Tool complete:', event.data.toolCallId);
-                    send({ type: 'tool_end', tool: event.data.toolCallId });
-                    break;
-                case 'session.idle':
-                    console.log('[Copilot Agent] Session idle, sending idle message');
-                    send({ type: 'idle' });
-                    break;
-                case 'session.error':
-                    console.error('[Copilot Agent] Session error:', event.data.message);
-                    send({ type: 'error', message: event.data.message });
-                    break;
-            }
-        });
-        return {
-            send: async (msg) => {
-                try {
-                    console.log('[Copilot Agent] send() called, processing request...');
-                    // If images are provided, save them as temp files and attach them
-                    // Copilot SDK supports file attachments for images
-                    const attachments = [];
-                    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);
-                            attachments.push({
-                                type: 'file',
-                                path: tempPath,
-                                displayName: img.label || `Screenshot ${i + 1}`
-                            });
-                        }
-                    }
-                    console.log('[Copilot Agent] Calling session.sendAndWait...');
-                    await session.sendAndWait({
-                        prompt: msg.prompt,
-                        attachments: attachments.length > 0 ? attachments : undefined
-                    });
-                    console.log('[Copilot Agent] session.sendAndWait completed');
-                }
-                catch (err) {
-                    console.error('[Copilot Agent] Error in send():', err.message);
-                    send({ type: 'error', message: err.message });
-                }
-                // Note: Temp files cleaned up on session destroy to avoid race condition
-            },
-            destroy: async () => {
-                try {
-                    unsubscribe();
-                    await session.destroy();
-                }
-                finally {
-                    // Clean up all temp files even if destroy() 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: () => session.sessionId
-        };
-    }
-}