> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vulpy.io/llms.txt
> Use this file to discover all available pages before exploring further.

# The Vulpy WebUI: your Fox control surface

> Tour the six built-in experience features that make up the Vulpy WebUI: core, welcome, side panel, env-context, env-actions, and profile switcher.

The Vulpy WebUI is where you and Fox work together. It runs inside the Hermes container and is reachable at [http://localhost:8787](http://localhost:8787) locally, or on your Fox Tailscale MagicDNS name on a VPS. This page walks through the six built-in experience features it ships with.

<Tip>
  **Ask Fox from inside the WebUI.** The controls below are exposed so you can inspect and click, but Fox drives them for you.

  Try prompts like:

  * "Open the side panel to Medusa admin."
  * "Show me env-context for dev."
  * "Add an iframe target for my analytics dashboard."
</Tip>

## The six features

The WebUI features live under `extensions/hermes-webui/features/` and are bundled as one manifest entry named `vulpy-commerce`. They load in a defined order so later features can rely on the core registry.

<AccordionGroup>
  <Accordion title="vulpy-commerce-core">
    The bootstrap layer. Defines the `window.VulpyCommerce` registry, the runtime config loader, a tiny event bus, and shared `[data-vc]` design tokens. Loaded first in the manifest so every later feature script can rely on it.
  </Accordion>

  <Accordion title="vulpy-commerce-welcome">
    The guided first-boot flow. Walks you through store setup while Fox brings up services, runs migrations, seeds the catalog, and verifies the shop is healthy.
  </Accordion>

  <Accordion title="vulpy-commerce-side-panel">
    A floating toggle plus a right drawer with lazy tabbed iframes into admin surfaces (Medusa admin, Payload admin, Matomo, and any custom targets you set in `VULPY_WEBUI_IFRAMES`). Also hosts custom `pages/` served by `/extensions/`.
  </Accordion>

  <Accordion title="vulpy-commerce-env-context">
    The live shop-state banner. Shows which environment the current conversation is targeting, the state of services and ports, and health checks. It emits session events that env-actions listens to.
  </Accordion>

  <Accordion title="vulpy-commerce-env-actions">
    The safe, approved action bar. Buttons include `pull-data`, `push-staging`, `push-live`, and `logs`. Fox proposes an action, you approve, and only then does it run. Push-to-live buttons are hidden until the current environment supports them.
  </Accordion>

  <Accordion title="vulpy-commerce-profile-switcher">
    A CSS-driven feature for switching between shop profiles inside the WebUI.
  </Accordion>
</AccordionGroup>

## Fox and you share the working tree

Fox's `/app/workspace` is a bind mount of your host checkout, so edits Fox makes are immediately live on the host filesystem. You do not need `git pull` on the host after a Fox change, and Fox picks up your local edits without a rebuild.

<Tip>
  All six features ship as one manifest entry. Per-feature toggles are a deliberate non-goal: the product layer is one switch. Namespace anything you add as `vulpy-commerce.*`, `vc-*`, or `data-vc-*` so it does not collide with other Vulpy products.
</Tip>

<CardGroup cols={2}>
  <Card title="Missions" icon="list-check" href="/fox/missions">
    Guided setup and ongoing operations in the WebUI.
  </Card>

  <Card title="Environment context and actions" icon="satellite-dish" href="/fox/environment-context">
    How env-context and env-actions work together.
  </Card>
</CardGroup>