P2 BLOCKING exit green: approval interception chain end-to-end

- tc-tools: Effect declarations -> §15 GatedCategory mapping, deny-by-default
  external reach, taint invariant property-tested (tainted external effects
  are NEVER auto-allowed)
- tc-safety: pending approvals with exact payload+preview, CAS decide with
  audit + single-use grant in one tx, checkpoint suspend/load, exclusive
  resume claim, expiry sweep, decided-unresumed work queue (migration 0004
  adds the outbox the gated email.send tool writes)
- tc-runtime: resumable LoopState checkpointed to agent_runs; gated tool ->
  approval row -> approval_required/run_suspended events -> suspend; resume
  consumes the grant BEFORE executing (spent grant = no execution), rejection
  feeds a structured refusal in-band; durable resume sweeper; continuous
  journal seq across suspension (tested). ContentPart::Text became a struct
  variant — internally-tagged newtype primitives don't serialize
- tc-api: GET/decide approvals endpoints (409 double-decide, tenant
  isolation), decision triggers in-process resume; full chain proven over
  HTTP incl. gateway resumeFrom continuation
- frontend: approval_required/run_suspended events, suspended reply state,
  inline ApprovalCard (§10: summary, category, exact payload preview,
  approve/reject -> decide + stream re-attach), /approvals queue page, nav
- E2E (14 journeys, workers:1 to serialize the shared backend): gated email
  blocks with disabled composer -> approve -> continuation + ✓ step + reload
  replay; reject -> ✗ step, nothing executed; queue page decides pending

106 Rust + 61 frontend tests + 14 Playwright journeys green.

Co-Authored-By: Claude Fable 5 <[email protected]>

frontend/src/components/chat/MessageList.tsx

@@ -5,8 +5,11 @@ import { useEffect, useRef } from "react";
 import type { UiMessage } from "@/lib/gateway/transcript";
 import type { Agent } from "@/lib/api/schemas";
 import { Avatar } from "@/components/ui/Avatar";
+import { ApprovalCard } from "@/components/safety/ApprovalCard";
 import { StepTrace } from "./steps/StepTrace";
 
+type DecideFn = (approvalId: string, decision: "approve" | "reject") => void;
+
 function UserBubble({ message }: { message: UiMessage }) {
   return (
     <div className="flex justify-end">
@@ -21,7 +24,15 @@ function UserBubble({ message }: { message: UiMessage }) {
   );
 }
 
-function AgentMessage({ message, agent }: { message: UiMessage; agent: Agent }) {
+function AgentMessage({
+  message,
+  agent,
+  onDecide,
+}: {
+  message: UiMessage;
+  agent: Agent;
+  onDecide: DecideFn;
+}) {
   return (
     <div className="flex gap-2">
       <Avatar name={agent.name} accent={agent.accent} size="sm" />
@@ -40,6 +51,13 @@ function AgentMessage({ message, agent }: { message: UiMessage; agent: Agent })
             Something went wrong with this reply.
           </p>
         )}
+        {message.status === "suspended" && message.pendingApproval && (
+          <ApprovalCard
+            approval={message.pendingApproval}
+            agentName={agent.name}
+            onDecide={onDecide}
+          />
+        )}
         <StepTrace steps={message.steps} />
       </div>
     </div>
@@ -50,9 +68,11 @@ function AgentMessage({ message, agent }: { message: UiMessage; agent: Agent })
 export function MessageList({
   messages,
   agent,
+  onDecide,
 }: {
   messages: UiMessage[];
   agent: Agent;
+  onDecide: DecideFn;
 }) {
   const bottomRef = useRef<HTMLDivElement>(null);
   const tailText = messages.at(-1)?.text;
@@ -70,7 +90,12 @@ export function MessageList({
         message.role === "user" ? (
           <UserBubble key={message.id} message={message} />
         ) : (
-          <AgentMessage key={message.id} message={message} agent={agent} />
+          <AgentMessage
+            key={message.id}
+            message={message}
+            agent={agent}
+            onDecide={onDecide}
+          />
         ),
       )}
       <div ref={bottomRef} />