Show pending approvals on the device page (#609)

Pending HITL approvals only appeared on the home page. Add an
optional agentIP filter to HITLBar and render a scoped instance on
the device page so a device's outstanding approvals show up there
too. With no agentIP the bar behaves as before (all devices); the
home page is unchanged. Renders nothing when the device has no
pending approvals.

Author: piscisaureus

dashboard/src/components/DevicePage.tsx

@@ -8,6 +8,7 @@ import {
   type Integration,
 } from "../lib/api";
 import { fmtBytes } from "../lib/format";
+import { HITLBar } from "./HITLBar";
 import { IntegrationsCards } from "./IntegrationsCards";
 import { LiveRequests } from "./LiveRequests";
 import { DeviceIcon } from "./Logos";
@@ -205,6 +206,11 @@ export function DevicePage({
         </div>
       </section>
 
+      {/* pending approvals awaiting a decision for this device — same
+          cards as the home page, scoped to this device's agent IP.
+          Renders nothing when there are none. */}
+      <HITLBar agentIP={a.ip} />
+
       {/* agents (sessions) running on this device */}
       <SessionsTable sessions={a.sessions ?? []} />
 

dashboard/src/components/HITLBar.tsx

@@ -2,7 +2,10 @@ import { useEffect, useState } from "react";
 import { decideHITL, getHITLPending, type HITLPending, type HITLResolveResult } from "../lib/api";
 import { Button } from "./Button";
 
-export function HITLBar() {
+// agentIP, when set, scopes the bar to a single device's pending
+// approvals (used on the device page); unset shows every device's
+// (the home page).
+export function HITLBar({ agentIP }: { agentIP?: string } = {}) {
   const [pending, setPending] = useState<HITLPending[]>([]);
   const [justResolved, setJustResolved] = useState<HITLPending[]>([]);
   const [notice, setNotice] = useState("");
@@ -13,7 +16,7 @@ export function HITLBar() {
       try {
         const r = await getHITLPending();
         if (!cancelled) {
-          const incoming = r ?? [];
+          const incoming = (r ?? []).filter((p) => !agentIP || p.agent_ip === agentIP);
           // Detect >0 → 0 transition: briefly flash green "Approved" cards.
           setPending((prev) => {
             if (prev.length > 0 && incoming.length === 0) {
@@ -33,7 +36,7 @@ export function HITLBar() {
       cancelled = true;
       clearInterval(t);
     };
-  }, []);
+  }, [agentIP]);
 
   async function decide(id: string, allow: boolean, confirmMsg: string) {
     if (!confirm(confirmMsg)) return;