memorystand / index.html
tomyimkc's picture
Sync exact MemoryStand judge demo bundle
8170d59 verified
Raw History Blame Contribute Delete
51.4 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%230a121a'/%3E%3Cpath d='M17 47V17h8l7 14 7-14h8v30h-8V31l-7 13-7-13v16z' fill='%236de0a6'/%3E%3C/svg%3E"> <title>MemoryStand — memory that must prove it worked</title> <style> :root { --bg: #0a0e14; --panel: #111923; --panel-2: #0b121a; --panel-3: #172231; --border: #263345; --border-light: #34445a; --text: #f4f7fb; --text-dim: #aab5c4; --text-faint: #748196; --accent: #64b5ff; --accent-dim: #173b59; --green: #35d488; --green-dim: #123322; --amber: #f5b93d; --amber-dim: #3a2e0f; --red: #ff5d6a; --red-dim: #3a1420; --purple: #b28dff; --purple-dim: #241a3a; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --radius: 16px; --shadow: 0 24px 70px rgba(0, 0, 0, 0.24); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.45; } body { min-height: 100vh; background: radial-gradient(circle at 12% -8%, rgba(77, 163, 255, 0.18), transparent 34rem), radial-gradient(circle at 88% 6%, rgba(53, 212, 136, 0.10), transparent 28rem), var(--bg); } a { color: var(--accent); text-underline-offset: 3px; } code, .mono { font-family: var(--mono); } /* ---------- topbar ---------- */ header.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; min-height: 74px; padding: 14px clamp(20px, 4vw, 64px); border-bottom: 1px solid var(--border); background: rgba(8, 13, 20, 0.88); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 20; } .brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; } .brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(145deg, var(--accent), #2a78ff); color: #03111e; font-weight: 900; letter-spacing: -1px; box-shadow: 0 10px 26px rgba(77, 163, 255, 0.25); } .brand-copy { display: flex; flex-direction: column; gap: 1px; } .brand h1 { margin: 0; font-size: 20px; letter-spacing: -0.2px; } .brand p { margin: 0; font-size: 11px; color: var(--text-faint); } nav.topnav { display: flex; align-items: center; gap: 18px; } nav.topnav a { color: var(--text-dim); font-size: 13px; font-weight: 650; text-decoration: none; } nav.topnav a:hover { color: var(--text); } .topbar-actions { display: flex; align-items: center; gap: 10px; } .field-inline { display: flex; flex-direction: column; gap: 3px; min-width: 220px; } .field-inline label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); } .field-inline input { font-family: var(--mono); font-size: 13px; } .status-pill { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-light); background: var(--panel); font-size: 13px; white-space: nowrap; } .status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-faint); box-shadow: 0 0 0 3px rgba(255,255,255,0.03); flex: none; } .status-dot.ok { background: var(--green); box-shadow: 0 0 0 3px var(--green-dim); } .status-dot.down { background: var(--red); box-shadow: 0 0 0 3px var(--red-dim); } .status-pill .api-base { color: var(--text-dim); font-family: var(--mono); font-size: 12px; } .eyebrow { margin: 0; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr); gap: clamp(30px, 6vw, 86px); align-items: center; max-width: 1420px; min-height: 620px; margin: 0 auto; padding: clamp(64px, 8vw, 118px) clamp(22px, 4vw, 60px) 76px; } .hero::before { content: ""; position: absolute; inset: auto -12% -35% 35%; height: 520px; background: radial-gradient(circle, rgba(77, 163, 255, 0.15), transparent 66%); pointer-events: none; } .hero-copy { position: relative; z-index: 1; } .hero h2 { max-width: 850px; margin: 20px 0 24px; font-size: clamp(50px, 6.6vw, 88px); line-height: 0.98; letter-spacing: -0.055em; } .hero-lede { max-width: 670px; margin: 0; color: var(--text-dim); font-size: clamp(18px, 2vw, 23px); line-height: 1.55; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 34px; } .hero-note { display: flex; align-items: center; gap: 9px; margin-top: 20px; color: var(--text-faint); font-size: 13px; } .hero-note .status-dot { width: 8px; height: 8px; } .hero-note.degraded { color: var(--red); } .causal-card { position: relative; z-index: 1; padding: 28px; border: 1px solid var(--border-light); border-radius: 24px; background: linear-gradient(145deg, rgba(23, 34, 49, 0.96), rgba(9, 15, 23, 0.96)); box-shadow: var(--shadow); } .causal-card h3 { margin: 10px 0 7px; font-size: 25px; letter-spacing: -0.02em; } .causal-card > p { margin: 0; color: var(--text-dim); } .causal-flow { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; align-items: stretch; gap: 8px; margin-top: 24px; } .causal-node { min-width: 0; padding: 18px 12px; border: 1px solid var(--border-light); border-radius: 12px; background: rgba(5, 10, 16, 0.68); text-align: center; } .causal-node strong { display: block; font-size: 14px; } .causal-node span { display: block; margin-top: 6px; color: var(--text-faint); font-size: 11px; } .causal-node.alert { border-color: rgba(245, 185, 61, 0.58); } .causal-node.fail { border-color: rgba(255, 93, 106, 0.66); } .causal-arrow { display: grid; place-items: center; color: var(--text-faint); font-size: 18px; } .causal-verdict { margin-top: 22px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255, 93, 106, 0.48); background: rgba(58, 20, 32, 0.42); color: #ffdce0; font-weight: 750; text-align: center; } .causal-disclosure { margin-top: 12px !important; color: var(--text-faint) !important; font-size: 11px; text-align: center; } .section-shell { max-width: 1420px; margin: 0 auto; padding: 88px clamp(22px, 4vw, 60px); } .section-shell.compact { padding-top: 58px; padding-bottom: 58px; } .section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; } .section-head h2 { max-width: 820px; margin: 10px 0 0; font-size: clamp(34px, 4vw, 54px); line-height: 1.05; letter-spacing: -0.04em; } .section-head p { max-width: 520px; margin: 0; color: var(--text-dim); font-size: 16px; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .step-card { position: relative; padding: 26px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(180deg, rgba(19, 28, 40, 0.95), rgba(13, 19, 27, 0.95)); } .step-card.active { border-color: rgba(77, 163, 255, 0.6); } .step-index { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-dim); color: var(--accent); font-family: var(--mono); font-weight: 850; } .step-card h3 { margin: 18px 0 8px; font-size: 21px; } .step-card p { margin: 0; color: var(--text-dim); font-size: 14px; } .step-result { margin-top: 18px; color: var(--green); font-size: 13px; font-weight: 750; } .judge-stage { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); gap: 20px; align-items: start; } .guided-card { overflow: hidden; border: 1px solid var(--border-light); border-radius: 22px; background: var(--panel); box-shadow: var(--shadow); } .guided-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 26px; border-bottom: 1px solid var(--border); background: var(--panel-2); } .guided-head h3 { margin: 0; font-size: 22px; } .guided-head p { margin: 4px 0 0; color: var(--text-dim); font-size: 13px; } .guided-body { padding: 26px; } .guided-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; } .summary-stat { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--panel-2); } .summary-stat span { display: block; color: var(--text-faint); font-size: 10px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; } .summary-stat strong { display: block; margin-top: 6px; color: var(--text); font-size: 17px; } .guided-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .guided-controls p { flex: 1 1 320px; margin: 0; color: var(--text-dim); font-size: 13px; } .guide-aside { display: flex; flex-direction: column; gap: 16px; } .guide-note { padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); } .guide-note h3 { margin: 0 0 8px; font-size: 17px; } .guide-note p { margin: 0; color: var(--text-dim); font-size: 13px; } .guide-note ul { margin: 12px 0 0; padding-left: 18px; color: var(--text-dim); font-size: 13px; } .guide-note li + li { margin-top: 7px; } .trust-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .trust-card { padding: 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); } .trust-card h3 { margin: 12px 0 7px; font-size: 17px; } .trust-card p { margin: 0; color: var(--text-dim); font-size: 13px; } .architecture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .architecture-card { padding: 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); } .architecture-card .icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-dim); color: var(--accent); font-family: var(--mono); font-weight: 900; } .architecture-card h3 { margin: 18px 0 8px; font-size: 20px; } .architecture-card p { margin: 0; color: var(--text-dim); font-size: 14px; } details.advanced { max-width: 1420px; margin: 0 auto 90px; border: 1px solid var(--border); border-radius: 18px; background: rgba(13, 19, 27, 0.78); } details.advanced > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; cursor: pointer; color: var(--text); font-weight: 750; list-style: none; } details.advanced > summary::-webkit-details-marker { display: none; } details.advanced > summary span { color: var(--text-faint); font-size: 12px; font-weight: 500; } .advanced-inner { border-top: 1px solid var(--border); } .connection-settings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 22px 26px 0; } /* ---------- seeded-demo preview strip ---------- */ section.preview-strip { margin: 22px 26px 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 22px; display: flex; flex-direction: column; gap: 12px; } .preview-strip-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; } .preview-strip-head h2 { margin: 0 0 4px; font-size: 15px; } .preview-strip-head p { margin: 0; font-size: 13px; color: var(--text-dim); max-width: 70ch; } .preview-strip-result { font-size: 13px; } .preview-strip-result .memory-row { margin-bottom: 6px; } .preview-strip-result .preview-summary { margin: 0 0 8px; color: var(--text-dim); } /* ---------- layout ---------- */ main.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 22px 26px 32px; margin: 0 auto; } @media (max-width: 1100px) { main.grid { grid-template-columns: 1fr; } } section.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; min-height: 0; } .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .panel-head h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 10px; } .panel-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: var(--accent-dim); color: var(--accent); font-size: 12px; font-weight: 700; } .panel-sub { margin: 0; font-size: 13px; color: var(--text-dim); max-width: 60ch; } form.panel-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; } form.panel-form .span2 { grid-column: 1 / -1; } .field { display: flex; flex-direction: column; gap: 4px; } .field label { font-size: 12px; color: var(--text-dim); } .field .hint { font-size: 11px; color: var(--text-faint); } input[type="text"], input[type="number"], select, textarea { background: var(--panel-2); border: 1px solid var(--border-light); border-radius: 6px; color: var(--text); padding: 8px 10px; font-size: 14px; font-family: var(--sans); width: 100%; } textarea { resize: vertical; min-height: 46px; font-family: var(--sans); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .checkbox-row { display: flex; align-items: center; gap: 8px; } .checkbox-row input { width: auto; } .checkbox-row label { font-size: 13px; color: var(--text); } button.primary, a.primary { background: var(--accent); color: #061019; border: none; border-radius: 9px; padding: 12px 18px; font-size: 14px; font-weight: 700; cursor: pointer; letter-spacing: 0.01em; } button.primary:hover, a.primary:hover { filter: brightness(1.08); } button.primary:focus-visible, button.ghost:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid rgba(77, 163, 255, 0.45); outline-offset: 3px; } button.primary:disabled { opacity: 0.55; cursor: default; } button.ghost, a.ghost { background: transparent; color: var(--accent); border: 1px solid var(--border-light); border-radius: 9px; padding: 10px 14px; font-size: 13px; cursor: pointer; } button.ghost:hover, a.ghost:hover { border-color: var(--accent); } a.button-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } a.button-link.primary { color: #061019; } a.button-link.ghost { color: var(--accent); } .result-area { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 2px; display: flex; flex-direction: column; gap: 12px; min-height: 40px; } #guidedResult.result-area { min-height: 180px; border-top: 0; padding-top: 0; } .guided-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .guided-memory { padding: 18px; border: 1px solid var(--border-light); border-radius: 14px; background: var(--panel-2); } .guided-memory.stronger { border-color: rgba(53, 212, 136, 0.62); } .guided-memory .guided-memory-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .guided-memory h4 { margin: 14px 0 7px; font-size: 20px; } .guided-memory p { margin: 0; color: var(--text-dim); font-size: 13px; } .guided-memory .distance { color: var(--text-faint); font-family: var(--mono); font-size: 11px; } .guided-verdict { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 20px; border: 1px solid rgba(53, 212, 136, 0.58); border-radius: 14px; background: linear-gradient(135deg, rgba(18, 51, 34, 0.66), rgba(10, 18, 26, 0.96)); } .guided-verdict.unexpected { border-color: rgba(245, 185, 61, 0.66); background: linear-gradient(135deg, rgba(58, 46, 15, 0.58), rgba(10, 18, 26, 0.96)); } .guided-verdict h4 { margin: 0; font-size: 24px; } .guided-verdict p { margin: 7px 0 0; color: var(--text-dim); font-size: 13px; } .guided-metric { min-width: 122px; padding: 12px 15px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; background: rgba(3, 7, 12, 0.5); text-align: center; } .guided-metric span { display: block; color: var(--text-faint); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; } .guided-metric strong { display: block; margin-top: 5px; color: var(--green); font-family: var(--mono); font-size: 28px; } .guided-receipt { display: grid; gap: 12px; } .receipt-line { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--border); } .receipt-line:last-child { border-bottom: 0; } .receipt-line span { color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; } .receipt-line strong { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; } .placeholder { color: var(--text-faint); font-size: 13px; } .error-banner { background: var(--red-dim); border: 1px solid var(--red); color: #ffd7db; border-radius: 6px; padding: 10px 12px; font-size: 13px; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .badge.green { background: var(--green-dim); color: var(--green); } .badge.amber { background: var(--amber-dim); color: var(--amber); } .badge.red { background: var(--red-dim); color: var(--red); } .badge.purple { background: var(--purple-dim); color: var(--purple); } .badge.gray { background: var(--panel-2); color: var(--text-dim); border: 1px solid var(--border-light); } .verdict-hero { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 8px; border: 1px solid var(--border-light); background: var(--panel-2); } .verdict-hero .badge { font-size: 15px; padding: 8px 16px; } .verdict-hero .verdict-id { font-family: var(--mono); font-size: 12px; color: var(--text-dim); } ul.reason-list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text); } ul.reason-list li { margin-bottom: 4px; } .memory-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: 8px; background: var(--panel-2); } .memory-row .memory-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; } .memory-row .memory-id { font-family: var(--mono); color: var(--text-dim); } .memory-row .memory-content { font-size: 13px; color: var(--text); } .memory-row .memory-attr { font-size: 12px; color: var(--text-faint); font-family: var(--mono); } .memory-row .memory-rank { font-family: var(--mono); font-size: 11px; color: var(--text-faint); min-width: 20px; } .memory-row.chosen { border-color: var(--green); } .kv-line { font-size: 13px; color: var(--text-dim); } .kv-line b { color: var(--text); font-weight: 600; } /* ---------- panel 3: MemoryStand / model-calls hero ---------- */ .model-calls-hero { text-align: center; padding: 22px 10px; border-radius: 10px; border: 1px solid var(--border-light); background: var(--panel-2); } .model-calls-hero .mc-label { font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; } .model-calls-hero .mc-number { font-size: 56px; font-weight: 800; line-height: 1; font-family: var(--mono); } .model-calls-hero .mc-number.zero { color: var(--green); } .model-calls-hero .mc-number.nonzero { color: var(--red); } .model-calls-hero .mc-note { margin: 8px 0 0; font-size: 12px; color: var(--text-dim); max-width: 48ch; margin-left: auto; margin-right: auto; } /* ---------- panel 3: trust ladder explainer ---------- */ .trust-ladder { border: 1px solid var(--border-light); border-radius: 8px; padding: 14px 16px; background: var(--panel-2); display: flex; flex-direction: column; gap: 10px; } .trust-ladder h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); } .trust-ladder-rungs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .trust-ladder-rungs .rung { display: flex; flex-direction: column; gap: 6px; } .trust-ladder-rungs .rung p { margin: 0; font-size: 12px; color: var(--text-dim); } .trust-ladder-note { margin: 4px 0 0; font-size: 12px; color: var(--text-faint); border-top: 1px solid var(--border); padding-top: 8px; } @media (max-width: 720px) { .trust-ladder-rungs { grid-template-columns: 1fr 1fr; } } /* ---------- panel 3: resulting trust tier + verification ---------- */ .verification-block { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--border-light); background: var(--panel-2); } .verification-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .verification-row .verification-explain { margin: 0; font-size: 13px; color: var(--text-dim); flex: 1 1 260px; } .verification-status-line { margin: 0; font-size: 13px; color: var(--text-dim); } .verification-status-line b { color: var(--text); font-weight: 600; } .observed-claimed { display: flex; gap: 14px; } .observed-claimed .oc-item { flex: 1; background: var(--panel); border: 1px solid var(--border-light); border-radius: 8px; padding: 10px 14px; text-align: center; } .observed-claimed.mismatch .oc-item { border-color: var(--red); } .observed-claimed.match .oc-item { border-color: var(--green); } .observed-claimed .oc-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 4px; } .observed-claimed .oc-value { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--text); } /* ---------- panel 3: deliberate refusal (HTTP 400, gate working as designed) ---------- */ /* Deliberately NOT .error-banner styling -- a refusal here is the feature succeeding, not a broken request, so it gets its own green-bordered treatment instead of a flat red banner. */ .refusal-banner { border: 1px solid var(--green); background: var(--panel-2); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .refusal-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--text); } .refusal-explain { margin: 0; font-size: 13px; color: var(--text-dim); } .refusal-detail { margin: 0; font-size: 13px; color: var(--text); font-family: var(--mono); background: var(--panel); border: 1px solid var(--border-light); border-radius: 6px; padding: 8px 10px; } /* ---------- panel 1: closer-memory-overruled-by-trust callout ---------- */ /* Same visual language as .refusal-banner below (a green border marks the feature proving itself, not an error) -- this is the single most persuasive moment this dashboard can show: a nearer memory losing to a more trusted one, zero model calls. */ .overrule-banner { border: 1px solid var(--green); background: var(--panel-2); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .overrule-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--text); } .overrule-explain { margin: 0; font-size: 13px; color: var(--text-dim); } .tier-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .tier-col h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; } .tier-col.promoted h3 { color: var(--green); } .tier-col.demoted h3 { color: var(--red); } .tier-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .tier-col li { font-family: var(--mono); font-size: 12px; background: var(--panel-2); border: 1px solid var(--border-light); border-radius: 6px; padding: 6px 8px; } .tier-empty { font-size: 12px; color: var(--text-faint); } /* ---------- panel 4: cross-examine ---------- */ .diff-columns { display: grid; grid-template-columns: 1fr; gap: 10px; } .diff-row { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border-light); background: var(--panel-2); } .diff-row.added { border-color: rgba(53,212,136,0.35); } .diff-row.removed { border-color: rgba(255,93,106,0.35); } .diff-row.changed { border-color: rgba(245,185,61,0.35); } .diff-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 0; } .diff-tag.added { color: var(--green); } .diff-tag.removed { color: var(--red); } .diff-tag.changed { color: var(--amber); } .diff-body { font-size: 13px; } .diff-body .memory-id { font-family: var(--mono); font-size: 11px; color: var(--text-faint); } details.raw-json { font-size: 12px; } details.raw-json summary { cursor: pointer; color: var(--text-dim); } details.raw-json pre { background: var(--panel-2); border: 1px solid var(--border-light); border-radius: 6px; padding: 10px; overflow: auto; max-height: 260px; font-size: 11.5px; margin: 8px 0 0; } footer { padding: 32px 28px 54px; color: var(--text-faint); font-size: 12px; text-align: center; border-top: 1px solid var(--border); background: rgba(7, 11, 17, 0.76); } .spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--border-light); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 1080px) { .hero { grid-template-columns: 1fr; min-height: 0; } .hero-copy { max-width: 880px; } .causal-card { max-width: 760px; } .judge-stage { grid-template-columns: 1fr; } .guide-aside { display: grid; grid-template-columns: 1fr 1fr; } .trust-cards { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { header.topbar { position: relative; padding: 13px 18px; } .brand p, nav.topnav { display: none; } .status-pill .api-base { display: none; } .hero { padding-top: 60px; padding-bottom: 54px; } .hero h2 { font-size: clamp(48px, 15vw, 66px); } .causal-card { padding: 22px 18px; } .causal-flow { grid-template-columns: 1fr; } .causal-arrow { transform: rotate(90deg); } .section-shell { padding-top: 64px; padding-bottom: 64px; } .section-head { align-items: start; flex-direction: column; } .steps, .architecture-grid, .trust-cards, .guide-aside { grid-template-columns: 1fr; } .guided-summary { grid-template-columns: 1fr; } .guided-compare { grid-template-columns: 1fr; } .guided-verdict { grid-template-columns: 1fr; } .receipt-line { grid-template-columns: 1fr; gap: 5px; } .connection-settings { grid-template-columns: 1fr; } main.grid { grid-template-columns: 1fr; padding: 18px; } section.preview-strip { margin: 18px; } form.panel-form { grid-template-columns: 1fr; } form.panel-form .span2 { grid-column: auto; } .tier-columns { grid-template-columns: 1fr; } } </style> </head> <body> <header class="topbar"> <a class="brand" href="#top" aria-label="MemoryStand home"> <span class="brand-mark" aria-hidden="true">M</span> <span class="brand-copy"> <h1>MemoryStand</h1> <p>Evidence-gated memory for AI agents</p> </span> </a> <nav class="topnav" aria-label="Primary navigation"> <a href="#guided-demo">Guided demo</a> <a href="#trust">Trust ladder</a> <a href="#architecture">How it works</a> <a href="https://github.com/tomyimkc/memorystand" target="_blank" rel="noreferrer">GitHub</a> </nav> <div class="topbar-actions"> <div class="status-pill" id="statusPill" title="Checked on page load and after every request"> <span class="status-dot" id="statusDot"></span> <span id="statusText">checking…</span> <span class="api-base" id="apiBaseLabel"></span> </div> </div> </header> <main id="top"> <section class="hero" aria-labelledby="hero-title"> <div class="hero-copy"> <p class="eyebrow">CockroachDB AI Hackathon candidate</p> <h2 id="hero-title">Memory that must prove it worked.</h2> <p class="hero-lede"> MemoryStand stops an AI agent from turning a lucky coincidence into permanent authority. A past fix can guide action only after outside evidence supports it. </p> <div class="hero-actions"> <a class="primary button-link" href="#guided-demo">Try the guided demo</a> <a class="ghost button-link" href="https://github.com/tomyimkc/memorystand" target="_blank" rel="noreferrer">Read the source</a> </div> <p class="hero-note" id="heroStatus" aria-live="polite"> <span class="status-dot" id="heroStatusDot" aria-hidden="true"></span> <span id="heroStatusText">Checking the live CockroachDB-backed demo…</span> </p> </div> <aside class="causal-card" aria-label="Why a service restart is not proof"> <p class="eyebrow">The failure MemoryStand prevents</p> <h3>Alert stopped ≠ restart worked</h3> <p>Timing is correlation. The outcome metric still has to move.</p> <div class="causal-flow" aria-label="Restart, alert quiet, but latency stayed flat"> <div class="causal-node"><strong>Restart</strong><span>service restarted</span></div> <div class="causal-arrow" aria-hidden="true">→</div> <div class="causal-node alert"><strong>Alert quiet</strong><span>symptom disappeared</span></div> <div class="causal-arrow" aria-hidden="true">→</div> <div class="causal-node fail"><strong>Latency flat</strong><span>223 ms → 220 ms</span></div> </div> <div class="causal-verdict">No outside receipt. No causal claim.</div> <p class="causal-disclosure">Seeded decision-rule example · not production CloudWatch data</p> </aside> </section> <section class="section-shell compact" aria-labelledby="tour-title"> <div class="section-head"> <div> <p class="eyebrow">A two-minute judge path</p> <h2 id="tour-title">See the thesis in three clicks.</h2> </div> <p>The default path hides setup and raw JSON. Each click tells you what happened and why it matters.</p> </div> <div class="steps"> <article class="step-card active"> <span class="step-index">1</span> <h3>Load the incident</h3> <p>Read two competing memories: a closer restart story and a farther scale-up row whose service and receipt still need checking.</p> <div class="step-result">Expected: both remain inspectable.</div> </article> <article class="step-card"> <span class="step-index">2</span> <h3>Ask MemoryStand</h3> <p>Run the real <code>/decide</code> path. Only matching, receipt-backed evidence may steer; otherwise the fixed fallback is disclosed.</p> <div class="step-result">Expected policy: wrong-service proof refused.</div> </article> <article class="step-card"> <span class="step-index">3</span> <h3>Inspect the receipt</h3> <p>Open CockroachDB time travel for the recorded decision and preserve the exact ranked context.</p> <div class="step-result">Expected: auditable history · no overwrite.</div> </article> </div> </section> <section class="section-shell" id="guided-demo" aria-labelledby="guided-title"> <div class="section-head"> <div> <p class="eyebrow">Live product</p> <h2 id="guided-title">Proof must match the service.</h2> </div> <p>The seeded incident is designed to make dangerous evidence look relevant. Run it and verify what was eligible, excluded, and cited.</p> </div> <div class="judge-stage"> <section class="guided-card" aria-live="polite"> <div class="guided-head"> <div> <h3>Payments latency incident</h3> <p>Read-only comparison first. One live decision only when you click.</p> </div> <span class="badge green">live API</span> </div> <div class="guided-body"> <div class="guided-summary" aria-label="Guided demo facts"> <div class="summary-stat"><span>Expected closer memory</span><strong>Restart · unconfirmed</strong></div> <div class="summary-stat"><span>Expected wrong-service row</span><strong>Visible · excluded</strong></div> <div class="summary-stat"><span>Expected policy</span><strong>Fallback disclosed</strong></div> </div> <div id="guidedResult" class="result-area"> <p class="placeholder">Loading the two decisive memories from the live deployment…</p> </div> <div class="guided-controls"> <button class="primary" type="button" id="runGuidedDemo">Run the live decision</button> <button class="ghost" type="button" id="inspectGuidedReceipt" disabled>Inspect CockroachDB receipt</button> <p id="guidedInstruction">First, compare what is close with what is trusted. Then run the decision.</p> </div> </div> </section> <aside class="guide-aside"> <section class="guide-note"> <h3>What to look for</h3> <ul> <li>The restart is the closest word match.</li> <li>It is still <strong>unconfirmed</strong>.</li> <li>The <strong>checkout-api</strong> scale-up row stays visible but cannot justify payments-service.</li> <li>The response reports the model-call count.</li> </ul> </section> <section class="guide-note"> <h3>Why this is safer</h3> <p>Storage and authority are separate. A memory may remain searchable without receiving permission to steer an autonomous action.</p> </section> <section class="guide-note"> <h3>Honest limit</h3> <p>This deployment matches words, not meaning. The decision route can fall back to a fixed policy; trust promotion itself uses zero model calls.</p> </section> </aside> </div> </section> <section class="section-shell compact" id="trust" aria-labelledby="trust-title"> <div class="section-head"> <div> <p class="eyebrow">The trust ladder</p> <h2 id="trust-title">Keep the memory. Limit its authority.</h2> </div> <p>Disagreement is recorded instead of erased. A stronger receipt changes what may act, not what remains auditable.</p> </div> <div class="trust-cards"> <article class="trust-card"><span class="badge gray">unconfirmed</span><h3>Stored, not trusted</h3><p>No outcome receipt has been independently checked.</p></article> <article class="trust-card"><span class="badge amber">attested</span><h3>Reported</h3><p>An outcome was reported, but no system of record was re-queried.</p></article> <article class="trust-card"><span class="badge green">verified</span><h3>Externally checked</h3><p>CloudWatch agreed on metric, direction, amount, and entity.</p></article> <article class="trust-card"><span class="badge red">disputed</span><h3>Contradicted</h3><p>A rollback, false positive, or outside mismatch blocks authority.</p></article> </div> </section> <section class="section-shell" id="architecture" aria-labelledby="architecture-title"> <div class="section-head"> <div> <p class="eyebrow">How it works</p> <h2 id="architecture-title">One ledger. Three independent jobs.</h2> </div> <p>The public demo uses the deployed API and CockroachDB Cloud. Detailed implementation notes stay available without crowding the judge path.</p> </div> <div class="architecture-grid"> <article class="architecture-card"><span class="icon">CR</span><h3>CockroachDB ledger</h3><p>Stores facts, sources, trust tiers, ranked retrieval receipts, and later decisions together. Time travel reconstructs what the agent knew.</p></article> <article class="architecture-card"><span class="icon">CW</span><h3>CloudWatch check</h3><p>Metric-based promotion requires the external system of record to agree. A direction, amount, metric, or entity mismatch refuses the claim; non-metric reports cannot reach verified.</p></article> <article class="architecture-card"><span class="icon">0</span><h3>Model-free authority</h3><p>A model may propose an action, but it does not promote its own memory. The authority path reports zero model calls.</p></article> </div> </section> <details class="advanced"> <summary> <strong>Advanced workspace</strong> <span>Manual ingest, outcome confirmation, time travel, raw JSON, and connection settings</span> </summary> <div class="advanced-inner"> <div class="connection-settings"> <div class="field-inline"> <label for="tenantId">Tenant ID</label> <input type="text" id="tenantId" value="9c8f6e5a-9d1a-4a1c-8f2e-3b6d1c7a4e10"> </div> <div class="field-inline"> <label for="agentId">Agent ID</label> <input type="text" id="agentId" value="1a2b3c4d-5e6f-4708-9a0b-1c2d3e4f5061"> </div> <div class="field-inline"> <label for="sharedSecret">Demo credential <span class="hint">(auto-filled; tenant-scoped)</span></label> <input type="password" id="sharedSecret" placeholder="loaded from /health" autocomplete="off"> </div> </div> <section class="preview-strip" id="previewStrip"> <div class="preview-strip-head"> <div> <h2>Seeded demo tenant</h2> <p> Read a small live sample from the isolated public tenant. This route does not mutate data. </p> </div> <button class="ghost" type="button" id="loadSeededDemo">Reload sample</button> </div> <div class="preview-strip-result" id="previewResult"> <p class="placeholder">Checking for existing memories…</p> </div> </section> <div class="grid"> <!-- Panel 1: Incident feed --> <section class="panel" id="panel-decide"> <div class="panel-head"> <h2><span class="panel-num">1</span>Incident feed</h2> </div> <p class="panel-sub"> Post a synthetic alert. The agent recalls what it knows, then records the action it took and why — every consulted memory is shown ranked by distance with its trust tier. Leave "Proposed action" blank. The seeded default alert is built so a closer <em>unconfirmed</em> restart cannot steer. A farther row also needs the same target service and a complete outcome receipt before it may enter decision context. </p> <form class="panel-form" id="form-decide"> <div class="field span2"> <label for="decideQuery">Alert / recall query</label> <textarea id="decideQuery" required placeholder="payments-service p99 latency above 2s, error rate climbing">payments-service p99 latency above 2s, error rate climbing</textarea> </div> <div class="field"> <label for="decideTargetEntity">Target service <span class="hint">(required when the agent decides)</span></label> <input type="text" id="decideTargetEntity" value="payments-service" placeholder="payments-service"> </div> <div class="field"> <label for="decideAction">Proposed action <span class="hint">(optional — blank lets the agent decide)</span></label> <input type="text" id="decideAction" value="" placeholder="leave blank to let the agent decide"> </div> <div class="field"> <label for="decideK">Memories to consult (k)</label> <input type="number" id="decideK" value="5" min="1" max="20"> </div> <div class="field span2"> <label for="decideRationale">Rationale</label> <textarea id="decideRationale" required placeholder="Recent memory says restarting payments-service clears the stuck connection pool.">Recent memory says restarting payments-service clears the stuck connection pool.</textarea> </div> <div class="field"> <label for="decideTaskId">Task / incident UUID <span class="hint">(optional)</span></label> <input type="text" id="decideTaskId" inputmode="text" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"> </div> <div class="field"> <label for="decideProduced">Produced memory IDs <span class="hint">(comma-separated, optional)</span></label> <input type="text" id="decideProduced" placeholder="from panel 2 → ingest"> </div> <div class="field span2 checkbox-row"> <input type="checkbox" id="decideApproval"> <label for="decideApproval">Requires human approval before it runs</label> </div> <div class="field span2"> <button class="primary" type="submit" id="decideSubmit">Post alert to /decide</button> </div> </form> <div class="result-area" id="decideResult"> <p class="placeholder">No decision posted yet.</p> </div> </section> <!-- Panel 2: Memory / admission --> <section class="panel" id="panel-ingest"> <div class="panel-head"> <h2><span class="panel-num">2</span>Memory admission</h2> </div> <p class="panel-sub"> Submit a memory. Admission control checks it against what the agent already believes before it becomes recallable at all — the verdict, and why, is shown here. </p> <form class="panel-form" id="form-ingest"> <div class="field span2"> <label for="ingestContent">Content</label> <textarea id="ingestContent" required placeholder="payments-service reads from orders_v2">payments-service reads from orders_v2</textarea> </div> <div class="field"> <label for="ingestEntity">Entity <span class="hint">(optional)</span></label> <input type="text" id="ingestEntity" placeholder="payments-service"> </div> <div class="field"> <label for="ingestType">Memory type</label> <select id="ingestType"> <option value="semantic" selected>semantic</option> <option value="episodic">episodic</option> <option value="task_state">task_state</option> <option value="tool_call">tool_call</option> </select> </div> <div class="field"> <label for="ingestKey">Attribute key <span class="hint">(optional)</span></label> <input type="text" id="ingestKey" placeholder="reads_from_table"> </div> <div class="field"> <label for="ingestValue">Attribute value <span class="hint">(optional)</span></label> <input type="text" id="ingestValue" placeholder="orders_v2"> </div> <div class="field"> <label for="ingestSource">Source <span class="hint">(optional)</span></label> <input type="text" id="ingestSource" placeholder="runbook:db-failover"> </div> <div class="field"> <label for="ingestTaskId">Task / incident UUID <span class="hint">(optional)</span></label> <input type="text" id="ingestTaskId" inputmode="text" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"> </div> <div class="field span2"> <button class="primary" type="submit" id="ingestSubmit">Submit to /ingest</button> </div> </form> <div class="result-area" id="ingestResult"> <p class="placeholder">No memory submitted yet.</p> </div> </section> <!-- Panel 3: MemoryStand --> <section class="panel" id="panel-memorystand"> <div class="panel-head"> <h2><span class="panel-num">3</span>MemoryStand (outcome gate)</h2> </div> <p class="panel-sub"> Report what actually happened. Memories that decision <em>produced</em> are promoted or demoted based on that outcome — never on a model's opinion of itself. </p> <div class="trust-ladder" id="trustLadder"> <h3>The trust ladder</h3> <div class="trust-ladder-rungs"> <div class="rung"> <span class="badge gray">unconfirmed</span> <p>No outcome has been reported for this decision yet.</p> </div> <div class="rung"> <span class="badge amber">attested</span> <p>An outcome was reported, but this deployment could not independently re-check it (no PagerDuty token; a human sign-off has no system of record to re-query).</p> </div> <div class="rung"> <span class="badge green">verified</span> <p>Re-queried against the external system of record (CloudWatch), which agreed.</p> </div> <div class="rung"> <span class="badge red">disputed</span> <p>The reported outcome was a rollback, a false positive, or the external system of record disagreed with the claim.</p> </div> </div> <p class="trust-ladder-note"> Verification is delayed by design: confirming an outcome moments after a decision often lands on <b>unavailable</b> because the "after" metric window is still in the future — that is expected behaviour, not a broken feature. </p> </div> <div class="model-calls-hero" id="modelCallsHero"> <div class="mc-label">model calls on this path</div> <div class="mc-number zero" id="modelCallsNumber">0</div> <p class="mc-note" id="modelCallsNote"> By design, before any outcome is confirmed: this promotion path never asks a model anything. Confirm an outcome below and this updates from the real response. </p> </div> <form class="panel-form" id="form-confirm"> <div class="field span2"> <label for="confirmDecisionId">Decision ID</label> <input type="text" id="confirmDecisionId" required placeholder="paste a decision id from panel 1"> </div> <div class="field"> <label for="confirmOutcome">Outcome</label> <select id="confirmOutcome"> <option value="success">success</option> <option value="rollback">rolled back</option> <option value="false_positive">false positive</option> </select> </div> <div class="field"> <label for="confirmSource">Source</label> <select id="confirmSource"> <option value="pagerduty">PagerDuty</option> <option value="metric">metric</option> <option value="human">human</option> </select> </div> <div class="field"> <label for="confirmRef">External reference</label> <input type="text" id="confirmRef" required placeholder="incident id, metric query, or approver name"> </div> <div class="field" id="confirmDeltaField"> <label for="confirmDelta">Metric delta <span class="hint">(required if source=metric)</span></label> <input type="number" step="any" id="confirmDelta" placeholder="-42.5"> </div> <div class="field span2"> <button class="primary" type="submit" id="confirmSubmit">Confirm outcome</button> </div> </form> <div class="result-area" id="confirmResult"> <p class="placeholder">No outcome confirmed yet.</p> </div> </section> <!-- Panel 4: Cross-examine --> <section class="panel" id="panel-timemachine"> <div class="panel-head"> <h2><span class="panel-num">4</span>Cross-examine</h2> </div> <p class="panel-sub"> Pick a decision. See exactly what the agent believed the moment it acted, next to what is true now — additions, removals, and changed trust tiers marked. </p> <form class="panel-form" id="form-timemachine"> <div class="field span2"> <label for="timemachineDecisionId">Decision ID</label> <input type="text" id="timemachineDecisionId" required placeholder="paste a decision id from panel 1"> </div> <div class="field span2"> <button class="primary" type="submit" id="timemachineSubmit">Call /timemachine</button> </div> </form> <div class="result-area" id="timemachineResult"> <p class="placeholder">No decision cross-examined yet.</p> </div> </section> </div> </div> </details> </main> <footer> <strong>MemoryStand</strong> · Apache-2.0 · <a href="https://github.com/tomyimkc/memorystand" target="_blank" rel="noreferrer">public source</a> · candidate-only demonstration, not an AGI or production-validation claim. Override the API for local development with <code>?api=http://host:port</code>. </footer> <script src="app.js"></script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%230a121a'/%3E%3Cpath d='M17 47V17h8l7 14 7-14h8v30h-8V31l-7 13-7-13v16z' fill='%236de0a6'/%3E%3C/svg%3E">
<title>MemoryStand — memory that must prove it worked</title>
<style>
:root {
--bg: #0a0e14;
--panel: #111923;
--panel-2: #0b121a;
--panel-3: #172231;
--border: #263345;
--border-light: #34445a;
--text: #f4f7fb;
--text-dim: #aab5c4;
--text-faint: #748196;
--accent: #64b5ff;
--accent-dim: #173b59;
--green: #35d488;
--green-dim: #123322;
--amber: #f5b93d;
--amber-dim: #3a2e0f;
--red: #ff5d6a;
--red-dim: #3a1420;
--purple: #b28dff;
--purple-dim: #241a3a;
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--radius: 16px;
--shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text);
font-family: var(--sans);
font-size: 16px;
line-height: 1.45;
}
body {
min-height: 100vh;
background:
radial-gradient(circle at 12% -8%, rgba(77, 163, 255, 0.18), transparent 34rem),
radial-gradient(circle at 88% 6%, rgba(53, 212, 136, 0.10), transparent 28rem),
var(--bg);
}
a { color: var(--accent); text-underline-offset: 3px; }
code, .mono { font-family: var(--mono); }
/* ---------- topbar ---------- */
header.topbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 18px;
min-height: 74px;
padding: 14px clamp(20px, 4vw, 64px);
border-bottom: 1px solid var(--border);
background: rgba(8, 13, 20, 0.88);
backdrop-filter: blur(18px);
position: sticky;
top: 0;
z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.brand-mark {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: linear-gradient(145deg, var(--accent), #2a78ff);
color: #03111e;
font-weight: 900;
letter-spacing: -1px;
box-shadow: 0 10px 26px rgba(77, 163, 255, 0.25);
}
.brand-copy { display: flex; flex-direction: column; gap: 1px; }
.brand h1 { margin: 0; font-size: 20px; letter-spacing: -0.2px; }
.brand p { margin: 0; font-size: 11px; color: var(--text-faint); }
nav.topnav {
display: flex;
align-items: center;
gap: 18px;
}
nav.topnav a {
color: var(--text-dim);
font-size: 13px;