From c08f47a035da644880b0891558b97cedab92299b Mon Sep 17 00:00:00 2001
From: iris <iris@pr1ma.darkest.space>
Date: Sun, 26 Jul 2026 17:23:52 +0200
Subject: [PATCH] fix(core): add card styling for K3PT ST4T3 and 1NFR4 entries
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #2720 (partial — kept state + infra card layout).

core.html doesn't load dashboard.css so the .container-row styles from
the operator SPA weren't available. Add equivalent card rules directly in
core.css: .containers flex column, .container-row with bg-elev background
+ border + border-radius, .tombstone dashed variant, .head flex row with
badge + meta, .actions flex row for the action buttons. Matches the visual
weight of agent cards on the main dashboard.
---
 frontend/packages/dashboard/src/core.css | 48 ++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/frontend/packages/dashboard/src/core.css b/frontend/packages/dashboard/src/core.css
index bc16c365..15fad5e8 100644
--- a/frontend/packages/dashboard/src/core.css
+++ b/frontend/packages/dashboard/src/core.css
@@ -21,3 +21,51 @@ body.core-shell {
 /* createTabStrip toggles the native `hidden` attribute on inactive
    panes; ensure it wins over any inherited display. */
 .core-pane[hidden] { display: none; }
+
+/* ─── K3PT ST4T3 + 1NFR4 container cards ────────────────────────────
+   core.html doesn't load dashboard.css (that's the operator SPA),
+   so the .container-row card styles aren't inherited. Redefine them
+   here so tombstone and infra entries look like proper cards (similar
+   to agent cards on the main dashboard) rather than bare list items. */
+.containers {
+  list-style: none;
+  padding: 0;
+  margin: 0.5em 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+.container-row {
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 0.55em 0.8em 0.5em;
+}
+.container-row.tombstone {
+  border-style: dashed;
+  background: color-mix(in srgb, var(--bg-elev) 35%, transparent);
+  opacity: 0.85;
+}
+.container-row .head {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-bottom: 0.4em;
+}
+.container-row .head .name {
+  font-size: 1.05em;
+  font-weight: bold;
+}
+.container-row.tombstone .head .name { color: var(--muted); }
+.container-row .head .meta {
+  margin-left: auto;
+  font-size: 0.88em;
+  color: var(--muted);
+}
+.container-row .actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4em;
+}
+.container-row .actions form.inline { display: inline-block; margin: 0; }