Skip to content

PWA And VS Code

Jump to bottom
wody edited this page May 24, 2026 · 4 revisions

PWA & VS Code extension

Introduced in v0.39.0. Two independent surfaces for using vibe-coder outside a regular browser tab.

PWA (Progressive Web App)

The admin UI is now a installable PWA. Mobile browsers offer "Add to Home Screen"; desktop Chrome / Edge / Safari offer "Install app". The installed app runs in a standalone window without browser chrome.

What's served

  • GET /static/manifest.json — name / short_name / start_url / display=standalone / theme_color #0b0d12 / icon 512x512 maskable. Linked from <head> via <link rel="manifest">.
  • GET /static/sw.js — minimal service worker registered by an inline <script> in AdminTemplates.shell.

Service worker strategy

const CACHE_VERSION = 'vibe-coder-v0.46.0';

// install: precache STATIC_ASSETS
// activate: drop older caches
// fetch:
//   GET /api/*  /ws/*  /admin/*  → network only (live state)
//   GET /static/*                → cache-first (with opportunistic fill)
//   other                        → default (browser cache)
// push:               showNotification (Web Push, v0.46.0+)
// notificationclick:  focus existing tab or open /

This means:

  • Static CSS / JS / icons load offline if you previously visited the page.
  • SSR pages always hit the network — they reflect live state, never stale.
  • API and WebSocket calls bypass cache entirely — no risk of a stale response shipping.

Cache invalidation

CACHE_VERSION is bumped on each release. The activate event drops any cache not matching the current name, so users get the fresh static assets after one navigation.

Mobile install flow

  1. Open the server in mobile Chrome / Safari.
  2. Browser shows an "Add to Home Screen" prompt (or use the share menu).
  3. Tap the icon on home screen → opens in standalone mode (no URL bar).

If your server is on http:// (LAN), Chrome refuses to install (PWA requires HTTPS or localhost). For LAN-only use, the "Add to Home Screen" bookmark fallback still works.

Web Push handler (v0.46.0+)

The same service worker also wires Web Push:

self.addEventListener('push', (event) => {
  // payload-less today — show generic title/body
  event.waitUntil(self.registration.showNotification('Vibe Coder', { … }));
});

self.addEventListener('notificationclick', (event) => {
  // focus existing tab or open dashboard
});

Subscribe a browser at /settings/push — see Web Push for the VAPID flow, schema, and known limit (payload encryption deferred).

Limits

  • No background sync in this minor — planned separately.
  • No offline form submissions — the UI assumes server reachability; offline use means read-only on previously-loaded static assets.

VS Code extension (vscode-extension/)

v0.2.0 since server v0.43.0. TypeScript multi-file build; adds ws as the one runtime dep for WebSocket subscribe.

Install

From a .vsix 

cd vscode-extension
npm install
npm run package      # produces vibe-coder-0.2.0.vsix (via @vscode/vsce)
code --install-extension vibe-coder-0.2.0.vsix

Dev mode

cd vscode-extension
npm install
npm run watch        # tsc -w → out/extension.js
# in VS Code: F5  →  opens Extension Development Host

Not yet listed on the Marketplace — vsce publish is one PAT away (see vscode-extension/README.md).

Surfaces

  • Activity-bar sidebar ($(rocket) "Vibe Coder") with a Projects TreeView. Each project expands to its last 20 builds.
  • Status bar item — $(rocket) <host> (vX.Y.Z). 60-second auto refresh; click to invoke the Server status command.
  • Output Channel per project — Vibe Coder · <id> console shows every Claude frame (assistant / tool_use / tool_result / done / session_started) in real time, streamed via WebSocket.

Commands (Ctrl/Cmd+Shift+P)

Command Behavior
Vibe Coder: Login Interactive — server URL + username + password (+ optional TOTP). Handles totp_required automatically.
Vibe Coder: Server status GET /api/server/status → info notification + status-bar refresh
Vibe Coder: List projects Quick-pick
Vibe Coder: Send prompt to project console Quick-pick (or TreeView right-click) + prompt input
Vibe Coder: Trigger debug build Quick-pick or TreeView right-click
Vibe Coder: Follow project console (WebSocket) Subscribe to /ws/projects/{id}/console/logs → Output Channel. Re-run on the same project to toggle off.
Vibe Coder: Refresh projects tree Re-fetch the sidebar

Tree right-click menu

  • $(eye) Follow console — inline action button.
  • Send prompt... / Trigger debug build in the context menu.

Settings

Key Default Notes
vibeCoder.serverUrl http://localhost:17880 Set via Login or Settings UI
vibeCoder.token (empty) Set automatically by Login (ConfigurationTarget.Global)
vibeCoder.statusBar true Set false to hide the status-bar item

All three persist to the user's global settings.json.

Implementation notes

  • Runtime npm deps: only ws (WebSocket client). No axios, no node-fetch, no large UI lib.
  • HTTP via Node built-ins — http / https.
  • Multi-file build — src/api.ts (REST client), src/ws.ts (WS subscribe), src/treeview.ts (ProjectsTreeProvider), src/extension.ts (activation + 7 commands).

What's still missing

  • Webview rendering of the project console — Output Channel only.
  • Build log streaming — separate WS endpoint planned.
  • Webview for /multi-console — use the browser.
  • Marketplace listing — package + install locally for now.

Related

  • [[CLI (vibe)|CLI]] — bash MVP with overlapping coverage. Use this from terminals; use VS Code extension from inside the editor.
  • REST API Reference — both PWA and the VS Code extension are thin wrappers over the same REST endpoints.

Clone this wiki locally