Prepare v1.7 Browser Code UX

CHANGELOG.md

@@ -1,13 +1,24 @@
 # Changelog
 
-## 1.6.0 (In development)
+## 1.7.0 (Release candidate)
+
+- Replaced the generic speech-bubble icon with the Browser Code mark across packaged 16, 48, and 128 pixel assets.
+- Anchored the collapsed in-page change list to the nearest viewport edge while preserving drag movement around the viewport perimeter.
+- Replaced ambiguous plus/minus controls with explicit up/down chevrons and clearer accessible labels.
+- Opened the in-page change list by default and replaced the terminal-green theme with a softer paper-and-indigo palette across the popup, page panel, capture editor, and history.
+- Reworked Visual Edit around direct manipulation: drag the selected outline to move it and drag the large corner handle to resize it with a pointer or finger.
+- Removed the form-heavy move, size, text, visibility, order, alignment, and style control matrix from the v1.7 workflow.
+- Re-enabled the Visual Edit surface immediately after its before-evidence capture finishes so direct editing is ready without an extra UI refresh.
+- Added the v1.7 product, Store-listing, and monetization plan plus reusable icon-choice source assets.
+
+## 1.6.0 (Published July 20, 2026)
 
 - Added a project-scoped local MCP companion over stdio with list, get, create, import, evidence, implementation-brief, and revision-checked status tools.
 - Added an ignored `.dev-feedback` sidecar with atomic JSON records, an append-only event trail, validated local evidence, and explicit project/inbox path boundaries.
 - Reused the existing History JSON export as the first explicit extension-to-agent handoff without reading Chromium internals, opening a localhost port, or adding extension permissions.
 - Kept source editing and browser control outside the MCP server; the connected coding agent uses its existing project tools and records bounded implementation status separately.
 
-## 1.5.0 (Unreleased)
+## 1.5.0 (Source checkpoint)
 
 - Added Visual Edit Mode for reversible move, resize, leaf-text rewrite, hide, sibling reorder, curated style, match-style, and alignment previews.
 - Added bounded undo/redo and guaranteed page restoration on Save, Cancel, mode exit, and navigation.

QUICKSTART.md

@@ -2,7 +2,7 @@
 
 Get Dev Feedback Capture running in a few minutes.
 
-The latest published ZIP is v1.2.0. The local MCP companion is in development in the v1.6 source checkout; Visual Edit Mode, the annotated Region editor, and the AI Bundle remain unreleased source features.
+Chrome Web Store v1.6 is public. This source checkout prepares v1.7; the latest GitHub Release ZIP remains v1.2.0 until the deferred browser and agent-handoff gates are completed and recorded.
 
 ## 1. Load the extension
 
@@ -25,13 +25,13 @@ Optional for local PDFs:
 3. Leave the mode on `Element`.
 4. Click `Start Element Mode` or press `Ctrl+Shift+F` (`Command+Shift+F` on macOS).
 5. Click a page element, add your note, and save it.
-6. The in-page capture list starts collapsed. Use **+** to expand it and **−** to collapse it again.
+6. The in-page capture list starts expanded. Use **⌄** to collapse it; the compact list stays on the nearest viewport edge as you drag it, and **⌃** expands it again.
 
 ## 3. Preview a visual edit
 
 1. Open an injectable webpage and choose `Visual` in the extension popup.
 2. Click `Start Visual Edit`, then select one page element.
-3. Preview move, resize, text, visibility, order, style, match-style, or alignment changes.
+3. Drag the selected outline to move the element, or drag its corner handle to resize it.
 4. Use Undo, Redo, or Reset as needed.
 5. Add the implementation note and optional acceptance checks, then save the spec.
 6. The live page is restored; the original/proposed evidence and requested mutations remain in local History.

README.md

@@ -2,18 +2,18 @@
 
 Dev Feedback Capture is a local-first Chromium extension that turns live pages, PDFs, and browser-visible surfaces into implementation-ready visual change specifications. It supports three workflows:
 
