superlocalmemory 3.7.8 → 3.8.1

package/src/superlocalmemory/ui/css/od-bridge.css

@@ -0,0 +1,158 @@
+/* od-bridge.css — OD ↔ Bootstrap integration shims (minimal)
+ * Loaded after design-system.css in index.html.
+ *
+ * What this file does (ONLY things design-system.css does not cover):
+ *   1. Bootstrap .tab-content/.tab-pane show/hide — design-system.css does not
+ *      know about Bootstrap's tab system. Without this, ALL panes are visible.
+ *   2. .content overflow-y so the inner content area scrolls while topbar/sidebar
+ *      stay sticky (design-system.css sets padding+max-width but not overflow).
+ *   3. html { overflow-x: hidden } — horizontal scroll guard (Playwright check).
+ *   4. Scoped OD card styles for #dashboard-pane only.
+ *      Bootstrap .card in all other panes keeps neural-glass.css styles unchanged.
+ *
+ * What this file deliberately does NOT do:
+ *   - Override .topbar, .sidebar, .nav-link, .star-cta, .site-foot, .kpi, .feed-item
+ *     → design-system.css owns those; they are already correct and fully responsive.
+ *   - Change Bootstrap form/input/button primitives → neural-glass.css owns those.
+ *   - Set colours → design-system.css token layer owns all vars.
+ *
+ * Mobile sidebar mechanism: design-system.css uses transform: translateX(-100%)
+ * (not left: -260px). The od-shell.js toggles .open class; design-system.css
+ * handles the animation. Do NOT add conflicting left/position overrides here.
+ *
+ * Copyright (c) 2026 Varun Pratap Bhardwaj / Qualixar — AGPL-3.0
+ */
+
+/* ================================================================
+   1. Bootstrap .tab-content / .tab-pane visibility
+   Bootstrap normally sets this via js/bootstrap.min.css.
+   We replicate the key rules here as a safety guarantee so the
+   SPA hide/show works even if Bootstrap's CSS rule order shifts.
+================================================================ */
+.tab-content > .tab-pane {
+  display: none;
+}
+.tab-content > .active {
+  display: block;
+}
+/* Fade transition (Bootstrap .fade + .show) */
+.tab-content > .tab-pane.fade {
+  transition: opacity 0.1s linear;
+}
+.tab-content > .tab-pane.fade:not(.show) {
+  opacity: 0;
+}
+.tab-content > .tab-pane.fade.show {
+  opacity: 1;
+}
+
+/* ================================================================
+   2. Content area overflow — make inner column scroll while topbar
+   and sidebar stay sticky (design-system.css sets padding/max-width
+   but does not set overflow-y).
+================================================================ */
+.content {
+  overflow-y: auto;
+  flex: 1 1 auto;
+  min-height: 0;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* ================================================================
+   3. Horizontal scroll guard
+   Prevents content wider than viewport from causing x-scroll.
+   Playwright check: document.documentElement.scrollWidth <= clientWidth + 4
+================================================================ */
+html {
+  overflow-x: hidden;
+}
+
+/* ================================================================
+   4. #dashboard-pane scoped OD card styles
+   ONLY inside the dashboard pane. All other panes keep Bootstrap
+   .card styles from neural-glass.css unmodified.
+
+   Why scoped? design-system.css defines .card globally with OD
+   tokens. Bootstrap's .card in non-OD panes uses its own bg/border.
+   Neural-glass.css has already patched those with ng-* vars.
+   Scoping to #dashboard-pane lets OD .card win there without
+   touching graph-pane, settings-pane, etc.
+================================================================ */
+
+/* Override Bootstrap's .card inside the dashboard pane only */
+#dashboard-pane .card {
+  background: var(--card, #1a1f2e);
+  border: 1px solid var(--border, rgba(255,255,255,0.07));
+  border-radius: var(--radius, 12px);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
+}
+
+/* Ensure .card-head flex layout works (Bootstrap overrides flex) */
+#dashboard-pane .card-head {
+  display: flex !important;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 18px 10px;
+  border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
+  flex-wrap: wrap;
+}
+#dashboard-pane .card-head h3 {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--fg);
+}
+#dashboard-pane .card-head .sub {
+  font-size: 0.75rem;
+  color: var(--fg-3);
+}
+#dashboard-pane .card-pad {
+  padding: 14px 18px;
+}
+/* Bootstrap overrides .spacer if it has a .flex-grow-1 sibling;
+   protect the OD spacer element */
+#dashboard-pane .card-head .spacer {
+  flex: 1 !important;
+}
+
+/* list-row: design-system.css defines it globally but Bootstrap .card-body
+   might reset font size; reinforce inside dashboard */
+#dashboard-pane .list-row {
+  font-size: 0.8125rem;
+  padding: 5px 0;
+}
+
+/* .muted inside dashboard → use the OD fg-3 token */
+#dashboard-pane .muted {
+  color: var(--fg-3);
+}
+
+/* ================================================================
+   5. Light-mode adaptation for dashboard OD tokens
+   design-system.css [data-theme="light"] overrides --page, --card
+   etc. These selectors make the dashboard system-card readable in
+   light mode without any ng-glass interference.
+================================================================ */
+[data-theme="light"] #dashboard-pane .page-head h2 {
+  color: var(--fg);
+}
+[data-theme="light"] #dashboard-pane .card {
+  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+}
+
+/* ================================================================
+   6. Bootstrap conflict fix — the OD tables use <tr class="row"> for the
+   hover style, but Bootstrap's .row { display:flex } hijacks the row and
+   makes every <td> stack vertically. Restore proper table layout.
+================================================================ */
+.tbl tr.row { display: table-row; }
+.tbl tr.row > td { display: table-cell; }
+
+/* ================================================================
+   7. Bootstrap conflict fix — .nav { display:flex; flex-wrap:wrap } turned
+   the vertical sidebar into a horizontal wrap (group labels beside items,
+   Health beside Operations). Restore the design's vertical column.
+================================================================ */
+.sidebar .nav { display: block; }
+.sidebar .nav-link { display: flex; width: 100%; }
+.sidebar .nav-group-label { display: block; width: 100%; }

