open-standards/wai/wai-app/web/index.html
Transaction Science 608cd843e9 wai-app: Create's crate, a library with no binary, whose export wai create writes
wai/wai-ui becomes wai/wai-app, the library `wai_app`, with no binary and no `cli`
feature: `wai`, built with its feature `app`, is its command line and its MCP
server. Its served files are named wai-app-* (the WebAssembly package wai_app),
the recordings wai-app-*.json.

- export.rs gives the files of a starter project for a program and the facts its
  project file holds (title, summary, `wai dev`'s mode for the app's room, a watch
  room's file, a show's audience); `wai create --from app.oui` writes them, the
  project file and the licence. The export no longer writes app.json, room.toml,
  relay.toml, package.json, check.mjs or serve.mjs: wai.json names the room, `wai
  dev` runs it and `wai app check` checks the project. Its README and AGENTS.md
  say so, and the README its licence.
- runtime.rs reads a Create runtime by its listing (create/wai-app-runtime.json),
  checking each file's SHA-256.
- bridge.rs keeps the bridge on 127.0.0.1 a coding agent streams a program into
  the page through, with a stream helper; the stdio server, its tools and the
  binary's test go (`wai mcp --toolset app` serves them).
- The page's Export hands over app.oui, the program in its canonical form, and the
  command that makes it a project; the ZIP writer and the page's export in
  WebAssembly go. The page names `wai mcp --toolset app` for the coding agent.
- joule-ui/docs/create.md §4 and §5: the export as `wai create --from app.oui`, and
  the agent's tools app_guide, app_check, app_stream and app_export.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-27 05:13:27 -04:00

59 lines
3.1 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Create</title>
<link rel="icon" href="data:,">
<link rel="stylesheet" href="./ui.css">
<style>body { margin: 0; padding: 16px; background: var(--wai-bg); } h1 { font: 600 1.3rem system-ui, sans-serif; color: var(--wai-fg); margin: 0 0 12px; }</style>
</head>
<body>
<h1>Create</h1>
<!-- The Create page, as wai-app serves it for development and its end-to-end test; the WAI
site's page carries the same element ids. The room service is /room-api on this page's
origin, the relay /moq. -->
<div id="create" class="create" data-service="/room-api" data-frame="./room-frame.html" data-runtime="./runtime.json" data-recorded="./recorded/">
<form id="describe">
<label for="prompt">Describe your app</label>
<textarea id="prompt">A show for my channel, with chat and a live poll</textarea>
<fieldset>
<legend>The model that writes it</legend>
<label><input type="radio" name="source" value="own"> Your own model</label>
<label><input type="radio" name="source" value="agent"> Your coding agent</label>
<label><input type="radio" name="source" value="replay" checked> A recorded stream</label>
</fieldset>
<div id="own" class="source-fields" hidden>
<label>Its chat/completions address <input id="own-endpoint" type="url" placeholder="http://127.0.0.1:8000/v1/chat/completions" autocomplete="off"></label>
<label>Model <input id="own-model" autocomplete="off"></label>
<label>Your key (kept in this tab's memory alone) <input id="own-key" type="password" autocomplete="off"></label>
</div>
<div id="agent" class="source-fields" hidden>
<label>The bridge <code>wai mcp --toolset app</code> printed <input id="agent-bridge" placeholder="http://127.0.0.1:port" autocomplete="off"></label>
<label>Its pairing code <input id="agent-code" autocomplete="off"></label>
<span id="agent-state" role="status"></span>
</div>
<div id="replay" class="source-fields">
<label>Recording <select id="recording"><option value="show">A show with chat and a live poll</option><option value="room">A live room with chat</option><option value="watch-refused">A watch party asked for chat (refused lines)</option></select></label>
</div>
<div><button id="build" class="wai-btn wai-primary" type="submit">Build it</button></div>
</form>
<p id="model-says" role="status" aria-live="polite"></p>
<div class="create-grid">
<section id="app-pane" aria-label="Your app"><div id="app" class="wai-app"></div></section>
<aside>
<h2>The program, as it arrives</h2>
<ol id="program"></ol>
<h2>Problems</h2>
<ul id="problems"></ul>
<h2>Export</h2>
<button id="export" class="wai-btn" type="button" disabled>Export app.oui</button>
<a id="download" hidden></a>
<p id="export-status" class="wai-note"></p>
<pre id="export-command" class="wai-note"></pre>
</aside>
</div>
</div>
<script type="module" src="./create.js"></script>
</body>
</html>