@codewithdan/zingit 0.13.0 → 0.14.0

package/AGENTS.md

@@ -2,10 +2,18 @@
 
 ## Project Overview
 
-ZingIt is a browser-based annotation tool that allows users to click on webpage elements and add notes/instructions. These annotations are then sent to an AI agent (Claude Code or GitHub Copilot) which can automatically implement the requested changes.
+ZingIt is a browser-based annotation tool that allows users to click on webpage elements and add notes/instructions. These annotations are then sent to an AI agent (Claude Code, GitHub Copilot CLI, or OpenAI Codex) which can automatically implement the requested changes.
 
 **Use case**: Point-and-click UI feedback that gets automatically implemented by AI.
 
+**Key Features**:
+- Visual element selection with annotation
+- Multi-agent support (Claude, Copilot, Codex)
+- Automatic screenshot capture
+- Change history tracking
+- Remote/local URL detection with warnings
+- Keyboard shortcuts for fast workflow
+
 ## Architecture
 
 ```
@@ -13,17 +21,18 @@ ZingIt is a browser-based annotation tool that allows users to click on webpage
 │                        Browser                               │
 │  ┌─────────────────────────────────────────────────────┐    │
 │  │                   ZingIt Client                      │    │
-│  │  (Lit Web Components injected via bookmarklet)       │    │
+│  │  (Lit Web Components - ?zingit URL parameter)        │    │
 │  └──────────────────────┬──────────────────────────────┘    │
 └─────────────────────────┼───────────────────────────────────┘
                           │ WebSocket
                           ▼
 ┌─────────────────────────────────────────────────────────────┐
 │                    ZingIt Server                             │
-│  ┌─────────────┐    ┌─────────────┐    ┌─────────────┐     │
-│  │ WebSocket   │───▶│   Agent     │───▶│ Claude Code │     │
-│  │ Handler     │    │  Registry   │    │ or Copilot  │     │
-│  └─────────────┘    └─────────────┘    └─────────────┘     │
+│  ┌─────────────┐    ┌─────────────┐    ┌──────────────┐    │
+│  │ WebSocket   │───▶│   Agent     │───▶│ Claude Code  │    │
+│  │ Handler     │    │  Registry   │    │   Copilot    │    │
+│  │             │    │             │    │    Codex     │    │
+│  └─────────────┘    └─────────────┘    └──────────────┘    │
 └─────────────────────────────────────────────────────────────┘
 ```
 
@@ -42,7 +51,10 @@ zingit/
 │   │   │   ├── settings.ts    # Configuration panel
 │   │   │   ├── response.ts    # Agent response display
 │   │   │   ├── toast.ts       # Notification toasts
-│   │   │   └── help.ts        # Keyboard shortcuts overlay
+│   │   │   ├── help.ts        # Keyboard shortcuts overlay
+│   │   │   ├── history.ts     # Change history panel
+│   │   │   ├── site-header.ts # Demo site navigation
+│   │   │   └── site-footer.ts # Demo site footer
 │   │   ├── services/
 │   │   │   ├── selector.ts    # CSS selector generation
 │   │   │   ├── storage.ts     # localStorage persistence
@@ -57,14 +69,22 @@ zingit/
 │   ├── about.html             # Test page
 │   ├── contact.html           # Test page
 │   ├── styles.css             # Shared styles for test pages
-│   └── vite.config.ts         # Build config (IIFE for bookmarklet)
+│   ├── deploy/                # Build output for GitHub Pages
+│   │   ├── index.html         # Static version of demo site
+│   │   └── styles.css         # Copied styles
+│   ├── scripts/
+│   │   └── prepare-deploy.js  # Prepares deploy folder
+│   └── vite.config.ts         # Build config
 │
 ├── server/                    # Node.js WebSocket server
 │   └── src/
 │       ├── agents/
 │       │   ├── base.ts        # Abstract base agent class
 │       │   ├── claude.ts      # Claude Code CLI integration
-│       │   └── copilot.ts     # GitHub Copilot SDK integration
+│       │   ├── copilot.ts     # GitHub Copilot SDK integration
+│       │   └── codex.ts       # OpenAI Codex integration
+│       ├── handlers/
+│       │   └── messageHandlers.ts  # WebSocket message handlers
 │       ├── types.ts           # Server-side TypeScript interfaces
 │       └── index.ts           # WebSocket server entry point
 │
@@ -80,11 +100,12 @@ zingit/
 - **Shadow DOM** - Style isolation (critical for bookmarklet injection)
 
 ### Server
-- **Node.js** - Runtime
+- **Node.js** - Runtime (>=22.0.0)
 - **ws** - WebSocket library
 - **tsx** - TypeScript execution
 - **@anthropic-ai/claude-agent-sdk** - Claude Code integration
 - **@github/copilot-sdk** - GitHub Copilot integration
+- **@openai/codex-sdk** - OpenAI Codex integration
 
 ## Key Concepts
 
@@ -98,16 +119,24 @@ An annotation captures:
 - `parentContext` - Parent element path for context
 - `textContent` - Plain text content
 
+### Change History
+The history component tracks all changes made by the AI agent:
+- Displays a chronological list of modifications
+- Shows file paths and change summaries
+- Allows users to review what was changed
+- Accessible via the clock icon in the toolbar
+
 ### WebSocket Messages
 - **Client → Server**: `batch` (send annotations), `message` (follow-up), `reset` (clear session)
 - **Server → Client**: `connected`, `processing`, `delta` (streaming), `tool_start`/`tool_end`, `idle`, `error`
 
 ### Agent System
 The server uses a pluggable agent architecture:
-- Set `AGENT=claude` or `AGENT=copilot` environment variable
+- Set `AGENT=claude`, `AGENT=copilot`, or `AGENT=codex` environment variable
 - Agents implement `Agent` interface with `createSession()` and `formatPrompt()`
 - Claude agent spawns `claude --print` CLI process
 - Copilot agent uses the GitHub Copilot SDK
+- Codex agent uses the OpenAI Codex SDK
 
 ## Development Commands
 
@@ -116,26 +145,36 @@ The server uses a pluggable agent architecture:
 cd client
 npm install
 npm run dev          # Start Vite dev server (http://localhost:5200)