package/src/superlocalmemory/ui/favicon.svg

@@ -1,5 +1,36 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <rect width="64" height="64" rx="14" fill="#0a0e1a"/>
-  <path d="M16 32h12l8-14 12 14" fill="none" stroke="#45e0a8" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
-  <circle cx="16" cy="32" r="5" fill="#45e0a8"/><circle cx="36" cy="18" r="5" fill="#45e0a8"/><circle cx="48" cy="32" r="5" fill="#45e0a8"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" role="img" aria-labelledby="title desc">
+  <title id="title">SuperLocalMemory mark</title>
+  <desc id="desc">A local memory core represented by connected evidence nodes in a cyan and violet ring.</desc>
+  <defs>
+    <linearGradient id="slm-ring" x1="18" y1="18" x2="110" y2="110" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#22d3ee"/>
+      <stop offset=".52" stop-color="#60a5fa"/>
+      <stop offset="1" stop-color="#a78bfa"/>
+    </linearGradient>
+    <linearGradient id="slm-core" x1="39" y1="37" x2="91" y2="91" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#d9fbff"/>
+      <stop offset="1" stop-color="#c4b5fd"/>
+    </linearGradient>
+  </defs>
+  <circle cx="64" cy="64" r="58" fill="#07111f" stroke="url(#slm-ring)" stroke-width="4"/>
+  <path d="M33 51c4-15 16-25 31-25 20 0 35 16 35 36 0 17-12 31-28 35" fill="none" stroke="url(#slm-ring)" stroke-linecap="round" stroke-width="4"/>
+  <path d="M35 78c6 15 22 24 38 20 9-2 16-8 20-16" fill="none" stroke="url(#slm-ring)" stroke-linecap="round" stroke-width="4" opacity=".82"/>
+  <g fill="none" stroke="url(#slm-ring)" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5">
+    <path d="M43 55 58 45l14 10 13-8"/>
+    <path d="M43 55v18l15 9 14-9 13 8"/>
+    <path d="M58 45v37"/>
+    <path d="M72 55v18"/>
+  </g>
+  <g fill="url(#slm-core)" stroke="#07111f" stroke-width="2">
+    <circle cx="43" cy="55" r="6"/>
+    <circle cx="58" cy="45" r="6"/>
+    <circle cx="72" cy="55" r="6"/>
+    <circle cx="85" cy="47" r="6"/>
+    <circle cx="43" cy="73" r="6"/>
+    <circle cx="58" cy="82" r="6"/>
+    <circle cx="72" cy="73" r="6"/>
+    <circle cx="85" cy="81" r="6"/>
+  </g>
+  <circle cx="64" cy="64" r="8" fill="url(#slm-ring)"/>
+  <circle cx="64" cy="64" r="3" fill="#f8fafc"/>
 </svg>