/ai: one agent picker in the hero, Expert first

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;

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.