Copilot Bill Saver

Stop burning Copilot credits on UI bugs that should take one clear fix. Copilot Bill Saver gives vibe coders and engineering teams a simple click-through path from a broken screen to a focused Copilot handoff: capture the problem, review the evidence, and send Copilot to the files that matter.

It is built for teams that want AI-assisted development without asking every developer to become a prompt engineer. The result is less speculative context gathering, fewer wandering fix attempts, and a more repeatable way to handle UI bugs across a codebase.

Fix UI Bugs By Clicking Through The Workflow

1. Run Copilot Bill Saver: Start Here in VS Code.
2. Click the broken element in your running app, or describe the bug in the guided form when you do not want browser setup.
3. Choose the issue category, review the evidence and recommended files, then approve the handoff.
4. Paste the copied prompt into Copilot Chat. Copilot starts with the approved context before broader workspace discovery.

Bill Saver itself never calls a language model and never edits your workspace. It only captures evidence, resolves likely files deterministically, and hands a user-approved bundle to Copilot Agent, which does all searching, editing, and testing.

For Credit-Conscious AI Coding Teams

When developers spend their monthly AI credits on broad searches, repeated clarification, and off-target edits, the cost is not just tokens. It is slower delivery and inconsistent debugging habits. Bill Saver gives teams a shared, UI-first workflow for turning a visible bug into useful context before Copilot starts working.

• Make vibe coding more predictable: Developers point at the problem instead of guessing how to describe it.
• Use credits on the fix: Give Copilot bounded evidence and likely files before it spends effort exploring the whole workspace.
• Standardize the team handoff: Every approved bundle includes evidence, confidence reasons, acceptance criteria, and a suggested prompt.
• Keep the workflow approachable: Review, edit, recapture, queue, approve, and paste without learning a specialized debugging tool.
• Stay in control: Review, approve, edit, recapture, or cancel before the bundle is available to Copilot.
• Keep privacy boundaries clear: Bill Saver captures only bounded UI evidence, never calls a model, and never sends hidden data, secrets, cookies, storage, or workspace code.

Results vary by model, prompt, workspace, and Copilot behavior. Bill Saver is designed to reduce unnecessary context and improve prompt quality; it does not guarantee a specific model selection, cost reduction, or performance outcome.

Prompting For Best Results

When Bill Saver copies the tool-first prompt, paste it first exactly as-is. Then, for categories with broader intent (auth/permissions, navigation, interactive behavior, loading/error state), add one short intent line so Copilot optimizes for your expected outcome.

Use this add-on right after the copied prompt:

[Insert desired user outcome].
Success criteria: [Insert what should happen] and [Insert what must not happen].
Constraint: [Insert business/security/access rule, if any].

Example for auth/permissions:

Only admins should see and use the Delete Workspace action.
Success criteria: non-admins never see the action and cannot invoke it via route.
Constraint: preserve existing admin workflow and labels.

The Flow

1. Install the extension and open the project you want to fix.
2. Run Copilot Bill Saver: Start Here.
3. Choose Describe a UI bug. This is the recommended first use and needs no browser or application changes.
4. Choose an issue category, review the evidence and file recommendations, then approve the bundle.
5. Paste the copied prompt into Copilot Chat and press Enter.

Bill Saver asks you to activate a license only when you start a capture. Use Copilot Bill Saver: Manage License whenever you need to activate, inspect, or remove a license from this device.

Optional Browser Capture

Browser capture is only for people who want to click an element in a running development app. Run Copilot Bill Saver: Start Here, choose Copy browser capture checklist, and paste the detected stack's short checklist where you work. It covers the one-time development-only loader and the short per-session refresh step.

Browser Capture Reference

Each time Copilot Bill Saver: Flag UI Bug runs, it starts a loopback HTTP bridge on 127.0.0.1 (an ephemeral port, with a fresh random session token every time) and writes a small, framework-neutral picker script to .billsaver/picker.js at the root of the workspace opened in VS Code. Your running development app must serve that generated file in the browser.

FastAPI + Jinja2 + vanilla JavaScript

Use this recipe when FastAPI serves a static/ directory at /static/ and renders Jinja2 templates. Add the script to the template that actually renders the page you want to inspect — a page that does not extend base.html will not pick up a tag added only to base.html.

