The main selling point — using your actual Chrome session instead of
spawning a fresh browser — was buried in comparison tables halfway down.
Rewrote the tagline to highlight this upfront, added a short hero
paragraph explaining why fresh Chrome is a problem, and moved the
vs Playwright MCP comparison table to the top of the page.
The CodeBlock component passes lineHeight to the parent <div> but the <code>
element was inheriting line-height: 1.85 from the Prism CSS rule
(code[class*="language-"]) which has higher specificity than inheritance.
This caused line numbers and code lines to drift apart when a custom
lineHeight was passed (e.g. the architecture diagram at 1.5).
Fix: pass lineHeight as inline style on <code> so it overrides the CSS rule.
Also reduce diagram block line-height from 1.5 to 1.3 for tighter rendering.
Placeholders are now generated into src/assets/placeholders/ instead of
public/ so Vite's asset pipeline processes them. Since all are < 4KB,
Vite auto-inlines them as base64 data URIs via assetsInlineLimit — zero
extra HTTP requests for placeholders.
- Static imports resolve to data:image/png;base64,... at build time
- JSDoc on placeholder props documents why static imports are required
(synchronous availability, Vite inlining) and warns against dynamic
imports and public/ paths
- New LazyVideo component: same pixelated poster pattern, uses native
<video preload="none" loading="lazy"> for zero-JS lazy loading
Build-time script generates tiny 32px-wide versions of all images in
public/ using sharp. At runtime, PixelatedImage component renders these
with CSS image-rendering: pixelated (nearest-neighbor / point sampling)
for a crisp mosaic effect, then fades in the real image on load.
- Auto-discovers images in public/, skips placeholder- prefixed files
- Mtime check skips regeneration when placeholder is newer than source
- Callback ref handles cached images where onLoad fires before mount
- Explicit z-index prevents placeholder from covering the real image
- Runs automatically as part of pnpm build in website package
Add explicit guidance to use playwriter first for JS-rendered websites and blocking overlays, based on repeated failures where webfetch/curl returned empty shells and screenshots were used too early.
Key updates:\n- Add a hard 'when to use playwriter vs webfetch/curl' rule in the main skill docs\n- Add a 'snapshot before screenshot' rule to prevent slow image-first debugging loops\n- Add a concrete anti-pattern for JS-rendered sites in common mistakes\n- Add obstacle-handling flow for cookie/login/age-gate overlays\n- Add media extraction/download pattern using evaluate + Node fetch/fs\n- Update skill frontmatter description (and well-known discovery copies) so context-loaded summaries also include the JS-heavy-site rule
All CSS variables previously scoped under .liveline-page with --ll- prefix
are now at :root in globals.css with no prefix. Four names conflicting with
shadcn were renamed: --brand-primary, --brand-secondary, --link-accent,
--page-border.
Class renames: .liveline-page → .editorial-page, .liveline-article →
.editorial-article, .ll-bleed → .bleed, .ll-inline-code → .inline-code,
.ll-prose → .editorial-prose.
Filenames kept as-is for this commit to isolate the rename.
Clarify in the skill frontmatter that playwriter should be used over
other Playwright MCPs since it connects to the user's existing Chrome
instead of launching a new browser instance.
Dark mode fix: import liveline.css and liveline-prism.css via CSS @import
in globals.css instead of JS import in the route file. This brings them
into the Tailwind compilation chain so @variant dark works. @variant dark
silently fails in CSS files imported only via JS — documented this
constraint in website/AGENTS.md.
- Prism dark colors use CSS variables on :root with @variant dark
- liveline.css dark overrides use @variant dark nested inside selectors
- Table cells use --ll-text-primary for full contrast in both modes
- Prose paragraphs at 0.82 opacity, bold and inline code punch through
to full opacity for visual hierarchy
- Prose line-height increased to 22px
- Add website/AGENTS.md documenting dark mode rules
- Add <strong> to every paragraph so each has at least one bold keyword
- Increase light mode Prism saturation: brighter purple, amber, green, blue
- Set font-weight 500 for code blocks and inline code
- Add letter-spacing 0.02em to code blocks and inline code
- Replace favicon.ico with transparent PNG favicons (32px, 16px) generated
from the gray extension icon, preserving alpha channel
- Move favicon links from hardcoded JSX to typed LinksFunction export in
root.tsx, rendered via <Links /> component
- Type liveline meta export as MetaFunction
- Add properly sized OG image (1200x630) for X/Slack/Discord previews,
update meta tags to reference it
- Remove 5 ChartPlaceholder stubs that were never replaced with real content
- Add OG meta tags (title, description, og:image 1280x800, twitter:card
summary_large_image) for rich previews on X, Slack, Discord
- Rename PropsTable to ComparisonTable with configurable headers prop,
fixing the hardcoded 'Prop/Type/Default' headers on comparison tables
- Remove stale Antigravity/Jetski comparison section
- Switch dark mode from .dark class toggle to prefers-color-scheme media
query via Tailwind @custom-variant. Remove inline JS script from root.tsx,
update all .dark selectors in liveline.css, liveline-prism.css to use
@variant dark from globals.css so strategy is defined in one place
- Fix scrollbar colors: light gray on light backgrounds, subtle white on
dark backgrounds (was using --color-muted which was invisible in both)
- Update remote access section with traforo link, VPN/firewall context,
MCP env var docs, and more use cases from docs/remote-access.md
Optimize the real-page aria label screenshot integration test by reducing page load overhead (parallel page setup and lighter load wait), while keeping meaningful coverage on complex public pages.
Use old.reddit.com and Hacker News for coverage, preserve label rendering and screenshot assertions, and bump playwriter version/changelog.
Warn only when a closed page is stored in session state (for example state.page), include affected state key names in warning text, and preserve automatic fallback to another open page.
Also standardize skill guidance/examples on state.page, add integration coverage for warning and non-warning close paths, and simplify warning-scope bookkeeping by removing execution-id map state in favor of scope object tracking.
- Fixed --ll-bleed to 44px (8px padding + 36px line-number width, border-box)
- Line numbers fixed width 36px (always fits 3 digits, no layout shift)
- Line number opacity increased from 0.15 to 0.3 in both light and dark mode
- Commented out code block background
- Add A (link) component with --ll-accent color, bright #58a6ff in dark mode
- Add OL (ordered list) component for numbered steps
- Remove BackButton from EditorialPage
- Use string-dedent for all CodeBlock strings, properly indented in source
- Getting started steps as OL with clickable Chrome Web Store link
- Star on GitHub link in intro paragraph
- Inline heading rule (flex + 1px line) replaces separate Divider
- Heading padding 24px top/bottom, article gap 32px
- Sidebar TOC item spacing increased to 5px
- Centered image captions
- SectionHeading now renders as flex row with hairline rule extending
to fill remaining width after the heading text (matching benji.org)
- Removed separate Divider from Section component
- Restored original diagram layout from before refactor
- Increased article gap to 32px, heading padding to 24px top/bottom
- Centered image captions
- Add @font-face for JetBrainsMono Nerd Font Mono (nerd-fonts v3.3.0) with
proper box-drawing glyph support for seamless Unicode diagram rendering
- Update --ll-font-code to use NF Mono as primary, fallback to JetBrains Mono/SF Mono
- Fix liveline-prism.css: use var(--ll-font-code) instead of hardcoded SF Mono
- Remove unused Google Fonts JetBrains Mono link from root.tsx
- Fix diagram: keep Unicode box chars for seamless lines, use ASCII < > v for
arrows (◄ ► ▼ render at inconsistent widths), recount all columns
Inline code now uses a subtle rgba(0,0,0,0.04) background pill via a ::before
pseudo-element with absolute inset and 4px border-radius, matching
benji.org/liveline exactly. Dark mode uses rgba(255,255,255,0.08).
Moved styles from inline to CSS class .ll-inline-code.
- Replace arrow + 'Index' link with bold 'playwriter' logo text in TOC sidebar
- Remove 'Playwriter' subtitle and '2025' year from page header, start with first paragraph
- Remove rounded-lg from chart placeholder images for sharp edges
Replace all hardcoded .dark class selectors with Tailwind v4's @variant dark
directive, which compiles to whatever strategy is configured in
@custom-variant dark. This means changing the dark mode strategy
(class, prefers-color-scheme, data-attribute, or combined) only requires
updating one line in globals.css — all dark mode variable overrides
and token styles follow automatically.
Changes:
- globals.css: update @custom-variant to (&:where(.dark, .dark *)) to
include the .dark element itself with zero specificity, replace
.dark {} block with @variant dark {}
- liveline.css: replace .dark .liveline-page {} with
@variant dark { .liveline-page {} }
- liveline-prism.css: replace 20+ .dark .token.* rules with a single
@variant dark {} block
Code blocks and chart placeholders now extend 36px beyond the 550px prose
column on each side via negative margins (.ll-bleed class). This aligns the
code text (after line numbers) flush with the prose left edge.
- --ll-bleed: 36px CSS variable (8px div padding + 28px line-number span)
- Responsive: bleed disabled below 650px viewport
- overflow-x-hidden on page wrapper prevents horizontal scroll
Inline script in <head> applies .dark class on <html> based on OS preference
and listens for live changes. All liveline page colors now use CSS variables
with dark overrides in .dark .liveline-page block.
- liveline.css: new vars (--ll-text-muted, --ll-text-hover, --ll-divider,
--ll-code-line-nr, --ll-btn-bg/shadow, --ll-fade-*) + full dark overrides
- liveline-prism.css: GitHub Dark syntax highlighting theme under .dark
- liveline.tsx: ~30 hardcoded rgba/hex colors replaced with CSS vars
- root.tsx: anti-FOUC script toggling .dark from prefers-color-scheme
Simplifies article content by extracting repeated patterns into
reusable components:
- Section: wraps Divider + SectionHeading + children
- List: styled ul with typography inline styles
- Li: styled li with correct padding
Article JSX now reads as clean declarative markup instead of
verbose inline-styled HTML.
Recreates the benji.org/liveline page in the website folder using React,
Tailwind, and the same editorial design system. Charts are replaced with
static SVG placeholders.
Typography:
- Inter variable font from rsms.me (same source as next/font)
- font-weight 475 body, 560 headings, font-optical-sizing: auto
- 14px body, 20px line-height, -0.09px letter-spacing
- Near-black text rgb(17,17,17), 40% opacity secondary
- Display P3 accent colors with @supports fallback
Layout:
- 550px narrow content column, fixed TOC sidebar
- Stagger-in entrance animation with cascading delays
- Fixed header fade gradient (multi-stop white-to-transparent)
- Scroll-spy TOC highlighting via IntersectionObserver
Code blocks:
- Prism.js syntax highlighting with GitHub-light color palette
- Line numbers column with 20px right padding
- 12px / 18px font size
Props tables, dividers, captions, code blocks, bullet lists all
styled to match the original computed values.
Oracle review found that popupWarnings was only drained on the success
path. If execute() threw, warnings would leak into the next unrelated
call. Now drain in both success and catch paths.
Also guard indexOf returning -1 when popup isn't in context.pages() yet.
page.opener() produced false positives during CDP reconnection because
existing pages re-enumerated via context.pages().forEach would sometimes
have a non-null opener. page.on('popup') only fires for actual
window.open() and target=_blank interactions, so it's safe to attach
on both new and existing pages without false positives.
When window.open() creates a popup, agents have no visibility into it
and can't control it via playwriter. This adds a [WARNING] line to the
executor output telling agents the popup page index, URL, and to repeat
the interaction without popups or navigate to the URL directly.
Detection uses page.opener() on newly created pages (context 'page'
event), not on existing pages during reconnection to avoid false
positives.
Fixes:
- Bug: page.screenshotWithAccessibilityLabels was called as method on page,
fixed to standalone function call
- Removed duplicate 'debugging playwriter issues' section at end of file
(identical to the detailed one earlier)
- Softened waitForTimeout rule: short waits (1-2s) now acknowledged as
acceptable for non-deterministic events like popups/animations
- Fixed download example path from /tmp/ to ./
- Added note that bare 'page' in examples is for brevity, real automation
should use state.myPage
- Consolidated diff behavior explanation to one place in snapshot section
(was repeated 3 times with slight inconsistencies)
- Trimmed redundant 'prefer snapshots' advice to reference the dedicated
'choosing between snapshot methods' section
- Consolidated cmd+click popup advice (was in both mistakes and common
patterns with duplicate examples)
- Cross-referenced iframe approaches: frameLocator for locator chaining,
contentFrame for Frame objects needed by snapshot()
- Clarified require is the only option in sandbox (ESM import unavailable)
The observe step now has an inner loop — if the page isn't ready (still
loading, wrong URL, expected content missing), the agent loops back to
observe again instead of acting on stale state. The ASCII diagram shows
the 'not ready' branch looping back to observe.
Every observe step in the example now prints page.url() before the
snapshot so the agent always knows the current URL. This catches
redirects and unexpected navigation between actions.
The function is now exposed as `snapshot()` in the executor sandbox scope.
`accessibilitySnapshot` remains as a backward-compatible alias pointing to
the same function, so existing agents and saved commands continue to work.
Updated all code examples across skill.md, README, PLAYWRITER_AGENTS,
docs, tests, and the extension welcome page to use the shorter name.
In connectOverCDP mode, Playwright already falls back to querying
window.innerWidth/innerHeight for viewport size (screenshotter.ts
_originalViewportSize). This test confirms the screenshot dimensions
match exactly with just scale:'css' and no manual clip, proving
the clip in screenshotWithAccessibilityLabels is redundant.
The test goes through the full extension CDP path:
Playwright → relay server → extension WS → chrome.debugger
Add a 'computer use' section to skill.md showing how Playwriter covers all
actions from the Anthropic computer_20250124 tool and the Claude Chrome
extension's custom computer tool, using Playwright APIs instead of
screenshot-based coordinate clicking.
Each subsection shows the declarative locator-based approach first (preferred)
with coordinate-based fallback for canvas/maps/custom widgets.
Also adds docs/claude-extension-tools.json with all 16 tool schemas extracted
from the Claude Chrome extension v1.0.39 (minified source) for reference.
Security hardening for privileged HTTP routes (/cli/*, /recording/*).
- Block cross-origin browser requests via Sec-Fetch-Site header validation (browsers always set this forbidden header; Node.js/curl clients don't send it, so they're unaffected)
- Reject POST requests without Content-Type: application/json to prevent the CORS simple-request bypass (text/plain POST skips CORS preflight entirely)
- Enforce token authentication on /cli/* and /recording/* when --token is set (remote access mode), matching the behavior documented in remote-access.md
- Update remote-access.md to clarify which routes require token auth
- Add security regression tests covering all attack vectors: Sec-Fetch-Site blocking, Content-Type enforcement, token validation, and Node.js client pass-through
Tommy D. Rossi