[DASH-1732] [templates] add build step to create javascript templates

.github/CODEOWNERS

@@ -0,0 +1,10 @@
+# When merging changes under these paths to `production`, require review from the
+# Dashboard team.
+/javascript/ @browserbase/dashboard
+/scripts/fetch-playground-typescript-dirs.mjs @browserbase/dashboard
+/scripts/validate-playground-templates.mjs @browserbase/dashboard
+/scripts/playground-ci.mjs @browserbase/dashboard
+/scripts/lib/playground-checks.mjs @browserbase/dashboard
+/.github/workflows/playground.yml @browserbase/dashboard
+/.github/workflows/playground-production.yml @browserbase/dashboard
+/.github/workflows/playground-test-production.yml @browserbase/dashboard

.github/workflows/playground-production.yml

@@ -0,0 +1,20 @@
+# Triggers the shared playground workflow for the `production` branch.
+# All CI steps live in playground.yml — edit there to change behavior.
+
+name: Playground templates (production)
+
+on:
+  pull_request:
+    branches:
+      - production
+  push:
+    branches:
+      - production
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  playground-templates:
+    uses: ./.github/workflows/playground.yml

.github/workflows/playground-test-production.yml

@@ -0,0 +1,20 @@
+# Triggers the shared playground workflow for the `test-production` branch.
+# All CI steps live in playground.yml — edit there to change behavior.
+
+name: Playground templates (test production)
+
+on:
+  pull_request:
+    branches:
+      - test-production
+  push:
+    branches:
+      - test-production
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  playground-templates:
+    uses: ./.github/workflows/playground.yml

.github/workflows/playground.yml

@@ -0,0 +1,53 @@
+# Reusable workflow: validates TypeScript → JavaScript builds for playground-
+# runnable templates and optionally commits the generated javascript/ tree.
+#
+# Called by playground-production.yml and playground-test-production.yml so that
+# CI steps are defined in exactly one place.
+
+name: Playground templates
+
+on:
+  workflow_call:
+
+permissions:
+  contents: write
+
+jobs:
+  playground-templates:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Clean javascript output directory
+        run: rm -rf javascript && mkdir -p javascript
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build and validate playground TypeScript templates
+        env:
+          TEMPLATES_API_URL: ${{ vars.TEMPLATES_API_URL }}
+        run: pnpm run ci:playground
+
+      - name: Commit and push playground javascript (push only)
+        if: github.event_name == 'push'
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git add -A javascript/
+          if git diff --staged --quiet; then
+            echo "No javascript changes to commit."
+          else
+            git commit --no-verify -m "chore: regenerate playground javascript templates"
+            git push
+          fi

README.md

@@ -67,6 +67,12 @@ Templates use the Model Gateway to route LLM requests -- you only need your `BRO
 
 Each template's README contains detailed installation steps, environment variable requirements, and troubleshooting guides.
 
+### TypeScript and generated JavaScript
+
+- **Source of truth:** edit templates under `typescript/`. The `javascript/` tree is generated output, not authored by hand for day-to-day changes.
+- **Local only:** run `pnpm run build:javascript` when you want a full mirror of `typescript/` into `javascript/` on your machine (for example to smoke-test the transpiler or compare JS output). There is **no** GitHub Actions workflow that builds the full tree into the repo anymore.
+- **Playground releases:** the `production` branch is updated by CI (`.github/workflows/playground-production.yml`), which builds and commits **only** templates that are playground-runnable per the public templates API, then validates them.
+
 ## Resources
 
 ### Documentation

package.json

@@ -5,6 +5,9 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "build:javascript": "node scripts/build-javascript.mjs",
+    "ci:playground": "node scripts/playground-ci.mjs",
+    "validate:playground": "node scripts/validate-playground-templates.mjs",
     "check:readme-template-index": "node scripts/check-readme-template-index.mjs",
     "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md,yml,yaml}\"",
     "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,md,yml,yaml}\"",
@@ -25,6 +28,7 @@
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",
     "prettier": "^3.2.5",
+    "typescript": "^5.9.3",
     "typescript-eslint": "^8.50.1"
   },
   "packageManager": "pnpm@9.0.0",