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,134 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { ArrowLeft, Eye, EyeOff, KeyRound, Save } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { api } from "@/lib/api";
|
||||
|
||||
export default function NewAgentPage() {
|
||||
const router = useRouter();
|
||||
const [repoUrl, setRepoUrl] = useState("");
|
||||
const [pat, setPat] = useState("");
|
||||
const [showPat, setShowPat] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
async function onSave() {
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
const url = repoUrl.trim();
|
||||
if (!url) throw new Error("Repository URL is required");
|
||||
await api.createAgent({ repoUrl: url, pat: pat.trim() || undefined });
|
||||
router.push("/agents");
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "save failed");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-full max-w-2xl space-y-6 p-6">
|
||||
<Button variant="ghost" size="sm" asChild>
|
||||
<Link href="/agents">
|
||||
<ArrowLeft />
|
||||
Back
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<div>
|
||||
<h1 className="text-3xl font-semibold tracking-tight">Add agent</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Link a git repository that contains your agent code. The PAT is
|
||||
stored encrypted server-side and used only for git operations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Repository</CardTitle>
|
||||
<CardDescription>
|
||||
HTTPS or SSH URL — public repos can leave the PAT blank.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="repoUrl">Git URL</Label>
|
||||
<Input
|
||||
id="repoUrl"
|
||||
value={repoUrl}
|
||||
onChange={(e) => setRepoUrl(e.target.value)}
|
||||
placeholder="https://github.com/org/agent-repo.git"
|
||||
spellCheck={false}
|
||||
autoComplete="off"
|
||||
/>
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
Name is auto-derived from the repo path (e.g.{" "}
|
||||
<code className="font-mono">org/repo</code>).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="pat" className="flex items-center gap-1">
|
||||
<KeyRound className="size-3.5" />
|
||||
Personal access token (optional)
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="pat"
|
||||
type={showPat ? "text" : "password"}
|
||||
value={pat}
|
||||
onChange={(e) => setPat(e.target.value)}
|
||||
placeholder="ghp_… or glpat_…"
|
||||
spellCheck={false}
|
||||
autoComplete="new-password"
|
||||
className="pr-10 font-mono text-xs"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPat((v) => !v)}
|
||||
className="absolute inset-y-0 right-2 flex items-center text-muted-foreground hover:text-foreground"
|
||||
aria-label={showPat ? "Hide token" : "Show token"}
|
||||
>
|
||||
{showPat ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
Required for private repos. Scope:{" "}
|
||||
<code className="font-mono">repo</code> read access is enough.
|
||||
Never returned by the API after save.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="ghost" asChild>
|
||||
<Link href="/agents">Cancel</Link>
|
||||
</Button>
|
||||
<Button onClick={onSave} disabled={saving || !repoUrl.trim()}>
|
||||
<Save />
|
||||
{saving ? "Saving…" : "Add agent"}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,193 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Bot,
|
||||
ExternalLink,
|
||||
KeyRound,
|
||||
Plus,
|
||||
RefreshCw,
|
||||
Trash2,
|
||||
} 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 } from "@/lib/api";
|
||||
import { formatDate } from "@/lib/utils";
|
||||
|
||||
export default function AgentsPage() {
|
||||
const [agents, setAgents] = useState<Agent[] | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
const list = await api.listAgents();
|
||||
list.sort((a, b) => (b.updatedAt || "").localeCompare(a.updatedAt || ""));
|
||||
setAgents(list);
|
||||
setError(null);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "failed to load");
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, []);
|
||||
|
||||
async function onDelete(id: string) {
|
||||
if (!confirm("Remove this agent?")) return;
|
||||
try {
|
||||
await api.deleteAgent(id);
|
||||
await load();
|
||||
} catch (e) {
|
||||
alert(e instanceof Error ? e.message : "delete failed");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8 p-6">
|
||||
<div className="flex items-end justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-semibold tracking-tight">Agents</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Agent repositories Langship watches and deploys. Add a git URL — we
|
||||
track the ref and trigger pipelines on push.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={load}>
|
||||
<RefreshCw />
|
||||
Refresh
|
||||
</Button>
|
||||
<Button size="sm" asChild>
|
||||
<Link href="/agents/new">
|
||||
<Plus />
|
||||
Add agent
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Card className="border-destructive/40">
|
||||
<CardContent className="pt-6 text-sm text-destructive">{error}</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{agents === null ? (
|
||||
<SkeletonGrid />
|
||||
) : agents.length === 0 ? (
|
||||
<EmptyState />
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{agents.map((a) => (
|
||||
<Link
|
||||
key={a.id}
|
||||
href={`/agents/view/?id=${encodeURIComponent(a.id)}`}
|
||||
className="group block"
|
||||
>
|
||||
<Card className="h-full transition-shadow hover:shadow-md">
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0 flex items-center gap-2">
|
||||
<span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
|
||||
<Bot className="size-4" />
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<CardTitle className="truncate">{a.name}</CardTitle>
|
||||
<CardDescription className="mt-0.5 truncate text-[11px]">
|
||||
{a.ref || "main"}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-end gap-1">
|
||||
{a.hasPat && (
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
<KeyRound className="size-3" />
|
||||
PAT
|
||||
</Badge>
|
||||
)}
|
||||
{a.webhookInstalled && (
|
||||
<Badge variant="success">webhook</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div
|
||||
className="flex items-center gap-1 truncate text-xs text-muted-foreground"
|
||||
title={a.repoUrl}
|
||||
>
|
||||
<ExternalLink className="size-3 shrink-0" />
|
||||
<span className="truncate">{a.repoUrl}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>added {formatDate(a.createdAt)}</span>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
onDelete(a.id);
|
||||
}}
|
||||
aria-label="Remove agent"
|
||||
className="opacity-0 transition-opacity group-hover:opacity-100"
|
||||
>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SkeletonGrid() {
|
||||
return (
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<Card key={i}>
|
||||
<CardHeader>
|
||||
<div className="h-4 w-1/2 animate-pulse rounded bg-muted" />
|
||||
<div className="mt-2 h-3 w-1/3 animate-pulse rounded bg-muted" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-3 w-2/3 animate-pulse rounded bg-muted" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyState() {
|
||||
return (
|
||||
<Card className="border-dashed">
|
||||
<CardContent className="flex flex-col items-center gap-3 py-16 text-center">
|
||||
<div className="rounded-full bg-muted p-3">
|
||||
<Bot className="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium">No agents yet</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Add a git repository containing your agent code.
|
||||
</p>
|
||||
</div>
|
||||
<Button size="sm" asChild>
|
||||
<Link href="/agents/new">Add your first agent</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -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