Compare commits

...
Author SHA1 Message Date
iris
6a54866ec7 agent ui: drop dead .stats-nav + #toolbar css now superseded by page-header 2026-06-22 13:34:58 +02:00
iris
98d015edea agent ui: shared page-header nav on the stats + screen sub-pages
Per mara: the agent sub-pages should use the same back-link nav as the
dashboard's standalone pages, while the live terminal page stays as-is (no
tabs of each other, not an SPA).

Pull the shared `@hive/shared/chrome.css` into the agent bundle (via agent.css's
existing @import line; esbuild inlines it into the one dist/static/agent.css all
agent pages link), then:

- stats.html: replace the ASCII banner + bespoke `.stats-nav` with the shared
  `page-header` (← live back-link + dashboard link + title). Keeps the #back-link
  / #dashboard-link / #title ids stats.js drives, and the time-window picker +
  charts below are unchanged.
- screen.html: replace the bespoke `#toolbar` nav with the same `page-header`
  (← agent back-link + title), keeping the fit / match / debug controls + the
  status text in the bar.

The live terminal (index.html) is untouched. The now-unused `.banner` /
`.stats-nav` / `#toolbar` rules in agent.css are left for a follow-up prune to
keep this diff focused on the markup. Agent build clean.

Closes #1874.
2026-06-22 13:34:58 +02:00
3 changed files with 19 additions and 36 deletions

View file

@ -2,6 +2,10 @@
Bundled in front of the agent-only rules below via esbuild. */
@import "@hive/shared/base.css";
@import "@hive/shared/terminal.css";
/* Shared page-header chrome (page-header / page-back / page-title) gives the
agent SUB-pages (stats, screen) the same back-link nav the dashboard's
standalone pages use. The live terminal page keeps its own header. */
@import "@hive/shared/chrome.css";
/* full-screen layout overrides
The agent page mounts a full-viewport terminal under a fixed
@ -993,16 +997,8 @@ pre.diff {
}
/* ─── /stats page ────────────────────────────────────────────────────────── */
.stats-nav {
display: flex;
gap: 0.75rem;
align-items: baseline;
margin-bottom: 0.5rem;
}
.stats-nav h2 { margin: 0; }
.stats-nav a { color: var(--cyan); text-decoration: none; }
.stats-nav a:hover { text-decoration: underline; }
/* The stats page header (back link + title) uses the shared
`.page-header` chrome (chrome.css), same as /screen. */
.window-tabs {
display: flex;
@ -1088,21 +1084,9 @@ body.screen-shell {
overflow: hidden;
}
/* Toolbar strip at the top of the screen page. */
#toolbar {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.4rem 0.75rem;
background: var(--bg-elev);
border-bottom: 1px solid var(--border);
}
#toolbar a {
color: var(--blue);
text-decoration: none;
font-size: 0.85rem;
}
#toolbar a:hover { text-decoration: underline; }
/* The screen page header (back link + title + controls) uses the
shared `.page-header` chrome (chrome.css). The fit/match/debug
controls + status chip below sit inside that header. */
/* Toolbar toggle buttons (fit / match-size / debug). */
.tbtn {
@ -1118,7 +1102,7 @@ body.screen-shell {
.tbtn.active { color: var(--green); border-color: var(--green); }
.tbtn:disabled { opacity: 0.4; cursor: default; }
/* Connection status chip at the right end of the toolbar. */
/* Connection status chip at the right end of the screen page header. */
#status {
margin-left: auto;
font-size: 0.75rem;

View file

@ -10,14 +10,14 @@
<link rel="stylesheet" href="static/agent.css">
</head>
<body class="screen-shell">
<div id="toolbar">
<strong>🖥 screen</strong>
<a href="./" title="back to agent page">← agent</a>
<header class="page-header">
<a class="page-back" href="./" title="back to agent page">← agent</a>
<span class="page-title">🖥 screen</span>
<button id="fit-toggle" class="tbtn" title="Toggle fit-to-window scaling">⤢ fit</button>
<button id="match-toggle" class="tbtn" title="Resize the remote desktop to fit this window" disabled>⤡ match size</button>
<button id="debug-toggle" class="tbtn" title="Toggle RFB debug log">debug</button>
<span id="status">connecting…</span>
</div>
</header>
<div id="canvas-wrap"><canvas id="c"></canvas></div>
<div id="msg"></div>
<div id="debug-log"></div>

View file

@ -10,12 +10,11 @@
<link rel="stylesheet" href="static/agent.css">
</head>
<body>
<pre class="banner">░▒▓█▓▒░ … ░▒▓█▓▒░ hyperhive ag3nt · stats ░▒▓█▓▒░</pre>
<div class="stats-nav">
<a id="back-link" href="./">← live</a>
<a id="dashboard-link" href="#">dashboard</a>
<h2 id="title">◆ … ◆</h2>
</div>
<header class="page-header">
<a class="page-back" id="back-link" href="./">← live</a>
<a class="page-back" id="dashboard-link" href="#">dashboard ↗</a>
<span class="page-title" id="title">◆ … ◆</span>
</header>
<div class="window-tabs" id="window-tabs" role="tablist">
<button type="button" data-tab="1h">last 1h</button>