Screenshots

All screenshots on this page are automatically generated by a Playwright spec on every version release. The GitHub Actions workflow builds the extension, loads it in a headless browser, captures each tab and the popup, then deploys the images here.

🎬 Screen-cast

TrendCast Dashboard Tour — A 30-second screen-cast walking through all nine dashboard tabs, demonstrating the theme toggle, export menu, and collect-now action.

🖥️ Dashboard

dashboard

Community

Links to the TrendCast Telegram group and GitHub Issues for bug reports and feature requests.

dashboard

Correlation Network Graph

Force-directed network graph showing how social signals, news, and market contracts connect. Directed edges show causal flow: News → Social, Social → Market, News → Market. Hover highlights connected nodes.

dashboard

Empty State

The dashboard before any data has been collected, showing the empty-state message.

dashboard

FAQ — Correlation Engines

In-app FAQ explaining the six correlation engines (Heuristic, Embedding, Sentiment, Zero-Shot, NER, LLM) and how to choose between them.

dashboard

Hype Feed — Dark Mode

The default new-tab dashboard showing trending social signals from X, Reddit, and TikTok. Tile colour reflects sentiment (green = bullish, red = bearish). Cards are sorted by virality score.

dashboard

Hype Feed — Light Mode

The same Hype Feed in light mode. TrendCast supports a full dark/light theme toggle that persists across sessions.

dashboard

Dashboard Header

Close-up of the sticky header showing the TrendCast logo, live stats (markets/signals/news counts), build version, last collection time, Export dropdown, theme toggle, and Collect Now button.

dashboard

History Charts

Historical collection trends rendered as interactive SVG line charts. Metric selector switches between Markets, Signals, News, Correlations, and Avg Sentiment. Hover shows a tooltip with exact values and a detail panel with top items.

dashboard

Market Odds Treemap

Prediction market contracts from Polymarket and Kalshi displayed as a treemap. Tile size is proportional to 24h volume; colour reflects Yes probability. Star toggle adds a market to your watchlist.

dashboard

News Feed

Latest headlines from BBC, CNN, Yahoo Finance, and Google News. Each card shows the source badge, headline, summary, and publish time.

dashboard

Settings

Configure collection interval, enabled data sources, highlight threshold, correlation engine, and ML model. No API keys needed — everything runs client-side.

dashboard

Watchlist

Markets you have starred for personal tracking. The watchlist persists in chrome.storage.local across sessions.

🔧 Popup

popup

Popup — FAQ

Compact FAQ view inside the popup for quick reference.

popup

Popup — Home

The toolbar popup quick-launcher. Shows Open Dashboard button, Collect Now button, quick stats (markets/signals/news), storage usage indicator, and active source badges.

popup

Popup — Settings

Settings panel inside the popup for quick access to source toggles and collection interval.

📐 Odds Overlay

overlay

Odds Overlay on Social Platforms

When browsing X, Reddit, or TikTok, a floating overlay shows correlated prediction market odds for the content you are reading. The overlay is scoped and high-z-index so it stays above the platform UI.

How screenshots are generated

1. The docs.yml GitHub Actions workflow triggers on version tags (v*).

2. It installs Bun, builds the extension in debug mode, and serves it via sirv-cli on 127.0.0.1:4173.

3. A dedicated Playwright config (playwright.screenshots.config.ts) runs tests/screenshots/screenshots.spec.ts which:

   • Loads the dashboard and popup with mock browser APIs and seeded data.
   • Navigates to each tab and captures a full-page PNG.
   • Records a WebM screen-cast of a full tab tour.
   • Builds a mock social page to capture the odds overlay.

4. A manifest generator (scripts/generate-screenshot-manifest.ts) scans the output directory and writes data/screenshots.json.

5. Hugo builds the site and deploys to GitHub Pages.

See the screenshot spec source and the workflow definition.