diff --git a/CHANGELOG.md b/CHANGELOG.md index 643e8bc..74097a6 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/QUICKSTART.md b/QUICKSTART.md index e61ccfc..54f5743 100644 --- a/QUICKSTART.md +++ b/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. diff --git a/README.md b/README.md index 2515d16..ea97244 100644 --- a/README.md +++ b/README.md @@ -2,10 +2,10 @@ 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. @@ -13,7 +13,7 @@ All feedback stays local in extension storage. Open History to review captures, ## 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,7 +147,7 @@ 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.zip` and publishes it as a GitHub Release asset. See [CHANGELOG.md](CHANGELOG.md) for release notes. @@ -155,7 +155,7 @@ 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. diff --git a/capture.html b/capture.html index b2f2cc4..6aa4403 100644 --- a/capture.html +++ b/capture.html @@ -6,18 +6,18 @@ Visual Change Spec + + + + +
+
+
+

Dev Feedback Capture · Icon direction

+

Which one says “HTML tool”?

+

No shields, chat bubbles, or security language. Each direction is shown large and at the actual 16 px toolbar size. Pick the shape first; color and fine detail can be tuned afterward.

+
+
+ Your selection + Nothing selected yet +
+
+ +
+
+ 01 +
+ +
+
+

HTML File

+

A literal document plus markup. The most explicit “this works with HTML files” direction.

+
+
16 px toolbar
+ +
+ +
+ 02 + Recommended +
+ +
+
+

Browser Code

+

Browser chrome plus orange markup. Reads as a web-development extension before anything else.

+
+
16 px toolbar
+ +
+ +
+ 03 +
+ +
+
+

Tag Monogram

+

A compact <H> mark. Loudest HTML signal and the strongest silhouette at tiny sizes.

+
+
16 px toolbar
+ +
+ +
+ 04 +
+ +
+
+

Inspect Frame

+

Markup inside a selection frame. Connects HTML with the extension’s element-capture workflow.

+
+
16 px toolbar
+ +
+ +
+ 05 +
+ +
+
+

DOM Tree

+

HTML structure rather than a file. More technical and distinctive, with a clear hierarchy signal.

+
+
16 px toolbar
+ +
+ +
+ 06 +
+ +
+
+

Markup Layers

+

Code on stacked page evidence. Connects HTML with capture, context, and implementation handoff.

+
+
16 px toolbar
+ +
+
+ +
+ 02 Browser Code selected. Local next-version assets now use this direction. + The published Store v1.6 icon remains unchanged until the next reviewed package is uploaded. +
+
+ + + + diff --git a/docs/manual-release-checklist.md b/docs/manual-release-checklist.md index 3ea1f2f..311f0db 100644 --- a/docs/manual-release-checklist.md +++ b/docs/manual-release-checklist.md @@ -2,7 +2,18 @@ Automated checks are necessary but do not replace the unpacked-extension gate. -Store status on July 19, 2026: the v1.6 package was submitted for Chrome Web Store review before the deferred manual gates below were completed. Store approval is not proof that these checks passed. Keep them open and do not call the release runtime-verified until the relevant evidence is recorded. +Store status on July 25, 2026: v1.6 is public in the Chrome Web Store. Store approval is not proof that the deferred checks below passed. Keep them open and do not tag, upload, or call v1.7 runtime-verified until the relevant evidence is recorded. + +## v1.7 compact-panel and icon check + +Before tagging or uploading v1.7: + +- Reload the unpacked extension from this exact repository checkout. +- Start Element and Visual modes and confirm the change list opens expanded with the paper-and-indigo palette. +- In Element and Visual modes, drag the collapsed change list near every viewport edge and confirm it stays anchored to the nearest edge. +- Resize the browser window and confirm the collapsed list remains visible on its selected edge. +- Confirm **⌃** expands the list, **⌄** collapses it, and both controls have matching accessible labels. +- Confirm the Browser Code icon is legible in the browser toolbar and extension-management list at the packaged sizes. ## Deferred v1.4 PDF/export check @@ -16,9 +27,9 @@ Before tagging or publishing v1.4 or later, load the exact repository path as an This gate was intentionally deferred from the v1.4 source merge. It is expected to be routine, but it remains required before the submitted release is described as runtime-verified. -## Deferred v1.5 Visual Edit check +## v1.7 direct Visual Edit check -Before tagging, publishing, or uploading v1.5, exercise reversible text, visibility, resize, spacing/style, reorder, match-style, and alignment changes on a normal webpage. Confirm Cancel, Save, Undo, Redo, navigation, Region handoff, and stopping feedback mode always restore the live page, while the saved item and AI Bundle preserve original versus proposed intent. +Before tagging, publishing, or uploading v1.7, select one normal-page element and drag its outline to move it with a mouse or pointer. Resize it with the corner handle and, when touch-capable hardware is available, repeat both gestures with a finger. Confirm Undo, Redo, and Reset work after direct gestures. Confirm Cancel, Save, navigation, Region handoff, and stopping feedback mode always restore the live page, while the saved item and AI Bundle preserve original versus proposed intent. The source may merge to `main` for code review and local trying before this hands-on gate is complete. Do not call the release runtime-verified until this checklist passes. diff --git a/docs/v1.7-product-plan.html b/docs/v1.7-product-plan.html new file mode 100644 index 0000000..dec31b0 --- /dev/null +++ b/docs/v1.7-product-plan.html @@ -0,0 +1,461 @@ + + + + + + Dev Feedback Capture v1.7 Product Plan + + + +
+
+
Dev Feedback Capture · July 25, 2026
+

