Copilot Feature Matrix — Build Documentation¶

Tool URL: aguidetocloud.com/copilot-matrix/
Status: ✅ Built — v2 (3 tabs + all improvements)
Built: 2026-04-12
Accent Colour: Electric Blue #3B82F6
CSS Namespace: .cpmatrix-*
Body Class: page-copilot-matrix

What Is It?¶

An interactive tool that shows Microsoft 365 Copilot features across 3 dimensions:

By App → Pick Word, Excel, Teams → see what Copilot features are available per tier
By Tier → Compare Free vs Chat vs Pro vs M365 Copilot side-by-side
By Timeline → See what changed and when, with source links

Why This Tool Exists¶

The Copilot landscape is confusing:

4+ Copilot products with overlapping names
Features differ by app AND by licence tier
April 2026 changes removed in-app access for large orgs
No existing tool provides an interactive, searchable matrix

Gap we fill: Nobody has built a free, interactive tool that answers "for THIS app, with THIS licence, HERE are your Copilot features."

Architecture¶

data/copilot_matrix/
├── tiers.toml          # 4 Copilot product tiers with pricing
├── apps.toml           # 15 M365 apps with emoji, colour, category
├── features.toml       # 30+ features with per-app × per-tier availability
└── changelog.toml      # Timeline of feature changes with sources

content/copilot-matrix/
└── _index.md           # Front matter only (type: copilot-matrix)

layouts/copilot-matrix/
└── list.html           # Hugo template — injects TOML as JSON, 3-tab UI

static/css/copilot-matrix.css   # All styles (~400 lines)
static/js/copilot-matrix.js     # All logic (~300 lines)

Data Flow¶

TOML files → Hugo injects as window.__cpData → JS renders interactive UI

Same pattern as Licensing Simplifier, Prompt Library, etc.

Data Structure¶

Cell Metadata (Key Design Decision)¶

Each feature × app × tier cell is NOT just a string — it's an object:

[features.availability.word.m365]
state = "full"
note = "Full drafting grounded in org data"

States: full | partial | preview | none

The note field is critical — "partial" alone is misleading without context (e.g., "web only", "requires E5").

Each feature also has:

platforms — array of supported platforms: ["Windows", "Mac", "Web", "iOS", "Android"]
added_date — ISO date string (e.g., "2026-03-01") used for NEW badge (features added in last 60 days)

Each tier also has:

licensing_url — link to Licensing Simplifier comparison (e.g., "/licensing/?compare=m365-e3,m365-e5")

JS Validation¶

On load, JS validates all TOML IDs — warns in console if an app/tier/category ID doesn't match.

Data Freshness Strategy¶

Automated (via Copilot Self-Reminders)¶

Schedule	Action
Every 1st & 15th	Fetch MS Learn Copilot release notes → compare with current data → update `features.toml` + `changelog.toml` → deploy → notify
Every 1st of month	Cross-check M365 Roadmap data for Copilot items → verify feature states → update "Data last verified" date

Data Sources (ranked by reliability)¶

Source	Update Frequency	Automatable?
MS Learn Release Notes	Every 2 weeks	✅ Scrape page
M365 Roadmap API	Daily	✅ Already built
Tech Community blog	Monthly	⚡ RSS
WorkIQ (internal)	Continuous	Manual check

Features (v2 — 3 Tabs + All Improvements)¶

Tab 1: Feature Matrix¶

Interactive grid: Apps as columns, Features as rows
Tier sub-columns under each app (Free, Chat, Pro, M365)
Colour-coded dots with tooltips showing notes
Feature counts per app as badge on column headers
Feature descriptions visible below names (not just tooltip)
Platform tags (Windows/Mac/Web/iOS/Android) per feature
NEW badge on features added in last 60 days (green badge)
Real-time search + category filter + app filter
"I have this licence" filter — select your tier, shows only relevant tiers
Quick filter buttons: 🆓 What's Free? | 🚀 M365 Only | ✨ New | ✖ Clear | 🖨️ Print
Stats bar — shows feature count, new count, active filter
Full URL state — all filters saved in URL params for sharing
Mobile: App picker mode (one app at a time) instead of horizontal scroll
Print view — clean @media print layout with header and branding
Category row dividers with colour accent

Tab 2: Compare Tiers¶

