@andespindola/brainlink 0.1.0-beta.1 → 0.1.0-beta.11

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

@@ -32,8 +32,6 @@ select {
 }
 
 .shell {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 360px;
   width: 100%;
   height: 100svh;
   overflow: hidden;
@@ -73,17 +71,14 @@ select {
 
 .topbar > div {
   display: flex;
-  align-items: baseline;
-  gap: 12px;
+  align-items: center;
 }
 
 .topbar strong {
   font-size: 18px;
 }
 
-.topbar span,
-.eyebrow,
-.inspector small {
+.eyebrow {
   color: var(--muted);
   font-size: 12px;
 }
@@ -138,70 +133,37 @@ 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 {
+  position: absolute;
+  top: 66px;
+  left: 18px;
+  display: flex;
+  gap: 10px;
+  pointer-events: none;
 }
 
-.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 +177,7 @@ select {
   background: var(--accent-weak);
   color: var(--accent);
   font-size: 12px;
+  word-break: break-word;
   overflow-wrap: anywhere;
 }
 
@@ -230,6 +193,7 @@ li {
   padding: 10px 0;
   border-bottom: 1px solid var(--line);
   color: var(--text);
+  word-break: break-word;
   overflow-wrap: anywhere;
 }
 
@@ -253,7 +217,7 @@ li small {
 }
 
 .note-content {
-  max-height: 32svh;
+  max-height: min(68svh, 760px);
   margin: 0;
   padding: 12px;
   border: 1px solid var(--line);
@@ -267,18 +231,116 @@ 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(920px, calc(100vw - 32px));
+  max-height: calc(100svh - 32px);
+  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 - 34px);
+}
+
+.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;
+}
+
+.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: 140px;
+  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;
+}
+
+@media (max-width: 860px) {
   .topbar {
     align-items: stretch;
     flex-direction: column;
@@ -291,4 +353,25 @@ li small {
   .agent-filter {
     width: 100%;
   }
+
+  .content-dialog header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .floating-metrics {
+    top: 116px;
+    right: 18px;
+    left: 18px;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .metric-chip {
+    min-width: 82px;
+  }
+
+  .content-meta {
+    grid-template-columns: 1fr;
+  }
 }`;

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

@@ -13,7 +13,6 @@ export const createClientHtml = () => `<!doctype html>
         <div class="topbar">
           <div>
             <strong>Brainlink</strong>
-            <span id="stats">Loading graph</span>
           </div>
           <label class="search">
             <input id="search" type="search" placeholder="Filter notes, tags or paths" autocomplete="off" />
@@ -22,45 +21,55 @@ export const createClientHtml = () => `<!doctype html>
             <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>
+        </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>
         </div>
       </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>
+    <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>`;