@andespindola/brainlink 1.6.15 → 1.8.0

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

@@ -0,0 +1,436 @@
+// Self-contained branded "Connect your agent" page for the graph web server.
+// Served as a 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, the settings page 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.
+//
+// The page renders ready-to-paste MCP setup so a graph owner can wire their
+// agents (Codex, Claude Code, ChatGPT/MCP) to this brainlink. It has two modes,
+// picked server-side:
+//   - remote:  the server is exposed AND an MCP token is configured. Snippets
+//              point at the request host over HTTPS and carry a bearer token.
+//   - local:   no token / not exposed. Snippets run the local stdio MCP server
+//              against the server's configured vault path — never a token.
+// This page is only ever served behind the same session gate as /settings, so
+// the token is shown only to the authenticated graph owner.
+import { neonAmbientEffects, neonFontImport, neonGridBackground, neonRootTokens, neonWordmark } from './neon-theme.js';
+// HTML-escape for text interpolated into the served document. Snippets are
+// rendered as textContent client-side, but the AGENTS.md / labels are inlined,
+// so escape defensively to keep the page well-formed and injection-free.
+const escapeHtml = (value) => value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+// The compact operating contract shown on the page and offered as a ready
+// AGENTS.md. Neutral/professional, referencing only the agent product names.
+export const connectAgentsMarkdown = () => `# Brainlink — canonical memory
+
+Brainlink is your canonical, persistent memory across turns and sessions. Treat
+it as the continuity of your cognition, not an optional lookup.
+
+## At session start
+- Run \`brainlink_bootstrap\` with a short \`query\` describing the task. Re-run it
+  whenever your context is stale.
+
+## Before you act
+- Consult Brainlink before any decision, recommendation, question, or
+  implementation. Never act from memory alone when durable context may exist.
+- Retrieve with \`strategy: "auto"\` (CAG on a fresh pack, RAG otherwise) and
+  \`mode: "hybrid"\` (FTS + semantic) unless a narrower mode clearly fits.
+
+## After you learn
+- Write durable learnings back with \`brainlink_remember\` (or
+  \`brainlink_add_note\` for structured notes), then reindex with
+  \`brainlink_index\`.
+- Write connected memory: include \`[[wiki links]]\`, tags, and priority markers
+  so notes join the knowledge graph instead of sitting orphaned.
+`;
+const connectStyles = () => `${neonFontImport()}
+:root {
+${neonRootTokens()}
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100%;
+  min-height: 100%;
+  margin: 0;
+}
+
+body {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  min-height: 100vh;
+  min-height: 100dvh;
+  padding: 40px 24px;
+  color: var(--text);
+  font-family: var(--font-body);
+${neonGridBackground()}
+}
+
+${neonAmbientEffects()}
+
+button {
+  font: inherit;
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.connect-card {
+  width: 100%;
+  max-width: 720px;
+  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;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .connect-card {
+    animation: none;
+  }
+}
+
+.connect-brand {
+  display: grid;
+  gap: 4px;
+  margin-bottom: 20px;
+}
+
+.connect-brand strong {
+  font-family: var(--font-heading);
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+${neonWordmark()}
+}
+
+.connect-brand span {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.connect-lede {
+  margin: 0 0 8px;
+  color: var(--text);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.connect-mode {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 20px;
+  padding: 6px 12px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: rgba(19, 26, 42, 0.55);
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.connect-mode strong {
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.connect-endpoint {
+  display: grid;
+  gap: 6px;
+  margin-bottom: 24px;
+  padding: 12px 14px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: rgba(19, 26, 42, 0.55);
+}
+
+.connect-endpoint span {
+  color: var(--muted);
+  font-size: 11px;
+  letter-spacing: 0.02em;
+}
+
+.connect-endpoint code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--accent);
+  overflow-wrap: anywhere;
+}
+
+.connect-section {
+  margin-top: 26px;
+  padding-top: 22px;
+  border-top: 1px solid var(--line);
+  display: grid;
+  gap: 12px;
+}
+
+.connect-section h2 {
+  margin: 0;
+  font-family: var(--font-heading);
+  font-weight: 600;
+  font-size: 16px;
+  letter-spacing: 0.01em;
+}
+
+.connect-hint {
+  margin: 0;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.connect-hint code {
+  font-family: var(--font-mono);
+  color: var(--accent);
+}
+
+.connect-snippet {
+  position: relative;
+  display: grid;
+  gap: 8px;
+}
+
+.connect-snippet pre {
+  margin: 0;
+  padding: 14px 16px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: rgba(10, 14, 26, 0.75);
+  overflow-x: auto;
+}
+
+.connect-snippet code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text);
+  white-space: pre;
+}
+
+.connect-copy {
+  justify-self: start;
+  height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: rgba(19, 26, 42, 0.7);
+  color: var(--text);
+  cursor: pointer;
+  font-size: 12px;
+  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
+}
+
+.connect-copy:hover,
+.connect-copy:focus {
+  border-color: var(--accent);
+  background: var(--accent-weak);
+  box-shadow: var(--glow-cyan);
+}
+
+.connect-back {
+  display: inline-block;
+  margin-top: 24px;
+  color: var(--muted);
+  font-size: 12px;
+  text-decoration: none;
+}
+
+.connect-back:hover,
+.connect-back:focus {
+  color: var(--accent);
+}`;
+// One inline copy-button behaviour reused for every snippet, mirroring the
+// settings page: prefer the async clipboard API, fall back to a text selection.
+const connectScript = () => `(function () {
+  var buttons = document.querySelectorAll('.connect-copy');
+
+  function flash(button) {
+    var original = button.getAttribute('data-label') || 'Copy';
+    button.textContent = 'Copied';
+    setTimeout(function () {
+      button.textContent = original;
+    }, 1200);
+  }
+
+  Array.prototype.forEach.call(buttons, function (button) {
+    button.setAttribute('data-label', button.textContent);
+    button.addEventListener('click', function () {
+      var targetId = button.getAttribute('data-target');
+      var target = targetId ? document.getElementById(targetId) : null;
+      if (!target) {
+        return;
+      }
+      var text = target.textContent || '';
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).then(
+          function () {
+            flash(button);
+          },
+          function () {
+            selectText(target);
+          }
+        );
+        return;
+      }
+      selectText(target);
+      try {
+        document.execCommand('copy');
+        flash(button);
+      } catch (err) {
+        // Selection is left in place so the user can copy manually.
+      }
+    });
+  });
+
+  function selectText(node) {
+    if (typeof window.getSelection !== 'function' || typeof document.createRange !== 'function') {
+      return;
+    }
+    var selection = window.getSelection();
+    var range = document.createRange();
+    range.selectNodeContents(node);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
+})();`;
+// A snippet block: a titled hint, a <pre><code> with a stable id, and its copy
+// button. The code body is escaped so it survives interpolation verbatim.
+const snippetBlock = (id, title, hint, body) => `
+      <div class="connect-snippet">
+        <p class="connect-hint"><strong>${escapeHtml(title)}</strong> — ${hint}</p>
+        <pre><code id="${escapeHtml(id)}">${escapeHtml(body)}</code></pre>
+        <button class="connect-copy" type="button" data-target="${escapeHtml(id)}">Copy</button>
+      </div>`;
+const remoteSnippets = (mcpUrl, token) => {
+    const codexToml = `[mcp_servers.brainlink]
+command = "npx"
+args = ["-y", "mcp-remote", "${mcpUrl}"]
+
+[mcp_servers.brainlink.env]
+MCP_AUTHORIZATION = "Bearer ${token}"`;
+    const claudeCmd = `claude mcp add --transport http brainlink ${mcpUrl} --header "Authorization: Bearer ${token}"`;
+    const mcpJson = `{
+  "mcpServers": {
+    "brainlink": {
+      "type": "http",
+      "url": "${mcpUrl}",
+      "headers": {
+        "Authorization": "Bearer ${token}"
+      }
+    }
+  }
+}`;
+    const chatgptCmd = `Connector URL: ${mcpUrl}
+Authorization: Bearer ${token}`;
+    return `
+    <section class="connect-section" aria-labelledby="codexTitle">
+      <h2 id="codexTitle">Codex</h2>
+      ${snippetBlock('codexSnippet', '~/.codex/config.toml', 'add this MCP server block, then restart Codex.', codexToml)}
+    </section>
+    <section class="connect-section" aria-labelledby="claudeTitle">
+      <h2 id="claudeTitle">Claude Code</h2>
+      ${snippetBlock('claudeSnippet', 'terminal', 'register the remote server over streamable HTTP.', claudeCmd)}
+    </section>
+    <section class="connect-section" aria-labelledby="mcpJsonTitle">
+      <h2 id="mcpJsonTitle">.mcp.json</h2>
+      ${snippetBlock('mcpJsonSnippet', 'project .mcp.json', 'drop-in config for any MCP client that reads .mcp.json.', mcpJson)}
+    </section>
+    <section class="connect-section" aria-labelledby="chatgptTitle">
+      <h2 id="chatgptTitle">ChatGPT / generic MCP</h2>
+      ${snippetBlock('chatgptSnippet', 'connector', 'point a generic MCP connector at the endpoint with a bearer token.', chatgptCmd)}
+    </section>`;
+};
+const localSnippets = (vaultPath) => {
+    const codexToml = `[mcp_servers.brainlink]
+command = "brainlink"
+args = ["mcp-server", "--vault", "${vaultPath}"]`;
+    const claudeCmd = `claude mcp add brainlink -- brainlink mcp-server --vault ${vaultPath}`;
+    const mcpJson = `{
+  "mcpServers": {
+    "brainlink": {
+      "command": "brainlink",
+      "args": ["mcp-server", "--vault", "${vaultPath}"]
+    }
+  }
+}`;
+    return `
+    <section class="connect-section" aria-labelledby="codexTitle">
+      <h2 id="codexTitle">Codex</h2>
+      ${snippetBlock('codexSnippet', '~/.codex/config.toml', 'run the local MCP server over stdio, then restart Codex.', codexToml)}
+    </section>
+    <section class="connect-section" aria-labelledby="claudeTitle">
+      <h2 id="claudeTitle">Claude Code</h2>
+      ${snippetBlock('claudeSnippet', 'terminal', 'register the local stdio server.', claudeCmd)}
+    </section>
+    <section class="connect-section" aria-labelledby="mcpJsonTitle">
+      <h2 id="mcpJsonTitle">.mcp.json</h2>
+      ${snippetBlock('mcpJsonSnippet', 'project .mcp.json', 'drop-in stdio config for any MCP client that reads .mcp.json.', mcpJson)}
+    </section>`;
+};
+const modeBadge = (mode) => mode === 'remote'
+    ? '<div class="connect-mode">Mode <strong>Remote</strong> · authenticated over HTTPS with your token</div>'
+    : '<div class="connect-mode">Mode <strong>Local</strong> · stdio MCP server on this machine</div>';
+const endpointBlock = (data) => data.mode === 'remote'
+    ? `<div class="connect-endpoint">
+        <span>MCP endpoint</span>
+        <code>${escapeHtml(data.mcpUrl)}</code>
+        <span>Authorization</span>
+        <code>Bearer ${escapeHtml(data.token)}</code>
+      </div>`
+    : `<div class="connect-endpoint">
+        <span>Vault path</span>
+        <code>${escapeHtml(data.vaultPath)}</code>
+      </div>`;
+export const createConnectPageHtml = (data) => {
+    const snippets = data.mode === 'remote' ? remoteSnippets(data.mcpUrl, data.token) : localSnippets(data.vaultPath);
+    const lede = data.mode === 'remote'
+        ? 'Wire your agents and chats to this brainlink over the remote MCP endpoint. Paste a snippet, keep your token private.'
+        : 'Wire your agents and chats to this brainlink by running the local MCP server against your vault. Paste a snippet to get started.';
+    return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Connect your agent · Brainlink</title>
+    <style>${connectStyles()}</style>
+  </head>
+  <body>
+    <main class="connect-card">
+      <div class="connect-brand">
+        <strong>Brainlink</strong>
+        <span>Connect your agent</span>
+      </div>
+      <p class="connect-lede">${escapeHtml(lede)}</p>
+      ${modeBadge(data.mode)}
+      ${endpointBlock(data)}
+      ${snippets}
+      <section class="connect-section" aria-labelledby="agentsTitle">
+        <h2 id="agentsTitle">Ready AGENTS.md</h2>
+        <p class="connect-hint">Drop this operating contract into your agent so it treats this brainlink as canonical memory.</p>
+        <div class="connect-snippet">
+          <pre><code id="agentsSnippet">${escapeHtml(connectAgentsMarkdown())}</code></pre>
+          <button class="connect-copy" type="button" data-target="agentsSnippet">Copy</button>
+        </div>
+      </section>
+      <a class="connect-back" href="/">&larr; Back to graph</a>
+    </main>
+    <script>${connectScript()}</script>
+  </body>
+</html>`;
+};

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>