Andy Dixon
9eb873cbe6
Phase 9. Goals form a mind-scoped tree with kind, priority, progress and blockers; their deterministic relevance to a candidate feeds the goal_relevance attention feature and a goal monitor raises stalled goals and observations that touch one. Drives are a closed set of eight scalars with operator-configured ranges and personality-derived baselines; there is no self-preservation, replication or acquisition drive and no way to add one at runtime. Affect is ten scalars moved by an explicit rule table over events and decaying towards baseline; both modulate attention weights each cycle and the effective weights are recorded with every cycle and shown beside the configured ones. Predictions carry a window and machine-checkable criteria (event terms occurring or staying absent, a belief reaching a confidence, or operator judgement). A resolver job judges them deterministically, keeps an append-only outcome history for calibration (accuracy, Brier score, confidence buckets, overconfidence flag), emits prediction_error events scaled by how confident the miss was, and feeds the outcome back into the linked belief as evidence. Causal hypotheses derive predictions automatically. Curiosity turns misses, contradictions and unexplained observations into questions that compete for attention and become investigation goals when admitted. Brain gains after-cycle hooks and goal/motivation state. API, UI (goals, prediction dashboard, cognitive state panel, effective weights) and CLI (goal, prediction, state). Demo scenario 4 verified end to end.
204 lines
18 KiB
CSS
204 lines
18 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); }
|
|
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; }
|
|
: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); }
|