feat: added langflow, langfuse and langgraph integrations (#17)

Co-authored-by: Sharang Parnerkar <parnerkarsharang@gmail.com>
Reviewed-on: #17

e2e/developer.spec.ts

@@ -11,23 +11,163 @@ test.describe("Developer section", () => {
     await expect(nav.locator("a", { hasText: "Analytics" })).toBeVisible();
   });
 
-  test("agents page shows Coming Soon badge", async ({ page }) => {
+  test("agents page renders informational landing", async ({ page }) => {
     await page.goto("/developer/agents");
-    await page.waitForSelector(".placeholder-page", { timeout: 15_000 });
+    await page.waitForSelector(".agents-page", { timeout: 15_000 });
 
-    await expect(page.locator(".placeholder-badge")).toContainText(
-      "Coming Soon"
+    // Hero section
+    await expect(page.locator(".agents-hero-title")).toContainText(
+      "Agent Builder"
     );
-    await expect(page.locator("h2")).toContainText("Agent Builder");
+    await expect(page.locator(".agents-hero-desc")).toBeVisible();
+
+    // Connection status indicator is present
+    await expect(page.locator(".agents-status")).toBeVisible();
   });
 
-  test("analytics page loads via sub-nav", async ({ page }) => {
-    await page.goto("/developer/analytics");
-    await page.waitForSelector(".placeholder-page", { timeout: 15_000 });
+  test("agents page shows Not Connected when URL is empty", async ({
+    page,
+  }) => {
+    await page.goto("/developer/agents");
+    await page.waitForSelector(".agents-page", { timeout: 15_000 });
 
-    await expect(page.locator("h2")).toContainText("Analytics");
-    await expect(page.locator(".placeholder-badge")).toContainText(
-      "Coming Soon"
+    await expect(page.locator(".agents-status")).toContainText(
+      "Not Connected"
     );
+    await expect(page.locator(".agents-status-dot--off")).toBeVisible();
+    await expect(page.locator(".agents-status-hint")).toBeVisible();
+  });
+
+  test("agents page shows quick start cards", async ({ page }) => {
+    await page.goto("/developer/agents");
+    await page.waitForSelector(".agents-page", { timeout: 15_000 });
+
+    const grid = page.locator(".agents-grid");
+    const cards = grid.locator(".agents-card");
+    await expect(cards).toHaveCount(5);
+
+    // Verify card titles are rendered
+    await expect(
+      grid.locator(".agents-card-title", { hasText: "Documentation" })
+    ).toBeVisible();
+    await expect(
+      grid.locator(".agents-card-title", { hasText: "Getting Started" })
+    ).toBeVisible();
+    await expect(
+      grid.locator(".agents-card-title", { hasText: "GitHub" })
+    ).toBeVisible();
+    await expect(
+      grid.locator(".agents-card-title", { hasText: "Examples" })
+    ).toBeVisible();
+    await expect(
+      grid.locator(".agents-card-title", { hasText: "API Reference" })
+    ).toBeVisible();
+  });
+
+  test("agents page disables API Reference card when not connected", async ({
+    page,
+  }) => {
+    await page.goto("/developer/agents");
+    await page.waitForSelector(".agents-page", { timeout: 15_000 });
+
+    // When LANGGRAPH_URL is empty, the API Reference card should be disabled
+    const statusHint = page.locator(".agents-status-hint");
+    if (await statusHint.isVisible()) {
+      const apiCard = page.locator(".agents-card--disabled");
+      await expect(apiCard).toBeVisible();
+      await expect(
+        apiCard.locator(".agents-card-title")
+      ).toContainText("API Reference");
+    }
+  });
+
+  test("agents page shows running agents section", async ({ page }) => {
+    await page.goto("/developer/agents");
+    await page.waitForSelector(".agents-page", { timeout: 15_000 });
+
+    // The running agents section title should always be visible
+    await expect(
+      page.locator(".agents-section-title", { hasText: "Running Agents" })
+    ).toBeVisible();
+
+    // Either the table, loading state, or empty message should appear
+    await page.waitForTimeout(3000);
+    const table = page.locator(".agents-table");
+    const empty = page.locator(".agents-table-empty");
+
+    const hasTable = await table.isVisible();
+    const hasEmpty = await empty.isVisible();
+    expect(hasTable || hasEmpty).toBeTruthy();
+  });
+
+  test("agents page shows connected status when URL is configured", async ({
+    page,
+  }) => {
+    // This test only passes when LANGGRAPH_URL is set in the environment.
+    await page.goto("/developer/agents");
+    await page.waitForSelector(".agents-page", { timeout: 15_000 });
+
+    const connectedDot = page.locator(".agents-status-dot--on");
+    const disconnectedDot = page.locator(".agents-status-dot--off");
+
+    if (await connectedDot.isVisible()) {
+      await expect(page.locator(".agents-status")).toContainText("Connected");
+      await expect(page.locator(".agents-status-url")).toBeVisible();
+      // API Reference card should NOT be disabled
+      await expect(page.locator(".agents-card--disabled")).toHaveCount(0);
+    } else {
+      await expect(disconnectedDot).toBeVisible();
+      await expect(page.locator(".agents-status")).toContainText(
+        "Not Connected"
+      );
+    }
+  });
+
+  test("analytics page renders informational landing", async ({ page }) => {
+    await page.goto("/developer/analytics");
+    await page.waitForSelector(".analytics-page", { timeout: 15_000 });
+
+    // Hero section
+    await expect(page.locator(".analytics-hero-title")).toBeVisible();
+    await expect(page.locator(".analytics-hero-desc")).toBeVisible();
+
+    // Connection status indicator
+    await expect(page.locator(".agents-status")).toBeVisible();
+
+    // Metrics bar
+    await expect(page.locator(".analytics-stats-bar")).toBeVisible();
+  });
+
+  test("analytics page shows Not Connected when URL is empty", async ({
+    page,
+  }) => {
+    await page.goto("/developer/analytics");
+    await page.waitForSelector(".analytics-page", { timeout: 15_000 });
+
+    await expect(page.locator(".agents-status")).toContainText(
+      "Not Connected"
+    );
+    await expect(page.locator(".agents-status-dot--off")).toBeVisible();
+  });
+
+  test("analytics page shows quick action cards", async ({ page }) => {
+    await page.goto("/developer/analytics");
+    await page.waitForSelector(".analytics-page", { timeout: 15_000 });
+
+    const grid = page.locator(".agents-grid");
+    const cards = grid.locator(".agents-card, .agents-card--disabled");
+    await expect(cards).toHaveCount(2);
+  });
+
+  test("analytics page shows SSO hint when connected", async ({ page }) => {
+    // Only meaningful when LANGFUSE_URL is configured.
+    await page.goto("/developer/analytics");
+    await page.waitForSelector(".analytics-page", { timeout: 15_000 });
+
+    const connectedDot = page.locator(".agents-status-dot--on");
+    if (await connectedDot.isVisible()) {
+      await expect(page.locator(".analytics-sso-hint")).toBeVisible();
+      await expect(page.locator(".analytics-launch-btn")).toBeVisible();
+    }
   });
 });