feat: implement environment management features

- Added environment creation and editing pages with forms for name and description. - Integrated environment listing with options to edit and delete environments. - Updated agent detail page to manage environments followed by agents. - Enhanced API to support environment operations including listing, creating, updating, and deleting environments. - Refactored related components and state management for improved clarity and functionality.
2026-08-03 07:21:04 +02:00 · 2026-05-13 22:15:08 +05:30
parent 1766bdf497
commit 6b1a13ecdc
19 changed files with 1377 additions and 341 deletions
@@ -34,6 +34,7 @@ import {
  api,
  type Agent,
  type AuthStatus,
+  type Environment,
  type FlowSummary,
  type PublicCredential,
  type Run,
@@ -56,27 +57,35 @@ function AgentDetail() {

  const [agent, setAgent] = useState<Agent | null>(null);
  const [config, setConfig] = useState<ServerConfig | null>(null);
+  const [environments, setEnvironments] = useState<Environment[]>([]);
  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);
+  const [showEnvPicker, setShowEnvPicker] = useState(false);

  async function load() {
    if (!id) return;
    try {
-      const [a, cfg, allPipes] = await Promise.all([
+      const [a, cfg, allEnvs, allPipes] = await Promise.all([
        api.getAgent(id),
        api.getConfig().catch(() => null),
+        api.listEnvironments().catch(() => []),
        api.listFlows().catch(() => []),
      ]);
      setAgent(a);
      setConfig(cfg);
+      setEnvironments(allEnvs);
      setPipelines(allPipes);
-      // Pull recent runs across all attached pipelines.
-      if (a.attachedPipelines?.length) {
+      // Recent runs across the pipelines of every followed env.
+      const followed = (a.environments ?? [])
+        .map((n) => allEnvs.find((e) => e.name === n))
+        .filter((e): e is Environment => Boolean(e));
+      const pipelineIds = new Set<string>();
+      followed.forEach((e) => (e.pipelineIds ?? []).forEach((pid) => pipelineIds.add(pid)));
+      if (pipelineIds.size) {
        const lists = await Promise.all(
-          a.attachedPipelines.map((pid) =>
+          [...pipelineIds].map((pid) =>
            api.listRuns({ pipelineId: pid, limit: 5 }).catch(() => [])
          )
        );
@@ -134,7 +143,10 @@ function AgentDetail() {
      }
      throw new Error(
        fails
-          .map((f) => `${f.pipelineId}: ${f.reason}${f.error ? " — " + f.error : ""}`)
+          .map((f) => {
+            const where = [f.environment, f.pipelineId].filter(Boolean).join("/");
+            return `${where || "?"}: ${f.reason}${f.error ? " — " + f.error : ""}`;
+          })
          .join("; ")
      );
    });
@@ -162,18 +174,18 @@ function AgentDetail() {
    });
  }

-  async function onAttachPipeline(pipelineId: string) {
-    await withBusy("attach", async () => {
-      await api.attachPipeline(id, pipelineId);
-      setShowPipelinePicker(false);
+  async function onFollowEnv(envName: string) {
+    await withBusy("follow-env", async () => {
+      await api.agentFollowEnv(id, envName);
+      setShowEnvPicker(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);
+  async function onUnfollowEnv(envName: string) {
+    if (!confirm(`Stop following environment "${envName}"? This agent will no longer dispatch its pipelines.`)) return;
+    await withBusy("unfollow-env", async () => {
+      await api.agentUnfollowEnv(id, envName);
      await load();
    });
  }
@@ -207,12 +219,14 @@ function AgentDetail() {
  }

  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)
+  const followedEnvs = (agent.environments ?? [])
+    .map((n) => environments.find((e) => e.name === n))
+    .filter((e): e is Environment => Boolean(e));
+  const followableEnvs = environments.filter(
+    (e) => !agent.environments?.includes(e.name)
  );
+  const pipelineName = (pid: string) =>
+    pipelines.find((p) => p.id === pid)?.name ?? pid;

  return (
    <div className="space-y-6 p-6">
@@ -263,16 +277,16 @@ function AgentDetail() {
              disabled={
                busy === "trigger" ||
                !config?.orchestratorEnabled ||
-                !agent.attachedPipelines?.length
+                !agent.environments?.length
              }
              title={
                !config?.orchestratorEnabled
                  ? "Orchestrator not configured (Restate unreachable)"
-                  : !agent.attachedPipelines?.length
-                    ? "Attach a pipeline first"
+                  : !agent.environments?.length
+                    ? "Follow an environment first"
                    : busy === "trigger"
                      ? "Dispatching…"
-                      : "Trigger a run on every attached pipeline"
+                      : "Trigger a run across the followed environments' pipelines"
              }
            >
              <Play />
@@ -307,28 +321,28 @@ function AgentDetail() {
                <span className="text-sm text-muted-foreground">No runs yet.</span>
              )}
            </Field>
-            <Field label="Pipelines">
-              {attachedPipelineDetails.length === 0 ? (
+            <Field label="Environments">
+              {followedEnvs.length === 0 ? (
                <span className="text-sm text-muted-foreground">
-                  None attached.{" "}
-                  <Link href="/flows/new" className="underline hover:text-foreground">
-                    Create one
+                  None followed.{" "}
+                  <Link href="/environments" className="underline hover:text-foreground">
+                    Manage environments
                  </Link>
                  .
                </span>
              ) : (
                <span className="text-sm">
-                  {attachedPipelineDetails.length} attached
+                  {followedEnvs.map((e) => e.name).join(", ")}
                </span>
              )}
            </Field>
          </div>

-          {agent.attachedPipelines?.length ? (
+          {agent.environments?.length ? (
            <p className="text-sm text-muted-foreground">
              Pushes to{" "}
              <code className="font-mono text-xs">{agent.name}</code> route through
-              this agent&rsquo;s pipelines (matched by branch).
+              the pipelines of the followed environments (matched by branch).
            </p>
          ) : null}

@@ -430,58 +444,66 @@ function AgentDetail() {
          </CardContent>
        </Card>

-        {/* Pipelines ----------------------------------------------------- */}
+        {/* Environments -------------------------------------------------- */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0">
-            <CardTitle>Pipelines</CardTitle>
-            {attachable.length > 0 ? (
+            <CardTitle>Environments followed</CardTitle>
+            {followableEnvs.length > 0 ? (
              <Button
                size="sm"
                variant="outline"
-                onClick={() => setShowPipelinePicker((v) => !v)}
+                onClick={() => setShowEnvPicker((v) => !v)}
              >
                <Plus />
-                Add pipeline
+                Follow env
+              </Button>
+            ) : environments.length === 0 ? (
+              <Button size="sm" variant="ghost" asChild>
+                <Link href="/environments">Create one</Link>
              </Button>
            ) : (
              <Button size="sm" variant="ghost" disabled>
-                No more to add
+                Following all
              </Button>
            )}
          </CardHeader>
          <CardContent className="space-y-3">
-            {attachedPipelineDetails.length === 0 ? (
+            {followedEnvs.length === 0 ? (
              <p className="text-sm text-muted-foreground">
-                No pipelines attached. Click &ldquo;Add pipeline&rdquo; to bind one
-                (or create one in{" "}
-                <Link href="/flows/new" className="underline">
-                  /flows/new
+                Not following any environment. Follow one to dispatch its
+                pipelines for this agent. Manage envs on the{" "}
+                <Link href="/environments" className="underline">
+                  Environments page
                </Link>
-                ).
+                .
              </p>
            ) : (
              <ul className="space-y-1.5">
-                {attachedPipelineDetails.map((p) => (
+                {followedEnvs.map((e) => (
                  <li
-                    key={p.id}
+                    key={e.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"
+                        href="/environments"
+                        className="truncate text-sm font-medium font-mono hover:underline"
                      >
-                        {p.name || "Untitled"}
+                        {e.name}
                      </Link>
                      <div className="text-[11px] text-muted-foreground">
-                        {p.nodeCount} nodes · {formatDate(p.updatedAt)}
+                        {(e.pipelineIds ?? []).length === 0
+                          ? "no pipelines"
+                          : (e.pipelineIds ?? [])
+                              .map(pipelineName)
+                              .join(" → ")}
                      </div>
                    </div>
                    <Button
                      variant="ghost"
                      size="icon"
-                      aria-label="Detach pipeline"
-                      onClick={() => onDetachPipeline(p.id)}
+                      aria-label="Unfollow environment"
+                      onClick={() => onUnfollowEnv(e.name)}
                    >
                      <XCircle className="size-4" />
                    </Button>
@@ -490,23 +512,23 @@ function AgentDetail() {
              </ul>
            )}

-            {showPipelinePicker && attachable.length > 0 && (
+            {showEnvPicker && followableEnvs.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
+                  Follow an environment
                </div>
                <ul className="space-y-1">
-                  {attachable.map((p) => (
-                    <li key={p.id}>
+                  {followableEnvs.map((e) => (
+                    <li key={e.id}>
                      <button
                        type="button"
-                        onClick={() => onAttachPipeline(p.id)}
-                        disabled={busy === "attach"}
+                        onClick={() => onFollowEnv(e.name)}
+                        disabled={busy === "follow-env"}
                        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="truncate font-mono">{e.name}</span>
                        <span className="text-[11px] text-muted-foreground">
-                          {p.nodeCount} nodes
+                          {(e.pipelineIds ?? []).length} pipelines
                        </span>
                      </button>
                    </li>
@@ -48,7 +48,7 @@ export default function CredentialsPage() {
  }

  return (
-    <div className="mx-auto w-full max-w-4xl space-y-6 p-6">
+    <div className="w-full space-y-6 p-6">
      <div>
        <h1 className="text-3xl font-semibold tracking-tight">Credentials</h1>
        <p className="mt-1 text-sm text-muted-foreground">
@@ -0,0 +1,101 @@
+"use client";
+
+import { Suspense, useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { ArrowLeft, Layers } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { EnvironmentForm } from "@/components/environments/environment-form";
+import { api, type Environment } from "@/lib/api";
+
+export default function EditEnvironmentPage() {
+  return (
+    <Suspense fallback={<div className="p-6 text-sm text-muted-foreground">Loading…</div>}>
+      <EditEnvironment />
+    </Suspense>
+  );
+}
+
+function EditEnvironment() {
+  const router = useRouter();
+  const params = useSearchParams();
+  const name = params.get("name") ?? "";
+
+  const [env, setEnv] = useState<Environment | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!name) return;
+    api
+      .getEnvironment(name)
+      .then(setEnv)
+      .catch((err) => setError(err instanceof Error ? err.message : "load failed"));
+  }, [name]);
+
+  if (!name) {
+    return (
+      <div className="p-6 text-sm text-muted-foreground">
+        Missing <code>name</code> query param.
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-3xl space-y-6 p-6">
+      <Button variant="ghost" size="sm" asChild>
+        <Link href="/environments">
+          <ArrowLeft />
+          Back to environments
+        </Link>
+      </Button>
+
+      <div>
+        <div className="mb-1 flex items-center gap-2 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+          <Layers className="size-3.5" />
+          Edit environment
+        </div>
+        <h1 className="text-3xl font-semibold tracking-tight font-mono">{name}</h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Update the description. Pipelines and their order are managed on the
+          environments list. Name is immutable.
+        </p>
+      </div>
+
+      {error && (
+        <p className="rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive">
+          {error}
+        </p>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Configuration</CardTitle>
+          <CardDescription>Name + description.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {env === null ? (
+            <p className="text-sm text-muted-foreground">Loading…</p>
+          ) : (
+            <EnvironmentForm
+              initial={env}
+              onCancel={() => router.push("/environments")}
+              onSubmit={async (body) => {
+                await api.updateEnvironment(name, body);
+                router.push("/environments");
+              }}
+              onError={setError}
+            />
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
@@ -0,0 +1,71 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { ArrowLeft, Layers } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { EnvironmentForm } from "@/components/environments/environment-form";
+import { api } from "@/lib/api";
+
+export default function NewEnvironmentPage() {
+  const router = useRouter();
+  const [error, setError] = useState<string | null>(null);
+
+  return (
+    <div className="mx-auto w-full max-w-3xl space-y-6 p-6">
+      <Button variant="ghost" size="sm" asChild>
+        <Link href="/environments">
+          <ArrowLeft />
+          Back to environments
+        </Link>
+      </Button>
+
+      <div>
+        <div className="mb-1 flex items-center gap-2 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+          <Layers className="size-3.5" />
+          New environment
+        </div>
+        <h1 className="text-3xl font-semibold tracking-tight">New environment</h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          A global deploy stage. Add pipelines to it from the environments
+          list; agents follow this environment and run its pipelines.
+        </p>
+      </div>
+
+      {error && (
+        <p className="rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive">
+          {error}
+        </p>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Configuration</CardTitle>
+          <CardDescription>
+            Name is how this env is referenced. Description is free-text.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <EnvironmentForm
+            initial={null}
+            onCancel={() => router.push("/environments")}
+            onSubmit={async (body) => {
+              await api.createEnvironment(body);
+              router.push("/environments");
+            }}
+            onError={setError}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
@@ -1,122 +1,268 @@
 "use client";

-import { Layers, Lock, ScanFace, ShieldCheck } from "lucide-react";
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { ArrowDown, ArrowUp, Layers, Plus } from "lucide-react";

-// Static preview of the Environments concept. Not wired to storage yet —
-// this page is the contract we show clients before the runtime work
-// lands. When the storage / routing actually exists, replace the three
-// demo tiles with live env records from the API.
-
-const ENVS: { name: string; description: string; accent: string }[] = [
-  {
-    name: "DEV",
-    description:
-      "Auto-deploy on every push, smoke evals only, no approval gates.",
-    accent: "border-foreground/60",
-  },
-  {
-    name: "STAGING",
-    description:
-      "Full eval suite, optional approval, canary or progressive rollout.",
-    accent: "border-amber-400/60",
-  },
-  {
-    name: "PROD",
-    description:
-      "Strict policy gates, human approval, audit log, SLO-backed rollback.",
-    accent: "border-rose-400/60",
-  },
-];
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { api, type Environment, type FlowSummary } from "@/lib/api";

 export default function EnvironmentsPage() {
+  const [envs, setEnvs] = useState<Environment[] | null>(null);
+  const [pipelines, setPipelines] = useState<FlowSummary[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  async function refresh() {
+    setError(null);
+    try {
+      const [e, p] = await Promise.all([api.listEnvironments(), api.listFlows()]);
+      setEnvs(e);
+      setPipelines(p);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "load failed");
+    }
+  }
+
+  useEffect(() => {
+    refresh();
+  }, []);
+
+  async function handleDelete(name: string) {
+    if (!confirm(`Delete environment "${name}"? Agents following it will stop dispatching its pipelines.`)) return;
+    try {
+      await api.deleteEnvironment(name);
+      await refresh();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "delete failed");
+    }
+  }
+
+  const pipelineName = (id: string) =>
+    pipelines.find((p) => p.id === id)?.name ?? id;
+
  return (
-    <div className="mx-auto w-full max-w-6xl space-y-6 p-6">
-      <div>
-        <div className="mb-1 flex items-center gap-2 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
-          <Layers className="size-3.5" />
-          Environments
+    <div className="w-full space-y-6 p-6">
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <div className="mb-1 flex items-center gap-2 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+            <Layers className="size-3.5" />
+            Environments
+          </div>
+          <h1 className="text-3xl font-semibold tracking-tight">Environments</h1>
+          <p className="mt-1 max-w-3xl text-sm text-muted-foreground">
+            A deploy stage is a named, ordered list of pipelines — the
+            promotion sequence. Agents <em>follow</em> environments;
+            triggering an agent runs its followed envs&rsquo; pipelines (each
+            still gated by its Trigger node&rsquo;s branch).
+          </p>
        </div>
-        <h1 className="text-3xl font-semibold tracking-tight">Environments</h1>
-        <p className="mt-1 max-w-3xl text-sm text-muted-foreground">
-          Each environment owns its runtime target, credentials, secrets,
-          scaling, and approval policy. Pipelines reference envs by name;
-          promotion moves an artifact from one env&rsquo;s pipeline to the
-          next.
+        <Button size="sm" asChild>
+          <Link href="/environments/new">
+            <Plus />
+            New environment
+          </Link>
+        </Button>
+      </div>
+
+      {error && (
+        <p className="rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive">
+          {error}
        </p>
-      </div>
+      )}

-      <div className="rounded-lg border bg-card/40 p-5">
-        {/* Three env tiles */}
-        <div className="grid gap-4 md:grid-cols-3">
-          {ENVS.map((e) => (
-            <div
-              key={e.name}
-              className={`rounded-lg border-2 ${e.accent} bg-background/40 p-5`}
-            >
-              <div className="mb-2 flex items-start justify-between">
-                <span className="font-mono text-sm font-semibold tracking-wider">
-                  {e.name}
-                </span>
-                <span className="text-[11px] text-muted-foreground">tier</span>
+      {envs === null && <p className="text-sm text-muted-foreground">Loading…</p>}
+      {envs?.length === 0 && (
+        <p className="text-sm text-muted-foreground">
+          No environments yet. Create <code className="font-mono">dev</code>,{" "}
+          <code className="font-mono">staging</code>, and{" "}
+          <code className="font-mono">prod</code> to get started.
+        </p>
+      )}
+
+      <div className="space-y-4">
+        {envs?.map((env) => (
+          <Card key={env.id}>
+            <CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0">
+              <div>
+                <CardTitle className="font-mono">{env.name}</CardTitle>
+                {env.description && <CardDescription>{env.description}</CardDescription>}
              </div>
-              <p className="text-xs text-muted-foreground">{e.description}</p>
-            </div>
-          ))}
-        </div>
-
-        {/* Concept rows */}
-        <div className="mt-6 grid gap-5 border-t pt-5 md:grid-cols-3">
-          <ConceptRow
-            icon={ScanFace}
-            title="Runtime target"
-            body="K8s cluster, Bedrock AgentCore account, or Vertex Agent Engine project. Different per env."
-          />
-          <ConceptRow
-            icon={Lock}
-            title="Credentials"
-            body="Cloud creds + registry auth, sealed at rest. Resolved by pipelines at run time."
-          />
-          <ConceptRow
-            icon={ShieldCheck}
-            title="Approval policy"
-            body="Who can approve, by what method (UI / Slack / auto-policy / quorum), with timeout & escalation."
-          />
-        </div>
-
-        {/* Footer */}
-        <div className="mt-6 flex items-center justify-end border-t pt-5">
-          <button
-            type="button"
-            disabled
-            className="rounded-md border bg-foreground/95 px-3 py-1.5 text-xs font-medium text-background opacity-90 disabled:cursor-not-allowed"
-            title="Coming soon"
-          >
-            + New environment
-          </button>
-        </div>
+              <div className="flex shrink-0 gap-2">
+                <Button size="sm" variant="ghost" asChild>
+                  <Link href={`/environments/edit/?name=${encodeURIComponent(env.name)}`}>
+                    Edit
+                  </Link>
+                </Button>
+                <Button size="sm" variant="ghost" onClick={() => handleDelete(env.name)}>
+                  Delete
+                </Button>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <PipelinesInEnv
+                env={env}
+                allPipelines={pipelines}
+                pipelineName={pipelineName}
+                onChanged={refresh}
+                onError={setError}
+              />
+            </CardContent>
+          </Card>
+        ))}
      </div>
    </div>
  );
 }

-function ConceptRow({
-  icon: Icon,
-  title,
-  body,
+// ─── pipelines-in-env sub-component ─────────────────────────────────────────
+
+function PipelinesInEnv({
+  env,
+  allPipelines,
+  pipelineName,
+  onChanged,
+  onError,
 }: {
-  icon: React.ComponentType<{ className?: string }>;
-  title: string;
-  body: string;
+  env: Environment;
+  allPipelines: FlowSummary[];
+  pipelineName: (id: string) => string;
+  onChanged: () => void | Promise<void>;
+  onError: (m: string | null) => void;
 }) {
+  const [picking, setPicking] = useState(false);
+  const ids = env.pipelineIds ?? [];
+  const inEnv = new Set(ids);
+  const available = allPipelines.filter((p) => !inEnv.has(p.id));
+
+  async function reorder(next: string[]) {
+    try {
+      await api.reorderEnvPipelines(env.name, next);
+      await onChanged();
+    } catch (e) {
+      onError(e instanceof Error ? e.message : "reorder failed");
+    }
+  }
+  function move(i: number, dir: -1 | 1) {
+    const j = i + dir;
+    if (j < 0 || j >= ids.length) return;
+    const next = ids.slice();
+    [next[i], next[j]] = [next[j], next[i]];
+    reorder(next);
+  }
+
  return (
-    <div className="flex items-start gap-3">
-      <div className="grid size-9 shrink-0 place-items-center rounded-md border bg-muted/30">
-        <Icon className="size-4 text-muted-foreground" />
-      </div>
-      <div className="min-w-0">
-        <div className="text-sm font-medium">{title}</div>
-        <p className="mt-0.5 text-xs text-muted-foreground">{body}</p>
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <div className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+          Pipelines in this environment (promotion order)
+        </div>
+        <Button size="sm" variant="ghost" onClick={() => setPicking((v) => !v)}>
+          <Plus className="size-3.5" />
+          Add pipeline
+        </Button>
      </div>
+
+      {ids.length === 0 && (
+        <p className="text-sm text-muted-foreground">
+          No pipelines yet. Build one on the{" "}
+          <Link href="/" className="underline">Pipelines page</Link> and add it
+          here.
+        </p>
+      )}
+
+      {ids.length > 0 && (
+        <ul className="divide-y rounded-md border">
+          {ids.map((pid, i) => (
+            <li key={pid} className="flex items-center gap-2 px-3 py-2">
+              <span className="w-5 shrink-0 text-center text-xs text-muted-foreground">
+                {i + 1}
+              </span>
+              <Link
+                href={`/flows/edit/?id=${encodeURIComponent(pid)}`}
+                className="flex-1 truncate font-mono text-xs hover:underline"
+              >
+                {pipelineName(pid)}
+              </Link>
+              <div className="flex shrink-0 items-center gap-1">
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="size-7"
+                  disabled={i === 0}
+                  onClick={() => move(i, -1)}
+                  aria-label="Move up"
+                >
+                  <ArrowUp className="size-3.5" />
+                </Button>
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="size-7"
+                  disabled={i === ids.length - 1}
+                  onClick={() => move(i, 1)}
+                  aria-label="Move down"
+                >
+                  <ArrowDown className="size-3.5" />
+                </Button>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={async () => {
+                    try {
+                      await api.envRemovePipeline(env.name, pid);
+                      await onChanged();
+                    } catch (e) {
+                      onError(e instanceof Error ? e.message : "remove failed");
+                    }
+                  }}
+                >
+                  Remove
+                </Button>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {picking && (
+        <div className="rounded-md border bg-muted/20 p-2">
+          {available.length === 0 ? (
+            <p className="px-1 py-1 text-xs text-muted-foreground">
+              All pipelines are already in this environment.
+            </p>
+          ) : (
+            <ul className="divide-y">
+              {available.map((p) => (
+                <li key={p.id} className="flex items-center justify-between px-1 py-1.5">
+                  <span className="font-mono text-xs">{p.name}</span>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={async () => {
+                      try {
+                        await api.envAddPipeline(env.name, p.id);
+                        setPicking(false);
+                        await onChanged();
+                      } catch (e) {
+                        onError(e instanceof Error ? e.message : "add failed");
+                      }
+                    }}
+                  >
+                    Add
+                  </Button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
    </div>
  );
 }
@@ -9,7 +9,7 @@ import { Activity, ArrowLeftRight, Coins, Gauge, Radio } from "lucide-react";

 export default function GatewayPage() {
  return (
-    <div className="mx-auto w-full max-w-6xl space-y-6 p-6">
+    <div className="w-full space-y-6 p-6">
      <div>
        <div className="mb-1 flex items-center gap-2 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
          <Radio className="size-3.5" />