Andy Dixon
9db188ffe6
A model of volition that keeps wanting, intending and committing as separate states (PLAN §8.2 items 1–6, 14): - Wants (migration 0026) carry origin, strength with a six-hour half-life, urgency, valence, drives, values, goal, commitment and an optional proposed means. Derivation is deterministic and selective: failed predictions, contradictions, operator goals, stalled goals, questions and requests, and due commitments; drives and configured values modulate strength with recorded terms; candidates below 0.35 are not stored; identical subjects reinforce; faded and excess wants expire. - Conflicts are first-class and resolved by explicit scores with no fixed hierarchy: urgency scales strength, goals add priority, commitments add normative weight; an approach opposed by a value-derived avoid want wins outright only when clearly stronger, otherwise with a constraint or is deferred. Neither side is discarded. - Commitments (do/refrain with capability, target, access and risk matchers, optional "unless approval", due, expiry, revocability) are checked for due, overdue, impossible, conflicting and superseded states. They constrain means and never grant authority. - Formation weighs strength, urgency, goal, commitment, expected utility, risk scaled by caution, cost, privacy and autonomy; it returns formed or not formed with a reason (forbidden by commitment, denied, unavailable, no possible plan, below threshold, capacity, duplicate, deferred), and a commitment requiring approval turns an action into a request for approval. - Reconsideration maps triggers (denied or expired approval, capability or commitment change, failed step or expectation, weakened belief, budget, goal completion, world change, operator correction) to keep, block, suspend, resume, replan, require approval, abandon or fulfil, with bounded replanning. - The store records every transition as an event and every choice in the append-only volition_decisions ledger; fulfilling an intention satisfies its wants and fulfils its commitment. - Event vocabulary gains volition and plan categories.
238 lines
21 KiB
CSS
238 lines
21 KiB
CSS
/* Noema administration interface. Design tokens first, then layout, then components.
|
|
Light theme on :root, dark via data-theme or system preference. */
|
|
:root {
|
|
--font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
|
|
--mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
|
|
--fs: 15px;
|
|
--bg: #f4f6f9; --surface: #ffffff; --surface-2: #eef1f5; --text: #1a1f26; --muted: #5d6673; --border: #dfe4ea;
|
|
--accent: #2f6fed; --accent-ink: #ffffff; --accent-soft: #e6eefc;
|
|
--ok: #178a5b; --ok-soft: #e1f5ec; --warn: #b7791f; --warn-soft: #fbf1dc; --danger: #c93b3b; --danger-soft: #fbe5e5; --info: #2b6cb0;
|
|
--shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
|
|
--radius: 10px; --sidenav: 232px;
|
|
color-scheme: light;
|
|
}
|
|
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0f1318; --surface:#161b22; --surface-2:#1d242d; --text:#e6eaf0; --muted:#8d97a5; --border:#28303b; --accent:#6c9cff; --accent-ink:#0b1220; --accent-soft:#1a2740; --ok:#3ecf8e; --ok-soft:#14301f; --warn:#e0b04c; --warn-soft:#34290f; --danger:#ff6b6b; --danger-soft:#3a1717; --info:#7ab8ff; --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme: dark; } }
|
|
:root[data-theme="dark"] { --bg:#0f1318; --surface:#161b22; --surface-2:#1d242d; --text:#e6eaf0; --muted:#8d97a5; --border:#28303b; --accent:#6c9cff; --accent-ink:#0b1220; --accent-soft:#1a2740; --ok:#3ecf8e; --ok-soft:#14301f; --warn:#e0b04c; --warn-soft:#34290f; --danger:#ff6b6b; --danger-soft:#3a1717; --info:#7ab8ff; --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme: dark; }
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
html { font-size: var(--fs); }
|
|
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; }
|
|
a { color: var(--accent); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
code, pre, .mono { font-family: var(--mono); font-size: .92em; }
|
|
h1 { font-size: 1.6rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
|
|
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
|
|
h3 { font-size: .95rem; margin: 0 0 .5rem; }
|
|
p { margin: 0 0 .75rem; }
|
|
.muted { color: var(--muted); }
|
|
.small { font-size: .85rem; }
|
|
.nowrap { white-space: nowrap; }
|
|
.truncate { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.ok { color: var(--ok); } .warn { color: var(--warn); } .danger { color: var(--danger); }
|
|
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: var(--surface); padding: .5rem; z-index: 99; }
|
|
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
|
|
/* Shell */
|
|
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .75rem; height: 52px; padding: 0 1rem; background: var(--surface); border-bottom: 1px solid var(--border); }
|
|
.topbar-spacer { flex: 1; }
|
|
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; color: var(--text); letter-spacing: -.01em; }
|
|
.brand.big { font-size: 1.4rem; margin-bottom: .5rem; }
|
|
.brand-mark { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at center, var(--surface) 0 3px, var(--accent) 4px 6px, transparent 7px), var(--accent); box-shadow: inset 0 0 0 3px var(--accent); }
|
|
.shell { display: grid; grid-template-columns: var(--sidenav) 1fr; min-height: calc(100vh - 52px - 40px); }
|
|
.sidenav { border-right: 1px solid var(--border); padding: 1rem .75rem; background: var(--surface); position: sticky; top: 52px; height: calc(100vh - 52px); overflow-y: auto; }
|
|
.navgroup { margin-bottom: 1.1rem; }
|
|
.navhead { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 0 .6rem .35rem; }
|
|
.sidenav a { display: block; padding: .42rem .6rem; border-radius: 7px; color: var(--text); font-size: .93rem; }
|
|
.sidenav a:hover { background: var(--surface-2); text-decoration: none; }
|
|
.sidenav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
|
|
.content { padding: 1.5rem 2rem 3rem; max-width: 1400px; width: 100%; }
|
|
.footer { text-align: center; padding: .75rem; border-top: 1px solid var(--border); }
|
|
.nav-toggle { display: none; }
|
|
@media (max-width: 900px) {
|
|
.shell { grid-template-columns: 1fr; }
|
|
.sidenav { display: none; position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
|
|
.sidenav.open { display: block; }
|
|
.nav-toggle { display: inline-flex; }
|
|
.content { padding: 1rem; }
|
|
}
|
|
.bare-main { min-height: calc(100vh - 40px); display: grid; place-items: center; padding: 1rem; }
|
|
|
|
/* Components */
|
|
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow); }
|
|
.card.highlight { border-color: var(--accent); }
|
|
.auth-card { width: min(420px, 100%); }
|
|
.grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
|
|
.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
|
.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
|
|
.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
|
|
.cols-3-1 { grid-template-columns: 3fr 1fr; }
|
|
@media (max-width: 1100px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .cols-3-1 { grid-template-columns: 1fr; } }
|
|
@media (max-width: 700px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }
|
|
.pagehead { margin-bottom: 1.25rem; }
|
|
.stat-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
|
|
.stat-value { font-size: 1.9rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; margin: .15rem 0; }
|
|
.stat-value.small { font-size: 1.25rem; }
|
|
.badge { display: inline-block; font-size: .74rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); vertical-align: middle; }
|
|
.badge.ok { background: var(--ok-soft); color: var(--ok); } .badge.warn { background: var(--warn-soft); color: var(--warn); } .badge.danger { background: var(--danger-soft); color: var(--danger); } .badge.accent { background: var(--accent-soft); color: var(--accent); }
|
|
.flash { padding: .6rem .9rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid var(--border); background: var(--surface); }
|
|
.flash-ok { border-color: var(--ok); background: var(--ok-soft); } .flash-error { border-color: var(--danger); background: var(--danger-soft); } .flash-warn { border-color: var(--warn); background: var(--warn-soft); }
|
|
.error { color: var(--danger); }
|
|
.prose { max-width: 70ch; }
|
|
.steps li { margin-bottom: .4rem; }
|
|
|
|
/* Forms */
|
|
.stack { display: flex; flex-direction: column; gap: .8rem; }
|
|
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
|
|
.inline { display: inline; }
|
|
label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 500; }
|
|
input, select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: .5rem .65rem; }
|
|
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
|
|
textarea { min-height: 6rem; resize: vertical; }
|
|
.btn { font: inherit; font-size: .9rem; font-weight: 550; padding: .45rem .9rem; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
|
|
.btn:hover { background: var(--surface-2); text-decoration: none; }
|
|
.btn.small { padding: .25rem .6rem; font-size: .8rem; }
|
|
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
|
|
.btn-primary:hover { filter: brightness(1.08); background: var(--accent); }
|
|
.btn-danger { color: var(--danger); border-color: var(--danger); }
|
|
.btn-ghost { border-color: transparent; background: transparent; }
|
|
.iconbtn { font: inherit; width: 34px; height: 34px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
|
|
|
|
/* Tables and definition lists */
|
|
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
|
|
.table th { text-align: left; font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: .45rem .5rem; border-bottom: 1px solid var(--border); }
|
|
.table td { padding: .55rem .5rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
|
|
.table tr:last-child td { border-bottom: 0; }
|
|
.table.compact td, .table.compact th { padding: .35rem .45rem; }
|
|
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
|
|
.kv dt { color: var(--muted); font-size: .85rem; } .kv dd { margin: 0; }
|
|
pre.token { background: var(--surface-2); padding: .75rem; border-radius: 8px; overflow-x: auto; user-select: all; }
|
|
|
|
/* Confidence bar: inline meter used across belief/memory views */
|
|
.conf { display: inline-flex; align-items: center; gap: .4rem; font-variant-numeric: tabular-nums; }
|
|
.conf-bar { width: 64px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
|
|
.conf-bar i { display: block; height: 100%; background: var(--accent); }
|
|
|
|
/* Mind pages */
|
|
.mindhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
|
|
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; overflow-x: auto; }
|
|
.tabs a { padding: .5rem .8rem; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
|
|
.tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
|
|
.tabs a.disabled { opacity: .45; cursor: not-allowed; }
|
|
.tabs a:hover { text-decoration: none; color: var(--text); }
|
|
pre.brief { white-space: pre-wrap; font-family: var(--font); font-size: .92rem; background: var(--surface-2); padding: .9rem; border-radius: 8px; margin: 0; line-height: 1.55; }
|
|
.fs { border: 1px solid var(--border); border-radius: 8px; padding: .75rem 1rem 1rem; margin: 0; }
|
|
.fs legend { font-weight: 600; padding: 0 .3rem; }
|
|
.grid.tight { gap: .6rem; margin-bottom: .6rem; }
|
|
label.slider { display: grid; grid-template-columns: 9.5rem 1fr 2.6rem; align-items: center; gap: .6rem; font-weight: 500; margin: .25rem 0; }
|
|
label.slider output { font-variant-numeric: tabular-nums; text-align: right; color: var(--muted); font-size: .85rem; }
|
|
input[type=range] { accent-color: var(--accent); width: 100%; }
|
|
label.check { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; margin: .3rem 0; }
|
|
.grow { flex: 1; }
|
|
ul.plain { list-style: none; padding: 0; margin: 0; }
|
|
.diff-old { color: var(--danger); text-decoration: line-through; } .diff-new { color: var(--ok); }
|
|
|
|
/* Event stream */
|
|
.filterbar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; margin-bottom: 1rem; }
|
|
.filterbar label { font-size: .8rem; }
|
|
.filterbar input, .filterbar select { padding: .35rem .5rem; font-size: .88rem; }
|
|
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
|
|
.table td.summary { max-width: 60ch; }
|
|
.etype { display: inline-block; font-family: var(--mono); font-size: .74rem; padding: .05rem .4rem; border-radius: 4px; background: var(--surface-2); color: var(--muted); white-space: nowrap; border-left: 3px solid var(--muted); }
|
|
.etype.cat-perception { border-left-color: #0ea5a4; } .etype.cat-cognition { border-left-color: var(--accent); } .etype.cat-memory { border-left-color: #8b5cf6; }
|
|
.etype.cat-belief { border-left-color: #d97706; } .etype.cat-prediction { border-left-color: #db2777; } .etype.cat-goal { border-left-color: #16a34a; }
|
|
.etype.cat-affect { border-left-color: #e11d48; } .etype.cat-action { border-left-color: #b45309; } .etype.cat-llm { border-left-color: #64748b; }
|
|
.etype.cat-operator { border-left-color: #0f766e; } .etype.cat-system { border-left-color: var(--border); }
|
|
.etype.cat-volition { border-left-color: #7c3aed; } .etype.cat-plan { border-left-color: #0369a1; }
|
|
tr.fresh { animation: fresh 2.5s ease-out; }
|
|
@keyframes fresh { from { background: var(--accent-soft); } to { background: transparent; } }
|
|
body.stream-offline [data-stream-status] { background: var(--danger-soft); color: var(--danger); }
|
|
pre.json { background: var(--surface-2); padding: .75rem; border-radius: 8px; overflow-x: auto; font-size: .82rem; margin: 0; max-height: 28rem; }
|
|
.chain-node { padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 8px; margin: .2rem 0; }
|
|
.chain-node.current { border-color: var(--accent); background: var(--accent-soft); }
|
|
.chain-arrow { text-align: center; color: var(--muted); }
|
|
ol.corr li.current { font-weight: 600; }
|
|
.cats { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0; }
|
|
|
|
/* Workspace */
|
|
.bd { display: flex; height: 10px; width: 160px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
|
|
.bd-term { display: block; height: 100%; } .bd-term i { display: block; height: 100%; }
|
|
.f-salience { background: #0ea5a4; } .f-urgency { background: #e11d48; } .f-novelty { background: #8b5cf6; } .f-affect { background: #f472b6; } .f-goal_relevance { background: #16a34a; }
|
|
.f-consequence { background: #d97706; } .f-confidence { background: #64748b; } .f-contradiction { background: #b91c1c; } .f-operator_priority { background: #2563eb; } .f-context_relevance { background: #0891b2; }
|
|
ul.wm li { padding: .45rem 0; border-bottom: 1px solid var(--border); } ul.wm li:last-child { border-bottom: 0; }
|
|
.weights { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
|
|
.weights label { font-size: .8rem; }
|
|
|
|
/* Memory */
|
|
.memtext { font-size: 1.1rem; max-width: 80ch; }
|
|
.comp { display: inline-block; background: var(--surface-2); border-radius: 4px; padding: 0 .35rem; margin: .1rem 0; font-family: var(--mono); font-size: .72rem; }
|
|
tr.dayrow td { background: var(--surface-2); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
|
|
.badge.k-episodic { background: #e0f2fe; color: #0369a1; } .badge.k-semantic { background: #ede9fe; color: #6d28d9; } .badge.k-procedural { background: #dcfce7; color: #15803d; } .badge.k-autobiographical { background: #fef3c7; color: #b45309; }
|
|
:root[data-theme="dark"] .badge.k-episodic, :root:not([data-theme="light"]) .badge.k-episodic { background: #0c2a3a; color: #7dd3fc; }
|
|
:root[data-theme="dark"] .badge.k-semantic { background: #2a1f4d; color: #c4b5fd; } :root[data-theme="dark"] .badge.k-procedural { background: #12331d; color: #86efac; } :root[data-theme="dark"] .badge.k-autobiographical { background: #3a2a0a; color: #fcd34d; }
|
|
|
|
/* Beliefs */
|
|
.badge.st-hypothesis { background: var(--surface-2); color: var(--muted); } .badge.st-tentative { background: #fef3c7; color: #b45309; } .badge.st-likely { background: #dbeafe; color: #1d4ed8; }
|
|
.badge.st-accepted { background: var(--ok-soft); color: var(--ok); } .badge.st-contested { background: #fde68a; color: #92400e; } .badge.st-rejected { background: var(--danger-soft); color: var(--danger); } .badge.st-superseded { background: var(--surface-2); color: var(--muted); text-decoration: line-through; } .badge.st-unknown { background: var(--surface-2); color: var(--muted); border: 1px dashed var(--border); }
|
|
:root[data-theme="dark"] .badge.st-tentative { background: #3a2a0a; color: #fcd34d; } :root[data-theme="dark"] .badge.st-likely { background: #172554; color: #93c5fd; } :root[data-theme="dark"] .badge.st-contested { background: #3d2e05; color: #fbbf24; }
|
|
.conf.big .conf-bar.wide { width: 100%; height: 10px; margin: .3rem 0 .8rem; }
|
|
ul.ev li { padding: .4rem 0; border-bottom: 1px solid var(--border); } ul.ev li:last-child { border-bottom: 0; } ul.ev li.retracted { opacity: .55; }
|
|
|
|
/* Prompts */
|
|
textarea.mono { font-family: var(--mono); font-size: .85rem; }
|
|
pre.diff .add { color: var(--ok); } pre.diff .del { color: var(--danger); } pre.diff .ctx { color: var(--muted); }
|
|
|
|
/* Conversation */
|
|
ol.messages { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .6rem; max-height: 60vh; overflow-y: auto; }
|
|
.msg { padding: .6rem .8rem; border-radius: 10px; max-width: 85%; }
|
|
.msg-user { background: var(--accent-soft); align-self: flex-end; }
|
|
.msg-mind { background: var(--surface-2); align-self: flex-start; }
|
|
.msg-system { background: transparent; border: 1px dashed var(--border); align-self: center; }
|
|
.msg-body { white-space: pre-wrap; }
|
|
.msg-head { margin-bottom: .2rem; }
|
|
.chat-input input { min-width: 0; }
|
|
.badge.small { font-size: .65rem; }
|
|
|
|
/* Goals, predictions, state */
|
|
.badge.gs-active { background: var(--accent-soft); color: var(--accent); } .badge.gs-blocked { background: var(--warn-soft); color: var(--warn); } .badge.gs-completed { background: var(--ok-soft); color: var(--ok); } .badge.gs-abandoned, .badge.gs-paused { background: var(--surface-2); color: var(--muted); }
|
|
.badge.ps-open { background: var(--accent-soft); color: var(--accent); } .badge.ps-confirmed { background: var(--ok-soft); color: var(--ok); } .badge.ps-refuted { background: var(--danger-soft); color: var(--danger); } .badge.ps-expired, .badge.ps-withdrawn { background: var(--surface-2); color: var(--muted); }
|
|
.cal { position: relative; width: 140px; height: 10px; background: var(--surface-2); border-radius: 3px; }
|
|
.cal-bar { position: absolute; left: 0; top: 0; height: 100%; background: var(--accent-soft); border-radius: 3px; }
|
|
.cal-hit { position: absolute; top: -3px; width: 3px; height: 16px; background: var(--accent); margin-left: -1px; }
|
|
.dim { display: grid; grid-template-columns: 8rem 1fr 6rem; align-items: center; gap: .5rem; font-size: .85rem; margin: .2rem 0; }
|
|
.dim-bar { position: relative; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; } .dim-bar i { position: absolute; top: 0; height: 100%; background: var(--accent); left: 0; }
|
|
.dim-bar.bipolar::after { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: var(--muted); }
|
|
.dim-val { font-variant-numeric: tabular-nums; color: var(--muted); }
|
|
|
|
/* Notifications, narrative, reflection */
|
|
.badge.nl-info { background: var(--accent-soft); color: var(--accent); } .badge.nl-warn { background: var(--warn-soft); color: var(--warn); } .badge.nl-alert { background: var(--danger-soft); color: var(--danger); }
|
|
tr.unread td { font-weight: 500; }
|
|
.reflection { border-top: 1px solid var(--border); padding: .6rem 0; }
|
|
.narrative { font-size: 1rem; line-height: 1.6; white-space: pre-wrap; }
|
|
.warnlist li { padding: .3rem 0; border-bottom: 1px solid var(--border); }
|
|
.topbar .navcount { background: var(--danger); color: #fff; border-radius: 999px; font-size: .7rem; padding: 0 .4rem; margin-left: .3rem; }
|
|
|
|
/* Graph */
|
|
.graph-card { padding: .5rem; }
|
|
canvas.graph { width: 100%; height: 560px; display: block; border-radius: 8px; background: var(--surface-2); cursor: grab; }
|
|
.legend { display: flex; flex-wrap: wrap; gap: .6rem; padding: .4rem .3rem 0; font-size: .78rem; color: var(--muted); }
|
|
.legend-item i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .3rem; vertical-align: middle; }
|
|
.legend-item i.k-person { background: #2f6fed; } .legend-item i.k-system { background: #0ea5a4; } .legend-item i.k-project { background: #16a34a; } .legend-item i.k-document { background: #d97706; } .legend-item i.k-concept { background: #8b5cf6; } .legend-item i.k-repository { background: #64748b; } .legend-item i.k-organisation { background: #db2777; } .legend-item i.k-place { background: #0891b2; } .legend-item i.k-other { background: #9ca3af; }
|
|
|
|
/* Capabilities */
|
|
.badge.rk-low { background: var(--ok-soft); color: var(--ok); } .badge.rk-medium { background: var(--warn-soft); color: var(--warn); } .badge.rk-high { background: var(--danger-soft); color: var(--danger); } .badge.rk-critical { background: var(--danger); color: #fff; }
|
|
.badge.ef-allow { background: var(--ok-soft); color: var(--ok); } .badge.ef-ask { background: var(--warn-soft); color: var(--warn); } .badge.ef-deny { background: var(--danger-soft); color: var(--danger); }
|
|
.badge.ap-executed, .badge.ap-approved { background: var(--ok-soft); color: var(--ok); } .badge.ap-denied, .badge.ap-failed { background: var(--danger-soft); color: var(--danger); } .badge.ap-expired { background: var(--surface-2); color: var(--muted); }
|
|
.tablewrap { overflow-x: auto; }
|
|
.approval { border: 1px solid var(--border); border-radius: 8px; padding: .8rem 1rem; margin-bottom: .8rem; }
|
|
.approval-head { margin-bottom: .5rem; }
|
|
|
|
/* Integrations */
|
|
.badge.is-ok { background: var(--ok-soft); color: var(--ok); } .badge.is-stale { background: var(--warn-soft); color: var(--warn); } .badge.is-error { background: var(--danger-soft); color: var(--danger); } .badge.is-new, .badge.is-disabled { background: var(--surface-2); color: var(--muted); }
|
|
|
|
/* Study: replay & experiments */
|
|
.replay-step { padding: .6rem 0; border-top: 1px solid var(--border); } .replay-step:first-child { border-top: 0; } .replay-step ul { margin: .2rem 0 0 1rem; padding: 0; } .strong { font-weight: 600; }
|
|
.break { word-break: break-all; }
|
|
|
|
/* Causal timeline */
|
|
.tl-cycle { border-left: 2px solid var(--border); margin: .6rem 0 .6rem .4rem; padding: .2rem 0 .2rem .9rem; } .tl-node { padding: .35rem 0 .35rem .6rem; border-left: 2px solid transparent; } .tl-node.current { border-left-color: var(--accent); background: var(--surface-2); border-radius: 4px; } .tl-when { font-family: var(--mono); }
|