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.

web/app/environments/edit/page.tsx

@@ -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>
+  );
+}

web/app/environments/new/page.tsx

@@ -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>
+  );
+}

web/app/environments/page.tsx

@@ -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>
   );
 }