scope-bca 0.7.0

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scope — Blockchain Analysis</title>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="app">
  <header>
    <div class="header-brand">
      <h1>sc<svg class="header-logo-inline" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
        <circle cx="32" cy="32" r="28" fill="none" stroke="#3fb950" stroke-width="3"/>
        <circle cx="32" cy="32" r="14" fill="none" stroke="#3fb950" stroke-width="2" opacity="0.7"/>
        <circle cx="32" cy="32" r="4" fill="#f85149"/>
        <line x1="32" y1="0" x2="32" y2="16" stroke="#3fb950" stroke-width="2.5" stroke-linecap="round"/>
        <line x1="32" y1="48" x2="32" y2="64" stroke="#3fb950" stroke-width="2.5" stroke-linecap="round"/>
        <line x1="0" y1="32" x2="16" y2="32" stroke="#3fb950" stroke-width="2.5" stroke-linecap="round"/>
        <line x1="48" y1="32" x2="64" y2="32" stroke="#3fb950" stroke-width="2.5" stroke-linecap="round"/>
      </svg>pe <span class="header-subtitle">blockchain analysis</span></h1>
    </div>
    <span class="version" id="version"></span>
  </header>

  <nav id="nav">
    <button class="active" data-panel="insights">Insights</button>
    <button data-panel="address">Address</button>
    <button data-panel="tx">Transaction</button>
    <button data-panel="contract">Contract</button>
    <button data-panel="crawl">Token Crawl</button>
    <button data-panel="discover">Discover</button>
    <button data-panel="token-health">Token Health</button>
    <button data-panel="market">Market</button>
    <button data-panel="exchange">Exchange</button>
    <button data-panel="monitor">Monitor</button>
    <button data-panel="address-book">Address Book</button>
    <button data-panel="compliance">Compliance</button>
    <button data-panel="export">Export</button>
    <button data-panel="setup">Setup</button>
  </nav>

  <!-- Insights -->
  <div class="panel active" id="panel-insights">
    <h2>Unified Insights</h2>
    <p>Enter any target — address, tx hash, or token — and Scope will detect the type and run relevant analyses.</p>
    <div class="form-row">
      <div class="form-group" style="flex:3">
        <label>Target</label>
        <input type="text" id="insights-target" placeholder="0x742d... or USDC or @label" list="ab-suggestions">
      </div>
      <div class="form-group" style="flex:1">
        <label>Chain (optional)</label>
        <select id="insights-chain">
          <option value="">Auto-detect</option>
          <option value="ethereum">Ethereum</option>
          <option value="polygon">Polygon</option>
          <option value="arbitrum">Arbitrum</option>
          <option value="optimism">Optimism</option>
          <option value="base">Base</option>
          <option value="bsc">BSC</option>
          <option value="solana">Solana</option>
          <option value="tron">Tron</option>
        </select>
      </div>
      <button class="btn" onclick="runInsights()">Analyze</button>
    </div>
    <div id="insights-results"></div>
  </div>

  <!-- Address -->
  <div class="panel" id="panel-address">
    <h2>Address Analysis</h2>
    <div class="form-row">
      <div class="form-group" style="flex:3">
        <label>Address</label>
        <input type="text" id="addr-address" placeholder="0x742d35Cc... or @label" list="ab-suggestions">
      </div>
      <div class="form-group" style="flex:1">
        <label>Chain</label>
        <select id="addr-chain">
          <option value="ethereum">Ethereum</option>
          <option value="polygon">Polygon</option>
          <option value="arbitrum">Arbitrum</option>
          <option value="optimism">Optimism</option>
          <option value="base">Base</option>
          <option value="bsc">BSC</option>
          <option value="solana">Solana</option>
          <option value="tron">Tron</option>
        </select>
      </div>
      <button class="btn" onclick="runAddress()">Analyze</button>
    </div>
    <div class="form-row">
      <div class="checkbox-group">
        <input type="checkbox" id="addr-tokens" checked>
        <label for="addr-tokens">Include Tokens</label>
      </div>
      <div class="checkbox-group">
        <input type="checkbox" id="addr-txs">
        <label for="addr-txs">Include Transactions</label>
      </div>
      <div class="checkbox-group">
        <input type="checkbox" id="addr-dossier">
        <label for="addr-dossier">Dossier (+ Risk)</label>
      </div>
    </div>
    <div id="address-results"></div>
  </div>

  <!-- Transaction -->
  <div class="panel" id="panel-tx">
    <h2>Transaction Analysis</h2>
    <div class="form-row">
      <div class="form-group" style="flex:3">
        <label>Transaction Hash</label>
        <input type="text" id="tx-hash" placeholder="0xabc123...">
      </div>
      <div class="form-group" style="flex:1">
        <label>Chain</label>
        <select id="tx-chain">
          <option value="ethereum">Ethereum</option>
          <option value="polygon">Polygon</option>
          <option value="arbitrum">Arbitrum</option>
          <option value="optimism">Optimism</option>
          <option value="base">Base</option>
          <option value="bsc">BSC</option>
          <option value="solana">Solana</option>
          <option value="tron">Tron</option>
        </select>
      </div>
      <button class="btn" onclick="runTx()">Analyze</button>
    </div>
    <div class="form-row">
      <div class="checkbox-group">
        <input type="checkbox" id="tx-decode">
        <label for="tx-decode">Decode Input</label>
      </div>
      <div class="checkbox-group">
        <input type="checkbox" id="tx-trace">
        <label for="tx-trace">Trace Internals</label>
      </div>
    </div>
    <div id="tx-results"></div>
  </div>

  <!-- Contract Analysis -->
  <div class="panel" id="panel-contract">
    <h2>Contract Analysis</h2>
    <p>Analyze a smart contract for security vulnerabilities, proxy patterns, access control, DeFi risks, and audit history.</p>
    <div class="form-row">
      <div class="form-group" style="flex:3">
        <label>Contract Address</label>
        <input type="text" id="ct-address" placeholder="0xdAC17F... or @label" list="ab-suggestions">
      </div>
      <div class="form-group" style="flex:1">
        <label>Chain</label>
        <select id="ct-chain">
          <option value="ethereum">Ethereum</option>
          <option value="polygon">Polygon</option>
          <option value="arbitrum">Arbitrum</option>
          <option value="optimism">Optimism</option>
          <option value="base">Base</option>
          <option value="bsc">BSC</option>
        </select>
      </div>
      <button class="btn" onclick="runContract()">Analyze</button>
    </div>
    <div id="contract-results"></div>
  </div>

  <!-- Token Crawl -->
  <div class="panel" id="panel-crawl">
    <h2>Token Crawl</h2>
    <div class="form-row">
      <div class="form-group" style="flex:2">
        <label>Token (address or symbol)</label>
        <input type="text" id="crawl-token" placeholder="USDC or 0xA0b8... or @label" list="ab-suggestions">
      </div>
      <div class="form-group">
        <label>Chain</label>
        <select id="crawl-chain">
          <option value="ethereum">Ethereum</option>
          <option value="solana">Solana</option>
          <option value="bsc">BSC</option>
          <option value="polygon">Polygon</option>
          <option value="arbitrum">Arbitrum</option>
          <option value="base">Base</option>
        </select>
      </div>
      <div class="form-group">
        <label>Period</label>
        <select id="crawl-period">
          <option value="24h">24 Hours</option>
          <option value="1h">1 Hour</option>
          <option value="7d">7 Days</option>
          <option value="30d">30 Days</option>
        </select>
      </div>
      <button class="btn" onclick="runCrawl()">Crawl</button>
    </div>
    <div id="crawl-results"></div>
  </div>

  <!-- Discover -->
  <div class="panel" id="panel-discover">
    <h2>Token Discovery</h2>
    <div class="form-row">
      <div class="form-group">
        <label>Source</label>
        <select id="disc-source">
          <option value="profiles">Featured Profiles</option>
          <option value="boosts">Recent Boosts</option>
          <option value="top-boosts">Top Boosts</option>
        </select>
      </div>
      <div class="form-group">
        <label>Chain (optional)</label>
        <select id="disc-chain">
          <option value="">All Chains</option>
          <option value="ethereum">Ethereum</option>
          <option value="solana">Solana</option>
          <option value="bsc">BSC</option>
        </select>
      </div>
      <div class="form-group" style="flex:0.5">
        <label>Limit</label>
        <input type="number" id="disc-limit" value="15" min="1" max="50">
      </div>
      <button class="btn" onclick="runDiscover()">Discover</button>
    </div>
    <div id="discover-results"></div>
  </div>

  <!-- Token Health -->
  <div class="panel" id="panel-token-health">
    <h2>Token Health Suite</h2>
    <div class="form-row">
      <div class="form-group" style="flex:2">
        <label>Token</label>
        <input type="text" id="th-token" placeholder="USDC or @label" list="ab-suggestions">
      </div>
      <div class="form-group">
        <label>Chain</label>
        <select id="th-chain">
          <option value="ethereum">Ethereum</option>
          <option value="solana">Solana</option>
        </select>
      </div>
      <div class="form-group">
        <label>Market Venue</label>
        <select id="th-venue" class="venue-select" data-dex>
          <option value="binance">Binance</option>
        </select>
      </div>
      <button class="btn" onclick="runTokenHealth()">Analyze</button>
    </div>
    <div class="form-row">
      <div class="checkbox-group">
        <input type="checkbox" id="th-market">
        <label for="th-market">Include Market/Order Book</label>
      </div>
    </div>
    <div id="th-results"></div>
  </div>

  <!-- Market -->
  <div class="panel" id="panel-market">
    <h2>Market Summary</h2>
    <div class="form-row">
      <div class="form-group">
        <label>Token Symbol</label>
        <input type="text" id="mkt-pair" placeholder="USDC" value="USDC">
      </div>
      <div class="form-group">
        <label>Venue</label>
        <select id="mkt-venue" class="venue-select" data-dex>
          <option value="binance">Binance</option>
        </select>
      </div>
      <div class="form-group" style="flex:0.5">
        <label>Peg Target</label>
        <input type="number" id="mkt-peg" step="0.001" placeholder="config">
      </div>
      <button class="btn" onclick="runMarket()">Fetch</button>
    </div>
    <div id="market-results"></div>
  </div>

  <!-- Exchange -->
  <div class="panel" id="panel-exchange">
    <h2>Exchange Snapshot</h2>
    <p>Fetch real-time order book, ticker, and recent trades from any supported exchange venue.</p>
    <div class="form-row">
      <div class="form-group">
        <label>Venue</label>
        <select id="ex-venue" class="venue-select">
          <option value="binance">Binance</option>
        </select>
      </div>
      <div class="form-group">
        <label>Pair (base)</label>
        <input type="text" id="ex-pair" placeholder="BTC" value="BTC">
      </div>
      <button class="btn" onclick="runExchange()">Fetch</button>
    </div>
    <div id="exchange-results"></div>
  </div>

  <!-- Monitor -->
  <div class="panel" id="panel-monitor">
    <h2>Live Monitor</h2>
    <div class="form-row">
      <div class="form-group" style="flex:2">
        <label>Token</label>
        <input type="text" id="mon-token" placeholder="USDC or @label" list="ab-suggestions">
      </div>
      <div class="form-group">
        <label>Chain</label>
        <select id="mon-chain">
          <option value="ethereum">Ethereum</option>
          <option value="solana">Solana</option>
        </select>
      </div>
      <div class="form-group">
        <label>CEX Venue (optional)</label>
        <select id="mon-venue" class="venue-select">
          <option value="">None</option>
        </select>
      </div>
      <div class="form-group" style="flex:0.5">
        <label>Pair (base)</label>
        <input type="text" id="mon-pair" placeholder="same as token">
      </div>
      <div class="form-group" style="flex:0.5">
        <label>Refresh (s)</label>
        <input type="number" id="mon-refresh" value="5" min="1" max="60">
      </div>
      <button class="btn" id="mon-btn" onclick="toggleMonitor()">Start</button>
    </div>
    <div id="monitor-display" style="margin-top:16px;">
      <div class="monitor-container" style="display:none;" id="mon-container">
        <div class="monitor-main">
          <div class="monitor-chart" id="mon-chart">
            <canvas id="price-canvas" width="600" height="300"></canvas>
          </div>
          <div class="monitor-exchange-panel" id="mon-exchange" style="display:none;">
            <div id="mon-orderbook"></div>
            <div id="mon-trades"></div>
          </div>
        </div>
        <div class="monitor-stats" id="mon-stats"></div>
      </div>
    </div>
  </div>

  <!-- Address Book -->
  <div class="panel" id="panel-address-book">
    <h2>Address Book</h2>
    <p>Save wallets, contracts, and token addresses with labels. Use <code>@label</code> in any input field or the CLI to recall them.</p>
    <div id="ab-add-form" class="ab-add-form">
      <div class="form-row">
        <div class="form-group" style="flex:3">
          <label>Address</label>
          <input type="text" id="ab-address" placeholder="0x742d35Cc... or T... or base58...">
        </div>
        <div class="form-group">
          <label>Chain</label>
          <select id="ab-chain">
            <option value="ethereum">Ethereum</option>
            <option value="polygon">Polygon</option>
            <option value="arbitrum">Arbitrum</option>
            <option value="optimism">Optimism</option>
            <option value="base">Base</option>
            <option value="bsc">BSC</option>
            <option value="solana">Solana</option>
            <option value="tron">Tron</option>
          </select>
        </div>
        <div class="form-group">
          <label>Label</label>
          <input type="text" id="ab-label" placeholder="main-wallet">
        </div>
        <div class="form-group">
          <label>Tags (comma-separated)</label>
          <input type="text" id="ab-tags" placeholder="defi, nft">
        </div>
        <button class="btn" onclick="addAddressBookEntry()">Add</button>
      </div>
    </div>
    <div id="ab-table"></div>
  </div>

  <!-- Compliance -->
  <div class="panel" id="panel-compliance">
    <h2>Compliance Risk Assessment</h2>
    <div class="form-row">
      <div class="form-group" style="flex:3">
        <label>Address</label>
        <input type="text" id="comp-address" placeholder="0x742d35Cc... or @label" list="ab-suggestions">
      </div>
      <div class="form-group">
        <label>Chain</label>
        <select id="comp-chain">
          <option value="ethereum">Ethereum</option>
          <option value="polygon">Polygon</option>
          <option value="bsc">BSC</option>
          <option value="solana">Solana</option>
        </select>
      </div>
      <button class="btn" onclick="runCompliance()">Assess Risk</button>
    </div>
    <div class="form-row">
      <div class="checkbox-group">
        <input type="checkbox" id="comp-detailed">
        <label for="comp-detailed">Detailed Breakdown</label>
      </div>
    </div>
    <div id="compliance-results"></div>
  </div>

  <!-- Export -->
  <div class="panel" id="panel-export">
    <h2>Data Export</h2>
    <div class="form-row">
      <div class="form-group" style="flex:3">
        <label>Address</label>
        <input type="text" id="exp-address" placeholder="0x742d35Cc... or @label" list="ab-suggestions">
      </div>
      <div class="form-group">
        <label>Chain</label>
        <select id="exp-chain">
          <option value="ethereum">Ethereum</option>
          <option value="solana">Solana</option>
          <option value="tron">Tron</option>
        </select>
      </div>
      <button class="btn" onclick="runExport()">Export</button>
    </div>
    <div id="export-results"></div>
  </div>

  <!-- Setup -->
  <div class="panel" id="panel-setup">
    <h2>Configuration</h2>
    <div id="setup-status"></div>
    <div id="setup-form" style="margin-top:16px;">
      <h3 style="color:var(--text-bright);margin-bottom:12px;">Update API Keys</h3>
      <div class="setup-grid">
        <div class="setup-card">
          <h3>Etherscan</h3>
          <input type="text" id="key-etherscan" placeholder="API Key" style="width:100%">
        </div>
        <div class="setup-card">
          <h3>Polygonscan</h3>
          <input type="text" id="key-polygonscan" placeholder="API Key" style="width:100%">
        </div>
        <div class="setup-card">
          <h3>BscScan</h3>
          <input type="text" id="key-bscscan" placeholder="API Key" style="width:100%">
        </div>
        <div class="setup-card">
          <h3>Solscan</h3>
          <input type="text" id="key-solscan" placeholder="API Key" style="width:100%">
        </div>
        <div class="setup-card">
          <h3>TronScan</h3>
          <input type="text" id="key-tronscan" placeholder="API Key" style="width:100%">
        </div>
      </div>
      <div style="margin-top:16px;">
        <button class="btn" onclick="saveConfig()">Save Configuration</button>
      </div>
    </div>
  </div>
  <!-- Address book autocomplete datalist (populated by JS) -->
  <datalist id="ab-suggestions"></datalist>
</div>

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