diff --git a/ui/src/pages/Invocations.tsx b/ui/src/pages/Invocations.tsx
index 1eaf56c..05b3d70 100644
--- a/ui/src/pages/Invocations.tsx
+++ b/ui/src/pages/Invocations.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable react/jsx-no-bind */
 import React, { useCallback, useMemo, useState } from "react";
-import ResizablePanels from "../components/ResizablePanels";
 import {
   Badge,
   Box,
@@ -12,7 +11,6 @@ import {
   Flex,
   FormControl,
   FormLabel,
-  Heading,
   HStack,
   Icon,
   IconButton,
@@ -35,6 +33,7 @@ import {
   Tbody,
   Td,
   Text,
+  type TextProps,
   Textarea,
   Th,
   Thead,
@@ -45,6 +44,7 @@ import {
   AlertDescription,
   AlertIcon,
   useToast,
+  Divider,
 } from "@chakra-ui/react";
 import { Select } from "chakra-react-select";
 import {
@@ -138,6 +138,18 @@ const loadPendingInvocations = async (): Promise<Invocation[]> => {
   }
 };
 
+const Header: React.FC<TextProps> = ({ children, ...props }) => (
+  <Text
+    fontSize="sm"
+    fontWeight="semibold"
+    textTransform="uppercase"
+    color="neutral.600"
+    letterSpacing="wide"
+    {...props}>
+    {children}
+  </Text>
+);
+
 const EventRow: React.FC<{ event: InvocationEvent }> = ({ event }) => {
   const [showDetails, setShowDetails] = useState(false);
   const hasData = event.data != null;
@@ -276,7 +288,10 @@ const Invocations: React.FC = () => {
       }
       for (const binding of agent.claude_managed_agents ?? []) {
         if (!map.has(binding.claude_agent_id)) {
-          map.set(binding.claude_agent_id, { cuid: agent.cuid, name: agent.name });
+          map.set(binding.claude_agent_id, {
+            cuid: agent.cuid,
+            name: agent.name,
+          });
         }
       }
     }
@@ -285,12 +300,11 @@ const Invocations: React.FC = () => {
 
   const resolvedSelectedId = useMemo(() => {
     if (detailClosed) return null;
-    if (items.length === 0) return null;
-    if (!selectedId) return items[0].invocation_id;
+    if (!selectedId) return null;
     const stillSelected = items.some(
       (item) => item.invocation_id === selectedId,
     );
-    return stillSelected ? selectedId : items[0].invocation_id;
+    return stillSelected ? selectedId : null;
   }, [detailClosed, items, selectedId]);
 
   const { data: detail, isLoading: detailLoading } =
@@ -380,6 +394,30 @@ const Invocations: React.FC = () => {
     setSelectedId(null);
   };
 
+  const selectInvocation = (inv: Invocation) => {
+    setDetailClosed(false);
+    setSelectedId(inv.invocation_id);
+    if (resolvedSelectedId !== inv.invocation_id) {
+      setShowDenyInput(false);
+      setShowArgsJson(false);
+      setDenyMessage("");
+      resetRuleForm(inv.server_name, inv.tool_name);
+      resetCreateRuleForm(inv.server_name, inv.tool_name);
+    }
+  };
+
+  const selectedIndex = items.findIndex(
+    (item) => item.invocation_id === resolvedSelectedId,
+  );
+  const hasPrev = selectedIndex > 0;
+  const hasNext = selectedIndex >= 0 && selectedIndex < items.length - 1;
+
+  const handleNavigate = (direction: -1 | 1) => {
+    if (selectedIndex === -1) return;
+    const nextInvocation = items[selectedIndex + direction];
+    if (nextInvocation) selectInvocation(nextInvocation);
+  };
+
   const handleClearInvocations = () => {
     if (items.length === 0) return;
     setClearedInvocationIds((ids) => {
@@ -522,1109 +560,1034 @@ const Invocations: React.FC = () => {
         borderRadius="md"
         overflow="hidden"
         minH={0}>
-        <ResizablePanels
-          initialSplit={0.7}
-          minLeft={260}
-          minRight={320}
-          left={
-            <Box
-              display="flex"
-              flexDirection="column"
-              overflow="hidden"
-              h="full">
-              <Box p={3} borderBottomWidth={1} borderColor="border.base">
-                <Flex justify="flex-end" gap={2}>
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={handleClearInvocations}
-                    isDisabled={items.length === 0}
-                    data-testid="invocations-clear-button">
-                    Clear
-                  </Button>
-                  {showFilters ? (
-                    <CloseButton
+        <Box display="flex" flexDirection="column" overflow="hidden" h="full">
+          <Box p={3} borderBottomWidth={1} borderColor="border.base">
+            <Flex justify="flex-end" gap={2}>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={handleClearInvocations}
+                isDisabled={items.length === 0}
+                data-testid="invocations-clear-button">
+                Clear
+              </Button>
+              {showFilters ? (
+                <CloseButton
+                  size="sm"
+                  onClick={() => setShowFilters(false)}
+                  aria-label="Close filters"
+                  title="Close filters"
+                  data-testid="invocations-filter-toggle"
+                />
+              ) : (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => setShowFilters(true)}
+                  data-testid="invocations-filter-toggle">
+                  Filter
+                </Button>
+              )}
+            </Flex>
+            <Collapse in={showFilters} animateOpacity>
+              <VStack gap={2} align="stretch" mt={3}>
+                <HStack gap={2} align="end">
+                  <FormControl size="sm">
+                    <FormLabel fontSize="xs" mb={1}>
+                      Server
+                    </FormLabel>
+                    <Input
                       size="sm"
-                      onClick={() => setShowFilters(false)}
-                      aria-label="Close filters"
-                      title="Close filters"
-                      data-testid="invocations-filter-toggle"
+                      placeholder="Any"
+                      value={draftFilters.server}
+                      onChange={(e) =>
+                        setDraftFilters((f) => ({
+                          ...f,
+                          server: e.target.value,
+                        }))
+                      }
                     />
-                  ) : (
-                    <Button
+                  </FormControl>
+                  <FormControl size="sm">
+                    <FormLabel fontSize="xs" mb={1}>
+                      Tool
+                    </FormLabel>
+                    <Input
                       size="sm"
-                      variant="outline"
-                      onClick={() => setShowFilters(true)}
-                      data-testid="invocations-filter-toggle">
-                      Filter
-                    </Button>
-                  )}
-                </Flex>
-                <Collapse in={showFilters} animateOpacity>
-                  <VStack gap={2} align="stretch" mt={3}>
-                    <HStack gap={2} align="end">
-                      <FormControl size="sm">
-                        <FormLabel fontSize="xs" mb={1}>
-                          Server
-                        </FormLabel>
-                        <Input
-                          size="sm"
-                          placeholder="Any"
-                          value={draftFilters.server}
-                          onChange={(e) =>
-                            setDraftFilters((f) => ({
-                              ...f,
-                              server: e.target.value,
-                            }))
-                          }
-                        />
-                      </FormControl>
-                      <FormControl size="sm">
-                        <FormLabel fontSize="xs" mb={1}>
-                          Tool
-                        </FormLabel>
-                        <Input
-                          size="sm"
-                          placeholder="Any"
-                          value={draftFilters.tool}
-                          onChange={(e) =>
-                            setDraftFilters((f) => ({
-                              ...f,
-                              tool: e.target.value,
-                            }))
-                          }
-                        />
-                      </FormControl>
-                      <FormControl size="sm">
-                        <FormLabel fontSize="xs" mb={1}>
-                          Agent
-                        </FormLabel>
-                        <Input
-                          size="sm"
-                          placeholder="e.g. claude-code"
-                          value={draftFilters.client_name}
-                          onChange={(e) =>
-                            setDraftFilters((f) => ({
-                              ...f,
-                              client_name: e.target.value,
-                            }))
-                          }
-                        />
-                      </FormControl>
-                    </HStack>
-                    <HStack gap={2} align="end">
-                      <FormControl size="sm" flex={1}>
-                        <FormLabel fontSize="xs" mb={1}>
-                          Status
-                        </FormLabel>
-                        <Select
-                          isClearable
-                          options={STATUS_OPTIONS}
-                          placeholder="Any"
-                          size="sm"
-                          menuPortalTarget={document.body}
-                          menuPosition="fixed"
-                          value={
-                            STATUS_OPTIONS.find(
-                              (o) => o.value === draftFilters.status,
-                            ) ?? null
-                          }
-                          onChange={(option) =>
-                            setDraftFilters((f) => ({
-                              ...f,
-                              status: option?.value ?? "",
-                            }))
-                          }
-                        />
-                      </FormControl>
-                      <Button
-                        size="sm"
-                        variant="primary"
-                        onClick={handleApply}
-                        data-testid="invocations-apply-filter-button">
-                        Apply Filter
-                      </Button>
-                    </HStack>
-                  </VStack>
-                </Collapse>
-              </Box>
+                      placeholder="Any"
+                      value={draftFilters.tool}
+                      onChange={(e) =>
+                        setDraftFilters((f) => ({
+                          ...f,
+                          tool: e.target.value,
+                        }))
+                      }
+                    />
+                  </FormControl>
+                  <FormControl size="sm">
+                    <FormLabel fontSize="xs" mb={1}>
+                      Agent
+                    </FormLabel>
+                    <Input
+                      size="sm"
+                      placeholder="e.g. claude-code"
+                      value={draftFilters.client_name}
+                      onChange={(e) =>
+                        setDraftFilters((f) => ({
+                          ...f,
+                          client_name: e.target.value,
+                        }))
+                      }
+                    />
+                  </FormControl>
+                </HStack>
+                <HStack gap={2} align="end">
+                  <FormControl size="sm" flex={1}>
+                    <FormLabel fontSize="xs" mb={1}>
+                      Status
+                    </FormLabel>
+                    <Select
+                      isClearable
+                      options={STATUS_OPTIONS}
+                      placeholder="Any"
+                      size="sm"
+                      menuPortalTarget={document.body}
+                      menuPosition="fixed"
+                      value={
+                        STATUS_OPTIONS.find(
+                          (o) => o.value === draftFilters.status,
+                        ) ?? null
+                      }
+                      onChange={(option) =>
+                        setDraftFilters((f) => ({
+                          ...f,
+                          status: option?.value ?? "",
+                        }))
+                      }
+                    />
+                  </FormControl>
+                  <Button
+                    size="sm"
+                    variant="primary"
+                    onClick={handleApply}
+                    data-testid="invocations-apply-filter-button">
+                    Apply Filter
+                  </Button>
+                </HStack>
+              </VStack>
+            </Collapse>
+          </Box>
 
-              <Box flex={1} overflow="auto">
-                {isLoading ? (
-                  <HStack justify="center" py={8}>
-                    <Spinner size="sm" color="brand.base" />
-                  </HStack>
-                ) : isError ? (
-                  <Text p={4} color="text.error" fontSize="sm">
-                    Failed to load invocations.
-                  </Text>
-                ) : items.length === 0 ? (
-                  <Text p={4} color="text.subtle" fontSize="sm">
-                    {hasClearedLoadedInvocations
-                      ? "Cleared. New invocations will appear here."
-                      : "No invocations match the current filters."}
-                  </Text>
-                ) : (
-                  <Table size="sm" variant="simple">
-                    <Thead
-                      position="sticky"
-                      top={0}
-                      bg="background.table.header"
-                      zIndex={1}>
-                      <Tr>
-                        <Th>Agent</Th>
-                        <Th>Server</Th>
-                        <Th>Tool</Th>
-                        <Th>Agent Record</Th>
-                        <Th>Status</Th>
-                        <Th>Decided By</Th>
-                        <Th>Submitted</Th>
-                      </Tr>
-                    </Thead>
-                    <Tbody>
-                      {items.map((inv) => (
-                        <Tr
-                          key={inv.invocation_id}
-                          cursor="pointer"
-                          sx={{
-                            "&, &:nth-of-type(odd), &:nth-of-type(even)": {
-                              bg:
-                                resolvedSelectedId === inv.invocation_id
-                                  ? "background.table.row.selected"
-                                  : undefined,
-                            },
-                            "&:hover, &:nth-of-type(odd):hover, &:nth-of-type(even):hover":
-                              {
-                                bg:
-                                  resolvedSelectedId === inv.invocation_id
-                                    ? "background.table.row.selected"
-                                    : "background.table.row.hover",
-                              },
-                          }}
-                          onClick={() => {
-                            setDetailClosed(false);
-                            setSelectedId(inv.invocation_id);
-                            if (resolvedSelectedId !== inv.invocation_id) {
-                              setShowDenyInput(false);
-                              setShowArgsJson(false);
-                              setDenyMessage("");
-                              resetRuleForm(inv.server_name, inv.tool_name);
-                              resetCreateRuleForm(
-                                inv.server_name,
-                                inv.tool_name,
-                              );
-                            }
-                          }}>
-                          <Td
-                            borderLeft="4px solid"
-                            borderLeftColor={
+          <Box flex={1} overflow="auto">
+            {isLoading ? (
+              <HStack justify="center" py={8}>
+                <Spinner size="sm" color="brand.base" />
+              </HStack>
+            ) : isError ? (
+              <Text p={4} color="text.error" fontSize="sm">
+                Failed to load invocations.
+              </Text>
+            ) : items.length === 0 ? (
+              <Text p={4} color="text.subtle" fontSize="sm">
+                {hasClearedLoadedInvocations
+                  ? "Cleared. New invocations will appear here."
+                  : "No invocations match the current filters."}
+              </Text>
+            ) : (
+              <Table size="sm" variant="simple">
+                <Thead
+                  position="sticky"
+                  top={0}
+                  bg="background.table.header"
+                  zIndex={1}>
+                  <Tr>
+                    <Th>Agent</Th>
+                    <Th>Server</Th>
+                    <Th>Tool</Th>
+                    <Th>Agent Record</Th>
+                    <Th>Status</Th>
+                    <Th>Decided By</Th>
+                    <Th>Submitted</Th>
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {items.map((inv) => (
+                    <Tr
+                      key={inv.invocation_id}
+                      cursor="pointer"
+                      sx={{
+                        "&, &:nth-of-type(odd), &:nth-of-type(even)": {
+                          bg:
+                            resolvedSelectedId === inv.invocation_id
+                              ? "background.table.row.selected"
+                              : undefined,
+                        },
+                        "&:hover, &:nth-of-type(odd):hover, &:nth-of-type(even):hover":
+                          {
+                            bg:
                               resolvedSelectedId === inv.invocation_id
-                                ? "brand.base"
-                                : "transparent"
-                            }
-                            pl={
-                              resolvedSelectedId === inv.invocation_id ? 2 : 3
-                            }>
-                            {(() => {
-                              const name = inv.agent_client_name ?? "";
-                              const version = inv.agent_client_version ?? "";
-                              const agentID = inv.agent_id ?? "";
-                              const tooltipLines = [
-                                version ? `version ${version}` : null,
-                                agentID ? `agent_id ${agentID}` : null,
-                              ].filter(Boolean);
-                              const label = name
-                                ? name
-                                : detectAgentKind(name) === "unknown"
-                                  ? "Unknown"
-                                  : "—";
-                              return (
-                                <Tooltip
-                                  hasArrow
-                                  isDisabled={tooltipLines.length === 0}
-                                  label={tooltipLines.join("\n")}
-                                  whiteSpace="pre-line"
-                                  placement="top-start"
-                                  openDelay={300}>
-                                  <HStack gap={2} align="center">
-                                    <AgentIcon name={name} size={20} />
-                                    <Text fontSize="xs" color="text.base">
-                                      {label}
-                                    </Text>
-                                  </HStack>
-                                </Tooltip>
-                              );
-                            })()}
-                          </Td>
-                          <Td>
-                            <Text fontSize="xs" color="text.subtle">
-                              {inv.server_name || "none"}
-                            </Text>
-                          </Td>
-                          <Td>
-                            <Text fontSize="xs" color="text.subtle">
-                              {inv.tool_name || "—"}
-                            </Text>
-                          </Td>
-                          <Td>
-                            {(() => {
-                              const agentID = inv.agent_id ?? "";
-                              if (!agentID) {
-                                return (
-                                  <Text fontSize="xs" color="text.subtle">
-                                    —
-                                  </Text>
-                                );
-                              }
-                              const record = agentByAgentID.get(agentID);
-                              if (record) {
-                                return (
-                                  <Badge
-                                    colorScheme="gray"
-                                    fontSize="2xs"
-                                    title={`agent_id: ${agentID}`}>
-                                    {record.name}
-                                  </Badge>
-                                );
-                              }
-                              return (
-                                <Badge
-                                  colorScheme="gray"
-                                  fontSize="2xs"
-                                  title={`agent_id: ${agentID} (no matching agent record)`}>
-                                  Unassociated
-                                </Badge>
-                              );
-                            })()}
-                          </Td>
-                          <Td>
-                            {(() => {
-                              const statusColor =
-                                STATUS_COLOR[inv.status] ?? "gray";
-                              return (
-                                <Tag
-                                  colorScheme={statusColor}
-                                  size="sm"
-                                  textTransform="capitalize">
-                                  <Box
-                                    as="span"
-                                    boxSize="8px"
-                                    borderRadius="full"
-                                    bg={`${statusColor}.500`}
-                                    mr={1.5}
-                                  />
-                                  <Box as="span" mb="1px">
-                                    {STATUS_LABEL[inv.status] ?? inv.status}
-                                  </Box>
-                                </Tag>
-                              );
-                            })()}
-                          </Td>
-                          <Td>
-                            <HStack gap={1}>
-                              {getDisposition(inv).map((d) =>
-                                d.label !== "—" ? (
-                                  <Badge
-                                    key={d.label}
-                                    colorScheme={d.color}
-                                    fontSize="2xs"
-                                    title={inv.approval?.reason ?? undefined}>
-                                    {d.label}
-                                  </Badge>
-                                ) : null,
-                              )}
-                              {isAIEvaluated(inv) &&
-                                inv.approval?.confidence_score != null && (
-                                  <Badge
-                                    colorScheme={getConfidenceColor(
-                                      inv.approval.confidence_score,
-                                    )}
-                                    fontSize="2xs"
-                                    title={`Confidence: ${formatConfidence(inv.approval.confidence_score)}`}>
-                                    {formatConfidence(
-                                      inv.approval.confidence_score,
-                                    )}
-                                  </Badge>
-                                )}
-                            </HStack>
-                          </Td>
-                          <Td>
-                            <Text fontSize="xs" color="text.subtle">
-                              {formatDate(inv.submitted_at)}
-                            </Text>
-                          </Td>
-                        </Tr>
-                      ))}
-                    </Tbody>
-                  </Table>
-                )}
-              </Box>
-            </Box>
-          }
-          right={
-            !resolvedSelectedId ? null : (
-              <Box overflow="auto" p={4} h="full">
-                {detailLoading ? (
-                  <HStack justify="center" py={8}>
-                    <Spinner size="md" color="brand.base" />
-                  </HStack>
-                ) : !detail ? (
-                  <Alert status="error" borderRadius="md">
-                    <AlertIcon />
-                    <AlertDescription>
-                      Could not load invocation detail.
-                    </AlertDescription>
-                  </Alert>
-                ) : (
-                  <VStack align="stretch" gap={4}>
-                    <Flex
-                      justify="space-between"
-                      align="start"
-                      wrap="nowrap"
-                      gap={2}>
-                      <VStack align="start" gap={4} flex={1} minW={0}>
-                        <VStack align="start" gap={1}>
-                          <Heading size="md" fontFamily="mono">
-                            {detail.server_name || "none"} ·{" "}
-                            {detail.tool_name || "—"}
-                          </Heading>
-                          <Text fontSize="sm">
-                            {formatDate(detail.submitted_at)}
-                          </Text>
-                          <Text
-                            fontSize="xs"
-                            fontFamily="mono"
-                            color="text.subtle">
-                            {detail.invocation_id}
-                          </Text>
-                        </VStack>
-                        <VStack align="start" gap={1}>
-                          <HStack gap={2}>
-                            {(() => {
-                              const statusColor =
-                                STATUS_COLOR[detail.status] ?? "gray";
-                              return (
-                                <Tag
-                                  colorScheme={statusColor}
-                                  size="md"
-                                  textTransform="capitalize">
-                                  <Box
-                                    as="span"
-                                    boxSize="8px"
-                                    borderRadius="full"
-                                    bg={`${statusColor}.500`}
-                                    mr={1.5}
-                                  />
-                                  <Box as="span" mb="1px">
-									{STATUS_LABEL[detail.status] ??
-										detail.status}
-                                  </Box>
-                                </Tag>
-                              );
-                            })()}
-                            {getDisposition(detail).map((d) =>
-                              d.label !== "—" ? (
-                                <Badge
-                                  key={d.label}
-                                  colorScheme={d.color}
-                                  fontSize="sm">
-                                  {d.label}
-                                </Badge>
-                              ) : null,
-                            )}
-                            {isAIEvaluated(detail) &&
-                              detail.approval?.confidence_score != null && (
-                                <Badge
-                                  colorScheme={getConfidenceColor(
-                                    detail.approval.confidence_score,
-                                  )}
-                                  fontSize="xs">
-                                  Confidence:{" "}
-                                  {formatConfidence(
-                                    detail.approval.confidence_score,
-                                  )}
-                                </Badge>
-                              )}
-                          </HStack>
-                          {detail.approval?.reason && (
-                            <Text
-                              fontSize="xs"
-                              fontFamily="mono"
-                              color="text.subtle">
-                              {detail.approval.reason}
-                            </Text>
-                          )}
-                        </VStack>
-                        {detail.matched_rule_id && (
-                          <Text fontSize="xs" color="text.subtle">
-                            Matched rule:{" "}
-                            <Code fontSize="xs">{detail.matched_rule_id}</Code>
-                          </Text>
-                        )}
-
-                        {(detail.agent_id ||
-                          detail.agent_client_name ||
-                          detail.user_id) && (
-                          <VStack
-                            align="start"
-                            gap={0}
-                            mt={1}
-                            pt={1}
-                            borderTopWidth={1}
-                            borderColor="border.base"
-                            w="full">
-                            {detail.agent_client_name && (
+                                ? "background.table.row.selected"
+                                : "background.table.row.hover",
+                          },
+                      }}
+                      onClick={() => selectInvocation(inv)}>
+                      <Td
+                        borderLeft="4px solid"
+                        borderLeftColor={
+                          resolvedSelectedId === inv.invocation_id
+                            ? "brand.base"
+                            : "transparent"
+                        }
+                        pl={resolvedSelectedId === inv.invocation_id ? 2 : 3}>
+                        {(() => {
+                          const name = inv.agent_client_name ?? "";
+                          const version = inv.agent_client_version ?? "";
+                          const agentID = inv.agent_id ?? "";
+                          const tooltipLines = [
+                            version ? `version ${version}` : null,
+                            agentID ? `agent_id ${agentID}` : null,
+                          ].filter(Boolean);
+                          const label = name
+                            ? name
+                            : detectAgentKind(name) === "unknown"
+                              ? "Unknown"
+                              : "—";
+                          return (
+                            <Tooltip
+                              hasArrow
+                              isDisabled={tooltipLines.length === 0}
+                              label={tooltipLines.join("\n")}
+                              whiteSpace="pre-line"
+                              placement="top-start"
+                              openDelay={300}>
                               <HStack gap={2} align="center">
-                                <AgentIcon
-                                  name={detail.agent_client_name}
-                                  size={18}
-                                />
+                                <AgentIcon name={name} size={20} />
                                 <Text fontSize="xs" color="text.base">
-                                  <Text as="span" color="text.subtle">
-                                    Agent type:{" "}
-                                  </Text>
-                                  {detail.agent_client_name}
-                                  {detail.agent_client_version
-                                    ? ` ${detail.agent_client_version}`
-                                    : ""}
+                                  {label}
                                 </Text>
                               </HStack>
-                            )}
-                            {detail.agent_id && (
-                              <Text
-                                fontSize="xs"
-                                fontFamily="mono"
-                                color="text.subtle">
-                                <Text
-                                  as="span"
-                                  fontFamily="body"
-                                  color="text.subtle">
-                                  Agent ID:{" "}
-                                </Text>
-                                {detail.agent_id}
-                              </Text>
-                            )}
-                            {detail.user_id && (
-                              <Text
-                                fontSize="xs"
-                                fontFamily="mono"
-                                color="text.subtle">
-                                <Text
-                                  as="span"
-                                  fontFamily="body"
-                                  color="text.subtle">
-                                  User:{" "}
-                                </Text>
-                                {detail.user_id}
+                            </Tooltip>
+                          );
+                        })()}
+                      </Td>
+                      <Td>
+                        <Text fontSize="xs" color="text.subtle">
+                          {inv.server_name || "none"}
+                        </Text>
+                      </Td>
+                      <Td>
+                        <Text fontSize="xs" color="text.subtle">
+                          {inv.tool_name || "—"}
+                        </Text>
+                      </Td>
+                      <Td>
+                        {(() => {
+                          const agentID = inv.agent_id ?? "";
+                          if (!agentID) {
+                            return (
+                              <Text fontSize="xs" color="text.subtle">
+                                —
                               </Text>
+                            );
+                          }
+                          const record = agentByAgentID.get(agentID);
+                          if (record) {
+                            return (
+                              <Badge
+                                colorScheme="gray"
+                                fontSize="2xs"
+                                title={`agent_id: ${agentID}`}>
+                                {record.name}
+                              </Badge>
+                            );
+                          }
+                          return (
+                            <Badge
+                              colorScheme="gray"
+                              fontSize="2xs"
+                              title={`agent_id: ${agentID} (no matching agent record)`}>
+                              Unassociated
+                            </Badge>
+                          );
+                        })()}
+                      </Td>
+                      <Td>
+                        {(() => {
+                          const statusColor =
+                            STATUS_COLOR[inv.status] ?? "gray";
+                          return (
+                            <Tag
+                              colorScheme={statusColor}
+                              size="sm"
+                              textTransform="capitalize">
+                              <Box
+                                as="span"
+                                boxSize="8px"
+                                borderRadius="full"
+                                bg={`${statusColor}.500`}
+                                mr={1.5}
+                              />
+                              <Box as="span" mb="1px">
+                                {STATUS_LABEL[inv.status] ?? inv.status}
+                              </Box>
+                            </Tag>
+                          );
+                        })()}
+                      </Td>
+                      <Td>
+                        <HStack gap={1}>
+                          {getDisposition(inv).map((d) =>
+                            d.label !== "—" ? (
+                              <Badge
+                                key={d.label}
+                                colorScheme={d.color}
+                                fontSize="2xs"
+                                title={inv.approval?.reason ?? undefined}>
+                                {d.label}
+                              </Badge>
+                            ) : null,
+                          )}
+                          {isAIEvaluated(inv) &&
+                            inv.approval?.confidence_score != null && (
+                              <Badge
+                                colorScheme={getConfidenceColor(
+                                  inv.approval.confidence_score,
+                                )}
+                                fontSize="2xs"
+                                title={`Confidence: ${formatConfidence(inv.approval.confidence_score)}`}>
+                                {formatConfidence(
+                                  inv.approval.confidence_score,
+                                )}
+                              </Badge>
                             )}
-                          </VStack>
-                        )}
-                      </VStack>
-                      <CloseButton
-                        size="sm"
-                        flexShrink={0}
-                        onClick={handleCloseDetail}
-                        aria-label="Close details"
-                        title="Close details"
-                        data-testid="invocation-detail-close-button"
-                      />
-                    </Flex>
-
-                    <Box
-                      p={3}
-                      borderWidth={1}
-                      borderColor="border.base"
-                      borderRadius="md"
-                      bg="background.container.subtle">
-                      <Flex
-                        justify="space-between"
-                        align="center"
-                        mb={detail.summary ? 2 : 0}
-                        gap={2}
-                        wrap="wrap">
-                        <Text
-                          fontSize="xs"
-                          fontWeight="semibold"
-                          textTransform="uppercase"
-                          color="text.subtle"
-                          letterSpacing="wide">
-                          Summary
+                        </HStack>
+                      </Td>
+                      <Td>
+                        <Text fontSize="xs" color="text.subtle">
+                          {formatDate(inv.submitted_at)}
                         </Text>
+                      </Td>
+                    </Tr>
+                  ))}
+                </Tbody>
+              </Table>
+            )}
+          </Box>
+        </Box>
+      </Box>
+
+      <Modal
+        isOpen={resolvedSelectedId !== null}
+        onClose={handleCloseDetail}
+        size="6xl"
+        scrollBehavior="inside"
+        isCentered>
+        <ModalOverlay />
+        <ModalContent maxH="85vh" data-testid="invocation-detail-modal">
+          {detail && (
+            <ModalHeader pr={12}>
+              <HStack justify="space-between" gap={3} align="center">
+                <Text fontFamily="mono" noOfLines={1} flex={1} minW={0}>
+                  {detail.server_name || "none"} · {detail.tool_name || "—"}
+                </Text>
+                <HStack gap={1} mr={4}>
+                  {selectedIndex >= 0 && (
+                    <Text
+                      fontSize="sm"
+                      fontWeight="normal"
+                      fontFamily="body"
+                      color="text.subtle"
+                      whiteSpace="nowrap"
+                      data-testid="invocation-detail-position">
+                      {selectedIndex + 1} of {items.length}
+                    </Text>
+                  )}
+                  <ButtonGroup>
+                    <IconButton
+                      size="sm"
+                      variant="ghost"
+                      aria-label="Previous invocation"
+                      title="Previous invocation"
+                      icon={<Icon as={ChevronUpIcon} boxSize={5} />}
+                      isDisabled={!hasPrev}
+                      onClick={() => handleNavigate(-1)}
+                      data-testid="invocation-detail-prev-button"
+                    />
+                    <IconButton
+                      size="sm"
+                      variant="ghost"
+                      aria-label="Next invocation"
+                      title="Next invocation"
+                      icon={<Icon as={ChevronDownIcon} boxSize={5} />}
+                      isDisabled={!hasNext}
+                      onClick={() => handleNavigate(1)}
+                      data-testid="invocation-detail-next-button"
+                    />
+                  </ButtonGroup>
+                </HStack>
+              </HStack>
+            </ModalHeader>
+          )}
+          <ModalCloseButton
+            onClick={handleCloseDetail}
+            data-testid="invocation-detail-close-button"
+            mt={2}
+          />
+          <ModalBody>
+            {detailLoading ? (
+              <HStack justify="center" py={8}>
+                <Spinner size="md" color="brand.base" />
+              </HStack>
+            ) : !detail ? (
+              <Alert status="error" borderRadius="md">
+                <AlertIcon />
+                <AlertDescription>
+                  Could not load invocation detail.
+                </AlertDescription>
+              </Alert>
+            ) : (
+              <VStack align="stretch" gap={8}>
+                <Flex
+                  justify="space-between"
+                  align="start"
+                  wrap="nowrap"
+                  gap={2}>
+                  <VStack align="start" gap={4} flex={1} minW={0}>
+                    <HStack justify="space-between" align="start" w="full">
+                      <HStack gap={2}>
+                        {(() => {
+                          const statusColor =
+                            STATUS_COLOR[detail.status] ?? "gray";
+                          return (
+                            <Tag
+                              colorScheme={statusColor}
+                              size="md"
+                              textTransform="capitalize">
+                              <Box
+                                as="span"
+                                boxSize="8px"
+                                borderRadius="full"
+                                bg={`${statusColor}.500`}
+                                mr={1.5}
+                              />
+                              <Box as="span" mb="1px">
+                                {STATUS_LABEL[detail.status] ?? detail.status}
+                              </Box>
+                            </Tag>
+                          );
+                        })()}
+                        <Text>{formatDate(detail.submitted_at)}</Text>
+                      </HStack>
+                      <Text fontSize="xs" fontFamily="mono" color="text.subtle">
+                        {detail.invocation_id}
+                      </Text>
+                    </HStack>
+                    <VStack align="start" gap={1} w="full">
+                      <HStack w="full" justify="space-between">
+                        {getDisposition(detail).map((d) =>
+                          d.label !== "—" ? (
+                            <Badge
+                              key={d.label}
+                              colorScheme={d.color}
+                              fontSize="sm">
+                              {d.label}
+                            </Badge>
+                          ) : null,
+                        )}
+                        {isAIEvaluated(detail) &&
+                          detail.approval?.confidence_score != null && (
+                            <Badge
+                              colorScheme={getConfidenceColor(
+                                detail.approval.confidence_score,
+                              )}
+                              fontSize="xs">
+                              Confidence:{" "}
+                              {formatConfidence(
+                                detail.approval.confidence_score,
+                              )}
+                            </Badge>
+                          )}
                         <Button
                           variant="outline"
-                          size="xs"
-                          isLoading={isCurrentInvocationSummarizing}
-                          isDisabled={
-                            !hasSummaryModel || isCurrentInvocationSummarizing
-                          }
-                          title={
-                            !hasSummaryModel
-                              ? "Set an Invocation Summary Model in Settings to enable"
-                              : undefined
-                          }
-                          onClick={handleSummarize}>
-                          {detail.summary ? "Re-summarize" : "Summarize"}
+                          size="sm"
+                          alignSelf="flex-end"
+                          leftIcon={<Icon as={ShieldCheckIcon} boxSize={4} />}
+                          onClick={() => {
+                            setCreateRuleForm((f) => ({
+                              ...f,
+                              server_patterns:
+                                f.server_patterns || detail.server_name || "",
+                              tool_patterns:
+                                f.tool_patterns || detail.tool_name || "",
+                            }));
+                            setShowCreateRule(true);
+                          }}
+                          data-testid="invocation-create-rule-button">
+                          Create Rule From This
                         </Button>
-                      </Flex>
-                      {detail.summary ? (
-                        <Text fontSize="sm" whiteSpace="pre-wrap">
-                          {detail.summary}
-                        </Text>
-                      ) : (
-                        <Text fontSize="xs" color="text.subtle">
-                          {hasSummaryModel
-                            ? "No summary yet. Click Summarize to generate one."
-                            : "No summary model configured. Set one in Settings to enable summarization."}
-                        </Text>
-                      )}
-                      {didCurrentInvocationSummaryFail && (
-                        <Text fontSize="xs" color="text.error" mt={2}>
-                          Failed to summarize invocation.
-                        </Text>
+                      </HStack>
+                      {detail.approval?.reason && (
+                        <Stack gap={1}>
+                          <Header>Reason:</Header>
+                          <Text>{detail.approval.reason}</Text>
+                        </Stack>
                       )}
-                    </Box>
-
-                    {detail.input != null &&
-                      !(
-                        typeof detail.input === "object" &&
-                        detail.input !== null &&
-                        Object.keys(detail.input as object).length === 0
-                      ) && (
-                        <Box>
-                          <Text
-                            fontSize="xs"
-                            fontWeight="semibold"
-                            textTransform="uppercase"
-                            color="text.subtle"
-                            letterSpacing="wide"
-                            mb={2}>
-                            Arguments
+                    </VStack>
+                    {detail.matched_rule_id && (
+                      <Stack gap={1}>
+                        <Header>Matched Rule:</Header>
+                        <Code fontSize="xs">{detail.matched_rule_id}</Code>
+                      </Stack>
+                    )}
+                    <Divider />
+                    {(detail.agent_id ||
+                      detail.agent_client_name ||
+                      detail.user_id) && (
+                      <HStack gap={12}>
+                        {detail.agent_client_name && (
+                          <Stack gap={1}>
+                            <Header>Agent Type:</Header>
+                            <HStack>
+                              <AgentIcon
+                                name={detail.agent_client_name}
+                                size={24}
+                              />
+                              <Text>
+                                {detail.agent_client_name}
+                                {detail.agent_client_version
+                                  ? ` ${detail.agent_client_version}`
+                                  : ""}
+                              </Text>
+                            </HStack>
+                          </Stack>
+                        )}
+                        {detail.agent_id && (
+                          <Stack gap={1}>
+                            <Header>Agent ID:</Header>
+                            <Text fontFamily="mono">{detail.agent_id}</Text>
+                          </Stack>
+                        )}
+                        {detail.user_id && (
+                          <Text fontFamily="mono" color="text.subtle">
+                            <Text
+                              as="span"
+                              fontFamily="body"
+                              color="text.subtle">
+                              User:{" "}
+                            </Text>
+                            {detail.user_id}
                           </Text>
-                          {(() => {
-                            const d = extractDiff(detail.input);
-                            if (d)
-                              return (
-                                <DiffViewer diff={d.diff} filePath={d.path} />
-                              );
-
-                            const input = detail.input;
-                            const isPlainObject =
-                              typeof input === "object" &&
-                              input !== null &&
-                              !Array.isArray(input);
+                        )}
+                      </HStack>
+                    )}
+                  </VStack>
+                </Flex>
 
-                            const renderArgValue = (value: unknown) => {
-                              if (value === null) return "null";
-                              if (value === undefined) return "undefined";
-                              if (typeof value === "string") return value;
-                              if (
-                                typeof value === "number" ||
-                                typeof value === "boolean"
-                              ) {
-                                return String(value);
-                              }
-                              return JSON.stringify(value, null, 2);
-                            };
+                <Stack gap={1}>
+                  <Header>Summary</Header>
+                  {detail.summary ? (
+                    <Text>{detail.summary}</Text>
+                  ) : (
+                    <>
+                      <Text color="text.subtle" fontStyle="italic">
+                        {hasSummaryModel
+                          ? "No summary yet. Click Summarize to generate one."
+                          : "No summary model configured. Set one in Settings to enable summarization."}
+                      </Text>
 
-                            const jsonBlock = (
-                              <Code
-                                display="block"
-                                whiteSpace="pre-wrap"
-                                fontSize="xs"
-                                p={3}
-                                borderRadius="md"
-                                bg="background.container.subtle"
-                                w="full"
-                                data-testid="invocation-arguments-json">
-                                {JSON.stringify(input, null, 2)}
-                              </Code>
-                            );
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        isLoading={isCurrentInvocationSummarizing}
+                        isDisabled={
+                          !hasSummaryModel || isCurrentInvocationSummarizing
+                        }
+                        title={
+                          !hasSummaryModel
+                            ? "Set an Invocation Summary Model in Settings to enable"
+                            : undefined
+                        }
+                        onClick={handleSummarize}
+                        alignSelf="flex-start">
+                        {detail.summary ? "Re-summarize" : "Summarize"}
+                      </Button>
+                    </>
+                  )}
+                  {didCurrentInvocationSummaryFail && (
+                    <Text fontSize="sm" color="text.error">
+                      Failed to summarize invocation.
+                    </Text>
+                  )}
+                </Stack>
 
-                            if (!isPlainObject) return jsonBlock;
+                {detail.input != null &&
+                  !(
+                    typeof detail.input === "object" &&
+                    detail.input !== null &&
+                    Object.keys(detail.input as object).length === 0
+                  ) && (
+                    <Box>
+                      <Header mb={2}>Arguments</Header>
+                      {(() => {
+                        const d = extractDiff(detail.input);
+                        if (d)
+                          return <DiffViewer diff={d.diff} filePath={d.path} />;
 
-                            return (
-                              <VStack align="stretch" gap={2}>
-                                <Box
-                                  borderWidth={1}
-                                  borderColor="border.base"
-                                  borderRadius="md"
-                                  overflow="hidden">
-                                  <Table
-                                    size="sm"
-                                    variant="simple"
-                                    data-testid="invocation-arguments-table">
-                                    <Thead bg="background.table.header">
-                                      <Tr>
-                                        <Th>Key</Th>
-                                        <Th>Value</Th>
-                                      </Tr>
-                                    </Thead>
-                                    <Tbody>
-                                      {Object.entries(
-                                        input as Record<string, unknown>,
-                                      ).map(([key, value]) => (
-                                        <Tr
-                                          key={key}
-                                          data-testid="invocation-arguments-row"
-                                          data-testid-id={key}>
-                                          <Td
-                                            fontFamily="mono"
-                                            fontSize="xs"
-                                            fontWeight="medium"
-                                            verticalAlign="top"
-                                            whiteSpace="nowrap">
-                                            {key}
-                                          </Td>
-                                          <Td fontSize="xs" verticalAlign="top">
-                                            <Box
-                                              as="pre"
-                                              m={0}
-                                              whiteSpace="pre-wrap"
-                                              wordBreak="break-word"
-                                              fontFamily={
-                                                typeof value === "object" &&
-                                                value !== null
-                                                  ? "mono"
-                                                  : "body"
-                                              }>
-                                              {renderArgValue(value)}
-                                            </Box>
-                                          </Td>
-                                        </Tr>
-                                      ))}
-                                    </Tbody>
-                                  </Table>
-                                </Box>
-                                <Box alignSelf="flex-start">
-                                  <Button
-                                    variant="link"
-                                    size="xs"
-                                    leftIcon={
-                                      <Icon
-                                        as={
-                                          showArgsJson
-                                            ? ChevronUpIcon
-                                            : ChevronDownIcon
-                                        }
-                                        boxSize={4}
-                                      />
-                                    }
-                                    onClick={() => setShowArgsJson((v) => !v)}
-                                    data-testid="invocation-arguments-json-toggle">
-                                    {showArgsJson
-                                      ? "Hide raw JSON"
-                                      : "Show raw JSON"}
-                                  </Button>
-                                </Box>
-                                <Collapse in={showArgsJson} animateOpacity>
-                                  {jsonBlock}
-                                </Collapse>
-                              </VStack>
-                            );
-                          })()}
-                        </Box>
-                      )}
+                        const input = detail.input;
+                        const isPlainObject =
+                          typeof input === "object" &&
+                          input !== null &&
+                          !Array.isArray(input);
 
-                    {isPending && (
-                      <Box
-                        p={4}
-                        borderWidth={1}
-                        borderColor="border.base"
-                        borderRadius="md"
-                        bg="background.container.subtle">
-                        <Text fontWeight="medium" mb={3}>
-                          Approval Required
-                        </Text>
+                        const renderArgValue = (value: unknown) => {
+                          if (value === null) return "null";
+                          if (value === undefined) return "undefined";
+                          if (typeof value === "string") return value;
+                          if (
+                            typeof value === "number" ||
+                            typeof value === "boolean"
+                          ) {
+                            return String(value);
+                          }
+                          return JSON.stringify(value, null, 2);
+                        };
 
-                        {!showDenyInput ? (
-                          <HStack
-                            gap={2}
+                        const jsonBlock = (
+                          <Code
+                            display="block"
+                            whiteSpace="pre-wrap"
+                            fontSize="xs"
+                            p={3}
+                            borderRadius="md"
+                            bg="background.container.subtle"
                             w="full"
-                            data-testid="invocation-approval-actions">
-                            <ButtonGroup
-                              isAttached
-                              colorScheme="green"
-                              w="full"
-                              size="sm">
-                              <Button
-                                w="full"
-                                isLoading={approve.isLoading}
-                                onClick={handleApproveOnce}
-                                data-testid="invocation-approve-button">
-                                Approve
-                              </Button>
-                              <Menu placement="bottom-end">
-                                <MenuButton
-                                  as={IconButton}
-                                  aria-label="More approve options"
-                                  icon={
-                                    <Icon as={ChevronDownIcon} boxSize={4} />
-                                  }
-                                  isDisabled={approve.isLoading}
-                                  borderLeftWidth="1px"
-                                  borderLeftColor="whiteAlpha.400"
-                                  data-testid="invocation-approve-menu-button"
-                                />
-                                <MenuList>
-                                  <MenuItem
-                                    onClick={handleAlwaysApprove}
-                                    data-testid="invocation-always-approve-menu-item">
-                                    Always approve
-                                  </MenuItem>
-                                </MenuList>
-                              </Menu>
-                            </ButtonGroup>
-                            <ButtonGroup
-                              isAttached
-                              colorScheme="red"
-                              size="sm"
-                              w="full">
-                              <Button
-                                w="full"
-                                onClick={() => {
-                                  setDenyMode("once");
-                                  setShowDenyInput(true);
-                                }}
-                                data-testid="invocation-deny-button">
-                                Deny
-                              </Button>
-                              <Menu placement="bottom-end">
-                                <MenuButton
-                                  as={IconButton}
-                                  aria-label="More deny options"
-                                  icon={
-                                    <Icon as={ChevronDownIcon} boxSize={4} />
-                                  }
-                                  borderLeftWidth="1px"
-                                  borderLeftColor="red.200"
-                                  data-testid="invocation-deny-menu-button"
-                                />
-                                <MenuList>
-                                  <MenuItem
-                                    onClick={() => {
-                                      setDenyMode("always");
-                                      setShowDenyInput(true);
-                                    }}
-                                    data-testid="invocation-always-deny-menu-item">
-                                    Always deny
-                                  </MenuItem>
-                                </MenuList>
-                              </Menu>
-                            </ButtonGroup>
-                          </HStack>
-                        ) : (
-                          <VStack
-                            align="stretch"
-                            gap={2}
-                            data-testid="invocation-deny-form">
-                            <Textarea
-                              size="sm"
-                              placeholder="Reason for denial (optional)"
-                              value={denyMessage}
-                              onChange={(e) => setDenyMessage(e.target.value)}
-                              rows={3}
-                              data-testid="invocation-deny-reason-input"
-                            />
-                            <HStack gap={2}>
-                              <Button
-                                variant="outlineDanger"
+                            data-testid="invocation-arguments-json">
+                            {JSON.stringify(input, null, 2)}
+                          </Code>
+                        );
+
+                        if (!isPlainObject) return jsonBlock;
+
+                        return (
+                          <VStack align="stretch" gap={2}>
+                            <Box
+                              borderWidth={1}
+                              borderColor="border.base"
+                              borderRadius="md"
+                              overflow="hidden">
+                              <Table
                                 size="sm"
-                                isLoading={deny.isLoading}
-                                onClick={
-                                  denyMode === "always"
-                                    ? handleAlwaysDeny
-                                    : handleDenyOnce
-                                }
-                                data-testid="invocation-deny-confirm-button">
-                                {denyMode === "always" ? "Always deny" : "Deny"}
-                              </Button>
+                                variant="simple"
+                                data-testid="invocation-arguments-table">
+                                <Thead bg="background.table.header">
+                                  <Tr>
+                                    <Th>Key</Th>
+                                    <Th>Value</Th>
+                                  </Tr>
+                                </Thead>
+                                <Tbody>
+                                  {Object.entries(
+                                    input as Record<string, unknown>,
+                                  ).map(([key, value]) => (
+                                    <Tr
+                                      key={key}
+                                      data-testid="invocation-arguments-row"
+                                      data-testid-id={key}>
+                                      <Td
+                                        fontFamily="mono"
+                                        fontSize="xs"
+                                        fontWeight="medium"
+                                        verticalAlign="top"
+                                        whiteSpace="nowrap">
+                                        {key}
+                                      </Td>
+                                      <Td fontSize="xs" verticalAlign="top">
+                                        <Box
+                                          as="pre"
+                                          m={0}
+                                          whiteSpace="pre-wrap"
+                                          wordBreak="break-word"
+                                          fontFamily={
+                                            typeof value === "object" &&
+                                            value !== null
+                                              ? "mono"
+                                              : "body"
+                                          }>
+                                          {renderArgValue(value)}
+                                        </Box>
+                                      </Td>
+                                    </Tr>
+                                  ))}
+                                </Tbody>
+                              </Table>
+                            </Box>
+                            <Box alignSelf="flex-start">
                               <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => {
-                                  setShowDenyInput(false);
-                                  setDenyMessage("");
-                                  setDenyMode("once");
-                                }}
-                                data-testid="invocation-deny-cancel-button">
-                                Cancel
+                                variant="link"
+                                size="xs"
+                                leftIcon={
+                                  <Icon
+                                    as={
+                                      showArgsJson
+                                        ? ChevronUpIcon
+                                        : ChevronDownIcon
+                                    }
+                                    boxSize={4}
+                                  />
+                                }
+                                onClick={() => setShowArgsJson((v) => !v)}
+                                data-testid="invocation-arguments-json-toggle">
+                                {showArgsJson
+                                  ? "Hide raw JSON"
+                                  : "Show raw JSON"}
                               </Button>
-                            </HStack>
+                            </Box>
+                            <Collapse in={showArgsJson} animateOpacity>
+                              {jsonBlock}
+                            </Collapse>
                           </VStack>
-                        )}
+                        );
+                      })()}
+                    </Box>
+                  )}
+
+                {isPending && (
+                  <Box
+                    p={4}
+                    borderWidth={1}
+                    borderColor="border.base"
+                    borderRadius="md"
+                    bg="background.container.subtle">
+                    <Text fontWeight="medium" mb={3}>
+                      Approval Required
+                    </Text>
 
-                        <Box mt={3}>
+                    {!showDenyInput ? (
+                      <HStack
+                        gap={2}
+                        w="full"
+                        data-testid="invocation-approval-actions">
+                        <ButtonGroup
+                          isAttached
+                          colorScheme="green"
+                          w="full"
+                          size="sm">
                           <Button
-                            variant="ghost"
-                            size="xs"
+                            w="full"
+                            isLoading={approve.isLoading}
+                            onClick={handleApproveOnce}
+                            data-testid="invocation-approve-button">
+                            Approve
+                          </Button>
+                          <Menu placement="bottom-end">
+                            <MenuButton
+                              as={IconButton}
+                              aria-label="More approve options"
+                              icon={<Icon as={ChevronDownIcon} boxSize={4} />}
+                              isDisabled={approve.isLoading}
+                              borderLeftWidth="1px"
+                              borderLeftColor="whiteAlpha.400"
+                              data-testid="invocation-approve-menu-button"
+                            />
+                            <MenuList>
+                              <MenuItem
+                                onClick={handleAlwaysApprove}
+                                data-testid="invocation-always-approve-menu-item">
+                                Always approve
+                              </MenuItem>
+                            </MenuList>
+                          </Menu>
+                        </ButtonGroup>
+                        <ButtonGroup
+                          isAttached
+                          colorScheme="red"
+                          size="sm"
+                          w="full">
+                          <Button
+                            w="full"
                             onClick={() => {
-                              if (!showCustomizeScope) {
-                                setRuleForm((f) => ({
-                                  ...f,
-                                  server_patterns:
-                                    f.server_patterns ||
-                                    detail.server_name ||
-                                    "",
-                                  tool_patterns:
-                                    f.tool_patterns || detail.tool_name || "",
-                                }));
-                              }
-                              setShowCustomizeScope((v) => !v);
-                            }}>
-                            {showCustomizeScope
-                              ? "▲ Hide rule scope"
-                              : "▼ Customize rule scope"}
+                              setDenyMode("once");
+                              setShowDenyInput(true);
+                            }}
+                            data-testid="invocation-deny-button">
+                            Deny
                           </Button>
-                          <Collapse in={showCustomizeScope} animateOpacity>
-                            <VStack
-                              align="stretch"
-                              gap={2}
-                              mt={2}
-                              p={3}
-                              borderWidth={1}
-                              borderColor="border.base"
-                              borderRadius="md">
-                              <Text
-                                fontSize="xs"
-                                color="text.subtle"
-                                fontWeight="semibold">
-                                Rule scope for &ldquo;Always approve&rdquo; /
-                                &ldquo;Always deny&rdquo;
-                              </Text>
-                              <FormControl size="sm">
-                                <FormLabel fontSize="xs" mb={1}>
-                                  Server patterns (comma-separated)
-                                </FormLabel>
-                                <Input
-                                  size="sm"
-                                  fontFamily="mono"
-                                  placeholder="e.g. github, *"
-                                  value={ruleForm.server_patterns}
-                                  onChange={(e) =>
-                                    setRuleForm((f) => ({
-                                      ...f,
-                                      server_patterns: e.target.value,
-                                    }))
-                                  }
-                                />
-                              </FormControl>
-                              <FormControl size="sm">
-                                <FormLabel fontSize="xs" mb={1}>
-                                  Tool patterns (comma-separated)
-                                </FormLabel>
-                                <Input
-                                  size="sm"
-                                  fontFamily="mono"
-                                  placeholder="e.g. list_issues, *"
-                                  value={ruleForm.tool_patterns}
-                                  onChange={(e) =>
-                                    setRuleForm((f) => ({
-                                      ...f,
-                                      tool_patterns: e.target.value,
-                                    }))
-                                  }
-                                />
-                              </FormControl>
-                              <FormControl size="sm">
-                                <FormLabel fontSize="xs" mb={1}>
-                                  Description (optional)
-                                </FormLabel>
-                                <Input
-                                  size="sm"
-                                  placeholder="e.g. Allow GitHub read tools"
-                                  value={ruleForm.description}
-                                  onChange={(e) =>
-                                    setRuleForm((f) => ({
-                                      ...f,
-                                      description: e.target.value,
-                                    }))
-                                  }
-                                />
-                              </FormControl>
-                            </VStack>
-                          </Collapse>
-                        </Box>
-                      </Box>
-                    )}
-
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      alignSelf="flex-start"
-                      leftIcon={<Icon as={ShieldCheckIcon} boxSize={4} />}
-                      onClick={() => {
-                        setCreateRuleForm((f) => ({
-                          ...f,
-                          server_patterns:
-                            f.server_patterns || detail.server_name || "",
-                          tool_patterns:
-                            f.tool_patterns || detail.tool_name || "",
-                        }));
-                        setShowCreateRule(true);
-                      }}
-                      data-testid="invocation-create-rule-button">
-                      Create Rule From This
-                    </Button>
-                    <Modal
-                      isOpen={showCreateRule}
-                      onClose={() => setShowCreateRule(false)}
-                      size="lg"
-                      isCentered>
-                      <ModalOverlay />
-                      <ModalContent data-testid="create-rule-modal">
-                        <ModalHeader>
-                          Create Rule From This Invocation
-                        </ModalHeader>
-                        <ModalCloseButton data-testid="create-rule-modal-close-button" />
-                        <ModalBody>
-                          <VStack align="stretch" gap={2}>
-                            <FormControl size="sm">
-                              <FormLabel fontSize="xs" mb={1}>
-                                Action
-                              </FormLabel>
-                              <Select
-                                classNamePrefix="chakra-react-select"
-                                size="sm"
-                                options={[
-                                  {
-                                    value: "auto_approve",
-                                    label: "Auto Approve",
-                                  },
-                                  { value: "auto_deny", label: "Auto Deny" },
-                                ]}
-                                value={{
-                                  value: createRuleForm.action,
-                                  label:
-                                    createRuleForm.action === "auto_approve"
-                                      ? "Auto Approve"
-                                      : "Auto Deny",
+                          <Menu placement="bottom-end">
+                            <MenuButton
+                              as={IconButton}
+                              aria-label="More deny options"
+                              icon={<Icon as={ChevronDownIcon} boxSize={4} />}
+                              borderLeftWidth="1px"
+                              borderLeftColor="red.200"
+                              data-testid="invocation-deny-menu-button"
+                            />
+                            <MenuList>
+                              <MenuItem
+                                onClick={() => {
+                                  setDenyMode("always");
+                                  setShowDenyInput(true);
                                 }}
-                                onChange={(opt) =>
-                                  opt &&
-                                  setCreateRuleForm((f) => ({
-                                    ...f,
-                                    action: opt.value as RuleAction,
-                                  }))
-                                }
-                              />
-                            </FormControl>
-                            <FormControl size="sm">
-                              <FormLabel fontSize="xs" mb={1}>
-                                Server patterns (comma-separated)
-                              </FormLabel>
-                              <Input
-                                size="sm"
-                                fontFamily="mono"
-                                placeholder="e.g. github, *"
-                                value={createRuleForm.server_patterns}
-                                onChange={(e) =>
-                                  setCreateRuleForm((f) => ({
-                                    ...f,
-                                    server_patterns: e.target.value,
-                                  }))
-                                }
-                              />
-                            </FormControl>
-                            <FormControl size="sm">
-                              <FormLabel fontSize="xs" mb={1}>
-                                Tool patterns (comma-separated)
-                              </FormLabel>
-                              <Input
-                                size="sm"
-                                fontFamily="mono"
-                                placeholder="e.g. list_issues, *"
-                                value={createRuleForm.tool_patterns}
-                                onChange={(e) =>
-                                  setCreateRuleForm((f) => ({
-                                    ...f,
-                                    tool_patterns: e.target.value,
-                                  }))
-                                }
-                              />
-                            </FormControl>
-                            <FormControl size="sm">
-                              <FormLabel fontSize="xs" mb={1}>
-                                Description (optional)
-                              </FormLabel>
-                              <Input
-                                size="sm"
-                                placeholder="e.g. Allow GitHub read tools"
-                                value={createRuleForm.description}
-                                onChange={(e) =>
-                                  setCreateRuleForm((f) => ({
-                                    ...f,
-                                    description: e.target.value,
-                                  }))
-                                }
-                              />
-                            </FormControl>
-                          </VStack>
-                        </ModalBody>
-                        <ModalFooter gap={2}>
+                                data-testid="invocation-always-deny-menu-item">
+                                Always deny
+                              </MenuItem>
+                            </MenuList>
+                          </Menu>
+                        </ButtonGroup>
+                      </HStack>
+                    ) : (
+                      <VStack
+                        align="stretch"
+                        gap={2}
+                        data-testid="invocation-deny-form">
+                        <Textarea
+                          size="sm"
+                          placeholder="Reason for denial (optional)"
+                          value={denyMessage}
+                          onChange={(e) => setDenyMessage(e.target.value)}
+                          rows={3}
+                          data-testid="invocation-deny-reason-input"
+                        />
+                        <HStack gap={2}>
                           <Button
-                            variant="ghost"
+                            variant="outlineDanger"
                             size="sm"
-                            onClick={() => setShowCreateRule(false)}
-                            data-testid="create-rule-modal-cancel-button">
-                            Cancel
+                            isLoading={deny.isLoading}
+                            onClick={
+                              denyMode === "always"
+                                ? handleAlwaysDeny
+                                : handleDenyOnce
+                            }
+                            data-testid="invocation-deny-confirm-button">
+                            {denyMode === "always" ? "Always deny" : "Deny"}
                           </Button>
                           <Button
-                            variant="primary"
+                            variant="ghost"
                             size="sm"
-                            isLoading={createRule.isLoading}
-                            onClick={handleSaveRule}
-                            data-testid="create-rule-modal-save-button">
-                            Save Rule
+                            onClick={() => {
+                              setShowDenyInput(false);
+                              setDenyMessage("");
+                              setDenyMode("once");
+                            }}
+                            data-testid="invocation-deny-cancel-button">
+                            Cancel
                           </Button>
-                        </ModalFooter>
-                      </ModalContent>
-                    </Modal>
-
-                    {detail.result != null && (
-                      <Box>
-                        <Text
-                          fontSize="xs"
-                          fontWeight="semibold"
-                          textTransform="uppercase"
-                          color="text.subtle"
-                          letterSpacing="wide"
-                          mb={2}>
-                          Result
-                        </Text>
-                        {(() => {
-                          const d = extractDiff(detail.result);
-                          if (d)
-                            return (
-                              <DiffViewer diff={d.diff} filePath={d.path} />
-                            );
-                          return (
-                            <Code
-                              display="block"
-                              whiteSpace="pre-wrap"
-                              fontSize="xs"
-                              p={3}
-                              borderRadius="md"
-                              bg="background.container.subtle"
-                              w="full">
-                              {JSON.stringify(detail.result, null, 2)}
-                            </Code>
-                          );
-                        })()}
-                      </Box>
+                        </HStack>
+                      </VStack>
                     )}
 
-                    {detail.error != null && (
-                      <Box>
-                        <Text
-                          fontSize="xs"
-                          fontWeight="semibold"
-                          textTransform="uppercase"
-                          color="text.subtle"
-                          letterSpacing="wide"
-                          mb={2}>
-                          Error
-                        </Text>
+                    <Box mt={3}>
+                      <Button
+                        variant="ghost"
+                        size="xs"
+                        onClick={() => {
+                          if (!showCustomizeScope) {
+                            setRuleForm((f) => ({
+                              ...f,
+                              server_patterns:
+                                f.server_patterns || detail.server_name || "",
+                              tool_patterns:
+                                f.tool_patterns || detail.tool_name || "",
+                            }));
+                          }
+                          setShowCustomizeScope((v) => !v);
+                        }}>
+                        {showCustomizeScope
+                          ? "▲ Hide rule scope"
+                          : "▼ Customize rule scope"}
+                      </Button>
+                      <Collapse in={showCustomizeScope} animateOpacity>
+                        <VStack
+                          align="stretch"
+                          gap={2}
+                          mt={2}
+                          p={3}
+                          borderWidth={1}
+                          borderColor="border.base"
+                          borderRadius="md">
+                          <Text
+                            fontSize="xs"
+                            color="text.subtle"
+                            fontWeight="semibold">
+                            Rule scope for &ldquo;Always approve&rdquo; /
+                            &ldquo;Always deny&rdquo;
+                          </Text>
+                          <FormControl size="sm">
+                            <FormLabel fontSize="xs" mb={1}>
+                              Server patterns (comma-separated)
+                            </FormLabel>
+                            <Input
+                              size="sm"
+                              fontFamily="mono"
+                              placeholder="e.g. github, *"
+                              value={ruleForm.server_patterns}
+                              onChange={(e) =>
+                                setRuleForm((f) => ({
+                                  ...f,
+                                  server_patterns: e.target.value,
+                                }))
+                              }
+                            />
+                          </FormControl>
+                          <FormControl size="sm">
+                            <FormLabel fontSize="xs" mb={1}>
+                              Tool patterns (comma-separated)
+                            </FormLabel>
+                            <Input
+                              size="sm"
+                              fontFamily="mono"
+                              placeholder="e.g. list_issues, *"
+                              value={ruleForm.tool_patterns}
+                              onChange={(e) =>
+                                setRuleForm((f) => ({
+                                  ...f,
+                                  tool_patterns: e.target.value,
+                                }))
+                              }
+                            />
+                          </FormControl>
+                          <FormControl size="sm">
+                            <FormLabel fontSize="xs" mb={1}>
+                              Description (optional)
+                            </FormLabel>
+                            <Input
+                              size="sm"
+                              placeholder="e.g. Allow GitHub read tools"
+                              value={ruleForm.description}
+                              onChange={(e) =>
+                                setRuleForm((f) => ({
+                                  ...f,
+                                  description: e.target.value,
+                                }))
+                              }
+                            />
+                          </FormControl>
+                        </VStack>
+                      </Collapse>
+                    </Box>
+                  </Box>
+                )}
+
+                <Modal
+                  isOpen={showCreateRule}
+                  onClose={() => setShowCreateRule(false)}
+                  size="lg"
+                  isCentered>
+                  <ModalOverlay />
+                  <ModalContent data-testid="create-rule-modal">
+                    <ModalHeader>Create Rule From This Invocation</ModalHeader>
+                    <ModalCloseButton data-testid="create-rule-modal-close-button" />
+                    <ModalBody>
+                      <VStack align="stretch" gap={2}>
+                        <FormControl size="sm">
+                          <FormLabel fontSize="xs" mb={1}>
+                            Action
+                          </FormLabel>
+                          <Select
+                            classNamePrefix="chakra-react-select"
+                            size="sm"
+                            options={[
+                              {
+                                value: "auto_approve",
+                                label: "Auto Approve",
+                              },
+                              { value: "auto_deny", label: "Auto Deny" },
+                            ]}
+                            value={{
+                              value: createRuleForm.action,
+                              label:
+                                createRuleForm.action === "auto_approve"
+                                  ? "Auto Approve"
+                                  : "Auto Deny",
+                            }}
+                            onChange={(opt) =>
+                              opt &&
+                              setCreateRuleForm((f) => ({
+                                ...f,
+                                action: opt.value as RuleAction,
+                              }))
+                            }
+                          />
+                        </FormControl>
+                        <FormControl size="sm">
+                          <FormLabel fontSize="xs" mb={1}>
+                            Server patterns (comma-separated)
+                          </FormLabel>
+                          <Input
+                            size="sm"
+                            fontFamily="mono"
+                            placeholder="e.g. github, *"
+                            value={createRuleForm.server_patterns}
+                            onChange={(e) =>
+                              setCreateRuleForm((f) => ({
+                                ...f,
+                                server_patterns: e.target.value,
+                              }))
+                            }
+                          />
+                        </FormControl>
+                        <FormControl size="sm">
+                          <FormLabel fontSize="xs" mb={1}>
+                            Tool patterns (comma-separated)
+                          </FormLabel>
+                          <Input
+                            size="sm"
+                            fontFamily="mono"
+                            placeholder="e.g. list_issues, *"
+                            value={createRuleForm.tool_patterns}
+                            onChange={(e) =>
+                              setCreateRuleForm((f) => ({
+                                ...f,
+                                tool_patterns: e.target.value,
+                              }))
+                            }
+                          />
+                        </FormControl>
+                        <FormControl size="sm">
+                          <FormLabel fontSize="xs" mb={1}>
+                            Description (optional)
+                          </FormLabel>
+                          <Input
+                            size="sm"
+                            placeholder="e.g. Allow GitHub read tools"
+                            value={createRuleForm.description}
+                            onChange={(e) =>
+                              setCreateRuleForm((f) => ({
+                                ...f,
+                                description: e.target.value,
+                              }))
+                            }
+                          />
+                        </FormControl>
+                      </VStack>
+                    </ModalBody>
+                    <ModalFooter gap={2}>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setShowCreateRule(false)}
+                        data-testid="create-rule-modal-cancel-button">
+                        Cancel
+                      </Button>
+                      <Button
+                        variant="primary"
+                        size="sm"
+                        isLoading={createRule.isLoading}
+                        onClick={handleSaveRule}
+                        data-testid="create-rule-modal-save-button">
+                        Save Rule
+                      </Button>
+                    </ModalFooter>
+                  </ModalContent>
+                </Modal>
+
+                {detail.result != null && (
+                  <Box>
+                    <Header mb={2}>Result</Header>
+                    {(() => {
+                      const d = extractDiff(detail.result);
+                      if (d)
+                        return <DiffViewer diff={d.diff} filePath={d.path} />;
+                      return (
                         <Code
                           display="block"
                           whiteSpace="pre-wrap"
@@ -1633,60 +1596,68 @@ const Invocations: React.FC = () => {
                           borderRadius="md"
                           bg="background.container.subtle"
                           w="full">
-                          {JSON.stringify(detail.error, null, 2)}
+                          {JSON.stringify(detail.result, null, 2)}
                         </Code>
-                      </Box>
-                    )}
+                      );
+                    })()}
+                  </Box>
+                )}
 
-                    <Box>
-                      <Text
-                        fontSize="xs"
-                        fontWeight="semibold"
-                        textTransform="uppercase"
-                        color="text.subtle"
-                        letterSpacing="wide"
-                        mb={2}>
-                        Events
-                      </Text>
-                      {eventsLoading ? (
-                        <Spinner size="sm" color="brand.base" />
-                      ) : (eventsData?.items ?? []).length === 0 ? (
-                        <Text fontSize="sm" color="text.subtle">
-                          No events recorded.
-                        </Text>
-                      ) : (
-                        <Box
-                          borderWidth={1}
-                          borderColor="border.base"
-                          borderRadius="md"
-                          overflow="hidden">
-                          <Table size="sm" variant="simple">
-                            <Thead bg="background.table.header">
-                              <Tr>
-                                <Th />
-                                <Th>Event</Th>
-                                <Th>Date</Th>
-                              </Tr>
-                            </Thead>
-                            <Tbody>
-                              {(eventsData?.items ?? []).map((evt, i) => (
-                                <EventRow
-                                  key={`${evt.timestamp}-${evt.type}-${String(i)}`}
-                                  event={evt}
-                                />
-                              ))}
-                            </Tbody>
-                          </Table>
-                        </Box>
-                      )}
-                    </Box>
-                  </VStack>
+                {detail.error != null && (
+                  <Box>
+                    <Header mb={2}>Error</Header>
+                    <Code
+                      display="block"
+                      whiteSpace="pre-wrap"
+                      fontSize="xs"
+                      p={3}
+                      borderRadius="md"
+                      bg="background.container.subtle"
+                      w="full">
+                      {JSON.stringify(detail.error, null, 2)}
+                    </Code>
+                  </Box>
                 )}
-              </Box>
-            )
-          }
-        />
-      </Box>
+
+                <Box>
+                  <Header mb={2}>Events</Header>
+                  {eventsLoading ? (
+                    <Spinner size="sm" color="brand.base" />
+                  ) : (eventsData?.items ?? []).length === 0 ? (
+                    <Text fontSize="sm" color="text.subtle">
+                      No events recorded.
+                    </Text>
+                  ) : (
+                    <Box
+                      borderWidth={1}
+                      borderColor="border.base"
+                      borderRadius="md"
+                      overflow="hidden">
+                      <Table size="sm" variant="simple">
+                        <Thead bg="background.table.header">
+                          <Tr>
+                            <Th />
+                            <Th>Event</Th>
+                            <Th>Date</Th>
+                          </Tr>
+                        </Thead>
+                        <Tbody>
+                          {(eventsData?.items ?? []).map((evt, i) => (
+                            <EventRow
+                              key={`${evt.timestamp}-${evt.type}-${String(i)}`}
+                              event={evt}
+                            />
+                          ))}
+                        </Tbody>
+                      </Table>
+                    </Box>
+                  )}
+                </Box>
+              </VStack>
+            )}
+          </ModalBody>
+        </ModalContent>
+      </Modal>
     </Box>
   );
 };