diff --git a/ui/components/TransactionTimeline.stories.tsx b/ui/components/TransactionTimeline.stories.tsx
index d4b56213..051c0a26 100644
--- a/ui/components/TransactionTimeline.stories.tsx
+++ b/ui/components/TransactionTimeline.stories.tsx
@@ -9,9 +9,9 @@ const minsAgo = (n: number) => new Date(Date.now() - n * 60_000).toISOString();
 // ─── Per-story event fixtures ──────────────────────────────────────────────────
 
 const PENDING_EVENTS: TxEvent[] = [
-  { status: "initiated",     timestamp: minsAgo(14), detail: "via ACH transfer" },
-  { status: "awaiting_user", timestamp: minsAgo(12), detail: "Reference: ANC-20240115-0042" },
-  { status: "pending",       timestamp: minsAgo(3),  description: "Funds detected on the ACH rail — awaiting settlement." },
+  { status: "initiated",     timestamp: minsAgo(14), detail: "via ACH transfer", rawApiResponse: { transaction: { id: "dep_8f3c1a9e2b", status: "completed", kind: "deposit", amount_in: "250.00", asset_code: "USDC" } } },
+  { status: "awaiting_user", timestamp: minsAgo(12), detail: "Reference: ANC-20240115-0042", rawApiResponse: { transaction: { id: "dep_8f3c1a9e2b", status: "pending_user_transfer_start", more_info_url: "https://anchor.example.com/sep24/transaction/dep_8f3c1a9e2b" } } },
+  { status: "pending",       timestamp: minsAgo(3),  description: "Funds detected on the ACH rail — awaiting settlement.", rawApiResponse: { transaction: { id: "dep_8f3c1a9e2b", status: "pending_external", amount_in: "250.00", amount_fee: "1.50" } } },
 ];
 
 const AWAITING_USER_EVENTS: TxEvent[] = [
@@ -33,14 +33,16 @@ const COMPLETED_EVENTS: TxEvent[] = [
 ];
 
 const FAILED_EVENTS: TxEvent[] = [
-  { status: "initiated",     timestamp: minsAgo(50), detail: "to SEPA •••• 4821" },
-  { status: "awaiting_user", timestamp: minsAgo(49) },
-  { status: "pending",       timestamp: minsAgo(44) },
+  { status: "initiated",     timestamp: minsAgo(50), detail: "to SEPA •••• 4821", rawApiResponse: { transaction: { id: "wdl_9b3e7c1a4f", status: "completed", kind: "withdrawal" } } },
+  { status: "awaiting_user", timestamp: minsAgo(49), rawApiResponse: { transaction: { id: "wdl_9b3e7c1a4f", status: "pending_user_transfer_start" } } },
+  { status: "pending",       timestamp: minsAgo(44), rawApiResponse: { transaction: { id: "wdl_9b3e7c1a4f", status: "pending_external" } } },
   {
     status: "failed",
     timestamp: minsAgo(22),
     label: "Bank Rejected",
     description: "Destination bank rejected the transfer. Please verify your IBAN and try again.",
+    error: "SEPA transfer declined: invalid IBAN checksum (error code: RJCT-AC01)",
+    rawApiResponse: { transaction: { id: "wdl_9b3e7c1a4f", status: "error", message: "Bank rejected: invalid IBAN", external_transaction_id: "SEPA-20240115-9821" } },
   },
 ];
 
diff --git a/ui/components/TransactionTimeline.tsx b/ui/components/TransactionTimeline.tsx
index 6ae207e0..522f3a64 100644
--- a/ui/components/TransactionTimeline.tsx
+++ b/ui/components/TransactionTimeline.tsx
@@ -334,23 +334,35 @@ export function TransactionTimeline({
 
                 {/* Content */}
                 <div style={{ flex: 1, paddingTop: 8, minWidth: 0 }}>
-                  <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
-                    <span style={{
-                      ...sans, fontSize: 13, fontWeight: 600,
-                      color: step.isDone || step.isActive ? "var(--ak-text)" : "var(--ak-text-subtle)",
-                      transition: "color 0.4s",
-                    }}>
-                      {step.event?.label ?? step.m.label}
-                    </span>
-                    {step.isDone && !step.isActive && (
+                  <div
+                    onClick={() => setExpandedStep(expandedStep === step.status ? null : step.status)}
+                    style={{ cursor: "pointer", userSelect: "none" }}
+                  >
+                    <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
                       <span style={{
-                        ...mono, fontSize: 9, fontWeight: 700, letterSpacing: "0.12em",
-                        padding: "2px 7px", borderRadius: 10,
-                        background: step.m.bg, color: step.m.color,
-                        border: `1px solid ${step.m.border}`,
-                      }}>DONE</span>
-                    )}
-                    {step.isActive && (
+                        ...sans, fontSize: 13, fontWeight: 600,
+                        color: step.isDone || step.isActive ? "var(--ak-text)" : "var(--ak-text-subtle)",
+                        transition: "color 0.4s",
+                      }}>
+                        {step.event?.label ?? step.m.label}
+                      </span>
+                      {step.isDone && !step.isActive && (
+                        <span style={{
+                          ...mono, fontSize: 9, fontWeight: 700, letterSpacing: "0.12em",
+                          padding: "2px 7px", borderRadius: 10,
+                          background: step.m.bg, color: step.m.color,
+                          border: `1px solid ${step.m.border}`,
+                        }}>DONE</span>
+                      )}
+                      {step.isActive && (
+                        <span style={{
+                          ...mono, fontSize: 9, fontWeight: 700, letterSpacing: "0.12em",
+                          padding: "2px 7px", borderRadius: 10,
+                          background: step.m.bg, color: step.m.color,
+                          border: `1px solid ${step.m.border}`,
+                          animation: "txs-fade-in-out 1.8s ease-in-out infinite",
+                        }}>LIVE</span>
+                      )}
                       <span style={{
                         ...mono, fontSize: 9, fontWeight: 700, letterSpacing: "0.12em",
                         padding: "2px 7px", borderRadius: 10,
@@ -483,17 +495,52 @@ export function TransactionTimeline({
                 }}>✕</div>
               </div>
               <div style={{ flex: 1, paddingTop: 8 }}>
-                <div style={{ ...sans, fontSize: 13, fontWeight: 600, color: "var(--ak-status-failed-color)", marginBottom: 4 }}>
-                  {events.find(e => e.status === "failed")?.label ?? "Transaction Failed"}
+                <div
+                  onClick={() => setExpandedStep(expandedStep === "failed" ? null : "failed")}
+                  style={{ cursor: "pointer", userSelect: "none" }}
+                >
+                  <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
+                    <span style={{ ...sans, fontSize: 13, fontWeight: 600, color: "var(--ak-status-failed-color)" }}>
+                      {events.find(e => e.status === "failed")?.label ?? "Transaction Failed"}
+                    </span>
+                    <span style={{ ...mono, fontSize: 10, color: "var(--ak-text-subtle)", marginLeft: "auto", display: "inline-block", transition: "transform 0.2s", transform: expandedStep === "failed" ? "rotate(180deg)" : "rotate(0deg)" }}>▾</span>
+                  </div>
+                  <p style={{ ...sans, fontSize: 12, color: "var(--ak-status-failed-color)", lineHeight: 1.55, margin: 0 }}>
+                    {events.find(e => e.status === "failed")?.description ?? DEFAULT_DESCRIPTIONS.failed[type]}
+                  </p>
+                  {events.find(e => e.status === "failed")?.timestamp && (
+                    <span style={{ ...mono, fontSize: 10, color: "var(--ak-status-failed-color)", marginTop: 4, display: "block" }}>
+                      {formatTs(events.find(e => e.status === "failed")!.timestamp)}
+                    </span>
+                  )}
                 </div>
-                <p style={{ ...sans, fontSize: 12, color: "var(--ak-status-failed-color)", lineHeight: 1.55, margin: 0 }}>
-                  {events.find(e => e.status === "failed")?.description ?? DEFAULT_DESCRIPTIONS.failed[type]}
-                </p>
-                {events.find(e => e.status === "failed")?.timestamp && (
-                  <span style={{ ...mono, fontSize: 10, color: "var(--ak-status-failed-color)", marginTop: 4, display: "block" }}>
-                    {formatTs(events.find(e => e.status === "failed")!.timestamp)}
-                  </span>
-                )}
+                {expandedStep === "failed" && (() => {
+                  const ev = events.find(e => e.status === "failed");
+                  return (
+                    <div style={{ marginTop: 10, padding: "12px 14px", borderRadius: 10, border: "1px solid var(--ak-status-failed-border)", background: "var(--ak-status-failed-bg)", display: "flex", flexDirection: "column", gap: 8 }}>
+                      {ev?.timestamp && (
+                        <div>
+                          <span style={{ ...mono, fontSize: 9, letterSpacing: "0.1em", color: "var(--ak-status-failed-color)", textTransform: "uppercase", display: "block", marginBottom: 2 }}>Timestamp</span>
+                          <span style={{ ...mono, fontSize: 11, color: "var(--ak-status-failed-color)" }}>{ev.timestamp}</span>
+                        </div>
+                      )}
+                      {ev?.error && (
+                        <div>
+                          <span style={{ ...mono, fontSize: 9, letterSpacing: "0.1em", color: "var(--ak-status-failed-color)", textTransform: "uppercase", display: "block", marginBottom: 2 }}>Error</span>
+                          <span style={{ ...mono, fontSize: 11, color: "var(--ak-status-failed-color)" }}>{ev.error}</span>
+                        </div>
+                      )}
+                      {ev?.rawApiResponse !== undefined && (
+                        <div>
+                          <span style={{ ...mono, fontSize: 9, letterSpacing: "0.1em", color: "var(--ak-status-failed-color)", textTransform: "uppercase", display: "block", marginBottom: 2 }}>Raw API Response</span>
+                          <pre style={{ ...mono, fontSize: 10, color: "var(--ak-status-failed-color)", background: "var(--ak-surface-3)", padding: "10px 12px", borderRadius: 8, border: "1px solid var(--ak-status-failed-border)", overflowX: "auto", margin: 0, whiteSpace: "pre-wrap", wordBreak: "break-all", maxHeight: 200, overflowY: "auto" }}>
+                            {JSON.stringify(ev.rawApiResponse, null, 2)}
+                          </pre>
+                        </div>
+                      )}
+                    </div>
+                  );
+                })()}
               </div>
             </div>
           )}