SugarCrushWeb

Browser UI for sugar-crush's server mode

app satellite web-ui vue vite

The browser face of SugarCrush's WebSocket server mode: a Vite + Vue 3 + TypeScript + Pinia app, built once and committed as dist/, plus a one-class PHP shim that tells sugarcrush serve where the bundle lives. PHP users get the UI from composer require alone and never need Node. First-party — inspired by the opencode web UI and the OpenClaw Control UI.

Multi-session. Over the sugarcrush.v1 protocol: a sessions sidebar, a virtualised transcript with tool cards and diffs, permission cards, a composer that queues, steers or interrupts, and a status bar with a changeable permission mode; tabs and a tiled grid of up to nine live sessions; a server-wide approvals drawer; a settings form generated from the server's schema with a diff preview before saving; the Agents (with an agent view to message, pause or cancel a run), Todo, Background, Workflows and Memory panels; a command palette (Ctrl+K); a folder picker for a new session's project directory when the server runs with --allow-dir-browse; and reconnect-and-resume from a gap-free event cursor.

Install

composer require sugarcraft/sugar-crush-web:@dev

Quickstart

use SugarCraft\CrushWeb\Assets;

$root = Assets::distPath();      // absolute, realpath()-resolved dist/ directory
$manifest = Assets::manifest();  // Vite manifest: 'index.html' => ['file' => 'assets/index-….js', …]
echo Assets::version(), PHP_EOL; // bundle version stamped into dist/build-info.json

How it ships

Committed dist/The built bundle is part of the package, like the committed demo GIFs. Content-hashed file names and no timestamps make a clean rebuild byte-identical.

CI parity gateThe web workflow runs npm ci, lint, typecheck, unit tests and a build, then fails if the committed dist/ differs from what the source produces.

One-class shimAssets::distPath() / manifest() / version(). sugar-crush lists the package under suggest, so headless installs stay lean.

Lean Packagist distarchive.exclude drops src-web/, node_modules/ and the Node config, so the Composer download is the bundle plus the shim.

Developing the UI

cd sugar-crush-web
npm ci
npm run dev        # Vite dev server; proxies /ws and /api to 127.0.0.1:7420
npm run build      # rewrites dist/ — commit it with the source change

Source

API

Class	Method	Description
Assets	static distPath(): string	Absolute, realpath()-resolved path of the committed bundle; throws RuntimeException when dist/index.html is missing (a broken install)
Assets	static manifest(): array	The decoded Vite manifest (dist/manifest.json): source entry => file, css, isEntry
Assets	static version(): string	The bundle's release version from dist/build-info.json (package.json is not shipped to Packagist)