agent: cutover — index.html now serves the Preact rewrite, app.js deleted
mara: 'i merged this without realizing you still did not delete the old code. pls follow up with ripping out the old code.' - index.html: dropped the old static header/main/composer/overflow- menu markup and app.js's <script> tag. Now just <div id=preact-root> + <script src=static/main.js>. main.css's <link> lands after agent.css's — cascade order argus flagged matters for LoginFlow's .login-card / MetaNav's popover to win against agent.css's legacy rules, confirmed explicitly rather than assumed at this exact step. - build.mjs: app.js dropped from the esbuild entryPoints (stats.js keeps its own bundle, unaffected — separate page, separate script). - frontend/packages/agent/src/app.js deleted (1717 lines). screen.html has its own inline <script>, untouched — never depended on app.js. - docs/web-ui/agent.md: rewrote the Header section to describe the real Preact component tree and the badges+pills-together layout (deferred from the earlier commits on this PR specifically so it wouldn't describe a hybrid state — this is that promised follow-up). Touched up the one other app.js-specific mention in the endpoints section. Left the Main/composer/side-panel/live-view/slash-command sections alone — behavior there is unchanged, verified faithfully ported throughout this PR's earlier commits. Verified against the REAL dist/index.html (not the dev-preview harness) — a scratch mock server serving the actual built output end-to-end, screenshotted clean. tsc --noEmit clean, build clean, both pre-push lints clean.
This commit is contained in:
iris
parent
7897b6af7f
commit
fa2b360e74
5 changed files with 124 additions and 1936 deletions
|
|
@ -1,14 +1,18 @@
|
|||
// esbuild build for @hive/agent. Output layout (`dist/`):
|
||||
//
|
||||
// dist/index.html served at GET /
|
||||
// dist/index.html served at GET / (the Preact rewrite,
|
||||
// hyperhive#3685 — app.js is deleted)
|
||||
// dist/stats.html served at GET /stats
|
||||
// dist/screen.html served at GET /screen
|
||||
// dist/static/app.js served at /static/app.js (ESM bundle,
|
||||
// pulls in @hive/shared + marked)
|
||||
// dist/static/app.js.map source map sibling
|
||||
// dist/static/stats.js served at /static/stats.js (pulls in
|
||||
// chart.js/auto)
|
||||
// dist/static/stats.js.map source map sibling
|
||||
// dist/static/main.js served at /static/main.js (the Preact
|
||||
// bundle — see main.tsx)
|
||||
// dist/static/main.js.map source map sibling
|
||||
// dist/static/main.css served at /static/main.css (bundled
|
||||
// component CSS — see main.tsx's build
|
||||
// step below)
|
||||
// dist/static/agent.css served at /static/agent.css (@import
|
||||
// resolved from @hive/shared)
|
||||
//
|
||||
|
|
@ -30,10 +34,9 @@ const staticDir = (p) => resolve(here, 'dist', 'static', p);
|
|||
rmSync(dist(''), { recursive: true, force: true });
|
||||
mkdirSync(staticDir(''), { recursive: true });
|
||||
|
||||
// Two JS entries: the main app + the stats page. Both bundle their
|
||||
// own deps so each page can be loaded independently.
|
||||
// The stats page's own bundle — chart.js/auto, its own deps.
|
||||
await build({
|
||||
entryPoints: [src('app.js'), src('stats.js')],
|
||||
entryPoints: [src('stats.js')],
|
||||
outdir: staticDir(''),
|
||||
bundle: true,
|
||||
format: 'esm',
|
||||
|
|
@ -47,11 +50,13 @@ await build({
|
|||
loader: { '.css': 'text' },
|
||||
});
|
||||
|
||||
// The Preact rewrite (in progress — see main.tsx's file comment). A
|
||||
// third, separate bundle rather than folding into the `app.js` build
|
||||
// above: different loader needs (`.css: 'css'`, real stylesheets a
|
||||
// component imports, vs. `app.js`'s raw-text shadow-DOM CSS) and JSX
|
||||
// transpilation, same split swarm-ui's own build already makes.
|
||||
// The main agent page (hyperhive#3685's Preact rewrite — app.js,
|
||||
// which used to share this build step, is deleted). A separate bundle
|
||||
// from stats.js above rather than folded in: different loader needs
|
||||
// (`.css: 'css'`, real stylesheets a component imports, vs. the raw-
|
||||
// text shadow-DOM CSS `stats.js` still needs for `@hive/shared/
|
||||
// modal.js`) and JSX transpilation, same split swarm-ui's own build
|
||||
// already makes.
|
||||
await build({
|
||||
entryPoints: [src('main.tsx')],
|
||||
outfile: staticDir('main.js'),
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -8,98 +8,21 @@
|
|||
<link rel="stylesheet" href="static/colors.css">
|
||||
<link rel="stylesheet" href="static/theme.css">
|
||||
<link rel="stylesheet" href="static/agent.css">
|
||||
<!-- main.css (bundled component CSS: Badge/Dropdown/LoginFlow/MetaNav/
|
||||
StatusChips/OverflowMenu/SidePanel/...) MUST load after agent.css —
|
||||
`.login-card`/`.meta-nav-popover`/etc. share class-selector
|
||||
specificity with agent.css's legacy rules, so load order is what
|
||||
decides which one wins the cascade (see LoginFlow.css/MetaNav.css
|
||||
file comments). -->
|
||||
<link rel="stylesheet" href="static/main.css">
|
||||
</head>
|
||||
<body class="agent-shell">
|
||||
|
||||
<!-- Fixed-overlay header — see docs/web-ui.md::Per-agent page
|
||||
for the three-column layout (icon · main · pills). All asset
|
||||
/ API hrefs are relative — see docs/web-ui.md::Per-agent
|
||||
relative paths for the document-baseURI resolution model. -->
|
||||
<header class="agent-header" id="agent-header">
|
||||
<img class="agent-icon" src="icon" alt="">
|
||||
<!-- The Preact rewrite owns everything below — header, terminal,
|
||||
composer, side panel. See main.tsx/Root.tsx for the component
|
||||
tree; docs/web-ui/agent.md for the design. -->
|
||||
<div id="preact-root"></div>
|
||||
|
||||
<div class="agent-header-main">
|
||||
<div class="agent-header-row agent-header-title-row">
|
||||
<h2 id="title">◆ … ◆</h2>
|
||||
<!-- Meta-nav: backend-supplied links (stats / screen / forge /
|
||||
…) plus a client-injected `↑ dashboard` link prepended in
|
||||
setHeader so the host dashboard stays one click away
|
||||
without a separate button styled differently. -->
|
||||
<nav class="meta agent-nav" id="meta-links"></nav>
|
||||
</div>
|
||||
|
||||
<!-- Hive identity line: "swarm / hive" label. Hidden until JS
|
||||
populates it from /api/state (hive_name + swarm_name). -->
|
||||
<div class="agent-header-row agent-hive-row">
|
||||
<span class="agent-hive-label" hidden></span>
|
||||
</div>
|
||||
|
||||
<div id="state-row" class="agent-state-row agent-header-row">
|
||||
<span id="alive-badge" class="hive-pill status-badge status-loading" title="harness reachability">…</span>
|
||||
<span id="state-badge" class="hive-pill state-badge state-loading">… booting</span>
|
||||
<span id="model-chip" class="hive-pill-sm model-chip" hidden></span>
|
||||
<span id="effort-chip" class="hive-pill-sm effort-chip" hidden></span>
|
||||
<span id="ctx-badge" class="hive-pill-sm ctx-badge" hidden title="tokens used in the current context window"></span>
|
||||
<span id="cost-badge" class="hive-pill-sm ctx-badge" hidden title="cumulative tokens billed across the last turn (sum across every inference; tool-heavy turns rebill the cached prompt per call)"></span>
|
||||
<span id="last-turn" class="last-turn" hidden></span>
|
||||
<button type="button" id="cancel-btn" class="btn-cancel-turn" hidden>■ cancel turn</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right cluster: flyout triggers + overflow menu. Pills stay
|
||||
hidden until their list is non-empty; the overflow `⋯` is
|
||||
always visible. Rebuild + new-session + logout live inside
|
||||
it — see docs/web-ui.md::Per-agent page (Overflow button)
|
||||
for the rare-destructive-extra-click rationale. -->
|
||||
<div class="agent-header-pills">
|
||||
<button type="button" id="inbox-pill" class="hive-pill header-pill header-pill-inbox" hidden
|
||||
title="open inbox flyout">
|
||||
<span class="header-pill-icon" aria-hidden="true">📬</span>
|
||||
<span class="header-pill-label">inbox</span>
|
||||
<span class="header-pill-count" id="inbox-count">0</span>
|
||||
</button>
|
||||
<button type="button" id="todos-pill" class="hive-pill header-pill header-pill-todos" hidden
|
||||
title="open todos flyout">
|
||||
<span class="header-pill-icon" aria-hidden="true">📋</span>
|
||||
<span class="header-pill-label">todos</span>
|
||||
<span class="header-pill-count" id="todos-count">0</span>
|
||||
</button>
|
||||
<button type="button" id="overflow-btn" class="overflow-btn"
|
||||
aria-haspopup="menu" aria-expanded="false"
|
||||
title="more actions">⋯</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Overflow popover. Sits outside the header so the header's
|
||||
`overflow: hidden`-adjacent ancestors don't clip it; positioned
|
||||
in JS relative to the overflow button (top-right anchor). -->
|
||||
<div id="overflow-menu" class="overflow-menu" role="menu" hidden></div>
|
||||
|
||||
<!-- Main content area. The terminal fills it edge-to-edge and
|
||||
scrolls behind the floating header + composer. The `#status`
|
||||
overlay renders only when login is required (transient first-
|
||||
time-setup state); otherwise the terminal owns the screen. -->
|
||||
<main class="agent-main" id="agent-main">
|
||||
<div id="status" class="agent-status-overlay"></div>
|
||||
<div class="terminal-wrap">
|
||||
<div id="live" class="live terminal"><div class="meta">connecting…</div></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Fixed-overlay composer. Same frosted-glass treatment as the
|
||||
header for symmetric framing. Empty until the harness sets up
|
||||
the textarea via `renderTermInput`. -->
|
||||
<footer class="agent-composer" id="agent-composer">
|
||||
<div id="term-input" class="term-input"></div>
|
||||
</footer>
|
||||
|
||||
<!-- Slide-in side panel (inbox / todos flyouts) is a <hive-side-panel>
|
||||
element (@hive/shared/side-panel.js) — the Panel singleton in
|
||||
app.js creates + appends it to <body> lazily on first use, so
|
||||
nothing needs to be pre-declared here. -->
|
||||
|
||||
<!-- Single bundled entry. esbuild folds @hive/shared/terminal.js and
|
||||
the marked npm package into app.js. -->
|
||||
<script type="module" src="static/app.js" defer></script>
|
||||
<script type="module" src="static/main.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
// Entry point for the Preact rewrite of the per-agent terminal page
|
||||
// (replacing app.js's imperative DOM). Not wired into index.html yet —
|
||||
// this lands in small, reviewable slices (component by component) per
|
||||
// mara's "one pr != one commit" note on the issue; `index.html`'s
|
||||
// `<script>` tag swaps from `app.js` to this bundle's output only once
|
||||
// the new page covers everything the old one did (state polling, the
|
||||
// live SSE stream, login flow, inbox/todos flyouts, slash commands).
|
||||
// (replacing app.js's imperative DOM). Landed in small, reviewable
|
||||
// slices (component by component) per mara's "one pr != one commit"
|
||||
// note on the issue; now the sole page — app.js is deleted,
|
||||
// `index.html`'s `<script>` tag points here.
|
||||
//
|
||||
// Mounts to `#preact-root`, a sibling of the legacy markup rather than
|
||||
// a full document takeover, so the two can coexist on a branch while
|
||||
// this is still in progress.
|
||||
// Mounts to `#preact-root`, the only content `index.html`'s `<body>`
|
||||
// declares now — no more coexisting-with-legacy-markup sibling div,
|
||||
// that was only needed while both pages built in parallel.
|
||||
import { render } from 'preact';
|
||||
import { Root } from './Root.js';
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue