Spaces:

Mvali77
/

Aurelius

Running

File size: 40,632 Bytes

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Aurelius</title>
  <link rel="icon" type="image/png"
    href="data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAH0AfQDASIAAhEBAxEB/8QAHQABAAICAwEBAAAAAAAAAAAAAAYHBAgBAwUCCf/EAEsQAAIBAwIEAwQGBwQHBwUBAAABAgMEBQYRByExQRJRYQgTcYEUIjKRobEVI0JSksHTM1Vi8SRjcnWisvAXNEZTgsLRFjVDs9Lh/8QAGwEBAAIDAQEAAAAAAAAAAAAAAAEDAgQFBgf/xAAuEQEAAgIBAgMHBQEAAwAAAAAAAQIDEQQFMRMhQQYSUXGBobEyM1Jh0SIVkfD/2gAMAwEAAhEDEQA/ANMgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALS4Q8HsrrSMMpkZzx2E35Vdv1tfb/AMtNbbf4ny9GVZs1MNJvknUQuwYMnIvGPHG5lVoN49L8N9FadtoUrHT1jUqRW30i5pRq1ZPz8Uk9vlsj2rrT+BvKLo3eExtxSa2cKtrCa2+aOHb2j48W1WszD0FPZfkzXc2iJaBA2q4i8BNPZehWu9MJYjIbNxpbv6NN+TXN…[truncated base64 icon]">
  <!-- d3 powers the 2D canvas graph (force layout + zoom) in graph2d.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Outfit:wght@300;400;500;600;700&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <!-- ═══════════════════ LOADING SCREEN ═══════════════════ -->
  <div id="loading-screen">
    <div id="loading-logo">Aurelius</div>
    <div id="loading-spinner"></div>
    <div id="loading-hint">Just a bit longer; the algorithm is waking up.</div>
  </div>

  <!-- ═══════════════════ HERO LANDING ═══════════════════ -->
  <div id="hero">
    <div id="hero-watermark">
      <svg class="aurelius-logo-hero" viewBox="0 0 200 200" aria-hidden="true">
        <defs>
          <radialGradient id="wm-glow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stop-color="rgba(201,138,46,0.10)" />
            <stop offset="100%" stop-color="rgba(201,138,46,0)" />
          </radialGradient>
        </defs>
        <circle cx="100" cy="100" r="90" fill="url(#wm-glow)" />
        <g class="wm-edges">
          <line x1="100" y1="28" x2="158" y2="52" />
          <line x1="158" y1="52" x2="172" y2="108" />
          <line x1="172" y1="108" x2="142" y2="158" />
          <line x1="142" y1="158" x2="100" y2="176" />
          <line x1="100" y1="176" x2="58" y2="158" />
          <line x1="58" y1="158" x2="28" y2="108" />
          <line x1="28" y1="108" x2="42" y2="52" />
          <line x1="42" y1="52" x2="100" y2="28" />
          <line x1="100" y1="28" x2="100" y2="100" />
          <line x1="158" y1="52" x2="100" y2="100" />
          <line x1="172" y1="108" x2="100" y2="100" />
          <line x1="58" y1="158" x2="100" y2="100" />
          <line x1="42" y1="52" x2="100" y2="100" />
          <line x1="28" y1="108" x2="58" y2="158" />
          <line x1="42" y1="52" x2="158" y2="52" />
          <line x1="142" y1="158" x2="58" y2="158" />
          <line x1="100" y1="28" x2="142" y2="158" />
          <line x1="42" y1="52" x2="172" y2="108" />
        </g>
        <polyline class="wm-path-trace" points="42,52 100,100 158,52 172,108 142,158" />
        <polyline class="wm-path-trace wm-trace-2" points="100,28 100,100 58,158 100,176" />
        <g class="wm-nodes">
          <circle cx="100" cy="28" r="4.5" />
          <circle cx="158" cy="52" r="4.5" />
          <circle cx="172" cy="108" r="4.5" />
          <circle cx="142" cy="158" r="4.5" />
          <circle cx="100" cy="176" r="4.5" />
          <circle cx="58" cy="158" r="4.5" />
          <circle cx="28" cy="108" r="4.5" />
          <circle cx="42" cy="52" r="4.5" />
        </g>
        <circle class="wm-hub" cx="100" cy="100" r="6.5" />
        <circle class="wm-particle wm-p1" r="1.5" />
        <circle class="wm-particle wm-p2" r="1.2" />
        <circle class="wm-particle wm-p3" r="1.8" />
        <circle class="wm-particle wm-p4" r="1" />
      </svg>
    </div>
    <div id="hero-bg-mask"></div>
    <button id="hero-about-btn" class="hero-reveal" onclick="openAboutModal()">About</button>
    <div id="hero-title" style="font-family: Cinzel">Aurelius</div>
    <div id="hero-tagline" class="hero-reveal">Navigate the Knowledge Graph</div>
    <div id="hero-rest" class="hero-reveal">
      <div id="hero-sub">A research engine for connected knowledge. Explore a company, a paper's citations,
        or the hidden path between any two ideas<br>across Wikipedia, research papers, finance, and biology
        — every connection backed by real evidence.</div>

      <div id="hero-source-row">
        <span class="hero-source-label">Explore</span>
        <select id="hero-source" class="source-picker" onchange="onSourceChange(this.value)">
          <option value="wikipedia">Wikipedia</option>
        </select>
      </div>

      <!-- Per-source example pairs — one click loads and runs them, so a
           first-time visitor never faces an empty box. Populated by app.js. -->
      <div id="hero-examples" class="hero-reveal"></div>

      <div id="hero-inputs">
        <div class="hero-field">
          <label id="lbl-start" for="hero-inp-start">From</label>
          <input id="hero-inp-start" class="hero-input" type="text" autocomplete="on"
            placeholder="e.g. Nagpur" autocomplete="off" oninput="heroInputChanged()" onkeydown="heroKeyDown(event)" />
          <div id="ac-dropdown-start" class="ac-dropdown"></div>
        </div>

        <div id="hero-arrow">→</div>

        <div class="hero-field">
          <label id="lbl-end" for="hero-inp-end">To</label>
          <input id="hero-inp-end" class="hero-input" type="text" autocomplete="off" placeholder="e.g. Mars"
            oninput="heroInputChanged()" onkeydown="heroKeyDown(event)" />
          <div id="ac-dropdown-end" class="ac-dropdown"></div>
        </div>
      </div>

      <button id="hero-btn" onclick="startSearch()">Find Path</button>
      <div id="hero-hint">Press Enter to search</div>

      <button id="hero-random-btn" onclick="useRandomPair()" title="Pick two random topics and find a path">
        Random
      </button>
    </div>
  </div>

  <!-- ═══════════════════ TOP BAR (post-search) ═══════════════════ -->
  <div id="topbar">
    <h1 id="topbar-logo" onclick="logoClick()" title="Return to home">
      <svg class="topbar-logo-img aurelius-logo" viewBox="0 0 100 100" aria-hidden="true">
        <g class="alogo-edges" opacity="0.5">
          <line x1="50" y1="14" x2="79" y2="26" />
          <line x1="79" y1="26" x2="86" y2="54" />
          <line x1="86" y1="54" x2="71" y2="79" />
          <line x1="71" y1="79" x2="50" y2="88" />
          <line x1="50" y1="88" x2="29" y2="79" />
          <line x1="29" y1="79" x2="14" y2="54" />
          <line x1="14" y1="54" x2="21" y2="26" />
          <line x1="21" y1="26" x2="50" y2="14" />
          <line x1="50" y1="14" x2="50" y2="50" />
          <line x1="79" y1="26" x2="50" y2="50" />
          <line x1="21" y1="26" x2="50" y2="50" />
          <line x1="86" y1="54" x2="50" y2="50" />
          <line x1="29" y1="79" x2="50" y2="50" />
        </g>
        <polyline class="alogo-trace" points="21,26 50,50 79,26 86,54 71,79" />
        <g class="alogo-nodes">
          <circle cx="50" cy="14" r="5" />
          <circle cx="79" cy="26" r="5" />
          <circle cx="86" cy="54" r="5" />
          <circle cx="71" cy="79" r="5" />
          <circle cx="50" cy="88" r="5" />
          <circle cx="29" cy="79" r="5" />
          <circle cx="14" cy="54" r="5" />
          <circle cx="21" cy="26" r="5" />
        </g>
        <circle class="alogo-hub" cx="50" cy="50" r="7" />
      </svg>
      Aurelius
    </h1>
    <div class="input-wrap">
      <span>FROM</span>
      <input id="inp-start" type="text" placeholder="Topic, ticker, or entity" />
    </div>
    <button id="btn-swap" onclick="swapInputs()" title="Swap start and end">⇅</button>
    <div class="input-wrap">
      <span>TO</span>
      <input id="inp-end" type="text" placeholder="Topic, ticker, or entity" />
    </div>
    <button id="btn-search" onclick="startSearch()">Find Path</button>
    <button id="btn-reset" onclick="resetAll()">Reset</button>
    <button id="btn-about" onclick="openAboutModal()">About</button>
    <span id="status-bar">Ready.</span>
  </div>

  <!-- Mobile-only: collapses #topbar above to keep the search-controls
       chrome out of the way by default, so a phone screen opens on the
       live graph instead of a cluttered stack. Hidden entirely on
       desktop/tablet (styles.css), where the topbar is always visible. -->
  <div id="mobile-topbar-handle" class="mobile-handle" onclick="toggleMobileTopbar()">
    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="11" height="11"><polyline points="4 6 8 10 12 6"/></svg>
    <span>Search</span>
  </div>

  <!-- ═══ STATS BAR (pause/export only — timer shown on completion) ═══ -->
  <div id="stats-bar">
    <div id="sv-steps-live" class="sstat">
      <span class="sstat-val" id="sv-steps-count">0</span> explored
    </div>
    <div class="stats-spacer"></div>
    <button id="btn-export" onclick="exportPath()" title="Export path [E]">↓ Export</button>
    <button id="btn-pause-bar" onclick="togglePause()" title="Pause/Resume [Space]">⏸ Pause</button>
  </div>

  <!-- ═══════════════════ MAIN CONTENT ═══════════════════ -->
  <div id="main">
    <!-- Graph -->
    <div id="canvas-wrap">
      <div id="cosmos"></div>
      <div id="graph-canvas"></div>

      <!-- Explorer controls: view filters + camera fit. -->
      <div id="graph-controls">
        <button class="gc-btn active" data-filter="all" onclick="setGraphFilter('all')"
          title="Show every node the search touched">All</button>
        <button class="gc-btn" data-filter="explored" onclick="setGraphFilter('explored')"
          title="Hide the unexpanded candidate cloud">Explored</button>
        <button class="gc-btn" data-filter="path" onclick="setGraphFilter('path')"
          title="Only the path and endpoints">Path</button>
        <span class="gc-sep"></span>
        <button class="gc-btn" onclick="fitGraphView()"
          title="Frame the whole graph and resume auto-follow">Fit view</button>
        <!-- Relationship lens: dedicated explorer views over typed edges
             (ownership, supply chain, competition, …). Populated and shown
             by app.js only for sources with typed relationships. -->
        <select id="graph-lens" class="gc-select" onchange="setGraphLens(this.value)"
          title="Show only one family of relationships"></select>
        <!-- Overlays: fold live news + Reddit discussion onto the focused
             company. Shown by app.js only on the finance source. -->
        <button id="gc-overlay-news" class="gc-btn gc-toggle" onclick="toggleOverlay('news')"
          title="Show news affecting the focused company">News</button>
        <button id="gc-overlay-reddit" class="gc-btn gc-toggle" onclick="toggleOverlay('reddit')"
          title="Show Reddit discussion about the focused company">Discussion</button>
      </div>

      <!-- Compare panel — the relationship explorer: how are two entities
           connected, how strongly, and (finance) how do their prices move
           together. Opened by the Compare FAB. -->
      <div id="compare-panel">
        <div class="cmp-head">
          <span>Compare &amp; explain</span>
          <button class="cmp-close" onclick="toggleCompare(false)" aria-label="Close">
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="3" x2="13" y2="13"/><line x1="13" y1="3" x2="3" y2="13"/></svg>
          </button>
        </div>
        <div class="cmp-intro">See how any two things connect: the strength of the link, the chain of
          real relationships behind it, and how their prices move together.</div>
        <div class="cmp-inputs">
          <input id="cmp-a" type="text" placeholder="First (e.g. NVDA)" autocomplete="off" />
          <span class="cmp-vs">vs</span>
          <input id="cmp-b" type="text" placeholder="Second (e.g. Ford)" autocomplete="off" />
          <button id="cmp-run" onclick="runCompare()">Compare</button>
        </div>
        <div id="compare-results"></div>
      </div>
      <button id="compare-fab" onclick="toggleCompare(true)" title="Compare two entities">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
          <path d="M4 7h7M4 7l2-2M4 7l2 2"/><path d="M20 17h-7M20 17l-2-2M20 17l-2 2"/>
        </svg>
      </button>

      <!-- Overlay drawer — headlines / discussion + sentiment for the node
           the user last focused. Slides up from the bottom of the graph. -->
      <div id="overlay-drawer">
        <div class="ovl-head">
          <span id="ovl-title">Coverage</span>
          <span id="ovl-sentiment" class="ovl-sentiment"></span>
          <button class="ovl-close" onclick="closeOverlay()" aria-label="Close">
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="3" x2="13" y2="13"/><line x1="13" y1="3" x2="3" y2="13"/></svg>
          </button>
        </div>
        <div id="overlay-body"></div>
      </div>

      <div id="tooltip">
        <div class="tt-title" id="tt-title"></div>
        <div class="tt-scores" id="tt-scores"></div>
      </div>

      <!-- Discover panel: hidden-connection candidates for a node -->
      <div id="discover-panel">
        <div class="discover-panel-head">
          <span>Discover hidden connections</span>
          <button id="discover-close" onclick="toggleDiscover(false)" aria-label="Close">
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="3" x2="13" y2="13"/><line x1="13" y1="3" x2="3" y2="13"/></svg>
          </button>
        </div>
        <div class="discover-explainer">
          <strong>What is a hidden connection?</strong> A relationship that a
          normal search can't show you because no direct link exists. Aurelius
          walks everything one node touches, then everything <em>those</em>
          touch, and keeps candidates with strong indirect evidence: many
          shared neighbours, semantic similarity, co-movement, shared
          dependencies, or common intermediaries. Each result explains why it
          surfaced before you explore it.
        </div>
        <div class="discover-input-row">
          <input id="discover-input" type="text" placeholder="Any node in this source…" autocomplete="off" />
          <button id="discover-run" onclick="runDiscover(document.getElementById('discover-input').value)">Find</button>
        </div>
        <div id="discover-results"></div>
      </div>
      <button id="discover-fab" onclick="toggleDiscover(true)" title="Discover hidden connections">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="11" cy="11" r="7"/><line x1="16" y1="16" x2="21" y2="21"/><path d="M11 8v6M8 11h6"/>
        </svg>
      </button>

      <!-- Company Profile panel — the primary finance surface. A dossier
           for one company: price, key facts, peers, supply chain,
           correlations and ownership, with the graph as a secondary
           explorer. Shown only on the finance source. -->
      <div id="profile-panel" aria-hidden="true">
        <div class="prof-head">
          <div class="prof-input-row">
            <svg class="prof-search-ic" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><circle cx="7" cy="7" r="5"/><line x1="11" y1="11" x2="15" y2="15"/></svg>
            <input id="profile-input" type="text" placeholder="Research a company — ticker or name" autocomplete="off"
              onkeydown="if(event.key==='Enter')openProfile(this.value)" />
            <button id="profile-run" onclick="openProfile(document.getElementById('profile-input').value)">Go</button>
          </div>
          <button class="prof-close" onclick="toggleProfile(false)" aria-label="Close">
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="3" x2="13" y2="13"/><line x1="13" y1="3" x2="3" y2="13"/></svg>
          </button>
        </div>
        <div id="profile-body">
          <div class="prof-empty">
            <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
              <path d="M6 40V22l8-4v22M18 40V14l8-4v30M30 40V20l8-4v24M4 40h40"/>
            </svg>
            <p>Search any company to see its price, peers, supply chain, correlations, ownership and the news moving it — all in one place.</p>
            <div class="prof-empty-chips" id="profile-empty-chips"></div>
          </div>
        </div>
      </div>
      <button id="profile-fab" onclick="toggleProfile(true)" title="Research a company">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
          <path d="M4 20V11l5-3v12M13 20V6l5-3v17M3 20h18"/>
        </svg>
        <span>Research</span>
      </button>

      <!-- Citation Explorer panel — the primary research-papers surface.
           A paper's dossier: metadata, the works it cites and the works
           citing it, with a "build citation graph" hand-off. Shown only on
           the research (OpenAlex) source. -->
      <div id="paper-panel" aria-hidden="true">
        <div class="prof-head">
          <div class="prof-input-row">
            <svg class="prof-search-ic" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><circle cx="7" cy="7" r="5"/><line x1="11" y1="11" x2="15" y2="15"/></svg>
            <input id="paper-input" type="text" placeholder="Paper title, DOI, or arXiv id" autocomplete="off"
              onkeydown="if(event.key==='Enter')openPaper(this.value)" />
            <button id="paper-run" onclick="openPaper(document.getElementById('paper-input').value)">Go</button>
          </div>
          <button class="prof-close" onclick="togglePaper(false)" aria-label="Close">
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="3" x2="13" y2="13"/><line x1="13" y1="3" x2="3" y2="13"/></svg>
          </button>
        </div>
        <div id="paper-body">
          <div class="prof-empty">
            <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
              <path d="M14 6h16l6 6v30H14z"/><path d="M30 6v6h6"/><line x1="19" y1="22" x2="31" y2="22"/><line x1="19" y1="28" x2="31" y2="28"/><line x1="19" y1="34" x2="26" y2="34"/>
            </svg>
            <p>Give it a paper — by title, DOI, or arXiv id — to see what it cites, what cites it, and build an interactive citation graph you can expand.</p>
            <div class="prof-empty-chips" id="paper-empty-chips"></div>
            <label class="paper-drop" id="paper-drop">
              <input type="file" accept="application/pdf" onchange="uploadPaperPdf(this.files)" hidden />
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16V4M12 4l-4 4M12 4l4 4"/><path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3"/></svg>
              <span>or drop / choose a PDF</span>
            </label>
          </div>
        </div>
      </div>
      <button id="paper-fab" onclick="togglePaper(true)" title="Explore a paper's citations">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
          <path d="M6 3h9l4 4v14H6z"/><path d="M15 3v4h4"/><line x1="9" y1="12" x2="16" y2="12"/><line x1="9" y1="16" x2="14" y2="16"/>
        </svg>
        <span>Citations</span>
      </button>
    </div>

    <!-- Mobile-only: toggles the panel below open/closed. Lives OUTSIDE
         #panel (not inside it) so it stays visible and tappable even while
         #panel itself is collapsed to zero height — see styles.css. Hidden
         entirely on desktop/tablet, where the panel is always visible. -->
    <div id="mobile-panel-handle" class="mobile-handle" onclick="toggleMobilePanel()">
      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="11" height="11"><polyline points="4 6 8 10 12 6"/></svg>
      <span>Path &amp; Details</span>
    </div>

    <!-- Panel -->
    <div id="panel">
      <div id="panel-tabs">
        <div class="tab active" onclick="switchTab('path')">Path</div>
        <div class="tab" onclick="switchTab('scores')">Scores</div>
        <div class="tab" onclick="switchTab('log')">Log</div>
        <div class="tab" onclick="switchTab('legend')">Key</div>
      </div>
      <div id="tab-path" class="tab-content active">
        <div id="path-display">
          <p style="font-size:13px;color:var(--text2)">Path will appear here as Aurelius explores.</p>
        </div>
      </div>
      <div id="tab-scores" class="tab-content">
        <div id="scores-list"></div>
      </div>
      <div id="tab-log" class="tab-content">
        <div id="log"></div>
      </div>
      <div id="tab-legend" class="tab-content">
        <div style="display:flex;flex-direction:column;gap:12px;margin-top:4px">
          <div class="legend-row">
            <div class="legend-dot" style="background:var(--amber)"></div>Current centre (being expanded)
          </div>
          <div class="legend-row">
            <div class="legend-dot" style="background:var(--accent)"></div>Open, queued to explore
          </div>
          <div class="legend-row">
            <div class="legend-dot" style="background:#374151;border:1px solid #555"></div>Closed, already explored
          </div>
          <div class="legend-row">
            <div class="legend-dot" style="background:var(--green)"></div>Target article
          </div>
          <div class="legend-row">
            <div class="legend-dot" style="background:var(--node-path)"></div>On current best path
          </div>
          <hr style="border-color:var(--border)" />
          <div style="font-size:13px;color:var(--text2);line-height:1.8">
            <b style="color:var(--text)">f(n)</b> = total estimated cost<br>
            <b style="color:var(--text)">g(n)</b> = hops from start<br>
            <b style="color:var(--text)">h(n)</b> = semantic distance to the target<br>
            <br>Aurelius always expands the node with <b style="color:var(--accent2)">lowest f(n)</b> next,
            and clicking any node after a search expands its real neighbours.
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Path banner -->
  <div id="path-banner"></div>

  <!-- Centered Success Modal -->
  <div id="success-modal" class="modal-backdrop" onclick="closeSuccessModal(event)">
    <div class="modal-card">
      <button class="modal-corner-close" onclick="closeSuccessModal()" aria-label="Close">
        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="3" x2="13" y2="13"/><line x1="13" y1="3" x2="3" y2="13"/></svg>
      </button>
      <svg class="modal-success-icon" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round">
        <circle cx="6" cy="26" r="3" />
        <circle cx="26" cy="6" r="3" />
        <path d="M8.4 24 C8.4 16 12 16 16 16 C20 16 23.6 16 23.6 8" />
      </svg>
      <h2 class="modal-title">Path Discovered!</h2>
      <div class="modal-stat-row">
        <div class="modal-stat">
          <span class="modal-stat-val" id="modal-hops">—</span>
          <span class="modal-stat-lbl">Hops</span>
        </div>
        <div class="modal-stat">
          <span class="modal-stat-val" id="modal-steps">—</span>
          <span class="modal-stat-lbl">Steps</span>
        </div>
        <div class="modal-stat">
          <span class="modal-stat-val" id="modal-elapsed">—</span>
          <span class="modal-stat-lbl">Time</span>
        </div>
      </div>
      <div id="modal-path-container" class="modal-path"></div>
      <!-- Optional AI path explanation (lazy; hidden when no key). -->
      <div class="ai-block" id="modal-ai"></div>
      <p class="modal-disclaimer" id="modal-disclaimer">
        Every link above is real, but the wording shown on a page isn't always
        the link's title; for example, a page may display "iterative" while the link
        actually points to "Iteration", or show "AI" linking to
        "Artificial intelligence". Wikipedia links can be piped like that, so
        the visible text and the article it leads to can differ.
      </p>
      <div style="display:flex; justify-content:center; gap:12px; flex-wrap:wrap;">
        <button class="modal-close-btn" onclick="closeSuccessModal()">Explore Graph</button>
        <button class="modal-copy-btn" id="modal-copy-btn" onclick="copyPath()">Copy Path</button>
        <button class="modal-close-btn"
          style="background:transparent; border:1px solid var(--border); color:var(--text2);"
          onclick="resetAll(true)">New Search</button>
      </div>
    </div>
  </div>

  <!-- About Modal -->
  <div id="about-modal" class="modal-backdrop" onclick="closeAboutModal(event)">
    <div class="modal-card about-card">

      <!-- Header -->
      <div style="display:flex;align-items:center;gap:16px;margin-bottom:28px;">
        <svg class="aurelius-logo" viewBox="0 0 100 100" aria-hidden="true"
          style="height:42px;width:42px;opacity:0.92;flex-shrink:0;overflow:visible;filter:drop-shadow(0 0 14px rgba(124,106,247,0.45));">
          <g class="alogo-edges" opacity="0.5">
            <line x1="50" y1="14" x2="79" y2="26" />
            <line x1="79" y1="26" x2="86" y2="54" />
            <line x1="86" y1="54" x2="71" y2="79" />
            <line x1="71" y1="79" x2="50" y2="88" />
            <line x1="50" y1="88" x2="29" y2="79" />
            <line x1="29" y1="79" x2="14" y2="54" />
            <line x1="14" y1="54" x2="21" y2="26" />
            <line x1="21" y1="26" x2="50" y2="14" />
            <line x1="50" y1="14" x2="50" y2="50" />
            <line x1="79" y1="26" x2="50" y2="50" />
            <line x1="21" y1="26" x2="50" y2="50" />
            <line x1="86" y1="54" x2="50" y2="50" />
            <line x1="29" y1="79" x2="50" y2="50" />
          </g>
          <polyline class="alogo-trace" points="21,26 50,50 79,26 86,54 71,79" />
          <g class="alogo-nodes">
            <circle cx="50" cy="14" r="5" />
            <circle cx="79" cy="26" r="5" />
            <circle cx="86" cy="54" r="5" />
            <circle cx="71" cy="79" r="5" />
            <circle cx="50" cy="88" r="5" />
            <circle cx="29" cy="79" r="5" />
            <circle cx="14" cy="54" r="5" />
            <circle cx="21" cy="26" r="5" />
          </g>
          <circle class="alogo-hub" cx="50" cy="50" r="7" />
        </svg>
        <div>
          <h2
            style="font-family:'Cinzel',serif;font-size:22px;font-weight:900;color:#fff;letter-spacing:3px;text-transform:uppercase;line-height:1">
            AURELIUS</h2>
          <p style="font-size:12px;color:var(--text2);margin-top:6px;letter-spacing:0.2px">Graph intelligence engine</p>
        </div>
      </div>

      <!-- Quote -->
      <div class="about-quote-block">
        <span class="about-quote-mark">"</span>
        <p class="about-quote-text">The universe is change, our life is what our thoughts make it.</p>
        <p class="about-quote-attr">Marcus Aurelius, Meditations</p>
      </div>

      <p class="about-prose">Named after the Stoic emperor who wrote that every idea connects to the next. Aurelius
        makes those connections visible in any network of knowledge: pick two things, and it walks the real links
        between them, ranking every step by meaning. It started on Wikipedia; today the same engine powers a
        company research workspace, a paper citation explorer, biomedical networks and live news coverage,
        and can surface connections that no direct link records at all.</p>

      <hr class="about-divider" />
      <span class="about-section-label">How it works</span>
      <p style="font-size:11px;color:var(--text2);opacity:0.6;font-style:italic;margin:-8px 0 16px;">
        Works best on desktop; the live graph and side panel are easiest to read on a larger screen.
      </p>
      <div class="about-tech-grid">
        <div class="about-tech-card">
          <svg class="tech-icon" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.8"
            stroke-linecap="round" stroke-linejoin="round">
            <circle cx="6" cy="26" r="3" />
            <circle cx="16" cy="6" r="3" />
            <circle cx="26" cy="20" r="3" />
            <path d="M8.2 24 L14 8.5" />
            <path d="M18 7.8 L24 18.2" />
            <circle cx="16" cy="16" r="1.8" fill="currentColor" stroke="none" />
          </svg>
          <div class="tech-name">Best-First Search</div>
          <div class="tech-desc">Instead of checking links at random, Aurelius always opens the article that
            <em>looks closest</em> to the goal next, like always taking the turn that points toward where
            you're headed. It's the same idea behind A*: chase the most promising lead first rather than
            exploring everything.</div>
        </div>
        <div class="about-tech-card">
          <svg class="tech-icon" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.8"
            stroke-linecap="round" stroke-linejoin="round">
            <circle cx="7" cy="25" r="2.5" />
            <circle cx="16" cy="7" r="2.5" />
            <circle cx="26" cy="22" r="2.5" />
            <circle cx="13" cy="18" r="2.5" />
            <circle cx="22" cy="13" r="2.5" />
            <line x1="9" y1="23.5" x2="11.5" y2="19.5" />
            <line x1="14.8" y1="9.2" x2="13.6" y2="15.5" />
            <line x1="23.5" y1="14.8" x2="24.5" y2="19.5" />
            <line x1="15.4" y1="17.8" x2="20" y2="14.2" />
          </svg>
          <div class="tech-name">Semantic Embeddings</div>
          <div class="tech-desc">Each article is turned into a string of numbers that captures its
            <em>meaning</em>. Related topics get similar numbers, so "Jazz" sits near "Saxophone" but far
            from "Java". Comparing those numbers is how the search tells whether a link actually gets it
            closer.
          </div>
        </div>
        <div class="about-tech-card">
          <svg class="tech-icon" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.8"
            stroke-linecap="round" stroke-linejoin="round">
            <circle cx="27" cy="16" r="4" />
            <circle cx="16" cy="16" r="2.2" fill="currentColor" stroke="none" />
            <path d="M3 16 H13.8" />
            <path d="M10.5 12.5 L13.8 16 L10.5 19.5" />
            <path d="M23 16 H18.2" />
          </svg>
          <div class="tech-name">Search From Both Ends</div>
          <div class="tech-desc">Aurelius also gathers everything that links <em>to</em> your destination
            ahead of time. When the forward search runs into one of them, the two sides meet in the middle,
            reaching the answer far quicker than searching from the start alone; and every hop in the result
            is a real, verified edge.
          </div>
        </div>
        <div class="about-tech-card">
          <svg class="tech-icon" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="1.8"
            stroke-linecap="round" stroke-linejoin="round">
            <circle cx="16" cy="16" r="11" />
            <path d="M10 16 L14 20 L22 12" />
            <path d="M16 5 V8" />
            <path d="M16 24 V27" />
            <path d="M5 16 H8" />
            <path d="M24 16 H27" />
          </svg>
          <div class="tech-name">Breaking Out of Dead Ends</div>
          <div class="tech-desc">If the search keeps circling a cluster of similar-but-wrong pages, it notices
            it has stopped making progress, casts a wider net, and favors more <em>varied</em> links to escape,
            and it never invents a link that doesn't truly exist.</div>
        </div>
      </div>

      <hr class="about-divider" />
      <span class="about-section-label">Hidden Connections</span>
      <p class="about-prose" style="margin-bottom:14px">
        A search engine can only show you what's <em>directly</em> linked. Aurelius' most useful trick is
        finding what isn't. It walks everything one thing touches, then everything <em>those</em> touch, and
        keeps the candidates with strong indirect support: many shared neighbours, close meaning, price
        co-movement, shared suppliers or investors, common intermediaries. Two companies that never mention
        each other but depend on the same chip maker; a drug and a disease with no listed link but a chain of
        shared biology between them. Every hidden connection comes with the evidence for <em>why</em> it
        surfaced, so you're never asked to trust an unexplained edge.
      </p>

      <hr class="about-divider" />
      <span class="about-section-label">What makes it different</span>
      <div class="about-compare">
        <div class="about-compare-head">Typical search</div>
        <div class="about-compare-head accent">Aurelius</div>

        <div class="about-compare-cell">Treats every link as equal</div>
        <div class="about-compare-cell accent">Ranks every link by meaning</div>

        <div class="about-compare-cell">Searches blindly until it stumbles on the target</div>
        <div class="about-compare-cell accent">Aims at the goal from both ends</div>

        <div class="about-compare-cell">Built for one dataset</div>
        <div class="about-compare-cell accent">Same engine on Wikipedia, papers, finance, biology &amp; news</div>

        <div class="about-compare-cell">Only finds what's directly linked</div>
        <div class="about-compare-cell accent">Discovers hidden connections with no direct link at all</div>
      </div>

      <hr class="about-divider" />
      <span class="about-section-label">One engine, many worlds</span>
      <p class="about-demo-note">
        Every dataset here is a plug-in <strong>adapter</strong> speaking one protocol, so the search engine
        never changes: Wikipedia and research papers are walked live; finance and news are ingested into a
        persistent graph with learned structural embeddings on top. The finance graph links companies, ETFs,
        sectors, executives and macro indicators through typed relationships (supply chains, ownership,
        competition, real return correlations), and a standalone News Intelligence pipeline turns live
        headlines into entities, relationships and evolving stories that any domain can query. Every path hop
        and every discovered connection comes with the evidence for <em>why</em> it exists.
      </p>

      <hr class="about-divider" />
      <span class="about-section-label">Built by</span>
      <p style="font-size:16px;font-weight:800;color:#fff;margin-bottom:6px">Murtaza Vali</p>
      <p class="about-prose" style="margin-bottom:18px">CS student who got curious about A* pathfinding and ended up
        building something with embeddings, a verified backlink graph, and a live force-directed visualization. This is
        what happens when you keep adding "just one more thing."</p>
      <a href="https://www.linkedin.com/in/murtaza-vali-741835274/" target="_blank" rel="noopener"
        class="about-linkedin-btn">LinkedIn ↗</a>

      <div style="margin-top:28px;text-align:right;">
        <button class="modal-close-btn" onclick="closeAboutModal()">Close</button>
      </div>
    </div>
  </div>

  <!-- Onboarding Modal (first-time users) -->
  <div id="onboarding-modal" class="modal-backdrop">
    <div class="modal-card onboarding-card">
      <button class="modal-corner-close" onclick="closeOnboarding()" aria-label="Close">
        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="3" x2="13" y2="13"/><line x1="13" y1="3" x2="3" y2="13"/></svg>
      </button>
      <h2 class="onboarding-title">Welcome to Aurelius</h2>
      <p class="onboarding-tagline">One engine, many worlds of knowledge</p>
      <div class="onboarding-steps">
        <div class="onboarding-step">
          <div class="onboarding-icon">1</div>
          <div>
            <strong>Pick a world to research</strong>
            <p>Wikipedia, research papers, finance, or biology. Each has its own workspace — a company
              profile, a paper's citations — plus the pathfinder that ties any two things together.</p>
          </div>
        </div>
        <div class="onboarding-step">
          <div class="onboarding-icon">2</div>
          <div>
            <strong>Dive into one thing, or connect two</strong>
            <p>Research a company (price, peers, supply chain, news) or a paper's citation tree; or type
              a From and a To and watch Aurelius walk the real links between them, ranking every step by
              meaning. It never invents a link.</p>
          </div>
        </div>
        <div class="onboarding-step">
          <div class="onboarding-icon">3</div>
          <div>
            <strong>Explore the graph</strong>
            <p>Click any node to expand its real neighbours, focus on its neighbourhood, filter the view,
              and open Discover to surface connections with no direct link at all.</p>
          </div>
        </div>
      </div>
      <p class="onboarding-tip">
        Tip: in Finance, hit <strong>Research a company</strong> and search a ticker like NVDA — you'll see
        its peers, suppliers, correlations and news before you ever touch the graph.
      </p>
      <button class="modal-close-btn onboarding-go-btn" onclick="closeOnboarding()">Let's Go</button>
    </div>
  </div>

  <script src="graph2d.js"></script>
  <script src="app.js"></script>
</body>

</html>