microsoft · RobStand · Mar 12, 2026 · Mar 17, 2026 · Mar 17, 2026 · Mar 17, 2026
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
@@ -0,0 +1,44 @@
+# Copilot Instructions — CAT Website
+
+## Project Overview
+
+This is the **Microsoft Copilot Acceleration Team (CAT) website**, hosted at `https://microsoft.github.io/cat` via GitHub Pages. It is a static site — no build system, no bundler, no package manager. All HTML, CSS, and JS are hand-authored and served directly.
+
+There are **no build, test, or lint commands**. No `package.json`, no CI pipeline. Edit files directly and verify in a browser.
+
+## Architecture
+
+**Landing page** (`/index.html`): Single-page site using Fluent UI Web Components, `assets/css/fluent.css`, and inline JS. Sections are anchor-linked (`#tools`, `#programs`, `#guidance`, `#stories`). Supports dark/light theme via `data-theme` attribute on `<html>` and `localStorage` key `cat-theme`.
+
+**Subpages** (`/programs/*.html`): Standalone HTML pages sharing `assets/css/subpage.css`. Each is self-contained with its own inline `<script>` blocks. Navigation back to the main site is via a header logo link.
+
+**YAML-driven pages**: Two pages load content dynamically from YAML files at runtime using `js-yaml` from CDN:
+- `/agent-platform-advisor/index.html` ← reads `apa.yaml` (scoring matrix, questions, recommendations)
+- `/programs/ai-webinar.html` ← reads `ai-webinar-sessions.yml` (session schedule)
+
+**Agent Platform Advisor** (`/agent-platform-advisor/`): The most complex sub-app — a multi-step scoring wizard with shareable URL-encoded results, sessionStorage persistence, and temporal change detection. It has its own CSS (`assets/apa.css`), JS (`assets/apa.js`), and a dedicated design system documented in `DESIGN.md`. Always read `agent-platform-advisor/DESIGN.md` before making visual changes to this app.
+
+**SparkTank** (`/sparktank/`): Facilitation/game page with its own CSS (`assets/css/strategix.css`) and JS (`assets/js/strategix.js`). Uses `html2canvas` and `jspdf` from CDN for export.
+
+## Key Conventions
+
+- **No build step.** Edit HTML/CSS/JS files directly. Sass sources exist under `assets/sass/` but compiled CSS is checked in — there is no automated Sass compilation in the repo.
+- **No framework.** All JS is vanilla DOM manipulation. No React, Vue, or similar.
+- **CDN dependencies only.** External libraries (Fluent UI, js-yaml, html2canvas, jspdf) are loaded from CDNs, not installed locally.
+- **Font stack:** Segoe UI / Segoe UI Variable with system fallbacks. The Agent Platform Advisor additionally uses Geist Mono for scores and platform labels.
+- **Primary brand color:** `#0078D4` (Microsoft blue). Subpage CSS uses the custom property `--ms-blue`.
+- **Dark mode:** The landing page supports dark/light themes toggled via `data-theme` attribute. Subpages generally do not have dark mode.
+- **Scroll reveal pattern:** Multiple pages use `IntersectionObserver` to add a `.visible` class for entrance animations. CSS classes: `.reveal`, `.reveal-stagger`.
+- **AI Webinar sessions:** `programs/ai-webinar-sessions.yml` is the source of truth for webinar data. The page classifies sessions as upcoming/past using a hardcoded Pacific Time cutoff (`11:00:00-08:00`).
+- **Analytics:** Some pages include Microsoft Clarity tracking scripts.
+
+## Agent Platform Advisor
+
+The advisor app at `/agent-platform-advisor/` has a documented design system in `DESIGN.md` and coding conventions in `CLAUDE.md`. Key constraints:
+- Primary blue is `#0078D4` (not `#0090FF`)
+- Body font is Segoe UI Variable — never swap to Inter, Roboto, etc.
+- Geist Mono for scores, platform labels, and step counters only
+- Canvas background uses a 3-stop diagonal gradient
+- Score bar animations use `IntersectionObserver` with ease-out cubic timing (~1s)
+- `apa.yaml` is the source of truth for all content, questions, and scoring logic
+- **Always update `agent-platform-advisor/CHANGELOG.md` after making changes to the advisor**
diff --git a/.github/workflows/apa-tests.yml b/.github/workflows/apa-tests.yml
@@ -0,0 +1,41 @@
+name: APA E2E Tests
+
+on:
+  push:
+    paths:
+      - 'agent-platform-advisor/**'
+  pull_request:
+    paths:
+      - 'agent-platform-advisor/**'
+
+defaults:
+  run:
+    working-directory: agent-platform-advisor
+
+jobs:
+  test:
+    name: Playwright E2E
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install chromium --with-deps
+
+      - name: Run Playwright tests
+        run: npx playwright test
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: agent-platform-advisor/test-results/
+          retention-days: 7
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 .claude/
 .gstack/
