agent-memory-brain 0.2.0__py3-none-any.whl

devmem/panel/static/site.css

@@ -0,0 +1,508 @@
+/* Hallmark · shape: app screen · genre: modern-minimal · theme: Rim (deal 2/3, seed black-minimal-second-screen-monitor-a238·ae2101f4·2026-10-30·r0) · redesign: full
+ * nav: kept, one quiet top bar · signature: the memory graph, set in ink on black with the wall parted by hairlines · states: loading, empty, error, live, offline, stale
+ * axes: dark/grotesk-sans/warm · posture: committed · contrast: pass · v2.0.0 */
+/* Hallmark · pre-emit critique: P4 H4 E4 S4 R3 V4 · weakest: R, the brain graph keeps its own renderer, so only its colours and glow were retuned */
+/* Hallmark · waive 38iii · .panel h3 .hint · a muted count beside a panel label, never an accent */
+@import url("./tokens.css");
+@import url("./base.css");
+
+/* Semantic tokens: who is speaking, what kind a memory is, what a chart series is.
+   Hex twins live in common.js, brain.js and brain3d.js for the canvases. */
+:root {
+  --color-claude: oklch(82% 0.045 75);
+  --color-subagent: oklch(64% 0.035 75);
+  --color-codex: var(--color-accent-2);
+  --color-user: var(--color-ink);
+  --color-warn: oklch(80% 0.12 75);
+  --kind-note: oklch(72% 0.06 250);
+  --kind-decision: oklch(72% 0.06 300);
+  --kind-preference: oklch(72% 0.06 10);
+  --kind-snippet: oklch(74% 0.06 150);
+  --kind-todo: oklch(78% 0.07 85);
+  --series-in: var(--color-ink-2);
+  --series-out: var(--color-accent-2);
+  --series-cache-r: var(--color-muted-2);
+  --series-cache-w: oklch(36% 0.010 80);
+  --well: var(--color-paper-2);
+  --hover: oklch(14% 0.009 78);
+  --control-h: 32px;
+}
+
+body { font-size: 15px; min-height: 100vh; }
+
+a { color: var(--color-ink); text-decoration: none; }
+a:hover { text-decoration: underline; }
+a:active { color: var(--color-muted); }
+
+/* ---------- top bar ---------- */
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-lg);
+  height: 52px;
+  padding: 0 var(--space-lg);
+  border-bottom: var(--rule-hair) solid var(--color-rule);
+  background: var(--color-paper);
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky-nav);
+}
+
+.brand {
+  font-weight: 500;
+  font-size: var(--text-md);
+  letter-spacing: -0.01em;
+  color: var(--color-ink);
+}
+.brand:hover { text-decoration: none; color: var(--color-ink-2); }
+
+.topbar nav { display: flex; align-self: stretch; gap: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
+
+.topbar nav a {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2xs);
+  padding: 0 var(--space-sm);
+  color: var(--color-muted);
+  font-size: var(--text-sm);
+  white-space: nowrap;
+  border-bottom: 2px solid transparent;
+  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
+}
+
+.topbar nav a:hover { color: var(--color-ink); text-decoration: none; }
+.topbar nav a.on { color: var(--color-ink); border-bottom-color: var(--color-accent); }
+
+.topbar .spacer { flex: 1; }
+
+/* ---------- drill-down pages ---------- */
+main.page {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: var(--space-xl) var(--space-xl) var(--space-3xl);
+}
+
+h1 { font-size: var(--text-2xl); letter-spacing: -0.03em; margin: 0 0 var(--space-md); max-width: none; }
+h2 {
+  font-size: var(--text-md);
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  color: var(--color-ink);
+  max-width: none;
+  margin: var(--space-2xl) 0 var(--space-md);
+  padding-top: var(--space-md);
+  border-top: var(--rule-hair) solid var(--color-rule);
+}
+h3 { font-size: var(--text-md); font-weight: 500; letter-spacing: -0.01em; max-width: none; }
+
+.muted { color: var(--color-muted); }
+.mono { font-family: var(--font-outlier); font-size: 0.88em; }
+.num { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; text-align: right; }
+main.page > p.muted { margin-bottom: var(--space-lg); }
+
+.card {
+  color: var(--color-ink);
+  background: var(--well);
+  border: var(--rule-hair) solid var(--color-rule);
+  border-radius: var(--radius-card);
+  padding: var(--space-md) var(--space-lg);
+  margin: var(--space-sm) 0;
+}
+
+.grid-cards {
+  display: flex;
+  flex-wrap: wrap;
+  width: fit-content;
+  max-width: 100%;
+  border: var(--rule-hair) solid var(--color-rule);
+}
+.grid-cards .card { flex: 0 1 260px; min-width: 0; }
+.grid-cards .card { margin: 0; border: 0; border-right: var(--rule-hair) solid var(--color-rule); background: none; }
+.grid-cards .card:last-child { border-right: 0; }
+
+.stat-label { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
+.stat-value { font-family: var(--font-outlier); font-size: var(--text-2xl); font-weight: 400; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.2; }
+.stat-gap { margin-top: var(--space-sm); }
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: var(--space-xs) 0 var(--space-lg);
+  font-size: var(--text-sm);
+}
+
+th, td { text-align: left; padding: var(--space-xs) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule-2); vertical-align: top; }
+th:first-child, td:first-child { padding-left: 0; }
+th { color: var(--color-muted); font-weight: 500; font-size: var(--text-sm); white-space: nowrap; border-bottom-color: var(--color-rule); }
+th.num { font-family: var(--font-body); }
+tr:last-child td { border-bottom: none; }
+tbody tr:hover td { background: var(--hover); }
+tr.day th { color: var(--color-ink); padding-top: var(--space-lg); font-weight: 500; border-bottom-color: var(--color-rule); }
+tr.day th.num { color: var(--color-muted); font-family: var(--font-outlier); font-weight: 400; }
+
+/* a label, not a pill: coloured text with a square tick */
+.badge {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.4em;
+  font-size: var(--text-sm);
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--color-muted);
+}
+.badge::before { content: ""; width: 0.5em; height: 0.5em; background: currentColor; flex: none; align-self: center; }
+.badge.declared::before, .badge.ado-stale::before, .badge.ado-card-stale::before { display: none; }
+
+.badge.claude { color: var(--color-claude); }
+.badge.claude-subagent { color: var(--color-subagent); }
+.badge.codex { color: var(--color-codex); }
+.badge.ok { color: var(--color-success); }
+.badge.error { color: var(--color-error); }
+.badge.kind-note { color: var(--kind-note); }
+.badge.kind-decision { color: var(--kind-decision); }
+.badge.kind-preference { color: var(--kind-preference); }
+.badge.kind-snippet { color: var(--kind-snippet); }
+.badge.kind-todo { color: var(--kind-todo); }
+
+/* ---------- controls ---------- */
+input, textarea, select, button {
+  font: inherit;
+  font-size: var(--text-sm);
+  color: var(--color-ink);
+  background: var(--color-paper);
+  border: var(--rule-hair) solid var(--color-rule);
+  border-radius: 0;
+  min-height: var(--control-h);
+  padding: 0 var(--space-sm);
+  margin: 0;
+}
+
+textarea { width: 100%; min-height: 7rem; padding: var(--space-xs) var(--space-sm); line-height: 1.5; display: block; margin: var(--space-xs) 0; }
+input, select { max-width: 100%; }
+input:hover, textarea:hover, select:hover { border-color: var(--color-muted-2); }
+input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
+input::placeholder, textarea::placeholder { color: var(--color-muted-2); }
+input:disabled, textarea:disabled, select:disabled, button:disabled { opacity: 0.55; cursor: not-allowed; }
+
+button {
+  cursor: pointer;
+  font-weight: 500;
+  color: var(--color-ink);
+  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
+}
+button:hover { border-color: var(--color-muted); background: var(--hover); }
+button:active { background: var(--color-paper-3); color: var(--color-muted); }
+button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
+button.danger { color: var(--color-error); }
+button.danger:hover { border-color: var(--color-error); }
+
+input[type="checkbox"] { min-height: 0; accent-color: var(--color-accent); }
+
+details > summary { cursor: pointer; }
+details > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
+.form-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
+.card form + form { margin-top: var(--space-xs); }
+
+.chart { width: 100%; height: 220px; display: block; }
+
+.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: var(--space-md) 0 var(--space-lg); }
+.pill-row .count { font-family: var(--font-outlier); color: var(--color-ink-2); font-weight: 400; }
+
+/* memory list */
+.memory-row > summary { display: flex; align-items: baseline; gap: var(--space-xs) var(--space-sm); list-style: none; min-width: 0; }
+.memory-row > summary::-webkit-details-marker { display: none; }
+.memory-row > summary .m-title { flex: 1; min-width: 0; color: var(--color-ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.memory-row[open] > summary .m-title { white-space: normal; }
+.memory-row > summary .m-meta { flex: none; color: var(--color-muted); font-size: var(--text-sm); display: flex; gap: var(--space-sm); white-space: nowrap; }
+@media (max-width: 720px) {
+  .memory-row > summary { flex-wrap: wrap; }
+  .memory-row > summary .m-meta { flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; flex-wrap: wrap; }
+}
+.memory-row[open] > summary { padding-bottom: var(--space-sm); margin-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
+.memory-row.card { background: none; margin: 0; border-width: 0 0 var(--rule-hair) 0; border-color: var(--color-rule-2); padding: var(--space-sm) 0; }
+.memory-row.card:hover { background: var(--hover); }
+.memory-body { white-space: pre-wrap; margin-top: var(--space-xs); }
+.search-note { margin: var(--space-sm) 0; }
+.create-card { margin-top: var(--space-lg); }
+
+/* thin separators instead of middle dots */
+.meta { display: inline-flex; flex-wrap: wrap; gap: 0 var(--space-sm); }
+.part + .part { margin-left: 0.55em; padding-left: 0.55em; border-left: var(--rule-hair) solid var(--color-rule); }
+
+/* ---------- Azure DevOps ---------- */
+.page-title-row, .ado-refresh { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
+.page-title-row { justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-md); }
+.page-title-row h1 { margin-bottom: var(--space-2xs); }
+.page-title-row p { margin: 0; }
+.ado-refresh form { margin: 0; }
+.ado-stale, .ado-error { color: var(--color-warn); }
+.ado-error { font-size: var(--text-sm); }
+.ado-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0; border: var(--rule-hair) solid var(--color-rule); }
+.ado-grid .card { margin: 0; border: 0; border-right: var(--rule-hair) solid var(--color-rule); background: none; }
+.ado-grid .card:last-child { border-right: 0; }
+.ado-list { list-style: none; margin: 0; padding: 0; }
+.ado-list li { border-bottom: var(--rule-hair) solid var(--color-rule-2); padding: var(--space-sm) 0; display: grid; gap: var(--space-3xs); }
+.ado-list li:last-child { border-bottom: 0; padding-bottom: 0; }
+.ado-list a { font-weight: 500; }
+.ado-list .muted { font-size: var(--text-sm); }
+.ado-reviewers { color: var(--color-muted); font-size: var(--text-sm); }
+.ado-reviewers b { color: var(--color-ink-2); font-weight: 400; }
+.ado-tasks h3, .ado-grid h3 { margin: 0 0 var(--space-xs); }
+.ado-change-badge { color: var(--color-accent); font-size: var(--text-xs); font-weight: 500; font-family: var(--font-outlier); }
+.ado-changes { border-color: var(--color-accent); }
+.ado-changes ul { list-style: none; margin: var(--space-xs) 0 0; padding: 0; }
+.ado-changes li { display: flex; gap: var(--space-sm); justify-content: space-between; border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-xs) 0; }
+.ado-changes time { color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; font-family: var(--font-outlier); }
+
+/* ---------- tokens (Overview) ---------- */
+.panel-tokens {
+  flex: none;
+  display: grid;
+  grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 1.5fr);
+  gap: 0;
+  height: 232px;
+  padding: 0;
+}
+.panel-tokens .tok-block { padding: var(--space-md) var(--space-lg); border-right: var(--rule-hair) solid var(--color-rule); }
+.panel-tokens .tok-block:last-child { border-right: 0; }
+.panel-tokens h3 { margin: 0 0 var(--space-xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); letter-spacing: 0; }
+.panel-tokens .hint { color: var(--color-muted-2); font-size: var(--text-xs); }
+
+.tok-block { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
+.tok-big { font-family: var(--font-outlier); font-size: var(--text-3xl); font-weight: 400; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
+.tok-split { margin-top: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-2xs); font-size: var(--text-sm); }
+.tok-split div { display: flex; justify-content: space-between; gap: var(--space-xs); }
+.tok-split span:first-child { color: var(--c); }
+.tok-split b { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; font-weight: 400; color: var(--color-ink-2); }
+
+.tok-spark svg { flex: 1; width: 100%; min-height: 0; display: block; }
+
+.tok-models ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); overflow: hidden; }
+.tok-models li { display: grid; grid-template-columns: minmax(0, 1fr) 4.5em; gap: var(--space-2xs) var(--space-sm); font-size: var(--text-sm); }
+.tok-models .m-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-outlier); font-size: 0.95em; color: var(--c, var(--color-ink-2)); }
+.tok-models .m-total { text-align: right; font-family: var(--font-outlier); font-variant-numeric: tabular-nums; font-weight: 400; }
+.tok-models .seg { grid-column: 1 / -1; display: flex; height: 3px; overflow: hidden; background: var(--color-rule); }
+.seg i { display: inline-block; height: 100%; }
+.seg-legend { display: inline-flex; gap: var(--space-sm); }
+.seg-legend .sw { display: inline-block; width: 0.6em; height: 0.6em; margin-right: var(--space-2xs); vertical-align: -0.05em; }
+.s-in { background: var(--series-in); }
+.s-out { background: var(--series-out); }
+.s-cr { background: var(--series-cache-r); }
+.s-cw { background: var(--series-cache-w); }
+
+@media (max-width: 1100px) {
+  .panel-tokens { grid-template-columns: 1fr 1fr; height: auto; }
+  .panel-tokens .tok-block { border-bottom: var(--rule-hair) solid var(--color-rule); min-height: 160px; }
+}
+
+/* ---------- messages ---------- */
+.msg-badge {
+  display: inline-block;
+  min-width: 1.5em;
+  padding: 0 0.35em;
+  background: var(--color-accent);
+  color: var(--color-accent-ink);
+  font-family: var(--font-outlier);
+  font-size: var(--text-xs);
+  line-height: 1.5;
+  text-align: center;
+}
+.msg-badge[hidden] { display: none; }
+.badge.declared { color: var(--color-muted-2); font-weight: 400; }
+.badge.msg-message { color: var(--color-ink-2); }
+.badge.msg-question { color: var(--color-accent); }
+.badge.msg-finding { color: var(--color-warn); }
+.badge.msg-event { color: var(--color-muted-2); }
+.badge.st-open, .badge.st-running { color: var(--color-success); }
+.badge.st-answered, .badge.st-finished { color: var(--color-ink-2); }
+.badge.st-closed, .badge.st-stale, .badge.st-stopped { color: var(--color-muted-2); }
+.msg-head { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); align-items: baseline; margin-bottom: var(--space-xs); font-size: var(--text-sm); }
+.msg-head time { margin-left: auto; color: var(--color-muted); font-family: var(--font-outlier); }
+.msg-body { white-space: pre-wrap; word-break: break-word; font-family: var(--font-outlier); font-size: 0.85rem; line-height: 1.6; margin: var(--space-xs) 0; color: var(--color-ink-2); }
+.msg-event { border-style: dashed; }
+.tool-lines summary { color: var(--color-muted); font-size: var(--text-sm); }
+.tool-lines ol { margin: var(--space-xs) 0 0; padding-left: var(--space-lg); font-size: var(--text-sm); }
+.tool-lines .tool { color: var(--color-ink); }
+.msg-filters label { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); }
+.back-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg); }
+
+/* ---------- chats (/messages) ---------- */
+.headline-item { border-bottom: var(--rule-hair) solid var(--color-rule-2); padding: var(--space-xs) 0; font-size: var(--text-sm); }
+.headline-item summary { cursor: pointer; display: flex; gap: var(--space-xs); align-items: baseline; list-style: none; }
+.headline-item summary::-webkit-details-marker { display: none; }
+.headline-item time { margin-left: auto; color: var(--color-muted-2); font-size: var(--text-xs); white-space: nowrap; font-family: var(--font-outlier); }
+.headline-icon { width: 1.1em; text-align: center; color: var(--color-muted); }
+.headline-icon.st-live { color: var(--color-accent); }
+.headline-icon.st-done { color: var(--color-success); }
+.headline-icon.st-warn { color: var(--color-warn); }
+.headline-icon.st-question { color: var(--color-accent); }
+.headline-icon.st-stopped { color: var(--color-muted-2); }
+.headline-icon.st-message { color: var(--color-ink-2); }
+.headline-detail { margin: var(--space-xs) 0 0 var(--space-lg); white-space: pre-wrap; font: inherit; color: var(--color-muted); }
+
+body.chat-body { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
+.live-chat { flex: 1; min-height: 0; max-width: 1200px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); border-inline: var(--rule-hair) solid var(--color-rule); }
+.live-members { min-height: 0; overflow: auto; padding: var(--space-md); border-right: var(--rule-hair) solid var(--color-rule); }
+.live-members h1 { margin: 0; font-size: var(--text-xl); }
+.live-agent { display: flex; gap: var(--space-sm); align-items: center; padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); }
+.live-agent-info { flex: 1; min-width: 0; }.live-agent-info span, .live-agent-info small { display: block; }.live-agent-info span { overflow-wrap: break-word; }.live-agent-info small, .live-agent > small { color: var(--color-muted); }.live-agent > button, .live-agent > small { flex: none; }
+.agent-dot { display: inline-block; flex: none; width: .65em; height: .65em; border-radius: 50%; background: var(--agent); margin-right: .35em; vertical-align: .05em; }
+.live-pane { min-height: 0; display: flex; flex-direction: column; }.live-note { padding: 0 var(--space-md) var(--space-sm); font-size: var(--text-xs); }
+.chat-app { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); max-width: 1440px; width: 100%; margin: 0 auto; border-inline: var(--rule-hair) solid var(--color-rule); }
+.chat-list-pane { display: flex; flex-direction: column; min-height: 0; border-right: var(--rule-hair) solid var(--color-rule); }
+.chat-list-head { padding: var(--space-md) var(--space-md) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
+.chat-list-head h1 { margin: 0 0 var(--space-xs); font-size: var(--text-xl); }
+.chat-filters summary { color: var(--color-muted); font-size: var(--text-sm); }
+.chat-filters form { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-sm); }
+.chat-filters form > a { font-size: var(--text-sm); color: var(--color-muted); }
+.chat-filters select { width: 100%; }
+.chat-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; }
+.chat-row a {
+  display: grid;
+  grid-template-columns: 2rem minmax(0, 1fr);
+  gap: var(--space-sm);
+  align-items: start;
+  padding: var(--space-sm) var(--space-md);
+  color: var(--color-ink);
+  border-bottom: var(--rule-hair) solid var(--color-rule-2);
+  border-left: 2px solid transparent;
+}
+.chat-row a:hover { background: var(--hover); text-decoration: none; }
+.chat-row.on a { background: var(--color-paper-2); border-left-color: var(--color-accent); }
+.avatar {
+  width: 2rem;
+  height: 2rem;
+  display: grid;
+  place-items: center;
+  font-family: var(--font-outlier);
+  font-size: var(--text-sm);
+  color: var(--color-ink-2);
+  border: var(--rule-hair) solid var(--color-rule);
+  background: var(--color-paper-2);
+}
+.avatar.k-s { color: var(--color-claude); border-color: var(--color-subagent); }
+.cr-main { min-width: 0; display: grid; gap: var(--space-3xs); }
+.cr-top, .cr-bottom { display: flex; gap: var(--space-xs); align-items: baseline; min-width: 0; }
+.cr-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; font-size: var(--text-sm); }
+.cr-top time { color: var(--color-muted-2); font-size: var(--text-xs); white-space: nowrap; font-family: var(--font-outlier); }
+.cr-preview { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-muted); font-size: var(--text-sm); }
+.cr-who { color: var(--color-ink); }
+.cr-live { color: var(--color-accent); font-size: var(--text-xs); }
+.chat-none { padding: var(--space-md); font-size: var(--text-sm); }
+
+.chat-pane { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
+.chat-pane > p.muted { padding: 0 var(--space-md) var(--space-sm); font-size: var(--text-xs); }
+.chat-empty { margin: auto; max-width: 30rem; padding: var(--space-xl); display: grid; gap: var(--space-md); font-size: var(--text-sm); }
+.chat-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
+.chat-head form { margin: 0; }
+.chat-back { display: none; font-size: var(--text-lg); padding: 0 var(--space-xs); }
+.ch-main { flex: 1; min-width: 0; }
+.ch-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
+.ch-members { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); }
+.ch-members .chip { color: var(--c, var(--color-muted)); white-space: nowrap; display: inline-flex; align-items: center; }
+.ch-members .chip a { color: inherit; }
+.ch-members .dot { display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.4em; background: var(--color-muted-2); }
+.ch-members .st-running .dot { background: var(--color-success); }
+.ch-members .st-finished .dot { background: var(--color-ink-2); }
+.ch-members .st-stale .dot { background: var(--color-warn); }
+
+.chat-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-md) clamp(var(--space-sm), 3vw, var(--space-xl)) var(--space-lg); }
+.chat-items { display: flex; flex-direction: column; gap: var(--space-xs); max-width: 60rem; margin: 0 auto; }
+.day-sep { display: flex; align-items: center; gap: var(--space-sm); margin: var(--space-md) 0 var(--space-xs); }
+.day-sep::before, .day-sep::after { content: ""; flex: 1; height: 1px; background: var(--color-rule); }
+.day-sep span { font-size: var(--text-xs); color: var(--color-muted); font-family: var(--font-outlier); }
+.bubble {
+  max-width: min(82%, 46rem);
+  padding: var(--space-xs) var(--space-sm);
+  background: var(--color-paper-2);
+  border: var(--rule-hair) solid var(--color-rule-2);
+  border-left: 2px solid var(--c, var(--color-rule));
+  align-self: flex-start;
+  overflow-wrap: anywhere;
+}
+.bubble.mine { align-self: flex-end; background: none; border: var(--rule-hair) solid var(--color-rule); border-right: 2px solid var(--color-user); }
+.bubble.agent-bubble { border-left: 3px solid var(--agent); }
+.bubble.l-question { border-color: var(--color-rule); border-left-color: var(--color-accent); }
+.bubble.l-finding { border-color: var(--color-rule); border-left-color: var(--color-warn); }
+.bubble.l-stopped { opacity: 0.7; }
+.b-who { font-size: var(--text-xs); font-weight: 500; color: var(--c, var(--color-muted)); margin-bottom: var(--space-3xs); }
+.agent-bubble .b-who { color: var(--agent); }
+.b-who a { color: inherit; }
+.b-to, .b-declared { color: var(--color-muted); font-weight: 400; }
+.b-subject { font-weight: 500; margin-bottom: var(--space-3xs); }
+.b-text { white-space: pre-wrap; margin: 0; font: inherit; font-size: var(--text-sm); line-height: 1.55; color: var(--color-ink-2); }
+pre.b-text { font-family: var(--font-outlier); font-size: 0.8rem; }
+.bubble.long:not(.open) .b-text { max-height: 13.5em; overflow: hidden; -webkit-mask-image: linear-gradient(var(--color-paper) 70%, transparent); mask-image: linear-gradient(var(--color-paper) 70%, transparent); }
+.b-more { margin: var(--space-2xs) 0 0; min-height: 24px; padding: 0 var(--space-xs); font-size: var(--text-xs); }
+.b-foot { display: flex; gap: var(--space-xs); justify-content: flex-end; align-items: center; font-size: var(--text-xs); color: var(--color-muted-2); margin-top: var(--space-2xs); font-family: var(--font-outlier); }
+.delivery { display: grid; gap: var(--space-3xs); margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
+.b-label { font-family: var(--font-body); color: var(--color-muted); }
+.b-label.question { color: var(--color-accent); }
+.b-label.finding { color: var(--color-warn); }
+.b-label.task { color: var(--color-claude); }
+.b-label.report { color: var(--color-ink-2); }
+.sysline { align-self: stretch; font-size: var(--text-xs); color: var(--color-muted); }
+.sysline summary { list-style: none; padding: var(--space-3xs) 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sysline summary::-webkit-details-marker { display: none; }
+.sysline summary:hover { color: var(--color-ink-2); }
+.sysline summary b { color: var(--c); font-weight: 500; }
+.sysline .count, .sysline time { color: var(--color-muted-2); font-family: var(--font-outlier); }
+.sysline ol {
+  margin: var(--space-2xs) 0 var(--space-xs);
+  padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-xl);
+  font-family: var(--font-outlier);
+  font-size: var(--text-xs);
+  background: var(--color-paper-3);
+  border: var(--rule-hair) solid var(--color-rule);
+  max-height: 18rem;
+  overflow: auto;
+  overflow-wrap: anywhere;
+}
+.sysline .tool { color: var(--color-ink); }
+.bubble.enter, .sysline.enter { animation: chat-in var(--dur-short) var(--ease-out); }
+@keyframes chat-in { from { opacity: 0; } to { opacity: 1; } }
+.new-pill {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 5rem;
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: var(--color-accent-ink);
+  font-size: var(--text-xs);
+}
+.new-pill:hover { background: var(--color-focus); border-color: var(--color-focus); }
+.new-pill[hidden] { display: none; }
+.chat-input { display: flex; gap: var(--space-xs); align-items: flex-end; padding: var(--space-sm) var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
+.chat-input textarea { flex: 1; min-height: 2.5rem; max-height: 10rem; resize: none; margin: 0; }
+.chat-input button { min-height: 2.5rem; background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
+.chat-input button:hover { background: var(--color-focus); border-color: var(--color-focus); }
+.chat-input button:active { background: var(--color-accent); color: var(--color-accent-ink); opacity: 0.85; }
+.chat-error { color: var(--color-error); margin: 0; padding: 0 var(--space-md) var(--space-xs); font-size: var(--text-sm); }
+.chat-error[hidden] { display: none; }
+@media (prefers-reduced-motion: reduce) { .bubble.enter, .sysline.enter { animation: none; } }
+@media (max-width: 760px) {
+  .live-chat { grid-template-columns: minmax(0, 1fr); overflow: auto; }.live-members { max-height: 35vh; border-right: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
+  .chat-app { grid-template-columns: minmax(0, 1fr); border-inline: 0; }
+  .chat-app.has-chat .chat-list-pane, .chat-app:not(.has-chat) .chat-pane { display: none; }
+  .chat-list-pane { border-right: 0; }
+  .chat-back { display: inline; }
+  .bubble { max-width: 92%; }
+}
+
+/* ---------- maintenance ---------- */
+.run-error { color: var(--color-error); }
+td.when { font-family: var(--font-outlier); font-size: 0.82rem; white-space: nowrap; color: var(--color-ink-2); }
+.change-card h3 { margin: 0 0 var(--space-xs); font-family: var(--font-outlier); font-weight: 400; font-size: var(--text-sm); color: var(--color-ink); }
+.change-card h3 small { color: var(--color-muted); font-family: var(--font-body); }
+.change-card pre { font-family: var(--font-outlier); font-size: 0.8rem; white-space: pre-wrap; background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule-2); padding: var(--space-xs) var(--space-sm); color: var(--color-ink-2); }
+.change-card ul { padding-left: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }
+.maintenance-failing { border-color: var(--color-error); }
+
+/* ---------- small screens ---------- */
+@media (max-width: 720px) {
+  .topbar { gap: var(--space-sm); padding: 0 var(--space-md); }
+  main.page { padding: var(--space-lg) var(--space-md) var(--space-2xl); }
+  table { display: block; overflow-x: auto; }
+  .grid-cards .card, .ado-grid .card { border-right: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
+}

devmem/panel/static/tokens.css

@@ -0,0 +1,19 @@
+:root {
+  color-scheme: dark;
+  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
+  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.2rem; --text-xl: 1.44rem; --text-2xl: 1.728rem; --text-3xl: 2.074rem;
+  --text-display-s: 1.44rem; --text-display: 1.728rem; --text-section: 1.2rem; --text-title: 1rem; --text-lead: 1rem;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
+  --color-error: oklch(72% 0.15 27); --color-success: oklch(76% 0.13 150);
+  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
+  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
+  --color-paper: oklch(9% 0.008 75); --color-paper-2: oklch(12.5% 0.009 75); --color-paper-3: oklch(6.5% 0.007 75);
+  --color-ink: oklch(94% 0.010 80); --color-ink-2: oklch(84% 0.011 80); --color-muted: oklch(68% 0.012 80); --color-muted-2: oklch(50% 0.010 80);
+  --color-rule: oklch(25% 0.010 78); --color-rule-2: oklch(16% 0.009 78);
+  --color-accent: oklch(72% 0.17 45); --color-accent-ink: oklch(10% 0.02 45); --color-accent-2: oklch(74% 0.12 250); --color-focus: oklch(78% 0.15 45);
+  --font-display: "Switzer", ui-sans-serif, system-ui, sans-serif; --font-body: var(--font-display);
+  --font-outlier: "Geist Mono", ui-monospace, monospace;
+  --radius-card: 0; --radius-pill: 0; --rule-hair: 1px; --shadow-card: none;
+  --tracking-display: -0.04em; --display-weight: 500;
+}

devmem/panel/templates/ado.html

@@ -0,0 +1,62 @@
+{% extends 'base.html' %}
+{% block title %}Azure DevOps · Brain{% endblock %}
+{% block body %}
+<section id="ado-changes" class="ado-changes card" hidden></section>
+{% if snapshot.pending %}
+  <h1>Azure DevOps</h1>
+  <div class="card muted">Loading…</div>
+{% elif not snapshot.configured %}
+  <h1>Azure DevOps</h1>
+  <div class="card muted">{% if snapshot.config_error %}Azure DevOps config problem: {{ snapshot.config_error }}{% endif %}{% if snapshot.token_error %}{% if snapshot.config_error %} · {% endif %}Azure DevOps token problem: {{ snapshot.token_error }}{% endif %}{% if snapshot.missing %}{% if snapshot.config_error or snapshot.token_error %} · {% endif %}Azure DevOps is not configured: {% if 'token' in snapshot.missing %}no token in ~/.devmem/ado_token{% endif %}{% if 'token' in snapshot.missing and 'config' in snapshot.missing %} and {% endif %}{% if 'config' in snapshot.missing %}no organization/project: create ~/.devmem/ado.json or set DEVMEM_ADO_ORG and DEVMEM_ADO_PROJECT for the panel{% endif %}{% elif snapshot.error %}Azure DevOps error: {{ snapshot.error }}{% endif %}</div>
+  <form action="/ado/refresh" method="post"><button type="submit">Refresh</button></form>
+{% else %}
+  {% macro pr_list(items, empty) -%}
+    {% if items %}
+      <ul class="ado-list">
+      {% for pr in items %}
+        <li>
+          <a href="{{ pr.url }}" target="_blank" rel="noopener"><span class="mono">#{{ pr.id }}</span> {{ pr.title }}</a>
+          <span class="muted meta"><span class="mono">{{ pr.repo }}</span><span>created {{ (pr.created_date | when) or 'unknown' }}</span></span>
+          <span class="ado-reviewers">
+          {% for reviewer in pr.reviewers %}{{ reviewer.name }} <b>({{ reviewer.vote }})</b>{% if not loop.last %}, {% endif %}{% endfor %}
+          </span>
+          {% if pr.pending_reviewers is defined %}<span class="muted meta"><span>Pending: {{ pr.pending_reviewers|join(', ') if pr.pending_reviewers else 'no named pending reviewers' }}</span><span>{{ pr.age_label }}</span></span>{% endif %}
+        </li>
+      {% endfor %}
+      </ul>
+    {% else %}<p class="muted">{{ empty }}</p>{% endif %}
+  {%- endmacro %}
+
+  <div class="page-title-row">
+    <div>
+      <h1>Azure DevOps</h1>
+      <p class="muted">{{ snapshot.project_active_count }} active PRs in the configured project</p>
+    </div>
+    <div class="ado-refresh">
+      <span class="muted">Last refresh: {{ (snapshot.refreshed_at | when) or 'not yet' }}</span>
+      {% if snapshot.stale %}<span class="badge ado-stale">stale</span>{% endif %}
+      {% if snapshot.error %}<span class="ado-error">{{ snapshot.error }}</span>{% endif %}
+      <form action="/ado/refresh" method="post"><button type="submit">Refresh</button></form>
+    </div>
+  </div>
+
+  <h2>Waiting for me</h2>
+  <div class="ado-grid">
+    <section class="card"><h3>To review <span class="hint">{{ snapshot.to_review|length }}</span></h3>{{ pr_list(snapshot.to_review, 'No pull requests need your review.') }}</section>
+    <section class="card"><h3>Approved, not completed <span class="hint">{{ snapshot.my_approved_not_completed|length }}</span></h3>{{ pr_list(snapshot.my_approved_not_completed, 'No approved pull requests are waiting to land.') }}</section>
+    <section class="card"><h3>Changes requested <span class="hint">{{ snapshot.my_changes_requested|length }}</span></h3>{{ pr_list(snapshot.my_changes_requested, 'No pull requests have requested changes.') }}</section>
+  </div>
+
+  <h2>Waiting for others</h2>
+  <section class="card">{{ pr_list(snapshot.my_waiting_on_others, 'No authored pull requests are waiting on reviewers.') }}</section>
+
+  <h2>My open tasks <span class="hint">{{ snapshot.open_tasks|length }}</span></h2>
+  {% if snapshot.open_tasks_by_state %}
+    {% for state, tasks in snapshot.open_tasks_by_state.items() %}
+      <section class="card ado-tasks"><h3>{{ state }} <span class="hint">{{ tasks|length }}</span></h3>
+        <ul class="ado-list">{% for task in tasks %}<li><a href="{{ task.url }}" target="_blank" rel="noopener"><span class="mono">#{{ task.id }}</span> {{ task.title }}</a><span class="muted meta"><span>{{ task.type }}</span><span>changed {{ (task.changed_date | when) or 'unknown' }}</span></span></li>{% endfor %}</ul>
+      </section>
+    {% endfor %}
+  {% else %}<p class="muted">No open work items assigned to you.</p>{% endif %}
+{% endif %}
+{% endblock %}

devmem/panel/templates/agents.html

@@ -0,0 +1,35 @@
+{% extends 'base.html' %}
+{% block title %}Agents · Brain{% endblock %}
+{% block body %}
+<h1>Agents</h1>
+<p class="muted">Connected now means last seen under 5 minutes and its PID is alive.</p>
+<table>
+  <thead><tr><th>Client</th><th class="num">PID</th><th>CWD</th><th>Last seen</th><th class="num">Calls</th></tr></thead>
+  <tbody>
+  {% for x in clients %}
+    <tr>
+      <td>{{ x.client_name }} {% if x.connected %}<span class="badge ok">connected</span>{% endif %}</td>
+      <td class="num">{{ x.pid }}</td>
+      <td class="mono">{{ x.cwd }}</td>
+      <td><time data-rel datetime="{{ x.last_seen_at }}">{{ x.last_seen_at }}</time></td>
+      <td class="num">{{ x.tool_count }}</td>
+    </tr>
+  {% endfor %}
+  </tbody>
+</table>
+
+<h2>Last memory tool calls</h2>
+<table>
+  <thead><tr><th>When</th><th>Client</th><th>Tool</th><th>Arguments</th></tr></thead>
+  <tbody>
+  {% for x in calls %}
+    <tr>
+      <td><time data-rel datetime="{{ x.at }}">{{ x.at }}</time></td>
+      <td>{{ x.client_name }}</td>
+      <td>{{ x.tool }}{% if not x.ok %} <span class="badge error">error</span>{% endif %}</td>
+      <td class="mono muted">{{ x.args_summary }}</td>
+    </tr>
+  {% endfor %}
+  </tbody>
+</table>
+{% endblock %}

devmem/panel/templates/audit.html

@@ -0,0 +1,19 @@
+{% extends 'base.html' %}
+{% block title %}Audit · Brain{% endblock %}
+{% block body %}
+<h1>Audit</h1>
+<p class="muted">Report only: no memories are changed.</p>
+<table>
+  <thead><tr><th>ID</th><th>Title</th><th class="num">Size</th><th>Updated</th><th>Reason</th></tr></thead>
+  <tbody>
+  {% for x in rows %}
+    <tr>
+      <td>#{{ x.id }}</td><td>{{ x.title }}</td><td class="num">{{ x.size }}</td>
+      <td><time data-rel datetime="{{ x.updated_at }}">{{ x.updated_at }}</time></td><td>{{ x.reason }}</td>
+    </tr>
+  {% else %}
+    <tr><td colspan="5" class="muted">No audit findings.</td></tr>
+  {% endfor %}
+  </tbody>
+</table>
+{% endblock %}