-npm run build        # Build for production (outputs IIFE bundle)
+npm run build        # Build for production
+npm run deploy       # Prepare and deploy to GitHub Pages
 npm run typecheck    # Type check without emitting
 npm run typecheck:watch  # Watch mode type checking
 ```
 
+**Note**: The deploy script (`npm run deploy`) runs `prepare-deploy.js` which copies files to the `deploy/` folder, then uses `gh-pages` to publish to GitHub Pages.
+
 ### Server
 ```bash
 cd server
 npm install
-AGENT=claude npm run dev   # Start with Claude Code agent
-AGENT=copilot npm run dev  # Start with GitHub Copilot agent
-npm run typecheck          # Type check
-npm run typecheck:watch    # Watch mode type checking
+npx cross-env AGENT=claude npm run dev   # Start with Claude Code agent
+npx cross-env AGENT=copilot npm run dev  # Start with GitHub Copilot agent
+npx cross-env AGENT=codex npm run dev    # Start with OpenAI Codex agent
+npm run typecheck                         # Type check
+npm run typecheck:watch                   # Watch mode type checking
+```
+
+### Running the Published Package
+```bash
+# For external users
+npx cross-env PROJECT_DIR=/path/to/your/project npx @codewithdan/zingit
 ```
 
 ## Keyboard Shortcuts
 
 | Key | Action |
 |-----|--------|
-| `P` | Toggle annotation mode on/off |
+| `Z` | Toggle annotation mode on/off |
 | `Ctrl/Cmd+Z` | Undo last annotation |
 | `?` | Show help overlay |
 | `` ` `` | Toggle ZingIt visibility |
@@ -151,8 +190,15 @@ The client persists state to `localStorage`:
 
 ## Important Implementation Details
 
+### Remote URL Detection
+ZingIt detects when you're editing a published/remote site versus local development:
+- **Local** (localhost, 127.0.0.1, etc.) - Changes appear immediately on refresh
+- **Remote** (published sites) - Shows warning toast that changes are saved locally only
+- Badge displayed in toolbar: "💻 Local" or "🌐 Remote"
+- Warning can be dismissed but persists until user understands the limitation
+
 ### Shadow DOM
-All components use Shadow DOM for style isolation. This is critical because ZingIt is injected as a bookmarklet into arbitrary pages - styles must not leak in or out.
+All components use Shadow DOM for style isolation. This is critical because ZingIt is injected into arbitrary pages - styles must not leak in or out.
 
 ### Viewport Coordinates
 The highlight and marker positioning uses viewport coordinates (not page coordinates) because the main `zing-ui` component is `position: fixed`. Use `getElementViewportRect()` from `geometry.ts`.
@@ -163,6 +209,15 @@ The WebSocket client implements exponential backoff reconnection:
 - Max 10 attempts before showing "Reconnect" button
 - Call `forceReconnect()` to manually retry
 
+### Toast Notifications
+The toast system supports multiple types with different styling:
+- **success** - Green background for successful operations
+- **error** - Red background for failures
+- **info** - Dark gray with subtle border
+- **warning** - Dark gray with orange left border (for remote URL warnings)
+
+Persistent toasts (duration=0) show a close button in the top-right corner.
+
 ### Component Communication
 Components communicate via custom events that bubble through Shadow DOM:
 ```typescript
@@ -173,6 +228,18 @@ this.dispatchEvent(new CustomEvent('save', {
 }));
 ```
 
+### Server Logging
+Request boundaries are logged for debugging:
+```
+[Batch] ===== Request started =====
+[Batch] Prompt preview: Change the background color to blue...
+[Batch] Image count: 2
+... processing logs ...
+[Batch] ===== Request completed =====
+```
+
+This makes it easy to track multiple concurrent requests and debug issues.
+
 ## Common Tasks
 
 ### Adding a New Component
@@ -194,21 +261,42 @@ Edit `client/src/components/toolbar.ts`:
 - Create handler method that dispatches event
 - Wire up event in `zing-ui.ts`
 
+**Note**: Icons use SVG (not emoticons) for professional appearance and better rendering across platforms. The local/remote badge uses inline SVG icons with `currentColor` for theming.
+
 ## Testing
 
-Test pages are available at:
-- `http://localhost:5200/` - Main demo page
+### Demo Site
+The main demo site (`client/index.html`) showcases ZingIt with:
+- Hero section with features
+- Installation instructions
+- Toolbar icon reference table
+- Try it with demo section
+- Try it with your website section
+
+### Test Pages
+Additional test pages are available:
 - `http://localhost:5200/products.html` - Product cards
 - `http://localhost:5200/about.html` - About page with stats/timeline
 - `http://localhost:5200/contact.html` - Contact form and FAQ
 
+Add `?zingit` to any URL to activate the annotation tool.
+
 ## Build Output
 
 The Vite build produces:
-- `dist/zingit.es.js` - ES module version
-- `dist/zingit.iife.js` - IIFE for bookmarklet injection
+- `dist/zingit-client.js` - Bundled client code
 
-The IIFE can be used as a bookmarklet:
-```javascript
-javascript:(function(){var s=document.createElement('script');s.src='http://localhost:5200/dist/zingit.iife.js';document.body.appendChild(s);})()
+Published to npm as `@codewithdan/zingit` and available via CDN:
+```html
+<script src="https://cdn.jsdelivr.net/npm/@codewithdan/zingit@latest/dist/zingit-client.js"></script>
 ```
+
+Users activate ZingIt by adding `?zingit` to any URL: `http://localhost:5200/?zingit`
+
+## GitHub Actions Workflow
+
+Automated release and deployment on commits starting with "release:":
+1. Runs `npm run release` - versions, builds, and publishes to npm
+2. Runs `npm run deploy` - deploys demo site to GitHub Pages
+
+Requires `NPM_TOKEN` secret in repository settings.

package/README.md

@@ -11,57 +11,97 @@ Streamline how you share UI changes with your AI assistant. Select elements, ann
 - **Real-time Streaming** - Watch the AI work in real-time
 - **Smart Selectors** - Auto-generates CSS selectors for precise targeting
 - **Screenshot Capture** - Automatically capture annotated elements to provide visual context to agents
