-
-
- {% image "./images/ai/ai-ui.png", "FlowFuse Expert showing AI-generated flow suggestions", [1200] %}
+
+
+
+
+
+
+
+
+
+
+ {% for slide in showcase.slides %}
+
+ {% endfor %}
+
+
+ {% for slide in showcase.slides %}
+
+ {% endfor %}
+
+
+
+
-
+
+
+ {{ governance.title | safe }}
+{{ governance.subtitle }}
+
+ {% for g in governance.items %}
+
+
+ {% endfor %}
{% include g.svgPath %}
+ {{ g.title }}
+{{ g.description }}
+
{% for group in capabilityGroups %}
-
-
{{ capabilityIntro.title | safe }}
@@ -148,8 +404,10 @@ governance:
+
+
-
-
0{{ loop.index }} {{ group.eyebrow }} @@ -157,23 +415,38 @@ governance:
{{ group.title }}
{{ group.subtitle }}
+
+
{% for item in group.items %}
-
-
-
-
-
-
@@ -181,35 +454,85 @@ governance:
{% endfor %}
-
+
- {{ item.name }}
- {% if item.statusKind == 'soon' %}
- Coming soon
- {% endif %}
-
- {{ item.description | safe }}
-
+
+
{% endfor %}
+ {% if item.media %}
+ {% if ".webm" in item.media or ".mp4" in item.media %}
+
+ {% else %}
+ 
+ {% endif %}
+ {% endif %}
+
+ {{ item.name }}
+ {% if item.statusKind == 'soon' %}
+ Coming soon
+ {% endif %}
+
+ {{ item.description | safe }}
+ {% if item.externalNote %} +{{ item.externalNote }}
+ {% endif %}
-
-
-
- {{ governance.title | safe }}
-{{ governance.subtitle }}
-
- {% for g in governance.items %}
-
+
+
+
-
- {% endfor %}
- {% include g.svgPath %}
- {{ g.title }}
-{{ g.description }}
-
+
-
-
-
-
+
More on industrial AI
+Worked examples and the thinking behind them, from the FlowFuse AI blog.
+
+
+
+
+
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 @@
+
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 @@
+
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 @@
+
\ 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 @@
+
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 @@
+
+
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 @@
+
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 @@
+
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 @@
+
-
Where AI meets your operations
-The use cases pair with FlowFuse AI, from governed agent access to AI-assisted monitoring.
- {% set featuredUseCases = ["production-monitoring", "shop-floor-communication"] %} - {% include "components/use-case-links.njk" %} - +Frequently Asked Questions
+
+ {% include "faq.njk" %}
+