Add project deletion and secret editing to dashboard

cloudflare-workers/api-edge/src/managed_agents.test.ts

@@ -588,6 +588,59 @@ describe("managed agents proxy", () => {
     expect(JSON.stringify(body)).not.toContain("private-account");
   });
 
+  it("allows organization admins to delete projects", async () => {
+    const fetchSpy = vi.fn(
+      async (_request: URL | RequestInfo, init?: RequestInit) => {
+        expect(init?.method).toBe("DELETE");
+        return new Response(null, { status: 204 });
+      },
+    );
+    vi.stubGlobal("fetch", fetchSpy);
+
+    const response = await proxyManagedAgents(
+      new Request(
+        "https://app.opencomputer.dev/api/managed-agents/projects/prj_test",
+        { method: "DELETE" },
+      ),
+      {
+        OC_MANAGED_AGENTS_SECRET: "test-secret",
+        MANAGED_AGENTS_API_URL: "https://managedagents.test",
+      },
+      { orgID: "org_test", userID: "user_test", role: "admin" },
+      "/api/managed-agents",
+    );
+
+    expect(response.status).toBe(204);
+    expect(fetchSpy).toHaveBeenCalledOnce();
+  });
+
+  it("does not allow organization members to delete projects", async () => {
+    const fetchSpy = vi.fn();
+    vi.stubGlobal("fetch", fetchSpy);
+
+    const response = await proxyManagedAgents(
+      new Request(
+        "https://app.opencomputer.dev/api/managed-agents/projects/prj_test",
+        { method: "DELETE" },
+      ),
+      {
+        OC_MANAGED_AGENTS_SECRET: "test-secret",
+        MANAGED_AGENTS_API_URL: "https://managedagents.test",
+      },
+      { orgID: "org_test", userID: "user_test", role: "member" },
+      "/api/managed-agents",
+    );
+
+    expect(response.status).toBe(403);
+    await expect(response.json()).resolves.toEqual({
+      error: {
+        code: "forbidden",
+        message: "Organization admin role is required to delete a project.",
+      },
+    });
+    expect(fetchSpy).not.toHaveBeenCalled();
+  });
+
   it("exposes public template provenance on a project overview", async () => {
     vi.stubGlobal(
       "fetch",

cloudflare-workers/api-edge/src/managed_agents.ts

@@ -1123,6 +1123,7 @@ function isAllowedManagedAgentsRoute(method: string, suffix: string): boolean {
     return true;
   }
   if (method === "GET" && /^\/projects\/[^/]+$/.test(suffix)) return true;
+  if (method === "DELETE" && /^\/projects\/[^/]+$/.test(suffix)) return true;
   if (method === "GET" && /^\/projects\/[^/]+\/source-archive$/.test(suffix)) {
     return true;
   }
@@ -1474,6 +1475,21 @@ export async function proxyManagedAgents(
       { status: 503 },
     );
   }
+  if (
+    request.method.toUpperCase() === "DELETE" &&
+    /^\/projects\/[^/]+$/.test(suffix) &&
+    caller.role !== "admin"
+  ) {
+    return Response.json(
+      {
+        error: {
+          code: "forbidden",
+          message: "Organization admin role is required to delete a project.",
+        },
+      },
+      { status: 403 },
+    );
+  }
   if (
     request.method.toUpperCase() === "POST" &&
     suffix === "/model-access/connections"

web/src/components/app-shell-nav.ts

@@ -12,6 +12,7 @@ import {
   Radio,
   Rocket,
   Send,
+  Settings2,
   Webhook,
   type LucideIcon,
 } from 'lucide-react'
@@ -92,6 +93,11 @@ export function managedAgentsNav(options: {
             label: 'BYOK',
             icon: BrainCircuit,
           },
+          {
+            to: `${projectPath}/settings`,
+            label: 'Settings',
+            icon: Settings2,
+          },
           {
             to: projectPath,
             label: 'Debug playground',

web/src/components/app-shell.test.ts

@@ -27,6 +27,7 @@ describe('managed agents navigation', () => {
       'Webhooks',
       'Secrets',
       'BYOK',
+      'Settings',
       'Debug playground',
     ])
     expect(nav[1]?.items[nav[1].items.length - 1]?.to).toBe(

web/src/managed-agents/Detail.tsx

@@ -1126,6 +1126,7 @@ export default function ManagedAgentDetail({
 
       {activeTab === 'secrets' && project ? (
         <ManagedProjectSecrets
+          key={`${project.project.id}:${environment}`}
           projectId={project.project.id}
           agents={project.project.agents}
           environment={environment}

web/src/managed-agents/Project.tsx

@@ -2,14 +2,16 @@ import { useQuery } from '@tanstack/react-query'
 import { Link, useLocation, useParams } from 'react-router-dom'
 import { FolderKanban, Loader2 } from 'lucide-react'
 import { EmptyState } from '@/components/empty-state'
+import { PageHeader } from '@/components/page-header'
 import { Panel } from '@/components/panel'
 import { Button } from '@/components/ui/button'
 import ManagedAgentDetail from './Detail'
 import { getManagedProject } from './api'
 import { selectedProjectAgentId } from './project-context'
+import { ManagedProjectSettings } from './ProjectSettings'
 
 export default function ProjectDetail() {
-  const { projectId = '', projectAgentId } = useParams()
+  const { projectId = '', projectAgentId, tab } = useParams()
   const location = useLocation()
   const project = useQuery({
     queryKey: ['managed-project', projectId],
@@ -42,6 +44,21 @@ export default function ProjectDetail() {
     )
   }
 
+  if (tab === 'settings') {
+    return (
+      <div className="space-y-5">
+        <PageHeader
+          title={project.data.project.name}
+          description={`${project.data.project.agents.length} ${project.data.project.agents.length === 1 ? 'agent' : 'agents'} · project settings`}
+        />
+        <ManagedProjectSettings
+          projectId={project.data.project.id}
+          projectName={project.data.project.name}
+        />
+      </div>
+    )
+  }
+
   const agentId = selectedProjectAgentId(
     projectAgentId
       ? `/projects/${encodeURIComponent(projectId)}/playground/${encodeURIComponent(projectAgentId)}`

web/src/managed-agents/ProjectSettings.test.ts

@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest'
+import { canConfirmProjectDeletion } from './project-settings'
+
+describe('canConfirmProjectDeletion', () => {
+  it('requires the exact project name', () => {
+    expect(canConfirmProjectDeletion('Incident Agent', 'Incident Agent')).toBe(
+      true,
+    )
+    expect(canConfirmProjectDeletion('incident agent', 'Incident Agent')).toBe(
+      false,
+    )
+    expect(canConfirmProjectDeletion('Incident Agent ', 'Incident Agent')).toBe(
+      false,
+    )
+  })
+})

web/src/managed-agents/ProjectSettings.tsx

@@ -0,0 +1,128 @@
+import { useRef, useState } from 'react'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useNavigate } from 'react-router-dom'
+import { Loader2, Trash2 } from 'lucide-react'
+import { notifyError, notifySuccess } from '@/lib/errors'
+import {
+  Panel,
+  PanelContent,
+  PanelDescription,
+  PanelHeader,
+  PanelTitle,
+} from '@/components/panel'
+import { Button } from '@/components/ui/button'
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { deleteManagedProject } from './api'
+import { canConfirmProjectDeletion } from './project-settings'
+
+export function ManagedProjectSettings({
+  projectId,
+  projectName,
+}: {
+  projectId: string
+  projectName: string
+}) {
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const [confirmation, setConfirmation] = useState('')
+  const confirmationInput = useRef<HTMLInputElement>(null)
+  const remove = useMutation({
+    mutationFn: () => deleteManagedProject(projectId),
+    onSuccess: () => {
+      queryClient.removeQueries({ queryKey: ['managed-project', projectId] })
+      void queryClient.invalidateQueries({ queryKey: ['managed-projects'] })
+      notifySuccess('Project deleted.')
+      void navigate('/', { replace: true })
+    },
+    onError: (error) => notifyError("Couldn't delete the project.", error),
+  })
+  const confirmed = canConfirmProjectDeletion(confirmation, projectName)
+
+  return (
+    <>
+      <Panel className="border-destructive/40">
+        <PanelHeader>
+          <div>
+            <PanelTitle>Delete project</PanelTitle>
+            <PanelDescription className="mt-1">
+              Permanently remove this project and its agents, deployments,
+              sessions, credentials, triggers, and environment configuration.
+            </PanelDescription>
+          </div>
+        </PanelHeader>
+        <PanelContent>
+          <Button
+            variant="destructive"
+            onClick={() => {
+              setConfirmation('')
+              setDialogOpen(true)
+              requestAnimationFrame(() => confirmationInput.current?.focus())
+            }}
+          >
+            <Trash2 /> Delete project
+          </Button>
+        </PanelContent>
+      </Panel>
+
+      <AlertDialog
+        open={dialogOpen}
+        onOpenChange={(open) => {
+          if (remove.isPending) return
+          setDialogOpen(open)
+          if (!open) setConfirmation('')
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete {projectName}?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This cannot be undone. Active sessions will end, project access
+              tokens will stop working, and linked local checkouts will need to
+              link or create a project before deploying again.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <div className="space-y-2">
+            <Label htmlFor="project-delete-confirmation">
+              Type <span className="font-mono">{projectName}</span> to confirm
+            </Label>
+            <Input
+              id="project-delete-confirmation"
+              ref={confirmationInput}
+              value={confirmation}
+              onChange={(event) => setConfirmation(event.target.value)}
+              autoComplete="off"
+            />
+          </div>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={remove.isPending}>
+              Cancel
+            </AlertDialogCancel>
+            <Button
+              variant="destructive"
+              disabled={!confirmed || remove.isPending}
+              onClick={() => remove.mutate()}
+            >
+              {remove.isPending ? (
+                <Loader2 className="animate-spin" aria-hidden />
+              ) : (
+                <Trash2 aria-hidden />
+              )}
+              Delete project
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}