Fix integration icons in production

.github/tests/integration-icon-css.html

@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="utf-8" />
+    <title>Integration icon CSS regression test</title>
+    <link rel="stylesheet" href="/style.css" />
+    <style>
+      #navigation-items button {
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: center;
+        gap: 12px;
+        width: 320px;
+      }
+    </style>
+  </head>
+  <body>
+    <nav id="navigation-items">
+      <ul>
+        <li>
+          <button id="local-icon" type="button">
+            <div><svg width="16" height="16" aria-hidden="true"></svg></div>
+            <div><img src="/images/integration-icons/claude.svg" alt="" /></div>
+            <div>Local asset URL</div>
+          </button>
+        </li>
+        <li>
+          <button id="cdn-icon" type="button">
+            <div><svg width="16" height="16" aria-hidden="true"></svg></div>
+            <div>
+              <img
+                src="https://mintcdn.com/tbd-6fc993ce/example/images/integration-icons/claude.svg?fit=max&amp;auto=format&amp;n=example&amp;q=85&amp;s=example"
+                alt=""
+              />
+            </div>
+            <div>Mintlify CDN URL</div>
+          </button>
+        </li>
+      </ul>
+    </nav>
+    <pre id="result">Running…</pre>
+    <script>
+      window.addEventListener("load", () => {
+        const inspect = (id) => {
+          const button = document.getElementById(id);
+          const icon = button.children[1];
+          const label = button.children[2];
+          const image = icon.querySelector("img");
+          const styles = getComputedStyle(image);
+
+          return {
+            iconLeft: icon.getBoundingClientRect().left < label.getBoundingClientRect().left,
+            width: styles.width,
+            height: styles.height,
+            opacity: styles.opacity,
+            filter: styles.filter,
+          };
+        };
+
+        const results = {
+          local: inspect("local-icon"),
+          cdn: inspect("cdn-icon"),
+        };
+        const expected = (result) =>
+          result.iconLeft &&
+          result.width === "14px" &&
+          result.height === "14px" &&
+          result.opacity === "0.68" &&
+          result.filter === "invert(1)";
+        const passed = expected(results.local) && expected(results.cdn);
+
+        document.body.dataset.testStatus = passed ? "passed" : "failed";
+        document.getElementById("result").textContent = JSON.stringify(
+          { passed, ...results },
+          null,
+          2,
+        );
+      });
+    </script>
+  </body>
+</html>

docs.json

