mirror of
https://github.com/open-gitagent/langship.sh.git
synced 2026-08-03 07:21:04 +02:00
feat: add agents management and enhance inspector with typed forms
- Introduced a new "Agents" section in the app sidebar for better navigation. - Enhanced the Inspector component to support typed forms for various node types, improving user experience when configuring nodes. - Created a new NodeForm component to handle specific forms for different node types, including Trigger, Build, Test, Eval, Policy, Approval, Deploy, Promote, and Rollback. - Updated the API layer to manage agents, including listing, creating, deleting, and testing agent authentication. - Modified the node catalog to include new node types and their respective configurations. - Adjusted the Next.js configuration and Nginx settings to reflect changes in API endpoint ports.
This commit is contained in:
patel-lyzr
@@ -0,0 +1,604 @@
|
||||
"use client";
|
||||
|
||||
import { Suspense, useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import {
|
||||
ArrowLeft,
|
||||
CheckCircle2,
|
||||
ExternalLink,
|
||||
Github,
|
||||
KeyRound,
|
||||
Play,
|
||||
Plus,
|
||||
Trash2,
|
||||
Webhook,
|
||||
XCircle,
|
||||
} from "lucide-react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
api,
|
||||
type Agent,
|
||||
type AuthStatus,
|
||||
type FlowSummary,
|
||||
type Run,
|
||||
type ServerConfig,
|
||||
} from "@/lib/api";
|
||||
import { formatDate } from "@/lib/utils";
|
||||
|
||||
export default function AgentDetailPage() {
|
||||
return (
|
||||
<Suspense fallback={<div className="p-6 text-sm text-muted-foreground">Loading…</div>}>
|
||||
<AgentDetail />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
function AgentDetail() {
|
||||
const router = useRouter();
|
||||
const params = useSearchParams();
|
||||
const id = params.get("id") ?? "";
|
||||
|
||||
const [agent, setAgent] = useState<Agent | null>(null);
|
||||
const [config, setConfig] = useState<ServerConfig | null>(null);
|
||||
const [pipelines, setPipelines] = useState<FlowSummary[]>([]);
|
||||
const [runs, setRuns] = useState<Run[]>([]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState<string | null>(null); // which action is in flight
|
||||
const [showPipelinePicker, setShowPipelinePicker] = useState(false);
|
||||
|
||||
async function load() {
|
||||
if (!id) return;
|
||||
try {
|
||||
const [a, cfg, allPipes] = await Promise.all([
|
||||
api.getAgent(id),
|
||||
api.getConfig().catch(() => null),
|
||||
api.listFlows().catch(() => []),
|
||||
]);
|
||||
setAgent(a);
|
||||
setConfig(cfg);
|
||||
setPipelines(allPipes);
|
||||
// Pull recent runs across all attached pipelines.
|
||||
if (a.attachedPipelines?.length) {
|
||||
const lists = await Promise.all(
|
||||
a.attachedPipelines.map((pid) =>
|
||||
api.listRuns({ pipelineId: pid, limit: 5 }).catch(() => [])
|
||||
)
|
||||
);
|
||||
const merged = lists.flat();
|
||||
merged.sort((x, y) => (y.startedAt || "").localeCompare(x.startedAt || ""));
|
||||
setRuns(merged.slice(0, 10));
|
||||
} else {
|
||||
setRuns([]);
|
||||
}
|
||||
setError(null);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "load failed");
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [id]);
|
||||
|
||||
async function withBusy<T>(label: string, fn: () => Promise<T>) {
|
||||
setBusy(label);
|
||||
setError(null);
|
||||
try {
|
||||
return await fn();
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : `${label} failed`);
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function onTrigger() {
|
||||
await withBusy("trigger", async () => {
|
||||
const res = await api.triggerAgent(id);
|
||||
if (res.executionIds?.length) {
|
||||
router.push(
|
||||
`/executions/view/?id=${encodeURIComponent(res.executionIds[0])}`
|
||||
);
|
||||
} else {
|
||||
await load();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function onTestAuth() {
|
||||
await withBusy("test-auth", async () => {
|
||||
await api.testAgentAuth(id);
|
||||
await load();
|
||||
});
|
||||
}
|
||||
|
||||
async function onInstallWebhook() {
|
||||
await withBusy("webhook-install", async () => {
|
||||
await api.installAgentWebhook(id);
|
||||
await load();
|
||||
});
|
||||
}
|
||||
|
||||
async function onUninstallWebhook() {
|
||||
if (!confirm("Uninstall the GitHub webhook for this agent?")) return;
|
||||
await withBusy("webhook-uninstall", async () => {
|
||||
await api.uninstallAgentWebhook(id);
|
||||
await load();
|
||||
});
|
||||
}
|
||||
|
||||
async function onAttachPipeline(pipelineId: string) {
|
||||
await withBusy("attach", async () => {
|
||||
await api.attachPipeline(id, pipelineId);
|
||||
setShowPipelinePicker(false);
|
||||
await load();
|
||||
});
|
||||
}
|
||||
|
||||
async function onDetachPipeline(pipelineId: string) {
|
||||
if (!confirm("Detach this pipeline from the agent?")) return;
|
||||
await withBusy("detach", async () => {
|
||||
await api.detachPipeline(id, pipelineId);
|
||||
await load();
|
||||
});
|
||||
}
|
||||
|
||||
async function onDeleteAgent() {
|
||||
if (!confirm("Delete this agent? Webhook will be removed too.")) return;
|
||||
await withBusy("delete", async () => {
|
||||
await api.deleteAgent(id);
|
||||
router.push("/agents");
|
||||
});
|
||||
}
|
||||
|
||||
if (!id) {
|
||||
return (
|
||||
<div className="p-6 text-sm text-muted-foreground">
|
||||
Missing <code>id</code> query param.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!agent) {
|
||||
return (
|
||||
<div className="p-6 space-y-3">
|
||||
{error ? (
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">Loading agent…</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const lastRun = runs[0];
|
||||
const attachedPipelineDetails = (agent.attachedPipelines ?? [])
|
||||
.map((pid) => pipelines.find((p) => p.id === pid))
|
||||
.filter((p): p is FlowSummary => Boolean(p));
|
||||
const attachable = pipelines.filter(
|
||||
(p) => !agent.attachedPipelines?.includes(p.id)
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-6 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<Button variant="ghost" size="sm" asChild>
|
||||
<Link href="/agents">
|
||||
<ArrowLeft />
|
||||
Back
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-semibold tracking-tight">{agent.name}</h1>
|
||||
<p className="mt-1 font-mono text-xs text-muted-foreground">{agent.id}</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={onDeleteAgent}
|
||||
disabled={busy === "delete"}
|
||||
>
|
||||
<Trash2 />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Card className="border-destructive/40">
|
||||
<CardContent className="pt-6 text-sm text-destructive">{error}</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Overview ---------------------------------------------------------- */}
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0">
|
||||
<CardTitle>Overview</CardTitle>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<a href={agent.repoUrl} target="_blank" rel="noreferrer">
|
||||
<Github />
|
||||
Repository
|
||||
</a>
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={onTrigger}
|
||||
disabled={
|
||||
busy === "trigger" ||
|
||||
!config?.orchestratorEnabled ||
|
||||
!agent.attachedPipelines?.length
|
||||
}
|
||||
>
|
||||
<Play />
|
||||
{busy === "trigger" ? "Triggering…" : "Trigger run"}
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
|
||||
<Field label="Repository">
|
||||
<div className="flex items-center gap-2">
|
||||
<Github className="size-4 text-muted-foreground" />
|
||||
<span className="font-mono text-sm">{agent.name}</span>
|
||||
</div>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-1.5">
|
||||
<WebhookBadge agent={agent} />
|
||||
<AuthBadge status={agent.authStatus ?? "untested"} />
|
||||
</div>
|
||||
</Field>
|
||||
<Field label="Last run">
|
||||
{lastRun ? (
|
||||
<Link
|
||||
href={`/executions/view/?id=${encodeURIComponent(lastRun.id)}`}
|
||||
className="text-sm hover:underline"
|
||||
>
|
||||
<RunStatus status={lastRun.status} />
|
||||
<div className="mt-0.5 text-xs text-muted-foreground">
|
||||
{formatDate(lastRun.startedAt)}
|
||||
</div>
|
||||
</Link>
|
||||
) : (
|
||||
<span className="text-sm text-muted-foreground">No runs yet.</span>
|
||||
)}
|
||||
</Field>
|
||||
<Field label="Pipelines">
|
||||
{attachedPipelineDetails.length === 0 ? (
|
||||
<span className="text-sm text-muted-foreground">
|
||||
None attached.{" "}
|
||||
<Link href="/flows/new" className="underline hover:text-foreground">
|
||||
Create one
|
||||
</Link>
|
||||
.
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-sm">
|
||||
{attachedPipelineDetails.length} attached
|
||||
</span>
|
||||
)}
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
{agent.attachedPipelines?.length ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Pushes to{" "}
|
||||
<code className="font-mono text-xs">{agent.name}</code> route through
|
||||
this agent’s pipelines (matched by branch).
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{agent.webhookUrl && (
|
||||
<p className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<Webhook className="size-3.5" />
|
||||
<code className="break-all font-mono">{agent.webhookUrl}</code>
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
{/* Repo / webhook -------------------------------------------------- */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Repo</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<div className="font-mono text-sm">{agent.name}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Token{" "}
|
||||
{agent.hasPat ? (
|
||||
<span className="font-mono">********</span>
|
||||
) : (
|
||||
<span>not set</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="text-muted-foreground">Auth:</span>
|
||||
<AuthBadge status={agent.authStatus ?? "untested"} />
|
||||
{agent.authCheckedAt && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
· {formatDate(agent.authCheckedAt)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="text-muted-foreground">Webhook:</span>
|
||||
<WebhookBadge agent={agent} />
|
||||
{agent.webhookInstalledAt && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
· {formatDate(agent.webhookInstalledAt)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{agent.webhookUrl && (
|
||||
<p className="break-all rounded-md border bg-muted/30 p-2 font-mono text-[11px]">
|
||||
{agent.webhookUrl}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{!config?.webhooksAvailable && !agent.webhookInstalled && (
|
||||
<p className="rounded-md border border-amber-500/40 bg-amber-500/5 p-2 text-xs text-amber-700 dark:text-amber-400">
|
||||
FLOW_PUBLIC_URL is not configured on the server. Set it (e.g. to
|
||||
a <code className="font-mono">cloudflared</code> tunnel) to install
|
||||
webhooks.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onTestAuth}
|
||||
disabled={!agent.hasPat || busy === "test-auth"}
|
||||
>
|
||||
{busy === "test-auth" ? "Testing…" : "Test auth"}
|
||||
</Button>
|
||||
{agent.webhookInstalled ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onUninstallWebhook}
|
||||
disabled={busy === "webhook-uninstall"}
|
||||
>
|
||||
{busy === "webhook-uninstall" ? "Removing…" : "Uninstall webhook"}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={onInstallWebhook}
|
||||
disabled={
|
||||
!agent.hasPat ||
|
||||
!config?.webhooksAvailable ||
|
||||
busy === "webhook-install"
|
||||
}
|
||||
>
|
||||
<Webhook />
|
||||
{busy === "webhook-install" ? "Installing…" : "Install webhook"}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Pipelines ----------------------------------------------------- */}
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
||||
<CardTitle>Pipelines</CardTitle>
|
||||
{attachable.length > 0 ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => setShowPipelinePicker((v) => !v)}
|
||||
>
|
||||
<Plus />
|
||||
Add pipeline
|
||||
</Button>
|
||||
) : (
|
||||
<Button size="sm" variant="ghost" disabled>
|
||||
No more to add
|
||||
</Button>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{attachedPipelineDetails.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No pipelines attached. Click “Add pipeline” to bind one
|
||||
(or create one in{" "}
|
||||
<Link href="/flows/new" className="underline">
|
||||
/flows/new
|
||||
</Link>
|
||||
).
|
||||
</p>
|
||||
) : (
|
||||
<ul className="space-y-1.5">
|
||||
{attachedPipelineDetails.map((p) => (
|
||||
<li
|
||||
key={p.id}
|
||||
className="flex items-center justify-between gap-2 rounded-md border bg-muted/20 px-3 py-2"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<Link
|
||||
href={`/flows/view/?id=${encodeURIComponent(p.id)}`}
|
||||
className="truncate text-sm font-medium hover:underline"
|
||||
>
|
||||
{p.name || "Untitled"}
|
||||
</Link>
|
||||
<div className="text-[11px] text-muted-foreground">
|
||||
{p.nodeCount} nodes · {formatDate(p.updatedAt)}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
aria-label="Detach pipeline"
|
||||
onClick={() => onDetachPipeline(p.id)}
|
||||
>
|
||||
<XCircle className="size-4" />
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{showPipelinePicker && attachable.length > 0 && (
|
||||
<div className="rounded-md border bg-background p-2">
|
||||
<div className="mb-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
|
||||
Attach a pipeline
|
||||
</div>
|
||||
<ul className="space-y-1">
|
||||
{attachable.map((p) => (
|
||||
<li key={p.id}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onAttachPipeline(p.id)}
|
||||
disabled={busy === "attach"}
|
||||
className="flex w-full items-center justify-between rounded-md px-2 py-1.5 text-left text-sm hover:bg-accent"
|
||||
>
|
||||
<span className="truncate">{p.name || "Untitled"}</span>
|
||||
<span className="text-[11px] text-muted-foreground">
|
||||
{p.nodeCount} nodes
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Recent runs ------------------------------------------------------ */}
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
||||
<CardTitle>Recent runs</CardTitle>
|
||||
{runs.length > 0 && (
|
||||
<Link
|
||||
href="/executions/view"
|
||||
className="text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
View all →
|
||||
</Link>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{runs.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No runs yet — trigger one from the Overview block above.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="divide-y">
|
||||
{runs.map((r) => (
|
||||
<li key={r.id} className="flex items-center justify-between py-2">
|
||||
<Link
|
||||
href={`/executions/view/?id=${encodeURIComponent(r.id)}`}
|
||||
className="min-w-0 flex-1"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<RunStatus status={r.status} />
|
||||
<span className="truncate font-mono text-xs">{r.id}</span>
|
||||
</div>
|
||||
<div className="text-[11px] text-muted-foreground">
|
||||
{r.pipelineName || r.pipelineId} ·{" "}
|
||||
{formatDate(r.startedAt)}
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({ label, children }: { label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
|
||||
{label}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AuthBadge({ status }: { status: AuthStatus }) {
|
||||
if (status === "ok") {
|
||||
return (
|
||||
<Badge variant="success" className="gap-1">
|
||||
<CheckCircle2 className="size-3" />
|
||||
auth ok
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
if (status === "failed") {
|
||||
return (
|
||||
<Badge variant="destructive" className="gap-1">
|
||||
<XCircle className="size-3" />
|
||||
auth failed
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
return <Badge variant="outline">auth untested</Badge>;
|
||||
}
|
||||
|
||||
function WebhookBadge({ agent }: { agent: Agent }) {
|
||||
if (agent.webhookInstalled) {
|
||||
return (
|
||||
<Badge variant="success" className="gap-1">
|
||||
<Webhook className="size-3" />
|
||||
webhook installed
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<Webhook className="size-3" />
|
||||
no webhook
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
function RunStatus({ status }: { status: string }) {
|
||||
const s = status.toLowerCase();
|
||||
if (s === "success" || s === "completed") {
|
||||
return (
|
||||
<Badge variant="success" className="gap-1">
|
||||
<CheckCircle2 className="size-3" />
|
||||
{status}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
if (s === "failed" || s === "error") {
|
||||
return (
|
||||
<Badge variant="destructive" className="gap-1">
|
||||
<XCircle className="size-3" />
|
||||
{status}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
return <Badge variant="secondary">{status}</Badge>;
|
||||
}
|
||||
|
||||
// Avoid unused-import lint when the symbol is referenced only by type.
|
||||
void KeyRound;
|
||||
void ExternalLink;
|
||||
Reference in New Issue
Block a user