From 008e0829dd082907fbbb7897718c7672b8f4ec4c Mon Sep 17 00:00:00 2001
From: Dimitrie Hoekstra <hi@dimitr.ie>
Date: Wed, 26 Aug 2026 12:02:32 +0200
Subject: [PATCH 01/11] /ai: rebuild on Nuxt and share the command block

Moves /ai from 11ty to Nuxt, following the strangler-fig migration the repo
guide describes, and deletes src/ai.njk so one renderer owns the route. Same
page, same copy, same classes: nuxt.config.ts already links /css/style.css
and layouts/default.vue already carries .ff-website, so all 223 gated rules
apply unchanged.

What the port buys:

- nuxt/components/content/FfCommand.vue replaces markup plus a per-page copy
  helper that was hand-pasted into src/platform/device-agent.njk and /ai.
  Living in components/content means markdown can use it too, so the
  changelog can carry the same block instead of restating the address.
- The agent tabs and the showcase rotation become reactive state rather than
  roughly 120 lines of querySelectorAll and setInterval in the page.
- FAQ structured data goes through useSchemaOrg. The 11ty partial
  interpolated answers into a JSON string, so markup in an answer landed in
  the schema.
- /ai moves from sitemap-legacy.xml into sitemap.xml.

Deliberate changes, not ports:

- Sign-up buttons are CtaSignUp, so the copy is the site's fixed "Try it
  out" and the event is cta-sign-up. The .njk had bespoke labels and reused
  cta-try-it-out.
- Governance and local-agent icons are UIcon lucide equivalents rather than
  inlined SVG includes.
---
 nuxt/components/content/FfCommand.vue      |  63 +++
 nuxt/pages/ai/index.vue                    | 516 +++++++++++++++++++++
 src/ai.njk                                 | 215 ---------
 src/css/style.css                          |  97 ++++
 src/images/ai/agents/README.md             |  25 +
 src/images/ai/agents/chatgpt.svg           |   3 +
 src/images/ai/agents/claude.svg            |   3 +
 src/images/ai/agents/flowfuse-expert.svg   |   2 +
 src/images/ai/agents/gemini.svg            |  10 +
 src/images/ai/agents/microsoft-copilot.svg |  40 ++
 src/images/ai/connect-your-own-agent.svg   |  55 +++
 src/images/ai/schematic-expert.svg         |  20 +
 src/images/ai/schematic-external.svg       |  20 +
 13 files changed, 854 insertions(+), 215 deletions(-)
 create mode 100644 nuxt/components/content/FfCommand.vue
 create mode 100644 nuxt/pages/ai/index.vue
 delete mode 100644 src/ai.njk
 create mode 100644 src/images/ai/agents/README.md
 create mode 100644 src/images/ai/agents/chatgpt.svg
 create mode 100644 src/images/ai/agents/claude.svg
 create mode 100644 src/images/ai/agents/flowfuse-expert.svg
 create mode 100644 src/images/ai/agents/gemini.svg
 create mode 100644 src/images/ai/agents/microsoft-copilot.svg
 create mode 100644 src/images/ai/connect-your-own-agent.svg
 create mode 100644 src/images/ai/schematic-expert.svg
 create mode 100644 src/images/ai/schematic-external.svg