One-time application setup

1. Keep these entries in the project .gitignore:

.billsaver/
static/billsaver-picker.js

2. In the relevant Jinja2 template, add this script near the end of the <body>, gated behind a debug/dev flag your app already exposes to templates so it never needs to be added or removed by hand before a push:

{% if config.DEBUG %}
<script src="/static/billsaver-picker.js" defer></script>
{% endif %}

If your app doesn't expose a DEBUG/dev flag to Jinja yet, add one via a context processor (for example, is_dev = os.getenv("ENV") == "development") and use that instead of hardcoding the tag unconditionally. The file is gitignored and should exist only in the local development environment. Do not copy it into staging or production. Gating the tag behind DEBUG/dev means it is automatically absent in production even if you forget to remove it before committing.

Each VS Code extension session

1. Start the FastAPI app:

source .venv/bin/activate
uvicorn main:app --reload --port 8000

2. Run Copilot Bill Saver: Flag UI Bug in VS Code. Keep the review panel open. This regenerates .billsaver/picker.js with a new loopback port and session token.
3. Copy the newly generated file to the FastAPI static directory:

cp .billsaver/picker.js static/billsaver-picker.js

4. Confirm FastAPI serves the current file:

curl -s http://localhost:8000/static/billsaver-picker.js | grep 'var BASE'

The loopback port in the output must match the port shown in the Bill Saver review panel. Repeat step 3 whenever it does not match. 5. If the app sets a Content Security Policy, add http://127.0.0.1:* to connect-src in development only. Do not add it to the production policy. 6. Reload http://localhost:8000. Gate the <script> tag itself behind a debug/dev flag (as shown above) so you never have to manually add or remove it from the template before each push — it simply won't render outside development. 7. Hover over the affected element and click it. Press Escape to cancel a pick. Hold CapsLock while opening a modal or dropdown, release it, then pick the element inside it.

Important

The generated picker is session-specific. Repeat steps 2-3 every time you run Flag UI Bug; do not commit or deploy static/billsaver-picker.js.

Troubleshooting: no blue selector

Check these in order:

1. Confirm you ran Flag UI Bug, not only the review panel or manual-entry command.
2. Run Flag UI Bug first, then copy .billsaver/picker.js. Never copy the file before starting the command; each run creates a new port and token.
3. Confirm the page source contains the script tag and that the URL returns HTTP 200:

curl -s http://127.0.0.1:8001/ | grep 'billsaver-picker.js'
curl -s -o /dev/null -w '%{http_code}\n' \
  http://127.0.0.1:8001/static/billsaver-picker.js

4. Compare var BASE in the served script with the loopback port shown in the Bill Saver review panel. A mismatch means the copied file is stale.
5. If the browser console reports a CSP violation, add http://127.0.0.1:* to connect-src in development only. Do not add it to the production policy.
6. Hard-refresh the development page after copying the current script. If the script loads but the selector is still absent, check that the bridge port is reachable and that the review panel is still waiting for a pick.

Next.js app in frontend/

For a workspace containing frontend/src/app, use these one-time setup steps:

1. Add this to the workspace .gitignore:

.billsaver/
frontend/public/billsaver-picker.js

2. Add the picker to frontend/src/app/layout.tsx:

import Script from 'next/script';

// Inside the root layout body:
{
  process.env.NODE_ENV === 'development' && (
    <Script src="/billsaver-picker.js" strategy="afterInteractive" />
  );
}

For each new VS Code extension session:

1. From the workspace root, start the Next.js app from its frontend directory:

cd /path/to/your/project
cd frontend
npm run dev

2. In VS Code, run Copilot Bill Saver: Flag UI Bug. Keep the review panel open. This regenerates .billsaver/picker.js with a fresh loopback port and token.
3. Open another terminal at the workspace root and copy that newly generated file. Do this after running the command every time:

cd /path/to/your/project
cp .billsaver/picker.js frontend/public/billsaver-picker.js

4. Verify that Next.js is serving the copied script and that the port inside the script matches the loopback port shown in the Bill Saver review panel:

