@codewithdan/zingit 0.16.1 → 0.17.2

package/AGENTS.md

@@ -2,12 +2,12 @@
 
 ## 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, GitHub Copilot CLI, or OpenAI Codex) which can automatically implement the requested changes.
+ZingIt is a browser-based marker tool that allows users to click on webpage elements and add notes/instructions. These markers 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
+- Visual element selection with marking
 - Multi-agent support (Claude, Copilot, Codex)
 - Automatic screenshot capture
 - Change history tracking
@@ -46,8 +46,8 @@ zingit/
 │   │   │   ├── zing-ui.ts     # Main orchestrator component
 │   │   │   ├── toolbar.ts     # Action buttons and status
 │   │   │   ├── highlight.ts   # Element hover highlight
-│   │   │   ├── markers.ts     # Numbered annotation badges
-│   │   │   ├── modal.ts       # Annotation input dialog
+│   │   │   ├── markers.ts     # Numbered marker badges
+│   │   │   ├── modal.ts       # Marker input dialog
 │   │   │   ├── settings.ts    # Configuration panel
 │   │   │   ├── response.ts    # Agent response display
 │   │   │   ├── toast.ts       # Notification toasts
@@ -109,8 +109,8 @@ zingit/
 
 ## Key Concepts
 
-### Annotations
-An annotation captures:
+### Markers
+A marker captures:
 - `selector` - CSS selector to locate the element
 - `identifier` - Human-readable element description (e.g., "button.primary")
 - `html` - Outer HTML of the element
@@ -127,7 +127,7 @@ The history component tracks all changes made by the AI agent:
 - Accessible via the clock icon in the toolbar
 
 ### WebSocket Messages
-- **Client → Server**: `batch` (send annotations), `message` (follow-up), `reset` (clear session)
+- **Client → Server**: `batch` (send markers), `message` (follow-up), `reset` (clear session)
 - **Server → Client**: `connected`, `processing`, `delta` (streaming), `tool_start`/`tool_end`, `idle`, `error`
 
 ### Agent System
@@ -174,19 +174,19 @@ npx cross-env PROJECT_DIR=/path/to/your/project npx @codewithdan/zingit
 
 | Key | Action |
 |-----|--------|
-| `Z` | Toggle annotation mode on/off |
-| `Ctrl/Cmd+Z` | Undo last annotation |
+| `Z` | Toggle marker mode on/off |
+| `Ctrl/Cmd+Z` | Undo last marker |
 | `?` | Show help overlay |
 | `` ` `` | Toggle ZingIt visibility |
 | `Esc` | Close current panel/modal |
-| `Ctrl/Cmd+Enter` | Save annotation (in modal) |
+| `Ctrl/Cmd+Enter` | Save marker (in modal) |
 
 ## State Persistence
 
 The client persists state to `localStorage`:
-- `zingit_annotations` - Current page annotations (URL-scoped)
+- `zingit_markers` - Current page markers (URL-scoped)
 - `zingit_settings` - User preferences (wsUrl, colors, projectDir)
-- `zingit_active` - Annotation mode on/off (persists across pages)
+- `zingit_active` - Marker mode on/off (persists across pages)
 
 ## Important Implementation Details
 
@@ -279,7 +279,7 @@ Additional test pages are available:
 - `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.
