codeflash-internal/js
Aseem Saxena a3f0c07bb6
fix: allow Monaco editor CDN in CSP for trace page diffs (#2611)
## Summary
- The Monaco diff editor on `/trace/[id]` pages was not loading because
`@monaco-editor/react` fetches JS, CSS, and font assets from
`cdn.jsdelivr.net` by default
- The Content Security Policy in `next.config.mjs` blocked those
requests (missing from `script-src`, `style-src`, `font-src`)
- Added `https://cdn.jsdelivr.net` to the three relevant CSP directives

## Test plan
- [ ] Open a trace page (e.g.
`/trace/c0668bd3-9321-4082-9c43-3e41bdd9b1c5`) and verify the code diff
renders
- [ ] Check browser console for no remaining CSP violations
- [ ] Verify no regressions on other pages

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Sarthak Agarwal <sarthak.saga@gmail.com>
2026-04-22 04:07:40 +05:30
..
cf-api fix: cf-api deploy broken by pnpm workspace migration 2026-04-13 11:58:37 -05:00
cf-webapp fix: allow Monaco editor CDN in CSP for trace page diffs (#2611) 2026-04-22 04:07:40 +05:30
common perf: fix CI build + lazy-load heavy libs + parallelize DB queries (#2601) 2026-04-13 11:03:05 -05:00
VSC-Extension feat: Add Line Profiler visualization to webapp (#2268) 2026-01-28 08:36:54 -08:00
.npmrc revert: drop node-linker=hoisted from .npmrc 2026-04-15 07:47:35 -05:00
CLAUDE.md perf: fix CI build + lazy-load heavy libs + parallelize DB queries (#2601) 2026-04-13 11:03:05 -05:00
package.json perf: fix CI build + lazy-load heavy libs + parallelize DB queries (#2601) 2026-04-13 11:03:05 -05:00
pnpm-lock.yaml fix: add @swc/helpers as direct dependency for Azure deployment 2026-04-15 06:47:06 -05:00
pnpm-workspace.yaml perf: fix CI build + lazy-load heavy libs + parallelize DB queries (#2601) 2026-04-13 11:03:05 -05:00
README.md perf: fix CI build + lazy-load heavy libs + parallelize DB queries (#2601) 2026-04-13 11:03:05 -05:00

CodeFlash AI

Overview

CodeFlash AI is a JavaScript/TypeScript monorepo that provides a scalable and modular architecture for web applications, focusing on efficient code sharing and robust development practices.

Project Structure

js/
├── common/           # Shared code and database schema
├── cf-api/           # Backend API service
├── cf-webapp/        # Next.js web application
├── VSC-Extension/    # VS Code extension
└── pnpm-workspace.yaml

Prerequisites

  • Node.js (v20+)
  • pnpm (v10+): npm install -g pnpm
  • Prisma CLI (installed as devDependency)

Setup

1. Clone the Repository

git clone https://github.com/your-org/codeflash-ai.git
cd codeflash-ai/js

2. Install Dependencies

# Install all workspace dependencies from js/
pnpm install

3. Database Configuration

# Generate Prisma client and run migrations
cd common
pnpm prisma generate
pnpm prisma migrate dev

Development Workflow

Start Development Servers

# From js/ workspace root:
pnpm --filter cf-api dev
pnpm --filter cf-webapp dev

Build

# Build individual packages
pnpm --filter cf-webapp build
pnpm --filter cf-api build
pnpm --filter @codeflash-ai/common build

Key Components

Common Package (@codeflash-ai/common)

  • Shared TypeScript utilities
  • Prisma database schema
  • Reusable functions across projects
  • Referenced as "workspace:*" by cf-api and cf-webapp

Usage Example

import { createOrUpdateUser } from "@codeflash-ai/common"

Best Practices

  1. Always install from the workspace root (js/)
  2. Keep shared logic in the common package
  3. Use TypeScript for type safety
  4. Follow existing code structure
  5. Never commit sensitive data or build artifacts

Publishing common Package

cd common
pnpm build
pnpm publish