@andespindola/brainlink 1.6.14 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.7.0
+
+- **Unified neon graph UI.** The graph web frontend now shares one visual identity with the SaaS app so the app → SSO → graph handoff reads as a single product. Every self-contained page served by the graph server — the login and change-password pages, the settings page, the OAuth authorize/consent page, the graph explorer, and the injected account menu — is repainted onto the neon palette: `#0a0e1a` base with a faint cyan/violet cyber grid and soft ambient glow, cyan `#22d3ee` nodes, violet `#8b5cf6` edges/context, glass panels, gradient "Brainlink" wordmark, cyan focus glow, and a neon gradient primary button. Typography moves to Space Grotesk (headings) + DM Sans (body) via a Google Fonts `@import` with a robust system fallback so it degrades gracefully offline, while a monospace stack stays for graph node ids and code. All graph behavior (WebGL/worker/2D-fallback rendering, layout, zoom, pan, search, streaming, context grouping, versioning UI) and every endpoint, form field and OAuth flow are unchanged — this is a visual/identity pass only. Contrast on the new palette meets WCAG AA, focus rings are visible, and motion respects `prefers-reduced-motion`.
+
+## 1.6.15
+
+- **Retrieve image bytes (`brainlink_get_image`).** A new MCP tool + `get-image` use-case reads an image previously stored by `brainlink_add_image` back out of the vault as base64 bytes + mime, decrypting when the vault is encrypted. Path is validated to stay inside `.brainlink/assets` (no traversal). This closes the cross-agent loop: one agent adds an image to the shared vault, another fetches and uses it.
+
 ## 1.6.14
 
 - **Images in notes and context.** New `brainlink_add_image` MCP tool (and application use-case) stores an image inside the vault (content-addressed, encrypted at rest when the vault is), and can attach it to a note that embeds it. Markdown image references (`![[image.png]]` embeds and `![alt](path)`) are now extracted per document without leaking into wiki-link graph edges, and image descriptors (path, mime, alt) are surfaced alongside text in retrieved context — never the raw bytes. Additive: image-free notes are unchanged.

package/dist/application/frontend/auth-styles.js

@@ -0,0 +1,180 @@
+// Shared glass-card styles for the branded auth-style pages (login, change
+// password, OAuth authorize, settings). Built on the unified neon tokens from
+// neon-theme.ts so every entry point renders the same identity: #0a0e1a base,
+// faint cyber grid, ambient glow blobs, a frosted glass card, a gradient
+// "Brainlink" wordmark, cyan focus glow and a neon primary button. Parameterized
+// only by the card max-width; the class names (.auth-card, .auth-form,
+// .auth-field, .auth-submit, .auth-message, .auth-back, .auth-brand) are shared
+// so page-specific CSS can layer on top without redefining the base.
+import { neonAmbientEffects, neonFontImport, neonGridBackground, neonRootTokens, neonWordmark } from './neon-theme.js';
+export const authSharedStyles = (cardMaxWidth) => `${neonFontImport()}
+:root {
+${neonRootTokens()}
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100%;
+  min-height: 100%;
+  margin: 0;
+}
+
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  min-height: 100dvh;
+  padding: 24px;
+  color: var(--text);
+  font-family: var(--font-body);
+${neonGridBackground()}
+}
+
+${neonAmbientEffects()}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.auth-card {
+  width: 100%;
+  max-width: ${cardMaxWidth}px;
+  padding: 32px 28px;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  background: var(--panel);
+  box-shadow: 0 24px 80px rgba(2, 6, 18, 0.55);
+  backdrop-filter: blur(16px);
+  animation: neon-fade-up 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.auth-brand {
+  display: grid;
+  gap: 4px;
+  margin-bottom: 24px;
+}
+
+.auth-brand strong {
+  font-family: var(--font-heading);
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+${neonWordmark()}
+}
+
+.auth-brand span {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.auth-form {
+  display: grid;
+  gap: 16px;
+}
+
+.auth-field {
+  display: grid;
+  gap: 7px;
+}
+
+.auth-field label {
+  color: var(--muted);
+  font-size: 12px;
+  letter-spacing: 0.02em;
+}
+
+.auth-field input {
+  width: 100%;
+  height: 42px;
+  padding: 0 14px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  outline: none;
+  background: rgba(19, 26, 42, 0.7);
+  color: var(--text);
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.auth-field input:focus {
+  border-color: var(--accent);
+  box-shadow: var(--glow-cyan);
+}
+
+.auth-submit {
+  height: 44px;
+  margin-top: 4px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  background: var(--gradient);
+  color: #05070f;
+  font-weight: 600;
+  cursor: pointer;
+  transition: box-shadow 150ms ease, transform 120ms ease, opacity 120ms ease;
+}
+
+.auth-submit:hover:not(:disabled),
+.auth-submit:focus:not(:disabled) {
+  box-shadow: 0 0 24px rgba(34, 211, 238, 0.4), 0 0 40px rgba(139, 92, 246, 0.28);
+}
+
+.auth-submit:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
+.auth-submit:disabled {
+  cursor: progress;
+  opacity: 0.6;
+}
+
+.auth-message {
+  min-height: 18px;
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+
+.auth-message[hidden] {
+  display: none;
+}
+
+.auth-message.is-error {
+  color: var(--danger);
+}
+
+.auth-message.is-success {
+  color: var(--success);
+}
+
+.auth-back {
+  display: inline-block;
+  margin-top: 20px;
+  color: var(--muted);
+  font-size: 12px;
+  text-decoration: none;
+  transition: color 150ms ease;
+}
+
+.auth-back:hover,
+.auth-back:focus {
+  color: var(--accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .auth-card {
+    animation: none;
+  }
+}`;

