docs: add screenshots

Author: antfu

docs/.vitepress/theme/style.css

@@ -28,3 +28,16 @@
 
   --vp-local-search-highlight-bg: #adc77f;
 }
+
+.screenshot img {
+  transform: scale(1.05);
+}
+
+.screenshot figcaption {
+  text-align: center;
+  font-size: 0.875rem;
+  color: var(--vp-c-text-3);
+  margin-top: -0.5rem;
+  padding-bottom: 1rem;
+  font-style: italic;
+}

docs/examples/vite-devframe-hub.md

@@ -8,6 +8,11 @@ A protocol-witness host: roughly 120 lines of Vite plugin code that wire [`@devf
 
 Package: `vite-devframe-hub` · framework: **Vanilla TypeScript (Vite)**
 
+<figure class="screenshot">
+  <img src="/screenshots/hub-1.png" alt="Hub screenshot" />
+  <figcaption>Playground screenshot</figcaption>
+</figure>
+
 ## What it proves
 
 - `createHubContext()` boots a hub without any Vite-specific code path.

docs/guide/hub.md

@@ -6,6 +6,11 @@ outline: deep
 
 `@devframes/hub` extends devframe with the orchestration features that only make sense when many devtools share a UI: a dock registry, terminal aggregation, message/toast queue, and a command palette. It does not ship UI — each framework kit (e.g. `@vitejs/devtools-kit`) provides its own UI on top of the hub's RPC + shared-state protocol.
 
+<figure class="screenshot">
+  <img src="/screenshots/hub-1.png" alt="Hub screenshot" />
+  <figcaption>Hub allows orchestration of multiple devtools through a unified interface (example from <a href="/examples/vite-devframe-hub.html">A Playground</a>)</figcaption>
+</figure>
+
 ## What the hub adds
 
 A hub-aware node context (`DevframeHubContext`) extends `DevframeNodeContext` with four subsystems:

docs/plugins/a11y.md

@@ -8,6 +8,16 @@ An accessibility inspector that runs [axe-core](https://github.com/dequelabs/axe
 
 Package: `@devframes/plugin-a11y` · framework: **Solid + Vite**
 
+<figure class="screenshot">
+  <img src="/screenshots/plugin-a11y-1.png" alt="Accessibility Inspector screenshot" />
+  <figcaption>Hover to highlight the offending element in the page</figcaption>
+</figure>
+
+<figure class="screenshot">
+  <img src="/screenshots/plugin-a11y-copy-prompts.png" alt="Accessibility Inspector screenshot" />
+  <figcaption style="margin-top: 2rem;">Generate prompts for fixing accessibility issues</figcaption>
+</figure>
+
 ## What it does
 
 The plugin is three pieces, two of them browser-side:

docs/plugins/assets.md

@@ -8,6 +8,11 @@ Browse, preview, upload, rename, and delete the files in a directory, built as a
 
 Package: `@devframes/plugin-assets` · framework: **Vue + @antfu/design**
 
+<figure class="screenshot">
+  <img src="/screenshots/plugin-assets-1.png" alt="Assets plugin screenshot" />
+  <figcaption>Assets plugin showing the file browser and details panel</figcaption>
+</figure>
+
 ## What it does
 
 Search by name and filter by type from an inline chip row, switch between a thumbnail grid (grouped by folder) and a file tree, and open a resizable right-hand details panel with a live preview (image, video, audio, font, or text), file metadata, and ready-to-copy usage snippets (`<img>`, CSS `background-image`, `@font-face`, a download link). Upload files with the toolbar button (native file picker) or by dropping them anywhere on the frame, and select multiple assets to delete them together. A live file watcher keeps every connected client's listing in sync with changes made outside the UI.

docs/plugins/code-server.md

@@ -8,6 +8,17 @@ Run VS Code in the browser as a devframe panel. The plugin detects a local edito
 
 Package: `@devframes/plugin-code-server` · framework: **Vue**
 
+
+<figure class="screenshot">
+  <img src="/screenshots/plugin-code-server-1.png" alt="Code Server plugin screenshot" />
+  <figcaption>Launcher before Code Server starts</figcaption>
+</figure>
+
+<figure class="screenshot">
+  <img src="/screenshots/plugin-code-server-2.png" alt="Code Server plugin screenshot" />
+  <figcaption>Code Server plugin showing the embedded editor in browser</figcaption>
+</figure>
+
 ## What it does
 
 - **Detection** — on startup it probes the resolved binary with `--version`. When none is found, the launcher renders install instructions instead of a launch button.

docs/plugins/data-inspector.md

@@ -8,6 +8,16 @@ An interactive query workbench for live server-side objects, built as a **Vue**
 
 Package: `@devframes/plugin-data-inspector` · framework: **Vue + Vite**
 
+<figure class="screenshot">
+<img src="/screenshots/plugin-data-inspector-1.png" alt="Data Inspector screenshot" />
+<figcaption>Query workbench with results and data shape panel</figcaption>
+</figure>
+
+<figure class="screenshot">
+  <img src="/screenshots/plugin-data-inspector-2.png" alt="Data Inspector screenshot" />
+  <figcaption>Query data with advanced Jora syntax</figcaption>
+</figure>
+
 ## What it does
 
 - **Query workbench** — a CodeMirror jora editor with syntax highlighting and server-computed autocomplete; queries auto-run as you type, with a client-side syntax gate so malformed input never hits the wire. A toolbar copies the query, and the editor pairs with expand-all / collapse-all and copy-as-JSON controls over the results. Source, query, filters, and the auto-rerun setting persist in the URL hash, so any workbench state is shareable (see [Deep linking](#deep-linking)).

docs/plugins/git.md

@@ -8,6 +8,11 @@ A repository dashboard built as a **Next.js (App Router) + shadcn/ui** SPA over
 
 Package: `@devframes/plugin-git` · framework: **React (Next.js) + shadcn/ui**
 
+<figure class="screenshot">
+  <img src="/screenshots/plugin-git-1.png" alt="Git plugin screenshot" />
+  <figcaption>Git plugin showing repository status and commit graph in an hub example</figcaption>
+</figure>
+
 ## What it does
 
 Status, a SourceTree-style commit graph, branches, and diffs are read-only. Staging, unstaging, and committing become available when write mode is enabled — and stay gated behind the repository's actual write permission in the UI.

docs/plugins/inspect.md

@@ -8,6 +8,21 @@ A self-inspector for any devframe connection, built as a **Vue** SPA. It browses
 
 Package: `@devframes/plugin-inspect` · framework: **Vue + Vite**
 
+<figure class="screenshot">
+  <img src="/screenshots/plugin-inspect-1.png" alt="Devframe Inspector screenshot" />
+  <figcaption>Devframe Inspector showing rpc functions list</figcaption>
+</figure>
+
+<figure class="screenshot">
+  <img src="/screenshots/plugin-inspect-2.png" alt="Devframe Inspector screenshot" />
+  <figcaption>Devframe Inspector showing agent tools</figcaption>
+</figure>
+
+<figure class="screenshot">
+  <img src="/screenshots/plugin-inspect-3.png" alt="Devframe Inspector screenshot" />
+  <figcaption>Devframe Inspector showing history panels</figcaption>
+</figure>
+
 ## What it does
 
 - **Functions** — every registered RPC function with its type, JSON-serializable / snapshot flags, args and return JSON Schema, and agent exposure. Read-only `query` / `static` functions can be invoked inline and their result envelope inspected.

docs/plugins/terminals.md

@@ -8,6 +8,11 @@ A portable terminal panel built as a **Svelte** SPA on top of [xterm.js](https:/
 
 Package: `@devframes/plugin-terminals` · framework: **Svelte + xterm.js**
 
+<figure class="screenshot">
+  <img src="/screenshots/plugin-terminals-1.png" alt="Terminals screenshot" />
+  <figcaption>Terminals plugin allowing interactive and read-only terminal sessions in the browser</figcaption>
+</figure>
+
 ## What it does
 
 - **Read-only output** — stream the output of a command into a terminal view via devframe's [streaming channels](/guide/streaming).