feat: decline pending action

web/app.js

@@ -299,7 +299,14 @@ function renderPending(actions) {
     const approve = document.createElement("button");
     approve.textContent = "Approve";
     approve.addEventListener("click", () => approveAction(action.id));
-    card.append(title, endpoint, payload, approve);
+    const decline = document.createElement("button");
+    decline.className = "decline-button";
+    decline.textContent = "Decline";
+    decline.addEventListener("click", () => declineAction(action.id));
+    const controls = document.createElement("div");
+    controls.className = "pending-controls";
+    controls.append(decline, approve);
+    card.append(title, endpoint, payload, controls);
     pendingEl.appendChild(card);
   }
 }
@@ -318,6 +325,24 @@ async function approveAction(id) {
   }
 }
 
+async function declineAction(id) {
+  statusEl.textContent = "Declining";
+  try {
+    const response = await fetch(`/api/decline/${id}`, { method: "POST" });
+    const result = await response.json();
+    if (result.error) {
+      addMessage("assistant warning-message", `Decline failed: ${result.error}`);
+    } else {
+      addMessage("assistant", `Declined pending action: ${result.pending_action?.label || id}`);
+    }
+    await refreshPending();
+  } catch (error) {
+    addMessage("assistant warning-message", `Decline failed: ${error.message}`);
+  } finally {
+    statusEl.textContent = "Ready";
+  }
+}
+
 async function refreshPending() {
   const response = await fetch("/api/pending-actions");
   const result = await response.json();

web/styles.css

@@ -447,11 +447,23 @@ pre {
   font-size: 12px;
 }
 
+.pending-controls {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
 .pending-card button {
   width: 100%;
   padding: 10px;
 }
 
+.decline-button {
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--muted);
+}
+
 @media (max-width: 860px) {
   .shell {
     grid-template-columns: 1fr;