Live mode: inline copy editing#158
Open
abdulwahabone wants to merge 29 commits into
Open
Conversation
Adds a manual text-edit popover under the live-mode bar so users can retype copy directly without going through generate. The footer's "Apply edits" button fires a manual_edits event; the server writes the changes back to source via the new live-edit.mjs deterministic file mutator. Mirrors the wrap+accept flow but skips variant generation. New scripts: - skill/scripts/live-edit.mjs: writes manual_edits back to source - skill/scripts/live-text-rows.js: browser walker that surfaces every pure-text descendant of the picked element as an editable row Touched scripts: - skill/scripts/live-browser.js: text panel UI, CONFIGURING state hook - skill/scripts/live-poll.mjs: manual_edits routing - skill/scripts/live-server.mjs: manual_edits endpoint + handler - skill/scripts/live-wrap.mjs: small adjustments to support the flow Docs + tests: - skill/reference/live.md: manual-edit section - tests/live-edit.test.mjs, tests/live-text-rows.test.mjs Also bundles two live-mode reliability fixes that surfaced during manual testing of the feature: 1. live-inject now emits is:inline when the inject target is a .astro file. Astro otherwise processes the <script> tag and rewrites src to its own bundled URL, so the literal live.js never loads. 2. readLiveServerInfo now probes the lockfile PID with kill(pid, 0) and unlinks the stale lock if dead. Previously a crashed helper left server.json with a dead PID and live-poll reported "Live server not running" forever. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Replace the text-edit popover panel with inline contenteditable activation. When an element is picked in CONFIGURING, every pure-text descendant becomes contenteditable="true" directly on the page. Each blur-event fires a single-op manual_edits save to source. Esc restores original text and stays in CONFIGURING; successful save exits to PICKING. If Go is clicked while a save is in-flight, the save completes before generate fires. Deleted ~340 lines of panel UI (initTextPanel, openTextPanel, closeTextPanel, renderTextRow, buildTextFooter, etc.). Added enableInlineEdit, disableInlineEdit, onInlineBlur. Server contract unchanged; live-edit.mjs handles per-op saves as before. Tests: 186 pass. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Annotation overlay's click handler was intercepting clicks on contenteditable text elements. Hide the overlay when inline-edit is enabled to allow text selection and editing. Restore it when exiting inline-edit (if still in CONFIGURING). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace automatic inline contenteditable on element pick with an explicit "Edit content" badge. The badge appears at the element's top-right corner when an element is picked. Clicking the badge enters a new EDITING state where: - The contextual bar hides - The annotation overlay hides - The badge morphs to show Cancel + Apply buttons - Text descendants become contenteditable inline Edits are held in memory (input event tracking) until Apply is clicked, which fires a single batched manual_edits event with all ops. Cancel discards drafts without saving. This eliminates the annotation overlay interference that prevented clicking on text elements. The EDITING state integrates with the main state machine and handles all exits (Esc, click-outside, teardown) cleanly. All 186 tests pass. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The applyEditing function was trying to use row.tag which doesn't exist on the row object. The tag should be the tagName of the text element itself (row.el.tagName.toLowerCase()). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Edit content button now matches Go button styling (BP.accent background, BP.mark text, FONT, transitions, hover effects) - Auto-focus first editable element when entering editing mode (50ms timeout) - Separate Cancel and Apply buttons with 8px gap (no divider) - Cancel uses muted styling (BP.hairline background, BP.textDim text) - Apply keeps brand accent styling - Remove all focus rings and outlines on edit badge buttons (no blue ring/outline in EDITING mode) Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
- Change badge buttons to use impeccable-button aesthetic (ink background, surface text, hover to accent) - Removes aggressive styling conflict with Go button - No animations; simple 150ms background transition - Matches site design language (padding 0.625rem 1.5rem, 0.8125rem font, letter-spacing 0.03em) - Shorter, clearer button copy: "Edit" instead of "Edit content", "Save" instead of "Apply" - Fix cursor positioning: cursor now appears at END of text, not beginning - Use Selection API to collapse cursor to end of contenteditable element - Improves UX for immediate continuation of text - Update live.md documentation to reflect new button labels Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Edit/Save buttons: oklch(10% 0 0) background → oklch(60% 0.25 350) on hover - Cancel button: oklch(55% 0 0) background → oklch(65% 0 0) on hover - All buttons: 6px border-radius (matches Go button), oklch(98% 0 0) text - Smooth transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1) (--ease-out) - Uses site color palette instead of live-overlay constants Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Use exact .slop-callout aesthetic: paper background, accent border + text, uppercase 10px (0.625rem) - 600 weight, 0.06em letter-spacing, 4px 8px padding, 6px border-radius - Box-shadow: 0 2px 8px rgba(0,0,0,0.1) matches site callouts - Hover: inverts to filled background (accent fill, paper text) - Cancel uses ash color variant for muted state, Save uses accent - Smooth 0.3s cubic-bezier(0.16, 1, 0.3, 1) transition on background and color Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- Border-radius: 999px (pill shape) - Padding: 2px 8px (more compact) - Removed text-transform: uppercase Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- Border: 1px solid oklch(92% 0 0) (--color-mist) - Color: oklch(55% 0 0) (--color-ash) - Hover: inverts to ash background with paper text Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
… EDITING mode - Add inline outline: none on each row's element when contenteditable activates - Inject [data-impeccable-editable] CSS rule to override browser default focus ring - Use !important to win against site styles that re-apply focus outlines - Cleanup restores outline/data-attribute on disable Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Manual text edits now POST directly to a new /manual-edit endpoint
that runs live-edit.mjs synchronously and returns the result. The
event is never enqueued, never reaches the poll loop, never reaches
the agent.
Why: every Save was costing an LLM turn. The poll script would
dequeue the manual_edits event, run live-edit.mjs deterministically,
post a completion ack, then print the event JSON to stdout. The
Claude agent would read that output and decide "loop and re-poll".
Zero real work for the agent but every Save burned context.
Changes:
- live-server.mjs: new POST /manual-edit handler that runs live-edit.mjs
synchronously and returns the result. Does not enqueue, does not log
to session store. Defense-in-depth: /events rejects manual_edits.
- live-browser.js: applyEditing() POSTs to /manual-edit instead of
sendEvent({type: 'manual_edits'}).
- live-poll.mjs: removed manual_edits handler branch (dead code now).
- reference/live.md: removed "Handle manual_edits" section; replaced
with a one-line note that manual edits are server-direct.
The HMR-triggered page reload remains (dev server detects source file
change) but that is a separate dev-server behavior, not our pipeline.
resumeSession() already restores variants and selection after reload.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Decouples manual-edit Save from source file writes. Save now stashes
to .impeccable/live/pending-manual-edits.json with no HMR refresh.
The user explicitly asks the AI to commit when ready.
Why: even with the prior /manual-edit fix, every Save still wrote to
source and triggered the dev server's HMR/full reload. The page flash
was the actual user pain. Now there's zero source touch on Save, and
the user controls when the dev server reloads.
Server (live-server.mjs):
- /manual-edit-stash POST: append to buffer file. Returns {ok, pendingCount, totalCount, perPage}.
- /manual-edit-stash GET: query counts by page for counter UI.
- /manual-edit-discard POST: drop entries (all if no pageUrl).
- Old /manual-edit returns 410 Gone (defense in depth).
- Buffer ops merge by (pageUrl, ref): keep first originalText, update newText.
CLIs:
- live-commit-manual-edits.mjs: read buffer, shell out to live-edit.mjs
per entry, truncate succeeded entries, surface failures.
- live-discard-manual-edits.mjs: truncate buffer (optionally scoped by page).
- Both take optional --page-url=<url>.
Browser (live-browser.js):
- applyEditing() POSTs to /manual-edit-stash, no source write.
- Pending pill (• N staged) + trash icon next to Exit in global bar.
- One-time onboarding toast on first Save: "Saved. Tell the AI to commit when ready."
- Counter persists across reloads via GET /manual-edit-stash on init.
- Trash icon: confirm dialog scoped to current page, then POST /manual-edit-discard.
Variant pipeline interaction:
- live-wrap.mjs: when wrapping an element, apply pending manual edits to
the source range so the wrap block's "original" variant reflects the
user's edited DOM (their pre-Go view), not the raw source.
- live-accept.mjs: after accept writes the variant to source, scrub
buffer ops whose originalText no longer appears in that file. The
accept embodies the manual edit; the pending op is consumed.
- Variant discard does NOT touch the buffer.
Reference docs:
- reference/live.md: full commit/discard contract, trigger guidance
(narrow action-verb intent), do-not-auto-commit rule.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Click the "• N staged" pill → confirm dialog "Apply N staged edits to source? The page will reload." → POST /manual-edit-commit on the server, which shells out to live-commit-manual-edits.mjs. Same path the AI uses, just triggered from the overlay. Trash icon stays for discard. The AI-driven commit path also stays (useful for inspecting failures or scripting). The pill is now the primary apply affordance because it removes the chat-context-switch for the common case. Pill styling: pointer cursor, accent border + text at rest, fills on hover (accent bg, paper text). Tooltip: "Click to apply staged edits to source". First-save toast updated: "Saved. Click the 'staged' badge to apply, or ask the AI." Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Multi-row inline editing captures each contenteditable leaf (row.el) but the op was being built with selectedElement.id / classList — i.e. the parent card, not the editable text node. live-edit.mjs then searched source for the parent's class on the leaf's tag (e.g. <span class= "foundation-card">), found nothing, and silently failed. Use row.el's own id / classList instead. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
There are 4 total unresolved issues (including 3 from previous reviews).
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit a80c563. Configure here.
A bare <em>/<strong>/etc. with no id or class produced ops the CLI rejected with insufficient_locator. Prefer the leaf's own id/class; if neither exists, walk up to the nearest ancestor with one and adopt its tag + locator. Text-replace still works because the CLI narrows by originalText inside the matched element's source range. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The text-rows walker skips elements with mixed children (text + element + text), so paragraphs like "Some text <code>x</code> more text" or "Body text · <a>link</a>" exposed zero rows for the surrounding copy. At edit time, wrap each non-whitespace direct text-node child in a marker span so the walker emits a row for it. Unwrap on save/cancel. The locator climbs to the parent's class as before, and live-edit narrows by originalText inside that parent's source range. hasTextRows now uses a lightweight subtree check that matches the new wrap+walk path so the edit affordance shows up on mixed-content elements. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
abdulwahabone
changed the title
CB-2 - Escape reverted DOM text but inlineEditDrafts retained the pre-revert value; clicking Apply afterwards committed the undone edit. Clear the draft entry when restoring innerText. CB-3 - The scrub gate !result.handled || result.handled !== false was a tautology that ran the scrub regardless of accept outcome. Use the intended result.handled !== false. CB-4 - The buffer-aware "original" content step in live-wrap iterated every entry in the buffer with no pageUrl filter, so an edit on /a could leak into a wrap call on /b. Add --page-url to the CLI; filter by it; skip the buffer-aware step entirely when omitted. live.md updated. CB-5 - removeEntries returned entry count while truncateBuffer returned op count, causing the discard CLI and HTTP endpoint to report mixed units. Make removeEntries return ops removed. CB-6 - applyTextReplace used string truthiness to gate prepending content above the edit, which silently dropped a leading empty line when the file started with '\n'. Gate on the line index instead, and mirror the fix on the trailing-empty-line side. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
A3 — applyTextReplace refuses with text_ambiguous_in_block when
originalText appears more than once in the matched element block.
Refusing is safer than picking the first indexOf hit when we can't
tell which leaf the user edited; user can rephrase one occurrence.
A4 — newText is rejected if it contains <, >, {, }, or a backtick.
Two layers: server-side validator in /manual-edit-stash returns 400,
CLI-side guard in applyTextReplace returns invalid_chars_in_newText.
Browser surfaces the specific reason via toast. The shared char list
lives in live-edit.mjs (validateNewTextChars). reference/live.md
documents the rule.
A6 — New test files cover the orchestration gap:
- live-manual-edits-buffer.test.mjs (17 tests across read/stage/
remove/find/count/truncate; pins removeEntries returns OPS count)
- live-wrap-buffer-aware.test.mjs (3 tests; CB-4 regression test)
- live-commit-manual-edits.test.mjs (4 tests; partial-failure,
--page-url scope, no_pending_edits)
- live-discard-manual-edits.test.mjs (3 tests; CB-5 unit consistency)
- live-accept-scrub.test.mjs (4 tests; keep/drop/prune)
Plus 2 new cases in live-edit.test.mjs for A3 and A4.
Side-effect refactors:
- scrubManualEditsAgainstFile accepts cwd for unit-testing and is
exported.
- Failed-op entries in live-edit.mjs now propagate forbidden and
occurrences fields so callers can surface specifics.
41 tests across the 6 affected files pass; full suite green at 186/186.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Local review notes belong in the working tree, not the PR diff. Kept in the file system; just untracked. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Live-inject script tag and the "Impeccable Works!" / "WHAT'S INCLUDED IN THE BOX" / "Wow Impeccable. ---- " strings were test edits that slipped back into the branch. Restore both files to match main. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Clicking Edit during GENERATING would open inline text editing on the same DOM region the variant wrapper is about to land in, racing the HMR and the mutation observer. The badge now switches to an 'idle-disabled' rendering (ash + mist, not-allowed cursor, disabled attribute, tooltip) the moment state transitions into GENERATING. Returns to 'idle' on the normal CONFIGURING re-entry paths. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…ng edits
When a manual edit is staged ("Impeccable Works!") but not yet committed,
the buffer holds the user's edited DOM while source still has the un-
edited text ("Impeccable"). live-wrap's buffer-aware step exists to
rewrite the wrap block's <div data-impeccable-variant="original"> to
match the staged DOM, but per CB-4 it is gated by --page-url. When the
agent invoking live-wrap omits --page-url, the buffer-aware step
silently no-op'd and the variant authoring saw stale source — the
user's manual edit appeared lost.
Make the silent no-op a loud error: when buffer.entries.length > 0
and --page-url is missing, exit 1 with
{ error: 'missing_page_url_with_pending_edits', pendingEntries, hint }.
Empty buffer = no risk = no requirement, so existing flows without
pending edits keep working.
Updated reference/live.md to flag --page-url as required when the
buffer has entries. Added regression test in
live-wrap-buffer-aware.test.mjs. live-wrap.test.mjs gained a buffer-
clear hook so any leftover .impeccable/live/pending-manual-edits.json
from local dev doesn't trip the new check.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Live-inject script tag in Base.astro slipped back in via git add -A while a local live server was running. Restore both site/ files to main. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #139.
Why
When you already know the copy you want, going back and forth with the AI for every tweak in Live mode wastes context window time. This PR adds the path the issue asked for: select text in the live overlay, edit it in place, and write the change back to source when you're ready.
How it works
Why do we need a "Manual Edit mode"
An earlier draft let the user edit text inline the moment they clicked a word, with no separate mode. That broke the annotation flow: clicking text was already the way to start an annotation, and the two gestures couldn't coexist on the same selection without one swallowing the other.
A dedicated Edit mode resolves the clash. Clicking still picks an element. The bar offers Edit as a deliberate next step. Entering it hides the
impeccable-live-barso the user can focus on copy without the rest of the overlay competing for attention, and exits cleanly back to the picker when they're done.Why do we need a "Staged X edits"
Writing to source on every Save sounded simple, but in practice each Save fires an HMR reload. The user loses focus mid-thought every time they touch a different element: cursor gone, scroll position jumped, the page rebuilt under them. That's painful when the natural workflow is editing several pieces of copy in a row.
Staging fixes this. Save goes to a server-side buffer at
.impeccable/live/pending-manual-edits.json; source stays untouched and no HMR fires. The reload only happens once, when the user explicitly clicksApply N staged(or asks the AI to commit). The pill persists across reloads so the work isn't lost.Handles Nested Text elements
Applying the staged edits
Discarding the staged edits
What changed
Inline text editing in the overlay
contenteditableon each row.<p>copy <code>x</code> more copy</p>) work too: each non-whitespace text-node child is wrapped in a marker span at edit time and unwrapped on save/cancel.Staged-edit buffer
.impeccable/live/pending-manual-edits.json(gitignored).POST /manual-edit-stash,GET /manual-edit-stash,POST /manual-edit-commit,POST /manual-edit-discard.(pageUrl, ref)server-side so re-editing the same element doesn't pile up entries.Apply / discard from the overlay
Apply N stagedpill once anything is staged. Clicking it commits the buffer to source via the newlive-commit-manual-edits.mjsCLI.CLIs (also available to the AI)
live-commit-manual-edits.mjs [--page-url=<url>]reads the buffer, applies each entry vialive-edit.mjs, drops succeeded entries, surfaces failures.live-discard-manual-edits.mjs [--page-url=<url>]truncates the buffer.live-edit.mjs --id ID --ops <json>is the underlying source rewriter (locator + text-replace within range).Locator robustness
<em>,<strong>, etc.), the locator climbs to the nearest ancestor that has one and adopts its tag/class. The CLI then narrows byoriginalTextwithin that ancestor's source range.Variant pipeline awareness
live-wrap.mjsis buffer-aware: the wrap block'sdata-impeccable-variant="original"reflects the edited DOM, not the raw source. Variants generated by other commands see what the user actually sees.live-accept.mjsscrubs matching buffer entries after an accept (the accept absorbs the manual edit). Variant discard does not touch the buffer.Safety rails (added during review)
newTextcontaining<,>,{,}, or a backtick is rejected at the server (400 from/manual-edit-stash) and at the CLI (invalid_chars_in_newText). Plain text only; markup goes through the AI.originalTextappears more than once in the matched element block, the CLI refuses withtext_ambiguous_in_blockinstead of guessing which leaf to replace.What's not in this PR
<code>/<pre>subtrees: preserved verbatim by design.Follow-ups
Tracked from the review pass for a future PR. None of these block the inline-copy-editing flow this PR is shipping.
webkitUserModify: 'read-write-plaintext-only'is Safari-only; Firefox / Chrome / Edge deliver rich-text paste. Needs apastelistener that intercepts and inserts the plain-text payload at the caret.confirm()for Apply / Discard. The current dialog freezes the overlay (animations, SSE, picker) while it's open. Existing toast / banner UI should cover it./poll,/source,/annotation).scrubManualEditsAgainstFile. Today'sfileContent.includes(originalText)heuristic has known false-keep / false-drop edges on short shared phrases. Recording the wrap block's line range pre-accept and intersecting on scrub would tighten it.@typedef Opand shape consistency. The op schema is documented in three places (header comment, validator, merge);result.failedshape diverges betweenlive-edit.mjsandlive-commit-manual-edits.mjs. A shared JSDoc typedef would catch drift.Test plan
bun run buildcleanbun test(186 / 186 green, including 41 tests across the new buffer / wrap / commit / discard / scrub / live-edit coverage)bun run dev+npx impeccable liveon a page; pick text, edit, Save. No HMR, onboarding toast appears once.Apply N stagedand matches the per-page count; clicking applies and reloads with source updated.<a>/<code>exposes editable rows for both the surrounding copy and the inline children's text.<em>/<strong>) without classes applies cleanly through the ancestor-climb locator.<h1>, run Bolder. Variants reflect the edited text. Accept one. Buffer entry for that h1 is scrubbed automatically.</p>or{in a field surfacesSave rejected: newText cannot contain ...toast; nothing is buffered.