Screenshots and video

Leyline has separate workflows for local visual checks and published documentation images.

Capture the current local state

Start Vite, then run:

npm run screenshot

The command captures http://localhost:5173/ at 1503 by 818 CSS pixels. The device scale factor is 2.

It writes screenshots/current.png. The screenshots/ directory is ignored because captures can contain private local data.

Use these overrides when necessary:

SCREENSHOT_URL=http://localhost:5173/ \
SCREENSHOT_PATH=screenshots/current.png \
npm run screenshot

The local command waits for a fixed interval and reads live state. Do not publish its output without a complete review.

Capture documentation fixtures

Start Vite, then run:

npm run docs:screenshots

This command intercepts Leyline API calls and supplies sanitized fixtures. Mock coverage includes:

• Backend connections, live network-access state, switch and port changes, backend information and capabilities, file editor settings, the thought display setting, and pinned session IDs
• Provider/model and MCP inventories with the piSettings capability; saved secret values are absent
• Catalog search results for three Qwen3.8-27B provider variants, with model details, thinking maps, and compatibility metadata
• Projects, folder browsing, session lists, detail, activation, and runtime state
• Git status and selected-file diffs
• Memory records, subagent configuration, and vision configuration
• Queue, research, shell, and image-delegation transcript states
• Runtime snapshots and events, Git review notices, and terminal traffic through mock WebSockets, plus exported HTML
• Trace summaries, paged detail, bookmarks, capture configuration, and trace capability data

Unrecognized API requests fail the capture instead of reaching live data.

The registry contains the native backend and a fictional saved connection. The thought display setting is Collapsed.

The visible native address is localhost:5173, even when the capture uses another server URL. The command does not change local data or model configuration.

The command writes product images to docs/assets/screenshots/. It also refreshes the four README images in assets/readme/, including tracing.png.

Set a different app URL with:

DOCS_SCREENSHOT_URL=http://localhost:5173/ npm run docs:screenshots

Refresh selected assets with DOCS_SCREENSHOT_FILTER, a comma-separated list of basenames. A basename selects matching files in either output directory:

DOCS_SCREENSHOT_FILTER=composer-queue.png,composer-queue-held.png,activity.png,activity-mobile.png npm run docs:screenshots

For expanded tool previews:

DOCS_SCREENSHOT_FILTER=tool-activity.png,vision-tool-call.png,preview-fullscreen.png npm run docs:screenshots

tool-activity.png shows a short skill-file preview and Open full screen above a collapsed shell call. The helper checks their alignment with the tool label, keeps the action above the composer, and rejects a duplicate desktop path line.

For the settings overview and connection-test captures:

DOCS_SCREENSHOT_FILTER=backend-connections.png,models-providers.png,provider-models.png,provider-connection-test.png,model-connection-test.png,mcp-servers.png,subagents.png,vision-agent.png,project-details.png,session-details.png,settings-mobile.png npm run docs:screenshots

These images show Connections with network access off, provider Connection and Models tabs, draft connection-test feedback, MCP configuration, Agent defaults, project/session drawers, and mobile provider selection. Provider fixtures include a keyless local endpoint. The model editor capture shows its sections and fixed Save/Test controls.

For subagent inspection and the affected research views:

DOCS_SCREENSHOT_FILTER=subagent-outcomes.png,subagent-inspector-mobile.png,subagent-inspector-export.png,deep-research.png,deep-research-mobile.png npm run docs:screenshots

Asset	Captured state
docs/assets/screenshots/subagent-outcomes.png	Desktop subagent inspector with four completed tasks, one stopped task, and a selected Markdown result.
docs/assets/screenshots/subagent-inspector-mobile.png	Mobile bottom sheet with two completed tasks, one stopped task, and the child-session control.
docs/assets/screenshots/subagent-inspector-export.png	Offline HTML inspector with the five-task fixture and no live child-session navigation.
docs/assets/screenshots/deep-research.png	Completed report with the compact Research threads row in Activity.
docs/assets/screenshots/deep-research-mobile.png	The same report with a mobile citation preview.
assets/readme/deep-research.png	The research view in the README frame.

