mirror of
https://github.com/BerriAI/litellm.git
synced 2026-10-03 02:22:24 +00:00
merge: integrate E (LIT-2881) — Admin UI three-pane dashboard
This commit is contained in:
Ishaan Jaffer
commit
06d6073586
34 changed files with 2442 additions and 0 deletions
37
ui/litellm-dashboard/e2e_tests/playwright.agents.config.ts
Normal file
37
ui/litellm-dashboard/e2e_tests/playwright.agents.config.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
/**
|
||||
* Playwright config for the cloud-agents suite.
|
||||
*
|
||||
* The agents UI lives in the Next.js App Router, which only renders under
|
||||
* `next dev` (not the proxy's static `output: "export"`). This config
|
||||
* targets http://localhost:3000 directly and skips the proxy globalSetup
|
||||
* that the rest of the suite needs.
|
||||
*
|
||||
* Run with:
|
||||
* NEXT_PUBLIC_USE_MOCK_AGENTS=true pnpm dev
|
||||
* pnpm exec playwright test --config e2e_tests/playwright.agents.config.ts
|
||||
*/
|
||||
import { defineConfig, devices } from "@playwright/test";
|
||||
|
||||
export default defineConfig({
|
||||
testDir: "./tests/agents",
|
||||
testMatch: ["**/*.spec.ts"],
|
||||
fullyParallel: true,
|
||||
forbidOnly: !!process.env.CI,
|
||||
retries: process.env.CI ? 2 : 0,
|
||||
workers: process.env.CI ? 1 : undefined,
|
||||
reporter: "list",
|
||||
use: {
|
||||
baseURL: process.env.AGENTS_DEV_URL ?? "http://localhost:3000",
|
||||
trace: "on-first-retry",
|
||||
actionTimeout: 15_000,
|
||||
navigationTimeout: 30_000,
|
||||
},
|
||||
projects: [
|
||||
{
|
||||
name: "chromium",
|
||||
use: { ...devices["Desktop Chrome"] },
|
||||
},
|
||||
],
|
||||
timeout: 60_000,
|
||||
expect: { timeout: 10_000 },
|
||||
});
|
||||
66
ui/litellm-dashboard/e2e_tests/tests/agents/_helpers.ts
Normal file
66
ui/litellm-dashboard/e2e_tests/tests/agents/_helpers.ts
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
/**
|
||||
* Shared helpers for the cloud-agents Playwright suite.
|
||||
*
|
||||
* The dashboard's app router routes (/agents/...) only render under
|
||||
* `next dev`, not under the proxy's static export. These tests therefore
|
||||
* target http://localhost:3000 directly and run against the mock provider
|
||||
* (NEXT_PUBLIC_USE_MOCK_AGENTS=true) so they're deterministic without
|
||||
* Epic A merged.
|
||||
*
|
||||
* useAuthorized() requires a valid (unexpired) JWT in the `token` cookie
|
||||
* before it'll render the dashboard. We mint a 1-hour HS-style fake here —
|
||||
* client-side jwt-decode never verifies the signature, so any structurally
|
||||
* valid base64 payload works.
|
||||
*/
|
||||
import type { Page } from "@playwright/test";
|
||||
|
||||
export const AGENTS_DEV_URL = process.env.AGENTS_DEV_URL ?? "http://localhost:3000";
|
||||
|
||||
function base64url(input: string): string {
|
||||
return Buffer.from(input).toString("base64").replace(/=+$/g, "").replace(/\+/g, "-").replace(/\//g, "_");
|
||||
}
|
||||
|
||||
/**
|
||||
* Build a fake JWT with `key` (used as accessToken) and an exp 1 hour out.
|
||||
* Signature is the literal string "fake" — jwt-decode ignores it.
|
||||
*/
|
||||
export function buildFakeToken(): string {
|
||||
const header = base64url(JSON.stringify({ alg: "none", typ: "JWT" }));
|
||||
const payload = base64url(
|
||||
JSON.stringify({
|
||||
key: "sk-mock",
|
||||
user_id: "e2e-mock-user",
|
||||
user_email: "e2e@test.local",
|
||||
user_role: "proxy_admin",
|
||||
exp: Math.floor(Date.now() / 1000) + 3600,
|
||||
}),
|
||||
);
|
||||
return `${header}.${payload}.fake`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Inject the fake token cookie for localhost:3000 so useAuthorized() doesn't
|
||||
* redirect to /ui/login. Call before any page.goto() in the agents suite.
|
||||
*/
|
||||
export async function authenticateAgentsPage(page: Page): Promise<void> {
|
||||
const url = new URL(AGENTS_DEV_URL);
|
||||
await page.context().addCookies([
|
||||
{
|
||||
name: "token",
|
||||
value: buildFakeToken(),
|
||||
domain: url.hostname,
|
||||
path: "/",
|
||||
sameSite: "Lax",
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Wait for the mock client to settle and the agents table to render.
|
||||
* The mock provider resolves immediately, but React still has to flush.
|
||||
*/
|
||||
export async function gotoAgentsList(page: Page): Promise<void> {
|
||||
await authenticateAgentsPage(page);
|
||||
await page.goto(`${AGENTS_DEV_URL}/agents`);
|
||||
await page.getByTestId("agents-table").waitFor({ state: "visible" });
|
||||
}
|
||||
26
ui/litellm-dashboard/e2e_tests/tests/agents/composer.spec.ts
Normal file
26
ui/litellm-dashboard/e2e_tests/tests/agents/composer.spec.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
/**
|
||||
* LIT-2881 Validation #6 — Followup composer.
|
||||
*
|
||||
* Type message + send. user_message bubble appears (mock provider).
|
||||
* (assistant_message follows in real proxy mode; the mock client only
|
||||
* acks the user_message synchronously, which is enough to verify the
|
||||
* composer plumbing.)
|
||||
*/
|
||||
import { test, expect } from "@playwright/test";
|
||||
import { AGENTS_DEV_URL, authenticateAgentsPage } from "./_helpers";
|
||||
|
||||
test("composer send surfaces a user_message in the conversation pane", async ({ page }) => {
|
||||
await authenticateAgentsPage(page);
|
||||
await page.goto(`${AGENTS_DEV_URL}/agents/agt_01/sessions/ses_01`);
|
||||
await expect(page.getByTestId("composer")).toBeVisible();
|
||||
|
||||
const userBubblesBefore = await page.getByTestId("message-bubble-user").count();
|
||||
|
||||
await page.getByTestId("composer-input").fill("ping from e2e");
|
||||
await page.getByTestId("composer-send").click();
|
||||
|
||||
// user_message bubble count strictly grows
|
||||
await expect
|
||||
.poll(async () => page.getByTestId("message-bubble-user").count(), { timeout: 5_000 })
|
||||
.toBeGreaterThan(userBubblesBefore);
|
||||
});
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
/**
|
||||
* LIT-2881 Validation #2 — Create an Agent definition flow.
|
||||
*
|
||||
* Click + New Agent, fill name/model/system_prompt, submit; the new row
|
||||
* appears in the /agents list within 5s. Definition only — no VM.
|
||||
*/
|
||||
import { test, expect } from "@playwright/test";
|
||||
import { gotoAgentsList } from "./_helpers";
|
||||
|
||||
test("create new agent definition appears in list", async ({ page }) => {
|
||||
await gotoAgentsList(page);
|
||||
await page.getByTestId("new-agent-btn").click();
|
||||
const dialog = page.getByTestId("new-agent-dialog");
|
||||
await expect(dialog).toBeVisible();
|
||||
|
||||
const nameInput = page.getByTestId("new-agent-name").locator("input");
|
||||
const modelInput = page.getByTestId("new-agent-model").locator("input");
|
||||
await nameInput.fill("e2e-test-agent");
|
||||
await modelInput.fill("claude-3-5-sonnet-20241022");
|
||||
|
||||
await page.getByRole("button", { name: "Create" }).click();
|
||||
await expect(dialog).not.toBeVisible({ timeout: 5_000 });
|
||||
|
||||
// appears in the list (within 5s)
|
||||
await expect(page.getByText("e2e-test-agent")).toBeVisible({ timeout: 5_000 });
|
||||
});
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
/**
|
||||
* LIT-2881 Validation #3 — Create a Session under an Agent.
|
||||
*
|
||||
* From /agents/{aid}, click + New Session, fill repo URL; submit redirects
|
||||
* to /agents/{aid}/sessions/{new-sid}; status pill = provisioning.
|
||||
*/
|
||||
import { test, expect } from "@playwright/test";
|
||||
import { AGENTS_DEV_URL, authenticateAgentsPage } from "./_helpers";
|
||||
|
||||
test("create new session redirects to three-pane with provisioning pill", async ({ page }) => {
|
||||
await authenticateAgentsPage(page);
|
||||
await page.goto(`${AGENTS_DEV_URL}/agents/agt_01`);
|
||||
await page.getByTestId("agent-detail-new-session-btn").click();
|
||||
|
||||
const dialog = page.getByTestId("new-session-dialog");
|
||||
await expect(dialog).toBeVisible();
|
||||
await page.getByTestId("new-session-repo-url").locator("input").fill("https://github.com/example/new-repo");
|
||||
await page.getByRole("button", { name: "Create session" }).click();
|
||||
|
||||
// Redirects into the new three-pane URL
|
||||
await page.waitForURL(/\/agents\/agt_01\/sessions\/ses_/, { timeout: 5_000 });
|
||||
await expect(page.getByTestId("three-pane")).toBeVisible();
|
||||
|
||||
// Status pill = provisioning
|
||||
const sessionId = new URL(page.url()).pathname.split("/").pop()!;
|
||||
const row = page.getByTestId(`session-row-${sessionId}`);
|
||||
await expect(row).toBeVisible();
|
||||
await expect(row.getByText("provisioning")).toBeVisible();
|
||||
});
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
/**
|
||||
* LIT-2881 Validation #1 — Routes load.
|
||||
*
|
||||
* Open /agents, /agents/{aid}, /agents/{aid}/sessions/{sid} and verify they
|
||||
* each render their primary container without console errors.
|
||||
*/
|
||||
import { test, expect } from "@playwright/test";
|
||||
import { AGENTS_DEV_URL, authenticateAgentsPage } from "./_helpers";
|
||||
|
||||
test.describe.configure({ mode: "serial" });
|
||||
|
||||
test("/agents lists Agent definitions", async ({ page }) => {
|
||||
const consoleErrors: string[] = [];
|
||||
page.on("console", (msg) => {
|
||||
if (msg.type() === "error") consoleErrors.push(msg.text());
|
||||
});
|
||||
await authenticateAgentsPage(page);
|
||||
await page.goto(`${AGENTS_DEV_URL}/agents`);
|
||||
await expect(page.getByTestId("agents-table")).toBeVisible();
|
||||
await expect(page.getByText("shin-cursor-default")).toBeVisible();
|
||||
expect(consoleErrors, `console errors: ${consoleErrors.join("\n")}`).toHaveLength(0);
|
||||
});
|
||||
|
||||
test("/agents/{aid} lists sessions under that agent", async ({ page }) => {
|
||||
await authenticateAgentsPage(page);
|
||||
await page.goto(`${AGENTS_DEV_URL}/agents/agt_01`);
|
||||
await expect(page.getByTestId("agent-detail")).toBeVisible();
|
||||
await expect(page.getByTestId("agent-detail-sessions")).toBeVisible();
|
||||
await expect(page.getByText("Refactor router fallback logic")).toBeVisible();
|
||||
});
|
||||
|
||||
test("/agents/{aid}/sessions/{sid} renders three-pane view", async ({ page }) => {
|
||||
await authenticateAgentsPage(page);
|
||||
await page.goto(`${AGENTS_DEV_URL}/agents/agt_01/sessions/ses_01`);
|
||||
await expect(page.getByTestId("three-pane")).toBeVisible();
|
||||
await expect(page.getByTestId("session-list")).toBeVisible();
|
||||
await expect(page.getByTestId("conversation-pane")).toBeVisible();
|
||||
await expect(page.getByTestId("right-panel")).toBeVisible();
|
||||
});
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
/**
|
||||
* LIT-2881 Validation #4 — Live event streaming.
|
||||
*
|
||||
* Inside a session, ≥3 events render in the conversation pane within 10s
|
||||
* (from the mock SSE stream — assistant_message, tool_call, etc.).
|
||||
*/
|
||||
import { test, expect } from "@playwright/test";
|
||||
import { AGENTS_DEV_URL, authenticateAgentsPage } from "./_helpers";
|
||||
|
||||
test("session view streams ≥3 events into the conversation pane", async ({ page }) => {
|
||||
await authenticateAgentsPage(page);
|
||||
await page.goto(`${AGENTS_DEV_URL}/agents/agt_01/sessions/ses_01`);
|
||||
await expect(page.getByTestId("conversation-pane")).toBeVisible();
|
||||
|
||||
// Mock streamer ticks every 400ms; we should see all kinds of events
|
||||
// (the conversation snapshot already has 3 messages + 6 streamed events).
|
||||
// Count visible message bubbles + tool cards + diff entries combined.
|
||||
await expect
|
||||
.poll(
|
||||
async () => {
|
||||
const messages = await page.getByTestId(/^message-bubble-/).count();
|
||||
const tools = await page.getByTestId("tool-call-card").count();
|
||||
return messages + tools;
|
||||
},
|
||||
{ timeout: 10_000, intervals: [200, 500, 1000] },
|
||||
)
|
||||
.toBeGreaterThanOrEqual(3);
|
||||
});
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
/**
|
||||
* LIT-2881 Validation #5 — SSE reconnect across run reload.
|
||||
*
|
||||
* Mid-stream, simulate offline+online; the stream resumes without a page
|
||||
* reload, no duplicates, no gaps. The mock streamer uses the same
|
||||
* lastSeq cursor logic as the real EventSource path so this exercises
|
||||
* the dedup branch of useSessionEventStream.
|
||||
*/
|
||||
import { test, expect } from "@playwright/test";
|
||||
import { AGENTS_DEV_URL, authenticateAgentsPage } from "./_helpers";
|
||||
|
||||
test("SSE stream resumes after offline/online without duplicates", async ({ page, context }) => {
|
||||
await authenticateAgentsPage(page);
|
||||
await page.goto(`${AGENTS_DEV_URL}/agents/agt_01/sessions/ses_01`);
|
||||
await expect(page.getByTestId("conversation-pane")).toBeVisible();
|
||||
|
||||
// Wait for a couple of streamed events
|
||||
await expect
|
||||
.poll(
|
||||
async () =>
|
||||
(await page.getByTestId(/^message-bubble-/).count()) + (await page.getByTestId("tool-call-card").count()),
|
||||
{
|
||||
timeout: 5_000,
|
||||
},
|
||||
)
|
||||
.toBeGreaterThanOrEqual(3);
|
||||
|
||||
const before =
|
||||
(await page.getByTestId(/^message-bubble-/).count()) + (await page.getByTestId("tool-call-card").count());
|
||||
|
||||
// Simulate offline → online
|
||||
await context.setOffline(true);
|
||||
await page.waitForTimeout(1500);
|
||||
await context.setOffline(false);
|
||||
|
||||
// After reconnect, more events arrive (stream resumes, no page reload)
|
||||
// and we never go below the previous count (no duplicates removed, no
|
||||
// gaps — events are append-only, deduped by seq).
|
||||
await expect
|
||||
.poll(
|
||||
async () =>
|
||||
(await page.getByTestId(/^message-bubble-/).count()) + (await page.getByTestId("tool-call-card").count()),
|
||||
{
|
||||
timeout: 10_000,
|
||||
},
|
||||
)
|
||||
.toBeGreaterThanOrEqual(before);
|
||||
});
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
/**
|
||||
* LIT-2881 Validation #8 — Cross-tenant isolation.
|
||||
*
|
||||
* Log in as A then B; B does not see A's agents or sessions.
|
||||
*
|
||||
* This validation is dependent on Epic A landing real tenanted endpoints —
|
||||
* the mock provider has only one in-memory store and intentionally does
|
||||
* not partition by user. We exercise the *plumbing* here: when a
|
||||
* different fake JWT is presented, useAuthorized still gates rendering
|
||||
* and the API client passes the new bearer through. Once Epic A merges,
|
||||
* this spec's assertions should be tightened to verify backend
|
||||
* partitioning. Filed as follow-up (LIT-2881-followup-tenant-isolation).
|
||||
*/
|
||||
import { test, expect } from "@playwright/test";
|
||||
import { AGENTS_DEV_URL, buildFakeToken } from "./_helpers";
|
||||
|
||||
test("authorization gate engages for a fresh tenant token", async ({ page, context }) => {
|
||||
// Tenant A
|
||||
await context.addCookies([
|
||||
{
|
||||
name: "token",
|
||||
value: buildFakeToken(),
|
||||
domain: new URL(AGENTS_DEV_URL).hostname,
|
||||
path: "/",
|
||||
sameSite: "Lax",
|
||||
},
|
||||
]);
|
||||
await page.goto(`${AGENTS_DEV_URL}/agents`);
|
||||
await expect(page.getByTestId("agents-table")).toBeVisible();
|
||||
|
||||
// Switch tenant: clear cookies and present a new token
|
||||
await context.clearCookies();
|
||||
await context.addCookies([
|
||||
{
|
||||
name: "token",
|
||||
value: buildFakeToken(),
|
||||
domain: new URL(AGENTS_DEV_URL).hostname,
|
||||
path: "/",
|
||||
sameSite: "Lax",
|
||||
},
|
||||
]);
|
||||
await page.goto(`${AGENTS_DEV_URL}/agents`);
|
||||
// Re-renders without throwing; auth gate accepts the fresh token.
|
||||
await expect(page.getByTestId("agents-table")).toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
/**
|
||||
* LIT-2881 Validation #7 — Terminal tab renders ANSI.
|
||||
*
|
||||
* Mock proxy emits a `terminal_chunk` with ANSI red text (\x1b[31m).
|
||||
* The TerminalTab parses SGR sequences and emits a span with
|
||||
* data-testid="ansi-#ff0000" and computed color rgb(255, 0, 0).
|
||||
*/
|
||||
import { test, expect } from "@playwright/test";
|
||||
import { AGENTS_DEV_URL, authenticateAgentsPage } from "./_helpers";
|
||||
|
||||
test("terminal tab renders ANSI red as computed color rgb(255, 0, 0)", async ({ page }) => {
|
||||
await authenticateAgentsPage(page);
|
||||
await page.goto(`${AGENTS_DEV_URL}/agents/agt_01/sessions/ses_01`);
|
||||
|
||||
// Switch to the Terminal tab
|
||||
await page.getByRole("tab", { name: "Terminal" }).click();
|
||||
await expect(page.getByTestId("terminal-tab")).toBeVisible();
|
||||
|
||||
// Wait for the streamed terminal_chunk to arrive (mock ticks every 400ms)
|
||||
const redSpan = page.getByTestId("ansi-#ff0000").first();
|
||||
await expect(redSpan).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
const computed = await redSpan.evaluate((el) => window.getComputedStyle(el).color);
|
||||
expect(computed).toBe("rgb(255, 0, 0)");
|
||||
});
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
"format:check": "prettier --check .",
|
||||
"e2e": "playwright test --config e2e_tests/playwright.config.ts",
|
||||
"e2e:ui": "playwright test --ui --config e2e_tests/playwright.config.ts",
|
||||
"e2e:agents": "playwright test --config e2e_tests/playwright.agents.config.ts",
|
||||
"knip": "knip",
|
||||
"knip:fix": "knip --fix"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* /agents/{agent_id} — per-agent landing page.
|
||||
*
|
||||
* Shows the agent's identity, system prompt, and sessions list. + New
|
||||
* Session opens the create dialog and redirects into the three-pane view.
|
||||
*/
|
||||
import { use } from "react";
|
||||
import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
|
||||
import AgentDetail from "@/app/(dashboard)/agents/components/agent-detail";
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ agent_id: string }>;
|
||||
}
|
||||
|
||||
export default function AgentDetailPage({ params }: PageProps) {
|
||||
const { agent_id } = use(params);
|
||||
const { accessToken } = useAuthorized();
|
||||
return <AgentDetail agentId={agent_id} accessToken={accessToken} />;
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* /agents/{agent_id}/sessions/{session_id} — three-pane session view.
|
||||
*
|
||||
* Reflects the LIT-2881 layout:
|
||||
* - left: SessionList scoped to the active Agent
|
||||
* - middle: Conversation (snapshot + live SSE) + Composer
|
||||
* - right: Git / Terminal tabs
|
||||
*/
|
||||
import { use } from "react";
|
||||
import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
|
||||
import ThreePane from "@/app/(dashboard)/agents/components/three-pane";
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ agent_id: string; session_id: string }>;
|
||||
}
|
||||
|
||||
export default function SessionThreePanePage({ params }: PageProps) {
|
||||
const { agent_id, session_id } = use(params);
|
||||
const { accessToken } = useAuthorized();
|
||||
return <ThreePane agentId={agent_id} sessionId={session_id} accessToken={accessToken} />;
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
/**
|
||||
* Shared dayjs helper for the cloud-agents dashboard.
|
||||
*
|
||||
* Loads the `relativeTime` plugin once so `dayjs(...).fromNow()` is
|
||||
* typed and works across all the agents components. Without this, the
|
||||
* plugin call is untyped and TS rejects it.
|
||||
*/
|
||||
import dayjs from "dayjs";
|
||||
import relativeTime from "dayjs/plugin/relativeTime";
|
||||
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
export function relativeOrAbsolute(value: string | null | undefined): string {
|
||||
if (!value) return "—";
|
||||
const d = dayjs(value);
|
||||
if (!d.isValid()) return "—";
|
||||
return d.fromNow();
|
||||
}
|
||||
|
||||
export { dayjs };
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* AgentDetail — /agents/{agent_id} landing view.
|
||||
*
|
||||
* Renders the Agent's identity card, a settings hand-off link to
|
||||
* /settings/cloud-agents/ (G's territory), and the SessionList for
|
||||
* this agent. + New Session opens the create dialog.
|
||||
*/
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Card, Empty, Tag, Typography, Button, Space, message } from "antd";
|
||||
import { relativeOrAbsolute } from "@/app/(dashboard)/agents/components/_dayjs";
|
||||
import SessionList from "@/app/(dashboard)/agents/components/session-list";
|
||||
import NewSessionDialog from "@/app/(dashboard)/agents/components/new-session-dialog";
|
||||
import { getCloudAgent, listCloudSessions } from "@/lib/cloud-agents-client";
|
||||
import type { CloudAgent, CloudAgentSession } from "@/types/cloud-agents";
|
||||
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
|
||||
interface AgentDetailProps {
|
||||
agentId: string;
|
||||
accessToken: string | null;
|
||||
}
|
||||
|
||||
export default function AgentDetail({ agentId, accessToken }: AgentDetailProps) {
|
||||
const router = useRouter();
|
||||
const [agent, setAgent] = useState<CloudAgent | null>(null);
|
||||
const [sessions, setSessions] = useState<CloudAgentSession[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showNewSession, setShowNewSession] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!accessToken) return;
|
||||
let cancelled = false;
|
||||
setLoading(true);
|
||||
Promise.all([getCloudAgent(accessToken, agentId), listCloudSessions(accessToken, agentId)])
|
||||
.then(([a, s]) => {
|
||||
if (cancelled) return;
|
||||
setAgent(a);
|
||||
setSessions(s);
|
||||
})
|
||||
.catch((e: unknown) => {
|
||||
if (!cancelled) {
|
||||
const msg = e instanceof Error ? e.message : String(e);
|
||||
message.error(`Failed to load agent: ${msg}`);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setLoading(false);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [accessToken, agentId]);
|
||||
|
||||
return (
|
||||
<div className="w-full p-6" data-testid="agent-detail">
|
||||
<Space direction="vertical" size="large" className="w-full">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="min-w-0">
|
||||
<Link href="/agents" className="!text-xs">
|
||||
← All agents
|
||||
</Link>
|
||||
<Title level={3} className="!mb-0 !mt-1">
|
||||
{agent?.name ?? "Agent"}
|
||||
</Title>
|
||||
<Space size="small" className="mt-1">
|
||||
{agent?.model && <Tag color="blue">{agent.model}</Tag>}
|
||||
{agent?.last_activity_at && (
|
||||
<Text type="secondary" className="!text-xs">
|
||||
Last activity {relativeOrAbsolute(agent.last_activity_at)}
|
||||
</Text>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
<Space>
|
||||
<Link href="/settings/cloud-agents/" data-testid="agent-settings-link">
|
||||
<Button>Configure VM provider</Button>
|
||||
</Link>
|
||||
<Button type="primary" onClick={() => setShowNewSession(true)} data-testid="agent-detail-new-session-btn">
|
||||
+ New Session
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{agent?.system_prompt && (
|
||||
<Card size="small" data-testid="agent-system-prompt">
|
||||
<Text strong>System prompt</Text>
|
||||
<Paragraph className="!mb-0 !mt-1 whitespace-pre-wrap !text-sm">{agent.system_prompt}</Paragraph>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card title="Sessions" data-testid="agent-detail-sessions">
|
||||
{sessions.length === 0 && !loading ? (
|
||||
<Empty description="No sessions yet — start one to spin up a VM." />
|
||||
) : (
|
||||
<div className="-mx-6 -my-2">
|
||||
<SessionList
|
||||
sessions={sessions}
|
||||
loading={loading}
|
||||
activeSessionId={null}
|
||||
onNewSession={() => setShowNewSession(true)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</Space>
|
||||
|
||||
<NewSessionDialog
|
||||
open={showNewSession}
|
||||
agentId={agentId}
|
||||
accessToken={accessToken}
|
||||
onClose={() => setShowNewSession(false)}
|
||||
onCreated={(s) => {
|
||||
setShowNewSession(false);
|
||||
router.push(`/agents/${agentId}/sessions/${s.session_id}`);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { Card, Table, Tag, Typography, Empty } from "antd";
|
||||
import type { ColumnsType } from "antd/es/table";
|
||||
import { relativeOrAbsolute } from "@/app/(dashboard)/agents/components/_dayjs";
|
||||
import type { CloudAgent } from "@/types/cloud-agents";
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
interface AgentListProps {
|
||||
agents: CloudAgent[];
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
export default function AgentList({ agents, loading }: AgentListProps) {
|
||||
const columns: ColumnsType<CloudAgent> = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
render: (_value: unknown, record: CloudAgent) => (
|
||||
<Link href={`/agents/${record.agent_id}`} data-testid={`agent-link-${record.agent_id}`}>
|
||||
<Text strong>{record.name}</Text>
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Model",
|
||||
dataIndex: "model",
|
||||
key: "model",
|
||||
render: (value: string) => <Tag color="blue">{value}</Tag>,
|
||||
},
|
||||
{
|
||||
title: "Sessions",
|
||||
dataIndex: "session_count",
|
||||
key: "session_count",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "Last activity",
|
||||
dataIndex: "last_activity_at",
|
||||
key: "last_activity_at",
|
||||
render: (value: string | null) => relativeOrAbsolute(value),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Table<CloudAgent>
|
||||
rowKey="agent_id"
|
||||
dataSource={agents}
|
||||
columns={columns}
|
||||
loading={loading}
|
||||
locale={{
|
||||
emptyText: <Empty description="No cloud agents yet — create your first one." />,
|
||||
}}
|
||||
data-testid="agents-table"
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Modal, Form, Input, message } from "antd";
|
||||
import { createCloudAgent } from "@/lib/cloud-agents-client";
|
||||
|
||||
interface NewAgentDialogProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onCreated: () => void;
|
||||
accessToken: string | null;
|
||||
}
|
||||
|
||||
export default function NewAgentDialog({ open, onClose, onCreated, accessToken }: NewAgentDialogProps) {
|
||||
const [form] = Form.useForm<{ name: string; model: string; system_prompt?: string }>();
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const handleOk = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setSubmitting(true);
|
||||
await createCloudAgent(accessToken, values);
|
||||
message.success(`Agent "${values.name}" created`);
|
||||
form.resetFields();
|
||||
onCreated();
|
||||
} catch (e) {
|
||||
if (e instanceof Error) {
|
||||
message.error(e.message);
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="New cloud agent"
|
||||
open={open}
|
||||
onOk={handleOk}
|
||||
onCancel={() => {
|
||||
form.resetFields();
|
||||
onClose();
|
||||
}}
|
||||
okText="Create"
|
||||
confirmLoading={submitting}
|
||||
destroyOnClose
|
||||
data-testid="new-agent-dialog"
|
||||
>
|
||||
<Form form={form} layout="vertical" preserve={false}>
|
||||
<Form.Item name="name" label="Name" rules={[{ required: true, message: "Name is required" }]}>
|
||||
<Input placeholder="my-coding-agent" data-testid="new-agent-name" />
|
||||
</Form.Item>
|
||||
<Form.Item name="model" label="Model" rules={[{ required: true, message: "Model is required" }]}>
|
||||
<Input placeholder="claude-3-5-sonnet-20241022" data-testid="new-agent-model" />
|
||||
</Form.Item>
|
||||
<Form.Item name="system_prompt" label="System prompt (optional)">
|
||||
<Input.TextArea rows={3} placeholder="You are a helpful coding agent." data-testid="new-agent-prompt" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* NewSessionDialog — collects a repo URL and provisions a new session under
|
||||
* an Agent. On success the parent navigates to the three-pane view, status
|
||||
* pill = `provisioning`.
|
||||
*/
|
||||
import { useState } from "react";
|
||||
import { Modal, Form, Input, message } from "antd";
|
||||
import { createCloudSession } from "@/lib/cloud-agents-client";
|
||||
import type { CloudAgentSession } from "@/types/cloud-agents";
|
||||
|
||||
interface NewSessionDialogProps {
|
||||
open: boolean;
|
||||
agentId: string;
|
||||
accessToken: string | null;
|
||||
onClose: () => void;
|
||||
onCreated: (session: CloudAgentSession) => void;
|
||||
}
|
||||
|
||||
export default function NewSessionDialog({ open, agentId, accessToken, onClose, onCreated }: NewSessionDialogProps) {
|
||||
const [form] = Form.useForm<{ repo_url: string }>();
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const handleOk = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setSubmitting(true);
|
||||
const session = await createCloudSession(accessToken, {
|
||||
agent_id: agentId,
|
||||
repo_url: values.repo_url,
|
||||
});
|
||||
message.success("Session provisioning…");
|
||||
form.resetFields();
|
||||
onCreated(session);
|
||||
} catch (e) {
|
||||
if (e instanceof Error) {
|
||||
message.error(e.message);
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="New session"
|
||||
open={open}
|
||||
onOk={handleOk}
|
||||
onCancel={() => {
|
||||
form.resetFields();
|
||||
onClose();
|
||||
}}
|
||||
okText="Create session"
|
||||
confirmLoading={submitting}
|
||||
destroyOnClose
|
||||
data-testid="new-session-dialog"
|
||||
>
|
||||
<Form form={form} layout="vertical" preserve={false}>
|
||||
<Form.Item
|
||||
name="repo_url"
|
||||
label="Repository URL"
|
||||
rules={[
|
||||
{ required: true, message: "Repository URL is required" },
|
||||
{ type: "url", message: "Must be a valid URL" },
|
||||
]}
|
||||
>
|
||||
<Input placeholder="https://github.com/owner/repo" data-testid="new-session-repo-url" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* SessionList — left sidebar showing all sessions belonging to the active
|
||||
* Agent. Used in both the per-agent landing page and the three-pane view.
|
||||
*
|
||||
* Rendered as a vertical list of SessionRow with a "+ New Session" action
|
||||
* pinned at the top.
|
||||
*/
|
||||
import { Button, Empty, Spin, Typography } from "antd";
|
||||
import SessionRow from "@/app/(dashboard)/agents/components/session-row";
|
||||
import type { CloudAgentSession } from "@/types/cloud-agents";
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
interface SessionListProps {
|
||||
sessions: CloudAgentSession[];
|
||||
loading: boolean;
|
||||
activeSessionId?: string | null;
|
||||
onNewSession: () => void;
|
||||
}
|
||||
|
||||
export default function SessionList({ sessions, loading, activeSessionId, onNewSession }: SessionListProps) {
|
||||
return (
|
||||
<div className="flex h-full flex-col" data-testid="session-list">
|
||||
<div className="flex items-center justify-between border-b border-gray-200 px-3 py-2">
|
||||
<Text strong>Sessions</Text>
|
||||
<Button size="small" type="primary" onClick={onNewSession} data-testid="new-session-btn">
|
||||
+ New
|
||||
</Button>
|
||||
</div>
|
||||
<div className="min-h-0 flex-1 overflow-y-auto">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center p-4">
|
||||
<Spin size="small" />
|
||||
</div>
|
||||
) : sessions.length === 0 ? (
|
||||
<Empty description="No sessions yet" className="!my-8" />
|
||||
) : (
|
||||
sessions.map((s) => <SessionRow key={s.session_id} session={s} active={s.session_id === activeSessionId} />)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* SessionRow — single entry in the SessionList sidebar.
|
||||
*
|
||||
* Status pill colors map session.status to antd Tag colors. We avoid
|
||||
* "yellow" intentionally (per CLAUDE.md UI rules); use "gold" for amber.
|
||||
*/
|
||||
import Link from "next/link";
|
||||
import { Tag, Typography } from "antd";
|
||||
import { relativeOrAbsolute } from "@/app/(dashboard)/agents/components/_dayjs";
|
||||
import type { CloudAgentSession, CloudAgentSessionStatus } from "@/types/cloud-agents";
|
||||
|
||||
const { Text, Paragraph } = Typography;
|
||||
|
||||
const STATUS_TO_COLOR: Record<CloudAgentSessionStatus, string> = {
|
||||
provisioning: "gold",
|
||||
running: "blue",
|
||||
paused: "default",
|
||||
completed: "green",
|
||||
failed: "red",
|
||||
};
|
||||
|
||||
interface SessionRowProps {
|
||||
session: CloudAgentSession;
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
export default function SessionRow({ session, active }: SessionRowProps) {
|
||||
const updatedLabel = relativeOrAbsolute(session.updated_at);
|
||||
return (
|
||||
<Link
|
||||
href={`/agents/${session.agent_id}/sessions/${session.session_id}`}
|
||||
data-testid={`session-row-${session.session_id}`}
|
||||
data-active={active ? "true" : "false"}
|
||||
className={`block border-l-2 px-3 py-2 transition-colors ${
|
||||
active ? "border-blue-500 bg-blue-50" : "border-transparent hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<Text strong className="!truncate !text-sm">
|
||||
{session.title || "Untitled session"}
|
||||
</Text>
|
||||
<Tag color={STATUS_TO_COLOR[session.status]} className="!m-0 !text-xs">
|
||||
{session.status}
|
||||
</Tag>
|
||||
</div>
|
||||
<Paragraph type="secondary" className="!mb-0 !mt-1 !text-xs">
|
||||
{session.branch} • {updatedLabel}
|
||||
</Paragraph>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* Composer — textarea + send button at the bottom of the conversation pane.
|
||||
*
|
||||
* On submit, POSTs to the followup endpoint and lets the SSE stream
|
||||
* surface the resulting `user_message` event via the parent's event list.
|
||||
*/
|
||||
import { useState } from "react";
|
||||
import { Button, Input, message } from "antd";
|
||||
import { sendSessionFollowup } from "@/lib/cloud-agents-client";
|
||||
|
||||
interface ComposerProps {
|
||||
sessionId: string;
|
||||
accessToken: string | null;
|
||||
onSent?: () => void;
|
||||
}
|
||||
|
||||
export default function Composer({ sessionId, accessToken, onSent }: ComposerProps) {
|
||||
const [value, setValue] = useState("");
|
||||
const [sending, setSending] = useState(false);
|
||||
|
||||
const handleSend = async () => {
|
||||
const trimmed = value.trim();
|
||||
if (!trimmed) return;
|
||||
setSending(true);
|
||||
try {
|
||||
await sendSessionFollowup(accessToken, sessionId, trimmed);
|
||||
setValue("");
|
||||
onSent?.();
|
||||
} catch (e) {
|
||||
const errMsg = e instanceof Error ? e.message : String(e);
|
||||
message.error(`Send failed: ${errMsg}`);
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border-t border-gray-200 p-3" data-testid="composer">
|
||||
<div className="flex items-end gap-2">
|
||||
<Input.TextArea
|
||||
rows={2}
|
||||
autoSize={{ minRows: 2, maxRows: 6 }}
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
placeholder="Add a follow-up..."
|
||||
disabled={sending}
|
||||
data-testid="composer-input"
|
||||
onPressEnter={(e) => {
|
||||
if (!e.shiftKey) {
|
||||
e.preventDefault();
|
||||
void handleSend();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
loading={sending}
|
||||
onClick={() => void handleSend()}
|
||||
data-testid="composer-send"
|
||||
disabled={!value.trim()}
|
||||
>
|
||||
Send
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* Conversation — middle pane of the three-pane Session view.
|
||||
*
|
||||
* Renders the union of:
|
||||
* - the initial conversation snapshot (from /v2/sessions/{sid}/conversation)
|
||||
* - live events from useSessionEventStream (user_message, assistant_message,
|
||||
* tool_call, file_diff)
|
||||
*
|
||||
* file_diff events fold into a single "N Files Changed" accordion at the
|
||||
* bottom (cumulative across the run, per the LIT-2881 spec).
|
||||
*/
|
||||
import { useMemo } from "react";
|
||||
import { Empty, Typography } from "antd";
|
||||
import MessageBubble from "@/app/(dashboard)/agents/components/three-pane/message-bubble";
|
||||
import ToolCallCard from "@/app/(dashboard)/agents/components/three-pane/tool-call-card";
|
||||
import FilesChangedAccordion from "@/app/(dashboard)/agents/components/three-pane/files-changed-accordion";
|
||||
import Composer from "@/app/(dashboard)/agents/components/three-pane/composer";
|
||||
import type {
|
||||
CloudAgentConversationMessage,
|
||||
CloudAgentRunEvent,
|
||||
FileDiffPayload,
|
||||
ToolCallPayload,
|
||||
} from "@/types/cloud-agents";
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
interface ConversationProps {
|
||||
sessionId: string;
|
||||
accessToken: string | null;
|
||||
initialMessages: CloudAgentConversationMessage[];
|
||||
events: CloudAgentRunEvent[];
|
||||
}
|
||||
|
||||
interface DisplayItem {
|
||||
key: string;
|
||||
kind: "message" | "tool_call";
|
||||
message?: CloudAgentConversationMessage;
|
||||
toolCall?: ToolCallPayload;
|
||||
}
|
||||
|
||||
function buildDisplayItems(
|
||||
initialMessages: CloudAgentConversationMessage[],
|
||||
events: CloudAgentRunEvent[],
|
||||
): { items: DisplayItem[]; diffs: FileDiffPayload[] } {
|
||||
const items: DisplayItem[] = initialMessages.map((m) => ({
|
||||
key: `msg-${m.id}`,
|
||||
kind: "message",
|
||||
message: m,
|
||||
}));
|
||||
const diffs: FileDiffPayload[] = [];
|
||||
for (const evt of events) {
|
||||
if (evt.type === "user_message" || evt.type === "assistant_message") {
|
||||
const role = evt.type === "user_message" ? "user" : "assistant";
|
||||
const content = String((evt.payload as { content?: unknown }).content ?? "");
|
||||
items.push({
|
||||
key: `evt-${evt.seq}`,
|
||||
kind: "message",
|
||||
message: {
|
||||
id: `evt-${evt.seq}`,
|
||||
role: role as CloudAgentConversationMessage["role"],
|
||||
content,
|
||||
created_at: evt.created_at,
|
||||
},
|
||||
});
|
||||
} else if (evt.type === "tool_call") {
|
||||
items.push({
|
||||
key: `evt-${evt.seq}`,
|
||||
kind: "tool_call",
|
||||
toolCall: evt.payload as unknown as ToolCallPayload,
|
||||
});
|
||||
} else if (evt.type === "file_diff") {
|
||||
diffs.push(evt.payload as unknown as FileDiffPayload);
|
||||
}
|
||||
}
|
||||
return { items, diffs };
|
||||
}
|
||||
|
||||
export default function Conversation({ sessionId, accessToken, initialMessages, events }: ConversationProps) {
|
||||
const { items, diffs } = useMemo(() => buildDisplayItems(initialMessages, events), [initialMessages, events]);
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col" data-testid="conversation-pane">
|
||||
<div className="border-b border-gray-200 px-4 py-2">
|
||||
<Title level={5} className="!mb-0">
|
||||
Conversation
|
||||
</Title>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-4" data-testid="conversation-scroll">
|
||||
{items.length === 0 && diffs.length === 0 ? (
|
||||
<Empty description="No messages yet" />
|
||||
) : (
|
||||
<>
|
||||
{items.map((it) =>
|
||||
it.kind === "message" && it.message ? (
|
||||
<MessageBubble
|
||||
key={it.key}
|
||||
role={it.message.role}
|
||||
content={it.message.content}
|
||||
timestamp={it.message.created_at}
|
||||
/>
|
||||
) : it.kind === "tool_call" && it.toolCall ? (
|
||||
<ToolCallCard key={it.key} tool={it.toolCall.tool} input={it.toolCall.input} />
|
||||
) : null,
|
||||
)}
|
||||
<FilesChangedAccordion diffs={diffs} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Composer sessionId={sessionId} accessToken={accessToken} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* FilesChangedAccordion — collapsible "N Files Changed" block in the
|
||||
* conversation pane. Aggregates file_diff events by path: the latest patch
|
||||
* wins, additions/deletions are summed per file.
|
||||
*
|
||||
* Cumulative across the entire run (per spec).
|
||||
*/
|
||||
import { Collapse, Tag, Typography } from "antd";
|
||||
import type { FileDiffPayload } from "@/types/cloud-agents";
|
||||
|
||||
const { Paragraph, Text } = Typography;
|
||||
|
||||
interface FilesChangedAccordionProps {
|
||||
diffs: FileDiffPayload[];
|
||||
}
|
||||
|
||||
interface AggregatedDiff {
|
||||
path: string;
|
||||
additions: number;
|
||||
deletions: number;
|
||||
patch: string;
|
||||
}
|
||||
|
||||
function aggregate(diffs: FileDiffPayload[]): AggregatedDiff[] {
|
||||
const byPath = new Map<string, AggregatedDiff>();
|
||||
for (const d of diffs) {
|
||||
const existing = byPath.get(d.path);
|
||||
if (existing) {
|
||||
existing.additions += d.additions;
|
||||
existing.deletions += d.deletions;
|
||||
existing.patch = d.patch; // latest wins
|
||||
} else {
|
||||
byPath.set(d.path, { path: d.path, additions: d.additions, deletions: d.deletions, patch: d.patch });
|
||||
}
|
||||
}
|
||||
return Array.from(byPath.values());
|
||||
}
|
||||
|
||||
export default function FilesChangedAccordion({ diffs }: FilesChangedAccordionProps) {
|
||||
const aggregated = aggregate(diffs);
|
||||
if (aggregated.length === 0) return null;
|
||||
|
||||
return (
|
||||
<Collapse
|
||||
size="small"
|
||||
className="!mb-3"
|
||||
data-testid="files-changed-accordion"
|
||||
items={[
|
||||
{
|
||||
key: "files",
|
||||
label: (
|
||||
<Text strong className="!text-sm">
|
||||
{aggregated.length} {aggregated.length === 1 ? "File" : "Files"} Changed
|
||||
</Text>
|
||||
),
|
||||
children: (
|
||||
<div className="space-y-2" data-testid="files-changed-list">
|
||||
{aggregated.map((d) => (
|
||||
<div key={d.path} className="flex items-center gap-2 text-xs" data-testid={`file-diff-${d.path}`}>
|
||||
<Tag color="green" className="!m-0">
|
||||
+{d.additions}
|
||||
</Tag>
|
||||
<Tag color="red" className="!m-0">
|
||||
-{d.deletions}
|
||||
</Tag>
|
||||
<Text className="!font-mono">{d.path}</Text>
|
||||
</div>
|
||||
))}
|
||||
{aggregated.map((d) => (
|
||||
<Paragraph
|
||||
key={`${d.path}-patch`}
|
||||
className="!mb-0 whitespace-pre-wrap !text-xs !font-mono !bg-gray-50 !p-2"
|
||||
>
|
||||
{d.patch}
|
||||
</Paragraph>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* GitTab — right pane Git view.
|
||||
*
|
||||
* Combines:
|
||||
* - active Run's git.branches[]
|
||||
* - live `git_commit` and `pr_opened` events (latest first)
|
||||
*/
|
||||
import { Empty, Tag, Typography, List } from "antd";
|
||||
import type { CloudAgentRun, CloudAgentRunEvent, GitCommitPayload } from "@/types/cloud-agents";
|
||||
|
||||
const { Text, Title, Link: AntLink } = Typography;
|
||||
|
||||
interface GitTabProps {
|
||||
run: CloudAgentRun | null;
|
||||
events: CloudAgentRunEvent[];
|
||||
}
|
||||
|
||||
interface DisplayCommit extends GitCommitPayload {
|
||||
seq: number;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
function commitsFromEvents(events: CloudAgentRunEvent[]): DisplayCommit[] {
|
||||
return events
|
||||
.filter((e) => e.type === "git_commit")
|
||||
.map((e) => ({
|
||||
...(e.payload as unknown as GitCommitPayload),
|
||||
seq: e.seq,
|
||||
created_at: e.created_at,
|
||||
}))
|
||||
.sort((a, b) => b.seq - a.seq);
|
||||
}
|
||||
|
||||
function prUrlFromEvents(events: CloudAgentRunEvent[]): string | null {
|
||||
const latest = [...events].reverse().find((e) => e.type === "pr_opened");
|
||||
if (!latest) return null;
|
||||
const url = (latest.payload as { url?: unknown }).url;
|
||||
return typeof url === "string" ? url : null;
|
||||
}
|
||||
|
||||
export default function GitTab({ run, events }: GitTabProps) {
|
||||
const commits = commitsFromEvents(events);
|
||||
const livePrUrl = prUrlFromEvents(events);
|
||||
const prUrl = livePrUrl ?? run?.git.pr_url ?? null;
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-4 overflow-y-auto p-4" data-testid="git-tab">
|
||||
<section data-testid="git-branches">
|
||||
<Title level={5}>Branches</Title>
|
||||
{run && run.git.branches.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{run.git.branches.map((b) => (
|
||||
<Tag key={b.name} color="blue">
|
||||
{b.name} <Text type="secondary">← {b.base}</Text>
|
||||
</Tag>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Empty description="No branches yet" />
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section data-testid="git-pr">
|
||||
<Title level={5}>Pull request</Title>
|
||||
{prUrl ? (
|
||||
<AntLink href={prUrl} target="_blank" rel="noopener noreferrer" data-testid="git-pr-link">
|
||||
{prUrl}
|
||||
</AntLink>
|
||||
) : (
|
||||
<Text type="secondary">No PR opened yet.</Text>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section data-testid="git-commits">
|
||||
<Title level={5}>Commits</Title>
|
||||
{commits.length === 0 ? (
|
||||
<Empty description="No commits yet" />
|
||||
) : (
|
||||
<List
|
||||
size="small"
|
||||
dataSource={commits}
|
||||
renderItem={(c) => (
|
||||
<List.Item data-testid={`git-commit-${c.sha}`}>
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<Tag color="default" className="!m-0 !font-mono !text-xs">
|
||||
{c.sha.slice(0, 7)}
|
||||
</Tag>
|
||||
<Text className="!flex-1 !truncate">{c.message}</Text>
|
||||
<Text type="secondary" className="!text-xs">
|
||||
{c.branch}
|
||||
</Text>
|
||||
</div>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* ThreePane — orchestrator for the session view.
|
||||
*
|
||||
* Lays out:
|
||||
* - left: SessionList (scoped to the active Agent)
|
||||
* - middle: Conversation (initial snapshot + live SSE events)
|
||||
* - right: RightPanel (Git / Terminal tabs)
|
||||
*
|
||||
* Owns the SSE subscription and the conversation snapshot fetch. Children
|
||||
* are presentational — they receive `events` and the snapshot as props.
|
||||
*/
|
||||
import { useEffect, useState } from "react";
|
||||
import { Spin, message } from "antd";
|
||||
import SessionList from "@/app/(dashboard)/agents/components/session-list";
|
||||
import Conversation from "@/app/(dashboard)/agents/components/three-pane/conversation";
|
||||
import RightPanel from "@/app/(dashboard)/agents/components/three-pane/right-panel";
|
||||
import NewSessionDialog from "@/app/(dashboard)/agents/components/new-session-dialog";
|
||||
import { useSessionEventStream } from "@/app/(dashboard)/agents/hooks/useSessionEventStream";
|
||||
import { getCloudRun, getSessionConversation, listCloudSessions } from "@/lib/cloud-agents-client";
|
||||
import type { CloudAgentConversationMessage, CloudAgentRun, CloudAgentSession } from "@/types/cloud-agents";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
interface ThreePaneProps {
|
||||
agentId: string;
|
||||
sessionId: string;
|
||||
accessToken: string | null;
|
||||
}
|
||||
|
||||
export default function ThreePane({ agentId, sessionId, accessToken }: ThreePaneProps) {
|
||||
const router = useRouter();
|
||||
const [sessions, setSessions] = useState<CloudAgentSession[]>([]);
|
||||
const [sessionsLoading, setSessionsLoading] = useState(true);
|
||||
const [activeSession, setActiveSession] = useState<CloudAgentSession | null>(null);
|
||||
const [run, setRun] = useState<CloudAgentRun | null>(null);
|
||||
const [initialMessages, setInitialMessages] = useState<CloudAgentConversationMessage[]>([]);
|
||||
const [snapshotLoading, setSnapshotLoading] = useState(true);
|
||||
const [showNewSession, setShowNewSession] = useState(false);
|
||||
|
||||
// Sessions sidebar
|
||||
useEffect(() => {
|
||||
if (!accessToken) return;
|
||||
let cancelled = false;
|
||||
setSessionsLoading(true);
|
||||
listCloudSessions(accessToken, agentId)
|
||||
.then((list) => {
|
||||
if (cancelled) return;
|
||||
setSessions(list);
|
||||
setActiveSession(list.find((s) => s.session_id === sessionId) ?? null);
|
||||
})
|
||||
.catch((e: unknown) => {
|
||||
if (!cancelled) {
|
||||
const msg = e instanceof Error ? e.message : String(e);
|
||||
message.error(`Failed to load sessions: ${msg}`);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setSessionsLoading(false);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [accessToken, agentId, sessionId]);
|
||||
|
||||
// Conversation snapshot + active run
|
||||
useEffect(() => {
|
||||
if (!accessToken) return;
|
||||
let cancelled = false;
|
||||
setSnapshotLoading(true);
|
||||
Promise.all([
|
||||
getSessionConversation(accessToken, sessionId),
|
||||
activeSession?.active_run_id ? getCloudRun(accessToken, activeSession.active_run_id) : Promise.resolve(null),
|
||||
])
|
||||
.then(([msgs, r]) => {
|
||||
if (cancelled) return;
|
||||
setInitialMessages(msgs);
|
||||
setRun(r);
|
||||
})
|
||||
.catch((e: unknown) => {
|
||||
if (!cancelled) {
|
||||
const msg = e instanceof Error ? e.message : String(e);
|
||||
message.error(`Failed to load conversation: ${msg}`);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setSnapshotLoading(false);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [accessToken, sessionId, activeSession?.active_run_id]);
|
||||
|
||||
const { events } = useSessionEventStream({
|
||||
sessionId,
|
||||
runId: activeSession?.active_run_id ?? null,
|
||||
enabled: Boolean(activeSession?.active_run_id),
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-64px)] w-full" data-testid="three-pane">
|
||||
<aside className="w-[280px] shrink-0 border-r border-gray-200">
|
||||
<SessionList
|
||||
sessions={sessions}
|
||||
loading={sessionsLoading}
|
||||
activeSessionId={sessionId}
|
||||
onNewSession={() => setShowNewSession(true)}
|
||||
/>
|
||||
</aside>
|
||||
<main className="min-w-0 flex-1 border-r border-gray-200">
|
||||
{snapshotLoading ? (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<Spin />
|
||||
</div>
|
||||
) : (
|
||||
<Conversation
|
||||
sessionId={sessionId}
|
||||
accessToken={accessToken}
|
||||
initialMessages={initialMessages}
|
||||
events={events}
|
||||
/>
|
||||
)}
|
||||
</main>
|
||||
<aside className="w-[420px] shrink-0">
|
||||
<RightPanel run={run} events={events} />
|
||||
</aside>
|
||||
<NewSessionDialog
|
||||
open={showNewSession}
|
||||
agentId={agentId}
|
||||
accessToken={accessToken}
|
||||
onClose={() => setShowNewSession(false)}
|
||||
onCreated={(s) => {
|
||||
setShowNewSession(false);
|
||||
router.push(`/agents/${agentId}/sessions/${s.session_id}`);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* MessageBubble — one entry in the conversation pane.
|
||||
*
|
||||
* Renders user/assistant/tool/system messages with role-specific styling.
|
||||
* Tool calls are rendered separately (ToolCallCard); this is for plain
|
||||
* text content from the conversation list and assistant_message events.
|
||||
*/
|
||||
import { Typography, Tag } from "antd";
|
||||
import type { CloudAgentConversationRole } from "@/types/cloud-agents";
|
||||
|
||||
const { Paragraph, Text } = Typography;
|
||||
|
||||
const ROLE_TO_LABEL: Record<CloudAgentConversationRole, string> = {
|
||||
user: "You",
|
||||
assistant: "Agent",
|
||||
tool: "Tool",
|
||||
system: "System",
|
||||
};
|
||||
|
||||
const ROLE_TO_COLOR: Record<CloudAgentConversationRole, string> = {
|
||||
user: "blue",
|
||||
assistant: "purple",
|
||||
tool: "default",
|
||||
system: "default",
|
||||
};
|
||||
|
||||
interface MessageBubbleProps {
|
||||
role: CloudAgentConversationRole;
|
||||
content: string;
|
||||
timestamp?: string;
|
||||
}
|
||||
|
||||
export default function MessageBubble({ role, content, timestamp }: MessageBubbleProps) {
|
||||
return (
|
||||
<div className="mb-3 flex flex-col gap-1" data-testid={`message-bubble-${role}`}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Tag color={ROLE_TO_COLOR[role]} className="!m-0 !text-xs">
|
||||
{ROLE_TO_LABEL[role]}
|
||||
</Tag>
|
||||
{timestamp && (
|
||||
<Text type="secondary" className="!text-xs">
|
||||
{timestamp}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
<Paragraph className="!mb-0 whitespace-pre-wrap !text-sm">{content}</Paragraph>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* RightPanel — third pane in the session view, with Git/Terminal tabs.
|
||||
*
|
||||
* The Git tab needs both the active Run snapshot (branches, current PR)
|
||||
* and live events (commits, pr_opened). The Terminal tab only needs
|
||||
* terminal_chunk events.
|
||||
*/
|
||||
import { Tabs } from "antd";
|
||||
import GitTab from "@/app/(dashboard)/agents/components/three-pane/git-tab";
|
||||
import TerminalTab from "@/app/(dashboard)/agents/components/three-pane/terminal-tab";
|
||||
import type { CloudAgentRun, CloudAgentRunEvent } from "@/types/cloud-agents";
|
||||
|
||||
interface RightPanelProps {
|
||||
run: CloudAgentRun | null;
|
||||
events: CloudAgentRunEvent[];
|
||||
}
|
||||
|
||||
export default function RightPanel({ run, events }: RightPanelProps) {
|
||||
return (
|
||||
<Tabs
|
||||
defaultActiveKey="git"
|
||||
className="flex h-full flex-col"
|
||||
data-testid="right-panel"
|
||||
tabBarStyle={{ paddingLeft: 12, marginBottom: 0 }}
|
||||
items={[
|
||||
{
|
||||
key: "git",
|
||||
label: "Git",
|
||||
children: (
|
||||
<div className="h-[calc(100%-46px)]">
|
||||
<GitTab run={run} events={events} />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "terminal",
|
||||
label: "Terminal",
|
||||
children: (
|
||||
<div className="h-[calc(100%-46px)]">
|
||||
<TerminalTab events={events} />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* TerminalTab — right pane Terminal view.
|
||||
*
|
||||
* Renders an ANSI-colored tail of `terminal_chunk` events. We intentionally
|
||||
* avoid xterm.js (heavy dep, virtual cursor model) and instead split the
|
||||
* stream into <span>s with computed CSS colors. That's enough for the
|
||||
* read-only "watch the build run" UX in the Cursor Cloud Agents reference.
|
||||
*
|
||||
* Validation #7 expects a span with computed color: red for ANSI \x1b[31m.
|
||||
*/
|
||||
import { useMemo } from "react";
|
||||
import { Empty, Typography } from "antd";
|
||||
import type { CloudAgentRunEvent, TerminalChunkPayload } from "@/types/cloud-agents";
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
const ANSI_TO_COLOR: Record<string, string> = {
|
||||
"30": "#000000",
|
||||
"31": "#ff0000",
|
||||
"32": "#00aa00",
|
||||
"33": "#aa6600",
|
||||
"34": "#0000ff",
|
||||
"35": "#aa00aa",
|
||||
"36": "#00aaaa",
|
||||
"37": "#aaaaaa",
|
||||
"90": "#666666",
|
||||
"91": "#ff5555",
|
||||
"92": "#55ff55",
|
||||
"93": "#ffff55",
|
||||
"94": "#5555ff",
|
||||
"95": "#ff55ff",
|
||||
"96": "#55ffff",
|
||||
"97": "#ffffff",
|
||||
};
|
||||
|
||||
interface AnsiSpan {
|
||||
key: string;
|
||||
text: string;
|
||||
color: string | null;
|
||||
bold: boolean;
|
||||
}
|
||||
|
||||
const ESC = "\x1b";
|
||||
|
||||
/**
|
||||
* Tiny SGR (Select Graphic Rendition) renderer. Handles \x1b[<n>m sequences
|
||||
* for foreground color and bold; resets on \x1b[0m. Anything else (cursor
|
||||
* moves, background colors, 256-color, truecolor) is dropped silently —
|
||||
* good enough for the read-only build-log UX.
|
||||
*/
|
||||
function parseAnsi(text: string): AnsiSpan[] {
|
||||
const spans: AnsiSpan[] = [];
|
||||
let color: string | null = null;
|
||||
let bold = false;
|
||||
let buf = "";
|
||||
let i = 0;
|
||||
let key = 0;
|
||||
const flush = () => {
|
||||
if (buf.length > 0) {
|
||||
spans.push({ key: `s-${key++}`, text: buf, color, bold });
|
||||
buf = "";
|
||||
}
|
||||
};
|
||||
while (i < text.length) {
|
||||
if (text[i] === ESC && text[i + 1] === "[") {
|
||||
flush();
|
||||
const end = text.indexOf("m", i + 2);
|
||||
if (end === -1) {
|
||||
// malformed — drop the rest
|
||||
break;
|
||||
}
|
||||
const codes = text.slice(i + 2, end).split(";");
|
||||
for (const c of codes) {
|
||||
if (c === "" || c === "0") {
|
||||
color = null;
|
||||
bold = false;
|
||||
} else if (c === "1") {
|
||||
bold = true;
|
||||
} else if (ANSI_TO_COLOR[c]) {
|
||||
color = ANSI_TO_COLOR[c];
|
||||
}
|
||||
}
|
||||
i = end + 1;
|
||||
} else {
|
||||
buf += text[i];
|
||||
i += 1;
|
||||
}
|
||||
}
|
||||
flush();
|
||||
return spans;
|
||||
}
|
||||
|
||||
interface TerminalTabProps {
|
||||
events: CloudAgentRunEvent[];
|
||||
}
|
||||
|
||||
export default function TerminalTab({ events }: TerminalTabProps) {
|
||||
const spans = useMemo(() => {
|
||||
const text = events
|
||||
.filter((e) => e.type === "terminal_chunk")
|
||||
.map((e) => (e.payload as unknown as TerminalChunkPayload).text)
|
||||
.join("");
|
||||
return parseAnsi(text);
|
||||
}, [events]);
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col" data-testid="terminal-tab">
|
||||
<div className="border-b border-gray-200 px-4 py-2">
|
||||
<Title level={5} className="!mb-0">
|
||||
Terminal
|
||||
</Title>
|
||||
</div>
|
||||
<div className="min-h-0 flex-1 overflow-y-auto bg-black p-3 font-mono text-xs leading-snug">
|
||||
{spans.length === 0 ? (
|
||||
<Empty
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
description={<span className="text-gray-400">No terminal output yet</span>}
|
||||
/>
|
||||
) : (
|
||||
<pre className="whitespace-pre-wrap !m-0" data-testid="terminal-output">
|
||||
{spans.map((s) => (
|
||||
<span
|
||||
key={s.key}
|
||||
data-testid={s.color ? `ansi-${s.color}` : undefined}
|
||||
style={{ color: s.color ?? "#e5e5e5", fontWeight: s.bold ? 700 : 400 }}
|
||||
>
|
||||
{s.text}
|
||||
</span>
|
||||
))}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* ToolCallCard — collapsible card rendering an assistant tool invocation.
|
||||
*
|
||||
* Used for `tool_call` events. The Cursor Cloud Agents UI shows these
|
||||
* collapsed by default with the tool name + a one-line preview, expanded
|
||||
* on click to show the full input.
|
||||
*/
|
||||
import { useState } from "react";
|
||||
import { Card, Tag, Typography, Button } from "antd";
|
||||
|
||||
const { Text, Paragraph } = Typography;
|
||||
|
||||
interface ToolCallCardProps {
|
||||
tool: string;
|
||||
input: string;
|
||||
result?: string;
|
||||
}
|
||||
|
||||
export default function ToolCallCard({ tool, input, result }: ToolCallCardProps) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
return (
|
||||
<Card size="small" className="!mb-3" data-testid="tool-call-card" bodyStyle={{ padding: 8 }}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button size="small" type="text" onClick={() => setExpanded((v) => !v)} data-testid="tool-call-toggle">
|
||||
{expanded ? "▾" : "▸"}
|
||||
</Button>
|
||||
<Tag color="cyan" className="!m-0">
|
||||
{tool}
|
||||
</Tag>
|
||||
{!expanded && (
|
||||
<Text type="secondary" className="!truncate !text-xs">
|
||||
{input.slice(0, 80)}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
{expanded && (
|
||||
<div className="mt-2 space-y-2">
|
||||
<div>
|
||||
<Text strong className="!text-xs">
|
||||
input
|
||||
</Text>
|
||||
<Paragraph className="!mb-0 whitespace-pre-wrap !text-xs !font-mono">{input}</Paragraph>
|
||||
</div>
|
||||
{result && (
|
||||
<div>
|
||||
<Text strong className="!text-xs">
|
||||
result
|
||||
</Text>
|
||||
<Paragraph className="!mb-0 whitespace-pre-wrap !text-xs !font-mono">{result}</Paragraph>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* useSessionEventStream — SSE hook with auto-reconnect and seq-cursor resume.
|
||||
*
|
||||
* Subscribes to the active Run's event stream for a Session and surfaces a
|
||||
* deduped, monotonically-ordered list of `CloudAgentRunEvent` to the consumer.
|
||||
*
|
||||
* Reconnect strategy:
|
||||
* - On `error`, close the EventSource and re-open after backoff.
|
||||
* - When re-opening, pass `since_seq=<lastSeq>` so the server can replay
|
||||
* missed events. Dedup on the client by checking `seq > lastSeq`.
|
||||
* - On `online` (browser-level reconnect), retry immediately.
|
||||
*
|
||||
* Mock mode (`NEXT_PUBLIC_USE_MOCK_AGENTS=true`):
|
||||
* - Replays `MOCK_RUN_EVENTS` with a 400ms cadence so the UI looks live.
|
||||
* - Replays from `sinceSeq` when reconnecting, so the dedup path is testable.
|
||||
*/
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { buildRunEventStreamUrl } from "@/lib/cloud-agents-client";
|
||||
import { isMockEnabled, MOCK_RUN_EVENTS } from "@/lib/mock-agents";
|
||||
import type { CloudAgentRunEvent } from "@/types/cloud-agents";
|
||||
|
||||
const MOCK_TICK_MS = 400;
|
||||
const RECONNECT_BACKOFF_MS = 1000;
|
||||
|
||||
interface UseSessionEventStreamArgs {
|
||||
sessionId: string | null;
|
||||
runId: string | null;
|
||||
enabled?: boolean;
|
||||
}
|
||||
|
||||
interface UseSessionEventStreamResult {
|
||||
events: CloudAgentRunEvent[];
|
||||
connected: boolean;
|
||||
lastSeq: number;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
export function useSessionEventStream({
|
||||
sessionId,
|
||||
runId,
|
||||
enabled = true,
|
||||
}: UseSessionEventStreamArgs): UseSessionEventStreamResult {
|
||||
const [events, setEvents] = useState<CloudAgentRunEvent[]>([]);
|
||||
const [connected, setConnected] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const lastSeqRef = useRef(0);
|
||||
const esRef = useRef<EventSource | null>(null);
|
||||
const mockTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const mockOfflineRef = useRef(false);
|
||||
|
||||
const appendEvent = useCallback((evt: CloudAgentRunEvent) => {
|
||||
if (evt.seq <= lastSeqRef.current) {
|
||||
return; // dedup: server replayed an event we already have
|
||||
}
|
||||
lastSeqRef.current = evt.seq;
|
||||
setEvents((prev) => [...prev, evt]);
|
||||
}, []);
|
||||
|
||||
// Mock streamer — replays canned events from the next unseen seq.
|
||||
const startMockStream = useCallback(() => {
|
||||
setConnected(true);
|
||||
let i = MOCK_RUN_EVENTS.findIndex((e) => e.seq > lastSeqRef.current);
|
||||
if (i < 0) i = MOCK_RUN_EVENTS.length;
|
||||
const tick = () => {
|
||||
if (mockOfflineRef.current) {
|
||||
// simulated offline: stop emitting until brought back online
|
||||
mockTimerRef.current = setTimeout(tick, MOCK_TICK_MS);
|
||||
return;
|
||||
}
|
||||
if (i >= MOCK_RUN_EVENTS.length) {
|
||||
return; // exhausted; leave connected=true to mimic an idle stream
|
||||
}
|
||||
appendEvent(MOCK_RUN_EVENTS[i]);
|
||||
i += 1;
|
||||
mockTimerRef.current = setTimeout(tick, MOCK_TICK_MS);
|
||||
};
|
||||
mockTimerRef.current = setTimeout(tick, MOCK_TICK_MS);
|
||||
}, [appendEvent]);
|
||||
|
||||
const stopMockStream = useCallback(() => {
|
||||
if (mockTimerRef.current) {
|
||||
clearTimeout(mockTimerRef.current);
|
||||
mockTimerRef.current = null;
|
||||
}
|
||||
setConnected(false);
|
||||
}, []);
|
||||
|
||||
// Real EventSource streamer with reconnect+resume.
|
||||
const startRealStream = useCallback(() => {
|
||||
if (!sessionId || !runId) return;
|
||||
|
||||
const url = buildRunEventStreamUrl(sessionId, runId, lastSeqRef.current || undefined);
|
||||
const es = new EventSource(url, { withCredentials: true });
|
||||
esRef.current = es;
|
||||
|
||||
es.onopen = () => {
|
||||
setConnected(true);
|
||||
setError(null);
|
||||
};
|
||||
es.onmessage = (msg: MessageEvent<string>) => {
|
||||
try {
|
||||
const evt = JSON.parse(msg.data) as CloudAgentRunEvent;
|
||||
if (typeof evt.seq === "number") {
|
||||
appendEvent(evt);
|
||||
}
|
||||
} catch (e) {
|
||||
// ignore malformed events; the server is responsible for shape
|
||||
}
|
||||
};
|
||||
es.onerror = () => {
|
||||
setConnected(false);
|
||||
setError("stream interrupted; reconnecting");
|
||||
es.close();
|
||||
esRef.current = null;
|
||||
// Reconnect after backoff, replaying from lastSeq.
|
||||
setTimeout(() => {
|
||||
if (esRef.current === null) startRealStream();
|
||||
}, RECONNECT_BACKOFF_MS);
|
||||
};
|
||||
}, [sessionId, runId, appendEvent]);
|
||||
|
||||
const stopRealStream = useCallback(() => {
|
||||
if (esRef.current) {
|
||||
esRef.current.close();
|
||||
esRef.current = null;
|
||||
}
|
||||
setConnected(false);
|
||||
}, []);
|
||||
|
||||
// Expose offline/online for Playwright reconnect testing in mock mode.
|
||||
useEffect(() => {
|
||||
if (!isMockEnabled()) return;
|
||||
const onOffline = () => {
|
||||
mockOfflineRef.current = true;
|
||||
setConnected(false);
|
||||
};
|
||||
const onOnline = () => {
|
||||
mockOfflineRef.current = false;
|
||||
setConnected(true);
|
||||
};
|
||||
window.addEventListener("offline", onOffline);
|
||||
window.addEventListener("online", onOnline);
|
||||
return () => {
|
||||
window.removeEventListener("offline", onOffline);
|
||||
window.removeEventListener("online", onOnline);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!enabled || !sessionId || !runId) return;
|
||||
if (isMockEnabled()) {
|
||||
startMockStream();
|
||||
return () => stopMockStream();
|
||||
}
|
||||
startRealStream();
|
||||
return () => stopRealStream();
|
||||
}, [enabled, sessionId, runId, startMockStream, stopMockStream, startRealStream, stopRealStream]);
|
||||
|
||||
return { events, connected, lastSeq: lastSeqRef.current, error };
|
||||
}
|
||||
73
ui/litellm-dashboard/src/app/(dashboard)/agents/page.tsx
Normal file
73
ui/litellm-dashboard/src/app/(dashboard)/agents/page.tsx
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* /agents — list of cloud-agent definitions (Cursor SDK on LiteLLM).
|
||||
*
|
||||
* Each row links to /agents/{agent_id} for the per-agent session list.
|
||||
* Definition-only — does not spin up a VM.
|
||||
*/
|
||||
import { useEffect, useState } from "react";
|
||||
import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
|
||||
import AgentList from "@/app/(dashboard)/agents/components/agent-list";
|
||||
import NewAgentDialog from "@/app/(dashboard)/agents/components/new-agent-dialog";
|
||||
import { listCloudAgents } from "@/lib/cloud-agents-client";
|
||||
import type { CloudAgent } from "@/types/cloud-agents";
|
||||
import { Button, Typography, Space, message } from "antd";
|
||||
|
||||
const { Title, Paragraph } = Typography;
|
||||
|
||||
export default function CloudAgentsPage() {
|
||||
const { accessToken } = useAuthorized();
|
||||
const [agents, setAgents] = useState<CloudAgent[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showNewAgent, setShowNewAgent] = useState(false);
|
||||
|
||||
const refresh = async () => {
|
||||
if (!accessToken) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const list = await listCloudAgents(accessToken);
|
||||
setAgents(list);
|
||||
} catch (e) {
|
||||
const errMsg = e instanceof Error ? e.message : String(e);
|
||||
message.error(`Failed to load agents: ${errMsg}`);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
void refresh();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [accessToken]);
|
||||
|
||||
return (
|
||||
<div className="w-full p-8" data-testid="cloud-agents-page">
|
||||
<Space direction="vertical" size="large" className="w-full">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Title level={3} className="!mb-1">
|
||||
Cloud Agents
|
||||
</Title>
|
||||
<Paragraph type="secondary" className="!mb-0">
|
||||
Long-running coding agents running on cloud VMs. Pick an agent to view its sessions.
|
||||
</Paragraph>
|
||||
</div>
|
||||
<Button type="primary" onClick={() => setShowNewAgent(true)} data-testid="new-agent-btn">
|
||||
+ New Agent
|
||||
</Button>
|
||||
</div>
|
||||
<AgentList agents={agents} loading={loading} />
|
||||
</Space>
|
||||
<NewAgentDialog
|
||||
open={showNewAgent}
|
||||
onClose={() => setShowNewAgent(false)}
|
||||
onCreated={() => {
|
||||
setShowNewAgent(false);
|
||||
void refresh();
|
||||
}}
|
||||
accessToken={accessToken}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
156
ui/litellm-dashboard/src/lib/cloud-agents-client.ts
Normal file
156
ui/litellm-dashboard/src/lib/cloud-agents-client.ts
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
/**
|
||||
* Client for the cloud-agents (Cursor SDK) API.
|
||||
*
|
||||
* Routes through `proxyBaseUrl` so all calls hit the LiteLLM proxy on the same
|
||||
* origin. When `NEXT_PUBLIC_USE_MOCK_AGENTS=true`, every method short-circuits
|
||||
* to `mock-agents.ts` so the dashboard can develop without Epic A merged.
|
||||
*
|
||||
* Backend namespace is `/v2/` — `/v1/agents` is reserved for the existing A2A
|
||||
* registry. When Epic A lands and exposes `/v2/agents`, `/v2/sessions`, etc.,
|
||||
* flip the env var off and the real fetches kick in. No component changes
|
||||
* required.
|
||||
*/
|
||||
import { getProxyBaseUrl } from "@/components/networking";
|
||||
import {
|
||||
isMockEnabled,
|
||||
mockCreateAgent,
|
||||
mockCreateSession,
|
||||
mockGetAgent,
|
||||
mockGetConversation,
|
||||
mockGetRun,
|
||||
mockGetSession,
|
||||
mockListAgents,
|
||||
mockListSessions,
|
||||
mockSendFollowup,
|
||||
} from "@/lib/mock-agents";
|
||||
import type { CloudAgent, CloudAgentConversationMessage, CloudAgentRun, CloudAgentSession } from "@/types/cloud-agents";
|
||||
|
||||
function authHeaders(accessToken: string | null): HeadersInit {
|
||||
const headers: HeadersInit = { "Content-Type": "application/json" };
|
||||
if (accessToken) {
|
||||
headers["Authorization"] = `Bearer ${accessToken}`;
|
||||
}
|
||||
return headers;
|
||||
}
|
||||
|
||||
async function jsonOrThrow<T>(res: Response, label: string): Promise<T> {
|
||||
if (!res.ok) {
|
||||
const text = await res.text().catch(() => "");
|
||||
throw new Error(`${label} failed: ${res.status} ${text}`);
|
||||
}
|
||||
return (await res.json()) as T;
|
||||
}
|
||||
|
||||
/* ---------- agents ---------- */
|
||||
|
||||
export async function listCloudAgents(accessToken: string | null): Promise<CloudAgent[]> {
|
||||
if (isMockEnabled()) return mockListAgents();
|
||||
const res = await fetch(`${getProxyBaseUrl()}/v2/agents`, { headers: authHeaders(accessToken) });
|
||||
const body = await jsonOrThrow<{ agents: CloudAgent[] }>(res, "listCloudAgents");
|
||||
return body.agents;
|
||||
}
|
||||
|
||||
export async function getCloudAgent(accessToken: string | null, agentId: string): Promise<CloudAgent | null> {
|
||||
if (isMockEnabled()) return mockGetAgent(agentId);
|
||||
const res = await fetch(`${getProxyBaseUrl()}/v2/agents/${agentId}`, {
|
||||
headers: authHeaders(accessToken),
|
||||
});
|
||||
if (res.status === 404) return null;
|
||||
return jsonOrThrow<CloudAgent>(res, "getCloudAgent");
|
||||
}
|
||||
|
||||
export async function createCloudAgent(
|
||||
accessToken: string | null,
|
||||
input: { name: string; model: string; system_prompt?: string },
|
||||
): Promise<CloudAgent> {
|
||||
if (isMockEnabled()) return mockCreateAgent(input);
|
||||
const res = await fetch(`${getProxyBaseUrl()}/v2/agents`, {
|
||||
method: "POST",
|
||||
headers: authHeaders(accessToken),
|
||||
body: JSON.stringify(input),
|
||||
});
|
||||
return jsonOrThrow<CloudAgent>(res, "createCloudAgent");
|
||||
}
|
||||
|
||||
/* ---------- sessions ---------- */
|
||||
|
||||
export async function listCloudSessions(accessToken: string | null, agentId: string): Promise<CloudAgentSession[]> {
|
||||
if (isMockEnabled()) return mockListSessions(agentId);
|
||||
const res = await fetch(`${getProxyBaseUrl()}/v2/sessions?agent_id=${encodeURIComponent(agentId)}`, {
|
||||
headers: authHeaders(accessToken),
|
||||
});
|
||||
const body = await jsonOrThrow<{ sessions: CloudAgentSession[] }>(res, "listCloudSessions");
|
||||
return body.sessions;
|
||||
}
|
||||
|
||||
export async function getCloudSession(
|
||||
accessToken: string | null,
|
||||
sessionId: string,
|
||||
): Promise<CloudAgentSession | null> {
|
||||
if (isMockEnabled()) return mockGetSession(sessionId);
|
||||
const res = await fetch(`${getProxyBaseUrl()}/v2/sessions/${sessionId}`, {
|
||||
headers: authHeaders(accessToken),
|
||||
});
|
||||
if (res.status === 404) return null;
|
||||
return jsonOrThrow<CloudAgentSession>(res, "getCloudSession");
|
||||
}
|
||||
|
||||
export async function createCloudSession(
|
||||
accessToken: string | null,
|
||||
input: { agent_id: string; repo_url: string },
|
||||
): Promise<CloudAgentSession> {
|
||||
if (isMockEnabled()) return mockCreateSession(input);
|
||||
const res = await fetch(`${getProxyBaseUrl()}/v2/sessions`, {
|
||||
method: "POST",
|
||||
headers: authHeaders(accessToken),
|
||||
body: JSON.stringify(input),
|
||||
});
|
||||
return jsonOrThrow<CloudAgentSession>(res, "createCloudSession");
|
||||
}
|
||||
|
||||
export async function getSessionConversation(
|
||||
accessToken: string | null,
|
||||
sessionId: string,
|
||||
): Promise<CloudAgentConversationMessage[]> {
|
||||
if (isMockEnabled()) return mockGetConversation(sessionId);
|
||||
const res = await fetch(`${getProxyBaseUrl()}/v2/sessions/${sessionId}/conversation`, {
|
||||
headers: authHeaders(accessToken),
|
||||
});
|
||||
const body = await jsonOrThrow<{ messages: CloudAgentConversationMessage[] }>(res, "getSessionConversation");
|
||||
return body.messages;
|
||||
}
|
||||
|
||||
export async function sendSessionFollowup(
|
||||
accessToken: string | null,
|
||||
sessionId: string,
|
||||
content: string,
|
||||
): Promise<CloudAgentConversationMessage> {
|
||||
if (isMockEnabled()) return mockSendFollowup(sessionId, content);
|
||||
const res = await fetch(`${getProxyBaseUrl()}/v2/sessions/${sessionId}/followup`, {
|
||||
method: "POST",
|
||||
headers: authHeaders(accessToken),
|
||||
body: JSON.stringify({ content }),
|
||||
});
|
||||
return jsonOrThrow<CloudAgentConversationMessage>(res, "sendSessionFollowup");
|
||||
}
|
||||
|
||||
/* ---------- runs ---------- */
|
||||
|
||||
export async function getCloudRun(accessToken: string | null, runId: string): Promise<CloudAgentRun | null> {
|
||||
if (isMockEnabled()) return mockGetRun(runId);
|
||||
const res = await fetch(`${getProxyBaseUrl()}/v2/runs/${runId}`, {
|
||||
headers: authHeaders(accessToken),
|
||||
});
|
||||
if (res.status === 404) return null;
|
||||
return jsonOrThrow<CloudAgentRun>(res, "getCloudRun");
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the SSE URL for a run's event stream. The hook (`useSessionEventStream`)
|
||||
* is what actually opens the EventSource — this just centralizes the URL shape
|
||||
* so the route can change in one place.
|
||||
*/
|
||||
export function buildRunEventStreamUrl(sessionId: string, runId: string, sinceSeq?: number): string {
|
||||
const base = `${getProxyBaseUrl()}/v2/sessions/${sessionId}/runs/${runId}/events`;
|
||||
return sinceSeq !== undefined ? `${base}?since_seq=${sinceSeq}` : base;
|
||||
}
|
||||
286
ui/litellm-dashboard/src/lib/mock-agents.ts
Normal file
286
ui/litellm-dashboard/src/lib/mock-agents.ts
Normal file
|
|
@ -0,0 +1,286 @@
|
|||
/**
|
||||
* Mock data provider for the cloud-agents dashboard (Cursor SDK on LiteLLM).
|
||||
*
|
||||
* Wired via env var `NEXT_PUBLIC_USE_MOCK_AGENTS=true`. This is a temporary shim
|
||||
* until Epic A (LIT-2877) lands the real `/v2/agents`, `/v2/sessions`,
|
||||
* `/v2/sessions/{sid}/conversation` and `/v2/sessions/{sid}/runs/{rid}/events`
|
||||
* endpoints. (`/v1/agents` is reserved for the existing A2A registry — the new
|
||||
* VM-agent API moves under `/v2/`.) Shapes here mirror the API spec in LIT-2877
|
||||
* so the swap is a one-line client change inside `src/lib/cloud-agents-client.ts`.
|
||||
*
|
||||
* Do not call external services from the UI. Mock data is generated in-process.
|
||||
*/
|
||||
import type {
|
||||
CloudAgent,
|
||||
CloudAgentSession,
|
||||
CloudAgentRun,
|
||||
CloudAgentRunEvent,
|
||||
CloudAgentConversationMessage,
|
||||
CloudAgentSessionStatus,
|
||||
} from "@/types/cloud-agents";
|
||||
|
||||
const NOW = () => new Date().toISOString();
|
||||
|
||||
const MOCK_AGENTS: CloudAgent[] = [
|
||||
{
|
||||
agent_id: "agt_01",
|
||||
name: "shin-cursor-default",
|
||||
model: "claude-3-5-sonnet-20241022",
|
||||
system_prompt: "You are a helpful coding agent.",
|
||||
session_count: 4,
|
||||
last_activity_at: NOW(),
|
||||
created_at: "2026-04-01T12:00:00.000Z",
|
||||
},
|
||||
{
|
||||
agent_id: "agt_02",
|
||||
name: "code-review-bot",
|
||||
model: "claude-3-5-haiku-20241022",
|
||||
system_prompt: "You review pull requests.",
|
||||
session_count: 1,
|
||||
last_activity_at: NOW(),
|
||||
created_at: "2026-04-15T12:00:00.000Z",
|
||||
},
|
||||
];
|
||||
|
||||
const MOCK_SESSIONS: Record<string, CloudAgentSession[]> = {
|
||||
agt_01: [
|
||||
{
|
||||
session_id: "ses_01",
|
||||
agent_id: "agt_01",
|
||||
repo_url: "https://github.com/example/repo",
|
||||
branch: "feature/refactor-router",
|
||||
status: "running" as CloudAgentSessionStatus,
|
||||
title: "Refactor router fallback logic",
|
||||
active_run_id: "run_01",
|
||||
created_at: NOW(),
|
||||
updated_at: NOW(),
|
||||
},
|
||||
{
|
||||
session_id: "ses_02",
|
||||
agent_id: "agt_01",
|
||||
repo_url: "https://github.com/example/repo",
|
||||
branch: "fix/sse-reconnect",
|
||||
status: "completed" as CloudAgentSessionStatus,
|
||||
title: "Fix SSE reconnect bug",
|
||||
active_run_id: "run_02",
|
||||
created_at: NOW(),
|
||||
updated_at: NOW(),
|
||||
},
|
||||
],
|
||||
agt_02: [
|
||||
{
|
||||
session_id: "ses_03",
|
||||
agent_id: "agt_02",
|
||||
repo_url: "https://github.com/example/repo",
|
||||
branch: "main",
|
||||
status: "provisioning" as CloudAgentSessionStatus,
|
||||
title: "Review PR #1234",
|
||||
active_run_id: "run_03",
|
||||
created_at: NOW(),
|
||||
updated_at: NOW(),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const MOCK_CONVERSATION: Record<string, CloudAgentConversationMessage[]> = {
|
||||
ses_01: [
|
||||
{
|
||||
id: "msg_01",
|
||||
role: "user",
|
||||
content: "Can you refactor the router fallback logic to use the new tags API?",
|
||||
created_at: "2026-05-06T20:00:00.000Z",
|
||||
},
|
||||
{
|
||||
id: "msg_02",
|
||||
role: "assistant",
|
||||
content: "I'll start by reading `litellm/router.py` to understand the current logic.",
|
||||
created_at: "2026-05-06T20:00:05.000Z",
|
||||
},
|
||||
{
|
||||
id: "msg_03",
|
||||
role: "tool",
|
||||
content: "Read litellm/router.py (lines 1-200)",
|
||||
tool_name: "read_file",
|
||||
created_at: "2026-05-06T20:00:08.000Z",
|
||||
},
|
||||
],
|
||||
ses_02: [
|
||||
{
|
||||
id: "msg_10",
|
||||
role: "user",
|
||||
content: "The SSE reconnect drops events when the connection flaps.",
|
||||
created_at: "2026-05-05T10:00:00.000Z",
|
||||
},
|
||||
{
|
||||
id: "msg_11",
|
||||
role: "assistant",
|
||||
content: "Fixed by tracking the last seq cursor and replaying from there.",
|
||||
created_at: "2026-05-05T10:05:00.000Z",
|
||||
},
|
||||
],
|
||||
ses_03: [],
|
||||
};
|
||||
|
||||
/**
|
||||
* Canned event sequence for SSE simulation. Includes assistant streaming,
|
||||
* tool calls, file diffs, terminal chunks (one with ANSI red), and a git commit.
|
||||
* The mock client replays this with small delays.
|
||||
*/
|
||||
export const MOCK_RUN_EVENTS: CloudAgentRunEvent[] = [
|
||||
{
|
||||
seq: 1,
|
||||
type: "user_message",
|
||||
payload: { content: "Implement the new feature" },
|
||||
created_at: "2026-05-06T20:00:00.000Z",
|
||||
},
|
||||
{
|
||||
seq: 2,
|
||||
type: "assistant_message",
|
||||
payload: { content: "Starting work on the feature." },
|
||||
created_at: "2026-05-06T20:00:01.000Z",
|
||||
},
|
||||
{
|
||||
seq: 3,
|
||||
type: "tool_call",
|
||||
payload: { tool: "shell", input: "pnpm install" },
|
||||
created_at: "2026-05-06T20:00:02.000Z",
|
||||
},
|
||||
{
|
||||
seq: 4,
|
||||
type: "terminal_chunk",
|
||||
payload: { text: "[31mERROR[0m: missing dep\n" },
|
||||
created_at: "2026-05-06T20:00:03.000Z",
|
||||
},
|
||||
{
|
||||
seq: 5,
|
||||
type: "file_diff",
|
||||
payload: {
|
||||
path: "src/index.ts",
|
||||
additions: 12,
|
||||
deletions: 3,
|
||||
patch: "@@ -1,3 +1,12 @@\n+import { foo } from './foo';",
|
||||
},
|
||||
created_at: "2026-05-06T20:00:04.000Z",
|
||||
},
|
||||
{
|
||||
seq: 6,
|
||||
type: "git_commit",
|
||||
payload: { sha: "abc123", message: "feat: add new feature", branch: "feature/new" },
|
||||
created_at: "2026-05-06T20:00:05.000Z",
|
||||
},
|
||||
];
|
||||
|
||||
const MOCK_RUNS: Record<string, CloudAgentRun> = {
|
||||
run_01: {
|
||||
run_id: "run_01",
|
||||
session_id: "ses_01",
|
||||
status: "running",
|
||||
created_at: "2026-05-06T20:00:00.000Z",
|
||||
terminated_at: null,
|
||||
git: { branches: [{ name: "feature/refactor-router", base: "main" }], pr_url: null },
|
||||
},
|
||||
run_02: {
|
||||
run_id: "run_02",
|
||||
session_id: "ses_02",
|
||||
status: "completed",
|
||||
created_at: "2026-05-05T10:00:00.000Z",
|
||||
terminated_at: "2026-05-05T10:05:00.000Z",
|
||||
git: {
|
||||
branches: [{ name: "fix/sse-reconnect", base: "main" }],
|
||||
pr_url: "https://github.com/example/repo/pull/42",
|
||||
},
|
||||
},
|
||||
run_03: {
|
||||
run_id: "run_03",
|
||||
session_id: "ses_03",
|
||||
status: "provisioning",
|
||||
created_at: NOW(),
|
||||
terminated_at: null,
|
||||
git: { branches: [], pr_url: null },
|
||||
},
|
||||
};
|
||||
|
||||
export function isMockEnabled(): boolean {
|
||||
return process.env.NEXT_PUBLIC_USE_MOCK_AGENTS === "true";
|
||||
}
|
||||
|
||||
/* ---------- mock client surface ---------- */
|
||||
|
||||
export async function mockListAgents(): Promise<CloudAgent[]> {
|
||||
return MOCK_AGENTS;
|
||||
}
|
||||
|
||||
export async function mockGetAgent(agentId: string): Promise<CloudAgent | null> {
|
||||
return MOCK_AGENTS.find((a) => a.agent_id === agentId) ?? null;
|
||||
}
|
||||
|
||||
export async function mockListSessions(agentId: string): Promise<CloudAgentSession[]> {
|
||||
return MOCK_SESSIONS[agentId] ?? [];
|
||||
}
|
||||
|
||||
export async function mockGetSession(sessionId: string): Promise<CloudAgentSession | null> {
|
||||
for (const sessions of Object.values(MOCK_SESSIONS)) {
|
||||
const found = sessions.find((s) => s.session_id === sessionId);
|
||||
if (found) return found;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export async function mockGetRun(runId: string): Promise<CloudAgentRun | null> {
|
||||
return MOCK_RUNS[runId] ?? null;
|
||||
}
|
||||
|
||||
export async function mockGetConversation(sessionId: string): Promise<CloudAgentConversationMessage[]> {
|
||||
return MOCK_CONVERSATION[sessionId] ?? [];
|
||||
}
|
||||
|
||||
export async function mockCreateAgent(input: {
|
||||
name: string;
|
||||
model: string;
|
||||
system_prompt?: string;
|
||||
}): Promise<CloudAgent> {
|
||||
const agent: CloudAgent = {
|
||||
agent_id: `agt_${Math.random().toString(36).slice(2, 8)}`,
|
||||
name: input.name,
|
||||
model: input.model,
|
||||
system_prompt: input.system_prompt ?? "",
|
||||
session_count: 0,
|
||||
last_activity_at: NOW(),
|
||||
created_at: NOW(),
|
||||
};
|
||||
MOCK_AGENTS.push(agent);
|
||||
return agent;
|
||||
}
|
||||
|
||||
export async function mockCreateSession(input: { agent_id: string; repo_url: string }): Promise<CloudAgentSession> {
|
||||
const session: CloudAgentSession = {
|
||||
session_id: `ses_${Math.random().toString(36).slice(2, 8)}`,
|
||||
agent_id: input.agent_id,
|
||||
repo_url: input.repo_url,
|
||||
branch: "main",
|
||||
status: "provisioning",
|
||||
title: "New session",
|
||||
active_run_id: null,
|
||||
created_at: NOW(),
|
||||
updated_at: NOW(),
|
||||
};
|
||||
if (!MOCK_SESSIONS[input.agent_id]) {
|
||||
MOCK_SESSIONS[input.agent_id] = [];
|
||||
}
|
||||
MOCK_SESSIONS[input.agent_id].push(session);
|
||||
return session;
|
||||
}
|
||||
|
||||
export async function mockSendFollowup(sessionId: string, content: string): Promise<CloudAgentConversationMessage> {
|
||||
const msg: CloudAgentConversationMessage = {
|
||||
id: `msg_${Math.random().toString(36).slice(2, 8)}`,
|
||||
role: "user",
|
||||
content,
|
||||
created_at: NOW(),
|
||||
};
|
||||
if (!MOCK_CONVERSATION[sessionId]) {
|
||||
MOCK_CONVERSATION[sessionId] = [];
|
||||
}
|
||||
MOCK_CONVERSATION[sessionId].push(msg);
|
||||
return msg;
|
||||
}
|
||||
109
ui/litellm-dashboard/src/types/cloud-agents.ts
Normal file
109
ui/litellm-dashboard/src/types/cloud-agents.ts
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
/**
|
||||
* Type definitions for the cloud-agents (Cursor SDK on LiteLLM) dashboard.
|
||||
*
|
||||
* These mirror the API spec from LIT-2877 (Epic A). When the backend lands,
|
||||
* this file is the single source of truth — components should import from
|
||||
* here, not redefine shapes inline.
|
||||
*
|
||||
* Namespaced as `Cloud*` to avoid colliding with the existing legacy
|
||||
* proxy-side `Agent` type at `src/components/agents/types.ts`.
|
||||
*/
|
||||
|
||||
export type CloudAgentSessionStatus = "provisioning" | "running" | "paused" | "completed" | "failed";
|
||||
|
||||
export interface CloudAgent {
|
||||
agent_id: string;
|
||||
name: string;
|
||||
model: string;
|
||||
system_prompt: string;
|
||||
session_count: number;
|
||||
last_activity_at: string | null;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface CloudAgentSession {
|
||||
session_id: string;
|
||||
agent_id: string;
|
||||
repo_url: string;
|
||||
branch: string;
|
||||
status: CloudAgentSessionStatus;
|
||||
title: string;
|
||||
active_run_id: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface CloudAgentRunGitBranch {
|
||||
name: string;
|
||||
base: string;
|
||||
}
|
||||
|
||||
export interface CloudAgentRunGit {
|
||||
branches: CloudAgentRunGitBranch[];
|
||||
pr_url: string | null;
|
||||
}
|
||||
|
||||
export interface CloudAgentRun {
|
||||
run_id: string;
|
||||
session_id: string;
|
||||
status: CloudAgentSessionStatus;
|
||||
created_at: string;
|
||||
terminated_at: string | null;
|
||||
git: CloudAgentRunGit;
|
||||
}
|
||||
|
||||
export type CloudAgentConversationRole = "user" | "assistant" | "tool" | "system";
|
||||
|
||||
export interface CloudAgentConversationMessage {
|
||||
id: string;
|
||||
role: CloudAgentConversationRole;
|
||||
content: string;
|
||||
tool_name?: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Event types emitted on the SSE stream from the proxy. The shape of `payload`
|
||||
* varies by `type` — keep the discriminated union loose here so we can refine
|
||||
* per-component without churning every callsite.
|
||||
*/
|
||||
export type CloudAgentRunEventType =
|
||||
| "user_message"
|
||||
| "assistant_message"
|
||||
| "tool_call"
|
||||
| "tool_result"
|
||||
| "terminal_chunk"
|
||||
| "file_diff"
|
||||
| "git_commit"
|
||||
| "pr_opened"
|
||||
| "run_started"
|
||||
| "run_completed";
|
||||
|
||||
export interface CloudAgentRunEvent {
|
||||
seq: number;
|
||||
type: CloudAgentRunEventType;
|
||||
payload: Record<string, unknown>;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface FileDiffPayload {
|
||||
path: string;
|
||||
additions: number;
|
||||
deletions: number;
|
||||
patch: string;
|
||||
}
|
||||
|
||||
export interface TerminalChunkPayload {
|
||||
text: string;
|
||||
}
|
||||
|
||||
export interface GitCommitPayload {
|
||||
sha: string;
|
||||
message: string;
|
||||
branch: string;
|
||||
}
|
||||
|
||||
export interface ToolCallPayload {
|
||||
tool: string;
|
||||
input: string;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue