@andespindola/brainlink 1.6.14 → 1.7.0

package/dist/application/frontend/login-page.js

@@ -1,167 +1,13 @@
 // Self-contained branded auth pages for the graph web server. These are served
-// as plain strings (inline <style> + inline <script>, no external assets, no
-// framework) so they work identically for a global npm install. The visual
-// identity mirrors the graph client (see client-css.ts / client-html.ts): dark
-// theme on #08131d, Crowquill Mono with a monospace fallback, and the #5aa8ff
-// accent used for graph nodes.
-const authStyles = () => `:root {
-  color-scheme: dark;
-  --bg: #08131d;
-  --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;
-  --success: #57d9a3;
-}
-
-* {
-  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: "Crowquill Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-  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;
-}
-
-button,
-input {
-  font: inherit;
-}
-
-.auth-card {
-  width: 100%;
-  max-width: 380px;
-  padding: 32px 28px;
-  border: 1px solid var(--line);
-  border-radius: 14px;
-  background: rgba(13, 24, 35, 0.92);
-  box-shadow: 0 24px 80px rgba(1, 6, 13, 0.48);
-  backdrop-filter: blur(8px);
-}
-
-.auth-brand {
-  display: grid;
-  gap: 4px;
-  margin-bottom: 24px;
-}
-
-.auth-brand strong {
-  font-size: 26px;
-  letter-spacing: 0.01em;
-}
-
-.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: 8px;
-  outline: none;
-  background: rgba(12, 24, 36, 0.94);
-  color: var(--text);
-}
-
-.auth-field input:focus {
-  border-color: var(--accent);
-}
-
-.auth-submit {
-  height: 44px;
-  margin-top: 4px;
-  border: 1px solid var(--accent);
-  border-radius: 8px;
-  background: var(--accent-weak);
-  color: var(--text);
-  cursor: pointer;
-  transition: background 120ms ease, opacity 120ms ease;
-}
-
-.auth-submit:hover:not(:disabled),
-.auth-submit:focus:not(:disabled) {
-  background: rgba(90, 168, 255, 0.3);
-}
-
-.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;
-}
-
-.auth-back:hover,
-.auth-back:focus {
-  color: var(--accent);
-}`;
+// as plain strings (inline <style> + inline <script>, no external assets beyond
+// the shared Google Fonts @import, no framework) so they work identically for a
+// global npm install. The visual identity is the unified neon system shared
+// with the SaaS app (see neon-theme.ts): #0a0e1a base, cyan #22d3ee + violet
+// #8b5cf6, Space Grotesk headings / DM Sans body, glass card + gradient
+// wordmark + ambient glow, so the app -> SSO -> graph handoff reads as one
+// product.
+import { authSharedStyles } from './auth-styles.js';
+const authStyles = () => authSharedStyles(380);
 const documentShell = (title, body, script) => `<!DOCTYPE html>
 <html lang="en">
   <head>

package/dist/application/frontend/neon-theme.js

@@ -0,0 +1,110 @@
+// Single source of truth for the unified neon identity shared by every
+// self-contained page served by the graph web server (login, settings, OAuth
+// authorize, and the graph explorer CSS). Keeping the tokens, font import and
+// ambient effects in one place means the app -> SSO -> graph handoff reads as a
+// single product, and a palette change lands everywhere at once.
+//
+// The identity mirrors the SaaS app: #0a0e1a base, cyan #22d3ee + violet
+// #8b5cf6 accents, Space Grotesk headings / DM Sans body via a Google Fonts
+// @import with a robust system fallback so it degrades gracefully offline. A
+// monospace stack stays for tokens / code / graph node ids.
+// Google Fonts @import for Space Grotesk (headings) + DM Sans (body). Placed at
+// the very top of the served stylesheet as @import requires. If the network is
+// unavailable the fallback stacks in --font-heading / --font-body take over.
+export const neonFontImport = () => "@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');";
+// Font-family stacks. Fallbacks keep the layout correct and legible offline.
+export const neonFontStacks = () => `  --font-heading: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-mono: "Crowquill Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;`;
+// The canonical color tokens. Cyan is the primary/node accent, violet the
+// secondary/context accent; together they form the primary gradient.
+export const neonColorTokens = () => `  --bg: #0a0e1a;
+  --surface: #0f1420;
+  --surface-2: #131a2a;
+  --panel: rgba(15, 20, 32, 0.82);
+  --panel-strong: rgba(19, 26, 42, 0.92);
+  --line: rgba(255, 255, 255, 0.09);
+  --line-strong: rgba(255, 255, 255, 0.14);
+  --text: #e7ecf6;
+  --muted: #8b94ab;
+  --accent: #22d3ee;
+  --accent-hover: #67e8f9;
+  --accent-weak: rgba(34, 211, 238, 0.16);
+  --violet: #8b5cf6;
+  --violet-hover: #a78bfa;
+  --gradient: linear-gradient(120deg, #22d3ee, #8b5cf6);
+  --glow-cyan: 0 0 0 1px rgba(34, 211, 238, 0.4), 0 0 22px rgba(34, 211, 238, 0.28);
+  --danger: #ff6b6b;
+  --success: #57d9a3;`;
+// Full :root token block (colors + fonts) for the branded auth-style pages.
+export const neonRootTokens = () => `  color-scheme: dark;
+${neonColorTokens()}
+${neonFontStacks()}`;
+// The faint cyber-grid + soft radial glow background used on branded screens.
+// Layered so the grid sits above the base and the radial glow blooms from the
+// top. Kept as a reusable string so login / authorize / settings / graph-stage
+// all render the exact same backdrop.
+export const neonGridBackground = () => `  background:
+    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% -10%, rgba(34, 211, 238, 0.16), transparent 46%),
+    radial-gradient(circle at 82% 8%, rgba(139, 92, 246, 0.14), transparent 42%),
+    var(--bg);
+  background-size: 30px 30px, 30px 30px, auto, auto;`;
+// A gradient wordmark: cyan -> violet text clipped to the glyphs. Used for the
+// "Brainlink" brand lockup so every entry point shares the same signature.
+export const neonWordmark = () => `  background: var(--gradient);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;`;
+// Slow ambient glow "blobs" behind branded cards, plus reduced-motion + focus
+// helpers. Scoped to the branded auth-style pages via the ::before/::after on
+// body; the caller supplies the body selector context.
+export const neonAmbientEffects = () => `@keyframes neon-blob-a {
+  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
+  50% { transform: translate3d(6%, 8%, 0) scale(1.12); }
+}
+
+@keyframes neon-blob-b {
+  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
+  50% { transform: translate3d(-7%, -6%, 0) scale(0.92); }
+}
+
+@keyframes neon-fade-up {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+body::before,
+body::after {
+  content: "";
+  position: fixed;
+  z-index: -1;
+  width: 46vmax;
+  height: 46vmax;
+  border-radius: 50%;
+  filter: blur(90px);
+  pointer-events: none;
+}
+
+body::before {
+  top: -18vmax;
+  left: -14vmax;
+  background: radial-gradient(circle, rgba(34, 211, 238, 0.12), transparent 70%);
+  animation: neon-blob-a 22s ease-in-out infinite;
+}
+
+body::after {
+  right: -16vmax;
+  bottom: -18vmax;
+  background: radial-gradient(circle, rgba(139, 92, 246, 0.12), transparent 70%);
+  animation: neon-blob-b 26s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  body::before,
+  body::after {
+    animation: none;
+  }
+}`;

