Andy Dixon
703d080d13
Phase 10. Metacognition is a cognitive process with deterministic self-checks (insufficient evidence, single-source reliance, model output without evidence, repeated failed hypotheses, stale contradictions, calibration overconfidence); its warnings compete for attention and, when admitted, add counter-evidence or open an investigation goal. Reflection reviews the period since the last run (prediction errors, rejected beliefs, corrections, status changes, completed goals, contradictions, calibration), turns repeated failures into procedural lessons written once, and records a reflection event; a model may only word the prose within the mind's budget. Consolidation clusters unconsolidated episodes by shared stemmed terms, creates a belief whose confidence is computed from the episodes as evidence and a semantic memory linked to each episode by derived_from, and records jobs with inputs and outputs. Wording may come from the consolidate prompt within a per-run model budget; the job says which. Operators can run, pause and reject; originals are never touched. The narrative hook keeps a five-part first-person narrative built from state and stored with narrative_updated events. The notification hook applies explicit thresholded rules, aggregates repeats within a cooldown and records suppressions with reasons. A scheduled job runs consolidation and reflection per mind, switching the runtime mode while it works. API, Background tab, notifications page with unread badge, overview narrative and warnings, CLI commands, docs/cognition.md.
212 lines
18 KiB
CSS
212 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); }
|
|
|
|
/* 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; }
|