curl -s http://localhost:<your-app-port>/billsaver-picker.js | grep 'var BASE'

For example, if the panel says loopback port 55615, the output must include http://127.0.0.1:55615. If the port is different, the copied file is stale; repeat step 3. If there is no output, the app is not serving the file from its public directory.

5. Reload the development browser page at http://localhost:<your-app-port>.
6. Move the cursor over the untranslated element. A blue overlay confirms the picker is connected; click the element to capture it. Pressing Escape cancels the active pick.
7. If the element is inside a modal, dropdown, or other UI that only opens after a real click (for example, a "Delete session" confirmation dialog), hold CapsLock first. While it is held, clicks and hovers pass straight through to your app and the picker does nothing, so the click opens the modal normally instead of being captured. Open the modal, then release CapsLock; the blue overlay returns and you can hover and click the element inside the now-open modal. You do not need to reload the page or reopen the picker for this. (Shift, Ctrl/Cmd, and Alt/Option are not used for this because browsers treat them as click modifiers — they reroute a modifier-click on a link into a new window/tab, or in Firefox's case, Alt triggers "Save Link As". CapsLock has no such meaning to any browser, at the cost of also toggling your caps-lock state while held.)

If your app defines a Content Security Policy, its development connect-src must allow Bill Saver's loopback address on ephemeral ports:

http://127.0.0.1:*

Add this source only to the development policy; do not weaken the production policy. If the picker script loads but no blue overlay appears, check the browser console for a connect-src CSP violation.

If the Next.js app is at the workspace root instead of frontend/, copy to public/billsaver-picker.js and keep the same <Script> element.

Vite and other bundlers

Import the generated file from a development-only browser entry point, using a relative path that actually reaches the workspace-root .billsaver directory:

if (import.meta.env?.DEV) {
  import('<relative-path-to-workspace-root>/.billsaver/picker.js');
}

The script long-polls the bridge, overlays the element under your cursor once a pick is armed, and on click:

• prevents the click from triggering your app's normal click handling,
• captures only the bounded, allowlisted evidence described above,
• posts it to the bridge over 127.0.0.1 using the session token, and
• removes its listeners and overlay immediately.

It never reads form values, cookies, storage, or network data, and it is not Playwright, a CDP client, or a framework adapter. Keep it development-only and never ship the generated session script in a production build.

Manual Fallback

If instrumentation isn't wired up, times out, or you'd simply rather not modify your app, the review panel always offers a manual entry form: visible text, URL, translation key (if known), and a component hint. Manually entered evidence is clearly labeled "Manually entered" everywhere it's shown, including inside the bundle Copilot Agent retrieves.

Using #billSaverContext

Once you approve a bundle, Bill Saver copies a prompt that names the approved bundle, opens Copilot Chat, and shows a notification. Paste the copied prompt and press Enter. The prompt requires #billSaverContext retrieval before any workspace search. The tool:

• returns only bundles you've explicitly approved (never a draft),
• returns the most recently approved bundle if you don't specify an id,
• accepts an optional bundle id if you approved more than one,
• explains how to create a bundle if none has been approved yet, and
• never invokes a model, edits files, runs commands, or searches the workspace itself — it only returns the evidence, recommended paths, reasons, and acceptance criteria already in the approved bundle.

Everything Copilot Agent does after that — searching, editing, running tests — is native Copilot Agent behavior, not Bill Saver.

Plans, Trial, And Activation

Start with the free trial:

1. Open the Command Palette and run Copilot Bill Saver: Start Free Trial.
2. You get 14 days with full Heavy Coder limits. No card, one trial per installation.

To buy a plan:

1. Open the Command Palette and run Copilot Bill Saver: Buy Pro.
2. Choose a plan (all prices USD):
   • Saver — $7/month, 150 context bundles per month.
   • Heavy Coder — $19/month, 750 context bundles per month.
   • Business — $49/seat/month, unlimited team use with a fair-use ceiling of 2,000 context bundles per seat per month.
3. Complete the Stripe-hosted checkout.
4. Copy the license key from the plain-text confirmation page.
5. In VS Code, run Copilot Bill Saver: Manage License, then choose Activate or replace license key.

A context bundle is one UI issue you reviewed and approved. Drafts, recaptures, and cancelled reviews are never counted. Quotas reset at the start of each calendar month.

The key is stored in VS Code Secret Storage and validated by the Bill Saver license service. An active plan is required to capture translation evidence, use manual entry, and retrieve approved bundles with #billSaverContext.

• Free Trial supports 1 installation.
• Saver supports up to 2 installations.
• Heavy Coder supports up to 3 installations.
• Business supports up to 3 installations per seat.
• Legacy $17/month and $89 lifetime licenses stay valid at Heavy Coder limits.
• Each VS Code installation receives a random identifier stored in Secret Storage. Bill Saver sends only a hash of that identifier to the license service; it does not use a hardware fingerprint.
• In Manage License, choose Remove license from this device to release the current installation slot when the license service is reachable.
• A successfully validated installation can use the existing seven-day offline grace period, never beyond a subscription's expiration.

Privacy And Security

• The bridge binds only to 127.0.0.1 on an ephemeral port; it is never reachable from another machine.
• Every request requires a cryptographically random session token generated fresh each time the bridge starts.
• Captured evidence is limited to a strict allowlist: URL (query string and credentials stripped), bounded visible text, a CSS selector, the tag name, and the attributes id, class, role, aria-label, data-testid, and a few translation-related data-* attributes.
• Bill Saver never captures HTML, form values, passwords, cookies, storage, network data, hidden text, or credentials.
• Free text is scanned and secret-shaped substrings (bearer tokens, JWTs, cloud access keys, vendor API keys) are redacted before they're ever stored.
• File recommendations are validated to be workspace-relative; anything that would escape the workspace (absolute paths, .. traversal) is rejected.
• Approved bundles live only in memory for the current VS Code session and are cleared when the extension deactivates. Nothing is written to disk except the regenerated .billsaver/picker.js instrumentation script.
• Bill Saver makes zero language-model calls and performs no workspace edits. All editing is done by native Copilot Agent, which you review as normal.

Limitations (v1)

• Bill Saver supports 13 predefined issue categories (missing UI translation, accessibility, responsive layout, visual styling, form validation, navigation/routing, interactive behavior, loading/error state, content/copy, auth/permissions, data formatting, notifications/feedback, and general UI bug). The category is always the user's explicit choice in the review panel; Bill Saver never infers it.
• Translation resolution is local, deterministic text search (exact/normalized key and value matching, then heuristic hints, then filename conventions). Every other category is ranked by deterministic path/keyword overlap only (no file content is read). Neither approach understands your build system or executes any workspace code, and both can miss files that don't match the scanned evidence.
• The bridge and its session token are per VS Code session; reopening the window or re-running the command regenerates both, and .billsaver/picker.js is rewritten accordingly.
• Instrumentation assumes a single primary workspace folder.
• There is no persistence across VS Code restarts: approved bundles are in-memory only.
• This is not a substitute for source maps, Playwright, or CDP-based tooling; it intentionally does none of that.

Model Selection

If you want automatic model tiering for everyday coding, use native Copilot Auto model selection in VS Code. Bill Saver does not route models, and does not claim or measure guaranteed savings for that feature.

Continuous Improvement

Bill Saver is actively maintained. We continuously refine ranking quality, prompt guidance, and UX guardrails based on production feedback while keeping the privacy and deterministic-resolution constraints intact. Roadmap priorities and release behavior are tracked and enforced in our internal planning process, and shipped progress is reflected in Marketplace release notes.

Licensed Access

The two capture commands and #billSaverContext require an active license. See Buying And Activating A License for purchase, installation limits, slot release, and offline-grace details.

Support

Copilot Bill Saver is closed-source commercial software, so there is no public source repository. For questions, bug reports, and feature requests, use the Q & A tab on the extension's Visual Studio Marketplace page, or email support@vaultdeposit.ca.

License

Copyright (c) 2026 VaultDeposit Technologies Inc. All rights reserved.

Copilot Bill Saver is proprietary, commercially licensed software. It is licensed, not sold, and use requires an active license key. Copying, redistribution, modification, reverse engineering, and circumventing the activation or installation-limit mechanisms are not permitted. See the bundled LICENSE file for the full terms.