messagefoundry-webconsole 0.2.15__py3-none-any.whl

messagefoundry_webconsole/static/app.css

@@ -0,0 +1,345 @@
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
+/* First-party styles for the /ui ops dashboard (ADR 0065). Same-origin; CSP style-src 'self'. */
+
+:root {
+  --bg: #0f1115;
+  --panel: #171a21;
+  --ink: #e6e9ef;
+  --muted: #9aa4b2;
+  --line: #262b34;
+  --accent: #5b9dff;
+  --foundry: #f59e0b;   /* molten amber — the "Foundry" wordmark accent (brand guidelines) */
+  --ok: #3fb950;
+  --warn: #d29922;
+  --bad: #f85149;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  font: 14px/1.5 -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+  color: var(--ink);
+  background: var(--bg);
+}
+
+nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.6rem 1rem;
+  background: var(--panel);
+  border-bottom: 1px solid var(--line);
+}
+
+nav .brand { margin-right: 1rem; text-decoration: none; color: inherit; }
+
+/* MessageFoundry wordmark (brand guidelines, June 2026): one camelCase word — "Message" in the base
+   ink, "Foundry" in molten amber — set in extra-bold system sans with tightened tracking. The amber
+   is confined to the wordmark and headings here, never body text. */
+.wordmark { font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
+.wordmark .wm-foundry { color: var(--foundry); }
+.wordmark .wm-tm {
+  font-size: 0.65em; font-weight: 500; color: var(--muted); margin-left: 0.06em;
+}
+nav .navlinks { display: flex; align-items: center; flex-wrap: wrap; gap: 0.15rem; }
+
+/* Grouped nav as dropdowns: each area is a menu opening on :hover AND :focus-within (keyboard-reachable,
+   no JS — inside the CSP 'self' policy). The toggle is a <button>; the items are links inside the panel. */
+.navgroup { position: relative; }
+.navtop {
+  background: none; border: 0; font: inherit; cursor: pointer; color: var(--muted);
+  padding: 0.35rem 0.55rem; border-radius: 6px; white-space: nowrap;
+}
+.navtop:hover, .navgroup:focus-within .navtop, .navtop.active { color: var(--accent); }
+.navmenu {
+  display: none; position: absolute; top: 100%; left: 0; margin-top: 0.3rem; z-index: 30;
+  min-width: 12rem; flex-direction: column; padding: 0.3rem;
+  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+/* Invisible bridge across the margin gap so a hover moving button→menu doesn't fall through and close it. */
+.navmenu::before { content: ""; position: absolute; left: 0; right: 0; top: -0.3rem; height: 0.3rem; }
+.navgroup:hover .navmenu, .navgroup:focus-within .navmenu { display: flex; }
+.navlinks .navgroup:last-child .navmenu { left: auto; right: 0; } /* keep the rightmost menu on-screen */
+.navmenu a {
+  color: var(--muted); text-decoration: none; white-space: nowrap;
+  padding: 0.35rem 0.6rem; border-radius: 5px;
+}
+.navmenu a:hover, .navmenu a.active { color: var(--accent); background: var(--bg); }
+/* Right cluster: the live status glyphs + Sign out, held together so nav's space-between keeps the links
+   left and this block flush right. */
+.navright { display: flex; align-items: center; gap: 0.9rem; }
+
+/* Live nav status glyphs (app.js polls /ui/nav-status, every page): the alerts bell + engine-health heart.
+   Neutral gray until the first poll; then health = green / orange / blinking-red and alerts = severity-
+   colored or gray. `color` drives the monochrome SVG tint (fill=currentColor). */
+.navstatus { display: inline-flex; align-items: center; gap: 0.55rem; }
+/* Each glyph is a link to its detail page (bell → /ui/alerts, heart → /ui/status): no underline, tinted by
+   `color`, with a hover/focus affordance so it reads as clickable. */
+.navstat {
+  display: inline-flex; align-items: center; color: var(--muted); line-height: 0;
+  text-decoration: none; cursor: pointer; border-radius: 4px;
+}
+.navstat:hover { opacity: 0.75; }
+.navstat:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+.navstat .statglyph { display: block; }
+.health-ok { color: var(--ok); }
+.health-warn { color: var(--warn); }
+.health-down { color: var(--bad); animation: mf-health-blink 1.1s ease-in-out infinite; }
+.alerts-none { color: var(--muted); }
+.alerts-info { color: var(--accent); }
+.alerts-warning { color: var(--warn); }
+.alerts-critical { color: var(--bad); }
+@keyframes mf-health-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.2; }
+}
+/* Honor reduced-motion: a critical engine stays solid red instead of blinking. */
+@media (prefers-reduced-motion: reduce) {
+  .health-down { animation: none; }
+}
+
+nav .logout button, .filters button, .login button {
+  background: var(--accent); color: #04122b; border: 0; border-radius: 6px;
+  padding: 0.35rem 0.8rem; cursor: pointer; font-weight: 600;
+}
+nav .logout button { background: transparent; color: var(--muted); border: 1px solid var(--line); }
+button[disabled] { opacity: 0.5; cursor: not-allowed; }
+
+main { padding: 1rem; }
+/* Content-area links (page bodies, cards — e.g. "View messages →", "← Connections"): the UA default
+   blue/purple-visited is unreadable on the dark background, so tint them with the accent. Author origin
+   beats the UA :visited rule, so both states read the same. Nav/table links are styled elsewhere. */
+main a, main a:visited { color: var(--accent); }
+h1 { font-size: 1.25rem; }
+h2 { font-size: 1rem; color: var(--muted); margin-top: 1.5rem; }
+
+table.grid { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
+table.grid th, table.grid td {
+  text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line);
+  white-space: nowrap; font-variant-numeric: tabular-nums;
+}
+table.grid th { color: var(--muted); font-weight: 600; }
+table.grid a { color: var(--accent); text-decoration: none; }
+/* Key/value readout tables (rows_table adjustable=False): plain + wrapping, NOT the adjustable grid.
+   Long values (paths, ids) wrap instead of tripping a horizontal scrollbar — app.js leaves these alone
+   (no data-mf-table), so they stay a simple width:100% table with no fixed layout / scroll wrapper. */
+table.grid.info th, table.grid.info td { white-space: normal; overflow-wrap: anywhere; }
+
+/* Adjustable grid tables (app.js, data-mf-table): keyboard-operable click-to-sort + drag-to-resize
+   columns, remembered per table. Best-practice layout (TanStack / AG Grid / W3C-APG): widths live on
+   injected <col> elements and the table gets an explicit px width = their SUM inside an overflow-x:auto
+   wrapper (NOT width:100%, which redistributes leftover space and snaps a resized column back wider than
+   set); sort is a native <button> cycling asc/desc/none with aria-sort on exactly one header. */
+.mf-table-scroll { overflow-x: auto; }
+table.grid.mf-adjustable { table-layout: fixed; width: auto; } /* app.js sets the explicit px width */
+table.grid.mf-adjustable th { position: relative; }
+table.grid.mf-adjustable td { overflow: hidden; text-overflow: ellipsis; }
+button.mf-sort {
+  display: block; width: 100%; margin: 0; padding: 0; cursor: pointer;
+  background: none; border: 0; color: inherit; font: inherit; text-align: left;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+button.mf-sort:hover { color: var(--ink); }
+button.mf-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.mf-sort-arrow { color: var(--accent); font-size: 0.8em; }
+th .mf-resize {
+  position: absolute; top: 0; right: 0; width: 9px; height: 100%; cursor: col-resize; z-index: 1;
+}
+th .mf-resize:hover { box-shadow: inset -2px 0 0 var(--accent); }
+/* Drag-to-reorder: drop-target indicator (a left edge marking where the dragged column will land). */
+table.grid.mf-adjustable th.mf-drop { box-shadow: inset 3px 0 0 var(--accent); }
+body.mf-col-resizing, body.mf-col-resizing * { cursor: col-resize !important; user-select: none !important; }
+
+/* Connections filter-as-you-type box (app.js, data-mf-conns-filter). */
+.filterbox {
+  margin: 0; padding: 0.4rem 0.6rem; width: 18rem; max-width: 100%; box-sizing: border-box;
+  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px;
+}
+.filterbox::placeholder { color: var(--muted); }
+.filterbox:focus { outline: none; border-color: var(--accent); }
+/* Connection detail link (right of the name) + the message-log From/To date fields. */
+/* The ⓘ connection-details link sits after the name→messages link in the same cell; give it a clear gap so
+   it isn't a mis-click hazard next to the primary name link. */
+.detail-link { font-size: 1em; color: var(--muted); margin-left: 0.9rem; padding: 0 0.15rem; text-decoration: none; vertical-align: middle; }
+.detail-link:hover { color: var(--accent); }
+.filters .dtfield { display: inline-flex; gap: 0.25rem; align-items: center; color: var(--muted); }
+
+.status { padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.8rem; }
+.status-running { color: var(--ok); }
+.status-stopped, .status-draining { color: var(--muted); }
+.status-failed, .status-error { color: var(--bad); }
+.status-filtered, .status-stopping { color: var(--warn); }
+/* #233 (ADR 0111): present in the config but deployed=false — an intentional, benign state, so it reads
+   in the informational accent (never the muted grey of "stopped", which means it SHOULD be running). */
+.status-not_deployed { color: var(--accent); }
+
+pre.raw {
+  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
+  padding: 0.8rem; overflow: auto; max-height: 60vh; white-space: pre-wrap; word-break: break-word;
+}
+
+.filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0; }
+.filters input { background: var(--bg); color: var(--ink); border: 1px solid var(--line);
+  border-radius: 6px; padding: 0.3rem 0.5rem; }
+.pager { color: var(--muted); }
+
+.card { max-width: 360px; margin: 4rem auto; background: var(--panel);
+  border: 1px solid var(--line); border-radius: 10px; padding: 1.5rem; }
+.card .login { display: flex; flex-direction: column; gap: 0.75rem; }
+.card label { display: flex; flex-direction: column; gap: 0.25rem; color: var(--muted); }
+.card input { background: var(--bg); color: var(--ink); border: 1px solid var(--line);
+  border-radius: 6px; padding: 0.4rem 0.5rem; }
+/* The connection-detail view reuses the card frame but needs room for its tables — the 360px login-card
+   width is too cramped — so widen it and drop the tall login top-margin. */
+.card.detail-card { max-width: 760px; margin: 1.5rem auto; }
+.banner { color: var(--warn); }
+
+.ctls { display: flex; gap: 0.3rem; }
+.ctl { display: inline; margin: 0; }
+.ctl button {
+  background: transparent; color: var(--muted); border: 1px solid var(--line);
+  border-radius: 5px; padding: 0.15rem 0.5rem; font-size: 0.8rem; cursor: pointer;
+}
+.ctl button:hover { color: var(--accent); border-color: var(--accent); }
+
+/* Connections filter + bulk-action toolbar, sitting on the page-header row (ADR 0065). */
+.page-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0.5rem 0; }
+.page-head h1 { margin: 0; }
+.page-head .ctlbar { margin-left: auto; } /* push the filter + dropdown/Go to the right, header stays left */
+.ctlbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0; }
+.ctlbar .filterbox { margin: 0; }
+.ctlbar select {
+  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
+  border-radius: 6px; padding: 0.3rem 0.5rem;
+}
+.ctlbar button {
+  background: var(--accent); color: #04122b; border: 0; border-radius: 6px;
+  padding: 0.35rem 0.8rem; cursor: pointer; font-weight: 600;
+}
+.ctlbar span { color: var(--muted); }
+
+/* Selection checkbox column — keep it tight (one checkbox per cell). */
+table.grid th:has(> [data-mf-conns-all]), table.grid td:has(> .rowcb) {
+  width: 1%; text-align: center;
+}
+.rowcb { margin: 0; cursor: pointer; }
+
+/* Object-of-interest flag (#131): a per-row toggle button (TOML-managed) or a read-only glyph
+   (code-first). Amber when flagged (the brand accent), muted outline otherwise. */
+.flagbtn {
+  background: transparent; border: 0; cursor: pointer; padding: 0 0.2rem; line-height: 1;
+  color: var(--muted); font-size: 1rem; border-radius: 4px;
+}
+.flagbtn:hover { color: var(--foundry); }
+.flagbtn.flagged { color: var(--foundry); }
+.flagbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.flagform { margin: 0; }
+.flag { color: var(--muted); }
+.flag.flagged { color: var(--foundry); }
+/* Flagged-only view toggle in the toolbar. */
+.flagfilter { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--muted);
+  white-space: nowrap; cursor: pointer; }
+.flagfilter input { cursor: pointer; }
+
+/* "Waiting for Reply" per-message outbound state (#136): a small accent badge beside the status pill,
+   shown while an outbound awaits an MLLP ACK past its display delay (transient — clears on the next
+   poll/ws swap). */
+.waiting { color: var(--accent); font-size: 0.75rem; margin-left: 0.4rem; white-space: nowrap; }
+
+.muted { color: var(--muted); }
+.detail-head { display: flex; align-items: center; gap: 1rem; }
+.livestats { color: var(--muted); font-variant-numeric: tabular-nums; min-height: 1.2rem;
+  margin: 0.25rem 0 0.5rem; }
+
+ul.tree { list-style: none; margin: 0; padding-left: 1rem; border-left: 1px solid var(--line); }
+ul.tree .tlabel { color: var(--muted); }
+ul.tree .tval { color: var(--ink); white-space: pre-wrap; word-break: break-word; }
+
+/* Edit-and-resubmit editor (ADR 0090 §9, BACKLOG #153). The editable COPY, the "Modified" badge that
+   app.js reveals on the first change, and the mode/outbound controls. */
+.btn-link { color: var(--accent); text-decoration: none; font-size: 0.85rem; }
+.btn-link:hover { text-decoration: underline; }
+.edit-form { max-width: 900px; }
+.edit-raw {
+  width: 100%; box-sizing: border-box; background: var(--bg); color: var(--ink);
+  border: 1px solid var(--line); border-radius: 6px; padding: 0.5rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem;
+  white-space: pre; overflow-wrap: normal; overflow-x: auto; tab-size: 2;
+}
+.edit-mode-row { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.5rem 0; }
+.edit-mode-row label { color: var(--ink); }
+.edit-to-row { flex-direction: row; align-items: center; gap: 0.5rem; }
+.edit-to-row input { background: var(--bg); color: var(--ink); border: 1px solid var(--line);
+  border-radius: 6px; padding: 0.35rem 0.5rem; }
+.edit-ctls { align-items: center; margin-top: 0.6rem; }
+.edit-ctls button.primary {
+  background: var(--accent); color: #04122b; border: 0; border-radius: 6px;
+  padding: 0.35rem 0.9rem; cursor: pointer; font-weight: 600;
+}
+.edit-ctls button[disabled] { opacity: 0.5; cursor: default; }
+.badge-modified {
+  color: var(--warn); border: 1px solid var(--warn); border-radius: 999px;
+  padding: 0.05rem 0.55rem; font-size: 0.75rem; font-weight: 600;
+}
+
+/* Flow & trends (BACKLOG #76): status-colored inline-SVG data-flow graph + queue-trend chart. All
+   colours come from the shared theme tokens; the node fill is driven by the live status CLASS (never an
+   operator-assigned colour). Wide graphs/charts scroll inside their own wrapper (the page body never
+   scrolls horizontally). */
+.flowgraph-wrap, .trendchart-wrap { overflow-x: auto; max-width: 100%; margin-top: 0.5rem; }
+.flowgraph, .trendchart { display: block; }
+.gcolhead { fill: var(--muted); font-size: 12px; font-weight: 600; }
+.gnodelabel { fill: var(--ink); font-size: 12px; }
+/* Node box: a translucent status tint + a solid status-coloured stroke (so a colour-blind operator still
+   reads the box outline + the label). "logic" = router/handler nodes (no live status). */
+.gnode { fill: var(--panel); stroke: var(--line); stroke-width: 1.5px; }
+.gnode-logic { stroke: var(--muted); }
+.gnode-running { stroke: var(--ok); }
+.gnode-stopped, .gnode-draining { stroke: var(--muted); }
+.gnode-failed, .gnode-error { stroke: var(--bad); }
+.gnode-filtered, .gnode-stopping { stroke: var(--warn); }
+.gnode-not_deployed { stroke: var(--accent); }
+.gedge { stroke: var(--line); stroke-width: 1.5px; }
+.gedge-declared, .gedge-literal { stroke: var(--muted); }
+.gedge-heuristic { stroke: var(--muted); stroke-dasharray: 4 3; opacity: 0.7; }
+/* Trend chart: axes + up-to-6 overlaid series (colour classes reused by the legend swatches). */
+.trendchart .axis { stroke: var(--line); stroke-width: 1px; }
+.trendchart .axislabel { fill: var(--muted); font-size: 11px; }
+.trendchart .series { stroke-width: 1.5px; }
+.series-0 { stroke: var(--accent); }
+.series-1 { stroke: var(--ok); }
+.series-2 { stroke: var(--warn); }
+.series-3 { stroke: var(--bad); }
+.series-4 { stroke: var(--foundry); }
+.series-5 { stroke: var(--muted); }
+.chart-legend { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 0.4rem 0; color: var(--muted);
+  font-size: 0.8rem; }
+.legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
+.legend-item .swatch { display: inline-block; width: 0.8rem; height: 0.2rem; border-radius: 2px; }
+.swatch.series-0 { background: var(--accent); }
+.swatch.series-1 { background: var(--ok); }
+.swatch.series-2 { background: var(--warn); }
+.swatch.series-3 { background: var(--bad); }
+.swatch.series-4 { background: var(--foundry); }
+.swatch.series-5 { background: var(--muted); }
+
+/* ASVS 3.7.5 — the fail-VISIBLE hardening detects. `.mf-insecure-banner` styles both the two
+   script-raised banners (insecure context, CSP not enforced) and the server-rendered
+   scripts-blocked banner below, so all three read the same. */
+.mf-insecure-banner {
+  margin: 0;
+  padding: 0.6rem 1rem;
+  background: var(--bad);
+  color: #fff;
+  font-weight: 600;
+}
+
+/* The scripts-blocked banner is rendered by the SERVER and is visible by default; the nonce'd mark
+   script in the page shell stamps `mf-scripts-ok` on <html>, which hides it before first paint. A
+   browser that enforces CSP without understanding nonce sources — or one with JavaScript disabled —
+   never runs that script, so the banner STANDS and the degradation is visible instead of silent.
+   Hiding it from CSS (not from JS) is deliberate: `style-src 'self'` keeps working on exactly the
+   clients whose `script-src` blocks everything. */
+.mf-scripts-ok #mf-scripts-blocked-banner { display: none; }