package/dist/application/frontend/client/account-menu.js

@@ -2,8 +2,9 @@
 // injects an account control into the graph page when server-side auth is
 // enabled. In local (no-auth) mode there is no account, so the control is never
 // shown. The bootstrap calls startAccountMenu(); the module only defines it.
-// Styling mirrors the branded auth pages: dark #08131d surfaces, subtle borders,
-// and the #5aa8ff accent, kept unobtrusive in the top-right corner.
+// Styling mirrors the branded auth pages: the unified neon identity (#0a0e1a
+// glass surfaces, hairline borders, cyan #22d3ee accent), kept unobtrusive in
+// the top-right corner.
 export const createAccountMenuJs = () => `
 const startAccountMenu = () => {
   if (typeof fetch !== 'function' || typeof document === 'undefined' || !document.body) {
@@ -25,7 +26,7 @@ const startAccountMenu = () => {
       '  display: inline-flex;',
       '  align-items: center;',
       '  margin-left: 8px;',
-      '  font-family: "Crowquill Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;',
+      '  font-family: var(--font-body, "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);',
       '}',
       '.bl-account--floating {',
       '  position: fixed;',
@@ -39,18 +40,20 @@ const startAccountMenu = () => {
       '  gap: 6px;',
       '  height: 32px;',
       '  padding: 0 12px;',
-      '  border: 1px solid rgba(143, 172, 204, 0.18);',
-      '  border-radius: 8px;',
-      '  background: rgba(13, 24, 35, 0.92);',
-      '  color: #edf4ff;',
+      '  border: 1px solid rgba(255, 255, 255, 0.1);',
+      '  border-radius: 10px;',
+      '  background: rgba(15, 20, 32, 0.82);',
+      '  color: #e7ecf6;',
       '  font: inherit;',
       '  font-size: 12px;',
       '  cursor: pointer;',
-      '  transition: border-color 120ms ease;',
+      '  backdrop-filter: blur(10px);',
+      '  transition: border-color 150ms ease, box-shadow 150ms ease;',
       '}',
       '.bl-account-button:hover,',
       '.bl-account-button:focus {',
-      '  border-color: #5aa8ff;',
+      '  border-color: #22d3ee;',
+      '  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.4), 0 0 18px rgba(34, 211, 238, 0.24);',
       '  outline: none;',
       '}',
       '.bl-account-menu {',
@@ -60,10 +63,11 @@ const startAccountMenu = () => {
       '  z-index: 2147483000;',
       '  min-width: 168px;',
       '  padding: 6px;',
-      '  border: 1px solid rgba(143, 172, 204, 0.18);',
-      '  border-radius: 10px;',
-      '  background: rgba(13, 24, 35, 0.98);',
-      '  box-shadow: 0 18px 60px rgba(1, 6, 13, 0.48);',
+      '  border: 1px solid rgba(255, 255, 255, 0.1);',
+      '  border-radius: 12px;',
+      '  background: rgba(19, 26, 42, 0.96);',
+      '  box-shadow: 0 18px 60px rgba(2, 6, 18, 0.55);',
+      '  backdrop-filter: blur(14px);',
       '  display: grid;',
       '  gap: 2px;',
       '}',
@@ -75,17 +79,18 @@ const startAccountMenu = () => {
       '  width: 100%;',
       '  padding: 8px 10px;',
       '  border: 0;',
-      '  border-radius: 6px;',
+      '  border-radius: 8px;',
       '  background: transparent;',
-      '  color: #edf4ff;',
+      '  color: #e7ecf6;',
       '  font: inherit;',
       '  font-size: 12px;',
       '  text-align: left;',
       '  cursor: pointer;',
+      '  transition: background 150ms ease;',
       '}',
       '.bl-account-item:hover,',
       '.bl-account-item:focus {',
-      '  background: rgba(90, 168, 255, 0.18);',
+      '  background: rgba(34, 211, 238, 0.16);',
       '  outline: none;',
       '}'
     ].join('\\n')

package/dist/application/frontend/client/graph-renderer.js

@@ -49,26 +49,29 @@ function createGraphRenderer(host) {
   let pointPositionsBuffer = new Float32Array(0)
   let pointSizesBuffer = new Float32Array(0)
 
+  // Fallback theme when 'init' does not carry one. Mirrors the unified neon
+  // identity (cyan #22d3ee nodes, violet #8b5cf6 clusters/edges, #0a0e1a base)
+  // so the renderer stays on-brand even without a host-supplied theme.
   const defaultTheme = {
-    node: [0.30, 0.56, 0.85, 1],
-    nodeCluster: [0.18, 0.44, 0.71, 1],
-    nodeHighlight: [0.95, 0.70, 0.25, 1],
-    nodeSelected: [0.09, 0.13, 0.20, 1],
+    node: [0.133, 0.827, 0.933, 1],
+    nodeCluster: [0.545, 0.361, 0.965, 1],
+    nodeHighlight: [0.404, 0.910, 0.976, 1],
+    nodeSelected: [0.906, 0.925, 0.965, 1],
     nodePalette: [
-      [0.30, 0.56, 0.85, 1],
-      [0.40, 0.73, 0.43, 1],
-      [0.94, 0.64, 0.23, 1],
-      [0.85, 0.37, 0.55, 1],
-      [0.55, 0.45, 0.85, 1],
-      [0.33, 0.75, 0.77, 1],
-      [0.93, 0.42, 0.34, 1],
-      [0.60, 0.65, 0.70, 1],
-      [0.72, 0.51, 0.33, 1],
-      [0.44, 0.62, 0.85, 1]
+      [0.133, 0.827, 0.933, 1],
+      [0.220, 0.741, 0.973, 1],
+      [0.404, 0.910, 0.976, 1],
+      [0.506, 0.549, 0.973, 1],
+      [0.545, 0.361, 0.965, 1],
+      [0.655, 0.545, 0.980, 1],
+      [0.176, 0.831, 0.749, 1],
+      [0.753, 0.518, 0.988, 1],
+      [0.376, 0.647, 0.980, 1],
+      [0.369, 0.918, 0.831, 1]
     ],
-    edge: [0.36, 0.46, 0.60, 0.26],
-    edgeHeavy: [0.40, 0.52, 0.68, 0.5],
-    clear: [0.031, 0.075, 0.114, 1]
+    edge: [0.545, 0.361, 0.965, 0.26],
+    edgeHeavy: [0.655, 0.545, 0.980, 0.5],
+    clear: [0.039, 0.055, 0.102, 1]
   }
 
   const theme = { ...defaultTheme }

package/dist/application/frontend/client/rendering.js

@@ -13,7 +13,7 @@ const drawFallback = () => {
   canvas.width = Math.floor(width * ratio)
   canvas.height = Math.floor(height * ratio)
   ctx2dFallback.setTransform(ratio, 0, 0, ratio, 0, 0)
-  ctx2dFallback.fillStyle = '#08131d'
+  ctx2dFallback.fillStyle = '#0a0e1a'
   ctx2dFallback.fillRect(0, 0, width, height)
 
   const nodes = Array.isArray(state.chunk.nodes) ? state.chunk.nodes : []
@@ -23,7 +23,7 @@ const drawFallback = () => {
     nodeById.set(nodes[i][0], nodes[i])
   }
 
-  ctx2dFallback.strokeStyle = 'rgba(158,188,220,0.32)'
+  ctx2dFallback.strokeStyle = 'rgba(139,92,246,0.34)'
   ctx2dFallback.lineWidth = 1.2
   for (let i = 0; i < edges.length; i += 1) {
     const edge = edges[i]
@@ -46,13 +46,13 @@ const drawFallback = () => {
     const radius = Math.max(3.8, Math.min(18, 5.5 + node[7] * 0.7))
 
     ctx2dFallback.beginPath()
-    ctx2dFallback.fillStyle = selected ? '#edf4ff' : color
+    ctx2dFallback.fillStyle = selected ? '#e7ecf6' : color
     ctx2dFallback.arc(p.x, p.y, radius, 0, Math.PI * 2)
     ctx2dFallback.fill()
   }
 
-  ctx2dFallback.fillStyle = '#97a9bd'
-  ctx2dFallback.font = '12px Inter, system-ui, sans-serif'
+  ctx2dFallback.fillStyle = '#8b94ab'
+  ctx2dFallback.font = '12px "DM Sans", system-ui, sans-serif'
   ctx2dFallback.textAlign = 'center'
   ctx2dFallback.fillText('Fallback canvas mode', Math.max(width, 320) / 2, 24)
 }

package/dist/application/frontend/client/scope-theme.js

@@ -46,29 +46,34 @@ const parseColor = (hex) => {
   ]
 }
 
+// Unified neon identity (shared with the SaaS app): cyan nodes (#22d3ee),
+// violet edges/context (#8b5cf6), on the #0a0e1a base. The palette threads
+// cyan→violet with a few supporting neons so context grouping stays legible
+// while reading as one coherent, on-brand cluster field.
 const graphTheme = {
-  node: parseColor('#5aa8ff'),
-  nodeCluster: parseColor('#3f7fbd'),
-  nodeHighlight: parseColor('#ffcb67'),
-  nodeSelected: parseColor('#edf4ff'),
+  node: parseColor('#22d3ee'),
+  nodeCluster: parseColor('#8b5cf6'),
+  nodeHighlight: parseColor('#67e8f9'),
+  nodeSelected: parseColor('#e7ecf6'),
   nodePalette: [
-    parseColor('#5aa8ff'),
-    parseColor('#5ecf92'),
-    parseColor('#ffb65c'),
-    parseColor('#ff7dac'),
-    parseColor('#a88fff'),
-    parseColor('#59d0dd'),
-    parseColor('#ff8f6a'),
-    parseColor('#a4b3c3'),
-    parseColor('#c9945f'),
-    parseColor('#7cb6ff')
+    parseColor('#22d3ee'),
+    parseColor('#38bdf8'),
+    parseColor('#67e8f9'),
+    parseColor('#818cf8'),
+    parseColor('#8b5cf6'),
+    parseColor('#a78bfa'),
+    parseColor('#2dd4bf'),
+    parseColor('#c084fc'),
+    parseColor('#60a5fa'),
+    parseColor('#5eead4')
   ],
-  edge: [0.62, 0.74, 0.86, 0.24],
-  edgeHeavy: [0.66, 0.78, 0.9, 0.46],
-  clear: parseColor('#08131d')
+  // Edges read as violet-tinted "context" links against the cyan node field.
+  edge: [0.545, 0.361, 0.965, 0.24],
+  edgeHeavy: [0.655, 0.545, 0.98, 0.46],
+  clear: parseColor('#0a0e1a')
 }
 
-const segmentPalette = ['#5aa8ff', '#5ecf92', '#ffb65c', '#ff7dac', '#a88fff', '#59d0dd', '#ff8f6a', '#a4b3c3', '#c9945f', '#7cb6ff']
+const segmentPalette = ['#22d3ee', '#38bdf8', '#67e8f9', '#818cf8', '#8b5cf6', '#a78bfa', '#2dd4bf', '#c084fc', '#60a5fa', '#5eead4']
 
 const segmentColorIndex = (segment) => {
   const value = String(segment || '')

package/dist/application/frontend/client-css.js

@@ -1,9 +1,13 @@
 import { readFileSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
+import { neonFontImport, neonRootTokens } from './neon-theme.js';
 // Crowquill Mono ships with the package under assets/fonts. Inline each face as a
 // base64 woff2 data URI so the served CSS is self-contained (no extra route, no
-// path resolution) and works identically for a global npm install. A missing
-// file degrades gracefully to the monospace fallback stack.
+// path resolution) and works identically for a global npm install. It is kept
+// as the monospace face for graph node ids / code; a missing file degrades
+// gracefully to the monospace fallback stack. Headings/body use the unified
+// neon typography (Space Grotesk / DM Sans) via a Google Fonts @import with a
+// robust system fallback so the UI still reads correctly offline.
 const embedFontFace = (weight, style, file) => {
     try {
         const path = fileURLToPath(new URL(`../../../assets/fonts/${file}`, import.meta.url));
@@ -22,18 +26,10 @@ const crowquillFontFaces = () => [
 ]
     .filter(Boolean)
     .join('\n');
-export const createClientCss = () => `${crowquillFontFaces()}
+export const createClientCss = () => `${neonFontImport()}
+${crowquillFontFaces()}
 :root {
-  color-scheme: dark;
-  --bg: #071019;
-  --panel: #0d1823;
-  --panel-strong: #112130;
-  --line: rgba(143, 172, 204, 0.18);
-  --text: #edf4ff;
-  --muted: #97a9bd;
-  --accent: #5aa8ff;
-  --accent-weak: rgba(90, 168, 255, 0.18);
-  --danger: #ff6b6b;
+${neonRootTokens()}
 }
 
 * {
@@ -47,7 +43,7 @@ body {
   margin: 0;
   background: var(--bg);
   color: var(--text);
-  font-family: "Crowquill Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-family: var(--font-body);
 }
 
 body {
@@ -63,6 +59,11 @@ select {
   font: inherit;
 }
 
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
 .shell {
   flex: 1 1 auto;
   width: 100%;
@@ -88,9 +89,9 @@ select {
   min-height: 72px;
   padding: 10px 16px;
   border-bottom: 1px solid var(--line);
-  background: rgba(9, 18, 28, 0.92);
-  box-shadow: 0 1px 14px rgba(1, 6, 13, 0.42);
-  backdrop-filter: blur(8px);
+  background: rgba(10, 14, 26, 0.78);
+  box-shadow: 0 1px 24px rgba(2, 6, 18, 0.5);
+  backdrop-filter: blur(14px);
 }
 
 .brand-block {
@@ -100,7 +101,15 @@ select {
 }
 
 .brand-block strong {
+  font-family: var(--font-heading);
   font-size: 18px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  background: var(--gradient);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
 }
 
 .graph-stage {
@@ -111,11 +120,12 @@ select {
   user-select: none;
   -webkit-user-select: none;
   background:
-    linear-gradient(rgba(164, 197, 230, 0.05) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(164, 197, 230, 0.05) 1px, transparent 1px),
-    radial-gradient(circle at top, rgba(43, 93, 143, 0.22), transparent 44%),
-    #08131d;
-  background-size: 28px 28px, 28px 28px, auto;
+    linear-gradient(rgba(34, 211, 238, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(139, 92, 246, 0.05) 1px, transparent 1px),
+    radial-gradient(circle at 50% -6%, rgba(34, 211, 238, 0.14), transparent 46%),
+    radial-gradient(circle at 82% 12%, rgba(139, 92, 246, 0.12), transparent 44%),
+    var(--bg);
+  background-size: 30px 30px, 30px 30px, auto, auto;
   overflow: hidden;
 }
 
@@ -161,21 +171,23 @@ select {
   max-width: 220px;
   transform: translate(-50%, calc(-100% - 12px));
   padding: 4px 8px;
-  border: 1px solid rgba(143, 172, 204, 0.18);
+  border: 1px solid var(--line);
   border-radius: 6px;
-  background: rgba(7, 16, 25, 0.92);
+  background: rgba(10, 14, 26, 0.9);
   color: var(--text);
+  font-family: var(--font-mono);
   font-size: 11px;
   line-height: 1.25;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  box-shadow: 0 12px 28px rgba(1, 6, 13, 0.36);
+  box-shadow: 0 12px 28px rgba(2, 6, 18, 0.4);
 }
 
 .graph-label.is-focused {
-  border-color: rgba(90, 168, 255, 0.56);
-  color: #d7e9ff;
+  border-color: rgba(34, 211, 238, 0.56);
+  color: var(--accent-hover);
+  box-shadow: var(--glow-cyan);
 }
 
 .graph-tooltip {
@@ -185,12 +197,13 @@ select {
   padding: 8px 10px;
   border: 1px solid var(--line);
   border-radius: 6px;
-  background: rgba(9, 18, 28, 0.96);
+  background: rgba(15, 20, 32, 0.96);
   color: var(--text);
   font-size: 12px;
   line-height: 1.35;
   pointer-events: none;
-  box-shadow: 0 18px 44px rgba(1, 6, 13, 0.42);
+  backdrop-filter: blur(8px);
+  box-shadow: 0 18px 44px rgba(2, 6, 18, 0.5);
 }
 
 .graph-tooltip strong,
@@ -212,10 +225,11 @@ select {
   z-index: 3;
   width: 180px;
   height: 120px;
-  border: 1px solid rgba(143, 172, 204, 0.18);
+  border: 1px solid var(--line);
   border-radius: 8px;
-  background: rgba(8, 19, 29, 0.84);
-  box-shadow: 0 18px 40px rgba(1, 6, 13, 0.36);
+  background: rgba(15, 20, 32, 0.82);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 18px 40px rgba(2, 6, 18, 0.42);
 }
 
 .eyebrow {
@@ -257,6 +271,7 @@ select {
 .agent-filter select:focus,
 .context-filter select:focus {
   border-color: var(--accent);
+  box-shadow: var(--glow-cyan);
 }
 
 .toolbar {
@@ -298,8 +313,11 @@ select {
 }
 
 .metric-chip strong {
+  font-family: var(--font-heading);
   font-size: 15px;
   line-height: 1;
+  font-variant-numeric: tabular-nums;
+  color: var(--accent);
 }
 
 .metric-chip small {
@@ -367,11 +385,11 @@ li small {
   padding: 12px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: #091521;
+  background: rgba(10, 14, 26, 0.72);
   color: var(--text);
   white-space: pre-wrap;
   overflow: auto;
-  font-family: "Crowquill Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-family: var(--font-mono);
   font-size: 12px;
   line-height: 1.5;
 }
@@ -565,6 +583,8 @@ li small {
 
 .content-dialog h2 {
   margin-top: 6px;
+  font-family: var(--font-heading);
+  font-weight: 600;
   font-size: 19px;
   line-height: 1.15;
   overflow-wrap: anywhere;
@@ -629,7 +649,7 @@ li small {
   padding: 10px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: #091521;
+  background: rgba(10, 14, 26, 0.6);
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
   gap: 8px;
@@ -703,7 +723,7 @@ li small {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(180deg, rgba(7, 16, 25, 0), rgba(7, 16, 25, 0.84));
+  background: linear-gradient(180deg, rgba(10, 14, 26, 0), rgba(10, 14, 26, 0.84));
 }
 
 .app-footer small {