lens-note - npm Package Compare versions

Comparing version 1.31.0 to 1.32.0

dist/view-ui/app.css

@@ -1,3 +0,3 @@
-/* lens view — dark theme, desktop-first.
-   Card mode is default; graph mode is secondary at /graph. */
+/* lens view — canvas-first with slide-in reader panel.
+   Dark theme, desktop-first. */
 
@@ -24,2 +24,6 @@ :root {
   --rel-continues: #e3b341;
+
+  --topbar-h: 46px;
+  --panel-w: 45vw;
+  --panel-min: 420px;
 }
@@ -31,2 +35,4 @@
   margin: 0;
+  height: 100%;
+  overflow: hidden;
   background: var(--bg);
@@ -39,6 +45,2 @@ color: var(--text);
 
-/* Graph mode needs a fixed height; card mode scrolls naturally. */
-body[data-mode="graph"] { height: 100%; overflow: hidden; }
-body[data-mode="graph"] html { height: 100%; }
-
 .hidden { display: none !important; }
@@ -49,3 +51,3 @@
 
-/* ── Top bar (shared) ────────────────────────────────────── */
+/* ── Top bar ──────────────────────────────────────────────── */
 
@@ -59,5 +61,4 @@ .topbar {
   border-bottom: 1px solid var(--border);
-  height: 46px;
-  position: sticky;
-  top: 0;
+  height: var(--topbar-h);
+  flex-shrink: 0;
   z-index: 10;
@@ -75,2 +76,152 @@ }
 