-> The source checkout contains the in-development v1.6 local MCP companion on top of the unreleased v1.5 Visual Edit work. The latest published download remains v1.2.0 until the deferred browser and agent-handoff gates are complete.
+> Chrome Web Store v1.6 is public. This source checkout prepares v1.7; the latest GitHub Release ZIP remains v1.2.0 until the deferred browser and agent-handoff gates are completed and recorded.
 
 - `Element` mode injects a lightweight in-page UI so you can click DOM elements and save selectors, styles, and notes.
-- `Visual` mode temporarily moves, resizes, rewrites, hides, reorders, or restyles one live DOM element, records original versus proposed intent, and restores the page after Save or Cancel.
+- `Visual` mode lets you directly drag and resize one live DOM element, records original versus proposed intent, and restores the page after Save or Cancel.
 - `Region` mode captures the visible viewport and compiles a crop, vector annotations, best-effort DOM anchors, requested change, and acceptance checks into one visual change spec.
 
 All feedback stays local in extension storage. Open History to review captures, use the legacy standalone exports, or download one AI Bundle with instructions, structured data, page context, and before/annotated images.
 
 ## Features
 
 - Element capture with selector, text, styles, and note metadata
-- Reversible Visual Edit previews with move, resize, leaf-text rewrite, hide, sibling reorder, curated style, match-style, alignment, undo, redo, and reset
+- Pointer-first Visual Edit previews with drag-to-move, corner-handle resize, undo, redo, and reset
 - Original/proposed evidence plus explicit requested-mutation data; the live page is always restored
 - Visual Change Spec editor with crop, arrow, rectangle, ellipse, pin, text, blur/redact, color, undo, and redo
 - DOM-linked vector annotations with selector fallbacks, roles, surrounding text, geometry, and parent-layout context when the source DOM is available
@@ -24,7 +24,7 @@ All feedback stays local in extension storage. Open History to review captures,
 - One downloadable AI Bundle ZIP plus standalone JSON and self-contained HTML reports
 - Project-scoped local MCP companion over stdio; no cloud or localhost service
 - Copyable Markdown and implementation-prompt exports
-- Collapsed-by-default, draggable in-page capture list for quick review without covering the page
+- Expanded-by-default in-page capture list that stays anchored to the viewport edge when collapsed and dragged
 
 ## Installation
 
@@ -55,7 +55,7 @@ Use this path when developing the extension or reviewing source changes:
 3. Click `Start Element Mode` or use `Ctrl+Shift+F` (`Command+Shift+F` on macOS).
 4. Hover and click a page element.
 5. Add your note in the modal and save it.
-6. Use **+** on the compact capture chip to expand the saved-item list and **−** to collapse it again.
+6. Drag the compact capture chip along the viewport edge, then use **⌃** to expand the saved-item list and **⌄** to collapse it again.
 
 ### Region Mode
 
@@ -73,7 +73,7 @@ The cropped image, viewport rectangle, and source context are saved into the sam
 
 1. Open an injectable webpage and choose `Visual` in the popup.
 2. Start Visual Edit and select one element.
-3. Use the in-page inspector to preview curated mutations. Match Style and Align let you pick a second reference element without creating a multi-selection editor.
+3. Drag the selected outline to move the element, or drag its corner handle to resize it. Use Undo, Redo, or Reset as needed.
 4. Add the requested implementation change and optional acceptance criteria.
 5. Save the spec, or Cancel to discard it. Either path restores the original live page.
 
@@ -147,15 +147,15 @@ The extension does not use static host permissions, always-on content scripts, t
 
 1. Confirm `package.json` and `manifest.json` versions match.
 2. Run `npm test`, `npm run check`, and `npm run package`. `npm test` covers both extension and MCP contracts.
-3. Complete the manual unpacked-extension and MCP handoff gates in `docs/manual-release-checklist.md`, then create and push a matching tag such as `v1.6.0`.
+3. Complete the manual unpacked-extension and MCP handoff gates in `docs/manual-release-checklist.md`, then create and push the matching `v1.7.0` tag.
 4. The release workflow builds `dist/dev-feedback-capture-v<version>.zip` and publishes it as a GitHub Release asset.
 
 See [CHANGELOG.md](CHANGELOG.md) for release notes.
 
 ## Limitations
 
 - Element mode depends on DOM/script injection and is not intended for browser-internal surfaces.
