@andespindola/brainlink 0.1.0-beta.98 → 1.0.0

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

@@ -1,13 +1,13 @@
 export const createClientCss = () => `:root {
   color-scheme: dark;
-  --bg: #0d0f12;
-  --panel: #15191f;
-  --panel-strong: #1c222b;
-  --line: #29313c;
-  --text: #edf2f7;
-  --muted: #99a5b5;
-  --accent: #35d0a2;
-  --accent-weak: rgba(53, 208, 162, 0.14);
+  --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;
 }
 
@@ -63,7 +63,8 @@ select {
   min-height: 72px;
   padding: 10px 16px;
   border-bottom: 1px solid var(--line);
-  background: linear-gradient(180deg, rgba(17, 21, 27, 0.96) 0%, rgba(17, 21, 27, 0.86) 100%);
+  background: rgba(9, 18, 28, 0.92);
+  box-shadow: 0 1px 14px rgba(1, 6, 13, 0.42);
   backdrop-filter: blur(8px);
 }
 
@@ -81,33 +82,117 @@ select {
   position: relative;
   width: 100%;
   height: 100%;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
   background:
-    radial-gradient(circle at 18% 20%, rgba(53, 208, 162, 0.12), transparent 28rem),
-    linear-gradient(135deg, #0d0f12 0%, #12161c 55%, #0a0d10 100%);
+    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;
   overflow: hidden;
 }
 
-#graph,
-#graphGl {
+#graph {
   display: block;
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
+  touch-action: none;
 }
 
 #graph {
   cursor: grab;
 }
 
-#graphGl {
-  pointer-events: none;
+#graph.is-node-hover {
+  cursor: pointer;
+}
+
+#graph.is-node-dragging {
+  cursor: move;
 }
 
 #graph:active {
   cursor: grabbing;
 }
 
+.graph-labels {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+  transition: opacity 120ms ease;
+}
+
+.graph-labels.is-stale {
+  opacity: 0;
+}
+
+.graph-label {
+  position: absolute;
+  max-width: 220px;
+  transform: translate(-50%, calc(-100% - 12px));
+  padding: 4px 8px;
+  border: 1px solid rgba(143, 172, 204, 0.18);
+  border-radius: 6px;
+  background: rgba(7, 16, 25, 0.92);
+  color: var(--text);
+  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);
+}
+
+.graph-label.is-focused {
+  border-color: rgba(90, 168, 255, 0.56);
+  color: #d7e9ff;
+}
+
+.graph-tooltip {
+  position: absolute;
+  z-index: 4;
+  max-width: min(320px, calc(100vw - 32px));
+  padding: 8px 10px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: rgba(9, 18, 28, 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);
+}
+
+.graph-tooltip strong,
+.graph-tooltip small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.graph-tooltip small {
+  margin-top: 3px;
+  color: var(--muted);
+}
+
+.mini-map {
+  position: absolute;
+  right: 14px;
+  bottom: 14px;
+  z-index: 3;
+  width: 180px;
+  height: 120px;
+  border: 1px solid rgba(143, 172, 204, 0.18);
+  border-radius: 8px;
+  background: rgba(8, 19, 29, 0.84);
+  box-shadow: 0 18px 40px rgba(1, 6, 13, 0.36);
+}
+
 .eyebrow {
   color: var(--muted);
   font-size: 12px;
@@ -118,7 +203,8 @@ select {
   min-width: 220px;
 }
 
-.agent-filter {
+.agent-filter,
+.context-filter {
   width: min(220px, 28vw);
 }
 
@@ -130,19 +216,21 @@ select {
 }
 
 .search input,
-.agent-filter select {
+.agent-filter select,
+.context-filter select {
   width: 100%;
   height: 40px;
   border: 1px solid var(--line);
   border-radius: 8px;
   outline: none;
-  background: rgba(21, 25, 31, 0.88);
+  background: rgba(12, 24, 36, 0.94);
   color: var(--text);
   padding: 0 14px;
 }
 
 .search input:focus,
-.agent-filter select:focus {
+.agent-filter select:focus,
+.context-filter select:focus {
   border-color: var(--accent);
 }
 
@@ -156,7 +244,7 @@ select {
   height: 38px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: rgba(21, 25, 31, 0.88);
+  background: rgba(12, 24, 36, 0.94);
   color: var(--text);
   cursor: pointer;
 }
@@ -177,7 +265,7 @@ select {
   padding: 10px 12px;
   border: 1px solid var(--line);
   border-radius: 10px;
-  background: rgba(21, 25, 31, 0.88);
+  background: rgba(12, 24, 36, 0.94);
   display: grid;
   gap: 3px;
 }
@@ -252,7 +340,7 @@ li small {
   padding: 12px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: #101419;
+  background: #091521;
   color: var(--text);
   white-space: pre-wrap;
   overflow: auto;
@@ -262,34 +350,58 @@ li small {
 }
 
 .content-dialog {
-  width: min(1240px, calc(100vw - 24px));
-  max-height: calc(100svh - 20px);
+  position: absolute;
+  z-index: 6;
+  top: 12px;
+  right: 12px;
+  bottom: 12px;
+  left: 12px;
+  top: max(12px, env(safe-area-inset-top));
+  right: max(12px, env(safe-area-inset-right));
+  bottom: max(12px, env(safe-area-inset-bottom));
+  left: max(12px, calc(100% - 780px));
+  margin: 0;
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
   padding: 0;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: var(--panel);
   color: var(--text);
-  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
+  box-shadow: 0 24px 80px rgba(23, 32, 51, 0.22);
+  backdrop-filter: blur(10px);
+  overflow: hidden;
 }
 
-.content-dialog::backdrop {
-  background: rgba(4, 7, 10, 0.72);
-  backdrop-filter: blur(4px);
+.content-dialog[hidden] {
+  display: none;
 }
 
 .content-dialog article {
   display: grid;
   grid-template-rows: auto auto minmax(0, 1fr);
-  max-height: calc(100svh - 22px);
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
 }
 
 .content-dialog header {
   display: flex;
+  position: sticky;
+  top: 0;
+  z-index: 1;
   align-items: flex-start;
   justify-content: space-between;
   gap: 18px;
   padding: 22px;
   border-bottom: 1px solid var(--line);
+  background: var(--panel);
+}
+
+.content-dialog header > div {
+  min-width: 0;
 }
 
 .content-dialog h2,
@@ -299,7 +411,7 @@ li small {
 
 .content-dialog h2 {
   margin-top: 6px;
-  font-size: 24px;
+  font-size: 19px;
   line-height: 1.15;
   overflow-wrap: anywhere;
 }
@@ -310,27 +422,50 @@ li small {
   overflow-wrap: anywhere;
 }
 
-.content-dialog button {
+#contentClose {
   flex: 0 0 auto;
+  width: 38px;
   height: 38px;
-  padding: 0 14px;
+  padding: 0;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: var(--panel-strong);
   color: var(--text);
   cursor: pointer;
+  font-size: 22px;
+  line-height: 1;
 }
 
-.content-dialog button:hover,
-.content-dialog button:focus {
+#contentClose:hover,
+#contentClose:focus {
   border-color: var(--accent);
   color: var(--accent);
 }
 
+.content-dialog li button {
+  width: 100%;
+  height: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--text);
+  text-align: left;
+}
+
+.content-dialog li button:hover,
+.content-dialog li button:focus {
+  color: var(--accent);
+}
+
 .content-meta {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
+  min-height: 0;
+  max-height: min(42vh, 360px);
+  max-height: min(42dvh, 360px);
+  overflow: auto;
   padding: 14px 22px;
   border-bottom: 1px solid var(--line);
 }
@@ -340,7 +475,7 @@ li small {
   padding: 10px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: var(--panel-strong);
+  background: #091521;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
   gap: 8px;
@@ -356,18 +491,22 @@ li small {
 
 .content-meta-section ul,
 .content-meta-section .tags {
-  max-height: 220px;
+  max-height: 280px;
   overflow: auto;
   align-content: flex-start;
   padding-right: 4px;
 }
 
+.content-meta-section:last-child {
+  grid-column: span 2;
+}
+
 .content-dialog .note-content {
   max-height: none;
   min-height: 0;
   border: 0;
   border-radius: 0;
-  padding: 22px;
+  padding: 14px;
 }
 
 .app-footer {
@@ -376,7 +515,7 @@ li small {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: transparent;
+  background: linear-gradient(180deg, rgba(7, 16, 25, 0), rgba(7, 16, 25, 0.84));
 }
 
 .app-footer small {
@@ -399,7 +538,8 @@ li small {
     order: 3;
   }
 
-  .agent-filter {
+  .agent-filter,
+  .context-filter {
     width: 100%;
   }
 
@@ -410,9 +550,27 @@ li small {
     order: 4;
   }
 
+  .content-dialog {
+    inset: 8px;
+    inset: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
+    width: auto;
+    height: auto;
+    max-width: none;
+    max-height: none;
+  }
+
   .content-dialog header {
-    align-items: stretch;
-    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 14px;
+  }
+
+  .content-dialog h2 {
+    font-size: 16px;
+  }
+
+  .content-dialog p {
+    font-size: 12px;
   }
 
   .metric-chip {
@@ -421,5 +579,17 @@ li small {
 
   .content-meta {
     grid-template-columns: 1fr;
+    max-height: 34vh;
+    max-height: 34dvh;
+    overflow: auto;
+    padding: 10px 14px;
+  }
+
+  .content-meta-section:last-child {
+    grid-column: auto;
+  }
+
+  .content-dialog .note-content {
+    padding: 12px;
   }
 }`;

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

