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/agents/view/page.tsx

@@ -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>

web/app/credentials/page.tsx

@@ -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">

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

web/app/gateway/page.tsx

@@ -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" />

web/components/canvas/node-form.tsx

@@ -486,6 +486,9 @@ function ApprovalForm({ node, onChange }: NodeFormProps) {
   const reason = getString(node, "reason", "Manual review");
   const reviewers = getStringArray(node, "reviewers");
   const text = reviewers.join("\n");
+  const method = getString(node, "method", "");
+  const minApprovers = getNumber(node, "minApprovers", 0);
+  const timeout = getNumber(node, "timeoutSeconds", 0);
 
   function commit(t: string) {
     const parsed = t.split("\n").map((s) => s.trim()).filter(Boolean);
@@ -518,6 +521,58 @@ function ApprovalForm({ node, onChange }: NodeFormProps) {
           placeholder="user@example.com"
         />
       </div>
+
+      <div className="space-y-1.5">
+        <Label>Method</Label>
+        <select
+          value={method}
+          onChange={(e) => onChange(setParam(node, "method", e.target.value))}
+          className="h-9 w-full rounded-md border border-input bg-transparent px-2 text-sm"
+        >
+          <option value="">UI (human) — default</option>
+          <option value="ui">UI (human)</option>
+          <option value="quorum">Quorum (N approvers)</option>
+          <option value="auto">Auto (don&rsquo;t pause)</option>
+        </select>
+        <p className="text-[11px] text-muted-foreground">
+          <strong>auto</strong> emits straight to the approved output without
+          pausing. Quorum N&gt;1 enforcement is surfaced to reviewers but not
+          yet hard-enforced.
+        </p>
+      </div>
+
+      {method === "quorum" && (
+        <div className="space-y-1.5">
+          <Label htmlFor="a-minappr">Min approvers (override)</Label>
+          <Input
+            id="a-minappr"
+            type="number"
+            value={minApprovers}
+            onChange={(e) =>
+              onChange(setParam(node, "minApprovers", Number(e.target.value)))
+            }
+            placeholder="(inherit)"
+            className="font-mono text-xs"
+          />
+        </div>
+      )}
+
+      <div className="space-y-1.5">
+        <Label htmlFor="a-timeout">Timeout seconds (override, 0=inherit)</Label>
+        <Input
+          id="a-timeout"
+          type="number"
+          value={timeout}
+          onChange={(e) =>
+            onChange(setParam(node, "timeoutSeconds", Number(e.target.value)))
+          }
+          className="font-mono text-xs"
+        />
+        <p className="text-[11px] text-muted-foreground">
+          When set, the run is auto-rejected after this long (routed to the
+          rejected output).
+        </p>
+      </div>
     </div>
   );
 }
@@ -1127,8 +1182,8 @@ function TargetRow({
 }
 
 function DeployForm({ node, onChange }: NodeFormProps) {
-  const target = getString(node, "target", "agentcore");
-  const credentialName = getString(node, "credentialName", "aws");
+  const target = getString(node, "target", "");
+  const credentialName = getString(node, "credentialName", "");
   const runtimeName = getString(node, "runtimeName", "");
   const image = getString(node, "image", "");
   const timeout = getNumber(node, "timeoutSeconds", 600);
@@ -1156,6 +1211,7 @@ function DeployForm({ node, onChange }: NodeFormProps) {
           onChange={(e) => onChange(setParam(node, "target", e.target.value))}
           className="h-9 w-full rounded-md border border-input bg-transparent px-2 text-sm"
         >
+          <option value="">AWS Bedrock AgentCore — default</option>
           <option value="agentcore">AWS Bedrock AgentCore</option>
           <option value="kubernetes" disabled>
             Kubernetes (coming soon)
@@ -1165,9 +1221,8 @@ function DeployForm({ node, onChange }: NodeFormProps) {
           </option>
         </select>
         <p className="text-[11px] text-muted-foreground">
-          AgentCore deploys the upstream Push image. AWS region + account +
-          cross-account role come from the named credential below. The deploy
-          summary will include the public invoke URL.
+          AgentCore deploys the upstream Push image; the deploy summary
+          includes the public invoke URL.
         </p>
       </div>
 
@@ -1183,8 +1238,8 @@ function DeployForm({ node, onChange }: NodeFormProps) {
           className="font-mono text-xs"
         />
         <p className="text-[11px] text-muted-foreground">
-          Must match a credential of type <code>aws</code> on the Agent
-          (Credentials section on the agent page).
+          Defaults to <code>aws</code>. Must match a credential of type{" "}
+          <code>aws</code> in the global pool or an agent override.
         </p>
       </div>
 

web/components/environments/environment-form.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { Environment, EnvironmentBody } from "@/lib/api";
+
+// Shared environment create/edit form — name + description only. Per-deploy
+// config (credential / runtime target / approval method) lives on the nodes,
+// not the environment. Pipelines are managed on the environments list page.
+//
+// Used by /environments/new and /environments/edit as the full-page body.
+
+export type EnvironmentFormProps = {
+  initial: Environment | null;
+  onSubmit: (body: EnvironmentBody) => Promise<void>;
+  onCancel: () => void;
+  onError: (m: string | null) => void;
+};
+
+export function EnvironmentForm({ initial, onSubmit, onCancel, onError }: EnvironmentFormProps) {
+  const isEdit = !!initial;
+  const [name, setName] = useState(initial?.name ?? "");
+  const [description, setDescription] = useState(initial?.description ?? "");
+  const [saving, setSaving] = useState(false);
+
+  async function handleSave() {
+    onError(null);
+    setSaving(true);
+    try {
+      const trimmed = name.trim();
+      if (!trimmed) throw new Error("name is required");
+      await onSubmit({ name: trimmed, description: description.trim() || undefined });
+    } catch (e) {
+      onError(e instanceof Error ? e.message : "save failed");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="space-y-5">
+      <div className="space-y-1.5">
+        <Label htmlFor="env-name">Name</Label>
+        <Input
+          id="env-name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="dev"
+          disabled={isEdit}
+          className="font-mono"
+        />
+        {isEdit && (
+          <p className="text-[11px] text-muted-foreground">
+            Name is immutable. Delete + re-create to rename.
+          </p>
+        )}
+      </div>
+
+      <div className="space-y-1.5">
+        <Label htmlFor="env-desc">Description</Label>
+        <Input
+          id="env-desc"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="Auto-deploy on push, smoke evals only"
+        />
+        <p className="text-[11px] text-muted-foreground">
+          Pipelines and their order are managed on the environments list.
+        </p>
+      </div>
+
+      <div className="flex justify-end gap-2">
+        <Button variant="ghost" onClick={onCancel} disabled={saving}>
+          Cancel
+        </Button>
+        <Button onClick={handleSave} disabled={saving}>
+          {saving ? "Saving…" : isEdit ? "Save changes" : "Create environment"}
+        </Button>
+      </div>
+    </div>
+  );
+}

web/lib/api.ts

@@ -54,6 +54,24 @@ export type CredentialBody = {
   kv?: Record<string, string>;
 };
 
+// An Environment is a sequencing container: a name + description + an
+// ordered list of pipeline IDs (the promotion sequence, reorderable).
+// Per-deploy config (credential / runtime target / approval method)
+// lives on the nodes, not the env.
+export type Environment = {
+  id: string;
+  name: string;
+  description?: string;
+  pipelineIds?: string[];
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type EnvironmentBody = {
+  name: string;
+  description?: string;
+};
+
 export type Agent = {
   id: string;
   name: string;
@@ -66,7 +84,7 @@ export type Agent = {
   webhookInstalledAt?: string;
   authStatus?: AuthStatus;
   authCheckedAt?: string;
-  attachedPipelines?: string[];
+  environments?: string[];
   credentials?: PublicCredential[];
   createdAt: string;
   updatedAt: string;
@@ -196,13 +214,13 @@ export const api = {
   uninstallAgentWebhook: (id: string) =>
     fetch(`${base}/api/agents/${id}/webhook`, { method: "DELETE" }).then(handle<Agent>),
 
-  attachPipeline: (id: string, pipelineId: string) =>
-    fetch(`${base}/api/agents/${id}/pipelines/${pipelineId}`, {
+  agentFollowEnv: (id: string, envName: string) =>
+    fetch(`${base}/api/agents/${id}/environments/${encodeURIComponent(envName)}`, {
       method: "POST",
     }).then(handle<Agent>),
 
-  detachPipeline: (id: string, pipelineId: string) =>
-    fetch(`${base}/api/agents/${id}/pipelines/${pipelineId}`, {
+  agentUnfollowEnv: (id: string, envName: string) =>
+    fetch(`${base}/api/agents/${id}/environments/${encodeURIComponent(envName)}`, {
       method: "DELETE",
     }).then(handle<void>),
 
@@ -210,10 +228,60 @@ export const api = {
     fetch(`${base}/api/agents/${id}/trigger`, { method: "POST" }).then(
       handle<{
         executionIds: string[];
-        failures?: { pipelineId: string; reason: string; error?: string }[];
+        failures?: {
+          environment?: string;
+          pipelineId?: string;
+          reason: string;
+          error?: string;
+        }[];
       }>
     ),
 
+  // ── Environments ─────────────────────────────────────────────────────
+  listEnvironments: () =>
+    fetch(`${base}/api/environments`).then(handle<Environment[]>),
+
+  getEnvironment: (name: string) =>
+    fetch(`${base}/api/environments/${encodeURIComponent(name)}`).then(
+      handle<Environment>
+    ),
+
+  createEnvironment: (body: EnvironmentBody) =>
+    fetch(`${base}/api/environments`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    }).then(handle<Environment>),
+
+  updateEnvironment: (name: string, body: EnvironmentBody) =>
+    fetch(`${base}/api/environments/${encodeURIComponent(name)}`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    }).then(handle<Environment>),
+
+  deleteEnvironment: (name: string) =>
+    fetch(`${base}/api/environments/${encodeURIComponent(name)}`, {
+      method: "DELETE",
+    }).then(handle<void>),
+
+  envAddPipeline: (envName: string, pipelineId: string) =>
+    fetch(`${base}/api/environments/${encodeURIComponent(envName)}/pipelines/${pipelineId}`, {
+      method: "POST",
+    }).then(handle<Environment>),
+
+  envRemovePipeline: (envName: string, pipelineId: string) =>
+    fetch(`${base}/api/environments/${encodeURIComponent(envName)}/pipelines/${pipelineId}`, {
+      method: "DELETE",
+    }).then(handle<void>),
+
+  reorderEnvPipelines: (envName: string, pipelineIds: string[]) =>
+    fetch(`${base}/api/environments/${encodeURIComponent(envName)}/pipelines`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ pipelineIds }),
+    }).then(handle<Environment>),
+
   listCredentials: (agentId: string) =>
     fetch(`${base}/api/agents/${agentId}/credentials`).then(
       handle<PublicCredential[]>

web/lib/node-catalog.ts

@@ -216,8 +216,8 @@ export const CATALOG: CatalogEntry[] = [
     color: "bg-rose-500",
     outputs: 1,
     defaults: {
-      target: "agentcore",
-      credentialName: "aws",
+      target: "",
+      credentialName: "",
       runtimeName: "",
       image: "",
       envVars: {},