Polish Connect navigation and responsive guide for 0.2.19

.claude-plugin/marketplace.json

@@ -12,7 +12,7 @@
       "name": "firefly-agent-bridge",
       "source": "./integrations/claude-code",
       "description": "Local jobs and workflows through your configured official Codex or Claude Code subscription.",
-      "version": "0.2.18",
+      "version": "0.2.19",
       "author": {
         "name": "@ancongui",
         "url": "https://github.com/ancongui"

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # Changelog
 
+## 0.2.19 - 2026-10-22
+
+- Show the desktop Connect screenshot across the desktop dashboard guide and keep the phone capture on narrow screens, with matching light and dark variants.
+- Replace repeated Connect badges on locked navigation items with compact lock indicators. Preserve the accessible Connect required description and existing destination gate.
+- Refresh the controlled console captures and release metadata together. Add browser checks for single-line navigation labels, accessible locked destinations and the guide screenshot selection.
+
 ## 0.2.18 - 2026-10-22
 
 - Reflow all nine architecture and workflow diagrams into two columns on wider pages and one column on phones. Light and dark variants embed Manrope and keep labels inside their cards.

assets/docs.css

@@ -617,6 +617,17 @@
 .md-typeset .bridge-shot--phone .bridge-shot__link {
   max-width: min(100%, 320px);
 }
+.bridge-shot__mobile {
+  display: none;
+}
+@media (max-width: 760px) {
+  .bridge-shot__desktop {
+    display: none;
+  }
+  .bridge-shot__mobile {
+    display: block;
+  }
+}
 [data-md-color-scheme="default"] .bridge-shot__link.theme-dark,
 [data-md-color-scheme="slate"] .bridge-shot__link.theme-light {
   display: none;

docs/dashboard.md

@@ -12,18 +12,28 @@ Open the local console URL returned by `bridge_panel` and authenticate with a br
 
 Select any screenshot to open its full capture. Images follow the page's light or dark appearance.
 
-The screenshots show Bridge 0.2.18 running in an isolated local fixture service at the configured desktop and mobile sizes. Jobs, tool observations, workflow results and provider states use deterministic fixtures. Sign-in, quota reports and dispatch appear separately; a signed-in or enabled state does not establish remaining quota or context capacity. The controlled scenes do not measure a real subscription. Historical checks with authenticated official CLIs remain in [verification](verification.md).
+The screenshots show Bridge 0.2.19 running in an isolated local fixture service at the configured desktop and mobile sizes. Jobs, tool observations, workflow results and provider states use deterministic fixtures. Sign-in, quota reports and dispatch appear separately; a signed-in or enabled state does not establish remaining quota or context capacity. The controlled scenes do not measure a real subscription. Historical checks with authenticated official CLIs remain in [verification](verification.md).
 
 ## Connect
 
 At **Connect**, choose a destination from the sidebar or phone menu. The console opens that destination after authentication. Locked destinations show the access requirement and withhold private job and service state.
 
 Paste an owner or application token into **Bridge token**. It remains in tab memory and is cleared from the form after connection. Reloading or disconnecting clears the session. Expired or revoked access returns to the connection gate and clears loaded private details.
 
-<figure class="bridge-shot bridge-shot--phone" markdown="1">
+<figure class="bridge-shot" markdown="1">
+
+<div class="bridge-shot__desktop" markdown="1">
+
+![Connect gate on desktop](../assets/screenshots/connect-desktop-light.png)
+
+</div>
+
+<div class="bridge-shot__mobile" markdown="1">
 
 ![Connect gate on a phone](../assets/screenshots/connect-mobile-light.png)
 
+</div>
+
 <figcaption>Connection gate before authentication. Choose your destination, enter a bridge token, then select Connect. Private job details appear only after access is accepted.</figcaption>
 </figure>
 

docs/installation.md

@@ -42,27 +42,27 @@ The bridge uses that CLI's existing login. Do not copy its credentials into the
 
 ## Install a native archive
 
-Download the platform archive and its checksum list over HTTPS. These examples select version 0.2.18; confirm it is available on the [release page](https://github.com/fireflyframework/firefly-agent-bridge/releases) before downloading:
+Download the platform archive and its checksum list over HTTPS. These examples select version 0.2.19; confirm it is available on the [release page](https://github.com/fireflyframework/firefly-agent-bridge/releases) before downloading:
 
 ```sh
 curl --fail --location --remote-name \
-  https://github.com/fireflyframework/firefly-agent-bridge/releases/download/v0.2.18/firefly-agent-bridge-0.2.18-darwin-arm64.tar.gz
+  https://github.com/fireflyframework/firefly-agent-bridge/releases/download/v0.2.19/firefly-agent-bridge-0.2.19-darwin-arm64.tar.gz
 curl --fail --location --remote-name \
-  https://github.com/fireflyframework/firefly-agent-bridge/releases/download/v0.2.18/SHA256SUMS
-shasum -a 256 firefly-agent-bridge-0.2.18-darwin-arm64.tar.gz
+  https://github.com/fireflyframework/firefly-agent-bridge/releases/download/v0.2.19/SHA256SUMS
+shasum -a 256 firefly-agent-bridge-0.2.19-darwin-arm64.tar.gz
 ```
 
 Compare the digest with that archive's entry in `SHA256SUMS` before extracting. On Linux, choose the `linux-x64` archive and use `sha256sum`. On Windows, choose `win32-x64` and use PowerShell:
 
 ```powershell
-Get-FileHash .\firefly-agent-bridge-0.2.18-win32-x64.tar.gz -Algorithm SHA256
+Get-FileHash .\firefly-agent-bridge-0.2.19-win32-x64.tar.gz -Algorithm SHA256
 ```
 
 Extract the complete archive into a new directory. Keep all included license and runtime files together. For macOS or Linux:
 
 ```sh
 mkdir firefly-bridge-local
-tar -xzf firefly-agent-bridge-0.2.18-darwin-arm64.tar.gz -C firefly-bridge-local
+tar -xzf firefly-agent-bridge-0.2.19-darwin-arm64.tar.gz -C firefly-bridge-local
 cd firefly-bridge-local
 ./firefly-bridge init --worker codex
 ./firefly-bridge serve
@@ -72,7 +72,7 @@ On Windows, run the matching executable:
 
 ```powershell
 New-Item -ItemType Directory firefly-bridge-local
-tar -xzf .\firefly-agent-bridge-0.2.18-win32-x64.tar.gz -C firefly-bridge-local
+tar -xzf .\firefly-agent-bridge-0.2.19-win32-x64.tar.gz -C firefly-bridge-local
 Set-Location firefly-bridge-local
 .\firefly-bridge.exe init --worker codex
 .\firefly-bridge.exe serve

docs/integrations.md

@@ -39,7 +39,7 @@ claude --plugin-dir /absolute/path/to/firefly-agent-bridge/integrations/claude-c
 
 The native archive includes a Codex plugin manifest, operation skill, MCP configuration, and local artwork beside the executable. Register it in a trusted local marketplace and install it through your supported Codex surface. The manifest uses the documented compatibility layout. See [OpenAI plugin packaging](https://developers.openai.com/plugins/build/plugins) and [local marketplaces](https://learn.chatgpt.com/docs/changelog).
 
-Register the extracted native archive as a local marketplace, then install its plugin. The following identifier matches the 0.2.18 package metadata:
+Register the extracted native archive as a local marketplace, then install its plugin. The following identifier matches the 0.2.19 package metadata:
 
 ```sh
 codex plugin marketplace add /absolute/path/to/firefly-bridge-local

docs/openapi.json

@@ -2,7 +2,7 @@
   "openapi": "3.1.0",
   "info": {
     "title": "Firefly Agent Bridge API",
-    "version": "0.2.18",
+    "version": "0.2.19",
     "description": "OpenAI-compatible Chat Completions and unified /v1/bridge orchestration extensions. Copyright 2026 Firefly Software Foundation. Author @ancongui.",
     "license": { "name": "Apache-2.0", "identifier": "Apache-2.0" }
   },

docs/verification.md

@@ -30,6 +30,12 @@ The home-page illustration is an original Bridge span mesh rendered with pinned
 
 The prose check catches a small set of editorial regressions outside code and links. It does not automate the Humanizer's contextual judgment. Manual review preserves technical claims, API labels, commands, and limitations while removing repetitive or promotional wording.
 
+## 0.2.19 Connect guide and locked navigation
+
+The dashboard guide selects the existing desktop and phone captures at the reading viewport and matches the selected theme. Browser checks verify native image dimensions, the full-image keyboard link, one caption and no horizontal overflow at 1440 and 390 pixels in both themes. The locked navigation checks keep every destination label on one line, retain the accessible Connect required description and exercise the existing sign-in gate without submitting jobs.
+
+The canonical screenshots come from isolated services and deterministic workers. These checks do not establish actual provider sign-in or model execution.
+
 ## 0.2.18 diagram readability
 
 The documentation browser checks measure the smallest rendered SVG label at 320, 390, 768, 1024 and 1440 pixels in both themes. Labels stay at least 12 CSS pixels high, the selected theme and narrow variant match the viewport, and the page stays within its viewport. A separate check loads all 36 generated SVGs, verifies the embedded Manrope face and checks every label against its canvas and card bounds. The source build tests preserve escaped alternative text and relative asset paths on the landing page and guide pages.

integrations/claude-code/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "firefly-agent-bridge",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "description": "Local jobs and workflows through your configured official Codex or Claude Code subscription.",
   "author": {
     "name": "@ancongui",

integrations/claude-code/scripts/bootstrap.sh

@@ -17,7 +17,7 @@
 # limitations under the License.
 #
 set -euo pipefail
-version="0.2.18"
+version="0.2.19"
 build="release-1"
 repository="fireflyframework/firefly-agent-bridge"
 case "$(uname -s)" in

integrations/codex/.codex-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "firefly-agent-bridge",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "description": "Local jobs and workflows through your official Codex or Claude Code subscription.",
   "author": {
     "name": "Firefly Software Foundation",

integrations/desktop/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": "0.3",
   "name": "firefly-agent-bridge",
   "display_name": "Firefly Agent Bridge",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "description": "Local developer jobs and workflows through official coding agents.",
   "long_description": "Run a durable local queue, scoped authentication, workflows, audit and a management console. Claude Code or Codex uses your own official subscription login. Default permissions are enabled; explicit bypass requires a trusted host.",
   "author": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "firefly-agent-bridge",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "description": "Local coding jobs and workflows through official Claude Code and Codex subscriptions",
   "type": "module",
   "license": "Apache-2.0",

scripts/docs-browser/connect-lead.spec.mjs

@@ -0,0 +1,62 @@
+/* Copyright 2026 Firefly Software Foundation. SPDX-License-Identifier: Apache-2.0
+ * https://www.apache.org/licenses/LICENSE-2.0 */
+import { test, expect } from "@playwright/test";
+import { readyStylesheets } from "./stylesheet-readiness.mjs";
+import { readyImages } from "./image-readiness.mjs";
+
+for (const width of [1440, 390])
+  for (const theme of ["light", "dark"]) {
+    test(`Connect lead uses its actual ${width}px ${theme} capture`, async ({
+      page,
+    }, testInfo) => {
+      await page.setViewportSize({ width, height: width === 1440 ? 960 : 844 });
+      await page.emulateMedia({ colorScheme: theme, reducedMotion: "reduce" });
+      await page.goto("/dashboard/");
+      await readyStylesheets(page);
+      await page.evaluate(() => document.fonts.ready);
+      await expect(page.locator("body")).toHaveAttribute(
+        "data-md-color-scheme",
+        theme === "dark" ? "slate" : "default",
+      );
+      const figure = page.locator("article .bridge-shot").first();
+      const links = figure.locator(".bridge-shot__link:visible");
+      await expect(links).toHaveCount(1);
+      const image = links.locator("img");
+      await readyImages(image);
+      await figure.evaluate((el) =>
+        scrollTo(0, el.getBoundingClientRect().top + scrollY - 110),
+      );
+      await page.screenshot({
+        path: testInfo.outputPath("connect-lead.png"),
+        animations: "disabled",
+      });
+      const size = width === 1440 ? "desktop" : "mobile";
+      await expect(image).toHaveAttribute(
+        "src",
+        new RegExp(`connect-${size}-${theme}\\.png$`),
+      );
+      await expect(links).toHaveAccessibleName(/Open full screenshot:/);
+      const shape = await image.evaluate((el) => ({
+        width: el.getBoundingClientRect().width,
+        figureWidth: el.closest("figure").getBoundingClientRect().width,
+        natural: el.naturalWidth,
+        src: el.getAttribute("src"),
+        href: el.closest("a").getAttribute("href"),
+      }));
+      expect(shape.natural).toBe(width);
+      expect(shape.width).toBeGreaterThanOrEqual(shape.figureWidth * 0.95);
+      expect(shape.width).toBeLessThanOrEqual(shape.natural);
+      expect(shape.href).toBe(shape.src);
+      await expect(figure.locator("figcaption")).toHaveCount(1);
+      expect(
+        await page.evaluate(
+          () => document.documentElement.scrollWidth <= innerWidth,
+        ),
+      ).toBe(true);
+      await links.focus();
+      await page.keyboard.press("Enter");
+      await expect(page).toHaveURL(
+        new RegExp(`connect-${size}-${theme}\\.png$`),
+      );
+    });
+  }

scripts/docs-browser/screenshot-gallery.spec.mjs

@@ -97,11 +97,16 @@ for (const width of [1440, 390, 375]) {
       await page.goto("/dashboard/");
       await readyStylesheets(page);
       const imageLink = page
-        .locator(".bridge-shot--phone .bridge-shot__link:visible")
-        .first();
+        .locator("article .bridge-shot")
+        .first()
+        .locator(".bridge-shot__link:visible");
       await imageLink.focus();
       await page.keyboard.press("Enter");
-      await expect(page).toHaveURL(/connect-mobile-(light|dark)\.png$/);
+      await expect(page).toHaveURL(
+        new RegExp(
+          `connect-${width === 1440 ? "desktop" : "mobile"}-(light|dark)\\.png$`,
+        ),
+      );
     });
   }
 }

src/cli.ts

@@ -47,13 +47,13 @@ async function main() {
     },
   });
   if (values.version) {
-    console.log("0.2.18");
+    console.log("0.2.19");
     return;
   }
   const command = positionals[0] ?? "help",
     dataDir = resolve(values["data-dir"] ?? defaultDataDir());
   if (command === "help" || values.help) {
-    console.log(`Firefly Agent Bridge 0.2.18
+    console.log(`Firefly Agent Bridge 0.2.19
 Usage: firefly-bridge <command> [--data-dir PATH]
   init        Initialize local configuration (--worker codex|claude)
   serve       Run the service (--managed follows host leases)

src/http.ts

@@ -246,7 +246,7 @@ export function createHttpService(d: HttpDependencies) {
   app.get("/v1/bridge/status", async (req) => {
     const p = requireScope(req, "read");
     return {
-      version: "0.2.18",
+      version: "0.2.19",
       protocolVersion: 2,
       completionRecovery: {
         version: 1,

src/mcp.ts

@@ -31,7 +31,7 @@ export function createAdapter(
 ) {
   const hostId = randomUUID();
   const server = new McpServer(
-    { name: "firefly-agent-bridge", version: "0.2.18" },
+    { name: "firefly-agent-bridge", version: "0.2.19" },
     {
       capabilities: channel ? { experimental: { "claude/channel": {} } } : {},
       instructions: bridgePrompt("mcp/server"),

src/ui/app.css

@@ -2085,10 +2085,15 @@ body {
 }
 .rail nav button[data-access="locked"]::after,
 #mobile-nav-slot nav button[data-access="locked"]::after {
-  content: "Connect";
+  content: "";
+  width: 12px;
+  height: 14px;
+  flex: none;
   margin-left: auto;
   color: var(--dim);
-  font-size: 11px;
+  background: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")
+    center / contain no-repeat;
 }
 .rail-footer,
 main > footer {

src/ui/index.html

@@ -95,7 +95,7 @@
         <div class="connection-row">
           <span class="status-dot"></span
           ><span id="connection">Disconnected</span
-          ><span class="version">v0.2.18</span>
+          ><span class="version">v0.2.19</span>
         </div>
         <button id="connect-session" type="button">Open connection</button
         ><button id="logout" hidden>Disconnect session</button>