@andespindola/brainlink 0.1.0-beta.6 → 0.1.0-beta.60

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,19 +39,44 @@ select {
 }
 
 .shell {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 360px;
+  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-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 {
   display: block;
   width: 100%;
@@ -59,43 +91,25 @@ select {
   cursor: grabbing;
 }
 
-.topbar {
-  position: absolute;
-  top: 18px;
-  left: 18px;
-  right: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 18px;
-  pointer-events: none;
-}
-
-.topbar > div {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-}
-
-.topbar strong {
-  font-size: 18px;
-}
-
-.topbar span,
-.eyebrow,
-.inspector small {
+.eyebrow {
   color: var(--muted);
   font-size: 12px;
 }
 
 .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,
@@ -116,9 +130,6 @@ select {
 }
 
 .toolbar {
-  position: absolute;
-  left: 18px;
-  bottom: 18px;
   display: flex;
   gap: 8px;
 }
@@ -138,70 +149,34 @@ select {
   color: var(--accent);
 }
 
-.inspector {
-  display: grid;
-  grid-template-rows: auto auto auto auto auto 1fr 1fr;
-  gap: 22px;
-  min-width: 0;
-  height: 100%;
-  padding: 24px;
-  border-left: 1px solid var(--line);
-  background: var(--panel);
-  overflow: auto;
+.floating-metrics {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
 }
 
-.inspector h1,
-.inspector h2,
-.inspector p {
-  margin: 0;
+.metric-chip {
+  min-width: 94px;
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: rgba(21, 25, 31, 0.88);
+  display: grid;
+  gap: 3px;
 }
 
-.inspector h1 {
-  margin-top: 6px;
+.metric-chip strong {
   font-size: 26px;
-  line-height: 1.12;
-  overflow-wrap: anywhere;
+  line-height: 1;
 }
 
-.inspector h2 {
-  margin-bottom: 10px;
+.metric-chip small {
   color: var(--muted);
-  font-size: 12px;
-  font-weight: 700;
+  font-size: 11px;
+  letter-spacing: 0.03em;
   text-transform: uppercase;
 }
 
-#path {
-  margin-top: 10px;
-  color: var(--muted);
-  line-height: 1.45;
-  overflow-wrap: anywhere;
-}
-
-.metrics {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.metrics div {
-  display: grid;
-  gap: 4px;
-  padding: 14px;
-  background: var(--panel-strong);
-}
-
-.metrics div + div {
-  border-left: 1px solid var(--line);
-}
-
-.metrics span {
-  font-size: 22px;
-  font-weight: 700;
-}
-
 .tags {
   display: flex;
   flex-wrap: wrap;
@@ -215,6 +190,7 @@ select {
   background: var(--accent-weak);
   color: var(--accent);
   font-size: 12px;
+  word-break: break-word;
   overflow-wrap: anywhere;
 }
 
@@ -230,6 +206,7 @@ li {
   padding: 10px 0;
   border-bottom: 1px solid var(--line);
   color: var(--text);
+  word-break: break-word;
   overflow-wrap: anywhere;
 }
 
@@ -253,7 +230,7 @@ li small {
 }
 
 .note-content {
-  max-height: 32svh;
+  max-height: min(68svh, 760px);
   margin: 0;
   padding: 12px;
   border: 1px solid var(--line);
@@ -267,28 +244,165 @@ li small {
   line-height: 1.5;
 }
 
-@media (max-width: 860px) {
-  .shell {
-    grid-template-columns: 1fr;
-    grid-template-rows: minmax(0, 1fr) 42svh;
-  }
+.content-dialog {
+  width: min(1240px, calc(100vw - 24px));
+  max-height: calc(100svh - 20px);
+  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);
+}
 
-  .inspector {
-    border-left: 0;
-    border-top: 1px solid var(--line);
-    padding: 18px;
-  }
+.content-dialog::backdrop {
+  background: rgba(4, 7, 10, 0.72);
+  backdrop-filter: blur(4px);
+}
+
+.content-dialog article {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  max-height: calc(100svh - 22px);
+}
+
+.content-dialog header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 22px;
+  border-bottom: 1px solid var(--line);
+}
+
+.content-dialog h2,
+.content-dialog p {
+  margin: 0;
+}
+
+.content-dialog h2 {
+  margin-top: 6px;
+  font-size: 24px;
+  line-height: 1.15;
+  overflow-wrap: anywhere;
+}
+
+.content-dialog p {
+  margin-top: 8px;
+  color: var(--muted);
+  overflow-wrap: anywhere;
+}
 
-  .topbar {
+.content-dialog button {
+  flex: 0 0 auto;
+  height: 38px;
+  padding: 0 14px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel-strong);
+  color: var(--text);
+  cursor: pointer;
+}
+
+.content-dialog button:hover,
+.content-dialog button:focus {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.content-meta {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  padding: 14px 22px;
+  border-bottom: 1px solid var(--line);
+}
+
+.content-meta-section {
+  min-height: 0;
+  padding: 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel-strong);
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 8px;
+}
+
+.content-meta-section h3 {
+  margin: 0;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.content-meta-section ul,
+.content-meta-section .tags {
+  max-height: 220px;
+  overflow: auto;
+  align-content: flex-start;
+  padding-right: 4px;
+}
+
+.content-dialog .note-content {
+  max-height: none;
+  min-height: 0;
+  border: 0;
+  border-radius: 0;
+  padding: 22px;
+}
+
+.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) {
+  .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;
+  }
+
+  .metric-chip {
+    min-width: 82px;
+  }
+
+  .content-meta {
+    grid-template-columns: 1fr;
+  }
 }`;

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

@@ -9,58 +9,73 @@ 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 id="stats">Loading graph</span>
+            <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="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="reset" type="button" title="Reset view">⌂</button>
-        </div>
+          <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="Fit visible nodes">◎</button>
+              <button id="reset" type="button" title="Reset view">⌂</button>
+            </div>
+          </div>
+        </header>
+        <canvas id="graph" aria-label="Brainlink knowledge graph"></canvas>
       </section>
-      <aside class="inspector" aria-label="Selected note">
-        <div>
-          <span class="eyebrow">Selected note</span>
-          <h1 id="title">Graph Overview</h1>
-          <p id="path">Select a node to inspect links and backlinks.</p>
-        </div>
-        <div class="metrics">
-          <div><span id="nodeCount">0</span><small>Notes</small></div>
-          <div><span id="edgeCount">0</span><small>Links</small></div>
-          <div><span id="tagCount">0</span><small>Tags</small></div>
-        </div>
-        <section>
-          <h2>Tags</h2>
-          <div id="tags" class="tags"></div>
-        </section>
-        <section>
-          <h2>Notes</h2>
-          <ul id="notes"></ul>
-        </section>
-        <section>
-          <h2>Content</h2>
-          <pre id="content" class="note-content"></pre>
-        </section>
-        <section>
-          <h2>Outgoing</h2>
-          <ul id="outgoing"></ul>
-        </section>
-        <section>
-          <h2>Backlinks</h2>
-          <ul id="incoming"></ul>
-        </section>
-      </aside>
     </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>`;