+- **Change History** - Track all modifications made by your AI assistant
+- **Remote/Local Detection** - Warns when editing published sites vs local development
 
 ## Quick Start
 
-### Option 1: Try the Live Demo
+### Option 1: Clone the Repo and Run Locally
 
-Visit **[danwahlin.github.io/zingit](https://danwahlin.github.io/zingit)** and follow the setup steps.
+1. **Install an AI agent** - Install and login to one of these AI agents on your dev machine:
 
-### Option 2: Clone the Repo and Run Locally
+   - [Claude Code](https://github.com/anthropics/claude-code)
+   - [GitHub Copilot CLI](https://github.com/github/copilot-cli)
+   - [OpenAI Codex](https://github.com/openai/codex)
 
-1. Clone the repo.
+2. **Clone and setup**:
 
-2. Install an AI agent (Claude Code, GitHub Copilot CLI, or OpenAI Codex).
-
-- [Claude Code](https://github.com/anthropics/claude-code)
-- [GitHub Copilot CLI](https://github.com/github/copilot-cli)
-- [OpenAI Codex](https://github.com/openai/codex)
+```bash
+git clone https://github.com/danwahlin/zingit.git
+```
 
-3. Start the server:
+3. **Start the ZingIt server** (in one terminal):
 
 ```bash
-PROJECT_DIR=/path/to/your/project npx @codewithdan/zingit
+cd zingit/server
+npm install
+npx cross-env PROJECT_DIR=../client npm run dev
 ```
 
 Server runs on `ws://localhost:3000`
 
-4. Open your web app in a browser.
+4. **Run the demo site** (in another terminal):
 
 ```bash
-cd client
+cd zingit/client
+npm install
 npm run dev
 ```
 
-5. Visit [http://localhost:5200/index.html?zingit](http://localhost:5200/index.html?zingit) to load ZingIt.
+5. Visit [http://localhost:5200/?zingit](http://localhost:5200/?zingit) to see ZingIt in action!
 
-6. Select the agent to use and start annotating!
+6. You'll be prompted to select an AI agent. Start annotating!
 
-### Option 3: Add to Your Page
+### Option 2: Add to Your Website
 
-Follow the step above to start the server, then add this script to your page:
+1. **Start the ZingIt server**:
+
+```bash
+npx cross-env PROJECT_DIR=/path/to/your/project npx @codewithdan/zingit
+```
+
+Replace `/path/to/your/project` with your project path.
+
+2. **Add the ZingIt script** to your HTML pages just before the closing `</body>` tag:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@codewithdan/zingit@latest/client/dist/zingit-client.js"></script>
-<script>ZingIt.connect('ws://localhost:3000');</script>
+<script src="https://cdn.jsdelivr.net/npm/@codewithdan/zingit@latest/dist/zingit-client.js"></script>
 ```
 
+3. **Run your website's dev server** and visit it with `?zingit` added to the URL.
+
+Example: `http://localhost:5200/?zingit`
+
 ## Usage
 
-1. **Press `Z`** to toggle annotation mode
-2. **Click elements** to annotate them
-3. **Click the sparkle icon** (✨) to send to your AI agent
-4. **Watch the agent work** in the response panel
+1. **Press `Z`** to toggle annotation mode on/off
+2. **Click elements** on your page to annotate them - add notes about changes you want
+3. **Click the sparkle icon** (✨) in the toolbar to send annotations to your AI agent
+4. **Watch the agent work** in real-time - the response panel shows streaming updates
+
+### Toolbar Icons
+
+| Icon | Description |
+|------|-------------|
+| **ON/OFF** | Toggle annotation mode |
+| **✨** (Sparkle) | Send annotations to AI agent |
+| **🕒** (Clock) | View change history |
+| **📋** (Copy) | Export annotations as Markdown |
+| **🧹** (Broom) | Clear all annotations |
+| **?** | View keyboard shortcuts |
+| **⚙️** (Gear) | Open settings |
+| **✕** | Close ZingIt toolbar |
+
+### Keyboard Shortcuts
+
+| Key | Action |
+|-----|--------|
+| `Z` | Toggle annotation mode on/off |
+| `Ctrl/Cmd+Z` | Undo last annotation |
+| `?` | Show help overlay |
+| `` ` `` | Toggle ZingIt visibility |
+| `Esc` | Close current panel/modal |
+| `Ctrl/Cmd+Enter` | Save annotation (in modal) |
 
 ## Configuration
 
@@ -89,8 +129,9 @@ zingit/
 ## Troubleshooting
 
 **WebSocket not connected**
-- Ensure server is running: `PROJECT_DIR=/path npx @codewithdan/zingit`
+- Ensure server is running: `npx cross-env PROJECT_DIR=/path npx @codewithdan/zingit`
 - Check WebSocket URL in settings (default: `ws://localhost:3000`)
+- Make sure you've added `?zingit` to your URL
 
 **Agent not responding**
 - Verify AI agent is installed and authenticated
@@ -100,6 +141,11 @@ zingit/
 - Annotations are URL-specific and stored in localStorage
 - Changing pages clears annotations
 
+**Changes not appearing on published site**
+- If you see a "Remote" badge in the toolbar, you're editing a published site
+- Changes are saved locally only - to see them, run the project locally or deploy the updated files
+- For best experience, use ZingIt with local development (localhost)
+
 ## License
 
 MIT

package/client/dist/zingit-client.js

@@ -25,7 +25,7 @@
           class="edit-mode-badge ${this.isRemoteUrl?"remote":"local"}"
           title="${this.isRemoteUrl?"Changes saved locally - deploy to see on this URL":"Local development - changes appear on refresh"}"
         >
-          ${this.isRemoteUrl?"🌐 Remote":"💻 Local"}
+          ${this.isRemoteUrl?$`<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 4px; vertical-align: middle;"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>Remote`:$`<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 4px; vertical-align: middle;"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>Local`}
         </div>
 
         <div class="divider"></div>
@@ -1758,8 +1758,16 @@
       <div class="toast-container">
         ${this.toasts.map(A=>$`
           <div class="toast ${A.type} ${this.exitingIds.has(A.id)?"exiting":""}">
+            ${0===A.duration?$`
+              <button class="toast-close" @click=${()=>this.dismiss(A.id)} title="Dismiss">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <line x1="18" y1="6" x2="6" y2="18"/>
+                  <line x1="6" y1="6" x2="18" y2="18"/>
+                </svg>
+              </button>
+            `:""}
             <div class="toast-content">
-              <span>${A.message}</span>
+              <span style="white-space: pre-line;">${A.message}</span>
               ${A.action?$`
                 <button class="toast-action" @click=${()=>this.handleAction(A)}>
                   ${A.action.label}
@@ -1789,15 +1797,17 @@
     }
 
     .toast {
-      padding: 10px 16px;
+      position: relative;
+      padding: 12px 36px 12px 16px;
       border-radius: 8px;
       font-size: 13px;
       font-weight: 500;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
       animation: slideUp 0.2s ease-out;
       pointer-events: auto;
-      max-width: 300px;
-      text-align: center;
+      max-width: 400px;
+      text-align: left;
+      line-height: 1.5;
     }
 
     .toast.success {
@@ -1816,6 +1826,12 @@
       border: 1px solid #374151;
     }
 
+    .toast.warning {
+      background: #1f2937;
+      color: white;
+      border-left: 4px solid #f59e0b;
+    }
+
     .toast.exiting {
       animation: slideDown 0.2s ease-in forwards;
     }
@@ -1842,6 +1858,25 @@
       background: rgba(255, 255, 255, 0.3);
     }
 
+    .toast-close {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      background: transparent;
+      border: none;
+      color: white;
+      cursor: pointer;
+      padding: 4px;
+      display: flex;
+      align-items: center;
+      opacity: 0.6;
+      transition: opacity 0.15s ease;
+    }
+
+    .toast-close:hover {
+      opacity: 1;
+    }
+
     @keyframes slideUp {
       from {
         opacity: 0;
@@ -2854,7 +2889,7 @@
       font-family: inherit;
       border: 1px solid #4b5563;
     }
-  `,ac([hA({type:Boolean})],cc.prototype,"visible",2),ac([hA({type:String})],cc.prototype,"message",2),ac([hA({type:Number})],cc.prototype,"filesModified",2),ac([hA({type:Number})],cc.prototype,"timeout",2),ac([gA()],cc.prototype,"remainingTime",2),cc=ac([cA("zing-undo-bar")],cc);var lc=Object.defineProperty,Bc=Object.getOwnPropertyDescriptor,hc=(A,e,t,n)=>{for(var s,r=n>1?void 0:n?Bc(e,t):e,o=A.length-1;o>=0;o--)(s=A[o])&&(r=(n?s(e,t,r):s(r))||r);return n&&r&&lc(e,t,r),r};let gc=class extends iA{constructor(){super(),this.annotations=[],this.settings=Qa(),this.wsConnected=!1,this.wsMaxAttemptsReached=!1,this.processing=!1,this.agentName="",this.agentModel="",this.serverProjectDir="",this.annotationActive=function(){try{const A=localStorage.getItem(ha);return null===A||JSON.parse(A)}catch{return!0}}(),this.availableAgents=[],this.agentPickerOpen=!1,this.agentPickerLoading=!1,this.agentPickerError="",this.isRemoteUrl=!1,this.currentPageUrl="",this.highlightVisible=!1,this.highlightRect={top:0,left:0,width:0,height:0},this.highlightLabel="",this.modalOpen=!1,this.modalEditMode=!1,this.modalAnnotationId="",this.modalSelector="",this.modalIdentifier="",this.modalSelectedText="",this.modalNotes="",this.pendingElement=null,this.modalCaptureScreenshot=!1,this.modalScreenshotPreview="",this.modalScreenshotLoading=!1,this.settingsOpen=!1,this.helpOpen=!1,this.isHidden=!1,this.responseOpen=!1,this.responseContent="",this.responseToolStatus="",this.responseError="",this.responseScreenshotCount=0,this.isFollowUpMessage=!1,this.undoStack=[],this.historyOpen=!1,this.historyCheckpoints=[],this.historyLoading=!1,this.undoBarVisible=!1,this.undoBarFilesModified=0,this.pendingAnnotationRemovals=new Set,this.undoInProgress=!1,this.recentlyDeletedAnnotation=null,this.deleteUndoTimeout=null,this.processingTimeout=null,this.PROCESSING_TIMEOUT_MS=6e4,this.toolbarPosition=function(){try{const A=localStorage.getItem(ga);return A?JSON.parse(A):null}catch{return null}}(),this.isDragging=!1,this.dragOffset={x:0,y:0},this.ws=null,this.clickHandler=this.handleDocumentClick.bind(this),this.mouseMoveHandler=this.handleDocumentMouseMove.bind(this),this.keydownHandler=this.handleDocumentKeydown.bind(this),this.dragMoveHandler=this.handleDragMove.bind(this),this.dragEndHandler=this.handleDragEnd.bind(this)}connectedCallback(){super.connectedCallback(),this.annotations=function(){try{const A=localStorage.getItem(la);if(!A)return[];const e=JSON.parse(A);return e.url!==window.location.href?[]:Array.isArray(e.annotations)?e.annotations:[]}catch{return[]}}();try{const A=this.annotations.filter(A=>{try{return null!==ca(A.selector)}catch(e){return console.warn(`[ZingIt] Invalid selector "${A.selector}":`,e),!1}});if(A.length<this.annotations.length){const e=this.annotations.length-A.length;console.log(`[ZingIt] Removed ${e} orphaned annotation(s) - elements no longer exist`),this.annotations=A,ua(this.annotations),this.updateComplete.then(()=>{this.toast?.info(`Removed ${e} stale annotation${e>1?"s":""}`)})}}catch(e){console.warn("[ZingIt] Error cleaning up orphaned annotations:",e)}const A=function(){try{const A=sessionStorage.getItem(da);return A?JSON.parse(A):null}catch{return null}}();A&&A.content&&(this.responseOpen=!0,this.responseContent=A.content,this.responseError=A.error,this.responseScreenshotCount=A.screenshotCount,function(){try{sessionStorage.removeItem(da)}catch(e){console.warn("ZingIt: Failed to clear response state",e)}}(),this.requestUpdate()),this.initWebSocket(),this.detectRemoteUrl(),document.addEventListener("click",this.clickHandler,!0),document.addEventListener("mousemove",this.mouseMoveHandler,!0),document.addEventListener("keydown",this.keydownHandler)}disconnectedCallback(){super.disconnectedCallback(),this.ws&&(this.ws.disconnect(),this.ws=null),this.deleteUndoTimeout&&(clearTimeout(this.deleteUndoTimeout),this.deleteUndoTimeout=null),this.processingTimeout&&(clearTimeout(this.processingTimeout),this.processingTimeout=null),document.removeEventListener("click",this.clickHandler,!0),document.removeEventListener("mousemove",this.mouseMoveHandler,!0),document.removeEventListener("keydown",this.keydownHandler)}initWebSocket(){this.ws=new ji(this.settings.wsUrl),this.ws.on("open",()=>{this.wsConnected=!0,this.wsMaxAttemptsReached=!1;this.annotations.some(A=>"processing"===A.status)?(console.log("[ZingIt] Reconnected with processing annotations - marking as completed"),this.annotations=this.annotations.map(A=>"processing"===A.status?{...A,status:"completed"}:A),ua(this.annotations),this.toast.success("Connected - changes completed")):this.toast.success("Connected to server"),this.ws?.requestAgents()}),this.ws.on("close",()=>{this.wsConnected=!1}),this.ws.on("max_attempts",()=>{this.wsMaxAttemptsReached=!0,this.toast.error("Connection failed - click Reconnect to retry")}),this.ws.on("message",A=>{this.handleWSMessage(A)}),this.ws.connect()}detectRemoteUrl(){this.currentPageUrl=window.location.href;const A=window.location.hostname;this.isRemoteUrl=!["localhost","127.0.0.1","::1"].includes(A)&&!A.endsWith(".local")&&""!==A,this.isRemoteUrl&&this.updateComplete.then(()=>{setTimeout(()=>this.showRemoteUrlWarning(),500)})}showRemoteUrlWarning(){if(!this.toast)return;const A=this.settings.projectDir||this.serverProjectDir;this.toast.show(`⚠️ Editing Remote Site\n\nYou're editing ${this.currentPageUrl}\n\nChanges will be saved locally to:\n${A}\n\nTo see changes, run the project locally or deploy.`,"warning",0)}handleWSMessage(A){switch(A.type){case"connected":this.agentName=A.agent||"",this.agentModel=A.model||"",this.serverProjectDir=A.projectDir||"",this.isRemoteUrl&&this.serverProjectDir&&this.detectRemoteUrl();break;case"processing":this.processing=!0,this.responseOpen=!0,this.isFollowUpMessage||(this.responseContent=""),this.responseError="",this.startProcessingTimeout();break;case"delta":this.responseContent+=A.content||"",this.settings.autoRefresh&&this.responseContent&&this.saveCurrentResponseState();break;case"tool_start":this.responseToolStatus=A.tool||"";break;case"tool_end":this.responseToolStatus="";break;case"idle":if(this.clearProcessingTimeout(),this.processing=!1,this.responseToolStatus="",this.isFollowUpMessage=!1,this.updateAnnotationStatuses("processing","completed"),this.settings.playSoundOnComplete&&this.playCompletionSound(),this.isRemoteUrl){const A=this.settings.projectDir||this.serverProjectDir;this.responseContent+=`\n\n---\n\n**💡 Important:** You're editing a published site.\n\nChanges have been saved locally to:\n\`${A}\`\n\n**To see your changes:**\n1. Run your project locally, or\n2. Deploy the changes to your hosting service\n\n**Need help?** Check the settings panel for your project directory.`}setTimeout(()=>{this.ws&&this.wsConnected&&this.ws.send({type:"get_history"})},500),this.settings.autoRefresh&&(this.saveCurrentResponseState(),this.toast.info("Refreshing page..."),setTimeout(()=>window.location.reload(),1e3));break;case"error":this.clearProcessingTimeout(),this.responseError=A.message||"Unknown error",this.processing=!1,this.responseToolStatus="",this.isFollowUpMessage=!1,this.undoInProgress=!1,this.pendingAnnotationRemovals.clear(),this.updateAnnotationStatuses("processing","pending"),this.toast.error(A.message||"An error occurred");break;case"reset_complete":this.responseContent="",this.responseError="";break;case"agents":if(this.availableAgents=A.agents||[],this.agentPickerLoading=!1,this.agentPickerError="",!this.agentName&&this.availableAgents.length>0)if(this.settings.selectedAgent){const A=this.availableAgents.find(A=>A.name===this.settings.selectedAgent);A?.available?this.ws?.selectAgent(this.settings.selectedAgent):this.agentPickerOpen=!0}else this.agentPickerOpen=!0;break;case"agent_selected":this.agentName=A.agent||"",this.agentModel=A.model||"",this.agentPickerOpen=!1,this.settings={...this.settings,selectedAgent:this.agentName},wa(this.settings),this.toast.success(`Using ${A.agent||"agent"}`);break;case"agent_error":this.agentPickerError=A.message||"Failed to select agent",this.toast.error(A.message||"Failed to select agent");break;case"checkpoint_created":if(A.checkpoint){const e=this.historyCheckpoints.findIndex(e=>e.id===A.checkpoint.id);this.historyCheckpoints=e>=0?[...this.historyCheckpoints.slice(0,e),A.checkpoint,...this.historyCheckpoints.slice(e+1)]:[...this.historyCheckpoints,A.checkpoint],"applied"===A.checkpoint.status&&A.checkpoint.filesModified>0&&this.settings.showUndoBar&&(this.undoBarFilesModified=A.checkpoint.filesModified,this.undoBarVisible=!0)}break;case"history":this.historyCheckpoints=A.checkpoints||[],this.historyLoading=!1;break;case"undo_complete":this.handleCheckpointRestored("Change undone");break;case"revert_complete":this.handleCheckpointRestored("Reverted to checkpoint");break;case"history_cleared":this.historyCheckpoints=[],this.toast.info("History cleared")}}handleDocumentClick(A){if(!this.annotationActive)return;if(!this.agentName)return;if(this.modalOpen||this.settingsOpen||this.agentPickerOpen||this.historyOpen)return;const e=this.getTargetElement(A);if(!e)return;A.preventDefault(),A.stopPropagation(),this.pendingElement=e,this.modalEditMode=!1,this.modalAnnotationId="",this.modalSelector=ea(e),this.modalIdentifier=na(e),this.modalNotes="",this.modalCaptureScreenshot=!1,this.modalScreenshotPreview="";const t=window.getSelection();this.modalSelectedText=t?.toString().trim()||"",this.modalOpen=!0}handleDocumentMouseMove(A){if(!this.annotationActive)return void(this.highlightVisible=!1);if(!this.agentName)return void(this.highlightVisible=!1);if(this.modalOpen||this.settingsOpen||this.agentPickerOpen)return void(this.highlightVisible=!1);const e=this.getTargetElement(A);if(!e)return void(this.highlightVisible=!1);const t=function(A,e){return{top:A.top-e,left:A.left-e,width:A.width+2*e,height:A.height+2*e,bottom:A.bottom+e,right:A.right+e}}(Ca(e),4);this.highlightRect=function(A){const e={top:4,left:4,bottom:window.innerHeight-8,right:window.innerWidth-20},t=A.top<e.top?e.top:A.top,n=A.left<e.left?e.left:A.left,s=A.bottom>e.bottom-30?e.bottom:A.bottom,r=A.right>e.right-30?e.right:A.right;return{top:t,left:n,width:Math.max(0,r-n),height:Math.max(0,s-t),bottom:s,right:r}}(t),this.highlightLabel=na(e),this.highlightVisible=!0}isEditableTarget(A){const e=A.composedPath();for(const t of e)if(t instanceof HTMLElement){const A=t.tagName?.toLowerCase();if("input"===A||"textarea"===A||t.isContentEditable)return!0}return!1}handleDocumentKeydown(A){if("Escape"===A.key&&(this.helpOpen?this.helpOpen=!1:this.modalOpen?this.modalOpen=!1:this.settingsOpen?this.settingsOpen=!1:this.historyOpen?this.historyOpen=!1:this.responseOpen?this.responseOpen=!1:this.undoBarVisible&&(this.undoBarVisible=!1)),this.isEditableTarget(A))return;const e=this.historyCheckpoints.some(A=>A.canUndo);(A.metaKey||A.ctrlKey)&&"z"===A.key&&!A.shiftKey&&(this.undoStack.length>0||e)&&(A.preventDefault(),this.handleUndo()),"z"!==A.key&&"Z"!==A.key||this.handleToggle(),"?"===A.key&&(this.helpOpen=!this.helpOpen),"`"===A.key&&(this.isHidden=!this.isHidden,this.isHidden||this.toast.info("ZingIt visible"))}isOwnElement(A){let e=A;for(;e;){if(e instanceof Element&&e.tagName?.toLowerCase().startsWith("zing-"))return!0;if(e instanceof Element&&e.parentElement)e=e.parentElement;else{const A=e.getRootNode();e=A instanceof ShadowRoot?A.host:null}}return!1}isEventFromOwnElement(A){const e=A.composedPath();for(const t of e)if(t instanceof Element&&t.tagName?.toLowerCase().startsWith("zing-"))return!0;return!1}getTargetElement(A){if(this.isEventFromOwnElement(A))return null;const e=A.composedPath();for(const n of e){if(!(n instanceof Element))continue;if("html"===n.tagName.toLowerCase())break;if(!this.isOwnElement(n))return n}const t=document.elementsFromPoint(A.clientX,A.clientY);for(const n of t){if("html"!==n.tagName.toLowerCase()&&!this.isOwnElement(n))return n}return null}render(){return this.isHidden?$`<zing-toast></zing-toast>`:$`
+  `,ac([hA({type:Boolean})],cc.prototype,"visible",2),ac([hA({type:String})],cc.prototype,"message",2),ac([hA({type:Number})],cc.prototype,"filesModified",2),ac([hA({type:Number})],cc.prototype,"timeout",2),ac([gA()],cc.prototype,"remainingTime",2),cc=ac([cA("zing-undo-bar")],cc);var lc=Object.defineProperty,Bc=Object.getOwnPropertyDescriptor,hc=(A,e,t,n)=>{for(var s,r=n>1?void 0:n?Bc(e,t):e,o=A.length-1;o>=0;o--)(s=A[o])&&(r=(n?s(e,t,r):s(r))||r);return n&&r&&lc(e,t,r),r};let gc=class extends iA{constructor(){super(),this.annotations=[],this.settings=Qa(),this.wsConnected=!1,this.wsMaxAttemptsReached=!1,this.processing=!1,this.agentName="",this.agentModel="",this.serverProjectDir="",this.annotationActive=function(){try{const A=localStorage.getItem(ha);return null===A||JSON.parse(A)}catch{return!0}}(),this.availableAgents=[],this.agentPickerOpen=!1,this.agentPickerLoading=!1,this.agentPickerError="",this.isRemoteUrl=!1,this.currentPageUrl="",this.remoteWarningShown=!1,this.highlightVisible=!1,this.highlightRect={top:0,left:0,width:0,height:0},this.highlightLabel="",this.modalOpen=!1,this.modalEditMode=!1,this.modalAnnotationId="",this.modalSelector="",this.modalIdentifier="",this.modalSelectedText="",this.modalNotes="",this.pendingElement=null,this.modalCaptureScreenshot=!1,this.modalScreenshotPreview="",this.modalScreenshotLoading=!1,this.settingsOpen=!1,this.helpOpen=!1,this.isHidden=!1,this.responseOpen=!1,this.responseContent="",this.responseToolStatus="",this.responseError="",this.responseScreenshotCount=0,this.isFollowUpMessage=!1,this.undoStack=[],this.historyOpen=!1,this.historyCheckpoints=[],this.historyLoading=!1,this.undoBarVisible=!1,this.undoBarFilesModified=0,this.pendingAnnotationRemovals=new Set,this.undoInProgress=!1,this.recentlyDeletedAnnotation=null,this.deleteUndoTimeout=null,this.processingTimeout=null,this.PROCESSING_TIMEOUT_MS=6e4,this.toolbarPosition=function(){try{const A=localStorage.getItem(ga);return A?JSON.parse(A):null}catch{return null}}(),this.isDragging=!1,this.dragOffset={x:0,y:0},this.ws=null,this.clickHandler=this.handleDocumentClick.bind(this),this.mouseMoveHandler=this.handleDocumentMouseMove.bind(this),this.keydownHandler=this.handleDocumentKeydown.bind(this),this.dragMoveHandler=this.handleDragMove.bind(this),this.dragEndHandler=this.handleDragEnd.bind(this)}connectedCallback(){super.connectedCallback(),this.annotations=function(){try{const A=localStorage.getItem(la);if(!A)return[];const e=JSON.parse(A);return e.url!==window.location.href?[]:Array.isArray(e.annotations)?e.annotations:[]}catch{return[]}}();try{const A=this.annotations.filter(A=>{try{return null!==ca(A.selector)}catch(e){return console.warn(`[ZingIt] Invalid selector "${A.selector}":`,e),!1}});if(A.length<this.annotations.length){const e=this.annotations.length-A.length;console.log(`[ZingIt] Removed ${e} orphaned annotation(s) - elements no longer exist`),this.annotations=A,ua(this.annotations),this.updateComplete.then(()=>{this.toast?.info(`Removed ${e} stale annotation${e>1?"s":""}`)})}}catch(e){console.warn("[ZingIt] Error cleaning up orphaned annotations:",e)}const A=function(){try{const A=sessionStorage.getItem(da);return A?JSON.parse(A):null}catch{return null}}();A&&A.content&&(this.responseOpen=!0,this.responseContent=A.content,this.responseError=A.error,this.responseScreenshotCount=A.screenshotCount,function(){try{sessionStorage.removeItem(da)}catch(e){console.warn("ZingIt: Failed to clear response state",e)}}(),this.requestUpdate()),this.initWebSocket(),this.detectRemoteUrl(),document.addEventListener("click",this.clickHandler,!0),document.addEventListener("mousemove",this.mouseMoveHandler,!0),document.addEventListener("keydown",this.keydownHandler)}disconnectedCallback(){super.disconnectedCallback(),this.ws&&(this.ws.disconnect(),this.ws=null),this.deleteUndoTimeout&&(clearTimeout(this.deleteUndoTimeout),this.deleteUndoTimeout=null),this.processingTimeout&&(clearTimeout(this.processingTimeout),this.processingTimeout=null),document.removeEventListener("click",this.clickHandler,!0),document.removeEventListener("mousemove",this.mouseMoveHandler,!0),document.removeEventListener("keydown",this.keydownHandler)}initWebSocket(){this.ws=new ji(this.settings.wsUrl),this.ws.on("open",()=>{this.wsConnected=!0,this.wsMaxAttemptsReached=!1;this.annotations.some(A=>"processing"===A.status)?(console.log("[ZingIt] Reconnected with processing annotations - marking as completed"),this.annotations=this.annotations.map(A=>"processing"===A.status?{...A,status:"completed"}:A),ua(this.annotations),this.toast.success("Connected - changes completed")):this.toast.success("Connected to server"),this.ws?.requestAgents()}),this.ws.on("close",()=>{this.wsConnected=!1}),this.ws.on("max_attempts",()=>{this.wsMaxAttemptsReached=!0,this.toast.error("Connection failed - click Reconnect to retry")}),this.ws.on("message",A=>{this.handleWSMessage(A)}),this.ws.connect()}detectRemoteUrl(){this.currentPageUrl=window.location.href;const A=window.location.hostname;this.isRemoteUrl=!["localhost","127.0.0.1","::1"].includes(A)&&!A.endsWith(".local")&&""!==A,this.isRemoteUrl&&this.updateComplete.then(()=>{setTimeout(()=>this.showRemoteUrlWarning(),500)})}showRemoteUrlWarning(){this.toast&&!this.remoteWarningShown&&(this.remoteWarningShown=!0,this.toast.show("You're editing a published site.\nChanges will be saved locally only.\n\nTo see your changes:\n• Run the project locally, or\n• Deploy the updated files","warning",0))}handleWSMessage(A){switch(A.type){case"connected":this.agentName=A.agent||"",this.agentModel=A.model||"",this.serverProjectDir=A.projectDir||"",this.isRemoteUrl&&this.serverProjectDir&&this.detectRemoteUrl();break;case"processing":this.processing=!0,this.responseOpen=!0,this.isFollowUpMessage||(this.responseContent=""),this.responseError="",this.startProcessingTimeout();break;case"delta":this.responseContent+=A.content||"",this.settings.autoRefresh&&this.responseContent&&this.saveCurrentResponseState();break;case"tool_start":this.responseToolStatus=A.tool||"";break;case"tool_end":this.responseToolStatus="";break;case"idle":if(this.clearProcessingTimeout(),this.processing=!1,this.responseToolStatus="",this.isFollowUpMessage=!1,this.updateAnnotationStatuses("processing","completed"),this.settings.playSoundOnComplete&&this.playCompletionSound(),this.isRemoteUrl){const A=this.settings.projectDir||this.serverProjectDir;this.responseContent+=`\n\n---\n\n**💡 Important:** You're editing a published site.\n\nChanges have been saved locally to:\n\`${A}\`\n\n**To see your changes:**\n1. Run your project locally, or\n2. Deploy the changes to your hosting service\n\n**Need help?** Check the settings panel for your project directory.`}setTimeout(()=>{this.ws&&this.wsConnected&&this.ws.send({type:"get_history"})},500),this.settings.autoRefresh&&(this.saveCurrentResponseState(),this.toast.info("Refreshing page..."),setTimeout(()=>window.location.reload(),1e3));break;case"error":this.clearProcessingTimeout(),this.responseError=A.message||"Unknown error",this.processing=!1,this.responseToolStatus="",this.isFollowUpMessage=!1,this.undoInProgress=!1,this.pendingAnnotationRemovals.clear(),this.updateAnnotationStatuses("processing","pending"),this.toast.error(A.message||"An error occurred");break;case"reset_complete":this.responseContent="",this.responseError="";break;case"agents":if(this.availableAgents=A.agents||[],this.agentPickerLoading=!1,this.agentPickerError="",!this.agentName&&this.availableAgents.length>0)if(this.settings.selectedAgent){const A=this.availableAgents.find(A=>A.name===this.settings.selectedAgent);A?.available?this.ws?.selectAgent(this.settings.selectedAgent):this.agentPickerOpen=!0}else this.agentPickerOpen=!0;break;case"agent_selected":this.agentName=A.agent||"",this.agentModel=A.model||"",this.agentPickerOpen=!1,this.settings={...this.settings,selectedAgent:this.agentName},wa(this.settings),this.toast.success(`Using ${A.agent||"agent"}`);break;case"agent_error":this.agentPickerError=A.message||"Failed to select agent",this.toast.error(A.message||"Failed to select agent");break;case"checkpoint_created":if(A.checkpoint){const e=this.historyCheckpoints.findIndex(e=>e.id===A.checkpoint.id);this.historyCheckpoints=e>=0?[...this.historyCheckpoints.slice(0,e),A.checkpoint,...this.historyCheckpoints.slice(e+1)]:[...this.historyCheckpoints,A.checkpoint],"applied"===A.checkpoint.status&&A.checkpoint.filesModified>0&&this.settings.showUndoBar&&(this.undoBarFilesModified=A.checkpoint.filesModified,this.undoBarVisible=!0)}break;case"history":this.historyCheckpoints=A.checkpoints||[],this.historyLoading=!1;break;case"undo_complete":this.handleCheckpointRestored("Change undone");break;case"revert_complete":this.handleCheckpointRestored("Reverted to checkpoint");break;case"history_cleared":this.historyCheckpoints=[],this.toast.info("History cleared")}}handleDocumentClick(A){if(!this.annotationActive)return;if(!this.agentName)return;if(this.modalOpen||this.settingsOpen||this.agentPickerOpen||this.historyOpen)return;const e=this.getTargetElement(A);if(!e)return;A.preventDefault(),A.stopPropagation(),this.pendingElement=e,this.modalEditMode=!1,this.modalAnnotationId="",this.modalSelector=ea(e),this.modalIdentifier=na(e),this.modalNotes="",this.modalCaptureScreenshot=!1,this.modalScreenshotPreview="";const t=window.getSelection();this.modalSelectedText=t?.toString().trim()||"",this.modalOpen=!0}handleDocumentMouseMove(A){if(!this.annotationActive)return void(this.highlightVisible=!1);if(!this.agentName)return void(this.highlightVisible=!1);if(this.modalOpen||this.settingsOpen||this.agentPickerOpen)return void(this.highlightVisible=!1);const e=this.getTargetElement(A);if(!e)return void(this.highlightVisible=!1);const t=function(A,e){return{top:A.top-e,left:A.left-e,width:A.width+2*e,height:A.height+2*e,bottom:A.bottom+e,right:A.right+e}}(Ca(e),4);this.highlightRect=function(A){const e={top:4,left:4,bottom:window.innerHeight-8,right:window.innerWidth-20},t=A.top<e.top?e.top:A.top,n=A.left<e.left?e.left:A.left,s=A.bottom>e.bottom-30?e.bottom:A.bottom,r=A.right>e.right-30?e.right:A.right;return{top:t,left:n,width:Math.max(0,r-n),height:Math.max(0,s-t),bottom:s,right:r}}(t),this.highlightLabel=na(e),this.highlightVisible=!0}isEditableTarget(A){const e=A.composedPath();for(const t of e)if(t instanceof HTMLElement){const A=t.tagName?.toLowerCase();if("input"===A||"textarea"===A||t.isContentEditable)return!0}return!1}handleDocumentKeydown(A){if("Escape"===A.key&&(this.helpOpen?this.helpOpen=!1:this.modalOpen?this.modalOpen=!1:this.settingsOpen?this.settingsOpen=!1:this.historyOpen?this.historyOpen=!1:this.responseOpen?this.responseOpen=!1:this.undoBarVisible&&(this.undoBarVisible=!1)),this.isEditableTarget(A))return;const e=this.historyCheckpoints.some(A=>A.canUndo);(A.metaKey||A.ctrlKey)&&"z"===A.key&&!A.shiftKey&&(this.undoStack.length>0||e)&&(A.preventDefault(),this.handleUndo()),"z"!==A.key&&"Z"!==A.key||this.handleToggle(),"?"===A.key&&(this.helpOpen=!this.helpOpen),"`"===A.key&&(this.isHidden=!this.isHidden,this.isHidden||this.toast.info("ZingIt visible"))}isOwnElement(A){let e=A;for(;e;){if(e instanceof Element&&e.tagName?.toLowerCase().startsWith("zing-"))return!0;if(e instanceof Element&&e.parentElement)e=e.parentElement;else{const A=e.getRootNode();e=A instanceof ShadowRoot?A.host:null}}return!1}isEventFromOwnElement(A){const e=A.composedPath();for(const t of e)if(t instanceof Element&&t.tagName?.toLowerCase().startsWith("zing-"))return!0;return!1}getTargetElement(A){if(this.isEventFromOwnElement(A))return null;const e=A.composedPath();for(const n of e){if(!(n instanceof Element))continue;if("html"===n.tagName.toLowerCase())break;if(!this.isOwnElement(n))return n}const t=document.elementsFromPoint(A.clientX,A.clientY);for(const n of t){if("html"!==n.tagName.toLowerCase()&&!this.isOwnElement(n))return n}return null}render(){return this.isHidden?$`<zing-toast></zing-toast>`:$`
       <zing-highlight
         .top=${this.highlightRect.top}
         .left=${this.highlightRect.left}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codewithdan/zingit",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "AI-powered UI annotation tool - point, annotate, and let AI fix it",
   "type": "module",
   "engines": {

package/server/dist/handlers/messageHandlers.js

@@ -183,6 +183,9 @@ export async function handleBatch(ws, state, msg, deps) {
     console.log('[Batch] Formatting prompt and extracting images...');
     const prompt = state.agent.formatPrompt(batchData, projectDir);
     const images = state.agent.extractImages(batchData);
+    // Log prompt preview to identify the request
+    const promptPreview = prompt.length > 150 ? prompt.substring(0, 150) + '...' : prompt;
+    console.log('[Batch] Prompt preview:', promptPreview);
     console.log('[Batch] Image count:', images.length);
     console.log('[Batch] Sending processing message to client');
     sendMessage(ws, { type: 'processing' });