-.vscode/
+.vscode/
+node_modules/
diff --git a/agent-platform-advisor/.gitignore b/agent-platform-advisor/.gitignore
@@ -0,0 +1,2 @@
+test-results/
+playwright-report/
diff --git a/agent-platform-advisor/CLAUDE.md b/agent-platform-advisor/CLAUDE.md
@@ -0,0 +1,28 @@
+# Agent Platform Advisor — Claude Code Context
+
+## Design System
+
+Always read DESIGN.md before making any visual or UI decisions.
+All font choices, colors, spacing, border radius, shadows, and aesthetic direction are defined there.
+Do not deviate without explicit user approval.
+In QA mode, flag any code that doesn't match DESIGN.md.
+
+Key constraints from DESIGN.md:
+
+- Primary blue is `#0078D4` (not #0090FF or any other blue)
+- Body font is Segoe UI Variable with system fallbacks — never swap to Inter, Roboto, or similar
+- Geist Mono is used specifically for scores, platform labels, and step counters — not general body text
+- Canvas background uses a 3-stop diagonal gradient, not a flat color
+
+## Project Structure
+
+- `index.html` — main app shell (v2, YAML-driven)
+- `index_v1.html` — previous version, kept for reference
+- `apa.yaml` — scoring matrix and question definitions (source of truth for content)
+- `assets/apa.css` — all styles
+- `assets/apa.js` — all JavaScript
+- `DESIGN.md` — design system (read this before any CSS/UI work)
+
+## Key actions
+
+Always update CHANGELOG.md after making changes.
diff --git a/agent-platform-advisor/README.md b/agent-platform-advisor/README.md
@@ -0,0 +1,75 @@
+# Agent Platform Advisor
+
+Answer a few questions about what you're trying to build, and get a recommendation for the best Microsoft agent platform for your scenario.
+
+**Live tool:** [microsoft.github.io/cat/agent-platform-advisor](https://microsoft.github.io/cat/agent-platform-advisor/index.html)
+
+---
+
+## What it does
+
+The Agent Platform Advisor is a single-page web app that walks you through a short assessment and recommends the right Microsoft agent platform — **Agent Builder**, **Copilot Studio**, **Microsoft Foundry**, or **Microsoft 365 Copilot** — based on your answers.
+
+The assessment asks about:
+
+- Who is building the agent (business user, low-code maker, developer, data scientist)
+- Who will use it (internal employees or external users)
+- Where users will interact with it (Microsoft 365 apps, a custom app, background/event-triggered)
+- What the agent needs to do (Q&A, multi-turn conversation, multi-step tasks, complex orchestration)
+- What data the agent needs to access (Microsoft 365 content, external systems, advanced data sources)
+
+After completing the wizard, you get a primary recommendation with fit badges, key factors, score breakdown, contextual warnings for contradictory answer combinations, and a shareable link.
+
+## Project structure
+
+```
+agent-platform-advisor/
+├── index.html              # App shell (v2, YAML-driven)
+├── apa.yaml                # Scoring matrix, questions, recommendations, and content
+├── assets/
+│   ├── apa.css             # All styles
+│   └── apa.js              # All JavaScript
+├── images/                 # Platform icons and favicons
+├── docs/
+│   ├── CHANGELOG.md        # Version history
+│   ├── DESIGN.md           # Design system reference
+│   ├── FLOWCHART.md        # Scoring pipeline decision tree
+│   └── SCORING.md          # Scoring system reference
+└── tests/
+    └── e2e/                # Playwright end-to-end tests
+```
+
+The app is purely static — no build step, no backend. All content (questions, scores, platform descriptions, hard rules, tiebreakers) lives in `apa.yaml` and is fetched at runtime.
+
+## How scoring works
+
+See [docs/SCORING.md](docs/SCORING.md) for the full reference and [docs/FLOWCHART.md](docs/FLOWCHART.md) for a visual decision tree. The short version:
+
+1. **Hard rules** zero out platforms for certain answer combinations (e.g., Agent Builder is zeroed if the user needs external users, a custom app, background execution, or advanced data sources).
+2. **Raw scores** are summed across all 5 questions (max 15 points per platform).
+3. **Tiebreakers** in `apa.yaml` resolve equal scores using persona context (e.g., professional developer + tie → Copilot Studio preferred over Agent Builder).
+4. **Thresholds** map final scores to fit labels: Strong fit (12–15), Good fit (8–11), Partial fit (4–7), Not recommended (0–3).
+
+## Running the tests
+
+The project uses [Playwright](https://playwright.dev/) for end-to-end tests. Tests run against a local static file server.
+
+```bash
+npm install
+npm test              # headless
+npm run test:headed   # with browser visible
+```
+
+Tests cover wizard completion, shared link loading, temporal change detection, the M365 fast-track path, and share button behavior. CI runs automatically on push and pull request via GitHub Actions (`.github/workflows/apa-tests.yml`).
+
+## Sharing results
+
+After completing the assessment, a **Decision Card** appears with a "Share link" button. The URL encodes your answers and the recommendation date. Recipients can view the recommendation directly or retake the assessment with your answers pre-filled (`?mode=wizard`).
+
+If `apa.yaml` is updated after a link was shared and the recommendation has changed, the app shows a banner explaining what shifted (temporal change detection).
+
+## Contributing
+
+Content changes (question text, scores, platform descriptions, hard rules) go in `apa.yaml`. UI changes go in `assets/apa.css` and `assets/apa.js`. Read [docs/DESIGN.md](docs/DESIGN.md) before making any visual changes — colors, spacing, typography, and component specs are all defined there.
+
+Always update [docs/CHANGELOG.md](docs/CHANGELOG.md) after making changes.