Add Claude Code GitHub Workflow

.github/workflows/claude-code-review.yml

@@ -0,0 +1,78 @@
+name: Claude Code Review
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+    # Optional: Only run on specific file changes
+    # paths:
+    #   - "src/**/*.ts"
+    #   - "src/**/*.tsx"
+    #   - "src/**/*.js"
+    #   - "src/**/*.jsx"
+
+jobs:
+  claude-review:
+    # Optional: Filter by PR author
+    # if: |
+    #   github.event.pull_request.user.login == 'external-contributor' ||
+    #   github.event.pull_request.user.login == 'new-developer' ||
+    #   github.event.pull_request.author_association == 'FIRST_TIME_CONTRIBUTOR'
+
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Run Claude Code Review
+        id: claude-review
+        uses: anthropics/claude-code-action@beta
+        with:
+          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+
+          # Optional: Specify model (defaults to Claude Sonnet 4, uncomment for Claude Opus 4)
+          # model: "claude-opus-4-20250514"
+
+          # Direct prompt for automated review (no @claude mention needed)
+          direct_prompt: |
+            Please review this pull request and provide feedback on:
+            - Code quality and best practices
+            - Potential bugs or issues
+            - Performance considerations
+            - Security concerns
+            - Test coverage
+            
+            Be constructive and helpful in your feedback.
+
+          # Optional: Use sticky comments to make Claude reuse the same comment on subsequent pushes to the same PR
+          # use_sticky_comment: true
+
+          # Optional: Customize review based on file types
+          # direct_prompt: |
+          #   Review this PR focusing on:
+          #   - For TypeScript files: Type safety and proper interface usage
+          #   - For API endpoints: Security, input validation, and error handling
+          #   - For React components: Performance, accessibility, and best practices
+          #   - For tests: Coverage, edge cases, and test quality
+
+          # Optional: Different prompts for different authors
+          # direct_prompt: |
+          #   ${{ github.event.pull_request.author_association == 'FIRST_TIME_CONTRIBUTOR' && 
+          #   'Welcome! Please review this PR from a first-time contributor. Be encouraging and provide detailed explanations for any suggestions.' ||
+          #   'Please provide a thorough code review focusing on our coding standards and best practices.' }}
+
+          # Optional: Add specific tools for running tests or linting
+          # allowed_tools: "Bash(npm run test),Bash(npm run lint),Bash(npm run typecheck)"
+
+          # Optional: Skip review for certain conditions
+          # if: |
+          #   !contains(github.event.pull_request.title, '[skip-review]') &&
+          #   !contains(github.event.pull_request.title, '[WIP]')
+

.github/workflows/claude.yml

@@ -0,0 +1,64 @@
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned]
+  pull_request_review:
+    types: [submitted]
+
+jobs:
+  claude:
+    if: |
+      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
+      (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+      actions: read # Required for Claude to read CI results on PRs
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Run Claude Code
+        id: claude
+        uses: anthropics/claude-code-action@beta
+        with:
+          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+
+          # This is an optional setting that allows Claude to read CI results on PRs
+          additional_permissions: |
+            actions: read
+
+          # Optional: Specify model (defaults to Claude Sonnet 4, uncomment for Claude Opus 4)
+          # model: "claude-opus-4-20250514"
+
+          # Optional: Customize the trigger phrase (default: @claude)
+          # trigger_phrase: "/claude"
+
+          # Optional: Trigger when specific user is assigned to an issue
+          # assignee_trigger: "claude-bot"
+
+          # Optional: Allow Claude to run specific commands
+          # allowed_tools: "Bash(npm install),Bash(npm run build),Bash(npm run test:*),Bash(npm run lint:*)"
+
+          # Optional: Add custom instructions for Claude to customize its behavior for your project
+          # custom_instructions: |
+          #   Follow our coding standards
+          #   Ensure all new code has tests
+          #   Use TypeScript for new files
+
+          # Optional: Custom environment variables for Claude
+          # claude_env: |
+          #   NODE_ENV: test
+

CLAUDE.md

@@ -0,0 +1,72 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+quic.video is a web blog and demo for Media over QUIC (MoQ) protocol. It's built with Astro, Solid.js, and uses WebTransport to connect to MoQ relay servers for live streaming.
+
+## Essential Commands
+
+```bash
+# Development
+npm run dev        # Start dev server with auto-open and HTTPS
+
+# Build & Production
+npm run build      # Production build
+npm run prod       # Build and preview production
+
+# Code Quality
+npm run check      # Run Biome linting and TypeScript checking
+npm run fix        # Auto-fix code issues and audit dependencies
+```
+
+## Architecture Overview
+
+### Technology Stack
+- **Framework**: Astro with SSR via Node.js adapter
+- **UI Components**: Solid.js for interactive elements
+- **Styling**: Tailwind CSS
+- **Build**: Vite with WASM and mkcert plugins
+- **Code Quality**: Biome for linting/formatting
+- **Package Manager**: pnpm v10.11.0
+
+### Key Components
+
+1. **MoQ Client Implementation** (`@kixelated/hang` package):
+   - Custom web components: `<hang-publish>`, `<hang-watch>`, `<hang-support>`
+   - WebTransport protocol for relay connections
+   - Publishing: `src/components/publish.tsx` - Creates broadcasts with random names
+   - Watching: `src/components/watch.tsx` - Connects to broadcasts by name
+
+2. **Routing Structure**:
+   - `/publish` - Create new broadcasts
+   - `/watch/{name}` - View specific broadcast
+   - `/blog/` - MDX-based blog posts
+   - Dynamic routes use `export const prerender = false` for SSR
+
+3. **Environment Configuration**:
+   - `PUBLIC_RELAY_URL` - WebTransport URL
+   - Separate `.env` files for dev/production
+
+### Important Patterns
+
+- **No REST APIs**: Uses WebTransport directly for streaming
+- **Stateless**: No database or user management
+- **Error Handling**: Component-level with `src/components/fail.tsx`
+- **Authentication**: Basic JWT support via query parameters for demo broadcasts
+- **Content Management**: MDX files in `src/pages/blog/` for documentation
+
+### Deployment
+
+- Docker multi-stage builds
+- Terraform infrastructure in `/infra/`
+- Production entry: `dist/server/entry.mjs`
+
+## Development Tips
+
+- WebTransport requires HTTPS even in development (handled by vite-plugin-mkcert)
+- Broadcasts are ephemeral - no persistence layer
+- The `@kixelated/hang` package handles all MoQ protocol implementation
+- For new blog posts, add MDX files to `src/pages/blog/`
+- Component changes in `src/components/` automatically reload with HMR