@andespindola/brainlink 0.1.0-beta.16 → 0.1.0-beta.160

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

@@ -25,6 +25,13 @@ body {
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+
 button,
 input,
 select {
@@ -32,12 +39,15 @@ select {
 }
 
 .shell {
+  flex: 1 1 auto;
   width: 100%;
-  height: 100svh;
+  min-height: 0;
   overflow: hidden;
 }
 
 .workspace {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
   position: relative;
   width: 100%;
   height: 100%;
@@ -45,39 +55,134 @@ select {
   min-height: 0;
 }
 
-#graph {
-  display: block;
+.graph-header {
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  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%);
+  backdrop-filter: blur(8px);
+}
+
+.brand-block {
+  display: grid;
+  gap: 2px;
+  min-width: max-content;
+}
+
+.brand-block strong {
+  font-size: 18px;
+}
+
+.graph-stage {
+  position: relative;
   width: 100%;
   height: 100%;
   background:
     radial-gradient(circle at 18% 20%, rgba(53, 208, 162, 0.12), transparent 28rem),
     linear-gradient(135deg, #0d0f12 0%, #12161c 55%, #0a0d10 100%);
+  overflow: hidden;
+}
+
+#graph {
+  display: block;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+#graph {
   cursor: grab;
 }
 
+#graph.is-node-hover {
+  cursor: pointer;
+}
+
+#graph.is-node-dragging {
+  cursor: move;
+}
+
 #graph:active {
   cursor: grabbing;
 }
 
