npm - @research-copilot/plugin - Versions diffs - 1.1.16 → 1.1.18 - Mend

@research-copilot/plugin 1.1.16 → 1.1.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (799) hide show

package/dist/skills/llm-wiki/docs/design/oriental-atlas/oriental-editorial-atlas.html ADDED Viewed

@@ -0,0 +1,1908 @@
+<!doctype html>
+<html lang="zh-Hans">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>llm-wiki 知识舆图 · 东方编辑部</title>
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%238B2E24'/%3E%3Cpath d='M10 43 C17 34 22 25 29 31 C35 18 42 14 54 43' fill='none' stroke='%23FFFDF7' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 49 C24 45 34 46 50 49' fill='none' stroke='%23FFFDF7' stroke-width='3' stroke-linecap='round' opacity='.75'/%3E%3Ccircle cx='43' cy='18' r='3' fill='%23FFFDF7'/%3E%3C/svg%3E">
+  <style>
+    :root {
+      color-scheme: light;
+      --bg: #f4efe4;
+      --surface: #fffdf7;
+      --surface-2: #f8f1e4;
+      --vellum: #e9ddc9;
+      --mist: #ece5d8;
+      --ink: #241f1a;
+      --muted: #6f6559;
+      --faint: #9b8f7e;
+      --rule: #d8cdbb;
+      --line: #cfc4b1;
+      --cinnabar: #8b2e24;
+      --cinnabar-2: #a23b2a;
+      --jade: #4b7564;
+      --green: #3e6b4b;
+      --night: #315f72;
+      --amber: #b7791f;
+      --violet: #6f557f;
+      --shadow: 0 18px 36px rgba(36, 31, 26, .11);
+      --soft-shadow: 0 10px 24px rgba(36, 31, 26, .08);
+      --radius: 12px;
+      --font-serif: "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
+      --font-ui: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
+      --font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
+    }
+    * {
+      box-sizing: border-box;
+    }
+    html,
+    body {
+      width: 100%;
+      min-height: 100%;
+      margin: 0;
+      background:
+        radial-gradient(circle at 18% 12%, rgba(255, 253, 247, .72), transparent 28%),
+        radial-gradient(circle at 90% 18%, rgba(75, 117, 100, .12), transparent 28%),
+        linear-gradient(145deg, #f4efe4 0%, #ece4d4 48%, #f6f0e4 100%);
+      color: var(--ink);
+      font-family: var(--font-ui);
+      overflow: hidden;
+    }
+    body::before,
+    body::after {
+      content: "";
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      z-index: 0;
+    }
+    body::before {
+      opacity: .42;
+      background-image:
+        repeating-linear-gradient(0deg, transparent 0 31px, rgba(104, 88, 66, .055) 31px 32px),
+        repeating-linear-gradient(90deg, transparent 0 31px, rgba(104, 88, 66, .042) 31px 32px),
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .48 0 0 0 0 .34 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
+      mix-blend-mode: multiply;
+    }
+    body::after {
+      background:
+        linear-gradient(90deg, transparent 0 86px, rgba(139, 46, 36, .22) 86px 87px, transparent 87px),
+        linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 22%);
+    }
+    button,
+    input,
+    a {
+      font: inherit;
+    }
+    button,
+    input,
+    a {
+      min-height: 44px;
+    }
+    a {
+      color: inherit;
+      display: inline-flex;
+      align-items: center;
+    }
+    button:focus-visible,
+    input:focus-visible,
+    [tabindex]:focus-visible {
+      outline: 2px solid rgba(139, 46, 36, .72);
+      outline-offset: 3px;
+    }
+    .app {
+      position: relative;
+      z-index: 1;
+      height: 100vh;
+      display: grid;
+      grid-template-columns: minmax(236px, 276px) minmax(520px, 1fr) minmax(300px, 370px);
+      grid-template-rows: auto 1fr;
+      gap: 16px;
+      padding: 14px 16px 16px 24px;
+    }
+    .topbar {
+      grid-column: 1 / -1;
+      display: grid;
+      grid-template-columns: minmax(240px, 1fr) auto;
+      gap: 18px;
+      align-items: center;
+      padding: 14px 16px 13px 18px;
+      background: rgba(255, 253, 247, .82);
+      border: 1px solid rgba(216, 205, 187, .92);
+      border-radius: var(--radius);
+      box-shadow: var(--soft-shadow);
+      backdrop-filter: blur(8px);
+    }
+    .brand {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      gap: 14px;
+    }
+    .seal {
+      width: 42px;
+      height: 42px;
+      display: grid;
+      place-items: center;
+      flex: 0 0 auto;
+      border-radius: 10px;
+      background:
+        linear-gradient(135deg, rgba(139, 46, 36, .95), rgba(162, 59, 42, .95)),
+        var(--cinnabar);
+      color: #fffdf7;
+      box-shadow: inset 0 0 0 1px rgba(255, 253, 247, .28), 0 10px 18px rgba(139, 46, 36, .22);
+    }
+    .seal svg {
+      width: 29px;
+      height: 29px;
+      display: block;
+    }
+    .brand h1 {
+      margin: 0;
+      font-family: var(--font-serif);
+      font-size: clamp(21px, 2vw, 31px);
+      line-height: 1.08;
+      letter-spacing: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .brand p {
+      margin: 6px 0 0;
+      color: var(--muted);
+      font-size: 13px;
+      line-height: 1.4;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .status-strip {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    .status-pill,
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 7px;
+      min-height: 32px;
+      padding: 6px 10px;
+      border-radius: 999px;
+      border: 1px solid rgba(216, 205, 187, .92);
+      background: rgba(248, 241, 228, .84);
+      color: var(--muted);
+      font-size: 12px;
+      white-space: nowrap;
+    }
+    button[disabled],
+    .is-disabled {
+      cursor: not-allowed;
+      opacity: .62;
+      filter: saturate(.65);
+    }
+    button[disabled],
+    .is-disabled,
+    .node.is-disabled {
+      border-style: dashed;
+      background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(111, 101, 89, .08) 8px 10px);
+    }
+    .is-disabled::after {
+      content: "不可用";
+      display: inline-flex;
+      align-items: center;
+      min-height: 20px;
+      margin-left: 8px;
+      padding: 0 7px;
+      border-radius: 999px;
+      border: 1px solid rgba(111, 101, 89, .36);
+      color: var(--muted);
+      font-family: var(--font-ui);
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0;
+    }
+    .status-dot {
+      width: 7px;
+      height: 7px;
+      border-radius: 99px;
+      background: var(--green);
+      box-shadow: 0 0 0 4px rgba(62, 107, 75, .12);
+    }
+    .icon-button,
+    .ghost-button,
+    .primary-button,
+    .state-button,
+    .nav-item,
+    .node {
+      border: 0;
+      cursor: pointer;
+      color: inherit;
+    }
+    .icon-button {
+      width: 44px;
+      height: 44px;
+      border-radius: 10px;
+      border: 1px solid rgba(216, 205, 187, .94);
+      background: rgba(255, 253, 247, .82);
+      display: inline-grid;
+      place-items: center;
+      color: var(--muted);
+    }
+    .ghost-button,
+    .primary-button,
+    .state-button {
+      border-radius: 10px;
+      padding: 0 12px;
+      border: 1px solid rgba(216, 205, 187, .94);
+      background: rgba(255, 253, 247, .82);
+      color: var(--ink);
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      justify-content: center;
+    }
+    .primary-button {
+      border-color: var(--cinnabar);
+      background: var(--cinnabar);
+      color: #fffdf7;
+      box-shadow: 0 10px 18px rgba(139, 46, 36, .18);
+    }
+    .ghost-button:hover,
+    .state-button:hover,
+    .icon-button:hover,
+    .nav-item:hover,
+    .node:hover {
+      transform: translateY(-1px);
+      border-color: rgba(139, 46, 36, .42);
+      box-shadow: 0 8px 16px rgba(36, 31, 26, .08);
+    }
+    .github-button {
+      font-weight: 700;
+      color: var(--ink);
+    }
+    .github-button svg {
+      width: 18px;
+      height: 18px;
+      flex: 0 0 auto;
+    }
+    .mobile-atlas-preview,
+    .sidebar,
+    .drawer,
+    .canvas-card {
+      min-height: 0;
+      border: 1px solid rgba(216, 205, 187, .92);
+      background: rgba(255, 253, 247, .76);
+      border-radius: var(--radius);
+      box-shadow: var(--soft-shadow);
+      backdrop-filter: blur(9px);
+    }
+    .mobile-atlas-preview {
+      display: none;
+    }
+    .sidebar {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+      padding: 15px 22px 15px 15px;
+      overflow-y: auto;
+    }
+    .sidebar::after,
+    .drawer::before {
+      content: "";
+      position: absolute;
+      top: 16px;
+      bottom: 16px;
+      width: 1px;
+      background: rgba(139, 46, 36, .24);
+      pointer-events: none;
+    }
+    .sidebar::after {
+      right: 14px;
+    }
+    .drawer::before {
+      left: 14px;
+    }
+    .section {
+      position: relative;
+      display: grid;
+      gap: 9px;
+    }
+    .section-title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 8px;
+      min-height: 24px;
+      color: var(--muted);
+      font-size: 12px;
+      letter-spacing: .04em;
+    }
+    .section-title b {
+      color: var(--ink);
+      font-family: var(--font-serif);
+      font-size: 15px;
+      letter-spacing: 0;
+    }
+    .search-box {
+      position: relative;
+    }
+    .search-box input {
+      width: 100%;
+      min-height: 46px;
+      padding: 0 42px 0 13px;
+      border-radius: 10px;
+      border: 1px solid rgba(216, 205, 187, .95);
+      background: rgba(248, 241, 228, .78);
+      color: var(--ink);
+    }
+    .search-box span {
+      position: absolute;
+      right: 13px;
+      top: 50%;
+      translate: 0 -50%;
+      color: var(--faint);
+    }
+    .nav-list,
+    .queue-list,
+    .start-list,
+    .neighbor-list,
+    .notes-list {
+      display: grid;
+      gap: 8px;
+    }
+    .nav-item,
+    .queue-card,
+    .start-card,
+    .neighbor-card,
+    .note-card,
+    .state-panel {
+      width: 100%;
+      min-width: 0;
+      padding: 10px 12px;
+      border-radius: 10px;
+      border: 1px solid rgba(216, 205, 187, .92);
+      background: rgba(248, 241, 228, .66);
+      text-align: left;
+    }
+    .nav-item {
+      display: grid;
+      grid-template-columns: 10px 1fr auto;
+      align-items: center;
+      gap: 9px;
+    }
+    .nav-item[aria-pressed="true"] {
+      border-color: rgba(139, 46, 36, .46);
+      background: rgba(255, 253, 247, .94);
+      box-shadow: inset 3px 0 0 var(--cinnabar), 0 7px 16px rgba(36, 31, 26, .07);
+    }
+    .swatch {
+      width: 10px;
+      height: 28px;
+      border-radius: 99px;
+      background: var(--night);
+    }
+    .nav-copy,
+    .card-copy {
+      min-width: 0;
+    }
+    .nav-copy strong,
+    .card-copy strong {
+      display: block;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-family: var(--font-serif);
+      font-size: 14px;
+      line-height: 1.3;
+    }
+    .nav-copy span,
+    .card-copy span {
+      display: block;
+      margin-top: 3px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--muted);
+      font-size: 12px;
+    }
+    .count {
+      font-family: var(--font-mono);
+      color: var(--cinnabar);
+      font-size: 12px;
+      white-space: nowrap;
+    }
+    .segmented {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 6px;
+      padding: 5px;
+      border-radius: 12px;
+      background: rgba(233, 221, 201, .52);
+      border: 1px solid rgba(216, 205, 187, .82);
+    }
+    .segmented button {
+      min-width: 44px;
+      min-height: 44px;
+      border-radius: 8px;
+      border: 0;
+      background: transparent;
+      color: var(--muted);
+      font-size: 12px;
+    }
+    .segmented button[aria-pressed="true"] {
+      color: var(--ink);
+      background: rgba(255, 253, 247, .92);
+      box-shadow: 0 5px 12px rgba(36, 31, 26, .08);
+    }
+    .queue-card {
+      display: grid;
+      gap: 10px;
+    }
+    .queue-metrics {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+    }
+    .metric {
+      padding: 9px;
+      border-radius: 9px;
+      background: rgba(255, 253, 247, .72);
+      border: 1px dashed rgba(216, 205, 187, .95);
+    }
+    .metric span {
+      display: block;
+      color: var(--muted);
+      font-size: 11px;
+    }
+    .metric b {
+      display: block;
+      margin-top: 5px;
+      font-family: var(--font-serif);
+      font-size: 18px;
+      line-height: 1;
+    }
+    .canvas-card {
+      position: relative;
+      overflow: hidden;
+      display: grid;
+      grid-template-rows: auto 1fr auto;
+      background:
+        linear-gradient(180deg, rgba(255, 253, 247, .62), rgba(248, 241, 228, .58)),
+        var(--surface-2);
+    }
+    .canvas-card::before,
+    .canvas-card::after {
+      content: "";
+      position: absolute;
+      pointer-events: none;
+      z-index: 0;
+    }
+    .canvas-card::before {
+      inset: 64px 16px 72px;
+      opacity: .66;
+      background:
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='920' height='620' viewBox='0 0 920 620'%3E%3Cg fill='none' stroke='%23cfc4b1' stroke-width='1.35' opacity='.9'%3E%3Cpath d='M-20 480 C88 420 140 448 212 386 C298 312 364 378 454 322 C548 264 608 278 704 228 C798 180 856 206 946 150'/%3E%3Cpath d='M-28 525 C86 462 166 492 244 426 C332 350 394 414 482 352 C574 288 638 306 734 254 C820 208 880 236 952 196'/%3E%3Cpath d='M18 372 C112 324 170 340 240 282 C324 212 386 272 466 222 C542 174 636 190 700 142 C782 82 854 120 930 78'/%3E%3Cpath d='M44 540 C118 520 148 558 218 522 C306 478 340 514 430 462 C514 414 586 430 674 386 C778 334 826 362 912 322'/%3E%3Cpath d='M-32 262 C60 224 112 242 174 198 C244 148 300 184 374 142 C450 96 520 106 594 72 C686 32 760 56 930 4'/%3E%3Cpath d='M72 470 C156 430 218 456 290 404 C366 350 424 392 512 338 C602 284 662 302 742 260 C812 224 856 238 936 198'/%3E%3Cpath d='M80 302 C154 266 218 286 286 238 C350 190 422 218 492 178 C568 134 650 142 724 96 C796 52 854 72 930 34'/%3E%3C/g%3E%3Cg fill='none' stroke='%23315f72' stroke-width='1.1' opacity='.22'%3E%3Cpath d='M120 154 L206 198 L316 162 L430 236 L546 176 L678 226 L798 144'/%3E%3Cpath d='M172 398 L260 338 L368 390 L486 316 L604 356 L732 294'/%3E%3Cpath d='M236 112 L330 92 L426 140 L528 106 L632 156 L738 112'/%3E%3C/g%3E%3Cg fill='%23315f72' opacity='.18'%3E%3Ccircle cx='120' cy='154' r='3'/%3E%3Ccircle cx='316' cy='162' r='2.6'/%3E%3Ccircle cx='546' cy='176' r='2.8'/%3E%3Ccircle cx='798' cy='144' r='3'/%3E%3Ccircle cx='260' cy='338' r='2.4'/%3E%3Ccircle cx='604' cy='356' r='2.4'/%3E%3Ccircle cx='738' cy='112' r='2.8'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
+    }
+    .canvas-card::after {
+      inset: 0;
+      background:
+        radial-gradient(circle at 52% 38%, rgba(49, 95, 114, .16), transparent 18%),
+        radial-gradient(circle at 70% 56%, rgba(75, 117, 100, .12), transparent 22%),
+        radial-gradient(circle at 35% 62%, rgba(139, 46, 36, .10), transparent 18%),
+        linear-gradient(90deg, rgba(255, 253, 247, .1), rgba(236, 229, 216, .18), rgba(255, 253, 247, .1));
+      mix-blend-mode: multiply;
+    }
+    .mobile-atlas-preview {
+      position: relative;
+      overflow: hidden;
+      padding: 12px;
+      background:
+        linear-gradient(180deg, rgba(255, 253, 247, .76), rgba(248, 241, 228, .66)),
+        var(--surface-2);
+    }
+    .mobile-atlas-preview::before {
+      content: "";
+      position: absolute;
+      inset: 8px 10px;
+      pointer-events: none;
+      opacity: .72;
+      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='112' viewBox='0 0 340 112'%3E%3Cg fill='none' stroke='%23cfc4b1' stroke-width='1.1' opacity='.86'%3E%3Cpath d='M-4 88 C32 58 64 76 96 50 C132 22 164 44 202 30 C246 14 280 34 346 10'/%3E%3Cpath d='M-10 106 C34 78 72 96 108 68 C148 38 178 60 218 44 C258 28 296 46 348 24'/%3E%3Cpath d='M10 66 C48 42 78 52 112 30 C150 8 184 24 218 16 C258 6 292 16 340 2'/%3E%3C/g%3E%3Cg fill='none' stroke='%23315f72' stroke-width='1' opacity='.26'%3E%3Cpath d='M48 68 L104 44 L164 56 L226 32 L292 50'/%3E%3Cpath d='M84 88 L146 74 L206 90 L272 70'/%3E%3C/g%3E%3Cg fill='%23315f72' opacity='.32'%3E%3Ccircle cx='48' cy='68' r='3'/%3E%3Ccircle cx='164' cy='56' r='3'/%3E%3Ccircle cx='292' cy='50' r='3'/%3E%3C/g%3E%3Cg fill='%238b2e24' opacity='.8'%3E%3Ccircle cx='104' cy='44' r='4'/%3E%3C/g%3E%3Cg fill='%234b7564' opacity='.72'%3E%3Ccircle cx='226' cy='32' r='4'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
+    }
+    .preview-copy,
+    .preview-map {
+      position: relative;
+      z-index: 1;
+    }
+    .preview-copy {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      margin-bottom: 10px;
+    }
+    .preview-copy strong {
+      font-family: var(--font-serif);
+      font-size: 16px;
+    }
+    .preview-copy span {
+      color: var(--muted);
+      font-size: 12px;
+      white-space: nowrap;
+    }
+    .preview-map {
+      height: 94px;
+      border-radius: 11px;
+      border: 1px solid rgba(216, 205, 187, .86);
+      background: rgba(255, 253, 247, .38);
+    }
+    .canvas-toolbar,
+    .canvas-footer {
+      position: relative;
+      z-index: 2;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 12px 14px;
+    }
+    .canvas-toolbar {
+      border-bottom: 1px solid rgba(216, 205, 187, .78);
+      background: rgba(255, 253, 247, .72);
+    }
+    .canvas-title {
+      min-width: 0;
+    }
+    .canvas-title strong {
+      display: block;
+      font-family: var(--font-serif);
+      font-size: 18px;
+      line-height: 1.2;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .canvas-title span {
+      display: block;
+      margin-top: 4px;
+      color: var(--muted);
+      font-size: 12px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .canvas-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      justify-content: flex-end;
+    }
+    .atlas {
+      position: relative;
+      z-index: 1;
+      min-height: 0;
+      overflow: hidden;
+    }
+    .mist {
+      position: absolute;
+      inset: auto -10% 8% -10%;
+      height: 28%;
+      pointer-events: none;
+      background:
+        radial-gradient(ellipse at 28% 55%, rgba(255, 253, 247, .56), transparent 56%),
+        radial-gradient(ellipse at 70% 48%, rgba(236, 229, 216, .6), transparent 58%);
+      filter: blur(18px);
+      opacity: .9;
+      animation: drift 12s ease-in-out infinite alternate;
+    }
+    .graph-svg {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      overflow: visible;
+    }
+    .edge {
+      fill: none;
+      stroke-linecap: round;
+      opacity: .74;
+    }
+    .edge.extracted {
+      stroke: rgba(49, 95, 114, .74);
+      stroke-width: 2.4;
+    }
+    .edge.inferred {
+      stroke: rgba(75, 117, 100, .62);
+      stroke-width: 1.7;
+      stroke-dasharray: 6 8;
+    }
+    .edge.ambiguous {
+      stroke: rgba(183, 121, 31, .66);
+      stroke-width: 1.6;
+      stroke-dasharray: 2 7;
+    }
+    .edge.unverified {
+      stroke: rgba(111, 101, 89, .45);
+      stroke-width: 1.2;
+      stroke-dasharray: 1 8;
+    }
+    .node {
+      position: absolute;
+      z-index: 3;
+      min-height: 46px;
+      max-width: 178px;
+      padding: 8px 11px;
+      border-radius: 12px;
+      border: 1px solid rgba(216, 205, 187, .98);
+      background: rgba(255, 253, 247, .88);
+      box-shadow: 0 12px 22px rgba(36, 31, 26, .09), inset 0 0 0 1px rgba(255, 255, 255, .44);
+      translate: -50% -50%;
+      transition: opacity .16s ease, transform .16s ease, box-shadow .16s ease, border-color .16s ease;
+      text-align: left;
+    }
+    .node::before {
+      content: "";
+      position: absolute;
+      inset: -7px;
+      border-radius: 17px;
+      background: radial-gradient(circle, rgba(49, 95, 114, .18), transparent 66%);
+      z-index: -1;
+      opacity: .46;
+    }
+    .node[data-type="topic"] {
+      border-left: 5px solid var(--cinnabar);
+    }
+    .node[data-type="entity"] {
+      border-left: 5px solid var(--night);
+    }
+    .node[data-type="source"] {
+      border-left: 5px solid var(--jade);
+    }
+    .node[aria-pressed="true"] {
+      border-color: rgba(139, 46, 36, .74);
+      box-shadow: 0 16px 28px rgba(139, 46, 36, .16), 0 0 0 4px rgba(139, 46, 36, .1);
+      transform: translateY(-2px);
+    }
+    .node.is-dim,
+    .edge.is-dim {
+      opacity: .18;
+    }
+    .node.is-disabled {
+      opacity: .72;
+    }
+    .node.is-disabled::before {
+      background: radial-gradient(circle, rgba(111, 101, 89, .16), transparent 66%);
+    }
+    .node.is-disabled .spark {
+      background: var(--muted);
+      box-shadow: none;
+    }
+    .node.is-hidden {
+      display: none;
+    }
+    .node-kind {
+      display: block;
+      color: var(--muted);
+      font-family: var(--font-mono);
+      font-size: 10px;
+      letter-spacing: .04em;
+      text-transform: uppercase;
+    }
+    .node-name {
+      display: block;
+      max-width: 146px;
+      margin-top: 3px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-family: var(--font-serif);
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 1.25;
+    }
+    .node-meta {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-top: 6px;
+      color: var(--faint);
+      font-size: 11px;
+    }
+    .spark {
+      width: 5px;
+      height: 5px;
+      border-radius: 99px;
+      background: var(--night);
+      box-shadow: 0 0 10px rgba(49, 95, 114, .7);
+    }
+    .empty-state,
+    .loading-state,
+    .error-state {
+      position: absolute;
+      z-index: 5;
+      left: 50%;
+      top: 50%;
+      width: min(360px, calc(100% - 48px));
+      translate: -50% -50%;
+      padding: 18px;
+      border-radius: 14px;
+      border: 1px solid rgba(216, 205, 187, .95);
+      background: rgba(255, 253, 247, .9);
+      box-shadow: var(--shadow);
+      text-align: center;
+      display: none;
+    }
+    .state-title {
+      margin: 0;
+      font-family: var(--font-serif);
+      font-size: 18px;
+    }
+    .state-copy {
+      margin: 8px 0 0;
+      color: var(--muted);
+      font-size: 13px;
+      line-height: 1.55;
+    }
+    .spinner {
+      width: 34px;
+      height: 34px;
+      margin: 0 auto 12px;
+      border-radius: 99px;
+      border: 2px solid rgba(216, 205, 187, .95);
+      border-top-color: var(--cinnabar);
+      animation: spin .9s linear infinite;
+    }
+    .atlas[data-mode="loading"] .loading-state,
+    .atlas[data-mode="empty"] .empty-state,
+    .atlas[data-mode="error"] .error-state {
+      display: block;
+    }
+    .atlas[data-mode="loading"] .node,
+    .atlas[data-mode="loading"] .edge,
+    .atlas[data-mode="empty"] .node,
+    .atlas[data-mode="empty"] .edge,
+    .atlas[data-mode="error"] .node,
+    .atlas[data-mode="error"] .edge {
+      opacity: .1;
+    }
+    .canvas-footer {
+      border-top: 1px solid rgba(216, 205, 187, .78);
+      background: rgba(255, 253, 247, .7);
+      align-items: stretch;
+    }
+    .legend,
+    .mini-map,
+    .insight {
+      min-width: 0;
+      border: 1px solid rgba(216, 205, 187, .82);
+      border-radius: 10px;
+      background: rgba(248, 241, 228, .62);
+      padding: 10px;
+    }
+    .legend {
+      flex: 1.2;
+    }
+    .mini-map {
+      flex: .9;
+      min-width: 138px;
+    }
+    .insight {
+      flex: 1.15;
+    }
+    .footer-label {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      color: var(--muted);
+      font-size: 12px;
+    }
+    .confidence-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 8px;
+    }
+    .confidence {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      font-family: var(--font-mono);
+      font-size: 11px;
+      color: var(--muted);
+    }
+    .confidence i {
+      width: 22px;
+      border-top: 2px solid var(--night);
+    }
+    .confidence:nth-child(2) i {
+      border-top-color: var(--jade);
+      border-top-style: dashed;
+    }
+    .confidence:nth-child(3) i {
+      border-top-color: var(--amber);
+      border-top-style: dotted;
+    }
+    .confidence:nth-child(4) i {
+      border-top-color: var(--muted);
+      border-top-style: dotted;
+    }
+    .mini-map svg {
+      width: 100%;
+      height: 54px;
+      display: block;
+    }
+    .insight strong {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-family: var(--font-serif);
+      font-size: 13px;
+    }
+    .insight p {
+      margin: 5px 0 0;
+      color: var(--muted);
+      font-size: 12px;
+      line-height: 1.45;
+    }
+    .drawer {
+      position: relative;
+      min-width: 0;
+      display: grid;
+      grid-template-rows: auto 1fr auto;
+      padding: 0 0 0 12px;
+      overflow: hidden;
+    }
+    .drawer-header {
+      padding: 18px 18px 13px;
+      border-bottom: 1px solid rgba(216, 205, 187, .82);
+      background: rgba(255, 253, 247, .72);
+    }
+    .eyebrow {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--cinnabar);
+      font-family: var(--font-mono);
+      font-size: 11px;
+      letter-spacing: .04em;
+      text-transform: uppercase;
+    }
+    .drawer h2 {
+      margin: 9px 0 0;
+      font-family: var(--font-serif);
+      font-size: 25px;
+      line-height: 1.16;
+      letter-spacing: 0;
+    }
+    .drawer-subtitle {
+      margin: 8px 0 0;
+      color: var(--muted);
+      line-height: 1.55;
+      font-size: 13px;
+    }
+    .drawer-body {
+      min-height: 0;
+      padding: 16px 18px;
+      overflow-y: auto;
+      display: grid;
+      align-content: start;
+      gap: 15px;
+    }
+    .meta-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+    }
+    .meta-box {
+      min-width: 0;
+      padding: 10px;
+      border: 1px solid rgba(216, 205, 187, .9);
+      border-radius: 10px;
+      background: rgba(248, 241, 228, .62);
+    }
+    .meta-box span {
+      display: block;
+      color: var(--muted);
+      font-family: var(--font-mono);
+      font-size: 10px;
+      letter-spacing: .04em;
+    }
+    .meta-box b {
+      display: block;
+      margin-top: 5px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-family: var(--font-serif);
+      font-size: 14px;
+    }
+    .drawer-section {
+      display: grid;
+      gap: 8px;
+    }
+    .drawer-section h3 {
+      margin: 0;
+      color: var(--ink);
+      font-family: var(--font-serif);
+      font-size: 15px;
+    }
+    .summary-card {
+      padding: 12px 13px;
+      border-left: 3px solid var(--cinnabar);
+      border-radius: 0 10px 10px 0;
+      background: rgba(248, 241, 228, .66);
+      color: var(--ink);
+      line-height: 1.68;
+      font-size: 13px;
+    }
+    .knowledge-card {
+      display: grid;
+      gap: 10px;
+      padding: 13px 14px;
+      border-radius: 10px;
+      border: 1px solid rgba(216, 205, 187, .88);
+      background: rgba(255, 253, 247, .7);
+      color: var(--ink);
+      line-height: 1.72;
+      font-size: 13px;
+    }
+    .knowledge-card p {
+      margin: 0;
+    }
+    .neighbor-section {
+      padding: 0;
+      border: 1px solid rgba(216, 205, 187, .88);
+      border-radius: 10px;
+      background: rgba(248, 241, 228, .48);
+      overflow: hidden;
+    }
+    .neighbor-section > summary {
+      min-height: 44px;
+      padding: 0 12px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      cursor: pointer;
+      list-style: none;
+      color: var(--ink);
+      font-family: var(--font-serif);
+      font-size: 15px;
+    }
+    .neighbor-section > summary::-webkit-details-marker {
+      display: none;
+    }
+    .neighbor-section > summary span {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      min-width: 0;
+    }
+    .neighbor-section > summary small {
+      color: var(--muted);
+      font-family: var(--font-ui);
+      font-size: 12px;
+      font-weight: 400;
+    }
+    .neighbor-section > summary::after {
+      content: "展开";
+      flex: 0 0 auto;
+      color: var(--cinnabar);
+      font-family: var(--font-ui);
+      font-size: 12px;
+      font-weight: 700;
+    }
+    .neighbor-section[open] > summary::after {
+      content: "收起";
+    }
+    .neighbor-section .neighbor-list {
+      padding: 0 12px 12px;
+    }
+    .neighbor-section[open] .neighbor-list {
+      max-height: 168px;
+      overflow-y: auto;
+      padding-right: 8px;
+      scrollbar-gutter: stable;
+    }
+    .neighbor-section[open] .neighbor-list::-webkit-scrollbar {
+      width: 8px;
+    }
+    .neighbor-section[open] .neighbor-list::-webkit-scrollbar-thumb {
+      border-radius: 999px;
+      background: rgba(111, 101, 89, .32);
+    }
+    .neighbor-card,
+    .note-card,
+    .start-card {
+      display: grid;
+      gap: 4px;
+      color: var(--ink);
+    }
+    .note-card {
+      border-style: dashed;
+      background: rgba(255, 253, 247, .62);
+      color: var(--muted);
+      font-size: 13px;
+      line-height: 1.55;
+    }
+    .drawer-actions {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 9px;
+      padding: 13px 18px 16px;
+      border-top: 1px solid rgba(216, 205, 187, .82);
+      background: rgba(255, 253, 247, .76);
+    }
+    .state-dock {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 7px;
+    }
+    .state-button {
+      min-width: 44px;
+      min-height: 44px;
+      padding: 0 12px;
+      font-size: 12px;
+    }
+    .state-button[aria-pressed="true"] {
+      border-color: rgba(139, 46, 36, .55);
+      color: var(--cinnabar);
+      background: rgba(255, 253, 247, .96);
+    }
+    .hidden-count {
+      display: none;
+      margin-top: 8px;
+      padding: 10px 12px;
+      border-radius: 10px;
+      border: 1px solid rgba(183, 121, 31, .48);
+      background: rgba(248, 232, 196, .55);
+      color: var(--ink);
+      font-size: 12px;
+      line-height: 1.5;
+    }
+    .hidden-count.is-visible {
+      display: block;
+    }
+    @keyframes drift {
+      from {
+        transform: translateX(-2%);
+      }
+      to {
+        transform: translateX(3%);
+      }
+    }
+    @keyframes spin {
+      to {
+        rotate: 360deg;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      *,
+      *::before,
+      *::after {
+        animation-duration: .001ms !important;
+        animation-iteration-count: 1 !important;
+        scroll-behavior: auto !important;
+        transition-duration: .001ms !important;
+      }
+    }
+    @media (max-width: 1180px) {
+      .app {
+        grid-template-columns: 238px minmax(460px, 1fr) 318px;
+        gap: 12px;
+        padding: 12px;
+      }
+      .status-strip .status-pill:nth-child(3) {
+        display: none;
+      }
+      .canvas-footer {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+      }
+      .insight {
+        grid-column: 1 / -1;
+      }
+    }
+    @media (max-width: 900px) {
+      body {
+        overflow: auto;
+      }
+      .app {
+        min-height: 100vh;
+        height: auto;
+        grid-template-columns: 1fr;
+        grid-template-rows: auto auto auto minmax(620px, 72vh) auto;
+        padding: 10px;
+      }
+      .mobile-atlas-preview {
+        display: block;
+      }
+      .topbar {
+        grid-template-columns: 1fr;
+      }
+      .status-strip {
+        justify-content: flex-start;
+      }
+      .sidebar {
+        max-height: none;
+        overflow: visible;
+      }
+      .drawer {
+        min-height: 560px;
+      }
+      .brand h1,
+      .brand p {
+        white-space: normal;
+      }
+      .canvas-footer {
+        grid-template-columns: 1fr;
+      }
+    }
+    @media (max-width: 620px) {
+      .brand {
+        align-items: flex-start;
+      }
+      .seal {
+        width: 38px;
+        height: 38px;
+      }
+      .canvas-toolbar,
+      .canvas-actions,
+      .drawer-actions {
+        display: grid;
+        grid-template-columns: 1fr;
+      }
+      .status-pill,
+      .chip {
+        min-height: 44px;
+      }
+      .state-dock,
+      .segmented {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      .state-dock {
+        display: grid;
+      }
+      .node {
+        max-width: 144px;
+        min-width: 44px;
+        padding: 7px 9px;
+      }
+      .node-name {
+        max-width: 116px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="app">
+    <header class="topbar" aria-label="图谱标题与状态">
+      <div class="brand">
+        <div class="seal" aria-hidden="true">
+          <svg viewBox="0 0 48 48" role="img">
+            <path d="M5 32c7-6 10-16 17-10 5-10 12-13 21 10" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M8 38c8-3 18-2 32 0" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" opacity=".76"></path>
+            <path d="M13 28c5 2 10 2 15 0" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" opacity=".52"></path>
+            <circle cx="35" cy="11" r="2.8" fill="currentColor"></circle>
+            <circle cx="40" cy="18" r="1.6" fill="currentColor" opacity=".8"></circle>
+          </svg>
+        </div>
+        <div>
+          <h1>llm-wiki 知识舆图</h1>
+          <p>国风知识库·数字山水图</p>
+        </div>
+      </div>
+      <div class="status-strip">
+        <span class="status-pill"><i class="status-dot"></i>已生成 128 个索引点</span>
+        <span class="status-pill">关系 246 条</span>
+        <span class="status-pill">最近更新 2026-04-27</span>
+        <button class="ghost-button github-button" type="button" aria-label="打开 GitHub 项目">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
+            <path d="M9 18c-4.51 2-5-2-7-2"></path>
+          </svg>
+          <span>GitHub</span>
+        </button>
+      </div>
+    </header>
+    <section class="mobile-atlas-preview" aria-label="移动端图谱预览">
+      <div class="preview-copy">
+        <strong>数字山水图谱</strong>
+        <span>128 点 · 246 关系</span>
+      </div>
+      <div class="preview-map" aria-hidden="true"></div>
+    </section>
+    <aside class="sidebar" aria-label="文献索引导航">
+      <section class="section">
+        <div class="section-title"><b>文献索引</b></div>
+        <div class="search-box">
+          <input id="search" type="search" autocomplete="off" placeholder="搜索节点、来源或主题">
+          <span aria-hidden="true">⌕</span>
+        </div>
+        <div id="no-results" class="hidden-count">没有匹配结果，清除筛选后可回到完整图谱。</div>
+      </section>
+      <section class="section">
+        <div class="section-title"><b>社区</b></div>
+        <div class="nav-list" id="community-list"></div>
+      </section>
+      <section class="section">
+        <div class="section-title"><b>聚焦</b></div>
+        <div class="segmented" aria-label="聚焦模式">
+          <button type="button" data-focus="all" aria-pressed="true">全图</button>
+          <button type="button" data-focus="core" aria-pressed="false">核心</button>
+          <button type="button" data-focus="source" aria-pressed="false">来源</button>
+        </div>
+      </section>
+      <section class="section">
+        <div class="section-title"><b>学习队列</b></div>
+        <div class="queue-card">
+          <div class="queue-metrics">
+            <div class="metric"><span>今日待读</span><b>5</b></div>
+            <div class="metric"><span>已批注</span><b>17</b></div>
+          </div>
+          <div class="queue-list">
+            <span class="chip">上下文工程</span>
+            <span class="chip">知识编译</span>
+            <span class="chip">来源置信度</span>
+          </div>
+        </div>
+      </section>
+      <section class="section">
+        <div class="section-title"><b>推荐起点</b></div>
+        <div class="start-list" id="start-list"></div>
+      </section>
+    </aside>
+    <section class="canvas-card" aria-label="知识图谱画布">
+      <div class="canvas-toolbar">
+        <div class="canvas-title">
+          <strong id="canvas-title">知识地图 · 全局视图</strong>
+          <span id="canvas-subtitle">社区地貌、关系路径与批注状态保持同步</span>
+        </div>
+        <div class="canvas-actions">
+          <button class="ghost-button" type="button" id="fit-view">回到全图</button>
+          <button class="ghost-button" type="button" id="toggle-dim">弱化未选中</button>
+          <div class="state-dock" aria-label="数据状态">
+            <button class="state-button" type="button" data-mode="normal" aria-pressed="true">正常</button>
+            <button class="state-button" type="button" data-mode="loading" aria-pressed="false">加载</button>
+            <button class="state-button" type="button" data-mode="empty" aria-pressed="false">空</button>
+            <button class="state-button" type="button" data-mode="error" aria-pressed="false">错误</button>
+          </div>
+        </div>
+      </div>
+      <div class="atlas" id="atlas" data-mode="normal">
+        <svg class="graph-svg" viewBox="0 0 1000 680" preserveAspectRatio="none" aria-hidden="true">
+          <defs>
+            <filter id="softGlow">
+              <feGaussianBlur stdDeviation="5" result="blur"></feGaussianBlur>
+              <feMerge>
+                <feMergeNode in="blur"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+              </feMerge>
+            </filter>
+          </defs>
+          <g id="edge-layer"></g>
+        </svg>
+        <div class="mist" aria-hidden="true"></div>
+        <div id="node-layer"></div>
+        <div class="loading-state" role="status" aria-live="polite">
+          <div class="spinner" aria-hidden="true"></div>
+          <p class="state-title">正在铺开知识地图</p>
+          <p class="state-copy">图谱数据已读取，正在整理社区、关系和标签。</p>
+        </div>
+        <div class="empty-state" role="status" aria-live="polite">
+          <p class="state-title">这座知识库还没有图谱</p>
+          <p class="state-copy">消化素材后会自动生成节点、来源和关系。</p>
+        </div>
+        <div class="error-state" role="alert">
+          <p class="state-title">图谱数据没有加载成功</p>
+          <p class="state-copy">请确认本地 graph-data.json 存在且格式完整。</p>
+        </div>
+      </div>
+      <footer class="canvas-footer" aria-label="图谱二级信息">
+        <div class="legend">
+          <div class="footer-label"><span>关系置信度</span><span>说明</span></div>
+          <div class="confidence-list">
+            <span class="confidence"><i></i>直接提取</span>
+            <span class="confidence"><i></i>推断关联</span>
+            <span class="confidence"><i></i>存在歧义</span>
+            <span class="confidence"><i></i>未核实</span>
+          </div>
+        </div>
+        <div class="mini-map">
+          <div class="footer-label"><span>小地图</span><span>MAP</span></div>
+          <svg viewBox="0 0 160 54" aria-hidden="true">
+            <path d="M8 40 C34 20 54 36 76 22 C98 8 118 24 150 12" fill="none" stroke="#cfc4b1" stroke-width="1.4"></path>
+            <circle cx="28" cy="34" r="3" fill="#315f72"></circle>
+            <circle cx="58" cy="27" r="3" fill="#8b2e24"></circle>
+            <circle cx="90" cy="21" r="3" fill="#4b7564"></circle>
+            <circle cx="124" cy="18" r="3" fill="#b7791f"></circle>
+            <rect x="22" y="12" width="76" height="32" rx="5" fill="none" stroke="#8b2e24" stroke-width="1.2"></rect>
+          </svg>
+        </div>
+        <div class="insight">
+          <div class="footer-label"><span>洞察</span><span>INSIGHT</span></div>
+          <strong id="insight-title">来源节点连接度偏高</strong>
+          <p id="insight-copy">建议从“知识编译”进入，可同时看到方法论、缓存与图谱生成的关系。</p>
+        </div>
+      </footer>
+    </section>
+    <aside class="drawer" aria-label="批注札记详情">
+      <header class="drawer-header">
+        <div class="eyebrow" id="drawer-kind"><span class="spark"></span>TOPIC · SELECTED</div>
+        <h2 id="drawer-title">知识编译</h2>
+        <p class="drawer-subtitle" id="drawer-subtitle">方法论 · EXTRACTED · wiki/topics/知识编译.md</p>
+      </header>
+      <div class="drawer-body">
+        <section class="drawer-section">
+          <h3>摘要</h3>
+          <div class="summary-card" id="drawer-summary">知识编译强调“整理一次，持续维护”。它连接素材消化、结构化页面、缓存、查询和图谱展示，是 llm-wiki 区别于临时问答的关键。</div>
+        </section>
+        <section class="drawer-section">
+          <h3>知识内容</h3>
+          <div class="knowledge-card" id="drawer-content">
+            <p>知识编译把素材、主题、实体和来源串成一张可维护的地图。它不是临时总结，而是让后续查询、图谱和复盘都能复用同一份整理结果。</p>
+            <p>在图谱中，这个节点连接素材消化、缓存、查询和图谱展示，适合作为理解 llm-wiki 工作方式的入口。</p>
+          </div>
+        </section>
+        <details class="drawer-section neighbor-section" id="neighbor-details">
+          <summary><span>相邻节点 <small id="drawer-neighbor-count">5 个</small></span></summary>
+          <div class="neighbor-list" id="neighbor-list"></div>
+        </details>
+        <section class="drawer-section">
+          <h3>札记</h3>
+          <div class="notes-list">
+            <div class="note-card">批注：适合放在 README 首屏，作为“不是一次性总结”的视觉证明。</div>
+            <div class="note-card">待看：对比“学习驾驶舱”和“图谱入口”的职责边界。</div>
+          </div>
+        </section>
+      </div>
+      <footer class="drawer-actions">
+        <button class="primary-button" type="button">加入学习队列</button>
+        <button class="ghost-button" type="button">查看来源</button>
+      </footer>
+    </aside>
+  </main>
+  <script>
+    const communities = [
+      { id: "all", label: "全部社区", meta: "128 个节点", count: "ALL", color: "#8b2e24" },
+      { id: "method", label: "方法论", meta: "知识编译、查询、沉淀", count: 36, color: "#315f72" },
+      { id: "runtime", label: "图谱运行时", meta: "模板、状态、交互", count: 42, color: "#4b7564" },
+      { id: "sources", label: "素材来源", meta: "网页、PDF、公众号、YouTube", count: 28, color: "#b7791f" },
+      { id: "quality", label: "质量检查", meta: "lint、缓存、隐私自查", count: 22, color: "#6f557f" }
+    ];
+    const nodes = [
+      {
+        id: "compile", label: "知识编译", type: "topic", community: "method", x: 50, y: 46, weight: 96,
+        source: "wiki/topics/知识编译.md", confidence: "EXTRACTED",
+        summary: "知识编译强调“整理一次，持续维护”。它连接素材消化、结构化页面、缓存、查询和图谱展示，是 llm-wiki 区别于临时问答的关键。"
+      },
+      {
+        id: "ingest", label: "素材消化", type: "topic", community: "method", x: 31, y: 35, weight: 86,
+        source: "SKILL.md", confidence: "EXTRACTED",
+        summary: "把链接、文件或粘贴内容转成结构化 wiki 页面，并保留来源、摘要、实体和主题关系。"
+      },
+      {
+        id: "query", label: "查询沉淀", type: "topic", community: "method", x: 68, y: 37, weight: 78,
+        source: "wiki/queries/", confidence: "INFERRED",
+        summary: "查询不是一次性回答，有价值的综合结论可以保存回知识库，让后续上下文继续生长。"
+      },
+      {
+        id: "graph", label: "交互式图谱", type: "entity", community: "runtime", x: 52, y: 66, weight: 91,
+        source: "templates/graph-styles/wash/", confidence: "EXTRACTED",
+        summary: "离线 HTML 图谱承载搜索、筛选、社区聚类、洞察、小地图和学习驾驶舱。"
+      },
+      {
+        id: "visible", label: "可见状态快照", type: "entity", community: "runtime", x: 72, y: 63, weight: 72,
+        source: "docs/solutions/best-practices/learning-cockpit-visible-state-reframe-2026-04-24.md", confidence: "EXTRACTED",
+        summary: "社区、聚焦、搜索和边过滤统一收敛到一份可见状态，避免各面板显示不一致。"
+      },
+      {
+        id: "cache", label: "智能缓存", type: "entity", community: "quality", x: 26, y: 64, weight: 68,
+        source: "docs/solutions/workflow-issues/cache-update-reliability-2026-04-16.md", confidence: "EXTRACTED",
+        summary: "写入即更新，避免素材重复整理，也让弱模型不容易漏掉缓存。"
+      },
+      {
+        id: "web", label: "网页文章", type: "source", community: "sources", x: 16, y: 24, weight: 54,
+        source: "raw/articles/", confidence: "EXTRACTED",
+        summary: "网页内容可通过可选提取器进入主线；失败时保留手动回退入口。"
+      },
+      {
+        id: "pdf", label: "PDF 与本地文件", type: "source", community: "sources", x: 18, y: 78, weight: 48,
+        source: "raw/pdfs/", confidence: "EXTRACTED",
+        summary: "本地文件属于核心主线，不依赖外挂，适合长期研究资料积累。"
+      },
+      {
+        id: "wechat", label: "微信公众号", type: "source", community: "sources", x: 82, y: 22, weight: 44,
+        source: "raw/wechat/", confidence: "AMBIGUOUS", unavailable: true,
+        summary: "公众号提取依赖可选环境，当前提取器不可用时应显示明确状态和手动粘贴入口。"
+      },
+      {
+        id: "lint", label: "健康检查", type: "entity", community: "quality", x: 84, y: 79, weight: 61,
+        source: "scripts/lint-wiki.sh", confidence: "INFERRED",
+        summary: "检测孤立页面、断链、索引一致性和潜在矛盾，帮助知识库保持可维护。"
+      }
+    ];
+    const edges = [
+      ["compile", "ingest", "extracted"],
+      ["compile", "query", "extracted"],
+      ["compile", "graph", "extracted"],
+      ["graph", "visible", "extracted"],
+      ["ingest", "cache", "inferred"],
+      ["ingest", "web", "extracted"],
+      ["ingest", "pdf", "extracted"],
+      ["ingest", "wechat", "ambiguous"],
+      ["query", "lint", "inferred"],
+      ["visible", "lint", "unverified"],
+      ["cache", "graph", "inferred"],
+      ["web", "compile", "ambiguous"]
+    ];
+    const communityList = document.getElementById("community-list");
+    const startList = document.getElementById("start-list");
+    const nodeLayer = document.getElementById("node-layer");
+    const edgeLayer = document.getElementById("edge-layer");
+    const search = document.getElementById("search");
+    const noResults = document.getElementById("no-results");
+    const atlas = document.getElementById("atlas");
+    const canvasTitle = document.getElementById("canvas-title");
+    const canvasSubtitle = document.getElementById("canvas-subtitle");
+    const insightTitle = document.getElementById("insight-title");
+    const insightCopy = document.getElementById("insight-copy");
+    let selectedNodeId = "compile";
+    let activeCommunity = "all";
+    let focusMode = "all";
+    let dimUnselected = false;
+    const nodeById = new Map(nodes.map(node => [node.id, node]));
+    function nodeKind(node) {
+      if (node.type === "topic") return "TOPIC";
+      if (node.type === "source") return "SOURCE";
+      return "ENTITY";
+    }
+    function confidenceLabel(confidence) {
+      const labels = {
+        EXTRACTED: "直接提取",
+        INFERRED: "推断关联",
+        AMBIGUOUS: "存在歧义",
+        UNVERIFIED: "未核实"
+      };
+      return labels[confidence] || confidence;
+    }
+    function communityLabel(id) {
+      return (communities.find(item => item.id === id) || {}).label || "未分组";
+    }
+    function buildCommunities() {
+      communityList.innerHTML = "";
+      communities.forEach(item => {
+        const button = document.createElement("button");
+        button.className = "nav-item";
+        button.type = "button";
+        button.dataset.community = item.id;
+        button.setAttribute("aria-pressed", item.id === activeCommunity ? "true" : "false");
+        button.innerHTML = `
+          <i class="swatch" style="background:${item.color}"></i>
+          <span class="nav-copy"><strong>${item.label}</strong><span>${item.meta}</span></span>
+          <span class="count">${item.count}</span>
+        `;
+        button.addEventListener("click", () => {
+          activeCommunity = item.id;
+          applyFilters();
+        });
+        communityList.appendChild(button);
+      });
+    }
+    function buildStarts() {
+      startList.innerHTML = "";
+      ["compile", "graph", "visible"].forEach(id => {
+        const node = nodeById.get(id);
+        const button = document.createElement("button");
+        button.className = "start-card";
+        button.type = "button";
+        button.innerHTML = `<span class="card-copy"><strong>${node.label}</strong><span>${communityLabel(node.community)} · ${confidenceLabel(node.confidence)}</span></span>`;
+        button.addEventListener("click", () => selectNode(id));
+        startList.appendChild(button);
+      });
+    }
+    function makePath(a, b) {
+      const x1 = a.x * 10;
+      const y1 = a.y * 6.8;
+      const x2 = b.x * 10;
+      const y2 = b.y * 6.8;
+      const mx = (x1 + x2) / 2;
+      const my = (y1 + y2) / 2;
+      const curve = Math.max(-70, Math.min(70, (a.y - b.y) * 1.7));
+      return `M ${x1} ${y1} Q ${mx + curve} ${my - 22} ${x2} ${y2}`;
+    }
+    function buildGraph() {
+      edgeLayer.innerHTML = "";
+      edges.forEach(([from, to, type], index) => {
+        const a = nodeById.get(from);
+        const b = nodeById.get(to);
+        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path.setAttribute("d", makePath(a, b));
+        path.setAttribute("class", `edge ${type}`);
+        path.dataset.from = from;
+        path.dataset.to = to;
+        path.dataset.edgeId = `edge-${index}`;
+        edgeLayer.appendChild(path);
+      });
+      nodeLayer.innerHTML = "";
+      nodes.forEach(node => {
+        const button = document.createElement("button");
+        button.className = `node${node.unavailable ? " is-disabled" : ""}`;
+        button.type = "button";
+        button.dataset.id = node.id;
+        button.dataset.type = node.type;
+        button.dataset.community = node.community;
+        button.style.left = `${node.x}%`;
+        button.style.top = `${node.y}%`;
+        button.setAttribute("aria-pressed", node.id === selectedNodeId ? "true" : "false");
+        button.innerHTML = `
+          <span class="node-kind">${nodeKind(node)}</span>
+          <span class="node-name">${node.label}</span>
+          <span class="node-meta"><i class="spark"></i>${node.unavailable ? "来源暂不可用" : node.weight}</span>
+        `;
+        button.addEventListener("click", () => selectNode(node.id));
+        button.addEventListener("mouseenter", () => highlightNeighborhood(node.id));
+        button.addEventListener("mouseleave", () => applyFilters());
+        nodeLayer.appendChild(button);
+      });
+    }
+    function connectedIds(id) {
+      const ids = new Set([id]);
+      edges.forEach(([from, to]) => {
+        if (from === id) ids.add(to);
+        if (to === id) ids.add(from);
+      });
+      return ids;
+    }
+    function visibleNodes() {
+      const q = search.value.trim().toLowerCase();
+      return nodes.filter(node => {
+        const communityOk = activeCommunity === "all" || node.community === activeCommunity;
+        const focusOk =
+          focusMode === "all" ||
+          (focusMode === "core" && node.weight >= 68) ||
+          (focusMode === "source" && node.type === "source");
+        const searchOk = !q || `${node.label} ${node.source} ${node.summary}`.toLowerCase().includes(q);
+        return communityOk && focusOk && searchOk;
+      });
+    }
+    function applyFilters() {
+      buildCommunities();
+      const visible = visibleNodes();
+      const visibleIds = new Set(visible.map(node => node.id));
+      const hasNoResults = visible.length === 0 && atlas.dataset.mode === "normal";
+      document.querySelectorAll(".node").forEach(el => {
+        const isVisible = visibleIds.has(el.dataset.id);
+        el.classList.toggle("is-hidden", !isVisible);
+        const shouldDim = dimUnselected && selectedNodeId && el.dataset.id !== selectedNodeId && !connectedIds(selectedNodeId).has(el.dataset.id);
+        el.classList.toggle("is-dim", isVisible && shouldDim);
+        el.setAttribute("aria-pressed", el.dataset.id === selectedNodeId ? "true" : "false");
+      });
+      document.querySelectorAll(".edge").forEach(edge => {
+        const edgeVisible = visibleIds.has(edge.dataset.from) && visibleIds.has(edge.dataset.to);
+        edge.classList.toggle("is-dim", !edgeVisible || (dimUnselected && selectedNodeId && ![edge.dataset.from, edge.dataset.to].includes(selectedNodeId)));
+      });
+      noResults.classList.toggle("is-visible", hasNoResults);
+      const communityName = activeCommunity === "all" ? "全局视图" : communityLabel(activeCommunity);
+      canvasTitle.textContent = `知识地图 · ${communityName}`;
+      canvasSubtitle.textContent = hasNoResults ? "当前筛选没有匹配节点" : `${visible.length} 个节点在当前范围内可见`;
+      insightTitle.textContent = hasNoResults ? "没有匹配结果" : "来源节点连接度偏高";
+      insightCopy.textContent = hasNoResults ? "可以清除搜索词或切回全图查看完整关系。" : "建议从“知识编译”进入，可同时看到方法论、缓存与图谱生成的关系。";
+    }
+    function highlightNeighborhood(id) {
+      if (atlas.dataset.mode !== "normal") return;
+      const ids = connectedIds(id);
+      document.querySelectorAll(".node").forEach(el => {
+        el.classList.toggle("is-dim", !ids.has(el.dataset.id));
+      });
+      document.querySelectorAll(".edge").forEach(edge => {
+        edge.classList.toggle("is-dim", edge.dataset.from !== id && edge.dataset.to !== id);
+      });
+    }
+    function renderKnowledgeContent(node, neighbors) {
+      const content = document.getElementById("drawer-content");
+      const paragraphs = [
+        `${node.label}属于「${communityLabel(node.community)}」脉络。${node.summary}`,
+        neighbors.length
+          ? `它当前连接到 ${neighbors.map(item => `「${item.label}」`).join("、")}。这些关系说明它在图谱中既是阅读入口，也是后续追踪来源和主题的线索。`
+          : "这个节点暂时没有相邻节点，适合作为独立资料页继续补充来源和批注。",
+        node.type === "source"
+          ? "作为来源节点，它更适合承载出处、摘录和可靠性判断；相关主题会在图谱中向外展开。"
+          : "作为主题或实体节点，它更适合承载概念解释、关联判断和学习笔记；来源证据会在相邻节点中展开。"
+      ];
+      content.innerHTML = "";
+      paragraphs.forEach(text => {
+        const p = document.createElement("p");
+        p.textContent = text;
+        content.appendChild(p);
+      });
+    }
+    function selectNode(id) {
+      selectedNodeId = id;
+      const node = nodeById.get(id);
+      const neighbors = [...connectedIds(id)].filter(item => item !== id).map(item => nodeById.get(item));
+      document.getElementById("drawer-kind").innerHTML = `<span class="spark"></span>${nodeKind(node)} · ${node.unavailable ? "UNAVAILABLE" : "SELECTED"}`;
+      document.getElementById("drawer-title").textContent = node.label;
+      document.getElementById("drawer-subtitle").textContent = `${communityLabel(node.community)} · ${confidenceLabel(node.confidence)} · ${node.source}`;
+      document.getElementById("drawer-neighbor-count").textContent = `${neighbors.length} 个`;
+      document.getElementById("drawer-summary").textContent = node.summary;
+      renderKnowledgeContent(node, neighbors);
+      const list = document.getElementById("neighbor-list");
+      list.innerHTML = "";
+      neighbors.forEach(neighbor => {
+        const button = document.createElement("button");
+        button.className = "neighbor-card";
+        button.type = "button";
+        button.innerHTML = `<span class="card-copy"><strong>${neighbor.label}</strong><span>${nodeKind(neighbor)} · ${communityLabel(neighbor.community)}</span></span>`;
+        button.addEventListener("click", () => selectNode(neighbor.id));
+        list.appendChild(button);
+      });
+      applyFilters();
+    }
+    document.querySelectorAll("[data-focus]").forEach(button => {
+      button.addEventListener("click", () => {
+        focusMode = button.dataset.focus;
+        document.querySelectorAll("[data-focus]").forEach(item => item.setAttribute("aria-pressed", item === button ? "true" : "false"));
+        applyFilters();
+      });
+    });
+    document.querySelectorAll("[data-mode]").forEach(button => {
+      button.addEventListener("click", () => {
+        const mode = button.dataset.mode;
+        atlas.dataset.mode = mode;
+        document.querySelectorAll("[data-mode]").forEach(item => item.setAttribute("aria-pressed", item === button ? "true" : "false"));
+        applyFilters();
+      });
+    });
+    document.getElementById("toggle-dim").addEventListener("click", () => {
+      dimUnselected = !dimUnselected;
+      document.getElementById("toggle-dim").textContent = dimUnselected ? "显示全部层级" : "弱化未选中";
+      applyFilters();
+    });
+    document.getElementById("fit-view").addEventListener("click", () => {
+      activeCommunity = "all";
+      focusMode = "all";
+      search.value = "";
+      document.querySelectorAll("[data-focus]").forEach(item => item.setAttribute("aria-pressed", item.dataset.focus === "all" ? "true" : "false"));
+      applyFilters();
+      selectNode("compile");
+    });
+    search.addEventListener("input", applyFilters);
+    buildCommunities();
+    buildStarts();
+    buildGraph();
+    selectNode(selectedNodeId);
+  </script>
+</body>
+</html>