Full polyglot widget support with bleeding-edge Valdi

.bazelrc

@@ -81,5 +81,11 @@ build --experimental_reuse_sandbox_directories
 
 # Valdi Open Source Flags
 build --define=open_source_build=true
+build --flag_alias=valdi_js_engine=@valdi//bzl/valdi:js_engine
 
-build --android_crosstool_top="@snap_client_toolchains//:android_crosstool"
+# Enable web compilation (generates JS outputs from Valdi compiler for web targets)
+common --define=enable_web=true
+
+build --android_crosstool_top="@snap_client_toolchains//:android_crosstool"
+# Web build configuration (used by scripts/bazel_web_serve.sh)
+build:web --build_tag_filters=web

.gitignore

@@ -2,3 +2,7 @@
 
 bazel-*
 .cursor/rules/remote
+
+# Web playground dev server dependencies
+valdi_modules/playground/web_app/node_modules/
+valdi_modules/playground/web_app/package-lock.json

AGENTS.md

@@ -11,7 +11,7 @@ Valdi Widgets provides reusable UI widgets, styles, and patterns for apps built
 - **`valdi_modules/`** – Valdi modules (widgets, navigation, valdi_standalone_ui, navigation_internal, playground)
 - **`WORKSPACE`** – Depends on Valdi via `http_archive` (e.g. `beta-0.0.2`)
 - **Build**: Bazel; tests: `bazel test //valdi_modules/widgets:test //valdi_modules/navigation:test //valdi_modules/valdi_standalone_ui:test //valdi_modules/navigation_internal:test //valdi_modules/playground:test`
-- **Docs**: `AGENTS.md` (this file), `.cursor/rules/` (typescript-tsx, bazel, testing), `README.md`
+- **Docs**: `AGENTS.md` (this file), `README.md`
 
 The rest of this guide describes **Valdi** patterns so AI assistants don’t suggest React or wrong APIs when editing TypeScript/TSX in `valdi_modules/`.
 
@@ -107,7 +107,6 @@ const ChildWithProvider = withProviders(MyServiceProvider)(ChildComponent);
 - **`valdi_modules/navigation_internal/`** – Internal navigation support
 - **`valdi_modules/valdi_standalone_ui/`** – Standalone UI module
 - **`valdi_modules/playground/`** – Example app and entry point
-- **`.cursor/rules/`** – Cursor rules (bazel, typescript-tsx, testing, etc.)
 
 Valdi itself (compiler, runtime, core modules) is in the `@valdi//` external repository; see Valdi’s [AGENTS.md](https://github.com/Snapchat/Valdi/blob/main/AGENTS.md) and [docs](https://github.com/Snapchat/Valdi/tree/main/docs) for full framework documentation.
 
@@ -141,9 +140,27 @@ bazel build //valdi_modules/playground:app_macos
 
 ## More Information
 
-- Valdi: https://github.com/Snapchat/Valdi  
-- Valdi Widgets README: `/README.md`  
-- Cursor rules: `/.cursor/rules/README.md`  
+- Valdi: https://github.com/Snapchat/Valdi
+- Valdi Widgets README: `/README.md`
+
+## AI Assistant Setup
+
+### Install the Valdi CLI
+
+```bash
+npm install -g @snap/valdi
+```
+
+### Install AI skills
+
+Valdi-specific skills for AI coding assistants (component patterns, Bazel conventions, etc.) are bundled in the CLI:
+
+```bash
+valdi skills install                       # all detected AI tools
+valdi skills install --for=claude          # Claude Code only
+valdi skills install --category=client     # module-development skills only
+valdi skills list                          # see all available skills and install status
+```
 
 ---
 

WORKSPACE

@@ -3,15 +3,22 @@ workspace(name = "valdi_widgets")
 load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
 load("@bazel_tools//tools/build_defs/repo:git.bzl", "git_repository")
 
-# Valdi release beta-0.0.2 (https://github.com/Snapchat/Valdi/releases)
+# Valdi bleeding edge (https://github.com/Snapchat/Valdi)
 http_archive(
     name = "valdi",
-    strip_prefix = "Valdi-beta-0.0.2",
-    url = "https://github.com/Snapchat/Valdi/archive/refs/tags/beta-0.0.2.tar.gz",
+    strip_prefix = "Valdi-45b28375a189da8f9c24544e3b2d40318d3386a9",
+    url = "https://github.com/Snapchat/Valdi/archive/45b28375a189da8f9c24544e3b2d40318d3386a9.tar.gz",
 )
 
-# For local development:
-# local_repository(name = "valdi", path = "/path/to/Valdi")
+# For local development (uncomment to use local Valdi checkout):
+# local_repository(name = "valdi", path = "/Users/cholgate/Snapchat/Dev/mobile/client/src/open_source")
+
+# Valdi release beta-0.0.2 (https://github.com/Snapchat/Valdi/releases)
+# http_archive(
+#     name = "valdi",
+#     strip_prefix = "Valdi-beta-0.0.2",
+#     url = "https://github.com/Snapchat/Valdi/archive/refs/tags/beta-0.0.2.tar.gz",
+# )
 
 load("@valdi//bzl:workspace_prepare.bzl", "valdi_prepare_workspace")
 

scripts/bazel_web_serve.sh

@@ -0,0 +1,49 @@
+#!/usr/bin/env bash
+# Build the playground web bundle and run the **webpack dev server** (Playground app in the browser).
+# This does NOT serve a raw file list — it runs webpack-dev-server so http://localhost:8080 shows the app.
+# Requires: Node.js, npm.
+
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" >/dev/null && pwd)"
+ROOT_DIR="$SCRIPT_DIR/../"
+WEB_TARGET="//valdi_modules/playground:playground_export_npm"
+WEB_APP_DIR="$ROOT_DIR/valdi_modules/playground/web_app"
+PORT="${PORT:-8080}"
+
+pushd "$ROOT_DIR"
+
+# If something is already on the port (e.g. old python static server), warn
+if command -v lsof &>/dev/null && lsof -i ":$PORT" -sTCP:LISTEN -t &>/dev/null; then
+  echo "Warning: port $PORT is in use. Stop the other process (e.g. a previous file server) so webpack-dev-server can use it."
+  echo "  Example: lsof -i :$PORT -sTCP:LISTEN -t | xargs kill"
+  exit 1
+fi
+
+echo "Building web bundle..."
+bazel build "$WEB_TARGET"
+
+OUT_DIR="$ROOT_DIR/bazel-bin/valdi_modules/playground/playground_export_npm"
+if [[ ! -d "$OUT_DIR" ]]; then
+  OUT_DIR=$(bazel info bazel-bin 2>/dev/null)/valdi_modules/playground/playground_export_npm
+fi
+if [[ ! -d "$OUT_DIR" ]]; then
+  echo "Error: could not find built output"
+  exit 1
+fi
+
+export PLAYGROUND_NPM_PATH="$OUT_DIR"
+export PORT="$PORT"
+
+if [[ ! -d "$WEB_APP_DIR/node_modules" ]]; then
+  echo "Installing web_app dependencies (npm install)..."
+  (cd "$WEB_APP_DIR" && npm install --registry https://registry.npmjs.org/)
+fi
+
+echo "Starting webpack-dev-server (Playground app) at http://localhost:$PORT"
+cd "$WEB_APP_DIR"
+if [[ -x ./node_modules/.bin/webpack ]]; then
+  exec ./node_modules/.bin/webpack serve --mode development
+else
+  exec npx --yes webpack serve --mode development
+fi