diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..f06eeba
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,17 @@
+node_modules/
+frontend/node_modules/
+
+.next/
+frontend/.next/
+dist/
+build/
+coverage/
+
+.agents/
+.claude/
+repo-to-text/
+
+*.log
+*.pid
+*.pidfile
+*.tsbuildinfo
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..168d9d2
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "endOfLine": "auto"
+}
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index af62e2f..8a1995c 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -71,6 +71,945 @@ body {
   top: 72px;
 }
 
+/* ==========================================================================
+   Statistics
+   ========================================================================== */
+
+.stats-page-shell,
+.stats-page-inner {
+  min-width: 0;
+}
+.stats-page-shell {
+  background: transparent;
+}
+.stats-page {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  padding-bottom: 18px;
+}
+.stats-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+.stats-title {
+  margin: 0;
+  color: white;
+  font-size: clamp(26px, 3.5vw, 34px);
+  font-weight: 800;
+  line-height: 1;
+}
+.stats-subtitle {
+  margin: 5px 0 0;
+  color: var(--muted-2);
+  font-size: 13.5px;
+}
+.stats-cycle-select {
+  width: min(260px, 100%);
+}
+.stats-cycle-select--panel {
+  min-width: 150px;
+}
+.stats-primary-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(218px, 260px);
+  gap: 10px;
+  align-items: stretch;
+}
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 1px;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--border);
+}
+.stats-side-table {
+  grid-template-columns: 1fr;
+}
+.stats-tile {
+  min-width: 0;
+  padding: 10px 11px;
+  background: var(--secondary);
+}
+.stats-side-table .stats-tile {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-content: center;
+  align-items: baseline;
+  column-gap: 10px;
+  min-height: 0;
+  padding: 10px 11px;
+}
+.stats-tile-label {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  color: var(--muted-1);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+}
+.stats-side-table .stats-tile-label {
+  font-size: 11.5px;
+}
+.stats-tile-value {
+  margin-top: 9px;
+  font-size: clamp(24px, 3.2vw, 34px);
+  font-weight: 800;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+.stats-side-table .stats-tile-value {
+  margin-top: 0;
+  font-size: clamp(19px, 2vw, 25px);
+  text-align: right;
+}
+.stats-tile-detail {
+  margin-top: 5px;
+  color: var(--muted-3);
+  font-size: 11.5px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+.stats-side-table .stats-tile-detail {
+  grid-column: 1 / -1;
+  margin-top: 5px;
+}
+.stats-panel {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-soft);
+}
+.stats-panel {
+  overflow: hidden;
+}
+.stats-flow-panel {
+  border-color: rgba(255, 226, 47, 0.13);
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
+}
+.stats-flow-panel--primary {
+  min-width: 0;
+}
+.stats-panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 10px 12px;
+}
+.stats-panel-head {
+  border-bottom: 1px solid var(--border);
+}
+.stats-flow-title-wrap {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.stats-flow-title-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+}
+.stats-flow-title-row h2 {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.stats-flow-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.stats-export-button {
+  min-height: 34px;
+  padding: 0 10px;
+  border: 1px solid rgba(255, 226, 47, 0.2);
+  border-radius: 0.5rem;
+  background: rgba(255, 226, 47, 0.08);
+  color: var(--accent);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 900;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    border-color 0.12s ease,
+    background-color 0.12s ease,
+    color 0.12s ease;
+}
+.stats-export-button:hover {
+  border-color: rgba(255, 226, 47, 0.36);
+  background: rgba(255, 226, 47, 0.14);
+  color: #fff1a6;
+}
+.stats-export-button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.stats-panel-body {
+  padding: 10px 12px;
+}
+.stats-panel h2 {
+  margin: 0;
+  color: white;
+  font-size: 15px;
+  font-weight: 800;
+  line-height: 1.1;
+}
+.stats-panel p {
+  margin: 5px 0 0;
+  color: var(--muted-2);
+  font-size: 12px;
+  line-height: 1.35;
+}
+.stats-tracked-pill {
+  min-height: 26px;
+  padding: 0 9px;
+  border: 1px solid rgba(255, 226, 47, 0.2);
+  border-radius: 999px;
+  background: rgba(255, 226, 47, 0.08);
+  color: var(--accent);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 11.5px;
+  font-weight: 800;
+  line-height: 1;
+  white-space: nowrap;
+}
+.stats-sankey-shell {
+  position: relative;
+  min-height: 360px;
+  padding: 8px;
+  overflow: hidden;
+  background: #1a1a1a;
+}
+.stats-flow-panel--primary .stats-sankey-shell {
+  min-height: 500px;
+}
+.stats-flow-panel--primary .stats-sankey {
+  height: 100%;
+  min-height: 500px;
+}
+.stats-pipeline-dots {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+.stats-empty-state {
+  position: relative;
+  z-index: 1;
+  min-height: 340px;
+  border: 1px dashed var(--border);
+  border-radius: 0.6rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 14px;
+  padding: 28px;
+  text-align: center;
+}
+.stats-empty-state h3 {
+  margin: 0;
+  color: white;
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 1.1;
+}
+.stats-empty-state p {
+  max-width: 330px;
+  margin: 7px auto 0;
+  color: var(--muted-2);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+.stats-empty-action {
+  min-height: 32px;
+  padding: 0 13px;
+  border-radius: 0.55rem;
+  background: var(--accent);
+  color: #1f1f1f;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 900;
+  line-height: 1;
+  transition:
+    filter 0.12s ease,
+    transform 0.12s ease;
+}
+.stats-empty-action:hover {
+  filter: brightness(1.05);
+  transform: translateY(-1px);
+}
+.stats-sankey {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  min-width: 0;
+  height: auto;
+  display: block;
+}
+.stats-sankey-link {
+  fill: none;
+  stroke-linecap: round;
+  opacity: 0.34;
+  pointer-events: none;
+}
+.stats-sankey-link--success {
+  opacity: 0.42;
+}
+.stats-sankey-link--danger {
+  opacity: 0.38;
+}
+.stats-sankey-node {
+  cursor: pointer;
+  outline: none;
+}
+.stats-sankey-node rect {
+  stroke-width: 1.5;
+  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.2));
+  transition:
+    filter 0.14s ease,
+    stroke-width 0.14s ease;
+}
+.stats-sankey-node:hover rect,
+.stats-sankey-node:focus-visible rect,
+.stats-sankey-node.is-selected rect {
+  filter: brightness(1.08) drop-shadow(0 14px 26px rgba(0, 0, 0, 0.28));
+  stroke-width: 2;
+}
+.stats-sankey-node-label {
+  fill: rgba(255, 255, 255, 0.86);
+  font-size: 13px;
+  font-weight: 800;
+}
+.stats-sankey-node-value {
+  fill: white;
+  font-size: 27px;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+}
+.stats-sankey-click-label {
+  fill: var(--accent);
+  font-size: 11px;
+  font-weight: 900;
+  letter-spacing: 0;
+}
+.stats-outcome-grid {
+  display: grid;
+  grid-template-columns:
+    minmax(260px, 1.08fr) minmax(210px, 0.78fr)
+    minmax(220px, 0.82fr);
+  gap: 10px;
+}
+.stats-visual-panel {
+  min-height: 112px;
+  padding: 9px 10px;
+  overflow: hidden;
+}
+.stats-mini-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+}
+.stats-mini-head h2 {
+  margin: 0;
+  color: white;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 1;
+}
+.stats-mini-head span {
+  color: var(--muted-3);
+  font-size: 11px;
+  font-weight: 850;
+  line-height: 1;
+  white-space: nowrap;
+}
+.stats-outcome-body {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  margin-top: 7px;
+}
+.stats-outcome-panel {
+  min-height: 176px;
+}
+.stats-outcome-panel .stats-outcome-body {
+  grid-template-columns: 1fr;
+  min-height: 126px;
+  align-content: center;
+  justify-items: center;
+  gap: 8px;
+}
+.stats-outcome-ring {
+  width: 66px;
+  height: 66px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+.stats-outcome-panel .stats-outcome-ring {
+  width: clamp(118px, 10vw, 148px);
+  height: clamp(118px, 10vw, 148px);
+  justify-self: center;
+}
+.stats-outcome-ring > div {
+  width: 46px;
+  height: 46px;
+  border-radius: inherit;
+  background: var(--bg-soft);
+  display: grid;
+  place-items: center;
+  align-content: center;
+}
+.stats-outcome-panel .stats-outcome-ring > div {
+  width: clamp(76px, 7vw, 96px);
+  height: clamp(76px, 7vw, 96px);
+}
+.stats-outcome-ring strong {
+  color: white;
+  font-size: 17px;
+  font-weight: 900;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+.stats-outcome-panel .stats-outcome-ring strong {
+  font-size: clamp(24px, 2.5vw, 32px);
+  line-height: 0.92;
+}
+.stats-outcome-ring span {
+  margin-top: 2px;
+  color: var(--muted-3);
+  font-size: 9px;
+  font-weight: 900;
+  line-height: 1;
+}
+.stats-outcome-panel .stats-outcome-ring span {
+  margin-top: 4px;
+  font-size: 10px;
+}
+.stats-outcome-legend {
+  display: grid;
+  gap: 6px;
+}
+.stats-outcome-panel .stats-outcome-legend {
+  width: 100%;
+  gap: 6px;
+}
+.stats-outcome-legend span {
+  min-width: 0;
+  color: var(--muted-1);
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 7px;
+  font-size: 11px;
+  font-weight: 850;
+  line-height: 1;
+}
+.stats-outcome-panel .stats-outcome-legend span {
+  font-size: 11px;
+}
+.stats-outcome-legend i {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+}
+.stats-outcome-legend strong {
+  color: white;
+  font-variant-numeric: tabular-nums;
+}
+.stats-compact-list,
+.stats-app-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.stats-compact-list {
+  display: grid;
+  gap: 7px;
+}
+.stats-compact-list li {
+  min-width: 0;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  border-radius: 8px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
+    rgba(255, 255, 255, 0.032);
+}
+.stats-compact-list li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 8px;
+}
+.stats-compact-list div {
+  min-width: 0;
+  display: grid;
+  gap: 3px;
+}
+.stats-compact-list strong,
+.stats-compact-list span {
+  overflow: hidden;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.stats-compact-list div span {
+  overflow: hidden;
+  color: var(--muted-2);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.stats-compact-list li > span,
+.stats-compact-list li > strong {
+  flex-shrink: 0;
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 900;
+  font-variant-numeric: tabular-nums;
+}
+.stats-quiet-empty {
+  min-height: 86px;
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+  color: var(--muted-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 700;
+}
+.stats-rejection-bars {
+  width: 100%;
+  display: grid;
+  gap: 6px;
+  margin-top: 8px;
+}
+.stats-rejection-panel {
+  min-height: 176px;
+}
+.stats-rejection-panel .stats-rejection-bars {
+  align-content: center;
+  min-height: 72px;
+}
+.stats-rejection-row {
+  display: grid;
+  grid-template-columns: 118px minmax(0, 1fr);
+  align-items: center;
+  gap: 9px;
+  color: var(--muted-1);
+  font-size: 12px;
+  font-weight: 800;
+}
+.stats-rejection-row > div {
+  height: 22px;
+  overflow: hidden;
+  position: relative;
+  border: 1px solid rgba(255, 115, 81, 0.16);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.04);
+}
+.stats-rejection-row strong {
+  position: absolute;
+  inset: 0 9px 0 auto;
+  z-index: 2;
+  color: white;
+  display: inline-flex;
+  align-items: center;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+.stats-rejection-row > div > span {
+  position: absolute;
+  inset: 0 auto 0 0;
+  border-radius: inherit;
+  background: linear-gradient(90deg, rgba(255, 115, 81, 0.42), #ff7351);
+  transform-origin: left center;
+}
+.stats-rejection-note {
+  margin: 10px 0 0;
+  padding-top: 10px;
+  border-top: 1px solid rgba(255, 255, 255, 0.07);
+  color: var(--muted-2);
+  font-size: 11.5px;
+  font-weight: 800;
+  line-height: 1.3;
+}
+.stats-yield-panel {
+  min-height: 176px;
+}
+.stats-yield-body {
+  display: grid;
+  align-content: center;
+  gap: 9px;
+  min-height: 126px;
+  margin-top: 8px;
+}
+.stats-yield-value {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.stats-yield-value strong {
+  color: white;
+  font-size: clamp(32px, 4vw, 44px);
+  font-weight: 900;
+  line-height: 0.92;
+  font-variant-numeric: tabular-nums;
+}
+.stats-yield-value span {
+  color: var(--muted-2);
+  font-size: 11.5px;
+  font-weight: 800;
+  line-height: 1.2;
+}
+.stats-yield-stack {
+  height: 9px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.055);
+  display: flex;
+}
+.stats-yield-stack span {
+  height: 100%;
+  flex-shrink: 0;
+}
+.stats-yield-stack .is-interview {
+  background: #ffe22f;
+}
+.stats-yield-stack .is-waiting {
+  background: rgba(255, 255, 255, 0.12);
+}
+.stats-yield-body p {
+  margin: 0;
+  color: var(--muted-3);
+  font-size: 11.5px;
+  font-weight: 700;
+  line-height: 1.3;
+}
+.stats-drilldown {
+  position: fixed;
+  inset: 0;
+  z-index: 210;
+  display: flex;
+  justify-content: flex-end;
+}
+.stats-drilldown-backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgba(0, 0, 0, 0.58);
+  backdrop-filter: blur(5px);
+  cursor: default;
+}
+.stats-drilldown-drawer {
+  position: relative;
+  width: min(460px, calc(100vw - 24px));
+  height: 100%;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 220px),
+    #202020;
+  box-shadow: -24px 0 52px rgba(0, 0, 0, 0.28);
+  display: flex;
+  flex-direction: column;
+}
+.stats-drilldown-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 18px;
+  border-bottom: 1px solid var(--border);
+}
+.stats-drilldown-kicker {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--muted-2);
+  font-size: 11px;
+  font-weight: 900;
+  letter-spacing: 0;
+  line-height: 1;
+  text-transform: uppercase;
+}
+.stats-drilldown-kicker span {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+}
+.stats-drilldown-head h2 {
+  margin: 10px 0 0;
+  color: white;
+  font-size: 22px;
+  font-weight: 900;
+  line-height: 1;
+}
+.stats-drilldown-head p {
+  margin: 8px 0 0;
+  color: var(--muted-2);
+  font-size: 12px;
+  font-weight: 650;
+  line-height: 1.35;
+}
+.stats-drilldown-close,
+.stats-app-link {
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.76);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition:
+    border-color 0.12s ease,
+    color 0.12s ease,
+    transform 0.12s ease;
+}
+.stats-drilldown-close:hover,
+.stats-app-link:hover {
+  border-color: rgba(255, 226, 47, 0.42);
+  color: var(--accent);
+  transform: translateY(-1px);
+}
+.stats-drilldown-count {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  padding: 16px 18px 14px;
+}
+.stats-drilldown-count strong {
+  font-size: 44px;
+  font-weight: 900;
+  line-height: 0.9;
+  font-variant-numeric: tabular-nums;
+}
+.stats-drilldown-count span {
+  color: var(--muted-2);
+  font-size: 12px;
+  font-weight: 800;
+}
+.stats-app-list {
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 14px 18px;
+  display: grid;
+  gap: 10px;
+}
+.stats-app-item {
+  min-width: 0;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.035);
+  display: flex;
+  align-items: flex-start;
+  gap: 11px;
+  padding: 11px;
+}
+.stats-app-copy {
+  min-width: 0;
+  flex: 1;
+}
+.stats-app-title-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+.stats-app-title-row h3 {
+  margin: 0;
+  color: white;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+.stats-app-copy p {
+  margin: 4px 0 0;
+  color: var(--muted-1);
+  font-size: 12px;
+  font-weight: 750;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+}
+.stats-app-link {
+  width: 28px;
+  height: 28px;
+}
+.stats-app-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 9px;
+}
+.stats-stage-pill,
+.stats-app-meta > span:last-child {
+  min-height: 22px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 8px;
+  font-size: 10.5px;
+  font-weight: 900;
+  line-height: 1;
+  white-space: nowrap;
+}
+.stats-app-meta > span:last-child {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--muted-2);
+}
+.stats-drawer-empty {
+  margin: 0 14px 18px;
+  min-height: 180px;
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+  color: var(--muted-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+@media (max-width: 760px) {
+  .stats-header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+  .stats-cycle-select {
+    width: 100%;
+  }
+  .stats-flow-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+  .stats-cycle-select--panel {
+    flex: 1 1 220px;
+    width: 100% !important;
+  }
+  .stats-export-button,
+  .stats-tracked-pill {
+    flex: 0 0 auto;
+  }
+  .stats-primary-grid {
+    grid-template-columns: 1fr;
+  }
+  .stats-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .stats-side-table {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .stats-outcome-grid {
+    grid-template-columns: 1fr;
+  }
+  .stats-panel-head {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .stats-rejection-bars {
+    width: 100%;
+  }
+  .stats-flow-panel--primary .stats-sankey-shell {
+    min-height: 390px;
+  }
+  .stats-flow-panel--primary .stats-sankey {
+    min-height: 390px;
+  }
+  .stats-outcome-panel .stats-outcome-body {
+    grid-template-columns: auto minmax(0, 1fr);
+    min-height: auto;
+    justify-items: stretch;
+  }
+  .stats-outcome-panel .stats-outcome-ring {
+    width: clamp(118px, 28vw, 154px);
+    height: clamp(118px, 28vw, 154px);
+  }
+  .stats-outcome-panel .stats-outcome-legend {
+    width: 100%;
+  }
+}
+
+@media (max-width: 460px) {
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+  .stats-side-table {
+    grid-template-columns: 1fr;
+  }
+  .stats-flow-actions {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+  .stats-cycle-select--panel {
+    grid-column: 1 / -1;
+  }
+  .stats-tracked-pill {
+    min-width: 0;
+    white-space: normal;
+    text-align: center;
+  }
+  .stats-outcome-panel .stats-outcome-body {
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+  .stats-outcome-panel .stats-outcome-ring {
+    width: min(148px, 50vw);
+    height: min(148px, 50vw);
+  }
+  .stats-outcome-panel .stats-outcome-ring > div {
+    width: min(96px, 32vw);
+    height: min(96px, 32vw);
+  }
+  .stats-outcome-panel .stats-outcome-ring strong {
+    font-size: clamp(26px, 8vw, 36px);
+  }
+  .stats-rejection-row {
+    grid-template-columns: 1fr;
+    gap: 6px;
+  }
+}
+
 /* ==========================================================================
    Applications redesign - shared atoms + Kanban
    ========================================================================== */
@@ -631,10 +1570,53 @@ body {
   border-radius: 0.75rem;
   padding: 8px 4px 8px;
   min-height: 420px;
+  overflow: hidden;
+  position: relative;
   transition:
+    border-color 0.16s ease,
+    box-shadow 0.16s ease,
     outline 0.12s ease,
     opacity 0.12s ease;
 }
+.apps-kanban-col.is-accepted-celebrating {
+  animation: apps-column-accepted 2000ms cubic-bezier(0.2, 0.9, 0.25, 1);
+  background: #050505;
+  border-color: rgba(255, 226, 47, 0.42);
+  box-shadow:
+    0 0 0 1px rgba(255, 226, 47, 0.12),
+    0 16px 38px rgba(255, 226, 47, 0.08);
+  will-change: box-shadow, border-color;
+}
+.apps-kanban-col.is-accepted-celebrating::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  background: rgba(0, 0, 0, 0.9);
+  pointer-events: none;
+  animation: apps-column-blackout 2000ms cubic-bezier(0.2, 0.9, 0.25, 1)
+    forwards;
+}
+.apps-kanban-col.is-accepted-celebrating::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  background: linear-gradient(
+    115deg,
+    transparent 0%,
+    rgba(255, 226, 47, 0.14) 34%,
+    rgba(255, 226, 47, 0.04) 48%,
+    transparent 62%
+  );
+  pointer-events: none;
+  animation: apps-column-accepted-sheen 2000ms cubic-bezier(0.2, 0.9, 0.25, 1)
+    forwards;
+}
+.apps-kanban-col > * {
+  position: relative;
+  z-index: 1;
+}
 .apps-kanban-col.is-drop-target {
   outline: 2px dashed var(--accent);
   outline-offset: -2px;
@@ -651,6 +1633,7 @@ body {
   padding: 4px 2px 8px;
   border-bottom: 1px solid var(--border);
   margin-bottom: 8px;
+  position: relative;
 }
 .apps-kc-col-head-left {
   display: flex;
@@ -688,6 +1671,140 @@ body {
   align-items: center;
   gap: 4px;
 }
+.apps-accepted-column-toast {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  z-index: 5;
+  max-width: calc(100% - 72px);
+  padding: 7px 12px;
+  border-radius: 999px;
+  background: var(--accent);
+  color: #1f1f1f;
+  font-size: 12px;
+  font-weight: 900;
+  line-height: 1;
+  text-align: center;
+  pointer-events: none;
+  transform: translateX(-50%);
+  box-shadow: 0 8px 18px rgba(255, 226, 47, 0.22);
+  animation: apps-column-congrats 2000ms cubic-bezier(0.2, 0.9, 0.25, 1)
+    forwards;
+}
+.apps-accepted-column-confetti {
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+  overflow: hidden;
+  pointer-events: none;
+}
+.apps-accepted-column-confetti span {
+  position: absolute;
+  left: 50%;
+  top: 20px;
+  width: 5px;
+  height: 8px;
+  border-radius: 2px;
+  background: var(--accent);
+  opacity: 0;
+  transform-origin: center;
+  animation: apps-column-confetti 1180ms cubic-bezier(0.2, 0.9, 0.25, 1)
+    forwards;
+  animation-delay: var(--confetti-delay, 0ms);
+}
+.apps-accepted-column-confetti span:nth-child(2n) {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+}
+.apps-accepted-column-confetti span:nth-child(3n) {
+  width: 8px;
+  height: 4px;
+  background: #fff1a6;
+}
+.apps-accepted-column-confetti span:nth-child(1) {
+  --confetti-x: -92px;
+  --confetti-y: 44px;
+  --confetti-rotate: -38deg;
+}
+.apps-accepted-column-confetti span:nth-child(2) {
+  --confetti-x: -66px;
+  --confetti-y: 92px;
+  --confetti-rotate: 72deg;
+  --confetti-delay: 30ms;
+}
+.apps-accepted-column-confetti span:nth-child(3) {
+  --confetti-x: -28px;
+  --confetti-y: 60px;
+  --confetti-rotate: -92deg;
+  --confetti-delay: 55ms;
+}
+.apps-accepted-column-confetti span:nth-child(4) {
+  --confetti-x: 24px;
+  --confetti-y: 82px;
+  --confetti-rotate: 104deg;
+  --confetti-delay: 10ms;
+}
+.apps-accepted-column-confetti span:nth-child(5) {
+  --confetti-x: 70px;
+  --confetti-y: 42px;
+  --confetti-rotate: 36deg;
+  --confetti-delay: 45ms;
+}
+.apps-accepted-column-confetti span:nth-child(6) {
+  --confetti-x: 96px;
+  --confetti-y: 96px;
+  --confetti-rotate: -64deg;
+  --confetti-delay: 80ms;
+}
+.apps-accepted-column-confetti span:nth-child(7) {
+  --confetti-x: -112px;
+  --confetti-y: 148px;
+  --confetti-rotate: 118deg;
+  --confetti-delay: 100ms;
+}
+.apps-accepted-column-confetti span:nth-child(8) {
+  --confetti-x: 116px;
+  --confetti-y: 152px;
+  --confetti-rotate: -126deg;
+  --confetti-delay: 120ms;
+}
+.apps-accepted-column-confetti span:nth-child(9) {
+  --confetti-x: -52px;
+  --confetti-y: 178px;
+  --confetti-rotate: 156deg;
+  --confetti-delay: 70ms;
+}
+.apps-accepted-column-confetti span:nth-child(10) {
+  --confetti-x: 50px;
+  --confetti-y: 188px;
+  --confetti-rotate: -158deg;
+  --confetti-delay: 95ms;
+}
+.apps-accepted-column-confetti span:nth-child(11) {
+  --confetti-x: -104px;
+  --confetti-y: 250px;
+  --confetti-rotate: -82deg;
+  --confetti-delay: 145ms;
+}
+.apps-accepted-column-confetti span:nth-child(12) {
+  --confetti-x: 104px;
+  --confetti-y: 252px;
+  --confetti-rotate: 82deg;
+  --confetti-delay: 150ms;
+}
+.apps-accepted-column-confetti span:nth-child(13) {
+  --confetti-x: -14px;
+  --confetti-y: 224px;
+  --confetti-rotate: 212deg;
+  --confetti-delay: 125ms;
+}
+.apps-accepted-column-confetti span:nth-child(14) {
+  --confetti-x: 12px;
+  --confetti-y: 126px;
+  --confetti-rotate: -214deg;
+  --confetti-delay: 35ms;
+}
 .apps-kc-col-name {
   font-weight: 700;
   font-size: 15px;
@@ -824,6 +1941,93 @@ body {
   pointer-events: none;
   will-change: opacity, transform;
 }
+@keyframes apps-column-accepted {
+  0% {
+    border-color: rgba(255, 226, 47, 0.2);
+  }
+  16% {
+    border-color: rgba(255, 226, 47, 0.62);
+    box-shadow:
+      0 0 0 1px rgba(255, 226, 47, 0.2),
+      0 16px 38px rgba(255, 226, 47, 0.12);
+  }
+  70% {
+    border-color: rgba(255, 226, 47, 0.38);
+  }
+  100% {
+    border-color: rgba(255, 226, 47, 0.2);
+  }
+}
+@keyframes apps-column-blackout {
+  0% {
+    opacity: 1;
+  }
+  12%,
+  74% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes apps-column-accepted-sheen {
+  0% {
+    opacity: 0;
+    transform: translateX(-95%);
+  }
+  12% {
+    opacity: 1;
+  }
+  54% {
+    opacity: 0.42;
+    transform: translateX(92%);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(92%);
+  }
+}
+@keyframes apps-column-congrats {
+  0% {
+    opacity: 0;
+    transform: translate3d(-50%, 5px, 0) scale(0.96);
+  }
+  12%,
+  72% {
+    opacity: 1;
+    transform: translate3d(-50%, 0, 0) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(-50%, -5px, 0) scale(0.98);
+  }
+}
+@keyframes apps-column-confetti {
+  0% {
+    opacity: 0;
+    transform: translate3d(-50%, 0, 0) rotate(0deg) scale(0.35);
+  }
+  14% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(calc(-50% + var(--confetti-x)), var(--confetti-y), 0)
+      rotate(var(--confetti-rotate)) scale(0.94);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .apps-kanban-col.is-accepted-celebrating,
+  .apps-kanban-col.is-accepted-celebrating::before,
+  .apps-kanban-col.is-accepted-celebrating::after,
+  .apps-accepted-column-toast,
+  .apps-accepted-column-confetti span {
+    animation: none;
+  }
+  .apps-accepted-column-confetti {
+    display: none;
+  }
+}
 .apps-started-action {
   position: absolute;
   top: -1px;
diff --git a/frontend/src/app/my-applications/actions.ts b/frontend/src/app/my-applications/actions.ts
index 76a4b23..a0eaf64 100644
--- a/frontend/src/app/my-applications/actions.ts
+++ b/frontend/src/app/my-applications/actions.ts
@@ -2,12 +2,15 @@
 
 import { getMongoClientPromise } from "@/lib/mongodb";
 import { getAuthOptions } from "@/lib/auth";
+import logger from "@/lib/logger";
 import { getServerSession } from "next-auth";
 import type { Db } from "mongodb";
 import { ObjectId } from "mongodb";
 import {
   ApplicationJobSnapshot,
   ApplicationStatus,
+  ApplicationStatusEvent,
+  ApplicationStatusEventSource,
   DbApplication,
   DEFAULT_RECRUITMENT_CYCLE_ID,
   LocalApplication,
@@ -36,6 +39,19 @@ type ApplicationRecord = {
   starred?: boolean;
 };
 
+type ApplicationStatusEventRecord = {
+  _id: ObjectId;
+  userId: ObjectId;
+  jobId: string;
+  fromStatus?: ApplicationStatus | null;
+  toStatus: ApplicationStatus;
+  cycleId?: string;
+  source: ApplicationStatusEventSource;
+  createdAt: Date;
+};
+
+let statusEventIndexesPromise: Promise<string[]> | null = null;
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function requireUserId(session: any) {
   const id = (session?.user as { id?: string } | undefined)?.id;
@@ -77,6 +93,20 @@ function serializeApplication(
   };
 }
 
+function serializeStatusEvent(
+  doc: ApplicationStatusEventRecord,
+): ApplicationStatusEvent {
+  return {
+    _id: doc._id.toString(),
+    jobId: doc.jobId,
+    fromStatus: doc.fromStatus ?? null,
+    toStatus: doc.toStatus,
+    cycleId: doc.cycleId,
+    source: doc.source,
+    createdAt: new Date(doc.createdAt).toISOString(),
+  };
+}
+
 async function ensureDefaultCycle(db: Db, userObjectId: ObjectId) {
   const now = new Date();
 
@@ -96,6 +126,68 @@ async function ensureDefaultCycle(db: Db, userObjectId: ObjectId) {
   );
 }
 
+async function ensureStatusEventIndexes(db: Db) {
+  statusEventIndexesPromise ??= db
+    .collection<ApplicationStatusEventRecord>("application_status_events")
+    .createIndexes([
+      {
+        key: { userId: 1, createdAt: -1 },
+        name: "application_status_events_user_created",
+      },
+      {
+        key: { userId: 1, jobId: 1, createdAt: 1 },
+        name: "application_status_events_user_job_created",
+      },
+    ]);
+
+  try {
+    await statusEventIndexesPromise;
+  } catch (error) {
+    statusEventIndexesPromise = null;
+    logger.warn({ error }, "Failed to ensure application status event indexes");
+  }
+}
+
+async function recordApplicationStatusEvent(
+  db: Db,
+  userObjectId: ObjectId,
+  event: {
+    jobId: string;
+    fromStatus?: ApplicationStatus | null;
+    toStatus: ApplicationStatus;
+    cycleId?: string;
+    source: ApplicationStatusEventSource;
+  },
+) {
+  if (event.fromStatus === event.toStatus) return;
+
+  try {
+    await ensureStatusEventIndexes(db);
+    await db
+      .collection<ApplicationStatusEventRecord>("application_status_events")
+      .insertOne({
+        _id: new ObjectId(),
+        userId: userObjectId,
+        jobId: event.jobId,
+        fromStatus: event.fromStatus ?? null,
+        toStatus: event.toStatus,
+        cycleId: event.cycleId,
+        source: event.source,
+        createdAt: new Date(),
+      });
+  } catch (error) {
+    logger.warn(
+      {
+        error,
+        jobId: event.jobId,
+        fromStatus: event.fromStatus,
+        toStatus: event.toStatus,
+      },
+      "Failed to record application status event",
+    );
+  }
+}
+
 export async function listRecruitmentCycles(): Promise<RecruitmentCycle[]> {
   const session = await getServerSession(getAuthOptions());
   const userId = requireUserId(session);
@@ -203,6 +295,7 @@ export async function deleteRecruitmentCycle(cycleId: string) {
 export async function syncLocalApplications(apps: LocalApplication[]) {
   const session = await getServerSession(getAuthOptions());
   const userId = requireUserId(session);
+  const userObjectId = new ObjectId(userId);
 
   if (!apps.length) return { ok: true, upserted: 0 };
 
@@ -213,8 +306,8 @@ export async function syncLocalApplications(apps: LocalApplication[]) {
   let upserted = 0;
 
   for (const app of apps) {
-    await collection.updateOne(
-      { userId: new ObjectId(userId), jobId: app.jobId },
+    const result = await collection.updateOne(
+      { userId: userObjectId, jobId: app.jobId },
       {
         $setOnInsert: {
           startedAt: new Date(app.startedAt),
@@ -229,6 +322,15 @@ export async function syncLocalApplications(apps: LocalApplication[]) {
       },
       { upsert: true },
     );
+    if (result.upsertedCount > 0) {
+      await recordApplicationStatusEvent(db, userObjectId, {
+        jobId: app.jobId,
+        fromStatus: null,
+        toStatus: app.status,
+        cycleId: app.cycleId ?? DEFAULT_RECRUITMENT_CYCLE_ID,
+        source: "local_sync",
+      });
+    }
     upserted += 1;
   }
 
@@ -278,19 +380,45 @@ export async function listApplications(): Promise<DbApplication[]> {
   return docs.map((d) => serializeApplication(d, logoMap.get(d.jobId)));
 }
 
+export async function listApplicationStatusEvents(
+  jobIds: string[],
+): Promise<ApplicationStatusEvent[]> {
+  const session = await getServerSession(getAuthOptions());
+  const userId = requireUserId(session);
+
+  if (!jobIds.length) return [];
+
+  const client = await getMongoClientPromise();
+  const db = client.db(process.env.MONGODB_DATABASE || "default");
+  await ensureStatusEventIndexes(db);
+
+  const docs = await db
+    .collection<ApplicationStatusEventRecord>("application_status_events")
+    .find({
+      userId: new ObjectId(userId),
+      jobId: { $in: Array.from(new Set(jobIds)) },
+    })
+    .sort({ createdAt: 1 })
+    .limit(5000)
+    .toArray();
+
+  return docs.map(serializeStatusEvent);
+}
+
 export async function addApplication(
   jobId: string,
   jobSnapshot: ApplicationJobSnapshot,
 ) {
   const session = await getServerSession(getAuthOptions());
   const userId = requireUserId(session);
+  const userObjectId = new ObjectId(userId);
 
   const client = await getMongoClientPromise();
   const db = client.db(process.env.MONGODB_DATABASE || "default");
   const now = new Date();
 
-  await db.collection("applications").updateOne(
-    { userId: new ObjectId(userId), jobId },
+  const result = await db.collection("applications").updateOne(
+    { userId: userObjectId, jobId },
     {
       $set: { updatedAt: now, jobSnapshot },
       $setOnInsert: {
@@ -302,6 +430,16 @@ export async function addApplication(
     { upsert: true },
   );
 
+  if (result.upsertedCount > 0) {
+    await recordApplicationStatusEvent(db, userObjectId, {
+      jobId,
+      fromStatus: null,
+      toStatus: "STARTED",
+      cycleId: DEFAULT_RECRUITMENT_CYCLE_ID,
+      source: "application_created",
+    });
+  }
+
   return { ok: true };
 }
 
@@ -375,6 +513,7 @@ export async function createCustomApplication(
 ): Promise<DbApplication> {
   const session = await getServerSession(getAuthOptions());
   const userId = requireUserId(session);
+  const userObjectId = new ObjectId(userId);
 
   const client = await getMongoClientPromise();
   const db = client.db(process.env.MONGODB_DATABASE || "default");
@@ -384,7 +523,7 @@ export async function createCustomApplication(
   const parsedDate = new Date(date);
 
   const result = await db.collection("applications").insertOne({
-    userId: new ObjectId(userId),
+    userId: userObjectId,
     jobId,
     status,
     cycleId,
@@ -393,6 +532,14 @@ export async function createCustomApplication(
     jobSnapshot,
   });
 
+  await recordApplicationStatusEvent(db, userObjectId, {
+    jobId,
+    fromStatus: null,
+    toStatus: status,
+    cycleId,
+    source: "application_created",
+  });
+
   return {
     _id: result.insertedId.toString(),
     jobId,
@@ -410,12 +557,15 @@ export async function updateApplicationStatus(
 ) {
   const session = await getServerSession(getAuthOptions());
   const userId = requireUserId(session);
+  const userObjectId = new ObjectId(userId);
 
   const client = await getMongoClientPromise();
   const db = client.db(process.env.MONGODB_DATABASE || "default");
+  const collection = db.collection<ApplicationRecord>("applications");
+  const existing = await collection.findOne({ userId: userObjectId, jobId });
 
-  await db.collection("applications").updateOne(
-    { userId: new ObjectId(userId), jobId },
+  await collection.updateOne(
+    { userId: userObjectId, jobId },
     {
       $set: { status, updatedAt: new Date() },
       $setOnInsert: {
@@ -426,6 +576,14 @@ export async function updateApplicationStatus(
     { upsert: true },
   );
 
+  await recordApplicationStatusEvent(db, userObjectId, {
+    jobId,
+    fromStatus: existing?.status ?? null,
+    toStatus: status,
+    cycleId: existing?.cycleId ?? DEFAULT_RECRUITMENT_CYCLE_ID,
+    source: "status_change",
+  });
+
   return { ok: true };
 }
 
diff --git a/frontend/src/app/statistics/page.tsx b/frontend/src/app/statistics/page.tsx
new file mode 100644
index 0000000..fc59998
--- /dev/null
+++ b/frontend/src/app/statistics/page.tsx
@@ -0,0 +1,45 @@
+import ApplicationsStatisticsClient from "@/components/statistics/applications-statistics-client";
+import {
+  listApplications,
+  listApplicationStatusEvents,
+  listRecruitmentCycles,
+} from "@/app/my-applications/actions";
+import {
+  DEFAULT_RECRUITMENT_CYCLE_ID,
+  RecruitmentCycle,
+} from "@/types/application";
+
+export const dynamic = "force-dynamic";
+
+export default async function StatisticsPage() {
+  const [apps, cycles] = await Promise.all([
+    listApplications().catch(() => []),
+    listRecruitmentCycles().catch(
+      () =>
+        [
+          {
+            id: DEFAULT_RECRUITMENT_CYCLE_ID,
+            name: "Current cycle",
+            isDefault: true,
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString(),
+          },
+        ] satisfies RecruitmentCycle[],
+    ),
+  ]);
+  const events = await listApplicationStatusEvents(
+    apps.map((app) => app.jobId),
+  ).catch(() => []);
+
+  return (
+    <div className="stats-page-shell h-[calc(100svh-80px)] lg:h-[calc(100svh-96px)] overflow-y-auto">
+      <div className="stats-page-inner max-w-7xl mx-auto py-6 px-6">
+        <ApplicationsStatisticsClient
+          initialApps={apps}
+          initialEvents={events}
+          initialCycles={cycles}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/applications/applications-kanban.tsx b/frontend/src/components/applications/applications-kanban.tsx
index 0b92b5e..04b2c1e 100644
--- a/frontend/src/components/applications/applications-kanban.tsx
+++ b/frontend/src/components/applications/applications-kanban.tsx
@@ -64,6 +64,10 @@ export type KanbanDensity = "compact" | "detailed";
 
 const VISIBLE_CARDS_PER_COLUMN = 4;
 const COMPACT_VISIBLE_CARDS_PER_COLUMN = 8;
+const ACCEPTED_COLUMN_CONFETTI = Array.from(
+  { length: 14 },
+  (_, index) => index,
+);
 
 function applicationLogo(app: DbApplication) {
   const isCustomApplication =
@@ -84,6 +88,7 @@ type Props = {
   stages: UserStage[];
   visibleStageNames: string[];
   sort: KanbanSort;
+  acceptedCelebration?: { stageName: string; id: number } | null;
   onStatusChange: (
     appId: string,
     jobId: string,
@@ -111,6 +116,7 @@ export default function ApplicationsKanban({
   stages,
   visibleStageNames,
   sort,
+  acceptedCelebration,
   onStatusChange,
   onDelete,
   onSaveNotes,
@@ -295,6 +301,7 @@ export default function ApplicationsKanban({
               mobileStages={stages}
               mobileStageCounts={stageCounts}
               onMobileStageChange={onMobileStageChange}
+              acceptedCelebration={acceptedCelebration}
             />
           );
         })}
@@ -479,6 +486,7 @@ function KanbanColumn({
   mobileStages,
   mobileStageCounts,
   onMobileStageChange,
+  acceptedCelebration,
 }: {
   stage: UserStage;
   apps: DbApplication[];
@@ -496,8 +504,14 @@ function KanbanColumn({
   mobileStages: UserStage[];
   mobileStageCounts: Map<string, number>;
   onMobileStageChange?: (stageName: string) => void;
+  acceptedCelebration?: Props["acceptedCelebration"];
 }) {
   const palette = rolePalette(stage.colorRole);
+  const acceptedCelebrationKey =
+    acceptedCelebration?.stageName === stage.name
+      ? acceptedCelebration.id
+      : null;
+  const isAcceptedCelebrating = acceptedCelebrationKey !== null;
   const { setNodeRef: setDropNodeRef, isOver } = useDroppable({
     id: `col:${stage.name}`,
     data: { stageName: stage.name },
@@ -586,7 +600,8 @@ function KanbanColumn({
         "apps-kanban-col" +
         (isOver ? " is-drop-target" : "") +
         (isColumnDragging ? " is-column-dragging" : "") +
-        (isMobileSelected ? " is-mobile-selected" : "")
+        (isMobileSelected ? " is-mobile-selected" : "") +
+        (isAcceptedCelebrating ? " is-accepted-celebrating" : "")
       }
       style={columnStyle}
     >
@@ -839,6 +854,27 @@ function KanbanColumn({
           </Popover>
         </div>
       </header>
+      {acceptedCelebrationKey !== null && (
+        <span
+          key={acceptedCelebrationKey}
+          className="apps-accepted-column-toast"
+          role="status"
+          aria-live="polite"
+        >
+          Congrats!
+        </span>
+      )}
+      {acceptedCelebrationKey !== null && (
+        <span
+          key={`confetti-${acceptedCelebrationKey}`}
+          className="apps-accepted-column-confetti"
+          aria-hidden="true"
+        >
+          {ACCEPTED_COLUMN_CONFETTI.map((index) => (
+            <span key={index} />
+          ))}
+        </span>
+      )}
       <div className="apps-kc-col-body">
         {apps.length === 0 ? (
           <div className="apps-kc-col-empty">
diff --git a/frontend/src/components/applications/my-applications-client.tsx b/frontend/src/components/applications/my-applications-client.tsx
index 52d6cfe..7fd6625 100644
--- a/frontend/src/components/applications/my-applications-client.tsx
+++ b/frontend/src/components/applications/my-applications-client.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { useSession } from "next-auth/react";
 import {
   Box,
@@ -69,6 +69,12 @@ const DENSITY_STORAGE_KEY = "mp:apps:kanban-density:v1";
 const STAGE_ORDER_STORAGE_KEY = "mp:apps:stage-order:v1";
 const MAC_YELLOW = "#ffe22f";
 const DELETE_CARD_FADE_MS = 220;
+const ACCEPTED_CELEBRATION_MS = 2000;
+
+type AcceptedCelebration = {
+  id: number;
+  stageName: string;
+};
 
 function readSort(): KanbanSort {
   if (typeof window === "undefined") return "newest";
@@ -192,6 +198,12 @@ export default function MyApplicationsClient({
   const [cycleDeleteTarget, setCycleDeleteTarget] =
     useState<RecruitmentCycle | null>(null);
   const [deletingCycle, setDeletingCycle] = useState(false);
+  const [acceptedCelebration, setAcceptedCelebration] =
+    useState<AcceptedCelebration | null>(null);
+  const acceptedCelebrationIdRef = useRef(0);
+  const acceptedCelebrationTimerRef = useRef<ReturnType<
+    typeof setTimeout
+  > | null>(null);
 
   useEffect(() => {
     try {
@@ -238,6 +250,15 @@ export default function MyApplicationsClient({
     })();
   }, [sessionStatus]);
 
+  useEffect(
+    () => () => {
+      if (acceptedCelebrationTimerRef.current) {
+        clearTimeout(acceptedCelebrationTimerRef.current);
+      }
+    },
+    [],
+  );
+
   useEffect(() => {
     if (cycles.some((cycle) => cycle.id === selectedCycleId)) return;
     setSelectedCycleId(cycles[0]?.id ?? DEFAULT_RECRUITMENT_CYCLE_ID);
@@ -290,6 +311,36 @@ export default function MyApplicationsClient({
     );
   }, [cycleApps, searchQuery]);
 
+  function isWinStatus(status: ApplicationStatus) {
+    return (
+      status === "ACCEPTED" ||
+      stages.find((stage) => stage.name === status)?.colorRole === "win"
+    );
+  }
+
+  function showAcceptedCelebration(stageName: string) {
+    if (
+      typeof window !== "undefined" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    ) {
+      return;
+    }
+
+    acceptedCelebrationIdRef.current += 1;
+    setAcceptedCelebration({
+      id: acceptedCelebrationIdRef.current,
+      stageName,
+    });
+
+    if (acceptedCelebrationTimerRef.current) {
+      clearTimeout(acceptedCelebrationTimerRef.current);
+    }
+    acceptedCelebrationTimerRef.current = setTimeout(() => {
+      setAcceptedCelebration(null);
+      acceptedCelebrationTimerRef.current = null;
+    }, ACCEPTED_CELEBRATION_MS);
+  }
+
   async function handleStatusChange(
     appId: string,
     jobId: string,
@@ -302,6 +353,9 @@ export default function MyApplicationsClient({
     );
     try {
       await updateApplicationStatus(jobId, next);
+      if (!isWinStatus(oldStatus) && isWinStatus(next)) {
+        showAcceptedCelebration(next);
+      }
     } catch (error) {
       setApps((prev) =>
         prev.map((p) => (p._id === appId ? { ...p, status: oldStatus } : p)),
@@ -1115,6 +1169,7 @@ export default function MyApplicationsClient({
         density={density}
         mobileStageName={mobileStageName}
         onMobileStageChange={setMobileStageName}
+        acceptedCelebration={acceptedCelebration}
       />
     </div>
   );
diff --git a/frontend/src/components/layout/nav-bar-mobile.tsx b/frontend/src/components/layout/nav-bar-mobile.tsx
index 367fb31..4758aa0 100644
--- a/frontend/src/components/layout/nav-bar-mobile.tsx
+++ b/frontend/src/components/layout/nav-bar-mobile.tsx
@@ -17,7 +17,10 @@ export const NavBarMobile = () => {
     { href: "/", label: "Home" },
     { href: "/jobs", label: "Jobs" },
     ...(status === "authenticated"
-      ? [{ href: "/my-applications", label: "Applications" }]
+      ? [
+          { href: "/my-applications", label: "Applications" },
+          { href: "/statistics", label: "Statistics" },
+        ]
       : [{ href: "/sign-in", label: "Sign in" }]),
   ];
 
diff --git a/frontend/src/components/layout/nav-links.tsx b/frontend/src/components/layout/nav-links.tsx
index 09f434a..d855397 100644
--- a/frontend/src/components/layout/nav-links.tsx
+++ b/frontend/src/components/layout/nav-links.tsx
@@ -22,9 +22,17 @@ export default function NavLinks() {
       </Link>
 
       {status === "authenticated" && (
-        <Link className={linkClass("/my-applications")} href="/my-applications">
-          Applications
-        </Link>
+        <>
+          <Link
+            className={linkClass("/my-applications")}
+            href="/my-applications"
+          >
+            Applications
+          </Link>
+          <Link className={linkClass("/statistics")} href="/statistics">
+            Statistics
+          </Link>
+        </>
       )}
 
       {status === "authenticated" ? (
diff --git a/frontend/src/components/statistics/applications-statistics-client.tsx b/frontend/src/components/statistics/applications-statistics-client.tsx
new file mode 100644
index 0000000..2a6894b
--- /dev/null
+++ b/frontend/src/components/statistics/applications-statistics-client.tsx
@@ -0,0 +1,1448 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { KeyboardEvent, Ref } from "react";
+import { useSession } from "next-auth/react";
+import { Box, Select } from "@mantine/core";
+import { IconDownload, IconExternalLink, IconX } from "@tabler/icons-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import {
+  ApplicationStatusEvent,
+  DbApplication,
+  DEFAULT_RECRUITMENT_CYCLE_ID,
+  RecruitmentCycle,
+  UserStage,
+} from "@/types/application";
+import macLogo from "@/assets/mac.svg";
+import CompanyLogo from "@/components/jobs/company-logo";
+import { rolePalette } from "@/lib/role-palette";
+import { relativeDate } from "@/lib/utils";
+
+type PipelineStageName =
+  | "STARTED"
+  | "APPLIED"
+  | "INTERVIEW"
+  | "ACCEPTED"
+  | "REJECTED";
+
+type PipelineStats = {
+  total: number;
+  currentCounts: Record<PipelineStageName, number>;
+  reachedApplied: number;
+  reachedInterview: number;
+  accepted: number;
+  rejected: number;
+  directRejected: number;
+  postInterviewRejected: number;
+  trackedEvents: number;
+};
+
+type SankeyLink = {
+  id: string;
+  source: PipelineStageName;
+  target: PipelineStageName;
+  value: number;
+  label: string;
+  color: string;
+  kind: "primary" | "success" | "danger";
+};
+
+type StageDrilldownApplication = {
+  app: DbApplication;
+  flowLabel: string;
+  inferred: boolean;
+};
+
+type StageDrilldown = {
+  stage: PipelineStageName;
+  title: string;
+  description: string;
+  value: number;
+  apps: StageDrilldownApplication[];
+};
+
+const PIPELINE_STAGES: PipelineStageName[] = [
+  "STARTED",
+  "APPLIED",
+  "INTERVIEW",
+  "ACCEPTED",
+  "REJECTED",
+];
+
+const STAGE_LABELS: Record<PipelineStageName, string> = {
+  STARTED: "Started",
+  APPLIED: "Applied",
+  INTERVIEW: "Interview",
+  ACCEPTED: "Accepted",
+  REJECTED: "Rejected",
+};
+
+const STAGE_ROLES: Record<PipelineStageName, UserStage["colorRole"]> = {
+  STARTED: "neutral",
+  APPLIED: "active",
+  INTERVIEW: "active",
+  ACCEPTED: "win",
+  REJECTED: "loss",
+};
+
+const NODE_LAYOUT: Record<
+  PipelineStageName,
+  { x: number; y: number; h: number }
+> = {
+  STARTED: { x: 56, y: 158, h: 92 },
+  APPLIED: { x: 302, y: 158, h: 92 },
+  INTERVIEW: { x: 548, y: 82, h: 92 },
+  ACCEPTED: { x: 792, y: 54, h: 82 },
+  REJECTED: { x: 792, y: 260, h: 82 },
+};
+
+const NODE_WIDTH = 136;
+const PANEL_EASE = [0.22, 1, 0.36, 1] as const;
+const SANKEY_EXPORT_WIDTH = 1160;
+const SANKEY_EXPORT_HEIGHT = 520;
+const SANKEY_EXPORT_DIAGRAM_OFFSET_X = 70;
+const SANKEY_EXPORT_DIAGRAM_OFFSET_Y = 80;
+
+const pageMotion = {
+  initial: { opacity: 0 },
+  animate: {
+    opacity: 1,
+    transition: { staggerChildren: 0.055, delayChildren: 0.03 },
+  },
+};
+
+const panelMotion = {
+  initial: { opacity: 0, y: 14, scale: 0.985 },
+  animate: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { duration: 0.38, ease: PANEL_EASE },
+  },
+};
+
+const listItemMotion = {
+  initial: { opacity: 0, y: 8 },
+  animate: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.28, ease: PANEL_EASE },
+  },
+};
+
+function emptyCounts(): Record<PipelineStageName, number> {
+  return {
+    STARTED: 0,
+    APPLIED: 0,
+    INTERVIEW: 0,
+    ACCEPTED: 0,
+    REJECTED: 0,
+  };
+}
+
+function isPipelineStage(status: string): status is PipelineStageName {
+  return PIPELINE_STAGES.includes(status as PipelineStageName);
+}
+
+function stageRole(status: string): UserStage["colorRole"] {
+  return isPipelineStage(status) ? STAGE_ROLES[status] : "neutral";
+}
+
+function formatStageName(status: string | null | undefined) {
+  if (!status) return "Unknown";
+  if (isPipelineStage(status)) return STAGE_LABELS[status];
+
+  return status
+    .split("_")
+    .filter(Boolean)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(" ");
+}
+
+function formatPercent(value: number, total: number) {
+  return `${percentNumber(value, total)}%`;
+}
+
+function formatCountPercent(value: number, total: number) {
+  return `${value} (${formatPercent(value, total)})`;
+}
+
+function percentNumber(value: number, total: number) {
+  if (total <= 0) return 0;
+  return Math.round((value / total) * 100);
+}
+
+function pluralLabel(count: number, singular: string, plural = `${singular}s`) {
+  return count === 1 ? singular : plural;
+}
+
+function safeFilename(value: string) {
+  return (
+    value
+      .trim()
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "") || "pipeline-flow"
+  );
+}
+
+function triggerImageDownload(href: string, filename: string) {
+  const link = document.createElement("a");
+  link.href = href;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+}
+
+function staticAssetSrc(asset: string | { src: string }) {
+  return typeof asset === "string" ? asset : asset.src;
+}
+
+async function svgHrefToDataUri(href: string) {
+  const response = await fetch(href);
+  if (!response.ok) {
+    throw new Error(`Failed to load SVG asset: ${href}`);
+  }
+
+  const svgText = await response.text();
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgText)}`;
+}
+
+async function macLogoDataUri() {
+  try {
+    return await svgHrefToDataUri(staticAssetSrc(macLogo));
+  } catch {
+    return svgHrefToDataUri("/mac.svg");
+  }
+}
+
+function buildEventsByJobId(events: ApplicationStatusEvent[]) {
+  const eventsByJobId = new Map<string, ApplicationStatusEvent[]>();
+
+  for (const event of events) {
+    const existing = eventsByJobId.get(event.jobId);
+    if (existing) existing.push(event);
+    else eventsByJobId.set(event.jobId, [event]);
+  }
+
+  for (const appEvents of eventsByJobId.values()) {
+    appEvents.sort((a, b) => a.createdAt.localeCompare(b.createdAt));
+  }
+
+  return eventsByJobId;
+}
+
+function touchedStage(
+  appEvents: ApplicationStatusEvent[] | undefined,
+  stage: PipelineStageName,
+) {
+  return (
+    appEvents?.some(
+      (event) => event.toStatus === stage || event.fromStatus === stage,
+    ) ?? false
+  );
+}
+
+function buildPipelineStats(
+  apps: DbApplication[],
+  events: ApplicationStatusEvent[],
+): PipelineStats {
+  const currentCounts = emptyCounts();
+  const eventsByJobId = buildEventsByJobId(events);
+  let postInterviewRejected = 0;
+
+  for (const app of apps) {
+    if (isPipelineStage(app.status)) {
+      currentCounts[app.status] += 1;
+    }
+
+    if (app.status !== "REJECTED") continue;
+
+    if (touchedStage(eventsByJobId.get(app.jobId), "INTERVIEW")) {
+      postInterviewRejected += 1;
+    }
+  }
+
+  const total = apps.length;
+  const accepted = currentCounts.ACCEPTED;
+  const rejected = currentCounts.REJECTED;
+  const reachedApplied = Math.max(0, total - currentCounts.STARTED);
+  const reachedInterview =
+    currentCounts.INTERVIEW + accepted + postInterviewRejected;
+
+  return {
+    total,
+    currentCounts,
+    reachedApplied,
+    reachedInterview,
+    accepted,
+    rejected,
+    directRejected: Math.max(0, rejected - postInterviewRejected),
+    postInterviewRejected,
+    trackedEvents: events.length,
+  };
+}
+
+function buildSankeyLinks(stats: PipelineStats): SankeyLink[] {
+  const links: SankeyLink[] = [
+    {
+      id: "started-applied",
+      source: "STARTED",
+      target: "APPLIED",
+      value: stats.reachedApplied,
+      label: "Started to Applied",
+      color: "#ffe22f",
+      kind: "primary",
+    },
+    {
+      id: "applied-interview",
+      source: "APPLIED",
+      target: "INTERVIEW",
+      value: stats.reachedInterview,
+      label: "Applied to Interview",
+      color: "#ffe22f",
+      kind: "primary",
+    },
+    {
+      id: "interview-accepted",
+      source: "INTERVIEW",
+      target: "ACCEPTED",
+      value: stats.accepted,
+      label: "Interview to Accepted",
+      color: "#9ddfb0",
+      kind: "success",
+    },
+    {
+      id: "applied-rejected",
+      source: "APPLIED",
+      target: "REJECTED",
+      value: stats.directRejected,
+      label: "Applied to Rejected",
+      color: "#ff7351",
+      kind: "danger",
+    },
+    {
+      id: "interview-rejected",
+      source: "INTERVIEW",
+      target: "REJECTED",
+      value: stats.postInterviewRejected,
+      label: "Interview to Rejected",
+      color: "#ff9275",
+      kind: "danger",
+    },
+  ];
+
+  return links.filter((link) => link.value > 0);
+}
+
+function linkPath(link: SankeyLink) {
+  const source = NODE_LAYOUT[link.source];
+  const target = NODE_LAYOUT[link.target];
+  const sourceX = source.x + NODE_WIDTH;
+  const targetX = target.x;
+  const sourceY = source.y + source.h / 2;
+  const targetY = target.y + target.h / 2;
+  const midX = sourceX + (targetX - sourceX) * 0.54;
+
+  return `M ${sourceX} ${sourceY} C ${midX} ${sourceY}, ${midX} ${targetY}, ${targetX} ${targetY}`;
+}
+
+function sankeyNodeValue(stageName: PipelineStageName, stats: PipelineStats) {
+  switch (stageName) {
+    case "STARTED":
+      return stats.total;
+    case "APPLIED":
+      return stats.reachedApplied;
+    case "INTERVIEW":
+      return stats.reachedInterview;
+    case "ACCEPTED":
+      return stats.accepted;
+    case "REJECTED":
+      return stats.rejected;
+  }
+}
+
+function PipelineDotField() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const mouseRef = useRef({ x: -1000, y: -1000 });
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    const parent = canvas?.parentElement;
+
+    if (!canvas || !ctx || !parent) return;
+    const dotCanvas = canvas;
+    const context = ctx;
+    const container = parent;
+
+    const gridSize = 25;
+    const dotSize = 1;
+    const cursorRadius = 100;
+    let dots: { x: number; y: number }[] = [];
+    let width = 0;
+    let height = 0;
+    let animationFrameId = 0;
+
+    function resize() {
+      const { devicePixelRatio: ratio = 1 } = window;
+      const rect = container.getBoundingClientRect();
+      width = rect.width;
+      height = rect.height;
+      dotCanvas.width = width * ratio;
+      dotCanvas.height = height * ratio;
+      dotCanvas.style.width = `${width}px`;
+      dotCanvas.style.height = `${height}px`;
+      context.setTransform(ratio, 0, 0, ratio, 0, 0);
+
+      const rows = Math.ceil(height / gridSize) + 1;
+      const cols = Math.ceil(width / gridSize) + 1;
+      dots = [];
+
+      for (let row = 0; row < rows; row += 1) {
+        for (let col = 0; col < cols; col += 1) {
+          dots.push({ x: col * gridSize, y: row * gridSize });
+        }
+      }
+    }
+
+    function handleMouseMove(event: MouseEvent) {
+      const rect = dotCanvas.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+
+      if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
+        mouseRef.current = { x: -1000, y: -1000 };
+        return;
+      }
+
+      mouseRef.current = { x, y };
+    }
+
+    function handleMouseLeave() {
+      mouseRef.current = { x: -1000, y: -1000 };
+    }
+
+    function animate() {
+      context.clearRect(0, 0, width, height);
+
+      for (const dot of dots) {
+        const dx = dot.x - mouseRef.current.x;
+        const dy = dot.y - mouseRef.current.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        const opacity =
+          distance < cursorRadius
+            ? 0.08 + (1 - distance / cursorRadius) * 0.3
+            : 0.08;
+
+        context.beginPath();
+        context.arc(dot.x, dot.y, dotSize, 0, Math.PI * 2);
+        context.fillStyle = `rgba(255, 255, 255, ${opacity})`;
+        context.fill();
+      }
+
+      animationFrameId = requestAnimationFrame(animate);
+    }
+
+    resize();
+    animate();
+
+    const resizeObserver = new ResizeObserver(resize);
+    resizeObserver.observe(container);
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseleave", handleMouseLeave);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseleave", handleMouseLeave);
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, []);
+
+  return <canvas ref={canvasRef} className="stats-pipeline-dots" />;
+}
+
+function buildStageDrilldown(
+  stage: PipelineStageName,
+  apps: DbApplication[],
+  stats: PipelineStats,
+  eventsByJobId: Map<string, ApplicationStatusEvent[]>,
+): StageDrilldown {
+  const stageApps = apps
+    .reduce<StageDrilldownApplication[]>((items, app) => {
+      const status = app.status;
+      const appEvents = eventsByJobId.get(app.jobId);
+      const hadInterview = touchedStage(appEvents, "INTERVIEW");
+
+      if (stage === "STARTED") {
+        items.push({
+          app,
+          flowLabel: `Current: ${formatStageName(status)}`,
+          inferred: false,
+        });
+      } else if (stage === "APPLIED" && status !== "STARTED") {
+        items.push({
+          app,
+          flowLabel: `Reached Applied`,
+          inferred: status === "ACCEPTED" && !hadInterview,
+        });
+      } else if (
+        stage === "INTERVIEW" &&
+        (status === "INTERVIEW" ||
+          status === "ACCEPTED" ||
+          (status === "REJECTED" && hadInterview))
+      ) {
+        items.push({
+          app,
+          flowLabel:
+            status === "ACCEPTED" && !hadInterview
+              ? "Interview inferred"
+              : status === "REJECTED"
+                ? "After interview"
+                : `Current: ${formatStageName(status)}`,
+          inferred: status === "ACCEPTED" && !hadInterview,
+        });
+      } else if (stage === "ACCEPTED" && status === "ACCEPTED") {
+        items.push({
+          app,
+          flowLabel: hadInterview
+            ? "Tracked interview path"
+            : "Interview inferred",
+          inferred: !hadInterview,
+        });
+      } else if (stage === "REJECTED" && status === "REJECTED") {
+        items.push({
+          app,
+          flowLabel: hadInterview ? "After interview" : "Applied screen",
+          inferred: false,
+        });
+      }
+
+      return items;
+    }, [])
+    .sort((a, b) => b.app.updatedAt.localeCompare(a.app.updatedAt));
+
+  const descriptions: Record<PipelineStageName, string> = {
+    STARTED: "Every application in this recruitment cycle.",
+    APPLIED: "Applications that moved beyond Started.",
+    INTERVIEW:
+      "Applications with interview activity, plus accepted roles inferred through interview.",
+    ACCEPTED: "Applications currently marked as accepted.",
+    REJECTED: "Applications currently marked as rejected.",
+  };
+
+  return {
+    stage,
+    title: STAGE_LABELS[stage],
+    description: descriptions[stage],
+    value: sankeyNodeValue(stage, stats),
+    apps: stageApps,
+  };
+}
+
+function ApplicationSankey({
+  stats,
+  selectedStage,
+  onStageSelect,
+  svgRef,
+}: {
+  stats: PipelineStats;
+  selectedStage: PipelineStageName | null;
+  onStageSelect: (stage: PipelineStageName) => void;
+  svgRef?: Ref<SVGSVGElement>;
+}) {
+  const links = buildSankeyLinks(stats);
+  const maxLinkValue = Math.max(1, ...links.map((link) => link.value));
+
+  function handleNodeKeyDown(
+    event: KeyboardEvent<SVGGElement>,
+    stageName: PipelineStageName,
+  ) {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    onStageSelect(stageName);
+  }
+
+  return (
+    <div className="stats-sankey-shell">
+      <PipelineDotField />
+      {stats.total === 0 ? (
+        <div className="stats-empty-state">
+          <div>
+            <h3>No applications tracked yet</h3>
+            <p>Add applications to start building your pipeline statistics.</p>
+          </div>
+          <Link className="stats-empty-action" href="/my-applications">
+            Add applications
+          </Link>
+        </div>
+      ) : (
+        <svg
+          ref={svgRef}
+          className="stats-sankey"
+          viewBox="0 0 980 420"
+          role="img"
+          aria-label="Application pipeline Sankey diagram"
+        >
+          <g className="stats-sankey-links">
+            {[...links]
+              .sort((a, b) => b.value - a.value)
+              .map((link) => {
+                const strokeWidth = 5 + (link.value / maxLinkValue) * 44;
+                return (
+                  <motion.path
+                    key={link.id}
+                    className={`stats-sankey-link stats-sankey-link--${link.kind}`}
+                    d={linkPath(link)}
+                    stroke={link.color}
+                    strokeWidth={strokeWidth}
+                    initial={{ pathLength: 0 }}
+                    animate={{ pathLength: 1 }}
+                    transition={{ duration: 0.75, ease: PANEL_EASE }}
+                  >
+                    <title>
+                      {link.label}: {link.value}
+                    </title>
+                  </motion.path>
+                );
+              })}
+          </g>
+          <g className="stats-sankey-nodes">
+            {PIPELINE_STAGES.map((stageName) => {
+              const node = NODE_LAYOUT[stageName];
+              const palette = rolePalette(STAGE_ROLES[stageName]);
+              const selected = selectedStage === stageName;
+
+              return (
+                <g
+                  key={stageName}
+                  transform={`translate(${node.x}, ${node.y})`}
+                >
+                  <motion.g
+                    className={`stats-sankey-node${selected ? " is-selected" : ""}`}
+                    role="button"
+                    tabIndex={0}
+                    aria-label={`Show ${STAGE_LABELS[stageName]} applications`}
+                    onClick={() => onStageSelect(stageName)}
+                    onKeyDown={(event) => handleNodeKeyDown(event, stageName)}
+                    initial={{ opacity: 0, scale: 0.94 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    whileHover={{ scale: 1.025 }}
+                    whileTap={{ scale: 0.985 }}
+                    transition={{ duration: 0.34, ease: PANEL_EASE }}
+                    style={{
+                      transformBox: "fill-box",
+                      transformOrigin: "center",
+                    }}
+                  >
+                    <rect
+                      width={NODE_WIDTH}
+                      height={node.h}
+                      rx="8"
+                      fill="#242424"
+                      stroke={palette.dot}
+                    />
+                    {stageName === "STARTED" && (
+                      <text x="18" y="-13" className="stats-sankey-click-label">
+                        click me
+                      </text>
+                    )}
+                    <circle cx="20" cy="22" r="5" fill={palette.dot} />
+                    <text x="34" y="27" className="stats-sankey-node-label">
+                      {STAGE_LABELS[stageName]}
+                    </text>
+                    <text x="20" y="64" className="stats-sankey-node-value">
+                      {sankeyNodeValue(stageName, stats)}
+                    </text>
+                  </motion.g>
+                </g>
+              );
+            })}
+          </g>
+        </svg>
+      )}
+    </div>
+  );
+}
+
+function StatTile({
+  label,
+  value,
+  detail,
+  role,
+}: {
+  label: string;
+  value: number | string;
+  detail: string;
+  role: UserStage["colorRole"];
+}) {
+  const palette = rolePalette(role);
+
+  return (
+    <motion.div className="stats-tile" {...panelMotion}>
+      <div className="stats-tile-label">
+        <span
+          className="apps-status-dot"
+          style={{ backgroundColor: palette.dot }}
+        />
+        {label}
+      </div>
+      <div className="stats-tile-value" style={{ color: palette.solid }}>
+        {value}
+      </div>
+      <div className="stats-tile-detail">{detail}</div>
+    </motion.div>
+  );
+}
+
+function OutcomeMixPanel({
+  stats,
+  activeCount,
+}: {
+  stats: PipelineStats;
+  activeCount: number;
+}) {
+  const activePct = percentNumber(activeCount, stats.total);
+  const acceptedPct = percentNumber(stats.accepted, stats.total);
+  const rejectedPct = percentNumber(stats.rejected, stats.total);
+  const acceptedStop = activePct + acceptedPct;
+  const hasApps = stats.total > 0;
+
+  return (
+    <motion.section
+      className="stats-panel stats-visual-panel stats-outcome-panel"
+      {...panelMotion}
+    >
+      <div className="stats-mini-head">
+        <h2>Outcome mix</h2>
+        <span>
+          {acceptedPct}% accepted, {rejectedPct}% rejected
+        </span>
+      </div>
+      <div className="stats-outcome-body">
+        <motion.div
+          className="stats-outcome-ring"
+          style={{
+            background: hasApps
+              ? `conic-gradient(#ffe22f 0 ${activePct}%, #9ddfb0 ${activePct}% ${acceptedStop}%, #ff7351 ${acceptedStop}% 100%)`
+              : "rgba(255, 255, 255, 0.06)",
+          }}
+          initial={{ opacity: 0, rotate: -36, scale: 0.88 }}
+          animate={{ opacity: 1, rotate: 0, scale: 1 }}
+          transition={{ duration: 0.58, ease: PANEL_EASE }}
+        >
+          <div>
+            <strong>{stats.total}</strong>
+            <span>total</span>
+          </div>
+        </motion.div>
+        <div className="stats-outcome-legend">
+          <span>
+            <i style={{ backgroundColor: "#ffe22f" }} />
+            Active{" "}
+            <strong>{formatCountPercent(activeCount, stats.total)}</strong>
+          </span>
+          <span>
+            <i style={{ backgroundColor: "#9ddfb0" }} />
+            Accepted{" "}
+            <strong>{formatCountPercent(stats.accepted, stats.total)}</strong>
+          </span>
+          <span>
+            <i style={{ backgroundColor: "#ff7351" }} />
+            Rejected{" "}
+            <strong>{formatCountPercent(stats.rejected, stats.total)}</strong>
+          </span>
+        </div>
+      </div>
+    </motion.section>
+  );
+}
+
+function RejectionSplitPanel({ stats }: { stats: PipelineStats }) {
+  const directPct = percentNumber(stats.directRejected, stats.rejected);
+  const postInterviewPct = percentNumber(
+    stats.postInterviewRejected,
+    stats.rejected,
+  );
+
+  return (
+    <motion.section
+      className="stats-panel stats-visual-panel stats-rejection-panel"
+      {...panelMotion}
+    >
+      <div className="stats-mini-head">
+        <h2>Rejection split</h2>
+        <span>
+          {formatPercent(stats.rejected, stats.reachedApplied)} rejected
+        </span>
+      </div>
+      <div className="stats-rejection-bars">
+        <div className="stats-rejection-row">
+          <span>Applied screen</span>
+          <div>
+            <strong>
+              {formatCountPercent(stats.directRejected, stats.rejected)}
+            </strong>
+            <motion.span
+              style={{
+                width: stats.rejected > 0 ? `${directPct}%` : "0%",
+              }}
+              initial={{ scaleX: 0 }}
+              whileInView={{ scaleX: 1 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.62, ease: PANEL_EASE }}
+            />
+          </div>
+        </div>
+        <div className="stats-rejection-row">
+          <span>After interview</span>
+          <div>
+            <strong>
+              {formatCountPercent(stats.postInterviewRejected, stats.rejected)}
+            </strong>
+            <motion.span
+              style={{
+                width: stats.rejected > 0 ? `${postInterviewPct}%` : "0%",
+              }}
+              initial={{ scaleX: 0 }}
+              whileInView={{ scaleX: 1 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.62, ease: PANEL_EASE }}
+            />
+          </div>
+        </div>
+      </div>
+      <p className="stats-rejection-note">
+        It&apos;s a numbers game. Don&apos;t give up.
+      </p>
+    </motion.section>
+  );
+}
+
+function InterviewYieldPanel({ stats }: { stats: PipelineStats }) {
+  const interviewPct = percentNumber(
+    stats.reachedInterview,
+    stats.reachedApplied,
+  );
+  const waitingForInterview = Math.max(
+    0,
+    stats.reachedApplied - stats.reachedInterview,
+  );
+  const waitingPct = percentNumber(waitingForInterview, stats.reachedApplied);
+
+  return (
+    <motion.section
+      className="stats-panel stats-visual-panel stats-yield-panel"
+      {...panelMotion}
+    >
+      <div className="stats-mini-head">
+        <h2>Interview yield</h2>
+        <span>
+          {formatCountPercent(stats.reachedInterview, stats.reachedApplied)}
+        </span>
+      </div>
+      <div className="stats-yield-body">
+        <div className="stats-yield-value">
+          <strong>{interviewPct}%</strong>
+          <span>
+            {stats.reachedInterview} of {stats.reachedApplied} reached Interview
+          </span>
+        </div>
+        <div className="stats-yield-stack" aria-hidden>
+          <span
+            className="is-interview"
+            style={{ width: `${interviewPct}%` }}
+          />
+          <span className="is-waiting" style={{ width: `${waitingPct}%` }} />
+        </div>
+        <p>{waitingForInterview} still waiting for an interview signal.</p>
+      </div>
+    </motion.section>
+  );
+}
+
+function StagePill({ status, label }: { status: string; label?: string }) {
+  const palette = rolePalette(stageRole(status));
+
+  return (
+    <span
+      className="stats-stage-pill"
+      style={{ backgroundColor: palette.pillBg, color: palette.pillFg }}
+    >
+      {label ?? formatStageName(status)}
+    </span>
+  );
+}
+
+function StageDrilldownDrawer({
+  drilldown,
+  onClose,
+}: {
+  drilldown: StageDrilldown;
+  onClose: () => void;
+}) {
+  const palette = rolePalette(STAGE_ROLES[drilldown.stage]);
+
+  useEffect(() => {
+    function handleKeyDown(event: globalThis.KeyboardEvent) {
+      if (event.key === "Escape") onClose();
+    }
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+
+  return (
+    <motion.div
+      className="stats-drilldown"
+      role="presentation"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.18 }}
+    >
+      <motion.button
+        className="stats-drilldown-backdrop"
+        type="button"
+        aria-label="Close application details"
+        onClick={onClose}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+      />
+      <motion.aside
+        className="stats-drilldown-drawer"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="stats-drilldown-title"
+        initial={{ x: 36, opacity: 0, scale: 0.985 }}
+        animate={{ x: 0, opacity: 1, scale: 1 }}
+        exit={{ x: 34, opacity: 0, scale: 0.985 }}
+        transition={{ duration: 0.28, ease: PANEL_EASE }}
+      >
+        <header className="stats-drilldown-head">
+          <div>
+            <div className="stats-drilldown-kicker">
+              <span style={{ backgroundColor: palette.dot }} />
+              Sankey selection
+            </div>
+            <h2 id="stats-drilldown-title">{drilldown.title}</h2>
+            <p>{drilldown.description}</p>
+          </div>
+          <button
+            className="stats-drilldown-close"
+            type="button"
+            aria-label="Close application details"
+            onClick={onClose}
+          >
+            <IconX size={17} aria-hidden />
+          </button>
+        </header>
+
+        <div className="stats-drilldown-count">
+          <strong style={{ color: palette.solid }}>{drilldown.value}</strong>
+          <span>{pluralLabel(drilldown.value, "application")}</span>
+        </div>
+
+        {drilldown.apps.length === 0 ? (
+          <div className="stats-drawer-empty">
+            No applications currently sit in this slice of the pipeline.
+          </div>
+        ) : (
+          <ul className="stats-app-list">
+            {drilldown.apps.map(({ app, flowLabel, inferred }) => (
+              <motion.li
+                key={app._id}
+                className="stats-app-item"
+                {...listItemMotion}
+              >
+                <CompanyLogo
+                  name={app.jobSnapshot.companyName}
+                  logo={app.jobSnapshot.logo}
+                  applicationUrl={app.jobSnapshot.applicationUrl}
+                  className="h-9 w-9 flex-shrink-0"
+                />
+                <div className="stats-app-copy">
+                  <div className="stats-app-title-row">
+                    <h3>{app.jobSnapshot.title}</h3>
+                    {app.jobSnapshot.applicationUrl && (
+                      <a
+                        className="stats-app-link"
+                        href={app.jobSnapshot.applicationUrl}
+                        target="_blank"
+                        rel="noreferrer"
+                        aria-label={`Open ${app.jobSnapshot.title} application`}
+                        title="Open application"
+                      >
+                        <IconExternalLink size={15} aria-hidden />
+                      </a>
+                    )}
+                  </div>
+                  <p>{app.jobSnapshot.companyName}</p>
+                  <div className="stats-app-meta">
+                    <StagePill status={app.status} />
+                    <StagePill
+                      status={inferred ? "INTERVIEW" : app.status}
+                      label={flowLabel}
+                    />
+                    <span>Updated {relativeDate(app.updatedAt)}</span>
+                  </div>
+                </div>
+              </motion.li>
+            ))}
+          </ul>
+        )}
+      </motion.aside>
+    </motion.div>
+  );
+}
+
+export default function ApplicationsStatisticsClient({
+  initialApps,
+  initialEvents,
+  initialCycles,
+}: {
+  initialApps: DbApplication[];
+  initialEvents: ApplicationStatusEvent[];
+  initialCycles: RecruitmentCycle[];
+}) {
+  const { status: sessionStatus } = useSession();
+  const shouldReduceMotion = useReducedMotion();
+  const [selectedCycleId, setSelectedCycleId] = useState(
+    initialCycles[0]?.id ?? DEFAULT_RECRUITMENT_CYCLE_ID,
+  );
+  const [selectedStage, setSelectedStage] = useState<PipelineStageName | null>(
+    null,
+  );
+  const sankeySvgRef = useRef<SVGSVGElement | null>(null);
+
+  const selectedCycle = initialCycles.find(
+    (cycle) => cycle.id === selectedCycleId,
+  ) ??
+    initialCycles[0] ?? {
+      id: DEFAULT_RECRUITMENT_CYCLE_ID,
+      name: "Current cycle",
+      isDefault: true,
+      createdAt: "",
+      updatedAt: "",
+    };
+
+  const cycleApps = useMemo(
+    () =>
+      initialApps.filter(
+        (app) =>
+          (app.cycleId ?? DEFAULT_RECRUITMENT_CYCLE_ID) === selectedCycle.id,
+      ),
+    [initialApps, selectedCycle.id],
+  );
+
+  const cycleJobIds = useMemo(
+    () => new Set(cycleApps.map((app) => app.jobId)),
+    [cycleApps],
+  );
+
+  const cycleEvents = useMemo(
+    () => initialEvents.filter((event) => cycleJobIds.has(event.jobId)),
+    [cycleJobIds, initialEvents],
+  );
+
+  const eventsByJobId = useMemo(
+    () => buildEventsByJobId(cycleEvents),
+    [cycleEvents],
+  );
+
+  const stats = useMemo(
+    () => buildPipelineStats(cycleApps, cycleEvents),
+    [cycleApps, cycleEvents],
+  );
+
+  const selectedDrilldown = useMemo(
+    () =>
+      selectedStage
+        ? buildStageDrilldown(selectedStage, cycleApps, stats, eventsByJobId)
+        : null,
+    [cycleApps, eventsByJobId, selectedStage, stats],
+  );
+
+  const activeCount =
+    stats.currentCounts.STARTED +
+    stats.currentCounts.APPLIED +
+    stats.currentCounts.INTERVIEW;
+  const cycleSelectWidth = Math.min(
+    280,
+    Math.max(150, selectedCycle.name.length * 8 + 62),
+  );
+
+  async function downloadPipelineImage() {
+    const svg = sankeySvgRef.current;
+    if (!svg) return;
+    const macLogoHref = await macLogoDataUri();
+
+    const clone = svg.cloneNode(true) as SVGSVGElement;
+    clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    clone.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    clone.setAttribute("width", String(SANKEY_EXPORT_WIDTH));
+    clone.setAttribute("height", String(SANKEY_EXPORT_HEIGHT));
+    clone.setAttribute(
+      "viewBox",
+      `0 0 ${SANKEY_EXPORT_WIDTH} ${SANKEY_EXPORT_HEIGHT}`,
+    );
+    clone
+      .querySelectorAll(".stats-sankey-click-label")
+      .forEach((node) => node.remove());
+
+    const sankeyDiagram = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "g",
+    );
+    sankeyDiagram.setAttribute(
+      "transform",
+      `translate(${SANKEY_EXPORT_DIAGRAM_OFFSET_X}, ${SANKEY_EXPORT_DIAGRAM_OFFSET_Y})`,
+    );
+
+    const sankeyLinks = clone.querySelector(".stats-sankey-links");
+    const sankeyNodes = clone.querySelector(".stats-sankey-nodes");
+    if (sankeyLinks) sankeyDiagram.appendChild(sankeyLinks);
+    if (sankeyNodes) sankeyDiagram.appendChild(sankeyNodes);
+    clone.appendChild(sankeyDiagram);
+
+    const style = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "style",
+    );
+    style.textContent = `
+      text { font-family: Poppins, Arial, sans-serif; }
+      .stats-sankey-link { fill: none; stroke-linecap: round; opacity: 0.34; }
+      .stats-sankey-link--success { opacity: 0.42; }
+      .stats-sankey-link--danger { opacity: 0.38; }
+      .stats-sankey-node rect { stroke-width: 1.5; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.22)); }
+      .stats-sankey-node-label { fill: rgba(255, 255, 255, 0.86); font-size: 13px; font-weight: 800; }
+      .stats-sankey-node-value { fill: white; font-size: 27px; font-weight: 800; }
+    `;
+
+    const background = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "rect",
+    );
+    background.setAttribute("x", "0");
+    background.setAttribute("y", "0");
+    background.setAttribute("width", String(SANKEY_EXPORT_WIDTH));
+    background.setAttribute("height", String(SANKEY_EXPORT_HEIGHT));
+    background.setAttribute("fill", "#1a1a1a");
+
+    const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+    const dotPattern = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "pattern",
+    );
+    dotPattern.setAttribute("id", "stats-export-dot-pattern");
+    dotPattern.setAttribute("width", "25");
+    dotPattern.setAttribute("height", "25");
+    dotPattern.setAttribute("patternUnits", "userSpaceOnUse");
+
+    const dot = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "circle",
+    );
+    dot.setAttribute("cx", "1");
+    dot.setAttribute("cy", "1");
+    dot.setAttribute("r", "1");
+    dot.setAttribute("fill", "#ffffff");
+    dot.setAttribute("opacity", "0.08");
+    dotPattern.appendChild(dot);
+    defs.appendChild(dotPattern);
+
+    const dotLayer = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "rect",
+    );
+    dotLayer.setAttribute("x", "0");
+    dotLayer.setAttribute("y", "0");
+    dotLayer.setAttribute("width", String(SANKEY_EXPORT_WIDTH));
+    dotLayer.setAttribute("height", String(SANKEY_EXPORT_HEIGHT));
+    dotLayer.setAttribute("fill", "url(#stats-export-dot-pattern)");
+
+    const title = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "text",
+    );
+    title.setAttribute("x", "34");
+    title.setAttribute("y", "52");
+    title.setAttribute("fill", "#ffffff");
+    title.setAttribute("font-size", "28");
+    title.setAttribute("font-weight", "900");
+    title.textContent = selectedCycle.name;
+
+    const titleUnderline = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "line",
+    );
+    titleUnderline.setAttribute("x1", "34");
+    titleUnderline.setAttribute("y1", "67");
+    titleUnderline.setAttribute(
+      "x2",
+      String(34 + Math.min(460, Math.max(90, selectedCycle.name.length * 16))),
+    );
+    titleUnderline.setAttribute("y2", "67");
+    titleUnderline.setAttribute("stroke", "#ffffff");
+    titleUnderline.setAttribute("stroke-width", "3");
+    titleUnderline.setAttribute("stroke-linecap", "round");
+    titleUnderline.setAttribute("opacity", "0.92");
+
+    const brandCenterX = SANKEY_EXPORT_WIDTH - 78;
+    const brandLogoSize = 38;
+    const brandLogo = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "image",
+    );
+    brandLogo.setAttribute("x", String(brandCenterX - brandLogoSize / 2));
+    brandLogo.setAttribute("y", "24");
+    brandLogo.setAttribute("width", String(brandLogoSize));
+    brandLogo.setAttribute("height", String(brandLogoSize));
+    brandLogo.setAttribute("href", macLogoHref);
+    brandLogo.setAttributeNS(
+      "http://www.w3.org/1999/xlink",
+      "href",
+      macLogoHref,
+    );
+
+    const brandText = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "text",
+    );
+    brandText.setAttribute("x", String(brandCenterX));
+    brandText.setAttribute("y", "78");
+    brandText.setAttribute("fill", "#fee22f");
+    brandText.setAttribute("font-size", "7.2");
+    brandText.setAttribute("font-weight", "900");
+    brandText.setAttribute("text-anchor", "middle");
+
+    const brandTextTop = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "tspan",
+    );
+    brandTextTop.setAttribute("x", String(brandCenterX));
+    brandTextTop.textContent = "Monash Association";
+
+    const brandTextBottom = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "tspan",
+    );
+    brandTextBottom.setAttribute("x", String(brandCenterX));
+    brandTextBottom.setAttribute("dy", "8");
+    brandTextBottom.textContent = "of Coding";
+    brandText.append(brandTextTop, brandTextBottom);
+
+    const website = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "text",
+    );
+    website.setAttribute("x", String(SANKEY_EXPORT_WIDTH - 22));
+    website.setAttribute("y", String(SANKEY_EXPORT_HEIGHT - 18));
+    website.setAttribute("fill", "#8f8f8f");
+    website.setAttribute("font-size", "11");
+    website.setAttribute("font-weight", "800");
+    website.setAttribute("text-anchor", "end");
+    website.textContent = "jobs.monashcoding.com";
+
+    clone.insertBefore(background, clone.firstChild);
+    clone.insertBefore(style, clone.firstChild);
+    clone.insertBefore(defs, background.nextSibling);
+    clone.insertBefore(dotLayer, defs.nextSibling);
+    clone.append(title, titleUnderline, brandLogo, brandText, website);
+
+    const serialized = new XMLSerializer().serializeToString(clone);
+    const blob = new Blob([serialized], {
+      type: "image/svg+xml;charset=utf-8",
+    });
+    const objectUrl = URL.createObjectURL(blob);
+    const image = new Image();
+    const filename = `${safeFilename(selectedCycle.name)}-pipeline-flow.png`;
+
+    image.onload = () => {
+      const scale = 2;
+      const canvas = document.createElement("canvas");
+      canvas.width = SANKEY_EXPORT_WIDTH * scale;
+      canvas.height = SANKEY_EXPORT_HEIGHT * scale;
+
+      const context = canvas.getContext("2d");
+      if (!context) {
+        URL.revokeObjectURL(objectUrl);
+        return;
+      }
+
+      context.fillStyle = "#1a1a1a";
+      context.fillRect(0, 0, canvas.width, canvas.height);
+      context.drawImage(image, 0, 0, canvas.width, canvas.height);
+      triggerImageDownload(canvas.toDataURL("image/png"), filename);
+      URL.revokeObjectURL(objectUrl);
+    };
+
+    image.onerror = () => {
+      triggerImageDownload(
+        objectUrl,
+        `${safeFilename(selectedCycle.name)}-pipeline-flow.svg`,
+      );
+      setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
+    };
+
+    image.src = objectUrl;
+  }
+
+  if (sessionStatus === "unauthenticated") {
+    return (
+      <Box
+        bg="secondary"
+        bd="2px solid selected"
+        className="rounded-xl p-4 text-sm"
+      >
+        You&apos;re not signed in.{" "}
+        <Link
+          className="underline font-semibold"
+          href="/sign-in?callbackUrl=%2Fstatistics"
+        >
+          Sign in
+        </Link>{" "}
+        to view your application statistics.
+      </Box>
+    );
+  }
+
+  return (
+    <motion.div
+      className="stats-page"
+      initial={shouldReduceMotion ? false : pageMotion.initial}
+      animate={pageMotion.animate}
+    >
+      <motion.div className="stats-header" {...panelMotion}>
+        <div>
+          <h1 className="stats-title">Statistics</h1>
+          <p className="stats-subtitle">{stats.total} applications tracked</p>
+        </div>
+      </motion.div>
+
+      <div className="stats-primary-grid">
+        <motion.section
+          className="stats-panel stats-flow-panel stats-flow-panel--primary"
+          {...panelMotion}
+        >
+          <div className="stats-panel-head">
+            <div className="stats-flow-title-wrap">
+              <div className="stats-flow-title-row">
+                <h2>{selectedCycle.name}</h2>
+                <div className="stats-tracked-pill">
+                  {stats.trackedEvents} tracked move
+                  {stats.trackedEvents === 1 ? "" : "s"}
+                </div>
+              </div>
+            </div>
+
+            <div className="stats-flow-actions">
+              <Select
+                aria-label="Recruitment cycle"
+                value={selectedCycle.id}
+                onChange={(value) => {
+                  setSelectedCycleId(value ?? DEFAULT_RECRUITMENT_CYCLE_ID);
+                  setSelectedStage(null);
+                }}
+                data={initialCycles.map((cycle) => ({
+                  value: cycle.id,
+                  label: cycle.name,
+                }))}
+                allowDeselect={false}
+                className="stats-cycle-select stats-cycle-select--panel"
+                style={{ maxWidth: "100%", width: cycleSelectWidth }}
+                styles={{
+                  input: {
+                    backgroundColor: "transparent",
+                    border: "2px solid #3a3a3a",
+                    borderRadius: "0.5rem",
+                    color: "white",
+                    minHeight: 34,
+                  },
+                  dropdown: {
+                    backgroundColor: "#2e2e2e",
+                    border: "2px solid #3a3a3a",
+                  },
+                  option: {
+                    fontSize: 13,
+                  },
+                }}
+              />
+              <button
+                className="stats-export-button"
+                type="button"
+                disabled={stats.total === 0}
+                onClick={downloadPipelineImage}
+              >
+                <IconDownload size={15} aria-hidden />
+                <span>Export</span>
+              </button>
+            </div>
+          </div>
+          <ApplicationSankey
+            stats={stats}
+            selectedStage={selectedStage}
+            onStageSelect={setSelectedStage}
+            svgRef={sankeySvgRef}
+          />
+        </motion.section>
+
+        <motion.div
+          className="stats-grid stats-side-table"
+          aria-label="Application statistics summary"
+          {...panelMotion}
+        >
+          <StatTile
+            label="Total"
+            value={stats.total}
+            detail={`${stats.reachedApplied} reached Applied`}
+            role="neutral"
+          />
+          <StatTile
+            label="Applied"
+            value={stats.currentCounts.APPLIED}
+            detail="Currently in Applied"
+            role="active"
+          />
+          <StatTile
+            label="Interview rate"
+            value={formatPercent(stats.reachedInterview, stats.reachedApplied)}
+            detail={`${stats.reachedInterview} reached Interview`}
+            role="active"
+          />
+          <StatTile
+            label="Offer rate"
+            value={formatPercent(stats.accepted, stats.reachedInterview)}
+            detail={`${stats.accepted} accepted`}
+            role="win"
+          />
+          <StatTile
+            label="Rejected"
+            value={formatPercent(stats.rejected, stats.reachedApplied)}
+            detail={`${stats.rejected} total rejected`}
+            role="loss"
+          />
+        </motion.div>
+      </div>
+
+      <div className="stats-outcome-grid">
+        <RejectionSplitPanel stats={stats} />
+        <InterviewYieldPanel stats={stats} />
+        <OutcomeMixPanel stats={stats} activeCount={activeCount} />
+      </div>
+
+      <AnimatePresence>
+        {selectedDrilldown && (
+          <StageDrilldownDrawer
+            drilldown={selectedDrilldown}
+            onClose={() => setSelectedStage(null)}
+          />
+        )}
+      </AnimatePresence>
+    </motion.div>
+  );
+}
diff --git a/frontend/src/types/application.ts b/frontend/src/types/application.ts
index e41011b..5c77312 100644
--- a/frontend/src/types/application.ts
+++ b/frontend/src/types/application.ts
@@ -54,3 +54,18 @@ export type LocalApplication = {
 export type DbApplication = LocalApplication & {
   _id: string;
 };
+
+export type ApplicationStatusEventSource =
+  | "application_created"
+  | "local_sync"
+  | "status_change";
+
+export type ApplicationStatusEvent = {
+  _id: string;
+  jobId: string;
+  fromStatus?: ApplicationStatus | null;
+  toStatus: ApplicationStatus;
+  cycleId?: string;
+  source: ApplicationStatusEventSource;
+  createdAt: string;
+};