outofcontext

Created: May 14, 2026
Last commit: June 15, 2026
TypeScript86.6%
CSS12.9%
HTML0.5%
README.md

outofcontext

Drop into any video without the prerequisite context.

A browser extension that overlays minimal frosted-glass concept bubbles on videos — lectures, podcasts, vlogs, news clips. Bubbles surface quietly as concepts come up; click one and it morphs into a glass card with an on-demand LLM explanation and a link back to where the concept was first introduced in your library. A home page aggregates everything you've annotated.

  • Spec: SPEC.md
  • Design: Figma — outofcontext (file wJS1H6oi3yn4AWTbkDN9Aa; "Extension Overlay" + home page frames)
  • Stack: WXT · React 19 · TypeScript · motion (framer-motion) · Dexie · Anthropic API (claude-opus-4-8)

Status

  • M0 — overlay skeleton: done. Shadow-DOM overlay, glass tokens, concepts pill, right-rail bubbles driven by currentTime, and the bubble→card layoutId morph.
  • M1 — transcript + concept pass: done. YouTube caption fetch, background worker, a provider-agnostic LLM layer (Anthropic / OpenAI / custom OpenAI-compatible), options page (provider · key · model · density), structured pass-1 concept mapping, and Dexie persistence.
  • M2 — streaming on-click explanation: done. Click a bubble → grounded 2–3 sentence explanation streamed over a Port (shimmer → fading chunks), with prompt caching of the transcript block, an explanation cache keyed by (videoId, conceptName), and a retry affordance if the stream is interrupted.
  • M3 — home / annotated library: in progress. Toolbar button opens home.html: a Library grid (search · filters) where selecting a video opens its connection neighborhood (videos sharing concepts, ranked), and a Concepts index (search · sort) that drills into where each concept was first introduced and every video it appears in. Connections are derived from shared concepts — scales by rendering one ego-network at a time.

LLM provider is configurable — bring your own model. See SPEC.md §8 for the full milestone list.