Andy Dixon
777e8f50b5
Phase 8, completing milestone M1. A user message is stored and appended as an observation event carrying trust, actor, channel and reference. The perceive process analyses it deterministically (intent, introspection kind, entities, claims, urgency) and, within the per-cycle model allowance, enriches it through the perceive prompt. Its handler writes a perception event, an episodic memory with participants, turns claims into beliefs whose evidence is the message, and builds a response intent from state: beliefs and memories for the topic, evidence rows for why-questions, the uncertain band, contested beliefs and their links, recent learning, status changes, and honest declines for subsystems that do not exist yet or for requests with no capabilities. The respond prompt phrases the intent when a model is assigned; otherwise the reply is a direct rendering of the intent. response_generated cites the message, the perception, every belief and memory used, the episode and the model call. API: conversations, messages with optional wait, one-shot ask; chat UI with live refresh and a per-reply intent view. Sample mind Dani as a strictly decoded seed document with an import endpoint and noemactl mind import. tests/m1 drives all fourteen milestone steps including restart.
193 lines
16 KiB
CSS
193 lines
16 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; }
|