@@ -35,50 +35,64 @@ export const createClientHtml = () => `<!doctype html>
             <label class="agent-filter">
               <select id="agent"></select>
             </label>
+            <label class="context-filter">
+              <select id="context"></select>
+            </label>
             <div class="toolbar" aria-label="Graph controls">
               <button id="zoomIn" type="button" title="Zoom in">+</button>
               <button id="zoomOut" type="button" title="Zoom out">-</button>
               <button id="fit" type="button" title="Focus central hub">◎</button>
+              <button id="releaseNode" type="button" title="Release selected node">◇</button>
               <button id="reset" type="button" title="Reset view">⌂</button>
             </div>
           </div>
         </header>
         <div class="graph-stage">
-          <canvas id="graphGl" aria-hidden="true"></canvas>
           <canvas id="graph" aria-label="Brainlink knowledge graph"></canvas>
+          <div id="graphLabels" class="graph-labels" aria-hidden="true"></div>
+          <div id="graphTooltip" class="graph-tooltip" role="tooltip" hidden></div>
+          <canvas id="miniMap" class="mini-map" aria-label="Graph overview"></canvas>
+          <aside id="contentDialog" class="content-dialog" role="dialog" aria-labelledby="contentTitle" hidden>
+            <article>
+              <header>
+                <div>
+                  <span class="eyebrow">Node details</span>
+                  <h2 id="contentTitle">Selected note</h2>
+                  <p id="contentPath"></p>
+                </div>
+                <button id="contentClose" type="button" aria-label="Close node details" title="Close node details">&times;</button>
+              </header>
+              <div class="content-meta">
+                <section class="content-meta-section">
+                  <h3>Facts</h3>
+                  <ul id="contentFacts"></ul>
+                </section>
+                <section class="content-meta-section">
+                  <h3>Context Links</h3>
+                  <ul id="contentContextLinks"></ul>
+                </section>
+                <section class="content-meta-section">
+                  <h3>Tags</h3>
+                  <div id="contentTags" class="tags"></div>
+                </section>
+                <section class="content-meta-section">
+                  <h3>Outgoing</h3>
+                  <ul id="contentOutgoing"></ul>
+                </section>
+                <section class="content-meta-section">
+                  <h3>Backlinks</h3>
+                  <ul id="contentIncoming"></ul>
+                </section>
+              </div>
+              <pre id="contentBody" class="note-content"></pre>
+            </article>
+          </aside>
         </div>
       </section>
     </main>
     <footer class="app-footer" aria-label="Copyright notice">
       <small>Copyright © 2026 Substructa</small>
     </footer>
-    <dialog id="contentDialog" class="content-dialog" aria-labelledby="contentTitle">
-      <article>
-        <header>
-          <div>
-            <span class="eyebrow">Markdown content</span>
-            <h2 id="contentTitle">Selected note</h2>
-            <p id="contentPath"></p>
-          </div>
-          <button id="contentClose" type="button">Close</button>
-        </header>
-        <div class="content-meta">
-          <section class="content-meta-section">
-            <h3>Tags</h3>
-            <div id="contentTags" class="tags"></div>
-          </section>
-          <section class="content-meta-section">
-            <h3>Outgoing</h3>
-            <ul id="contentOutgoing"></ul>
-          </section>
-          <section class="content-meta-section">
-            <h3>Backlinks</h3>
-            <ul id="contentIncoming"></ul>
-          </section>
-        </div>
-        <pre id="contentBody" class="note-content"></pre>
-      </article>
-    </dialog>
     <script src="/app.js"></script>
   </body>
 </html>`;