4 side-by-side cards (Free, Chat, Pro, M365 Copilot)
Each shows: emoji, name, price, description, highlights, feature counts, "best for"
M365 Copilot card has "Most Complete" badge
Warning callout on Copilot Chat card (April 15 changes)
Cross-links: "View features in matrix →" jumps to Tab 1 pre-filtered
Cross-links: "Compare in Licensing Simplifier →" links to /licensing/

Tab 3: What Changed¶

Timeline with left-border line + dots
Change types: removal (red), launch (green), expansion (blue), feature (purple)
App badges per change entry
Source links on every entry
Impact filter (all vs high only)
Future changes marked with 🔮

Copilot Tiers Covered¶

Tier	Price	Data Access
Free (Microsoft Copilot)	Free	Public web only
Copilot Chat	Included with M365	Web + uploaded files
Copilot Pro	$20/user/month	Web + local files in apps
M365 Copilot	$30/user/month add-on	Org data (Microsoft Graph) + web

Apps Covered (15)¶

Word, Excel, PowerPoint, Outlook, Teams, OneNote, Loop, SharePoint, OneDrive, Planner, Whiteboard, Forms, Stream, Copilot Chat (web/app), Edge

Deferred Features (Post-MVP)¶

App Explorer tab — App cards with expand/collapse per-feature view
What Can I Do? Quiz — Personalised feature report based on answers
Share/Export — Download matrix as PNG or PDF
Prompt suggestions — Per app × feature prompt examples

How to Update Data¶

Add a new feature¶

Edit data/copilot_matrix/features.toml:

[[features]]
id = "new_feature_id"
name = "Feature Name"
description = "What it does"
category = "content_creation"   # Must match a feature_categories ID
[features.availability.word]
free = { state = "none" }
chat = { state = "partial", note = "Web only" }
pro = { state = "full" }
m365 = { state = "full", note = "Org-data aware" }

Add a new app¶

Edit data/copilot_matrix/apps.toml:

[[apps]]
id = "newapp"
name = "New App"
emoji = "🆕"
colour = "#hex"
category = "Productivity"
description = "What it does"

Add a changelog entry¶

Edit data/copilot_matrix/changelog.toml:

[[entries]]
date = "2026-05-01"
type = "feature"          # removal | launch | expansion | feature
scope = "M365 Copilot"
apps = ["word", "excel"]
title = "What changed"
summary = "Details..."
source = "https://learn.microsoft.com/..."
impact = "medium"         # high | medium | low

Deploy¶

cd C:\ssClawy\aguidetocloud-revamp
git add -A && git commit -m "Update Copilot Feature Matrix data" && git push

Design Decisions & Gotchas¶

Cell metadata, not just state strings — rubber-duck critique caught this. "Partial" without a note is misleading.
Mobile = app picker, not horizontal scroll — matrix is too wide for 15 apps on mobile.
3 tabs, not 5 — Quiz and App Explorer deferred to avoid scope creep.
JS validation on load — Warns on bad IDs to prevent silent data mistakes.
URL state — All filter selections saved in URL query params for sharing.
Accessibility — Focus outlines, prefers-reduced-motion, ARIA roles on tabs/grid.
Platform tags per feature — Some features are Windows-only or web-only. Critical for accuracy.
NEW badge = 60-day window — Cross-references added_date in TOML. Auto-expires.
"I have this licence" filter — Shows only tiers up to selected (cumulative). Most asked question.
Quick filters are toggles — Click once to activate, click again to deactivate. URL state preserved.
Print layout — @media print hides nav/filters/hero, shows only the matrix grid with a branded header.
Cross-links between tools — Tier cards link to both the matrix view (pre-filtered) and Licensing Simplifier.

Files Created¶

File	Purpose
`data/copilot_matrix/tiers.toml`	4 Copilot product tiers
`data/copilot_matrix/apps.toml`	15 M365 apps + categories
`data/copilot_matrix/features.toml`	30+ features with availability matrix
`data/copilot_matrix/changelog.toml`	8 timeline entries
`content/copilot-matrix/_index.md`	Hugo content page
`layouts/copilot-matrix/list.html`	Hugo template (3-tab UI)
`static/css/copilot-matrix.css`	All styles (~400 lines)
`static/js/copilot-matrix.js`	All logic (~300 lines)

Files Modified¶

File	Change
`layouts/_default/baseof.html`	Added `page-copilot-matrix` body class
`layouts/partials/nav.html`	Added "📊 Copilot Features" to Free Tools dropdown
`layouts/free-tools/list.html`	Added Copilot Feature Matrix card