@agentsky/desktop-ui

The interface of AgentSky for Mac: the pages the app's windows show, built into dist/ and served to them by the app's shell. The shell is the Electron side of the app, in the directory above this one; the two meet at the bridge described in docs/shell-contract.md, and this package names the contract version it was built for in package.json (agentsky.shellContract).

This package is proprietary (see LICENSE). Its sources are not published: npm publish ships index.js, dist/, the license and this file.

Layout

src/                 the pages (index.html, quick-ask.html, browser-bar.html),
                     their modules (*.mjs) and styles/
src/assets/          pictures the pages name by path (web/ and makers/ are
                     generated copies of the web's)
src/editors/         the artifact editors, bundled from the web by editors/
scripts/build.js     builds dist/
scripts/sync-web-*   regenerate the web-derived files (tokens, icons, logos, Arena)
editors/             the editors bundle's own build and dependencies
test/                node --test suites for the modules and the generated files
dist/                the build output: one script and one stylesheet per page,
                     the pages rewritten to load them, chunks/ (what the main
                     window imports on demand), assets/, editors/ and
                     vendor/mermaid.js

Building

npm run build        # dist/, minified, as the app ships it
npm run watch        # rebuild on every change, readable, with source maps
npm test

Run these here or from the shell's directory with --workspace ui; the shell's npm start, pack, dist and test build this package first. In this repository the shell depends on the package as the ui npm workspace, so npm install in the shell's directory installs this package's dependencies too and links it into node_modules/@agentsky/desktop-ui.

The pages are ES modules with htm over Preact; marked, dompurify and katex are imported and bundled. Mermaid is too large and too dynamic to bundle, so the build copies its prebuilt file to dist/vendor/mermaid.js and the page loads it as a plain script when the first diagram draws. The artifact editors are a bundle of their own (src/editors/, built by editors/build.js from the web app's sources) that the page imports when an editor opens; the build copies it as it is. The main window's bundle is split: what it imports with import() (the PDF reader's pdf.js) is a chunk under dist/chunks/ fetched when first needed, so a launch parses only what the first screen runs.

Everything a page references at run time must end up under dist/: the shell serves that directory and nothing else, under a content security policy that allows no network connection. A page's <link rel="stylesheet"> lines are bundled into one stylesheet in that order; each page has exactly one <script type="module">, bundled into one script. The build reads these from the page's markup, so adding a stylesheet means adding its <link>.

The web's files

Colours, icons, logos and the Arena's lineup come from the web app in this repository (ts/): npm run sync:web regenerates src/styles/web-tokens.css, src/web-accents.mjs, src/web-icons.mjs, src/web-logos.mjs and src/assets/web/, and src/web-arena.mjs. The outputs are committed so the package builds without ts/; npm test fails when one is stale and skips those checks when ts/ is absent. Change a colour or a logo on the web, never in the generated files. The editors bundle and the Market's maker marks are regenerated with cd editors && npm install && npm run build and node makers.js there.

Publishing

The interface has its own version; the shell pins that exact version. This lets the bundle advance without reissuing an already signed app version. To publish: npm run build, then npm publish from this directory (the files list keeps the sources out). The shell then pins the published version instead of the workspace; see the shell's README.