package/dist/application/frontend/settings-page.js

@@ -1,21 +1,14 @@
 // Self-contained branded Settings page for the graph web server. Served as a
-// plain string (inline <style> + inline <script>, no external assets, no
-// framework) so it works identically for a global npm install. The visual
-// identity mirrors the auth pages (see login-page.ts / oauth-authorize-page.ts):
-// dark theme on #08131d, the same grid/radial gradient, Crowquill Mono with a
-// monospace fallback, and the #5aa8ff accent used for graph nodes.
-const settingsStyles = () => `:root {
-  color-scheme: dark;
-  --bg: #08131d;
-  --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;
-  --success: #57d9a3;
+// plain string (inline <style> + inline <script>, no external assets beyond the
+// shared Google Fonts @import, no framework) so it works identically for a
+// global npm install. The visual identity is the unified neon system shared
+// with the auth pages and the graph client (see neon-theme.ts): #0a0e1a base,
+// faint cyber grid, cyan #22d3ee + violet #8b5cf6, Space Grotesk headings / DM
+// Sans body, glass card + gradient wordmark + cyan focus glow.
+import { neonAmbientEffects, neonFontImport, neonGridBackground, neonRootTokens, neonWordmark } from './neon-theme.js';
+const settingsStyles = () => `${neonFontImport()}
+:root {
+${neonRootTokens()}
 }
 
 * {
@@ -37,30 +30,40 @@ body {
   min-height: 100dvh;
   padding: 24px;
   color: var(--text);
-  font-family: "Crowquill Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-  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;
+  font-family: var(--font-body);
+${neonGridBackground()}
 }
 
+${neonAmbientEffects()}
+
 button,
 input,
-select {
+select,
+textarea {
   font: inherit;
 }
 
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
 .settings-card {
   width: 100%;
   max-width: 440px;
   padding: 32px 28px;
   border: 1px solid var(--line);
-  border-radius: 14px;
-  background: rgba(13, 24, 35, 0.92);
-  box-shadow: 0 24px 80px rgba(1, 6, 13, 0.48);
-  backdrop-filter: blur(8px);
+  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;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .settings-card {
+    animation: none;
+  }
 }
 
 .settings-brand {
@@ -70,8 +73,11 @@ select {
 }
 
 .settings-brand strong {
-  font-size: 26px;
-  letter-spacing: 0.01em;
+  font-family: var(--font-heading);
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+${neonWordmark()}
 }
 
 .settings-brand span {
@@ -101,15 +107,17 @@ select {
   height: 42px;
   padding: 0 14px;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: 10px;
   outline: none;
-  background: rgba(12, 24, 36, 0.94);
+  background: rgba(19, 26, 42, 0.7);
   color: var(--text);
+  transition: border-color 150ms ease, box-shadow 150ms ease;
 }
 
 .settings-field input:focus,
 .settings-field select:focus {
   border-color: var(--accent);
+  box-shadow: var(--glow-cyan);
 }
 
 .settings-check {
@@ -134,17 +142,22 @@ select {
 .settings-submit {
   height: 44px;
   margin-top: 4px;
-  border: 1px solid var(--accent);
-  border-radius: 8px;
-  background: var(--accent-weak);
-  color: var(--text);
+  border: 1px solid transparent;
+  border-radius: 10px;
+  background: var(--gradient);
+  color: #05070f;
+  font-weight: 600;
   cursor: pointer;
-  transition: background 120ms ease, opacity 120ms ease;
+  transition: box-shadow 150ms ease, transform 120ms ease, opacity 120ms ease;
 }
 
 .settings-submit:hover:not(:disabled),
 .settings-submit:focus:not(:disabled) {
-  background: rgba(90, 168, 255, 0.3);
+  box-shadow: 0 0 24px rgba(34, 211, 238, 0.4), 0 0 40px rgba(139, 92, 246, 0.28);
+}
+
+.settings-submit:active:not(:disabled) {
+  transform: scale(0.97);
 }
 
 .settings-submit:disabled {
@@ -195,6 +208,8 @@ select {
 
 .settings-section h2 {
   margin: 0;
+  font-family: var(--font-heading);
+  font-weight: 600;
   font-size: 16px;
   letter-spacing: 0.01em;
 }
@@ -210,28 +225,34 @@ select {
   margin: 0;
   padding: 10px 12px;
   border: 1px solid var(--line);
-  border-radius: 8px;
-  background: rgba(12, 24, 36, 0.6);
+  border-radius: 10px;
+  background: rgba(19, 26, 42, 0.55);
   color: var(--muted);
   font-size: 12px;
   line-height: 1.5;
   overflow-wrap: anywhere;
 }
 
+.settings-status code {
+  font-family: var(--font-mono);
+  color: var(--accent);
+}
+
 .settings-secondary {
   height: 42px;
   border: 1px solid var(--line);
-  border-radius: 8px;
-  background: rgba(12, 24, 36, 0.94);
+  border-radius: 10px;
+  background: rgba(19, 26, 42, 0.7);
   color: var(--text);
   cursor: pointer;
-  transition: border-color 120ms ease, background 120ms ease, opacity 120ms ease;
+  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, opacity 120ms ease;
 }
 
 .settings-secondary:hover:not(:disabled),
 .settings-secondary:focus:not(:disabled) {
   border-color: var(--accent);
-  background: rgba(90, 168, 255, 0.14);
+  background: var(--accent-weak);
+  box-shadow: var(--glow-cyan);
 }
 
 .settings-secondary:disabled {
@@ -253,19 +274,21 @@ select {
   min-height: 96px;
   padding: 10px 12px;
   border: 1px solid var(--line);
-  border-radius: 8px;
+  border-radius: 10px;
   outline: none;
   resize: vertical;
-  background: rgba(12, 24, 36, 0.94);
+  background: rgba(19, 26, 42, 0.7);
   color: var(--text);
-  font: inherit;
+  font-family: var(--font-mono);
   font-size: 11px;
   line-height: 1.4;
   overflow-wrap: anywhere;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
 }
 
 .settings-key textarea:focus {
   border-color: var(--accent);
+  box-shadow: var(--glow-cyan);
 }
 
 .settings-key-actions {
@@ -278,18 +301,19 @@ select {
   height: 32px;
   padding: 0 14px;
   border: 1px solid var(--line);
-  border-radius: 8px;
-  background: rgba(12, 24, 36, 0.94);
+  border-radius: 10px;
+  background: rgba(19, 26, 42, 0.7);
   color: var(--text);
   cursor: pointer;
   font-size: 12px;
-  transition: border-color 120ms ease, background 120ms ease;
+  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
 }
 
 .settings-copy:hover,
 .settings-copy:focus {
   border-color: var(--accent);
-  background: rgba(90, 168, 255, 0.14);
+  background: var(--accent-weak);
+  box-shadow: var(--glow-cyan);
 }`;
 const settingsScript = () => `(function () {
   var form = document.getElementById('settingsForm');

package/dist/application/get-image.js

@@ -0,0 +1,63 @@
+import { readFile } from 'node:fs/promises';
+import { isAbsolute, join, relative, resolve } from 'node:path';
+import { imageMimeForRef } from '../domain/image-refs.js';
+import { ensureVault } from '../infrastructure/file-system-vault.js';
+import { decryptVaultContent, isEncryptedVaultPayload, readOrCreateVaultKey } from '../infrastructure/vault-crypto.js';
+// The assets tree images are stored under; the only location get-image is
+// allowed to read from. Mirrors the constant used by add-image.
+const assetsRoot = '.brainlink/assets';
+const isInside = (parent, child) => {
+    const rel = relative(parent, child);
+    return rel !== '' && !rel.startsWith('..') && !isAbsolute(rel);
+};
+// Normalize the requested path to the logical (plaintext) asset path so the
+// returned descriptor is stable regardless of whether the caller passed the
+// `.enc` mirror or the plaintext path.
+const toLogicalPath = (assetPath) => assetPath.toLowerCase().endsWith('.enc') ? assetPath.slice(0, -'.enc'.length) : assetPath;
+// Read the raw bytes for a stored image, decrypting transparently when the
+// bytes on disk are an encrypted-at-rest payload. Prefers the plaintext file
+// and falls back to the `.enc` mirror, so it works whether the vault is
+// encrypted or not.
+const readAssetBytes = async (vaultRoot, logicalAbsolute) => {
+    const decryptIfNeeded = async (raw) => {
+        if (!isEncryptedVaultPayload(raw)) {
+            return { bytes: raw, encrypted: false };
+        }
+        // Only touch the key when the on-disk bytes are actually ciphertext, so a
+        // plaintext vault never mints a versioning key just to read an image.
+        const vaultKey = await readOrCreateVaultKey(vaultRoot);
+        return { bytes: decryptVaultContent(vaultKey, raw), encrypted: true };
+    };
+    try {
+        return await decryptIfNeeded(await readFile(logicalAbsolute));
+    }
+    catch (error) {
+        if (!(error instanceof Error) || !('code' in error) || error.code !== 'ENOENT') {
+            throw error;
+        }
+    }
+    return decryptIfNeeded(await readFile(`${logicalAbsolute}.enc`));
+};
+// Retrieve a stored image's raw bytes (base64) and mime so a second agent can
+// pull an image another agent added to the shared vault. The path is validated
+// to live inside `.brainlink/assets` (no traversal), and encrypted-at-rest
+// payloads are decrypted with the existing vault key.
+export const getImage = async (input) => {
+    const vaultRoot = await ensureVault(input.vaultPath);
+    const logicalPath = toLogicalPath(input.path);
+    const logicalAbsolute = resolve(vaultRoot, logicalPath);
+    const assetsAbsolute = join(vaultRoot, assetsRoot);
+    if (!isInside(assetsAbsolute, logicalAbsolute)) {
+        throw new Error(`Refusing to read image outside the vault assets tree: ${input.path}`);
+    }
+    const { bytes, encrypted } = await readAssetBytes(vaultRoot, logicalAbsolute);
+    const mime = imageMimeForRef(logicalPath) ?? 'application/octet-stream';
+    const relativePath = relative(vaultRoot, logicalAbsolute).split('\\').join('/');
+    return {
+        path: relativePath,
+        mime,
+        bytes: bytes.toString('base64'),
+        encrypted,
+        ...(input.alt?.trim() ? { alt: input.alt.trim() } : {})
+    };
+};