vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

agent: scaffold Preact rewrite, Header + StatusChips first slice

Browse source 
Adds a new Preact/TSX build alongside the existing app.js (esbuild
entry `main.tsx` → dist/static/main.{js,css}, same jsx/tsconfig shape
swarm-ui already uses) and the first real page slice: Header +
StatusChips, composing the Badge/Dropdown components from the prior
commit's PR. Not wired into index.html yet — app.js keeps rendering
the live page untouched while this fills in component by component
(state polling, the live SSE stream, login flow, inbox/todos, term
input) in follow-up commits on this branch.

StatusChips folds the model/effort pickers and pause into the badge
row itself (each badge IS its own control), replacing the old
overflow-menu-only pickers — the concrete fix the design guide already
names this page as needing. Presentational only for now (props, not
live data) so it's reviewable against sample data before being wired
to /api/state.

Screenshot-verified against the real agent.css/theme.css/colors.css
(headless chromium, sample data) — renders correctly.

Builds + tsc --noEmit clean.
This commit is contained in:
iris 2026-08-28 01:54:22 +02:00
commit 93b34ebb9b
11 changed files with 334 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

32
frontend/packages/agent/src/components/Header.tsx Normal file
View file

@ -0,0 +1,32 @@
// <Header> — the agent page's identity strip: icon, glyphic title, the
// "swarm / hive" label row, and a slot for the status row
// (`<StatusChips>` — ../status-chips/, kept separate so this component
// has no opinion on what badges exist). Structurally the same
// three-row shape as the old `#agent-header` markup in index.html
// (icon · main · pills) — see `docs/web-ui.md::Per-agent page` — this
// is a like-for-like layout port, the redesign work is in the children.
// Reuses `agent.css`'s existing `.agent-header*`/`.agent-icon` rules
// (loaded globally by index.html) rather than a component-scoped
// stylesheet — no new visual language needed for the chrome itself.
import type { ComponentChildren } from 'preact';
export interface HeaderProps {
label: string;
hiveLabel?: string | null;
children?: ComponentChildren;
}
export function Header({ label, hiveLabel, children }: HeaderProps) {
return (
<header class="agent-header">
<img class="agent-icon" src="icon" alt="" />
<div class="agent-header-main">
<div class="agent-header-row agent-header-title-row">
<h2 class="agent-header-title">◆ {label} ◆</h2>
</div>
{hiveLabel ? <div class="agent-header-row agent-hive-row">{hiveLabel}</div> : null}
<div class="agent-header-row">{children}</div>
</div>
</header>
);
}