Skip to content

CLAUDE.md

Latest commit

 

History

History
135 lines (92 loc) · 6.52 KB

CLAUDE.md

File metadata and controls

135 lines (92 loc) · 6.52 KB

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Development

Next.js app (active development):

npm run dev          # starts at http://localhost:3000
npm run build        # production build
npm run start        # serve production build

E2E tests (Playwright, targets Next.js at :3000):

npm run test:e2e            # run all tests headless
npm run test:e2e:ui         # open Playwright UI
npm run test:e2e:debug      # step through a test
npm run test:e2e:report     # open last HTML report
# Run a single spec:
npx playwright test e2e/smoke.spec.ts

Playwright auto-starts npm run dev if no server is running on :3000. Tests use --use-fake-device-for-media-stream so no real camera/mic is needed.

Architecture

Next.js app (app/, components/, lib/)

The active codebase. Next.js 14 App Router, TypeScript, Tailwind CSS, shadcn/ui (Radix UI).

State: lib/webrtc-context.tsx — a single WebRTCProvider wraps the whole app (app/layout.tsx). It holds AppState in a useReducer and exposes useWebRTC() to all components. The RTCPeerConnection lives in a useRef (not in state), owned exclusively by WebRTCProvider. Components never create or destroy the PC directly.

Routes (App Router):

  • / → app/page.tsx — main call flow (signaling + ICE + media + metrics)
  • /sdp → SDP annotator (standalone, no PC needed)
  • /ice → ICE server tester
  • /media → media device controls
  • /datachannel → loopback data channel test

Component structure:

components/
├── layout/       # AppHeader, AppSidebar, StatusBar, SessionHeader
├── workbench/    # Feature panels: SignalingCard, IceServersCard, MediaCard,
│                 # DatachannelCard, MetricsCard, TimelineCanvas, EventLog,
│                 # SnapshotCard, LiveStatsBar, CallPageContent
└── ui/           # shadcn/ui primitives (Button, Input, Textarea, Select, …)

WorkbenchCard is the base panel wrapper used by all feature cards. Pass alwaysOpen to disable collapse (used on the /media page).

MediaCard state isolation: Each MediaCard instance owns its own local state (tracks, device selections). The two instances — call page and media page — are fully independent and never share state. The call page instance feeds its tracks to the shared context via the onTracksChange prop so SignalingCard can call pc.addTrack() before createOffer. The media page instance passes no onTracksChange and stays self-contained.

SignalingCard.createOffer reads state.localTracks and calls addTrack on the new PC before generating the offer SDP.

Metrics history is capped at 60 samples via slice(-60) in the reducer (ADD_METRIC action). Match this when adding new metric fields.

RESET_SESSION action preserves iceServers, role, trickleIce, snapshotFormat, redactPII, and metricsPollInterval — reset wipes everything else including localTracks. Panel open/closed state is persisted to localStorage directly by WorkbenchCard, not via reducer state.

Key implementation details

DOM safety: All WebRTC-sourced or user-supplied strings (SDP, candidate strings, device labels, data channel messages) must use textContent / createTextNode() — never innerHTML. Avoid dangerouslySetInnerHTML.

Snapshot redaction: TURN credential fields are always stripped. When "Redact PII" is on (default), IPv4/IPv6 addresses in candidate strings and device labels are masked.

Signaling state guards: createOffer / createAnswer check pc.signalingState before proceeding. setRemoteDescription validates the SDP first. All async PC calls are wrapped in try/catch and surface errors to the UI.

CSS conventions

Tailwind utility classes. Custom tokens in app/globals.css. Accent: --accent: #5e6ad2. Status colours follow the same naming: wb-connected, wb-connecting, wb-failed, wb-ice-prflx. Border-radius scale (defined in tailwind.config.ts): sm 4px, md 6px (default), lg 8px, pill 20px. The cn() helper from lib/utils.ts merges classes.

Deployment

Static export to GitHub Pages. next.config.mjs sets output: "export", trailingSlash: true, and images: { unoptimized: true }. npm run build writes the static site to out/. Configure GitHub Pages with Settings → Pages → Source: GitHub Actions, or push out/ to a gh-pages branch. The .nojekyll file prevents Jekyll processing.

Security headers (CSP, Permissions-Policy, X-Content-Type-Options) are set via meta tags in app/layout.tsx since GitHub Pages cannot configure HTTP headers.

Guidelines

1. Think Before Coding

Don't assume. Don't hide confusion. Surface tradeoffs.

Before implementing:

  • State your assumptions explicitly. If uncertain, ask.
  • If multiple interpretations exist, present them - don't pick silently.
  • If a simpler approach exists, say so. Push back when warranted.
  • If something is unclear, stop. Name what's confusing. Ask.

2. Simplicity First

Minimum code that solves the problem. Nothing speculative.

  • No features beyond what was asked.
  • No abstractions for single-use code.
  • No "flexibility" or "configurability" that wasn't requested.
  • No error handling for impossible scenarios.
  • If you write 200 lines and it could be 50, rewrite it.

Ask yourself: "Would a senior engineer say this is overcomplicated?" If yes, simplify.

3. Surgical Changes

Touch only what you must. Clean up only your own mess.

When editing existing code:

  • Don't "improve" adjacent code, comments, or formatting.
  • Don't refactor things that aren't broken.
  • Match existing style, even if you'd do it differently.
  • If you notice unrelated dead code, mention it - don't delete it.

When your changes create orphans:

  • Remove imports/variables/functions that YOUR changes made unused.
  • Don't remove pre-existing dead code unless asked.

The test: Every changed line should trace directly to the user's request.

4. Goal-Driven Execution

Define success criteria. Loop until verified.

Transform tasks into verifiable goals:

  • "Add validation" → "Write tests for invalid inputs, then make them pass"
  • "Fix the bug" → "Write a test that reproduces it, then make it pass"
  • "Refactor X" → "Ensure tests pass before and after"

For multi-step tasks, state a brief plan:

1. [Step] → verify: [check]
2. [Step] → verify: [check]
3. [Step] → verify: [check]

Strong success criteria let you loop independently. Weak criteria ("make it work") require constant clarification.