The inspector helper opens the single-call Activity card from its header, checks task selection and the full prompt, then reopens it from its row. Both entry points must keep the card collapsed and preserve its height and position. The export capture blocks the external preview renderer to verify that the inspector works offline.

For network access:

DOCS_SCREENSHOT_FILTER=backend-connections.png,network-access.png,network-access-mobile.png npm run docs:screenshots

Asset in docs/assets/screenshots/	Captured state
backend-connections.png	Connections with sharing off, Proxy port set to Automatic, and saved backends.
network-access.png	Desktop Connections with sharing on, saved proxy port 52342, and copyable fixture URLs.
network-access-mobile.png	The same fixed-port state at 390 by 844 CSS pixels.

The helper enters 52342, selects Apply, checks that sharing remains off, and then uses the real switch to enable it. Capture waits for the saved field, enabled state, and both URL rows. Intercepted requests change only browser fixture state. They never open a real listener or change local settings. The example IPv4 addresses use documentation ranges. The port is a capture example, not a product default.

For the model editor and catalog workflow:

DOCS_SCREENSHOT_FILTER=model-catalog.png,model-editor.png,model-thinking.png,model-catalog-mobile.png,provider-connection-test.png,model-connection-test.png npm run docs:screenshots

Asset in docs/assets/screenshots/	Captured state
model-catalog.png	Search results beside the selected OpenRouter entry and checked import groups.
model-editor.png	Copied model details, with the catalog ID still editable and the Model section selected.
model-thinking.png	Imported thinking map and developer-role flag after local ID and limit edits.
model-catalog-mobile.png	Catalog-match selector above the review, with Back/Copy controls fixed below.
provider-connection-test.png	Unsaved provider settings and synthetic test feedback.
model-connection-test.png	Unsaved model settings and synthetic test feedback in the fixed footer.

The catalog capture helper follows the real search, selection, and copy controls. It checks the copied ID, limits, thinking map, and developer role. Existing overview captures keep their fixture inventory.

Inventories, catalog matches, and connection-test responses are synthetic. Catalog metadata is fixed capture data, not a statement of current provider limits. The handler accepts only the expected fixture test action. It never sends a real provider request or submits configuration or authentication changes.

Use these fixed settings and fixture requirements for refreshed documentation images:

• Desktop viewport: 1440 by 900 CSS pixels
• Mobile viewport: 390 by 844 CSS pixels
• README viewport: 1503 by 818 CSS pixels
• Device scale factor: 2
• Locale: en-US
• Time zone: UTC
• Reduced motion: enabled
• General model label: local/minimax-m2.7
• Ultrafast exception: eligible openai-codex Responses or API-key openai Responses with gpt-6-astra or gpt-6.1-sol
• Vision selector: local/qwen3.6-27b, with actual image-input support
• Catalog/editor example: Qwen3.8 27B metadata inside Settings only; the parent composer remains local/minimax-m2.7
• Thought display default: Collapsed
• Project captures: harbor, field-notes, and three sanitized matching folders
• Git review captures: release-safety with four sanitized changed files
• Queue captures: the open Up next corner tray and the closed Held tab with Resume
• Activity captures: one selected run, one same-project run, one runtime error, one session with an editable queued task, and a shared-CWD warning
• Subagent captures: compact Activity rows and separate task inspectors; five tasks on desktop/export, three on mobile, with one stopped task in each group
• Deep research captures: three completed threads, six ledger sources, four citations, one excluded source, and a mobile citation preview
• Other fixtures: Home, workbench, pinned sessions, project navigation and details, backend settings, composer controls and shell mode, transcript actions, fullscreen previews, memory, subagents, vision delegation, runtime events, terminal, export, and mobile navigation