+Add `?zingit` to any URL to activate the marker tool.
 
 ## Build Output
 

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.17.2](https://github.com/danwahlin/zingit/compare/v0.17.1...v0.17.2) (2026-01-29)
+
+### [0.17.1](https://github.com/danwahlin/zingit/compare/v0.16.1...v0.17.1) (2026-01-29)
+
 ### [0.16.1](https://github.com/danwahlin/zingit/compare/v0.16.0...v0.16.1) (2026-01-29)
 
 

package/README.md

@@ -1,16 +1,43 @@
+<div align="center">
+  <img src="client/images/zingit-readme.png" alt="ZingIt" width="200">
+
+
 # ZingIt
+</div>
+
+#### Point-and-click UI feedback that gets automatically implemented by AI
 
-Streamline how you share UI changes with your AI assistant. Select elements, annotate them, and send directly to AI agents for automated fixes.
+Tired of describing what element to change in the UI, taking screenshots, and copying/pasting them into your AI assitant? Streamline how you share UI changes! Select elements, mark them with the changes you want to make, and send directly to AI agents for automated fixes.
+
+**Point → Click → Describe → ZingIt to AI**
 
 **[Try the Live Demo →](https://danwahlin.github.io/zingit)**
 
 ## Features
 
-- **Visual Annotations** - Click any element to describe changes you want
-- **Multi-Agent Support** - Works with Claude Code, GitHub Copilot CLI, and OpenAI Codex
+### Visual Markers
+Click any element on your page to add notes about changes you want. Smart CSS selectors are automatically generated to target the exact element.
+
+<img src="client/images/select-it.png" alt="Visual Markers" width="600">
+
+### Screenshot Capture
+Automatically captures screenshots of marked elements to provide visual context to AI agents. No more manual screenshot taking!
+
+<img src="client/images/screen-shots.png" alt="Screenshot Capture" width="600">
+
+### Multi-Agent Support
+Works with Claude Code, GitHub Copilot CLI, and OpenAI Codex. Choose your preferred AI assistant and watch it work in real-time.
+
+<img src="client/images/multi-agents.png" alt="Multi-Agent Support" width="600">
+
+### Send Changes with a Click
+Once you've marked your changes, simply click the sparkle icon (✨) in the ZingIt toolbar to send everything to your AI agent. Watch as it generates code updates live!
+
+<img src="client/images/toolbar.png" alt="Multi-Agent Support">
+
+### Additional Features
 - **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
 
@@ -50,7 +77,7 @@ npm run dev
 
 5. Visit [http://localhost:5200/?zingit](http://localhost:5200/?zingit) to see ZingIt in action!
 
-6. You'll be prompted to select an AI agent. Start annotating!
+6. You'll be prompted to select an AI agent. Start marking!
 
 ### Option 2: Add to Your Website
 
@@ -74,20 +101,20 @@ Example: `http://localhost:5200/?zingit`
 
 ## Usage
 
-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
+1. **Press `Z`** to toggle mark mode on/off
+2. **Click elements** on your page to mark them - add notes about changes you want
+3. **Click the sparkle icon** (✨) in the toolbar to send markers 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 |
+| **ON/OFF** | Toggle mark mode |
+| **✨** (Sparkle) | Send markers to AI agent |
 | **🕒** (Clock) | View change history |
-| **📋** (Copy) | Export annotations as Markdown |
-| **🧹** (Broom) | Clear all annotations |
+| **📋** (Copy) | Export markers as Markdown |
+| **🧹** (Broom) | Clear all markers |
 | **?** | View keyboard shortcuts |
 | **⚙️** (Gear) | Open settings |
 | **✕** | Close ZingIt toolbar |
@@ -96,12 +123,12 @@ Example: `http://localhost:5200/?zingit`
 
 | Key | Action |
 |-----|--------|
-| `Z` | Toggle annotation mode on/off |
-| `Ctrl/Cmd+Z` | Undo last annotation |
+| `Z` | Toggle mark mode on/off |
+| `Ctrl/Cmd+Z` | Undo last marker |
 | `?` | Show help overlay |
 | `` ` `` | Toggle ZingIt visibility |
 | `Esc` | Close current panel/modal |
-| `Ctrl/Cmd+Enter` | Save annotation (in modal) |
+| `Ctrl/Cmd+Enter` | Save marker (in modal) |
 
 ## Configuration
 
@@ -112,7 +139,7 @@ Click the **gear icon** for settings:
 | WebSocket URL | `ws://localhost:3000` | Server connection |
 | Project Directory | *(server default)* | Override project path |
 | Highlight Color | `#fbbf24` | Element highlight color |
-| Marker Color | `#3b82f6` | Annotation marker color |
+| Marker Color | `#3b82f6` | Marker badge color |
 
 ## Architecture
 
@@ -137,9 +164,9 @@ zingit/
 - Verify AI agent is installed and authenticated
 - Check server logs for error messages
 
-**Annotations not persisting**
-- Annotations are URL-specific and stored in localStorage
-- Changing pages clears annotations
+**Markers not persisting**
+- Markers are URL-specific and stored in localStorage
+- Changing pages clears markers
 
 **Changes not appearing on published site**
 - If you see a "Remote" badge in the toolbar, you're editing a published site

package/bin/cli.js

@@ -20,7 +20,7 @@ function printBanner() {
   console.log('');
   console.log(`${colors.cyan}╔═══════════════════════════════════════════════════════════════╗${colors.reset}`);
   console.log(`${colors.cyan}║                                                               ║${colors.reset}`);
-  console.log(`${colors.cyan}║${colors.reset}  ${colors.bright}⚡ ZingIt${colors.reset} - AI-Powered UI Annotation Tool            ${colors.cyan}║${colors.reset}`);
+  console.log(`${colors.cyan}║${colors.reset}  ${colors.bright}⚡ ZingIt${colors.reset} - AI-Powered UI Marker Tool               ${colors.cyan}║${colors.reset}`);
   console.log(`${colors.cyan}║                                                               ║${colors.reset}`);
   console.log(`${colors.cyan}╚═══════════════════════════════════════════════════════════════╝${colors.reset}`);
   console.log('');
@@ -38,7 +38,7 @@ function printInstructions(port = 3000) {
   console.log(`   ${colors.bright}2.${colors.reset} Or visit the demo page:`);
   console.log(`      ${colors.blue}http://localhost:${port}${colors.reset}`);
   console.log('');
-  console.log(`   ${colors.bright}3.${colors.reset} Press ${colors.bright}Z${colors.reset} to toggle annotation mode`);
+  console.log(`   ${colors.bright}3.${colors.reset} Press ${colors.bright}Z${colors.reset} to toggle marker mode`);
   console.log('');
   console.log(`${colors.yellow}💡 Tip:${colors.reset} Make sure you have an AI agent running (Claude Code, GitHub Copilot CLI, or OpenAI Codex)`);
   console.log('');