diff --git a/nuxt/components/content/FfCommand.vue b/nuxt/components/content/FfCommand.vue
new file mode 100644
index 0000000000..cbbb0c281c
--- /dev/null
+++ b/nuxt/components/content/FfCommand.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+// The copyable command / URL block. Lives in components/content/ so markdown can
+// use it as ::ff-command{command="..."} as well as pages using it directly, which
+// is the point: before this, the markup was hand-copied into every 11ty page that
+// wanted one (src/platform/device-agent.njk, and /ai) with a per-page copy script.
+//
+// Styling comes from .ff-command in src/css/style.css, which nuxt.config.ts already
+// links on every Nuxt page, so there is no duplicated CSS here either.
+const props = withDefaults(defineProps<{
+    command: string
+    // Optional PostHog event fired on a successful copy. The 11ty version fired on
+    // click whether or not the copy landed; this only counts real copies.
+    event?: string
+    position?: string
+}>(), { event: undefined, position: undefined })
+
+const capture = useCapture()
+const copied = ref(false)
+let resetTimer: ReturnType<typeof setTimeout> | undefined
+
+async function writeToClipboard (text: string) {
+    if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(text)
+        return
+    }
+    // Fallback for a non-secure context, where navigator.clipboard is undefined.
+    const field = document.createElement('textarea')
+    field.value = text
+    field.setAttribute('readonly', '')
+    field.style.position = 'absolute'
+    field.style.left = '-9999px'
+    document.body.appendChild(field)
+    field.select()
+    document.execCommand('copy')
+    document.body.removeChild(field)
+}
+
+async function copy () {
+    try {
+        await writeToClipboard(props.command)
+    } catch {
+        return
+    }
+    if (props.event) capture(props.event, props.position ? { position: props.position } : undefined)
+    copied.value = true
+    clearTimeout(resetTimer)
+    resetTimer = setTimeout(() => { copied.value = false }, 2000)
+}
+
+onUnmounted(() => clearTimeout(resetTimer))
+</script>
+
+<template>
+  <div class="ff-command">
+    <code class="ff-command__text">{{ command }}</code>
+    <button
+      type="button"
+      class="ff-command__copy"
+      :class="{ 'ff-command__copy--done': copied }"
+      @click="copy"
+    >{{ copied ? 'Copied' : 'Copy' }}</button>
+  </div>
+</template>
diff --git a/nuxt/pages/ai/index.vue b/nuxt/pages/ai/index.vue
new file mode 100644
index 0000000000..ebd1aa875e
--- /dev/null
+++ b/nuxt/pages/ai/index.vue
@@ -0,0 +1,516 @@
+<script setup lang="ts">
+// Ported from src/ai.njk (11ty), which this replaces. Same page, same copy, same
+// classes from src/css/style.css, which nuxt.config.ts already links here.
+//
+// What the port changes on purpose:
+//  - The two hand-rolled DOM scripts (agent tabs, showcase rotation) become
+//    reactive state. That was ~120 lines of querySelectorAll in the .njk.
+//  - The copy button becomes <FfCommand>, shared with the changelog and any other
+//    markdown page, instead of markup plus a copy helper pasted per page.
+//  - jsonld.njk's meta.faq becomes useSchemaOrg, which escapes properly. The 11ty
+//    partial interpolated answers straight into a JSON string.
+//  - Sign-up buttons become <CtaSignUp>, so the copy is the site's fixed "Try it
+//    out" and the event is the unified cta-sign-up. The .njk had bespoke labels
+//    ("Start a free trial", "GET STARTED") and reused cta-try-it-out.
+useSeoMeta({
+    title: 'AI for Industrial Applications: Governed AI for Industry',
+    description: 'AI for industrial applications, without losing control: use FlowFuse Expert, or connect Copilot, ChatGPT, Claude or a local model to your operations.',
+    ogUrl: 'https://flowfuse.com/ai/',
+    twitterSite: '@FlowFuseinc',
+})
+
+const capture = useCapture()
+
+const LINK = 'text-indigo-600 hover:text-indigo-800 underline'
+
+const FAQ = [
+    {
+        question: 'What is AI for industrial applications?',
+        answer: 'AI for industrial applications means using AI to work with industrial data, equipment and processes. Common uses include helping engineers build automation applications, analysing machine data, inspecting products with computer vision, and allowing people or AI agents to interact with production systems. FlowFuse provides a platform for connecting these AI capabilities to industrial data and applications.',
+    },
+    {
+        question: 'How is AI used in industrial applications?',
+        answer: 'AI can support different parts of an industrial operation, from engineering and quality inspection to production monitoring and automation. For example, it can help generate application logic, analyse live machine data, identify defects from camera feeds, or let an AI agent interact with industrial systems. FlowFuse brings these capabilities into the same environment as the industrial applications and data they need to work with.',
+    },
+    {
+        question: 'What are examples of AI for industrial applications?',
+        answer: 'Examples include AI-assisted engineering, automated visual inspection, natural-language access to production data, AI agents that interact with industrial systems, and AI models running locally at the edge. With FlowFuse, teams can use FlowFuse Expert to build and explain applications, connect external AI agents over MCP, run ONNX vision models, and use cloud or local LLMs within industrial workflows.',
+    },
+    {
+        question: 'Can I use my own AI agent with FlowFuse?',
+        answer: 'Yes. FlowFuse acts as an MCP server, so Microsoft Copilot, ChatGPT, Claude, Gemini or a local model can connect to it and work your platform. You add one address, sign in, and choose which teams the agent may act on and whether it has editing rights or read access only. Because the agent is yours, so is the model behind it.',
+    },
+    {
+        question: 'How do you keep AI from making changes you did not approve?',
+        answer: 'Every AI action runs through the same permissions and role-based access control that govern your teams, enforced on every call, so a read-only grant is refused whatever the agent tries. No agent can delete an instance, an application, a snapshot or a team, deploying stays with a person, and every action is logged and attributed in the audit log.',
+    },
+]
+
+useSchemaOrg([
+    defineWebPage({ '@type': 'FAQPage' }),
+    ...FAQ.map(item => defineQuestion({ question: item.question, answer: item.answer })),
+])
+
+const ENDPOINT = 'https://app.flowfuse.com/mcp'
+const ENDPOINT_NOTE = 'Self-hosted, use your own platform address.'
+
+const STEP1 = {
+    title: 'Copy the FlowFuse connector URL',
+    description: 'You will paste this into your agent in the next step.',
+}
+const STEP3 = {
+    title: 'Sign in and choose what it reaches',
+    description: 'Which teams the agent may act on, and whether it has editing rights or read access only.',
+}
+
+// A client renders `logo` as a brand mark when set, `icon` as our own glyph when not.
+// A brand mark keeps its own colours so it stays an <img>; the glyph inherits
+// currentColor and turns white with the label when its tab is active.
+const CLIENTS = [
+    {
+        id: 'expert',
+        logo: '/images/ai/agents/flowfuse-expert.svg',
+        name: 'FlowFuse Expert',
+        builtIn: true,
+        step1Title: 'Sign in to FlowFuse',
+        step1Body: 'A new account puts you in a hosted instance with Expert already in the editor. Nothing to add, no connector, no token.',
+        step2Title: 'Or start with the Device Agent',
+        step2Body: 'Already running Node-RED on your own hardware? Connect it as a remote instance and Expert works there in the same way.',
+        step2Label: 'Install the Device Agent',
+        step2Url: '/docs/device-agent/quickstart/',
+        step3Title: 'Ask for what you need',
+        step3Body: 'Build a flow, explain one you inherited, write the Function node, or ask what is running on the floor. Every write waits for you to approve, edit or reject.',
+        noStep3Cta: true,
+    },
+    {
+        id: 'copilot',
+        logo: '/images/ai/agents/microsoft-copilot.svg',
+        name: 'Microsoft Copilot',
+        step2Title: 'Copilot Studio, Tools, Add a tool',
+        step2Body: 'Choose Model Context Protocol and paste the URL. Describe what it is for: the orchestrator reads that to decide when to call it.',
+        step2Label: 'Open Copilot Studio',
+        step2Url: 'https://copilotstudio.microsoft.com/',
+    },
+    {
+        id: 'chatgpt',
+        logo: '/images/ai/agents/chatgpt.svg',
+        name: 'ChatGPT',
+        step2Title: 'Settings, Connectors',
+        step2Body: 'An administrator enables custom connectors first, under Permissions and Roles.',
+        step2Label: 'Open ChatGPT',
+        step2Url: 'https://chatgpt.com/',
+    },
+    {
+        id: 'claude',
+        logo: '/images/ai/agents/claude.svg',
+        name: 'Claude',
+        step2Title: 'Settings, Customize, Connectors',
+        step2Body: 'Add a custom connector and paste the URL. On Team and Enterprise an owner adds it once for everyone.',
+        step2Label: 'Open Claude connectors',
+        step2Url: 'https://claude.ai/settings/connectors',
+    },
+    {
+        id: 'gemini',
+        logo: '/images/ai/agents/gemini.svg',
+        name: 'Gemini',
+        step2Title: 'Settings, Manage team, Connected apps',
+        step2Body: 'Add the FlowFuse URL as an MCP server.',
+        step2Label: 'Open Gemini',
+        step2Url: 'https://gemini.google.com/',
+    },
+    {
+        id: 'local',
+        icon: 'i-lucide-server',
+        name: 'Local and Custom Agents',
+        step2Title: "Your MCP client's config",
+        step2Body: 'Any MCP-capable client works, pointed at your own model, so nothing has to leave your network.',
+        step2Label: 'See the documentation',
+        step2Url: '/docs/user/expert/third-party-agents/#local-and-self-hosted-models',
+    },
+]
+
+const CODING_NOTE = 'Command-line and editor agents such as Claude Code, Cursor, Visual Studio Code and Gemini CLI connect to the same URL.'
+
+const activeClient = ref(CLIENTS[0].id)
+
+function selectClient (id: string) {
+    activeClient.value = id
+    capture('cta-ai-agent-tab', { position: id })
+}
+
+// Showcase: two views of the same platform, alternating so both get seen without
+// the reader doing anything. Picking one stops the rotation for good, which is the
+// expected behaviour for an auto-advancing control.
+const SHOWCASE_INTERVAL = 6000
+const SLIDES = [
+    {
+        id: 'expert',
+        label: 'FlowFuse Expert',
+        media: '/images/ai/schematic-expert.svg',
+        mediaAlt: 'FlowFuse Expert sits inside the FlowFuse platform and Node-RED, as part of it.',
+    },
+    {
+        id: 'external',
+        label: 'Your own agent',
+        media: '/images/ai/schematic-external.svg',
+        mediaAlt: 'An external AI agent stays its own thing and overlaps the FlowFuse platform and Node-RED, reaching into it.',
+    },
+]
+
+const activeSlide = ref(SLIDES[0].id)
+const rotating = ref(false)
+// Bumped on every switch so the fill animation restarts from zero. Vue reuses the
+// element, so re-adding a class alone would not retrigger the CSS animation.
+const fillKey = ref(0)
+let slideTimer: ReturnType<typeof setInterval> | undefined
+
+function stopRotation () {
+    if (slideTimer) { clearInterval(slideTimer); slideTimer = undefined }
+    rotating.value = false
+}
+
+function selectSlide (id: string) {
+    stopRotation()
+    activeSlide.value = id
+}
+
+onMounted(() => {
+    if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return
+    rotating.value = true
+    fillKey.value++
+    slideTimer = setInterval(() => {
+        const next = (SLIDES.findIndex(s => s.id === activeSlide.value) + 1) % SLIDES.length
+        activeSlide.value = SLIDES[next].id
+        fillKey.value++
+    }, SHOWCASE_INTERVAL)
+})
+
+onUnmounted(stopRotation)
+
+const GOVERNANCE = {
+    title: 'AI Governance you can <span class="text-indigo-600">prove</span>',
+    subtitle: 'The control plane every AI action runs through, the same one that governs your teams.',
+    items: [
+        { icon: 'i-lucide-lock', title: 'Only the teams you grant', description: 'AI reaches the teams you allow and nothing else, enforced by the platform on every call.' },
+        { icon: 'i-lucide-shield-check', title: 'Role-based access', description: 'The same RBAC that governs your teams governs what AI can see and do.' },
+        { icon: 'i-lucide-circle-check', title: 'Nothing gets deleted', description: 'No agent can remove an instance, an application, a snapshot or a team. There is no tool for it.' },
+        { icon: 'i-lucide-clipboard-check', title: 'Audit on everything', description: 'Every action AI takes is logged and attributed, so you can show exactly what happened and when.' },
+    ],
+}
+
+const CAPABILITY_INTRO = {
+    title: 'Every way AI shows up in <span class="text-indigo-600">your operations</span>',
+    subtitle: 'From accelerating how you build, to acting inside live flows, to connecting the AI your company already trusts. Each one runs on the same governed platform.',
+}
+
+// NOTE: Predictive analytics and Edge ML are intentionally omitted from public
+// claims (not shipped / not on the roadmap). Do not add them here without product
+// sign-off. `media` is an empty slot per item until the assets exist.
+const CAPABILITY_GROUPS = [
+    {
+        title: 'Accelerate engineering',
+        eyebrow: 'Build',
+        subtitle: 'FlowFuse Expert turns intent into working industrial applications, right in the editor.',
+        items: [
+            { name: 'AI-assisted engineering', description: `Generate and edit <a href="/node-red/" class="${LINK}">Node-RED</a> flows, Function node JavaScript, SQL queries and dashboard UI from plain language, and ask Expert to explain any existing flow so any engineer can pick it up. It works inline in the editor your team already uses, so there is no separate tool to context-switch into. That turns unfamiliar or inherited flows into something the whole team can read and maintain.` },
+            { name: 'Prompt-to-app', description: 'Describe the application you need and FlowFuse Expert agentically builds the starting flows and logic directly in your workspace. You begin from a working draft instead of a blank canvas, then refine it like any other flow. Everything it creates stays inside the platform, so the same permissions and review apply from the first node.' },
+            { name: 'Build your own AI agents', description: `Start from an agent blueprint, like the <a href="/blueprints/ai/llm-chat-agent/" class="${LINK}">LLM chat agent</a> or <a href="/blueprints/ai/rag-chat-agent/" class="${LINK}">RAG chat agent</a>, to stand up a task-specific AI agent grounded in your own data, tools and context. It gives you a proven structure to adapt rather than wiring an agent up from scratch. With MCP servers you can give the agent access to anything, including your RAG applications. Because it runs on the platform, the agent operates within the access you grant it.` },
+            { name: 'Built-in product knowledge', description: 'A chat assistant with answers grounded in FlowFuse and Node-RED documentation, so guidance comes from the product, not stale wikis. Ask how a node works or how to approach a build and get an answer without leaving your workspace. It shortens the path from question to working flow for new and experienced users alike.' },
+        ],
+    },
+    {
+        title: 'Operate with AI, safely',
+        eyebrow: 'Operate',
+        subtitle: 'AI that acts inside your flows and answers questions about live operations, always behind your controls.',
+        items: [
+            { name: 'Governed autonomous operations', externalNote: 'For external agents, approval cards do not apply. The access you granted is the control, enforced on every call.', description: 'Platform Automations let AI act on live systems, with every write behind an approval card, session-scoped and fully audited. A person approves, edits or rejects each proposed change before it reaches a machine. Nothing runs outside the permissions and RBAC that already govern your teams.' },
+            { name: 'Ask your plant anything', externalNote: 'For external agents, whether they can reach the MCP servers you build in your own flows depends on the agent.', description: 'In Insights mode, ask questions in natural language and get answers grounded in live machine state, alarms and logs. Operators and engineers can check what is happening on the floor without building a report or querying a database by hand. Table and MQTT-broker reading are coming soon.' },
+            { name: 'Automated visual inspection', description: `Run <a href="/node-red/flowfuse/ai/onxx/" class="${LINK}">ONNX</a> vision models inside flows next to the machine, with camera ingest over <a href="/node-red/flowfuse/edge/rtsp/" class="${LINK}">RTSP</a>, for inference that works offline and keeps data on your network. Detection results flow into the same logic as any other signal, so you can trigger alerts or actions from what the model sees. Running at the edge means no round trip to the cloud and no image data leaving the plant.` },
+            { name: 'Use any model within flows', description: `<a href="/node-red/flowfuse/ai/llm-nodes/" class="${LINK}">Certified LLM nodes</a> bring OpenAI, Anthropic, Gemini or local models via Ollama into any flow with your own keys. Choose the provider that fits each task, or keep everything on local models when data cannot leave your network. Because you supply the keys, model access and spend stay under your control.` },
+        ],
+    },
+    {
+        title: 'Connect your own agent',
+        eyebrow: 'Connect in',
+        subtitle: 'The agent your company already approved, working your platform and building in Node-RED. Your agent, your model, on a boundary you set.',
+        items: [
+            { name: 'Bring your own AI agent', description: 'Point Microsoft Copilot, ChatGPT, Claude or a local model at FlowFuse, sign in, and it can query your teams and instances and build Node-RED applications for you. Where company policy only permits an approved AI agent, this is how that agent reaches your operations, instead of nobody getting AI on the platform at all.' },
+            { name: 'You decide what it reaches', description: 'Signing in asks which teams the agent may act on and whether it may make changes at all. FlowFuse holds you to that on every call, so a read-only grant is refused whatever the agent tries. Nothing an agent reaches can delete an instance, an application, a snapshot or a team, and deploying stays yours.' },
+        ],
+    },
+    {
+        title: 'Expose your own tools',
+        eyebrow: 'Send out',
+        subtitle: 'The other direction. Your flows become tools that an agent can call as part of its work.',
+        items: [
+            { name: 'AI that uses your tools', externalNote: 'Anyone can build them. For external agents, whether they can call them depends on the agent.', description: `Build your own <a href="/node-red/flowfuse/mcp/" class="${LINK}">MCP servers</a> and let Insights-mode agents call your tools and services as part of a workflow. Wrap an internal API or system as a tool once, then let agents use it wherever it fits. The agent stays inside the workflow you designed, calling only the tools you register.` },
+        ],
+    },
+]
+
+const FURTHER_READING = [
+    { to: '/blog/2026/03/ai-usecases-in-factory/', title: '5 Places Smart Factories Are Already Using AI' },
+    { to: '/blog/2026/03/last-mile-problem-ai/', title: 'The Last Mile Problem in Industrial AI' },
+    { to: '/blog/2026/06/process-rtsp-camera-feeds-at-the-edge/', title: 'Processing RTSP Camera Feeds at the Edge' },
+    { to: '/blog/2026/02/motor-anomaly-detector-ai/', title: 'Building an AI Vibration Anomaly Detector for Industrial Motors' },
+]
+
+const openFaq = ref<number | null>(null)
+</script>
+
+<template>
+  <div>
+    <!-- HERO: the agent picker is the primary action on this page, so it lives here
+         rather than below a wall of positioning copy. -->
+    <section class="w-full relative bg-white">
+      <div class="relative z-10 w-full px-6 pt-12 md:pt-24 pb-10">
+        <div class="sm:max-w-screen-lg mt-6 sm:mt-12 mx-auto">
+          <div class="container m-auto text-left max-w-screen-lg">
+            <div class="max-w-3xl mx-auto">
+              <h1 class="font-medium home m-auto text-center text-gray-900 mb-6 max-w-2xl">
+                <span class="text-indigo-600">AI for Industrial Applications,</span> Governed and Built-In
+              </h1>
+              <p class="text-center text-xl md:text-2xl font-medium text-gray-800 max-w-2xl mx-auto mb-6">
+                The platform is the <span class="text-indigo-600">control plane.</span> AI is the <span class="text-indigo-600">accelerator.</span>
+              </p>
+              <p class="text-center max-w-4xl mx-auto text-gray-600">
+                AI capability is table stakes in 2026. Governed access to your operations is the difference.
+              </p>
+            </div>
+
+            <!-- CONNECTOR: pick your agent, then three steps specific to it, so the
+                 reader only sees the instructions that apply to them. -->
+            <div class="mt-12 border border-gray-200 bg-white">
+              <div class="ff-agent-tabs flex flex-nowrap gap-1 overflow-x-auto border-b border-gray-200 p-2" role="tablist" aria-label="Choose your AI agent">
+                <button
+                  v-for="client in CLIENTS"
+                  :id="`ff-tab-${client.id}`"
+                  :key="client.id"
+                  type="button"
+                  role="tab"
+                  :aria-controls="`ff-panel-${client.id}`"
+                  :aria-selected="activeClient === client.id"
+                  class="ff-agent-tab ff-btn flex flex-none items-center gap-2 whitespace-nowrap"
+                  :class="activeClient === client.id ? 'ff-btn--primary' : 'text-gray-700 hover:bg-gray-100'"
+                  @click="selectClient(client.id)"
+                >
+                  <UIcon v-if="client.icon" :name="client.icon" class="flex-none size-4" aria-hidden="true" />
+                  <img v-else-if="client.logo" :src="client.logo" alt="" class="h-4 w-auto flex-none" aria-hidden="true">
+                  <span>{{ client.name }}</span>
+                </button>
+              </div>
+
+              <div
+                v-for="client in CLIENTS"
+                v-show="activeClient === client.id"
+                :id="`ff-panel-${client.id}`"
+                :key="`panel-${client.id}`"
+                role="tabpanel"
+                :aria-labelledby="`ff-tab-${client.id}`"
+                class="ff-agent-panel grid grid-cols-1 md:grid-cols-3 gap-8 p-6 md:p-8"
+              >
+                <div class="flex flex-col">
+                  <p class="font-mono text-xs font-semibold text-indigo-600 m-0">01</p>
+                  <p class="text-lg font-medium text-gray-900 mt-2 mb-0">{{ client.builtIn ? client.step1Title : STEP1.title }}</p>
+                  <p class="text-gray-600 font-light text-sm mt-2 mb-0">{{ client.builtIn ? client.step1Body : STEP1.description }}</p>
+                  <div v-if="client.builtIn" class="mt-auto pt-5">
+                    <CtaSignUp variant="primary" position="ai-tab-expert" />
+                  </div>
+                  <div v-else class="mt-auto pt-5">
+                    <p class="text-xs text-gray-500 mb-2">{{ ENDPOINT_NOTE }}</p>
+                    <FfCommand :command="ENDPOINT" event="cta-copy-mcp-endpoint" :position="client.id" />
+                  </div>
+                </div>
+
+                <div class="flex flex-col">
+                  <p class="font-mono text-xs font-semibold text-indigo-600 m-0">02</p>
+                  <p class="text-lg font-medium text-gray-900 mt-2 mb-0">{{ client.step2Title }}</p>
+                  <p class="text-gray-600 font-light text-sm mt-2 mb-0">{{ client.step2Body }}</p>
+                  <div class="mt-auto pt-5">
+                    <a
+                      :href="client.step2Url"
+                      class="ff-btn ff-btn--primary-outlined"
+                      :target="client.step2Url.startsWith('http') ? '_blank' : undefined"
+                      :rel="client.step2Url.startsWith('http') ? 'noopener' : undefined"
+                      @click="capture('cta-ai-open-client', { position: client.id })"
+                    >{{ client.step2Label }}</a>
+                  </div>
+                </div>
+
+                <div class="flex flex-col">
+                  <p class="font-mono text-xs font-semibold text-indigo-600 m-0">03</p>
+                  <p class="text-lg font-medium text-gray-900 mt-2 mb-0">{{ client.step3Title || STEP3.title }}</p>
+                  <p class="text-gray-600 font-light text-sm mt-2 mb-0">{{ client.step3Body || STEP3.description }}</p>
+                  <div v-if="!client.noStep3Cta" class="mt-auto pt-5">
+                    <CtaSignUp variant="primary" position="ai-connect-step3" />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <p class="text-sm text-gray-500 mt-5 mb-0">
+              {{ CODING_NOTE }}
+              <a href="/docs/user/expert/third-party-agents/" class="text-indigo-600 font-semibold">See the documentation</a>.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- SHOWCASE: one well, two views. Containment versus overlap carries the
+         Expert / bring-your-own distinction in a glance. -->
+    <div class="w-full bg-white px-6 pt-10 sm:pt-14 pb-8 sm:pb-10">
+      <div class="md:max-w-screen-lg mx-auto" :style="{ '--ff-show-duration': `${SHOWCASE_INTERVAL}ms` }">
+        <div class="ff-show-tabs" role="tablist" aria-label="Choose a view">
+          <button
+            v-for="slide in SLIDES"
+            :id="`ff-show-tab-${slide.id}`"
+            :key="slide.id"
+            type="button"
+            role="tab"
+            :aria-controls="`ff-show-panel-${slide.id}`"
+            :aria-selected="activeSlide === slide.id"
+            class="ff-show-tab"
+            :class="{ 'is-active': activeSlide === slide.id }"
+            @click="selectSlide(slide.id)"
+          >
+            <span class="ff-show-tab__label">{{ slide.label }}</span>
+            <span class="ff-show-tab__track">
+              <span
+                v-if="activeSlide === slide.id"
+                :key="fillKey"
+                class="ff-show-tab__fill"
+                :class="rotating ? 'is-running' : 'is-full'"
+              />
+              <span v-else class="ff-show-tab__fill" />
+            </span>
+          </button>
+        </div>
+        <div class="ff-showcase">
+          <div
+            v-for="slide in SLIDES"
+            v-show="activeSlide === slide.id"
+            :id="`ff-show-panel-${slide.id}`"
+            :key="`show-${slide.id}`"
+            role="tabpanel"
+            :aria-labelledby="`ff-show-tab-${slide.id}`"
+            class="ff-cap-well"
+          >
+            <img :src="slide.media" :alt="slide.mediaAlt" class="w-full h-full object-cover" loading="lazy">
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- GOVERNANCE: the control plane every AI action runs through. Path-neutral,
+         which is what lets it sit above the picker rather than under Expert. -->
+    <div class="w-full pt-4 pb-16 sm:pt-6 sm:pb-24 px-6">
+      <div class="md:max-w-screen-lg m-auto ff-blue-card pt-12 pb-12 px-6 md:px-10">
+        <div class="text-center max-w-3xl mx-auto">
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <h2 class="w-full" v-html="GOVERNANCE.title" />
+          <p class="mt-3 text-gray-600">{{ GOVERNANCE.subtitle }}</p>
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mt-12">
+          <div v-for="tile in GOVERNANCE.items" :key="tile.title" class="flex flex-col items-center text-center gap-3">
+            <UIcon :name="tile.icon" class="size-8 text-indigo-600" aria-hidden="true" />
+            <p class="font-medium text-indigo-700 m-0">{{ tile.title }}</p>
+            <p class="text-sm text-gray-600 font-light m-0">{{ tile.description }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- CAPABILITIES: every AI use case, grouped by how it shows up in operations.
+         Group headers pin on desktop and alternate sides per group. -->
+    <div id="capabilities" class="w-full bg-indigo-50/60 py-16 sm:py-24 px-6 border-t border-gray-100 scroll-mt-16">
+      <div class="md:max-w-screen-lg m-auto">
+        <div class="max-w-4xl">
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <h2 class="w-full" v-html="CAPABILITY_INTRO.title" />
+          <p class="mt-3 text-gray-600">{{ CAPABILITY_INTRO.subtitle }}</p>
+        </div>
+        <section
+          v-for="(group, gi) in CAPABILITY_GROUPS"
+          :key="group.title"
+          class="ff-cap-group md:grid md:grid-cols-5 md:gap-x-12 lg:gap-x-16 mt-24"
+          :class="{ 'pt-20 border-t border-indigo-200/70': gi > 0 }"
+        >
+          <div class="ff-cap-sticky md:col-span-2 max-md:mb-10" :class="{ 'md:col-start-4': (gi + 1) % 2 === 0 }">
+            <p class="flex items-center gap-3 text-xs font-semibold uppercase tracking-[0.16em] text-indigo-600 m-0">
+              <span class="font-mono text-indigo-600">0{{ gi + 1 }}</span>
+              <span>{{ group.eyebrow }}</span>
+            </p>
+            <h3 class="text-3xl md:text-4xl font-medium text-gray-900 leading-tight mt-4 mb-0">{{ group.title }}</h3>
+            <p class="text-gray-600 font-light max-w-md mt-4 mb-0">{{ group.subtitle }}</p>
+          </div>
+          <div class="md:col-span-3" :class="{ 'md:col-start-1 md:row-start-1': (gi + 1) % 2 === 0 }">
+            <div
+              v-for="(item, ii) in group.items"
+              :key="item.name"
+              class="ff-cap-item px-2 py-7"
+              :class="ii === 0 ? 'md:pt-0' : 'mt-6 pt-14 border-t border-indigo-100'"
+            >
+              <!-- MEDIA WELL: a reserved 16:9 slot for a screenshot or short loop.
+                   Visible while empty on purpose, so the page shows where the assets
+                   go rather than reflowing when they land. -->
+              <div class="ff-cap-well" />
+              <div class="flex flex-wrap items-center gap-x-3 gap-y-2 mt-5">
+                <span class="text-xl font-medium text-gray-900">{{ item.name }}</span>
+              </div>
+              <!-- eslint-disable-next-line vue/no-v-html -->
+              <p class="text-gray-600 font-light mt-2 mb-0" v-html="item.description" />
+              <p v-if="item.externalNote" class="ff-cap-differs mt-3 mb-0">{{ item.externalNote }}</p>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+
+    <!-- FURTHER READING: keeps the page from being a dead end and points at where
+         the depth actually is. -->
+    <div class="w-full px-6 pb-16 sm:pb-20 pt-16 sm:pt-20">
+      <div class="md:max-w-screen-lg m-auto">
+        <h2 class="max-md:text-center">More on <span class="text-indigo-600">industrial AI</span></h2>
+        <p class="mt-3 text-gray-600 max-w-3xl">
+          Worked examples and the thinking behind them, from the
+          <a href="/blog/ai/" :class="LINK">FlowFuse AI blog</a>.
+        </p>
+        <ul class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4 list-none p-0">
+          <li v-for="post in FURTHER_READING" :key="post.to" class="m-0">
+            <a :href="post.to" :class="LINK">{{ post.title }}</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- FAQ: the questions are also emitted as FAQPage structured data by
+         useSchemaOrg above, off the same array. -->
+    <div id="faqs" class="w-full px-6 pt-20 pb-16 bg-indigo-50/50">
+      <div class="max-w-screen-lg mx-auto">
+        <h2 class="mb-8">Frequently Asked <span class="text-indigo-600">Questions</span></h2>
+        <div v-for="(item, i) in FAQ" :key="item.question" class="w-full py-4" :class="{ 'border-b': i < FAQ.length - 1 }">
+          <h3 class="m-0">
+            <button
+              type="button"
+              class="flex flex-row justify-between items-center w-full m-0 p-0 gap-6 cursor-pointer text-left bg-transparent border-0 text-lg font-medium"
+              :aria-expanded="openFaq === i"
+              :aria-controls="`answer-${i}`"
+              @click="openFaq = openFaq === i ? null : i"
+            >
+              <span>{{ item.question }}</span>
+              <UIcon
+                name="i-lucide-chevron-down"
+                class="size-5 shrink-0 transition-transform duration-300 ease-in-out"
+                :class="{ 'rotate-180': openFaq === i }"
+                aria-hidden="true"
+              />
+            </button>
+          </h3>
+          <div v-show="openFaq === i" :id="`answer-${i}`" class="px-6 mt-6">
+            <p class="text-gray-600">{{ item.answer }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/ai.njk b/src/ai.njk
deleted file mode 100644
index 321f9ba389..0000000000
--- a/src/ai.njk
+++ /dev/null
@@ -1,215 +0,0 @@
----
-layout: page
-nohero: true
-imageDescription: "Plant worker interacting with an HMI"
-meta:
-    title: "Industrial AI: FlowFuse Expert, Governed and Built-In"
-    description: "Industrial AI with FlowFuse: build industrial applications with FlowFuse Expert, act on live operations behind approvals, and give your company-sanctioned AI governed access. Every AI capability on one platform, with the permissions, RBAC, and audit your plants require."
-hero:
-    title: "<span class='text-indigo-600'>Industrial AI,</span> Governed and Built-In"
-    description:
-        - "AI capability is table stakes in 2026. Governed access to your operations is the difference."
-    buttonText: "Request a Demo"
-    buttonLink: "/book-demo/"
-    buttonReference: "ai"
-    img: ./images/ai/ai-hero.png
-    imgAlt: "FlowFuse Expert AI icon with connecting lines flowing out"
-capabilityIntro:
-    title: "Every way AI shows up in <span class='text-indigo-600'>your operations</span>"
-    subtitle: "From accelerating how you build, to acting inside live flows, to connecting the AI your company already trusts. Each one runs on the same governed platform."
-capabilityGroups:
-    - title: "Accelerate engineering"
-      eyebrow: "Build"
-      subtitle: "FlowFuse Expert turns intent into working industrial applications, right in the editor."
-      items:
-        - name: "AI-assisted engineering"
-          svgPath: "components/icons/code-bracket.svg"
-          status: "Available"
-          statusKind: "live"
-          description: "Generate and edit Node-RED flows, Function node JavaScript, SQL queries and dashboard UI from plain language, and ask Expert to explain any existing flow so any engineer can pick it up. It works inline in the editor your team already uses, so there is no separate tool to context-switch into. That turns unfamiliar or inherited flows into something the whole team can read and maintain."
-        - name: "Prompt-to-app"
-          svgPath: "components/icons/sparkles.svg"
-          status: "Available"
-          statusKind: "live"
-          description: "Describe the application you need and FlowFuse Expert agentically builds the starting flows and logic directly in your workspace. You begin from a working draft instead of a blank canvas, then refine it like any other flow. Everything it creates stays inside the platform, so the same permissions and review apply from the first node."
-        - name: "Build your own AI agents"
-          svgPath: "components/icons/squares-plus.svg"
-          status: "Available"
-          statusKind: "live"
-          description: "Start from an agent blueprint, like the <a href='/blueprints/ai/llm-chat-agent/' class='text-indigo-600 hover:text-indigo-800 underline'>LLM chat agent</a> or <a href='/blueprints/ai/rag-chat-agent/' class='text-indigo-600 hover:text-indigo-800 underline'>RAG chat agent</a>, to stand up a task-specific AI agent grounded in your own data, tools and context. It gives you a proven structure to adapt rather than wiring an agent up from scratch. With MCP servers you can give the agent access to anything, including your RAG applications. Because it runs on the platform, the agent operates within the access you grant it."
-        - name: "Built-in product expert"
-          svgPath: "components/icons/book-open.svg"
-          status: "Available"
-          statusKind: "live"
-          description: "A chat assistant with answers grounded in FlowFuse and Node-RED documentation, so guidance comes from the product, not stale wikis. Ask how a node works or how to approach a build and get an answer without leaving your workspace. It shortens the path from question to working flow for new and experienced users alike."
-    - title: "Operate with AI, safely"
-      eyebrow: "Operate"
-      subtitle: "AI that acts inside your flows and answers questions about live operations, always behind your controls."
-      items:
-        - name: "Governed autonomous operations"
-          svgPath: "components/icons/bolt.svg"
-          status: "Available"
-          statusKind: "live"
-          description: "Platform Automations let AI act on live systems, with every write behind an approval card, session-scoped and fully audited. A person approves, edits or rejects each proposed change before it reaches a machine. Nothing runs outside the permissions and RBAC that already govern your teams."
-        - name: "Ask your plant anything"
-          svgPath: "components/icons/chat-bubble-left-right.svg"
-          status: "Available"
-          statusKind: "live"
-          description: "In Insights mode, ask questions in natural language and get answers grounded in live machine state, alarms and logs. Operators and engineers can check what is happening on the floor without building a report or querying a database by hand. Table and MQTT-broker reading are coming soon."
-        - name: "Automated visual inspection"
-          svgPath: "components/icons/camera.svg"
-          status: "Available"
-          statusKind: "live"
-          description: "Run ONNX vision models inside flows next to the machine, with camera ingest over RTSP, for inference that works offline and keeps data on your network. Detection results flow into the same logic as any other signal, so you can trigger alerts or actions from what the model sees. Running at the edge means no round trip to the cloud and no image data leaving the plant."
-        - name: "Use any model within flows"
-          svgPath: "components/icons/cog-6-tooth.svg"
-          status: "Available"
-          statusKind: "live"
-          description: "Certified LLM nodes bring OpenAI, Anthropic, Gemini or local models via Ollama into any flow with your own keys. Choose the provider that fits each task, or keep everything on local models when data cannot leave your network. Because you supply the keys, model access and spend stay under your control."
-    - title: "Connect and govern your AI"
-      eyebrow: "Connect"
-      subtitle: "Give the AI your company already trusts a governed door into operations, on a boundary you control."
-      items:
-        - name: "Connect your company's AI"
-          svgPath: "components/icons/arrows-right-left.svg"
-          status: "Coming soon"
-          statusKind: "soon"
-          description: "Expose flows as MCP tools so the AI your company already sanctioned, like Claude or Copilot, can reach operational data through a permissioned boundary. The AI reaches only what you expose, on the terms you set, rather than getting direct access to plant systems. This is our most-requested capability and is in active development."
-        - name: "AI that uses your tools"
-          svgPath: "components/icons/puzzle-piece.svg"
-          status: "Available"
-          statusKind: "live"
-          description: "Build your own MCP servers and let Insights-mode agents call your tools and services as part of a workflow. Wrap an internal API or system as a tool once, then let agents use it wherever it fits. The agent stays inside the workflow you designed, calling only the tools you register."
-governance:
-    title: "Governance you can <span class='text-indigo-600'>prove</span>"
-    subtitle: "The control plane every AI action runs through, the same one that governs your teams."
-    items:
-        - svgPath: "components/icons/check-circle.svg"
-          title: "Approval cards on writes"
-          description: "Every write action AI proposes waits for a human to approve, reject or edit."
-        - svgPath: "components/icons/lock-closed.svg"
-          title: "Per-tool permissions"
-          description: "Grant read, write or delete per tool and per team, so AI only reaches what you allow."
-        - svgPath: "components/icons/shield-check.svg"
-          title: "Role-based access"
-          description: "The same RBAC that governs your teams governs what AI can see and do."
-        - svgPath: "components/icons/clipboard-document-check.svg"
-          title: "Audit on everything"
-          description: "Every action AI touches is logged, so you can show exactly what happened and when."
----
-<!--Hero Content (background-image treatment, pattern from the homepage hero) -->
-<section class="w-full relative bg-white">
-    <div class="relative z-10 w-full px-6 pt-12 md:pt-24 pb-10">
-        <div class="sm:max-w-screen-lg mt-6 sm:mt-12 mx-auto">
-            <div class="container m-auto text-left max-w-screen-lg">
-                <div class="mx-auto">
-                    <div class="max-w-3xl mx-auto">
-                        <h1 class="font-medium home m-auto text-center text-gray-900 mb-6 max-w-2xl">
-                            {{ hero.title | safe }}
-                        </h1>
-                        <p class="text-center text-xl md:text-2xl font-medium text-gray-800 max-w-2xl mx-auto mb-6">The platform is the <span class="text-indigo-600">control plane.</span> AI is the <span class="text-indigo-600">accelerator.</span></p>
-                        {% for p in hero.description %}
-                            <p class="text-center max-w-4xl mx-auto text-gray-600">{{ p | safe }}</p>
-                        {% endfor %}
-                    </div>
-                    <div class="mt-10">
-                        <!-- AI Chat Interface -->
-                        {% include "components/ai-chat-interface.njk" %}
-
-                        <!-- AI Expert Modal -->
-                        {% include "components/ai-expert-modal.njk" %}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
-
-<!-- PRODUCT: FlowFuse Expert in action. Sits between the hero and the capability
-     sections so the page shows the product before it explains it, and so the hero
-     is not separated from the rest of the page by a band of empty white. -->
-<div class="w-full bg-white px-6 pb-16 sm:pb-20">
-    <div class="md:max-w-screen-lg mx-auto">
-        <div class="w-full rounded-lg border-1 border-transparent bg-gradient-to-br from-red-400 to-indigo-400 p-[1px]">
-            <div class="w-full bg-white ff-image-cover ff-image-rounded left">
-                {% image "./images/ai/ai-ui.png", "FlowFuse Expert showing AI-generated flow suggestions", [1200] %}
-            </div>
-        </div>
-    </div>
-</div>
-<!-- CAPABILITIES: every AI use case, formalized, grouped by how it shows up in operations.
-     NOTE: Predictive analytics and Edge ML are intentionally omitted from public claims
-     (not shipped / not on the roadmap). Do not add them here without product sign-off. -->
-<div class="w-full bg-indigo-50/60 py-16 sm:py-24 px-6 border-t border-gray-100">
-    <div class="md:max-w-screen-lg m-auto">
-        <div class="max-w-4xl">
-            <h2 class="w-full">{{ capabilityIntro.title | safe }}</h2>
-            <p class="mt-3 text-gray-600">{{ capabilityIntro.subtitle }}</p>
-        </div>
-        {% for group in capabilityGroups %}
-        <section class="ff-cap-group md:grid md:grid-cols-5 md:gap-x-12 lg:gap-x-16 mt-24 {% if not loop.first %}pt-20 border-t border-indigo-200/70{% endif %}">
-            <!-- LEFT: group header, pins on desktop while the right column scrolls -->
-            <div class="ff-cap-sticky md:col-span-2 max-md:mb-10">
-                <p class="flex items-center gap-3 text-xs font-semibold uppercase tracking-[0.16em] text-indigo-600 m-0">
-                    <span class="font-mono text-indigo-600">0{{ loop.index }}</span>
-                    <span>{{ group.eyebrow }}</span>
-                </p>
-                <h3 class="text-3xl md:text-4xl font-medium text-gray-900 leading-tight mt-4 mb-0">{{ group.title }}</h3>
-                <p class="text-gray-600 font-light max-w-md mt-4 mb-0">{{ group.subtitle }}</p>
-            </div>
-            <!-- RIGHT: the group's capabilities as icon-marked, scrolling blocks.
-                 These are informational, not links: no click affordance, no tabindex. -->
-            <div class="md:col-span-3">
-                {% for item in group.items %}
-                <div class="ff-cap-item px-2 py-7 {% if not loop.first %}mt-6 pt-14 border-t border-indigo-100{% endif %}">
-                    <div class="flex items-start gap-4 sm:gap-5">
-                        <span class="ff-cap-icon" aria-hidden="true">{% include item.svgPath %}</span>
-                        <div class="flex-1 min-w-0">
-                            <div class="flex flex-wrap items-center gap-x-3 gap-y-2">
-                                <span class="text-xl font-medium text-gray-900">{{ item.name }}</span>
-                                {% if item.statusKind == 'soon' %}
-                                <span class="ff-cap-soon bg-amber-50 text-amber-700 border border-amber-200">Coming soon</span>
-                                {% endif %}
-                            </div>
-                            <p class="text-gray-600 font-light mt-2 mb-0">{{ item.description | safe }}</p>
-                        </div>
-                    </div>
-                </div>
-                {% endfor %}
-            </div>
-        </section>
-        {% endfor %}
-    </div>
-</div>
-<!-- GOVERNANCE: the control plane every AI action runs through -->
-<div class="w-full py-16 sm:py-24 px-6 border-t border-gray-100">
-    <div class="md:max-w-screen-lg m-auto ff-blue-card pt-12 pb-12 px-6 md:px-10">
-        <div class="text-center max-w-3xl mx-auto">
-            <h2 class="w-full">{{ governance.title | safe }}</h2>
-            <p class="mt-3 text-gray-600">{{ governance.subtitle }}</p>
-        </div>
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mt-12">
-            {% for g in governance.items %}
-            <div class="flex flex-col items-center text-center gap-3">
-                <div class="w-8 h-8 text-indigo-600">{% include g.svgPath %}</div>
-                <p class="font-medium text-indigo-700 m-0">{{ g.title }}</p>
-                <p class="text-sm text-gray-600 font-light m-0">{{ g.description }}</p>
-            </div>
-            {% endfor %}
-        </div>
-    </div>
-</div>
-
-
-
-<!-- USE CASES: where AI meets operations (cross-links per web task) -->
-<div class="w-full py-16 sm:py-24 px-6 bg-gray-50 border-t border-gray-100">
-    <div class="max-w-screen-lg mx-auto">
-        <h2 class="max-md:text-center">Where AI meets <span class="text-indigo-600">your operations</span></h2>
-        <p class="mt-4 max-w-3xl text-gray-600">The use cases pair with FlowFuse AI, from governed agent access to AI-assisted monitoring.</p>
-        {% set featuredUseCases = ["production-monitoring", "shop-floor-communication"] %}
-        {% include "components/use-case-links.njk" %}
-        <p class="mt-8"><a href="/use-cases/" class="text-indigo-600 font-semibold">See all use cases</a></p>
-    </div>
-</div>
-
diff --git a/src/css/style.css b/src/css/style.css
index 0be94f9c0a..0aa1b7d2cb 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -3248,6 +3248,103 @@ lite-youtube::before {
     height: 2.5rem;
     color: var(--color-indigo-600);
 }
+/* "Differs by agent" clause: sits under a capability whose behaviour is not identical
+   on the FlowFuse Expert path and the bring-your-own-agent path. Quieter than the body
+   copy, and set off by a rule, so it reads as a qualification rather than a feature. */
+.ff-cap-differs {
+    font-size: 0.875rem;
+    line-height: 1.6;
+    color: var(--color-gray-500);
+    padding-left: 0.875rem;
+    border-left: 2px solid var(--color-indigo-200);
+}
+
+/* Showcase tabs: text labels with a timing line, not buttons. The line under the active
+   tab fills over the rotation interval so the switch is expected rather than sudden. */
+.ff-show-tabs {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+/* Each tab takes an equal share of the row, so the timing lines together span the
+   full width of the well below them. */
+.ff-show-tab {
+    flex: 1 1 0;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0;
+    background: none;
+    border: 0;
+    text-align: left;
+    cursor: pointer;
+}
+.ff-show-tab__label {
+    font-size: 0.95rem;
+    font-weight: 400;
+    color: var(--color-gray-500);
+    transition: color 0.15s ease;
+    white-space: nowrap;
+}
+.ff-show-tab.is-active .ff-show-tab__label,
+.ff-show-tab:hover .ff-show-tab__label {
+    color: var(--color-gray-900);
+}
+.ff-show-tab.is-active .ff-show-tab__label { font-weight: 500; }
+
+.ff-show-tab__track {
+    display: block;
+    height: 2px;
+    width: 100%;
+    background-color: var(--color-gray-200);
+    overflow: hidden;
+}
+.ff-show-tab__fill {
+    display: block;
+    height: 100%;
+    width: 0;
+    background-color: var(--color-indigo-600);
+}
+.ff-show-tab__fill.is-full { width: 100%; }
+.ff-show-tab__fill.is-running {
+    animation: ffShowFill var(--ff-show-duration, 6000ms) linear forwards;
+}
+@keyframes ffShowFill {
+    from { width: 0; }
+    to { width: 100%; }
+}
+@media (prefers-reduced-motion: reduce) {
+    .ff-show-tab__fill.is-running { animation: none; width: 100%; }
+}
+
+/* Agent tab strip: scrolls sideways rather than wrapping, so the row stays one line at
+   any width. Thin scrollbar so it reads as a control, not a scroll container. */
+.ff-agent-tabs {
+    scrollbar-width: thin;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior-x: contain;
+}
+.ff-agent-tabs::-webkit-scrollbar {
+    height: 6px;
+}
+.ff-agent-tabs::-webkit-scrollbar-thumb {
+    background-color: var(--color-gray-300);
+    border-radius: 3px;
+}
+
+/* Media well: a reserved 16:9 slot under each capability, for a screenshot or a
+   short loop. Deliberately visible while empty so the page shows where the assets
+   go, rather than collapsing and then reflowing when they land. */
+.ff-cap-well {
+    aspect-ratio: 16 / 9;
+    width: 100%;
+    overflow: hidden;
+    background-color: var(--color-white);
+    border: 1px solid var(--color-indigo-100);
+}
+
 .ff-cap-icon svg {
     width: 1.875rem;
     height: 1.875rem;
diff --git a/src/images/ai/agents/README.md b/src/images/ai/agents/README.md
new file mode 100644
index 0000000000..d4c5dc581f
--- /dev/null
+++ b/src/images/ai/agents/README.md
@@ -0,0 +1,25 @@
+# Agent marks for the /ai connector tabs
+
+Each tab in the "connect your own agent" section renders `client.logo` when it is set in
+`src/ai.njk`, and falls back to the agent's name as text when it is not.
+
+| File | Tab | Source |
+| --- | --- | --- |
+| `microsoft-copilot.svg` | Microsoft Copilot | `adoption.microsoft.com/wp-content/uploads/2023/09/icon-copilot.svg`, a Microsoft-owned domain. **Still needs a legal check**: Microsoft's trademark guidelines generally require permission to use its marks in a way that presents a product relationship, and this came from a marketing page rather than a brand kit with usage terms attached. |
+| `chatgpt.svg` | ChatGPT | OpenAI brand kit, `OAI_OpenAI-Blossom_Black.svg`, downloaded by hand from `openai.com/brand` because that page blocks automated fetching. This is the OpenAI symbol, which is the icon form their kit provides. |
+| `claude.svg` | Claude | Anthropic press kit, `anthropic.com/press-kit`, which redirects to an official CDN zip. File is "Claude Spark - Clay", the icon form intended to sit beside a label. Unmodified, in its own brand colour. |
+| `gemini.svg` | Gemini | Google's own CDN, the Gemini sparkle used by Gemini's product surfaces. |
+| _(none)_ | Local and Custom Agents | Not a brand mark by design. The repo icon `components/icons/server-stack.svg` is inlined instead of linked as a file, so it inherits `currentColor` and turns white when the tab is active. |
+
+All marks are used unmodified, at their own aspect ratio, in a 16px-tall slot beside the
+agent's name. None is altered in colour or proportion.
+
+To add or replace one, drop the file here and set the path on that client:
+
+```yaml
+        - id: "claude"
+          logo: "/images/ai/agents/claude.svg"
+```
+
+Leave `logo` unset until the file exists. Setting it early renders a broken image, whereas
+leaving it unset renders the name as text, which is the intended fallback.
diff --git a/src/images/ai/agents/chatgpt.svg b/src/images/ai/agents/chatgpt.svg
new file mode 100644
index 0000000000..7c119340c4
--- /dev/null
+++ b/src/images/ai/agents/chatgpt.svg
@@ -0,0 +1,3 @@
+<svg width="716" height="716" viewBox="0 0 716 716" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M508.749 317.399C516.777 287.314 508.991 253.884 485.389 230.282C461.788 206.681 428.36 198.895 398.273 206.923C376.231 184.928 343.39 174.956 311.148 183.596C278.906 192.234 255.45 217.292 247.36 247.361C217.291 255.451 192.233 278.91 183.595 311.149C174.957 343.391 184.927 376.232 206.924 398.274C198.896 428.359 206.683 461.789 230.284 485.391C253.885 508.992 287.313 516.779 317.401 508.75C339.442 530.745 372.286 540.717 404.525 532.079C436.767 523.441 460.223 498.384 468.313 468.315C498.383 460.224 523.44 436.766 532.078 404.526C540.716 372.285 530.747 339.443 508.749 317.402V317.399ZM470.899 244.776C486.892 260.77 493.488 282.601 490.687 303.412L415.577 260.046C412.411 258.218 408.509 258.218 405.345 260.046L317.401 310.82V277.526C317.401 275.191 318.652 273.005 320.676 271.837L387.644 233.174C414.178 218.353 448.346 222.223 470.901 244.776H470.899ZM357.837 311.144L398.275 334.491V381.185L357.837 404.532L317.398 381.185V334.491L357.837 311.144ZM264.776 269.693C265.207 239.305 285.644 211.649 316.453 203.393C338.3 197.54 360.505 202.744 377.127 215.573L302.014 258.937C298.848 260.764 296.898 264.144 296.898 267.798V369.346L268.065 352.699C266.043 351.531 264.776 349.353 264.776 347.017V269.691V269.693ZM203.391 316.454C209.244 294.608 224.854 277.978 244.276 269.999V356.73C244.276 360.384 246.226 363.763 249.392 365.591L337.337 416.365L308.503 433.013C306.481 434.181 303.961 434.188 301.939 433.02L234.971 394.357C208.868 378.789 195.138 347.261 203.391 316.454ZM244.775 470.9C228.781 454.906 222.186 433.075 224.986 412.264L300.096 455.63C303.263 457.457 307.164 457.457 310.328 455.63L398.273 404.856V438.149C398.273 440.485 397.022 442.671 394.997 443.839L328.029 482.502C301.495 497.322 267.327 493.452 244.772 470.9H244.775ZM450.897 445.982C450.466 476.371 430.029 504.027 399.22 512.283C377.373 518.136 355.168 512.932 338.547 500.102L413.659 456.738C416.826 454.911 418.775 451.532 418.775 447.877V346.329L447.609 362.977C449.631 364.145 450.897 366.323 450.897 368.659V445.985V445.982ZM512.282 399.221C506.429 421.068 490.819 437.697 471.397 445.676V358.946C471.397 355.292 469.448 351.912 466.281 350.085L378.336 299.311L407.17 282.663C409.192 281.495 411.712 281.487 413.734 282.655L480.702 321.318C506.805 336.887 520.536 368.415 512.282 399.221Z" fill="black"/>
+</svg>
diff --git a/src/images/ai/agents/claude.svg b/src/images/ai/agents/claude.svg
new file mode 100644
index 0000000000..64fe70ca8f
--- /dev/null
+++ b/src/images/ai/agents/claude.svg
@@ -0,0 +1,3 @@
+<svg width="94" height="94" viewBox="0 0 94 94" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.7657 62.4437L37.1822 52.1167L37.4857 51.2122L37.1822 50.7085H36.2715L33.1852 50.5208L22.6615 50.2391L13.5545 49.8636L4.70044 49.3942L2.47428 48.9248L0.399902 46.1553L0.602281 44.794L2.47428 43.5266L5.15579 43.7613L11.0754 44.1837L19.98 44.794L26.4055 45.1695L35.9679 46.1553H37.4857L37.6881 45.545L37.1822 45.1695L36.7774 44.794L27.5692 38.5508L17.6021 31.9791L12.3908 28.1769L9.60812 26.2524L8.19147 24.4686L7.58433 20.5256L10.1141 17.7091L13.5545 17.9438L14.4146 18.1785L17.9056 20.8542L25.343 26.6279L35.0572 33.7629L36.4739 34.9364L37.0443 34.5514L37.1316 34.2792L36.4739 33.1996L31.212 23.6706L25.596 13.9539L23.0663 9.91695L22.4086 7.52296C22.1538 6.51831 22.0038 5.68714 22.0038 4.65957L24.8877 0.716544L26.5067 0.200195L30.4025 0.716544L32.0215 2.12477L34.4501 7.66379L38.3458 16.3478L44.4172 28.1769L46.188 31.6975L47.1493 34.9364L47.5035 35.9222H48.1106V35.3589L48.6166 28.6933L49.5273 20.5256L50.438 10.0108L50.7415 7.05356L52.2088 3.48605L55.1433 1.56148L57.42 2.64112L59.292 5.31674L59.039 7.05356L57.926 14.2824L55.7504 25.5952L54.3337 33.1996H55.1433L56.1046 32.2138L59.9497 27.1442L66.3752 19.0704L69.2085 15.8784L72.5478 12.3579L74.6728 10.668H78.7203L81.6548 15.0804L80.3394 19.6337L76.1906 24.8911L72.7502 29.3504L67.8172 35.9595L64.7562 41.2734L65.0307 41.7118L65.7681 41.6489L76.8989 39.255L82.9197 38.1753L90.1041 36.9549L93.3422 38.457L93.6963 40.006L92.4315 43.151L84.7411 45.0287L75.7353 46.8594L62.3244 50.0164L62.1759 50.1358L62.3512 50.3958L68.399 50.9432L70.9794 51.084H77.3037L89.0922 51.9759L92.1785 53.9944L93.9999 56.4822L93.6963 58.4068L88.9404 60.8008L82.5655 59.2987L67.6401 55.7312L62.5301 54.4638H61.8217V54.8862L66.0717 59.064L73.9139 66.1051L83.6786 75.2116L84.1845 77.4648L82.9197 79.2485L81.6042 79.0608L73.0032 72.5829L69.6639 69.6726L62.1759 63.3356H61.67V63.9928L63.3902 66.5276L72.5478 80.2812L73.0032 84.5059L72.3454 85.8672L69.9675 86.7121L67.3871 86.2427L61.9735 78.6852L56.4587 70.2359L52.0064 62.6315L51.4687 62.971L48.8189 91.2654L47.6047 92.7206L44.7714 93.8002L42.3934 92.0164L41.1286 89.1061L42.3934 83.3324L43.9113 75.8219L45.1255 69.8604L46.2386 62.4437L46.9184 59.9661L46.8583 59.8003L46.3153 59.8916L40.7238 67.5603L32.2239 79.0608L25.4948 86.2427L23.8758 86.8999L21.0931 85.4447L21.3461 82.863L22.9145 80.5629L32.2239 68.7338L37.8399 61.3641L41.4594 57.1337L41.4242 56.5218L41.2244 56.5048L16.489 72.6299L12.0873 73.1932L10.1647 71.4094L10.4176 68.4991L11.3283 67.5603L18.7657 62.4437Z" fill="#D97757"/>
+</svg>
diff --git a/src/images/ai/agents/flowfuse-expert.svg b/src/images/ai/agents/flowfuse-expert.svg
new file mode 100644
index 0000000000..7ce1777f2d
--- /dev/null
+++ b/src/images/ai/agents/flowfuse-expert.svg
@@ -0,0 +1,2 @@
+<svg enable-background="new 0 0 79.4 79.4" viewBox="0 0 79.4 79.4" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="ffWaveSquare" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="79.4" y2="0"><stop offset="0" stop-color="#DA3D0B"/><stop offset="0.25" stop-color="#DA3D0B"/><stop offset="0.5" stop-color="#DA3D0B"/><stop offset="0.75" stop-color="#DA3D0B"/><stop offset="1" stop-color="#DA3D0B"/></linearGradient></defs><path fill-rule="evenodd" clip-rule="evenodd" d="M6.28751 0H73.5639C77.022 0 79.8514 2.83457 79.8514 6.29905V25.5112C70.4201 25.1962 60.9888 27.4009 52.1863 31.1803C49.3488 32.2807 46.5646 33.5413 43.7871 34.7989C37.0251 37.8605 30.3032 40.904 22.9494 41.5737C17.2809 42.047 11.435 41.9869 5.67825 41.9277C3.77251 41.9082 1.87653 41.8887 0 41.8887V6.29905C0 2.83457 2.82938 0 6.28751 0ZM44.0131 48.1865C45.9468 49.0061 47.863 49.861 49.7741 50.7136L49.7742 50.7136C55.9409 53.4649 62.0544 56.1924 68.5343 57.635C72.3069 58.2649 76.0794 58.5799 79.8519 58.5799V37.793H76.7081C67.2021 37.793 58.326 41.7897 49.7365 45.6572L49.7363 45.6573C47.8155 46.5222 45.909 47.3806 44.0131 48.1865ZM19.8057 54.8032C16.0332 54.4883 12.2606 54.4883 8.48814 54.4883H0V73.7004C0 77.1649 2.82938 79.9994 6.28751 79.9994H73.8782C77.3364 79.9994 80.1657 77.1649 80.1657 73.7004V71.1808C71.992 71.1808 63.5038 70.2359 55.9588 67.0864C51.7804 65.691 47.7481 63.8567 43.7373 62.0322L43.7373 62.0322C35.9794 58.5031 28.3023 55.0108 19.8057 54.8032Z" fill="url(#ffWaveSquare)"/>
+<path d="M79.8514 37.7939V25.1958C70.4201 24.8808 60.9888 27.0855 52.1863 30.8649C42.4407 34.6444 33.3238 40.3135 22.9494 41.2584C15.4044 41.8883 7.54501 41.5733 0 41.5733V54.4864H8.48814C12.2606 54.4864 16.0331 54.4864 19.8057 54.8013C32.695 55.1163 43.6982 62.9901 55.6445 67.0845C63.1895 70.234 71.6776 71.1789 79.8514 71.1789V58.5807C76.0789 58.5807 72.3064 58.2658 68.5338 57.6359C60.0457 55.7462 52.1863 51.6518 44.0126 48.1873C54.387 43.778 65.0757 37.7939 76.7076 37.7939H79.8514Z" fill="white"/></svg>
\ No newline at end of file
diff --git a/src/images/ai/agents/gemini.svg b/src/images/ai/agents/gemini.svg
new file mode 100644
index 0000000000..4545c8331f
--- /dev/null
+++ b/src/images/ai/agents/gemini.svg
@@ -0,0 +1,10 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 28C14 26.0633 13.6267 24.2433 12.88 22.54C12.1567 20.8367 11.165 19.355 9.905 18.095C8.645 16.835 7.16333 15.8433 5.46 15.12C3.75667 14.3733 1.93667 14 0 14C1.93667 14 3.75667 13.6383 5.46 12.915C7.16333 12.1683 8.645 11.165 9.905 9.905C11.165 8.645 12.1567 7.16333 12.88 5.46C13.6267 3.75667 14 1.93667 14 0C14 1.93667 14.3617 3.75667 15.085 5.46C15.8317 7.16333 16.835 8.645 18.095 9.905C19.355 11.165 20.8367 12.1683 22.54 12.915C24.2433 13.6383 26.0633 14 28 14C26.0633 14 24.2433 14.3733 22.54 15.12C20.8367 15.8433 19.355 16.835 18.095 18.095C16.835 19.355 15.8317 20.8367 15.085 22.54C14.3617 24.2433 14 26.0633 14 28Z" fill="url(#paint0_radial_16771_53212)"/>
+<defs>
+<radialGradient id="paint0_radial_16771_53212" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(2.77876 11.3795) rotate(18.6832) scale(29.8025 238.737)">
+<stop offset="0.0671246" stop-color="#9168C0"/>
+<stop offset="0.342551" stop-color="#5684D1"/>
+<stop offset="0.672076" stop-color="#1BA1E3"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/src/images/ai/agents/microsoft-copilot.svg b/src/images/ai/agents/microsoft-copilot.svg
new file mode 100644
index 0000000000..f93be73b7a
--- /dev/null
+++ b/src/images/ai/agents/microsoft-copilot.svg
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+  <path d="M34.1423 7.32501C33.5634 5.35387 31.7547 4 29.7003 4L28.3488 4C26.1142 4 24.1985 5.59611 23.7952 7.79398L21.4805 20.4072L22.0549 18.4419C22.6319 16.4679 24.4419 15.1111 26.4986 15.1111H34.3524L37.6462 16.3942L40.8213 15.1111H39.8946C37.8401 15.1111 36.0315 13.7572 35.4525 11.7861L34.1423 7.32501Z" fill="url(#paint0_radial_56201_15503)"></path>
+  <path d="M14.3307 40.656C14.9032 42.6366 16.7165 44 18.7783 44H21.6486C24.1592 44 26.2122 41.999 26.2767 39.4893L26.5893 27.3271L25.9354 29.5602C25.3577 31.5332 23.5481 32.8889 21.4923 32.8889L13.5732 32.8889L10.7499 31.3573L7.69336 32.8889H8.60461C10.6663 32.8889 12.4796 34.2522 13.0521 36.2329L14.3307 40.656Z" fill="url(#paint1_radial_56201_15503)"></path>
+  <path d="M29.4993 4H13.46C8.87732 4 6.12772 10.0566 4.29466 16.1132C2.12296 23.2886 -0.718769 32.8852 7.50252 32.8852H14.4282C16.4978 32.8852 18.3147 31.5168 18.8835 29.5269C20.0876 25.3143 22.1978 17.9655 23.8554 12.3712C24.6977 9.52831 25.3993 7.08673 26.4762 5.56628C27.0799 4.71385 28.086 4 29.4993 4Z" fill="url(#paint2_linear_56201_15503)"></path>
+  <path d="M29.4993 4H13.46C8.87732 4 6.12772 10.0566 4.29466 16.1132C2.12296 23.2886 -0.718769 32.8852 7.50252 32.8852H14.4282C16.4978 32.8852 18.3147 31.5168 18.8835 29.5269C20.0876 25.3143 22.1978 17.9655 23.8554 12.3712C24.6977 9.52831 25.3993 7.08673 26.4762 5.56628C27.0799 4.71385 28.086 4 29.4993 4Z" fill="url(#paint3_linear_56201_15503)"></path>
+  <path d="M18.498 44H34.5374C39.12 44 41.8696 37.9424 43.7027 31.8848C45.8744 24.7081 48.7161 15.1098 40.4948 15.1098H33.5693C31.4996 15.1098 29.6827 16.4784 29.114 18.4684C27.9098 22.6817 25.7996 30.032 24.142 35.6273C23.2996 38.4708 22.598 40.9127 21.5212 42.4335C20.9175 43.286 19.9113 44 18.498 44Z" fill="url(#paint4_radial_56201_15503)"></path>
+  <path d="M18.498 44H34.5374C39.12 44 41.8696 37.9424 43.7027 31.8848C45.8744 24.7081 48.7161 15.1098 40.4948 15.1098H33.5693C31.4996 15.1098 29.6827 16.4784 29.114 18.4684C27.9098 22.6817 25.7996 30.032 24.142 35.6273C23.2996 38.4708 22.598 40.9127 21.5212 42.4335C20.9175 43.286 19.9113 44 18.498 44Z" fill="url(#paint5_linear_56201_15503)"></path>
+  <defs>
+    <radialGradient id="paint0_radial_56201_15503" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(38.005 20.5144) rotate(-129.304) scale(17.3033 16.2706)">
+      <stop offset="0.0955758" stop-color="#00AEFF"></stop>
+      <stop offset="0.773185" stop-color="#2253CE"></stop>
+      <stop offset="1" stop-color="#0736C4"></stop>
+    </radialGradient>
+    <radialGradient id="paint1_radial_56201_15503" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.1215 32.8171) rotate(51.84) scale(15.9912 15.5119)">
+      <stop stop-color="#FFB657"></stop>
+      <stop offset="0.633728" stop-color="#FF5F3D"></stop>
+      <stop offset="0.923392" stop-color="#C02B3C"></stop>
+    </radialGradient>
+    <linearGradient id="paint2_linear_56201_15503" x1="12.5" y1="7.5" x2="14.7884" y2="33.9751" gradientUnits="userSpaceOnUse">
+      <stop offset="0.156162" stop-color="#0D91E1"></stop>
+      <stop offset="0.487484" stop-color="#52B471"></stop>
+      <stop offset="0.652394" stop-color="#98BD42"></stop>
+      <stop offset="0.937361" stop-color="#FFC800"></stop>
+    </linearGradient>
+    <linearGradient id="paint3_linear_56201_15503" x1="14.5" y1="4" x2="15.7496" y2="32.8852" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3DCBFF"></stop>
+      <stop offset="0.246674" stop-color="#0588F7" stop-opacity="0"></stop>
+    </linearGradient>
+    <radialGradient id="paint4_radial_56201_15503" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(41.3187 12.2813) rotate(109.274) scale(38.3873 45.9867)">
+      <stop offset="0.0661714" stop-color="#8C48FF"></stop>
+      <stop offset="0.5" stop-color="#F2598A"></stop>
+      <stop offset="0.895833" stop-color="#FFB152"></stop>
+    </radialGradient>
+    <linearGradient id="paint5_linear_56201_15503" x1="42.5859" y1="13.346" x2="42.5695" y2="21.2147" gradientUnits="userSpaceOnUse">
+      <stop offset="0.0581535" stop-color="#F8ADFA"></stop>
+      <stop offset="0.708063" stop-color="#A86EDD" stop-opacity="0"></stop>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/src/images/ai/connect-your-own-agent.svg b/src/images/ai/connect-your-own-agent.svg
new file mode 100644
index 0000000000..118c1de9d1
--- /dev/null
+++ b/src/images/ai/connect-your-own-agent.svg
@@ -0,0 +1,55 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="920" height="340" viewBox="0 0 920 340" role="img"
+     aria-label="Your own AI agent connects to one FlowFuse address. FlowFuse checks the access you granted, then reaches your Node-RED instances and the editor session you have opened.">
+  <title>How your own agent reaches FlowFuse</title>
+  <defs>
+    <marker id="ffa-arrow" markerWidth="10" markerHeight="10" refX="7.5" refY="4.5" orient="auto">
+      <path d="M0,1 L7.5,4.5 L0,8 Z" fill="#4f46e5"/>
+    </marker>
+    <marker id="ffa-arrow-grey" markerWidth="10" markerHeight="10" refX="7.5" refY="4.5" orient="auto">
+      <path d="M0,1 L7.5,4.5 L0,8 Z" fill="#9ca3af"/>
+    </marker>
+  </defs>
+
+  <g font-family="Roboto, system-ui, -apple-system, sans-serif">
+
+    <!-- your agent -->
+    <rect x="8" y="132" width="176" height="66" fill="#ffffff" stroke="#4f46e5" stroke-width="1.5"/>
+    <text x="96" y="159" text-anchor="middle" font-size="15" fill="#111827">Your own AI agent</text>
+    <text x="96" y="179" text-anchor="middle" font-size="12.5" fill="#6b7280">Copilot, ChatGPT, Claude</text>
+
+    <path d="M184,165 L292,165" stroke="#4f46e5" stroke-width="1.5" fill="none" marker-end="url(#ffa-arrow)"/>
+    <text x="238" y="155" text-anchor="middle" font-size="12" fill="#4338ca">signs in</text>
+
+    <!-- boundary -->
+    <line x1="312" y1="30" x2="312" y2="314" stroke="#4f46e5" stroke-width="1.5" stroke-dasharray="6 5"/>
+    <text x="322" y="46" font-size="11" font-weight="600" letter-spacing="1.5" fill="#4338ca">WHAT YOU GRANTED</text>
+
+    <!-- endpoint -->
+    <rect x="330" y="126" width="196" height="78" fill="#eef2ff" stroke="#4f46e5" stroke-width="1.5"/>
+    <text x="428" y="152" text-anchor="middle" font-size="15" font-weight="500" fill="#3730a3">One FlowFuse address</text>
+    <text x="428" y="173" text-anchor="middle" font-size="12.5" fill="#4338ca">which teams it may reach,</text>
+    <text x="428" y="190" text-anchor="middle" font-size="12.5" fill="#4338ca">and whether it may change them</text>
+
+    <path d="M526,165 L616,165" stroke="#4f46e5" stroke-width="1.5" fill="none" marker-end="url(#ffa-arrow)"/>
+
+    <!-- flowfuse -->
+    <rect x="634" y="132" width="118" height="66" fill="#ffffff" stroke="#d1d5db"/>
+    <text x="693" y="159" text-anchor="middle" font-size="15" fill="#111827">FlowFuse</text>
+    <text x="693" y="179" text-anchor="middle" font-size="12.5" fill="#6b7280">your platform</text>
+
+    <!-- branches -->
+    <path d="M752,148 L800,92" stroke="#9ca3af" stroke-width="1.5" fill="none" marker-end="url(#ffa-arrow-grey)"/>
+    <path d="M752,184 L800,240" stroke="#9ca3af" stroke-width="1.5" fill="none" marker-end="url(#ffa-arrow-grey)"/>
+
+    <rect x="812" y="54" width="100" height="66" fill="#ffffff" stroke="#d1d5db"/>
+    <text x="862" y="80" text-anchor="middle" font-size="13.5" fill="#111827">Instances</text>
+    <text x="862" y="99" text-anchor="middle" font-size="11.5" fill="#6b7280">and remote</text>
+
+    <rect x="812" y="212" width="100" height="66" fill="#ffffff" stroke="#d1d5db"/>
+    <text x="862" y="238" text-anchor="middle" font-size="13.5" fill="#111827">Your editor</text>
+    <text x="862" y="257" text-anchor="middle" font-size="11.5" fill="#6b7280">when you open it</text>
+
+    <!-- footnote -->
+    <text x="330" y="296" font-size="12.5" fill="#6b7280">Your agent talks to one address. FlowFuse reaches the instances, so they are never opened up.</text>
+  </g>
+</svg>
diff --git a/src/images/ai/schematic-expert.svg b/src/images/ai/schematic-expert.svg
new file mode 100644
index 0000000000..8a9192b5b0
--- /dev/null
+++ b/src/images/ai/schematic-expert.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900"
+     role="img" aria-label="FlowFuse Expert sits inside the FlowFuse platform and Node-RED, as part of it.">
+  <title>FlowFuse Expert is part of the platform</title>
+  <rect width="1600" height="900" fill="#ffffff"/>
+  <!-- Geometry: the platform occupies exactly the same 1300x770 footprint that the two
+       overlapping boxes occupy in the other view, so flipping between the two keeps the
+       outline in place. Expert is inset a uniform 80 from the top, right and bottom. -->
+  <g font-family="Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif">
+
+    <rect x="150" y="65" width="1300" height="770" rx="52" fill="#f9fafb" stroke="#d1d5db" stroke-width="3"/>
+
+    <rect x="1070" y="145" width="300" height="610" rx="42" fill="#eef2ff" stroke="#4f46e5" stroke-width="3"/>
+
+    <text x="610" y="437" text-anchor="middle" font-size="44" fill="#374151">FlowFuse Platform</text>
+    <text x="610" y="491" text-anchor="middle" font-size="44" fill="#374151">Node-RED</text>
+
+    <text x="1220" y="437" text-anchor="middle" font-size="40" fill="#3730a3">FlowFuse</text>
+    <text x="1220" y="487" text-anchor="middle" font-size="40" fill="#3730a3">Expert</text>
+  </g>
+</svg>
diff --git a/src/images/ai/schematic-external.svg b/src/images/ai/schematic-external.svg
new file mode 100644
index 0000000000..b1937b7148
--- /dev/null
+++ b/src/images/ai/schematic-external.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900"
+     role="img" aria-label="An external AI agent stays its own thing and overlaps the FlowFuse platform and Node-RED, reaching into it.">
+  <title>An external agent reaching into the platform</title>
+  <rect width="1600" height="900" fill="#ffffff"/>
+  <!-- Geometry: two identical 900x520 boxes, offset by exactly +400,+250. Their union
+       is 1300x770, centred in the 1600x900 frame, so the margins are 150 left and
+       right and 65 top and bottom. Equal boxes and one equal offset are what make the
+       overlap read as deliberate. -->
+  <g font-family="Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif">
+
+    <!-- behind -->
+    <rect x="550" y="315" width="900" height="520" rx="52" fill="#f9fafb" stroke="#d1d5db" stroke-width="3"/>
+    <text x="1000" y="694" text-anchor="middle" font-size="44" fill="#374151">FlowFuse Platform</text>
+    <text x="1000" y="748" text-anchor="middle" font-size="44" fill="#374151">Node-RED</text>
+
+    <!-- in front. Opaque fill so it occludes the box behind it. -->
+    <rect x="150" y="65" width="900" height="520" rx="52" fill="#eef2ff" stroke="#4f46e5" stroke-width="3"/>
+    <text x="600" y="341" text-anchor="middle" font-size="44" fill="#3730a3">External AI agent</text>
+  </g>
+</svg>

From 1b6264b10091e129557e775db101442c2f109930 Mon Sep 17 00:00:00 2001
From: Dimitrie Hoekstra <hi@dimitr.ie>
Date: Wed, 26 Aug 2026 12:36:37 +0200
Subject: [PATCH 02/11] /ai: list the route for prerender

Deleting src/ai.njk took /ai out of the 11ty output, and the Nuxt page did
not replace it: the prerender crawler only follows links from Nuxt-rendered
pages, and every link to /ai lives in 11ty-generated HTML (nav, homepage).
So the route never reached nuxt/dist and the link checker reported a bad
/ai link from every page that links it.

Listed explicitly beside /pricing and /product, which are there for the
same reason.
---
 nuxt/nuxt.config.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/nuxt/nuxt.config.ts b/nuxt/nuxt.config.ts
index 76ef3c2709..7dadf6157f 100644
--- a/nuxt/nuxt.config.ts
+++ b/nuxt/nuxt.config.ts
@@ -366,6 +366,10 @@ export default defineNuxtConfig({
                     '/integrations',
                     '/pricing',
                     '/product',
+                    // /ai is only linked from 11ty-generated HTML (nav, homepage), which the
+                    // Nuxt prerender crawler never parses, so it has to be listed explicitly
+                    // or the route is missing from nuxt/dist and every link to it breaks.
+                    '/ai',
                     ...collectProductRoutes(join(__dirname, 'content/products')),
                     // Without this, @nuxtjs/sitemap only bakes /sitemap.xml statically when
                     // isNuxtGenerate() is true, which checks for nitro.static/preset "static" -

From 293539a95e6cc40b213ed90c0f596b49e8c28ab4 Mon Sep 17 00:00:00 2001
From: Dimitrie Hoekstra <hi@dimitr.ie>
Date: Wed, 26 Aug 2026 13:04:24 +0200
Subject: [PATCH 03/11] /ai: inline the repo icons instead of UIcon

Four of the six lucide names emitted no CSS rule at all, so those icons
rendered as empty spans on the preview: three of the four governance tiles
had no glyph, and neither did the Local and Custom Agents tab. Verified on
the deploy preview, where only circle-check and chevron-down had a
:where(.i-lucide\:...) rule with mask data. The build had warned about it
("failed to load icon lucide:shield-check") and I read that as pre-existing
noise, since the same warning fires for icons other pages use.

There is no local @iconify-json collection in the repo, so an icon name
nothing else already uses has nothing to resolve from.

Now inlines the same SVGs src/ai.njk pulled in with {% include %}, which is
the more faithful port anyway: no network fetch, and stroke="currentColor"
keeps the tab glyph turning white with its label when the tab is active.
---
 nuxt/pages/ai/index.vue | 38 ++++++++++++++++++++++++++++----------
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/nuxt/pages/ai/index.vue b/nuxt/pages/ai/index.vue
index ebd1aa875e..68cac9ede7 100644
--- a/nuxt/pages/ai/index.vue
+++ b/nuxt/pages/ai/index.vue
@@ -23,6 +23,21 @@ const capture = useCapture()
 
 const LINK = 'text-indigo-600 hover:text-indigo-800 underline'
 
+// Icons are the repo's own SVGs, inlined the way src/ai.njk did with
+// {% include %}. UIcon was tried first and four of the six lucide names had no
+// CSS rule emitted at all (no local @iconify-json collection to resolve them
+// from), so those tiles rendered as empty spans. These carry stroke="currentColor"
+// so the tab glyph still turns white when its tab is active.
+const ICON = {
+    lock: "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' width='100%' height='100%'> <path stroke-linecap='round' stroke-linejoin='round' d='M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z' /> </svg>",
+    shieldCheck: "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' width='100%' height='100%'> <path stroke-linecap='round' stroke-linejoin='round' d='M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z' /> </svg>",
+    checkCircle: "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' width='100%' height='100%'> <path stroke-linecap='round' stroke-linejoin='round' d='M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z' /> </svg>",
+    clipboardCheck: "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' width='100%' height='100%'> <path stroke-linecap='round' stroke-linejoin='round' d='M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75' /> </svg>",
+    serverStack: "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' width='100%' height='100%'> <path stroke-linecap='round' stroke-linejoin='round' d='M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z' /> </svg>",
+    chevronDown: "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-5 h-5 ff-icon--down'><path stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/></svg>",
+}
+
+
 const FAQ = [
     {
         question: 'What is AI for industrial applications?',
@@ -120,7 +135,7 @@ const CLIENTS = [
     },
     {
         id: 'local',
-        icon: 'i-lucide-server',
+        icon: ICON.serverStack,
         name: 'Local and Custom Agents',
         step2Title: "Your MCP client's config",
         step2Body: 'Any MCP-capable client works, pointed at your own model, so nothing has to leave your network.',
@@ -191,10 +206,10 @@ const GOVERNANCE = {
     title: 'AI Governance you can <span class="text-indigo-600">prove</span>',
     subtitle: 'The control plane every AI action runs through, the same one that governs your teams.',
     items: [
-        { icon: 'i-lucide-lock', title: 'Only the teams you grant', description: 'AI reaches the teams you allow and nothing else, enforced by the platform on every call.' },
-        { icon: 'i-lucide-shield-check', title: 'Role-based access', description: 'The same RBAC that governs your teams governs what AI can see and do.' },
-        { icon: 'i-lucide-circle-check', title: 'Nothing gets deleted', description: 'No agent can remove an instance, an application, a snapshot or a team. There is no tool for it.' },
-        { icon: 'i-lucide-clipboard-check', title: 'Audit on everything', description: 'Every action AI takes is logged and attributed, so you can show exactly what happened and when.' },
+        { icon: ICON.lock, title: 'Only the teams you grant', description: 'AI reaches the teams you allow and nothing else, enforced by the platform on every call.' },
+        { icon: ICON.shieldCheck, title: 'Role-based access', description: 'The same RBAC that governs your teams governs what AI can see and do.' },
+        { icon: ICON.checkCircle, title: 'Nothing gets deleted', description: 'No agent can remove an instance, an application, a snapshot or a team. There is no tool for it.' },
+        { icon: ICON.clipboardCheck, title: 'Audit on everything', description: 'Every action AI takes is logged and attributed, so you can show exactly what happened and when.' },
     ],
 }
 
@@ -294,7 +309,8 @@ const openFaq = ref<number | null>(null)
                   :class="activeClient === client.id ? 'ff-btn--primary' : 'text-gray-700 hover:bg-gray-100'"
                   @click="selectClient(client.id)"
                 >
-                  <UIcon v-if="client.icon" :name="client.icon" class="flex-none size-4" aria-hidden="true" />
+                  <!-- eslint-disable-next-line vue/no-v-html -->
+                  <span v-if="client.icon" class="flex-none w-4 h-4" aria-hidden="true" v-html="client.icon" />
                   <img v-else-if="client.logo" :src="client.logo" alt="" class="h-4 w-auto flex-none" aria-hidden="true">
                   <span>{{ client.name }}</span>
                 </button>
@@ -412,7 +428,8 @@ const openFaq = ref<number | null>(null)
         </div>
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mt-12">
           <div v-for="tile in GOVERNANCE.items" :key="tile.title" class="flex flex-col items-center text-center gap-3">
-            <UIcon :name="tile.icon" class="size-8 text-indigo-600" aria-hidden="true" />
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <span class="w-8 h-8 text-indigo-600" aria-hidden="true" v-html="tile.icon" />
             <p class="font-medium text-indigo-700 m-0">{{ tile.title }}</p>
             <p class="text-sm text-gray-600 font-light m-0">{{ tile.description }}</p>
           </div>
@@ -498,11 +515,12 @@ const openFaq = ref<number | null>(null)
               @click="openFaq = openFaq === i ? null : i"
             >
               <span>{{ item.question }}</span>
-              <UIcon
-                name="i-lucide-chevron-down"
-                class="size-5 shrink-0 transition-transform duration-300 ease-in-out"
+              <!-- eslint-disable-next-line vue/no-v-html -->
+              <span
+                class="w-5 h-5 shrink-0 transition-transform duration-300 ease-in-out"
                 :class="{ 'rotate-180': openFaq === i }"
                 aria-hidden="true"
+                v-html="ICON.chevronDown"
               />
             </button>
           </h3>

From 5c9562a16d8327ed62b0ede32a9791525610d760 Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Wed, 26 Aug 2026 05:31:35 -0700
Subject: [PATCH 04/11] Update legacy.ts

---
 nuxt/server/middleware/legacy.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/nuxt/server/middleware/legacy.ts b/nuxt/server/middleware/legacy.ts
index f65792a8bc..93c012368a 100644
--- a/nuxt/server/middleware/legacy.ts
+++ b/nuxt/server/middleware/legacy.ts
@@ -4,7 +4,7 @@ import { defineEventHandler, proxyRequest } from 'h3'
 // Extend this list as pages are migrated. Trailing slashes are matched automatically.
 // Note: /sitemap-legacy.xml is deliberately NOT listed here — it only exists in
 // nuxt/public/ after a production build, so in dev it must keep proxying to 11ty's _site/.
-const NUXT_ROUTES = new Set(['/terms', '/privacy-policy', '/integrations', '/resources/publications', '/sitemap.xml', '/robots.txt', '/llms.txt', '/llms-full.txt', '/contact-us', '/book-demo', '/support', '/professional-services'])
+const NUXT_ROUTES = new Set(['/ai', '/terms', '/privacy-policy', '/integrations', '/resources/publications', '/sitemap.xml', '/robots.txt', '/llms.txt', '/llms-full.txt', '/contact-us', '/book-demo', '/support', '/professional-services'])
 
 // Path prefixes handled by Nuxt. Used for dynamic routes like /integrations/{id}.
 const NUXT_ROUTE_PREFIXES = ['/integrations/', '/raw/']
@@ -14,7 +14,7 @@ const NUXT_PREFIXES = ['/handbook', '/ebooks', '/whitepaper', '/pricing', '/docs
 
 // Top-level routes still on 11ty, not yet ported to Nuxt (everything not listed above
 // already falls through to the 11ty proxy by default). Remove entries here as they migrate:
-// / (homepage), /about, /ai, /blueprints, /careers, /community, /events,
+// / (homepage), /about, /blueprints, /careers, /community, /events,
 // /free-consultation, /industries, /landing, /node-red, /partners, /platform,
 // /use-cases, /vs, /webinars
 

From 55bb9233295eed4fef31ff97c7deb578c212b613 Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Wed, 26 Aug 2026 05:32:29 -0700
Subject: [PATCH 05/11] Update index.vue

---
 nuxt/pages/ai/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nuxt/pages/ai/index.vue b/nuxt/pages/ai/index.vue
index 68cac9ede7..0b1a074015 100644
--- a/nuxt/pages/ai/index.vue
+++ b/nuxt/pages/ai/index.vue
@@ -274,7 +274,7 @@ const openFaq = ref<number | null>(null)
 </script>
 
 <template>
-  <div>
+  <div class="w-full">
     <!-- HERO: the agent picker is the primary action on this page, so it lives here
          rather than below a wall of positioning copy. -->
     <section class="w-full relative bg-white">

From 064d49c66e9f0bb51ee930e3ed5ce53056d4a4d1 Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Wed, 26 Aug 2026 12:15:12 -0700
Subject: [PATCH 06/11] Update index.vue

---
 nuxt/pages/ai/index.vue | 381 +++++++++++++++++++---------------------
 1 file changed, 183 insertions(+), 198 deletions(-)

diff --git a/nuxt/pages/ai/index.vue b/nuxt/pages/ai/index.vue
index 0b1a074015..966a4c5d11 100644
--- a/nuxt/pages/ai/index.vue
+++ b/nuxt/pages/ai/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { getAllBlogPosts } from '~/utils/sharedContent'
 // Ported from src/ai.njk (11ty), which this replaces. Same page, same copy, same
 // classes from src/css/style.css, which nuxt.config.ts already links here.
 //
@@ -23,21 +24,6 @@ const capture = useCapture()
 
 const LINK = 'text-indigo-600 hover:text-indigo-800 underline'
 
-// Icons are the repo's own SVGs, inlined the way src/ai.njk did with
-// {% include %}. UIcon was tried first and four of the six lucide names had no
-// CSS rule emitted at all (no local @iconify-json collection to resolve them
-// from), so those tiles rendered as empty spans. These carry stroke="currentColor"
-// so the tab glyph still turns white when its tab is active.
-const ICON = {
-    lock: "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' width='100%' height='100%'> <path stroke-linecap='round' stroke-linejoin='round' d='M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z' /> </svg>",
-    shieldCheck: "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' width='100%' height='100%'> <path stroke-linecap='round' stroke-linejoin='round' d='M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z' /> </svg>",
-    checkCircle: "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' width='100%' height='100%'> <path stroke-linecap='round' stroke-linejoin='round' d='M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z' /> </svg>",
-    clipboardCheck: "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' width='100%' height='100%'> <path stroke-linecap='round' stroke-linejoin='round' d='M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75' /> </svg>",
-    serverStack: "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' width='100%' height='100%'> <path stroke-linecap='round' stroke-linejoin='round' d='M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z' /> </svg>",
-    chevronDown: "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-5 h-5 ff-icon--down'><path stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/></svg>",
-}
-
-
 const FAQ = [
     {
         question: 'What is AI for industrial applications?',
@@ -67,7 +53,6 @@ useSchemaOrg([
 ])
 
 const ENDPOINT = 'https://app.flowfuse.com/mcp'
-const ENDPOINT_NOTE = 'Self-hosted, use your own platform address.'
 
 const STEP1 = {
     title: 'Copy the FlowFuse connector URL',
@@ -135,7 +120,7 @@ const CLIENTS = [
     },
     {
         id: 'local',
-        icon: ICON.serverStack,
+        icon: 'i-lucide-server',
         name: 'Local and Custom Agents',
         step2Title: "Your MCP client's config",
         step2Body: 'Any MCP-capable client works, pointed at your own model, so nothing has to leave your network.',
@@ -153,63 +138,14 @@ function selectClient (id: string) {
     capture('cta-ai-agent-tab', { position: id })
 }
 
-// Showcase: two views of the same platform, alternating so both get seen without
-// the reader doing anything. Picking one stops the rotation for good, which is the
-// expected behaviour for an auto-advancing control.
-const SHOWCASE_INTERVAL = 6000
-const SLIDES = [
-    {
-        id: 'expert',
-        label: 'FlowFuse Expert',
-        media: '/images/ai/schematic-expert.svg',
-        mediaAlt: 'FlowFuse Expert sits inside the FlowFuse platform and Node-RED, as part of it.',
-    },
-    {
-        id: 'external',
-        label: 'Your own agent',
-        media: '/images/ai/schematic-external.svg',
-        mediaAlt: 'An external AI agent stays its own thing and overlaps the FlowFuse platform and Node-RED, reaching into it.',
-    },
-]
-
-const activeSlide = ref(SLIDES[0].id)
-const rotating = ref(false)
-// Bumped on every switch so the fill animation restarts from zero. Vue reuses the
-// element, so re-adding a class alone would not retrigger the CSS animation.
-const fillKey = ref(0)
-let slideTimer: ReturnType<typeof setInterval> | undefined
-
-function stopRotation () {
-    if (slideTimer) { clearInterval(slideTimer); slideTimer = undefined }
-    rotating.value = false
-}
-
-function selectSlide (id: string) {
-    stopRotation()
-    activeSlide.value = id
-}
-
-onMounted(() => {
-    if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return
-    rotating.value = true
-    fillKey.value++
-    slideTimer = setInterval(() => {
-        const next = (SLIDES.findIndex(s => s.id === activeSlide.value) + 1) % SLIDES.length
-        activeSlide.value = SLIDES[next].id
-        fillKey.value++
-    }, SHOWCASE_INTERVAL)
-})
-
-onUnmounted(stopRotation)
-
 const GOVERNANCE = {
     title: 'AI Governance you can <span class="text-indigo-600">prove</span>',
     subtitle: 'The control plane every AI action runs through, the same one that governs your teams.',
     items: [
-        { icon: ICON.lock, title: 'Only the teams you grant', description: 'AI reaches the teams you allow and nothing else, enforced by the platform on every call.' },
-        { icon: ICON.shieldCheck, title: 'Role-based access', description: 'The same RBAC that governs your teams governs what AI can see and do.' },
-        { icon: ICON.checkCircle, title: 'Nothing gets deleted', description: 'No agent can remove an instance, an application, a snapshot or a team. There is no tool for it.' },
-        { icon: ICON.clipboardCheck, title: 'Audit on everything', description: 'Every action AI takes is logged and attributed, so you can show exactly what happened and when.' },
+        { icon: 'i-lucide-lock', title: 'Only the teams you grant', description: 'AI reaches the teams you allow and nothing else, enforced by the platform on every call.' },
+        { icon: 'i-lucide-shield-check', title: 'Role-based access', description: 'The same RBAC that governs your teams governs what AI can see and do.' },
+        { icon: 'i-lucide-circle-check', title: 'Nothing gets deleted', description: 'No agent can remove an instance, an application, a snapshot or a team. There is no tool for it.' },
+        { icon: 'i-lucide-clipboard-check', title: 'Audit on everything', description: 'Every action AI takes is logged and attributed, so you can show exactly what happened and when.' },
     ],
 }
 
@@ -223,62 +159,120 @@ const CAPABILITY_INTRO = {
 // sign-off. `media` is an empty slot per item until the assets exist.
 const CAPABILITY_GROUPS = [
     {
+        id: 'build',
         title: 'Accelerate engineering',
         eyebrow: 'Build',
         subtitle: 'FlowFuse Expert turns intent into working industrial applications, right in the editor.',
         items: [
-            { name: 'AI-assisted engineering', description: `Generate and edit <a href="/node-red/" class="${LINK}">Node-RED</a> flows, Function node JavaScript, SQL queries and dashboard UI from plain language, and ask Expert to explain any existing flow so any engineer can pick it up. It works inline in the editor your team already uses, so there is no separate tool to context-switch into. That turns unfamiliar or inherited flows into something the whole team can read and maintain.` },
-            { name: 'Prompt-to-app', description: 'Describe the application you need and FlowFuse Expert agentically builds the starting flows and logic directly in your workspace. You begin from a working draft instead of a blank canvas, then refine it like any other flow. Everything it creates stays inside the platform, so the same permissions and review apply from the first node.' },
-            { name: 'Build your own AI agents', description: `Start from an agent blueprint, like the <a href="/blueprints/ai/llm-chat-agent/" class="${LINK}">LLM chat agent</a> or <a href="/blueprints/ai/rag-chat-agent/" class="${LINK}">RAG chat agent</a>, to stand up a task-specific AI agent grounded in your own data, tools and context. It gives you a proven structure to adapt rather than wiring an agent up from scratch. With MCP servers you can give the agent access to anything, including your RAG applications. Because it runs on the platform, the agent operates within the access you grant it.` },
-            { name: 'Built-in product knowledge', description: 'A chat assistant with answers grounded in FlowFuse and Node-RED documentation, so guidance comes from the product, not stale wikis. Ask how a node works or how to approach a build and get an answer without leaving your workspace. It shortens the path from question to working flow for new and experienced users alike.' },
+            { name: 'AI-assisted engineering', diagram: 'assisted-engineering', description: `Generate and edit <a href="/node-red/" class="${LINK}">Node-RED</a> flows, Function node JavaScript, SQL queries and dashboard UI from plain language, and ask Expert to explain any existing flow so any engineer can pick it up. It works inline in the editor your team already uses, so there is no separate tool to context-switch into. That turns unfamiliar or inherited flows into something the whole team can read and maintain.` },
+            { name: 'Prompt-to-app', diagram: 'prompt-to-app', description: 'Describe the application you need and FlowFuse Expert agentically builds the starting flows and logic directly in your workspace. You begin from a working draft instead of a blank canvas, then refine it like any other flow. Everything it creates stays inside the platform, so the same permissions and review apply from the first node.' },
+            { name: 'Build your own AI agents', diagram: 'build-agents', description: `Start from an agent blueprint, like the <a href="/blueprints/ai/llm-chat-agent/" class="${LINK}">LLM chat agent</a> or <a href="/blueprints/ai/rag-chat-agent/" class="${LINK}">RAG chat agent</a>, to stand up a task-specific AI agent grounded in your own data, tools and context. It gives you a proven structure to adapt rather than wiring an agent up from scratch. With MCP servers you can give the agent access to anything, including your RAG applications. Because it runs on the platform, the agent operates within the access you grant it.` },
+            { name: 'Built-in product knowledge', diagram: 'product-knowledge', description: 'A chat assistant with answers grounded in FlowFuse and Node-RED documentation, so guidance comes from the product, not stale wikis. Ask how a node works or how to approach a build and get an answer without leaving your workspace. It shortens the path from question to working flow for new and experienced users alike.' },
         ],
     },
     {
+        id: 'operate',
         title: 'Operate with AI, safely',
         eyebrow: 'Operate',
         subtitle: 'AI that acts inside your flows and answers questions about live operations, always behind your controls.',
         items: [
-            { name: 'Governed autonomous operations', externalNote: 'For external agents, approval cards do not apply. The access you granted is the control, enforced on every call.', description: 'Platform Automations let AI act on live systems, with every write behind an approval card, session-scoped and fully audited. A person approves, edits or rejects each proposed change before it reaches a machine. Nothing runs outside the permissions and RBAC that already govern your teams.' },
-            { name: 'Ask your plant anything', externalNote: 'For external agents, whether they can reach the MCP servers you build in your own flows depends on the agent.', description: 'In Insights mode, ask questions in natural language and get answers grounded in live machine state, alarms and logs. Operators and engineers can check what is happening on the floor without building a report or querying a database by hand. Table and MQTT-broker reading are coming soon.' },
-            { name: 'Automated visual inspection', description: `Run <a href="/node-red/flowfuse/ai/onxx/" class="${LINK}">ONNX</a> vision models inside flows next to the machine, with camera ingest over <a href="/node-red/flowfuse/edge/rtsp/" class="${LINK}">RTSP</a>, for inference that works offline and keeps data on your network. Detection results flow into the same logic as any other signal, so you can trigger alerts or actions from what the model sees. Running at the edge means no round trip to the cloud and no image data leaving the plant.` },
-            { name: 'Use any model within flows', description: `<a href="/node-red/flowfuse/ai/llm-nodes/" class="${LINK}">Certified LLM nodes</a> bring OpenAI, Anthropic, Gemini or local models via Ollama into any flow with your own keys. Choose the provider that fits each task, or keep everything on local models when data cannot leave your network. Because you supply the keys, model access and spend stay under your control.` },
+            { name: 'Governed autonomous operations', diagram: 'governed-operations', externalNote: 'For external agents, approval cards do not apply. The access you granted is the control, enforced on every call.', description: 'Platform Automations let AI act on live systems, with every write behind an approval card, session-scoped and fully audited. A person approves, edits or rejects each proposed change before it reaches a machine. Nothing runs outside the permissions and RBAC that already govern your teams.' },
+            { name: 'Ask your plant anything', diagram: 'ask-your-plant', externalNote: 'For external agents, whether they can reach the MCP servers you build in your own flows depends on the agent.', description: 'In Insights mode, ask questions in natural language and get answers grounded in live machine state, alarms and logs. Operators and engineers can check what is happening on the floor without building a report or querying a database by hand. Table and MQTT-broker reading are coming soon.' },
+            { name: 'Automated visual inspection', diagram: 'visual-inspection', description: `Run <a href="/node-red/flowfuse/ai/onxx/" class="${LINK}">ONNX</a> vision models inside flows next to the machine, with camera ingest over <a href="/node-red/flowfuse/edge/rtsp/" class="${LINK}">RTSP</a>, for inference that works offline and keeps data on your network. Detection results flow into the same logic as any other signal, so you can trigger alerts or actions from what the model sees. Running at the edge means no round trip to the cloud and no image data leaving the plant.` },
+            { name: 'Use any model within flows', diagram: 'any-model', description: `<a href="/node-red/flowfuse/ai/llm-nodes/" class="${LINK}">Certified LLM nodes</a> bring OpenAI, Anthropic, Gemini or local models via Ollama into any flow with your own keys. Choose the provider that fits each task, or keep everything on local models when data cannot leave your network. Because you supply the keys, model access and spend stay under your control.` },
         ],
     },
     {
+        id: 'connect',
         title: 'Connect your own agent',
-        eyebrow: 'Connect in',
+        eyebrow: 'Connect',
         subtitle: 'The agent your company already approved, working your platform and building in Node-RED. Your agent, your model, on a boundary you set.',
         items: [
-            { name: 'Bring your own AI agent', description: 'Point Microsoft Copilot, ChatGPT, Claude or a local model at FlowFuse, sign in, and it can query your teams and instances and build Node-RED applications for you. Where company policy only permits an approved AI agent, this is how that agent reaches your operations, instead of nobody getting AI on the platform at all.' },
-            { name: 'You decide what it reaches', description: 'Signing in asks which teams the agent may act on and whether it may make changes at all. FlowFuse holds you to that on every call, so a read-only grant is refused whatever the agent tries. Nothing an agent reaches can delete an instance, an application, a snapshot or a team, and deploying stays yours.' },
+            { name: 'Bring your own AI agent', diagram: 'bring-your-agent', description: 'Point Microsoft Copilot, ChatGPT, Claude or a local model at FlowFuse, sign in, and it can query your teams and instances and build Node-RED applications for you. Where company policy only permits an approved AI agent, this is how that agent reaches your operations, instead of nobody getting AI on the platform at all.' },
+            { name: 'You decide what it reaches', diagram: 'you-decide', description: 'Signing in asks which teams the agent may act on and whether it may make changes at all. FlowFuse holds you to that on every call, so a read-only grant is refused whatever the agent tries. Nothing an agent reaches can delete an instance, an application, a snapshot or a team, and deploying stays yours.' },
         ],
     },
     {
+        id: 'expose',
         title: 'Expose your own tools',
-        eyebrow: 'Send out',
+        eyebrow: 'Expose',
         subtitle: 'The other direction. Your flows become tools that an agent can call as part of its work.',
         items: [
-            { name: 'AI that uses your tools', externalNote: 'Anyone can build them. For external agents, whether they can call them depends on the agent.', description: `Build your own <a href="/node-red/flowfuse/mcp/" class="${LINK}">MCP servers</a> and let Insights-mode agents call your tools and services as part of a workflow. Wrap an internal API or system as a tool once, then let agents use it wherever it fits. The agent stays inside the workflow you designed, calling only the tools you register.` },
+            { name: 'AI that uses your tools', diagram: 'your-tools', externalNote: 'Anyone can build them. For external agents, whether they can call them depends on the agent.', description: `Build your own <a href="/node-red/flowfuse/mcp/" class="${LINK}">MCP servers</a> and let Insights-mode agents call your tools and services as part of a workflow. Wrap an internal API or system as a tool once, then let agents use it wherever it fits. The agent stays inside the workflow you designed, calling only the tools you register.` },
         ],
     },
 ]
 
-const FURTHER_READING = [
-    { to: '/blog/2026/03/ai-usecases-in-factory/', title: '5 Places Smart Factories Are Already Using AI' },
-    { to: '/blog/2026/03/last-mile-problem-ai/', title: 'The Last Mile Problem in Industrial AI' },
-    { to: '/blog/2026/06/process-rtsp-camera-feeds-at-the-edge/', title: 'Processing RTSP Camera Feeds at the Edge' },
-    { to: '/blog/2026/02/motor-anomaly-detector-ai/', title: 'Building an AI Vibration Anomaly Detector for Industrial Motors' },
+// Curated rather than "latest in /blog/ai/", but rendered from the real post
+// records so the tiles carry the same date, image, summary and byline as every
+// other post listing on the site. Titles are no longer restated here - they come
+// from the posts, so they cannot drift when a post is retitled.
+const FURTHER_READING_PATHS = [
+    '/blog/2026/03/ai-usecases-in-factory',
+    '/blog/2026/03/last-mile-problem-ai',
+    '/blog/2026/06/process-rtsp-camera-feeds-at-the-edge',
+    '/blog/2026/02/motor-anomaly-detector-ai',
 ]
 
-const openFaq = ref<number | null>(null)
+const FURTHER_READING_COUNT = 3
+
+const { data: furtherReading } = await useAsyncData('ai-further-reading', async () => {
+    const all = await getAllBlogPosts()
+    const byPath = new Map(all.map(entry => [String(entry.path).replace(/\/$/, ''), entry]))
+    return FURTHER_READING_PATHS
+        .map(path => byPath.get(path))
+        .filter(Boolean)
+        .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+        .slice(0, FURTHER_READING_COUNT)
+})
+
+// Capability group nav. Same behaviour as the product page's tier list: whichever
+// group's top has last crossed the viewport midpoint is the active one, so walking
+// them in DOM order and overwriting on each match leaves the deepest match winning.
+// A midpoint check rather than an IntersectionObserver for the same reason it is
+// there - the gaps between groups are taller than any sensible observer band, so a
+// scroll through a gap would leave nothing intersecting and the marker stranded.
+const activeGroup = ref(CAPABILITY_GROUPS[0].id)
+const groupRefs = ref<Record<string, HTMLElement | null>>({})
+
+function updateActiveGroup () {
+    const groups = Object.entries(groupRefs.value).filter((entry): entry is [string, HTMLElement] => !!entry[1])
+    if (!groups.length) return
+    const mid = window.innerHeight / 2
+    let current = groups[0][0]
+    for (const [id, el] of groups) {
+        if (el.getBoundingClientRect().top <= mid) current = id
+    }
+    activeGroup.value = current
+}
+
+let groupTicking = false
+function onGroupScroll () {
+    if (!groupTicking) { groupTicking = true; requestAnimationFrame(() => { groupTicking = false; updateActiveGroup() }) }
+}
+
+onMounted(() => {
+    window.addEventListener('scroll', onGroupScroll, { passive: true })
+    window.addEventListener('resize', onGroupScroll, { passive: true })
+    updateActiveGroup()
+})
+
+onUnmounted(() => {
+    window.removeEventListener('scroll', onGroupScroll)
+    window.removeEventListener('resize', onGroupScroll)
+})
+
 </script>
 
 <template>
   <div class="w-full">
     <!-- HERO: the agent picker is the primary action on this page, so it lives here
          rather than below a wall of positioning copy. -->
-    <section class="w-full relative bg-white">
-      <div class="relative z-10 w-full px-6 pt-12 md:pt-24 pb-10">
+    <!-- No bg-white: the layout's main already paints .gradient-bg, a radial indigo
+         wash anchored at the top right, and an opaque hero sits exactly over it. The
+         connector card below keeps its own white, because that is a card. -->
+    <section class="w-full relative">
+      <div class="relative z-10 w-full px-6 pt-12 md:pt-24 pb-12 sm:pb-16">
         <div class="sm:max-w-screen-lg mt-6 sm:mt-12 mx-auto">
           <div class="container m-auto text-left max-w-screen-lg">
             <div class="max-w-3xl mx-auto">
@@ -289,14 +283,14 @@ const openFaq = ref<number | null>(null)
                 The platform is the <span class="text-indigo-600">control plane.</span> AI is the <span class="text-indigo-600">accelerator.</span>
               </p>
               <p class="text-center max-w-4xl mx-auto text-gray-600">
-                AI capability is table stakes in 2026. Governed access to your operations is the difference.
+                Use FlowFuse Expert, or bring the agent your company already approved. Both reach only the teams you allow, and every action is logged.
               </p>
             </div>
 
             <!-- CONNECTOR: pick your agent, then three steps specific to it, so the
                  reader only sees the instructions that apply to them. -->
-            <div class="mt-12 border border-gray-200 bg-white">
-              <div class="ff-agent-tabs flex flex-nowrap gap-1 overflow-x-auto border-b border-gray-200 p-2" role="tablist" aria-label="Choose your AI agent">
+            <div class="mt-12 overflow-hidden rounded-xl border border-indigo-100 bg-white shadow-sm">
+              <div class="ff-agent-tabs flex flex-nowrap gap-1 overflow-x-auto border-b border-indigo-100 bg-indigo-50/60 p-2" role="tablist" aria-label="Choose your AI agent">
                 <button
                   v-for="client in CLIENTS"
                   :id="`ff-tab-${client.id}`"
@@ -305,12 +299,11 @@ const openFaq = ref<number | null>(null)
                   role="tab"
                   :aria-controls="`ff-panel-${client.id}`"
                   :aria-selected="activeClient === client.id"
-                  class="ff-agent-tab ff-btn flex flex-none items-center gap-2 whitespace-nowrap"
-                  :class="activeClient === client.id ? 'ff-btn--primary' : 'text-gray-700 hover:bg-gray-100'"
+                  class="ff-agent-tab flex flex-none items-center gap-2 whitespace-nowrap rounded-lg px-3 py-2 text-sm font-medium transition"
+                  :class="activeClient === client.id ? 'bg-indigo-600 text-white shadow-sm' : 'text-gray-600 hover:bg-white hover:text-gray-900'"
                   @click="selectClient(client.id)"
                 >
-                  <!-- eslint-disable-next-line vue/no-v-html -->
-                  <span v-if="client.icon" class="flex-none w-4 h-4" aria-hidden="true" v-html="client.icon" />
+                  <UIcon v-if="client.icon" :name="client.icon" class="flex-none size-4" aria-hidden="true" />
                   <img v-else-if="client.logo" :src="client.logo" alt="" class="h-4 w-auto flex-none" aria-hidden="true">
                   <span>{{ client.name }}</span>
                 </button>
@@ -323,18 +316,17 @@ const openFaq = ref<number | null>(null)
                 :key="`panel-${client.id}`"
                 role="tabpanel"
                 :aria-labelledby="`ff-tab-${client.id}`"
-                class="ff-agent-panel grid grid-cols-1 md:grid-cols-3 gap-8 p-6 md:p-8"
+                class="ff-agent-panel grid grid-cols-1 gap-8 p-6 md:grid-cols-3 md:gap-10 md:p-8"
               >
                 <div class="flex flex-col">
                   <p class="font-mono text-xs font-semibold text-indigo-600 m-0">01</p>
                   <p class="text-lg font-medium text-gray-900 mt-2 mb-0">{{ client.builtIn ? client.step1Title : STEP1.title }}</p>
                   <p class="text-gray-600 font-light text-sm mt-2 mb-0">{{ client.builtIn ? client.step1Body : STEP1.description }}</p>
                   <div v-if="client.builtIn" class="mt-auto pt-5">
-                    <CtaSignUp variant="primary" position="ai-tab-expert" />
+                    <CtaSignUp variant="primary" position="ai-tab-expert" class="w-full" />
                   </div>
                   <div v-else class="mt-auto pt-5">
-                    <p class="text-xs text-gray-500 mb-2">{{ ENDPOINT_NOTE }}</p>
-                    <FfCommand :command="ENDPOINT" event="cta-copy-mcp-endpoint" :position="client.id" />
+                    <FfCommand :command="ENDPOINT" event="cta-copy-mcp-endpoint" :position="client.id" stacked />
                   </div>
                 </div>
 
@@ -345,7 +337,7 @@ const openFaq = ref<number | null>(null)
                   <div class="mt-auto pt-5">
                     <a
                       :href="client.step2Url"
-                      class="ff-btn ff-btn--primary-outlined"
+                      class="ff-btn ff-btn--primary-outlined flex w-full"
                       :target="client.step2Url.startsWith('http') ? '_blank' : undefined"
                       :rel="client.step2Url.startsWith('http') ? 'noopener' : undefined"
                       @click="capture('cta-ai-open-client', { position: client.id })"
@@ -358,68 +350,34 @@ const openFaq = ref<number | null>(null)
                   <p class="text-lg font-medium text-gray-900 mt-2 mb-0">{{ client.step3Title || STEP3.title }}</p>
                   <p class="text-gray-600 font-light text-sm mt-2 mb-0">{{ client.step3Body || STEP3.description }}</p>
                   <div v-if="!client.noStep3Cta" class="mt-auto pt-5">
-                    <CtaSignUp variant="primary" position="ai-connect-step3" />
+                    <CtaSignUp variant="primary" position="ai-connect-step3" class="w-full" />
                   </div>
                 </div>
               </div>
             </div>
-            <p class="text-sm text-gray-500 mt-5 mb-0">
-              {{ CODING_NOTE }}
-              <a href="/docs/user/expert/third-party-agents/" class="text-indigo-600 font-semibold">See the documentation</a>.
-            </p>
+            <!-- Docs pointer, not a step. Carded in the same tinted, hover-lifting
+                 treatment the platform page uses for its How-it-works blocks, so it
+                 reads as somewhere to go rather than as fine print under step 03.
+                 The whole card is the link, which is what marks it as navigable. -->
+            <a
+              href="/docs/user/expert/third-party-agents/"
+              class="ff-doc-note mt-5 flex items-start gap-4 rounded-lg border border-indigo-100 bg-indigo-50/50 p-5 no-underline transition duration-300 ease-in-out hover:bg-indigo-50 hover:no-underline"
+              @click="capture('cta-ai-docs', { position: 'connector-note' })"
+            >
+              <UIcon name="i-lucide-terminal" class="size-6 flex-none text-indigo-600" aria-hidden="true" />
+              <span class="min-w-0">
+                <span class="block text-sm text-gray-600">{{ CODING_NOTE }}</span>
+                <span class="mt-2 block text-sm font-semibold text-indigo-600">See the documentation &rarr;</span>
+              </span>
+            </a>
           </div>
         </div>
       </div>
     </section>
 
-    <!-- SHOWCASE: one well, two views. Containment versus overlap carries the
-         Expert / bring-your-own distinction in a glance. -->
-    <div class="w-full bg-white px-6 pt-10 sm:pt-14 pb-8 sm:pb-10">
-      <div class="md:max-w-screen-lg mx-auto" :style="{ '--ff-show-duration': `${SHOWCASE_INTERVAL}ms` }">
-        <div class="ff-show-tabs" role="tablist" aria-label="Choose a view">
-          <button
-            v-for="slide in SLIDES"
-            :id="`ff-show-tab-${slide.id}`"
-            :key="slide.id"
-            type="button"
-            role="tab"
-            :aria-controls="`ff-show-panel-${slide.id}`"
-            :aria-selected="activeSlide === slide.id"
-            class="ff-show-tab"
-            :class="{ 'is-active': activeSlide === slide.id }"
-            @click="selectSlide(slide.id)"
-          >
-            <span class="ff-show-tab__label">{{ slide.label }}</span>
-            <span class="ff-show-tab__track">
-              <span
-                v-if="activeSlide === slide.id"
-                :key="fillKey"
-                class="ff-show-tab__fill"
-                :class="rotating ? 'is-running' : 'is-full'"
-              />
-              <span v-else class="ff-show-tab__fill" />
-            </span>
-          </button>
-        </div>
-        <div class="ff-showcase">
-          <div
-            v-for="slide in SLIDES"
-            v-show="activeSlide === slide.id"
-            :id="`ff-show-panel-${slide.id}`"
-            :key="`show-${slide.id}`"
-            role="tabpanel"
-            :aria-labelledby="`ff-show-tab-${slide.id}`"
-            class="ff-cap-well"
-          >
-            <img :src="slide.media" :alt="slide.mediaAlt" class="w-full h-full object-cover" loading="lazy">
-          </div>
-        </div>
-      </div>
-    </div>
-
     <!-- GOVERNANCE: the control plane every AI action runs through. Path-neutral,
          which is what lets it sit above the picker rather than under Expert. -->
-    <div class="w-full pt-4 pb-16 sm:pt-6 sm:pb-24 px-6">
+    <div class="ff-ai-governance w-full px-6 py-12 sm:py-16">
       <div class="md:max-w-screen-lg m-auto ff-blue-card pt-12 pb-12 px-6 md:px-10">
         <div class="text-center max-w-3xl mx-auto">
           <!-- eslint-disable-next-line vue/no-v-html -->
@@ -428,8 +386,7 @@ const openFaq = ref<number | null>(null)
         </div>
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mt-12">
           <div v-for="tile in GOVERNANCE.items" :key="tile.title" class="flex flex-col items-center text-center gap-3">
-            <!-- eslint-disable-next-line vue/no-v-html -->
-            <span class="w-8 h-8 text-indigo-600" aria-hidden="true" v-html="tile.icon" />
+            <UIcon :name="tile.icon" class="size-8 text-indigo-600" aria-hidden="true" />
             <p class="font-medium text-indigo-700 m-0">{{ tile.title }}</p>
             <p class="text-sm text-gray-600 font-light m-0">{{ tile.description }}</p>
           </div>
@@ -438,39 +395,64 @@ const openFaq = ref<number | null>(null)
     </div>
 
     <!-- CAPABILITIES: every AI use case, grouped by how it shows up in operations.
-         Group headers pin on desktop and alternate sides per group. -->
-    <div id="capabilities" class="w-full bg-indigo-50/60 py-16 sm:py-24 px-6 border-t border-gray-100 scroll-mt-16">
+         A sticky contents list on the left tracks which group you are in. -->
+    <div id="capabilities" class="w-full px-6 py-12 sm:py-16 bg-indigo-50/60 border-t border-gray-100 scroll-mt-16">
       <div class="md:max-w-screen-lg m-auto">
         <div class="max-w-4xl">
           <!-- eslint-disable-next-line vue/no-v-html -->
           <h2 class="w-full" v-html="CAPABILITY_INTRO.title" />
           <p class="mt-3 text-gray-600">{{ CAPABILITY_INTRO.subtitle }}</p>
         </div>
+        <!-- Group nav on the left, groups stacked on the right - the same contents
+             list the product page uses for Edge / Hub / Fleet. It replaces the old
+             per-group headers that pinned and alternated sides: with four groups and
+             eleven items, a reader needed to know what the section contained and how
+             far through it they were, which alternating headers could not tell them.
+             Desktop only; below lg the groups simply stack and each header does the
+             work on its own. -->
+        <div class="mt-16 flex flex-col lg:flex-row lg:gap-12">
+          <nav class="hidden lg:block lg:w-44 shrink-0" aria-label="Capability groups">
+            <ul class="sticky top-24 flex list-none flex-col border-l border-indigo-200 p-0">
+              <li v-for="group in CAPABILITY_GROUPS" :key="group.id" class="m-0">
+                <a
+                  :href="`#cap-${group.id}`"
+                  class="-ml-px block border-l-2 py-[0.6rem] pl-5 font-medium no-underline transition-colors duration-200"
+                  :class="activeGroup === group.id ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-gray-500 hover:text-indigo-600'"
+                  :aria-current="activeGroup === group.id ? 'true' : undefined"
+                >{{ group.eyebrow }}</a>
+              </li>
+            </ul>
+          </nav>
+          <div class="min-w-0 flex-1">
         <section
           v-for="(group, gi) in CAPABILITY_GROUPS"
+          :id="`cap-${group.id}`"
           :key="group.title"
-          class="ff-cap-group md:grid md:grid-cols-5 md:gap-x-12 lg:gap-x-16 mt-24"
-          :class="{ 'pt-20 border-t border-indigo-200/70': gi > 0 }"
+          :ref="(el) => { groupRefs[group.id] = el as HTMLElement | null }"
+          class="ff-cap-group scroll-mt-24"
+          :class="gi > 0 ? 'mt-20 pt-20 border-t border-indigo-200/70' : ''"
         >
-          <div class="ff-cap-sticky md:col-span-2 max-md:mb-10" :class="{ 'md:col-start-4': (gi + 1) % 2 === 0 }">
+          <div class="mb-10">
             <p class="flex items-center gap-3 text-xs font-semibold uppercase tracking-[0.16em] text-indigo-600 m-0">
               <span class="font-mono text-indigo-600">0{{ gi + 1 }}</span>
               <span>{{ group.eyebrow }}</span>
             </p>
             <h3 class="text-3xl md:text-4xl font-medium text-gray-900 leading-tight mt-4 mb-0">{{ group.title }}</h3>
-            <p class="text-gray-600 font-light max-w-md mt-4 mb-0">{{ group.subtitle }}</p>
+            <p class="text-gray-600 font-light max-w-2xl mt-4 mb-0">{{ group.subtitle }}</p>
           </div>
-          <div class="md:col-span-3" :class="{ 'md:col-start-1 md:row-start-1': (gi + 1) % 2 === 0 }">
+          <div>
             <div
               v-for="(item, ii) in group.items"
               :key="item.name"
-              class="ff-cap-item px-2 py-7"
-              :class="ii === 0 ? 'md:pt-0' : 'mt-6 pt-14 border-t border-indigo-100'"
+              class="ff-cap-item"
+              :class="ii === 0 ? 'pb-10' : 'mt-10 pt-10 pb-10 border-t border-indigo-100'"
             >
-              <!-- MEDIA WELL: a reserved 16:9 slot for a screenshot or short loop.
-                   Visible while empty on purpose, so the page shows where the assets
-                   go rather than reflowing when they land. -->
-              <div class="ff-cap-well" />
+              <!-- MEDIA WELL: the capability's schematic, one shared three-column
+                   layout across all of them, so the section reads as one platform
+                   rather than eleven unrelated pictures. -->
+              <div class="ff-cap-well">
+                <AiCapabilityDiagram :kind="item.diagram" />
+              </div>
               <div class="flex flex-wrap items-center gap-x-3 gap-y-2 mt-5">
                 <span class="text-xl font-medium text-gray-900">{{ item.name }}</span>
               </div>
@@ -480,54 +462,57 @@ const openFaq = ref<number | null>(null)
             </div>
           </div>
         </section>
+          </div>
+        </div>
       </div>
     </div>
 
     <!-- FURTHER READING: keeps the page from being a dead end and points at where
          the depth actually is. -->
-    <div class="w-full px-6 pb-16 sm:pb-20 pt-16 sm:pt-20">
+    <div class="w-full px-6 py-12 sm:py-16">
       <div class="md:max-w-screen-lg m-auto">
         <h2 class="max-md:text-center">More on <span class="text-indigo-600">industrial AI</span></h2>
         <p class="mt-3 text-gray-600 max-w-3xl">
           Worked examples and the thinking behind them, from the
           <a href="/blog/ai/" :class="LINK">FlowFuse AI blog</a>.
         </p>
-        <ul class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4 list-none p-0">
-          <li v-for="post in FURTHER_READING" :key="post.to" class="m-0">
-            <a :href="post.to" :class="LINK">{{ post.title }}</a>
-          </li>
+        <!-- Same tile as the blog index, tag pages and author pages: BlogListItem
+             renders its own <li>, so this is the flex-wrap <ul> those listings use
+             rather than a grid of our own. -->
+        <ul class="mt-6 flex flex-wrap">
+          <BlogListItem v-for="post in furtherReading" :key="post.path" :entry="post" />
         </ul>
       </div>
     </div>
 
+    <!-- FINAL CTA: the same block that closes /product/, so the two pages end the
+         same way rather than each inventing a sign-off. -->
+    <div class="w-full px-6 py-12 sm:py-16">
+      <div class="max-w-screen-lg mx-auto">
+        <div class="rounded-xl px-9 py-12 flex flex-col items-center gap-8 text-center ff-get-started-bg">
+          <p class="text-white text-4xl sm:text-5xl font-medium m-0">Get Started with FlowFuse</p>
+          <p class="text-indigo-50 font-light text-xl max-w-2xl m-0">Your first operational application could be running this week. Request a demo to see how, or explore pricing to find the right fit.</p>
+          <div class="flex flex-col sm:flex-row gap-4 items-center">
+            <CtaBookDemo variant="highlight" position="get-started" />
+            <a class="ff-btn group flex flex-col" href="/pricing/" @click="capture('cta-pricing', { position: 'get-started' })">
+              <span class="text-base uppercase items-center text-base flex gap-2 uppercase items-center text-white hover:text-gray-200">
+                <span>VIEW PRICING</span>
+                <IconsArrowRightIcon class="w-5 h-5" />
+              </span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- FAQ: the questions are also emitted as FAQPage structured data by
          useSchemaOrg above, off the same array. -->
-    <div id="faqs" class="w-full px-6 pt-20 pb-16 bg-indigo-50/50">
+    <div class="w-full px-6 py-12 sm:py-16 bg-indigo-50/50">
       <div class="max-w-screen-lg mx-auto">
         <h2 class="mb-8">Frequently Asked <span class="text-indigo-600">Questions</span></h2>
-        <div v-for="(item, i) in FAQ" :key="item.question" class="w-full py-4" :class="{ 'border-b': i < FAQ.length - 1 }">
-          <h3 class="m-0">
-            <button
-              type="button"
-              class="flex flex-row justify-between items-center w-full m-0 p-0 gap-6 cursor-pointer text-left bg-transparent border-0 text-lg font-medium"
-              :aria-expanded="openFaq === i"
-              :aria-controls="`answer-${i}`"
-              @click="openFaq = openFaq === i ? null : i"
-            >
-              <span>{{ item.question }}</span>
-              <!-- eslint-disable-next-line vue/no-v-html -->
-              <span
-                class="w-5 h-5 shrink-0 transition-transform duration-300 ease-in-out"
-                :class="{ 'rotate-180': openFaq === i }"
-                aria-hidden="true"
-                v-html="ICON.chevronDown"
-              />
-            </button>
-          </h3>
-          <div v-show="openFaq === i" :id="`answer-${i}`" class="px-6 mt-6">
-            <p class="text-gray-600">{{ item.answer }}</p>
-          </div>
-        </div>
+        <!-- The shared accordion, same as the blog and customer stories. It carries
+             the #faqs anchor itself, so the wrapper above no longer sets one. -->
+        <BlogFaq :faq="FAQ" />
       </div>
     </div>
   </div>

From 92974f061552e3373bb3c8f26e9e62950f210ea3 Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Wed, 26 Aug 2026 12:15:55 -0700
Subject: [PATCH 07/11] Create AiCapabilityDiagram.vue

---
 nuxt/components/AiCapabilityDiagram.vue | 214 ++++++++++++++++++++++++
 1 file changed, 214 insertions(+)
 create mode 100644 nuxt/components/AiCapabilityDiagram.vue

diff --git a/nuxt/components/AiCapabilityDiagram.vue b/nuxt/components/AiCapabilityDiagram.vue
new file mode 100644
index 0000000000..cc19b0464d
--- /dev/null
+++ b/nuxt/components/AiCapabilityDiagram.vue
@@ -0,0 +1,214 @@
+<script setup lang="ts">
+// The schematic that fills each capability's media well on /ai.
+//
+// Shared three-column spine - something goes in, the platform does something to
+// it, something comes out - because that is genuinely the shape of every
+// capability on the page, and eleven unrelated drawings would undercut the
+// section's own argument that these all run on one platform.
+//
+// What makes them not-flat is per-column iconography: each column carries a glyph
+// drawn for its subject (a camera for RTSP ingest, a chip for a model, a shield
+// for RBAC). Neutral card for the parts that are yours, accent card for the
+// FlowFuse piece. Connectors are static arrows - eleven of these scroll past on
+// one page, so nothing here moves.
+const props = defineProps<{ kind: string }>()
+
+// Marker ids are document-global and eleven of these render on one page, so each
+// instance needs its own or they would collide.
+const uid = useId()
+const arrowId = computed(() => `aidiag-arrow-${uid}`)
+
+// A wide, short frame: 720x150. The width is deliberate - the well spans its
+// column, so the viewBox has to be wide enough that the cards fill that width
+// rather than being scaled up to reach it. The earlier 480-wide frame stretched by
+// ~1.4x at column width and took its type up with it, which is what made the
+// labels look oversized; at 720 the scale factor is roughly 1.
+const COLS = [
+    { x: 34, w: 180 },
+    { x: 270, w: 180 },
+    { x: 506, w: 180 },
+]
+const CARD_Y = 20
+const CARD_H = 110
+const FLOW_Y = CARD_Y + CARD_H / 2
+const GLYPH_Y = CARD_Y + 32
+const LABEL_MID = CARD_Y + 78
+const LINE_H = 17
+
+// Line glyphs on a 24x24 grid, scaled and centred into each card. Stroke-only, so
+// they inherit the card's colour and turn indigo on the accent column for free.
+const GLYPHS: Record<string, string[]> = {
+    prompt: ['M3 5h18v11H8l-5 4z'],
+    answer: ['M3 5h18v11H8l-5 4z', 'M7 9h10', 'M7 12.5h6'],
+    expert: ['M10 3l1.5 4.2L15.7 8.7l-4.2 1.5L10 14.4 8.5 10.2 4.3 8.7l4.2-1.5z', 'M17.5 14l.9 2.4 2.4.9-2.4.9-.9 2.4-.9-2.4-2.4-.9 2.4-.9z'],
+    flow: ['M3 5.5h5v4H3z', 'M16 14.5h5v4h-5z', 'M8 7.5h3a2 2 0 012 2v5a2 2 0 002 2h1'],
+    app: ['M3 4h18v16H3z', 'M3 9h18', 'M9 9v11'],
+    blueprint: ['M4 4h16v16H4z', 'M8.5 8.5h7v7h-7z'],
+    agent: ['M6.5 8h11v8h-11z', 'M12 4.5V8', 'M9.8 11.8h.01', 'M14.2 11.8h.01'],
+    tools: ['M14.5 5.5a4 4 0 105 5l-9.2 9.2-3-3z'],
+    docs: ['M6 3h9l4 4v14H6z', 'M15 3v4h4', 'M9 12h7', 'M9 15.5h5'],
+    approve: ['M12 3a9 9 0 100 18 9 9 0 000-18z', 'M8 12l3 3 5-6'],
+    machine: ['M12 8.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z', 'M12 2.5v3.5', 'M12 18v3.5', 'M2.5 12H6', 'M18 12h3.5', 'M5.2 5.2l2.5 2.5', 'M16.3 16.3l2.5 2.5', 'M18.8 5.2l-2.5 2.5', 'M7.7 16.3l-2.5 2.5'],
+    live: ['M3 17l4.5-6.5L12 14l4-8 5 11'],
+    camera: ['M3 8h4l2-2h6l2 2h4v12H3z', 'M12 12.5a3.2 3.2 0 100 6.4 3.2 3.2 0 000-6.4z'],
+    inspect: ['M4 8.5V4h4.5', 'M15.5 4H20v4.5', 'M20 15.5V20h-4.5', 'M8.5 20H4v-4.5', 'M9 10h6v4H9z'],
+    model: ['M6.5 6.5h11v11h-11z', 'M9.5 3v3.5', 'M14.5 3v3.5', 'M9.5 17.5V21', 'M14.5 17.5V21', 'M3 9.5h3.5', 'M3 14.5h3.5', 'M17.5 9.5H21', 'M17.5 14.5H21'],
+    key: ['M15 6.5a4 4 0 11-3.8 5.2H8.5l-2.5 2.5v3H3.5v-3l4-4h3.7A4 4 0 0115 6.5z'],
+    plug: ['M9 3v6', 'M15 3v6', 'M6 9h12v2.5a6 6 0 01-12 0z', 'M12 17.5V21'],
+    shield: ['M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z', 'M9 12l2 2 4-4.5'],
+    platform: ['M3 5h18v5H3z', 'M3 14h18v5H3z', 'M6.5 7.5h.01', 'M6.5 16.5h.01'],
+    terminal: ['M3.5 4.5h17v15h-17z', 'M8 9.5l2.5 2.5L8 14.5', 'M12.5 14.5h4'],
+}
+
+type Col = { glyph: string, lines: string[], accent?: boolean }
+type Spec = { alt: string, cols: [Col, Col, Col] }
+
+const SPECS: Record<string, Spec> = {
+    'assisted-engineering': {
+        alt: 'Plain language goes to FlowFuse Expert, which produces a working Node-RED flow.',
+        cols: [
+            { glyph: 'prompt', lines: ['Plain', 'language'] },
+            { glyph: 'expert', lines: ['FlowFuse', 'Expert'], accent: true },
+            { glyph: 'flow', lines: ['Working', 'flow'] },
+        ],
+    },
+    'prompt-to-app': {
+        alt: 'A described application goes to FlowFuse Expert, which builds a draft in your workspace.',
+        cols: [
+            { glyph: 'prompt', lines: ['Describe', 'the app'] },
+            { glyph: 'expert', lines: ['Expert', 'builds it'], accent: true },
+            { glyph: 'app', lines: ['Draft in your', 'workspace'] },
+        ],
+    },
+    'build-agents': {
+        alt: 'An agent blueprint becomes your own agent, grounded in your data and tools.',
+        cols: [
+            { glyph: 'blueprint', lines: ['Agent', 'blueprint'] },
+            { glyph: 'agent', lines: ['Your', 'agent'], accent: true },
+            { glyph: 'tools', lines: ['Your data', 'and tools'] },
+        ],
+    },
+    'product-knowledge': {
+        alt: 'Your question is answered from FlowFuse and Node-RED documentation, without leaving the workspace.',
+        cols: [
+            { glyph: 'prompt', lines: ['Your', 'question'] },
+            { glyph: 'docs', lines: ['FlowFuse and', 'Node-RED docs'], accent: true },
+            { glyph: 'answer', lines: ['Answer in', 'context'] },
+        ],
+    },
+    'governed-operations': {
+        alt: 'AI proposes a change, a person approves it, and only then does it reach the machine.',
+        cols: [
+            { glyph: 'agent', lines: ['AI', 'proposes'], accent: true },
+            { glyph: 'approve', lines: ['A person', 'approves'] },
+            { glyph: 'machine', lines: ['Change', 'lands'] },
+        ],
+    },
+    'ask-your-plant': {
+        alt: 'A natural language question is answered from live machine state, alarms and logs.',
+        cols: [
+            { glyph: 'prompt', lines: ['Your', 'question'] },
+            { glyph: 'live', lines: ['Live machine', 'state'], accent: true },
+            { glyph: 'answer', lines: ['Answer,', 'grounded'] },
+        ],
+    },
+    'visual-inspection': {
+        alt: 'A camera feed over RTSP runs through an ONNX model at the edge, producing a pass or fail.',
+        cols: [
+            { glyph: 'camera', lines: ['Camera', 'over RTSP'] },
+            { glyph: 'model', lines: ['ONNX model', 'at the edge'], accent: true },
+            { glyph: 'inspect', lines: ['Pass', 'or fail'] },
+        ],
+    },
+    'any-model': {
+        alt: 'Your flow calls a certified LLM node, using your own model and your own key.',
+        cols: [
+            { glyph: 'flow', lines: ['Your', 'flow'] },
+            { glyph: 'model', lines: ['Certified', 'LLM node'], accent: true },
+            { glyph: 'key', lines: ['Your model,', 'your key'] },
+        ],
+    },
+    'bring-your-agent': {
+        alt: 'Copilot, ChatGPT or Claude connects over MCP and reaches your teams and instances.',
+        cols: [
+            { glyph: 'agent', lines: ['Copilot, ChatGPT', 'or Claude'] },
+            { glyph: 'plug', lines: ['MCP', 'connector'], accent: true },
+            { glyph: 'platform', lines: ['Your teams', 'and instances'] },
+        ],
+    },
+    'you-decide': {
+        alt: 'Your agent is held to the permissions and role-based access control you granted it.',
+        cols: [
+            { glyph: 'agent', lines: ['Your', 'agent'] },
+            { glyph: 'shield', lines: ['Permissions', 'and RBAC'], accent: true },
+            { glyph: 'approve', lines: ['Only what', 'you allowed'] },
+        ],
+    },
+    'your-tools': {
+        alt: 'Your flows become an MCP server, and an agent calls the tools you registered.',
+        cols: [
+            { glyph: 'flow', lines: ['Your', 'flows'] },
+            { glyph: 'platform', lines: ['MCP', 'server'], accent: true },
+            { glyph: 'terminal', lines: ['Agent calls', 'your tools'] },
+        ],
+    },
+}
+
+const spec = computed(() => SPECS[props.kind])
+
+// 24x24 glyph scaled to 26 and centred over its card.
+const GLYPH_SCALE = 26 / 24
+function glyphTransform (i: number) {
+    const cx = COLS[i].x + COLS[i].w / 2
+    return `translate(${cx - 13}, ${GLYPH_Y - 13}) scale(${GLYPH_SCALE})`
+}
+
+function labelY (lineCount: number, index: number) {
+    const top = LABEL_MID - ((lineCount - 1) * LINE_H) / 2
+    return top + index * LINE_H + 5
+}
+</script>
+
+<template>
+  <svg v-if="spec" class="ff-aidiag" viewBox="0 0 720 150" role="img" :aria-label="spec.alt">
+    <defs>
+      <marker :id="arrowId" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
+        <path d="M0 1l7 4-7 4z" class="ff-aidiag__arrowhead" />
+      </marker>
+    </defs>
+
+    <!-- Connectors first, so each card paints over their ends. -->
+    <line
+      v-for="gap in [0, 1]"
+      :key="`flow-${gap}`"
+      class="ff-aidiag__flow"
+      :x1="COLS[gap].x + COLS[gap].w + 8"
+      :y1="FLOW_Y"
+      :x2="COLS[gap + 1].x - 12"
+      :y2="FLOW_Y"
+      :marker-end="`url(#${arrowId})`"
+    />
+
+    <g v-for="(col, i) in spec.cols" :key="`col-${i}`" :class="{ 'is-accent': col.accent }">
+      <rect
+        class="ff-aidiag__card"
+        :x="COLS[i].x"
+        :y="CARD_Y"
+        :width="COLS[i].w"
+        :height="CARD_H"
+        rx="14"
+      />
+      <g class="ff-aidiag__glyph" :transform="glyphTransform(i)">
+        <path v-for="(d, pi) in GLYPHS[col.glyph]" :key="`g-${pi}`" :d="d" />
+      </g>
+      <text
+        v-for="(line, li) in col.lines"
+        :key="`line-${li}`"
+        class="ff-aidiag__label"
+        :x="COLS[i].x + COLS[i].w / 2"
+        :y="labelY(col.lines.length, li)"
+        text-anchor="middle"
+      >{{ line }}</text>
+    </g>
+  </svg>
+</template>

From 78f36fa40c496784f2071af59b786e09200d3742 Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Wed, 26 Aug 2026 12:16:34 -0700
Subject: [PATCH 08/11] Update FfCommand.vue

---
 nuxt/components/content/FfCommand.vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/nuxt/components/content/FfCommand.vue b/nuxt/components/content/FfCommand.vue
index cbbb0c281c..8c5b5a5241 100644
--- a/nuxt/components/content/FfCommand.vue
+++ b/nuxt/components/content/FfCommand.vue
@@ -12,7 +12,12 @@ const props = withDefaults(defineProps<{
     // click whether or not the copy landed; this only counts real copies.
     event?: string
     position?: string
-}>(), { event: undefined, position: undefined })
+    // Puts the copy control below the address as a full-width primary button
+    // instead of a small chip inside the dark block. For narrow columns, where
+    // the inline button leaves too little room for the address to stay on one
+    // line, and where the button needs to match the other CTAs beside it.
+    stacked?: boolean
+}>(), { event: undefined, position: undefined, stacked: false })
 
 const capture = useCapture()
 const copied = ref(false)
@@ -51,9 +56,18 @@ onUnmounted(() => clearTimeout(resetTimer))
 </script>
 
 <template>
-  <div class="ff-command">
+  <div class="ff-command" :class="{ 'ff-command--stacked': stacked }">
     <code class="ff-command__text">{{ command }}</code>
+    <!-- Stacked uses the site's own button classes rather than the chip styling,
+         so it is the same object as the CTAs it sits beside. -->
     <button
+      v-if="stacked"
+      type="button"
+      class="ff-btn ff-btn--primary flex w-full uppercase"
+      @click="copy"
+    >{{ copied ? 'Copied' : 'Copy' }}</button>
+    <button
+      v-else
       type="button"
       class="ff-command__copy"
       :class="{ 'ff-command__copy--done': copied }"

From 43791cd7d7b1d16ce62d35fc7c27c0f754f1bd04 Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Wed, 26 Aug 2026 12:17:07 -0700
Subject: [PATCH 09/11] Update legacy.ts


From a5d9c2dcdc05b8c8b2243fe816c80e728cb5eba7 Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Wed, 26 Aug 2026 12:18:01 -0700
Subject: [PATCH 10/11] Update style.css

---
 src/css/style.css | 212 +++++++++++++++++++++++++++++-----------------
 1 file changed, 136 insertions(+), 76 deletions(-)

diff --git a/src/css/style.css b/src/css/style.css
index 0aa1b7d2cb..8bfa5679cd 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -482,6 +482,35 @@ dl.message-properties > dd {
     @apply border-green-500 text-green-400;
 }
 
+/* Stacked variant: the address block on its own, with the copy control below it as
+   a full-width primary button rather than a chip inside the dark block.
+
+   Why it exists: side by side, the inline button plus the block's own padding took
+   106px of the AI page's 293px column, leaving 186px for an address that needs
+   236px at 14px - so it broke across three lines. Shrinking the type was the wrong
+   trade for something you are about to paste. Below the block the address gets the
+   full column and stays on one line, and the button becomes the same object as the
+   CTAs in the columns beside it instead of a third kind of control.
+
+   Defined after the base rules rather than with higher specificity, so the two
+   stay legible as "default" and "the variant that overrides it". */
+.ff-command--stacked {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.75rem;
+    padding: 0;
+    background-color: transparent;
+}
+.ff-command--stacked .ff-command__text {
+    display: block;
+    width: 100%;
+    background-color: #0e1114;
+    white-space: nowrap;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    @apply rounded-lg p-4;
+}
+
 /*
     Event banner
 */
@@ -3218,24 +3247,6 @@ lite-youtube::before {
     height: 1.25rem;
 }
 
-/* AI page ("/ai/") capabilities: sticky-header, scrolling-items layout.
-   The left group header pins while that group's icon-marked blocks scroll on
-   the right, then the next group's header takes over. These rules live in
-   the UNLAYERED block on purpose: the Tailwind `utilities` layer is
-   outranked by unlayered top-level rules, so the load-bearing sticky
-   positioning is placed here to avoid being silently overridden. */
-@media (min-width: 768px) {
-    .ff-cap-sticky {
-        position: -webkit-sticky;
-        position: sticky;
-        /* clear the sticky site header (roughly 75px) with breathing room */
-        top: 100px;
-        /* take natural height inside the taller grid row so there is travel
-           room for the pin; without this the column stretches full height */
-        align-self: start;
-    }
-}
-
 /* Capability marker icon: the item's own icon stands in for the old number
    chip, so the blocks read as a parallel list rather than an ordered sequence.
    Sized slot, indigo to match the brand accent, aligned to the block top. */
@@ -3259,64 +3270,40 @@ lite-youtube::before {
     border-left: 2px solid var(--color-indigo-200);
 }
 
-/* Showcase tabs: text labels with a timing line, not buttons. The line under the active
-   tab fills over the rotation interval so the switch is expected rather than sudden. */
-.ff-show-tabs {
-    display: flex;
-    gap: 1rem;
-    margin-bottom: 1rem;
-}
-
-/* Each tab takes an equal share of the row, so the timing lines together span the
-   full width of the well below them. */
-.ff-show-tab {
-    flex: 1 1 0;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    padding: 0;
-    background: none;
-    border: 0;
-    text-align: left;
-    cursor: pointer;
+/* Agent tab: a segmented control on the tinted rail, not a row of CTA buttons.
+   The brand's solid indigo marks the active one; the rest stay quiet until hovered.
+   Sizing and colour are utility classes on the element - only the focus ring lives
+   here, because the ring has to clear the pill on all four sides inside a scroller
+   that would otherwise clip it. */
+.ff-agent-tab:focus {
+    outline: none;
 }
-.ff-show-tab__label {
-    font-size: 0.95rem;
-    font-weight: 400;
-    color: var(--color-gray-500);
-    transition: color 0.15s ease;
-    white-space: nowrap;
+.ff-agent-tab:focus-visible {
+    outline: 2px solid var(--color-indigo-600);
+    outline-offset: 2px;
 }
-.ff-show-tab.is-active .ff-show-tab__label,
-.ff-show-tab:hover .ff-show-tab__label {
-    color: var(--color-gray-900);
+/* The brand marks are <img>, so they keep their own colours; our own glyphs are
+   masked spans that inherit currentColor and turn white with the label. */
+.ff-agent-tab img {
+    flex: none;
 }
-.ff-show-tab.is-active .ff-show-tab__label { font-weight: 500; }
 
-.ff-show-tab__track {
-    display: block;
-    height: 2px;
-    width: 100%;
-    background-color: var(--color-gray-200);
-    overflow: hidden;
-}
-.ff-show-tab__fill {
-    display: block;
-    height: 100%;
-    width: 0;
-    background-color: var(--color-indigo-600);
-}
-.ff-show-tab__fill.is-full { width: 100%; }
-.ff-show-tab__fill.is-running {
-    animation: ffShowFill var(--ff-show-duration, 6000ms) linear forwards;
-}
-@keyframes ffShowFill {
-    from { width: 0; }
-    to { width: 100%; }
-}
-@media (prefers-reduced-motion: reduce) {
-    .ff-show-tab__fill.is-running { animation: none; width: 100%; }
+/* The three step CTAs are three different elements - CtaSignUp's UButton, an
+   <a class="ff-btn"> and the copy <button> - so their intrinsic heights land 4px
+   apart (36 / 38 / 40) even with identical padding and font size, because a
+   <button>, an <a> and a UButton each resolve line-height differently. Pin the two
+   ff-btn ones to the UButton's 40px so the row reads as one control repeated
+   rather than three lookalikes. Width comes from w-full on each, so all three fill
+   their column and line up. */
+.ff-agent-panel .ff-btn {
+    height: 40px;
+    align-items: center;
+    line-height: 1.5;
+    /* Vertical padding would push the outlined variant to 42px, since its 1px
+       borders sit outside the padding box. The flex centering above does the job
+       the padding was doing. */
+    padding-top: 0;
+    padding-bottom: 0;
 }
 
 /* Agent tab strip: scrolls sideways rather than wrapping, so the row stays one line at
@@ -3334,15 +3321,17 @@ lite-youtube::before {
     border-radius: 3px;
 }
 
-/* Media well: a reserved 16:9 slot under each capability, for a screenshot or a
-   short loop. Deliberately visible while empty so the page shows where the assets
-   go, rather than collapsing and then reflowing when they land. */
+/* Media well: the frame around each capability's schematic. */
 .ff-cap-well {
-    aspect-ratio: 16 / 9;
+    /* Matches the diagram's 720x150 viewBox, so the frame hugs the drawing instead
+       of leaving a 16:9 box mostly empty. Full column width - the drawing is wide
+       enough to fill it, so the width costs nothing in height. */
+    aspect-ratio: 720 / 150;
     width: 100%;
     overflow: hidden;
     background-color: var(--color-white);
     border: 1px solid var(--color-indigo-100);
+    border-radius: 0.5rem;
 }
 
 .ff-cap-icon svg {
@@ -3350,6 +3339,77 @@ lite-youtube::before {
     height: 1.875rem;
 }
 
+/* .ff-blue-card bakes mt-6 into its @apply, which every other user of it wants but
+   this page does not: here the section already owns the vertical rhythm, so that
+   24px landed on top of the section padding and put the governance card 152px below
+   the connector while it sat 64px above the section after it - lopsided, and wider
+   than the 128px every other section boundary uses.
+
+   Unlayered and scoped rather than an mt-0 utility on the element: .ff-blue-card is
+   itself unlayered, and Tailwind's utilities layer is outranked by unlayered rules,
+   so the utility would silently lose. */
+.ff-ai-governance .ff-blue-card {
+    margin-top: 0;
+}
+
+/* Capability schematics (AiCapabilityDiagram): a neutral card for the parts that
+   are yours, an accent card for the FlowFuse piece, a static arrow for direction.
+   The SVG's 720x150 viewBox fills the well, so nothing is scaled up.
+
+   Colour is set once per column on the group (.is-accent) rather than per element,
+   so a card, its glyph and its label cannot end up in different states. */
+.ff-aidiag {
+    display: block;
+    width: 100%;
+    height: 100%;
+    font-family: inherit;
+}
+.ff-aidiag__card {
+    fill: var(--color-white);
+    stroke: var(--color-indigo-100);
+    stroke-width: 1.25;
+}
+.ff-aidiag__glyph {
+    fill: none;
+    stroke: var(--color-gray-400);
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+/* 12 in a 720-wide viewBox that renders at ~800: about 13px on screen, so a
+   diagram label sits below the 16px body copy rather than competing with it. */
+.ff-aidiag__label {
+    font-size: 12px;
+    fill: var(--color-gray-600);
+}
+
+/* The FlowFuse column: filled, brand-bordered, and its glyph and label lift with
+   it, so the governed piece is what the eye lands on. */
+.ff-aidiag .is-accent .ff-aidiag__card {
+    fill: var(--color-indigo-50);
+    stroke: var(--color-indigo-600);
+}
+.ff-aidiag .is-accent .ff-aidiag__glyph {
+    stroke: var(--color-indigo-600);
+    stroke-width: 1.7;
+}
+.ff-aidiag .is-accent .ff-aidiag__label {
+    fill: var(--color-indigo-800);
+    font-weight: 500;
+}
+
+/* Static connector. Eleven of these scroll past on one page, so direction is
+   carried by an arrowhead rather than by animation - travelling dots at that count
+   read as eleven things moving at the reader. */
+.ff-aidiag__flow {
+    stroke: var(--color-indigo-300);
+    stroke-width: 2;
+    stroke-linecap: round;
+}
+.ff-aidiag__arrowhead {
+    fill: var(--color-indigo-300);
+}
+
 /* "Coming soon" pill: shape and type only. The amber colour comes from utility
    classes on the element (bg-amber-50 / text-amber-700 / border-amber-200), so
    the palette stays in sync with the design tokens. Amber reads as

From 8b0323c83f333965e5ac2cc7b382698720667302 Mon Sep 17 00:00:00 2001
From: Kristopher <kristopherleads@gmail.com>
Date: Wed, 26 Aug 2026 13:05:05 -0700
Subject: [PATCH 11/11] Update index.vue

---
 nuxt/pages/ai/index.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/nuxt/pages/ai/index.vue b/nuxt/pages/ai/index.vue
index 966a4c5d11..abcbddd699 100644
--- a/nuxt/pages/ai/index.vue
+++ b/nuxt/pages/ai/index.vue
@@ -125,7 +125,7 @@ const CLIENTS = [
         step2Title: "Your MCP client's config",
         step2Body: 'Any MCP-capable client works, pointed at your own model, so nothing has to leave your network.',
         step2Label: 'See the documentation',
-        step2Url: '/docs/user/expert/third-party-agents/#local-and-self-hosted-models',
+        step2Url: '/docs/user/expert/',
     },
 ]
 
@@ -156,7 +156,7 @@ const CAPABILITY_INTRO = {
 
 // NOTE: Predictive analytics and Edge ML are intentionally omitted from public
 // claims (not shipped / not on the roadmap). Do not add them here without product
-// sign-off. `media` is an empty slot per item until the assets exist.
+// sign-off.
 const CAPABILITY_GROUPS = [
     {
         id: 'build',
@@ -360,7 +360,7 @@ onUnmounted(() => {
                  reads as somewhere to go rather than as fine print under step 03.
                  The whole card is the link, which is what marks it as navigable. -->
             <a
-              href="/docs/user/expert/third-party-agents/"
+              href="/docs/user/expert/"
               class="ff-doc-note mt-5 flex items-start gap-4 rounded-lg border border-indigo-100 bg-indigo-50/50 p-5 no-underline transition duration-300 ease-in-out hover:bg-indigo-50 hover:no-underline"
               @click="capture('cta-ai-docs', { position: 'connector-note' })"
             >