@@ -188,6 +188,7 @@
               "integrations/browser-use",
               {
                 "group": "Claude",
+                "icon": "/images/integration-icons/claude.svg",
                 "pages": [
                   "integrations/claude/overview",
                   "integrations/claude/claude-code-and-desktop",
@@ -197,6 +198,7 @@
               },
               {
                 "group": "Computer Use Models",
+                "icon": "/images/integration-icons/computer-cursor-rounded.svg",
                 "pages": [
                   "integrations/computer-use/overview",
                   "integrations/computer-use/anthropic",
@@ -212,6 +214,7 @@
               "integrations/stagehand",
               {
                 "group": "Stripe Projects",
+                "icon": "/images/integration-icons/stripe.svg",
                 "pages": [
                   "integrations/stripe-projects",
                   "integrations/stripe-projects-browser"
@@ -221,6 +224,7 @@
               "integrations/valtown",
               {
                 "group": "Vercel",
+                "icon": "/images/integration-icons/vercel.svg",
                 "pages": [
                   "integrations/vercel/overview",
                   "integrations/vercel/agent-browser",

integrations/1password.mdx

@@ -1,6 +1,7 @@
 ---
 title: "1Password"
 description: "Use credentials from your 1Password vaults for Managed Auth"
+icon: "/images/integration-icons/1password-logo-transparent.svg"
 ---
 
 Connect 1Password to automatically use credentials from your existing vaults with [Managed Auth](/auth/overview). No need to manually create credentials in Kernel—1Password items are discovered by domain matching.

integrations/browser-use.mdx

@@ -1,5 +1,6 @@
 ---
 title: "Browser Use"
+icon: "/images/integration-icons/browser-use-logo-transparent.svg"
 ---
 
 [Browser Use](https://github.com/browser-use/browser-use) is the AI browser agent that empowers anyone to automate repetitive online tasks, no code required. By integrating with Kernel, you can run Browser Use Agents and automations with cloud-hosted browsers.

integrations/hermes-agent.mdx

@@ -1,6 +1,7 @@
 ---
 title: "Hermes Agent"
 description: "Run Hermes Agent browser tools on Kernel cloud browsers"
+icon: "/images/integration-icons/nousresearch.svg"
 ---
 
 [Hermes Agent](https://github.com/NousResearch/hermes-agent) is an AI agent with browser automation, terminal access, skills, and messaging integrations. The [Kernel browser plugin](https://github.com/kernel/hermes-browser-plugin) routes Hermes's `browser_*` tools through Kernel cloud browsers and handles browser creation and cleanup for you.

integrations/laminar.mdx

@@ -1,5 +1,6 @@
 ---
 title: "Laminar"
+icon: "/images/integration-icons/laminar-outline.svg"
 ---
 
 [Laminar](https://www.laminar.sh/) is an open-source observability and evaluation platform for autonomous AI agents. You can create a cloud account or self-host Laminar for your infrastructure. By integrating Laminar with Kernel, you can trace and monitor your browser automations with full visibility into LLM calls, browser actions, session recordings, and performance metrics.

integrations/stagehand.mdx

@@ -1,5 +1,6 @@
 ---
 title: "Stagehand"
+icon: "/images/integration-icons/stagehand-logo-transparent.svg"
 ---
 
 [Stagehand](https://github.com/browserbase/stagehand) is an open source AI browser automation framework. It lets developers choose what to write in code vs. natural language. By integrating with Kernel, you can run Stagehand automations with cloud-hosted browsers.

integrations/terraform.mdx

@@ -1,6 +1,7 @@
 ---
 title: "Terraform"
 description: "Manage durable Kernel infrastructure with Terraform"
+icon: "/images/integration-icons/terraform.svg"
 ---
 
 Use the official Kernel Terraform provider to manage durable infrastructure such as projects and browser pools.

integrations/valtown.mdx

@@ -1,5 +1,6 @@
 ---
 title: "Val Town"
+icon: "/images/integration-icons/val-town.svg"
 ---
 
 [Val Town](https://www.val.town/) is a serverless platform to run Typescript automations. You can think of it like Zapier for software developers.

integrations/vibium.mdx

@@ -1,5 +1,6 @@
 ---
 title: "Vibium"
+icon: "/images/integration-icons/vibium.svg"
 ---
 
 [Vibium](https://github.com/VibiumDev/vibium) is a brand-new browser automation framework for AI agents that is built on WebDriver BiDi, a W3C standard. As of [v26.3.9](https://github.com/VibiumDev/vibium/releases/tag/v26.3.9), any agent can now use Vibium to connect to Kernel cloud browsers to navigate pages, fill forms, click buttons, and take screenshots. We're really excited to keep working with Jason Huggins and to keep supporting open web standards.

style.css

@@ -252,3 +252,59 @@ html.dark .callout[class*="yellow"] svg {
 .dark .link {
   border-bottom-color: #EDEEF0
 }
+
+#navigation-items img[src*="/images/integration-icons/"] {
+  width: 14px;
+  height: 14px;
+  opacity: 0.68;
+}
+
+#navigation-items img[src*="/images/integration-icons/nousresearch.svg"] {
+  opacity: 0.72;
+  transform: scale(1.06);
+}
+
+#navigation-items img[src*="/images/integration-icons/browser-use-logo-transparent.svg"] {
+  transform: scale(0.9);
+}
+
+#navigation-items img[src*="/images/integration-icons/computer-cursor-rounded.svg"] {
+  transform: scale(0.95);
+}
+
+#navigation-items img[src*="/images/integration-icons/laminar-outline.svg"] {
+  transform: scale(0.9);
+}
+
+#navigation-items img[src*="/images/integration-icons/stagehand-logo-transparent.svg"] {
+  transform: scale(0.88);
+}
+
+#navigation-items img[src*="/images/integration-icons/stripe.svg"] {
+  transform: scale(0.82);
+}
+
+#navigation-items img[src*="/images/integration-icons/vercel.svg"] {
+  transform: scale(0.76);
+}
+
+#navigation-items img[src*="/images/integration-icons/1password-logo-transparent.svg"] {
+  opacity: 0.6;
+  transform: scale(0.82);
+}
+
+#navigation-items li > button:has(img[src*="/images/integration-icons/"]) > div:has(> svg) {
+  order: 1;
+}
+
+#navigation-items li > button:has(img[src*="/images/integration-icons/"]) > div:has(> img[src*="/images/integration-icons/"]) {
+  order: 3;
+}
+
+#navigation-items li > button:has(img[src*="/images/integration-icons/"]) > div:not(:has(> svg)):not(:has(> img[src*="/images/integration-icons/"])) {
+  order: 2;
+}
+
+html.dark #navigation-items img[src*="/images/integration-icons/"] {
+  filter: invert(1);
+}