-.topbar {
+.graph-labels {
   position: absolute;
-  top: 18px;
-  left: 18px;
-  right: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 18px;
+  inset: 0;
   pointer-events: none;
+  overflow: hidden;
+  transition: opacity 120ms ease;
 }
 
-.topbar > div {
-  display: flex;
-  align-items: center;
+.graph-labels.is-stale {
+  opacity: 0;
 }
 
-.topbar strong {
-  font-size: 18px;
+.graph-label {
+  position: absolute;
+  max-width: 220px;
+  transform: translate(-50%, calc(-100% - 10px));
+  padding: 4px 7px;
+  border: 1px solid rgba(129, 146, 170, 0.28);
+  border-radius: 6px;
+  background: rgba(13, 16, 20, 0.78);
+  color: var(--text);
+  font-size: 11px;
+  line-height: 1.25;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
+}
+
+.graph-label.is-focused {
+  border-color: rgba(53, 208, 162, 0.72);
+  color: #dffbf3;
+}
+
+.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(13, 16, 20, 0.94);
+  color: var(--text);
+  font-size: 12px;
+  line-height: 1.35;
+  pointer-events: none;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
+}
+
+.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(129, 146, 170, 0.28);
+  border-radius: 8px;
+  background: rgba(13, 16, 20, 0.78);
+  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.38);
 }
 
 .eyebrow {
@@ -86,17 +191,25 @@ select {
 }
 
 .search {
-  width: min(420px, 42vw);
-  pointer-events: auto;
+  flex: 1 1 320px;
+  min-width: 220px;
 }
 
-.agent-filter {
+.agent-filter,
+.context-filter {
   width: min(220px, 28vw);
-  pointer-events: auto;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: auto;
 }
 
 .search input,
-.agent-filter select {
+.agent-filter select,
+.context-filter select {
   width: 100%;
   height: 40px;
   border: 1px solid var(--line);
@@ -108,14 +221,12 @@ select {
 }
 
 .search input:focus,
-.agent-filter select:focus {
+.agent-filter select:focus,
+.context-filter select:focus {
   border-color: var(--accent);
 }
 
 .toolbar {
-  position: absolute;
-  left: 18px;
-  bottom: 18px;
   display: flex;
   gap: 8px;
 }
@@ -136,12 +247,9 @@ select {
 }
 
 .floating-metrics {
-  position: absolute;
-  top: 66px;
-  left: 18px;
   display: flex;
   gap: 10px;
-  pointer-events: none;
+  flex-wrap: wrap;
 }
 
 .metric-chip {
@@ -234,14 +342,22 @@ li small {
 }
 
 .content-dialog {
-  width: min(920px, calc(100vw - 32px));
-  max-height: calc(100svh - 32px);
+  position: fixed;
+  top: max(12px, env(safe-area-inset-top));
+  right: max(12px, env(safe-area-inset-right));
+  margin: 0;
+  width: min(760px, calc(100vw - 32px));
+  height: min(calc(100vh - 24px), 920px);
+  height: min(calc(100dvh - 24px), 920px);
+  max-height: calc(100vh - 24px);
+  max-height: calc(100dvh - 24px);
   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);
+  overflow: hidden;
 }
 
 .content-dialog::backdrop {
@@ -252,7 +368,9 @@ li small {
 .content-dialog article {
   display: grid;
   grid-template-rows: auto auto minmax(0, 1fr);
-  max-height: calc(100svh - 34px);
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
 }
 
 .content-dialog header {
@@ -262,6 +380,7 @@ li small {
   gap: 18px;
   padding: 22px;
   border-bottom: 1px solid var(--line);
+  background: var(--panel);
 }
 
 .content-dialog h2,
@@ -271,7 +390,7 @@ li small {
 
 .content-dialog h2 {
   margin-top: 6px;
-  font-size: 24px;
+  font-size: 19px;
   line-height: 1.15;
   overflow-wrap: anywhere;
 }
@@ -282,26 +401,45 @@ 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;
   padding: 14px 22px;
   border-bottom: 1px solid var(--line);
@@ -328,45 +466,86 @@ li small {
 
 .content-meta-section ul,
 .content-meta-section .tags {
-  max-height: 140px;
+  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 {
+  flex: 0 0 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+}
+
+.app-footer small {
+  color: var(--muted);
+  font-size: 11px;
+  letter-spacing: 0.02em;
 }
 
 @media (max-width: 860px) {
-  .topbar {
+  .graph-header {
     align-items: stretch;
-    flex-direction: column;
+    flex-wrap: wrap;
+    padding: 10px 12px;
+    min-height: 0;
   }
 
   .search {
     width: 100%;
+    flex-basis: 100%;
+    order: 3;
+  }
+
+  .agent-filter,
+  .context-filter {
+    width: 100%;
   }
 
-  .agent-filter {
+  .header-actions {
     width: 100%;
+    margin-left: 0;
+    justify-content: space-between;
+    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;
   }
 
-  .floating-metrics {
-    top: 116px;
-    right: 18px;
-    left: 18px;
-    justify-content: flex-start;
-    flex-wrap: wrap;
+  .content-dialog h2 {
+    font-size: 16px;
+  }
+
+  .content-dialog p {
+    font-size: 12px;
   }
 
   .metric-chip {
@@ -375,5 +554,16 @@ li small {
 
   .content-meta {
     grid-template-columns: 1fr;
+    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

@@ -9,51 +9,74 @@ export const createClientHtml = () => `<!doctype html>
   <body>
     <main class="shell">
       <section class="workspace" aria-label="Knowledge graph">
-        <canvas id="graph" aria-label="Brainlink knowledge graph"></canvas>
-        <div class="topbar">
-          <div>
+        <header class="graph-header" aria-label="Graph actions">
+          <div class="brand-block">
             <strong>Brainlink</strong>
+            <span class="eyebrow">Knowledge Graph</span>
+          </div>
+          <div class="floating-metrics" aria-label="Graph totals">
+            <div class="metric-chip">
+              <strong id="nodeCount">0</strong>
+              <small>Notes</small>
+            </div>
+            <div class="metric-chip">
+              <strong id="edgeCount">0</strong>
+              <small>Links</small>
+            </div>
+            <div class="metric-chip">
+              <strong id="tagCount">0</strong>
+              <small>Tags</small>
+            </div>
           </div>
           <label class="search">
             <input id="search" type="search" placeholder="Filter notes, tags or paths" autocomplete="off" />
           </label>
-          <label class="agent-filter">
-            <select id="agent"></select>
-          </label>
-        </div>
-        <div class="floating-metrics" aria-label="Graph totals">
-          <div class="metric-chip">
-            <strong id="nodeCount">0</strong>
-            <small>Notes</small>
-          </div>
-          <div class="metric-chip">
-            <strong id="edgeCount">0</strong>
-            <small>Links</small>
-          </div>
-          <div class="metric-chip">
-            <strong id="tagCount">0</strong>
-            <small>Tags</small>
+          <div class="header-actions">
+            <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>
-        </div>
-        <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="Fit visible nodes">◎</button>
-          <button id="reset" type="button" title="Reset view">⌂</button>
+        </header>
+        <div class="graph-stage">
+          <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>
         </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>
+            <span class="eyebrow">Node details</span>
             <h2 id="contentTitle">Selected note</h2>
             <p id="contentPath"></p>
           </div>
-          <button id="contentClose" type="button">Close</button>
+          <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>