feat: add policy deletion, improve dry run handling, and enhance policy designer UX

Add DELETE /policies/{policy_id} endpoint with audit logging, improve firewall apply to handle dry run mode without calling provider and track operation success separately from applied status, update Proxmox provider error message to clarify rule-to-VM mapping requirement, add dry run explanation text to FirewallPreview with conditional button labels, enhance Policies page with expanded DataTable columns showing source

frontend/src/pages/Policies.tsx

@@ -1,6 +1,6 @@
 import { FormEvent, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { GitBranch, Play, Plus } from "lucide-react";
+import { GitBranch, Play, Plus, Trash2 } from "lucide-react";
 
 import { api, Policy, Project, ServiceCatalogItem } from "../api/client";
 import { DataTable } from "../components/DataTable";
@@ -8,6 +8,19 @@ import { buttonClass, Field, inputClass, secondaryButtonClass, selectClass } fro
 import { Modal } from "../components/Modal";
 import { PageHeader } from "../components/PageHeader";
 
+function policyValue(policy: Policy, key: string) {
+  return String(policy.definition?.[key] ?? "");
+}
+
+function policyService(policy: Policy) {
+  const service = policy.definition?.service;
+  if (!service || typeof service !== "object") {
+    return "";
+  }
+  const value = service as { protocol?: unknown; ports?: unknown };
+  return `${String(value.protocol ?? "")}/${String(value.ports ?? "")}`;
+}
+
 export function Policies() {
   const queryClient = useQueryClient();
   const policies = useQuery({ queryKey: ["policies"], queryFn: () => api<Policy[]>("/policies") });
@@ -57,6 +70,10 @@ export function Policies() {
       queryClient.invalidateQueries({ queryKey: ["policies"] });
     },
   });
+  const remove = useMutation({
+    mutationFn: (policy: Policy) => api(`/policies/${policy.id}`, { method: "DELETE" }),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["policies"] }),
+  });
 
   async function submit(event: FormEvent) {
     event.preventDefault();
@@ -110,15 +127,31 @@ export function Policies() {
           </form>
         </Modal>
         <section className="space-y-4">
-          <DataTable rows={(policies.data ?? []) as unknown as Record<string, unknown>[]} columns={[{ key: "name", label: "Policy" }, { key: "version", label: "Version" }, { key: "enabled", label: "Enabled" }]} />
-          <div className="flex flex-wrap gap-2">
-            {(policies.data ?? []).map((policy) => (
-              <div key={policy.id} className="flex gap-2">
-                <button className={secondaryButtonClass} onClick={() => compile(policy)}><Play size={16} /> Compile {policy.name}</button>
-                <button className={secondaryButtonClass} onClick={() => firewallPreview(policy)}><Play size={16} /> Preview</button>
-              </div>
-            ))}
-          </div>
+          <DataTable
+            rows={(policies.data ?? []) as unknown as Record<string, unknown>[]}
+            columns={[
+              { key: "name", label: "Policy" },
+              { key: "source", label: "Source", render: (row) => policyValue(row as unknown as Policy, "source") },
+              { key: "destination", label: "Destination", render: (row) => policyValue(row as unknown as Policy, "destination") },
+              { key: "service", label: "Service", render: (row) => policyService(row as unknown as Policy) },
+              { key: "enforcement_mode", label: "Mode" },
+              { key: "version", label: "Version" },
+              {
+                key: "actions",
+                label: "Actions",
+                render: (row) => {
+                  const policy = row as unknown as Policy;
+                  return (
+                    <div className="flex flex-wrap gap-2">
+                      <button className={secondaryButtonClass} onClick={() => compile(policy)}><Play size={16} /> Compile</button>
+                      <button className={secondaryButtonClass} onClick={() => firewallPreview(policy)}><Play size={16} /> Preview</button>
+                      <button className={secondaryButtonClass} disabled={remove.isPending} onClick={() => remove.mutate(policy)}><Trash2 size={16} /> Delete</button>
+                    </div>
+                  );
+                },
+              },
+            ]}
+          />
           <pre className="min-h-40 overflow-auto rounded-md border border-border bg-panel p-3 text-xs">{preview || "No policy output yet."}</pre>
         </section>
       </div>