diff --git a/e2e/developer.spec.ts b/e2e/developer.spec.ts
index b64d426..9af65ff 100644
--- a/e2e/developer.spec.ts
+++ b/e2e/developer.spec.ts
@@ -11,16 +11,116 @@ test.describe("Developer section", () => {
     await expect(nav.locator("a", { hasText: "Analytics" })).toBeVisible();
   });
 
-  test("agents page shows Not Configured when URL is empty", async ({
+  test("agents page renders informational landing", async ({ page }) => {
+    await page.goto("/developer/agents");
+    await page.waitForSelector(".agents-page", { timeout: 15_000 });
+
+    // Hero section
+    await expect(page.locator(".agents-hero-title")).toContainText(
+      "Agent Builder"
+    );
+    await expect(page.locator(".agents-hero-desc")).toBeVisible();
+
+    // Connection status indicator is present
+    await expect(page.locator(".agents-status")).toBeVisible();
+  });
+
+  test("agents page shows Not Connected when URL is empty", 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(
-      "Not Configured"
+    await expect(page.locator(".agents-status")).toContainText(
+      "Not Connected"
     );
-    await expect(page.locator("h2")).toContainText("Agent Builder");
+    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 shows Not Configured when URL is empty", async ({
@@ -36,25 +136,4 @@ test.describe("Developer section", () => {
       "Not Configured"
     );
   });
-
-  test("agents page shows iframe when URL is configured", async ({
-    page,
-  }) => {
-    // This test only runs meaningfully when LANGGRAPH_URL is set in the
-    // environment. When empty, the placeholder is shown instead.
-    await page.goto("/developer/agents");
-    await page.waitForTimeout(2000);
-
-    const iframe = page.locator(".tool-embed-iframe");
-    const placeholder = page.locator(".placeholder-badge");
-
-    if (await placeholder.isVisible()) {
-      await expect(placeholder).toContainText("Not Configured");
-    } else {
-      await expect(iframe).toBeVisible();
-      await expect(
-        page.locator(".tool-embed-popout-btn")
-      ).toBeVisible();
-    }
-  });
 });