Skip to content

site: increase information density (content pass) #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
duanyiqun merged 1 commit into from
Jun 18, 2026
Merged

site: increase information density (content pass) #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 52 additions & 27 deletions docs-site/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,11 @@
--font-display: var(--font-ui);
--font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

/* Rhythm — tighter than before for higher density */
--maxw: 1080px;
/* Rhythm — denser: wider content column, tighter vertical padding */
--maxw: 1140px;
--gutter: clamp(1.1rem, 4vw, 2.5rem);
--section-pad: clamp(3rem, 6vw, 5.5rem);
--radius: 16px;
--section-pad: clamp(2.25rem, 4vw, 3.75rem);
--radius: 14px;

/* Apple-grade easing */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
Expand Down Expand Up @@ -102,8 +102,8 @@ a:hover { color: var(--ink); }
font-size: 0.9rem;
}

.section-head { text-align: center; margin: 0 auto clamp(2rem, 4vw, 3rem); max-width: 720px; }
.section-head h2.display { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); margin: 0; }
.section-head { text-align: center; margin: 0 auto clamp(1.4rem, 2.5vw, 2rem); max-width: 720px; }
.section-head h2.display { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); margin: 0; }

/* ---------- Layout primitives ---------- */
section { padding: var(--section-pad) var(--gutter); position: relative; }
Expand Down Expand Up @@ -222,9 +222,20 @@ section { padding: var(--section-pad) var(--gutter); position: relative; }
line-height: 1.4;
}
.hero__tagline em { color: var(--ink); font-style: italic; }
.hero__ring { margin: clamp(1.6rem, 4vw, 2.4rem) auto clamp(1.4rem, 3vw, 2rem); width: min(240px, 64vw); }
.hero__ring { margin: clamp(1.2rem, 3vw, 1.8rem) auto clamp(1.1rem, 2.5vw, 1.6rem); width: min(208px, 56vw); }
.hero__cta { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
.hero__note { margin-top: 1.4rem; font-size: 0.9rem; color: var(--ink-soft); }
.hero__note { margin-top: 1rem; font-size: 0.85rem; color: var(--ink-soft); }

/* compact stat strip under the hero */
.hero__stats {
display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
margin: 1.4rem auto 0; max-width: 540px;
border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.hero__stat { flex: 1 1 0; min-width: 120px; padding: 0.7rem 0.8rem; text-align: center; }
.hero__stat + .hero__stat { border-left: 1px solid var(--line); }
.hero__stat b { display: block; font-size: 1.35rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.hero__stat span { font-size: 0.72rem; color: var(--ink-soft); }

/* coverage ring */
.cov-ring { position: relative; aspect-ratio: 1; }
Expand Down Expand Up @@ -325,29 +336,43 @@ section { padding: var(--section-pad) var(--gutter); position: relative; }
.notecard__row code { font-family: var(--font-mono); font-size: 0.78rem; background: rgba(0,0,0,0.05); padding: 0.05rem 0.3rem; border-radius: 5px; }
.notecard__hint { color: var(--ink-soft); font-size: 0.92rem; }

/* system index list — dense Apple list */
.system-index { display: flex; flex-direction: column; }
.sys-row {
display: grid; grid-template-columns: 11px 1fr auto; align-items: center; gap: 0.6rem;
width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
padding: 0.42rem 0.5rem; border-radius: 8px; color: var(--ink); font-family: var(--font-ui); font-size: 0.92rem;
border-bottom: 1px solid var(--line-soft);
transition: background 0.2s var(--ease);
}
.sys-row:hover, .sys-row.is-active { background: var(--bg); }
.sys-row.is-active { box-shadow: inset 2px 0 0 var(--accent); }
/* status dot shared by the data-failure fallback list */
.sys-row__dot { width: 11px; height: 11px; border-radius: 2px; }
.sys-row[data-status="covered"] .sys-row__dot { background: var(--status-covered); }
.sys-row[data-status="partial"] .sys-row__dot { background: var(--status-partial); }
.sys-row[data-status="planned"] .sys-row__dot { background: transparent; border: 1.5px dotted var(--status-planned); }
.sys-row__region { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }

/* ---------- full memory-systems table (all 12 visible at once) ---------- */
.systbl-wrap { margin-top: clamp(1.4rem, 3vw, 2.2rem); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.systbl { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 720px; }
.systbl caption { text-align: left; font-size: 0.72rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); padding-bottom: 0.6rem; }
.systbl th {
text-align: left; font-weight: 600; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--ink-soft); padding: 0.5rem 0.7rem; border-bottom: 1.5px solid var(--line); white-space: nowrap;
}
.systbl td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--ink); }
.systbl tbody tr { transition: background 0.2s var(--ease); cursor: default; }
.systbl tbody tr:hover, .systbl tbody tr.is-active { background: var(--bg-2); }
.systbl tbody tr.is-active { box-shadow: inset 3px 0 0 var(--accent); }
.systbl__name { font-weight: 600; white-space: nowrap; }
.systbl__sys { display: inline-flex; align-items: center; gap: 0.45rem; }
.systbl__dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
tr[data-status="covered"] .systbl__dot { background: var(--status-covered); }
tr[data-status="partial"] .systbl__dot { background: var(--status-partial); }
tr[data-status="planned"] .systbl__dot { background: transparent; border: 1.5px dotted var(--status-planned); }
.systbl__tax, .systbl__region { color: var(--ink-soft); white-space: nowrap; }
.systbl__mech { color: var(--ink-soft); line-height: 1.4; min-width: 260px; }
.systbl__mech code { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink); }
.systbl__status { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.12rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.systbl__status[data-status="covered"] { color: #0a6fd4; background: rgba(10,132,255,0.12); }
.systbl__status[data-status="partial"] { color: #5a7fa6; background: rgba(127,159,191,0.16); }
.systbl__status[data-status="planned"] { color: var(--ink-soft); background: rgba(0,0,0,0.05); }

/* ==========================================================================
ARCHITECTURE
========================================================================== */
.arch__diagram { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.arch__diagram { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.arch__diagram svg { width: 100%; height: auto; display: block; }
.arch__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.arch__explainer { max-width: 760px; margin: 0 auto clamp(1.4rem, 3vw, 2.2rem); color: var(--ink-soft); font-size: 0.96rem; line-height: 1.55; }
.arch__explainer strong { color: var(--ink); font-weight: 600; }
.arch__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 2vw, 1.4rem); }
.arch-card {
position: relative;
border: 1px solid var(--line); border-radius: var(--radius);
Expand Down Expand Up @@ -384,8 +409,8 @@ section { padding: var(--section-pad) var(--gutter); position: relative; }
.bench-card__metric { display: flex; align-items: baseline; gap: 0.25rem; margin-top: 0.5rem; }
.bench-card__val { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4.5vw, 2.6rem); color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.bench-card__unit { font-family: var(--font-display); font-size: 1.05rem; color: var(--accent); }
.bench-card__name { margin-top: 0.35rem; color: var(--ink-soft); font-size: 0.85rem; }
.bench-card__note { color: var(--ink-soft); font-size: 0.78rem; margin-top: 0.2rem; }
.bench-card__name { margin-top: 0.35rem; color: var(--ink); font-weight: 600; font-size: 0.88rem; }
.bench-card__note { color: var(--ink-soft); font-size: 0.78rem; margin-top: 0.25rem; line-height: 1.4; }

/* ==========================================================================
QUICKSTART
Expand Down
42 changes: 36 additions & 6 deletions docs-site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<title>CogniFold — A brain-inspired always-on agent memory</title>
<meta name="description" content="CogniFold folds events into self-emerging cognitive structure: a brain-inspired, always-on agent memory with proactive intent crystallization. ~60% of human memory systems modeled." />
<link rel="canonical" href="https://opennorve.github.io/CogniFold/" />
<meta name="theme-color" content="#ece0c4" />
<meta name="theme-color" content="#ffffff" />
<meta name="color-scheme" content="light" />

<!-- Favicon (neural brain glyph) -->
Expand Down Expand Up @@ -89,6 +89,12 @@ <h1 class="hero__title">CogniFold</h1>
</div>

<p class="hero__note">Apache-2.0 · Python · MCP-compatible</p>

<div class="hero__stats" role="list" aria-label="At a glance">
<div class="hero__stat" role="listitem"><b>12</b><span>memory systems mapped</span></div>
<div class="hero__stat" role="listitem"><b>~60%</b><span>coverage (weight-normalized)</span></div>
<div class="hero__stat" role="listitem"><b>9</b><span>public benchmarks reported</span></div>
</div>
</div>
<div class="ink-divider" aria-hidden="true"></div>
</section>
Expand Down Expand Up @@ -117,14 +123,27 @@ <h2 class="display">Memory systems</h2>

<aside class="notebook reveal" aria-live="polite">
<article class="notecard" id="notecard">
<!-- populated by app.js -->
<!-- populated by app.js; full list is in the table below -->
</article>

<div class="system-index" id="systemIndex" role="list" aria-label="Memory systems">
<!-- system rows injected by app.js -->
</div>
</aside>
</div>

<!-- Full reference table: all 12 systems visible at once -->
<div class="systbl-wrap reveal">
<table class="systbl" id="systemsTable">
<caption>All twelve memory systems · mapped to CogniFold mechanisms</caption>
<thead>
<tr>
<th scope="col">Memory system</th>
<th scope="col">Taxonomy</th>
<th scope="col">Brain region</th>
<th scope="col">Status</th>
<th scope="col">CogniFold mechanism</th>
</tr>
</thead>
<tbody id="systemsTableBody"><!-- rows injected by app.js --></tbody>
</table>
</div>
<div class="ink-divider ink-divider--flip" aria-hidden="true"></div>
</section>

Expand All @@ -143,6 +162,17 @@ <h2 class="display">The folding loop</h2>
<!-- CLS diagram injected by app.js -->
</div>

<p class="arch__explainer reveal">
Every event enters as a verbatim <strong>EVENT</strong> node in the hippocampal layer.
As events recur, the agent folds them into generalized <strong>CONCEPT</strong> nodes in the
neocortical layer — grounded knowledge with explainable provenance back to the episodes that
formed it. From accumulated concepts and time anchors, the prefrontal layer crystallizes
<strong>INTENT</strong> nodes: commitments to act at the right future moment. This
<strong>proactive intent crystallization</strong> is what sets CogniFold apart from passive
memory stores — remembering to act becomes a property of the topology, not a separate policy.
Retrieval then closes the loop, letting intent reshape what the agent attends to next.
</p>

<div class="arch__cards">
<div class="arch-card reveal" data-layer="event">
<span class="arch-card__sigil" aria-hidden="true">α</span>
Expand Down
74 changes: 33 additions & 41 deletions docs-site/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,20 @@ const reduceMotion =
window.matchMedia("(prefers-reduced-motion: reduce)").matches;

// Real benchmark numbers only (no invented competitor figures, no LongMemEval).
// `note` is a concise, factual context line describing what the benchmark probes.
const BENCHMARKS = [
{ bench: "CogEval", name: "Proactivity", val: "0.614", unit: "", note: "intent crystallization" },
{ bench: "BABILong", name: "long-context QA", val: "96.0", unit: "% EM" },
{ bench: "SafetyBench", name: "safety", val: "94.3", unit: "%" },
{ bench: "MuTual", name: "dialogue reasoning", val: "93.2", unit: "%" },
{ bench: "ToMi", name: "theory of mind", val: "91.6", unit: "% EM" },
{ bench: "LoCoMo", name: "long conversation", val: "82.8", unit: " J-Score", note: "episodic recall" },
{ bench: "StreamingQA", name: "streaming QA", val: "78.4", unit: "% EM" },
{ bench: "NarrativeQA", name: "narrative", val: "0.720", unit: " F1" },
{ bench: "MuSiQue", name: "multi-hop", val: "41.2", unit: "% EM", note: "F1 0.587" },
{ bench: "CogEval", name: "Proactivity", val: "0.614", unit: "", note: "Tests whether the agent acts on intents at the right moment — CogniFold's core differentiator." },
{ bench: "BABILong", name: "Long-context QA", val: "96.0", unit: "% EM", note: "Reasoning over facts buried in very long contexts; exact-match accuracy." },
{ bench: "SafetyBench", name: "Safety", val: "94.3", unit: "%", note: "Multiple-choice safety judgments across harm categories." },
{ bench: "MuTual", name: "Dialogue reasoning", val: "93.2", unit: "%", note: "Multi-turn dialogue inference — choosing the coherent next response." },
{ bench: "ToMi", name: "Theory of mind", val: "91.6", unit: "% EM", note: "Tracking other agents' beliefs and false beliefs across a narrative." },
{ bench: "LoCoMo", name: "Long conversation", val: "82.8", unit: " J-Score", note: "Episodic recall over very long multi-session conversations." },
{ bench: "StreamingQA", name: "Streaming QA", val: "78.4", unit: "% EM", note: "Answering questions over a time-ordered stream of incoming documents." },
{ bench: "NarrativeQA", name: "Narrative", val: "0.720", unit: " F1", note: "Comprehension questions over full stories and scripts." },
{ bench: "MuSiQue", name: "Multi-hop", val: "41.2", unit: "% EM", note: "Compositional multi-hop questions; also F1 0.587." },
];

const STATUS_WORD = { covered: "inked", partial: "half-inked", planned: "pencilled" };
const STATUS_WORD = { covered: "covered", partial: "partial", planned: "planned" };

const el = (tag, attrs = {}) => {
const n = document.createElementNS(SVG_NS, tag);
Expand Down Expand Up @@ -62,7 +63,7 @@ async function init() {
renderCoverageRing(data.overall_coverage_pct);
renderArchDiagram();
renderLedger();
renderSystemIndex(data, onSelectSystem);
renderSystemsTable(data, onSelectSystem);
showNotecard(null); // default state

const host = document.getElementById("brainHost");
Expand All @@ -77,22 +78,14 @@ async function init() {
}
if (!brain) renderBrainFallback(host, data);

// wire system-index rows back to the brain (no-op guards if brain absent)
document.querySelectorAll(".sys-row").forEach((row) => {
const id = row.dataset.system;
row.addEventListener("mouseenter", () => { brain && brain.focusSystem(id); onSelectSystem(id, false); });
row.addEventListener("mouseleave", () => brain && brain.clearHighlight());
row.addEventListener("focus", () => { brain && brain.focusSystem(id); onSelectSystem(id, false); });
row.addEventListener("click", () => onSelectSystem(id, true));
});

function onSelectSystem(systemId, markActive) {
const sys = systemsById.get(systemId);
if (!sys) return;
showNotecard(sys);
document.querySelectorAll(".sys-row").forEach((r) =>
document.querySelectorAll(".systbl tbody tr").forEach((r) =>
r.classList.toggle("is-active", r.dataset.system === systemId)
);
if (brain) brain.focusSystem(systemId);
}
}

Expand Down Expand Up @@ -226,30 +219,29 @@ function showNotecard(sys) {
<div class="notecard__row"><b>Evidence</b>${evidenceParts.map((p) => `<code>${escapeHtml(p)}</code>`).join(" ")}</div>`;
}

// -------------------------------------------------------------- system index
function renderSystemIndex(data, onSelect) {
const host = document.getElementById("systemIndex");
host.innerHTML = "";
// -------------------------------------------------------------- systems table
// Full reference table: all 12 systems visible at once (name · taxonomy ·
// region · status · mechanism). Rows sync with the brain + side index on hover.
function renderSystemsTable(data, onSelect) {
const body = document.getElementById("systemsTableBody");
if (!body) return;
body.innerHTML = "";
data.systems.forEach((s) => {
const row = document.createElement("button");
row.className = "sys-row";
row.type = "button";
row.dataset.system = s.id;
row.dataset.status = s.status;
row.setAttribute("role", "listitem");
row.setAttribute("aria-label", `${s.name}, ${s.status}, ${s.brain_region}`);
row.innerHTML = `
<span class="sys-row__dot" aria-hidden="true"></span>
<span class="sys-row__name">${escapeHtml(s.name)}</span>
<span class="sys-row__region">${escapeHtml(shortRegion(s.brain_region))}</span>`;
host.appendChild(row);
const tr = document.createElement("tr");
tr.dataset.system = s.id;
tr.dataset.status = s.status;
tr.innerHTML = `
<td class="systbl__name"><span class="systbl__sys"><span class="systbl__dot" aria-hidden="true"></span>${escapeHtml(s.name)}</span></td>
<td class="systbl__tax">${escapeHtml(s.taxonomy_group)}</td>
<td class="systbl__region">${escapeHtml(s.brain_region)}</td>
<td><span class="systbl__status" data-status="${s.status}">${escapeHtml(s.status)}</span></td>
<td class="systbl__mech">${escapeHtml(s.cognifold_mechanism)}</td>`;
tr.addEventListener("mouseenter", () => onSelect(s.id, false));
tr.addEventListener("click", () => onSelect(s.id, true));
body.appendChild(tr);
});
}

function shortRegion(region) {
return region.split(/[\/(]/)[0].trim().split(" ")[0];
}

// -------------------------------------------------------------- arch diagram
// Clean neural-ink diagram, native SVG (no rough.js).
function renderArchDiagram() {
Expand Down
Loading