Make integrations instructions clickable

Author: keithah

web/app/(console)/integrations/page-content.test.ts

@@ -3,6 +3,17 @@ import { readFileSync } from "node:fs";
 const source = readFileSync("app/(console)/integrations/page.tsx", "utf8");
 
 assertIncludes("integrations page exposes native Stint CLI recipe", source, "bin/stint config init");
+assertIncludes("integrations page makes integration cards selectable", source, "setSelectedIntegration");
+assertIncludes("integrations page exposes selected instructions region", source, "integration-instructions");
+assertIncludes("integrations page documents WakaTime CLI recipe", source, "wakatime-cli --entity");
+assertIncludes("integrations page documents WakaTime CLI offline sync", source, "wakatime-cli --sync-offline-activity");
+assertIncludes("integrations page documents Codex recipe", source, "bin/stint --sync-ai-activity --agent codex");
+assertIncludes("integrations page documents Codex heartbeat recipe", source, "--ai-agent codex");
+assertIncludes("integrations page documents model-aware ingestion recipe", source, "model-aware-ingestion-config");
+assertIncludes("integrations page documents model-aware token fields", source, "ai_input_tokens");
+assertIncludes("integrations page documents model-aware structured metadata", source, '"metadata": { "source": "custom-client" }');
+assertIncludes("integrations page documents integration catalog recipe", source, "integration-catalog-config");
+assertIncludes("integrations page makes roadmap items selectable", source, "setSelectedIntegration(item.recipeId)");
 assertIncludes("integrations page documents api-keys command", source, "bin/stint api-keys");
 assertIncludes("integrations page documents api-keys create command", source, 'bin/stint api-keys create "Editor key" --scope write_heartbeats --scope read_stats');
 assertIncludes("integrations page documents api-keys delete command", source, "bin/stint api-keys delete API_KEY_ID");

web/app/(console)/integrations/page.test.ts

@@ -18,6 +18,10 @@ assert.match(source, /Create integration key/);
 assert.match(source, /setLatestKey/);
 assert.match(source, /copyText/);
 assert.match(source, /Copy config/);
+assert.match(source, /selectedIntegration/);
+assert.match(source, /setSelectedIntegration/);
+assert.match(source, /aria-pressed/);
+assert.match(source, /integration-instructions/);
 assert.match(source, /VS Code/);
 assert.match(source, /JetBrains/);
 assert.match(source, /Vim\/Neovim/);

web/app/(console)/integrations/page.tsx

@@ -0,0 +1,53 @@
+import { expect, test } from "@playwright/test";
+
+const recipes = [
+  { name: "Stint CLI", expected: "bin/stint config init" },
+  { name: "WakaTime CLI", expected: "wakatime-cli --entity" },
+  { name: "Codex", expected: "bin/stint --sync-ai-activity --agent codex" },
+  { name: "VS Code", expected: "Install the WakaTime extension from the VS Code Marketplace." },
+  { name: "JetBrains", expected: "Install the WakaTime plugin from JetBrains Marketplace." },
+  { name: "Vim/Neovim", expected: "Install vim-wakatime for Vim or Neovim." },
+  { name: "Shell CLI", expected: "curl -X POST" }
+];
+
+const roadmapRecipes = [
+  { name: "Model-aware ingestion", expected: "ai_input_tokens" },
+  { name: "Native Stint CLI", expected: "bin/stint config init" },
+  { name: "Integration catalog", expected: "Create integration key" }
+];
+
+test("integration names reveal full setup instructions", async ({ page }) => {
+  await page.route("**/api/v1/meta", async (route) => {
+    await route.fulfill({
+      contentType: "application/json",
+      body: JSON.stringify({ data: { api_url: "http://127.0.0.1:3310/api/v1", base_url: "http://127.0.0.1:3310", hostname: "playwright", ip: "127.0.0.1", version: "test" } })
+    });
+  });
+  await page.route("**/api/v1/api_keys", async (route) => {
+    await route.fulfill({ contentType: "application/json", body: JSON.stringify({ data: [] }) });
+  });
+  await page.route("**/api/v1/editors", async (route) => {
+    await route.fulfill({ contentType: "application/json", body: JSON.stringify({ data: [] }) });
+  });
+  await page.route("**/api/v1/users/current/user_agents", async (route) => {
+    await route.fulfill({ contentType: "application/json", body: JSON.stringify({ data: [] }) });
+  });
+  await page.route("**/api/v1/auth/me", async (route) => {
+    await route.fulfill({ status: 401, contentType: "application/json", body: JSON.stringify({ error: "unauthorized" }) });
+  });
+
+  await page.goto("/integrations");
+
+  const stintCard = page.getByRole("button", { name: "Show Stint CLI integration instructions" });
+  await expect(stintCard).toContainText("live");
+
+  for (const recipe of recipes) {
+    await page.getByRole("button", { name: `Show ${recipe.name} integration instructions` }).click();
+    await expect(page.locator("#integration-instructions")).toContainText(recipe.expected);
+  }
+
+  for (const recipe of roadmapRecipes) {
+    await page.getByRole("button", { name: `Show ${recipe.name} roadmap instructions` }).click();
+    await expect(page.locator("#integration-instructions")).toContainText(recipe.expected);
+  }
+});

web/e2e/integrations.spec.ts

@@ -7,7 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "eslint .",
-    "test": "tsc --noEmit -p tsconfig.test.json && node scripts/run-tests.mjs"
+    "test": "tsc --noEmit -p tsconfig.test.json && node scripts/run-tests.mjs",
+    "test:browser": "playwright test"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.80.7",
@@ -18,6 +19,7 @@
     "recharts": "^3.9.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.51.1",
     "@types/node": "^20.19.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",

web/package-lock.json

@@ -0,0 +1,22 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  timeout: 30_000,
+  use: {
+    baseURL: "http://127.0.0.1:3310",
+    trace: "retain-on-failure"
+  },
+  webServer: {
+    command: "npm run dev -- --hostname 127.0.0.1 --port 3310",
+    url: "http://127.0.0.1:3310",
+    reuseExistingServer: !process.env.CI,
+    timeout: 60_000
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] }
+    }
+  ]
+});