Video Dashboard

Vendor Chart.js locally

Use the exact reviewed Chart.js package and commit the browser asset, license, package.json, and lockfile. Package-manager integrity checks apply to the exact tarball, and --ignore-scripts prevents lifecycle execution:

npm install --ignore-scripts --save-exact chart.js@4.5.1
mkdir -p web/vendor
cp node_modules/chart.js/dist/chart.umd.min.js web/vendor/chart-4.5.1.umd.min.js
cp node_modules/chart.js/LICENSE.md web/vendor/CHARTJS-LICENSE.md

Load only the same-origin file:

<script src="./vendor/chart-4.5.1.umd.min.js"></script>

Use a local/system font stack; do not fetch Google Fonts or any other runtime font stylesheet.

Build a single HTML file at web/index.html with:

• Static architecture: local Chart.js, inline application CSS/JS, and no runtime package CDN
• Inline SVG favicon (no external files needed)
• Dark theme with editorial typography
• Platform color-coding: Twitter blue, TikTok pink, YouTube red, Instagram gradient, Facebook blue
• Data loading: Fetch JSON from relative paths (../analysis/*.json, ../metadata.json)
• Graceful degradation: Show "data not yet available" for missing sections

DOM safety is mandatory. Build untrusted labels, titles, excerpts, URLs, and OCR output with document.createElement() and textContent. Validate URL schemes before assigning href. Never interpolate external data through innerHTML, outerHTML, insertAdjacentHTML, inline event handlers, or JavaScript-string templates. Implement search highlighting by splitting text into text nodes and <mark> elements, not by injecting replacement HTML.

Data normalization layer: The dashboard should normalize field names on load to handle variations in analysis script output. Map common patterns:

• overall / frequencies (topics)
• per_video / by_video
• per_platform / by_platform

Dashboard sections (based on user selection):

• Overview stats with large monospace numbers
• Filterable video grid with platform badges and transcript accordion
• Full-text transcript search with debounced input and highlighted matches
• Topic frequency horizontal bar chart (Chart.js) with clickable topic pills
• Sentiment doughnut chart + per-platform stacked bars
• Cross-platform comparison panels with top word lists

Step 5: Test the dashboard

Start a local server and verify:

cd {project-dir} && python -m http.server --bind 127.0.0.1 8888
# Open http://localhost:8888/web/index.html

Check: charts render, video grid populates, search works, platform filters work across sections.

Step 6: Commit and report

Commit the analysis script, JSON outputs, and dashboard. Report key findings:

• Top topics with counts
• Dominant tone distribution
• Cross-platform patterns (which platform has longest videos, most words, etc.)

Key lessons

• Field name normalization is critical: If the analysis script and dashboard are written separately (or by different subagents), field names will diverge. Add a normalization layer in the dashboard's data loading step.
• total_words not automatic: The analysis script may not calculate total word count. Add it to summary.json by counting words across all transcript .txt files.
• Cross-platform top_words format: The analysis script may output {"word": count} objects, but the dashboard may expect [{word, count}] arrays. Normalize on load.
• Stopword filtering matters: Remove common English stopwords from cross-platform top words, or the lists will be useless (all "the", "is", "and").