@andespindola/brainlink 0.1.0-beta.15 → 0.1.0-beta.150

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,50 +39,68 @@ 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%;
   min-width: 0;
   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%);
-  cursor: grab;
-}
-
-#graph:active {
-  cursor: grabbing;
+  overflow: hidden;
 }
 
-.topbar {
+#graph {
+  display: block;
   position: absolute;
-  top: 18px;
-  left: 18px;
-  right: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 18px;
-  pointer-events: none;
+  inset: 0;
+  width: 100%;
+  height: 100%;
 }
 
-.topbar > div {
-  display: flex;
-  align-items: center;
+#graph {
+  cursor: grab;
 }
 
-.topbar strong {
-  font-size: 18px;
+#graph:active {
+  cursor: grabbing;
 }
 
 .eyebrow {
@@ -84,13 +109,19 @@ select {
 }
 
 .search {
-  width: min(420px, 42vw);
-  pointer-events: auto;
+  flex: 1 1 320px;
+  min-width: 220px;
 }
 
 .agent-filter {
   width: min(220px, 28vw);
-  pointer-events: auto;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: auto;
 }
 
 .search input,
@@ -111,9 +142,6 @@ select {
 }
 
 .toolbar {
-  position: absolute;
-  left: 18px;
-  bottom: 18px;
   display: flex;
   gap: 8px;
 }
@@ -134,12 +162,9 @@ select {
 }
 
 .floating-metrics {
-  position: absolute;
-  top: 66px;
-  left: 18px;
   display: flex;
   gap: 10px;
-  pointer-events: none;
+  flex-wrap: wrap;
 }
 
 .metric-chip {
@@ -232,14 +257,20 @@ li small {
 }
 
 .content-dialog {
-  width: min(920px, calc(100vw - 32px));
-  max-height: calc(100svh - 32px);
+  position: fixed;
+  top: 74px;
+  right: 16px;
+  margin: 0;
+  width: min(760px, calc(100vw - 32px));
+  height: min(calc(100svh - 96px), 920px);
+  max-height: calc(100svh - 96px);
   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 {
@@ -250,7 +281,8 @@ 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%;
 }
 
 .content-dialog header {
@@ -269,7 +301,7 @@ li small {
 
 .content-dialog h2 {
   margin-top: 6px;
-  font-size: 24px;
+  font-size: 19px;
   line-height: 1.15;
   overflow-wrap: anywhere;
 }
@@ -299,7 +331,7 @@ li small {
 
 .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);
@@ -326,45 +358,77 @@ 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 {
     width: 100%;
   }
 
+  .header-actions {
+    width: 100%;
+    margin-left: 0;
+    justify-content: space-between;
+    order: 4;
+  }
+
   .content-dialog header {
     align-items: stretch;
     flex-direction: column;
   }
 
-  .floating-metrics {
-    top: 116px;
-    right: 18px;
-    left: 18px;
-    justify-content: flex-start;
-    flex-wrap: wrap;
+  .content-dialog {
+    top: auto;
+    right: 12px;
+    left: 12px;
+    bottom: 28px;
+    width: auto;
+    height: min(calc(100svh - 150px), 760px);
+    max-height: calc(100svh - 150px);
   }
 
   .metric-chip {

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

@@ -9,51 +9,67 @@ 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>
+            <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="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>
       </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>
         </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>