-- Visual Edit is intentionally limited to one normal-page DOM target. It does not traverse cross-origin frames, mutate source code, or support arbitrary CSS, responsive breakpoints, animation, or reparenting.
+- Visual Edit is intentionally limited to direct move and resize of one normal-page DOM target. Text, visibility, order, style, matching, alignment, cross-origin frames, arbitrary CSS, responsive breakpoints, animation, and reparenting are outside this release.
 - Region mode stores one crop plus vector metadata in local storage; very large capture histories will still increase storage usage.
 - Blur/redact masks are applied to the saved crop before the transient viewport screenshot is discarded, so AI Bundle “before” evidence does not restore redacted pixels.
 - DOM annotation anchors are best-effort and are unavailable for protected browser pages, PDFs without an accessible DOM, cross-origin frames, and pages that move after capture.

capture.html

@@ -6,18 +6,18 @@
   <title>Visual Change Spec</title>
   <style>
     :root {
-      --bg: #101211;
-      --surface: #171a18;
-      --surface-high: #202420;
-      --surface-higher: #2a302b;
-      --text: #edf2ee;
-      --muted: #aeb9b0;
-      --faint: #778276;
-      --accent: #8ed8a0;
-      --accent-strong: #5fba79;
-      --danger: #f87171;
-      --line: rgba(204, 221, 205, 0.16);
-      --shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
+      --bg: #f6f5fa;
+      --surface: #ffffff;
+      --surface-high: #f0eef7;
+      --surface-higher: #e7e4f1;
+      --text: #29263a;
+      --muted: #6f6a7d;
+      --faint: #938da0;
+      --accent: #5b55c5;
+      --accent-strong: #4338a8;
+      --danger: #b63849;
+      --line: rgba(62, 55, 96, 0.16);
+      --shadow: 0 24px 70px rgba(42, 37, 72, 0.18);
     }
 
     * {
@@ -28,8 +28,8 @@
       margin: 0;
       font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       background:
-        radial-gradient(circle at 12% 0%, rgba(142, 216, 160, 0.12), transparent 35%),
-        linear-gradient(180deg, #111411 0%, #0b0d0c 100%);
+        radial-gradient(circle at 12% 0%, rgba(91, 85, 197, 0.09), transparent 36%),
+        linear-gradient(180deg, #fbfafe 0%, #f3f1f8 100%);
       color: var(--text);
       min-height: 100vh;
     }
@@ -55,7 +55,7 @@
       padding: 18px;
       border: 1px solid var(--line);
       border-radius: 10px;
-      background: rgba(255, 255, 255, 0.025);
+      background: rgba(255, 255, 255, 0.72);
       box-shadow: var(--shadow);
     }
 
@@ -67,7 +67,7 @@
       user-select: none;
       border-radius: 8px;
       overflow: hidden;
-      background: #0b0d0c;
+      background: #ffffff;
       border: 1px solid var(--line);
       touch-action: none;
     }
@@ -88,16 +88,16 @@
     }
 
     .image-wrap:focus-visible {
-      outline: 3px solid rgba(142, 216, 160, 0.5);
+      outline: 3px solid rgba(91, 85, 197, 0.42);
       outline-offset: 3px;
     }
 
     .selection {
       position: absolute;
       z-index: 2;
       border: 2px solid var(--accent);
-      background: rgba(142, 216, 160, 0.13);
-      box-shadow: 0 0 0 9999px rgba(7, 8, 7, 0.46);
+      background: rgba(91, 85, 197, 0.13);
+      box-shadow: 0 0 0 9999px rgba(41, 38, 58, 0.44);
       pointer-events: none;
       display: none;
     }
