diff --git a/web/src/views/admin/AgentKindEditView.vue b/web/src/views/admin/AgentKindEditView.vue
new file mode 100644
index 0000000..a4e374b
--- /dev/null
+++ b/web/src/views/admin/AgentKindEditView.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import AppShell from '@/layouts/AppShell.vue'
+import AgentKindForm from '@/components/acp/AgentKindForm.vue'
+import { useAcpStore } from '@/stores/acp'
+import type { UpdateAgentKindReq } from '@/api/acp'
+
+const route = useRoute()
+const router = useRouter()
+const store = useAcpStore()
+
+const id = computed(() => (route.params.id as string | undefined) ?? null)
+const isEdit = computed(() => id.value !== null)
+
+const form = ref({
+  name: '',
+  display_name: '',
+  description: '',
+  binary_path: '',
+  args: [] as string[],
+  env: {} as Record<string, string>,
+  enabled: true,
+})
+const existingEnvKeys = ref<string[]>([])
+
+onMounted(async () => {
+  if (isEdit.value && id.value) {
+    const k = await store.getAgentKind(id.value)
+    form.value = {
+      name: k.name,
+      display_name: k.display_name,
+      description: k.description,
+      binary_path: k.binary_path,
+      args: [...k.args],
+      env: {}, // Edit mode: do not prefill values; user must replace entirely if they want to change.
+      enabled: k.enabled,
+    }
+    existingEnvKeys.value = [...k.env_keys]
+  }
+})
+
+async function submit() {
+  try {
+    if (isEdit.value && id.value) {
+      const req: UpdateAgentKindReq = {
+        display_name: form.value.display_name,
+        description: form.value.description,
+        binary_path: form.value.binary_path,
+        args: form.value.args,
+        enabled: form.value.enabled,
+      }
+      // Only send env if user actually entered some values; an empty map would
+      // wipe existing env on the backend (per service patch semantics).
+      if (Object.keys(form.value.env).length > 0) req.env = form.value.env
+      await store.updateAgentKind(id.value, req)
+    } else {
+      await store.createAgentKind({
+        name: form.value.name,
+        display_name: form.value.display_name,
+        description: form.value.description,
+        binary_path: form.value.binary_path,
+        args: form.value.args,
+        env: form.value.env,
+        enabled: form.value.enabled,
+      })
+    }
+    router.push('/admin/acp/agent-kinds')
+  } catch (e) {
+    alert(`Save failed: ${e instanceof Error ? e.message : 'unknown'}`)
+  }
+}
+</script>
+
+<template>
+  <AppShell>
+    <div class="p-6 max-w-2xl">
+      <h1 class="text-2xl font-semibold mb-4">
+        {{ isEdit ? 'Edit Agent Kind' : 'New Agent Kind' }}
+      </h1>
+      <AgentKindForm
+        v-model="form"
+        :is-edit="isEdit"
+        :existing-env-keys="existingEnvKeys"
+        @submit="submit"
+        @cancel="router.push('/admin/acp/agent-kinds')"
+      />
+    </div>
+  </AppShell>
+</template>