dc11b0c414
Removes the model pill and the ctx chip from the hive dashboard's container rows, with their styles and the page's fingerprint field. The agent's own status already carries context and cost in the swarm UI.
263 lines
7.6 KiB
CSS
263 lines
7.6 KiB
CSS
/* Shared Catppuccin palette + body typography + terminal pane styles.
|
|
Bundled in front of the page-specific rules via esbuild. */
|
|
@import "@hive/shared/base.css";
|
|
@import "@hive/shared/terminal.css";
|
|
@import "@hive/shared/tabs.css";
|
|
/* Shared pill/chip/badge shape (the "extract pill component" issue,
|
|
resolved as shared CSS rather than a JS component) — see pill.css
|
|
itself for the classnames it covers. */
|
|
@import "@hive/shared/pill.css";
|
|
|
|
/* ─── global typography ─────────────────────────────────────────────
|
|
Element-level rules shared across every page. These must not
|
|
reference page-specific chrome classes. */
|
|
|
|
h1,
|
|
h2 {
|
|
color: var(--purple);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
margin-top: 2em;
|
|
text-shadow: 0 0 8px color-mix(in srgb, var(--purple) 40%, transparent);
|
|
}
|
|
.divider {
|
|
color: var(--purple-dim);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
li {
|
|
padding: 0.5em 0;
|
|
}
|
|
.glyph {
|
|
color: var(--purple);
|
|
margin-right: 0.5em;
|
|
}
|
|
a {
|
|
color: var(--cyan);
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
text-shadow: 0 0 4px color-mix(in srgb, var(--cyan) 50%, transparent);
|
|
}
|
|
a:hover {
|
|
color: var(--fg);
|
|
text-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 90%, transparent);
|
|
}
|
|
code {
|
|
color: var(--amber);
|
|
background: var(--bg-elev);
|
|
padding: 0.1em 0.4em;
|
|
border: 1px solid var(--border);
|
|
border-radius: 2px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* ─── shared inline labels ──────────────────────────────────────────
|
|
.meta / .id / .agent / .empty appear in message rows, build-log
|
|
toolbars, and side-panel content rendered by common.js. */
|
|
.meta {
|
|
color: var(--muted);
|
|
font-size: 0.85em;
|
|
margin-left: 0.4em;
|
|
}
|
|
.id {
|
|
color: var(--pink);
|
|
font-weight: bold;
|
|
margin-right: 0.4em;
|
|
}
|
|
.agent {
|
|
color: var(--amber);
|
|
font-weight: bold;
|
|
margin-right: 0.6em;
|
|
}
|
|
.empty {
|
|
color: var(--muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ─── status badges ─────────────────────────────────────────────────
|
|
Semantic colour variants only — shape comes from `hive-pill-sm`
|
|
(shared with the agent UI's pill/chip family, @hive/shared/pill.css),
|
|
carried directly in the markup alongside each of these classnames
|
|
(agents.js/kept.js/builds.js). Used on container rows and build-log
|
|
rows. */
|
|
.badge-warn {
|
|
color: var(--amber);
|
|
border-color: var(--amber);
|
|
text-shadow: 0 0 6px color-mix(in srgb, var(--amber) 50%, transparent);
|
|
}
|
|
.badge-rate-limited {
|
|
color: var(--red);
|
|
border-color: var(--red);
|
|
text-shadow: 0 0 6px color-mix(in srgb, var(--red) 50%, transparent);
|
|
}
|
|
.badge-muted {
|
|
color: var(--muted);
|
|
border-color: var(--purple-dim);
|
|
background: color-mix(in srgb, var(--muted) 8%, transparent);
|
|
}
|
|
.badge-loose-ends {
|
|
color: var(--purple);
|
|
border-color: var(--purple);
|
|
text-shadow: 0 0 6px color-mix(in srgb, var(--purple) 40%, transparent);
|
|
}
|
|
/* Paused agent: turn loop parked, container still up. Clickable (btn-inline):
|
|
clicking sends POST /api/resume/{name} so the badge doubles as a resume button. */
|
|
.badge-paused {
|
|
color: var(--yellow);
|
|
border-color: var(--yellow);
|
|
background: color-mix(in srgb, var(--yellow) 10%, transparent);
|
|
}
|
|
.badge-ok {
|
|
background: color-mix(in srgb, var(--green) 12%, transparent);
|
|
color: var(--green);
|
|
border-color: var(--green);
|
|
}
|
|
.badge-fail {
|
|
background: color-mix(in srgb, var(--red) 12%, transparent);
|
|
color: var(--red);
|
|
border-color: var(--red);
|
|
}
|
|
.badge-running {
|
|
background: color-mix(in srgb, var(--amber) 12%, transparent);
|
|
color: var(--amber);
|
|
border-color: var(--amber);
|
|
}
|
|
|
|
/* ─── buttons ───────────────────────────────────────────────────────
|
|
.btn base + semantic colour/size modifiers. */
|
|
.btn {
|
|
font-family: inherit;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
background: transparent;
|
|
/* Strip browser UA button chrome (solid fill, system text colour).
|
|
Without this, native <button> + <input type="submit"> elements
|
|
ignore our background:transparent and colour in some browsers. */
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
border: 1px solid;
|
|
padding: 0.25em 0.8em;
|
|
cursor: pointer;
|
|
text-shadow: 0 0 4px currentColor;
|
|
box-shadow: 0 0 0 0 currentColor;
|
|
transition: box-shadow 0.15s ease;
|
|
}
|
|
.btn:hover {
|
|
background: color-mix(in srgb, var(--fg) 6%, transparent);
|
|
text-shadow: 0 0 10px currentColor;
|
|
box-shadow: 0 0 10px -2px currentColor;
|
|
}
|
|
.btn:disabled,
|
|
.btn[disabled] {
|
|
opacity: 0.32;
|
|
cursor: not-allowed;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
.btn:disabled:hover,
|
|
.btn[disabled]:hover {
|
|
background: transparent;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
.btn-approve {
|
|
color: var(--green);
|
|
border-color: var(--green);
|
|
}
|
|
.btn-destroy {
|
|
color: var(--red);
|
|
border-color: var(--red);
|
|
font-size: 0.75em;
|
|
padding: 0.15em 0.5em;
|
|
margin-left: 0.6em;
|
|
}
|
|
.btn-rebuild {
|
|
color: var(--amber);
|
|
border-color: var(--amber);
|
|
font-size: 0.75em;
|
|
padding: 0.15em 0.5em;
|
|
margin-left: 0.6em;
|
|
}
|
|
.btn-restart {
|
|
color: var(--cyan);
|
|
border-color: var(--cyan);
|
|
font-size: 0.75em;
|
|
padding: 0.15em 0.5em;
|
|
margin-left: 0.6em;
|
|
}
|
|
.btn-stop {
|
|
color: var(--pink);
|
|
border-color: var(--pink);
|
|
font-size: 0.75em;
|
|
padding: 0.15em 0.5em;
|
|
margin-left: 0.6em;
|
|
}
|
|
.btn-start {
|
|
color: var(--green);
|
|
border-color: var(--green);
|
|
font-size: 0.75em;
|
|
padding: 0.15em 0.5em;
|
|
margin-left: 0.6em;
|
|
}
|
|
/* Same yellow as .badge-paused (the paused-state pill) — pause enters
|
|
that state, so the trigger and the resulting badge read as one
|
|
colour, not two unrelated ones. Resume reads as green like
|
|
.btn-start: both are "go" actions, back to the turn loop running. */
|
|
.btn-pause {
|
|
color: var(--yellow);
|
|
border-color: var(--yellow);
|
|
font-size: 0.75em;
|
|
padding: 0.15em 0.5em;
|
|
margin-left: 0.6em;
|
|
}
|
|
.btn-resume {
|
|
color: var(--green);
|
|
border-color: var(--green);
|
|
font-size: 0.75em;
|
|
padding: 0.15em 0.5em;
|
|
margin-left: 0.6em;
|
|
}
|
|
/* M0V3 affordance (selection bar) — mauve reads as "structural
|
|
change" rather than the destructive red / amber chrome of
|
|
destroy / rebuild. See docs/2-handbook/hives/dashboard.md::Selection bar. */
|
|
.btn-move {
|
|
color: var(--purple);
|
|
border-color: var(--purple);
|
|
font-size: 0.75em;
|
|
padding: 0.15em 0.5em;
|
|
margin-left: 0.6em;
|
|
}
|
|
.btn-talk {
|
|
color: var(--cyan);
|
|
border-color: var(--cyan);
|
|
}
|
|
.btn-spawn {
|
|
color: var(--amber);
|
|
border-color: var(--amber);
|
|
}
|
|
|
|
/* ─── page-content gutter ─────────────────────────────────────────────
|
|
Inverted-gutter layout: the dashboard keeps `<body>` full-bleed
|
|
and wraps their padded content in a single `.page-content` div that
|
|
carries the horizontal gutter. Full-width chrome (the tab strip, the
|
|
footer) then spans edge-to-edge for free,
|
|
with no negative-margin breakout hacks. Only matches on pages that opt
|
|
in by adding the wrapper (index.html). */
|
|
.page-content {
|
|
padding: 0 1.5em;
|
|
}
|
|
|
|
/* ─── sticky top region ───────────────────────────────────────────────
|
|
One sticky container per page holding the page chrome (tab bar / page
|
|
header). common.js (initStickyTop) wraps the chrome in this on load. */
|
|
.sticky-top {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
}
|