@@ -109,7 +109,7 @@
     .sidebar {
       padding: 18px;
       background:
-        radial-gradient(circle at 18% 0%, rgba(142, 216, 160, 0.12), transparent 34%),
+        radial-gradient(circle at 18% 0%, rgba(91, 85, 197, 0.08), transparent 36%),
         var(--surface);
       border-left: 1px solid var(--line);
       display: flex;
@@ -128,13 +128,14 @@
       width: 36px;
       height: 36px;
       border-radius: 8px;
-      border: 1px solid rgba(142, 216, 160, 0.66);
+      border: 1px solid rgba(91, 85, 197, 0.44);
       color: var(--accent);
       display: grid;
       place-items: center;
       flex: 0 0 auto;
       font: 800 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
-      box-shadow: inset 0 0 0 1px rgba(142, 216, 160, 0.14);
+      background: rgba(91, 85, 197, 0.06);
+      box-shadow: inset 0 0 0 1px rgba(91, 85, 197, 0.08);
     }
 
     h1 {
@@ -151,7 +152,7 @@
     }
 
     .card {
-      background: rgba(255, 255, 255, 0.035);
+      background: rgba(255, 255, 255, 0.74);
       border: 1px solid var(--line);
       border-radius: 8px;
       padding: 12px;
@@ -191,15 +192,15 @@
     .tool-button:hover:not(:disabled) {
       color: var(--text);
       background: var(--surface-higher);
-      border-color: rgba(142, 216, 160, 0.32);
+      border-color: rgba(91, 85, 197, 0.28);
     }
 
     .tool-button.active,
     .tool-button[aria-pressed="true"] {
-      color: #07120b;
+      color: #ffffff;
       background: var(--accent);
       border-color: var(--accent-strong);
-      box-shadow: 0 0 0 2px rgba(142, 216, 160, 0.13);
+      box-shadow: 0 0 0 2px rgba(91, 85, 197, 0.12);
     }
 
     .tool-settings {
@@ -247,7 +248,7 @@
     }
 
     input[type="color"]:focus-visible {
-      outline: 2px solid rgba(142, 216, 160, 0.5);
+      outline: 2px solid rgba(91, 85, 197, 0.42);
       outline-offset: 1px;
     }
 
@@ -262,7 +263,7 @@
       font-size: 13px;
       line-height: 1.45;
       color: var(--text);
-      background: #0b0d0c;
+      background: #ffffff;
     }
 
     textarea::placeholder {
@@ -271,8 +272,8 @@
 
     textarea:focus {
       outline: none;
-      border-color: rgba(142, 216, 160, 0.7);
-      box-shadow: 0 0 0 3px rgba(142, 216, 160, 0.12);
+      border-color: rgba(91, 85, 197, 0.62);
+      box-shadow: 0 0 0 3px rgba(91, 85, 197, 0.12);
     }
 
     .counter {
@@ -304,7 +305,7 @@
     }
 
     button:focus-visible {
-      outline: 2px solid rgba(142, 216, 160, 0.5);
+      outline: 2px solid rgba(91, 85, 197, 0.42);
       outline-offset: 2px;
     }
 
@@ -319,9 +320,9 @@
     }
 
     .primary {
-      background: linear-gradient(180deg, #7ed693, #57b874);
-      border-color: rgba(142, 216, 160, 0.48);
-      color: #07120b;
+      background: linear-gradient(180deg, #6964d4, #5650bd);
+      border-color: rgba(67, 56, 168, 0.42);
+      color: #ffffff;
     }
 
     .secondary {
@@ -334,9 +335,9 @@
     }
 
     .danger {
-      background: #2b1819;
-      border-color: rgba(248, 113, 113, 0.34);
-      color: #ffcaca;
+      background: #fff0f2;
+      border-color: rgba(182, 56, 73, 0.28);
+      color: #9f2d3e;
     }
 
     .status {
@@ -347,7 +348,7 @@
     }
 
     .error {
-      color: #ffcaca;
+      color: #9f2d3e;
     }
 
     .hint {
@@ -449,7 +450,7 @@ <h1>Visual Change Spec</h1>
           <button class="history-button" type="button" id="redo-btn" disabled>Redo</button>
           <label class="color-control" for="annotation-color">
             Color
-            <input id="annotation-color" type="color" value="#8ed8a0" aria-label="Annotation color">
+            <input id="annotation-color" type="color" value="#5b55c5" aria-label="Annotation color">
           </label>
         </div>
       </div>