Francy51/MosaicIQ
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
506d092b2b1669a665145ccc9da229f44048afe2
MosaicIQ/wireframe/index.html

1287 lines
81 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Meridian — Equity Research Workspace</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- ═══════════ TOP BAR ═══════════ -->
<div class="topbar">
<div class="logo" onclick="switchScreen('home', this)">Meridian</div>
<div class="ticker-group" id="tickerGroup">
<span class="ticker">COST</span>
<span class="ticker-name">Costco Wholesale Corp</span>
<span class="tag green">$921.40</span>
<span style="font-size:11px;color:var(--muted)">+1.2%</span>
</div>
<!-- nav-open-btn moved to sidebar -->
<div class="screen-tabs">
<button class="active" onclick="switchScreen('home', this)">Home</button>
<button onclick="switchScreen('workspace', this)">Workspace</button>
<button onclick="switchScreen('model', this)">Model</button>
<button onclick="switchScreen('memo', this)">Memo</button>
<button onclick="switchScreen('agents', this)">Agents</button>
</div>
<input class="search" placeholder="Search companies, files, commands…" />
<button class="icon-btn" onclick="openSettings()" title="Settings">⚙</button>
<div class="avatar" onclick="openProfile()" title="Edit profile">JD</div>
</div>
<!-- ═══════════ MAIN ═══════════ -->
<div class="main">
<!-- ═══ SCREEN 0: HOME DASHBOARD ═══ -->
<div class="screen active" id="screen-home">
<div class="center" style="padding:0;overflow-y:auto">
<!-- Top stats -->
<div style="padding:24px 28px 0">
<h1 class="display" style="font-size:24px;margin-bottom:4px">Good morning, JD</h1>
</div>
<!-- Portfolio Overview -->
<div style="padding:20px 28px 24px">
<div class="portfolio-dashboard">
<!-- Holdings List -->
<div class="pd-section pd-holdings">
<div class="pd-section-title">Holdings</div>
<div class="pd-holdings-scroll">
<div class="pd-holding-row">
<span class="pd-ticker">COST</span>
<span class="pd-price">$921.40</span>
<span class="pd-change positive">+1.2%</span>
<span class="pd-weight">32%</span>
<span class="pd-actions">⋯</span>
</div>
<div class="pd-holding-row">
<span class="pd-ticker">AMZN</span>
<span class="pd-price">$186.50</span>
<span class="pd-change positive">+0.8%</span>
<span class="pd-weight">28%</span>
<span class="pd-actions">⋯</span>
</div>
<div class="pd-holding-row">
<span class="pd-ticker">WMT</span>
<span class="pd-price">$168.30</span>
<span class="pd-change negative">−0.3%</span>
<span class="pd-weight">22%</span>
<span class="pd-actions">⋯</span>
</div>
<div class="pd-holding-row">
<span class="pd-ticker">TGT</span>
<span class="pd-price">$142.80</span>
<span class="pd-change negative">−1.1%</span>
<span class="pd-weight">18%</span>
<span class="pd-actions">⋯</span>
</div>
<div class="pd-holding-row">
<span class="pd-ticker">BJ</span>
<span class="pd-price">$84.20</span>
<span class="pd-change positive">+0.4%</span>
<span class="pd-weight">8%</span>
<span class="pd-actions">⋯</span>
</div>
<div class="pd-holding-row">
<span class="pd-ticker">KR</span>
<span class="pd-price">$62.10</span>
<span class="pd-change negative">−0.6%</span>
<span class="pd-weight">5%</span>
<span class="pd-actions">⋯</span>
</div>
<div class="pd-holding-row">
<span class="pd-ticker">DG</span>
<span class="pd-price">$78.50</span>
<span class="pd-change positive">+1.5%</span>
<span class="pd-weight">4%</span>
<span class="pd-actions">⋯</span>
</div>
<div class="pd-holding-row">
<span class="pd-ticker">DLTR</span>
<span class="pd-price">$71.30</span>
<span class="pd-change negative">−0.2%</span>
<span class="pd-weight">3%</span>
<span class="pd-actions">⋯</span>
</div>
</div>
</div>
<!-- Portfolio Price Chart -->
<div class="pd-section pd-chart">
<div class="pd-section-title">Portfolio Performance (6M)</div>
<svg viewBox="0 0 100 50" class="pd-area-chart" preserveAspectRatio="none">
<!-- Grid lines -->
<line x1="0" y1="12" x2="100" y2="12" stroke="var(--border)" stroke-width="0.3"/>
<line x1="0" y1="25" x2="100" y2="25" stroke="var(--border)" stroke-width="0.3"/>
<line x1="0" y1="37" x2="100" y2="37" stroke="var(--border)" stroke-width="0.3"/>
<!-- Area fill -->
<polygon points="0,35 8,32 17,30 25,28 33,26 42,24 50,22 58,20 67,18 75,16 83,14 92,12 100,10 100,50 0,50" fill="oklch(52% 0.12 145 / 0.1)"/>
<!-- Line -->
<polyline points="0,35 8,32 17,30 25,28 33,26 42,24 50,22 58,20 67,18 75,16 83,14 92,12 100,10" fill="none" stroke="var(--green)" stroke-width="0.8"/>
<!-- End dot -->
<circle cx="100" cy="10" r="1.5" fill="var(--green)"/>
</svg>
<div class="pd-chart-labels">
<span>Nov</span><span>Dec</span><span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span>
</div>
<div class="pd-chart-return">
<span class="pd-change positive" style="font-size:13px">+9.8%</span>
<span class="pd-period">6-month return</span>
</div>
<div class="pd-metrics-grid" style="margin-top:16px">
<div class="pd-metric">
<div class="pd-metric-label">Total Value</div>
<div class="pd-metric-value">$2.41M</div>
</div>
<div class="pd-metric">
<div class="pd-metric-label">Day P&L</div>
<div class="pd-metric-value" style="color:var(--green)">+$12,340</div>
</div>
<div class="pd-metric">
<div class="pd-metric-label">Holdings</div>
<div class="pd-metric-value">4</div>
</div>
<div class="pd-metric">
<div class="pd-metric-label">Beta</div>
<div class="pd-metric-value">0.68</div>
</div>
<div class="pd-metric">
<div class="pd-metric-label">Sharpe</div>
<div class="pd-metric-value">1.42</div>
</div>
<div class="pd-metric">
<div class="pd-metric-label">Max DD</div>
<div class="pd-metric-value" style="color:var(--red)">−4.1%</div>
</div>
</div>
</div>
<!-- Sector Heat Map + Factor Tilt -->
<div class="pd-section pd-sectors">
<div class="pd-split-col">
<!-- Top half: Sector Weightings -->
<div class="pd-split-half">
<div class="pd-section-title">Sector Weightings</div>
<div class="pd-treemap pd-treemap-compact">
<div class="pd-treemap-row" style="flex:82">
<div class="pd-treemap-cell" style="flex:56;background:oklch(45% 0.17 30)">
<span class="cell-sector">Consumer Staples</span>
<span class="cell-pct">56%</span>
<span class="cell-value">$1.35M</span>
</div>
<div class="pd-treemap-cell" style="flex:26;background:oklch(45% 0.15 150)">
<span class="cell-sector">Consumer Discretionary</span>
<span class="cell-pct">26%</span>
<span class="cell-value">$627K</span>
</div>
</div>
<div class="pd-treemap-row" style="flex:18">
<div class="pd-treemap-cell" style="flex:10;background:oklch(52% 0.12 250)">
<span class="cell-sector">Technology</span>
<span class="cell-pct">10%</span>
<span class="cell-value">$241K</span>
</div>
<div class="pd-treemap-cell" style="flex:8;background:oklch(58% 0.16 145)">
<span class="cell-sector">Health Care</span>
<span class="cell-pct">8%</span>
<span class="cell-value">$193K</span>
</div>
</div>
</div>
</div>
<!-- Bottom half: Fama French Factor Tilt -->
<div class="pd-split-half">
<div class="pd-section-title">Factor Tilt <span style="font-weight:400;color:var(--muted);letter-spacing:0">vs. S&P 500</span></div>
<div class="pd-factor-chart">
<div class="pd-factor-row">
<span class="pd-factor-label">Value</span>
<div class="pd-factor-bar-track">
<div class="pd-factor-bar positive" style="width:62%"><span class="pd-factor-val">+0.32</span></div>
<div class="pd-factor-center"></div>
</div>
</div>
<div class="pd-factor-row">
<span class="pd-factor-label">Size</span>
<div class="pd-factor-bar-track">
<div class="pd-factor-bar negative" style="width:40%"><span class="pd-factor-val">−0.48</span></div>
<div class="pd-factor-center"></div>
</div>
</div>
<div class="pd-factor-row">
<span class="pd-factor-label">Momentum</span>
<div class="pd-factor-bar-track">
<div class="pd-factor-bar positive" style="width:35%"><span class="pd-factor-val">+0.18</span></div>
<div class="pd-factor-center"></div>
</div>
</div>
<div class="pd-factor-row">
<span class="pd-factor-label">Quality</span>
<div class="pd-factor-bar-track">
<div class="pd-factor-bar positive" style="width:72%"><span class="pd-factor-val">+0.41</span></div>
<div class="pd-factor-center"></div>
</div>
</div>
<div class="pd-factor-row">
<span class="pd-factor-label">Low Vol</span>
<div class="pd-factor-bar-track">
<div class="pd-factor-bar positive" style="width:55%"><span class="pd-factor-val">+0.27</span></div>
<div class="pd-factor-center"></div>
</div>
</div>
<div class="pd-factor-row">
<span class="pd-factor-label">Mkt Beta</span>
<div class="pd-factor-bar-track">
<div class="pd-factor-bar negative" style="width:24%"><span class="pd-factor-val">0.68</span></div>
<div class="pd-factor-center"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="home-grid">
<!-- Earnings Calendar -->
<div class="home-card">
<div class="card-header">
<h3>Earnings Calendar</h3>
<span style="font-size:10px;color:var(--muted);font-family:var(--font-mono)">This Week</span>
</div>
<div style="padding:0">
<div class="ec-group-label">Tue May 6</div>
<div class="ec-row">
<span class="row-ticker">COST</span>
<span class="row-name">Q3 FY25</span>
<span class="ec-tag bmo">BMO</span>
<span class="row-meta">2d</span>
</div>
<div class="ec-row">
<span class="row-ticker">KR</span>
<span class="row-name">Q1 FY25</span>
<span class="ec-tag amc">AMC</span>
<span class="row-meta">2d</span>
</div>
<div class="ec-group-label">Thu May 8</div>
<div class="ec-row">
<span class="row-ticker">WMT</span>
<span class="row-name">Q1 FY26</span>
<span class="ec-tag bmo">BMO</span>
<span class="row-meta">4d</span>
</div>
<div class="ec-row">
<span class="row-ticker">DG</span>
<span class="row-name">Q1 FY26</span>
<span class="ec-tag amc">AMC</span>
<span class="row-meta">4d</span>
</div>
<div class="ec-group-label">Next Week</div>
<div class="ec-row">
<span class="row-ticker">AMZN</span>
<span class="row-name">Q1 FY25</span>
<span class="ec-tag bmo">BMO</span>
<span class="row-meta">May 15</span>
</div>
<div class="ec-row">
<span class="row-ticker">TGT</span>
<span class="row-name">Q1 FY26</span>
<span class="ec-tag amc">AMC</span>
<span class="row-meta">May 15</span>
</div>
</div>
</div>
<!-- Watchlist Alerts -->
<div class="home-card">
<div class="card-header">
<h3>Watchlist Alerts</h3>
<button class="btn sm">Manage</button>
</div>
<div class="card-body">
<div class="card-row">
<span class="row-ticker">COST</span>
<span class="row-name">Q2 FY25 earnings beat (+7.5% comp)</span>
<span class="tag green">Thesis +</span>
<span class="row-meta">2h ago</span>
</div>
<div class="card-row">
<span class="row-ticker">AMZN</span>
<span class="row-name">AWS growth acceleration to 19% YoY</span>
<span class="tag green">Thesis +</span>
<span class="row-meta">1d ago</span>
</div>
<div class="card-row">
<span class="row-ticker">WMT</span>
<span class="row-name">New 10-K filed — updated segment data</span>
<span class="tag">Filing</span>
<span class="row-meta">2d ago</span>
</div>
<div class="card-row">
<span class="row-ticker">COST</span>
<span class="row-name">Insider sell: $4.2M by CFO</span>
<span class="tag red">Thesis −</span>
<span class="row-meta">3d ago</span>
</div>
</div>
</div>
<!-- Recent Reports Library -->
<div class="home-card full-width">
<div class="card-header">
<h3>Recent Reports & Exports</h3>
<button class="btn sm">View All</button>
</div>
<div class="report-grid">
<div class="report-thumb" onclick="switchScreen('memo', document.querySelector('.screen-tabs button:nth-child(4)'))">
<div class="rt-type">Investment Memo</div>
<div class="rt-title">COST — Membership Economics at Scale</div>
<div class="rt-meta">Draft · Updated 45 min ago</div>
</div>
<div class="report-thumb">
<div class="rt-type">Financial Model</div>
<div class="rt-title">COST — Revenue Build FY25–FY27</div>
<div class="rt-meta">Base case · AI-generated</div>
</div>
<div class="report-thumb">
<div class="rt-type">IC Memo</div>
<div class="rt-title">AMZN — AWS Re-acceleration Thesis</div>
<div class="rt-meta">Published · Apr 28</div>
</div>
<div class="report-thumb">
<div class="rt-type">Earnings Update</div>
<div class="rt-title">COST — Q2 FY25 Earnings Note</div>
<div class="rt-meta">Auto-generated · Mar 6</div>
</div>
<div class="report-thumb">
<div class="rt-type">Peer Comparison</div>
<div class="rt-title">Warehouse Club Margin Analysis</div>
<div class="rt-meta">COST vs WMT, TGT, BJ · Apr 22</div>
</div>
<div class="report-thumb">
<div class="rt-type">Export</div>
<div class="rt-title">COST Model — Excel Export</div>
<div class="rt-meta">3 tabs with formulas · Apr 20</div>
</div>
<div class="report-thumb">
<div class="rt-type">Risk Register</div>
<div class="rt-title">AMZN — Risk & Mitigant Analysis</div>
<div class="rt-meta">12 risks identified · Apr 18</div>
</div>
<div class="report-thumb">
<div class="rt-type">Initiation</div>
<div class="rt-title">WMT — Full Initiation Report</div>
<div class="rt-meta">In progress · 60% complete</div>
</div>
</div>
</div>
<!-- Pending Reviews -->
<div class="home-card">
<div class="card-header"><h3>Pending Reviews</h3></div>
<div class="card-body">
<div class="card-row" onclick="switchScreen('memo', document.querySelector('.screen-tabs button:nth-child(4)'))">
<span class="row-ticker">COST</span>
<span class="row-name">Investment Memo — Draft</span>
<span class="tag accent">2 comments</span>
<span class="row-meta">45 min ago</span>
</div>
<div class="card-row">
<span class="row-ticker">COST</span>
<span class="row-name">Revenue Model — Assumptions</span>
<span class="tag">4 unverified</span>
<span class="row-meta">2h ago</span>
</div>
</div>
</div>
<!-- Agent Summary -->
<div class="home-card">
<div class="card-header">
<h3>Agent Status</h3>
<button class="btn sm" onclick="switchScreen('agents', document.querySelector('.screen-tabs button:nth-child(5)'))">View All</button>
</div>
<div class="card-body">
<div class="card-row">
<span class="dot running" style="width:8px;height:8px"></span>
<span class="row-name">SEC Filings Agent</span>
<span class="row-meta">45% · COST 10-K</span>
</div>
<div class="card-row">
<span class="dot running" style="width:8px;height:8px"></span>
<span class="row-name">Financial Modeling Agent</span>
<span class="row-meta">62% · Revenue build</span>
</div>
<div class="card-row">
<span class="dot running" style="width:8px;height:8px"></span>
<span class="row-name">Earnings Call Agent</span>
<span class="row-meta">78% · Q2 FY25</span>
</div>
<div class="card-row">
<span class="dot done" style="width:8px;height:8px"></span>
<span class="row-name">Company Research Agent</span>
<span class="row-meta" style="color:var(--green)">Completed</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ═══ SCREEN 1: COMPANY WORKSPACE (read-only research hub) ═══ -->
<div class="screen" id="screen-workspace">
<div class="left-nav" id="ws-nav">
<button class="nav-open-btn-sidebar" id="wsNavOpenBtn" onclick="openNav()" title="Expand sections">▶</button>
<div class="nav-toggle">
<span class="nav-header">Sections</span>
<button class="collapse-btn" onclick="toggleNav('ws-nav')" title="Collapse">◀</button>
</div>
<div class="nav-group-header">Research</div>
<button class="active">Company Snapshot</button>
<button>Business Description</button>
<button>Segment / Revenue Build</button>
<button>Margin Build</button>
<button>Historical Financials</button>
<button>Three-Statement Model</button>
<button>Key KPIs</button>
<button>Management & Strategy</button>
<div class="nav-divider"></div>
<div class="nav-group-header">Analysis</div>
<button>Competitive Landscape</button>
<button>Peer Comparison</button>
<button>Valuation Analysis</button>
<button>Investment Thesis</button>
<button>Risks & Mitigants</button>
<button>Catalyst Tracker</button>
<div class="nav-divider"></div>
<div class="nav-group-header">Monitoring</div>
<button>Earnings Monitor</button>
<button>Filing Watch</button>
<button>Thesis Alerts</button>
<div class="nav-divider"></div>
<div class="nav-group-header">Library</div>
<button>Source Library</button>
<button>Export Center</button>
</div>
<div class="center">
<div class="eyebrow">COST · Nasdaq · Consumer Staples · Membership Warehouse Clubs</div>
<h1 class="display">Costco Wholesale Corporation</h1>
<p class="muted" style="margin-bottom:16px">
Founded 1983 &nbsp;·&nbsp; Issaquah, WA &nbsp;·&nbsp; 897 warehouses &nbsp;·&nbsp; 14 countries &nbsp;·&nbsp; ~320,000 employees
</p>
<div class="metric-grid">
<div class="metric-cell"><div class="label">Market Cap</div><div class="value">$408.7B</div></div>
<div class="metric-cell"><div class="label">EV</div><div class="value">$401.2B</div></div>
<div class="metric-cell"><div class="label">Price</div><div class="value">$921.40</div><div class="sub">+1.2% today</div></div>
<div class="metric-cell"><div class="label">P/E (TTM)</div><div class="value">54.8x</div></div>
<div class="metric-cell"><div class="label">EV/EBITDA</div><div class="value">31.2x</div></div>
<div class="metric-cell"><div class="label">Dividend Yield</div><div class="value">0.5%</div></div>
<div class="metric-cell"><div class="label">FY24 Revenue</div><div class="value">$254.5B</div><div class="sub">+5.0% YoY</div></div>
<div class="metric-cell"><div class="label">Gross Margin</div><div class="value">12.6%</div></div>
<div class="metric-cell"><div class="label">Operating Margin</div><div class="value">3.6%</div></div>
<div class="metric-cell"><div class="label">Net Income</div><div class="value">$7.4B</div><div class="sub">+15.8% YoY</div></div>
<div class="metric-cell"><div class="label">Membership Fee Inc.</div><div class="value">$4.8B</div></div>
<div class="metric-cell"><div class="label">Renewal Rate</div><div class="value">93.0%</div></div>
</div>
<h2 class="section">Business Summary</h2>
<p class="body">
Costco operates 897 warehouses across 14 countries, generating $254.5B in FY24 revenue through a membership-based wholesale model. The company's competitive moat is built on three pillars: scale-driven purchasing power that enables industry-leading pricing, a curated 4,000-SKU assortment (vs. 30,000+ at traditional grocers) that drives inventory velocity, and membership fees that contribute nearly all operating profit while locking in customer loyalty at a 93% renewal rate.
</p>
<p class="body">
The business is organized into two reportable segments: <strong>Merchandise</strong> (93% of net sales, subdivided into Food & Sundries, Hardlines, Fresh, and Ancillary) and <strong>Membership Fees</strong> (2% of revenue but ~70% of operating income). Warehouse club operations span the US (615 locations), Canada (109), and International (173). E-commerce represents approximately 6% of total sales.
</p>
<h2 class="section">Segment Revenue Breakdown</h2>
<table class="spreadsheet" style="margin-bottom:16px">
<thead><tr><th style="text-align:left">Segment</th><th>FY23</th><th>FY24</th><th>YoY Growth</th><th>% of Net Sales</th></tr></thead>
<tbody>
<tr><td>Food & Sundries</td><td>$96.8B</td><td>$101.8B</td><td>+5.1%</td><td>45.8%</td></tr>
<tr><td>Hardlines</td><td>$41.6B</td><td>$43.7B</td><td>+5.0%</td><td>19.7%</td></tr>
<tr><td>Fresh</td><td>$36.1B</td><td>$38.6B</td><td>+6.8%</td><td>17.3%</td></tr>
<tr><td>Ancillary / Other</td><td>$21.9B</td><td>$23.1B</td><td>+5.6%</td><td>10.4%</td></tr>
<tr><td>E-Commerce</td><td>$14.2B</td><td>$15.3B</td><td>+7.7%</td><td>6.9%</td></tr>
<tr class="total"><td>Total Net Sales</td><td>$210.7B</td><td>$222.5B</td><td>+5.6%</td><td>100%</td></tr>
</tbody>
</table>
<h2 class="section">Key KPIs</h2>
<div class="metric-grid" style="grid-template-columns:repeat(auto-fill,minmax(160px,1fr))">
<div class="metric-cell"><div class="label">Warehouses</div><div class="value">897</div><div class="sub">+29 FY25E</div></div>
<div class="metric-cell"><div class="label">Paid Members</div><div class="value">76.2M</div><div class="sub">+7.3% YoY</div></div>
<div class="metric-cell"><div class="label">Avg Transaction</div><div class="value">$114.72</div></div>
<div class="metric-cell"><div class="label">Shopping Frequency</div><div class="value">26x/year</div></div>
<div class="metric-cell"><div class="label">Executive Mix</div><div class="value">47.3%</div><div class="sub">Up from 44.8%</div></div>
<div class="metric-cell"><div class="label">E-Commerce</div><div class="value">6.0%</div><div class="sub">+18.5% growth</div></div>
</div>
<!-- Report library replaces Recent Developments + Investment Thesis -->
<h2 class="section">Reports & Analysis</h2>
<div class="report-grid" style="padding:0 0 16px">
<div class="report-thumb" onclick="switchScreen('memo', document.querySelector('.screen-tabs button:nth-child(4)'))">
<div class="rt-type">Investment Memo</div>
<div class="rt-title">Membership Economics at Scale</div>
<div class="rt-meta">Draft · 2 reviews</div>
</div>
<div class="report-thumb" onclick="switchScreen('model', document.querySelector('.screen-tabs button:nth-child(3)'))">
<div class="rt-type">Financial Model</div>
<div class="rt-title">Revenue Build FY25–FY27</div>
<div class="rt-meta">Base / Bull / Bear</div>
</div>
<div class="report-thumb">
<div class="rt-type">Earnings Update</div>
<div class="rt-title">Q2 FY25 Earnings Note</div>
<div class="rt-meta">Auto-generated · Mar 6</div>
</div>
<div class="report-thumb">
<div class="rt-type">Peer Comparison</div>
<div class="rt-title">Warehouse Club Margins</div>
<div class="rt-meta">COST vs WMT, TGT, BJ</div>
</div>
<div class="report-thumb">
<div class="rt-type">Valuation</div>
<div class="rt-title">DCF + Comps Analysis</div>
<div class="rt-meta">$720–$1,280 range</div>
</div>
<div class="report-thumb">
<div class="rt-type">Risk Register</div>
<div class="rt-title">Risk & Mitigant Framework</div>
<div class="rt-meta">8 risks catalogued</div>
</div>
</div>
<h2 class="section">Source Materials</h2>
<div class="source-card"><div class="src-type">SEC Filing</div><div class="src-title">10-K Annual Report FY2024</div><div class="src-meta">Filed Oct 2024 · 142 pages · Used in 4 sections</div></div>
<div class="source-card"><div class="src-type">Earnings Transcript</div><div class="src-title">Q2 FY2025 Earnings Call</div><div class="src-meta">Mar 6, 2025 · 68 min · Used in 3 sections</div></div>
<div class="source-card"><div class="src-type">Investor Presentation</div><div class="src-title">Costco Investor Day Deck</div><div class="src-meta">Jan 2025 · 34 slides · Used in 2 sections</div></div>
<div class="source-card"><div class="src-type">Press Release</div><div class="src-title">Membership Fee Increase Announcement</div><div class="src-meta">Jul 2024 · Used in 2 sections</div></div>
</div>
</div>
<!-- ═══ SCREEN 2: FINANCIAL MODEL ═══ -->
<div class="screen" id="screen-model">
<div style="display:flex;flex-direction:column;width:100%">
<div class="toolbar">
<select id="modelTabSelect" onchange="switchModelTab(this.value)">
<option value="revenue-build" selected>Revenue Build</option>
<option value="income-stmt">Income Statement</option>
<option value="balance-sheet">Balance Sheet</option>
<option value="cash-flow">Cash Flow Statement</option>
<option value="margin-build">Margin Build</option>
<option value="tax-build">Tax Build</option>
<option value="lifo-fifo">LIFO / FIFO Conversion</option>
<option value="scenario-analysis">Scenario Analysis</option>
<option value="charts">Charts</option>
</select>
<div class="spacer"></div>
<button class="btn">Import Excel</button>
<button class="btn">AI Assist</button>
<button class="btn primary">Export to Excel</button>
</div>
<div style="display:flex;flex:1;overflow:hidden">
<div class="center" style="padding:0;overflow:auto">
<table class="spreadsheet">
<thead><tr><th style="min-width:200px">Revenue Build ($M)</th><th>FY2022A</th><th>FY2023A</th><th>FY2024A</th><th>FY2025E</th><th>FY2026E</th><th>FY2027E</th></tr></thead>
<tbody>
<tr><td>Food & Sundries</td><td>91,240</td><td>96,830</td><td>101,800</td><td class="forecast">107,910</td><td class="forecast">113,310</td><td class="forecast">118,970</td></tr>
<tr class="indent"><td style="color:var(--muted)">Growth %</td><td>6.8%</td><td>6.1%</td><td>5.1%</td><td class="forecast">6.0%</td><td class="forecast">5.0%</td><td class="forecast">5.0%</td></tr>
<tr><td>Hardlines</td><td>40,120</td><td>41,640</td><td>43,730</td><td class="forecast">45,920</td><td class="forecast">47,610</td><td class="forecast">49,370</td></tr>
<tr class="indent"><td style="color:var(--muted)">Growth %</td><td>4.2%</td><td>3.8%</td><td>5.0%</td><td class="forecast">5.0%</td><td class="forecast">3.7%</td><td class="forecast">3.7%</td></tr>
<tr><td>Fresh</td><td>33,850</td><td>36,110</td><td>38,570</td><td class="forecast">40,500</td><td class="forecast">42,530</td><td class="forecast">44,650</td></tr>
<tr class="indent"><td style="color:var(--muted)">Growth %</td><td>7.5%</td><td>6.7%</td><td>6.8%</td><td class="forecast">5.0%</td><td class="forecast">5.0%</td><td class="forecast">5.0%</td></tr>
<tr><td>Ancillary / Other</td><td>20,440</td><td>21,870</td><td>23,100</td><td class="forecast">24,260</td><td class="forecast">25,470</td><td class="forecast">26,740</td></tr>
<tr class="indent"><td style="color:var(--muted)">Growth %</td><td>5.1%</td><td>7.0%</td><td>5.6%</td><td class="forecast">5.0%</td><td class="forecast">5.0%</td><td class="forecast">5.0%</td></tr>
<tr><td>E-Commerce</td><td>12,460</td><td>14,210</td><td>15,300</td><td class="forecast">18,360</td><td class="forecast">21,210</td><td class="forecast">24,390</td></tr>
<tr class="indent"><td style="color:var(--muted)">Growth %</td><td>10.2%</td><td>14.0%</td><td>7.7%</td><td class="forecast">20.0%</td><td class="forecast">15.5%</td><td class="forecast">15.0%</td></tr>
<tr class="total"><td>Total Net Sales</td><td>198,110</td><td>210,660</td><td>222,500</td><td class="forecast">236,950</td><td class="forecast">250,130</td><td class="forecast">264,120</td></tr>
<tr class="indent"><td style="color:var(--muted)">Net Sales Growth %</td><td>6.1%</td><td>6.3%</td><td>5.6%</td><td class="forecast">6.5%</td><td class="forecast">5.6%</td><td class="forecast">5.6%</td></tr>
<tr><td>Membership Fees</td><td>4,220</td><td>4,580</td><td>4,830</td><td class="forecast">5,310</td><td class="forecast">5,630</td><td class="forecast">5,970</td></tr>
<tr class="indent"><td style="color:var(--muted)">Membership Growth %</td><td>6.5%</td><td>8.5%</td><td>5.5%</td><td class="forecast">10.0%</td><td class="forecast">6.0%</td><td class="forecast">6.0%</td></tr>
<tr class="total"><td>Total Revenue</td><td>202,330</td><td>215,240</td><td>227,330</td><td class="forecast">242,260</td><td class="forecast">255,760</td><td class="forecast">270,090</td></tr>
</tbody>
</table>
<!-- Charts panel (shown when Charts tab selected) -->
<div class="charts-panel" id="chartsPanel" style="display:none">
<div class="chart-card">
<div class="chart-title">Revenue by Segment — FY2024</div>
<svg viewBox="0 0 300 160">
<rect x="0" y="20" width="136" height="24" rx="2" fill="oklch(58% 0.16 35)"/>
<text x="142" y="37" style="font:500 10px var(--font-mono);fill:var(--fg)">Food & Sundries · $101.8B</text>
<rect x="0" y="52" width="58" height="24" rx="2" fill="oklch(52% 0.12 145)"/>
<text x="64" y="69" style="font:500 10px var(--font-mono);fill:var(--fg)">Hardlines · $43.7B</text>
<rect x="0" y="84" width="52" height="24" rx="2" fill="oklch(68% 0.1 60)"/>
<text x="58" y="101" style="font:500 10px var(--font-mono);fill:var(--fg)">Fresh · $38.6B</text>
<rect x="0" y="116" width="31" height="24" rx="2" fill="oklch(48% 0.015 60)"/>
<text x="37" y="133" style="font:500 10px var(--font-mono);fill:var(--fg)">Ancillary · $23.1B</text>
</svg>
</div>
<div class="chart-card">
<div class="chart-title">Revenue Growth — YoY %</div>
<svg viewBox="0 0 300 160">
<line x1="40" y1="10" x2="40" y2="140" stroke="var(--border)" stroke-width="1"/>
<line x1="40" y1="140" x2="280" y2="140" stroke="var(--border)" stroke-width="1"/>
<text x="10" y="15" style="font:400 8px var(--font-mono);fill:var(--muted)">10%</text>
<text x="10" y="75" style="font:400 8px var(--font-mono);fill:var(--muted)">5%</text>
<text x="10" y="140" style="font:400 8px var(--font-mono);fill:var(--muted)">0%</text>
<rect x="70" y="50" width="36" height="90" fill="oklch(96% 0.008 80)"/>
<rect x="70" y="53" width="36" height="87" rx="1" fill="var(--accent)" opacity="0.8"/>
<text x="88" y="148" style="font:500 9px var(--font-mono);fill:var(--muted);text-anchor:middle">FY22</text>
<rect x="140" y="47" width="36" height="93" fill="oklch(96% 0.008 80)"/>
<rect x="140" y="49" width="36" height="91" rx="1" fill="var(--accent)" opacity="0.8"/>
<text x="158" y="148" style="font:500 9px var(--font-mono);fill:var(--muted);text-anchor:middle">FY23</text>
<rect x="210" y="54" width="36" height="86" fill="oklch(96% 0.008 80)"/>
<rect x="210" y="57" width="36" height="83" rx="1" fill="var(--accent)"/>
<text x="228" y="148" style="font:500 9px var(--font-mono);fill:var(--muted);text-anchor:middle">FY24</text>
</svg>
</div>
<div class="chart-card">
<div class="chart-title">E-Commerce Share of Revenue</div>
<svg viewBox="0 0 300 160">
<line x1="40" y1="10" x2="40" y2="140" stroke="var(--border)" stroke-width="1"/>
<line x1="40" y1="140" x2="280" y2="140" stroke="var(--border)" stroke-width="1"/>
<text x="10" y="15" style="font:400 8px var(--font-mono);fill:var(--muted)">8%</text>
<text x="10" y="78" style="font:400 8px var(--font-mono);fill:var(--muted)">4%</text>
<text x="10" y="140" style="font:400 8px var(--font-mono);fill:var(--muted)">0%</text>
<polyline points="88,105 158,96 228,85" fill="none" stroke="var(--green)" stroke-width="2"/>
<circle cx="88" cy="105" r="3" fill="var(--green)"/>
<circle cx="158" cy="96" r="3" fill="var(--green)"/>
<circle cx="228" cy="85" r="3" fill="var(--green)"/>
<text x="88" y="148" style="font:500 9px var(--font-mono);fill:var(--muted);text-anchor:middle">FY22</text>
<text x="158" y="148" style="font:500 9px var(--font-mono);fill:var(--muted);text-anchor:middle">FY23</text>
<text x="228" y="148" style="font:500 9px var(--font-mono);fill:var(--muted);text-anchor:middle">FY24</text>
<text x="92" y="102" style="font:400 8px var(--font-mono);fill:var(--green)">5.1%</text>
<text x="162" y="93" style="font:400 8px var(--font-mono);fill:var(--green)">5.8%</text>
<text x="232" y="82" style="font:400 8px var(--font-mono);fill:var(--green)">6.9%</text>
</svg>
</div>
<div class="chart-card">
<div class="chart-title">Membership Revenue vs Operating Income</div>
<svg viewBox="0 0 300 160">
<line x1="40" y1="10" x2="40" y2="140" stroke="var(--border)" stroke-width="1"/>
<line x1="40" y1="140" x2="280" y2="140" stroke="var(--border)" stroke-width="1"/>
<rect x="70" y="95" width="24" height="45" fill="var(--accent)" opacity="0.7"/>
<rect x="94" y="48" width="24" height="92" fill="var(--green)" opacity="0.7"/>
<text x="88" y="148" style="font:500 9px var(--font-mono);fill:var(--muted);text-anchor:middle">FY22</text>
<rect x="140" y="92" width="24" height="48" fill="var(--accent)" opacity="0.7"/>
<rect x="164" y="44" width="24" height="96" fill="var(--green)" opacity="0.7"/>
<text x="158" y="148" style="font:500 9px var(--font-mono);fill:var(--muted);text-anchor:middle">FY23</text>
<rect x="210" y="88" width="24" height="52" fill="var(--accent)" opacity="0.7"/>
<rect x="234" y="38" width="24" height="102" fill="var(--green)" opacity="0.7"/>
<text x="228" y="148" style="font:500 9px var(--font-mono);fill:var(--muted);text-anchor:middle">FY24</text>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ═══ SCREEN 3: MEMO EDITOR (writing/editing) ═══ -->
<div class="screen" id="screen-memo">
<div class="left-nav memo-nav" id="memo-nav">
<button class="nav-open-btn-sidebar" id="memoNavOpenBtn" onclick="openNav()" title="Expand outline">▶</button>
<div class="nav-toggle">
<span class="nav-header">Memo Outline</span>
<button class="collapse-btn" onclick="toggleNav('memo-nav')" title="Collapse">◀</button>
</div>
<ul class="memo-outline">
<li class="h2 active">Investment Thesis</li>
<li>Key Drivers</li>
<li>Variant Perception</li>
<li class="h2">Business Quality</li>
<li>Competitive Moat</li>
<li>Membership Economics</li>
<li>Scale Advantages</li>
<li class="h2">Financial Summary</li>
<li>Revenue & Growth</li>
<li>Margins & Leverage</li>
<li>Capital Allocation</li>
<li class="h2">Valuation</li>
<li>DCF Framework</li>
<li>Comparable Analysis</li>
<li>Bull / Base / Bear</li>
<li class="h2">Risks</li>
<li>Competition</li>
<li>Margin Pressure</li>
<li>Consumer Sensitivity</li>
<li class="h2">Catalysts</li>
<li class="h2">Appendix</li>
</ul>
</div>
<div class="center" style="max-width:720px;margin:0 auto;position:relative">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:20px;position:sticky;top:0;background:var(--bg);padding:8px 0;z-index:10">
<span class="tag accent">Draft</span>
<span style="flex:1"></span>
<button class="btn sm" id="reviewToggle" onclick="toggleReviewMode()">Review Mode</button>
<button class="btn">Export PDF</button>
<button class="btn primary">Publish</button>
</div>
<div class="annotation-toolbar" id="annotationToolbar">
<button onclick="annotateHighlight()" title="Highlight">Highlight</button>
<button onclick="annotateComment()" title="Comment">Comment</button>
<button onclick="annotateBox()" title="Draw box">Box</button>
<button onclick="annotateStrikethrough()" title="Strikethrough">Strike</button>
</div>
<div class="memo-block">
<div class="block-eyebrow">COST · Nasdaq · Consumer Staples · Membership Warehouse Clubs</div>
<h1 class="display">Membership Economics at Scale: A Durable Compounder</h1>
<p class="muted" style="margin:6px 0 16px">Prepared by JD · April 2026 · Confidential</p>
</div>
<div class="memo-block" id="memo-thesis">
<div class="block-eyebrow">Investment Thesis</div>
<h3>Costco's membership model creates a self-reinforcing flywheel: scale drives lower prices, lower prices drive member loyalty, and loyalty funds operating margins through membership fees</h3>
<p class="body" data-section="thesis">
We believe Costco represents one of the highest-quality business models in global retail. The membership fee structure effectively pre-collects operating profit from a captive customer base with a 93% renewal rate, insulating the company from competitive pressure and allowing it to run merchandise at near-breakeven margins. The September 2024 fee increase — the first since 2017 — creates a multi-year tailwind to earnings that is not yet fully appreciated by consensus estimates.
<span class="citation">[1]</span>
</p>
<div class="ai-edit">
AI suggestion: "The membership fee increase in September 2024, the first since 2017, provides a structural earnings tailwind that consensus estimates have not yet fully incorporated."
<div style="margin-top:6px;display:flex;gap:6px">
<button class="btn sm">Accept</button>
<button class="btn sm">Reject</button>
<button class="btn sm">Revise</button>
</div>
</div>
</div>
<div class="memo-block" id="memo-drivers">
<div class="block-eyebrow">Key Drivers</div>
<h3>Three structural advantages compound over time</h3>
<div class="metric-grid" style="grid-template-columns:repeat(3,1fr)">
<div class="metric-cell"><div class="label">Driver 1</div><div class="value" style="font-size:14px">Fee Hike Leverage</div><div class="sub">+10% membership income in FY25</div></div>
<div class="metric-cell"><div class="label">Driver 2</div><div class="value" style="font-size:14px">Unit Growth</div><div class="sub">29 net new warehouses in FY25</div></div>
<div class="metric-cell"><div class="label">Driver 3</div><div class="value" style="font-size:14px">E-Commerce Scale</div><div class="sub">+18.5% YoY, growing contribution</div></div>
</div>
</div>
<div class="memo-block" id="memo-perception">
<div class="block-eyebrow">Variant Perception</div>
<h3>What the market is missing</h3>
<p class="body" data-section="perception">
The consensus view treats Costco as a fully-valued staple with limited upside. We see three underappreciated dynamics: first, the fee increase's impact on executive tier conversion rates is lagging and will accelerate through FY26. Second, e-commerce margins are structurally higher than in-warehouse due to reduced shrink and optimized last-mile economics. Third, international expansion — particularly in Asia — represents a $20B+ revenue opportunity with minimal incremental SG&A.
<span class="citation">[2]</span>
<span class="citation">[3]</span>
</p>
<span class="comment-pin" title="PM: Add consensus margin estimate here" onclick="alert('PM Review (2h ago):\n\nAdd a sentence on what consensus margin estimate is and how yours differs.')">1</span>
</div>
<div class="memo-block" id="memo-valuation">
<div class="block-eyebrow">Valuation</div>
<h3>Premium justified by quality, with defined downside protection</h3>
<div class="metric-grid" style="grid-template-columns:repeat(3,1fr)">
<div class="metric-cell"><div class="label">Bear Case</div><div class="value" style="color:var(--red)">$720</div><div class="sub">−22% · Multiple compression</div></div>
<div class="metric-cell"><div class="label">Base Case</div><div class="value">$1,050</div><div class="sub">+14% · Steady growth + fee lift</div></div>
<div class="metric-cell"><div class="label">Bull Case</div><div class="value" style="color:var(--green)">$1,280</div><div class="sub">+39% · Re-rating + int'l accel.</div></div>
</div>
</div>
</div>
<div class="right-panel" style="width:300px">
<div class="section-title">Review Tools</div>
<div style="display:flex;gap:6px;margin-bottom:14px">
<button class="btn sm" id="modeHighlightBtn" onclick="setAnnotationMode('highlight')">Highlight</button>
<button class="btn sm" id="modeCommentBtn" onclick="setAnnotationMode('comment')">Comment</button>
<button class="btn sm" id="modeBoxBtn" onclick="setAnnotationMode('box')">Draw Box</button>
</div>
<div style="font-size:11px;color:var(--muted);margin-bottom:16px;line-height:1.4">
Select text to highlight or comment. Use "Draw Box" to mark areas with a red bounding box.
</div>
<div class="section-title">Citations</div>
<div class="source-card"><div class="src-type">[1] SEC Filing</div><div class="src-title">10-K FY2024, p. 24 — Membership economics</div><div class="src-meta">Verified · Auto-linked</div></div>
<div class="source-card"><div class="src-type">[2] Earnings Transcript</div><div class="src-title">Q2 FY25 call — Executive tier metrics</div><div class="src-meta">Verified · AI-extracted</div></div>
<div class="source-card"><div class="src-type">[3] Analyst Report</div><div class="src-title">International expansion TAM analysis</div><div class="src-meta">External · Unverified</div></div>
<div class="section-title" style="margin-top:20px">Review Status</div>
<div style="font-size:12px;line-height:1.5">
<div style="display:flex;justify-content:space-between;padding:4px 0"><span>Investment Thesis</span><span class="tag green">Approved</span></div>
<div style="display:flex;justify-content:space-between;padding:4px 0"><span>Key Drivers</span><span class="tag accent">Review</span></div>
<div style="display:flex;justify-content:space-between;padding:4px 0"><span>Business Quality</span><span style="color:var(--muted)">Pending</span></div>
<div style="display:flex;justify-content:space-between;padding:4px 0"><span>Valuation</span><span class="tag accent">Review</span></div>
<div style="display:flex;justify-content:space-between;padding:4px 0"><span>Risks</span><span style="color:var(--muted)">Pending</span></div>
</div>
<div class="section-title" style="margin-top:20px">Comments <span style="font-weight:400;color:var(--muted)">(2)</span></div>
<div style="border:1px solid var(--border);padding:8px 10px;margin-bottom:6px;font-size:11.5px;line-height:1.4">
<div style="display:flex;justify-content:space-between;margin-bottom:2px"><span style="font-weight:600">PM Review</span><span class="comment-pin" style="width:14px;height:14px;font-size:7px">1</span></div>
<div style="color:var(--muted)">"Variant perception section is strong. Add a sentence on what consensus margin estimate is and how yours differs."</div>
<div style="font-size:10px;color:var(--muted);margin-top:3px">2 hours ago · On: Variant Perception</div>
</div>
<div style="border:1px solid var(--border);padding:8px 10px;margin-bottom:6px;font-size:11.5px;line-height:1.4">
<div style="display:flex;justify-content:space-between;margin-bottom:2px"><span style="font-weight:600">Analyst</span><span style="color:var(--red);font-size:9px">⚠ Question</span></div>
<div style="color:var(--muted)">"The $20B international TAM claim needs a source. Which markets specifically?"</div>
<div style="font-size:10px;color:var(--muted);margin-top:3px">45 min ago · On: Variant Perception</div>
</div>
</div>
</div>
<!-- ═══ SCREEN 4: AGENT ORCHESTRATION ═══ -->
<div class="screen" id="screen-agents" style="flex-direction:column">
<div class="toolbar">
<span class="toolbar-label">14 Agents</span>
<div style="display:flex;align-items:center;gap:6px;margin-left:12px">
<span class="dot running" style="width:8px;height:8px"></span>
<span style="font-size:11px;color:var(--accent)">3 running</span>
<span class="dot queued" style="width:8px;height:8px;margin-left:8px"></span>
<span style="font-size:11px;color:var(--muted)">2 queued</span>
</div>
<div class="spacer"></div>
<button class="btn">Pause All</button>
<button class="btn primary">Run Full Research</button>
</div>
<div style="display:flex;flex:1;overflow:hidden">
<div style="flex:1;overflow-y:auto">
<!-- Dependency tree chart -->
<div class="dep-tree" id="depTree">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">
<div style="display:flex;align-items:center;gap:16px">
<div style="font:600 10px/1 var(--font-mono);text-transform:uppercase;letter-spacing:0.08em;color:var(--muted)">Agent Dependency Map</div>
<div class="dep-tree-tabs" style="margin:0;border:0">
<button class="active" onclick="switchDepTab(this,'COST')">COST</button>
<button onclick="switchDepTab(this,'AMZN')">AMZN</button>
<button onclick="switchDepTab(this,'WMT')">WMT</button>
</div>
</div>
<div class="tree-status-line" style="margin:0;padding:0">
<div class="tree-legend-item"><div class="tree-legend-dot" style="border-color:var(--green);background:oklch(95% 0.04 145)"></div> Done</div>
<div class="tree-legend-item"><div class="tree-legend-dot" style="border-color:var(--accent);background:oklch(95% 0.04 35)"></div> Running</div>
<div class="tree-legend-item"><div class="tree-legend-dot" style="border-color:oklch(70% 0.06 80);background:oklch(97% 0.005 80)"></div> Queued</div>
<div class="tree-legend-item"><div class="tree-legend-dot" style="border-color:var(--border);background:var(--surface)"></div> Idle</div>
</div>
</div>
<svg width="100%" height="260" viewBox="0 0 960 260" style="overflow:visible">
<!-- ═══ Main Research Pipeline ═══ -->
<text x="10" y="18" style="font:500 9px var(--font-mono);text-transform:uppercase;letter-spacing:0.08em;fill:oklch(55% 0.01 60)">Main Research Pipeline</text>
<!-- Connection lines: vertical spine then horizontal branches -->
<line x1="60" y1="36" x2="60" y2="64" stroke="var(--border)" stroke-width="1.5"/>
<!-- SEC Filings → Company Research -->
<line x1="120" y1="48" x2="140" y2="48" stroke="var(--border)" stroke-width="1.5"/>
<!-- Company Research → Financial Modeling -->
<line x1="300" y1="48" x2="320" y2="48" stroke="var(--border)" stroke-width="1.5"/>
<!-- Financial Modeling → Valuation (vertical connector) -->
<line x1="410" y1="66" x2="410" y2="88" stroke="var(--border)" stroke-width="1.5"/>
<!-- Valuation → Memo Writing -->
<line x1="470" y1="106" x2="540" y2="106" stroke="var(--border)" stroke-width="1.5"/>
<!-- Memo Writing → Presentation -->
<line x1="680" y1="106" x2="700" y2="106" stroke="var(--border)" stroke-width="1.5"/>
<!-- Row 1: SEC Filings -->
<rect x="0" y="30" width="120" height="36" rx="3" fill="var(--surface)" stroke="var(--green)" stroke-width="1.5"/>
<circle cx="16" cy="48" r="4" fill="var(--green)"/>
<text x="26" y="52" style="font:500 10px var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;fill:var(--green)">SEC Filings</text>
<!-- Row 1: Company Research -->
<rect x="140" y="30" width="160" height="36" rx="3" fill="var(--surface)" stroke="var(--green)" stroke-width="1.5"/>
<circle cx="156" cy="48" r="4" fill="var(--green)"/>
<text x="166" y="52" style="font:500 10px var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;fill:var(--green)">Company Research</text>
<!-- Row 1: Financial Modeling -->
<rect x="320" y="30" width="180" height="36" rx="3" fill="var(--surface)" stroke="var(--accent)" stroke-width="1.5"/>
<circle cx="336" cy="48" r="4" fill="var(--accent)"/>
<text x="346" y="52" style="font:500 10px var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;fill:var(--accent)">Financial Modeling</text>
<!-- Row 2: Valuation -->
<rect x="350" y="88" width="120" height="36" rx="3" fill="var(--surface)" stroke="oklch(70% 0.06 80)" stroke-width="1.5"/>
<circle cx="366" cy="106" r="4" fill="oklch(70% 0.06 80)"/>
<text x="376" y="110" style="font:500 10px var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;fill:oklch(60% 0.04 80)">Valuation</text>
<!-- Row 2: Memo Writing -->
<rect x="540" y="88" width="140" height="36" rx="3" fill="var(--surface)" stroke="var(--border)" stroke-width="1" stroke-dasharray="4 2"/>
<circle cx="556" cy="106" r="4" fill="var(--muted)" opacity="0.5"/>
<text x="566" y="110" style="font:500 10px var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;fill:var(--muted)">Memo Writing</text>
<!-- Row 2: Presentation -->
<rect x="700" y="88" width="130" height="36" rx="3" fill="var(--surface)" stroke="var(--border)" stroke-width="1" stroke-dasharray="4 2"/>
<circle cx="716" cy="106" r="4" fill="var(--muted)" opacity="0.5"/>
<text x="726" y="110" style="font:500 10px var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;fill:var(--muted)">Presentation</text>
<!-- ═══ Competitive & Risk Pipeline ═══ -->
<text x="10" y="158" style="font:500 9px var(--font-mono);text-transform:uppercase;letter-spacing:0.08em;fill:oklch(55% 0.01 60)">Competitive & Risk</text>
<!-- Competitive connectors -->
<line x1="60" y1="172" x2="60" y2="186" stroke="var(--border)" stroke-width="1.5"/>
<line x1="80" y1="186" x2="160" y2="186" stroke="var(--border)" stroke-width="1.5"/>
<line x1="200" y1="186" x2="320" y2="186" stroke="var(--border)" stroke-width="1.5"/>
<line x1="360" y1="186" x2="420" y2="186" stroke="var(--border)" stroke-width="1.5"/>
<line x1="460" y1="186" x2="540" y2="186" stroke="var(--border)" stroke-width="1.5"/>
<!-- Earnings Call -->
<rect x="0" y="170" width="140" height="36" rx="3" fill="var(--surface)" stroke="var(--accent)" stroke-width="1.5"/>
<circle cx="16" cy="188" r="4" fill="var(--accent)"/>
<text x="26" y="192" style="font:500 10px var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;fill:var(--accent)">Earnings Call</text>
<!-- Competitive Intel -->
<rect x="160" y="170" width="160" height="36" rx="3" fill="var(--surface)" stroke="oklch(70% 0.06 80)" stroke-width="1.5"/>
<circle cx="176" cy="188" r="4" fill="oklch(70% 0.06 80)"/>
<text x="186" y="192" style="font:500 10px var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;fill:oklch(60% 0.04 80)">Competitive Intel</text>
<!-- Risk -->
<rect x="320" y="170" width="100" height="36" rx="3" fill="var(--surface)" stroke="var(--border)" stroke-width="1" stroke-dasharray="4 2"/>
<circle cx="336" cy="188" r="4" fill="var(--muted)" opacity="0.5"/>
<text x="346" y="192" style="font:500 10px var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;fill:var(--muted)">Risk</text>
<!-- Red Team -->
<rect x="420" y="170" width="120" height="36" rx="3" fill="var(--surface)" stroke="var(--border)" stroke-width="1" stroke-dasharray="4 2"/>
<circle cx="436" cy="188" r="4" fill="var(--muted)" opacity="0.5"/>
<text x="446" y="192" style="font:500 10px var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;fill:var(--muted)">Red Team</text>
<!-- ═══ Cross-cutting ═══ -->
<text x="570" y="158" style="font:500 9px var(--font-mono);text-transform:uppercase;letter-spacing:0.08em;fill:oklch(55% 0.01 60)">Cross-cutting</text>
<rect x="570" y="170" width="160" height="28" rx="3" fill="var(--surface)" stroke="var(--border)" stroke-width="1" stroke-dasharray="3 2"/>
<text x="582" y="189" style="font:500 9px var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;fill:var(--muted)">Source Verification</text>
<rect x="570" y="204" width="90" height="28" rx="3" fill="var(--surface)" stroke="var(--border)" stroke-width="1" stroke-dasharray="3 2"/>
<text x="582" y="223" style="font:500 9px var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;fill:var(--muted)">Model QA</text>
<rect x="670" y="204" width="110" height="28" rx="3" fill="var(--surface)" stroke="var(--border)" stroke-width="1" stroke-dasharray="3 2"/>
<text x="682" y="223" style="font:500 9px var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;fill:var(--muted)">Monitoring</text>
<rect x="790" y="204" width="80" height="28" rx="3" fill="var(--surface)" stroke="var(--border)" stroke-width="1" stroke-dasharray="3 2"/>
<text x="802" y="223" style="font:500 9px var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;fill:var(--muted)">Export</text>
<rect x="790" y="170" width="120" height="28" rx="3" fill="var(--surface)" stroke="var(--red)" stroke-width="1" stroke-dasharray="3 2" opacity="0.7"/>
<text x="802" y="189" style="font:400 9px var(--font-mono);fill:var(--red)">⏸ blocks Memo</text>
</svg>
</div>
<div class="agent-grid">
<div class="agent-tile" onclick="selectAgent(this, 'cr')">
<div class="tile-icon">CR</div>
<div class="tile-name">Company Research</div>
<div class="tile-role">Structured profiles from filings, transcripts, external data</div>
<div class="tile-status"><span class="dot done"></span> <span style="color:var(--green)">Completed</span></div>
<div class="progress-bar"><div class="fill" style="width:100%;background:var(--green)"></div></div>
<div class="tile-actions"><button class="btn sm">View Output</button><button class="btn sm">Re-run</button></div>
</div>
<div class="agent-tile" onclick="selectAgent(this, 'fm')">
<div class="tile-icon">FM</div>
<div class="tile-name">Financial Modeling</div>
<div class="tile-role">Revenue builds, margin models, three-statement frameworks</div>
<div class="tile-status"><span class="dot running"></span> <span style="color:var(--accent)">Running</span></div>
<div class="progress-bar"><div class="fill" style="width:62%"></div></div>
<div class="tile-actions"><button class="btn sm">Pause</button><button class="btn sm">Inspect</button></div>
</div>
<div class="agent-tile" onclick="selectAgent(this, 'sf')">
<div class="tile-icon">SF</div>
<div class="tile-name">SEC Filings</div>
<div class="tile-role">Segment data, KPIs, risk factors, accounting policies</div>
<div class="tile-status"><span class="dot running"></span> <span style="color:var(--accent)">Running</span></div>
<div class="progress-bar"><div class="fill" style="width:45%"></div></div>
<div class="tile-actions"><button class="btn sm">Pause</button><button class="btn sm">Inspect</button></div>
</div>
<div class="agent-tile" onclick="selectAgent(this, 'ec')">
<div class="tile-icon">EC</div>
<div class="tile-name">Earnings Call</div>
<div class="tile-role">Management tone, guidance, KPIs, Q&A themes</div>
<div class="tile-status"><span class="dot running"></span> <span style="color:var(--accent)">Running</span></div>
<div class="progress-bar"><div class="fill" style="width:78%"></div></div>
<div class="tile-actions"><button class="btn sm">Pause</button><button class="btn sm">Inspect</button></div>
</div>
<div class="agent-tile" onclick="selectAgent(this, 'ci')">
<div class="tile-icon">CI</div>
<div class="tile-name">Competitive Intel</div>
<div class="tile-role">Peer analysis, market positioning, competitive threats</div>
<div class="tile-status"><span class="dot queued"></span> <span style="color:oklch(60% 0.02 80)">Queued</span></div>
<div class="progress-bar"><div class="fill" style="width:0%"></div></div>
<div class="tile-actions"><button class="btn sm">Start Now</button><button class="btn sm">Configure</button></div>
</div>
<div class="agent-tile" onclick="selectAgent(this, 'va')">
<div class="tile-icon">VA</div>
<div class="tile-name">Valuation</div>
<div class="tile-role">DCF, trading comps, scenario analysis, multiples</div>
<div class="tile-status"><span class="dot queued"></span> <span style="color:oklch(60% 0.02 80)">Queued</span></div>
<div class="progress-bar"><div class="fill" style="width:0%"></div></div>
<div class="tile-actions"><button class="btn sm">Start Now</button><button class="btn sm">Configure</button></div>
</div>
<div class="agent-tile" onclick="selectAgent(this, 'rk')">
<div class="tile-icon">RK</div><div class="tile-name">Risk</div>
<div class="tile-role">Business, financial, competitive, regulatory risks</div>
<div class="tile-status"><span class="dot idle"></span> <span style="color:var(--muted)">Idle</span></div>
<div class="progress-bar"><div class="fill" style="width:0%"></div></div>
<div class="tile-actions"><button class="btn sm">Start</button><button class="btn sm">Configure</button></div>
</div>
<div class="agent-tile" onclick="selectAgent(this, 'mw')">
<div class="tile-icon">MW</div><div class="tile-name">Memo Writing</div>
<div class="tile-role">Investment memos, research reports, IC memos</div>
<div class="tile-status"><span class="dot idle"></span> <span style="color:var(--muted)">Idle</span></div>
<div class="progress-bar"><div class="fill" style="width:0%"></div></div>
<div class="tile-actions"><button class="btn sm">Start</button><button class="btn sm">Configure</button></div>
</div>
<div class="agent-tile" onclick="selectAgent(this, 'pa')">
<div class="tile-icon">PA</div><div class="tile-name">Presentation</div>
<div class="tile-role">IC presentation drafts, slide outlines, exhibits</div>
<div class="tile-status"><span class="dot idle"></span> <span style="color:var(--muted)">Idle</span></div>
<div class="progress-bar"><div class="fill" style="width:0%"></div></div>
<div class="tile-actions"><button class="btn sm">Start</button><button class="btn sm">Configure</button></div>
</div>
<div class="agent-tile" onclick="selectAgent(this, 'mn')">
<div class="tile-icon">MN</div><div class="tile-name">Monitoring</div>
<div class="tile-role">Filing alerts, thesis changes, earnings events</div>
<div class="tile-status"><span class="dot idle"></span> <span style="color:var(--muted)">Idle</span></div>
<div class="progress-bar"><div class="fill" style="width:0%"></div></div>
<div class="tile-actions"><button class="btn sm">Start</button><button class="btn sm">Configure</button></div>
</div>
<div class="agent-tile" onclick="selectAgent(this, 'sv')">
<div class="tile-icon">SV</div><div class="tile-name">Source Verification</div>
<div class="tile-role">Citation checking, source reliability, cross-referencing</div>
<div class="tile-status"><span class="dot idle"></span> <span style="color:var(--muted)">Idle</span></div>
<div class="progress-bar"><div class="fill" style="width:0%"></div></div>
<div class="tile-actions"><button class="btn sm">Start</button><button class="btn sm">Configure</button></div>
</div>
<div class="agent-tile" onclick="selectAgent(this, 'rt')">
<div class="tile-icon">RT</div><div class="tile-name">Red Team</div>
<div class="tile-role">Thesis challenges, assumption stress-testing, bear cases</div>
<div class="tile-status"><span class="dot idle"></span> <span style="color:var(--muted)">Idle</span></div>
<div class="progress-bar"><div class="fill" style="width:0%"></div></div>
<div class="tile-actions"><button class="btn sm">Start</button><button class="btn sm">Configure</button></div>
</div>
<div class="agent-tile" onclick="selectAgent(this, 'ex')">
<div class="tile-icon">EX</div><div class="tile-name">Export</div>
<div class="tile-role">PDF, Excel, PowerPoint export pipelines</div>
<div class="tile-status"><span class="dot idle"></span> <span style="color:var(--muted)">Idle</span></div>
<div class="progress-bar"><div class="fill" style="width:0%"></div></div>
<div class="tile-actions"><button class="btn sm">Start</button><button class="btn sm">Configure</button></div>
</div>
<div class="agent-tile" onclick="selectAgent(this, 'qa')">
<div class="tile-icon">QA</div><div class="tile-name">Model QA</div>
<div class="tile-role">Formula auditing, balance sheet checks, sanity tests</div>
<div class="tile-status"><span class="dot idle"></span> <span style="color:var(--muted)">Idle</span></div>
<div class="progress-bar"><div class="fill" style="width:0%"></div></div>
<div class="tile-actions"><button class="btn sm">Start</button><button class="btn sm">Configure</button></div>
</div>
</div>
<div class="feed" style="max-height:240px;border-top:1px solid var(--border)">
<div class="section-title">Activity Feed</div>
<div class="feed-item"><div class="feed-time">2m ago</div><div class="feed-agent">SEC Filings</div><div class="feed-msg">Extracting segment revenue breakdown from 10-K FY2024. Found 4 reportable merchandise categories.</div></div>
<div class="feed-item"><div class="feed-time">4m ago</div><div class="feed-agent">Earnings Call</div><div class="feed-msg">Processing Q2 FY2025 transcript. Identified 12 key topics, 6 guidance items.</div></div>
<div class="feed-item"><div class="feed-time">7m ago</div><div class="feed-agent">Financial Modeling</div><div class="feed-msg">Revenue build initialized using segment data from SEC Filings Agent.</div></div>
<div class="feed-item"><div class="feed-time">12m ago</div><div class="feed-agent">Company Research</div><div class="feed-msg">Company overview complete. Structured profile includes business model, segments, KPIs.</div></div>
<div class="feed-item"><div class="feed-time">18m ago</div><div class="feed-agent">System</div><div class="feed-msg">Research workspace initialized for COST. 4 sources ingested.</div></div>
</div>
</div>
<!-- Agent detail panel -->
<div class="agent-detail" id="agentDetail">
<div class="detail-header">
<div><h3 id="detailAgentName">SEC Filings Agent</h3><div class="detail-status" id="detailAgentStatus">Running · 45% complete</div></div>
<button class="close-detail" onclick="closeAgentDetail()">✕</button>
</div>
<div class="detail-body">
<div class="detail-section">
<div class="ds-label">Current Task</div>
<div style="font-size:12.5px;line-height:1.5">Extracting segment revenue data, KPI tables, and risk factor summaries from 10-K FY2024 filing (142 pages).</div>
</div>
<div class="detail-section">
<div class="ds-label">Inputs (from upstream)</div>
<div style="display:flex;flex-wrap:wrap;gap:4px">
<span class="dep-tag active">10-K FY2024 filing</span>
<span class="dep-tag active">Proxy statement</span>
<span class="dep-tag">Company website</span>
</div>
</div>
<div class="detail-section">
<div class="ds-label">Outputs (feeds downstream)</div>
<div style="display:flex;flex-wrap:wrap;gap:4px">
<span class="dep-tag">Company Research</span>
<span class="dep-tag">Financial Modeling</span>
<span class="dep-tag">Risk</span>
</div>
</div>
<div class="detail-section">
<div class="ds-label">Execution Log</div>
<div class="log-entry"><div class="log-time">10:42 AM</div><div>Parsed MD&A section. Found segment disclosures on pages 24–28.</div></div>
<div class="log-entry"><div class="log-time">10:41 AM</div><div>Extracted consolidated income statement data for FY22–FY24.</div></div>
<div class="log-entry"><div class="log-time">10:40 AM</div><div>Initialized PDF parser on 10-K filing document.</div></div>
<div class="log-entry"><div class="log-time">10:39 AM</div><div>Task started. Assigned: SEC Filings Agent.</div></div>
</div>
<div class="detail-section">
<div class="ds-label">Actions</div>
<div style="display:flex;gap:6px">
<button class="btn sm">Pause</button>
<button class="btn sm">Restart</button>
<button class="btn sm" onclick="openAgentOverlay('sf')">Full Screen</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ═══════════ COMMAND BAR (agent carousel) ═══════════ -->
<div class="command-bar">
<div class="agent-carousel" id="agentCarousel">
<button class="carousel-arrow" id="carouselPrev" onclick="carouselPrev()">◀</button>
<div class="carousel-strip" onclick="openAgentOverlay(activeAgents[carouselIdx])">
<div class="agent-dot"></div>
<div class="carousel-info">
<div class="carousel-name" id="carouselName">SEC Filings Agent</div>
<div class="carousel-action" id="carouselAction">Extracting segment data from 10-K…</div>
</div>
<div class="carousel-counter" id="carouselCounter">1 / 3</div>
</div>
<button class="carousel-arrow" id="carouselNext" onclick="carouselNext()">▶</button>
</div>
<div class="chat-area">
<span class="prompt-icon">&gt;</span>
<input placeholder="Ask about COST, instruct an agent, or request an analysis…" />
</div>
<span class="hint">⌘K</span>
</div>
<!-- ═══════════ AGENT FULLSCREEN OVERLAY ═══════════ -->
<div class="overlay" id="agentOverlay">
<div class="overlay-header">
<button class="btn sm" onclick="closeAgentOverlay()">← Back</button>
<h2 id="overlayAgentName">SEC Filings Agent</h2>
<span class="overlay-status" id="overlayAgentStatus">Running · 45%</span>
<div class="spacer"></div>
<button class="btn sm">Pause</button>
<button class="btn sm">Restart</button>
</div>
<!-- Agent tabs (replaces sidebar) -->
<div class="overlay-agent-tabs">
<button class="oat-btn active" onclick="switchOverlayTab(this,'sf')">
<div class="oat-dot" style="background:var(--accent)"></div> SEC Filings
</button>
<button class="oat-btn" onclick="switchOverlayTab(this,'fm')">
<div class="oat-dot" style="background:var(--accent)"></div> Financial Modeling
</button>
<button class="oat-btn" onclick="switchOverlayTab(this,'ec')">
<div class="oat-dot" style="background:var(--accent)"></div> Earnings Call
</button>
<button class="oat-btn" onclick="switchOverlayTab(this,'cr')" style="opacity:0.7">
<div class="oat-dot" style="background:var(--green)"></div> Company Research
</button>
</div>
<div class="overlay-body" style="flex-direction:column">
<div style="display:flex;flex:1;overflow:hidden">
<div class="output-col" style="display:flex;flex-direction:column">
<div style="flex:1;overflow-y:auto;padding:24px">
<div class="section-title">Live Output</div>
<div style="border:1px solid var(--border);padding:16px;font-size:12.5px;line-height:1.6">
<p style="margin-bottom:8px"><strong>Segment Revenue — FY2024</strong></p>
<p style="color:var(--muted);font-size:12px;margin-bottom:12px">Extracted from 10-K, Item 6, page 27</p>
<table class="spreadsheet" style="font-size:11px">
<thead><tr><th style="text-align:left">Segment</th><th>FY22</th><th>FY23</th><th>FY24</th></tr></thead>
<tbody>
<tr><td>Food & Sundries</td><td>$91.2B</td><td>$96.8B</td><td>$101.8B</td></tr>
<tr><td>Hardlines</td><td>$40.1B</td><td>$41.6B</td><td>$43.7B</td></tr>
<tr><td>Fresh</td><td>$33.9B</td><td>$36.1B</td><td>$38.6B</td></tr>
<tr><td>Ancillary</td><td>$20.4B</td><td>$21.9B</td><td>$23.1B</td></tr>
</tbody>
</table>
<p style="margin-top:12px;color:var(--muted);font-style:italic;font-size:11px">Extracting risk factors next…</p>
</div>
</div>
<!-- Chat input at bottom -->
<div class="overlay-chat">
<span class="oc-label">&gt;</span>
<input placeholder="Send an interrupt or instruction to this agent…" />
<button>Send</button>
</div>
</div>
<div class="trace-col">
<div class="section-title">Execution Trace</div>
<div class="trace-step"><div class="step-num">01</div><div class="step-content"><div class="step-label">Load filing document</div><div class="step-detail">Source: 10-K FY2024, 142 pages · 2.1 MB</div></div></div>
<div class="trace-step"><div class="step-num">02</div><div class="step-content"><div class="step-label">Parse table of contents</div><div class="step-detail">Identified 8 sections, 4 containing financial data</div></div></div>
<div class="trace-step"><div class="step-num">03</div><div class="step-content"><div class="step-label">Extract consolidated statements</div><div class="step-detail">Income statement, balance sheet, cash flow · FY22–FY24</div></div></div>
<div class="trace-step"><div class="step-num">04</div><div class="step-content"><div class="step-label">Parse segment disclosures</div><div class="step-detail">Item 6, pages 24–28 · 4 merchandise categories identified</div></div></div>
<div class="trace-step"><div class="step-num">05</div><div class="step-content"><div class="step-label" style="color:var(--accent)">Extract risk factors…</div><div class="step-detail">In progress · Parsing Item 1A</div></div></div>
<div class="trace-step" style="opacity:0.4"><div class="step-num">06</div><div class="step-content"><div class="step-label">Extract KPIs</div><div class="step-detail">Queued</div></div></div>
<div class="trace-step" style="opacity:0.4"><div class="step-num">07</div><div class="step-content"><div class="step-label">Summarize MD&A commentary</div><div class="step-detail">Queued</div></div></div>
</div>
</div>
</div>
</div>
<!-- ═══════════ PROFILE EDITOR OVERLAY ═══════════ -->
<div class="profile-overlay" id="profileOverlay">
<div class="profile-card">
<div class="profile-header">
<div class="profile-avatar">JD</div>
<div>
<div class="profile-name" id="profileDisplayName">James Davidson</div>
<div class="profile-role">Senior Analyst · Meridian Capital</div>
</div>
</div>
<div class="profile-body">
<div class="profile-field">
<label>Full Name</label>
<input type="text" value="James Davidson" id="profileName" />
</div>
<div class="profile-field">
<label>Email</label>
<input type="text" value="jd@meridiancap.com" />
</div>
<div class="profile-field">
<label>Title</label>
<input type="text" value="Senior Analyst" />
</div>
<div class="profile-field">
<label>Default Sector Focus</label>
<input type="text" value="Consumer Staples, Retail" />
</div>
</div>
<div class="profile-footer">
<button class="btn" onclick="closeProfile()">Cancel</button>
<button class="btn primary" onclick="saveProfile()">Save</button>
</div>
</div>
</div>
<!-- ═══════════ SETTINGS OVERLAY ═══════════ -->
<div class="settings-overlay" id="settingsOverlay">
<div class="settings-header">
<button class="btn sm" onclick="closeSettings()">← Back</button>
<h2>Settings</h2>
<div class="spacer"></div>
</div>
<div class="settings-body">
<div class="settings-nav">
<button class="active">Agents</button>
<button>Data Sources</button>
<button>Export</button>
<button>Display</button>
<button>Advanced</button>
</div>
<div class="settings-content">
<div class="settings-section">
<h3>Agent Behavior</h3>
<div class="sd-row"><span>Auto-run agents on new company</span><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
<div class="sd-row"><span>Stream outputs live</span><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
<div class="sd-row"><span>Require approval before model edits</span><div class="toggle" onclick="this.classList.toggle('on')"></div></div>
<div class="sd-row"><span>Require approval before memo edits</span><div class="toggle" onclick="this.classList.toggle('on')"></div></div>
<div class="sd-row"><span>Run agents in parallel where possible</span><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
<div class="sd-row"><span>Show agent notifications</span><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
</div>
<div class="settings-section">
<h3>Agent Pipeline</h3>
<div class="sd-row"><span>Default pipeline</span><select><option>Full Research</option><option>Quick Scan</option><option>Deep Dive</option><option>Custom</option></select></div>
<div class="sd-row"><span>Max concurrent agents</span><select><option>3</option><option>5</option><option>7</option><option>Unlimited</option></select></div>
</div>
<div class="settings-section">
<h3>Data Sources</h3>
<div class="sd-row"><span>SEC EDGAR filings</span><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
<div class="sd-row"><span>Earnings call transcripts</span><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
<div class="sd-row"><span>Market data feeds</span><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
<div class="sd-row"><span>External analyst research</span><div class="toggle" onclick="this.classList.toggle('on')"></div></div>
<div class="sd-row"><span>Company press releases</span><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
<div class="sd-row"><span>Insider transaction data</span><div class="toggle" onclick="this.classList.toggle('on')"></div></div>
</div>
<div class="settings-section">
<h3>Export Defaults</h3>
<div class="sd-row"><span>Include reviewer comments in PDF</span><div class="toggle" onclick="this.classList.toggle('on')"></div></div>
<div class="sd-row"><span>Brand header on PDF exports</span><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
<div class="sd-row"><span>Excel formulas (not static values)</span><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
<div class="sd-row"><span>PowerPoint speaker notes</span><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
<div class="sd-row"><span>PDF page numbers</span><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
</div>
<div class="settings-section">
<h3>Display</h3>
<div class="sd-row"><span>Theme</span><select><option>Light (editorial)</option><option>Dark</option><option>System</option></select></div>
<div class="sd-row"><span>Density</span><select><option>Comfortable</option><option>Compact</option><option>Dense</option></select></div>
<div class="sd-row"><span>Default font size</span><select><option>13px</option><option>14px</option><option>15px</option></select></div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink