diff --git a/app/javascript/dashboard/api/captain/assistant.js b/app/javascript/dashboard/api/captain/assistant.js
index dcd92f735..1fc17798d 100644
--- a/app/javascript/dashboard/api/captain/assistant.js
+++ b/app/javascript/dashboard/api/captain/assistant.js
@@ -37,6 +37,20 @@ class CaptainAssistant extends ApiClient {
       params: { range, timezone_offset: getTimezoneOffset() },
     });
   }
+
+  getDrilldown({ assistantId, metric, range, page, signal }) {
+    const requestConfig = {
+      params: {
+        metric,
+        range,
+        timezone_offset: getTimezoneOffset(),
+        page,
+      },
+    };
+    if (signal) requestConfig.signal = signal;
+
+    return axios.get(`${this.url}/${assistantId}/drilldown`, requestConfig);
+  }
 }
 
 export default new CaptainAssistant();
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/overview/AssistantDrilldownDrawer.vue b/app/javascript/dashboard/components-next/captain/pageComponents/overview/AssistantDrilldownDrawer.vue
new file mode 100644
index 000000000..cf17e7804
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/overview/AssistantDrilldownDrawer.vue
@@ -0,0 +1,234 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+import { useEventListener } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import CaptainAssistant from 'dashboard/api/captain/assistant';
+import { useReportDrilldown } from 'dashboard/routes/dashboard/settings/reports/composables/useReportDrilldown';
+import ReportDrilldownCard from 'dashboard/routes/dashboard/settings/reports/components/ReportDrilldownCard.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
+
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  assistantId: { type: [String, Number], default: null },
+  metric: { type: String, default: '' },
+  metricName: { type: String, default: '' },
+  metricValue: { type: String, default: '' },
+  range: { type: String, default: '' },
+});
+
+const emit = defineEmits(['close']);
+
+const { t } = useI18n();
+const drawerRef = ref(null);
+const {
+  records,
+  meta,
+  isFetching,
+  isFetchingMore,
+  hasError,
+  hasRecords,
+  hasMore,
+  open: openDrilldown,
+  close,
+  loadMore,
+} = useReportDrilldown(params => CaptainAssistant.getDrilldown(params));
+
+let previousActiveElement = null;
+
+const isOpen = computed(() => props.open);
+const title = computed(() => props.metricName || '');
+
+const subtitle = computed(() => {
+  if (!meta.value.conversation_count) return '';
+
+  return t('CAPTAIN.OVERVIEW.DRILLDOWN.RESULT_COUNT_CONVERSATION', {
+    count: meta.value.conversation_count,
+  });
+});
+
+const recordKey = record => `${record.conversation?.id}-${record.occurred_at}`;
+
+const restoreFocus = () => {
+  if (previousActiveElement?.isConnected) {
+    previousActiveElement.focus();
+  }
+  previousActiveElement = null;
+};
+
+const closeDrawer = () => {
+  close();
+  emit('close');
+  restoreFocus();
+};
+
+const rememberActiveElement = () => {
+  if (previousActiveElement) return;
+
+  previousActiveElement =
+    document.activeElement instanceof HTMLElement
+      ? document.activeElement
+      : null;
+};
+
+const focusDrawer = () => {
+  nextTick(() => drawerRef.value?.focus());
+};
+
+const fetchDrilldown = () => {
+  if (!props.metric || !props.assistantId) return;
+
+  openDrilldown({
+    assistantId: props.assistantId,
+    metric: props.metric,
+    range: props.range,
+  });
+};
+
+const onKeydown = event => {
+  if (!isOpen.value) return;
+
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    event.stopPropagation();
+    closeDrawer();
+  }
+};
+
+useEventListener(document, 'keydown', onKeydown);
+
+watch(
+  () => props.open,
+  isDrawerOpen => {
+    if (!isDrawerOpen) {
+      close();
+      restoreFocus();
+      return;
+    }
+
+    rememberActiveElement();
+    fetchDrilldown();
+    focusDrawer();
+  },
+  { immediate: true }
+);
+
+watch(
+  () => [props.metric, props.range],
+  () => {
+    if (props.open) fetchDrilldown();
+  }
+);
+
+// The drawer's headline value is a snapshot of the previous assistant's card,
+// so switching assistants (e.g. browser Back/Forward) closes it instead of
+// refetching records that would no longer match the header.
+watch(
+  () => props.assistantId,
+  () => {
+    if (props.open) closeDrawer();
+  }
+);
+
+onBeforeUnmount(() => {
+  restoreFocus();
+});
+</script>
+
+<template>
+  <TeleportWithDirection to="body">
+    <Transition name="report-drilldown-fade">
+      <div
+        v-if="isOpen"
+        class="fixed inset-0 z-50 bg-black/30"
+        role="presentation"
+        @click.self="closeDrawer"
+      >
+        <aside
+          ref="drawerRef"
+          class="fixed inset-y-0 end-0 flex w-full max-w-xl flex-col bg-n-solid-1 shadow-xl outline outline-1 outline-n-container"
+          role="dialog"
+          aria-modal="true"
+          :aria-label="title"
+          tabindex="-1"
+        >
+          <header
+            class="flex items-start justify-between gap-4 border-b border-n-weak px-6 py-5"
+          >
+            <div class="min-w-0">
+              <h2 class="truncate text-base font-medium text-n-slate-12">
+                {{ title }}
+              </h2>
+              <p
+                v-if="metricValue"
+                class="mt-1 text-xl font-semibold text-n-slate-12"
+              >
+                {{ metricValue }}
+              </p>
+              <div
+                class="text-sm text-n-slate-11"
+                :class="{
+                  'mt-2': metricValue,
+                  'mt-1': !metricValue,
+                }"
+              >
+                {{ subtitle }}
+              </div>
+            </div>
+            <Button
+              ghost
+              slate
+              size="sm"
+              icon="i-ph-x"
+              :aria-label="$t('CAPTAIN.OVERVIEW.DRILLDOWN.CLOSE')"
+              @click="closeDrawer"
+            />
+          </header>
+
+          <div class="min-h-0 flex-1 overflow-y-auto px-5 py-3">
+            <div
+              v-if="isFetching"
+              class="flex h-40 items-center justify-center"
+            >
+              <Spinner />
+            </div>
+
+            <div
+              v-else-if="hasError"
+              class="flex h-40 items-center justify-center text-sm text-n-ruby-11"
+            >
+              {{ $t('CAPTAIN.OVERVIEW.DRILLDOWN.ERROR') }}
+            </div>
+
+            <div
+              v-else-if="!hasRecords"
+              class="flex h-40 items-center justify-center text-sm text-n-slate-10"
+            >
+              {{ $t('CAPTAIN.OVERVIEW.DRILLDOWN.EMPTY') }}
+            </div>
+
+            <div v-else class="flex flex-col gap-2">
+              <ReportDrilldownCard
+                v-for="record in records"
+                :key="recordKey(record)"
+                :record="record"
+              />
+
+              <Button
+                v-if="hasMore"
+                faded
+                slate
+                size="sm"
+                class="mx-auto mt-2"
+                :label="$t('CAPTAIN.OVERVIEW.DRILLDOWN.LOAD_MORE')"
+                :is-loading="isFetchingMore"
+                @click="loadMore"
+              />
+            </div>
+          </div>
+        </aside>
+      </div>
+    </Transition>
+  </TeleportWithDirection>
+</template>
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/overview/MetricCard.vue b/app/javascript/dashboard/components-next/captain/pageComponents/overview/MetricCard.vue
index 9f8a76f43..cf66a0a2f 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/overview/MetricCard.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/overview/MetricCard.vue
@@ -8,16 +8,35 @@ const props = defineProps({
   hint: { type: String, default: '' },
   // null = neutral, true = good direction, false = bad direction
   trendGood: { type: Boolean, default: null },
+  clickable: { type: Boolean, default: false },
 });
 
+const emit = defineEmits(['click']);
+
 const trendClass = computed(() => {
   if (props.trendGood === null) return 'text-n-slate-11';
   return props.trendGood ? 'text-n-teal-11' : 'text-n-ruby-11';
 });
+
+const onActivate = () => {
+  if (props.clickable) emit('click');
+};
 </script>
 
 <template>
-  <div class="flex flex-col gap-3 p-5 group bg-n-solid-1">
+  <div
+    class="flex flex-col gap-3 p-5 group bg-n-solid-1"
+    :class="
+      clickable
+        ? 'cursor-pointer transition-colors hover:bg-n-slate-2/50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-n-brand'
+        : ''
+    "
+    :role="clickable ? 'button' : undefined"
+    :tabindex="clickable ? 0 : undefined"
+    @click="onActivate"
+    @keydown.enter.self.prevent="onActivate"
+    @keydown.space.self.prevent="onActivate"
+  >
     <div class="flex items-center gap-1.5">
       <span class="text-sm font-medium text-n-slate-11">{{ label }}</span>
       <span
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index a6f3ef2f2..d3dc538a9 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -439,6 +439,13 @@
           "HINT": "Average replies the assistant sends per conversation."
         }
       },
+      "DRILLDOWN": {
+        "CLOSE": "Close details",
+        "EMPTY": "No records found for this metric.",
+        "ERROR": "Could not load records. Please try again.",
+        "LOAD_MORE": "Load more",
+        "RESULT_COUNT_CONVERSATION": "{count} conversation | {count} conversations"
+      },
       "KNOWLEDGE": {
         "TITLE": "Knowledge coverage",
         "COVERAGE": "{pct}% approved",
@@ -446,17 +453,6 @@
         "PENDING": "Pending FAQs",
         "DOCUMENTS": "Documents"
       },
-      "FLAGGED": {
-        "TITLE": "Response quality",
-        "TOTAL": "{count} flagged · {rate}"
-      },
-      "CREDITS": {
-        "TITLE": "Credit usage",
-        "UNIT": "credits",
-        "LEGEND": "Daily credits used",
-        "AXIS_START": "{count}d ago",
-        "AXIS_END": "Today"
-      },
       "LINKS": {
         "DOCS": {
           "TITLE": "Captain docs",
@@ -470,13 +466,6 @@
           "TITLE": "Billing",
           "DESCRIPTION": "Manage credits and plan"
         }
-      },
-      "FLAG_REASONS": {
-        "INCORRECT": "Incorrect info",
-        "INCOMPLETE": "Incomplete",
-        "OUTDATED": "Outdated",
-        "INAPPROPRIATE": "Inappropriate",
-        "OTHER": "Other"
       }
     },
     "ASSISTANT_SWITCHER": {
diff --git a/app/javascript/dashboard/routes/dashboard/captain/assistants/overview/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/assistants/overview/Index.vue
index b9cc6ae35..29411e56d 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/assistants/overview/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/assistants/overview/Index.vue
@@ -3,6 +3,7 @@ import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import { usePolicy } from 'dashboard/composables/usePolicy';
 import CaptainAssistant from 'dashboard/api/captain/assistant';
 
 import PageLayout from 'dashboard/components-next/captain/PageLayout.vue';
@@ -10,6 +11,7 @@ import CaptainPaywall from 'dashboard/components-next/captain/pageComponents/Pay
 import RangeSelector from 'dashboard/components-next/captain/pageComponents/overview/RangeSelector.vue';
 import WelcomeCard from 'dashboard/components-next/captain/pageComponents/overview/WelcomeCard.vue';
 import MetricCard from 'dashboard/components-next/captain/pageComponents/overview/MetricCard.vue';
+import AssistantDrilldownDrawer from 'dashboard/components-next/captain/pageComponents/overview/AssistantDrilldownDrawer.vue';
 import KnowledgeCard from 'dashboard/components-next/captain/pageComponents/overview/KnowledgeCard.vue';
 import QuickLinks from 'dashboard/components-next/captain/pageComponents/overview/QuickLinks.vue';
 import InboxBanner from 'dashboard/components-next/captain/pageComponents/overview/InboxBanner.vue';
@@ -17,6 +19,9 @@ import CoverageBanner from 'dashboard/components-next/captain/pageComponents/ove
 
 const { t } = useI18n();
 const route = useRoute();
+// Drilldown is admin-only; the backend policy enforces the same restriction.
+const { checkPermissions } = usePolicy();
+const canDrilldown = computed(() => checkPermissions(['administrator']));
 
 const selectedRange = ref('this_month');
 
@@ -69,34 +74,38 @@ const metricFor = (statKey, formatValue, direction, trendKind = 'percent') => {
 const metrics = computed(() => [
   {
     key: 'handled',
+    metric: 'conversations_handled',
     label: t('CAPTAIN.OVERVIEW.METRICS.HANDLED.LABEL'),
     hint: t('CAPTAIN.OVERVIEW.METRICS.HANDLED.HINT'),
     ...metricFor('conversations_handled', v => v.toLocaleString(), 'up'),
   },
   {
     key: 'autoResolution',
+    metric: 'auto_resolution_rate',
     label: t('CAPTAIN.OVERVIEW.METRICS.AUTO_RESOLUTION.LABEL'),
     hint: t('CAPTAIN.OVERVIEW.METRICS.AUTO_RESOLUTION.HINT'),
     ...metricFor('auto_resolution_rate', v => `${v}%`, 'up', 'point'),
   },
   {
     key: 'handoff',
+    metric: 'handoff_rate',
     label: t('CAPTAIN.OVERVIEW.METRICS.HANDOFF.LABEL'),
     hint: t('CAPTAIN.OVERVIEW.METRICS.HANDOFF.HINT'),
     ...metricFor('handoff_rate', v => `${v}%`, 'down', 'point'),
   },
+  {
+    key: 'reopen',
+    metric: 'reopen_rate',
+    label: t('CAPTAIN.OVERVIEW.METRICS.REOPEN.LABEL'),
+    hint: t('CAPTAIN.OVERVIEW.METRICS.REOPEN.HINT'),
+    ...metricFor('reopen_rate', v => `${v}%`, 'down', 'point'),
+  },
   {
     key: 'hoursSaved',
     label: t('CAPTAIN.OVERVIEW.METRICS.HOURS_SAVED.LABEL'),
     hint: t('CAPTAIN.OVERVIEW.METRICS.HOURS_SAVED.HINT'),
     ...metricFor('hours_saved', formatDuration, 'up'),
   },
-  {
-    key: 'reopen',
-    label: t('CAPTAIN.OVERVIEW.METRICS.REOPEN.LABEL'),
-    hint: t('CAPTAIN.OVERVIEW.METRICS.REOPEN.HINT'),
-    ...metricFor('reopen_rate', v => `${v}%`, 'down', 'point'),
-  },
   {
     key: 'depth',
     label: t('CAPTAIN.OVERVIEW.METRICS.DEPTH.LABEL'),
@@ -109,6 +118,22 @@ const metrics = computed(() => [
     ),
   },
 ]);
+
+const drilldown = ref({ metric: '', label: '', value: '' });
+const isDrilldownOpen = ref(false);
+
+const openDrilldown = metric => {
+  drilldown.value = {
+    metric: metric.metric,
+    label: metric.label,
+    value: metric.value,
+  };
+  isDrilldownOpen.value = true;
+};
+
+const closeDrilldown = () => {
+  isDrilldownOpen.value = false;
+};
 </script>
 
 <template>
@@ -144,6 +169,8 @@ const metrics = computed(() => [
             :trend="metric.trend"
             :hint="metric.hint"
             :trend-good="metric.trendGood"
+            :clickable="canDrilldown && Boolean(metric.metric)"
+            @click="openDrilldown(metric)"
           />
         </div>
 
@@ -151,6 +178,17 @@ const metrics = computed(() => [
 
         <QuickLinks />
       </div>
+
+      <AssistantDrilldownDrawer
+        v-if="canDrilldown"
+        :open="isDrilldownOpen"
+        :assistant-id="assistantId"
+        :metric="drilldown.metric"
+        :metric-name="drilldown.label"
+        :metric-value="drilldown.value"
+        :range="selectedRange"
+        @close="closeDrilldown"
+      />
     </template>
   </PageLayout>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/composables/useReportDrilldown.js b/app/javascript/dashboard/routes/dashboard/settings/reports/composables/useReportDrilldown.js
index 7c37cd9cc..8309ed360 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/composables/useReportDrilldown.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/composables/useReportDrilldown.js
@@ -1,7 +1,13 @@
 import { computed, ref } from 'vue';
 import ReportsAPI from 'dashboard/api/reports';
 
-export function useReportDrilldown() {
+// `fetcher` is any `({ ...request, page, signal }) => Promise` returning the
+// shared drilldown envelope (`{ data: { meta, payload } }`), so the same paging
+// and abort machinery backs both the reports and Captain assistant drilldowns.
+// The default is wrapped so `ReportsAPI` stays the receiver when invoked.
+export function useReportDrilldown(
+  fetcher = params => ReportsAPI.getDrilldown(params)
+) {
   const activeRequest = ref(null);
   const records = ref([]);
   const meta = ref({});
@@ -20,17 +26,7 @@ export function useReportDrilldown() {
   const isCurrentRequest = token =>
     token === requestToken && !!activeRequest.value;
 
-  const requestFingerprint = request =>
-    JSON.stringify({
-      metric: request.metric,
-      bucketTimestamp: request.bucketTimestamp,
-      from: request.from,
-      to: request.to,
-      type: request.type,
-      id: request.id,
-      groupBy: request.groupBy,
-      businessHours: request.businessHours,
-    });
+  const requestFingerprint = request => JSON.stringify(request);
 
   const abortActiveRequest = () => {
     if (!activeRequestController) return;
@@ -55,7 +51,7 @@ export function useReportDrilldown() {
     hasError.value = false;
 
     try {
-      const response = await ReportsAPI.getDrilldown({
+      const response = await fetcher({
         ...request,
         page,
         signal: controller.signal,
diff --git a/enterprise/app/builders/captain/assistant_drilldown_builder.rb b/enterprise/app/builders/captain/assistant_drilldown_builder.rb
index b98aa7620..fb5d3a7e8 100644
--- a/enterprise/app/builders/captain/assistant_drilldown_builder.rb
+++ b/enterprise/app/builders/captain/assistant_drilldown_builder.rb
@@ -1,6 +1,6 @@
 # Lists the underlying records behind a single Captain assistant stat card, so a
 # viewer can drill from an aggregate (e.g. "auto-resolution 42%") into the exact
-# conversations or messages that produced it.
+# conversations that produced it.
 #
 # The window is resolved by Captain::AssistantStatsWindow from the same `range`
 # and `timezone_offset` the stat card used, so the drilldown covers precisely the
@@ -11,10 +11,8 @@ class Captain::AssistantDrilldownBuilder
   RESOLVED_EVENT_NAMES = Captain::AssistantStatsBuilder::RESOLVED_EVENT_NAMES
   HANDOFF_EVENT_NAMES = Captain::AssistantStatsBuilder::HANDOFF_EVENT_NAMES
 
-  # Metrics whose records are individual messages rather than conversations.
-  MESSAGE_METRICS = %w[hours_saved].freeze
   SUPPORTED_METRICS = %w[
-    conversations_handled auto_resolution_rate handoff_rate hours_saved reopen_rate conversation_depth
+    conversations_handled auto_resolution_rate handoff_rate reopen_rate
   ].freeze
 
   DEFAULT_PAGE = 1
@@ -43,21 +41,14 @@ class Captain::AssistantDrilldownBuilder
   def meta
     {
       metric: metric,
-      record_type: record_type,
       current_page: current_page,
       per_page: per_page,
       total_count: paginated_records.total_count,
-      conversation_count: conversation_count,
+      conversation_count: paginated_records.total_count,
       range: { since: range.first.to_i, until: range.last.to_i }
     }
   end
 
-  def conversation_count
-    return paginated_records.total_count unless message_metric?
-
-    drilldown_scope.except(:includes).reorder(nil).distinct.count(:conversation_id)
-  end
-
   def paginated_records
     @paginated_records ||= drilldown_scope.page(current_page).per(per_page)
   end
@@ -67,9 +58,7 @@ class Captain::AssistantDrilldownBuilder
     when 'conversations_handled' then handled_conversations
     when 'auto_resolution_rate' then conversations_for(resolved_events.select(:conversation_id))
     when 'handoff_rate' then event_conversations(HANDOFF_EVENT_NAMES)
-    when 'hours_saved' then public_reply_messages
     when 'reopen_rate' then reopened_conversations
-    when 'conversation_depth' then depth_conversations
     else
       raise ArgumentError, "Unsupported assistant drilldown metric: #{metric}"
     end
@@ -88,13 +77,6 @@ class Captain::AssistantDrilldownBuilder
     conversations_for(handled_conversation_ids)
   end
 
-  # Public agent-facing replies the assistant sent; the rows behind hours_saved.
-  def public_reply_messages
-    handled_messages.where(message_type: :outgoing, private: false)
-                    .includes(:sender, conversation: [:assignee, :contact, :inbox])
-                    .reorder(created_at: :desc)
-  end
-
   # Conversations in the handled cohort that recorded one of the given reporting
   # events in the window (resolved or handed-off).
   def event_conversations(event_names)
@@ -129,11 +111,6 @@ class Captain::AssistantDrilldownBuilder
     conversations_for(ids)
   end
 
-  # Conversations the assistant sent at least one public reply in; the denominator behind conversation_depth.
-  def depth_conversations
-    conversations_for(handled_messages.where(message_type: :outgoing, private: false).select(:conversation_id))
-  end
-
   def conversations_for(conversation_ids)
     account.conversations
            .where(id: conversation_ids)
@@ -147,10 +124,6 @@ class Captain::AssistantDrilldownBuilder
 
   def metric = params[:metric].to_s
 
-  def message_metric? = MESSAGE_METRICS.include?(metric)
-
-  def record_type = message_metric? ? 'message' : 'conversation'
-
   def current_page = [params[:page].to_i, DEFAULT_PAGE].max
 
   def per_page