diff --git a/.github/workflows/deploytest.yml b/.github/workflows/deploytest.yml
index e96c175511..cda563cf81 100644
--- a/.github/workflows/deploytest.yml
+++ b/.github/workflows/deploytest.yml
@@ -45,6 +45,15 @@ jobs:
         pnpm rebuild node-sass
     - name: Build frontend
       run: pnpm run build
+    - name: Upload frontend bundle
+      uses: actions/upload-artifact@v7
+      with:
+        name: studio-frontend-bundle
+        path: |
+          contentcuration/contentcuration/static/studio/
+          contentcuration/build/webpack-stats.json
+        if-no-files-found: error
+        retention-days: 1
   make_messages:
     name: Build all message files
     needs: pre_job
@@ -79,3 +88,145 @@ jobs:
         sudo apt-get install -y gettext
     - name: Test Django makemessages
       run: python contentcuration/manage.py makemessages --all
+  browser_smoke_test:
+    name: Browser smoke test
+    needs: [pre_job, build_assets]
+    if: ${{ needs.pre_job.outputs.should_skip != 'true' }}
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    services:
+      postgres:
+        image: postgres:16
+        env:
+          POSTGRES_USER: learningequality
+          POSTGRES_PASSWORD: kolibri
+          POSTGRES_DB: kolibri-studio
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        ports:
+          - 5432:5432
+      redis:
+        image: redis:6.0.9
+        options: >-
+          --health-cmd "redis-cli ping"
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        ports:
+          - 6379:6379
+    env:
+      DJANGO_SETTINGS_MODULE: contentcuration.settings
+      DATA_DB_HOST: localhost
+      AWS_S3_ENDPOINT_URL: http://localhost:9000
+      AWS_BUCKET_NAME: content
+      CELERY_BROKER_ENDPOINT: localhost
+      CELERY_REDIS_DB: "0"
+      CELERY_REDIS_PASSWORD: ""
+      RUN_MODE: ci
+      SMOKE_EMAIL: smokeadmin@example.com
+      SMOKE_PASSWORD: smokepass1234
+      SCREENSHOT_DIR: ${{ runner.temp }}/smoke_test_screenshots
+    steps:
+      - uses: actions/checkout@v6
+      - name: Set up MinIO
+        run: |
+          docker run -d -p 9000:9000 --name minio \
+            -e "MINIO_ROOT_USER=development" \
+            -e "MINIO_ROOT_PASSWORD=development" \
+            -e "MINIO_DEFAULT_BUCKETS=content:public" \
+            bitnamilegacy/minio:2024.5.28
+      - name: Install system deps (gettext, nginx)
+        run: |
+          sudo apt-get update -y
+          sudo apt-get install -y gettext nginx
+          # nginx's postinst auto-starts the system service on the ubuntu-latest
+          # runner image. We launch our own nginx with a custom config below, so
+          # the default instance has to go first — otherwise our nginx -c fails
+          # on the default pid path or :80 collision.
+          sudo systemctl stop nginx
+      - name: Install uv
+        uses: astral-sh/setup-uv@v7
+        with:
+          python-version: '3.10'
+          activate-environment: "true"
+          enable-cache: "true"
+      - name: Install python dependencies
+        run: uv pip sync requirements.txt
+      - name: Download frontend bundle
+        uses: actions/download-artifact@v8
+        with:
+          name: studio-frontend-bundle
+      - name: Cache Playwright browsers
+        uses: actions/cache@v5
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-chromium-${{ runner.os }}-v1
+      - name: Install Chromium and system deps
+        run: uvx --from "playwright<2" playwright install --with-deps chromium
+      - name: Prepare database
+        run: |
+          python contentcuration/manage.py migrate --noinput
+          python contentcuration/manage.py loadconstants
+      - name: Create smoke test user
+        shell: python
+        run: |
+          import os
+          import sys
+          # contentcuration package lives one level down; put it on sys.path
+          # so django.setup() can import contentcuration.settings.
+          sys.path.insert(0, "contentcuration")
+          import django
+          django.setup()
+          from django.contrib.auth import get_user_model
+          # Studio's custom User model: create_superuser(email, first_name, last_name, password).
+          # is_active defaults to False, so we have to flip it explicitly —
+          # otherwise the user exists but can't log in.
+          u = get_user_model().objects.create_superuser(
+              os.environ["SMOKE_EMAIL"],
+              "Smoke",
+              "Admin",
+              password=os.environ["SMOKE_PASSWORD"],
+          )
+          u.is_active = True
+          u.save()
+      - name: Prepare static and translations
+        run: |
+          python contentcuration/manage.py collectstatic --noinput
+          cd contentcuration && python manage.py compilemessages
+      - name: Start gunicorn
+        run: |
+          cd contentcuration && \
+          nohup gunicorn contentcuration.wsgi:application \
+            --timeout=120 --workers=1 --threads=1 \
+            --bind=0.0.0.0:8081 --log-level=info \
+            > "${{ runner.temp }}/gunicorn.log" 2>&1 &
+          echo "gunicorn started in background"
+      - name: Start nginx (serves /static/, proxies / to gunicorn)
+        run: |
+          # Substitute the static dir into the checked-in template. Escape
+          # sed replacement metacharacters (& and \) so paths containing them
+          # don't corrupt the substitution.
+          STATIC_DIR="$GITHUB_WORKSPACE/contentcuration/static"
+          ESCAPED=$(printf '%s' "$STATIC_DIR" | sed -e 's/[\\&]/\\&/g')
+          NGINX_CONF="${{ runner.temp }}/smoke-nginx.conf"
+          sed "s|__STATIC_DIR__|$ESCAPED|" integration_testing/nginx-smoke.conf > "$NGINX_CONF"
+          sudo nginx -c "$NGINX_CONF" -g 'daemon on;'
+      - name: Run browser smoke test
+        run: uv run --script integration_testing/smoke_test.py
+      - name: Upload screenshots
+        if: always()
+        uses: actions/upload-artifact@v7
+        with:
+          name: smoke_test_screenshots
+          path: ${{ runner.temp }}/smoke_test_screenshots
+          if-no-files-found: ignore
+      - name: Upload gunicorn log on failure
+        if: failure()
+        uses: actions/upload-artifact@v7
+        with:
+          name: smoke_test_gunicorn_log
+          path: ${{ runner.temp }}/gunicorn.log
+          if-no-files-found: ignore
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000000..d5f42b0e8f
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,176 @@
+<!-- Generic guidance for all coding agents (Claude Code, Zed, Cursor, etc.) -->
+
+# Kolibri Studio Development Guide for AI Coding Agents
+
+**Project:** Kolibri Studio — web app for authoring and publishing learning channels to Kolibri
+**Stack:** Python/Django backend, Vue.js 2.7 frontend, Kolibri Design System (KDS) + legacy Vuetify 1.5, Postgres/Redis/MinIO/Celery services, pytest/Jest testing
+**Platform:** web (server-deployed, not packaged for clients)
+
+## Quick Start
+
+```bash
+uv pip sync requirements.txt requirements-dev.txt  # Python deps
+pnpm install                                       # Node deps
+pre-commit install                                 # Required — commits fail without this
+make dcservicesup                                  # Bring up postgres / redis / minio in docker
+pnpm devsetup                                      # Migrate + load sample data + create admin
+pnpm devserver                                     # Django :8080 + Webpack watcher
+```
+
+→ Full setup: `README.md` | Local production-shape stack: `make dcup` (uses `docker-compose.yml`)
+
+## Critical Gotchas
+
+### ⚠️ BEFORE Writing Any Vue Component, Search for Existing Ones
+
+Do not create a new component without first searching for an existing solution:
+1. **Kolibri Design System** ([docs](https://design-system.learningequality.org/)) — `KButton`, `KCircularLoader`, `KTextbox`, `KSelect`, `KModal`, `KCheckbox`, `KIcon`, `KTable`, etc.
+2. **`contentcuration/contentcuration/frontend/shared/`** — Studio-specific shared components.
+3. **Vuetify 1.5** — for legacy widgets KDS doesn't cover (data tables, complex layout primitives). See the next gotcha before reaching for Vuetify in new code.
+
+If a component does 80% of what you need, wrap it — do not rewrite.
+
+### ⚠️ Use KDS, Not Vuetify, for New Code
+
+KDS is the design-system source of truth. Vuetify is legacy and being phased out. The rule applies to **new files / brand-new components** — if you're working inside a file that already uses Vuetify, match it (see "Match the surrounding file's API style" below) rather than mixing the two. **Do not introduce Vuetify into a fresh component.** When you encounter Vuetify being used where a KDS equivalent exists, leave it alone unless the work is genuinely about replacing it — opportunistic refactors in unrelated PRs add review noise.
+
+### ⚠️ Use Theme Tokens, Not Hard-Coded Colors
+
+Never use raw color values. Access theme colors via `$themeTokens` and `$themePalette`:
+```vue
+<template>
+  <div :style="{ color: $themeTokens.text, backgroundColor: $themeTokens.surface }">
+    <span :style="{ color: $themeTokens.annotation }">secondary text</span>
+  </div>
+</template>
+```
+For computed dynamic styles, use `$computedClass`.
+
+### ⚠️ Style Blocks, Not Inline — RTL Depends On It
+
+Non-dynamic styles go in `<style>` blocks. RTLCSS auto-flips directional properties (`padding-left` → `padding-right`) in style blocks but **cannot flip inline styles**. Dynamic directional styles must check `isRtl`.
+
+### ⚠️ Prefer Composition API for New Code
+
+Studio's existing code is largely Options API, but new components and refactors should use Composition API. It's fine to add Composition API to an existing Options API file when the existing logic isn't worth restructuring — be aware that a partial mix usually leads to a follow-up refactor.
+
+### ⚠️ No New Vuex — Use Composition API for New State
+
+Vuex 3 is deprecated in Studio. Existing Vuex modules (under `frontend/<app>/vuex/`, including the IndexedDB-backed sync store) stay where they are; touch them as little as possible. **New state goes through Composition API** — composables built on `ref`/`reactive`/`computed`, scoped to the consuming component or a `provide`/`inject` boundary.
+
+### ⚠️ Studio Uses an IndexedDB-Backed Change-Sync Architecture — Don't Mutate Synced Models Directly
+
+Edits in the editor write to Dexie tables in the browser via the Resource layer (`contentcuration/contentcuration/frontend/shared/data/`), which generates Change records that flow to the server's `/api/sync/` endpoint (`contentcuration/contentcuration/viewsets/sync/`). The server applies changes via a change-type registry (`viewsets/sync/base.py`, `viewsets/sync/constants.py`) and broadcasts back.
+
+Direct `axios.post` or direct ORM `save()` on a synced model bypasses the change pipeline and corrupts the offline → online merge. **Rule:** if a model is part of the sync framework, all writes go through the Resource layer (frontend) or the change-application registry (backend). Backend system-internal operations (publishing, garbage collection) may bypass; anything user-facing must not. See `CLAUDE.md` for a fuller description.
+
+### ⚠️ Use Vuetify's Grid for Responsive Layout
+
+`v-container` / `v-row` / `v-col` with Vuetify breakpoints (`xs`/`sm`/`md`/`lg`/`xl`). Studio does not have a `responsive-window` equivalent.
+
+### ⚠️ Internationalize All User-Visible Text
+
+Use `createTranslator` from `kolibri-i18n` — never hard-code strings in templates:
+```javascript
+const strings = createTranslator('ChannelStrings', {
+  title: { message: 'Channel title', context: 'Form field label' },
+});
+const { title$ } = strings;  // title$() returns translated string
+```
+
+### ⚠️ API Calls via the Resource Pattern
+
+For synced models, use the Resource layer in `contentcuration/contentcuration/frontend/shared/data/` (see sync gotcha above). For non-synced endpoints, use the existing Resource-style wrappers in `shared/data/resources.js`. Never use raw `fetch` or `axios` for domain operations.
+
+### ⚠️ Backend APIs: Use `ValuesViewset`
+
+Studio has `ValuesViewset` / `ReadOnlyValuesViewset` vendored at `contentcuration/contentcuration/viewsets/base.py`. Use them for new API endpoints — define a `values` tuple and `annotate_queryset` for computed fields rather than relying on default serializer output. Apply permission classes from `contentcuration/contentcuration/viewsets/`.
+
+### ⚠️ Testing Is Required
+
+- **Python:** `pytest` from repo root (uses `pytest.ini` → `contentcuration.test_settings`). Django API tests extend `APITestCase` from `rest_framework.test`. Other Django tests extend `django.test.TestCase`.
+- **Frontend:** Jest runner + Vue Testing Library via `@testing-library/vue`. `describe`/`it`/`expect` are Jest globals — do NOT import them. Use `jest.fn()` and `jest.mock()`.
+- **TDD:** Write a failing test first, then make it pass. Especially for bug fixes — always write a test that reproduces the bug before fixing it.
+
+### ⚠️ Pre-commit Auto-Fixes Files
+
+When a commit fails: pre-commit auto-fixes files → **`git add` the fixed files** → re-commit. Never bypass with `--no-verify`.
+
+## Project Structure
+
+```
+studio/
+├── contentcuration/                        # Django project root (also contains other apps)
+│   ├── contentcuration/                    # Main Django app
+│   │   ├── frontend/                       # Vue source
+│   │   │   ├── channelEdit/
+│   │   │   ├── channelList/
+│   │   │   ├── settings/
+│   │   │   ├── accounts/
+│   │   │   ├── administration/
+│   │   │   └── shared/                     # Shared components + sync data layer
+│   │   ├── viewsets/                       # DRF ValuesViewsets — sync/ contains the change framework
+│   │   ├── models.py, urls.py, settings.py, dev_settings.py, test_settings.py
+│   │   └── static/studio/                  # webpack output (git-ignored)
+│   ├── automation/                         # Django app — automation workflows
+│   ├── kolibri_content/                    # Django app — Kolibri content schema
+│   ├── kolibri_public/                     # Django app — public catalog API
+│   ├── search/                             # Django app — full-text search
+│   ├── manage.py
+│   └── build/                              # webpack-stats.json (git-ignored)
+├── docker/                                 # Dockerfile.{dev,prod,nginx.prod,postgres.dev}
+├── integration_testing/
+│   ├── features/                           # Gherkin BDD specs (manual reference)
+│   └── smoke_test.py                       # CI smoke test
+├── jest_config/                            # Jest config
+├── webpack.config.js
+├── Makefile                                # dc* targets + altprodserver
+└── docker-compose.yml / docker-compose.prod.yml
+```
+
+**Settings split:**
+- `contentcuration.dev_settings` — local development. Use this for local `manage.py` commands.
+- `contentcuration.settings` — production. Used by `make altprodserver` and the CI smoke test.
+- `contentcuration.test_settings` — pytest.
+
+## Code Quality
+
+Studio follows the same code-quality principles as Kolibri. → See https://kolibri-dev.readthedocs.io/en/latest/code_quality.html.md for detailed examples (LLM-friendly Markdown version; drop `.md` for the HTML rendering).
+
+## Key Conventions
+
+**Python:** F-strings preferred. One import per line. All imports at file top — inline imports only to prevent circular imports. Descriptive migration names (no `_auto_`).
+
+**Vue:** PascalCase filenames. Component `name` must match filename.
+
+**Git:** Imperative commit messages. **PR titles do NOT use Conventional Commits prefix** (e.g. `feat:`, `fix:`) — plain English titles. Individual commit messages may use CC prefixes. Black/Prettier enforced by pre-commit.
+
+**Don't guess — look at existing code** for patterns: `contentcuration/contentcuration/viewsets/` for API patterns, `contentcuration/contentcuration/frontend/shared/data/` for sync framework, existing `__tests__/` directories for test patterns.
+
+## Running Tests
+
+```bash
+pytest                                                  # all Python tests
+pytest contentcuration/contentcuration/tests/ -k name   # filter by name
+pnpm test                                               # all Jest tests
+pnpm jest --config jest_config/jest.conf.js <path>      # single file
+pre-commit run --all-files                              # lint all
+pre-commit run --files path/to/File.vue                 # lint specific files
+```
+
+Important: bare `pnpm jest` will NOT load `modulePaths` correctly — always go through `pnpm test` or pass `--config jest_config/jest.conf.js` explicitly. Always go through `pre-commit` — do not invoke ESLint / Black / Flake8 directly.
+
+## Docs Reference
+
+The Kolibri-dev docs site serves an LLM-friendly Markdown variant of every page — append `.md` to any URL below. The whole index is at https://kolibri-dev.readthedocs.io/en/latest/llms.txt.
+
+- Code quality: https://kolibri-dev.readthedocs.io/en/latest/code_quality.html.md
+- Testing (general): https://kolibri-dev.readthedocs.io/en/latest/testing.html.md
+- Frontend testing: https://kolibri-dev.readthedocs.io/en/latest/frontend_architecture/unit_testing.html.md
+- Backend testing: https://kolibri-dev.readthedocs.io/en/latest/backend_architecture/testing.html.md
+- i18n: https://kolibri-dev.readthedocs.io/en/latest/i18n.html.md
+- Frontend architecture: https://kolibri-dev.readthedocs.io/en/latest/frontend_architecture/index.html.md
+- Backend architecture: https://kolibri-dev.readthedocs.io/en/latest/backend_architecture/index.html.md
+- Development workflow: https://kolibri-dev.readthedocs.io/en/latest/development_workflow.html.md
+
+Local: `README.md`, `Makefile` (common commands), `docker-compose.yml` (service config).
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000000..7d5cf294fe
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,64 @@
+@AGENTS.md
+
+## Extended Conventions
+
+These supplement the gotchas in AGENTS.md. With Claude's large context window, the additional detail has negligible cost.
+
+### Code Quality Principles
+
+- **Compute, don't store**: Don't add DB fields derivable from other fields. Use `@property` on Django models or DRF `SerializerMethodField` on the backend; `computed()` in Vue on the frontend.
+- **Let errors propagate**: Don't wrap calls in try/catch that just log and rethrow. DRF's exception handling catches unhandled exceptions.
+- **Composition over inheritance**: Prefer composables / utility modules over mixins, delegation over subclassing. Reserve inheritance for true is-a relationships.
+- **Tell, don't ask**: Don't inspect state → decide → update. Tell the object what to do.
+- **Tests assert behavior, not implementation**: Mock only at hard boundaries (network, filesystem, external services, browser APIs).
+- **Follow project vocabulary**: Use Studio's domain terms — `Channel`, `ContentNode`, `Tree`, `File`, `User`, `Invitation`. Don't introduce synonyms.
+- **Escalate unclear decisions**: If an architectural choice isn't covered by docs or existing patterns, ask rather than deciding independently.
+- **Don't weaken existing tests**: Only modify tests when the tested behavior has intentionally changed.
+- **Small interfaces**: If something can be private, it must be.
+- **Externalize configuration**: Use Django `settings.py` / `dev_settings.py` and environment variables, not hardcoded values.
+- **Accessibility**: `aria-*` attributes on interactive elements. Keyboard navigation must work.
+- **Identical code is not always duplication**: Only deduplicate when the knowledge is genuinely the same, not just when code looks similar.
+- **Keep code simple**: Prefer the simplest solution that achieves the goal. Code should be readable without extensive comments.
+- **DRY, but avoid premature abstraction**: Don't abstract too early — wait until a pattern appears at least three times (Rule of Three).
+- **Complete your refactors**: When changing a function signature, API, or pattern, update all usages — not just the one you're working on.
+- **Security**: API endpoints must have appropriate authentication and permissions. Validate submitted data. Don't bypass security practices (e.g., raw SQL instead of ORM queries).
+- **One concern, one layer**: Don't reimplement validation, error handling, or permission logic that already exists at another layer.
+- **Preserve existing comments**: Don't strip comments to "clean up." Only remove when the described code is deleted or the comment is provably incorrect.
+- **Don't rely on undocumented behavior**: If a behavior isn't in the API contract or language spec, don't depend on it.
+- **Whoever allocates a resource releases it**: Use context managers in Python (`with`), `beforeDestroy` cleanup in Vue Options-API components.
+
+→ See https://kolibri-dev.readthedocs.io/en/latest/code_quality.html.md for detailed examples (LLM-friendly Markdown version; drop `.md` for the HTML rendering). The full docs index is at https://kolibri-dev.readthedocs.io/en/latest/llms.txt.
+
+### Python Conventions (Extended)
+
+- **Logging**: `logger = logging.getLogger(__name__)` at module level.
+- **Constants**: Uppercase strings in dedicated modules with `choices` tuples for model fields.
+- **Model permissions**: DRF permission classes applied via `permission_classes = [...]` on viewsets. Studio's project-specific classes live alongside the viewset code in `contentcuration/contentcuration/viewsets/`.
+
+### Sync Architecture (Studio-Specific)
+
+Studio is unique among Learning Equality codebases in that domain state is propagated via durable change records rather than direct mutations. This enables collaborative editing of channels and offline tolerance.
+
+**Why it exists.** Channel authoring is a multi-user, often-offline workflow. Direct ORM writes on every edit would lose concurrent work and would not survive a temporarily-disconnected client. Instead, edits in the editor produce change records that can be merged on the server and replayed on reconnection.
+
+**Frontend shape — `contentcuration/contentcuration/frontend/shared/data/`:**
+- `db.js` — Dexie schema (browser IndexedDB).
+- `resources.js` — Resource wrappers around Dexie tables. Frontend code reads and writes via these, not via Dexie directly.
+- `changes.js` — generates change records on writes.
+- `serverSync.js` — POSTs pending changes to the server sync endpoint and applies returned changes.
+- `mergeChanges.js` / `applyRemoteChanges.js` — merge and apply logic.
+- `registry.js` — change-table registry.
+- `locks.js` — write coordination.
+
+New synced fields or models require updates in three places: the Dexie schema, the resource definition, and the change registry. **Partial additions silently fail to sync** — there is no startup-time validation that catches a model registered in two of three places.
+
+**Backend shape — `contentcuration/contentcuration/viewsets/sync/`:**
+- `endpoint.py` — the `/api/sync/` DRF view.
+- `base.py` — change application infrastructure.
+- `constants.py` — change-type constants. **Must stay in lockstep with the frontend's `constants.js`.**
+
+Server-side direct ORM mutations on synced models are only safe for system-internal operations (publishing, garbage collection, etc.). Anything user-facing must flow through the change pipeline so other connected clients see the update via the sync broadcast.
+
+### Multi-Worktree Isolation
+
+The `Makefile` derives `COMPOSE_PROJECT_NAME` from the current git branch name (lines around 150–152: `COMPOSE_PROJECT_NAME=studio_$(BRANCH_NAME)`), so docker-compose stacks from different worktrees don't collide. For multiple worktrees running concurrently against the same machine, unique ports are also needed (Django on `:8080`, webpack dev server on `:4000`, MinIO on `:9000`, Postgres on `:5432`) — override via env or override-files.
diff --git a/integration_testing/nginx-smoke.conf b/integration_testing/nginx-smoke.conf
new file mode 100644
index 0000000000..81dd5c575c
--- /dev/null
+++ b/integration_testing/nginx-smoke.conf
@@ -0,0 +1,31 @@
+# Nginx config for the CI browser smoke test.
+#
+# Mirrors the prod shape (docker/nginx/nginx.conf): listens on :8080, serves
+# /static/ directly, reverse-proxies everything else to gunicorn on :8081.
+# Kept deliberately minimal — no gzip, cache, or includes — because the smoke
+# test only needs the upstream + static contract.
+#
+# The __STATIC_DIR__ placeholder is substituted at workflow runtime with the
+# absolute path to contentcuration/static (where collectstatic writes).
+
+worker_processes 1;
+events { worker_connections 1024; }
+http {
+    include /etc/nginx/mime.types;
+    sendfile on;
+    upstream studio { server 127.0.0.1:8081; keepalive 5; }
+    server {
+        listen 8080 default_server;
+        server_name "";
+        location /static/ {
+            alias __STATIC_DIR__/;
+            expires 1h;
+        }
+        location / {
+            proxy_pass http://studio;
+            proxy_set_header Host $host;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_read_timeout 100s;
+        }
+    }
+}
diff --git a/integration_testing/smoke_test.py b/integration_testing/smoke_test.py
new file mode 100644
index 0000000000..321838be3a
--- /dev/null
+++ b/integration_testing/smoke_test.py
@@ -0,0 +1,280 @@
+# /// script
+# requires-python = ">=3.10"
+# dependencies = ["playwright<2"]
+# ///
+"""
+Browser smoke test for Kolibri Studio.
+
+Polls a running Studio server for readiness, logs in as a superuser, walks a
+curated set of in-app URLs, and screenshots each one. Collects console errors,
+uncaught JS errors, and same-origin HTTP responses with status >= 400. Exits
+non-zero if any errors were recorded.
+
+The script expects gunicorn (+ a static-asset server such as nginx) to already
+be running at STUDIO_URL — CI starts them as separate workflow steps.
+
+Env vars:
+    STUDIO_URL          (default http://localhost:8080)
+    STUDIO_STARTUP_TIMEOUT  (default 120)
+    SMOKE_EMAIL         (required)
+    SMOKE_PASSWORD      (required)
+    SCREENSHOT_DIR      (default ./smoke_test_screenshots)
+"""
+import http.client
+import logging
+import os
+import re
+import sys
+import time
+import urllib.error
+import urllib.parse
+import urllib.request
+from pathlib import Path
+
+from playwright.sync_api import Error as PlaywrightError
+from playwright.sync_api import sync_playwright
+
+logger = logging.getLogger(__name__)
+
+STUDIO_URL = (os.environ.get("STUDIO_URL") or "http://localhost:8080").rstrip("/")
+STUDIO_HOST = urllib.parse.urlparse(STUDIO_URL).hostname
+STARTUP_TIMEOUT = int(os.environ.get("STUDIO_STARTUP_TIMEOUT", "120"))
+SCREENSHOT_DIR = Path(os.environ.get("SCREENSHOT_DIR", "smoke_test_screenshots"))
+SMOKE_EMAIL = os.environ.get("SMOKE_EMAIL")
+SMOKE_PASSWORD = os.environ.get("SMOKE_PASSWORD")
+NAV_TIMEOUT = 30000
+
+# Studio's "Unsupported Browser" page rejects the default HeadlessChrome UA
+# and serves a static fallback with no SPA. Use a regular Chrome UA instead.
+CHROME_UA = (
+    "Mozilla/5.0 (X11; Linux x86_64) "
+    "AppleWebKit/537.36 (KHTML, like Gecko) "
+    "Chrome/120.0.0.0 Safari/537.36"
+)
+
+# (label, path) — paths relative to STUDIO_URL. The label is used for the
+# screenshot filename. Order matters: login lands on /channels/ so we start
+# from there and walk to other apps.
+#
+# This is an intentionally curated subset — not every route, just enough to
+# exercise the different webpack bundles (channels SPA, settings SPA, admin
+# SPA) and a few of the channelList tabs (each tab loads a separate vuex
+# module). Extend deliberately: each added page adds CI time, and we'd
+# rather catch broken SPA mount than broken route logic.
+PAGES = [
+    ("my_channels", "/channels/#/my-channels"),
+    ("starred", "/channels/#/starred"),
+    ("view_only", "/channels/#/view-only"),
+    ("public", "/channels/#/public"),
+    ("community_library", "/channels/#/community-library"),
+    ("collections", "/channels/#/collections"),
+    ("settings", "/settings/"),
+    ("administration", "/administration/"),
+]
+
+
+def wait_for_studio(url, timeout=STARTUP_TIMEOUT):
+    """Block until url responds with any HTTP status, or raise TimeoutError.
+
+    Returns as soon as the server speaks HTTP — even 5xx counts as "up" so the
+    smoke flow can fail fast on a broken server instead of spinning for the
+    full STARTUP_TIMEOUT.
+    """
+    start = time.time()
+    while time.time() - start < timeout:
+        try:
+            urllib.request.urlopen(url, timeout=5)
+            return
+        except urllib.error.HTTPError:
+            # Server responded with an HTTP error — it's up.
+            return
+        except (
+            urllib.error.URLError,
+            ConnectionError,
+            OSError,
+            http.client.HTTPException,
+        ):
+            time.sleep(2)
+    raise TimeoutError(f"Studio did not become ready within {timeout} seconds at {url}")
+
+
+def _same_host(url):
+    # Match by hostname so a request to a different port on the same host
+    # (e.g. a bundle that hardcodes gunicorn-direct :8081 instead of the
+    # nginx-fronted :8080) still falls inside the same-origin filter.
+    return urllib.parse.urlparse(url).hostname == STUDIO_HOST
+
+
+def _is_real_console_error(msg):
+    # Skip "Failed to load resource" — the resource URL isn't in msg.text,
+    # so we can't tell same-origin from third-party (analytics, fonts).
+    # Same-origin request failures are caught via on_requestfailed below.
+    return msg.type == "error" and "Failed to load resource" not in msg.text
+
+
+def attach_collectors(page):
+    """Attach pageerror / console / response listeners; return event buffer."""
+    buffer = []
+
+    def on_pageerror(exc):
+        buffer.append({"type": "pageerror", "url": page.url, "detail": str(exc)})
+
+    def on_console(msg):
+        if _is_real_console_error(msg):
+            buffer.append(
+                {"type": "console.error", "url": page.url, "detail": msg.text}
+            )
+
+    def on_response(resp):
+        if _same_host(resp.url) and resp.status >= 400:
+            buffer.append(
+                {
+                    "type": "response",
+                    "url": page.url,
+                    "detail": f"{resp.status} {resp.url}",
+                }
+            )
+
+    def on_requestfailed(req):
+        if _same_host(req.url):
+            buffer.append(
+                {
+                    "type": "requestfailed",
+                    "url": page.url,
+                    "detail": f"{req.url} — {req.failure}",
+                }
+            )
+
+    page.on("pageerror", on_pageerror)
+    page.on("console", on_console)
+    page.on("response", on_response)
+    page.on("requestfailed", on_requestfailed)
+    return buffer
+
+
+def login(page, buffer, failures):
+    """Navigate to /, follow redirect, log in, land on /channels/."""
+    page.goto(STUDIO_URL + "/", wait_until="domcontentloaded")
+    # Studio's i18n middleware redirects / to /<lang>/accounts/. Anchor to a
+    # locale segment so we don't also match a page whose path coincidentally
+    # contains "/accounts/" (e.g. an error page or marketing route).
+    page.wait_for_url(re.compile(r"/[a-z][a-z-]*/accounts/"), timeout=NAV_TIMEOUT)
+    # Wait for the SPA to mount the login form.
+    page.get_by_label("Email").wait_for(state="visible", timeout=NAV_TIMEOUT)
+    page.screenshot(path=str(SCREENSHOT_DIR / "00_login.png"), full_page=False)
+
+    page.get_by_label("Email").fill(SMOKE_EMAIL)
+    page.get_by_label("Password").fill(SMOKE_PASSWORD)
+    page.get_by_role("button", name="Sign in").click()
+
+    # Successful login lands at /<lang>/channels/#/my-channels. Anchor to a
+    # locale segment for the same reason as the /accounts/ regex above.
+    page.wait_for_url(re.compile(r"/[a-z][a-z-]*/channels/"), timeout=NAV_TIMEOUT)
+    page.wait_for_load_state("networkidle", timeout=NAV_TIMEOUT)
+    page.screenshot(path=str(SCREENSHOT_DIR / "01_post_login.png"), full_page=False)
+
+    if buffer:
+        failures.extend({**event, "page": "(login)"} for event in buffer)
+        buffer.clear()
+
+
+def _bust(path, index):
+    """Append a cache-buster query param to force a full page reload.
+
+    Without this, hash-only navigation (e.g. /channels/#/starred →
+    /channels/#/view-only) is same-document — the browser doesn't reload,
+    Vue router has to react in a later tick, and a screenshot taken right
+    after `goto` can capture the previous tab.
+    """
+    base, _, frag = path.partition("#")
+    sep = "&" if "?" in base else "?"
+    base = f"{base}{sep}_smoketest={index}"
+    return f"{base}#{frag}" if frag else base
+
+
+def walk_pages(page, buffer, failures):
+    """Visit each (label, path) in PAGES, screenshot, collect errors."""
+    for index, (label, path) in enumerate(PAGES, start=2):
+        target = STUDIO_URL + _bust(path, index)
+        try:
+            page.goto(target, wait_until="domcontentloaded", timeout=NAV_TIMEOUT)
+            page.wait_for_load_state("networkidle", timeout=NAV_TIMEOUT)
+        except PlaywrightError as exc:
+            buffer.append({"type": "nav-error", "url": target, "detail": str(exc)})
+        shot = SCREENSHOT_DIR / f"{index:02d}_{label}.png"
+        try:
+            page.screenshot(path=str(shot), full_page=False)
+        except PlaywrightError as exc:
+            buffer.append(
+                {"type": "screenshot-error", "url": page.url, "detail": str(exc)}
+            )
+        # Drain at end of iteration so events arriving between the goto and
+        # screenshot of THIS page are attributed to THIS page. Events that
+        # leak in after the drain land in the next iteration's buffer; they
+        # get attributed to the next page, which is wrong-but-bounded — at
+        # least nothing is silently dropped.
+        if buffer:
+            failures.extend({**event, "page": label} for event in buffer)
+            buffer.clear()
+
+
+def report(failures):
+    if not failures:
+        logger.info("Smoke test passed — all pages loaded without errors.")
+        return 0
+    logger.error("Smoke test FAILED — %d error(s) collected:\n", len(failures))
+    logger.error("  %-22s %-18s Detail", "Page", "Type")
+    logger.error("  %s %s %s", "-" * 22, "-" * 18, "-" * 60)
+    for f in failures:
+        page_label = (f.get("page") or "")[:22]
+        detail = f["detail"]
+        if len(detail) > 80:
+            detail = detail[:77] + "..."
+        logger.error("  %-22s %-18s %s", page_label, f["type"], detail)
+    return 1
+
+
+def main():
+    logging.basicConfig(level=logging.INFO, format="%(message)s")
+    if not SMOKE_EMAIL or not SMOKE_PASSWORD:
+        raise RuntimeError("SMOKE_EMAIL and SMOKE_PASSWORD must be set")
+
+    SCREENSHOT_DIR.mkdir(parents=True, exist_ok=True)
+
+    logger.info(f"Waiting for Studio at {STUDIO_URL}...")
+    wait_for_studio(STUDIO_URL + "/")
+    logger.info("Studio is ready.")
+
+    failures = []
+    with sync_playwright() as p:
+        browser = p.chromium.launch(headless=True)
+        context = browser.new_context(user_agent=CHROME_UA)
+        page = context.new_page()
+        buffer = attach_collectors(page)
+        try:
+            login(page, buffer, failures)
+            walk_pages(page, buffer, failures)
+        except PlaywrightError as exc:
+            # Browser-driver errors (timeouts, broken selectors) get recorded
+            # as a smoke failure with a best-effort screenshot. Programmer
+            # errors (NameError, ImportError, AttributeError, etc.) propagate
+            # so the traceback isn't buried under a one-line "fatal" entry.
+            failures.append(
+                {
+                    "type": "fatal",
+                    "url": page.url,
+                    "detail": str(exc),
+                    "page": "(fatal)",
+                }
+            )
+            try:
+                page.screenshot(path=str(SCREENSHOT_DIR / "fatal.png"), full_page=False)
+            except PlaywrightError:
+                pass
+        finally:
+            browser.close()
+    return report(failures)
+
+
+if __name__ == "__main__":
+    sys.exit(main())