55773bf668
Archive a self-contained HTML copy of the design rationale artifact — the interactive Signal & Noise analysis of Karpathy's pattern that produced memex. Fully self-contained (inline CSS + JS, only external dependency is Google Fonts), works offline, renders identically in any modern browser. Updated the README Credits section to link: 1. Live interactive version at eric-turner.com/memex/signal-and-noise.html 2. Original Claude artifact 3. Archived copy in this repo 4. Condensed written version in DESIGN-RATIONALE.md The archived HTML means the analysis survives even if the live site or the Claude artifact URL ever goes away.
1367 lines
56 KiB
HTML
1367 lines
56 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>memex — Signal & Noise Analysis</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=JetBrains+Mono:wght@300;400;500&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--ink: #0d0d0d;
|
||
--paper: #f5f0e8;
|
||
--paper2: #ede7d8;
|
||
--accent-green: #1a6b45;
|
||
--accent-red: #8b2020;
|
||
--accent-amber: #b8820a;
|
||
--accent-blue: #1a3d6b;
|
||
--rule: #c4b99a;
|
||
--muted: #7a6e5f;
|
||
--highlight: #f0e2b6;
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
background: var(--paper);
|
||
color: var(--ink);
|
||
font-family: 'DM Sans', sans-serif;
|
||
font-size: 15px;
|
||
line-height: 1.6;
|
||
min-height: 100vh;
|
||
background-image:
|
||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23f5f0e8'/%3E%3Ccircle cx='1' cy='1' r='0.5' fill='%23c4b99a22'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
/* MASTHEAD */
|
||
.masthead {
|
||
border-bottom: 3px double var(--ink);
|
||
padding: 28px 40px 20px;
|
||
display: grid;
|
||
grid-template-columns: 1fr auto 1fr;
|
||
align-items: center;
|
||
gap: 20px;
|
||
background: var(--paper2);
|
||
}
|
||
.masthead-left {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 10px;
|
||
font-weight: 300;
|
||
color: var(--muted);
|
||
letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
line-height: 1.8;
|
||
}
|
||
.masthead-center { text-align: center; }
|
||
.masthead-center h1 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: clamp(28px, 5vw, 52px);
|
||
font-weight: 900;
|
||
letter-spacing: -0.02em;
|
||
line-height: 1;
|
||
text-transform: uppercase;
|
||
}
|
||
.masthead-center .subtitle {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 10px;
|
||
letter-spacing: 0.3em;
|
||
color: var(--muted);
|
||
text-transform: uppercase;
|
||
margin-top: 6px;
|
||
border-top: 1px solid var(--rule);
|
||
border-bottom: 1px solid var(--rule);
|
||
padding: 4px 0;
|
||
}
|
||
.masthead-right {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 10px;
|
||
font-weight: 300;
|
||
color: var(--muted);
|
||
letter-spacing: 0.1em;
|
||
text-align: right;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
/* TICKER */
|
||
.ticker {
|
||
background: var(--ink);
|
||
color: var(--paper);
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 10px;
|
||
letter-spacing: 0.15em;
|
||
padding: 7px 0;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
.ticker-track {
|
||
display: inline-block;
|
||
animation: ticker 30s linear infinite;
|
||
}
|
||
@keyframes ticker {
|
||
0% { transform: translateX(0); }
|
||
100% { transform: translateX(-50%); }
|
||
}
|
||
.ticker-item { margin: 0 40px; }
|
||
.ticker-dot { color: var(--accent-amber); margin: 0 4px; }
|
||
|
||
/* OVERVIEW STRIP */
|
||
.overview-strip {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
border-bottom: 2px solid var(--ink);
|
||
}
|
||
.stat-cell {
|
||
padding: 18px 24px;
|
||
border-right: 1px solid var(--rule);
|
||
text-align: center;
|
||
}
|
||
.stat-cell:last-child { border-right: none; }
|
||
.stat-num {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 32px;
|
||
font-weight: 900;
|
||
line-height: 1;
|
||
margin-bottom: 4px;
|
||
}
|
||
.stat-label {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 9px;
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
}
|
||
|
||
/* MAIN LAYOUT */
|
||
.page {
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
padding: 0 40px 60px;
|
||
}
|
||
|
||
/* SECTION HEADERS */
|
||
.section-header {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 16px;
|
||
margin: 36px 0 20px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 2px solid var(--ink);
|
||
}
|
||
.section-header h2 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
.section-tag {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 9px;
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
padding: 2px 8px;
|
||
border: 1px solid var(--ink);
|
||
border-radius: 2px;
|
||
}
|
||
.tag-green { border-color: var(--accent-green); color: var(--accent-green); background: #e8f5ee; }
|
||
.tag-red { border-color: var(--accent-red); color: var(--accent-red); background: #f5e8e8; }
|
||
|
||
/* CONCEPT EXPLAINER */
|
||
.concept-box {
|
||
background: var(--ink);
|
||
color: var(--paper);
|
||
padding: 28px 36px;
|
||
margin: 28px 0;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.concept-box::before {
|
||
content: '"';
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 200px;
|
||
font-weight: 900;
|
||
position: absolute;
|
||
top: -40px;
|
||
left: 20px;
|
||
opacity: 0.07;
|
||
line-height: 1;
|
||
}
|
||
.concept-box .kicker {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 10px;
|
||
letter-spacing: 0.25em;
|
||
text-transform: uppercase;
|
||
color: var(--accent-amber);
|
||
margin-bottom: 10px;
|
||
}
|
||
.concept-box p {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 18px;
|
||
font-weight: 400;
|
||
line-height: 1.5;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.concept-box em { color: #f0c060; font-style: normal; }
|
||
|
||
/* ARCHITECTURE DIAGRAM */
|
||
.arch-diagram {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0;
|
||
margin: 24px 0 32px;
|
||
overflow-x: auto;
|
||
}
|
||
.arch-node {
|
||
flex: 1;
|
||
min-width: 160px;
|
||
padding: 18px 16px;
|
||
border: 2px solid var(--ink);
|
||
background: white;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
.arch-node.raw { border-color: var(--accent-blue); background: #e8eef5; }
|
||
.arch-node.wiki { border-color: var(--accent-green); background: #eaf5ee; }
|
||
.arch-node.schema { border-color: var(--accent-amber); background: #f5f0e0; }
|
||
.arch-node .node-label {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 6px;
|
||
}
|
||
.arch-node .node-name {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
}
|
||
.arch-node .node-desc {
|
||
font-size: 11px;
|
||
color: var(--muted);
|
||
margin-top: 6px;
|
||
line-height: 1.4;
|
||
}
|
||
.arch-arrow {
|
||
flex: 0 0 50px;
|
||
text-align: center;
|
||
font-size: 22px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
/* PRO/CON GRID */
|
||
.procon-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 0;
|
||
border: 2px solid var(--ink);
|
||
margin-bottom: 32px;
|
||
}
|
||
.procon-col { }
|
||
.procon-col-header {
|
||
padding: 14px 20px;
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
border-bottom: 2px solid var(--ink);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.procon-col-header.pro { background: #1a6b45; color: white; }
|
||
.procon-col-header.con { background: #8b2020; color: white; border-left: 2px solid var(--ink); }
|
||
.procon-col-header .icon { font-size: 20px; }
|
||
.procon-items { padding: 0; }
|
||
.procon-item {
|
||
padding: 16px 20px;
|
||
border-bottom: 1px solid var(--rule);
|
||
cursor: pointer;
|
||
transition: background 0.15s;
|
||
position: relative;
|
||
}
|
||
.procon-item:last-child { border-bottom: none; }
|
||
.procon-item.con-item { border-left: 2px solid var(--ink); }
|
||
.procon-item:hover { background: var(--highlight); }
|
||
.procon-item.active { background: var(--highlight); }
|
||
.procon-item .item-title {
|
||
font-family: 'DM Sans', sans-serif;
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
margin-bottom: 4px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
}
|
||
.procon-item .item-title .bullet {
|
||
flex-shrink: 0;
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
margin-top: 1px;
|
||
}
|
||
.pro-item .bullet { background: var(--accent-green); color: white; }
|
||
.con-item .bullet { background: var(--accent-red); color: white; }
|
||
.procon-item .item-detail {
|
||
font-size: 12.5px;
|
||
color: var(--muted);
|
||
line-height: 1.5;
|
||
padding-left: 26px;
|
||
display: none;
|
||
margin-top: 6px;
|
||
}
|
||
.procon-item.active .item-detail { display: block; }
|
||
.procon-item .expand-hint {
|
||
position: absolute;
|
||
right: 16px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 16px;
|
||
color: var(--rule);
|
||
transition: transform 0.2s;
|
||
}
|
||
.procon-item.active .expand-hint { transform: translateY(-50%) rotate(45deg); color: var(--muted); }
|
||
|
||
/* USE CASES */
|
||
.use-cases {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 16px;
|
||
}
|
||
.use-case-card {
|
||
border: 2px solid var(--rule);
|
||
padding: 18px;
|
||
position: relative;
|
||
cursor: default;
|
||
transition: border-color 0.15s, transform 0.15s;
|
||
}
|
||
.use-case-card:hover { border-color: var(--ink); transform: translateY(-2px); }
|
||
.use-case-card .verdict-badge {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 9px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
padding: 3px 8px;
|
||
border-radius: 2px;
|
||
display: inline-block;
|
||
margin-bottom: 10px;
|
||
}
|
||
.badge-excellent { background: #1a6b45; color: white; }
|
||
.badge-good { background: #4a7a1a; color: white; }
|
||
.badge-poor { background: #b8820a; color: white; }
|
||
.badge-avoid { background: #8b2020; color: white; }
|
||
.use-case-card h4 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
margin-bottom: 8px;
|
||
}
|
||
.use-case-card p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
|
||
.fit-meter {
|
||
margin-top: 12px;
|
||
height: 4px;
|
||
background: var(--rule);
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
}
|
||
.fit-fill {
|
||
height: 100%;
|
||
border-radius: 2px;
|
||
transition: width 1s ease;
|
||
}
|
||
|
||
/* COMPARISON TABLE */
|
||
.compare-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 20px 0 32px;
|
||
font-size: 13px;
|
||
}
|
||
.compare-table th {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 10px;
|
||
letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
padding: 12px 16px;
|
||
text-align: left;
|
||
border-bottom: 2px solid var(--ink);
|
||
background: var(--paper2);
|
||
}
|
||
.compare-table th:not(:first-child) { text-align: center; }
|
||
.compare-table td {
|
||
padding: 11px 16px;
|
||
border-bottom: 1px solid var(--rule);
|
||
vertical-align: middle;
|
||
}
|
||
.compare-table td:not(:first-child) { text-align: center; }
|
||
.compare-table tr:hover td { background: var(--highlight); }
|
||
.compare-table .row-label {
|
||
font-family: 'DM Sans', sans-serif;
|
||
font-weight: 500;
|
||
}
|
||
.compare-table .col-wiki { background: #eaf5ee44; }
|
||
.compare-table .col-rag { background: #e8eef544; }
|
||
.cell-win { color: var(--accent-green); font-weight: 500; }
|
||
.cell-lose { color: var(--accent-red); }
|
||
.cell-mid { color: var(--accent-amber); }
|
||
|
||
/* QUOTE PULL */
|
||
.pull-quote {
|
||
border-left: 4px solid var(--ink);
|
||
margin: 28px 0;
|
||
padding: 16px 24px;
|
||
background: var(--paper2);
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 16px;
|
||
font-style: italic;
|
||
line-height: 1.6;
|
||
}
|
||
.pull-quote .attribution {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 10px;
|
||
letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
font-style: normal;
|
||
color: var(--muted);
|
||
margin-top: 8px;
|
||
display: block;
|
||
}
|
||
|
||
/* TABS */
|
||
.tab-row {
|
||
display: flex;
|
||
border-bottom: 2px solid var(--ink);
|
||
margin-bottom: 20px;
|
||
gap: 0;
|
||
overflow-x: auto;
|
||
}
|
||
.tab-btn {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 10px;
|
||
letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
padding: 10px 20px;
|
||
border: none;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
border-bottom: 3px solid transparent;
|
||
margin-bottom: -2px;
|
||
white-space: nowrap;
|
||
color: var(--muted);
|
||
transition: color 0.15s;
|
||
}
|
||
.tab-btn.active {
|
||
border-bottom-color: var(--ink);
|
||
color: var(--ink);
|
||
font-weight: 500;
|
||
}
|
||
.tab-btn:hover { color: var(--ink); }
|
||
.tab-panel { display: none; }
|
||
.tab-panel.active { display: block; }
|
||
|
||
/* FOOTER */
|
||
.page-footer {
|
||
border-top: 3px double var(--ink);
|
||
padding: 20px 40px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: var(--paper2);
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 10px;
|
||
letter-spacing: 0.12em;
|
||
color: var(--muted);
|
||
text-transform: uppercase;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
}
|
||
.page-footer a { color: var(--accent-green); text-decoration: none; }
|
||
.page-footer a:hover { text-decoration: underline; }
|
||
|
||
/* SIGNAL STRENGTH */
|
||
.signal-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.signal-card {
|
||
border: 1px solid var(--rule);
|
||
padding: 16px 18px;
|
||
background: white;
|
||
}
|
||
.signal-card .signal-category {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 9px;
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
margin-bottom: 8px;
|
||
}
|
||
.signal-card h4 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
margin-bottom: 6px;
|
||
}
|
||
.signal-card p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
|
||
.signal-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-top: 10px;
|
||
}
|
||
.signal-bar-track {
|
||
flex: 1;
|
||
height: 3px;
|
||
background: var(--rule);
|
||
border-radius: 2px;
|
||
}
|
||
.signal-bar-fill {
|
||
height: 100%;
|
||
border-radius: 2px;
|
||
}
|
||
.signal-bar-label {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 9px;
|
||
color: var(--muted);
|
||
min-width: 28px;
|
||
}
|
||
|
||
/* SCALE NOTE */
|
||
.scale-note {
|
||
background: #fff8e6;
|
||
border: 1px solid var(--accent-amber);
|
||
padding: 14px 18px;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
gap: 12px;
|
||
font-size: 13px;
|
||
}
|
||
.scale-note .warn-icon { font-size: 18px; flex-shrink: 0; }
|
||
.scale-note strong { font-weight: 500; }
|
||
|
||
/* MITIGATION INTRO */
|
||
.mitigation-intro {
|
||
font-size: 13.5px;
|
||
color: var(--muted);
|
||
margin-bottom: 24px;
|
||
padding: 14px 18px;
|
||
border-left: 3px solid var(--accent-amber);
|
||
background: #fff8e6;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
letter-spacing: 0.03em;
|
||
line-height: 1.6;
|
||
}
|
||
.mitigation-intro strong { color: var(--ink); }
|
||
|
||
.mitigation-category { margin-bottom: 32px; }
|
||
.mitigation-category-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 14px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid var(--rule);
|
||
}
|
||
.mitigation-category-header .cat-icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 15px;
|
||
flex-shrink: 0;
|
||
}
|
||
.mitigation-category-header h3 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
}
|
||
.mitigation-category-header .severity-badge {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 9px;
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
padding: 2px 8px;
|
||
border-radius: 2px;
|
||
margin-left: auto;
|
||
}
|
||
.sev-critical { background: #8b2020; color: white; }
|
||
.sev-high { background: #b8820a; color: white; }
|
||
.sev-medium { background: #1a3d6b; color: white; }
|
||
|
||
.mitigation-steps { display: grid; gap: 10px; }
|
||
.mitigation-step {
|
||
background: white;
|
||
border: 1px solid var(--rule);
|
||
padding: 0;
|
||
overflow: hidden;
|
||
transition: border-color 0.15s;
|
||
}
|
||
.mitigation-step:hover { border-color: var(--ink); }
|
||
.mitigation-step-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 14px 18px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
.step-num {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
color: var(--muted);
|
||
min-width: 24px;
|
||
}
|
||
.step-title {
|
||
font-family: 'DM Sans', sans-serif;
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
flex: 1;
|
||
}
|
||
.step-tool-tag {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 9px;
|
||
letter-spacing: 0.15em;
|
||
padding: 2px 7px;
|
||
background: var(--paper2);
|
||
border: 1px solid var(--rule);
|
||
border-radius: 2px;
|
||
color: var(--muted);
|
||
white-space: nowrap;
|
||
}
|
||
.step-arrow {
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
transition: transform 0.2s;
|
||
margin-left: 4px;
|
||
}
|
||
.mitigation-step.open .step-arrow { transform: rotate(90deg); }
|
||
.mitigation-step-body {
|
||
display: none;
|
||
padding: 0 18px 16px 54px;
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
line-height: 1.6;
|
||
border-top: 1px solid var(--paper2);
|
||
}
|
||
.mitigation-step.open .mitigation-step-body { display: block; }
|
||
.mitigation-step-body p { margin-top: 10px; }
|
||
.mitigation-step-body .code-pill {
|
||
display: inline-block;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 11px;
|
||
background: var(--ink);
|
||
color: var(--paper);
|
||
padding: 2px 8px;
|
||
border-radius: 3px;
|
||
margin: 2px;
|
||
white-space: nowrap;
|
||
}
|
||
.mitigation-step-body .tip-box {
|
||
background: #eaf5ee;
|
||
border: 1px solid var(--accent-green);
|
||
border-radius: 3px;
|
||
padding: 10px 14px;
|
||
margin-top: 10px;
|
||
font-size: 12.5px;
|
||
color: var(--accent-green);
|
||
}
|
||
.mitigation-step-body .tip-box strong { color: var(--accent-green); }
|
||
.mitigation-step-body .warn-box {
|
||
background: #fff8e6;
|
||
border: 1px solid var(--accent-amber);
|
||
border-radius: 3px;
|
||
padding: 10px 14px;
|
||
margin-top: 10px;
|
||
font-size: 12.5px;
|
||
color: #7a5500;
|
||
}
|
||
|
||
/* UPKEEP SYSTEM */
|
||
.upkeep-system {
|
||
background: var(--ink);
|
||
color: var(--paper);
|
||
padding: 28px 32px;
|
||
margin-bottom: 24px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.upkeep-system::after {
|
||
content: 'UPKEEP';
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 100px;
|
||
font-weight: 900;
|
||
position: absolute;
|
||
right: -10px;
|
||
bottom: -20px;
|
||
opacity: 0.06;
|
||
line-height: 1;
|
||
letter-spacing: -0.05em;
|
||
}
|
||
.upkeep-system .kicker {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 10px;
|
||
letter-spacing: 0.25em;
|
||
text-transform: uppercase;
|
||
color: var(--accent-amber);
|
||
margin-bottom: 10px;
|
||
}
|
||
.upkeep-system h3 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
margin-bottom: 14px;
|
||
}
|
||
.upkeep-system p {
|
||
font-size: 13.5px;
|
||
color: #c4b99a;
|
||
line-height: 1.6;
|
||
max-width: 680px;
|
||
margin-bottom: 20px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.upkeep-cadence {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 12px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.cadence-cell {
|
||
border: 1px solid #3a3530;
|
||
padding: 14px;
|
||
background: #161410;
|
||
}
|
||
.cadence-cell .freq {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 10px;
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
color: var(--accent-amber);
|
||
margin-bottom: 6px;
|
||
}
|
||
.cadence-cell .cadence-title {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
margin-bottom: 6px;
|
||
}
|
||
.cadence-cell ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
.cadence-cell ul li {
|
||
font-size: 11px;
|
||
color: #c4b99a;
|
||
padding: 3px 0;
|
||
border-bottom: 1px solid #2a2520;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 6px;
|
||
}
|
||
.cadence-cell ul li::before {
|
||
content: '→';
|
||
color: #5a5040;
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
}
|
||
.cadence-cell ul li:last-child { border-bottom: none; }
|
||
|
||
/* IMPLEMENTATION BANNER */
|
||
.impl-banner {
|
||
background: linear-gradient(135deg, #eaf5ee 0%, #e8eef5 100%);
|
||
border: 2px solid var(--accent-green);
|
||
padding: 22px 26px;
|
||
margin: 24px 0 32px;
|
||
position: relative;
|
||
}
|
||
.impl-banner .kicker {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 10px;
|
||
letter-spacing: 0.25em;
|
||
text-transform: uppercase;
|
||
color: var(--accent-green);
|
||
margin-bottom: 8px;
|
||
}
|
||
.impl-banner h3 {
|
||
font-family: 'Playfair Display', serif;
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
margin-bottom: 10px;
|
||
}
|
||
.impl-banner p {
|
||
font-size: 13.5px;
|
||
color: var(--muted);
|
||
line-height: 1.6;
|
||
margin-bottom: 10px;
|
||
}
|
||
.impl-banner .banner-link {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 11px;
|
||
color: var(--accent-green);
|
||
text-decoration: none;
|
||
border-bottom: 1px solid var(--accent-green);
|
||
}
|
||
.impl-banner .banner-link:hover { background: var(--accent-green); color: white; padding: 0 4px; }
|
||
|
||
@media (max-width: 768px) {
|
||
.masthead { grid-template-columns: 1fr; text-align: center; }
|
||
.masthead-right { text-align: center; }
|
||
.overview-strip { grid-template-columns: repeat(2, 1fr); }
|
||
.procon-grid { grid-template-columns: 1fr; }
|
||
.procon-col-header.con { border-left: none; border-top: 2px solid var(--ink); }
|
||
.use-cases { grid-template-columns: 1fr; }
|
||
.signal-grid { grid-template-columns: 1fr; }
|
||
.page { padding: 0 20px 40px; }
|
||
.masthead { padding: 20px; }
|
||
.arch-diagram { flex-direction: column; }
|
||
.arch-arrow { transform: rotate(90deg); }
|
||
.upkeep-cadence { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- MASTHEAD -->
|
||
<header class="masthead">
|
||
<div class="masthead-left">
|
||
Design Artifact<br>
|
||
April 2026<br>
|
||
memex project
|
||
</div>
|
||
<div class="masthead-center">
|
||
<h1>memex</h1>
|
||
<div class="subtitle">Karpathy's Pattern — Signal & Noise</div>
|
||
</div>
|
||
<div class="masthead-right">
|
||
Source: karpathy.gist<br>
|
||
Analysis: Signal vs Noise<br>
|
||
Decision Rationale
|
||
</div>
|
||
</header>
|
||
|
||
<!-- TICKER -->
|
||
<div class="ticker">
|
||
<span class="ticker-track">
|
||
<span class="ticker-item">PERSISTENT MEMORY <span class="ticker-dot">◆</span></span>
|
||
<span class="ticker-item">RAG vs WIKI <span class="ticker-dot">◆</span></span>
|
||
<span class="ticker-item">COMPILE ONCE · QUERY FOREVER <span class="ticker-dot">◆</span></span>
|
||
<span class="ticker-item">~100 ARTICLES SWEET SPOT <span class="ticker-dot">◆</span></span>
|
||
<span class="ticker-item">KNOWLEDGE COMPOUNDS <span class="ticker-dot">◆</span></span>
|
||
<span class="ticker-item">PERSONAL SCALE ONLY <span class="ticker-dot">◆</span></span>
|
||
<span class="ticker-item">HALLUCINATIONS PERSIST <span class="ticker-dot">◆</span></span>
|
||
<span class="ticker-item">MARKDOWN IS FUTURE-PROOF <span class="ticker-dot">◆</span></span>
|
||
<span class="ticker-item">PERSISTENT MEMORY <span class="ticker-dot">◆</span></span>
|
||
<span class="ticker-item">RAG vs WIKI <span class="ticker-dot">◆</span></span>
|
||
<span class="ticker-item">COMPILE ONCE · QUERY FOREVER <span class="ticker-dot">◆</span></span>
|
||
<span class="ticker-item">~100 ARTICLES SWEET SPOT <span class="ticker-dot">◆</span></span>
|
||
<span class="ticker-item">KNOWLEDGE COMPOUNDS <span class="ticker-dot">◆</span></span>
|
||
<span class="ticker-item">PERSONAL SCALE ONLY <span class="ticker-dot">◆</span></span>
|
||
<span class="ticker-item">HALLUCINATIONS PERSIST <span class="ticker-dot">◆</span></span>
|
||
<span class="ticker-item">MARKDOWN IS FUTURE-PROOF <span class="ticker-dot">◆</span></span>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- STATS STRIP -->
|
||
<div class="overview-strip">
|
||
<div class="stat-cell">
|
||
<div class="stat-num">17M+</div>
|
||
<div class="stat-label">Views · Karpathy Tweet</div>
|
||
</div>
|
||
<div class="stat-cell">
|
||
<div class="stat-num" style="color:var(--accent-green)">~100</div>
|
||
<div class="stat-label">Articles · Sweet Spot</div>
|
||
</div>
|
||
<div class="stat-cell">
|
||
<div class="stat-num" style="color:var(--accent-amber)">400K</div>
|
||
<div class="stat-label">Words · Karpathy's Wiki</div>
|
||
</div>
|
||
<div class="stat-cell">
|
||
<div class="stat-num" style="color:var(--accent-red)">50K</div>
|
||
<div class="stat-label">Token Ceiling</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page">
|
||
|
||
<!-- CONCEPT BOX -->
|
||
<div class="concept-box">
|
||
<div class="kicker">The Core Idea</div>
|
||
<p>Instead of making the LLM <em>rediscover</em> knowledge from raw documents on every query — the RAG way — Karpathy proposes having the LLM <em>compile</em> a structured, interlinked wiki once at ingest time. Knowledge <em>accumulates</em>. The LLM maintains the wiki, not the human.</p>
|
||
</div>
|
||
|
||
<!-- IMPLEMENTATION BANNER -->
|
||
<div class="impl-banner">
|
||
<div class="kicker">★ This analysis produced memex</div>
|
||
<h3>From analysis to implementation</h3>
|
||
<p>This document was the design artifact that preceded the memex repository — a structured Signal & Noise pass over Karpathy's pattern that found seven real weaknesses and worked out concrete mitigations for each. Every automation component in memex maps directly to a mitigation identified here.</p>
|
||
<p>Read the repo: <a href="https://git.eric-turner.com/turnercodeflex/memex" class="banner-link">git.eric-turner.com/turnercodeflex/memex</a></p>
|
||
</div>
|
||
|
||
<!-- ARCHITECTURE -->
|
||
<div class="section-header">
|
||
<h2>Architecture</h2>
|
||
<span class="section-tag">Three Layers</span>
|
||
</div>
|
||
<div class="arch-diagram">
|
||
<div class="arch-node raw">
|
||
<div class="node-label" style="color:var(--accent-blue)">Layer 1</div>
|
||
<div class="node-name">raw/</div>
|
||
<div class="node-desc">PDFs, articles, web clips. Immutable. Human adds, LLM never modifies.</div>
|
||
</div>
|
||
<div class="arch-arrow">→</div>
|
||
<div class="arch-node" style="border-color:var(--ink); background:#f0f0f0">
|
||
<div class="node-label" style="color:var(--ink)">Process</div>
|
||
<div class="node-name">🤖 LLM</div>
|
||
<div class="node-desc">Reads sources. Synthesizes, links, and compiles structured pages. Runs lint checks.</div>
|
||
</div>
|
||
<div class="arch-arrow">→</div>
|
||
<div class="arch-node wiki">
|
||
<div class="node-label" style="color:var(--accent-green)">Layer 2</div>
|
||
<div class="node-name">wiki/</div>
|
||
<div class="node-desc">Compiled markdown pages. Encyclopedia-style articles with cross-references.</div>
|
||
</div>
|
||
<div class="arch-arrow">+</div>
|
||
<div class="arch-node schema">
|
||
<div class="node-label" style="color:var(--accent-amber)">Layer 3</div>
|
||
<div class="node-name">schema</div>
|
||
<div class="node-desc">CLAUDE.md / AGENTS.md. Rules that discipline the LLM's behavior as maintainer.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TABS -->
|
||
<div class="tab-row">
|
||
<button class="tab-btn active" onclick="switchTab(this, 'tab-procon')">Pros & Cons</button>
|
||
<button class="tab-btn" onclick="switchTab(this, 'tab-vs-rag')">vs RAG</button>
|
||
<button class="tab-btn" onclick="switchTab(this, 'tab-usecases')">Best / Worst Fits</button>
|
||
<button class="tab-btn" onclick="switchTab(this, 'tab-signals')">Signal Breakdown</button>
|
||
<button class="tab-btn" onclick="switchTab(this, 'tab-mitigations')">Mitigations ★</button>
|
||
</div>
|
||
|
||
<!-- TAB: PROS & CONS -->
|
||
<div id="tab-procon" class="tab-panel active">
|
||
<p style="font-size:13px;color:var(--muted);margin-bottom:16px;font-family:'JetBrains Mono',monospace;letter-spacing:0.05em;">↓ Tap any row to expand analysis</p>
|
||
<div class="procon-grid">
|
||
<div class="procon-col">
|
||
<div class="procon-col-header pro"><span class="icon">▲</span> Strengths</div>
|
||
<div class="procon-items">
|
||
<div class="procon-item pro-item" onclick="toggleItem(this)">
|
||
<div class="item-title"><span class="bullet">✓</span>Knowledge Compounds Over Time</div>
|
||
<div class="item-detail">Unlike RAG — where every query starts from scratch re-deriving connections — the LLM wiki is stateful. Each new source you add integrates into existing pages, strengthening existing connections and building new ones. The system gets more valuable with every addition, not just bigger.</div>
|
||
<span class="expand-hint">+</span>
|
||
</div>
|
||
<div class="procon-item pro-item" onclick="toggleItem(this)">
|
||
<div class="item-title"><span class="bullet">✓</span>Zero Maintenance Burden on Humans</div>
|
||
<div class="item-detail">The grunt work of knowledge management — cross-referencing, updating related pages, creating summaries, flagging contradictions — is what kills every personal wiki humans try to maintain. LLMs do this tirelessly. The human's job shrinks to: decide what to read, and what questions to ask.</div>
|
||
<span class="expand-hint">+</span>
|
||
</div>
|
||
<div class="procon-item pro-item" onclick="toggleItem(this)">
|
||
<div class="item-title"><span class="bullet">✓</span>Token-Efficient at Personal Scale</div>
|
||
<div class="item-detail">At ~100 articles, the wiki's index.md fits in context. The LLM reads the index, identifies relevant articles, and loads only those — no embedding, no vector search, no retrieval noise. This is faster and cheaper per query than a full RAG pipeline for this scale.</div>
|
||
<span class="expand-hint">+</span>
|
||
</div>
|
||
<div class="procon-item pro-item" onclick="toggleItem(this)">
|
||
<div class="item-title"><span class="bullet">✓</span>Human-Readable & Auditable</div>
|
||
<div class="item-detail">The wiki is just markdown. You can open it in any editor, read it yourself, version it in git, and inspect every claim. There's no black-box vector math. Every connection the LLM made is visible. This transparency is a genuine advantage over opaque embeddings.</div>
|
||
<span class="expand-hint">+</span>
|
||
</div>
|
||
<div class="procon-item pro-item" onclick="toggleItem(this)">
|
||
<div class="item-title"><span class="bullet">✓</span>Future-Proof & Portable</div>
|
||
<div class="item-detail">Plain markdown files work with any tool, any model, any era. No vendor lock-in. No proprietary database. When the next-gen model releases, you point it at the same folder. The data outlives the tooling.</div>
|
||
<span class="expand-hint">+</span>
|
||
</div>
|
||
<div class="procon-item pro-item" onclick="toggleItem(this)">
|
||
<div class="item-title"><span class="bullet">✓</span>Self-Healing via Lint Passes</div>
|
||
<div class="item-detail">Karpathy describes periodic "health check" passes where the LLM scans the entire wiki for contradictions, orphaned pages (no links pointing to them), and concepts referenced but not yet given their own page. The wiki actively repairs itself rather than rotting silently.</div>
|
||
<span class="expand-hint">+</span>
|
||
</div>
|
||
<div class="procon-item pro-item" onclick="toggleItem(this)">
|
||
<div class="item-title"><span class="bullet">✓</span>Path to Fine-Tuning</div>
|
||
<div class="item-detail">As the wiki matures and gets "purified" through continuous lint passes, it becomes high-quality synthetic training data. Karpathy points to the possibility of fine-tuning a smaller, efficient model directly on the wiki — so the LLM "knows" your knowledge base in its own weights, not just its context.</div>
|
||
<span class="expand-hint">+</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="procon-col">
|
||
<div class="procon-col-header con"><span class="icon">▼</span> Weaknesses</div>
|
||
<div class="procon-items">
|
||
<div class="procon-item con-item" onclick="toggleItem(this)">
|
||
<div class="item-title"><span class="bullet">✗</span>Errors Persist & Compound</div>
|
||
<div class="item-detail">This is the most serious structural flaw. With RAG, hallucinations are ephemeral — wrong answer this query, clean slate next time. With an LLM wiki, if the LLM incorrectly links two concepts at ingest time, that mistake becomes a prior that future ingest passes build upon. Persistent errors are more dangerous than ephemeral ones.</div>
|
||
<span class="expand-hint">+</span>
|
||
</div>
|
||
<div class="procon-item con-item" onclick="toggleItem(this)">
|
||
<div class="item-title"><span class="bullet">✗</span>Hard Scale Ceiling (~50K tokens)</div>
|
||
<div class="item-detail">The wiki approach stops working reliably when the index can no longer fit in the model's context window — roughly 50,000–100,000 tokens. Karpathy's own wiki is ~100 articles / ~400K words on a single topic. A mid-size company has thousands of documents; a large one has millions. The architecture simply doesn't extend to that scale.</div>
|
||
<span class="expand-hint">+</span>
|
||
</div>
|
||
<div class="procon-item con-item" onclick="toggleItem(this)">
|
||
<div class="item-title"><span class="bullet">✗</span>No Access Control or Multi-User Support</div>
|
||
<div class="item-detail">It's a folder of markdown files. There is no Role-Based Access Control, no audit logging, no concurrency handling for simultaneous writes, no permissions model. Multiple users or agents creating write conflicts is unmanaged. This is not a limitation that can be patched — it's a structural consequence of the architecture.</div>
|
||
<span class="expand-hint">+</span>
|
||
</div>
|
||
<div class="procon-item con-item" onclick="toggleItem(this)">
|
||
<div class="item-title"><span class="bullet">✗</span>Manual Cross-Checking Burden Returns</div>
|
||
<div class="item-detail">In precision-critical domains (API specs, version constraints, legal records), LLM-generated content requires human cross-checking against raw sources to catch subtle factual errors. At that point, the maintenance burden you thought you'd eliminated returns in a different form: verification overhead.</div>
|
||
<span class="expand-hint">+</span>
|
||
</div>
|
||
<div class="procon-item con-item" onclick="toggleItem(this)">
|
||
<div class="item-title"><span class="bullet">✗</span>Cognitive Outsourcing Risk</div>
|
||
<div class="item-detail">Critics argued that the bookkeeping Karpathy outsources — filing, cross-referencing, summarizing — is precisely where genuine understanding forms. By handing this to an LLM, you may end up with a comprehensive wiki you haven't internalized. You have a great reference; you may lack deep ownership of the knowledge.</div>
|
||
<span class="expand-hint">+</span>
|
||
</div>
|
||
<div class="procon-item con-item" onclick="toggleItem(this)">
|
||
<div class="item-title"><span class="bullet">✗</span>Knowledge Staleness Without Active Upkeep</div>
|
||
<div class="item-detail">Community reports show that most people who try this pattern get the folder structure right but end up with a wiki that slowly becomes unreliable or gets abandoned. The system requires consistent source ingestion and regular lint passes. If you stop feeding it, the wiki rots — its age relative to your domain's pace of change becomes a liability.</div>
|
||
<span class="expand-hint">+</span>
|
||
</div>
|
||
<div class="procon-item con-item" onclick="toggleItem(this)">
|
||
<div class="item-title"><span class="bullet">✗</span>Weaker Semantic Retrieval than RAG</div>
|
||
<div class="item-detail">Markdown wikilinks are explicit and manually-created. Vector embeddings discover semantic connections across differently-worded text that manual linking simply cannot — finding that an article titled "caching strategies" is semantically related to "performance bottlenecks" without an explicit link. At large corpora, RAG's fuzzy matching is the superior retrieval mechanism.</div>
|
||
<span class="expand-hint">+</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TAB: VS RAG -->
|
||
<div id="tab-vs-rag" class="tab-panel">
|
||
<div class="pull-quote">
|
||
RAG retrieves and forgets. A wiki accumulates and compounds.
|
||
<span class="attribution">— Design rationale for memex, April 2026</span>
|
||
</div>
|
||
<div class="scale-note">
|
||
<div class="warn-icon">⚠</div>
|
||
<div><strong>Scale matters most here.</strong> The comparison is not absolute — it is highly scale-dependent. Below ~50K tokens, the wiki wins. Above that threshold, RAG's architecture becomes necessary regardless of the storage format.</div>
|
||
</div>
|
||
<table class="compare-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Dimension</th>
|
||
<th class="col-wiki">LLM Wiki</th>
|
||
<th class="col-rag">RAG</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td class="row-label">Knowledge Accumulation</td><td class="col-wiki cell-win">✦ Compounds with each ingest</td><td class="col-rag cell-lose">Stateless — restarts every query</td></tr>
|
||
<tr><td class="row-label">Maintenance Cost</td><td class="col-wiki cell-win">✦ LLM does the filing</td><td class="col-rag cell-mid">Chunking pipelines need upkeep</td></tr>
|
||
<tr><td class="row-label">Scale Ceiling</td><td class="col-wiki cell-lose">~50–100K tokens hard limit</td><td class="col-rag cell-win">✦ Millions of documents, no ceiling</td></tr>
|
||
<tr><td class="row-label">Human Readability</td><td class="col-wiki cell-win">✦ Plain markdown, fully auditable</td><td class="col-rag cell-lose">Black-box vector space</td></tr>
|
||
<tr><td class="row-label">Semantic Retrieval</td><td class="col-wiki cell-mid">Explicit links only</td><td class="col-rag cell-win">✦ Fuzzy semantic matching</td></tr>
|
||
<tr><td class="row-label">Error Persistence</td><td class="col-wiki cell-lose">Errors compound into future pages</td><td class="col-rag cell-mid">Errors are ephemeral per query</td></tr>
|
||
<tr><td class="row-label">Multi-user / RBAC</td><td class="col-wiki cell-lose">None — flat file system</td><td class="col-rag cell-win">✦ Supported by most platforms</td></tr>
|
||
<tr><td class="row-label">Query Latency</td><td class="col-wiki cell-win">✦ Fast at personal scale</td><td class="col-rag cell-mid">Embedding search overhead</td></tr>
|
||
<tr><td class="row-label">Setup Complexity</td><td class="col-wiki cell-win">✦ Just folders & markdown</td><td class="col-rag cell-lose">Vector DB, chunking, embeddings</td></tr>
|
||
<tr><td class="row-label">Vendor Lock-in</td><td class="col-wiki cell-win">✦ Zero — any model, any editor</td><td class="col-rag cell-lose">Often tied to embedding provider</td></tr>
|
||
<tr><td class="row-label">Cross-reference Quality</td><td class="col-wiki cell-win">✦ Rich, named wikilinks</td><td class="col-rag cell-mid">Implicit via similarity score</td></tr>
|
||
<tr><td class="row-label">Fine-tuning Pathway</td><td class="col-wiki cell-win">✦ Wiki becomes training data</td><td class="col-rag cell-lose">Raw chunks are poor training data</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- TAB: USE CASES -->
|
||
<div id="tab-usecases" class="tab-panel">
|
||
<div class="use-cases">
|
||
<div class="use-case-card">
|
||
<span class="verdict-badge badge-excellent">Excellent Fit</span>
|
||
<h4>Solo Deep Research</h4>
|
||
<p>Reading papers, articles, and reports over weeks or months on a single topic. Karpathy's primary use case — his ML research wiki has ~100 articles and 400K words, all compiled without writing a line manually.</p>
|
||
<div class="fit-meter"><div class="fit-fill" style="width:95%;background:var(--accent-green)"></div></div>
|
||
</div>
|
||
<div class="use-case-card">
|
||
<span class="verdict-badge badge-excellent">Excellent Fit</span>
|
||
<h4>Personal Knowledge Base</h4>
|
||
<p>Goals, health tracking, journal entries, podcast notes — building a structured picture of yourself over time. The LLM creates concept pages for recurring themes and connects them across months or years.</p>
|
||
<div class="fit-meter"><div class="fit-fill" style="width:90%;background:var(--accent-green)"></div></div>
|
||
</div>
|
||
<div class="use-case-card">
|
||
<span class="verdict-badge badge-good">Good Fit</span>
|
||
<h4>Small Team Wiki (<500 articles)</h4>
|
||
<p>Engineering team internal docs, competitive analysis, trip planning. Works well if one person owns ingestion and the team reads via Obsidian. Breaks at concurrent writes or RBAC requirements.</p>
|
||
<div class="fit-meter"><div class="fit-fill" style="width:65%;background:#4a7a1a"></div></div>
|
||
</div>
|
||
<div class="use-case-card">
|
||
<span class="verdict-badge badge-good">Good Fit</span>
|
||
<h4>Agentic Pipeline Memory</h4>
|
||
<p>AI agent systems that need persistent memory between sessions. The wiki prevents agents from "waking up blank." Session context is compiled rather than re-derived, dramatically cutting token overhead.</p>
|
||
<div class="fit-meter"><div class="fit-fill" style="width:70%;background:#4a7a1a"></div></div>
|
||
</div>
|
||
<div class="use-case-card">
|
||
<span class="verdict-badge badge-poor">Poor Fit</span>
|
||
<h4>Mission-Critical Precision</h4>
|
||
<p>API parameter specs, version constraints, legal records, medical protocols. LLM-generated pages can silently misstate critical details. Manual cross-checking eliminates the maintenance savings that make this pattern attractive.</p>
|
||
<div class="fit-meter"><div class="fit-fill" style="width:25%;background:var(--accent-amber)"></div></div>
|
||
</div>
|
||
<div class="use-case-card">
|
||
<span class="verdict-badge badge-avoid">Avoid</span>
|
||
<h4>Enterprise Knowledge Management</h4>
|
||
<p>Millions of documents, hundreds of users, RBAC, audit trails, regulatory compliance. The flat file architecture cannot address concurrency, access control, or governance. This is a personal productivity hack, not enterprise infrastructure.</p>
|
||
<div class="fit-meter"><div class="fit-fill" style="width:8%;background:var(--accent-red)"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TAB: SIGNALS -->
|
||
<div id="tab-signals" class="tab-panel">
|
||
<p style="font-size:13px;color:var(--muted);margin-bottom:20px;">A breakdown of where the pattern generates real signal vs. where the noise grows louder.</p>
|
||
<div class="signal-grid">
|
||
<div class="signal-card">
|
||
<div class="signal-category">Signal</div>
|
||
<h4>The Compile-Time Insight</h4>
|
||
<p>Moving synthesis from query-time (RAG) to ingest-time (wiki) is a genuinely novel architectural choice with real benefits for accumulation. This is the core innovation and it holds up to scrutiny.</p>
|
||
<div class="signal-bar">
|
||
<div class="signal-bar-track"><div class="signal-bar-fill" style="width:90%;background:var(--accent-green)"></div></div>
|
||
<div class="signal-bar-label" style="color:var(--accent-green)">Strong</div>
|
||
</div>
|
||
</div>
|
||
<div class="signal-card">
|
||
<div class="signal-category">Signal</div>
|
||
<h4>LLM as Librarian</h4>
|
||
<p>Offloading the maintenance bottleneck — the work that kills all human-maintained wikis — to an LLM is elegant and correct. The pattern solves a real problem people actually have.</p>
|
||
<div class="signal-bar">
|
||
<div class="signal-bar-track"><div class="signal-bar-fill" style="width:85%;background:var(--accent-green)"></div></div>
|
||
<div class="signal-bar-label" style="color:var(--accent-green)">Strong</div>
|
||
</div>
|
||
</div>
|
||
<div class="signal-card">
|
||
<div class="signal-category">Noise</div>
|
||
<h4>"RAG is Dead"</h4>
|
||
<p>Community hyperbole. RAG and the wiki pattern solve different problems at different scales. The wiki pattern is a personal productivity tool, not a replacement for enterprise-grade retrieval infrastructure.</p>
|
||
<div class="signal-bar">
|
||
<div class="signal-bar-track"><div class="signal-bar-fill" style="width:80%;background:var(--accent-red)"></div></div>
|
||
<div class="signal-bar-label" style="color:var(--accent-red)">High Noise</div>
|
||
</div>
|
||
</div>
|
||
<div class="signal-card">
|
||
<div class="signal-category">Noise</div>
|
||
<h4>Error Amplification Risk</h4>
|
||
<p>Real and underweighted by enthusiasts. The persistent-error problem is structural — not a bug to fix with better prompting. It's a genuine trade-off the pattern makes, and it's most dangerous in precision-critical domains.</p>
|
||
<div class="signal-bar">
|
||
<div class="signal-bar-track"><div class="signal-bar-fill" style="width:65%;background:var(--accent-amber)"></div></div>
|
||
<div class="signal-bar-label" style="color:var(--accent-amber)">Real Risk</div>
|
||
</div>
|
||
</div>
|
||
<div class="signal-card">
|
||
<div class="signal-category">Signal</div>
|
||
<h4>The Idea File Paradigm</h4>
|
||
<p>Karpathy's framing of sharing an "idea file" vs. a code repo — letting each person's agent instantiate a custom version — is genuinely forward-thinking about how patterns propagate in the agent era.</p>
|
||
<div class="signal-bar">
|
||
<div class="signal-bar-track"><div class="signal-bar-fill" style="width:75%;background:var(--accent-green)"></div></div>
|
||
<div class="signal-bar-label" style="color:var(--accent-green)">Solid</div>
|
||
</div>
|
||
</div>
|
||
<div class="signal-card">
|
||
<div class="signal-category">Noise</div>
|
||
<h4>"It'll Replace Enterprise RAG"</h4>
|
||
<p>Karpathy explicitly scoped this to individual researchers. The limitations (no RBAC, no concurrency, ~50K token ceiling) are not bugs — they are consequences of the design assumptions. Enterprise use requires entirely different infrastructure.</p>
|
||
<div class="signal-bar">
|
||
<div class="signal-bar-track"><div class="signal-bar-fill" style="width:88%;background:var(--accent-red)"></div></div>
|
||
<div class="signal-bar-label" style="color:var(--accent-red)">Pure Noise</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pull-quote">
|
||
The schema file is a wish, not a discipline. The lack of an actual security model structurally makes this a pattern with a dedicated output directory and no guardrails.
|
||
<span class="attribution">— Community critique, April 2026</span>
|
||
</div>
|
||
|
||
<div class="pull-quote" style="border-left-color:var(--accent-green)">
|
||
The bottleneck for personal knowledge bases was never the reading. It was the boring maintenance work nobody wanted to do. LLMs eliminate that bottleneck.
|
||
<span class="attribution">— Design rationale for memex</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TAB: MITIGATIONS -->
|
||
<div id="tab-mitigations" class="tab-panel">
|
||
|
||
<div class="mitigation-intro">
|
||
<strong>These are the real engineering answers.</strong> For each known limitation, concrete mitigations exist. Some from Karpathy's own gist, others from production implementations and community analysis. Every mitigation below maps to a component in the memex repository. Click any row to expand the full approach. The Active Upkeep section is the one that matters most.
|
||
</div>
|
||
|
||
<!-- SCALING -->
|
||
<div class="mitigation-category">
|
||
<div class="mitigation-category-header">
|
||
<div class="cat-icon" style="background:#e8eef5;font-size:16px">📈</div>
|
||
<h3>Scaling Past the Token Ceiling</h3>
|
||
<span class="severity-badge sev-high">High Priority</span>
|
||
</div>
|
||
<div class="mitigation-steps">
|
||
|
||
<div class="mitigation-step" onclick="toggleStep(this)">
|
||
<div class="mitigation-step-header">
|
||
<span class="step-num">01</span>
|
||
<span class="step-title">Add qmd as your search layer at 50–100+ articles</span>
|
||
<span class="step-tool-tag">qmd · CLI + MCP</span>
|
||
<span class="step-arrow">▶</span>
|
||
</div>
|
||
<div class="mitigation-step-body">
|
||
<p>The index.md breaks around 100–150 articles when it stops fitting cleanly in context. The fix is <strong>qmd</strong> — built by Tobi Lütke (Shopify CEO) and explicitly recommended by Karpathy himself. It's a local, on-device search engine for markdown files using hybrid BM25 + vector search with LLM re-ranking. No API calls, no data leaves your machine.</p>
|
||
<p>memex uses qmd from day one with <strong>three collections</strong>: <span class="code-pill">wiki</span> (live), <span class="code-pill">wiki-archive</span> (excluded by default), and <span class="code-pill">wiki-conversations</span> (mined sessions). Wing + room structural filtering narrows retrieval before search runs.</p>
|
||
<div class="tip-box"><strong>In memex:</strong> Configured at install time via docs/SETUP.md. The agent picks the right collection per query via guidance in the example CLAUDE.md files.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mitigation-step" onclick="toggleStep(this)">
|
||
<div class="mitigation-step-header">
|
||
<span class="step-num">02</span>
|
||
<span class="step-title">Shard the index — one sub-index per topic domain</span>
|
||
<span class="step-tool-tag">Schema · CLAUDE.md</span>
|
||
<span class="step-arrow">▶</span>
|
||
</div>
|
||
<div class="mitigation-step-body">
|
||
<p>Before reaching for qmd, a simpler scaling step is to split index.md into domain-specific sub-indexes: <span class="code-pill">wiki/patterns/index.md</span>, <span class="code-pill">wiki/decisions/index.md</span>, etc. A root index.md points to sub-indexes, keeping any single file within comfortable context window bounds.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mitigation-step" onclick="toggleStep(this)">
|
||
<div class="mitigation-step-header">
|
||
<span class="step-num">03</span>
|
||
<span class="step-title">Consolidation tiers — promote stable knowledge up the stack</span>
|
||
<span class="step-tool-tag">memex · confidence field</span>
|
||
<span class="step-arrow">▶</span>
|
||
</div>
|
||
<div class="mitigation-step-body">
|
||
<p>Structure knowledge in tiers by confidence and stability. Low-confidence claims live in draft pages. After multi-source confirmation, the LLM promotes them. Core principles graduate to a high-confidence tier that rarely changes.</p>
|
||
<p><strong>In memex:</strong> Implemented via the <span class="code-pill">confidence</span> frontmatter field with time-based decay (6/9/12 month thresholds). Pages age out naturally as the automation re-promotes or archives them.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CROSS-CHECK / ERROR PERSISTENCE -->
|
||
<div class="mitigation-category">
|
||
<div class="mitigation-category-header">
|
||
<div class="cat-icon" style="background:#f5e8e8;font-size:16px">⚠️</div>
|
||
<h3>Cross-Check & Error Persistence</h3>
|
||
<span class="severity-badge sev-high">High Priority</span>
|
||
</div>
|
||
<div class="mitigation-steps">
|
||
|
||
<div class="mitigation-step" onclick="toggleStep(this)">
|
||
<div class="mitigation-step-header">
|
||
<span class="step-num">01</span>
|
||
<span class="step-title">Confidence scoring — every claim carries a decay score</span>
|
||
<span class="step-tool-tag">Frontmatter · Schema</span>
|
||
<span class="step-arrow">▶</span>
|
||
</div>
|
||
<div class="mitigation-step-body">
|
||
<p>Make uncertainty explicit. Every factual claim carries metadata: confidence level, last verified date, source count. Confidence decays with time and strengthens with reinforcement from new sources.</p>
|
||
<p><strong>In memex:</strong> Implemented with <span class="code-pill">confidence: high|medium|low</span> + <span class="code-pill">last_verified</span> + <span class="code-pill">sources:</span> fields. The hygiene script auto-decays stale pages and flags them for re-verification.</p>
|
||
<div class="tip-box"><strong>Key benefit:</strong> Errors become visible, decaying warnings instead of permanent silent landmines.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mitigation-step" onclick="toggleStep(this)">
|
||
<div class="mitigation-step-header">
|
||
<span class="step-num">02</span>
|
||
<span class="step-title">Typed supersession — new info explicitly replaces old claims</span>
|
||
<span class="step-tool-tag">archive/ · log.md</span>
|
||
<span class="step-arrow">▶</span>
|
||
</div>
|
||
<div class="mitigation-step-body">
|
||
<p>When new information contradicts an existing claim, the wrong pattern is leaving the old claim with an appended note. The right pattern: the new claim explicitly <strong>supersedes</strong> the old one, which moves to archive with a link to its replacement.</p>
|
||
<p><strong>In memex:</strong> Pages with <span class="code-pill">status: Superseded by ...</span> are auto-archived. The archive retains the full history with <span class="code-pill">archived_date</span>, <span class="code-pill">archived_reason</span>, and <span class="code-pill">original_path</span> fields.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ACTIVE UPKEEP — FEATURED -->
|
||
<div class="upkeep-system">
|
||
<div class="kicker">★ Biggest Mitigation Challenge</div>
|
||
<h3>Active Upkeep — The Real Failure Mode</h3>
|
||
<p>Community analysis of 120+ comments on Karpathy's gist converged on one clear finding: most people who try this pattern get the folder structure right and still end up with a wiki that slowly becomes unreliable, redundant, or abandoned. The difference between a wiki that compounds and one that quietly rots comes down to operational discipline — not technical setup. This is why memex's automation layer exists.</p>
|
||
<div class="upkeep-cadence">
|
||
<div class="cadence-cell">
|
||
<div class="freq">Daily</div>
|
||
<div class="cadence-title">Feed the Machine</div>
|
||
<ul>
|
||
<li>Extract new Claude Code sessions (hourly cron)</li>
|
||
<li>Summarize + index (daily 2am)</li>
|
||
<li>Harvest URLs + quick hygiene (daily 3am)</li>
|
||
</ul>
|
||
</div>
|
||
<div class="cadence-cell">
|
||
<div class="freq">Weekly</div>
|
||
<div class="cadence-title">Deep Pass</div>
|
||
<ul>
|
||
<li>Full hygiene with LLM checks (Sun 4am)</li>
|
||
<li>Duplicate detection (auto-merge)</li>
|
||
<li>Contradiction report (human review)</li>
|
||
<li>Technology lifecycle checks</li>
|
||
</ul>
|
||
</div>
|
||
<div class="cadence-cell">
|
||
<div class="freq">Continuous</div>
|
||
<div class="cadence-title">Decay & Archive</div>
|
||
<ul>
|
||
<li>last_verified refreshes from new sessions</li>
|
||
<li>Unused pages decay 6mo → 9mo → 12mo</li>
|
||
<li>Stale pages auto-archive</li>
|
||
<li>Archive auto-restores on reference</li>
|
||
</ul>
|
||
</div>
|
||
<div class="cadence-cell">
|
||
<div class="freq">Review</div>
|
||
<div class="cadence-title">Human in Loop</div>
|
||
<ul>
|
||
<li>Staging pipeline for automated content</li>
|
||
<li>wiki-staging.py --review workflow</li>
|
||
<li>Hygiene reports split fixed vs needs-review</li>
|
||
<li>Promote / reject / defer</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /tab-mitigations -->
|
||
|
||
</div><!-- /page -->
|
||
|
||
<footer class="page-footer">
|
||
<span>Analysis: April 2026</span>
|
||
<span><a href="https://git.eric-turner.com/turnercodeflex/memex">git.eric-turner.com/turnercodeflex/memex</a></span>
|
||
<span>Design → Implementation</span>
|
||
</footer>
|
||
|
||
<script>
|
||
function toggleItem(el) {
|
||
const wasActive = el.classList.contains('active');
|
||
const siblings = el.parentElement.querySelectorAll('.procon-item');
|
||
siblings.forEach(s => s.classList.remove('active'));
|
||
if (!wasActive) el.classList.add('active');
|
||
}
|
||
|
||
function toggleStep(el) {
|
||
el.classList.toggle('open');
|
||
}
|
||
|
||
function switchTab(btn, panelId) {
|
||
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
||
document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
document.getElementById(panelId).classList.add('active');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|