+.stats {
+  color: var(--text-dim);
+  font-size: 12px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.mode-badge {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 10px;
+  background: rgba(163, 113, 247, 0.1);
+  border: 1px solid rgba(163, 113, 247, 0.4);
+  border-radius: 14px;
+  font-size: 12px;
+  color: var(--text);
+  max-width: 40%;
+  min-width: 0;
+}
+.mode-badge .mode-label {
+  color: var(--rel-indexes);
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  flex-shrink: 0;
+}
+.mode-badge .mode-title {
+  color: var(--text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.mode-badge .mode-exit {
+  color: var(--text-faint);
+  text-decoration: none;
+  font-size: 14px;
+  line-height: 1;
+  padding: 0 2px;
+}
+.mode-badge .mode-exit:hover { color: var(--text); }
+
+/* Whiteboard picker: click the chip's inner button to switch whiteboards. */
+.mode-picker {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  color: inherit;
+  font: inherit;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  min-width: 0;
+  flex: 1;
+  border-radius: 10px;
+}
+.mode-picker:hover .mode-title { color: var(--text); }
+.mode-picker .mode-chevron {
+  color: var(--text-faint);
+  font-size: 9px;
+  margin-left: 2px;
+  flex-shrink: 0;
+  transition: transform 0.12s;
+}
+.mode-picker.open .mode-chevron { transform: rotate(180deg); color: var(--text); }
+
+.whiteboard-picker-menu {
+  position: fixed;
+  z-index: 200;
+  min-width: 320px;
+  max-width: 480px;
+  max-height: 420px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
+}
+.whiteboard-picker-menu .wp-head {
+  flex-shrink: 0;
+  padding: 10px 14px 8px;
+  font: 11px ui-monospace, Menlo, monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+}
+.whiteboard-picker-menu .wp-head-count { color: var(--text-faint); }
+.whiteboard-picker-menu .wp-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+.whiteboard-picker-menu .wp-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 7px 14px;
+  background: transparent;
+  border: 0;
+  color: var(--text);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+}
+.whiteboard-picker-menu .wp-row:hover { background: rgba(163, 113, 247, 0.08); }
+.whiteboard-picker-menu .wp-current { color: var(--rel-indexes); font-weight: 500; }
+.whiteboard-picker-menu .wp-check {
+  width: 14px;
+  text-align: center;
+  color: var(--rel-indexes);
+  flex-shrink: 0;
+  font-size: 12px;
+}
+.whiteboard-picker-menu .wp-title {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.whiteboard-picker-menu .wp-count {
+  color: var(--text-faint);
+  font: 11px ui-monospace, Menlo, monospace;
+  flex-shrink: 0;
+}
+.whiteboard-picker-menu .wp-sep {
+  height: 1px;
+  background: var(--border);
+  margin: 4px 0;
+}
+.whiteboard-picker-menu .wp-new { color: var(--rel-indexes); }
+.whiteboard-picker-menu .wp-new .wp-check { font-weight: 700; font-size: 14px; }
+.whiteboard-picker-menu .wp-loading,
+.whiteboard-picker-menu .wp-empty {
+  padding: 20px 14px;
+  text-align: center;
+  color: var(--text-dim);
+  font-size: 12px;
+}
+
 .search {
@@ -85,2 +236,3 @@ background: var(--bg-panel);
   flex-shrink: 0;
+  margin-left: auto;
 }
@@ -90,3 +242,2 @@ .search:focus { outline: none; border-color: var(--accent); }
 .top-nav {
-  margin-left: auto;
   display: flex;
@@ -96,23 +247,915 @@ gap: 12px;
 
-.top-nav-link {
+.btn {
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 5px 10px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+.btn:hover { border-color: var(--accent); color: var(--accent); }
+.btn-primary {
+  background: rgba(163, 113, 247, 0.12);
+  border-color: rgba(163, 113, 247, 0.4);
+  color: var(--rel-indexes);
+  font-weight: 500;
+}
+.btn-primary:hover { background: rgba(163, 113, 247, 0.2); border-color: var(--rel-indexes); color: var(--rel-indexes); }
+
+/* ── Stage: canvas + slide-in reader panel ───────────────── */
+
+.stage {
+  display: flex;
+  height: calc(100vh - var(--topbar-h));
+  position: relative;
+}
+
+.canvas-holder {
+  flex: 1;
+  position: relative;
+  min-width: 0;
+  background: var(--bg);
+  transition: flex-basis 0.25s ease;
+}
+
+.graph {
+  position: absolute;
+  inset: 0;
+  background: var(--bg);
+}
+
+/* Filter overlay floats above the canvas */
+.filters {
+  position: absolute;
+  left: 12px;
+  top: 12px;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  background: rgba(22, 27, 34, 0.88);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  backdrop-filter: blur(6px);
+  flex-wrap: wrap;
+  max-width: calc(100% - 24px);
+}
+.filters .sep {
+  width: 1px; height: 14px; background: var(--border); margin: 0 2px;
+}
+.filters label {
+  display: inline-flex; align-items: center; gap: 4px;
+  cursor: pointer; font-size: 11.5px; color: var(--text-dim); white-space: nowrap;
+}
+.filters label:hover { color: var(--text); }
+.filters input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
+
+/* Reader panel — sits on the right of the stage */
+.reader-panel {
+  width: var(--panel-w);
+  min-width: var(--panel-min);
+  max-width: 100%;
+  background: var(--bg);
+  border-left: 1px solid var(--border);
+  overflow-y: auto;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.reader-panel.max {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  min-width: 0;
+  z-index: 20;
+  border-left: 0;
+}
+
+.panel-toolbar {
+  position: sticky;
+  top: 0;
+  display: flex;
+  justify-content: flex-end;
+  gap: 4px;
+  padding: 8px 12px;
+  background: linear-gradient(to bottom, var(--bg) 60%, transparent);
+  z-index: 2;
+}
+.panel-toolbar button {
+  background: transparent;
+  border: 1px solid transparent;
   color: var(--text-dim);
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 15px;
+  line-height: 1;
+  padding: 0;
+}
+.panel-toolbar button:hover {
+  background: var(--bg-panel);
+  border-color: var(--border);
+  color: var(--text);
+}
+
+/* ── Page shell (shared by landing, search, and structure page) ─
+ * Generic scaffolding for every main-container mode. Structure-page-only
+ * pieces live under `.structure-anchor-*` and `.structure-activity-*`.
+ * ─────────────────────────────────────────────────────────── */
+
+.page-container {
+  position: absolute;
+  inset: 0;
+  overflow-y: auto;
+  background: var(--bg);
+}
+.page-loading,
+.page-error {
+  padding: 60px 32px;
+  color: var(--text-dim);
+}
+.page-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  font-size: 13px;
+  min-height: 120px;
+}
+.page-loading::before {
+  content: "";
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  animation: lens-spin 0.8s linear infinite;
+}
+@keyframes lens-spin {
+  to { transform: rotate(360deg); }
+}
+.page-error h2 { color: var(--text); font-weight: 500; font-size: 18px; margin: 0 0 8px; }
+.page-error-back {
+  display: inline-block;
+  margin-top: 16px;
+  color: var(--accent);
+}
+
+.page {
+  max-width: 820px;
+  margin: 0 auto;
+  padding: 40px 40px 80px;
+}
+
+.page-header {
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 28px;
+  margin-bottom: 32px;
+}
+.page-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-faint);
   font-size: 12px;
+  margin-bottom: 12px;
+}
+.page-back {
+  color: var(--text-dim);
+  text-decoration: none;
+  font-size: 14px;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+.page-back:hover { background: var(--bg-panel); text-decoration: none; color: var(--text); }
+.page-query {
+  color: var(--text-dim);
+  font-family: ui-monospace, monospace;
+}
+.structure-anchor-title {
+  font-size: 28px;
+  font-weight: 600;
+  color: var(--text);
+  line-height: 1.25;
+  margin: 0 0 10px;
+}
+.structure-anchor-meta {
+  color: var(--text-faint);
+  font-size: 12px;
+  text-transform: lowercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 18px;
+}
+.structure-anchor-body {
+  color: var(--text-dim);
+  font-size: 14.5px;
+  line-height: 1.7;
+  margin-bottom: 20px;
+}
+.structure-anchor-body > :first-child { margin-top: 0; }
+.structure-anchor-body > :last-child { margin-bottom: 0; }
+.structure-anchor-body p { margin: 0 0 0.9em; }
+.structure-anchor-body h1,
+.structure-anchor-body h2,
+.structure-anchor-body h3,
+.structure-anchor-body h4 {
+  color: var(--text);
+  font-weight: 600;
+  line-height: 1.35;
+  margin: 1.4em 0 0.5em;
+}
+.structure-anchor-body h1 { font-size: 18px; }
+.structure-anchor-body h2 { font-size: 15.5px; text-transform: none; letter-spacing: 0; }
+.structure-anchor-body h3 { font-size: 14.5px; }
+.structure-anchor-body h4 { font-size: 13.5px; color: var(--text-dim); }
+.structure-anchor-body ul,
+.structure-anchor-body ol {
+  padding-left: 1.4em;
+  margin: 0 0 0.9em;
+}
+.structure-anchor-body li { margin: 0.25em 0; }
+.structure-anchor-body blockquote {
+  margin: 0.8em 0;
+  padding: 0.2em 0 0.2em 14px;
+  border-left: 3px solid var(--border);
+  color: var(--text-faint);
+}
+.structure-anchor-body code {
+  background: var(--bg-panel);
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+.structure-anchor-body pre {
+  background: var(--bg-panel);
+  padding: 10px 14px;
+  border-radius: 6px;
+  overflow-x: auto;
+  font-size: 12.5px;
+  margin: 0.8em 0;
+}
+.structure-anchor-body pre code { background: none; padding: 0; }
+.structure-anchor-body a.inline-ref {
+  display: inline;
+  color: var(--accent);
+  text-decoration: none;
+  padding: 0 3px;
+  border-radius: 3px;
+  background: rgba(88, 166, 255, 0.12);
+}
+.structure-anchor-body a.inline-ref:hover { background: rgba(88, 166, 255, 0.22); }
+.structure-anchor-body a { color: var(--accent); }
+.structure-anchor-actions {
+  display: flex;
+  gap: 16px;
+  font-size: 13px;
+}
+.structure-anchor-board {
+  color: var(--accent);
+}
+
+.page-section {
+  margin-bottom: 40px;
+}
+.page-section-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  padding: 4px 10px;
+  margin: 0 0 14px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+.page-section-icon {
+  font-size: 14px;
+  letter-spacing: 0;
+}
+.page-section-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin: 0 0 14px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border);
+}
+.page-section-head .page-section-title {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+.page-section-action {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  font: 11px ui-monospace, Menlo, monospace;
+  letter-spacing: 0.04em;
+  padding: 3px 10px;
   border-radius: 4px;
-  border: 1px solid transparent;
+  cursor: pointer;
+  transition: color 0.1s, border-color 0.1s, background 0.1s;
 }
-.top-nav-link:hover {
+.page-section-action:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+.page-section-empty {
+  color: var(--text-dim);
+  font-size: 12.5px;
+  line-height: 1.6;
+  padding: 14px 0;
+}
+.page-count {
+  color: var(--text-faint);
+  font-size: 11px;
+  font-weight: 400;
+}
+
+/* Tensions — partner-model's high-signal provocation. Red border, slightly
+   elevated block, sits above everything except the anchor header. */
+.page-section-tensions {
+  background: rgba(248, 81, 73, 0.04);
+  border: 1px solid rgba(248, 81, 73, 0.32);
+  border-radius: 8px;
+  padding: 18px 20px;
+  margin-bottom: 32px;
+}
+.page-section-tensions .page-section-title {
+  color: var(--rel-contradicts);
+  border-bottom: none;
+  padding-bottom: 0;
+  margin-bottom: 10px;
+}
+.page-section-tensions .page-section-icon { color: var(--rel-contradicts); }
+.page-section-tensions .page-item { border-bottom-color: rgba(248, 81, 73, 0.18); }
+
+/* Related-unlinked lives at the tail, visually softer. */
+.page-section-faded .page-section-title { opacity: 0.75; }
+.page-section-faded .page-item-title { color: var(--text-dim); }
+.page-item-head {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  margin-bottom: 4px;
+}
+.page-item-head .page-item-title { flex: 1; min-width: 0; margin-bottom: 0; }
+.page-item-score {
+  font-size: 10.5px;
+  color: var(--text-faint);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+
+.page-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.page-item {
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(48, 54, 61, 0.5);
+}
+.page-item:last-child { border-bottom: none; }
+.page-item-title {
+  display: block;
   color: var(--text);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
   text-decoration: none;
-  border-color: var(--border);
+  margin-bottom: 4px;
 }
+.page-item-title:hover { color: var(--accent); text-decoration: none; }
+.page-item-reason {
+  color: var(--text-dim);
+  font-size: 12.5px;
+  font-style: italic;
+  margin-bottom: 4px;
+}
+.page-item-preview {
+  color: var(--text-faint);
+  font-size: 12.5px;
+  line-height: 1.5;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
 
-/* ── Card view (primary mode) ────────────────────────────── */
+.structure-activity {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.structure-activity-item {
+  display: grid;
+  grid-template-columns: 60px 90px 1fr;
+  gap: 12px;
+  align-items: baseline;
+  padding: 8px 0;
+  font-size: 13px;
+  border-bottom: 1px solid rgba(48, 54, 61, 0.35);
+}
+.structure-activity-item:last-child { border-bottom: none; }
+.structure-activity-kind {
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.structure-activity-kind.kind-new { color: var(--rel-supports); }
+.structure-activity-kind.kind-updated { color: var(--text-dim); }
+.structure-activity-date { color: var(--text-faint); font-size: 12px; }
+.structure-activity-title { color: var(--text); text-decoration: none; }
+.structure-activity-title:hover { color: var(--accent); text-decoration: none; }
 
-.card-view {
+.page-empty {
+  padding: 30px 0;
+  color: var(--text-faint);
+  font-style: italic;
+  text-align: center;
+}
+.page-empty-inline {
+  color: var(--text-faint);
+  font-size: 12.5px;
+  line-height: 1.6;
+}
+.page-empty-inline code {
+  background: var(--bg-panel);
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-size: 0.95em;
+}
+
+/* Landing page (root /) — command bar + registered keywords + digest teaser */
+.landing-page .landing-hero {
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 32px;
+  margin-bottom: 36px;
+  text-align: center;
+}
+.landing-hero-search {
+  text-align: left;
+  padding-bottom: 20px;
+}
+.landing-title {
+  font-size: 32px;
+  font-weight: 300;
+  color: var(--text);
+  margin: 0 0 6px;
+  letter-spacing: 0.02em;
+}
+.landing-sub {
+  color: var(--text-faint);
+  font-size: 12.5px;
+  margin-bottom: 26px;
+  letter-spacing: 0.04em;
+}
+.landing-search-form {
+  display: flex;
+  gap: 8px;
+  max-width: 520px;
+  margin: 0 auto;
+}
+.landing-hero-search .landing-search-form { margin: 0; }
+.landing-search-input {
+  flex: 1;
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 10px 14px;
+  color: var(--text);
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+.landing-search-input:focus {
+  border-color: var(--accent);
+}
+.landing-search-btn {
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 10px 16px;
+  color: var(--text);
+  font-size: 16px;
+  cursor: pointer;
+  transition: background 0.1s, border-color 0.15s;
+}
+.landing-search-btn:hover {
+  background: var(--bg-header);
+  border-color: var(--accent);
+}
+
+.landing-keyword-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 14px;
+}
+.landing-keyword {
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 10px 12px;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+.landing-keyword:hover, .landing-keyword:focus {
+  border-color: var(--accent);
+  outline: none;
+}
+.landing-keyword:hover .landing-keyword-label,
+.landing-keyword:focus .landing-keyword-label { color: var(--accent); }
+.landing-keyword-label {
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 500;
+  margin-bottom: 6px;
+}
+.landing-keyword-entries {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.landing-keyword-entries li + li { margin-top: 2px; }
+.landing-keyword-entry {
+  color: var(--text-dim);
+  font-size: 12.5px;
+  text-decoration: none;
+  line-height: 1.4;
+  display: block;
+  padding: 2px 0;
+}
+.landing-keyword-entry:hover { color: var(--accent); text-decoration: none; }
+.landing-badge-structure {
+  display: inline-block;
+  font-size: 9.5px;
+  font-weight: 500;
+  color: var(--rel-indexes);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  background: rgba(163, 113, 247, 0.12);
+  padding: 1px 5px;
+  border-radius: 3px;
+  margin-left: 6px;
+  vertical-align: middle;
+}
+
+.landing-digest {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+.landing-digest-cell {
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 14px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  color: inherit;
+  text-decoration: none;
+  transition: border-color 0.15s, transform 0.1s;
+}
+.landing-digest-cell:hover {
+  border-color: var(--accent);
+  transform: translateY(-1px);
+  text-decoration: none;
+}
+.landing-digest-num {
+  font-size: 22px;
+  font-weight: 300;
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+.landing-digest-label {
+  font-size: 10.5px;
+  color: var(--text-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.landing-digest-tension {
+  border-color: rgba(248, 81, 73, 0.35);
+  background: rgba(248, 81, 73, 0.04);
+}
+.landing-digest-tension .landing-digest-num { color: var(--rel-contradicts); }
+
+/* Search results */
+.search-bucket-hint {
+  color: var(--text-faint);
+  font-size: 11.5px;
+  margin: -6px 0 10px;
+}
+.search-bucket-hint code {
+  background: var(--bg-panel);
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 0.95em;
+}
+
+/* ── Whiteboard (DOM cards + SVG edges) ──────────────────── */
+
+.whiteboard-container {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  overflow: hidden;
+}
+.wb-canvas-host {
+  flex: 1;
+  position: relative;
+  min-width: 0;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 20px 20px, rgba(255,255,255,0.025) 1px, transparent 1px),
+    var(--bg);
+  background-size: 40px 40px;
+}
+.wb-canvas-host.wb-drop-active::after {
+  content: "Drop to add to whiteboard";
+  position: absolute;
+  inset: 0;
+  background: rgba(88, 166, 255, 0.06);
+  border: 2px dashed var(--accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent);
+  font-size: 14px;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.wb-root {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  cursor: grab;
+  user-select: none;
+}
+.wb-root.panning { cursor: grabbing; }
+
+.wb-world {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 0;
+  transform-origin: 0 0;
+  will-change: transform;
+}
+
+.wb-edges {
+  position: absolute;
+  overflow: visible;
+  pointer-events: none;
+}
+.wb-edges .wb-edge {
+  opacity: 0.7;
+  transition: stroke-width 0.14s ease, opacity 0.14s ease;
+}
+.wb-edges .wb-edge.dim { opacity: 0.12; }
+.wb-edges .wb-edge.highlight-card,
+.wb-edges .wb-edge.highlight-edge { opacity: 1; }
+.wb-edges .wb-edge.dim.highlight-edge { opacity: 1; }
+
+.wb-pair-indicator { transition: transform 0.12s ease; }
+.wb-pair-indicator:hover { filter: brightness(1.25); }
+.wb-pair-indicator rect { transition: stroke 0.12s, fill-opacity 0.12s; }
+.wb-pair-indicator:hover rect { stroke: var(--accent); }
+
+.wb-card {
+  position: absolute;
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
+  cursor: grab;
+  display: flex;
+  flex-direction: row;
+}
+.wb-card:hover {
+  border-color: var(--accent);
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
+}
+.wb-card.dragging { cursor: grabbing; z-index: 10; transition: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7); }
+.wb-card.focused {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent), 0 4px 14px rgba(0, 0, 0, 0.55);
+  z-index: 5;
+}
+.wb-card.hover-incident {
+  border-color: var(--text);
+  z-index: 4;
+}
+
+.wb-card-accent {
+  width: 4px;
+  flex-shrink: 0;
+}
+.wb-card-inner {
+  flex: 1;
+  min-width: 0;
+  padding: 12px 14px 14px;
+  max-height: 320px;
+  overflow: hidden;
+  position: relative;
+  mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent);
+  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent);
+}
+.wb-card-inner.no-fade { mask-image: none; -webkit-mask-image: none; }
+
+.wb-card.is-anchor {
+  background: #1a1726;
+  border-color: rgba(163, 113, 247, 0.45);
+}
+.wb-card.is-anchor .wb-card-inner { max-height: 420px; }
+
+.wb-card.is-ghost {
+  background: rgba(22, 27, 34, 0.75);
+  border-style: dashed;
+  border-color: rgba(139, 148, 158, 0.4);
+  opacity: 0.7;
+  box-shadow: none;
+}
+.wb-card.is-ghost:hover {
+  opacity: 1;
+  border-style: solid;
+  border-color: var(--accent);
+}
+.wb-card.is-ghost .wb-card-inner {
+  padding: 8px 10px 9px;
+  max-height: none;
+}
+.wb-card.is-ghost .wb-card-title {
+  font-size: 12.5px;
+  font-weight: 500;
+  margin-bottom: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.wb-ghost-hint {
+  font-size: 10px;
+  color: var(--text-faint);
+  font-style: italic;
+  letter-spacing: 0.03em;
+}
+
+.wb-card-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  line-height: 1.35;
+  margin-bottom: 4px;
+  word-break: break-word;
+}
+.wb-card.is-anchor .wb-card-title { font-size: 16px; color: var(--rel-indexes); }
+
+.wb-card-meta {
+  font-size: 10.5px;
+  color: var(--text-faint);
+  text-transform: lowercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 8px;
+}
+
+.wb-card-body {
+  font-size: 12.5px;
+  color: var(--text-dim);
+  line-height: 1.5;
+}
+.wb-card-body > :first-child { margin-top: 0; }
+.wb-card-body > :last-child { margin-bottom: 0; }
+.wb-card-body h1, .wb-card-body h2, .wb-card-body h3, .wb-card-body h4 {
+  font-size: 12.5px;
+  color: var(--text);
+  margin: 0.9em 0 0.4em;
+  font-weight: 600;
+  text-transform: none;
+  letter-spacing: 0;
+}
+.wb-card-body h1 { font-size: 13.5px; }
+.wb-card-body p { margin: 0 0 0.7em; }
+.wb-card-body p:last-child { margin-bottom: 0; }
+.wb-card-body ul, .wb-card-body ol { padding-left: 1.3em; margin: 0 0 0.7em; }
+.wb-card-body li { margin: 0.2em 0; }
+.wb-card-body code {
+  background: var(--bg);
+  padding: 0 4px;
+  border-radius: 3px;
+  font-family: "SF Mono", Menlo, monospace;
+  font-size: 0.9em;
+}
+.wb-card-body pre {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 8px 10px;
+  font-size: 11px;
+  overflow-x: auto;
+  margin: 0.6em 0;
+}
+.wb-card-body pre code { background: none; padding: 0; }
+.wb-card-body blockquote {
+  margin: 0.6em 0;
+  padding: 2px 0 2px 10px;
+  border-left: 2px solid var(--border);
+  color: var(--text-faint);
+}
+.wb-card-body a.inline-ref {
+  color: var(--accent);
+  background: rgba(88, 166, 255, 0.1);
+  padding: 0 3px;
+  border-radius: 2px;
+  text-decoration: none;
+  cursor: pointer;
+}
+.wb-card-body a.inline-ref:hover { background: rgba(88, 166, 255, 0.22); }
+
+
+/* Whiteboard toolbar (bottom-right) */
+.wb-toolbar {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+  z-index: 5;
+  display: flex;
+  gap: 2px;
+  padding: 4px;
+  background: rgba(22, 27, 34, 0.9);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  backdrop-filter: blur(6px);
+}
+.wb-toolbar button {
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+  padding: 0;
+}
+.wb-toolbar button:hover {
+  background: var(--bg);
+  color: var(--text);
+}
+
+/* Edge tooltip — floats above everything on hover */
+.edge-tooltip {
+  position: fixed;
+  z-index: 30;
+  background: rgba(13, 17, 23, 0.96);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 10px;
+  font-size: 12px;
+  max-width: 420px;
+  pointer-events: none;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+}
+.edge-tooltip .edge-rel {
+  font-size: 10.5px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 4px;
+}
+.edge-tooltip .edge-reason {
+  color: var(--text-dim);
+  line-height: 1.45;
+}
+.edge-tooltip .edge-reason-line {
+  color: var(--text-dim);
+  line-height: 1.45;
+  margin-top: 3px;
+}
+.edge-tooltip .edge-reason-line:first-child { margin-top: 6px; }
+
+/* ── Card content (inside reader panel) ──────────────────── */
+
+.card {
   max-width: 780px;
   margin: 0 auto;
-  padding: 32px 24px 80px;
+  padding: 0 32px 80px;
 }
@@ -156,2 +1199,25 @@
 
+.card-actions {
+  margin-top: 12px;
+  display: flex;
+  gap: 8px;
+}
+.wb-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: rgba(163, 113, 247, 0.08);
+  border: 1px solid rgba(163, 113, 247, 0.4);
+  border-radius: 6px;
+  color: var(--rel-indexes);
+  font-size: 12px;
+  font-weight: 500;
+  text-decoration: none;
+}
+.wb-button:hover {
+  background: rgba(163, 113, 247, 0.15);
+  text-decoration: none;
+}
+
 /* Markdown body */
@@ -208,3 +1274,2 @@ .markdown { color: var(--text); font-size: 15px; line-height: 1.7; }
   color: var(--text-dim);
-  font-style: normal;
 }
@@ -232,8 +1297,104 @@
 
-.empty-body {
+.empty-body { color: var(--text-faint); font-style: italic; }
+
+/* Provenance drawer — where this card comes from, when, and what surrounds it */
+.card-provenance {
+  margin-top: 32px;
+  padding-top: 22px;
+  border-top: 1px solid var(--border);
+}
+.prov-section + .prov-section { margin-top: 24px; }
+
+.prov-meta { margin-bottom: 8px; }
+.prov-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-template-columns: 60px 1fr;
+  gap: 4px 12px;
+  font-size: 12.5px;
+}
+.prov-row {
+  display: contents;
+}
+.prov-label {
   color: var(--text-faint);
-  font-style: italic;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 10.5px;
+  padding-top: 2px;
 }
+.prov-val {
+  color: var(--text-dim);
+}
+.prov-rel {
+  color: var(--text-faint);
+}
+.prov-source {
+  color: var(--accent);
+  text-decoration: none;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: rgba(88, 166, 255, 0.08);
+}
+.prov-source:hover { background: rgba(88, 166, 255, 0.18); text-decoration: none; }
 
-/* Link sidebar for card view */
+.prov-title {
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin: 0 0 10px;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.prov-count { color: var(--text-faint); font-size: 10.5px; font-weight: 400; }
+
+.prov-entry-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.prov-entry {
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(48, 54, 61, 0.35);
+}
+.prov-entry:last-child { border-bottom: none; }
+.prov-entry-head {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  margin-bottom: 3px;
+}
+.prov-entry-title {
+  color: var(--text);
+  text-decoration: none;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.4;
+  display: block;
+  margin-bottom: 3px;
+}
+.prov-entry-head .prov-entry-title { margin-bottom: 0; flex: 1; min-width: 0; }
+.prov-entry-title:hover { color: var(--accent); text-decoration: none; }
+.prov-entry-score {
+  font-size: 10.5px;
+  color: var(--text-faint);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+.prov-entry-preview {
+  color: var(--text-faint);
+  font-size: 12px;
+  line-height: 1.5;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+/* Link area — flat list with contradicts promoted */
 .card-links {
@@ -243,47 +1404,64 @@ margin-top: 40px;
   border-top: 1px solid var(--border);
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 32px;
 }
 
-@media (max-width: 720px) {
-  .card-links { grid-template-columns: 1fr; }
+.links-section + .links-section { margin-top: 28px; }
+
+.links-contradicts {
+  padding: 14px 16px;
+  background: rgba(248, 81, 73, 0.05);
+  border: 1px solid rgba(248, 81, 73, 0.35);
+  border-radius: 8px;
+  margin-bottom: 28px;
 }
 
-.rel-section-title {
-  margin: 0 0 14px;
+.links-title {
+  margin: 0 0 12px;
   font-size: 11px;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.1em;
   color: var(--text-faint);
-  font-weight: 600;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
+.links-icon { font-size: 14px; line-height: 1; }
+.links-contradicts .links-title,
+.links-contradicts .links-icon { color: var(--rel-contradicts); }
+.links-count {
+  font-weight: 400;
+  color: var(--text-faint);
+  margin-left: 2px;
+  font-size: 11px;
+}
 
-.rel-group {
-  margin-bottom: 18px;
-  border-left: 2px solid var(--rel-color, var(--border));
-  padding-left: 12px;
+.rel-tag {
+  display: inline-block;
+  padding: 0 6px;
+  border-radius: 3px;
+  border: 1px solid;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: lowercase;
+  letter-spacing: 0.04em;
+  background: transparent;
+  line-height: 1.6;
+  flex-shrink: 0;
 }
 
-.rel-label {
+.link-head {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   gap: 6px;
-  font-size: 10.5px;
+  line-height: 1.5;
+}
+
+.rel-section-title {
+  margin: 0 0 14px;
+  font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
+  color: var(--text-faint);
   font-weight: 600;
-  color: var(--rel-color, var(--text-dim));
-  margin-bottom: 6px;
 }
-.rel-label .rel-dot {
-  width: 6px; height: 6px; border-radius: 50%;
-  background: var(--rel-color, var(--text-dim));
-}
-.rel-label .rel-count {
-  color: var(--text-faint);
-  font-weight: 400;
-  margin-left: 2px;
-  font-size: 10px;
-}
 
@@ -296,29 +1474,34 @@ .rel-list {
 
-.card-view .link-row {
+.link-row {
   display: block;
-  padding: 5px 6px;
+  padding: 10px 6px;
   border-radius: 4px;
-  font-size: 13px;
-  line-height: 1.45;
+  font-size: 14px;
+  line-height: 1.5;
   margin: 0;
+  border-bottom: 1px solid var(--bg-panel);
 }
-.card-view .link-row:hover { background: rgba(88, 166, 255, 0.06); }
-.card-view .link-row .arrow {
+.link-row:last-child { border-bottom: none; }
+.link-row:hover { background: rgba(88, 166, 255, 0.04); }
+.link-row .arrow {
   display: inline-block;
-  width: 16px;
+  width: 14px;
   font-weight: 700;
-  margin-right: 4px;
+  flex-shrink: 0;
 }
-.card-view .link-row .link-title {
+.link-row .link-title {
   color: var(--text);
   text-decoration: none;
+  font-weight: 500;
 }
-.card-view .link-row .link-title:hover { color: var(--accent); text-decoration: underline; }
-.card-view .link-row .reason {
-  color: var(--text-faint);
-  font-size: 12px;
-  margin-top: 2px;
-  margin-left: 20px;
-  font-style: italic;
-  line-height: 1.4;
+.link-row .link-title:hover { color: var(--accent); text-decoration: underline; }
+
+.link-row .reason {
+  color: var(--text-dim);
+  font-size: 13.5px;
+  margin-top: 8px;
+  margin-left: 22px;
+  line-height: 1.55;
+  border-left: 2px solid var(--border);
+  padding-left: 10px;
 }
@@ -362,3 +1545,3 @@
 
-/* Keyboard-focused link (j/k nav in card mode) */
+/* Keyboard-focused link inside the panel */
 .card-nav-focus {
@@ -372,246 +1555,256 @@ outline: 2px solid var(--accent);
 
-.card-footer {
-  margin-top: 40px;
-  padding-top: 16px;
-  border-top: 1px solid var(--border);
-  color: var(--text-faint);
-  font-size: 11.5px;
-  text-align: center;
-}
-.card-footer a { color: var(--text-dim); }
-.card-footer a:hover { color: var(--accent); }
+/* ── Whiteboard library sidebar ───────────────────────────── */
 
-/* ── Graph mode (secondary at /graph) ────────────────────── */
-
-.graph-view {
-  height: calc(100vh - 46px);
+.wb-library {
+  width: var(--wb-library-w, 360px);
+  flex: 0 0 var(--wb-library-w, 360px);
+  border-left: 1px solid var(--border);
+  background: var(--bg);
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
-
-.graph-topbar {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 14px;
-  background: var(--bg-header);
-  border-bottom: 1px solid var(--border);
-  height: 40px;
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  flex-shrink: 0;
+/* Vertical splitter between canvas (left) and library (right). */
+.wb-resizer {
+  flex: 0 0 4px;
+  width: 4px;
+  cursor: col-resize;
+  background: transparent;
+  position: relative;
+  z-index: 2;
+  transition: background 0.15s;
 }
-
-.graph-topbar .stats {
-  color: var(--text-dim);
-  font-size: 12px;
-  white-space: nowrap;
-  flex-shrink: 0;
+.wb-resizer:hover,
+body.wb-resizing .wb-resizer {
+  background: var(--accent);
 }
-
-.filters {
+/* While dragging, suppress iframe/canvas hit-tests and show the col-resize cursor everywhere. */
+body.wb-resizing { cursor: col-resize !important; user-select: none; }
+body.wb-resizing * { cursor: col-resize !important; }
+.wb-library-header {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-panel);
   display: flex;
-  align-items: center;
+  flex-direction: column;
   gap: 8px;
-  flex: 1;
+}
+.wb-library-pills {
+  display: flex;
+  gap: 4px;
   flex-wrap: wrap;
-  min-width: 0;
 }
-.filters .label {
-  color: var(--text-faint);
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-right: 2px;
+.wb-library-pill {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  font: 11px ui-monospace, Menlo, monospace;
+  letter-spacing: 0.02em;
+  padding: 3px 9px;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: color 0.1s, border-color 0.1s, background 0.1s;
 }
-.filters .sep {
-  width: 1px; height: 16px; background: var(--border); margin: 0 4px;
+.wb-library-pill:hover { color: var(--text); border-color: var(--text-dim); }
+.wb-library-pill[data-active="true"] {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--bg);
+  font-weight: 500;
 }
-.filters label {
-  display: inline-flex; align-items: center; gap: 4px;
-  cursor: pointer; font-size: 12px; color: var(--text-dim); white-space: nowrap;
-}
-.filters label:hover { color: var(--text); }
-.filters input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
-
-.btn {
-  background: var(--bg-panel);
+.wb-library-search {
+  width: 100%;
+  background: var(--bg);
   border: 1px solid var(--border);
+  border-radius: 4px;
   color: var(--text);
-  padding: 5px 10px;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 14px;
-  flex-shrink: 0;
+  padding: 6px 10px;
+  font-size: 13px;
+  outline: none;
 }
-.btn:hover { border-color: var(--accent); color: var(--accent); }
-
-.graph-layout {
-  position: relative;
+.wb-library-search:focus { border-color: var(--accent); }
+.wb-library-body {
   flex: 1;
-  display: flex;
-  min-height: 0;
+  overflow-y: auto;
+  padding: 6px 0;
 }
-
-.graph {
-  flex: 1;
-  min-width: 0;
-  height: 100%;
-  background: var(--bg);
+.wb-library-loading, .wb-library-empty {
+  padding: 40px 16px;
+  text-align: center;
+  color: var(--text-dim);
+  font-size: 12px;
 }
-
-.panel {
-  height: 100%;
+.wb-library-loading-more {
+  padding: 14px;
+  text-align: center;
+  color: var(--text-dim);
+  font-size: 11px;
+}
+.wb-library-sentinel {
+  height: 1px;
+  visibility: hidden;
+}
+.wb-library-footer {
+  padding: 7px 12px;
+  border-top: 1px solid var(--border);
   background: var(--bg-panel);
-  border-left: 1px solid var(--border);
-  overflow-y: auto;
-  padding: 18px 20px 20px;
-  position: relative;
+  color: var(--text-dim);
+  font: 11px ui-monospace, Menlo, monospace;
+  text-align: center;
   flex-shrink: 0;
 }
-.panel-node { width: 380px; }
-.panel-links { width: 340px; }
-
-.panel-close {
-  position: absolute;
-  top: 10px; right: 12px;
-  background: none; border: none;
-  color: var(--text-dim);
-  font-size: 16px;
-  cursor: pointer;
-  padding: 4px 8px;
+.wb-library-item {
+  display: flex;
+  gap: 8px;
+  padding: 8px 12px;
+  cursor: grab;
+  border-bottom: 1px solid var(--border);
+  align-items: flex-start;
+  user-select: none;
 }
-.panel-close:hover { color: var(--text); }
-
-.panel h3 {
-  margin: 0 0 4px;
-  font-size: 15px;
+.wb-library-item:hover { background: var(--bg-panel); }
+.wb-library-item:active { cursor: grabbing; }
+.wb-library-type {
+  font-size: 11px;
+  color: var(--text-faint);
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+.wb-library-type.type-source { color: #f0b429; }
+.wb-library-type.type-task { color: #2ea043; }
+.wb-library-type.type-note { color: #58a6ff; }
+.wb-library-item-main { flex: 1; min-width: 0; }
+.wb-library-item-title {
   color: var(--text);
-  padding-right: 20px;
+  font-size: 13px;
+  font-weight: 500;
   line-height: 1.35;
+  display: flex;
+  gap: 6px;
+  align-items: baseline;
+  flex-wrap: wrap;
 }
-
-.panel .meta {
-  color: var(--text-faint);
-  font-size: 11px;
-  margin-bottom: 12px;
-}
-.panel .meta code {
-  background: var(--bg);
+.wb-library-badge {
+  font: 9.5px ui-monospace, Menlo, monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--rel-indexes);
+  background: rgba(163, 113, 247, 0.12);
   padding: 1px 5px;
   border-radius: 3px;
-  font-family: "SF Mono", Menlo, monospace;
-  font-size: 10.5px;
 }
-
-.panel .panel-open-link {
-  margin-bottom: 14px;
-  font-size: 12px;
+.wb-library-item-preview {
+  color: var(--text-faint);
+  font-size: 11.5px;
+  margin-top: 3px;
+  line-height: 1.45;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  white-space: pre-wrap;
+  word-break: break-word;
 }
-.panel .panel-open-link a { color: var(--accent); }
 
-.panel .body {
-  color: var(--text-dim);
-  font-size: 12.5px;
-  line-height: 1.55;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  border-left: 2px solid var(--border);
-  padding-left: 10px;
-  margin: 14px 0;
+/* ── Master/detail inside the library sidebar ──────────────────────
+   Default: list is visible, detail is hidden. When .wb-library has
+   .detail-mode, list hides and detail takes the full sidebar column.
+*/
+.wb-library-list,
+.wb-library-detail {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
 }
+.wb-library-detail { display: none; }
+.wb-library.detail-mode .wb-library-list { display: none; }
+.wb-library.detail-mode .wb-library-detail { display: flex; }
 
-.panel section { margin-top: 14px; }
-.panel .links-header {
-  margin: 0 0 14px;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-faint);
+.wb-library-detail-header {
+  flex-shrink: 0;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-panel);
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
-.panel section h4 {
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-faint);
-  margin: 0 0 6px;
+.wb-library-back {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text);
+  font: 11px ui-monospace, Menlo, monospace;
+  padding: 3px 9px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: color 0.1s, border-color 0.1s, background 0.1s;
 }
-
-.panel .rel-group {
-  margin-bottom: 10px;
-  border-left: 2px solid var(--rel-color, var(--border));
-  padding-left: 10px;
+.wb-library-back:hover { border-color: var(--accent); color: var(--accent); }
+.wb-library-detail-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0;
 }
-.panel .rel-label {
-  display: flex; align-items: center; gap: 6px;
-  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
-  font-weight: 600; color: var(--rel-color, var(--text-dim));
-  margin-bottom: 4px;
+.wb-library-detail-loading {
+  color: var(--text-dim);
+  font: 12px ui-monospace, Menlo, monospace;
+  padding: 40px 12px;
+  text-align: center;
 }
-.panel .rel-label .rel-dot {
-  width: 6px; height: 6px; border-radius: 50%;
-  background: var(--rel-color, var(--text-dim));
+/* Narrower padding + title size when .card renders inside the sidebar. */
+.wb-library-card.card {
+  max-width: 100%;
+  padding: 16px 14px 40px;
 }
-.panel .rel-label .rel-count { color: var(--text-faint); font-weight: 400; }
+.wb-library-card .card-title {
+  font-size: 18px;
+  line-height: 1.3;
+}
+.wb-library-card .card-meta { font-size: 11.5px; }
+.wb-library-card .card-header { margin-bottom: 16px; padding-bottom: 14px; }
+.wb-library-card .card-body { font-size: 13px; line-height: 1.6; }
+.wb-library-item-empty { color: var(--text-faint); font-style: italic; }
 
-.panel .link-row {
-  display: block;
-  padding: 5px 4px;
-  border-radius: 3px;
-  cursor: pointer;
+/* ── Keyboard hints footer (shared across landing/search/structure/digest) ── */
+.landing-keys, .page-keys {
+  margin-top: 48px;
+  padding-top: 20px;
+  border-top: 1px solid var(--border);
+  color: var(--text-dim);
   font-size: 12px;
-  line-height: 1.4;
-  transition: background-color 0.1s;
+  text-align: center;
 }
-.panel .link-row:hover { background: rgba(88, 166, 255, 0.08); }
-.panel .link-row .arrow {
-  display: inline-block; width: 14px; font-weight: 700; margin-right: 4px;
+.landing-keys kbd, .page-keys kbd {
+  display: inline-block;
+  padding: 1px 6px;
+  margin: 0 1px;
+  font: 11px ui-monospace, Menlo, monospace;
+  background: var(--bg-alt, var(--bg));
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  border-radius: 3px;
+  color: var(--text);
 }
-.panel .link-row .link-title { color: var(--text); }
-.panel .link-row .reason {
-  color: var(--text-faint);
-  font-size: 11px; margin-top: 2px; margin-left: 18px;
-  font-style: italic; line-height: 1.35;
-}
-
-/* Legend */
-.legend {
-  position: absolute;
-  left: 12px; bottom: 12px;
-  background: rgba(22, 27, 34, 0.92);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 10px 12px;
-  font-size: 11px;
+.landing-keys-link {
   color: var(--text-dim);
-  backdrop-filter: blur(6px);
-  z-index: 5;
+  text-decoration: none;
+  border-bottom: 1px dotted var(--border);
 }
-.legend-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
-.legend-sep { height: 1px; background: var(--border); margin: 5px 0; }
-.legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
-.legend .bar { width: 18px; height: 2px; display: inline-block; }
+.landing-keys-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
 
-.dot.type-note { background: var(--type-note); }
-.dot.type-source { background: var(--type-source); }
-.dot.type-task { background: var(--type-task); }
-
-.bar.rel-supports { background: var(--rel-supports); }
-.bar.rel-contradicts { background: var(--rel-contradicts); }
-.bar.rel-refines { background: var(--rel-refines); }
-.bar.rel-related { background: var(--rel-related); }
-.bar.rel-indexes { background: var(--rel-indexes); }
-.bar.rel-continues { background: var(--rel-continues); }
-
 /* ── Empty state ─────────────────────────────────────────── */
 
 .empty {
-  max-width: 600px;
-  margin: 120px auto;
-  padding: 40px 24px;
+  position: absolute;
+  inset: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   gap: 16px;
+  padding: 40px 24px;
   color: var(--text-dim);
+  z-index: 3;
+  background: var(--bg);
 }
@@ -618,0 +1811,0 @@ .empty h2 { margin: 0; color: var(--text); font-size: 22px; font-weight: 600; }

dist/view-ui/index.html

@@ -12,21 +12,16 @@ <!DOCTYPE html>
     <a class="brand" href="/">lens</a>
+    <div class="stats" id="stats">—</div>
+    <div class="mode-badge hidden" id="mode-badge"></div>
     <input class="search" id="search" type="text" placeholder="search title…" autocomplete="off" />
     <nav class="top-nav">
-      <a class="top-nav-link" id="nav-graph" href="/graph">graph</a>
+      <button class="btn btn-primary" id="new-whiteboard-top" title="New whiteboard (⌘⇧N)">+ Whiteboard</button>
+      <button class="btn" id="relayout" title="Re-run layout">⟳</button>
     </nav>
   </header>
 
-  <!-- Card mode ─────────────────────────────────────────── -->
-  <main id="card-view" class="card-view hidden">
-    <article class="card" id="card">
-      <div class="card-loading">Loading…</div>
-    </article>
-  </main>
-
-  <!-- Graph mode (panoramic, secondary) ─────────────────── -->
-  <div id="graph-view" class="graph-view hidden">
-    <div class="graph-topbar">
-      <div class="stats" id="stats">—</div>
+  <!-- Main stage: canvas on the left, reader panel slides in from the right -->
+  <main id="stage" class="stage">
+    <div id="canvas-holder" class="canvas-holder">
+      <div id="graph" class="graph"></div>
       <div class="filters" id="filters">
-        <span class="label">type</span>
         <label><input type="checkbox" data-filter="type" value="note" checked> note</label>
@@ -36,3 +31,2 @@ <label><input type="checkbox" data-filter="type" value="source" checked> source</label>
         <span class="sep"></span>
-        <span class="label">rel</span>
         <label><input type="checkbox" data-filter="rel" value="supports" checked> supports</label>
@@ -45,31 +39,18 @@ <label><input type="checkbox" data-filter="rel" value="contradicts" checked> contradicts</label>
       </div>
-      <button class="btn" id="relayout" title="Re-run layout">⟳</button>
     </div>
 
-    <div class="graph-layout">
-      <div id="graph" class="graph"></div>
-      <aside id="node-panel" class="panel panel-node hidden">
-        <button class="panel-close" id="panel-close" aria-label="Close">✕</button>
-        <div id="node-panel-body"></div>
-      </aside>
-      <aside id="links-panel" class="panel panel-links hidden">
-        <div id="links-panel-body"></div>
-      </aside>
-    </div>
+    <aside id="reader-panel" class="reader-panel hidden" aria-label="Card reader">
+      <header class="panel-toolbar">
+        <button id="panel-max" title="Maximize" aria-label="Maximize">⤢</button>
+        <button id="panel-close" title="Close" aria-label="Close">✕</button>
+      </header>
+      <article id="card" class="card">
+        <div class="card-loading">Loading…</div>
+      </article>
+    </aside>
 
-    <div class="legend" id="legend">
-      <div class="legend-row"><span class="dot type-note"></span>note</div>
-      <div class="legend-row"><span class="dot type-source"></span>source</div>
-      <div class="legend-row"><span class="dot type-task"></span>task</div>
-      <div class="legend-sep"></div>
-      <div class="legend-row"><span class="bar rel-supports"></span>supports</div>
-      <div class="legend-row"><span class="bar rel-contradicts"></span>contradicts</div>
-      <div class="legend-row"><span class="bar rel-refines"></span>refines</div>
-      <div class="legend-row"><span class="bar rel-related"></span>related</div>
-      <div class="legend-row"><span class="bar rel-indexes"></span>indexes</div>
-      <div class="legend-row"><span class="bar rel-continues"></span>continues</div>
-    </div>
-  </div>
+    <!-- Edge reason tooltip floats above the canvas -->
+    <div id="edge-tooltip" class="edge-tooltip hidden"></div>
+  </main>
 
-  <!-- Landing / empty ───────────────────────────────────── -->
   <div id="empty" class="empty hidden">
@@ -76,0 +57,0 @@ <h2>No notes yet</h2>

package.json

 {
   "name": "lens-note",
-  "version": "1.31.0",
+  "version": "1.32.0",
   "description": "Knowledge graph CLI for humans and agents. Like Git for knowledge.",
@@ -5,0 +5,0 @@ "type": "module",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Fixed alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Improved metrics

Total package byte prevSize

2917445

4.39%

Lines of code

59992

4.65%

Worsened metrics

Number of low supply chain risk alerts

5

25%

Number of medium supply chain risk alerts

6

100%

No dependency changes