Make v1.7 obvious before making it paid

+

The strongest next release is a trust-and-activation pass: finish the Browser Code identity, make the first successful capture effortless, prove every existing workflow, and tell that story clearly in the Store.

+
+ Local-first + Manifest V3 + No accounts + No telemetry + Explicit export +
+
+ +
+

Executive Summary

+
+
+ Ship v1.7 free. +

There is not enough demand evidence yet to justify accounts, billing, licensing, and the support burden that follows.

+
+
+ Sell the workflow later. +

The paid value is not “take a screenshot.” It is a reliable project inbox, agent handoff, status loop, and team collaboration.

+
+
+ Win on trust now. +

Local storage, minimal permissions, and explicit exports are a real differentiator—especially under Chrome’s stricter 2026 data-disclosure rules.

+
+
+
+ +
+
Decision
+

Best path: one tight free release, then a paid validation offer

+

v1.7 should improve comprehension and close proof gaps, not add a cloud backend. The Browser Code icon and edge-anchored compact panel are already implemented locally. Finish the current manual gates, add a short first-run path, tighten the handoff, and refresh the Store listing.

+

Counterpoint: delaying payment delays revenue. The larger risk is charging before the extension has repeat users or a clear paid boundary; that creates billing complexity without proving anyone wants the product.

+
+ +
+

v1.7 priority score

+ +

Product-judgment score, not measured usage data. It combines user value, confidence, effort, privacy risk, and fit with the current local-first promise.

+
+ +
+

What goes into the next push

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WhenChangeWhy it earns the slot
NowBrowser Code icon plus the edge-anchored compact list and ⌃ / ⌄ controls.The product reads as a web-development tool and the smallest persistent UI is easier to understand.
NowComplete the three deferred runtime gates: PDF/export/redaction, Visual Edit restoration, and a real MCP handoff.Existing capability is more valuable than another unverified feature. These are release gates, not polish.
NowFirst-run walkthrough: choose Element, Visual, or Region; capture one sample; open History; export.The first win should take under a minute without reading the README.
NowOne named handoff action: “Download for agent,” followed by the exact local import instruction.Users should not need to understand AI Bundle vs JSON for MCP before they get value.
NowTruth cleanup: published version, changelog status, README download language, product metadata, support URL, and privacy text.The repository currently describes v1.6 as in development even though v1.6 is public.
NextAcceptance-check verification with pass/fail and a short implementation note.This closes the feedback loop and creates a more defensible paid workflow later.
LaterFull-page capture, hosted sharing, accounts, integrations, and telemetry.Each expands scope, privacy disclosures, failure modes, and support before demand is proven.
+
+ +
+

Store listing draft

+
+
Name
+

Dev Feedback Capture

+
+
+
Short description
+

Capture element, region, and visual-edit feedback as implementation-ready specs—saved locally and exported only when you choose.

+
+
+
Opening description
+
+