Home shows the ultrafast chip off. Workbench, composer-control, and mobile-session captures show it on with openai-codex/gpt-6.1-sol. The pinned-session capture pins two older sanitized sessions in the current project. Other captures return no pinned IDs. The workbench and export include initial and later System dividers. system-message.png shows the initial declaration and a later event open in the prompt inspector. The capture waits for real added and removed lines in the diff renderer. Unchanged instructions stay collapsed. That image crops to the dividers and inspector. The export capture checks the instruction-file diff and exact raw event text with the external preview module blocked, then closes the inspector before capture.

These models and settings exist only in the capture fixtures. The command does not change local model configuration.

Each state uses a new browser context. The script uses a fixed date with increasing millisecond ticks and waits for a state selector. MockWebSocket replaces the runtime, Git review, and terminal transports. Only the vite-hmr protocol uses the native WebSocket. No session, model, or terminal traffic reaches a live backend. The tick prevents Vue's event timestamp guard from dropping interactions.

The capture disables remaining motion.

The script blocks unrecognized /api/ requests instead of sending them to a live backend. Before capture, it checks visible text and form values for home paths, usernames, repository paths, email addresses, and common credential prefixes.

Trace captures

Refresh the tracing set with:

DOCS_SCREENSHOT_FILTER=trace-inspector.png,trace-workspace.png,trace-explorer.png,trace-capture.png,trace-mobile.png,tracing.png npm run docs:screenshots

Output	Captured state
docs/assets/screenshots/trace-inspector.png	Session Inspector with a selected observation and retained payload.
docs/assets/screenshots/trace-workspace.png	Workspace timeline and detail for the same session run.
docs/assets/screenshots/trace-explorer.png	Selected-backend Explorer across sanitized projects, with a selected preview.
docs/assets/screenshots/trace-capture.png	Expanded capture controls and selected model observation.
docs/assets/screenshots/trace-mobile.png	Mobile Inspector with reachable detail and capture footer.
assets/readme/tracing.png	Workspace in the README frame.

Desktop documentation images use 1440 by 900 CSS pixels. Mobile uses 390 by 844. The README uses 1503 by 818. All captures use device scale factor 2.

Trace fixtures supply summaries, observations, pagination, and capture status. Capture controls and bookmarks change only intercepted fixture state. Trace routes, runtime streams, and other API requests must never fall through to real backend data or model requests.

Keep the general model label local/minimax-m2.7. Preserve the approved eligible Ultrafast model and image-capable vision fixture exceptions. Do not use local trace records, private paths, or operational performance reports as documentation fixtures.

Review trace labels, usage, timing, omission markers, selected observations, mobile panel switches, and the capture footer. Check that Explorer identifies the selected backend and does not imply aggregation across connections. See Tracing and Elune integration.

Review documentation images

Open every changed image. Check these items:

1. All text is readable and correct.
2. No text or control is clipped.
3. The image has no private path, project, prompt, account, or credential data.
4. Hover, focus, loading, menu, and animation states appear only when they explain the documented action.
5. General model selectors show local/minimax-m2.7. Ultrafast captures use an eligible OpenAI model and authentication path.
6. The vision selector shows local/qwen3.6-27b and excludes text-only models.
7. System captures show the intended prompt and tool deltas without clipping.
8. Subagent inspectors show the selected task, its outcome, and the result without inline task bodies in Activity.
9. Each Markdown image reference resolves in both documentation base paths.

Run the PNG structure audit from the documentation screenshot skill when it is available. Check whitespace and both documentation base paths:

git diff --check
npm run docs:build
VITEPRESS_BASE=/leyline/ npm run docs:build

Record a walkthrough

Start Vite, then run:

npm run video

The command writes screenshots/walkthrough.webm by default. Use VIDEO_URL, VIDEO_PATH, VIDEO_DIR, VIDEO_WIDTH, and VIDEO_HEIGHT to change the capture.

Convert the result to MP4 with:

npm run video:mp4

This command requires ffmpeg. Use VIDEO_INPUT and VIDEO_MP4_PATH to change its paths.

Walkthroughs use live local state. Review and sanitize them before publication.