feat(ui): add structured manifest builder helper
This commit is contained in:
1697
src/ui/public/app.js
Normal file
1697
src/ui/public/app.js
Normal file
File diff suppressed because it is too large
Load Diff
286
src/ui/public/index.html
Normal file
286
src/ui/public/index.html
Normal file
@@ -0,0 +1,286 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>AI Ops Control Plane</title>
|
||||||
|
<link rel="stylesheet" href="./styles.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="app-shell">
|
||||||
|
<header class="masthead">
|
||||||
|
<div>
|
||||||
|
<h1>AI Ops Control Plane</h1>
|
||||||
|
<p>DAG topology, runtime economics, and security telemetry in one surface.</p>
|
||||||
|
</div>
|
||||||
|
<div id="server-status" class="server-status">Connecting...</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="layout">
|
||||||
|
<section class="panel graph-panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>Graph Visualizer</h2>
|
||||||
|
<div class="panel-actions">
|
||||||
|
<label>
|
||||||
|
Session
|
||||||
|
<select id="session-select"></select>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Manifest
|
||||||
|
<select id="graph-manifest-select"></select>
|
||||||
|
</label>
|
||||||
|
<button id="graph-refresh" type="button">Refresh</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="graph-wrap">
|
||||||
|
<svg id="graph-svg" viewBox="0 0 1280 640" aria-label="Execution graph"></svg>
|
||||||
|
</div>
|
||||||
|
<div id="graph-banner" class="graph-banner"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<aside class="panel side-panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>Job Trigger</h2>
|
||||||
|
</div>
|
||||||
|
<form id="run-form" class="stacked-form">
|
||||||
|
<label>
|
||||||
|
Prompt / Task
|
||||||
|
<textarea id="run-prompt" rows="4" placeholder="Describe the run objective..."></textarea>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Manifest
|
||||||
|
<select id="run-manifest-select"></select>
|
||||||
|
</label>
|
||||||
|
<div class="inline-fields">
|
||||||
|
<label>
|
||||||
|
Execution Mode
|
||||||
|
<select id="run-execution-mode">
|
||||||
|
<option value="provider" selected>provider</option>
|
||||||
|
<option value="mock">mock</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Provider
|
||||||
|
<select id="run-provider">
|
||||||
|
<option value="codex" selected>codex</option>
|
||||||
|
<option value="claude">claude</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<label>
|
||||||
|
Topology Hint
|
||||||
|
<input id="run-topology-hint" type="text" placeholder="sequential | parallel | hierarchical | retry-unrolled" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Initial Flags (JSON)
|
||||||
|
<textarea id="run-flags" rows="3" placeholder='{"needs_bootstrap": true}'></textarea>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Simulate Validation Nodes (CSV)
|
||||||
|
<input id="run-validation-nodes" type="text" placeholder="coder-1,qa-1" />
|
||||||
|
</label>
|
||||||
|
<div class="inline-actions">
|
||||||
|
<button type="submit">Start Run</button>
|
||||||
|
<button id="kill-run" type="button" class="danger">Cancel Run</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<div id="run-status" class="subtle"></div>
|
||||||
|
|
||||||
|
<div class="divider"></div>
|
||||||
|
<h3>Node Inspector</h3>
|
||||||
|
<div id="node-inspector" class="inspector empty">Select a graph node.</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<section class="panel feed-panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>Live Event Feed</h2>
|
||||||
|
<div class="panel-actions">
|
||||||
|
<label>
|
||||||
|
Limit
|
||||||
|
<select id="events-limit">
|
||||||
|
<option value="80">80</option>
|
||||||
|
<option value="150" selected>150</option>
|
||||||
|
<option value="300">300</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<button id="events-refresh" type="button">Refresh</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="event-feed" class="event-feed"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel history-panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>Run History</h2>
|
||||||
|
<button id="history-refresh" type="button">Refresh</button>
|
||||||
|
</div>
|
||||||
|
<table class="history-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Session</th>
|
||||||
|
<th>Status</th>
|
||||||
|
<th>Attempts</th>
|
||||||
|
<th>Duration</th>
|
||||||
|
<th>Cost</th>
|
||||||
|
<th>Updated</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="history-body"></tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel config-panel">
|
||||||
|
<div class="panel-head">
|
||||||
|
<h2>Definitions & Policies</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="config-grid">
|
||||||
|
<form id="notifications-form" class="stacked-form compact">
|
||||||
|
<h3>Notifications / Webhook</h3>
|
||||||
|
<label>
|
||||||
|
Discord Webhook URL
|
||||||
|
<input id="cfg-webhook-url" type="text" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Min Severity
|
||||||
|
<select id="cfg-webhook-severity">
|
||||||
|
<option value="info">info</option>
|
||||||
|
<option value="warning">warning</option>
|
||||||
|
<option value="critical">critical</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Always Notify Types (CSV)
|
||||||
|
<input id="cfg-webhook-always" type="text" />
|
||||||
|
</label>
|
||||||
|
<button type="submit">Save Notifications</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<form id="security-form" class="stacked-form compact">
|
||||||
|
<h3>Security Policy</h3>
|
||||||
|
<label>
|
||||||
|
Violation Mode
|
||||||
|
<select id="cfg-security-mode">
|
||||||
|
<option value="hard_abort">hard_abort</option>
|
||||||
|
<option value="validation_fail">validation_fail</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Allowed Binaries (CSV)
|
||||||
|
<input id="cfg-security-binaries" type="text" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Command Timeout (ms)
|
||||||
|
<input id="cfg-security-timeout" type="number" min="1" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Inherited Env (CSV)
|
||||||
|
<input id="cfg-security-inherit" type="text" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Scrubbed Env (CSV)
|
||||||
|
<input id="cfg-security-scrub" type="text" />
|
||||||
|
</label>
|
||||||
|
<button type="submit">Save Security</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<form id="limits-form" class="stacked-form compact">
|
||||||
|
<h3>Environment & Limits</h3>
|
||||||
|
<label>AGENT_MAX_CONCURRENT<input id="cfg-limit-concurrent" type="number" min="1" /></label>
|
||||||
|
<label>AGENT_MAX_SESSION<input id="cfg-limit-session" type="number" min="1" /></label>
|
||||||
|
<label>AGENT_MAX_RECURSIVE_DEPTH<input id="cfg-limit-depth" type="number" min="1" /></label>
|
||||||
|
<label>AGENT_TOPOLOGY_MAX_DEPTH<input id="cfg-topology-depth" type="number" min="1" /></label>
|
||||||
|
<label>AGENT_TOPOLOGY_MAX_RETRIES<input id="cfg-topology-retries" type="number" min="0" /></label>
|
||||||
|
<label>AGENT_RELATIONSHIP_MAX_CHILDREN<input id="cfg-relationship-children" type="number" min="1" /></label>
|
||||||
|
<label>AGENT_PORT_BASE<input id="cfg-port-base" type="number" min="1" /></label>
|
||||||
|
<label>AGENT_PORT_BLOCK_SIZE<input id="cfg-port-block-size" type="number" min="1" /></label>
|
||||||
|
<label>AGENT_PORT_BLOCK_COUNT<input id="cfg-port-block-count" type="number" min="1" /></label>
|
||||||
|
<label>AGENT_PORT_PRIMARY_OFFSET<input id="cfg-port-primary-offset" type="number" min="0" /></label>
|
||||||
|
<button type="submit">Save Limits</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="manifest-form" class="stacked-form">
|
||||||
|
<h3>Manifest Builder</h3>
|
||||||
|
<div class="inline-fields">
|
||||||
|
<label>
|
||||||
|
File Path
|
||||||
|
<input id="manifest-path" type="text" placeholder=".ai_ops/manifests/default.json" />
|
||||||
|
</label>
|
||||||
|
<div class="inline-actions">
|
||||||
|
<button id="manifest-load" type="button">Load</button>
|
||||||
|
<button id="manifest-validate" type="button">Validate</button>
|
||||||
|
<button type="submit">Save</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<textarea id="manifest-editor" rows="16" spellcheck="false"></textarea>
|
||||||
|
<div id="manifest-status" class="subtle"></div>
|
||||||
|
|
||||||
|
<div class="divider"></div>
|
||||||
|
<div class="manifest-helper-head">
|
||||||
|
<h3>Manifest Helper</h3>
|
||||||
|
<div class="inline-actions">
|
||||||
|
<button id="manifest-template-minimal" type="button">Minimal Template</button>
|
||||||
|
<button id="manifest-template-two-stage" type="button">Two-Stage Template</button>
|
||||||
|
<button id="manifest-sync-from-editor" type="button">Sync From JSON</button>
|
||||||
|
<button id="manifest-apply-to-editor" type="button">Apply To JSON</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="manifest-helper-grid">
|
||||||
|
<fieldset class="helper-section">
|
||||||
|
<legend>Topologies</legend>
|
||||||
|
<div class="helper-topologies">
|
||||||
|
<label><input id="helper-topology-sequential" type="checkbox" value="sequential" /> sequential</label>
|
||||||
|
<label><input id="helper-topology-parallel" type="checkbox" value="parallel" /> parallel</label>
|
||||||
|
<label><input id="helper-topology-hierarchical" type="checkbox" value="hierarchical" /> hierarchical</label>
|
||||||
|
<label><input id="helper-topology-retry-unrolled" type="checkbox" value="retry-unrolled" /> retry-unrolled</label>
|
||||||
|
</div>
|
||||||
|
<div class="inline-fields">
|
||||||
|
<label>
|
||||||
|
Max Depth
|
||||||
|
<input id="helper-topology-max-depth" type="number" min="1" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Max Retries
|
||||||
|
<input id="helper-topology-max-retries" type="number" min="0" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset class="helper-section">
|
||||||
|
<legend>Personas</legend>
|
||||||
|
<div id="helper-personas" class="helper-list"></div>
|
||||||
|
<button id="helper-add-persona" type="button">Add Persona</button>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset class="helper-section">
|
||||||
|
<legend>Relationships</legend>
|
||||||
|
<div id="helper-relationships" class="helper-list"></div>
|
||||||
|
<button id="helper-add-relationship" type="button">Add Relationship</button>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset class="helper-section">
|
||||||
|
<legend>Pipeline Nodes</legend>
|
||||||
|
<label>
|
||||||
|
Entry Node ID
|
||||||
|
<input id="helper-entry-node-id" type="text" />
|
||||||
|
</label>
|
||||||
|
<div id="helper-nodes" class="helper-list"></div>
|
||||||
|
<button id="helper-add-node" type="button">Add Node</button>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset class="helper-section">
|
||||||
|
<legend>Pipeline Edges</legend>
|
||||||
|
<div id="helper-edges" class="helper-list"></div>
|
||||||
|
<button id="helper-add-edge" type="button">Add Edge</button>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
<div id="manifest-helper-status" class="subtle"></div>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module" src="./app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
489
src/ui/public/styles.css
Normal file
489
src/ui/public/styles.css
Normal file
@@ -0,0 +1,489 @@
|
|||||||
|
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;600&display=swap");
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: #08101a;
|
||||||
|
--bg-soft: #102031;
|
||||||
|
--panel: #12283d;
|
||||||
|
--panel-2: #19364f;
|
||||||
|
--text: #e8f5ff;
|
||||||
|
--muted: #9bb8cf;
|
||||||
|
--accent: #f6b73c;
|
||||||
|
--accent-cool: #56c3ff;
|
||||||
|
--ok: #44d38f;
|
||||||
|
--warn: #ffc94a;
|
||||||
|
--critical: #ff6e4a;
|
||||||
|
--border: #2b4f6b;
|
||||||
|
--shadow: 0 12px 35px rgba(4, 10, 17, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
color: var(--text);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 0% 0%, #1e3f63 0%, transparent 35%),
|
||||||
|
radial-gradient(circle at 100% 0%, #3a2e59 0%, transparent 32%),
|
||||||
|
linear-gradient(160deg, var(--bg) 0%, #0b1624 55%, #070d16 100%);
|
||||||
|
font-family: "Space Grotesk", "Segoe UI", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-shell {
|
||||||
|
padding: 1.2rem;
|
||||||
|
max-width: 1700px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.masthead {
|
||||||
|
background: linear-gradient(120deg, rgba(86, 195, 255, 0.16), rgba(246, 183, 60, 0.15));
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 1rem 1.2rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.masthead h1 {
|
||||||
|
font-size: 1.55rem;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.masthead p {
|
||||||
|
color: var(--muted);
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
font-size: 0.92rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.server-status {
|
||||||
|
font-family: "IBM Plex Mono", monospace;
|
||||||
|
font-size: 0.84rem;
|
||||||
|
color: var(--accent-cool);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout {
|
||||||
|
margin-top: 1rem;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.85rem;
|
||||||
|
grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
|
||||||
|
grid-template-areas:
|
||||||
|
"graph side"
|
||||||
|
"feed history"
|
||||||
|
"config config";
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
background: linear-gradient(180deg, rgba(18, 40, 61, 0.96), rgba(12, 27, 43, 0.95));
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 0.85rem;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.65rem;
|
||||||
|
margin-bottom: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-head h2 {
|
||||||
|
font-size: 1.02rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-head h3 {
|
||||||
|
font-size: 0.94rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.55rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-panel {
|
||||||
|
grid-area: graph;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-panel {
|
||||||
|
grid-area: side;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feed-panel {
|
||||||
|
grid-area: feed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-panel {
|
||||||
|
grid-area: history;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-panel {
|
||||||
|
grid-area: config;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.3rem;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: var(--muted);
|
||||||
|
letter-spacing: 0.015em;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea,
|
||||||
|
button {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
border-radius: 9px;
|
||||||
|
border: 1px solid #2f5673;
|
||||||
|
background: #0b1b2b;
|
||||||
|
color: var(--text);
|
||||||
|
padding: 0.5rem 0.55rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: vertical;
|
||||||
|
font-family: "IBM Plex Mono", monospace;
|
||||||
|
line-height: 1.35;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 9px;
|
||||||
|
border: 1px solid #3c6585;
|
||||||
|
background: linear-gradient(160deg, #264a68, #173248);
|
||||||
|
color: var(--text);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.48rem 0.74rem;
|
||||||
|
font-size: 0.83rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
border-color: var(--accent-cool);
|
||||||
|
}
|
||||||
|
|
||||||
|
button.danger {
|
||||||
|
border-color: #7d3f37;
|
||||||
|
background: linear-gradient(160deg, #5d231e, #3f1612);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stacked-form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.52rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stacked-form.compact label {
|
||||||
|
font-size: 0.73rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-actions,
|
||||||
|
.inline-fields {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
align-items: flex-end;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-fields label {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 220px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-wrap {
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 11px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: radial-gradient(circle at 20% 15%, #11253a, #08131f 70%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#graph-svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 560px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-banner {
|
||||||
|
margin-top: 0.55rem;
|
||||||
|
padding: 0.52rem 0.6rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #355b77;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inspector {
|
||||||
|
min-height: 270px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 11px;
|
||||||
|
padding: 0.65rem;
|
||||||
|
background: var(--bg-soft);
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inspector.empty {
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inspector pre {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "IBM Plex Mono", monospace;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtle {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.77rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
height: 1px;
|
||||||
|
background: var(--border);
|
||||||
|
margin: 0.8rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-feed {
|
||||||
|
max-height: 360px;
|
||||||
|
overflow: auto;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #0b1826;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 110px 90px 1fr;
|
||||||
|
gap: 0.45rem;
|
||||||
|
padding: 0.42rem 0.5rem;
|
||||||
|
border-bottom: 1px solid rgba(65, 98, 127, 0.3);
|
||||||
|
font-size: 0.74rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-row:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-time {
|
||||||
|
color: var(--muted);
|
||||||
|
font-family: "IBM Plex Mono", monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-type {
|
||||||
|
font-family: "IBM Plex Mono", monospace;
|
||||||
|
color: var(--accent-cool);
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-row.info .event-type {
|
||||||
|
color: var(--accent-cool);
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-row.warning .event-type {
|
||||||
|
color: var(--warn);
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-row.critical {
|
||||||
|
background: rgba(153, 34, 20, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-row.critical .event-type {
|
||||||
|
color: var(--critical);
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 0.77rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-table th,
|
||||||
|
.history-table td {
|
||||||
|
border-bottom: 1px solid rgba(63, 98, 128, 0.35);
|
||||||
|
padding: 0.38rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-table tbody tr {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-table tbody tr:hover {
|
||||||
|
background: rgba(87, 158, 211, 0.14);
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-table .status-chip {
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
padding: 0.14rem 0.45rem;
|
||||||
|
border: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-success {
|
||||||
|
color: var(--ok);
|
||||||
|
border-color: rgba(68, 211, 143, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-failure,
|
||||||
|
.status-cancelled {
|
||||||
|
color: var(--critical);
|
||||||
|
border-color: rgba(255, 110, 74, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-running {
|
||||||
|
color: var(--warn);
|
||||||
|
border-color: rgba(255, 201, 74, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-unknown {
|
||||||
|
color: var(--muted);
|
||||||
|
border-color: rgba(155, 184, 207, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 0.7rem;
|
||||||
|
margin-bottom: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-grid h3,
|
||||||
|
#manifest-form h3,
|
||||||
|
.side-panel h3 {
|
||||||
|
font-size: 0.86rem;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.manifest-helper-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.55rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.manifest-helper-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 0.65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helper-section {
|
||||||
|
border: 1px solid rgba(61, 103, 136, 0.65);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 0.55rem;
|
||||||
|
margin: 0;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helper-section legend {
|
||||||
|
padding: 0 0.3rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.74rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helper-topologies {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.65rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helper-topologies label {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helper-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.45rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helper-row {
|
||||||
|
border: 1px solid rgba(66, 111, 145, 0.45);
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(7, 17, 28, 0.45);
|
||||||
|
padding: 0.45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helper-row-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 0.45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helper-span-2 {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helper-remove-row {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
border-color: rgba(255, 110, 74, 0.45);
|
||||||
|
background: linear-gradient(160deg, #4f2a26, #38201d);
|
||||||
|
}
|
||||||
|
|
||||||
|
#manifest-editor {
|
||||||
|
min-height: 260px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0.15rem 0.42rem;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
border: 1px solid rgba(120, 156, 183, 0.5);
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.layout {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-areas:
|
||||||
|
"graph"
|
||||||
|
"side"
|
||||||
|
"feed"
|
||||||
|
"history"
|
||||||
|
"config";
|
||||||
|
}
|
||||||
|
|
||||||
|
.config-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.manifest-helper-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helper-row-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helper-span-2 {
|
||||||
|
grid-column: span 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graph-svg {
|
||||||
|
height: 460px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user