Turn what you see in the browser into a change spec a developer or coding agent can act on.

+

Capture a DOM element, annotate a visible region or PDF, or preview a visual edit. Dev Feedback Capture keeps the selector, screenshot evidence, requested change, page context, and acceptance checks together.

+

Your captures stay in local extension storage. Nothing is uploaded, synced, or sent to an AI service unless you explicitly export it and choose where to send it.

+
+
+
+
Key bullets
+
+

• Element mode — capture selectors, text, styles, and notes
+ • Visual mode — directly drag and resize one element with reversible previews
+ • Region mode — annotate pages and PDFs with crops, pins, arrows, text, and redaction
+ • History — review, edit, and export saved feedback
+ • Agent-ready exports — JSON, HTML, Markdown, and an evidence bundle
+ • Local-first — minimal permissions, no always-on page access, no telemetry, no cloud sync

+
+
+
+ +
+

Four screenshots should tell the whole story

+
+
+
01
+

Pick the exact element

+

Show Element mode with the edge-anchored compact list and one clearly highlighted target.

+
+
+
02
+

Mark the visual change

+

Show Region mode with crop, arrow, numbered pin, requested change, and one acceptance check.

+
+
+
03
+

Preview without changing source

+

Show Visual mode while dragging or resizing one selected element, with original versus proposed state and the restoration promise.

+
+
+
04
+

Hand it off with context

+

Show History and the one-click agent export, with evidence and structured requirements visible.

+
+
+

Do not lead with MCP terminology. Lead with the job: “capture a change, keep its context, hand it off.”

+
+ +
+

How this can make money

+
+
+
Best first offer
+

Free extension + Local Pro

+
$49 founding license
+
    +
  • Multi-project feedback inbox
    • +
  • Watched-folder agent import
    • +
  • Status and acceptance-check round trip
    • +
  • Export presets and reusable templates
    • +
  • No hosted page content
    • +
+

Why: it monetizes the developer workflow while preserving the extension’s strongest privacy advantage.

+
+
+
After team demand
+

Hosted Team

+
$12–20 / creator / month
+
    +
  • Shared projects and guest links
    • +
  • Assignments, comments, and audit history
    • +
  • GitHub, Linear, Jira, or Slack handoff
    • +
  • Admin and retention controls
    • +
+

Risk: backend security, privacy, billing, support, and integration maintenance become the product.

+
+
+
Do not do
+

Paid basic capture

+
Not yet
+
    +
  • No paywall on Element or Region capture
    • +
  • No ads in the page overlay
    • +
  • No sale of browsing or page data
    • +
  • No cloud account merely to export
    • +
+

Why: it weakens acquisition and trust before the product has demonstrated repeat use.

+
+
+

Comparable products charge for collaboration and workflow depth: Jam lists a free tier and a $14-per-creator Team tier; BugHerd’s Standard plan is $50/month for five members; Marker.io starts at $39/month. That is the signal: capture earns attention, workflow earns money.

+
+ +
+

Validation gate before building billing

+
    +
  1. Recruit five real users—freelance developers, agency owners, QA, or PMs—and watch each complete one capture and export.
    2. +
  2. Get ten people to use it on two separate days within a two-week window. Measure manually or through Store analytics; do not add extension telemetry for this test.
    3. +
  3. Ask for the sale: offer a $49 founding Local Pro license with the promised workflow above. Build it only after at least three people commit to paying.
    4. +
  4. Use one success definition: a user captures a change, hands it to a developer/agent, and records whether the acceptance checks passed.
    5. +
+
Guardrails: permissions remain storage, activeTab, and scripting; no page content leaves the device without an explicit export; no evidence is lost; and every Store privacy disclosure matches actual behavior.
+
+ +
+

Further questions

+
    +
  • Who is the first paying customer: solo developer, agency, QA team, or product manager?
    • +
  • Is the highest-value loop “feedback to agent,” “client to agency,” or “QA to developer”?
    • +
  • Will Local Pro be a separate desktop companion, a supported MCP package, or both?
    • +
  • Which single integration would three paying users choose first?
    • +
+
+ +
+

Caveats and assumptions

+

This plan uses the current source tree, the public v1.6 listing, official Chrome policy, and current competitor pricing. The priority scores and proposed prices are decision aids—not observed conversion data. Before setting a final price, check the Developer Dashboard’s actual listing impressions, installs, and retention signals.

