annotask 0.0.5 → 0.0.7

package/README.md

@@ -48,7 +48,7 @@ This copies skill files to `.claude/skills/` and `.agents/skills/` so your agent
 
 | Agent | Skill directory | Notes |
 |-------|----------------|-------|
-| Claude Code | `.claude/skills/` | Invoke with `/annotask-apply`, `/annotask-init`, `/annotask-watch` |
+| Claude Code | `.claude/skills/` | Invoke with `/annotask-apply`, `/annotask-init` |
 | GitHub Copilot | `.agents/skills/` | Auto-discovered by Copilot agents |
 | OpenAI Codex | `.agents/skills/` | Uses the same `.agents/` convention |
 | Other agents | `.agents/skills/` | Any agent that reads `.agents/skills/` |
@@ -59,7 +59,6 @@ This copies skill files to `.claude/skills/` and `.agents/skills/` so your agent
 |-------|-------------|
 | `/annotask-init` | Scans your project and generates `.annotask/design-spec.json` with detected tokens, fonts, colors, and component library. Run once per project. |
 | `/annotask-apply` | Fetches pending tasks from the Annotask API, applies changes to source files, and marks them for review. |
-| `/annotask-watch` | Streams live changes from the Annotask WebSocket so your agent can narrate what you're doing in real time. |
 
 ## Quick Start
 
@@ -151,7 +150,6 @@ Start your dev server, then open:
 - **Arrows** — Draw arrows to reference other elements or parts of the page
 - **Drawn sections** — Draw a rectangle where new content should go, with a prompt
 - **Text highlights** — Select text to mark it for editing
-- **Notes** — Attach free-text design notes to any element
 
 ### Visual editing (experimental)
 - **Element inspection** — Click any element to see its source file, line, component, and computed styles
@@ -169,15 +167,30 @@ Start your dev server, then open:
 - **Violation cards** — Shows impact level, rule, description, and affected element count
 - **One-click fix tasks** — Create tasks from violations with full context (HTML snippets, CSS selectors, source file/line, and fix suggestions)
 
+### Screenshots
+- **Snipping tool** — Click "Add Screenshot" on any task form, then drag a region or click for full-page capture
+- **Thumbnail preview** — Screenshot appears as a preview on the task form before submitting (removable)
+- **Task-attached** — Screenshots are stored on the server and referenced by filename in the task
+- **Multimodal AI context** — AI agents can download and view screenshots for visual understanding of what the user sees
+- **Auto-cleanup** — Screenshot files are deleted when the task is accepted
+
 ### AI agent context
-- **Interaction history** — Optionally track user navigation and button/link clicks in the app so the AI agent understands how the user reached the current state
-- **Element context** — Optionally capture ancestor layout chain (3 levels of parent display, flex-direction, gap, grid-template) and DOM subtree (3 levels of children with tag, classes, text) for each task
-- **Breakpoint detection** — `/annotask-init` detects responsive breakpoints from Tailwind, Bootstrap, CSS variables, or media query patterns and includes them in the design spec
+
+These optional features give the AI agent richer context beyond just "change this element" — helping it make better decisions about how and where to apply changes.
+
+- **Interaction history** — Optionally track user navigation and button/link clicks in the app. Toggle per-task, off by default.
+  > Without this, the agent only sees the task description and a file path. With it, the agent knows the user navigated from `/settings` → `/profile` → clicked "Edit" → scrolled down before creating the task. This helps reproduce bugs and understand which user flow is affected.
+
+- **Element context** — Optionally capture the ancestor layout chain (3 levels of parent display, flex-direction, gap, grid-template) and DOM subtree (3 levels of children with tag, classes, text). Toggle per-task, off by default.
+  > The agent can usually determine this by reading the source file — and in most cases it will. This feature provides the same information upfront as a shortcut, saving the agent a round-trip of reading and parsing the file. It includes the computed layout state from the live browser (display, flex-direction, gap, grid-template, child count) which may differ from what's in the source when styles are inherited, overridden, or applied dynamically.
+
+- **Breakpoint detection** — `annotask init` detects responsive breakpoints from Tailwind, Bootstrap, CSS variables, or media query patterns and includes them in the design spec.
+  > The agent can find breakpoints by reading config files and stylesheets — and usually will. This pre-detects them so the agent has the project's breakpoint system immediately alongside the viewport dimensions on each task. When a task is created at 375px, the agent can instantly map that to the right Tailwind prefix, Bootstrap tier, or custom media query without searching the codebase first.
 
 ### Infrastructure
 - **Change reports** — Structured JSON of all changes, ready for agents to consume
 - **Task pipeline** — Create, review, accept, or deny design change tasks
-- **CLI** — `annotask watch` for live streaming, `annotask report` for current state
+- **CLI** — `annotask tasks`, `annotask report`, `annotask watch` for terminal access
 - **API** — HTTP and WebSocket endpoints for programmatic access
 
 ## CLI
@@ -186,10 +199,11 @@ Start your dev server, then open:
 annotask watch              # Live stream of changes
 annotask report             # Fetch current report JSON
 annotask status             # Check connection
+annotask screenshot <id>    # Download a task's screenshot
 annotask init-skills        # Install agent skills into your project
 ```
 
-Options: `--port=N`, `--host=H`, `--server=URL` (override server.json), `--mfe=NAME` (filter by MFE).
+Options: `--port=N`, `--host=H`, `--server=URL` (override server.json), `--mfe=NAME` (filter by MFE), `--output=PATH` (for screenshot command).
 
 ## API
 
@@ -197,6 +211,8 @@ Options: `--port=N`, `--host=H`, `--server=URL` (override server.json), `--mfe=N
 - `GET /__annotask/api/tasks` — Task list (supports `?mfe=NAME` filter)
 - `POST /__annotask/api/tasks` — Create a task
 - `PATCH /__annotask/api/tasks/:id` — Update task status
+- `POST /__annotask/api/screenshots` — Upload a screenshot (base64 PNG)
+- `GET /__annotask/screenshots/:filename` — Serve a screenshot
 - `GET /__annotask/api/status` — Health check
 - `ws://localhost:5173/__annotask/ws` — Live WebSocket stream