+

Chrome’s updated user-data policy takes effect August 1, 2026. Any future telemetry, accounts, cloud sync, or paid service must be both necessary to the disclosed purpose and prominently disclosed. Chrome’s developer agreement also states that Google is not responsible for processing product payments, authentication of paid downloads, payment records, or taxes.

+
+ +
+

Sources

+ +
+
+ + diff --git a/generate-icons.html b/generate-icons.html index 835c701..fb10f32 100644 --- a/generate-icons.html +++ b/generate-icons.html @@ -13,7 +13,7 @@ text-align: center; } h1 { - color: #667eea; + color: #4338ca; } .icons { display: flex; @@ -31,7 +31,7 @@ margin: 10px auto; } button { - background: #667eea; + background: #4338ca; color: white; border: none; padding: 12px 24px; @@ -42,7 +42,7 @@ margin: 5px; } button:hover { - background: #5568d3; + background: #f05a28; } .instructions { background: #f5f5f5; @@ -53,7 +53,7 @@ } .instructions h3 { margin-top: 0; - color: #667eea; + color: #4338ca; } .instructions ol { line-height: 1.8; @@ -110,64 +110,51 @@

Instructions:

const canvas = document.getElementById(canvasId); const ctx = canvas.getContext('2d'); - // Background gradient - const gradient = ctx.createLinearGradient(0, 0, size, size); - gradient.addColorStop(0, '#667eea'); - gradient.addColorStop(1, '#764ba2'); - ctx.fillStyle = gradient; - ctx.fillRect(0, 0, size, size); - - // Draw feedback icon (speech bubble with cursor) - ctx.fillStyle = 'white'; - - // Scale everything based on size const scale = size / 128; - // Speech bubble - const bubbleX = size * 0.25; - const bubbleY = size * 0.2; - const bubbleWidth = size * 0.55; - const bubbleHeight = size * 0.45; - const radius = size * 0.08; + // Indigo extension tile. + ctx.fillStyle = '#4338ca'; + ctx.beginPath(); + ctx.roundRect(3 * scale, 3 * scale, 122 * scale, 122 * scale, 27 * scale); + ctx.fill(); - // Draw rounded rectangle (speech bubble) + // White browser window. + ctx.fillStyle = '#fff'; ctx.beginPath(); - ctx.moveTo(bubbleX + radius, bubbleY); - ctx.lineTo(bubbleX + bubbleWidth - radius, bubbleY); - ctx.quadraticCurveTo(bubbleX + bubbleWidth, bubbleY, bubbleX + bubbleWidth, bubbleY + radius); - ctx.lineTo(bubbleX + bubbleWidth, bubbleY + bubbleHeight - radius); - ctx.quadraticCurveTo(bubbleX + bubbleWidth, bubbleY + bubbleHeight, bubbleX + bubbleWidth - radius, bubbleY + bubbleHeight); + ctx.roundRect(20 * scale, 26 * scale, 88 * scale, 76 * scale, 12 * scale); + ctx.fill(); - // Tail of speech bubble - ctx.lineTo(bubbleX + bubbleWidth * 0.4, bubbleY + bubbleHeight); - ctx.lineTo(bubbleX + bubbleWidth * 0.3, bubbleY + bubbleHeight + size * 0.15); - ctx.lineTo(bubbleX + bubbleWidth * 0.3, bubbleY + bubbleHeight); + ctx.strokeStyle = '#dfe1ee'; + ctx.lineWidth = 6 * scale; + ctx.beginPath(); + ctx.moveTo(20 * scale, 41 * scale); + ctx.lineTo(108 * scale, 41 * scale); + ctx.stroke(); - ctx.lineTo(bubbleX + radius, bubbleY + bubbleHeight); - ctx.quadraticCurveTo(bubbleX, bubbleY + bubbleHeight, bubbleX, bubbleY + bubbleHeight - radius); - ctx.lineTo(bubbleX, bubbleY + radius); - ctx.quadraticCurveTo(bubbleX, bubbleY, bubbleX + radius, bubbleY); - ctx.closePath(); + ctx.fillStyle = '#f05a28'; + ctx.beginPath(); + ctx.arc(31 * scale, 34 * scale, 3 * scale, 0, Math.PI * 2); + ctx.fill(); + ctx.fillStyle = '#f5b942'; + ctx.beginPath(); + ctx.arc(41 * scale, 34 * scale, 3 * scale, 0, Math.PI * 2); ctx.fill(); - // Add cursor icon in the bubble - if (size >= 48) { - ctx.fillStyle = '#667eea'; - const cursorSize = size * 0.15; - const cursorX = bubbleX + bubbleWidth * 0.3; - const cursorY = bubbleY + bubbleHeight * 0.35; - - // Draw cursor arrow - ctx.beginPath(); - ctx.moveTo(cursorX, cursorY); - ctx.lineTo(cursorX, cursorY + cursorSize); - ctx.lineTo(cursorX + cursorSize * 0.4, cursorY + cursorSize * 0.7); - ctx.lineTo(cursorX + cursorSize * 0.6, cursorY + cursorSize); - ctx.lineTo(cursorX + cursorSize * 0.5, cursorY + cursorSize * 0.6); - ctx.lineTo(cursorX + cursorSize, cursorY + cursorSize * 0.5); - ctx.closePath(); - ctx.fill(); - } + // Orange markup mark. + ctx.strokeStyle = '#f05a28'; + ctx.lineWidth = 7 * scale; + ctx.lineCap = 'round'; + ctx.lineJoin = 'round'; + ctx.beginPath(); + ctx.moveTo(53 * scale, 57 * scale); + ctx.lineTo(41 * scale, 68 * scale); + ctx.lineTo(53 * scale, 79 * scale); + ctx.moveTo(75 * scale, 57 * scale); + ctx.lineTo(87 * scale, 68 * scale); + ctx.lineTo(75 * scale, 79 * scale); + ctx.moveTo(68 * scale, 52 * scale); + ctx.lineTo(59 * scale, 84 * scale); + ctx.stroke(); } // Download a single icon diff --git a/history.css b/history.css index 79318a4..e85578b 100644 --- a/history.css +++ b/history.css @@ -1,25 +1,25 @@ :root { - color-scheme: dark; - --bg: #0b0d0c; - --surface: #121613; - --surface-high: #182019; - --line: #29342c; - --text: #eef5ef; - --muted: #aebbb0; - --faint: #7e8e81; - --accent: #8ed8a0; - --danger: #ff9b9b; + color-scheme: light; + --bg: #f6f5fa; + --surface: #ffffff; + --surface-high: #f0eef7; + --line: #ddd9e9; + --text: #29263a; + --muted: #6f6a7d; + --faint: #938da0; + --accent: #5b55c5; + --danger: #b63849; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } * { box-sizing: border-box; } -body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 0%, rgba(142, 216, 160, 0.11), transparent 30%), var(--bg); color: var(--text); } +body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 0%, rgba(91, 85, 197, 0.09), transparent 32%), var(--bg); color: var(--text); } button, input { font: inherit; } -button { border: 1px solid rgba(142, 216, 160, 0.42); border-radius: 8px; padding: 10px 13px; background: #66c77e; color: #07120b; font-weight: 800; cursor: pointer; } +button { border: 1px solid rgba(67, 56, 168, 0.42); border-radius: 8px; padding: 10px 13px; background: #5b55c5; color: #fff; font-weight: 800; cursor: pointer; } button.secondary { background: var(--surface-high); border-color: var(--line); color: var(--text); } -button.danger { background: #321b1d; border-color: #6f363b; color: var(--danger); } +button.danger { background: #fff0f2; border-color: #e3aeb7; color: var(--danger); } button:disabled { cursor: not-allowed; opacity: 0.45; } -button:focus-visible, input:focus-visible { outline: 3px solid rgba(142, 216, 160, 0.38); outline-offset: 2px; } +button:focus-visible, input:focus-visible { outline: 3px solid rgba(91, 85, 197, 0.34); outline-offset: 2px; } .shell { max-width: 1160px; margin: 0 auto; padding: 42px 24px 80px; } .hero { display: flex; justify-content: space-between; gap: 24px; align-items: end; border-bottom: 1px solid var(--line); padding-bottom: 24px; } @@ -34,13 +34,13 @@ h1 { margin: 0; font-size: clamp(30px, 5vw, 48px); letter-spacing: -0.035em; } .toolbar { display: grid; gap: 14px; margin: 24px 0 4px; } .search span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; font-weight: 700; } -.search input { width: 100%; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line); background: #0e120f; color: var(--text); } +.search input { width: 100%; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--text); } .actions { display: flex; flex-wrap: wrap; gap: 8px; } .status { min-height: 20px; color: var(--accent); font-size: 13px; } .status.error { color: var(--danger); } .groups { display: grid; gap: 18px; margin-top: 18px; } -.group { border: 1px solid var(--line); border-radius: 12px; background: rgba(18, 22, 19, 0.92); overflow: hidden; } +.group { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.92); overflow: hidden; } .group-header { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 16px 18px; background: var(--surface-high); border-bottom: 1px solid var(--line); } .group-title { min-width: 0; } .group-title h2 { margin: 0 0 4px; font-size: 17px; overflow-wrap: anywhere; } @@ -51,7 +51,7 @@ h1 { margin: 0; font-size: clamp(30px, 5vw, 48px); letter-spacing: -0.035em; } .evidence-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .evidence-preview figure { min-width: 0; margin: 0; } .evidence-preview figcaption { margin-top: 5px; color: var(--faint); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; } -.thumbnail { display: block; width: 100%; height: 88px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); background: #080a09; } +.thumbnail { display: block; width: 100%; height: 88px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); background: #f0eef7; } .thumbnail.placeholder { grid-column: 1 / -1; max-width: 96px; height: 72px; } .type { color: var(--accent); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: 0.09em; } .note { margin: 6px 0; white-space: pre-wrap; line-height: 1.45; } diff --git a/icon-source.svg b/icon-source.svg new file mode 100644 index 0000000..1dc031d --- /dev/null +++ b/icon-source.svg @@ -0,0 +1,17 @@ + + Dev Feedback Capture browser code icon + An orange code symbol inside a white browser window on an indigo rounded square. + + + + + + + diff --git a/icon128.png b/icon128.png index 0c3d367..808ef3d 100644 Binary files a/icon128.png and b/icon128.png differ diff --git a/icon16.png b/icon16.png index a6a8919..2ba902a 100644 Binary files a/icon16.png and b/icon16.png differ diff --git a/icon48.png b/icon48.png index 70d6666..6b2396d 100644 Binary files a/icon48.png and b/icon48.png differ diff --git a/manifest.json b/manifest.json index 726f617..3131fe1 100644 --- a/manifest.json +++ b/manifest.json @@ -1,8 +1,8 @@ { "manifest_version": 3, "name": "Dev Feedback Capture", - "version": "1.6.0", - "description": "Capture visual change specs and hand them to a project-scoped local MCP agent", + "version": "1.7.0", + "description": "Capture element, region, and visual-edit feedback as implementation-ready specs, saved locally until you export.", "permissions": [ "storage", "activeTab", diff --git a/mcp/server.mjs b/mcp/server.mjs index f0e06f3..fbd20c2 100644 --- a/mcp/server.mjs +++ b/mcp/server.mjs @@ -14,7 +14,7 @@ export async function createDevFeedbackServer(options = {}) { const readOnly = Boolean(options.readOnly); const server = new McpServer({ name: 'dev-feedback-capture', - version: options.version || '1.6.0', + version: options.version || '1.7.0', description: 'Project-scoped local feedback and evidence for coding agents.' }); diff --git a/package-lock.json b/package-lock.json index 0b36efc..a917224 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "dev-feedback-capture", - "version": "1.6.0", + "version": "1.7.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "dev-feedback-capture", - "version": "1.6.0", + "version": "1.7.0", "license": "UNLICENSED", "dependencies": { "@modelcontextprotocol/sdk": "1.29.0", diff --git a/package.json b/package.json index 2a60aa0..d62222a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "dev-feedback-capture", "private": true, - "version": "1.6.0", + "version": "1.7.0", "license": "UNLICENSED", "description": "Chrome extension for capturing structured feedback on web pages and PDFs", "scripts": { diff --git a/popup.html b/popup.html index 738d6c5..6f292f0 100644 --- a/popup.html +++ b/popup.html @@ -6,22 +6,23 @@ Dev Feedback Capture